@ds-mo/ui 15.6.0 → 15.8.0

package/dist/react/components.d.ts

@@ -68,6 +68,7 @@ export { DsMobileHeader } from "./ds-mobile-header.js";
 export { DsMobileSectionSwitcher } from "./ds-mobile-section-switcher.js";
 export { DsMobileSheetNav } from "./ds-mobile-sheet-nav.js";
 export { DsModal } from "./ds-modal.js";
+export { DsNavigationTabGroup } from "./ds-navigation-tab-group.js";
 export { DsPagination } from "./ds-pagination.js";
 export { DsPanelNav } from "./ds-panel-nav.js";
 export { DsPanelSubNav } from "./ds-panel-sub-nav.js";
@@ -79,6 +80,7 @@ export { DsRadioTile } from "./ds-radio-tile.js";
 export { DsRadio } from "./ds-radio.js";
 export { DsScore } from "./ds-score.js";
 export { DsScrollOverlay } from "./ds-scroll-overlay.js";
+export { DsSelectToggle } from "./ds-select-toggle.js";
 export { DsSelect } from "./ds-select.js";
 export { DsSettingRowCheckbox } from "./ds-setting-row-checkbox.js";
 export { DsSettingRowRadio } from "./ds-setting-row-radio.js";

package/dist/react/components.js

@@ -69,6 +69,7 @@ export { DsMobileHeader } from "./ds-mobile-header.js";
 export { DsMobileSectionSwitcher } from "./ds-mobile-section-switcher.js";
 export { DsMobileSheetNav } from "./ds-mobile-sheet-nav.js";
 export { DsModal } from "./ds-modal.js";
+export { DsNavigationTabGroup } from "./ds-navigation-tab-group.js";
 export { DsPagination } from "./ds-pagination.js";
 export { DsPanelNav } from "./ds-panel-nav.js";
 export { DsPanelSubNav } from "./ds-panel-sub-nav.js";
@@ -80,6 +81,7 @@ export { DsRadioTile } from "./ds-radio-tile.js";
 export { DsRadio } from "./ds-radio.js";
 export { DsScore } from "./ds-score.js";
 export { DsScrollOverlay } from "./ds-scroll-overlay.js";
+export { DsSelectToggle } from "./ds-select-toggle.js";
 export { DsSelect } from "./ds-select.js";
 export { DsSettingRowCheckbox } from "./ds-setting-row-checkbox.js";
 export { DsSettingRowRadio } from "./ds-setting-row-radio.js";

package/dist/react/ds-navigation-tab-group.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 DsNavigationTabGroupCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsNavigationTabGroup as DsNavigationTabGroupElement } from "@ds-mo/ui/dist/components/ds-navigation-tab-group.js";
+export type DsNavigationTabGroupEvents = {
+    onDsChange: EventName<DsNavigationTabGroupCustomEvent<string>>;
+};
+export declare const DsNavigationTabGroup: StencilReactComponent<DsNavigationTabGroupElement, DsNavigationTabGroupEvents, Components.DsNavigationTabGroup>;

package/dist/react/ds-navigation-tab-group.js

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

package/dist/react/ds-select-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 DsSelectToggleCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsSelectToggle as DsSelectToggleElement } from "@ds-mo/ui/dist/components/ds-select-toggle.js";
+export type DsSelectToggleEvents = {
+    onDsChange: EventName<DsSelectToggleCustomEvent<string>>;
+};
+export declare const DsSelectToggle: StencilReactComponent<DsSelectToggleElement, DsSelectToggleEvents, Components.DsSelectToggle>;

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

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

package/dist/styles/table.css

@@ -86,6 +86,14 @@
   min-block-size: var(--_table-viewport-fit-current-block-size, 100%);
 }
 
+/* At the settled position, the reserved host and visible surface have the same
+ * height. Follow the host directly so a resize cannot leave a stale strip below
+ * the footer while the viewport measurement catches up. */
+:where(.ds-table--viewport-fit-settled) {
+  block-size: 100%;
+  min-block-size: 100%;
+}
+
 :where(.ds-table--bounded .ds-table__frame),
 :where(.ds-table--bounded .ds-table__viewport) {
   min-block-size: 0;

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

@@ -0,0 +1,16 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { TabGroupSize, TabGroupWidth } from '../TabGroup/TabGroup';
+import type { TabGroupItem } from '../TabGroup/tab-item-utils';
+export declare class NavigationTabGroup {
+    /** Currently selected local view. User activation updates this value. */
+    value: string;
+    tabs: TabGroupItem[];
+    size: TabGroupSize;
+    width: TabGroupWidth;
+    ariaLabel: string | null;
+    ariaLabelledby: string | undefined;
+    dsChange: EventEmitter<string>;
+    private handleChange;
+    render(): any;
+}
+//# sourceMappingURL=NavigationTabGroup.d.ts.map

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

@@ -0,0 +1,46 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type ControlWidth } from '../../utils';
+export interface SelectToggleOption {
+    value: string;
+    label: string;
+    icon?: string;
+}
+export type SelectToggleVariant = 'label' | 'icon' | 'icon-label';
+export type SelectToggleSize = 'sm' | 'md' | 'lg';
+export declare class SelectToggle {
+    el: HTMLElement;
+    /** Exactly two or three choices, each with a unique value and accessible label. */
+    options: SelectToggleOption[];
+    /** Current choice. User activation updates this value and emits dsChange. */
+    value: string;
+    /** Show the current label, icon, or both. Icon variants require an icon on each choice. */
+    variant: SelectToggleVariant;
+    /** Collapse an icon-label choice to its icon in a narrow table caption or data toolbar. */
+    collapseLabel: boolean;
+    /** Control density: small, medium, or large; the trailing indicator scales with it. */
+    size: SelectToggleSize;
+    /** Hug the content or fill the parent. */
+    width: ControlWidth;
+    /** Show an inset border; both treatments keep the transparent unfilled surface. */
+    hasBorder: boolean;
+    /** Prevent interaction. */
+    isInactive: boolean;
+    /** Optional stable context prepended to the changing accessible choice name. */
+    ariaLabel: string | null;
+    dsChange: EventEmitter<string>;
+    private captionCompact;
+    private captionCompactDisconnect;
+    private hasLoaded;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    onCollapseLabelChange(): void;
+    reconcileValue(): void;
+    private get validOptions();
+    private advance;
+    private syncCaptionCompactObserver;
+    private disconnectCaptionCompactObserver;
+    render(): any;
+}
+//# sourceMappingURL=SelectToggle.d.ts.map

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

@@ -82,6 +82,7 @@ export declare class ShellApp {
     el: HTMLElement;
     private toolsFullscreen;
     private resolvedMode;
+    private wideViewport;
     private managedToolsOpen;
     private managedActiveTool;
     private managedToolPresentation;

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

@@ -25,7 +25,7 @@ export declare class Slider {
     showValue: boolean;
     size: SliderSize;
     orientation: SliderOrientation;
-    /** Align the thumb edge with full-width rail endpoints, or its center with inset rail endpoints. */
+    /** Align the inner orb edge with full-width rail endpoints, or its center with inset rail endpoints. */
     thumbAlignment: SliderThumbAlignment;
     name: string | undefined;
     form: string | undefined;

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

@@ -12,8 +12,8 @@ export declare class TabGroup {
     size: TabGroupSize;
     /** Width fit — hug content (default) or fill the parent with equal-width segments. */
     width: TabGroupWidth;
-    /** Show the segmented control's outer background, border, and inset. */
-    presentation: 'segmented' | 'tabs';
+    /** Visual treatment; use NavigationTabGroup for the outset navigation presentation. */
+    presentation: 'segmented' | 'tabs' | 'navigation';
     hasContainer: boolean;
     background: TabBackground | undefined;
     ariaLabel: string | null;

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

@@ -40,6 +40,8 @@ export declare class Table {
     caption: string;
     /** Shows a matching presentational title bar above the native table frame. */
     captionVisibility: TableCaptionVisibility;
+    /** Replace only the data frame with application-owned content; caption and footer remain shared. */
+    alternateView: boolean;
     /**
      * Opt in to the table-owned column customizer. The `columns` prop remains the
      * catalog; hidden and ordered columns are controlled separately. The trigger
@@ -158,6 +160,7 @@ export declare class Table {
     private viewportFitSettled;
     private headerPresent;
     private headerUsesToolbar;
+    private captionTrailingPresent;
     private footerSlotPresence;
     private fitPageSize;
     private actionMenu;