@studiolxd/brand 49.28.0 → 51.0.0

package/dist/select.js

@@ -1,160 +1,4 @@
 'use client';
 import './select.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
-import { Icon as t } from "./icon.js";
-import { n } from "./_shared/portal-container.js";
-import { Children as r, createContext as i, forwardRef as a, isValidElement as o, useContext as s, useMemo as c } from "react";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
-import { Select as f } from "@base-ui/react/select";
-//#region src/stories/atoms/Select/Select.tsx
-function p(e) {
-	return Array.isArray(e.options);
-}
-var m = i(null);
-function h(e, t) {
-	r.forEach(e, (e) => {
-		if (!o(e)) return;
-		let n = e.props ?? {};
-		if (e.type === x || typeof n.value == "string" && e.type !== g) {
-			typeof n.value == "string" && t.set(n.value, n.children);
-			return;
-		}
-		n.children != null && h(n.children, t);
-	});
-}
-function g({ children: e, onValueChange: t, ...n }) {
-	let r = c(() => {
-		let t = /* @__PURE__ */ new Map();
-		return h(e, t), t;
-	}, [e]);
-	return /* @__PURE__ */ u(m.Provider, {
-		value: r,
-		children: /* @__PURE__ */ u(f.Root, {
-			onValueChange: t ? (e) => t(e) : void 0,
-			...n,
-			children: e
-		})
-	});
-}
-var _ = a(function({ placeholder: e, children: t, ...n }, r) {
-	let i = s(m);
-	return /* @__PURE__ */ u(f.Value, {
-		ref: r,
-		...n,
-		children: (n) => typeof t == "function" ? t(n) : t ?? (n == null || n === "" ? e ?? null : i?.get(n) ?? n)
-	});
-}), v = a(function({ className: e, children: t, ...n }, r) {
-	let i = ["select__group", e ?? ""].filter(Boolean).join(" ");
-	return /* @__PURE__ */ u(f.Group, {
-		ref: r,
-		className: i,
-		...n,
-		children: t
-	});
-}), y = a(function({ size: e = "md", className: n, children: r, ...i }, a) {
-	let o = [
-		"select",
-		e === "md" ? "" : `select--${e}`,
-		n ?? ""
-	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ d(f.Trigger, {
-		ref: a,
-		className: o,
-		...i,
-		children: [r, /* @__PURE__ */ u(t, {
-			name: "chevron",
-			className: "select__icon"
-		})]
-	});
-}), b = a(function({ size: e = "md", container: t, className: r, children: i, side: a = "bottom", align: o = "start", sideOffset: s = -1, ...c }, l) {
-	let d = n(t), p = [
-		"select__content",
-		e === "md" ? "" : `select__content--${e}`,
-		r ?? ""
-	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ u(f.Portal, {
-		container: d,
-		children: /* @__PURE__ */ u(f.Positioner, {
-			className: "select__positioner",
-			side: a,
-			align: o,
-			sideOffset: s,
-			alignItemWithTrigger: !1,
-			children: /* @__PURE__ */ u(f.Popup, {
-				ref: l,
-				className: p,
-				...c,
-				children: i
-			})
-		})
-	});
-}), x = a(function({ className: e, children: t, ...n }, r) {
-	let i = ["select__item", e ?? ""].filter(Boolean).join(" ");
-	return /* @__PURE__ */ u(f.Item, {
-		ref: r,
-		className: i,
-		...n,
-		children: /* @__PURE__ */ u(f.ItemText, { children: t })
-	});
-}), S = a(function({ className: e, children: t, ...n }, r) {
-	let i = ["select__label", e ?? ""].filter(Boolean).join(" ");
-	return /* @__PURE__ */ u(f.GroupLabel, {
-		ref: r,
-		className: i,
-		...n,
-		children: t
-	});
-}), C = a(function({ className: e, ...t }, n) {
-	let r = ["select__separator", e ?? ""].filter(Boolean).join(" ");
-	return /* @__PURE__ */ u(f.Separator, {
-		ref: n,
-		className: r,
-		...t
-	});
-});
-function w({ value: e, label: t, "aria-label": n }) {
-	return /* @__PURE__ */ u(x, {
-		value: e,
-		"aria-label": n,
-		children: t
-	}, e);
-}
-function T({ override: t }) {
-	return /* @__PURE__ */ u(l, { children: e("select")("placeholder", t) });
-}
-var E = a(function({ options: e, value: t, defaultValue: n, placeholder: r, disabled: i, readOnly: a, size: o = "md", onValueChange: s, id: c, name: l, required: f, onBlur: m, "aria-label": h, "aria-describedby": x, "aria-invalid": C, container: E }, D) {
-	return /* @__PURE__ */ d(g, {
-		value: t,
-		defaultValue: n,
-		disabled: i,
-		readOnly: a,
-		name: l,
-		required: f,
-		onValueChange: s,
-		children: [/* @__PURE__ */ u(y, {
-			ref: D,
-			size: o,
-			id: c,
-			onBlur: m,
-			"aria-label": h,
-			"aria-describedby": x,
-			"aria-invalid": C || void 0,
-			children: /* @__PURE__ */ u(_, { placeholder: /* @__PURE__ */ u(T, { override: r }) })
-		}), /* @__PURE__ */ u(b, {
-			size: o,
-			container: E,
-			children: e.map((e, t) => p(e) ? /* @__PURE__ */ d(v, { children: [/* @__PURE__ */ u(S, { children: e.label }), e.options.map(w)] }, `group-${t}`) : w(e))
-		})]
-	});
-}), D = Object.assign(E, {
-	Root: g,
-	Trigger: y,
-	Value: _,
-	Content: b,
-	Group: v,
-	Label: S,
-	Item: x,
-	Separator: C
-});
-//#endregion
-export { D as Select, b as SelectContent, v as SelectGroup, x as SelectItem, S as SelectLabel, g as SelectRoot, C as SelectSeparator, y as SelectTrigger, _ as SelectValue, p as isSelectOptionGroup };
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c, u as l } from "./_shared/select.js";
+export { c as Select, i as SelectContent, o as SelectGroup, n as SelectItem, e as SelectLabel, a as SelectRoot, s as SelectSeparator, t as SelectTrigger, r as SelectValue, l as isSelectOptionGroup };

package/dist/sheet.css

@@ -1 +1 @@
-.sheet__overlay{--dialog-overlay-bg:var(--sheet-backdrop-bg);--dialog-overlay-opacity:var(--sheet-backdrop-opacity);--dialog-overlay-z-index:var(--sheet-backdrop-z-index);--dialog-transition-duration:var(--sheet-transition-duration);--dialog-transition-easing:var(--sheet-transition-easing)}.sheet{z-index:var(--sheet-z-index);gap:var(--sheet-gap);padding-block:var(--sheet-padding-block);padding-inline:var(--sheet-padding-inline);background-color:var(--sheet-bg);box-shadow:var(--sheet-shadow);animation-duration:var(--sheet-transition-duration);animation-timing-function:var(--sheet-transition-easing);flex-direction:column;animation-fill-mode:forwards;display:flex;position:fixed;overflow-y:auto;container:dialog/inline-size}.sheet[data-side=left],.sheet[data-side=right]{width:var(--sheet-inline-size);top:0;bottom:0}.sheet[data-side=left]{left:0}.sheet[data-side=right]{right:0}.sheet[data-side=top],.sheet[data-side=bottom]{max-height:var(--sheet-block-size);left:0;right:0}.sheet[data-side=top]{top:0}.sheet[data-side=bottom]{bottom:0}@keyframes sheet-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes sheet-out-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes sheet-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes sheet-out-left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes sheet-in-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes sheet-out-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes sheet-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes sheet-out-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}.sheet[data-side=right][data-open]{animation-name:sheet-in-right}.sheet[data-side=right][data-closed]{animation-name:sheet-out-right}.sheet[data-side=left][data-open]{animation-name:sheet-in-left}.sheet[data-side=left][data-closed]{animation-name:sheet-out-left}.sheet[data-side=top][data-open]{animation-name:sheet-in-top}.sheet[data-side=top][data-closed]{animation-name:sheet-out-top}.sheet[data-side=bottom][data-open]{animation-name:sheet-in-bottom}.sheet[data-side=bottom][data-closed]{animation-name:sheet-out-bottom}.sheet__header{--dialog-header-gap:var(--sheet-header-gap);--dialog-header-close-room:var(--sheet-padding-inline)}.sheet__title{color:var(--sheet-title-color);font-size:var(--sheet-title-font-size);font-weight:var(--sheet-title-font-weight);margin:0}.sheet__description{font-size:var(--sheet-description-font-size);color:var(--sheet-description-color);margin:0}.sheet__close.close-button{--close-button-size:var(--sheet-close-size);--close-button-icon-size:var(--sheet-close-icon-size);--close-button-color:var(--sheet-close-color);--close-button-focus-ring-width:var(--sheet-close-focus-ring-width);--close-button-focus-ring-offset:var(--sheet-close-focus-ring-offset);--close-button-focus-ring-color:var(--sheet-close-focus-ring-color);position:absolute;inset-block-start:var(--sheet-close-inset);inset-inline-end:var(--sheet-close-inset)}.sheet__body{flex:1;min-height:0}.sheet__footer{--dialog-footer-gap:var(--sheet-footer-gap)}
+.sheet__overlay{--dialog-overlay-bg:var(--sheet-backdrop-bg);--dialog-overlay-opacity:var(--sheet-backdrop-opacity);--dialog-overlay-z-index:var(--sheet-backdrop-z-index);--dialog-transition-duration:var(--sheet-transition-duration);--dialog-transition-easing:var(--sheet-transition-easing)}.sheet{z-index:var(--sheet-z-index);gap:var(--sheet-gap);padding-block:var(--sheet-padding-block);padding-inline:var(--sheet-padding-inline);background-color:var(--sheet-bg);box-shadow:var(--sheet-shadow);animation-duration:var(--sheet-transition-duration);animation-timing-function:var(--sheet-transition-easing);flex-direction:column;animation-fill-mode:forwards;display:flex;position:fixed;overflow-y:auto;container:dialog/inline-size}.sheet[data-side=left],.sheet[data-side=right]{inline-size:var(--sheet-width);inset-block:0}.sheet[data-side=left]{left:0}.sheet[data-side=right]{right:0}.sheet[data-side=top],.sheet[data-side=bottom]{max-block-size:var(--sheet-height);inset-inline:0}.sheet[data-side=top]{inset-block-start:0}.sheet[data-side=bottom]{inset-block-end:0}@keyframes sheet-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes sheet-out-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes sheet-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes sheet-out-left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes sheet-in-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes sheet-out-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes sheet-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes sheet-out-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}.sheet[data-side=right][data-open]{animation-name:sheet-in-right}.sheet[data-side=right][data-closed]{animation-name:sheet-out-right}.sheet[data-side=left][data-open]{animation-name:sheet-in-left}.sheet[data-side=left][data-closed]{animation-name:sheet-out-left}.sheet[data-side=top][data-open]{animation-name:sheet-in-top}.sheet[data-side=top][data-closed]{animation-name:sheet-out-top}.sheet[data-side=bottom][data-open]{animation-name:sheet-in-bottom}.sheet[data-side=bottom][data-closed]{animation-name:sheet-out-bottom}.sheet__header{--dialog-header-gap:var(--sheet-header-gap);--dialog-header-close-room:var(--sheet-padding-inline)}.sheet__title{color:var(--sheet-title-color);font-size:var(--sheet-title-font-size);font-weight:var(--sheet-title-font-weight);margin:0}.sheet__description{font-size:var(--sheet-description-font-size);color:var(--sheet-description-color);margin:0}.sheet__close.close-button{--close-button-size:var(--sheet-close-size);--close-button-icon-size:var(--sheet-close-icon-size);--close-button-color:var(--sheet-close-color);--close-button-focus-ring-width:var(--sheet-close-focus-ring-width);--close-button-focus-ring-offset:var(--sheet-close-focus-ring-offset);--close-button-focus-ring-color:var(--sheet-close-focus-ring-color);position:absolute;inset-block-start:var(--sheet-close-inset);inset-inline-end:var(--sheet-close-inset)}.sheet__body{flex:1;min-block-size:0}.sheet__footer{--dialog-footer-gap:var(--sheet-footer-gap)}

package/dist/sheet.js

@@ -1,56 +1,4 @@
 'use client';
 import './sheet.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
-import { VisuallyHidden as t } from "./visually-hidden.js";
-import { n } from "./_shared/portal-container.js";
-import { CloseButton as r } from "./close-button.js";
-import { n as i, r as a, t as o } from "./_shared/dialogsurface.js";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Dialog as l } from "@base-ui/react/dialog";
-//#region src/stories/molecules/Sheet/Sheet.tsx
-function u({ className: e, ...t }) {
-	return /* @__PURE__ */ s(o, {
-		className: ["sheet__footer", e].filter(Boolean).join(" "),
-		...t
-	});
-}
-function d({ open: o, onOpenChange: d, side: f = "right", title: p, titleHidden: m = !1, description: h, footer: g, children: _, closeLabel: v, hideClose: y = !1, trigger: b, container: x, onAnimationEndCapture: S, className: C, ...w }) {
-	let T = e("sheet"), E = n(x);
-	return /* @__PURE__ */ c(l.Root, {
-		open: o,
-		onOpenChange: (e) => d(e),
-		children: [b && /* @__PURE__ */ s(l.Trigger, { render: b }), /* @__PURE__ */ c(l.Portal, {
-			container: E,
-			children: [/* @__PURE__ */ s(a, { className: "sheet__overlay" }), /* @__PURE__ */ c(l.Popup, {
-				className: ["sheet", C].filter(Boolean).join(" "),
-				"data-side": f,
-				onAnimationEndCapture: S,
-				...w,
-				children: [
-					/* @__PURE__ */ c(i, {
-						layout: "stacked",
-						className: "sheet__header",
-						children: [m ? /* @__PURE__ */ s(l.Title, { render: /* @__PURE__ */ s(t, { children: p }) }) : /* @__PURE__ */ s(l.Title, {
-							className: "sheet__title",
-							children: p
-						}), h != null && /* @__PURE__ */ s(l.Description, {
-							className: "sheet__description",
-							children: h
-						})]
-					}),
-					!y && /* @__PURE__ */ s(l.Close, {
-						className: "sheet__close",
-						render: /* @__PURE__ */ s(r, { label: T("close", v) })
-					}),
-					/* @__PURE__ */ s("div", {
-						className: "sheet__body",
-						children: _
-					}),
-					g && /* @__PURE__ */ s(u, { children: g })
-				]
-			})]
-		})]
-	});
-}
-//#endregion
-export { d as Sheet, u as SheetFooter };
+import { n as e, t } from "./_shared/sheet.js";
+export { t as Sheet, e as SheetFooter };

package/dist/sidebar-nav.css

@@ -1 +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}
+.sidebar-nav{inline-size: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-inline-size: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);flex:1;padding-block-end:0;text-decoration:none;display:flex}a.sidebar-nav__group-label:hover{color:var(--sidebar-nav-group-label-color);text-decoration-line:none}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);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);transition:color var(--sidebar-nav-transition-duration) var(--sidebar-nav-transition-easing);text-decoration:none;display:flex}.sidebar-nav__top-link:hover{color:var(--sidebar-nav-item-color);text-decoration-line:none}.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]{color:var(--sidebar-nav-item-color);text-decoration-line:none}.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{text-decoration-line: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{text-decoration-line: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

@@ -1,52 +1,59 @@
 'use client';
 import './sidebar-nav.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
+import { r as e } from "./_shared/brandmessagescontext.js";
 import { Icon as t } from "./icon.js";
 import { Tooltip as n } from "./tooltip.js";
-import { Menu as r } from "./menu.js";
-import { n as i } from "./_shared/sidebarcontext.js";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
-import { Accordion as c } from "@base-ui/react/accordion";
+import { t as r } from "./_shared/default-render-link.js";
+import { Menu as i } from "./menu.js";
+import { n as a } from "./_shared/sidebarcontext.js";
+import { useId as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Accordion as u } from "@base-ui/react/accordion";
+//#region src/stories/messages/es/sidebarNav.ts
+var d = {
+	label: "Navegación principal",
+	empty: "sin docs",
+	emptyEntry: (e, t) => `${e} — ${t}`
+};
+//#endregion
 //#region src/stories/molecules/SidebarNav/SidebarNav.tsx
-function l({ children: e, ...t }) {
-	return /* @__PURE__ */ o("a", {
-		...t,
-		children: e
-	});
-}
-function u({ label: u, emptyLabel: d, rail: f, entries: p, defaultValue: m, value: h, onValueChange: g, renderLink: _ = l }) {
-	let v = e("sidebarNav"), y = h === void 0 ? { defaultValue: m } : {
-		value: h,
-		onValueChange: (e) => g?.(e ?? [])
-	}, b = i();
-	return f ?? b.rail ? /* @__PURE__ */ o("nav", {
-		className: "sidebar-nav sidebar-nav--rail",
-		"aria-label": v("label", u),
-		children: /* @__PURE__ */ o("ul", {
+function f({ label: f, emptyLabel: p, emptyEntryLabel: m, rail: h, entries: g, defaultValue: _, value: v, onValueChange: y, renderLink: b = r, className: x }) {
+	let S = e("sidebarNav", d), C = o(), w = (e) => S("emptyEntry", m)(e, S("empty", p)), T = v === void 0 ? { defaultValue: _ } : {
+		value: v,
+		onValueChange: (e) => y?.(e ?? [])
+	}, E = a();
+	return h ?? E.rail ? /* @__PURE__ */ c("nav", {
+		className: [
+			"sidebar-nav",
+			"sidebar-nav--rail",
+			x
+		].filter(Boolean).join(" "),
+		"aria-label": S("label", f),
+		children: /* @__PURE__ */ c("ul", {
 			className: "sidebar-nav__rail",
 			role: "list",
-			children: p.map((e) => {
-				let t = /* @__PURE__ */ o("span", {
+			children: g.map((e) => {
+				let t = /* @__PURE__ */ c("span", {
 					className: "sidebar-nav__rail-icon",
 					"aria-hidden": "true",
-					children: e.icon ?? /* @__PURE__ */ o("span", {
+					children: e.icon ?? /* @__PURE__ */ c("span", {
 						className: "sidebar-nav__rail-initial",
 						children: e.label.charAt(0)
 					})
 				});
-				if (e.kind === "link") return e.empty ? /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o(n, {
-					label: `${e.label} — ${v("empty", d)}`,
+				if (e.kind === "link") return e.empty ? /* @__PURE__ */ c("li", { children: /* @__PURE__ */ c(n, {
+					label: w(e.label),
 					side: "right",
-					children: /* @__PURE__ */ o("span", {
+					children: /* @__PURE__ */ c("span", {
 						className: "sidebar-nav__rail-item sidebar-nav__rail-item--empty",
 						"aria-disabled": "true",
-						"aria-label": `${e.label} — ${v("empty", d)}`,
+						"aria-label": w(e.label),
 						children: t
 					})
-				}) }, e.id) : /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o(n, {
+				}) }, e.id) : /* @__PURE__ */ c("li", { children: /* @__PURE__ */ c(n, {
 					label: e.label,
 					side: "right",
-					children: _({
+					children: b({
 						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,
@@ -54,8 +61,8 @@ function u({ label: u, emptyLabel: d, rail: f, entries: p, defaultValue: m, valu
 						children: t
 					})
 				}) }, e.id);
-				let i = e.items.some((e) => e.active);
-				return /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o(r, {
+				let r = e.items.some((e) => e.active);
+				return /* @__PURE__ */ c("li", { children: /* @__PURE__ */ c(i, {
 					items: [
 						e.href ? {
 							type: "link",
@@ -68,7 +75,7 @@ function u({ label: u, emptyLabel: d, rail: f, entries: p, defaultValue: m, valu
 						...e.href ? [{ type: "separator" }] : [],
 						...e.items.map((e) => e.empty ? {
 							type: "label",
-							label: `${e.label} · ${v("empty", d)}`
+							label: w(e.label)
 						} : {
 							type: "link",
 							label: e.label,
@@ -78,137 +85,142 @@ function u({ label: u, emptyLabel: d, rail: f, entries: p, defaultValue: m, valu
 					side: "right",
 					align: "start",
 					openOnHover: !0,
-					renderLink: (e) => _({
+					renderLink: (e) => b({
 						...e,
 						href: e.href,
 						className: e.className,
 						children: e.children
 					}),
-					trigger: /* @__PURE__ */ o("button", {
+					trigger: /* @__PURE__ */ c("button", {
 						type: "button",
-						className: ["sidebar-nav__rail-item", i ? "sidebar-nav__rail-item--active" : ""].filter(Boolean).join(" "),
+						className: ["sidebar-nav__rail-item", r ? "sidebar-nav__rail-item--active" : ""].filter(Boolean).join(" "),
 						"aria-label": e.label,
 						children: t
 					})
 				}) }, e.id);
 			})
 		})
-	}) : /* @__PURE__ */ o("nav", {
-		className: "sidebar-nav",
-		"aria-label": v("label", u),
-		children: /* @__PURE__ */ o(c.Root, {
+	}) : /* @__PURE__ */ c("nav", {
+		className: ["sidebar-nav", x].filter(Boolean).join(" "),
+		"aria-label": S("label", f),
+		children: /* @__PURE__ */ c(u.Root, {
 			className: "sidebar-nav__accordion",
 			multiple: !0,
-			...y,
-			children: p.map((e) => {
+			...T,
+			children: g.map((e) => {
 				if (e.kind === "link") {
 					let t = ["sidebar-nav__top-link", e.active ? "sidebar-nav__top-link--active" : ""].filter(Boolean).join(" ");
-					return e.empty ? /* @__PURE__ */ o("div", { children: /* @__PURE__ */ s("span", {
+					return e.empty ? /* @__PURE__ */ c("div", { children: /* @__PURE__ */ l("span", {
 						className: `${t} sidebar-nav__top-link--empty`,
 						"aria-disabled": "true",
 						title: e.label,
 						children: [
-							e.icon && /* @__PURE__ */ o("span", {
+							e.icon && /* @__PURE__ */ c("span", {
 								className: "sidebar-nav__item-icon",
 								"aria-hidden": "true",
 								children: e.icon
 							}),
-							/* @__PURE__ */ o("span", {
+							/* @__PURE__ */ c("span", {
 								className: "sidebar-nav__item-label",
 								children: e.label
 							}),
-							/* @__PURE__ */ o("span", {
+							/* @__PURE__ */ c("span", {
 								className: "sidebar-nav__empty-mark",
-								children: v("empty", d)
+								children: S("empty", p)
 							})
 						]
-					}) }, e.id) : /* @__PURE__ */ o("div", { children: _({
+					}) }, e.id) : /* @__PURE__ */ c("div", { children: b({
 						href: e.href,
 						className: t,
 						title: e.label,
 						"aria-current": e.active ? "page" : void 0,
-						children: /* @__PURE__ */ s(a, { children: [e.icon && /* @__PURE__ */ o("span", {
+						children: /* @__PURE__ */ l(s, { children: [e.icon && /* @__PURE__ */ c("span", {
 							className: "sidebar-nav__item-icon",
 							"aria-hidden": "true",
 							children: e.icon
-						}), /* @__PURE__ */ o("span", {
+						}), /* @__PURE__ */ c("span", {
 							className: "sidebar-nav__item-label",
 							children: e.label
 						})] })
 					}) }, e.id);
 				}
-				return /* @__PURE__ */ s(c.Item, {
+				let n = `${C}-${e.id}`;
+				return /* @__PURE__ */ l(u.Item, {
 					value: e.id,
 					className: "sidebar-nav__group",
-					children: [/* @__PURE__ */ s(c.Header, {
+					children: [/* @__PURE__ */ l(u.Header, {
 						className: "sidebar-nav__group-header",
-						children: [e.href ? _({
+						children: [e.href ? b({
 							href: e.href,
 							className: "sidebar-nav__group-label",
 							title: e.label,
-							children: /* @__PURE__ */ s(a, { children: [e.icon && /* @__PURE__ */ o("span", {
+							children: /* @__PURE__ */ l(s, { children: [e.icon && /* @__PURE__ */ c("span", {
 								className: "sidebar-nav__item-icon",
 								"aria-hidden": "true",
 								children: e.icon
-							}), /* @__PURE__ */ o("span", {
+							}), /* @__PURE__ */ c("span", {
 								className: "sidebar-nav__item-label",
+								id: n,
 								children: e.label
 							})] })
-						}) : /* @__PURE__ */ s("span", {
+						}) : /* @__PURE__ */ l("span", {
 							className: "sidebar-nav__group-label",
 							title: e.label,
-							children: [e.icon && /* @__PURE__ */ o("span", {
+							children: [e.icon && /* @__PURE__ */ c("span", {
 								className: "sidebar-nav__item-icon",
 								"aria-hidden": "true",
 								children: e.icon
-							}), /* @__PURE__ */ o("span", {
+							}), /* @__PURE__ */ c("span", {
 								className: "sidebar-nav__item-label",
+								id: n,
 								children: e.label
 							})]
-						}), /* @__PURE__ */ o(c.Trigger, {
+						}), /* @__PURE__ */ c(u.Trigger, {
 							className: "sidebar-nav__group-chevron",
-							children: /* @__PURE__ */ o(t, {
+							"aria-labelledby": n,
+							children: /* @__PURE__ */ c(t, {
 								name: "chevron",
 								className: "sidebar-nav__group-chevron-icon",
 								size: "sm"
 							})
 						})]
-					}), /* @__PURE__ */ o(c.Panel, {
+					}), /* @__PURE__ */ c(u.Panel, {
 						className: "sidebar-nav__group-content",
-						children: /* @__PURE__ */ o("div", {
+						"aria-labelledby": n,
+						children: /* @__PURE__ */ c("div", {
 							className: "sidebar-nav__group-content-inner",
-							children: /* @__PURE__ */ o("ul", {
+							children: /* @__PURE__ */ c("ul", {
 								className: "sidebar-nav__items",
 								role: "list",
 								children: e.items.map((e) => {
 									let t = ["sidebar-nav__item", e.active ? "sidebar-nav__item--active" : ""].filter(Boolean).join(" ");
-									return e.empty ? /* @__PURE__ */ o("li", { children: /* @__PURE__ */ s("span", {
+									return e.empty ? /* @__PURE__ */ c("li", { children: /* @__PURE__ */ l("span", {
 										className: `${t} sidebar-nav__item--empty`,
 										"aria-disabled": "true",
 										children: [
-											e.icon && /* @__PURE__ */ o("span", {
+											e.icon && /* @__PURE__ */ c("span", {
 												className: "sidebar-nav__item-icon",
 												"aria-hidden": "true",
 												children: e.icon
 											}),
-											/* @__PURE__ */ o("span", {
+											/* @__PURE__ */ c("span", {
 												className: "sidebar-nav__item-label",
 												children: e.label
 											}),
-											/* @__PURE__ */ o("span", {
+											/* @__PURE__ */ c("span", {
 												className: "sidebar-nav__empty-mark",
-												children: v("empty", d)
+												children: S("empty", p)
 											})
 										]
-									}) }, e.id) : /* @__PURE__ */ o("li", { children: _({
+									}) }, e.id) : /* @__PURE__ */ c("li", { children: b({
 										href: e.href,
 										className: t,
 										"aria-current": e.active ? "page" : void 0,
-										children: /* @__PURE__ */ s(a, { children: [e.icon && /* @__PURE__ */ o("span", {
+										children: /* @__PURE__ */ l(s, { children: [e.icon && /* @__PURE__ */ c("span", {
 											className: "sidebar-nav__item-icon",
 											"aria-hidden": "true",
 											children: e.icon
-										}), /* @__PURE__ */ o("span", {
+										}), /* @__PURE__ */ c("span", {
 											className: "sidebar-nav__item-label",
 											children: e.label
 										})] })
@@ -223,4 +235,4 @@ function u({ label: u, emptyLabel: d, rail: f, entries: p, defaultValue: m, valu
 	});
 }
 //#endregion
-export { u as SidebarNav };
+export { f as SidebarNav };

package/dist/sidebar.css

@@ -1 +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:var(--app-shell-chrome-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}
+.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{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{inline-size:var(--app-launcher-trigger-size);block-size: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:var(--app-shell-chrome-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}