@vielzeug/refine 1.1.1

package/dist/inputs/input/input.d.ts

@@ -0,0 +1,96 @@
+import type { TextFieldProps } from '../../shared';
+import type { InputType, VisualVariant } from '../../types';
+import '../../content/icon/icon';
+/** Input component properties */
+export type OreInputEvents = {
+    change: {
+        originalEvent: Event;
+        value: string;
+    };
+    input: {
+        originalEvent: Event;
+        value: string;
+    };
+};
+export type OreInputProps = TextFieldProps<Exclude<VisualVariant, 'frost'>> & {
+    /** Autocomplete hint */
+    autocomplete?: string;
+    /** Show a clear (×) button when the field has a value */
+    clearable?: boolean;
+    /** Virtual keyboard hint for mobile devices */
+    inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    /** Maximum character length — shows a counter below the input */
+    maxlength?: number;
+    /** Minimum character length */
+    minlength?: number;
+    /** HTML pattern attribute for client-side validation */
+    pattern?: string;
+    /**
+     * JS-only callback fired with the inner `<input>` element when it mounts,
+     * and with `null` when it unmounts. Intended for composed components that
+     * need imperative access to the raw input element.
+     * Set as a JS property: `bitInput.ref = (el) => { ... }`.
+     */
+    ref?: ((el: HTMLInputElement | null) => void) | null;
+    /** HTML input type */
+    type?: InputType;
+};
+/**
+ * A customizable text input component with multiple variants, label placements, and form features.
+ *
+ * @element ore-input
+ *
+ * @attr {string} label - Label text
+ * @attr {string} label-placement - Label placement: 'inset' | 'outside'
+ * @attr {string} type - HTML input type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search'
+ * @attr {string} value - Current input value
+ * @attr {string} placeholder - Placeholder text
+ * @attr {string} name - Form field name
+ * @attr {string} helper - Helper text displayed below the input (fallback when the `helper` slot is empty)
+ * @attr {string} error - Error message — marks the field as invalid (fallback when the `error` slot is empty)
+ * @attr {boolean} disabled - Disable input interaction
+ * @attr {boolean} readonly - Make the input read-only
+ * @attr {boolean} required - Mark the field as required
+ * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text'
+ * @attr {string} size - Input size: 'sm' | 'md' | 'lg'
+ * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
+ *
+ * @fires input - Emitted when input value changes (on every keystroke). detail: { value: string; originalEvent: Event }
+ * @fires change - Emitted when input loses focus with changed value. detail: { value: string; originalEvent: Event }
+ *
+ * @slot prefix - Content before the input (e.g., icons)
+ * @slot suffix - Content after the input (e.g., clear button, validation icon)
+ * @slot label - Replaces the label text — slotted content takes precedence over the `label` prop
+ * @slot helper - Replaces the helper text — slotted content takes precedence over the `helper` prop
+ * @slot error - Replaces the error text — slotted content takes precedence over the `error` prop
+ *
+ * @part wrapper - The input wrapper element
+ * @part label - The label element (inset or outside)
+ * @part field - The field container element
+ * @part input-row - The input row container element
+ * @part input - The input element
+ * @part helper - The helper text element
+ *
+ * @cssprop --input-bg - Background color
+ * @cssprop --input-color - Text color
+ * @cssprop --input-border-color - Border color
+ * @cssprop --input-placeholder-color - Placeholder text color
+ * @cssprop --input-radius - Border radius
+ * @cssprop --input-padding - Inner padding (block inline)
+ * @cssprop --input-gap - Gap between prefix/suffix icons and input text
+ * @cssprop --input-font-size - Font size
+ * @cssprop --input-height - Field height
+ * @cssprop --input-hover-bg - Field background on hover (flat/ghost variants)
+ * @cssprop --input-hover-border-color - Field border on hover (flat/bordered variants)
+ * @cssprop --input-focus-bg - Field background when focused (flat variant)
+ * @cssprop --input-focus-border-color - Field border when focused (flat/text variants)
+ *
+ * @example
+ * ```html
+ * <ore-input type="email" label="Email" placeholder="you@example.com" />
+ * <ore-input label="Name" variant="bordered" color="primary" />
+ * ```
+ */
+export declare const INPUT_TAG: "ore-input";
+//# sourceMappingURL=input.d.ts.map

package/dist/inputs/input/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/inputs/input/input.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAI5D,OAAO,yBAAyB,CAAC;AAKjC,iCAAiC;AAEjC,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE;QAAE,aAAa,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAChD,KAAK,EAAE;QAAE,aAAa,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,GAAG;IAC5E,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IACzF,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IACrD,sBAAsB;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAiBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,eAAO,MAAM,SAAS,EAAG,WAAoB,CAAC"}

package/dist/inputs/number-input/number-input.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{width:fit-content;display:inline-flex}:host([fullwidth]){width:100%}.wrapper{gap:var(--size-1);align-items:center;width:100%;display:inline-flex}:host([label-placement=outside]) .wrapper{align-items:flex-end}button{width:var(--size-10);min-width:var(--size-10);height:var(--size-10);min-height:var(--size-10);color:var(--color-contrast-600);cursor:pointer;border-radius:var(--rounded-md);transition:color var(--transition-fast);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}button:hover:not(:disabled){color:var(--color-contrast-800);background:var(--color-contrast-100)}button:active:not(:disabled){background:var(--color-contrast-200)}button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.field::part(input){text-align:center}.field{width:var(--size-20)}:host([fullwidth]) .field{flex:1;width:auto;min-width:0}}`;exports.default=e;
+//# sourceMappingURL=number-input.css?inline.cjs.map

package/dist/inputs/number-input/number-input.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.css?inline.cjs","names":[],"sources":["../../../src/inputs/number-input/number-input.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: inline-flex;\n    width: fit-content;\n  }\n\n  :host([fullwidth]) {\n    width: 100%;\n  }\n\n  .wrapper {\n    display: inline-flex;\n    gap: var(--size-1);\n    align-items: center;\n    width: 100%;\n  }\n\n  /* Align buttons to the top when the label is outside (it adds height above the field) */\n  :host([label-placement='outside']) .wrapper {\n    align-items: flex-end;\n  }\n\n  /* Spin buttons */\n  button {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-10);\n    min-width: var(--size-10);\n    height: var(--size-10);\n    min-height: var(--size-10);\n    padding: 0;\n    color: var(--color-contrast-600);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-md);\n    transition: color var(--transition-fast);\n  }\n\n  button:hover:not(:disabled) {\n    color: var(--color-contrast-800);\n    background: var(--color-contrast-100);\n  }\n\n  button:active:not(:disabled) {\n    background: var(--color-contrast-200);\n  }\n\n  button:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  button:focus-visible {\n    outline: 2px solid var(--color-primary-500);\n    outline-offset: 2px;\n  }\n\n  /* Centre the typed number inside the field */\n  .field::part(input) {\n    text-align: center;\n  }\n\n  .field {\n    width: var(--size-20);\n  }\n\n  :host([fullwidth]) .field {\n    flex: 1;\n    width: auto;\n    min-width: 0;\n  }\n}\n"],"mappings":""}

package/dist/inputs/number-input/number-input.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/inputs/number-input/number-input.css?inline
+var e = "@layer refine.base{:host{width:fit-content;display:inline-flex}:host([fullwidth]){width:100%}.wrapper{gap:var(--size-1);align-items:center;width:100%;display:inline-flex}:host([label-placement=outside]) .wrapper{align-items:flex-end}button{width:var(--size-10);min-width:var(--size-10);height:var(--size-10);min-height:var(--size-10);color:var(--color-contrast-600);cursor:pointer;border-radius:var(--rounded-md);transition:color var(--transition-fast);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}button:hover:not(:disabled){color:var(--color-contrast-800);background:var(--color-contrast-100)}button:active:not(:disabled){background:var(--color-contrast-200)}button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.field::part(input){text-align:center}.field{width:var(--size-20)}:host([fullwidth]) .field{flex:1;width:auto;min-width:0}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=number-input.css?inline.js.map

package/dist/inputs/number-input/number-input.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.css?inline.js","names":[],"sources":["../../../src/inputs/number-input/number-input.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: inline-flex;\n    width: fit-content;\n  }\n\n  :host([fullwidth]) {\n    width: 100%;\n  }\n\n  .wrapper {\n    display: inline-flex;\n    gap: var(--size-1);\n    align-items: center;\n    width: 100%;\n  }\n\n  /* Align buttons to the top when the label is outside (it adds height above the field) */\n  :host([label-placement='outside']) .wrapper {\n    align-items: flex-end;\n  }\n\n  /* Spin buttons */\n  button {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-10);\n    min-width: var(--size-10);\n    height: var(--size-10);\n    min-height: var(--size-10);\n    padding: 0;\n    color: var(--color-contrast-600);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-md);\n    transition: color var(--transition-fast);\n  }\n\n  button:hover:not(:disabled) {\n    color: var(--color-contrast-800);\n    background: var(--color-contrast-100);\n  }\n\n  button:active:not(:disabled) {\n    background: var(--color-contrast-200);\n  }\n\n  button:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  button:focus-visible {\n    outline: 2px solid var(--color-primary-500);\n    outline-offset: 2px;\n  }\n\n  /* Centre the typed number inside the field */\n  .field::part(input) {\n    text-align: center;\n  }\n\n  .field {\n    width: var(--size-20);\n  }\n\n  :host([fullwidth]) .field {\n    flex: 1;\n    width: auto;\n    min-width: 0;\n  }\n}\n"],"mappings":""}

package/dist/inputs/number-input/number-input.d.ts

@@ -0,0 +1,102 @@
+import type { ComponentSize, ThemeColor, VisualVariant } from '../../types';
+import '../../content/icon/icon';
+import '../input/input';
+export type OreNumberInputEvents = {
+    change: {
+        originalEvent?: Event;
+        value: number | null;
+    };
+    input: {
+        originalEvent?: Event;
+        value: number | null;
+    };
+};
+/** Number Input props */
+export type OreNumberInputProps = {
+    /** Theme color */
+    color?: ThemeColor;
+    /** Disable interaction */
+    disabled?: boolean;
+    /** Error message */
+    error?: string;
+    /** Stretch to full width of container */
+    fullwidth?: boolean;
+    /** Helper text */
+    helper?: string;
+    /** Visible label */
+    label?: string;
+    /** Label placement: 'inset' renders the label inside the control box, 'outside' renders it above */
+    'label-placement'?: 'inset' | 'outside';
+    /** Large step (for Page Up/Down, default: 10 × step) */
+    'large-step'?: number;
+    /** Maximum allowed value */
+    max?: number;
+    /** Minimum allowed value */
+    min?: number;
+    /** Form field name */
+    name?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Make the input read-only */
+    readonly?: boolean;
+    /**
+     * JS-only callback fired with the inner `<input>` element when it mounts,
+     * and with `null` when it unmounts.
+     * Set as a JS property: `bitNumberInput.ref = (el) => { ... }`.
+     */
+    ref?: ((el: HTMLInputElement | null) => void) | null;
+    /** Border radius */
+    rounded?: string;
+    /** Component size */
+    size?: ComponentSize;
+    /** Step size for increment/decrement */
+    step?: number;
+    /** Current numeric value */
+    value?: number;
+    /** Visual variant */
+    variant?: VisualVariant;
+};
+/**
+ * A numeric spin-button input with +/− controls, min/max clamping, and full keyboard support.
+ *
+ * @element ore-number-input
+ *
+ * @attr {number} value - Current value
+ * @attr {number} min - Minimum value
+ * @attr {number} max - Maximum value
+ * @attr {number} step - Increment/decrement step (default: 1)
+ * @attr {number} large-step - Step for Page Up/Down (default: 10)
+ * @attr {boolean} disabled - Disables the control
+ * @attr {boolean} readonly - Read-only mode
+ * @attr {string} label - Visible label
+ * @attr {string} name - Form field name
+ * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {string} size - 'sm' | 'md' | 'lg'
+ * @attr {string} placeholder - Input placeholder
+ *
+ * @fires change - On committed value change. detail: { value: number | null, originalEvent?: Event }
+ * @fires input - On every keystroke. detail: { value: number | null, originalEvent?: Event }
+ *
+ * @slot prefix - Content before the input (e.g. icon)
+ * @slot suffix - Content after the input (e.g. unit label)
+ * @slot label - Custom label content
+ * @slot helper - Custom helper text content
+ * @slot error - Custom error content
+ *
+ * @cssprop --number-input-height - Control height
+ * @cssprop --number-input-border-color - Border color
+ * @cssprop --number-input-radius - Border radius
+ * @cssprop --number-input-bg - Background
+ * @cssprop --number-input-btn-bg - Spin button background
+ *
+ * @part control - Control container.
+ * @part decrement-btn - Decrement stepper button.
+ * @part input - Input element.
+ * @part increment-btn - Increment stepper button.
+ * @example
+ * ```html
+ * <ore-number-input label="Quantity" value="1" min="1" max="99" step="1"></ore-number-input>
+ * ```
+ */
+export declare const NUMBER_INPUT_TAG: "ore-number-input";
+//# sourceMappingURL=number-input.d.ts.map

package/dist/inputs/number-input/number-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.d.ts","sourceRoot":"","sources":["../../../src/inputs/number-input/number-input.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG5E,OAAO,yBAAyB,CAAC;AACjC,OAAO,gBAAgB,CAAC;AAMxB,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE;QAAE,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;IACxD,KAAK,EAAE;QAAE,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;CACxD,CAAC;AAEF,yBAAyB;AACzB,MAAM,MAAM,mBAAmB,GAAG;IAChC,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oGAAoG;IACpG,iBAAiB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACxC,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4BAA4B;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4BAA4B;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IACrD,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,gBAAgB,EAAG,kBAA2B,CAAC"}

package/dist/inputs/otp-input/otp-input.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{--_cell-size:var(--otp-cell-size,var(--size-12));--_cell-gap:var(--otp-cell-gap,var(--size-2));--_cell-font-size:var(--otp-cell-font-size,var(--text-xl));--_cell-radius:var(--otp-cell-radius,var(--rounded-lg));--_cell-border:var(--otp-cell-border,var(--border));--_cell-border-color:var(--otp-cell-border-color,var(--color-contrast-300));--_cell-bg:var(--otp-cell-bg,var(--color-canvas));--_cell-focus-border:var(--otp-cell-focus-border,var(--_theme-base,var(--color-contrast-700)));gap:var(--size-1);flex-direction:column;display:inline-flex}.otp-group{gap:var(--_cell-gap);align-items:center;display:flex}.cell{box-sizing:border-box;width:var(--_cell-size);height:var(--_cell-size);font-size:var(--_cell-font-size);font-weight:var(--font-semibold);color:var(--color-contrast-900);text-align:center;caret-color:var(--_cell-focus-border);background:var(--_cell-bg);border:var(--_cell-border) solid var(--_cell-border-color);border-radius:var(--_cell-radius);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);padding:0;line-height:1;display:block}.cell::selection{background:var(--_theme-backdrop,var(--color-contrast-100))}.cell:focus{border-color:var(--_cell-focus-border);box-shadow:0 0 0 var(--border-2) color-mix(in oklch, var(--_cell-focus-border) 20%, transparent);outline:none}.cell:disabled{cursor:not-allowed;opacity:.5}.separator{font-size:var(--_cell-font-size);color:var(--color-contrast-400);-webkit-user-select:none;user-select:none}}@layer refine.variants{:host(:not([variant])),:host([variant=solid]){--_cell-bg:var(--otp-cell-bg,var(--color-contrast-50));--_cell-border-color:var(--otp-cell-border-color,var(--color-contrast-300))}:host(:not([variant])) .cell,:host([variant=solid]) .cell{box-shadow:var(--shadow-2xs)}:host([variant=flat]){--_cell-bg:var(--otp-cell-bg,var(--color-contrast-100));--_cell-border-color:var(--otp-cell-border-color,var(--_theme-border,var(--color-contrast-200)))}:host([variant=flat]) .cell{box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) .cell:hover:not(:disabled){background:var(--otp-cell-hover-bg,color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));border-color:var(--otp-cell-hover-border-color,color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300)))}:host([variant=flat]) .cell:focus{background:var(--otp-cell-focus-bg,color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));border-color:var(--otp-cell-focus-border-color,color-mix(in oklch, var(--_cell-focus-border) 60%, transparent));box-shadow:var(--_theme-shadow)}:host([variant=bordered]){--_cell-bg:var(--otp-cell-bg,var(--_theme-backdrop,var(--color-contrast-50)));--_cell-border-color:var(--otp-cell-border-color,color-mix(in oklch, var(--_cell-focus-border) 70%, transparent))}:host([variant=bordered]) .cell{color:var(--_theme-base);caret-color:var(--_theme-base)}:host([variant=bordered]) .cell:hover:not(:disabled){border-color:var(--otp-cell-hover-border-color,var(--_cell-focus-border))}:host([variant=outline]){--_cell-bg:var(--otp-cell-bg,transparent)}:host([variant=outline]) .cell{box-shadow:none}:host([variant=ghost]){--_cell-bg:var(--otp-cell-bg,transparent);--_cell-border-color:var(--otp-cell-border-color,transparent)}:host([variant=ghost]) .cell{box-shadow:none}:host([variant=ghost]) .cell:hover:not(:disabled){background:var(--otp-cell-hover-bg,var(--color-contrast-100))}}@layer refine.utilities{:host([size=sm]){--_cell-size:var(--size-9);--_cell-font-size:var(--text-base)}:host([size=lg]){--_cell-size:var(--size-14);--_cell-font-size:var(--text-2xl)}}`;exports.default=e;
+//# sourceMappingURL=otp-input.css?inline.cjs.map

package/dist/inputs/otp-input/otp-input.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input.css?inline.cjs","names":[],"sources":["../../../src/inputs/otp-input/otp-input.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_cell-size: var(--otp-cell-size, var(--size-12));\n    --_cell-gap: var(--otp-cell-gap, var(--size-2));\n    --_cell-font-size: var(--otp-cell-font-size, var(--text-xl));\n    --_cell-radius: var(--otp-cell-radius, var(--rounded-lg));\n    --_cell-border: var(--otp-cell-border, var(--border));\n    --_cell-border-color: var(--otp-cell-border-color, var(--color-contrast-300));\n    --_cell-bg: var(--otp-cell-bg, var(--color-canvas));\n    --_cell-focus-border: var(--otp-cell-focus-border, var(--_theme-base, var(--color-contrast-700)));\n\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--size-1);\n  }\n\n  .otp-group {\n    display: flex;\n    gap: var(--_cell-gap);\n    align-items: center;\n  }\n\n  .cell {\n    box-sizing: border-box;\n    display: block;\n    width: var(--_cell-size);\n    height: var(--_cell-size);\n    padding: 0;\n    font-size: var(--_cell-font-size);\n    font-weight: var(--font-semibold);\n    line-height: 1;\n    color: var(--color-contrast-900);\n    text-align: center;\n    caret-color: var(--_cell-focus-border);\n    background: var(--_cell-bg);\n    border: var(--_cell-border) solid var(--_cell-border-color);\n    border-radius: var(--_cell-radius);\n    transition:\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  .cell::selection {\n    background: var(--_theme-backdrop, var(--color-contrast-100));\n  }\n\n  .cell:focus {\n    outline: none;\n    border-color: var(--_cell-focus-border);\n    box-shadow: 0 0 0 var(--border-2) color-mix(in oklch, var(--_cell-focus-border) 20%, transparent);\n  }\n\n  .cell:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .separator {\n    font-size: var(--_cell-font-size);\n    color: var(--color-contrast-400);\n    user-select: none;\n  }\n}\n\n@layer refine.variants {\n  /* Solid (default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_cell-bg: var(--otp-cell-bg, var(--color-contrast-50));\n    --_cell-border-color: var(--otp-cell-border-color, var(--color-contrast-300));\n  }\n\n  :host(:not([variant])) .cell,\n  :host([variant='solid']) .cell {\n    box-shadow: var(--shadow-2xs);\n  }\n\n  /* Flat */\n  :host([variant='flat']) {\n    --_cell-bg: var(--otp-cell-bg, var(--color-contrast-100));\n    --_cell-border-color: var(--otp-cell-border-color, var(--_theme-border, var(--color-contrast-200)));\n  }\n\n  :host([variant='flat']) .cell {\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) .cell:hover:not(:disabled) {\n    background: var(--otp-cell-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n    border-color: var(\n      --otp-cell-hover-border-color,\n      color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n    );\n  }\n\n  :host([variant='flat']) .cell:focus {\n    background: var(--otp-cell-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n    border-color: var(--otp-cell-focus-border-color, color-mix(in oklch, var(--_cell-focus-border) 60%, transparent));\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_cell-bg: var(--otp-cell-bg, var(--_theme-backdrop, var(--color-contrast-50)));\n    --_cell-border-color: var(--otp-cell-border-color, color-mix(in oklch, var(--_cell-focus-border) 70%, transparent));\n  }\n\n  :host([variant='bordered']) .cell {\n    color: var(--_theme-base);\n    caret-color: var(--_theme-base);\n  }\n\n  :host([variant='bordered']) .cell:hover:not(:disabled) {\n    border-color: var(--otp-cell-hover-border-color, var(--_cell-focus-border));\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_cell-bg: var(--otp-cell-bg, transparent);\n  }\n\n  :host([variant='outline']) .cell {\n    box-shadow: none;\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) {\n    --_cell-bg: var(--otp-cell-bg, transparent);\n    --_cell-border-color: var(--otp-cell-border-color, transparent);\n  }\n\n  :host([variant='ghost']) .cell {\n    box-shadow: none;\n  }\n\n  :host([variant='ghost']) .cell:hover:not(:disabled) {\n    background: var(--otp-cell-hover-bg, var(--color-contrast-100));\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --_cell-size: var(--size-9);\n    --_cell-font-size: var(--text-base);\n  }\n\n  :host([size='lg']) {\n    --_cell-size: var(--size-14);\n    --_cell-font-size: var(--text-2xl);\n  }\n}\n"],"mappings":""}

package/dist/inputs/otp-input/otp-input.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/inputs/otp-input/otp-input.css?inline
+var e = "@layer refine.base{:host{--_cell-size:var(--otp-cell-size,var(--size-12));--_cell-gap:var(--otp-cell-gap,var(--size-2));--_cell-font-size:var(--otp-cell-font-size,var(--text-xl));--_cell-radius:var(--otp-cell-radius,var(--rounded-lg));--_cell-border:var(--otp-cell-border,var(--border));--_cell-border-color:var(--otp-cell-border-color,var(--color-contrast-300));--_cell-bg:var(--otp-cell-bg,var(--color-canvas));--_cell-focus-border:var(--otp-cell-focus-border,var(--_theme-base,var(--color-contrast-700)));gap:var(--size-1);flex-direction:column;display:inline-flex}.otp-group{gap:var(--_cell-gap);align-items:center;display:flex}.cell{box-sizing:border-box;width:var(--_cell-size);height:var(--_cell-size);font-size:var(--_cell-font-size);font-weight:var(--font-semibold);color:var(--color-contrast-900);text-align:center;caret-color:var(--_cell-focus-border);background:var(--_cell-bg);border:var(--_cell-border) solid var(--_cell-border-color);border-radius:var(--_cell-radius);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);padding:0;line-height:1;display:block}.cell::selection{background:var(--_theme-backdrop,var(--color-contrast-100))}.cell:focus{border-color:var(--_cell-focus-border);box-shadow:0 0 0 var(--border-2) color-mix(in oklch, var(--_cell-focus-border) 20%, transparent);outline:none}.cell:disabled{cursor:not-allowed;opacity:.5}.separator{font-size:var(--_cell-font-size);color:var(--color-contrast-400);-webkit-user-select:none;user-select:none}}@layer refine.variants{:host(:not([variant])),:host([variant=solid]){--_cell-bg:var(--otp-cell-bg,var(--color-contrast-50));--_cell-border-color:var(--otp-cell-border-color,var(--color-contrast-300))}:host(:not([variant])) .cell,:host([variant=solid]) .cell{box-shadow:var(--shadow-2xs)}:host([variant=flat]){--_cell-bg:var(--otp-cell-bg,var(--color-contrast-100));--_cell-border-color:var(--otp-cell-border-color,var(--_theme-border,var(--color-contrast-200)))}:host([variant=flat]) .cell{box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) .cell:hover:not(:disabled){background:var(--otp-cell-hover-bg,color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));border-color:var(--otp-cell-hover-border-color,color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300)))}:host([variant=flat]) .cell:focus{background:var(--otp-cell-focus-bg,color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));border-color:var(--otp-cell-focus-border-color,color-mix(in oklch, var(--_cell-focus-border) 60%, transparent));box-shadow:var(--_theme-shadow)}:host([variant=bordered]){--_cell-bg:var(--otp-cell-bg,var(--_theme-backdrop,var(--color-contrast-50)));--_cell-border-color:var(--otp-cell-border-color,color-mix(in oklch, var(--_cell-focus-border) 70%, transparent))}:host([variant=bordered]) .cell{color:var(--_theme-base);caret-color:var(--_theme-base)}:host([variant=bordered]) .cell:hover:not(:disabled){border-color:var(--otp-cell-hover-border-color,var(--_cell-focus-border))}:host([variant=outline]){--_cell-bg:var(--otp-cell-bg,transparent)}:host([variant=outline]) .cell{box-shadow:none}:host([variant=ghost]){--_cell-bg:var(--otp-cell-bg,transparent);--_cell-border-color:var(--otp-cell-border-color,transparent)}:host([variant=ghost]) .cell{box-shadow:none}:host([variant=ghost]) .cell:hover:not(:disabled){background:var(--otp-cell-hover-bg,var(--color-contrast-100))}}@layer refine.utilities{:host([size=sm]){--_cell-size:var(--size-9);--_cell-font-size:var(--text-base)}:host([size=lg]){--_cell-size:var(--size-14);--_cell-font-size:var(--text-2xl)}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=otp-input.css?inline.js.map

package/dist/inputs/otp-input/otp-input.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input.css?inline.js","names":[],"sources":["../../../src/inputs/otp-input/otp-input.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_cell-size: var(--otp-cell-size, var(--size-12));\n    --_cell-gap: var(--otp-cell-gap, var(--size-2));\n    --_cell-font-size: var(--otp-cell-font-size, var(--text-xl));\n    --_cell-radius: var(--otp-cell-radius, var(--rounded-lg));\n    --_cell-border: var(--otp-cell-border, var(--border));\n    --_cell-border-color: var(--otp-cell-border-color, var(--color-contrast-300));\n    --_cell-bg: var(--otp-cell-bg, var(--color-canvas));\n    --_cell-focus-border: var(--otp-cell-focus-border, var(--_theme-base, var(--color-contrast-700)));\n\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--size-1);\n  }\n\n  .otp-group {\n    display: flex;\n    gap: var(--_cell-gap);\n    align-items: center;\n  }\n\n  .cell {\n    box-sizing: border-box;\n    display: block;\n    width: var(--_cell-size);\n    height: var(--_cell-size);\n    padding: 0;\n    font-size: var(--_cell-font-size);\n    font-weight: var(--font-semibold);\n    line-height: 1;\n    color: var(--color-contrast-900);\n    text-align: center;\n    caret-color: var(--_cell-focus-border);\n    background: var(--_cell-bg);\n    border: var(--_cell-border) solid var(--_cell-border-color);\n    border-radius: var(--_cell-radius);\n    transition:\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  .cell::selection {\n    background: var(--_theme-backdrop, var(--color-contrast-100));\n  }\n\n  .cell:focus {\n    outline: none;\n    border-color: var(--_cell-focus-border);\n    box-shadow: 0 0 0 var(--border-2) color-mix(in oklch, var(--_cell-focus-border) 20%, transparent);\n  }\n\n  .cell:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .separator {\n    font-size: var(--_cell-font-size);\n    color: var(--color-contrast-400);\n    user-select: none;\n  }\n}\n\n@layer refine.variants {\n  /* Solid (default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_cell-bg: var(--otp-cell-bg, var(--color-contrast-50));\n    --_cell-border-color: var(--otp-cell-border-color, var(--color-contrast-300));\n  }\n\n  :host(:not([variant])) .cell,\n  :host([variant='solid']) .cell {\n    box-shadow: var(--shadow-2xs);\n  }\n\n  /* Flat */\n  :host([variant='flat']) {\n    --_cell-bg: var(--otp-cell-bg, var(--color-contrast-100));\n    --_cell-border-color: var(--otp-cell-border-color, var(--_theme-border, var(--color-contrast-200)));\n  }\n\n  :host([variant='flat']) .cell {\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) .cell:hover:not(:disabled) {\n    background: var(--otp-cell-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n    border-color: var(\n      --otp-cell-hover-border-color,\n      color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n    );\n  }\n\n  :host([variant='flat']) .cell:focus {\n    background: var(--otp-cell-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n    border-color: var(--otp-cell-focus-border-color, color-mix(in oklch, var(--_cell-focus-border) 60%, transparent));\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_cell-bg: var(--otp-cell-bg, var(--_theme-backdrop, var(--color-contrast-50)));\n    --_cell-border-color: var(--otp-cell-border-color, color-mix(in oklch, var(--_cell-focus-border) 70%, transparent));\n  }\n\n  :host([variant='bordered']) .cell {\n    color: var(--_theme-base);\n    caret-color: var(--_theme-base);\n  }\n\n  :host([variant='bordered']) .cell:hover:not(:disabled) {\n    border-color: var(--otp-cell-hover-border-color, var(--_cell-focus-border));\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_cell-bg: var(--otp-cell-bg, transparent);\n  }\n\n  :host([variant='outline']) .cell {\n    box-shadow: none;\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) {\n    --_cell-bg: var(--otp-cell-bg, transparent);\n    --_cell-border-color: var(--otp-cell-border-color, transparent);\n  }\n\n  :host([variant='ghost']) .cell {\n    box-shadow: none;\n  }\n\n  :host([variant='ghost']) .cell:hover:not(:disabled) {\n    background: var(--otp-cell-hover-bg, var(--color-contrast-100));\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --_cell-size: var(--size-9);\n    --_cell-font-size: var(--text-base);\n  }\n\n  :host([size='lg']) {\n    --_cell-size: var(--size-14);\n    --_cell-font-size: var(--text-2xl);\n  }\n}\n"],"mappings":""}

package/dist/inputs/otp-input/otp-input.d.ts

@@ -0,0 +1,82 @@
+import type { ComponentSize, ThemeColor, VisualVariant } from '../../types';
+export type OreOtpInputEvents = {
+    change: {
+        complete: boolean;
+        originalEvent?: Event;
+        value: string;
+    };
+    complete: {
+        originalEvent?: Event;
+        value: string;
+    };
+};
+/** OTP Input props */
+export type OreOtpInputProps = {
+    /** Theme color */
+    color?: ThemeColor;
+    /** Make inputs disabled */
+    disabled?: boolean;
+    /** Accessible label */
+    label?: string;
+    /** Number of input cells */
+    length?: number;
+    /** Mask input (show dots instead of characters) */
+    masked?: boolean;
+    /** Form field name */
+    name?: string;
+    /** Show a separator in the middle (e.g. "–") */
+    separator?: string;
+    /** Component size */
+    size?: ComponentSize;
+    /** Input type: 'numeric' (digits only) or 'alphanumeric' */
+    type?: 'numeric' | 'alphanumeric';
+    /** Current value */
+    value?: string;
+    /** Visual variant */
+    variant?: Exclude<VisualVariant, 'text' | 'frost'>;
+};
+/**
+ * A segmented OTP (One-Time Password) input with N individual cells.
+ * Auto-advances focus on input, auto-backs on Backspace, handles paste.
+ *
+ * @element ore-otp-input
+ *
+ * @attr {number} length - Number of cells (default: 6)
+ * @attr {string} type - 'numeric' (default) | 'alphanumeric'
+ * @attr {string} value - Current code value
+ * @attr {boolean} disabled - Disable all cells
+ * @attr {boolean} masked - Show as password
+ * @attr {string} size - 'sm' | 'md' | 'lg'
+ * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {string} name - Form field name
+ * @attr {string} label - Group aria-label
+ * @attr {string} separator - Optional separator character shown in the middle
+ *
+ * @fires change - Emitted whenever a cell changes. detail: { value: string, complete: boolean, originalEvent?: Event }
+ * @fires complete - Emitted when all cells are filled. detail: { value: string, originalEvent?: Event }
+ *
+ * @slot label - Custom label above the OTP input
+ * @slot helper - Custom helper text below the OTP input
+ * @slot error - Custom error content below the OTP input
+ *
+ * @cssprop --otp-cell-size - Width and height of each cell
+ * @cssprop --otp-cell-gap - Gap between cells
+ * @cssprop --otp-cell-font-size - Font size inside cells
+ * @cssprop --otp-cell-radius - Border radius of cells
+ * @cssprop --otp-cell-bg - Cell background color
+ * @cssprop --otp-cell-border-color - Default border color
+ * @cssprop --otp-cell-focus-border - Focused border/caret color
+ * @cssprop --otp-cell-hover-bg - Cell background on hover (flat/ghost variants)
+ * @cssprop --otp-cell-hover-border-color - Cell border on hover (flat/bordered variants)
+ * @cssprop --otp-cell-focus-bg - Cell background when focused (flat variant)
+ * @cssprop --otp-cell-focus-border-color - Cell border when focused (flat variant)
+ *
+ * @part group - Group container.
+ * @part cell - Shadow part for the `cell` element.
+ * @example
+ * ```html
+ * <ore-otp-input length="6" color="primary"></ore-otp-input>
+ * ```
+ */
+export declare const OTP_INPUT_TAG: "ore-otp-input";
+//# sourceMappingURL=otp-input.d.ts.map

package/dist/inputs/otp-input/otp-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input.d.ts","sourceRoot":"","sources":["../../../src/inputs/otp-input/otp-input.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAQ5E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE;QAAE,QAAQ,EAAE,OAAO,CAAC;QAAC,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACpE,QAAQ,EAAE;QAAE,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CACpD,CAAC;AAEF,sBAAsB;AACtB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mDAAmD;IACnD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IAClC,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;CACpD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,aAAa,EAAG,eAAwB,CAAC"}

package/dist/inputs/radio/radio.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@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:var(--color-contrast-500)}.helper-text:not(: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)}}`;exports.default=e;
+//# sourceMappingURL=radio.css?inline.cjs.map

package/dist/inputs/radio/radio.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.css?inline.cjs","names":[],"sources":["../../../src/inputs/radio/radio.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_size: var(--radio-size, var(--size-5));\n    --_font-size: var(--radio-font-size, var(--text-sm));\n    --_bg: var(--radio-bg, var(--color-contrast-200));\n    --_border: var(--radio-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-2));\n    align-items: center;\n    min-height: var(--_touch-target);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .radio-wrapper {\n    position: relative;\n    display: block;\n    flex-shrink: 0;\n    width: var(--_size);\n    height: var(--_size);\n  }\n\n  .circle {\n    position: relative;\n    box-sizing: border-box;\n    width: var(--_size);\n    height: var(--_size);\n    background: var(--_bg);\n    border: var(--border-2) solid var(--_border);\n    border-radius: 50%;\n    transition:\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  /* ========================================\n       Focus State\n       ======================================== */\n\n  :host(:focus-visible) .circle {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Inner Dot\n       ======================================== */\n\n  .dot {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 50%;\n    height: 50%;\n    background: var(--_dot-color);\n    border-radius: 50%;\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.5);\n    transition:\n      opacity var(--transition-spring),\n      transform var(--transition-spring);\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label {\n    font-size: var(--_font-size);\n    color: var(--color-contrast);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    width: 100%;\n    padding-inline-start: calc(var(--_size) + var(--size-2));\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.overrides {\n  /* Map theme variables to radio-specific variables */\n  :host {\n    --_active-bg: var(--radio-checked-bg, var(--_theme-base));\n    --_dot-color: var(--radio-color, var(--_theme-contrast));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked State\n       ======================================== */\n\n  :host([checked]) .circle {\n    background: var(--_active-bg);\n    border-color: var(--_active-bg);\n  }\n\n  :host([checked]) .dot {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n"],"mappings":""}

package/dist/inputs/radio/radio.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/inputs/radio/radio.css?inline
+var e = "@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:var(--color-contrast-500)}.helper-text:not(: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)}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=radio.css?inline.js.map

package/dist/inputs/radio/radio.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.css?inline.js","names":[],"sources":["../../../src/inputs/radio/radio.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_size: var(--radio-size, var(--size-5));\n    --_font-size: var(--radio-font-size, var(--text-sm));\n    --_bg: var(--radio-bg, var(--color-contrast-200));\n    --_border: var(--radio-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-2));\n    align-items: center;\n    min-height: var(--_touch-target);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .radio-wrapper {\n    position: relative;\n    display: block;\n    flex-shrink: 0;\n    width: var(--_size);\n    height: var(--_size);\n  }\n\n  .circle {\n    position: relative;\n    box-sizing: border-box;\n    width: var(--_size);\n    height: var(--_size);\n    background: var(--_bg);\n    border: var(--border-2) solid var(--_border);\n    border-radius: 50%;\n    transition:\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  /* ========================================\n       Focus State\n       ======================================== */\n\n  :host(:focus-visible) .circle {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Inner Dot\n       ======================================== */\n\n  .dot {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 50%;\n    height: 50%;\n    background: var(--_dot-color);\n    border-radius: 50%;\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.5);\n    transition:\n      opacity var(--transition-spring),\n      transform var(--transition-spring);\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label {\n    font-size: var(--_font-size);\n    color: var(--color-contrast);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    width: 100%;\n    padding-inline-start: calc(var(--_size) + var(--size-2));\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.overrides {\n  /* Map theme variables to radio-specific variables */\n  :host {\n    --_active-bg: var(--radio-checked-bg, var(--_theme-base));\n    --_dot-color: var(--radio-color, var(--_theme-contrast));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked State\n       ======================================== */\n\n  :host([checked]) .circle {\n    background: var(--_active-bg);\n    border-color: var(--_active-bg);\n  }\n\n  :host([checked]) .dot {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n"],"mappings":""}

package/dist/inputs/radio/radio.d.ts

@@ -0,0 +1,56 @@
+import type { CheckableProps, ComponentSize, ThemeColor } from '../../types';
+import { type CheckableChangePayload } from '../../headless';
+/** Radio component properties */
+export type OreRadioEvents = {
+    change: CheckableChangePayload;
+};
+export type OreRadioProps = CheckableProps & {
+    /** Theme color */
+    color?: ThemeColor;
+    /** Disable interaction */
+    disabled?: boolean;
+    /** Error message (marks field as invalid) */
+    error?: string;
+    /** Helper text displayed below the radio */
+    helper?: string;
+    /** Component size */
+    size?: ComponentSize;
+};
+/**
+ * A customizable radio button component for mutually exclusive selections.
+ *
+ * @element ore-radio
+ *
+ * @attr {boolean} checked - Checked state
+ * @attr {boolean} disabled - Disable radio interaction
+ * @attr {string} value - Field value (required for radio groups)
+ * @attr {string} name - Form field name (required for radio groups)
+ * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {string} size - Radio size: 'sm' | 'md' | 'lg'
+ * @attr {string} error - Error message (marks field as invalid)
+ * @attr {string} helper - Helper text displayed below the radio
+ *
+ * @fires change - Emitted when radio is selected. detail: { checked: boolean, value: string, originalEvent?: Event }
+ *
+ * @slot - Radio button label text
+ *
+ * @cssprop --radio-size - Control size (width and height)
+ * @cssprop --radio-bg - Unchecked background color
+ * @cssprop --radio-border-color - Unchecked border color
+ * @cssprop --radio-checked-bg - Selected indicator background color
+ * @cssprop --radio-color - Selected indicator dot color
+ * @cssprop --radio-font-size - Label font size
+ * @part radio - The radio wrapper element
+ * @part circle - The visual radio circle
+ * @part label - The label element
+ * @part helper-text - The helper/error text element
+ *
+ * @example
+ * ```html
+ * <ore-radio name="plan" value="free">Free</ore-radio>
+ * <ore-radio name="plan" value="pro" checked color="primary">Pro</ore-radio>
+ * <ore-radio name="plan" value="enterprise" disabled>Enterprise</ore-radio>
+ * ```
+ */
+export declare const RADIO_TAG: "ore-radio";
+//# sourceMappingURL=radio.d.ts.map

package/dist/inputs/radio/radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/inputs/radio/radio.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE7E,OAAO,EAAE,KAAK,sBAAsB,EAAuD,MAAM,gBAAgB,CAAC;AAclH,iCAAiC;AAEjC,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,sBAAsB,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,cAAc,GAAG;IAC3C,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,SAAS,EAAG,WAAoB,CAAC"}

package/dist/inputs/radio-group/radio-group.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{display:block}fieldset{border:none;min-width:0;margin:0;padding:0}legend{margin-bottom:var(--size-2);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-contrast-600);padding:0}legend[hidden]{display:none}.radio-group-items{flex-direction:var(--radio-group-direction,column);gap:var(--radio-group-gap,var(--size-2));display:flex}.helper-text[hidden]{display:none}.helper-text{margin-top:var(--size-1-5);font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-500);padding-left:2px;padding-right:2px}.error-text{margin-top:var(--size-1-5);font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-error);padding-left:2px;padding-right:2px}}@layer refine.variants{:host([orientation=horizontal]) .radio-group-items{--radio-group-direction:row;flex-wrap:wrap}}`;exports.default=e;
+//# sourceMappingURL=radio-group.css?inline.cjs.map

package/dist/inputs/radio-group/radio-group.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.css?inline.cjs","names":[],"sources":["../../../src/inputs/radio-group/radio-group.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: block;\n  }\n\n  fieldset {\n    min-width: 0;\n    padding: 0;\n    margin: 0;\n    border: none;\n  }\n\n  legend {\n    padding: 0;\n    margin-bottom: var(--size-2);\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-600);\n  }\n\n  legend[hidden] {\n    display: none;\n  }\n\n  .radio-group-items {\n    display: flex;\n    flex-direction: var(--radio-group-direction, column);\n    gap: var(--radio-group-gap, var(--size-2));\n  }\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    margin-top: var(--size-1-5);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  .error-text {\n    padding-inline: 2px;\n    margin-top: var(--size-1-5);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-error);\n  }\n}\n\n@layer refine.variants {\n  :host([orientation='horizontal']) .radio-group-items {\n    --radio-group-direction: row;\n\n    flex-wrap: wrap;\n  }\n}\n"],"mappings":""}

package/dist/inputs/radio-group/radio-group.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/inputs/radio-group/radio-group.css?inline
+var e = "@layer refine.base{:host{display:block}fieldset{border:none;min-width:0;margin:0;padding:0}legend{margin-bottom:var(--size-2);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-contrast-600);padding:0}legend[hidden]{display:none}.radio-group-items{flex-direction:var(--radio-group-direction,column);gap:var(--radio-group-gap,var(--size-2));display:flex}.helper-text[hidden]{display:none}.helper-text{margin-top:var(--size-1-5);font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-500);padding-left:2px;padding-right:2px}.error-text{margin-top:var(--size-1-5);font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-error);padding-left:2px;padding-right:2px}}@layer refine.variants{:host([orientation=horizontal]) .radio-group-items{--radio-group-direction:row;flex-wrap:wrap}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=radio-group.css?inline.js.map

package/dist/inputs/radio-group/radio-group.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.css?inline.js","names":[],"sources":["../../../src/inputs/radio-group/radio-group.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: block;\n  }\n\n  fieldset {\n    min-width: 0;\n    padding: 0;\n    margin: 0;\n    border: none;\n  }\n\n  legend {\n    padding: 0;\n    margin-bottom: var(--size-2);\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-600);\n  }\n\n  legend[hidden] {\n    display: none;\n  }\n\n  .radio-group-items {\n    display: flex;\n    flex-direction: var(--radio-group-direction, column);\n    gap: var(--radio-group-gap, var(--size-2));\n  }\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    margin-top: var(--size-1-5);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  .error-text {\n    padding-inline: 2px;\n    margin-top: var(--size-1-5);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-error);\n  }\n}\n\n@layer refine.variants {\n  :host([orientation='horizontal']) .radio-group-items {\n    --radio-group-direction: row;\n\n    flex-wrap: wrap;\n  }\n}\n"],"mappings":""}

package/dist/inputs/radio-group/radio-group.d.ts

@@ -0,0 +1,74 @@
+import { type Readable } from '@vielzeug/ripple';
+import type { ComponentSize, ThemeColor } from '../../types';
+import { type ChoiceChangeDetail } from '../../headless';
+/** Radio group component properties */
+export type OreRadioGroupProps = {
+    /** Theme color tint */
+    color?: ThemeColor;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Error message text */
+    error?: string;
+    /** Helper text displayed below the items */
+    helper?: string;
+    /** Group label text */
+    label?: string;
+    /** Form field name */
+    name?: string;
+    /** Layout orientation */
+    orientation?: 'horizontal' | 'vertical';
+    /** Required field */
+    required?: boolean;
+    /** Items size preset */
+    size?: ComponentSize;
+    /** Initial selected value */
+    value?: string;
+};
+export type RadioGroupContext = {
+    color: Readable<ThemeColor | undefined>;
+    disabled: Readable<boolean>;
+    name: Readable<string | undefined>;
+    select: (value: string, originalEvent?: Event) => void;
+    size: Readable<ComponentSize | undefined>;
+    value: Readable<string | undefined>;
+};
+export declare const RADIO_GROUP_CTX: import("@vielzeug/ore").InjectionKey<RadioGroupContext | undefined>;
+/** Events emitted by the radio-group component */
+export type OreRadioGroupEvents = {
+    /** Emitted when the selection changes */
+    change: ChoiceChangeDetail;
+};
+/**
+ * A group of radio buttons that allows users to select a single option from a set.
+ * Supports keyboard navigation (arrows) and automatic value management.
+ *
+ * @element ore-radio-group
+ *
+ * @attr {string} value - Selected value
+ * @attr {string} name - Form field name
+ * @attr {string} label - Group label
+ * @attr {string} orientation - Layout: 'vertical' | 'horizontal'
+ * @attr {boolean} required - Required field
+ *
+ * @fires change - Emitted when a radio is selected. detail: { values: string[], labels: string[], originalEvent?: Event }
+ *
+ * @slot - Place `ore-radio` elements here
+ *
+ * @cssprop --radio-group-direction - Flex direction of the items list ('row' | 'column')
+ * @cssprop --radio-group-gap - Gap between radio items
+ * @part items - Items container.
+ * @example
+ * ```html
+ * <ore-radio-group name="plan" label="Choose a plan" value="free" required>
+ *   <ore-radio value="free">Free</ore-radio>
+ *   <ore-radio value="pro">Pro</ore-radio>
+ *   <ore-radio value="enterprise">Enterprise</ore-radio>
+ * </ore-radio-group>
+ * <ore-radio-group name="direction" orientation="horizontal" color="primary">
+ *   <ore-radio value="left">Left</ore-radio>
+ *   <ore-radio value="right">Right</ore-radio>
+ * </ore-radio-group>
+ * ```
+ */
+export declare const RADIO_GROUP_TAG: "ore-radio-group";
+//# sourceMappingURL=radio-group.d.ts.map

package/dist/inputs/radio-group/radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/inputs/radio-group/radio-group.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE7D,OAAO,EACL,KAAK,kBAAkB,EAMxB,MAAM,gBAAgB,CAAC;AAMxB,uCAAuC;AACvC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,uBAAuB;IACvB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB;IACxB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,QAAQ,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IACxC,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC5B,IAAI,EAAE,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACnC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACvD,IAAI,EAAE,QAAQ,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAC1C,KAAK,EAAE,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,eAAe,qEAAgE,CAAC;AAE7F,kDAAkD;AAClD,MAAM,MAAM,mBAAmB,GAAG;IAChC,yCAAyC;IACzC,MAAM,EAAE,kBAAkB,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,eAAe,EAAG,iBAA0B,CAAC"}

package/dist/inputs/rating/rating.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@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:var(--color-contrast-500);margin-top:var(--size-1)}.helper-text[role=alert]{color:var(--color-error)}}@media (prefers-reduced-motion:reduce){.sparkle{display:none}}`;exports.default=e;
+//# sourceMappingURL=rating.css?inline.cjs.map

package/dist/inputs/rating/rating.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rating.css?inline.cjs","names":[],"sources":["../../../src/inputs/rating/rating.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_star-size: var(--rating-star-size, var(--size-7));\n    --_color-empty: var(--rating-color-empty, var(--color-contrast-200));\n    --_color-filled: var(--rating-color-filled, var(--_theme-base, var(--color-warning)));\n    --_gap: var(--rating-gap, var(--size-0_5));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    align-items: center;\n  }\n\n  .stars {\n    position: relative;\n    display: flex;\n    gap: var(--_gap);\n    align-items: center;\n  }\n\n  .sparkle-layer {\n    position: absolute;\n    inset: 0;\n    overflow: visible;\n    pointer-events: none;\n  }\n\n  .sparkle {\n    position: absolute;\n    pointer-events: none;\n    background: var(--_color-filled);\n    border-radius: 50%;\n    animation: var(--_motion-animation, sparkle-fly var(--_dur, 500ms) var(--ease-out) forwards);\n  }\n\n  @keyframes sparkle-fly {\n    from {\n      opacity: 0.9;\n      transform: translate(-50%, -50%) rotate(var(--_angle)) translateY(0) scale(1);\n    }\n\n    to {\n      opacity: 0;\n      transform: translate(-50%, -50%) rotate(var(--_angle)) translateY(calc(-1 * var(--_dist))) scale(0);\n    }\n  }\n\n  .star-btn {\n    all: unset;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_star-size);\n    min-width: var(--_touch-target);\n    height: var(--_star-size);\n    min-height: var(--_touch-target);\n    color: var(--_color-empty);\n    cursor: pointer;\n    border-radius: var(--rounded-sm);\n    transition:\n      color var(--transition-fast),\n      transform 120ms var(--ease-spring);\n  }\n\n  .star-btn[data-filled] {\n    color: var(--_color-filled);\n  }\n\n  :host([solid]) .star-btn ore-icon::part(svg) {\n    fill: none;\n  }\n\n  :host([solid]) .star-btn[data-filled] ore-icon::part(svg) {\n    fill: currentcolor;\n  }\n\n  .star-btn:hover:not([disabled]),\n  .star-btn:focus-visible:not([disabled]) {\n    transform: scale(1.08);\n  }\n\n  .star-btn:focus-visible {\n    outline: var(--border-2) solid var(--_color-filled);\n    outline-offset: var(--border-2);\n  }\n\n  .star-btn[disabled] {\n    cursor: default;\n  }\n\n  :host([readonly]) .star-btn,\n  :host([disabled]) .star-btn {\n    pointer-events: none;\n  }\n\n  :host([disabled]) {\n    opacity: 0.5;\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --_star-size: var(--size-5);\n  }\n\n  :host([size='lg']) {\n    --_star-size: var(--size-9);\n  }\n\n  @media (forced-colors: active) {\n    /* Distinguish filled vs unfilled stars with system button colors */\n    .star-btn {\n      color: ButtonText;\n    }\n\n    .star-btn[data-filled] {\n      color: Highlight;\n      forced-color-adjust: none;\n    }\n\n    .star-btn:focus-visible {\n      outline: 2px solid Highlight;\n      box-shadow: none;\n    }\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    width: 100%;\n    margin-block-start: var(--size-1);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sparkle {\n    display: none;\n  }\n}\n"],"mappings":""}

package/dist/inputs/rating/rating.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/inputs/rating/rating.css?inline
+var e = "@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:var(--color-contrast-500);margin-top:var(--size-1)}.helper-text[role=alert]{color:var(--color-error)}}@media (prefers-reduced-motion:reduce){.sparkle{display:none}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=rating.css?inline.js.map