@vielzeug/refine 1.8.0 → 2.0.0

package/dist/date-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.js","names":[],"sources":["../src/inputs/date-picker/date-picker.ts"],"sourcesContent":["import { define, html, inject, prop, ref, bind, getHost, onMounted, useEmit } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { Temporal, format } from '@vielzeug/tempo';\n\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../shared';\n\nimport {\n  createDatePickerControl,\n  createDropdownPositioner,\n  formatDisplayDate,\n  parseIso,\n  toIsoString,\n  type DatePickerView,\n} from '../../headless';\nimport '../../content/icon/icon';\nimport '../input/input';\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, reducedMotionMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './date-picker.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport type OreDatePickerEvents = {\n  change: { isoValue: string | null };\n};\n\nexport type OreDatePickerProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable the picker */\n  disabled?: boolean;\n  /** Validation error message */\n  error?: string;\n  /** Expand to container width */\n  fullwidth?: boolean;\n  /** Helper text below the field */\n  helper?: string;\n  /** Visible label */\n  label?: string;\n  /** Label placement */\n  'label-placement'?: 'inset' | 'outside';\n  /** Locale for day/month names (default: browser locale) */\n  locale?: string;\n  /** Latest selectable date in ISO 8601 format (yyyy-MM-dd) */\n  max?: string;\n  /** Earliest selectable date in ISO 8601 format (yyyy-MM-dd) */\n  min?: string;\n  /** Form field name */\n  name?: string;\n  /** Placeholder shown in the text trigger */\n  placeholder?: string;\n  /** Mark field as required */\n  required?: boolean;\n  /** Border radius */\n  rounded?: RoundedSize;\n  /** Component size */\n  size?: ComponentSize;\n  /**\n   * 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 change - Fired when a date is selected. detail: { isoValue: string | null }\n *\n * @slot label - Custom label for the trigger field\n * @slot prefix - Content before the trigger text (e.g. icon)\n * @slot helper - Custom helper text\n * @slot error - Custom error content\n *\n * @cssprop --date-picker-bg - Calendar background\n * @cssprop --date-picker-border-color - Calendar border color\n * @cssprop --date-picker-radius - Calendar border radius\n * @cssprop --date-picker-day-selected-bg - Background of selected day\n * @cssprop --date-picker-day-today-color - Color of today's date number\n * @cssprop --date-picker-day-outside-opacity - Opacity of days outside visible month\n *\n * @part field - The trigger button/field\n * @part calendar - The floating calendar panel\n * @part header - Calendar header (nav + label)\n * @part grid - Day grid\n * @part day - Individual day cell\n *\n * @example\n * ```html\n * <!-- Single date with constraints -->\n * <ore-date-picker label=\"Appointment date\" name=\"date\" min=\"2025-01-01\" max=\"2025-12-31\" color=\"primary\"></ore-date-picker>\n *\n *\n * <!-- Outside label, bordered variant -->\n * <ore-date-picker label=\"Start date\" label-placement=\"outside\" variant=\"bordered\"></ore-date-picker>\n * ```\n */\nexport const DATE_PICKER_TAG = 'ore-date-picker' as const;\n\ndefine<OreDatePickerProps>(DATE_PICKER_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...roundableBundle,\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    locale: prop.string(),\n    max: prop.string(),\n    min: prop.string(),\n    name: prop.string(),\n    placeholder: prop.string(),\n    required: prop.bool(false),\n    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    const emit = useEmit<OreDatePickerEvents>();\n\n    // ── Signals ─────────────────────────────────────────────────────────────\n\n    const isOpen = signal(false);\n\n    // ── Selected date: local-override pattern ──────────────────────────────\n    // localSelection holds a user-initiated pick (or undefined = no override).\n    // selectedDate falls back to the value prop reactively — no setInterval needed.\n\n    const localSelection = signal<Temporal.PlainDate | null | undefined>(undefined);\n\n    const selectedDate = computed(() =>\n      localSelection.value !== undefined ? localSelection.value : parseIso(props.value.value),\n    );\n\n    // ── Form context ────────────────────────────────────────────────────────\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n\n    const isDisabled = fCtxProps.disabled;\n    const locale = computed(() => props.locale.value || (typeof navigator !== 'undefined' ? navigator.language : 'en'));\n\n    // ── Date-picker control ─────────────────────────────────────────────────\n\n    const ctrl = createDatePickerControl({\n      get locale() {\n        return locale.value;\n      },\n      get max() {\n        return parseIso(props.max.value);\n      },\n      get min() {\n        return parseIso(props.min.value);\n      },\n      onChange(date) {\n        localSelection.value = date;\n        isOpen.value = false;\n        ctrl.setView('day');\n        currentView.value = 'day';\n        displayYear.value = ctrl.displayYear();\n        displayMonth.value = ctrl.displayMonth();\n        emit('change', { isoValue: toIsoString(date) });\n      },\n      get value() {\n        return selectedDate.value;\n      },\n      get weekendDays() {\n        return props['weekend-days'].value ?? [];\n      },\n    });\n\n    // ── Reactive display state ────────────────────────────────────────────\n    // Three separate primitive signals — the proven pattern.\n\n    const currentView = signal<DatePickerView>('day');\n    const displayYear = signal(ctrl.displayYear());\n    const displayMonth = signal(ctrl.displayMonth()); // 1-indexed (Temporal)\n\n    // ── Form value (host is formAssociated) ──────────────────────────────────\n\n    useField<string>({\n      disabled: isDisabled,\n      toFormValue: (v) => v || null,\n      value: computed(() => toIsoString(selectedDate.value) ?? ''),\n    });\n\n    const dialogId = `date-picker-${Math.random().toString(36).slice(2, 9)}-calendar`;\n\n    // ── 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      getReference: () => triggerRef.value ?? null,\n      matchWidth: false,\n      offsetPx: 4,\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, tz: 'UTC' });\n    });\n\n    const displayYear_ = computed(() => String(displayYear.value));\n    const displayLabel = computed(() => `${displayMonth_.value} ${displayYear_.value}`);\n\n    const dayCells = computed(() => {\n      void displayYear.value;\n      void displayMonth.value;\n      void selectedDate.value; // re-run when selection changes to refresh isSelected flags\n\n      return ctrl.dayCells();\n    });\n    const monthCells = computed(() => {\n      void displayYear.value;\n\n      return ctrl.monthCells();\n    });\n    const yearCells = computed(() => {\n      void displayYear.value;\n\n      return ctrl.yearCells();\n    });\n    const weekdayLabels = computed(() => ctrl.weekdayLabels());\n    const tabIndex = () => (isDisabled.value ? '-1' : '0');\n\n    // ── Navigation handlers ──────────────────────────────────────────────────\n    // In year/month views navigate by year; in day view navigate by month.\n\n    function handlePrev(): void {\n      if (currentView.value === 'day') ctrl.prevMonth();\n      else ctrl.prevYear();\n\n      displayYear.value = ctrl.displayYear();\n      displayMonth.value = ctrl.displayMonth();\n    }\n\n    function handleNext(): void {\n      if (currentView.value === 'day') ctrl.nextMonth();\n      else ctrl.nextYear();\n\n      displayYear.value = ctrl.displayYear();\n      displayMonth.value = ctrl.displayMonth();\n    }\n\n    function handleHeaderClick(): void {\n      const views: DatePickerView[] = ['day', 'month', 'year'];\n      const next = views[(views.indexOf(currentView.value) + 1) % views.length];\n\n      ctrl.setView(next);\n      currentView.value = next;\n    }\n\n    function handleSelectMonth(month: number): void {\n      ctrl.goTo(ctrl.displayYear(), month);\n      ctrl.setView('day');\n      displayYear.value = ctrl.displayYear();\n      displayMonth.value = ctrl.displayMonth();\n      currentView.value = 'day';\n    }\n\n    function handleSelectYear(year: number): void {\n      ctrl.goTo(year, ctrl.displayMonth());\n      ctrl.setView('month');\n      displayYear.value = ctrl.displayYear();\n      currentView.value = 'month';\n    }\n\n    function handleSelectDay(isoStr: string): void {\n      const date = parseIso(isoStr);\n\n      if (!date) return;\n\n      ctrl.select(date);\n    }\n\n    function handleDayKeydown(e: KeyboardEvent): void {\n      const cell = e.currentTarget as HTMLElement;\n      const grid = cell.closest('.cal-grid-days');\n\n      if (!grid) return;\n\n      const allCells = Array.from(grid.querySelectorAll<HTMLElement>('.cal-cell-day'));\n      const idx = allCells.indexOf(cell);\n\n      if (idx === -1) return;\n\n      let target: HTMLElement | undefined;\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        handleSelectDay(cell.dataset.iso ?? '');\n\n        return;\n      } else if (e.key === 'ArrowRight') {\n        target = allCells[idx + 1];\n      } else if (e.key === 'ArrowLeft') {\n        target = allCells[idx - 1];\n      } else if (e.key === 'ArrowDown') {\n        target = allCells[idx + 7];\n      } else if (e.key === 'ArrowUp') {\n        target = allCells[idx - 7];\n      } else if (e.key === 'Home') {\n        target = allCells[Math.floor(idx / 7) * 7];\n      } else if (e.key === 'End') {\n        target = allCells[Math.floor(idx / 7) * 7 + 6];\n      } else {\n        return;\n      }\n\n      e.preventDefault();\n      target?.focus();\n    }\n\n    // ── Month/year-cell keyboard navigation (fixed 4-column grid) ─────────────\n\n    function handleGridKeydown(e: KeyboardEvent, cellSelector: string, columns: number, onSelect: () => void): void {\n      const cell = e.currentTarget as HTMLElement;\n      const grid = cell.closest('.cal-grid');\n\n      if (!grid) return;\n\n      const allCells = Array.from(grid.querySelectorAll<HTMLElement>(cellSelector));\n      const idx = allCells.indexOf(cell);\n\n      if (idx === -1) return;\n\n      let target: HTMLElement | undefined;\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        onSelect();\n\n        return;\n      } else if (e.key === 'ArrowRight') {\n        target = allCells[idx + 1];\n      } else if (e.key === 'ArrowLeft') {\n        target = allCells[idx - 1];\n      } else if (e.key === 'ArrowDown') {\n        target = allCells[idx + columns];\n      } else if (e.key === 'ArrowUp') {\n        target = allCells[idx - columns];\n      } else if (e.key === 'Home') {\n        target = allCells[Math.floor(idx / columns) * columns];\n      } else if (e.key === 'End') {\n        target = allCells[Math.min(Math.floor(idx / columns) * columns + columns - 1, allCells.length - 1)];\n      } else {\n        return;\n      }\n\n      e.preventDefault();\n      target?.focus();\n    }\n\n    // ── Open / close ─────────────────────────────────────────────────────────\n\n    function openPicker(): void {\n      if (isDisabled.value) return;\n\n      isOpen.value = true;\n      ctrl.setView('day');\n      currentView.value = 'day';\n\n      const sel = selectedDate.value;\n\n      if (sel) {\n        ctrl.goTo(sel.year, sel.month);\n        displayYear.value = ctrl.displayYear();\n        displayMonth.value = ctrl.displayMonth();\n      }\n\n      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 = () => fCtxProps.size?.value ?? undefined;\n    const inputVariant = () => fCtxProps.variant?.value ?? undefined;\n    const inputRounded = () => props.rounded?.value ?? undefined;\n    const inputHelper = () => props.helper.value ?? '';\n    const inputError = () => props.error.value ?? '';\n    const inputDisabled = () => (isDisabled.value ? true : undefined);\n    const inputRequired = () => (props.required.value ? true : undefined);\n    const inputFullwidth = () => (props.fullwidth.value ? true : undefined);\n\n    return html`\n      <!-- Trigger: ore-input in readonly display mode -->\n      <ore-input\n        class=\"trigger\"\n        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><span class=\"cal-label-sep\" aria-hidden=\"true\">/</span\n            ><span class=\"cal-label-year\">${displayYear_}</span>\n          </button>\n          <button class=\"nav-btn\" type=\"button\" aria-label=\"Next\" @click=\"${handleNext}\">\n            <ore-icon name=\"chevron-right\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n          </button>\n        </div>\n\n        <!-- Day view: flat 7-column CSS grid, weekday headers + day cells -->\n        <div\n          class=\"cal-grid cal-grid-days\"\n          role=\"grid\"\n          part=\"grid\"\n          :aria-label=\"${() => displayLabel.value}\"\n          ?hidden=\"${() => currentView.value !== 'day'}\">\n          <div role=\"row\" class=\"cal-grid-row\">\n            ${() =>\n              weekdayLabels.value.map(\n                (lbl) => html`<div class=\"cal-cell cal-cell-head\" role=\"columnheader\" aria-label=\"${lbl}\">${lbl}</div>`,\n              )}\n          </div>\n          ${() => {\n            const cells = dayCells.value;\n            const rows: (typeof cells)[number][][] = [];\n\n            for (let i = 0; i < cells.length; i += 7) rows.push(cells.slice(i, i + 7));\n\n            return rows.map(\n              (row) =>\n                html`<div role=\"row\" class=\"cal-grid-row\">\n                  ${row.map(\n                    (cell) =>\n                      html`<div\n                        class=\"cal-cell cal-cell-day\"\n                        role=\"gridcell\"\n                        part=\"day\"\n                        :aria-selected=\"${() => String(cell.isSelected)}\"\n                        :aria-disabled=\"${() => String(cell.isDisabled)}\"\n                        :aria-current=\"${() => (cell.isToday ? 'date' : null)}\"\n                        ?data-selected=\"${() => cell.isSelected}\"\n                        ?data-today=\"${() => cell.isToday}\"\n                        ?data-outside=\"${() => cell.isOutsideMonth}\"\n                        ?data-disabled=\"${() => cell.isDisabled}\"\n                        data-iso=\"${cell.iso}\"\n                        tabindex=\"${() => (cell.isDisabled ? '-1' : '0')}\"\n                        @click=\"${() => handleSelectDay(cell.iso)}\"\n                        @keydown=\"${handleDayKeydown}\">\n                        ${String(cell.day)}\n                      </div>`,\n                  )}\n                </div>`,\n            );\n          }}\n        </div>\n\n        <!-- Month view -->\n        <div\n          class=\"cal-grid cal-grid-months\"\n          role=\"grid\"\n          :aria-label=\"${() => displayYear_.value}\"\n          ?hidden=\"${() => currentView.value !== 'month'}\">\n          ${() => {\n            const cells = monthCells.value;\n            const rows: (typeof cells)[number][][] = [];\n\n            for (let i = 0; i < cells.length; i += 4) rows.push(cells.slice(i, i + 4));\n\n            return rows.map(\n              (row) =>\n                html`<div role=\"row\">\n                  ${row.map(\n                    (cell) =>\n                      html`<div\n                        class=\"cal-cell cal-cell-month\"\n                        role=\"gridcell\"\n                        :aria-selected=\"${() => String(cell.isSelected)}\"\n                        :aria-disabled=\"${() => String(cell.isDisabled)}\"\n                        ?data-selected=\"${() => cell.isSelected}\"\n                        ?data-disabled=\"${() => cell.isDisabled}\"\n                        tabindex=\"${() => (cell.isDisabled ? '-1' : '0')}\"\n                        @click=\"${() => {\n                          if (!cell.isDisabled) handleSelectMonth(cell.month);\n                        }}\"\n                        @keydown=\"${(e: KeyboardEvent) =>\n                          handleGridKeydown(e, '.cal-cell-month', 4, () => {\n                            if (!cell.isDisabled) handleSelectMonth(cell.month);\n                          })}\">\n                        ${cell.shortLabel}\n                      </div>`,\n                  )}\n                </div>`,\n            );\n          }}\n        </div>\n\n        <!-- Year view -->\n        <div\n          class=\"cal-grid cal-grid-years\"\n          role=\"grid\"\n          aria-label=\"Select year\"\n          ?hidden=\"${() => currentView.value !== 'year'}\">\n          ${() => {\n            const cells = yearCells.value;\n            const rows: (typeof cells)[number][][] = [];\n\n            for (let i = 0; i < cells.length; i += 4) rows.push(cells.slice(i, i + 4));\n\n            return rows.map(\n              (row) =>\n                html`<div role=\"row\">\n                  ${row.map(\n                    (cell) =>\n                      html`<div\n                        class=\"cal-cell cal-cell-year\"\n                        role=\"gridcell\"\n                        :aria-selected=\"${() => String(cell.isSelected)}\"\n                        :aria-disabled=\"${() => String(cell.isDisabled)}\"\n                        ?data-selected=\"${() => cell.isSelected}\"\n                        ?data-disabled=\"${() => cell.isDisabled}\"\n                        tabindex=\"${() => (cell.isDisabled ? '-1' : '0')}\"\n                        @click=\"${() => {\n                          if (!cell.isDisabled) handleSelectYear(cell.year);\n                        }}\"\n                        @keydown=\"${(e: KeyboardEvent) =>\n                          handleGridKeydown(e, '.cal-cell-year', 4, () => {\n                            if (!cell.isDisabled) handleSelectYear(cell.year);\n                          })}\">\n                        ${String(cell.year)}\n                      </div>`,\n                  )}\n                </div>`,\n            );\n          }}\n        </div>\n      </div>\n    `;\n  },\n\n  shadow: { delegatesFocus: true },\n  styles: [colorThemeMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"date-picker.js","names":[],"sources":["../src/inputs/date-picker/date-picker.ts"],"sourcesContent":["import { define, html, prop, ref, bind, getHost, onMounted } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { Temporal, format } from '@vielzeug/tempo';\n\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../shared';\n\nimport {\n  createDatePickerControl,\n  createDropdownPositioner,\n  formatDisplayDate,\n  parseIso,\n  toIsoString,\n  type DatePickerView,\n} from '../../core';\nimport '../../content/icon/icon';\nimport '../input/input';\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\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      getReference: () => triggerRef.value ?? null,\n      matchWidth: false,\n      offsetPx: 4,\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, tz: 'UTC' });\n    });\n\n    const displayYear_ = computed(() => String(displayYear.value));\n    const displayLabel = computed(() => `${displayMonth_.value} ${displayYear_.value}`);\n\n    const dayCells = computed(() => {\n      void displayYear.value;\n      void displayMonth.value;\n      void selectedDate.value; // re-run when selection changes to refresh isSelected flags\n\n      return ctrl.dayCells();\n    });\n    const monthCells = computed(() => {\n      void displayYear.value;\n\n      return ctrl.monthCells();\n    });\n    const yearCells = computed(() => {\n      void displayYear.value;\n\n      return ctrl.yearCells();\n    });\n    const weekdayLabels = computed(() => ctrl.weekdayLabels());\n    const tabIndex = () => (isDisabled.value ? '-1' : '0');\n\n    // ── Navigation handlers ──────────────────────────────────────────────────\n    // In year/month views navigate by year; in day view navigate by month.\n\n    function handlePrev(): void {\n      if (currentView.value === 'day') ctrl.prevMonth();\n      else ctrl.prevYear();\n\n      displayYear.value = ctrl.displayYear();\n      displayMonth.value = ctrl.displayMonth();\n    }\n\n    function handleNext(): void {\n      if (currentView.value === 'day') ctrl.nextMonth();\n      else ctrl.nextYear();\n\n      displayYear.value = ctrl.displayYear();\n      displayMonth.value = ctrl.displayMonth();\n    }\n\n    function handleHeaderClick(): void {\n      const views: DatePickerView[] = ['day', 'month', 'year'];\n      const next = views[(views.indexOf(currentView.value) + 1) % views.length];\n\n      ctrl.setView(next);\n      currentView.value = next;\n    }\n\n    function handleSelectMonth(month: number): void {\n      ctrl.goTo(ctrl.displayYear(), month);\n      ctrl.setView('day');\n      displayYear.value = ctrl.displayYear();\n      displayMonth.value = ctrl.displayMonth();\n      currentView.value = 'day';\n    }\n\n    function handleSelectYear(year: number): void {\n      ctrl.goTo(year, ctrl.displayMonth());\n      ctrl.setView('month');\n      displayYear.value = ctrl.displayYear();\n      currentView.value = 'month';\n    }\n\n    function handleSelectDay(isoStr: string): void {\n      const date = parseIso(isoStr);\n\n      if (!date) return;\n\n      ctrl.select(date);\n    }\n\n    function handleDayKeydown(e: KeyboardEvent): void {\n      const cell = e.currentTarget as HTMLElement;\n      const grid = cell.closest('.cal-grid-days');\n\n      if (!grid) return;\n\n      const allCells = Array.from(grid.querySelectorAll<HTMLElement>('.cal-cell-day'));\n      const idx = allCells.indexOf(cell);\n\n      if (idx === -1) return;\n\n      let target: HTMLElement | undefined;\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        handleSelectDay(cell.dataset.iso ?? '');\n\n        return;\n      } else if (e.key === 'ArrowRight') {\n        target = allCells[idx + 1];\n      } else if (e.key === 'ArrowLeft') {\n        target = allCells[idx - 1];\n      } else if (e.key === 'ArrowDown') {\n        target = allCells[idx + 7];\n      } else if (e.key === 'ArrowUp') {\n        target = allCells[idx - 7];\n      } else if (e.key === 'Home') {\n        target = allCells[Math.floor(idx / 7) * 7];\n      } else if (e.key === 'End') {\n        target = allCells[Math.floor(idx / 7) * 7 + 6];\n      } else {\n        return;\n      }\n\n      e.preventDefault();\n      target?.focus();\n    }\n\n    // ── Month/year-cell keyboard navigation (fixed 4-column grid) ─────────────\n\n    function handleGridKeydown(e: KeyboardEvent, cellSelector: string, columns: number, onSelect: () => void): void {\n      const cell = e.currentTarget as HTMLElement;\n      const grid = cell.closest('.cal-grid');\n\n      if (!grid) return;\n\n      const allCells = Array.from(grid.querySelectorAll<HTMLElement>(cellSelector));\n      const idx = allCells.indexOf(cell);\n\n      if (idx === -1) return;\n\n      let target: HTMLElement | undefined;\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        onSelect();\n\n        return;\n      } else if (e.key === 'ArrowRight') {\n        target = allCells[idx + 1];\n      } else if (e.key === 'ArrowLeft') {\n        target = allCells[idx - 1];\n      } else if (e.key === 'ArrowDown') {\n        target = allCells[idx + columns];\n      } else if (e.key === 'ArrowUp') {\n        target = allCells[idx - columns];\n      } else if (e.key === 'Home') {\n        target = allCells[Math.floor(idx / columns) * columns];\n      } else if (e.key === 'End') {\n        target = allCells[Math.min(Math.floor(idx / columns) * columns + columns - 1, allCells.length - 1)];\n      } else {\n        return;\n      }\n\n      e.preventDefault();\n      target?.focus();\n    }\n\n    // ── Open / close ─────────────────────────────────────────────────────────\n\n    function openPicker(): void {\n      if (isDisabled.value) return;\n\n      isOpen.value = true;\n      ctrl.setView('day');\n      currentView.value = 'day';\n\n      const sel = selectedDate.value;\n\n      if (sel) {\n        ctrl.goTo(sel.year, sel.month);\n        displayYear.value = ctrl.displayYear();\n        displayMonth.value = ctrl.displayMonth();\n      }\n\n      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                          handleGridKeydown(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                          handleGridKeydown(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

@@ -1,7 +1,7 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./overlay/shared/use-dialog.cjs"),r=require("./overlay/dialog/dialog.css.cjs");let i=require("@vielzeug/ore");var a=`ore-dialog`;(0,i.define)(a,{props:{backdrop:i.prop.string(),dismissible:i.prop.bool(!1),elevation:i.prop.string(),"initial-focus":i.prop.string(),label:i.prop.string(),open:i.prop.bool(!1),padding:i.prop.string(),persistent:i.prop.bool(!1),"return-focus":i.prop.bool(!0),rounded:i.prop.string(),size:i.prop.oneOf([`sm`,`md`,`lg`,`xl`,`full`],`md`)},setup(e){let t=(0,i.getHost)(),r=(0,i.useEmit)(),a=(0,i.useSlots)(),o=(0,i.ref)(),s=()=>a.has(`header`).value||!!e.label.value||e.dismissible.value,c=()=>a.has(`footer`).value,{closeWithAnimation:l,overlay:u,requestClose:d,setupNativeListeners:f}=n.useDialogControl({dialogRef:o,getPanelEl:()=>o.value?.querySelector(`.panel`),host:t,initialFocus:e[`initial-focus`],isPersistent:()=>!!e.persistent.value,onCleanup:i.onCleanup,onEvent:i.onEvent,onNativeClose:e=>r(`close`,{reason:e}),onOpen:e=>r(`open`,{reason:e}),openProp:e.open,performClose:()=>{l()},returnFocus:e[`return-focus`]});return(0,i.onMounted)(()=>{if(o.value)return f(),()=>{u.dispose()}}),i.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./overlay/shared/use-dialog.cjs"),r=require("./overlay/dialog/dialog.css.cjs");let i=require("@vielzeug/ore");var a=e=>e==null?void 0:e===``||e===`true`,o=`ore-dialog`;(0,i.define)(o,{props:{backdrop:i.prop.string(),"default-open":i.prop.bool(!1),dismissible:i.prop.bool(!1),elevation:i.prop.string(),"initial-focus":i.prop.string(),label:i.prop.string(),open:{default:void 0,parse:a},padding:i.prop.string(),persistent:i.prop.bool(!1),"return-focus":i.prop.bool(!0),rounded:i.prop.string(),size:i.prop.oneOf([`sm`,`md`,`lg`,`xl`,`full`],`md`)},setup(e){let t=(0,i.getHost)(),r=(0,i.useEmit)(),a=(0,i.useSlots)(),o=(0,i.ref)(),s=()=>a.has(`header`).value||!!e.label.value||e.dismissible.value,c=()=>a.has(`footer`).value,{closeWithAnimation:l,overlay:u,requestClose:d,setupNativeListeners:f}=n.useDialogControl({defaultOpen:e[`default-open`],dialogRef:o,getPanelEl:()=>o.value?.querySelector(`.panel`),host:t,initialFocus:e[`initial-focus`],isPersistent:()=>!!e.persistent.value,onCleanup:i.onCleanup,onEvent:i.onEvent,onNativeClose:e=>r(`open-change`,{open:!1,reason:e}),onOpen:e=>r(`open-change`,{open:!0,reason:e}),openProp:e.open,performClose:()=>{l()},returnFocus:e[`return-focus`]});return(0,i.onMounted)(()=>{if(o.value)return f(),()=>{u.dispose()}}),i.html`
       <dialog ref=${o} class="dialog" part="dialog" aria-label="${e.label}" aria-modal="true">
         <div class="overlay" part="overlay" aria-hidden="true"></div>
-        <div class="panel" part="panel" :data-size="${e.size}">
+        <div class="panel" part="panel" data-size="${e.size}">
           <div class="header" part="header" ?hidden=${()=>!s()}>
             <slot name="header">
               <span class="title" part="title">${e.label}</span>
@@ -24,5 +24,5 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           </div>
         </div>
       </dialog>
-    `},styles:[t.roundedVariantMixin,e.coarsePointerMixin,r.default]}),exports.DIALOG_TAG=a;
+    `},styles:[t.roundedVariantMixin,e.coarsePointerMixin,r.default]}),exports.DIALOG_TAG=o;
 //# sourceMappingURL=dialog.cjs.map

package/dist/dialog.cjs.map

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

package/dist/dialog.js

@@ -4,15 +4,19 @@ import { useDialogControl as n } from "./overlay/shared/use-dialog.js";
 import r from "./overlay/dialog/dialog.css.js";
 import { define as i, getHost as a, html as o, onCleanup as s, onEvent as c, onMounted as l, prop as u, ref as d, useEmit as f, useSlots as p } from "@vielzeug/ore";
 //#region src/overlay/dialog/dialog.ts
-var m = "ore-dialog";
-i(m, {
+var m = (e) => e == null ? void 0 : e === "" || e === "true", h = "ore-dialog";
+i(h, {
 	props: {
 		backdrop: u.string(),
+		"default-open": u.bool(!1),
 		dismissible: u.bool(!1),
 		elevation: u.string(),
 		"initial-focus": u.string(),
 		label: u.string(),
-		open: u.bool(!1),
+		open: {
+			default: void 0,
+			parse: m
+		},
 		padding: u.string(),
 		persistent: u.bool(!1),
 		"return-focus": u.bool(!0),
@@ -27,6 +31,7 @@ i(m, {
 	},
 	setup(e) {
 		let t = a(), r = f(), i = p(), u = d(), m = () => i.has("header").value || !!e.label.value || e.dismissible.value, h = () => i.has("footer").value, { closeWithAnimation: g, overlay: _, requestClose: v, setupNativeListeners: y } = n({
+			defaultOpen: e["default-open"],
 			dialogRef: u,
 			getPanelEl: () => u.value?.querySelector(".panel"),
 			host: t,
@@ -34,8 +39,14 @@ i(m, {
 			isPersistent: () => !!e.persistent.value,
 			onCleanup: s,
 			onEvent: c,
-			onNativeClose: (e) => r("close", { reason: e }),
-			onOpen: (e) => r("open", { reason: e }),
+			onNativeClose: (e) => r("open-change", {
+				open: !1,
+				reason: e
+			}),
+			onOpen: (e) => r("open-change", {
+				open: !0,
+				reason: e
+			}),
 			openProp: e.open,
 			performClose: () => {
 				g();
@@ -49,7 +60,7 @@ i(m, {
 		}), o`
       <dialog ref=${u} class="dialog" part="dialog" aria-label="${e.label}" aria-modal="true">
         <div class="overlay" part="overlay" aria-hidden="true"></div>
-        <div class="panel" part="panel" :data-size="${e.size}">
+        <div class="panel" part="panel" data-size="${e.size}">
           <div class="header" part="header" ?hidden=${() => !m()}>
             <slot name="header">
               <span class="title" part="title">${e.label}</span>
@@ -83,6 +94,6 @@ i(m, {
 	]
 });
 //#endregion
-export { m as DIALOG_TAG };
+export { h as DIALOG_TAG };
 
 //# sourceMappingURL=dialog.js.map

package/dist/dialog.js.map

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

package/dist/disclosure/tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/disclosure/tabs/tabs.ts"],"names":[],"mappings":"AAaA,OAAO,EAAY,KAAK,QAAQ,EAAiB,MAAM,kBAAkB,CAAC;AAE1E,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAO7E,mFAAmF;AACnF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,QAAQ,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IACxC,WAAW,EAAE,QAAQ,CAAC,YAAY,GAAG,UAAU,CAAC,CAAC;IACjD,IAAI,EAAE,QAAQ,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAC1C,KAAK,EAAE,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACpC,OAAO,EAAE,QAAQ,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC;CAC/C,CAAC;AACF,0CAA0C;AAC1C,eAAO,MAAM,QAAQ,mDAA4C,CAAC;AAElE,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC/B,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,wHAAwH;IACxH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,QAAQ,EAAG,UAAmB,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/disclosure/tabs/tabs.ts"],"names":[],"mappings":"AAaA,OAAO,EAAY,KAAK,QAAQ,EAAU,MAAM,kBAAkB,CAAC;AAGnE,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAO7E,mFAAmF;AACnF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,QAAQ,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IACxC,WAAW,EAAE,QAAQ,CAAC,YAAY,GAAG,UAAU,CAAC,CAAC;IACjD,IAAI,EAAE,QAAQ,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAC1C,KAAK,EAAE,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACpC,OAAO,EAAE,QAAQ,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC;CAC/C,CAAC;AACF,0CAA0C;AAC1C,eAAO,MAAM,QAAQ,mDAA4C,CAAC;AAElE,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC/B,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,wHAAwH;IACxH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,QAAQ,EAAG,UAAmB,CAAC"}

package/dist/drawer.cjs

@@ -1,9 +1,9 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/theme.css.cjs"),n=require("./headless/swipe.cjs"),r=require("./overlay/shared/use-dialog.cjs"),i=require("./overlay/drawer/drawer.css.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple");var s={bottom:{axis:`y`,closingDistance:e=>Math.max(0,e),translate:e=>`translateY(${e}px)`},left:{axis:`x`,closingDistance:e=>Math.max(0,-e),translate:e=>`translateX(${e}px)`},right:{axis:`x`,closingDistance:e=>Math.max(0,e),translate:e=>`translateX(${e}px)`},top:{axis:`y`,closingDistance:e=>Math.max(0,-e),translate:e=>`translateY(${e}px)`}},c=`ore-drawer`;(0,a.define)(c,{props:{backdrop:a.prop.string(),dismissible:a.prop.bool(!0),"drag-handle-placement":a.prop.oneOf([`outside`,`inset`],`outside`),"initial-focus":a.prop.string(),label:a.prop.string(),open:a.prop.bool(!1),persistent:a.prop.bool(!1),placement:a.prop.oneOf([`left`,`right`,`top`,`bottom`],`right`),"return-focus":a.prop.bool(!0),size:a.prop.string(),title:a.prop.string()},setup(e){let t=(0,a.getHost)(),i=(0,a.useEmit)(),c=(0,a.useSlots)(),l=(0,a.createStableId)(`drawer-label`),u=(0,a.ref)(),d=(0,a.ref)(),f=(0,o.signal)(!1),p,m=()=>e.label.value??e.title.value??``,h=()=>c.has(`header`).value||!!m(),g=()=>h()||e.dismissible.value,_=()=>c.has(`footer`).value,v=()=>e.placement.value||`right`,y=()=>s[v()],b=(e,t)=>{let n=t===`x`?e.offsetWidth:e.offsetHeight;return Math.min(96,Math.max(36,n*.18))},x=(e,t)=>y().closingDistance(e)>=t,S=e=>{if(!f.value)return;p&&=(clearTimeout(p),void 0);let t=u.value;if(!t){f.value=!1;return}t.style.transition=`none`,e.style.opacity=`0`,e.style.visibility=`hidden`,t.offsetWidth,A(`swipe`)},C=(e,t,n)=>{if(f.value)return;f.value=!0;let r=t.axis===`x`?e.offsetWidth:e.offsetHeight,i=n>=0?Math.max(n,r):Math.min(n,-r),a=t.translate(i);e.style.transition=`transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 180ms ease-out`,e.offsetWidth;let o=t=>{t.target!==e||t.propertyName!==`transform`||(e.removeEventListener(`transitionend`,o),S(e))};e.addEventListener(`transitionend`,o);let s=parseFloat(getComputedStyle(e).transitionDuration)*1e3;p=setTimeout(()=>{e.removeEventListener(`transitionend`,o),S(e)},s+50),e.style.transform=a,e.style.opacity=`0.2`},w=e=>{p&&=(clearTimeout(p),void 0),e.style.transition=``,e.style.transform=``,e.style.opacity=``,e.style.visibility=``,f.value=!1},T=({distance:e,threshold:t})=>{let n=d.value;if(n){if(x(e,t)){C(n,y(),e);return}w(n)}},E=n.createSwipeControl({axis:()=>y().axis,disabled:f,onCancel:T,onCommit:({distance:e})=>{let t=d.value;t&&C(t,y(),e)},onMove:({distance:e,threshold:t})=>{let n=d.value;if(!n)return;let r=y(),i=r.closingDistance(e),a=Math.min(i/t,1);n.style.transition=`none`,n.style.transform=r.translate(e),n.style.opacity=String(1-a*.4)},onRelease:T,shouldCommit:({distance:e,threshold:t})=>x(e,t),threshold:()=>{let e=d.value;return e?b(e,y().axis):48}}),{closeWithAnimation:D,handleCancel:O,overlay:k,requestClose:A,watchOpenProp:j}=r.useDialogControl({beforeOpen:e=>{let t=d.value;t&&w(t)},closeRequestDetail:t=>({placement:e.placement.value??`right`}),dialogRef:u,getPanelEl:()=>d.value,host:t,initialFocus:e[`initial-focus`],isPersistent:()=>!!e.persistent.value,onCleanup:a.onCleanup,onEvent:a.onEvent,onNativeClose:t=>{let n=d.value;n&&t!==`swipe`&&w(n);let r=u.value;r&&(r.style.transition=``),i(`close`,{placement:e.placement.value??`right`,reason:t})},onOpen:t=>i(`open`,{placement:e.placement.value??`right`,reason:t}),openProp:e.open,performClose:(e,t)=>{t===`swipe`?e.close():D()},returnFocus:e[`return-focus`]});return(0,a.onMounted)(()=>{let n=u.value;if(!n)return;let r=t;r.show=()=>{k.open(`programmatic`)},r.hide=()=>{k.close(`programmatic`,!1)},j(),(0,a.onEvent)(n,`cancel`,O),(0,a.onEvent)(n,`click`,t=>{e.persistent.value||E.isActive()||f.value||t.target===n&&A(`outsideClick`)});let i=d.value?.querySelector(`[part="drag-handle"]`);return i&&((0,a.onEvent)(i,`pointerdown`,E.handlePointerDown),(0,a.onEvent)(i,`pointermove`,E.handlePointerMove),(0,a.onEvent)(i,`pointerup`,E.handlePointerUp),(0,a.onEvent)(i,`pointercancel`,E.handlePointerCancel)),()=>{k.dispose()}}),a.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./core/swipe.cjs"),t=require("./styles/mixins/accessibility.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./overlay/shared/use-dialog.cjs"),i=require("./overlay/drawer/drawer.css.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple");var s=e=>e==null?void 0:e===``||e===`true`,c={bottom:{axis:`y`,closingDistance:e=>Math.max(0,e),translate:e=>`translateY(${e}px)`},left:{axis:`x`,closingDistance:e=>Math.max(0,-e),translate:e=>`translateX(${e}px)`},right:{axis:`x`,closingDistance:e=>Math.max(0,e),translate:e=>`translateX(${e}px)`},top:{axis:`y`,closingDistance:e=>Math.max(0,-e),translate:e=>`translateY(${e}px)`}},l=`ore-drawer`;(0,a.define)(l,{props:{backdrop:a.prop.string(),"default-open":a.prop.bool(!1),dismissible:a.prop.bool(!0),"drag-handle-placement":a.prop.oneOf([`outside`,`inset`],`outside`),"initial-focus":a.prop.string(),label:a.prop.string(),open:{default:void 0,parse:s},persistent:a.prop.bool(!1),placement:a.prop.oneOf([`left`,`right`,`top`,`bottom`],`right`),"return-focus":a.prop.bool(!0),size:a.prop.string(),title:a.prop.string()},setup(t){let n=(0,a.getHost)(),i=(0,a.useEmit)(),s=(0,a.useSlots)(),l=(0,a.createStableId)(`drawer-label`),u=(0,a.ref)(),d=(0,a.ref)(),f=(0,o.signal)(!1),p,m=()=>t.label.value??t.title.value??``,h=()=>s.has(`header`).value||!!m(),g=()=>h()||t.dismissible.value,_=()=>s.has(`footer`).value,v=()=>t.placement.value||`right`,y=()=>c[v()],b=(e,t)=>{let n=t===`x`?e.offsetWidth:e.offsetHeight;return Math.min(96,Math.max(36,n*.18))},x=(e,t)=>y().closingDistance(e)>=t,S=e=>{if(!f.value)return;p&&=(clearTimeout(p),void 0);let t=u.value;if(!t){f.value=!1;return}t.style.transition=`none`,e.style.opacity=`0`,e.style.visibility=`hidden`,t.offsetWidth,A(`swipe`)},C=(e,t,n)=>{if(f.value)return;f.value=!0;let r=t.axis===`x`?e.offsetWidth:e.offsetHeight,i=n>=0?Math.max(n,r):Math.min(n,-r),a=t.translate(i);e.style.transition=`transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 180ms ease-out`,e.offsetWidth;let o=t=>{t.target===e&&t.propertyName===`transform`&&(e.removeEventListener(`transitionend`,o),S(e))};e.addEventListener(`transitionend`,o);let s=parseFloat(getComputedStyle(e).transitionDuration)*1e3;p=setTimeout(()=>{e.removeEventListener(`transitionend`,o),S(e)},s+50),e.style.transform=a,e.style.opacity=`0.2`},w=e=>{p&&=(clearTimeout(p),void 0),e.style.transition=``,e.style.transform=``,e.style.opacity=``,e.style.visibility=``,f.value=!1},T=({distance:e,threshold:t})=>{let n=d.value;if(n){if(x(e,t)){C(n,y(),e);return}w(n)}},E=e.createSwipeControl({axis:()=>y().axis,disabled:f,onCancel:T,onCommit:({distance:e})=>{let t=d.value;t&&C(t,y(),e)},onMove:({distance:e,threshold:t})=>{let n=d.value;if(!n)return;let r=y(),i=r.closingDistance(e),a=Math.min(i/t,1);n.style.transition=`none`,n.style.transform=r.translate(e),n.style.opacity=String(1-a*.4)},onRelease:T,shouldCommit:({distance:e,threshold:t})=>x(e,t),threshold:()=>{let e=d.value;return e?b(e,y().axis):48}}),{closeWithAnimation:D,handleCancel:O,overlay:k,requestClose:A,watchOpenProp:j}=r.useDialogControl({beforeOpen:e=>{let t=d.value;t&&w(t)},closeRequestDetail:e=>({placement:t.placement.value??`right`}),defaultOpen:t[`default-open`],dialogRef:u,getPanelEl:()=>d.value,host:n,initialFocus:t[`initial-focus`],isPersistent:()=>!!t.persistent.value,onCleanup:a.onCleanup,onEvent:a.onEvent,onNativeClose:e=>{let t=d.value;t&&e!==`swipe`&&w(t);let n=u.value;n&&(n.style.transition=``),i(`open-change`,{open:!1,reason:e})},onOpen:e=>i(`open-change`,{open:!0,reason:e}),openProp:t.open,performClose:(e,t)=>{t===`swipe`?e.close():D()},returnFocus:t[`return-focus`]});return(0,a.onMounted)(()=>{let e=u.value;if(!e)return;let r=n;r.show=()=>{k.open(`programmatic`)},r.hide=()=>{k.close(`programmatic`)},j(),(0,a.onEvent)(e,`cancel`,O),(0,a.onEvent)(e,`click`,n=>{t.persistent.value||E.isActive()||f.value||n.target===e&&A(`outsideClick`)});let i=d.value?.querySelector(`[part="drag-handle"]`);return i&&((0,a.onEvent)(i,`pointerdown`,E.handlePointerDown),(0,a.onEvent)(i,`pointermove`,E.handlePointerMove),(0,a.onEvent)(i,`pointerup`,E.handlePointerUp),(0,a.onEvent)(i,`pointercancel`,E.handlePointerCancel)),()=>{k.dispose()}}),a.html`
       <dialog
         ref=${u}
         aria-modal="true"
-        :aria-label="${()=>e.label.value??null}"
-        :aria-labelledby="${()=>e.label.value?null:l}">
+        aria-label="${()=>t.label.value??null}"
+        aria-labelledby="${()=>t.label.value?null:l}">
         <div class="panel" part="panel" ref=${d}>
           <div class="drag-handle" part="drag-handle" aria-label="Drag to close" role="button"></div>
           <div class="header" part="header" ?hidden=${()=>!g()}>
@@ -15,7 +15,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               part="close-btn"
               type="button"
               aria-label="Close"
-              ?hidden=${()=>!e.dismissible.value}
+              ?hidden=${()=>!t.dismissible.value}
               @click=${()=>{A(`trigger`)}}>
               <ore-icon name="x" size="16" stroke-width="2.5" aria-hidden="true"></ore-icon>
             </button>
@@ -28,5 +28,5 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           </div>
         </div>
       </dialog>
-    `},styles:[t.forcedColorsMixin,e.coarsePointerMixin,e.reducedMotionMixin,i.default]}),exports.DRAWER_TAG=c;
+    `},styles:[n.forcedColorsMixin,t.coarsePointerMixin,t.reducedMotionMixin,i.default]}),exports.DRAWER_TAG=l;
 //# sourceMappingURL=drawer.cjs.map

package/dist/drawer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.cjs","names":[],"sources":["../src/overlay/drawer/drawer.ts"],"sourcesContent":["import {\n  createStableId,\n  define,\n  html,\n  prop,\n  ref,\n  getHost,\n  onCleanup,\n  onEvent,\n  onMounted,\n  useEmit,\n  useSlots,\n} from '@vielzeug/ore';\nimport { signal } from '@vielzeug/ripple';\n\nimport type { OverlayCloseDetail, OverlayOpenDetail, SwipeAxis } from '../../headless';\n\nimport { createSwipeControl } from '../../headless';\nimport '../../content/icon/icon';\nimport { coarsePointerMixin, forcedColorsMixin, reducedMotionMixin } from '../../styles';\nimport { useDialogControl } from '../shared/use-dialog';\nimport styles from './drawer.css?inline';\n\ntype DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';\ntype DrawerSize = 'sm' | 'lg' | 'full';\ntype DrawerBackdrop = 'opaque' | 'blur' | 'transparent';\ntype DrawerDragHandlePlacement = 'outside' | 'inset';\ntype DrawerSwipeConfig = {\n  axis: SwipeAxis;\n  closingDistance: (distance: number) => number;\n  translate: (distance: number) => string;\n};\n\nconst drawerSwipeConfig: Record<DrawerPlacement, DrawerSwipeConfig> = {\n  bottom: {\n    axis: 'y',\n    closingDistance: (distance) => Math.max(0, distance),\n    translate: (distance) => `translateY(${distance}px)`,\n  },\n  left: {\n    axis: 'x',\n    closingDistance: (distance) => Math.max(0, -distance),\n    translate: (distance) => `translateX(${distance}px)`,\n  },\n  right: {\n    axis: 'x',\n    closingDistance: (distance) => Math.max(0, distance),\n    translate: (distance) => `translateX(${distance}px)`,\n  },\n  top: {\n    axis: 'y',\n    closingDistance: (distance) => Math.max(0, -distance),\n    translate: (distance) => `translateY(${distance}px)`,\n  },\n};\n\n/** Element interface exposing the imperative API for `ore-drawer`. */\nexport interface DrawerElement extends HTMLElement, Omit<OreDrawerProps, 'title'> {\n  /** Programmatically open the drawer. Equivalent to setting `open`. */\n  show(): void;\n  /** Programmatically close the drawer with the exit animation. */\n  hide(): void;\n}\n\n/** Drawer component properties */\n\nexport type OreDrawerEvents = {\n  close: OverlayCloseDetail & { placement: DrawerPlacement };\n  open: OverlayOpenDetail & { placement: DrawerPlacement };\n};\n\nexport type OreDrawerProps = {\n  /** Backdrop style — 'opaque' (default), 'blur', or 'transparent' */\n  backdrop?: DrawerBackdrop;\n  /** Show the close (×) button in the header (default: true) */\n  dismissible?: boolean;\n  /** Drag handle position used for swipe-to-close gestures */\n  'drag-handle-placement'?: DrawerDragHandlePlacement;\n  /**\n   * CSS selector for the element inside the drawer that should receive focus on open.\n   * Defaults to native dialog focus management (first focusable element).\n   * @example '#submit-btn' | 'input[name=\"email\"]'\n   */\n  'initial-focus'?: string;\n  /**\n   * Invisible accessible label for the dialog (`aria-label`).\n   * Use when the drawer has no visible title (e.g. image-only content).\n   * When omitted, `aria-labelledby` points to the visible header title instead.\n   */\n  label?: string;\n  /** Controlled open state */\n  open?: boolean;\n  /** When true, backdrop clicks do not close the drawer (default: false) */\n  persistent?: boolean;\n  /** Side from which the drawer slides in */\n  placement?: DrawerPlacement;\n  /**\n   * When true (default), focus returns to the triggering element after the drawer closes.\n   * Set to false to manage focus manually.\n   */\n  'return-focus'?: boolean;\n  /** Drawer width/height preset */\n  size?: DrawerSize;\n  /**\n   * Visible title text rendered inside the header.\n   * Used as the dialog's accessible label via `aria-labelledby` when `label` is not set.\n   */\n  title?: string;\n};\n\n/**\n * A panel that slides in from any edge of the screen, built on the native `<dialog>` element.\n *\n * @element ore-drawer\n *\n * @attr {boolean} open - Controlled open/close state\n * @attr {string} placement - 'left' | 'right' (default) | 'top' | 'bottom'\n * @attr {string} size - 'sm' | 'lg' | 'full'\n * @attr {string} title - Visible header title text\n * @attr {string} label - Invisible aria-label (for drawers without a visible title)\n * @attr {boolean} dismissible - Show the close (×) button (default: true)\n * @attr {string} drag-handle-placement - 'outside' (default) | 'inset'\n * @attr {string} backdrop - Backdrop style: 'opaque' (default) | 'blur' | 'transparent'\n * @attr {boolean} persistent - Prevent backdrop-click from closing (default: false)\n *\n * @fires open - When the drawer opens with detail: { placement, reason }\n * @fires close - When the drawer closes with detail: { placement, reason }\n *\n * @slot header - Drawer header content\n * @slot - Main body content\n * @slot footer - Drawer footer content\n *\n * @cssprop --drawer-backdrop-bg - Backdrop background color\n * @cssprop --drawer-bg - Panel background color\n * @cssprop --drawer-size - Panel width (horizontal) or height (vertical)\n * @cssprop --drawer-shadow - Panel box-shadow\n * @cssprop --drawer-panel-blur - Panel backdrop blur amount\n *\n * @part drag-handle - Drawer drag handle.\n * @part panel - Panel container.\n * @part header - Header container.\n * @part close-btn - Close button.\n * @part body - Body content container.\n * @part footer - Footer container.\n * @example\n * ```html\n * <!-- With visible title -->\n * <ore-drawer open title=\"Settings\" placement=\"right\">\n *   <p>Settings content here.</p>\n * </ore-drawer>\n *\n * <!-- With custom header slot -->\n * <ore-drawer open placement=\"right\">\n *   <span slot=\"header\">Settings</span>\n *   <p>Settings content here.</p>\n * </ore-drawer>\n * ```\n */\n\nexport const DRAWER_TAG = 'ore-drawer' as const;\ndefine<OreDrawerProps>(DRAWER_TAG, {\n  props: {\n    backdrop: prop.string<DrawerBackdrop>(),\n    dismissible: prop.bool(true),\n    'drag-handle-placement': prop.oneOf(['outside', 'inset'] as const, 'outside'),\n    'initial-focus': prop.string(),\n    label: prop.string(),\n    open: prop.bool(false),\n    persistent: prop.bool(false),\n    placement: prop.oneOf(['left', 'right', 'top', 'bottom'] as const, 'right'),\n    'return-focus': prop.bool(true),\n    size: prop.string<DrawerSize>(),\n    title: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreDrawerEvents>();\n    const slots = useSlots();\n\n    const drawerLabelId = createStableId('drawer-label');\n    const dialogRef = ref<HTMLDialogElement>();\n    const panelRef = ref<HTMLDivElement>();\n\n    // Drag-to-close state\n    const isSwipeClosing = signal(false);\n    let swipeCloseTimer: ReturnType<typeof setTimeout> | undefined;\n\n    const getHeaderText = () => props.label.value ?? props.title.value ?? '';\n    const hasHeaderTitle = () => slots.has('header').value || !!getHeaderText();\n\n    // Header is visible when there is slot content, a text label, or a close button.\n    const hasHeader = () => hasHeaderTitle() || props.dismissible.value;\n    const hasFooter = () => slots.has('footer').value;\n\n    const getPlacement = (): DrawerPlacement => props.placement.value || 'right';\n\n    const getSwipeConfig = (): DrawerSwipeConfig => drawerSwipeConfig[getPlacement()];\n\n    const getSnapThreshold = (panel: HTMLElement, axis: SwipeAxis) => {\n      const panelSize = axis === 'x' ? panel.offsetWidth : panel.offsetHeight;\n\n      return Math.min(96, Math.max(36, panelSize * 0.18));\n    };\n\n    const shouldCommitSwipeClose = (distance: number, threshold: number) => {\n      return getSwipeConfig().closingDistance(distance) >= threshold;\n    };\n\n    const finalizeSwipeClose = (panel: HTMLElement) => {\n      if (!isSwipeClosing.value) return;\n\n      if (swipeCloseTimer) {\n        clearTimeout(swipeCloseTimer);\n        swipeCloseTimer = undefined;\n      }\n\n      const dialog = dialogRef.value;\n\n      if (!dialog) {\n        isSwipeClosing.value = false;\n\n        return;\n      }\n\n      dialog.style.transition = 'none';\n      panel.style.opacity = '0';\n      panel.style.visibility = 'hidden';\n      void dialog.offsetWidth;\n\n      requestClose('swipe');\n    };\n\n    const startSwipeClose = (panel: HTMLElement, swipe: DrawerSwipeConfig, committedDistance: number) => {\n      if (isSwipeClosing.value) return;\n\n      isSwipeClosing.value = true;\n\n      const panelSize = swipe.axis === 'x' ? panel.offsetWidth : panel.offsetHeight;\n      // Preserve overshoot so closing continues from the dragged position instead of snapping back.\n      const exitDistance =\n        committedDistance >= 0 ? Math.max(committedDistance, panelSize) : Math.min(committedDistance, -panelSize);\n      const exitTransform = swipe.translate(exitDistance);\n\n      // Commit the current drag position first so the magnetic snap continues\n      // from the finger instead of jumping back to rest.\n      panel.style.transition = 'transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 180ms ease-out';\n      void panel.offsetWidth;\n\n      const onExitTransitionEnd = (ev: TransitionEvent) => {\n        if (ev.target !== panel || ev.propertyName !== 'transform') return;\n\n        panel.removeEventListener('transitionend', onExitTransitionEnd);\n        finalizeSwipeClose(panel);\n      };\n\n      panel.addEventListener('transitionend', onExitTransitionEnd);\n\n      const durationMs = parseFloat(getComputedStyle(panel).transitionDuration) * 1000;\n\n      swipeCloseTimer = setTimeout(() => {\n        panel.removeEventListener('transitionend', onExitTransitionEnd);\n        finalizeSwipeClose(panel);\n      }, durationMs + 50);\n\n      panel.style.transform = exitTransform;\n      panel.style.opacity = '0.2';\n    };\n\n    const resetPanelDragStyles = (panel: HTMLElement) => {\n      if (swipeCloseTimer) {\n        clearTimeout(swipeCloseTimer);\n        swipeCloseTimer = undefined;\n      }\n\n      // Re-enable transitions so the snap-back or exit animates.\n      panel.style.transition = '';\n      panel.style.transform = '';\n      panel.style.opacity = '';\n      panel.style.visibility = '';\n      isSwipeClosing.value = false;\n    };\n\n    // Same \"snap back or commit close\" decision whether the swipe was\n    // interrupted by the platform (onCancel) or simply released without an\n    // intervening move event crossing the threshold (onRelease).\n    const handleSwipeRelease = ({ distance, threshold }: { distance: number; threshold: number }): void => {\n      const panel = panelRef.value;\n\n      if (!panel) return;\n\n      // If the release event crosses the threshold (without an intervening\n      // move event), commit close instead of snapping back to rest first.\n      if (shouldCommitSwipeClose(distance, threshold)) {\n        startSwipeClose(panel, getSwipeConfig(), distance);\n\n        return;\n      }\n\n      resetPanelDragStyles(panel);\n    };\n\n    const swipe = createSwipeControl({\n      axis: () => getSwipeConfig().axis,\n      disabled: isSwipeClosing,\n      onCancel: handleSwipeRelease,\n      onCommit: ({ distance }) => {\n        const panel = panelRef.value;\n\n        if (!panel) return;\n\n        startSwipeClose(panel, getSwipeConfig(), distance);\n      },\n      onMove: ({ distance, threshold }) => {\n        const panel = panelRef.value;\n\n        if (!panel) return;\n\n        const swipeConfig = getSwipeConfig();\n        const closingDistance = swipeConfig.closingDistance(distance);\n        const progress = Math.min(closingDistance / threshold, 1);\n\n        // Kill CSS transitions so the panel tracks the finger instantly.\n        panel.style.transition = 'none';\n        panel.style.transform = swipeConfig.translate(distance);\n        panel.style.opacity = String(1 - progress * 0.4);\n      },\n      onRelease: handleSwipeRelease,\n      shouldCommit: ({ distance, threshold }) => shouldCommitSwipeClose(distance, threshold),\n      threshold: () => {\n        const panel = panelRef.value;\n\n        if (!panel) return 48;\n\n        return getSnapThreshold(panel, getSwipeConfig().axis);\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Overlay State Management\n    // ────────────────────────────────────────────────────────────────\n\n    const { closeWithAnimation, handleCancel, overlay, requestClose, watchOpenProp } = useDialogControl({\n      beforeOpen: (dialog) => {\n        // Clear any inline drag styles from a previous swipe-close so the CSS\n        // entry animation starts from the correct base state.\n        const panel = panelRef.value;\n\n        if (panel) resetPanelDragStyles(panel);\n\n        void dialog;\n      },\n      closeRequestDetail: (_reason) => ({ placement: props.placement.value ?? 'right' }),\n      dialogRef,\n      getPanelEl: () => panelRef.value,\n      host: el,\n      initialFocus: props['initial-focus'],\n      isPersistent: () => Boolean(props.persistent.value),\n      onCleanup,\n      onEvent,\n      onNativeClose: (reason) => {\n        const panelEl = panelRef.value;\n\n        // For swipe-close, keep the panel hidden and off-screen until the next\n        // open cycle — resetting inline styles during native close can produce\n        // a visible frame at the rest position on some browsers.\n        if (panelEl && reason !== 'swipe') resetPanelDragStyles(panelEl);\n\n        const dialog = dialogRef.value;\n\n        if (dialog) dialog.style.transition = '';\n\n        emit('close', { placement: props.placement.value ?? 'right', reason });\n      },\n      onOpen: (reason) => emit('open', { placement: props.placement.value ?? 'right', reason }),\n      openProp: props.open,\n      performClose: (dialog, reason) => {\n        if (reason === 'swipe') {\n          dialog.close();\n        } else {\n          closeWithAnimation();\n        }\n      },\n      returnFocus: props['return-focus'],\n    });\n\n    const handleCloseButtonClick = () => {\n      requestClose('trigger');\n    };\n\n    // ────────────────────────────────────────────────────────────────\n    // Lifecycle: Setup Drawer Integration\n    // ────────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      const dialog = dialogRef.value;\n\n      if (!dialog) return;\n\n      // Expose imperative API\n      const drawerEl = el as DrawerElement;\n\n      drawerEl.show = () => {\n        overlay.open('programmatic');\n      };\n\n      drawerEl.hide = () => {\n        overlay.close('programmatic', false);\n      };\n\n      // ────────────────────────────────────────────────────────────\n      // Event Handlers: Cancel, Backdrop Click\n      // ────────────────────────────────────────────────────────────\n      // `handleCancel` (Escape via the native `cancel` event) is provided by\n      // `useDialogControl` above — drawer only needs its own backdrop-click\n      // handler since it has swipe-to-dismiss logic the shared dialog helper\n      // doesn't know about.\n\n      const handleBackdropClick = (e: MouseEvent) => {\n        if (props.persistent.value) return;\n\n        if (swipe.isActive() || isSwipeClosing.value) return;\n\n        if (e.target !== dialog) return; // Click inside panel\n\n        requestClose('outsideClick');\n      };\n\n      watchOpenProp();\n\n      onEvent(dialog, 'cancel', handleCancel);\n      onEvent(dialog, 'click', handleBackdropClick);\n\n      // Drag-to-close handlers — scoped to the handle element only so interactions\n      // with panel content don't accidentally start a drag.\n      const panel = panelRef.value;\n      const dragHandleEl = panel?.querySelector<HTMLElement>('[part=\"drag-handle\"]');\n\n      if (dragHandleEl) {\n        onEvent(dragHandleEl, 'pointerdown', swipe.handlePointerDown);\n        onEvent(dragHandleEl, 'pointermove', swipe.handlePointerMove);\n        onEvent(dragHandleEl, 'pointerup', swipe.handlePointerUp);\n        onEvent(dragHandleEl, 'pointercancel', swipe.handlePointerCancel);\n      }\n\n      return () => {\n        overlay.dispose();\n      };\n    });\n\n    return html`\n      <dialog\n        ref=${dialogRef}\n        aria-modal=\"true\"\n        :aria-label=\"${() => props.label.value ?? null}\"\n        :aria-labelledby=\"${() => (!props.label.value ? drawerLabelId : null)}\">\n        <div class=\"panel\" part=\"panel\" ref=${panelRef}>\n          <div class=\"drag-handle\" part=\"drag-handle\" aria-label=\"Drag to close\" role=\"button\"></div>\n          <div class=\"header\" part=\"header\" ?hidden=${() => !hasHeader()}>\n            <span class=\"header-title\" id=\"${drawerLabelId}\" ?hidden=${() => !hasHeaderTitle()}>\n              <slot name=\"header\">${() => getHeaderText()}</slot>\n            </span>\n            <button\n              class=\"close-btn\"\n              part=\"close-btn\"\n              type=\"button\"\n              aria-label=\"Close\"\n              ?hidden=${() => !props.dismissible.value}\n              @click=${handleCloseButtonClick}>\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: [forcedColorsMixin, coarsePointerMixin, reducedMotionMixin, styles],\n});\n"],"mappings":"gWAiCA,IAAM,EAAgE,CACpE,OAAQ,CACN,KAAM,IACN,gBAAkB,GAAa,KAAK,IAAI,EAAG,CAAQ,EACnD,UAAY,GAAa,cAAc,EAAS,IAClD,EACA,KAAM,CACJ,KAAM,IACN,gBAAkB,GAAa,KAAK,IAAI,EAAG,CAAC,CAAQ,EACpD,UAAY,GAAa,cAAc,EAAS,IAClD,EACA,MAAO,CACL,KAAM,IACN,gBAAkB,GAAa,KAAK,IAAI,EAAG,CAAQ,EACnD,UAAY,GAAa,cAAc,EAAS,IAClD,EACA,IAAK,CACH,KAAM,IACN,gBAAkB,GAAa,KAAK,IAAI,EAAG,CAAC,CAAQ,EACpD,UAAY,GAAa,cAAc,EAAS,IAClD,CACF,EAyGa,EAAa,0BACH,EAAY,CACjC,MAAO,CACL,SAAU,EAAA,KAAK,OAAuB,EACtC,YAAa,EAAA,KAAK,KAAK,EAAI,EAC3B,wBAAyB,EAAA,KAAK,MAAM,CAAC,UAAW,OAAO,EAAY,SAAS,EAC5E,gBAAiB,EAAA,KAAK,OAAO,EAC7B,MAAO,EAAA,KAAK,OAAO,EACnB,KAAM,EAAA,KAAK,KAAK,EAAK,EACrB,WAAY,EAAA,KAAK,KAAK,EAAK,EAC3B,UAAW,EAAA,KAAK,MAAM,CAAC,OAAQ,QAAS,MAAO,QAAQ,EAAY,OAAO,EAC1E,eAAgB,EAAA,KAAK,KAAK,EAAI,EAC9B,KAAM,EAAA,KAAK,OAAmB,EAC9B,MAAO,EAAA,KAAK,OAAO,CACrB,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAA,EAAA,QAAA,CAAa,EACb,GAAA,EAAA,EAAA,QAAA,CAAgC,EAChC,GAAA,EAAA,EAAA,SAAA,CAAiB,EAEjB,GAAA,EAAA,EAAA,eAAA,CAA+B,cAAc,EAC7C,GAAA,EAAA,EAAA,IAAA,CAAmC,EACnC,GAAA,EAAA,EAAA,IAAA,CAA+B,EAG/B,GAAA,EAAA,EAAA,OAAA,CAAwB,EAAK,EAC/B,EAEE,MAAsB,EAAM,MAAM,OAAS,EAAM,MAAM,OAAS,GAChE,MAAuB,EAAM,IAAI,QAAQ,CAAC,CAAC,OAAS,CAAC,CAAC,EAAc,EAGpE,MAAkB,EAAe,GAAK,EAAM,YAAY,MACxD,MAAkB,EAAM,IAAI,QAAQ,CAAC,CAAC,MAEtC,MAAsC,EAAM,UAAU,OAAS,QAE/D,MAA0C,EAAkB,EAAa,GAEzE,GAAoB,EAAoB,IAAoB,CAChE,IAAM,EAAY,IAAS,IAAM,EAAM,YAAc,EAAM,aAE3D,OAAO,KAAK,IAAI,GAAI,KAAK,IAAI,GAAI,EAAY,GAAI,CAAC,CACpD,EAEM,GAA0B,EAAkB,IACzC,EAAe,CAAC,CAAC,gBAAgB,CAAQ,GAAK,EAGjD,EAAsB,GAAuB,CACjD,GAAI,CAAC,EAAe,MAAO,OAE3B,AAEE,KADA,aAAa,CAAe,EACV,IAAA,IAGpB,IAAM,EAAS,EAAU,MAEzB,GAAI,CAAC,EAAQ,CACX,EAAe,MAAQ,GAEvB,MACF,CAEA,EAAO,MAAM,WAAa,OAC1B,EAAM,MAAM,QAAU,IACtB,EAAM,MAAM,WAAa,SACzB,EAAY,YAEZ,EAAa,OAAO,CACtB,EAEM,GAAmB,EAAoB,EAA0B,IAA8B,CACnG,GAAI,EAAe,MAAO,OAE1B,EAAe,MAAQ,GAEvB,IAAM,EAAY,EAAM,OAAS,IAAM,EAAM,YAAc,EAAM,aAE3D,EACJ,GAAqB,EAAI,KAAK,IAAI,EAAmB,CAAS,EAAI,KAAK,IAAI,EAAmB,CAAC,CAAS,EACpG,EAAgB,EAAM,UAAU,CAAY,EAIlD,EAAM,MAAM,WAAa,yEACzB,EAAW,YAEX,IAAM,EAAuB,GAAwB,CAC/C,EAAG,SAAW,GAAS,EAAG,eAAiB,cAE/C,EAAM,oBAAoB,gBAAiB,CAAmB,EAC9D,EAAmB,CAAK,EAC1B,EAEA,EAAM,iBAAiB,gBAAiB,CAAmB,EAE3D,IAAM,EAAa,WAAW,iBAAiB,CAAK,CAAC,CAAC,kBAAkB,EAAI,IAE5E,EAAkB,eAAiB,CACjC,EAAM,oBAAoB,gBAAiB,CAAmB,EAC9D,EAAmB,CAAK,CAC1B,EAAG,EAAa,EAAE,EAElB,EAAM,MAAM,UAAY,EACxB,EAAM,MAAM,QAAU,KACxB,EAEM,EAAwB,GAAuB,CACnD,AAEE,KADA,aAAa,CAAe,EACV,IAAA,IAIpB,EAAM,MAAM,WAAa,GACzB,EAAM,MAAM,UAAY,GACxB,EAAM,MAAM,QAAU,GACtB,EAAM,MAAM,WAAa,GACzB,EAAe,MAAQ,EACzB,EAKM,GAAsB,CAAE,WAAU,eAA+D,CACrG,IAAM,EAAQ,EAAS,MAElB,KAIL,IAAI,EAAuB,EAAU,CAAS,EAAG,CAC/C,EAAgB,EAAO,EAAe,EAAG,CAAQ,EAEjD,MACF,CAEA,EAAqB,CAAK,CAF1B,CAGF,EAEM,EAAQ,EAAA,mBAAmB,CAC/B,SAAY,EAAe,CAAC,CAAC,KAC7B,SAAU,EACV,SAAU,EACV,UAAW,CAAE,cAAe,CAC1B,IAAM,EAAQ,EAAS,MAElB,GAEL,EAAgB,EAAO,EAAe,EAAG,CAAQ,CACnD,EACA,QAAS,CAAE,WAAU,eAAgB,CACnC,IAAM,EAAQ,EAAS,MAEvB,GAAI,CAAC,EAAO,OAEZ,IAAM,EAAc,EAAe,EAC7B,EAAkB,EAAY,gBAAgB,CAAQ,EACtD,EAAW,KAAK,IAAI,EAAkB,EAAW,CAAC,EAGxD,EAAM,MAAM,WAAa,OACzB,EAAM,MAAM,UAAY,EAAY,UAAU,CAAQ,EACtD,EAAM,MAAM,QAAU,OAAO,EAAI,EAAW,EAAG,CACjD,EACA,UAAW,EACX,cAAe,CAAE,WAAU,eAAgB,EAAuB,EAAU,CAAS,EACrF,cAAiB,CACf,IAAM,EAAQ,EAAS,MAIvB,OAFK,EAEE,EAAiB,EAAO,EAAe,CAAC,CAAC,IAAI,EAFjC,EAGrB,CACF,CAAC,EAMK,CAAE,qBAAoB,eAAc,UAAS,eAAc,iBAAkB,EAAA,iBAAiB,CAClG,WAAa,GAAW,CAGtB,IAAM,EAAQ,EAAS,MAEnB,GAAO,EAAqB,CAAK,CAGvC,EACA,mBAAqB,IAAa,CAAE,UAAW,EAAM,UAAU,OAAS,OAAQ,GAChF,YACA,eAAkB,EAAS,MAC3B,KAAM,EACN,aAAc,EAAM,iBACpB,iBAAoB,EAAQ,EAAM,WAAW,MAC7C,UAAA,EAAA,UACA,QAAA,EAAA,QACA,cAAgB,GAAW,CACzB,IAAM,EAAU,EAAS,MAKrB,GAAW,IAAW,SAAS,EAAqB,CAAO,EAE/D,IAAM,EAAS,EAAU,MAErB,IAAQ,EAAO,MAAM,WAAa,IAEtC,EAAK,QAAS,CAAE,UAAW,EAAM,UAAU,OAAS,QAAS,QAAO,CAAC,CACvE,EACA,OAAS,GAAW,EAAK,OAAQ,CAAE,UAAW,EAAM,UAAU,OAAS,QAAS,QAAO,CAAC,EACxF,SAAU,EAAM,KAChB,cAAe,EAAQ,IAAW,CAC5B,IAAW,QACb,EAAO,MAAM,EAEb,EAAmB,CAEvB,EACA,YAAa,EAAM,eACrB,CAAC,EAkED,OAxDA,EAAA,EAAA,UAAA,KAAgB,CACd,IAAM,EAAS,EAAU,MAEzB,GAAI,CAAC,EAAQ,OAGb,IAAM,EAAW,EAEjB,EAAS,SAAa,CACpB,EAAQ,KAAK,cAAc,CAC7B,EAEA,EAAS,SAAa,CACpB,EAAQ,MAAM,eAAgB,EAAK,CACrC,EAoBA,EAAc,GAEd,EAAA,EAAA,QAAA,CAAQ,EAAQ,SAAU,CAAY,GACtC,EAAA,EAAA,QAAA,CAAQ,EAAQ,QAba,GAAkB,CACzC,EAAM,WAAW,OAEjB,EAAM,SAAS,GAAK,EAAe,OAEnC,EAAE,SAAW,GAEjB,EAAa,cAAc,CAC7B,CAK4C,EAK5C,IAAM,EADQ,EAAS,OACK,cAA2B,sBAAsB,EAS7E,OAPI,KACF,EAAA,EAAA,QAAA,CAAQ,EAAc,cAAe,EAAM,iBAAiB,GAC5D,EAAA,EAAA,QAAA,CAAQ,EAAc,cAAe,EAAM,iBAAiB,GAC5D,EAAA,EAAA,QAAA,CAAQ,EAAc,YAAa,EAAM,eAAe,GACxD,EAAA,EAAA,QAAA,CAAQ,EAAc,gBAAiB,EAAM,mBAAmB,OAGrD,CACX,EAAQ,QAAQ,CAClB,CACF,CAAC,EAEM,EAAA,IAAI;;cAED,EAAU;;2BAEK,EAAM,MAAM,OAAS,KAAK;gCACnB,EAAM,MAAM,MAAwB,KAAhB,EAAsB;8CAChC,EAAS;;0DAEK,CAAC,EAAU,EAAE;6CAC5B,EAAc,gBAAkB,CAAC,EAAe,EAAE;wCACrD,EAAc,EAAE;;;;;;;4BAO5B,CAAC,EAAM,YAAY,MAAM;2BAjFd,CACnC,EAAa,SAAS,CACxB,EAgF0C;;;;;;;0DAOc,CAAC,EAAU,EAAE;;;;;KAMvE,EACA,OAAQ,CAAC,EAAA,kBAAmB,EAAA,mBAAoB,EAAA,mBAAoB,EAAA,OAAM,CAC5E,CAAC"}
+{"version":3,"file":"drawer.cjs","names":[],"sources":["../src/overlay/drawer/drawer.ts"],"sourcesContent":["import {\n  createStableId,\n  define,\n  html,\n  prop,\n  ref,\n  getHost,\n  onCleanup,\n  onEvent,\n  onMounted,\n  useEmit,\n  useSlots,\n} from '@vielzeug/ore';\nimport { signal } from '@vielzeug/ripple';\n\nimport type { OverlayOpenChangeDetail, SwipeAxis } from '../../core';\n\nimport { createSwipeControl } from '../../core';\nimport '../../content/icon/icon';\nimport { coarsePointerMixin, forcedColorsMixin, reducedMotionMixin } from '../../styles';\nimport { useDialogControl } from '../shared/use-dialog';\nimport styles from './drawer.css?inline';\n\ntype DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';\ntype DrawerSize = 'sm' | 'lg' | 'full';\ntype DrawerBackdrop = 'opaque' | 'blur' | 'transparent';\ntype DrawerDragHandlePlacement = 'outside' | 'inset';\ntype DrawerSwipeConfig = {\n  axis: SwipeAxis;\n  closingDistance: (distance: number) => number;\n  translate: (distance: number) => string;\n};\n\nconst parseOptionalBool = (value: string | null): boolean | undefined =>\n  value == null ? undefined : value === '' || value === 'true';\n\nconst drawerSwipeConfig: Record<DrawerPlacement, DrawerSwipeConfig> = {\n  bottom: {\n    axis: 'y',\n    closingDistance: (distance) => Math.max(0, distance),\n    translate: (distance) => `translateY(${distance}px)`,\n  },\n  left: {\n    axis: 'x',\n    closingDistance: (distance) => Math.max(0, -distance),\n    translate: (distance) => `translateX(${distance}px)`,\n  },\n  right: {\n    axis: 'x',\n    closingDistance: (distance) => Math.max(0, distance),\n    translate: (distance) => `translateX(${distance}px)`,\n  },\n  top: {\n    axis: 'y',\n    closingDistance: (distance) => Math.max(0, -distance),\n    translate: (distance) => `translateY(${distance}px)`,\n  },\n};\n\n/** Element interface exposing the imperative API for `ore-drawer`. */\nexport interface DrawerElement extends HTMLElement, Omit<OreDrawerProps, 'title'> {\n  /** Programmatically open the drawer. Equivalent to setting `open`. */\n  show(): void;\n  /** Programmatically close the drawer with the exit animation. */\n  hide(): void;\n}\n\n/** Drawer component properties */\n\nexport type OreDrawerEvents = {\n  'open-change': OverlayOpenChangeDetail;\n};\n\nexport type OreDrawerProps = {\n  /** Backdrop style — 'opaque' (default), 'blur', or 'transparent' */\n  backdrop?: DrawerBackdrop;\n  /** Initial uncontrolled open state. Ignored when `open` is set. */\n  'default-open'?: boolean;\n  /** Show the close (×) button in the header (default: true) */\n  dismissible?: boolean;\n  /** Drag handle position used for swipe-to-close gestures */\n  'drag-handle-placement'?: DrawerDragHandlePlacement;\n  /**\n   * CSS selector for the element inside the drawer that should receive focus on open.\n   * Defaults to native dialog focus management (first focusable element).\n   * @example '#submit-btn' | 'input[name=\"email\"]'\n   */\n  'initial-focus'?: string;\n  /**\n   * Invisible accessible label for the dialog (`aria-label`).\n   * Use when the drawer has no visible title (e.g. image-only content).\n   * When omitted, `aria-labelledby` points to the visible header title instead.\n   */\n  label?: string;\n  /** Controlled open state */\n  open?: boolean;\n  /** When true, backdrop clicks do not close the drawer (default: false) */\n  persistent?: boolean;\n  /** Side from which the drawer slides in */\n  placement?: DrawerPlacement;\n  /**\n   * When true (default), focus returns to the triggering element after the drawer closes.\n   * Set to false to manage focus manually.\n   */\n  'return-focus'?: boolean;\n  /** Drawer width/height preset */\n  size?: DrawerSize;\n  /**\n   * Visible title text rendered inside the header.\n   * Used as the dialog's accessible label via `aria-labelledby` when `label` is not set.\n   */\n  title?: string;\n};\n\n/**\n * A panel that slides in from any edge of the screen, built on the native `<dialog>` element.\n *\n * @element ore-drawer\n *\n * @attr {boolean} open - Controlled open state\n * @attr {boolean} default-open - Initial uncontrolled open state\n * @attr {string} placement - 'left' | 'right' (default) | 'top' | 'bottom'\n * @attr {string} size - 'sm' | 'lg' | 'full'\n * @attr {string} title - Visible header title text\n * @attr {string} label - Invisible aria-label (for drawers without a visible title)\n * @attr {boolean} dismissible - Show the close (×) button (default: true)\n * @attr {string} drag-handle-placement - 'outside' (default) | 'inset'\n * @attr {string} backdrop - Backdrop style: 'opaque' (default) | 'blur' | 'transparent'\n * @attr {boolean} persistent - Prevent backdrop-click from closing (default: false)\n *\n * @fires open-change - When the drawer state changes. detail: { open, reason }\n *\n * @slot header - Drawer header content\n * @slot - Main body content\n * @slot footer - Drawer footer content\n *\n * @cssprop --drawer-backdrop-bg - Backdrop background color\n * @cssprop --drawer-bg - Panel background color\n * @cssprop --drawer-size - Panel width (horizontal) or height (vertical)\n * @cssprop --drawer-shadow - Panel box-shadow\n * @cssprop --drawer-panel-blur - Panel backdrop blur amount\n *\n * @part drag-handle - Drawer drag handle.\n * @part panel - Panel container.\n * @part header - Header container.\n * @part close-btn - Close button.\n * @part body - Body content container.\n * @part footer - Footer container.\n * @example\n * ```html\n * <!-- With visible title -->\n * <ore-drawer open title=\"Settings\" placement=\"right\">\n *   <p>Settings content here.</p>\n * </ore-drawer>\n *\n * <!-- With custom header slot -->\n * <ore-drawer open placement=\"right\">\n *   <span slot=\"header\">Settings</span>\n *   <p>Settings content here.</p>\n * </ore-drawer>\n * ```\n */\n\nexport const DRAWER_TAG = 'ore-drawer' as const;\ndefine<OreDrawerProps>(DRAWER_TAG, {\n  props: {\n    backdrop: prop.string<DrawerBackdrop>(),\n    'default-open': prop.bool(false),\n    dismissible: prop.bool(true),\n    'drag-handle-placement': prop.oneOf(['outside', 'inset'] as const, 'outside'),\n    'initial-focus': prop.string(),\n    label: prop.string(),\n    open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\n    persistent: prop.bool(false),\n    placement: prop.oneOf(['left', 'right', 'top', 'bottom'] as const, 'right'),\n    'return-focus': prop.bool(true),\n    size: prop.string<DrawerSize>(),\n    title: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreDrawerEvents>();\n    const slots = useSlots();\n\n    const drawerLabelId = createStableId('drawer-label');\n    const dialogRef = ref<HTMLDialogElement>();\n    const panelRef = ref<HTMLDivElement>();\n\n    // Drag-to-close state\n    const isSwipeClosing = signal(false);\n    let swipeCloseTimer: ReturnType<typeof setTimeout> | undefined;\n\n    const getHeaderText = () => props.label.value ?? props.title.value ?? '';\n    const hasHeaderTitle = () => slots.has('header').value || !!getHeaderText();\n\n    // Header is visible when there is slot content, a text label, or a close button.\n    const hasHeader = () => hasHeaderTitle() || props.dismissible.value;\n    const hasFooter = () => slots.has('footer').value;\n\n    const getPlacement = (): DrawerPlacement => props.placement.value || 'right';\n\n    const getSwipeConfig = (): DrawerSwipeConfig => drawerSwipeConfig[getPlacement()];\n\n    const getSnapThreshold = (panel: HTMLElement, axis: SwipeAxis) => {\n      const panelSize = axis === 'x' ? panel.offsetWidth : panel.offsetHeight;\n\n      return Math.min(96, Math.max(36, panelSize * 0.18));\n    };\n\n    const shouldCommitSwipeClose = (distance: number, threshold: number) => {\n      return getSwipeConfig().closingDistance(distance) >= threshold;\n    };\n\n    const finalizeSwipeClose = (panel: HTMLElement) => {\n      if (!isSwipeClosing.value) return;\n\n      if (swipeCloseTimer) {\n        clearTimeout(swipeCloseTimer);\n        swipeCloseTimer = undefined;\n      }\n\n      const dialog = dialogRef.value;\n\n      if (!dialog) {\n        isSwipeClosing.value = false;\n\n        return;\n      }\n\n      dialog.style.transition = 'none';\n      panel.style.opacity = '0';\n      panel.style.visibility = 'hidden';\n      void dialog.offsetWidth;\n\n      requestClose('swipe');\n    };\n\n    const startSwipeClose = (panel: HTMLElement, swipe: DrawerSwipeConfig, committedDistance: number) => {\n      if (isSwipeClosing.value) return;\n\n      isSwipeClosing.value = true;\n\n      const panelSize = swipe.axis === 'x' ? panel.offsetWidth : panel.offsetHeight;\n      // Preserve overshoot so closing continues from the dragged position instead of snapping back.\n      const exitDistance =\n        committedDistance >= 0 ? Math.max(committedDistance, panelSize) : Math.min(committedDistance, -panelSize);\n      const exitTransform = swipe.translate(exitDistance);\n\n      // Commit the current drag position first so the magnetic snap continues\n      // from the finger instead of jumping back to rest.\n      panel.style.transition = 'transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 180ms ease-out';\n      void panel.offsetWidth;\n\n      const onExitTransitionEnd = (ev: TransitionEvent) => {\n        if (ev.target !== panel || ev.propertyName !== 'transform') return;\n\n        panel.removeEventListener('transitionend', onExitTransitionEnd);\n        finalizeSwipeClose(panel);\n      };\n\n      panel.addEventListener('transitionend', onExitTransitionEnd);\n\n      const durationMs = parseFloat(getComputedStyle(panel).transitionDuration) * 1000;\n\n      swipeCloseTimer = setTimeout(() => {\n        panel.removeEventListener('transitionend', onExitTransitionEnd);\n        finalizeSwipeClose(panel);\n      }, durationMs + 50);\n\n      panel.style.transform = exitTransform;\n      panel.style.opacity = '0.2';\n    };\n\n    const resetPanelDragStyles = (panel: HTMLElement) => {\n      if (swipeCloseTimer) {\n        clearTimeout(swipeCloseTimer);\n        swipeCloseTimer = undefined;\n      }\n\n      // Re-enable transitions so the snap-back or exit animates.\n      panel.style.transition = '';\n      panel.style.transform = '';\n      panel.style.opacity = '';\n      panel.style.visibility = '';\n      isSwipeClosing.value = false;\n    };\n\n    // Same \"snap back or commit close\" decision whether the swipe was\n    // interrupted by the platform (onCancel) or simply released without an\n    // intervening move event crossing the threshold (onRelease).\n    const handleSwipeRelease = ({ distance, threshold }: { distance: number; threshold: number }): void => {\n      const panel = panelRef.value;\n\n      if (!panel) return;\n\n      // If the release event crosses the threshold (without an intervening\n      // move event), commit close instead of snapping back to rest first.\n      if (shouldCommitSwipeClose(distance, threshold)) {\n        startSwipeClose(panel, getSwipeConfig(), distance);\n\n        return;\n      }\n\n      resetPanelDragStyles(panel);\n    };\n\n    const swipe = createSwipeControl({\n      axis: () => getSwipeConfig().axis,\n      disabled: isSwipeClosing,\n      onCancel: handleSwipeRelease,\n      onCommit: ({ distance }) => {\n        const panel = panelRef.value;\n\n        if (!panel) return;\n\n        startSwipeClose(panel, getSwipeConfig(), distance);\n      },\n      onMove: ({ distance, threshold }) => {\n        const panel = panelRef.value;\n\n        if (!panel) return;\n\n        const swipeConfig = getSwipeConfig();\n        const closingDistance = swipeConfig.closingDistance(distance);\n        const progress = Math.min(closingDistance / threshold, 1);\n\n        // Kill CSS transitions so the panel tracks the finger instantly.\n        panel.style.transition = 'none';\n        panel.style.transform = swipeConfig.translate(distance);\n        panel.style.opacity = String(1 - progress * 0.4);\n      },\n      onRelease: handleSwipeRelease,\n      shouldCommit: ({ distance, threshold }) => shouldCommitSwipeClose(distance, threshold),\n      threshold: () => {\n        const panel = panelRef.value;\n\n        if (!panel) return 48;\n\n        return getSnapThreshold(panel, getSwipeConfig().axis);\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Overlay State Management\n    // ────────────────────────────────────────────────────────────────\n\n    const { closeWithAnimation, handleCancel, overlay, requestClose, watchOpenProp } = useDialogControl({\n      beforeOpen: (dialog) => {\n        // Clear any inline drag styles from a previous swipe-close so the CSS\n        // entry animation starts from the correct base state.\n        const panel = panelRef.value;\n\n        if (panel) resetPanelDragStyles(panel);\n\n        void dialog;\n      },\n      closeRequestDetail: (_reason) => ({ placement: props.placement.value ?? 'right' }),\n      defaultOpen: props['default-open'],\n      dialogRef,\n      getPanelEl: () => panelRef.value,\n      host: el,\n      initialFocus: props['initial-focus'],\n      isPersistent: () => Boolean(props.persistent.value),\n      onCleanup,\n      onEvent,\n      onNativeClose: (reason) => {\n        const panelEl = panelRef.value;\n\n        // For swipe-close, keep the panel hidden and off-screen until the next\n        // open cycle — resetting inline styles during native close can produce\n        // a visible frame at the rest position on some browsers.\n        if (panelEl && reason !== 'swipe') resetPanelDragStyles(panelEl);\n\n        const dialog = dialogRef.value;\n\n        if (dialog) dialog.style.transition = '';\n\n        emit('open-change', { open: false, reason });\n      },\n      onOpen: (reason) => emit('open-change', { open: true, reason }),\n      openProp: props.open,\n      performClose: (dialog, reason) => {\n        if (reason === 'swipe') {\n          dialog.close();\n        } else {\n          closeWithAnimation();\n        }\n      },\n      returnFocus: props['return-focus'],\n    });\n\n    const handleCloseButtonClick = () => {\n      requestClose('trigger');\n    };\n\n    // ────────────────────────────────────────────────────────────────\n    // Lifecycle: Setup Drawer Integration\n    // ────────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      const dialog = dialogRef.value;\n\n      if (!dialog) return;\n\n      // Expose imperative API\n      const drawerEl = el as DrawerElement;\n\n      drawerEl.show = () => {\n        overlay.open('programmatic');\n      };\n\n      drawerEl.hide = () => {\n        overlay.close('programmatic');\n      };\n\n      // ────────────────────────────────────────────────────────────\n      // Event Handlers: Cancel, Backdrop Click\n      // ────────────────────────────────────────────────────────────\n      // `handleCancel` (Escape via the native `cancel` event) is provided by\n      // `useDialogControl` above — drawer only needs its own backdrop-click\n      // handler since it has swipe-to-dismiss logic the shared dialog helper\n      // doesn't know about.\n\n      const handleBackdropClick = (e: MouseEvent) => {\n        if (props.persistent.value) return;\n\n        if (swipe.isActive() || isSwipeClosing.value) return;\n\n        if (e.target !== dialog) return; // Click inside panel\n\n        requestClose('outsideClick');\n      };\n\n      watchOpenProp();\n\n      onEvent(dialog, 'cancel', handleCancel);\n      onEvent(dialog, 'click', handleBackdropClick);\n\n      // Drag-to-close handlers — scoped to the handle element only so interactions\n      // with panel content don't accidentally start a drag.\n      const panel = panelRef.value;\n      const dragHandleEl = panel?.querySelector<HTMLElement>('[part=\"drag-handle\"]');\n\n      if (dragHandleEl) {\n        onEvent(dragHandleEl, 'pointerdown', swipe.handlePointerDown);\n        onEvent(dragHandleEl, 'pointermove', swipe.handlePointerMove);\n        onEvent(dragHandleEl, 'pointerup', swipe.handlePointerUp);\n        onEvent(dragHandleEl, 'pointercancel', swipe.handlePointerCancel);\n      }\n\n      return () => {\n        overlay.dispose();\n      };\n    });\n\n    return html`\n      <dialog\n        ref=${dialogRef}\n        aria-modal=\"true\"\n        aria-label=\"${() => props.label.value ?? null}\"\n        aria-labelledby=\"${() => (!props.label.value ? drawerLabelId : null)}\">\n        <div class=\"panel\" part=\"panel\" ref=${panelRef}>\n          <div class=\"drag-handle\" part=\"drag-handle\" aria-label=\"Drag to close\" role=\"button\"></div>\n          <div class=\"header\" part=\"header\" ?hidden=${() => !hasHeader()}>\n            <span class=\"header-title\" id=\"${drawerLabelId}\" ?hidden=${() => !hasHeaderTitle()}>\n              <slot name=\"header\">${() => getHeaderText()}</slot>\n            </span>\n            <button\n              class=\"close-btn\"\n              part=\"close-btn\"\n              type=\"button\"\n              aria-label=\"Close\"\n              ?hidden=${() => !props.dismissible.value}\n              @click=${handleCloseButtonClick}>\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: [forcedColorsMixin, coarsePointerMixin, reducedMotionMixin, styles],\n});\n"],"mappings":"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"}