@ds-mo/ui 14.0.1 → 14.2.0

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

@@ -3,7 +3,7 @@
  * 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 DsTableCustomEvent, type TableCellActionDetail, type TableGroupCollapseChangeDetail, type TableLoadMoreDetail, type TableRowActivateDetail, type TableSelectionChangeDetail, type TableSortChangeDetail } from "@ds-mo/ui";
+import { type DsTableCustomEvent, type TableCellActionDetail, type TableGroupCollapseChangeDetail, type TableGroupLoadMoreDetail, type TableLoadMoreDetail, type TableRowActivateDetail, type TableSelectionChangeDetail, type TableSortChangeDetail } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsTable as DsTableElement } from "@ds-mo/ui/dist/components/ds-table.js";
 export type DsTableEvents = {
@@ -11,6 +11,7 @@ export type DsTableEvents = {
     onDsGroupCollapseChange: EventName<DsTableCustomEvent<TableGroupCollapseChangeDetail>>;
     onDsSelectionChange: EventName<DsTableCustomEvent<TableSelectionChangeDetail>>;
     onDsLoadMore: EventName<DsTableCustomEvent<TableLoadMoreDetail>>;
+    onDsGroupLoadMore: EventName<DsTableCustomEvent<TableGroupLoadMoreDetail>>;
     onDsCellAction: EventName<DsTableCustomEvent<TableCellActionDetail>>;
     onDsRowActivate: EventName<DsTableCustomEvent<TableRowActivateDetail>>;
 };

package/dist/react/ds-table.js

@@ -12,6 +12,7 @@ export const DsTable = /*@__PURE__*/ createComponent({
         onDsGroupCollapseChange: 'dsGroupCollapseChange',
         onDsSelectionChange: 'dsSelectionChange',
         onDsLoadMore: 'dsLoadMore',
+        onDsGroupLoadMore: 'dsGroupLoadMore',
         onDsCellAction: 'dsCellAction',
         onDsRowActivate: 'dsRowActivate'
     },

package/dist/styles/table.css

@@ -1172,10 +1172,6 @@
   pointer-events: none;
 }
 
-:where(.ds-table__group:last-child[data-collapsed='true'] .ds-table__group-content)::after {
-  display: none;
-}
-
 :where(.ds-table__table--selectable .ds-table__group-content),
 :where(.ds-table__sticky-group--selectable .ds-table__group-content) {
   /* Selection lane is the real 40px column — don't add start pad or flex gap. */
@@ -1290,7 +1286,7 @@
 }
 
 :where(.ds-table__skeleton-row:last-child .ds-table__cell),
-:where(.ds-table__load-row:last-child .ds-table__load-cell),
+:where(.ds-table__load-body .ds-table__load-row:last-child .ds-table__load-cell),
 :where(.ds-table__state-row:last-child .ds-table__state-cell),
 :where(.ds-table__body:last-child .ds-table__row:last-child .ds-table__cell) {
   border-block-end: 0;

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

@@ -8,11 +8,15 @@ export declare class MobileSheetNav {
     dashboardGroups: PanelNavGroup[];
     settingsGroups: PanelNavGroup[];
     currentUrl: string;
+    /** Whether the router-derived current area owns the active mobile stage. */
+    routeSelectionActive: boolean;
     navigationLabel: string;
     dashboardLabel: string;
     settingsLabel: string;
     accountLabel: string;
     helpLabel: string;
+    /** Show the optional Account shortcut in the sheet header. */
+    showAccount: boolean;
     dsAreaSelect: EventEmitter<string>;
     dsBrowseContextChange: EventEmitter<NavChromeStyle>;
     dsClose: EventEmitter<void>;

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

@@ -150,6 +150,7 @@ export declare class ShellApp {
     private handleManagedHeaderBack;
     private handleManagedHeaderAction;
     private handleManagedSheetToggle;
+    private activateManagedMobileTool;
     private handleManagedMobileDestination;
     private handleManagedAreaSelect;
     private handleManagedBrowseContext;

package/dist/types/components/ShellApp/shell-app-types.d.ts

@@ -34,6 +34,8 @@ export interface ShellNavigationConfig {
     dashboardLabel?: string;
     settingsLabel?: string;
     accountLabel?: string;
+    /** Hide the mobile-sheet Account shortcut when Settings already owns that destination. */
+    showMobileAccount?: boolean;
     navigationLabel?: string;
     dashboardNavigationLabel?: string;
     settingsNavigationLabel?: string;

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

@@ -30,6 +30,7 @@ export declare class ShellPage {
     private expandedHeaderHeight;
     private headerTravel;
     private expandedGeometryFrozen;
+    private pageHeaderResizeObserver;
     private headerResizeObserver;
     private headerMutationObserver;
     private headerRevealFrame;
@@ -62,6 +63,8 @@ export declare class ShellPage {
     private setSpacerHeight;
     private variantClass;
     private setStickyHeaderOffset;
+    private syncPageHeaderBlockSize;
+    private observePageHeaderGeometry;
     private syncRenderedHeaderGeometry;
     private cancelHeaderGeometrySync;
     private scheduleHeaderGeometrySync;

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

@@ -1,13 +1,17 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { type ControlWidth } from '../../utils';
 import { type TabGroupItem } from './tab-item-utils';
 export type TabBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'translucent' | 'inverted' | 'media' | 'always-dark';
 export type TabGroupSize = 'sm' | 'md' | 'lg';
+export type TabGroupWidth = ControlWidth;
 export declare class TabGroup {
     el: HTMLElement;
     value: string;
     tabs: TabGroupItem[];
     /** Control density: 24px small, 32px medium, or 40px large track. */
     size: TabGroupSize;
+    /** Width fit — hug content (default) or fill the parent with equal-width segments. */
+    width: TabGroupWidth;
     background: TabBackground | undefined;
     ariaLabel: string | null;
     ariaLabelledby: string | undefined;

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import type { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableGroup, TableGroupCollapseChangeDetail, TableGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from './table-types';
+import type { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableGroup, TableGroupCollapseChangeDetail, TableGroupLoadMoreDetail, TableGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from './table-types';
 export declare class Table {
     el: HTMLElement;
     /** Stable column definitions. Assign through JavaScript. */
@@ -68,10 +68,22 @@ export declare class Table {
     endOfResultsLabel: string;
     /** Supports {count} and {total} placeholders. */
     rowsLoadedLabel: string;
+    groupLoadMoreLabel: string;
+    /** Supports the {group} placeholder. */
+    groupLoadMoreAriaLabel: string;
+    /** Supports the {group} placeholder. */
+    groupRetryLabel: string;
+    /** Supports the {group} placeholder. */
+    groupLoadingMoreLabel: string;
+    /** Supports the {group} placeholder. */
+    groupEndOfResultsLabel: string;
+    /** Supports {group}, {count}, {loaded}, and {total} placeholders. */
+    groupRowsLoadedLabel: string;
     dsSortChange: EventEmitter<TableSortChangeDetail>;
     dsGroupCollapseChange: EventEmitter<TableGroupCollapseChangeDetail>;
     dsSelectionChange: EventEmitter<TableSelectionChangeDetail>;
     dsLoadMore: EventEmitter<TableLoadMoreDetail>;
+    dsGroupLoadMore: EventEmitter<TableGroupLoadMoreDetail>;
     dsCellAction: EventEmitter<TableCellActionDetail>;
     dsRowActivate: EventEmitter<TableRowActivateDetail>;
     private overflowStart;
@@ -89,6 +101,7 @@ export declare class Table {
     private stickyHeaderTableEl;
     private tableEl;
     private sentinelEl;
+    private readonly groupSentinelEls;
     private previousModelWarning;
     private hasLoaded;
     private renderedModel;
@@ -96,6 +109,7 @@ export declare class Table {
     private headerSlotObserver;
     private readonly layoutController;
     private readonly loadController;
+    private readonly groupLoadController;
     private readonly viewportFitController;
     componentWillLoad(): void;
     componentDidLoad(): void;
@@ -147,6 +161,8 @@ export declare class Table {
     private emitGroupCollapse;
     private emitAllGroupsCollapse;
     private renderGroupContent;
+    private formatGroupLoadLabel;
+    private renderGroupLoadRow;
     private renderStickyGroup;
     private renderDataBodies;
     private renderSkeletonBody;

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

@@ -1,2 +1,2 @@
-export type { TableCaptionVisibility, TableCellAlign, TableCellAction, TableCellActionDetail, TableCellBlank, TableCellEmpty, TableCellIcon, TableCellImage, TableCellPrimaryText, TableCellText, TableCellTag, TableCellTagVariant, TableCellValue, TableColumn, TableColumnSticky, TableColumnWidth, TableGroup, TableGroupCollapseChangeDetail, TableGroupIntent, TableHeaderSegment, TableGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TableLoadMoreReason, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortDirection, TableSortState, } from './table-types';
+export type { TableCaptionVisibility, TableCellAlign, TableCellAction, TableCellActionDetail, TableCellBlank, TableCellEmpty, TableCellIcon, TableCellImage, TableCellPrimaryText, TableCellText, TableCellTag, TableCellTagVariant, TableCellValue, TableColumn, TableColumnSticky, TableColumnWidth, TableGroup, TableGroupCollapseChangeDetail, TableGroupLoadMoreDetail, TableGroupIntent, TableHeaderSegment, TableGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TableLoadMoreReason, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortDirection, TableSortState, } from './table-types';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/Table/table-group-load-controller.d.ts

@@ -0,0 +1,40 @@
+import type { TableGroup, TableGroupLoadMoreDetail, TableLoadMoreMode, TableLoadMoreReason } from './table-types';
+export interface TableGroupLoadControllerState {
+    enabled: boolean;
+    loadMoreMode: TableLoadMoreMode;
+    loadMoreThreshold: number;
+    containedScroll: boolean;
+    groups: TableGroup[];
+    viewport: HTMLElement | null;
+    sentinels: ReadonlyMap<string, HTMLElement>;
+    loadingMoreLabel: string;
+    endOfResultsLabel: string;
+    rowsLoadedLabel: string;
+}
+export interface TableGroupLoadControllerOptions {
+    state: () => TableGroupLoadControllerState;
+    announce: (message: string) => void;
+    request: (detail: TableGroupLoadMoreDetail) => void;
+}
+/** Owns request guards, announcements, and observation for independently loaded groups. */
+export declare class TableGroupLoadController {
+    private readonly options;
+    readonly intersectionSupported: boolean;
+    private connected;
+    private intersectionObserver;
+    private snapshots;
+    private pending;
+    constructor(options: TableGroupLoadControllerOptions);
+    initialize(): void;
+    connect(): void;
+    disconnect(): void;
+    refresh(): void;
+    structureChanged(): void;
+    dataChanged(): void;
+    configurationChanged(): void;
+    request(groupId: string, reason: TableLoadMoreReason): void;
+    private createSnapshots;
+    private snapshot;
+    private disconnectObserver;
+}
+//# sourceMappingURL=table-group-load-controller.d.ts.map

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

@@ -173,6 +173,14 @@ export interface TableGroup {
      * intent background and bold intent title color.
      */
     intent?: TableGroupIntent;
+    /** Whether this group has more member rows available to load. */
+    hasMore?: boolean;
+    /** Controlled incremental loading state for this group's member rows. */
+    loadingMore?: boolean;
+    /** Controlled incremental loading failure for this group's member rows. */
+    loadMoreError?: string;
+    /** Reset key for this group's query, sort, or filter state. Defaults to the group ID. */
+    loadIdentity?: string | number;
     rows: TableRow[];
 }
 export interface TableSortChangeDetail {
@@ -191,6 +199,9 @@ export interface TableLoadMoreDetail {
     loadIdentity: string | number;
     loadedRowCount: number;
 }
+export interface TableGroupLoadMoreDetail extends TableLoadMoreDetail {
+    groupId: string;
+}
 export interface TableCellActionDetail {
     actionId: string;
     rowId: string;

package/dist/types/components.d.ts

@@ -62,8 +62,8 @@ import { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, Text
 import { SliderOrientation, SliderSize, SliderThumbAlignment, SliderValue } from "./components/Slider/Slider";
 import { SwatchPickerOption, SwatchPickerSection } from "./components/SwatchPicker/swatch-picker-types";
 import { SwitchSize } from "./components/Switch/Switch";
-import { TabBackground, TabGroupSize as TabGroupSize1 } from "./components/TabGroup/TabGroup";
-import { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableGroup, TableGroupCollapseChangeDetail, TableGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from "./components/Table/table-types";
+import { TabBackground, TabGroupSize as TabGroupSize1, TabGroupWidth } from "./components/TabGroup/TabGroup";
+import { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableGroup, TableGroupCollapseChangeDetail, TableGroupingState, TableGroupLoadMoreDetail, TableLoadMoreDetail, TableLoadMoreMode, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from "./components/Table/table-types";
 import { TagContrast, TagIntent, TagSize } from "./components/Tag/Tag";
 import { ToastActionEventDetail, ToastCloseEventDetail, ToastEventDetail, ToastManager, ToastSwipeDirection } from "./toast";
 import { TooltipAlign, TooltipSide, TooltipSize } from "./components/Tooltip/Tooltip";
@@ -125,8 +125,8 @@ export { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, Text
 export { SliderOrientation, SliderSize, SliderThumbAlignment, SliderValue } from "./components/Slider/Slider";
 export { SwatchPickerOption, SwatchPickerSection } from "./components/SwatchPicker/swatch-picker-types";
 export { SwitchSize } from "./components/Switch/Switch";
-export { TabBackground, TabGroupSize as TabGroupSize1 } from "./components/TabGroup/TabGroup";
-export { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableGroup, TableGroupCollapseChangeDetail, TableGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from "./components/Table/table-types";
+export { TabBackground, TabGroupSize as TabGroupSize1, TabGroupWidth } from "./components/TabGroup/TabGroup";
+export { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableGroup, TableGroupCollapseChangeDetail, TableGroupingState, TableGroupLoadMoreDetail, TableLoadMoreDetail, TableLoadMoreMode, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from "./components/Table/table-types";
 export { TagContrast, TagIntent, TagSize } from "./components/Tag/Tag";
 export { ToastActionEventDetail, ToastCloseEventDetail, ToastEventDetail, ToastManager, ToastSwipeDirection } from "./toast";
 export { TooltipAlign, TooltipSide, TooltipSize } from "./components/Tooltip/Tooltip";
@@ -1762,6 +1762,11 @@ export namespace Components {
           * @default false
          */
         "open": boolean;
+        /**
+          * Whether the router-derived current area owns the active mobile stage.
+          * @default true
+         */
+        "routeSelectionActive": boolean;
         /**
           * @default []
          */
@@ -1770,6 +1775,11 @@ export namespace Components {
           * @default 'Settings'
          */
         "settingsLabel": string;
+        /**
+          * Show the optional Account shortcut in the sheet header.
+          * @default true
+         */
+        "showAccount": boolean;
     }
     interface DsModal {
         /**
@@ -2751,6 +2761,11 @@ export namespace Components {
           * @default ''
          */
         "value": string;
+        /**
+          * Width fit — hug content (default) or fill the parent with equal-width segments.
+          * @default 'hug'
+         */
+        "width": TabGroupWidth;
     }
     interface DsTable {
         /**
@@ -2810,6 +2825,35 @@ export namespace Components {
           * @default false
          */
         "fitViewport": boolean;
+        /**
+          * Supports the {group} placeholder.
+          * @default 'All {group} results loaded'
+         */
+        "groupEndOfResultsLabel": string;
+        /**
+          * Supports the {group} placeholder.
+          * @default 'Load more {group} results'
+         */
+        "groupLoadMoreAriaLabel": string;
+        /**
+          * @default 'Load more'
+         */
+        "groupLoadMoreLabel": string;
+        /**
+          * Supports the {group} placeholder.
+          * @default 'Loading more items'
+         */
+        "groupLoadingMoreLabel": string;
+        /**
+          * Supports the {group} placeholder.
+          * @default 'Retry loading {group} results'
+         */
+        "groupRetryLabel": string;
+        /**
+          * Supports {group}, {count}, {loaded}, and {total} placeholders.
+          * @default '{count} more rows loaded in {group}. {loaded} of {total} rows loaded.'
+         */
+        "groupRowsLoadedLabel": string;
         /**
           * Controlled grouping column. Applications supply groups in their final fixed order.
           * @default null
@@ -2862,7 +2906,7 @@ export namespace Components {
          */
         "loadingMore": boolean;
         /**
-          * @default 'Loading more results'
+          * @default 'Loading more items'
          */
         "loadingMoreLabel": string;
         /**
@@ -4314,6 +4358,7 @@ declare global {
         "dsGroupCollapseChange": TableGroupCollapseChangeDetail;
         "dsSelectionChange": TableSelectionChangeDetail;
         "dsLoadMore": TableLoadMoreDetail;
+        "dsGroupLoadMore": TableGroupLoadMoreDetail;
         "dsCellAction": TableCellActionDetail;
         "dsRowActivate": TableRowActivateDetail;
     }
@@ -6258,6 +6303,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "open"?: boolean;
+        /**
+          * Whether the router-derived current area owns the active mobile stage.
+          * @default true
+         */
+        "routeSelectionActive"?: boolean;
         /**
           * @default []
          */
@@ -6266,6 +6316,11 @@ declare namespace LocalJSX {
           * @default 'Settings'
          */
         "settingsLabel"?: string;
+        /**
+          * Show the optional Account shortcut in the sheet header.
+          * @default true
+         */
+        "showAccount"?: boolean;
     }
     interface DsModal {
         /**
@@ -7366,6 +7421,11 @@ declare namespace LocalJSX {
           * @default ''
          */
         "value"?: string;
+        /**
+          * Width fit — hug content (default) or fill the parent with equal-width segments.
+          * @default 'hug'
+         */
+        "width"?: TabGroupWidth;
     }
     interface DsTable {
         /**
@@ -7425,6 +7485,35 @@ declare namespace LocalJSX {
           * @default false
          */
         "fitViewport"?: boolean;
+        /**
+          * Supports the {group} placeholder.
+          * @default 'All {group} results loaded'
+         */
+        "groupEndOfResultsLabel"?: string;
+        /**
+          * Supports the {group} placeholder.
+          * @default 'Load more {group} results'
+         */
+        "groupLoadMoreAriaLabel"?: string;
+        /**
+          * @default 'Load more'
+         */
+        "groupLoadMoreLabel"?: string;
+        /**
+          * Supports the {group} placeholder.
+          * @default 'Loading more items'
+         */
+        "groupLoadingMoreLabel"?: string;
+        /**
+          * Supports the {group} placeholder.
+          * @default 'Retry loading {group} results'
+         */
+        "groupRetryLabel"?: string;
+        /**
+          * Supports {group}, {count}, {loaded}, and {total} placeholders.
+          * @default '{count} more rows loaded in {group}. {loaded} of {total} rows loaded.'
+         */
+        "groupRowsLoadedLabel"?: string;
         /**
           * Controlled grouping column. Applications supply groups in their final fixed order.
           * @default null
@@ -7477,7 +7566,7 @@ declare namespace LocalJSX {
          */
         "loadingMore"?: boolean;
         /**
-          * @default 'Loading more results'
+          * @default 'Loading more items'
          */
         "loadingMoreLabel"?: string;
         /**
@@ -7486,6 +7575,7 @@ declare namespace LocalJSX {
         "maxHeight"?: string | number | undefined;
         "onDsCellAction"?: (event: DsTableCustomEvent<TableCellActionDetail>) => void;
         "onDsGroupCollapseChange"?: (event: DsTableCustomEvent<TableGroupCollapseChangeDetail>) => void;
+        "onDsGroupLoadMore"?: (event: DsTableCustomEvent<TableGroupLoadMoreDetail>) => void;
         "onDsLoadMore"?: (event: DsTableCustomEvent<TableLoadMoreDetail>) => void;
         "onDsRowActivate"?: (event: DsTableCustomEvent<TableRowActivateDetail>) => void;
         "onDsSelectionChange"?: (event: DsTableCustomEvent<TableSelectionChangeDetail>) => void;
@@ -8199,11 +8289,13 @@ declare namespace LocalJSX {
         "open": boolean;
         "browseContext": NavChromeStyle;
         "currentUrl": string;
+        "routeSelectionActive": boolean;
         "navigationLabel": string;
         "dashboardLabel": string;
         "settingsLabel": string;
         "accountLabel": string;
         "helpLabel": string;
+        "showAccount": boolean;
     }
     interface DsModalAttributes {
         "open": boolean;
@@ -8416,6 +8508,7 @@ declare namespace LocalJSX {
     interface DsTabGroupAttributes {
         "value": string;
         "size": TabGroupSize;
+        "width": TabGroupWidth;
         "background": TabBackground | undefined;
         "ariaLabel": string | null;
         "ariaLabelledby": string | undefined;
@@ -8454,6 +8547,12 @@ declare namespace LocalJSX {
         "loadingMoreLabel": string;
         "endOfResultsLabel": string;
         "rowsLoadedLabel": string;
+        "groupLoadMoreLabel": string;
+        "groupLoadMoreAriaLabel": string;
+        "groupRetryLabel": string;
+        "groupLoadingMoreLabel": string;
+        "groupEndOfResultsLabel": string;
+        "groupRowsLoadedLabel": string;
     }
     interface DsTagAttributes {
         "label": string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "14.0.1",
+  "version": "14.2.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -139,7 +139,7 @@
     "@angular/forms": "^22.0.7",
     "@axe-core/playwright": "^4.12.1",
     "@ds-mo/icons": "^7.0.0",
-    "@ds-mo/tokens": "^6.2.2",
+    "@ds-mo/tokens": "^6.5.0",
     "@eslint/js": "^10.0.1",
     "@fontsource-variable/inter": "^5.3.0",
     "@fontsource/fira-code": "^5.3.0",

package/dist/components/p--z-DWRkg.js

@@ -1,2 +0,0 @@
-import{p as n,H as t,c as o,h as i,a as e,t as s}from"./index.js";import{b as d,r,c as l}from"./p-DAW6G8Sl.js";import{d as c}from"./p-D8nnhQNJ.js";import{d as a}from"./p-BFfLvMZd.js";import{d as u}from"./p-Ca-I2UnB.js";import{d as f}from"./p-DZFilC--.js";const b=()=>`@media (forced-colors: active){.sc-ds-button-unfilled:root,.sc-ds-button-unfilled-h,.ds-forced-colors-scope.sc-ds-button-unfilled{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-button-unfilled-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-button-unfilled-h,.ds-focus-ring.sc-ds-button-unfilled,.ds-focus-ring-inset.sc-ds-button-unfilled-h,.ds-focus-ring-inset.sc-ds-button-unfilled{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-button-unfilled-h:focus-visible,.ds-focus-ring.sc-ds-button-unfilled:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-button-unfilled-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-button-unfilled{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-button-unfilled-h:focus-visible,.ds-focus-ring-inset.sc-ds-button-unfilled:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-unfilled-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-button-unfilled:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-button-unfilled-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-button-unfilled:root,.sc-ds-button-unfilled-h,.ds-forced-colors-scope.sc-ds-button-unfilled{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}@media (forced-colors: active){.sc-ds-button-unfilled:root,.sc-ds-button-unfilled-h,.ds-forced-colors-scope.sc-ds-button-unfilled{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-button-unfilled-h,.ds-interaction-fill.sc-ds-button-unfilled{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-button-unfilled-h::before,.ds-interaction-fill.sc-ds-button-unfilled::before,.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-button-unfilled-h::before,.ds-interaction-fill.sc-ds-button-unfilled::before{z-index:1}.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-button-unfilled-h,.ds-interaction-fill--bordered.sc-ds-button-unfilled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-button-unfilled-h::before,.ds-interaction-fill--selected.sc-ds-button-unfilled::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-button-unfilled-h,.ds-interaction-fill--selected.sc-ds-button-unfilled{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-button-unfilled-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-unfilled:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-button-unfilled-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-unfilled:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-button-unfilled-h::after,.ds-interaction-fill--grouped.sc-ds-button-unfilled::after,.ds-interaction-fill--grouped.sc-ds-button-unfilled-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-button-unfilled:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-button-unfilled-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-button-unfilled:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-button-unfilled-h,.ds-interaction-fill--grouped.sc-ds-button-unfilled{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-button-unfilled-h>.ds-interaction-fill__content.sc-ds-button-unfilled,.ds-interaction-fill.sc-ds-button-unfilled>.ds-interaction-fill__content.sc-ds-button-unfilled,.ds-interaction-fill__content.sc-ds-button-unfilled{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-button-unfilled-h,.ds-interaction-fill--on-faint.sc-ds-button-unfilled{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-button-unfilled-h,.ds-interaction-fill--on-medium.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-button-unfilled-h,.ds-interaction-fill--on-bold.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-button-unfilled-h,.ds-interaction-fill--on-strong.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-button-unfilled-h,.ds-interaction-fill--on-translucent.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-button-unfilled-h,.ds-interaction-fill--on-inverted.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-button-unfilled-h,.ds-interaction-fill--on-media.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-button-unfilled-h,.ds-interaction-fill--on-always-dark.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-button-unfilled-h,.ds-interaction-fill--on-navigation.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid       var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-button-unfilled-h::before,.ds-interaction-fill--selected.sc-ds-button-unfilled::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-button-unfilled-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-button-unfilled:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}.ds-control-press-scale.sc-ds-button-unfilled{transition:scale var(--effect-motion-short-2)}.ds-control-press-scale.sc-ds-button-unfilled:active:not(:disabled):not(.ds-control-inactive):not([aria-busy='true']){scale:var(--ds-control-press-active-scale, var(--dimension-scale-subtle))}@media (prefers-reduced-motion: reduce){.ds-control-press-scale.sc-ds-button-unfilled,.ds-control-press-scale.sc-ds-button-unfilled:active:not(:disabled):not(.ds-control-inactive):not([aria-busy='true']){scale:none;transition:none}}@media (forced-colors: active){.sc-ds-button-unfilled:root,.sc-ds-button-unfilled-h,.ds-forced-colors-scope.sc-ds-button-unfilled{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-button-unfilled-h,.ds-control-inactive.sc-ds-button-unfilled{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-button-unfilled-h,.ds-control-inactive.sc-ds-button-unfilled{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-button-unfilled,.ds-control--lg.sc-ds-button-unfilled-h,.ds-control--md.sc-ds-button-unfilled-h,.ds-control--md.sc-ds-button-unfilled,.ds-control--sm.sc-ds-button-unfilled-h,.ds-control--sm.sc-ds-button-unfilled,.ds-control--xs.sc-ds-button-unfilled-h,.ds-control--xs.sc-ds-button-unfilled{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-button-unfilled-h,.ds-control--lg.sc-ds-button-unfilled{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-button-unfilled-h,.ds-control--md.sc-ds-button-unfilled{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-button-unfilled-h,.ds-control--sm.sc-ds-button-unfilled{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-button-unfilled-h,.ds-control--xs.sc-ds-button-unfilled{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control--lg.ds-control--inset.sc-ds-button-unfilled-h,.ds-control--lg.ds-control--inset.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-500) - var(--dimension-space-050));--ds-control-padding-inline:calc(     var(--dimension-space-100) - var(--dimension-space-025)   )}.ds-control--md.ds-control--inset.sc-ds-button-unfilled-h,.ds-control--md.ds-control--inset.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-400) - var(--dimension-space-050));--ds-control-padding-inline:calc(     var(--dimension-space-075) - var(--dimension-space-025)   )}.ds-control--sm.ds-control--inset.sc-ds-button-unfilled-h,.ds-control--sm.ds-control--inset.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-300) - var(--dimension-space-050));--ds-control-padding-inline:calc(     var(--dimension-space-050) - var(--dimension-space-025)   )}.ds-control--xs.ds-control--inset.sc-ds-button-unfilled-h,.ds-control--xs.ds-control--inset.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-200) - var(--dimension-space-050));--ds-control-padding-inline:calc(     var(--dimension-space-025) - var(--dimension-space-025)   )}.ds-control--lg.ds-control--inset-double.sc-ds-button-unfilled-h,.ds-control--lg.ds-control--inset-double.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-500) - var(--dimension-space-100));--ds-control-padding-inline:calc(     var(--dimension-space-100) - var(--dimension-space-050)   )}.ds-control--md.ds-control--inset-double.sc-ds-button-unfilled-h,.ds-control--md.ds-control--inset-double.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-400) - var(--dimension-space-100));--ds-control-padding-inline:calc(     var(--dimension-space-075) - var(--dimension-space-050)   )}.ds-control--sm.ds-control--inset-double.sc-ds-button-unfilled-h,.ds-control--sm.ds-control--inset-double.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-300) - var(--dimension-space-100));--ds-control-padding-inline:calc(     var(--dimension-space-050) - var(--dimension-space-050)   )}.ds-control-frame.sc-ds-button-unfilled{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-section-heading.sc-ds-button-unfilled{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:calc(     var(--ds-control-padding-inline, var(--dimension-space-075)) +       var(--ds-control-label-inset, var(--dimension-space-025))   )}.ds-control-icon-box.sc-ds-button-unfilled{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-button-unfilled{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-button-unfilled{position:relative;padding-inline-end:calc(     var(--ds-control-label-inset, var(--dimension-space-025)) +       var(--ds-control-gap, var(--dimension-space-050))   )}.ds-control-label-dot__badge.sc-ds-button-unfilled{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}.ds-control-width--hug.sc-ds-button-unfilled-h,.ds-control-width--hug.sc-ds-button-unfilled{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-button-unfilled-h,.ds-control-width--fill.sc-ds-button-unfilled{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.sc-ds-button-unfilled-h{display:inline-flex;outline:none}.ds-button-host--icon.ds-control-width--hug.sc-ds-button-unfilled-h{width:var(--ds-control-height, var(--dimension-size-400));height:var(--ds-control-height, var(--dimension-size-400));min-width:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.ds-button-host--icon.ds-control-width--fill.sc-ds-button-unfilled-h{height:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.ds-control-width--fill.sc-ds-button-unfilled-h .ds-button.sc-ds-button-unfilled{width:100%}.ds-button.sc-ds-button-unfilled{justify-content:center;overflow:hidden;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));cursor:default;-webkit-user-select:none;user-select:none}.ds-button--icon.sc-ds-button-unfilled{width:100%;height:100%;padding:0}.ds-button--rounded.sc-ds-button-unfilled{--ds-control-radius:var(--dimension-radius-half)}.ds-button--expanded.sc-ds-button-unfilled{--ds-interaction-hover:var(--ds-interaction-pressed)}.ds-button--expanded.sc-ds-button-unfilled::after{background:var(--ds-interaction-pressed)}.ds-button--bordered.sc-ds-button-unfilled{--ds-interaction-border-width:var(--dimension-stroke-width-012)}.ds-button--bordered.sc-ds-button-unfilled:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width)     var(--ds-interaction-border-color)}.ds-button__icon-wrap.sc-ds-button-unfilled,.ds-button__label.sc-ds-button-unfilled,.ds-button__chevron.sc-ds-button-unfilled{position:relative;z-index:2}.ds-button__label.sc-ds-button-unfilled{flex-shrink:0;min-width:0;white-space:nowrap}.ds-button__label--loading.sc-ds-button-unfilled,.ds-button__chevron--loading.sc-ds-button-unfilled{visibility:hidden}.ds-button.sc-ds-button-unfilled>.ds-button__loader-overlay.sc-ds-button-unfilled{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}.ds-button__dot.sc-ds-button-unfilled{position:absolute;top:0;right:0;z-index:2;pointer-events:none}@media (forced-colors: active){.ds-button.sc-ds-button-unfilled{outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}}.sc-ds-button-unfilled-h{--ds-button-unfilled-fg:var(--color-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-background-secondary);--ds-button-unfilled-border:var(--color-border-secondary)}.button-unfilled.sc-ds-button-unfilled{background:transparent;color:var(--ds-button-unfilled-fg)}.button-unfilled--active.sc-ds-button-unfilled{color:var(--ds-button-unfilled-fg-active)}.button-unfilled--bordered.sc-ds-button-unfilled{--ds-interaction-border-color:var(--ds-button-unfilled-border)}.button-unfilled--background-medium.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-medium-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-medium-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-medium-neutral);--ds-button-unfilled-border:var(--color-border-on-medium-background-secondary)}.button-unfilled--background-bold.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-bold-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-bold-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-bold-neutral);--ds-button-unfilled-border:var(--color-border-on-bold-background-secondary)}.button-unfilled--background-strong.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-strong-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-strong-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-strong-neutral);--ds-button-unfilled-border:var(--color-border-on-strong-background-secondary)}.button-unfilled--background-translucent.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-translucent-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-translucent-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-translucent-translucent);--ds-button-unfilled-border:var(--color-translucent-border-secondary)}.button-unfilled--background-inverted.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-inverted-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-inverted-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-inverted-background);--ds-button-unfilled-border:var(--color-inverted-border-secondary)}.button-unfilled--background-media.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-media-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-media-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-media-background);--ds-button-unfilled-border:var(--color-media-border-secondary)}.button-unfilled--on-always-dark.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-always-dark-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-always-dark-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-always-dark-background);--ds-button-unfilled-border:var(--color-always-dark-border-secondary)}.button-unfilled.ds-interaction-fill--selected.sc-ds-button-unfilled{--ds-button-unfilled-dot-ring:var(--ds-interaction-active)}`;const v=n(class n extends t{constructor(n){super();if(n!==false){this.__registerHost()}this.dsClick=o(this,"dsClick");this.dsChange=o(this,"dsChange");this.variant="label";this.size="md";this.isInset=false;this.insetDepth="single";this.width="hug";this.label="";this.icon="";this.isActive=false;this.activeFill=true;this.hasBorder=true;this.rounded=false;this.pressScale=true;this.dot=false;this.isInactive=false;this.isLoading=false;this.type="button";this.ariaLabel=null;this.hasMenu=false;this.buttonEl=null;this.handleClick=n=>{if(this.isInactive||this.isLoading){n.preventDefault();n.stopPropagation();return}this.dsClick.emit(n);if(this.pressed!==undefined)this.dsChange.emit(!this.pressed)}}async setFocus(){this.buttonEl?.focus()}get showDot(){return this.variant==="icon"&&this.dot&&!this.isLoading}get resolvedHaspopup(){return this.haspopup??(this.hasMenu?"menu":undefined)}get doubleInset(){return this.isInset&&this.insetDepth==="double"&&this.size!=="xs"}get expandedPopup(){return this.expanded===true&&this.resolvedHaspopup!==undefined&&!this.isInactive}get visuallyActive(){return this.isActive||this.pressed===true}get dotRing(){if((this.isActive||this.pressed===true)&&this.activeFill){return"var(--ds-interaction-active)"}return"var(--ds-button-unfilled-dot-ring)"}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.isLoading&&this.variant==="label"&&this.label)return this.label;return undefined}render(){const n=this.background;const t={"button-unfilled":true,"ds-button":true,"ds-focus-ring-inset":true,"ds-control-press-scale":this.pressScale,"ds-interaction-fill":true,"ds-interaction-fill--selected":(this.isActive||this.pressed===true)&&this.activeFill&&!this.isInactive,"ds-interaction-fill--on-faint":n==="faint","ds-interaction-fill--on-medium":n==="medium","ds-interaction-fill--on-bold":n==="bold","ds-interaction-fill--on-strong":n==="strong","ds-interaction-fill--on-translucent":n==="translucent","ds-interaction-fill--on-inverted":n==="inverted","ds-interaction-fill--on-media":n==="media","ds-interaction-fill--on-always-dark":n==="always-dark","button-unfilled--active":this.visuallyActive,"button-unfilled--expanded":this.expandedPopup,"ds-button--expanded":this.expandedPopup,"button-unfilled--bordered":this.hasBorder,"ds-button--bordered":this.hasBorder,"button-unfilled--rounded":this.rounded,"ds-button--rounded":this.rounded,"ds-control-inactive":this.isInactive,"ds-control--lg":this.size==="lg","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","ds-control--inset":this.isInset&&!this.doubleInset,"ds-control--inset-double":this.doubleInset,"ds-control-frame":true,"button-unfilled--icon":this.variant==="icon","ds-button--icon":this.variant==="icon","button-unfilled--label":this.variant==="label","button-unfilled--icon-label":this.variant==="icon-label","button-unfilled--background-faint":n==="faint","button-unfilled--background-medium":n==="medium","button-unfilled--background-bold":n==="bold","button-unfilled--background-strong":n==="strong","button-unfilled--background-translucent":n==="translucent","button-unfilled--background-inverted":n==="inverted","button-unfilled--background-media":n==="media","button-unfilled--on-always-dark":n==="always-dark"};return i(e,{key:"458609aa419cc3f083172cad07ca3a59cc44e7b2",class:{"button-unfilled-host":true,"button-unfilled-host--icon":this.variant==="icon","ds-button-host--icon":this.variant==="icon","ds-control--lg":this.size==="lg","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","ds-control--inset":this.isInset&&!this.doubleInset,"ds-control--inset-double":this.doubleInset,...l(this.width)},tabIndex:-1},i("button",{key:"a6be13f1bdec3cec6cec787267739b6d1c295d06",ref:n=>{this.buttonEl=n??null},type:this.type,class:t,disabled:this.isInactive,tabIndex:this.focusTabIndex??0,"aria-label":this.accessibleName,"aria-busy":this.isLoading?"true":undefined,"aria-disabled":this.isLoading?"true":undefined,"aria-controls":this.controls,"aria-expanded":this.expanded===undefined?undefined:String(this.expanded),"aria-haspopup":this.resolvedHaspopup,"aria-pressed":this.pressed===undefined?undefined:String(this.pressed),onPointerDown:n=>d(n,this.pressScale&&!this.isInactive&&!this.isLoading),onClick:this.handleClick},r({namespace:"button-unfilled",variant:this.variant,size:this.size,label:this.label,icon:this.icon,hasMenu:this.hasMenu,isLoading:this.isLoading,dot:{visible:this.showDot,background:this.dotRing}})))}get el(){return this}static get style(){return b()}},[2,"ds-button-unfilled",{variant:[1],size:[1],isInset:[4,"is-inset"],insetDepth:[1,"inset-depth"],width:[1],label:[1],icon:[1],isActive:[4,"is-active"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],rounded:[4],pressScale:[4,"press-scale"],dot:[4],isInactive:[4,"is-inactive"],isLoading:[4,"is-loading"],type:[1],background:[1],ariaLabel:[1,"aria-label"],controls:[1],expanded:[4],haspopup:[1],pressed:[4],hasMenu:[4,"has-menu"],focusTabIndex:[2,"tab-index"],setFocus:[64]}]);function h(){if(typeof customElements==="undefined"){return}const n=["ds-button-unfilled","ds-badge","ds-icon","ds-loader","ds-text"];n.forEach((n=>{switch(n){case"ds-button-unfilled":if(!customElements.get(s(n))){customElements.define(s(n),v)}break;case"ds-badge":if(!customElements.get(s(n))){c()}break;case"ds-icon":if(!customElements.get(s(n))){a()}break;case"ds-loader":if(!customElements.get(s(n))){u()}break;case"ds-text":if(!customElements.get(s(n))){f()}break}}))}h();export{v as B,h as d};
-//# sourceMappingURL=p--z-DWRkg.js.map

package/dist/components/p-CElfUmMp.js

@@ -1,2 +0,0 @@
-import{p as e,H as s,c as i,h as a,a as d,t as o}from"./index.js";import{g as r}from"./p-BQq26pt9.js";import{d as t}from"./p-D8nnhQNJ.js";import{d as n}from"./p-BFfLvMZd.js";import{d as c}from"./p-DofS_hVZ.js";import{d as h}from"./p-D0i_J2rj.js";import{d as m}from"./p-BDCrM8-1.js";import{d as l}from"./p-BOCrvs-v.js";import{d as b}from"./p-Cih1XCy3.js";import{d as p}from"./p-CUeuemsF.js";import{d as g}from"./p-DZFilC--.js";const u=()=>`.ds-chrome-space--sm.sc-ds-mobile-header-h,.ds-chrome-space--sm.sc-ds-mobile-header{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-mobile-header-h,.ds-chrome-space--md.sc-ds-mobile-header{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-mobile-header-h,.ds-chrome-space--lg.sc-ds-mobile-header{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-mobile-header-h,.ds-chrome-row.sc-ds-mobile-header,.ds-chrome-column.sc-ds-mobile-header-h,.ds-chrome-column.sc-ds-mobile-header,.ds-chrome-grid.sc-ds-mobile-header-h,.ds-chrome-grid.sc-ds-mobile-header{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-mobile-header-h,.ds-chrome-row.sc-ds-mobile-header{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-mobile-header-h,.ds-chrome-column.sc-ds-mobile-header{flex-direction:column}.ds-chrome-grid.sc-ds-mobile-header-h,.ds-chrome-grid.sc-ds-mobile-header{display:grid;align-items:center}.sc-ds-mobile-header-h{display:block;min-width:0;box-sizing:border-box;background:var(--color-background-primary);color:var(--color-foreground-primary)}[tone='brand'].sc-ds-mobile-header-h{background:var(--color-background-bold-brand);color:var(--color-foreground-on-bold)}.mobile-header.sc-ds-mobile-header{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;box-sizing:border-box;background:inherit;color:inherit}.mobile-header__primary.sc-ds-mobile-header{grid-template-columns:minmax(var(--dimension-size-400), 1fr) minmax(0, auto) minmax(var(--dimension-size-400), 1fr);width:100%;height:calc(var(--dimension-size-500) + var(--dimension-space-200));min-width:0;background:inherit;color:inherit}.sc-ds-mobile-header-h:not([tone='brand']) .mobile-header.sc-ds-mobile-header::after{content:'';position:absolute;inset-inline:0;inset-block-end:0;height:var(--dimension-stroke-width-012);background:var(--color-border-tertiary);pointer-events:none}.mobile-header__subsections.sc-ds-mobile-header{display:flex;align-items:center;justify-content:center;min-width:0;height:var(--dimension-size-600);padding:var(--dimension-space-100) var(--dimension-space-200);box-sizing:border-box}.mobile-header__subsections.sc-ds-mobile-header ds-mobile-section-switcher.sc-ds-mobile-header{min-width:0;max-width:100%}.mobile-header__lane.sc-ds-mobile-header{display:flex;align-items:center;gap:var(--dimension-space-050);min-width:0}.mobile-header__lane--leading.sc-ds-mobile-header{justify-content:flex-start}.mobile-header__lane--trailing.sc-ds-mobile-header{justify-content:flex-end}.mobile-header__center.sc-ds-mobile-header{position:relative;min-width:0;max-width:100%;justify-self:center}.mobile-header__heading.sc-ds-mobile-header{display:block;min-width:0;max-width:100%;text-align:center}.mobile-header__semantic-heading.sc-ds-mobile-header{position:absolute;width:var(--dimension-stroke-width-012);height:var(--dimension-stroke-width-012);padding:0;margin:calc(var(--dimension-stroke-width-012) * -1);overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.sc-ds-mobile-header-s>[slot='leading'],.sc-ds-mobile-header-s>[slot='trailing']{flex:0 0 auto}`;const f=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsSectionChange=i(this,"dsSectionChange");this.dsSubsectionChange=i(this,"dsSubsectionChange");this.heading="";this.headingLevel="h1";this.sections=[];this.value="";this.sectionsAriaLabel="Change page section";this.sectionsPresentation="switcher";this.sectionsSize="md";this.subsections=[];this.subvalue="";this.subsectionsAriaLabel="Change page subsection";this.tone="default";this.handleSectionChange=e=>{e.stopPropagation();this.dsSectionChange.emit(e.detail)};this.handleSubsectionChange=e=>{e.stopPropagation();this.dsSubsectionChange.emit(e.detail)}}get resolvedSections(){return this.sections??[]}get resolvedSubsections(){return this.subsections??[]}get selectedLabel(){const e=r(this.resolvedSections);return e.find((e=>e.id===this.value))?.label??e[0]?.label??this.heading}render(){const e=this.headingLevel;const s=r(this.resolvedSections);const i=s.length>1;const o=r(this.resolvedSubsections).length>1;const t=this.tone==="brand"?"on-bold":"primary";return a(d,{key:"64197195ee4ede6cfe50d3cfab2bde433d8ebd07"},a("header",{key:"1d57c611b54749b36600ca598a48a4af55fea09b",class:"mobile-header"},a("div",{key:"5cae66ba2992f3970fdc5fce17d00473eb973657",class:"mobile-header__primary ds-chrome-grid ds-chrome-space--md"},a("div",{key:"c1e418f2fa2e8d7d9297e7f39883aec1b9de541b",class:"mobile-header__lane mobile-header__lane--leading"},a("slot",{key:"6215607b441bdb561047f6b4292a52d5d45434b6",name:"leading"})),a("div",{key:"2d19ac3da595f9d5e742ed76001e727786678b4c",class:"mobile-header__center"},i?[a("span",{class:"mobile-header__semantic-heading",role:"heading","aria-level":this.headingLevel==="h1"?"1":"2"},this.selectedLabel),this.sectionsPresentation==="segmented"?a("ds-tab-group",{tabs:this.resolvedSections,value:this.value,size:this.sectionsSize,ariaLabel:this.sectionsAriaLabel,onDsChange:this.handleSectionChange}):a("ds-mobile-section-switcher",{sections:this.resolvedSections,value:this.value,navigationLabel:this.sectionsAriaLabel,onDsChange:this.handleSectionChange})]:a("ds-text",{class:"mobile-header__heading",as:e,variant:"text-body-medium",emphasis:true,color:t,lineTruncation:1},this.selectedLabel)),a("div",{key:"84321ddf61830e8ffaa3a3a1e684b41c6414974c",class:"mobile-header__lane mobile-header__lane--trailing"},a("slot",{key:"b2f03f0df8e21a667f385760062401c48c5b4545",name:"trailing"}))),o?a("nav",{class:"mobile-header__subsections","aria-label":this.subsectionsAriaLabel},a("ds-mobile-section-switcher",{sections:this.resolvedSubsections,value:this.subvalue,navigationLabel:this.subsectionsAriaLabel,onDsChange:this.handleSubsectionChange})):null))}static get style(){return u()}},[262,"ds-mobile-header",{heading:[1],headingLevel:[1,"heading-level"],sections:[16],value:[1],sectionsAriaLabel:[1,"sections-aria-label"],sectionsPresentation:[1,"sections-presentation"],sectionsSize:[1,"sections-size"],subsections:[16],subvalue:[1],subsectionsAriaLabel:[1,"subsections-aria-label"],tone:[513]}]);function v(){if(typeof customElements==="undefined"){return}const e=["ds-mobile-header","ds-badge","ds-icon","ds-menu","ds-mobile-section-switcher","ds-swatch-picker","ds-switch","ds-tab-group","ds-tag","ds-text"];e.forEach((e=>{switch(e){case"ds-mobile-header":if(!customElements.get(o(e))){customElements.define(o(e),f)}break;case"ds-badge":if(!customElements.get(o(e))){t()}break;case"ds-icon":if(!customElements.get(o(e))){n()}break;case"ds-menu":if(!customElements.get(o(e))){c()}break;case"ds-mobile-section-switcher":if(!customElements.get(o(e))){h()}break;case"ds-swatch-picker":if(!customElements.get(o(e))){m()}break;case"ds-switch":if(!customElements.get(o(e))){l()}break;case"ds-tab-group":if(!customElements.get(o(e))){b()}break;case"ds-tag":if(!customElements.get(o(e))){p()}break;case"ds-text":if(!customElements.get(o(e))){g()}break}}))}v();export{f as M,v as d};
-//# sourceMappingURL=p-CElfUmMp.js.map

package/dist/components/p-CElfUmMp.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["mobileHeaderCss","MobileHeader","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","heading","headingLevel","sections","value","sectionsAriaLabel","sectionsPresentation","sectionsSize","subsections","subvalue","subsectionsAriaLabel","tone","handleSectionChange","event","stopPropagation","dsSectionChange","emit","detail","handleSubsectionChange","dsSubsectionChange","resolvedSections","resolvedSubsections","selectedLabel","selectable","getSelectableTabs","find","section","id","label","render","Heading","hasSwitcher","length","hasSubsections","foreground","h","Host","key","class","name","role","tabs","size","ariaLabel","onDsChange","navigationLabel","as","variant","emphasis","color","lineTruncation"],"sources":["src/wc/components/MobileHeader/MobileHeader.css?tag=ds-mobile-header&encapsulation=scoped","src/wc/components/MobileHeader/MobileHeader.tsx"],"sourcesContent":["@import '../../utils/chrome-layout.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--color-background-primary);\n  color: var(--color-foreground-primary);\n}\n\n:host([tone='brand']) {\n  background: var(--color-background-bold-brand);\n  color: var(--color-foreground-on-bold);\n}\n\n.mobile-header {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  background: inherit;\n  color: inherit;\n}\n\n.mobile-header__primary {\n  grid-template-columns: minmax(var(--dimension-size-400), 1fr) minmax(0, auto) minmax(var(--dimension-size-400), 1fr);\n  width: 100%;\n  height: calc(var(--dimension-size-500) + var(--dimension-space-200));\n  min-width: 0;\n  background: inherit;\n  color: inherit;\n}\n\n:host(:not([tone='brand'])) .mobile-header::after {\n  content: '';\n  position: absolute;\n  inset-inline: 0;\n  inset-block-end: 0;\n  height: var(--dimension-stroke-width-012);\n  background: var(--color-border-tertiary);\n  pointer-events: none;\n}\n\n.mobile-header__subsections {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100) var(--dimension-space-200);\n  box-sizing: border-box;\n}\n\n.mobile-header__subsections ds-mobile-section-switcher {\n  min-width: 0;\n  max-width: 100%;\n}\n\n.mobile-header__lane {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n.mobile-header__lane--leading {\n  justify-content: flex-start;\n}\n\n.mobile-header__lane--trailing {\n  justify-content: flex-end;\n}\n\n.mobile-header__center {\n  position: relative;\n  min-width: 0;\n  max-width: 100%;\n  justify-self: center;\n}\n\n.mobile-header__heading {\n  display: block;\n  min-width: 0;\n  max-width: 100%;\n  text-align: center;\n}\n\n.mobile-header__semantic-heading {\n  position: absolute;\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-stroke-width-012);\n  padding: 0;\n  margin: calc(var(--dimension-stroke-width-012) * -1);\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n::slotted([slot='leading']),\n::slotted([slot='trailing']) {\n  flex: 0 0 auto;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport {\n  getSelectableTabs,\n  type TabGroupItem,\n  type TabItem,\n} from '../TabGroup/tab-item-utils';\nimport type { TabGroupSize } from '../TabGroup/TabGroup';\nimport type {\n  MobileHeaderHeadingLevel,\n  MobileHeaderSectionsPresentation,\n  MobileHeaderTone,\n} from './mobile-header-types';\n\n@Component({\n  tag: 'ds-mobile-header',\n  styleUrl: 'MobileHeader.css',\n  scoped: true,\n})\nexport class MobileHeader {\n  /** Static title used when no peer sections are supplied. */\n  @Prop() heading: string = '';\n  /** Semantic heading level for the active mobile screen. */\n  @Prop() headingLevel: MobileHeaderHeadingLevel = 'h1';\n  /** Controlled peer sections. Their selected label replaces the static title. */\n  @Prop() sections: TabGroupItem[] = [];\n  /** Controlled selected section id. */\n  @Prop() value: string = '';\n  /** Accessible name for the section chooser. */\n  @Prop() sectionsAriaLabel: string = 'Change page section';\n  /** Popup switcher or an inline segmented TabGroup for peer sections. */\n  @Prop() sectionsPresentation: MobileHeaderSectionsPresentation = 'switcher';\n  /** Density for the segmented sections presentation. */\n  @Prop() sectionsSize: TabGroupSize = 'md';\n  /** Controlled child sections within the selected page or detail screen. */\n  @Prop() subsections: TabItem[] = [];\n  /** Controlled selected child-section id. */\n  @Prop() subvalue: string = '';\n  /** Accessible name for the child-section chooser. */\n  @Prop() subsectionsAriaLabel: string = 'Change page subsection';\n  /** Default page chrome or bold-brand workflow chrome. */\n  @Prop({ reflect: true }) tone: MobileHeaderTone = 'default';\n\n  /** Section selection intent. */\n  @Event() dsSectionChange!: EventEmitter<string>;\n  /** Child-section selection intent. */\n  @Event() dsSubsectionChange!: EventEmitter<string>;\n\n  private get resolvedSections(): TabGroupItem[] {\n    return this.sections ?? [];\n  }\n\n  private get resolvedSubsections(): TabItem[] {\n    return this.subsections ?? [];\n  }\n\n  private get selectedLabel(): string {\n    const selectable = getSelectableTabs(this.resolvedSections);\n    return selectable.find(section => section.id === this.value)?.label ??\n      selectable[0]?.label ??\n      this.heading;\n  }\n\n  private handleSectionChange = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.dsSectionChange.emit(event.detail);\n  };\n\n  private handleSubsectionChange = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.dsSubsectionChange.emit(event.detail);\n  };\n\n  render() {\n    const Heading = this.headingLevel;\n    const selectable = getSelectableTabs(this.resolvedSections);\n    const hasSwitcher = selectable.length > 1;\n    const hasSubsections = getSelectableTabs(this.resolvedSubsections).length > 1;\n    const foreground = this.tone === 'brand' ? 'on-bold' : 'primary';\n\n    return (\n      <Host>\n        <header class=\"mobile-header\">\n          <div class=\"mobile-header__primary ds-chrome-grid ds-chrome-space--md\">\n            <div class=\"mobile-header__lane mobile-header__lane--leading\">\n              <slot name=\"leading\" />\n            </div>\n            <div class=\"mobile-header__center\">\n              {hasSwitcher ? (\n                [\n                  <span\n                    class=\"mobile-header__semantic-heading\"\n                    role=\"heading\"\n                    aria-level={this.headingLevel === 'h1' ? '1' : '2'}\n                  >\n                    {this.selectedLabel}\n                  </span>,\n                  this.sectionsPresentation === 'segmented' ? (\n                    <ds-tab-group\n                      tabs={this.resolvedSections}\n                      value={this.value}\n                      size={this.sectionsSize}\n                      ariaLabel={this.sectionsAriaLabel}\n                      onDsChange={this.handleSectionChange}\n                    />\n                  ) : (\n                    <ds-mobile-section-switcher\n                      sections={this.resolvedSections}\n                      value={this.value}\n                      navigationLabel={this.sectionsAriaLabel}\n                      onDsChange={this.handleSectionChange}\n                    />\n                  ),\n                ]\n              ) : (\n                <ds-text\n                  class=\"mobile-header__heading\"\n                  as={Heading}\n                  variant=\"text-body-medium\"\n                  emphasis\n                  color={foreground}\n                  lineTruncation={1}\n                >\n                  {this.selectedLabel}\n                </ds-text>\n              )}\n            </div>\n            <div class=\"mobile-header__lane mobile-header__lane--trailing\">\n              <slot name=\"trailing\" />\n            </div>\n          </div>\n          {hasSubsections ? (\n            <nav class=\"mobile-header__subsections\" aria-label={this.subsectionsAriaLabel}>\n              <ds-mobile-section-switcher\n                sections={this.resolvedSubsections}\n                value={this.subvalue}\n                navigationLabel={this.subsectionsAriaLabel}\n                onDsChange={this.handleSubsectionChange}\n              />\n            </nav>\n          ) : null}\n        </header>\n      </Host>\n    );\n  }\n}\n"],"mappings":"0aAAA,MAAMA,EAAkB,IAAM,k0G,MCkBjBC,EAAYC,EAAA,MAAAD,UAAAE,EALzB,WAAAC,CAAAC,G,gJAOUC,KAAAC,QAAkB,GAElBD,KAAAE,aAAyC,KAEzCF,KAAAG,SAA2B,GAE3BH,KAAAI,MAAgB,GAEhBJ,KAAAK,kBAA4B,sBAE5BL,KAAAM,qBAAyD,WAEzDN,KAAAO,aAA6B,KAE7BP,KAAAQ,YAAyB,GAEzBR,KAAAS,SAAmB,GAEnBT,KAAAU,qBAA+B,yBAEdV,KAAAW,KAAyB,UAsB1CX,KAAAY,oBAAuBC,IAC7BA,EAAMC,kBACNd,KAAKe,gBAAgBC,KAAKH,EAAMI,OAAO,EAGjCjB,KAAAkB,uBAA0BL,IAChCA,EAAMC,kBACNd,KAAKmB,mBAAmBH,KAAKH,EAAMI,OAAO,CA2E7C,CAjGC,oBAAYG,GACV,OAAOpB,KAAKG,UAAY,E,CAG1B,uBAAYkB,GACV,OAAOrB,KAAKQ,aAAe,E,CAG7B,iBAAYc,GACV,MAAMC,EAAaC,EAAkBxB,KAAKoB,kBAC1C,OAAOG,EAAWE,MAAKC,GAAWA,EAAQC,KAAO3B,KAAKI,SAAQwB,OAC5DL,EAAW,IAAIK,OACf5B,KAAKC,O,CAaT,MAAA4B,GACE,MAAMC,EAAU9B,KAAKE,aACrB,MAAMqB,EAAaC,EAAkBxB,KAAKoB,kBAC1C,MAAMW,EAAcR,EAAWS,OAAS,EACxC,MAAMC,EAAiBT,EAAkBxB,KAAKqB,qBAAqBW,OAAS,EAC5E,MAAME,EAAalC,KAAKW,OAAS,QAAU,UAAY,UAEvD,OACEwB,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CAAQC,MAAM,iBACZH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,6DACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oDACTH,EAAA,QAAAE,IAAA,2CAAME,KAAK,aAEbJ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,yBACRP,EAAW,CAERI,EAAA,QACEG,MAAM,kCACNE,KAAK,UAAS,aACFxC,KAAKE,eAAiB,KAAO,IAAM,KAE9CF,KAAKsB,eAERtB,KAAKM,uBAAyB,YAC5B6B,EAAA,gBACEM,KAAMzC,KAAKoB,iBACXhB,MAAOJ,KAAKI,MACZsC,KAAM1C,KAAKO,aACXoC,UAAW3C,KAAKK,kBAChBuC,WAAY5C,KAAKY,sBAGnBuB,EAAA,8BACEhC,SAAUH,KAAKoB,iBACfhB,MAAOJ,KAAKI,MACZyC,gBAAiB7C,KAAKK,kBACtBuC,WAAY5C,KAAKY,uBAKvBuB,EAAA,WACEG,MAAM,yBACNQ,GAAIhB,EACJiB,QAAQ,mBACRC,SAAQ,KACRC,MAAOf,EACPgB,eAAgB,GAEflD,KAAKsB,gBAIZa,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qDACTH,EAAA,QAAAE,IAAA,2CAAME,KAAK,eAGdN,EACCE,EAAA,OAAKG,MAAM,6BAA4B,aAAatC,KAAKU,sBACvDyB,EAAA,8BACEhC,SAAUH,KAAKqB,oBACfjB,MAAOJ,KAAKS,SACZoC,gBAAiB7C,KAAKU,qBACtBkC,WAAY5C,KAAKkB,0BAGnB,M","ignoreList":[]}