@ds-mo/ui 8.1.0 → 8.2.1

package/dist/lib/components/Text/text-types.d.ts

@@ -1,5 +1,5 @@
 export type TextVariant = 'text-display-medium' | 'text-display-small' | 'text-title-large' | 'text-title-medium' | 'text-title-small' | 'text-body-large' | 'text-body-medium' | 'text-body-small' | 'text-caption';
-export type TextColorToken = 'primary' | 'secondary' | 'tertiary' | 'brand' | 'negative' | 'positive' | 'warning' | 'caution' | 'ai' | 'on-strong' | 'on-bold' | 'inherit';
+export type TextColorToken = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'brand' | 'negative' | 'positive' | 'warning' | 'caution' | 'ai' | 'on-strong' | 'on-bold' | 'inherit';
 export type TextColor = TextColorToken | `var(--${string})`;
 export type TextDecoration = 'none' | 'underline' | 'dotted-underline';
 export type TextAlign = 'left' | 'center' | 'right';

package/dist/react/components.d.ts

@@ -29,7 +29,7 @@ export { DsPagination } from "./ds-pagination.js";
 export { DsPanelNav } from "./ds-panel-nav.js";
 export { DsPanelSubNav } from "./ds-panel-sub-nav.js";
 export { DsPanelTools } from "./ds-panel-tools.js";
-export { DsRadioGroup } from "./ds-radio-group.js";
+export { DsRadio } from "./ds-radio.js";
 export { DsSelectMulti } from "./ds-select-multi.js";
 export { DsSelect } from "./ds-select.js";
 export { DsShellGradientPicker } from "./ds-shell-gradient-picker.js";

package/dist/react/components.js

@@ -30,7 +30,7 @@ export { DsPagination } from "./ds-pagination.js";
 export { DsPanelNav } from "./ds-panel-nav.js";
 export { DsPanelSubNav } from "./ds-panel-sub-nav.js";
 export { DsPanelTools } from "./ds-panel-tools.js";
-export { DsRadioGroup } from "./ds-radio-group.js";
+export { DsRadio } from "./ds-radio.js";
 export { DsSelectMulti } from "./ds-select-multi.js";
 export { DsSelect } from "./ds-select.js";
 export { DsShellGradientPicker } from "./ds-shell-gradient-picker.js";

package/dist/react/ds-radio.d.ts

@@ -0,0 +1,12 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { type DsRadioCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsRadio as DsRadioElement } from "@ds-mo/ui/dist/components/ds-radio.js";
+export type DsRadioEvents = {
+    onDsChange: EventName<DsRadioCustomEvent<string>>;
+};
+export declare const DsRadio: StencilReactComponent<DsRadioElement, DsRadioEvents, Components.DsRadio>;

package/dist/react/ds-radio.js

@@ -0,0 +1,12 @@
+'use client';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+import { DsRadio as DsRadioElement, defineCustomElement as defineDsRadio } from "@ds-mo/ui/dist/components/ds-radio.js";
+export const DsRadio = /*@__PURE__*/ createComponent({
+    tagName: 'ds-radio',
+    elementClass: DsRadioElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsChange: 'dsChange' },
+    defineCustomElement: defineDsRadio
+});

package/dist/react/ds-slider.d.ts

@@ -3,10 +3,11 @@
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
 import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
-import { type DsSliderCustomEvent } from "@ds-mo/ui";
+import { type DsSliderCustomEvent, type SliderValue } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsSlider as DsSliderElement } from "@ds-mo/ui/dist/components/ds-slider.js";
 export type DsSliderEvents = {
-    onDsChange: EventName<DsSliderCustomEvent<number>>;
+    onDsChange: EventName<DsSliderCustomEvent<SliderValue>>;
+    onDsCommit: EventName<DsSliderCustomEvent<SliderValue>>;
 };
-export declare const DsSlider: StencilReactComponent<DsSliderElement, DsSliderEvents, Components.DsSlider, 'label'>;
+export declare const DsSlider: StencilReactComponent<DsSliderElement, DsSliderEvents, Components.DsSlider>;

package/dist/react/ds-slider.js

@@ -7,6 +7,9 @@ export const DsSlider = /*@__PURE__*/ createComponent({
     elementClass: DsSliderElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
-    events: { onDsChange: 'dsChange' },
+    events: {
+        onDsChange: 'dsChange',
+        onDsCommit: 'dsCommit'
+    },
     defineCustomElement: defineDsSlider
 });

package/dist/types/components/ButtonUnfilled/ButtonUnfilled.d.ts

@@ -4,6 +4,7 @@ export type ButtonUnfilledBackground = 'faint' | 'medium' | 'bold' | 'strong' |
 export type ButtonUnfilledVariant = 'icon' | 'label' | 'icon-label';
 export type ButtonUnfilledSize = 'md' | 'sm' | 'xs';
 export type ButtonUnfilledWidth = ControlWidth;
+export type ButtonUnfilledPopup = 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
 export declare class ButtonUnfilled {
     el: HTMLElement;
     /**
@@ -45,7 +46,7 @@ export declare class ButtonUnfilled {
     ariaLabel: string | null;
     controls: string | undefined;
     expanded: boolean | undefined;
-    haspopup: string | undefined;
+    haspopup: ButtonUnfilledPopup | undefined;
     pressed: boolean | undefined;
     /**
      * Native `tabindex` for roving keyboard groups in shell chrome.

package/dist/types/components/Field/Field.d.ts

@@ -1,8 +1,43 @@
 export declare class Field {
+    el: HTMLElement;
+    /** Persistent visible label for the single slotted control. */
     label: string;
-    /** ID forwarded to the slotted control via the label's `for` attribute. Auto-generated if omitted. */
+    /** Explicit ID for the slotted control; generated when omitted. */
     fieldId: string | undefined;
-    private resolvedId;
+    /** Optional guidance associated with the slotted control. */
+    description: string | undefined;
+    /** Invalid visual and accessible state forwarded to supported ds controls. */
+    error: boolean;
+    /** Visible error associated with the slotted control while error is true. */
+    errorMessage: string | undefined;
+    private focused;
+    private filled;
+    private dirty;
+    private touched;
+    private controlDisabled;
+    private controlRequired;
+    private readonly generatedId;
+    private controlContainer?;
+    private control?;
+    private initialValue;
+    private authoredAria;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    onFieldContractChange(): void;
+    private get controlId();
+    private get labelId();
+    private get descriptionId();
+    private get errorId();
+    private get renderedDescription();
+    private get renderedError();
+    private readValue;
+    private updateControlAttribute;
+    private findControl;
+    private syncControl;
+    private handleLabelClick;
+    private handleFocusIn;
+    private handleFocusOut;
+    private handleValueChange;
     render(): any;
 }
 //# sourceMappingURL=Field.d.ts.map

package/dist/types/components/Icon/Icon.d.ts

@@ -7,7 +7,12 @@ export declare class Icon {
     name: string;
     /** Iconography size token. Maps to `--dimension-iconography-{size}`. Default `md` = 20 px. */
     size: IconSize;
-    /** Semantic foreground color token, or a raw CSS var reference. */
+    /**
+     * Semantic foreground color token, or a raw CSS var reference. `tertiary`
+     * and the still-fainter `quaternary` are restricted to icons inside genuinely
+     * inactive/disabled UI or to purely decorative icons; informative icons must
+     * retain sufficient contrast.
+     */
     color: IconColor;
     /** Accessible label. Sets `role="img"` and `aria-label`. Omit for decorative icons. */
     label: string | undefined;

package/dist/types/components/Input/Input.d.ts

@@ -1,5 +1,8 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { type ControlWidth } from '../../utils';
 export type InputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'password';
+export type InputSize = 'md' | 'sm' | 'xs';
+export type InputWidth = ControlWidth;
 export declare class Input {
     el: HTMLElement;
     internals: ElementInternals;
@@ -7,12 +10,29 @@ export declare class Input {
     private errorId;
     value: string;
     name: string | undefined;
+    form: string | undefined;
     disabled: boolean;
+    /** Keeps the value focusable and submittable while preventing edits. */
+    readOnly: boolean;
     required: boolean;
     requiredMessage: string;
     clearLabel: string;
     placeholder: string | undefined;
     type: InputType;
+    /** Native browser autofill hint. */
+    autoComplete: string | undefined;
+    /** Preferred virtual keyboard without changing the value semantics. */
+    inputMode: string;
+    /** Preferred virtual-keyboard action label. */
+    enterKeyHint: string;
+    /** Control density. */
+    size: InputSize;
+    /** Width fit — fill the parent (default) or hug the available content. */
+    width: InputWidth;
+    /** Show the standard inset border. */
+    hasBorder: boolean;
+    /** Optional leading icon name. */
+    icon: string | undefined;
     isInactive: boolean;
     autoFocus: boolean;
     error: boolean;
@@ -26,13 +46,19 @@ export declare class Input {
     dsClear: EventEmitter<void>;
     private initialValue;
     private formDisabled;
+    private hasSuffix;
+    private focused;
+    private touched;
     componentWillLoad(): void;
+    componentDidRender(): void;
     syncFormValue(): void;
     formDisabledCallback(disabled: boolean): void;
     formResetCallback(): void;
     formStateRestoreCallback(state: string | File | FormData | null): void;
     setFocus(): Promise<void>;
     private handleInput;
+    private handleFocus;
+    private handleBlur;
     private handleClear;
     render(): any;
 }

package/dist/types/components/Loader/Loader.d.ts

@@ -4,7 +4,12 @@ export type LoaderColor = IconColor;
 export declare class Loader {
     /** Iconography size token. Maps to `--dimension-iconography-{size}`. Default `md` = 20 px. */
     size: LoaderSize;
-    /** Semantic foreground color token, or a raw CSS var reference. Same tokens as `ds-icon`. */
+    /**
+     * Semantic foreground color token, or a raw CSS var reference. Same tokens
+     * as `ds-icon`. Do not use `tertiary` or `quaternary` for a standalone or
+     * informative Loader; inherit a readable color from the owning busy control
+     * or region.
+     */
     color: LoaderColor;
     /**
      * Accessible label for standalone usage. Wraps the spinner in a live region

package/dist/types/components/Menu/Menu.d.ts

@@ -52,8 +52,14 @@ export declare class Menu {
     private get closeAnimationMs();
     private finishClose;
     private get resolvedAnchor();
+    private get anchorFocusTarget();
+    private focusAnchor;
+    private moveFocusAfterTab;
+    private compositeTabLeavesPopup;
     private get activeSections();
     private get flatItems();
+    /** Rich preference content is a non-modal dialog, not an ARIA action menu. */
+    private get hasCompositeSections();
     private cancelPositionRetry;
     /** Retry until anchor + popup exist — do not reveal at 0,0 on a failed first pass. */
     private schedulePositionUpdate;

package/dist/types/components/Modal/Modal.d.ts

@@ -16,6 +16,7 @@ export declare class Modal {
     private escapeHandler;
     private tabHandler;
     private closeTimer;
+    private inertedElements;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     onOpenChange(isOpen: boolean): void;
@@ -25,6 +26,10 @@ export declare class Modal {
     private teardownListeners;
     private close;
     private handleBackdropMouseDown;
+    private get isTopModal();
+    /** Inert every sibling branch outside the modal without assuming it is a body child. */
+    private activateModal;
+    private deactivateModal;
     private get resolvedWidth();
     private get closeAnimationMs();
     private finishClose;

package/dist/types/components/PanelNav/PanelNav.d.ts

@@ -39,6 +39,8 @@ export declare class PanelNav {
     settingsNavigationLabel: string;
     expandNavigationLabel: string;
     collapseNavigationLabel: string;
+    /** Localized name for the body when overflow makes it a keyboard-scrollable region. */
+    navigationItemsLabel: string;
     /** Emitted when a nav item is clicked. Detail = the item's `id`. */
     dsNavSelect: EventEmitter<string>;
     /** Emitted when the collapse toggle is clicked. Detail = new collapsed state. */
@@ -57,9 +59,12 @@ export declare class PanelNav {
     private rovingIndex;
     private viewportNarrow;
     private urlDerivedActiveId;
+    private bodyScrollable;
     private transitionCompletionHandler?;
     private transitionFallbackTimer;
     private resizeObserver?;
+    private scrollRegionObserver?;
+    private bodyEl?;
     private isDragging;
     private dragStartX;
     private didSnap;
@@ -82,12 +87,16 @@ export declare class PanelNav {
     onNavStyleChange(newVal: NavChromeStyle): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    componentDidRender(): void;
     disconnectedCallback(): void;
     private startCollapseAnimation;
     private finishCollapseAnimation;
     private clearCollapseAnimationCompletion;
     private connectResizeObserver;
     private disconnectResizeObserver;
+    private connectScrollRegionObserver;
+    private disconnectScrollRegionObserver;
+    private updateBodyScrollable;
     /** Derive active ID from the current URL by matching item `href` values.
      *  Uses longest segment-boundary prefix match. */
     private syncActiveFromUrl;

package/dist/types/components/{RadioGroup/RadioGroup.d.ts → Radio/Radio.d.ts}

@@ -4,19 +4,35 @@ export interface RadioOption {
     value: string;
     isInactive?: boolean;
 }
-export declare class RadioGroup {
+export type RadioSize = 'md' | 'sm' | 'xs';
+export declare class Radio {
     el: HTMLElement;
     internals: ElementInternals;
+    /** Visible choices in this one-of-many set. */
     options: RadioOption[];
+    /** Selected option value. */
     value: string;
+    /** Visual and placement density for every option. */
+    size: RadioSize;
+    /** Native form field name. */
     name: string | undefined;
+    /** Associates the radio set with a form by id when rendered outside that form. */
+    form: string | undefined;
+    /** Native disabled state for the complete set. */
     disabled: boolean;
+    /** Require one option to be selected for form validity. */
     required: boolean;
+    /** Validation message used when a required set has no selection. */
     requiredMessage: string;
+    /** Layout direction for the option set. */
     direction: 'vertical' | 'horizontal';
+    /** Design-system inactive state for the complete set. */
     isInactive: boolean;
+    /** Accessible name when visible group labeling is unavailable. */
     ariaLabel: string | null;
+    /** Id reference for a visible group label. */
     ariaLabelledby: string | undefined;
+    /** Emitted after user selection with the selected option value. */
     dsChange: EventEmitter<string>;
     private initialValue;
     private formDisabled;
@@ -30,4 +46,4 @@ export declare class RadioGroup {
     private selectItem;
     render(): any;
 }
-//# sourceMappingURL=RadioGroup.d.ts.map
+//# sourceMappingURL=Radio.d.ts.map

package/dist/types/components/Radio/index.d.ts

@@ -0,0 +1,2 @@
+export type { RadioOption, RadioSize } from './Radio';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/Slider/Slider.d.ts

@@ -1,18 +1,112 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+export type SliderValue = number | number[];
+export type SliderSize = 'md' | 'sm' | 'xs';
+export type SliderOrientation = 'horizontal' | 'vertical';
+export type SliderThumbAlignment = 'edge' | 'center';
 export declare class Slider {
-    private generatedId;
-    value: number;
+    el: HTMLElement;
+    internals: ElementInternals;
+    /** Current value. Assign a two-number array through the JavaScript property for a range slider. */
+    value: SliderValue;
     min: number;
     max: number;
     step: number;
-    label: string;
+    /** Minimum number of steps kept between two range thumbs. */
+    minStepsBetweenValues: number;
+    /** Visible field label. Supply aria-label when the label is intentionally hidden. */
+    label: string | undefined;
+    /** Show the formatted current value beside the visible label. */
+    showValue: boolean;
+    size: SliderSize;
+    orientation: SliderOrientation;
+    /** Keep the complete thumb inside the rail bounds, or center it on the endpoints. */
+    thumbAlignment: SliderThumbAlignment;
+    name: string | undefined;
+    form: string | undefined;
+    disabled: boolean;
+    /** Keep the value focusable and submittable while preventing changes. */
+    readOnly: boolean;
     isInactive: boolean;
+    /** Direct accessible name for a single-thumb slider without a visible label. */
+    ariaLabel: string | null;
+    /** Id references for a visible single-thumb slider label. */
+    ariaLabelledby: string | undefined;
+    /** Id references for supporting guidance or error text. */
+    ariaDescribedby: string | undefined;
+    /** Accessible label for the lower thumb in a range slider. */
+    startLabel: string;
+    /** Accessible label for the upper thumb in a range slider. */
+    endLabel: string;
+    /** Human-readable value text for a single slider or both range thumbs. */
     valueText: string | undefined;
-    /** Associates with an external <label>. Defaults to an auto-generated ID. */
+    /** Per-thumb human-readable value text for a range slider. Assign through the JavaScript property. */
+    valueTexts: string[];
+    /** Locale used by Intl.NumberFormat for the visible value. */
+    locale: string | undefined;
+    /** Intl.NumberFormat options. Assign objects through the JavaScript property. */
+    formatOptions: Intl.NumberFormatOptions | undefined;
+    valuePrefix: string;
+    valueSuffix: string;
+    rangeSeparator: string;
+    /** Id applied to the first native range input. */
     inputId: string | undefined;
-    dsChange: EventEmitter<number>;
-    private handleInput;
-    private get pct();
+    /** Emitted continuously while the value changes. */
+    dsChange: EventEmitter<SliderValue>;
+    /** Emitted when a pointer or keyboard value change is committed. */
+    dsCommit: EventEmitter<SliderValue>;
+    private formDisabled;
+    private dragging;
+    private focused;
+    private touched;
+    private activeThumbIndex;
+    private externalLabelledby;
+    private readonly generatedId;
+    private readonly labelId;
+    private initialValue;
+    private lastCommittedValue;
+    private pointerId;
+    private pointerStartValue;
+    private controlEl;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    syncFormValue(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
+    setFocus(index?: number): Promise<void>;
+    private get isDisabled();
+    private get isRange();
+    private get safeStep();
+    private get safeMin();
+    private get safeMax();
+    private get minimumGap();
+    private get resolvedValues();
+    private get publicValue();
+    private cloneValue;
+    private valuesEqual;
+    private decimalPlaces;
+    private snap;
+    private percent;
+    private allowedMin;
+    private allowedMax;
+    private setValueAt;
+    private commitIfChanged;
+    private syncNativeLabels;
+    private formattedValue;
+    private ariaValueText;
+    private handleNativeInput;
+    private handleNativeChange;
+    private handleKeyDown;
+    private handleFocus;
+    private handleBlur;
+    private handleHostClick;
+    private pointerPercent;
+    private valueFromPointer;
+    private closestThumbIndex;
+    private handlePointerDown;
+    private handlePointerMove;
+    private endPointerInteraction;
+    private renderThumb;
     render(): any;
 }
 //# sourceMappingURL=Slider.d.ts.map

package/dist/types/components/Switch/Switch.d.ts

@@ -26,6 +26,8 @@ export declare class Switch {
     dsChange: EventEmitter<boolean>;
     private initialChecked;
     private formDisabled;
+    private focused;
+    private touched;
     componentWillLoad(): void;
     componentDidLoad(): void;
     syncFormValue(): void;
@@ -35,6 +37,8 @@ export declare class Switch {
     private syncNativeLabels;
     private handleClick;
     private handleKeyDown;
+    private handleFocus;
+    private handleBlur;
     render(): any;
 }
 //# sourceMappingURL=Switch.d.ts.map

package/dist/types/components/TabGroup/TabGroup.d.ts

@@ -10,6 +10,7 @@ export declare class TabGroup {
     ariaLabelledby: string | undefined;
     dsChange: EventEmitter<string>;
     private get selectableTabs();
+    private get focusableTabId();
     private selectTab;
     private focusTab;
     /** Keep focus on the selected tab when value changes externally (e.g. BarNav menu). */

package/dist/types/components/Text/Text.d.ts

@@ -8,6 +8,12 @@ export declare class Text {
      * `true`: display bold, title/caption semibold, body medium.
      */
     emphasis: boolean;
+    /**
+     * Semantic foreground color token or CSS variable. `tertiary` and the
+     * still-fainter `quaternary` are restricted to genuinely inactive/disabled
+     * UI content or purely decorative content; prefer the owning control's
+     * inactive state whenever one exists.
+     */
     color: TextColor;
     /** Link underline or dotted hidden-interaction affordance; does not add semantics. */
     decoration: TextDecoration | undefined;

package/dist/types/components/Text/text-types.d.ts

@@ -1,5 +1,5 @@
 export type TextVariant = 'text-display-medium' | 'text-display-small' | 'text-title-large' | 'text-title-medium' | 'text-title-small' | 'text-body-large' | 'text-body-medium' | 'text-body-small' | 'text-caption';
-export type TextColorToken = 'primary' | 'secondary' | 'tertiary' | 'brand' | 'negative' | 'positive' | 'warning' | 'caution' | 'ai' | 'on-strong' | 'on-bold' | 'inherit';
+export type TextColorToken = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'brand' | 'negative' | 'positive' | 'warning' | 'caution' | 'ai' | 'on-strong' | 'on-bold' | 'inherit';
 export type TextColor = TextColorToken | `var(--${string})`;
 export type TextDecoration = 'none' | 'underline' | 'dotted-underline';
 export type TextAlign = 'left' | 'center' | 'right';