@ds-mo/ui 3.0.0 → 3.1.0

package/dist/react/ds-toggle.js

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

package/dist/react/ds-tooltip-data-viz.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 '@stencil/react-output-target/runtime';
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsTooltipDataViz as DsTooltipDataVizElement } from "@ds-mo/ui/dist/components/ds-tooltip-data-viz.js";
+export type DsTooltipDataVizEvents = NonNullable<unknown>;
+export declare const DsTooltipDataViz: StencilReactComponent<DsTooltipDataVizElement, DsTooltipDataVizEvents, Components.DsTooltipDataViz>;

package/dist/react/ds-tooltip-data-viz.js

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

package/dist/react/ds-tooltip.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 '@stencil/react-output-target/runtime';
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsTooltip as DsTooltipElement } from "@ds-mo/ui/dist/components/ds-tooltip.js";
+export type DsTooltipEvents = NonNullable<unknown>;
+export declare const DsTooltip: StencilReactComponent<DsTooltipElement, DsTooltipEvents, Components.DsTooltip, 'label'>;

package/dist/react/ds-tooltip.js

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

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

@@ -23,6 +23,7 @@ export declare class BarNav {
     basePath: string;
     /** Current route URL. When set with `basePath`, the active tab is derived automatically. */
     currentUrl: string;
+    moreTabsLabel: string;
     /** Emitted when the active tab changes. Detail = tab id. */
     dsTabChange: EventEmitter<string>;
     private resolvedTabs;

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

@@ -31,7 +31,7 @@ export declare class ButtonFilled {
     isInactive: boolean;
     /** Native button type. */
     type: 'button' | 'submit' | 'reset';
-    ariaLabel: string | undefined;
+    ariaLabel: string | null;
     dsClick: EventEmitter<MouseEvent>;
     private buttonEl;
     setFocus(): Promise<void>;

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

@@ -43,7 +43,7 @@ export declare class ButtonUnfilled {
     backgroundContrast?: ButtonUnfilledOnBackgroundContrast;
     /** Parent surface context for navigation and always-dark chrome. */
     background: ButtonUnfilledBackground | undefined;
-    ariaLabel: string | undefined;
+    ariaLabel: string | null;
     controls: string | undefined;
     expanded: boolean | undefined;
     haspopup: string | undefined;

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

@@ -11,6 +11,7 @@ export declare class CardDataVizDonut {
     heading: string;
     /** Card width token — also sets matching min-height. */
     cardWidth: CardDataVizDonutWidth;
+    filterLabel: string;
     /** Emits when the header filter control is activated. */
     dsFilterClick: EventEmitter<void>;
     private hasChartSlot;

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

@@ -12,6 +12,9 @@ export declare class CardSetting {
     cardWidth: CardSettingWidth;
     /** Controlled edit state — parent owns single-edit orchestration. */
     editing: boolean;
+    editLabel: string;
+    cancelLabel: string;
+    saveLabel: string;
     /** Emits when the user enters or exits edit mode. */
     dsEditingChange: EventEmitter<boolean>;
     private enterEdit;

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

@@ -1,6 +1,8 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import type { ChartDatum } from '../../utils/chart-types';
 export declare class ChartDonut {
+    locale: string | undefined;
+    noDataLabel: string;
     el: HTMLElement;
     /** Slices to render. Set as a JS property (not an HTML attribute). */
     data: ChartDatum[];

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

@@ -9,6 +9,7 @@ export type ChartLegendDirection = 'vertical' | 'horizontal';
  * render their own markup against the same `ChartDatum[]` data.
  */
 export declare class ChartLegend {
+    locale: string | undefined;
     /** Legend entries. Set as a JS property (not an HTML attribute). */
     items: ChartLegendItem[];
     direction: ChartLegendDirection;

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

@@ -1,11 +1,23 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class Checkbox {
+    internals: ElementInternals;
     private labelId;
     label: string;
     checked: boolean;
+    name: string | undefined;
+    value: string;
+    disabled: boolean;
+    required: boolean;
+    requiredMessage: string;
     indeterminate: boolean;
     isInactive: boolean;
     dsChange: EventEmitter<boolean>;
+    private initialChecked;
+    private formDisabled;
+    componentWillLoad(): void;
+    syncFormValue(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formResetCallback(): void;
     private handleActivate;
     private handleKeyDown;
     render(): any;

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

@@ -26,6 +26,8 @@ export declare class Chip {
     isInactive: boolean;
     /** Surface context for interaction-fill tokens when the chip sits on a non-default surface. */
     background: ChipBackground | undefined;
+    /** Accessible remove action. Use `{label}` as the chip-label placeholder. */
+    removeLabel: string;
     /** Fired when the remove button is clicked. */
     dsRemove: EventEmitter<void>;
     private handleRemove;

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

@@ -2,6 +2,8 @@ export type EmptyStateType = 'no-content' | 'no-results' | 'no-results-filter' |
 export declare class EmptyState {
     type: EmptyStateType;
     message: string | undefined;
+    /** Localized defaults keyed by empty-state type. Set as a JS property. */
+    messages: Partial<Record<EmptyStateType, string>>;
     render(): any;
 }
 //# sourceMappingURL=EmptyState.d.ts.map

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

@@ -2,9 +2,15 @@ import { EventEmitter } from '../../stencil-public-runtime';
 export type InputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'password';
 export declare class Input {
     el: HTMLElement;
+    internals: ElementInternals;
     private generatedId;
     private errorId;
     value: string;
+    name: string | undefined;
+    disabled: boolean;
+    required: boolean;
+    requiredMessage: string;
+    clearLabel: string;
     placeholder: string | undefined;
     type: InputType;
     isInactive: boolean;
@@ -13,11 +19,18 @@ export declare class Input {
     errorMessage: string | undefined;
     /** Associates the internal input with an external <label>. */
     inputId: string | undefined;
-    ariaLabel: string | undefined;
+    ariaLabel: string | null;
     ariaLabelledby: string | undefined;
     ariaDescribedby: string | undefined;
     dsChange: EventEmitter<string>;
     dsClear: EventEmitter<void>;
+    private initialValue;
+    private formDisabled;
+    componentWillLoad(): void;
+    syncFormValue(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
     setFocus(): Promise<void>;
     private handleInput;
     private handleClear;

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

@@ -21,6 +21,8 @@ export declare class Menu {
     anchorId: string | undefined;
     /** Show a visible ring on the initially focused menu item. Use only when the opener was keyboard-driven. */
     initialFocusVisible: boolean;
+    /** Accessible name for the popup menu. */
+    menuLabel: string;
     private shouldRender;
     private closing;
     private pos;

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

@@ -4,6 +4,9 @@ export declare class Pagination {
     totalPages: number;
     siblingCount: number;
     isInactive: boolean;
+    paginationLabel: string;
+    previousPageLabel: string;
+    nextPageLabel: string;
     dsPageChange: EventEmitter<number>;
     private go;
     render(): any;

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

@@ -32,6 +32,13 @@ export declare class PanelNav {
     userName: string;
     /** Single character shown in the collapsed avatar */
     userInitial: string;
+    dashboardLabel: string;
+    settingsLabel: string;
+    accountLabel: string;
+    dashboardNavigationLabel: string;
+    settingsNavigationLabel: string;
+    expandNavigationLabel: string;
+    collapseNavigationLabel: 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. */

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

@@ -14,6 +14,8 @@ export declare class PanelTools {
     items: PanelToolsItem[];
     /** JSON fallback for `items` — useful when framework bindings don't propagate arrays. */
     itemsJson: string;
+    toolsLabel: string;
+    toolShortcutsLabel: string;
     /** Emitted when a rail button is toggled. Detail = { id, selected }. */
     dsToolChange: EventEmitter<{
         id: PanelToolsToolId;

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

@@ -6,13 +6,25 @@ export interface RadioOption {
 }
 export declare class RadioGroup {
     el: HTMLElement;
+    internals: ElementInternals;
     options: RadioOption[];
     value: string;
+    name: string | undefined;
+    disabled: boolean;
+    required: boolean;
+    requiredMessage: string;
     direction: 'vertical' | 'horizontal';
     isInactive: boolean;
-    ariaLabel: string | undefined;
+    ariaLabel: string | null;
     ariaLabelledby: string | undefined;
     dsChange: EventEmitter<string>;
+    private initialValue;
+    private formDisabled;
+    componentWillLoad(): void;
+    syncFormValue(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
     private get activeItems();
     handleKeyDown(e: KeyboardEvent): void;
     private selectItem;

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

@@ -12,6 +12,7 @@ export type SelectWidth = ControlWidth;
  */
 export declare class Select {
     el: HTMLElement;
+    internals: ElementInternals;
     /**
      * Array of options. Set via JS property.
      * @example el.options = [{ label: 'Apple', value: 'apple' }];
@@ -19,6 +20,10 @@ export declare class Select {
     options: SelectOption[];
     /** Currently selected value. */
     value: string;
+    name: string | undefined;
+    disabled: boolean;
+    required: boolean;
+    requiredMessage: string;
     /** Placeholder shown when no value is selected. */
     placeholder: string;
     /** Control density (height, padding, icon, type). */
@@ -36,7 +41,7 @@ export declare class Select {
     activeFill: boolean;
     /** Show a 1px secondary inset border. Default on (matches unfilled button). */
     hasBorder: boolean;
-    ariaLabel: string | undefined;
+    ariaLabel: string | null;
     ariaLabelledby: string | undefined;
     /** Emits the selected value string. */
     dsChange: EventEmitter<string>;
@@ -45,11 +50,18 @@ export declare class Select {
     private menuEl;
     /** True when the open was keyboard-driven — menu shows initial focus ring. */
     private openWithFocusVisible;
+    private initialValue;
+    private formDisabled;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     onIsOpenChange(open: boolean): void;
     onOptionsChange(): void;
     onValueChange(): void;
+    syncFormValue(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
     private handleMenuSelect;
     private handleMenuClose;
     private syncMenuItems;

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

@@ -3,6 +3,7 @@ import { type ShellGradientPreset } from '../ShellGradientSwatch/shell-gradient-
 export declare class ShellGradientPicker {
     /** Active shell wash preset. */
     value: ShellGradientPreset;
+    groupLabel: string;
     dsChange: EventEmitter<ShellGradientPreset>;
     private handleSwatchSelect;
     private renderSwatch;

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

@@ -6,7 +6,7 @@ export declare class ShellGradientSwatch {
     /** Selected — brand stroke + halo over inner fill/border/interaction stack. */
     selected: boolean;
     isInactive: boolean;
-    ariaLabel: string | undefined;
+    ariaLabel: string | null;
     dsSelect: EventEmitter<ShellGradientPreset>;
     private handleClick;
     render(): any;

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

@@ -6,7 +6,7 @@ export declare class TabGroup {
     value: string;
     tabs: TabItem[];
     background: TabBackground | undefined;
-    ariaLabel: string | undefined;
+    ariaLabel: string | null;
     ariaLabelledby: string | undefined;
     orientation: 'horizontal' | 'vertical';
     dsChange: EventEmitter<string>;

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

@@ -6,7 +6,7 @@ export declare class TabGroupNav {
     value: string;
     tabs: TabItem[];
     background: TabGroupNavBackground | undefined;
-    ariaLabel: string | undefined;
+    ariaLabel: string | null;
     ariaLabelledby: string | undefined;
     orientation: 'horizontal' | 'vertical';
     /**

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

@@ -21,6 +21,12 @@ export declare class Table {
     sortState: SortState | undefined;
     loading: boolean;
     emptyMessage: string;
+    loadingLabel: string;
+    previousPageLabel: string;
+    nextPageLabel: string;
+    /** Use `{page}` and `{total}` placeholders. */
+    pageStatusLabel: string;
+    locale: string | undefined;
     /** Comma-separated zero-based row indices that are selected. */
     selectedRows: string;
     /** Page index (0-based). Enables built-in pagination when set alongside pageSize. */

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

@@ -3,7 +3,8 @@ export declare class Text {
     variant: TextVariant;
     /**
      * Heavier weight + tighter letter-spacing for the variant.
-     * `false` (default): regular weight (caption stays medium).
+     * `false` (default): one step below emphasis (display semibold, title/body
+     * medium, caption medium).
      * `true`: display bold, title/caption semibold, body medium.
      */
     emphasis: boolean;

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

@@ -1,8 +1,20 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class Toggle {
+    internals: ElementInternals;
     checked: boolean;
+    name: string | undefined;
+    value: string;
+    disabled: boolean;
+    required: boolean;
+    requiredMessage: string;
     isInactive: boolean;
     dsChange: EventEmitter<boolean>;
+    private initialChecked;
+    private formDisabled;
+    componentWillLoad(): void;
+    syncFormValue(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formResetCallback(): void;
     private handleClick;
     private handleKeyDown;
     render(): any;

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

@@ -37,6 +37,7 @@ export declare class Tooltip {
     private closeTimer;
     private anchor;
     private popupEl;
+    private positionObserver;
     private skipEnterAnimation;
     private isOpen;
     private mouseEnterHandler;
@@ -59,6 +60,11 @@ export declare class Tooltip {
     private unbindAnchor;
     private clearTimers;
     private destroyPopup;
+    /**
+     * Position after `ds-text` upgrades and lays out. Measuring synchronously in
+     * `mountPopup` reads a collapsed/fallback width and places left/right tips wrong.
+     */
+    private schedulePosition;
     /** Drop the open tip immediately (warm handoff to another tooltip). */
     private hideInstant;
     private show;