@vielzeug/refine 1.1.1 → 1.3.0

package/dist/date-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.js","names":[],"sources":["../src/inputs/date-picker/date-picker.ts"],"sourcesContent":["import { define, useField, html, inject, prop } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { Temporal, format } from '@vielzeug/tempo';\n\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../shared';\n\nimport { createDatePickerControl, formatDisplayDate, parseIso, toIsoString, type DatePickerView } from '../../headless';\nimport '../../content/icon/icon';\nimport '../input/input';\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, reducedMotionMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './date-picker.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport type OreDatePickerEvents = {\n  change: { isoValue: string | null };\n};\n\nexport type OreDatePickerProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable the picker */\n  disabled?: boolean;\n  /** Validation error message */\n  error?: string;\n  /** Expand to container width */\n  fullwidth?: boolean;\n  /** Helper text below the field */\n  helper?: string;\n  /** Visible label */\n  label?: string;\n  /** Label placement */\n  'label-placement'?: 'inset' | 'outside';\n  /** Locale for day/month names (default: browser locale) */\n  locale?: string;\n  /** Latest selectable date in ISO 8601 format (yyyy-MM-dd) */\n  max?: string;\n  /** Earliest selectable date in ISO 8601 format (yyyy-MM-dd) */\n  min?: string;\n  /** Form field name */\n  name?: string;\n  /** Placeholder shown in the text trigger */\n  placeholder?: string;\n  /** Mark field as required */\n  required?: boolean;\n  /** Border radius */\n  rounded?: RoundedSize;\n  /** Component size */\n  size?: ComponentSize;\n  /**\n   * Selected date in ISO 8601 format (yyyy-MM-dd).\n   * @example '2025-06-15'\n   */\n  value?: string;\n  /** Visual variant */\n  variant?: Exclude<VisualVariant, 'text' | 'frost'>;\n  /**\n   * Day-of-week indices to disable (0 = Sunday … 6 = Saturday).\n   * Pass as a JSON array attribute or a JS property.\n   * @example\n   * ```html\n   * <ore-date-picker weekend-days=\"[0,6]\"></ore-date-picker>\n   * ```\n   */\n  'weekend-days'?: number[];\n};\n\n/**\n * An accessible, keyboard-navigable date picker with an inline calendar popup.\n * Supports min/max bounds, disabled weekend days, and form association.\n *\n * @element ore-date-picker\n *\n * @attr {string} value - Selected date in ISO 8601 format (yyyy-MM-dd)\n * @attr {string} min - Minimum selectable date (yyyy-MM-dd)\n * @attr {string} max - Maximum selectable date (yyyy-MM-dd)\n * @attr {string} label - Label text\n * @attr {string} label-placement - 'inset' | 'outside'\n * @attr {string} placeholder - Trigger placeholder\n * @attr {boolean} disabled - Disable the picker\n * @attr {boolean} required - Required field\n * @attr {string} name - Form field name\n * @attr {string} error - Error message\n * @attr {string} helper - Helper text\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} locale - BCP 47 locale string\n * @attr {string} weekend-days - Comma-separated day indices to disable\n *\n * @fires change - Fired when a date is selected. detail: { isoValue: string | null }\n *\n * @slot label - Custom label for the trigger field\n * @slot prefix - Content before the trigger text (e.g. icon)\n * @slot helper - Custom helper text\n * @slot error - Custom error content\n *\n * @cssprop --date-picker-bg - Calendar background\n * @cssprop --date-picker-border-color - Calendar border color\n * @cssprop --date-picker-radius - Calendar border radius\n * @cssprop --date-picker-day-selected-bg - Background of selected day\n * @cssprop --date-picker-day-today-color - Color of today's date number\n * @cssprop --date-picker-day-outside-opacity - Opacity of days outside visible month\n *\n * @part field - The trigger button/field\n * @part calendar - The floating calendar panel\n * @part header - Calendar header (nav + label)\n * @part grid - Day grid\n * @part day - Individual day cell\n *\n * @example\n * ```html\n * <!-- Single date with constraints -->\n * <ore-date-picker label=\"Appointment date\" name=\"date\" min=\"2025-01-01\" max=\"2025-12-31\" color=\"primary\"></ore-date-picker>\n *\n *\n * <!-- Outside label, bordered variant -->\n * <ore-date-picker label=\"Start date\" label-placement=\"outside\" variant=\"bordered\"></ore-date-picker>\n * ```\n */\nexport const DATE_PICKER_TAG = 'ore-date-picker' as const;\n\ndefine<OreDatePickerProps, OreDatePickerEvents>(DATE_PICKER_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...roundableBundle,\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    locale: prop.string(),\n    max: prop.string(),\n    min: prop.string(),\n    name: prop.string(),\n    placeholder: prop.string(),\n    required: prop.bool(false),\n    value: prop.string(),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n    'weekend-days': prop.json([] as number[]),\n  },\n\n  setup(props, { bind, el, emit, onMounted }) {\n    // ── Signals ─────────────────────────────────────────────────────────────\n\n    const isOpen = signal(false);\n\n    // ── Selected date: local-override pattern ──────────────────────────────\n    // localSelection holds a user-initiated pick (or undefined = no override).\n    // selectedDate falls back to the value prop reactively — no setInterval needed.\n\n    const localSelection = signal<Temporal.PlainDate | null | undefined>(undefined);\n\n    const selectedDate = computed(() =>\n      localSelection.value !== undefined ? localSelection.value : parseIso(props.value.value),\n    );\n\n    // ── Form context ────────────────────────────────────────────────────────\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(bind, props, formCtx);\n\n    const isDisabled = fCtxProps.disabled;\n    const locale = computed(() => props.locale.value || (typeof navigator !== 'undefined' ? navigator.language : 'en'));\n\n    // ── Date-picker control ─────────────────────────────────────────────────\n\n    const ctrl = createDatePickerControl({\n      get locale() {\n        return locale.value;\n      },\n      get max() {\n        return parseIso(props.max.value);\n      },\n      get min() {\n        return parseIso(props.min.value);\n      },\n      onChange(date) {\n        localSelection.value = date;\n        isOpen.value = false;\n        ctrl.setView('day');\n        currentView.value = 'day';\n        displayYear.value = ctrl.displayYear();\n        displayMonth.value = ctrl.displayMonth();\n        emit('change', { isoValue: toIsoString(date) });\n      },\n      get value() {\n        return selectedDate.value;\n      },\n      get weekendDays() {\n        return props['weekend-days'].value ?? [];\n      },\n    });\n\n    // ── Reactive display state ────────────────────────────────────────────\n    // Three separate primitive signals — the proven pattern.\n\n    const currentView = signal<DatePickerView>('day');\n    const displayYear = signal(ctrl.displayYear());\n    const displayMonth = signal(ctrl.displayMonth()); // 1-indexed (Temporal)\n\n    // ── Form value (host is formAssociated) ──────────────────────────────────\n\n    useField<string>({\n      disabled: isDisabled,\n      toFormValue: (v) => v || null,\n      value: computed(() => toIsoString(selectedDate.value) ?? ''),\n    });\n\n    const dialogId = `date-picker-${Math.random().toString(36).slice(2, 9)}-calendar`;\n\n    // ── Derived display values ───────────────────────────────────────────────\n\n    const triggerText = computed(() => {\n      if (selectedDate.value) return formatDisplayDate(selectedDate.value, locale.value);\n\n      return props.placeholder.value || '';\n    });\n\n    const displayMonth_ = computed(() => {\n      const d = Temporal.PlainDate.from({ day: 1, month: displayMonth.value, year: displayYear.value });\n\n      return format(d, { intl: { month: 'long' }, locale: locale.value, tz: 'UTC' });\n    });\n\n    const displayYear_ = computed(() => String(displayYear.value));\n    const displayLabel = computed(() => `${displayMonth_.value} ${displayYear_.value}`);\n\n    const dayCells = computed(() => {\n      void displayYear.value;\n      void displayMonth.value;\n      void selectedDate.value; // re-run when selection changes to refresh isSelected flags\n\n      return ctrl.dayCells();\n    });\n    const monthCells = computed(() => {\n      void displayYear.value;\n\n      return ctrl.monthCells();\n    });\n    const yearCells = computed(() => {\n      void displayYear.value;\n\n      return ctrl.yearCells();\n    });\n    const weekdayLabels = computed(() => ctrl.weekdayLabels());\n    const tabIndex = () => (isDisabled.value ? '-1' : '0');\n\n    // ── Navigation handlers ──────────────────────────────────────────────────\n    // In year/month views navigate by year; in day view navigate by month.\n\n    function handlePrev(): void {\n      if (currentView.value === 'day') ctrl.prevMonth();\n      else ctrl.prevYear();\n\n      displayYear.value = ctrl.displayYear();\n      displayMonth.value = ctrl.displayMonth();\n    }\n\n    function handleNext(): void {\n      if (currentView.value === 'day') ctrl.nextMonth();\n      else ctrl.nextYear();\n\n      displayYear.value = ctrl.displayYear();\n      displayMonth.value = ctrl.displayMonth();\n    }\n\n    function handleHeaderClick(): void {\n      const views: DatePickerView[] = ['day', 'month', 'year'];\n      const next = views[(views.indexOf(currentView.value) + 1) % views.length];\n\n      ctrl.setView(next);\n      currentView.value = next;\n    }\n\n    function handleSelectMonth(month: number): void {\n      ctrl.goTo(ctrl.displayYear(), month);\n      ctrl.setView('day');\n      displayYear.value = ctrl.displayYear();\n      displayMonth.value = ctrl.displayMonth();\n      currentView.value = 'day';\n    }\n\n    function handleSelectYear(year: number): void {\n      ctrl.goTo(year, ctrl.displayMonth());\n      ctrl.setView('month');\n      displayYear.value = ctrl.displayYear();\n      currentView.value = 'month';\n    }\n\n    function handleSelectDay(isoStr: string): void {\n      const date = parseIso(isoStr);\n\n      if (!date) return;\n\n      ctrl.select(date);\n    }\n\n    function handleDayKeydown(e: KeyboardEvent): void {\n      const cell = e.currentTarget as HTMLElement;\n      const grid = cell.closest('.cal-grid-days');\n\n      if (!grid) return;\n\n      const allCells = Array.from(grid.querySelectorAll<HTMLElement>('.cal-cell-day'));\n      const idx = allCells.indexOf(cell);\n\n      if (idx === -1) return;\n\n      let target: HTMLElement | undefined;\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        handleSelectDay(cell.dataset.iso ?? '');\n\n        return;\n      } else if (e.key === 'ArrowRight') {\n        target = allCells[idx + 1];\n      } else if (e.key === 'ArrowLeft') {\n        target = allCells[idx - 1];\n      } else if (e.key === 'ArrowDown') {\n        target = allCells[idx + 7];\n      } else if (e.key === 'ArrowUp') {\n        target = allCells[idx - 7];\n      } else if (e.key === 'Home') {\n        target = allCells[Math.floor(idx / 7) * 7];\n      } else if (e.key === 'End') {\n        target = allCells[Math.floor(idx / 7) * 7 + 6];\n      } else {\n        return;\n      }\n\n      e.preventDefault();\n      target?.focus();\n    }\n\n    // ── Month/year-cell keyboard navigation (fixed 4-column grid) ─────────────\n\n    function handleGridKeydown(e: KeyboardEvent, cellSelector: string, columns: number, onSelect: () => void): void {\n      const cell = e.currentTarget as HTMLElement;\n      const grid = cell.closest('.cal-grid');\n\n      if (!grid) return;\n\n      const allCells = Array.from(grid.querySelectorAll<HTMLElement>(cellSelector));\n      const idx = allCells.indexOf(cell);\n\n      if (idx === -1) return;\n\n      let target: HTMLElement | undefined;\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        onSelect();\n\n        return;\n      } else if (e.key === 'ArrowRight') {\n        target = allCells[idx + 1];\n      } else if (e.key === 'ArrowLeft') {\n        target = allCells[idx - 1];\n      } else if (e.key === 'ArrowDown') {\n        target = allCells[idx + columns];\n      } else if (e.key === 'ArrowUp') {\n        target = allCells[idx - columns];\n      } else if (e.key === 'Home') {\n        target = allCells[Math.floor(idx / columns) * columns];\n      } else if (e.key === 'End') {\n        target = allCells[Math.min(Math.floor(idx / columns) * columns + columns - 1, allCells.length - 1)];\n      } else {\n        return;\n      }\n\n      e.preventDefault();\n      target?.focus();\n    }\n\n    // ── Open / close ─────────────────────────────────────────────────────────\n\n    function openPicker(): void {\n      if (isDisabled.value) return;\n\n      isOpen.value = true;\n      ctrl.setView('day');\n      currentView.value = 'day';\n\n      const sel = selectedDate.value;\n\n      if (sel) {\n        ctrl.goTo(sel.year, sel.month);\n        displayYear.value = ctrl.displayYear();\n        displayMonth.value = ctrl.displayMonth();\n      }\n    }\n\n    function closePicker(): void {\n      isOpen.value = false;\n      ctrl.setView('day');\n      currentView.value = 'day';\n    }\n\n    function handleTriggerClick(): void {\n      if (isOpen.value) closePicker();\n      else openPicker();\n    }\n\n    // ── Keyboard handlers ────────────────────────────────────────────────────\n\n    function handleTriggerKeydown(e: KeyboardEvent): void {\n      if (isDisabled.value) return;\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        handleTriggerClick();\n      } else if (e.key === 'Escape' && isOpen.value) {\n        e.preventDefault();\n        closePicker();\n      }\n    }\n\n    function handleCalendarKeydown(e: KeyboardEvent): void {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        closePicker();\n      }\n    }\n\n    function handleOutsideClick(e: PointerEvent | MouseEvent): void {\n      if (!isOpen.value) return;\n\n      const path = e.composedPath();\n\n      if (!path.includes(el)) closePicker();\n    }\n\n    // ── Lifecycle ────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      document.addEventListener('pointerdown', handleOutsideClick, { capture: true });\n\n      return () => {\n        document.removeEventListener('pointerdown', handleOutsideClick, { capture: true });\n      };\n    });\n\n    // ── Host bindings ────────────────────────────────────────────────────────\n\n    bind({\n      attr: {\n        open: () => (isOpen.value ? true : undefined),\n      },\n    });\n\n    // ── Template ─────────────────────────────────────────────────────────────\n\n    const inputValue = () => triggerText.value;\n    const inputLabel = () => props.label.value ?? '';\n    const inputPlaceholder = () => props.placeholder.value ?? '';\n    const inputLabelPlacement = () => props['label-placement'].value ?? 'inset';\n    const inputColor = () => props.color?.value ?? undefined;\n    const inputSize = () => fCtxProps.size?.value ?? undefined;\n    const inputVariant = () => fCtxProps.variant?.value ?? undefined;\n    const inputRounded = () => props.rounded?.value ?? undefined;\n    const inputHelper = () => props.helper.value ?? '';\n    const inputError = () => props.error.value ?? '';\n    const inputDisabled = () => (isDisabled.value ? true : undefined);\n    const inputRequired = () => (props.required.value ? true : undefined);\n    const inputFullwidth = () => (props.fullwidth.value ? true : undefined);\n\n    return html`\n      <!-- Trigger: ore-input in readonly display mode -->\n      <ore-input\n        class=\"trigger\"\n        readonly\n        tabindex=\"${tabIndex}\"\n        role=\"combobox\"\n        aria-haspopup=\"dialog\"\n        aria-controls=\"${dialogId}\"\n        :aria-expanded=\"${() => String(isOpen.value)}\"\n        :aria-disabled=\"${() => (isDisabled.value ? 'true' : null)}\"\n        :value=\"${inputValue}\"\n        :label=\"${inputLabel}\"\n        :placeholder=\"${inputPlaceholder}\"\n        :label-placement=\"${inputLabelPlacement}\"\n        :color=\"${inputColor}\"\n        :size=\"${inputSize}\"\n        :variant=\"${inputVariant}\"\n        :rounded=\"${inputRounded}\"\n        :helper=\"${inputHelper}\"\n        :error=\"${inputError}\"\n        ?disabled=\"${inputDisabled}\"\n        ?required=\"${inputRequired}\"\n        ?fullwidth=\"${inputFullwidth}\"\n        @click=\"${handleTriggerClick}\"\n        @keydown=\"${handleTriggerKeydown}\">\n        <ore-icon slot=\"suffix\" name=\"calendar\" size=\"16\" stroke-width=\"1.75\" aria-hidden=\"true\"></ore-icon>\n      </ore-input>\n\n      <!-- Calendar popup -->\n      <div\n        class=\"calendar\"\n        id=\"${dialogId}\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-label=\"${() => `Choose date — ${displayLabel.value}`}\"\n        ?data-open=\"${isOpen}\"\n        @keydown=\"${handleCalendarKeydown}\">\n        <!-- Calendar header -->\n        <div class=\"cal-header\" part=\"header\">\n          <button class=\"nav-btn\" type=\"button\" aria-label=\"Previous\" @click=\"${handlePrev}\">\n            <ore-icon name=\"chevron-left\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n          </button>\n          <button\n            class=\"cal-label-btn\"\n            type=\"button\"\n            :aria-label=\"${() =>\n              `Switch to ${currentView.value === 'day' ? 'month' : currentView.value === 'month' ? 'year' : 'day'} view`}\"\n            @click=\"${handleHeaderClick}\">\n            <span class=\"cal-label-month\">${displayMonth_}</span><span class=\"cal-label-sep\" aria-hidden=\"true\">/</span\n            ><span class=\"cal-label-year\">${displayYear_}</span>\n          </button>\n          <button class=\"nav-btn\" type=\"button\" aria-label=\"Next\" @click=\"${handleNext}\">\n            <ore-icon name=\"chevron-right\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n          </button>\n        </div>\n\n        <!-- Day view: flat 7-column CSS grid, weekday headers + day cells -->\n        <div\n          class=\"cal-grid cal-grid-days\"\n          role=\"grid\"\n          part=\"grid\"\n          :aria-label=\"${() => displayLabel.value}\"\n          ?hidden=\"${() => currentView.value !== 'day'}\">\n          <div role=\"row\" class=\"cal-grid-row\">\n            ${() =>\n              weekdayLabels.value.map(\n                (lbl) => html`<div class=\"cal-cell cal-cell-head\" role=\"columnheader\" aria-label=\"${lbl}\">${lbl}</div>`,\n              )}\n          </div>\n          ${() => {\n            const cells = dayCells.value;\n            const rows: (typeof cells)[number][][] = [];\n\n            for (let i = 0; i < cells.length; i += 7) rows.push(cells.slice(i, i + 7));\n\n            return rows.map(\n              (row) =>\n                html`<div role=\"row\" class=\"cal-grid-row\">\n                  ${row.map(\n                    (cell) =>\n                      html`<div\n                        class=\"cal-cell cal-cell-day\"\n                        role=\"gridcell\"\n                        part=\"day\"\n                        :aria-selected=\"${() => String(cell.isSelected)}\"\n                        :aria-disabled=\"${() => String(cell.isDisabled)}\"\n                        :aria-current=\"${() => (cell.isToday ? 'date' : null)}\"\n                        ?data-selected=\"${() => cell.isSelected}\"\n                        ?data-today=\"${() => cell.isToday}\"\n                        ?data-outside=\"${() => cell.isOutsideMonth}\"\n                        ?data-disabled=\"${() => cell.isDisabled}\"\n                        data-iso=\"${cell.iso}\"\n                        tabindex=\"${() => (cell.isDisabled ? '-1' : '0')}\"\n                        @click=\"${() => handleSelectDay(cell.iso)}\"\n                        @keydown=\"${handleDayKeydown}\">\n                        ${String(cell.day)}\n                      </div>`,\n                  )}\n                </div>`,\n            );\n          }}\n        </div>\n\n        <!-- Month view -->\n        <div\n          class=\"cal-grid cal-grid-months\"\n          role=\"grid\"\n          :aria-label=\"${() => displayYear_.value}\"\n          ?hidden=\"${() => currentView.value !== 'month'}\">\n          ${() => {\n            const cells = monthCells.value;\n            const rows: (typeof cells)[number][][] = [];\n\n            for (let i = 0; i < cells.length; i += 4) rows.push(cells.slice(i, i + 4));\n\n            return rows.map(\n              (row) =>\n                html`<div role=\"row\">\n                  ${row.map(\n                    (cell) =>\n                      html`<div\n                        class=\"cal-cell cal-cell-month\"\n                        role=\"gridcell\"\n                        :aria-selected=\"${() => String(cell.isSelected)}\"\n                        :aria-disabled=\"${() => String(cell.isDisabled)}\"\n                        ?data-selected=\"${() => cell.isSelected}\"\n                        ?data-disabled=\"${() => cell.isDisabled}\"\n                        tabindex=\"${() => (cell.isDisabled ? '-1' : '0')}\"\n                        @click=\"${() => {\n                          if (!cell.isDisabled) handleSelectMonth(cell.month);\n                        }}\"\n                        @keydown=\"${(e: KeyboardEvent) =>\n                          handleGridKeydown(e, '.cal-cell-month', 4, () => {\n                            if (!cell.isDisabled) handleSelectMonth(cell.month);\n                          })}\">\n                        ${cell.shortLabel}\n                      </div>`,\n                  )}\n                </div>`,\n            );\n          }}\n        </div>\n\n        <!-- Year view -->\n        <div\n          class=\"cal-grid cal-grid-years\"\n          role=\"grid\"\n          aria-label=\"Select year\"\n          ?hidden=\"${() => currentView.value !== 'year'}\">\n          ${() => {\n            const cells = yearCells.value;\n            const rows: (typeof cells)[number][][] = [];\n\n            for (let i = 0; i < cells.length; i += 4) rows.push(cells.slice(i, i + 4));\n\n            return rows.map(\n              (row) =>\n                html`<div role=\"row\">\n                  ${row.map(\n                    (cell) =>\n                      html`<div\n                        class=\"cal-cell cal-cell-year\"\n                        role=\"gridcell\"\n                        :aria-selected=\"${() => String(cell.isSelected)}\"\n                        :aria-disabled=\"${() => String(cell.isDisabled)}\"\n                        ?data-selected=\"${() => cell.isSelected}\"\n                        ?data-disabled=\"${() => cell.isDisabled}\"\n                        tabindex=\"${() => (cell.isDisabled ? '-1' : '0')}\"\n                        @click=\"${() => {\n                          if (!cell.isDisabled) handleSelectYear(cell.year);\n                        }}\"\n                        @keydown=\"${(e: KeyboardEvent) =>\n                          handleGridKeydown(e, '.cal-cell-year', 4, () => {\n                            if (!cell.isDisabled) handleSelectYear(cell.year);\n                          })}\">\n                        ${String(cell.year)}\n                      </div>`,\n                  )}\n                </div>`,\n            );\n          }}\n        </div>\n      </div>\n    `;\n  },\n\n  shadow: { delegatesFocus: true },\n  styles: [colorThemeMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"date-picker.js","names":[],"sources":["../src/inputs/date-picker/date-picker.ts"],"sourcesContent":["import { define, html, inject, prop, bind, getHost, onMounted, useEmit } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { Temporal, format } from '@vielzeug/tempo';\n\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../shared';\n\nimport { createDatePickerControl, formatDisplayDate, parseIso, toIsoString, type DatePickerView } from '../../headless';\nimport '../../content/icon/icon';\nimport '../input/input';\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, reducedMotionMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './date-picker.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport type OreDatePickerEvents = {\n  change: { isoValue: string | null };\n};\n\nexport type OreDatePickerProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable the picker */\n  disabled?: boolean;\n  /** Validation error message */\n  error?: string;\n  /** Expand to container width */\n  fullwidth?: boolean;\n  /** Helper text below the field */\n  helper?: string;\n  /** Visible label */\n  label?: string;\n  /** Label placement */\n  'label-placement'?: 'inset' | 'outside';\n  /** Locale for day/month names (default: browser locale) */\n  locale?: string;\n  /** Latest selectable date in ISO 8601 format (yyyy-MM-dd) */\n  max?: string;\n  /** Earliest selectable date in ISO 8601 format (yyyy-MM-dd) */\n  min?: string;\n  /** Form field name */\n  name?: string;\n  /** Placeholder shown in the text trigger */\n  placeholder?: string;\n  /** Mark field as required */\n  required?: boolean;\n  /** Border radius */\n  rounded?: RoundedSize;\n  /** Component size */\n  size?: ComponentSize;\n  /**\n   * Selected date in ISO 8601 format (yyyy-MM-dd).\n   * @example '2025-06-15'\n   */\n  value?: string;\n  /** Visual variant */\n  variant?: Exclude<VisualVariant, 'text' | 'frost'>;\n  /**\n   * Day-of-week indices to disable (0 = Sunday … 6 = Saturday).\n   * Pass as a JSON array attribute or a JS property.\n   * @example\n   * ```html\n   * <ore-date-picker weekend-days=\"[0,6]\"></ore-date-picker>\n   * ```\n   */\n  'weekend-days'?: number[];\n};\n\n/**\n * An accessible, keyboard-navigable date picker with an inline calendar popup.\n * Supports min/max bounds, disabled weekend days, and form association.\n *\n * @element ore-date-picker\n *\n * @attr {string} value - Selected date in ISO 8601 format (yyyy-MM-dd)\n * @attr {string} min - Minimum selectable date (yyyy-MM-dd)\n * @attr {string} max - Maximum selectable date (yyyy-MM-dd)\n * @attr {string} label - Label text\n * @attr {string} label-placement - 'inset' | 'outside'\n * @attr {string} placeholder - Trigger placeholder\n * @attr {boolean} disabled - Disable the picker\n * @attr {boolean} required - Required field\n * @attr {string} name - Form field name\n * @attr {string} error - Error message\n * @attr {string} helper - Helper text\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} locale - BCP 47 locale string\n * @attr {string} weekend-days - Comma-separated day indices to disable\n *\n * @fires change - Fired when a date is selected. detail: { isoValue: string | null }\n *\n * @slot label - Custom label for the trigger field\n * @slot prefix - Content before the trigger text (e.g. icon)\n * @slot helper - Custom helper text\n * @slot error - Custom error content\n *\n * @cssprop --date-picker-bg - Calendar background\n * @cssprop --date-picker-border-color - Calendar border color\n * @cssprop --date-picker-radius - Calendar border radius\n * @cssprop --date-picker-day-selected-bg - Background of selected day\n * @cssprop --date-picker-day-today-color - Color of today's date number\n * @cssprop --date-picker-day-outside-opacity - Opacity of days outside visible month\n *\n * @part field - The trigger button/field\n * @part calendar - The floating calendar panel\n * @part header - Calendar header (nav + label)\n * @part grid - Day grid\n * @part day - Individual day cell\n *\n * @example\n * ```html\n * <!-- Single date with constraints -->\n * <ore-date-picker label=\"Appointment date\" name=\"date\" min=\"2025-01-01\" max=\"2025-12-31\" color=\"primary\"></ore-date-picker>\n *\n *\n * <!-- Outside label, bordered variant -->\n * <ore-date-picker label=\"Start date\" label-placement=\"outside\" variant=\"bordered\"></ore-date-picker>\n * ```\n */\nexport const DATE_PICKER_TAG = 'ore-date-picker' as const;\n\ndefine<OreDatePickerProps>(DATE_PICKER_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...roundableBundle,\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    locale: prop.string(),\n    max: prop.string(),\n    min: prop.string(),\n    name: prop.string(),\n    placeholder: prop.string(),\n    required: prop.bool(false),\n    value: prop.string(),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n    'weekend-days': prop.json([] as number[]),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreDatePickerEvents>();\n\n    // ── Signals ─────────────────────────────────────────────────────────────\n\n    const isOpen = signal(false);\n\n    // ── Selected date: local-override pattern ──────────────────────────────\n    // localSelection holds a user-initiated pick (or undefined = no override).\n    // selectedDate falls back to the value prop reactively — no setInterval needed.\n\n    const localSelection = signal<Temporal.PlainDate | null | undefined>(undefined);\n\n    const selectedDate = computed(() =>\n      localSelection.value !== undefined ? localSelection.value : parseIso(props.value.value),\n    );\n\n    // ── Form context ────────────────────────────────────────────────────────\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n\n    const isDisabled = fCtxProps.disabled;\n    const locale = computed(() => props.locale.value || (typeof navigator !== 'undefined' ? navigator.language : 'en'));\n\n    // ── Date-picker control ─────────────────────────────────────────────────\n\n    const ctrl = createDatePickerControl({\n      get locale() {\n        return locale.value;\n      },\n      get max() {\n        return parseIso(props.max.value);\n      },\n      get min() {\n        return parseIso(props.min.value);\n      },\n      onChange(date) {\n        localSelection.value = date;\n        isOpen.value = false;\n        ctrl.setView('day');\n        currentView.value = 'day';\n        displayYear.value = ctrl.displayYear();\n        displayMonth.value = ctrl.displayMonth();\n        emit('change', { isoValue: toIsoString(date) });\n      },\n      get value() {\n        return selectedDate.value;\n      },\n      get weekendDays() {\n        return props['weekend-days'].value ?? [];\n      },\n    });\n\n    // ── Reactive display state ────────────────────────────────────────────\n    // Three separate primitive signals — the proven pattern.\n\n    const currentView = signal<DatePickerView>('day');\n    const displayYear = signal(ctrl.displayYear());\n    const displayMonth = signal(ctrl.displayMonth()); // 1-indexed (Temporal)\n\n    // ── Form value (host is formAssociated) ──────────────────────────────────\n\n    useField<string>({\n      disabled: isDisabled,\n      toFormValue: (v) => v || null,\n      value: computed(() => toIsoString(selectedDate.value) ?? ''),\n    });\n\n    const dialogId = `date-picker-${Math.random().toString(36).slice(2, 9)}-calendar`;\n\n    // ── Derived display values ───────────────────────────────────────────────\n\n    const triggerText = computed(() => {\n      if (selectedDate.value) return formatDisplayDate(selectedDate.value, locale.value);\n\n      return props.placeholder.value || '';\n    });\n\n    const displayMonth_ = computed(() => {\n      const d = Temporal.PlainDate.from({ day: 1, month: displayMonth.value, year: displayYear.value });\n\n      return format(d, { intl: { month: 'long' }, locale: locale.value, tz: 'UTC' });\n    });\n\n    const displayYear_ = computed(() => String(displayYear.value));\n    const displayLabel = computed(() => `${displayMonth_.value} ${displayYear_.value}`);\n\n    const dayCells = computed(() => {\n      void displayYear.value;\n      void displayMonth.value;\n      void selectedDate.value; // re-run when selection changes to refresh isSelected flags\n\n      return ctrl.dayCells();\n    });\n    const monthCells = computed(() => {\n      void displayYear.value;\n\n      return ctrl.monthCells();\n    });\n    const yearCells = computed(() => {\n      void displayYear.value;\n\n      return ctrl.yearCells();\n    });\n    const weekdayLabels = computed(() => ctrl.weekdayLabels());\n    const tabIndex = () => (isDisabled.value ? '-1' : '0');\n\n    // ── Navigation handlers ──────────────────────────────────────────────────\n    // In year/month views navigate by year; in day view navigate by month.\n\n    function handlePrev(): void {\n      if (currentView.value === 'day') ctrl.prevMonth();\n      else ctrl.prevYear();\n\n      displayYear.value = ctrl.displayYear();\n      displayMonth.value = ctrl.displayMonth();\n    }\n\n    function handleNext(): void {\n      if (currentView.value === 'day') ctrl.nextMonth();\n      else ctrl.nextYear();\n\n      displayYear.value = ctrl.displayYear();\n      displayMonth.value = ctrl.displayMonth();\n    }\n\n    function handleHeaderClick(): void {\n      const views: DatePickerView[] = ['day', 'month', 'year'];\n      const next = views[(views.indexOf(currentView.value) + 1) % views.length];\n\n      ctrl.setView(next);\n      currentView.value = next;\n    }\n\n    function handleSelectMonth(month: number): void {\n      ctrl.goTo(ctrl.displayYear(), month);\n      ctrl.setView('day');\n      displayYear.value = ctrl.displayYear();\n      displayMonth.value = ctrl.displayMonth();\n      currentView.value = 'day';\n    }\n\n    function handleSelectYear(year: number): void {\n      ctrl.goTo(year, ctrl.displayMonth());\n      ctrl.setView('month');\n      displayYear.value = ctrl.displayYear();\n      currentView.value = 'month';\n    }\n\n    function handleSelectDay(isoStr: string): void {\n      const date = parseIso(isoStr);\n\n      if (!date) return;\n\n      ctrl.select(date);\n    }\n\n    function handleDayKeydown(e: KeyboardEvent): void {\n      const cell = e.currentTarget as HTMLElement;\n      const grid = cell.closest('.cal-grid-days');\n\n      if (!grid) return;\n\n      const allCells = Array.from(grid.querySelectorAll<HTMLElement>('.cal-cell-day'));\n      const idx = allCells.indexOf(cell);\n\n      if (idx === -1) return;\n\n      let target: HTMLElement | undefined;\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        handleSelectDay(cell.dataset.iso ?? '');\n\n        return;\n      } else if (e.key === 'ArrowRight') {\n        target = allCells[idx + 1];\n      } else if (e.key === 'ArrowLeft') {\n        target = allCells[idx - 1];\n      } else if (e.key === 'ArrowDown') {\n        target = allCells[idx + 7];\n      } else if (e.key === 'ArrowUp') {\n        target = allCells[idx - 7];\n      } else if (e.key === 'Home') {\n        target = allCells[Math.floor(idx / 7) * 7];\n      } else if (e.key === 'End') {\n        target = allCells[Math.floor(idx / 7) * 7 + 6];\n      } else {\n        return;\n      }\n\n      e.preventDefault();\n      target?.focus();\n    }\n\n    // ── Month/year-cell keyboard navigation (fixed 4-column grid) ─────────────\n\n    function handleGridKeydown(e: KeyboardEvent, cellSelector: string, columns: number, onSelect: () => void): void {\n      const cell = e.currentTarget as HTMLElement;\n      const grid = cell.closest('.cal-grid');\n\n      if (!grid) return;\n\n      const allCells = Array.from(grid.querySelectorAll<HTMLElement>(cellSelector));\n      const idx = allCells.indexOf(cell);\n\n      if (idx === -1) return;\n\n      let target: HTMLElement | undefined;\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        onSelect();\n\n        return;\n      } else if (e.key === 'ArrowRight') {\n        target = allCells[idx + 1];\n      } else if (e.key === 'ArrowLeft') {\n        target = allCells[idx - 1];\n      } else if (e.key === 'ArrowDown') {\n        target = allCells[idx + columns];\n      } else if (e.key === 'ArrowUp') {\n        target = allCells[idx - columns];\n      } else if (e.key === 'Home') {\n        target = allCells[Math.floor(idx / columns) * columns];\n      } else if (e.key === 'End') {\n        target = allCells[Math.min(Math.floor(idx / columns) * columns + columns - 1, allCells.length - 1)];\n      } else {\n        return;\n      }\n\n      e.preventDefault();\n      target?.focus();\n    }\n\n    // ── Open / close ─────────────────────────────────────────────────────────\n\n    function openPicker(): void {\n      if (isDisabled.value) return;\n\n      isOpen.value = true;\n      ctrl.setView('day');\n      currentView.value = 'day';\n\n      const sel = selectedDate.value;\n\n      if (sel) {\n        ctrl.goTo(sel.year, sel.month);\n        displayYear.value = ctrl.displayYear();\n        displayMonth.value = ctrl.displayMonth();\n      }\n    }\n\n    function closePicker(): void {\n      isOpen.value = false;\n      ctrl.setView('day');\n      currentView.value = 'day';\n    }\n\n    function handleTriggerClick(): void {\n      if (isOpen.value) closePicker();\n      else openPicker();\n    }\n\n    // ── Keyboard handlers ────────────────────────────────────────────────────\n\n    function handleTriggerKeydown(e: KeyboardEvent): void {\n      if (isDisabled.value) return;\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        handleTriggerClick();\n      } else if (e.key === 'Escape' && isOpen.value) {\n        e.preventDefault();\n        closePicker();\n      }\n    }\n\n    function handleCalendarKeydown(e: KeyboardEvent): void {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        closePicker();\n      }\n    }\n\n    function handleOutsideClick(e: PointerEvent | MouseEvent): void {\n      if (!isOpen.value) return;\n\n      const path = e.composedPath();\n\n      if (!path.includes(el)) closePicker();\n    }\n\n    // ── Lifecycle ────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      document.addEventListener('pointerdown', handleOutsideClick, { capture: true });\n\n      return () => {\n        document.removeEventListener('pointerdown', handleOutsideClick, { capture: true });\n      };\n    });\n\n    // ── Host bindings ────────────────────────────────────────────────────────\n\n    bind({\n      attr: {\n        open: () => (isOpen.value ? true : undefined),\n      },\n    });\n\n    // ── Template ─────────────────────────────────────────────────────────────\n\n    const inputValue = () => triggerText.value;\n    const inputLabel = () => props.label.value ?? '';\n    const inputPlaceholder = () => props.placeholder.value ?? '';\n    const inputLabelPlacement = () => props['label-placement'].value ?? 'inset';\n    const inputColor = () => props.color?.value ?? undefined;\n    const inputSize = () => fCtxProps.size?.value ?? undefined;\n    const inputVariant = () => fCtxProps.variant?.value ?? undefined;\n    const inputRounded = () => props.rounded?.value ?? undefined;\n    const inputHelper = () => props.helper.value ?? '';\n    const inputError = () => props.error.value ?? '';\n    const inputDisabled = () => (isDisabled.value ? true : undefined);\n    const inputRequired = () => (props.required.value ? true : undefined);\n    const inputFullwidth = () => (props.fullwidth.value ? true : undefined);\n\n    return html`\n      <!-- Trigger: ore-input in readonly display mode -->\n      <ore-input\n        class=\"trigger\"\n        readonly\n        tabindex=\"${tabIndex}\"\n        role=\"combobox\"\n        aria-haspopup=\"dialog\"\n        aria-controls=\"${dialogId}\"\n        :aria-expanded=\"${() => String(isOpen.value)}\"\n        :aria-disabled=\"${() => (isDisabled.value ? 'true' : null)}\"\n        :value=\"${inputValue}\"\n        :label=\"${inputLabel}\"\n        :placeholder=\"${inputPlaceholder}\"\n        :label-placement=\"${inputLabelPlacement}\"\n        :color=\"${inputColor}\"\n        :size=\"${inputSize}\"\n        :variant=\"${inputVariant}\"\n        :rounded=\"${inputRounded}\"\n        :helper=\"${inputHelper}\"\n        :error=\"${inputError}\"\n        ?disabled=\"${inputDisabled}\"\n        ?required=\"${inputRequired}\"\n        ?fullwidth=\"${inputFullwidth}\"\n        @click=\"${handleTriggerClick}\"\n        @keydown=\"${handleTriggerKeydown}\">\n        <ore-icon slot=\"suffix\" name=\"calendar\" size=\"16\" stroke-width=\"1.75\" aria-hidden=\"true\"></ore-icon>\n      </ore-input>\n\n      <!-- Calendar popup -->\n      <div\n        class=\"calendar\"\n        id=\"${dialogId}\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-label=\"${() => `Choose date — ${displayLabel.value}`}\"\n        ?data-open=\"${isOpen}\"\n        @keydown=\"${handleCalendarKeydown}\">\n        <!-- Calendar header -->\n        <div class=\"cal-header\" part=\"header\">\n          <button class=\"nav-btn\" type=\"button\" aria-label=\"Previous\" @click=\"${handlePrev}\">\n            <ore-icon name=\"chevron-left\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n          </button>\n          <button\n            class=\"cal-label-btn\"\n            type=\"button\"\n            :aria-label=\"${() =>\n              `Switch to ${currentView.value === 'day' ? 'month' : currentView.value === 'month' ? 'year' : 'day'} view`}\"\n            @click=\"${handleHeaderClick}\">\n            <span class=\"cal-label-month\">${displayMonth_}</span><span class=\"cal-label-sep\" aria-hidden=\"true\">/</span\n            ><span class=\"cal-label-year\">${displayYear_}</span>\n          </button>\n          <button class=\"nav-btn\" type=\"button\" aria-label=\"Next\" @click=\"${handleNext}\">\n            <ore-icon name=\"chevron-right\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n          </button>\n        </div>\n\n        <!-- Day view: flat 7-column CSS grid, weekday headers + day cells -->\n        <div\n          class=\"cal-grid cal-grid-days\"\n          role=\"grid\"\n          part=\"grid\"\n          :aria-label=\"${() => displayLabel.value}\"\n          ?hidden=\"${() => currentView.value !== 'day'}\">\n          <div role=\"row\" class=\"cal-grid-row\">\n            ${() =>\n              weekdayLabels.value.map(\n                (lbl) => html`<div class=\"cal-cell cal-cell-head\" role=\"columnheader\" aria-label=\"${lbl}\">${lbl}</div>`,\n              )}\n          </div>\n          ${() => {\n            const cells = dayCells.value;\n            const rows: (typeof cells)[number][][] = [];\n\n            for (let i = 0; i < cells.length; i += 7) rows.push(cells.slice(i, i + 7));\n\n            return rows.map(\n              (row) =>\n                html`<div role=\"row\" class=\"cal-grid-row\">\n                  ${row.map(\n                    (cell) =>\n                      html`<div\n                        class=\"cal-cell cal-cell-day\"\n                        role=\"gridcell\"\n                        part=\"day\"\n                        :aria-selected=\"${() => String(cell.isSelected)}\"\n                        :aria-disabled=\"${() => String(cell.isDisabled)}\"\n                        :aria-current=\"${() => (cell.isToday ? 'date' : null)}\"\n                        ?data-selected=\"${() => cell.isSelected}\"\n                        ?data-today=\"${() => cell.isToday}\"\n                        ?data-outside=\"${() => cell.isOutsideMonth}\"\n                        ?data-disabled=\"${() => cell.isDisabled}\"\n                        data-iso=\"${cell.iso}\"\n                        tabindex=\"${() => (cell.isDisabled ? '-1' : '0')}\"\n                        @click=\"${() => handleSelectDay(cell.iso)}\"\n                        @keydown=\"${handleDayKeydown}\">\n                        ${String(cell.day)}\n                      </div>`,\n                  )}\n                </div>`,\n            );\n          }}\n        </div>\n\n        <!-- Month view -->\n        <div\n          class=\"cal-grid cal-grid-months\"\n          role=\"grid\"\n          :aria-label=\"${() => displayYear_.value}\"\n          ?hidden=\"${() => currentView.value !== 'month'}\">\n          ${() => {\n            const cells = monthCells.value;\n            const rows: (typeof cells)[number][][] = [];\n\n            for (let i = 0; i < cells.length; i += 4) rows.push(cells.slice(i, i + 4));\n\n            return rows.map(\n              (row) =>\n                html`<div role=\"row\">\n                  ${row.map(\n                    (cell) =>\n                      html`<div\n                        class=\"cal-cell cal-cell-month\"\n                        role=\"gridcell\"\n                        :aria-selected=\"${() => String(cell.isSelected)}\"\n                        :aria-disabled=\"${() => String(cell.isDisabled)}\"\n                        ?data-selected=\"${() => cell.isSelected}\"\n                        ?data-disabled=\"${() => cell.isDisabled}\"\n                        tabindex=\"${() => (cell.isDisabled ? '-1' : '0')}\"\n                        @click=\"${() => {\n                          if (!cell.isDisabled) handleSelectMonth(cell.month);\n                        }}\"\n                        @keydown=\"${(e: KeyboardEvent) =>\n                          handleGridKeydown(e, '.cal-cell-month', 4, () => {\n                            if (!cell.isDisabled) handleSelectMonth(cell.month);\n                          })}\">\n                        ${cell.shortLabel}\n                      </div>`,\n                  )}\n                </div>`,\n            );\n          }}\n        </div>\n\n        <!-- Year view -->\n        <div\n          class=\"cal-grid cal-grid-years\"\n          role=\"grid\"\n          aria-label=\"Select year\"\n          ?hidden=\"${() => currentView.value !== 'year'}\">\n          ${() => {\n            const cells = yearCells.value;\n            const rows: (typeof cells)[number][][] = [];\n\n            for (let i = 0; i < cells.length; i += 4) rows.push(cells.slice(i, i + 4));\n\n            return rows.map(\n              (row) =>\n                html`<div role=\"row\">\n                  ${row.map(\n                    (cell) =>\n                      html`<div\n                        class=\"cal-cell cal-cell-year\"\n                        role=\"gridcell\"\n                        :aria-selected=\"${() => String(cell.isSelected)}\"\n                        :aria-disabled=\"${() => String(cell.isDisabled)}\"\n                        ?data-selected=\"${() => cell.isSelected}\"\n                        ?data-disabled=\"${() => cell.isDisabled}\"\n                        tabindex=\"${() => (cell.isDisabled ? '-1' : '0')}\"\n                        @click=\"${() => {\n                          if (!cell.isDisabled) handleSelectYear(cell.year);\n                        }}\"\n                        @keydown=\"${(e: KeyboardEvent) =>\n                          handleGridKeydown(e, '.cal-cell-year', 4, () => {\n                            if (!cell.isDisabled) handleSelectYear(cell.year);\n                          })}\">\n                        ${String(cell.year)}\n                      </div>`,\n                  )}\n                </div>`,\n            );\n          }}\n        </div>\n      </div>\n    `;\n  },\n\n  shadow: { delegatesFocus: true },\n  styles: [colorThemeMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}

package/dist/dialog.cjs

@@ -1,8 +1,8 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./overlay/shared/use-dialog.cjs"),r=require("./overlay/dialog/dialog.css?inline.cjs");let i=require("@vielzeug/ore");var a=`ore-dialog`;(0,i.define)(a,{props:{backdrop:i.prop.string(),dismissible:i.prop.bool(!1),elevation:i.prop.string(),"initial-focus":i.prop.string(),label:i.prop.string(),open:i.prop.bool(!1),padding:i.prop.string(),persistent:i.prop.bool(!1),"return-focus":i.prop.bool(!0),rounded:i.prop.string(),size:i.prop.oneOf([`sm`,`md`,`lg`,`xl`,`full`],`md`)},setup(e,{el:t,emit:r,onCleanup:a,onEvent:o,onMounted:s,slots:c}){let l=(0,i.ref)(),u=()=>c.has(`header`).value||!!e.label.value||e.dismissible.value,d=()=>c.has(`footer`).value,{closeWithAnimation:f,overlay:p,requestClose:m,setupNativeListeners:h}=n.useDialogControl({dialogRef:l,getPanelEl:()=>l.value?.querySelector(`.panel`),host:t,initialFocus:e[`initial-focus`],isPersistent:()=>!!e.persistent.value,onCleanup:a,onEvent:o,onNativeClose:e=>r(`close`,{reason:e}),onOpen:e=>r(`open`,{reason:e}),openProp:e.open,performClose:()=>{f()},returnFocus:e[`return-focus`]});return s(()=>{if(l.value)return h(),()=>{p.dispose()}}),i.html`
-      <dialog ref=${l} class="dialog" part="dialog" aria-label="${e.label}" aria-modal="true">
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./overlay/shared/use-dialog.cjs"),r=require("./overlay/dialog/dialog.css.cjs");let i=require("@vielzeug/ore");var a=`ore-dialog`;(0,i.define)(a,{props:{backdrop:i.prop.string(),dismissible:i.prop.bool(!1),elevation:i.prop.string(),"initial-focus":i.prop.string(),label:i.prop.string(),open:i.prop.bool(!1),padding:i.prop.string(),persistent:i.prop.bool(!1),"return-focus":i.prop.bool(!0),rounded:i.prop.string(),size:i.prop.oneOf([`sm`,`md`,`lg`,`xl`,`full`],`md`)},setup(e){let t=(0,i.getHost)(),r=(0,i.useEmit)(),a=(0,i.useSlots)(),o=(0,i.ref)(),s=()=>a.has(`header`).value||!!e.label.value||e.dismissible.value,c=()=>a.has(`footer`).value,{closeWithAnimation:l,overlay:u,requestClose:d,setupNativeListeners:f}=n.useDialogControl({dialogRef:o,getPanelEl:()=>o.value?.querySelector(`.panel`),host:t,initialFocus:e[`initial-focus`],isPersistent:()=>!!e.persistent.value,onCleanup:i.onCleanup,onEvent:i.onEvent,onNativeClose:e=>r(`close`,{reason:e}),onOpen:e=>r(`open`,{reason:e}),openProp:e.open,performClose:()=>{l()},returnFocus:e[`return-focus`]});return(0,i.onMounted)(()=>{if(o.value)return f(),()=>{u.dispose()}}),i.html`
+      <dialog ref=${o} class="dialog" part="dialog" aria-label="${e.label}" aria-modal="true">
         <div class="overlay" part="overlay" aria-hidden="true"></div>
         <div class="panel" part="panel" :data-size="${e.size}">
-          <div class="header" part="header" ?hidden=${()=>!u()}>
+          <div class="header" part="header" ?hidden=${()=>!s()}>
             <slot name="header">
               <span class="title" part="title">${e.label}</span>
             </slot>
@@ -12,14 +12,14 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               type="button"
               aria-label="Close dialog"
               ?hidden=${()=>!e.dismissible.value}
-              @click=${()=>{m(`trigger`)}}>
+              @click=${()=>{d(`trigger`)}}>
               <ore-icon name="x" size="16" stroke-width="2.5" aria-hidden="true"></ore-icon>
             </button>
           </div>
           <div class="body" part="body">
             <slot></slot>
           </div>
-          <div class="footer" part="footer" ?hidden=${()=>!d()}>
+          <div class="footer" part="footer" ?hidden=${()=>!c()}>
             <slot name="footer"></slot>
           </div>
         </div>

package/dist/dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.cjs","names":[],"sources":["../src/overlay/dialog/dialog.ts"],"sourcesContent":["import { define, html, prop, ref } from '@vielzeug/ore';\n\nimport type { OverlayCloseDetail, OverlayOpenDetail } from '../../headless';\nimport type { PaddingSize, RoundedSize } from '../../types';\n\nimport { coarsePointerMixin, roundedVariantMixin } from '../../styles';\nimport { useDialogControl } from '../shared/use-dialog';\nimport '../../content/icon/icon';\nimport componentStyles from './dialog.css?inline';\n\ntype DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';\ntype DialogBackdrop = 'opaque' | 'blur' | 'transparent';\ntype DialogElevation = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n/** Dialog component properties */\n\nexport type OreDialogEvents = {\n  close: OverlayCloseDetail;\n  open: OverlayOpenDetail;\n};\n\nexport type OreDialogProps = {\n  /** Backdrop style — 'blur' (default): dark overlay + blur; 'opaque': dark overlay only; 'transparent': no overlay */\n  backdrop?: DialogBackdrop;\n  /** Show a close (×) button in the header */\n  dismissible?: boolean;\n  /** Panel shadow elevation — defaults to 'xl' */\n  elevation?: DialogElevation;\n  /**\n   * CSS selector for the element inside the dialog that should receive focus when the dialog opens.\n   * Defaults to the first focusable element (browser default).\n   * @example 'input[name=\"email\"]' | '#confirm-btn'\n   */\n  'initial-focus'?: string;\n  /** Dialog title shown in the header (used as aria-label when no header slot) */\n  label?: string;\n  /** Controls the open state of the dialog */\n  open?: boolean;\n  /** Internal padding size */\n  padding?: PaddingSize;\n  /** When true, clicking the backdrop does not close the dialog */\n  persistent?: boolean;\n  /**\n   * When true (default), the focus returns to the element that triggered the dialog after it closes.\n   * Set to false if you want to manage focus manually.\n   */\n  'return-focus'?: boolean;\n  /** Border radius */\n  rounded?: RoundedSize | '';\n  /** Dialog size */\n  size?: DialogSize;\n};\n\n/**\n * A modal dialog that traps focus, blocks page interaction, and dismisses on\n * `Escape`. Built on the native `<dialog>` element for correct top-layer stacking\n * and browser-managed accessibility.\n *\n * @element ore-dialog\n *\n * @attr {boolean} open - Open/close the dialog\n * @attr {string} label - Dialog title (also used as aria-label)\n * @attr {string} size - Size: 'sm' | 'md' | 'lg' | 'xl' | 'full'\n * @attr {boolean} dismissible - Show a close (×) button in the header\n * @attr {boolean} persistent - Prevent backdrop-click from closing\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} backdrop - Backdrop style: 'opaque' (default) | 'blur' | 'transparent'\n * @attr {string} elevation - Panel shadow: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n * @attr {string} padding - Padding: 'none' | 'sm' | 'md' | 'lg' | 'xl'\n *\n * @fires open - Fired when the dialog opens with detail: { reason }\n * @fires close - Fired when the dialog closes with detail: { reason }\n *\n * @slot - Dialog body content\n * @slot header - Custom header content (replaces the default title + close layout)\n * @slot footer - Action buttons or additional content at the bottom\n *\n * @cssprop --dialog-bg - Panel background color\n * @cssprop --dialog-border-color - Panel border color\n * @cssprop --dialog-radius - Panel border radius\n * @cssprop --dialog-shadow - Panel drop shadow\n * @cssprop --dialog-padding - Padding for header, body, and footer sections\n * @cssprop --dialog-gap - Gap between footer action buttons\n * @cssprop --dialog-backdrop - Backdrop overlay color\n * @cssprop --dialog-max-width - Maximum panel width (overridden by size prop)\n *\n * @part dialog - Dialog root container.\n * @part overlay - Overlay backdrop element.\n * @part panel - Panel container.\n * @part header - Header container.\n * @part title - Title text element.\n * @part close - Close action control.\n * @part body - Body content container.\n * @part footer - Footer container.\n * @example\n * ```html\n * <ore-dialog label=\"Confirm action\" dismissible>\n *   <p>Are you sure you want to delete this item?</p>\n *   <div slot=\"footer\">\n *     <ore-button variant=\"ghost\" id=\"cancel\">Cancel</ore-button>\n *     <ore-button color=\"error\" id=\"confirm\">Delete</ore-button>\n *   </div>\n * </ore-dialog>\n *\n * <script type=\"module\">\n *   import '@vielzeug/refine/dialog';\n *   const dialog = document.querySelector('ore-dialog');\n *   document.querySelector('#open-btn').addEventListener('click', () => {\n *     dialog.setAttribute('open', '');\n *   });\n *   document.querySelector('#cancel').addEventListener('click', () => {\n *     dialog.removeAttribute('open');\n *   });\n * </script>\n * ```\n */\n\nexport const DIALOG_TAG = 'ore-dialog' as const;\ndefine<OreDialogProps, OreDialogEvents>(DIALOG_TAG, {\n  props: {\n    backdrop: prop.string<DialogBackdrop>(),\n    dismissible: prop.bool(false),\n    elevation: prop.string<DialogElevation>(),\n    'initial-focus': prop.string(),\n    label: prop.string(),\n    open: prop.bool(false),\n    padding: prop.string<PaddingSize>(),\n    persistent: prop.bool(false),\n    'return-focus': prop.bool(true),\n    rounded: prop.string<RoundedSize | ''>(),\n    size: prop.oneOf(['sm', 'md', 'lg', 'xl', 'full'] as const, 'md'),\n  },\n  setup(props, { el, emit, onCleanup, onEvent, onMounted, slots }) {\n    const dialogRef = ref<HTMLDialogElement>();\n    const hasHeader = () => slots.has('header').value || !!props.label.value || props.dismissible.value;\n    const hasFooter = () => slots.has('footer').value;\n\n    const { closeWithAnimation, overlay, requestClose, setupNativeListeners } = useDialogControl({\n      dialogRef,\n      getPanelEl: () => dialogRef.value?.querySelector<HTMLElement>('.panel'),\n      host: el,\n      initialFocus: props['initial-focus'],\n      isPersistent: () => Boolean(props.persistent.value),\n      onCleanup,\n      onEvent,\n      onNativeClose: (reason) => emit('close', { reason }),\n      onOpen: (reason) => emit('open', { reason }),\n      openProp: props.open,\n      performClose: () => {\n        closeWithAnimation();\n      },\n      returnFocus: props['return-focus'],\n    });\n\n    const handleDismiss = () => {\n      requestClose('trigger');\n    };\n\n    onMounted(() => {\n      const dialog = dialogRef.value;\n\n      if (!dialog) return;\n\n      setupNativeListeners();\n\n      return () => {\n        overlay.dispose();\n      };\n    });\n\n    return html`\n      <dialog ref=${dialogRef} class=\"dialog\" part=\"dialog\" aria-label=\"${props.label}\" aria-modal=\"true\">\n        <div class=\"overlay\" part=\"overlay\" aria-hidden=\"true\"></div>\n        <div class=\"panel\" part=\"panel\" :data-size=\"${props.size}\">\n          <div class=\"header\" part=\"header\" ?hidden=${() => !hasHeader()}>\n            <slot name=\"header\">\n              <span class=\"title\" part=\"title\">${props.label}</span>\n            </slot>\n            <button\n              class=\"close\"\n              part=\"close\"\n              type=\"button\"\n              aria-label=\"Close dialog\"\n              ?hidden=${() => !props.dismissible.value}\n              @click=${handleDismiss}>\n              <ore-icon name=\"x\" size=\"16\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n            </button>\n          </div>\n          <div class=\"body\" part=\"body\">\n            <slot></slot>\n          </div>\n          <div class=\"footer\" part=\"footer\" ?hidden=${() => !hasFooter()}>\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </dialog>\n    `;\n  },\n  styles: [roundedVariantMixin, coarsePointerMixin, componentStyles],\n});\n"],"mappings":"uSAqHA,IAAa,EAAa,0BACc,EAAY,CAClD,MAAO,CACL,SAAU,EAAA,KAAK,OAAuB,EACtC,YAAa,EAAA,KAAK,KAAK,EAAK,EAC5B,UAAW,EAAA,KAAK,OAAwB,EACxC,gBAAiB,EAAA,KAAK,OAAO,EAC7B,MAAO,EAAA,KAAK,OAAO,EACnB,KAAM,EAAA,KAAK,KAAK,EAAK,EACrB,QAAS,EAAA,KAAK,OAAoB,EAClC,WAAY,EAAA,KAAK,KAAK,EAAK,EAC3B,eAAgB,EAAA,KAAK,KAAK,EAAI,EAC9B,QAAS,EAAA,KAAK,OAAyB,EACvC,KAAM,EAAA,KAAK,MAAM,CAAC,KAAM,KAAM,KAAM,KAAM,MAAM,EAAY,IAAI,CAClE,EACA,MAAM,EAAO,CAAE,KAAI,OAAM,YAAW,UAAS,YAAW,SAAS,CAC/D,IAAM,GAAA,EAAA,EAAA,IAAA,CAAmC,EACnC,MAAkB,EAAM,IAAI,QAAQ,CAAC,CAAC,OAAS,CAAC,CAAC,EAAM,MAAM,OAAS,EAAM,YAAY,MACxF,MAAkB,EAAM,IAAI,QAAQ,CAAC,CAAC,MAEtC,CAAE,qBAAoB,UAAS,eAAc,wBAAyB,EAAA,iBAAiB,CAC3F,YACA,eAAkB,EAAU,OAAO,cAA2B,QAAQ,EACtE,KAAM,EACN,aAAc,EAAM,iBACpB,iBAAoB,EAAQ,EAAM,WAAW,MAC7C,YACA,UACA,cAAgB,GAAW,EAAK,QAAS,CAAE,QAAO,CAAC,EACnD,OAAS,GAAW,EAAK,OAAQ,CAAE,QAAO,CAAC,EAC3C,SAAU,EAAM,KAChB,iBAAoB,CAClB,EAAmB,CACrB,EACA,YAAa,EAAM,eACrB,CAAC,EAkBD,OAZA,MAAgB,CACC,KAAU,MAMzB,OAFA,EAAqB,MAER,CACX,EAAQ,QAAQ,CAClB,CACF,CAAC,EAEM,EAAA,IAAI;oBACK,EAAU,4CAA4C,EAAM,MAAM;;sDAEhC,EAAM,KAAK;0DACL,CAAC,EAAU,EAAE;;iDAExB,EAAM,MAAM;;;;;;;4BAO/B,CAAC,EAAM,YAAY,MAAM;2BA7BvB,CAC1B,EAAa,SAAS,CACxB,EA4BiC;;;;;;;0DAOuB,CAAC,EAAU,EAAE;;;;;KAMvE,EACA,OAAQ,CAAC,EAAA,oBAAqB,EAAA,mBAAoB,EAAA,OAAe,CACnE,CAAC"}
+{"version":3,"file":"dialog.cjs","names":[],"sources":["../src/overlay/dialog/dialog.ts"],"sourcesContent":["import { define, html, prop, ref, getHost, onCleanup, onEvent, onMounted, useEmit, useSlots } from '@vielzeug/ore';\n\nimport type { OverlayCloseDetail, OverlayOpenDetail } from '../../headless';\nimport type { PaddingSize, RoundedSize } from '../../types';\n\nimport { coarsePointerMixin, roundedVariantMixin } from '../../styles';\nimport { useDialogControl } from '../shared/use-dialog';\nimport '../../content/icon/icon';\nimport componentStyles from './dialog.css?inline';\n\ntype DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';\ntype DialogBackdrop = 'opaque' | 'blur' | 'transparent';\ntype DialogElevation = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n/** Dialog component properties */\n\nexport type OreDialogEvents = {\n  close: OverlayCloseDetail;\n  open: OverlayOpenDetail;\n};\n\nexport type OreDialogProps = {\n  /** Backdrop style — 'blur' (default): dark overlay + blur; 'opaque': dark overlay only; 'transparent': no overlay */\n  backdrop?: DialogBackdrop;\n  /** Show a close (×) button in the header */\n  dismissible?: boolean;\n  /** Panel shadow elevation — defaults to 'xl' */\n  elevation?: DialogElevation;\n  /**\n   * CSS selector for the element inside the dialog that should receive focus when the dialog opens.\n   * Defaults to the first focusable element (browser default).\n   * @example 'input[name=\"email\"]' | '#confirm-btn'\n   */\n  'initial-focus'?: string;\n  /** Dialog title shown in the header (used as aria-label when no header slot) */\n  label?: string;\n  /** Controls the open state of the dialog */\n  open?: boolean;\n  /** Internal padding size */\n  padding?: PaddingSize;\n  /** When true, clicking the backdrop does not close the dialog */\n  persistent?: boolean;\n  /**\n   * When true (default), the focus returns to the element that triggered the dialog after it closes.\n   * Set to false if you want to manage focus manually.\n   */\n  'return-focus'?: boolean;\n  /** Border radius */\n  rounded?: RoundedSize | '';\n  /** Dialog size */\n  size?: DialogSize;\n};\n\n/**\n * A modal dialog that traps focus, blocks page interaction, and dismisses on\n * `Escape`. Built on the native `<dialog>` element for correct top-layer stacking\n * and browser-managed accessibility.\n *\n * @element ore-dialog\n *\n * @attr {boolean} open - Open/close the dialog\n * @attr {string} label - Dialog title (also used as aria-label)\n * @attr {string} size - Size: 'sm' | 'md' | 'lg' | 'xl' | 'full'\n * @attr {boolean} dismissible - Show a close (×) button in the header\n * @attr {boolean} persistent - Prevent backdrop-click from closing\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} backdrop - Backdrop style: 'opaque' (default) | 'blur' | 'transparent'\n * @attr {string} elevation - Panel shadow: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n * @attr {string} padding - Padding: 'none' | 'sm' | 'md' | 'lg' | 'xl'\n *\n * @fires open - Fired when the dialog opens with detail: { reason }\n * @fires close - Fired when the dialog closes with detail: { reason }\n *\n * @slot - Dialog body content\n * @slot header - Custom header content (replaces the default title + close layout)\n * @slot footer - Action buttons or additional content at the bottom\n *\n * @cssprop --dialog-bg - Panel background color\n * @cssprop --dialog-border-color - Panel border color\n * @cssprop --dialog-radius - Panel border radius\n * @cssprop --dialog-shadow - Panel drop shadow\n * @cssprop --dialog-padding - Padding for header, body, and footer sections\n * @cssprop --dialog-gap - Gap between footer action buttons\n * @cssprop --dialog-backdrop - Backdrop overlay color\n * @cssprop --dialog-max-width - Maximum panel width (overridden by size prop)\n *\n * @part dialog - Dialog root container.\n * @part overlay - Overlay backdrop element.\n * @part panel - Panel container.\n * @part header - Header container.\n * @part title - Title text element.\n * @part close - Close action control.\n * @part body - Body content container.\n * @part footer - Footer container.\n * @example\n * ```html\n * <ore-dialog label=\"Confirm action\" dismissible>\n *   <p>Are you sure you want to delete this item?</p>\n *   <div slot=\"footer\">\n *     <ore-button variant=\"ghost\" id=\"cancel\">Cancel</ore-button>\n *     <ore-button color=\"error\" id=\"confirm\">Delete</ore-button>\n *   </div>\n * </ore-dialog>\n *\n * <script type=\"module\">\n *   import '@vielzeug/refine/dialog';\n *   const dialog = document.querySelector('ore-dialog');\n *   document.querySelector('#open-btn').addEventListener('click', () => {\n *     dialog.setAttribute('open', '');\n *   });\n *   document.querySelector('#cancel').addEventListener('click', () => {\n *     dialog.removeAttribute('open');\n *   });\n * </script>\n * ```\n */\n\nexport const DIALOG_TAG = 'ore-dialog' as const;\ndefine<OreDialogProps>(DIALOG_TAG, {\n  props: {\n    backdrop: prop.string<DialogBackdrop>(),\n    dismissible: prop.bool(false),\n    elevation: prop.string<DialogElevation>(),\n    'initial-focus': prop.string(),\n    label: prop.string(),\n    open: prop.bool(false),\n    padding: prop.string<PaddingSize>(),\n    persistent: prop.bool(false),\n    'return-focus': prop.bool(true),\n    rounded: prop.string<RoundedSize | ''>(),\n    size: prop.oneOf(['sm', 'md', 'lg', 'xl', 'full'] as const, 'md'),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreDialogEvents>();\n    const slots = useSlots();\n\n    const dialogRef = ref<HTMLDialogElement>();\n    const hasHeader = () => slots.has('header').value || !!props.label.value || props.dismissible.value;\n    const hasFooter = () => slots.has('footer').value;\n\n    const { closeWithAnimation, overlay, requestClose, setupNativeListeners } = useDialogControl({\n      dialogRef,\n      getPanelEl: () => dialogRef.value?.querySelector<HTMLElement>('.panel'),\n      host: el,\n      initialFocus: props['initial-focus'],\n      isPersistent: () => Boolean(props.persistent.value),\n      onCleanup,\n      onEvent,\n      onNativeClose: (reason) => emit('close', { reason }),\n      onOpen: (reason) => emit('open', { reason }),\n      openProp: props.open,\n      performClose: () => {\n        closeWithAnimation();\n      },\n      returnFocus: props['return-focus'],\n    });\n\n    const handleDismiss = () => {\n      requestClose('trigger');\n    };\n\n    onMounted(() => {\n      const dialog = dialogRef.value;\n\n      if (!dialog) return;\n\n      setupNativeListeners();\n\n      return () => {\n        overlay.dispose();\n      };\n    });\n\n    return html`\n      <dialog ref=${dialogRef} class=\"dialog\" part=\"dialog\" aria-label=\"${props.label}\" aria-modal=\"true\">\n        <div class=\"overlay\" part=\"overlay\" aria-hidden=\"true\"></div>\n        <div class=\"panel\" part=\"panel\" :data-size=\"${props.size}\">\n          <div class=\"header\" part=\"header\" ?hidden=${() => !hasHeader()}>\n            <slot name=\"header\">\n              <span class=\"title\" part=\"title\">${props.label}</span>\n            </slot>\n            <button\n              class=\"close\"\n              part=\"close\"\n              type=\"button\"\n              aria-label=\"Close dialog\"\n              ?hidden=${() => !props.dismissible.value}\n              @click=${handleDismiss}>\n              <ore-icon name=\"x\" size=\"16\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n            </button>\n          </div>\n          <div class=\"body\" part=\"body\">\n            <slot></slot>\n          </div>\n          <div class=\"footer\" part=\"footer\" ?hidden=${() => !hasFooter()}>\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </dialog>\n    `;\n  },\n  styles: [roundedVariantMixin, coarsePointerMixin, componentStyles],\n});\n"],"mappings":"gSAqHA,IAAa,EAAa,0BACH,EAAY,CACjC,MAAO,CACL,SAAU,EAAA,KAAK,OAAuB,EACtC,YAAa,EAAA,KAAK,KAAK,EAAK,EAC5B,UAAW,EAAA,KAAK,OAAwB,EACxC,gBAAiB,EAAA,KAAK,OAAO,EAC7B,MAAO,EAAA,KAAK,OAAO,EACnB,KAAM,EAAA,KAAK,KAAK,EAAK,EACrB,QAAS,EAAA,KAAK,OAAoB,EAClC,WAAY,EAAA,KAAK,KAAK,EAAK,EAC3B,eAAgB,EAAA,KAAK,KAAK,EAAI,EAC9B,QAAS,EAAA,KAAK,OAAyB,EACvC,KAAM,EAAA,KAAK,MAAM,CAAC,KAAM,KAAM,KAAM,KAAM,MAAM,EAAY,IAAI,CAClE,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAA,EAAA,QAAA,CAAa,EACb,GAAA,EAAA,EAAA,QAAA,CAAgC,EAChC,GAAA,EAAA,EAAA,SAAA,CAAiB,EAEjB,GAAA,EAAA,EAAA,IAAA,CAAmC,EACnC,MAAkB,EAAM,IAAI,QAAQ,CAAC,CAAC,OAAS,CAAC,CAAC,EAAM,MAAM,OAAS,EAAM,YAAY,MACxF,MAAkB,EAAM,IAAI,QAAQ,CAAC,CAAC,MAEtC,CAAE,qBAAoB,UAAS,eAAc,wBAAyB,EAAA,iBAAiB,CAC3F,YACA,eAAkB,EAAU,OAAO,cAA2B,QAAQ,EACtE,KAAM,EACN,aAAc,EAAM,iBACpB,iBAAoB,EAAQ,EAAM,WAAW,MAC7C,UAAA,EAAA,UACA,QAAA,EAAA,QACA,cAAgB,GAAW,EAAK,QAAS,CAAE,QAAO,CAAC,EACnD,OAAS,GAAW,EAAK,OAAQ,CAAE,QAAO,CAAC,EAC3C,SAAU,EAAM,KAChB,iBAAoB,CAClB,EAAmB,CACrB,EACA,YAAa,EAAM,eACrB,CAAC,EAkBD,OAZA,EAAA,EAAA,UAAA,KAAgB,CACC,KAAU,MAMzB,OAFA,EAAqB,MAER,CACX,EAAQ,QAAQ,CAClB,CACF,CAAC,EAEM,EAAA,IAAI;oBACK,EAAU,4CAA4C,EAAM,MAAM;;sDAEhC,EAAM,KAAK;0DACL,CAAC,EAAU,EAAE;;iDAExB,EAAM,MAAM;;;;;;;4BAO/B,CAAC,EAAM,YAAY,MAAM;2BA7BvB,CAC1B,EAAa,SAAS,CACxB,EA4BiC;;;;;;;0DAOuB,CAAC,EAAU,EAAE;;;;;KAMvE,EACA,OAAQ,CAAC,EAAA,oBAAqB,EAAA,mBAAoB,EAAA,OAAe,CACnE,CAAC"}

package/dist/dialog.js

@@ -1,23 +1,23 @@
 import { coarsePointerMixin as e } from "./styles/mixins/accessibility.css.js";
 import { roundedVariantMixin as t } from "./styles/mixins/shape.css.js";
 import { useDialogControl as n } from "./overlay/shared/use-dialog.js";
-import r from "./overlay/dialog/dialog.css?inline.js";
-import { define as i, html as a, prop as o, ref as s } from "@vielzeug/ore";
+import r from "./overlay/dialog/dialog.css.js";
+import { define as i, getHost as a, html as o, onCleanup as s, onEvent as c, onMounted as l, prop as u, ref as d, useEmit as f, useSlots as p } from "@vielzeug/ore";
 //#region src/overlay/dialog/dialog.ts
-var c = "ore-dialog";
-i(c, {
+var m = "ore-dialog";
+i(m, {
 	props: {
-		backdrop: o.string(),
-		dismissible: o.bool(!1),
-		elevation: o.string(),
-		"initial-focus": o.string(),
-		label: o.string(),
-		open: o.bool(!1),
-		padding: o.string(),
-		persistent: o.bool(!1),
-		"return-focus": o.bool(!0),
-		rounded: o.string(),
-		size: o.oneOf([
+		backdrop: u.string(),
+		dismissible: u.bool(!1),
+		elevation: u.string(),
+		"initial-focus": u.string(),
+		label: u.string(),
+		open: u.bool(!1),
+		padding: u.string(),
+		persistent: u.bool(!1),
+		"return-focus": u.bool(!0),
+		rounded: u.string(),
+		size: u.oneOf([
 			"sm",
 			"md",
 			"lg",
@@ -25,32 +25,32 @@ i(c, {
 			"full"
 		], "md")
 	},
-	setup(e, { el: t, emit: r, onCleanup: i, onEvent: o, onMounted: c, slots: l }) {
-		let u = s(), d = () => l.has("header").value || !!e.label.value || e.dismissible.value, f = () => l.has("footer").value, { closeWithAnimation: p, overlay: m, requestClose: h, setupNativeListeners: g } = n({
+	setup(e) {
+		let t = a(), r = f(), i = p(), u = d(), m = () => i.has("header").value || !!e.label.value || e.dismissible.value, h = () => i.has("footer").value, { closeWithAnimation: g, overlay: _, requestClose: v, setupNativeListeners: y } = n({
 			dialogRef: u,
 			getPanelEl: () => u.value?.querySelector(".panel"),
 			host: t,
 			initialFocus: e["initial-focus"],
 			isPersistent: () => !!e.persistent.value,
-			onCleanup: i,
-			onEvent: o,
+			onCleanup: s,
+			onEvent: c,
 			onNativeClose: (e) => r("close", { reason: e }),
 			onOpen: (e) => r("open", { reason: e }),
 			openProp: e.open,
 			performClose: () => {
-				p();
+				g();
 			},
 			returnFocus: e["return-focus"]
 		});
-		return c(() => {
-			if (u.value) return g(), () => {
-				m.dispose();
+		return l(() => {
+			if (u.value) return y(), () => {
+				_.dispose();
 			};
-		}), a`
+		}), o`
       <dialog ref=${u} class="dialog" part="dialog" aria-label="${e.label}" aria-modal="true">
         <div class="overlay" part="overlay" aria-hidden="true"></div>
         <div class="panel" part="panel" :data-size="${e.size}">
-          <div class="header" part="header" ?hidden=${() => !d()}>
+          <div class="header" part="header" ?hidden=${() => !m()}>
             <slot name="header">
               <span class="title" part="title">${e.label}</span>
             </slot>
@@ -61,7 +61,7 @@ i(c, {
               aria-label="Close dialog"
               ?hidden=${() => !e.dismissible.value}
               @click=${() => {
-			h("trigger");
+			v("trigger");
 		}}>
               <ore-icon name="x" size="16" stroke-width="2.5" aria-hidden="true"></ore-icon>
             </button>
@@ -69,7 +69,7 @@ i(c, {
           <div class="body" part="body">
             <slot></slot>
           </div>
-          <div class="footer" part="footer" ?hidden=${() => !f()}>
+          <div class="footer" part="footer" ?hidden=${() => !h()}>
             <slot name="footer"></slot>
           </div>
         </div>
@@ -83,6 +83,6 @@ i(c, {
 	]
 });
 //#endregion
-export { c as DIALOG_TAG };
+export { m as DIALOG_TAG };
 
 //# sourceMappingURL=dialog.js.map

package/dist/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":[],"sources":["../src/overlay/dialog/dialog.ts"],"sourcesContent":["import { define, html, prop, ref } from '@vielzeug/ore';\n\nimport type { OverlayCloseDetail, OverlayOpenDetail } from '../../headless';\nimport type { PaddingSize, RoundedSize } from '../../types';\n\nimport { coarsePointerMixin, roundedVariantMixin } from '../../styles';\nimport { useDialogControl } from '../shared/use-dialog';\nimport '../../content/icon/icon';\nimport componentStyles from './dialog.css?inline';\n\ntype DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';\ntype DialogBackdrop = 'opaque' | 'blur' | 'transparent';\ntype DialogElevation = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n/** Dialog component properties */\n\nexport type OreDialogEvents = {\n  close: OverlayCloseDetail;\n  open: OverlayOpenDetail;\n};\n\nexport type OreDialogProps = {\n  /** Backdrop style — 'blur' (default): dark overlay + blur; 'opaque': dark overlay only; 'transparent': no overlay */\n  backdrop?: DialogBackdrop;\n  /** Show a close (×) button in the header */\n  dismissible?: boolean;\n  /** Panel shadow elevation — defaults to 'xl' */\n  elevation?: DialogElevation;\n  /**\n   * CSS selector for the element inside the dialog that should receive focus when the dialog opens.\n   * Defaults to the first focusable element (browser default).\n   * @example 'input[name=\"email\"]' | '#confirm-btn'\n   */\n  'initial-focus'?: string;\n  /** Dialog title shown in the header (used as aria-label when no header slot) */\n  label?: string;\n  /** Controls the open state of the dialog */\n  open?: boolean;\n  /** Internal padding size */\n  padding?: PaddingSize;\n  /** When true, clicking the backdrop does not close the dialog */\n  persistent?: boolean;\n  /**\n   * When true (default), the focus returns to the element that triggered the dialog after it closes.\n   * Set to false if you want to manage focus manually.\n   */\n  'return-focus'?: boolean;\n  /** Border radius */\n  rounded?: RoundedSize | '';\n  /** Dialog size */\n  size?: DialogSize;\n};\n\n/**\n * A modal dialog that traps focus, blocks page interaction, and dismisses on\n * `Escape`. Built on the native `<dialog>` element for correct top-layer stacking\n * and browser-managed accessibility.\n *\n * @element ore-dialog\n *\n * @attr {boolean} open - Open/close the dialog\n * @attr {string} label - Dialog title (also used as aria-label)\n * @attr {string} size - Size: 'sm' | 'md' | 'lg' | 'xl' | 'full'\n * @attr {boolean} dismissible - Show a close (×) button in the header\n * @attr {boolean} persistent - Prevent backdrop-click from closing\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} backdrop - Backdrop style: 'opaque' (default) | 'blur' | 'transparent'\n * @attr {string} elevation - Panel shadow: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n * @attr {string} padding - Padding: 'none' | 'sm' | 'md' | 'lg' | 'xl'\n *\n * @fires open - Fired when the dialog opens with detail: { reason }\n * @fires close - Fired when the dialog closes with detail: { reason }\n *\n * @slot - Dialog body content\n * @slot header - Custom header content (replaces the default title + close layout)\n * @slot footer - Action buttons or additional content at the bottom\n *\n * @cssprop --dialog-bg - Panel background color\n * @cssprop --dialog-border-color - Panel border color\n * @cssprop --dialog-radius - Panel border radius\n * @cssprop --dialog-shadow - Panel drop shadow\n * @cssprop --dialog-padding - Padding for header, body, and footer sections\n * @cssprop --dialog-gap - Gap between footer action buttons\n * @cssprop --dialog-backdrop - Backdrop overlay color\n * @cssprop --dialog-max-width - Maximum panel width (overridden by size prop)\n *\n * @part dialog - Dialog root container.\n * @part overlay - Overlay backdrop element.\n * @part panel - Panel container.\n * @part header - Header container.\n * @part title - Title text element.\n * @part close - Close action control.\n * @part body - Body content container.\n * @part footer - Footer container.\n * @example\n * ```html\n * <ore-dialog label=\"Confirm action\" dismissible>\n *   <p>Are you sure you want to delete this item?</p>\n *   <div slot=\"footer\">\n *     <ore-button variant=\"ghost\" id=\"cancel\">Cancel</ore-button>\n *     <ore-button color=\"error\" id=\"confirm\">Delete</ore-button>\n *   </div>\n * </ore-dialog>\n *\n * <script type=\"module\">\n *   import '@vielzeug/refine/dialog';\n *   const dialog = document.querySelector('ore-dialog');\n *   document.querySelector('#open-btn').addEventListener('click', () => {\n *     dialog.setAttribute('open', '');\n *   });\n *   document.querySelector('#cancel').addEventListener('click', () => {\n *     dialog.removeAttribute('open');\n *   });\n * </script>\n * ```\n */\n\nexport const DIALOG_TAG = 'ore-dialog' as const;\ndefine<OreDialogProps, OreDialogEvents>(DIALOG_TAG, {\n  props: {\n    backdrop: prop.string<DialogBackdrop>(),\n    dismissible: prop.bool(false),\n    elevation: prop.string<DialogElevation>(),\n    'initial-focus': prop.string(),\n    label: prop.string(),\n    open: prop.bool(false),\n    padding: prop.string<PaddingSize>(),\n    persistent: prop.bool(false),\n    'return-focus': prop.bool(true),\n    rounded: prop.string<RoundedSize | ''>(),\n    size: prop.oneOf(['sm', 'md', 'lg', 'xl', 'full'] as const, 'md'),\n  },\n  setup(props, { el, emit, onCleanup, onEvent, onMounted, slots }) {\n    const dialogRef = ref<HTMLDialogElement>();\n    const hasHeader = () => slots.has('header').value || !!props.label.value || props.dismissible.value;\n    const hasFooter = () => slots.has('footer').value;\n\n    const { closeWithAnimation, overlay, requestClose, setupNativeListeners } = useDialogControl({\n      dialogRef,\n      getPanelEl: () => dialogRef.value?.querySelector<HTMLElement>('.panel'),\n      host: el,\n      initialFocus: props['initial-focus'],\n      isPersistent: () => Boolean(props.persistent.value),\n      onCleanup,\n      onEvent,\n      onNativeClose: (reason) => emit('close', { reason }),\n      onOpen: (reason) => emit('open', { reason }),\n      openProp: props.open,\n      performClose: () => {\n        closeWithAnimation();\n      },\n      returnFocus: props['return-focus'],\n    });\n\n    const handleDismiss = () => {\n      requestClose('trigger');\n    };\n\n    onMounted(() => {\n      const dialog = dialogRef.value;\n\n      if (!dialog) return;\n\n      setupNativeListeners();\n\n      return () => {\n        overlay.dispose();\n      };\n    });\n\n    return html`\n      <dialog ref=${dialogRef} class=\"dialog\" part=\"dialog\" aria-label=\"${props.label}\" aria-modal=\"true\">\n        <div class=\"overlay\" part=\"overlay\" aria-hidden=\"true\"></div>\n        <div class=\"panel\" part=\"panel\" :data-size=\"${props.size}\">\n          <div class=\"header\" part=\"header\" ?hidden=${() => !hasHeader()}>\n            <slot name=\"header\">\n              <span class=\"title\" part=\"title\">${props.label}</span>\n            </slot>\n            <button\n              class=\"close\"\n              part=\"close\"\n              type=\"button\"\n              aria-label=\"Close dialog\"\n              ?hidden=${() => !props.dismissible.value}\n              @click=${handleDismiss}>\n              <ore-icon name=\"x\" size=\"16\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n            </button>\n          </div>\n          <div class=\"body\" part=\"body\">\n            <slot></slot>\n          </div>\n          <div class=\"footer\" part=\"footer\" ?hidden=${() => !hasFooter()}>\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </dialog>\n    `;\n  },\n  styles: [roundedVariantMixin, coarsePointerMixin, componentStyles],\n});\n"],"mappings":";;;;;;AAqHA,IAAa,IAAa;AAC1B,EAAwC,GAAY;CAClD,OAAO;EACL,UAAU,EAAK,OAAuB;EACtC,aAAa,EAAK,KAAK,EAAK;EAC5B,WAAW,EAAK,OAAwB;EACxC,iBAAiB,EAAK,OAAO;EAC7B,OAAO,EAAK,OAAO;EACnB,MAAM,EAAK,KAAK,EAAK;EACrB,SAAS,EAAK,OAAoB;EAClC,YAAY,EAAK,KAAK,EAAK;EAC3B,gBAAgB,EAAK,KAAK,EAAI;EAC9B,SAAS,EAAK,OAAyB;EACvC,MAAM,EAAK,MAAM;GAAC;GAAM;GAAM;GAAM;GAAM;EAAM,GAAY,IAAI;CAClE;CACA,MAAM,GAAO,EAAE,OAAI,SAAM,cAAW,YAAS,cAAW,YAAS;EAC/D,IAAM,IAAY,EAAuB,GACnC,UAAkB,EAAM,IAAI,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC,EAAM,MAAM,SAAS,EAAM,YAAY,OACxF,UAAkB,EAAM,IAAI,QAAQ,CAAC,CAAC,OAEtC,EAAE,uBAAoB,YAAS,iBAAc,4BAAyB,EAAiB;GAC3F;GACA,kBAAkB,EAAU,OAAO,cAA2B,QAAQ;GACtE,MAAM;GACN,cAAc,EAAM;GACpB,oBAAoB,EAAQ,EAAM,WAAW;GAC7C;GACA;GACA,gBAAgB,MAAW,EAAK,SAAS,EAAE,UAAO,CAAC;GACnD,SAAS,MAAW,EAAK,QAAQ,EAAE,UAAO,CAAC;GAC3C,UAAU,EAAM;GAChB,oBAAoB;IAClB,EAAmB;GACrB;GACA,aAAa,EAAM;EACrB,CAAC;EAkBD,OAZA,QAAgB;GACC,MAAU,OAMzB,OAFA,EAAqB,SAER;IACX,EAAQ,QAAQ;GAClB;EACF,CAAC,GAEM,CAAI;oBACK,EAAU,4CAA4C,EAAM,MAAM;;sDAEhC,EAAM,KAAK;4DACL,CAAC,EAAU,EAAE;;iDAExB,EAAM,MAAM;;;;;;;8BAO/B,CAAC,EAAM,YAAY,MAAM;6BA7BvB;GAC1B,EAAa,SAAS;EACxB,EA4BiC;;;;;;;4DAOuB,CAAC,EAAU,EAAE;;;;;;CAMvE;CACA,QAAQ;EAAC;EAAqB;EAAoB;CAAe;AACnE,CAAC"}
+{"version":3,"file":"dialog.js","names":[],"sources":["../src/overlay/dialog/dialog.ts"],"sourcesContent":["import { define, html, prop, ref, getHost, onCleanup, onEvent, onMounted, useEmit, useSlots } from '@vielzeug/ore';\n\nimport type { OverlayCloseDetail, OverlayOpenDetail } from '../../headless';\nimport type { PaddingSize, RoundedSize } from '../../types';\n\nimport { coarsePointerMixin, roundedVariantMixin } from '../../styles';\nimport { useDialogControl } from '../shared/use-dialog';\nimport '../../content/icon/icon';\nimport componentStyles from './dialog.css?inline';\n\ntype DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';\ntype DialogBackdrop = 'opaque' | 'blur' | 'transparent';\ntype DialogElevation = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n/** Dialog component properties */\n\nexport type OreDialogEvents = {\n  close: OverlayCloseDetail;\n  open: OverlayOpenDetail;\n};\n\nexport type OreDialogProps = {\n  /** Backdrop style — 'blur' (default): dark overlay + blur; 'opaque': dark overlay only; 'transparent': no overlay */\n  backdrop?: DialogBackdrop;\n  /** Show a close (×) button in the header */\n  dismissible?: boolean;\n  /** Panel shadow elevation — defaults to 'xl' */\n  elevation?: DialogElevation;\n  /**\n   * CSS selector for the element inside the dialog that should receive focus when the dialog opens.\n   * Defaults to the first focusable element (browser default).\n   * @example 'input[name=\"email\"]' | '#confirm-btn'\n   */\n  'initial-focus'?: string;\n  /** Dialog title shown in the header (used as aria-label when no header slot) */\n  label?: string;\n  /** Controls the open state of the dialog */\n  open?: boolean;\n  /** Internal padding size */\n  padding?: PaddingSize;\n  /** When true, clicking the backdrop does not close the dialog */\n  persistent?: boolean;\n  /**\n   * When true (default), the focus returns to the element that triggered the dialog after it closes.\n   * Set to false if you want to manage focus manually.\n   */\n  'return-focus'?: boolean;\n  /** Border radius */\n  rounded?: RoundedSize | '';\n  /** Dialog size */\n  size?: DialogSize;\n};\n\n/**\n * A modal dialog that traps focus, blocks page interaction, and dismisses on\n * `Escape`. Built on the native `<dialog>` element for correct top-layer stacking\n * and browser-managed accessibility.\n *\n * @element ore-dialog\n *\n * @attr {boolean} open - Open/close the dialog\n * @attr {string} label - Dialog title (also used as aria-label)\n * @attr {string} size - Size: 'sm' | 'md' | 'lg' | 'xl' | 'full'\n * @attr {boolean} dismissible - Show a close (×) button in the header\n * @attr {boolean} persistent - Prevent backdrop-click from closing\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} backdrop - Backdrop style: 'opaque' (default) | 'blur' | 'transparent'\n * @attr {string} elevation - Panel shadow: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n * @attr {string} padding - Padding: 'none' | 'sm' | 'md' | 'lg' | 'xl'\n *\n * @fires open - Fired when the dialog opens with detail: { reason }\n * @fires close - Fired when the dialog closes with detail: { reason }\n *\n * @slot - Dialog body content\n * @slot header - Custom header content (replaces the default title + close layout)\n * @slot footer - Action buttons or additional content at the bottom\n *\n * @cssprop --dialog-bg - Panel background color\n * @cssprop --dialog-border-color - Panel border color\n * @cssprop --dialog-radius - Panel border radius\n * @cssprop --dialog-shadow - Panel drop shadow\n * @cssprop --dialog-padding - Padding for header, body, and footer sections\n * @cssprop --dialog-gap - Gap between footer action buttons\n * @cssprop --dialog-backdrop - Backdrop overlay color\n * @cssprop --dialog-max-width - Maximum panel width (overridden by size prop)\n *\n * @part dialog - Dialog root container.\n * @part overlay - Overlay backdrop element.\n * @part panel - Panel container.\n * @part header - Header container.\n * @part title - Title text element.\n * @part close - Close action control.\n * @part body - Body content container.\n * @part footer - Footer container.\n * @example\n * ```html\n * <ore-dialog label=\"Confirm action\" dismissible>\n *   <p>Are you sure you want to delete this item?</p>\n *   <div slot=\"footer\">\n *     <ore-button variant=\"ghost\" id=\"cancel\">Cancel</ore-button>\n *     <ore-button color=\"error\" id=\"confirm\">Delete</ore-button>\n *   </div>\n * </ore-dialog>\n *\n * <script type=\"module\">\n *   import '@vielzeug/refine/dialog';\n *   const dialog = document.querySelector('ore-dialog');\n *   document.querySelector('#open-btn').addEventListener('click', () => {\n *     dialog.setAttribute('open', '');\n *   });\n *   document.querySelector('#cancel').addEventListener('click', () => {\n *     dialog.removeAttribute('open');\n *   });\n * </script>\n * ```\n */\n\nexport const DIALOG_TAG = 'ore-dialog' as const;\ndefine<OreDialogProps>(DIALOG_TAG, {\n  props: {\n    backdrop: prop.string<DialogBackdrop>(),\n    dismissible: prop.bool(false),\n    elevation: prop.string<DialogElevation>(),\n    'initial-focus': prop.string(),\n    label: prop.string(),\n    open: prop.bool(false),\n    padding: prop.string<PaddingSize>(),\n    persistent: prop.bool(false),\n    'return-focus': prop.bool(true),\n    rounded: prop.string<RoundedSize | ''>(),\n    size: prop.oneOf(['sm', 'md', 'lg', 'xl', 'full'] as const, 'md'),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreDialogEvents>();\n    const slots = useSlots();\n\n    const dialogRef = ref<HTMLDialogElement>();\n    const hasHeader = () => slots.has('header').value || !!props.label.value || props.dismissible.value;\n    const hasFooter = () => slots.has('footer').value;\n\n    const { closeWithAnimation, overlay, requestClose, setupNativeListeners } = useDialogControl({\n      dialogRef,\n      getPanelEl: () => dialogRef.value?.querySelector<HTMLElement>('.panel'),\n      host: el,\n      initialFocus: props['initial-focus'],\n      isPersistent: () => Boolean(props.persistent.value),\n      onCleanup,\n      onEvent,\n      onNativeClose: (reason) => emit('close', { reason }),\n      onOpen: (reason) => emit('open', { reason }),\n      openProp: props.open,\n      performClose: () => {\n        closeWithAnimation();\n      },\n      returnFocus: props['return-focus'],\n    });\n\n    const handleDismiss = () => {\n      requestClose('trigger');\n    };\n\n    onMounted(() => {\n      const dialog = dialogRef.value;\n\n      if (!dialog) return;\n\n      setupNativeListeners();\n\n      return () => {\n        overlay.dispose();\n      };\n    });\n\n    return html`\n      <dialog ref=${dialogRef} class=\"dialog\" part=\"dialog\" aria-label=\"${props.label}\" aria-modal=\"true\">\n        <div class=\"overlay\" part=\"overlay\" aria-hidden=\"true\"></div>\n        <div class=\"panel\" part=\"panel\" :data-size=\"${props.size}\">\n          <div class=\"header\" part=\"header\" ?hidden=${() => !hasHeader()}>\n            <slot name=\"header\">\n              <span class=\"title\" part=\"title\">${props.label}</span>\n            </slot>\n            <button\n              class=\"close\"\n              part=\"close\"\n              type=\"button\"\n              aria-label=\"Close dialog\"\n              ?hidden=${() => !props.dismissible.value}\n              @click=${handleDismiss}>\n              <ore-icon name=\"x\" size=\"16\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n            </button>\n          </div>\n          <div class=\"body\" part=\"body\">\n            <slot></slot>\n          </div>\n          <div class=\"footer\" part=\"footer\" ?hidden=${() => !hasFooter()}>\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </dialog>\n    `;\n  },\n  styles: [roundedVariantMixin, coarsePointerMixin, componentStyles],\n});\n"],"mappings":";;;;;;AAqHA,IAAa,IAAa;AAC1B,EAAuB,GAAY;CACjC,OAAO;EACL,UAAU,EAAK,OAAuB;EACtC,aAAa,EAAK,KAAK,EAAK;EAC5B,WAAW,EAAK,OAAwB;EACxC,iBAAiB,EAAK,OAAO;EAC7B,OAAO,EAAK,OAAO;EACnB,MAAM,EAAK,KAAK,EAAK;EACrB,SAAS,EAAK,OAAoB;EAClC,YAAY,EAAK,KAAK,EAAK;EAC3B,gBAAgB,EAAK,KAAK,EAAI;EAC9B,SAAS,EAAK,OAAyB;EACvC,MAAM,EAAK,MAAM;GAAC;GAAM;GAAM;GAAM;GAAM;EAAM,GAAY,IAAI;CAClE;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAO,EAAyB,GAChC,IAAQ,EAAS,GAEjB,IAAY,EAAuB,GACnC,UAAkB,EAAM,IAAI,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC,EAAM,MAAM,SAAS,EAAM,YAAY,OACxF,UAAkB,EAAM,IAAI,QAAQ,CAAC,CAAC,OAEtC,EAAE,uBAAoB,YAAS,iBAAc,4BAAyB,EAAiB;GAC3F;GACA,kBAAkB,EAAU,OAAO,cAA2B,QAAQ;GACtE,MAAM;GACN,cAAc,EAAM;GACpB,oBAAoB,EAAQ,EAAM,WAAW;GAC7C;GACA;GACA,gBAAgB,MAAW,EAAK,SAAS,EAAE,UAAO,CAAC;GACnD,SAAS,MAAW,EAAK,QAAQ,EAAE,UAAO,CAAC;GAC3C,UAAU,EAAM;GAChB,oBAAoB;IAClB,EAAmB;GACrB;GACA,aAAa,EAAM;EACrB,CAAC;EAkBD,OAZA,QAAgB;GACC,MAAU,OAMzB,OAFA,EAAqB,SAER;IACX,EAAQ,QAAQ;GAClB;EACF,CAAC,GAEM,CAAI;oBACK,EAAU,4CAA4C,EAAM,MAAM;;sDAEhC,EAAM,KAAK;4DACL,CAAC,EAAU,EAAE;;iDAExB,EAAM,MAAM;;;;;;;8BAO/B,CAAC,EAAM,YAAY,MAAM;6BA7BvB;GAC1B,EAAa,SAAS;EACxB,EA4BiC;;;;;;;4DAOuB,CAAC,EAAU,EAAE;;;;;;CAMvE;CACA,QAAQ;EAAC;EAAqB;EAAoB;CAAe;AACnE,CAAC"}

package/dist/disclosure/accordion/{accordion.css?inline.cjs → accordion.css.cjs}

@@ -1,2 +1,2 @@
 var e=`@layer refine.base{:host{--_bg:var(--accordion-bg);--_border-color:var(--accordion-border-color);gap:var(--size-2);background:var(--_bg);flex-direction:column;width:100%;display:flex}::slotted(ore-accordion-item){width:100%}}@layer refine.variants{:host([variant=bordered]){gap:var(--size-2)}:host([variant=text]){gap:0}:host([variant=text]) ::slotted(ore-accordion-item:not(:last-child)){border-bottom:1px solid var(--accordion-divider-color,var(--color-contrast-200))}:host([variant=solid]),:host([variant=flat]),:host([variant=glass]),:host([variant=frost]){padding:var(--size-2);border-radius:var(--rounded-lg);gap:0}:host([variant=solid]){--_bg:var(--accordion-bg,var(--color-contrast-50));--_border-color:var(--accordion-border-color,var(--color-contrast-200));border:var(--border) solid var(--_border-color);box-shadow:var(--accordion-shadow,var(--shadow-xs))}:host([variant=flat]){--_bg:var(--accordion-bg,var(--color-contrast-100));--_border-color:var(--accordion-border-color,var(--color-contrast-200));border:var(--border) solid var(--_border-color);box-shadow:var(--accordion-shadow,var(--inset-shadow-xs))}:host([variant=glass]),:host([variant=frost]){box-shadow:var(--accordion-shadow,var(--shadow-md), var(--inset-shadow-xs));-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(180%) brightness(1.05);backdrop-filter:blur(var(--blur-lg)) saturate(180%) brightness(1.05)}:host([variant=glass]){--_bg:var(--accordion-bg,color-mix(in oklch, var(--color-secondary) 30%, var(--color-contrast) 10%))}:host([variant=frost]){--_bg:var(--accordion-bg,color-mix(in oklch, var(--color-canvas) 55%, transparent))}:host(:is([variant=glass],[variant=frost])) ::slotted(ore-accordion-item){border-radius:0}:host(:is([variant=glass],[variant=frost])) ::slotted(ore-accordion-item:first-child){border-radius:var(--rounded-lg) var(--rounded-lg) 0 0}:host(:is([variant=glass],[variant=frost])) ::slotted(ore-accordion-item:last-child){border-radius:0 0 var(--rounded-lg) var(--rounded-lg)}:host(:is([variant=glass],[variant=frost])) ::slotted(ore-accordion-item:only-child){border-radius:var(--rounded-lg)}}`;exports.default=e;
-//# sourceMappingURL=accordion.css?inline.cjs.map
+//# sourceMappingURL=accordion.css.cjs.map

package/dist/disclosure/accordion/accordion.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.css.cjs","names":[],"sources":["../../../src/disclosure/accordion/accordion.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--accordion-bg);\n    --_border-color: var(--accordion-border-color);\n\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    width: 100%;\n    background: var(--_bg);\n  }\n\n  ::slotted(ore-accordion-item) {\n    width: 100%;\n  }\n}\n\n@layer refine.variants {\n  /* ========================================\n       Visual Variants\n       ======================================== */\n\n  /* Bordered variant */\n  :host([variant='bordered']) {\n    gap: var(--size-2);\n  }\n\n  /* Text variant - borderless with dividers */\n  :host([variant='text']) {\n    gap: 0;\n  }\n\n  :host([variant='text']) ::slotted(ore-accordion-item:not(:last-child)) {\n    border-bottom: 1px solid var(--accordion-divider-color, var(--color-contrast-200));\n  }\n\n  /* Contained variants - grouped appearance */\n  :host([variant='solid']),\n  :host([variant='flat']),\n  :host([variant='glass']),\n  :host([variant='frost']) {\n    gap: 0;\n    padding: var(--size-2);\n    border-radius: var(--rounded-lg);\n  }\n\n  /* Solid variant (default) */\n  :host([variant='solid']) {\n    --_bg: var(--accordion-bg, var(--color-contrast-50));\n    --_border-color: var(--accordion-border-color, var(--color-contrast-200));\n\n    border: var(--border) solid var(--_border-color);\n    box-shadow: var(--accordion-shadow, var(--shadow-xs));\n  }\n\n  /* Flat variant */\n  :host([variant='flat']) {\n    --_bg: var(--accordion-bg, var(--color-contrast-100));\n    --_border-color: var(--accordion-border-color, var(--color-contrast-200));\n\n    border: var(--border) solid var(--_border-color);\n    box-shadow: var(--accordion-shadow, var(--inset-shadow-xs));\n  }\n\n  /* Glass & Frost - Shared styles */\n  :host([variant='glass']),\n  :host([variant='frost']) {\n    box-shadow: var(--accordion-shadow, var(--shadow-md), var(--inset-shadow-xs));\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%) brightness(1.05);\n  }\n\n  /* Glass variant - translucent with blur */\n  :host([variant='glass']) {\n    --_bg: var(--accordion-bg, color-mix(in oklch, var(--color-secondary) 30%, var(--color-contrast) 10%));\n  }\n\n  /* Frost variant - canvas-based transparency */\n  :host([variant='frost']) {\n    --_bg: var(--accordion-bg, color-mix(in oklch, var(--color-canvas) 55%, transparent));\n  }\n\n  /* Nested item border radius for glass and frost variants */\n  :host(:is([variant='glass'], [variant='frost'])) ::slotted(ore-accordion-item) {\n    border-radius: 0;\n  }\n\n  :host(:is([variant='glass'], [variant='frost'])) ::slotted(ore-accordion-item:first-child) {\n    border-radius: var(--rounded-lg) var(--rounded-lg) 0 0;\n  }\n\n  :host(:is([variant='glass'], [variant='frost'])) ::slotted(ore-accordion-item:last-child) {\n    border-radius: 0 0 var(--rounded-lg) var(--rounded-lg);\n  }\n\n  :host(:is([variant='glass'], [variant='frost'])) ::slotted(ore-accordion-item:only-child) {\n    border-radius: var(--rounded-lg);\n  }\n}\n"],"mappings":""}

package/dist/disclosure/accordion/{accordion.css?inline.js → accordion.css.js}

@@ -3,4 +3,4 @@ var e = "@layer refine.base{:host{--_bg:var(--accordion-bg);--_border-color:var(
 //#endregion
 export { e as default };
 
-//# sourceMappingURL=accordion.css?inline.js.map
+//# sourceMappingURL=accordion.css.js.map

package/dist/disclosure/accordion/accordion.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.css.js","names":[],"sources":["../../../src/disclosure/accordion/accordion.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--accordion-bg);\n    --_border-color: var(--accordion-border-color);\n\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    width: 100%;\n    background: var(--_bg);\n  }\n\n  ::slotted(ore-accordion-item) {\n    width: 100%;\n  }\n}\n\n@layer refine.variants {\n  /* ========================================\n       Visual Variants\n       ======================================== */\n\n  /* Bordered variant */\n  :host([variant='bordered']) {\n    gap: var(--size-2);\n  }\n\n  /* Text variant - borderless with dividers */\n  :host([variant='text']) {\n    gap: 0;\n  }\n\n  :host([variant='text']) ::slotted(ore-accordion-item:not(:last-child)) {\n    border-bottom: 1px solid var(--accordion-divider-color, var(--color-contrast-200));\n  }\n\n  /* Contained variants - grouped appearance */\n  :host([variant='solid']),\n  :host([variant='flat']),\n  :host([variant='glass']),\n  :host([variant='frost']) {\n    gap: 0;\n    padding: var(--size-2);\n    border-radius: var(--rounded-lg);\n  }\n\n  /* Solid variant (default) */\n  :host([variant='solid']) {\n    --_bg: var(--accordion-bg, var(--color-contrast-50));\n    --_border-color: var(--accordion-border-color, var(--color-contrast-200));\n\n    border: var(--border) solid var(--_border-color);\n    box-shadow: var(--accordion-shadow, var(--shadow-xs));\n  }\n\n  /* Flat variant */\n  :host([variant='flat']) {\n    --_bg: var(--accordion-bg, var(--color-contrast-100));\n    --_border-color: var(--accordion-border-color, var(--color-contrast-200));\n\n    border: var(--border) solid var(--_border-color);\n    box-shadow: var(--accordion-shadow, var(--inset-shadow-xs));\n  }\n\n  /* Glass & Frost - Shared styles */\n  :host([variant='glass']),\n  :host([variant='frost']) {\n    box-shadow: var(--accordion-shadow, var(--shadow-md), var(--inset-shadow-xs));\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%) brightness(1.05);\n  }\n\n  /* Glass variant - translucent with blur */\n  :host([variant='glass']) {\n    --_bg: var(--accordion-bg, color-mix(in oklch, var(--color-secondary) 30%, var(--color-contrast) 10%));\n  }\n\n  /* Frost variant - canvas-based transparency */\n  :host([variant='frost']) {\n    --_bg: var(--accordion-bg, color-mix(in oklch, var(--color-canvas) 55%, transparent));\n  }\n\n  /* Nested item border radius for glass and frost variants */\n  :host(:is([variant='glass'], [variant='frost'])) ::slotted(ore-accordion-item) {\n    border-radius: 0;\n  }\n\n  :host(:is([variant='glass'], [variant='frost'])) ::slotted(ore-accordion-item:first-child) {\n    border-radius: var(--rounded-lg) var(--rounded-lg) 0 0;\n  }\n\n  :host(:is([variant='glass'], [variant='frost'])) ::slotted(ore-accordion-item:last-child) {\n    border-radius: 0 0 var(--rounded-lg) var(--rounded-lg);\n  }\n\n  :host(:is([variant='glass'], [variant='frost'])) ::slotted(ore-accordion-item:only-child) {\n    border-radius: var(--rounded-lg);\n  }\n}\n"],"mappings":""}

package/dist/disclosure/accordion-item/{accordion-item.css?inline.cjs → accordion-item.css.cjs}

@@ -1,2 +1,2 @@
 var e=`@layer refine.base{:host{color:var(--accordion-item-body-color,var(--text-color-body));--accordion-details-radius:var(--rounded-lg);--accordion-item-transition:var(--transition-normal);--accordion-item-expand-easing:var(--ease-spring);display:block}details{border-radius:var(--accordion-item-radius);width:100%;overflow:hidden}summary{gap:var(--size-4);min-height:var(--_touch-target);padding:var(--accordion-item-details-padding,var(--size-3) var(--size-4));font-size:var(--accordion-item-title);cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--accordion-item-bg);border:var(--border) solid var(--accordion-item-border-color);border-radius:var(--accordion-details-radius);transition:background var(--accordion-item-transition), border-color var(--accordion-item-transition), color var(--accordion-item-transition);outline:none;align-items:center;list-style:none;display:flex;position:relative}summary::-webkit-details-marker{display:none}summary:focus{outline:none}summary:focus-visible{outline:var(--border-2) solid currentcolor;outline-offset:var(--border-2);box-shadow:0 0 0 3px color-mix(in oklch, currentcolor 20%, transparent)}.header-content{flex-direction:column;flex:1;min-width:0;display:flex}.subtitle{font-size:var(--accordion-item-subtitle-size);line-height:var(--leading-normal);color:var(--accordion-item-subtitle-color,var(--text-color-secondary))}.title{text-overflow:ellipsis;font-weight:var(--font-medium);color:var(--accordion-item-title-color,var(--text-color-heading));white-space:nowrap;overflow:hidden}.content-wrapper{font-size:var(--accordion-item-body);background:var(--accordion-item-bg);border-inline:1px solid var(--accordion-item-border-color);border-bottom:1px solid var(--accordion-item-border-color);border-radius:var(--accordion-summary-radius);transition:grid-template-rows .2s var(--accordion-item-expand-easing,var(--ease-spring));grid-template-rows:0fr;display:grid}details[open] .content-wrapper{grid-template-rows:1fr}.content-inner{padding:var(--accordion-item-summary-padding,var(--size-2) var(--size-4));opacity:1;transition:opacity .2s 60ms var(--ease-spring), transform .2s 60ms var(--ease-spring);overflow:hidden;transform:translateY(0)}details.opening .content-inner{opacity:0;transition:none;transform:translateY(-6px)}details.closing .content-inner{opacity:0;transition:opacity .15s var(--ease-spring), transform .15s var(--ease-spring);transform:translateY(-4px)}details.closing .content-wrapper{transition:grid-template-rows .2s .12s var(--accordion-item-expand-easing,var(--ease-spring));grid-template-rows:1fr}}@layer refine.variants{:host,:host([variant=solid]){--accordion-item-bg:var(--color-contrast-50);--accordion-item-border-color:transparent;--accordion-item-hover-bg:var(--color-contrast-200)}:host([variant=flat]){--accordion-item-bg:var(--color-contrast-100);--accordion-item-hover-bg:var(--color-contrast-200)}:host([variant=bordered]){--accordion-item-bg:var(--color-contrast-100);--accordion-item-border-color:var(--color-divider);--accordion-item-hover-bg:var(--color-contrast-200);box-shadow:var(--inset-shadow-xs), var(--shadow-2xs)}:host([variant=outline]){--accordion-item-bg:transparent;--accordion-item-border-color:var(--color-divider);--accordion-item-hover-bg:var(--color-contrast-300)}:host([variant=ghost]){--accordion-item-bg:transparent;--accordion-item-border-color:transparent;--accordion-item-hover-bg:var(--color-contrast-200)}:host([variant=text]){--accordion-item-bg:transparent;--accordion-item-border-color:transparent;--accordion-item-hover-bg:transparent}:host summary:hover{background:var(--accordion-item-hover-bg)}:host([variant=glass]) details,:host([variant=frost]) details{border-radius:inherit}:host([variant=glass]) summary,:host([variant=frost]) summary{border-radius:inherit;-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(180%);backdrop-filter:blur(var(--blur-lg)) saturate(180%)}:host([variant=glass]) .content-wrapper,:host([variant=frost]) .content-wrapper{-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(180%);backdrop-filter:blur(var(--blur-lg)) saturate(180%);border-radius:0}:host([variant=glass]){--accordion-item-bg:color-mix(in oklch, var(--color-secondary) 30%, var(--color-contrast) 10%);--accordion-item-border-color:transparent;--accordion-item-hover-bg:color-mix(in oklch, var(--color-secondary) 20%, transparent);--accordion-item-title-color:color-mix(in oklch, var(--color-secondary-contrast) 100%, transparent);--accordion-item-subtitle-color:color-mix(in oklch, var(--color-secondary-contrast) 60%, transparent);--accordion-item-body-color:color-mix(in oklch, var(--color-secondary-contrast) 80%, transparent)}:host([variant=glass]) summary{text-shadow:var(--text-shadow-xs)}:host([variant=glass]) .content-wrapper{filter:brightness(1.05)}:host([variant=frost]){--accordion-item-bg:color-mix(in oklch, var(--color-canvas) 55%, transparent);--accordion-item-border-color:transparent;--accordion-item-hover-bg:color-mix(in oklch, var(--color-canvas) 20%, transparent)}:host([variant=frost]) summary{text-shadow:var(--text-shadow-2xs)}:host([size=sm]){--accordion-item-details-padding:var(--size-2) var(--size-4);--accordion-item-summary-padding:var(--size-1) var(--size-5);--accordion-item-title:var(--text-sm);--accordion-item-subtitle-size:var(--text-xs);--accordion-item-body:var(--text-xs)}:host(:not([size])),:host([size=md]){--accordion-item-details-padding:var(--size-3) var(--size-4);--accordion-item-summary-padding:var(--size-1) var(--size-5);--accordion-item-title:var(--text-base);--accordion-item-subtitle-size:var(--text-sm);--accordion-item-body:var(--text-sm)}:host([size=lg]){--accordion-item-details-padding:var(--size-4) var(--size-4);--accordion-item-summary-padding:var(--size-1) var(--size-5);--accordion-item-title:var(--text-lg);--accordion-item-subtitle-size:var(--text-base);--accordion-item-body:var(--text-base)}@media (pointer:coarse){:host,:host([size=md]){--accordion-item-details-padding:var(--size-4) var(--size-5);--accordion-item-title:var(--text-lg);--accordion-item-subtitle-size:var(--text-base);--accordion-item-body:var(--text-base)}:host([size=sm]){--accordion-item-details-padding:var(--size-3) var(--size-4);--accordion-item-title:var(--text-base);--accordion-item-subtitle-size:var(--text-sm);--accordion-item-body:var(--text-sm)}}:host([disabled]){pointer-events:none;opacity:.6}.chevron{width:var(--_size,var(--size-5));height:var(--_size,var(--size-5));--ore-icon-size:var(--_size,var(--size-5));transition:transform .2s var(--ease-spring);transform:rotate(-90deg)}.chevron: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)){margin-left:auto}.chevron: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)){margin-right:auto}details[open] .chevron{transform:rotate(0)}details.rtl .chevron{transform:rotate(90deg)}details.rtl[open] .chevron{transform:rotate(0)}: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)) .chevron{transform:rotate(90deg)}: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)) details[open] .chevron{transform:rotate(0)}:host([expanded]){--accordion-details-radius:var(--rounded-lg) var(--rounded-lg) 0 0;--accordion-summary-radius:0 0 var(--rounded-lg) var(--rounded-lg)}@media (forced-colors:active){summary{border-color:buttontext}}}`;exports.default=e;
-//# sourceMappingURL=accordion-item.css?inline.cjs.map
+//# sourceMappingURL=accordion-item.css.cjs.map

package/dist/disclosure/accordion-item/accordion-item.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-item.css.cjs","names":[],"sources":["../../../src/disclosure/accordion-item/accordion-item.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    display: block;\n    color: var(--accordion-item-body-color, var(--text-color-body));\n\n    --accordion-details-radius: var(--rounded-lg);\n    --accordion-item-transition: var(--transition-normal);\n    --accordion-item-expand-easing: var(--ease-spring);\n  }\n\n  details {\n    width: 100%;\n    overflow: hidden;\n    border-radius: var(--accordion-item-radius);\n  }\n\n  summary {\n    position: relative;\n    display: flex;\n    gap: var(--size-4);\n    align-items: center;\n    min-height: var(--_touch-target);\n    padding: var(--accordion-item-details-padding, var(--size-3) var(--size-4));\n    font-size: var(--accordion-item-title);\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    list-style: none;\n    background: var(--accordion-item-bg);\n    border: var(--border) solid var(--accordion-item-border-color);\n    border-radius: var(--accordion-details-radius);\n    transition:\n      background var(--accordion-item-transition),\n      border-color var(--accordion-item-transition),\n      color var(--accordion-item-transition);\n  }\n\n  summary::-webkit-details-marker {\n    display: none;\n  }\n\n  summary:focus {\n    outline: none;\n  }\n\n  summary:focus-visible {\n    outline: var(--border-2) solid currentcolor;\n    outline-offset: var(--border-2);\n    box-shadow: 0 0 0 3px color-mix(in oklch, currentcolor 20%, transparent);\n  }\n\n  .header-content {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-width: 0;\n  }\n\n  .subtitle {\n    font-size: var(--accordion-item-subtitle-size);\n    line-height: var(--leading-normal);\n    color: var(--accordion-item-subtitle-color, var(--text-color-secondary));\n  }\n\n  .title {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-weight: var(--font-medium);\n    color: var(--accordion-item-title-color, var(--text-color-heading));\n    white-space: nowrap;\n  }\n\n  .content-wrapper {\n    display: grid;\n    grid-template-rows: 0fr;\n    font-size: var(--accordion-item-body);\n    background: var(--accordion-item-bg);\n    border-inline: 1px solid var(--accordion-item-border-color);\n    border-bottom: 1px solid var(--accordion-item-border-color);\n    border-radius: var(--accordion-summary-radius);\n    transition: grid-template-rows 200ms var(--accordion-item-expand-easing, var(--ease-spring));\n  }\n\n  details[open] .content-wrapper {\n    grid-template-rows: 1fr;\n  }\n\n  .content-inner {\n    padding: var(--accordion-item-summary-padding, var(--size-2) var(--size-4));\n    overflow: hidden;\n    opacity: 1;\n    transform: translateY(0);\n    transition:\n      opacity 200ms 60ms var(--ease-spring),\n      transform 200ms 60ms var(--ease-spring);\n  }\n\n  /* Opening: set from-state with no transition — transition fires on base rule when class is removed */\n  details.opening .content-inner {\n    opacity: 0;\n    transform: translateY(-6px);\n    transition: none;\n  }\n\n  /* Closing: content fades out immediately, row collapses after */\n  details.closing .content-inner {\n    opacity: 0;\n    transform: translateY(-4px);\n    transition:\n      opacity 150ms var(--ease-spring),\n      transform 150ms var(--ease-spring);\n  }\n\n  /* Keep row expanded while closing animation plays */\n  details.closing .content-wrapper {\n    grid-template-rows: 1fr;\n    transition: grid-template-rows 200ms 120ms var(--accordion-item-expand-easing, var(--ease-spring));\n  }\n}\n\n@layer refine.variants {\n  /* ========================================\n       Visual Variants\n       ======================================== */\n\n  :host,\n  :host([variant='solid']) {\n    --accordion-item-bg: var(--color-contrast-50);\n    --accordion-item-border-color: transparent;\n    --accordion-item-hover-bg: var(--color-contrast-200);\n  }\n\n  :host([variant='flat']) {\n    --accordion-item-bg: var(--color-contrast-100);\n    --accordion-item-hover-bg: var(--color-contrast-200);\n  }\n\n  :host([variant='bordered']) {\n    --accordion-item-bg: var(--color-contrast-100);\n    --accordion-item-border-color: var(--color-divider);\n    --accordion-item-hover-bg: var(--color-contrast-200);\n\n    box-shadow: var(--inset-shadow-xs), var(--shadow-2xs);\n  }\n\n  :host([variant='outline']) {\n    --accordion-item-bg: transparent;\n    --accordion-item-border-color: var(--color-divider);\n    --accordion-item-hover-bg: var(--color-contrast-300);\n  }\n\n  :host([variant='ghost']) {\n    --accordion-item-bg: transparent;\n    --accordion-item-border-color: transparent;\n    --accordion-item-hover-bg: var(--color-contrast-200);\n  }\n\n  :host([variant='text']) {\n    --accordion-item-bg: transparent;\n    --accordion-item-border-color: transparent;\n    --accordion-item-hover-bg: transparent;\n  }\n\n  /* ── Shared hover state reads per-variant --accordion-item-hover-bg ── */\n  :host summary:hover {\n    background: var(--accordion-item-hover-bg);\n  }\n\n  /* Glass & Frost - Shared Styles */\n  :host([variant='glass']) details,\n  :host([variant='frost']) details {\n    border-radius: inherit;\n  }\n\n  :host([variant='glass']) summary,\n  :host([variant='frost']) summary {\n    border-radius: inherit;\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%);\n  }\n\n  :host([variant='glass']) .content-wrapper,\n  :host([variant='frost']) .content-wrapper {\n    border-radius: 0;\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%);\n  }\n\n  /* Glass */\n  :host([variant='glass']) {\n    --accordion-item-bg: color-mix(in oklch, var(--color-secondary) 30%, var(--color-contrast) 10%);\n    --accordion-item-border-color: transparent;\n    --accordion-item-hover-bg: color-mix(in oklch, var(--color-secondary) 20%, transparent);\n    --accordion-item-title-color: color-mix(in oklch, var(--color-secondary-contrast) 100%, transparent);\n    --accordion-item-subtitle-color: color-mix(in oklch, var(--color-secondary-contrast) 60%, transparent);\n    --accordion-item-body-color: color-mix(in oklch, var(--color-secondary-contrast) 80%, transparent);\n  }\n\n  :host([variant='glass']) summary {\n    text-shadow: var(--text-shadow-xs);\n  }\n\n  :host([variant='glass']) .content-wrapper {\n    filter: brightness(1.05);\n  }\n\n  /* Frost */\n  :host([variant='frost']) {\n    --accordion-item-bg: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n    --accordion-item-border-color: transparent;\n    --accordion-item-hover-bg: color-mix(in oklch, var(--color-canvas) 20%, transparent);\n  }\n\n  :host([variant='frost']) summary {\n    text-shadow: var(--text-shadow-2xs);\n  }\n\n  /* ========================================\n     Size Variants\n     ======================================== */\n\n  :host([size='sm']) {\n    --accordion-item-details-padding: var(--size-2) var(--size-4);\n    --accordion-item-summary-padding: var(--size-1) var(--size-5);\n    --accordion-item-title: var(--text-sm);\n    --accordion-item-subtitle-size: var(--text-xs);\n    --accordion-item-body: var(--text-xs);\n  }\n\n  :host(:not([size])),\n  :host([size='md']) {\n    --accordion-item-details-padding: var(--size-3) var(--size-4);\n    --accordion-item-summary-padding: var(--size-1) var(--size-5);\n    --accordion-item-title: var(--text-base);\n    --accordion-item-subtitle-size: var(--text-sm);\n    --accordion-item-body: var(--text-sm);\n  }\n\n  :host([size='lg']) {\n    --accordion-item-details-padding: var(--size-4) var(--size-4);\n    --accordion-item-summary-padding: var(--size-1) var(--size-5);\n    --accordion-item-title: var(--text-lg);\n    --accordion-item-subtitle-size: var(--text-base);\n    --accordion-item-body: var(--text-base);\n  }\n\n  /* ─── coarse pointer: promote one size tier for proportional scaling ─── */\n  @media (pointer: coarse) {\n    :host,\n    :host([size='md']) {\n      --accordion-item-details-padding: var(--size-4) var(--size-5);\n      --accordion-item-title: var(--text-lg);\n      --accordion-item-subtitle-size: var(--text-base);\n      --accordion-item-body: var(--text-base);\n    }\n\n    :host([size='sm']) {\n      --accordion-item-details-padding: var(--size-3) var(--size-4);\n      --accordion-item-title: var(--text-base);\n      --accordion-item-subtitle-size: var(--text-sm);\n      --accordion-item-body: var(--text-sm);\n    }\n  }\n\n  /* ========================================\n     States\n     ======================================== */\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.6;\n  }\n\n  /* ========================================\n     Chevron Animation\n     ======================================== */\n\n  .chevron {\n    width: var(--_size, var(--size-5));\n    height: var(--_size, var(--size-5));\n\n    --ore-icon-size: var(--_size, var(--size-5));\n\n    margin-inline-start: auto;\n    transform: rotate(-90deg);\n    transition: transform 200ms var(--ease-spring);\n  }\n\n  details[open] .chevron {\n    transform: rotate(0deg);\n  }\n\n  /* RTL Support - use .rtl class added by JavaScript */\n  details.rtl .chevron {\n    transform: rotate(90deg);\n  }\n\n  details.rtl[open] .chevron {\n    transform: rotate(0deg);\n  }\n\n  /* :dir(rtl) is inheritance-driven and crosses the shadow boundary; the ancestor-attribute\n     selectors (html[dir='rtl']/[dir='rtl']) cannot match anything inside this shadow root and\n     were removed. */\n  :dir(rtl) .chevron {\n    transform: rotate(90deg);\n  }\n\n  :dir(rtl) details[open] .chevron {\n    transform: rotate(0deg);\n  }\n\n  /* Expanded state - adjust border radius */\n  :host([expanded]) {\n    --accordion-details-radius: var(--rounded-lg) var(--rounded-lg) 0 0;\n    --accordion-summary-radius: 0 0 var(--rounded-lg) var(--rounded-lg);\n  }\n\n  @media (forced-colors: active) {\n    /* Default variant uses a transparent border — ensure a visible border\n         renders in HCM so the summary is distinguishable from the body */\n    summary {\n      border-color: ButtonText;\n    }\n  }\n}\n"],"mappings":""}

package/dist/disclosure/accordion-item/{accordion-item.css?inline.js → accordion-item.css.js}

@@ -3,4 +3,4 @@ var e = "@layer refine.base{:host{color:var(--accordion-item-body-color,var(--te
 //#endregion
 export { e as default };
 
-//# sourceMappingURL=accordion-item.css?inline.js.map
+//# sourceMappingURL=accordion-item.css.js.map

package/dist/disclosure/accordion-item/accordion-item.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-item.css.js","names":[],"sources":["../../../src/disclosure/accordion-item/accordion-item.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    display: block;\n    color: var(--accordion-item-body-color, var(--text-color-body));\n\n    --accordion-details-radius: var(--rounded-lg);\n    --accordion-item-transition: var(--transition-normal);\n    --accordion-item-expand-easing: var(--ease-spring);\n  }\n\n  details {\n    width: 100%;\n    overflow: hidden;\n    border-radius: var(--accordion-item-radius);\n  }\n\n  summary {\n    position: relative;\n    display: flex;\n    gap: var(--size-4);\n    align-items: center;\n    min-height: var(--_touch-target);\n    padding: var(--accordion-item-details-padding, var(--size-3) var(--size-4));\n    font-size: var(--accordion-item-title);\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    list-style: none;\n    background: var(--accordion-item-bg);\n    border: var(--border) solid var(--accordion-item-border-color);\n    border-radius: var(--accordion-details-radius);\n    transition:\n      background var(--accordion-item-transition),\n      border-color var(--accordion-item-transition),\n      color var(--accordion-item-transition);\n  }\n\n  summary::-webkit-details-marker {\n    display: none;\n  }\n\n  summary:focus {\n    outline: none;\n  }\n\n  summary:focus-visible {\n    outline: var(--border-2) solid currentcolor;\n    outline-offset: var(--border-2);\n    box-shadow: 0 0 0 3px color-mix(in oklch, currentcolor 20%, transparent);\n  }\n\n  .header-content {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-width: 0;\n  }\n\n  .subtitle {\n    font-size: var(--accordion-item-subtitle-size);\n    line-height: var(--leading-normal);\n    color: var(--accordion-item-subtitle-color, var(--text-color-secondary));\n  }\n\n  .title {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-weight: var(--font-medium);\n    color: var(--accordion-item-title-color, var(--text-color-heading));\n    white-space: nowrap;\n  }\n\n  .content-wrapper {\n    display: grid;\n    grid-template-rows: 0fr;\n    font-size: var(--accordion-item-body);\n    background: var(--accordion-item-bg);\n    border-inline: 1px solid var(--accordion-item-border-color);\n    border-bottom: 1px solid var(--accordion-item-border-color);\n    border-radius: var(--accordion-summary-radius);\n    transition: grid-template-rows 200ms var(--accordion-item-expand-easing, var(--ease-spring));\n  }\n\n  details[open] .content-wrapper {\n    grid-template-rows: 1fr;\n  }\n\n  .content-inner {\n    padding: var(--accordion-item-summary-padding, var(--size-2) var(--size-4));\n    overflow: hidden;\n    opacity: 1;\n    transform: translateY(0);\n    transition:\n      opacity 200ms 60ms var(--ease-spring),\n      transform 200ms 60ms var(--ease-spring);\n  }\n\n  /* Opening: set from-state with no transition — transition fires on base rule when class is removed */\n  details.opening .content-inner {\n    opacity: 0;\n    transform: translateY(-6px);\n    transition: none;\n  }\n\n  /* Closing: content fades out immediately, row collapses after */\n  details.closing .content-inner {\n    opacity: 0;\n    transform: translateY(-4px);\n    transition:\n      opacity 150ms var(--ease-spring),\n      transform 150ms var(--ease-spring);\n  }\n\n  /* Keep row expanded while closing animation plays */\n  details.closing .content-wrapper {\n    grid-template-rows: 1fr;\n    transition: grid-template-rows 200ms 120ms var(--accordion-item-expand-easing, var(--ease-spring));\n  }\n}\n\n@layer refine.variants {\n  /* ========================================\n       Visual Variants\n       ======================================== */\n\n  :host,\n  :host([variant='solid']) {\n    --accordion-item-bg: var(--color-contrast-50);\n    --accordion-item-border-color: transparent;\n    --accordion-item-hover-bg: var(--color-contrast-200);\n  }\n\n  :host([variant='flat']) {\n    --accordion-item-bg: var(--color-contrast-100);\n    --accordion-item-hover-bg: var(--color-contrast-200);\n  }\n\n  :host([variant='bordered']) {\n    --accordion-item-bg: var(--color-contrast-100);\n    --accordion-item-border-color: var(--color-divider);\n    --accordion-item-hover-bg: var(--color-contrast-200);\n\n    box-shadow: var(--inset-shadow-xs), var(--shadow-2xs);\n  }\n\n  :host([variant='outline']) {\n    --accordion-item-bg: transparent;\n    --accordion-item-border-color: var(--color-divider);\n    --accordion-item-hover-bg: var(--color-contrast-300);\n  }\n\n  :host([variant='ghost']) {\n    --accordion-item-bg: transparent;\n    --accordion-item-border-color: transparent;\n    --accordion-item-hover-bg: var(--color-contrast-200);\n  }\n\n  :host([variant='text']) {\n    --accordion-item-bg: transparent;\n    --accordion-item-border-color: transparent;\n    --accordion-item-hover-bg: transparent;\n  }\n\n  /* ── Shared hover state reads per-variant --accordion-item-hover-bg ── */\n  :host summary:hover {\n    background: var(--accordion-item-hover-bg);\n  }\n\n  /* Glass & Frost - Shared Styles */\n  :host([variant='glass']) details,\n  :host([variant='frost']) details {\n    border-radius: inherit;\n  }\n\n  :host([variant='glass']) summary,\n  :host([variant='frost']) summary {\n    border-radius: inherit;\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%);\n  }\n\n  :host([variant='glass']) .content-wrapper,\n  :host([variant='frost']) .content-wrapper {\n    border-radius: 0;\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%);\n  }\n\n  /* Glass */\n  :host([variant='glass']) {\n    --accordion-item-bg: color-mix(in oklch, var(--color-secondary) 30%, var(--color-contrast) 10%);\n    --accordion-item-border-color: transparent;\n    --accordion-item-hover-bg: color-mix(in oklch, var(--color-secondary) 20%, transparent);\n    --accordion-item-title-color: color-mix(in oklch, var(--color-secondary-contrast) 100%, transparent);\n    --accordion-item-subtitle-color: color-mix(in oklch, var(--color-secondary-contrast) 60%, transparent);\n    --accordion-item-body-color: color-mix(in oklch, var(--color-secondary-contrast) 80%, transparent);\n  }\n\n  :host([variant='glass']) summary {\n    text-shadow: var(--text-shadow-xs);\n  }\n\n  :host([variant='glass']) .content-wrapper {\n    filter: brightness(1.05);\n  }\n\n  /* Frost */\n  :host([variant='frost']) {\n    --accordion-item-bg: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n    --accordion-item-border-color: transparent;\n    --accordion-item-hover-bg: color-mix(in oklch, var(--color-canvas) 20%, transparent);\n  }\n\n  :host([variant='frost']) summary {\n    text-shadow: var(--text-shadow-2xs);\n  }\n\n  /* ========================================\n     Size Variants\n     ======================================== */\n\n  :host([size='sm']) {\n    --accordion-item-details-padding: var(--size-2) var(--size-4);\n    --accordion-item-summary-padding: var(--size-1) var(--size-5);\n    --accordion-item-title: var(--text-sm);\n    --accordion-item-subtitle-size: var(--text-xs);\n    --accordion-item-body: var(--text-xs);\n  }\n\n  :host(:not([size])),\n  :host([size='md']) {\n    --accordion-item-details-padding: var(--size-3) var(--size-4);\n    --accordion-item-summary-padding: var(--size-1) var(--size-5);\n    --accordion-item-title: var(--text-base);\n    --accordion-item-subtitle-size: var(--text-sm);\n    --accordion-item-body: var(--text-sm);\n  }\n\n  :host([size='lg']) {\n    --accordion-item-details-padding: var(--size-4) var(--size-4);\n    --accordion-item-summary-padding: var(--size-1) var(--size-5);\n    --accordion-item-title: var(--text-lg);\n    --accordion-item-subtitle-size: var(--text-base);\n    --accordion-item-body: var(--text-base);\n  }\n\n  /* ─── coarse pointer: promote one size tier for proportional scaling ─── */\n  @media (pointer: coarse) {\n    :host,\n    :host([size='md']) {\n      --accordion-item-details-padding: var(--size-4) var(--size-5);\n      --accordion-item-title: var(--text-lg);\n      --accordion-item-subtitle-size: var(--text-base);\n      --accordion-item-body: var(--text-base);\n    }\n\n    :host([size='sm']) {\n      --accordion-item-details-padding: var(--size-3) var(--size-4);\n      --accordion-item-title: var(--text-base);\n      --accordion-item-subtitle-size: var(--text-sm);\n      --accordion-item-body: var(--text-sm);\n    }\n  }\n\n  /* ========================================\n     States\n     ======================================== */\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.6;\n  }\n\n  /* ========================================\n     Chevron Animation\n     ======================================== */\n\n  .chevron {\n    width: var(--_size, var(--size-5));\n    height: var(--_size, var(--size-5));\n\n    --ore-icon-size: var(--_size, var(--size-5));\n\n    margin-inline-start: auto;\n    transform: rotate(-90deg);\n    transition: transform 200ms var(--ease-spring);\n  }\n\n  details[open] .chevron {\n    transform: rotate(0deg);\n  }\n\n  /* RTL Support - use .rtl class added by JavaScript */\n  details.rtl .chevron {\n    transform: rotate(90deg);\n  }\n\n  details.rtl[open] .chevron {\n    transform: rotate(0deg);\n  }\n\n  /* :dir(rtl) is inheritance-driven and crosses the shadow boundary; the ancestor-attribute\n     selectors (html[dir='rtl']/[dir='rtl']) cannot match anything inside this shadow root and\n     were removed. */\n  :dir(rtl) .chevron {\n    transform: rotate(90deg);\n  }\n\n  :dir(rtl) details[open] .chevron {\n    transform: rotate(0deg);\n  }\n\n  /* Expanded state - adjust border radius */\n  :host([expanded]) {\n    --accordion-details-radius: var(--rounded-lg) var(--rounded-lg) 0 0;\n    --accordion-summary-radius: 0 0 var(--rounded-lg) var(--rounded-lg);\n  }\n\n  @media (forced-colors: active) {\n    /* Default variant uses a transparent border — ensure a visible border\n         renders in HCM so the summary is distinguishable from the body */\n    summary {\n      border-color: ButtonText;\n    }\n  }\n}\n"],"mappings":""}

package/dist/disclosure/tab-item/{tab-item.css?inline.cjs → tab-item.css.cjs}

@@ -1,2 +1,2 @@
 var e=`@layer refine.base{:host{--tab-item-transition:var(--transition-normal);--tab-item-radius:var(--rounded-lg);outline:none;display:inline-flex}button{gap:var(--size-2);width:100%;min-height:var(--_touch-target);padding:var(--tab-item-padding,var(--size-1-5) var(--size-4));font-family:inherit;font-size:var(--tab-item-font-size,var(--text-sm));font-weight:var(--font-medium);color:var(--tab-item-color,var(--text-color-secondary));white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:var(--tab-item-radius);transition:background var(--tab-item-transition), color var(--tab-item-transition), box-shadow var(--tab-item-transition);background:0 0;border:none;justify-content:center;align-items:center;display:inline-flex;position:relative}button:focus{outline:none}:host(:focus-visible) button,button:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:2px;box-shadow:0 0 0 3px var(--_theme-shadow)}}@layer refine.variants{:host,:host([variant=solid]),:host([variant=flat]){--_hover-bg:var(--tab-item-hover-bg,var(--color-contrast-200));--_active-bg:var(--tab-item-active-bg,var(--color-contrast-0,var(--color-canvas)));--_active-color:var(--tab-item-active-color,var(--text-color-heading));--_active-shadow:var(--tab-item-active-shadow,var(--shadow-xs), var(--inset-shadow-xs))}:host([variant=bordered]){--_hover-bg:var(--tab-item-hover-bg,var(--color-contrast-200));--_active-bg:var(--tab-item-active-bg,var(--color-contrast-0,var(--color-canvas)));--_active-color:var(--tab-item-active-color,var(--text-color-heading));--_active-shadow:var(--tab-item-active-shadow,var(--shadow-xs))}:host([variant=ghost]){--_hover-bg:var(--tab-item-hover-bg,var(--color-contrast-100));--_active-bg:var(--tab-item-active-bg,var(--_theme-base));--_active-color:var(--tab-item-active-color,var(--_theme-contrast))}:host([variant=glass]){--_color:var(--tab-item-color,color-mix(in oklch, var(--color-secondary-contrast) 70%, transparent));--_hover-bg:var(--tab-item-hover-bg,color-mix(in oklch, var(--color-secondary-contrast) 10%, transparent));--_active-bg:var(--tab-item-active-bg,color-mix(in oklch, var(--color-secondary-contrast) 15%, transparent));--_active-color:var(--tab-item-active-color,var(--color-secondary-contrast));--_active-shadow:var(--tab-item-active-shadow,var(--shadow-xs), var(--inset-shadow-xs))}:host([variant=glass]) button{color:var(--_color);text-shadow:var(--text-shadow-2xs)}:host([variant=glass]) button:hover{color:var(--tab-item-active-color,var(--color-secondary-contrast))}:host([variant=frost]){--_hover-bg:var(--tab-item-hover-bg,color-mix(in oklch, var(--color-contrast) 10%, transparent));--_active-bg:var(--tab-item-active-bg,color-mix(in oklch, var(--color-canvas) 60%, transparent));--_active-color:var(--tab-item-active-color,var(--text-color-heading));--_active-shadow:var(--tab-item-active-shadow,var(--shadow-xs), var(--inset-shadow-xs))}:host([variant=frost]) button{color:var(--text-color-secondary)}:host button:hover{color:var(--tab-item-active-color,var(--text-color-heading));background:var(--_hover-bg)}:host([active]) button{color:var(--_active-color);background:var(--_active-bg);box-shadow:var(--_active-shadow)}:host([size=sm]){--tab-item-font-size:var(--text-xs);--tab-item-padding:var(--size-1) var(--size-3)}:host(:not([size])),:host([size=md]){--tab-item-font-size:var(--text-sm);--tab-item-padding:var(--size-1-5) var(--size-4)}:host([size=lg]){--tab-item-font-size:var(--text-base);--tab-item-padding:var(--size-2) var(--size-5)}@media (pointer:coarse){:host,:host([size=md]){--tab-item-font-size:var(--text-base);--tab-item-padding:var(--size-2) var(--size-5)}:host([size=sm]){--tab-item-font-size:var(--text-sm);--tab-item-padding:var(--size-1-5) var(--size-4)}}:host([disabled]){pointer-events:none;opacity:.5}@media (forced-colors:active){button:focus-visible{box-shadow:none;outline:2px solid highlight}:host([active]) button{outline-offset:-2px;outline:2px solid highlight}}}`;exports.default=e;
-//# sourceMappingURL=tab-item.css?inline.cjs.map
+//# sourceMappingURL=tab-item.css.cjs.map

package/dist/disclosure/tab-item/tab-item.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-item.css.cjs","names":[],"sources":["../../../src/disclosure/tab-item/tab-item.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: inline-flex;\n    outline: none;\n\n    --tab-item-transition: var(--transition-normal);\n    --tab-item-radius: var(--rounded-lg);\n  }\n\n  button {\n    position: relative;\n    display: inline-flex;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    min-height: var(--_touch-target);\n    padding: var(--tab-item-padding, var(--size-1-5) var(--size-4));\n    font-family: inherit;\n    font-size: var(--tab-item-font-size, var(--text-sm));\n    font-weight: var(--font-medium);\n    color: var(--tab-item-color, var(--text-color-secondary));\n    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    background: transparent;\n    border: none;\n    border-radius: var(--tab-item-radius);\n    transition:\n      background var(--tab-item-transition),\n      color var(--tab-item-transition),\n      box-shadow var(--tab-item-transition);\n  }\n\n  button:focus {\n    outline: none;\n  }\n\n  :host(:focus-visible) button,\n  button:focus-visible {\n    outline: var(--border-2) solid var(--_theme-focus);\n    outline-offset: 2px;\n    box-shadow: 0 0 0 3px var(--_theme-shadow);\n  }\n}\n\n@layer refine.variants {\n  /* ─── solid / default ─── */\n  :host,\n  :host([variant='solid']) {\n    --_hover-bg: var(--tab-item-hover-bg, var(--color-contrast-200));\n    --_active-bg: var(--tab-item-active-bg, var(--color-contrast-0, var(--color-canvas)));\n    --_active-color: var(--tab-item-active-color, var(--text-color-heading));\n    --_active-shadow: var(--tab-item-active-shadow, var(--shadow-xs), var(--inset-shadow-xs));\n  }\n\n  /* ─── flat ─── */\n  :host([variant='flat']) {\n    --_hover-bg: var(--tab-item-hover-bg, var(--color-contrast-200));\n    --_active-bg: var(--tab-item-active-bg, var(--color-contrast-0, var(--color-canvas)));\n    --_active-color: var(--tab-item-active-color, var(--text-color-heading));\n    --_active-shadow: var(--tab-item-active-shadow, var(--shadow-xs), var(--inset-shadow-xs));\n  }\n\n  /* ─── bordered ─── */\n  :host([variant='bordered']) {\n    --_hover-bg: var(--tab-item-hover-bg, var(--color-contrast-200));\n    --_active-bg: var(--tab-item-active-bg, var(--color-contrast-0, var(--color-canvas)));\n    --_active-color: var(--tab-item-active-color, var(--text-color-heading));\n    --_active-shadow: var(--tab-item-active-shadow, var(--shadow-xs));\n  }\n\n  /* ─── ghost ─── */\n  :host([variant='ghost']) {\n    --_hover-bg: var(--tab-item-hover-bg, var(--color-contrast-100));\n    --_active-bg: var(--tab-item-active-bg, var(--_theme-base));\n    --_active-color: var(--tab-item-active-color, var(--_theme-contrast));\n  }\n\n  /* ─── glass ─── */\n  :host([variant='glass']) {\n    --_color: var(--tab-item-color, color-mix(in oklch, var(--color-secondary-contrast) 70%, transparent));\n    --_hover-bg: var(--tab-item-hover-bg, color-mix(in oklch, var(--color-secondary-contrast) 10%, transparent));\n    --_active-bg: var(--tab-item-active-bg, color-mix(in oklch, var(--color-secondary-contrast) 15%, transparent));\n    --_active-color: var(--tab-item-active-color, var(--color-secondary-contrast));\n    --_active-shadow: var(--tab-item-active-shadow, var(--shadow-xs), var(--inset-shadow-xs));\n  }\n\n  :host([variant='glass']) button {\n    color: var(--_color);\n    text-shadow: var(--text-shadow-2xs);\n  }\n\n  :host([variant='glass']) button:hover {\n    color: var(--tab-item-active-color, var(--color-secondary-contrast));\n  }\n\n  /* ─── frost ─── */\n  :host([variant='frost']) {\n    --_hover-bg: var(--tab-item-hover-bg, color-mix(in oklch, var(--color-contrast) 10%, transparent));\n    --_active-bg: var(--tab-item-active-bg, color-mix(in oklch, var(--color-canvas) 60%, transparent));\n    --_active-color: var(--tab-item-active-color, var(--text-color-heading));\n    --_active-shadow: var(--tab-item-active-shadow, var(--shadow-xs), var(--inset-shadow-xs));\n  }\n\n  :host([variant='frost']) button {\n    color: var(--text-color-secondary);\n  }\n\n  /* ─── Shared interactive states (read per-variant --_* tokens) ─── */\n\n  :host button:hover {\n    color: var(--tab-item-active-color, var(--text-color-heading));\n    background: var(--_hover-bg);\n  }\n\n  :host([active]) button {\n    color: var(--_active-color);\n    background: var(--_active-bg);\n    box-shadow: var(--_active-shadow);\n  }\n\n  /* ─── sizes ─── */\n  :host([size='sm']) {\n    --tab-item-font-size: var(--text-xs);\n    --tab-item-padding: var(--size-1) var(--size-3);\n  }\n\n  :host(:not([size])),\n  :host([size='md']) {\n    --tab-item-font-size: var(--text-sm);\n    --tab-item-padding: var(--size-1-5) var(--size-4);\n  }\n\n  :host([size='lg']) {\n    --tab-item-font-size: var(--text-base);\n    --tab-item-padding: var(--size-2) var(--size-5);\n  }\n\n  /* ─── coarse pointer: promote one size tier for proportional scaling ─── */\n  @media (pointer: coarse) {\n    :host,\n    :host([size='md']) {\n      --tab-item-font-size: var(--text-base);\n      --tab-item-padding: var(--size-2) var(--size-5);\n    }\n\n    :host([size='sm']) {\n      --tab-item-font-size: var(--text-sm);\n      --tab-item-padding: var(--size-1-5) var(--size-4);\n    }\n  }\n\n  /* ─── disabled ─── */\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n  @media (forced-colors: active) {\n    /* Ensure focus ring is visible regardless of variant theme color */\n    button:focus-visible {\n      outline: 2px solid Highlight;\n      box-shadow: none;\n    }\n\n    /* Active tab: box-shadow raised indicator is stripped; use outline inste\n         ad so the selected tab remains distinguishable */\n    :host([active]) button {\n      outline: 2px solid Highlight;\n      outline-offset: -2px;\n    }\n  }\n}\n"],"mappings":""}

package/dist/disclosure/tab-item/{tab-item.css?inline.js → tab-item.css.js}

@@ -3,4 +3,4 @@ var e = "@layer refine.base{:host{--tab-item-transition:var(--transition-normal)
 //#endregion
 export { e as default };
 
-//# sourceMappingURL=tab-item.css?inline.js.map
+//# sourceMappingURL=tab-item.css.js.map