@ds-mo/ui 15.2.0 → 15.4.0

package/dist/react/ds-setting-row-toggle.js

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

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

@@ -75,6 +75,8 @@ export declare class BarPageTitle {
     handleLayoutInputsChange(): void;
     private reportActionIdIssues;
     private get dividerVisible();
+    private get usesChromeTokens();
+    private get shellBarButtonBackground();
     private get selectableSections();
     private get hasSectionSelector();
     private get sectionTabs();

package/dist/types/components/BarTitle/bar-title-action-chrome.d.ts

@@ -15,6 +15,7 @@ export declare function renderBarTitleBack(options: {
     classPrefix: string;
     showBack: boolean;
     backAriaLabel: string;
+    background?: 'chrome';
     onBack: (event: MouseEvent) => void;
 }): any;
 export declare function renderBarTitleSectionTrigger(options: {
@@ -25,6 +26,8 @@ export declare function renderBarTitleSectionTrigger(options: {
     surfaceOpen: boolean;
     ariaLabel: string;
     selectedLabel: string;
+    background?: 'chrome';
+    labelColor?: 'primary' | 'inherit';
     setTriggerEl: (el: HTMLButtonElement | null) => void;
     onToggle: (event: MouseEvent) => void;
 }): any;
@@ -43,6 +46,7 @@ export declare function renderBarTitleActions(options: {
     actionMenuTriggerId: string;
     actionMenuId: string;
     actionTriggers: Map<string, FocusableBarTitleButton>;
+    buttonBackground?: 'chrome';
     setOverflowTriggerEl: (el: FocusableBarTitleButton | null) => void;
     toggleActionMenu: (id: string, event: MouseEvent) => void;
     emitAction: (id: string) => void;

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

@@ -1,7 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import type { ControlInsetDepth } from '../../utils/control-text';
 import type { ButtonPopup, ButtonSize, ButtonVariant, ButtonWidth } from '../../utils/button-types';
-export type ButtonUnfilledBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'translucent' | 'inverted' | 'media' | 'always-dark';
+export type ButtonUnfilledBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'translucent' | 'inverted' | 'media' | 'always-dark' | 'chrome';
 export type ButtonUnfilledVariant = ButtonVariant;
 export type ButtonUnfilledSize = ButtonSize;
 export type ButtonUnfilledWidth = ButtonWidth;
@@ -55,7 +55,10 @@ export declare class ButtonUnfilled {
     isLoading: boolean;
     /** Native button type. */
     type: 'button' | 'submit' | 'reset';
-    /** Actual parent surface context. Omit on primary and secondary surfaces. */
+    /**
+     * Actual parent surface context. Omit on primary and secondary surfaces; use
+     * chrome for shell surfaces.
+     */
     background: ButtonUnfilledBackground | undefined;
     /** Accessible name override. Required for icon-only buttons. */
     ariaLabel: string | null;

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

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+export type CardSettingVariant = 'editable' | 'immediate';
 export type CardSettingWidth = 'sm' | 'md' | 'lg';
 export type CardSettingAction = 'edit' | 'save' | 'cancel';
 export interface CardSettingActionDetail {
@@ -6,14 +7,17 @@ export interface CardSettingActionDetail {
     originalEvent: MouseEvent;
 }
 export declare class CardSetting {
+    el: HTMLElement;
     /** Section heading shown in the card header. */
     heading: string;
     /**
-     * Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the
-     * matching `--dimension-card-height-*` so the body fills available space
-     * even when the slot is empty.
+     * Card width token (`sm` / `md` / `lg`). Empty editable cards use the matching
+     * minimum-height token. Cards with body content, and immediate cards, fit
+     * that content.
      */
     cardWidth: CardSettingWidth;
+    /** Immediate settings omit edit actions and apply changes through their own controls. */
+    variant: CardSettingVariant;
     /** Controlled edit state — parent owns single-edit orchestration. */
     editing: boolean;
     editLabel: string;
@@ -21,7 +25,15 @@ export declare class CardSetting {
     saveLabel: string;
     /** Emits a controlled edit, save, or cancel request. */
     dsAction: EventEmitter<CardSettingActionDetail>;
+    private hasBannerContent;
+    private hasBodyContent;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
     private emitAction;
+    private readSlotContent;
+    private syncBannerContent;
+    private syncBodyContent;
+    private get hugContent();
     render(): any;
 }
 //# sourceMappingURL=CardSetting.d.ts.map

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

@@ -1,2 +1,2 @@
-export type { CardSettingAction, CardSettingActionDetail, CardSettingWidth } from './CardSetting';
+export type { CardSettingAction, CardSettingActionDetail, CardSettingVariant, CardSettingWidth, } from './CardSetting';
 //# sourceMappingURL=index.d.ts.map

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

@@ -26,6 +26,8 @@ export declare class Checkbox {
     indeterminate: boolean;
     /** Design-system inactive state. */
     isInactive: boolean;
+    /** Show full-row hover and pressed feedback for choice-list presentations. */
+    hasInteractionFill: boolean;
     /** Visual-only indicator for a composite control that owns selection semantics. */
     presentation: boolean;
     /** Emitted after user activation with the new checked state. */

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

@@ -0,0 +1,20 @@
+export type CheckboxGroupSize = 'lg' | 'md' | 'sm' | 'xs';
+export declare class CheckboxGroup {
+    el: HTMLElement;
+    private readonly labelId;
+    /** Visible label and accessible name for the checkbox list. */
+    label?: string;
+    /** Density of the label row; use the same size on every slotted Checkbox. */
+    size: CheckboxGroupSize;
+    /** Accessible name when visible group labeling is unavailable. */
+    ariaLabel: string | null;
+    /** Id reference for a visible group label. */
+    ariaLabelledby: string | undefined;
+    /** Id reference for supporting guidance or an error message. */
+    ariaDescribedby: string | undefined;
+    private get hasGroupLabel();
+    /** Settings rows own a separate heading; never mount the form group label there. */
+    private get showGroupLabel();
+    render(): any;
+}
+//# sourceMappingURL=CheckboxGroup.d.ts.map

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

@@ -1,3 +1,6 @@
+/**
+ * @slot actions - Optional recovery buttons or links. The consumer owns their labels and behavior.
+ */
 export declare class EmptyState {
     /** Optional decorative prefix glyph for the complete icon + title + body variant. */
     icon: string | undefined;

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

@@ -10,6 +10,9 @@ export declare class Field {
     error: boolean;
     /** Visible error associated with the slotted control while error is true. */
     errorMessage: string | undefined;
+    private constraintMessage;
+    private characterCount;
+    private characterLimit;
     private focused;
     private filled;
     private dirty;
@@ -40,6 +43,7 @@ export declare class Field {
     private get errorId();
     private get renderedDescription();
     private get renderedError();
+    private get visibleError();
     private readValue;
     private updateControlAttribute;
     private findControl;

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

@@ -0,0 +1,6 @@
+export declare class InlineBannerSettings {
+    /** Authored informational copy rendered without transformation. */
+    description: string;
+    render(): any;
+}
+//# sourceMappingURL=InlineBannerSettings.d.ts.map

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

@@ -20,6 +20,23 @@ export declare class Input {
     clearLabel: string;
     showPasswordLabel: string;
     hidePasswordLabel: string;
+    /** Minimum non-empty text length, in native UTF-16 code units. */
+    minLength: number | undefined;
+    /** Maximum text length. A visible counter accompanies this constraint by default. */
+    maxLength: number | undefined;
+    /** Error preserves extra text; restrict uses the browser's hard input limit. */
+    lengthBehavior: 'error' | 'restrict';
+    showCharacterCount: boolean;
+    /** Native whole-value regular expression for text-like input types. */
+    pattern: string | undefined;
+    patternMessage: string | undefined;
+    /** Optional local suggestions; free text always remains valid. Used with text/search fields. */
+    suggestions: string[];
+    /** Free-text tokens entered with Enter/comma and removable chips. Used with text/search fields. */
+    tokenized: boolean;
+    /** Committed values; value remains the editable draft when tokenized. */
+    tokens: string[];
+    removeTokenLabel: string;
     placeholder: string | undefined;
     type: InputType;
     /** Minimum accepted value when type is number. */
@@ -28,7 +45,11 @@ export declare class Input {
     max: number | undefined;
     /** Numeric increment used by native stepping and constraint validation. */
     step: number | undefined;
-    /** Align the editable value; number steppers follow the same inline edge. */
+    /** Show inset increment/decrement actions for number fields. Native numeric editing remains available when hidden. */
+    showStepper: boolean;
+    incrementLabel: string;
+    decrementLabel: string;
+    /** Align the editable value; number steppers sit on the opposite inline edge. */
     textAlign: InputTextAlign;
     /** Native browser autofill hint. */
     autoComplete: string | undefined;
@@ -60,7 +81,25 @@ export declare class Input {
     /** Identifies the active descendant while focus remains in the editable field. */
     ariaActiveDescendant: string | undefined;
     dsChange: EventEmitter<string>;
+    dsTokensChange: EventEmitter<string[]>;
+    dsSuggestionSelect: EventEmitter<string>;
     dsClear: EventEmitter<void>;
+    private constraintMessage;
+    private submitted;
+    private get managedByField();
+    private get visibleConstraintMessage();
+    private get hasCounter();
+    private suggestionsOpen;
+    private activeSuggestion;
+    private suggestionPosition;
+    private suggestionsReady;
+    private controlEl?;
+    private initialTokens;
+    private get supportsTextFeatures();
+    private get isTokenized();
+    private get filteredSuggestions();
+    private readonly suggestionPlacement;
+    private readonly suggestionInteraction;
     private initialValue;
     private inputEl?;
     private formDisabled;
@@ -73,10 +112,12 @@ export declare class Input {
     private passwordRevealed;
     private restorePasswordFocus;
     componentWillLoad(): void;
+    disconnectedCallback(): void;
     componentDidRender(): void;
     onTypeChange(): void;
     private syncAdornmentSlots;
     syncFormValue(): void;
+    private textConstraints;
     formDisabledCallback(disabled: boolean): void;
     formResetCallback(): void;
     formStateRestoreCallback(state: string | File | FormData | null): void;
@@ -86,6 +127,14 @@ export declare class Input {
     private handleBlur;
     private handleClear;
     private handleTogglePassword;
+    onSuggestionsChanged(): void;
+    private openSuggestions;
+    private closeSuggestions;
+    private addTokens;
+    private removeToken;
+    private selectSuggestion;
+    private handleTextKeyDown;
+    private handlePaste;
     private numericStepDisabled;
     private handleNumericStep;
     private renderNumericStepper;

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

@@ -17,6 +17,8 @@ export declare class InputTime {
     requiredMessage: string;
     /** Native time step in seconds. Defaults to minutes (`60`). */
     step: string | number;
+    /** Display format; submitted values remain HH:MM in either format. */
+    hourFormat: '12' | '24';
     min: string | undefined;
     max: string | undefined;
     size: InputTimeSize;
@@ -56,6 +58,7 @@ export declare class InputTime {
     private get isInvalid();
     componentWillLoad(): void;
     disconnectedCallback(): void;
+    onHourFormatChange(): void;
     syncFormValue(): void;
     onInteractionStateChange(): void;
     formDisabledCallback(disabled: boolean): void;

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export type MapEntityMarkerState = 'in-motion' | 'idling' | 'stationary' | 'immobilized' | 'stale';
+export type MapEntityMarkerState = 'moving' | 'idling' | 'stationary' | 'immobilized' | 'unknown';
 export declare class MapEntityMarker {
     /** Accessible action label. Describe what activating the marker opens. */
     label: string;
@@ -9,10 +9,10 @@ export declare class MapEntityMarker {
     icon: string;
     /** Semantic operating state that selects the marker background. */
     state: MapEntityMarkerState;
-    /** Adds the stale-data outline while preserving the last known operating state. */
-    stale: boolean;
-    /** Clockwise map heading for travel-group and vehicle icons. Values are normalized to 0–359. */
-    heading: number;
+    /** Adds an optional dashed outline without changing the operating state. */
+    dashed: boolean;
+    /** Clockwise map bearing for travel-group and vehicle icons. Values are normalized to 0–359. */
+    bearing: number;
     /** De-emphasizes this marker when an owner-managed selection is active elsewhere. */
     dimmed: boolean;
     /** Fired when the marker's native button is activated. */

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

@@ -12,6 +12,8 @@ export declare class Radio {
     private readonly instanceId;
     /** Visible choices in this one-of-many set. */
     options: RadioOption[];
+    /** Optional visible group label rendered above the options. */
+    groupLabel: string;
     /** Selected option value. */
     value: string;
     /** Visual and placement density for every option. */
@@ -30,6 +32,8 @@ export declare class Radio {
     direction: 'vertical' | 'horizontal';
     /** Design-system inactive state for the complete set. */
     isInactive: boolean;
+    /** Show full-row hover and pressed feedback for choice-list presentations. */
+    hasInteractionFill: boolean;
     /** Accessible name when visible group labeling is unavailable. */
     ariaLabel: string | null;
     /** Id reference for a visible group label. */
@@ -38,6 +42,9 @@ export declare class Radio {
     dsChange: EventEmitter<string>;
     private initialValue;
     private formDisabled;
+    private get hasGroupLabel();
+    /** Settings rows own a separate heading; never mount the form group label there. */
+    private get showGroupLabel();
     componentWillLoad(): void;
     syncFormValue(): void;
     formDisabledCallback(disabled: boolean): void;
@@ -48,6 +55,7 @@ export declare class Radio {
     private get activeItems();
     handleKeyDown(e: KeyboardEvent): void;
     private selectItem;
+    private renderOptions;
     render(): any;
 }
 //# sourceMappingURL=Radio.d.ts.map

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

@@ -0,0 +1,40 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface RadioTileOption {
+    value: string;
+    label: string;
+    description?: string;
+    isInactive?: boolean;
+}
+export declare class RadioTile {
+    el: HTMLElement;
+    internals: ElementInternals;
+    /** One-of-many choices displayed as fully clickable tiles. */
+    options: RadioTileOption[];
+    value: string;
+    name: string | undefined;
+    form: string | undefined;
+    disabled: boolean;
+    isInactive: boolean;
+    required: boolean;
+    requiredMessage: string;
+    direction: 'horizontal' | 'vertical';
+    inputId: string | undefined;
+    error: boolean;
+    ariaLabel: string | null;
+    ariaLabelledby: string | undefined;
+    ariaDescribedby: string | undefined;
+    dsChange: EventEmitter<string>;
+    private formDisabled;
+    private readonly generatedId;
+    private initialValue;
+    private get inactive();
+    componentWillLoad(): void;
+    syncFormValue(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
+    setFocus(): Promise<void>;
+    private select;
+    render(): any;
+}
+//# sourceMappingURL=RadioTile.d.ts.map

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

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

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

@@ -0,0 +1,19 @@
+export type SettingRowCheckboxPresentation = 'edit' | 'view';
+/** Padded settings-row composition for a Checkbox group. */
+export declare class SettingRowCheckbox {
+    el: HTMLElement;
+    /** Interactive Checkbox group or non-interactive saved-value readout. */
+    presentation: SettingRowCheckboxPresentation;
+    /** Settings heading shown in both presentations. Not CheckboxGroup's form label. */
+    label?: string;
+    /** Saved selected-value labels shown in view presentation. */
+    valueLabel?: string;
+    /** Optional consequence or supporting copy for the saved selection. */
+    description?: string;
+    private readonly headingId;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    private syncSlottedCheckboxGroup;
+    render(): any;
+}
+//# sourceMappingURL=SettingRowCheckbox.d.ts.map

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

@@ -0,0 +1,19 @@
+export type SettingRowRadioPresentation = 'edit' | 'view';
+/** Padded settings-row composition for a Radio group. */
+export declare class SettingRowRadio {
+    el: HTMLElement;
+    /** Interactive Radio group or non-interactive saved-value readout. */
+    presentation: SettingRowRadioPresentation;
+    /** Settings heading shown in both presentations. Not Radio's form groupLabel. */
+    label?: string;
+    /** Saved option label shown in view presentation. */
+    valueLabel?: string;
+    /** Optional consequence or supporting copy for the saved option. */
+    description?: string;
+    private readonly headingId;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    private syncSlottedRadio;
+    render(): any;
+}
+//# sourceMappingURL=SettingRowRadio.d.ts.map

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

@@ -0,0 +1,21 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SettingRowToggleVariant = 'emphasis' | 'non-emphasis';
+/** A labeled binary setting that applies immediately through its application owner. */
+export declare class SettingRowToggle {
+    /** Name of the enabled setting. */
+    label: string;
+    /** Supporting copy explaining the setting and its alternative. */
+    description?: string;
+    /** Controlled enabled state. */
+    checked: boolean;
+    /** Prevent changes while the setting is unavailable. */
+    disabled: boolean;
+    /** Typography recipe for the setting copy. */
+    variant: SettingRowToggleVariant;
+    /** Requests the next value; the application owns acceptance and persistence. */
+    dsChange: EventEmitter<boolean>;
+    private readonly rowId;
+    private handleChange;
+    render(): any;
+}
+//# sourceMappingURL=SettingRowToggle.d.ts.map

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

@@ -1,4 +1,8 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+export interface SliderTick {
+    value: number;
+    label?: string;
+}
 export type SliderValue = number | number[];
 export type SliderSize = 'md' | 'sm' | 'xs';
 export type SliderOrientation = 'horizontal' | 'vertical';
@@ -10,7 +14,9 @@ export declare class Slider {
     value: SliderValue;
     min: number;
     max: number;
-    step: number;
+    step: number | 'any';
+    /** Explicit ticks are the selectable snap points. Empty ticks with step='any' allow smooth adjustment. */
+    ticks: SliderTick[];
     /** Minimum number of steps kept between two range thumbs. */
     minStepsBetweenValues: number;
     /** Visible field label. Supply aria-label when the label is intentionally hidden. */
@@ -77,6 +83,7 @@ export declare class Slider {
     private get isDisabled();
     private get isRange();
     private get safeStep();
+    private get resolvedTicks();
     private get safeMin();
     private get safeMax();
     private get minimumGap();

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

@@ -1,2 +1,2 @@
-export type {} from './Slider';
+export type { SliderTick } from './Slider';
 //# sourceMappingURL=index.d.ts.map

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

@@ -25,11 +25,18 @@ export declare class Switch {
     presentation: boolean;
     dsChange: EventEmitter<boolean>;
     private initialChecked;
+    private checkedUpdateObserved;
+    private hasLoaded;
     private formDisabled;
     private focused;
     private touched;
+    private transitionsEnabled;
+    private transitionsFrame?;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    disconnectedCallback(): void;
+    handleCheckedChange(): void;
+    private scheduleTransitionsEnable;
     syncFormValue(): void;
     formDisabledCallback(disabled: boolean): void;
     formResetCallback(): void;

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

@@ -16,6 +16,13 @@ export declare class Textarea {
     readOnly: boolean;
     required: boolean;
     requiredMessage: string;
+    /** Minimum non-empty text length, in native UTF-16 code units. */
+    minLength: number | undefined;
+    /** Maximum text length. A visible counter accompanies this constraint by default. */
+    maxLength: number | undefined;
+    /** Error preserves extra text; restrict uses the browser's hard input limit. */
+    lengthBehavior: 'error' | 'restrict';
+    showCharacterCount: boolean;
     placeholder: string | undefined;
     /** Visible text rows before the field scrolls. */
     rows: number;
@@ -47,6 +54,11 @@ export declare class Textarea {
     ariaLabelledby: string | undefined;
     ariaDescribedby: string | undefined;
     dsChange: EventEmitter<string>;
+    private constraintMessage;
+    private submitted;
+    private get managedByField();
+    private get visibleConstraintMessage();
+    private get hasCounter();
     private initialValue;
     private textareaEl?;
     private formDisabled;

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

@@ -3,6 +3,8 @@ export declare class TimePicker {
     el: HTMLElement;
     /** Clock value as `HH:MM`. */
     value: string;
+    /** Display 12-hour lists with AM/PM or a 24-hour clock. Stored values remain HH:MM. */
+    hourFormat: '12' | '24';
     min: string | undefined;
     max: string | undefined;
     /** Native time step in seconds. Defaults to minutes (`60`). */
@@ -15,6 +17,8 @@ export declare class TimePicker {
     onValueChange(): void;
     setFocus(): Promise<void>;
     private parts;
+    private hours;
+    private displayHour;
     private minutes;
     private isDisabledTime;
     private optionParts;