initial

ts_web/elements/00demo-utils.ts

@@ -0,0 +1,24 @@
+import { html, type TemplateResult } from '@design.estate/dees-element';
+import { injectCssVariables } from './00variables.js';
+
+/**
+ * Wraps a demo template with CSS variable injection
+ * Ensures design system variables are available for component styling
+ */
+export function wrapDemo(templateFn: () => TemplateResult): () => TemplateResult {
+  return () => {
+    // Inject CSS variables into the document
+    injectCssVariables();
+    return templateFn();
+  };
+}
+
+/**
+ * Helper to create demo with automatic CSS injection
+ */
+export function createDemo(template: TemplateResult): () => TemplateResult {
+  return () => {
+    injectCssVariables();
+    return template;
+  };
+}