@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/custom-elements.json +5433 -5473
- package/dist/errors.cjs +1 -1
- package/dist/errors.cjs.map +1 -1
- package/dist/errors.d.ts +0 -1
- package/dist/errors.d.ts.map +1 -1
- package/dist/errors.js +1 -4
- package/dist/errors.js.map +1 -1
- package/dist/radio.cjs +1 -1
- package/dist/radio.cjs.map +1 -1
- package/dist/radio.js +8 -10
- package/dist/radio.js.map +1 -1
- package/dist/rating.cjs +1 -1
- package/dist/rating.cjs.map +1 -1
- package/dist/rating.js +1 -1
- package/dist/rating.js.map +1 -1
- package/dist/refine.cjs +3 -3
- package/dist/refine.cjs.map +1 -1
- package/dist/refine.iife.js +3 -3
- package/dist/refine.iife.js.map +1 -1
- package/dist/refine.js +3 -3
- package/dist/refine.js.map +1 -1
- package/package.json +11 -11
package/dist/errors.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e=class
|
|
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
|
package/dist/errors.cjs.map
CHANGED
|
@@ -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
|
|
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 {
|
package/dist/errors.d.ts.map
CHANGED
|
@@ -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;
|
|
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
|
|
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 };
|
package/dist/errors.js.map
CHANGED
|
@@ -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
|
|
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)
|
|
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>
|
package/dist/radio.cjs.map
CHANGED
|
@@ -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
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
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=
|
|
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"
|
package/dist/rating.cjs.map
CHANGED
|
@@ -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 =
|
|
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`,
|
package/dist/rating.js.map
CHANGED
|
@@ -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)
|
|
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=
|
|
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"
|