@visitwonders/assembly 0.1.0

package/dist/layout/grid-css-086976eb41686e3714554f56c098d3d5.css

@@ -0,0 +1,155 @@
+/* <inline>/src/layout/grid-css-086976eb41686e3714554f56c098d3d5.css */
+
+  .grid_e46af672c {
+    display: grid;
+  }
+
+  /* Inline */
+  .grid_e46af672c[data-inline="true"] {
+    display: inline-grid;
+  }
+
+  /* Fixed column counts */
+  .grid_e46af672c[data-columns="1"] {
+    grid-template-columns: repeat(1, 1fr);
+  }
+  .grid_e46af672c[data-columns="2"] {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .grid_e46af672c[data-columns="3"] {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .grid_e46af672c[data-columns="4"] {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  .grid_e46af672c[data-columns="5"] {
+    grid-template-columns: repeat(5, 1fr);
+  }
+  .grid_e46af672c[data-columns="6"] {
+    grid-template-columns: repeat(6, 1fr);
+  }
+
+  /* Auto columns with min-child-width */
+  .grid_e46af672c[data-columns="auto"][data-min-child-width="xs"] {
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(var(--grid-min-child-width-xs), 1fr)
+    );
+  }
+  .grid_e46af672c[data-columns="auto"][data-min-child-width="sm"] {
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(var(--grid-min-child-width-sm), 1fr)
+    );
+  }
+  .grid_e46af672c[data-columns="auto"][data-min-child-width="md"] {
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(var(--grid-min-child-width-md), 1fr)
+    );
+  }
+  .grid_e46af672c[data-columns="auto"][data-min-child-width="lg"] {
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(var(--grid-min-child-width-lg), 1fr)
+    );
+  }
+  .grid_e46af672c[data-columns="auto"][data-min-child-width="xl"] {
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(var(--grid-min-child-width-xl), 1fr)
+    );
+  }
+
+  /* Fixed row counts */
+  .grid_e46af672c[data-rows="1"] {
+    grid-template-rows: repeat(1, 1fr);
+  }
+  .grid_e46af672c[data-rows="2"] {
+    grid-template-rows: repeat(2, 1fr);
+  }
+  .grid_e46af672c[data-rows="3"] {
+    grid-template-rows: repeat(3, 1fr);
+  }
+  .grid_e46af672c[data-rows="4"] {
+    grid-template-rows: repeat(4, 1fr);
+  }
+  .grid_e46af672c[data-rows="5"] {
+    grid-template-rows: repeat(5, 1fr);
+  }
+  .grid_e46af672c[data-rows="6"] {
+    grid-template-rows: repeat(6, 1fr);
+  }
+
+  /* Auto rows */
+  .grid_e46af672c[data-rows="auto"] {
+    grid-auto-rows: minmax(min-content, max-content);
+  }
+
+  /* Gap X */
+  .grid_e46af672c[data-gap-x="none"] {
+    column-gap: 0;
+  }
+  .grid_e46af672c[data-gap-x="xs"] {
+    column-gap: var(--spacing-gap-xs);
+  }
+  .grid_e46af672c[data-gap-x="sm"] {
+    column-gap: var(--spacing-gap-sm);
+  }
+  .grid_e46af672c[data-gap-x="md"] {
+    column-gap: var(--spacing-gap-md);
+  }
+  .grid_e46af672c[data-gap-x="lg"] {
+    column-gap: var(--spacing-gap-lg);
+  }
+  .grid_e46af672c[data-gap-x="xl"] {
+    column-gap: var(--spacing-gap-xl);
+  }
+
+  /* Gap Y */
+  .grid_e46af672c[data-gap-y="none"] {
+    row-gap: 0;
+  }
+  .grid_e46af672c[data-gap-y="xs"] {
+    row-gap: var(--spacing-gap-xs);
+  }
+  .grid_e46af672c[data-gap-y="sm"] {
+    row-gap: var(--spacing-gap-sm);
+  }
+  .grid_e46af672c[data-gap-y="md"] {
+    row-gap: var(--spacing-gap-md);
+  }
+  .grid_e46af672c[data-gap-y="lg"] {
+    row-gap: var(--spacing-gap-lg);
+  }
+  .grid_e46af672c[data-gap-y="xl"] {
+    row-gap: var(--spacing-gap-xl);
+  }
+
+  /* Align (items on block axis) */
+  .grid_e46af672c[data-align="start"] {
+    align-items: start;
+  }
+  .grid_e46af672c[data-align="center"] {
+    align-items: center;
+  }
+  .grid_e46af672c[data-align="end"] {
+    align-items: end;
+  }
+  .grid_e46af672c[data-align="stretch"] {
+    align-items: stretch;
+  }
+
+  /* Justify (items on inline axis) */
+  .grid_e46af672c[data-justify="start"] {
+    justify-items: start;
+  }
+  .grid_e46af672c[data-justify="center"] {
+    justify-items: center;
+  }
+  .grid_e46af672c[data-justify="end"] {
+    justify-items: end;
+  }
+  .grid_e46af672c[data-justify="stretch"] {
+    justify-items: stretch;
+  }

package/dist/layout/grid-item-css-8d0f842568d1e8345ac709bdf2ed6745.css

@@ -0,0 +1,122 @@
+/* <inline>/src/layout/grid-item-css-8d0f842568d1e8345ac709bdf2ed6745.css */
+
+  .grid-item_e1f8d62c1 {
+    /* No default styles needed */
+  }
+
+  /* Column spanning */
+  .grid-item_e1f8d62c1[data-col-span="1"] {
+    grid-column: span 1;
+  }
+  .grid-item_e1f8d62c1[data-col-span="2"] {
+    grid-column: span 2;
+  }
+  .grid-item_e1f8d62c1[data-col-span="3"] {
+    grid-column: span 3;
+  }
+  .grid-item_e1f8d62c1[data-col-span="4"] {
+    grid-column: span 4;
+  }
+  .grid-item_e1f8d62c1[data-col-span="5"] {
+    grid-column: span 5;
+  }
+  .grid-item_e1f8d62c1[data-col-span="6"] {
+    grid-column: span 6;
+  }
+  .grid-item_e1f8d62c1[data-col-span="full"] {
+    grid-column: 1 / -1;
+  }
+
+  /* Row spanning */
+  .grid-item_e1f8d62c1[data-row-span="1"] {
+    grid-row: span 1;
+  }
+  .grid-item_e1f8d62c1[data-row-span="2"] {
+    grid-row: span 2;
+  }
+  .grid-item_e1f8d62c1[data-row-span="3"] {
+    grid-row: span 3;
+  }
+  .grid-item_e1f8d62c1[data-row-span="4"] {
+    grid-row: span 4;
+  }
+  .grid-item_e1f8d62c1[data-row-span="5"] {
+    grid-row: span 5;
+  }
+  .grid-item_e1f8d62c1[data-row-span="6"] {
+    grid-row: span 6;
+  }
+
+  /* Column start */
+  .grid-item_e1f8d62c1[data-col-start="1"] {
+    grid-column-start: 1;
+  }
+  .grid-item_e1f8d62c1[data-col-start="2"] {
+    grid-column-start: 2;
+  }
+  .grid-item_e1f8d62c1[data-col-start="3"] {
+    grid-column-start: 3;
+  }
+  .grid-item_e1f8d62c1[data-col-start="4"] {
+    grid-column-start: 4;
+  }
+  .grid-item_e1f8d62c1[data-col-start="5"] {
+    grid-column-start: 5;
+  }
+  .grid-item_e1f8d62c1[data-col-start="6"] {
+    grid-column-start: 6;
+  }
+  .grid-item_e1f8d62c1[data-col-start="7"] {
+    grid-column-start: 7;
+  }
+
+  /* Row start */
+  .grid-item_e1f8d62c1[data-row-start="1"] {
+    grid-row-start: 1;
+  }
+  .grid-item_e1f8d62c1[data-row-start="2"] {
+    grid-row-start: 2;
+  }
+  .grid-item_e1f8d62c1[data-row-start="3"] {
+    grid-row-start: 3;
+  }
+  .grid-item_e1f8d62c1[data-row-start="4"] {
+    grid-row-start: 4;
+  }
+  .grid-item_e1f8d62c1[data-row-start="5"] {
+    grid-row-start: 5;
+  }
+  .grid-item_e1f8d62c1[data-row-start="6"] {
+    grid-row-start: 6;
+  }
+  .grid-item_e1f8d62c1[data-row-start="7"] {
+    grid-row-start: 7;
+  }
+
+  /* Align self */
+  .grid-item_e1f8d62c1[data-align-self="start"] {
+    align-self: start;
+  }
+  .grid-item_e1f8d62c1[data-align-self="center"] {
+    align-self: center;
+  }
+  .grid-item_e1f8d62c1[data-align-self="end"] {
+    align-self: end;
+  }
+  .grid-item_e1f8d62c1[data-align-self="stretch"] {
+    align-self: stretch;
+  }
+
+  /* Justify self */
+  .grid-item_e1f8d62c1[data-justify-self="start"] {
+    justify-self: start;
+  }
+  .grid-item_e1f8d62c1[data-justify-self="center"] {
+    justify-self: center;
+  }
+  .grid-item_e1f8d62c1[data-justify-self="end"] {
+    justify-self: end;
+  }
+  .grid-item_e1f8d62c1[data-justify-self="stretch"] {
+    justify-self: stretch;
+  }

package/dist/layout/grid-item.js

@@ -0,0 +1,13 @@
+import "./grid-item-css-8d0f842568d1e8345ac709bdf2ed6745.css"
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
+
+;
+
+const GridItem = setComponentTemplate(precompileTemplate("\n\n<div class=\"grid-item_e1f8d62c1\" data-col-span={{@colSpan}} data-row-span={{@rowSpan}} data-col-start={{@colStart}} data-row-start={{@rowStart}} data-align-self={{@alignSelf}} data-justify-self={{@justifySelf}} ...attributes>\n  {{yield}}\n</div>", {
+  strictMode: true
+}), templateOnly());
+
+export { GridItem as default };
+//# sourceMappingURL=grid-item.js.map

package/dist/layout/grid-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-item.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/layout/grid.js

@@ -0,0 +1,96 @@
+import "./grid-css-086976eb41686e3714554f56c098d3d5.css"
+import Component from '@glimmer/component';
+import GridItem from './grid-item.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+;
+
+class Grid extends Component {
+  static Item = GridItem;
+  get columns() {
+    return this.args.columns ?? 1;
+  }
+  get rows() {
+    return this.args.rows;
+  }
+  get minChildWidth() {
+    return this.args.minChildWidth ?? 'md';
+  }
+  get gap() {
+    return this.args.gap ?? 'md';
+  }
+  get gapX() {
+    return this.args.gapX ?? this.gap;
+  }
+  get gapY() {
+    return this.args.gapY ?? this.gap;
+  }
+  get align() {
+    return this.args.align ?? 'stretch';
+  }
+  get justify() {
+    return this.args.justify ?? 'stretch';
+  }
+  get inline() {
+    return this.args.inline ?? false;
+  }
+  // Column classification
+  get isAutoColumns() {
+    return this.columns === 'auto';
+  }
+  get isTemplateColumns() {
+    return typeof this.columns === 'string' && this.columns !== 'auto';
+  }
+  get isCountColumns() {
+    return typeof this.columns === 'number';
+  }
+  get columnsDataValue() {
+    if (this.isCountColumns) return this.columns;
+    if (this.isAutoColumns) return 'auto';
+    return 'custom';
+  }
+  get columnsStyle() {
+    if (this.isTemplateColumns) {
+      return `grid-template-columns: ${this.columns};`;
+    }
+    return null;
+  }
+  // Row classification
+  get isAutoRows() {
+    return this.rows === 'auto';
+  }
+  get isTemplateRows() {
+    return typeof this.rows === 'string' && this.rows !== 'auto';
+  }
+  get isCountRows() {
+    return typeof this.rows === 'number';
+  }
+  get rowsDataValue() {
+    if (this.rows === undefined) return undefined;
+    if (this.isCountRows) return this.rows;
+    if (this.isAutoRows) return 'auto';
+    return 'custom';
+  }
+  get rowsStyle() {
+    if (this.isTemplateRows) {
+      return `grid-template-rows: ${this.rows};`;
+    }
+    return null;
+  }
+  get style() {
+    const styles = [this.columnsStyle, this.rowsStyle].filter(Boolean);
+    return styles.length > 0 ? styles.join(' ') : null;
+  }
+  static {
+    setComponentTemplate(precompileTemplate("\n\n<div class=\"grid_e46af672c\" data-columns={{this.columnsDataValue}} data-rows={{this.rowsDataValue}} data-min-child-width={{if this.isAutoColumns this.minChildWidth}} data-gap-x={{this.gapX}} data-gap-y={{this.gapY}} data-align={{this.align}} data-justify={{this.justify}} data-inline={{this.inline}} style={{this.style}} ...attributes>\n  {{yield Grid.Item}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        Grid
+      })
+    }), this);
+  }
+}
+
+export { GridItem, Grid as default };
+//# sourceMappingURL=grid.js.map

package/dist/layout/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/layout/h-stack.js

@@ -0,0 +1,14 @@
+import Stack from './stack.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
+
+const HStack = setComponentTemplate(precompileTemplate("<Stack @direction=\"row\" @gap={{@gap}} @align={{@align}} @justify={{@justify}} @wrap={{@wrap}} @inline={{@inline}} ...attributes>\n  {{yield}}\n</Stack>", {
+  strictMode: true,
+  scope: () => ({
+    Stack
+  })
+}), templateOnly());
+
+export { HStack as default };
+//# sourceMappingURL=h-stack.js.map

package/dist/layout/h-stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"h-stack.js","sources":["../../src/layout/h-stack.gts"],"sourcesContent":["import type { TOC } from '@ember/component/template-only';\nimport Stack from './stack.gts';\n\nexport interface HStackSignature {\n  Element: HTMLDivElement;\n  Args: {\n    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n    justify?: 'start' | 'center' | 'end' | 'between';\n    wrap?: boolean;\n    inline?: boolean;\n  };\n  Blocks: {\n    default: [];\n  };\n}\n\nconst HStack: TOC<HStackSignature> = <template>\n  <Stack\n    @direction=\"row\"\n    @gap={{@gap}}\n    @align={{@align}}\n    @justify={{@justify}}\n    @wrap={{@wrap}}\n    @inline={{@inline}}\n    ...attributes\n  >\n    {{yield}}\n  </Stack>\n</template>;\n\nexport default HStack;\n"],"names":["HStack","setComponentTemplate","precompileTemplate","strictMode","scope","Stack","templateOnly"],"mappings":";;;;;AAiBA,MAAMA,MAAY,GAAAC,oBAAA,CAAmBC,kBAAA,CAAA,2JAAA,EAYrC;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}

package/dist/layout/index.js

@@ -0,0 +1,7 @@
+export { default as Stack } from './stack.js';
+export { default as HStack } from './h-stack.js';
+export { default as VStack } from './v-stack.js';
+export { default as Grid } from './grid.js';
+export { default as GridItem } from './grid-item.js';
+export { default as Divider } from './divider.js';
+//# sourceMappingURL=index.js.map

package/dist/layout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/layout/stack-css-f094dc4a0a45b6af2acedca81dcce289.css

@@ -0,0 +1,77 @@
+/* <inline>/src/layout/stack-css-f094dc4a0a45b6af2acedca81dcce289.css */
+
+  .stack_ea2819afb {
+    display: flex;
+  }
+
+  /* Inline */
+  .stack_ea2819afb[data-inline="true"] {
+    display: inline-flex;
+  }
+
+  /* Direction */
+  .stack_ea2819afb[data-direction="row"] {
+    flex-direction: row;
+  }
+  .stack_ea2819afb[data-direction="column"] {
+    flex-direction: column;
+  }
+
+  /* Gap */
+  .stack_ea2819afb[data-gap="none"] {
+    gap: 0;
+  }
+  .stack_ea2819afb[data-gap="xs"] {
+    gap: var(--spacing-gap-xs);
+  }
+  .stack_ea2819afb[data-gap="sm"] {
+    gap: var(--spacing-gap-sm);
+  }
+  .stack_ea2819afb[data-gap="md"] {
+    gap: var(--spacing-gap-md);
+  }
+  .stack_ea2819afb[data-gap="lg"] {
+    gap: var(--spacing-gap-lg);
+  }
+  .stack_ea2819afb[data-gap="xl"] {
+    gap: var(--spacing-gap-xl);
+  }
+
+  /* Align (cross-axis) */
+  .stack_ea2819afb[data-align="start"] {
+    align-items: flex-start;
+  }
+  .stack_ea2819afb[data-align="center"] {
+    align-items: center;
+  }
+  .stack_ea2819afb[data-align="end"] {
+    align-items: flex-end;
+  }
+  .stack_ea2819afb[data-align="stretch"] {
+    align-items: stretch;
+  }
+  .stack_ea2819afb[data-align="baseline"] {
+    align-items: baseline;
+  }
+
+  /* Justify (main-axis) */
+  .stack_ea2819afb[data-justify="start"] {
+    justify-content: flex-start;
+  }
+  .stack_ea2819afb[data-justify="center"] {
+    justify-content: center;
+  }
+  .stack_ea2819afb[data-justify="end"] {
+    justify-content: flex-end;
+  }
+  .stack_ea2819afb[data-justify="between"] {
+    justify-content: space-between;
+  }
+
+  /* Wrap */
+  .stack_ea2819afb[data-wrap="true"] {
+    flex-wrap: wrap;
+  }
+  .stack_ea2819afb[data-wrap="false"] {
+    flex-wrap: nowrap;
+  }

package/dist/layout/stack.js

@@ -0,0 +1,32 @@
+import "./stack-css-f094dc4a0a45b6af2acedca81dcce289.css"
+import Component from '@glimmer/component';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+;
+
+class Stack extends Component {
+  get gap() {
+    return this.args.gap ?? 'md';
+  }
+  get align() {
+    return this.args.align ?? (this.args.direction === 'row' ? 'center' : 'stretch');
+  }
+  get justify() {
+    return this.args.justify ?? 'start';
+  }
+  get wrap() {
+    return this.args.wrap ?? false;
+  }
+  get inline() {
+    return this.args.inline ?? false;
+  }
+  static {
+    setComponentTemplate(precompileTemplate("\n\n<div class=\"stack_ea2819afb\" data-direction={{@direction}} data-gap={{this.gap}} data-align={{this.align}} data-justify={{this.justify}} data-wrap={{this.wrap}} data-inline={{this.inline}} ...attributes>\n  {{yield}}\n</div>", {
+      strictMode: true
+    }), this);
+  }
+}
+
+export { Stack as default };
+//# sourceMappingURL=stack.js.map

package/dist/layout/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/layout/v-stack.js

@@ -0,0 +1,14 @@
+import Stack from './stack.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
+
+const VStack = setComponentTemplate(precompileTemplate("<Stack @direction=\"column\" @gap={{@gap}} @align={{@align}} @justify={{@justify}} @inline={{@inline}} ...attributes>\n  {{yield}}\n</Stack>", {
+  strictMode: true,
+  scope: () => ({
+    Stack
+  })
+}), templateOnly());
+
+export { VStack as default };
+//# sourceMappingURL=v-stack.js.map

package/dist/layout/v-stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"v-stack.js","sources":["../../src/layout/v-stack.gts"],"sourcesContent":["import type { TOC } from '@ember/component/template-only';\nimport Stack from './stack.gts';\n\nexport interface VStackSignature {\n  Element: HTMLDivElement;\n  Args: {\n    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n    align?: 'start' | 'center' | 'end' | 'stretch';\n    justify?: 'start' | 'center' | 'end' | 'between';\n    inline?: boolean;\n  };\n  Blocks: {\n    default: [];\n  };\n}\n\nconst VStack: TOC<VStackSignature> = <template>\n  <Stack\n    @direction=\"column\"\n    @gap={{@gap}}\n    @align={{@align}}\n    @justify={{@justify}}\n    @inline={{@inline}}\n    ...attributes\n  >\n    {{yield}}\n  </Stack>\n</template>;\n\nexport default VStack;\n"],"names":["VStack","setComponentTemplate","precompileTemplate","strictMode","scope","Stack","templateOnly"],"mappings":";;;;;AAgBA,MAAMA,MAAY,GAAAC,oBAAA,CAAmBC,kBAAA,CAAA,8IAAA,EAWrC;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}

package/dist/media/icon.css

@@ -0,0 +1,43 @@
+/* src/media/icon.css */
+/* ===================================
+ * Icon Component
+ * =================================== */
+
+.icon_ef535ce5e {
+  /* Layout */
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
+
+  /* Color inheritance */
+  color: currentColor;
+}
+
+/* ===================================
+ * Sizes
+ * =================================== */
+
+.icon_ef535ce5e[data-size="xs"] {
+  width: 12px;
+  height: 12px;
+}
+
+.icon_ef535ce5e[data-size="sm"] {
+  width: 16px;
+  height: 16px;
+}
+
+.icon_ef535ce5e[data-size="md"] {
+  width: 20px;
+  height: 20px;
+}
+
+.icon_ef535ce5e[data-size="lg"] {
+  width: 24px;
+  height: 24px;
+}
+
+.icon_ef535ce5e[data-size="xl"] {
+  width: 32px;
+  height: 32px;
+}

package/dist/media/icon.js

@@ -0,0 +1,71 @@
+import "./icon.css"
+import Component from '@glimmer/component';
+import { modifier } from 'ember-modifier';
+import { createElement } from 'lucide';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+;
+
+/** Size preset to pixel mapping */const SIZE_MAP = {
+  xs: 12,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 32
+};
+class Icon extends Component {
+  /** Returns the data-size attribute value for named sizes */get dataSize() {
+    const size = this.args.size ?? 'md';
+    return typeof size === 'string' ? size : undefined;
+  }
+  /** Returns pixel size for the icon */
+  get pixelSize() {
+    const size = this.args.size ?? 'md';
+    return typeof size === 'number' ? size : SIZE_MAP[size];
+  }
+  /** Returns true if using a custom numeric size (needs inline styles) */
+  get isCustomSize() {
+    return typeof this.args.size === 'number';
+  }
+  renderIcon = modifier((element, [iconNode, pixelSize, dataSize, isCustomSize, strokeWidth, label]) => {
+    const icon = createElement(iconNode);
+    // Apply class
+    icon.classList.add('icon');
+    // Apply size
+    icon.setAttribute('width', String(pixelSize));
+    icon.setAttribute('height', String(pixelSize));
+    // Apply data-size for named sizes (CSS handles styling)
+    if (dataSize) {
+      icon.setAttribute('data-size', dataSize);
+    }
+    // Apply custom size via inline style if numeric
+    if (isCustomSize) {
+      icon.style.width = `${pixelSize}px`;
+      icon.style.height = `${pixelSize}px`;
+    }
+    // Apply stroke width
+    if (strokeWidth !== undefined) {
+      icon.setAttribute('stroke-width', String(strokeWidth));
+    }
+    // Apply accessibility attributes
+    if (label) {
+      icon.setAttribute('role', 'img');
+      icon.setAttribute('aria-label', label);
+    } else {
+      icon.setAttribute('aria-hidden', 'true');
+    }
+    // Replace the placeholder element with the SVG
+    if (element.parentNode) {
+      element.parentNode.replaceChild(icon, element);
+    }
+  });
+  static {
+    setComponentTemplate(precompileTemplate("<svg {{this.renderIcon @icon this.pixelSize this.dataSize this.isCustomSize @strokeWidth @label}} />", {
+      strictMode: true
+    }), this);
+  }
+}
+
+export { Icon as default };
+//# sourceMappingURL=icon.js.map

package/dist/media/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}