@0001-labs/design-system-1 0.3.0-alpha.13 → 0.3.0-alpha.14

package/dist/index.d.ts

@@ -13,45 +13,62 @@ export * from "./0-face/i18n";
 export * from "./0-face/languages";
 export * from "./0-face/language-routing";
 export * from "./0-face/translations-format";
+export * from "./0-face/format";
 export * from "./0-face/preferences";
 export * from "./0-face/pricing";
 export * from "./0-face/theme";
-export * from "./2-core/ds-banner";
+export * from "./0-face/keys";
+export * from "./0-face/sidebar";
 export * from "./2-core/ds-badge";
 export * from "./2-core/ds-button";
 export * from "./2-core/ds-checkbox";
 export * from "./2-core/ds-radio";
 export * from "./2-core/ds-switch";
-export * from "./2-core/ds-split";
 export * from "./2-core/ds-select";
 export * from "./2-core/ds-color";
 export * from "./2-core/ds-swatch";
 export * from "./2-core/ds-card";
 export * from "./2-core/ds-cycle";
-export * from "./2-core/ds-date";
+export * from "./2-core/ds-empty";
 export * from "./2-core/ds-gap";
 export * from "./2-core/ds-icon";
 export * from "./2-core/ds-input";
+export * from "./2-core/ds-kbd";
 export * from "./2-core/ds-file-picker";
-export * from "./2-core/ds-textarea";
 export * from "./2-core/ds-composer";
-export * from "./2-core/ds-language";
+export * from "./2-core/ds-notice";
+export * from "./2-core/ds-stat";
+export * from "./2-core/ds-progress";
 export * from "./2-core/ds-text";
+export * from "./2-core/ds-toast";
 export * from "./2-core/ds-tooltip";
 export * from "./3-unit/ds-accordion";
 export * from "./2-core/ds-avatar";
 export * from "./3-unit/ds-avatar-group";
+export * from "./3-unit/ds-calendar";
+export * from "./3-unit/ds-calendar-large";
+export * from "./3-unit/ds-carousel";
+export * from "./3-unit/ds-date-picker";
 export * from "./3-unit/ds-form";
 export * from "./3-unit/ds-list";
+export * from "./3-unit/ds-matrix";
 export * from "./3-unit/ds-row";
 export * from "./3-unit/ds-table";
 export * from "./4-page/ds-container";
 export * from "./4-page/ds-grid";
-export * from "./4-page/ds-layout";
+export * from "./4-page/ds-page";
+export * from "./4-page/ds-header";
+export * from "./4-page/ds-footer";
+export * from "./4-page/ds-document";
 export * from "./3-unit/ds-menu";
 export * from "./3-unit/ds-tabs";
 export * from "./4-page/ds-panel";
 export * from "./4-page/ds-dialog";
 export * from "./2-core/ds-token";
 export * from "./3-unit/ds-token-field";
+export * from "./3-unit/ds-sidebar";
+export * from "./2-core/ds-chart";
+export * from "./2-core/ds-spacing-handle";
+export * from "./2-core/ds-loading";
+export * from "./0-face/component-visibility";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../DS1/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAOH,OAAO,iBAAiB,CAAC;AAGzB,OAAO,eAAe,CAAC;AAMvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAM/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AAMpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAMlC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AAEnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AAEnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../DS1/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAOH,OAAO,iBAAiB,CAAC;AAGzB,OAAO,eAAe,CAAC;AAMvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AAMjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AAMpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAMlC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AAErC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AAEnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AAExC,cAAc,qBAAqB,CAAC;AAEpC,cAAc,mBAAmB,CAAC;AAElC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC"}

package/dist/index.js

@@ -21,33 +21,37 @@ export * from "./0-face/i18n";
 export * from "./0-face/languages";
 export * from "./0-face/language-routing";
 export * from "./0-face/translations-format";
+export * from "./0-face/format";
 export * from "./0-face/preferences";
 export * from "./0-face/pricing";
 export * from "./0-face/theme";
+export * from "./0-face/keys";
+export * from "./0-face/sidebar";
 // ============================================================================
 // 2-core: Core Components
 // ============================================================================
-export * from "./2-core/ds-banner";
 export * from "./2-core/ds-badge";
 export * from "./2-core/ds-button";
 export * from "./2-core/ds-checkbox";
 export * from "./2-core/ds-radio";
 export * from "./2-core/ds-switch";
-export * from "./2-core/ds-split";
 export * from "./2-core/ds-select";
 export * from "./2-core/ds-color";
 export * from "./2-core/ds-swatch";
 export * from "./2-core/ds-card";
 export * from "./2-core/ds-cycle";
-export * from "./2-core/ds-date";
+export * from "./2-core/ds-empty";
 export * from "./2-core/ds-gap";
 export * from "./2-core/ds-icon";
 export * from "./2-core/ds-input";
+export * from "./2-core/ds-kbd";
 export * from "./2-core/ds-file-picker";
-export * from "./2-core/ds-textarea";
 export * from "./2-core/ds-composer";
-export * from "./2-core/ds-language";
+export * from "./2-core/ds-notice";
+export * from "./2-core/ds-stat";
+export * from "./2-core/ds-progress";
 export * from "./2-core/ds-text";
+export * from "./2-core/ds-toast";
 export * from "./2-core/ds-tooltip";
 // ============================================================================
 // 3-unit: Composite Components
@@ -55,8 +59,13 @@ export * from "./2-core/ds-tooltip";
 export * from "./3-unit/ds-accordion";
 export * from "./2-core/ds-avatar";
 export * from "./3-unit/ds-avatar-group";
+export * from "./3-unit/ds-calendar";
+export * from "./3-unit/ds-calendar-large";
+export * from "./3-unit/ds-carousel";
+export * from "./3-unit/ds-date-picker";
 export * from "./3-unit/ds-form";
 export * from "./3-unit/ds-list";
+export * from "./3-unit/ds-matrix";
 export * from "./3-unit/ds-row";
 export * from "./3-unit/ds-table";
 // ============================================================================
@@ -64,10 +73,18 @@ export * from "./3-unit/ds-table";
 // ============================================================================
 export * from "./4-page/ds-container";
 export * from "./4-page/ds-grid";
-export * from "./4-page/ds-layout";
+export * from "./4-page/ds-page";
+export * from "./4-page/ds-header";
+export * from "./4-page/ds-footer";
+export * from "./4-page/ds-document";
 export * from "./3-unit/ds-menu";
 export * from "./3-unit/ds-tabs";
 export * from "./4-page/ds-panel";
 export * from "./4-page/ds-dialog";
 export * from "./2-core/ds-token";
 export * from "./3-unit/ds-token-field";
+export * from "./3-unit/ds-sidebar";
+export * from "./2-core/ds-chart";
+export * from "./2-core/ds-spacing-handle";
+export * from "./2-core/ds-loading";
+export * from "./0-face/component-visibility";

package/dist/react/avatar.d.ts

@@ -1,13 +1,9 @@
 import { type HTMLAttributes } from "react";
 import type { Avatar as AvatarElement } from "../2-core/ds-avatar";
-export type AvatarProps = Omit<HTMLAttributes<AvatarElement>, "children"> & Partial<Pick<AvatarElement, "label" | "initial" | "src" | "icon" | "shape" | "size" | "fit" | "mask" | "outlined" | "pending" | "plain" | "color">>;
+export type AvatarProps = Omit<HTMLAttributes<AvatarElement>, "children"> & Partial<Pick<AvatarElement, "label" | "initial" | "src" | "icon" | "shape" | "size" | "fit" | "mask" | "outlined" | "pending" | "plain" | "color" | "ink">>;
 /** Browser-only registration stays in the product's runtime entry for SSR. */
-export declare const Avatar: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<AvatarElement>, "children"> & Partial<Pick<AvatarElement, "label" | "mask" | "size" | "icon" | "fit" | "outlined" | "plain" | "color" | "initial" | "src" | "shape" | "pending">> & import("react").RefAttributes<AvatarElement>>;
-export type LogoProps = Omit<AvatarProps, "shape" | "size" | "fit" | "mask" | "plain"> & {
-    src: string;
-};
-/** A monochrome brand mark fitted into the page's image area. */
-export declare const Logo: import("react").ForwardRefExoticComponent<Omit<AvatarProps, "mask" | "size" | "fit" | "plain" | "shape"> & {
-    src: string;
-} & import("react").RefAttributes<AvatarElement>>;
+export declare const Avatar: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<AvatarElement>, "children"> & Partial<Pick<AvatarElement, "label" | "mask" | "size" | "color" | "icon" | "fit" | "outlined" | "plain" | "ink" | "initial" | "src" | "shape" | "pending">> & import("react").RefAttributes<AvatarElement>>;
+export type LogoProps = Omit<AvatarProps, "size" | "fit" | "mask" | "plain" | "shape">;
+/** A monochrome brand mark fitted into the page's image area; without `src`, its `initial`. */
+export declare const Logo: import("react").ForwardRefExoticComponent<LogoProps & import("react").RefAttributes<AvatarElement>>;
 //# sourceMappingURL=avatar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../DS1/react/avatar.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,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,UAAU,CAAC,GACvE,OAAO,CACL,IAAI,CACF,aAAa,EACX,OAAO,GACP,SAAS,GACT,KAAK,GACL,MAAM,GACN,OAAO,GACP,MAAM,GACN,KAAK,GACL,MAAM,GACN,UAAU,GACV,SAAS,GACT,OAAO,GACP,OAAO,CACV,CACF,CAAC;AACJ,8EAA8E;AAC9E,eAAO,MAAM,MAAM,iSAEjB,CAAC;AAEH,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC,GAAG;IACvF,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AACF,iEAAiE;AACjE,eAAO,MAAM,IAAI;SAHV,MAAM;iDAcX,CAAC"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../DS1/react/avatar.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,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,UAAU,CAAC,GACvE,OAAO,CACL,IAAI,CACF,aAAa,EACX,OAAO,GACP,SAAS,GACT,KAAK,GACL,MAAM,GACN,OAAO,GACP,MAAM,GACN,KAAK,GACL,MAAM,GACN,UAAU,GACV,SAAS,GACT,OAAO,GACP,OAAO,GACP,KAAK,CACR,CACF,CAAC;AACJ,8EAA8E;AAC9E,eAAO,MAAM,MAAM,ySAEjB,CAAC;AAEH,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC,CAAC;AACvF,+FAA+F;AAC/F,eAAO,MAAM,IAAI,qGAWf,CAAC"}

package/dist/react/avatar.js

@@ -3,11 +3,11 @@ import { createElement, forwardRef } from "react";
 export const Avatar = forwardRef(function Avatar(props, ref) {
     return createElement("ds-avatar", { ...props, ref });
 });
-/** A monochrome brand mark fitted into the page's image area. */
+/** A monochrome brand mark fitted into the page's image area; without `src`, its `initial`. */
 export const Logo = forwardRef(function Logo(props, ref) {
     return createElement("ds-avatar", {
         size: "fill",
-        shape: "square",
+        logo: true,
         fit: "contain",
         mask: true,
         plain: true,

package/dist/react/button-split.d.ts

@@ -0,0 +1,19 @@
+/** Controlled state for Button's split mode. The shared Button owns its face. */
+import { type CSSProperties, type ReactNode, type Ref } from "react";
+import type { Button as ButtonElement, SplitSegment } from "../2-core/ds-button";
+export type { SplitSegment };
+export interface SplitButtonProps<T extends string> {
+    split: true;
+    segments: ReadonlyArray<SplitSegment<T>>;
+    value?: T;
+    onPress: (value: T) => void;
+    label: string;
+    className?: string;
+    style?: CSSProperties;
+    disabled?: boolean;
+    compact?: boolean;
+}
+export declare function SplitButton<T extends string>({ segments, value, onPress, label, className, style, disabled, compact, forwardedRef }: SplitButtonProps<T> & {
+    forwardedRef?: Ref<ButtonElement>;
+}): ReactNode;
+//# sourceMappingURL=button-split.d.ts.map

package/dist/react/button-split.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-split.d.ts","sourceRoot":"","sources":["../../DS1/react/button-split.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,OAAO,EAAqD,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AACxH,OAAO,KAAK,EAAE,MAAM,IAAI,aAAa,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACjF,YAAY,EAAE,YAAY,EAAE,CAAC;AAE7B,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,MAAM;IAChD,KAAK,EAAE,IAAI,CAAC;IAAC,QAAQ,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;IAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACjE,OAAO,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtF,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CACvC;AACD,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,QAAgB,EAAE,OAAe,EAAE,YAAY,EAAE,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAAE,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,CAAA;CAAE,GAAG,SAAS,CAkB5N"}

package/dist/react/button-split.js

@@ -0,0 +1,35 @@
+/** Controlled state for Button's split mode. The shared Button owns its face. */
+import { createElement, useEffect, useLayoutEffect, useRef } from "react";
+const useCommitEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+export function SplitButton({ segments, value, onPress, label, className, style, disabled = false, compact = false, forwardedRef }) {
+    const ref = useRef(null);
+    useCommitEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        element.split = true;
+        element.segments = segments;
+        element.value = value ?? "";
+        element.actions = value === undefined;
+        element.disabled = disabled;
+        element.compact = compact;
+        element.literal = true;
+        const press = (event) => {
+            if (event.target !== element)
+                return;
+            if (event.type === "change")
+                event.preventDefault();
+            onPress(event.detail.value);
+        };
+        element.addEventListener("change", press);
+        element.addEventListener("press", press);
+        return () => { element.removeEventListener("change", press); element.removeEventListener("press", press); };
+    });
+    return createElement("ds-button", { ref: (element) => {
+            ref.current = element;
+            if (typeof forwardedRef === "function")
+                forwardedRef(element);
+            else if (forwardedRef)
+                forwardedRef.current = element;
+        }, split: true, "aria-label": label, className, style });
+}

package/dist/react/button.d.ts

@@ -1,13 +1,24 @@
 /** Native semantics and React events; the shared Lit element owns the face. */
-import { type AnchorHTMLAttributes, type ButtonHTMLAttributes } from "react";
+import { type AnchorHTMLAttributes, type ReactElement, type RefAttributes, type ButtonHTMLAttributes } from "react";
+import { type SplitButtonProps } from "./button-split";
+export type { SplitButtonProps, SplitSegment } from "./button-split";
 import type { Button as ButtonElement } from "../2-core/ds-button";
-export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & Partial<Pick<ButtonElement, "primary" | "secondary" | "active" | "choice" | "icon" | "wide" | "fit" | "danger" | "menuItem">>;
-export declare const Button: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & Partial<Pick<ButtonElement, "primary" | "secondary" | "active" | "choice" | "icon" | "wide" | "fit" | "danger" | "menuItem">> & import("react").RefAttributes<HTMLButtonElement>>;
-/** A real link: browser navigation, context menus and modifier clicks survive. */
-export type ButtonLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & Partial<Pick<ButtonElement, "primary" | "secondary" | "active" | "choice" | "icon" | "wide" | "fit" | "danger" | "menuItem">> & {
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & Partial<Pick<ButtonElement, "primary" | "secondary" | "active" | "choice" | "icon" | "wide" | "fixed" | "fit" | "danger" | "menuItem">>;
+export declare const Button: {
+    <const T extends string>(props: SplitButtonProps<T> & RefAttributes<ButtonElement>): ReactElement | null;
+    (props: ButtonProps & RefAttributes<HTMLButtonElement>): ReactElement | null;
+    displayName?: string;
+};
+/**
+ * A real link: browser navigation, context menus and modifier clicks survive.
+ * As `<ds-button href>`: `target="_blank"` gets `rel="noopener noreferrer"`
+ * unless `rel` is given, and a disabled link loses its `href` and `target`, is
+ * left out of the tab order and stays a link (`role="link"`, `aria-disabled`).
+ */
+export type ButtonLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & Partial<Pick<ButtonElement, "primary" | "secondary" | "active" | "choice" | "icon" | "wide" | "fixed" | "fit" | "danger" | "menuItem">> & {
     disabled?: boolean;
 };
-export declare const ButtonLink: import("react").ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & Partial<Pick<ButtonElement, "primary" | "secondary" | "active" | "choice" | "icon" | "wide" | "fit" | "danger" | "menuItem">> & {
+export declare const ButtonLink: import("react").ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & Partial<Pick<ButtonElement, "danger" | "icon" | "primary" | "secondary" | "active" | "choice" | "wide" | "fixed" | "fit" | "menuItem">> & {
     disabled?: boolean;
-} & import("react").RefAttributes<HTMLAnchorElement>>;
+} & RefAttributes<HTMLAnchorElement>>;
 //# sourceMappingURL=button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../DS1/react/button.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,OAAO,EAA6B,KAAK,oBAAoB,EAAE,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AACxG,OAAO,KAAK,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEnE,MAAM,MAAM,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAC/D,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC;AAEhI,eAAO,MAAM,MAAM,uQAyCjB,CAAC;AAEH,kFAAkF;AAClF,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GACnE,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,UAAU,CAAC,CAAC,GAAG;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAC,CAAC;AACvJ,eAAO,MAAM,UAAU;eADuH,OAAO;qDAUnJ,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../DS1/react/button.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,OAAO,EAA6B,KAAK,oBAAoB,EAAE,KAAK,YAAY,EAAE,KAAK,aAAa,EAAY,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AACzJ,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACpE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACrE,OAAO,KAAK,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEnE,MAAM,MAAM,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAC/D,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC;AAgD1I,eAAO,MAAM,MAAM,EAA+B;IAChD,CAAC,KAAK,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,aAAa,CAAC,GAAG,YAAY,GAAG,IAAI,CAAC;IACzG,CAAC,KAAK,EAAE,WAAW,GAAG,aAAa,CAAC,iBAAiB,CAAC,GAAG,YAAY,GAAG,IAAI,CAAC;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GACnE,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,UAAU,CAAC,CAAC,GAAG;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAC,CAAC;AACjK,eAAO,MAAM,UAAU;eADiI,OAAO;qCAa7J,CAAC"}

package/dist/react/button.js

@@ -1,6 +1,10 @@
 /** Native semantics and React events; the shared Lit element owns the face. */
 import { createElement, forwardRef } from "react";
-export const Button = forwardRef(function Button({ children, className, style, primary, secondary, active, choice, icon, wide, fit, danger, menuItem, disabled, hidden, type = "button", ...props }, ref) {
+import { SplitButton } from "./button-split";
+const ButtonControl = forwardRef(function Button(props, ref) {
+    if ("split" in props && props.split)
+        return createElement(SplitButton, { ...props, forwardedRef: ref });
+    const { children, className, style, primary, secondary, active, choice, icon, wide, fixed, fit, danger, menuItem, disabled, hidden, type = "button", ...nativeProps } = props;
     return createElement("ds-button", {
         control: "slotted",
         primary,
@@ -9,6 +13,7 @@ export const Button = forwardRef(function Button({ children, className, style, p
         choice,
         icon,
         wide,
+        fixed,
         fit,
         danger,
         menuItem,
@@ -16,10 +21,14 @@ export const Button = forwardRef(function Button({ children, className, style, p
         hidden,
         className,
         style,
-    }, createElement("button", { ...props, ref, type, disabled, hidden }, children));
+    }, createElement("button", { ...nativeProps, ref, type, disabled, hidden }, children));
 });
-export const ButtonLink = forwardRef(function ButtonLink({ children, className, style, primary, secondary, active, choice, icon, wide, fit, danger, menuItem, disabled, hidden, href, onClick, onAuxClick, tabIndex, ...props }, ref) {
-    return createElement("ds-button", { control: "slotted", primary, secondary, active, choice, icon, wide, fit, danger, menuItem, disabled, hidden, className, style }, createElement("a", { ...props, ref, href: disabled ? undefined : href, hidden,
+export const Button = ButtonControl;
+export const ButtonLink = forwardRef(function ButtonLink({ children, className, style, primary, secondary, active, choice, icon, wide, fixed, fit, danger, menuItem, disabled, hidden, href, target, rel, role, onClick, onAuxClick, tabIndex, ...props }, ref) {
+    return createElement("ds-button", { control: "slotted", primary, secondary, active, choice, icon, wide, fixed, fit, danger, menuItem, disabled, hidden, className, style }, createElement("a", { ...props, ref, href: disabled ? undefined : href, hidden,
+        target: disabled ? undefined : target,
+        rel: disabled ? undefined : rel ?? (target === "_blank" ? "noopener noreferrer" : undefined),
+        role: role ?? (disabled ? "link" : undefined),
         "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : tabIndex,
         onClick: event => { if (disabled) {
             event.preventDefault();

package/dist/react/carousel.d.ts

@@ -0,0 +1,63 @@
+/** A carousel in React: the slides stay in the light DOM, so they render on
+ * the server and read in tests; ds-carousel snaps them, draws the dots and
+ * buttons and announces the slide in view. The region and its name are in the
+ * markup from the first render. Browser-only registration of ds-carousel stays
+ * in the product's runtime entry. */
+import { type HTMLAttributes, type ReactNode } from "react";
+import type { Carousel as CarouselElement } from "../3-unit/ds-carousel";
+export type { CarouselChangeDetail } from "../3-unit/ds-carousel";
+export type CarouselProps = Omit<HTMLAttributes<CarouselElement>, "onChange"> & {
+    /** The region's name: what the slides show. */
+    label: string;
+    /** The slide in view, from 0. Changing it scrolls there. */
+    current?: number;
+    /** Show previous and next buttons beside the dots. */
+    buttons?: boolean;
+    /** Show the dots; on by default. */
+    dots?: boolean;
+    /** Draw the last dot as an end marker. */
+    end?: boolean;
+    /** Each slide's width in whole squares; the carousel's own width when not set; `"auto"` for slides of their own width, a strip. */
+    slideWidth?: number | "auto";
+    /** Squares between slides; one by default. */
+    gap?: number;
+    /** A strip's bleed: `end` runs it on to the window's end edge, `both` to both edges. */
+    bleed?: "none" | "end" | "both";
+    /** Hold the slides three times over, so the strip has no end; draws no dots. */
+    loop?: boolean;
+    /** Move on by itself: `true` for every five seconds, or milliseconds. Always with a pause button. */
+    autoplay?: boolean | number;
+    /** Slide freely, without stopping at slides. */
+    free?: boolean;
+    /** A person moved to another slide. */
+    onChange?: (index: number, previous: number) => void;
+    children?: ReactNode;
+};
+export declare const Carousel: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<CarouselElement>, "onChange"> & {
+    /** The region's name: what the slides show. */
+    label: string;
+    /** The slide in view, from 0. Changing it scrolls there. */
+    current?: number;
+    /** Show previous and next buttons beside the dots. */
+    buttons?: boolean;
+    /** Show the dots; on by default. */
+    dots?: boolean;
+    /** Draw the last dot as an end marker. */
+    end?: boolean;
+    /** Each slide's width in whole squares; the carousel's own width when not set; `"auto"` for slides of their own width, a strip. */
+    slideWidth?: number | "auto";
+    /** Squares between slides; one by default. */
+    gap?: number;
+    /** A strip's bleed: `end` runs it on to the window's end edge, `both` to both edges. */
+    bleed?: "none" | "end" | "both";
+    /** Hold the slides three times over, so the strip has no end; draws no dots. */
+    loop?: boolean;
+    /** Move on by itself: `true` for every five seconds, or milliseconds. Always with a pause button. */
+    autoplay?: boolean | number;
+    /** Slide freely, without stopping at slides. */
+    free?: boolean;
+    /** A person moved to another slide. */
+    onChange?: (index: number, previous: number) => void;
+    children?: ReactNode;
+} & import("react").RefAttributes<CarouselElement>>;
+//# sourceMappingURL=carousel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../DS1/react/carousel.ts"],"names":[],"mappings":"AAAA;;;;qCAIqC;AACrC,OAAO,EAAsE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAChI,OAAO,KAAK,EAAE,QAAQ,IAAI,eAAe,EAAwB,MAAM,uBAAuB,CAAC;AAE/F,YAAY,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAClE,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,GAAG;IAC9E,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oCAAoC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0CAA0C;IAC1C,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,mIAAmI;IACnI,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,8CAA8C;IAC9C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wFAAwF;IACxF,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;IAChC,gFAAgF;IAChF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,qGAAqG;IACrG,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,gDAAgD;IAChD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAIF,eAAO,MAAM,QAAQ;IA7BnB,+CAA+C;WACxC,MAAM;IACb,4DAA4D;cAClD,MAAM;IAChB,sDAAsD;cAC5C,OAAO;IACjB,oCAAoC;WAC7B,OAAO;IACd,0CAA0C;UACpC,OAAO;IACb,mIAAmI;iBACtH,MAAM,GAAG,MAAM;IAC5B,8CAA8C;UACxC,MAAM;IACZ,wFAAwF;YAChF,MAAM,GAAG,KAAK,GAAG,MAAM;IAC/B,gFAAgF;WACzE,OAAO;IACd,qGAAqG;eAC1F,OAAO,GAAG,MAAM;IAC3B,gDAAgD;WACzC,OAAO;IACd,uCAAuC;eAC5B,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI;eACzC,SAAS;mDAyCpB,CAAC"}

package/dist/react/carousel.js

@@ -0,0 +1,47 @@
+/** A carousel in React: the slides stay in the light DOM, so they render on
+ * the server and read in tests; ds-carousel snaps them, draws the dots and
+ * buttons and announces the slide in view. The region and its name are in the
+ * markup from the first render. Browser-only registration of ds-carousel stays
+ * in the product's runtime entry. */
+import { createElement as h, forwardRef, useEffect, useLayoutEffect, useRef } from "react";
+const useCommitEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+export const Carousel = forwardRef(function Carousel({ label, current, buttons, dots = true, end, slideWidth, gap, bleed, loop, autoplay, free, onChange, children, ...props }, ref) {
+    const host = useRef(null);
+    useCommitEffect(() => {
+        const element = host.current;
+        if (!element || !onChange)
+            return;
+        const change = (event) => {
+            if (event.target !== element)
+                return;
+            const { index, previous } = event.detail;
+            onChange(index, previous);
+        };
+        element.addEventListener("change", change);
+        return () => element.removeEventListener("change", change);
+    });
+    return h("ds-carousel", {
+        role: "region",
+        "aria-label": label,
+        ...props,
+        label,
+        literal: true,
+        current,
+        buttons: buttons || undefined,
+        "no-dots": dots ? undefined : true,
+        end: end || undefined,
+        "slide-width": slideWidth,
+        gap,
+        bleed: bleed && bleed !== "none" ? bleed : undefined,
+        loop: loop || undefined,
+        autoplay: autoplay === true ? "" : typeof autoplay === "number" ? String(autoplay) : undefined,
+        free: free || undefined,
+        ref: (element) => {
+            host.current = element;
+            if (typeof ref === "function")
+                ref(element);
+            else if (ref)
+                ref.current = element;
+        },
+    }, children);
+});

package/dist/react/choice.d.ts

@@ -36,7 +36,7 @@ export type SwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "childre
     checked: boolean;
     onCheckedChange?: (checked: boolean, event: MouseEvent<HTMLButtonElement>) => void;
 };
-export declare const Switch: import("react").ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "role" | "type" | "children" | "aria-checked" | "onChange"> & {
+export declare const Switch: import("react").ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "role" | "type" | "aria-checked" | "children" | "onChange"> & {
     checked: boolean;
     onCheckedChange?: (checked: boolean, event: MouseEvent<HTMLButtonElement>) => void;
 } & import("react").RefAttributes<HTMLButtonElement>>;