@studiolxd/brand 49.28.0 → 51.0.0

package/dist/calendar-roster.css

@@ -1 +1 @@
-.calendar-roster{gap:var(--calendar-roster-legend-gap);font-family:var(--calendar-roster-font-family);flex-direction:column;display:flex}.calendar-roster__nav{justify-content:center;align-items:center;display:flex}.calendar-roster__wrap{border:var(--calendar-roster-border-width) solid var(--calendar-roster-border-color);border-radius:var(--calendar-roster-radius);overflow:auto visible}.calendar-roster__table{border-collapse:collapse;width:100%;font-family:var(--calendar-roster-font-family);white-space:nowrap}.calendar-roster__th-name{z-index:3;min-width:var(--calendar-roster-th-name-width);max-width:var(--calendar-roster-th-name-width);padding-block:var(--calendar-roster-th-name-padding-block);padding-inline:var(--calendar-roster-th-name-padding-inline);background-color:var(--calendar-roster-th-name-bg);font-size:var(--calendar-roster-th-name-font-size);font-weight:var(--calendar-roster-th-name-font-weight);color:var(--calendar-roster-th-name-color);text-align:start;border-block-end:var(--calendar-roster-border-width) solid var(--calendar-roster-border-color);border-inline-end:var(--calendar-roster-border-width) solid var(--calendar-roster-border-color);position:sticky;left:0}.calendar-roster__th-day{min-width:var(--calendar-roster-th-day-width);padding-block:var(--calendar-roster-th-day-padding-block);text-align:center;font-size:var(--calendar-roster-th-day-font-size);color:var(--calendar-roster-th-day-color);background-color:var(--calendar-roster-th-day-bg);border-block-end:var(--calendar-roster-border-width) solid var(--calendar-roster-border-color);border-inline-end:var(--calendar-roster-border-width) solid var(--calendar-roster-border-color);vertical-align:middle;padding-inline:0}.calendar-roster__th-day--weekend{background-color:var(--calendar-roster-cell-weekend-bg)}.calendar-roster__th-day-number{font-size:var(--calendar-roster-th-day-font-size);font-weight:var(--calendar-roster-th-name-font-weight);line-height:1.2}.calendar-roster__th-day-sub{font-size:var(--calendar-roster-th-day-sub-font-size);color:var(--calendar-roster-th-name-color);line-height:1}.calendar-roster__th-day-sub abbr{cursor:inherit;text-decoration:none}.calendar-roster__th-day--today .calendar-roster__th-day-number{width:var(--calendar-roster-th-day-today-size);height:var(--calendar-roster-th-day-today-size);border-radius:var(--calendar-roster-th-day-today-radius);background-color:var(--calendar-roster-th-day-today-bg);color:var(--calendar-roster-th-day-today-color);justify-content:center;align-items:center;display:inline-flex}.calendar-roster__th-name-row{z-index:2;min-width:var(--calendar-roster-th-name-width);max-width:var(--calendar-roster-th-name-width);padding-block:var(--calendar-roster-td-name-padding-block);padding-inline:var(--calendar-roster-td-name-padding-inline);background-color:var(--calendar-roster-td-name-bg);font-size:var(--calendar-roster-td-name-font-size);font-weight:var(--calendar-roster-td-name-font-weight);text-align:start;color:var(--calendar-roster-td-name-color);border-block-end:var(--calendar-roster-border-width) solid var(--calendar-roster-border-color);border-inline-end:var(--calendar-roster-border-width) solid var(--calendar-roster-border-color);text-overflow:ellipsis;white-space:nowrap;position:sticky;left:0;overflow:hidden}.calendar-roster__cell{padding-block:var(--calendar-roster-cell-padding-block);padding-inline:var(--calendar-roster-cell-padding-inline);background-color:var(--calendar-roster-cell-bg);border-block-end:var(--calendar-roster-border-width) solid var(--calendar-roster-border-color);border-inline-end:var(--calendar-roster-border-width) solid var(--calendar-roster-border-color);text-align:center;vertical-align:middle}.calendar-roster__cell--weekend{background-color:var(--calendar-roster-cell-weekend-bg)}.calendar-roster__cell--holiday{background-color:var(--calendar-roster-cell-holiday-bg)}.calendar-roster__cell--non-working{background-color:var(--calendar-roster-cell-non-working-bg)}.calendar-roster__cell--today{outline:var(--calendar-roster-cell-today-outline-width) solid var(--calendar-roster-th-day-today-bg);outline-offset:calc(-1 * var(--calendar-roster-cell-today-outline-width))}.calendar-roster__schedule{font-size:var(--calendar-roster-schedule-font-size);color:var(--calendar-roster-schedule-color);white-space:nowrap}.calendar-roster__legend{align-items:center;gap:var(--calendar-roster-legend-gap);flex-wrap:wrap;display:flex}.calendar-roster__legend-item{align-items:center;gap:var(--calendar-roster-legend-item-gap);font-size:var(--calendar-roster-legend-font-size);color:var(--calendar-roster-legend-color);display:inline-flex}.calendar-roster__legend-swatch{width:var(--calendar-roster-legend-swatch-size);height:var(--calendar-roster-legend-swatch-size);border-radius:var(--calendar-roster-legend-swatch-radius);flex-shrink:0;display:inline-block}.calendar-roster__legend-swatch--non-working{background-color:var(--calendar-roster-cell-non-working-bg)}
+.calendar-roster{gap:var(--calendar-roster-legend-gap);font-family:var(--calendar-roster-font-family);flex-direction:column;display:flex}.calendar-roster__nav{justify-content:center;align-items:center;display:flex}.calendar-roster__wrap{border:var(--calendar-roster-border-width) solid var(--calendar-roster-border-color);border-radius:var(--calendar-roster-radius);overflow:auto visible}.calendar-roster__wrap:focus-visible{outline:var(--calendar-roster-focus-ring-width) solid var(--calendar-roster-focus-ring-color);outline-offset:var(--calendar-roster-focus-ring-offset)}.calendar-roster__table{border-collapse:collapse;inline-size:100%;font-family:var(--calendar-roster-font-family);white-space:nowrap}.calendar-roster__th-name{z-index:3;min-inline-size:var(--calendar-roster-th-name-width);max-inline-size:var(--calendar-roster-th-name-width);padding-block:var(--calendar-roster-th-name-padding-block);padding-inline:var(--calendar-roster-th-name-padding-inline);background-color:var(--calendar-roster-th-name-bg);font-size:var(--calendar-roster-th-name-font-size);font-weight:var(--calendar-roster-th-name-font-weight);color:var(--calendar-roster-th-name-color);text-align:start;border-block-end:var(--calendar-roster-border-width) solid var(--calendar-roster-border-color);border-inline-end:var(--calendar-roster-border-width) solid var(--calendar-roster-border-color);position:sticky;inset-inline-start:0}.calendar-roster__th-day{min-inline-size:var(--calendar-roster-th-day-width);padding-block:var(--calendar-roster-th-day-padding-block);text-align:center;font-size:var(--calendar-roster-th-day-font-size);color:var(--calendar-roster-th-day-color);background-color:var(--calendar-roster-th-day-bg);border-block-end:var(--calendar-roster-border-width) solid var(--calendar-roster-border-color);border-inline-end:var(--calendar-roster-border-width) solid var(--calendar-roster-border-color);vertical-align:middle;padding-inline:0}.calendar-roster__th-day--weekend{background-color:var(--calendar-roster-cell-weekend-bg)}.calendar-roster__th-day-number{font-size:var(--calendar-roster-th-day-font-size);font-weight:var(--calendar-roster-th-name-font-weight);line-height:var(--calendar-roster-th-day-line-height)}.calendar-roster__th-day-sub{font-size:var(--calendar-roster-th-day-sub-font-size);color:var(--calendar-roster-th-name-color);line-height:1}.calendar-roster__th-day-sub abbr{cursor:inherit;text-decoration:none}.calendar-roster__th-day--today .calendar-roster__th-day-number{inline-size:var(--calendar-roster-th-day-today-size);block-size:var(--calendar-roster-th-day-today-size);border-radius:var(--calendar-roster-th-day-today-radius);background-color:var(--calendar-roster-th-day-today-bg);color:var(--calendar-roster-th-day-today-color);justify-content:center;align-items:center;display:inline-flex}.calendar-roster__th-name-row{z-index:2;min-inline-size:var(--calendar-roster-th-name-width);max-inline-size:var(--calendar-roster-th-name-width);padding-block:var(--calendar-roster-td-name-padding-block);padding-inline:var(--calendar-roster-td-name-padding-inline);background-color:var(--calendar-roster-td-name-bg);font-size:var(--calendar-roster-td-name-font-size);font-weight:var(--calendar-roster-td-name-font-weight);text-align:start;color:var(--calendar-roster-td-name-color);border-block-end:var(--calendar-roster-border-width) solid var(--calendar-roster-border-color);border-inline-end:var(--calendar-roster-border-width) solid var(--calendar-roster-border-color);text-overflow:ellipsis;white-space:nowrap;position:sticky;inset-inline-start:0;overflow:hidden}.calendar-roster__cell{padding-block:var(--calendar-roster-cell-padding-block);padding-inline:var(--calendar-roster-cell-padding-inline);background-color:var(--calendar-roster-cell-bg);border-block-end:var(--calendar-roster-border-width) solid var(--calendar-roster-border-color);border-inline-end:var(--calendar-roster-border-width) solid var(--calendar-roster-border-color);text-align:center;vertical-align:middle}.calendar-roster__cell--weekend{background-color:var(--calendar-roster-cell-weekend-bg)}.calendar-roster__cell--holiday{background-color:var(--calendar-roster-cell-holiday-bg)}.calendar-roster__cell--non-working{background-color:var(--calendar-roster-cell-non-working-bg)}.calendar-roster__cell--today{outline:var(--calendar-roster-cell-today-outline-width) solid var(--calendar-roster-th-day-today-bg);outline-offset:calc(-1 * var(--calendar-roster-cell-today-outline-width))}.calendar-roster__schedule{font-size:var(--calendar-roster-schedule-font-size);color:var(--calendar-roster-schedule-color);white-space:nowrap}.calendar-roster__legend{align-items:center;gap:var(--calendar-roster-legend-gap);flex-wrap:wrap;display:flex}.calendar-roster__legend-item{align-items:center;gap:var(--calendar-roster-legend-item-gap);font-size:var(--calendar-roster-legend-font-size);color:var(--calendar-roster-legend-color);display:inline-flex}.calendar-roster__legend-swatch{inline-size:var(--calendar-roster-legend-swatch-size);block-size:var(--calendar-roster-legend-swatch-size);border-radius:var(--calendar-roster-legend-swatch-radius);flex-shrink:0;display:inline-block}.calendar-roster__legend-swatch--non-working{background-color:var(--calendar-roster-cell-non-working-bg)}

package/dist/calendar-roster.js

@@ -1,26 +1,42 @@
 'use client';
 import './calendar-roster.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
-import { Tag as t } from "./tag.js";
-import { PrevNextNav as n } from "./prev-next-nav.js";
-import { a as r, l as i } from "./_shared/calendargrid.js";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { n as e } from "./_shared/env.js";
+import { r as t } from "./_shared/brandmessagescontext.js";
+import { Tag as n } from "./tag.js";
+import { n as r } from "./_shared/default-render-link.js";
+import { t as i } from "./_shared/prevnextnav.js";
+import { t as a } from "./_shared/overflow-focusable.js";
+import { h as o, o as s, t as c, u as l } from "./_shared/calendar.js";
+import { useId as u, useRef as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/stories/messages/es/calendarRoster.ts
+var h = {
+	name: "Empleado",
+	legend: "Leyenda",
+	holiday: "Festivo",
+	vacation: "Vacaciones",
+	absence: "Ausencia",
+	recovery: "Recuperación",
+	birthday: "Cumpleaños",
+	nonWorking: "No laborable"
+};
+//#endregion
 //#region src/stories/molecules/CalendarRoster/CalendarRoster.tsx
-function c(e) {
+function g(e) {
 	let t = e.getDay();
 	return t === 0 || t === 6;
 }
-function l(e) {
+function _(e) {
 	let t = e.getFullYear(), n = e.getMonth(), r = new Date(t, n + 1, 0).getDate();
 	return Array.from({ length: r }, (e, r) => new Date(t, n, r + 1));
 }
-var u = {
+var v = {
 	holiday: "neutral",
 	vacation: "info",
-	absence: "danger",
+	absence: "error",
 	recovery: "success",
 	birthday: "info"
-}, d = [
+}, y = [
 	{
 		type: "holiday",
 		key: "holiday"
@@ -46,97 +62,104 @@ var u = {
 		key: "nonWorking"
 	}
 ];
-function f({ rows: f, month: p, onMonthChange: m, hrefBuilder: h, linkComponent: g, renderCell: _, nameLabel: v, birthdayPrefix: y = "🎂 ", showLegend: b = !0, locale: x = "es-ES", legendItems: S, legendLabel: C, previousMonthLabel: w, nextMonthLabel: T, className: E }) {
-	let D = e("calendar"), O = e("calendarRoster"), k = S ?? (b ? d.map(({ type: e, key: t }) => ({
+function b({ rows: b, month: x, onMonthChange: S, hrefBuilder: C, renderLink: w, linkComponent: T, renderCell: E, nameLabel: D, birthdayPrefix: O = "🎂 ", showLegend: k = !0, locale: A = "es-ES", legendItems: j, legendLabel: M, previousMonthLabel: N, nextMonthLabel: P, today: F, className: I }) {
+	T !== void 0 && e("CalendarRoster", "linkComponent", "`renderLink`");
+	let L = t("calendar", c), R = t("calendarRoster", h), z = j ?? (k ? y.map(({ type: e, key: t }) => ({
 		type: e,
-		label: O(t)
-	})) : []), A = /* @__PURE__ */ new Date(), j = l(p), M = i(p, -1), N = i(p, 1), P = new Intl.DateTimeFormat(x, {
+		label: R(t)
+	})) : []), B = o(F), V = _(x), H = l(x, -1), U = l(x, 1), W = new Intl.DateTimeFormat(A, {
 		month: "long",
 		year: "numeric"
-	}).format(p), F = new Intl.DateTimeFormat(x, { weekday: "narrow" }), I = new Intl.DateTimeFormat(x, { weekday: "long" }), L = m ? (e) => (t) => {
-		h && t.preventDefault(), m(e);
-	} : void 0, R = `roster-title-${p.getFullYear()}-${p.getMonth()}`;
-	return /* @__PURE__ */ s("div", {
-		className: ["calendar-roster", E].filter(Boolean).join(" "),
+	}).format(x), G = new Intl.DateTimeFormat(A, { weekday: "narrow" }), K = new Intl.DateTimeFormat(A, { weekday: "long" }), q = S ? (e) => (t) => {
+		C && t.preventDefault(), S(e);
+	} : void 0, J = u(), Y = d(null), X = a(Y);
+	return /* @__PURE__ */ m("div", {
+		className: ["calendar-roster", I].filter(Boolean).join(" "),
 		children: [
-			/* @__PURE__ */ o("div", {
+			/* @__PURE__ */ p("div", {
 				className: "calendar-roster__nav",
-				children: /* @__PURE__ */ o(n, {
-					label: P,
-					labelId: R,
-					prevHref: h?.(M),
-					nextHref: h?.(N),
-					prevOnClick: L?.(M),
-					nextOnClick: L?.(N),
-					prevLabel: D("previousMonth", w),
-					nextLabel: D("nextMonth", T),
-					linkComponent: g
+				children: /* @__PURE__ */ p(i, {
+					label: W,
+					labelId: J,
+					prevHref: C?.(H),
+					nextHref: C?.(U),
+					prevOnClick: q?.(H),
+					nextOnClick: q?.(U),
+					prevLabel: L("previousMonth", N),
+					nextLabel: L("nextMonth", P),
+					renderLink: w ?? (T ? r(T) : void 0)
 				})
 			}),
-			/* @__PURE__ */ o("div", {
+			/* @__PURE__ */ p("div", {
+				ref: Y,
 				className: "calendar-roster__wrap",
-				children: /* @__PURE__ */ s("table", {
+				...X && {
+					tabIndex: 0,
+					role: "region",
+					"aria-labelledby": J
+				},
+				children: /* @__PURE__ */ m("table", {
 					className: "calendar-roster__table",
-					"aria-labelledby": R,
-					children: [/* @__PURE__ */ o("thead", { children: /* @__PURE__ */ s("tr", { children: [/* @__PURE__ */ o("th", {
+					"aria-labelledby": J,
+					children: [/* @__PURE__ */ p("thead", { children: /* @__PURE__ */ m("tr", { children: [/* @__PURE__ */ p("th", {
 						className: "calendar-roster__th-name",
 						scope: "col",
-						children: O("name", v)
-					}), j.map((e) => {
-						let t = r(e, A), n = [
+						children: R("name", D)
+					}), V.map((e) => {
+						let t = s(e, B), n = [
 							"calendar-roster__th-day",
-							c(e) && "calendar-roster__th-day--weekend",
+							g(e) && "calendar-roster__th-day--weekend",
 							t && "calendar-roster__th-day--today"
-						].filter(Boolean).join(" "), i = String(e.getDate()).padStart(2, "0"), a = F.format(e), l = I.format(e);
-						return /* @__PURE__ */ s("th", {
+						].filter(Boolean).join(" "), r = String(e.getDate()).padStart(2, "0"), i = G.format(e), a = K.format(e);
+						return /* @__PURE__ */ m("th", {
 							className: n,
 							scope: "col",
-							children: [/* @__PURE__ */ o("div", {
+							children: [/* @__PURE__ */ p("div", {
 								className: "calendar-roster__th-day-number",
-								children: i
-							}), /* @__PURE__ */ o("div", {
+								children: r
+							}), /* @__PURE__ */ p("div", {
 								className: "calendar-roster__th-day-sub",
-								children: /* @__PURE__ */ o("abbr", {
-									title: l,
-									children: a
+								children: /* @__PURE__ */ p("abbr", {
+									title: a,
+									children: i
 								})
 							})]
 						}, e.getDate());
-					})] }) }), /* @__PURE__ */ o("tbody", { children: f.map((e) => /* @__PURE__ */ s("tr", { children: [/* @__PURE__ */ o("th", {
+					})] }) }), /* @__PURE__ */ p("tbody", { children: b.map((e) => /* @__PURE__ */ m("tr", { children: [/* @__PURE__ */ p("th", {
 						scope: "row",
 						className: "calendar-roster__th-name-row",
 						title: e.name,
 						children: e.name
-					}), j.map((n) => {
-						let i = n.getDate(), l = e.cells[i] ?? null, d = c(n), f = r(n, A), p = l?.type === "holiday", m = l?.type === "non-working";
-						return /* @__PURE__ */ o("td", {
+					}), V.map((t) => {
+						let r = t.getDate(), i = e.cells[r] ?? null, a = g(t), o = s(t, B), c = i?.type === "holiday", l = i?.type === "non-working";
+						return /* @__PURE__ */ p("td", {
 							className: [
 								"calendar-roster__cell",
-								d && "calendar-roster__cell--weekend",
-								p && "calendar-roster__cell--holiday",
-								m && "calendar-roster__cell--non-working",
-								f && "calendar-roster__cell--today"
+								a && "calendar-roster__cell--weekend",
+								c && "calendar-roster__cell--holiday",
+								l && "calendar-roster__cell--non-working",
+								o && "calendar-roster__cell--today"
 							].filter(Boolean).join(" "),
-							children: _ ? _(i, n, l) : /* @__PURE__ */ s(a, { children: [l?.type === "schedule" && /* @__PURE__ */ o("span", {
+							children: E ? E(r, t, i) : /* @__PURE__ */ m(f, { children: [i?.type === "schedule" && /* @__PURE__ */ p("span", {
 								className: "calendar-roster__schedule",
-								children: l.label
-							}), l && l.type !== "schedule" && l.type !== "non-working" && /* @__PURE__ */ o(t, {
-								variant: u[l.type],
-								children: l.type === "birthday" ? `${y}${l.label}` : l.label
+								children: i.label
+							}), i && i.type !== "schedule" && i.type !== "non-working" && /* @__PURE__ */ p(n, {
+								tone: v[i.type],
+								children: i.type === "birthday" ? `${O}${i.label}` : i.label
 							})] })
-						}, i);
+						}, r);
 					})] }, e.id)) })]
 				})
 			}),
-			b && /* @__PURE__ */ o("div", {
+			k && /* @__PURE__ */ p("div", {
 				className: "calendar-roster__legend",
 				role: "group",
-				"aria-label": O("legend", C),
-				children: k.map(({ type: e, label: n }) => /* @__PURE__ */ o("span", {
+				"aria-label": R("legend", M),
+				children: z.map(({ type: e, label: t }) => /* @__PURE__ */ p("span", {
 					className: "calendar-roster__legend-item",
-					children: e === "non-working" ? /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("span", { className: "calendar-roster__legend-swatch calendar-roster__legend-swatch--non-working" }), n] }) : /* @__PURE__ */ o(t, {
-						variant: u[e],
-						children: n
+					children: e === "non-working" ? /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("span", { className: "calendar-roster__legend-swatch calendar-roster__legend-swatch--non-working" }), t] }) : /* @__PURE__ */ p(n, {
+						tone: v[e],
+						children: t
 					})
 				}, e))
 			})
@@ -144,4 +167,4 @@ function f({ rows: f, month: p, onMonthChange: m, hrefBuilder: h, linkComponent:
 	});
 }
 //#endregion
-export { f as CalendarRoster };
+export { b as CalendarRoster };

package/dist/calendar.css

@@ -1 +1 @@
-.calendar{gap:var(--calendar-gap);padding-block:var(--calendar-padding-block);padding-inline:var(--calendar-padding-inline);font-family:var(--calendar-font-family);flex-direction:column;display:inline-flex}.calendar__header{justify-content:space-between;align-items:center;gap:var(--calendar-grid-gap);display:flex}.calendar__title{text-align:center;font-family:var(--calendar-font-family);font-size:var(--calendar-title-font-size);font-weight:var(--calendar-title-font-weight);color:var(--calendar-title-color);flex:1;margin-block:0}.calendar__title-button{font:inherit;color:inherit;padding-block:0;padding-inline:var(--calendar-title-button-padding-inline);cursor:var(--calendar-title-button-cursor);border-radius:var(--calendar-day-radius);transition-property:box-shadow;transition-duration:var(--calendar-transition-duration);transition-timing-function:var(--calendar-transition-easing);background:0 0;border:none}.calendar__title-button:hover{box-shadow:inset 0 calc(-1 * var(--calendar-hover-line-width)) 0 0 var(--calendar-hover-line-color)}.calendar__title-button:focus-visible{outline:var(--calendar-nav-focus-ring-width) solid var(--calendar-nav-focus-ring-color);outline-offset:var(--calendar-nav-focus-ring-offset)}.calendar__nav{padding-block:var(--calendar-grid-gap);padding-inline:var(--calendar-grid-gap);border-radius:var(--calendar-day-radius);color:var(--calendar-nav-color);cursor:pointer;transition-property:box-shadow;transition-duration:var(--calendar-transition-duration);transition-timing-function:var(--calendar-transition-easing);background-color:#0000;border:none;justify-content:center;align-items:center;display:inline-flex}.calendar__nav:focus-visible{outline:var(--calendar-nav-focus-ring-width) solid var(--calendar-nav-focus-ring-color);outline-offset:var(--calendar-nav-focus-ring-offset)}.calendar__nav:disabled{color:var(--calendar-nav-disabled-color);cursor:var(--calendar-nav-disabled-cursor)}.calendar__chevron--prev{transform:rotate(180deg)}.calendar__grid{gap:var(--calendar-grid-gap);grid-template-columns:repeat(7,1fr);display:grid}.calendar__row{display:contents}.calendar__weekday abbr{cursor:inherit;text-decoration:none}.calendar__weekday{width:var(--calendar-day-size);height:var(--calendar-day-size);font-size:var(--calendar-weekday-font-size);color:var(--calendar-weekday-color);font-family:var(--calendar-font-family);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:flex}.calendar__day{width:var(--calendar-day-size);height:var(--calendar-day-size);border-radius:var(--calendar-day-radius);background-color:var(--calendar-day-bg);color:var(--calendar-day-color);font-family:var(--calendar-font-family);font-size:var(--calendar-day-font-size);font-weight:var(--calendar-day-font-weight);cursor:pointer;transition-property:box-shadow,background-color,color;transition-duration:var(--calendar-transition-duration);transition-timing-function:var(--calendar-transition-easing);border:none;justify-content:center;align-items:center;display:inline-flex;position:relative}.calendar__day:hover:not(.calendar__day--disabled):not(.calendar__day--selected){box-shadow:inset 0 calc(-1 * var(--calendar-hover-line-width)) 0 0 var(--calendar-hover-line-color)}.calendar__day:focus-visible{outline:var(--calendar-day-focus-ring-width) solid var(--calendar-day-focus-ring-color);outline-offset:var(--calendar-day-focus-ring-offset)}.calendar__day.calendar__day--outside{color:var(--calendar-outside-color)}.calendar__day.calendar__day--today{color:var(--calendar-today-color);font-weight:var(--calendar-today-font-weight)}.calendar__day.calendar__day--today:after{content:"";bottom:var(--calendar-today-marker-offset);width:var(--calendar-today-marker-size);height:var(--calendar-today-marker-size);border-radius:var(--calendar-today-marker-radius);background-color:var(--calendar-today-marker-color);position:absolute;left:50%;transform:translate(-50%)}.calendar__day.calendar__day--selected{background-color:var(--calendar-selected-bg);color:var(--calendar-selected-color)}.calendar__day.calendar__day--selected.calendar__day--today:after{background-color:var(--calendar-selected-color)}.calendar__day.calendar__day--disabled{color:var(--calendar-disabled-color);cursor:var(--calendar-disabled-cursor);pointer-events:none}.calendar__years{grid-template-columns:repeat(var(--calendar-year-columns), 1fr);gap:var(--calendar-grid-gap);min-inline-size:var(--calendar-year-grid-min-inline-size);display:grid}.calendar__year{block-size:var(--calendar-year-height);padding-block:0;padding-inline:var(--calendar-year-padding-inline);border-radius:var(--calendar-day-radius);background-color:var(--calendar-year-bg);color:var(--calendar-year-color);font-family:var(--calendar-font-family);font-size:var(--calendar-year-font-size);font-weight:var(--calendar-day-font-weight);cursor:pointer;transition-property:box-shadow,background-color,color;transition-duration:var(--calendar-transition-duration);transition-timing-function:var(--calendar-transition-easing);border:none;justify-content:center;align-items:center;display:inline-flex}.calendar__year:hover:not(.calendar__year--disabled):not(.calendar__year--selected){box-shadow:inset 0 calc(-1 * var(--calendar-hover-line-width)) 0 0 var(--calendar-hover-line-color)}.calendar__year:focus-visible{outline:var(--calendar-day-focus-ring-width) solid var(--calendar-day-focus-ring-color);outline-offset:var(--calendar-day-focus-ring-offset)}.calendar__year.calendar__year--current{color:var(--calendar-year-current-color);font-weight:var(--calendar-year-current-font-weight)}.calendar__year.calendar__year--selected{background-color:var(--calendar-year-selected-bg);color:var(--calendar-year-selected-color)}.calendar__year.calendar__year--disabled{color:var(--calendar-year-disabled-color);cursor:var(--calendar-disabled-cursor);pointer-events:none}.calendar.calendar--sm .calendar__title{font-size:var(--calendar-sm-title-font-size)}.calendar.calendar--sm .calendar__day,.calendar.calendar--sm .calendar__weekday{width:var(--calendar-sm-day-size);height:var(--calendar-sm-day-size)}.calendar.calendar--lg .calendar__title{font-size:var(--calendar-lg-title-font-size)}.calendar.calendar--lg .calendar__day,.calendar.calendar--lg .calendar__weekday{width:var(--calendar-lg-day-size);height:var(--calendar-lg-day-size)}.calendar.calendar--lg .calendar__day{font-size:var(--calendar-lg-day-font-size)}.calendar.calendar--sm .calendar__years{min-inline-size:var(--calendar-sm-year-grid-min-inline-size)}.calendar.calendar--sm .calendar__year{block-size:var(--calendar-sm-year-height)}.calendar.calendar--lg .calendar__years{min-inline-size:var(--calendar-lg-year-grid-min-inline-size)}.calendar.calendar--lg .calendar__year{block-size:var(--calendar-lg-year-height);font-size:var(--calendar-lg-year-font-size)}
+.calendar{gap:var(--calendar-gap);padding-block:var(--calendar-padding-block);padding-inline:var(--calendar-padding-inline);font-family:var(--calendar-font-family);flex-direction:column;display:inline-flex}.calendar__header{justify-content:space-between;align-items:center;gap:var(--calendar-grid-gap);display:flex}.calendar__title{text-align:center;font-family:var(--calendar-font-family);font-size:var(--calendar-title-font-size);font-weight:var(--calendar-title-font-weight);color:var(--calendar-title-color);flex:1;margin-block:0}.calendar__title-button{font:inherit;color:inherit;padding-block:0;padding-inline:var(--calendar-title-button-padding-inline);cursor:var(--calendar-title-button-cursor);border-radius:var(--calendar-day-radius);transition-property:box-shadow;transition-duration:var(--calendar-transition-duration);transition-timing-function:var(--calendar-transition-easing);background:0 0;border:none}.calendar__title-button:hover{box-shadow:inset 0 calc(-1 * var(--calendar-hover-line-width)) 0 0 var(--calendar-hover-line-color)}.calendar__title-button:focus-visible{outline:var(--calendar-nav-focus-ring-width) solid var(--calendar-nav-focus-ring-color);outline-offset:var(--calendar-nav-focus-ring-offset)}.calendar__nav{padding-block:var(--calendar-grid-gap);padding-inline:var(--calendar-grid-gap);border-radius:var(--calendar-day-radius);color:var(--calendar-nav-color);cursor:pointer;transition-property:box-shadow;transition-duration:var(--calendar-transition-duration);transition-timing-function:var(--calendar-transition-easing);background-color:#0000;border:none;justify-content:center;align-items:center;display:inline-flex}.calendar__nav:focus-visible{outline:var(--calendar-nav-focus-ring-width) solid var(--calendar-nav-focus-ring-color);outline-offset:var(--calendar-nav-focus-ring-offset)}.calendar__nav:disabled{color:var(--calendar-nav-disabled-color);cursor:var(--calendar-nav-disabled-cursor)}.calendar__chevron--prev{transform:rotate(180deg)}.calendar__grid{gap:var(--calendar-grid-gap);grid-template-columns:repeat(7,1fr);display:grid}.calendar__row{display:contents}.calendar__weekday abbr{cursor:inherit;text-decoration:none}.calendar__weekday{inline-size:var(--calendar-day-size);block-size:var(--calendar-day-size);font-size:var(--calendar-weekday-font-size);color:var(--calendar-weekday-color);font-family:var(--calendar-font-family);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:flex}.calendar__day{inline-size:var(--calendar-day-size);block-size:var(--calendar-day-size);border-radius:var(--calendar-day-radius);background-color:var(--calendar-day-bg);color:var(--calendar-day-color);font-family:var(--calendar-font-family);font-size:var(--calendar-day-font-size);font-weight:var(--calendar-day-font-weight);line-height:var(--calendar-day-line-height);cursor:pointer;transition-property:box-shadow,background-color,color;transition-duration:var(--calendar-transition-duration);transition-timing-function:var(--calendar-transition-easing);border:none;justify-content:center;align-items:center;display:inline-flex;position:relative}.calendar__day:hover:not(.calendar__day--disabled):not(.calendar__day--selected){box-shadow:inset 0 calc(-1 * var(--calendar-hover-line-width)) 0 0 var(--calendar-hover-line-color)}.calendar__day:focus-visible{outline:var(--calendar-day-focus-ring-width) solid var(--calendar-day-focus-ring-color);outline-offset:var(--calendar-day-focus-ring-offset)}.calendar__day.calendar__day--outside{color:var(--calendar-outside-color)}.calendar__day.calendar__day--today{color:var(--calendar-today-color);font-weight:var(--calendar-today-font-weight)}.calendar__day.calendar__day--today:after{content:"";inset-block-end:var(--calendar-today-marker-offset);inline-size:var(--calendar-today-marker-size);block-size:var(--calendar-today-marker-size);border-radius:var(--calendar-today-marker-radius);background-color:var(--calendar-today-marker-color);position:absolute;left:50%;transform:translate(-50%)}.calendar__day.calendar__day--selected{background-color:var(--calendar-selected-bg);color:var(--calendar-selected-color)}.calendar__day.calendar__day--selected.calendar__day--today:after{background-color:var(--calendar-selected-color)}.calendar__day.calendar__day--disabled{color:var(--calendar-disabled-color);cursor:var(--calendar-disabled-cursor);pointer-events:none}.calendar__years{grid-template-columns:repeat(var(--calendar-year-columns), 1fr);gap:var(--calendar-grid-gap);min-inline-size:var(--calendar-year-grid-min-width);display:grid}.calendar__year{block-size:var(--calendar-year-height);padding-block:0;padding-inline:var(--calendar-year-padding-inline);border-radius:var(--calendar-day-radius);background-color:var(--calendar-year-bg);color:var(--calendar-year-color);font-family:var(--calendar-font-family);font-size:var(--calendar-year-font-size);font-weight:var(--calendar-day-font-weight);line-height:var(--calendar-day-line-height);cursor:pointer;transition-property:box-shadow,background-color,color;transition-duration:var(--calendar-transition-duration);transition-timing-function:var(--calendar-transition-easing);border:none;justify-content:center;align-items:center;display:inline-flex}.calendar__year:hover:not(.calendar__year--disabled):not(.calendar__year--selected){box-shadow:inset 0 calc(-1 * var(--calendar-hover-line-width)) 0 0 var(--calendar-hover-line-color)}.calendar__year:focus-visible{outline:var(--calendar-day-focus-ring-width) solid var(--calendar-day-focus-ring-color);outline-offset:var(--calendar-day-focus-ring-offset)}.calendar__year.calendar__year--current{color:var(--calendar-year-current-color);font-weight:var(--calendar-year-current-font-weight)}.calendar__year.calendar__year--selected{background-color:var(--calendar-year-selected-bg);color:var(--calendar-year-selected-color)}.calendar__year.calendar__year--disabled{color:var(--calendar-year-disabled-color);cursor:var(--calendar-disabled-cursor);pointer-events:none}.calendar.calendar--sm .calendar__title{font-size:var(--calendar-sm-title-font-size)}.calendar.calendar--sm .calendar__day,.calendar.calendar--sm .calendar__weekday{inline-size:var(--calendar-sm-day-size);block-size:var(--calendar-sm-day-size)}.calendar.calendar--lg .calendar__title{font-size:var(--calendar-lg-title-font-size)}.calendar.calendar--lg .calendar__day,.calendar.calendar--lg .calendar__weekday{inline-size:var(--calendar-lg-day-size);block-size:var(--calendar-lg-day-size)}.calendar.calendar--lg .calendar__day{font-size:var(--calendar-lg-day-font-size)}.calendar.calendar--sm .calendar__years{min-inline-size:var(--calendar-sm-year-grid-min-width)}.calendar.calendar--sm .calendar__year{block-size:var(--calendar-sm-year-height)}.calendar.calendar--lg .calendar__years{min-inline-size:var(--calendar-lg-year-grid-min-width)}.calendar.calendar--lg .calendar__year{block-size:var(--calendar-lg-year-height);font-size:var(--calendar-lg-year-font-size)}

package/dist/calendar.js

@@ -1,68 +1,69 @@
 'use client';
 import './calendar.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
-import { a as t, c as n, f as r, i, l as a, n as o, o as s, s as c, t as ee } from "./_shared/calendargrid.js";
-import { useCallback as l, useEffect as u, useId as d, useRef as f, useState as p } from "react";
+import { r as e } from "./_shared/brandmessagescontext.js";
+import { a as t, c as n, h as r, l as i, n as a, o, p as ee, r as te, s, t as c, u as l } from "./_shared/calendar.js";
+import { useCallback as u, useEffect as ne, useId as d, useRef as f, useState as p } from "react";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/stories/molecules/Calendar/Calendar.tsx
 var g = 12, _ = 4;
 function v(e) {
 	return Math.floor(e / g) * g;
 }
-function y({ value: y, onChange: te, defaultMonth: ne, month: b, onMonthChange: x, navigable: S = !0, disabledDates: C, minDate: w, maxDate: T, locale: E = "es-ES", previousMonthLabel: re, nextMonthLabel: ie, previousYearsLabel: ae, nextYearsLabel: oe, yearGridLabel: D, gridLabel: O, size: k = "md", className: A }) {
-	let j = e("calendar"), [se, ce] = p(() => b ?? ne ?? (y instanceof Date ? y : /* @__PURE__ */ new Date())), M = b ?? se, N = l((e) => {
-		ce(e), x?.(e);
-	}, [x]), P = /* @__PURE__ */ new Date(), le = l((e) => w && e < w || T && e > T ? !0 : Array.isArray(C) ? C.some((n) => t(n, e)) : typeof C == "function" ? C(e) : !1, [
+function y({ value: y, onChange: re, defaultMonth: ie, month: b, onMonthChange: x, navigable: S = !0, disabledDates: C, minDate: w, maxDate: T, locale: E = "es-ES", previousMonthLabel: D, nextMonthLabel: ae, previousYearsLabel: oe, nextYearsLabel: se, yearGridLabel: ce, gridLabel: O, today: le, size: k = "md", className: ue }) {
+	let A = e("calendar", c), j = r(le), [de, M] = p(() => b ?? ie ?? (y instanceof Date ? y : j)), N = b ?? de, P = u((e) => {
+		M(e), x?.(e);
+	}, [x]), fe = u((e) => w && e < w || T && e > T ? !0 : Array.isArray(C) ? C.some((t) => o(t, e)) : typeof C == "function" ? C(e) : !1, [
 		C,
 		w,
 		T
-	]), F = r({
-		month: M,
-		onMonthChange: N,
+	]), F = ee({
+		month: N,
+		onMonthChange: P,
 		selected: y ?? null,
+		today: j,
 		minDate: w,
 		maxDate: T
-	}), [I, L] = p("days"), [R, z] = p(() => v(M.getFullYear())), [B, V] = p(() => M.getFullYear()), H = f(null), U = f(/* @__PURE__ */ new Map()), W = f(null), ue = l(() => {
-		let e = M.getFullYear();
+	}), [I, L] = p("days"), [R, z] = p(() => v(N.getFullYear())), [B, V] = p(() => N.getFullYear()), H = f(null), U = f(/* @__PURE__ */ new Map()), W = f(null), pe = u(() => {
+		let e = N.getFullYear();
 		z(v(e)), V(e), W.current = "year", L("years");
-	}, [M]), G = l(() => {
+	}, [N]), G = u(() => {
 		W.current = "title", L("days");
-	}, []), de = l((e) => {
-		N(new Date(e, M.getMonth(), 1)), G();
+	}, []), me = u((e) => {
+		P(new Date(e, N.getMonth(), 1)), G();
 	}, [
 		G,
-		M,
-		N
+		N,
+		P
 	]);
-	u(() => {
+	ne(() => {
 		if (!W.current) return;
 		let e = W.current;
 		W.current = null, e === "title" ? H.current?.focus() : U.current.get(B)?.focus();
 	}, [I, B]);
-	let fe = k === "lg" ? "md" : "sm", pe = new Intl.DateTimeFormat(E, {
+	let he = k === "lg" ? "md" : "sm", ge = new Intl.DateTimeFormat(E, {
 		month: "long",
 		year: "numeric"
-	}).format(M), me = new Intl.DateTimeFormat(E, { year: "numeric" }), K = (e) => me.format(new Date(e, 0, 1)), he = Array.from({ length: g }, (e, t) => R + t), ge = `${K(R)}–${K(R + g - 1)}`, _e = new Intl.DateTimeFormat(E, {
+	}).format(N), _e = new Intl.DateTimeFormat(E, { year: "numeric" }), K = (e) => _e.format(new Date(e, 0, 1)), ve = Array.from({ length: g }, (e, t) => R + t), ye = `${K(R)}–${K(R + g - 1)}`, be = new Intl.DateTimeFormat(E, {
 		weekday: "long",
 		day: "numeric",
 		month: "long",
 		year: "numeric"
-	}), ve = i(E, "narrow"), ye = ee(o(M)), q = a(M, -1), J = a(M, 1), be = w ? !s(q, w) && q < w : !1, xe = T ? !s(J, T) && J > T : !1, Se = (e) => (w ? e < w.getFullYear() : !1) || (T ? e > T.getFullYear() : !1), Ce = w ? R - 1 < w.getFullYear() : !1, we = T ? R + g > T.getFullYear() : !1, Y = I === "years", X = B >= R && B <= R + g - 1 ? B : R, Te = (e) => {
+	}), xe = t(E, "narrow"), Se = a(te(N)), q = l(N, -1), J = l(N, 1), Y = w ? !s(q, w) && q < w : !1, Ce = T ? !s(J, T) && J > T : !1, we = (e) => (w ? e < w.getFullYear() : !1) || (T ? e > T.getFullYear() : !1), Te = w ? R - 1 < w.getFullYear() : !1, Ee = T ? R + g > T.getFullYear() : !1, X = I === "years", Z = B >= R && B <= R + g - 1 ? B : R, De = (e) => {
 		(e < R || e > R + g - 1) && z(v(e)), W.current = "year", V(e);
-	}, Z = (e) => {
+	}, Oe = (e) => {
 		let t = null;
 		switch (e.key) {
 			case "ArrowLeft":
-				t = X - 1;
+				t = Z - 1;
 				break;
 			case "ArrowRight":
-				t = X + 1;
+				t = Z + 1;
 				break;
 			case "ArrowUp":
-				t = X - _;
+				t = Z - _;
 				break;
 			case "ArrowDown":
-				t = X + _;
+				t = Z + _;
 				break;
 			case "Home":
 				t = R;
@@ -71,49 +72,49 @@ function y({ value: y, onChange: te, defaultMonth: ne, month: b, onMonthChange:
 				t = R + g - 1;
 				break;
 			case "PageUp":
-				t = X - g;
+				t = Z - g;
 				break;
 			case "PageDown":
-				t = X + g;
+				t = Z + g;
 				break;
 			case "Escape":
 				e.preventDefault(), G();
 				return;
 			default: return;
 		}
-		e.preventDefault(), Te(t);
-	}, Q = d(), $ = Y ? `${Q}-calendar-title-${R}` : `${Q}-calendar-title-${M.getFullYear()}-${M.getMonth()}`;
+		e.preventDefault(), De(t);
+	}, Q = d(), $ = X ? `${Q}-calendar-title-${R}` : `${Q}-calendar-title-${N.getFullYear()}-${N.getMonth()}`;
 	return /* @__PURE__ */ h("div", {
 		className: [
 			"calendar",
 			`calendar--${k}`,
-			A
+			ue
 		].filter(Boolean).join(" "),
-		children: [c({
+		children: [n({
 			block: "calendar",
-			title: Y ? ge : pe,
+			title: X ? ye : ge,
 			titleId: $,
 			navigable: S,
-			previousLabel: S ? Y ? j("previousYears", ae) : j("previousMonth", re) : void 0,
-			nextLabel: S ? Y ? j("nextYears", oe) : j("nextMonth", ie) : void 0,
-			prevDisabled: Y ? Ce : be,
-			nextDisabled: Y ? we : xe,
-			onPrev: Y ? () => z(R - g) : () => N(q),
-			onNext: Y ? () => z(R + g) : () => N(J),
-			chevronSize: fe,
-			onTitleClick: Y ? G : ue,
-			titleExpanded: Y,
+			previousLabel: S ? X ? A("previousYears", oe) : A("previousMonth", D) : void 0,
+			nextLabel: S ? X ? A("nextYears", se) : A("nextMonth", ae) : void 0,
+			prevDisabled: X ? Te : Y,
+			nextDisabled: X ? Ee : Ce,
+			onPrev: X ? () => z(R - g) : () => P(q),
+			onNext: X ? () => z(R + g) : () => P(J),
+			chevronSize: he,
+			onTitleClick: X ? G : pe,
+			titleExpanded: X,
 			titleRef: H
-		}), Y ? /* @__PURE__ */ m("div", {
+		}), X ? /* @__PURE__ */ m("div", {
 			className: "calendar__years",
 			role: "grid",
-			"aria-label": j("yearGrid", D),
-			onKeyDown: Z,
+			"aria-label": A("yearGrid", ce),
+			onKeyDown: Oe,
 			children: Array.from({ length: g / _ }, (e, t) => /* @__PURE__ */ m("div", {
 				role: "row",
 				className: "calendar__row",
-				children: he.slice(t * _, t * _ + _).map((e) => {
-					let t = Se(e), n = e === P.getFullYear(), r = y instanceof Date ? y.getFullYear() === e : !1;
+				children: ve.slice(t * _, t * _ + _).map((e) => {
+					let t = we(e), n = e === j.getFullYear(), r = y instanceof Date ? y.getFullYear() === e : !1;
 					return /* @__PURE__ */ m("button", {
 						ref: (t) => {
 							t ? U.current.set(e, t) : U.current.delete(e);
@@ -129,9 +130,9 @@ function y({ value: y, onChange: te, defaultMonth: ne, month: b, onMonthChange:
 						"aria-selected": r,
 						"aria-disabled": t ? "true" : void 0,
 						"aria-current": n ? "date" : void 0,
-						tabIndex: e === X ? 0 : -1,
+						tabIndex: e === Z ? 0 : -1,
 						onFocus: () => V(e),
-						onClick: t ? void 0 : () => de(e),
+						onClick: t ? void 0 : () => me(e),
 						children: K(e)
 					}, e);
 				})
@@ -142,36 +143,36 @@ function y({ value: y, onChange: te, defaultMonth: ne, month: b, onMonthChange:
 			"aria-label": O,
 			"aria-labelledby": O ? void 0 : $,
 			onKeyDown: F.onKeyDown,
-			children: [n({
+			children: [i({
 				block: "calendar",
-				weekdays: ve
-			}), ye.map((e, n) => /* @__PURE__ */ m("div", {
+				weekdays: xe
+			}), Se.map((e, t) => /* @__PURE__ */ m("div", {
 				role: "row",
 				className: "calendar__row",
-				children: e.map(({ date: e, outside: n }) => {
-					let r = le(e), i = t(e, P), a = y instanceof Date ? t(e, y) : !1, o = [
+				children: e.map(({ date: e, outside: t }) => {
+					let n = fe(e), r = o(e, j), i = y instanceof Date ? o(e, y) : !1, a = [
 						"calendar__day",
-						n && "calendar__day--outside",
-						i && "calendar__day--today",
-						a && "calendar__day--selected",
-						r && "calendar__day--disabled"
+						t && "calendar__day--outside",
+						r && "calendar__day--today",
+						i && "calendar__day--selected",
+						n && "calendar__day--disabled"
 					].filter(Boolean).join(" ");
 					return /* @__PURE__ */ m("button", {
 						ref: F.cellRef(e),
 						type: "button",
 						role: "gridcell",
-						className: o,
-						"aria-label": _e.format(e),
-						"aria-selected": a,
-						"aria-disabled": r ? "true" : void 0,
-						"aria-current": i ? "date" : void 0,
+						className: a,
+						"aria-label": be.format(e),
+						"aria-selected": i,
+						"aria-disabled": n ? "true" : void 0,
+						"aria-current": r ? "date" : void 0,
 						tabIndex: F.isTabbable(e) ? 0 : -1,
 						onFocus: () => F.onCellFocus(e),
-						onClick: r ? void 0 : () => te?.(e),
+						onClick: n ? void 0 : () => re?.(e),
 						children: e.getDate()
 					}, e.toISOString());
 				})
-			}, n))]
+			}, t))]
 		})]
 	});
 }

package/dist/card.css

@@ -1 +1 @@
-.card{box-shadow:none;color:inherit;padding-inline:var(--card-padding-inline);align-items:flex-start;gap:var(--card-gap);border-radius:var(--card-border-radius);flex-direction:column;padding-block-start:var(--card-padding-block-start);padding-block-end:var(--card-padding-block-end);text-decoration:none;display:flex}.card p:not(.paragraph){font-size:var(--card-description-font-size);margin-block-end:var(--card-description-margin-block-end)}.card .arrow{margin-block-start:auto}:where(button.card){appearance:none;font:inherit;text-align:start;cursor:pointer;background:0 0;border:0;inline-size:100%;margin:0}.card__footer.card__footer--column{flex-direction:column;align-items:stretch}.card.card--primary{background-color:var(--card-primary-bg);color:var(--card-primary-color);--text-list-color:var(--card-primary-color);--text-h1-color:var(--card-primary-color);--text-h2-color:var(--card-primary-color);--text-h3-color:var(--card-primary-color);--text-h4-color:var(--card-primary-color);--text-h5-color:var(--card-primary-color);--text-h6-color:var(--card-primary-color)}.card.card--outline{background-color:var(--card-outline-bg);color:var(--card-outline-color);border:var(--card-outline-border-width) solid var(--card-outline-border-color)}.card.card--accent-1{background-color:var(--card-accent-1-bg);color:var(--card-accent-1-color);--text-list-color:var(--card-accent-1-color)}.card.card--accent-2{background-color:var(--card-accent-2-bg);color:var(--card-accent-2-color);--text-list-color:var(--card-accent-2-color)}.card.card--support-1{background-color:var(--card-support-1-bg);color:var(--card-support-1-color);--text-list-color:var(--card-support-1-color)}.card.card--support-2{background-color:var(--card-support-2-bg);color:var(--card-support-2-color);--text-list-color:var(--card-support-2-color)}.card.card--square,.card.card--split{gap:0;padding-block:0;padding-inline:0}.card__body{align-items:flex-start;gap:var(--card-gap);inline-size:100%;padding-inline:var(--card-padding-inline);flex-direction:column;flex:1;padding-block-start:var(--card-padding-block-start);padding-block-end:var(--card-padding-block-end);display:flex}.card__media img{object-fit:cover;block-size:100%;inline-size:100%;display:block}.card--square .card__media,.card--split .card__media{aspect-ratio:1;inline-size:100%}@media (width>=768px){.card.card--split{flex-direction:row;align-items:stretch}.card--split .card__media,.card--split .card__body{flex:50%;inline-size:50%}.card--split .card__media{aspect-ratio:auto}}.card__header,.card__content,.card__footer{inline-size:100%}.card__header{align-items:start;column-gap:var(--card-header-gap);row-gap:var(--card-header-row-gap);grid-template-columns:minmax(0,1fr) auto;display:grid}.card__header>*{grid-column:1}.card__header>.card__action{grid-area:1/2;justify-self:end}.card__header:has(>.card__selection){grid-template-columns:auto minmax(0,1fr) auto}.card__header:has(>.card__selection)>*{grid-column:2}.card__header>.card__selection{grid-area:1/1;align-self:start}.card__header:has(>.card__selection)>.card__action{grid-area:1/3;justify-self:end}.card__title{font-weight:var(--card-title-font-weight);color:inherit;margin-block:0}.card__description{color:inherit;margin-block:0}.card__description--lines-1{min-block-size:1lh}.card__description--lines-2{min-block-size:2lh}.card__description--lines-3{min-block-size:3lh}.card__footer{align-items:stretch;gap:var(--card-footer-gap);flex-direction:column;margin-block-start:auto;display:flex}.card__footer>*{inline-size:100%}@media (width>=768px){.card__footer:not(.card__footer--column){flex-direction:row}.card__footer:not(.card__footer--column)>*{inline-size:auto}}.card.card--selectable{cursor:pointer;position:relative}.card--selectable .radio-field,.card--selectable .checkbox-field{margin:0;position:absolute;inset:0}.card--selectable .radio-field__control,.card--selectable .checkbox-field__control{opacity:0;cursor:pointer;position:absolute;inset:0}.card.card--selectable:has(input:focus-visible){outline:var(--card-selectable-focus-ring-width) solid var(--card-selectable-focus-ring-color);outline-offset:var(--card-selectable-focus-ring-offset)}.card.card--selectable.card--selected{background-color:var(--card-accent-1-bg);color:var(--card-accent-1-color);border-color:var(--card-accent-1-bg);--text-list-color:var(--card-accent-1-color)}.card.card--selectable:has(input:checked){background-color:var(--card-accent-1-bg);color:var(--card-accent-1-color);border-color:var(--card-accent-1-bg);--text-list-color:var(--card-accent-1-color)}.card.card--link-overlay{position:relative}.card.card--link-overlay .card__title a:after{content:"";position:absolute;inset:0}.card.card--link-overlay .card__action,.card.card--link-overlay .card__selection,.card.card--link-overlay .card__interactive{z-index:1;position:relative}
+.card{color:inherit;padding-inline:var(--card-padding-inline);align-items:flex-start;gap:var(--card-gap);border-radius:var(--card-border-radius);flex-direction:column;padding-block-start:var(--card-padding-block-start);padding-block-end:var(--card-padding-block-end);text-decoration:none;display:flex}.card p:not(.paragraph){font-size:var(--card-description-font-size);margin-block-end:var(--card-description-margin-block-end)}.card .arrow{margin-block-start:auto}:where(button.card){appearance:none;font:inherit;text-align:start;cursor:pointer;background:0 0;border:0;inline-size:100%;margin:0}.card__footer.card__footer--column{flex-direction:column;align-items:stretch}.card.card--primary{background-color:var(--card-primary-bg);color:var(--card-primary-color);--text-list-color:var(--card-primary-color);--text-h1-color:var(--card-primary-color);--text-h2-color:var(--card-primary-color);--text-h3-color:var(--card-primary-color);--text-h4-color:var(--card-primary-color);--text-h5-color:var(--card-primary-color);--text-h6-color:var(--card-primary-color)}.card.card--outline{background-color:var(--card-outline-bg);color:var(--card-outline-color);border:var(--card-outline-border-width) solid var(--card-outline-border-color)}.card.card--accent-1{background-color:var(--card-accent-1-bg);color:var(--card-accent-1-color);--text-list-color:var(--card-accent-1-color);--text-h1-color:var(--card-accent-1-color);--text-h2-color:var(--card-accent-1-color);--text-h3-color:var(--card-accent-1-color);--text-h4-color:var(--card-accent-1-color);--text-h5-color:var(--card-accent-1-color);--text-h6-color:var(--card-accent-1-color)}.card.card--accent-2{background-color:var(--card-accent-2-bg);color:var(--card-accent-2-color);--text-list-color:var(--card-accent-2-color);--text-h1-color:var(--card-accent-2-color);--text-h2-color:var(--card-accent-2-color);--text-h3-color:var(--card-accent-2-color);--text-h4-color:var(--card-accent-2-color);--text-h5-color:var(--card-accent-2-color);--text-h6-color:var(--card-accent-2-color)}.card.card--support-1{background-color:var(--card-support-1-bg);color:var(--card-support-1-color);--text-list-color:var(--card-support-1-color);--text-h1-color:var(--card-support-1-color);--text-h2-color:var(--card-support-1-color);--text-h3-color:var(--card-support-1-color);--text-h4-color:var(--card-support-1-color);--text-h5-color:var(--card-support-1-color);--text-h6-color:var(--card-support-1-color)}.card.card--support-2{background-color:var(--card-support-2-bg);color:var(--card-support-2-color);--text-list-color:var(--card-support-2-color);--text-h1-color:var(--card-support-2-color);--text-h2-color:var(--card-support-2-color);--text-h3-color:var(--card-support-2-color);--text-h4-color:var(--card-support-2-color);--text-h5-color:var(--card-support-2-color);--text-h6-color:var(--card-support-2-color)}.card.card--square,.card.card--split{gap:0;padding-block:0;padding-inline:0}.card__body{align-items:flex-start;gap:var(--card-gap);inline-size:100%;padding-inline:var(--card-padding-inline);flex-direction:column;flex:1;padding-block-start:var(--card-padding-block-start);padding-block-end:var(--card-padding-block-end);display:flex}.card__media img{object-fit:cover;block-size:100%;inline-size:100%;display:block}.card--square .card__media,.card--split .card__media{aspect-ratio:1;inline-size:100%}@media (width>=768px){.card.card--split{flex-direction:row;align-items:stretch}.card--split .card__media,.card--split .card__body{flex:50%;inline-size:50%}.card--split .card__media{aspect-ratio:auto}}.card__header,.card__content,.card__footer{inline-size:100%}.card__header{align-items:start;column-gap:var(--card-header-gap);row-gap:var(--card-header-row-gap);grid-template-columns:minmax(0,1fr) auto;display:grid}.card__header>*{grid-column:1}.card__header>.card__action{grid-area:1/2;justify-self:end}.card__header:has(>.card__selection){grid-template-columns:auto minmax(0,1fr) auto}.card__header:has(>.card__selection)>*{grid-column:2}.card__header>.card__selection{grid-area:1/1;align-self:start}.card__header:has(>.card__selection)>.card__action{grid-area:1/3;justify-self:end}.card__title{font-weight:var(--card-title-font-weight);color:inherit;margin-block:0}.card__description{color:inherit;margin-block:0}.card__description--lines-1{min-block-size:1lh}.card__description--lines-2{min-block-size:2lh}.card__description--lines-3{min-block-size:3lh}.card__footer{align-items:stretch;gap:var(--card-footer-gap);flex-direction:column;margin-block-start:auto;display:flex}.card__footer>*{inline-size:100%}@media (width>=768px){.card__footer:not(.card__footer--column){flex-direction:row}.card__footer:not(.card__footer--column)>*{inline-size:auto}}.card.card--selectable{cursor:pointer;position:relative}.card--selectable .radio-field,.card--selectable .checkbox-field{margin:0;position:absolute;inset:0}.card--selectable .radio-field__control,.card--selectable .checkbox-field__control{opacity:0;cursor:pointer;position:absolute;inset:0}.card.card--selectable:has(input:focus-visible){outline:var(--card-selectable-focus-ring-width) solid var(--card-selectable-focus-ring-color);outline-offset:var(--card-selectable-focus-ring-offset)}.card.card--selectable.card--selected{background-color:var(--card-accent-1-bg);color:var(--card-accent-1-color);border-color:var(--card-accent-1-bg);--text-list-color:var(--card-accent-1-color)}.card.card--selectable:has(input:checked){background-color:var(--card-accent-1-bg);color:var(--card-accent-1-color);border-color:var(--card-accent-1-bg);--text-list-color:var(--card-accent-1-color)}.card.card--link-overlay{position:relative}.card.card--link-overlay .card__title a:after{content:"";position:absolute;inset:0}.card.card--link-overlay .card__action,.card.card--link-overlay .card__selection,.card.card--link-overlay .card__interactive{z-index:1;position:relative}