@vielzeug/refine 26.10.0 → 26.10.1

package/dist/date-picker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.cjs","names":[],"sources":["../src/inputs/date-picker/date-picker.ts"],"sourcesContent":["import { bind, define, getHost, html, onMounted, prop, ref, useField } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { format, Temporal } from '@vielzeug/tempo';\nimport {\n  createDatePickerControl,\n  createDropdownPositioner,\n  type DatePickerView,\n  formatDisplayDate,\n  handleCalendarGridKeydown,\n  parseIso,\n  toIsoString,\n} from '../../core';\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../shared';\n\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, reducedMotionMixin } from '../../styles';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport componentStyles from './date-picker.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\nexport { INPUT_TAG } from '../input/input';\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport type OreDatePickerEvents = {\n  change: Event;\n  input: Event;\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   * Shows an inline green check icon inside the field to confirm the value has\n   * passed validation. Ignored while `error` is set — an error always wins.\n   */\n  success?: boolean;\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 {boolean} success - Show an inline success check icon (suppressed while `error` is set)\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 input - Fired when a date is selected.\n * @fires change - Fired when a date is selected.\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    success: 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\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    defineFieldValue(\n      el,\n      () => toIsoString(selectedDate.value) ?? '',\n      (value) => {\n        localSelection.value = parseIso(value);\n      },\n    );\n\n    const isDisabled = computed(() => Boolean(props.disabled.value));\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        setFieldValue(el, toIsoString(date) ?? '');\n        dispatchNativeFieldEvent(el, 'input');\n        dispatchNativeFieldEvent(el, 'change');\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    // ── Floating position ────────────────────────────────────────────────────\n    // The old CSS-only `position: absolute; top: 100%` positioned the calendar relative to\n    // the host box — fine until the host sits near a scroll/clip ancestor's edge (e.g. a form\n    // grid inside a dialog), where the same absolute box also expands that ancestor's\n    // *scrollable* overflow area even though it never changes the ancestor's own layout size,\n    // which reads as \"the dialog got bigger\"/jumped. `createDropdownPositioner` — the same\n    // Orbit-powered primitive `ore-select`'s dropdown already uses — positions via `fixed` +\n    // computed `top`/`left`, auto-detecting both the nearest clipping ancestor (so flip/shift\n    // keep the calendar within the dialog panel, not just the page viewport) and any ancestor\n    // that establishes a containing block for `position: fixed` (a dialog panel's entrance\n    // transition commonly leaves a permanent, if visually-identity, `transform` at rest) —\n    // see `createDropdownPositioner`'s own `boundary`/`containingBlock` docs.\n    const triggerRef = ref<HTMLElement>();\n    const calendarRef = ref<HTMLElement>();\n\n    const positioner = createDropdownPositioner({\n      getFloating: () => calendarRef.value ?? null,\n      getOffsetPx: () => 4,\n      getReference: () => triggerRef.value ?? null,\n      matchWidth: false,\n    });\n\n    let stopAutoUpdate: (() => void) | null = null;\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, timeZone: '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      handleCalendarGridKeydown(e, '.cal-cell-day', 7, (cell) => handleSelectDay(cell.dataset.iso ?? ''));\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      positioner.update();\n      stopAutoUpdate = positioner.startAutoUpdate?.() ?? null;\n    }\n\n    function closePicker(): void {\n      isOpen.value = false;\n      ctrl.setView('day');\n      currentView.value = 'day';\n      stopAutoUpdate?.();\n      stopAutoUpdate = null;\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        stopAutoUpdate?.();\n        stopAutoUpdate = null;\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 = () => props.size?.value ?? undefined;\n    const inputVariant = () => props.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        ref=\"${triggerRef}\"\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        ?success=\"${() => props.success.value}\"\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        ref=\"${calendarRef}\"\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>\n            <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`\n                  <div class=\"cal-cell cal-cell-head\" role=\"columnheader\" aria-label=\"${lbl}\">${lbl}</div>\n                `,\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) => html`\n                <div role=\"row\" class=\"cal-grid-row\">\n                  ${row.map(\n                    (cell) => html`\n                      <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                  )}\n                </div>\n              `,\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) => html`\n                <div role=\"row\">\n                  ${row.map(\n                    (cell) => html`\n                      <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                          handleCalendarGridKeydown(e, '.cal-cell-month', 4, () => {\n                            if (!cell.isDisabled) handleSelectMonth(cell.month);\n                          })}\">\n                        ${cell.shortLabel}\n                      </div>\n                    `,\n                  )}\n                </div>\n              `,\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) => html`\n                <div role=\"row\">\n                  ${row.map(\n                    (cell) => html`\n                      <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                          handleCalendarGridKeydown(e, '.cal-cell-year', 4, () => {\n                            if (!cell.isDisabled) handleSelectYear(cell.year);\n                          })}\">\n                        ${String(cell.year)}\n                      </div>\n                    `,\n                  )}\n                </div>\n              `,\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.cjs","names":[],"sources":["../src/inputs/date-picker/date-picker.ts"],"sourcesContent":["import { bind, define, getHost, html, onMounted, prop, ref, useField } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { format, Temporal } from '@vielzeug/tempo';\nimport {\n  createDatePickerControl,\n  createDropdownPositioner,\n  type DatePickerView,\n  formatDisplayDate,\n  handleCalendarGridKeydown,\n  parseIso,\n  toIsoString,\n} from '../../core';\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../shared';\n\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, reducedMotionMixin } from '../../styles';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport componentStyles from './date-picker.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\nexport { INPUT_TAG } from '../input/input';\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport type OreDatePickerEvents = {\n  change: Event;\n  input: Event;\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   * Shows an inline green check icon inside the field to confirm the value has\n   * passed validation. Ignored while `error` is set: an error always wins.\n   */\n  success?: boolean;\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 {boolean} success - Show an inline success check icon (suppressed while `error` is set)\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 input - Fired when a date is selected.\n * @fires change - Fired when a date is selected.\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    success: 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\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    defineFieldValue(\n      el,\n      () => toIsoString(selectedDate.value) ?? '',\n      (value) => {\n        localSelection.value = parseIso(value);\n      },\n    );\n\n    const isDisabled = computed(() => Boolean(props.disabled.value));\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        setFieldValue(el, toIsoString(date) ?? '');\n        dispatchNativeFieldEvent(el, 'input');\n        dispatchNativeFieldEvent(el, 'change');\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    // ── Floating position ────────────────────────────────────────────────────\n    // The old CSS-only `position: absolute; top: 100%` positioned the calendar relative to\n    // the host box: fine until the host sits near a scroll/clip ancestor's edge (e.g. a form\n    // grid inside a dialog), where the same absolute box also expands that ancestor's\n    // *scrollable* overflow area even though it never changes the ancestor's own layout size,\n    // which reads as \"the dialog got bigger\"/jumped. `createDropdownPositioner`: the same\n    // Orbit-powered primitive `ore-select`'s dropdown already uses: positions via `fixed` +\n    // computed `top`/`left`, auto-detecting both the nearest clipping ancestor (so flip/shift\n    // keep the calendar within the dialog panel, not just the page viewport) and any ancestor\n    // that establishes a containing block for `position: fixed` (a dialog panel's entrance\n    // transition commonly leaves a permanent, if visually-identity, `transform` at rest) :\n    // see `createDropdownPositioner`'s own `boundary`/`containingBlock` docs.\n    const triggerRef = ref<HTMLElement>();\n    const calendarRef = ref<HTMLElement>();\n\n    const positioner = createDropdownPositioner({\n      getFloating: () => calendarRef.value ?? null,\n      getOffsetPx: () => 4,\n      getReference: () => triggerRef.value ?? null,\n      matchWidth: false,\n    });\n\n    let stopAutoUpdate: (() => void) | null = null;\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, timeZone: '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      handleCalendarGridKeydown(e, '.cal-cell-day', 7, (cell) => handleSelectDay(cell.dataset.iso ?? ''));\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      positioner.update();\n      stopAutoUpdate = positioner.startAutoUpdate?.() ?? null;\n    }\n\n    function closePicker(): void {\n      isOpen.value = false;\n      ctrl.setView('day');\n      currentView.value = 'day';\n      stopAutoUpdate?.();\n      stopAutoUpdate = null;\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        stopAutoUpdate?.();\n        stopAutoUpdate = null;\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 = () => props.size?.value ?? undefined;\n    const inputVariant = () => props.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        ref=\"${triggerRef}\"\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        ?success=\"${() => props.success.value}\"\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        ref=\"${calendarRef}\"\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>\n            <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`\n                  <div class=\"cal-cell cal-cell-head\" role=\"columnheader\" aria-label=\"${lbl}\">${lbl}</div>\n                `,\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) => html`\n                <div role=\"row\" class=\"cal-grid-row\">\n                  ${row.map(\n                    (cell) => html`\n                      <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                  )}\n                </div>\n              `,\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) => html`\n                <div role=\"row\">\n                  ${row.map(\n                    (cell) => html`\n                      <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                          handleCalendarGridKeydown(e, '.cal-cell-month', 4, () => {\n                            if (!cell.isDisabled) handleSelectMonth(cell.month);\n                          })}\">\n                        ${cell.shortLabel}\n                      </div>\n                    `,\n                  )}\n                </div>\n              `,\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) => html`\n                <div role=\"row\">\n                  ${row.map(\n                    (cell) => html`\n                      <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                          handleCalendarGridKeydown(e, '.cal-cell-year', 4, () => {\n                            if (!cell.isDisabled) handleSelectYear(cell.year);\n                          })}\">\n                        ${String(cell.year)}\n                      </div>\n                    `,\n                  )}\n                </div>\n              `,\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/date-picker.js

@@ -36,7 +36,7 @@ import{defineFieldValue as e,dispatchNativeFieldEvent as t,setFieldValue as n}fr
         id="${A}"
         role="dialog"
         aria-modal="true"
-        aria-label="${()=>`Choose date — ${R.value}`}"
+        aria-label="${()=>`Choose date: ${R.value}`}"
         ?data-open="${d}"
         @keydown="${handleCalendarKeydown}">
         <!-- Calendar header -->

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 { bind, define, getHost, html, onMounted, prop, ref, useField } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { format, Temporal } from '@vielzeug/tempo';\nimport {\n  createDatePickerControl,\n  createDropdownPositioner,\n  type DatePickerView,\n  formatDisplayDate,\n  handleCalendarGridKeydown,\n  parseIso,\n  toIsoString,\n} from '../../core';\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../shared';\n\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, reducedMotionMixin } from '../../styles';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport componentStyles from './date-picker.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\nexport { INPUT_TAG } from '../input/input';\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport type OreDatePickerEvents = {\n  change: Event;\n  input: Event;\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   * Shows an inline green check icon inside the field to confirm the value has\n   * passed validation. Ignored while `error` is set — an error always wins.\n   */\n  success?: boolean;\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 {boolean} success - Show an inline success check icon (suppressed while `error` is set)\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 input - Fired when a date is selected.\n * @fires change - Fired when a date is selected.\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    success: 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\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    defineFieldValue(\n      el,\n      () => toIsoString(selectedDate.value) ?? '',\n      (value) => {\n        localSelection.value = parseIso(value);\n      },\n    );\n\n    const isDisabled = computed(() => Boolean(props.disabled.value));\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        setFieldValue(el, toIsoString(date) ?? '');\n        dispatchNativeFieldEvent(el, 'input');\n        dispatchNativeFieldEvent(el, 'change');\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    // ── Floating position ────────────────────────────────────────────────────\n    // The old CSS-only `position: absolute; top: 100%` positioned the calendar relative to\n    // the host box — fine until the host sits near a scroll/clip ancestor's edge (e.g. a form\n    // grid inside a dialog), where the same absolute box also expands that ancestor's\n    // *scrollable* overflow area even though it never changes the ancestor's own layout size,\n    // which reads as \"the dialog got bigger\"/jumped. `createDropdownPositioner` — the same\n    // Orbit-powered primitive `ore-select`'s dropdown already uses — positions via `fixed` +\n    // computed `top`/`left`, auto-detecting both the nearest clipping ancestor (so flip/shift\n    // keep the calendar within the dialog panel, not just the page viewport) and any ancestor\n    // that establishes a containing block for `position: fixed` (a dialog panel's entrance\n    // transition commonly leaves a permanent, if visually-identity, `transform` at rest) —\n    // see `createDropdownPositioner`'s own `boundary`/`containingBlock` docs.\n    const triggerRef = ref<HTMLElement>();\n    const calendarRef = ref<HTMLElement>();\n\n    const positioner = createDropdownPositioner({\n      getFloating: () => calendarRef.value ?? null,\n      getOffsetPx: () => 4,\n      getReference: () => triggerRef.value ?? null,\n      matchWidth: false,\n    });\n\n    let stopAutoUpdate: (() => void) | null = null;\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, timeZone: '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      handleCalendarGridKeydown(e, '.cal-cell-day', 7, (cell) => handleSelectDay(cell.dataset.iso ?? ''));\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      positioner.update();\n      stopAutoUpdate = positioner.startAutoUpdate?.() ?? null;\n    }\n\n    function closePicker(): void {\n      isOpen.value = false;\n      ctrl.setView('day');\n      currentView.value = 'day';\n      stopAutoUpdate?.();\n      stopAutoUpdate = null;\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        stopAutoUpdate?.();\n        stopAutoUpdate = null;\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 = () => props.size?.value ?? undefined;\n    const inputVariant = () => props.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        ref=\"${triggerRef}\"\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        ?success=\"${() => props.success.value}\"\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        ref=\"${calendarRef}\"\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>\n            <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`\n                  <div class=\"cal-cell cal-cell-head\" role=\"columnheader\" aria-label=\"${lbl}\">${lbl}</div>\n                `,\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) => html`\n                <div role=\"row\" class=\"cal-grid-row\">\n                  ${row.map(\n                    (cell) => html`\n                      <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                  )}\n                </div>\n              `,\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) => html`\n                <div role=\"row\">\n                  ${row.map(\n                    (cell) => html`\n                      <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                          handleCalendarGridKeydown(e, '.cal-cell-month', 4, () => {\n                            if (!cell.isDisabled) handleSelectMonth(cell.month);\n                          })}\">\n                        ${cell.shortLabel}\n                      </div>\n                    `,\n                  )}\n                </div>\n              `,\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) => html`\n                <div role=\"row\">\n                  ${row.map(\n                    (cell) => html`\n                      <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                          handleCalendarGridKeydown(e, '.cal-cell-year', 4, () => {\n                            if (!cell.isDisabled) handleSelectYear(cell.year);\n                          })}\">\n                        ${String(cell.year)}\n                      </div>\n                    `,\n                  )}\n                </div>\n              `,\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 { bind, define, getHost, html, onMounted, prop, ref, useField } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { format, Temporal } from '@vielzeug/tempo';\nimport {\n  createDatePickerControl,\n  createDropdownPositioner,\n  type DatePickerView,\n  formatDisplayDate,\n  handleCalendarGridKeydown,\n  parseIso,\n  toIsoString,\n} from '../../core';\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../shared';\n\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, reducedMotionMixin } from '../../styles';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport componentStyles from './date-picker.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\nexport { INPUT_TAG } from '../input/input';\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport type OreDatePickerEvents = {\n  change: Event;\n  input: Event;\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   * Shows an inline green check icon inside the field to confirm the value has\n   * passed validation. Ignored while `error` is set: an error always wins.\n   */\n  success?: boolean;\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 {boolean} success - Show an inline success check icon (suppressed while `error` is set)\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 input - Fired when a date is selected.\n * @fires change - Fired when a date is selected.\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    success: 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\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    defineFieldValue(\n      el,\n      () => toIsoString(selectedDate.value) ?? '',\n      (value) => {\n        localSelection.value = parseIso(value);\n      },\n    );\n\n    const isDisabled = computed(() => Boolean(props.disabled.value));\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        setFieldValue(el, toIsoString(date) ?? '');\n        dispatchNativeFieldEvent(el, 'input');\n        dispatchNativeFieldEvent(el, 'change');\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    // ── Floating position ────────────────────────────────────────────────────\n    // The old CSS-only `position: absolute; top: 100%` positioned the calendar relative to\n    // the host box: fine until the host sits near a scroll/clip ancestor's edge (e.g. a form\n    // grid inside a dialog), where the same absolute box also expands that ancestor's\n    // *scrollable* overflow area even though it never changes the ancestor's own layout size,\n    // which reads as \"the dialog got bigger\"/jumped. `createDropdownPositioner`: the same\n    // Orbit-powered primitive `ore-select`'s dropdown already uses: positions via `fixed` +\n    // computed `top`/`left`, auto-detecting both the nearest clipping ancestor (so flip/shift\n    // keep the calendar within the dialog panel, not just the page viewport) and any ancestor\n    // that establishes a containing block for `position: fixed` (a dialog panel's entrance\n    // transition commonly leaves a permanent, if visually-identity, `transform` at rest) :\n    // see `createDropdownPositioner`'s own `boundary`/`containingBlock` docs.\n    const triggerRef = ref<HTMLElement>();\n    const calendarRef = ref<HTMLElement>();\n\n    const positioner = createDropdownPositioner({\n      getFloating: () => calendarRef.value ?? null,\n      getOffsetPx: () => 4,\n      getReference: () => triggerRef.value ?? null,\n      matchWidth: false,\n    });\n\n    let stopAutoUpdate: (() => void) | null = null;\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, timeZone: '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      handleCalendarGridKeydown(e, '.cal-cell-day', 7, (cell) => handleSelectDay(cell.dataset.iso ?? ''));\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      positioner.update();\n      stopAutoUpdate = positioner.startAutoUpdate?.() ?? null;\n    }\n\n    function closePicker(): void {\n      isOpen.value = false;\n      ctrl.setView('day');\n      currentView.value = 'day';\n      stopAutoUpdate?.();\n      stopAutoUpdate = null;\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        stopAutoUpdate?.();\n        stopAutoUpdate = null;\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 = () => props.size?.value ?? undefined;\n    const inputVariant = () => props.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        ref=\"${triggerRef}\"\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        ?success=\"${() => props.success.value}\"\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        ref=\"${calendarRef}\"\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>\n            <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`\n                  <div class=\"cal-cell cal-cell-head\" role=\"columnheader\" aria-label=\"${lbl}\">${lbl}</div>\n                `,\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) => html`\n                <div role=\"row\" class=\"cal-grid-row\">\n                  ${row.map(\n                    (cell) => html`\n                      <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                  )}\n                </div>\n              `,\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) => html`\n                <div role=\"row\">\n                  ${row.map(\n                    (cell) => html`\n                      <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                          handleCalendarGridKeydown(e, '.cal-cell-month', 4, () => {\n                            if (!cell.isDisabled) handleSelectMonth(cell.month);\n                          })}\">\n                        ${cell.shortLabel}\n                      </div>\n                    `,\n                  )}\n                </div>\n              `,\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) => html`\n                <div role=\"row\">\n                  ${row.map(\n                    (cell) => html`\n                      <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                          handleCalendarGridKeydown(e, '.cal-cell-year', 4, () => {\n                            if (!cell.isDisabled) handleSelectYear(cell.year);\n                          })}\">\n                        ${String(cell.year)}\n                      </div>\n                    `,\n                  )}\n                </div>\n              `,\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.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.cjs","names":[],"sources":["../src/overlay/dialog/dialog.ts"],"sourcesContent":["import { define, getHost, html, onCleanup, onEvent, onMounted, prop, ref, useEmit, useSlots } from '@vielzeug/ore';\n\nimport { type OverlayOpenChangeDetail, parseOptionalBool } from '../../core';\nimport { coarsePointerMixin, roundedVariantMixin } from '../../styles';\nimport type { PaddingSize, RoundedSize } from '../../types';\nimport { useDialogControl } from '../shared/use-dialog';\n\nimport componentStyles from './dialog.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\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  'open-change': OverlayOpenChangeDetail;\n};\n\nexport type OreDialogProps = {\n  /** Backdrop style — 'blur' (default): dark overlay + blur; 'opaque': dark overlay only; 'transparent': no overlay */\n  backdrop?: DialogBackdrop;\n  /** Initial uncontrolled open state. Ignored when `open` is set. */\n  'default-open'?: boolean;\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 - Controlled open state\n * @attr {boolean} default-open - Initial uncontrolled open state\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-change - Fired when the dialog state changes. detail: { open, 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    'default-open': prop.bool(false),\n    dismissible: prop.bool(false),\n    elevation: prop.string<DialogElevation>(),\n    'initial-focus': prop.string(),\n    label: prop.string(),\n    open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\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, handleBackdropClick, overlay, requestClose, mount } = useDialogControl({\n      defaultOpen: props['default-open'],\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('open-change', { open: false, reason }),\n      onOpen: (reason) => emit('open-change', { open: true, 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      mount();\n      onEvent(dialog, 'click', handleBackdropClick);\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":"sVAuHA,IAAa,EAAa,cAC1B,EAAA,EAAA,OAAA,CAAuB,EAAY,CACjC,MAAO,CACL,SAAU,EAAA,KAAK,OAAuB,EACtC,eAAgB,EAAA,KAAK,KAAK,EAAK,EAC/B,YAAa,EAAA,KAAK,KAAK,EAAK,EAC5B,UAAW,EAAA,KAAK,OAAwB,EACxC,gBAAiB,EAAA,KAAK,OAAO,EAC7B,MAAO,EAAA,KAAK,OAAO,EACnB,KAAM,CAAE,QAAS,IAAA,GAAkC,MAAO,EAAA,iBAAkB,EAC5E,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,EAAK,EAAA,QAAA,CAAQ,EACb,GAAA,EAAO,EAAA,QAAA,CAAyB,EAChC,GAAA,EAAQ,EAAA,SAAA,CAAS,EAEjB,GAAA,EAAY,EAAA,IAAA,CAAuB,EACnC,cAAkB,EAAM,IAAI,QAAQ,CAAC,CAAC,OAAS,CAAC,CAAC,EAAM,MAAM,OAAS,EAAM,YAAY,MACxF,cAAkB,EAAM,IAAI,QAAQ,CAAC,CAAC,MAEtC,CAAE,qBAAoB,sBAAqB,UAAS,eAAc,SAAU,EAAA,iBAAiB,CACjG,YAAa,EAAM,gBACnB,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,cAAe,CAAE,KAAM,GAAO,QAAO,CAAC,EACtE,OAAS,GAAW,EAAK,cAAe,CAAE,KAAM,GAAM,QAAO,CAAC,EAC9D,SAAU,EAAM,KAChB,iBAAoB,CAClB,EAAmB,CACrB,EACA,YAAa,EAAM,eACrB,CAAC,EAEK,kBAAsB,CAC1B,EAAa,SAAS,CACxB,EAeA,OAbA,EAAA,EAAA,UAAA,KAAgB,CACd,IAAM,EAAS,EAAU,MAEpB,KAKL,OAHA,EAAM,GACN,EAAA,EAAA,QAAA,CAAQ,EAAQ,QAAS,CAAmB,MAE/B,CACX,EAAQ,QAAQ,CAClB,CACF,CAAC,EAEM,EAAA,IAAI;oBACK,EAAU,4CAA4C,EAAM,MAAM;;qDAEjC,EAAM,KAAK;0DACJ,CAAC,UAAU,EAAE;;iDAExB,EAAM,MAAM;;;;;;;4BAO/B,CAAC,EAAM,YAAY,MAAM;uBAChC,cAAc;;;;;;;0DAOuB,CAAC,UAAU,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, getHost, html, onCleanup, onEvent, onMounted, prop, ref, useEmit, useSlots } from '@vielzeug/ore';\n\nimport { type OverlayOpenChangeDetail, parseOptionalBool } from '../../core';\nimport { coarsePointerMixin, roundedVariantMixin } from '../../styles';\nimport type { PaddingSize, RoundedSize } from '../../types';\nimport { useDialogControl } from '../shared/use-dialog';\n\nimport componentStyles from './dialog.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\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  'open-change': OverlayOpenChangeDetail;\n};\n\nexport type OreDialogProps = {\n  /** Backdrop style: 'blur' (default): dark overlay + blur; 'opaque': dark overlay only; 'transparent': no overlay */\n  backdrop?: DialogBackdrop;\n  /** Initial uncontrolled open state. Ignored when `open` is set. */\n  'default-open'?: boolean;\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 - Controlled open state\n * @attr {boolean} default-open - Initial uncontrolled open state\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-change - Fired when the dialog state changes. detail: { open, 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    'default-open': prop.bool(false),\n    dismissible: prop.bool(false),\n    elevation: prop.string<DialogElevation>(),\n    'initial-focus': prop.string(),\n    label: prop.string(),\n    open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\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, handleBackdropClick, overlay, requestClose, mount } = useDialogControl({\n      defaultOpen: props['default-open'],\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('open-change', { open: false, reason }),\n      onOpen: (reason) => emit('open-change', { open: true, 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      mount();\n      onEvent(dialog, 'click', handleBackdropClick);\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":"sVAuHA,IAAa,EAAa,cAC1B,EAAA,EAAA,OAAA,CAAuB,EAAY,CACjC,MAAO,CACL,SAAU,EAAA,KAAK,OAAuB,EACtC,eAAgB,EAAA,KAAK,KAAK,EAAK,EAC/B,YAAa,EAAA,KAAK,KAAK,EAAK,EAC5B,UAAW,EAAA,KAAK,OAAwB,EACxC,gBAAiB,EAAA,KAAK,OAAO,EAC7B,MAAO,EAAA,KAAK,OAAO,EACnB,KAAM,CAAE,QAAS,IAAA,GAAkC,MAAO,EAAA,iBAAkB,EAC5E,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,EAAK,EAAA,QAAA,CAAQ,EACb,GAAA,EAAO,EAAA,QAAA,CAAyB,EAChC,GAAA,EAAQ,EAAA,SAAA,CAAS,EAEjB,GAAA,EAAY,EAAA,IAAA,CAAuB,EACnC,cAAkB,EAAM,IAAI,QAAQ,CAAC,CAAC,OAAS,CAAC,CAAC,EAAM,MAAM,OAAS,EAAM,YAAY,MACxF,cAAkB,EAAM,IAAI,QAAQ,CAAC,CAAC,MAEtC,CAAE,qBAAoB,sBAAqB,UAAS,eAAc,SAAU,EAAA,iBAAiB,CACjG,YAAa,EAAM,gBACnB,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,cAAe,CAAE,KAAM,GAAO,QAAO,CAAC,EACtE,OAAS,GAAW,EAAK,cAAe,CAAE,KAAM,GAAM,QAAO,CAAC,EAC9D,SAAU,EAAM,KAChB,iBAAoB,CAClB,EAAmB,CACrB,EACA,YAAa,EAAM,eACrB,CAAC,EAEK,kBAAsB,CAC1B,EAAa,SAAS,CACxB,EAeA,OAbA,EAAA,EAAA,UAAA,KAAgB,CACd,IAAM,EAAS,EAAU,MAEpB,KAKL,OAHA,EAAM,GACN,EAAA,EAAA,QAAA,CAAQ,EAAQ,QAAS,CAAmB,MAE/B,CACX,EAAQ,QAAQ,CAClB,CACF,CAAC,EAEM,EAAA,IAAI;oBACK,EAAU,4CAA4C,EAAM,MAAM;;qDAEjC,EAAM,KAAK;0DACJ,CAAC,UAAU,EAAE;;iDAExB,EAAM,MAAM;;;;;;;4BAO/B,CAAC,EAAM,YAAY,MAAM;uBAChC,cAAc;;;;;;;0DAOuB,CAAC,UAAU,EAAE;;;;;KAMvE,EACA,OAAQ,CAAC,EAAA,oBAAqB,EAAA,mBAAoB,EAAA,OAAe,CACnE,CAAC"}

package/dist/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":[],"sources":["../src/overlay/dialog/dialog.ts"],"sourcesContent":["import { define, getHost, html, onCleanup, onEvent, onMounted, prop, ref, useEmit, useSlots } from '@vielzeug/ore';\n\nimport { type OverlayOpenChangeDetail, parseOptionalBool } from '../../core';\nimport { coarsePointerMixin, roundedVariantMixin } from '../../styles';\nimport type { PaddingSize, RoundedSize } from '../../types';\nimport { useDialogControl } from '../shared/use-dialog';\n\nimport componentStyles from './dialog.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\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  'open-change': OverlayOpenChangeDetail;\n};\n\nexport type OreDialogProps = {\n  /** Backdrop style — 'blur' (default): dark overlay + blur; 'opaque': dark overlay only; 'transparent': no overlay */\n  backdrop?: DialogBackdrop;\n  /** Initial uncontrolled open state. Ignored when `open` is set. */\n  'default-open'?: boolean;\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 - Controlled open state\n * @attr {boolean} default-open - Initial uncontrolled open state\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-change - Fired when the dialog state changes. detail: { open, 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    'default-open': prop.bool(false),\n    dismissible: prop.bool(false),\n    elevation: prop.string<DialogElevation>(),\n    'initial-focus': prop.string(),\n    label: prop.string(),\n    open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\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, handleBackdropClick, overlay, requestClose, mount } = useDialogControl({\n      defaultOpen: props['default-open'],\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('open-change', { open: false, reason }),\n      onOpen: (reason) => emit('open-change', { open: true, 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      mount();\n      onEvent(dialog, 'click', handleBackdropClick);\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":"6eAuHA,IAAa,EAAa,aAC1B,EAAuB,EAAY,CACjC,MAAO,CACL,SAAU,EAAK,OAAuB,EACtC,eAAgB,EAAK,KAAK,EAAK,EAC/B,YAAa,EAAK,KAAK,EAAK,EAC5B,UAAW,EAAK,OAAwB,EACxC,gBAAiB,EAAK,OAAO,EAC7B,MAAO,EAAK,OAAO,EACnB,KAAM,CAAE,QAAS,IAAA,GAAkC,MAAO,CAAkB,EAC5E,QAAS,EAAK,OAAoB,EAClC,WAAY,EAAK,KAAK,EAAK,EAC3B,eAAgB,EAAK,KAAK,EAAI,EAC9B,QAAS,EAAK,OAAyB,EACvC,KAAM,EAAK,MAAM,CAAC,KAAM,KAAM,KAAM,KAAM,MAAM,EAAY,IAAI,CAClE,EACA,MAAM,EAAO,CACX,IAAM,EAAK,EAAQ,EACb,EAAO,EAAyB,EAChC,EAAQ,EAAS,EAEjB,EAAY,EAAuB,EACnC,cAAkB,EAAM,IAAI,QAAQ,CAAC,CAAC,OAAS,CAAC,CAAC,EAAM,MAAM,OAAS,EAAM,YAAY,MACxF,cAAkB,EAAM,IAAI,QAAQ,CAAC,CAAC,MAEtC,CAAE,qBAAoB,sBAAqB,UAAS,eAAc,SAAU,EAAiB,CACjG,YAAa,EAAM,gBACnB,YACA,eAAkB,EAAU,OAAO,cAA2B,QAAQ,EACtE,KAAM,EACN,aAAc,EAAM,iBACpB,iBAAoB,EAAQ,EAAM,WAAW,MAC7C,YACA,UACA,cAAgB,GAAW,EAAK,cAAe,CAAE,KAAM,GAAO,QAAO,CAAC,EACtE,OAAS,GAAW,EAAK,cAAe,CAAE,KAAM,GAAM,QAAO,CAAC,EAC9D,SAAU,EAAM,KAChB,iBAAoB,CAClB,EAAmB,CACrB,EACA,YAAa,EAAM,eACrB,CAAC,EAEK,kBAAsB,CAC1B,EAAa,SAAS,CACxB,EAeA,OAbA,MAAgB,CACd,IAAM,EAAS,EAAU,MAEpB,KAKL,OAHA,EAAM,EACN,EAAQ,EAAQ,QAAS,CAAmB,MAE/B,CACX,EAAQ,QAAQ,CAClB,CACF,CAAC,EAEM,CAAI;oBACK,EAAU,4CAA4C,EAAM,MAAM;;qDAEjC,EAAM,KAAK;0DACJ,CAAC,UAAU,EAAE;;iDAExB,EAAM,MAAM;;;;;;;4BAO/B,CAAC,EAAM,YAAY,MAAM;uBAChC,cAAc;;;;;;;0DAOuB,CAAC,UAAU,EAAE;;;;;KAMvE,EACA,OAAQ,CAAC,EAAqB,EAAoB,CAAe,CACnE,CAAC"}
+{"version":3,"file":"dialog.js","names":[],"sources":["../src/overlay/dialog/dialog.ts"],"sourcesContent":["import { define, getHost, html, onCleanup, onEvent, onMounted, prop, ref, useEmit, useSlots } from '@vielzeug/ore';\n\nimport { type OverlayOpenChangeDetail, parseOptionalBool } from '../../core';\nimport { coarsePointerMixin, roundedVariantMixin } from '../../styles';\nimport type { PaddingSize, RoundedSize } from '../../types';\nimport { useDialogControl } from '../shared/use-dialog';\n\nimport componentStyles from './dialog.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\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  'open-change': OverlayOpenChangeDetail;\n};\n\nexport type OreDialogProps = {\n  /** Backdrop style: 'blur' (default): dark overlay + blur; 'opaque': dark overlay only; 'transparent': no overlay */\n  backdrop?: DialogBackdrop;\n  /** Initial uncontrolled open state. Ignored when `open` is set. */\n  'default-open'?: boolean;\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 - Controlled open state\n * @attr {boolean} default-open - Initial uncontrolled open state\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-change - Fired when the dialog state changes. detail: { open, 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    'default-open': prop.bool(false),\n    dismissible: prop.bool(false),\n    elevation: prop.string<DialogElevation>(),\n    'initial-focus': prop.string(),\n    label: prop.string(),\n    open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\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, handleBackdropClick, overlay, requestClose, mount } = useDialogControl({\n      defaultOpen: props['default-open'],\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('open-change', { open: false, reason }),\n      onOpen: (reason) => emit('open-change', { open: true, 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      mount();\n      onEvent(dialog, 'click', handleBackdropClick);\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":"6eAuHA,IAAa,EAAa,aAC1B,EAAuB,EAAY,CACjC,MAAO,CACL,SAAU,EAAK,OAAuB,EACtC,eAAgB,EAAK,KAAK,EAAK,EAC/B,YAAa,EAAK,KAAK,EAAK,EAC5B,UAAW,EAAK,OAAwB,EACxC,gBAAiB,EAAK,OAAO,EAC7B,MAAO,EAAK,OAAO,EACnB,KAAM,CAAE,QAAS,IAAA,GAAkC,MAAO,CAAkB,EAC5E,QAAS,EAAK,OAAoB,EAClC,WAAY,EAAK,KAAK,EAAK,EAC3B,eAAgB,EAAK,KAAK,EAAI,EAC9B,QAAS,EAAK,OAAyB,EACvC,KAAM,EAAK,MAAM,CAAC,KAAM,KAAM,KAAM,KAAM,MAAM,EAAY,IAAI,CAClE,EACA,MAAM,EAAO,CACX,IAAM,EAAK,EAAQ,EACb,EAAO,EAAyB,EAChC,EAAQ,EAAS,EAEjB,EAAY,EAAuB,EACnC,cAAkB,EAAM,IAAI,QAAQ,CAAC,CAAC,OAAS,CAAC,CAAC,EAAM,MAAM,OAAS,EAAM,YAAY,MACxF,cAAkB,EAAM,IAAI,QAAQ,CAAC,CAAC,MAEtC,CAAE,qBAAoB,sBAAqB,UAAS,eAAc,SAAU,EAAiB,CACjG,YAAa,EAAM,gBACnB,YACA,eAAkB,EAAU,OAAO,cAA2B,QAAQ,EACtE,KAAM,EACN,aAAc,EAAM,iBACpB,iBAAoB,EAAQ,EAAM,WAAW,MAC7C,YACA,UACA,cAAgB,GAAW,EAAK,cAAe,CAAE,KAAM,GAAO,QAAO,CAAC,EACtE,OAAS,GAAW,EAAK,cAAe,CAAE,KAAM,GAAM,QAAO,CAAC,EAC9D,SAAU,EAAM,KAChB,iBAAoB,CAClB,EAAmB,CACrB,EACA,YAAa,EAAM,eACrB,CAAC,EAEK,kBAAsB,CAC1B,EAAa,SAAS,CACxB,EAeA,OAbA,MAAgB,CACd,IAAM,EAAS,EAAU,MAEpB,KAKL,OAHA,EAAM,EACN,EAAQ,EAAQ,QAAS,CAAmB,MAE/B,CACX,EAAQ,QAAQ,CAClB,CACF,CAAC,EAEM,CAAI;oBACK,EAAU,4CAA4C,EAAM,MAAM;;qDAEjC,EAAM,KAAK;0DACJ,CAAC,UAAU,EAAE;;iDAExB,EAAM,MAAM;;;;;;;4BAO/B,CAAC,EAAM,YAAY,MAAM;uBAChC,cAAc;;;;;;;0DAOuB,CAAC,UAAU,EAAE;;;;;KAMvE,EACA,OAAQ,CAAC,EAAqB,EAAoB,CAAe,CACnE,CAAC"}

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

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--accordion-details-radius:var(--rounded-lg);--accordion-item-transition:var(--transition-normal);--accordion-item-expand-easing:var(--ease-spring);--accordion-item-row-duration:.2s;--accordion-item-fade-duration:.2s;--accordion-item-fade-delay:60ms;--accordion-item-collapse-delay:.12s;color:var(--accordion-item-body-color,var(--text-color-body));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 var(--accordion-item-row-duration) 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 var(--accordion-item-fade-duration) var(--accordion-item-fade-delay) var(--ease-spring), transform var(--accordion-item-fade-duration) var(--accordion-item-fade-delay) 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 var(--accordion-item-row-duration) var(--accordion-item-collapse-delay) 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=frost]) details{border-radius:inherit}: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=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=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{--ore-icon-size:var(--_size,var(--size-5));width:var(--_size,var(--size-5));height:var(--_size,var(--size-5));transition:transform var(--accordion-item-row-duration) var(--ease-spring);transform:rotate(-90deg)}.chevron:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){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;
+var e=`@layer refine.base{:host{--accordion-details-radius:var(--rounded-lg);--accordion-item-transition:var(--transition-normal);--accordion-item-expand-easing:var(--ease-spring);--accordion-item-row-duration:.2s;--accordion-item-fade-duration:.2s;--accordion-item-fade-delay:60ms;--accordion-item-collapse-delay:.12s;color:var(--accordion-item-body-color,var(--text-color-body));display:block}details{border-radius:var(--accordion-item-radius);width:100%}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 var(--accordion-item-row-duration) 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 var(--accordion-item-fade-duration) var(--accordion-item-fade-delay) var(--ease-spring), transform var(--accordion-item-fade-duration) var(--accordion-item-fade-delay) 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 var(--accordion-item-row-duration) var(--accordion-item-collapse-delay) 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=frost]) details{border-radius:inherit}: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=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=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{--ore-icon-size:var(--_size,var(--size-5));width:var(--_size,var(--size-5));height:var(--_size,var(--size-5));transition:transform var(--accordion-item-row-duration) var(--ease-spring);transform:rotate(-90deg)}.chevron:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){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.cjs.map

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

@@ -1 +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    --accordion-details-radius: var(--rounded-lg);\n    --accordion-item-transition: var(--transition-normal);\n    --accordion-item-expand-easing: var(--ease-spring);\n    --accordion-item-row-duration: 200ms;\n    --accordion-item-fade-duration: 200ms;\n    --accordion-item-fade-delay: 60ms;\n    --accordion-item-collapse-delay: 120ms;\n    display: block;\n    color: var(--accordion-item-body-color, var(--text-color-body));\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 var(--accordion-item-row-duration)\n      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 var(--accordion-item-fade-duration) var(--accordion-item-fade-delay) var(--ease-spring),\n      transform var(--accordion-item-fade-duration) var(--accordion-item-fade-delay) 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 var(--accordion-item-row-duration) var(--accordion-item-collapse-delay)\n      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  :host([variant='frost']) details {\n    border-radius: inherit;\n  }\n\n  :host([variant='frost']) summary {\n    border-radius: inherit;\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%);\n  }\n\n  :host([variant='frost']) .content-wrapper {\n    border-radius: 0;\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%);\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    --ore-icon-size: var(--_size, var(--size-5));\n    width: var(--_size, var(--size-5));\n    height: var(--_size, var(--size-5));\n\n    margin-inline-start: auto;\n    transform: rotate(-90deg);\n    transition: transform var(--accordion-item-row-duration) 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":""}
+{"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    --accordion-details-radius: var(--rounded-lg);\n    --accordion-item-transition: var(--transition-normal);\n    --accordion-item-expand-easing: var(--ease-spring);\n    --accordion-item-row-duration: 200ms;\n    --accordion-item-fade-duration: 200ms;\n    --accordion-item-fade-delay: 60ms;\n    --accordion-item-collapse-delay: 120ms;\n    display: block;\n    color: var(--accordion-item-body-color, var(--text-color-body));\n  }\n\n  details {\n    width: 100%;\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 var(--accordion-item-row-duration)\n      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 var(--accordion-item-fade-duration) var(--accordion-item-fade-delay) var(--ease-spring),\n      transform var(--accordion-item-fade-duration) var(--accordion-item-fade-delay) 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 var(--accordion-item-row-duration) var(--accordion-item-collapse-delay)\n      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  :host([variant='frost']) details {\n    border-radius: inherit;\n  }\n\n  :host([variant='frost']) summary {\n    border-radius: inherit;\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%);\n  }\n\n  :host([variant='frost']) .content-wrapper {\n    border-radius: 0;\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%);\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    --ore-icon-size: var(--_size, var(--size-5));\n    width: var(--_size, var(--size-5));\n    height: var(--_size, var(--size-5));\n\n    margin-inline-start: auto;\n    transform: rotate(-90deg);\n    transition: transform var(--accordion-item-row-duration) 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":""}