@vielzeug/refine 1.1.1 → 1.3.0

package/dist/calendar.js

@@ -4,32 +4,34 @@ import { reducedMotionMixin as t } from "./styles/mixins/accessibility.css.js";
 import { colorThemeMixin as n } from "./styles/mixins/theme.css.js";
 import { disablableBundle as r, roundableBundle as i, sizableBundle as a, themableBundle as o } from "./shared/prop-bundles.js";
 import { createDatePickerControl as s, parseIso as c, toIsoString as l } from "./headless/date-picker.js";
-import u from "./inputs/calendar/calendar.css?inline.js";
-import { define as d, html as f, prop as p, useField as m } from "@vielzeug/ore";
-import { computed as h, signal as g } from "@vielzeug/ripple";
-import { Temporal as _, format as v } from "@vielzeug/tempo";
+import { useField as u } from "./ore/dist/forms/field.js";
+import "./ore/dist/forms.js";
+import d from "./inputs/calendar/calendar.css.js";
+import { bind as f, define as p, html as m, prop as h, useEmit as g } from "@vielzeug/ore";
+import { computed as _, signal as v } from "@vielzeug/ripple";
+import { Temporal as y, format as b } from "@vielzeug/tempo";
 //#region src/inputs/calendar/calendar.ts
-var y = "ore-calendar", b = 3;
-d(y, {
+var x = "ore-calendar", S = 3;
+p(x, {
 	formAssociated: !0,
 	props: {
 		...o,
 		...a,
 		...r,
 		...i,
-		events: p.json([]),
-		expanded: p.bool(!1),
-		fullwidth: p.bool(!1),
-		locale: p.string(),
-		max: p.string(),
-		min: p.string(),
-		name: p.string(),
-		required: p.bool(!1),
-		value: p.string(),
-		"weekend-days": p.json([])
+		events: h.json([]),
+		expanded: h.bool(!1),
+		fullwidth: h.bool(!1),
+		locale: h.string(),
+		max: h.string(),
+		min: h.string(),
+		name: h.string(),
+		required: h.bool(!1),
+		value: h.string(),
+		"weekend-days": h.json([])
 	},
-	setup(t, { bind: n, emit: r }) {
-		let i = h(() => t.disabled.value === !0), a = h(() => t.expanded.value === !0), o = g(void 0), u = h(() => o.value === void 0 ? c(t.value.value) : o.value), d = s({
+	setup(t) {
+		let n = g(), r = _(() => t.disabled.value === !0), i = _(() => t.expanded.value === !0), a = v(void 0), o = _(() => a.value === void 0 ? c(t.value.value) : a.value), d = s({
 			get locale() {
 				return t.locale.value ?? (typeof navigator < "u" ? navigator.language : "en");
 			},
@@ -40,43 +42,43 @@ d(y, {
 				return c(t.min.value);
 			},
 			onChange(e) {
-				o.value = e, p.value = "day", y.value = d.displayYear(), x.value = d.displayMonth(), r("change", { isoValue: l(e) });
+				a.value = e, p.value = "day", h.value = d.displayYear(), x.value = d.displayMonth(), n("change", { isoValue: l(e) });
 			},
 			get value() {
-				return u.value;
+				return o.value;
 			},
 			get weekendDays() {
 				return t["weekend-days"].value ?? [];
 			}
-		}), p = g("day"), y = g(d.displayYear()), x = g(d.displayMonth());
-		m({
-			disabled: i,
+		}), p = v("day"), h = v(d.displayYear()), x = v(d.displayMonth());
+		u({
+			disabled: r,
 			toFormValue: (e) => e || null,
-			value: h(() => l(u.value) ?? "")
+			value: _(() => l(o.value) ?? "")
 		});
-		let S = h(() => {
+		let C = _(() => {
 			let e = /* @__PURE__ */ new Map();
 			for (let n of t.events.value ?? []) {
 				let t = e.get(n.date) ?? [];
 				t.push(n), e.set(n.date, t);
 			}
 			return e;
-		}), C = h(() => (y.value, x.value, u.value, d.dayCells())), w = h(() => (y.value, d.monthCells())), T = h(() => (y.value, d.yearCells())), E = h(() => d.weekdayLabels()), D = h(() => v(_.PlainDate.from({
+		}), w = _(() => (h.value, x.value, o.value, d.dayCells())), T = _(() => (h.value, d.monthCells())), E = _(() => (h.value, d.yearCells())), D = _(() => d.weekdayLabels()), O = _(() => b(y.PlainDate.from({
 			day: 1,
 			month: x.value,
-			year: y.value
+			year: h.value
 		}), {
 			intl: { month: "long" },
 			locale: t.locale.value ?? (typeof navigator < "u" ? navigator.language : "en"),
 			tz: "UTC"
-		})), O = h(() => String(y.value)), k = h(() => `${D.value} ${O.value}`);
-		function A() {
-			p.value === "day" ? d.prevMonth() : d.prevYear(), y.value = d.displayYear(), x.value = d.displayMonth();
-		}
+		})), k = _(() => String(h.value)), A = _(() => `${O.value} ${k.value}`);
 		function j() {
-			p.value === "day" ? d.nextMonth() : d.nextYear(), y.value = d.displayYear(), x.value = d.displayMonth();
+			p.value === "day" ? d.prevMonth() : d.prevYear(), h.value = d.displayYear(), x.value = d.displayMonth();
 		}
 		function M() {
+			p.value === "day" ? d.nextMonth() : d.nextYear(), h.value = d.displayYear(), x.value = d.displayMonth();
+		}
+		function N() {
 			let e = [
 				"day",
 				"month",
@@ -84,25 +86,25 @@ d(y, {
 			], t = e[(e.indexOf(p.value) + 1) % e.length];
 			d.setView(t), p.value = t;
 		}
-		function N(e) {
-			i.value || (d.goTo(d.displayYear(), e), d.setView("day"), y.value = d.displayYear(), x.value = d.displayMonth(), p.value = "day");
-		}
 		function P(e) {
-			i.value || (d.goTo(e, d.displayMonth()), d.setView("month"), y.value = d.displayYear(), p.value = "month");
+			r.value || (d.goTo(d.displayYear(), e), d.setView("day"), h.value = d.displayYear(), x.value = d.displayMonth(), p.value = "day");
 		}
 		function F(e) {
-			if (i.value) return;
+			r.value || (d.goTo(e, d.displayMonth()), d.setView("month"), h.value = d.displayYear(), p.value = "month");
+		}
+		function I(e) {
+			if (r.value) return;
 			let t = c(e);
 			t && d.select(t);
 		}
-		function I(e) {
+		function L(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(), F(t.dataset.iso ?? "");
+				e.preventDefault(), I(t.dataset.iso ?? "");
 				return;
 			} else if (e.key === "ArrowRight") a = r[i + 1];
 			else if (e.key === "ArrowLeft") a = r[i - 1];
@@ -113,7 +115,7 @@ d(y, {
 			else return;
 			e.preventDefault(), a?.focus();
 		}
-		function L(e, t, n, r) {
+		function R(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);
@@ -131,18 +133,18 @@ d(y, {
 			else return;
 			e.preventDefault(), c?.focus();
 		}
-		return n({
+		return f({
 			attr: {
-				"aria-disabled": () => i.value ? "true" : null,
-				"aria-label": () => k.value,
+				"aria-disabled": () => r.value ? "true" : null,
+				"aria-label": () => A.value,
 				role: "group"
 			},
-			class: { "is-disabled": i }
-		}), f`
+			class: { "is-disabled": r }
+		}), m`
       <div class="calendar" part="calendar" role="presentation">
         <!-- Header -->
         <div class="cal-header" part="header">
-          <button class="nav-btn" type="button" aria-label="Previous" ?disabled="${i}" @click="${A}">
+          <button class="nav-btn" type="button" aria-label="Previous" ?disabled="${r}" @click="${j}">
             <ore-icon name="chevron-left" size="16" stroke-width="2" aria-hidden="true"></ore-icon>
           </button>
 
@@ -150,13 +152,13 @@ d(y, {
             class="cal-label-btn"
             type="button"
             :aria-label="${() => `Switch to ${p.value === "day" ? "month" : p.value === "month" ? "year" : "day"} view`}"
-            ?disabled="${i}"
-            @click="${M}">
-            <span class="cal-label-month">${D}</span><span class="cal-label-sep" aria-hidden="true">/</span
-            ><span class="cal-label-year">${O}</span>
+            ?disabled="${r}"
+            @click="${N}">
+            <span class="cal-label-month">${O}</span><span class="cal-label-sep" aria-hidden="true">/</span
+            ><span class="cal-label-year">${k}</span>
           </button>
 
-          <button class="nav-btn" type="button" aria-label="Next" ?disabled="${i}" @click="${j}">
+          <button class="nav-btn" type="button" aria-label="Next" ?disabled="${r}" @click="${M}">
             <ore-icon name="chevron-right" size="16" stroke-width="2" aria-hidden="true"></ore-icon>
           </button>
         </div>
@@ -166,40 +168,40 @@ d(y, {
           class="cal-grid cal-grid-days"
           role="grid"
           part="grid"
-          :aria-label="${() => k.value}"
+          :aria-label="${() => A.value}"
           ?hidden="${() => p.value !== "day"}">
           <div role="row" class="cal-grid-row">
-            ${() => E.value.map((e) => f`<div class="cal-cell cal-cell-head" role="columnheader" aria-label="${e}">${e}</div>`)}
+            ${() => D.value.map((e) => m`<div class="cal-cell cal-cell-head" role="columnheader" aria-label="${e}">${e}</div>`)}
           </div>
           ${() => {
-			let t = C.value, n = [];
+			let t = w.value, n = [];
 			for (let e = 0; e < t.length; e += 7) n.push(t.slice(e, e + 7));
-			return n.map((t) => f`<div role="row" class="cal-grid-row">
-                  ${t.map((t) => f`<div
+			return n.map((t) => m`<div role="row" class="cal-grid-row">
+                  ${t.map((t) => m`<div
                         class="cal-cell cal-cell-day"
                         role="gridcell"
                         part="day"
                         :aria-selected="${() => String(t.isSelected)}"
-                        :aria-disabled="${() => String(t.isDisabled || i.value)}"
+                        :aria-disabled="${() => String(t.isDisabled || r.value)}"
                         :aria-current="${() => t.isToday ? "date" : null}"
                         ?data-selected="${() => t.isSelected}"
                         ?data-today="${() => t.isToday}"
                         ?data-outside="${() => t.isOutsideMonth}"
-                        ?data-disabled="${() => t.isDisabled || i.value}"
+                        ?data-disabled="${() => t.isDisabled || r.value}"
                         data-iso="${t.iso}"
                         data-day="${String(t.day)}"
-                        tabindex="${() => t.isDisabled || i.value ? "-1" : "0"}"
-                        @click="${() => F(t.iso)}"
-                        @keydown="${I}">
+                        tabindex="${() => t.isDisabled || r.value ? "-1" : "0"}"
+                        @click="${() => I(t.iso)}"
+                        @keydown="${L}">
                         ${String(t.day)}
                         ${() => {
-				let n = S.value.get(t.iso) ?? [];
-				if (!n.length) return f``;
-				let r = n.slice(0, b), i = n.length - b;
-				return a.value ? f`<div
+				let n = C.value.get(t.iso) ?? [];
+				if (!n.length) return m``;
+				let r = n.slice(0, S), a = n.length - S;
+				return i.value ? m`<div
                               class="cal-events"
                               aria-label="${() => `${n.length} event${n.length > 1 ? "s" : ""}`}">
-                              ${r.map((t) => f`<ore-badge
+                              ${r.map((t) => m`<ore-badge
                                     class="cal-event-pill"
                                     size="xs"
                                     rounded="sm"
@@ -210,13 +212,13 @@ d(y, {
 				})}">
                                     ${t.label}
                                   </ore-badge>`)}
-                              ${i > 0 ? f`<span class="cal-event-pill-overflow" aria-hidden="true"
-                                      >+${i} more</span
-                                    >` : f``}
-                            </div>` : f`<div
+                              ${a > 0 ? m`<span class="cal-event-pill-overflow" aria-hidden="true"
+                                      >+${a} more</span
+                                    >` : m``}
+                            </div>` : m`<div
                             class="cal-dots"
                             aria-label="${() => `${n.length} event${n.length > 1 ? "s" : ""}`}">
-                            ${r.map((t) => f`<ore-badge
+                            ${r.map((t) => m`<ore-badge
                                   class="cal-dot"
                                   dot
                                   size="xs"
@@ -225,7 +227,7 @@ d(y, {
 					"--badge-bg": t.color,
 					"--badge-border-color": t.color
 				})}"></ore-badge>`)}
-                            ${i > 0 ? f`<span class="cal-dot-overflow" aria-hidden="true">+${i}</span>` : f``}
+                            ${a > 0 ? m`<span class="cal-dot-overflow" aria-hidden="true">+${a}</span>` : m``}
                           </div>`;
 			}}
                       </div>`)}
@@ -237,22 +239,22 @@ d(y, {
         <div
           class="cal-grid cal-grid-months"
           role="grid"
-          :aria-label="${() => O.value}"
+          :aria-label="${() => k.value}"
           ?hidden="${() => p.value !== "month"}">
           ${() => {
-			let e = w.value, t = [];
+			let e = T.value, t = [];
 			for (let n = 0; n < e.length; n += 4) t.push(e.slice(n, n + 4));
-			return t.map((e) => f`<div role="row">
-                  ${e.map((e) => f`<div
+			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 || i.value)}"
+                        :aria-disabled="${() => String(e.isDisabled || r.value)}"
                         ?data-selected="${() => e.isSelected}"
-                        ?data-disabled="${() => e.isDisabled || i.value}"
-                        tabindex="${() => e.isDisabled || i.value ? "-1" : "0"}"
-                        @click="${() => N(e.month)}"
-                        @keydown="${(t) => L(t, ".cal-cell-month", 4, () => N(e.month))}">
+                        ?data-disabled="${() => e.isDisabled || r.value}"
+                        tabindex="${() => e.isDisabled || r.value ? "-1" : "0"}"
+                        @click="${() => P(e.month)}"
+                        @keydown="${(t) => R(t, ".cal-cell-month", 4, () => P(e.month))}">
                         ${e.shortLabel}
                       </div>`)}
                 </div>`);
@@ -266,19 +268,19 @@ d(y, {
           aria-label="Select year"
           ?hidden="${() => p.value !== "year"}">
           ${() => {
-			let e = T.value, t = [];
+			let e = E.value, t = [];
 			for (let n = 0; n < e.length; n += 4) t.push(e.slice(n, n + 4));
-			return t.map((e) => f`<div role="row">
-                  ${e.map((e) => f`<div
+			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 || i.value)}"
+                        :aria-disabled="${() => String(e.isDisabled || r.value)}"
                         ?data-selected="${() => e.isSelected}"
-                        ?data-disabled="${() => e.isDisabled || i.value}"
-                        tabindex="${() => e.isDisabled || i.value ? "-1" : "0"}"
-                        @click="${() => P(e.year)}"
-                        @keydown="${(t) => L(t, ".cal-cell-year", 4, () => P(e.year))}">
+                        ?data-disabled="${() => e.isDisabled || r.value}"
+                        tabindex="${() => e.isDisabled || r.value ? "-1" : "0"}"
+                        @click="${() => F(e.year)}"
+                        @keydown="${(t) => R(t, ".cal-cell-year", 4, () => F(e.year))}">
                         ${String(e.year)}
                       </div>`)}
                 </div>`);
@@ -291,10 +293,10 @@ d(y, {
 	styles: [
 		n,
 		t,
-		u
+		d
 	]
 });
 //#endregion
-export { y as CALENDAR_TAG };
+export { x as CALENDAR_TAG };
 
 //# sourceMappingURL=calendar.js.map

package/dist/calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.js","names":[],"sources":["../src/inputs/calendar/calendar.ts"],"sourcesContent":["import { define, useField, html, prop } from '@vielzeug/ore';\nimport { styleMap } from '@vielzeug/ore/directives';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { Temporal, format } from '@vielzeug/tempo';\n\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../shared';\n\nimport '../../content/icon/icon';\nimport '../../feedback/badge/badge';\nimport { createDatePickerControl, parseIso, toIsoString, type DatePickerView } from '../../headless';\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, reducedMotionMixin } from '../../styles';\nimport componentStyles from './calendar.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport type OreCalendarEvents = {\n  change: { isoValue: string | null };\n};\n\n/**\n * A calendar event entry.\n * Dates must be ISO 8601 strings (yyyy-MM-dd).\n *\n * The `color` field accepts any valid CSS color value (e.g. `'#e11d48'`,\n * `'var(--color-primary)'`). An invalid value silently falls back to the\n * component's theme color. Only pass values you control.\n */\nexport type CalendarEvent = {\n  /**\n   * Any CSS color value for the event dot / pill.\n   * Defaults to the component's theme color when omitted.\n   * Rendered via `styleMap()`, which strips `;`/`{`/`}` so the value can't break out of\n   * its custom-property declaration — it is not a full CSS-color syntax validator, so an\n   * invalid (but injection-safe) value may still render as no color.\n   */\n  color?: string;\n  /** ISO date the event falls on (yyyy-MM-dd) */\n  date: string;\n  /** Unique identifier */\n  id: string;\n  /** Short label shown in the calendar cell */\n  label: string;\n};\n\nexport type OreCalendarProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable all date selection */\n  disabled?: boolean;\n  /**\n   * Array of calendar events to display on day cells.\n   * In normal mode each event renders as a small colored dot (max 3 dots, then \"+N\").\n   * In expanded mode each event renders as a full-width colored pill with its label.\n   * Pass as a JS property or as a JSON-encoded attribute.\n   * @example\n   * ```js\n   * calendar.events = [\n   *   { id: '1', date: '2025-06-15', label: 'Team standup', color: 'var(--color-primary)' },\n   *   { id: '2', date: '2025-06-20', label: 'Release', color: '#e11d48' },\n   * ];\n   * ```\n   */\n  events?: CalendarEvent[];\n  /**\n   * Expanded layout — large cells with top-aligned day numbers suitable\n   * for a full-page calendar app view.\n   */\n  expanded?: boolean;\n  /** Expand to container width */\n  fullwidth?: boolean;\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 (when used inside a form) */\n  name?: string;\n  /** Mark field as required */\n  required?: boolean;\n  /** Border radius override */\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  /**\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-calendar weekend-days=\"[0,6]\"></ore-calendar>\n   * ```\n   */\n  'weekend-days'?: number[];\n};\n\n/**\n * An accessible, keyboard-navigable inline calendar component.\n * Supports day/month/year drill-down views, min/max bounds, disabled weekend\n * days, and optional form association.\n *\n * @element ore-calendar\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 {boolean} disabled - Disable all interaction\n * @attr {boolean} required - Required field (form association)\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\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 - JSON array of day indices to disable (0=Sun…6=Sat)\n * @attr {boolean} fullwidth - Expand to full container width\n * @attr {boolean} expanded - Large-cell calendar-app layout with top-aligned day numbers\n *\n * @fires change - Fired when a date is selected. detail: { isoValue: string | null }\n *\n * @cssprop --calendar-bg - Calendar background\n * @cssprop --calendar-border-color - Calendar border color\n * @cssprop --calendar-radius - Calendar border radius\n * @cssprop --calendar-shadow - Calendar drop shadow\n * @cssprop --calendar-day-selected-bg - Background of selected day cell\n * @cssprop --calendar-day-today-color - Colour of today's date number\n * @cssprop --calendar-day-outside-opacity - Opacity of days outside visible month\n *\n * @part calendar - The root 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 bounds -->\n * <ore-calendar value=\"2025-06-15\" min=\"2025-01-01\" max=\"2025-12-31\" color=\"primary\"></ore-calendar>\n *\n * <!-- Expanded calendar-app layout -->\n * <ore-calendar expanded fullwidth color=\"primary\"></ore-calendar>\n * ```\n */\nexport const CALENDAR_TAG = 'ore-calendar' as const;\n\n/** Maximum event dots/pills shown per cell before \"+N\" overflow */\nconst MAX_EVENTS = 3;\n\n// ── Component ────────────────────────────────────────────────────────────────\n\ndefine<OreCalendarProps, OreCalendarEvents>(CALENDAR_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...roundableBundle,\n    events: prop.json([] as CalendarEvent[]),\n    expanded: prop.bool(false),\n    fullwidth: prop.bool(false),\n    locale: prop.string(),\n    max: prop.string(),\n    min: prop.string(),\n    name: prop.string(),\n    required: prop.bool(false),\n    value: prop.string(),\n    'weekend-days': prop.json([] as number[]),\n  },\n\n  setup(props, { bind, emit }) {\n    // ── Derived flags ────────────────────────────────────────────────────────\n\n    const isDisabled = computed(() => props.disabled.value === true);\n    const isExpanded = computed(() => props.expanded.value === true);\n\n    // ── Selected date: local-override pattern ─────────────────────────────────\n    // `localSelection` holds a user-initiated pick (or undefined = no override).\n    // `selectedDate` derives from it, falling back to the value prop reactively.\n    // This eliminates setInterval polling — external prop changes propagate\n    // through the computed graph automatically.\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    // ── Date-picker control ──────────────────────────────────────────────────\n\n    const ctrl = createDatePickerControl({\n      get locale() {\n        return props.locale.value ?? (typeof navigator !== 'undefined' ? navigator.language : 'en');\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        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. Mutating any one\n    // of them invalidates only the computeds that read it.\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 ───────────────────────────────────────────────────────────\n\n    useField<string>({\n      disabled: isDisabled,\n      toFormValue: (v) => v || null,\n      value: computed(() => toIsoString(selectedDate.value) ?? ''),\n    });\n\n    // ── Events lookup ─────────────────────────────────────────────────────────\n\n    const eventsByDate = computed(() => {\n      const map = new Map<string, CalendarEvent[]>();\n\n      for (const evt of props.events.value ?? []) {\n        const list = map.get(evt.date) ?? [];\n\n        list.push(evt);\n        map.set(evt.date, list);\n      }\n\n      return map;\n    });\n\n    // ── Derived cells ─────────────────────────────────────────────────────────\n    // Each reads a display signal so they re-run when navigation changes.\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\n    const displayMonth_ = computed(() => {\n      const d = Temporal.PlainDate.from({ day: 1, month: displayMonth.value, year: displayYear.value });\n      const loc = props.locale.value ?? (typeof navigator !== 'undefined' ? navigator.language : 'en');\n\n      return format(d, { intl: { month: 'long' }, locale: loc, tz: 'UTC' });\n    });\n\n    const displayYear_ = computed(() => String(displayYear.value));\n    const displayLabel = computed(() => `${displayMonth_.value} ${displayYear_.value}`);\n\n    // ── Navigation ───────────────────────────────────────────────────────────\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    // ── Selection handlers — all disabled guards live here ────────────────────\n\n    function handleSelectMonth(month: number): void {\n      if (isDisabled.value) return;\n\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      if (isDisabled.value) return;\n\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      if (isDisabled.value) return;\n\n      const date = parseIso(isoStr);\n\n      if (!date) return;\n\n      ctrl.select(date); // ctrl.select() internally rejects disabled/out-of-range dates\n    }\n\n    // ── Day-cell keyboard navigation (full ARIA grid pattern) ─────────────────\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]; // first cell in same row\n      } else if (e.key === 'End') {\n        target = allCells[Math.floor(idx / 7) * 7 + 6]; // last cell in same row\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    // ── Host bindings ────────────────────────────────────────────────────────\n\n    bind({\n      attr: {\n        'aria-disabled': () => (isDisabled.value ? 'true' : null),\n        'aria-label': () => displayLabel.value,\n        role: 'group',\n      },\n      class: {\n        'is-disabled': isDisabled,\n      },\n    });\n\n    // ── Template ─────────────────────────────────────────────────────────────\n\n    return html`\n      <div class=\"calendar\" part=\"calendar\" role=\"presentation\">\n        <!-- Header -->\n        <div class=\"cal-header\" part=\"header\">\n          <button class=\"nav-btn\" type=\"button\" aria-label=\"Previous\" ?disabled=\"${isDisabled}\" @click=\"${handlePrev}\">\n            <ore-icon name=\"chevron-left\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n          </button>\n\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            ?disabled=\"${isDisabled}\"\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\n          <button class=\"nav-btn\" type=\"button\" aria-label=\"Next\" ?disabled=\"${isDisabled}\" @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 -->\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 || isDisabled.value)}\"\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 || isDisabled.value}\"\n                        data-iso=\"${cell.iso}\"\n                        data-day=\"${String(cell.day)}\"\n                        tabindex=\"${() => (cell.isDisabled || isDisabled.value ? '-1' : '0')}\"\n                        @click=\"${() => handleSelectDay(cell.iso)}\"\n                        @keydown=\"${handleDayKeydown}\">\n                        ${String(cell.day)}\n                        ${() => {\n                          const evts = eventsByDate.value.get(cell.iso) ?? [];\n\n                          if (!evts.length) return html``;\n\n                          const shown = evts.slice(0, MAX_EVENTS);\n                          const overflow = evts.length - MAX_EVENTS;\n\n                          if (isExpanded.value) {\n                            return html`<div\n                              class=\"cal-events\"\n                              aria-label=\"${() => `${evts.length} event${evts.length > 1 ? 's' : ''}`}\">\n                              ${shown.map(\n                                (evt) =>\n                                  html`<ore-badge\n                                    class=\"cal-event-pill\"\n                                    size=\"xs\"\n                                    rounded=\"sm\"\n                                    aria-label=\"${evt.label}\"\n                                    :style=\"${styleMap({\n                                      '--badge-bg': evt.color,\n                                      '--badge-border-color': evt.color,\n                                    })}\">\n                                    ${evt.label}\n                                  </ore-badge>`,\n                              )}\n                              ${\n                                overflow > 0\n                                  ? html`<span class=\"cal-event-pill-overflow\" aria-hidden=\"true\"\n                                      >+${overflow} more</span\n                                    >`\n                                  : html``\n                              }\n                            </div>`;\n                          }\n\n                          return html`<div\n                            class=\"cal-dots\"\n                            aria-label=\"${() => `${evts.length} event${evts.length > 1 ? 's' : ''}`}\">\n                            ${shown.map(\n                              (evt) =>\n                                html`<ore-badge\n                                  class=\"cal-dot\"\n                                  dot\n                                  size=\"xs\"\n                                  aria-hidden=\"true\"\n                                  :style=\"${styleMap({\n                                    '--badge-bg': evt.color,\n                                    '--badge-border-color': evt.color,\n                                  })}\"></ore-badge>`,\n                            )}\n                            ${\n                              overflow > 0\n                                ? html`<span class=\"cal-dot-overflow\" aria-hidden=\"true\">+${overflow}</span>`\n                                : html``\n                            }\n                          </div>`;\n                        }}\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 || isDisabled.value)}\"\n                        ?data-selected=\"${() => cell.isSelected}\"\n                        ?data-disabled=\"${() => cell.isDisabled || isDisabled.value}\"\n                        tabindex=\"${() => (cell.isDisabled || isDisabled.value ? '-1' : '0')}\"\n                        @click=\"${() => handleSelectMonth(cell.month)}\"\n                        @keydown=\"${(e: KeyboardEvent) =>\n                          handleGridKeydown(e, '.cal-cell-month', 4, () => handleSelectMonth(cell.month))}\">\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 || isDisabled.value)}\"\n                        ?data-selected=\"${() => cell.isSelected}\"\n                        ?data-disabled=\"${() => cell.isDisabled || isDisabled.value}\"\n                        tabindex=\"${() => (cell.isDisabled || isDisabled.value ? '-1' : '0')}\"\n                        @click=\"${() => handleSelectYear(cell.year)}\"\n                        @keydown=\"${(e: KeyboardEvent) =>\n                          handleGridKeydown(e, '.cal-cell-year', 4, () => handleSelectYear(cell.year))}\">\n                        ${String(cell.year)}\n                      </div>`,\n                  )}\n                </div>`,\n            );\n          }}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [colorThemeMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"calendar.js","names":[],"sources":["../src/inputs/calendar/calendar.ts"],"sourcesContent":["import { define, html, prop, bind, useEmit } from '@vielzeug/ore';\nimport { styleMap } from '@vielzeug/ore/directives';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { Temporal, format } from '@vielzeug/tempo';\n\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../shared';\n\nimport '../../content/icon/icon';\nimport '../../feedback/badge/badge';\nimport { createDatePickerControl, parseIso, toIsoString, type DatePickerView } from '../../headless';\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, reducedMotionMixin } from '../../styles';\nimport componentStyles from './calendar.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport type OreCalendarEvents = {\n  change: { isoValue: string | null };\n};\n\n/**\n * A calendar event entry.\n * Dates must be ISO 8601 strings (yyyy-MM-dd).\n *\n * The `color` field accepts any valid CSS color value (e.g. `'#e11d48'`,\n * `'var(--color-primary)'`). An invalid value silently falls back to the\n * component's theme color. Only pass values you control.\n */\nexport type CalendarEvent = {\n  /**\n   * Any CSS color value for the event dot / pill.\n   * Defaults to the component's theme color when omitted.\n   * Rendered via `styleMap()`, which strips `;`/`{`/`}` so the value can't break out of\n   * its custom-property declaration — it is not a full CSS-color syntax validator, so an\n   * invalid (but injection-safe) value may still render as no color.\n   */\n  color?: string;\n  /** ISO date the event falls on (yyyy-MM-dd) */\n  date: string;\n  /** Unique identifier */\n  id: string;\n  /** Short label shown in the calendar cell */\n  label: string;\n};\n\nexport type OreCalendarProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable all date selection */\n  disabled?: boolean;\n  /**\n   * Array of calendar events to display on day cells.\n   * In normal mode each event renders as a small colored dot (max 3 dots, then \"+N\").\n   * In expanded mode each event renders as a full-width colored pill with its label.\n   * Pass as a JS property or as a JSON-encoded attribute.\n   * @example\n   * ```js\n   * calendar.events = [\n   *   { id: '1', date: '2025-06-15', label: 'Team standup', color: 'var(--color-primary)' },\n   *   { id: '2', date: '2025-06-20', label: 'Release', color: '#e11d48' },\n   * ];\n   * ```\n   */\n  events?: CalendarEvent[];\n  /**\n   * Expanded layout — large cells with top-aligned day numbers suitable\n   * for a full-page calendar app view.\n   */\n  expanded?: boolean;\n  /** Expand to container width */\n  fullwidth?: boolean;\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 (when used inside a form) */\n  name?: string;\n  /** Mark field as required */\n  required?: boolean;\n  /** Border radius override */\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  /**\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-calendar weekend-days=\"[0,6]\"></ore-calendar>\n   * ```\n   */\n  'weekend-days'?: number[];\n};\n\n/**\n * An accessible, keyboard-navigable inline calendar component.\n * Supports day/month/year drill-down views, min/max bounds, disabled weekend\n * days, and optional form association.\n *\n * @element ore-calendar\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 {boolean} disabled - Disable all interaction\n * @attr {boolean} required - Required field (form association)\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\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 - JSON array of day indices to disable (0=Sun…6=Sat)\n * @attr {boolean} fullwidth - Expand to full container width\n * @attr {boolean} expanded - Large-cell calendar-app layout with top-aligned day numbers\n *\n * @fires change - Fired when a date is selected. detail: { isoValue: string | null }\n *\n * @cssprop --calendar-bg - Calendar background\n * @cssprop --calendar-border-color - Calendar border color\n * @cssprop --calendar-radius - Calendar border radius\n * @cssprop --calendar-shadow - Calendar drop shadow\n * @cssprop --calendar-day-selected-bg - Background of selected day cell\n * @cssprop --calendar-day-today-color - Colour of today's date number\n * @cssprop --calendar-day-outside-opacity - Opacity of days outside visible month\n *\n * @part calendar - The root 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 bounds -->\n * <ore-calendar value=\"2025-06-15\" min=\"2025-01-01\" max=\"2025-12-31\" color=\"primary\"></ore-calendar>\n *\n * <!-- Expanded calendar-app layout -->\n * <ore-calendar expanded fullwidth color=\"primary\"></ore-calendar>\n * ```\n */\nexport const CALENDAR_TAG = 'ore-calendar' as const;\n\n/** Maximum event dots/pills shown per cell before \"+N\" overflow */\nconst MAX_EVENTS = 3;\n\n// ── Component ────────────────────────────────────────────────────────────────\n\ndefine<OreCalendarProps>(CALENDAR_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...roundableBundle,\n    events: prop.json([] as CalendarEvent[]),\n    expanded: prop.bool(false),\n    fullwidth: prop.bool(false),\n    locale: prop.string(),\n    max: prop.string(),\n    min: prop.string(),\n    name: prop.string(),\n    required: prop.bool(false),\n    value: prop.string(),\n    'weekend-days': prop.json([] as number[]),\n  },\n\n  setup(props) {\n    const emit = useEmit<OreCalendarEvents>();\n\n    // ── Derived flags ────────────────────────────────────────────────────────\n\n    const isDisabled = computed(() => props.disabled.value === true);\n    const isExpanded = computed(() => props.expanded.value === true);\n\n    // ── Selected date: local-override pattern ─────────────────────────────────\n    // `localSelection` holds a user-initiated pick (or undefined = no override).\n    // `selectedDate` derives from it, falling back to the value prop reactively.\n    // This eliminates setInterval polling — external prop changes propagate\n    // through the computed graph automatically.\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    // ── Date-picker control ──────────────────────────────────────────────────\n\n    const ctrl = createDatePickerControl({\n      get locale() {\n        return props.locale.value ?? (typeof navigator !== 'undefined' ? navigator.language : 'en');\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        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. Mutating any one\n    // of them invalidates only the computeds that read it.\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 ───────────────────────────────────────────────────────────\n\n    useField<string>({\n      disabled: isDisabled,\n      toFormValue: (v) => v || null,\n      value: computed(() => toIsoString(selectedDate.value) ?? ''),\n    });\n\n    // ── Events lookup ─────────────────────────────────────────────────────────\n\n    const eventsByDate = computed(() => {\n      const map = new Map<string, CalendarEvent[]>();\n\n      for (const evt of props.events.value ?? []) {\n        const list = map.get(evt.date) ?? [];\n\n        list.push(evt);\n        map.set(evt.date, list);\n      }\n\n      return map;\n    });\n\n    // ── Derived cells ─────────────────────────────────────────────────────────\n    // Each reads a display signal so they re-run when navigation changes.\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\n    const displayMonth_ = computed(() => {\n      const d = Temporal.PlainDate.from({ day: 1, month: displayMonth.value, year: displayYear.value });\n      const loc = props.locale.value ?? (typeof navigator !== 'undefined' ? navigator.language : 'en');\n\n      return format(d, { intl: { month: 'long' }, locale: loc, tz: 'UTC' });\n    });\n\n    const displayYear_ = computed(() => String(displayYear.value));\n    const displayLabel = computed(() => `${displayMonth_.value} ${displayYear_.value}`);\n\n    // ── Navigation ───────────────────────────────────────────────────────────\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    // ── Selection handlers — all disabled guards live here ────────────────────\n\n    function handleSelectMonth(month: number): void {\n      if (isDisabled.value) return;\n\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      if (isDisabled.value) return;\n\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      if (isDisabled.value) return;\n\n      const date = parseIso(isoStr);\n\n      if (!date) return;\n\n      ctrl.select(date); // ctrl.select() internally rejects disabled/out-of-range dates\n    }\n\n    // ── Day-cell keyboard navigation (full ARIA grid pattern) ─────────────────\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]; // first cell in same row\n      } else if (e.key === 'End') {\n        target = allCells[Math.floor(idx / 7) * 7 + 6]; // last cell in same row\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    // ── Host bindings ────────────────────────────────────────────────────────\n\n    bind({\n      attr: {\n        'aria-disabled': () => (isDisabled.value ? 'true' : null),\n        'aria-label': () => displayLabel.value,\n        role: 'group',\n      },\n      class: {\n        'is-disabled': isDisabled,\n      },\n    });\n\n    // ── Template ─────────────────────────────────────────────────────────────\n\n    return html`\n      <div class=\"calendar\" part=\"calendar\" role=\"presentation\">\n        <!-- Header -->\n        <div class=\"cal-header\" part=\"header\">\n          <button class=\"nav-btn\" type=\"button\" aria-label=\"Previous\" ?disabled=\"${isDisabled}\" @click=\"${handlePrev}\">\n            <ore-icon name=\"chevron-left\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n          </button>\n\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            ?disabled=\"${isDisabled}\"\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\n          <button class=\"nav-btn\" type=\"button\" aria-label=\"Next\" ?disabled=\"${isDisabled}\" @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 -->\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 || isDisabled.value)}\"\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 || isDisabled.value}\"\n                        data-iso=\"${cell.iso}\"\n                        data-day=\"${String(cell.day)}\"\n                        tabindex=\"${() => (cell.isDisabled || isDisabled.value ? '-1' : '0')}\"\n                        @click=\"${() => handleSelectDay(cell.iso)}\"\n                        @keydown=\"${handleDayKeydown}\">\n                        ${String(cell.day)}\n                        ${() => {\n                          const evts = eventsByDate.value.get(cell.iso) ?? [];\n\n                          if (!evts.length) return html``;\n\n                          const shown = evts.slice(0, MAX_EVENTS);\n                          const overflow = evts.length - MAX_EVENTS;\n\n                          if (isExpanded.value) {\n                            return html`<div\n                              class=\"cal-events\"\n                              aria-label=\"${() => `${evts.length} event${evts.length > 1 ? 's' : ''}`}\">\n                              ${shown.map(\n                                (evt) =>\n                                  html`<ore-badge\n                                    class=\"cal-event-pill\"\n                                    size=\"xs\"\n                                    rounded=\"sm\"\n                                    aria-label=\"${evt.label}\"\n                                    :style=\"${styleMap({\n                                      '--badge-bg': evt.color,\n                                      '--badge-border-color': evt.color,\n                                    })}\">\n                                    ${evt.label}\n                                  </ore-badge>`,\n                              )}\n                              ${\n                                overflow > 0\n                                  ? html`<span class=\"cal-event-pill-overflow\" aria-hidden=\"true\"\n                                      >+${overflow} more</span\n                                    >`\n                                  : html``\n                              }\n                            </div>`;\n                          }\n\n                          return html`<div\n                            class=\"cal-dots\"\n                            aria-label=\"${() => `${evts.length} event${evts.length > 1 ? 's' : ''}`}\">\n                            ${shown.map(\n                              (evt) =>\n                                html`<ore-badge\n                                  class=\"cal-dot\"\n                                  dot\n                                  size=\"xs\"\n                                  aria-hidden=\"true\"\n                                  :style=\"${styleMap({\n                                    '--badge-bg': evt.color,\n                                    '--badge-border-color': evt.color,\n                                  })}\"></ore-badge>`,\n                            )}\n                            ${\n                              overflow > 0\n                                ? html`<span class=\"cal-dot-overflow\" aria-hidden=\"true\">+${overflow}</span>`\n                                : html``\n                            }\n                          </div>`;\n                        }}\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 || isDisabled.value)}\"\n                        ?data-selected=\"${() => cell.isSelected}\"\n                        ?data-disabled=\"${() => cell.isDisabled || isDisabled.value}\"\n                        tabindex=\"${() => (cell.isDisabled || isDisabled.value ? '-1' : '0')}\"\n                        @click=\"${() => handleSelectMonth(cell.month)}\"\n                        @keydown=\"${(e: KeyboardEvent) =>\n                          handleGridKeydown(e, '.cal-cell-month', 4, () => handleSelectMonth(cell.month))}\">\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 || isDisabled.value)}\"\n                        ?data-selected=\"${() => cell.isSelected}\"\n                        ?data-disabled=\"${() => cell.isDisabled || isDisabled.value}\"\n                        tabindex=\"${() => (cell.isDisabled || isDisabled.value ? '-1' : '0')}\"\n                        @click=\"${() => handleSelectYear(cell.year)}\"\n                        @keydown=\"${(e: KeyboardEvent) =>\n                          handleGridKeydown(e, '.cal-cell-year', 4, () => handleSelectYear(cell.year))}\">\n                        ${String(cell.year)}\n                      </div>`,\n                  )}\n                </div>`,\n            );\n          }}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [colorThemeMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}

package/dist/card.cjs

@@ -1,20 +1,20 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/variants.css.cjs"),n=require("./styles/index.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./headless/keyboard.cjs"),a=require("./content/card/card.css?inline.cjs");let o=require("@vielzeug/ore"),s=require("@vielzeug/ripple");var c=`button, a[href], input, select, textarea, summary, [role="button"], [role="link"], [contenteditable=""], [contenteditable="true"]`;function l(e,t){for(let n of t.composedPath())if(n instanceof HTMLElement){if(n===e)return!1;if(n.matches(c)||n.closest(c))return!0}return!1}var u=`ore-card`;(0,o.define)(u,{props:{...r.themableBundle,...r.disablableBundle,...r.loadableBundle,elevation:o.prop.number(),interactive:o.prop.bool(!1),orientation:o.prop.string(),padding:o.prop.string(),variant:o.prop.string()},setup(e,{bind:t,el:n,emit:r,slots:a,watch:c}){t({attr:{ariaBusy:()=>e.loading.value?`true`:`false`,ariaDisabled:()=>e.interactive.value?String(e.disabled.value):null,role:()=>e.interactive.value?`button`:null}}),c(()=>{e.interactive.value?n.setAttribute(`tabindex`,e.disabled.value?`-1`:`0`):n.removeAttribute(`tabindex`)});let u=i.createInteraction({disabled:(0,s.computed)(()=>!e.interactive.value||!!e.disabled.value),onPress:(e,t)=>{r(`activate`,{originalEvent:e,trigger:t})}}),d=t=>{!e.interactive.value||e.disabled.value||l(n,t)||u.handleClick(t)},f=e=>{u.handleKeydown(e)};return t({on:{click:e=>d(e),keydown:e=>f(e)}}),o.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/variants.css.cjs"),n=require("./styles/index.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./headless/keyboard.cjs"),a=require("./content/card/card.css.cjs");let o=require("@vielzeug/ore"),s=require("@vielzeug/ripple");var c=`button, a[href], input, select, textarea, summary, [role="button"], [role="link"], [contenteditable=""], [contenteditable="true"]`;function l(e,t){for(let n of t.composedPath())if(n instanceof HTMLElement){if(n===e)return!1;if(n.matches(c)||n.closest(c))return!0}return!1}var u=`ore-card`;(0,o.define)(u,{props:{...r.themableBundle,...r.disablableBundle,...r.loadableBundle,elevation:o.prop.number(),interactive:o.prop.bool(!1),orientation:o.prop.string(),padding:o.prop.string(),variant:o.prop.string()},setup(e){let t=(0,o.getHost)(),n=(0,o.useEmit)(),r=(0,o.useSlots)(),a=o.watchEffect;(0,o.bind)({attr:{ariaBusy:()=>e.loading.value?`true`:`false`,ariaDisabled:()=>e.interactive.value?String(e.disabled.value):null,role:()=>e.interactive.value?`button`:null}}),a(()=>{e.interactive.value?t.setAttribute(`tabindex`,e.disabled.value?`-1`:`0`):t.removeAttribute(`tabindex`)});let c=i.createInteraction({disabled:(0,s.computed)(()=>!e.interactive.value||!!e.disabled.value),onPress:(e,t)=>{n(`activate`,{originalEvent:e,trigger:t})}}),u=n=>{!e.interactive.value||e.disabled.value||l(t,n)||c.handleClick(n)},d=e=>{c.handleKeydown(e)};return(0,o.bind)({on:{click:e=>u(e),keydown:e=>d(e)}}),o.html`
       <div class="card" part="card">
         <div class="loading-bar" part="loading-bar"></div>
-        <div class="card-media" part="media" ?hidden="${()=>!a.has(`media`).value}">
+        <div class="card-media" part="media" ?hidden="${()=>!r.has(`media`).value}">
           <slot name="media"></slot>
         </div>
         <div class="card-body" part="body">
-          <div class="card-header" part="header" ?hidden="${()=>!a.has(`header`).value}">
+          <div class="card-header" part="header" ?hidden="${()=>!r.has(`header`).value}">
             <slot name="header"></slot>
           </div>
-          <div class="card-content" part="content" ?hidden="${()=>!a.has().value}">
+          <div class="card-content" part="content" ?hidden="${()=>!r.has().value}">
             <slot></slot>
           </div>
-          <div class="card-footer" part="footer" ?hidden="${()=>!a.has(`footer`).value}">
+          <div class="card-footer" part="footer" ?hidden="${()=>!r.has(`footer`).value}">
             <slot name="footer"></slot>
           </div>
-          <div class="card-actions" part="actions" ?hidden="${()=>!a.has(`actions`).value}">
+          <div class="card-actions" part="actions" ?hidden="${()=>!r.has(`actions`).value}">
             <slot name="actions"></slot>
           </div>
         </div>

package/dist/card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"card.cjs","names":[],"sources":["../src/content/card/card.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { ElevationLevel, PaddingSize, ThemeColor } from '../../types';\n\nimport { createInteraction } from '../../headless';\nimport { disablableBundle, loadableBundle, themableBundle } from '../../shared';\nimport { frostVariantMixin, reducedMotionMixin, surfaceMixins } from '../../styles';\nimport componentStyles from './card.css?inline';\n\nconst INTERACTIVE_DESCENDANT_SELECTOR =\n  'button, a[href], input, select, textarea, summary, [role=\"button\"], [role=\"link\"], [contenteditable=\"\"], [contenteditable=\"true\"]';\n\nfunction isNestedInteractiveTarget(host: HTMLElement, event: Event): boolean {\n  for (const node of event.composedPath()) {\n    if (!(node instanceof HTMLElement)) continue;\n\n    if (node === host) return false;\n\n    if (node.matches(INTERACTIVE_DESCENDANT_SELECTOR) || !!node.closest(INTERACTIVE_DESCENDANT_SELECTOR)) {\n      return true;\n    }\n  }\n\n  return false;\n}\n\n/** Card component properties */\n\nexport type OreCardEvents = {\n  activate: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' };\n};\n\nexport type OreCardProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Shadow elevation level (0-5) */\n  elevation?: ElevationLevel;\n  /** Make the card interactive (role=button, keyboard nav, emits activate) */\n  interactive?: boolean;\n  /** Show a loading progress bar */\n  loading?: boolean;\n  /** Card orientation */\n  orientation?: 'horizontal';\n  /** Internal padding size */\n  padding?: PaddingSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'glass' | 'frost';\n};\n\n/**\n * A versatile card container with semantic slots for media, header, body, footer, and actions.\n *\n * @element ore-card\n *\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'glass' | 'frost'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} padding - Internal padding: 'none' | 'sm' | 'md' | 'lg' | 'xl'\n * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'\n * @attr {string} orientation - Card layout: 'horizontal'\n * @attr {boolean} interactive - Enable pointer/keyboard activation\n * @attr {boolean} disabled - Disable card interaction\n * @attr {boolean} loading - Show loading progress bar\n *\n * @fires activate - Emitted when an interactive card is activated. detail: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' }\n *\n * @slot media - Media content displayed at top/left\n * @slot header - Card header (title, subtitle)\n * @slot - Main card content\n * @slot footer - Card footer content\n * @slot actions - Action buttons or links\n *\n * @cssprop --card-bg - Background color\n * @cssprop --card-color - Text color\n * @cssprop --card-border - Border width\n * @cssprop --card-border-color - Border color\n * @cssprop --card-radius - Border radius\n * @cssprop --card-padding - Internal padding\n * @cssprop --card-shadow - Box shadow\n * @cssprop --card-hover-shadow - Shadow on hover\n *\n * @part card - Card root container.\n * @part loading-bar - Loading progress bar.\n * @part media - Media slot container.\n * @part body - Body content container.\n * @part header - Header container.\n * @part content - Content container.\n * @part footer - Footer container.\n * @part actions - Actions slot container.\n * @example\n * ```html\n * <ore-card elevation=\"2\"><h3 slot=\"header\">Title</h3><p>Content</p></ore-card>\n * <ore-card interactive color=\"primary\"><h3 slot=\"header\">Click me</h3></ore-card>\n * <ore-card variant=\"frost\" color=\"secondary\">Frosted card</ore-card>\n * ```\n */\nexport const CARD_TAG = 'ore-card' as const;\ndefine<OreCardProps, OreCardEvents>(CARD_TAG, {\n  props: {\n    ...themableBundle,\n    ...disablableBundle,\n    ...loadableBundle,\n    elevation: prop.number<ElevationLevel>(),\n    interactive: prop.bool(false),\n    orientation: prop.string<'horizontal'>(),\n    padding: prop.string<PaddingSize>(),\n    variant: prop.string<'solid' | 'flat' | 'glass' | 'frost'>(),\n  },\n\n  setup(props, { bind, el, emit, slots, watch }) {\n    bind({\n      attr: {\n        ariaBusy: () => (props.loading.value ? 'true' : 'false'),\n        ariaDisabled: () => (props.interactive.value ? String(props.disabled.value) : null),\n        role: () => (props.interactive.value ? 'button' : null),\n      },\n    });\n\n    watch(() => {\n      if (props.interactive.value) {\n        el.setAttribute('tabindex', props.disabled.value ? '-1' : '0');\n      } else {\n        el.removeAttribute('tabindex');\n      }\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Event Handlers\n    // ────────────────────────────────────────────────────────────────\n\n    const pressControl = createInteraction({\n      disabled: computed(() => !props.interactive.value || Boolean(props.disabled.value)),\n      onPress: (originalEvent, trigger) => {\n        emit('activate', { originalEvent, trigger });\n      },\n    });\n\n    const handleClick = (e: MouseEvent) => {\n      if (!props.interactive.value || props.disabled.value) return;\n\n      if (isNestedInteractiveTarget(el, e)) return;\n\n      pressControl.handleClick(e);\n    };\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      pressControl.handleKeydown(e);\n    };\n\n    bind({\n      on: {\n        click: (e: MouseEvent) => handleClick(e),\n        keydown: (e: KeyboardEvent) => handleKeydown(e),\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Template\n    // ────────────────────────────────────────────────────────────────\n\n    return html`\n      <div class=\"card\" part=\"card\">\n        <div class=\"loading-bar\" part=\"loading-bar\"></div>\n        <div class=\"card-media\" part=\"media\" ?hidden=\"${() => !slots.has('media').value}\">\n          <slot name=\"media\"></slot>\n        </div>\n        <div class=\"card-body\" part=\"body\">\n          <div class=\"card-header\" part=\"header\" ?hidden=\"${() => !slots.has('header').value}\">\n            <slot name=\"header\"></slot>\n          </div>\n          <div class=\"card-content\" part=\"content\" ?hidden=\"${() => !slots.has().value}\">\n            <slot></slot>\n          </div>\n          <div class=\"card-footer\" part=\"footer\" ?hidden=\"${() => !slots.has('footer').value}\">\n            <slot name=\"footer\"></slot>\n          </div>\n          <div class=\"card-actions\" part=\"actions\" ?hidden=\"${() => !slots.has('actions').value}\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  },\n\n  styles: [...surfaceMixins, frostVariantMixin('.card'), reducedMotionMixin, componentStyles],\n});\n"],"mappings":"mYAUA,IAAM,EACJ,oIAEF,SAAS,EAA0B,EAAmB,EAAuB,CAC3E,IAAK,IAAM,KAAQ,EAAM,aAAa,EAC9B,gBAAgB,YAEtB,IAAI,IAAS,EAAM,MAAO,GAE1B,GAAI,EAAK,QAAQ,CAA+B,GAAO,EAAK,QAAQ,CAA+B,EACjG,MAAO,EAHiB,CAO5B,MAAO,EACT,CAyEA,IAAa,EAAW,wBACY,EAAU,CAC5C,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,iBACH,GAAG,EAAA,eACH,UAAW,EAAA,KAAK,OAAuB,EACvC,YAAa,EAAA,KAAK,KAAK,EAAK,EAC5B,YAAa,EAAA,KAAK,OAAqB,EACvC,QAAS,EAAA,KAAK,OAAoB,EAClC,QAAS,EAAA,KAAK,OAA6C,CAC7D,EAEA,MAAM,EAAO,CAAE,OAAM,KAAI,OAAM,QAAO,SAAS,CAC7C,EAAK,CACH,KAAM,CACJ,aAAiB,EAAM,QAAQ,MAAQ,OAAS,QAChD,iBAAqB,EAAM,YAAY,MAAQ,OAAO,EAAM,SAAS,KAAK,EAAI,KAC9E,SAAa,EAAM,YAAY,MAAQ,SAAW,IACpD,CACF,CAAC,EAED,MAAY,CACN,EAAM,YAAY,MACpB,EAAG,aAAa,WAAY,EAAM,SAAS,MAAQ,KAAO,GAAG,EAE7D,EAAG,gBAAgB,UAAU,CAEjC,CAAC,EAMD,IAAM,EAAe,EAAA,kBAAkB,CACrC,UAAA,EAAA,EAAA,SAAA,KAAyB,CAAC,EAAM,YAAY,OAAS,EAAQ,EAAM,SAAS,KAAM,EAClF,SAAU,EAAe,IAAY,CACnC,EAAK,WAAY,CAAE,gBAAe,SAAQ,CAAC,CAC7C,CACF,CAAC,EAEK,EAAe,GAAkB,CACjC,CAAC,EAAM,YAAY,OAAS,EAAM,SAAS,OAE3C,EAA0B,EAAI,CAAC,GAEnC,EAAa,YAAY,CAAC,CAC5B,EAEM,EAAiB,GAAqB,CAC1C,EAAa,cAAc,CAAC,CAC9B,EAaA,OAXA,EAAK,CACH,GAAI,CACF,MAAQ,GAAkB,EAAY,CAAC,EACvC,QAAU,GAAqB,EAAc,CAAC,CAChD,CACF,CAAC,EAMM,EAAA,IAAI;;;4DAG+C,CAAC,EAAM,IAAI,OAAO,CAAC,CAAC,MAAM;;;;gEAItB,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;kEAGzB,CAAC,EAAM,IAAI,CAAC,CAAC,MAAM;;;gEAGrB,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;kEAGzB,CAAC,EAAM,IAAI,SAAS,CAAC,CAAC,MAAM;;;;;KAM9F,EAEA,OAAQ,CAAC,GAAG,EAAA,cAAe,EAAA,kBAAkB,OAAO,EAAG,EAAA,mBAAoB,EAAA,OAAe,CAC5F,CAAC"}
+{"version":3,"file":"card.cjs","names":[],"sources":["../src/content/card/card.ts"],"sourcesContent":["import { define, html, prop, bind, getHost, useEmit, useSlots, watchEffect } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { ElevationLevel, PaddingSize, ThemeColor } from '../../types';\n\nimport { createInteraction } from '../../headless';\nimport { disablableBundle, loadableBundle, themableBundle } from '../../shared';\nimport { frostVariantMixin, reducedMotionMixin, surfaceMixins } from '../../styles';\nimport componentStyles from './card.css?inline';\n\nconst INTERACTIVE_DESCENDANT_SELECTOR =\n  'button, a[href], input, select, textarea, summary, [role=\"button\"], [role=\"link\"], [contenteditable=\"\"], [contenteditable=\"true\"]';\n\nfunction isNestedInteractiveTarget(host: HTMLElement, event: Event): boolean {\n  for (const node of event.composedPath()) {\n    if (!(node instanceof HTMLElement)) continue;\n\n    if (node === host) return false;\n\n    if (node.matches(INTERACTIVE_DESCENDANT_SELECTOR) || !!node.closest(INTERACTIVE_DESCENDANT_SELECTOR)) {\n      return true;\n    }\n  }\n\n  return false;\n}\n\n/** Card component properties */\n\nexport type OreCardEvents = {\n  activate: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' };\n};\n\nexport type OreCardProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Shadow elevation level (0-5) */\n  elevation?: ElevationLevel;\n  /** Make the card interactive (role=button, keyboard nav, emits activate) */\n  interactive?: boolean;\n  /** Show a loading progress bar */\n  loading?: boolean;\n  /** Card orientation */\n  orientation?: 'horizontal';\n  /** Internal padding size */\n  padding?: PaddingSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'glass' | 'frost';\n};\n\n/**\n * A versatile card container with semantic slots for media, header, body, footer, and actions.\n *\n * @element ore-card\n *\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'glass' | 'frost'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} padding - Internal padding: 'none' | 'sm' | 'md' | 'lg' | 'xl'\n * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'\n * @attr {string} orientation - Card layout: 'horizontal'\n * @attr {boolean} interactive - Enable pointer/keyboard activation\n * @attr {boolean} disabled - Disable card interaction\n * @attr {boolean} loading - Show loading progress bar\n *\n * @fires activate - Emitted when an interactive card is activated. detail: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' }\n *\n * @slot media - Media content displayed at top/left\n * @slot header - Card header (title, subtitle)\n * @slot - Main card content\n * @slot footer - Card footer content\n * @slot actions - Action buttons or links\n *\n * @cssprop --card-bg - Background color\n * @cssprop --card-color - Text color\n * @cssprop --card-border - Border width\n * @cssprop --card-border-color - Border color\n * @cssprop --card-radius - Border radius\n * @cssprop --card-padding - Internal padding\n * @cssprop --card-shadow - Box shadow\n * @cssprop --card-hover-shadow - Shadow on hover\n *\n * @part card - Card root container.\n * @part loading-bar - Loading progress bar.\n * @part media - Media slot container.\n * @part body - Body content container.\n * @part header - Header container.\n * @part content - Content container.\n * @part footer - Footer container.\n * @part actions - Actions slot container.\n * @example\n * ```html\n * <ore-card elevation=\"2\"><h3 slot=\"header\">Title</h3><p>Content</p></ore-card>\n * <ore-card interactive color=\"primary\"><h3 slot=\"header\">Click me</h3></ore-card>\n * <ore-card variant=\"frost\" color=\"secondary\">Frosted card</ore-card>\n * ```\n */\nexport const CARD_TAG = 'ore-card' as const;\ndefine<OreCardProps>(CARD_TAG, {\n  props: {\n    ...themableBundle,\n    ...disablableBundle,\n    ...loadableBundle,\n    elevation: prop.number<ElevationLevel>(),\n    interactive: prop.bool(false),\n    orientation: prop.string<'horizontal'>(),\n    padding: prop.string<PaddingSize>(),\n    variant: prop.string<'solid' | 'flat' | 'glass' | 'frost'>(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCardEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    bind({\n      attr: {\n        ariaBusy: () => (props.loading.value ? 'true' : 'false'),\n        ariaDisabled: () => (props.interactive.value ? String(props.disabled.value) : null),\n        role: () => (props.interactive.value ? 'button' : null),\n      },\n    });\n\n    watch(() => {\n      if (props.interactive.value) {\n        el.setAttribute('tabindex', props.disabled.value ? '-1' : '0');\n      } else {\n        el.removeAttribute('tabindex');\n      }\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Event Handlers\n    // ────────────────────────────────────────────────────────────────\n\n    const pressControl = createInteraction({\n      disabled: computed(() => !props.interactive.value || Boolean(props.disabled.value)),\n      onPress: (originalEvent, trigger) => {\n        emit('activate', { originalEvent, trigger });\n      },\n    });\n\n    const handleClick = (e: MouseEvent) => {\n      if (!props.interactive.value || props.disabled.value) return;\n\n      if (isNestedInteractiveTarget(el, e)) return;\n\n      pressControl.handleClick(e);\n    };\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      pressControl.handleKeydown(e);\n    };\n\n    bind({\n      on: {\n        click: (e: MouseEvent) => handleClick(e),\n        keydown: (e: KeyboardEvent) => handleKeydown(e),\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Template\n    // ────────────────────────────────────────────────────────────────\n\n    return html`\n      <div class=\"card\" part=\"card\">\n        <div class=\"loading-bar\" part=\"loading-bar\"></div>\n        <div class=\"card-media\" part=\"media\" ?hidden=\"${() => !slots.has('media').value}\">\n          <slot name=\"media\"></slot>\n        </div>\n        <div class=\"card-body\" part=\"body\">\n          <div class=\"card-header\" part=\"header\" ?hidden=\"${() => !slots.has('header').value}\">\n            <slot name=\"header\"></slot>\n          </div>\n          <div class=\"card-content\" part=\"content\" ?hidden=\"${() => !slots.has().value}\">\n            <slot></slot>\n          </div>\n          <div class=\"card-footer\" part=\"footer\" ?hidden=\"${() => !slots.has('footer').value}\">\n            <slot name=\"footer\"></slot>\n          </div>\n          <div class=\"card-actions\" part=\"actions\" ?hidden=\"${() => !slots.has('actions').value}\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  },\n\n  styles: [...surfaceMixins, frostVariantMixin('.card'), reducedMotionMixin, componentStyles],\n});\n"],"mappings":"4XAUA,IAAM,EACJ,oIAEF,SAAS,EAA0B,EAAmB,EAAuB,CAC3E,IAAK,IAAM,KAAQ,EAAM,aAAa,EAC9B,gBAAgB,YAEtB,IAAI,IAAS,EAAM,MAAO,GAE1B,GAAI,EAAK,QAAQ,CAA+B,GAAO,EAAK,QAAQ,CAA+B,EACjG,MAAO,EAHiB,CAO5B,MAAO,EACT,CAyEA,IAAa,EAAW,wBACH,EAAU,CAC7B,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,iBACH,GAAG,EAAA,eACH,UAAW,EAAA,KAAK,OAAuB,EACvC,YAAa,EAAA,KAAK,KAAK,EAAK,EAC5B,YAAa,EAAA,KAAK,OAAqB,EACvC,QAAS,EAAA,KAAK,OAAoB,EAClC,QAAS,EAAA,KAAK,OAA6C,CAC7D,EAEA,MAAM,EAAO,CACX,IAAM,GAAA,EAAA,EAAA,QAAA,CAAa,EACb,GAAA,EAAA,EAAA,QAAA,CAA8B,EAC9B,GAAA,EAAA,EAAA,SAAA,CAAiB,EACjB,EAAQ,EAAA,aAEd,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,aAAiB,EAAM,QAAQ,MAAQ,OAAS,QAChD,iBAAqB,EAAM,YAAY,MAAQ,OAAO,EAAM,SAAS,KAAK,EAAI,KAC9E,SAAa,EAAM,YAAY,MAAQ,SAAW,IACpD,CACF,CAAC,EAED,MAAY,CACN,EAAM,YAAY,MACpB,EAAG,aAAa,WAAY,EAAM,SAAS,MAAQ,KAAO,GAAG,EAE7D,EAAG,gBAAgB,UAAU,CAEjC,CAAC,EAMD,IAAM,EAAe,EAAA,kBAAkB,CACrC,UAAA,EAAA,EAAA,SAAA,KAAyB,CAAC,EAAM,YAAY,OAAS,EAAQ,EAAM,SAAS,KAAM,EAClF,SAAU,EAAe,IAAY,CACnC,EAAK,WAAY,CAAE,gBAAe,SAAQ,CAAC,CAC7C,CACF,CAAC,EAEK,EAAe,GAAkB,CACjC,CAAC,EAAM,YAAY,OAAS,EAAM,SAAS,OAE3C,EAA0B,EAAI,CAAC,GAEnC,EAAa,YAAY,CAAC,CAC5B,EAEM,EAAiB,GAAqB,CAC1C,EAAa,cAAc,CAAC,CAC9B,EAaA,OAXA,EAAA,EAAA,KAAA,CAAK,CACH,GAAI,CACF,MAAQ,GAAkB,EAAY,CAAC,EACvC,QAAU,GAAqB,EAAc,CAAC,CAChD,CACF,CAAC,EAMM,EAAA,IAAI;;;4DAG+C,CAAC,EAAM,IAAI,OAAO,CAAC,CAAC,MAAM;;;;gEAItB,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;kEAGzB,CAAC,EAAM,IAAI,CAAC,CAAC,MAAM;;;gEAGrB,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;kEAGzB,CAAC,EAAM,IAAI,SAAS,CAAC,CAAC,MAAM;;;;;KAM9F,EAEA,OAAQ,CAAC,GAAG,EAAA,cAAe,EAAA,kBAAkB,OAAO,EAAG,EAAA,mBAAoB,EAAA,OAAe,CAC5F,CAAC"}