@vielzeug/refine 26.10.7 → 26.10.10

package/dist/grid-item.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"grid-item.cjs","names":[],"sources":["../src/layout/grid-item/grid-item.ts"],"sourcesContent":["import { bind, define, html, prop } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport styles from './grid-item.css?inline';\n\n/** Grid item component properties */\nexport type OreGridItemProps = {\n  /** Align self vertically within the grid cell */\n  align?: 'start' | 'center' | 'end' | 'stretch';\n  /** Named grid area to place the item into. */\n  area?: string;\n  /** Explicit grid-column value: overrides col-span (e.g. '2 / 5', 'span 3', '1 / -1'). */\n  col?: string;\n  /** Span N columns. Use 'full' to span all columns (1 / -1). */\n  colSpan?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'full';\n  /** Justify self horizontally within the grid cell */\n  justify?: 'start' | 'center' | 'end' | 'stretch';\n  /** Explicit grid-row value: overrides row-span (e.g. '1 / 3', 'span 2'). */\n  row?: string;\n  /** Span N rows. Use 'full' to span all rows (1 / -1). */\n  rowSpan?: '1' | '2' | '3' | '4' | '5' | '6' | 'full';\n};\n\n/**\n * ore-grid-item: A grid cell with declarative placement and span control.\n *\n * Use `col-span` / `row-span` for the common case of spanning columns/rows.\n * Use `col` / `row` for full CSS grid-column / grid-row shorthand power\n * (e.g. explicit placement, mixed span + start, negative lines).\n *\n * @element ore-grid-item\n *\n * @attr {string} area - CSS grid-area value for named-area placement\n * @attr {string} col-span - Columns to span: '1'–'12' | 'full'\n * @attr {string} row-span - Rows to span: '1'–'6' | 'full'\n * @attr {string} col - CSS grid-column value (overrides col-span)\n * @attr {string} row - CSS grid-row value (overrides row-span)\n * @attr {string} align - align-self: 'start' | 'center' | 'end' | 'stretch'\n * @attr {string} justify - justify-self: 'start' | 'center' | 'end' | 'stretch'\n *\n * @slot - Grid item content\n *\n * @example\n * <!-- Span 2 columns -->\n * <ore-grid-item col-span=\"2\">Wide</ore-grid-item>\n *\n * @example\n * <!-- Full-width row -->\n * <ore-grid-item col-span=\"full\">Banner</ore-grid-item>\n *\n * @example\n * <!-- Named area placement -->\n * <ore-grid-item area=\"sidebar\">Nav</ore-grid-item>\n *\n * @example\n * <!-- Explicit placement -->\n * <ore-grid-item col=\"2 / 5\" row=\"1 / 3\">Placed</ore-grid-item>\n */\nexport const GRID_ITEM_TAG = 'ore-grid-item' as const;\ndefine<OreGridItemProps>(GRID_ITEM_TAG, {\n  props: {\n    align: prop.string<'start' | 'center' | 'end' | 'stretch'>(),\n    area: prop.string(),\n    col: prop.string(),\n    colSpan: prop.string<'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'full'>(),\n    justify: prop.string<'start' | 'center' | 'end' | 'stretch'>(),\n    row: prop.string(),\n    rowSpan: prop.string<'1' | '2' | '3' | '4' | '5' | '6' | 'full'>(),\n  },\n  setup(props) {\n    const gridColumn = computed(() => {\n      const col = props.col.value;\n      const span = props.colSpan.value;\n\n      if (col) return col;\n\n      if (span === 'full') return '1 / -1';\n\n      if (span) return `span ${span}`;\n\n      return '';\n    });\n\n    const gridRow = computed(() => {\n      const row = props.row.value;\n      const span = props.rowSpan.value;\n\n      if (row) return row;\n\n      if (span === 'full') return '1 / -1';\n\n      if (span) return `span ${span}`;\n\n      return '';\n    });\n\n    bind({\n      style: {\n        gridArea: props.area,\n        gridColumn,\n        gridRow,\n      },\n    });\n\n    return html`\n      <slot></slot>\n    `;\n  },\n  styles: [styles],\n});\n"],"mappings":"wLA0DA,IAAa,EAAgB,iBAC7B,EAAA,EAAA,OAAA,CAAyB,EAAe,CACtC,MAAO,CACL,MAAO,EAAA,KAAK,OAA+C,EAC3D,KAAM,EAAA,KAAK,OAAO,EAClB,IAAK,EAAA,KAAK,OAAO,EACjB,QAAS,EAAA,KAAK,OAA0F,EACxG,QAAS,EAAA,KAAK,OAA+C,EAC7D,IAAK,EAAA,KAAK,OAAO,EACjB,QAAS,EAAA,KAAK,OAAmD,CACnE,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAa,EAAA,SAAA,KAAe,CAChC,IAAM,EAAM,EAAM,IAAI,MAChB,EAAO,EAAM,QAAQ,MAQ3B,OANI,IAEA,IAAS,OAAe,SAExB,EAAa,QAAQ,IAElB,GACT,CAAC,EAEK,GAAA,EAAU,EAAA,SAAA,KAAe,CAC7B,IAAM,EAAM,EAAM,IAAI,MAChB,EAAO,EAAM,QAAQ,MAQ3B,OANI,IAEA,IAAS,OAAe,SAExB,EAAa,QAAQ,IAElB,GACT,CAAC,EAUD,OARA,EAAA,EAAA,KAAA,CAAK,CACH,MAAO,CACL,SAAU,EAAM,KAChB,aACA,SACF,CACF,CAAC,EAEM,EAAA,IAAI;;KAGb,EACA,OAAQ,CAAC,EAAA,OAAM,CACjB,CAAC"}
+{"version":3,"file":"grid-item.cjs","names":[],"sources":["../src/layout/grid-item/grid-item.ts"],"sourcesContent":["import { bind, define, html, prop } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport styles from './grid-item.css?inline';\n\nconst GRID_ITEM_ALIGNMENTS = ['start', 'center', 'end', 'stretch'] as const;\nconst GRID_ITEM_COL_SPANS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', 'full'] as const;\nconst GRID_ITEM_ROW_SPANS = ['1', '2', '3', '4', '5', '6', 'full'] as const;\n\n/** Grid item component properties */\nexport type OreGridItemProps = {\n  /** Align self vertically within the grid cell */\n  align?: (typeof GRID_ITEM_ALIGNMENTS)[number];\n  /** Named grid area to place the item into. */\n  area?: string;\n  /** Explicit grid-column value: overrides col-span (e.g. '2 / 5', 'span 3', '1 / -1'). */\n  col?: string;\n  /** Span N columns. Use 'full' to span all columns (1 / -1). */\n  colSpan?: (typeof GRID_ITEM_COL_SPANS)[number];\n  /** Justify self horizontally within the grid cell */\n  justify?: (typeof GRID_ITEM_ALIGNMENTS)[number];\n  /** Explicit grid-row value: overrides row-span (e.g. '1 / 3', 'span 2'). */\n  row?: string;\n  /** Span N rows. Use 'full' to span all rows (1 / -1). */\n  rowSpan?: (typeof GRID_ITEM_ROW_SPANS)[number];\n};\n\n/**\n * ore-grid-item: A grid cell with declarative placement and span control.\n *\n * Use `col-span` / `row-span` for the common case of spanning columns/rows.\n * Use `col` / `row` for full CSS grid-column / grid-row shorthand power\n * (e.g. explicit placement, mixed span + start, negative lines).\n *\n * @element ore-grid-item\n *\n * @attr {string} area - CSS grid-area value for named-area placement\n * @attr {string} col-span - Columns to span: '1'–'12' | 'full'\n * @attr {string} row-span - Rows to span: '1'–'6' | 'full'\n * @attr {string} col - CSS grid-column value (overrides col-span)\n * @attr {string} row - CSS grid-row value (overrides row-span)\n * @attr {string} align - align-self: 'start' | 'center' | 'end' | 'stretch'\n * @attr {string} justify - justify-self: 'start' | 'center' | 'end' | 'stretch'\n *\n * @slot - Grid item content\n *\n * @example\n * <!-- Span 2 columns -->\n * <ore-grid-item col-span=\"2\">Wide</ore-grid-item>\n *\n * @example\n * <!-- Full-width row -->\n * <ore-grid-item col-span=\"full\">Banner</ore-grid-item>\n *\n * @example\n * <!-- Named area placement -->\n * <ore-grid-item area=\"sidebar\">Nav</ore-grid-item>\n *\n * @example\n * <!-- Explicit placement -->\n * <ore-grid-item col=\"2 / 5\" row=\"1 / 3\">Placed</ore-grid-item>\n */\nexport const GRID_ITEM_TAG = 'ore-grid-item' as const;\ndefine<OreGridItemProps>(GRID_ITEM_TAG, {\n  props: {\n    align: prop.oneOf(GRID_ITEM_ALIGNMENTS),\n    area: prop.string(),\n    col: prop.string(),\n    colSpan: prop.oneOf(GRID_ITEM_COL_SPANS),\n    justify: prop.oneOf(GRID_ITEM_ALIGNMENTS),\n    row: prop.string(),\n    rowSpan: prop.oneOf(GRID_ITEM_ROW_SPANS),\n  },\n  setup(props) {\n    const gridColumn = computed(() => {\n      const col = props.col.value;\n      const span = props.colSpan.value;\n\n      if (col) return col;\n\n      if (span === 'full') return '1 / -1';\n\n      if (span) return `span ${span}`;\n\n      return '';\n    });\n\n    const gridRow = computed(() => {\n      const row = props.row.value;\n      const span = props.rowSpan.value;\n\n      if (row) return row;\n\n      if (span === 'full') return '1 / -1';\n\n      if (span) return `span ${span}`;\n\n      return '';\n    });\n\n    bind({\n      style: {\n        gridArea: props.area,\n        gridColumn,\n        gridRow,\n      },\n    });\n\n    return html`\n      <slot></slot>\n    `;\n  },\n  styles: [styles],\n});\n"],"mappings":"wLAKA,IAAM,EAAuB,CAAC,QAAS,SAAU,MAAO,SAAS,EAC3D,EAAsB,CAAC,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,KAAM,KAAM,KAAM,MAAM,EAC5F,EAAsB,CAAC,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,MAAM,EAuDpD,EAAgB,iBAC7B,EAAA,EAAA,OAAA,CAAyB,EAAe,CACtC,MAAO,CACL,MAAO,EAAA,KAAK,MAAM,CAAoB,EACtC,KAAM,EAAA,KAAK,OAAO,EAClB,IAAK,EAAA,KAAK,OAAO,EACjB,QAAS,EAAA,KAAK,MAAM,CAAmB,EACvC,QAAS,EAAA,KAAK,MAAM,CAAoB,EACxC,IAAK,EAAA,KAAK,OAAO,EACjB,QAAS,EAAA,KAAK,MAAM,CAAmB,CACzC,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAa,EAAA,SAAA,KAAe,CAChC,IAAM,EAAM,EAAM,IAAI,MAChB,EAAO,EAAM,QAAQ,MAQ3B,OANI,IAEA,IAAS,OAAe,SAExB,EAAa,QAAQ,IAElB,GACT,CAAC,EAEK,GAAA,EAAU,EAAA,SAAA,KAAe,CAC7B,IAAM,EAAM,EAAM,IAAI,MAChB,EAAO,EAAM,QAAQ,MAQ3B,OANI,IAEA,IAAS,OAAe,SAExB,EAAa,QAAQ,IAElB,GACT,CAAC,EAUD,OARA,EAAA,EAAA,KAAA,CAAK,CACH,MAAO,CACL,SAAU,EAAM,KAChB,aACA,SACF,CACF,CAAC,EAEM,EAAA,IAAI;;KAGb,EACA,OAAQ,CAAC,EAAA,OAAM,CACjB,CAAC"}

package/dist/grid-item.js

@@ -1,4 +1,4 @@
-import e from"./layout/grid-item/grid-item.css.js";import{computed as t}from"@vielzeug/ripple";import{bind as n,define as r,html as i,prop as a}from"@vielzeug/ore";var o=`ore-grid-item`;r(o,{props:{align:a.string(),area:a.string(),col:a.string(),colSpan:a.string(),justify:a.string(),row:a.string(),rowSpan:a.string()},setup(e){let r=t(()=>{let t=e.col.value,n=e.colSpan.value;return t||(n===`full`?`1 / -1`:n?`span ${n}`:``)}),a=t(()=>{let t=e.row.value,n=e.rowSpan.value;return t||(n===`full`?`1 / -1`:n?`span ${n}`:``)});return n({style:{gridArea:e.area,gridColumn:r,gridRow:a}}),i`
+import e from"./layout/grid-item/grid-item.css.js";import{computed as t}from"@vielzeug/ripple";import{bind as n,define as r,html as i,prop as a}from"@vielzeug/ore";var o=[`start`,`center`,`end`,`stretch`],s=[`1`,`2`,`3`,`4`,`5`,`6`,`7`,`8`,`9`,`10`,`11`,`12`,`full`],c=[`1`,`2`,`3`,`4`,`5`,`6`,`full`],l=`ore-grid-item`;r(l,{props:{align:a.oneOf(o),area:a.string(),col:a.string(),colSpan:a.oneOf(s),justify:a.oneOf(o),row:a.string(),rowSpan:a.oneOf(c)},setup(e){let r=t(()=>{let t=e.col.value,n=e.colSpan.value;return t||(n===`full`?`1 / -1`:n?`span ${n}`:``)}),a=t(()=>{let t=e.row.value,n=e.rowSpan.value;return t||(n===`full`?`1 / -1`:n?`span ${n}`:``)});return n({style:{gridArea:e.area,gridColumn:r,gridRow:a}}),i`
       <slot></slot>
-    `},styles:[e]});export{o as GRID_ITEM_TAG};
+    `},styles:[e]});export{l as GRID_ITEM_TAG};
 //# sourceMappingURL=grid-item.js.map

package/dist/grid-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid-item.js","names":[],"sources":["../src/layout/grid-item/grid-item.ts"],"sourcesContent":["import { bind, define, html, prop } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport styles from './grid-item.css?inline';\n\n/** Grid item component properties */\nexport type OreGridItemProps = {\n  /** Align self vertically within the grid cell */\n  align?: 'start' | 'center' | 'end' | 'stretch';\n  /** Named grid area to place the item into. */\n  area?: string;\n  /** Explicit grid-column value: overrides col-span (e.g. '2 / 5', 'span 3', '1 / -1'). */\n  col?: string;\n  /** Span N columns. Use 'full' to span all columns (1 / -1). */\n  colSpan?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'full';\n  /** Justify self horizontally within the grid cell */\n  justify?: 'start' | 'center' | 'end' | 'stretch';\n  /** Explicit grid-row value: overrides row-span (e.g. '1 / 3', 'span 2'). */\n  row?: string;\n  /** Span N rows. Use 'full' to span all rows (1 / -1). */\n  rowSpan?: '1' | '2' | '3' | '4' | '5' | '6' | 'full';\n};\n\n/**\n * ore-grid-item: A grid cell with declarative placement and span control.\n *\n * Use `col-span` / `row-span` for the common case of spanning columns/rows.\n * Use `col` / `row` for full CSS grid-column / grid-row shorthand power\n * (e.g. explicit placement, mixed span + start, negative lines).\n *\n * @element ore-grid-item\n *\n * @attr {string} area - CSS grid-area value for named-area placement\n * @attr {string} col-span - Columns to span: '1'–'12' | 'full'\n * @attr {string} row-span - Rows to span: '1'–'6' | 'full'\n * @attr {string} col - CSS grid-column value (overrides col-span)\n * @attr {string} row - CSS grid-row value (overrides row-span)\n * @attr {string} align - align-self: 'start' | 'center' | 'end' | 'stretch'\n * @attr {string} justify - justify-self: 'start' | 'center' | 'end' | 'stretch'\n *\n * @slot - Grid item content\n *\n * @example\n * <!-- Span 2 columns -->\n * <ore-grid-item col-span=\"2\">Wide</ore-grid-item>\n *\n * @example\n * <!-- Full-width row -->\n * <ore-grid-item col-span=\"full\">Banner</ore-grid-item>\n *\n * @example\n * <!-- Named area placement -->\n * <ore-grid-item area=\"sidebar\">Nav</ore-grid-item>\n *\n * @example\n * <!-- Explicit placement -->\n * <ore-grid-item col=\"2 / 5\" row=\"1 / 3\">Placed</ore-grid-item>\n */\nexport const GRID_ITEM_TAG = 'ore-grid-item' as const;\ndefine<OreGridItemProps>(GRID_ITEM_TAG, {\n  props: {\n    align: prop.string<'start' | 'center' | 'end' | 'stretch'>(),\n    area: prop.string(),\n    col: prop.string(),\n    colSpan: prop.string<'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'full'>(),\n    justify: prop.string<'start' | 'center' | 'end' | 'stretch'>(),\n    row: prop.string(),\n    rowSpan: prop.string<'1' | '2' | '3' | '4' | '5' | '6' | 'full'>(),\n  },\n  setup(props) {\n    const gridColumn = computed(() => {\n      const col = props.col.value;\n      const span = props.colSpan.value;\n\n      if (col) return col;\n\n      if (span === 'full') return '1 / -1';\n\n      if (span) return `span ${span}`;\n\n      return '';\n    });\n\n    const gridRow = computed(() => {\n      const row = props.row.value;\n      const span = props.rowSpan.value;\n\n      if (row) return row;\n\n      if (span === 'full') return '1 / -1';\n\n      if (span) return `span ${span}`;\n\n      return '';\n    });\n\n    bind({\n      style: {\n        gridArea: props.area,\n        gridColumn,\n        gridRow,\n      },\n    });\n\n    return html`\n      <slot></slot>\n    `;\n  },\n  styles: [styles],\n});\n"],"mappings":"oKA0DA,IAAa,EAAgB,gBAC7B,EAAyB,EAAe,CACtC,MAAO,CACL,MAAO,EAAK,OAA+C,EAC3D,KAAM,EAAK,OAAO,EAClB,IAAK,EAAK,OAAO,EACjB,QAAS,EAAK,OAA0F,EACxG,QAAS,EAAK,OAA+C,EAC7D,IAAK,EAAK,OAAO,EACjB,QAAS,EAAK,OAAmD,CACnE,EACA,MAAM,EAAO,CACX,IAAM,EAAa,MAAe,CAChC,IAAM,EAAM,EAAM,IAAI,MAChB,EAAO,EAAM,QAAQ,MAQ3B,OANI,IAEA,IAAS,OAAe,SAExB,EAAa,QAAQ,IAElB,GACT,CAAC,EAEK,EAAU,MAAe,CAC7B,IAAM,EAAM,EAAM,IAAI,MAChB,EAAO,EAAM,QAAQ,MAQ3B,OANI,IAEA,IAAS,OAAe,SAExB,EAAa,QAAQ,IAElB,GACT,CAAC,EAUD,OARA,EAAK,CACH,MAAO,CACL,SAAU,EAAM,KAChB,aACA,SACF,CACF,CAAC,EAEM,CAAI;;KAGb,EACA,OAAQ,CAAC,CAAM,CACjB,CAAC"}
+{"version":3,"file":"grid-item.js","names":[],"sources":["../src/layout/grid-item/grid-item.ts"],"sourcesContent":["import { bind, define, html, prop } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport styles from './grid-item.css?inline';\n\nconst GRID_ITEM_ALIGNMENTS = ['start', 'center', 'end', 'stretch'] as const;\nconst GRID_ITEM_COL_SPANS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', 'full'] as const;\nconst GRID_ITEM_ROW_SPANS = ['1', '2', '3', '4', '5', '6', 'full'] as const;\n\n/** Grid item component properties */\nexport type OreGridItemProps = {\n  /** Align self vertically within the grid cell */\n  align?: (typeof GRID_ITEM_ALIGNMENTS)[number];\n  /** Named grid area to place the item into. */\n  area?: string;\n  /** Explicit grid-column value: overrides col-span (e.g. '2 / 5', 'span 3', '1 / -1'). */\n  col?: string;\n  /** Span N columns. Use 'full' to span all columns (1 / -1). */\n  colSpan?: (typeof GRID_ITEM_COL_SPANS)[number];\n  /** Justify self horizontally within the grid cell */\n  justify?: (typeof GRID_ITEM_ALIGNMENTS)[number];\n  /** Explicit grid-row value: overrides row-span (e.g. '1 / 3', 'span 2'). */\n  row?: string;\n  /** Span N rows. Use 'full' to span all rows (1 / -1). */\n  rowSpan?: (typeof GRID_ITEM_ROW_SPANS)[number];\n};\n\n/**\n * ore-grid-item: A grid cell with declarative placement and span control.\n *\n * Use `col-span` / `row-span` for the common case of spanning columns/rows.\n * Use `col` / `row` for full CSS grid-column / grid-row shorthand power\n * (e.g. explicit placement, mixed span + start, negative lines).\n *\n * @element ore-grid-item\n *\n * @attr {string} area - CSS grid-area value for named-area placement\n * @attr {string} col-span - Columns to span: '1'–'12' | 'full'\n * @attr {string} row-span - Rows to span: '1'–'6' | 'full'\n * @attr {string} col - CSS grid-column value (overrides col-span)\n * @attr {string} row - CSS grid-row value (overrides row-span)\n * @attr {string} align - align-self: 'start' | 'center' | 'end' | 'stretch'\n * @attr {string} justify - justify-self: 'start' | 'center' | 'end' | 'stretch'\n *\n * @slot - Grid item content\n *\n * @example\n * <!-- Span 2 columns -->\n * <ore-grid-item col-span=\"2\">Wide</ore-grid-item>\n *\n * @example\n * <!-- Full-width row -->\n * <ore-grid-item col-span=\"full\">Banner</ore-grid-item>\n *\n * @example\n * <!-- Named area placement -->\n * <ore-grid-item area=\"sidebar\">Nav</ore-grid-item>\n *\n * @example\n * <!-- Explicit placement -->\n * <ore-grid-item col=\"2 / 5\" row=\"1 / 3\">Placed</ore-grid-item>\n */\nexport const GRID_ITEM_TAG = 'ore-grid-item' as const;\ndefine<OreGridItemProps>(GRID_ITEM_TAG, {\n  props: {\n    align: prop.oneOf(GRID_ITEM_ALIGNMENTS),\n    area: prop.string(),\n    col: prop.string(),\n    colSpan: prop.oneOf(GRID_ITEM_COL_SPANS),\n    justify: prop.oneOf(GRID_ITEM_ALIGNMENTS),\n    row: prop.string(),\n    rowSpan: prop.oneOf(GRID_ITEM_ROW_SPANS),\n  },\n  setup(props) {\n    const gridColumn = computed(() => {\n      const col = props.col.value;\n      const span = props.colSpan.value;\n\n      if (col) return col;\n\n      if (span === 'full') return '1 / -1';\n\n      if (span) return `span ${span}`;\n\n      return '';\n    });\n\n    const gridRow = computed(() => {\n      const row = props.row.value;\n      const span = props.rowSpan.value;\n\n      if (row) return row;\n\n      if (span === 'full') return '1 / -1';\n\n      if (span) return `span ${span}`;\n\n      return '';\n    });\n\n    bind({\n      style: {\n        gridArea: props.area,\n        gridColumn,\n        gridRow,\n      },\n    });\n\n    return html`\n      <slot></slot>\n    `;\n  },\n  styles: [styles],\n});\n"],"mappings":"oKAKA,IAAM,EAAuB,CAAC,QAAS,SAAU,MAAO,SAAS,EAC3D,EAAsB,CAAC,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,KAAM,KAAM,KAAM,MAAM,EAC5F,EAAsB,CAAC,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,MAAM,EAuDpD,EAAgB,gBAC7B,EAAyB,EAAe,CACtC,MAAO,CACL,MAAO,EAAK,MAAM,CAAoB,EACtC,KAAM,EAAK,OAAO,EAClB,IAAK,EAAK,OAAO,EACjB,QAAS,EAAK,MAAM,CAAmB,EACvC,QAAS,EAAK,MAAM,CAAoB,EACxC,IAAK,EAAK,OAAO,EACjB,QAAS,EAAK,MAAM,CAAmB,CACzC,EACA,MAAM,EAAO,CACX,IAAM,EAAa,MAAe,CAChC,IAAM,EAAM,EAAM,IAAI,MAChB,EAAO,EAAM,QAAQ,MAQ3B,OANI,IAEA,IAAS,OAAe,SAExB,EAAa,QAAQ,IAElB,GACT,CAAC,EAEK,EAAU,MAAe,CAC7B,IAAM,EAAM,EAAM,IAAI,MAChB,EAAO,EAAM,QAAQ,MAQ3B,OANI,IAEA,IAAS,OAAe,SAExB,EAAa,QAAQ,IAElB,GACT,CAAC,EAUD,OARA,EAAK,CACH,MAAO,CACL,SAAU,EAAM,KAChB,aACA,SACF,CACF,CAAC,EAEM,CAAI;;KAGb,EACA,OAAQ,CAAC,CAAM,CACjB,CAAC"}

package/dist/grid.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./layout/grid/grid.css.cjs");let t=require("@vielzeug/ripple"),n=require("@vielzeug/sentinel"),r=require("@vielzeug/ore");var i=[[`cols2xl`,`--size-screen-2xl`],[`colsXl`,`--size-screen-xl`],[`colsLg`,`--size-screen-lg`],[`colsMd`,`--size-screen-md`],[`colsSm`,`--size-screen-sm`]],a=[[`areas2xl`,`--size-screen-2xl`],[`areasXl`,`--size-screen-xl`],[`areasLg`,`--size-screen-lg`],[`areasMd`,`--size-screen-md`],[`areasSm`,`--size-screen-sm`]],resolveBp=(e,t,n)=>{let r=getComputedStyle(e).getPropertyValue(t).trim(),i=Number.parseFloat(r);return Number.isFinite(i)?i:n},o={"--size-screen-2xl":1536,"--size-screen-lg":1024,"--size-screen-md":768,"--size-screen-sm":640,"--size-screen-xl":1280},s=`ore-grid`;(0,r.define)(s,{props:{align:r.prop.string(),areas:r.prop.string(),areas2xl:r.prop.string(),areasLg:r.prop.string(),areasMd:r.prop.string(),areasSm:r.prop.string(),areasXl:r.prop.string(),cols:r.prop.string(),cols2xl:r.prop.string(),colsLg:r.prop.string(),colsMd:r.prop.string(),colsSm:r.prop.string(),colsXl:r.prop.string(),flow:r.prop.string(),fullwidth:r.prop.bool(!1),gap:r.prop.string(),justify:r.prop.string(),minColWidth:r.prop.string(),responsive:r.prop.bool(!1),rows:r.prop.string()},setup(e){let s=(0,r.getHost)(),c=r.watchEffect,computeCols=(e,t,n)=>e===`auto`||!e&&t?`repeat(auto-fit, minmax(${n||`250px`}, 1fr))`:e?`repeat(${e}, 1fr)`:null,updateCols=()=>{let t=s.offsetWidth,n=!!e.responsive.value,r=e.minColWidth.value??``,a;for(let[n,r]of i)if(t>=resolveBp(s,r,o[r])&&e[n].value){a=e[n].value;break}a||=e.cols.value||void 0;let c=computeCols(a,n,r);c?s.style.setProperty(`--_cols`,c):s.style.removeProperty(`--_cols`)};c(()=>{e.cols.value,e.colsSm.value,e.colsMd.value,e.colsLg.value,e.colsXl.value,e.cols2xl.value,e.responsive.value,e.minColWidth.value,updateCols()});let updateAreas=()=>{let t=s.offsetWidth,n=``;for(let[r,i]of a)if(t>=resolveBp(s,i,o[i])&&e[r].value){n=e[r].value;break}n||=e.areas.value||``,n?s.style.setProperty(`grid-template-areas`,n):s.style.removeProperty(`grid-template-areas`)};return c(()=>{let t=e.rows.value;t&&t!==`auto`?s.style.setProperty(`--_rows`,`repeat(${t}, 1fr)`):s.style.removeProperty(`--_rows`)}),c(()=>{e.areas.value,e.areasSm.value,e.areasMd.value,e.areasLg.value,e.areasXl.value,e.areas2xl.value,updateAreas()}),(0,r.onMounted)(()=>{let e=(0,n.createElementSize)(s);(0,r.onCleanup)(()=>e.dispose());let i=(0,t.fromSubscribable)(e,{signal:e.disposalSignal});c(()=>{i.value&&(updateCols(),updateAreas())})}),r.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./layout/grid/grid.css.cjs");let t=require("@vielzeug/ripple"),n=require("@vielzeug/sentinel"),r=require("@vielzeug/ore");var i=[[`cols2xl`,`--size-screen-2xl`],[`colsXl`,`--size-screen-xl`],[`colsLg`,`--size-screen-lg`],[`colsMd`,`--size-screen-md`],[`colsSm`,`--size-screen-sm`]],a=[[`areas2xl`,`--size-screen-2xl`],[`areasXl`,`--size-screen-xl`],[`areasLg`,`--size-screen-lg`],[`areasMd`,`--size-screen-md`],[`areasSm`,`--size-screen-sm`]],resolveBp=(e,t,n)=>{let r=getComputedStyle(e).getPropertyValue(t).trim(),i=Number.parseFloat(r);return Number.isFinite(i)?i:n},o={"--size-screen-2xl":1536,"--size-screen-lg":1024,"--size-screen-md":768,"--size-screen-sm":640,"--size-screen-xl":1280},s=[`1`,`2`,`3`,`4`,`5`,`6`,`7`,`8`,`9`,`10`,`11`,`12`,`auto`],c=[`start`,`center`,`end`,`stretch`,`baseline`],l=[`row`,`column`,`row-dense`,`column-dense`],u=[`none`,`xs`,`sm`,`md`,`lg`,`xl`,`2xl`],d=[`start`,`center`,`end`,`stretch`],f=`ore-grid`;(0,r.define)(f,{props:{align:r.prop.oneOf(c),areas:r.prop.string(),areas2xl:r.prop.string(),areasLg:r.prop.string(),areasMd:r.prop.string(),areasSm:r.prop.string(),areasXl:r.prop.string(),cols:r.prop.oneOf(s),cols2xl:r.prop.oneOf(s),colsLg:r.prop.oneOf(s),colsMd:r.prop.oneOf(s),colsSm:r.prop.oneOf(s),colsXl:r.prop.oneOf(s),flow:r.prop.oneOf(l),fullwidth:r.prop.bool(!1),gap:r.prop.oneOf(u),justify:r.prop.oneOf(d),minColWidth:r.prop.string(),responsive:r.prop.bool(!1),rows:r.prop.oneOf(s)},setup(e){let s=(0,r.getHost)(),c=r.watchEffect,computeCols=(e,t,n)=>e===`auto`||!e&&t?`repeat(auto-fit, minmax(${n||`250px`}, 1fr))`:e?`repeat(${e}, 1fr)`:null,updateCols=()=>{let t=s.offsetWidth,n=!!e.responsive.value,r=e.minColWidth.value??``,a;for(let[n,r]of i)if(t>=resolveBp(s,r,o[r])&&e[n].value){a=e[n].value;break}a||=e.cols.value||void 0;let c=computeCols(a,n,r);c?s.style.setProperty(`--_cols`,c):s.style.removeProperty(`--_cols`)};c(()=>{e.cols.value,e.colsSm.value,e.colsMd.value,e.colsLg.value,e.colsXl.value,e.cols2xl.value,e.responsive.value,e.minColWidth.value,updateCols()});let updateAreas=()=>{let t=s.offsetWidth,n=``;for(let[r,i]of a)if(t>=resolveBp(s,i,o[i])&&e[r].value){n=e[r].value;break}n||=e.areas.value||``,n?s.style.setProperty(`grid-template-areas`,n):s.style.removeProperty(`grid-template-areas`)};return c(()=>{let t=e.rows.value;t&&t!==`auto`?s.style.setProperty(`--_rows`,`repeat(${t}, 1fr)`):s.style.removeProperty(`--_rows`)}),c(()=>{e.areas.value,e.areasSm.value,e.areasMd.value,e.areasLg.value,e.areasXl.value,e.areas2xl.value,updateAreas()}),(0,r.onMounted)(()=>{let e=(0,n.createElementSize)(s);(0,r.onCleanup)(()=>e.dispose());let i=(0,t.fromSubscribable)(e,{signal:e.disposalSignal});c(()=>{i.value&&(updateCols(),updateAreas())})}),r.html`
       <slot></slot>
-    `},styles:[e.default]}),exports.GRID_TAG=s;
+    `},styles:[e.default]}),exports.GRID_TAG=f;
 //# sourceMappingURL=grid.cjs.map

package/dist/grid.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"grid.cjs","names":[],"sources":["../src/layout/grid/grid.ts"],"sourcesContent":["import { define, getHost, html, onCleanup, onMounted, prop, watchEffect } from '@vielzeug/ore';\nimport { fromSubscribable } from '@vielzeug/ripple';\nimport { createElementSize } from '@vielzeug/sentinel';\n\nimport styles from './grid.css?inline';\n\nconst BREAKPOINTS: ['cols2xl' | 'colsXl' | 'colsLg' | 'colsMd' | 'colsSm', string][] = [\n  ['cols2xl', '--size-screen-2xl'],\n  ['colsXl', '--size-screen-xl'],\n  ['colsLg', '--size-screen-lg'],\n  ['colsMd', '--size-screen-md'],\n  ['colsSm', '--size-screen-sm'],\n];\n\nconst AREAS_BREAKPOINTS: ['areas2xl' | 'areasXl' | 'areasLg' | 'areasMd' | 'areasSm', string][] = [\n  ['areas2xl', '--size-screen-2xl'],\n  ['areasXl', '--size-screen-xl'],\n  ['areasLg', '--size-screen-lg'],\n  ['areasMd', '--size-screen-md'],\n  ['areasSm', '--size-screen-sm'],\n];\n\nconst resolveBp = (host: HTMLElement, varName: string, fallback: number): number => {\n  const raw = getComputedStyle(host).getPropertyValue(varName).trim();\n  const parsed = Number.parseFloat(raw);\n\n  return Number.isFinite(parsed) ? parsed : fallback;\n};\n\nconst BP_FALLBACKS: Record<string, number> = {\n  '--size-screen-2xl': 1536,\n  '--size-screen-lg': 1024,\n  '--size-screen-md': 768,\n  '--size-screen-sm': 640,\n  '--size-screen-xl': 1280,\n};\n\ntype ColCount = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto';\n\n/** Grid component properties */\nexport type OreGridProps = {\n  /** Align items vertically */\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n  /** CSS grid-template-areas value */\n  areas?: string;\n  /** grid-template-areas at 2xl breakpoint (≥1536px) */\n  areas2xl?: string;\n  /** grid-template-areas at lg breakpoint (≥1024px) */\n  areasLg?: string;\n  /** grid-template-areas at md breakpoint (≥768px) */\n  areasMd?: string;\n  /** grid-template-areas at sm breakpoint (≥640px) */\n  areasSm?: string;\n  /** grid-template-areas at xl breakpoint (≥1280px) */\n  areasXl?: string;\n  /** Number of columns: '1'-'12' | 'auto' */\n  cols?: ColCount;\n  /** Columns at 2xl breakpoint (≥1536px) */\n  cols2xl?: ColCount;\n  /** Columns at lg breakpoint (≥1024px) */\n  colsLg?: ColCount;\n  /** Columns at md breakpoint (≥768px) */\n  colsMd?: ColCount;\n  /** Columns at sm breakpoint (≥640px) */\n  colsSm?: ColCount;\n  /** Columns at xl breakpoint (≥1280px) */\n  colsXl?: ColCount;\n  /** Grid auto flow direction */\n  flow?: 'row' | 'column' | 'row-dense' | 'column-dense';\n  /** Stretch the grid to fill its container's full width */\n  fullwidth?: boolean;\n  /** Gap between items */\n  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /** Justify items horizontally */\n  justify?: 'start' | 'center' | 'end' | 'stretch';\n  /** Minimum column width for responsive mode (default: 250px) */\n  minColWidth?: string;\n  /** Use auto-fit responsive columns */\n  responsive?: boolean;\n  /** Number of rows: '1'-'12' | 'auto' */\n  rows?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto';\n};\n\n/**\n * ore-grid: Flexible grid layout with responsive column control.\n *\n * Columns are computed in JS and applied as `--_cols` inline, so they respond\n * to the element's own width via ResizeObserver. CSS custom properties\n * `--grid-cols`, `--grid-rows`, `--grid-gap`, `--grid-row-gap`, `--grid-col-gap`\n * are honoured as fallbacks when no attribute is set.\n *\n * @element ore-grid\n *\n * @attr {string} cols - Column count: '1'–'12' | 'auto'\n * @attr {string} cols-sm - Columns when width ≥ 640px\n * @attr {string} cols-md - Columns when width ≥ 768px\n * @attr {string} cols-lg - Columns when width ≥ 1024px\n * @attr {string} cols-xl - Columns when width ≥ 1280px\n * @attr {string} cols-2xl - Columns when width ≥ 1536px\n * @attr {string} rows - Row count: '1'–'12' | 'auto'\n * @attr {string} gap - Gap token: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n * @attr {string} align - align-items: 'start' | 'center' | 'end' | 'stretch' | 'baseline'\n * @attr {string} justify - justify-items: 'start' | 'center' | 'end' | 'stretch'\n * @attr {string} flow - grid-auto-flow: 'row' | 'column' | 'row-dense' | 'column-dense'\n * @attr {boolean} responsive - Enables auto-fit columns without a fixed count\n * @attr {string} min-col-width - Min column width for responsive mode (default: 250px)\n * @attr {boolean} fullwidth - Stretch the grid to fill its container's full width\n * @attr {string} areas - CSS grid-template-areas value (e.g. \"'header header' 'nav main'\")\n * @attr {string} areas-sm - grid-template-areas when width ≥ 640px\n * @attr {string} areas-md - grid-template-areas when width ≥ 768px\n * @attr {string} areas-lg - grid-template-areas when width ≥ 1024px\n * @attr {string} areas-xl - grid-template-areas when width ≥ 1280px\n * @attr {string} areas-2xl - grid-template-areas when width ≥ 1536px\n *\n * @slot - Grid items\n *\n * @cssprop --grid-cols - Fallback column template (used when no cols attr is set)\n * @cssprop --grid-rows - Fallback row template\n * @cssprop --grid-gap - Fallback gap\n * @cssprop --grid-row-gap - Fallback row gap\n * @cssprop --grid-col-gap - Fallback column gap\n *\n * @example\n * <ore-grid cols=\"1\" cols-sm=\"2\" cols-lg=\"4\" gap=\"md\">\n *   <div>Item</div>\n * </ore-grid>\n *\n * @example\n * <!-- Responsive auto-fit -->\n * <ore-grid responsive min-col-width=\"200px\" gap=\"sm\">\n *   <div>Card</div>\n * </ore-grid>\n *\n * @example\n * <!-- Named grid areas -->\n * <ore-grid cols=\"2\" rows=\"2\" areas=\"'header header' 'nav main'\">\n *   <header style=\"grid-area: header\">Header</header>\n *   <nav style=\"grid-area: nav\">Nav</nav>\n *   <main style=\"grid-area: main\">Main</main>\n * </ore-grid>\n */\nexport const GRID_TAG = 'ore-grid' as const;\ndefine<OreGridProps>(GRID_TAG, {\n  props: {\n    align: prop.string<'start' | 'center' | 'end' | 'stretch' | 'baseline'>(),\n    areas: prop.string(),\n    areas2xl: prop.string(),\n    areasLg: prop.string(),\n    areasMd: prop.string(),\n    areasSm: prop.string(),\n    areasXl: prop.string(),\n    cols: prop.string<ColCount>(),\n    cols2xl: prop.string<ColCount>(),\n    colsLg: prop.string<ColCount>(),\n    colsMd: prop.string<ColCount>(),\n    colsSm: prop.string<ColCount>(),\n    colsXl: prop.string<ColCount>(),\n    flow: prop.string<'row' | 'column' | 'row-dense' | 'column-dense'>(),\n    fullwidth: prop.bool(false),\n    gap: prop.string<'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'>(),\n    justify: prop.string<'start' | 'center' | 'end' | 'stretch'>(),\n    minColWidth: prop.string(),\n    responsive: prop.bool(false),\n    rows: prop.string<'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto'>(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    const computeCols = (activeCols: string | undefined, responsive: boolean, minW: string): string | null => {\n      if (activeCols === 'auto' || (!activeCols && responsive)) {\n        return `repeat(auto-fit, minmax(${minW || '250px'}, 1fr))`;\n      }\n\n      return activeCols ? `repeat(${activeCols}, 1fr)` : null;\n    };\n    const updateCols = () => {\n      const w = el.offsetWidth;\n      const responsive = Boolean(props.responsive.value);\n      const minW = props.minColWidth.value ?? '';\n      let activeCols: string | undefined;\n\n      for (const [key, cssVar] of BREAKPOINTS) {\n        if (w >= resolveBp(el, cssVar, BP_FALLBACKS[cssVar]) && props[key].value) {\n          activeCols = props[key].value!;\n          break;\n        }\n      }\n      activeCols ||= props.cols.value || undefined;\n\n      const colsValue = computeCols(activeCols, responsive, minW);\n\n      if (colsValue) {\n        el.style.setProperty('--_cols', colsValue);\n      } else {\n        el.style.removeProperty('--_cols');\n      }\n    };\n\n    // Re-run cols whenever any responsive prop changes\n    watch(() => {\n      void [\n        props.cols.value,\n        props.colsSm.value,\n        props.colsMd.value,\n        props.colsLg.value,\n        props.colsXl.value,\n        props.cols2xl.value,\n        props.responsive.value,\n        props.minColWidth.value,\n      ];\n      updateCols();\n    });\n\n    const updateAreas = () => {\n      const w = el.offsetWidth;\n      let active = '';\n\n      for (const [key, cssVar] of AREAS_BREAKPOINTS) {\n        if (w >= resolveBp(el, cssVar, BP_FALLBACKS[cssVar]) && props[key].value) {\n          active = props[key].value!;\n          break;\n        }\n      }\n      active ||= props.areas.value || '';\n\n      if (active) {\n        el.style.setProperty('grid-template-areas', active);\n      } else {\n        el.style.removeProperty('grid-template-areas');\n      }\n    };\n\n    // Rows\n    watch(() => {\n      const rows = props.rows.value;\n\n      if (rows && rows !== 'auto') {\n        el.style.setProperty('--_rows', `repeat(${rows}, 1fr)`);\n      } else {\n        el.style.removeProperty('--_rows');\n      }\n    });\n    // Grid template areas (responsive)\n    watch(() => {\n      void [\n        props.areas.value,\n        props.areasSm.value,\n        props.areasMd.value,\n        props.areasLg.value,\n        props.areasXl.value,\n        props.areas2xl.value,\n      ];\n      updateAreas();\n    });\n\n    // Also, update on element resize (drives breakpoint switching)\n    onMounted(() => {\n      const size = createElementSize(el);\n\n      onCleanup(() => size.dispose());\n\n      const sizeSignal = fromSubscribable(size, { signal: size.disposalSignal });\n\n      watch(() => {\n        const dims = sizeSignal.value;\n        if (dims) {\n          updateCols();\n          updateAreas();\n        }\n      });\n    });\n\n    return html`\n      <slot></slot>\n    `;\n  },\n\n  styles: [styles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"grid.cjs","names":[],"sources":["../src/layout/grid/grid.ts"],"sourcesContent":["import { define, getHost, html, onCleanup, onMounted, prop, watchEffect } from '@vielzeug/ore';\nimport { fromSubscribable } from '@vielzeug/ripple';\nimport { createElementSize } from '@vielzeug/sentinel';\n\nimport styles from './grid.css?inline';\n\nconst BREAKPOINTS: ['cols2xl' | 'colsXl' | 'colsLg' | 'colsMd' | 'colsSm', string][] = [\n  ['cols2xl', '--size-screen-2xl'],\n  ['colsXl', '--size-screen-xl'],\n  ['colsLg', '--size-screen-lg'],\n  ['colsMd', '--size-screen-md'],\n  ['colsSm', '--size-screen-sm'],\n];\n\nconst AREAS_BREAKPOINTS: ['areas2xl' | 'areasXl' | 'areasLg' | 'areasMd' | 'areasSm', string][] = [\n  ['areas2xl', '--size-screen-2xl'],\n  ['areasXl', '--size-screen-xl'],\n  ['areasLg', '--size-screen-lg'],\n  ['areasMd', '--size-screen-md'],\n  ['areasSm', '--size-screen-sm'],\n];\n\nconst resolveBp = (host: HTMLElement, varName: string, fallback: number): number => {\n  const raw = getComputedStyle(host).getPropertyValue(varName).trim();\n  const parsed = Number.parseFloat(raw);\n\n  return Number.isFinite(parsed) ? parsed : fallback;\n};\n\nconst BP_FALLBACKS: Record<string, number> = {\n  '--size-screen-2xl': 1536,\n  '--size-screen-lg': 1024,\n  '--size-screen-md': 768,\n  '--size-screen-sm': 640,\n  '--size-screen-xl': 1280,\n};\n\nconst COL_COUNTS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', 'auto'] as const;\nconst GRID_ALIGNMENTS = ['start', 'center', 'end', 'stretch', 'baseline'] as const;\nconst GRID_FLOWS = ['row', 'column', 'row-dense', 'column-dense'] as const;\nconst GRID_GAPS = ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const;\nconst GRID_JUSTIFICATIONS = ['start', 'center', 'end', 'stretch'] as const;\n\ntype ColCount = (typeof COL_COUNTS)[number];\n\n/** Grid component properties */\nexport type OreGridProps = {\n  /** Align items vertically */\n  align?: (typeof GRID_ALIGNMENTS)[number];\n  /** CSS grid-template-areas value */\n  areas?: string;\n  /** grid-template-areas at 2xl breakpoint (≥1536px) */\n  areas2xl?: string;\n  /** grid-template-areas at lg breakpoint (≥1024px) */\n  areasLg?: string;\n  /** grid-template-areas at md breakpoint (≥768px) */\n  areasMd?: string;\n  /** grid-template-areas at sm breakpoint (≥640px) */\n  areasSm?: string;\n  /** grid-template-areas at xl breakpoint (≥1280px) */\n  areasXl?: string;\n  /** Number of columns: '1'-'12' | 'auto' */\n  cols?: ColCount;\n  /** Columns at 2xl breakpoint (≥1536px) */\n  cols2xl?: ColCount;\n  /** Columns at lg breakpoint (≥1024px) */\n  colsLg?: ColCount;\n  /** Columns at md breakpoint (≥768px) */\n  colsMd?: ColCount;\n  /** Columns at sm breakpoint (≥640px) */\n  colsSm?: ColCount;\n  /** Columns at xl breakpoint (≥1280px) */\n  colsXl?: ColCount;\n  /** Grid auto flow direction */\n  flow?: (typeof GRID_FLOWS)[number];\n  /** Stretch the grid to fill its container's full width */\n  fullwidth?: boolean;\n  /** Gap between items */\n  gap?: (typeof GRID_GAPS)[number];\n  /** Justify items horizontally */\n  justify?: (typeof GRID_JUSTIFICATIONS)[number];\n  /** Minimum column width for responsive mode (default: 250px) */\n  minColWidth?: string;\n  /** Use auto-fit responsive columns */\n  responsive?: boolean;\n  /** Number of rows: '1'-'12' | 'auto' */\n  rows?: ColCount;\n};\n\n/**\n * ore-grid: Flexible grid layout with responsive column control.\n *\n * Columns are computed in JS and applied as `--_cols` inline, so they respond\n * to the element's own width via ResizeObserver. CSS custom properties\n * `--grid-cols`, `--grid-rows`, `--grid-gap`, `--grid-row-gap`, `--grid-col-gap`\n * are honoured as fallbacks when no attribute is set.\n *\n * @element ore-grid\n *\n * @attr {string} cols - Column count: '1'–'12' | 'auto'\n * @attr {string} cols-sm - Columns when width ≥ 640px\n * @attr {string} cols-md - Columns when width ≥ 768px\n * @attr {string} cols-lg - Columns when width ≥ 1024px\n * @attr {string} cols-xl - Columns when width ≥ 1280px\n * @attr {string} cols-2xl - Columns when width ≥ 1536px\n * @attr {string} rows - Row count: '1'–'12' | 'auto'\n * @attr {string} gap - Gap token: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n * @attr {string} align - align-items: 'start' | 'center' | 'end' | 'stretch' | 'baseline'\n * @attr {string} justify - justify-items: 'start' | 'center' | 'end' | 'stretch'\n * @attr {string} flow - grid-auto-flow: 'row' | 'column' | 'row-dense' | 'column-dense'\n * @attr {boolean} responsive - Enables auto-fit columns without a fixed count\n * @attr {string} min-col-width - Min column width for responsive mode (default: 250px)\n * @attr {boolean} fullwidth - Stretch the grid to fill its container's full width\n * @attr {string} areas - CSS grid-template-areas value (e.g. \"'header header' 'nav main'\")\n * @attr {string} areas-sm - grid-template-areas when width ≥ 640px\n * @attr {string} areas-md - grid-template-areas when width ≥ 768px\n * @attr {string} areas-lg - grid-template-areas when width ≥ 1024px\n * @attr {string} areas-xl - grid-template-areas when width ≥ 1280px\n * @attr {string} areas-2xl - grid-template-areas when width ≥ 1536px\n *\n * @slot - Grid items\n *\n * @cssprop --grid-cols - Fallback column template (used when no cols attr is set)\n * @cssprop --grid-rows - Fallback row template\n * @cssprop --grid-gap - Fallback gap\n * @cssprop --grid-row-gap - Fallback row gap\n * @cssprop --grid-col-gap - Fallback column gap\n *\n * @example\n * <ore-grid cols=\"1\" cols-sm=\"2\" cols-lg=\"4\" gap=\"md\">\n *   <div>Item</div>\n * </ore-grid>\n *\n * @example\n * <!-- Responsive auto-fit -->\n * <ore-grid responsive min-col-width=\"200px\" gap=\"sm\">\n *   <div>Card</div>\n * </ore-grid>\n *\n * @example\n * <!-- Named grid areas -->\n * <ore-grid cols=\"2\" rows=\"2\" areas=\"'header header' 'nav main'\">\n *   <header style=\"grid-area: header\">Header</header>\n *   <nav style=\"grid-area: nav\">Nav</nav>\n *   <main style=\"grid-area: main\">Main</main>\n * </ore-grid>\n */\nexport const GRID_TAG = 'ore-grid' as const;\ndefine<OreGridProps>(GRID_TAG, {\n  props: {\n    align: prop.oneOf(GRID_ALIGNMENTS),\n    areas: prop.string(),\n    areas2xl: prop.string(),\n    areasLg: prop.string(),\n    areasMd: prop.string(),\n    areasSm: prop.string(),\n    areasXl: prop.string(),\n    cols: prop.oneOf(COL_COUNTS),\n    cols2xl: prop.oneOf(COL_COUNTS),\n    colsLg: prop.oneOf(COL_COUNTS),\n    colsMd: prop.oneOf(COL_COUNTS),\n    colsSm: prop.oneOf(COL_COUNTS),\n    colsXl: prop.oneOf(COL_COUNTS),\n    flow: prop.oneOf(GRID_FLOWS),\n    fullwidth: prop.bool(false),\n    gap: prop.oneOf(GRID_GAPS),\n    justify: prop.oneOf(GRID_JUSTIFICATIONS),\n    minColWidth: prop.string(),\n    responsive: prop.bool(false),\n    rows: prop.oneOf(COL_COUNTS),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    const computeCols = (activeCols: string | undefined, responsive: boolean, minW: string): string | null => {\n      if (activeCols === 'auto' || (!activeCols && responsive)) {\n        return `repeat(auto-fit, minmax(${minW || '250px'}, 1fr))`;\n      }\n\n      return activeCols ? `repeat(${activeCols}, 1fr)` : null;\n    };\n    const updateCols = () => {\n      const w = el.offsetWidth;\n      const responsive = Boolean(props.responsive.value);\n      const minW = props.minColWidth.value ?? '';\n      let activeCols: string | undefined;\n\n      for (const [key, cssVar] of BREAKPOINTS) {\n        if (w >= resolveBp(el, cssVar, BP_FALLBACKS[cssVar]) && props[key].value) {\n          activeCols = props[key].value!;\n          break;\n        }\n      }\n      activeCols ||= props.cols.value || undefined;\n\n      const colsValue = computeCols(activeCols, responsive, minW);\n\n      if (colsValue) {\n        el.style.setProperty('--_cols', colsValue);\n      } else {\n        el.style.removeProperty('--_cols');\n      }\n    };\n\n    // Re-run cols whenever any responsive prop changes\n    watch(() => {\n      void [\n        props.cols.value,\n        props.colsSm.value,\n        props.colsMd.value,\n        props.colsLg.value,\n        props.colsXl.value,\n        props.cols2xl.value,\n        props.responsive.value,\n        props.minColWidth.value,\n      ];\n      updateCols();\n    });\n\n    const updateAreas = () => {\n      const w = el.offsetWidth;\n      let active = '';\n\n      for (const [key, cssVar] of AREAS_BREAKPOINTS) {\n        if (w >= resolveBp(el, cssVar, BP_FALLBACKS[cssVar]) && props[key].value) {\n          active = props[key].value!;\n          break;\n        }\n      }\n      active ||= props.areas.value || '';\n\n      if (active) {\n        el.style.setProperty('grid-template-areas', active);\n      } else {\n        el.style.removeProperty('grid-template-areas');\n      }\n    };\n\n    // Rows\n    watch(() => {\n      const rows = props.rows.value;\n\n      if (rows && rows !== 'auto') {\n        el.style.setProperty('--_rows', `repeat(${rows}, 1fr)`);\n      } else {\n        el.style.removeProperty('--_rows');\n      }\n    });\n    // Grid template areas (responsive)\n    watch(() => {\n      void [\n        props.areas.value,\n        props.areasSm.value,\n        props.areasMd.value,\n        props.areasLg.value,\n        props.areasXl.value,\n        props.areas2xl.value,\n      ];\n      updateAreas();\n    });\n\n    // Also, update on element resize (drives breakpoint switching)\n    onMounted(() => {\n      const size = createElementSize(el);\n\n      onCleanup(() => size.dispose());\n\n      const sizeSignal = fromSubscribable(size, { signal: size.disposalSignal });\n\n      watch(() => {\n        const dims = sizeSignal.value;\n        if (dims) {\n          updateCols();\n          updateAreas();\n        }\n      });\n    });\n\n    return html`\n      <slot></slot>\n    `;\n  },\n\n  styles: [styles],\n});\n"],"mappings":"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"}

package/dist/grid.js

@@ -1,4 +1,4 @@
-import e from"./layout/grid/grid.css.js";import{fromSubscribable as t}from"@vielzeug/ripple";import{createElementSize as n}from"@vielzeug/sentinel";import{define as r,getHost as i,html as a,onCleanup as o,onMounted as s,prop as c,watchEffect as l}from"@vielzeug/ore";var u=[[`cols2xl`,`--size-screen-2xl`],[`colsXl`,`--size-screen-xl`],[`colsLg`,`--size-screen-lg`],[`colsMd`,`--size-screen-md`],[`colsSm`,`--size-screen-sm`]],d=[[`areas2xl`,`--size-screen-2xl`],[`areasXl`,`--size-screen-xl`],[`areasLg`,`--size-screen-lg`],[`areasMd`,`--size-screen-md`],[`areasSm`,`--size-screen-sm`]],resolveBp=(e,t,n)=>{let r=getComputedStyle(e).getPropertyValue(t).trim(),i=Number.parseFloat(r);return Number.isFinite(i)?i:n},f={"--size-screen-2xl":1536,"--size-screen-lg":1024,"--size-screen-md":768,"--size-screen-sm":640,"--size-screen-xl":1280},p=`ore-grid`;r(p,{props:{align:c.string(),areas:c.string(),areas2xl:c.string(),areasLg:c.string(),areasMd:c.string(),areasSm:c.string(),areasXl:c.string(),cols:c.string(),cols2xl:c.string(),colsLg:c.string(),colsMd:c.string(),colsSm:c.string(),colsXl:c.string(),flow:c.string(),fullwidth:c.bool(!1),gap:c.string(),justify:c.string(),minColWidth:c.string(),responsive:c.bool(!1),rows:c.string()},setup(e){let r=i(),c=l,computeCols=(e,t,n)=>e===`auto`||!e&&t?`repeat(auto-fit, minmax(${n||`250px`}, 1fr))`:e?`repeat(${e}, 1fr)`:null,updateCols=()=>{let t=r.offsetWidth,n=!!e.responsive.value,i=e.minColWidth.value??``,a;for(let[n,i]of u)if(t>=resolveBp(r,i,f[i])&&e[n].value){a=e[n].value;break}a||=e.cols.value||void 0;let o=computeCols(a,n,i);o?r.style.setProperty(`--_cols`,o):r.style.removeProperty(`--_cols`)};c(()=>{e.cols.value,e.colsSm.value,e.colsMd.value,e.colsLg.value,e.colsXl.value,e.cols2xl.value,e.responsive.value,e.minColWidth.value,updateCols()});let updateAreas=()=>{let t=r.offsetWidth,n=``;for(let[i,a]of d)if(t>=resolveBp(r,a,f[a])&&e[i].value){n=e[i].value;break}n||=e.areas.value||``,n?r.style.setProperty(`grid-template-areas`,n):r.style.removeProperty(`grid-template-areas`)};return c(()=>{let t=e.rows.value;t&&t!==`auto`?r.style.setProperty(`--_rows`,`repeat(${t}, 1fr)`):r.style.removeProperty(`--_rows`)}),c(()=>{e.areas.value,e.areasSm.value,e.areasMd.value,e.areasLg.value,e.areasXl.value,e.areas2xl.value,updateAreas()}),s(()=>{let e=n(r);o(()=>e.dispose());let i=t(e,{signal:e.disposalSignal});c(()=>{i.value&&(updateCols(),updateAreas())})}),a`
+import e from"./layout/grid/grid.css.js";import{fromSubscribable as t}from"@vielzeug/ripple";import{createElementSize as n}from"@vielzeug/sentinel";import{define as r,getHost as i,html as a,onCleanup as o,onMounted as s,prop as c,watchEffect as l}from"@vielzeug/ore";var u=[[`cols2xl`,`--size-screen-2xl`],[`colsXl`,`--size-screen-xl`],[`colsLg`,`--size-screen-lg`],[`colsMd`,`--size-screen-md`],[`colsSm`,`--size-screen-sm`]],d=[[`areas2xl`,`--size-screen-2xl`],[`areasXl`,`--size-screen-xl`],[`areasLg`,`--size-screen-lg`],[`areasMd`,`--size-screen-md`],[`areasSm`,`--size-screen-sm`]],resolveBp=(e,t,n)=>{let r=getComputedStyle(e).getPropertyValue(t).trim(),i=Number.parseFloat(r);return Number.isFinite(i)?i:n},f={"--size-screen-2xl":1536,"--size-screen-lg":1024,"--size-screen-md":768,"--size-screen-sm":640,"--size-screen-xl":1280},p=[`1`,`2`,`3`,`4`,`5`,`6`,`7`,`8`,`9`,`10`,`11`,`12`,`auto`],m=[`start`,`center`,`end`,`stretch`,`baseline`],h=[`row`,`column`,`row-dense`,`column-dense`],g=[`none`,`xs`,`sm`,`md`,`lg`,`xl`,`2xl`],_=[`start`,`center`,`end`,`stretch`],v=`ore-grid`;r(v,{props:{align:c.oneOf(m),areas:c.string(),areas2xl:c.string(),areasLg:c.string(),areasMd:c.string(),areasSm:c.string(),areasXl:c.string(),cols:c.oneOf(p),cols2xl:c.oneOf(p),colsLg:c.oneOf(p),colsMd:c.oneOf(p),colsSm:c.oneOf(p),colsXl:c.oneOf(p),flow:c.oneOf(h),fullwidth:c.bool(!1),gap:c.oneOf(g),justify:c.oneOf(_),minColWidth:c.string(),responsive:c.bool(!1),rows:c.oneOf(p)},setup(e){let r=i(),c=l,computeCols=(e,t,n)=>e===`auto`||!e&&t?`repeat(auto-fit, minmax(${n||`250px`}, 1fr))`:e?`repeat(${e}, 1fr)`:null,updateCols=()=>{let t=r.offsetWidth,n=!!e.responsive.value,i=e.minColWidth.value??``,a;for(let[n,i]of u)if(t>=resolveBp(r,i,f[i])&&e[n].value){a=e[n].value;break}a||=e.cols.value||void 0;let o=computeCols(a,n,i);o?r.style.setProperty(`--_cols`,o):r.style.removeProperty(`--_cols`)};c(()=>{e.cols.value,e.colsSm.value,e.colsMd.value,e.colsLg.value,e.colsXl.value,e.cols2xl.value,e.responsive.value,e.minColWidth.value,updateCols()});let updateAreas=()=>{let t=r.offsetWidth,n=``;for(let[i,a]of d)if(t>=resolveBp(r,a,f[a])&&e[i].value){n=e[i].value;break}n||=e.areas.value||``,n?r.style.setProperty(`grid-template-areas`,n):r.style.removeProperty(`grid-template-areas`)};return c(()=>{let t=e.rows.value;t&&t!==`auto`?r.style.setProperty(`--_rows`,`repeat(${t}, 1fr)`):r.style.removeProperty(`--_rows`)}),c(()=>{e.areas.value,e.areasSm.value,e.areasMd.value,e.areasLg.value,e.areasXl.value,e.areas2xl.value,updateAreas()}),s(()=>{let e=n(r);o(()=>e.dispose());let i=t(e,{signal:e.disposalSignal});c(()=>{i.value&&(updateCols(),updateAreas())})}),a`
       <slot></slot>
-    `},styles:[e]});export{p as GRID_TAG};
+    `},styles:[e]});export{v as GRID_TAG};
 //# sourceMappingURL=grid.js.map

package/dist/grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid.js","names":[],"sources":["../src/layout/grid/grid.ts"],"sourcesContent":["import { define, getHost, html, onCleanup, onMounted, prop, watchEffect } from '@vielzeug/ore';\nimport { fromSubscribable } from '@vielzeug/ripple';\nimport { createElementSize } from '@vielzeug/sentinel';\n\nimport styles from './grid.css?inline';\n\nconst BREAKPOINTS: ['cols2xl' | 'colsXl' | 'colsLg' | 'colsMd' | 'colsSm', string][] = [\n  ['cols2xl', '--size-screen-2xl'],\n  ['colsXl', '--size-screen-xl'],\n  ['colsLg', '--size-screen-lg'],\n  ['colsMd', '--size-screen-md'],\n  ['colsSm', '--size-screen-sm'],\n];\n\nconst AREAS_BREAKPOINTS: ['areas2xl' | 'areasXl' | 'areasLg' | 'areasMd' | 'areasSm', string][] = [\n  ['areas2xl', '--size-screen-2xl'],\n  ['areasXl', '--size-screen-xl'],\n  ['areasLg', '--size-screen-lg'],\n  ['areasMd', '--size-screen-md'],\n  ['areasSm', '--size-screen-sm'],\n];\n\nconst resolveBp = (host: HTMLElement, varName: string, fallback: number): number => {\n  const raw = getComputedStyle(host).getPropertyValue(varName).trim();\n  const parsed = Number.parseFloat(raw);\n\n  return Number.isFinite(parsed) ? parsed : fallback;\n};\n\nconst BP_FALLBACKS: Record<string, number> = {\n  '--size-screen-2xl': 1536,\n  '--size-screen-lg': 1024,\n  '--size-screen-md': 768,\n  '--size-screen-sm': 640,\n  '--size-screen-xl': 1280,\n};\n\ntype ColCount = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto';\n\n/** Grid component properties */\nexport type OreGridProps = {\n  /** Align items vertically */\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n  /** CSS grid-template-areas value */\n  areas?: string;\n  /** grid-template-areas at 2xl breakpoint (≥1536px) */\n  areas2xl?: string;\n  /** grid-template-areas at lg breakpoint (≥1024px) */\n  areasLg?: string;\n  /** grid-template-areas at md breakpoint (≥768px) */\n  areasMd?: string;\n  /** grid-template-areas at sm breakpoint (≥640px) */\n  areasSm?: string;\n  /** grid-template-areas at xl breakpoint (≥1280px) */\n  areasXl?: string;\n  /** Number of columns: '1'-'12' | 'auto' */\n  cols?: ColCount;\n  /** Columns at 2xl breakpoint (≥1536px) */\n  cols2xl?: ColCount;\n  /** Columns at lg breakpoint (≥1024px) */\n  colsLg?: ColCount;\n  /** Columns at md breakpoint (≥768px) */\n  colsMd?: ColCount;\n  /** Columns at sm breakpoint (≥640px) */\n  colsSm?: ColCount;\n  /** Columns at xl breakpoint (≥1280px) */\n  colsXl?: ColCount;\n  /** Grid auto flow direction */\n  flow?: 'row' | 'column' | 'row-dense' | 'column-dense';\n  /** Stretch the grid to fill its container's full width */\n  fullwidth?: boolean;\n  /** Gap between items */\n  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /** Justify items horizontally */\n  justify?: 'start' | 'center' | 'end' | 'stretch';\n  /** Minimum column width for responsive mode (default: 250px) */\n  minColWidth?: string;\n  /** Use auto-fit responsive columns */\n  responsive?: boolean;\n  /** Number of rows: '1'-'12' | 'auto' */\n  rows?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto';\n};\n\n/**\n * ore-grid: Flexible grid layout with responsive column control.\n *\n * Columns are computed in JS and applied as `--_cols` inline, so they respond\n * to the element's own width via ResizeObserver. CSS custom properties\n * `--grid-cols`, `--grid-rows`, `--grid-gap`, `--grid-row-gap`, `--grid-col-gap`\n * are honoured as fallbacks when no attribute is set.\n *\n * @element ore-grid\n *\n * @attr {string} cols - Column count: '1'–'12' | 'auto'\n * @attr {string} cols-sm - Columns when width ≥ 640px\n * @attr {string} cols-md - Columns when width ≥ 768px\n * @attr {string} cols-lg - Columns when width ≥ 1024px\n * @attr {string} cols-xl - Columns when width ≥ 1280px\n * @attr {string} cols-2xl - Columns when width ≥ 1536px\n * @attr {string} rows - Row count: '1'–'12' | 'auto'\n * @attr {string} gap - Gap token: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n * @attr {string} align - align-items: 'start' | 'center' | 'end' | 'stretch' | 'baseline'\n * @attr {string} justify - justify-items: 'start' | 'center' | 'end' | 'stretch'\n * @attr {string} flow - grid-auto-flow: 'row' | 'column' | 'row-dense' | 'column-dense'\n * @attr {boolean} responsive - Enables auto-fit columns without a fixed count\n * @attr {string} min-col-width - Min column width for responsive mode (default: 250px)\n * @attr {boolean} fullwidth - Stretch the grid to fill its container's full width\n * @attr {string} areas - CSS grid-template-areas value (e.g. \"'header header' 'nav main'\")\n * @attr {string} areas-sm - grid-template-areas when width ≥ 640px\n * @attr {string} areas-md - grid-template-areas when width ≥ 768px\n * @attr {string} areas-lg - grid-template-areas when width ≥ 1024px\n * @attr {string} areas-xl - grid-template-areas when width ≥ 1280px\n * @attr {string} areas-2xl - grid-template-areas when width ≥ 1536px\n *\n * @slot - Grid items\n *\n * @cssprop --grid-cols - Fallback column template (used when no cols attr is set)\n * @cssprop --grid-rows - Fallback row template\n * @cssprop --grid-gap - Fallback gap\n * @cssprop --grid-row-gap - Fallback row gap\n * @cssprop --grid-col-gap - Fallback column gap\n *\n * @example\n * <ore-grid cols=\"1\" cols-sm=\"2\" cols-lg=\"4\" gap=\"md\">\n *   <div>Item</div>\n * </ore-grid>\n *\n * @example\n * <!-- Responsive auto-fit -->\n * <ore-grid responsive min-col-width=\"200px\" gap=\"sm\">\n *   <div>Card</div>\n * </ore-grid>\n *\n * @example\n * <!-- Named grid areas -->\n * <ore-grid cols=\"2\" rows=\"2\" areas=\"'header header' 'nav main'\">\n *   <header style=\"grid-area: header\">Header</header>\n *   <nav style=\"grid-area: nav\">Nav</nav>\n *   <main style=\"grid-area: main\">Main</main>\n * </ore-grid>\n */\nexport const GRID_TAG = 'ore-grid' as const;\ndefine<OreGridProps>(GRID_TAG, {\n  props: {\n    align: prop.string<'start' | 'center' | 'end' | 'stretch' | 'baseline'>(),\n    areas: prop.string(),\n    areas2xl: prop.string(),\n    areasLg: prop.string(),\n    areasMd: prop.string(),\n    areasSm: prop.string(),\n    areasXl: prop.string(),\n    cols: prop.string<ColCount>(),\n    cols2xl: prop.string<ColCount>(),\n    colsLg: prop.string<ColCount>(),\n    colsMd: prop.string<ColCount>(),\n    colsSm: prop.string<ColCount>(),\n    colsXl: prop.string<ColCount>(),\n    flow: prop.string<'row' | 'column' | 'row-dense' | 'column-dense'>(),\n    fullwidth: prop.bool(false),\n    gap: prop.string<'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'>(),\n    justify: prop.string<'start' | 'center' | 'end' | 'stretch'>(),\n    minColWidth: prop.string(),\n    responsive: prop.bool(false),\n    rows: prop.string<'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto'>(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    const computeCols = (activeCols: string | undefined, responsive: boolean, minW: string): string | null => {\n      if (activeCols === 'auto' || (!activeCols && responsive)) {\n        return `repeat(auto-fit, minmax(${minW || '250px'}, 1fr))`;\n      }\n\n      return activeCols ? `repeat(${activeCols}, 1fr)` : null;\n    };\n    const updateCols = () => {\n      const w = el.offsetWidth;\n      const responsive = Boolean(props.responsive.value);\n      const minW = props.minColWidth.value ?? '';\n      let activeCols: string | undefined;\n\n      for (const [key, cssVar] of BREAKPOINTS) {\n        if (w >= resolveBp(el, cssVar, BP_FALLBACKS[cssVar]) && props[key].value) {\n          activeCols = props[key].value!;\n          break;\n        }\n      }\n      activeCols ||= props.cols.value || undefined;\n\n      const colsValue = computeCols(activeCols, responsive, minW);\n\n      if (colsValue) {\n        el.style.setProperty('--_cols', colsValue);\n      } else {\n        el.style.removeProperty('--_cols');\n      }\n    };\n\n    // Re-run cols whenever any responsive prop changes\n    watch(() => {\n      void [\n        props.cols.value,\n        props.colsSm.value,\n        props.colsMd.value,\n        props.colsLg.value,\n        props.colsXl.value,\n        props.cols2xl.value,\n        props.responsive.value,\n        props.minColWidth.value,\n      ];\n      updateCols();\n    });\n\n    const updateAreas = () => {\n      const w = el.offsetWidth;\n      let active = '';\n\n      for (const [key, cssVar] of AREAS_BREAKPOINTS) {\n        if (w >= resolveBp(el, cssVar, BP_FALLBACKS[cssVar]) && props[key].value) {\n          active = props[key].value!;\n          break;\n        }\n      }\n      active ||= props.areas.value || '';\n\n      if (active) {\n        el.style.setProperty('grid-template-areas', active);\n      } else {\n        el.style.removeProperty('grid-template-areas');\n      }\n    };\n\n    // Rows\n    watch(() => {\n      const rows = props.rows.value;\n\n      if (rows && rows !== 'auto') {\n        el.style.setProperty('--_rows', `repeat(${rows}, 1fr)`);\n      } else {\n        el.style.removeProperty('--_rows');\n      }\n    });\n    // Grid template areas (responsive)\n    watch(() => {\n      void [\n        props.areas.value,\n        props.areasSm.value,\n        props.areasMd.value,\n        props.areasLg.value,\n        props.areasXl.value,\n        props.areas2xl.value,\n      ];\n      updateAreas();\n    });\n\n    // Also, update on element resize (drives breakpoint switching)\n    onMounted(() => {\n      const size = createElementSize(el);\n\n      onCleanup(() => size.dispose());\n\n      const sizeSignal = fromSubscribable(size, { signal: size.disposalSignal });\n\n      watch(() => {\n        const dims = sizeSignal.value;\n        if (dims) {\n          updateCols();\n          updateAreas();\n        }\n      });\n    });\n\n    return html`\n      <slot></slot>\n    `;\n  },\n\n  styles: [styles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"grid.js","names":[],"sources":["../src/layout/grid/grid.ts"],"sourcesContent":["import { define, getHost, html, onCleanup, onMounted, prop, watchEffect } from '@vielzeug/ore';\nimport { fromSubscribable } from '@vielzeug/ripple';\nimport { createElementSize } from '@vielzeug/sentinel';\n\nimport styles from './grid.css?inline';\n\nconst BREAKPOINTS: ['cols2xl' | 'colsXl' | 'colsLg' | 'colsMd' | 'colsSm', string][] = [\n  ['cols2xl', '--size-screen-2xl'],\n  ['colsXl', '--size-screen-xl'],\n  ['colsLg', '--size-screen-lg'],\n  ['colsMd', '--size-screen-md'],\n  ['colsSm', '--size-screen-sm'],\n];\n\nconst AREAS_BREAKPOINTS: ['areas2xl' | 'areasXl' | 'areasLg' | 'areasMd' | 'areasSm', string][] = [\n  ['areas2xl', '--size-screen-2xl'],\n  ['areasXl', '--size-screen-xl'],\n  ['areasLg', '--size-screen-lg'],\n  ['areasMd', '--size-screen-md'],\n  ['areasSm', '--size-screen-sm'],\n];\n\nconst resolveBp = (host: HTMLElement, varName: string, fallback: number): number => {\n  const raw = getComputedStyle(host).getPropertyValue(varName).trim();\n  const parsed = Number.parseFloat(raw);\n\n  return Number.isFinite(parsed) ? parsed : fallback;\n};\n\nconst BP_FALLBACKS: Record<string, number> = {\n  '--size-screen-2xl': 1536,\n  '--size-screen-lg': 1024,\n  '--size-screen-md': 768,\n  '--size-screen-sm': 640,\n  '--size-screen-xl': 1280,\n};\n\nconst COL_COUNTS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', 'auto'] as const;\nconst GRID_ALIGNMENTS = ['start', 'center', 'end', 'stretch', 'baseline'] as const;\nconst GRID_FLOWS = ['row', 'column', 'row-dense', 'column-dense'] as const;\nconst GRID_GAPS = ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const;\nconst GRID_JUSTIFICATIONS = ['start', 'center', 'end', 'stretch'] as const;\n\ntype ColCount = (typeof COL_COUNTS)[number];\n\n/** Grid component properties */\nexport type OreGridProps = {\n  /** Align items vertically */\n  align?: (typeof GRID_ALIGNMENTS)[number];\n  /** CSS grid-template-areas value */\n  areas?: string;\n  /** grid-template-areas at 2xl breakpoint (≥1536px) */\n  areas2xl?: string;\n  /** grid-template-areas at lg breakpoint (≥1024px) */\n  areasLg?: string;\n  /** grid-template-areas at md breakpoint (≥768px) */\n  areasMd?: string;\n  /** grid-template-areas at sm breakpoint (≥640px) */\n  areasSm?: string;\n  /** grid-template-areas at xl breakpoint (≥1280px) */\n  areasXl?: string;\n  /** Number of columns: '1'-'12' | 'auto' */\n  cols?: ColCount;\n  /** Columns at 2xl breakpoint (≥1536px) */\n  cols2xl?: ColCount;\n  /** Columns at lg breakpoint (≥1024px) */\n  colsLg?: ColCount;\n  /** Columns at md breakpoint (≥768px) */\n  colsMd?: ColCount;\n  /** Columns at sm breakpoint (≥640px) */\n  colsSm?: ColCount;\n  /** Columns at xl breakpoint (≥1280px) */\n  colsXl?: ColCount;\n  /** Grid auto flow direction */\n  flow?: (typeof GRID_FLOWS)[number];\n  /** Stretch the grid to fill its container's full width */\n  fullwidth?: boolean;\n  /** Gap between items */\n  gap?: (typeof GRID_GAPS)[number];\n  /** Justify items horizontally */\n  justify?: (typeof GRID_JUSTIFICATIONS)[number];\n  /** Minimum column width for responsive mode (default: 250px) */\n  minColWidth?: string;\n  /** Use auto-fit responsive columns */\n  responsive?: boolean;\n  /** Number of rows: '1'-'12' | 'auto' */\n  rows?: ColCount;\n};\n\n/**\n * ore-grid: Flexible grid layout with responsive column control.\n *\n * Columns are computed in JS and applied as `--_cols` inline, so they respond\n * to the element's own width via ResizeObserver. CSS custom properties\n * `--grid-cols`, `--grid-rows`, `--grid-gap`, `--grid-row-gap`, `--grid-col-gap`\n * are honoured as fallbacks when no attribute is set.\n *\n * @element ore-grid\n *\n * @attr {string} cols - Column count: '1'–'12' | 'auto'\n * @attr {string} cols-sm - Columns when width ≥ 640px\n * @attr {string} cols-md - Columns when width ≥ 768px\n * @attr {string} cols-lg - Columns when width ≥ 1024px\n * @attr {string} cols-xl - Columns when width ≥ 1280px\n * @attr {string} cols-2xl - Columns when width ≥ 1536px\n * @attr {string} rows - Row count: '1'–'12' | 'auto'\n * @attr {string} gap - Gap token: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n * @attr {string} align - align-items: 'start' | 'center' | 'end' | 'stretch' | 'baseline'\n * @attr {string} justify - justify-items: 'start' | 'center' | 'end' | 'stretch'\n * @attr {string} flow - grid-auto-flow: 'row' | 'column' | 'row-dense' | 'column-dense'\n * @attr {boolean} responsive - Enables auto-fit columns without a fixed count\n * @attr {string} min-col-width - Min column width for responsive mode (default: 250px)\n * @attr {boolean} fullwidth - Stretch the grid to fill its container's full width\n * @attr {string} areas - CSS grid-template-areas value (e.g. \"'header header' 'nav main'\")\n * @attr {string} areas-sm - grid-template-areas when width ≥ 640px\n * @attr {string} areas-md - grid-template-areas when width ≥ 768px\n * @attr {string} areas-lg - grid-template-areas when width ≥ 1024px\n * @attr {string} areas-xl - grid-template-areas when width ≥ 1280px\n * @attr {string} areas-2xl - grid-template-areas when width ≥ 1536px\n *\n * @slot - Grid items\n *\n * @cssprop --grid-cols - Fallback column template (used when no cols attr is set)\n * @cssprop --grid-rows - Fallback row template\n * @cssprop --grid-gap - Fallback gap\n * @cssprop --grid-row-gap - Fallback row gap\n * @cssprop --grid-col-gap - Fallback column gap\n *\n * @example\n * <ore-grid cols=\"1\" cols-sm=\"2\" cols-lg=\"4\" gap=\"md\">\n *   <div>Item</div>\n * </ore-grid>\n *\n * @example\n * <!-- Responsive auto-fit -->\n * <ore-grid responsive min-col-width=\"200px\" gap=\"sm\">\n *   <div>Card</div>\n * </ore-grid>\n *\n * @example\n * <!-- Named grid areas -->\n * <ore-grid cols=\"2\" rows=\"2\" areas=\"'header header' 'nav main'\">\n *   <header style=\"grid-area: header\">Header</header>\n *   <nav style=\"grid-area: nav\">Nav</nav>\n *   <main style=\"grid-area: main\">Main</main>\n * </ore-grid>\n */\nexport const GRID_TAG = 'ore-grid' as const;\ndefine<OreGridProps>(GRID_TAG, {\n  props: {\n    align: prop.oneOf(GRID_ALIGNMENTS),\n    areas: prop.string(),\n    areas2xl: prop.string(),\n    areasLg: prop.string(),\n    areasMd: prop.string(),\n    areasSm: prop.string(),\n    areasXl: prop.string(),\n    cols: prop.oneOf(COL_COUNTS),\n    cols2xl: prop.oneOf(COL_COUNTS),\n    colsLg: prop.oneOf(COL_COUNTS),\n    colsMd: prop.oneOf(COL_COUNTS),\n    colsSm: prop.oneOf(COL_COUNTS),\n    colsXl: prop.oneOf(COL_COUNTS),\n    flow: prop.oneOf(GRID_FLOWS),\n    fullwidth: prop.bool(false),\n    gap: prop.oneOf(GRID_GAPS),\n    justify: prop.oneOf(GRID_JUSTIFICATIONS),\n    minColWidth: prop.string(),\n    responsive: prop.bool(false),\n    rows: prop.oneOf(COL_COUNTS),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    const computeCols = (activeCols: string | undefined, responsive: boolean, minW: string): string | null => {\n      if (activeCols === 'auto' || (!activeCols && responsive)) {\n        return `repeat(auto-fit, minmax(${minW || '250px'}, 1fr))`;\n      }\n\n      return activeCols ? `repeat(${activeCols}, 1fr)` : null;\n    };\n    const updateCols = () => {\n      const w = el.offsetWidth;\n      const responsive = Boolean(props.responsive.value);\n      const minW = props.minColWidth.value ?? '';\n      let activeCols: string | undefined;\n\n      for (const [key, cssVar] of BREAKPOINTS) {\n        if (w >= resolveBp(el, cssVar, BP_FALLBACKS[cssVar]) && props[key].value) {\n          activeCols = props[key].value!;\n          break;\n        }\n      }\n      activeCols ||= props.cols.value || undefined;\n\n      const colsValue = computeCols(activeCols, responsive, minW);\n\n      if (colsValue) {\n        el.style.setProperty('--_cols', colsValue);\n      } else {\n        el.style.removeProperty('--_cols');\n      }\n    };\n\n    // Re-run cols whenever any responsive prop changes\n    watch(() => {\n      void [\n        props.cols.value,\n        props.colsSm.value,\n        props.colsMd.value,\n        props.colsLg.value,\n        props.colsXl.value,\n        props.cols2xl.value,\n        props.responsive.value,\n        props.minColWidth.value,\n      ];\n      updateCols();\n    });\n\n    const updateAreas = () => {\n      const w = el.offsetWidth;\n      let active = '';\n\n      for (const [key, cssVar] of AREAS_BREAKPOINTS) {\n        if (w >= resolveBp(el, cssVar, BP_FALLBACKS[cssVar]) && props[key].value) {\n          active = props[key].value!;\n          break;\n        }\n      }\n      active ||= props.areas.value || '';\n\n      if (active) {\n        el.style.setProperty('grid-template-areas', active);\n      } else {\n        el.style.removeProperty('grid-template-areas');\n      }\n    };\n\n    // Rows\n    watch(() => {\n      const rows = props.rows.value;\n\n      if (rows && rows !== 'auto') {\n        el.style.setProperty('--_rows', `repeat(${rows}, 1fr)`);\n      } else {\n        el.style.removeProperty('--_rows');\n      }\n    });\n    // Grid template areas (responsive)\n    watch(() => {\n      void [\n        props.areas.value,\n        props.areasSm.value,\n        props.areasMd.value,\n        props.areasLg.value,\n        props.areasXl.value,\n        props.areas2xl.value,\n      ];\n      updateAreas();\n    });\n\n    // Also, update on element resize (drives breakpoint switching)\n    onMounted(() => {\n      const size = createElementSize(el);\n\n      onCleanup(() => size.dispose());\n\n      const sizeSignal = fromSubscribable(size, { signal: size.disposalSignal });\n\n      watch(() => {\n        const dims = sizeSignal.value;\n        if (dims) {\n          updateCols();\n          updateAreas();\n        }\n      });\n    });\n\n    return html`\n      <slot></slot>\n    `;\n  },\n\n  styles: [styles],\n});\n"],"mappings":"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"}

package/dist/input.cjs

@@ -1,8 +1,8 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./inputs/shared/native-field-event.cjs"),t=require("./styles/mixins/accessibility.css.cjs"),n=require("./styles/mixins/field-variants.css.cjs"),r=require("./styles/mixins/shape.css.cjs"),i=require("./styles/mixins/states.css.cjs"),a=require("./styles/mixins/theme.css.cjs"),o=require("./core/ore.cjs"),s=require("./core/ref-callback.cjs"),c=require("./core/text-field.cjs"),l=require("./shared/prop-bundles.cjs"),u=require("./shared/size-presets.cjs"),d=require("./icon.cjs"),f=require("./inputs/shared/field-binding.cjs"),p=require("./inputs/shared/templates.cjs"),m=require("./inputs/input/input.css.cjs");let h=require("@vielzeug/ripple"),g=require("@vielzeug/ore");var _=[`text`,`email`,`password`,`search`,`url`,`tel`,`number`,`date`,`time`,`datetime-local`,`month`,`week`],v=`ore-input`;(0,g.define)(v,{formAssociated:!0,props:{...l.themableBundle,...l.sizableBundle,...l.disablableBundle,...l.roundableBundle,"aria-label":g.prop.string(),autocomplete:g.prop.string(),clearable:g.prop.bool(!1),error:g.prop.string(),fullwidth:g.prop.bool(!1),helper:g.prop.string(),inputmode:g.prop.string(),label:g.prop.string(),"label-placement":g.prop.oneOf([`inset`,`outside`],`inset`),loading:g.prop.bool(!1),maxlength:g.prop.json(void 0),minlength:g.prop.json(void 0),name:g.prop.string(),pattern:g.prop.string(),placeholder:g.prop.string(),readonly:g.prop.bool(!1),ref:g.prop.data(),required:g.prop.bool(!1),success:g.prop.bool(!1),type:g.prop.oneOf(_,`text`),value:g.prop.string(),variant:g.prop.string()},setup(t){let n=(0,g.getHost)(),r=(0,g.useSlots)(),i=(0,h.signal)(!1),a=(0,g.ref)(),l=(0,h.computed)(()=>!!t.label.value||r.has(`label`).value),u=(0,h.computed)(()=>t.disabled.value||t.loading.value),d=o.lifecycleSignal(g.onCleanup),m=c.createTextField({disabled:u,error:t.error,hasLabel:l,helper:t.helper,label:t.label,labelPlacement:t[`label-placement`],maxLength:t.maxlength,onChange:(t,r)=>{e.setFieldValue(n,r),e.dispatchNativeFieldEvent(n,`change`)},onInput:(t,r)=>{e.setFieldValue(n,r),e.dispatchNativeFieldEvent(n,`input`)},prefix:`input`,readonly:t.readonly,required:t.required,signal:d,value:t.value});e.defineFieldValue(n,()=>m.value.value,e=>{m.value.value=e}),m.attachFormField((0,g.useField)({disabled:m.disabled,onReset:m.reset,toFormValue:e=>e,validationMessage:m.validationMessage,validity:m.validity,value:m.value}));let{ariaDescribedBy:_,ariaErrorMessage:v,ariaInvalid:y,ariaLabelledBy:b,assistiveId:x,clear:S,counter:C,errorId:w,errorText:T,fieldId:E,helperText:D,labelId:O,labelVisible:k,value:A,wire:j}=m;(0,g.onElement)(a,e=>{j(e,d);let n=s.bindRefCallback(t.ref,e);return()=>{n()}});let clear=e=>{S(e),a.value?.focus()},resolvedInputType=()=>t.type.value===`password`&&i.value?`text`:t.type.value??`text`;(0,g.bind)({attr:{error:f.errorAttr(T),"has-value":()=>A.value?!0:void 0,size:t.size,success:()=>t.success.value&&!T.value?!0:void 0,variant:t.variant}});let labelHidden=()=>!k.value,passwordToggleLabel=()=>i.value?`Hide password`:`Show password`,passwordTogglePressed=()=>String(i.value),passwordToggleIcon=()=>i.value?g.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./inputs/shared/native-field-event.cjs"),t=require("./styles/mixins/accessibility.css.cjs"),n=require("./styles/mixins/field-variants.css.cjs"),r=require("./styles/mixins/shape.css.cjs"),i=require("./styles/mixins/states.css.cjs"),a=require("./styles/mixins/theme.css.cjs"),o=require("./core/ore.cjs"),s=require("./core/ref-callback.cjs"),c=require("./core/text-field.cjs"),l=require("./shared/types.cjs"),u=require("./shared/prop-bundles.cjs"),d=require("./shared/size-presets.cjs"),f=require("./icon.cjs"),p=require("./inputs/shared/field-binding.cjs"),m=require("./inputs/shared/templates.cjs"),h=require("./inputs/input/input.css.cjs");let g=require("@vielzeug/ripple"),_=require("@vielzeug/ore");var v=[`none`,`text`,`decimal`,`numeric`,`tel`,`search`,`email`,`url`],y=[`text`,`email`,`password`,`search`,`url`,`tel`,`number`,`date`,`time`,`datetime-local`,`month`,`week`],b=`ore-input`;(0,_.define)(b,{formAssociated:!0,props:{...u.themableBundle,...u.sizableBundle,...u.disablableBundle,...u.roundableBundle,"aria-label":_.prop.string(),autocomplete:_.prop.string(),clearable:_.prop.bool(!1),error:_.prop.string(),fullwidth:_.prop.bool(!1),helper:_.prop.string(),inputmode:_.prop.oneOf(v),label:_.prop.string(),"label-placement":_.prop.oneOf([`inset`,`outside`],`inset`),loading:_.prop.bool(!1),maxlength:_.prop.json(void 0),minlength:_.prop.json(void 0),name:_.prop.string(),pattern:_.prop.string(),placeholder:_.prop.string(),readonly:_.prop.bool(!1),ref:_.prop.data(),required:_.prop.bool(!1),success:_.prop.bool(!1),type:_.prop.oneOf(y,`text`),value:_.prop.string(),variant:_.prop.oneOf(l.INPUT_VARIANTS)},setup(t){let n=(0,_.getHost)(),r=(0,_.useSlots)(),i=(0,g.signal)(!1),a=(0,_.ref)(),l=(0,g.computed)(()=>!!t.label.value||r.has(`label`).value),u=(0,g.computed)(()=>t.disabled.value||t.loading.value),d=o.lifecycleSignal(_.onCleanup),f=c.createTextField({disabled:u,error:t.error,hasLabel:l,helper:t.helper,label:t.label,labelPlacement:t[`label-placement`],maxLength:t.maxlength,onChange:(t,r)=>{e.setFieldValue(n,r),e.dispatchNativeFieldEvent(n,`change`)},onInput:(t,r)=>{e.setFieldValue(n,r),e.dispatchNativeFieldEvent(n,`input`)},prefix:`input`,readonly:t.readonly,required:t.required,signal:d,value:t.value});e.defineFieldValue(n,()=>f.value.value,e=>{f.value.value=e}),f.attachFormField((0,_.useField)({disabled:f.disabled,onReset:f.reset,toFormValue:e=>e,validity:f.validity,value:f.value}));let{ariaDescribedBy:h,ariaErrorMessage:v,ariaInvalid:y,ariaLabelledBy:b,assistiveId:x,clear:S,counter:C,errorId:w,errorText:T,fieldId:E,helperText:D,labelId:O,labelVisible:k,value:A,wire:j}=f;(0,_.onElement)(a,e=>{j(e,d);let n=s.bindRefCallback(t.ref,e);return()=>{n()}});let clear=e=>{S(e),a.value?.focus()},resolvedInputType=()=>t.type.value===`password`&&i.value?`text`:t.type.value??`text`;(0,_.bind)({attr:{error:p.errorAttr(T),"has-value":()=>A.value?!0:void 0,size:t.size,success:()=>t.success.value&&!T.value?!0:void 0,variant:t.variant}});let labelHidden=()=>!k.value,passwordToggleLabel=()=>i.value?`Hide password`:`Show password`,passwordTogglePressed=()=>String(i.value),passwordToggleIcon=()=>i.value?_.html`
             <ore-icon name="eye-off" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
-          `:g.html`
+          `:_.html`
             <ore-icon name="eye" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
-          `,helperHidden=()=>!!T.value||!D.value,errorHidden=()=>!T.value,counterNearLimit=()=>C?.value.counterNearLimit&&!C?.value.counterAtLimit?``:null,counterAtLimit=()=>C?.value.counterAtLimit?``:null,counterHidden=()=>!C,counterText=()=>C?.value.counterText??``,clearTabIndex=()=>A.value?`0`:`-1`,pwdToggleTabIndex=()=>t.type.value===`password`?`0`:`-1`,togglePassword=()=>{i.value=!i.value,a.value?.focus()};return g.html`
+          `,helperHidden=()=>!!T.value||!D.value,errorHidden=()=>!T.value,counterNearLimit=()=>C?.value.counterNearLimit&&!C?.value.counterAtLimit?``:null,counterAtLimit=()=>C?.value.counterAtLimit?``:null,counterHidden=()=>!C,counterText=()=>C?.value.counterText??``,clearTabIndex=()=>A.value?`0`:`-1`,pwdToggleTabIndex=()=>t.type.value===`password`?`0`:`-1`,togglePassword=()=>{i.value=!i.value,a.value?.focus()};return _.html`
       <div class="input-wrapper" part="wrapper">
         <label class="label" for="${()=>labelHidden()?null:E}" id="${O}" part="label" ?hidden="${labelHidden}">
           <slot name="label">${t.label}</slot>
@@ -24,16 +24,16 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               ?disabled="${u}"
               ?readonly="${t.readonly}"
               ?required="${t.required}"
-              value="${(0,g.live)(A)}"
+              value="${(0,_.model)(A)}"
               aria-label="${t[`aria-label`]}"
               aria-labelledby="${b}"
-              aria-describedby="${_}"
+              aria-describedby="${h}"
               aria-errormessage="${v}"
               aria-invalid="${y}"
               aria-busy="${()=>t.loading.value?`true`:null}"
               ref="${a}" />
             <slot name="suffix"></slot>
-            ${p.renderStatusIcon(T)}
+            ${m.renderStatusIcon(T)}
             <span class="field-spinner" part="spinner" role="status" aria-label="Loading"></span>
             <button
               class="pwd-toggle-btn"
@@ -71,5 +71,5 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           ${counterText}
         </div>
       </div>
-    `},shadow:{delegatesFocus:!0},styles:[a.colorThemeMixin,t.coarsePointerMixin,t.reducedMotionMixin,r.roundedVariantMixin,i.disabledLoadingMixin,r.sizeVariantMixin(u.FIELD_SIZE_PRESET),a.forcedColorsFocusMixin(`input`),m.default,n.fieldVariantMixin({container:`.field`,text:`input`,tokenPrefix:`input`})]}),exports.ICON_TAG=d.ICON_TAG,exports.INPUT_TAG=v;
+    `},shadow:{delegatesFocus:!0},styles:[a.colorThemeMixin,t.coarsePointerMixin,t.reducedMotionMixin,r.roundedVariantMixin,i.disabledLoadingMixin,r.sizeVariantMixin(d.FIELD_SIZE_PRESET),a.forcedColorsFocusMixin(`input`),h.default,n.fieldVariantMixin({container:`.field`,text:`input`,tokenPrefix:`input`})]}),exports.ICON_TAG=f.ICON_TAG,exports.INPUT_TAG=b;
 //# sourceMappingURL=input.cjs.map

package/dist/input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"input.cjs","names":[],"sources":["../src/inputs/input/input.ts"],"sourcesContent":["import { bind, define, getHost, html, live, onCleanup, onElement, prop, ref, useField, useSlots } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { bindRefCallback, createTextField, lifecycleSignal } from '../../core';\nimport type { TextFieldProps } from '../../shared';\nimport { disablableBundle, FIELD_SIZE_PRESET, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledLoadingMixin,\n  fieldVariantMixin,\n  forcedColorsFocusMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport type { InputType, VisualVariant } from '../../types';\nimport { errorAttr } from '../shared/field-binding';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport { renderStatusIcon } from '../shared/templates';\nimport componentStyles from './input.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\n/** Input component properties */\n\nexport type OreInputEvents = {\n  change: Event;\n  input: InputEvent;\n};\n\nexport type OreInputProps = TextFieldProps<Exclude<VisualVariant, 'frost'>> & {\n  /** Accessible name used when no visible label is rendered. */\n  'aria-label'?: string;\n  /** Autocomplete hint */\n  autocomplete?: string;\n  /** Show a clear (×) button when the field has a value */\n  clearable?: boolean;\n  /** Virtual keyboard hint for mobile devices */\n  inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n  /**\n   * Shows an inline spinner inside the field and forces the inner `<input>` into\n   * `disabled` for the duration: use while an async validation/submission request\n   * is in flight (e.g. checking username availability) to prevent double-submits.\n   */\n  loading?: boolean;\n  /** Maximum character length: shows a counter below the input */\n  maxlength?: number;\n  /** Minimum character length */\n  minlength?: number;\n  /** HTML pattern attribute for client-side validation */\n  pattern?: string;\n  /**\n   * JS-only callback fired with the inner `<input>` element when it mounts,\n   * and with `null` when it unmounts. Intended for composed components that\n   * need imperative access to the raw input element.\n   * Set as a JS property: `bitInput.ref = (el) => { ... }`.\n   */\n  ref?: ((el: HTMLInputElement | null) => void) | null;\n  /** HTML input type */\n  type?: InputType;\n};\n\nconst VALID_INPUT_TYPES = [\n  'text',\n  'email',\n  'password',\n  'search',\n  'url',\n  'tel',\n  'number',\n  'date',\n  'time',\n  'datetime-local',\n  'month',\n  'week',\n] as const;\n\n/**\n * A customizable text input component with multiple variants, label placements, and form features.\n *\n * @element ore-input\n *\n * @attr {string} aria-label - Accessible name used when no visible label is rendered\n * @attr {string} label - Label text\n * @attr {string} label-placement - Label placement: 'inset' | 'outside'\n * @attr {string} type - HTML input type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search'\n * @attr {string} value - Current input value\n * @attr {string} placeholder - Placeholder text\n * @attr {string} name - Form field name\n * @attr {string} helper - Helper text displayed below the input (fallback when the `helper` slot is empty)\n * @attr {string} error - Error message: marks the field as invalid (fallback when the `error` slot is empty)\n * @attr {boolean} disabled - Disable input interaction\n * @attr {boolean} readonly - Make the input read-only\n * @attr {boolean} required - Mark the field as required\n * @attr {boolean} loading - Show an inline spinner and force the field disabled\n * @attr {boolean} success - Show an inline success check icon (suppressed while `error` is set)\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text'\n * @attr {string} size - Input size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n *\n * @fires input - Emitted when input value changes (on every keystroke).\n * @fires change - Emitted when input loses focus with changed value.\n *\n * @slot prefix - Content before the input (e.g., icons)\n * @slot suffix - Content after the input (e.g., clear button, validation icon)\n * @slot label - Replaces the label text: slotted content takes precedence over the `label` prop\n * @slot helper - Replaces the helper text: slotted content takes precedence over the `helper` prop\n * @slot error - Replaces the error text: slotted content takes precedence over the `error` prop\n *\n * @part wrapper - The input wrapper element\n * @part label - The label element (inset or outside)\n * @part field - The field container element\n * @part input-row - The input row container element\n * @part input - The input element\n * @part status-icon - The inline error/success icon shown inside the field\n * @part spinner - The inline loading spinner shown inside the field while `loading`\n * @part helper - The helper text element\n *\n * @cssprop --input-bg - Background color\n * @cssprop --input-color - Text color\n * @cssprop --input-border-color - Border color\n * @cssprop --input-placeholder-color - Placeholder text color\n * @cssprop --input-radius - Border radius\n * @cssprop --input-padding - Inner padding (block inline)\n * @cssprop --input-label-block-inset - Inset from the field block start for an inset label\n * @cssprop --input-label-inset - Inset from the field inline start for an inset label\n * @cssprop --input-gap - Gap between prefix/suffix icons and input text\n * @cssprop --input-font-size - Font size\n * @cssprop --input-height - Field height\n * @cssprop --input-hover-bg - Field background on hover (flat/ghost variants)\n * @cssprop --input-hover-border-color - Field border on hover (flat/bordered variants)\n * @cssprop --input-focus-bg - Field background when focused (flat variant)\n * @cssprop --input-focus-border-color - Field border when focused (flat/text variants)\n *\n * @example\n * ```html\n * <ore-input type=\"email\" label=\"Email\" placeholder=\"you@example.com\" />\n * <ore-input label=\"Name\" variant=\"bordered\" color=\"primary\" />\n * <ore-input label=\"Username\" error=\"That username is taken\" />\n * <ore-input label=\"Username\" success />\n * <ore-input label=\"Username\" loading />\n * ```\n */\nexport const INPUT_TAG = 'ore-input' as const;\ndefine<OreInputProps>(INPUT_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...roundableBundle,\n    'aria-label': prop.string(),\n    autocomplete: prop.string(),\n    clearable: prop.bool(false),\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    inputmode: prop.string<'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'>(),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    loading: prop.bool(false),\n    maxlength: prop.json(undefined as number | undefined),\n    minlength: prop.json(undefined as number | undefined),\n    name: prop.string(),\n    pattern: prop.string(),\n    placeholder: prop.string(),\n    readonly: prop.bool(false),\n    ref: prop.data<((el: HTMLInputElement | null) => void) | null>(),\n    required: prop.bool(false),\n    success: prop.bool(false),\n    type: prop.oneOf(VALID_INPUT_TYPES, 'text'),\n    value: prop.string(),\n    variant: prop.string<'flat' | 'text' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const slots = useSlots();\n\n    const showPassword = signal(false);\n    const inputRef = ref<HTMLInputElement>();\n\n    const hasLabel = computed(() => !!props.label.value || slots.has('label').value);\n    // `loading` behaves like a temporary `disabled`: forces the inner <input> out of\n    // constraint validation and interaction for the duration, layered on top of any real\n    // `loading` is layered on top of the consumer's explicit `disabled` prop.\n    const isDisabled = computed(() => props.disabled.value || props.loading.value);\n\n    const abortSignal = lifecycleSignal(onCleanup);\n    const tf = createTextField({\n      disabled: isDisabled,\n      error: props.error,\n      hasLabel,\n      helper: props.helper,\n      label: props.label,\n      labelPlacement: props['label-placement'],\n      maxLength: props.maxlength,\n      onChange: (_event: Event, value: string) => {\n        setFieldValue(el, value);\n        dispatchNativeFieldEvent(el, 'change');\n      },\n      onInput: (_event: Event, value: string) => {\n        setFieldValue(el, value);\n        dispatchNativeFieldEvent(el, 'input');\n      },\n      prefix: 'input',\n      readonly: props.readonly,\n      required: props.required,\n      signal: abortSignal,\n      value: props.value,\n    });\n\n    defineFieldValue(\n      el,\n      () => tf.value.value,\n      (value) => {\n        tf.value.value = value;\n      },\n    );\n\n    tf.attachFormField(\n      useField<string>({\n        disabled: tf.disabled,\n        onReset: tf.reset,\n        toFormValue: (v) => v,\n        validationMessage: tf.validationMessage,\n        validity: tf.validity,\n        value: tf.value,\n      }),\n    );\n\n    const {\n      ariaDescribedBy,\n      ariaErrorMessage,\n      ariaInvalid,\n      ariaLabelledBy,\n      assistiveId,\n      clear: clearValue,\n      counter,\n      errorId,\n      errorText,\n      fieldId: inputId,\n      helperText,\n      labelId,\n      labelVisible,\n      value: fieldValue,\n      wire,\n    } = tf;\n\n    onElement(inputRef, (el) => {\n      wire(el, abortSignal);\n\n      const unwireRef = bindRefCallback(props.ref, el);\n\n      return () => {\n        unwireRef();\n      };\n    });\n\n    const clear = (event?: Event): void => {\n      clearValue(event);\n      inputRef.value?.focus();\n    };\n\n    const resolvedInputType = (): string =>\n      props.type.value === 'password' && showPassword.value ? 'text' : (props.type.value ?? 'text');\n\n    bind({\n      attr: {\n        error: errorAttr(errorText),\n        'has-value': () => (fieldValue.value ? true : undefined),\n        size: props.size,\n        // Reflects `success` only once `error` is confirmed empty: keeps the two host\n        // attributes mutually exclusive even if a consumer sets both props at once.\n        success: () => (props.success.value && !errorText.value ? true : undefined),\n        variant: props.variant,\n      },\n    });\n\n    const labelHidden = () => !labelVisible.value;\n    const passwordToggleLabel = () => (showPassword.value ? 'Hide password' : 'Show password');\n    const passwordTogglePressed = () => String(showPassword.value);\n    const passwordToggleIcon = () =>\n      showPassword.value\n        ? html`\n            <ore-icon name=\"eye-off\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n          `\n        : html`\n            <ore-icon name=\"eye\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n          `;\n    const helperHidden = () => !!errorText.value || !helperText.value;\n    const errorHidden = () => !errorText.value;\n    const counterNearLimit = () => (counter?.value.counterNearLimit && !counter?.value.counterAtLimit ? '' : null);\n    const counterAtLimit = () => (counter?.value.counterAtLimit ? '' : null);\n    const counterHidden = () => !counter;\n    const counterText = () => counter?.value.counterText ?? '';\n\n    const clearTabIndex = () => (fieldValue.value ? '0' : '-1');\n    const pwdToggleTabIndex = () => (props.type.value === 'password' ? '0' : '-1');\n\n    const togglePassword = () => {\n      showPassword.value = !showPassword.value;\n      inputRef.value?.focus();\n    };\n\n    return html`\n      <div class=\"input-wrapper\" part=\"wrapper\">\n        <label class=\"label\" for=\"${() => (labelHidden() ? null : inputId)}\" id=\"${labelId}\" part=\"label\" ?hidden=\"${labelHidden}\">\n          <slot name=\"label\">${props.label}</slot>\n        </label>\n        <div class=\"field\" part=\"field\">\n          <div class=\"input-row\" part=\"input-row\">\n            <slot name=\"prefix\"></slot>\n            <input\n              part=\"input\"\n              id=\"${inputId}\"\n              type=\"${resolvedInputType}\"\n              name=\"${props.name}\"\n              placeholder=\"${props.placeholder}\"\n              autocomplete=\"${props.autocomplete}\"\n              inputmode=\"${props.inputmode}\"\n              maxlength=\"${props.maxlength}\"\n              minlength=\"${props.minlength}\"\n              pattern=\"${props.pattern}\"\n              ?disabled=\"${isDisabled}\"\n              ?readonly=\"${props.readonly}\"\n              ?required=\"${props.required}\"\n              value=\"${live(fieldValue)}\"\n              aria-label=\"${props['aria-label']}\"\n              aria-labelledby=\"${ariaLabelledBy}\"\n              aria-describedby=\"${ariaDescribedBy}\"\n              aria-errormessage=\"${ariaErrorMessage}\"\n              aria-invalid=\"${ariaInvalid}\"\n              aria-busy=\"${() => (props.loading.value ? 'true' : null)}\"\n              ref=\"${inputRef}\" />\n            <slot name=\"suffix\"></slot>\n            ${renderStatusIcon(errorText)}\n            <span class=\"field-spinner\" part=\"spinner\" role=\"status\" aria-label=\"Loading\"></span>\n            <button\n              class=\"pwd-toggle-btn\"\n              part=\"pwd-toggle\"\n              type=\"button\"\n              aria-label=\"${passwordToggleLabel}\"\n              aria-pressed=\"${passwordTogglePressed}\"\n              tabindex=\"${pwdToggleTabIndex}\"\n              @click=\"${togglePassword}\">\n              ${passwordToggleIcon}\n            </button>\n            <button\n              aria-label=\"Clear\"\n              class=\"clear-btn\"\n              part=\"clear\"\n              type=\"button\"\n              tabindex=\"${clearTabIndex}\"\n              @click=\"${clear}\">\n              <ore-icon aria-hidden=\"true\" name=\"x\" size=\"12\" stroke-width=\"2.5\"></ore-icon>\n            </button>\n          </div>\n        </div>\n        <div class=\"helper-text\" aria-live=\"polite\" id=\"${assistiveId}\" part=\"helper\" ?hidden=\"${helperHidden}\">\n          <slot name=\"helper\">${() => helperText.value}</slot>\n        </div>\n        <div class=\"helper-text\" id=\"${errorId}\" role=\"alert\" part=\"error\" ?hidden=\"${errorHidden}\">\n          <slot name=\"error\">${() => errorText.value}</slot>\n        </div>\n        <div\n          class=\"char-counter\"\n          part=\"char-counter\"\n          data-near-limit=\"${counterNearLimit}\"\n          data-at-limit=\"${counterAtLimit}\"\n          ?hidden=\"${counterHidden}\">\n          ${counterText}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    colorThemeMixin,\n    coarsePointerMixin,\n    reducedMotionMixin,\n    roundedVariantMixin,\n    disabledLoadingMixin,\n    sizeVariantMixin(FIELD_SIZE_PRESET),\n    forcedColorsFocusMixin('input'),\n    componentStyles,\n    // Must come after `componentStyles`: `@layer` precedence is fixed by which layer name is\n    // *first* referenced across this whole array, and `componentStyles` is what establishes\n    // `refine.base` (the unconditional `--_bg`/`--_border-color` defaults this mixin's\n    // `refine.variants` rules need to win over). Placed earlier, `refine.variants` would end up\n    // registered as the *lower*-priority layer, and every variant would silently render as the\n    // base default: exactly the bug this ordering fixes.\n    fieldVariantMixin({ container: '.field', text: 'input', tokenPrefix: 'input' }),\n  ],\n});\n"],"mappings":"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"}
+{"version":3,"file":"input.cjs","names":[],"sources":["../src/inputs/input/input.ts"],"sourcesContent":["import { bind, define, getHost, html, model, onCleanup, onElement, prop, ref, useField, useSlots } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { bindRefCallback, createTextField, lifecycleSignal } from '../../core';\nimport type { TextFieldProps } from '../../shared';\nimport { disablableBundle, FIELD_SIZE_PRESET, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledLoadingMixin,\n  fieldVariantMixin,\n  forcedColorsFocusMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport type { InputType } from '../../types';\nimport { INPUT_VARIANTS, type InputVariant } from '../../types';\n\nconst INPUT_INPUTMODES = ['none', 'text', 'decimal', 'numeric', 'tel', 'search', 'email', 'url'] as const;\n\nimport { errorAttr } from '../shared/field-binding';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport { renderStatusIcon } from '../shared/templates';\nimport componentStyles from './input.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\n/** Input component properties */\n\nexport type OreInputEvents = {\n  change: Event;\n  input: InputEvent;\n};\n\nexport type OreInputProps = TextFieldProps<InputVariant> & {\n  /** Accessible name used when no visible label is rendered. */\n  'aria-label'?: string;\n  /** Autocomplete hint */\n  autocomplete?: string;\n  /** Show a clear (×) button when the field has a value */\n  clearable?: boolean;\n  /** Virtual keyboard hint for mobile devices */\n  inputmode?: (typeof INPUT_INPUTMODES)[number];\n  /**\n   * Shows an inline spinner inside the field and forces the inner `<input>` into\n   * `disabled` for the duration: use while an async validation/submission request\n   * is in flight (e.g. checking username availability) to prevent double-submits.\n   */\n  loading?: boolean;\n  /** Maximum character length: shows a counter below the input */\n  maxlength?: number;\n  /** Minimum character length */\n  minlength?: number;\n  /** HTML pattern attribute for client-side validation */\n  pattern?: string;\n  /**\n   * JS-only callback fired with the inner `<input>` element when it mounts,\n   * and with `null` when it unmounts. Intended for composed components that\n   * need imperative access to the raw input element.\n   * Set as a JS property: `bitInput.ref = (el) => { ... }`.\n   */\n  ref?: ((el: HTMLInputElement | null) => void) | null;\n  /** HTML input type */\n  type?: InputType;\n};\n\nconst VALID_INPUT_TYPES = [\n  'text',\n  'email',\n  'password',\n  'search',\n  'url',\n  'tel',\n  'number',\n  'date',\n  'time',\n  'datetime-local',\n  'month',\n  'week',\n] as const;\n\n/**\n * A customizable text input component with multiple variants, label placements, and form features.\n *\n * @element ore-input\n *\n * @attr {string} aria-label - Accessible name used when no visible label is rendered\n * @attr {string} label - Label text\n * @attr {string} label-placement - Label placement: 'inset' | 'outside'\n * @attr {string} type - HTML input type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search'\n * @attr {string} value - Current input value\n * @attr {string} placeholder - Placeholder text\n * @attr {string} name - Form field name\n * @attr {string} helper - Helper text displayed below the input (fallback when the `helper` slot is empty)\n * @attr {string} error - Error message: marks the field as invalid (fallback when the `error` slot is empty)\n * @attr {boolean} disabled - Disable input interaction\n * @attr {boolean} readonly - Make the input read-only\n * @attr {boolean} required - Mark the field as required\n * @attr {boolean} loading - Show an inline spinner and force the field disabled\n * @attr {boolean} success - Show an inline success check icon (suppressed while `error` is set)\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text'\n * @attr {string} size - Input size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n *\n * @fires input - Emitted when input value changes (on every keystroke).\n * @fires change - Emitted when input loses focus with changed value.\n *\n * @slot prefix - Content before the input (e.g., icons)\n * @slot suffix - Content after the input (e.g., clear button, validation icon)\n * @slot label - Replaces the label text: slotted content takes precedence over the `label` prop\n * @slot helper - Replaces the helper text: slotted content takes precedence over the `helper` prop\n * @slot error - Replaces the error text: slotted content takes precedence over the `error` prop\n *\n * @part wrapper - The input wrapper element\n * @part label - The label element (inset or outside)\n * @part field - The field container element\n * @part input-row - The input row container element\n * @part input - The input element\n * @part status-icon - The inline error/success icon shown inside the field\n * @part spinner - The inline loading spinner shown inside the field while `loading`\n * @part helper - The helper text element\n *\n * @cssprop --input-bg - Background color\n * @cssprop --input-color - Text color\n * @cssprop --input-border-color - Border color\n * @cssprop --input-placeholder-color - Placeholder text color\n * @cssprop --input-radius - Border radius\n * @cssprop --input-padding - Inner padding (block inline)\n * @cssprop --input-label-block-inset - Inset from the field block start for an inset label\n * @cssprop --input-label-inset - Inset from the field inline start for an inset label\n * @cssprop --input-gap - Gap between prefix/suffix icons and input text\n * @cssprop --input-font-size - Font size\n * @cssprop --input-height - Field height\n * @cssprop --input-hover-bg - Field background on hover (flat/ghost variants)\n * @cssprop --input-hover-border-color - Field border on hover (flat/bordered variants)\n * @cssprop --input-focus-bg - Field background when focused (flat variant)\n * @cssprop --input-focus-border-color - Field border when focused (flat/text variants)\n *\n * @example\n * ```html\n * <ore-input type=\"email\" label=\"Email\" placeholder=\"you@example.com\" />\n * <ore-input label=\"Name\" variant=\"bordered\" color=\"primary\" />\n * <ore-input label=\"Username\" error=\"That username is taken\" />\n * <ore-input label=\"Username\" success />\n * <ore-input label=\"Username\" loading />\n * ```\n */\nexport const INPUT_TAG = 'ore-input' as const;\ndefine<OreInputProps>(INPUT_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...roundableBundle,\n    'aria-label': prop.string(),\n    autocomplete: prop.string(),\n    clearable: prop.bool(false),\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    inputmode: prop.oneOf(INPUT_INPUTMODES),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    loading: prop.bool(false),\n    maxlength: prop.json(undefined as number | undefined),\n    minlength: prop.json(undefined as number | undefined),\n    name: prop.string(),\n    pattern: prop.string(),\n    placeholder: prop.string(),\n    readonly: prop.bool(false),\n    ref: prop.data<((el: HTMLInputElement | null) => void) | null>(),\n    required: prop.bool(false),\n    success: prop.bool(false),\n    type: prop.oneOf(VALID_INPUT_TYPES, 'text'),\n    value: prop.string(),\n    variant: prop.oneOf(INPUT_VARIANTS),\n  },\n  setup(props) {\n    const el = getHost();\n    const slots = useSlots();\n\n    const showPassword = signal(false);\n    const inputRef = ref<HTMLInputElement>();\n\n    const hasLabel = computed(() => !!props.label.value || slots.has('label').value);\n    // `loading` behaves like a temporary `disabled`: forces the inner <input> out of\n    // constraint validation and interaction for the duration, layered on top of any real\n    // `loading` is layered on top of the consumer's explicit `disabled` prop.\n    const isDisabled = computed(() => props.disabled.value || props.loading.value);\n\n    const abortSignal = lifecycleSignal(onCleanup);\n    const tf = createTextField({\n      disabled: isDisabled,\n      error: props.error,\n      hasLabel,\n      helper: props.helper,\n      label: props.label,\n      labelPlacement: props['label-placement'],\n      maxLength: props.maxlength,\n      onChange: (_event: Event, value: string) => {\n        setFieldValue(el, value);\n        dispatchNativeFieldEvent(el, 'change');\n      },\n      onInput: (_event: Event, value: string) => {\n        setFieldValue(el, value);\n        dispatchNativeFieldEvent(el, 'input');\n      },\n      prefix: 'input',\n      readonly: props.readonly,\n      required: props.required,\n      signal: abortSignal,\n      value: props.value,\n    });\n\n    defineFieldValue(\n      el,\n      () => tf.value.value,\n      (value) => {\n        tf.value.value = value;\n      },\n    );\n\n    tf.attachFormField(\n      useField<string>({\n        disabled: tf.disabled,\n        onReset: tf.reset,\n        toFormValue: (v) => v,\n        validity: tf.validity,\n        value: tf.value,\n      }),\n    );\n\n    const {\n      ariaDescribedBy,\n      ariaErrorMessage,\n      ariaInvalid,\n      ariaLabelledBy,\n      assistiveId,\n      clear: clearValue,\n      counter,\n      errorId,\n      errorText,\n      fieldId: inputId,\n      helperText,\n      labelId,\n      labelVisible,\n      value: fieldValue,\n      wire,\n    } = tf;\n\n    onElement(inputRef, (el) => {\n      wire(el, abortSignal);\n\n      const unwireRef = bindRefCallback(props.ref, el);\n\n      return () => {\n        unwireRef();\n      };\n    });\n\n    const clear = (event?: Event): void => {\n      clearValue(event);\n      inputRef.value?.focus();\n    };\n\n    const resolvedInputType = (): string =>\n      props.type.value === 'password' && showPassword.value ? 'text' : (props.type.value ?? 'text');\n\n    bind({\n      attr: {\n        error: errorAttr(errorText),\n        'has-value': () => (fieldValue.value ? true : undefined),\n        size: props.size,\n        // Reflects `success` only once `error` is confirmed empty: keeps the two host\n        // attributes mutually exclusive even if a consumer sets both props at once.\n        success: () => (props.success.value && !errorText.value ? true : undefined),\n        variant: props.variant,\n      },\n    });\n\n    const labelHidden = () => !labelVisible.value;\n    const passwordToggleLabel = () => (showPassword.value ? 'Hide password' : 'Show password');\n    const passwordTogglePressed = () => String(showPassword.value);\n    const passwordToggleIcon = () =>\n      showPassword.value\n        ? html`\n            <ore-icon name=\"eye-off\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n          `\n        : html`\n            <ore-icon name=\"eye\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n          `;\n    const helperHidden = () => !!errorText.value || !helperText.value;\n    const errorHidden = () => !errorText.value;\n    const counterNearLimit = () => (counter?.value.counterNearLimit && !counter?.value.counterAtLimit ? '' : null);\n    const counterAtLimit = () => (counter?.value.counterAtLimit ? '' : null);\n    const counterHidden = () => !counter;\n    const counterText = () => counter?.value.counterText ?? '';\n\n    const clearTabIndex = () => (fieldValue.value ? '0' : '-1');\n    const pwdToggleTabIndex = () => (props.type.value === 'password' ? '0' : '-1');\n\n    const togglePassword = () => {\n      showPassword.value = !showPassword.value;\n      inputRef.value?.focus();\n    };\n\n    return html`\n      <div class=\"input-wrapper\" part=\"wrapper\">\n        <label class=\"label\" for=\"${() => (labelHidden() ? null : inputId)}\" id=\"${labelId}\" part=\"label\" ?hidden=\"${labelHidden}\">\n          <slot name=\"label\">${props.label}</slot>\n        </label>\n        <div class=\"field\" part=\"field\">\n          <div class=\"input-row\" part=\"input-row\">\n            <slot name=\"prefix\"></slot>\n            <input\n              part=\"input\"\n              id=\"${inputId}\"\n              type=\"${resolvedInputType}\"\n              name=\"${props.name}\"\n              placeholder=\"${props.placeholder}\"\n              autocomplete=\"${props.autocomplete}\"\n              inputmode=\"${props.inputmode}\"\n              maxlength=\"${props.maxlength}\"\n              minlength=\"${props.minlength}\"\n              pattern=\"${props.pattern}\"\n              ?disabled=\"${isDisabled}\"\n              ?readonly=\"${props.readonly}\"\n              ?required=\"${props.required}\"\n              value=\"${model(fieldValue)}\"\n              aria-label=\"${props['aria-label']}\"\n              aria-labelledby=\"${ariaLabelledBy}\"\n              aria-describedby=\"${ariaDescribedBy}\"\n              aria-errormessage=\"${ariaErrorMessage}\"\n              aria-invalid=\"${ariaInvalid}\"\n              aria-busy=\"${() => (props.loading.value ? 'true' : null)}\"\n              ref=\"${inputRef}\" />\n            <slot name=\"suffix\"></slot>\n            ${renderStatusIcon(errorText)}\n            <span class=\"field-spinner\" part=\"spinner\" role=\"status\" aria-label=\"Loading\"></span>\n            <button\n              class=\"pwd-toggle-btn\"\n              part=\"pwd-toggle\"\n              type=\"button\"\n              aria-label=\"${passwordToggleLabel}\"\n              aria-pressed=\"${passwordTogglePressed}\"\n              tabindex=\"${pwdToggleTabIndex}\"\n              @click=\"${togglePassword}\">\n              ${passwordToggleIcon}\n            </button>\n            <button\n              aria-label=\"Clear\"\n              class=\"clear-btn\"\n              part=\"clear\"\n              type=\"button\"\n              tabindex=\"${clearTabIndex}\"\n              @click=\"${clear}\">\n              <ore-icon aria-hidden=\"true\" name=\"x\" size=\"12\" stroke-width=\"2.5\"></ore-icon>\n            </button>\n          </div>\n        </div>\n        <div class=\"helper-text\" aria-live=\"polite\" id=\"${assistiveId}\" part=\"helper\" ?hidden=\"${helperHidden}\">\n          <slot name=\"helper\">${() => helperText.value}</slot>\n        </div>\n        <div class=\"helper-text\" id=\"${errorId}\" role=\"alert\" part=\"error\" ?hidden=\"${errorHidden}\">\n          <slot name=\"error\">${() => errorText.value}</slot>\n        </div>\n        <div\n          class=\"char-counter\"\n          part=\"char-counter\"\n          data-near-limit=\"${counterNearLimit}\"\n          data-at-limit=\"${counterAtLimit}\"\n          ?hidden=\"${counterHidden}\">\n          ${counterText}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    colorThemeMixin,\n    coarsePointerMixin,\n    reducedMotionMixin,\n    roundedVariantMixin,\n    disabledLoadingMixin,\n    sizeVariantMixin(FIELD_SIZE_PRESET),\n    forcedColorsFocusMixin('input'),\n    componentStyles,\n    // Must come after `componentStyles`: `@layer` precedence is fixed by which layer name is\n    // *first* referenced across this whole array, and `componentStyles` is what establishes\n    // `refine.base` (the unconditional `--_bg`/`--_border-color` defaults this mixin's\n    // `refine.variants` rules need to win over). Placed earlier, `refine.variants` would end up\n    // registered as the *lower*-priority layer, and every variant would silently render as the\n    // base default: exactly the bug this ordering fixes.\n    fieldVariantMixin({ container: '.field', text: 'input', tokenPrefix: 'input' }),\n  ],\n});\n"],"mappings":"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"}

package/dist/input.js

@@ -1,8 +1,8 @@
-import{defineFieldValue as e,dispatchNativeFieldEvent as t,setFieldValue as n}from"./inputs/shared/native-field-event.js";import{coarsePointerMixin as r,reducedMotionMixin as i}from"./styles/mixins/accessibility.css.js";import{fieldVariantMixin as a}from"./styles/mixins/field-variants.css.js";import{roundedVariantMixin as o,sizeVariantMixin as s}from"./styles/mixins/shape.css.js";import{disabledLoadingMixin as c}from"./styles/mixins/states.css.js";import{colorThemeMixin as l,forcedColorsFocusMixin as u}from"./styles/mixins/theme.css.js";import{lifecycleSignal as d}from"./core/ore.js";import{bindRefCallback as f}from"./core/ref-callback.js";import{createTextField as p}from"./core/text-field.js";import{disablableBundle as m,roundableBundle as h,sizableBundle as g,themableBundle as _}from"./shared/prop-bundles.js";import{FIELD_SIZE_PRESET as v}from"./shared/size-presets.js";import{ICON_TAG as y}from"./icon.js";import{errorAttr as b}from"./inputs/shared/field-binding.js";import{renderStatusIcon as x}from"./inputs/shared/templates.js";import S from"./inputs/input/input.css.js";import{computed as C,signal as w}from"@vielzeug/ripple";import{bind as T,define as E,getHost as D,html as O,live as k,onCleanup as A,onElement as j,prop as M,ref as N,useField as P,useSlots as F}from"@vielzeug/ore";var I=[`text`,`email`,`password`,`search`,`url`,`tel`,`number`,`date`,`time`,`datetime-local`,`month`,`week`],L=`ore-input`;E(L,{formAssociated:!0,props:{..._,...g,...m,...h,"aria-label":M.string(),autocomplete:M.string(),clearable:M.bool(!1),error:M.string(),fullwidth:M.bool(!1),helper:M.string(),inputmode:M.string(),label:M.string(),"label-placement":M.oneOf([`inset`,`outside`],`inset`),loading:M.bool(!1),maxlength:M.json(void 0),minlength:M.json(void 0),name:M.string(),pattern:M.string(),placeholder:M.string(),readonly:M.bool(!1),ref:M.data(),required:M.bool(!1),success:M.bool(!1),type:M.oneOf(I,`text`),value:M.string(),variant:M.string()},setup(r){let i=D(),a=F(),o=w(!1),s=N(),c=C(()=>!!r.label.value||a.has(`label`).value),l=C(()=>r.disabled.value||r.loading.value),u=d(A),m=p({disabled:l,error:r.error,hasLabel:c,helper:r.helper,label:r.label,labelPlacement:r[`label-placement`],maxLength:r.maxlength,onChange:(e,r)=>{n(i,r),t(i,`change`)},onInput:(e,r)=>{n(i,r),t(i,`input`)},prefix:`input`,readonly:r.readonly,required:r.required,signal:u,value:r.value});e(i,()=>m.value.value,e=>{m.value.value=e}),m.attachFormField(P({disabled:m.disabled,onReset:m.reset,toFormValue:e=>e,validationMessage:m.validationMessage,validity:m.validity,value:m.value}));let{ariaDescribedBy:h,ariaErrorMessage:g,ariaInvalid:_,ariaLabelledBy:v,assistiveId:y,clear:S,counter:E,errorId:M,errorText:I,fieldId:L,helperText:R,labelId:z,labelVisible:B,value:V,wire:H}=m;j(s,e=>{H(e,u);let t=f(r.ref,e);return()=>{t()}});let clear=e=>{S(e),s.value?.focus()},resolvedInputType=()=>r.type.value===`password`&&o.value?`text`:r.type.value??`text`;T({attr:{error:b(I),"has-value":()=>V.value?!0:void 0,size:r.size,success:()=>r.success.value&&!I.value?!0:void 0,variant:r.variant}});let labelHidden=()=>!B.value,passwordToggleLabel=()=>o.value?`Hide password`:`Show password`,passwordTogglePressed=()=>String(o.value),passwordToggleIcon=()=>o.value?O`
+import{defineFieldValue as e,dispatchNativeFieldEvent as t,setFieldValue as n}from"./inputs/shared/native-field-event.js";import{coarsePointerMixin as r,reducedMotionMixin as i}from"./styles/mixins/accessibility.css.js";import{fieldVariantMixin as a}from"./styles/mixins/field-variants.css.js";import{roundedVariantMixin as o,sizeVariantMixin as s}from"./styles/mixins/shape.css.js";import{disabledLoadingMixin as c}from"./styles/mixins/states.css.js";import{colorThemeMixin as l,forcedColorsFocusMixin as u}from"./styles/mixins/theme.css.js";import{lifecycleSignal as d}from"./core/ore.js";import{bindRefCallback as f}from"./core/ref-callback.js";import{createTextField as p}from"./core/text-field.js";import{INPUT_VARIANTS as m}from"./shared/types.js";import{disablableBundle as h,roundableBundle as g,sizableBundle as _,themableBundle as v}from"./shared/prop-bundles.js";import{FIELD_SIZE_PRESET as y}from"./shared/size-presets.js";import{ICON_TAG as b}from"./icon.js";import{errorAttr as x}from"./inputs/shared/field-binding.js";import{renderStatusIcon as S}from"./inputs/shared/templates.js";import C from"./inputs/input/input.css.js";import{computed as w,signal as T}from"@vielzeug/ripple";import{bind as E,define as D,getHost as O,html as k,model as A,onCleanup as j,onElement as M,prop as N,ref as P,useField as F,useSlots as I}from"@vielzeug/ore";var L=[`none`,`text`,`decimal`,`numeric`,`tel`,`search`,`email`,`url`],R=[`text`,`email`,`password`,`search`,`url`,`tel`,`number`,`date`,`time`,`datetime-local`,`month`,`week`],z=`ore-input`;D(z,{formAssociated:!0,props:{...v,..._,...h,...g,"aria-label":N.string(),autocomplete:N.string(),clearable:N.bool(!1),error:N.string(),fullwidth:N.bool(!1),helper:N.string(),inputmode:N.oneOf(L),label:N.string(),"label-placement":N.oneOf([`inset`,`outside`],`inset`),loading:N.bool(!1),maxlength:N.json(void 0),minlength:N.json(void 0),name:N.string(),pattern:N.string(),placeholder:N.string(),readonly:N.bool(!1),ref:N.data(),required:N.bool(!1),success:N.bool(!1),type:N.oneOf(R,`text`),value:N.string(),variant:N.oneOf(m)},setup(r){let i=O(),a=I(),o=T(!1),s=P(),c=w(()=>!!r.label.value||a.has(`label`).value),l=w(()=>r.disabled.value||r.loading.value),u=d(j),m=p({disabled:l,error:r.error,hasLabel:c,helper:r.helper,label:r.label,labelPlacement:r[`label-placement`],maxLength:r.maxlength,onChange:(e,r)=>{n(i,r),t(i,`change`)},onInput:(e,r)=>{n(i,r),t(i,`input`)},prefix:`input`,readonly:r.readonly,required:r.required,signal:u,value:r.value});e(i,()=>m.value.value,e=>{m.value.value=e}),m.attachFormField(F({disabled:m.disabled,onReset:m.reset,toFormValue:e=>e,validity:m.validity,value:m.value}));let{ariaDescribedBy:h,ariaErrorMessage:g,ariaInvalid:_,ariaLabelledBy:v,assistiveId:y,clear:b,counter:C,errorId:D,errorText:N,fieldId:L,helperText:R,labelId:z,labelVisible:B,value:V,wire:H}=m;M(s,e=>{H(e,u);let t=f(r.ref,e);return()=>{t()}});let clear=e=>{b(e),s.value?.focus()},resolvedInputType=()=>r.type.value===`password`&&o.value?`text`:r.type.value??`text`;E({attr:{error:x(N),"has-value":()=>V.value?!0:void 0,size:r.size,success:()=>r.success.value&&!N.value?!0:void 0,variant:r.variant}});let labelHidden=()=>!B.value,passwordToggleLabel=()=>o.value?`Hide password`:`Show password`,passwordTogglePressed=()=>String(o.value),passwordToggleIcon=()=>o.value?k`
             <ore-icon name="eye-off" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
-          `:O`
+          `:k`
             <ore-icon name="eye" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
-          `,helperHidden=()=>!!I.value||!R.value,errorHidden=()=>!I.value,counterNearLimit=()=>E?.value.counterNearLimit&&!E?.value.counterAtLimit?``:null,counterAtLimit=()=>E?.value.counterAtLimit?``:null,counterHidden=()=>!E,counterText=()=>E?.value.counterText??``,clearTabIndex=()=>V.value?`0`:`-1`,pwdToggleTabIndex=()=>r.type.value===`password`?`0`:`-1`,togglePassword=()=>{o.value=!o.value,s.value?.focus()};return O`
+          `,helperHidden=()=>!!N.value||!R.value,errorHidden=()=>!N.value,counterNearLimit=()=>C?.value.counterNearLimit&&!C?.value.counterAtLimit?``:null,counterAtLimit=()=>C?.value.counterAtLimit?``:null,counterHidden=()=>!C,counterText=()=>C?.value.counterText??``,clearTabIndex=()=>V.value?`0`:`-1`,pwdToggleTabIndex=()=>r.type.value===`password`?`0`:`-1`,togglePassword=()=>{o.value=!o.value,s.value?.focus()};return k`
       <div class="input-wrapper" part="wrapper">
         <label class="label" for="${()=>labelHidden()?null:L}" id="${z}" part="label" ?hidden="${labelHidden}">
           <slot name="label">${r.label}</slot>
@@ -24,7 +24,7 @@ import{defineFieldValue as e,dispatchNativeFieldEvent as t,setFieldValue as n}fr
               ?disabled="${l}"
               ?readonly="${r.readonly}"
               ?required="${r.required}"
-              value="${k(V)}"
+              value="${A(V)}"
               aria-label="${r[`aria-label`]}"
               aria-labelledby="${v}"
               aria-describedby="${h}"
@@ -33,7 +33,7 @@ import{defineFieldValue as e,dispatchNativeFieldEvent as t,setFieldValue as n}fr
               aria-busy="${()=>r.loading.value?`true`:null}"
               ref="${s}" />
             <slot name="suffix"></slot>
-            ${x(I)}
+            ${S(N)}
             <span class="field-spinner" part="spinner" role="status" aria-label="Loading"></span>
             <button
               class="pwd-toggle-btn"
@@ -59,8 +59,8 @@ import{defineFieldValue as e,dispatchNativeFieldEvent as t,setFieldValue as n}fr
         <div class="helper-text" aria-live="polite" id="${y}" part="helper" ?hidden="${helperHidden}">
           <slot name="helper">${()=>R.value}</slot>
         </div>
-        <div class="helper-text" id="${M}" role="alert" part="error" ?hidden="${errorHidden}">
-          <slot name="error">${()=>I.value}</slot>
+        <div class="helper-text" id="${D}" role="alert" part="error" ?hidden="${errorHidden}">
+          <slot name="error">${()=>N.value}</slot>
         </div>
         <div
           class="char-counter"
@@ -71,5 +71,5 @@ import{defineFieldValue as e,dispatchNativeFieldEvent as t,setFieldValue as n}fr
           ${counterText}
         </div>
       </div>
-    `},shadow:{delegatesFocus:!0},styles:[l,r,i,o,c,s(v),u(`input`),S,a({container:`.field`,text:`input`,tokenPrefix:`input`})]});export{y as ICON_TAG,L as INPUT_TAG};
+    `},shadow:{delegatesFocus:!0},styles:[l,r,i,o,c,s(y),u(`input`),C,a({container:`.field`,text:`input`,tokenPrefix:`input`})]});export{b as ICON_TAG,z as INPUT_TAG};
 //# sourceMappingURL=input.js.map