@elmethis/qwik 1.0.0-alpha.21 → 1.0.0-alpha.23

package/lib/index.qwik.cjs

@@ -3341,12 +3341,12 @@ const styles$r = {
   "plus-button": "_plus-button_1cg4b_64",
   "submit-button": "_submit-button_1cg4b_81"
 };
-const panel = "_panel_8yo2s_1";
+const panel$1 = "_panel_8yo2s_1";
 const empty = "_empty_8yo2s_16";
 const form = "_form_8yo2s_86";
 const error$1 = "_error_8yo2s_135";
 const styles$q = {
-  panel,
+  panel: panel$1,
   empty,
   "prompt-row": "_prompt-row_8yo2s_23",
   "prompt-row-active": "_prompt-row-active_8yo2s_34",
@@ -7506,13 +7506,13 @@ const ElmToggleTheme = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$
     ], 3, null)
   ], 2, "7Z_1"), 1, "7Z_2");
 }, "ElmToggleTheme_component_UCPPH0ZjWO4"));
-const container = "_container_fdajv_1";
-const icon = "_icon_fdajv_23";
-const chunk = "_chunk_fdajv_38";
-const chevron = "_chevron_fdajv_42";
+const container = "_container_19tkl_1";
+const icon = "_icon_19tkl_23";
+const chunk = "_chunk_19tkl_36";
+const chevron = "_chevron_19tkl_41";
 const styles$5 = {
   container,
-  "link-container": "_link-container_fdajv_9",
+  "link-container": "_link-container_19tkl_9",
   icon,
   chunk,
   chevron
@@ -7534,24 +7534,22 @@ const ElmBreadcrumb = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1
     }, {
       class: styles$5["link-container"]
     }, [
-      /* @__PURE__ */ core$1._jsxSorted("span", null, {
-        class: styles$5.icon
-      }, /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, {
+      /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, {
         d: index === 0 ? js.mdiHome : index === _rawProps.links.length - 1 ? js.mdiApplicationOutline : js.mdiFolderOpen
       }, {
-        size: "1.25em"
-      }, null, 3, "wL_0"), 1, null),
+        class: styles$5.icon,
+        size: "1rem"
+      }, null, 3, "wL_0"),
       /* @__PURE__ */ core$1._jsxSorted("span", null, {
         class: styles$5.chunk
-      }, /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, null, core$1._wrapProp(link2, "text"), 1, "wL_1"), 1, null)
+      }, core$1._wrapProp(link2, "text"), 1, null)
     ], 0, null),
-    _rawProps.links.length !== index + 1 && /* @__PURE__ */ core$1._jsxSorted("span", null, {
-      class: styles$5.chevron
-    }, /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, null, {
+    _rawProps.links.length !== index + 1 && /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, null, {
+      class: styles$5.chevron,
       d: js.mdiChevronRight,
-      size: "1em"
-    }, null, 3, "wL_2"), 1, "wL_3")
-  ], 1, "wL_4")), 0, "wL_5");
+      size: "1rem"
+    }, null, 3, "wL_1")
+  ], 1, "wL_2")), 0, "wL_3");
 }, "ElmBreadcrumb_component_Bm4cHEZjNRM"));
 const wrapper = "_wrapper_1uubg_1";
 const partial = "_partial_1uubg_30";
@@ -7824,30 +7822,33 @@ const ElmColorPrimitiveSample = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__
     ], 1, _rawProps2.hue))
   ], 1, "MO_1");
 }, "ElmColorPrimitiveSample_component_X8o8xJN064U"));
-const toolbar = "_toolbar_x6o9x_6";
-const panels = "_panels_x6o9x_33";
-const header = "_header_x6o9x_38";
-const body = "_body_x6o9x_49";
-const group = "_group_x6o9x_63";
-const surface = "_surface_x6o9x_86";
-const foreground = "_foreground_x6o9x_97";
+const toolbar = "_toolbar_6i1j1_6";
+const panels = "_panels_6i1j1_33";
+const header = "_header_6i1j1_38";
+const body = "_body_6i1j1_49";
+const group = "_group_6i1j1_63";
+const panel = "_panel_6i1j1_33";
+const surface = "_surface_6i1j1_86";
+const foreground = "_foreground_6i1j1_97";
 const styles$2 = {
-  "elm-color-semantic-sample": "_elm-color-semantic-sample_x6o9x_1",
+  "elm-color-semantic-sample": "_elm-color-semantic-sample_6i1j1_1",
   toolbar,
-  "mode-toggle": "_mode-toggle_x6o9x_11",
-  "mode-toggle-icon": "_mode-toggle-icon_x6o9x_24",
+  "mode-toggle": "_mode-toggle_6i1j1_11",
+  "mode-toggle-icon": "_mode-toggle-icon_6i1j1_24",
   panels,
   header,
   body,
-  "section-title": "_section-title_x6o9x_56",
+  "section-title": "_section-title_6i1j1_56",
   group,
+  panel,
+  "panel-body": "_panel-body_6i1j1_72",
   surface,
   foreground,
-  "accent-pair": "_accent-pair_x6o9x_102",
-  "color-sample-container": "_color-sample-container_x6o9x_112",
-  "color-sample": "_color-sample_x6o9x_112",
-  "color-sample-bg": "_color-sample-bg_x6o9x_121",
-  "color-sample-name": "_color-sample-name_x6o9x_127"
+  "accent-pair": "_accent-pair_6i1j1_102",
+  "color-sample-container": "_color-sample-container_6i1j1_112",
+  "color-sample": "_color-sample_6i1j1_112",
+  "color-sample-bg": "_color-sample-bg_6i1j1_121",
+  "color-sample-name": "_color-sample-name_6i1j1_127"
 };
 const _hf0$1 = (p0, p1) => p0.copiedToken.value === p1 ? "copied!" : p1;
 const _hf1$1 = (p0) => ({
@@ -7994,12 +7995,17 @@ const ElmColorSemanticSample = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__
     return (
       // `color-scheme` drives native light-dark() token resolution;
       // `data-theme` covers the few non-color overrides that can't use it.
-      /* @__PURE__ */ core$1._jsxSorted("html", {
+      // Plain elements (not <html>/<body>) so the sample can be nested
+      // inside a page; `color-scheme`/`data-theme` apply to any element.
+      /* @__PURE__ */ core$1._jsxSorted("div", {
         "data-theme": core$1._wrapProp(props, "theme"),
         style: core$1._fnSignal(_hf1$1, [
           props
         ])
-      }, null, /* @__PURE__ */ core$1._jsxSorted("body", null, {
+      }, {
+        class: styles$2.panel
+      }, /* @__PURE__ */ core$1._jsxSorted("div", null, {
+        class: styles$2["panel-body"],
         style: {
           backgroundColor: "var(--elmethis-color-surface-base)"
         }

package/lib/index.qwik.mjs

@@ -3319,12 +3319,12 @@ const styles$r = {
   "plus-button": "_plus-button_1cg4b_64",
   "submit-button": "_submit-button_1cg4b_81"
 };
-const panel = "_panel_8yo2s_1";
+const panel$1 = "_panel_8yo2s_1";
 const empty = "_empty_8yo2s_16";
 const form = "_form_8yo2s_86";
 const error$1 = "_error_8yo2s_135";
 const styles$q = {
-  panel,
+  panel: panel$1,
   empty,
   "prompt-row": "_prompt-row_8yo2s_23",
   "prompt-row-active": "_prompt-row-active_8yo2s_34",
@@ -7484,13 +7484,13 @@ const ElmToggleTheme = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     ], 3, null)
   ], 2, "7Z_1"), 1, "7Z_2");
 }, "ElmToggleTheme_component_UCPPH0ZjWO4"));
-const container = "_container_fdajv_1";
-const icon = "_icon_fdajv_23";
-const chunk = "_chunk_fdajv_38";
-const chevron = "_chevron_fdajv_42";
+const container = "_container_19tkl_1";
+const icon = "_icon_19tkl_23";
+const chunk = "_chunk_19tkl_36";
+const chevron = "_chevron_19tkl_41";
 const styles$5 = {
   container,
-  "link-container": "_link-container_fdajv_9",
+  "link-container": "_link-container_19tkl_9",
   icon,
   chunk,
   chevron
@@ -7512,24 +7512,22 @@ const ElmBreadcrumb = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_
     }, {
       class: styles$5["link-container"]
     }, [
-      /* @__PURE__ */ _jsxSorted("span", null, {
-        class: styles$5.icon
-      }, /* @__PURE__ */ _jsxSorted(ElmMdiIcon, {
+      /* @__PURE__ */ _jsxSorted(ElmMdiIcon, {
         d: index === 0 ? mdiHome : index === _rawProps.links.length - 1 ? mdiApplicationOutline : mdiFolderOpen
       }, {
-        size: "1.25em"
-      }, null, 3, "wL_0"), 1, null),
+        class: styles$5.icon,
+        size: "1rem"
+      }, null, 3, "wL_0"),
       /* @__PURE__ */ _jsxSorted("span", null, {
         class: styles$5.chunk
-      }, /* @__PURE__ */ _jsxSorted(ElmInlineText, null, null, _wrapProp(link2, "text"), 1, "wL_1"), 1, null)
+      }, _wrapProp(link2, "text"), 1, null)
     ], 0, null),
-    _rawProps.links.length !== index + 1 && /* @__PURE__ */ _jsxSorted("span", null, {
-      class: styles$5.chevron
-    }, /* @__PURE__ */ _jsxSorted(ElmMdiIcon, null, {
+    _rawProps.links.length !== index + 1 && /* @__PURE__ */ _jsxSorted(ElmMdiIcon, null, {
+      class: styles$5.chevron,
       d: mdiChevronRight,
-      size: "1em"
-    }, null, 3, "wL_2"), 1, "wL_3")
-  ], 1, "wL_4")), 0, "wL_5");
+      size: "1rem"
+    }, null, 3, "wL_1")
+  ], 1, "wL_2")), 0, "wL_3");
 }, "ElmBreadcrumb_component_Bm4cHEZjNRM"));
 const wrapper = "_wrapper_1uubg_1";
 const partial = "_partial_1uubg_30";
@@ -7802,30 +7800,33 @@ const ElmColorPrimitiveSample = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inl
     ], 1, _rawProps2.hue))
   ], 1, "MO_1");
 }, "ElmColorPrimitiveSample_component_X8o8xJN064U"));
-const toolbar = "_toolbar_x6o9x_6";
-const panels = "_panels_x6o9x_33";
-const header = "_header_x6o9x_38";
-const body = "_body_x6o9x_49";
-const group = "_group_x6o9x_63";
-const surface = "_surface_x6o9x_86";
-const foreground = "_foreground_x6o9x_97";
+const toolbar = "_toolbar_6i1j1_6";
+const panels = "_panels_6i1j1_33";
+const header = "_header_6i1j1_38";
+const body = "_body_6i1j1_49";
+const group = "_group_6i1j1_63";
+const panel = "_panel_6i1j1_33";
+const surface = "_surface_6i1j1_86";
+const foreground = "_foreground_6i1j1_97";
 const styles$2 = {
-  "elm-color-semantic-sample": "_elm-color-semantic-sample_x6o9x_1",
+  "elm-color-semantic-sample": "_elm-color-semantic-sample_6i1j1_1",
   toolbar,
-  "mode-toggle": "_mode-toggle_x6o9x_11",
-  "mode-toggle-icon": "_mode-toggle-icon_x6o9x_24",
+  "mode-toggle": "_mode-toggle_6i1j1_11",
+  "mode-toggle-icon": "_mode-toggle-icon_6i1j1_24",
   panels,
   header,
   body,
-  "section-title": "_section-title_x6o9x_56",
+  "section-title": "_section-title_6i1j1_56",
   group,
+  panel,
+  "panel-body": "_panel-body_6i1j1_72",
   surface,
   foreground,
-  "accent-pair": "_accent-pair_x6o9x_102",
-  "color-sample-container": "_color-sample-container_x6o9x_112",
-  "color-sample": "_color-sample_x6o9x_112",
-  "color-sample-bg": "_color-sample-bg_x6o9x_121",
-  "color-sample-name": "_color-sample-name_x6o9x_127"
+  "accent-pair": "_accent-pair_6i1j1_102",
+  "color-sample-container": "_color-sample-container_6i1j1_112",
+  "color-sample": "_color-sample_6i1j1_112",
+  "color-sample-bg": "_color-sample-bg_6i1j1_121",
+  "color-sample-name": "_color-sample-name_6i1j1_127"
 };
 const _hf0$1 = (p0, p1) => p0.copiedToken.value === p1 ? "copied!" : p1;
 const _hf1$1 = (p0) => ({
@@ -7972,12 +7973,17 @@ const ElmColorSemanticSample = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inli
     return (
       // `color-scheme` drives native light-dark() token resolution;
       // `data-theme` covers the few non-color overrides that can't use it.
-      /* @__PURE__ */ _jsxSorted("html", {
+      // Plain elements (not <html>/<body>) so the sample can be nested
+      // inside a page; `color-scheme`/`data-theme` apply to any element.
+      /* @__PURE__ */ _jsxSorted("div", {
         "data-theme": _wrapProp(props, "theme"),
         style: _fnSignal(_hf1$1, [
           props
         ])
-      }, null, /* @__PURE__ */ _jsxSorted("body", null, {
+      }, {
+        class: styles$2.panel
+      }, /* @__PURE__ */ _jsxSorted("div", null, {
+        class: styles$2["panel-body"],
         style: {
           backgroundColor: "var(--elmethis-color-surface-base)"
         }

package/lib/q-manifest.json

@@ -1,6 +1,6 @@
 {
 	"version": "1",
-	"manifestHash": "n44w6k",
+	"manifestHash": "ryop5t",
 	"options": {
 		"target": "lib",
 		"buildMode": "development",
@@ -30,8 +30,8 @@
 	"mapping": {},
 	"bundles": {
 		"../index.qwik.cjs": {
-			"size": 523811,
-			"total": 523811,
+			"size": 523912,
+			"total": 523912,
 			"origins": [
 				"src/components/a2ui/catalog/basic-catalog.tsx",
 				"src/components/a2ui/catalog/block-catalog.tsx",
@@ -208,7 +208,7 @@
 	"assets": {
 		"style.css": {
 			"name": "style.css.css",
-			"size": 77493
+			"size": 77528
 		},
 		"assets/bundle-graph.BqrDAOEV.json": {
 			"name": "bundle-graph.json",

package/lib/style.css

@@ -3045,7 +3045,7 @@ select._field-input_8yo2s_157 {
   box-shadow: 0 0 0.125rem light-dark(rgb(0 0 0 / 30%), rgb(0 0 0 / 60%));
   background-color: light-dark(rgb(255 255 255 / 20%), rgb(0 0 0 / 20%));
 }
-._container_fdajv_1 {
+._container_19tkl_1 {
   display: flex;
   flex-flow: row wrap;
   align-items: center;
@@ -3053,11 +3053,11 @@ select._field-input_8yo2s_157 {
   user-select: none;
 }
 
-._link-container_fdajv_9 {
+._link-container_19tkl_9 {
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 0;
+  gap: 0.25rem;
   box-sizing: border-box;
   padding: 0.25rem;
   border-radius: 0.25rem;
@@ -3067,26 +3067,25 @@ select._field-input_8yo2s_157 {
     opacity 100ms,
     transform 100ms;
 
-  ._icon_fdajv_23 {
+  ._icon_19tkl_23 {
     color: var(--elmethis-color-neutral);
   }
 
   &:hover {
     background-color: oklch(from var(--elmethis-color-primary) l c h / 25%);
-    transform: translateX(-1px) translateY(-1px);
   }
 
   &:active {
-    opacity: 0.5;
-    transform: translateX(1px) translateY(1px);
+    background-color: oklch(from var(--elmethis-color-primary) l c h / 50%);
   }
 }
 
-._chunk_fdajv_38 {
-  padding: 0 0.25rem;
+._chunk_19tkl_36 {
+  color: var(--elmethis-color-neutral);
+  user-select: none;
 }
 
-._chevron_fdajv_42 {
+._chevron_19tkl_41 {
   padding: 0 0.25rem;
   color: var(--elmethis-color-primary);
 }
@@ -3291,17 +3290,17 @@ select._field-input_8yo2s_157 {
     text-align: center;
   }
 }
-._elm-color-semantic-sample_x6o9x_1 {
+._elm-color-semantic-sample_6i1j1_1 {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
 
-  ._toolbar_x6o9x_6 {
+  ._toolbar_6i1j1_6 {
     display: flex;
     justify-content: flex-end;
   }
 
-  ._mode-toggle_x6o9x_11 {
+  ._mode-toggle_6i1j1_11 {
     cursor: pointer;
     display: inline-flex;
     align-items: center;
@@ -3314,7 +3313,7 @@ select._field-input_8yo2s_157 {
     font-family: monospace;
     font-size: 0.75rem;
 
-    ._mode-toggle-icon_x6o9x_24 {
+    ._mode-toggle-icon_6i1j1_24 {
       color: var(--elmethis-color-primary);
     }
 
@@ -3323,12 +3322,12 @@ select._field-input_8yo2s_157 {
     }
   }
 
-  ._panels_x6o9x_33 {
+  ._panels_6i1j1_33 {
     display: flex;
     justify-content: space-around;
   }
 
-  ._header_x6o9x_38 {
+  ._header_6i1j1_38 {
     width: 100%;
     height: 3rem;
     display: flex;
@@ -3339,30 +3338,30 @@ select._field-input_8yo2s_157 {
     font-size: 0.7rem;
   }
 
-  ._body_x6o9x_49 {
+  ._body_6i1j1_49 {
     padding: 1rem;
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
   }
 
-  ._section-title_x6o9x_56 {
+  ._section-title_6i1j1_56 {
     font-size: 0.75rem;
     color: gray;
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
 
-  ._group_x6o9x_63 {
+  ._group_6i1j1_63 {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
   }
 
-  html {
+  ._panel_6i1j1_33 {
     flex: 1;
 
-    body {
+    ._panel-body_6i1j1_72 {
       border: solid 1px oklch(from gray l c h / 25%);
     }
   }
@@ -3376,7 +3375,7 @@ select._field-input_8yo2s_157 {
   }
 }
 
-._surface_x6o9x_86 {
+._surface_6i1j1_86 {
   border-radius: 0.25rem;
   padding: 1.5rem 1rem;
   display: flex;
@@ -3387,12 +3386,12 @@ select._field-input_8yo2s_157 {
   font-size: 0.7rem;
 }
 
-._foreground_x6o9x_97 {
+._foreground_6i1j1_97 {
   font-family: monospace;
   font-size: 0.8rem;
 }
 
-._accent-pair_x6o9x_102 {
+._accent-pair_6i1j1_102 {
   border-radius: 0.25rem;
   padding: 0.75rem 1rem;
   font-family: monospace;
@@ -3402,22 +3401,22 @@ select._field-input_8yo2s_157 {
   gap: 0.25rem;
 }
 
-._color-sample-container_x6o9x_112 {
+._color-sample-container_6i1j1_112 {
   display: flex;
   flex-direction: column;
   gap: 1rem;
 
-  ._color-sample_x6o9x_112 {
+  ._color-sample_6i1j1_112 {
     width: 100%;
   }
 
-  ._color-sample-bg_x6o9x_121 {
+  ._color-sample-bg_6i1j1_121 {
     box-sizing: border-box;
     border-radius: 0.25rem;
     height: 2rem;
   }
 
-  ._color-sample-name_x6o9x_127 {
+  ._color-sample-name_6i1j1_127 {
     margin-block-start: 0.25rem;
     display: block;
     font-size: 0.7rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elmethis/qwik",
-  "version": "1.0.0-alpha.21",
+  "version": "1.0.0-alpha.23",
   "publishConfig": {
     "access": "public"
   },