@ds-mo/ui 14.0.0 → 14.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.package-ready.json +1 -1
- package/dist/agent-patterns.json +1 -1
- package/dist/agent.json +26 -6
- package/dist/angular/ds-mobile-sheet-nav.d.ts +1 -1
- package/dist/angular/ds-mobile-sheet-nav.js +3 -3
- package/dist/angular/ds-tab-group.d.ts +1 -1
- package/dist/angular/ds-tab-group.js +3 -3
- package/dist/components/ds-agent-questionnaire.js +1 -1
- package/dist/components/ds-agent-response.js +1 -1
- package/dist/components/ds-banner.js +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-title.js +1 -1
- package/dist/components/ds-bar-workflow.js +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-card-chart.js +1 -1
- package/dist/components/ds-card-overview.js +1 -1
- package/dist/components/ds-card-overview.js.map +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-chart-legend.js +1 -1
- package/dist/components/ds-chart-legend.js.map +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-chip.js.map +1 -1
- package/dist/components/ds-code-block.js +1 -1
- package/dist/components/ds-conversation-list-item.js +1 -1
- package/dist/components/ds-conversation-list-item.js.map +1 -1
- package/dist/components/ds-filter-menu.js +1 -1
- package/dist/components/ds-filter-menu.js.map +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-input.js.map +1 -1
- package/dist/components/ds-markdown.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-message-actions.js +1 -1
- package/dist/components/ds-message-composer.js +1 -1
- package/dist/components/ds-message-scroller.js +1 -1
- package/dist/components/ds-message-scroller.js.map +1 -1
- package/dist/components/ds-mobile-bar-nav.js +1 -1
- package/dist/components/ds-mobile-header.js +1 -1
- package/dist/components/ds-mobile-section-switcher.js +1 -1
- package/dist/components/ds-mobile-sheet-nav.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-sub-nav.js +1 -1
- package/dist/components/ds-panel-sub-nav.js.map +1 -1
- package/dist/components/ds-panel-tool-header.js +1 -1
- package/dist/components/ds-panel-tool-search.js +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-radio.js +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-select.js.map +1 -1
- package/dist/components/ds-shell-app.js +1 -1
- package/dist/components/ds-shell-app.js.map +1 -1
- package/dist/components/ds-shell-page.js +1 -1
- package/dist/components/ds-shell-tools.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-table.js +1 -1
- package/dist/components/ds-table.js.map +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-toast.js +1 -1
- package/dist/components/p-1tOy4H51.js +2 -0
- package/dist/components/{p-DatlGTJp.js.map → p-1tOy4H51.js.map} +1 -1
- package/dist/components/{p-nMkoXLC0.js → p-BiOfbCke.js} +2 -2
- package/dist/components/{p-1KtrhAC7.js → p-BnPcWBA8.js} +2 -2
- package/dist/components/{p-D0i_J2rj.js → p-CRjpqqAI.js} +2 -2
- package/dist/components/{p-D0i_J2rj.js.map → p-CRjpqqAI.js.map} +1 -1
- package/dist/components/p-CTTDiW33.js +2 -0
- package/dist/components/{p--z-DWRkg.js.map → p-CTTDiW33.js.map} +1 -1
- package/dist/components/{p-DXgSSxyB.js → p-CZncU32j.js} +2 -2
- package/dist/components/p-CZncU32j.js.map +1 -0
- package/dist/components/{p-CQS5aWiC.js → p-ChlRsQYY.js} +2 -2
- package/dist/components/p-CrjsT3s7.js +2 -0
- package/dist/components/p-CrjsT3s7.js.map +1 -0
- package/dist/components/p-D4bL9H8v.js +2 -0
- package/dist/components/p-D4bL9H8v.js.map +1 -0
- package/dist/components/{p-BaiGt_o6.js → p-DD5OCVXx.js} +2 -2
- package/dist/components/{p-BaiGt_o6.js.map → p-DD5OCVXx.js.map} +1 -1
- package/dist/components/p-DJ_FsLCc.js +2 -0
- package/dist/components/{p-DofS_hVZ.js.map → p-DJ_FsLCc.js.map} +1 -1
- package/dist/components/{p-DXHq_AfZ.js → p-DT4WdAup.js} +2 -2
- package/dist/components/{p-DYoCb_sj.js → p-DYzjeIAT.js} +2 -2
- package/dist/components/{p-DYoCb_sj.js.map → p-DYzjeIAT.js.map} +1 -1
- package/dist/components/p-Dly2SR-q.js +2 -0
- package/dist/components/{p-BKsWDUnX.js.map → p-Dly2SR-q.js.map} +1 -1
- package/dist/components/p-DmZupC1-.js +2 -0
- package/dist/components/p-DmZupC1-.js.map +1 -0
- package/dist/components/p-DmwMiaWL.js +2 -0
- package/dist/components/p-DmwMiaWL.js.map +1 -0
- package/dist/components/p-Dr4AgJbV.js +2 -0
- package/dist/components/{p-DAW6G8Sl.js.map → p-Dr4AgJbV.js.map} +1 -1
- package/dist/components/p-DuFm-ieS.js +2 -0
- package/dist/components/p-DuFm-ieS.js.map +1 -0
- package/dist/components/p-DvJkkdIO.js +2 -0
- package/dist/components/{p-DY_sA9Jz.js.map → p-DvJkkdIO.js.map} +1 -1
- package/dist/components/p-NTU5jrG_.js +2 -0
- package/dist/components/{p-ZtJM0cZm.js.map → p-NTU5jrG_.js.map} +1 -1
- package/dist/components/p-NdahPypA.js.map +1 -1
- package/dist/components/{p-S9IjLCGj.js → p-c9QiNOc7.js} +2 -2
- package/dist/components/{p-CIhETsHv.js → p-eKARJmWs.js} +2 -2
- package/dist/components/p-jMCRaxQW.js +2 -0
- package/dist/components/{p-CUeuemsF.js.map → p-jMCRaxQW.js.map} +1 -1
- package/dist/docs/components.json +106 -3
- package/dist/lib/components/ShellApp/shell-app-types.d.ts +2 -0
- package/dist/mcp-data/registry/card-overview.json +1 -1
- package/dist/mcp-data/registry/input.json +1 -1
- package/dist/mcp-data/registry/message-scroller.json +1 -1
- package/dist/mcp-data/registry/mobile-header.json +4 -3
- package/dist/mcp-data/registry/mobile-sheet-nav.json +43 -4
- package/dist/mcp-data/registry/panel-nav.json +5 -4
- package/dist/mcp-data/registry/registry.json +25 -5
- package/dist/mcp-data/registry/shell-app.json +5 -3
- package/dist/mcp-data/registry/shell-page.json +2 -2
- package/dist/mcp-data/registry/tab-group.json +22 -3
- package/dist/types/components/MessageScroller/MessageScroller.d.ts +1 -0
- package/dist/types/components/MobileSheetNav/MobileSheetNav.d.ts +4 -0
- package/dist/types/components/PanelNav/PanelNav.d.ts +1 -1
- package/dist/types/components/ShellApp/ShellApp.d.ts +1 -0
- package/dist/types/components/ShellApp/shell-app-types.d.ts +2 -0
- package/dist/types/components/ShellPage/ShellPage.d.ts +3 -0
- package/dist/types/components/TabGroup/TabGroup.d.ts +4 -0
- package/dist/types/components.d.ts +37 -4
- package/package.json +2 -2
- package/dist/components/p--z-DWRkg.js +0 -2
- package/dist/components/p-BKsWDUnX.js +0 -2
- package/dist/components/p-CElfUmMp.js +0 -2
- package/dist/components/p-CElfUmMp.js.map +0 -1
- package/dist/components/p-CUeuemsF.js +0 -2
- package/dist/components/p-Cae9PFPE.js +0 -2
- package/dist/components/p-Cae9PFPE.js.map +0 -1
- package/dist/components/p-Cih1XCy3.js +0 -2
- package/dist/components/p-Cih1XCy3.js.map +0 -1
- package/dist/components/p-CoTD4Mmb.js +0 -2
- package/dist/components/p-CoTD4Mmb.js.map +0 -1
- package/dist/components/p-DAW6G8Sl.js +0 -2
- package/dist/components/p-DXgSSxyB.js.map +0 -1
- package/dist/components/p-DY_sA9Jz.js +0 -2
- package/dist/components/p-DatlGTJp.js +0 -2
- package/dist/components/p-DofS_hVZ.js +0 -2
- package/dist/components/p-ZtJM0cZm.js +0 -2
- /package/dist/components/{p-nMkoXLC0.js.map → p-BiOfbCke.js.map} +0 -0
- /package/dist/components/{p-1KtrhAC7.js.map → p-BnPcWBA8.js.map} +0 -0
- /package/dist/components/{p-CQS5aWiC.js.map → p-ChlRsQYY.js.map} +0 -0
- /package/dist/components/{p-DXHq_AfZ.js.map → p-DT4WdAup.js.map} +0 -0
- /package/dist/components/{p-S9IjLCGj.js.map → p-c9QiNOc7.js.map} +0 -0
- /package/dist/components/{p-CIhETsHv.js.map → p-eKARJmWs.js.map} +0 -0
|
@@ -34,6 +34,8 @@ export interface ShellNavigationConfig {
|
|
|
34
34
|
dashboardLabel?: string;
|
|
35
35
|
settingsLabel?: string;
|
|
36
36
|
accountLabel?: string;
|
|
37
|
+
/** Hide the mobile-sheet Account shortcut when Settings already owns that destination. */
|
|
38
|
+
showMobileAccount?: boolean;
|
|
37
39
|
navigationLabel?: string;
|
|
38
40
|
dashboardNavigationLabel?: string;
|
|
39
41
|
settingsNavigationLabel?: string;
|
|
@@ -30,6 +30,7 @@ export declare class ShellPage {
|
|
|
30
30
|
private expandedHeaderHeight;
|
|
31
31
|
private headerTravel;
|
|
32
32
|
private expandedGeometryFrozen;
|
|
33
|
+
private pageHeaderResizeObserver;
|
|
33
34
|
private headerResizeObserver;
|
|
34
35
|
private headerMutationObserver;
|
|
35
36
|
private headerRevealFrame;
|
|
@@ -62,6 +63,8 @@ export declare class ShellPage {
|
|
|
62
63
|
private setSpacerHeight;
|
|
63
64
|
private variantClass;
|
|
64
65
|
private setStickyHeaderOffset;
|
|
66
|
+
private syncPageHeaderBlockSize;
|
|
67
|
+
private observePageHeaderGeometry;
|
|
65
68
|
private syncRenderedHeaderGeometry;
|
|
66
69
|
private cancelHeaderGeometrySync;
|
|
67
70
|
private scheduleHeaderGeometrySync;
|
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
import { EventEmitter } from '../../stencil-public-runtime';
|
|
2
|
+
import { type ControlWidth } from '../../utils';
|
|
2
3
|
import { type TabGroupItem } from './tab-item-utils';
|
|
3
4
|
export type TabBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'translucent' | 'inverted' | 'media' | 'always-dark';
|
|
4
5
|
export type TabGroupSize = 'sm' | 'md' | 'lg';
|
|
6
|
+
export type TabGroupWidth = ControlWidth;
|
|
5
7
|
export declare class TabGroup {
|
|
6
8
|
el: HTMLElement;
|
|
7
9
|
value: string;
|
|
8
10
|
tabs: TabGroupItem[];
|
|
9
11
|
/** Control density: 24px small, 32px medium, or 40px large track. */
|
|
10
12
|
size: TabGroupSize;
|
|
13
|
+
/** Width fit — hug content (default) or fill the parent with equal-width segments. */
|
|
14
|
+
width: TabGroupWidth;
|
|
11
15
|
background: TabBackground | undefined;
|
|
12
16
|
ariaLabel: string | null;
|
|
13
17
|
ariaLabelledby: string | undefined;
|
|
@@ -62,7 +62,7 @@ import { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, Text
|
|
|
62
62
|
import { SliderOrientation, SliderSize, SliderThumbAlignment, SliderValue } from "./components/Slider/Slider";
|
|
63
63
|
import { SwatchPickerOption, SwatchPickerSection } from "./components/SwatchPicker/swatch-picker-types";
|
|
64
64
|
import { SwitchSize } from "./components/Switch/Switch";
|
|
65
|
-
import { TabBackground, TabGroupSize as TabGroupSize1 } from "./components/TabGroup/TabGroup";
|
|
65
|
+
import { TabBackground, TabGroupSize as TabGroupSize1, TabGroupWidth } from "./components/TabGroup/TabGroup";
|
|
66
66
|
import { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableGroup, TableGroupCollapseChangeDetail, TableGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from "./components/Table/table-types";
|
|
67
67
|
import { TagContrast, TagIntent, TagSize } from "./components/Tag/Tag";
|
|
68
68
|
import { ToastActionEventDetail, ToastCloseEventDetail, ToastEventDetail, ToastManager, ToastSwipeDirection } from "./toast";
|
|
@@ -125,7 +125,7 @@ export { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, Text
|
|
|
125
125
|
export { SliderOrientation, SliderSize, SliderThumbAlignment, SliderValue } from "./components/Slider/Slider";
|
|
126
126
|
export { SwatchPickerOption, SwatchPickerSection } from "./components/SwatchPicker/swatch-picker-types";
|
|
127
127
|
export { SwitchSize } from "./components/Switch/Switch";
|
|
128
|
-
export { TabBackground, TabGroupSize as TabGroupSize1 } from "./components/TabGroup/TabGroup";
|
|
128
|
+
export { TabBackground, TabGroupSize as TabGroupSize1, TabGroupWidth } from "./components/TabGroup/TabGroup";
|
|
129
129
|
export { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableGroup, TableGroupCollapseChangeDetail, TableGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from "./components/Table/table-types";
|
|
130
130
|
export { TagContrast, TagIntent, TagSize } from "./components/Tag/Tag";
|
|
131
131
|
export { ToastActionEventDetail, ToastCloseEventDetail, ToastEventDetail, ToastManager, ToastSwipeDirection } from "./toast";
|
|
@@ -1762,6 +1762,11 @@ export namespace Components {
|
|
|
1762
1762
|
* @default false
|
|
1763
1763
|
*/
|
|
1764
1764
|
"open": boolean;
|
|
1765
|
+
/**
|
|
1766
|
+
* Whether the router-derived current area owns the active mobile stage.
|
|
1767
|
+
* @default true
|
|
1768
|
+
*/
|
|
1769
|
+
"routeSelectionActive": boolean;
|
|
1765
1770
|
/**
|
|
1766
1771
|
* @default []
|
|
1767
1772
|
*/
|
|
@@ -1770,6 +1775,11 @@ export namespace Components {
|
|
|
1770
1775
|
* @default 'Settings'
|
|
1771
1776
|
*/
|
|
1772
1777
|
"settingsLabel": string;
|
|
1778
|
+
/**
|
|
1779
|
+
* Show the optional Account shortcut in the sheet header.
|
|
1780
|
+
* @default true
|
|
1781
|
+
*/
|
|
1782
|
+
"showAccount": boolean;
|
|
1773
1783
|
}
|
|
1774
1784
|
interface DsModal {
|
|
1775
1785
|
/**
|
|
@@ -1801,7 +1811,7 @@ export namespace Components {
|
|
|
1801
1811
|
*/
|
|
1802
1812
|
"accountLabel": string;
|
|
1803
1813
|
/**
|
|
1804
|
-
* Keep the account-menu trigger visually
|
|
1814
|
+
* Keep the account-menu trigger visually pressed while its popup is open or closing.
|
|
1805
1815
|
* @default false
|
|
1806
1816
|
*/
|
|
1807
1817
|
"accountMenuExpanded": boolean;
|
|
@@ -2751,6 +2761,11 @@ export namespace Components {
|
|
|
2751
2761
|
* @default ''
|
|
2752
2762
|
*/
|
|
2753
2763
|
"value": string;
|
|
2764
|
+
/**
|
|
2765
|
+
* Width fit — hug content (default) or fill the parent with equal-width segments.
|
|
2766
|
+
* @default 'hug'
|
|
2767
|
+
*/
|
|
2768
|
+
"width": TabGroupWidth;
|
|
2754
2769
|
}
|
|
2755
2770
|
interface DsTable {
|
|
2756
2771
|
/**
|
|
@@ -6258,6 +6273,11 @@ declare namespace LocalJSX {
|
|
|
6258
6273
|
* @default false
|
|
6259
6274
|
*/
|
|
6260
6275
|
"open"?: boolean;
|
|
6276
|
+
/**
|
|
6277
|
+
* Whether the router-derived current area owns the active mobile stage.
|
|
6278
|
+
* @default true
|
|
6279
|
+
*/
|
|
6280
|
+
"routeSelectionActive"?: boolean;
|
|
6261
6281
|
/**
|
|
6262
6282
|
* @default []
|
|
6263
6283
|
*/
|
|
@@ -6266,6 +6286,11 @@ declare namespace LocalJSX {
|
|
|
6266
6286
|
* @default 'Settings'
|
|
6267
6287
|
*/
|
|
6268
6288
|
"settingsLabel"?: string;
|
|
6289
|
+
/**
|
|
6290
|
+
* Show the optional Account shortcut in the sheet header.
|
|
6291
|
+
* @default true
|
|
6292
|
+
*/
|
|
6293
|
+
"showAccount"?: boolean;
|
|
6269
6294
|
}
|
|
6270
6295
|
interface DsModal {
|
|
6271
6296
|
/**
|
|
@@ -6305,7 +6330,7 @@ declare namespace LocalJSX {
|
|
|
6305
6330
|
*/
|
|
6306
6331
|
"accountLabel"?: string;
|
|
6307
6332
|
/**
|
|
6308
|
-
* Keep the account-menu trigger visually
|
|
6333
|
+
* Keep the account-menu trigger visually pressed while its popup is open or closing.
|
|
6309
6334
|
* @default false
|
|
6310
6335
|
*/
|
|
6311
6336
|
"accountMenuExpanded"?: boolean;
|
|
@@ -7366,6 +7391,11 @@ declare namespace LocalJSX {
|
|
|
7366
7391
|
* @default ''
|
|
7367
7392
|
*/
|
|
7368
7393
|
"value"?: string;
|
|
7394
|
+
/**
|
|
7395
|
+
* Width fit — hug content (default) or fill the parent with equal-width segments.
|
|
7396
|
+
* @default 'hug'
|
|
7397
|
+
*/
|
|
7398
|
+
"width"?: TabGroupWidth;
|
|
7369
7399
|
}
|
|
7370
7400
|
interface DsTable {
|
|
7371
7401
|
/**
|
|
@@ -8199,11 +8229,13 @@ declare namespace LocalJSX {
|
|
|
8199
8229
|
"open": boolean;
|
|
8200
8230
|
"browseContext": NavChromeStyle;
|
|
8201
8231
|
"currentUrl": string;
|
|
8232
|
+
"routeSelectionActive": boolean;
|
|
8202
8233
|
"navigationLabel": string;
|
|
8203
8234
|
"dashboardLabel": string;
|
|
8204
8235
|
"settingsLabel": string;
|
|
8205
8236
|
"accountLabel": string;
|
|
8206
8237
|
"helpLabel": string;
|
|
8238
|
+
"showAccount": boolean;
|
|
8207
8239
|
}
|
|
8208
8240
|
interface DsModalAttributes {
|
|
8209
8241
|
"open": boolean;
|
|
@@ -8416,6 +8448,7 @@ declare namespace LocalJSX {
|
|
|
8416
8448
|
interface DsTabGroupAttributes {
|
|
8417
8449
|
"value": string;
|
|
8418
8450
|
"size": TabGroupSize;
|
|
8451
|
+
"width": TabGroupWidth;
|
|
8419
8452
|
"background": TabBackground | undefined;
|
|
8420
8453
|
"ariaLabel": string | null;
|
|
8421
8454
|
"ariaLabelledby": string | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ds-mo/ui",
|
|
3
|
-
"version": "14.
|
|
3
|
+
"version": "14.1.0",
|
|
4
4
|
"description": "CompoMo — composable web components styled with TokoMo design tokens",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"web-components",
|
|
@@ -139,7 +139,7 @@
|
|
|
139
139
|
"@angular/forms": "^22.0.7",
|
|
140
140
|
"@axe-core/playwright": "^4.12.1",
|
|
141
141
|
"@ds-mo/icons": "^7.0.0",
|
|
142
|
-
"@ds-mo/tokens": "^6.
|
|
142
|
+
"@ds-mo/tokens": "^6.3.1",
|
|
143
143
|
"@eslint/js": "^10.0.1",
|
|
144
144
|
"@fontsource-variable/inter": "^5.3.0",
|
|
145
145
|
"@fontsource/fira-code": "^5.3.0",
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
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};
|
|
2
|
-
//# sourceMappingURL=p--z-DWRkg.js.map
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{p as s,H as e,c as t,h as o,a as i,t as l}from"./index.js";import{o as a,a as r,r as n,b as h,d}from"./p-S9IjLCGj.js";import{i as c,r as m}from"./p-DNpE0RBz.js";import{d as u}from"./p-D8nnhQNJ.js";import{d as b}from"./p--z-DWRkg.js";import{d as p}from"./p-BFfLvMZd.js";import{d as f}from"./p-Ca-I2UnB.js";import{d as g}from"./p-DofS_hVZ.js";import{d as v}from"./p-CElfUmMp.js";import{d as k}from"./p-D0i_J2rj.js";import{d as _}from"./p-1KtrhAC7.js";import{d as w}from"./p-BDCrM8-1.js";import{d as C}from"./p-BOCrvs-v.js";import{d as y}from"./p-Cih1XCy3.js";import{d as j}from"./p-CUeuemsF.js";import{d as E}from"./p-DZFilC--.js";import{d as x}from"./p-CtSxm6PI.js";const D=()=>`.sc-ds-shell-tools-h{display:block;min-width:0;min-height:0;height:100%;background:transparent}[responsive-mode='mobile'].sc-ds-shell-tools-h{width:100%;background:var(--color-background-primary)}.shell-tools__desktop.sc-ds-shell-tools,.shell-tools__desktop.sc-ds-shell-tools ds-panel-tools.sc-ds-shell-tools,.shell-tools__mobile.sc-ds-shell-tools{display:block;min-width:0;min-height:0;height:100%}.shell-tools__mobile.sc-ds-shell-tools{display:grid;grid-template-rows:auto minmax(0, 1fr);background:var(--color-background-primary)}.shell-tools__mobile-header.sc-ds-shell-tools{grid-row:1}.shell-tools__mobile-body.sc-ds-shell-tools,.shell-tools__view.sc-ds-shell-tools{min-width:0;min-height:0;height:100%}.shell-tools__mobile-body.sc-ds-shell-tools{grid-row:2;overflow:hidden}.shell-tools__view.sc-ds-shell-tools{overflow:auto;overscroll-behavior:contain}.shell-tools__view[hidden].sc-ds-shell-tools{display:none}.shell-tools__view.sc-ds-shell-tools-s>*,.shell-tools__view .sc-ds-shell-tools-s>*{min-height:0}`;const L=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsToolChange=t(this,"dsToolChange");this.dsPresentationChange=t(this,"dsPresentationChange");this.dsHeaderBack=t(this,"dsHeaderBack");this.dsHeaderAction=t(this,"dsHeaderAction");this.responsiveMode="desktop";this.open=false;this.activeTool="";this.presentation="drawer";this.fullscreenHeaderMode="shared";this.items=[];this.headers={};this.storageKey="";this.toolsLabel="Tools";this.toolShortcutsLabel="Tool shortcuts";this.inboxLabel="Inbox";this.inboxNavigationLabel="Inbox sections";this.panelToolsEl=null;this.selectInboxTool=s=>{const e=s.detail;if(!this.availableInboxTools.includes(e)||e===this.mobileActiveTool)return;this.open=true;this.activeTool=e;this.dsToolChange.emit({id:e,selected:true})};this.handlePanelToolChange=s=>{this.activeTool=s.detail.id;this.open=s.detail.selected};this.handlePanelPresentationChange=s=>{this.presentation=s.detail.presentation};this.handleMobileHeaderAction=(s,e,t)=>{t.stopPropagation();this.dsHeaderAction.emit({tool:s,id:e})}}presentationChanged(s,e){if(s===e)return;if(this.panelToolsEl&&this.panelToolsEl.getAttribute("presentation")!==s){this.panelToolsEl.setAttribute("presentation",s)}}get resolvedItems(){return this.items??[]}get availableInboxTools(){return this.resolvedItems.filter((s=>!s.isInactive&&(s.mobileDestination==="inbox"||c(s.id)))).map((s=>s.id))}get mobileViewOrder(){return a(this.resolvedItems).map((s=>s.id))}toolLabel(s){const e=this.resolvedItems.find((e=>e.id===s));return e?.label??e?.ariaLabel??r[s]??s}get mobileActiveTool(){const s=this.resolvedItems.find((s=>s.id===this.activeTool));const e=s?.mobileDestination==="inbox"||c(this.activeTool);if(!e)return this.activeTool;return m(this.activeTool,this.availableInboxTools)}componentWillLoad(){this.reconcileAvailability()}handleItemsChange(){this.reconcileAvailability()}reconcileAvailability(){const s=n(this.resolvedItems,this.open,this.activeTool);this.open=s.open;this.activeTool=s.activeTool}resolvedHeaders(){return this.headers??{}}activeHeader(s){return this.resolvedHeaders()[s]??{}}activateMobileTool(s){const e=this.resolvedItems.find((e=>e.id===s));if(!e||e.isInactive)return;const t=h(this.open,this.activeTool,s);this.open=t.open;this.activeTool=t.activeTool;this.dsToolChange.emit({id:s,selected:t.selected})}async activateTool(s){if(this.responsiveMode!=="mobile"){await(this.panelToolsEl?.activateTool(s));return}this.activateMobileTool(s)}async closeDrawer(){if(this.responsiveMode!=="mobile"){await(this.panelToolsEl?.closeDrawer());return}if(!this.open)return;const s=this.activeTool;this.open=false;if(s)this.dsToolChange.emit({id:s,selected:false})}async focusHeaderAction(s){if(this.responsiveMode!=="mobile"){await(this.panelToolsEl?.focusHeaderAction(s));return}const e=this.el.querySelector(`[data-header-action-id="${CSS.escape(s)}"]`);await(e?.setFocus?.())}renderForwardedSlots(){return this.mobileViewOrder.flatMap((s=>[o("slot",{name:s,slot:s}),o("slot",{name:`${s}-view`,slot:`${s}-view`})]))}renderDesktop(){return o("div",{class:"shell-tools__desktop"},o("ds-panel-tools",{open:this.open,activeTool:this.activeTool,presentation:this.presentation,fullscreenHeaderMode:this.fullscreenHeaderMode,items:this.resolvedItems,headers:this.resolvedHeaders(),storageKey:this.storageKey,toolsLabel:this.toolsLabel,toolShortcutsLabel:this.toolShortcutsLabel,ref:s=>{this.panelToolsEl=s},onDsToolChange:this.handlePanelToolChange,onDsPresentationChange:this.handlePanelPresentationChange},this.renderForwardedSlots()))}renderMobileHeader(s){const e=this.activeHeader(s);const t=e.title?.trim();const i=t||this.toolLabel(s);const l=(e.actions??[]).filter((s=>s.id!=="fullscreen"));const a=c(s)&&!e.showBack;const r=a?this.availableInboxTools.map((s=>{const e=this.resolvedItems.find((e=>e.id===s));return{id:s,label:this.toolLabel(s),variant:"label",dot:e?.dot}})):[];return o("ds-mobile-header",{class:"shell-tools__mobile-header",heading:i,headingLevel:"h2",sections:r,value:s,sectionsAriaLabel:this.inboxNavigationLabel,sectionsPresentation:a?"segmented":"switcher",sectionsSize:"lg",onDsSectionChange:this.selectInboxTool},e.showBack?o("ds-tooltip",{slot:"leading",label:e.backAriaLabel||"Back",side:"bottom",size:"sm"},o("ds-button-unfilled",{variant:"icon",icon:e.backIcon||"ChevronLeft",size:"md","aria-label":e.backAriaLabel||"Back",activeFill:false,hasBorder:false,onDsClick:()=>this.dsHeaderBack.emit({tool:s})})):null,l.map((e=>o("ds-tooltip",{slot:"trailing",key:e.id,label:e.ariaLabel,side:"bottom",size:"sm"},o("ds-button-unfilled",{id:e.triggerId||undefined,"data-header-action-id":e.id,variant:"icon",icon:e.icon,size:"md","aria-label":e.ariaLabel,haspopup:e.haspopup,controls:e.controls,expanded:e.expanded,pressed:e.pressed,isInactive:e.isInactive,activeFill:false,hasBorder:false,onDsClick:t=>this.handleMobileHeaderAction(s,e.id,t)})))))}renderMobile(){const s=this.mobileActiveTool;return o("div",{class:"shell-tools__mobile","aria-hidden":this.open&&s?undefined:"true",inert:this.open&&s?undefined:true},s?this.renderMobileHeader(s):null,o("div",{class:"shell-tools__mobile-body"},this.mobileViewOrder.map((e=>{const t=this.open&&e===s;return o("div",{class:{"shell-tools__view":true,"shell-tools__view--active":t},hidden:!t,"aria-hidden":t?undefined:"true",inert:t?undefined:true},o("slot",{name:`${e}-view`},o("slot",{name:e})))}))))}render(){const s=this.responsiveMode==="mobile";return o(i,{key:"761ba5e3e8b49122d348f8a242a7477a98b08334",role:s?this.presentation==="fullscreen"?"dialog":"complementary":undefined,"aria-modal":s&&this.presentation==="fullscreen"?"true":undefined,"aria-label":s?this.toolsLabel:undefined},s?this.renderMobile():this.renderDesktop())}get el(){return this}static get watchers(){return{presentation:[{presentationChanged:0}],items:[{handleItemsChange:0}]}}static get style(){return D()}},[262,"ds-shell-tools",{responsiveMode:[513,"responsive-mode"],open:[1540],activeTool:[1537,"active-tool"],presentation:[1537],fullscreenHeaderMode:[513,"fullscreen-header-mode"],items:[16],headers:[16],storageKey:[1,"storage-key"],toolsLabel:[1,"tools-label"],toolShortcutsLabel:[1,"tool-shortcuts-label"],inboxLabel:[1,"inbox-label"],inboxNavigationLabel:[1,"inbox-navigation-label"],activateTool:[64],closeDrawer:[64],focusHeaderAction:[64]},undefined,{presentation:[{presentationChanged:0}],items:[{handleItemsChange:0}]}]);function I(){if(typeof customElements==="undefined"){return}const s=["ds-shell-tools","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-mobile-header","ds-mobile-section-switcher","ds-panel-tool-header","ds-panel-tools","ds-swatch-picker","ds-switch","ds-tab-group","ds-tag","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-shell-tools":if(!customElements.get(l(s))){customElements.define(l(s),L)}break;case"ds-badge":if(!customElements.get(l(s))){u()}break;case"ds-button-unfilled":if(!customElements.get(l(s))){b()}break;case"ds-icon":if(!customElements.get(l(s))){p()}break;case"ds-loader":if(!customElements.get(l(s))){f()}break;case"ds-menu":if(!customElements.get(l(s))){g()}break;case"ds-mobile-header":if(!customElements.get(l(s))){v()}break;case"ds-mobile-section-switcher":if(!customElements.get(l(s))){k()}break;case"ds-panel-tool-header":if(!customElements.get(l(s))){_()}break;case"ds-panel-tools":if(!customElements.get(l(s))){d()}break;case"ds-swatch-picker":if(!customElements.get(l(s))){w()}break;case"ds-switch":if(!customElements.get(l(s))){C()}break;case"ds-tab-group":if(!customElements.get(l(s))){y()}break;case"ds-tag":if(!customElements.get(l(s))){j()}break;case"ds-text":if(!customElements.get(l(s))){E()}break;case"ds-tooltip":if(!customElements.get(l(s))){x()}break}}))}I();export{L as S,I as d};
|
|
2
|
-
//# sourceMappingURL=p-BKsWDUnX.js.map
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
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};
|
|
2
|
-
//# sourceMappingURL=p-CElfUmMp.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"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":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{p as o,H as t,c as n,h as r,a as i,t as s}from"./index.js";import{d as a}from"./p-BFfLvMZd.js";import{d as e}from"./p-DZFilC--.js";import{C as c}from"./p-CuwopElg.js";const d=()=>`.ds-control--lg.sc-ds-tag,.ds-control--lg.sc-ds-tag-h,.ds-control--md.sc-ds-tag-h,.ds-control--md.sc-ds-tag,.ds-control--sm.sc-ds-tag-h,.ds-control--sm.sc-ds-tag,.ds-control--xs.sc-ds-tag-h,.ds-control--xs.sc-ds-tag{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-tag-h,.ds-control--lg.sc-ds-tag{--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-tag-h,.ds-control--md.sc-ds-tag{--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-tag-h,.ds-control--sm.sc-ds-tag{--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-tag-h,.ds-control--xs.sc-ds-tag{--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}@media (forced-colors: active){.sc-ds-tag:root,.sc-ds-tag-h,.ds-forced-colors-scope.sc-ds-tag{--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-tag-h,.ds-interaction-fill.sc-ds-tag{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-tag-h::before,.ds-interaction-fill.sc-ds-tag::before,.ds-interaction-fill.sc-ds-tag-h::after,.ds-interaction-fill.sc-ds-tag::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-tag-h::before,.ds-interaction-fill.sc-ds-tag::before{z-index:1}.ds-interaction-fill.sc-ds-tag-h::after,.ds-interaction-fill.sc-ds-tag::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-tag-h,.ds-interaction-fill--bordered.sc-ds-tag{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-tag-h::before,.ds-interaction-fill--selected.sc-ds-tag::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-tag-h,.ds-interaction-fill--selected.sc-ds-tag{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-tag-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-tag:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-tag-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-tag:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-tag-h::after,.ds-interaction-fill--grouped.sc-ds-tag::after,.ds-interaction-fill--grouped.sc-ds-tag-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-tag:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-tag-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-tag:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-tag-h,.ds-interaction-fill--grouped.sc-ds-tag{--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-tag-h>.ds-interaction-fill__content.sc-ds-tag,.ds-interaction-fill.sc-ds-tag>.ds-interaction-fill__content.sc-ds-tag,.ds-interaction-fill__content.sc-ds-tag{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-tag-h,.ds-interaction-fill--on-faint.sc-ds-tag{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-tag-h,.ds-interaction-fill--on-medium.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-bold.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-strong.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-translucent.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-inverted.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-media.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-always-dark.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-navigation.sc-ds-tag{--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-tag-h::after,.ds-interaction-fill.sc-ds-tag::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-tag-h::before,.ds-interaction-fill--selected.sc-ds-tag::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-tag-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-tag: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)}}@media (forced-colors: active){.sc-ds-tag:root,.sc-ds-tag-h,.ds-forced-colors-scope.sc-ds-tag{--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-tag-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-tag-h,.ds-focus-ring.sc-ds-tag,.ds-focus-ring-inset.sc-ds-tag-h,.ds-focus-ring-inset.sc-ds-tag{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-tag-h:focus-visible,.ds-focus-ring.sc-ds-tag: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-tag-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-tag{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-tag-h:focus-visible,.ds-focus-ring-inset.sc-ds-tag:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tag-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-tag: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-tag-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tag{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tag-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tag::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-tag-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-tag:root,.sc-ds-tag-h,.ds-forced-colors-scope.sc-ds-tag{--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-tag-h,.ds-control-inactive.sc-ds-tag{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-tag-h,.ds-control-inactive.sc-ds-tag{color:var(--ds-forced-color-disabled);opacity:1}}.sc-ds-tag-h{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;color:var(--color-foreground-primary);position:relative;border-radius:var(--ds-control-radius, var(--dimension-radius-025));height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);gap:var(--ds-control-gap);user-select:none;-webkit-user-select:none}.tag--rounded.sc-ds-tag-h{border-radius:var(--dimension-radius-half)}.tag__label.sc-ds-tag{position:relative;z-index:2;padding:0 var(--ds-control-label-inset);white-space:nowrap;flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.ds-control--lg.ds-control--inset.sc-ds-tag-h,.ds-control--lg.ds-control--inset.sc-ds-tag{--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-tag-h,.ds-control--md.ds-control--inset.sc-ds-tag{--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-tag-h,.ds-control--sm.ds-control--inset.sc-ds-tag{--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-tag-h,.ds-control--xs.ds-control--inset.sc-ds-tag{--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-tag-h,.ds-control--lg.ds-control--inset-double.sc-ds-tag{--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-tag-h,.ds-control--md.ds-control--inset-double.sc-ds-tag{--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-tag-h,.ds-control--sm.ds-control--inset-double.sc-ds-tag{--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) )}.sc-ds-tag-h{min-inline-size:var(--ds-control-height)}.tag--intent-neutral.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-neutral);color:var(--color-foreground-medium-neutral)}.tag--intent-brand.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-brand);color:var(--color-foreground-on-strong-background-primary)}.tag--intent-ai.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-ai);color:var(--color-foreground-medium-ai)}.tag--intent-negative.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-negative);color:var(--color-foreground-medium-negative)}.tag--intent-warning.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-warning);color:var(--color-foreground-medium-warning)}.tag--intent-caution.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-caution);color:var(--color-foreground-medium-caution)}.tag--intent-positive.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-positive);color:var(--color-foreground-medium-positive)}.tag--intent-neutral.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-brand.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-brand);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-ai.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-ai);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-negative.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-negative);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-warning.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-warning);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-caution.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-caution);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-positive.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-positive);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-neutral.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-neutral);color:var(--color-foreground-strong-neutral)}.tag--intent-brand.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-brand);color:var(--color-foreground-on-medium-background-primary)}.tag--intent-ai.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-ai);color:var(--color-foreground-strong-ai)}.tag--intent-negative.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-negative);color:var(--color-foreground-strong-negative)}.tag--intent-warning.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-warning);color:var(--color-foreground-strong-warning)}.tag--intent-caution.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-caution);color:var(--color-foreground-strong-caution)}.tag--intent-positive.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-positive);color:var(--color-foreground-strong-positive)}.tag--intent-neutral.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.tag--intent-brand.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.tag--intent-ai.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-ai);color:var(--color-foreground-bold-ai)}.tag--intent-negative.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.tag--intent-warning.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-warning);color:var(--color-foreground-bold-warning)}.tag--intent-caution.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.tag--intent-positive.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-positive);color:var(--color-foreground-bold-positive)}.tag--interactive.sc-ds-tag-h{padding:0;gap:0}.tag__button.sc-ds-tag{all:unset;position:relative;z-index:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;max-width:100%;height:100%;padding:0 var(--ds-control-padding-inline);gap:var(--ds-control-gap);border-radius:inherit;color:inherit;cursor:default}.tag__button.sc-ds-tag:disabled{cursor:not-allowed}.tag__button--expanded.sc-ds-tag::after{background:var(--ds-interaction-pressed)}.tag__prefix-icon.sc-ds-tag,.tag__suffix-icon.sc-ds-tag{position:relative;z-index:2;display:inline-flex;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}`;const l={md:"md",sm:"sm",xs:"xs"};const g=o(class o extends t{constructor(o){super();if(o!==false){this.__registerHost()}this.dsClick=n(this,"dsClick");this.icon="";this.intent="neutral";this.contrast="faint";this.size="md";this.isInset=false;this.insetDepth="single";this.rounded=false;this.interactive=false;this.expanded=false;this.isInactive=false;this.handleClick=o=>{if(!this.interactive||this.isInactive)return;this.dsClick.emit(o)}}render(){const o=c[this.size];const t=l[this.size];const n=this.isInset&&this.insetDepth==="double"&&this.size!=="xs";const s=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;const a={tag:true,[`tag--intent-${this.intent}`]:true,[`tag--contrast-${this.contrast}`]:true,[`tag--size-${this.size}`]:true,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","ds-control--inset":this.isInset&&!n,"ds-control--inset-double":n,"tag--rounded":this.rounded,"tag--interactive":this.interactive,"ds-control-inactive":this.interactive&&this.isInactive};const e=[this.icon&&r("ds-icon",{class:"tag__prefix-icon",name:this.icon,size:t,color:"inherit"}),r("ds-text",{class:"tag__label",as:"span",variant:o,color:"inherit"},this.label)];if(!this.interactive){return r(i,{class:a,style:s},e)}return r(i,{class:a,style:s},r("button",{type:"button",class:{tag__button:true,"tag__button--expanded":this.expanded,"ds-interaction-fill":true,"ds-focus-ring-inset":true},"aria-haspopup":"menu","aria-expanded":this.expanded?"true":"false","aria-controls":this.ariaControls,disabled:this.isInactive||undefined,onClick:this.handleClick},e,r("ds-icon",{class:"tag__suffix-icon",name:"ChevronUpDown",size:t,color:"inherit"})))}static get style(){return d()}},[2,"ds-tag",{label:[1],icon:[1],intent:[1],contrast:[1],size:[1],isInset:[4,"is-inset"],insetDepth:[1,"inset-depth"],rounded:[4],maxWidth:[8,"max-width"],interactive:[4],expanded:[4],ariaControls:[1,"aria-controls"],isInactive:[4,"is-inactive"]}]);function v(){if(typeof customElements==="undefined"){return}const o=["ds-tag","ds-icon","ds-text"];o.forEach((o=>{switch(o){case"ds-tag":if(!customElements.get(s(o))){customElements.define(s(o),g)}break;case"ds-icon":if(!customElements.get(s(o))){a()}break;case"ds-text":if(!customElements.get(s(o))){e()}break}}))}v();export{g as T,v as d};
|
|
2
|
-
//# sourceMappingURL=p-CUeuemsF.js.map
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{p as e,H as s,h as t,a as i,t as a}from"./index.js";import{r as n}from"./p-BMc0DE59.js";function l(e,s,t){if(e!=="auto")return e;if(s==="constrained")return"constrained";if(s==="compact"||!t)return"compact";return"expanded"}const h=()=>`.sc-ds-shell-page-h{--_shell-page-content-background:var(--color-background-primary);--_shell-page-header-background:var(--color-background-primary);--_shell-page-responsive-content-block-start-inset:var(--dimension-space-400);--_shell-page-content-block-start-inset:var( --ds-shell-page-content-block-start-inset, var(--_shell-page-responsive-content-block-start-inset) );--ds-shell-page-sticky-header-block-size:var(--dimension-size-600);--ds-shell-page-content-block-start-offset:calc( var(--ds-shell-page-sticky-header-block-size) + var(--_shell-page-content-block-start-inset) );display:block;position:relative;min-width:0;min-height:100%;box-sizing:border-box;background:var(--_shell-page-content-background)}.shell-page-host--surface-secondary.sc-ds-shell-page-h{--_shell-page-content-background:var(--color-background-secondary)}.shell-page-host--surface-secondary[responsive-mode='desktop'].sc-ds-shell-page-h,.shell-page-host--surface-secondary[responsive-mode='tablet'].sc-ds-shell-page-h{--_shell-page-header-background:var(--color-background-secondary)}[responsive-mode='tablet'].sc-ds-shell-page-h,[responsive-mode='mobile'].sc-ds-shell-page-h{--_shell-page-responsive-content-block-start-inset:var(--dimension-space-200)}.shell-page-host--header-compact.sc-ds-shell-page-h,.shell-page-host--header-constrained.sc-ds-shell-page-h{--_shell-page-content-block-start-inset:var( --ds-shell-page-compact-content-block-start-inset, var(--_shell-page-responsive-content-block-start-inset) )}.shell-page-host--inset-none.sc-ds-shell-page-h,.shell-page-host--block-start-inset-none.sc-ds-shell-page-h{--_shell-page-content-block-start-inset:0px}.shell-page__scroll-sentinel.sc-ds-shell-page{position:absolute;inset-block-start:var(--ds-shell-page-header-travel, 0);inset-inline-start:0;width:var(--dimension-stroke-width-012);height:var(--dimension-stroke-width-012);pointer-events:none}.shell-page__sticky-header.sc-ds-shell-page{position:sticky;inset-block-start:var(--ds-shell-page-sticky-offset, 0);z-index:var(--dimension-z-index-raised);min-width:0;background:var(--_shell-page-header-background);overflow:visible;overflow-anchor:none}.shell-page__desktop-header.sc-ds-shell-page-s>ds-bar-title,.shell-page__desktop-header .sc-ds-shell-page-s>ds-bar-title,.shell-page__desktop-header.sc-ds-shell-page-s>ds-bar-workflow,.shell-page__desktop-header .sc-ds-shell-page-s>ds-bar-workflow,.shell-page__mobile-header.sc-ds-shell-page-s>ds-mobile-header,.shell-page__mobile-header .sc-ds-shell-page-s>ds-mobile-header{display:block;min-width:0}.shell-page__desktop-header[hidden].sc-ds-shell-page,.shell-page__mobile-header[hidden].sc-ds-shell-page{display:none}.shell-page-host--mobile.sc-ds-shell-page-h .shell-page__scroll-sentinel.sc-ds-shell-page,.shell-page-host--mobile.sc-ds-shell-page-h .shell-page__flow-spacer.sc-ds-shell-page{display:none}.shell-page__flow-spacer.sc-ds-shell-page{height:var(--ds-shell-page-flow-spacer, 0);background:var(--_shell-page-content-background)}.shell-page__content.sc-ds-shell-page{min-width:0;box-sizing:border-box;background:var(--_shell-page-content-background)}.shell-page-host--inset-default.sc-ds-shell-page-h .shell-page__content.sc-ds-shell-page{padding:var(--dimension-space-400);padding-block-start:var(--_shell-page-content-block-start-inset)}.shell-page-host--inset-default[responsive-mode='tablet'].sc-ds-shell-page-h .shell-page__content.sc-ds-shell-page,.shell-page-host--inset-default[responsive-mode='mobile'].sc-ds-shell-page-h .shell-page__content.sc-ds-shell-page{padding:var(--dimension-space-200);padding-block-start:var(--_shell-page-content-block-start-inset)}.shell-page-host--inset-none.sc-ds-shell-page-h .shell-page__content.sc-ds-shell-page{padding:0}`;const r=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.headerPresentation="auto";this.contentInset="default";this.contentInsetBlockStart="default";this.scrollCompaction=true;this.contentSurface="primary";this.responsiveMode="desktop";this.pageTopVisible=true;this.sentinelEl=null;this.spacerEl=null;this.stickyHeaderEl=null;this.headerEl=null;this.expandedHeaderHeight=0;this.headerTravel=0;this.expandedGeometryFrozen=false;this.headerResizeObserver=null;this.headerMutationObserver=null;this.headerRevealFrame=null;this.headerGeometryFrame=null;this.reconnectFrame=null;this.scrollRoot=null;this.hasLoaded=false;this.handleScroll=()=>{if(!this.sentinelEl||!this.scrollRoot)return;const e=this.scrollRoot===window?0:this.scrollRoot.getBoundingClientRect().top;this.syncHeaderDividerInset(e);const s=this.sentinelEl.getBoundingClientRect().top>=e;if(this.scrollCompaction&&!s&&this.pageTopVisible&&this.headerEl?.classList.contains(this.variantClass("expanded"))){this.captureExpandedHeaderGeometry(this.headerEl);this.expandedGeometryFrozen=true}if(s&&this.expandedGeometryFrozen&&this.el.getBoundingClientRect().top>=e){this.expandedGeometryFrozen=false;if(this.headerEl?.classList.contains(this.variantClass("expanded"))){this.captureExpandedHeaderGeometry(this.headerEl)}}this.pageTopVisible=s};this.handleHeaderSlotChange=e=>{if(this.responsiveMode==="mobile")return;const s=e.target;const t=s.assignedElements().find((e=>e.tagName.toLowerCase()==="ds-bar-title"));this.observeHeader(t??null)}}handleHeaderContractChange(){this.syncHeaderVariant(true)}handleResponsiveModeChange(){this.observeHeader(this.responsiveMode==="mobile"?null:this.findHeader())}componentDidLoad(){this.hasLoaded=true;this.connectRuntime()}componentDidRender(){this.syncHeaderVariant()}connectedCallback(){if(!this.hasLoaded)return;if(this.reconnectFrame!==null)cancelAnimationFrame(this.reconnectFrame);this.reconnectFrame=requestAnimationFrame((()=>{this.reconnectFrame=null;if(this.el.isConnected)this.connectRuntime()}))}disconnectedCallback(){if(this.reconnectFrame!==null)cancelAnimationFrame(this.reconnectFrame);this.reconnectFrame=null;this.headerResizeObserver?.disconnect();this.headerResizeObserver=null;this.headerMutationObserver?.disconnect();this.headerMutationObserver=null;this.cancelHeaderReveal();this.cancelHeaderGeometrySync();this.headerEl?.style.removeProperty("--ds-bar-title-divider-inset");this.scrollRoot?.removeEventListener("scroll",this.handleScroll);this.scrollRoot=null}connectRuntime(){this.observeHeader(this.responsiveMode==="mobile"?null:this.findHeader());this.connectScrollRoot()}get effectiveVariant(){return l(this.headerPresentation,this.headerCapacity??"roomy",this.scrollCompaction?this.pageTopVisible:true)}get headerContractResolved(){return this.headerPresentation!=="auto"||this.headerCapacity!==undefined}get isScrollCompacted(){return this.scrollCompaction&&this.headerPresentation==="auto"&&this.headerCapacity==="roomy"&&!this.pageTopVisible}get contentInsetStyles(){const e={};const s=this.contentInsetBlockStartSize?.trim();const t=this.compactContentInsetBlockStartSize?.trim();if(s)e["--ds-shell-page-content-block-start-inset"]=s;if(t)e["--ds-shell-page-compact-content-block-start-inset"]=t;return e}composedParent(e){return e.assignedSlot?.parentElement??e.parentElement}findScrollRoot(){let e=this.composedParent(this.el);while(e&&e!==document.documentElement){const s=getComputedStyle(e).overflowY;if(s==="auto"||s==="scroll"||s==="overlay"){return e}e=this.composedParent(e)}return window}connectScrollRoot(){const e=this.findScrollRoot();if(e===this.scrollRoot)return;this.scrollRoot?.removeEventListener("scroll",this.handleScroll);this.scrollRoot=e;this.scrollRoot.addEventListener("scroll",this.handleScroll,{passive:true});this.handleScroll()}get scrollRootResolved(){const e=this.el.closest("ds-shell-app");if(!e)return true;const s=e.querySelector(".shell-app__content");return s!==null&&this.scrollRoot===s}findHeader(){return this.el.querySelector("ds-bar-title")}get compactHeaderHeight(){return n("--dimension-size-600",0)}syncHeaderDividerInset(e){const s=this.headerEl;if(!s)return;const t=this.scrollCompaction&&this.headerPresentation==="auto"&&this.headerCapacity==="roomy";const i=n("--dimension-space-400",0);if(!t||!this.sentinelEl||!this.scrollRoot||this.headerTravel<=0||i<=0){s.style.removeProperty("--ds-bar-title-divider-inset");return}const a=e??(this.scrollRoot===window?0:this.scrollRoot.getBoundingClientRect().top);const l=this.sentinelEl.getBoundingClientRect().top-a;const h=Math.min(1,Math.max(0,1-l/this.headerTravel));s.style.setProperty("--ds-bar-title-divider-inset",`${i*(1-h)}px`)}setHeaderTravel(e){const s=Math.max(0,e);if(Math.abs(s-this.headerTravel)<.5)return;this.headerTravel=s;this.el.style.setProperty("--ds-shell-page-header-travel",`${s}px`);this.handleScroll()}measureHeaderTravel(e){const s=e.querySelector("[data-shell-page-header-anchor]");const t=this.compactHeaderHeight;if(!s||t<=0)return;const i=e.getBoundingClientRect();const a=s.getBoundingClientRect();if(i.height<=0||a.height<=0)return;const n=a.top-i.top;const l=Math.max(0,(t-a.height)/2);this.setHeaderTravel(n-l)}captureExpandedHeaderGeometry(e){this.expandedHeaderHeight=Math.max(this.expandedHeaderHeight,e.getBoundingClientRect().height);this.measureHeaderTravel(e)}setSpacerHeight(e){if(!this.spacerEl)return;this.spacerEl.style.setProperty("--ds-shell-page-flow-spacer",`${Math.max(0,e)}px`)}variantClass(e){return`bar-title-host--${e}`}setStickyHeaderOffset(e){this.stickyHeaderEl?.style.setProperty("--ds-shell-page-sticky-offset",e==="expanded"&&this.scrollCompaction&&this.headerPresentation==="auto"&&this.headerCapacity==="roomy"?`${-this.headerTravel}px`:"0px")}syncRenderedHeaderGeometry(e){const s=this.effectiveVariant;if(!e.classList.contains(this.variantClass(s)))return;const t=e.getBoundingClientRect().height;if(t>0){this.el.style.setProperty("--ds-shell-page-sticky-header-block-size",`${t}px`)}this.setSpacerHeight(this.isScrollCompacted?this.expandedHeaderHeight-this.compactHeaderHeight:0);this.setStickyHeaderOffset(s);if(s==="expanded"&&!this.expandedGeometryFrozen){this.captureExpandedHeaderGeometry(e);this.setStickyHeaderOffset(s)}}cancelHeaderGeometrySync(){if(this.headerGeometryFrame!==null)cancelAnimationFrame(this.headerGeometryFrame);this.headerGeometryFrame=null}scheduleHeaderGeometrySync(s){this.cancelHeaderGeometrySync();let t=e.MAX_HEADER_GEOMETRY_FRAMES;let i=0;const a=()=>{if(this.headerEl!==s)return;t-=1;i+=1;this.connectScrollRoot();this.syncRenderedHeaderGeometry(s);const e=this.effectiveVariant!=="expanded"||this.expandedHeaderHeight>0&&this.headerTravel>0;if(e&&this.scrollRootResolved&&i>=2||t<=0){this.headerGeometryFrame=null;return}this.headerGeometryFrame=requestAnimationFrame(a)};this.headerGeometryFrame=requestAnimationFrame(a)}cancelHeaderReveal(){if(this.headerRevealFrame!==null)cancelAnimationFrame(this.headerRevealFrame);this.headerRevealFrame=null;this.headerEl?.removeAttribute("data-shell-page-syncing")}revealHeaderWhenSynced(s,t){let i=e.MAX_HEADER_REVEAL_FRAMES;const a=()=>{if(this.headerEl!==s){s.removeAttribute("data-shell-page-syncing");return}i-=1;if(s.classList.contains(this.variantClass(t))){s.removeAttribute("data-shell-page-syncing");this.headerRevealFrame=null;return}if(i<=0){this.headerRevealFrame=null;return}this.headerRevealFrame=requestAnimationFrame(a)};this.headerRevealFrame=requestAnimationFrame(a)}syncHeaderVariant(e=false){const s=this.headerEl;if(!s)return;this.syncHeaderDividerInset();if(!this.headerContractResolved){this.cancelHeaderReveal();s.setAttribute("data-shell-page-syncing","");return}const t=this.effectiveVariant;const i=!s.classList.contains(this.variantClass(t));if(!i)this.syncRenderedHeaderGeometry(s);if(i&&this.isScrollCompacted){this.setSpacerHeight(this.expandedHeaderHeight-this.compactHeaderHeight);this.setStickyHeaderOffset(t)}if(e){this.cancelHeaderReveal();s.setAttribute("data-shell-page-syncing","")}if(s.variant!==t){s.variant=t;this.scheduleHeaderGeometrySync(s)}if(e){this.revealHeaderWhenSynced(s,t)}}observeHeader(e){this.cancelHeaderReveal();this.cancelHeaderGeometrySync();this.headerResizeObserver?.disconnect();this.headerResizeObserver=null;this.headerMutationObserver?.disconnect();this.headerMutationObserver=null;this.headerEl?.style.removeProperty("--ds-bar-title-divider-inset");this.headerEl=e;this.expandedHeaderHeight=0;this.expandedGeometryFrozen=false;this.setHeaderTravel(0);this.setSpacerHeight(0);this.stickyHeaderEl?.style.setProperty("--ds-shell-page-sticky-offset","0px");if(!e)return;if(e.classList.contains(this.variantClass("expanded"))){this.captureExpandedHeaderGeometry(e)}if(typeof ResizeObserver!=="undefined"){this.headerResizeObserver=new ResizeObserver((()=>{this.syncRenderedHeaderGeometry(e)}));this.headerResizeObserver.observe(e)}if(typeof MutationObserver!=="undefined"){this.headerMutationObserver=new MutationObserver((()=>{this.syncRenderedHeaderGeometry(e)}));this.headerMutationObserver.observe(e,{attributes:true,attributeFilter:["class"],childList:true,subtree:true})}this.syncHeaderVariant(true);this.scheduleHeaderGeometrySync(e)}render(){const e=this.responsiveMode==="mobile";return t(i,{key:"0eeaca812d6d8b3ed3c6cbd210354e47e606cef7",role:"main",style:this.contentInsetStyles,class:{"shell-page-host--inset-default":this.contentInset==="default","shell-page-host--inset-none":this.contentInset==="none","shell-page-host--block-start-inset-none":this.contentInsetBlockStart==="none","shell-page-host--surface-primary":this.contentSurface==="primary","shell-page-host--surface-secondary":this.contentSurface==="secondary","shell-page-host--mobile":e,[`shell-page-host--header-${this.effectiveVariant}`]:true}},t("div",{key:"8e10510185c7f692bc6cd731929acaec701801db",ref:e=>{this.sentinelEl=e??null},class:"shell-page__scroll-sentinel","aria-hidden":"true"}),t("div",{key:"793366d5ad58c3bdd3f72f82b18f709257832edb",ref:e=>{this.stickyHeaderEl=e??null},class:"shell-page__sticky-header"},t("div",{key:"4082e753c87081ce76a01edb2b0666add2cca031",class:"shell-page__desktop-header",hidden:e,"aria-hidden":e?"true":undefined,inert:e?true:undefined},t("slot",{key:"d86a1b50d62a6fdaa98fd389b50132203966e674",name:"header",onSlotchange:this.handleHeaderSlotChange})),t("div",{key:"93c3b0ad277e0884b1ab2af83816cd5c74f06d51",class:"shell-page__mobile-header",hidden:!e,"aria-hidden":!e?"true":undefined,inert:!e?true:undefined},t("slot",{key:"ad0523b7ad45b940208cd83b439dd31094bbe091",name:"mobile-header"}))),t("div",{key:"380d3eadc507c78d7c6292d7d9927fafda0aacf5",ref:e=>{this.spacerEl=e??null},class:"shell-page__flow-spacer","aria-hidden":"true"}),t("div",{key:"f0d5f4f2614f4d80b3e193d2c2c4710a93ab456f",class:"shell-page__content"},t("slot",{key:"6f1d5d9125935ca7c58fc38a7dd37f1828cf2e2e"})))}get el(){return this}static get watchers(){return{headerCapacity:[{handleHeaderContractChange:0}],headerPresentation:[{handleHeaderContractChange:0}],scrollCompaction:[{handleHeaderContractChange:0}],responsiveMode:[{handleResponsiveModeChange:0}]}}static get style(){return h()}},[262,"ds-shell-page",{headerPresentation:[1,"header-presentation"],headerCapacity:[1,"header-capacity"],contentInset:[1,"content-inset"],contentInsetBlockStart:[1,"content-inset-block-start"],contentInsetBlockStartSize:[1,"content-inset-block-start-size"],compactContentInsetBlockStartSize:[1,"compact-content-inset-block-start-size"],scrollCompaction:[4,"scroll-compaction"],contentSurface:[1,"content-surface"],responsiveMode:[513,"responsive-mode"],pageTopVisible:[32]},undefined,{headerCapacity:[{handleHeaderContractChange:0}],headerPresentation:[{handleHeaderContractChange:0}],scrollCompaction:[{handleHeaderContractChange:0}],responsiveMode:[{handleResponsiveModeChange:0}]}]);r.MAX_HEADER_REVEAL_FRAMES=12;r.MAX_HEADER_GEOMETRY_FRAMES=12;function o(){if(typeof customElements==="undefined"){return}const e=["ds-shell-page"];e.forEach((e=>{switch(e){case"ds-shell-page":if(!customElements.get(a(e))){customElements.define(a(e),r)}break}}))}o();export{r as S,o as d};
|
|
2
|
-
//# sourceMappingURL=p-Cae9PFPE.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["resolveShellPageHeaderVariant","presentation","capacity","pageTopVisible","shellPageCss","ShellPage","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","headerPresentation","contentInset","contentInsetBlockStart","scrollCompaction","contentSurface","responsiveMode","sentinelEl","spacerEl","stickyHeaderEl","headerEl","expandedHeaderHeight","headerTravel","expandedGeometryFrozen","headerResizeObserver","headerMutationObserver","headerRevealFrame","headerGeometryFrame","reconnectFrame","scrollRoot","hasLoaded","handleScroll","rootTop","window","getBoundingClientRect","top","syncHeaderDividerInset","nextPageTopVisible","classList","contains","variantClass","captureExpandedHeaderGeometry","el","handleHeaderSlotChange","event","slot","target","header","assignedElements","find","element","tagName","toLowerCase","observeHeader","handleHeaderContractChange","syncHeaderVariant","handleResponsiveModeChange","findHeader","componentDidLoad","connectRuntime","componentDidRender","connectedCallback","cancelAnimationFrame","requestAnimationFrame","isConnected","disconnectedCallback","disconnect","cancelHeaderReveal","cancelHeaderGeometrySync","style","removeProperty","removeEventListener","connectScrollRoot","effectiveVariant","headerCapacity","headerContractResolved","undefined","isScrollCompacted","contentInsetStyles","styles","expanded","contentInsetBlockStartSize","trim","compact","compactContentInsetBlockStartSize","composedParent","assignedSlot","parentElement","findScrollRoot","ancestor","document","documentElement","overflow","getComputedStyle","overflowY","next","addEventListener","passive","scrollRootResolved","shell","closest","expected","querySelector","compactHeaderHeight","resolveCssLengthPx","ownsScrollTransition","expandedInset","scrollRootTop","remainingTravel","progress","Math","min","max","setProperty","setHeaderTravel","distance","abs","measureHeaderTravel","anchor","compactHeight","headerRect","anchorRect","height","expandedAnchorTop","compactAnchorTop","setSpacerHeight","variant","setStickyHeaderOffset","renderedVariant","syncRenderedHeaderGeometry","renderedHeight","scheduleHeaderGeometrySync","framesRemaining","MAX_HEADER_GEOMETRY_FRAMES","framesElapsed","sync","geometryReady","removeAttribute","revealHeaderWhenSynced","MAX_HEADER_REVEAL_FRAMES","reveal","concealUntilSynced","setAttribute","renderedVariantIsStale","ResizeObserver","observe","MutationObserver","attributes","attributeFilter","childList","subtree","render","mobile","h","Host","key","role","class","ref","hidden","inert","name","onSlotchange"],"sources":["src/wc/components/ShellPage/shell-page-responsive.ts","src/wc/components/ShellPage/ShellPage.css?tag=ds-shell-page&encapsulation=scoped","src/wc/components/ShellPage/ShellPage.tsx"],"sourcesContent":["import type { ShellPageCapacity, ShellPageHeaderPresentation } from './shell-page-types';\nimport type { BarTitleVariant } from '../BarTitle/bar-title-types';\n\nexport function resolveShellPageHeaderVariant(\n presentation: ShellPageHeaderPresentation,\n capacity: ShellPageCapacity,\n pageTopVisible: boolean\n): BarTitleVariant {\n if (presentation !== 'auto') return presentation;\n if (capacity === 'constrained') return 'constrained';\n if (capacity === 'compact' || !pageTopVisible) return 'compact';\n return 'expanded';\n}\n",":host {\n --_shell-page-content-background: var(--color-background-primary);\n --_shell-page-header-background: var(--color-background-primary);\n --_shell-page-responsive-content-block-start-inset: var(--dimension-space-400);\n --_shell-page-content-block-start-inset: var(\n --ds-shell-page-content-block-start-inset,\n var(--_shell-page-responsive-content-block-start-inset)\n );\n --ds-shell-page-sticky-header-block-size: var(--dimension-size-600);\n --ds-shell-page-content-block-start-offset: calc(\n var(--ds-shell-page-sticky-header-block-size) +\n var(--_shell-page-content-block-start-inset)\n );\n display: block;\n position: relative;\n min-width: 0;\n min-height: 100%;\n box-sizing: border-box;\n background: var(--_shell-page-content-background);\n}\n\n:host(.shell-page-host--surface-secondary) {\n --_shell-page-content-background: var(--color-background-secondary);\n}\n\n:host(.shell-page-host--surface-secondary[responsive-mode='desktop']),\n:host(.shell-page-host--surface-secondary[responsive-mode='tablet']) {\n --_shell-page-header-background: var(--color-background-secondary);\n}\n\n:host([responsive-mode='tablet']),\n:host([responsive-mode='mobile']) {\n --_shell-page-responsive-content-block-start-inset: var(--dimension-space-200);\n}\n\n:host(.shell-page-host--header-compact),\n:host(.shell-page-host--header-constrained) {\n --_shell-page-content-block-start-inset: var(\n --ds-shell-page-compact-content-block-start-inset,\n var(--_shell-page-responsive-content-block-start-inset)\n );\n}\n\n:host(.shell-page-host--inset-none),\n:host(.shell-page-host--block-start-inset-none) {\n --_shell-page-content-block-start-inset: 0px;\n}\n\n.shell-page__scroll-sentinel {\n position: absolute;\n inset-block-start: var(--ds-shell-page-header-travel, 0);\n inset-inline-start: 0;\n width: var(--dimension-stroke-width-012);\n height: var(--dimension-stroke-width-012);\n pointer-events: none;\n}\n\n.shell-page__sticky-header {\n position: sticky;\n inset-block-start: var(--ds-shell-page-sticky-offset, 0);\n z-index: var(--dimension-z-index-raised);\n min-width: 0;\n background: var(--_shell-page-header-background);\n overflow: visible;\n overflow-anchor: none;\n}\n\n.shell-page__desktop-header ::slotted(ds-bar-title),\n.shell-page__desktop-header ::slotted(ds-bar-workflow),\n.shell-page__mobile-header ::slotted(ds-mobile-header) {\n display: block;\n min-width: 0;\n}\n\n.shell-page__desktop-header[hidden],\n.shell-page__mobile-header[hidden] {\n display: none;\n}\n\n:host(.shell-page-host--mobile) .shell-page__scroll-sentinel,\n:host(.shell-page-host--mobile) .shell-page__flow-spacer {\n display: none;\n}\n\n.shell-page__flow-spacer {\n height: var(--ds-shell-page-flow-spacer, 0);\n background: var(--_shell-page-content-background);\n}\n\n.shell-page__content {\n min-width: 0;\n box-sizing: border-box;\n background: var(--_shell-page-content-background);\n}\n\n:host(.shell-page-host--inset-default) .shell-page__content {\n padding: var(--dimension-space-400);\n padding-block-start: var(--_shell-page-content-block-start-inset);\n}\n\n:host(.shell-page-host--inset-default[responsive-mode='tablet']) .shell-page__content,\n:host(.shell-page-host--inset-default[responsive-mode='mobile']) .shell-page__content {\n padding: var(--dimension-space-200);\n padding-block-start: var(--_shell-page-content-block-start-inset);\n}\n\n:host(.shell-page-host--inset-none) .shell-page__content {\n padding: 0;\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { ShellResponsiveMode } from '../../shell/shell-responsive';\nimport { resolveCssLengthPx } from '../../utils/resolve-css-length-px';\nimport type { BarTitleVariant } from '../BarTitle/bar-title-types';\nimport { resolveShellPageHeaderVariant } from './shell-page-responsive';\nimport type {\n ShellPageCapacity,\n ShellPageContentInset,\n ShellPageContentSurface,\n ShellPageHeaderPresentation,\n} from './shell-page-types';\n\ntype BarTitleElement = HTMLElement & { variant: BarTitleVariant };\n\n@Component({\n tag: 'ds-shell-page',\n styleUrl: 'ShellPage.css',\n scoped: true,\n})\nexport class ShellPage {\n private static readonly MAX_HEADER_REVEAL_FRAMES = 12;\n private static readonly MAX_HEADER_GEOMETRY_FRAMES = 12;\n\n @Element() el!: HTMLElement;\n\n /** Automatic capacity/scroll behavior, or an explicit header variant override. */\n @Prop() headerPresentation: ShellPageHeaderPresentation = 'auto';\n\n /** Available page-header capacity supplied by the owning application shell. */\n @Prop() headerCapacity?: ShellPageCapacity;\n\n /** Standard page gutters, or no inset for full-bleed page content. */\n @Prop() contentInset: ShellPageContentInset = 'default';\n\n /** Preserve the responsive side/end gutters while allowing content to meet the header. */\n @Prop() contentInsetBlockStart: ShellPageContentInset = 'default';\n\n /** Exact block-start content inset, overriding the responsive default when provided. */\n @Prop() contentInsetBlockStartSize?: string;\n\n /** Exact block-start content inset while the header is compact or constrained. */\n @Prop() compactContentInsetBlockStartSize?: string;\n\n /** Allow roomy automatic headers to compact as the page scrolls. */\n @Prop() scrollCompaction: boolean = true;\n\n /** Canvas surface painted around and beneath routed page content. */\n @Prop() contentSurface: ShellPageContentSurface = 'primary';\n\n /** Explicit shell breakpoint presentation. Mobile uses the dedicated mobile-header slot. */\n @Prop({ attribute: 'responsive-mode', reflect: true })\n responsiveMode: ShellResponsiveMode = 'desktop';\n\n @State() private pageTopVisible = true;\n\n private sentinelEl: HTMLElement | null = null;\n private spacerEl: HTMLElement | null = null;\n private stickyHeaderEl: HTMLElement | null = null;\n private headerEl: BarTitleElement | null = null;\n private expandedHeaderHeight = 0;\n private headerTravel = 0;\n private expandedGeometryFrozen = false;\n private headerResizeObserver: ResizeObserver | null = null;\n private headerMutationObserver: MutationObserver | null = null;\n private headerRevealFrame: number | null = null;\n private headerGeometryFrame: number | null = null;\n private reconnectFrame: number | null = null;\n private scrollRoot: HTMLElement | Window | null = null;\n private hasLoaded = false;\n\n @Watch('headerCapacity')\n @Watch('headerPresentation')\n @Watch('scrollCompaction')\n handleHeaderContractChange() {\n this.syncHeaderVariant(true);\n }\n\n @Watch('responsiveMode')\n handleResponsiveModeChange() {\n this.observeHeader(this.responsiveMode === 'mobile' ? null : this.findHeader());\n }\n\n componentDidLoad() {\n this.hasLoaded = true;\n this.connectRuntime();\n }\n\n componentDidRender() {\n this.syncHeaderVariant();\n }\n\n connectedCallback() {\n if (!this.hasLoaded) return;\n if (this.reconnectFrame !== null) cancelAnimationFrame(this.reconnectFrame);\n this.reconnectFrame = requestAnimationFrame(() => {\n this.reconnectFrame = null;\n if (this.el.isConnected) this.connectRuntime();\n });\n }\n\n disconnectedCallback() {\n if (this.reconnectFrame !== null) cancelAnimationFrame(this.reconnectFrame);\n this.reconnectFrame = null;\n this.headerResizeObserver?.disconnect();\n this.headerResizeObserver = null;\n this.headerMutationObserver?.disconnect();\n this.headerMutationObserver = null;\n this.cancelHeaderReveal();\n this.cancelHeaderGeometrySync();\n this.headerEl?.style.removeProperty('--ds-bar-title-divider-inset');\n this.scrollRoot?.removeEventListener('scroll', this.handleScroll);\n this.scrollRoot = null;\n }\n\n private connectRuntime() {\n this.observeHeader(this.responsiveMode === 'mobile' ? null : this.findHeader());\n this.connectScrollRoot();\n }\n\n private get effectiveVariant(): BarTitleVariant {\n return resolveShellPageHeaderVariant(\n this.headerPresentation,\n this.headerCapacity ?? 'roomy',\n this.scrollCompaction ? this.pageTopVisible : true\n );\n }\n\n private get headerContractResolved(): boolean {\n return this.headerPresentation !== 'auto' || this.headerCapacity !== undefined;\n }\n\n private get isScrollCompacted(): boolean {\n return (\n this.scrollCompaction &&\n this.headerPresentation === 'auto' &&\n this.headerCapacity === 'roomy' &&\n !this.pageTopVisible\n );\n }\n\n private get contentInsetStyles(): { [name: string]: string } {\n const styles: { [name: string]: string } = {};\n const expanded = this.contentInsetBlockStartSize?.trim();\n const compact = this.compactContentInsetBlockStartSize?.trim();\n if (expanded) styles['--ds-shell-page-content-block-start-inset'] = expanded;\n if (compact) styles['--ds-shell-page-compact-content-block-start-inset'] = compact;\n return styles;\n }\n\n private composedParent(element: Element): Element | null {\n return (element as HTMLElement).assignedSlot?.parentElement ?? element.parentElement;\n }\n\n private findScrollRoot(): HTMLElement | Window {\n let ancestor = this.composedParent(this.el);\n while (ancestor && ancestor !== document.documentElement) {\n const overflow = getComputedStyle(ancestor).overflowY;\n if (overflow === 'auto' || overflow === 'scroll' || overflow === 'overlay') {\n return ancestor as HTMLElement;\n }\n ancestor = this.composedParent(ancestor);\n }\n return window;\n }\n\n private connectScrollRoot() {\n const next = this.findScrollRoot();\n if (next === this.scrollRoot) return;\n this.scrollRoot?.removeEventListener('scroll', this.handleScroll);\n this.scrollRoot = next;\n this.scrollRoot.addEventListener('scroll', this.handleScroll, { passive: true });\n this.handleScroll();\n }\n\n private get scrollRootResolved(): boolean {\n const shell = this.el.closest('ds-shell-app');\n if (!shell) return true;\n const expected = shell.querySelector<HTMLElement>('.shell-app__content');\n return expected !== null && this.scrollRoot === expected;\n }\n\n private handleScroll = () => {\n if (!this.sentinelEl || !this.scrollRoot) return;\n const rootTop =\n this.scrollRoot === window ? 0 : (this.scrollRoot as HTMLElement).getBoundingClientRect().top;\n this.syncHeaderDividerInset(rootTop);\n const nextPageTopVisible = this.sentinelEl.getBoundingClientRect().top >= rootTop;\n if (\n this.scrollCompaction &&\n !nextPageTopVisible &&\n this.pageTopVisible &&\n this.headerEl?.classList.contains(this.variantClass('expanded'))\n ) {\n this.captureExpandedHeaderGeometry(this.headerEl);\n this.expandedGeometryFrozen = true;\n }\n if (\n nextPageTopVisible &&\n this.expandedGeometryFrozen &&\n this.el.getBoundingClientRect().top >= rootTop\n ) {\n this.expandedGeometryFrozen = false;\n if (this.headerEl?.classList.contains(this.variantClass('expanded'))) {\n this.captureExpandedHeaderGeometry(this.headerEl);\n }\n }\n this.pageTopVisible = nextPageTopVisible;\n };\n\n private findHeader(): BarTitleElement | null {\n return this.el.querySelector<BarTitleElement>('ds-bar-title');\n }\n\n private get compactHeaderHeight(): number {\n return resolveCssLengthPx('--dimension-size-600', 0);\n }\n\n private syncHeaderDividerInset(rootTop?: number) {\n const header = this.headerEl;\n if (!header) return;\n\n const ownsScrollTransition =\n this.scrollCompaction &&\n this.headerPresentation === 'auto' &&\n this.headerCapacity === 'roomy';\n const expandedInset = resolveCssLengthPx('--dimension-space-400', 0);\n if (\n !ownsScrollTransition ||\n !this.sentinelEl ||\n !this.scrollRoot ||\n this.headerTravel <= 0 ||\n expandedInset <= 0\n ) {\n header.style.removeProperty('--ds-bar-title-divider-inset');\n return;\n }\n\n const scrollRootTop =\n rootTop ??\n (this.scrollRoot === window\n ? 0\n : (this.scrollRoot as HTMLElement).getBoundingClientRect().top);\n const remainingTravel = this.sentinelEl.getBoundingClientRect().top - scrollRootTop;\n const progress = Math.min(1, Math.max(0, 1 - remainingTravel / this.headerTravel));\n header.style.setProperty('--ds-bar-title-divider-inset', `${expandedInset * (1 - progress)}px`);\n }\n\n private setHeaderTravel(distance: number) {\n const next = Math.max(0, distance);\n if (Math.abs(next - this.headerTravel) < 0.5) return;\n this.headerTravel = next;\n this.el.style.setProperty('--ds-shell-page-header-travel', `${next}px`);\n this.handleScroll();\n }\n\n private measureHeaderTravel(header: BarTitleElement) {\n const anchor = header.querySelector<HTMLElement>('[data-shell-page-header-anchor]');\n const compactHeight = this.compactHeaderHeight;\n if (!anchor || compactHeight <= 0) return;\n\n const headerRect = header.getBoundingClientRect();\n const anchorRect = anchor.getBoundingClientRect();\n if (headerRect.height <= 0 || anchorRect.height <= 0) return;\n\n const expandedAnchorTop = anchorRect.top - headerRect.top;\n const compactAnchorTop = Math.max(0, (compactHeight - anchorRect.height) / 2);\n this.setHeaderTravel(expandedAnchorTop - compactAnchorTop);\n }\n\n private captureExpandedHeaderGeometry(header: BarTitleElement) {\n // Keep the largest observed expanded geometry for this header instance.\n // During a variant handoff Chromium can briefly report the compact box\n // before the child host class mutation is delivered; that transient must\n // not erase the flow reservation captured at the roomy page top.\n this.expandedHeaderHeight = Math.max(\n this.expandedHeaderHeight,\n header.getBoundingClientRect().height\n );\n this.measureHeaderTravel(header);\n }\n\n private setSpacerHeight(height: number) {\n if (!this.spacerEl) return;\n this.spacerEl.style.setProperty('--ds-shell-page-flow-spacer', `${Math.max(0, height)}px`);\n }\n\n private variantClass(variant: BarTitleVariant): string {\n return `bar-title-host--${variant}`;\n }\n\n private setStickyHeaderOffset(renderedVariant: BarTitleVariant) {\n this.stickyHeaderEl?.style.setProperty(\n '--ds-shell-page-sticky-offset',\n renderedVariant === 'expanded' &&\n this.scrollCompaction &&\n this.headerPresentation === 'auto' &&\n this.headerCapacity === 'roomy'\n ? `${-this.headerTravel}px`\n : '0px'\n );\n }\n\n private syncRenderedHeaderGeometry(header: BarTitleElement) {\n const renderedVariant = this.effectiveVariant;\n if (!header.classList.contains(this.variantClass(renderedVariant))) return;\n\n const renderedHeight = header.getBoundingClientRect().height;\n if (renderedHeight > 0) {\n this.el.style.setProperty('--ds-shell-page-sticky-header-block-size', `${renderedHeight}px`);\n }\n\n // Update both flow-preservation pieces before reading layout. Otherwise a\n // reverse compact → expanded render can briefly contain the tall header and\n // the compact spacer together, giving browser scroll anchoring a transient\n // height change to compensate.\n this.setSpacerHeight(\n this.isScrollCompacted ? this.expandedHeaderHeight - this.compactHeaderHeight : 0\n );\n this.setStickyHeaderOffset(renderedVariant);\n\n if (renderedVariant === 'expanded' && !this.expandedGeometryFrozen) {\n this.captureExpandedHeaderGeometry(header);\n this.setStickyHeaderOffset(renderedVariant);\n }\n }\n\n private cancelHeaderGeometrySync() {\n if (this.headerGeometryFrame !== null) cancelAnimationFrame(this.headerGeometryFrame);\n this.headerGeometryFrame = null;\n }\n\n private scheduleHeaderGeometrySync(header: BarTitleElement) {\n this.cancelHeaderGeometrySync();\n let framesRemaining = ShellPage.MAX_HEADER_GEOMETRY_FRAMES;\n let framesElapsed = 0;\n const sync = () => {\n if (this.headerEl !== header) return;\n framesRemaining -= 1;\n framesElapsed += 1;\n // In WebKit a child's componentDidLoad can precede its assignment into\n // the parent's rendered slot. Revalidate after ShellApp has had a frame\n // to expose the actual content scroller.\n this.connectScrollRoot();\n this.syncRenderedHeaderGeometry(header);\n const geometryReady =\n this.effectiveVariant !== 'expanded' ||\n (this.expandedHeaderHeight > 0 && this.headerTravel > 0);\n if (\n (geometryReady && this.scrollRootResolved && framesElapsed >= 2) ||\n framesRemaining <= 0\n ) {\n this.headerGeometryFrame = null;\n return;\n }\n this.headerGeometryFrame = requestAnimationFrame(sync);\n };\n this.headerGeometryFrame = requestAnimationFrame(sync);\n }\n\n private cancelHeaderReveal() {\n if (this.headerRevealFrame !== null) cancelAnimationFrame(this.headerRevealFrame);\n this.headerRevealFrame = null;\n this.headerEl?.removeAttribute('data-shell-page-syncing');\n }\n\n private revealHeaderWhenSynced(header: BarTitleElement, variant: BarTitleVariant) {\n // Stencil normally re-renders within a frame or two of a prop change. Stop\n // polling at the cap, but fail closed: a stale variant must never paint.\n let framesRemaining = ShellPage.MAX_HEADER_REVEAL_FRAMES;\n const reveal = () => {\n if (this.headerEl !== header) {\n header.removeAttribute('data-shell-page-syncing');\n return;\n }\n framesRemaining -= 1;\n if (header.classList.contains(this.variantClass(variant))) {\n header.removeAttribute('data-shell-page-syncing');\n this.headerRevealFrame = null;\n return;\n }\n if (framesRemaining <= 0) {\n this.headerRevealFrame = null;\n return;\n }\n this.headerRevealFrame = requestAnimationFrame(reveal);\n };\n this.headerRevealFrame = requestAnimationFrame(reveal);\n }\n\n private syncHeaderVariant(concealUntilSynced = false) {\n const header = this.headerEl;\n if (!header) return;\n\n this.syncHeaderDividerInset();\n if (!this.headerContractResolved) {\n this.cancelHeaderReveal();\n header.setAttribute('data-shell-page-syncing', '');\n return;\n }\n\n const next = this.effectiveVariant;\n const renderedVariantIsStale = !header.classList.contains(this.variantClass(next));\n if (!renderedVariantIsStale) this.syncRenderedHeaderGeometry(header);\n if (renderedVariantIsStale && this.isScrollCompacted) {\n // Preserve the expanded flow before asking BarTitle to become compact.\n // This prevents the sentinel from moving back into view during the\n // parent/child render handoff and keeps the variant transition stable.\n this.setSpacerHeight(this.expandedHeaderHeight - this.compactHeaderHeight);\n this.setStickyHeaderOffset(next);\n }\n if (concealUntilSynced) {\n this.cancelHeaderReveal();\n header.setAttribute('data-shell-page-syncing', '');\n }\n if (header.variant !== next) {\n header.variant = next;\n // The child update and its MutationObserver callback can land in\n // different phases across engines. Poll the rendered class as the\n // authoritative handoff before committing sticky/spacer geometry.\n this.scheduleHeaderGeometrySync(header);\n }\n if (concealUntilSynced) {\n this.revealHeaderWhenSynced(header, next);\n }\n }\n\n private observeHeader(header: BarTitleElement | null) {\n this.cancelHeaderReveal();\n this.cancelHeaderGeometrySync();\n this.headerResizeObserver?.disconnect();\n this.headerResizeObserver = null;\n this.headerMutationObserver?.disconnect();\n this.headerMutationObserver = null;\n this.headerEl?.style.removeProperty('--ds-bar-title-divider-inset');\n this.headerEl = header;\n this.expandedHeaderHeight = 0;\n this.expandedGeometryFrozen = false;\n this.setHeaderTravel(0);\n this.setSpacerHeight(0);\n this.stickyHeaderEl?.style.setProperty('--ds-shell-page-sticky-offset', '0px');\n\n if (!header) return;\n if (header.classList.contains(this.variantClass('expanded'))) {\n this.captureExpandedHeaderGeometry(header);\n }\n if (typeof ResizeObserver !== 'undefined') {\n this.headerResizeObserver = new ResizeObserver(() => {\n this.syncRenderedHeaderGeometry(header);\n });\n this.headerResizeObserver.observe(header);\n }\n if (typeof MutationObserver !== 'undefined') {\n this.headerMutationObserver = new MutationObserver(() => {\n this.syncRenderedHeaderGeometry(header);\n });\n this.headerMutationObserver.observe(header, {\n attributes: true,\n attributeFilter: ['class'],\n childList: true,\n subtree: true,\n });\n }\n this.syncHeaderVariant(true);\n this.scheduleHeaderGeometrySync(header);\n }\n\n private handleHeaderSlotChange = (event: Event) => {\n if (this.responsiveMode === 'mobile') return;\n const slot = event.target as HTMLSlotElement;\n const header = slot\n .assignedElements()\n .find(element => element.tagName.toLowerCase() === 'ds-bar-title');\n this.observeHeader((header as BarTitleElement | undefined) ?? null);\n };\n\n render() {\n const mobile = this.responsiveMode === 'mobile';\n return (\n <Host\n role=\"main\"\n style={this.contentInsetStyles}\n class={{\n 'shell-page-host--inset-default': this.contentInset === 'default',\n 'shell-page-host--inset-none': this.contentInset === 'none',\n 'shell-page-host--block-start-inset-none': this.contentInsetBlockStart === 'none',\n 'shell-page-host--surface-primary': this.contentSurface === 'primary',\n 'shell-page-host--surface-secondary': this.contentSurface === 'secondary',\n 'shell-page-host--mobile': mobile,\n [`shell-page-host--header-${this.effectiveVariant}`]: true,\n }}\n >\n <div\n ref={el => {\n this.sentinelEl = el ?? null;\n }}\n class=\"shell-page__scroll-sentinel\"\n aria-hidden=\"true\"\n />\n <div\n ref={el => {\n this.stickyHeaderEl = el ?? null;\n }}\n class=\"shell-page__sticky-header\"\n >\n <div\n class=\"shell-page__desktop-header\"\n hidden={mobile}\n aria-hidden={mobile ? 'true' : undefined}\n inert={mobile ? true : undefined}\n >\n <slot name=\"header\" onSlotchange={this.handleHeaderSlotChange} />\n </div>\n <div\n class=\"shell-page__mobile-header\"\n hidden={!mobile}\n aria-hidden={!mobile ? 'true' : undefined}\n inert={!mobile ? true : undefined}\n >\n <slot name=\"mobile-header\" />\n </div>\n </div>\n <div\n ref={el => {\n this.spacerEl = el ?? null;\n }}\n class=\"shell-page__flow-spacer\"\n aria-hidden=\"true\"\n />\n <div class=\"shell-page__content\">\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{p as o,H as r,c as t,h as s,a as n,t as i}from"./index.js";import{g as e,i as a}from"./p-BQq26pt9.js";import{d}from"./p-D8nnhQNJ.js";import{d as c}from"./p-BFfLvMZd.js";import{d as l}from"./p-DZFilC--.js";import{C as u}from"./p-CuwopElg.js";const b=()=>`.ds-control--lg.sc-ds-tab-group,.ds-control--lg.sc-ds-tab-group-h,.ds-control--md.sc-ds-tab-group-h,.ds-control--md.sc-ds-tab-group,.ds-control--sm.sc-ds-tab-group-h,.ds-control--sm.sc-ds-tab-group,.ds-control--xs.sc-ds-tab-group-h,.ds-control--xs.sc-ds-tab-group{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-tab-group-h,.ds-control--lg.sc-ds-tab-group{--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-tab-group-h,.ds-control--md.sc-ds-tab-group{--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-tab-group-h,.ds-control--sm.sc-ds-tab-group{--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-tab-group-h,.ds-control--xs.sc-ds-tab-group{--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-tab-group-h,.ds-control--lg.ds-control--inset.sc-ds-tab-group{--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-tab-group-h,.ds-control--md.ds-control--inset.sc-ds-tab-group{--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-tab-group-h,.ds-control--sm.ds-control--inset.sc-ds-tab-group{--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-tab-group-h,.ds-control--xs.ds-control--inset.sc-ds-tab-group{--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-tab-group-h,.ds-control--lg.ds-control--inset-double.sc-ds-tab-group{--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-tab-group-h,.ds-control--md.ds-control--inset-double.sc-ds-tab-group{--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-tab-group-h,.ds-control--sm.ds-control--inset-double.sc-ds-tab-group{--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) )}@media (forced-colors: active){.sc-ds-tab-group:root,.sc-ds-tab-group-h,.ds-forced-colors-scope.sc-ds-tab-group{--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-tab-group-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-tab-group-h,.ds-focus-ring.sc-ds-tab-group,.ds-focus-ring-inset.sc-ds-tab-group-h,.ds-focus-ring-inset.sc-ds-tab-group{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-tab-group-h:focus-visible,.ds-focus-ring.sc-ds-tab-group: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-tab-group-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-tab-group{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-tab-group-h:focus-visible,.ds-focus-ring-inset.sc-ds-tab-group:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tab-group-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-tab-group: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-tab-group-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group::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-tab-group-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-tab-group:root,.sc-ds-tab-group-h,.ds-forced-colors-scope.sc-ds-tab-group{--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-tab-group-h,.ds-interaction-fill.sc-ds-tab-group{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-tab-group-h::before,.ds-interaction-fill.sc-ds-tab-group::before,.ds-interaction-fill.sc-ds-tab-group-h::after,.ds-interaction-fill.sc-ds-tab-group::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-tab-group-h::before,.ds-interaction-fill.sc-ds-tab-group::before{z-index:1}.ds-interaction-fill.sc-ds-tab-group-h::after,.ds-interaction-fill.sc-ds-tab-group::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-tab-group-h,.ds-interaction-fill--bordered.sc-ds-tab-group{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-tab-group-h::before,.ds-interaction-fill--selected.sc-ds-tab-group::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-tab-group-h,.ds-interaction-fill--selected.sc-ds-tab-group{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-tab-group-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-tab-group:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-tab-group-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-tab-group:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-tab-group-h::after,.ds-interaction-fill--grouped.sc-ds-tab-group::after,.ds-interaction-fill--grouped.sc-ds-tab-group-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-tab-group:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-tab-group-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-tab-group:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-tab-group-h,.ds-interaction-fill--grouped.sc-ds-tab-group{--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-tab-group-h>.ds-interaction-fill__content.sc-ds-tab-group,.ds-interaction-fill.sc-ds-tab-group>.ds-interaction-fill__content.sc-ds-tab-group,.ds-interaction-fill__content.sc-ds-tab-group{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-tab-group-h,.ds-interaction-fill--on-faint.sc-ds-tab-group{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-tab-group-h,.ds-interaction-fill--on-medium.sc-ds-tab-group{--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-tab-group-h,.ds-interaction-fill--on-bold.sc-ds-tab-group{--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-tab-group-h,.ds-interaction-fill--on-strong.sc-ds-tab-group{--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-tab-group-h,.ds-interaction-fill--on-translucent.sc-ds-tab-group{--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-tab-group-h,.ds-interaction-fill--on-inverted.sc-ds-tab-group{--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-tab-group-h,.ds-interaction-fill--on-media.sc-ds-tab-group{--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-tab-group-h,.ds-interaction-fill--on-always-dark.sc-ds-tab-group{--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-tab-group-h,.ds-interaction-fill--on-navigation.sc-ds-tab-group{--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-tab-group-h::after,.ds-interaction-fill.sc-ds-tab-group::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-tab-group-h::before,.ds-interaction-fill--selected.sc-ds-tab-group::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-tab-group-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-tab-group: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)}}@media (forced-colors: active){.sc-ds-tab-group:root,.sc-ds-tab-group-h,.ds-forced-colors-scope.sc-ds-tab-group{--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-tab-group-h,.ds-control-inactive.sc-ds-tab-group{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-tab-group-h,.ds-control-inactive.sc-ds-tab-group{color:var(--ds-forced-color-disabled);opacity:1}}.sc-ds-tab-group-h{display:block;--_tab-group-surface-border:var(--color-border-tertiary);--_tab-group-divider:var(--color-border-secondary)}.tab-group-host--on-medium.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-border-on-medium-background-tertiary);--_tab-group-divider:var(--color-border-on-medium-background-secondary)}.tab-group-host--on-bold.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-border-on-bold-background-tertiary);--_tab-group-divider:var(--color-border-on-bold-background-secondary)}.tab-group-host--on-strong.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-border-on-strong-background-tertiary);--_tab-group-divider:var(--color-border-on-strong-background-secondary)}.tab-group-host--on-translucent.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-translucent-border-tertiary);--_tab-group-divider:var(--color-translucent-border-secondary)}.tab-group-host--on-inverted.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-inverted-border-tertiary);--_tab-group-divider:var(--color-inverted-border-secondary)}.tab-group-host--on-media.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-media-border-tertiary);--_tab-group-divider:var(--color-media-border-secondary)}.tab-group-host--on-always-dark.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-always-dark-border-tertiary);--_tab-group-divider:var(--color-always-dark-border-secondary)}.tab-list.sc-ds-tab-group{display:flex;align-items:center;gap:var(--ds-control-gap);position:relative;width:max-content;max-width:100%;height:var(--ds-control-height);padding:calc(var(--dimension-space-025) - var(--dimension-stroke-width-012));background-color:var(--color-background-secondary);border:var(--dimension-stroke-width-012) solid var(--_tab-group-surface-border);border-radius:var(--dimension-radius-half);box-sizing:border-box}.tab-group-host--surface.sc-ds-tab-group-h .tab-list.sc-ds-tab-group{background-color:transparent}.tab.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;gap:var(--ds-control-gap);padding:0 var(--ds-control-padding-inline);background-color:transparent;border:none;border-radius:var(--dimension-radius-half);cursor:default;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--ds-control-height);min-width:var(--ds-control-height);box-sizing:border-box;--_dot:var(--color-foreground-bold-brand)}.tab--selected.sc-ds-tab-group{color:var(--color-foreground-primary);background-color:var(--color-background-primary);--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--_tab-group-surface-border)}.tab-group-host--surface.sc-ds-tab-group-h .tab--selected.sc-ds-tab-group{background-color:var(--ds-interaction-active)}.tab--selected.sc-ds-tab-group:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.tab__content.sc-ds-tab-group{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-control-gap);min-width:0}.tab__content--dot.sc-ds-tab-group{padding-right:var(--dimension-space-050)}.tab__label.sc-ds-tab-group{padding:0 var(--ds-control-label-inset);white-space:nowrap}.tab__icon.sc-ds-tab-group{flex-shrink:0}.tab__dot.sc-ds-tab-group{position:absolute;top:0;right:0;z-index:2;pointer-events:none}.on-medium.sc-ds-tab-group{color:var(--color-foreground-on-medium-background-secondary)}.on-medium.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-medium-background-primary)}.on-bold.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group{color:var(--color-foreground-on-strong-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-strong-background-primary)}.on-translucent.sc-ds-tab-group{color:var(--color-translucent-foreground-secondary)}.on-translucent.tab--selected.sc-ds-tab-group{color:var(--color-translucent-foreground-primary)}.on-inverted.sc-ds-tab-group{color:var(--color-inverted-foreground-secondary)}.on-inverted.tab--selected.sc-ds-tab-group{color:var(--color-inverted-foreground-primary)}.on-media.sc-ds-tab-group{color:var(--color-media-foreground-secondary)}.on-media.tab--selected.sc-ds-tab-group{color:var(--color-media-foreground-primary)}.on-always-dark.sc-ds-tab-group{color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group{color:var(--color-always-dark-foreground-primary)}.tab-divider.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-stroke-width-012);align-self:center;padding:0;flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group{width:var(--dimension-stroke-width-012);height:var(--typography-lineheight-sm);flex-shrink:0;background-color:var(--_tab-group-divider)}`;const g=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.value="";this.tabs=[];this.size="md";this.ariaLabel=null}get selectableTabs(){return e(this.tabs)}get focusableTabId(){return this.selectableTabs.some((o=>o.id===this.value&&!o.isInactive))?this.value:this.selectableTabs.find((o=>!o.isInactive))?.id??""}selectTab(o,r){this.value=o;this.dsChange.emit(o);if(r?.focus!==false){this.focusTab(o)}}focusTab(o){const r=this.el.querySelector(`[data-tab-id="${o}"]`);r?.focus({preventScroll:true})}onValueChange(o,r){if(r===undefined||o===r)return;requestAnimationFrame((()=>{const r=document.activeElement;if(!r||!this.el.contains(r))return;const t=r.getAttribute("data-tab-id");if(t===o)return;const s=this.selectableTabs.some((r=>r.id===o&&!r.isInactive))?o:this.focusableTabId;const n=this.el.querySelector(`[data-tab-id="${s}"]`);if(n){n.focus({preventScroll:true})}else{r.blur()}}))}findEnabled(o,r){const t=this.selectableTabs;const s=t.length;for(let n=0;n<s;n++){const i=(o+r*(n+1)+s*(n+1))%s;if(!t[i]?.isInactive)return i}return o}handleKeyDown(o){const r=this.selectableTabs;if(!r.length)return;const t=o.target?.closest("[data-tab-id]")?.dataset["tabId"];const s=r.findIndex((o=>o.id===(t??this.focusableTabId)));let n=null;if(o.key==="ArrowRight"){n=this.findEnabled(s,1)}else if(o.key==="ArrowLeft"){n=this.findEnabled(s,-1)}if(o.key==="Home"){const o=r.findIndex((o=>!o.isInactive));n=o===-1?null:o}else if(o.key==="End"){const o=[...r].reverse().findIndex((o=>!o.isInactive));n=o===-1?null:r.length-1-o}if(n!==null){o.preventDefault();const t=r[n];this.selectTab(t.id)}}getBgClass(){if(!this.background)return"";if(this.background==="always-dark")return"on-always-dark";return`on-${this.background}`}render(){const o=this.getBgClass();const r=this.focusableTabId;return s(n,{key:"f34713282ccc5b113f8fd45bd7dffd2aa13c5c19",class:{"tab-group-host":true,[`tab-group-host--${this.size}`]:true,[`ds-control--${this.size}`]:true,"tab-group-host--surface":!!o,[`tab-group-host--${o}`]:!!o}},s("div",{key:"30b8f5cdb2dc743870f1e5db09bde4bdb65fed46",role:"tablist",class:"tab-list","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby},this.tabs.map(((t,n)=>{if(a(t)){return s("div",{key:`divider-${n}`,class:"tab-divider","aria-hidden":"true"},s("div",{class:"tab-divider__line"}))}const i=t.id===this.value;const e=t.variant??"label";const d=e==="icon"||e==="icon-label";const c=e==="label"||e==="icon-label";const l=i&&!o;return s("button",{key:t.id,type:"button",role:"tab","data-tab-id":t.id,class:{tab:true,"tab--selected":i,[`ds-control--${this.size}`]:true,"ds-control--inset":true,"ds-focus-ring-inset":true,"ds-interaction-fill":!t.isInactive,"ds-interaction-fill--on-faint":o==="on-faint","ds-interaction-fill--on-medium":o==="on-medium","ds-interaction-fill--on-bold":o==="on-bold","ds-interaction-fill--on-strong":o==="on-strong","ds-interaction-fill--on-translucent":o==="on-translucent","ds-interaction-fill--on-inverted":o==="on-inverted","ds-interaction-fill--on-media":o==="on-media","ds-interaction-fill--on-always-dark":o==="on-always-dark","ds-control-inactive":!!t.isInactive,[o]:!!o},"aria-label":e==="icon"?t.label:undefined,"aria-selected":i,"aria-disabled":t.isInactive?"true":undefined,"aria-controls":t.panelId??undefined,disabled:t.isInactive,tabIndex:t.id===r?0:-1,onClick:()=>!t.isInactive&&this.selectTab(t.id)},s("span",{class:{tab__content:true,[`tab__content--${e}`]:true,"tab__content--dot":!!t.dot}},d&&s("ds-icon",{class:"tab__icon",name:t.icon,size:this.size,color:"inherit"}),c&&s("ds-text",{class:"tab__label",as:"span",variant:u[this.size],emphasis:l,color:"inherit"},t.label),t.dot&&s("ds-badge",{class:"tab__dot",variant:"dot",hasRing:false,label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return b()}},[2,"ds-tab-group",{value:[1025],tabs:[16],size:[1],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}]}]);function p(){if(typeof customElements==="undefined"){return}const o=["ds-tab-group","ds-badge","ds-icon","ds-text"];o.forEach((o=>{switch(o){case"ds-tab-group":if(!customElements.get(i(o))){customElements.define(i(o),g)}break;case"ds-badge":if(!customElements.get(i(o))){d()}break;case"ds-icon":if(!customElements.get(i(o))){c()}break;case"ds-text":if(!customElements.get(i(o))){l()}break}}))}p();export{g as T,p as d};
|
|
2
|
-
//# sourceMappingURL=p-Cih1XCy3.js.map
|