@vielzeug/refine 1.5.0 → 1.5.2

package/dist/grid.js

@@ -1,7 +1,6 @@
-import { resizeObserver as e } from "./ore/dist/observers/resize-observe.js";
-import "./ore/dist/observers.js";
-import t from "./layout/grid/grid.css.js";
-import { define as n, getHost as r, html as i, onMounted as a, prop as o, watchEffect as s } from "@vielzeug/ore";
+import e from "./layout/grid/grid.css.js";
+import { define as t, getHost as n, html as r, onMounted as i, prop as a, watchEffect as o } from "@vielzeug/ore";
+import { resizeObserver as s } from "@vielzeug/ore/observers";
 //#region src/layout/grid/grid.ts
 var c = [
 	["cols2xl", "--size-screen-2xl"],
@@ -25,64 +24,64 @@ var c = [
 	"--size-screen-sm": 640,
 	"--size-screen-xl": 1280
 }, f = "ore-grid";
-n(f, {
+t(f, {
 	props: {
-		align: o.string(),
-		areas: o.string(),
-		areas2xl: o.string(),
-		areasLg: o.string(),
-		areasMd: o.string(),
-		areasSm: o.string(),
-		areasXl: o.string(),
-		cols: o.string(),
-		cols2xl: o.string(),
-		colsLg: o.string(),
-		colsMd: o.string(),
-		colsSm: o.string(),
-		colsXl: o.string(),
-		flow: o.string(),
-		fullwidth: o.bool(!1),
-		gap: o.string(),
-		justify: o.string(),
-		minColWidth: o.string(),
-		responsive: o.bool(!1),
-		rows: o.string()
+		align: a.string(),
+		areas: a.string(),
+		areas2xl: a.string(),
+		areasLg: a.string(),
+		areasMd: a.string(),
+		areasSm: a.string(),
+		areasXl: a.string(),
+		cols: a.string(),
+		cols2xl: a.string(),
+		colsLg: a.string(),
+		colsMd: a.string(),
+		colsSm: a.string(),
+		colsXl: a.string(),
+		flow: a.string(),
+		fullwidth: a.bool(!1),
+		gap: a.string(),
+		justify: a.string(),
+		minColWidth: a.string(),
+		responsive: a.bool(!1),
+		rows: a.string()
 	},
-	setup(t) {
-		let n = r(), o = s, f = (e, t, n) => e === "auto" || !e && t ? `repeat(auto-fit, minmax(${n || "250px"}, 1fr))` : e ? `repeat(${e}, 1fr)` : null, p = () => {
-			let e = n.offsetWidth, r = !!t.responsive.value, i = t.minColWidth.value ?? "", a;
-			for (let [r, i] of c) if (e >= u(n, i, d[i]) && t[r].value) {
-				a = t[r].value;
+	setup(e) {
+		let t = n(), a = o, f = (e, t, n) => e === "auto" || !e && t ? `repeat(auto-fit, minmax(${n || "250px"}, 1fr))` : e ? `repeat(${e}, 1fr)` : null, p = () => {
+			let n = t.offsetWidth, r = !!e.responsive.value, i = e.minColWidth.value ?? "", a;
+			for (let [r, i] of c) if (n >= u(t, i, d[i]) && e[r].value) {
+				a = e[r].value;
 				break;
 			}
-			a ||= t.cols.value || void 0;
+			a ||= e.cols.value || void 0;
 			let o = f(a, r, i);
-			o ? n.style.setProperty("--_cols", o) : n.style.removeProperty("--_cols");
+			o ? t.style.setProperty("--_cols", o) : t.style.removeProperty("--_cols");
 		};
-		o(() => {
-			t.cols.value, t.colsSm.value, t.colsMd.value, t.colsLg.value, t.colsXl.value, t.cols2xl.value, t.responsive.value, t.minColWidth.value, p();
+		a(() => {
+			e.cols.value, e.colsSm.value, e.colsMd.value, e.colsLg.value, e.colsXl.value, e.cols2xl.value, e.responsive.value, e.minColWidth.value, p();
 		});
 		let m = () => {
-			let e = n.offsetWidth, r = "";
-			for (let [i, a] of l) if (e >= u(n, a, d[a]) && t[i].value) {
-				r = t[i].value;
+			let n = t.offsetWidth, r = "";
+			for (let [i, a] of l) if (n >= u(t, a, d[a]) && e[i].value) {
+				r = e[i].value;
 				break;
 			}
-			r ||= t.areas.value || "", r ? n.style.setProperty("grid-template-areas", r) : n.style.removeProperty("grid-template-areas");
+			r ||= e.areas.value || "", r ? t.style.setProperty("grid-template-areas", r) : t.style.removeProperty("grid-template-areas");
 		};
-		return o(() => {
-			let e = t.rows.value;
-			e && e !== "auto" ? n.style.setProperty("--_rows", `repeat(${e}, 1fr)`) : n.style.removeProperty("--_rows");
-		}), o(() => {
-			t.areas.value, t.areasSm.value, t.areasMd.value, t.areasLg.value, t.areasXl.value, t.areas2xl.value, m();
+		return a(() => {
+			let n = e.rows.value;
+			n && n !== "auto" ? t.style.setProperty("--_rows", `repeat(${n}, 1fr)`) : t.style.removeProperty("--_rows");
 		}), a(() => {
-			let t = e(n);
-			o(() => {
-				t.value, p(), m();
+			e.areas.value, e.areasSm.value, e.areasMd.value, e.areasLg.value, e.areasXl.value, e.areas2xl.value, m();
+		}), i(() => {
+			let e = s(t);
+			a(() => {
+				e.value, p(), m();
 			});
-		}), i`<slot></slot>`;
+		}), r`<slot></slot>`;
 	},
-	styles: [t]
+	styles: [e]
 });
 //#endregion
 export { f as GRID_TAG };

package/dist/grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid.js","names":[],"sources":["../src/layout/grid/grid.ts"],"sourcesContent":["import { define, html, prop, getHost, onMounted, watchEffect } from '@vielzeug/ore';\nimport { resizeObserver } from '@vielzeug/ore/observers';\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 = resizeObserver(el);\n\n      watch(() => {\n        void size.value;\n        updateCols();\n        updateAreas();\n      });\n    });\n\n    return html`<slot></slot>`;\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, html, prop, getHost, onMounted, watchEffect } from '@vielzeug/ore';\nimport { resizeObserver } from '@vielzeug/ore/observers';\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 = resizeObserver(el);\n\n      watch(() => {\n        void size.value;\n        updateCols();\n        updateAreas();\n      });\n    });\n\n    return html`<slot></slot>`;\n  },\n\n  styles: [styles],\n});\n"],"mappings":"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"}

package/dist/icon.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./_virtual/_rolldown/runtime.cjs"),t=require("./ore/dist/directives/raw.cjs");require("./ore/dist/directives.cjs");const n=require("./_dev.cjs"),r=require("./content/icon/icon.css.cjs");let i=require("@vielzeug/ore"),a=require("@vielzeug/ripple"),o=require("lucide");o=e.__toESM(o,1);var s=16,c=2,l=24,u=new Set([`circle`,`clipPath`,`defs`,`ellipse`,`g`,`line`,`linearGradient`,`mask`,`path`,`polygon`,`polyline`,`radialGradient`,`rect`,`stop`,`symbol`,`use`]),d=/^[a-zA-Z][a-zA-Z0-9:_-]*$/,f=/^(on|xlink:|xml:|href$)/i,p=new Map(Object.entries(o.icons));function m(e){for(let[t,n]of Object.entries(e))p.set(t,n)}var h=e=>Object.entries(e).filter(([e])=>d.test(e)&&!f.test(e)).map(([e,t])=>`${e}="${String(t).replace(/&/g,`&amp;`).replace(/"/g,`&quot;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`)}"`).join(` `),g=e=>e.replace(/([a-z0-9])([A-Z])/g,`$1-$2`).split(/[^a-zA-Z0-9]+/).filter(Boolean).map(e=>e.charAt(0).toUpperCase()+e.slice(1).toLowerCase()).join(``),_=e=>{if(e==null||e===``)return s;let t=Number(e);return Number.isFinite(t)&&t>0&&/^\d+(\.\d+)?$/.test(e.trim())?t:e},v=`ore-icon`;(0,i.define)(v,{props:{absoluteStrokeWidth:i.prop.bool(),label:i.prop.string(),name:i.prop.string(),size:{default:s,parse:_,reflect:!1},solid:i.prop.bool(),strokeWidth:i.prop.number(c)},setup(e){return(0,i.bind)({attr:{"aria-hidden":()=>(e.label.value??``).trim()?null:`true`,"aria-label":()=>(e.label.value??``).trim()||null,role:()=>(e.label.value??``).trim()?`img`:null},style:{"--_size-px":()=>{let t=e.size.value;return typeof t==`number`?`${t}px`:String(t)}}}),i.html`${t.raw((0,a.computed)(()=>{let t=(e.name.value??``).trim();if(!t)return``;let r=p.get(t)??p.get(g(t));if(!r)return n.warn(`ore-icon: icon not found: "${String(t).slice(0,64)}"`),``;let i=e.size.value,a=typeof i==`number`?i:l,o=e.absoluteStrokeWidth.value&&!e.solid.value?e.strokeWidth.value*(l/a):e.strokeWidth.value,s=r.filter(([e])=>u.has(e)).map(([e,t])=>{let n={};for(let[e,r]of Object.entries(t))r!==void 0&&(n[e]=r);return`<${e} ${h(n)} />`}).join(``);return`<svg ${h({fill:e.solid.value?`currentColor`:`none`,part:`svg`,stroke:e.solid.value?`none`:`currentColor`,"stroke-linecap":`round`,"stroke-linejoin":`round`,"stroke-width":e.solid.value?0:o,style:`width:100%;height:100%`,viewBox:`0 0 24 24`,xmlns:`http://www.w3.org/2000/svg`})}>${s}</svg>`}))}`},styles:[r.default]}),exports.ICON_TAG=v,exports.registerIcons=m;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./_virtual/_rolldown/runtime.cjs"),t=require("./_dev.cjs"),n=require("./content/icon/icon.css.cjs");let r=require("@vielzeug/ore"),i=require("@vielzeug/ore/directives"),a=require("@vielzeug/ripple"),o=require("lucide");o=e.__toESM(o,1);var s=16,c=2,l=24,u=new Set([`circle`,`clipPath`,`defs`,`ellipse`,`g`,`line`,`linearGradient`,`mask`,`path`,`polygon`,`polyline`,`radialGradient`,`rect`,`stop`,`symbol`,`use`]),d=/^[a-zA-Z][a-zA-Z0-9:_-]*$/,f=/^(on|xlink:|xml:|href$)/i,p=new Map(Object.entries(o.icons));function m(e){for(let[t,n]of Object.entries(e))p.set(t,n)}var h=e=>Object.entries(e).filter(([e])=>d.test(e)&&!f.test(e)).map(([e,t])=>`${e}="${String(t).replace(/&/g,`&amp;`).replace(/"/g,`&quot;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`)}"`).join(` `),g=e=>e.replace(/([a-z0-9])([A-Z])/g,`$1-$2`).split(/[^a-zA-Z0-9]+/).filter(Boolean).map(e=>e.charAt(0).toUpperCase()+e.slice(1).toLowerCase()).join(``),_=e=>{if(e==null||e===``)return s;let t=Number(e);return Number.isFinite(t)&&t>0&&/^\d+(\.\d+)?$/.test(e.trim())?t:e},v=`ore-icon`;(0,r.define)(v,{props:{absoluteStrokeWidth:r.prop.bool(),label:r.prop.string(),name:r.prop.string(),size:{default:s,parse:_,reflect:!1},solid:r.prop.bool(),strokeWidth:r.prop.number(c)},setup(e){return(0,r.bind)({attr:{"aria-hidden":()=>(e.label.value??``).trim()?null:`true`,"aria-label":()=>(e.label.value??``).trim()||null,role:()=>(e.label.value??``).trim()?`img`:null},style:{"--_size-px":()=>{let t=e.size.value;return typeof t==`number`?`${t}px`:String(t)}}}),r.html`${(0,i.raw)((0,a.computed)(()=>{let n=(e.name.value??``).trim();if(!n)return``;let r=p.get(n)??p.get(g(n));if(!r)return t.warn(`ore-icon: icon not found: "${String(n).slice(0,64)}"`),``;let i=e.size.value,a=typeof i==`number`?i:l,o=e.absoluteStrokeWidth.value&&!e.solid.value?e.strokeWidth.value*(l/a):e.strokeWidth.value,s=r.filter(([e])=>u.has(e)).map(([e,t])=>{let n={};for(let[e,r]of Object.entries(t))r!==void 0&&(n[e]=r);return`<${e} ${h(n)} />`}).join(``);return`<svg ${h({fill:e.solid.value?`currentColor`:`none`,part:`svg`,stroke:e.solid.value?`none`:`currentColor`,"stroke-linecap":`round`,"stroke-linejoin":`round`,"stroke-width":e.solid.value?0:o,style:`width:100%;height:100%`,viewBox:`0 0 24 24`,xmlns:`http://www.w3.org/2000/svg`})}>${s}</svg>`}))}`},styles:[n.default]}),exports.ICON_TAG=v,exports.registerIcons=m;
 //# sourceMappingURL=icon.cjs.map

package/dist/icon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"icon.cjs","names":[],"sources":["../src/content/icon/icon.ts"],"sourcesContent":["import { define, html, prop, bind } from '@vielzeug/ore';\nimport { raw } from '@vielzeug/ore/directives';\nimport { computed } from '@vielzeug/ripple';\nimport * as lucideModule from 'lucide';\n\nimport { warn } from '../../_dev';\nimport styles from './icon.css?inline';\n\nexport type IconNode = Array<[string, Record<string, string | number | undefined>]>;\n\nconst DEFAULT_SIZE = 16;\nconst DEFAULT_STROKE_WIDTH = 2;\nconst LUCIDE_VIEWBOX_SIZE = 24;\n\n/**\n * Allowlisted SVG shape/structure element names. Only these tags are permitted\n * when building the SVG markup from an IconNode, preventing arbitrary element\n * injection (e.g. <script>, event-handler-bearing elements).\n */\nconst ALLOWED_SVG_TAGS = new Set([\n  'circle',\n  'clipPath',\n  'defs',\n  'ellipse',\n  'g',\n  'line',\n  'linearGradient',\n  'mask',\n  'path',\n  'polygon',\n  'polyline',\n  'radialGradient',\n  'rect',\n  'stop',\n  'symbol',\n  'use',\n]);\n\n/**\n * Allowlisted SVG presentation / structural attribute names.\n * Event handler attributes (on*) and \"xlink:href\" are excluded.\n */\nconst ATTR_KEY_RE = /^[a-zA-Z][a-zA-Z0-9:_-]*$/;\nconst BLOCKED_ATTR_RE = /^(on|xlink:|xml:|href$)/i;\n\n// Sync registry seeded from lucide at module load; extend at any time via registerIcons()\nconst registry = new Map<string, IconNode>(\n  Object.entries((lucideModule as unknown as { icons: Record<string, IconNode> }).icons),\n);\n\n/**\n * Register additional icons (or override existing ones) by name.\n * Keys may be kebab-case or PascalCase — both are accepted by `ore-icon`.\n */\nexport function registerIcons(icons: Record<string, IconNode>): void {\n  for (const [name, node] of Object.entries(icons)) {\n    registry.set(name, node);\n  }\n}\n\nconst toAttrString = (attrs: Record<string, string | number>): string =>\n  Object.entries(attrs)\n    .filter(([k]) => ATTR_KEY_RE.test(k) && !BLOCKED_ATTR_RE.test(k))\n    .map(\n      ([k, v]) =>\n        `${k}=\"${String(v).replace(/&/g, '&amp;').replace(/\"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;')}\"`,\n    )\n    .join(' ');\n\nconst toPascalCase = (value: string): string =>\n  value\n    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')\n    .split(/[^a-zA-Z0-9]+/)\n    .filter(Boolean)\n    .map((p) => p.charAt(0).toUpperCase() + p.slice(1).toLowerCase())\n    .join('');\n\nconst parseSize = (value: string | null): number | string => {\n  if (value == null || value === '') return DEFAULT_SIZE;\n\n  const n = Number(value);\n\n  return Number.isFinite(n) && n > 0 && /^\\d+(\\.\\d+)?$/.test(value.trim()) ? n : value;\n};\n\n/** Icon component properties */\nexport type OreIconProps = {\n  /** Keep stroke width visually consistent when icon size changes */\n  absoluteStrokeWidth?: boolean;\n  /** Accessible text label. Decorative icons should omit this. */\n  label?: string;\n  /** Lucide icon name, e.g. `search` or `chevron-right` */\n  name?: string;\n  /** Icon width/height in px by default. Accepts CSS lengths. */\n  size?: number | string;\n  /** Render as a filled/solid shape instead of a stroked outline */\n  solid?: boolean;\n  /** SVG stroke width */\n  strokeWidth?: number;\n};\n\n/**\n * Icon wrapper for consistent Lucide rendering across Block.\n *\n * @element ore-icon\n *\n * @attr {string} name - Lucide icon name, e.g. `search` or `chevron-right`\n * @attr {number|string} size - Width/height (default: 16)\n * @attr {number} stroke-width - SVG stroke width (default: 2)\n * @attr {boolean} absolute-stroke-width - Keep stroke width visually stable across icon sizes\n * @attr {boolean} solid - Render as filled shape instead of stroked outline\n * @attr {string} label - Accessible label; when omitted the icon is decorative\n *\n * @csspart svg - Internal SVG element\n *\n * @example\n * ```html\n * <ore-icon name=\"search\"></ore-icon>\n * <ore-icon name=\"chevron-right\" size=\"18\"></ore-icon>\n * <ore-icon name=\"trash-2\" label=\"Delete\"></ore-icon>\n * <ore-icon name=\"star\" solid></ore-icon>\n * ```\n */\nexport const ICON_TAG = 'ore-icon' as const;\ndefine<OreIconProps>(ICON_TAG, {\n  props: {\n    absoluteStrokeWidth: prop.bool(),\n    label: prop.string(),\n    name: prop.string(),\n    size: { default: DEFAULT_SIZE as number | string, parse: parseSize, reflect: false },\n    solid: prop.bool(),\n    strokeWidth: prop.number(DEFAULT_STROKE_WIDTH),\n  },\n  setup(props) {\n    bind({\n      attr: {\n        'aria-hidden': () => ((props.label.value ?? '').trim() ? null : 'true'),\n        'aria-label': () => (props.label.value ?? '').trim() || null,\n        role: () => ((props.label.value ?? '').trim() ? 'img' : null),\n      },\n      style: {\n        '--_size-px': () => {\n          const s = props.size.value;\n\n          return typeof s === 'number' ? `${s}px` : String(s);\n        },\n      },\n    });\n\n    const markup = computed(() => {\n      const name = (props.name.value ?? '').trim();\n\n      if (!name) return '';\n\n      const iconNode = registry.get(name) ?? registry.get(toPascalCase(name));\n\n      if (!iconNode) {\n        warn(`ore-icon: icon not found: \"${String(name).slice(0, 64)}\"`);\n\n        return '';\n      }\n\n      const size = props.size.value;\n      const numericSize = typeof size === 'number' ? size : LUCIDE_VIEWBOX_SIZE;\n\n      const strokeWidth =\n        props.absoluteStrokeWidth.value && !props.solid.value\n          ? props.strokeWidth.value! * (LUCIDE_VIEWBOX_SIZE / numericSize)\n          : props.strokeWidth.value!;\n\n      const nodes = iconNode\n        .filter(([tag]) => ALLOWED_SVG_TAGS.has(tag))\n        .map(([tag, tagAttrs]) => {\n          const attrs: Record<string, string | number> = {};\n\n          for (const [k, v] of Object.entries(tagAttrs)) {\n            if (v !== undefined) attrs[k] = v;\n          }\n\n          return `<${tag} ${toAttrString(attrs)} />`;\n        })\n        .join('');\n\n      const svgAttrs = toAttrString({\n        fill: props.solid.value ? 'currentColor' : 'none',\n        part: 'svg',\n        stroke: props.solid.value ? 'none' : 'currentColor',\n        'stroke-linecap': 'round',\n        'stroke-linejoin': 'round',\n        'stroke-width': props.solid.value ? 0 : strokeWidth,\n        style: `width:100%;height:100%`,\n        viewBox: '0 0 24 24',\n        xmlns: 'http://www.w3.org/2000/svg',\n      });\n\n      return `<svg ${svgAttrs}>${nodes}</svg>`;\n    });\n\n    return html`${raw(markup)}`;\n  },\n  styles: [styles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"icon.cjs","names":[],"sources":["../src/content/icon/icon.ts"],"sourcesContent":["import { define, html, prop, bind } from '@vielzeug/ore';\nimport { raw } from '@vielzeug/ore/directives';\nimport { computed } from '@vielzeug/ripple';\nimport * as lucideModule from 'lucide';\n\nimport { warn } from '../../_dev';\nimport styles from './icon.css?inline';\n\nexport type IconNode = Array<[string, Record<string, string | number | undefined>]>;\n\nconst DEFAULT_SIZE = 16;\nconst DEFAULT_STROKE_WIDTH = 2;\nconst LUCIDE_VIEWBOX_SIZE = 24;\n\n/**\n * Allowlisted SVG shape/structure element names. Only these tags are permitted\n * when building the SVG markup from an IconNode, preventing arbitrary element\n * injection (e.g. <script>, event-handler-bearing elements).\n */\nconst ALLOWED_SVG_TAGS = new Set([\n  'circle',\n  'clipPath',\n  'defs',\n  'ellipse',\n  'g',\n  'line',\n  'linearGradient',\n  'mask',\n  'path',\n  'polygon',\n  'polyline',\n  'radialGradient',\n  'rect',\n  'stop',\n  'symbol',\n  'use',\n]);\n\n/**\n * Allowlisted SVG presentation / structural attribute names.\n * Event handler attributes (on*) and \"xlink:href\" are excluded.\n */\nconst ATTR_KEY_RE = /^[a-zA-Z][a-zA-Z0-9:_-]*$/;\nconst BLOCKED_ATTR_RE = /^(on|xlink:|xml:|href$)/i;\n\n// Sync registry seeded from lucide at module load; extend at any time via registerIcons()\nconst registry = new Map<string, IconNode>(\n  Object.entries((lucideModule as unknown as { icons: Record<string, IconNode> }).icons),\n);\n\n/**\n * Register additional icons (or override existing ones) by name.\n * Keys may be kebab-case or PascalCase — both are accepted by `ore-icon`.\n */\nexport function registerIcons(icons: Record<string, IconNode>): void {\n  for (const [name, node] of Object.entries(icons)) {\n    registry.set(name, node);\n  }\n}\n\nconst toAttrString = (attrs: Record<string, string | number>): string =>\n  Object.entries(attrs)\n    .filter(([k]) => ATTR_KEY_RE.test(k) && !BLOCKED_ATTR_RE.test(k))\n    .map(\n      ([k, v]) =>\n        `${k}=\"${String(v).replace(/&/g, '&amp;').replace(/\"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;')}\"`,\n    )\n    .join(' ');\n\nconst toPascalCase = (value: string): string =>\n  value\n    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')\n    .split(/[^a-zA-Z0-9]+/)\n    .filter(Boolean)\n    .map((p) => p.charAt(0).toUpperCase() + p.slice(1).toLowerCase())\n    .join('');\n\nconst parseSize = (value: string | null): number | string => {\n  if (value == null || value === '') return DEFAULT_SIZE;\n\n  const n = Number(value);\n\n  return Number.isFinite(n) && n > 0 && /^\\d+(\\.\\d+)?$/.test(value.trim()) ? n : value;\n};\n\n/** Icon component properties */\nexport type OreIconProps = {\n  /** Keep stroke width visually consistent when icon size changes */\n  absoluteStrokeWidth?: boolean;\n  /** Accessible text label. Decorative icons should omit this. */\n  label?: string;\n  /** Lucide icon name, e.g. `search` or `chevron-right` */\n  name?: string;\n  /** Icon width/height in px by default. Accepts CSS lengths. */\n  size?: number | string;\n  /** Render as a filled/solid shape instead of a stroked outline */\n  solid?: boolean;\n  /** SVG stroke width */\n  strokeWidth?: number;\n};\n\n/**\n * Icon wrapper for consistent Lucide rendering across Block.\n *\n * @element ore-icon\n *\n * @attr {string} name - Lucide icon name, e.g. `search` or `chevron-right`\n * @attr {number|string} size - Width/height (default: 16)\n * @attr {number} stroke-width - SVG stroke width (default: 2)\n * @attr {boolean} absolute-stroke-width - Keep stroke width visually stable across icon sizes\n * @attr {boolean} solid - Render as filled shape instead of stroked outline\n * @attr {string} label - Accessible label; when omitted the icon is decorative\n *\n * @csspart svg - Internal SVG element\n *\n * @example\n * ```html\n * <ore-icon name=\"search\"></ore-icon>\n * <ore-icon name=\"chevron-right\" size=\"18\"></ore-icon>\n * <ore-icon name=\"trash-2\" label=\"Delete\"></ore-icon>\n * <ore-icon name=\"star\" solid></ore-icon>\n * ```\n */\nexport const ICON_TAG = 'ore-icon' as const;\ndefine<OreIconProps>(ICON_TAG, {\n  props: {\n    absoluteStrokeWidth: prop.bool(),\n    label: prop.string(),\n    name: prop.string(),\n    size: { default: DEFAULT_SIZE as number | string, parse: parseSize, reflect: false },\n    solid: prop.bool(),\n    strokeWidth: prop.number(DEFAULT_STROKE_WIDTH),\n  },\n  setup(props) {\n    bind({\n      attr: {\n        'aria-hidden': () => ((props.label.value ?? '').trim() ? null : 'true'),\n        'aria-label': () => (props.label.value ?? '').trim() || null,\n        role: () => ((props.label.value ?? '').trim() ? 'img' : null),\n      },\n      style: {\n        '--_size-px': () => {\n          const s = props.size.value;\n\n          return typeof s === 'number' ? `${s}px` : String(s);\n        },\n      },\n    });\n\n    const markup = computed(() => {\n      const name = (props.name.value ?? '').trim();\n\n      if (!name) return '';\n\n      const iconNode = registry.get(name) ?? registry.get(toPascalCase(name));\n\n      if (!iconNode) {\n        warn(`ore-icon: icon not found: \"${String(name).slice(0, 64)}\"`);\n\n        return '';\n      }\n\n      const size = props.size.value;\n      const numericSize = typeof size === 'number' ? size : LUCIDE_VIEWBOX_SIZE;\n\n      const strokeWidth =\n        props.absoluteStrokeWidth.value && !props.solid.value\n          ? props.strokeWidth.value! * (LUCIDE_VIEWBOX_SIZE / numericSize)\n          : props.strokeWidth.value!;\n\n      const nodes = iconNode\n        .filter(([tag]) => ALLOWED_SVG_TAGS.has(tag))\n        .map(([tag, tagAttrs]) => {\n          const attrs: Record<string, string | number> = {};\n\n          for (const [k, v] of Object.entries(tagAttrs)) {\n            if (v !== undefined) attrs[k] = v;\n          }\n\n          return `<${tag} ${toAttrString(attrs)} />`;\n        })\n        .join('');\n\n      const svgAttrs = toAttrString({\n        fill: props.solid.value ? 'currentColor' : 'none',\n        part: 'svg',\n        stroke: props.solid.value ? 'none' : 'currentColor',\n        'stroke-linecap': 'round',\n        'stroke-linejoin': 'round',\n        'stroke-width': props.solid.value ? 0 : strokeWidth,\n        style: `width:100%;height:100%`,\n        viewBox: '0 0 24 24',\n        xmlns: 'http://www.w3.org/2000/svg',\n      });\n\n      return `<svg ${svgAttrs}>${nodes}</svg>`;\n    });\n\n    return html`${raw(markup)}`;\n  },\n  styles: [styles],\n});\n"],"mappings":"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"}

package/dist/icon.js

@@ -1,8 +1,7 @@
-import { raw as e } from "./ore/dist/directives/raw.js";
-import "./ore/dist/directives.js";
-import { warn as t } from "./_dev.js";
-import n from "./content/icon/icon.css.js";
-import { bind as r, define as i, html as a, prop as o } from "@vielzeug/ore";
+import { warn as e } from "./_dev.js";
+import t from "./content/icon/icon.css.js";
+import { bind as n, define as r, html as i, prop as a } from "@vielzeug/ore";
+import { raw as o } from "@vielzeug/ore/directives";
 import { computed as s } from "@vielzeug/ripple";
 import * as c from "lucide";
 //#region src/content/icon/icon.ts
@@ -32,54 +31,54 @@ var _ = (e) => Object.entries(e).filter(([e]) => p.test(e) && !m.test(e)).map(([
 	let t = Number(e);
 	return Number.isFinite(t) && t > 0 && /^\d+(\.\d+)?$/.test(e.trim()) ? t : e;
 }, b = "ore-icon";
-i(b, {
+r(b, {
 	props: {
-		absoluteStrokeWidth: o.bool(),
-		label: o.string(),
-		name: o.string(),
+		absoluteStrokeWidth: a.bool(),
+		label: a.string(),
+		name: a.string(),
 		size: {
 			default: l,
 			parse: y,
 			reflect: !1
 		},
-		solid: o.bool(),
-		strokeWidth: o.number(u)
+		solid: a.bool(),
+		strokeWidth: a.number(u)
 	},
-	setup(n) {
-		return r({
+	setup(t) {
+		return n({
 			attr: {
-				"aria-hidden": () => (n.label.value ?? "").trim() ? null : "true",
-				"aria-label": () => (n.label.value ?? "").trim() || null,
-				role: () => (n.label.value ?? "").trim() ? "img" : null
+				"aria-hidden": () => (t.label.value ?? "").trim() ? null : "true",
+				"aria-label": () => (t.label.value ?? "").trim() || null,
+				role: () => (t.label.value ?? "").trim() ? "img" : null
 			},
 			style: { "--_size-px": () => {
-				let e = n.size.value;
+				let e = t.size.value;
 				return typeof e == "number" ? `${e}px` : String(e);
 			} }
-		}), a`${e(s(() => {
-			let e = (n.name.value ?? "").trim();
-			if (!e) return "";
-			let r = h.get(e) ?? h.get(v(e));
-			if (!r) return t(`ore-icon: icon not found: "${String(e).slice(0, 64)}"`), "";
-			let i = n.size.value, a = typeof i == "number" ? i : d, o = n.absoluteStrokeWidth.value && !n.solid.value ? n.strokeWidth.value * (d / a) : n.strokeWidth.value, s = r.filter(([e]) => f.has(e)).map(([e, t]) => {
+		}), i`${o(s(() => {
+			let n = (t.name.value ?? "").trim();
+			if (!n) return "";
+			let r = h.get(n) ?? h.get(v(n));
+			if (!r) return e(`ore-icon: icon not found: "${String(n).slice(0, 64)}"`), "";
+			let i = t.size.value, a = typeof i == "number" ? i : d, o = t.absoluteStrokeWidth.value && !t.solid.value ? t.strokeWidth.value * (d / a) : t.strokeWidth.value, s = r.filter(([e]) => f.has(e)).map(([e, t]) => {
 				let n = {};
 				for (let [e, r] of Object.entries(t)) r !== void 0 && (n[e] = r);
 				return `<${e} ${_(n)} />`;
 			}).join("");
 			return `<svg ${_({
-				fill: n.solid.value ? "currentColor" : "none",
+				fill: t.solid.value ? "currentColor" : "none",
 				part: "svg",
-				stroke: n.solid.value ? "none" : "currentColor",
+				stroke: t.solid.value ? "none" : "currentColor",
 				"stroke-linecap": "round",
 				"stroke-linejoin": "round",
-				"stroke-width": n.solid.value ? 0 : o,
+				"stroke-width": t.solid.value ? 0 : o,
 				style: "width:100%;height:100%",
 				viewBox: "0 0 24 24",
 				xmlns: "http://www.w3.org/2000/svg"
 			})}>${s}</svg>`;
 		}))}`;
 	},
-	styles: [n]
+	styles: [t]
 });
 //#endregion
 export { b as ICON_TAG, g as registerIcons };

package/dist/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","names":[],"sources":["../src/content/icon/icon.ts"],"sourcesContent":["import { define, html, prop, bind } from '@vielzeug/ore';\nimport { raw } from '@vielzeug/ore/directives';\nimport { computed } from '@vielzeug/ripple';\nimport * as lucideModule from 'lucide';\n\nimport { warn } from '../../_dev';\nimport styles from './icon.css?inline';\n\nexport type IconNode = Array<[string, Record<string, string | number | undefined>]>;\n\nconst DEFAULT_SIZE = 16;\nconst DEFAULT_STROKE_WIDTH = 2;\nconst LUCIDE_VIEWBOX_SIZE = 24;\n\n/**\n * Allowlisted SVG shape/structure element names. Only these tags are permitted\n * when building the SVG markup from an IconNode, preventing arbitrary element\n * injection (e.g. <script>, event-handler-bearing elements).\n */\nconst ALLOWED_SVG_TAGS = new Set([\n  'circle',\n  'clipPath',\n  'defs',\n  'ellipse',\n  'g',\n  'line',\n  'linearGradient',\n  'mask',\n  'path',\n  'polygon',\n  'polyline',\n  'radialGradient',\n  'rect',\n  'stop',\n  'symbol',\n  'use',\n]);\n\n/**\n * Allowlisted SVG presentation / structural attribute names.\n * Event handler attributes (on*) and \"xlink:href\" are excluded.\n */\nconst ATTR_KEY_RE = /^[a-zA-Z][a-zA-Z0-9:_-]*$/;\nconst BLOCKED_ATTR_RE = /^(on|xlink:|xml:|href$)/i;\n\n// Sync registry seeded from lucide at module load; extend at any time via registerIcons()\nconst registry = new Map<string, IconNode>(\n  Object.entries((lucideModule as unknown as { icons: Record<string, IconNode> }).icons),\n);\n\n/**\n * Register additional icons (or override existing ones) by name.\n * Keys may be kebab-case or PascalCase — both are accepted by `ore-icon`.\n */\nexport function registerIcons(icons: Record<string, IconNode>): void {\n  for (const [name, node] of Object.entries(icons)) {\n    registry.set(name, node);\n  }\n}\n\nconst toAttrString = (attrs: Record<string, string | number>): string =>\n  Object.entries(attrs)\n    .filter(([k]) => ATTR_KEY_RE.test(k) && !BLOCKED_ATTR_RE.test(k))\n    .map(\n      ([k, v]) =>\n        `${k}=\"${String(v).replace(/&/g, '&amp;').replace(/\"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;')}\"`,\n    )\n    .join(' ');\n\nconst toPascalCase = (value: string): string =>\n  value\n    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')\n    .split(/[^a-zA-Z0-9]+/)\n    .filter(Boolean)\n    .map((p) => p.charAt(0).toUpperCase() + p.slice(1).toLowerCase())\n    .join('');\n\nconst parseSize = (value: string | null): number | string => {\n  if (value == null || value === '') return DEFAULT_SIZE;\n\n  const n = Number(value);\n\n  return Number.isFinite(n) && n > 0 && /^\\d+(\\.\\d+)?$/.test(value.trim()) ? n : value;\n};\n\n/** Icon component properties */\nexport type OreIconProps = {\n  /** Keep stroke width visually consistent when icon size changes */\n  absoluteStrokeWidth?: boolean;\n  /** Accessible text label. Decorative icons should omit this. */\n  label?: string;\n  /** Lucide icon name, e.g. `search` or `chevron-right` */\n  name?: string;\n  /** Icon width/height in px by default. Accepts CSS lengths. */\n  size?: number | string;\n  /** Render as a filled/solid shape instead of a stroked outline */\n  solid?: boolean;\n  /** SVG stroke width */\n  strokeWidth?: number;\n};\n\n/**\n * Icon wrapper for consistent Lucide rendering across Block.\n *\n * @element ore-icon\n *\n * @attr {string} name - Lucide icon name, e.g. `search` or `chevron-right`\n * @attr {number|string} size - Width/height (default: 16)\n * @attr {number} stroke-width - SVG stroke width (default: 2)\n * @attr {boolean} absolute-stroke-width - Keep stroke width visually stable across icon sizes\n * @attr {boolean} solid - Render as filled shape instead of stroked outline\n * @attr {string} label - Accessible label; when omitted the icon is decorative\n *\n * @csspart svg - Internal SVG element\n *\n * @example\n * ```html\n * <ore-icon name=\"search\"></ore-icon>\n * <ore-icon name=\"chevron-right\" size=\"18\"></ore-icon>\n * <ore-icon name=\"trash-2\" label=\"Delete\"></ore-icon>\n * <ore-icon name=\"star\" solid></ore-icon>\n * ```\n */\nexport const ICON_TAG = 'ore-icon' as const;\ndefine<OreIconProps>(ICON_TAG, {\n  props: {\n    absoluteStrokeWidth: prop.bool(),\n    label: prop.string(),\n    name: prop.string(),\n    size: { default: DEFAULT_SIZE as number | string, parse: parseSize, reflect: false },\n    solid: prop.bool(),\n    strokeWidth: prop.number(DEFAULT_STROKE_WIDTH),\n  },\n  setup(props) {\n    bind({\n      attr: {\n        'aria-hidden': () => ((props.label.value ?? '').trim() ? null : 'true'),\n        'aria-label': () => (props.label.value ?? '').trim() || null,\n        role: () => ((props.label.value ?? '').trim() ? 'img' : null),\n      },\n      style: {\n        '--_size-px': () => {\n          const s = props.size.value;\n\n          return typeof s === 'number' ? `${s}px` : String(s);\n        },\n      },\n    });\n\n    const markup = computed(() => {\n      const name = (props.name.value ?? '').trim();\n\n      if (!name) return '';\n\n      const iconNode = registry.get(name) ?? registry.get(toPascalCase(name));\n\n      if (!iconNode) {\n        warn(`ore-icon: icon not found: \"${String(name).slice(0, 64)}\"`);\n\n        return '';\n      }\n\n      const size = props.size.value;\n      const numericSize = typeof size === 'number' ? size : LUCIDE_VIEWBOX_SIZE;\n\n      const strokeWidth =\n        props.absoluteStrokeWidth.value && !props.solid.value\n          ? props.strokeWidth.value! * (LUCIDE_VIEWBOX_SIZE / numericSize)\n          : props.strokeWidth.value!;\n\n      const nodes = iconNode\n        .filter(([tag]) => ALLOWED_SVG_TAGS.has(tag))\n        .map(([tag, tagAttrs]) => {\n          const attrs: Record<string, string | number> = {};\n\n          for (const [k, v] of Object.entries(tagAttrs)) {\n            if (v !== undefined) attrs[k] = v;\n          }\n\n          return `<${tag} ${toAttrString(attrs)} />`;\n        })\n        .join('');\n\n      const svgAttrs = toAttrString({\n        fill: props.solid.value ? 'currentColor' : 'none',\n        part: 'svg',\n        stroke: props.solid.value ? 'none' : 'currentColor',\n        'stroke-linecap': 'round',\n        'stroke-linejoin': 'round',\n        'stroke-width': props.solid.value ? 0 : strokeWidth,\n        style: `width:100%;height:100%`,\n        viewBox: '0 0 24 24',\n        xmlns: 'http://www.w3.org/2000/svg',\n      });\n\n      return `<svg ${svgAttrs}>${nodes}</svg>`;\n    });\n\n    return html`${raw(markup)}`;\n  },\n  styles: [styles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"icon.js","names":[],"sources":["../src/content/icon/icon.ts"],"sourcesContent":["import { define, html, prop, bind } from '@vielzeug/ore';\nimport { raw } from '@vielzeug/ore/directives';\nimport { computed } from '@vielzeug/ripple';\nimport * as lucideModule from 'lucide';\n\nimport { warn } from '../../_dev';\nimport styles from './icon.css?inline';\n\nexport type IconNode = Array<[string, Record<string, string | number | undefined>]>;\n\nconst DEFAULT_SIZE = 16;\nconst DEFAULT_STROKE_WIDTH = 2;\nconst LUCIDE_VIEWBOX_SIZE = 24;\n\n/**\n * Allowlisted SVG shape/structure element names. Only these tags are permitted\n * when building the SVG markup from an IconNode, preventing arbitrary element\n * injection (e.g. <script>, event-handler-bearing elements).\n */\nconst ALLOWED_SVG_TAGS = new Set([\n  'circle',\n  'clipPath',\n  'defs',\n  'ellipse',\n  'g',\n  'line',\n  'linearGradient',\n  'mask',\n  'path',\n  'polygon',\n  'polyline',\n  'radialGradient',\n  'rect',\n  'stop',\n  'symbol',\n  'use',\n]);\n\n/**\n * Allowlisted SVG presentation / structural attribute names.\n * Event handler attributes (on*) and \"xlink:href\" are excluded.\n */\nconst ATTR_KEY_RE = /^[a-zA-Z][a-zA-Z0-9:_-]*$/;\nconst BLOCKED_ATTR_RE = /^(on|xlink:|xml:|href$)/i;\n\n// Sync registry seeded from lucide at module load; extend at any time via registerIcons()\nconst registry = new Map<string, IconNode>(\n  Object.entries((lucideModule as unknown as { icons: Record<string, IconNode> }).icons),\n);\n\n/**\n * Register additional icons (or override existing ones) by name.\n * Keys may be kebab-case or PascalCase — both are accepted by `ore-icon`.\n */\nexport function registerIcons(icons: Record<string, IconNode>): void {\n  for (const [name, node] of Object.entries(icons)) {\n    registry.set(name, node);\n  }\n}\n\nconst toAttrString = (attrs: Record<string, string | number>): string =>\n  Object.entries(attrs)\n    .filter(([k]) => ATTR_KEY_RE.test(k) && !BLOCKED_ATTR_RE.test(k))\n    .map(\n      ([k, v]) =>\n        `${k}=\"${String(v).replace(/&/g, '&amp;').replace(/\"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;')}\"`,\n    )\n    .join(' ');\n\nconst toPascalCase = (value: string): string =>\n  value\n    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')\n    .split(/[^a-zA-Z0-9]+/)\n    .filter(Boolean)\n    .map((p) => p.charAt(0).toUpperCase() + p.slice(1).toLowerCase())\n    .join('');\n\nconst parseSize = (value: string | null): number | string => {\n  if (value == null || value === '') return DEFAULT_SIZE;\n\n  const n = Number(value);\n\n  return Number.isFinite(n) && n > 0 && /^\\d+(\\.\\d+)?$/.test(value.trim()) ? n : value;\n};\n\n/** Icon component properties */\nexport type OreIconProps = {\n  /** Keep stroke width visually consistent when icon size changes */\n  absoluteStrokeWidth?: boolean;\n  /** Accessible text label. Decorative icons should omit this. */\n  label?: string;\n  /** Lucide icon name, e.g. `search` or `chevron-right` */\n  name?: string;\n  /** Icon width/height in px by default. Accepts CSS lengths. */\n  size?: number | string;\n  /** Render as a filled/solid shape instead of a stroked outline */\n  solid?: boolean;\n  /** SVG stroke width */\n  strokeWidth?: number;\n};\n\n/**\n * Icon wrapper for consistent Lucide rendering across Block.\n *\n * @element ore-icon\n *\n * @attr {string} name - Lucide icon name, e.g. `search` or `chevron-right`\n * @attr {number|string} size - Width/height (default: 16)\n * @attr {number} stroke-width - SVG stroke width (default: 2)\n * @attr {boolean} absolute-stroke-width - Keep stroke width visually stable across icon sizes\n * @attr {boolean} solid - Render as filled shape instead of stroked outline\n * @attr {string} label - Accessible label; when omitted the icon is decorative\n *\n * @csspart svg - Internal SVG element\n *\n * @example\n * ```html\n * <ore-icon name=\"search\"></ore-icon>\n * <ore-icon name=\"chevron-right\" size=\"18\"></ore-icon>\n * <ore-icon name=\"trash-2\" label=\"Delete\"></ore-icon>\n * <ore-icon name=\"star\" solid></ore-icon>\n * ```\n */\nexport const ICON_TAG = 'ore-icon' as const;\ndefine<OreIconProps>(ICON_TAG, {\n  props: {\n    absoluteStrokeWidth: prop.bool(),\n    label: prop.string(),\n    name: prop.string(),\n    size: { default: DEFAULT_SIZE as number | string, parse: parseSize, reflect: false },\n    solid: prop.bool(),\n    strokeWidth: prop.number(DEFAULT_STROKE_WIDTH),\n  },\n  setup(props) {\n    bind({\n      attr: {\n        'aria-hidden': () => ((props.label.value ?? '').trim() ? null : 'true'),\n        'aria-label': () => (props.label.value ?? '').trim() || null,\n        role: () => ((props.label.value ?? '').trim() ? 'img' : null),\n      },\n      style: {\n        '--_size-px': () => {\n          const s = props.size.value;\n\n          return typeof s === 'number' ? `${s}px` : String(s);\n        },\n      },\n    });\n\n    const markup = computed(() => {\n      const name = (props.name.value ?? '').trim();\n\n      if (!name) return '';\n\n      const iconNode = registry.get(name) ?? registry.get(toPascalCase(name));\n\n      if (!iconNode) {\n        warn(`ore-icon: icon not found: \"${String(name).slice(0, 64)}\"`);\n\n        return '';\n      }\n\n      const size = props.size.value;\n      const numericSize = typeof size === 'number' ? size : LUCIDE_VIEWBOX_SIZE;\n\n      const strokeWidth =\n        props.absoluteStrokeWidth.value && !props.solid.value\n          ? props.strokeWidth.value! * (LUCIDE_VIEWBOX_SIZE / numericSize)\n          : props.strokeWidth.value!;\n\n      const nodes = iconNode\n        .filter(([tag]) => ALLOWED_SVG_TAGS.has(tag))\n        .map(([tag, tagAttrs]) => {\n          const attrs: Record<string, string | number> = {};\n\n          for (const [k, v] of Object.entries(tagAttrs)) {\n            if (v !== undefined) attrs[k] = v;\n          }\n\n          return `<${tag} ${toAttrString(attrs)} />`;\n        })\n        .join('');\n\n      const svgAttrs = toAttrString({\n        fill: props.solid.value ? 'currentColor' : 'none',\n        part: 'svg',\n        stroke: props.solid.value ? 'none' : 'currentColor',\n        'stroke-linecap': 'round',\n        'stroke-linejoin': 'round',\n        'stroke-width': props.solid.value ? 0 : strokeWidth,\n        style: `width:100%;height:100%`,\n        viewBox: '0 0 24 24',\n        xmlns: 'http://www.w3.org/2000/svg',\n      });\n\n      return `<svg ${svgAttrs}>${nodes}</svg>`;\n    });\n\n    return html`${raw(markup)}`;\n  },\n  styles: [styles],\n});\n"],"mappings":"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"}

package/dist/input.cjs

@@ -1,7 +1,7 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ore/dist/directives/live.cjs");require("./ore/dist/directives.cjs");const t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./styles/index.cjs"),i=require("./shared/prop-bundles.cjs"),a=require("./shared/size-presets.cjs"),o=require("./headless/ore.cjs"),s=require("./headless/text-field.cjs"),c=require("./ore/dist/forms/field.cjs");require("./ore/dist/forms.cjs");const l=require("./inputs/shared/field-binding.cjs"),u=require("./inputs/shared/form-context.cjs"),d=require("./inputs/input/input.css.cjs");let f=require("@vielzeug/ore"),p=require("@vielzeug/ripple");var m=[`text`,`email`,`password`,`search`,`url`,`tel`,`number`,`date`,`time`,`datetime-local`,`month`,`week`],h=`ore-input`;(0,f.define)(h,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,...i.roundableBundle,autocomplete:f.prop.string(),clearable:f.prop.bool(!1),error:f.prop.string(),fullwidth:f.prop.bool(!1),helper:f.prop.string(),inputmode:f.prop.string(),label:f.prop.string(),"label-placement":f.prop.oneOf([`inset`,`outside`],`inset`),maxlength:f.prop.json(void 0),minlength:f.prop.json(void 0),name:f.prop.string(),pattern:f.prop.string(),placeholder:f.prop.string(),readonly:f.prop.bool(!1),ref:f.prop.json(void 0),required:f.prop.bool(!1),type:f.prop.oneOf(m,`text`),value:f.prop.string(),variant:f.prop.string()},setup(t){let n=(0,f.useEmit)(),r=(0,f.useSlots)(),i=(0,f.inject)(u.FORM_CTX),a=u.useFormContext(t,i),d=(0,p.signal)(!1),m=(0,f.ref)(),h=(0,p.computed)(()=>!!t.label.value||r.has(`label`).value),g=o.lifecycleSignal(f.onCleanup),_=s.createTextField({disabled:a.disabled,error:t.error,hasLabel:h,helper:t.helper,label:t.label,labelPlacement:t[`label-placement`],maxLength:t.maxlength,onChange:(e,t)=>{n(`change`,{originalEvent:e,value:t})},onInput:(e,t)=>{n(`input`,{originalEvent:e,value:t})},prefix:`input`,readonly:t.readonly,required:t.required,signal:g,validateOn:i?.validateOn,value:t.value});_.attachFormField(c.useField({disabled:_.disabled,onReset:_.reset,toFormValue:e=>e,validationMessage:_.validationMessage,validity:_.validity,value:_.value}));let{ariaDescribedBy:v,ariaErrorMessage:y,ariaInvalid:b,ariaLabelledBy:x,assistiveId:S,clear:C,counter:w,errorId:T,errorText:E,fieldId:D,helperText:O,labelId:k,labelVisible:A,value:j,wire:M}=_;return(0,f.onElement)(m,e=>{M(e,g),t.ref.value?.(e);let n=(0,p.watch)(t.ref,t=>{t?.(e)});return()=>{n.dispose(),t.ref.value?.(null)}}),(0,f.bind)({attr:{error:l.errorAttr(E),"has-value":()=>j.value?!0:void 0,size:a.size,variant:a.variant}}),f.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/shape.css.cjs"),t=require("./styles/mixins/theme.css.cjs"),n=require("./styles/index.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./shared/size-presets.cjs"),a=require("./headless/ore.cjs"),o=require("./headless/text-field.cjs"),s=require("./inputs/shared/field-binding.cjs"),c=require("./inputs/shared/form-context.cjs"),l=require("./inputs/input/input.css.cjs");let u=require("@vielzeug/ore"),d=require("@vielzeug/ore/directives"),f=require("@vielzeug/ripple"),p=require("@vielzeug/ore/forms");var m=[`text`,`email`,`password`,`search`,`url`,`tel`,`number`,`date`,`time`,`datetime-local`,`month`,`week`],h=`ore-input`;(0,u.define)(h,{formAssociated:!0,props:{...r.themableBundle,...r.sizableBundle,...r.disablableBundle,...r.roundableBundle,autocomplete:u.prop.string(),clearable:u.prop.bool(!1),error:u.prop.string(),fullwidth:u.prop.bool(!1),helper:u.prop.string(),inputmode:u.prop.string(),label:u.prop.string(),"label-placement":u.prop.oneOf([`inset`,`outside`],`inset`),maxlength:u.prop.json(void 0),minlength:u.prop.json(void 0),name:u.prop.string(),pattern:u.prop.string(),placeholder:u.prop.string(),readonly:u.prop.bool(!1),ref:u.prop.json(void 0),required:u.prop.bool(!1),type:u.prop.oneOf(m,`text`),value:u.prop.string(),variant:u.prop.string()},setup(e){let t=(0,u.useEmit)(),n=(0,u.useSlots)(),r=(0,u.inject)(c.FORM_CTX),i=c.useFormContext(e,r),l=(0,f.signal)(!1),m=(0,u.ref)(),h=(0,f.computed)(()=>!!e.label.value||n.has(`label`).value),g=a.lifecycleSignal(u.onCleanup),_=o.createTextField({disabled:i.disabled,error:e.error,hasLabel:h,helper:e.helper,label:e.label,labelPlacement:e[`label-placement`],maxLength:e.maxlength,onChange:(e,n)=>{t(`change`,{originalEvent:e,value:n})},onInput:(e,n)=>{t(`input`,{originalEvent:e,value:n})},prefix:`input`,readonly:e.readonly,required:e.required,signal:g,validateOn:r?.validateOn,value:e.value});_.attachFormField((0,p.useField)({disabled:_.disabled,onReset:_.reset,toFormValue:e=>e,validationMessage:_.validationMessage,validity:_.validity,value:_.value}));let{ariaDescribedBy:v,ariaErrorMessage:y,ariaInvalid:b,ariaLabelledBy:x,assistiveId:S,clear:C,counter:w,errorId:T,errorText:E,fieldId:D,helperText:O,labelId:k,labelVisible:A,value:j,wire:M}=_;return(0,u.onElement)(m,t=>{M(t,g),e.ref.value?.(t);let n=(0,f.watch)(e.ref,e=>{e?.(t)});return()=>{n.dispose(),e.ref.value?.(null)}}),(0,u.bind)({attr:{error:s.errorAttr(E),"has-value":()=>j.value?!0:void 0,size:i.size,variant:i.variant}}),u.html`
       <div class="input-wrapper" part="wrapper">
         <label class="label" for="${D}" id="${k}" part="label" ?hidden="${()=>!A.value}"
-          ><slot name="label">${t.label}</slot></label
+          ><slot name="label">${e.label}</slot></label
         >
         <div class="field" part="field">
           <div class="input-row" part="input-row">
@@ -9,18 +9,18 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
             <input
               part="input"
               id="${D}"
-              :type="${()=>t.type.value===`password`&&d.value?`text`:t.type.value??`text`}"
-              :name="${t.name}"
-              :placeholder="${t.placeholder}"
-              :autocomplete="${t.autocomplete}"
-              :inputmode="${t.inputmode}"
-              :maxlength="${t.maxlength}"
-              :minlength="${t.minlength}"
-              :pattern="${t.pattern}"
-              ?disabled="${t.disabled}"
-              ?readonly="${t.readonly}"
-              ?required="${t.required}"
-              :value="${e.live(j)}"
+              :type="${()=>e.type.value===`password`&&l.value?`text`:e.type.value??`text`}"
+              :name="${e.name}"
+              :placeholder="${e.placeholder}"
+              :autocomplete="${e.autocomplete}"
+              :inputmode="${e.inputmode}"
+              :maxlength="${e.maxlength}"
+              :minlength="${e.minlength}"
+              :pattern="${e.pattern}"
+              ?disabled="${e.disabled}"
+              ?readonly="${e.readonly}"
+              ?required="${e.required}"
+              :value="${(0,d.live)(j)}"
               :aria-labelledby="${x}"
               :aria-describedby="${v}"
               :aria-errormessage="${y}"
@@ -31,11 +31,11 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               class="pwd-toggle-btn"
               part="pwd-toggle"
               type="button"
-              :aria-label="${()=>d.value?`Hide password`:`Show password`}"
-              :aria-pressed="${()=>String(d.value)}"
-              :tabindex="${()=>t.type.value===`password`?`0`:`-1`}"
-              @click="${()=>{d.value=!d.value,m.value?.focus()}}">
-              ${()=>d.value?f.html`<ore-icon name="eye-off" size="14" stroke-width="2" aria-hidden="true"></ore-icon>`:f.html`<ore-icon name="eye" size="14" stroke-width="2" aria-hidden="true"></ore-icon>`}
+              :aria-label="${()=>l.value?`Hide password`:`Show password`}"
+              :aria-pressed="${()=>String(l.value)}"
+              :tabindex="${()=>e.type.value===`password`?`0`:`-1`}"
+              @click="${()=>{l.value=!l.value,m.value?.focus()}}">
+              ${()=>l.value?u.html`<ore-icon name="eye-off" size="14" stroke-width="2" aria-hidden="true"></ore-icon>`:u.html`<ore-icon name="eye" size="14" stroke-width="2" aria-hidden="true"></ore-icon>`}
             </button>
             <button
               aria-label="Clear"
@@ -63,5 +63,5 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           ${()=>w?.value.counterText??``}
         </div>
       </div>
-    `},shadow:{delegatesFocus:!0},styles:[...r.fieldMixins,t.sizeVariantMixin(a.FIELD_SIZE_PRESET),n.forcedColorsFocusMixin(`input`),d.default]}),exports.INPUT_TAG=h;
+    `},shadow:{delegatesFocus:!0},styles:[...n.fieldMixins,e.sizeVariantMixin(i.FIELD_SIZE_PRESET),t.forcedColorsFocusMixin(`input`),l.default]}),exports.INPUT_TAG=h;
 //# 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 { define, html, inject, prop, ref, bind, onCleanup, onElement, useEmit, useSlots } from '@vielzeug/ore';\nimport { live } from '@vielzeug/ore/directives';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { TextFieldProps } from '../../shared';\nimport type { InputType, VisualVariant } from '../../types';\n\nimport { lifecycleSignal, createTextField } from '../../headless';\nimport { disablableBundle, FIELD_SIZE_PRESET, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport '../../content/icon/icon';\nimport { fieldMixins, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport { errorAttr } from '../shared/field-binding';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './input.css?inline';\n\n/** Input component properties */\n\nexport type OreInputEvents = {\n  change: { originalEvent: Event; value: string };\n  input: { originalEvent: Event; value: string };\n};\n\nexport type OreInputProps = TextFieldProps<Exclude<VisualVariant, 'frost'>> & {\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  /** 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} 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 {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). detail: { value: string; originalEvent: Event }\n * @fires change - Emitted when input loses focus with changed value. detail: { value: string; originalEvent: Event }\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 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-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 * ```\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    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    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.json(undefined as ((el: HTMLInputElement | null) => void) | null | undefined),\n    required: 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 emit = useEmit<OreInputEvents>();\n    const slots = useSlots();\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n    const showPassword = signal(false);\n    const inputRef = ref<HTMLInputElement>();\n\n    const hasLabel = computed(() => !!props.label.value || slots.has('label').value);\n\n    const abortSignal = lifecycleSignal(onCleanup);\n    const tf = createTextField({\n      disabled: fCtxProps.disabled,\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        emit('change', { originalEvent: event, value });\n      },\n      onInput: (event: Event, value: string) => {\n        emit('input', { originalEvent: event, value });\n      },\n      prefix: 'input',\n      readonly: props.readonly,\n      required: props.required,\n      signal: abortSignal,\n      validateOn: formCtx?.validateOn,\n      value: props.value,\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      // Immediate fire for when the prop is already set on mount.\n      props.ref.value?.(el);\n\n      // Reactive watcher so that if props.ref is set *after* the inner\n      // <input> mounts (e.g. parent sets it via a ref callback after render),\n      // the new callback still receives the live element.\n      const sub = watch(props.ref, (cb) => {\n        cb?.(el);\n      });\n\n      return () => {\n        sub.dispose();\n        props.ref.value?.(null);\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: fCtxProps.size,\n        variant: fCtxProps.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`<ore-icon name=\"eye-off\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>`\n        : html`<ore-icon name=\"eye\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>`;\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=\"${inputId}\" id=\"${labelId}\" part=\"label\" ?hidden=\"${labelHidden}\"\n          ><slot name=\"label\">${props.label}</slot></label\n        >\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=\"${props.disabled}\"\n              ?readonly=\"${props.readonly}\"\n              ?required=\"${props.required}\"\n              :value=\"${live(fieldValue)}\"\n              :aria-labelledby=\"${ariaLabelledBy}\"\n              :aria-describedby=\"${ariaDescribedBy}\"\n              :aria-errormessage=\"${ariaErrorMessage}\"\n              :aria-invalid=\"${ariaInvalid}\"\n              ref=\"${inputRef}\" />\n            <slot name=\"suffix\"></slot>\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: [...fieldMixins, sizeVariantMixin(FIELD_SIZE_PRESET), forcedColorsFocusMixin('input'), componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"input.cjs","names":[],"sources":["../src/inputs/input/input.ts"],"sourcesContent":["import { define, html, inject, prop, ref, bind, onCleanup, onElement, useEmit, useSlots } from '@vielzeug/ore';\nimport { live } from '@vielzeug/ore/directives';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { TextFieldProps } from '../../shared';\nimport type { InputType, VisualVariant } from '../../types';\n\nimport { lifecycleSignal, createTextField } from '../../headless';\nimport { disablableBundle, FIELD_SIZE_PRESET, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport '../../content/icon/icon';\nimport { fieldMixins, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport { errorAttr } from '../shared/field-binding';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './input.css?inline';\n\n/** Input component properties */\n\nexport type OreInputEvents = {\n  change: { originalEvent: Event; value: string };\n  input: { originalEvent: Event; value: string };\n};\n\nexport type OreInputProps = TextFieldProps<Exclude<VisualVariant, 'frost'>> & {\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  /** 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} 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 {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). detail: { value: string; originalEvent: Event }\n * @fires change - Emitted when input loses focus with changed value. detail: { value: string; originalEvent: Event }\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 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-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 * ```\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    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    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.json(undefined as ((el: HTMLInputElement | null) => void) | null | undefined),\n    required: 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 emit = useEmit<OreInputEvents>();\n    const slots = useSlots();\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n    const showPassword = signal(false);\n    const inputRef = ref<HTMLInputElement>();\n\n    const hasLabel = computed(() => !!props.label.value || slots.has('label').value);\n\n    const abortSignal = lifecycleSignal(onCleanup);\n    const tf = createTextField({\n      disabled: fCtxProps.disabled,\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        emit('change', { originalEvent: event, value });\n      },\n      onInput: (event: Event, value: string) => {\n        emit('input', { originalEvent: event, value });\n      },\n      prefix: 'input',\n      readonly: props.readonly,\n      required: props.required,\n      signal: abortSignal,\n      validateOn: formCtx?.validateOn,\n      value: props.value,\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      // Immediate fire for when the prop is already set on mount.\n      props.ref.value?.(el);\n\n      // Reactive watcher so that if props.ref is set *after* the inner\n      // <input> mounts (e.g. parent sets it via a ref callback after render),\n      // the new callback still receives the live element.\n      const sub = watch(props.ref, (cb) => {\n        cb?.(el);\n      });\n\n      return () => {\n        sub.dispose();\n        props.ref.value?.(null);\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: fCtxProps.size,\n        variant: fCtxProps.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`<ore-icon name=\"eye-off\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>`\n        : html`<ore-icon name=\"eye\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>`;\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=\"${inputId}\" id=\"${labelId}\" part=\"label\" ?hidden=\"${labelHidden}\"\n          ><slot name=\"label\">${props.label}</slot></label\n        >\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=\"${props.disabled}\"\n              ?readonly=\"${props.readonly}\"\n              ?required=\"${props.required}\"\n              :value=\"${live(fieldValue)}\"\n              :aria-labelledby=\"${ariaLabelledBy}\"\n              :aria-describedby=\"${ariaDescribedBy}\"\n              :aria-errormessage=\"${ariaErrorMessage}\"\n              :aria-invalid=\"${ariaInvalid}\"\n              ref=\"${inputRef}\" />\n            <slot name=\"suffix\"></slot>\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: [...fieldMixins, sizeVariantMixin(FIELD_SIZE_PRESET), forcedColorsFocusMixin('input'), componentStyles],\n});\n"],"mappings":"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"}