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

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../DS1/react/dialog.ts"],"names":[],"mappings":"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"}

package/dist/react/dialog.js

@@ -0,0 +1,79 @@
+/** Optional React composition; behavior and appearance belong to ds-dialog. */
+import { createContext, createElement, useContext, useId, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+const DialogContext = createContext(null);
+const useDialog = () => {
+    const context = useContext(DialogContext);
+    if (!context)
+        throw new Error("Dialog content must be inside Dialog.");
+    return context;
+};
+export function Dialog({ open, defaultOpen = false, onOpenChange, children }) {
+    const [internal, setInternal] = useState(defaultOpen);
+    const id = useId();
+    return createElement(DialogContext.Provider, { value: {
+            open: open ?? internal, title: `${id}-title`, description: `${id}-description`,
+            change: (next, reason) => { if (open === undefined)
+                setInternal(next); onOpenChange?.(next, reason); },
+        } }, children);
+}
+export function DialogContent({ children, portal = true, nonModal = false, closeOnOutside = false, blockOutside = false, holdScroll = false, anchor = null, returnFocus = null, closeLabel = "Close", showClose = true, closeOnEscape = true, closeOnBackdrop = true, fullScreen = false, flush = false, rotated = false, ...props }) {
+    const context = useDialog();
+    const host = useRef(null);
+    const [mounted, setMounted] = useState(false);
+    // A portal has no server location. Keep the server and first client render
+    // identical, including when the application initially requests an open modal.
+    useLayoutEffect(() => { setMounted(true); }, []);
+    // Install the request handler before opening, and keep the app's decision authoritative.
+    useLayoutEffect(() => {
+        const element = host.current;
+        if (!element)
+            return;
+        const close = (event) => {
+            if (event.target !== element)
+                return;
+            event.preventDefault();
+            context.change(false, event.detail.reason);
+        };
+        element.addEventListener("ds-close-request", close);
+        const native = element.querySelector("dialog");
+        if (!("aria-labelledby" in props) && !props["aria-label"]) {
+            const title = native.querySelector('[data-ds-dialog="title"]');
+            if (title)
+                native.setAttribute("aria-labelledby", title.id);
+            else
+                native.removeAttribute("aria-labelledby");
+        }
+        if (!("aria-describedby" in props)) {
+            const description = native.querySelector('[data-ds-dialog="description"]');
+            if (description)
+                native.setAttribute("aria-describedby", description.id);
+            else
+                native.removeAttribute("aria-describedby");
+        }
+        element.closeOnEscape = closeOnEscape;
+        element.closeOnBackdrop = closeOnBackdrop;
+        element.nonModal = nonModal;
+        element.closeOnOutside = closeOnOutside;
+        element.blockOutside = blockOutside;
+        element.holdScroll = holdScroll;
+        element.anchor = anchor;
+        element.returnFocus = returnFocus;
+        element.open = context.open;
+        return () => element.removeEventListener("ds-close-request", close);
+    });
+    if (!mounted || !context.open)
+        return null;
+    const content = createElement("ds-dialog", { ref: host }, createElement("dialog", { ...props, "data-ds-dialog-fullscreen": fullScreen || undefined, "data-ds-dialog-flush": flush || undefined, "data-ds-dialog-rotated": rotated || undefined }, children, showClose && createElement("ds-button", { control: "slotted", icon: true, "data-ds-dialog": "close" }, createElement("button", { type: "button", "aria-label": closeLabel, "data-ds-dialog-dismiss": "" }, createElement("ds-icon", { type: "close", "aria-hidden": true })))));
+    return portal ? createPortal(content, document.body) : content;
+}
+export function DialogHeader(props) { return createElement("div", { ...props, "data-ds-dialog": "header" }); }
+export function DialogFooter(props) { return createElement("div", { ...props, "data-ds-dialog": "footer" }); }
+export function DialogTitle(props) {
+    const context = useDialog();
+    return createElement("h2", { id: context.title, ...props, "data-ds-dialog": "title" });
+}
+export function DialogDescription(props) {
+    const context = useDialog();
+    return createElement("p", { id: context.description, ...props, "data-ds-dialog": "description" });
+}

package/dist/react/file-picker.d.ts

@@ -0,0 +1,29 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+export type FilePickerProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "children"> & {
+    label: string;
+    icon?: boolean;
+    preview?: boolean;
+    area?: boolean;
+    dragging?: boolean;
+    compact?: boolean;
+    primary?: boolean;
+    secondary?: boolean;
+    /** Native chooser cancellation is not exposed on React input props. */
+    onCancel?: (event: Event) => void;
+    children?: ReactNode;
+};
+/** The ref and events belong to the native input; classes only place the host. */
+export declare const FilePicker: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "children"> & {
+    label: string;
+    icon?: boolean;
+    preview?: boolean;
+    area?: boolean;
+    dragging?: boolean;
+    compact?: boolean;
+    primary?: boolean;
+    secondary?: boolean;
+    /** Native chooser cancellation is not exposed on React input props. */
+    onCancel?: (event: Event) => void;
+    children?: ReactNode;
+} & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=file-picker.d.ts.map

package/dist/react/file-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-picker.d.ts","sourceRoot":"","sources":["../../DS1/react/file-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiE,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhI,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC,GAAG;IAC1H,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAIF,kFAAkF;AAClF,eAAO,MAAM,UAAU;WAhBd,MAAM;WACN,OAAO;cACJ,OAAO;WACV,OAAO;eACH,OAAO;cACR,OAAO;cACP,OAAO;gBACL,OAAO;IACnB,uEAAuE;eAC5D,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;eACtB,SAAS;oDAoBpB,CAAC"}

package/dist/react/file-picker.js

@@ -0,0 +1,17 @@
+import { createElement, forwardRef, useEffect, useLayoutEffect, useRef } from "react";
+const useCommitEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+/** The ref and events belong to the native input; classes only place the host. */
+export const FilePicker = forwardRef(function FilePicker({ label, icon, preview, area, dragging, compact, primary, secondary, children, className, style, hidden, onCancel, ...props }, ref) {
+    const input = useRef(null);
+    useCommitEffect(() => {
+        const element = input.current;
+        if (!element || !onCancel)
+            return;
+        element.addEventListener("cancel", onCancel);
+        return () => element.removeEventListener("cancel", onCancel);
+    }, [onCancel]);
+    return createElement("ds-file-picker", { label, icon: Boolean(icon), preview: Boolean(preview), area: Boolean(area), dragging: Boolean(dragging), compact: Boolean(compact), primary: Boolean(primary), secondary: Boolean(secondary), className, style, hidden }, createElement("input", { ...props, type: "file", "aria-label": props["aria-label"] ?? label, ref: (element) => { input.current = element; if (typeof ref === "function")
+            ref(element);
+        else if (ref)
+            ref.current = element; }, hidden }), children != null ? createElement("span", { slot: "content", "aria-hidden": true }, children) : null);
+});

package/dist/react/input.d.ts

@@ -0,0 +1,35 @@
+/** React state binding only. ds-input owns the field and all of its behavior. */
+import { type InputHTMLAttributes } from "react";
+import type { Input as InputElement } from "../2-core/ds-input";
+export type { InputElement };
+export type InputProps = Omit<InputHTMLAttributes<InputElement>, "value" | "defaultValue" | "type" | "size"> & {
+    value?: string | number;
+    defaultValue?: string | number;
+    type?: InputElement["type"];
+    variant?: InputElement["variant"];
+    revealable?: boolean;
+    quietFocus?: boolean;
+    error?: string;
+};
+type FieldProps = InputProps & {
+    rows?: number;
+    wrap?: "soft" | "hard" | "off";
+    autoGrow?: boolean;
+    maxRows?: number;
+};
+export type TextareaProps = Omit<FieldProps, "type" | "revealable" | "min" | "max" | "step" | "pattern"> & {
+    variant?: "field" | "plain";
+};
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<InputElement>, "size" | "type" | "value" | "defaultValue"> & {
+    value?: string | number;
+    defaultValue?: string | number;
+    type?: InputElement["type"];
+    variant?: InputElement["variant"];
+    revealable?: boolean;
+    quietFocus?: boolean;
+    error?: string;
+} & import("react").RefAttributes<InputElement>>;
+export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<FieldProps, "pattern" | "type" | "revealable" | "min" | "max" | "step"> & {
+    variant?: "field" | "plain";
+} & import("react").RefAttributes<InputElement>>;
+//# sourceMappingURL=input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../DS1/react/input.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,OAAO,EAUL,KAAK,mBAAmB,EAEzB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,YAAY,EAAE,CAAC;AAC7B,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,mBAAmB,CAAC,YAAY,CAAC,EACjC,OAAO,GAAG,cAAc,GAAG,MAAM,GAAG,MAAM,CAC3C,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,IAAI,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAuBF,KAAK,UAAU,GAAG,UAAU,GAAG;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AACF,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,UAAU,EACV,MAAM,GAAG,YAAY,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,CAC3D,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CAAE,CAAC;AA2HpC,eAAO,MAAM,KAAK;YAlKR,MAAM,GAAG,MAAM;mBACR,MAAM,GAAG,MAAM;WACvB,YAAY,CAAC,MAAM,CAAC;cACjB,YAAY,CAAC,SAAS,CAAC;iBACpB,OAAO;iBACP,OAAO;YACZ,MAAM;gDA4JyC,CAAC;AAC1D,eAAO,MAAM,QAAQ;cA5HL,OAAO,GAAG,OAAO;gDA4HiC,CAAC"}

package/dist/react/input.js

@@ -0,0 +1,128 @@
+/** React state binding only. ds-input owns the field and all of its behavior. */
+import { createElement, forwardRef, useCallback, useEffect, useLayoutEffect, useReducer, useRef, } from "react";
+const useCommitEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+/** Native listeners cross Lit's shadow boundary without React's input tracker.
+ * Keep the familiar React event methods while exposing the shared element.
+ */
+function reactEvent(event, field) {
+    return new Proxy(event, {
+        get(native, key) {
+            if (key === "target" || key === "currentTarget")
+                return field;
+            if (key === "nativeEvent")
+                return native;
+            if (key === "persist")
+                return () => { };
+            if (key === "isDefaultPrevented")
+                return () => native.defaultPrevented;
+            if (key === "isPropagationStopped")
+                return () => native.cancelBubble;
+            const value = Reflect.get(native, key, native);
+            return typeof value === "function" ? value.bind(native) : value;
+        },
+    });
+}
+function setRef(ref, field) {
+    if (typeof ref === "function")
+        return ref(field);
+    if (ref)
+        ref.current = field;
+}
+function fieldAdapter(tag) {
+    return forwardRef(function Field({ value, defaultValue, onChange, onInput, autoFocus, autoComplete, inputMode, readOnly, minLength, maxLength, min, max, step, spellCheck, form, type = "text", variant = "field", quietFocus, autoGrow, maxRows, ...props }, forwardedRef) {
+        const field = useRef(null);
+        const initial = useRef(String(defaultValue ?? ""));
+        const [, refresh] = useReducer((version) => version + 1, 0);
+        const controlled = value !== undefined;
+        const ref = useCallback((element) => {
+            field.current = element;
+            return setRef(forwardedRef, element);
+        }, [forwardedRef]);
+        // React does not restore controlled values on custom elements. Reconcile
+        // after every commit, including when an application rejects an edit.
+        useCommitEffect(() => {
+            if (controlled && field.current)
+                field.current.value = String(value);
+            // form is a read-only ElementInternals getter, not a writable property.
+            if (form !== undefined)
+                field.current?.setAttribute("form", form);
+            else
+                field.current?.removeAttribute("form");
+        });
+        useEffect(() => {
+            const element = field.current;
+            if (!element || !controlled)
+                return;
+            const reset = () => refresh();
+            element.addEventListener("input-reset", reset);
+            return () => element.removeEventListener("input-reset", reset);
+        }, [controlled]);
+        const attributes = { ...props };
+        const listeners = [];
+        for (const key of Object.keys(attributes)) {
+            if (key.startsWith("aria-") && typeof attributes[key] === "boolean")
+                attributes[key] = String(attributes[key]);
+            if (/^on[A-Z]/.test(key) && typeof attributes[key] === "function") {
+                const callback = attributes[key];
+                const capture = key.endsWith("Capture");
+                const name = key.slice(2, capture ? -7 : undefined);
+                const native = { Focus: "focusin", Blur: "focusout", DoubleClick: "dblclick" }[name] ?? name.toLowerCase();
+                listeners.push({
+                    name: native,
+                    capture,
+                    callback: (event) => {
+                        if (field.current)
+                            callback(reactEvent(event, field.current));
+                    },
+                });
+                delete attributes[key];
+            }
+        }
+        listeners.push({
+            name: "input",
+            capture: false,
+            callback: (native) => {
+                if (!field.current)
+                    return;
+                const event = reactEvent(native, field.current);
+                onInput?.(event);
+                onChange?.(event);
+                if (controlled)
+                    refresh();
+            },
+        });
+        useCommitEffect(() => {
+            const element = field.current;
+            if (!element)
+                return;
+            for (const { name, callback, capture } of listeners)
+                element.addEventListener(name, callback, capture);
+            return () => {
+                for (const { name, callback, capture } of listeners)
+                    element.removeEventListener(name, callback, capture);
+            };
+        });
+        return createElement(tag, {
+            ...attributes,
+            ref,
+            type,
+            variant,
+            value: controlled ? String(value) : initial.current,
+            autofocus: autoFocus,
+            autocomplete: autoComplete,
+            inputmode: inputMode,
+            readonly: readOnly,
+            minlength: minLength,
+            maxlength: maxLength,
+            min: min == null ? undefined : String(min),
+            max: max == null ? undefined : String(max),
+            step: step == null ? undefined : String(step),
+            spellcheck: spellCheck === undefined ? undefined : String(spellCheck),
+            "quiet-focus": quietFocus,
+            "auto-grow": autoGrow,
+            "max-rows": maxRows,
+        });
+    });
+}
+export const Input = fieldAdapter("ds-input");
+export const Textarea = fieldAdapter("ds-textarea");

package/dist/react/menu.d.ts

@@ -0,0 +1,37 @@
+import { type HTMLAttributes } from "react";
+import type { Menu as MenuElement, MenuAnchor, MenuCloseReason, MenuTriggerMode, MenuToggleDetail } from "../3-unit/ds-menu";
+export type MenuProps = HTMLAttributes<MenuElement> & {
+    open?: boolean;
+    compact?: boolean;
+    columns?: number;
+    hover?: boolean;
+    disabled?: boolean;
+    contextSelector?: string;
+    anchor?: MenuAnchor | null;
+    placement?: "top" | "bottom" | "right" | "left";
+    triggerMode?: MenuTriggerMode;
+    trigger?: HTMLElement | null;
+    controller?: HTMLElement | null;
+    activeId?: string;
+    onActiveChange?: (id: string) => void;
+    onOpenChange?: (open: boolean, reason: MenuCloseReason | "trigger", context?: MenuToggleDetail) => void;
+    onCloseAutoFocus?: (event: Event) => void;
+};
+export declare const Menu: import("react").ForwardRefExoticComponent<HTMLAttributes<MenuElement> & {
+    open?: boolean;
+    compact?: boolean;
+    columns?: number;
+    hover?: boolean;
+    disabled?: boolean;
+    contextSelector?: string;
+    anchor?: MenuAnchor | null;
+    placement?: "top" | "bottom" | "right" | "left";
+    triggerMode?: MenuTriggerMode;
+    trigger?: HTMLElement | null;
+    controller?: HTMLElement | null;
+    activeId?: string;
+    onActiveChange?: (id: string) => void;
+    onOpenChange?: (open: boolean, reason: MenuCloseReason | "trigger", context?: MenuToggleDetail) => void;
+    onCloseAutoFocus?: (event: Event) => void;
+} & import("react").RefAttributes<MenuElement>>;
+//# sourceMappingURL=menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../DS1/react/menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAC3G,OAAO,KAAK,EAAE,IAAI,IAAI,WAAW,EAAE,UAAU,EAAE,eAAe,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC7H,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACzF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAAC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,eAAe,CAAC;IAAC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAAC,UAAU,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC7L,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,eAAe,GAAG,SAAS,EAAE,OAAO,CAAC,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACxG,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,IAAI;WARR,OAAO;cAAY,OAAO;cAAY,MAAM;YAAU,OAAO;eAAa,OAAO;sBACtE,MAAM;aACf,UAAU,GAAG,IAAI;gBAAc,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM;kBAAgB,eAAe;cAAY,WAAW,GAAG,IAAI;iBAAe,WAAW,GAAG,IAAI;eAAa,MAAM;qBAC3K,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI;mBACtB,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,eAAe,GAAG,SAAS,EAAE,OAAO,CAAC,EAAE,gBAAgB,KAAK,IAAI;uBACpF,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;+CAmBzC,CAAC"}

package/dist/react/menu.js

@@ -0,0 +1,31 @@
+import { createElement, forwardRef, useEffect, useLayoutEffect, useRef } from "react";
+const useCommitEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+export const Menu = forwardRef(function Menu({ open, compact, columns, hover, disabled, anchor, placement, triggerMode, contextSelector, trigger, controller, activeId, onActiveChange, onOpenChange, onCloseAutoFocus, children, ...props }, ref) {
+    const host = useRef(null);
+    useCommitEffect(() => {
+        const element = host.current;
+        if (!element)
+            return;
+        const active = (event) => { if (event.target !== element)
+            return; if (activeId !== undefined)
+            event.preventDefault(); onActiveChange?.(event.detail.id); };
+        const close = (event) => { if (event.target !== element)
+            return; if (open !== undefined)
+            event.preventDefault(); onOpenChange?.(false, event.detail.reason); };
+        const toggle = (event) => { if (event.target !== element)
+            return; if (open !== undefined)
+            event.preventDefault(); const detail = event.detail; onOpenChange?.(detail.open, "trigger", detail); };
+        const focus = (event) => { if (event.target === element)
+            onCloseAutoFocus?.(event); };
+        element.addEventListener("ds-menu-close-focus", focus);
+        element.addEventListener("ds-menu-active", active);
+        element.addEventListener("ds-menu-close", close);
+        element.addEventListener("ds-menu-toggle", toggle);
+        element.renderNow?.();
+        return () => { element.removeEventListener("ds-menu-close-focus", focus); element.removeEventListener("ds-menu-active", active); element.removeEventListener("ds-menu-close", close); element.removeEventListener("ds-menu-toggle", toggle); };
+    });
+    return createElement("ds-menu", { ...props, ref: (element) => { host.current = element; if (typeof ref === "function")
+            ref(element);
+        else if (ref)
+            ref.current = element; }, floating: open !== undefined, open, compact, columns, hover, disabled, anchor, placement, triggerMode, contextSelector, trigger, controller, activeId }, children);
+});

package/dist/react/split.d.ts

@@ -0,0 +1,15 @@
+/** Product state binding. The Lit split owns the controls and their face. */
+import { type CSSProperties, type ReactNode } from "react";
+import type { SplitSegment } from "../2-core/ds-split";
+export type { SplitSegment };
+export interface SplitProps<T extends string> {
+    segments: ReadonlyArray<SplitSegment<T>>;
+    value?: T;
+    onPress: (value: T) => void;
+    label: string;
+    className?: string;
+    style?: CSSProperties;
+    disabled?: boolean;
+}
+export declare function Split<T extends string>({ segments, value, onPress, label, className, style, disabled }: SplitProps<T>): ReactNode;
+//# sourceMappingURL=split.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"split.d.ts","sourceRoot":"","sources":["../../DS1/react/split.ts"],"names":[],"mappings":"AAAA,6EAA6E;AAC7E,OAAO,EAAqD,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9G,OAAO,KAAK,EAAyB,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC9E,YAAY,EAAE,YAAY,EAAE,CAAC;AAG7B,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,MAAM;IAC1C,QAAQ,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,OAAO,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,KAAK,CAAC,CAAC,SAAS,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,QAAgB,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,SAAS,CAyBzI"}

package/dist/react/split.js

@@ -0,0 +1,32 @@
+/** Product state binding. The Lit split owns the controls and their face. */
+import { createElement, useEffect, useLayoutEffect, useRef } from "react";
+const useCommitEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+export function Split({ segments, value, onPress, label, className, style, disabled = false }) {
+    const ref = useRef(null);
+    useCommitEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        element.segments = segments;
+        element.value = value ?? "";
+        element.actions = value === undefined;
+        element.disabled = disabled;
+        element.literal = true;
+        const press = (event) => {
+            if (event.target !== element)
+                return;
+            // A controlled choice changes only when the product accepts it and
+            // sends back a value. A rejected request must never become selected.
+            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-split", { ref, "aria-label": label, className, style });
+}

package/dist/react/token-field.d.ts

@@ -0,0 +1,36 @@
+import { type HTMLAttributes, type InputHTMLAttributes, type ReactNode } from "react";
+import type { TokenCommit } from "../3-unit/ds-token-field";
+import type { Token as TokenElement } from "../2-core/ds-token";
+export type { TokenCommit };
+export type TokenProps = HTMLAttributes<TokenElement> & {
+    value: string;
+    label?: string;
+    detail?: string;
+    removeLabel?: string;
+    disabled?: boolean;
+    onRemove?: (value: string) => void;
+};
+export declare const Token: import("react").ForwardRefExoticComponent<HTMLAttributes<TokenElement> & {
+    value: string;
+    label?: string;
+    detail?: string;
+    removeLabel?: string;
+    disabled?: boolean;
+    onRemove?: (value: string) => void;
+} & import("react").RefAttributes<TokenElement>>;
+export type TokenFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, "children"> & {
+    tokens?: ReactNode;
+    suggestions?: ReactNode;
+    chooseLabel?: string;
+    separators?: string;
+    onCommit?: (request: TokenCommit) => void;
+};
+/** All native field attributes, handlers and refs are passed to the native input. */
+export declare const TokenField: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "children"> & {
+    tokens?: ReactNode;
+    suggestions?: ReactNode;
+    chooseLabel?: string;
+    separators?: string;
+    onCommit?: (request: TokenCommit) => void;
+} & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=token-field.d.ts.map

package/dist/react/token-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"token-field.d.ts","sourceRoot":"","sources":["../../DS1/react/token-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiE,KAAK,cAAc,EAAE,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACrJ,OAAO,KAAK,EAAmC,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC7F,OAAO,KAAK,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,CAAC;AAE5B,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,YAAY,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,CAAC;AACzL,eAAO,MAAM,KAAK;WAD+C,MAAM;YAAU,MAAM;aAAW,MAAM;kBAAgB,MAAM;eAAa,OAAO;eAAa,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;gDASpL,CAAC;AACH,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,GAAG;IACtF,MAAM,CAAC,EAAE,SAAS,CAAC;IAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IACvF,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC3C,CAAC;AACF,qFAAqF;AACrF,eAAO,MAAM,UAAU;aAJZ,SAAS;kBAAgB,SAAS;kBAAgB,MAAM;iBAAe,MAAM;eAC3E,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI;oDAczC,CAAC"}

package/dist/react/token-field.js

@@ -0,0 +1,33 @@
+import { createElement, forwardRef, useEffect, useLayoutEffect, useRef } from "react";
+const useCommitEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+export const Token = forwardRef(function Token({ onRemove, ...props }, ref) {
+    const host = useRef(null);
+    useCommitEffect(() => {
+        const element = host.current;
+        if (!element)
+            return;
+        const remove = (event) => { if (event.target === element)
+            onRemove?.(event.detail.value); };
+        element.addEventListener("ds-token-remove", remove);
+        return () => element.removeEventListener("ds-token-remove", remove);
+    });
+    return createElement("ds-token", { ...props, ref: (element) => { host.current = element; if (typeof ref === "function")
+            ref(element);
+        else if (ref)
+            ref.current = element; } });
+});
+/** All native field attributes, handlers and refs are passed to the native input. */
+export const TokenField = forwardRef(function TokenField({ tokens, suggestions, chooseLabel = "", separators, onCommit, className, style, ...props }, ref) {
+    const host = useRef(null);
+    useCommitEffect(() => {
+        const element = host.current;
+        if (!element)
+            return;
+        const commit = (event) => { if (event.target === element)
+            onCommit?.(event.detail); };
+        element.addEventListener("ds-token-commit", commit);
+        element.refresh();
+        return () => element.removeEventListener("ds-token-commit", commit);
+    });
+    return createElement("ds-token-field", { ref: host, chooseLabel, ...(separators === undefined ? {} : { separators }), className, style }, tokens, createElement("input", { ...props, ref }), suggestions === undefined ? null : createElement("ds-menu", { slot: "suggestions", "aria-label": chooseLabel }, suggestions));
+});