@vielzeug/refine 1.1.1

package/dist/date-picker.js

@@ -0,0 +1,315 @@
+import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
+import { colorThemeMixin as t } from "./styles/mixins/theme.css.js";
+import { disablableBundle as n, roundableBundle as r, sizableBundle as i, themableBundle as a } from "./shared/prop-bundles.js";
+import { createDatePickerControl as o, formatDisplayDate as s, parseIso as c, toIsoString as l } from "./headless/date-picker.js";
+import { FORM_CTX as u, useFormContext as d } from "./inputs/shared/form-context.js";
+import f from "./inputs/date-picker/date-picker.css?inline.js";
+import { define as p, html as m, inject as h, prop as g, useField as _ } from "@vielzeug/ore";
+import { computed as v, signal as y } from "@vielzeug/ripple";
+import { Temporal as b, format as x } from "@vielzeug/tempo";
+//#region src/inputs/date-picker/date-picker.ts
+var S = "ore-date-picker";
+p(S, {
+	formAssociated: !0,
+	props: {
+		...a,
+		...i,
+		...n,
+		...r,
+		error: g.string(),
+		fullwidth: g.bool(!1),
+		helper: g.string(),
+		label: g.string(),
+		"label-placement": g.oneOf(["inset", "outside"], "inset"),
+		locale: g.string(),
+		max: g.string(),
+		min: g.string(),
+		name: g.string(),
+		placeholder: g.string(),
+		required: g.bool(!1),
+		value: g.string(),
+		variant: g.string(),
+		"weekend-days": g.json([])
+	},
+	setup(e, { bind: t, el: n, emit: r, onMounted: i }) {
+		let a = y(!1), f = y(void 0), p = v(() => f.value === void 0 ? c(e.value.value) : f.value), g = d(t, e, h(u)), S = g.disabled, C = v(() => e.locale.value || (typeof navigator < "u" ? navigator.language : "en")), w = o({
+			get locale() {
+				return C.value;
+			},
+			get max() {
+				return c(e.max.value);
+			},
+			get min() {
+				return c(e.min.value);
+			},
+			onChange(e) {
+				f.value = e, a.value = !1, w.setView("day"), T.value = "day", E.value = w.displayYear(), D.value = w.displayMonth(), r("change", { isoValue: l(e) });
+			},
+			get value() {
+				return p.value;
+			},
+			get weekendDays() {
+				return e["weekend-days"].value ?? [];
+			}
+		}), T = y("day"), E = y(w.displayYear()), D = y(w.displayMonth());
+		_({
+			disabled: S,
+			toFormValue: (e) => e || null,
+			value: v(() => l(p.value) ?? "")
+		});
+		let O = `date-picker-${Math.random().toString(36).slice(2, 9)}-calendar`, k = v(() => p.value ? s(p.value, C.value) : e.placeholder.value || ""), A = v(() => x(b.PlainDate.from({
+			day: 1,
+			month: D.value,
+			year: E.value
+		}), {
+			intl: { month: "long" },
+			locale: C.value,
+			tz: "UTC"
+		})), j = v(() => String(E.value)), M = v(() => `${A.value} ${j.value}`), N = v(() => (E.value, D.value, p.value, w.dayCells())), P = v(() => (E.value, w.monthCells())), F = v(() => (E.value, w.yearCells())), I = v(() => w.weekdayLabels()), L = () => S.value ? "-1" : "0";
+		function R() {
+			T.value === "day" ? w.prevMonth() : w.prevYear(), E.value = w.displayYear(), D.value = w.displayMonth();
+		}
+		function z() {
+			T.value === "day" ? w.nextMonth() : w.nextYear(), E.value = w.displayYear(), D.value = w.displayMonth();
+		}
+		function B() {
+			let e = [
+				"day",
+				"month",
+				"year"
+			], t = e[(e.indexOf(T.value) + 1) % e.length];
+			w.setView(t), T.value = t;
+		}
+		function V(e) {
+			w.goTo(w.displayYear(), e), w.setView("day"), E.value = w.displayYear(), D.value = w.displayMonth(), T.value = "day";
+		}
+		function H(e) {
+			w.goTo(e, w.displayMonth()), w.setView("month"), E.value = w.displayYear(), T.value = "month";
+		}
+		function U(e) {
+			let t = c(e);
+			t && w.select(t);
+		}
+		function W(e) {
+			let t = e.currentTarget, n = t.closest(".cal-grid-days");
+			if (!n) return;
+			let r = Array.from(n.querySelectorAll(".cal-cell-day")), i = r.indexOf(t);
+			if (i === -1) return;
+			let a;
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault(), U(t.dataset.iso ?? "");
+				return;
+			} else if (e.key === "ArrowRight") a = r[i + 1];
+			else if (e.key === "ArrowLeft") a = r[i - 1];
+			else if (e.key === "ArrowDown") a = r[i + 7];
+			else if (e.key === "ArrowUp") a = r[i - 7];
+			else if (e.key === "Home") a = r[Math.floor(i / 7) * 7];
+			else if (e.key === "End") a = r[Math.floor(i / 7) * 7 + 6];
+			else return;
+			e.preventDefault(), a?.focus();
+		}
+		function G(e, t, n, r) {
+			let i = e.currentTarget, a = i.closest(".cal-grid");
+			if (!a) return;
+			let o = Array.from(a.querySelectorAll(t)), s = o.indexOf(i);
+			if (s === -1) return;
+			let c;
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault(), r();
+				return;
+			} else if (e.key === "ArrowRight") c = o[s + 1];
+			else if (e.key === "ArrowLeft") c = o[s - 1];
+			else if (e.key === "ArrowDown") c = o[s + n];
+			else if (e.key === "ArrowUp") c = o[s - n];
+			else if (e.key === "Home") c = o[Math.floor(s / n) * n];
+			else if (e.key === "End") c = o[Math.min(Math.floor(s / n) * n + n - 1, o.length - 1)];
+			else return;
+			e.preventDefault(), c?.focus();
+		}
+		function K() {
+			if (S.value) return;
+			a.value = !0, w.setView("day"), T.value = "day";
+			let e = p.value;
+			e && (w.goTo(e.year, e.month), E.value = w.displayYear(), D.value = w.displayMonth());
+		}
+		function q() {
+			a.value = !1, w.setView("day"), T.value = "day";
+		}
+		function J() {
+			a.value ? q() : K();
+		}
+		function Y(e) {
+			S.value || (e.key === "Enter" || e.key === " " ? (e.preventDefault(), J()) : e.key === "Escape" && a.value && (e.preventDefault(), q()));
+		}
+		function X(e) {
+			e.key === "Escape" && (e.preventDefault(), q());
+		}
+		function Z(e) {
+			a.value && (e.composedPath().includes(n) || q());
+		}
+		return i(() => (document.addEventListener("pointerdown", Z, { capture: !0 }), () => {
+			document.removeEventListener("pointerdown", Z, { capture: !0 });
+		})), t({ attr: { open: () => a.value ? !0 : void 0 } }), m`
+      <!-- Trigger: ore-input in readonly display mode -->
+      <ore-input
+        class="trigger"
+        readonly
+        tabindex="${L}"
+        role="combobox"
+        aria-haspopup="dialog"
+        aria-controls="${O}"
+        :aria-expanded="${() => String(a.value)}"
+        :aria-disabled="${() => S.value ? "true" : null}"
+        :value="${() => k.value}"
+        :label="${() => e.label.value ?? ""}"
+        :placeholder="${() => e.placeholder.value ?? ""}"
+        :label-placement="${() => e["label-placement"].value ?? "inset"}"
+        :color="${() => e.color?.value ?? void 0}"
+        :size="${() => g.size?.value ?? void 0}"
+        :variant="${() => g.variant?.value ?? void 0}"
+        :rounded="${() => e.rounded?.value ?? void 0}"
+        :helper="${() => e.helper.value ?? ""}"
+        :error="${() => e.error.value ?? ""}"
+        ?disabled="${() => S.value ? !0 : void 0}"
+        ?required="${() => e.required.value ? !0 : void 0}"
+        ?fullwidth="${() => e.fullwidth.value ? !0 : void 0}"
+        @click="${J}"
+        @keydown="${Y}">
+        <ore-icon slot="suffix" name="calendar" size="16" stroke-width="1.75" aria-hidden="true"></ore-icon>
+      </ore-input>
+
+      <!-- Calendar popup -->
+      <div
+        class="calendar"
+        id="${O}"
+        role="dialog"
+        aria-modal="true"
+        :aria-label="${() => `Choose date — ${M.value}`}"
+        ?data-open="${a}"
+        @keydown="${X}">
+        <!-- Calendar header -->
+        <div class="cal-header" part="header">
+          <button class="nav-btn" type="button" aria-label="Previous" @click="${R}">
+            <ore-icon name="chevron-left" size="16" stroke-width="2" aria-hidden="true"></ore-icon>
+          </button>
+          <button
+            class="cal-label-btn"
+            type="button"
+            :aria-label="${() => `Switch to ${T.value === "day" ? "month" : T.value === "month" ? "year" : "day"} view`}"
+            @click="${B}">
+            <span class="cal-label-month">${A}</span><span class="cal-label-sep" aria-hidden="true">/</span
+            ><span class="cal-label-year">${j}</span>
+          </button>
+          <button class="nav-btn" type="button" aria-label="Next" @click="${z}">
+            <ore-icon name="chevron-right" size="16" stroke-width="2" aria-hidden="true"></ore-icon>
+          </button>
+        </div>
+
+        <!-- Day view: flat 7-column CSS grid, weekday headers + day cells -->
+        <div
+          class="cal-grid cal-grid-days"
+          role="grid"
+          part="grid"
+          :aria-label="${() => M.value}"
+          ?hidden="${() => T.value !== "day"}">
+          <div role="row" class="cal-grid-row">
+            ${() => I.value.map((e) => m`<div class="cal-cell cal-cell-head" role="columnheader" aria-label="${e}">${e}</div>`)}
+          </div>
+          ${() => {
+			let e = N.value, t = [];
+			for (let n = 0; n < e.length; n += 7) t.push(e.slice(n, n + 7));
+			return t.map((e) => m`<div role="row" class="cal-grid-row">
+                  ${e.map((e) => m`<div
+                        class="cal-cell cal-cell-day"
+                        role="gridcell"
+                        part="day"
+                        :aria-selected="${() => String(e.isSelected)}"
+                        :aria-disabled="${() => String(e.isDisabled)}"
+                        :aria-current="${() => e.isToday ? "date" : null}"
+                        ?data-selected="${() => e.isSelected}"
+                        ?data-today="${() => e.isToday}"
+                        ?data-outside="${() => e.isOutsideMonth}"
+                        ?data-disabled="${() => e.isDisabled}"
+                        data-iso="${e.iso}"
+                        tabindex="${() => e.isDisabled ? "-1" : "0"}"
+                        @click="${() => U(e.iso)}"
+                        @keydown="${W}">
+                        ${String(e.day)}
+                      </div>`)}
+                </div>`);
+		}}
+        </div>
+
+        <!-- Month view -->
+        <div
+          class="cal-grid cal-grid-months"
+          role="grid"
+          :aria-label="${() => j.value}"
+          ?hidden="${() => T.value !== "month"}">
+          ${() => {
+			let e = P.value, t = [];
+			for (let n = 0; n < e.length; n += 4) t.push(e.slice(n, n + 4));
+			return t.map((e) => m`<div role="row">
+                  ${e.map((e) => m`<div
+                        class="cal-cell cal-cell-month"
+                        role="gridcell"
+                        :aria-selected="${() => String(e.isSelected)}"
+                        :aria-disabled="${() => String(e.isDisabled)}"
+                        ?data-selected="${() => e.isSelected}"
+                        ?data-disabled="${() => e.isDisabled}"
+                        tabindex="${() => e.isDisabled ? "-1" : "0"}"
+                        @click="${() => {
+				e.isDisabled || V(e.month);
+			}}"
+                        @keydown="${(t) => G(t, ".cal-cell-month", 4, () => {
+				e.isDisabled || V(e.month);
+			})}">
+                        ${e.shortLabel}
+                      </div>`)}
+                </div>`);
+		}}
+        </div>
+
+        <!-- Year view -->
+        <div
+          class="cal-grid cal-grid-years"
+          role="grid"
+          aria-label="Select year"
+          ?hidden="${() => T.value !== "year"}">
+          ${() => {
+			let e = F.value, t = [];
+			for (let n = 0; n < e.length; n += 4) t.push(e.slice(n, n + 4));
+			return t.map((e) => m`<div role="row">
+                  ${e.map((e) => m`<div
+                        class="cal-cell cal-cell-year"
+                        role="gridcell"
+                        :aria-selected="${() => String(e.isSelected)}"
+                        :aria-disabled="${() => String(e.isDisabled)}"
+                        ?data-selected="${() => e.isSelected}"
+                        ?data-disabled="${() => e.isDisabled}"
+                        tabindex="${() => e.isDisabled ? "-1" : "0"}"
+                        @click="${() => {
+				e.isDisabled || H(e.year);
+			}}"
+                        @keydown="${(t) => G(t, ".cal-cell-year", 4, () => {
+				e.isDisabled || H(e.year);
+			})}">
+                        ${String(e.year)}
+                      </div>`)}
+                </div>`);
+		}}
+        </div>
+      </div>
+    `;
+	},
+	shadow: { delegatesFocus: !0 },
+	styles: [
+		t,
+		e,
+		f
+	]
+});
+//#endregion
+export { S as DATE_PICKER_TAG };
+
+//# sourceMappingURL=date-picker.js.map

package/dist/date-picker.js.map

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

package/dist/dialog.cjs

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

package/dist/dialog.cjs.map

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

package/dist/dialog.js

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

package/dist/dialog.js.map

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

package/dist/disclosure/accordion/accordion.css?inline.cjs

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

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

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

package/dist/disclosure/accordion/accordion.css?inline.js

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

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

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