@ds-mo/ui 15.3.0 → 15.4.0

package/dist/react/components.d.ts

@@ -29,6 +29,7 @@ export { DsCardSetting } from "./ds-card-setting.js";
 export { DsCardSettingsScope } from "./ds-card-settings-scope.js";
 export { DsChartLegend } from "./ds-chart-legend.js";
 export { DsChart } from "./ds-chart.js";
+export { DsCheckboxGroup } from "./ds-checkbox-group.js";
 export { DsCheckbox } from "./ds-checkbox.js";
 export { DsChip } from "./ds-chip.js";
 export { DsCodeBlock } from "./ds-code-block.js";
@@ -48,6 +49,7 @@ export { DsEmptyState } from "./ds-empty-state.js";
 export { DsField } from "./ds-field.js";
 export { DsFilterMenu } from "./ds-filter-menu.js";
 export { DsIcon } from "./ds-icon.js";
+export { DsInlineBannerSettings } from "./ds-inline-banner-settings.js";
 export { DsInputDate } from "./ds-input-date.js";
 export { DsInputTime } from "./ds-input-time.js";
 export { DsInput } from "./ds-input.js";
@@ -78,7 +80,9 @@ export { DsRadio } from "./ds-radio.js";
 export { DsScore } from "./ds-score.js";
 export { DsScrollOverlay } from "./ds-scroll-overlay.js";
 export { DsSelect } from "./ds-select.js";
-export { DsSettingRow } from "./ds-setting-row.js";
+export { DsSettingRowCheckbox } from "./ds-setting-row-checkbox.js";
+export { DsSettingRowRadio } from "./ds-setting-row-radio.js";
+export { DsSettingRowToggle } from "./ds-setting-row-toggle.js";
 export { DsShellApp } from "./ds-shell-app.js";
 export { DsShellPage } from "./ds-shell-page.js";
 export { DsShellTools } from "./ds-shell-tools.js";

package/dist/react/components.js

@@ -30,6 +30,7 @@ export { DsCardSetting } from "./ds-card-setting.js";
 export { DsCardSettingsScope } from "./ds-card-settings-scope.js";
 export { DsChartLegend } from "./ds-chart-legend.js";
 export { DsChart } from "./ds-chart.js";
+export { DsCheckboxGroup } from "./ds-checkbox-group.js";
 export { DsCheckbox } from "./ds-checkbox.js";
 export { DsChip } from "./ds-chip.js";
 export { DsCodeBlock } from "./ds-code-block.js";
@@ -49,6 +50,7 @@ export { DsEmptyState } from "./ds-empty-state.js";
 export { DsField } from "./ds-field.js";
 export { DsFilterMenu } from "./ds-filter-menu.js";
 export { DsIcon } from "./ds-icon.js";
+export { DsInlineBannerSettings } from "./ds-inline-banner-settings.js";
 export { DsInputDate } from "./ds-input-date.js";
 export { DsInputTime } from "./ds-input-time.js";
 export { DsInput } from "./ds-input.js";
@@ -79,7 +81,9 @@ export { DsRadio } from "./ds-radio.js";
 export { DsScore } from "./ds-score.js";
 export { DsScrollOverlay } from "./ds-scroll-overlay.js";
 export { DsSelect } from "./ds-select.js";
-export { DsSettingRow } from "./ds-setting-row.js";
+export { DsSettingRowCheckbox } from "./ds-setting-row-checkbox.js";
+export { DsSettingRowRadio } from "./ds-setting-row-radio.js";
+export { DsSettingRowToggle } from "./ds-setting-row-toggle.js";
 export { DsShellApp } from "./ds-shell-app.js";
 export { DsShellPage } from "./ds-shell-page.js";
 export { DsShellTools } from "./ds-shell-tools.js";

package/dist/react/ds-checkbox-group.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 { StencilReactComponent } from './react-runtime.js';
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsCheckboxGroup as DsCheckboxGroupElement } from "@ds-mo/ui/dist/components/ds-checkbox-group.js";
+export type DsCheckboxGroupEvents = NonNullable<unknown>;
+export declare const DsCheckboxGroup: StencilReactComponent<DsCheckboxGroupElement, DsCheckboxGroupEvents, Components.DsCheckboxGroup>;

package/dist/react/ds-checkbox-group.js

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

package/dist/react/ds-inline-banner-settings.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 { StencilReactComponent } from './react-runtime.js';
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsInlineBannerSettings as DsInlineBannerSettingsElement } from "@ds-mo/ui/dist/components/ds-inline-banner-settings.js";
+export type DsInlineBannerSettingsEvents = NonNullable<unknown>;
+export declare const DsInlineBannerSettings: StencilReactComponent<DsInlineBannerSettingsElement, DsInlineBannerSettingsEvents, Components.DsInlineBannerSettings, 'description'>;

package/dist/react/ds-inline-banner-settings.js

@@ -0,0 +1,12 @@
+'use client';
+import { createComponent } from './react-runtime.js';
+import React from 'react';
+import { DsInlineBannerSettings as DsInlineBannerSettingsElement, defineCustomElement as defineDsInlineBannerSettings } from "@ds-mo/ui/dist/components/ds-inline-banner-settings.js";
+export const DsInlineBannerSettings = /*@__PURE__*/ createComponent({
+    tagName: 'ds-inline-banner-settings',
+    elementClass: DsInlineBannerSettingsElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {},
+    defineCustomElement: defineDsInlineBannerSettings
+});

package/dist/react/ds-setting-row-checkbox.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 { StencilReactComponent } from './react-runtime.js';
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsSettingRowCheckbox as DsSettingRowCheckboxElement } from "@ds-mo/ui/dist/components/ds-setting-row-checkbox.js";
+export type DsSettingRowCheckboxEvents = NonNullable<unknown>;
+export declare const DsSettingRowCheckbox: StencilReactComponent<DsSettingRowCheckboxElement, DsSettingRowCheckboxEvents, Components.DsSettingRowCheckbox>;

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

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

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

@@ -0,0 +1,9 @@
+/**
+ * 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 { StencilReactComponent } from './react-runtime.js';
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsSettingRowRadio as DsSettingRowRadioElement } from "@ds-mo/ui/dist/components/ds-setting-row-radio.js";
+export type DsSettingRowRadioEvents = NonNullable<unknown>;
+export declare const DsSettingRowRadio: StencilReactComponent<DsSettingRowRadioElement, DsSettingRowRadioEvents, Components.DsSettingRowRadio>;

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

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

package/dist/react/ds-setting-row-toggle.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 './react-runtime.js';
+import { type DsSettingRowToggleCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsSettingRowToggle as DsSettingRowToggleElement } from "@ds-mo/ui/dist/components/ds-setting-row-toggle.js";
+export type DsSettingRowToggleEvents = {
+    onDsChange: EventName<DsSettingRowToggleCustomEvent<boolean>>;
+};
+export declare const DsSettingRowToggle: StencilReactComponent<DsSettingRowToggleElement, DsSettingRowToggleEvents, Components.DsSettingRowToggle, 'label'>;

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

@@ -7,11 +7,13 @@ 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`). Editable cards also use the matching
-     * minimum-height token; immediate cards fit their content.
+     * 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. */
@@ -23,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/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/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/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/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/{SettingRow/SettingRow.d.ts → SettingRowToggle/SettingRowToggle.d.ts}

@@ -1,6 +1,7 @@
 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 SettingRow {
+export declare class SettingRowToggle {
     /** Name of the enabled setting. */
     label: string;
     /** Supporting copy explaining the setting and its alternative. */
@@ -9,10 +10,12 @@ export declare class SettingRow {
     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=SettingRow.d.ts.map
+//# sourceMappingURL=SettingRowToggle.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;