@vielzeug/refine 1.7.0 → 2.0.0

package/dist/icon.js

@@ -1,11 +1,10 @@
-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, ref as o, watchEffect as s } from "@vielzeug/ore";
-import { when as c } from "@vielzeug/ore/directives";
-import { computed as l } from "@vielzeug/ripple";
-import * as u from "lucide";
+import "./_dev.js";
+import e from "./content/icon/icon.css.js";
+import { bind as t, define as n, html as r, prop as i, ref as a, watchEffect as o, when as s } from "@vielzeug/ore";
+import { computed as c } from "@vielzeug/ripple";
+import * as l from "lucide";
 //#region src/content/icon/icon.ts
-var d = 16, f = 2, p = 24, m = "http://www.w3.org/2000/svg", h = /* @__PURE__ */ new Set([
+var u = 16, d = 2, f = 24, p = "http://www.w3.org/2000/svg", m = /* @__PURE__ */ new Set([
 	"circle",
 	"clipPath",
 	"defs",
@@ -22,63 +21,67 @@ var d = 16, f = 2, p = 24, m = "http://www.w3.org/2000/svg", h = /* @__PURE__ */
 	"stop",
 	"symbol",
 	"use"
-]), g = /^[a-zA-Z][a-zA-Z0-9:_-]*$/, _ = /^(on|xlink:|xml:|href$)/i, v = new Map(Object.entries(u.icons));
-function y(e) {
-	for (let [t, n] of Object.entries(e)) v.set(t, n);
+]), h = /^[a-zA-Z][a-zA-Z0-9:_-]*$/, g = /^(on|xlink:|xml:|href$)/i, _ = new Map(Object.entries(l.icons));
+function v(e) {
+	for (let [t, n] of Object.entries(e)) _.set(t, n);
 }
-var b = (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(""), x = (e) => {
-	if (e == null || e === "") return d;
+var y = (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(""), b = (e) => {
+	if (e == null || e === "") return u;
 	let t = Number(e);
 	return Number.isFinite(t) && t > 0 && /^\d+(\.\d+)?$/.test(e.trim()) ? t : e;
-}, S = (e) => v.get(e) ?? v.get(b(e)), C = (e, t) => {
-	if (!h.has(e)) return null;
-	let n = document.createElementNS(m, e);
-	for (let [e, r] of Object.entries(t)) r !== void 0 && (!g.test(e) || _.test(e) || n.setAttribute(e, String(r)));
+}, x = (e) => _.get(e) ?? _.get(y(e)), S = (e, t) => {
+	if (!m.has(e)) return null;
+	let n = document.createElementNS(p, e);
+	for (let [e, r] of Object.entries(t)) r !== void 0 && (!h.test(e) || g.test(e) || n.setAttribute(e, String(r)));
 	return n;
-}, w = "ore-icon";
-r(w, {
+}, C = "ore-icon";
+n(C, {
 	props: {
-		absoluteStrokeWidth: a.bool(),
-		label: a.string(),
-		name: a.string(),
+		absoluteStrokeWidth: i.bool(),
+		label: i.string(),
+		name: i.string(),
 		size: {
-			default: d,
-			parse: x,
+			default: u,
+			parse: b,
 			reflect: !1
 		},
-		solid: a.bool(),
-		strokeWidth: a.number(f)
+		solid: i.bool(),
+		strokeWidth: i.number(d)
 	},
-	setup(t) {
-		n({
+	setup(e) {
+		t({
 			attr: {
-				"aria-hidden": () => (t.label.value ?? "").trim() ? null : "true",
-				"aria-label": () => (t.label.value ?? "").trim() || null,
-				role: () => (t.label.value ?? "").trim() ? "img" : null
+				"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 e = t.size.value;
-				return typeof e == "number" ? `${e}px` : String(e);
+				let t = e.size.value;
+				return typeof t == "number" ? `${t}px` : String(t);
 			} }
 		});
-		let r = o(), a = l(() => {
-			let n = (t.name.value ?? "").trim();
-			if (!n) return;
-			let r = S(n);
-			return r || e(`ore-icon: icon not found: "${n.slice(0, 64)}"`), r;
+		let n = a(), i = c(() => {
+			let t = (e.name.value ?? "").trim();
+			if (!t) return;
+			let n = x(t);
+			return n || `${t.slice(0, 64)}`, n;
 		});
-		return s(() => {
-			let e = r.value, n = a.value;
-			if (!e || !n) return;
-			let i = t.size.value, o = typeof i == "number" ? i : p, s = t.absoluteStrokeWidth.value && !t.solid.value ? t.strokeWidth.value * (p / o) : t.strokeWidth.value;
-			e.setAttribute("fill", t.solid.value ? "currentColor" : "none"), e.setAttribute("stroke", t.solid.value ? "none" : "currentColor"), e.setAttribute("stroke-linecap", "round"), e.setAttribute("stroke-linejoin", "round"), e.setAttribute("stroke-width", String(t.solid.value ? 0 : s)), e.setAttribute("viewBox", "0 0 24 24");
-			let c = n.map(([e, t]) => C(e, t)).filter((e) => !!e);
-			e.replaceChildren(...c);
-		}), i`${c(() => !!a.value, () => i`<svg ref="${r}" part="svg" style="width:100%;height:100%"></svg>`)}`;
+		return o(() => {
+			let t = n.value, r = i.value;
+			if (!t || !r) return;
+			let a = e.size.value, o = typeof a == "number" ? a : f, s = e.absoluteStrokeWidth.value && !e.solid.value ? e.strokeWidth.value * (f / o) : e.strokeWidth.value;
+			t.setAttribute("fill", e.solid.value ? "currentColor" : "none"), t.setAttribute("stroke", e.solid.value ? "none" : "currentColor"), t.setAttribute("stroke-linecap", "round"), t.setAttribute("stroke-linejoin", "round"), t.setAttribute("stroke-width", String(e.solid.value ? 0 : s)), t.setAttribute("viewBox", "0 0 24 24");
+			let c = r.map(([e, t]) => S(e, t)).filter((e) => !!e);
+			t.replaceChildren(...c);
+		}), r`
+      ${s(() => !!i.value, () => r`
+          <svg ref="${n}" part="svg" style="width:100%;height:100%"></svg>
+        `)}
+    `;
 	},
-	styles: [t]
+	styles: [e]
 });
 //#endregion
-export { w as ICON_TAG, y as registerIcons };
+export { C as ICON_TAG, v as registerIcons };
 
 //# sourceMappingURL=icon.js.map

package/dist/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","names":[],"sources":["../src/content/icon/icon.ts"],"sourcesContent":["import { define, html, prop, ref, bind, watchEffect } from '@vielzeug/ore';\nimport { when } 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;\nconst SVG_NS = 'http://www.w3.org/2000/svg';\n\n/**\n * Allowlisted SVG shape/structure element names. Only these tags are permitted\n * when building the SVG DOM 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 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\nconst resolveIcon = (name: string): IconNode | undefined => registry.get(name) ?? registry.get(toPascalCase(name));\n\n/**\n * Builds an allowlisted SVG child element via `createElementNS` — real DOM construction, not\n * HTML-string parsing, so this never touches ore's `raw()` directive (and its \"unsanitized\n * HTML\" dev warning) at all. `iconNode` entries come from the bundled Lucide icon set or\n * `registerIcons()` (a developer/build-time API, never runtime user input), but the tag/attr\n * allowlist stays as defense in depth regardless of where the data originated.\n */\nconst createSvgChild = (tag: string, attrs: Record<string, string | number | undefined>): SVGElement | null => {\n  if (!ALLOWED_SVG_TAGS.has(tag)) return null;\n\n  const el = document.createElementNS(SVG_NS, tag);\n\n  for (const [key, value] of Object.entries(attrs)) {\n    if (value === undefined) continue;\n\n    if (!ATTR_KEY_RE.test(key) || BLOCKED_ATTR_RE.test(key)) continue;\n\n    el.setAttribute(key, String(value));\n  }\n\n  return el;\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 svgRef = ref<SVGSVGElement>();\n\n    // Memoized so an unknown icon name only warns once per change, not once per reactive read.\n    const iconNode = computed(() => {\n      const name = (props.name.value ?? '').trim();\n\n      if (!name) return undefined;\n\n      const node = resolveIcon(name);\n\n      if (!node) warn(`ore-icon: icon not found: \"${name.slice(0, 64)}\"`);\n\n      return node;\n    });\n\n    // Real DOM construction (createElementNS), not the raw() directive — see createSvgChild's\n    // doc comment. Rebuilds the <svg>'s attributes and children whenever the icon name, size,\n    // or presentation props change, or when `svgRef` first attaches (a fresh element mounts\n    // every time `when()`'s branch below flips truthy).\n    watchEffect(() => {\n      const svg = svgRef.value;\n      const node = iconNode.value;\n\n      if (!svg || !node) return;\n\n      const size = props.size.value;\n      const numericSize = typeof size === 'number' ? size : LUCIDE_VIEWBOX_SIZE;\n      const strokeWidth =\n        props.absoluteStrokeWidth.value && !props.solid.value\n          ? props.strokeWidth.value! * (LUCIDE_VIEWBOX_SIZE / numericSize)\n          : props.strokeWidth.value!;\n\n      svg.setAttribute('fill', props.solid.value ? 'currentColor' : 'none');\n      svg.setAttribute('stroke', props.solid.value ? 'none' : 'currentColor');\n      svg.setAttribute('stroke-linecap', 'round');\n      svg.setAttribute('stroke-linejoin', 'round');\n      svg.setAttribute('stroke-width', String(props.solid.value ? 0 : strokeWidth));\n      svg.setAttribute('viewBox', '0 0 24 24');\n\n      const children = node.map(([tag, attrs]) => createSvgChild(tag, attrs)).filter((el): el is SVGElement => !!el);\n\n      svg.replaceChildren(...children);\n    });\n\n    return html`${when(\n      () => !!iconNode.value,\n      () => html`<svg ref=\"${svgRef}\" part=\"svg\" style=\"width:100%;height:100%\"></svg>`,\n    )}`;\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, ref, bind, watchEffect, when } from '@vielzeug/ore';\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;\nconst SVG_NS = 'http://www.w3.org/2000/svg';\n\n/**\n * Allowlisted SVG shape/structure element names. Only these tags are permitted\n * when building the SVG DOM 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 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\nconst resolveIcon = (name: string): IconNode | undefined => registry.get(name) ?? registry.get(toPascalCase(name));\n\n/**\n * Builds an allowlisted SVG child element via `createElementNS` — real DOM construction, not\n * HTML-string parsing, so this never touches Ore's `unsafeHtml()` directive (and its \"unsanitized\n * HTML\" dev warning) at all. `iconNode` entries come from the bundled Lucide icon set or\n * `registerIcons()` (a developer/build-time API, never runtime user input), but the tag/attr\n * allowlist stays as defense in depth regardless of where the data originated.\n */\nconst createSvgChild = (tag: string, attrs: Record<string, string | number | undefined>): SVGElement | null => {\n  if (!ALLOWED_SVG_TAGS.has(tag)) return null;\n\n  const el = document.createElementNS(SVG_NS, tag);\n\n  for (const [key, value] of Object.entries(attrs)) {\n    if (value === undefined) continue;\n\n    if (!ATTR_KEY_RE.test(key) || BLOCKED_ATTR_RE.test(key)) continue;\n\n    el.setAttribute(key, String(value));\n  }\n\n  return el;\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 svgRef = ref<SVGSVGElement>();\n\n    // Memoized so an unknown icon name only warns once per change, not once per reactive read.\n    const iconNode = computed(() => {\n      const name = (props.name.value ?? '').trim();\n\n      if (!name) return undefined;\n\n      const node = resolveIcon(name);\n\n      if (!node) warn(`ore-icon: icon not found: \"${name.slice(0, 64)}\"`);\n\n      return node;\n    });\n\n    // Real DOM construction (createElementNS), not the unsafeHtml() directive — see createSvgChild's\n    // doc comment. Rebuilds the <svg>'s attributes and children whenever the icon name, size,\n    // or presentation props change, or when `svgRef` first attaches (a fresh element mounts\n    // every time `when()`'s branch below flips truthy).\n    watchEffect(() => {\n      const svg = svgRef.value;\n      const node = iconNode.value;\n\n      if (!svg || !node) return;\n\n      const size = props.size.value;\n      const numericSize = typeof size === 'number' ? size : LUCIDE_VIEWBOX_SIZE;\n      const strokeWidth =\n        props.absoluteStrokeWidth.value && !props.solid.value\n          ? props.strokeWidth.value! * (LUCIDE_VIEWBOX_SIZE / numericSize)\n          : props.strokeWidth.value!;\n\n      svg.setAttribute('fill', props.solid.value ? 'currentColor' : 'none');\n      svg.setAttribute('stroke', props.solid.value ? 'none' : 'currentColor');\n      svg.setAttribute('stroke-linecap', 'round');\n      svg.setAttribute('stroke-linejoin', 'round');\n      svg.setAttribute('stroke-width', String(props.solid.value ? 0 : strokeWidth));\n      svg.setAttribute('viewBox', '0 0 24 24');\n\n      const children = node.map(([tag, attrs]) => createSvgChild(tag, attrs)).filter((el): el is SVGElement => !!el);\n\n      svg.replaceChildren(...children);\n    });\n\n    return html`\n      ${when(\n        () => !!iconNode.value,\n        () => html`\n          <svg ref=\"${svgRef}\" part=\"svg\" style=\"width:100%;height:100%\"></svg>\n        `,\n      )}\n    `;\n  },\n  styles: [styles],\n});\n"],"mappings":"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"}

package/dist/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./code-window.cjs"),t=require("./icon.cjs"),n=require("./copy-command.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./shared/size-presets.cjs"),a=require("./progress.cjs"),o=require("./errors.cjs"),s=require("./content/carousel/carousel-slide.cjs"),ee=require("./carousel.cjs"),c=require("./avatar.cjs"),l=require("./breadcrumb.cjs"),u=require("./card.cjs"),d=require("./chat-message.cjs"),f=require("./list.cjs"),te=require("./list-item.cjs"),p=require("./button-group.cjs"),ne=require("./inputs/shared/form-context.cjs"),re=require("./button.cjs"),m=require("./pagination.cjs"),h=require("./separator.cjs"),g=require("./table.cjs"),_=require("./text.cjs"),v=require("./accordion.cjs"),y=require("./tabs.cjs"),b=require("./accordion-item.cjs"),x=require("./tab-item.cjs"),S=require("./tab-panel.cjs"),C=require("./async.cjs"),w=require("./alert.cjs"),T=require("./badge.cjs"),E=require("./chip.cjs"),D=require("./password-strength.cjs"),O=require("./skeleton.cjs"),k=require("./typing-indicator.cjs"),A=require("./toast.cjs"),j=require("./checkbox-group.cjs"),M=require("./checkbox.cjs"),N=require("./input.cjs"),P=require("./combobox.cjs"),F=require("./select.cjs"),I=require("./popover.cjs"),L=require("./datagrid.cjs"),ie=require("./calendar.cjs"),R=require("./date-picker.cjs"),z=require("./file-input.cjs"),B=require("./form.cjs"),V=require("./message-composer.cjs"),H=require("./number-input.cjs"),U=require("./otp-input.cjs"),W=require("./radio-group.cjs"),G=require("./radio.cjs"),K=require("./rating.cjs"),q=require("./slider.cjs"),J=require("./switch.cjs"),Y=require("./textarea.cjs"),ae=require("./time-picker.cjs"),oe=require("./box.cjs"),se=require("./grid-item.cjs"),ce=require("./grid.cjs"),X=require("./navbar.cjs"),Z=require("./sidebar.cjs"),Q=require("./command-palette.cjs"),le=require("./dialog.cjs"),ue=require("./drawer.cjs"),$=require("./menu.cjs"),de=require("./tooltip.cjs");exports.ACCORDION_CTX=v.ACCORDION_CTX,exports.ACCORDION_ITEM_TAG=b.ACCORDION_ITEM_TAG,exports.ACCORDION_TAG=v.ACCORDION_TAG,exports.ALERT_TAG=w.ALERT_TAG,exports.ASYNC_TAG=C.ASYNC_TAG,exports.AVATAR_GROUP_TAG=c.AVATAR_GROUP_TAG,exports.AVATAR_TAG=c.AVATAR_TAG,exports.BADGE_TAG=T.BADGE_TAG,exports.BOX_TAG=oe.BOX_TAG,exports.BREADCRUMB_ITEM_TAG=l.BREADCRUMB_ITEM_TAG,exports.BREADCRUMB_TAG=l.BREADCRUMB_TAG,exports.BUTTON_GROUP_CTX=p.BUTTON_GROUP_CTX,exports.BUTTON_GROUP_TAG=p.BUTTON_GROUP_TAG,exports.BUTTON_TAG=re.BUTTON_TAG,exports.CALENDAR_TAG=ie.CALENDAR_TAG,exports.CARD_TAG=u.CARD_TAG,exports.CAROUSEL_SLIDE_TAG=s.CAROUSEL_SLIDE_TAG,exports.CAROUSEL_TAG=ee.CAROUSEL_TAG,exports.CHAT_MESSAGE_TAG=d.CHAT_MESSAGE_TAG,exports.CHECKBOX_GROUP_CTX=j.CHECKBOX_GROUP_CTX,exports.CHECKBOX_GROUP_TAG=j.CHECKBOX_GROUP_TAG,exports.CHECKBOX_TAG=M.CHECKBOX_TAG,exports.CHIP_TAG=E.CHIP_TAG,exports.CODE_WINDOW_TAG=e.CODE_WINDOW_TAG,exports.COMBOBOX_TAG=P.COMBOBOX_TAG,exports.COMMAND_PALETTE_ITEM_TAG=Q.COMMAND_PALETTE_ITEM_TAG,exports.COMMAND_PALETTE_TAG=Q.COMMAND_PALETTE_TAG,exports.CONTROL_SIZE_PRESET=i.CONTROL_SIZE_PRESET,exports.COPY_COMMAND_TAG=n.COPY_COMMAND_TAG,exports.DATAGRID_TAG=L.DATAGRID_TAG,exports.DATE_PICKER_TAG=R.DATE_PICKER_TAG,exports.DIALOG_TAG=le.DIALOG_TAG,exports.DRAWER_TAG=ue.DRAWER_TAG,exports.FIELD_SIZE_PRESET=i.FIELD_SIZE_PRESET,exports.FILE_INPUT_SIZE_PRESET=i.FILE_INPUT_SIZE_PRESET,exports.FILE_INPUT_TAG=z.FILE_INPUT_TAG,exports.FORM_CTX=ne.FORM_CTX,exports.FORM_TAG=B.FORM_TAG,exports.GRID_ITEM_TAG=se.GRID_ITEM_TAG,exports.GRID_TAG=ce.GRID_TAG,exports.ICON_TAG=t.ICON_TAG,exports.INPUT_TAG=N.INPUT_TAG,exports.LIST_CTX=f.LIST_CTX,exports.LIST_ITEM_TAG=te.LIST_ITEM_TAG,exports.LIST_SIZE_PRESET=i.LIST_SIZE_PRESET,exports.LIST_TAG=f.LIST_TAG,exports.MENU_ITEM_TAG=$.MENU_ITEM_TAG,exports.MENU_SIZE_PRESET=i.MENU_SIZE_PRESET,exports.MENU_TAG=$.MENU_TAG,exports.MESSAGE_COMPOSER_SIZE_PRESET=i.MESSAGE_COMPOSER_SIZE_PRESET,exports.MESSAGE_COMPOSER_TAG=V.MESSAGE_COMPOSER_TAG,exports.NAVBAR_CTX=X.NAVBAR_CTX,exports.NAVBAR_ITEM_TAG=X.NAVBAR_ITEM_TAG,exports.NAVBAR_TAG=X.NAVBAR_TAG,exports.NUMBER_INPUT_TAG=H.NUMBER_INPUT_TAG,exports.OTP_INPUT_TAG=U.OTP_INPUT_TAG,exports.PAGINATION_TAG=m.PAGINATION_TAG,exports.PASSWORD_STRENGTH_TAG=D.PASSWORD_STRENGTH_TAG,exports.POPOVER_TAG=I.POPOVER_TAG,exports.PROGRESS_TAG=a.PROGRESS_TAG,exports.RADIO_GROUP_CTX=W.RADIO_GROUP_CTX,exports.RADIO_GROUP_TAG=W.RADIO_GROUP_TAG,exports.RADIO_TAG=G.RADIO_TAG,exports.RATING_TAG=K.RATING_TAG,exports.RefineConfigError=o.RefineConfigError,exports.RefineError=o.RefineError,exports.SELECT_TAG=F.SELECT_TAG,exports.SEPARATOR_TAG=h.SEPARATOR_TAG,exports.SIDEBAR_CTX=Z.SIDEBAR_CTX,exports.SIDEBAR_GROUP_TAG=Z.SIDEBAR_GROUP_TAG,exports.SIDEBAR_ITEM_TAG=Z.SIDEBAR_ITEM_TAG,exports.SIDEBAR_TAG=Z.SIDEBAR_TAG,exports.SKELETON_TAG=O.SKELETON_TAG,exports.SLIDER_SIZE_PRESET=i.SLIDER_SIZE_PRESET,exports.SLIDER_TAG=q.SLIDER_TAG,exports.SWITCH_SIZE_PRESET=i.SWITCH_SIZE_PRESET,exports.SWITCH_TAG=J.SWITCH_TAG,exports.TABLE_TAG=g.TABLE_TAG,exports.TABS_CTX=y.TABS_CTX,exports.TABS_TAG=y.TABS_TAG,exports.TAB_ITEM_TAG=x.TAB_ITEM_TAG,exports.TAB_PANEL_TAG=S.TAB_PANEL_TAG,exports.TEXTAREA_SIZE_PRESET=i.TEXTAREA_SIZE_PRESET,exports.TEXTAREA_TAG=Y.TEXTAREA_TAG,exports.TEXT_TAG=_.TEXT_TAG,exports.TIME_PICKER_TAG=ae.TIME_PICKER_TAG,exports.TOAST_TAG=A.TOAST_TAG,exports.TOOLTIP_TAG=de.TOOLTIP_TAG,exports.TYPING_INDICATOR_TAG=k.TYPING_INDICATOR_TAG,exports.commonProps=r.commonProps,exports.createToastService=A.createToastService,exports.disablableBundle=r.disablableBundle,exports.elevatableBundle=r.elevatableBundle,exports.loadableBundle=r.loadableBundle,exports.registerIcons=t.registerIcons,exports.roundableBundle=r.roundableBundle,exports.sizableBundle=r.sizableBundle,exports.themableBundle=r.themableBundle,exports.toast=A.toast;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./errors.cjs");exports.RefineError=e.RefineError;

package/dist/index.d.ts

@@ -1,9 +1,8 @@
-export * from './content';
-export * from './disclosure';
-export * from './errors';
-export * from './feedback';
-export * from './inputs';
-export * from './layout';
-export * from './overlay';
-export * from './types';
+/**
+ * Refine components register through their explicit component entry points.
+ *
+ * Keeping the package root free of registration side effects makes dependency
+ * ownership and bundle contents obvious to application code.
+ */
+export { RefineError } from './errors';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}

package/dist/index.js

@@ -1,67 +1,2 @@
-import { CODE_WINDOW_TAG as e } from "./code-window.js";
-import { ICON_TAG as t, registerIcons as n } from "./icon.js";
-import { COPY_COMMAND_TAG as r } from "./copy-command.js";
-import { commonProps as i, disablableBundle as a, elevatableBundle as o, loadableBundle as s, roundableBundle as c, sizableBundle as l, themableBundle as u } from "./shared/prop-bundles.js";
-import { CONTROL_SIZE_PRESET as d, FIELD_SIZE_PRESET as f, FILE_INPUT_SIZE_PRESET as p, LIST_SIZE_PRESET as m, MENU_SIZE_PRESET as h, MESSAGE_COMPOSER_SIZE_PRESET as g, SLIDER_SIZE_PRESET as _, SWITCH_SIZE_PRESET as v, TEXTAREA_SIZE_PRESET as y } from "./shared/size-presets.js";
-import { PROGRESS_TAG as b } from "./progress.js";
-import { RefineConfigError as x, RefineError as S } from "./errors.js";
-import { CAROUSEL_SLIDE_TAG as C } from "./content/carousel/carousel-slide.js";
-import { CAROUSEL_TAG as w } from "./carousel.js";
-import { AVATAR_GROUP_TAG as T, AVATAR_TAG as E } from "./avatar.js";
-import { BREADCRUMB_ITEM_TAG as D, BREADCRUMB_TAG as O } from "./breadcrumb.js";
-import { CARD_TAG as k } from "./card.js";
-import { CHAT_MESSAGE_TAG as A } from "./chat-message.js";
-import { LIST_CTX as j, LIST_TAG as M } from "./list.js";
-import { LIST_ITEM_TAG as N } from "./list-item.js";
-import { BUTTON_GROUP_CTX as P, BUTTON_GROUP_TAG as F } from "./button-group.js";
-import { FORM_CTX as I } from "./inputs/shared/form-context.js";
-import { BUTTON_TAG as L } from "./button.js";
-import { PAGINATION_TAG as R } from "./pagination.js";
-import { SEPARATOR_TAG as z } from "./separator.js";
-import { TABLE_TAG as B } from "./table.js";
-import { TEXT_TAG as V } from "./text.js";
-import { ACCORDION_CTX as H, ACCORDION_TAG as U } from "./accordion.js";
-import { TABS_CTX as W, TABS_TAG as G } from "./tabs.js";
-import { ACCORDION_ITEM_TAG as K } from "./accordion-item.js";
-import { TAB_ITEM_TAG as q } from "./tab-item.js";
-import { TAB_PANEL_TAG as J } from "./tab-panel.js";
-import { ASYNC_TAG as Y } from "./async.js";
-import { ALERT_TAG as X } from "./alert.js";
-import { BADGE_TAG as Z } from "./badge.js";
-import { CHIP_TAG as Q } from "./chip.js";
-import { PASSWORD_STRENGTH_TAG as $ } from "./password-strength.js";
-import { SKELETON_TAG as ee } from "./skeleton.js";
-import { TYPING_INDICATOR_TAG as te } from "./typing-indicator.js";
-import { TOAST_TAG as ne, createToastService as re, toast as ie } from "./toast.js";
-import { CHECKBOX_GROUP_CTX as ae, CHECKBOX_GROUP_TAG as oe } from "./checkbox-group.js";
-import { CHECKBOX_TAG as se } from "./checkbox.js";
-import { INPUT_TAG as ce } from "./input.js";
-import { COMBOBOX_TAG as le } from "./combobox.js";
-import { SELECT_TAG as ue } from "./select.js";
-import { POPOVER_TAG as de } from "./popover.js";
-import { DATAGRID_TAG as fe } from "./datagrid.js";
-import { CALENDAR_TAG as pe } from "./calendar.js";
-import { DATE_PICKER_TAG as me } from "./date-picker.js";
-import { FILE_INPUT_TAG as he } from "./file-input.js";
-import { FORM_TAG as ge } from "./form.js";
-import { MESSAGE_COMPOSER_TAG as _e } from "./message-composer.js";
-import { NUMBER_INPUT_TAG as ve } from "./number-input.js";
-import { OTP_INPUT_TAG as ye } from "./otp-input.js";
-import { RADIO_GROUP_CTX as be, RADIO_GROUP_TAG as xe } from "./radio-group.js";
-import { RADIO_TAG as Se } from "./radio.js";
-import { RATING_TAG as Ce } from "./rating.js";
-import { SLIDER_TAG as we } from "./slider.js";
-import { SWITCH_TAG as Te } from "./switch.js";
-import { TEXTAREA_TAG as Ee } from "./textarea.js";
-import { TIME_PICKER_TAG as De } from "./time-picker.js";
-import { BOX_TAG as Oe } from "./box.js";
-import { GRID_ITEM_TAG as ke } from "./grid-item.js";
-import { GRID_TAG as Ae } from "./grid.js";
-import { NAVBAR_CTX as je, NAVBAR_ITEM_TAG as Me, NAVBAR_TAG as Ne } from "./navbar.js";
-import { SIDEBAR_CTX as Pe, SIDEBAR_GROUP_TAG as Fe, SIDEBAR_ITEM_TAG as Ie, SIDEBAR_TAG as Le } from "./sidebar.js";
-import { COMMAND_PALETTE_ITEM_TAG as Re, COMMAND_PALETTE_TAG as ze } from "./command-palette.js";
-import { DIALOG_TAG as Be } from "./dialog.js";
-import { DRAWER_TAG as Ve } from "./drawer.js";
-import { MENU_ITEM_TAG as He, MENU_TAG as Ue } from "./menu.js";
-import { TOOLTIP_TAG as We } from "./tooltip.js";
-export { H as ACCORDION_CTX, K as ACCORDION_ITEM_TAG, U as ACCORDION_TAG, X as ALERT_TAG, Y as ASYNC_TAG, T as AVATAR_GROUP_TAG, E as AVATAR_TAG, Z as BADGE_TAG, Oe as BOX_TAG, D as BREADCRUMB_ITEM_TAG, O as BREADCRUMB_TAG, P as BUTTON_GROUP_CTX, F as BUTTON_GROUP_TAG, L as BUTTON_TAG, pe as CALENDAR_TAG, k as CARD_TAG, C as CAROUSEL_SLIDE_TAG, w as CAROUSEL_TAG, A as CHAT_MESSAGE_TAG, ae as CHECKBOX_GROUP_CTX, oe as CHECKBOX_GROUP_TAG, se as CHECKBOX_TAG, Q as CHIP_TAG, e as CODE_WINDOW_TAG, le as COMBOBOX_TAG, Re as COMMAND_PALETTE_ITEM_TAG, ze as COMMAND_PALETTE_TAG, d as CONTROL_SIZE_PRESET, r as COPY_COMMAND_TAG, fe as DATAGRID_TAG, me as DATE_PICKER_TAG, Be as DIALOG_TAG, Ve as DRAWER_TAG, f as FIELD_SIZE_PRESET, p as FILE_INPUT_SIZE_PRESET, he as FILE_INPUT_TAG, I as FORM_CTX, ge as FORM_TAG, ke as GRID_ITEM_TAG, Ae as GRID_TAG, t as ICON_TAG, ce as INPUT_TAG, j as LIST_CTX, N as LIST_ITEM_TAG, m as LIST_SIZE_PRESET, M as LIST_TAG, He as MENU_ITEM_TAG, h as MENU_SIZE_PRESET, Ue as MENU_TAG, g as MESSAGE_COMPOSER_SIZE_PRESET, _e as MESSAGE_COMPOSER_TAG, je as NAVBAR_CTX, Me as NAVBAR_ITEM_TAG, Ne as NAVBAR_TAG, ve as NUMBER_INPUT_TAG, ye as OTP_INPUT_TAG, R as PAGINATION_TAG, $ as PASSWORD_STRENGTH_TAG, de as POPOVER_TAG, b as PROGRESS_TAG, be as RADIO_GROUP_CTX, xe as RADIO_GROUP_TAG, Se as RADIO_TAG, Ce as RATING_TAG, x as RefineConfigError, S as RefineError, ue as SELECT_TAG, z as SEPARATOR_TAG, Pe as SIDEBAR_CTX, Fe as SIDEBAR_GROUP_TAG, Ie as SIDEBAR_ITEM_TAG, Le as SIDEBAR_TAG, ee as SKELETON_TAG, _ as SLIDER_SIZE_PRESET, we as SLIDER_TAG, v as SWITCH_SIZE_PRESET, Te as SWITCH_TAG, B as TABLE_TAG, W as TABS_CTX, G as TABS_TAG, q as TAB_ITEM_TAG, J as TAB_PANEL_TAG, y as TEXTAREA_SIZE_PRESET, Ee as TEXTAREA_TAG, V as TEXT_TAG, De as TIME_PICKER_TAG, ne as TOAST_TAG, We as TOOLTIP_TAG, te as TYPING_INDICATOR_TAG, i as commonProps, re as createToastService, a as disablableBundle, o as elevatableBundle, s as loadableBundle, n as registerIcons, c as roundableBundle, l as sizableBundle, u as themableBundle, ie as toast };
+import { RefineError as e } from "./errors.js";
+export { e as RefineError };

package/dist/input.cjs

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