@studiolxd/brand 49.28.0 → 50.0.0

package/dist/_types/templates/ConnectorAuth/ConnectorRejectionPage.d.ts

@@ -110,4 +110,4 @@ export interface ConnectorRejectionPageProps extends ConnectorAuthChromeProps {
  * hecho su trabajo —y en `access-denied`, ni siquiera eso: es lo que se ha
  * pedido—. La página lo cuenta como cuenta cualquier otra cosa.
  */
-export declare function ConnectorRejectionPage({ title, description, hint, code, codeLabel, retryHref, onRetry, retryLabel, retryAction, aside, header, footer, preferences, preferencesLabel, id, shell, }: ConnectorRejectionPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConnectorRejectionPage({ title, description, hint, code, codeLabel, retryHref, onRetry, retryLabel, retryAction, aside, header, footer, preferences, preferencesLabel, id, shell, className, }: ConnectorRejectionPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/templates/ConnectorAuth/ConnectorSignInPage.d.ts

@@ -100,4 +100,4 @@ export interface ConnectorSignInPageProps extends ConnectorAuthChromeProps {
  * refresco de sesión del hub— y la que hace falta en cuanto la vuelta falla o
  * el usuario se planta en medio del camino.
  */
-export declare function ConnectorSignInPage({ clientName, productName, scope, redirectHost, signInHref, onSignIn, action, hiddenFields, title, intro, fallbackProductName, signInLabel, scopeReadLabel, scopeWriteLabel, expandLabel, collapseLabel, valueQuotes, summaryLabels, links, header, footer, preferences, preferencesLabel, id, shell, }: ConnectorSignInPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConnectorSignInPage({ clientName, productName, scope, redirectHost, signInHref, onSignIn, action, hiddenFields, title, intro, fallbackProductName, signInLabel, scopeReadLabel, scopeWriteLabel, expandLabel, collapseLabel, valueQuotes, summaryLabels, links, header, footer, preferences, preferencesLabel, id, shell, className, }: ConnectorSignInPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/templates/ErrorPage/ErrorPage.d.ts

@@ -22,6 +22,12 @@ export interface ErrorPageProps {
      * Por defecto `true`. Sin marco, `header`, `footer` e `id` no aplican.
      */
     shell?: boolean;
+    /**
+     * Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye).
+     * Va al contenido propio de la plantilla —las dos columnas—, con marco y
+     * sin él, como en `OnboardingShell` y `ConnectorAuthShell`.
+     */
+    className?: string;
 }
 /**
  * Plantilla de «algo ha salido mal»: dos columnas, mismo molde que `AuthPage`
@@ -32,4 +38,4 @@ export interface ErrorPageProps {
  * del layout que pudo fallar. Con `shell={false}` devuelve solo el contenido,
  * para una app que ya tiene su `main`.
  */
-export declare function ErrorPage({ title, description, homeAction, retryDescription, retryAction, header, footer, id, shell }: ErrorPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ErrorPage({ title, description, homeAction, retryDescription, retryAction, header, footer, id, shell, className }: ErrorPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/templates/NotFoundPage/NotFoundPage.d.ts

@@ -19,6 +19,12 @@ export interface NotFoundPageProps {
      * no aplican.
      */
     shell?: boolean;
+    /**
+     * Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye).
+     * Va al contenido propio de la plantilla (título, frase y enlace), con marco
+     * y sin él, como en `OnboardingShell` y `ConnectorAuthShell`.
+     */
+    className?: string;
 }
 /**
  * Plantilla de 404: el marco público (`PublicPageShell`) con cabecera y pie
@@ -27,4 +33,4 @@ export interface NotFoundPageProps {
  * roto no se lleva por delante el mensaje. Con `shell={false}` devuelve solo
  * el contenido, para una app que ya tiene su `main`.
  */
-export declare function NotFoundPage({ title, description, homeLink, header, footer, id, shell }: NotFoundPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function NotFoundPage({ title, description, homeLink, header, footer, id, shell, className }: NotFoundPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/templates/PublicPageShell/PublicPageShell.d.ts

@@ -66,6 +66,12 @@ export interface PublicPageShellProps {
      * aplican —y tampoco el `ref`, porque no hay marco al que engancharlo.
      */
     shell?: boolean;
+    /**
+     * Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye).
+     * Va al nodo raíz del marco (`.site-shell`). Con `shell={false}` no aplica:
+     * no hay nodo propio, solo los `children`.
+     */
+    className?: string;
 }
 /**
  * El marco de una página pública, en una sola pieza: `SiteShell` con cabecera

package/dist/accordion.css

@@ -1 +1 @@
-.accordion{width:100%}.accordion__item{border-block-start:var(--accordion-border-width) solid var(--accordion-border-color)}.accordion__header{font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin-block:0}.accordion__trigger{all:unset;box-sizing:border-box;justify-content:space-between;align-items:center;gap:var(--accordion-trigger-gap);width:100%;padding-block:var(--accordion-trigger-padding-block);padding-inline:var(--accordion-trigger-padding-inline);cursor:var(--accordion-trigger-cursor);text-align:start;display:flex}.accordion__trigger:focus-visible{outline:var(--accordion-focus-ring-width) solid var(--accordion-focus-ring-color);outline-offset:var(--accordion-focus-ring-offset)}.accordion__trigger[data-disabled]{cursor:default}.accordion__trigger-text{flex:1;min-width:0}.accordion__index{min-inline-size:var(--accordion-index-min-inline-size);font-family:var(--accordion-index-font-family);font-size:var(--accordion-index-font-size);color:var(--accordion-index-color);flex-shrink:0}.accordion--numbered .accordion__content-inner{padding-inline-start:calc(var(--accordion-index-min-inline-size) + var(--accordion-trigger-gap))}.accordion__chevron{transition:transform var(--accordion-transition-duration) var(--accordion-transition-easing);flex-shrink:0;transform:rotate(90deg)}.accordion__trigger[data-panel-open] .accordion__chevron{transform:rotate(-90deg)}.accordion__content{overflow:hidden}.accordion__content[data-open]{animation:accordion-open var(--accordion-transition-duration) var(--accordion-transition-easing)}.accordion__content[data-closed]{animation:accordion-close var(--accordion-transition-duration) var(--accordion-transition-easing)}@keyframes accordion-open{0%{height:0}to{height:var(--collapsible-panel-height)}}@keyframes accordion-close{0%{height:var(--collapsible-panel-height)}to{height:0}}.accordion__content-inner{padding-block-end:var(--accordion-content-padding-block);padding-inline:var(--accordion-content-padding-inline)}
+.accordion{inline-size:100%}.accordion__item{border-block-start:var(--accordion-border-width) solid var(--accordion-border-color)}.accordion__header{font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin-block:0}.accordion__trigger{all:unset;box-sizing:border-box;justify-content:space-between;align-items:center;gap:var(--accordion-trigger-gap);inline-size:100%;padding-block:var(--accordion-trigger-padding-block);padding-inline:var(--accordion-trigger-padding-inline);cursor:var(--accordion-trigger-cursor);text-align:start;display:flex}.accordion__trigger:focus-visible{outline:var(--accordion-focus-ring-width) solid var(--accordion-focus-ring-color);outline-offset:var(--accordion-focus-ring-offset)}.accordion__trigger[data-disabled]{cursor:default}.accordion__trigger-text{flex:1;min-inline-size:0}.accordion__index{min-inline-size:var(--accordion-index-min-inline-size);font-family:var(--accordion-index-font-family);font-size:var(--accordion-index-font-size);color:var(--accordion-index-color);flex-shrink:0}.accordion--numbered .accordion__content-inner{padding-inline-start:calc(var(--accordion-index-min-inline-size) + var(--accordion-trigger-gap))}.accordion__chevron{transition:transform var(--accordion-transition-duration) var(--accordion-transition-easing);flex-shrink:0;transform:rotate(90deg)}.accordion__trigger[data-panel-open] .accordion__chevron{transform:rotate(-90deg)}.accordion__content{overflow:hidden}.accordion__content[data-open]{animation:accordion-open var(--accordion-transition-duration) var(--accordion-transition-easing)}.accordion__content[data-closed]{animation:accordion-close var(--accordion-transition-duration) var(--accordion-transition-easing)}@keyframes accordion-open{0%{height:0}to{height:var(--collapsible-panel-height)}}@keyframes accordion-close{0%{height:var(--collapsible-panel-height)}to{height:0}}.accordion__content-inner{padding-block-end:var(--accordion-content-padding-block);padding-inline:var(--accordion-content-padding-inline)}

package/dist/accordion.js

@@ -52,20 +52,21 @@ function f({ className: e, children: t, ...n }) {
 		children: t
 	});
 }
-function p({ className: t, chevronSize: n = "sm", children: r }) {
-	let s = c();
+function p({ className: t, chevronSize: n = "sm", headingLevel: r = 3, children: s }) {
+	let l = c(), u = `h${r}`;
 	return /* @__PURE__ */ i(o.Header, {
 		className: "accordion__header",
+		render: /* @__PURE__ */ i(u, {}),
 		children: /* @__PURE__ */ a(o.Trigger, {
 			className: ["accordion__trigger", t].filter(Boolean).join(" "),
 			children: [
-				s && /* @__PURE__ */ i("span", {
+				l && /* @__PURE__ */ i("span", {
 					className: "accordion__index",
-					children: s.formatIndex(s.index)
+					children: l.formatIndex(l.index)
 				}),
 				/* @__PURE__ */ i("span", {
 					className: "accordion__trigger-text",
-					children: r
+					children: s
 				}),
 				/* @__PURE__ */ i(e, {
 					name: "chevron",

package/dist/alert.css

@@ -1 +1 @@
-:root{--alert-padding-block:var(--spacing-4);--alert-padding-inline:var(--spacing-5);--alert-gap:var(--spacing-3);--alert-content-gap:var(--spacing-2);--alert-actions-margin-block-start:var(--spacing-3);--alert-title-line-height:var(--line-height-snug);--alert-close-size:var(--size-component-sm);--alert-close-inset:var(--spacing-2);--alert-border-radius:var(--border-radius-default);--alert-border-width:var(--border-width-default);--alert-actions-gap:var(--form-actions-gap);--alert-bg:var(--color-primary);--alert-border-color:var(--color-text-on-dark);--alert-title-font-size:var(--text-font-size);--alert-title-font-weight:var(--font-weight-emphasis);--alert-title-color:var(--color-text-on-dark);--alert-description-font-size:var(--text-font-size);--alert-description-line-height:var(--text-line-height);--alert-description-color:var(--color-text-on-dark);--alert-success-bg:var(--color-success-fill);--alert-success-border-color:var(--color-success-fill);--alert-success-title-color:var(--color-success-fill-text);--alert-success-description-color:var(--color-success-fill-text);--alert-error-bg:var(--color-error-fill);--alert-error-border-color:var(--color-error-fill);--alert-error-title-color:var(--color-error-fill-text);--alert-error-description-color:var(--color-error-fill-text);--alert-warning-bg:var(--color-warning-fill);--alert-warning-border-color:var(--color-warning-fill);--alert-warning-title-color:var(--color-warning-fill-text);--alert-warning-description-color:var(--color-warning-fill-text);--alert-warning-close-color:var(--color-warning-fill-text)}.surface-dark,.surface-invert,[data-theme=dark],html.dark{--alert-bg:var(--color-text-on-dark);--alert-border-color:var(--color-text-on-dark);--alert-title-color:var(--color-primary);--alert-description-color:var(--color-primary)}.alert{background-color:var(--alert-bg);border:var(--alert-border-width) solid var(--alert-border-color);border-radius:var(--alert-border-radius);padding-block:var(--alert-padding-block);padding-inline:var(--alert-padding-inline);align-items:flex-start;gap:var(--alert-gap);box-sizing:border-box;--alert-title-ink:var(--alert-title-color);--alert-description-ink:var(--alert-description-color);display:flex;position:relative}.alert.alert--dismissible{padding-inline-end:calc(var(--alert-close-inset) * 2 + var(--alert-close-size))}.alert__content{flex:1;min-width:0}.alert__title{font-size:var(--alert-title-font-size);font-weight:var(--alert-title-font-weight);color:var(--alert-title-ink);line-height:var(--alert-title-line-height);margin:0}.alert__description{font-size:var(--alert-description-font-size);color:var(--alert-description-ink);line-height:var(--alert-description-line-height);margin:0;align-items:start;gap:var(--alert-content-gap);flex-direction:column;margin-block-start:var(--alert-content-gap);display:flex}.alert__actions{align-items:stretch;gap:var(--alert-actions-gap);flex-direction:column;margin-block-start:var(--alert-actions-margin-block-start);display:flex}.alert__actions>*{inline-size:100%}@media (width>=768px){.alert__actions{flex-flow:wrap;align-items:center}.alert__actions>*{inline-size:auto}}.alert .link,.alert a:not(.button){color:var(--alert-description-ink);box-shadow:inset 0 calc(-1 * var(--link-ink-underline-width)) 0 0 currentColor}.alert .link:hover,.alert a:not(.button):hover{color:var(--alert-description-ink);box-shadow:inset 0 calc(-1 * var(--link-ink-hover-underline-width)) 0 0 currentColor}.alert .link:focus-visible,.alert a:not(.button):focus-visible{outline-color:var(--alert-description-ink)}.alert .alert__close{--close-button-size:var(--alert-close-size);position:absolute;inset-block-start:var(--alert-close-inset);inset-inline-end:var(--alert-close-inset)}.alert.alert--success{--alert-bg:var(--alert-success-bg);--alert-border-color:var(--alert-success-border-color);--alert-title-color:var(--alert-success-title-color);--alert-description-color:var(--alert-success-description-color)}.alert.alert--error{--alert-bg:var(--alert-error-bg);--alert-border-color:var(--alert-error-border-color);--alert-title-color:var(--alert-error-title-color);--alert-description-color:var(--alert-error-description-color)}.alert.alert--warning{--alert-bg:var(--alert-warning-bg);--alert-border-color:var(--alert-warning-border-color);--alert-title-color:var(--alert-warning-title-color);--alert-description-color:var(--alert-warning-description-color);--close-button-color:var(--alert-warning-close-color);--close-button-focus-ring-color:var(--alert-warning-close-color)}
+:root{--alert-padding-block:var(--spacing-4);--alert-padding-inline:var(--spacing-5);--alert-gap:var(--spacing-3);--alert-content-gap:var(--spacing-2);--alert-actions-margin-block-start:var(--spacing-3);--alert-title-line-height:var(--line-height-snug);--alert-close-size:var(--size-component-sm);--alert-close-inset:var(--spacing-2);--alert-border-radius:var(--border-radius-default);--alert-border-width:var(--border-width-default);--alert-actions-gap:var(--form-actions-gap);--alert-bg:var(--color-primary);--alert-border-color:var(--color-text-on-dark);--alert-title-font-size:var(--text-font-size);--alert-title-font-weight:var(--font-weight-emphasis);--alert-title-color:var(--color-text-on-dark);--alert-description-font-size:var(--text-font-size);--alert-description-line-height:var(--text-line-height);--alert-description-color:var(--color-text-on-dark);--alert-success-bg:var(--color-success-fill);--alert-success-border-color:var(--color-success-fill);--alert-success-title-color:var(--color-success-fill-text);--alert-success-description-color:var(--color-success-fill-text);--alert-error-bg:var(--color-error-fill);--alert-error-border-color:var(--color-error-fill);--alert-error-title-color:var(--color-error-fill-text);--alert-error-description-color:var(--color-error-fill-text);--alert-warning-bg:var(--color-warning-fill);--alert-warning-border-color:var(--color-warning-fill);--alert-warning-title-color:var(--color-warning-fill-text);--alert-warning-description-color:var(--color-warning-fill-text);--alert-warning-close-color:var(--color-warning-fill-text)}.surface-dark,.surface-invert,[data-theme=dark],html.dark{--alert-bg:var(--color-text-on-dark);--alert-border-color:var(--color-text-on-dark);--alert-title-color:var(--color-primary);--alert-description-color:var(--color-primary)}.alert{background-color:var(--alert-bg);border:var(--alert-border-width) solid var(--alert-border-color);border-radius:var(--alert-border-radius);padding-block:var(--alert-padding-block);padding-inline:var(--alert-padding-inline);align-items:flex-start;gap:var(--alert-gap);box-sizing:border-box;--alert-title-ink:var(--alert-title-color);--alert-description-ink:var(--alert-description-color);display:flex;position:relative}.alert.alert--dismissible{padding-inline-end:calc(var(--alert-close-inset) * 2 + var(--alert-close-size))}.alert__content{flex:1;min-inline-size:0}.alert__title{font-size:var(--alert-title-font-size);font-weight:var(--alert-title-font-weight);color:var(--alert-title-ink);line-height:var(--alert-title-line-height);margin:0}.alert__description{font-size:var(--alert-description-font-size);color:var(--alert-description-ink);line-height:var(--alert-description-line-height);margin:0;align-items:start;gap:var(--alert-content-gap);flex-direction:column;margin-block-start:var(--alert-content-gap);display:flex}.alert__actions{align-items:stretch;gap:var(--alert-actions-gap);flex-direction:column;margin-block-start:var(--alert-actions-margin-block-start);display:flex}.alert__actions>*{inline-size:100%}@media (width>=768px){.alert__actions{flex-flow:wrap;align-items:center}.alert__actions>*{inline-size:auto}}.alert .link,.alert a:not(.button){color:var(--alert-description-ink);box-shadow:inset 0 calc(-1 * var(--link-ink-underline-width)) 0 0 currentColor}.alert .link:hover,.alert a:not(.button):hover{color:var(--alert-description-ink);box-shadow:inset 0 calc(-1 * var(--link-ink-hover-underline-width)) 0 0 currentColor}.alert .link:focus-visible,.alert a:not(.button):focus-visible{outline-color:var(--alert-description-ink)}.alert .alert__close{--close-button-size:var(--alert-close-size);position:absolute;inset-block-start:var(--alert-close-inset);inset-inline-end:var(--alert-close-inset)}.alert.alert--success{--alert-bg:var(--alert-success-bg);--alert-border-color:var(--alert-success-border-color);--alert-title-color:var(--alert-success-title-color);--alert-description-color:var(--alert-success-description-color)}.alert.alert--error{--alert-bg:var(--alert-error-bg);--alert-border-color:var(--alert-error-border-color);--alert-title-color:var(--alert-error-title-color);--alert-description-color:var(--alert-error-description-color)}.alert.alert--warning{--alert-bg:var(--alert-warning-bg);--alert-border-color:var(--alert-warning-border-color);--alert-title-color:var(--alert-warning-title-color);--alert-description-color:var(--alert-warning-description-color);--close-button-color:var(--alert-warning-close-color);--close-button-focus-ring-color:var(--alert-warning-close-color)}

package/dist/app-header.js

@@ -2,44 +2,39 @@
 import './app-header.css';
 import { n as e } from "./_shared/brandmessagescontext.js";
 import { MenuButton as t } from "./menu-button.js";
-import { t as n } from "./_shared/appshellcontext.js";
-import { useContext as r, useState as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { t as n } from "./_shared/default-render-link.js";
+import { t as r } from "./_shared/appshellcontext.js";
+import { useContext as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/stories/sections/AppHeader/AppHeader.tsx
-function s({ children: e, ...t }) {
-	return /* @__PURE__ */ a("a", {
-		...t,
-		children: e
-	});
-}
-function c({ logo: c, logoHref: l = "/", logoLabel: u, renderLogoLink: d = s, start: f, notifications: p, end: m, menuLabel: h, menuCloseLabel: g, sidebarId: _ }) {
-	let v = r(n), [y, b] = i(!1), x = v ? v.sidebar === "open" : y, S = v ? v.toggleSidebar : () => b((e) => !e), C = e("appHeader");
-	return /* @__PURE__ */ o("header", {
-		className: "app-header",
+function c({ logo: c, logoHref: l = "/", logoLabel: u, renderLogoLink: d = n, start: f, notifications: p, end: m, menuLabel: h, menuCloseLabel: g, sidebarId: _, className: v }) {
+	let y = i(r), [b, x] = a(!1), S = y ? y.sidebar === "open" : b, C = y ? y.toggleSidebar : () => x((e) => !e), w = e("appHeader");
+	return /* @__PURE__ */ s("header", {
+		className: ["app-header", v].filter(Boolean).join(" "),
 		children: [
-			/* @__PURE__ */ a(t, {
-				isOpen: x,
-				onClick: S,
+			/* @__PURE__ */ o(t, {
+				isOpen: S,
+				onClick: C,
 				label: h,
 				closeLabel: g,
 				"aria-controls": _,
-				"aria-expanded": x
+				"aria-expanded": S
 			}),
 			c && d({
 				href: l,
 				className: "app-header__logo",
-				"aria-label": C("logo", u),
+				"aria-label": w("logo", u),
 				children: c
 			}),
-			/* @__PURE__ */ a("div", {
+			/* @__PURE__ */ o("div", {
 				className: "app-header__start",
 				children: f
 			}),
-			p && /* @__PURE__ */ a("div", {
+			p && /* @__PURE__ */ o("div", {
 				className: "app-header__notifications",
 				children: p
 			}),
-			m && /* @__PURE__ */ a("div", {
+			m && /* @__PURE__ */ o("div", {
 				className: "app-header__end",
 				children: m
 			})

package/dist/app-launcher.css

@@ -1 +1 @@
-.app-launcher__trigger{all:unset;box-sizing:border-box;width:var(--app-launcher-trigger-size);height:var(--app-launcher-trigger-size);border-radius:var(--app-launcher-trigger-border-radius);color:var(--app-launcher-trigger-color);cursor:pointer;transition:box-shadow var(--app-launcher-transition-duration) var(--app-launcher-transition-easing);justify-content:center;align-items:center;display:flex}.app-launcher__trigger:hover{background-color:var(--app-launcher-trigger-hover-bg);color:var(--app-launcher-trigger-hover-color)}.app-launcher__trigger:focus-visible{outline:var(--app-launcher-focus-ring-width) solid var(--app-launcher-focus-ring-color);outline-offset:var(--app-launcher-focus-ring-offset)}.app-launcher__trigger--label{gap:var(--app-launcher-trigger-label-gap);width:auto;height:auto;padding-block:var(--app-launcher-trigger-label-padding-block);padding-inline:var(--app-launcher-trigger-label-padding-inline);border-radius:var(--app-launcher-trigger-label-border-radius);color:var(--app-launcher-trigger-label-color)}.app-launcher__trigger-label{font-size:var(--app-launcher-trigger-label-font-size);font-weight:var(--app-launcher-trigger-label-font-weight);line-height:var(--app-launcher-trigger-label-line-height)}.app-launcher__trigger--label:hover{color:var(--app-launcher-trigger-label-color);background-color:#0000}.app-launcher__content{box-sizing:border-box;background-color:var(--app-launcher-content-bg);border-width:var(--app-launcher-content-border-width);border-style:solid;border-color:var(--app-launcher-content-border-color);border-radius:var(--app-launcher-content-border-radius);box-shadow:var(--app-launcher-content-shadow);padding-block:var(--app-launcher-content-padding-block);padding-inline:var(--app-launcher-content-padding-inline);min-width:var(--app-launcher-content-min-width);transform-origin:var(--transform-origin);animation-duration:var(--app-launcher-transition-duration);animation-timing-function:var(--app-launcher-transition-easing);max-height:var(--app-launcher-content-max-height,var(--available-height));overscroll-behavior:contain;outline:none;overflow-y:auto}.app-launcher__content[data-open]{animation-name:app-launcher-in}.app-launcher__content[data-closed]{animation-name:app-launcher-out}@keyframes app-launcher-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes app-launcher-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.app-launcher__grid{grid-template-columns:repeat(var(--app-launcher-content-columns-narrow), 1fr);gap:var(--app-launcher-content-gap);margin:0;padding:0;list-style:none;display:grid}@media (width>=480px){.app-launcher__grid{grid-template-columns:repeat(var(--app-launcher-content-columns), 1fr)}}.app-launcher__grid>li{min-inline-size:0}.app-launcher__tile{box-sizing:border-box;align-items:flex-start;gap:var(--app-launcher-tile-gap);padding-block:var(--app-launcher-tile-padding-block);padding-inline:var(--app-launcher-tile-padding-inline);border-radius:var(--app-launcher-tile-border-radius);box-shadow:none;text-align:start;cursor:pointer;transition:background-color var(--app-launcher-transition-duration) var(--app-launcher-transition-easing), box-shadow var(--app-launcher-transition-duration) var(--app-launcher-transition-easing);outline:none;flex-direction:column;text-decoration:none;display:flex}.app-launcher__tile:not(.app-launcher__tile--disabled):hover,.app-launcher__tile:focus-visible{background-color:var(--app-launcher-tile-highlighted-bg);color:var(--app-launcher-tile-highlighted-color)}.app-launcher__tile:not(.app-launcher__tile--disabled):hover .app-launcher__tile-name,.app-launcher__tile:focus-visible .app-launcher__tile-name{color:inherit}.app-launcher__tile:focus-visible{outline:var(--app-launcher-focus-ring-width) solid var(--app-launcher-focus-ring-color);outline-offset:var(--app-launcher-focus-ring-offset)}.app-launcher__tile--active .app-launcher__tile-name{font-weight:var(--app-launcher-tile-name-active-font-weight)}.app-launcher__tile.app-launcher__tile--disabled{cursor:default}.app-launcher__tile--disabled .app-launcher__tile-name{color:var(--app-launcher-tile-disabled-color)}.app-launcher__tile-badge-row{min-block-size:var(--app-launcher-tile-badge-block-size);align-items:center;display:flex}.app-launcher__tile-name{font-size:var(--app-launcher-tile-name-font-size);font-weight:var(--app-launcher-tile-name-font-weight);line-height:var(--app-launcher-tile-name-line-height);color:var(--app-launcher-tile-name-color)}.app-launcher__tile-badge{pointer-events:none}.app-launcher__tile:not(.app-launcher__tile--disabled):hover .app-launcher__tile-badge,.app-launcher__tile:focus-visible .app-launcher__tile-badge{--tag-info-bg:var(--app-launcher-tile-badge-hover-bg);--tag-info-color:var(--app-launcher-tile-badge-hover-color)}.app-launcher__positioner{z-index:var(--app-launcher-content-z-index)}
+.app-launcher__trigger{all:unset;box-sizing:border-box;inline-size:var(--app-launcher-trigger-size);block-size:var(--app-launcher-trigger-size);border-radius:var(--app-launcher-trigger-border-radius);color:var(--app-launcher-trigger-color);cursor:pointer;transition:box-shadow var(--app-launcher-transition-duration) var(--app-launcher-transition-easing);justify-content:center;align-items:center;display:flex}.app-launcher__trigger:hover{background-color:var(--app-launcher-trigger-hover-bg);color:var(--app-launcher-trigger-hover-color)}.app-launcher__trigger:focus-visible{outline:var(--app-launcher-focus-ring-width) solid var(--app-launcher-focus-ring-color);outline-offset:var(--app-launcher-focus-ring-offset)}.app-launcher__trigger--label{gap:var(--app-launcher-trigger-label-gap);block-size:auto;inline-size:auto;padding-block:var(--app-launcher-trigger-label-padding-block);padding-inline:var(--app-launcher-trigger-label-padding-inline);border-radius:var(--app-launcher-trigger-label-border-radius);color:var(--app-launcher-trigger-label-color)}.app-launcher__trigger-label{font-size:var(--app-launcher-trigger-label-font-size);font-weight:var(--app-launcher-trigger-label-font-weight);line-height:var(--app-launcher-trigger-label-line-height)}.app-launcher__trigger--label:hover{color:var(--app-launcher-trigger-label-color);background-color:#0000}.app-launcher__content{box-sizing:border-box;background-color:var(--app-launcher-content-bg);border-width:var(--app-launcher-content-border-width);border-style:solid;border-color:var(--app-launcher-content-border-color);border-radius:var(--app-launcher-content-border-radius);box-shadow:var(--app-launcher-content-shadow);padding-block:var(--app-launcher-content-padding-block);padding-inline:var(--app-launcher-content-padding-inline);min-inline-size:var(--app-launcher-content-min-width);transform-origin:var(--transform-origin);animation-duration:var(--app-launcher-transition-duration);animation-timing-function:var(--app-launcher-transition-easing);max-block-size:var(--app-launcher-content-max-height,var(--available-height));overscroll-behavior:contain;outline:none;overflow-y:auto}.app-launcher__content[data-open]{animation-name:app-launcher-in}.app-launcher__content[data-closed]{animation-name:app-launcher-out}@keyframes app-launcher-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes app-launcher-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.app-launcher__grid{grid-template-columns:repeat(var(--app-launcher-content-columns-narrow), 1fr);gap:var(--app-launcher-content-gap);margin:0;padding:0;list-style:none;display:grid}@media (width>=480px){.app-launcher__grid{grid-template-columns:repeat(var(--app-launcher-content-columns), 1fr)}}.app-launcher__grid>li{min-inline-size:0}.app-launcher__tile{box-sizing:border-box;align-items:flex-start;gap:var(--app-launcher-tile-gap);padding-block:var(--app-launcher-tile-padding-block);padding-inline:var(--app-launcher-tile-padding-inline);border-radius:var(--app-launcher-tile-border-radius);box-shadow:none;text-align:start;cursor:pointer;transition:background-color var(--app-launcher-transition-duration) var(--app-launcher-transition-easing), box-shadow var(--app-launcher-transition-duration) var(--app-launcher-transition-easing);outline:none;flex-direction:column;text-decoration:none;display:flex}.app-launcher__tile:not(.app-launcher__tile--disabled):hover,.app-launcher__tile:focus-visible{background-color:var(--app-launcher-tile-highlighted-bg);color:var(--app-launcher-tile-highlighted-color)}.app-launcher__tile:not(.app-launcher__tile--disabled):hover .app-launcher__tile-name,.app-launcher__tile:focus-visible .app-launcher__tile-name{color:inherit}.app-launcher__tile:focus-visible{outline:var(--app-launcher-focus-ring-width) solid var(--app-launcher-focus-ring-color);outline-offset:var(--app-launcher-focus-ring-offset)}.app-launcher__tile--active .app-launcher__tile-name{font-weight:var(--app-launcher-tile-name-active-font-weight)}.app-launcher__tile.app-launcher__tile--disabled{cursor:default}.app-launcher__tile--disabled .app-launcher__tile-name{color:var(--app-launcher-tile-disabled-color)}.app-launcher__tile-badge-row{min-block-size:var(--app-launcher-tile-badge-block-size);align-items:center;display:flex}.app-launcher__tile-name{font-size:var(--app-launcher-tile-name-font-size);font-weight:var(--app-launcher-tile-name-font-weight);line-height:var(--app-launcher-tile-name-line-height);color:var(--app-launcher-tile-name-color)}.app-launcher__tile-badge{pointer-events:none}.app-launcher__tile:not(.app-launcher__tile--disabled):hover .app-launcher__tile-badge,.app-launcher__tile:focus-visible .app-launcher__tile-badge{--tag-info-bg:var(--app-launcher-tile-badge-hover-bg);--tag-info-color:var(--app-launcher-tile-badge-hover-color)}.app-launcher__positioner{z-index:var(--app-launcher-content-z-index)}

package/dist/app-launcher.js

@@ -44,15 +44,22 @@ function d({ apps: e, currentAppId: t, newLabel: n }) {
 		}) }, e.id))
 	});
 }
-function f({ apps: r, labels: i, currentAppId: a, open: o, defaultOpen: u, onOpenChange: f }) {
-	let p = e("appLauncher"), m = n(void 0);
+function f(e, t) {
+	return [
+		"app-launcher__trigger",
+		e ? "app-launcher__trigger--label" : "",
+		t
+	].filter(Boolean).join(" ");
+}
+function p({ apps: r, labels: i, currentAppId: a, open: o, defaultOpen: u, onOpenChange: p, className: m }) {
+	let h = e("appLauncher"), g = n(void 0);
 	return /* @__PURE__ */ c(l.Root, {
 		open: o,
 		defaultOpen: u,
-		onOpenChange: (e) => f?.(e),
+		onOpenChange: (e) => p?.(e),
 		children: [/* @__PURE__ */ s(l.Trigger, { render: i.trigger ? /* @__PURE__ */ c("button", {
 			type: "button",
-			className: "app-launcher__trigger app-launcher__trigger--label",
+			className: f(!0, m),
 			children: [/* @__PURE__ */ s(t, {
 				name: "grid",
 				size: "md"
@@ -62,20 +69,21 @@ function f({ apps: r, labels: i, currentAppId: a, open: o, defaultOpen: u, onOpe
 			})]
 		}) : /* @__PURE__ */ s("button", {
 			type: "button",
-			className: "app-launcher__trigger",
-			"aria-label": p("open", i.open),
+			className: f(!1, m),
+			"aria-label": h("open", i.open),
 			children: /* @__PURE__ */ s(t, {
 				name: "grid",
 				size: "md"
 			})
 		}) }), /* @__PURE__ */ s(l.Portal, {
-			container: m,
+			container: g,
 			children: /* @__PURE__ */ s(l.Positioner, {
 				className: "app-launcher__positioner",
 				sideOffset: 4,
 				align: "end",
 				children: /* @__PURE__ */ s(l.Popup, {
 					className: "app-launcher__content",
+					"aria-label": h("title", i.title),
 					children: /* @__PURE__ */ s(d, {
 						apps: r,
 						currentAppId: a,
@@ -86,19 +94,19 @@ function f({ apps: r, labels: i, currentAppId: a, open: o, defaultOpen: u, onOpe
 		})]
 	});
 }
-function p(e, t, n) {
+function m(e, t, n) {
 	let [r, i] = a(t ?? !1);
 	return [e ?? r, (t) => {
 		e === void 0 && i(t), n?.(t);
 	}];
 }
-function m({ apps: n, labels: r, currentAppId: a, open: l, defaultOpen: u, onOpenChange: f }) {
-	let m = e("appLauncher"), [h, g] = p(l, u, f);
+function h({ apps: n, labels: r, currentAppId: a, open: l, defaultOpen: u, onOpenChange: p, className: h }) {
+	let g = e("appLauncher"), [_, v] = m(l, u, p);
 	return /* @__PURE__ */ c(o, { children: [r.trigger ? /* @__PURE__ */ c("button", {
 		type: "button",
-		className: "app-launcher__trigger app-launcher__trigger--label",
+		className: f(!0, h),
 		"aria-haspopup": "dialog",
-		onClick: () => g(!0),
+		onClick: () => v(!0),
 		children: [/* @__PURE__ */ s(t, {
 			name: "grid",
 			size: "md"
@@ -108,18 +116,18 @@ function m({ apps: n, labels: r, currentAppId: a, open: l, defaultOpen: u, onOpe
 		})]
 	}) : /* @__PURE__ */ s("button", {
 		type: "button",
-		className: "app-launcher__trigger",
-		"aria-label": m("open", r.open),
+		className: f(!1, h),
+		"aria-label": g("open", r.open),
 		"aria-haspopup": "dialog",
-		onClick: () => g(!0),
+		onClick: () => v(!0),
 		children: /* @__PURE__ */ s(t, {
 			name: "grid",
 			size: "md"
 		})
 	}), /* @__PURE__ */ s(i, {
-		open: h,
-		onClose: () => g(!1),
-		title: m("title", r.title),
+		open: _,
+		onClose: () => v(!1),
+		title: g("title", r.title),
 		children: /* @__PURE__ */ s(d, {
 			apps: n,
 			currentAppId: a,
@@ -127,11 +135,11 @@ function m({ apps: n, labels: r, currentAppId: a, open: l, defaultOpen: u, onOpe
 		})
 	})] });
 }
-function h({ presentation: e = "modal", labels: t = {}, ...n }) {
-	return s(e === "popover" ? f : m, {
+function g({ presentation: e = "modal", labels: t = {}, ...n }) {
+	return s(e === "popover" ? p : h, {
 		labels: t,
 		...n
 	});
 }
 //#endregion
-export { h as AppLauncher };
+export { g as AppLauncher };

package/dist/app-shell.js

@@ -4,88 +4,88 @@ import { n as e } from "./_shared/brandmessagescontext.js";
 import { SkipLink as t } from "./skip-link.js";
 import { t as n } from "./_shared/css-properties.js";
 import { TooltipProvider as r } from "./tooltip.js";
-import { n as i, t as a } from "./_shared/appshellcontext.js";
-import { t as o } from "./_shared/media-query.js";
+import { t as i } from "./_shared/media-query.js";
+import { n as a, t as o } from "./_shared/appshellcontext.js";
 import { useCallback as s, useEffect as c, useMemo as l, useState as u } from "react";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/stories/sections/AppShell/AppShell.tsx
 var p = "(min-width: 1024px)";
-function m({ banner: i, header: m, sidebar: h, children: g, contentFlush: _ = !1, defaultSidebar: v = "open", sidebarState: y, onSidebarChange: b, defaultSidebarWidth: x, onSidebarWidthChange: S, skipLabel: C }) {
-	let w = e("appShell"), T = o(p), E = T ?? !0, [D, O] = u(v), [k, A] = u(!1), [j, M] = u(x), N = E ? y ?? D : k ? "open" : "closed", P = s((e) => {
-		E ? (O(e), b?.(e)) : A(e === "open");
-	}, [E, b]), F = s(() => P(N === "open" ? "closed" : "open"), [P, N]), I = s(() => P("closed"), [P]), L = s((e) => {
-		M(e), S?.(e);
+function m({ banner: a, header: m, sidebar: h, children: g, contentFlush: _ = !1, defaultSidebar: v = "open", sidebarState: y, onSidebarChange: b, defaultSidebarWidth: x, onSidebarWidthChange: S, skipLabel: C, className: w }) {
+	let T = e("appShell"), E = i(p), D = E ?? !0, [O, k] = u(v), [A, j] = u(!1), [M, N] = u(x), P = D ? y ?? O : A ? "open" : "closed", F = s((e) => {
+		D ? (k(e), b?.(e)) : j(e === "open");
+	}, [D, b]), I = s(() => F(P === "open" ? "closed" : "open"), [F, P]), L = s(() => F("closed"), [F]), R = s((e) => {
+		N(e), S?.(e);
 	}, [S]);
 	c(() => {
-		if (E || !k) return;
+		if (D || !A) return;
 		let e = (e) => {
-			e.key === "Escape" && A(!1);
+			e.key === "Escape" && j(!1);
 		};
 		document.addEventListener("keydown", e);
 		let t = document.body.style.overflow;
 		return document.body.style.overflow = "hidden", () => {
 			document.removeEventListener("keydown", e), document.body.style.overflow = t;
 		};
-	}, [E, k]);
-	let R = l(() => ({
-		sidebar: N,
-		setSidebar: P,
-		sidebarWidth: j ?? 0,
-		setSidebarWidth: L,
-		toggleSidebar: F,
-		closeSidebar: I,
-		isDesktop: E
+	}, [D, A]);
+	let z = l(() => ({
+		sidebar: P,
+		setSidebar: F,
+		sidebarWidth: M ?? 0,
+		setSidebarWidth: R,
+		toggleSidebar: I,
+		closeSidebar: L,
+		isDesktop: D
 	}), [
-		N,
 		P,
-		j,
-		L,
 		F,
+		M,
+		R,
 		I,
-		E
-	]), [z, B] = u(0), V = s((e) => {
+		L,
+		D
+	]), [B, V] = u(0), H = s((e) => {
 		if (!e) return;
-		let t = () => B(e.getBoundingClientRect().height);
+		let t = () => V(e.getBoundingClientRect().height);
 		if (t(), typeof ResizeObserver > "u") return;
 		let n = new ResizeObserver(t);
 		return n.observe(e), () => {
-			n.disconnect(), B(0);
+			n.disconnect(), V(0);
 		};
-	}, []), H = n({
-		"--app-shell-sidebar-width": j ? `${j}px` : void 0,
-		"--app-shell-banner-height": i ? `${z}px` : void 0
-	}), U = !E && k;
-	return /* @__PURE__ */ d(a.Provider, {
-		value: R,
+	}, []), U = n({
+		"--app-shell-sidebar-width": M ? `${M}px` : void 0,
+		"--app-shell-banner-height": a ? `${B}px` : void 0
+	}), W = !D && A;
+	return /* @__PURE__ */ d(o.Provider, {
+		value: z,
 		children: /* @__PURE__ */ f(r, { children: [/* @__PURE__ */ d(t, {
 			href: "#main-content",
-			children: w("skipToContent", C)
+			children: T("skipToContent", C)
 		}), /* @__PURE__ */ f("div", {
-			ref: H,
-			className: "app-shell",
-			"data-sidebar": N,
-			"data-layout": T === null ? void 0 : E ? "column" : "drawer",
+			ref: U,
+			className: ["app-shell", w].filter(Boolean).join(" "),
+			"data-sidebar": P,
+			"data-layout": E === null ? void 0 : D ? "column" : "drawer",
 			children: [
-				i && /* @__PURE__ */ d("div", {
-					ref: V,
+				a && /* @__PURE__ */ d("div", {
+					ref: H,
 					className: "app-shell__banner",
-					children: i
+					children: a
 				}),
 				m,
 				/* @__PURE__ */ f("div", {
 					className: "app-shell__body",
 					children: [
 						h,
-						U && /* @__PURE__ */ d("div", {
+						W && /* @__PURE__ */ d("div", {
 							className: "app-shell__backdrop",
-							onClick: I,
+							onClick: L,
 							"aria-hidden": "true"
 						}),
 						/* @__PURE__ */ d("main", {
 							id: "main-content",
 							tabIndex: -1,
 							className: _ ? "app-shell__content app-shell__content--flush" : "app-shell__content",
-							inert: U || void 0,
+							inert: W || void 0,
 							children: g
 						})
 					]
@@ -95,4 +95,4 @@ function m({ banner: i, header: m, sidebar: h, children: g, contentFlush: _ = !1
 	});
 }
 //#endregion
-export { m as AppShell, i as useAppShell };
+export { m as AppShell, a as useAppShell };

package/dist/async-multi-select.css

@@ -1 +1 @@
-.async-multi-select{align-items:center;gap:var(--async-multi-select-content-gap);min-block-size:var(--async-multi-select-height);padding-block:0;padding-inline:var(--async-multi-select-padding-inline);font-family:var(--async-multi-select-font-family);font-size:var(--async-multi-select-font-size);line-height:var(--async-multi-select-line-height);font-weight:var(--async-multi-select-font-weight);color:var(--async-multi-select-color);background-color:var(--async-multi-select-bg);border-width:var(--async-multi-select-border-width);border-style:var(--async-multi-select-border-style);border-color:var(--async-multi-select-border-color);border-radius:var(--async-multi-select-border-radius);box-sizing:border-box;width:100%;display:inline-flex}.async-multi-select:focus-within{outline:var(--async-multi-select-focus-ring-width) solid var(--async-multi-select-focus-ring-color);outline-offset:calc(-1 * (var(--async-multi-select-focus-ring-width) + var(--async-multi-select-border-width)))}.async-multi-select.async-multi-select--disabled{opacity:.5;cursor:var(--async-multi-select-disabled-cursor);pointer-events:none}.async-multi-select__input-area{align-items:center;gap:var(--async-multi-select-selection-gap);flex-wrap:wrap;flex:1;min-width:0;display:flex}.async-multi-select__pill{align-items:center;gap:var(--async-multi-select-pill-gap);padding-block:var(--async-multi-select-pill-padding-block);padding-inline:var(--async-multi-select-pill-padding-inline);background-color:var(--async-multi-select-pill-bg);color:var(--async-multi-select-pill-color);border-radius:var(--async-multi-select-pill-border-radius);font-size:var(--async-multi-select-pill-font-size);white-space:nowrap;line-height:1;display:inline-flex}.async-multi-select__pill-label{line-height:1}.async-multi-select__pill-remove{all:unset;cursor:pointer;line-height:1;font-size:var(--async-multi-select-pill-font-size);opacity:.7;justify-content:center;align-items:center;display:inline-flex}.async-multi-select__pill-remove:hover{opacity:1}.async-multi-select__input{all:unset;cursor:text;min-width:4rem;font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;flex:1}.async-multi-select__input::placeholder{color:var(--async-multi-select-placeholder-color)}.async-multi-select__input:disabled{cursor:var(--async-multi-select-disabled-cursor)}.async-multi-select__content{background-color:var(--async-multi-select-content-bg);border-width:var(--async-multi-select-border-width);border-style:var(--async-multi-select-border-style);border-color:var(--async-multi-select-content-border-color);min-width:var(--anchor-width);max-height:var(--async-multi-select-content-max-height,var(--available-height));overscroll-behavior:contain;overflow-y:auto}.async-multi-select__content[data-side=bottom]{border-top:none}.async-multi-select__content[data-side=top]{border-bottom:none}.async-multi-select__loading{padding-block:var(--async-multi-select-loading-padding-block);padding-inline:var(--async-multi-select-loading-padding-inline);justify-content:center;align-items:center;display:flex}.async-multi-select__empty{padding-block:var(--async-multi-select-empty-padding-block);padding-inline:var(--async-multi-select-empty-padding-inline);font-size:var(--async-multi-select-empty-font-size);font-family:var(--async-multi-select-empty-font-family);color:var(--async-multi-select-empty-color)}.async-multi-select__item{all:unset;box-sizing:border-box;align-items:center;gap:var(--async-multi-select-padding-inline);width:100%;padding-block:var(--async-multi-select-item-padding-block);padding-inline:var(--async-multi-select-padding-inline);font-size:var(--async-multi-select-font-size);font-family:var(--async-multi-select-font-family);color:var(--async-multi-select-color);cursor:pointer;display:flex}.async-multi-select__item:focus-visible,.async-multi-select__item:hover{background-color:var(--async-multi-select-item-highlighted-bg);color:var(--async-multi-select-item-highlighted-color)}.async-multi-select__item.async-multi-select__item--selected{font-weight:var(--async-multi-select-item-selected-font-weight)}.async-multi-select__item.async-multi-select__item--active{background-color:var(--async-multi-select-item-highlighted-bg);color:var(--async-multi-select-item-highlighted-color)}.async-multi-select__content .async-multi-select__item+.async-multi-select__item,.async-multi-select__content[data-side=bottom] .async-multi-select__item:first-child{border-top:var(--async-multi-select-border-width) var(--async-multi-select-border-style) var(--async-multi-select-content-border-color)}.async-multi-select__content[data-side=top] .async-multi-select__item:last-child{border-bottom:var(--async-multi-select-border-width) var(--async-multi-select-border-style) var(--async-multi-select-content-border-color)}.async-multi-select__item-check{width:var(--checkbox-size);height:var(--checkbox-size);border-width:var(--checkbox-border-width);border-style:var(--checkbox-border-style);transition:background-color var(--checkbox-transition-duration) var(--checkbox-transition-easing);background-color:#0000;border-color:currentColor;flex-shrink:0;place-content:center;display:grid}.async-multi-select__item--selected .async-multi-select__item-check{background-color:currentColor}.async-multi-select__item-check-mark{width:var(--checkbox-check-size);height:var(--checkbox-check-size);background-color:var(--async-multi-select-content-bg);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);transition:transform var(--checkbox-transition-duration) var(--checkbox-transition-easing);transform:scale(0)}.async-multi-select__item--selected .async-multi-select__item-check-mark{transform:scale(1)}.async-multi-select__item:focus-visible .async-multi-select__item-check-mark,.async-multi-select__item:hover .async-multi-select__item-check-mark,.async-multi-select__item--active .async-multi-select__item-check-mark{background-color:var(--async-multi-select-item-highlighted-bg)}.async-multi-select.async-multi-select--sm{font-size:var(--async-multi-select-sm-font-size);--async-multi-select-height:var(--async-multi-select-sm-height);padding-inline:var(--async-multi-select-sm-padding-inline)}.async-multi-select__content--sm .async-multi-select__item{font-size:var(--async-multi-select-sm-font-size);padding-block:var(--async-multi-select-sm-item-padding-block)}.async-multi-select.async-multi-select--lg{font-size:var(--async-multi-select-lg-font-size);--async-multi-select-height:var(--async-multi-select-lg-height);padding-inline:var(--async-multi-select-lg-padding-inline)}.async-multi-select__content--lg .async-multi-select__item{font-size:var(--async-multi-select-lg-font-size);padding-block:var(--async-multi-select-lg-item-padding-block)}.async-multi-select__positioner{z-index:var(--async-multi-select-content-z-index)}.async-multi-select.async-multi-select--error{border-color:var(--async-multi-select-error-border-color)}
+.async-multi-select{align-items:center;gap:var(--async-multi-select-content-gap);min-block-size:var(--async-multi-select-height);padding-block:0;padding-inline:var(--async-multi-select-padding-inline);font-family:var(--async-multi-select-font-family);font-size:var(--async-multi-select-font-size);line-height:var(--async-multi-select-line-height);font-weight:var(--async-multi-select-font-weight);color:var(--async-multi-select-color);background-color:var(--async-multi-select-bg);border-width:var(--async-multi-select-border-width);border-style:var(--async-multi-select-border-style);border-color:var(--async-multi-select-border-color);border-radius:var(--async-multi-select-border-radius);box-sizing:border-box;inline-size:100%;display:inline-flex}.async-multi-select:focus-within{outline:var(--async-multi-select-focus-ring-width) solid var(--async-multi-select-focus-ring-color);outline-offset:calc(-1 * (var(--async-multi-select-focus-ring-width) + var(--async-multi-select-border-width)))}.async-multi-select.async-multi-select--disabled{opacity:var(--async-multi-select-disabled-opacity);cursor:var(--async-multi-select-disabled-cursor);pointer-events:none}.async-multi-select__input-area{align-items:center;gap:var(--async-multi-select-selection-gap);flex-wrap:wrap;flex:1;min-inline-size:0;display:flex}.async-multi-select__pill{align-items:center;gap:var(--async-multi-select-pill-gap);padding-block:var(--async-multi-select-pill-padding-block);padding-inline:var(--async-multi-select-pill-padding-inline);background-color:var(--async-multi-select-pill-bg);color:var(--async-multi-select-pill-color);border-radius:var(--async-multi-select-pill-border-radius);font-size:var(--async-multi-select-pill-font-size);white-space:nowrap;line-height:1;display:inline-flex}.async-multi-select__pill:focus-visible{outline:var(--async-multi-select-focus-ring-width) solid var(--async-multi-select-focus-ring-color)}.async-multi-select__pill-label{line-height:1}.async-multi-select__pill-remove{all:unset;cursor:pointer;line-height:1;font-size:var(--async-multi-select-pill-font-size);opacity:var(--async-multi-select-pill-remove-opacity);justify-content:center;align-items:center;display:inline-flex}.async-multi-select__pill-remove:hover{opacity:var(--async-multi-select-pill-remove-hover-opacity)}.async-multi-select__input{all:unset;min-inline-size:var(--async-multi-select-input-min-inline-size);cursor:text;font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;flex:1}.async-multi-select__input::placeholder{color:var(--async-multi-select-placeholder-color)}.async-multi-select__input:disabled{cursor:var(--async-multi-select-disabled-cursor)}.async-multi-select__content{background-color:var(--async-multi-select-content-bg);border-width:var(--async-multi-select-border-width);border-style:var(--async-multi-select-border-style);border-color:var(--async-multi-select-content-border-color);min-inline-size:var(--anchor-width);max-block-size:var(--async-multi-select-content-max-height,var(--available-height));overscroll-behavior:contain;overflow-y:auto}.async-multi-select__content[data-side=bottom]{border-block-start:none}.async-multi-select__content[data-side=top]{border-block-end:none}.async-multi-select__loading{padding-block:var(--async-multi-select-loading-padding-block);padding-inline:var(--async-multi-select-loading-padding-inline);justify-content:center;align-items:center;display:flex}.async-multi-select__empty{padding-block:var(--async-multi-select-empty-padding-block);padding-inline:var(--async-multi-select-empty-padding-inline);font-size:var(--async-multi-select-empty-font-size);font-family:var(--async-multi-select-empty-font-family);color:var(--async-multi-select-empty-color)}.async-multi-select__item{all:unset;box-sizing:border-box;align-items:center;gap:var(--async-multi-select-padding-inline);inline-size:100%;padding-block:var(--async-multi-select-item-padding-block);padding-inline:var(--async-multi-select-padding-inline);font-size:var(--async-multi-select-font-size);font-family:var(--async-multi-select-font-family);color:var(--async-multi-select-color);cursor:pointer;display:flex}.async-multi-select__item[data-highlighted],.async-multi-select__item:hover{background-color:var(--async-multi-select-item-highlighted-bg);color:var(--async-multi-select-item-highlighted-color)}.async-multi-select__item[data-selected]{font-weight:var(--async-multi-select-item-selected-font-weight)}.async-multi-select__content .async-multi-select__item+.async-multi-select__item,.async-multi-select__content[data-side=bottom] .async-multi-select__item:first-child{border-block-start:var(--async-multi-select-border-width) var(--async-multi-select-border-style) var(--async-multi-select-content-border-color)}.async-multi-select__content[data-side=top] .async-multi-select__item:last-child{border-block-end:var(--async-multi-select-border-width) var(--async-multi-select-border-style) var(--async-multi-select-content-border-color)}.async-multi-select__item-check{inline-size:var(--checkbox-size);block-size:var(--checkbox-size);border-width:var(--checkbox-border-width);border-style:var(--checkbox-border-style);transition:background-color var(--checkbox-transition-duration) var(--checkbox-transition-easing);background-color:#0000;border-color:currentColor;flex-shrink:0;place-content:center;display:grid}.async-multi-select__item[data-selected] .async-multi-select__item-check{background-color:currentColor}.async-multi-select__item-check-mark{inline-size:var(--checkbox-check-size);block-size:var(--checkbox-check-size);background-color:var(--async-multi-select-content-bg);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);transition:transform var(--checkbox-transition-duration) var(--checkbox-transition-easing);transform:scale(0)}.async-multi-select__item[data-selected] .async-multi-select__item-check-mark{transform:scale(1)}.async-multi-select__item:hover .async-multi-select__item-check-mark,.async-multi-select__item[data-highlighted] .async-multi-select__item-check-mark{background-color:var(--async-multi-select-item-highlighted-bg)}.async-multi-select.async-multi-select--sm{font-size:var(--async-multi-select-sm-font-size);--async-multi-select-height:var(--async-multi-select-sm-height);padding-inline:var(--async-multi-select-sm-padding-inline)}.async-multi-select__content--sm .async-multi-select__item{font-size:var(--async-multi-select-sm-font-size);padding-block:var(--async-multi-select-sm-item-padding-block)}.async-multi-select.async-multi-select--lg{font-size:var(--async-multi-select-lg-font-size);--async-multi-select-height:var(--async-multi-select-lg-height);padding-inline:var(--async-multi-select-lg-padding-inline)}.async-multi-select__content--lg .async-multi-select__item{font-size:var(--async-multi-select-lg-font-size);padding-block:var(--async-multi-select-lg-item-padding-block)}.async-multi-select__positioner{z-index:var(--async-multi-select-content-z-index)}.async-multi-select.async-multi-select--error{border-color:var(--async-multi-select-error-border-color)}