@vielzeug/refine 2.2.4 → 2.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/errors.cjs CHANGED
@@ -1,2 +1,2 @@
1
- var e=class e extends Error{constructor(e,t){super(e,t),this.name=new.target.name,Object.setPrototypeOf(this,new.target.prototype)}static is(t){return t instanceof e}},t=class extends e{};exports.RefineConfigError=t,exports.RefineError=e;
1
+ var e=class extends Error{constructor(e,t){super(e,t),this.name=new.target.name,Object.setPrototypeOf(this,new.target.prototype)}},t=class extends e{};exports.RefineConfigError=t,exports.RefineError=e;
2
2
  //# sourceMappingURL=errors.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"errors.cjs","names":[],"sources":["../src/errors.ts"],"sourcesContent":["/** Base class for all refine errors. Use `instanceof RefineError` to catch any refine-originated error. */\nexport class RefineError extends Error {\n constructor(message: string, opts?: ErrorOptions) {\n super(message, opts);\n this.name = new.target.name;\n Object.setPrototypeOf(this, new.target.prototype);\n }\n\n static is(err: unknown): err is RefineError {\n return err instanceof RefineError;\n }\n}\n\n/** Thrown when a refine component receives an invalid or unsupported configuration. */\nexport class RefineConfigError extends RefineError {}\n"],"mappings":"AACA,IAAa,EAAb,MAAa,UAAoB,KAAM,CACrC,YAAY,EAAiB,EAAqB,CAChD,MAAM,EAAS,CAAI,EACnB,KAAK,KAAO,WAAW,KACvB,OAAO,eAAe,KAAM,WAAW,SAAS,CAClD,CAEA,OAAO,GAAG,EAAkC,CAC1C,OAAO,aAAe,CACxB,CACF,EAGa,EAAb,cAAuC,CAAY,CAAC"}
1
+ {"version":3,"file":"errors.cjs","names":[],"sources":["../src/errors.ts"],"sourcesContent":["/** Base class for all refine errors. Use `instanceof RefineError` to catch any refine-originated error. */\nexport class RefineError extends Error {\n constructor(message: string, opts?: ErrorOptions) {\n super(message, opts);\n this.name = new.target.name;\n Object.setPrototypeOf(this, new.target.prototype);\n }\n}\n\n/** Thrown when a refine component receives an invalid or unsupported configuration. */\nexport class RefineConfigError extends RefineError {}\n"],"mappings":"AACA,IAAa,EAAb,cAAiC,KAAM,CACrC,YAAY,EAAiB,EAAqB,CAChD,MAAM,EAAS,CAAI,EACnB,KAAK,KAAO,WAAW,KACvB,OAAO,eAAe,KAAM,WAAW,SAAS,CAClD,CACF,EAGa,EAAb,cAAuC,CAAY,CAAC"}
package/dist/errors.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  /** Base class for all refine errors. Use `instanceof RefineError` to catch any refine-originated error. */
2
2
  export declare class RefineError extends Error {
3
3
  constructor(message: string, opts?: ErrorOptions);
4
- static is(err: unknown): err is RefineError;
5
4
  }
6
5
  /** Thrown when a refine component receives an invalid or unsupported configuration. */
7
6
  export declare class RefineConfigError extends RefineError {
@@ -1 +1 @@
1
- {"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../src/errors.ts"],"names":[],"mappings":"AAAA,2GAA2G;AAC3G,qBAAa,WAAY,SAAQ,KAAK;gBACxB,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,YAAY;IAMhD,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,GAAG,GAAG,IAAI,WAAW;CAG5C;AAED,uFAAuF;AACvF,qBAAa,iBAAkB,SAAQ,WAAW;CAAG"}
1
+ {"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../src/errors.ts"],"names":[],"mappings":"AAAA,2GAA2G;AAC3G,qBAAa,WAAY,SAAQ,KAAK;gBACxB,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,YAAY;CAKjD;AAED,uFAAuF;AACvF,qBAAa,iBAAkB,SAAQ,WAAW;CAAG"}
package/dist/errors.js CHANGED
@@ -1,11 +1,8 @@
1
1
  //#region src/errors.ts
2
- var e = class e extends Error {
2
+ var e = class extends Error {
3
3
  constructor(e, t) {
4
4
  super(e, t), this.name = new.target.name, Object.setPrototypeOf(this, new.target.prototype);
5
5
  }
6
- static is(t) {
7
- return t instanceof e;
8
- }
9
6
  }, t = class extends e {};
10
7
  //#endregion
11
8
  export { t as RefineConfigError, e as RefineError };
@@ -1 +1 @@
1
- {"version":3,"file":"errors.js","names":[],"sources":["../src/errors.ts"],"sourcesContent":["/** Base class for all refine errors. Use `instanceof RefineError` to catch any refine-originated error. */\nexport class RefineError extends Error {\n constructor(message: string, opts?: ErrorOptions) {\n super(message, opts);\n this.name = new.target.name;\n Object.setPrototypeOf(this, new.target.prototype);\n }\n\n static is(err: unknown): err is RefineError {\n return err instanceof RefineError;\n }\n}\n\n/** Thrown when a refine component receives an invalid or unsupported configuration. */\nexport class RefineConfigError extends RefineError {}\n"],"mappings":";AACA,IAAa,IAAb,MAAa,UAAoB,MAAM;CACrC,YAAY,GAAiB,GAAqB;EAGhD,AAFA,MAAM,GAAS,CAAI,GACnB,KAAK,OAAO,WAAW,MACvB,OAAO,eAAe,MAAM,WAAW,SAAS;CAClD;CAEA,OAAO,GAAG,GAAkC;EAC1C,OAAO,aAAe;CACxB;AACF,GAGa,IAAb,cAAuC,EAAY,CAAC"}
1
+ {"version":3,"file":"errors.js","names":[],"sources":["../src/errors.ts"],"sourcesContent":["/** Base class for all refine errors. Use `instanceof RefineError` to catch any refine-originated error. */\nexport class RefineError extends Error {\n constructor(message: string, opts?: ErrorOptions) {\n super(message, opts);\n this.name = new.target.name;\n Object.setPrototypeOf(this, new.target.prototype);\n }\n}\n\n/** Thrown when a refine component receives an invalid or unsupported configuration. */\nexport class RefineConfigError extends RefineError {}\n"],"mappings":";AACA,IAAa,IAAb,cAAiC,MAAM;CACrC,YAAY,GAAiB,GAAqB;EAGhD,AAFA,MAAM,GAAS,CAAI,GACnB,KAAK,OAAO,WAAW,MACvB,OAAO,eAAe,MAAM,WAAW,SAAS;CAClD;AACF,GAGa,IAAb,cAAuC,EAAY,CAAC"}
package/dist/radio.cjs CHANGED
@@ -1,4 +1,4 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./core/checkable.cjs"),a=require("./core/ore.cjs"),o=require("./core/direction.cjs"),s=require("./core/nav.cjs"),c=require("./shared/prop-bundles.cjs"),l=require("./shared/size-presets.cjs"),u=require("./inputs/shared/templates.cjs"),d=require("./inputs/shared/native-field-event.cjs"),f=require("./radio-group.cjs"),p=require("./inputs/radio/radio.css.cjs");let m=require("@vielzeug/ore"),h=require("@vielzeug/ripple");var g=`ore-radio`;(0,m.define)(g,{formAssociated:!0,props:{...c.themableBundle,...c.sizableBundle,...c.disablableBundle,checked:m.prop.bool(!1),error:m.prop.string(),helper:m.prop.string(),name:m.prop.string(),value:m.prop.string()},setup(e){let t=(0,m.getHost)(),n=(0,m.inject)(f.RADIO_GROUP_CTX),r=(0,h.computed)(()=>n?.name.value||e.name.value||``),c=(0,h.computed)(()=>n?.size.value??e.size.value),l=(0,h.computed)(()=>n?.color.value??e.color.value),p=(0,h.computed)(()=>n?n.value.value===e.value.value:!!e.checked.value),g=()=>{let e=r.value;return e?Array.from(document.querySelectorAll(`ore-radio[name="${e}"]`)).filter(e=>!e.hasAttribute(`disabled`)):[]},_=(e,t)=>{if(n){n.select(e.getAttribute(`value`)??``,t);return}e.click()},v=s.createListControl({direction:()=>o.elementDirection(t),getItems:()=>g(),loop:!0,onNavigate:({event:e,item:t})=>{t.focus(),_(t,e)},orientation:`both`,signal:a.lifecycleSignal(m.onCleanup)}),y=t=>{if(!b.checked.value){if(n){n.select(e.value.value??``,t);return}b.toggle(t??new Event(`change`))}},b=i.createCheckable({checked:p,disabled:(0,h.computed)(()=>e.disabled.value||!!n?.disabled.value),error:e.error,helper:e.helper,onToggle:e=>{d.setFieldChecked(t,e.checked),d.dispatchNativeFieldEvent(t,`input`),d.dispatchNativeFieldEvent(t,`change`)},prefix:`radio`,signal:a.lifecycleSignal(m.onCleanup),value:e.value});b.attachFormField((0,m.useField)({disabled:b.disabled,toFormValue:e=>e,value:b.checkableFormValue}));let{assistiveId:x,checked:S,disabled:C,errorText:w,helperText:T,labelId:E,toggle:D}=b;return d.defineFieldChecked(t,()=>S.value,e=>{S.value=e}),(0,m.bind)({attr:{ariaChecked:()=>S.value?`true`:`false`,ariaDescribedby:()=>w.value||T.value?x:null,ariaDisabled:()=>C.value?`true`:null,ariaInvalid:()=>w.value?`true`:null,ariaLabelledby:E,checked:S,color:l,disabled:()=>C.value?!0:void 0,name:()=>r.value||void 0,role:`radio`,size:c,tabindex:()=>{if(!C.value)return S.value?0:-1}},class:()=>({"is-checked":S.value,"is-disabled":C.value}),on:{click:i=>{if(!C.value){if(n)n.select(e.value.value??``,i);else{if(!r.value)return;if(!S.value){let n=e.name.value;document.querySelectorAll(`ore-radio[name="${n}"]`).forEach(e=>{e!==t&&e.removeAttribute(`checked`)}),D(i)}}}},keydown:e=>{if(e.key===` `||e.key===`Enter`){e.preventDefault(),y(e);return}let n=g();if(n.length===0)return;let r=n.indexOf(t);r!==-1&&(v.set(r),v.handleKeydown(e))}}}),m.html`
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./core/checkable.cjs"),a=require("./core/ore.cjs"),o=require("./core/direction.cjs"),s=require("./core/nav.cjs"),c=require("./shared/prop-bundles.cjs"),l=require("./shared/size-presets.cjs"),u=require("./inputs/shared/templates.cjs"),d=require("./inputs/shared/native-field-event.cjs"),f=require("./radio-group.cjs"),p=require("./inputs/radio/radio.css.cjs");let m=require("@vielzeug/ore"),h=require("@vielzeug/ripple");var g=`ore-radio`;(0,m.define)(g,{formAssociated:!0,props:{...c.themableBundle,...c.sizableBundle,...c.disablableBundle,checked:m.prop.bool(!1),error:m.prop.string(),helper:m.prop.string(),name:m.prop.string(),value:m.prop.string()},setup(e){let t=(0,m.getHost)(),n=(0,m.inject)(f.RADIO_GROUP_CTX),r=(0,h.computed)(()=>n?.name.value||e.name.value||``),c=(0,h.computed)(()=>n?.size.value??e.size.value),l=(0,h.computed)(()=>n?.color.value??e.color.value),p=(0,h.computed)(()=>n?n.value.value===e.value.value:!!e.checked.value),g=()=>{let e=r.value;return e?Array.from(document.querySelectorAll(`ore-radio[name="${e}"]`)).filter(e=>!e.hasAttribute(`disabled`)):[]},_=(e,t)=>{if(n){n.select(e.getAttribute(`value`)??``,t);return}e.click()},v=s.createListControl({direction:()=>o.elementDirection(t),getItems:()=>g(),loop:!0,onNavigate:({event:e,item:t})=>{t.focus(),_(t,e)},orientation:`both`,signal:a.lifecycleSignal(m.onCleanup)}),y=t=>{if(!b.checked.value){if(n){n.select(e.value.value??``,t);return}b.toggle(t??new Event(`change`))}},b=i.createCheckable({checked:p,disabled:(0,h.computed)(()=>e.disabled.value||!!n?.disabled.value),error:e.error,helper:e.helper,onToggle:e=>{d.setFieldChecked(t,e.checked),d.dispatchNativeFieldEvent(t,`input`),d.dispatchNativeFieldEvent(t,`change`)},prefix:`radio`,signal:a.lifecycleSignal(m.onCleanup),value:e.value});b.attachFormField((0,m.useField)({disabled:b.disabled,toFormValue:e=>e,value:b.checkableFormValue}));let{assistiveId:x,checked:S,disabled:C,errorText:w,helperText:T,labelId:E,toggle:D}=b;return d.defineFieldChecked(t,()=>S.value,e=>{S.value=e}),(0,m.bind)({attr:{ariaChecked:()=>S.value?`true`:`false`,ariaDescribedby:()=>w.value||T.value?x:null,ariaDisabled:()=>C.value?`true`:null,ariaInvalid:()=>w.value?`true`:null,ariaLabelledby:E,checked:S,color:l,disabled:()=>C.value?!0:void 0,name:()=>r.value||void 0,role:`radio`,size:c,tabindex:()=>{if(!C.value)return S.value?0:-1}},class:()=>({"is-checked":S.value,"is-disabled":C.value}),on:{click:i=>{if(!C.value)if(n)n.select(e.value.value??``,i);else{if(!r.value)return;if(!S.value){let n=e.name.value;document.querySelectorAll(`ore-radio[name="${n}"]`).forEach(e=>{e!==t&&e.removeAttribute(`checked`)}),D(i)}}},keydown:e=>{if(e.key===` `||e.key===`Enter`){e.preventDefault(),y(e);return}let n=g();if(n.length===0)return;let r=n.indexOf(t);r!==-1&&(v.set(r),v.handleKeydown(e))}}}),m.html`
2
2
  <div class="radio-wrapper" part="radio">
3
3
  <div class="circle" part="circle">
4
4
  <div class="dot" part="dot"></div>
@@ -1 +1 @@
1
- {"version":3,"file":"radio.cjs","names":[],"sources":["../src/inputs/radio/radio.ts"],"sourcesContent":["import { bind, define, getHost, html, inject, onCleanup, prop, useField } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { createCheckable, createListControl, elementDirection, lifecycleSignal } from '../../core';\nimport { CONTROL_SIZE_PRESET, disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n coarsePointerMixin,\n colorThemeMixin,\n disabledStateMixin,\n forcedColorsFormControlMixin,\n sizeVariantMixin,\n} from '../../styles';\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\nimport { RADIO_GROUP_CTX } from '../radio-group/radio-group';\nimport { defineFieldChecked, dispatchNativeFieldEvent, setFieldChecked } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './radio.css?inline';\n\n/** Radio component properties */\n\nexport type OreRadioEvents = {\n change: Event;\n input: Event;\n};\n\nexport type OreRadioProps = CheckableProps & {\n /** Theme color */\n color?: ThemeColor;\n /** Disable interaction */\n disabled?: boolean;\n /** Error message (marks field as invalid) */\n error?: string;\n /** Helper text displayed below the radio */\n helper?: string;\n /** Component size */\n size?: ComponentSize;\n};\n\n/**\n * A customizable radio button component for mutually exclusive selections.\n *\n * @element ore-radio\n *\n * @attr {boolean} checked - Checked state\n * @attr {boolean} disabled - Disable radio interaction\n * @attr {string} value - Field value (required for radio groups)\n * @attr {string} name - Form field name (required for radio groups)\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Radio size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the radio\n *\n * @fires input - Emitted when radio is selected.\n * @fires change - Emitted when radio is selected.\n *\n * @slot - Radio button label text\n *\n * @cssprop --radio-size - Control size (width and height)\n * @cssprop --radio-bg - Unchecked background color\n * @cssprop --radio-border-color - Unchecked border color\n * @cssprop --radio-checked-bg - Selected indicator background color\n * @cssprop --radio-color - Selected indicator dot color\n * @cssprop --radio-font-size - Label font size\n * @part radio - The radio wrapper element\n * @part circle - The visual radio circle\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-radio name=\"plan\" value=\"free\">Free</ore-radio>\n * <ore-radio name=\"plan\" value=\"pro\" checked color=\"primary\">Pro</ore-radio>\n * <ore-radio name=\"plan\" value=\"enterprise\" disabled>Enterprise</ore-radio>\n * ```\n */\nexport const RADIO_TAG = 'ore-radio' as const;\ndefine<OreRadioProps>(RADIO_TAG, {\n formAssociated: true,\n props: {\n ...themableBundle,\n ...sizableBundle,\n ...disablableBundle,\n checked: prop.bool(false),\n error: prop.string(),\n helper: prop.string(),\n name: prop.string(),\n value: prop.string(),\n },\n setup(props) {\n const el = getHost();\n\n const groupCtx = inject(RADIO_GROUP_CTX);\n const effectiveName = computed(() => groupCtx?.name.value || props.name.value || '');\n const effectiveSize = computed(() => groupCtx?.size.value ?? props.size.value);\n const effectiveColor = computed(() => groupCtx?.color.value ?? props.color.value);\n const checkedFromState = computed(() => {\n if (groupCtx) return groupCtx.value.value === props.value.value;\n\n return Boolean(props.checked.value);\n });\n\n const getRadioGroup = (): HTMLElement[] => {\n const radioName = effectiveName.value;\n\n if (!radioName) return [];\n\n return Array.from(document.querySelectorAll<HTMLElement>(`ore-radio[name=\"${radioName}\"]`)).filter(\n (r) => !r.hasAttribute('disabled'),\n );\n };\n\n const selectRadio = (radio: HTMLElement, originalEvent?: Event): void => {\n if (groupCtx) {\n groupCtx.select(radio.getAttribute('value') ?? '', originalEvent);\n\n return;\n }\n\n radio.click();\n };\n\n const listControl = createListControl({\n direction: () => elementDirection(el),\n getItems: () => getRadioGroup(),\n // 'both' accepts every arrow key regardless of the group's visual layout (radio groups\n // may render horizontally or vertically via CSS) — RTL mirroring of Left/Right still\n // applies via `direction` since nav.ts's default keymap covers 'both' too.\n loop: true,\n onNavigate: ({ event, item }) => {\n item.focus();\n selectRadio(item, event);\n },\n orientation: 'both',\n signal: lifecycleSignal(onCleanup),\n });\n\n const activateSelf = (originalEvent?: Event): void => {\n if (checkable.checked.value) return;\n\n if (groupCtx) {\n groupCtx.select(props.value.value ?? '', originalEvent);\n\n return;\n }\n\n checkable.toggle(originalEvent ?? new Event('change'));\n };\n\n const checkable = createCheckable({\n checked: checkedFromState,\n disabled: computed(() => props.disabled.value || Boolean(groupCtx?.disabled.value)),\n error: props.error,\n helper: props.helper,\n onToggle: (payload) => {\n setFieldChecked(el, payload.checked);\n dispatchNativeFieldEvent(el, 'input');\n dispatchNativeFieldEvent(el, 'change');\n },\n prefix: 'radio',\n signal: lifecycleSignal(onCleanup),\n value: props.value,\n });\n\n checkable.attachFormField(\n useField<string | null>({\n disabled: checkable.disabled,\n toFormValue: (v) => v,\n value: checkable.checkableFormValue,\n }),\n );\n\n const { assistiveId, checked, disabled, errorText, helperText, labelId, toggle } = checkable;\n\n defineFieldChecked(\n el,\n () => checked.value,\n (value) => {\n checked.value = value;\n },\n );\n\n bind({\n attr: {\n ariaChecked: () => (checked.value ? 'true' : 'false'),\n ariaDescribedby: () => (errorText.value || helperText.value ? assistiveId : null),\n ariaDisabled: () => (disabled.value ? 'true' : null),\n ariaInvalid: () => (errorText.value ? 'true' : null),\n ariaLabelledby: labelId,\n checked,\n color: effectiveColor,\n disabled: () => (disabled.value ? true : undefined),\n name: () => effectiveName.value || undefined,\n role: 'radio',\n size: effectiveSize,\n tabindex: () => {\n if (disabled.value) return undefined;\n\n return checked.value ? 0 : -1;\n },\n },\n class: () => ({\n 'is-checked': checked.value,\n 'is-disabled': disabled.value,\n }),\n on: {\n click: (e: MouseEvent) => {\n if (disabled.value) return;\n\n if (groupCtx) {\n groupCtx.select(props.value.value ?? '', e);\n } else {\n if (!effectiveName.value) return;\n\n if (!checked.value) {\n const radioName = props.name.value;\n const allRadios = document.querySelectorAll<HTMLElement>(`ore-radio[name=\"${radioName}\"]`);\n\n allRadios.forEach((radio) => {\n if (radio !== el) radio.removeAttribute('checked');\n });\n\n toggle(e);\n }\n }\n },\n keydown: (e: KeyboardEvent) => {\n if (e.key === ' ' || e.key === 'Enter') {\n e.preventDefault();\n activateSelf(e);\n\n return;\n }\n\n const radios = getRadioGroup();\n\n if (radios.length === 0) return;\n\n const selfIndex = radios.indexOf(el);\n\n if (selfIndex === -1) return;\n\n listControl.set(selfIndex);\n listControl.handleKeydown(e);\n },\n },\n });\n\n return html`\n <div class=\"radio-wrapper\" part=\"radio\">\n <div class=\"circle\" part=\"circle\">\n <div class=\"dot\" part=\"dot\"></div>\n </div>\n </div>\n <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n ${renderHelperRegion(assistiveId, errorText, helperText)}\n `;\n },\n styles: [\n colorThemeMixin,\n forcedColorsFormControlMixin,\n disabledStateMixin,\n coarsePointerMixin,\n sizeVariantMixin(CONTROL_SIZE_PRESET),\n componentStyles,\n ],\n});\n"],"mappings":"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"}
1
+ {"version":3,"file":"radio.cjs","names":[],"sources":["../src/inputs/radio/radio.ts"],"sourcesContent":["import { bind, define, getHost, html, inject, onCleanup, prop, useField } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { createCheckable, createListControl, elementDirection, lifecycleSignal } from '../../core';\nimport { CONTROL_SIZE_PRESET, disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n coarsePointerMixin,\n colorThemeMixin,\n disabledStateMixin,\n forcedColorsFormControlMixin,\n sizeVariantMixin,\n} from '../../styles';\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\nimport { RADIO_GROUP_CTX } from '../radio-group/radio-group';\nimport { defineFieldChecked, dispatchNativeFieldEvent, setFieldChecked } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './radio.css?inline';\n\n/** Radio component properties */\n\nexport type OreRadioEvents = {\n change: Event;\n input: Event;\n};\n\nexport type OreRadioProps = CheckableProps & {\n /** Theme color */\n color?: ThemeColor;\n /** Disable interaction */\n disabled?: boolean;\n /** Error message (marks field as invalid) */\n error?: string;\n /** Helper text displayed below the radio */\n helper?: string;\n /** Component size */\n size?: ComponentSize;\n};\n\n/**\n * A customizable radio button component for mutually exclusive selections.\n *\n * @element ore-radio\n *\n * @attr {boolean} checked - Checked state\n * @attr {boolean} disabled - Disable radio interaction\n * @attr {string} value - Field value (required for radio groups)\n * @attr {string} name - Form field name (required for radio groups)\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Radio size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the radio\n *\n * @fires input - Emitted when radio is selected.\n * @fires change - Emitted when radio is selected.\n *\n * @slot - Radio button label text\n *\n * @cssprop --radio-size - Control size (width and height)\n * @cssprop --radio-bg - Unchecked background color\n * @cssprop --radio-border-color - Unchecked border color\n * @cssprop --radio-checked-bg - Selected indicator background color\n * @cssprop --radio-color - Selected indicator dot color\n * @cssprop --radio-font-size - Label font size\n * @part radio - The radio wrapper element\n * @part circle - The visual radio circle\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-radio name=\"plan\" value=\"free\">Free</ore-radio>\n * <ore-radio name=\"plan\" value=\"pro\" checked color=\"primary\">Pro</ore-radio>\n * <ore-radio name=\"plan\" value=\"enterprise\" disabled>Enterprise</ore-radio>\n * ```\n */\nexport const RADIO_TAG = 'ore-radio' as const;\ndefine<OreRadioProps>(RADIO_TAG, {\n formAssociated: true,\n props: {\n ...themableBundle,\n ...sizableBundle,\n ...disablableBundle,\n checked: prop.bool(false),\n error: prop.string(),\n helper: prop.string(),\n name: prop.string(),\n value: prop.string(),\n },\n setup(props) {\n const el = getHost();\n\n const groupCtx = inject(RADIO_GROUP_CTX);\n const effectiveName = computed(() => groupCtx?.name.value || props.name.value || '');\n const effectiveSize = computed(() => groupCtx?.size.value ?? props.size.value);\n const effectiveColor = computed(() => groupCtx?.color.value ?? props.color.value);\n const checkedFromState = computed(() => {\n if (groupCtx) return groupCtx.value.value === props.value.value;\n\n return Boolean(props.checked.value);\n });\n\n const getRadioGroup = (): HTMLElement[] => {\n const radioName = effectiveName.value;\n\n if (!radioName) return [];\n\n return Array.from(document.querySelectorAll<HTMLElement>(`ore-radio[name=\"${radioName}\"]`)).filter(\n (r) => !r.hasAttribute('disabled'),\n );\n };\n\n const selectRadio = (radio: HTMLElement, originalEvent?: Event): void => {\n if (groupCtx) {\n groupCtx.select(radio.getAttribute('value') ?? '', originalEvent);\n\n return;\n }\n\n radio.click();\n };\n\n const listControl = createListControl({\n direction: () => elementDirection(el),\n getItems: () => getRadioGroup(),\n // 'both' accepts every arrow key regardless of the group's visual layout (radio groups\n // may render horizontally or vertically via CSS) — RTL mirroring of Left/Right still\n // applies via `direction` since nav.ts's default keymap covers 'both' too.\n loop: true,\n onNavigate: ({ event, item }) => {\n item.focus();\n selectRadio(item, event);\n },\n orientation: 'both',\n signal: lifecycleSignal(onCleanup),\n });\n\n const activateSelf = (originalEvent?: Event): void => {\n if (checkable.checked.value) return;\n\n if (groupCtx) {\n groupCtx.select(props.value.value ?? '', originalEvent);\n\n return;\n }\n\n checkable.toggle(originalEvent ?? new Event('change'));\n };\n\n const checkable = createCheckable({\n checked: checkedFromState,\n disabled: computed(() => props.disabled.value || Boolean(groupCtx?.disabled.value)),\n error: props.error,\n helper: props.helper,\n onToggle: (payload) => {\n setFieldChecked(el, payload.checked);\n dispatchNativeFieldEvent(el, 'input');\n dispatchNativeFieldEvent(el, 'change');\n },\n prefix: 'radio',\n signal: lifecycleSignal(onCleanup),\n value: props.value,\n });\n\n checkable.attachFormField(\n useField<string | null>({\n disabled: checkable.disabled,\n toFormValue: (v) => v,\n value: checkable.checkableFormValue,\n }),\n );\n\n const { assistiveId, checked, disabled, errorText, helperText, labelId, toggle } = checkable;\n\n defineFieldChecked(\n el,\n () => checked.value,\n (value) => {\n checked.value = value;\n },\n );\n\n bind({\n attr: {\n ariaChecked: () => (checked.value ? 'true' : 'false'),\n ariaDescribedby: () => (errorText.value || helperText.value ? assistiveId : null),\n ariaDisabled: () => (disabled.value ? 'true' : null),\n ariaInvalid: () => (errorText.value ? 'true' : null),\n ariaLabelledby: labelId,\n checked,\n color: effectiveColor,\n disabled: () => (disabled.value ? true : undefined),\n name: () => effectiveName.value || undefined,\n role: 'radio',\n size: effectiveSize,\n tabindex: () => {\n if (disabled.value) return undefined;\n\n return checked.value ? 0 : -1;\n },\n },\n class: () => ({\n 'is-checked': checked.value,\n 'is-disabled': disabled.value,\n }),\n on: {\n click: (e: MouseEvent) => {\n if (disabled.value) return;\n\n if (groupCtx) {\n groupCtx.select(props.value.value ?? '', e);\n } else {\n if (!effectiveName.value) return;\n\n if (!checked.value) {\n const radioName = props.name.value;\n const allRadios = document.querySelectorAll<HTMLElement>(`ore-radio[name=\"${radioName}\"]`);\n\n allRadios.forEach((radio) => {\n if (radio !== el) radio.removeAttribute('checked');\n });\n\n toggle(e);\n }\n }\n },\n keydown: (e: KeyboardEvent) => {\n if (e.key === ' ' || e.key === 'Enter') {\n e.preventDefault();\n activateSelf(e);\n\n return;\n }\n\n const radios = getRadioGroup();\n\n if (radios.length === 0) return;\n\n const selfIndex = radios.indexOf(el);\n\n if (selfIndex === -1) return;\n\n listControl.set(selfIndex);\n listControl.handleKeydown(e);\n },\n },\n });\n\n return html`\n <div class=\"radio-wrapper\" part=\"radio\">\n <div class=\"circle\" part=\"circle\">\n <div class=\"dot\" part=\"dot\"></div>\n </div>\n </div>\n <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n ${renderHelperRegion(assistiveId, errorText, helperText)}\n `;\n },\n styles: [\n colorThemeMixin,\n forcedColorsFormControlMixin,\n disabledStateMixin,\n coarsePointerMixin,\n sizeVariantMixin(CONTROL_SIZE_PRESET),\n componentStyles,\n ],\n});\n"],"mappings":"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"}
package/dist/radio.js CHANGED
@@ -98,16 +98,14 @@ b(O, {
98
98
  }),
99
99
  on: {
100
100
  click: (i) => {
101
- if (!A.value) {
102
- if (n) n.select(e.value.value ?? "", i);
103
- else {
104
- if (!r.value) return;
105
- if (!k.value) {
106
- let n = e.name.value;
107
- document.querySelectorAll(`ore-radio[name="${n}"]`).forEach((e) => {
108
- e !== t && e.removeAttribute("checked");
109
- }), P(i);
110
- }
101
+ if (!A.value) if (n) n.select(e.value.value ?? "", i);
102
+ else {
103
+ if (!r.value) return;
104
+ if (!k.value) {
105
+ let n = e.name.value;
106
+ document.querySelectorAll(`ore-radio[name="${n}"]`).forEach((e) => {
107
+ e !== t && e.removeAttribute("checked");
108
+ }), P(i);
111
109
  }
112
110
  }
113
111
  },
package/dist/radio.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"radio.js","names":[],"sources":["../src/inputs/radio/radio.ts"],"sourcesContent":["import { bind, define, getHost, html, inject, onCleanup, prop, useField } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { createCheckable, createListControl, elementDirection, lifecycleSignal } from '../../core';\nimport { CONTROL_SIZE_PRESET, disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n coarsePointerMixin,\n colorThemeMixin,\n disabledStateMixin,\n forcedColorsFormControlMixin,\n sizeVariantMixin,\n} from '../../styles';\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\nimport { RADIO_GROUP_CTX } from '../radio-group/radio-group';\nimport { defineFieldChecked, dispatchNativeFieldEvent, setFieldChecked } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './radio.css?inline';\n\n/** Radio component properties */\n\nexport type OreRadioEvents = {\n change: Event;\n input: Event;\n};\n\nexport type OreRadioProps = CheckableProps & {\n /** Theme color */\n color?: ThemeColor;\n /** Disable interaction */\n disabled?: boolean;\n /** Error message (marks field as invalid) */\n error?: string;\n /** Helper text displayed below the radio */\n helper?: string;\n /** Component size */\n size?: ComponentSize;\n};\n\n/**\n * A customizable radio button component for mutually exclusive selections.\n *\n * @element ore-radio\n *\n * @attr {boolean} checked - Checked state\n * @attr {boolean} disabled - Disable radio interaction\n * @attr {string} value - Field value (required for radio groups)\n * @attr {string} name - Form field name (required for radio groups)\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Radio size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the radio\n *\n * @fires input - Emitted when radio is selected.\n * @fires change - Emitted when radio is selected.\n *\n * @slot - Radio button label text\n *\n * @cssprop --radio-size - Control size (width and height)\n * @cssprop --radio-bg - Unchecked background color\n * @cssprop --radio-border-color - Unchecked border color\n * @cssprop --radio-checked-bg - Selected indicator background color\n * @cssprop --radio-color - Selected indicator dot color\n * @cssprop --radio-font-size - Label font size\n * @part radio - The radio wrapper element\n * @part circle - The visual radio circle\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-radio name=\"plan\" value=\"free\">Free</ore-radio>\n * <ore-radio name=\"plan\" value=\"pro\" checked color=\"primary\">Pro</ore-radio>\n * <ore-radio name=\"plan\" value=\"enterprise\" disabled>Enterprise</ore-radio>\n * ```\n */\nexport const RADIO_TAG = 'ore-radio' as const;\ndefine<OreRadioProps>(RADIO_TAG, {\n formAssociated: true,\n props: {\n ...themableBundle,\n ...sizableBundle,\n ...disablableBundle,\n checked: prop.bool(false),\n error: prop.string(),\n helper: prop.string(),\n name: prop.string(),\n value: prop.string(),\n },\n setup(props) {\n const el = getHost();\n\n const groupCtx = inject(RADIO_GROUP_CTX);\n const effectiveName = computed(() => groupCtx?.name.value || props.name.value || '');\n const effectiveSize = computed(() => groupCtx?.size.value ?? props.size.value);\n const effectiveColor = computed(() => groupCtx?.color.value ?? props.color.value);\n const checkedFromState = computed(() => {\n if (groupCtx) return groupCtx.value.value === props.value.value;\n\n return Boolean(props.checked.value);\n });\n\n const getRadioGroup = (): HTMLElement[] => {\n const radioName = effectiveName.value;\n\n if (!radioName) return [];\n\n return Array.from(document.querySelectorAll<HTMLElement>(`ore-radio[name=\"${radioName}\"]`)).filter(\n (r) => !r.hasAttribute('disabled'),\n );\n };\n\n const selectRadio = (radio: HTMLElement, originalEvent?: Event): void => {\n if (groupCtx) {\n groupCtx.select(radio.getAttribute('value') ?? '', originalEvent);\n\n return;\n }\n\n radio.click();\n };\n\n const listControl = createListControl({\n direction: () => elementDirection(el),\n getItems: () => getRadioGroup(),\n // 'both' accepts every arrow key regardless of the group's visual layout (radio groups\n // may render horizontally or vertically via CSS) — RTL mirroring of Left/Right still\n // applies via `direction` since nav.ts's default keymap covers 'both' too.\n loop: true,\n onNavigate: ({ event, item }) => {\n item.focus();\n selectRadio(item, event);\n },\n orientation: 'both',\n signal: lifecycleSignal(onCleanup),\n });\n\n const activateSelf = (originalEvent?: Event): void => {\n if (checkable.checked.value) return;\n\n if (groupCtx) {\n groupCtx.select(props.value.value ?? '', originalEvent);\n\n return;\n }\n\n checkable.toggle(originalEvent ?? new Event('change'));\n };\n\n const checkable = createCheckable({\n checked: checkedFromState,\n disabled: computed(() => props.disabled.value || Boolean(groupCtx?.disabled.value)),\n error: props.error,\n helper: props.helper,\n onToggle: (payload) => {\n setFieldChecked(el, payload.checked);\n dispatchNativeFieldEvent(el, 'input');\n dispatchNativeFieldEvent(el, 'change');\n },\n prefix: 'radio',\n signal: lifecycleSignal(onCleanup),\n value: props.value,\n });\n\n checkable.attachFormField(\n useField<string | null>({\n disabled: checkable.disabled,\n toFormValue: (v) => v,\n value: checkable.checkableFormValue,\n }),\n );\n\n const { assistiveId, checked, disabled, errorText, helperText, labelId, toggle } = checkable;\n\n defineFieldChecked(\n el,\n () => checked.value,\n (value) => {\n checked.value = value;\n },\n );\n\n bind({\n attr: {\n ariaChecked: () => (checked.value ? 'true' : 'false'),\n ariaDescribedby: () => (errorText.value || helperText.value ? assistiveId : null),\n ariaDisabled: () => (disabled.value ? 'true' : null),\n ariaInvalid: () => (errorText.value ? 'true' : null),\n ariaLabelledby: labelId,\n checked,\n color: effectiveColor,\n disabled: () => (disabled.value ? true : undefined),\n name: () => effectiveName.value || undefined,\n role: 'radio',\n size: effectiveSize,\n tabindex: () => {\n if (disabled.value) return undefined;\n\n return checked.value ? 0 : -1;\n },\n },\n class: () => ({\n 'is-checked': checked.value,\n 'is-disabled': disabled.value,\n }),\n on: {\n click: (e: MouseEvent) => {\n if (disabled.value) return;\n\n if (groupCtx) {\n groupCtx.select(props.value.value ?? '', e);\n } else {\n if (!effectiveName.value) return;\n\n if (!checked.value) {\n const radioName = props.name.value;\n const allRadios = document.querySelectorAll<HTMLElement>(`ore-radio[name=\"${radioName}\"]`);\n\n allRadios.forEach((radio) => {\n if (radio !== el) radio.removeAttribute('checked');\n });\n\n toggle(e);\n }\n }\n },\n keydown: (e: KeyboardEvent) => {\n if (e.key === ' ' || e.key === 'Enter') {\n e.preventDefault();\n activateSelf(e);\n\n return;\n }\n\n const radios = getRadioGroup();\n\n if (radios.length === 0) return;\n\n const selfIndex = radios.indexOf(el);\n\n if (selfIndex === -1) return;\n\n listControl.set(selfIndex);\n listControl.handleKeydown(e);\n },\n },\n });\n\n return html`\n <div class=\"radio-wrapper\" part=\"radio\">\n <div class=\"circle\" part=\"circle\">\n <div class=\"dot\" part=\"dot\"></div>\n </div>\n </div>\n <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n ${renderHelperRegion(assistiveId, errorText, helperText)}\n `;\n },\n styles: [\n colorThemeMixin,\n forcedColorsFormControlMixin,\n disabledStateMixin,\n coarsePointerMixin,\n sizeVariantMixin(CONTROL_SIZE_PRESET),\n componentStyles,\n ],\n});\n"],"mappings":"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"}
1
+ {"version":3,"file":"radio.js","names":[],"sources":["../src/inputs/radio/radio.ts"],"sourcesContent":["import { bind, define, getHost, html, inject, onCleanup, prop, useField } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { createCheckable, createListControl, elementDirection, lifecycleSignal } from '../../core';\nimport { CONTROL_SIZE_PRESET, disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n coarsePointerMixin,\n colorThemeMixin,\n disabledStateMixin,\n forcedColorsFormControlMixin,\n sizeVariantMixin,\n} from '../../styles';\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\nimport { RADIO_GROUP_CTX } from '../radio-group/radio-group';\nimport { defineFieldChecked, dispatchNativeFieldEvent, setFieldChecked } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './radio.css?inline';\n\n/** Radio component properties */\n\nexport type OreRadioEvents = {\n change: Event;\n input: Event;\n};\n\nexport type OreRadioProps = CheckableProps & {\n /** Theme color */\n color?: ThemeColor;\n /** Disable interaction */\n disabled?: boolean;\n /** Error message (marks field as invalid) */\n error?: string;\n /** Helper text displayed below the radio */\n helper?: string;\n /** Component size */\n size?: ComponentSize;\n};\n\n/**\n * A customizable radio button component for mutually exclusive selections.\n *\n * @element ore-radio\n *\n * @attr {boolean} checked - Checked state\n * @attr {boolean} disabled - Disable radio interaction\n * @attr {string} value - Field value (required for radio groups)\n * @attr {string} name - Form field name (required for radio groups)\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Radio size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the radio\n *\n * @fires input - Emitted when radio is selected.\n * @fires change - Emitted when radio is selected.\n *\n * @slot - Radio button label text\n *\n * @cssprop --radio-size - Control size (width and height)\n * @cssprop --radio-bg - Unchecked background color\n * @cssprop --radio-border-color - Unchecked border color\n * @cssprop --radio-checked-bg - Selected indicator background color\n * @cssprop --radio-color - Selected indicator dot color\n * @cssprop --radio-font-size - Label font size\n * @part radio - The radio wrapper element\n * @part circle - The visual radio circle\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-radio name=\"plan\" value=\"free\">Free</ore-radio>\n * <ore-radio name=\"plan\" value=\"pro\" checked color=\"primary\">Pro</ore-radio>\n * <ore-radio name=\"plan\" value=\"enterprise\" disabled>Enterprise</ore-radio>\n * ```\n */\nexport const RADIO_TAG = 'ore-radio' as const;\ndefine<OreRadioProps>(RADIO_TAG, {\n formAssociated: true,\n props: {\n ...themableBundle,\n ...sizableBundle,\n ...disablableBundle,\n checked: prop.bool(false),\n error: prop.string(),\n helper: prop.string(),\n name: prop.string(),\n value: prop.string(),\n },\n setup(props) {\n const el = getHost();\n\n const groupCtx = inject(RADIO_GROUP_CTX);\n const effectiveName = computed(() => groupCtx?.name.value || props.name.value || '');\n const effectiveSize = computed(() => groupCtx?.size.value ?? props.size.value);\n const effectiveColor = computed(() => groupCtx?.color.value ?? props.color.value);\n const checkedFromState = computed(() => {\n if (groupCtx) return groupCtx.value.value === props.value.value;\n\n return Boolean(props.checked.value);\n });\n\n const getRadioGroup = (): HTMLElement[] => {\n const radioName = effectiveName.value;\n\n if (!radioName) return [];\n\n return Array.from(document.querySelectorAll<HTMLElement>(`ore-radio[name=\"${radioName}\"]`)).filter(\n (r) => !r.hasAttribute('disabled'),\n );\n };\n\n const selectRadio = (radio: HTMLElement, originalEvent?: Event): void => {\n if (groupCtx) {\n groupCtx.select(radio.getAttribute('value') ?? '', originalEvent);\n\n return;\n }\n\n radio.click();\n };\n\n const listControl = createListControl({\n direction: () => elementDirection(el),\n getItems: () => getRadioGroup(),\n // 'both' accepts every arrow key regardless of the group's visual layout (radio groups\n // may render horizontally or vertically via CSS) — RTL mirroring of Left/Right still\n // applies via `direction` since nav.ts's default keymap covers 'both' too.\n loop: true,\n onNavigate: ({ event, item }) => {\n item.focus();\n selectRadio(item, event);\n },\n orientation: 'both',\n signal: lifecycleSignal(onCleanup),\n });\n\n const activateSelf = (originalEvent?: Event): void => {\n if (checkable.checked.value) return;\n\n if (groupCtx) {\n groupCtx.select(props.value.value ?? '', originalEvent);\n\n return;\n }\n\n checkable.toggle(originalEvent ?? new Event('change'));\n };\n\n const checkable = createCheckable({\n checked: checkedFromState,\n disabled: computed(() => props.disabled.value || Boolean(groupCtx?.disabled.value)),\n error: props.error,\n helper: props.helper,\n onToggle: (payload) => {\n setFieldChecked(el, payload.checked);\n dispatchNativeFieldEvent(el, 'input');\n dispatchNativeFieldEvent(el, 'change');\n },\n prefix: 'radio',\n signal: lifecycleSignal(onCleanup),\n value: props.value,\n });\n\n checkable.attachFormField(\n useField<string | null>({\n disabled: checkable.disabled,\n toFormValue: (v) => v,\n value: checkable.checkableFormValue,\n }),\n );\n\n const { assistiveId, checked, disabled, errorText, helperText, labelId, toggle } = checkable;\n\n defineFieldChecked(\n el,\n () => checked.value,\n (value) => {\n checked.value = value;\n },\n );\n\n bind({\n attr: {\n ariaChecked: () => (checked.value ? 'true' : 'false'),\n ariaDescribedby: () => (errorText.value || helperText.value ? assistiveId : null),\n ariaDisabled: () => (disabled.value ? 'true' : null),\n ariaInvalid: () => (errorText.value ? 'true' : null),\n ariaLabelledby: labelId,\n checked,\n color: effectiveColor,\n disabled: () => (disabled.value ? true : undefined),\n name: () => effectiveName.value || undefined,\n role: 'radio',\n size: effectiveSize,\n tabindex: () => {\n if (disabled.value) return undefined;\n\n return checked.value ? 0 : -1;\n },\n },\n class: () => ({\n 'is-checked': checked.value,\n 'is-disabled': disabled.value,\n }),\n on: {\n click: (e: MouseEvent) => {\n if (disabled.value) return;\n\n if (groupCtx) {\n groupCtx.select(props.value.value ?? '', e);\n } else {\n if (!effectiveName.value) return;\n\n if (!checked.value) {\n const radioName = props.name.value;\n const allRadios = document.querySelectorAll<HTMLElement>(`ore-radio[name=\"${radioName}\"]`);\n\n allRadios.forEach((radio) => {\n if (radio !== el) radio.removeAttribute('checked');\n });\n\n toggle(e);\n }\n }\n },\n keydown: (e: KeyboardEvent) => {\n if (e.key === ' ' || e.key === 'Enter') {\n e.preventDefault();\n activateSelf(e);\n\n return;\n }\n\n const radios = getRadioGroup();\n\n if (radios.length === 0) return;\n\n const selfIndex = radios.indexOf(el);\n\n if (selfIndex === -1) return;\n\n listControl.set(selfIndex);\n listControl.handleKeydown(e);\n },\n },\n });\n\n return html`\n <div class=\"radio-wrapper\" part=\"radio\">\n <div class=\"circle\" part=\"circle\">\n <div class=\"dot\" part=\"dot\"></div>\n </div>\n </div>\n <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n ${renderHelperRegion(assistiveId, errorText, helperText)}\n `;\n },\n styles: [\n colorThemeMixin,\n forcedColorsFormControlMixin,\n disabledStateMixin,\n coarsePointerMixin,\n sizeVariantMixin(CONTROL_SIZE_PRESET),\n componentStyles,\n ],\n});\n"],"mappings":"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"}
package/dist/rating.cjs CHANGED
@@ -1,4 +1,4 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./core/field-base.cjs"),i=require("./core/slider.cjs"),a=require("./shared/prop-bundles.cjs"),o=require("./inputs/shared/templates.cjs"),s=require("./inputs/shared/native-field-event.cjs"),c=require("./inputs/rating/rating.css.cjs");let l=require("@vielzeug/ore"),u=require("@vielzeug/ripple");var d=`ore-rating`;(0,l.define)(d,{formAssociated:!0,props:{...a.themableBundle,...a.sizableBundle,...a.disablableBundle,error:l.prop.string(),helper:l.prop.string(),label:l.prop.string(`Rating`),max:l.prop.number(5),name:l.prop.string(),readonly:l.prop.bool(!1),solid:l.prop.bool(!1),value:l.prop.number(0)},setup(e){let t=(0,l.getHost)(),n=(0,u.computed)(()=>{let t=Math.max(1,Number(e.max?.value)||5),n=Number(e.value?.value);return Math.min(t,Math.max(0,Number.isFinite(n)?n:0))}),a=(0,u.computed)(()=>!!e.disabled.value);s.defineFieldValue(t,()=>String(n.value),e=>{t.setAttribute(`value`,e)}),(0,l.useField)({disabled:a,value:(0,u.computed)(()=>String(n.value||0))});let c=(0,l.createStableId)(`helper`),d=r.createErrorHelperState({error:e.error,helper:e.helper}),f=(0,u.computed)(()=>d.value.errorText),p=(0,u.computed)(()=>d.value.helperText),m=(0,u.computed)(()=>f.value||p.value?c:null),h=(0,u.computed)(()=>!e.readonly?.value&&!a.value),g=(0,u.signal)(null),_=(0,u.computed)(()=>g.value??n.value),v=()=>[...t.shadowRoot?.querySelectorAll(`[data-star]`)??[]],y=i.createSliderControl({max:(0,u.computed)(()=>Number(e.max?.value)||5),min:(0,u.signal)(1),step:(0,u.signal)(1)});function b(e){let n=t.shadowRoot?.querySelector(`.sparkle-layer`),r=t.shadowRoot?.querySelector(`[data-star="${e}"]`);if(!n||!r)return;let i=r.offsetLeft+r.offsetWidth/2,a=r.offsetTop+r.offsetHeight/2;for(let e=0;e<10;e++){let t=document.createElement(`span`),r=36*e+(Math.random()*30-15),o=18+Math.random()*20,s=3+Math.random()*4,c=380+Math.random()*220;t.className=`sparkle`,t.style.cssText=[`left:${i}px`,`top:${a}px`,`--_angle:${r}deg`,`--_dist:${o}px`,`width:${s}px`,`height:${s}px`,`--_dur:${c}ms`,`animation-delay:${Math.random()*60}ms`].join(`;`),n.appendChild(t),t.addEventListener(`animationend`,()=>t.remove(),{once:!0})}}function x(r,i){if(!h.value)return;let a=Math.max(1,Number(e.max?.value)||5),o=Math.min(a,Math.max(0,r));o!==n.value&&(s.setFieldValue(t,String(o)),s.dispatchNativeFieldEvent(t,`input`),s.dispatchNativeFieldEvent(t,`change`),b(o))}function S(e,t){let n=y.nextFromKey(e.key,t);n!=null&&(e.preventDefault(),x(n,e),v()[n-1]?.focus())}let C=(0,u.computed)(()=>{let t=Number(e.max?.value)||5;return Array.from({length:t},(e,t)=>t+1)});return(0,l.bind)({attr:{size:e.size}}),l.html`
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./core/field-base.cjs"),i=require("./core/slider.cjs"),a=require("./shared/prop-bundles.cjs"),o=require("./inputs/shared/templates.cjs"),s=require("./inputs/shared/native-field-event.cjs"),c=require("./inputs/rating/rating.css.cjs");let l=require("@vielzeug/ore"),u=require("@vielzeug/ripple");var d=`ore-rating`;(0,l.define)(d,{formAssociated:!0,props:{...a.themableBundle,...a.sizableBundle,...a.disablableBundle,error:l.prop.string(),helper:l.prop.string(),label:l.prop.string(`Rating`),max:l.prop.number(5),name:l.prop.string(),readonly:l.prop.bool(!1),solid:l.prop.bool(!1),value:l.prop.number(0)},setup(e){let t=(0,l.getHost)(),n=(0,u.computed)(()=>{let t=Math.max(1,Number(e.max?.value)||5),n=Number(e.value?.value);return Math.min(t,Math.max(0,Number.isFinite(n)?n:0))}),a=(0,u.computed)(()=>!!e.disabled.value);s.defineFieldValue(t,()=>String(n.value),e=>{t.setAttribute(`value`,e)}),(0,l.useField)({disabled:a,value:(0,u.computed)(()=>String(n.value||0))});let c=(0,l.createStableId)(`helper`),d=r.createErrorHelperState({error:e.error,helper:e.helper}),f=(0,u.computed)(()=>d.value.errorText),p=(0,u.computed)(()=>d.value.helperText),m=(0,u.computed)(()=>f.value||p.value?c:null),h=(0,u.computed)(()=>!e.readonly?.value&&!a.value),g=(0,u.signal)(null),_=(0,u.computed)(()=>g.value??n.value),v=()=>[...t.shadowRoot?.querySelectorAll(`[data-star]`)??[]],y=i.createSliderControl({max:(0,u.computed)(()=>Number(e.max?.value)||5),min:(0,u.signal)(1),step:(0,u.signal)(1)});function b(e){let n=t.shadowRoot?.querySelector(`.sparkle-layer`),r=t.shadowRoot?.querySelector(`[data-star="${e}"]`);if(!n||!r)return;let i=r.offsetLeft+r.offsetWidth/2,a=r.offsetTop+r.offsetHeight/2;for(let e=0;e<10;e++){let t=document.createElement(`span`),r=360/10*e+(Math.random()*30-15),o=18+Math.random()*20,s=3+Math.random()*4,c=380+Math.random()*220;t.className=`sparkle`,t.style.cssText=[`left:${i}px`,`top:${a}px`,`--_angle:${r}deg`,`--_dist:${o}px`,`width:${s}px`,`height:${s}px`,`--_dur:${c}ms`,`animation-delay:${Math.random()*60}ms`].join(`;`),n.appendChild(t),t.addEventListener(`animationend`,()=>t.remove(),{once:!0})}}function x(r,i){if(!h.value)return;let a=Math.max(1,Number(e.max?.value)||5),o=Math.min(a,Math.max(0,r));o!==n.value&&(s.setFieldValue(t,String(o)),s.dispatchNativeFieldEvent(t,`input`),s.dispatchNativeFieldEvent(t,`change`),b(o))}function S(e,t){let n=y.nextFromKey(e.key,t);n!=null&&(e.preventDefault(),x(n,e),v()[n-1]?.focus())}let C=(0,u.computed)(()=>{let t=Number(e.max?.value)||5;return Array.from({length:t},(e,t)=>t+1)});return(0,l.bind)({attr:{size:e.size}}),l.html`
2
2
  <div
3
3
  class="stars"
4
4
  part="stars"
@@ -1 +1 @@
1
- {"version":3,"file":"rating.cjs","names":[],"sources":["../src/inputs/rating/rating.ts"],"sourcesContent":["import { bind, createStableId, define, getHost, html, prop, useField } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { createErrorHelperState, createSliderControl } from '../../core';\nimport type { ComponentSize, ThemeColor } from '../../types';\nimport '../../content/icon/icon';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, reducedMotionMixin, sizeVariantMixin } from '../../styles';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './rating.css?inline';\n\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 = createStableId('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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"}
1
+ {"version":3,"file":"rating.cjs","names":[],"sources":["../src/inputs/rating/rating.ts"],"sourcesContent":["import { bind, createStableId, define, getHost, html, prop, useField } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { createErrorHelperState, createSliderControl } from '../../core';\nimport type { ComponentSize, ThemeColor } from '../../types';\nimport '../../content/icon/icon';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, reducedMotionMixin, sizeVariantMixin } from '../../styles';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './rating.css?inline';\n\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 = createStableId('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 CHANGED
@@ -50,7 +50,7 @@ g(C, {
50
50
  if (!n || !r) return;
51
51
  let i = r.offsetLeft + r.offsetWidth / 2, a = r.offsetTop + r.offsetHeight / 2;
52
52
  for (let e = 0; e < 10; e++) {
53
- let t = document.createElement("span"), r = 36 * e + (Math.random() * 30 - 15), o = 18 + Math.random() * 20, s = 3 + Math.random() * 4, c = 380 + Math.random() * 220;
53
+ let t = document.createElement("span"), r = 360 / 10 * e + (Math.random() * 30 - 15), o = 18 + Math.random() * 20, s = 3 + Math.random() * 4, c = 380 + Math.random() * 220;
54
54
  t.className = "sparkle", t.style.cssText = [
55
55
  `left:${i}px`,
56
56
  `top:${a}px`,
@@ -1 +1 @@
1
- {"version":3,"file":"rating.js","names":[],"sources":["../src/inputs/rating/rating.ts"],"sourcesContent":["import { bind, createStableId, define, getHost, html, prop, useField } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { createErrorHelperState, createSliderControl } from '../../core';\nimport type { ComponentSize, ThemeColor } from '../../types';\nimport '../../content/icon/icon';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, reducedMotionMixin, sizeVariantMixin } from '../../styles';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './rating.css?inline';\n\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 = createStableId('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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"}
1
+ {"version":3,"file":"rating.js","names":[],"sources":["../src/inputs/rating/rating.ts"],"sourcesContent":["import { bind, createStableId, define, getHost, html, prop, useField } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { createErrorHelperState, createSliderControl } from '../../core';\nimport type { ComponentSize, ThemeColor } from '../../types';\nimport '../../content/icon/icon';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, reducedMotionMixin, sizeVariantMixin } from '../../styles';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './rating.css?inline';\n\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 = createStableId('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/refine.cjs CHANGED
@@ -629,7 +629,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
629
629
  <slot></slot>
630
630
  </ol>
631
631
  </nav>
632
- `},styles:[Me]});var Ie=new WeakMap,Le=new WeakMap,Re=(e,t)=>{let n=t.createElement(`div`);return n.setAttribute(`aria-live`,e),n.setAttribute(`aria-atomic`,`true`),n.setAttribute(`data-block-announcer`,e),n.style.cssText=se,t.body.appendChild(n),n},ze=(e,t)=>{let n=Ie.get(t);return n?.[e]&&!t.body.contains(n[e])&&(n[e]=void 0),n?.[e]||(n||(n={},Ie.set(t,n)),n[e]=Re(e,t)),n[e]??null},Be=(e,t={})=>{if(typeof document>`u`)return;let n=ze(t.politeness??`polite`,document);if(!n)return;n.textContent=``;let r=Le.get(n);r!==void 0&&clearTimeout(r);let i=setTimeout(()=>{n.textContent=e,Le.delete(n)},50);Le.set(n,i)},Ve={ariaControlsElements:`aria-controls`,ariaDescribedByElements:`aria-describedby`,ariaLabelledByElements:`aria-labelledby`};function He(e,t,n){if(t in e){e[t]=n.length>0?n:null;return}let r=Ve[t],i=n.map(e=>e.id).filter(Boolean);i.length===0?e.removeAttribute(r):e.setAttribute(r,i.join(` `))}var Ue=(e={})=>{let t=null,n=()=>{!t||e.enabled?.value===!1||(t.style.height=`auto`,t.style.height=`${t.scrollHeight}px`)};return{recompute:n,wire:e=>(t=e,e.addEventListener(`input`,n),requestAnimationFrame(n),()=>{e.removeEventListener(`input`,n),t===e&&(t=null)})}},We=e=>(0,u.computed)(()=>({errorText:e.error?.value??``,helperText:e.helper?.value??``})),Ge=e=>(0,u.computed)(()=>{let t=e.value?.value??``,n=e.maxLength?.value,r=Number(n),i=Number.isFinite(r)&&r>0?r:null,a=i!==null,o=a?`${t.length} / ${i}`:``,s=a?t.length/i:0;return{counterAtLimit:a?s>=1:!1,counterNearLimit:a?s>=.9&&s<1:!1,counterText:o}}),Ke=(e,t=`counter`)=>e?e.counterAtLimit?`${t} at-limit`:e.counterNearLimit?`${t} near-limit`:t:t;function qe(){let e=!1;return{clear:()=>{e=!1},get isDirty(){return e},markDirty:()=>{e=!0}}}var Je=e=>{let t=(0,u.computed)(()=>!!e.disabled?.value),n=(0,l.createStableId)(`helper`),r=(0,l.createStableId)(`error`),i=We({error:e.error,helper:e.helper}),a=(0,u.computed)(()=>i.value.errorText||i.value.helperText?n:null),o=(0,u.computed)(()=>i.value.errorText?r:null),s=(0,u.computed)(()=>i.value.errorText?`true`:null),c=null;return{ariaDescribedBy:a,ariaErrorMessage:o,ariaInvalid:s,assistiveId:n,attachFormField:e=>{c=e},disabled:t,errorId:r,errorText:(0,u.computed)(()=>i.value.errorText),helperText:(0,u.computed)(()=>i.value.helperText),triggerValidation:t=>{e.validateOn?.value===t&&c&&c.reportValidity()}}},Ye=e=>{let t=e.id??(0,l.createStableId)(e.prefix??`field`),n=(0,l.createStableId)(`label`),r=e.label??(0,u.computed)(()=>void 0),i=e.hasLabel??(0,u.computed)(()=>!!r.value);return{ariaLabelledBy:(0,u.computed)(()=>i.value?n:null),fieldId:t,labelId:n,labelVisible:i}},Xe=e=>({...Je(e),...Ye(e)}),Ze=(e,t)=>{if(t.disabled?.value)return!1;let n=Object.hasOwn(t.keymap,e.key)?t.keymap[e.key]:void 0;if(!n)return!1;let r=t.preventDefault??`before`;r===`before`&&e.preventDefault();let i=n(e)!==!1;return r===`after`&&i&&e.preventDefault(),i},Qe=e=>{let t=()=>!!e.disabled?.value,n=e.keys??[`Enter`,` `],r=Object.fromEntries(n.map(t=>[t,t=>e.onPress?.(t,`keyboard`)]));return{handleBlur:n=>{t()||e.onBlur?.(n)},handleClick:n=>!t()&&(e.onPress?.(n,`pointer`),!0),handleFocus:n=>{t()||e.onFocus?.(n)},handleKeydown:t=>Ze(t,{disabled:e.disabled,keymap:r})}},$e=(e,t,n=e=>e)=>{let r=(0,u.signal)((0,u.untrack)(()=>n(e.value))),i=(0,u.watch)(e,e=>{r.value=n(e)});return t&&t.addEventListener(`abort`,()=>i.dispose(),{once:!0}),r},et=e=>{let t=$e(e.checked,e.signal,Boolean),n=e.indeterminate?$e(e.indeterminate,e.signal,Boolean):(0,u.signal)(!1),r=t.value,i=n.value,a=qe(),o=(0,u.computed)(()=>n.value?null:t.value?e.value.value??``:null),s=Xe(e),c=(0,u.computed)(()=>e.required?.value&&(!t.value||n.value)?{valueMissing:!0}:null),l=(0,u.computed)(()=>c.value?e.requiredMessage?.value||`This field is required.`:``),d=()=>{t.value=a.isDirty?r:!!e.checked.value,n.value=a.isDirty?i:!!e.indeterminate?.value,a.clear(),s.triggerValidation(`change`)},f=n=>({checked:t.value,originalEvent:n,value:e.value.value??``}),p=r=>{if(!s.disabled.value){if(a.markDirty(),e.group){n.value=!1,e.group.toggle(e.value.value??``,r),e.onToggle?.(f(r));return}e.clearIndeterminateFirst&&n.value||(t.value=!t.value),n.value=!1,e.onToggle?.(f(r))}},m=Qe({disabled:s.disabled,onPress:e=>p(e)});return{...s,checkableFormValue:o,checked:t,handleClick:m.handleClick,handleKeydown:m.handleKeydown,indeterminate:n,reset:d,toggle:p,validationMessage:l,validity:c}},tt=e=>e?Array.isArray(e)?e.filter(Boolean):e.split(`,`).map(e=>e.trim()).filter(Boolean):[],nt=e=>{let t=(0,u.computed)(()=>!!e.multiple?.value),n=e=>{let n=t.value?e:e.slice(0,1);return[...new Set(n.filter(Boolean))]},r=$e(e.value,e.signal,e=>n(tt(e))),i=(0,u.computed)(()=>t.value?r.value.join(`,`):r.value[0]??``),a=qe(),o=e=>{r.value=n(e)},s=e=>{a.markDirty(),o(e)},c=()=>s([]),l=e=>{a.markDirty(),r.value=r.value.filter(t=>t!==e)},d=e=>{if(t.value){r.value.includes(e)||s([...r.value,e]);return}s([e])},f=e=>{t.value&&r.value.includes(e)?l(e):d(e)},p=e=>{o(tt(e))},m=Xe(e),h=(0,u.computed)(()=>e.required?.value&&r.value.length===0?{valueMissing:!0}:null),g=(0,u.computed)(()=>h.value?e.requiredMessage?.value||`Please make a selection.`:``);if(e.multiple){let t=(0,u.watch)(e.multiple,()=>p(e.value.value));e.signal.addEventListener(`abort`,()=>t.dispose(),{once:!0})}let _=r.value,v=()=>{o(a.isDirty?_:tt(e.value.value)),a.clear(),m.triggerValidation(`change`)};return{...m,clear:c,formValue:i,removeValue:l,reset:v,selectedValue:(0,u.computed)(()=>r.value[0]),selectedValues:r,selectValue:d,setValues:s,toggleValue:f,validationMessage:g,validity:h}},rt=e=>!e||e.trim()===``,it=e=>{let t=(0,u.computed)(()=>!rt(e.value.value)&&!e.disabled?.value&&!e.loading?.value),n=n=>{t.value&&e.onSend(n)};return{canSend:t,handleKeydown:t=>{if(t.key!==`Enter`||t.isComposing)return;let r=e.sendShortcut?.value??`enter`,i=t.metaKey||t.ctrlKey;(r===`mod+enter`?!i:t.shiftKey)||(t.preventDefault(),n(t))},keyShortcutsHint:(0,u.computed)(()=>(e.sendShortcut?.value??`enter`)===`mod+enter`?`Control+Enter Meta+Enter`:`Enter`),send:n}};function at(e){if(!e)return null;try{return(0,f.parse)(e,{as:`plainDate`})}catch{return null}}function ot(e){return e?e.toString():null}function st(e,t){return(0,f.format)(e,{intl:{day:`numeric`,month:`short`,year:`numeric`},locale:t,timeZone:`UTC`})}function ct(){return f.Temporal.Now.plainDateISO()}function lt(e){return e%7}function ut(e){let t=e.value??null,n=`day`,r=t??ct(),i=r.year,a=r.month;function o(){return e.locale??(typeof navigator<`u`?navigator.language:`en`)}function s(){return e.weekendDays??[]}function c(t){return!!(e.min&&f.Temporal.PlainDate.compare(t,e.min)<0||e.max&&f.Temporal.PlainDate.compare(t,e.max)>0)}function l(e){return!!(c(e)||s().includes(lt(e.dayOfWeek)))}function u(){let e=ct(),n=f.Temporal.PlainDate.from({day:1,month:a,year:i}),r=lt(n.dayOfWeek),o=[];for(let i=r-1;i>=0;i--){let r=n.subtract({days:i+1});o.push({day:r.day,isDisabled:l(r),isOutsideMonth:!0,iso:r.toString(),isSelected:t!==null&&f.Temporal.PlainDate.compare(r,t)===0,isToday:f.Temporal.PlainDate.compare(r,e)===0,plain:r})}let s=n.daysInMonth;for(let n=1;n<=s;n++){let r=f.Temporal.PlainDate.from({day:n,month:a,year:i});o.push({day:n,isDisabled:l(r),isOutsideMonth:!1,iso:r.toString(),isSelected:t!==null&&f.Temporal.PlainDate.compare(r,t)===0,isToday:f.Temporal.PlainDate.compare(r,e)===0,plain:r})}let c=(7-o.length%7)%7,u=n.add({months:1});for(let n=0;n<c;n++){let r=u.add({days:n});o.push({day:r.day,isDisabled:l(r),isOutsideMonth:!0,iso:r.toString(),isSelected:t!==null&&f.Temporal.PlainDate.compare(r,t)===0,isToday:f.Temporal.PlainDate.compare(r,e)===0,plain:r})}return o}function d(){let n=[],r=o();for(let a=1;a<=12;a++){let o=f.Temporal.PlainDate.from({day:1,month:a,year:i}),s=o.with({day:o.daysInMonth}),c=e.min!==null&&e.min!==void 0&&f.Temporal.PlainDate.compare(s,e.min)<0||e.max!==null&&e.max!==void 0&&f.Temporal.PlainDate.compare(o,e.max)>0;n.push({isDisabled:c,isSelected:t!==null&&t.year===i&&t.month===a,label:(0,f.format)(o,{intl:{month:`long`},locale:r,timeZone:`UTC`}),month:a,shortLabel:(0,f.format)(o,{intl:{month:`short`},locale:r,timeZone:`UTC`})})}return n}function p(){let n=Math.floor(i/10)*10,r=[];for(let i=n;i<n+12;i++){let n=f.Temporal.PlainDate.from({day:1,month:1,year:i}),a=f.Temporal.PlainDate.from({day:31,month:12,year:i}),o=e.min!==null&&e.min!==void 0&&f.Temporal.PlainDate.compare(a,e.min)<0||e.max!==null&&e.max!==void 0&&f.Temporal.PlainDate.compare(n,e.max)>0;r.push({isDisabled:o,isSelected:t!==null&&t.year===i,year:i})}return r}function m(){let e=(0,f.parse)(`2024-01-07`,{as:`plainDate`}),t=o();return Array.from({length:7},(n,r)=>(0,f.format)(e.add({days:r}),{intl:{weekday:`short`},locale:t,timeZone:`UTC`}))}return{dayCells:u,displayMonth:()=>a,displayYear:()=>i,goTo(e,t){Number.isFinite(e)&&(i=e,a=Math.max(1,Math.min(12,t)))},monthCells:d,nextMonth(){a===12?(a=1,i++):a++},nextYear(){i++},prevMonth(){a===1?(a=12,i--):a--},prevYear(){i--},select(n){n!==null&&l(n)||(t=n,t&&(i=t.year,a=t.month),e.onChange(t))},selected:()=>t,setView(e){n=e},view:()=>n,weekdayLabels:m,yearCells:p}}function dt(e){let t=null,n=null,r=!1,i=()=>{n!==null&&(cancelAnimationFrame(n),n=null)},a=()=>{r||(r=!0,i(),t=null)};return e.signal?.addEventListener(`abort`,a,{once:!0}),{applyInitialFocus(){i();let t=e.getInitialFocusSelector();if(t){let r=e.host.shadowRoot??e.host,i=null;try{i=r.querySelector(t)}catch{return}i&&(n=requestAnimationFrame(()=>{n=null,i.focus()}))}},cancelInitialFocus:i,captureReturnFocus(){t=(0,p.captureFocus)()},dispose:a,get disposed(){return r},restoreFocus(){e.getReturnFocus()!==!1&&t?.(),t=null},[Symbol.dispose]:a}}var ft=(e,t)=>Array.from(e.getElementsByTagName(t)),pt=(e,t)=>e.find(e=>(e.getAttribute(`value`)??``)===t)?.textContent?.replace(/\s+/g,` `).trim()||t,mt=e=>{let t=Number(e);return Number.isFinite(t)?t:void 0},ht=(e,t)=>mt(e)??t,gt=(e,t)=>Math.abs(ht(e,t))||t,Y=e=>{let t=new AbortController;return e(()=>t.abort()),t.signal},_t=e=>{let t=t=>{if(!e.isActive())return;let n=t.composedPath(),r=n[0]instanceof Node?n[0]:t.target instanceof Node?t.target:null;e.getTargets().some(e=>e!=null&&(n.includes(e)||!!(r&&e.contains(r))))||e.onDismiss()},n=()=>{document.removeEventListener(`pointerdown`,t,{capture:!0})};return document.addEventListener(`pointerdown`,t,{capture:!0}),e.signal.addEventListener(`abort`,n,{once:!0}),n},vt=(e,t)=>{e.value?.(t);let n=(0,u.watch)(e,e=>e?.(t));return()=>{n.dispose(),e.value?.(null)}};function yt(e,t,n){return t!=null&&e<t?t:n!=null&&e>n?n:e}var bt=e=>{let t=()=>ht(e.min?.value,0),n=()=>ht(e.max?.value,100),r=()=>gt(e.step?.value,1),i=e=>{let r=t(),i=n();return yt(ht(e,r),r,i)},a=e=>{let n=t();return i(Math.round(ht(e,n)/r())*r())},o=e=>{let r=t(),i=n(),a=ht(e,r);return i<=r?0:(a-r)/(i-r)*100},s=(e,r)=>{if(r.width<=0)return a(t());let i=Math.max(0,Math.min(1,(e-r.left)/r.width)),o=t(),s=n();return a(o+i*(s-o))},c=(e,a)=>{let o=ht(a,t());return e===`ArrowRight`||e===`ArrowUp`?i(o+r()):e===`ArrowLeft`||e===`ArrowDown`?i(o-r()):e===`Home`?t():e===`End`?n():null};return{clamp:i,fromClientX:s,handleKeydown:(t,n,r)=>{if(e.disabled?.value||e.readonly?.value)return!1;let i=c(t.key,n);return i!==null&&(t.preventDefault(),r(i),!0)},max:n,min:t,nextFromKey:c,snap:a,toPercent:o}},xt=e=>{let t=()=>!!e.disabled?.value||!!e.readonly?.value,n=()=>mt(e.min?.value),r=()=>mt(e.max?.value),i=e=>yt(e,n(),r()),a=()=>gt(e.step?.value,1),o=()=>{let t=a();return gt(e.largeStep?.value,t*10)},s=()=>e.parse()??n()??0,c=(t,n)=>{if(t==null){e.commit(null,n);return}e.commit(i(t),n)},l=(e,n)=>{t()||c(s()+e,n)};return{atMax:()=>{let t=e.parse(),n=r();return t!=null&&n!=null&&t>=n},atMin:()=>{let t=e.parse(),r=n();return t!=null&&r!=null&&t<=r},handleKeydown:e=>!t()&&Ze(e,{keymap:{ArrowDown:()=>l(-a(),e),ArrowUp:()=>l(a(),e),End:()=>{let t=r();if(t==null)return!1;c(t,e)},Home:()=>{let t=n();if(t==null)return!1;c(t,e)},PageDown:()=>l(-o(),e),PageUp:()=>l(o(),e)},preventDefault:`after`}),incrementBy:l}},St=e=>e.trim()===``,Ct=e=>String(e??``),wt=e=>{let t=$e(e.value,e.signal,Ct),n=Xe(e),r=e.maxLength?Ge({maxLength:e.maxLength,value:t}):null,i=(0,u.computed)(()=>!e.readonly?.value&&e.required?.value&&St(t.value)?{valueMissing:!0}:null),a=(0,u.computed)(()=>i.value?e.requiredMessage?.value||`This field is required.`:``),o=()=>{t.value=Ct(e.value.value),n.triggerValidation(`change`)},s=r=>{r?.preventDefault?.(),t.value=``,e.onInput?.(r??new InputEvent(`input`,{bubbles:!0}),``),e.onChange?.(r??new Event(`change`,{bubbles:!0}),``),n.triggerValidation(`change`)},c=(r,i)=>{let a=[],o=(e,t)=>{r.addEventListener(e,t),a.push(()=>r.removeEventListener(e,t))};e.onFocus&&o(`focus`,t=>e.onFocus?.(t)),o(`input`,n=>{n.stopPropagation(),e.onBeforeInput?.(n),t.value=r.value,e.onInput?.(n,r.value)}),o(`change`,i=>{i.stopPropagation(),t.value=r.value,e.onChange?.(i,r.value),n.triggerValidation(`change`)}),o(`blur`,t=>{e.onBlur?.(t),n.triggerValidation(`blur`)});let s=!1,c=()=>{if(!s){s=!0;for(let e of a)e()}};return i?.addEventListener(`abort`,c,{once:!0}),c};return{...n,clear:s,counter:r,reset:o,validationMessage:a,validity:i,value:t,wire:c}};function Tt(e){let t=e;for(;t;){let e=t.getAttribute(`dir`);if(e===`rtl`||e===`ltr`)return e;t=t.parentElement}return e!==null&&getComputedStyle(e).direction===`rtl`?`rtl`:`ltr`}var X=e=>{let t=(0,u.signal)(-1),n,r=(0,p.createListNavigation)({direction:e.direction,disabled:()=>!!e.disabled?.value,getItems:e.getItems,isItemDisabled:e.isItemDisabled,keys:e.keys,loop:e.loop,onNavigate:n=>{t.value=n.index,e.onNavigate?.(n)},orientation:e.orientation,typeahead:e.typeahead}),i=()=>{t.value=r.getIndex()},a=e=>{let t=r.set(e);return i(),t},o=e=>{let t=r.navigate(e);return i(),t},s=()=>{r.reset(),i()},c=e=>{let t=r.handleKeydown(e);return i(),t},l=()=>{r.dispose(),i(),n?.(),n=void 0};return e.signal?.aborted?l():e.signal&&(e.signal?.addEventListener(`abort`,l,{once:!0}),n=()=>e.signal?.removeEventListener(`abort`,l)),{dispose:l,get disposed(){return r.disposed},focusedIndex:t,getActiveItem:()=>r.getActiveItem(),handleKeydown:c,navigate:o,reset:s,set:a,[Symbol.dispose]:l}},Et=class e extends Error{constructor(e,t){super(e,t),this.name=new.target.name,Object.setPrototypeOf(this,new.target.prototype)}static is(t){return t instanceof e}},Dt=class extends Et{},Ot=e=>e.endsWith(`-start`)?e.replace(`-start`,`-end`):e.endsWith(`-end`)?e.replace(`-end`,`-start`):e;function kt({boundary:e,getDir:t,getFloating:n,getPlacement:r,getReference:i,matchWidth:a=!0,offsetPx:o=0,padding:s=6,useClippingAncestor:c=!0}){function l(){let e=r?.()??`bottom-start`;return(t?.()??Tt(i()))===`rtl`?Ot(e):e}function u(){let t=i(),r=n();if(!t||!r)return;let u=l(),d=e??(c?(0,m.getClippingAncestorRect)(r):void 0),f=(0,m.computePosition)(t,r,{boundary:d,middleware:[...o?[(0,m.offset)(o)]:[],(0,m.flip)({padding:s}),(0,m.shift)({padding:s}),...a?[(0,m.size)({padding:s})]:[]],placement:u});r.style.left=`${f.x}px`,r.style.top=`${f.y}px`;let p=r.style.transition,h=r.style.transform;r.style.transition=`none`,r.style.transform=`none`;let g=r.getBoundingClientRect(),_=f.x-g.left,v=f.y-g.top;r.style.transition=p,r.style.transform=h,(_!==0||v!==0)&&(r.style.left=`${f.x+_}px`,r.style.top=`${f.y+v}px`),a&&(r.style.width=`${t.getBoundingClientRect().width}px`)}function d(){let e=i(),t=n();return!e||!t?()=>{}:(0,m.autoUpdate)(e,t,u)}return{floating:n,reference:i,startAutoUpdate:d,update:u}}var At=e=>{if(typeof e.getBoundary!=`function`)throw new Dt(`createListboxDropdown: getBoundary is required`);if(typeof e.getPanel!=`function`)throw new Dt(`createListboxDropdown: getPanel is required`);if(typeof e.getReference!=`function`)throw new Dt(`createListboxDropdown: getReference is required`);let t=(0,u.signal)(!1),n=(0,u.computed)(()=>String(t.value)),r=null,i=kt({...e.positioning,getFloating:e.getPanel,getReference:e.getReference}),a=()=>{e.getFocusedOptionElement?.()?.scrollIntoView({block:`nearest`})},o=X({disabled:(0,u.computed)(()=>!t.value),getItems:e.getItems,isItemDisabled:e.isItemDisabled,keys:e.keys,loop:e.loop??!0,onNavigate:t=>{a(),e.onNavigate?.(t)},orientation:e.orientation,signal:e.signal,typeahead:e.typeahead}),s=(0,u.computed)(()=>{let n=o.focusedIndex.value;return e.getOptionId&&t.value&&n>=0?e.getOptionId(n):null}),c=()=>typeof e.restoreFocus==`function`?e.restoreFocus():e.restoreFocus??!0,l=(n=`programmatic`,i=!0)=>{t.value&&(t.value=!1,o.reset(),r?.(),r=null,i&&c()&&e.getTrigger&&(0,p.restoreFocus)(e.getTrigger),e.onClose?.(n))},d=(n=`programmatic`)=>{e.isDisabled?.()||t.value||(t.value=!0,i.update(),r=i.startAutoUpdate?.()??null,e.onOpen?.(n))},f=(e=`click`,n=`trigger`)=>{t.value?l(n):d(e)};_t({getTargets:()=>[e.getBoundary(),e.getPanel()],isActive:()=>t.value,onDismiss:()=>l(`outsideClick`),signal:e.signal});let m=!1,h=()=>{m||(m=!0,t.value&&(t.value=!1,o.reset(),r?.(),r=null))};return e.signal.addEventListener(`abort`,h,{once:!0}),{ariaActiveDescendant:s,ariaExpanded:n,close:l,dispose:h,get disposed(){return m},focusedIndex:o.focusedIndex,getActiveItem:o.getActiveItem,handleKeydown:e=>t.value?e.key===`Escape`?(e.preventDefault(),l(`escape`),!0):o.handleKeydown(e):!1,isOpen:t,navigate:o.navigate,open:d,scrollFocusedIntoView:a,set:o.set,[Symbol.dispose]:h,toggle:f,updatePosition:i.update}},jt=(e,t,n)=>{let r=String(e??``).split(`,`).map(e=>e.trim()).filter(e=>t.has(e));return r.length>0?r:[...n]},Mt=`@layer refine.base{:host{--_bg:var(--card-bg,var(--color-canvas));--_color:var(--card-color,var(--color-contrast-900));--_border:var(--card-border,var(--border));--_border-color:var(--card-border-color,var(--color-divider));--_radius:var(--card-radius,var(--rounded-lg));--_padding:var(--card-padding,var(--size-4));--_shadow:var(--card-shadow,var(--shadow-sm));--_hover-shadow:var(--card-hover-shadow,var(--shadow-md));flex-direction:column;display:flex;position:relative}.card{color:var(--_color);background:var(--_bg);border-radius:var(--_radius);-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transition:box-shadow var(--transition-normal), transform var(--transition-normal), background var(--transition-normal), border-color var(--transition-normal);flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.card-media{flex-shrink:0;overflow:hidden}.card-media img{object-fit:cover;width:100%;height:auto;display:block}.card-body{flex-direction:column;flex:1;min-height:0;display:flex}.card-header,.card-content,.card-footer{padding:var(--_padding)}.card-header{padding-bottom:calc(var(--_padding) / 2)}.card-footer{padding-top:calc(var(--_padding) / 2)}.card-content{flex:1}.card-actions{gap:var(--size-2);padding:var(--_padding);padding-top:calc(var(--_padding) / 2);flex-wrap:wrap;align-items:center;display:flex}[hidden]{display:none}}@layer refine.variants{:host(:not([variant],[color])){--_shadow:var(--card-shadow,var(--shadow-sm))}:host(:not([variant],[color])) .card{border:var(--_border) solid var(--_border-color);box-shadow:var(--_shadow)}:host(:not([variant])[color]){--_bg:var(--card-bg,var(--_theme-backdrop));--_border-color:var(--card-border-color,var(--_theme-border))}:host(:not([variant])[color]) .card{border:var(--_border) solid var(--_border-color)}:host(:not([variant])[color]:hover){--_bg:var(--card-bg,color-mix(in oklch, var(--_theme-base) 16%, var(--color-contrast-50)));--_border-color:var(--card-border-color,var(--_theme-focus))}:host([variant=solid]){--_bg:var(--card-bg,var(--_theme-base));--_color:var(--card-color,var(--_theme-contrast));--_border-color:var(--card-border-color,var(--_theme-base));--_shadow:var(--card-shadow,var(--shadow-sm))}:host([variant=solid]) .card{border:var(--_border) solid var(--_border-color);box-shadow:var(--_shadow)}:host([variant=flat]){--_border-color:var(--card-border-color,color-mix(in oklch, var(--_theme-border) 50%, transparent))}:host([variant=flat]) .card{border:var(--_border) solid var(--_border-color)}:host([variant=glass]) .card{text-shadow:var(--text-shadow-xs);border:var(--_border) solid var(--_border-color);box-shadow:var(--card-shadow,var(--shadow-md)), var(--inset-shadow-xs);-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(180%) brightness(1.05);backdrop-filter:blur(var(--blur-lg)) saturate(180%) brightness(1.05)}:host([variant=glass]:hover) .card{box-shadow:var(--card-hover-shadow,var(--shadow-xl)), var(--inset-shadow-sm);-webkit-backdrop-filter:blur(var(--blur-xl)) saturate(200%) brightness(1.1);backdrop-filter:blur(var(--blur-xl)) saturate(200%) brightness(1.1)}:host([variant=glass][interactive]:hover) .card{box-shadow:var(--card-hover-shadow,var(--shadow-2xl)), var(--inset-shadow-sm)}}@layer refine.overrides{.loading-bar{background:linear-gradient(90deg, transparent 0%, var(--_theme-base,var(--color-primary)) 50%, transparent 100%);width:65%;height:3px;display:none;position:absolute;top:0}.loading-bar:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}.loading-bar:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}:host([loading]) .loading-bar{animation:var(--_motion-animation,loading-bar 1.4s linear infinite);display:block}:host(:dir(rtl)[loading]) .loading-bar{animation-direction:reverse}:host([disabled]){pointer-events:none;opacity:.6}:host([disabled][interactive]) .card{cursor:not-allowed}:host([interactive]:not([disabled]):hover) .card{box-shadow:var(--_hover-shadow);transform:translateY(-2px)scale(1.01)}:host([interactive]) .card{cursor:pointer;will-change:transform}:host[interactive]:not([disabled]):active:not(:has(button:active,a[href]:active,input:active,select:active,textarea:active,summary:active,[role=button]:active,[role=link]:active)) .card{box-shadow:var(--_shadow);transition:box-shadow var(--transition-fast), transform .12s var(--ease-spring);transform:translateY(0)scale(.99)}:host([interactive]:focus-visible) .card{outline:var(--border-2) solid var(--_theme-focus,var(--color-primary));outline-offset:var(--border-2)}:host([orientation=horizontal]) .card{flex-direction:row}:host([orientation=horizontal]) .card-media{width:30%;min-width:192px;max-width:320px}:host([orientation=horizontal]) .card-media img{object-fit:cover;width:100%;height:100%}:host([orientation=horizontal]) .card-body{flex:1}}@keyframes loading-bar{0%{transform:translate(-100%)}to{transform:translate(200%)}}`,Nt=`button, a[href], input, select, textarea, summary, [role="button"], [role="link"], [contenteditable=""], [contenteditable="true"]`;function Pt(e,t){for(let n of t.composedPath())if(n instanceof HTMLElement){if(n===e)return!1;if(n.matches(Nt)||n.closest(Nt))return!0}return!1}var Ft=`ore-card`;(0,l.define)(Ft,{props:{...P,...I,...L,elevation:l.prop.number(),interactive:l.prop.bool(!1),orientation:l.prop.string(),padding:l.prop.string(),variant:l.prop.string()},setup(e){let t=(0,l.getHost)(),n=(0,l.useEmit)(),r=(0,l.useSlots)(),i=l.watchEffect;(0,l.bind)({attr:{ariaBusy:()=>e.loading.value?`true`:`false`,ariaDisabled:()=>e.interactive.value?String(e.disabled.value):null,role:()=>e.interactive.value?`button`:null}}),i(()=>{e.interactive.value?t.setAttribute(`tabindex`,e.disabled.value?`-1`:`0`):t.removeAttribute(`tabindex`)});let a=Qe({disabled:(0,u.computed)(()=>!e.interactive.value||!!e.disabled.value),onPress:(e,t)=>{n(`activate`,{originalEvent:e,trigger:t})}}),o=n=>{!e.interactive.value||e.disabled.value||Pt(t,n)||a.handleClick(n)},s=e=>{a.handleKeydown(e)};return(0,l.bind)({on:{click:e=>o(e),keydown:e=>s(e)}}),l.html`
632
+ `},styles:[Me]});var Ie=new WeakMap,Le=new WeakMap,Re=(e,t)=>{let n=t.createElement(`div`);return n.setAttribute(`aria-live`,e),n.setAttribute(`aria-atomic`,`true`),n.setAttribute(`data-block-announcer`,e),n.style.cssText=se,t.body.appendChild(n),n},ze=(e,t)=>{let n=Ie.get(t);return n?.[e]&&!t.body.contains(n[e])&&(n[e]=void 0),n?.[e]||(n||(n={},Ie.set(t,n)),n[e]=Re(e,t)),n[e]??null},Be=(e,t={})=>{if(typeof document>`u`)return;let n=ze(t.politeness??`polite`,document);if(!n)return;n.textContent=``;let r=Le.get(n);r!==void 0&&clearTimeout(r);let i=setTimeout(()=>{n.textContent=e,Le.delete(n)},50);Le.set(n,i)},Ve={ariaControlsElements:`aria-controls`,ariaDescribedByElements:`aria-describedby`,ariaLabelledByElements:`aria-labelledby`};function He(e,t,n){if(t in e){e[t]=n.length>0?n:null;return}let r=Ve[t],i=n.map(e=>e.id).filter(Boolean);i.length===0?e.removeAttribute(r):e.setAttribute(r,i.join(` `))}var Ue=(e={})=>{let t=null,n=()=>{!t||e.enabled?.value===!1||(t.style.height=`auto`,t.style.height=`${t.scrollHeight}px`)};return{recompute:n,wire:e=>(t=e,e.addEventListener(`input`,n),requestAnimationFrame(n),()=>{e.removeEventListener(`input`,n),t===e&&(t=null)})}},We=e=>(0,u.computed)(()=>({errorText:e.error?.value??``,helperText:e.helper?.value??``})),Ge=e=>(0,u.computed)(()=>{let t=e.value?.value??``,n=e.maxLength?.value,r=Number(n),i=Number.isFinite(r)&&r>0?r:null,a=i!==null,o=a?`${t.length} / ${i}`:``,s=a?t.length/i:0;return{counterAtLimit:a?s>=1:!1,counterNearLimit:a?s>=.9&&s<1:!1,counterText:o}}),Ke=(e,t=`counter`)=>e?e.counterAtLimit?`${t} at-limit`:e.counterNearLimit?`${t} near-limit`:t:t;function qe(){let e=!1;return{clear:()=>{e=!1},get isDirty(){return e},markDirty:()=>{e=!0}}}var Je=e=>{let t=(0,u.computed)(()=>!!e.disabled?.value),n=(0,l.createStableId)(`helper`),r=(0,l.createStableId)(`error`),i=We({error:e.error,helper:e.helper}),a=(0,u.computed)(()=>i.value.errorText||i.value.helperText?n:null),o=(0,u.computed)(()=>i.value.errorText?r:null),s=(0,u.computed)(()=>i.value.errorText?`true`:null),c=null;return{ariaDescribedBy:a,ariaErrorMessage:o,ariaInvalid:s,assistiveId:n,attachFormField:e=>{c=e},disabled:t,errorId:r,errorText:(0,u.computed)(()=>i.value.errorText),helperText:(0,u.computed)(()=>i.value.helperText),triggerValidation:t=>{e.validateOn?.value===t&&c&&c.reportValidity()}}},Ye=e=>{let t=e.id??(0,l.createStableId)(e.prefix??`field`),n=(0,l.createStableId)(`label`),r=e.label??(0,u.computed)(()=>void 0),i=e.hasLabel??(0,u.computed)(()=>!!r.value);return{ariaLabelledBy:(0,u.computed)(()=>i.value?n:null),fieldId:t,labelId:n,labelVisible:i}},Xe=e=>({...Je(e),...Ye(e)}),Ze=(e,t)=>{if(t.disabled?.value)return!1;let n=Object.hasOwn(t.keymap,e.key)?t.keymap[e.key]:void 0;if(!n)return!1;let r=t.preventDefault??`before`;r===`before`&&e.preventDefault();let i=n(e)!==!1;return r===`after`&&i&&e.preventDefault(),i},Qe=e=>{let t=()=>!!e.disabled?.value,n=e.keys??[`Enter`,` `],r=Object.fromEntries(n.map(t=>[t,t=>e.onPress?.(t,`keyboard`)]));return{handleBlur:n=>{t()||e.onBlur?.(n)},handleClick:n=>!t()&&(e.onPress?.(n,`pointer`),!0),handleFocus:n=>{t()||e.onFocus?.(n)},handleKeydown:t=>Ze(t,{disabled:e.disabled,keymap:r})}},$e=(e,t,n=e=>e)=>{let r=(0,u.signal)((0,u.untrack)(()=>n(e.value))),i=(0,u.watch)(e,e=>{r.value=n(e)});return t&&t.addEventListener(`abort`,()=>i.dispose(),{once:!0}),r},et=e=>{let t=$e(e.checked,e.signal,Boolean),n=e.indeterminate?$e(e.indeterminate,e.signal,Boolean):(0,u.signal)(!1),r=t.value,i=n.value,a=qe(),o=(0,u.computed)(()=>n.value?null:t.value?e.value.value??``:null),s=Xe(e),c=(0,u.computed)(()=>e.required?.value&&(!t.value||n.value)?{valueMissing:!0}:null),l=(0,u.computed)(()=>c.value?e.requiredMessage?.value||`This field is required.`:``),d=()=>{t.value=a.isDirty?r:!!e.checked.value,n.value=a.isDirty?i:!!e.indeterminate?.value,a.clear(),s.triggerValidation(`change`)},f=n=>({checked:t.value,originalEvent:n,value:e.value.value??``}),p=r=>{if(!s.disabled.value){if(a.markDirty(),e.group){n.value=!1,e.group.toggle(e.value.value??``,r),e.onToggle?.(f(r));return}e.clearIndeterminateFirst&&n.value||(t.value=!t.value),n.value=!1,e.onToggle?.(f(r))}},m=Qe({disabled:s.disabled,onPress:e=>p(e)});return{...s,checkableFormValue:o,checked:t,handleClick:m.handleClick,handleKeydown:m.handleKeydown,indeterminate:n,reset:d,toggle:p,validationMessage:l,validity:c}},tt=e=>e?Array.isArray(e)?e.filter(Boolean):e.split(`,`).map(e=>e.trim()).filter(Boolean):[],nt=e=>{let t=(0,u.computed)(()=>!!e.multiple?.value),n=e=>{let n=t.value?e:e.slice(0,1);return[...new Set(n.filter(Boolean))]},r=$e(e.value,e.signal,e=>n(tt(e))),i=(0,u.computed)(()=>t.value?r.value.join(`,`):r.value[0]??``),a=qe(),o=e=>{r.value=n(e)},s=e=>{a.markDirty(),o(e)},c=()=>s([]),l=e=>{a.markDirty(),r.value=r.value.filter(t=>t!==e)},d=e=>{if(t.value){r.value.includes(e)||s([...r.value,e]);return}s([e])},f=e=>{t.value&&r.value.includes(e)?l(e):d(e)},p=e=>{o(tt(e))},m=Xe(e),h=(0,u.computed)(()=>e.required?.value&&r.value.length===0?{valueMissing:!0}:null),g=(0,u.computed)(()=>h.value?e.requiredMessage?.value||`Please make a selection.`:``);if(e.multiple){let t=(0,u.watch)(e.multiple,()=>p(e.value.value));e.signal.addEventListener(`abort`,()=>t.dispose(),{once:!0})}let _=r.value,v=()=>{o(a.isDirty?_:tt(e.value.value)),a.clear(),m.triggerValidation(`change`)};return{...m,clear:c,formValue:i,removeValue:l,reset:v,selectedValue:(0,u.computed)(()=>r.value[0]),selectedValues:r,selectValue:d,setValues:s,toggleValue:f,validationMessage:g,validity:h}},rt=e=>!e||e.trim()===``,it=e=>{let t=(0,u.computed)(()=>!rt(e.value.value)&&!e.disabled?.value&&!e.loading?.value),n=n=>{t.value&&e.onSend(n)};return{canSend:t,handleKeydown:t=>{if(t.key!==`Enter`||t.isComposing)return;let r=e.sendShortcut?.value??`enter`,i=t.metaKey||t.ctrlKey;(r===`mod+enter`?!i:t.shiftKey)||(t.preventDefault(),n(t))},keyShortcutsHint:(0,u.computed)(()=>(e.sendShortcut?.value??`enter`)===`mod+enter`?`Control+Enter Meta+Enter`:`Enter`),send:n}};function at(e){if(!e)return null;try{return(0,f.parse)(e,{as:`plainDate`})}catch{return null}}function ot(e){return e?e.toString():null}function st(e,t){return(0,f.format)(e,{intl:{day:`numeric`,month:`short`,year:`numeric`},locale:t,timeZone:`UTC`})}function ct(){return f.Temporal.Now.plainDateISO()}function lt(e){return e%7}function ut(e){let t=e.value??null,n=`day`,r=t??ct(),i=r.year,a=r.month;function o(){return e.locale??(typeof navigator<`u`?navigator.language:`en`)}function s(){return e.weekendDays??[]}function c(t){return!!(e.min&&f.Temporal.PlainDate.compare(t,e.min)<0||e.max&&f.Temporal.PlainDate.compare(t,e.max)>0)}function l(e){return!!(c(e)||s().includes(lt(e.dayOfWeek)))}function u(){let e=ct(),n=f.Temporal.PlainDate.from({day:1,month:a,year:i}),r=lt(n.dayOfWeek),o=[];for(let i=r-1;i>=0;i--){let r=n.subtract({days:i+1});o.push({day:r.day,isDisabled:l(r),isOutsideMonth:!0,iso:r.toString(),isSelected:t!==null&&f.Temporal.PlainDate.compare(r,t)===0,isToday:f.Temporal.PlainDate.compare(r,e)===0,plain:r})}let s=n.daysInMonth;for(let n=1;n<=s;n++){let r=f.Temporal.PlainDate.from({day:n,month:a,year:i});o.push({day:n,isDisabled:l(r),isOutsideMonth:!1,iso:r.toString(),isSelected:t!==null&&f.Temporal.PlainDate.compare(r,t)===0,isToday:f.Temporal.PlainDate.compare(r,e)===0,plain:r})}let c=(7-o.length%7)%7,u=n.add({months:1});for(let n=0;n<c;n++){let r=u.add({days:n});o.push({day:r.day,isDisabled:l(r),isOutsideMonth:!0,iso:r.toString(),isSelected:t!==null&&f.Temporal.PlainDate.compare(r,t)===0,isToday:f.Temporal.PlainDate.compare(r,e)===0,plain:r})}return o}function d(){let n=[],r=o();for(let a=1;a<=12;a++){let o=f.Temporal.PlainDate.from({day:1,month:a,year:i}),s=o.with({day:o.daysInMonth}),c=e.min!==null&&e.min!==void 0&&f.Temporal.PlainDate.compare(s,e.min)<0||e.max!==null&&e.max!==void 0&&f.Temporal.PlainDate.compare(o,e.max)>0;n.push({isDisabled:c,isSelected:t!==null&&t.year===i&&t.month===a,label:(0,f.format)(o,{intl:{month:`long`},locale:r,timeZone:`UTC`}),month:a,shortLabel:(0,f.format)(o,{intl:{month:`short`},locale:r,timeZone:`UTC`})})}return n}function p(){let n=Math.floor(i/10)*10,r=[];for(let i=n;i<n+12;i++){let n=f.Temporal.PlainDate.from({day:1,month:1,year:i}),a=f.Temporal.PlainDate.from({day:31,month:12,year:i}),o=e.min!==null&&e.min!==void 0&&f.Temporal.PlainDate.compare(a,e.min)<0||e.max!==null&&e.max!==void 0&&f.Temporal.PlainDate.compare(n,e.max)>0;r.push({isDisabled:o,isSelected:t!==null&&t.year===i,year:i})}return r}function m(){let e=(0,f.parse)(`2024-01-07`,{as:`plainDate`}),t=o();return Array.from({length:7},(n,r)=>(0,f.format)(e.add({days:r}),{intl:{weekday:`short`},locale:t,timeZone:`UTC`}))}return{dayCells:u,displayMonth:()=>a,displayYear:()=>i,goTo(e,t){Number.isFinite(e)&&(i=e,a=Math.max(1,Math.min(12,t)))},monthCells:d,nextMonth(){a===12?(a=1,i++):a++},nextYear(){i++},prevMonth(){a===1?(a=12,i--):a--},prevYear(){i--},select(n){n!==null&&l(n)||(t=n,t&&(i=t.year,a=t.month),e.onChange(t))},selected:()=>t,setView(e){n=e},view:()=>n,weekdayLabels:m,yearCells:p}}function dt(e){let t=null,n=null,r=!1,i=()=>{n!==null&&(cancelAnimationFrame(n),n=null)},a=()=>{r||(r=!0,i(),t=null)};return e.signal?.addEventListener(`abort`,a,{once:!0}),{applyInitialFocus(){i();let t=e.getInitialFocusSelector();if(t){let r=e.host.shadowRoot??e.host,i=null;try{i=r.querySelector(t)}catch{return}i&&(n=requestAnimationFrame(()=>{n=null,i.focus()}))}},cancelInitialFocus:i,captureReturnFocus(){t=(0,p.captureFocus)()},dispose:a,get disposed(){return r},restoreFocus(){e.getReturnFocus()!==!1&&t?.(),t=null},[Symbol.dispose]:a}}var ft=(e,t)=>Array.from(e.getElementsByTagName(t)),pt=(e,t)=>e.find(e=>(e.getAttribute(`value`)??``)===t)?.textContent?.replace(/\s+/g,` `).trim()||t,mt=e=>{let t=Number(e);return Number.isFinite(t)?t:void 0},ht=(e,t)=>mt(e)??t,gt=(e,t)=>Math.abs(ht(e,t))||t,Y=e=>{let t=new AbortController;return e(()=>t.abort()),t.signal},_t=e=>{let t=t=>{if(!e.isActive())return;let n=t.composedPath(),r=n[0]instanceof Node?n[0]:t.target instanceof Node?t.target:null;e.getTargets().some(e=>e!=null&&(n.includes(e)||!!(r&&e.contains(r))))||e.onDismiss()},n=()=>{document.removeEventListener(`pointerdown`,t,{capture:!0})};return document.addEventListener(`pointerdown`,t,{capture:!0}),e.signal.addEventListener(`abort`,n,{once:!0}),n},vt=(e,t)=>{e.value?.(t);let n=(0,u.watch)(e,e=>e?.(t));return()=>{n.dispose(),e.value?.(null)}};function yt(e,t,n){return t!=null&&e<t?t:n!=null&&e>n?n:e}var bt=e=>{let t=()=>ht(e.min?.value,0),n=()=>ht(e.max?.value,100),r=()=>gt(e.step?.value,1),i=e=>{let r=t(),i=n();return yt(ht(e,r),r,i)},a=e=>{let n=t();return i(Math.round(ht(e,n)/r())*r())},o=e=>{let r=t(),i=n(),a=ht(e,r);return i<=r?0:(a-r)/(i-r)*100},s=(e,r)=>{if(r.width<=0)return a(t());let i=Math.max(0,Math.min(1,(e-r.left)/r.width)),o=t(),s=n();return a(o+i*(s-o))},c=(e,a)=>{let o=ht(a,t());return e===`ArrowRight`||e===`ArrowUp`?i(o+r()):e===`ArrowLeft`||e===`ArrowDown`?i(o-r()):e===`Home`?t():e===`End`?n():null};return{clamp:i,fromClientX:s,handleKeydown:(t,n,r)=>{if(e.disabled?.value||e.readonly?.value)return!1;let i=c(t.key,n);return i!==null&&(t.preventDefault(),r(i),!0)},max:n,min:t,nextFromKey:c,snap:a,toPercent:o}},xt=e=>{let t=()=>!!e.disabled?.value||!!e.readonly?.value,n=()=>mt(e.min?.value),r=()=>mt(e.max?.value),i=e=>yt(e,n(),r()),a=()=>gt(e.step?.value,1),o=()=>{let t=a();return gt(e.largeStep?.value,t*10)},s=()=>e.parse()??n()??0,c=(t,n)=>{if(t==null){e.commit(null,n);return}e.commit(i(t),n)},l=(e,n)=>{t()||c(s()+e,n)};return{atMax:()=>{let t=e.parse(),n=r();return t!=null&&n!=null&&t>=n},atMin:()=>{let t=e.parse(),r=n();return t!=null&&r!=null&&t<=r},handleKeydown:e=>!t()&&Ze(e,{keymap:{ArrowDown:()=>l(-a(),e),ArrowUp:()=>l(a(),e),End:()=>{let t=r();if(t==null)return!1;c(t,e)},Home:()=>{let t=n();if(t==null)return!1;c(t,e)},PageDown:()=>l(-o(),e),PageUp:()=>l(o(),e)},preventDefault:`after`}),incrementBy:l}},St=e=>e.trim()===``,Ct=e=>String(e??``),wt=e=>{let t=$e(e.value,e.signal,Ct),n=Xe(e),r=e.maxLength?Ge({maxLength:e.maxLength,value:t}):null,i=(0,u.computed)(()=>!e.readonly?.value&&e.required?.value&&St(t.value)?{valueMissing:!0}:null),a=(0,u.computed)(()=>i.value?e.requiredMessage?.value||`This field is required.`:``),o=()=>{t.value=Ct(e.value.value),n.triggerValidation(`change`)},s=r=>{r?.preventDefault?.(),t.value=``,e.onInput?.(r??new InputEvent(`input`,{bubbles:!0}),``),e.onChange?.(r??new Event(`change`,{bubbles:!0}),``),n.triggerValidation(`change`)},c=(r,i)=>{let a=[],o=(e,t)=>{r.addEventListener(e,t),a.push(()=>r.removeEventListener(e,t))};e.onFocus&&o(`focus`,t=>e.onFocus?.(t)),o(`input`,n=>{n.stopPropagation(),e.onBeforeInput?.(n),t.value=r.value,e.onInput?.(n,r.value)}),o(`change`,i=>{i.stopPropagation(),t.value=r.value,e.onChange?.(i,r.value),n.triggerValidation(`change`)}),o(`blur`,t=>{e.onBlur?.(t),n.triggerValidation(`blur`)});let s=!1,c=()=>{if(!s){s=!0;for(let e of a)e()}};return i?.addEventListener(`abort`,c,{once:!0}),c};return{...n,clear:s,counter:r,reset:o,validationMessage:a,validity:i,value:t,wire:c}};function Tt(e){let t=e;for(;t;){let e=t.getAttribute(`dir`);if(e===`rtl`||e===`ltr`)return e;t=t.parentElement}return e!==null&&getComputedStyle(e).direction===`rtl`?`rtl`:`ltr`}var X=e=>{let t=(0,u.signal)(-1),n,r=(0,p.createListNavigation)({direction:e.direction,disabled:()=>!!e.disabled?.value,getItems:e.getItems,isItemDisabled:e.isItemDisabled,keys:e.keys,loop:e.loop,onNavigate:n=>{t.value=n.index,e.onNavigate?.(n)},orientation:e.orientation,typeahead:e.typeahead}),i=()=>{t.value=r.getIndex()},a=e=>{let t=r.set(e);return i(),t},o=e=>{let t=r.navigate(e);return i(),t},s=()=>{r.reset(),i()},c=e=>{let t=r.handleKeydown(e);return i(),t},l=()=>{r.dispose(),i(),n?.(),n=void 0};return e.signal?.aborted?l():e.signal&&(e.signal?.addEventListener(`abort`,l,{once:!0}),n=()=>e.signal?.removeEventListener(`abort`,l)),{dispose:l,get disposed(){return r.disposed},focusedIndex:t,getActiveItem:()=>r.getActiveItem(),handleKeydown:c,navigate:o,reset:s,set:a,[Symbol.dispose]:l}},Et=class extends Error{constructor(e,t){super(e,t),this.name=new.target.name,Object.setPrototypeOf(this,new.target.prototype)}},Dt=class extends Et{},Ot=e=>e.endsWith(`-start`)?e.replace(`-start`,`-end`):e.endsWith(`-end`)?e.replace(`-end`,`-start`):e;function kt({boundary:e,getDir:t,getFloating:n,getPlacement:r,getReference:i,matchWidth:a=!0,offsetPx:o=0,padding:s=6,useClippingAncestor:c=!0}){function l(){let e=r?.()??`bottom-start`;return(t?.()??Tt(i()))===`rtl`?Ot(e):e}function u(){let t=i(),r=n();if(!t||!r)return;let u=l(),d=e??(c?(0,m.getClippingAncestorRect)(r):void 0),f=(0,m.computePosition)(t,r,{boundary:d,middleware:[...o?[(0,m.offset)(o)]:[],(0,m.flip)({padding:s}),(0,m.shift)({padding:s}),...a?[(0,m.size)({padding:s})]:[]],placement:u});r.style.left=`${f.x}px`,r.style.top=`${f.y}px`;let p=r.style.transition,h=r.style.transform;r.style.transition=`none`,r.style.transform=`none`;let g=r.getBoundingClientRect(),_=f.x-g.left,v=f.y-g.top;r.style.transition=p,r.style.transform=h,(_!==0||v!==0)&&(r.style.left=`${f.x+_}px`,r.style.top=`${f.y+v}px`),a&&(r.style.width=`${t.getBoundingClientRect().width}px`)}function d(){let e=i(),t=n();return!e||!t?()=>{}:(0,m.autoUpdate)(e,t,u)}return{floating:n,reference:i,startAutoUpdate:d,update:u}}var At=e=>{if(typeof e.getBoundary!=`function`)throw new Dt(`createListboxDropdown: getBoundary is required`);if(typeof e.getPanel!=`function`)throw new Dt(`createListboxDropdown: getPanel is required`);if(typeof e.getReference!=`function`)throw new Dt(`createListboxDropdown: getReference is required`);let t=(0,u.signal)(!1),n=(0,u.computed)(()=>String(t.value)),r=null,i=kt({...e.positioning,getFloating:e.getPanel,getReference:e.getReference}),a=()=>{e.getFocusedOptionElement?.()?.scrollIntoView({block:`nearest`})},o=X({disabled:(0,u.computed)(()=>!t.value),getItems:e.getItems,isItemDisabled:e.isItemDisabled,keys:e.keys,loop:e.loop??!0,onNavigate:t=>{a(),e.onNavigate?.(t)},orientation:e.orientation,signal:e.signal,typeahead:e.typeahead}),s=(0,u.computed)(()=>{let n=o.focusedIndex.value;return e.getOptionId&&t.value&&n>=0?e.getOptionId(n):null}),c=()=>typeof e.restoreFocus==`function`?e.restoreFocus():e.restoreFocus??!0,l=(n=`programmatic`,i=!0)=>{t.value&&(t.value=!1,o.reset(),r?.(),r=null,i&&c()&&e.getTrigger&&(0,p.restoreFocus)(e.getTrigger),e.onClose?.(n))},d=(n=`programmatic`)=>{e.isDisabled?.()||t.value||(t.value=!0,i.update(),r=i.startAutoUpdate?.()??null,e.onOpen?.(n))},f=(e=`click`,n=`trigger`)=>{t.value?l(n):d(e)};_t({getTargets:()=>[e.getBoundary(),e.getPanel()],isActive:()=>t.value,onDismiss:()=>l(`outsideClick`),signal:e.signal});let m=!1,h=()=>{m||(m=!0,t.value&&(t.value=!1,o.reset(),r?.(),r=null))};return e.signal.addEventListener(`abort`,h,{once:!0}),{ariaActiveDescendant:s,ariaExpanded:n,close:l,dispose:h,get disposed(){return m},focusedIndex:o.focusedIndex,getActiveItem:o.getActiveItem,handleKeydown:e=>t.value?e.key===`Escape`?(e.preventDefault(),l(`escape`),!0):o.handleKeydown(e):!1,isOpen:t,navigate:o.navigate,open:d,scrollFocusedIntoView:a,set:o.set,[Symbol.dispose]:h,toggle:f,updatePosition:i.update}},jt=(e,t,n)=>{let r=String(e??``).split(`,`).map(e=>e.trim()).filter(e=>t.has(e));return r.length>0?r:[...n]},Mt=`@layer refine.base{:host{--_bg:var(--card-bg,var(--color-canvas));--_color:var(--card-color,var(--color-contrast-900));--_border:var(--card-border,var(--border));--_border-color:var(--card-border-color,var(--color-divider));--_radius:var(--card-radius,var(--rounded-lg));--_padding:var(--card-padding,var(--size-4));--_shadow:var(--card-shadow,var(--shadow-sm));--_hover-shadow:var(--card-hover-shadow,var(--shadow-md));flex-direction:column;display:flex;position:relative}.card{color:var(--_color);background:var(--_bg);border-radius:var(--_radius);-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transition:box-shadow var(--transition-normal), transform var(--transition-normal), background var(--transition-normal), border-color var(--transition-normal);flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.card-media{flex-shrink:0;overflow:hidden}.card-media img{object-fit:cover;width:100%;height:auto;display:block}.card-body{flex-direction:column;flex:1;min-height:0;display:flex}.card-header,.card-content,.card-footer{padding:var(--_padding)}.card-header{padding-bottom:calc(var(--_padding) / 2)}.card-footer{padding-top:calc(var(--_padding) / 2)}.card-content{flex:1}.card-actions{gap:var(--size-2);padding:var(--_padding);padding-top:calc(var(--_padding) / 2);flex-wrap:wrap;align-items:center;display:flex}[hidden]{display:none}}@layer refine.variants{:host(:not([variant],[color])){--_shadow:var(--card-shadow,var(--shadow-sm))}:host(:not([variant],[color])) .card{border:var(--_border) solid var(--_border-color);box-shadow:var(--_shadow)}:host(:not([variant])[color]){--_bg:var(--card-bg,var(--_theme-backdrop));--_border-color:var(--card-border-color,var(--_theme-border))}:host(:not([variant])[color]) .card{border:var(--_border) solid var(--_border-color)}:host(:not([variant])[color]:hover){--_bg:var(--card-bg,color-mix(in oklch, var(--_theme-base) 16%, var(--color-contrast-50)));--_border-color:var(--card-border-color,var(--_theme-focus))}:host([variant=solid]){--_bg:var(--card-bg,var(--_theme-base));--_color:var(--card-color,var(--_theme-contrast));--_border-color:var(--card-border-color,var(--_theme-base));--_shadow:var(--card-shadow,var(--shadow-sm))}:host([variant=solid]) .card{border:var(--_border) solid var(--_border-color);box-shadow:var(--_shadow)}:host([variant=flat]){--_border-color:var(--card-border-color,color-mix(in oklch, var(--_theme-border) 50%, transparent))}:host([variant=flat]) .card{border:var(--_border) solid var(--_border-color)}:host([variant=glass]) .card{text-shadow:var(--text-shadow-xs);border:var(--_border) solid var(--_border-color);box-shadow:var(--card-shadow,var(--shadow-md)), var(--inset-shadow-xs);-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(180%) brightness(1.05);backdrop-filter:blur(var(--blur-lg)) saturate(180%) brightness(1.05)}:host([variant=glass]:hover) .card{box-shadow:var(--card-hover-shadow,var(--shadow-xl)), var(--inset-shadow-sm);-webkit-backdrop-filter:blur(var(--blur-xl)) saturate(200%) brightness(1.1);backdrop-filter:blur(var(--blur-xl)) saturate(200%) brightness(1.1)}:host([variant=glass][interactive]:hover) .card{box-shadow:var(--card-hover-shadow,var(--shadow-2xl)), var(--inset-shadow-sm)}}@layer refine.overrides{.loading-bar{background:linear-gradient(90deg, transparent 0%, var(--_theme-base,var(--color-primary)) 50%, transparent 100%);width:65%;height:3px;display:none;position:absolute;top:0}.loading-bar:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}.loading-bar:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}:host([loading]) .loading-bar{animation:var(--_motion-animation,loading-bar 1.4s linear infinite);display:block}:host(:dir(rtl)[loading]) .loading-bar{animation-direction:reverse}:host([disabled]){pointer-events:none;opacity:.6}:host([disabled][interactive]) .card{cursor:not-allowed}:host([interactive]:not([disabled]):hover) .card{box-shadow:var(--_hover-shadow);transform:translateY(-2px)scale(1.01)}:host([interactive]) .card{cursor:pointer;will-change:transform}:host[interactive]:not([disabled]):active:not(:has(button:active,a[href]:active,input:active,select:active,textarea:active,summary:active,[role=button]:active,[role=link]:active)) .card{box-shadow:var(--_shadow);transition:box-shadow var(--transition-fast), transform .12s var(--ease-spring);transform:translateY(0)scale(.99)}:host([interactive]:focus-visible) .card{outline:var(--border-2) solid var(--_theme-focus,var(--color-primary));outline-offset:var(--border-2)}:host([orientation=horizontal]) .card{flex-direction:row}:host([orientation=horizontal]) .card-media{width:30%;min-width:192px;max-width:320px}:host([orientation=horizontal]) .card-media img{object-fit:cover;width:100%;height:100%}:host([orientation=horizontal]) .card-body{flex:1}}@keyframes loading-bar{0%{transform:translate(-100%)}to{transform:translate(200%)}}`,Nt=`button, a[href], input, select, textarea, summary, [role="button"], [role="link"], [contenteditable=""], [contenteditable="true"]`;function Pt(e,t){for(let n of t.composedPath())if(n instanceof HTMLElement){if(n===e)return!1;if(n.matches(Nt)||n.closest(Nt))return!0}return!1}var Ft=`ore-card`;(0,l.define)(Ft,{props:{...P,...I,...L,elevation:l.prop.number(),interactive:l.prop.bool(!1),orientation:l.prop.string(),padding:l.prop.string(),variant:l.prop.string()},setup(e){let t=(0,l.getHost)(),n=(0,l.useEmit)(),r=(0,l.useSlots)(),i=l.watchEffect;(0,l.bind)({attr:{ariaBusy:()=>e.loading.value?`true`:`false`,ariaDisabled:()=>e.interactive.value?String(e.disabled.value):null,role:()=>e.interactive.value?`button`:null}}),i(()=>{e.interactive.value?t.setAttribute(`tabindex`,e.disabled.value?`-1`:`0`):t.removeAttribute(`tabindex`)});let a=Qe({disabled:(0,u.computed)(()=>!e.interactive.value||!!e.disabled.value),onPress:(e,t)=>{n(`activate`,{originalEvent:e,trigger:t})}}),o=n=>{!e.interactive.value||e.disabled.value||Pt(t,n)||a.handleClick(n)},s=e=>{a.handleKeydown(e)};return(0,l.bind)({on:{click:e=>o(e),keydown:e=>s(e)}}),l.html`
633
633
  <div class="card" part="card">
634
634
  <div class="loading-bar" part="loading-bar"></div>
635
635
  <div class="card-media" part="media" ?hidden="${()=>!r.has(`media`).value}">
@@ -2839,7 +2839,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
2839
2839
  ${()=>a.errorText.value||a.helperText.value}
2840
2840
  </div>
2841
2841
  </fieldset>
2842
- `},styles:[ve,Bi]});var Ui=`@layer refine.base{:host{--_size:var(--radio-size,var(--size-5));--_font-size:var(--radio-font-size,var(--text-sm));--_bg:var(--radio-bg,var(--color-contrast-200));--_border:var(--radio-border-color,var(--color-contrast-300));gap:var(--_gap,var(--size-2));min-height:var(--_touch-target);cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex}.radio-wrapper{width:var(--_size);height:var(--_size);flex-shrink:0;display:block;position:relative}.circle{box-sizing:border-box;width:var(--_size);height:var(--_size);background:var(--_bg);border:var(--border-2) solid var(--_border);transition:background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);border-radius:50%;position:relative}:host(:focus-visible) .circle{box-shadow:var(--_focus-shadow)}.dot{background:var(--_dot-color);opacity:0;width:50%;height:50%;transition:opacity var(--transition-spring), transform var(--transition-spring);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.5)}.label{font-size:var(--_font-size);color:var(--color-contrast)}.helper-text[hidden]{display:none}.helper-text{width:100%;font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas))}.helper-text:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-left:calc(var(--_size) + var(--size-2))}.helper-text:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-right:calc(var(--_size) + var(--size-2))}.helper-text[role=alert]{color:var(--color-error)}}@layer refine.overrides{:host{--_active-bg:var(--radio-checked-bg,var(--_theme-base));--_dot-color:var(--radio-color,var(--_theme-contrast));--_focus-shadow:var(--_theme-shadow)}:host([checked]) .circle{background:var(--_active-bg);border-color:var(--_active-bg)}:host([checked]) .dot{opacity:1;transform:translate(-50%,-50%)scale(1)}}`,Wi=`ore-radio`;(0,l.define)(Wi,{formAssociated:!0,props:{...P,...F,...I,checked:l.prop.bool(!1),error:l.prop.string(),helper:l.prop.string(),name:l.prop.string(),value:l.prop.string()},setup(e){let t=(0,l.getHost)(),n=(0,l.inject)(Vi),r=(0,u.computed)(()=>n?.name.value||e.name.value||``),i=(0,u.computed)(()=>n?.size.value??e.size.value),a=(0,u.computed)(()=>n?.color.value??e.color.value),o=(0,u.computed)(()=>n?n.value.value===e.value.value:!!e.checked.value),s=()=>{let e=r.value;return e?Array.from(document.querySelectorAll(`ore-radio[name="${e}"]`)).filter(e=>!e.hasAttribute(`disabled`)):[]},c=(e,t)=>{if(n){n.select(e.getAttribute(`value`)??``,t);return}e.click()},d=X({direction:()=>Tt(t),getItems:()=>s(),loop:!0,onNavigate:({event:e,item:t})=>{t.focus(),c(t,e)},orientation:`both`,signal:Y(l.onCleanup)}),f=t=>{if(!p.checked.value){if(n){n.select(e.value.value??``,t);return}p.toggle(t??new Event(`change`))}},p=et({checked:o,disabled:(0,u.computed)(()=>e.disabled.value||!!n?.disabled.value),error:e.error,helper:e.helper,onToggle:e=>{Br(t,e.checked),Q(t,`input`),Q(t,`change`)},prefix:`radio`,signal:Y(l.onCleanup),value:e.value});p.attachFormField((0,l.useField)({disabled:p.disabled,toFormValue:e=>e,value:p.checkableFormValue}));let{assistiveId:m,checked:h,disabled:g,errorText:_,helperText:v,labelId:y,toggle:b}=p;return zr(t,()=>h.value,e=>{h.value=e}),(0,l.bind)({attr:{ariaChecked:()=>h.value?`true`:`false`,ariaDescribedby:()=>_.value||v.value?m:null,ariaDisabled:()=>g.value?`true`:null,ariaInvalid:()=>_.value?`true`:null,ariaLabelledby:y,checked:h,color:a,disabled:()=>g.value?!0:void 0,name:()=>r.value||void 0,role:`radio`,size:i,tabindex:()=>{if(!g.value)return h.value?0:-1}},class:()=>({"is-checked":h.value,"is-disabled":g.value}),on:{click:i=>{if(!g.value){if(n)n.select(e.value.value??``,i);else{if(!r.value)return;if(!h.value){let n=e.name.value;document.querySelectorAll(`ore-radio[name="${n}"]`).forEach(e=>{e!==t&&e.removeAttribute(`checked`)}),b(i)}}}},keydown:e=>{if(e.key===` `||e.key===`Enter`){e.preventDefault(),f(e);return}let n=s();if(n.length===0)return;let r=n.indexOf(t);r!==-1&&(d.set(r),d.handleKeydown(e))}}}),l.html`
2842
+ `},styles:[ve,Bi]});var Ui=`@layer refine.base{:host{--_size:var(--radio-size,var(--size-5));--_font-size:var(--radio-font-size,var(--text-sm));--_bg:var(--radio-bg,var(--color-contrast-200));--_border:var(--radio-border-color,var(--color-contrast-300));gap:var(--_gap,var(--size-2));min-height:var(--_touch-target);cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex}.radio-wrapper{width:var(--_size);height:var(--_size);flex-shrink:0;display:block;position:relative}.circle{box-sizing:border-box;width:var(--_size);height:var(--_size);background:var(--_bg);border:var(--border-2) solid var(--_border);transition:background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);border-radius:50%;position:relative}:host(:focus-visible) .circle{box-shadow:var(--_focus-shadow)}.dot{background:var(--_dot-color);opacity:0;width:50%;height:50%;transition:opacity var(--transition-spring), transform var(--transition-spring);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.5)}.label{font-size:var(--_font-size);color:var(--color-contrast)}.helper-text[hidden]{display:none}.helper-text{width:100%;font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas))}.helper-text:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-left:calc(var(--_size) + var(--size-2))}.helper-text:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-right:calc(var(--_size) + var(--size-2))}.helper-text[role=alert]{color:var(--color-error)}}@layer refine.overrides{:host{--_active-bg:var(--radio-checked-bg,var(--_theme-base));--_dot-color:var(--radio-color,var(--_theme-contrast));--_focus-shadow:var(--_theme-shadow)}:host([checked]) .circle{background:var(--_active-bg);border-color:var(--_active-bg)}:host([checked]) .dot{opacity:1;transform:translate(-50%,-50%)scale(1)}}`,Wi=`ore-radio`;(0,l.define)(Wi,{formAssociated:!0,props:{...P,...F,...I,checked:l.prop.bool(!1),error:l.prop.string(),helper:l.prop.string(),name:l.prop.string(),value:l.prop.string()},setup(e){let t=(0,l.getHost)(),n=(0,l.inject)(Vi),r=(0,u.computed)(()=>n?.name.value||e.name.value||``),i=(0,u.computed)(()=>n?.size.value??e.size.value),a=(0,u.computed)(()=>n?.color.value??e.color.value),o=(0,u.computed)(()=>n?n.value.value===e.value.value:!!e.checked.value),s=()=>{let e=r.value;return e?Array.from(document.querySelectorAll(`ore-radio[name="${e}"]`)).filter(e=>!e.hasAttribute(`disabled`)):[]},c=(e,t)=>{if(n){n.select(e.getAttribute(`value`)??``,t);return}e.click()},d=X({direction:()=>Tt(t),getItems:()=>s(),loop:!0,onNavigate:({event:e,item:t})=>{t.focus(),c(t,e)},orientation:`both`,signal:Y(l.onCleanup)}),f=t=>{if(!p.checked.value){if(n){n.select(e.value.value??``,t);return}p.toggle(t??new Event(`change`))}},p=et({checked:o,disabled:(0,u.computed)(()=>e.disabled.value||!!n?.disabled.value),error:e.error,helper:e.helper,onToggle:e=>{Br(t,e.checked),Q(t,`input`),Q(t,`change`)},prefix:`radio`,signal:Y(l.onCleanup),value:e.value});p.attachFormField((0,l.useField)({disabled:p.disabled,toFormValue:e=>e,value:p.checkableFormValue}));let{assistiveId:m,checked:h,disabled:g,errorText:_,helperText:v,labelId:y,toggle:b}=p;return zr(t,()=>h.value,e=>{h.value=e}),(0,l.bind)({attr:{ariaChecked:()=>h.value?`true`:`false`,ariaDescribedby:()=>_.value||v.value?m:null,ariaDisabled:()=>g.value?`true`:null,ariaInvalid:()=>_.value?`true`:null,ariaLabelledby:y,checked:h,color:a,disabled:()=>g.value?!0:void 0,name:()=>r.value||void 0,role:`radio`,size:i,tabindex:()=>{if(!g.value)return h.value?0:-1}},class:()=>({"is-checked":h.value,"is-disabled":g.value}),on:{click:i=>{if(!g.value)if(n)n.select(e.value.value??``,i);else{if(!r.value)return;if(!h.value){let n=e.name.value;document.querySelectorAll(`ore-radio[name="${n}"]`).forEach(e=>{e!==t&&e.removeAttribute(`checked`)}),b(i)}}},keydown:e=>{if(e.key===` `||e.key===`Enter`){e.preventDefault(),f(e);return}let n=s();if(n.length===0)return;let r=n.indexOf(t);r!==-1&&(d.set(r),d.handleKeydown(e))}}}),l.html`
2843
2843
  <div class="radio-wrapper" part="radio">
2844
2844
  <div class="circle" part="circle">
2845
2845
  <div class="dot" part="dot"></div>
@@ -2847,7 +2847,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
2847
2847
  </div>
2848
2848
  <span class="label" part="label" id="${y}"><slot></slot></span>
2849
2849
  ${_n(m,_,v)}
2850
- `},styles:[q,Te,ve,H,K(te),Ui]});var Gi=`@layer refine.base{:host{--_star-size:var(--rating-star-size,var(--size-7));--_color-empty:var(--rating-color-empty,var(--color-contrast-200));--_color-filled:var(--rating-color-filled,var(--_theme-base,var(--color-warning)));--_gap:var(--rating-gap,var(--size-0_5));flex-wrap:wrap;align-items:center;display:inline-flex}.stars{gap:var(--_gap);align-items:center;display:flex;position:relative}.sparkle-layer{pointer-events:none;position:absolute;inset:0;overflow:visible}.sparkle{pointer-events:none;background:var(--_color-filled);animation:var(--_motion-animation,sparkle-fly var(--_dur,.5s) var(--ease-out) forwards);border-radius:50%;position:absolute}@keyframes sparkle-fly{0%{opacity:.9;transform:translate(-50%, -50%) rotate(var(--_angle)) translateY(0) scale(1)}to{opacity:0;transform:translate(-50%, -50%) rotate(var(--_angle)) translateY(calc(-1 * var(--_dist))) scale(0)}}.star-btn{all:unset;width:var(--_star-size);min-width:var(--_touch-target);height:var(--_star-size);min-height:var(--_touch-target);color:var(--_color-empty);cursor:pointer;border-radius:var(--rounded-sm);transition:color var(--transition-fast), transform .12s var(--ease-spring);justify-content:center;align-items:center;display:inline-flex}.star-btn[data-filled]{color:var(--_color-filled)}:host([solid]) .star-btn ore-icon::part(svg){fill:none}:host([solid]) .star-btn[data-filled] ore-icon::part(svg){fill:currentColor}.star-btn:hover:not([disabled]),.star-btn:focus-visible:not([disabled]){transform:scale(1.08)}.star-btn:focus-visible{outline:var(--border-2) solid var(--_color-filled);outline-offset:var(--border-2)}.star-btn[disabled]{cursor:default}:host([readonly]) .star-btn,:host([disabled]) .star-btn{pointer-events:none}:host([disabled]){opacity:.5}}@layer refine.utilities{:host([size=sm]){--_star-size:var(--size-5)}:host([size=lg]){--_star-size:var(--size-9)}@media (forced-colors:active){.star-btn{color:buttontext}.star-btn[data-filled]{color:highlight;forced-color-adjust:none}.star-btn:focus-visible{box-shadow:none;outline:2px solid highlight}}.helper-text[hidden]{display:none}.helper-text{width:100%;font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));margin-top:var(--size-1)}.helper-text[role=alert]{color:var(--color-error)}}@media (prefers-reduced-motion:reduce){.sparkle{display:none}}`,Ki=`ore-rating`;(0,l.define)(Ki,{formAssociated:!0,props:{...P,...F,...I,error:l.prop.string(),helper:l.prop.string(),label:l.prop.string(`Rating`),max:l.prop.number(5),name:l.prop.string(),readonly:l.prop.bool(!1),solid:l.prop.bool(!1),value:l.prop.number(0)},setup(e){let t=(0,l.getHost)(),n=(0,u.computed)(()=>{let t=Math.max(1,Number(e.max?.value)||5),n=Number(e.value?.value);return Math.min(t,Math.max(0,Number.isFinite(n)?n:0))}),r=(0,u.computed)(()=>!!e.disabled.value);Z(t,()=>String(n.value),e=>{t.setAttribute(`value`,e)}),(0,l.useField)({disabled:r,value:(0,u.computed)(()=>String(n.value||0))});let i=(0,l.createStableId)(`helper`),a=We({error:e.error,helper:e.helper}),o=(0,u.computed)(()=>a.value.errorText),s=(0,u.computed)(()=>a.value.helperText),c=(0,u.computed)(()=>o.value||s.value?i:null),d=(0,u.computed)(()=>!e.readonly?.value&&!r.value),f=(0,u.signal)(null),p=(0,u.computed)(()=>f.value??n.value),m=()=>[...t.shadowRoot?.querySelectorAll(`[data-star]`)??[]],h=bt({max:(0,u.computed)(()=>Number(e.max?.value)||5),min:(0,u.signal)(1),step:(0,u.signal)(1)});function g(e){let n=t.shadowRoot?.querySelector(`.sparkle-layer`),r=t.shadowRoot?.querySelector(`[data-star="${e}"]`);if(!n||!r)return;let i=r.offsetLeft+r.offsetWidth/2,a=r.offsetTop+r.offsetHeight/2;for(let e=0;e<10;e++){let t=document.createElement(`span`),r=36*e+(Math.random()*30-15),o=18+Math.random()*20,s=3+Math.random()*4,c=380+Math.random()*220;t.className=`sparkle`,t.style.cssText=[`left:${i}px`,`top:${a}px`,`--_angle:${r}deg`,`--_dist:${o}px`,`width:${s}px`,`height:${s}px`,`--_dur:${c}ms`,`animation-delay:${Math.random()*60}ms`].join(`;`),n.appendChild(t),t.addEventListener(`animationend`,()=>t.remove(),{once:!0})}}function _(r,i){if(!d.value)return;let a=Math.max(1,Number(e.max?.value)||5),o=Math.min(a,Math.max(0,r));o!==n.value&&($(t,String(o)),Q(t,`input`),Q(t,`change`),g(o))}function v(e,t){let n=h.nextFromKey(e.key,t);n!=null&&(e.preventDefault(),_(n,e),m()[n-1]?.focus())}let y=(0,u.computed)(()=>{let t=Number(e.max?.value)||5;return Array.from({length:t},(e,t)=>t+1)});return(0,l.bind)({attr:{size:e.size}}),l.html`
2850
+ `},styles:[q,Te,ve,H,K(te),Ui]});var Gi=`@layer refine.base{:host{--_star-size:var(--rating-star-size,var(--size-7));--_color-empty:var(--rating-color-empty,var(--color-contrast-200));--_color-filled:var(--rating-color-filled,var(--_theme-base,var(--color-warning)));--_gap:var(--rating-gap,var(--size-0_5));flex-wrap:wrap;align-items:center;display:inline-flex}.stars{gap:var(--_gap);align-items:center;display:flex;position:relative}.sparkle-layer{pointer-events:none;position:absolute;inset:0;overflow:visible}.sparkle{pointer-events:none;background:var(--_color-filled);animation:var(--_motion-animation,sparkle-fly var(--_dur,.5s) var(--ease-out) forwards);border-radius:50%;position:absolute}@keyframes sparkle-fly{0%{opacity:.9;transform:translate(-50%, -50%) rotate(var(--_angle)) translateY(0) scale(1)}to{opacity:0;transform:translate(-50%, -50%) rotate(var(--_angle)) translateY(calc(-1 * var(--_dist))) scale(0)}}.star-btn{all:unset;width:var(--_star-size);min-width:var(--_touch-target);height:var(--_star-size);min-height:var(--_touch-target);color:var(--_color-empty);cursor:pointer;border-radius:var(--rounded-sm);transition:color var(--transition-fast), transform .12s var(--ease-spring);justify-content:center;align-items:center;display:inline-flex}.star-btn[data-filled]{color:var(--_color-filled)}:host([solid]) .star-btn ore-icon::part(svg){fill:none}:host([solid]) .star-btn[data-filled] ore-icon::part(svg){fill:currentColor}.star-btn:hover:not([disabled]),.star-btn:focus-visible:not([disabled]){transform:scale(1.08)}.star-btn:focus-visible{outline:var(--border-2) solid var(--_color-filled);outline-offset:var(--border-2)}.star-btn[disabled]{cursor:default}:host([readonly]) .star-btn,:host([disabled]) .star-btn{pointer-events:none}:host([disabled]){opacity:.5}}@layer refine.utilities{:host([size=sm]){--_star-size:var(--size-5)}:host([size=lg]){--_star-size:var(--size-9)}@media (forced-colors:active){.star-btn{color:buttontext}.star-btn[data-filled]{color:highlight;forced-color-adjust:none}.star-btn:focus-visible{box-shadow:none;outline:2px solid highlight}}.helper-text[hidden]{display:none}.helper-text{width:100%;font-size:var(--text-xs);line-height:var(--leading-tight);color:color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));margin-top:var(--size-1)}.helper-text[role=alert]{color:var(--color-error)}}@media (prefers-reduced-motion:reduce){.sparkle{display:none}}`,Ki=`ore-rating`;(0,l.define)(Ki,{formAssociated:!0,props:{...P,...F,...I,error:l.prop.string(),helper:l.prop.string(),label:l.prop.string(`Rating`),max:l.prop.number(5),name:l.prop.string(),readonly:l.prop.bool(!1),solid:l.prop.bool(!1),value:l.prop.number(0)},setup(e){let t=(0,l.getHost)(),n=(0,u.computed)(()=>{let t=Math.max(1,Number(e.max?.value)||5),n=Number(e.value?.value);return Math.min(t,Math.max(0,Number.isFinite(n)?n:0))}),r=(0,u.computed)(()=>!!e.disabled.value);Z(t,()=>String(n.value),e=>{t.setAttribute(`value`,e)}),(0,l.useField)({disabled:r,value:(0,u.computed)(()=>String(n.value||0))});let i=(0,l.createStableId)(`helper`),a=We({error:e.error,helper:e.helper}),o=(0,u.computed)(()=>a.value.errorText),s=(0,u.computed)(()=>a.value.helperText),c=(0,u.computed)(()=>o.value||s.value?i:null),d=(0,u.computed)(()=>!e.readonly?.value&&!r.value),f=(0,u.signal)(null),p=(0,u.computed)(()=>f.value??n.value),m=()=>[...t.shadowRoot?.querySelectorAll(`[data-star]`)??[]],h=bt({max:(0,u.computed)(()=>Number(e.max?.value)||5),min:(0,u.signal)(1),step:(0,u.signal)(1)});function g(e){let n=t.shadowRoot?.querySelector(`.sparkle-layer`),r=t.shadowRoot?.querySelector(`[data-star="${e}"]`);if(!n||!r)return;let i=r.offsetLeft+r.offsetWidth/2,a=r.offsetTop+r.offsetHeight/2;for(let e=0;e<10;e++){let t=document.createElement(`span`),r=360/10*e+(Math.random()*30-15),o=18+Math.random()*20,s=3+Math.random()*4,c=380+Math.random()*220;t.className=`sparkle`,t.style.cssText=[`left:${i}px`,`top:${a}px`,`--_angle:${r}deg`,`--_dist:${o}px`,`width:${s}px`,`height:${s}px`,`--_dur:${c}ms`,`animation-delay:${Math.random()*60}ms`].join(`;`),n.appendChild(t),t.addEventListener(`animationend`,()=>t.remove(),{once:!0})}}function _(r,i){if(!d.value)return;let a=Math.max(1,Number(e.max?.value)||5),o=Math.min(a,Math.max(0,r));o!==n.value&&($(t,String(o)),Q(t,`input`),Q(t,`change`),g(o))}function v(e,t){let n=h.nextFromKey(e.key,t);n!=null&&(e.preventDefault(),_(n,e),m()[n-1]?.focus())}let y=(0,u.computed)(()=>{let t=Number(e.max?.value)||5;return Array.from({length:t},(e,t)=>t+1)});return(0,l.bind)({attr:{size:e.size}}),l.html`
2851
2851
  <div
2852
2852
  class="stars"
2853
2853
  part="stars"