@devslab/dds-solid 0.9.0 → 0.11.0

package/dist/console-shell.d.ts

@@ -0,0 +1,63 @@
+import { type JSX } from "solid-js";
+/** One item in a nav group's list. `active` is a caller override — pass it
+ * only when the generic prefix rule below gets a route wrong. "Index route"
+ * in that rule means an `href` exactly one path segment deep (e.g.
+ * `/dashboard`); a console mounted under a path prefix (so its own root is
+ * two or more segments deep) should pass `active` explicitly on that item
+ * rather than rely on the generic rule. */
+export interface ConsoleNavItem {
+    id: string;
+    href: string;
+    label: string;
+    badge?: number;
+    active?: boolean;
+}
+export interface ConsoleNavGroup {
+    label: string;
+    items: readonly ConsoleNavItem[];
+}
+export interface ConsoleShellLabels {
+    skip: string;
+    menuOpen: string;
+    menuClose: string;
+    /** Accessible name for the rail's `<nav>` landmark (e.g. "Dashboard
+     * navigation"). Required, not optional: a console page also has the
+     * DataTable's pagination `<nav>` (named via its own `labels.nextPage`),
+     * and an unnamed landmark next to a named one is a regression a
+     * screen-reader user would notice immediately — the rail is the primary
+     * nav, so it must never be the anonymous one. */
+    nav: string;
+    /** Badge accessible name template. `{count}` is substituted with the
+     * item's pending count — DDS supplies no words of its own. */
+    badge: string;
+}
+export interface ConsoleHeader {
+    eyebrow?: string;
+    title: string;
+    actions?: JSX.Element;
+}
+export interface ConsoleShellProps {
+    surface: string;
+    activePath: string;
+    brand: {
+        href: string;
+        name: string;
+        mark: string;
+    };
+    /** Lines pinned under the brand — a product's organization, environment,
+     * or role context. */
+    context?: readonly {
+        label: string;
+        value: string;
+    }[];
+    nav: readonly ConsoleNavGroup[];
+    labels: ConsoleShellLabels;
+    header: ConsoleHeader;
+    /** Slot for the rail's bottom — DDS must not depend on site-kit, so a
+     * theme toggle, locale picker, or sign-out form all arrive as children
+     * the product renders itself. */
+    foot?: JSX.Element;
+    children: JSX.Element;
+}
+export declare function ConsoleShell(props: ConsoleShellProps): JSX.Element;
+//# sourceMappingURL=console-shell.d.ts.map

package/dist/console-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"console-shell.d.ts","sourceRoot":"","sources":["../src/console-shell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+D,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AAEjG;;;;;2CAK2C;AAC3C,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;CAClC;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB;;;;;qDAKiD;IACjD,GAAG,EAAE,MAAM,CAAC;IACZ;kEAC8D;IAC9D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD;0BACsB;IACtB,OAAO,CAAC,EAAE,SAAS;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACtD,GAAG,EAAE,SAAS,eAAe,EAAE,CAAC;IAChC,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,aAAa,CAAC;IACtB;;qCAEiC;IACjC,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAsBD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CA8FlE"}

package/dist/index.d.ts

@@ -1,7 +1,10 @@
 export { createControllableSignal, type ControllableOptions } from "./controllable";
 export { Button, Checkbox, Field, IconButton, Radio, Select, Switch, type ButtonProps, type ButtonTone, type CheckboxProps, type FieldControlProps, type FieldProps, type IconButtonProps, type RadioProps, type SelectProps, type SwitchProps, type ControlSize, } from "./controls";
+export { ConsoleShell, type ConsoleHeader, type ConsoleNavGroup, type ConsoleNavItem, type ConsoleShellLabels, type ConsoleShellProps } from "./console-shell";
 export { Dialog, type DialogProps } from "./dialog";
 export { Icon, type IconProps } from "./icon";
+export { createStatusPill } from "./status-pill";
+export type { StatusTone } from "./status-pill";
 export { Tab, TabList, TabPanel, Tabs, type TabPanelProps, type TabProps, type TabsProps } from "./tabs";
 export { ToastProvider, useToast, type ToastApi, type ToastInput, type ToastProviderProps, type ToastTone } from "./toast";
 export { Tooltip, type TooltipProps, type TooltipTriggerProps } from "./tooltip";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACpF,OAAO,EACL,MAAM,EACN,QAAQ,EACR,KAAK,EACL,UAAU,EACV,KAAK,EACL,MAAM,EACN,MAAM,EACN,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,WAAW,GACjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AACzG,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,KAAK,UAAU,EAAE,KAAK,kBAAkB,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAC3H,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,mBAAmB,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACpF,OAAO,EACL,MAAM,EACN,QAAQ,EACR,KAAK,EACL,UAAU,EACV,KAAK,EACL,MAAM,EACN,MAAM,EACN,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,WAAW,GACjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,YAAY,EAAE,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,KAAK,kBAAkB,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAC/J,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AACzG,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,KAAK,UAAU,EAAE,KAAK,kBAAkB,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAC3H,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,mBAAmB,EAAE,MAAM,WAAW,CAAC"}

package/dist/index.js

@@ -19,8 +19,8 @@ function k(...e) {
 }
 //#endregion
 //#region src/controls.tsx
-var A = /*#__PURE__*/ C("<button><!$><!/><!$><!/>"), j = /*#__PURE__*/ C("<span class=dds-spinner aria-hidden=true>"), M = /*#__PURE__*/ C("<button>"), ee = /*#__PURE__*/ C("<div><label class=dds-field__label><!$><!/><!$><!/></label><!$><!/><!$><!/><!$><!/>"), te = /*#__PURE__*/ C("<span aria-hidden=true> *"), ne = /*#__PURE__*/ C("<div class=dds-field__help>"), re = /*#__PURE__*/ C("<div class=dds-field__error role=alert>"), ie = /*#__PURE__*/ C("<span><select>"), N = /*#__PURE__*/ C("<label><input><span>");
-function P(e) {
+var A = /*#__PURE__*/ C("<button><!$><!/><!$><!/>"), j = /*#__PURE__*/ C("<span class=dds-spinner aria-hidden=true>"), M = /*#__PURE__*/ C("<button>"), N = /*#__PURE__*/ C("<div><label class=dds-field__label><!$><!/><!$><!/></label><!$><!/><!$><!/><!$><!/>"), P = /*#__PURE__*/ C("<span aria-hidden=true> *"), F = /*#__PURE__*/ C("<div class=dds-field__help>"), I = /*#__PURE__*/ C("<div class=dds-field__error role=alert>"), L = /*#__PURE__*/ C("<span><select>"), R = /*#__PURE__*/ C("<label><input><span>");
+function z(e) {
 	let [t, n] = c(e, [
 		"class",
 		"tone",
@@ -51,7 +51,7 @@ function P(e) {
 		})(), i, a), g(e, () => t.children, s, c), y(), e;
 	})();
 }
-function F(e) {
+function B(e) {
 	let [t, n] = c(e, [
 		"class",
 		"tone",
@@ -82,7 +82,7 @@ function F(e) {
 		})()), y(), e;
 	})();
 }
-function I(e) {
+function V(e) {
 	let t = a(), n = () => e.id ?? `dds-field-${t}`, r = () => e.helpText ? `${n()}-help` : void 0, i = () => e.error ? `${n()}-error` : void 0, o = () => ({
 		id: n(),
 		"aria-describedby": k(r(), i()),
@@ -90,23 +90,23 @@ function I(e) {
 		"aria-required": e.required ? "true" : void 0
 	});
 	return (() => {
-		var t = m(ee), a = t.firstChild, s = a.firstChild, [c, l] = h(s.nextSibling), d = c.nextSibling, [f, v] = h(d.nextSibling), y = a.nextSibling, [x, S] = h(y.nextSibling), C = x.nextSibling, [w, T] = h(C.nextSibling), E = w.nextSibling, [D, k] = h(E.nextSibling);
+		var t = m(N), a = t.firstChild, s = a.firstChild, [c, l] = h(s.nextSibling), d = c.nextSibling, [f, v] = h(d.nextSibling), y = a.nextSibling, [x, S] = h(y.nextSibling), C = x.nextSibling, [w, T] = h(C.nextSibling), E = w.nextSibling, [D, k] = h(E.nextSibling);
 		return g(a, () => e.label, c, l), g(a, (() => {
 			var t = _(() => !!e.required);
-			return () => t() && m(te);
+			return () => t() && m(P);
 		})(), f, v), g(t, (() => {
 			var t = _(() => typeof e.children == "function");
 			return () => t() ? e.children(o()) : e.children;
 		})(), x, S), g(t, (() => {
 			var t = _(() => !!e.helpText);
 			return () => t() && (() => {
-				var t = m(ne);
+				var t = m(F);
 				return g(t, () => e.helpText), p(() => b(t, "id", r())), t;
 			})();
 		})(), w, T), g(t, (() => {
 			var t = _(() => !!e.error);
 			return () => t() && (() => {
-				var t = m(re);
+				var t = m(I);
 				return g(t, () => e.error), p(() => b(t, "id", i())), t;
 			})();
 		})(), D, k), p((r) => {
@@ -118,14 +118,14 @@ function I(e) {
 		}), t;
 	})();
 }
-function L(e) {
+function H(e) {
 	let [t, n] = c(e, [
 		"class",
 		"invalid",
 		"children"
 	]);
 	return (() => {
-		var e = m(ie), r = e.firstChild;
+		var e = m(L), r = e.firstChild;
 		return S(r, v(n, {
 			class: "dds-select__input",
 			get "aria-invalid"() {
@@ -134,7 +134,7 @@ function L(e) {
 		}), !1, !0), g(r, () => t.children), p(() => u(e, O("dds-select", t.class))), y(), e;
 	})();
 }
-function R(e) {
+function U(e) {
 	let [t, n] = c(e, [
 		"checked",
 		"defaultChecked",
@@ -150,7 +150,7 @@ function R(e) {
 		onChange: t.onCheckedChange
 	});
 	return (() => {
-		var e = m(N), a = e.firstChild, o = a.nextSibling;
+		var e = m(R), a = e.firstChild, o = a.nextSibling;
 		return S(a, v(n, {
 			get type() {
 				return t.type;
@@ -168,10 +168,122 @@ function R(e) {
 		}), !1, !1), g(o, () => t.label), p(() => u(e, O(t.role === "switch" ? "dds-switch" : "dds-check", t.class))), y(), e;
 	})();
 }
-var z = (e) => d(R, v(e, { type: "checkbox" })), B = (e) => d(R, v(e, { type: "radio" })), V = (e) => d(R, v(e, {
+var W = (e) => d(U, v(e, { type: "checkbox" })), ee = (e) => d(U, v(e, { type: "radio" })), te = (e) => d(U, v(e, {
 	type: "checkbox",
 	role: "switch"
-})), H = /*#__PURE__*/ C("<div class=dds-dialog-overlay><div role=dialog aria-modal=true tabindex=-1><h2 class=dds-dialog__title></h2><!$><!/><!$><!/><!$><!/>"), U = /*#__PURE__*/ C("<div class=dds-dialog__body>"), W = /*#__PURE__*/ C("<div class=dds-dialog__actions>"), G = [
+})), ne = /*#__PURE__*/ C("<dl class=dds-console-rail__context>"), re = /*#__PURE__*/ C("<div class=dds-console-rail__foot>"), ie = /*#__PURE__*/ C("<p class=dds-console-page-eyebrow>"), ae = /*#__PURE__*/ C("<div class=dds-console-page-header__actions>"), oe = /*#__PURE__*/ C("<div class=dds-console-shell><a class=\"dds-console-skip dds-visually-hidden\"href=#dds-console-main></a><button class=dds-console-rail__toggle type=button data-action=toggle-rail aria-controls=dds-console-rail><span aria-hidden=true></span><span class=dds-visually-hidden></span></button><div class=dds-console-rail__scrim></div><aside id=dds-console-rail class=dds-console-rail><a class=dds-console-rail__brand><img alt width=20 height=20><strong></strong></a><!$><!/><nav class=dds-console-rail__nav></nav><!$><!/></aside><main id=dds-console-main class=dds-console-main tabindex=-1><header class=dds-console-page-header><div class=dds-console-page-header__text><!$><!/><h1></h1></div><!$><!/></header><!$><!/>"), G = /*#__PURE__*/ C("<div><dt></dt><dd>"), K = /*#__PURE__*/ C("<section class=dds-console-rail__group><h2 class=dds-console-rail__group-label></h2><ul>"), q = /*#__PURE__*/ C("<span class=dds-console-rail__badge>"), se = /*#__PURE__*/ C("<li><a class=dds-console-rail__item><span></span><!$><!/>");
+function ce(e, t, n) {
+	return n === void 0 ? t.split("/").filter(Boolean).length <= 1 ? e === t : e === t || e.startsWith(`${t}/`) : n;
+}
+function le(e, t) {
+	return e.replace("{count}", () => String(t));
+}
+function ue(n) {
+	let [r, c] = i(!1), l = () => c(!1), [u, f] = i(!1);
+	return s(() => {
+		f(!0);
+		let e = (e) => {
+			e.key === "Escape" && l();
+		};
+		document.addEventListener("keydown", e), o(() => document.removeEventListener("keydown", e));
+	}), (() => {
+		var i = m(oe), o = i.firstChild, s = o.nextSibling, f = s.firstChild.nextSibling, v = s.nextSibling, x = v.nextSibling, S = x.firstChild, C = S.firstChild, w = C.nextSibling, T = S.nextSibling, [E, D] = h(T.nextSibling), O = E.nextSibling, k = O.nextSibling, [A, j] = h(k.nextSibling), M = x.nextSibling, N = M.firstChild, P = N.firstChild, F = P.firstChild, [I, L] = h(F.nextSibling), R = I.nextSibling, z = P.nextSibling, [B, V] = h(z.nextSibling), H = N.nextSibling, [U, W] = h(H.nextSibling);
+		return g(o, () => n.labels.skip), s.$$click = () => c(!r()), g(f, (() => {
+			var e = _(() => !!r());
+			return () => e() ? n.labels.menuClose : n.labels.menuOpen;
+		})()), v.$$click = l, g(w, () => n.brand.name), g(x, d(t, {
+			get when() {
+				return _(() => !!n.context)() && n.context.length > 0;
+			},
+			get children() {
+				var t = m(ne);
+				return g(t, d(e, {
+					get each() {
+						return n.context;
+					},
+					children: (e) => (() => {
+						var t = m(G), n = t.firstChild, r = n.nextSibling;
+						return g(n, () => e.label), g(r, () => e.value), t;
+					})()
+				})), t;
+			}
+		}), E, D), g(O, d(e, {
+			get each() {
+				return n.nav;
+			},
+			children: (r) => {
+				let i = `dds-console-group-${a()}`;
+				return (() => {
+					var a = m(K), o = a.firstChild, s = o.nextSibling;
+					return b(a, "aria-labelledby", i), b(o, "id", i), g(o, () => r.label), g(s, d(e, {
+						get each() {
+							return r.items;
+						},
+						children: (e) => (() => {
+							var r = m(se), i = r.firstChild, a = i.firstChild, o = a.nextSibling, [s, c] = h(o.nextSibling);
+							return i.$$click = l, g(a, () => e.label), g(i, d(t, {
+								get when() {
+									return _(() => e.badge !== void 0)() && e.badge > 0;
+								},
+								get children() {
+									var t = m(q);
+									return g(t, () => e.badge), p(() => b(t, "aria-label", le(n.labels.badge, e.badge))), t;
+								}
+							}), s, c), p((t) => {
+								var r = `${n.surface}.${e.id}`, a = e.href, o = ce(n.activePath, e.href, e.active) ? "page" : void 0;
+								return r !== t.e && b(i, "data-nav", t.e = r), a !== t.t && b(i, "href", t.t = a), o !== t.a && b(i, "aria-current", t.a = o), t;
+							}, {
+								e: void 0,
+								t: void 0,
+								a: void 0
+							}), y(), r;
+						})()
+					})), a;
+				})();
+			}
+		})), g(x, d(t, {
+			get when() {
+				return n.foot;
+			},
+			get children() {
+				var e = m(re);
+				return g(e, () => n.foot), e;
+			}
+		}), A, j), g(P, d(t, {
+			get when() {
+				return n.header.eyebrow;
+			},
+			get children() {
+				var e = m(ie);
+				return g(e, () => n.header.eyebrow), e;
+			}
+		}), I, L), g(R, () => n.header.title), g(N, d(t, {
+			get when() {
+				return n.header.actions;
+			},
+			get children() {
+				var e = m(ae);
+				return g(e, () => n.header.actions), e;
+			}
+		}), B, V), g(M, () => n.children, U, W), p((e) => {
+			var t = n.surface, a = u() ? "true" : void 0, o = r(), c = r() ? "true" : "false", l = r() ? "true" : "false", d = n.brand.href, f = n.brand.mark, p = n.labels.nav;
+			return t !== e.e && b(i, "data-surface", e.e = t), a !== e.t && b(i, "data-hydrated", e.t = a), o !== e.a && b(s, "aria-expanded", e.a = o), c !== e.o && b(v, "data-open", e.o = c), l !== e.i && b(x, "data-open", e.i = l), d !== e.n && b(S, "href", e.n = d), f !== e.s && b(C, "src", e.s = f), p !== e.h && b(O, "aria-label", e.h = p), e;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0,
+			n: void 0,
+			s: void 0,
+			h: void 0
+		}), y(), i;
+	})();
+}
+f(["click"]);
+//#endregion
+//#region src/dialog.tsx
+var de = /*#__PURE__*/ C("<div class=dds-dialog-overlay><div role=dialog aria-modal=true tabindex=-1><h2 class=dds-dialog__title></h2><!$><!/><!$><!/><!$><!/>"), fe = /*#__PURE__*/ C("<div class=dds-dialog__body>"), pe = /*#__PURE__*/ C("<div class=dds-dialog__actions>"), J = [
 	"a[href]",
 	"button:not([disabled])",
 	"input:not([disabled])",
@@ -179,7 +291,7 @@ var z = (e) => d(R, v(e, { type: "checkbox" })), B = (e) => d(R, v(e, { type: "r
 	"textarea:not([disabled])",
 	"[tabindex]:not([tabindex='-1'])"
 ].join(",");
-function K(e) {
+function me(e) {
 	let n = a(), i = () => e.id ?? `dds-dialog-${n}`, s = () => `${i()}-title`, c = () => e.description ? `${i()}-description` : void 0, [l, f] = D({
 		value: () => e.open,
 		defaultValue: e.defaultOpen ?? !1,
@@ -188,7 +300,7 @@ function K(e) {
 	return r(() => {
 		if (!l()) return;
 		x = document.activeElement instanceof HTMLElement ? document.activeElement : null, queueMicrotask(() => {
-			(v?.querySelector(G) ?? v)?.focus();
+			(v?.querySelector(J) ?? v)?.focus();
 		});
 		let t = (t) => {
 			if (t.key === "Escape" && e.closeOnEscape !== !1) {
@@ -196,7 +308,7 @@ function K(e) {
 				return;
 			}
 			if (t.key !== "Tab" || !v) return;
-			let n = [...v.querySelectorAll(G)].filter((e) => !e.hidden && e.getAttribute("aria-hidden") !== "true");
+			let n = [...v.querySelectorAll(J)].filter((e) => !e.hidden && e.getAttribute("aria-hidden") !== "true");
 			if (n.length === 0) {
 				t.preventDefault(), v.focus();
 				return;
@@ -212,7 +324,7 @@ function K(e) {
 			return l();
 		},
 		get children() {
-			var t = m(H), n = t.firstChild, r = n.firstChild, a = r.nextSibling, [o, l] = h(a.nextSibling), d = o.nextSibling, [x, S] = h(d.nextSibling), C = x.nextSibling, [T, E] = h(C.nextSibling);
+			var t = m(de), n = t.firstChild, r = n.firstChild, a = r.nextSibling, [o, l] = h(a.nextSibling), d = o.nextSibling, [x, S] = h(d.nextSibling), C = x.nextSibling, [T, E] = h(C.nextSibling);
 			t.$$pointerdown = (t) => {
 				t.target === t.currentTarget && e.closeOnOutside !== !1 && f(!1);
 			};
@@ -220,13 +332,13 @@ function K(e) {
 			return typeof D == "function" ? w(D, n) : v = n, g(r, () => e.title), g(n, (() => {
 				var t = _(() => !!e.description);
 				return () => t() && (() => {
-					var t = m(U);
+					var t = m(fe);
 					return g(t, () => e.description), p(() => b(t, "id", c())), t;
 				})();
 			})(), o, l), g(n, () => e.children, x, S), g(n, (() => {
 				var t = _(() => !!e.actions);
 				return () => t() && (() => {
-					var t = m(W);
+					var t = m(pe);
 					return g(t, () => e.actions), t;
 				})();
 			})(), T, E), p((t) => {
@@ -245,8 +357,8 @@ function K(e) {
 f(["pointerdown"]);
 //#endregion
 //#region src/icon.tsx
-var q = /*#__PURE__*/ C("<svg><!$><!/><g>"), J = /*#__PURE__*/ C("<title>");
-function ae(e) {
+var he = /*#__PURE__*/ C("<svg><!$><!/><g>"), ge = /*#__PURE__*/ C("<title>");
+function Y(e) {
 	let [t, n] = c(e, [
 		"name",
 		"label",
@@ -255,7 +367,7 @@ function ae(e) {
 		"class"
 	]), r = () => E[t.name], i = () => t.directional ?? T.mirrorInRtl.includes(t.name);
 	return (() => {
-		var e = m(q), a = e.firstChild, [o, s] = h(a.nextSibling), c = o.nextSibling;
+		var e = m(he), a = e.firstChild, [o, s] = h(a.nextSibling), c = o.nextSibling;
 		return S(e, v(n, {
 			get class() {
 				return O(i() && T.cssClass, t.class);
@@ -288,20 +400,65 @@ function ae(e) {
 		}), !0, !0), g(e, (() => {
 			var e = _(() => !!t.label);
 			return () => e() && (() => {
-				var e = m(J);
+				var e = m(ge);
 				return g(e, () => t.label), e;
 			})();
 		})(), o, s), p(() => x(c, "innerHTML", r().body)), y(), e;
 	})();
 }
 //#endregion
+//#region src/status-pill.tsx
+var _e = /*#__PURE__*/ C("<code>"), ve = /*#__PURE__*/ C("<span>");
+function ye(e) {
+	let n = new Set(e.openDomains ?? []);
+	return function(r) {
+		let i = () => e.tones[r.domain]?.[r.value], a = () => e.label(r.domain, r.value, r.locale), o = () => !!(i() && a()), s = () => {
+			let e = i();
+			if (!e) throw Error(`StatusPill: no tone for ${r.domain}.${r.value}`);
+			let t = a();
+			if (!t) throw Error(`StatusPill: no label for ${r.domain}.${r.value}`);
+			return {
+				tone: e,
+				text: t
+			};
+		};
+		return d(t, {
+			get when() {
+				return o() || !n.has(r.domain);
+			},
+			get fallback() {
+				return (() => {
+					var e = m(_e);
+					return g(e, () => r.value), p(() => b(e, "data-status", `${r.domain}.${r.value}`)), e;
+				})();
+			},
+			get children() {
+				return (() => {
+					let e = s();
+					return (() => {
+						var t = m(ve);
+						return g(t, () => e.text), p((n) => {
+							var i = e.tone === "neutral" ? "dds-badge" : `dds-badge dds-badge--${e.tone}`, a = `${r.domain}.${r.value}`, o = e.tone;
+							return i !== n.e && u(t, n.e = i), a !== n.t && b(t, "data-status", n.t = a), o !== n.a && b(t, "data-tone", n.a = o), n;
+						}, {
+							e: void 0,
+							t: void 0,
+							a: void 0
+						}), t;
+					})();
+				})();
+			}
+		});
+	};
+}
+//#endregion
 //#region src/tabs.tsx
-var Y = /*#__PURE__*/ C("<div>"), oe = /*#__PURE__*/ C("<button>"), X = n(), Z = () => {
-	let e = l(X);
+var X = /*#__PURE__*/ C("<div>"), be = /*#__PURE__*/ C("<button>"), Z = n(), Q = () => {
+	let e = l(Z);
 	if (!e) throw Error("Tab components must be rendered inside <Tabs>");
 	return e;
 };
-function se(e) {
+function xe(e) {
 	let t = a(), n = () => e.id ?? `dds-tabs-${t}`, [r, i] = D({
 		value: () => e.value,
 		defaultValue: e.defaultValue,
@@ -320,15 +477,15 @@ function se(e) {
 		tabId: (e) => `${n()}-tab-${e}`,
 		panelId: (e) => `${n()}-panel-${e}`
 	};
-	return d(X.Provider, {
+	return d(Z.Provider, {
 		value: s,
 		get children() {
 			return e.children;
 		}
 	});
 }
-function Q(e) {
-	let t = Z(), [n, r] = c(e, [
+function Se(e) {
+	let t = Q(), [n, r] = c(e, [
 		"class",
 		"children",
 		"onKeyDown"
@@ -349,7 +506,7 @@ function Q(e) {
 		s && (s.element.focus(), t.setValue(s.value));
 	};
 	return (() => {
-		var e = m(Y);
+		var e = m(X);
 		return S(e, v(r, {
 			get class() {
 				return O("dds-tabs", n.class);
@@ -362,8 +519,8 @@ function Q(e) {
 		}), !1, !0), g(e, () => n.children), y(), e;
 	})();
 }
-function ce(e) {
-	let t = Z(), [n, r] = c(e, [
+function Ce(e) {
+	let t = Q(), [n, r] = c(e, [
 		"value",
 		"class",
 		"children",
@@ -378,7 +535,7 @@ function ce(e) {
 		});
 		o(e);
 	}), (() => {
-		var e = m(oe), a = i;
+		var e = m(be), a = i;
 		return typeof a == "function" ? w(a, e) : i = e, S(e, v(r, {
 			get id() {
 				return t.tabId(n.value);
@@ -406,14 +563,14 @@ function ce(e) {
 		}), !1, !0), g(e, () => n.children), y(), e;
 	})();
 }
-function le(e) {
-	let t = Z(), [n, r] = c(e, [
+function we(e) {
+	let t = Q(), [n, r] = c(e, [
 		"value",
 		"class",
 		"children"
 	]);
 	return (() => {
-		var e = m(Y);
+		var e = m(X);
 		return S(e, v(r, {
 			get id() {
 				return t.panelId(n.value);
@@ -434,8 +591,8 @@ function le(e) {
 }
 //#endregion
 //#region src/toast.tsx
-var ue = /*#__PURE__*/ C("<div aria-live=polite aria-relevant=\"additions removals\">"), de = /*#__PURE__*/ C("<div><span></span><!$><!/>"), fe = /*#__PURE__*/ C("<button type=button class=\"dds-iconbtn dds-iconbtn--sm\">×"), $ = n();
-function pe(t) {
+var Te = /*#__PURE__*/ C("<div aria-live=polite aria-relevant=\"additions removals\">"), Ee = /*#__PURE__*/ C("<div><span></span><!$><!/>"), De = /*#__PURE__*/ C("<button type=button class=\"dds-iconbtn dds-iconbtn--sm\">×"), $ = n();
+function Oe(t) {
 	let [n, r] = i([]), a = /* @__PURE__ */ new Map(), s = 0, c = (e) => {
 		let t = a.get(e);
 		t && clearTimeout(t), a.delete(e), r((t) => t.filter((t) => t.id !== e));
@@ -459,17 +616,17 @@ function pe(t) {
 		value: l,
 		get children() {
 			return [_(() => t.children), (() => {
-				var r = m(ue);
+				var r = m(Te);
 				return g(r, d(e, {
 					get each() {
 						return n();
 					},
 					children: (e) => (() => {
-						var n = m(de), r = n.firstChild, i = r.nextSibling, [a, o] = h(i.nextSibling);
+						var n = m(Ee), r = n.firstChild, i = r.nextSibling, [a, o] = h(i.nextSibling);
 						return g(r, () => e.message), g(n, (() => {
 							var n = _(() => !!t.dismissLabel);
 							return () => n() ? (() => {
-								var n = m(fe);
+								var n = m(De);
 								return n.$$click = () => c(e.id), p(() => b(n, "aria-label", typeof t.dismissLabel == "function" ? t.dismissLabel(e) : t.dismissLabel)), y(), n;
 							})() : null;
 						})(), a, o), p((t) => {
@@ -485,7 +642,7 @@ function pe(t) {
 		}
 	});
 }
-function me() {
+function ke() {
 	let e = l($);
 	if (!e) throw Error("useToast must be called inside <ToastProvider>");
 	return e;
@@ -493,8 +650,8 @@ function me() {
 f(["click"]);
 //#endregion
 //#region src/tooltip.tsx
-var he = /*#__PURE__*/ C("<span><!$><!/><span class=dds-tooltip__bubble role=tooltip>");
-function ge(e) {
+var Ae = /*#__PURE__*/ C("<span><!$><!/><span class=dds-tooltip__bubble role=tooltip>");
+function je(e) {
 	let t = a(), n = () => e.id ?? `dds-tooltip-${t}`, [r, i] = D({
 		value: () => e.open,
 		defaultValue: e.defaultOpen ?? !1,
@@ -507,7 +664,7 @@ function ge(e) {
 		onPointerLeave: () => i(!1)
 	};
 	return (() => {
-		var t = m(he), i = t.firstChild, [a, s] = h(i.nextSibling), c = a.nextSibling;
+		var t = m(Ae), i = t.firstChild, [a, s] = h(i.nextSibling), c = a.nextSibling;
 		return g(t, () => e.children(o), a, s), g(c, () => e.content), p((i) => {
 			var a = O("dds-tooltip", e.class), o = n(), s = !r();
 			return a !== i.e && u(t, i.e = a), o !== i.t && b(c, "id", i.t = o), s !== i.a && x(c, "hidden", i.a = s), i;
@@ -519,6 +676,6 @@ function ge(e) {
 	})();
 }
 //#endregion
-export { P as Button, z as Checkbox, K as Dialog, I as Field, ae as Icon, F as IconButton, B as Radio, L as Select, V as Switch, ce as Tab, Q as TabList, le as TabPanel, se as Tabs, pe as ToastProvider, ge as Tooltip, D as createControllableSignal, me as useToast };
+export { z as Button, W as Checkbox, ue as ConsoleShell, me as Dialog, V as Field, Y as Icon, B as IconButton, ee as Radio, H as Select, te as Switch, Ce as Tab, Se as TabList, we as TabPanel, xe as Tabs, Oe as ToastProvider, je as Tooltip, D as createControllableSignal, ye as createStatusPill, ke as useToast };
 
 //# sourceMappingURL=index.js.map