@0001-labs/design-system-1 0.3.0-alpha.28 → 0.3.1

package/dist/react/context.js

@@ -54,15 +54,15 @@ export const ContextTrigger = forwardRef(function ContextTrigger({ asChild, disa
     }
     return h("span", { ...attributes, tabIndex: disabled ? -1 : 0 }, children);
 });
-export const ContextContent = forwardRef(function ContextContent({ children, placement, ...props }, ref) {
+export const ContextContent = forwardRef(function ContextContent({ children, placement, bar, anchor, ...props }, ref) {
     const state = useMenu();
     useCommitEffect(() => { state.menu.current?.renderNow(); });
     // Render the closed host so the source can continue listening to its trigger.
     // Open descendants unmount together, including nested menu state.
-    return h(MenuHost, { ...props, tag: state.nested ? "ds-select" : "ds-context", id: props.id ?? state.id, role: "menu", hidden: !state.open,
+    return h(MenuHost, { ...props, bar, tag: state.nested ? "ds-select" : "ds-context", id: props.id ?? state.id, role: "menu", hidden: !state.open,
         "data-slot": state.nested ? "context-sub-content" : "context-content",
-        open: state.open, trigger: state.trigger, anchor: state.trigger,
-        triggerMode: state.nested ? "submenu" : "context", placement: placement ?? (state.nested ? "right" : "bottom"),
+        open: state.open, trigger: state.trigger, anchor: bar ? anchor ?? null : state.trigger,
+        triggerMode: state.nested ? "submenu" : "context", placement: placement ?? (bar ? "top" : state.nested ? "right" : "bottom"),
         ref: (element) => { state.menu.current = element; setRef(ref, element); },
         onOpenChange: state.change, }, state.open ? children : null);
 });

package/dist/react/empty.d.ts

@@ -8,7 +8,7 @@ export type EmptyProps = Omit<HTMLAttributes<EmptyElement>, "title"> & {
     heading?: ReactNode;
     /** The line under the title; `children` take its place when given. */
     text?: ReactNode;
-    /** An icon from the library on the square above the title. */
+    /** An icon from the library inline before the title. */
     icon?: string;
     /** The buttons or links that fill the place, on one row. */
     actions?: ReactNode;
@@ -24,7 +24,7 @@ export declare const Empty: import("react").ForwardRefExoticComponent<Omit<HTMLA
     heading?: ReactNode;
     /** The line under the title; `children` take its place when given. */
     text?: ReactNode;
-    /** An icon from the library on the square above the title. */
+    /** An icon from the library inline before the title. */
     icon?: string;
     /** The buttons or links that fill the place, on one row. */
     actions?: ReactNode;

package/dist/react/empty.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"empty.d.ts","sourceRoot":"","sources":["../../DS1/react/empty.ts"],"names":[],"mappings":"AAAA;;uDAEuD;AACvD,OAAO,EAAkC,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5F,OAAO,KAAK,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEhE,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,GAAG;IACrE,sFAAsF;IACtF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sEAAsE;IACtE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oFAAoF;IACpF,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAKF,eAAO,MAAM,KAAK;IAnBhB,sFAAsF;cAC5E,SAAS;IACnB,sEAAsE;WAC/D,SAAS;IAChB,8DAA8D;WACvD,MAAM;IACb,4DAA4D;cAClD,SAAS;IACnB,2DAA2D;eAChD,OAAO;IAClB,oDAAoD;YAC5C,MAAM;IACd,oFAAoF;WAC7E,MAAM;gDAab,CAAC"}
+{"version":3,"file":"empty.d.ts","sourceRoot":"","sources":["../../DS1/react/empty.ts"],"names":[],"mappings":"AAAA;;uDAEuD;AACvD,OAAO,EAAkC,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5F,OAAO,KAAK,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEhE,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,GAAG;IACrE,sFAAsF;IACtF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sEAAsE;IACtE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oFAAoF;IACpF,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAKF,eAAO,MAAM,KAAK;IAnBhB,sFAAsF;cAC5E,SAAS;IACnB,sEAAsE;WAC/D,SAAS;IAChB,wDAAwD;WACjD,MAAM;IACb,4DAA4D;cAClD,SAAS;IACnB,2DAA2D;eAChD,OAAO;IAClB,oDAAoD;YAC5C,MAAM;IACd,oFAAoF;WAC7E,MAAM;gDAab,CAAC"}

package/dist/react/empty.js

@@ -4,5 +4,5 @@
 import { createElement as h, forwardRef } from "react";
 const title = (content) => content == null || content === false || content === "" ? null : h("span", { slot: "heading" }, content);
 export const Empty = forwardRef(function Empty({ heading, text, icon, actions, centered, level, tone, children, ...props }, ref) {
-    return h("ds-empty", { ...props, icon, centered: centered || undefined, level, tone, ref }, title(heading), children ?? text, actions == null || actions === false ? null : h("div", { slot: "actions", style: { display: "contents" } }, actions));
+    return h("ds-empty", { ...props, icon, centered: centered ?? true, level, tone, ref }, title(heading), children ?? text, actions == null || actions === false ? null : h("div", { slot: "actions", style: { display: "contents" } }, actions));
 });

package/dist/react/footer.d.ts

@@ -1,13 +1,13 @@
 import { type HTMLAttributes } from "react";
 import type { Footer as FooterElement } from "../4-page/ds-footer";
-export type { FooterColumn, FooterLink, FooterPreference } from "../4-page/ds-footer";
-export type FooterProps = Omit<HTMLAttributes<FooterElement>, "columns"> & Partial<Pick<FooterElement, "brand" | "href" | "tagline" | "columns" | "label" | "owner" | "year" | "preferences" | "literal">>;
+export type { FooterColumn, FooterIcons, FooterLink, FooterPreference } from "../4-page/ds-footer";
+export type FooterProps = Omit<HTMLAttributes<FooterElement>, "columns" | "policies"> & Partial<Pick<FooterElement, "brand" | "href" | "tagline" | "columns" | "label" | "owner" | "year" | "policies" | "preferences" | "literal">>;
 /**
- * A site footer from data: `columns` is set as a property, so React passes
- * the array as it stands. A brand, preferences or legal line of the page's own
+ * A site footer from data: `columns` and `policies` are set as properties, so
+ * React passes the arrays as they stand. A brand, preferences or legal line of the page's own
  * take `slot="brand"`, `slot="preferences"` and `slot="legal"`. A page that
  * must render its links on the server writes the `.ds-footer` classes instead.
  * Browser-only registration stays in the product's runtime entry for SSR.
  */
-export declare const Footer: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<FooterElement>, "columns"> & Partial<Pick<FooterElement, "label" | "href" | "literal" | "columns" | "year" | "preferences" | "brand" | "tagline" | "owner">> & import("react").RefAttributes<FooterElement>>;
+export declare const Footer: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<FooterElement>, "columns" | "policies"> & Partial<Pick<FooterElement, "label" | "href" | "literal" | "columns" | "year" | "preferences" | "brand" | "tagline" | "owner" | "policies">> & import("react").RefAttributes<FooterElement>>;
 //# sourceMappingURL=footer.d.ts.map

package/dist/react/footer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../DS1/react/footer.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEnE,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACtF,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC,GACtE,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,aAAa,GAAG,SAAS,CAAC,CAAC,CAAC;AAClI;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,4QAGjB,CAAC"}
+{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../DS1/react/footer.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEnE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACnG,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC,GACnF,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,aAAa,GAAG,SAAS,CAAC,CAAC,CAAC;AAC/I;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,sSAGjB,CAAC"}

package/dist/react/footer.js

@@ -1,7 +1,7 @@
 import { createElement, forwardRef } from "react";
 /**
- * A site footer from data: `columns` is set as a property, so React passes
- * the array as it stands. A brand, preferences or legal line of the page's own
+ * A site footer from data: `columns` and `policies` are set as properties, so
+ * React passes the arrays as they stand. A brand, preferences or legal line of the page's own
  * take `slot="brand"`, `slot="preferences"` and `slot="legal"`. A page that
  * must render its links on the server writes the `.ds-footer` classes instead.
  * Browser-only registration stays in the product's runtime entry for SSR.

package/dist/react/header.d.ts

@@ -1,6 +1,6 @@
 import { type HTMLAttributes } from "react";
 import type { Header as HeaderElement } from "../4-page/ds-header";
-export type HeaderProps = HTMLAttributes<HeaderElement> & Partial<Pick<HeaderElement, "brand" | "href" | "label" | "literal" | "sticky">>;
+export type HeaderProps = HTMLAttributes<HeaderElement> & Partial<Pick<HeaderElement, "variant" | "brand" | "href" | "label" | "literal" | "sticky">>;
 /**
  * A site header. Its navigation is the children: `<a href>` links, in the
  * light DOM so they render on the server; actions take `slot="actions"`, a
@@ -8,5 +8,5 @@ export type HeaderProps = HTMLAttributes<HeaderElement> & Partial<Pick<HeaderEle
  * `IntrinsicElements` entry of its own for `ds-header`. Browser-only
  * registration stays in the product's runtime entry for SSR.
  */
-export declare const Header: import("react").ForwardRefExoticComponent<HTMLAttributes<HeaderElement> & Partial<Pick<HeaderElement, "label" | "href" | "literal" | "sticky" | "brand">> & import("react").RefAttributes<HeaderElement>>;
+export declare const Header: import("react").ForwardRefExoticComponent<HTMLAttributes<HeaderElement> & Partial<Pick<HeaderElement, "label" | "href" | "literal" | "variant" | "sticky" | "brand">> & import("react").RefAttributes<HeaderElement>>;
 //# sourceMappingURL=header.d.ts.map

package/dist/react/header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../DS1/react/header.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEnE,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,aAAa,CAAC,GACrD,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC;AAClF;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,2MAEjB,CAAC"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../DS1/react/header.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEnE,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,aAAa,CAAC,GACrD,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC;AAC9F;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,uNAEjB,CAAC"}

package/dist/react/message.d.ts

@@ -6,6 +6,8 @@ import type { Message as MessageElement, MessageTone } from "../2-core/ds-messag
 export type { MessageTone } from "../2-core/ds-message";
 export type MessageProps = Omit<HTMLAttributes<MessageElement>, "title"> & {
     /** The mark's colour and icon; danger also colours the words. Neutral by default. */
+    /** Stable diagnostic for a real operation failure, independent of colour. */
+    failure?: import("../0-face/failures").Failure;
     expand?: boolean;
     visibleToasts?: number;
     richColors?: boolean;
@@ -47,6 +49,8 @@ export type MessageProps = Omit<HTMLAttributes<MessageElement>, "title"> & {
 };
 export declare const Message: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<MessageElement>, "title"> & {
     /** The mark's colour and icon; danger also colours the words. Neutral by default. */
+    /** Stable diagnostic for a real operation failure, independent of colour. */
+    failure?: import("../0-face/failures").Failure;
     expand?: boolean;
     visibleToasts?: number;
     richColors?: boolean;

package/dist/react/message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../DS1/react/message.ts"],"names":[],"mappings":"AAAA;;mFAEmF;AACnF,OAAO,EAAsE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAChI,OAAO,KAAK,EAAE,OAAO,IAAI,cAAc,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnF,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IACzE,qFAAqF;IACrF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,WAAW,GAAG,KAAK,CAAC;IAC3D,4BAA4B;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,uBAAuB,EAAE,aAAa,CAAC;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,iCAAiC;IACjC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sEAAsE;IACtE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wFAAwF;IACxF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;iDAC6C;IAC7C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAMF,eAAO,MAAM,OAAO;IA7ClB,qFAAqF;aAC5E,OAAO;oBACA,MAAM;iBACT,OAAO;gBACR,OAAO;YACX,MAAM;iBACD,MAAM;WACZ,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,WAAW,GAAG,KAAK;IAC1D,4BAA4B;UACtB,MAAM;IACZ,wEAAwE;YAChE,MAAM;IACd,mEAAmE;aAC1D,MAAM;IACf,yDAAyD;WAClD,MAAM;IACb,yEAAyE;eAC9D,MAAM;IACjB,sDAAsD;cAC5C,OAAO;eACN,OAAO,uBAAuB,EAAE,aAAa;eAC7C,MAAM;kBACH,OAAO;WACd,WAAW;IAClB,iCAAiC;cACvB,SAAS;IACnB,sDAAsD;WAC/C,SAAS;IAChB,2DAA2D;WACpD,MAAM;IACb,mDAAmD;cACzC,SAAS;IACnB,sEAAsE;kBACxD,OAAO;IACrB,wFAAwF;aAC/E,OAAO;IAChB;iDAC6C;gBACjC,MAAM,IAAI;kDAqCtB,CAAC;AAEH,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../DS1/react/message.ts"],"names":[],"mappings":"AAAA;;mFAEmF;AACnF,OAAO,EAAsE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAChI,OAAO,KAAK,EAAE,OAAO,IAAI,cAAc,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnF,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IACzE,qFAAqF;IACrF,6EAA6E;IAC7E,OAAO,CAAC,EAAE,OAAO,oBAAoB,EAAE,OAAO,CAAC;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,WAAW,GAAG,KAAK,CAAC;IAC3D,4BAA4B;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,uBAAuB,EAAE,aAAa,CAAC;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,iCAAiC;IACjC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sEAAsE;IACtE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wFAAwF;IACxF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;iDAC6C;IAC7C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAMF,eAAO,MAAM,OAAO;IA/ClB,qFAAqF;IACrF,6EAA6E;cACnE,OAAO,oBAAoB,EAAE,OAAO;aACrC,OAAO;oBACA,MAAM;iBACT,OAAO;gBACR,OAAO;YACX,MAAM;iBACD,MAAM;WACZ,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,WAAW,GAAG,KAAK;IAC1D,4BAA4B;UACtB,MAAM;IACZ,wEAAwE;YAChE,MAAM;IACd,mEAAmE;aAC1D,MAAM;IACf,yDAAyD;WAClD,MAAM;IACb,yEAAyE;eAC9D,MAAM;IACjB,sDAAsD;cAC5C,OAAO;eACN,OAAO,uBAAuB,EAAE,aAAa;eAC7C,MAAM;kBACH,OAAO;WACd,WAAW;IAClB,iCAAiC;cACvB,SAAS;IACnB,sDAAsD;WAC/C,SAAS;IAChB,2DAA2D;WACpD,MAAM;IACb,mDAAmD;cACzC,SAAS;IACnB,sEAAsE;kBACxD,OAAO;IACrB,wFAAwF;aAC/E,OAAO;IAChB;iDAC6C;gBACjC,MAAM,IAAI;kDAqCtB,CAAC;AAEH,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,SAAS,CAAC"}

package/dist/react/message.js

@@ -4,7 +4,7 @@
 import { createElement as h, forwardRef, useEffect, useLayoutEffect, useRef } from "react";
 const useCommitEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 const title = (content) => content == null || content === false || content === "" ? null : h("span", { slot: "heading" }, content);
-export const Message = forwardRef(function Message({ expand, visibleToasts, richColors, contained, label, closeLabel, form, position, duration, closeButton, tone, heading, text, icon, actions, dismissible, banner, onDismiss, src, appId, appUrl, open, remember, preview, children, ...props }, ref) {
+export const Message = forwardRef(function Message({ failure, expand, visibleToasts, richColors, contained, label, closeLabel, form, position, duration, closeButton, tone, heading, text, icon, actions, dismissible, banner, onDismiss, src, appId, appUrl, open, remember, preview, children, ...props }, ref) {
     const host = useRef(null);
     useCommitEffect(() => {
         const element = host.current;
@@ -21,7 +21,7 @@ export const Message = forwardRef(function Message({ expand, visibleToasts, rich
     });
     // The live region is in the markup from the first render, on the server too.
     return h("ds-message", {
-        expand: expand || undefined, "visible-toasts": visibleToasts, "rich-colors": richColors || undefined, contained: contained || undefined, label, "close-label": closeLabel,
+        failure, expand: expand || undefined, "visible-toasts": visibleToasts, "rich-colors": richColors || undefined, contained: contained || undefined, label, "close-label": closeLabel,
         form, position, duration, "close-button": closeButton || undefined,
         src, "app-id": appId, "app-url": appUrl, open, remember, preview: preview || undefined,
         role: form === "toast" ? "presentation" : form === "app" ? "region" : tone === "danger" ? "alert" : "status",

package/dist/react/number.d.ts

@@ -0,0 +1,53 @@
+/** React binding only. ds-number owns the field and all of its behaviour. */
+import { type HTMLAttributes } from "react";
+import type { NumberField as NumberElement } from "../2-core/ds-number";
+export type { NumberElement };
+export type NumberFieldProps = Omit<HTMLAttributes<NumberElement>, "onChange" | "onInput" | "defaultValue"> & {
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    bigStep?: number;
+    places?: number;
+    /** What a double-click on the lead puts back. */
+    defaultValue?: number;
+    label?: string;
+    icon?: string;
+    unit?: string;
+    /** Width in squares, four by default. */
+    width?: number;
+    /** `value` makes the whole field the handle, dragged up and down. */
+    drag?: "lead" | "value";
+    name?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** While a drag moves the value. */
+    onInput?: (value: number) => void;
+    /** When a value is taken: a drag's end, Enter, leaving the field, an arrow. */
+    onChange?: (value: number) => void;
+};
+export declare const NumberField: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<NumberElement>, "defaultValue" | "onChange" | "onInput"> & {
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    bigStep?: number;
+    places?: number;
+    /** What a double-click on the lead puts back. */
+    defaultValue?: number;
+    label?: string;
+    icon?: string;
+    unit?: string;
+    /** Width in squares, four by default. */
+    width?: number;
+    /** `value` makes the whole field the handle, dragged up and down. */
+    drag?: "lead" | "value";
+    name?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** While a drag moves the value. */
+    onInput?: (value: number) => void;
+    /** When a value is taken: a drag's end, Enter, leaving the field, an arrow. */
+    onChange?: (value: number) => void;
+} & import("react").RefAttributes<NumberElement>>;
+//# sourceMappingURL=number.d.ts.map

package/dist/react/number.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number.d.ts","sourceRoot":"","sources":["../../DS1/react/number.ts"],"names":[],"mappings":"AAAA,6EAA6E;AAC7E,OAAO,EAAqE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAC/G,OAAO,KAAK,EAAE,WAAW,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACxE,YAAY,EAAE,aAAa,EAAE,CAAC;AAC9B,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,cAAc,CAAC,GAAG;IAC5G,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,WAAW;WAxBf,MAAM;UACP,MAAM;UACN,MAAM;WACL,MAAM;cACH,MAAM;aACP,MAAM;IACf,iDAAiD;mBAClC,MAAM;YACb,MAAM;WACP,MAAM;WACN,MAAM;IACb,yCAAyC;YACjC,MAAM;IACd,qEAAqE;WAC9D,MAAM,GAAG,OAAO;WAChB,MAAM;eACF,OAAO;eACP,OAAO;IAClB,oCAAoC;cAC1B,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IACjC,+EAA+E;eACpE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;iDA0BlC,CAAC"}

package/dist/react/number.js

@@ -0,0 +1,25 @@
+/** React binding only. ds-number owns the field and all of its behaviour. */
+import { createElement, forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+export const NumberField = forwardRef(function NumberField({ value, min, max, step, bigStep, places, defaultValue, label, icon, unit, width, drag, name, disabled, readOnly, onInput, onChange, ...rest }, ref) {
+    const element = useRef(null);
+    useImperativeHandle(ref, () => element.current, []);
+    const handlers = useRef({ onInput, onChange });
+    handlers.current = { onInput, onChange };
+    useEffect(() => {
+        const node = element.current;
+        if (!node)
+            return;
+        const input = () => handlers.current.onInput?.(node.value);
+        const change = () => handlers.current.onChange?.(node.value);
+        node.addEventListener("input", input);
+        node.addEventListener("change", change);
+        return () => { node.removeEventListener("input", input); node.removeEventListener("change", change); };
+    }, []);
+    useEffect(() => {
+        const node = element.current;
+        if (!node)
+            return;
+        Object.assign(node, { value, min, max, step: step ?? 1, bigStep, places, defaultValue, label: label ?? "", icon: icon ?? "", unit: unit ?? "", width: width ?? 4, dragMode: drag ?? "lead", name: name ?? "", disabled: !!disabled, readonly: !!readOnly });
+    }, [value, min, max, step, bigStep, places, defaultValue, label, icon, unit, width, drag, name, disabled, readOnly]);
+    return createElement("ds-number", { ...rest, ref: element });
+});

package/dist/react/page.d.ts

@@ -7,5 +7,5 @@ export type PageProps = HTMLAttributes<PageElement> & Partial<Pick<PageElement,
  * `drawer` folds the navigation into a drawer on a narrow page.
  * Browser-only registration stays in the product's runtime entry for SSR.
  */
-export declare const Page: import("react").ForwardRefExoticComponent<HTMLAttributes<PageElement> & Partial<Pick<PageElement, "fill" | "view" | "layout" | "divided" | "measure" | "drawer" | "drawerLabel">> & import("react").RefAttributes<PageElement>>;
+export declare const Page: import("react").ForwardRefExoticComponent<HTMLAttributes<PageElement> & Partial<Pick<PageElement, "fill" | "view" | "measure" | "layout" | "divided" | "drawer" | "drawerLabel">> & import("react").RefAttributes<PageElement>>;
 //# sourceMappingURL=page.d.ts.map

package/dist/react/sidebar.d.ts

@@ -14,6 +14,8 @@ export type SidebarProps = Omit<HTMLAttributes<SidebarElement>, "onSelect" | "on
     empty?: string;
     /** A tree of nested things instead of navigation. */
     tree?: boolean;
+    /** Navigation eight squares wide, each row hugging its words. */
+    narrow?: boolean;
     disclosurePosition?: "start" | "end";
     expandIcon?: string;
     collapseIcon?: string;
@@ -37,6 +39,8 @@ export declare const Sidebar: import("react").ForwardRefExoticComponent<Omit<HTM
     empty?: string;
     /** A tree of nested things instead of navigation. */
     tree?: boolean;
+    /** Navigation eight squares wide, each row hugging its words. */
+    narrow?: boolean;
     disclosurePosition?: "start" | "end";
     expandIcon?: string;
     collapseIcon?: string;

package/dist/react/sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../DS1/react/sidebar.ts"],"names":[],"mappings":"AAAA;;;yDAGyD;AACzD,OAAO,EAAsE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAChH,OAAO,KAAK,EAAE,OAAO,IAAI,cAAc,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEtG,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,CAAC;AAE/C,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG;IACzF,0EAA0E;IAC1E,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,kBAAkB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC3C,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD,gDAAgD;IAChD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,sFAAsF;IACtF,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD,CAAC;AAIF,eAAO,MAAM,OAAO;IAxBlB,0EAA0E;WACnE,WAAW,EAAE;IACpB,sDAAsD;YAC9C,MAAM;IACd,+BAA+B;YACvB,MAAM;IACd,qDAAqD;WAC9C,OAAO;yBACO,OAAO,GAAG,KAAK;iBAAe,MAAM;mBAC1C,MAAM;kBACP,OAAO;aACZ,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI;IAC1C,4CAA4C;eACjC,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI;IAClD,gDAAgD;eACrC,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI;IAC/B,sFAAsF;iBACzE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI;IACjC,sCAAsC;eAC3B,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI;kDAyC/C,CAAC"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../DS1/react/sidebar.ts"],"names":[],"mappings":"AAAA;;;yDAGyD;AACzD,OAAO,EAAsE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAChH,OAAO,KAAK,EAAE,OAAO,IAAI,cAAc,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEtG,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,CAAC;AAE/C,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG;IACzF,0EAA0E;IAC1E,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iEAAiE;IACjE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kBAAkB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC3C,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD,gDAAgD;IAChD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,sFAAsF;IACtF,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD,CAAC;AAIF,eAAO,MAAM,OAAO;IA1BlB,0EAA0E;WACnE,WAAW,EAAE;IACpB,sDAAsD;YAC9C,MAAM;IACd,+BAA+B;YACvB,MAAM;IACd,qDAAqD;WAC9C,OAAO;IACd,iEAAiE;aACxD,OAAO;yBACK,OAAO,GAAG,KAAK;iBAAe,MAAM;mBAC1C,MAAM;kBACP,OAAO;aACZ,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI;IAC1C,4CAA4C;eACjC,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI;IAClD,gDAAgD;eACrC,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI;IAC/B,sFAAsF;iBACzE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI;IACjC,sCAAsC;eAC3B,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI;kDAyC/C,CAAC"}

package/dist/react/sidebar.js

@@ -4,7 +4,7 @@
  * server the element renders empty and fills on load. */
 import { createElement as h, forwardRef, useEffect, useLayoutEffect, useRef } from "react";
 const useCommitEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
-export const Sidebar = forwardRef(function Sidebar({ items, label, empty, tree, expandIcon, collapseIcon, disclosurePosition, reorderable, onMove, onToggle, onSelect, onActivate, onAction, ...props }, ref) {
+export const Sidebar = forwardRef(function Sidebar({ items, label, empty, tree, narrow, expandIcon, collapseIcon, disclosurePosition, reorderable, onMove, onToggle, onSelect, onActivate, onAction, ...props }, ref) {
     const host = useRef(null);
     useCommitEffect(() => {
         const element = host.current;
@@ -39,7 +39,7 @@ export const Sidebar = forwardRef(function Sidebar({ items, label, empty, tree,
             element.removeEventListener("sidebar-action", action);
         };
     });
-    return h("ds-sidebar", { ...props, label, empty, tree: tree || undefined,
+    return h("ds-sidebar", { ...props, label, empty, tree: tree || undefined, narrow: narrow || undefined,
         ref: (element) => { host.current = element; if (typeof ref === "function")
             ref(element);
         else if (ref)

package/dist/react/table-of-contents.d.ts

@@ -0,0 +1,19 @@
+/** Register the element in the browser before hydrating this property adapter. */
+import { type HTMLAttributes } from 'react';
+import type { TableOfContents as Element, TableOfContentsItem } from '../3-unit/ds-table-of-contents';
+export type { TableOfContentsItem };
+export type TableOfContentsProps = HTMLAttributes<Element> & {
+    items?: TableOfContentsItem[];
+    label?: string;
+    literal?: boolean;
+    target?: HTMLElement;
+    onSectionChange?: (href: string) => void;
+};
+export declare const TableOfContents: import("react").ForwardRefExoticComponent<HTMLAttributes<Element> & {
+    items?: TableOfContentsItem[];
+    label?: string;
+    literal?: boolean;
+    target?: HTMLElement;
+    onSectionChange?: (href: string) => void;
+} & import("react").RefAttributes<Element>>;
+//# sourceMappingURL=table-of-contents.d.ts.map

package/dist/react/table-of-contents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-of-contents.d.ts","sourceRoot":"","sources":["../../DS1/react/table-of-contents.ts"],"names":[],"mappings":"AAAA,kFAAkF;AAClF,OAAO,EAAiE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAC3G,OAAO,KAAK,EAAE,eAAe,IAAI,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACtG,YAAY,EAAE,mBAAmB,EAAE,CAAC;AACpC,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,CAAC,GAAG;IAC3D,KAAK,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IACjE,MAAM,CAAC,EAAE,WAAW,CAAC;IAAC,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAChE,CAAC;AAEF,eAAO,MAAM,eAAe;YAJlB,mBAAmB,EAAE;YAAU,MAAM;cAAY,OAAO;aACvD,WAAW;sBAAoB,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;2CAqB9D,CAAC"}

package/dist/react/table-of-contents.js

@@ -0,0 +1,28 @@
+/** Register the element in the browser before hydrating this property adapter. */
+import { createElement, forwardRef, useEffect, useLayoutEffect, useRef } from 'react';
+const useCommitEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+export const TableOfContents = forwardRef(function TableOfContents({ items, label, literal, target, onSectionChange, ...props }, ref) {
+    const host = useRef(null);
+    useCommitEffect(() => {
+        const element = host.current;
+        if (!element)
+            return;
+        element.items = items ?? [];
+        element.target = target;
+    }, [items, target]);
+    useCommitEffect(() => {
+        const element = host.current;
+        if (!element)
+            return;
+        const changed = (event) => onSectionChange?.(event.detail.href);
+        element.addEventListener('toc-change', changed);
+        return () => element.removeEventListener('toc-change', changed);
+    }, [onSectionChange]);
+    return createElement('ds-table-of-contents', { ...props, label, literal: literal ? '' : undefined, ref: (element) => {
+            host.current = element;
+            if (typeof ref === 'function')
+                ref(element);
+            else if (ref)
+                ref.current = element;
+        } });
+});