@studiolxd/brand 38.12.4

package/dist/sidebar-nav.css

@@ -0,0 +1 @@
+.sidebar-nav{width:100%}.sidebar-nav__accordion{gap:var(--sidebar-nav-gap);flex-direction:column;display:flex}.sidebar-nav__group-header{font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;justify-content:space-between;align-items:center;gap:var(--sidebar-nav-group-trigger-gap);padding-block:var(--sidebar-nav-group-trigger-padding-block);padding-inline:var(--sidebar-nav-group-trigger-padding-inline);margin-block:0;display:flex}.sidebar-nav__group-label{align-items:center;gap:var(--sidebar-nav-item-icon-gap);min-width:0;font-size:var(--sidebar-nav-group-label-font-size);font-weight:var(--sidebar-nav-group-label-font-weight);color:var(--sidebar-nav-group-label-color);box-shadow:none;flex:1;padding-block-end:0;text-decoration:none;display:flex}a.sidebar-nav__group-label:hover{box-shadow:none;color:var(--sidebar-nav-group-label-color)}a.sidebar-nav__group-label:focus-visible{outline:var(--sidebar-nav-focus-ring-width) solid var(--sidebar-nav-focus-ring-color);outline-offset:calc(-1 * var(--sidebar-nav-focus-ring-width))}.sidebar-nav__group-chevron{all:unset;box-sizing:border-box;cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;display:flex}.sidebar-nav__group-chevron:focus-visible{outline:var(--sidebar-nav-focus-ring-width) solid var(--sidebar-nav-focus-ring-color);outline-offset:var(--sidebar-nav-focus-ring-width)}.sidebar-nav__group-chevron-icon{transition:transform var(--sidebar-nav-group-transition-duration) var(--sidebar-nav-group-transition-easing);flex-shrink:0;transform:rotate(90deg)}.sidebar-nav__group-chevron[data-panel-open] .sidebar-nav__group-chevron-icon{transform:rotate(-90deg)}.sidebar-nav__group-content{overflow:hidden}.sidebar-nav__group-content[data-open]{animation:sidebar-nav-group-open var(--sidebar-nav-group-transition-duration) var(--sidebar-nav-group-transition-easing)}.sidebar-nav__group-content[data-closed]{animation:sidebar-nav-group-close var(--sidebar-nav-group-transition-duration) var(--sidebar-nav-group-transition-easing)}@keyframes sidebar-nav-group-open{0%{height:0}to{height:var(--collapsible-panel-height)}}@keyframes sidebar-nav-group-close{0%{height:var(--collapsible-panel-height)}to{height:0}}.sidebar-nav__group-content-inner{padding-block-end:0;padding-inline:0}.sidebar-nav__items{gap:var(--sidebar-nav-item-gap);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.sidebar-nav__item{align-items:center;gap:var(--sidebar-nav-item-icon-gap);padding-block:var(--sidebar-nav-item-padding-block);padding-inline:var(--sidebar-nav-item-padding-inline-start) var(--sidebar-nav-item-padding-inline);border-radius:var(--sidebar-nav-item-border-radius);font-size:var(--sidebar-nav-item-font-size);font-weight:var(--sidebar-nav-item-font-weight);line-height:var(--sidebar-nav-item-line-height);color:var(--sidebar-nav-item-color);box-shadow:none;transition:box-shadow var(--sidebar-nav-transition-duration) var(--sidebar-nav-transition-easing), color var(--sidebar-nav-transition-duration) var(--sidebar-nav-transition-easing);text-decoration:none;display:flex}.sidebar-nav__item:hover{color:var(--sidebar-nav-item-color)}.sidebar-nav__item:focus-visible{outline:var(--sidebar-nav-focus-ring-width) solid var(--sidebar-nav-focus-ring-color);outline-offset:var(--sidebar-nav-focus-ring-width)}.sidebar-nav__item.sidebar-nav__item--active{font-weight:var(--sidebar-nav-item-active-font-weight)}.sidebar-nav__top-link{align-items:center;gap:var(--sidebar-nav-group-trigger-gap);padding-block:var(--sidebar-nav-group-trigger-padding-block);padding-inline:var(--sidebar-nav-group-trigger-padding-inline);font-size:var(--sidebar-nav-group-label-font-size);font-weight:var(--sidebar-nav-item-font-weight);color:var(--sidebar-nav-item-color);box-shadow:none;transition:color var(--sidebar-nav-transition-duration) var(--sidebar-nav-transition-easing);text-decoration:none;display:flex}.sidebar-nav__top-link:hover{box-shadow:none;color:var(--sidebar-nav-item-color)}.sidebar-nav__top-link:focus-visible{outline:var(--sidebar-nav-focus-ring-width) solid var(--sidebar-nav-focus-ring-color);outline-offset:calc(-1 * var(--sidebar-nav-focus-ring-width))}.sidebar-nav__top-link.sidebar-nav__top-link--active{font-weight:var(--sidebar-nav-item-active-font-weight)}.sidebar-nav__item-icon{width:var(--sidebar-nav-item-icon-size);height:var(--sidebar-nav-item-icon-size);flex-shrink:0;justify-content:center;align-items:center;display:flex}.sidebar-nav__rail{gap:var(--sidebar-nav-item-gap);flex-direction:column;align-items:center;margin:0;padding:0;list-style:none;display:flex}.sidebar-nav__rail-item{all:unset;box-sizing:border-box;inline-size:var(--sidebar-nav-rail-item-size);block-size:var(--sidebar-nav-rail-item-size);border-radius:var(--sidebar-nav-item-border-radius);color:var(--sidebar-nav-item-color);cursor:pointer;transition:box-shadow var(--sidebar-nav-transition-duration) var(--sidebar-nav-transition-easing), color var(--sidebar-nav-transition-duration) var(--sidebar-nav-transition-easing);justify-content:center;align-items:center;display:inline-flex}.sidebar-nav__rail-item:focus-visible{outline:var(--sidebar-nav-focus-ring-width) solid var(--sidebar-nav-focus-ring-color);outline-offset:var(--sidebar-nav-focus-ring-width)}.sidebar-nav__rail-item:hover,.sidebar-nav__rail-item[data-popup-open]{box-shadow:none;color:var(--sidebar-nav-item-color)}.sidebar-nav__rail-icon{justify-content:center;align-items:center;display:inline-flex}.sidebar-nav__rail-initial{font-weight:var(--sidebar-nav-item-active-font-weight);text-transform:uppercase}.sidebar-nav__item.sidebar-nav__item--empty,.sidebar-nav__top-link.sidebar-nav__top-link--empty{color:var(--sidebar-nav-item-empty-color);cursor:var(--sidebar-nav-item-empty-cursor)}.sidebar-nav__item.sidebar-nav__item--empty:hover,.sidebar-nav__top-link.sidebar-nav__top-link--empty:hover{box-shadow:none}.sidebar-nav__rail-item.sidebar-nav__rail-item--empty{color:var(--sidebar-nav-item-empty-color);cursor:var(--sidebar-nav-item-empty-cursor)}.sidebar-nav__rail-item.sidebar-nav__rail-item--empty:hover{box-shadow:none}.sidebar-nav__empty-mark{font-size:var(--sidebar-nav-item-empty-mark-font-size);color:var(--sidebar-nav-item-empty-mark-color);white-space:nowrap;margin-inline-start:auto}

package/dist/sidebar-nav.js

@@ -0,0 +1,225 @@
+'use client';
+import './sidebar-nav.css';
+import { Icon as e } from "./icon.js";
+import { Tooltip as t } from "./tooltip.js";
+import { Menu as n } from "./menu.js";
+import { n as r } from "./_shared/sidebarcontext.js";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Accordion as s } from "@base-ui/react/accordion";
+//#region src/stories/molecules/SidebarNav/SidebarNav.tsx
+function c({ children: e, ...t }) {
+	return /* @__PURE__ */ a("a", {
+		...t,
+		children: e
+	});
+}
+function l({ label: l = "Navegación principal", emptyLabel: u = "sin docs", rail: d, entries: f, defaultValue: p, value: m, onValueChange: h, renderLink: g = c }) {
+	let _ = m === void 0 ? { defaultValue: p } : {
+		value: m,
+		onValueChange: (e) => h?.(e ?? [])
+	}, v = r();
+	return d ?? v.rail ? /* @__PURE__ */ a("nav", {
+		className: "sidebar-nav sidebar-nav--rail",
+		"aria-label": l,
+		children: /* @__PURE__ */ a("ul", {
+			className: "sidebar-nav__rail",
+			role: "list",
+			children: f.map((e) => {
+				let r = /* @__PURE__ */ a("span", {
+					className: "sidebar-nav__rail-icon",
+					"aria-hidden": "true",
+					children: e.icon ?? /* @__PURE__ */ a("span", {
+						className: "sidebar-nav__rail-initial",
+						children: e.label.charAt(0)
+					})
+				});
+				if (e.kind === "link") return e.empty ? /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(t, {
+					label: `${e.label} — ${u}`,
+					side: "right",
+					children: /* @__PURE__ */ a("span", {
+						className: "sidebar-nav__rail-item sidebar-nav__rail-item--empty",
+						"aria-disabled": "true",
+						"aria-label": `${e.label} — ${u}`,
+						children: r
+					})
+				}) }, e.id) : /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(t, {
+					label: e.label,
+					side: "right",
+					children: g({
+						href: e.href,
+						className: ["sidebar-nav__rail-item", e.active ? "sidebar-nav__rail-item--active" : ""].filter(Boolean).join(" "),
+						"aria-current": e.active ? "page" : void 0,
+						"aria-label": e.label,
+						children: r
+					})
+				}) }, e.id);
+				let i = e.items.some((e) => e.active);
+				return /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(n, {
+					items: [
+						e.href ? {
+							type: "link",
+							label: e.label,
+							href: e.href
+						} : {
+							type: "label",
+							label: e.label
+						},
+						...e.href ? [{ type: "separator" }] : [],
+						...e.items.map((e) => e.empty ? {
+							type: "label",
+							label: `${e.label} · ${u}`
+						} : {
+							type: "link",
+							label: e.label,
+							href: e.href
+						})
+					],
+					side: "right",
+					align: "start",
+					openOnHover: !0,
+					renderLink: (e) => g({
+						...e,
+						href: e.href,
+						className: e.className,
+						children: e.children
+					}),
+					trigger: /* @__PURE__ */ a("button", {
+						type: "button",
+						className: ["sidebar-nav__rail-item", i ? "sidebar-nav__rail-item--active" : ""].filter(Boolean).join(" "),
+						"aria-label": e.label,
+						children: r
+					})
+				}) }, e.id);
+			})
+		})
+	}) : /* @__PURE__ */ a("nav", {
+		className: "sidebar-nav",
+		"aria-label": l,
+		children: /* @__PURE__ */ a(s.Root, {
+			className: "sidebar-nav__accordion",
+			multiple: !0,
+			..._,
+			children: f.map((t) => {
+				if (t.kind === "link") {
+					let e = ["sidebar-nav__top-link", t.active ? "sidebar-nav__top-link--active" : ""].filter(Boolean).join(" ");
+					return t.empty ? /* @__PURE__ */ a("div", { children: /* @__PURE__ */ o("span", {
+						className: `${e} sidebar-nav__top-link--empty`,
+						"aria-disabled": "true",
+						title: t.label,
+						children: [
+							t.icon && /* @__PURE__ */ a("span", {
+								className: "sidebar-nav__item-icon",
+								"aria-hidden": "true",
+								children: t.icon
+							}),
+							/* @__PURE__ */ a("span", {
+								className: "sidebar-nav__item-label",
+								children: t.label
+							}),
+							/* @__PURE__ */ a("span", {
+								className: "sidebar-nav__empty-mark",
+								children: u
+							})
+						]
+					}) }, t.id) : /* @__PURE__ */ a("div", { children: g({
+						href: t.href,
+						className: e,
+						title: t.label,
+						"aria-current": t.active ? "page" : void 0,
+						children: /* @__PURE__ */ o(i, { children: [t.icon && /* @__PURE__ */ a("span", {
+							className: "sidebar-nav__item-icon",
+							"aria-hidden": "true",
+							children: t.icon
+						}), /* @__PURE__ */ a("span", {
+							className: "sidebar-nav__item-label",
+							children: t.label
+						})] })
+					}) }, t.id);
+				}
+				return /* @__PURE__ */ o(s.Item, {
+					value: t.id,
+					className: "sidebar-nav__group",
+					children: [/* @__PURE__ */ o(s.Header, {
+						className: "sidebar-nav__group-header",
+						children: [t.href ? g({
+							href: t.href,
+							className: "sidebar-nav__group-label",
+							title: t.label,
+							children: /* @__PURE__ */ o(i, { children: [t.icon && /* @__PURE__ */ a("span", {
+								className: "sidebar-nav__item-icon",
+								"aria-hidden": "true",
+								children: t.icon
+							}), /* @__PURE__ */ a("span", {
+								className: "sidebar-nav__item-label",
+								children: t.label
+							})] })
+						}) : /* @__PURE__ */ o("span", {
+							className: "sidebar-nav__group-label",
+							title: t.label,
+							children: [t.icon && /* @__PURE__ */ a("span", {
+								className: "sidebar-nav__item-icon",
+								"aria-hidden": "true",
+								children: t.icon
+							}), /* @__PURE__ */ a("span", {
+								className: "sidebar-nav__item-label",
+								children: t.label
+							})]
+						}), /* @__PURE__ */ a(s.Trigger, {
+							className: "sidebar-nav__group-chevron",
+							children: /* @__PURE__ */ a(e, {
+								name: "chevron",
+								className: "sidebar-nav__group-chevron-icon",
+								size: "sm"
+							})
+						})]
+					}), /* @__PURE__ */ a(s.Panel, {
+						className: "sidebar-nav__group-content",
+						children: /* @__PURE__ */ a("div", {
+							className: "sidebar-nav__group-content-inner",
+							children: /* @__PURE__ */ a("ul", {
+								className: "sidebar-nav__items",
+								role: "list",
+								children: t.items.map((e) => {
+									let t = ["sidebar-nav__item", e.active ? "sidebar-nav__item--active" : ""].filter(Boolean).join(" ");
+									return e.empty ? /* @__PURE__ */ a("li", { children: /* @__PURE__ */ o("span", {
+										className: `${t} sidebar-nav__item--empty`,
+										"aria-disabled": "true",
+										children: [
+											e.icon && /* @__PURE__ */ a("span", {
+												className: "sidebar-nav__item-icon",
+												"aria-hidden": "true",
+												children: e.icon
+											}),
+											/* @__PURE__ */ a("span", {
+												className: "sidebar-nav__item-label",
+												children: e.label
+											}),
+											/* @__PURE__ */ a("span", {
+												className: "sidebar-nav__empty-mark",
+												children: u
+											})
+										]
+									}) }, e.id) : /* @__PURE__ */ a("li", { children: g({
+										href: e.href,
+										className: t,
+										"aria-current": e.active ? "page" : void 0,
+										children: /* @__PURE__ */ o(i, { children: [e.icon && /* @__PURE__ */ a("span", {
+											className: "sidebar-nav__item-icon",
+											"aria-hidden": "true",
+											children: e.icon
+										}), /* @__PURE__ */ a("span", {
+											className: "sidebar-nav__item-label",
+											children: e.label
+										})] })
+									}) }, e.id);
+								})
+							})
+						})
+					})]
+				}, t.id);
+			})
+		})
+	});
+}
+//#endregion
+export { l as SidebarNav };

package/dist/sidebar.css

@@ -0,0 +1 @@
+.sidebar{--sidebar-resize-step-px:calc(var(--sidebar-resize-step) * 1px);block-size:100%;inline-size:var(--app-shell-sidebar-width,var(--sidebar-width));padding-inline:var(--sidebar-padding-inline);background-color:var(--sidebar-bg);border-inline-end:var(--sidebar-border-width) solid var(--sidebar-border-color);transition:inline-size var(--sidebar-transition-duration) var(--sidebar-transition-easing);flex-shrink:0;position:relative}.sidebar__inner{gap:var(--sidebar-gap);flex-direction:column;block-size:100%;min-inline-size:0;display:flex;overflow:hidden}.sidebar.sidebar--rail{inline-size:var(--sidebar-rail-width);padding-inline:var(--sidebar-rail-padding-inline-start)}.sidebar.sidebar--closed{visibility:hidden;border-inline-end-width:0;inline-size:0;padding-inline:0}.sidebar:has(.sidebar__resizer[data-dragging]){transition:none}:is(.sidebar:has(.sidebar__resizer:hover),.sidebar:has(.sidebar__resizer[data-dragging]),.sidebar:has(.sidebar__resizer:focus-visible)){border-inline-end-color:var(--sidebar-resizer-hover-color)}.sidebar__header,.sidebar__footer{flex-shrink:0;align-items:center;min-inline-size:0;display:flex}.sidebar__header{padding-block-start:var(--sidebar-padding-block)}.sidebar__header a,.sidebar__header a:hover{box-shadow:none;color:inherit;padding-block-end:0;text-decoration:none}.sidebar__footer{padding-block-end:var(--sidebar-padding-block)}.sidebar__panel{scrollbar-width:thin;min-block-size:0;padding-block:var(--sidebar-panel-padding-block);flex:1;overflow:hidden auto}.sidebar--rail .sidebar__panel{scrollbar-width:none}.sidebar--rail .sidebar__header,.sidebar--rail .app-launcher__trigger-label{display:none}.sidebar--rail .app-launcher__trigger--label{width:var(--app-launcher-trigger-size);height:var(--app-launcher-trigger-size);justify-content:center;padding:0}.sidebar__resizer{inline-size:var(--sidebar-resizer-width);cursor:col-resize;touch-action:none;position:absolute;inset-block:0;inset-inline-end:calc(-1 * var(--sidebar-resizer-width) / 2)}.sidebar__resizer:hover,.sidebar__resizer[data-dragging],.sidebar__resizer:focus-visible{outline:none}.sidebar.sidebar--drawer{block-size:auto;inline-size:min(var(--sidebar-width), 100% - var(--size-component-lg));max-inline-size:100%;z-index:var(--sidebar-drawer-z-index);border-inline-end:var(--sidebar-border-width) solid var(--sidebar-border-color);transition:translate var(--sidebar-transition-duration) var(--sidebar-transition-easing);padding-block-end:env(safe-area-inset-bottom);position:fixed;inset-block-start:calc(var(--app-header-height) + env(safe-area-inset-top));inset-block-end:0;inset-inline-start:0}.sidebar.sidebar--drawer[data-state=closed]{visibility:hidden;transition:translate var(--sidebar-transition-duration) var(--sidebar-transition-easing), visibility 0s var(--sidebar-transition-duration);translate:-100%}@media (prefers-reduced-motion:reduce){.sidebar{transition:none}}.sidebar__group{padding-block:var(--sidebar-group-padding-block);flex-direction:column;min-inline-size:0;display:flex}.sidebar__group-content{gap:var(--sidebar-group-gap);flex-direction:column;min-inline-size:0;display:flex}.sidebar__separator{block-size:var(--sidebar-separator-height);margin-block:var(--sidebar-separator-margin-block);background-color:var(--sidebar-separator-color);border:none;flex-shrink:0;margin-inline:0}

package/dist/sidebar.js

@@ -0,0 +1,122 @@
+'use client';
+import './sidebar.css';
+import { n as e, t } from "./_shared/sidebarcontext.js";
+import { t as n } from "./_shared/appshellcontext.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useCallback as a, useContext as o, useEffect as s, useRef as c, useState as l } from "react";
+//#region src/stories/sections/Sidebar/Sidebar.tsx
+function u(e, t) {
+	let n = document.createElement("div");
+	n.style.position = "absolute", n.style.inlineSize = `var(${t})`, e.appendChild(n);
+	let r = parseFloat(getComputedStyle(n).inlineSize);
+	return n.remove(), r;
+}
+function d({ logo: e, children: d, footer: f, id: p, label: m = "Barra lateral", resizerLabel: h = "Ancho de la barra lateral", resizerValueText: g = (e) => `${e} píxeles`, mode: _ }) {
+	let v = o(n), y = v ? v.sidebar : _ ?? "open", b = v ? v.isDesktop : !0, x = b && y === "rail", S = !b, C = c(null), w = c(null), [T, E] = l(null);
+	s(() => {
+		let e = C.current;
+		if (!e) return;
+		let t = {
+			min: u(e, "--sidebar-min-width"),
+			max: u(e, "--sidebar-max-width"),
+			rail: u(e, "--sidebar-rail-width"),
+			base: u(e, "--sidebar-width")
+		};
+		Object.values(t).every(Number.isFinite) && E(t);
+	}, []);
+	let D = (e) => {
+		!S || !v || e.target.closest("a[href], [aria-haspopup=\"dialog\"]") && v.closeSidebar();
+	}, O = a((e) => {
+		let t = C.current;
+		if (!t || !v) return;
+		let n = u(t, "--sidebar-min-width"), r = u(t, "--sidebar-max-width");
+		e < u(t, "--sidebar-rail-width") ? v.setSidebar("closed") : e < n ? v.setSidebar("rail") : (v.setSidebar("open"), v.setSidebarWidth(Math.min(r, Math.round(e))));
+	}, [v]), k = (e) => {
+		if (!C.current) return;
+		e.preventDefault();
+		let t = e.currentTarget;
+		t.setPointerCapture(e.pointerId), t.dataset.dragging = "true";
+		let n = C.current.getBoundingClientRect().left, r = (e) => O(e.clientX - n), i = () => {
+			delete t.dataset.dragging, t.removeEventListener("pointermove", r), t.removeEventListener("pointerup", i), t.removeEventListener("pointercancel", i);
+		};
+		t.addEventListener("pointermove", r), t.addEventListener("pointerup", i), t.addEventListener("pointercancel", i);
+	}, A = (e) => {
+		if (!C.current || !v) return;
+		let t = u(C.current, "--sidebar-resize-step-px"), n = C.current.getBoundingClientRect().width;
+		e.key === "ArrowLeft" && (e.preventDefault(), O(n - t)), e.key === "ArrowRight" && (e.preventDefault(), y === "open" ? O(n + t) : v.setSidebar("open")), e.key === "Home" && (e.preventDefault(), v.setSidebar("rail")), e.key === "End" && (e.preventDefault(), O(u(C.current, "--sidebar-max-width")));
+	};
+	s(() => {
+		if (!S) return;
+		if (y === "open") {
+			w.current = document.activeElement, C.current?.focus();
+			return;
+		}
+		let e = C.current, t = document.activeElement;
+		(e && t instanceof Node && e.contains(t) || t === document.body || t === null) && w.current?.focus?.(), w.current = null;
+	}, [S, y]);
+	let j = Math.round(y === "rail" ? T?.rail ?? 0 : (v?.sidebarWidth || T?.base) ?? 0), M = ["sidebar", S ? "sidebar--drawer" : `sidebar--${y}`].join(" ");
+	return /* @__PURE__ */ r(t.Provider, {
+		value: { rail: x },
+		children: /* @__PURE__ */ i("aside", {
+			ref: C,
+			id: p,
+			className: M,
+			"aria-label": m,
+			role: S && y === "open" ? "dialog" : void 0,
+			"aria-modal": S && y === "open" ? !0 : void 0,
+			"data-state": y,
+			tabIndex: S ? -1 : void 0,
+			inert: S && y === "closed" ? !0 : void 0,
+			onClick: D,
+			children: [/* @__PURE__ */ i("div", {
+				className: "sidebar__inner",
+				children: [
+					e && /* @__PURE__ */ r("div", {
+						className: "sidebar__header",
+						children: e
+					}),
+					/* @__PURE__ */ r("div", {
+						className: "sidebar__panel",
+						children: d
+					}),
+					f && /* @__PURE__ */ r("div", {
+						className: "sidebar__footer",
+						children: f
+					})
+				]
+			}), b && v && y !== "closed" && /* @__PURE__ */ r("div", {
+				className: "sidebar__resizer",
+				role: "separator",
+				"aria-orientation": "vertical",
+				"aria-label": h,
+				"aria-valuenow": j,
+				"aria-valuemin": T ? Math.round(T.rail) : void 0,
+				"aria-valuemax": T ? Math.round(T.max) : void 0,
+				"aria-valuetext": g(j),
+				tabIndex: 0,
+				onPointerDown: k,
+				onKeyDown: A
+			})]
+		})
+	});
+}
+function f({ className: e, ...t }) {
+	return /* @__PURE__ */ r("div", {
+		className: ["sidebar__group", e].filter(Boolean).join(" "),
+		...t
+	});
+}
+function p({ className: e, ...t }) {
+	return /* @__PURE__ */ r("div", {
+		className: ["sidebar__group-content", e].filter(Boolean).join(" "),
+		...t
+	});
+}
+function m({ className: e, ...t }) {
+	return /* @__PURE__ */ r("hr", {
+		className: ["sidebar__separator", e].filter(Boolean).join(" "),
+		...t
+	});
+}
+//#endregion
+export { d as Sidebar, f as SidebarGroup, p as SidebarGroupContent, m as SidebarSeparator, e as useSidebar };

package/dist/site-footer.css

@@ -0,0 +1 @@
+.site-footer{padding-block:var(--site-footer-space-block-start) var(--site-footer-space-block-end)}@media (width<=767.98px){.site-footer{--site-footer-space-block-start:var(--site-footer-space-block-start-compact);--site-footer-space-block-end:var(--site-footer-space-block-end-compact)}}.site-footer__inner{gap:var(--site-footer-gap);display:grid}.site-footer__brand{gap:var(--site-footer-brand-gap);justify-items:start;display:grid}.site-footer .site-footer__tagline{max-inline-size:var(--content-measure);margin:0}.site-footer__body{grid-template-columns:repeat(auto-fit, minmax(var(--site-footer-column-min-size), 1fr));gap:var(--site-footer-columns-gap);align-items:start;display:grid}.site-footer__column{gap:var(--site-footer-column-gap);align-content:start;display:grid}.site-footer .site-footer__column-title{margin:0}.site-footer .site-footer__links{gap:var(--site-footer-links-gap);display:grid}@media (width>=768px){.site-footer__aside{grid-column:span 2}}.site-footer__legal{border-block-start:var(--site-footer-legal-separator-thickness) solid var(--site-footer-legal-separator-color);padding-block-start:var(--site-footer-legal-space-before)}

package/dist/site-footer.js

@@ -0,0 +1,72 @@
+import './site-footer.css';
+import { Container as e } from "./container.js";
+import { Heading as t } from "./heading.js";
+import { List as n } from "./list.js";
+import { t as r } from "./_shared/logo.js";
+import { Paragraph as i } from "./paragraph.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/stories/sections/SiteFooter/SiteFooter.tsx
+function s({ children: e, ...t }) {
+	return /* @__PURE__ */ a("a", {
+		...t,
+		children: e
+	});
+}
+function c({ logo: c = /* @__PURE__ */ a(r, { size: "lg" }), tagline: l, columns: u, renderLink: d = s, aside: f, legal: p, columnTitleLevel: m = 2, surface: h = "dark", width: g = "xl", className: _, id: v }) {
+	return /* @__PURE__ */ a("footer", {
+		id: v,
+		className: [
+			"site-footer",
+			h === "dark" && "surface-dark",
+			_
+		].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ o(e, {
+			width: g,
+			innerClassName: "site-footer__inner",
+			children: [
+				/* @__PURE__ */ o("div", {
+					className: "site-footer__brand",
+					children: [c, l && /* @__PURE__ */ a(i, {
+						size: "large",
+						className: "site-footer__tagline",
+						children: l
+					})]
+				}),
+				(u?.length || f) && /* @__PURE__ */ o("div", {
+					className: "site-footer__body",
+					children: [u?.map((e) => /* @__PURE__ */ o("nav", {
+						className: "site-footer__column",
+						"aria-label": e.title,
+						children: [/* @__PURE__ */ a(t, {
+							level: m,
+							size: 3,
+							className: "site-footer__column-title",
+							children: e.title
+						}), /* @__PURE__ */ a(n, {
+							type: "plain",
+							className: "site-footer__links",
+							children: e.links.map((e) => /* @__PURE__ */ a("li", { children: d({
+								href: e.href,
+								className: "site-footer__link link--ink",
+								children: e.label,
+								...e.external ? {
+									target: "_blank",
+									rel: "noopener noreferrer"
+								} : {}
+							}) }, e.id ?? e.href))
+						})]
+					}, e.id ?? e.title)), f && /* @__PURE__ */ a("div", {
+						className: "site-footer__aside",
+						children: f
+					})]
+				}),
+				p && /* @__PURE__ */ a("div", {
+					className: "site-footer__legal",
+					children: p
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { c as SiteFooter };

package/dist/site-header.css

@@ -0,0 +1 @@
+.site-header{background-color:var(--site-header-bg);z-index:var(--site-header-z-index);position:sticky;inset-block-start:0}.site-header__bar{justify-content:space-between;align-items:center;gap:var(--site-header-gap);block-size:var(--site-header-height);display:flex}.site-header__logo{box-shadow:none;color:inherit;align-items:center;margin-inline-start:var(--site-header-logo-margin-inline-start);padding-block-end:0;text-decoration:none;display:flex}.site-header__logo:hover{box-shadow:none;color:inherit}.site-header__logo{--logo-height-sm:var(--site-header-content-height);--logo-height-md:var(--site-header-content-height);--logo-height-lg:var(--site-header-content-height);--logo-height-xl:var(--site-header-content-height);--logo-height-xxl:var(--site-header-content-height)}.site-header__logo>*{block-size:var(--site-header-content-height);inline-size:auto}@media (width<=767.98px){.site-header{--site-header-content-height:var(--site-header-content-height-compact);--site-header-height:var(--site-header-height-compact)}}@media (width<=479.98px){.site-header{--site-header-content-height:var(--site-header-content-height-narrow);--site-header-height:var(--site-header-height-narrow);--site-header-gap:var(--site-header-gap-narrow)}}.site-header__controls,.site-header__actions{align-items:center;gap:var(--site-header-gap);display:flex}@media (width<=767.98px){.site-header__actions{display:none}}.site-header__panel{z-index:var(--site-header-panel-z-index);overscroll-behavior:contain;background-color:var(--site-header-panel-bg);padding-block:var(--site-header-panel-padding-block) var(--site-header-panel-padding-block-end);visibility:hidden;clip-path:inset(0 0 100%);transition:clip-path var(--site-header-panel-transition-duration) var(--site-header-panel-transition-easing), visibility 0s linear var(--site-header-panel-transition-duration);flex-direction:column;display:flex;position:fixed;inset-block-start:var(--site-header-height);inset-block-end:0;inset-inline:0;overflow-y:auto}.site-header__panel.site-header__panel--open{visibility:visible;clip-path:inset(0);transition-delay:0s}.site-header .site-header__panel>.container.container{padding-inline:max(var(--site-header-panel-padding-inline), env(safe-area-inset-left)) max(var(--site-header-panel-padding-inline), env(safe-area-inset-right))}.site-header__panel>.container{flex-direction:column;flex:1;min-block-size:0;display:flex}.site-header__panel-inner{gap:var(--site-header-panel-gap);flex-direction:column;flex:1;inline-size:100%;display:flex}.site-header__settings{align-items:flex-start;gap:var(--site-header-settings-gap);flex-direction:column;margin-block-start:auto;display:flex}@media (width>=768px){.site-header__settings{flex-flow:wrap;align-items:center}}

package/dist/site-header.js

@@ -0,0 +1,80 @@
+'use client';
+import './site-header.css';
+import { Container as e } from "./container.js";
+import { MenuButton as t } from "./menu-button.js";
+import { t as n } from "./_shared/logo.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useEffect as a, useRef as o, useState as s } from "react";
+//#region src/stories/sections/SiteHeader/SiteHeader.tsx
+function c({ children: e, ...t }) {
+	return /* @__PURE__ */ r("a", {
+		...t,
+		children: e
+	});
+}
+function l({ logoHref: l = "/", logoLabel: u = "Studio LXD — ir al inicio", menuLabel: d = "Menú de navegación", menuCloseLabel: f, logoSize: p = "xxl", logo: m = /* @__PURE__ */ r(n, { size: p }), menuButtonSize: h = "lg", renderLogoLink: g = c, width: _ = "xl", open: v, onOpenChange: y, children: b, settings: x, panelId: S = "site-header-panel", actions: C, language: w }) {
+	let [T, E] = s(!1), D = v !== void 0, O = D ? v : T, k = !!(b || x || w), A = o(null), j = o(null), M = (e) => {
+		D || E(e), y?.(e);
+	};
+	return a(() => {
+		if (!O) return;
+		let e = (e) => {
+			e.key === "Escape" && (M(!1), j.current?.focus());
+		}, t = (e) => {
+			let t = e.target;
+			A.current?.contains(t) || t?.closest("[role=\"menu\"], [role=\"listbox\"], [role=\"dialog\"]") || M(!1);
+		};
+		document.addEventListener("keydown", e), document.addEventListener("pointerdown", t);
+		let n = document.body.style.overflow;
+		return document.body.style.overflow = "hidden", () => {
+			document.removeEventListener("keydown", e), document.removeEventListener("pointerdown", t), document.body.style.overflow = n;
+		};
+	}, [O]), /* @__PURE__ */ r("header", {
+		ref: A,
+		className: "site-header",
+		children: /* @__PURE__ */ i(e, {
+			width: _,
+			innerClassName: "site-header__bar",
+			children: [
+				g({
+					href: l,
+					className: "site-header__logo",
+					"aria-label": u,
+					children: m
+				}),
+				/* @__PURE__ */ i("div", {
+					className: "site-header__controls",
+					children: [C && /* @__PURE__ */ r("div", {
+						className: "site-header__actions",
+						children: C
+					}), k && /* @__PURE__ */ r(t, {
+						ref: j,
+						isOpen: O,
+						onClick: () => M(!O),
+						label: d,
+						closeLabel: f,
+						size: h,
+						"aria-controls": S
+					})]
+				}),
+				k && /* @__PURE__ */ r("div", {
+					className: ["site-header__panel", O ? "site-header__panel--open" : ""].filter(Boolean).join(" "),
+					id: S,
+					inert: !O,
+					"aria-hidden": !O,
+					children: /* @__PURE__ */ i(e, {
+						width: _,
+						space: "none",
+						innerClassName: "site-header__panel-inner",
+						children: [b, (w || x) && /* @__PURE__ */ i("div", {
+							className: "site-header__settings",
+							children: [w, x]
+						})]
+					})
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { l as SiteHeader };

package/dist/site-nav.css

@@ -0,0 +1 @@
+.site-nav{gap:var(--site-nav-group-gap);grid-template-columns:repeat(12,1fr);display:grid}.site-nav__group{grid-column:span 12;min-inline-size:0}@media (width>=768px){.site-nav__group{grid-column:span 6}}@media (width>=768px) and (width<=1023.98px){.site-nav__group:nth-child(odd):last-child{grid-column:span 12}}@media (width>=1024px){.site-nav__group{grid-column:span 4}}@media (width>=1024px) and (width<=1279.98px){.site-nav__group:nth-child(3n+1):last-child{grid-column:span 12}.site-nav__group:nth-child(3n+1):nth-last-child(2),.site-nav__group:nth-child(3n+1):nth-last-child(2)~.site-nav__group{grid-column:span 6}}@media (width>=1280px){.site-nav__group{grid-column:span 3}.site-nav[data-columns="1"]>.site-nav__group{grid-column:span 12}.site-nav[data-columns="2"]>.site-nav__group{grid-column:span 6}.site-nav[data-columns="3"]>.site-nav__group{grid-column:span 4}.site-nav[data-columns="4"]>.site-nav__group{grid-column:span 3}.site-nav[data-columns="5"]{grid-template-columns:repeat(5,1fr)}.site-nav[data-columns="5"]>.site-nav__group{grid-column:span 1}.site-nav[data-columns="5"]>.site-nav__group:nth-child(5n+1):last-child{grid-column:span 5}}.site-nav__label{margin-block:0 var(--site-nav-label-margin-block-end)}.site-nav__list{gap:var(--site-nav-item-gap);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.site-nav__link,.site-nav__label-link{color:inherit;box-shadow:none;padding-block-end:var(--site-nav-item-underline-offset);text-decoration:none}.site-nav__link{font-size:var(--site-nav-item-font-size);font-weight:var(--site-nav-item-font-weight);line-height:var(--site-nav-item-line-height);color:var(--site-nav-item-color);display:inline-block}.site-nav__link:hover,.site-nav__label-link:hover{color:var(--site-nav-item-hover-color);box-shadow:inset 0 calc(-1 * var(--site-nav-item-hover-line-width)) 0 0 currentColor}.site-nav__link.site-nav__link--current{font-weight:var(--site-nav-item-current-font-weight)}.site-nav__link:focus-visible,.site-nav__label-link:focus-visible{outline:var(--site-nav-focus-ring-width) solid var(--site-nav-focus-ring-color);outline-offset:var(--site-nav-focus-ring-offset)}

package/dist/site-nav.js

@@ -0,0 +1,54 @@
+import './site-nav.css';
+import { Heading as e } from "./heading.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/stories/molecules/SiteNav/SiteNav.tsx
+function r({ href: e, children: n, className: r, "aria-current": i, target: a, rel: o }) {
+	return /* @__PURE__ */ t("a", {
+		href: e,
+		className: r,
+		"aria-current": i,
+		target: a,
+		rel: o,
+		children: n
+	});
+}
+function i(e, t) {
+	return t || (e === "_blank" ? "noopener noreferrer" : void 0);
+}
+var a = 5;
+function o({ groups: o, label: s = "Navegación del sitio", renderLink: c = r, className: l }) {
+	let u = ["site-nav", l].filter(Boolean).join(" "), d = Math.min(o.length, a) || 1;
+	return /* @__PURE__ */ t("nav", {
+		className: u,
+		"aria-label": s,
+		"data-columns": d,
+		children: o.map((r) => /* @__PURE__ */ n("div", {
+			className: "site-nav__group",
+			children: [/* @__PURE__ */ t(e, {
+				level: 2,
+				size: 6,
+				className: "site-nav__label",
+				children: r.href ? c({
+					href: r.href,
+					className: "site-nav__label-link",
+					children: r.label
+				}) : r.label
+			}), /* @__PURE__ */ t("ul", {
+				className: "site-nav__list",
+				children: r.items.map((e) => /* @__PURE__ */ t("li", {
+					className: "site-nav__item",
+					children: c({
+						href: e.href,
+						className: ["site-nav__link", e.current ? "site-nav__link--current" : ""].filter(Boolean).join(" "),
+						"aria-current": e.current ? "page" : void 0,
+						target: e.target,
+						rel: i(e.target, e.rel),
+						children: e.label
+					})
+				}, e.id))
+			})]
+		}, r.id))
+	});
+}
+//#endregion
+export { o as SiteNav };

package/dist/site-shell.css

@@ -0,0 +1 @@
+.site-shell{min-block-size:100dvh;font-size:var(--site-shell-text-font-size);line-height:var(--site-shell-text-line-height);flex-direction:column;display:flex}.site-shell__main{flex-direction:column;flex:1;display:flex}.site-shell__main>*{flex:1}.site-shell__main [id]{scroll-margin-top:var(--site-header-height)}

package/dist/site-shell.js

@@ -0,0 +1,20 @@
+import './site-shell.css';
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+//#region src/stories/sections/SiteShell/SiteShell.tsx
+var r = n(function({ header: n, footer: r, children: i, className: a }, o) {
+	return /* @__PURE__ */ t("div", {
+		ref: o,
+		className: ["site-shell", a].filter(Boolean).join(" "),
+		children: [
+			n,
+			/* @__PURE__ */ e("div", {
+				className: "site-shell__main",
+				children: i
+			}),
+			r
+		]
+	});
+});
+//#endregion
+export { r as SiteShell };

package/dist/skeleton.css

@@ -0,0 +1 @@
+@keyframes skeleton-sweep{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton{border-radius:var(--skeleton-border-radius);background-color:var(--skeleton-bg);background-image:linear-gradient(90deg, transparent 0%, var(--skeleton-highlight) 50%, transparent 100%);animation:skeleton-sweep var(--skeleton-duration) linear infinite;background-repeat:no-repeat;background-size:200% 100%;display:block}.skeleton:not([width]){width:100%}.skeleton:not([height]){height:var(--skeleton-height)}.skeleton.skeleton--circle{border-radius:var(--skeleton-circle-border-radius);aspect-ratio:1}.skeleton.skeleton--circle:not([width]){width:auto}@media (prefers-reduced-motion:reduce){.skeleton{background-image:none;animation:none}}

package/dist/skeleton.js

@@ -0,0 +1,18 @@
+import './skeleton.css';
+import { jsx as e } from "react/jsx-runtime";
+//#region src/stories/atoms/Skeleton/Skeleton.tsx
+function t({ width: t, height: n, circle: r = !1, className: i, ...a }) {
+	return /* @__PURE__ */ e("svg", {
+		"aria-hidden": "true",
+		className: [
+			"skeleton",
+			r ? "skeleton--circle" : "",
+			i
+		].filter(Boolean).join(" "),
+		width: t,
+		height: n,
+		...a
+	});
+}
+//#endregion
+export { t as Skeleton };

package/dist/skip-link.css

@@ -0,0 +1 @@
+.skip-link:focus-visible{block-size:auto;inline-size:auto;padding-block:var(--skip-link-padding-block);padding-inline:var(--skip-link-padding-inline);clip-path:none;white-space:nowrap;z-index:var(--skip-link-z-index);background-color:var(--skip-link-bg);color:var(--skip-link-color);font-weight:var(--skip-link-font-weight);box-shadow:none;outline:var(--skip-link-focus-ring-width) solid var(--skip-link-focus-ring-color);outline-offset:var(--skip-link-focus-ring-offset);margin:0;text-decoration:none;position:fixed;inset-block-start:var(--skip-link-inset);inset-inline-start:var(--skip-link-inset);overflow:visible}