@ds-mo/ui 6.0.0 → 7.0.0

package/dist/react/components.d.ts

@@ -27,6 +27,7 @@ export { DsMenu } from "./ds-menu.js";
 export { DsModal } from "./ds-modal.js";
 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 { DsSelect } from "./ds-select.js";
@@ -35,7 +36,6 @@ export { DsShellGradientSwatch } from "./ds-shell-gradient-swatch.js";
 export { DsSkeleton } from "./ds-skeleton.js";
 export { DsSlider } from "./ds-slider.js";
 export { DsSwitch } from "./ds-switch.js";
-export { DsTabGroupNav } from "./ds-tab-group-nav.js";
 export { DsTabGroup } from "./ds-tab-group.js";
 export { DsTable } from "./ds-table.js";
 export { DsTag } from "./ds-tag.js";

package/dist/react/components.js

@@ -28,6 +28,7 @@ export { DsMenu } from "./ds-menu.js";
 export { DsModal } from "./ds-modal.js";
 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 { DsSelect } from "./ds-select.js";
@@ -36,7 +37,6 @@ export { DsShellGradientSwatch } from "./ds-shell-gradient-swatch.js";
 export { DsSkeleton } from "./ds-skeleton.js";
 export { DsSlider } from "./ds-slider.js";
 export { DsSwitch } from "./ds-switch.js";
-export { DsTabGroupNav } from "./ds-tab-group-nav.js";
 export { DsTabGroup } from "./ds-tab-group.js";
 export { DsTable } from "./ds-table.js";
 export { DsTag } from "./ds-tag.js";

package/dist/react/ds-panel-sub-nav.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 DsPanelSubNavCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsPanelSubNav as DsPanelSubNavElement } from "@ds-mo/ui/dist/components/ds-panel-sub-nav.js";
+export type DsPanelSubNavEvents = {
+    onDsChange: EventName<DsPanelSubNavCustomEvent<string>>;
+};
+export declare const DsPanelSubNav: StencilReactComponent<DsPanelSubNavElement, DsPanelSubNavEvents, Components.DsPanelSubNav>;

package/dist/react/ds-panel-sub-nav.js

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

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

@@ -37,6 +37,7 @@ export declare class BarNav {
     private overflowTabs;
     private menuInitialFocusVisible;
     private overflowRovingFocused;
+    private focusedTabId;
     private static readonly HOST_PROP_SYNC_BUDGET;
     private static readonly INTRINSIC_WIDTH_RETRY_MAX;
     private static readonly TAB_LAYOUT_COMMIT_MAX_FRAMES;
@@ -44,8 +45,8 @@ export declare class BarNav {
     private headerEl;
     private triggerEl;
     private menuEl;
-    private visibleTabGroupEl;
-    private probeTabGroupEl;
+    private visibleTabListEl;
+    private probeTabListEl;
     private resizeObserver;
     private intrinsicWidthRetryCount;
     private tabLayoutPendingFrames;
@@ -58,7 +59,9 @@ export declare class BarNav {
     /** Section waiting for URL + tabs to catch up after a cross-area navigation. */
     private pendingSection;
     private get effectiveValue();
+    private get renderedSelectableTabs();
     private get hasOverflowTabs();
+    private syncFocusedTabId;
     private digestTabsConfig;
     private resetTabOverflowLayout;
     onHostPropsChange(): void;
@@ -101,12 +104,15 @@ export declare class BarNav {
     private selectTab;
     /** Move focus to the selected tab in the visible tab group (after expand). */
     private focusVisibleSelectedTab;
-    private handleTabChange;
+    private focusVisibleTab;
+    private focusLastVisibleTab;
+    private findEnabledVisibleTab;
+    private handleTabKeyDown;
     private toggleTabMenu;
-    private handleTabRovingExit;
     private handleOverflowFocus;
     private handleOverflowBlur;
     private handleTriggerKeyDown;
+    private renderTabList;
     render(): any;
 }
 //# sourceMappingURL=BarNav.d.ts.map

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

@@ -29,6 +29,8 @@ export declare class ButtonFilled {
     contrast: ButtonFilledContrast;
     /** Disables interaction. */
     isInactive: boolean;
+    /** Shows an inline loader and prevents interaction without applying inactive opacity. */
+    isLoading: boolean;
     /** Native button type. */
     type: 'button' | 'submit' | 'reset';
     ariaLabel: string | null;

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

@@ -1,7 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { type ControlWidth } from '../../utils';
-export type ButtonUnfilledOnBackgroundContrast = 'default' | 'medium' | 'bold' | 'strong';
-export type ButtonUnfilledBackground = 'always-dark' | 'navigation';
+export type ButtonUnfilledBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'translucent' | 'inverted' | 'media' | 'always-dark';
 export type ButtonUnfilledVariant = 'icon' | 'label' | 'icon-label';
 export type ButtonUnfilledSize = 'md' | 'sm' | 'xs';
 export type ButtonUnfilledWidth = ControlWidth;
@@ -34,14 +33,11 @@ export declare class ButtonUnfilled {
     dot: boolean;
     /** Disables interaction. */
     isInactive: boolean;
+    /** Shows an inline loader and prevents interaction without applying inactive opacity. */
+    isLoading: boolean;
     /** Native button type. */
     type: 'button' | 'submit' | 'reset';
-    /**
-     * Foreground and interaction tokens when the button sits on a contrasting parent
-     * background (default, medium, bold, or strong).
-     */
-    backgroundContrast?: ButtonUnfilledOnBackgroundContrast;
-    /** Parent surface context for navigation and always-dark chrome. */
+    /** Actual parent surface context. Omit on primary and secondary surfaces. */
     background: ButtonUnfilledBackground | undefined;
     ariaLabel: string | null;
     controls: string | undefined;
@@ -58,7 +54,6 @@ export declare class ButtonUnfilled {
     private buttonEl;
     setFocus(): Promise<void>;
     private handleClick;
-    private effectiveContrast;
     private get showIcon();
     private get showLabel();
     private get showDot();

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

@@ -1,2 +1,2 @@
-export type { ButtonUnfilledBackground, ButtonUnfilledOnBackgroundContrast, ButtonUnfilledSize, ButtonUnfilledVariant, ButtonUnfilledWidth, } from './ButtonUnfilled';
+export type { ButtonUnfilledBackground, ButtonUnfilledSize, ButtonUnfilledVariant, ButtonUnfilledWidth, } from './ButtonUnfilled';
 //# sourceMappingURL=index.d.ts.map

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

@@ -8,7 +8,6 @@ import { EventEmitter } from '../../stencil-public-runtime';
  */
 export type ChipState = 'default' | 'active' | 'error' | 'caution';
 export type ChipSize = 'md' | 'sm' | 'xs';
-export type ChipBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
 /**
  * Removable chip — same density recipe as Tag, but colored by semantic `state`
  * (not intent × contrast). Not a toggle/select control; the only intentional
@@ -20,12 +19,8 @@ export declare class Chip {
     state: ChipState;
     size: ChipSize;
     rounded: boolean;
-    /** When true (default), shows the trailing dismiss control. */
-    removable: boolean;
     maxWidth: string | number | undefined;
     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. */

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

@@ -1,2 +1,2 @@
-export type { ChipState, ChipSize, ChipBackground } from './Chip';
+export type { ChipState, ChipSize } from './Chip';
 //# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,27 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { PanelSubNavItem } from './panel-sub-nav-types';
+export type PanelSubNavBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'translucent' | 'inverted' | 'media' | 'always-dark';
+export declare class PanelSubNav {
+    el: HTMLElement;
+    /** Required selected item id when enabled items exist. Keep synchronized with the visible panel. */
+    value: string;
+    /**
+     * Local panel tabs. Assign this array through the JavaScript property.
+     * Replace the array reference when items change.
+     */
+    items: PanelSubNavItem[];
+    /** Actual parent surface context. Omit on primary and secondary surfaces. */
+    background: PanelSubNavBackground | undefined;
+    ariaLabel: string | null;
+    ariaLabelledby: string | undefined;
+    dsChange: EventEmitter<string>;
+    private get enabledItems();
+    private get focusableId();
+    private selectItem;
+    private focusItem;
+    onValueChange(next: string, previous: string | undefined): void;
+    private findEnabled;
+    handleKeyDown(event: KeyboardEvent): void;
+    render(): any;
+}
+//# sourceMappingURL=PanelSubNav.d.ts.map

package/dist/types/components/PanelSubNav/panel-sub-nav-types.d.ts

@@ -0,0 +1,10 @@
+export interface PanelSubNavItem {
+    /** Unique tab id. Also used by the controlled panel's aria-labelledby. */
+    id: string;
+    label: string;
+    /** ID of the tabpanel controlled by this item. */
+    panelId: string;
+    /** Prevent selection and remove the item from keyboard navigation. */
+    isInactive?: boolean;
+}
+//# sourceMappingURL=panel-sub-nav-types.d.ts.map

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

@@ -37,6 +37,8 @@ export declare class PanelTools {
     private motionEnableGeneration;
     private transitionGeneration;
     private transitionFallbackTimer;
+    /** Ignores the old transition's terminal event when reversing direction. */
+    private ignoreReplacementTerminal;
     private get railItems();
     private get orderedRailItems();
     disconnectedCallback(): void;

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

@@ -1,14 +1,13 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { type TabItem } from './tab-item-utils';
-export type TabBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
+import { type TabGroupItem } from './tab-item-utils';
+export type TabBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'translucent' | 'inverted' | 'media' | 'always-dark';
 export declare class TabGroup {
     el: HTMLElement;
     value: string;
-    tabs: TabItem[];
+    tabs: TabGroupItem[];
     background: TabBackground | undefined;
     ariaLabel: string | null;
     ariaLabelledby: string | undefined;
-    orientation: 'horizontal' | 'vertical';
     dsChange: EventEmitter<string>;
     private get selectableTabs();
     private selectTab;

package/dist/types/components/TabGroup/tab-item-utils.d.ts

@@ -12,6 +12,20 @@ export interface TabItemTab {
     dot?: boolean;
 }
 export type TabItem = TabItemTab | TabItemDivider;
+export type TabGroupItemVariant = 'label' | 'icon' | 'icon-label';
+export interface TabGroupItemLabel extends TabItemTab {
+    variant?: 'label';
+    icon?: never;
+}
+export interface TabGroupItemIcon extends TabItemTab {
+    variant: 'icon';
+    icon: string;
+}
+export interface TabGroupItemIconLabel extends TabItemTab {
+    variant: 'icon-label';
+    icon: string;
+}
+export type TabGroupItem = TabGroupItemLabel | TabGroupItemIcon | TabGroupItemIconLabel | TabItemDivider;
 export declare function isTabDivider(item: TabItem): item is TabItemDivider;
 /** Tab entries that participate in selection, keyboard nav, and URL matching. */
 export declare function getSelectableTabs(tabs: TabItem[]): TabItemTab[];