@vielzeug/refine 1.1.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.css?inline.js","names":[],"sources":["../../../src/inputs/slider/slider.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_size: var(--slider-size, var(--size-5));\n    --_height: var(--slider-height, var(--size-3));\n    --_track: var(--slider-track-bg, var(--color-contrast-300));\n    --_fill: var(--slider-fill, var(--color-neutral));\n    --_thumb: var(--slider-thumb-bg, var(--color-contrast-100));\n    --_thumb-size: calc(var(--_size) - var(--size-1));\n    --_font-size: var(--text-sm);\n    --_shadow: var(--color-neutral-focus-shadow);\n\n    position: relative;\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-3));\n    align-items: center;\n    width: 100%;\n    touch-action: none;\n    cursor: pointer;\n    user-select: none;\n  }\n}\n\n/* ========================================\n     Track, Fill & Thumb\n     ======================================== */\n\n.slider-container {\n  position: relative;\n  display: flex;\n  flex: 1;\n  align-items: center;\n  width: 100%;\n  height: var(--_size);\n  min-height: var(--_touch-target);\n}\n\n.slider-track {\n  position: relative;\n  width: 100%;\n  height: var(--_height);\n  background: var(--_track);\n  border-radius: var(--rounded-full);\n}\n\n/* Fill: always driven by --_fill-start / --_fill-width */\n.slider-fill {\n  position: absolute;\n  top: 0;\n  left: var(--_fill-start, 0%);\n  width: var(--_fill-width, 0%);\n  height: 100%;\n  background: var(--_fill);\n  border-radius: var(--rounded-full);\n  transition:\n    left var(--transition-normal),\n    width var(--transition-normal);\n}\n\n:host([data-dragging]) .slider-fill {\n  transition: none;\n}\n\n.slider-thumb {\n  position: absolute;\n  top: 50%;\n  z-index: 1;\n  width: var(--_thumb-size);\n  height: var(--_thumb-size);\n  cursor: grab;\n  background: var(--_thumb);\n  border: 2px solid var(--_fill);\n  border-radius: var(--rounded-full);\n  box-shadow: var(--shadow-sm);\n  transform: translate(-50%, -50%);\n  transition:\n    box-shadow var(--transition-normal),\n    transform var(--transition-fast),\n    left var(--transition-normal);\n  will-change: transform;\n}\n\n:host([data-dragging]) .slider-thumb {\n  transition:\n    box-shadow var(--transition-normal),\n    transform var(--transition-fast);\n}\n\n/* ── Single-value thumb ─────────────────────────────────── */\n\n.slider-thumb-sole {\n  left: var(--_thumb-pos, 0%);\n}\n\n:host(:focus-visible) .slider-thumb-sole,\n:host(:active) .slider-thumb-sole {\n  box-shadow: var(--_shadow);\n  transform: translate(-50%, -50%) scale(1.1);\n}\n\n/* ── Range thumbs ───────────────────────────────────────── */\n\n.slider-thumb-start {\n  left: var(--_thumb-start, 0%);\n}\n\n.slider-thumb-end {\n  left: var(--_thumb-end, 100%);\n}\n\n.slider-thumb-start:focus-visible,\n.slider-thumb-end:focus-visible {\n  z-index: 2;\n  cursor: grabbing;\n  outline: var(--border-2) solid var(--_fill);\n  outline-offset: 2px;\n  box-shadow: var(--_shadow);\n  transform: translate(-50%, -50%) scale(1.1);\n}\n\n/* ── Visibility gating ──────────────────────────────────── */\n\n:host(:not([range])) .slider-thumb-start,\n:host(:not([range])) .slider-thumb-end {\n  display: none;\n}\n\n:host([range]) .slider-thumb-sole {\n  display: none;\n}\n\n@media (forced-colors: active) {\n  /* Replace box-shadow focus ring with outline for sole-thumb focus visibility */\n  :host(:focus-visible) .slider-thumb-sole {\n    outline: 2px solid Highlight;\n    outline-offset: 2px;\n    box-shadow: none;\n  }\n}\n\n@layer refine.overrides {\n  :host {\n    --_fill: var(--slider-fill, var(--_theme-base));\n    --_shadow: var(--_theme-shadow);\n  }\n}\n\n/* ========================================\n     Label\n     ======================================== */\n\n.label {\n  font-size: var(--_font-size);\n  color: var(--color-contrast);\n  white-space: nowrap;\n}\n\n.helper-text[hidden] {\n  display: none;\n}\n\n.helper-text {\n  width: 100%;\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@media (pointer: coarse) {\n  :host {\n    --_thumb-size: calc(var(--_size) + var(--size-2));\n    --_size: var(--size-7);\n  }\n}\n"],"mappings":""}

package/dist/inputs/slider/slider.d.ts

@@ -0,0 +1,95 @@
+import type { ComponentSize, ThemeColor } from '../../types';
+/** Slider component properties */
+export type OreSliderEvents = {
+    change: {
+        from?: number;
+        originalEvent?: Event;
+        to?: number;
+        value: number | {
+            from: number;
+            to: number;
+        };
+    };
+};
+export type OreSliderProps = {
+    /** Theme color */
+    color?: ThemeColor;
+    /** Disable interaction */
+    disabled?: boolean;
+    /** Error message — marks the field as invalid (fallback when the `error` slot is empty) */
+    error?: string;
+    /** Range mode: lower bound */
+    from?: number | string;
+    /** Range mode a11y label for the start thumb (e.g. "$20") */
+    'from-value-text'?: string;
+    /** Helper text displayed below the slider (fallback when the `helper` slot is empty) */
+    helper?: string;
+    /** Maximum value */
+    max?: number | string;
+    /** Minimum value */
+    min?: number | string;
+    /** Single-value mode: form field name */
+    name?: string;
+    /** Activate two-thumb range selection */
+    range?: boolean;
+    /** Component size */
+    size?: ComponentSize;
+    /** Step increment */
+    step?: number | string;
+    /** Range mode: upper bound */
+    to?: number | string;
+    /** Range mode a11y label for the end thumb (e.g. "$80") */
+    'to-value-text'?: string;
+    /** Single-value mode: current value */
+    value?: number | string;
+    /** Single-value mode a11y label override (e.g. "75%"). Overrides raw aria-valuenow. */
+    'value-text'?: string;
+};
+/**
+ * A slider for selecting a single numeric value or a numeric range.
+ *
+ * Add the boolean `range` attribute to activate two-thumb range mode.
+ *
+ * @element ore-slider
+ *
+ * @attr {number}  min   - Minimum value (default: 0)
+ * @attr {number}  max   - Maximum value (default: 100)
+ * @attr {number}  step  - Step increment (default: 1)
+ * @attr {number}  value - Current value (single mode)
+ * @attr {number}  from  - Lower bound (range mode)
+ * @attr {number}  to    - Upper bound (range mode)
+ * @attr {boolean} range - Activate range mode
+ * @attr {boolean} disabled - Disable interaction
+ * @attr {string}  name  - Form field name (single mode)
+ * @attr {string}  color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {string}  size  - 'sm' | 'md' | 'lg'
+ * @attr {string}  helper - Helper text below the slider
+ * @attr {string}  error  - Error message below the slider
+ *
+ * @fires change - detail always includes `value`; single mode: { value: number }, range mode: { value: { from, to }, from, to }, plus optional originalEvent
+ *
+ * @slot - Slider label text
+ *
+ * @part slider      - Slider container
+ * @part track       - Track element
+ * @part fill        - Fill element
+ * @part thumb       - Single-value thumb
+ * @part thumb-start - Range start thumb
+ * @part thumb-end   - Range end thumb
+ * @part label       - Label element
+ * @part helper-text - The helper/error text element
+ *
+ * @cssprop --slider-height    - Track height
+ * @cssprop --slider-size      - Thumb dimensions
+ * @cssprop --slider-track-bg  - Track background color
+ * @cssprop --slider-fill      - Active fill color
+ * @cssprop --slider-thumb-bg  - Thumb background color
+ *
+ * @example
+ * ```html
+ * <ore-slider value="50" name="volume">Volume</ore-slider>
+ * <ore-slider range from="20" to="80" color="primary">Price range</ore-slider>
+ * ```
+ */
+export declare const SLIDER_TAG: "ore-slider";
+//# sourceMappingURL=slider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/inputs/slider/slider.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAe7D,kCAAkC;AAElC,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,CAAC;CAC7G,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,6DAA6D;IAC7D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wFAAwF;IACxF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,8BAA8B;IAC9B,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,2DAA2D;IAC3D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,uFAAuF;IACvF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,eAAO,MAAM,UAAU,EAAG,YAAqB,CAAC"}

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

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{--_width:var(--switch-width,var(--size-10));--_height:var(--switch-height,var(--size-5));--_padding:var(--size-0-5);--_thumb-size:calc(var(--_height) - var(--_padding) * 2);--_track-bg:var(--switch-track-bg,var(--color-contrast-300));--_thumb-bg:var(--switch-thumb-bg,white);--_font-size:var(--switch-font-size,var(--text-sm));gap:var(--_gap,var(--size-2-5));min-height:var(--size-11);touch-action:manipulation;cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex}.switch-wrapper{flex-shrink:0;display:flex}.switch-track{width:var(--_width);height:var(--_height);background:var(--_track-bg);border-radius:var(--rounded-full);transition:background var(--transition-normal), box-shadow var(--transition-normal);position:relative}.switch-thumb{top:var(--_padding);width:var(--_thumb-size);height:var(--_thumb-size);background:var(--_thumb-bg);border-radius:var(--rounded-full);box-shadow:var(--shadow-sm);transition:transform var(--transition-spring), box-shadow var(--transition-normal);will-change:transform;position:absolute}.switch-thumb: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)){left:var(--_padding)}.switch-thumb: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:var(--_padding)}input:focus-visible~.switch-track{box-shadow:var(--_focus-shadow)}.label{font-size:var(--_font-size);color:var(--color-contrast)}}@layer refine.overrides{:host{--_active-bg:var(--switch-checked-bg,var(--_theme-base));--_focus-shadow:var(--_theme-shadow)}:host([checked]) .switch-track{background:var(--_active-bg)}:host([checked]) .switch-thumb{transform:translateX(calc(var(--_width) - var(--_height)))}:host(:dir(rtl)[checked]) .switch-thumb{transform:translateX(calc(-1 * (var(--_width) - var(--_height))))}:host(:hover:not([disabled],[checked])) .switch-track{background:var(--color-contrast-400)}:host(:hover:not([disabled])[checked]) .switch-track{filter:brightness(1.1)}.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(--_width) + var(--size-2-5))}.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(--_width) + var(--size-2-5))}.helper-text[role=alert]{color:var(--color-error)}}`;exports.default=e;
+//# sourceMappingURL=switch.css?inline.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.css?inline.cjs","names":[],"sources":["../../../src/inputs/switch/switch.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_width: var(--switch-width, var(--size-10));\n    --_height: var(--switch-height, var(--size-5));\n    --_padding: var(--size-0-5);\n    --_thumb-size: calc(var(--_height) - var(--_padding) * 2);\n    --_track-bg: var(--switch-track-bg, var(--color-contrast-300));\n    --_thumb-bg: var(--switch-thumb-bg, white);\n    --_font-size: var(--switch-font-size, var(--text-sm));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-2-5));\n    align-items: center;\n    min-height: var(--size-11);\n    touch-action: manipulation;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  /* ========================================\n       Track & Thumb\n       ======================================== */\n\n  .switch-wrapper {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  .switch-track {\n    position: relative;\n    width: var(--_width);\n    height: var(--_height);\n    background: var(--_track-bg);\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  .switch-thumb {\n    position: absolute;\n    inset-inline-start: var(--_padding);\n    top: var(--_padding);\n    width: var(--_thumb-size);\n    height: var(--_thumb-size);\n    background: var(--_thumb-bg);\n    border-radius: var(--rounded-full);\n    box-shadow: var(--shadow-sm);\n    transition:\n      transform var(--transition-spring),\n      box-shadow var(--transition-normal);\n    will-change: transform;\n  }\n\n  /* ========================================\n       Focus State\n       ======================================== */\n\n  input:focus-visible ~ .switch-track {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label {\n    font-size: var(--_font-size);\n    color: var(--color-contrast);\n  }\n}\n\n@layer refine.overrides {\n  /* Map theme variables to switch-specific variables */\n  :host {\n    --_active-bg: var(--switch-checked-bg, var(--_theme-base));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked State\n       ======================================== */\n\n  :host([checked]) .switch-track {\n    background: var(--_active-bg);\n  }\n\n  :host([checked]) .switch-thumb {\n    transform: translateX(calc(var(--_width) - var(--_height)));\n  }\n\n  /* In RTL the thumb starts at the inline-end edge; slide left to reach inline-start */\n  :host(:dir(rtl)[checked]) .switch-thumb {\n    transform: translateX(calc(-1 * (var(--_width) - var(--_height))));\n  }\n\n  /* ========================================\n       Hover & Active States\n       ======================================== */\n\n  :host(:hover:not([disabled], [checked])) .switch-track {\n    background: var(--color-contrast-400);\n  }\n\n  :host(:hover:not([disabled])[checked]) .switch-track {\n    filter: brightness(1.1);\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(--_width) + var(--size-2-5));\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"],"mappings":""}

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

@@ -0,0 +1,6 @@
+//#region src/inputs/switch/switch.css?inline
+var e = "@layer refine.base{:host{--_width:var(--switch-width,var(--size-10));--_height:var(--switch-height,var(--size-5));--_padding:var(--size-0-5);--_thumb-size:calc(var(--_height) - var(--_padding) * 2);--_track-bg:var(--switch-track-bg,var(--color-contrast-300));--_thumb-bg:var(--switch-thumb-bg,white);--_font-size:var(--switch-font-size,var(--text-sm));gap:var(--_gap,var(--size-2-5));min-height:var(--size-11);touch-action:manipulation;cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex}.switch-wrapper{flex-shrink:0;display:flex}.switch-track{width:var(--_width);height:var(--_height);background:var(--_track-bg);border-radius:var(--rounded-full);transition:background var(--transition-normal), box-shadow var(--transition-normal);position:relative}.switch-thumb{top:var(--_padding);width:var(--_thumb-size);height:var(--_thumb-size);background:var(--_thumb-bg);border-radius:var(--rounded-full);box-shadow:var(--shadow-sm);transition:transform var(--transition-spring), box-shadow var(--transition-normal);will-change:transform;position:absolute}.switch-thumb: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)){left:var(--_padding)}.switch-thumb: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:var(--_padding)}input:focus-visible~.switch-track{box-shadow:var(--_focus-shadow)}.label{font-size:var(--_font-size);color:var(--color-contrast)}}@layer refine.overrides{:host{--_active-bg:var(--switch-checked-bg,var(--_theme-base));--_focus-shadow:var(--_theme-shadow)}:host([checked]) .switch-track{background:var(--_active-bg)}:host([checked]) .switch-thumb{transform:translateX(calc(var(--_width) - var(--_height)))}:host(:dir(rtl)[checked]) .switch-thumb{transform:translateX(calc(-1 * (var(--_width) - var(--_height))))}:host(:hover:not([disabled],[checked])) .switch-track{background:var(--color-contrast-400)}:host(:hover:not([disabled])[checked]) .switch-track{filter:brightness(1.1)}.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(--_width) + var(--size-2-5))}.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(--_width) + var(--size-2-5))}.helper-text[role=alert]{color:var(--color-error)}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=switch.css?inline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.css?inline.js","names":[],"sources":["../../../src/inputs/switch/switch.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_width: var(--switch-width, var(--size-10));\n    --_height: var(--switch-height, var(--size-5));\n    --_padding: var(--size-0-5);\n    --_thumb-size: calc(var(--_height) - var(--_padding) * 2);\n    --_track-bg: var(--switch-track-bg, var(--color-contrast-300));\n    --_thumb-bg: var(--switch-thumb-bg, white);\n    --_font-size: var(--switch-font-size, var(--text-sm));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-2-5));\n    align-items: center;\n    min-height: var(--size-11);\n    touch-action: manipulation;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  /* ========================================\n       Track & Thumb\n       ======================================== */\n\n  .switch-wrapper {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  .switch-track {\n    position: relative;\n    width: var(--_width);\n    height: var(--_height);\n    background: var(--_track-bg);\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  .switch-thumb {\n    position: absolute;\n    inset-inline-start: var(--_padding);\n    top: var(--_padding);\n    width: var(--_thumb-size);\n    height: var(--_thumb-size);\n    background: var(--_thumb-bg);\n    border-radius: var(--rounded-full);\n    box-shadow: var(--shadow-sm);\n    transition:\n      transform var(--transition-spring),\n      box-shadow var(--transition-normal);\n    will-change: transform;\n  }\n\n  /* ========================================\n       Focus State\n       ======================================== */\n\n  input:focus-visible ~ .switch-track {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label {\n    font-size: var(--_font-size);\n    color: var(--color-contrast);\n  }\n}\n\n@layer refine.overrides {\n  /* Map theme variables to switch-specific variables */\n  :host {\n    --_active-bg: var(--switch-checked-bg, var(--_theme-base));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked State\n       ======================================== */\n\n  :host([checked]) .switch-track {\n    background: var(--_active-bg);\n  }\n\n  :host([checked]) .switch-thumb {\n    transform: translateX(calc(var(--_width) - var(--_height)));\n  }\n\n  /* In RTL the thumb starts at the inline-end edge; slide left to reach inline-start */\n  :host(:dir(rtl)[checked]) .switch-thumb {\n    transform: translateX(calc(-1 * (var(--_width) - var(--_height))));\n  }\n\n  /* ========================================\n       Hover & Active States\n       ======================================== */\n\n  :host(:hover:not([disabled], [checked])) .switch-track {\n    background: var(--color-contrast-400);\n  }\n\n  :host(:hover:not([disabled])[checked]) .switch-track {\n    filter: brightness(1.1);\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(--_width) + var(--size-2-5));\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"],"mappings":""}

package/dist/inputs/switch/switch.d.ts

@@ -0,0 +1,56 @@
+import type { CheckableProps, ComponentSize, ThemeColor } from '../../types';
+import { type CheckableChangePayload } from '../../headless';
+export type OreSwitchEvents = {
+    change: CheckableChangePayload;
+};
+export type OreSwitchProps = CheckableProps & {
+    /** Theme color */
+    color?: ThemeColor;
+    /** Disable interaction */
+    disabled?: boolean;
+    /** Error message (marks field as invalid) */
+    error?: string;
+    /** Helper text displayed below the switch */
+    helper?: string;
+    /** Component size */
+    size?: ComponentSize;
+};
+/**
+ * A toggle switch component for binary on/off states.
+ *
+ * @element ore-switch
+ *
+ * @attr {boolean} checked - Checked/on state
+ * @attr {boolean} disabled - Disable switch interaction
+ * @attr {string} value - Field value
+ * @attr {string} name - Form field name
+ * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {string} size - Switch size: 'sm' | 'md' | 'lg'
+ * @attr {string} error - Error message (marks field as invalid)
+ * @attr {string} helper - Helper text displayed below the switch
+ *
+ * @fires change - Emitted when switch is toggled. detail: { checked: boolean, value: string, originalEvent?: Event }
+ *
+ * @slot - Switch label text
+ *
+ * @cssprop --switch-width - Track width
+ * @cssprop --switch-height - Track height
+ * @cssprop --switch-track-bg - Inactive track background color
+ * @cssprop --switch-checked-bg - Active/checked track background color
+ * @cssprop --switch-thumb-bg - Thumb background color
+ * @cssprop --switch-font-size - Label font size
+ * @part switch - The switch wrapper element
+ * @part track - The switch track element
+ * @part thumb - The switch thumb element
+ * @part label - The label element
+ * @part helper-text - The helper/error text element
+ *
+ * @example
+ * ```html
+ * <ore-switch name="notifications" checked color="primary">Enable notifications</ore-switch>
+ * <ore-switch name="darkMode" size="sm">Dark mode</ore-switch>
+ * <ore-switch disabled helper="Contact admin to change">Admin only</ore-switch>
+ * ```
+ */
+export declare const SWITCH_TAG: "ore-switch";
+//# sourceMappingURL=switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/inputs/switch/switch.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE7E,OAAO,EAAE,KAAK,sBAAsB,EAAoC,MAAM,gBAAgB,CAAC;AAQ/F,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,sBAAsB,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,cAAc,GAAG;IAC5C,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,UAAU,EAAG,YAAqB,CAAC"}

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

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{--_font-size:var(--textarea-font-size,var(--text-sm));--_gap:var(--textarea-gap,var(--size-2));--_padding:var(--textarea-padding,var(--size-2) var(--size-3));--_radius:var(--textarea-radius,var(--rounded-lg));--_placeholder:var(--textarea-placeholder-color,var(--color-contrast-500));--_bg:var(--textarea-bg,var(--color-contrast-100));--_border-color:var(--textarea-border-color,var(--color-contrast-300));--_min-height:var(--textarea-min-height,var(--size-24));--_max-height:var(--textarea-max-height,none);--_resize:var(--textarea-resize,vertical);flex-direction:column;align-items:stretch;min-width:12rem;display:inline-flex}.textarea-wrapper{gap:var(--size-1-5);flex-direction:column;min-width:0;display:flex}:host(:not([label-placement=outside])) .textarea-wrapper{position:relative}:host(:not([label-placement=outside])) .label{z-index:1;pointer-events:none;top:var(--size-2);position:absolute}:host(:not([label-placement=outside])) .label: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)){left:var(--_padding-x,var(--size-3))}:host(:not([label-placement=outside])) .label: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:var(--_padding-x,var(--size-3))}:host(:not([label-placement=outside])) .textarea-wrapper:has(.label:not([hidden])) .field{padding-top:calc(var(--size-2) + 1lh + 2px)}.field{box-sizing:border-box;min-width:0;padding:var(--_padding);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--shadow-2xs);transition:background var(--transition-fast), backdrop-filter var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);display:grid}.label,label.label{font-size:var(--text-xs);font-weight:var(--font-medium);line-height:var(--leading-tight);color:var(--color-contrast-500);cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--transition-fast);margin-bottom:2px}:host([label-placement=outside]) .label,:host([label-placement=outside]) label.label{font-size:var(--text-sm);line-height:var(--leading-none);margin-bottom:0}.helper-text[hidden]{display:none}.helper-text{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-500);padding-left:2px;padding-right:2px}textarea{box-sizing:border-box;min-width:12rem;min-height:var(--_min-height);max-height:var(--_max-height);font:inherit;font-size:var(--_font-size);line-height:var(--leading-relaxed);color:var(--textarea-color,var(--text-color-body));resize:vertical;background:0 0;border:none;outline:none;padding:0}textarea::placeholder{color:var(--_placeholder);transition:color var(--transition-fast)}textarea:focus-visible{outline:none}.counter{margin-top:var(--size-1);font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400);transition:color var(--transition-fast);align-self:flex-end;padding-left:2px;padding-right:2px}.counter.near-limit{color:var(--color-warning)}.counter.at-limit{color:var(--color-error)}:host(:not([disabled],[variant=bordered],[variant=flat])) .field:hover{border-color:var(--color-contrast-400)}:host(:not([disabled],[variant=text],[variant=flat])) .field:focus-within{background:var(--color-canvas);border-color:var(--_theme-focus);box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow))}:host(:not([disabled])) .field:focus-within~.label{color:var(--_theme-focus)}:host(:not([disabled])) .textarea-wrapper:has(.field:focus-within) .label{color:var(--_theme-focus)}:host([error]:not([error=""])) .field{border-color:var(--color-error)}:host([error]:not([error=""])) .field:focus-within{border-color:var(--color-error);box-shadow:var(--color-error-focus-shadow)}:host([error]:not([error=""])) .label{color:var(--color-error)}}@layer refine.variants{:host(:not([variant])),:host([variant=solid]){--_bg:var(--textarea-bg,var(--color-contrast-50));--_border-color:var(--textarea-border-color,var(--color-contrast-300))}:host(:not([variant])) .field,:host([variant=solid]) .field{box-shadow:var(--shadow-2xs)}:host(:not([variant],[disabled])) .field:focus-within,:host([variant=solid]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=flat]){--_bg:var(--textarea-bg,var(--color-contrast-100));--_border-color:var(--textarea-border-color,var(--_theme-border))}:host([variant=flat]) .field{box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) .field:hover{background:var(--textarea-hover-bg,color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));border-color:var(--textarea-hover-border-color,color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300)))}:host([variant=flat]) .field:focus-within{background:var(--textarea-focus-bg,color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));border-color:var(--textarea-focus-border-color,color-mix(in oklch, var(--_theme-focus) 60%, transparent));box-shadow:var(--_theme-shadow)}:host([variant=bordered]){--_bg:var(--textarea-bg,var(--_theme-backdrop));--_border-color:var(--textarea-border-color,color-mix(in oklch, var(--_theme-focus) 70%, transparent))}:host([variant=bordered]) textarea{color:var(--_theme-base)}:host([variant=bordered]) textarea::placeholder{color:var(--textarea-placeholder-color,color-mix(in oklch, var(--_theme-base) 45%, transparent))}:host([variant=bordered]) .field:hover{border-color:var(--textarea-hover-border-color,var(--_theme-focus))}:host([variant=outline]){--_bg:var(--textarea-bg,transparent)}:host([variant=outline]) .field{box-shadow:none}:host([variant=outline]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=ghost]){--_bg:var(--textarea-bg,transparent);--_border-color:var(--textarea-border-color,transparent)}:host([variant=ghost]) .field{box-shadow:none}:host([variant=ghost]) .field:hover{background:var(--textarea-hover-bg,var(--color-contrast-100))}:host([variant=ghost]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}}@layer refine.utilities{:host([auto-resize]) textarea{overflow:hidden}:host([fullwidth]){width:100%}}`;exports.default=e;
+//# sourceMappingURL=textarea.css?inline.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.css?inline.cjs","names":[],"sources":["../../../src/inputs/textarea/textarea.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_font-size: var(--textarea-font-size, var(--text-sm));\n    --_gap: var(--textarea-gap, var(--size-2));\n    --_padding: var(--textarea-padding, var(--size-2) var(--size-3));\n    --_radius: var(--textarea-radius, var(--rounded-lg));\n    --_placeholder: var(--textarea-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--textarea-bg, var(--color-contrast-100));\n    --_border-color: var(--textarea-border-color, var(--color-contrast-300));\n    --_min-height: var(--textarea-min-height, var(--size-24));\n    --_max-height: var(--textarea-max-height, none);\n    --_resize: var(--textarea-resize, vertical);\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: 12rem;\n  }\n\n  .textarea-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1-5);\n    min-width: 0; /* Allow shrinking below content size */\n  }\n\n  /* Inset placement (default): label positioned inside field border */\n  :host(:not([label-placement='outside'])) .textarea-wrapper {\n    position: relative;\n  }\n\n  :host(:not([label-placement='outside'])) .label {\n    position: absolute;\n    inset-block-start: var(--size-2);\n    inset-inline-start: var(--_padding-x, var(--size-3));\n    z-index: 1;\n    pointer-events: none;\n  }\n\n  :host(:not([label-placement='outside'])) .textarea-wrapper:has(.label:not([hidden])) .field {\n    padding-block-start: calc(var(--size-2) + 1lh + 2px);\n  }\n\n  .field {\n    box-sizing: border-box;\n    display: grid; /* Grid automatically sizes to content */\n    min-width: 0; /* Allow shrinking */\n    padding: var(--_padding);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-2xs);\n    transition:\n      background var(--transition-fast),\n      backdrop-filter var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  /* ========================================\n       Label Styles\n       ======================================== */\n\n  .label,\n  label.label {\n    /* Default: inset style */\n    margin-bottom: 2px;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    user-select: none;\n    transition: color var(--transition-fast);\n  }\n\n  /* Outside placement overrides */\n  :host([label-placement='outside']) .label,\n  :host([label-placement='outside']) label.label {\n    margin-bottom: 0;\n    font-size: var(--text-sm);\n    line-height: var(--leading-none);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  /* ========================================\n       Textarea Element\n       ======================================== */\n\n  textarea {\n    box-sizing: border-box;\n    min-width: 12rem; /* Match :host min-width to prevent resize below minimum */\n    min-height: var(--_min-height);\n    max-height: var(--_max-height);\n    padding: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-relaxed);\n    color: var(--textarea-color, var(--text-color-body));\n    resize: vertical; /* Default resize, can be overridden by inline style */\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  textarea::placeholder {\n    color: var(--_placeholder);\n    transition: color var(--transition-fast);\n  }\n\n  textarea:focus-visible {\n    outline: none;\n  }\n\n  /* ========================================\n       Character Counter\n       ======================================== */\n\n  .counter {\n    align-self: flex-end;\n    padding-inline: 2px;\n    margin-top: var(--size-1);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n    transition: color var(--transition-fast);\n  }\n\n  .counter.near-limit {\n    color: var(--color-warning);\n  }\n\n  .counter.at-limit {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Hover & Focus States\n       ======================================== */\n\n  :host(:not([disabled], [variant='bordered'], [variant='flat'])) .field:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled], [variant='text'], [variant='flat'])) .field:focus-within {\n    background: var(--color-canvas);\n    border-color: var(--_theme-focus);\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host(:not([disabled])) .field:focus-within ~ .label,\n  :host(:not([disabled])) .textarea-wrapper:has(.field:focus-within) .label {\n    color: var(--_theme-focus);\n  }\n\n  /* Error State */\n  :host([error]:not([error=''])) .field {\n    border-color: var(--color-error);\n  }\n\n  :host([error]:not([error=''])) .field:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  :host([error]:not([error=''])) .label {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.variants {\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--textarea-bg, var(--color-contrast-50));\n    --_border-color: var(--textarea-border-color, var(--color-contrast-300));\n  }\n\n  :host(:not([variant])) .field,\n  :host([variant='solid']) .field {\n    box-shadow: var(--shadow-2xs);\n  }\n\n  :host(:not([variant], [disabled])) .field:focus-within,\n  :host([variant='solid']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Flat */\n  :host([variant='flat']) {\n    --_bg: var(--textarea-bg, var(--color-contrast-100));\n    --_border-color: var(--textarea-border-color, var(--_theme-border));\n  }\n\n  :host([variant='flat']) .field {\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) .field:hover {\n    background: var(--textarea-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n    border-color: var(\n      --textarea-hover-border-color,\n      color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n    );\n  }\n\n  :host([variant='flat']) .field:focus-within {\n    background: var(--textarea-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n    border-color: var(--textarea-focus-border-color, color-mix(in oklch, var(--_theme-focus) 60%, transparent));\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_bg: var(--textarea-bg, var(--_theme-backdrop));\n    --_border-color: var(--textarea-border-color, color-mix(in oklch, var(--_theme-focus) 70%, transparent));\n  }\n\n  :host([variant='bordered']) textarea {\n    color: var(--_theme-base);\n  }\n\n  :host([variant='bordered']) textarea::placeholder {\n    color: var(--textarea-placeholder-color, color-mix(in oklch, var(--_theme-base) 45%, transparent));\n  }\n\n  :host([variant='bordered']) .field:hover {\n    border-color: var(--textarea-hover-border-color, var(--_theme-focus));\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_bg: var(--textarea-bg, transparent);\n  }\n\n  :host([variant='outline']) .field {\n    box-shadow: none;\n  }\n\n  :host([variant='outline']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) {\n    --_bg: var(--textarea-bg, transparent);\n    --_border-color: var(--textarea-border-color, transparent);\n  }\n\n  :host([variant='ghost']) .field {\n    box-shadow: none;\n  }\n\n  :host([variant='ghost']) .field:hover {\n    background: var(--textarea-hover-bg, var(--color-contrast-100));\n  }\n\n  :host([variant='ghost']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n}\n\n@layer refine.utilities {\n  /* Auto-resize hides overflow */\n  :host([auto-resize]) textarea {\n    overflow: hidden;\n  }\n\n  /* Full width */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,6 @@
+//#region src/inputs/textarea/textarea.css?inline
+var e = "@layer refine.base{:host{--_font-size:var(--textarea-font-size,var(--text-sm));--_gap:var(--textarea-gap,var(--size-2));--_padding:var(--textarea-padding,var(--size-2) var(--size-3));--_radius:var(--textarea-radius,var(--rounded-lg));--_placeholder:var(--textarea-placeholder-color,var(--color-contrast-500));--_bg:var(--textarea-bg,var(--color-contrast-100));--_border-color:var(--textarea-border-color,var(--color-contrast-300));--_min-height:var(--textarea-min-height,var(--size-24));--_max-height:var(--textarea-max-height,none);--_resize:var(--textarea-resize,vertical);flex-direction:column;align-items:stretch;min-width:12rem;display:inline-flex}.textarea-wrapper{gap:var(--size-1-5);flex-direction:column;min-width:0;display:flex}:host(:not([label-placement=outside])) .textarea-wrapper{position:relative}:host(:not([label-placement=outside])) .label{z-index:1;pointer-events:none;top:var(--size-2);position:absolute}:host(:not([label-placement=outside])) .label: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)){left:var(--_padding-x,var(--size-3))}:host(:not([label-placement=outside])) .label: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:var(--_padding-x,var(--size-3))}:host(:not([label-placement=outside])) .textarea-wrapper:has(.label:not([hidden])) .field{padding-top:calc(var(--size-2) + 1lh + 2px)}.field{box-sizing:border-box;min-width:0;padding:var(--_padding);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--shadow-2xs);transition:background var(--transition-fast), backdrop-filter var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);display:grid}.label,label.label{font-size:var(--text-xs);font-weight:var(--font-medium);line-height:var(--leading-tight);color:var(--color-contrast-500);cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--transition-fast);margin-bottom:2px}:host([label-placement=outside]) .label,:host([label-placement=outside]) label.label{font-size:var(--text-sm);line-height:var(--leading-none);margin-bottom:0}.helper-text[hidden]{display:none}.helper-text{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-500);padding-left:2px;padding-right:2px}textarea{box-sizing:border-box;min-width:12rem;min-height:var(--_min-height);max-height:var(--_max-height);font:inherit;font-size:var(--_font-size);line-height:var(--leading-relaxed);color:var(--textarea-color,var(--text-color-body));resize:vertical;background:0 0;border:none;outline:none;padding:0}textarea::placeholder{color:var(--_placeholder);transition:color var(--transition-fast)}textarea:focus-visible{outline:none}.counter{margin-top:var(--size-1);font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400);transition:color var(--transition-fast);align-self:flex-end;padding-left:2px;padding-right:2px}.counter.near-limit{color:var(--color-warning)}.counter.at-limit{color:var(--color-error)}:host(:not([disabled],[variant=bordered],[variant=flat])) .field:hover{border-color:var(--color-contrast-400)}:host(:not([disabled],[variant=text],[variant=flat])) .field:focus-within{background:var(--color-canvas);border-color:var(--_theme-focus);box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow))}:host(:not([disabled])) .field:focus-within~.label{color:var(--_theme-focus)}:host(:not([disabled])) .textarea-wrapper:has(.field:focus-within) .label{color:var(--_theme-focus)}:host([error]:not([error=\"\"])) .field{border-color:var(--color-error)}:host([error]:not([error=\"\"])) .field:focus-within{border-color:var(--color-error);box-shadow:var(--color-error-focus-shadow)}:host([error]:not([error=\"\"])) .label{color:var(--color-error)}}@layer refine.variants{:host(:not([variant])),:host([variant=solid]){--_bg:var(--textarea-bg,var(--color-contrast-50));--_border-color:var(--textarea-border-color,var(--color-contrast-300))}:host(:not([variant])) .field,:host([variant=solid]) .field{box-shadow:var(--shadow-2xs)}:host(:not([variant],[disabled])) .field:focus-within,:host([variant=solid]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=flat]){--_bg:var(--textarea-bg,var(--color-contrast-100));--_border-color:var(--textarea-border-color,var(--_theme-border))}:host([variant=flat]) .field{box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) .field:hover{background:var(--textarea-hover-bg,color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));border-color:var(--textarea-hover-border-color,color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300)))}:host([variant=flat]) .field:focus-within{background:var(--textarea-focus-bg,color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));border-color:var(--textarea-focus-border-color,color-mix(in oklch, var(--_theme-focus) 60%, transparent));box-shadow:var(--_theme-shadow)}:host([variant=bordered]){--_bg:var(--textarea-bg,var(--_theme-backdrop));--_border-color:var(--textarea-border-color,color-mix(in oklch, var(--_theme-focus) 70%, transparent))}:host([variant=bordered]) textarea{color:var(--_theme-base)}:host([variant=bordered]) textarea::placeholder{color:var(--textarea-placeholder-color,color-mix(in oklch, var(--_theme-base) 45%, transparent))}:host([variant=bordered]) .field:hover{border-color:var(--textarea-hover-border-color,var(--_theme-focus))}:host([variant=outline]){--_bg:var(--textarea-bg,transparent)}:host([variant=outline]) .field{box-shadow:none}:host([variant=outline]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=ghost]){--_bg:var(--textarea-bg,transparent);--_border-color:var(--textarea-border-color,transparent)}:host([variant=ghost]) .field{box-shadow:none}:host([variant=ghost]) .field:hover{background:var(--textarea-hover-bg,var(--color-contrast-100))}:host([variant=ghost]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}}@layer refine.utilities{:host([auto-resize]) textarea{overflow:hidden}:host([fullwidth]){width:100%}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=textarea.css?inline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.css?inline.js","names":[],"sources":["../../../src/inputs/textarea/textarea.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_font-size: var(--textarea-font-size, var(--text-sm));\n    --_gap: var(--textarea-gap, var(--size-2));\n    --_padding: var(--textarea-padding, var(--size-2) var(--size-3));\n    --_radius: var(--textarea-radius, var(--rounded-lg));\n    --_placeholder: var(--textarea-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--textarea-bg, var(--color-contrast-100));\n    --_border-color: var(--textarea-border-color, var(--color-contrast-300));\n    --_min-height: var(--textarea-min-height, var(--size-24));\n    --_max-height: var(--textarea-max-height, none);\n    --_resize: var(--textarea-resize, vertical);\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: 12rem;\n  }\n\n  .textarea-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1-5);\n    min-width: 0; /* Allow shrinking below content size */\n  }\n\n  /* Inset placement (default): label positioned inside field border */\n  :host(:not([label-placement='outside'])) .textarea-wrapper {\n    position: relative;\n  }\n\n  :host(:not([label-placement='outside'])) .label {\n    position: absolute;\n    inset-block-start: var(--size-2);\n    inset-inline-start: var(--_padding-x, var(--size-3));\n    z-index: 1;\n    pointer-events: none;\n  }\n\n  :host(:not([label-placement='outside'])) .textarea-wrapper:has(.label:not([hidden])) .field {\n    padding-block-start: calc(var(--size-2) + 1lh + 2px);\n  }\n\n  .field {\n    box-sizing: border-box;\n    display: grid; /* Grid automatically sizes to content */\n    min-width: 0; /* Allow shrinking */\n    padding: var(--_padding);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-2xs);\n    transition:\n      background var(--transition-fast),\n      backdrop-filter var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  /* ========================================\n       Label Styles\n       ======================================== */\n\n  .label,\n  label.label {\n    /* Default: inset style */\n    margin-bottom: 2px;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    user-select: none;\n    transition: color var(--transition-fast);\n  }\n\n  /* Outside placement overrides */\n  :host([label-placement='outside']) .label,\n  :host([label-placement='outside']) label.label {\n    margin-bottom: 0;\n    font-size: var(--text-sm);\n    line-height: var(--leading-none);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  /* ========================================\n       Textarea Element\n       ======================================== */\n\n  textarea {\n    box-sizing: border-box;\n    min-width: 12rem; /* Match :host min-width to prevent resize below minimum */\n    min-height: var(--_min-height);\n    max-height: var(--_max-height);\n    padding: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-relaxed);\n    color: var(--textarea-color, var(--text-color-body));\n    resize: vertical; /* Default resize, can be overridden by inline style */\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  textarea::placeholder {\n    color: var(--_placeholder);\n    transition: color var(--transition-fast);\n  }\n\n  textarea:focus-visible {\n    outline: none;\n  }\n\n  /* ========================================\n       Character Counter\n       ======================================== */\n\n  .counter {\n    align-self: flex-end;\n    padding-inline: 2px;\n    margin-top: var(--size-1);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n    transition: color var(--transition-fast);\n  }\n\n  .counter.near-limit {\n    color: var(--color-warning);\n  }\n\n  .counter.at-limit {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Hover & Focus States\n       ======================================== */\n\n  :host(:not([disabled], [variant='bordered'], [variant='flat'])) .field:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled], [variant='text'], [variant='flat'])) .field:focus-within {\n    background: var(--color-canvas);\n    border-color: var(--_theme-focus);\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host(:not([disabled])) .field:focus-within ~ .label,\n  :host(:not([disabled])) .textarea-wrapper:has(.field:focus-within) .label {\n    color: var(--_theme-focus);\n  }\n\n  /* Error State */\n  :host([error]:not([error=''])) .field {\n    border-color: var(--color-error);\n  }\n\n  :host([error]:not([error=''])) .field:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  :host([error]:not([error=''])) .label {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.variants {\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--textarea-bg, var(--color-contrast-50));\n    --_border-color: var(--textarea-border-color, var(--color-contrast-300));\n  }\n\n  :host(:not([variant])) .field,\n  :host([variant='solid']) .field {\n    box-shadow: var(--shadow-2xs);\n  }\n\n  :host(:not([variant], [disabled])) .field:focus-within,\n  :host([variant='solid']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Flat */\n  :host([variant='flat']) {\n    --_bg: var(--textarea-bg, var(--color-contrast-100));\n    --_border-color: var(--textarea-border-color, var(--_theme-border));\n  }\n\n  :host([variant='flat']) .field {\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) .field:hover {\n    background: var(--textarea-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n    border-color: var(\n      --textarea-hover-border-color,\n      color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n    );\n  }\n\n  :host([variant='flat']) .field:focus-within {\n    background: var(--textarea-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n    border-color: var(--textarea-focus-border-color, color-mix(in oklch, var(--_theme-focus) 60%, transparent));\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_bg: var(--textarea-bg, var(--_theme-backdrop));\n    --_border-color: var(--textarea-border-color, color-mix(in oklch, var(--_theme-focus) 70%, transparent));\n  }\n\n  :host([variant='bordered']) textarea {\n    color: var(--_theme-base);\n  }\n\n  :host([variant='bordered']) textarea::placeholder {\n    color: var(--textarea-placeholder-color, color-mix(in oklch, var(--_theme-base) 45%, transparent));\n  }\n\n  :host([variant='bordered']) .field:hover {\n    border-color: var(--textarea-hover-border-color, var(--_theme-focus));\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_bg: var(--textarea-bg, transparent);\n  }\n\n  :host([variant='outline']) .field {\n    box-shadow: none;\n  }\n\n  :host([variant='outline']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) {\n    --_bg: var(--textarea-bg, transparent);\n    --_border-color: var(--textarea-border-color, transparent);\n  }\n\n  :host([variant='ghost']) .field {\n    box-shadow: none;\n  }\n\n  :host([variant='ghost']) .field:hover {\n    background: var(--textarea-hover-bg, var(--color-contrast-100));\n  }\n\n  :host([variant='ghost']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n}\n\n@layer refine.utilities {\n  /* Auto-resize hides overflow */\n  :host([auto-resize]) textarea {\n    overflow: hidden;\n  }\n\n  /* Full width */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}

package/dist/inputs/textarea/textarea.d.ts

@@ -0,0 +1,91 @@
+import type { TextFieldProps } from '../../shared';
+import type { VisualVariant } from '../../types';
+/** Textarea component properties */
+export type OreTextareaEvents = {
+    change: {
+        originalEvent: Event;
+        value: string;
+    };
+    input: {
+        originalEvent: Event;
+        value: string;
+    };
+};
+export type OreTextareaProps = TextFieldProps<Exclude<VisualVariant, 'frost' | 'text'>> & {
+    /** Allow auto-grow with content */
+    'auto-resize'?: boolean;
+    /** Maximum character count; shows a counter when set */
+    maxlength?: number;
+    /** Disable a manual resize handle */
+    'no-resize'?: boolean;
+    /**
+     * JS-only callback fired with the inner `<textarea>` element when it mounts,
+     * and with `null` when it unmounts. Intended for composed components that
+     * need imperative access to the raw element.
+     * Set as a JS property: `bitTextarea.ref = (el) => { ... }`.
+     */
+    ref?: ((el: HTMLTextAreaElement | null) => void) | null;
+    /** Resize direction override */
+    resize?: 'none' | 'horizontal' | 'both' | 'vertical';
+    /** Number of visible text rows */
+    rows?: number;
+};
+/**
+ * A multi-line text input with label, helper text, character counter, and auto-resize.
+ *
+ * @element ore-textarea
+ *
+ * @attr {string} label - Label text
+ * @attr {string} label-placement - 'inset' | 'outside'
+ * @attr {string} value - Current value
+ * @attr {string} placeholder - Placeholder text
+ * @attr {string} name - Form field name
+ * @attr {number} rows - Visible row count
+ * @attr {number} maxlength - Max character count (shows counter)
+ * @attr {string} helper - Helper text below the textarea
+ * @attr {string} error - Error message
+ * @attr {boolean} disabled - Disable interaction
+ * @attr {boolean} readonly - Read-only mode
+ * @attr {boolean} required - Required field
+ * @attr {boolean} no-resize - Disable manual resize
+ * @attr {boolean} auto-resize - Grow with content
+ * @attr {string} resize - Resize direction: 'none' | 'horizontal' | 'both' | 'vertical'
+ * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'
+ * @attr {string} size - Component size: 'sm' | 'md' | 'lg'
+ * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
+ *
+ * @fires input - Fired on every keystroke with current value. detail: { value: string; originalEvent: Event }
+ * @fires change - Fired on blur with changed value. detail: { value: string; originalEvent: Event }
+ *
+ * @slot helper - Complex helper content
+ *
+ * @cssprop --textarea-bg - Background color
+ * @cssprop --textarea-border-color - Border color
+ * @cssprop --textarea-placeholder-color - Placeholder text color
+ * @cssprop --textarea-radius - Border radius
+ * @cssprop --textarea-padding - Inner padding (block inline)
+ * @cssprop --textarea-gap - Gap between label and field
+ * @cssprop --textarea-font-size - Font size
+ * @cssprop --textarea-min-height - Minimum field height
+ * @cssprop --textarea-max-height - Maximum field height (none = unlimited)
+ * @cssprop --textarea-resize - CSS resize direction ('vertical' | 'horizontal' | 'both' | 'none')
+ * @cssprop --textarea-hover-bg - Field background on hover (flat/ghost variants)
+ * @cssprop --textarea-hover-border-color - Field border on hover (flat/bordered variants)
+ * @cssprop --textarea-focus-bg - Field background when focused (flat variant)
+ * @cssprop --textarea-focus-border-color - Field border when focused (flat variant)
+ *
+ * @part wrapper - Outer wrapper element.
+ * @part label - Label element.
+ * @part field - Field container.
+ * @part textarea - The native `<textarea>` element.
+ * @part helper - The helper text element.
+ * @part error - The error text element (`role="alert"`).
+ *
+ * @example
+ * ```html
+ * <ore-textarea></ore-textarea>
+ * ```
+ */
+export declare const TEXTAREA_TAG: "ore-textarea";
+//# sourceMappingURL=textarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/inputs/textarea/textarea.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAQjD,oCAAoC;AAEpC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,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,gBAAgB,GAAG,cAAc,CAAC,OAAO,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC,GAAG;IACxF,mCAAmC;IACnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,mBAAmB,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IACxD,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,MAAM,GAAG,UAAU,CAAC;IACrD,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,eAAO,MAAM,YAAY,EAAG,cAAuB,CAAC"}

package/dist/inputs/time-picker/time-picker.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{--_selected-bg:var(--time-picker-selected-bg,var(--_theme-focus));--_hover-bg:var(--time-picker-option-hover-bg,color-mix(in oklch, var(--_selected-bg) 12%, transparent));display:inline-block;position:relative}:host([fullwidth]){display:block}:host([color=secondary]){--_selected-bg:var(--time-picker-selected-bg,var(--_theme-base))}[hidden]{display:none!important}.trigger{cursor:pointer}.trigger::part(input){cursor:pointer;caret-color:#0000;-webkit-user-select:none;user-select:none}.dropdown{top:calc(100% + var(--size-1));z-index:var(--z-dropdown,200);pointer-events:none;background:var(--time-picker-bg,var(--_bg));border:var(--border) solid var(--time-picker-border-color,var(--_border-color));border-radius:var(--time-picker-radius,var(--_radius));min-width:12rem;box-shadow:var(--time-picker-shadow,var(--shadow-lg));opacity:0;-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm));transform:translateY(var(--overlay-enter-translate-y));transition:var(--_motion-transition,opacity var(--transition-fast), transform var(--transition-fast), display var(--transition-fast) allow-discrete);flex-direction:column;display:flex;position:absolute;left:0;overflow:hidden}.dropdown[data-open]{pointer-events:auto;opacity:1;transform:translateY(0)}@starting-style{.dropdown[data-open]{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}.cols-row{flex-direction:row;align-items:stretch;display:flex}.col,.col-sep{flex-direction:column;align-items:center;display:flex}.col{min-width:var(--size-14);border-bottom:var(--border) solid var(--_border-color);flex:1}.col-period{min-width:var(--size-16);flex:none}.col-label{width:100%;padding:var(--size-1) var(--size-2);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-contrast-400);text-align:center;letter-spacing:.05em;border-bottom:var(--border) solid var(--_border-color)}.col-scroll{width:100%;max-height:11rem;padding-block:var(--size-1);scrollbar-width:thin;overflow-y:auto}.col-sep{padding-top:var(--size-8);padding-inline:var(--size-0-5);font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--color-contrast-500);-webkit-user-select:none;user-select:none;border-bottom:var(--border) solid var(--_border-color);flex-shrink:0;justify-content:center;align-items:center;display:flex}.option{height:var(--size-8);padding-inline:var(--size-2);margin-inline:var(--size-1);font-size:var(--text-sm);color:var(--color-contrast-800);cursor:pointer;border-radius:var(--rounded-sm);transition:background var(--transition-fast), color var(--transition-fast);outline:none;justify-content:center;align-items:center;display:flex}.option:hover:not([data-disabled]){color:var(--color-contrast-900);background:var(--_hover-bg)}.option:focus-visible{box-shadow:0 0 0 2px var(--_selected-bg)}.option[aria-selected=true]{font-weight:var(--font-semibold);color:var(--color-white,#fff);background:var(--_selected-bg)}.option[data-disabled]{pointer-events:none;cursor:not-allowed;opacity:.3}@media (prefers-reduced-motion:reduce){.option{transition:none}}}`;exports.default=e;
+//# sourceMappingURL=time-picker.css?inline.cjs.map

package/dist/inputs/time-picker/time-picker.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.css?inline.cjs","names":[],"sources":["../../../src/inputs/time-picker/time-picker.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_selected-bg: var(--time-picker-selected-bg, var(--_theme-focus));\n    --_hover-bg: var(--time-picker-option-hover-bg, color-mix(in oklch, var(--_selected-bg) 12%, transparent));\n\n    position: relative;\n    display: inline-block;\n  }\n\n  :host([fullwidth]) {\n    display: block;\n  }\n\n  :host([color='secondary']) {\n    --_selected-bg: var(--time-picker-selected-bg, var(--_theme-base));\n  }\n\n  /* Prevent display:flex/grid from overriding [hidden] attribute */\n  [hidden] {\n    display: none !important;\n  }\n\n  /* ── Trigger ─────────────────────────────────────────────────────────────── */\n\n  .trigger {\n    cursor: pointer;\n  }\n\n  .trigger::part(input) {\n    cursor: pointer;\n    caret-color: transparent;\n    user-select: none;\n  }\n\n  /* ── Dropdown ────────────────────────────────────────────────────────────── */\n\n  .dropdown {\n    position: absolute;\n    top: calc(100% + var(--size-1));\n    left: 0;\n    z-index: var(--z-dropdown, 200);\n    display: flex;\n    flex-direction: column;\n    min-width: 12rem;\n    overflow: hidden;\n    pointer-events: none;\n    background: var(--time-picker-bg, var(--_bg));\n    border: var(--border) solid var(--time-picker-border-color, var(--_border-color));\n    border-radius: var(--time-picker-radius, var(--_radius));\n    box-shadow: var(--time-picker-shadow, var(--shadow-lg));\n\n    /* Hidden by default */\n    opacity: 0;\n    backdrop-filter: blur(var(--blur-sm));\n    transform: translateY(var(--overlay-enter-translate-y));\n    transition: var(\n      --_motion-transition,\n      opacity var(--transition-fast),\n      transform var(--transition-fast),\n      display var(--transition-fast) allow-discrete\n    );\n  }\n\n  .dropdown[data-open] {\n    pointer-events: auto;\n    opacity: 1;\n    transform: translateY(0);\n\n    @starting-style {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n  }\n\n  /* ── Columns row ────────────────────────────────────────────────────────── */\n\n  .cols-row {\n    display: flex;\n    flex-direction: row;\n    align-items: stretch;\n  }\n\n  /* ── Columns (hours / sep / minutes / [period]) ──────────────────────────── */\n\n  .col,\n  .col-sep {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .col {\n    flex: 1;\n    min-width: var(--size-14);\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  .col-period {\n    flex: 0 0 auto;\n    min-width: var(--size-16);\n  }\n\n  /* ── Column header label ─────────────────────────────────────────────────── */\n\n  .col-label {\n    width: 100%;\n    padding: var(--size-1) var(--size-2);\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-400);\n    text-align: center;\n    letter-spacing: 0.05em;\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  /* ── Scrollable option list ──────────────────────────────────────────────── */\n\n  .col-scroll {\n    width: 100%;\n    max-height: 11rem;\n    padding-block: var(--size-1);\n    overflow-y: auto;\n    scrollbar-width: thin;\n  }\n\n  /* ── Separator between hours and minutes ─────────────────────────────────── */\n\n  .col-sep {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    padding-block-start: var(--size-8); /* visually align with first option row */\n    padding-inline: var(--size-0-5);\n    font-size: var(--text-lg);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    user-select: none;\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  /* ── Option cells ────────────────────────────────────────────────────────── */\n\n  .option {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--size-8);\n    padding-inline: var(--size-2);\n    margin-inline: var(--size-1);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-800);\n    cursor: pointer;\n    outline: none;\n    border-radius: var(--rounded-sm);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .option:hover:not([data-disabled]) {\n    color: var(--color-contrast-900);\n    background: var(--_hover-bg);\n  }\n\n  .option:focus-visible {\n    box-shadow: 0 0 0 2px var(--_selected-bg);\n  }\n\n  .option[aria-selected='true'] {\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    background: var(--_selected-bg);\n  }\n\n  .option[data-disabled] {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.3;\n  }\n\n  /* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .option {\n      transition: none;\n    }\n  }\n}\n"],"mappings":""}

package/dist/inputs/time-picker/time-picker.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/inputs/time-picker/time-picker.css?inline
+var e = "@layer refine.base{:host{--_selected-bg:var(--time-picker-selected-bg,var(--_theme-focus));--_hover-bg:var(--time-picker-option-hover-bg,color-mix(in oklch, var(--_selected-bg) 12%, transparent));display:inline-block;position:relative}:host([fullwidth]){display:block}:host([color=secondary]){--_selected-bg:var(--time-picker-selected-bg,var(--_theme-base))}[hidden]{display:none!important}.trigger{cursor:pointer}.trigger::part(input){cursor:pointer;caret-color:#0000;-webkit-user-select:none;user-select:none}.dropdown{top:calc(100% + var(--size-1));z-index:var(--z-dropdown,200);pointer-events:none;background:var(--time-picker-bg,var(--_bg));border:var(--border) solid var(--time-picker-border-color,var(--_border-color));border-radius:var(--time-picker-radius,var(--_radius));min-width:12rem;box-shadow:var(--time-picker-shadow,var(--shadow-lg));opacity:0;-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm));transform:translateY(var(--overlay-enter-translate-y));transition:var(--_motion-transition,opacity var(--transition-fast), transform var(--transition-fast), display var(--transition-fast) allow-discrete);flex-direction:column;display:flex;position:absolute;left:0;overflow:hidden}.dropdown[data-open]{pointer-events:auto;opacity:1;transform:translateY(0)}@starting-style{.dropdown[data-open]{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}.cols-row{flex-direction:row;align-items:stretch;display:flex}.col,.col-sep{flex-direction:column;align-items:center;display:flex}.col{min-width:var(--size-14);border-bottom:var(--border) solid var(--_border-color);flex:1}.col-period{min-width:var(--size-16);flex:none}.col-label{width:100%;padding:var(--size-1) var(--size-2);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-contrast-400);text-align:center;letter-spacing:.05em;border-bottom:var(--border) solid var(--_border-color)}.col-scroll{width:100%;max-height:11rem;padding-block:var(--size-1);scrollbar-width:thin;overflow-y:auto}.col-sep{padding-top:var(--size-8);padding-inline:var(--size-0-5);font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--color-contrast-500);-webkit-user-select:none;user-select:none;border-bottom:var(--border) solid var(--_border-color);flex-shrink:0;justify-content:center;align-items:center;display:flex}.option{height:var(--size-8);padding-inline:var(--size-2);margin-inline:var(--size-1);font-size:var(--text-sm);color:var(--color-contrast-800);cursor:pointer;border-radius:var(--rounded-sm);transition:background var(--transition-fast), color var(--transition-fast);outline:none;justify-content:center;align-items:center;display:flex}.option:hover:not([data-disabled]){color:var(--color-contrast-900);background:var(--_hover-bg)}.option:focus-visible{box-shadow:0 0 0 2px var(--_selected-bg)}.option[aria-selected=true]{font-weight:var(--font-semibold);color:var(--color-white,#fff);background:var(--_selected-bg)}.option[data-disabled]{pointer-events:none;cursor:not-allowed;opacity:.3}@media (prefers-reduced-motion:reduce){.option{transition:none}}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=time-picker.css?inline.js.map

package/dist/inputs/time-picker/time-picker.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.css?inline.js","names":[],"sources":["../../../src/inputs/time-picker/time-picker.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_selected-bg: var(--time-picker-selected-bg, var(--_theme-focus));\n    --_hover-bg: var(--time-picker-option-hover-bg, color-mix(in oklch, var(--_selected-bg) 12%, transparent));\n\n    position: relative;\n    display: inline-block;\n  }\n\n  :host([fullwidth]) {\n    display: block;\n  }\n\n  :host([color='secondary']) {\n    --_selected-bg: var(--time-picker-selected-bg, var(--_theme-base));\n  }\n\n  /* Prevent display:flex/grid from overriding [hidden] attribute */\n  [hidden] {\n    display: none !important;\n  }\n\n  /* ── Trigger ─────────────────────────────────────────────────────────────── */\n\n  .trigger {\n    cursor: pointer;\n  }\n\n  .trigger::part(input) {\n    cursor: pointer;\n    caret-color: transparent;\n    user-select: none;\n  }\n\n  /* ── Dropdown ────────────────────────────────────────────────────────────── */\n\n  .dropdown {\n    position: absolute;\n    top: calc(100% + var(--size-1));\n    left: 0;\n    z-index: var(--z-dropdown, 200);\n    display: flex;\n    flex-direction: column;\n    min-width: 12rem;\n    overflow: hidden;\n    pointer-events: none;\n    background: var(--time-picker-bg, var(--_bg));\n    border: var(--border) solid var(--time-picker-border-color, var(--_border-color));\n    border-radius: var(--time-picker-radius, var(--_radius));\n    box-shadow: var(--time-picker-shadow, var(--shadow-lg));\n\n    /* Hidden by default */\n    opacity: 0;\n    backdrop-filter: blur(var(--blur-sm));\n    transform: translateY(var(--overlay-enter-translate-y));\n    transition: var(\n      --_motion-transition,\n      opacity var(--transition-fast),\n      transform var(--transition-fast),\n      display var(--transition-fast) allow-discrete\n    );\n  }\n\n  .dropdown[data-open] {\n    pointer-events: auto;\n    opacity: 1;\n    transform: translateY(0);\n\n    @starting-style {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n  }\n\n  /* ── Columns row ────────────────────────────────────────────────────────── */\n\n  .cols-row {\n    display: flex;\n    flex-direction: row;\n    align-items: stretch;\n  }\n\n  /* ── Columns (hours / sep / minutes / [period]) ──────────────────────────── */\n\n  .col,\n  .col-sep {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .col {\n    flex: 1;\n    min-width: var(--size-14);\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  .col-period {\n    flex: 0 0 auto;\n    min-width: var(--size-16);\n  }\n\n  /* ── Column header label ─────────────────────────────────────────────────── */\n\n  .col-label {\n    width: 100%;\n    padding: var(--size-1) var(--size-2);\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-400);\n    text-align: center;\n    letter-spacing: 0.05em;\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  /* ── Scrollable option list ──────────────────────────────────────────────── */\n\n  .col-scroll {\n    width: 100%;\n    max-height: 11rem;\n    padding-block: var(--size-1);\n    overflow-y: auto;\n    scrollbar-width: thin;\n  }\n\n  /* ── Separator between hours and minutes ─────────────────────────────────── */\n\n  .col-sep {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    padding-block-start: var(--size-8); /* visually align with first option row */\n    padding-inline: var(--size-0-5);\n    font-size: var(--text-lg);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    user-select: none;\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  /* ── Option cells ────────────────────────────────────────────────────────── */\n\n  .option {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--size-8);\n    padding-inline: var(--size-2);\n    margin-inline: var(--size-1);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-800);\n    cursor: pointer;\n    outline: none;\n    border-radius: var(--rounded-sm);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .option:hover:not([data-disabled]) {\n    color: var(--color-contrast-900);\n    background: var(--_hover-bg);\n  }\n\n  .option:focus-visible {\n    box-shadow: 0 0 0 2px var(--_selected-bg);\n  }\n\n  .option[aria-selected='true'] {\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    background: var(--_selected-bg);\n  }\n\n  .option[data-disabled] {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.3;\n  }\n\n  /* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .option {\n      transition: none;\n    }\n  }\n}\n"],"mappings":""}

package/dist/inputs/time-picker/time-picker.d.ts

@@ -0,0 +1,103 @@
+import type { VisualVariant } from '../../shared';
+import '../../content/icon/icon';
+import '../input/input';
+export type OreTimePickerEvents = {
+    change: {
+        value: string | null;
+    };
+};
+export type OreTimePickerProps = {
+    /** Theme color */
+    color?: string;
+    /** Disable the picker */
+    disabled?: boolean;
+    /** Validation error message */
+    error?: string;
+    /** Expand to container width */
+    fullwidth?: boolean;
+    /** Helper text below the field */
+    helper?: string;
+    /** Visible label */
+    label?: string;
+    /** Label placement */
+    'label-placement'?: 'inset' | 'outside';
+    /** Maximum selectable time in HH:MM format (24-hour) */
+    max?: string;
+    /** Minimum selectable time in HH:MM format (24-hour) */
+    min?: string;
+    /** Minute step interval (1–59) */
+    'minute-step'?: number;
+    /** Form field name */
+    name?: string;
+    /** Placeholder shown in the trigger */
+    placeholder?: string;
+    /** Mark field as required */
+    required?: boolean;
+    /** Border radius */
+    rounded?: string;
+    /** Component size */
+    size?: string;
+    /** Display format: '12' for AM/PM, '24' for 24-hour (default: '24') */
+    'time-format'?: '12' | '24';
+    /** Selected time in HH:MM format (24-hour) */
+    value?: string;
+    /** Visual variant */
+    variant?: Exclude<VisualVariant, 'text' | 'frost'>;
+};
+/**
+ * An accessible time picker with a scrollable clock dropdown.
+ * Supports 12/24-hour display formats, min/max bounds, minute steps, and form association.
+ *
+ * @element ore-time-picker
+ *
+ * @attr {string} value - Selected time in HH:MM (24-hour) format
+ * @attr {string} min - Minimum selectable time (HH:MM)
+ * @attr {string} max - Maximum selectable time (HH:MM)
+ * @attr {string} label - Label text
+ * @attr {string} label-placement - 'inset' | 'outside'
+ * @attr {string} placeholder - Trigger placeholder
+ * @attr {boolean} disabled - Disable the picker
+ * @attr {boolean} required - Required field
+ * @attr {string} name - Form field name
+ * @attr {string} error - Error message
+ * @attr {string} helper - Helper text
+ * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {string} size - Component size: 'sm' | 'md' | 'lg'
+ * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'
+ * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
+ * @attr {string} time-format - '12' or '24' (default: '24')
+ * @attr {number} minute-step - Minute increment (default: 5)
+ *
+ * @fires change - Fired when a time is selected. detail: { value: string | null }
+ *
+ * @slot label - Custom label for the trigger field
+ * @slot prefix - Content before the trigger text (e.g. icon)
+ * @slot helper - Custom helper text
+ * @slot error - Custom error content
+ *
+ * @cssprop --time-picker-bg - Dropdown background
+ * @cssprop --time-picker-border-color - Dropdown border color
+ * @cssprop --time-picker-radius - Dropdown border radius
+ * @cssprop --time-picker-shadow - Dropdown shadow
+ * @cssprop --time-picker-selected-bg - Selected option background
+ * @cssprop --time-picker-option-hover-bg - Option hover background
+ *
+ * @part field - The trigger field
+ * @part dropdown - The floating time dropdown
+ * @part column - A scrollable column (hours / minutes / period)
+ * @part option - An individual time option cell
+ *
+ * @example
+ * ```html
+ * <!-- 24-hour clock, 15-minute steps -->
+ * <ore-time-picker label="Meeting time" value="09:30" minute-step="15" color="primary"></ore-time-picker>
+ *
+ * <!-- 12-hour AM/PM format -->
+ * <ore-time-picker label="Appointment" time-format="12" minute-step="30"></ore-time-picker>
+ *
+ * <!-- Outside label, bordered variant -->
+ * <ore-time-picker label="Start time" label-placement="outside" variant="bordered"></ore-time-picker>
+ * ```
+ */
+export declare const TIME_PICKER_TAG: "ore-time-picker";
+//# sourceMappingURL=time-picker.d.ts.map

package/dist/inputs/time-picker/time-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.d.ts","sourceRoot":"","sources":["../../../src/inputs/time-picker/time-picker.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD,OAAO,yBAAyB,CAAC;AACjC,OAAO,gBAAgB,CAAC;AAQxB,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,iBAAiB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACxC,wDAAwD;IACxD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wDAAwD;IACxD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,aAAa,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC5B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;CACpD,CAAC;AAsDF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,eAAO,MAAM,eAAe,EAAG,iBAA0B,CAAC"}

package/dist/layout/box/box.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{--_bg:var(--box-bg,var(--color-canvas));--_color:var(--box-color,var(--color-contrast-900));--_border-width:var(--box-border,var(--border));--_border-color:var(--box-border-color,var(--color-divider));--_radius:var(--box-radius,var(--rounded-lg));--_padding:var(--box-padding,var(--size-4));--_shadow:var(--box-shadow,var(--shadow-sm));display:block;position:relative}.box{box-sizing:border-box;width:100%;height:100%;padding:var(--_padding);color:var(--_color);background:var(--_bg);border:var(--_border-width) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--_shadow);-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transition:backdrop-filter var(--transition-fast), box-shadow var(--transition-normal), background var(--transition-normal), border-color var(--transition-normal);position:relative}}@layer refine.variants{:host([color]){--_bg:var(--box-bg,var(--_theme-backdrop));--_border-color:var(--box-border-color,var(--_theme-border))}:host([variant=flat]){--_shadow:none}:host([variant=glass]:not([color])){--_bg:color-mix(in oklch, var(--color-secondary) 20%, transparent);--_border-color:color-mix(in oklch, var(--color-secondary-contrast) 15%, transparent)}:host([variant=glass][color]){--_bg:color-mix(in oklch, var(--_theme-base) 20%, transparent);--_border-color:color-mix(in oklch, var(--_theme-contrast) 15%, transparent);--_color:var(--_theme-content)}:host([variant=glass]) .box{box-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([color]:not([variant=glass],[variant=frost]):hover){--_bg:color-mix(in oklch, var(--_theme-base) 16%, var(--color-contrast-50));--_border-color:var(--_theme-focus)}}@layer refine.utilities{:host([fullwidth]){width:100%}}`;exports.default=e;
+//# sourceMappingURL=box.css?inline.cjs.map

package/dist/layout/box/box.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.css?inline.cjs","names":[],"sources":["../../../src/layout/box/box.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--box-bg, var(--color-canvas));\n    --_color: var(--box-color, var(--color-contrast-900));\n    --_border-width: var(--box-border, var(--border));\n    --_border-color: var(--box-border-color, var(--color-divider));\n    --_radius: var(--box-radius, var(--rounded-lg));\n    --_padding: var(--box-padding, var(--size-4));\n    --_shadow: var(--box-shadow, var(--shadow-sm));\n\n    position: relative;\n    display: block;\n  }\n\n  .box {\n    position: relative;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    padding: var(--_padding);\n    color: var(--_color);\n    background: var(--_bg);\n    border: var(--_border-width) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--_shadow);\n    backdrop-filter: blur(var(--blur-md));\n    transition:\n      backdrop-filter var(--transition-fast),\n      box-shadow var(--transition-normal),\n      background var(--transition-normal),\n      border-color var(--transition-normal);\n  }\n}\n\n@layer refine.variants {\n  /* Color theme integration — custom props still take priority */\n  :host([color]) {\n    --_bg: var(--box-bg, var(--_theme-backdrop));\n    --_border-color: var(--box-border-color, var(--_theme-border));\n  }\n\n  /* Flat - border only, no shadow */\n  :host([variant='flat']) {\n    --_shadow: none;\n  }\n\n  /* Glass */\n  :host([variant='glass']:not([color])) {\n    --_bg: color-mix(in oklch, var(--color-secondary) 20%, transparent);\n    --_border-color: color-mix(in oklch, var(--color-secondary-contrast) 15%, transparent);\n  }\n\n  :host([variant='glass'][color]) {\n    --_bg: color-mix(in oklch, var(--_theme-base) 20%, transparent);\n    --_border-color: color-mix(in oklch, var(--_theme-contrast) 15%, transparent);\n    --_color: var(--_theme-content);\n  }\n\n  :host([variant='glass']) .box {\n    box-shadow: var(--shadow-md), var(--inset-shadow-xs);\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%) brightness(1.05);\n  }\n\n  /* Subtle hover for solid/default + color (glass & frost manage their own hover) */\n  :host([color]:not([variant='glass'], [variant='frost']):hover) {\n    --_bg: color-mix(in oklch, var(--_theme-base) 16%, var(--color-contrast-50));\n    --_border-color: var(--_theme-focus);\n  }\n}\n\n@layer refine.utilities {\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}

package/dist/layout/box/box.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/layout/box/box.css?inline
+var e = "@layer refine.base{:host{--_bg:var(--box-bg,var(--color-canvas));--_color:var(--box-color,var(--color-contrast-900));--_border-width:var(--box-border,var(--border));--_border-color:var(--box-border-color,var(--color-divider));--_radius:var(--box-radius,var(--rounded-lg));--_padding:var(--box-padding,var(--size-4));--_shadow:var(--box-shadow,var(--shadow-sm));display:block;position:relative}.box{box-sizing:border-box;width:100%;height:100%;padding:var(--_padding);color:var(--_color);background:var(--_bg);border:var(--_border-width) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--_shadow);-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transition:backdrop-filter var(--transition-fast), box-shadow var(--transition-normal), background var(--transition-normal), border-color var(--transition-normal);position:relative}}@layer refine.variants{:host([color]){--_bg:var(--box-bg,var(--_theme-backdrop));--_border-color:var(--box-border-color,var(--_theme-border))}:host([variant=flat]){--_shadow:none}:host([variant=glass]:not([color])){--_bg:color-mix(in oklch, var(--color-secondary) 20%, transparent);--_border-color:color-mix(in oklch, var(--color-secondary-contrast) 15%, transparent)}:host([variant=glass][color]){--_bg:color-mix(in oklch, var(--_theme-base) 20%, transparent);--_border-color:color-mix(in oklch, var(--_theme-contrast) 15%, transparent);--_color:var(--_theme-content)}:host([variant=glass]) .box{box-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([color]:not([variant=glass],[variant=frost]):hover){--_bg:color-mix(in oklch, var(--_theme-base) 16%, var(--color-contrast-50));--_border-color:var(--_theme-focus)}}@layer refine.utilities{:host([fullwidth]){width:100%}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=box.css?inline.js.map

package/dist/layout/box/box.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.css?inline.js","names":[],"sources":["../../../src/layout/box/box.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--box-bg, var(--color-canvas));\n    --_color: var(--box-color, var(--color-contrast-900));\n    --_border-width: var(--box-border, var(--border));\n    --_border-color: var(--box-border-color, var(--color-divider));\n    --_radius: var(--box-radius, var(--rounded-lg));\n    --_padding: var(--box-padding, var(--size-4));\n    --_shadow: var(--box-shadow, var(--shadow-sm));\n\n    position: relative;\n    display: block;\n  }\n\n  .box {\n    position: relative;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    padding: var(--_padding);\n    color: var(--_color);\n    background: var(--_bg);\n    border: var(--_border-width) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--_shadow);\n    backdrop-filter: blur(var(--blur-md));\n    transition:\n      backdrop-filter var(--transition-fast),\n      box-shadow var(--transition-normal),\n      background var(--transition-normal),\n      border-color var(--transition-normal);\n  }\n}\n\n@layer refine.variants {\n  /* Color theme integration — custom props still take priority */\n  :host([color]) {\n    --_bg: var(--box-bg, var(--_theme-backdrop));\n    --_border-color: var(--box-border-color, var(--_theme-border));\n  }\n\n  /* Flat - border only, no shadow */\n  :host([variant='flat']) {\n    --_shadow: none;\n  }\n\n  /* Glass */\n  :host([variant='glass']:not([color])) {\n    --_bg: color-mix(in oklch, var(--color-secondary) 20%, transparent);\n    --_border-color: color-mix(in oklch, var(--color-secondary-contrast) 15%, transparent);\n  }\n\n  :host([variant='glass'][color]) {\n    --_bg: color-mix(in oklch, var(--_theme-base) 20%, transparent);\n    --_border-color: color-mix(in oklch, var(--_theme-contrast) 15%, transparent);\n    --_color: var(--_theme-content);\n  }\n\n  :host([variant='glass']) .box {\n    box-shadow: var(--shadow-md), var(--inset-shadow-xs);\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%) brightness(1.05);\n  }\n\n  /* Subtle hover for solid/default + color (glass & frost manage their own hover) */\n  :host([color]:not([variant='glass'], [variant='frost']):hover) {\n    --_bg: color-mix(in oklch, var(--_theme-base) 16%, var(--color-contrast-50));\n    --_border-color: var(--_theme-focus);\n  }\n}\n\n@layer refine.utilities {\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}