@ds-mo/ui 8.0.1 → 8.2.0

package/dist/framework/angular.d.ts

@@ -3,4 +3,5 @@ export * from '../angular/proxies.js';
 export { BooleanValueAccessor } from '../angular/boolean-value-accessor.js';
 export { RadioValueAccessor } from '../angular/radio-value-accessor.js';
 export { SelectValueAccessor } from '../angular/select-value-accessor.js';
+export { SelectMultiValueAccessor } from './select-multi-value-accessor.js';
 export { TextValueAccessor } from '../angular/text-value-accessor.js';

package/dist/framework/angular.js

@@ -3,4 +3,5 @@ export * from '../angular/proxies.js';
 export { BooleanValueAccessor } from '../angular/boolean-value-accessor.js';
 export { RadioValueAccessor } from '../angular/radio-value-accessor.js';
 export { SelectValueAccessor } from '../angular/select-value-accessor.js';
+export { SelectMultiValueAccessor } from './select-multi-value-accessor.js';
 export { TextValueAccessor } from '../angular/text-value-accessor.js';

package/dist/framework/select-multi-value-accessor.d.ts

@@ -0,0 +1,9 @@
+import { ElementRef } from '@angular/core';
+import { ValueAccessor } from '../angular/value-accessor';
+import * as i0 from "@angular/core";
+export declare class SelectMultiValueAccessor extends ValueAccessor {
+    constructor(el: ElementRef<HTMLDsSelectMultiElement>);
+    writeValue(value: unknown): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectMultiValueAccessor, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SelectMultiValueAccessor, "ds-select-multi", never, {}, {}, never, never, true, never>;
+}

package/dist/framework/select-multi-value-accessor.js

@@ -0,0 +1,40 @@
+import { Directive, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ValueAccessor } from '../angular/value-accessor.js';
+import * as i0 from "@angular/core";
+export class SelectMultiValueAccessor extends ValueAccessor {
+    constructor(el) {
+        super(el);
+    }
+    writeValue(value) {
+        const values = Array.isArray(value)
+            ? value.filter((item) => typeof item === 'string')
+            : [];
+        this.el.nativeElement.values = values;
+        this.lastValue = values;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SelectMultiValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SelectMultiValueAccessor, isStandalone: true, selector: "ds-select-multi", host: { listeners: { "dsChange": "handleChangeEvent($event.target?.[\"values\"])" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SelectMultiValueAccessor),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SelectMultiValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ds-select-multi',
+                    host: {
+                        '(dsChange)': 'handleChangeEvent($event.target?.["values"])',
+                    },
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SelectMultiValueAccessor),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });

package/dist/lib/components/Menu/menu-position.d.ts

@@ -1,19 +1,6 @@
-export type MenuSide = 'top' | 'right' | 'bottom' | 'left';
-export type MenuAlign = 'start' | 'center' | 'end';
-export interface MenuPositionInput {
-    anchorRect: Pick<DOMRectReadOnly, 'top' | 'left' | 'right' | 'bottom' | 'width' | 'height'>;
-    popupWidth: number;
-    popupHeight: number;
-    side: MenuSide;
-    align: MenuAlign;
-    sideOffsetPx: number;
-    alignOffsetPx: number;
-    viewportPadPx: number;
-    viewportWidth: number;
-    viewportHeight: number;
-}
-/** Pure layout math for ds-menu — anchor rect + placement props → viewport-fixed x/y. */
-export declare function computeMenuPosition(input: MenuPositionInput): {
-    x: number;
-    y: number;
-};
+import { computeAnchoredPopupPosition, type AnchoredPopupAlign, type AnchoredPopupPositionInput, type AnchoredPopupSide } from '../../utils/anchored-popup';
+export type MenuSide = AnchoredPopupSide;
+export type MenuAlign = AnchoredPopupAlign;
+export type MenuPositionInput = AnchoredPopupPositionInput;
+/** Backward-compatible menu alias for the shared anchored-popup layout math. */
+export declare const computeMenuPosition: typeof computeAnchoredPopupPosition;

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/lib/utils/anchored-popup.d.ts

@@ -0,0 +1,19 @@
+export type AnchoredPopupSide = 'top' | 'right' | 'bottom' | 'left';
+export type AnchoredPopupAlign = 'start' | 'center' | 'end';
+export interface AnchoredPopupPositionInput {
+    anchorRect: Pick<DOMRectReadOnly, 'top' | 'left' | 'right' | 'bottom' | 'width' | 'height'>;
+    popupWidth: number;
+    popupHeight: number;
+    side: AnchoredPopupSide;
+    align: AnchoredPopupAlign;
+    sideOffsetPx: number;
+    alignOffsetPx: number;
+    viewportPadPx: number;
+    viewportWidth: number;
+    viewportHeight: number;
+}
+/** Pure viewport-fixed anchored-popup layout math shared by menus and selects. */
+export declare function computeAnchoredPopupPosition(input: AnchoredPopupPositionInput): {
+    x: number;
+    y: number;
+};

package/dist/react/components.d.ts

@@ -29,7 +29,8 @@ 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";
 export { DsShellGradientSwatch } from "./ds-shell-gradient-swatch.js";

package/dist/react/components.js

@@ -30,7 +30,8 @@ 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";
 export { DsShellGradientSwatch } from "./ds-shell-gradient-swatch.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-select-multi.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 DsSelectMultiCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsSelectMulti as DsSelectMultiElement } from "@ds-mo/ui/dist/components/ds-select-multi.js";
+export type DsSelectMultiEvents = {
+    onDsChange: EventName<DsSelectMultiCustomEvent<string[]>>;
+    onDsClear: EventName<DsSelectMultiCustomEvent<void>>;
+    onDsOpenChange: EventName<DsSelectMultiCustomEvent<boolean>>;
+};
+export declare const DsSelectMulti: StencilReactComponent<DsSelectMultiElement, DsSelectMultiEvents, Components.DsSelectMulti>;

package/dist/react/ds-select-multi.js

@@ -0,0 +1,16 @@
+'use client';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+import { DsSelectMulti as DsSelectMultiElement, defineCustomElement as defineDsSelectMulti } from "@ds-mo/ui/dist/components/ds-select-multi.js";
+export const DsSelectMulti = /*@__PURE__*/ createComponent({
+    tagName: 'ds-select-multi',
+    elementClass: DsSelectMultiElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsChange: 'dsChange',
+        onDsClear: 'dsClear',
+        onDsOpenChange: 'dsOpenChange'
+    },
+    defineCustomElement: defineDsSelectMulti
+});

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

@@ -8,5 +8,7 @@ import type { Components } from "@ds-mo/ui/dist/components";
 import { DsSelect as DsSelectElement } from "@ds-mo/ui/dist/components/ds-select.js";
 export type DsSelectEvents = {
     onDsChange: EventName<DsSelectCustomEvent<string>>;
+    onDsClear: EventName<DsSelectCustomEvent<void>>;
+    onDsOpenChange: EventName<DsSelectCustomEvent<boolean>>;
 };
 export declare const DsSelect: StencilReactComponent<DsSelectElement, DsSelectEvents, Components.DsSelect>;

package/dist/react/ds-select.js

@@ -7,6 +7,10 @@ export const DsSelect = /*@__PURE__*/ createComponent({
     elementClass: DsSelectElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
-    events: { onDsChange: 'dsChange' },
+    events: {
+        onDsChange: 'dsChange',
+        onDsClear: 'dsClear',
+        onDsOpenChange: 'dsOpenChange'
+    },
     defineCustomElement: defineDsSelect
 });

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/Badge/Badge.d.ts

@@ -12,6 +12,8 @@ export declare class Badge {
     surface: BadgeSurface;
     /** Direct ring background override for component-local surfaces. */
     background: string | undefined;
+    /** Show the separation ring when the badge overlaps an icon or other content. */
+    hasRing: boolean;
     /**
      * Ring samples the shell gradient stack (base fill + wash) instead of a flat
      * `box-shadow`. Auto-enabled under an AppShell with an active gradient preset;

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

@@ -27,6 +27,8 @@ export declare class ButtonFilled {
      * bold → faint, strong → medium, medium → strong, faint → bold.
      */
     contrast: ButtonFilledContrast;
+    /** Use the half-radius treatment instead of the default control radius. */
+    rounded: boolean;
     /** Disables interaction. */
     isInactive: boolean;
     /** Shows an inline loader and prevents interaction without applying inactive opacity. */

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;
     /**
@@ -29,6 +30,8 @@ export declare class ButtonUnfilled {
     activeFill: boolean;
     /** Show a 1px secondary inset border. Default on; shell chrome can pass `false`. */
     hasBorder: boolean;
+    /** Use the half-radius treatment instead of the default control radius. */
+    rounded: boolean;
     /** Show a notification dot at the top-right of the icon zone (icon variant only). */
     dot: boolean;
     /** Disables interaction. */
@@ -43,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/Checkbox/Checkbox.d.ts

@@ -1,18 +1,34 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+export type CheckboxSize = 'md' | 'sm' | 'xs';
 export declare class Checkbox {
     internals: ElementInternals;
     private labelId;
+    /** Visible label and accessible name. Omitted only in presentation mode. */
     label: string;
+    /** Current checked state. */
     checked: boolean;
+    /** Visual and placement density. */
+    size: CheckboxSize;
+    /** Native form field name. */
     name: string | undefined;
+    /** Submitted value when checked. */
     value: string;
+    /** Native disabled state. */
     disabled: boolean;
+    /** Require the checkbox to be checked for form validity. */
     required: boolean;
+    /** Validation message used when a required checkbox is unchecked. */
     requiredMessage: string;
+    /** Mixed visual state. Activation clears it before toggling checked. */
     indeterminate: boolean;
+    /** Design-system inactive state. */
     isInactive: boolean;
+    /** Visual-only indicator for a composite control that owns selection semantics. */
+    presentation: boolean;
+    /** Emitted after user activation with the new checked state. */
     dsChange: EventEmitter<boolean>;
     private initialChecked;
+    private initialIndeterminate;
     private formDisabled;
     componentWillLoad(): void;
     syncFormValue(): void;

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

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

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

@@ -1,9 +1,10 @@
-export type EmptyStateType = 'no-content' | 'no-results' | 'no-results-filter' | 'no-access';
 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>>;
+    /** Optional decorative prefix glyph for the complete icon + title + body variant. */
+    icon: string | undefined;
+    /** Optional visual title. Use with body; required when icon is provided. */
+    heading: string | undefined;
+    /** Explanatory empty-state copy. Every supported variant includes body text. */
+    body: string;
     render(): any;
 }
 //# sourceMappingURL=EmptyState.d.ts.map

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/Menu/menu-position.d.ts

@@ -1,20 +1,7 @@
-export type MenuSide = 'top' | 'right' | 'bottom' | 'left';
-export type MenuAlign = 'start' | 'center' | 'end';
-export interface MenuPositionInput {
-    anchorRect: Pick<DOMRectReadOnly, 'top' | 'left' | 'right' | 'bottom' | 'width' | 'height'>;
-    popupWidth: number;
-    popupHeight: number;
-    side: MenuSide;
-    align: MenuAlign;
-    sideOffsetPx: number;
-    alignOffsetPx: number;
-    viewportPadPx: number;
-    viewportWidth: number;
-    viewportHeight: number;
-}
-/** Pure layout math for ds-menu — anchor rect + placement props → viewport-fixed x/y. */
-export declare function computeMenuPosition(input: MenuPositionInput): {
-    x: number;
-    y: number;
-};
+import { computeAnchoredPopupPosition, type AnchoredPopupAlign, type AnchoredPopupPositionInput, type AnchoredPopupSide } from '../../utils/anchored-popup';
+export type MenuSide = AnchoredPopupSide;
+export type MenuAlign = AnchoredPopupAlign;
+export type MenuPositionInput = AnchoredPopupPositionInput;
+/** Backward-compatible menu alias for the shared anchored-popup layout math. */
+export declare const computeMenuPosition: typeof computeAnchoredPopupPosition;
 //# sourceMappingURL=menu-position.d.ts.map

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