@vielzeug/refine 26.10.0 → 26.10.1

package/dist/rank-item.js

@@ -0,0 +1,21 @@
+import{reducedMotionMixin as e}from"./styles/mixins/accessibility.css.js";import t from"./content/rank-list/rank-item.css.js";import{RANK_CTX as n}from"./rank-list.js";import{computed as r}from"@vielzeug/ripple";import{bind as i,define as a,html as o,inject as s,prop as c,useSlots as l}from"@vielzeug/ore";var u=`ore-rank-item`;a(u,{props:{bar:c.bool(!0),rank:c.number(),value:c.number()},setup(e){let t=l(),a=t.has(`description`),c=t.has(`leading`),u=s(n),d=r(()=>e.bar.value&&e.value.value!=null&&u!=null),f=r(()=>{let t=u?.scale.value??1,n=e.value.value;return n==null||t<=0?0:Math.max(0,Math.min(1,n/t))}),p=new Intl.NumberFormat,m=r(()=>{let t=e.value.value;return t==null?``:p.format(t)}),h=r(()=>t.has(`trailing`).value||e.value.value!=null);return i({attr:{role:()=>`listitem`}}),o`
+      <div class="row" part="row">
+        <span class="rank" part="rank" aria-hidden="true" ?hidden="${()=>e.rank.value==null}"
+          >${()=>e.rank.value??``}</span
+        >
+        <span class="leading" part="leading" ?hidden="${()=>!c.value}"><slot name="leading"></slot></span>
+        <span class="content" part="content">
+          <span class="label" part="label"><slot></slot></span>
+          <span class="description" part="description" ?hidden="${()=>!a.value}"
+            ><slot name="description"></slot
+          ></span>
+        </span>
+        <span class="trailing" part="trailing" ?hidden="${()=>!h.value}"
+          ><slot name="trailing">${m}</slot></span
+        >
+      </div>
+      <div class="bar" part="bar" aria-hidden="true" ?hidden="${()=>!d.value}">
+        <span class="bar-fill" part="bar-fill" style="${()=>`--_fill: ${f.value}`}"></span>
+      </div>
+    `},styles:[e,t]});export{u as RANK_ITEM_TAG};
+//# sourceMappingURL=rank-item.js.map

package/dist/rank-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rank-item.js","names":[],"sources":["../src/content/rank-list/rank-item.ts"],"sourcesContent":["import { bind, define, html, inject, prop, useSlots } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport { reducedMotionMixin } from '../../styles';\nimport componentStyles from './rank-item.css?inline';\nimport { RANK_CTX } from './rank-list';\n\n/** Rank-item component properties */\nexport type OreRankItemProps = {\n  /**\n   * Show the proportional bar (default). Disable with `bar=\"false\"` for rows whose `value` is\n   * not a comparable count (a median duration, a rating), where a scaled bar would imply a\n   * ranking the data does not support.\n   */\n  bar?: boolean;\n  /**\n   * Rank position within the parent `ore-rank-list`, starting at 1. Assigned automatically in\n   * DOM order on every rescan; a hand-written value is overwritten the moment the list syncs.\n   */\n  rank?: number;\n  /**\n   * The row's numeric value. Against the largest sibling `value` it sizes the proportional\n   * bar, and without a `trailing` slot it is also the row's own formatted display. Omit it on\n   * rows whose display is not a count (pass the formatted text in the `trailing` slot instead).\n   */\n  value?: number;\n};\n\n/**\n * A single ranked row inside `ore-rank-list`: a rank numeral, an optional `leading` slot\n * (avatar, icon), the label, a secondary `description` line, and a right-aligned `trailing`\n * value, with a proportional bar under the row sized against the largest sibling `value`.\n * The row is the whole visualization: the label and value stay text, so the ranking is\n * readable and accessible with the bar treated as reinforcement, never as the only carrier.\n *\n * @element ore-rank-item\n *\n * @attr {boolean} bar - Show the proportional bar (default). Disable with `bar=\"false\"` for non-count rows.\n * @attr {number} rank - Rank position: assigned automatically by the parent list in DOM order; manual values are overwritten.\n * @attr {number} value - The row's numeric value: sizes the bar against the largest sibling, and is the formatted display when no `trailing` slot is present.\n *\n * @slot leading - Content before the label (e.g. avatar, icon)\n * @slot - Item label\n * @slot description - Secondary line below the label (e.g. sample count)\n * @slot trailing - Right-aligned value display; replaces the formatted `value`\n *\n * @cssprop --rank-number-color - Rank numeral color (default --color-contrast-500)\n * @cssprop --rank-number-width - Rank numeral column width (default --size-6)\n * @cssprop --rank-bar-color - Bar fill color (default --color-primary)\n * @cssprop --rank-track-color - Bar track color (default --color-contrast-100)\n * @cssprop --rank-bar-height - Bar height (default --size-1)\n *\n * @part row - The text row (rank, leading, label, trailing)\n * @part rank - The rank numeral (aria-hidden: the list order carries it)\n * @part leading - The leading slot container\n * @part content - The label + description container\n * @part label - The label slot container\n * @part description - The description slot container\n * @part trailing - The trailing value container\n * @part bar - The bar track\n * @part bar-fill - The bar fill\n * @example\n * ```html\n * <ore-rank-item value=\"8\">\n *   <ore-avatar slot=\"leading\" src=\"alex.png\" alt=\"\" rounded=\"full\" size=\"sm\"></ore-avatar>\n *   Alex\n * </ore-rank-item>\n * <ore-rank-item value=\"6\" bar=\"false\">\n *   Overview\n *   <span slot=\"description\">4 timed sessions</span>\n *   <span slot=\"trailing\">24m 11s</span>\n * </ore-rank-item>\n * ```\n */\nexport const RANK_ITEM_TAG = 'ore-rank-item' as const;\ndefine<OreRankItemProps>(RANK_ITEM_TAG, {\n  props: {\n    bar: prop.bool(true),\n    rank: prop.number(),\n    value: prop.number(),\n  },\n\n  setup(props) {\n    const slots = useSlots<'description' | 'leading' | 'trailing'>();\n    const hasDescription = slots.has('description');\n    const hasLeading = slots.has('leading');\n\n    // Absent outside an `ore-rank-list`: the row degrades to a plain labeled line (no rank,\n    // no bar), the same standalone shape `ore-list-item` keeps outside its list.\n    const rankCtx = inject(RANK_CTX);\n\n    const showBar = computed(() => props.bar.value && props.value.value != null && rankCtx != null);\n\n    // The largest sibling value is the full track; anything above it is clamped so a stale\n    // `value` written between rescans can never push the bar past the row. The share lands on\n    // the fill's `--_fill` custom property, which its transform consumes: see rank-item.css.\n    const barFill = computed(() => {\n      const scale = rankCtx?.scale.value ?? 1;\n      const value = props.value.value;\n\n      if (value == null || scale <= 0) return 0;\n\n      return Math.max(0, Math.min(1, value / scale));\n    });\n\n    const formatCount = new Intl.NumberFormat();\n    const formattedValue = computed(() => {\n      const value = props.value.value;\n\n      return value == null ? '' : formatCount.format(value);\n    });\n\n    const hasTrailing = computed(() => slots.has('trailing').value || props.value.value != null);\n\n    bind({\n      attr: {\n        role: () => 'listitem',\n      },\n    });\n\n    return html`\n      <div class=\"row\" part=\"row\">\n        <span class=\"rank\" part=\"rank\" aria-hidden=\"true\" ?hidden=\"${() => props.rank.value == null}\"\n          >${() => props.rank.value ?? ''}</span\n        >\n        <span class=\"leading\" part=\"leading\" ?hidden=\"${() => !hasLeading.value}\"><slot name=\"leading\"></slot></span>\n        <span class=\"content\" part=\"content\">\n          <span class=\"label\" part=\"label\"><slot></slot></span>\n          <span class=\"description\" part=\"description\" ?hidden=\"${() => !hasDescription.value}\"\n            ><slot name=\"description\"></slot\n          ></span>\n        </span>\n        <span class=\"trailing\" part=\"trailing\" ?hidden=\"${() => !hasTrailing.value}\"\n          ><slot name=\"trailing\">${formattedValue}</slot></span\n        >\n      </div>\n      <div class=\"bar\" part=\"bar\" aria-hidden=\"true\" ?hidden=\"${() => !showBar.value}\">\n        <span class=\"bar-fill\" part=\"bar-fill\" style=\"${() => `--_fill: ${barFill.value}`}\"></span>\n      </div>\n    `;\n  },\n\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"mTA0EA,IAAa,EAAgB,gBAC7B,EAAyB,EAAe,CACtC,MAAO,CACL,IAAK,EAAK,KAAK,EAAI,EACnB,KAAM,EAAK,OAAO,EAClB,MAAO,EAAK,OAAO,CACrB,EAEA,MAAM,EAAO,CACX,IAAM,EAAQ,EAAiD,EACzD,EAAiB,EAAM,IAAI,aAAa,EACxC,EAAa,EAAM,IAAI,SAAS,EAIhC,EAAU,EAAO,CAAQ,EAEzB,EAAU,MAAe,EAAM,IAAI,OAAS,EAAM,MAAM,OAAS,MAAQ,GAAW,IAAI,EAKxF,EAAU,MAAe,CAC7B,IAAM,EAAQ,GAAS,MAAM,OAAS,EAChC,EAAQ,EAAM,MAAM,MAI1B,OAFI,GAAS,MAAQ,GAAS,EAAU,EAEjC,KAAK,IAAI,EAAG,KAAK,IAAI,EAAG,EAAQ,CAAK,CAAC,CAC/C,CAAC,EAEK,EAAc,IAAI,KAAK,aACvB,EAAiB,MAAe,CACpC,IAAM,EAAQ,EAAM,MAAM,MAE1B,OAAO,GAAS,KAAO,GAAK,EAAY,OAAO,CAAK,CACtD,CAAC,EAEK,EAAc,MAAe,EAAM,IAAI,UAAU,CAAC,CAAC,OAAS,EAAM,MAAM,OAAS,IAAI,EAQ3F,OANA,EAAK,CACH,KAAM,CACJ,SAAY,UACd,CACF,CAAC,EAEM,CAAI;;yEAE4D,EAAM,KAAK,OAAS,KAAK;iBACjF,EAAM,KAAK,OAAS,GAAG;;4DAEoB,CAAC,EAAW,MAAM;;;sEAGR,CAAC,EAAe,MAAM;;;;8DAI9B,CAAC,EAAY,MAAM;mCAChD,EAAe;;;oEAGoB,CAAC,EAAQ,MAAM;4DACvB,YAAY,EAAQ,QAAQ;;KAGxF,EAEA,OAAQ,CAAC,EAAoB,CAAe,CAC9C,CAAC"}

package/dist/rank-list.cjs

@@ -0,0 +1,4 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./content/rank-list/rank-list.css.cjs");let t=require("@vielzeug/ripple"),n=require("@vielzeug/ore");var r=(0,n.createContext)(`RankContext`),i=`ore-rank-list`;(0,n.define)(i,{props:{},setup(){let e=(0,n.getHost)(),i=(0,t.signal)(1),rescan=()=>{let t=[...e.querySelectorAll(`:scope > ore-rank-item`)],n=0;for(let e of t){let t=Number(e.getAttribute(`value`));Number.isFinite(t)&&t>n&&(n=t)}i.value=n>0?n:1;for(let e=0;e<t.length;e++)t[e].setAttribute(`rank`,String(e+1))};return(0,n.onMounted)(()=>{let t=new MutationObserver(rescan);t.observe(e,{attributeFilter:[`value`],attributes:!0,childList:!0,subtree:!0}),(0,n.onCleanup)(()=>t.disconnect()),rescan()}),(0,n.provide)(r,{scale:i}),(0,n.bind)({attr:{role:()=>`list`}}),n.html`
+      <slot></slot>
+    `},styles:[e.default]}),exports.RANK_CTX=r,exports.RANK_LIST_TAG=i;
+//# sourceMappingURL=rank-list.cjs.map

package/dist/rank-list.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rank-list.cjs","names":[],"sources":["../src/content/rank-list/rank-list.ts"],"sourcesContent":["import { bind, createContext, define, getHost, html, onCleanup, onMounted, provide } from '@vielzeug/ore';\nimport { type Readable, signal } from '@vielzeug/ripple';\nimport componentStyles from './rank-list.css?inline';\n\n/** Context provided by `ore-rank-list` to its `ore-rank-item` children. */\nexport type RankContext = {\n  /**\n   * The largest `value` among the item children: the denominator every item divides its own\n   * `value` by to size its bar. Always at least `1`, so a list of all-zero values renders\n   * empty tracks rather than dividing by zero.\n   */\n  scale: Readable<number>;\n};\n/** Injection key for the rank context. */\nexport const RANK_CTX = createContext<RankContext>('RankContext');\n\n/** Rank-list component properties: the list takes none; its children carry `value` and `bar`.\n * `unknown` (not `never`) keeps the derived Vue/framework attribute types permissive. */\nexport type OreRankListProps = Record<string, unknown>;\n\n/**\n * A ranked display list: an ordered set of `ore-rank-item` rows where each row's proportional\n * bar makes the ranking scannable without a separate chart. The list itself owns the two\n * facts an item cannot know on its own: the position of each row (assigned back to the item\n * as its `rank` prop, in DOM order) and the scale every bar is measured against (the largest\n * child `value`, shared through context).\n *\n * This is a read-only data display, not a selection control: rows never receive interactive\n * state. Order the items yourself before rendering: the list numbers them, it does not sort\n * them.\n *\n * @element ore-rank-list\n * @element ore-rank-item - Child element for each ranked row\n *\n * @cssprop --rank-list-gap - Vertical gap between rows (default --size-1)\n *\n * @slot - `ore-rank-item` elements as direct children\n *\n * @example\n * ```html\n * <ore-rank-list aria-label=\"Most visited pages\">\n *   <ore-rank-item value=\"8\">Documentation</ore-rank-item>\n *   <ore-rank-item value=\"6\">Pricing</ore-rank-item>\n *   <ore-rank-item value=\"2\" bar=\"false\">Blog<span slot=\"trailing\">18m 24s</span></ore-rank-item>\n * </ore-rank-list>\n * ```\n */\nexport const RANK_LIST_TAG = 'ore-rank-list' as const;\ndefine<OreRankListProps>(RANK_LIST_TAG, {\n  props: {},\n\n  setup() {\n    const el = getHost();\n\n    // The shared bar scale: recomputed from the light DOM whenever an item is added, removed,\n    // or has its `value` attribute changed (property sets reflect to the attribute, so both\n    // authoring styles converge here). Ranks are written back through each item's reflected\n    // `rank` attribute rather than a property: an attribute survives a not-yet-upgraded child\n    // (parser-created items can connect in any definition order) and re-parses whenever the\n    // item upgrades. Rank writes never re-enter the observer: `rank` is not in its filter.\n    const scale = signal(1);\n\n    const rescan = (): void => {\n      const items = [...el.querySelectorAll<HTMLElement>(':scope > ore-rank-item')];\n      let max = 0;\n\n      for (const item of items) {\n        const value = Number(item.getAttribute('value'));\n\n        if (Number.isFinite(value) && value > max) max = value;\n      }\n\n      scale.value = max > 0 ? max : 1;\n\n      for (let index = 0; index < items.length; index++) {\n        items[index].setAttribute('rank', String(index + 1));\n      }\n    };\n\n    onMounted(() => {\n      const observer = new MutationObserver(rescan);\n\n      observer.observe(el, { attributeFilter: ['value'], attributes: true, childList: true, subtree: true });\n      onCleanup(() => observer.disconnect());\n      rescan();\n    });\n\n    provide(RANK_CTX, { scale });\n\n    // Plain `role=\"list\"` semantics: like `ore-list` (which this mirrors), there is no dedicated\n    // `label` prop; consumers name the ranking through `aria-label` directly.\n    bind({\n      attr: {\n        role: () => 'list',\n      },\n    });\n\n    return html`\n      <slot></slot>\n    `;\n  },\n\n  styles: [componentStyles],\n});\n"],"mappings":"yLAcA,IAAa,GAAA,EAAW,EAAA,cAAA,CAA2B,aAAa,EAiCnD,EAAgB,iBAC7B,EAAA,EAAA,OAAA,CAAyB,EAAe,CACtC,MAAO,CAAC,EAER,OAAQ,CACN,IAAM,GAAA,EAAK,EAAA,QAAA,CAAQ,EAQb,GAAA,EAAQ,EAAA,OAAA,CAAO,CAAC,EAEhB,WAAqB,CACzB,IAAM,EAAQ,CAAC,GAAG,EAAG,iBAA8B,wBAAwB,CAAC,EACxE,EAAM,EAEV,IAAK,IAAM,KAAQ,EAAO,CACxB,IAAM,EAAQ,OAAO,EAAK,aAAa,OAAO,CAAC,EAE3C,OAAO,SAAS,CAAK,GAAK,EAAQ,IAAK,EAAM,EACnD,CAEA,EAAM,MAAQ,EAAM,EAAI,EAAM,EAE9B,IAAK,IAAI,EAAQ,EAAG,EAAQ,EAAM,OAAQ,IACxC,EAAM,EAAM,CAAC,aAAa,OAAQ,OAAO,EAAQ,CAAC,CAAC,CAEvD,EAoBA,OAlBA,EAAA,EAAA,UAAA,KAAgB,CACd,IAAM,EAAW,IAAI,iBAAiB,MAAM,EAE5C,EAAS,QAAQ,EAAI,CAAE,gBAAiB,CAAC,OAAO,EAAG,WAAY,GAAM,UAAW,GAAM,QAAS,EAAK,CAAC,GACrG,EAAA,EAAA,UAAA,KAAgB,EAAS,WAAW,CAAC,EACrC,OAAO,CACT,CAAC,GAED,EAAA,EAAA,QAAA,CAAQ,EAAU,CAAE,OAAM,CAAC,GAI3B,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,SAAY,MACd,CACF,CAAC,EAEM,EAAA,IAAI;;KAGb,EAEA,OAAQ,CAAC,EAAA,OAAe,CAC1B,CAAC"}

package/dist/rank-list.js

@@ -0,0 +1,4 @@
+import e from"./content/rank-list/rank-list.css.js";import{signal as t}from"@vielzeug/ripple";import{bind as n,createContext as r,define as i,getHost as a,html as o,onCleanup as s,onMounted as c,provide as l}from"@vielzeug/ore";var u=r(`RankContext`),d=`ore-rank-list`;i(d,{props:{},setup(){let e=a(),r=t(1),rescan=()=>{let t=[...e.querySelectorAll(`:scope > ore-rank-item`)],n=0;for(let e of t){let t=Number(e.getAttribute(`value`));Number.isFinite(t)&&t>n&&(n=t)}r.value=n>0?n:1;for(let e=0;e<t.length;e++)t[e].setAttribute(`rank`,String(e+1))};return c(()=>{let t=new MutationObserver(rescan);t.observe(e,{attributeFilter:[`value`],attributes:!0,childList:!0,subtree:!0}),s(()=>t.disconnect()),rescan()}),l(u,{scale:r}),n({attr:{role:()=>`list`}}),o`
+      <slot></slot>
+    `},styles:[e]});export{u as RANK_CTX,d as RANK_LIST_TAG};
+//# sourceMappingURL=rank-list.js.map

package/dist/rank-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rank-list.js","names":[],"sources":["../src/content/rank-list/rank-list.ts"],"sourcesContent":["import { bind, createContext, define, getHost, html, onCleanup, onMounted, provide } from '@vielzeug/ore';\nimport { type Readable, signal } from '@vielzeug/ripple';\nimport componentStyles from './rank-list.css?inline';\n\n/** Context provided by `ore-rank-list` to its `ore-rank-item` children. */\nexport type RankContext = {\n  /**\n   * The largest `value` among the item children: the denominator every item divides its own\n   * `value` by to size its bar. Always at least `1`, so a list of all-zero values renders\n   * empty tracks rather than dividing by zero.\n   */\n  scale: Readable<number>;\n};\n/** Injection key for the rank context. */\nexport const RANK_CTX = createContext<RankContext>('RankContext');\n\n/** Rank-list component properties: the list takes none; its children carry `value` and `bar`.\n * `unknown` (not `never`) keeps the derived Vue/framework attribute types permissive. */\nexport type OreRankListProps = Record<string, unknown>;\n\n/**\n * A ranked display list: an ordered set of `ore-rank-item` rows where each row's proportional\n * bar makes the ranking scannable without a separate chart. The list itself owns the two\n * facts an item cannot know on its own: the position of each row (assigned back to the item\n * as its `rank` prop, in DOM order) and the scale every bar is measured against (the largest\n * child `value`, shared through context).\n *\n * This is a read-only data display, not a selection control: rows never receive interactive\n * state. Order the items yourself before rendering: the list numbers them, it does not sort\n * them.\n *\n * @element ore-rank-list\n * @element ore-rank-item - Child element for each ranked row\n *\n * @cssprop --rank-list-gap - Vertical gap between rows (default --size-1)\n *\n * @slot - `ore-rank-item` elements as direct children\n *\n * @example\n * ```html\n * <ore-rank-list aria-label=\"Most visited pages\">\n *   <ore-rank-item value=\"8\">Documentation</ore-rank-item>\n *   <ore-rank-item value=\"6\">Pricing</ore-rank-item>\n *   <ore-rank-item value=\"2\" bar=\"false\">Blog<span slot=\"trailing\">18m 24s</span></ore-rank-item>\n * </ore-rank-list>\n * ```\n */\nexport const RANK_LIST_TAG = 'ore-rank-list' as const;\ndefine<OreRankListProps>(RANK_LIST_TAG, {\n  props: {},\n\n  setup() {\n    const el = getHost();\n\n    // The shared bar scale: recomputed from the light DOM whenever an item is added, removed,\n    // or has its `value` attribute changed (property sets reflect to the attribute, so both\n    // authoring styles converge here). Ranks are written back through each item's reflected\n    // `rank` attribute rather than a property: an attribute survives a not-yet-upgraded child\n    // (parser-created items can connect in any definition order) and re-parses whenever the\n    // item upgrades. Rank writes never re-enter the observer: `rank` is not in its filter.\n    const scale = signal(1);\n\n    const rescan = (): void => {\n      const items = [...el.querySelectorAll<HTMLElement>(':scope > ore-rank-item')];\n      let max = 0;\n\n      for (const item of items) {\n        const value = Number(item.getAttribute('value'));\n\n        if (Number.isFinite(value) && value > max) max = value;\n      }\n\n      scale.value = max > 0 ? max : 1;\n\n      for (let index = 0; index < items.length; index++) {\n        items[index].setAttribute('rank', String(index + 1));\n      }\n    };\n\n    onMounted(() => {\n      const observer = new MutationObserver(rescan);\n\n      observer.observe(el, { attributeFilter: ['value'], attributes: true, childList: true, subtree: true });\n      onCleanup(() => observer.disconnect());\n      rescan();\n    });\n\n    provide(RANK_CTX, { scale });\n\n    // Plain `role=\"list\"` semantics: like `ore-list` (which this mirrors), there is no dedicated\n    // `label` prop; consumers name the ranking through `aria-label` directly.\n    bind({\n      attr: {\n        role: () => 'list',\n      },\n    });\n\n    return html`\n      <slot></slot>\n    `;\n  },\n\n  styles: [componentStyles],\n});\n"],"mappings":"oOAcA,IAAa,EAAW,EAA2B,aAAa,EAiCnD,EAAgB,gBAC7B,EAAyB,EAAe,CACtC,MAAO,CAAC,EAER,OAAQ,CACN,IAAM,EAAK,EAAQ,EAQb,EAAQ,EAAO,CAAC,EAEhB,WAAqB,CACzB,IAAM,EAAQ,CAAC,GAAG,EAAG,iBAA8B,wBAAwB,CAAC,EACxE,EAAM,EAEV,IAAK,IAAM,KAAQ,EAAO,CACxB,IAAM,EAAQ,OAAO,EAAK,aAAa,OAAO,CAAC,EAE3C,OAAO,SAAS,CAAK,GAAK,EAAQ,IAAK,EAAM,EACnD,CAEA,EAAM,MAAQ,EAAM,EAAI,EAAM,EAE9B,IAAK,IAAI,EAAQ,EAAG,EAAQ,EAAM,OAAQ,IACxC,EAAM,EAAM,CAAC,aAAa,OAAQ,OAAO,EAAQ,CAAC,CAAC,CAEvD,EAoBA,OAlBA,MAAgB,CACd,IAAM,EAAW,IAAI,iBAAiB,MAAM,EAE5C,EAAS,QAAQ,EAAI,CAAE,gBAAiB,CAAC,OAAO,EAAG,WAAY,GAAM,UAAW,GAAM,QAAS,EAAK,CAAC,EACrG,MAAgB,EAAS,WAAW,CAAC,EACrC,OAAO,CACT,CAAC,EAED,EAAQ,EAAU,CAAE,OAAM,CAAC,EAI3B,EAAK,CACH,KAAM,CACJ,SAAY,MACd,CACF,CAAC,EAEM,CAAI;;KAGb,EAEA,OAAQ,CAAC,CAAe,CAC1B,CAAC"}

package/dist/rating.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"rating.cjs","names":[],"sources":["../src/inputs/rating/rating.ts"],"sourcesContent":["import { bind, createId, define, getHost, html, prop, useField } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { createErrorHelperState, createSliderControl } from '../../core';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, reducedMotionMixin, sizeVariantMixin } from '../../styles';\nimport type { ComponentSize, ThemeColor } from '../../types';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './rating.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\nexport type OreRatingEvents = {\n  change: Event;\n  input: Event;\n};\n\n/** Rating props */\nexport type OreRatingProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message — marks the field as invalid (fallback when the `error` slot is empty) */\n  error?: string;\n  /** Helper text displayed below the stars (fallback when the `helper` slot is empty) */\n  helper?: string;\n  /** Accessible group label */\n  label?: string;\n  /** Maximum rating (number of stars) */\n  max?: number;\n  /** Form field name */\n  name?: string;\n  /** Make rating read-only */\n  readonly?: boolean;\n  /** Component size */\n  size?: ComponentSize;\n  /** Render selected stars as solid-filled instead of outline-only */\n  solid?: boolean;\n  /** Current rating value */\n  value?: number;\n};\n\n/**\n * A star rating input.\n *\n * @element ore-rating\n *\n * @attr {number} value - Current rating value (default: 0)\n * @attr {number} max - Maximum number of stars (default: 5)\n * @attr {boolean} readonly - Read-only display mode\n * @attr {boolean} disabled - Disabled state\n * @attr {string} label - aria-label for the group (default: 'Rating')\n * @attr {string} color - Theme color for filled stars: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} name - Form field name\n * @attr {boolean} solid - Fill selected stars (outline remains default when omitted)\n * @attr {string} helper - Helper text below the stars\n * @attr {string} error - Error message below the stars\n *\n * @fires input - Emitted when the rating changes.\n * @fires change - Emitted when the rating changes.\n *\n * @cssprop --rating-star-size - Star diameter\n * @cssprop --rating-color-empty - Empty star color\n * @cssprop --rating-color-filled - Filled star color\n * @cssprop --rating-gap - Gap between stars\n *\n * @part stars - Stars container.\n * @part star - Star item element.\n * @part helper-text - The helper/error text element.\n * @example\n * ```html\n * <ore-rating value=\"3\" max=\"5\" color=\"warning\"></ore-rating>\n * <ore-rating value=\"4\" solid></ore-rating>\n * ```\n */\nexport const RATING_TAG = 'ore-rating' as const;\ndefine<OreRatingProps>(RATING_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    helper: prop.string(),\n    label: prop.string('Rating'),\n    max: prop.number(5),\n    name: prop.string(),\n    readonly: prop.bool(false),\n    solid: prop.bool(false),\n    value: prop.number(0),\n  },\n  setup(props) {\n    const el = getHost();\n    const normalizedValue = computed(() => {\n      const max = Math.max(1, Number(props.max?.value) || 5);\n      const raw = Number(props.value?.value);\n      const safe = Number.isFinite(raw) ? raw : 0;\n\n      return Math.min(max, Math.max(0, safe));\n    });\n\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n\n    defineFieldValue(\n      el,\n      () => String(normalizedValue.value),\n      (value) => {\n        el.setAttribute('value', value);\n      },\n    );\n\n    useField({\n      disabled: isDisabled,\n      value: computed(() => String(normalizedValue.value || 0)),\n    });\n\n    const assistiveId = createId('helper');\n    const assistive = createErrorHelperState({ error: props.error, helper: props.helper });\n    const errorText = computed(() => assistive.value.errorText);\n    const helperText = computed(() => assistive.value.helperText);\n    const ariaDescribedBy = computed(() => (errorText.value || helperText.value ? assistiveId : null));\n\n    const isInteractive = computed(() => !props.readonly?.value && !isDisabled.value);\n    const hovered = signal<number | null>(null);\n    const displayValue = computed(() => hovered.value ?? normalizedValue.value);\n    const getStarButtons = () => {\n      return [...(el.shadowRoot?.querySelectorAll<HTMLButtonElement>('[data-star]') ?? [])];\n    };\n    const ratingControl = createSliderControl({\n      max: computed(() => Number(props.max?.value) || 5),\n      min: signal(1),\n      step: signal(1),\n    });\n\n    function spawnSparkles(star: number) {\n      const layer = el.shadowRoot?.querySelector<HTMLElement>('.sparkle-layer');\n      const btn = el.shadowRoot?.querySelector<HTMLElement>(`[data-star=\"${star}\"]`);\n\n      if (!layer || !btn) return;\n\n      const cx = btn.offsetLeft + btn.offsetWidth / 2;\n      const cy = btn.offsetTop + btn.offsetHeight / 2;\n      const count = 10;\n\n      for (let i = 0; i < count; i++) {\n        const p = document.createElement('span');\n        const angle = (360 / count) * i + (Math.random() * 30 - 15);\n        const dist = 18 + Math.random() * 20;\n        const size = 3 + Math.random() * 4;\n        const dur = 380 + Math.random() * 220;\n\n        p.className = 'sparkle';\n        p.style.cssText = [\n          `left:${cx}px`,\n          `top:${cy}px`,\n          `--_angle:${angle}deg`,\n          `--_dist:${dist}px`,\n          `width:${size}px`,\n          `height:${size}px`,\n          `--_dur:${dur}ms`,\n          `animation-delay:${Math.random() * 60}ms`,\n        ].join(';');\n        layer.appendChild(p);\n        p.addEventListener('animationend', () => p.remove(), { once: true });\n      }\n    }\n    function select(star: number, _originalEvent?: Event) {\n      if (!isInteractive.value) return;\n\n      const max = Math.max(1, Number(props.max?.value) || 5);\n      const nextValue = Math.min(max, Math.max(0, star));\n\n      if (nextValue === normalizedValue.value) return;\n\n      setFieldValue(el, String(nextValue));\n      dispatchNativeFieldEvent(el, 'input');\n      dispatchNativeFieldEvent(el, 'change');\n      spawnSparkles(nextValue);\n    }\n    function handleKeydown(e: KeyboardEvent, star: number) {\n      const next = ratingControl.nextFromKey(e.key, star);\n\n      if (next == null) return;\n\n      e.preventDefault();\n      select(next, e);\n\n      const buttons = getStarButtons();\n\n      buttons[next - 1]?.focus();\n    }\n\n    const stars = computed(() => {\n      const max = Number(props.max?.value) || 5;\n\n      return Array.from({ length: max }, (_, i) => i + 1);\n    });\n\n    bind({ attr: { size: props.size } });\n\n    return html`\n      <div\n        class=\"stars\"\n        part=\"stars\"\n        role=\"radiogroup\"\n        aria-label=\"${props.label}\"\n        aria-describedby=\"${ariaDescribedBy}\">\n        ${() =>\n          stars.value.map(\n            (star) => html`\n              <button\n                class=\"star-btn\"\n                part=\"star\"\n                type=\"button\"\n                role=\"radio\"\n                aria-label=\"${() => `${star} ${star === 1 ? 'star' : 'stars'}`}\"\n                aria-checked=\"${() => String(star === normalizedValue.value)}\"\n                data-star=\"${star}\"\n                ?data-filled=\"${() => star <= displayValue.value}\"\n                disabled=\"${() => (!isInteractive.value ? true : null)}\"\n                @click=\"${(e: Event) => select(star, e)}\"\n                @pointerenter=\"${() => {\n                  if (isInteractive.value) hovered.value = star;\n                }}\"\n                @pointerleave=\"${() => {\n                  hovered.value = null;\n                }}\"\n                @keydown=\"${(e: KeyboardEvent) => handleKeydown(e, star)}\">\n                <ore-icon name=\"star\" size=\"var(--_star-size)\" stroke-width=\"1.5\" aria-hidden=\"true\"></ore-icon>\n              </button>\n            `,\n          )}\n        <div class=\"sparkle-layer\"></div>\n      </div>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin({}), coarsePointerMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"rating.cjs","names":[],"sources":["../src/inputs/rating/rating.ts"],"sourcesContent":["import { bind, createId, define, getHost, html, prop, useField } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { createErrorHelperState, createSliderControl } from '../../core';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, reducedMotionMixin, sizeVariantMixin } from '../../styles';\nimport type { ComponentSize, ThemeColor } from '../../types';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './rating.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\nexport type OreRatingEvents = {\n  change: Event;\n  input: Event;\n};\n\n/** Rating props */\nexport type OreRatingProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message: marks the field as invalid (fallback when the `error` slot is empty) */\n  error?: string;\n  /** Helper text displayed below the stars (fallback when the `helper` slot is empty) */\n  helper?: string;\n  /** Accessible group label */\n  label?: string;\n  /** Maximum rating (number of stars) */\n  max?: number;\n  /** Form field name */\n  name?: string;\n  /** Make rating read-only */\n  readonly?: boolean;\n  /** Component size */\n  size?: ComponentSize;\n  /** Render selected stars as solid-filled instead of outline-only */\n  solid?: boolean;\n  /** Current rating value */\n  value?: number;\n};\n\n/**\n * A star rating input.\n *\n * @element ore-rating\n *\n * @attr {number} value - Current rating value (default: 0)\n * @attr {number} max - Maximum number of stars (default: 5)\n * @attr {boolean} readonly - Read-only display mode\n * @attr {boolean} disabled - Disabled state\n * @attr {string} label - aria-label for the group (default: 'Rating')\n * @attr {string} color - Theme color for filled stars: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} name - Form field name\n * @attr {boolean} solid - Fill selected stars (outline remains default when omitted)\n * @attr {string} helper - Helper text below the stars\n * @attr {string} error - Error message below the stars\n *\n * @fires input - Emitted when the rating changes.\n * @fires change - Emitted when the rating changes.\n *\n * @cssprop --rating-star-size - Star diameter\n * @cssprop --rating-color-empty - Empty star color\n * @cssprop --rating-color-filled - Filled star color\n * @cssprop --rating-gap - Gap between stars\n *\n * @part stars - Stars container.\n * @part star - Star item element.\n * @part helper-text - The helper/error text element.\n * @example\n * ```html\n * <ore-rating value=\"3\" max=\"5\" color=\"warning\"></ore-rating>\n * <ore-rating value=\"4\" solid></ore-rating>\n * ```\n */\nexport const RATING_TAG = 'ore-rating' as const;\ndefine<OreRatingProps>(RATING_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    helper: prop.string(),\n    label: prop.string('Rating'),\n    max: prop.number(5),\n    name: prop.string(),\n    readonly: prop.bool(false),\n    solid: prop.bool(false),\n    value: prop.number(0),\n  },\n  setup(props) {\n    const el = getHost();\n    const normalizedValue = computed(() => {\n      const max = Math.max(1, Number(props.max?.value) || 5);\n      const raw = Number(props.value?.value);\n      const safe = Number.isFinite(raw) ? raw : 0;\n\n      return Math.min(max, Math.max(0, safe));\n    });\n\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n\n    defineFieldValue(\n      el,\n      () => String(normalizedValue.value),\n      (value) => {\n        el.setAttribute('value', value);\n      },\n    );\n\n    useField({\n      disabled: isDisabled,\n      value: computed(() => String(normalizedValue.value || 0)),\n    });\n\n    const assistiveId = createId('helper');\n    const assistive = createErrorHelperState({ error: props.error, helper: props.helper });\n    const errorText = computed(() => assistive.value.errorText);\n    const helperText = computed(() => assistive.value.helperText);\n    const ariaDescribedBy = computed(() => (errorText.value || helperText.value ? assistiveId : null));\n\n    const isInteractive = computed(() => !props.readonly?.value && !isDisabled.value);\n    const hovered = signal<number | null>(null);\n    const displayValue = computed(() => hovered.value ?? normalizedValue.value);\n    const getStarButtons = () => {\n      return [...(el.shadowRoot?.querySelectorAll<HTMLButtonElement>('[data-star]') ?? [])];\n    };\n    const ratingControl = createSliderControl({\n      max: computed(() => Number(props.max?.value) || 5),\n      min: signal(1),\n      step: signal(1),\n    });\n\n    function spawnSparkles(star: number) {\n      const layer = el.shadowRoot?.querySelector<HTMLElement>('.sparkle-layer');\n      const btn = el.shadowRoot?.querySelector<HTMLElement>(`[data-star=\"${star}\"]`);\n\n      if (!layer || !btn) return;\n\n      const cx = btn.offsetLeft + btn.offsetWidth / 2;\n      const cy = btn.offsetTop + btn.offsetHeight / 2;\n      const count = 10;\n\n      for (let i = 0; i < count; i++) {\n        const p = document.createElement('span');\n        const angle = (360 / count) * i + (Math.random() * 30 - 15);\n        const dist = 18 + Math.random() * 20;\n        const size = 3 + Math.random() * 4;\n        const dur = 380 + Math.random() * 220;\n\n        p.className = 'sparkle';\n        p.style.cssText = [\n          `left:${cx}px`,\n          `top:${cy}px`,\n          `--_angle:${angle}deg`,\n          `--_dist:${dist}px`,\n          `width:${size}px`,\n          `height:${size}px`,\n          `--_dur:${dur}ms`,\n          `animation-delay:${Math.random() * 60}ms`,\n        ].join(';');\n        layer.appendChild(p);\n        p.addEventListener('animationend', () => p.remove(), { once: true });\n      }\n    }\n    function select(star: number, _originalEvent?: Event) {\n      if (!isInteractive.value) return;\n\n      const max = Math.max(1, Number(props.max?.value) || 5);\n      const nextValue = Math.min(max, Math.max(0, star));\n\n      if (nextValue === normalizedValue.value) return;\n\n      setFieldValue(el, String(nextValue));\n      dispatchNativeFieldEvent(el, 'input');\n      dispatchNativeFieldEvent(el, 'change');\n      spawnSparkles(nextValue);\n    }\n    function handleKeydown(e: KeyboardEvent, star: number) {\n      const next = ratingControl.nextFromKey(e.key, star);\n\n      if (next == null) return;\n\n      e.preventDefault();\n      select(next, e);\n\n      const buttons = getStarButtons();\n\n      buttons[next - 1]?.focus();\n    }\n\n    const stars = computed(() => {\n      const max = Number(props.max?.value) || 5;\n\n      return Array.from({ length: max }, (_, i) => i + 1);\n    });\n\n    bind({ attr: { size: props.size } });\n\n    return html`\n      <div\n        class=\"stars\"\n        part=\"stars\"\n        role=\"radiogroup\"\n        aria-label=\"${props.label}\"\n        aria-describedby=\"${ariaDescribedBy}\">\n        ${() =>\n          stars.value.map(\n            (star) => html`\n              <button\n                class=\"star-btn\"\n                part=\"star\"\n                type=\"button\"\n                role=\"radio\"\n                aria-label=\"${() => `${star} ${star === 1 ? 'star' : 'stars'}`}\"\n                aria-checked=\"${() => String(star === normalizedValue.value)}\"\n                data-star=\"${star}\"\n                ?data-filled=\"${() => star <= displayValue.value}\"\n                disabled=\"${() => (!isInteractive.value ? true : null)}\"\n                @click=\"${(e: Event) => select(star, e)}\"\n                @pointerenter=\"${() => {\n                  if (isInteractive.value) hovered.value = star;\n                }}\"\n                @pointerleave=\"${() => {\n                  hovered.value = null;\n                }}\"\n                @keydown=\"${(e: KeyboardEvent) => handleKeydown(e, star)}\">\n                <ore-icon name=\"star\" size=\"var(--_star-size)\" stroke-width=\"1.5\" aria-hidden=\"true\"></ore-icon>\n              </button>\n            `,\n          )}\n        <div class=\"sparkle-layer\"></div>\n      </div>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin({}), coarsePointerMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}

package/dist/rating.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating.js","names":[],"sources":["../src/inputs/rating/rating.ts"],"sourcesContent":["import { bind, createId, define, getHost, html, prop, useField } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { createErrorHelperState, createSliderControl } from '../../core';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, reducedMotionMixin, sizeVariantMixin } from '../../styles';\nimport type { ComponentSize, ThemeColor } from '../../types';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './rating.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\nexport type OreRatingEvents = {\n  change: Event;\n  input: Event;\n};\n\n/** Rating props */\nexport type OreRatingProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message — marks the field as invalid (fallback when the `error` slot is empty) */\n  error?: string;\n  /** Helper text displayed below the stars (fallback when the `helper` slot is empty) */\n  helper?: string;\n  /** Accessible group label */\n  label?: string;\n  /** Maximum rating (number of stars) */\n  max?: number;\n  /** Form field name */\n  name?: string;\n  /** Make rating read-only */\n  readonly?: boolean;\n  /** Component size */\n  size?: ComponentSize;\n  /** Render selected stars as solid-filled instead of outline-only */\n  solid?: boolean;\n  /** Current rating value */\n  value?: number;\n};\n\n/**\n * A star rating input.\n *\n * @element ore-rating\n *\n * @attr {number} value - Current rating value (default: 0)\n * @attr {number} max - Maximum number of stars (default: 5)\n * @attr {boolean} readonly - Read-only display mode\n * @attr {boolean} disabled - Disabled state\n * @attr {string} label - aria-label for the group (default: 'Rating')\n * @attr {string} color - Theme color for filled stars: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} name - Form field name\n * @attr {boolean} solid - Fill selected stars (outline remains default when omitted)\n * @attr {string} helper - Helper text below the stars\n * @attr {string} error - Error message below the stars\n *\n * @fires input - Emitted when the rating changes.\n * @fires change - Emitted when the rating changes.\n *\n * @cssprop --rating-star-size - Star diameter\n * @cssprop --rating-color-empty - Empty star color\n * @cssprop --rating-color-filled - Filled star color\n * @cssprop --rating-gap - Gap between stars\n *\n * @part stars - Stars container.\n * @part star - Star item element.\n * @part helper-text - The helper/error text element.\n * @example\n * ```html\n * <ore-rating value=\"3\" max=\"5\" color=\"warning\"></ore-rating>\n * <ore-rating value=\"4\" solid></ore-rating>\n * ```\n */\nexport const RATING_TAG = 'ore-rating' as const;\ndefine<OreRatingProps>(RATING_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    helper: prop.string(),\n    label: prop.string('Rating'),\n    max: prop.number(5),\n    name: prop.string(),\n    readonly: prop.bool(false),\n    solid: prop.bool(false),\n    value: prop.number(0),\n  },\n  setup(props) {\n    const el = getHost();\n    const normalizedValue = computed(() => {\n      const max = Math.max(1, Number(props.max?.value) || 5);\n      const raw = Number(props.value?.value);\n      const safe = Number.isFinite(raw) ? raw : 0;\n\n      return Math.min(max, Math.max(0, safe));\n    });\n\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n\n    defineFieldValue(\n      el,\n      () => String(normalizedValue.value),\n      (value) => {\n        el.setAttribute('value', value);\n      },\n    );\n\n    useField({\n      disabled: isDisabled,\n      value: computed(() => String(normalizedValue.value || 0)),\n    });\n\n    const assistiveId = createId('helper');\n    const assistive = createErrorHelperState({ error: props.error, helper: props.helper });\n    const errorText = computed(() => assistive.value.errorText);\n    const helperText = computed(() => assistive.value.helperText);\n    const ariaDescribedBy = computed(() => (errorText.value || helperText.value ? assistiveId : null));\n\n    const isInteractive = computed(() => !props.readonly?.value && !isDisabled.value);\n    const hovered = signal<number | null>(null);\n    const displayValue = computed(() => hovered.value ?? normalizedValue.value);\n    const getStarButtons = () => {\n      return [...(el.shadowRoot?.querySelectorAll<HTMLButtonElement>('[data-star]') ?? [])];\n    };\n    const ratingControl = createSliderControl({\n      max: computed(() => Number(props.max?.value) || 5),\n      min: signal(1),\n      step: signal(1),\n    });\n\n    function spawnSparkles(star: number) {\n      const layer = el.shadowRoot?.querySelector<HTMLElement>('.sparkle-layer');\n      const btn = el.shadowRoot?.querySelector<HTMLElement>(`[data-star=\"${star}\"]`);\n\n      if (!layer || !btn) return;\n\n      const cx = btn.offsetLeft + btn.offsetWidth / 2;\n      const cy = btn.offsetTop + btn.offsetHeight / 2;\n      const count = 10;\n\n      for (let i = 0; i < count; i++) {\n        const p = document.createElement('span');\n        const angle = (360 / count) * i + (Math.random() * 30 - 15);\n        const dist = 18 + Math.random() * 20;\n        const size = 3 + Math.random() * 4;\n        const dur = 380 + Math.random() * 220;\n\n        p.className = 'sparkle';\n        p.style.cssText = [\n          `left:${cx}px`,\n          `top:${cy}px`,\n          `--_angle:${angle}deg`,\n          `--_dist:${dist}px`,\n          `width:${size}px`,\n          `height:${size}px`,\n          `--_dur:${dur}ms`,\n          `animation-delay:${Math.random() * 60}ms`,\n        ].join(';');\n        layer.appendChild(p);\n        p.addEventListener('animationend', () => p.remove(), { once: true });\n      }\n    }\n    function select(star: number, _originalEvent?: Event) {\n      if (!isInteractive.value) return;\n\n      const max = Math.max(1, Number(props.max?.value) || 5);\n      const nextValue = Math.min(max, Math.max(0, star));\n\n      if (nextValue === normalizedValue.value) return;\n\n      setFieldValue(el, String(nextValue));\n      dispatchNativeFieldEvent(el, 'input');\n      dispatchNativeFieldEvent(el, 'change');\n      spawnSparkles(nextValue);\n    }\n    function handleKeydown(e: KeyboardEvent, star: number) {\n      const next = ratingControl.nextFromKey(e.key, star);\n\n      if (next == null) return;\n\n      e.preventDefault();\n      select(next, e);\n\n      const buttons = getStarButtons();\n\n      buttons[next - 1]?.focus();\n    }\n\n    const stars = computed(() => {\n      const max = Number(props.max?.value) || 5;\n\n      return Array.from({ length: max }, (_, i) => i + 1);\n    });\n\n    bind({ attr: { size: props.size } });\n\n    return html`\n      <div\n        class=\"stars\"\n        part=\"stars\"\n        role=\"radiogroup\"\n        aria-label=\"${props.label}\"\n        aria-describedby=\"${ariaDescribedBy}\">\n        ${() =>\n          stars.value.map(\n            (star) => html`\n              <button\n                class=\"star-btn\"\n                part=\"star\"\n                type=\"button\"\n                role=\"radio\"\n                aria-label=\"${() => `${star} ${star === 1 ? 'star' : 'stars'}`}\"\n                aria-checked=\"${() => String(star === normalizedValue.value)}\"\n                data-star=\"${star}\"\n                ?data-filled=\"${() => star <= displayValue.value}\"\n                disabled=\"${() => (!isInteractive.value ? true : null)}\"\n                @click=\"${(e: Event) => select(star, e)}\"\n                @pointerenter=\"${() => {\n                  if (isInteractive.value) hovered.value = star;\n                }}\"\n                @pointerleave=\"${() => {\n                  hovered.value = null;\n                }}\"\n                @keydown=\"${(e: KeyboardEvent) => handleKeydown(e, star)}\">\n                <ore-icon name=\"star\" size=\"var(--_star-size)\" stroke-width=\"1.5\" aria-hidden=\"true\"></ore-icon>\n              </button>\n            `,\n          )}\n        <div class=\"sparkle-layer\"></div>\n      </div>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin({}), coarsePointerMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"rating.js","names":[],"sources":["../src/inputs/rating/rating.ts"],"sourcesContent":["import { bind, createId, define, getHost, html, prop, useField } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { createErrorHelperState, createSliderControl } from '../../core';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, reducedMotionMixin, sizeVariantMixin } from '../../styles';\nimport type { ComponentSize, ThemeColor } from '../../types';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './rating.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\nexport type OreRatingEvents = {\n  change: Event;\n  input: Event;\n};\n\n/** Rating props */\nexport type OreRatingProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message: marks the field as invalid (fallback when the `error` slot is empty) */\n  error?: string;\n  /** Helper text displayed below the stars (fallback when the `helper` slot is empty) */\n  helper?: string;\n  /** Accessible group label */\n  label?: string;\n  /** Maximum rating (number of stars) */\n  max?: number;\n  /** Form field name */\n  name?: string;\n  /** Make rating read-only */\n  readonly?: boolean;\n  /** Component size */\n  size?: ComponentSize;\n  /** Render selected stars as solid-filled instead of outline-only */\n  solid?: boolean;\n  /** Current rating value */\n  value?: number;\n};\n\n/**\n * A star rating input.\n *\n * @element ore-rating\n *\n * @attr {number} value - Current rating value (default: 0)\n * @attr {number} max - Maximum number of stars (default: 5)\n * @attr {boolean} readonly - Read-only display mode\n * @attr {boolean} disabled - Disabled state\n * @attr {string} label - aria-label for the group (default: 'Rating')\n * @attr {string} color - Theme color for filled stars: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} name - Form field name\n * @attr {boolean} solid - Fill selected stars (outline remains default when omitted)\n * @attr {string} helper - Helper text below the stars\n * @attr {string} error - Error message below the stars\n *\n * @fires input - Emitted when the rating changes.\n * @fires change - Emitted when the rating changes.\n *\n * @cssprop --rating-star-size - Star diameter\n * @cssprop --rating-color-empty - Empty star color\n * @cssprop --rating-color-filled - Filled star color\n * @cssprop --rating-gap - Gap between stars\n *\n * @part stars - Stars container.\n * @part star - Star item element.\n * @part helper-text - The helper/error text element.\n * @example\n * ```html\n * <ore-rating value=\"3\" max=\"5\" color=\"warning\"></ore-rating>\n * <ore-rating value=\"4\" solid></ore-rating>\n * ```\n */\nexport const RATING_TAG = 'ore-rating' as const;\ndefine<OreRatingProps>(RATING_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    helper: prop.string(),\n    label: prop.string('Rating'),\n    max: prop.number(5),\n    name: prop.string(),\n    readonly: prop.bool(false),\n    solid: prop.bool(false),\n    value: prop.number(0),\n  },\n  setup(props) {\n    const el = getHost();\n    const normalizedValue = computed(() => {\n      const max = Math.max(1, Number(props.max?.value) || 5);\n      const raw = Number(props.value?.value);\n      const safe = Number.isFinite(raw) ? raw : 0;\n\n      return Math.min(max, Math.max(0, safe));\n    });\n\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n\n    defineFieldValue(\n      el,\n      () => String(normalizedValue.value),\n      (value) => {\n        el.setAttribute('value', value);\n      },\n    );\n\n    useField({\n      disabled: isDisabled,\n      value: computed(() => String(normalizedValue.value || 0)),\n    });\n\n    const assistiveId = createId('helper');\n    const assistive = createErrorHelperState({ error: props.error, helper: props.helper });\n    const errorText = computed(() => assistive.value.errorText);\n    const helperText = computed(() => assistive.value.helperText);\n    const ariaDescribedBy = computed(() => (errorText.value || helperText.value ? assistiveId : null));\n\n    const isInteractive = computed(() => !props.readonly?.value && !isDisabled.value);\n    const hovered = signal<number | null>(null);\n    const displayValue = computed(() => hovered.value ?? normalizedValue.value);\n    const getStarButtons = () => {\n      return [...(el.shadowRoot?.querySelectorAll<HTMLButtonElement>('[data-star]') ?? [])];\n    };\n    const ratingControl = createSliderControl({\n      max: computed(() => Number(props.max?.value) || 5),\n      min: signal(1),\n      step: signal(1),\n    });\n\n    function spawnSparkles(star: number) {\n      const layer = el.shadowRoot?.querySelector<HTMLElement>('.sparkle-layer');\n      const btn = el.shadowRoot?.querySelector<HTMLElement>(`[data-star=\"${star}\"]`);\n\n      if (!layer || !btn) return;\n\n      const cx = btn.offsetLeft + btn.offsetWidth / 2;\n      const cy = btn.offsetTop + btn.offsetHeight / 2;\n      const count = 10;\n\n      for (let i = 0; i < count; i++) {\n        const p = document.createElement('span');\n        const angle = (360 / count) * i + (Math.random() * 30 - 15);\n        const dist = 18 + Math.random() * 20;\n        const size = 3 + Math.random() * 4;\n        const dur = 380 + Math.random() * 220;\n\n        p.className = 'sparkle';\n        p.style.cssText = [\n          `left:${cx}px`,\n          `top:${cy}px`,\n          `--_angle:${angle}deg`,\n          `--_dist:${dist}px`,\n          `width:${size}px`,\n          `height:${size}px`,\n          `--_dur:${dur}ms`,\n          `animation-delay:${Math.random() * 60}ms`,\n        ].join(';');\n        layer.appendChild(p);\n        p.addEventListener('animationend', () => p.remove(), { once: true });\n      }\n    }\n    function select(star: number, _originalEvent?: Event) {\n      if (!isInteractive.value) return;\n\n      const max = Math.max(1, Number(props.max?.value) || 5);\n      const nextValue = Math.min(max, Math.max(0, star));\n\n      if (nextValue === normalizedValue.value) return;\n\n      setFieldValue(el, String(nextValue));\n      dispatchNativeFieldEvent(el, 'input');\n      dispatchNativeFieldEvent(el, 'change');\n      spawnSparkles(nextValue);\n    }\n    function handleKeydown(e: KeyboardEvent, star: number) {\n      const next = ratingControl.nextFromKey(e.key, star);\n\n      if (next == null) return;\n\n      e.preventDefault();\n      select(next, e);\n\n      const buttons = getStarButtons();\n\n      buttons[next - 1]?.focus();\n    }\n\n    const stars = computed(() => {\n      const max = Number(props.max?.value) || 5;\n\n      return Array.from({ length: max }, (_, i) => i + 1);\n    });\n\n    bind({ attr: { size: props.size } });\n\n    return html`\n      <div\n        class=\"stars\"\n        part=\"stars\"\n        role=\"radiogroup\"\n        aria-label=\"${props.label}\"\n        aria-describedby=\"${ariaDescribedBy}\">\n        ${() =>\n          stars.value.map(\n            (star) => html`\n              <button\n                class=\"star-btn\"\n                part=\"star\"\n                type=\"button\"\n                role=\"radio\"\n                aria-label=\"${() => `${star} ${star === 1 ? 'star' : 'stars'}`}\"\n                aria-checked=\"${() => String(star === normalizedValue.value)}\"\n                data-star=\"${star}\"\n                ?data-filled=\"${() => star <= displayValue.value}\"\n                disabled=\"${() => (!isInteractive.value ? true : null)}\"\n                @click=\"${(e: Event) => select(star, e)}\"\n                @pointerenter=\"${() => {\n                  if (isInteractive.value) hovered.value = star;\n                }}\"\n                @pointerleave=\"${() => {\n                  hovered.value = null;\n                }}\"\n                @keydown=\"${(e: KeyboardEvent) => handleKeydown(e, star)}\">\n                <ore-icon name=\"star\" size=\"var(--_star-size)\" stroke-width=\"1.5\" aria-hidden=\"true\"></ore-icon>\n              </button>\n            `,\n          )}\n        <div class=\"sparkle-layer\"></div>\n      </div>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin({}), coarsePointerMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}