@ds-mo/ui 14.2.0 → 14.3.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.
Files changed (123) hide show
  1. package/dist/.package-ready.json +1 -1
  2. package/dist/agent-patterns.json +1 -1
  3. package/dist/agent.json +144 -19
  4. package/dist/angular/ds-pagination.d.ts +19 -0
  5. package/dist/angular/ds-pagination.js +42 -0
  6. package/dist/angular/ds-table.d.ts +4 -1
  7. package/dist/angular/ds-table.js +7 -4
  8. package/dist/angular/index.d.ts +1 -1
  9. package/dist/angular/index.js +1 -0
  10. package/dist/angular/proxies.d.ts +1 -0
  11. package/dist/angular/proxies.js +1 -0
  12. package/dist/components/ds-agent-questionnaire.js +1 -1
  13. package/dist/components/ds-agent-response.js +1 -1
  14. package/dist/components/ds-banner.js +1 -1
  15. package/dist/components/ds-bar-nav.js +1 -1
  16. package/dist/components/ds-bar-title.js +1 -1
  17. package/dist/components/ds-bar-workflow.js +1 -1
  18. package/dist/components/ds-bar-workflow.js.map +1 -1
  19. package/dist/components/ds-card-overview.js +1 -1
  20. package/dist/components/ds-checkbox.js +1 -1
  21. package/dist/components/ds-code-block.js +1 -1
  22. package/dist/components/ds-filter-menu.js +1 -1
  23. package/dist/components/ds-input.js +1 -1
  24. package/dist/components/ds-markdown.js +1 -1
  25. package/dist/components/ds-menu.js +1 -1
  26. package/dist/components/ds-message-actions.js +1 -1
  27. package/dist/components/ds-message-composer.js +1 -1
  28. package/dist/components/ds-message-scroller.js +1 -1
  29. package/dist/components/ds-mobile-header.js +1 -1
  30. package/dist/components/ds-mobile-section-switcher.js +1 -1
  31. package/dist/components/ds-mobile-sheet-nav.js +1 -1
  32. package/dist/components/ds-modal.js +1 -1
  33. package/dist/components/ds-pagination.d.ts +11 -0
  34. package/dist/components/ds-pagination.js +2 -0
  35. package/dist/components/ds-pagination.js.map +1 -0
  36. package/dist/components/ds-panel-nav.js +1 -1
  37. package/dist/components/ds-panel-tool-header.js +1 -1
  38. package/dist/components/ds-panel-tool-search.js +1 -1
  39. package/dist/components/ds-panel-tools.js +1 -1
  40. package/dist/components/ds-radio.js +1 -1
  41. package/dist/components/ds-select.js +1 -1
  42. package/dist/components/ds-select.js.map +1 -1
  43. package/dist/components/ds-shell-app.js +1 -1
  44. package/dist/components/ds-shell-page.js +1 -1
  45. package/dist/components/ds-shell-tools.js +1 -1
  46. package/dist/components/ds-slider.js +1 -1
  47. package/dist/components/ds-swatch-picker.js +1 -1
  48. package/dist/components/ds-switch.js +1 -1
  49. package/dist/components/ds-table.js +1 -1
  50. package/dist/components/ds-table.js.map +1 -1
  51. package/dist/components/ds-toast.js +1 -1
  52. package/dist/components/ds-tooltip.js +1 -1
  53. package/dist/components/ds-typing-indicator.js +1 -1
  54. package/dist/components/index.d.ts +7 -0
  55. package/dist/components/{p-D2xWcVv6.js → p-B8q-6a03.js} +2 -2
  56. package/dist/components/{p-DYzjeIAT.js → p-BHjw0x3L.js} +2 -2
  57. package/dist/components/{p-CTVMXN9s.js → p-BSBQ5kGe.js} +2 -2
  58. package/dist/components/{p-DmZupC1-.js → p-BiBXCjjo.js} +2 -2
  59. package/dist/components/{p-BOCrvs-v.js → p-Btxwp4lJ.js} +2 -2
  60. package/dist/components/{p-DmwMiaWL.js → p-Bxe6532y.js} +2 -2
  61. package/dist/components/{p-DD5OCVXx.js → p-C5TrNd31.js} +2 -2
  62. package/dist/components/{p-ChlRsQYY.js → p-C68-8tlp.js} +2 -2
  63. package/dist/components/{p-BnPcWBA8.js → p-CW3sRYuf.js} +2 -2
  64. package/dist/components/{p-DJ_FsLCc.js → p-CWsziQQY.js} +2 -2
  65. package/dist/components/{p-CRjpqqAI.js → p-Cjf54_Cq.js} +2 -2
  66. package/dist/components/{p-NTU5jrG_.js → p-CkWVI16a.js} +2 -2
  67. package/dist/components/{p-BDCrM8-1.js → p-Cpqd69kg.js} +2 -2
  68. package/dist/components/p-CtOK5oZ1.js +2 -0
  69. package/dist/components/p-CtOK5oZ1.js.map +1 -0
  70. package/dist/components/p-D1ZI_10t.js +2 -0
  71. package/dist/components/p-D1ZI_10t.js.map +1 -0
  72. package/dist/components/{p-C-GNvCk0.js → p-Dh_TVLnz.js} +2 -2
  73. package/dist/components/{p-BiOfbCke.js → p-DkPNCBA8.js} +2 -2
  74. package/dist/components/{p-DT4WdAup.js → p-Dkkid-rh.js} +2 -2
  75. package/dist/components/p-DwqUW4Rg.js +2 -0
  76. package/dist/components/p-DwqUW4Rg.js.map +1 -0
  77. package/dist/components/{p-eKARJmWs.js → p-nImbYpwo.js} +2 -2
  78. package/dist/components/{p-BMJcBo8B.js → p-ohWEVGHg.js} +2 -2
  79. package/dist/components/{p-c9QiNOc7.js → p-qA4eKZkW.js} +2 -2
  80. package/dist/docs/components.json +470 -34
  81. package/dist/mcp-data/registry/pagination.json +295 -0
  82. package/dist/mcp-data/registry/registry.json +146 -18
  83. package/dist/mcp-data/registry/table.json +69 -37
  84. package/dist/mcp-data/registry/tooltip.json +2 -1
  85. package/dist/react/components.d.ts +1 -0
  86. package/dist/react/components.js +1 -0
  87. package/dist/react/ds-pagination.d.ts +12 -0
  88. package/dist/react/ds-pagination.js +12 -0
  89. package/dist/react/ds-table.d.ts +2 -1
  90. package/dist/react/ds-table.js +1 -0
  91. package/dist/styles/table.css +9 -3
  92. package/dist/types/components/Pagination/Pagination.d.ts +28 -0
  93. package/dist/types/components/Pagination/index.d.ts +3 -0
  94. package/dist/types/components/Pagination/pagination-model.d.ts +13 -0
  95. package/dist/types/components/Pagination/pagination-types.d.ts +25 -0
  96. package/dist/types/components/Table/Table.d.ts +10 -3
  97. package/dist/types/components/Table/index.d.ts +1 -1
  98. package/dist/types/components/Table/table-render-model.d.ts +1 -1
  99. package/dist/types/components/Table/table-types.d.ts +5 -1
  100. package/dist/types/components/Tooltip/Tooltip.d.ts +3 -0
  101. package/dist/types/components.d.ts +148 -13
  102. package/package.json +1 -1
  103. package/dist/components/p-CtSxm6PI.js +0 -2
  104. package/dist/components/p-CtSxm6PI.js.map +0 -1
  105. /package/dist/components/{p-D2xWcVv6.js.map → p-B8q-6a03.js.map} +0 -0
  106. /package/dist/components/{p-DYzjeIAT.js.map → p-BHjw0x3L.js.map} +0 -0
  107. /package/dist/components/{p-CTVMXN9s.js.map → p-BSBQ5kGe.js.map} +0 -0
  108. /package/dist/components/{p-DmZupC1-.js.map → p-BiBXCjjo.js.map} +0 -0
  109. /package/dist/components/{p-BOCrvs-v.js.map → p-Btxwp4lJ.js.map} +0 -0
  110. /package/dist/components/{p-DmwMiaWL.js.map → p-Bxe6532y.js.map} +0 -0
  111. /package/dist/components/{p-DD5OCVXx.js.map → p-C5TrNd31.js.map} +0 -0
  112. /package/dist/components/{p-ChlRsQYY.js.map → p-C68-8tlp.js.map} +0 -0
  113. /package/dist/components/{p-BnPcWBA8.js.map → p-CW3sRYuf.js.map} +0 -0
  114. /package/dist/components/{p-DJ_FsLCc.js.map → p-CWsziQQY.js.map} +0 -0
  115. /package/dist/components/{p-CRjpqqAI.js.map → p-Cjf54_Cq.js.map} +0 -0
  116. /package/dist/components/{p-NTU5jrG_.js.map → p-CkWVI16a.js.map} +0 -0
  117. /package/dist/components/{p-BDCrM8-1.js.map → p-Cpqd69kg.js.map} +0 -0
  118. /package/dist/components/{p-C-GNvCk0.js.map → p-Dh_TVLnz.js.map} +0 -0
  119. /package/dist/components/{p-BiOfbCke.js.map → p-DkPNCBA8.js.map} +0 -0
  120. /package/dist/components/{p-DT4WdAup.js.map → p-Dkkid-rh.js.map} +0 -0
  121. /package/dist/components/{p-eKARJmWs.js.map → p-nImbYpwo.js.map} +0 -0
  122. /package/dist/components/{p-BMJcBo8B.js.map → p-ohWEVGHg.js.map} +0 -0
  123. /package/dist/components/{p-c9QiNOc7.js.map → p-qA4eKZkW.js.map} +0 -0
@@ -47,6 +47,7 @@ import { MobileHeaderHeadingLevel, MobileHeaderSectionsPresentation, MobileHeade
47
47
  import { TabGroupItem, TabItem } from "./components/TabGroup/tab-item-utils";
48
48
  import { TabGroupSize } from "./components/TabGroup/TabGroup";
49
49
  import { ModalCloseDetail, ModalWidth } from "./components/Modal/Modal";
50
+ import { PaginationChangeDetail } from "./components/Pagination/pagination-types";
50
51
  import { ChromeTransitionDetail } from "./shell/chrome-transition";
51
52
  import { PanelSubNavItem } from "./components/PanelSubNav/panel-sub-nav-types";
52
53
  import { PanelSubNavBackground } from "./components/PanelSubNav/PanelSubNav";
@@ -63,7 +64,7 @@ import { SliderOrientation, SliderSize, SliderThumbAlignment, SliderValue } from
63
64
  import { SwatchPickerOption, SwatchPickerSection } from "./components/SwatchPicker/swatch-picker-types";
64
65
  import { SwitchSize } from "./components/Switch/Switch";
65
66
  import { TabBackground, TabGroupSize as TabGroupSize1, TabGroupWidth } from "./components/TabGroup/TabGroup";
66
- import { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableGroup, TableGroupCollapseChangeDetail, TableGroupingState, TableGroupLoadMoreDetail, TableLoadMoreDetail, TableLoadMoreMode, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from "./components/Table/table-types";
67
+ import { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableDataMode, TableGroup, TableGroupCollapseChangeDetail, TableGroupingState, TableGroupLoadMoreDetail, TableLoadMoreDetail, TableLoadMoreMode, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from "./components/Table/table-types";
67
68
  import { TagContrast, TagIntent, TagSize } from "./components/Tag/Tag";
68
69
  import { ToastActionEventDetail, ToastCloseEventDetail, ToastEventDetail, ToastManager, ToastSwipeDirection } from "./toast";
69
70
  import { TooltipAlign, TooltipSide, TooltipSize } from "./components/Tooltip/Tooltip";
@@ -110,6 +111,7 @@ export { MobileHeaderHeadingLevel, MobileHeaderSectionsPresentation, MobileHeade
110
111
  export { TabGroupItem, TabItem } from "./components/TabGroup/tab-item-utils";
111
112
  export { TabGroupSize } from "./components/TabGroup/TabGroup";
112
113
  export { ModalCloseDetail, ModalWidth } from "./components/Modal/Modal";
114
+ export { PaginationChangeDetail } from "./components/Pagination/pagination-types";
113
115
  export { ChromeTransitionDetail } from "./shell/chrome-transition";
114
116
  export { PanelSubNavItem } from "./components/PanelSubNav/panel-sub-nav-types";
115
117
  export { PanelSubNavBackground } from "./components/PanelSubNav/PanelSubNav";
@@ -126,7 +128,7 @@ export { SliderOrientation, SliderSize, SliderThumbAlignment, SliderValue } from
126
128
  export { SwatchPickerOption, SwatchPickerSection } from "./components/SwatchPicker/swatch-picker-types";
127
129
  export { SwitchSize } from "./components/Switch/Switch";
128
130
  export { TabBackground, TabGroupSize as TabGroupSize1, TabGroupWidth } from "./components/TabGroup/TabGroup";
129
- export { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableGroup, TableGroupCollapseChangeDetail, TableGroupingState, TableGroupLoadMoreDetail, TableLoadMoreDetail, TableLoadMoreMode, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from "./components/Table/table-types";
131
+ export { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableDataMode, TableGroup, TableGroupCollapseChangeDetail, TableGroupingState, TableGroupLoadMoreDetail, TableLoadMoreDetail, TableLoadMoreMode, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from "./components/Table/table-types";
130
132
  export { TagContrast, TagIntent, TagSize } from "./components/Tag/Tag";
131
133
  export { ToastActionEventDetail, ToastCloseEventDetail, ToastEventDetail, ToastManager, ToastSwipeDirection } from "./toast";
132
134
  export { TooltipAlign, TooltipSide, TooltipSize } from "./components/Tooltip/Tooltip";
@@ -1805,6 +1807,48 @@ export namespace Components {
1805
1807
  */
1806
1808
  "open": boolean;
1807
1809
  }
1810
+ interface DsPagination {
1811
+ /**
1812
+ * Localized plural noun used by assistive range announcements.
1813
+ * @default 'items'
1814
+ */
1815
+ "itemLabel": string;
1816
+ /**
1817
+ * Accessible name for the pagination navigation region.
1818
+ * @default 'Pagination'
1819
+ */
1820
+ "label": string;
1821
+ /**
1822
+ * Prevent interaction while the owner replaces the current data page.
1823
+ * @default false
1824
+ */
1825
+ "loading": boolean;
1826
+ /**
1827
+ * Controlled zero-based page index.
1828
+ * @default 0
1829
+ */
1830
+ "pageIndex": number;
1831
+ /**
1832
+ * Controlled number of top-level items on a full page.
1833
+ * @default 25
1834
+ */
1835
+ "pageSize": number;
1836
+ /**
1837
+ * Visible page-size control label.
1838
+ * @default 'Items per page'
1839
+ */
1840
+ "pageSizeLabel": string;
1841
+ /**
1842
+ * Available page sizes. Assign arrays through JavaScript.
1843
+ * @default [25, 50, 100, 200]
1844
+ */
1845
+ "pageSizeOptions": number[];
1846
+ /**
1847
+ * Controlled total number of top-level items across every page.
1848
+ * @default 0
1849
+ */
1850
+ "totalItems": number;
1851
+ }
1808
1852
  interface DsPanelNav {
1809
1853
  /**
1810
1854
  * @default 'Account'
@@ -2787,6 +2831,11 @@ export namespace Components {
2787
2831
  * @default []
2788
2832
  */
2789
2833
  "columns": TableColumn[];
2834
+ /**
2835
+ * Top-level data-window strategy. Group member loading remains group-owned.
2836
+ * @default 'infinite'
2837
+ */
2838
+ "dataMode": TableDataMode;
2790
2839
  /**
2791
2840
  * Optional result summary footer. When both `displayedCount` and `totalCount` are finite numbers, the table shows “Displaying {displayed} of {total}”.
2792
2841
  */
@@ -2872,11 +2921,6 @@ export namespace Components {
2872
2921
  * Fixed height for the complete header, table frame, and footer composition.
2873
2922
  */
2874
2923
  "height": string | number | undefined;
2875
- /**
2876
- * Enable application-owned incremental loading without pagination.
2877
- * @default false
2878
- */
2879
- "lazyLoading": boolean;
2880
2924
  /**
2881
2925
  * Reset key for a new query/group/sort dataset.
2882
2926
  * @default 'default'
@@ -2913,6 +2957,11 @@ export namespace Components {
2913
2957
  * Maximum scroll-region height. Numbers resolve to CSS pixels.
2914
2958
  */
2915
2959
  "maxHeight": string | number | undefined;
2960
+ /**
2961
+ * Controlled top-level pagination state. Required when dataMode is pagination.
2962
+ * @default null
2963
+ */
2964
+ "pagination": TablePaginationState | null;
2916
2965
  /**
2917
2966
  * Supports {displayed} and {total} placeholders.
2918
2967
  * @default 'Displaying {displayed} of {total}'
@@ -3331,6 +3380,10 @@ export interface DsModalCustomEvent<T> extends CustomEvent<T> {
3331
3380
  detail: T;
3332
3381
  target: HTMLDsModalElement;
3333
3382
  }
3383
+ export interface DsPaginationCustomEvent<T> extends CustomEvent<T> {
3384
+ detail: T;
3385
+ target: HTMLDsPaginationElement;
3386
+ }
3334
3387
  export interface DsPanelNavCustomEvent<T> extends CustomEvent<T> {
3335
3388
  detail: T;
3336
3389
  target: HTMLDsPanelNavElement;
@@ -4048,6 +4101,23 @@ declare global {
4048
4101
  prototype: HTMLDsModalElement;
4049
4102
  new (): HTMLDsModalElement;
4050
4103
  };
4104
+ interface HTMLDsPaginationElementEventMap {
4105
+ "dsChange": PaginationChangeDetail;
4106
+ }
4107
+ interface HTMLDsPaginationElement extends Components.DsPagination, HTMLStencilElement {
4108
+ addEventListener<K extends keyof HTMLDsPaginationElementEventMap>(type: K, listener: (this: HTMLDsPaginationElement, ev: DsPaginationCustomEvent<HTMLDsPaginationElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
4109
+ addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
4110
+ addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
4111
+ addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
4112
+ removeEventListener<K extends keyof HTMLDsPaginationElementEventMap>(type: K, listener: (this: HTMLDsPaginationElement, ev: DsPaginationCustomEvent<HTMLDsPaginationElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
4113
+ removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
4114
+ removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
4115
+ removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
4116
+ }
4117
+ var HTMLDsPaginationElement: {
4118
+ prototype: HTMLDsPaginationElement;
4119
+ new (): HTMLDsPaginationElement;
4120
+ };
4051
4121
  interface HTMLDsPanelNavElementEventMap {
4052
4122
  "dsNavSelect": string;
4053
4123
  "dsNavToggle": boolean;
@@ -4359,6 +4429,7 @@ declare global {
4359
4429
  "dsSelectionChange": TableSelectionChangeDetail;
4360
4430
  "dsLoadMore": TableLoadMoreDetail;
4361
4431
  "dsGroupLoadMore": TableGroupLoadMoreDetail;
4432
+ "dsPaginationChange": PaginationChangeDetail;
4362
4433
  "dsCellAction": TableCellActionDetail;
4363
4434
  "dsRowActivate": TableRowActivateDetail;
4364
4435
  }
@@ -4503,6 +4574,7 @@ declare global {
4503
4574
  "ds-mobile-section-switcher": HTMLDsMobileSectionSwitcherElement;
4504
4575
  "ds-mobile-sheet-nav": HTMLDsMobileSheetNavElement;
4505
4576
  "ds-modal": HTMLDsModalElement;
4577
+ "ds-pagination": HTMLDsPaginationElement;
4506
4578
  "ds-panel-nav": HTMLDsPanelNavElement;
4507
4579
  "ds-panel-sub-nav": HTMLDsPanelSubNavElement;
4508
4580
  "ds-panel-tool-header": HTMLDsPanelToolHeaderElement;
@@ -6354,6 +6426,52 @@ declare namespace LocalJSX {
6354
6426
  */
6355
6427
  "open"?: boolean;
6356
6428
  }
6429
+ interface DsPagination {
6430
+ /**
6431
+ * Localized plural noun used by assistive range announcements.
6432
+ * @default 'items'
6433
+ */
6434
+ "itemLabel"?: string;
6435
+ /**
6436
+ * Accessible name for the pagination navigation region.
6437
+ * @default 'Pagination'
6438
+ */
6439
+ "label"?: string;
6440
+ /**
6441
+ * Prevent interaction while the owner replaces the current data page.
6442
+ * @default false
6443
+ */
6444
+ "loading"?: boolean;
6445
+ /**
6446
+ * Emits the complete next controlled state after a page or page-size request.
6447
+ */
6448
+ "onDsChange"?: (event: DsPaginationCustomEvent<PaginationChangeDetail>) => void;
6449
+ /**
6450
+ * Controlled zero-based page index.
6451
+ * @default 0
6452
+ */
6453
+ "pageIndex"?: number;
6454
+ /**
6455
+ * Controlled number of top-level items on a full page.
6456
+ * @default 25
6457
+ */
6458
+ "pageSize"?: number;
6459
+ /**
6460
+ * Visible page-size control label.
6461
+ * @default 'Items per page'
6462
+ */
6463
+ "pageSizeLabel"?: string;
6464
+ /**
6465
+ * Available page sizes. Assign arrays through JavaScript.
6466
+ * @default [25, 50, 100, 200]
6467
+ */
6468
+ "pageSizeOptions"?: number[];
6469
+ /**
6470
+ * Controlled total number of top-level items across every page.
6471
+ * @default 0
6472
+ */
6473
+ "totalItems"?: number;
6474
+ }
6357
6475
  interface DsPanelNav {
6358
6476
  /**
6359
6477
  * @default 'Account'
@@ -7447,6 +7565,11 @@ declare namespace LocalJSX {
7447
7565
  * @default []
7448
7566
  */
7449
7567
  "columns"?: TableColumn[];
7568
+ /**
7569
+ * Top-level data-window strategy. Group member loading remains group-owned.
7570
+ * @default 'infinite'
7571
+ */
7572
+ "dataMode"?: TableDataMode;
7450
7573
  /**
7451
7574
  * Optional result summary footer. When both `displayedCount` and `totalCount` are finite numbers, the table shows “Displaying {displayed} of {total}”.
7452
7575
  */
@@ -7532,11 +7655,6 @@ declare namespace LocalJSX {
7532
7655
  * Fixed height for the complete header, table frame, and footer composition.
7533
7656
  */
7534
7657
  "height"?: string | number | undefined;
7535
- /**
7536
- * Enable application-owned incremental loading without pagination.
7537
- * @default false
7538
- */
7539
- "lazyLoading"?: boolean;
7540
7658
  /**
7541
7659
  * Reset key for a new query/group/sort dataset.
7542
7660
  * @default 'default'
@@ -7577,9 +7695,15 @@ declare namespace LocalJSX {
7577
7695
  "onDsGroupCollapseChange"?: (event: DsTableCustomEvent<TableGroupCollapseChangeDetail>) => void;
7578
7696
  "onDsGroupLoadMore"?: (event: DsTableCustomEvent<TableGroupLoadMoreDetail>) => void;
7579
7697
  "onDsLoadMore"?: (event: DsTableCustomEvent<TableLoadMoreDetail>) => void;
7698
+ "onDsPaginationChange"?: (event: DsTableCustomEvent<PaginationChangeDetail>) => void;
7580
7699
  "onDsRowActivate"?: (event: DsTableCustomEvent<TableRowActivateDetail>) => void;
7581
7700
  "onDsSelectionChange"?: (event: DsTableCustomEvent<TableSelectionChangeDetail>) => void;
7582
7701
  "onDsSortChange"?: (event: DsTableCustomEvent<TableSortChangeDetail>) => void;
7702
+ /**
7703
+ * Controlled top-level pagination state. Required when dataMode is pagination.
7704
+ * @default null
7705
+ */
7706
+ "pagination"?: TablePaginationState | null;
7583
7707
  /**
7584
7708
  * Supports {displayed} and {total} placeholders.
7585
7709
  * @default 'Displaying {displayed} of {total}'
@@ -8305,6 +8429,15 @@ declare namespace LocalJSX {
8305
8429
  "modalWidth": ModalWidth | string;
8306
8430
  "ariaDescribedby": string | undefined;
8307
8431
  }
8432
+ interface DsPaginationAttributes {
8433
+ "pageIndex": number;
8434
+ "pageSize": number;
8435
+ "totalItems": number;
8436
+ "itemLabel": string;
8437
+ "pageSizeLabel": string;
8438
+ "label": string;
8439
+ "loading": boolean;
8440
+ }
8308
8441
  interface DsPanelNavAttributes {
8309
8442
  "navStyle": NavChromeStyle;
8310
8443
  "disableViewTransition": boolean;
@@ -8535,7 +8668,7 @@ declare namespace LocalJSX {
8535
8668
  "errorHeading": string;
8536
8669
  "errorBody": string;
8537
8670
  "emptyCellLabel": string;
8538
- "lazyLoading": boolean;
8671
+ "dataMode": TableDataMode;
8539
8672
  "loadMoreMode": TableLoadMoreMode;
8540
8673
  "hasMore": boolean;
8541
8674
  "loadingMore": boolean;
@@ -8661,6 +8794,7 @@ declare namespace LocalJSX {
8661
8794
  "ds-mobile-section-switcher": Omit<DsMobileSectionSwitcher, keyof DsMobileSectionSwitcherAttributes> & { [K in keyof DsMobileSectionSwitcher & keyof DsMobileSectionSwitcherAttributes]?: DsMobileSectionSwitcher[K] } & { [K in keyof DsMobileSectionSwitcher & keyof DsMobileSectionSwitcherAttributes as `attr:${K}`]?: DsMobileSectionSwitcherAttributes[K] } & { [K in keyof DsMobileSectionSwitcher & keyof DsMobileSectionSwitcherAttributes as `prop:${K}`]?: DsMobileSectionSwitcher[K] };
8662
8795
  "ds-mobile-sheet-nav": Omit<DsMobileSheetNav, keyof DsMobileSheetNavAttributes> & { [K in keyof DsMobileSheetNav & keyof DsMobileSheetNavAttributes]?: DsMobileSheetNav[K] } & { [K in keyof DsMobileSheetNav & keyof DsMobileSheetNavAttributes as `attr:${K}`]?: DsMobileSheetNavAttributes[K] } & { [K in keyof DsMobileSheetNav & keyof DsMobileSheetNavAttributes as `prop:${K}`]?: DsMobileSheetNav[K] };
8663
8796
  "ds-modal": Omit<DsModal, keyof DsModalAttributes> & { [K in keyof DsModal & keyof DsModalAttributes]?: DsModal[K] } & { [K in keyof DsModal & keyof DsModalAttributes as `attr:${K}`]?: DsModalAttributes[K] } & { [K in keyof DsModal & keyof DsModalAttributes as `prop:${K}`]?: DsModal[K] } & OneOf<"heading", DsModal["heading"], DsModalAttributes["heading"]>;
8797
+ "ds-pagination": Omit<DsPagination, keyof DsPaginationAttributes> & { [K in keyof DsPagination & keyof DsPaginationAttributes]?: DsPagination[K] } & { [K in keyof DsPagination & keyof DsPaginationAttributes as `attr:${K}`]?: DsPaginationAttributes[K] } & { [K in keyof DsPagination & keyof DsPaginationAttributes as `prop:${K}`]?: DsPagination[K] };
8664
8798
  "ds-panel-nav": Omit<DsPanelNav, keyof DsPanelNavAttributes> & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes]?: DsPanelNav[K] } & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes as `attr:${K}`]?: DsPanelNavAttributes[K] } & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes as `prop:${K}`]?: DsPanelNav[K] };
8665
8799
  "ds-panel-sub-nav": Omit<DsPanelSubNav, keyof DsPanelSubNavAttributes> & { [K in keyof DsPanelSubNav & keyof DsPanelSubNavAttributes]?: DsPanelSubNav[K] } & { [K in keyof DsPanelSubNav & keyof DsPanelSubNavAttributes as `attr:${K}`]?: DsPanelSubNavAttributes[K] } & { [K in keyof DsPanelSubNav & keyof DsPanelSubNavAttributes as `prop:${K}`]?: DsPanelSubNav[K] };
8666
8800
  "ds-panel-tool-header": Omit<DsPanelToolHeader, keyof DsPanelToolHeaderAttributes> & { [K in keyof DsPanelToolHeader & keyof DsPanelToolHeaderAttributes]?: DsPanelToolHeader[K] } & { [K in keyof DsPanelToolHeader & keyof DsPanelToolHeaderAttributes as `attr:${K}`]?: DsPanelToolHeaderAttributes[K] } & { [K in keyof DsPanelToolHeader & keyof DsPanelToolHeaderAttributes as `prop:${K}`]?: DsPanelToolHeader[K] };
@@ -8752,6 +8886,7 @@ declare module "@stencil/core" {
8752
8886
  "ds-mobile-section-switcher": LocalJSX.IntrinsicElements["ds-mobile-section-switcher"] & JSXBase.HTMLAttributes<HTMLDsMobileSectionSwitcherElement>;
8753
8887
  "ds-mobile-sheet-nav": LocalJSX.IntrinsicElements["ds-mobile-sheet-nav"] & JSXBase.HTMLAttributes<HTMLDsMobileSheetNavElement>;
8754
8888
  "ds-modal": LocalJSX.IntrinsicElements["ds-modal"] & JSXBase.HTMLAttributes<HTMLDsModalElement>;
8889
+ "ds-pagination": LocalJSX.IntrinsicElements["ds-pagination"] & JSXBase.HTMLAttributes<HTMLDsPaginationElement>;
8755
8890
  "ds-panel-nav": LocalJSX.IntrinsicElements["ds-panel-nav"] & JSXBase.HTMLAttributes<HTMLDsPanelNavElement>;
8756
8891
  "ds-panel-sub-nav": LocalJSX.IntrinsicElements["ds-panel-sub-nav"] & JSXBase.HTMLAttributes<HTMLDsPanelSubNavElement>;
8757
8892
  "ds-panel-tool-header": LocalJSX.IntrinsicElements["ds-panel-tool-header"] & JSXBase.HTMLAttributes<HTMLDsPanelToolHeaderElement>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ds-mo/ui",
3
- "version": "14.2.0",
3
+ "version": "14.3.0",
4
4
  "description": "CompoMo — composable web components styled with TokoMo design tokens",
5
5
  "keywords": [
6
6
  "web-components",
@@ -1,2 +0,0 @@
1
- import{p as t,H as o,h as i,a as s,t as n}from"./index.js";import{A as e}from"./p-BBxcMVqk.js";import{d as r}from"./p-DZFilC--.js";import{b as d,T as c,r as l,a}from"./p-NdahPypA.js";import{r as h}from"./p-BMc0DE59.js";import{C as p}from"./p-CuwopElg.js";const m=new Set(["⌘","⇧","⌥","⌃"]);const u={alt:"⌥",cmd:"⌘",command:"⌘",control:"⌃",ctrl:"⌃",option:"⌥",shift:"⇧"};function f(t){return u[t.toLowerCase()]??t}function g(t){const o=t.trim();if(!o)return[];if(o.includes("+")){return o.split("+").map((t=>t.trim())).filter(Boolean).map(f)}if(/\s/.test(o)){return o.split(/\s+/).filter(Boolean).map(f)}const i=Array.from(o);const s=[];while(i.length>1&&m.has(i[0])){s.push(i.shift())}s.push(i.join(""));return s}const v=()=>`.ds-control--lg.sc-ds-tooltip,.ds-control--lg.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip,.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip,.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-tooltip-h,.ds-control--lg.sc-ds-tooltip{--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-tooltip-h,.ds-control--md.sc-ds-tooltip{--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-tooltip-h,.ds-control--sm.sc-ds-tooltip{--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-tooltip-h,.ds-control--xs.sc-ds-tooltip{--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.sc-ds-tooltip,.ds-control--lg.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip,.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip,.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-tooltip-h,.ds-control--lg.sc-ds-tooltip{--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-tooltip-h,.ds-control--md.sc-ds-tooltip{--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-tooltip-h,.ds-control--sm.sc-ds-tooltip{--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-tooltip-h,.ds-control--xs.sc-ds-tooltip{--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}.key-hint-group.sc-ds-tooltip{display:inline-flex;align-items:center;gap:var(--dimension-stroke-width-012);width:max-content;flex-shrink:0}.key-hint.sc-ds-tooltip{box-sizing:border-box;min-width:var(--ds-control-icon, var(--dimension-iconography-md));width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));padding-inline:0;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background-color:var(--color-background-secondary);border:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);border-bottom-width:var(--dimension-stroke-width-025);border-radius:var(--dimension-radius-025);color:var(--color-foreground-secondary)}.key-hint--wide.sc-ds-tooltip{width:calc(var(--ds-control-icon, var(--dimension-iconography-md)) * 1.5)}.key-hint__label.sc-ds-tooltip{display:inline-flex;width:max-content;min-width:max-content;font-family:var(--typography-font-family-ui);font-size:var(--typography-fontsize-xs);line-height:1;font-weight:var(--typography-weight-regular);letter-spacing:0;text-transform:uppercase;color:inherit}.ds-control--xs.sc-ds-tooltip .key-hint__label.sc-ds-tooltip{font-size:calc(var(--typography-fontsize-xs) * 0.78)}@media (forced-colors: active){.sc-ds-tooltip:root,.sc-ds-tooltip-h,.ds-forced-colors-scope.sc-ds-tooltip{--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}}.tooltip-popup.sc-ds-tooltip{box-sizing:border-box;background-color:var(--color-background-primary);border-radius:var(--ds-control-radius, var(--dimension-radius-025));box-shadow:var(--effect-elevation-elevated-floating);white-space:nowrap;pointer-events:none;animation:tooltipFadeIn var(--effect-motion-short-2) forwards;will-change:transform;backface-visibility:hidden}.tooltip-popup--instant.sc-ds-tooltip{animation:none;opacity:1}.tooltip-popup--closing.sc-ds-tooltip{animation:tooltipFadeOut var(--effect-motion-short-3) forwards}.tooltip-inner.sc-ds-tooltip{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075))}.tooltip-inner.sc-ds-tooltip>ds-text.sc-ds-tooltip{flex-shrink:0;min-width:max-content;max-width:none;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-primary)}@keyframes tooltipFadeIn{from{opacity:0}to{opacity:1}}@keyframes tooltipFadeOut{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.tooltip-popup.sc-ds-tooltip,.tooltip-popup--instant.sc-ds-tooltip{animation:none;opacity:1}.tooltip-popup--closing.sc-ds-tooltip{animation:none;opacity:0}}@media (forced-colors: active){.tooltip-popup.sc-ds-tooltip{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}}`;const y={md:c.size400,sm:c.size300,xs:c.size200};let b=0;let x=0;let w=null;function C(t){const o=document.createElement("ds-text");o.as="span";o.variant=t.variant;o.emphasis=t.emphasis??false;o.color=t.color??"inherit";if(t.wrap)o.wrap=t.wrap;o.textContent=t.text;return o}function k(t){t.style.flexShrink="0";t.style.minWidth="max-content";t.style.maxWidth="none";t.style.padding="0 var(--ds-control-label-inset, var(--dimension-space-025))";t.style.color="var(--color-foreground-primary)"}const P=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.size="md";this.side="top";this.align="center";this.sideOffset=d.space050;this.alignOffset=0;this.delay=c.animationDelayMedium3;this.shortcutKeyPosition="end";this.tooltipId=`ds-tooltip-${++x}`;this.delayTimer=null;this.closeTimer=null;this.anchor=null;this.popupEl=null;this.anchorObserver=null;this.position=new e({getAnchor:()=>this.anchor,getPopup:()=>this.popupEl,measure:(t,o)=>({anchorRect:t.getBoundingClientRect(),popupWidth:o.offsetWidth||this.tooltipFallbackWidthPx,popupHeight:o.offsetHeight||this.tooltipFallbackHeightPx,side:this.side,align:this.align,sideOffsetPx:this.sideOffsetPx,alignOffsetPx:this.alignOffsetPx,viewportPadPx:this.viewportPadPx,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight}),apply:({x:t,y:o,resolvedSide:i})=>{if(!this.popupEl)return;this.popupEl.dataset.side=i;this.popupEl.style.transform=`translate(${Math.round(t)}px, ${Math.round(o)}px)`},liveUpdate:"frame",observeResize:true});this.skipEnterAnimation=false;this.isOpen=false;this.lastInteractionWasKeyboard=false;this.pointerEnterHandler=t=>{if(t.pointerType==="touch")return;this.show()};this.pointerLeaveHandler=t=>{if(t.pointerType==="touch")return;this.hide()};this.pointerDownHandler=t=>{this.lastInteractionWasKeyboard=false;if(t.pointerType==="touch"&&(this.isOpen||this.popupEl))this.hideInstant()};this.keyDownHandler=()=>{this.lastInteractionWasKeyboard=true};this.focusHandler=()=>{if(this.lastInteractionWasKeyboard||this.anchor?.matches(":focus-visible"))this.show()};this.blurHandler=t=>{const o=t.relatedTarget;if(o&&this.anchor?.contains(o))return;this.hide()};this.escapeHandler=t=>{if(t.key!=="Escape"||!this.isOpen)return;t.preventDefault();this.hide()};this.handleSlotChange=()=>{const t=this.el.querySelector("slot");const o=t?.assignedElements?.()[0]??this.el.firstElementChild;if(o===this.anchor)return;if(this.isOpen||this.popupEl)this.hideInstant();this.unbindAnchor();this.bindAnchor()}}componentDidLoad(){this.bindAnchor();this.anchorObserver=new MutationObserver((()=>this.handleSlotChange()));this.anchorObserver.observe(this.el,{childList:true})}disconnectedCallback(){if(w===this)w=null;this.anchorObserver?.disconnect();this.anchorObserver=null;this.unbindAnchor();this.clearTimers();this.destroyPopup()}onContentOrPositionChange(){if(!this.label?.trim()){if(this.isOpen||this.popupEl)this.hideInstant();return}if(!this.popupEl||!this.isOpen)return;this.renderPopupContent();this.schedulePosition()}get viewportPadPx(){return h(c.space050,c.space050)}get sideOffsetPx(){return h(this.sideOffset,c.space050)}get alignOffsetPx(){return h(this.alignOffset,0)}get hoverDelayMs(){return l(this.delay,c.animationDelayMedium3)}get instantReopenMs(){return l(c.animationDurationMedium1,c.animationDurationMedium1)}get fadeOutMs(){return a(c.motionShort3,c.animationDurationShort3)}get tooltipFallbackWidthPx(){return h(c.tooltipFallbackWidth,c.tooltipFallbackWidth)}get tooltipFallbackHeightPx(){const t=y[this.size];return h(t,t)}bindAnchor(){const t=this.el.querySelector("slot");const o=t?.assignedElements?.()??[];const i=o[0]??this.el.firstElementChild;if(!i||i===this.anchor)return;this.anchor=i;i.addEventListener("pointerenter",this.pointerEnterHandler);i.addEventListener("pointerleave",this.pointerLeaveHandler);i.addEventListener("pointerdown",this.pointerDownHandler);i.addEventListener("keydown",this.keyDownHandler);i.addEventListener("focusin",this.focusHandler);i.addEventListener("focusout",this.blurHandler)}unbindAnchor(){if(!this.anchor)return;this.unlinkDescribedBy();this.anchor.removeEventListener("pointerenter",this.pointerEnterHandler);this.anchor.removeEventListener("pointerleave",this.pointerLeaveHandler);this.anchor.removeEventListener("pointerdown",this.pointerDownHandler);this.anchor.removeEventListener("keydown",this.keyDownHandler);this.anchor.removeEventListener("focusin",this.focusHandler);this.anchor.removeEventListener("focusout",this.blurHandler);this.anchor=null}linkDescribedBy(){if(!this.anchor||!this.popupEl)return;const t=new Set((this.anchor.getAttribute("aria-describedby")??"").split(/\s+/).filter(Boolean));t.add(this.tooltipId);this.anchor.setAttribute("aria-describedby",Array.from(t).join(" "))}unlinkDescribedBy(){if(!this.anchor)return;const t=(this.anchor.getAttribute("aria-describedby")??"").split(/\s+/).filter((t=>t&&t!==this.tooltipId));if(t.length)this.anchor.setAttribute("aria-describedby",t.join(" "));else this.anchor.removeAttribute("aria-describedby")}clearTimers(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}setupOpenListeners(){this.position.observe();document.addEventListener("keydown",this.escapeHandler)}teardownOpenListeners(){this.position.unobserve();document.removeEventListener("keydown",this.escapeHandler)}destroyPopup(){this.teardownOpenListeners();this.unlinkDescribedBy();if(!this.popupEl)return;this.popupEl.remove();this.popupEl=null}schedulePosition(){if(!this.popupEl)return;const t=()=>{const t=this.popupEl?.querySelector(":scope > .tooltip-inner > ds-text");if(t instanceof o)k(t)};requestAnimationFrame((()=>{t();this.position.update();requestAnimationFrame((()=>{t();this.position.update()}))}));this.position.observeResizeTargets()}hideInstant(){this.clearTimers();b=Date.now();if(w===this)w=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}show(){if(!this.label?.trim())return;this.clearTimers();let t=Date.now()-b<this.instantReopenMs;if(w&&w!==this){w.hideInstant();t=true}w=this;this.skipEnterAnimation=t;if(t){this.mountPopup();return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;if(!this.label?.trim())return;this.mountPopup()}),this.hoverDelayMs)}hide(){this.clearTimers();if(!this.popupEl&&!this.isOpen)return;b=Date.now();if(!this.popupEl){this.isOpen=false;return}this.popupEl.classList.remove("tooltip-popup--instant");this.popupEl.classList.add("tooltip-popup--closing");if(this.fadeOutMs===0){if(w===this)w=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false;return}this.closeTimer=setTimeout((()=>{this.closeTimer=null;if(w===this)w=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}),this.fadeOutMs)}mountPopup(){if(!this.popupEl){const t=document.createElement("div");t.id=this.tooltipId;t.setAttribute("role","tooltip");t.className="tooltip-popup ds-forced-colors-scope sc-ds-tooltip";Object.assign(t.style,{position:"fixed",left:"0",top:"0",zIndex:"var(--dimension-z-index-tooltip)",pointerEvents:"none"});document.body.appendChild(t);this.popupEl=t}this.setupOpenListeners();this.linkDescribedBy();this.popupEl.classList.toggle("tooltip-popup--instant",this.skipEnterAnimation);this.popupEl.classList.remove("tooltip-popup--closing");this.renderPopupContent();this.schedulePosition();this.isOpen=true}renderPopupContent(){if(!this.popupEl)return;const t=p[this.size];const o=this.size==="md"?"ds-control--md":this.size==="sm"?"ds-control--sm":"ds-control--xs";const i="sc-ds-tooltip";const s=document.createElement("div");s.className=`tooltip-inner ${o} ${i}`;const n=t=>{if(!this.shortcutKey||this.shortcutKeyPosition!==t)return;const o=document.createElement("span");o.className=`key-hint-group ${i}`;o.setAttribute("aria-hidden","true");for(const t of g(this.shortcutKey)){const s=document.createElement("span");const n=Array.from(t).length>1?" key-hint--wide":"";s.className=`key-hint${n} ${i}`;const e=document.createElement("span");e.className=`key-hint__label ${i}`;e.textContent=t;s.appendChild(e);o.appendChild(s)}s.appendChild(o)};n("start");const e=C({variant:t,wrap:"nowrap",text:this.label});k(e);s.appendChild(e);n("end");this.popupEl.replaceChildren(s)}render(){return i(s,{key:"4d194b2be5fcc29b3312ea1d916a9da4ce47c53a",style:{display:"contents"}},i("slot",{key:"2327c1085f3dd7c8732665f13986d7bb055b9ec8",onSlotchange:this.handleSlotChange}))}get el(){return this}static get watchers(){return{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}}static get style(){return v()}},[262,"ds-tooltip",{label:[1],size:[1],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],delay:[8],shortcutKey:[1,"shortcut-key"],shortcutKeyPosition:[1,"shortcut-key-position"]},undefined,{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}]);function O(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip","ds-text"];t.forEach((t=>{switch(t){case"ds-tooltip":if(!customElements.get(n(t))){customElements.define(n(t),P)}break;case"ds-text":if(!customElements.get(n(t))){r()}break}}))}O();export{P as T,O as d};
2
- //# sourceMappingURL=p-CtSxm6PI.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["MODIFIER_GLYPHS","Set","MODIFIER_LABELS","alt","cmd","command","control","ctrl","option","shift","canonicalKeyLabel","label","toLowerCase","shortcutKeyLabels","shortcut","normalized","trim","includes","split","map","part","filter","Boolean","test","characters","Array","from","labels","length","has","push","join","tooltipCss","FALLBACK_HEIGHT","md","TOKEN_DEFAULTS","size400","sm","size300","xs","size200","lastDismissedAt","tooltipIdCounter","activeTooltip","createDsText","opts","el","document","createElement","as","variant","emphasis","color","wrap","textContent","text","styleTooltipLabel","style","flexShrink","minWidth","maxWidth","padding","Tooltip","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","side","align","sideOffset","TOKEN_CSS_LENGTHS","space050","alignOffset","delay","animationDelayMedium3","shortcutKeyPosition","tooltipId","delayTimer","closeTimer","anchor","popupEl","anchorObserver","position","AnchoredPositionController","getAnchor","getPopup","measure","tip","anchorRect","getBoundingClientRect","popupWidth","offsetWidth","tooltipFallbackWidthPx","popupHeight","offsetHeight","tooltipFallbackHeightPx","sideOffsetPx","alignOffsetPx","viewportPadPx","viewportWidth","window","innerWidth","viewportHeight","innerHeight","apply","x","y","resolvedSide","dataset","transform","Math","round","liveUpdate","observeResize","skipEnterAnimation","isOpen","lastInteractionWasKeyboard","pointerEnterHandler","event","pointerType","show","pointerLeaveHandler","hide","pointerDownHandler","hideInstant","keyDownHandler","focusHandler","matches","blurHandler","e","next","relatedTarget","contains","escapeHandler","key","preventDefault","handleSlotChange","slot","querySelector","assignedElements","firstElementChild","unbindAnchor","bindAnchor","componentDidLoad","MutationObserver","observe","childList","disconnectedCallback","disconnect","clearTimers","destroyPopup","onContentOrPositionChange","renderPopupContent","schedulePosition","resolveCssLengthPx","hoverDelayMs","resolveCssTimeMs","instantReopenMs","animationDurationMedium1","fadeOutMs","resolveMotionTimeMs","motionShort3","animationDurationShort3","tooltipFallbackWidth","token","slotted","child","addEventListener","unlinkDescribedBy","removeEventListener","linkDescribedBy","ids","getAttribute","add","setAttribute","id","removeAttribute","clearTimeout","setupOpenListeners","teardownOpenListeners","unobserve","remove","reapplyLabelStyles","requestAnimationFrame","update","observeResizeTargets","Date","now","instant","mountPopup","setTimeout","classList","className","Object","assign","left","top","zIndex","pointerEvents","body","appendChild","toggle","textVariant","CONTROL_TEXT_VARIANT","density","sc","inner","appendShortcut","shortcutKey","group","hint","wide","replaceChildren","render","h","Host","display","onSlotchange"],"sources":["src/wc/utils/shortcut-key.ts","src/wc/components/Tooltip/Tooltip.css?tag=ds-tooltip&encapsulation=scoped","src/wc/components/Tooltip/Tooltip.tsx"],"sourcesContent":["const MODIFIER_GLYPHS = new Set(['⌘', '⇧', '⌥', '⌃']);\nconst MODIFIER_LABELS: Readonly<Record<string, string>> = {\n alt: '⌥',\n cmd: '⌘',\n command: '⌘',\n control: '⌃',\n ctrl: '⌃',\n option: '⌥',\n shift: '⇧',\n};\n\nfunction canonicalKeyLabel(label: string): string {\n return MODIFIER_LABELS[label.toLowerCase()] ?? label;\n}\n\n/** Split a shortcut chord into the labels rendered on individual keycaps. */\nexport function shortcutKeyLabels(shortcut: string): string[] {\n const normalized = shortcut.trim();\n if (!normalized) return [];\n\n if (normalized.includes('+')) {\n return normalized.split('+').map(part => part.trim()).filter(Boolean).map(canonicalKeyLabel);\n }\n\n if (/\\s/.test(normalized)) {\n return normalized.split(/\\s+/).filter(Boolean).map(canonicalKeyLabel);\n }\n\n const characters = Array.from(normalized);\n const labels: string[] = [];\n while (characters.length > 1 && MODIFIER_GLYPHS.has(characters[0])) {\n labels.push(characters.shift()!);\n }\n labels.push(characters.join(''));\n return labels;\n}\n","@import '../../utils/control-density.css';\n@import '../../utils/key-hint.css';\n@import '../../utils/forced-colors.css';\n\n.tooltip-popup {\n box-sizing: border-box;\n background-color: var(--color-background-primary);\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n box-shadow: var(--effect-elevation-elevated-floating);\n white-space: nowrap;\n pointer-events: none;\n animation: tooltipFadeIn var(--effect-motion-short-2) forwards;\n will-change: transform;\n backface-visibility: hidden;\n}\n\n/* Warm handoff between nearby triggers — no enter fade (avoids 20–100ms lag). */\n.tooltip-popup--instant {\n animation: none;\n opacity: 1;\n}\n\n.tooltip-popup--closing {\n animation: tooltipFadeOut var(--effect-motion-short-3) forwards;\n}\n\n/* Density: md / sm / xs via `.ds-control--*` on `.tooltip-inner`. */\n.tooltip-inner {\n box-sizing: border-box;\n height: var(--ds-control-height, var(--dimension-size-400));\n display: flex;\n align-items: center;\n gap: var(--ds-control-gap, var(--dimension-space-050));\n padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n}\n\n/*\n * Label layout lives on ds-text (metric-box + control label-inset).\n * NOTE: Stencil scopes this to `ds-text.sc-ds-tooltip`, but portaled\n * createElement ds-text loses that class when Text's <Host class> renders.\n * `renderPopupContent` therefore also sets these as inline styles.\n */\n.tooltip-inner > ds-text {\n flex-shrink: 0;\n min-width: max-content;\n max-width: none;\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n color: var(--color-foreground-primary);\n}\n\n@keyframes tooltipFadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes tooltipFadeOut {\n from { opacity: 1; }\n to { opacity: 0; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .tooltip-popup,\n .tooltip-popup--instant {\n animation: none;\n opacity: 1;\n }\n\n .tooltip-popup--closing {\n animation: none;\n opacity: 0;\n }\n}\n\n@media (forced-colors: active) {\n .tooltip-popup {\n box-shadow: none;\n outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n }\n}\n","import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';\nimport {\n CONTROL_TEXT_VARIANT,\n resolveCssLengthPx,\n resolveCssTimeMs,\n resolveMotionTimeMs,\n TOKEN_CSS_LENGTHS,\n TOKEN_DEFAULTS,\n} from '../../utils';\nimport type { TextVariant } from '../Text/text-types';\nimport { shortcutKeyLabels } from '../../utils/shortcut-key';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\n// Side-effect: register `ds-text` — the portal builds it via createElement, not JSX.\nimport '../Text/Text';\n\nexport type TooltipSide = 'top' | 'right' | 'bottom' | 'left';\nexport type TooltipAlign = 'start' | 'center' | 'end';\nexport type TooltipSize = 'md' | 'sm' | 'xs';\n\nconst FALLBACK_HEIGHT: Record<TooltipSize, string> = {\n md: TOKEN_DEFAULTS.size400,\n sm: TOKEN_DEFAULTS.size300,\n xs: TOKEN_DEFAULTS.size200,\n};\n\nlet lastDismissedAt = 0;\nlet tooltipIdCounter = 0;\n/** Currently open tooltip — force-cleared on warm handoff so tips don't cross-fade. */\nlet activeTooltip: Tooltip | null = null;\n\ntype DsTextEl = HTMLElement & {\n as: string;\n variant: TextVariant;\n emphasis: boolean;\n color: string;\n wrap: string;\n};\n\nfunction createDsText(opts: {\n variant: TextVariant;\n emphasis?: boolean;\n color?: string;\n wrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty';\n text: string;\n}): DsTextEl {\n const el = document.createElement('ds-text') as DsTextEl;\n el.as = 'span';\n el.variant = opts.variant;\n el.emphasis = opts.emphasis ?? false;\n el.color = opts.color ?? 'inherit';\n if (opts.wrap) el.wrap = opts.wrap;\n el.textContent = opts.text;\n return el;\n}\n\n/**\n * Control-density label styles for portaled ds-text.\n * Scoped CSS requires `sc-ds-tooltip` on the host, but Text's `<Host class>`\n * overwrites imperative className — so these must be inline to stick.\n */\nfunction styleTooltipLabel(el: HTMLElement) {\n el.style.flexShrink = '0';\n el.style.minWidth = 'max-content';\n el.style.maxWidth = 'none';\n el.style.padding = '0 var(--ds-control-label-inset, var(--dimension-space-025))';\n el.style.color = 'var(--color-foreground-primary)';\n}\n\n/**\n * Imperative body portal for the popup.\n * Stencil must not own the portaled node — moving a VDOM child to `document.body`\n * causes recreate → re-portal → @State loops that freeze the page.\n */\n@Component({\n tag: 'ds-tooltip',\n styleUrl: 'Tooltip.css',\n scoped: true,\n})\nexport class Tooltip {\n @Element() el!: HTMLElement;\n\n /**\n * Tooltip text. Empty/whitespace skips show — useful when the wrapper must stay\n * mounted for layout/animation stability (e.g. PanelNav expand/collapse).\n */\n @Prop() label!: string;\n\n /** Control density (height, padding, type). */\n @Prop() size: TooltipSize = 'md';\n\n @Prop() side: TooltipSide = 'top';\n @Prop() align: TooltipAlign = 'center';\n /** Gap between anchor and tooltip — number (px) or TokoMo length. */\n @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n /** Cross-axis offset — number (px) or TokoMo length. */\n @Prop() alignOffset: number | string = 0;\n /**\n * Hover show delay before the tooltip appears.\n * Default: `--effect-animation-delay-medium-3` (1000ms). Accepts a number (ms)\n * or a TokoMo time token / `var(--effect-animation-delay-*)`. Applies to the\n * initial hover/focus show only — after a recent dismiss, reopen is instant.\n * Prefer the default; override only for denser chrome or rare/destructive actions.\n */\n @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayMedium3;\n @Prop() shortcutKey: string | undefined;\n @Prop() shortcutKeyPosition: 'start' | 'end' = 'end';\n\n private tooltipId = `ds-tooltip-${++tooltipIdCounter}`;\n private delayTimer: ReturnType<typeof setTimeout> | null = null;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n private anchor: HTMLElement | null = null;\n private popupEl: HTMLElement | null = null;\n private anchorObserver: MutationObserver | null = null;\n private readonly position = new AnchoredPositionController({\n getAnchor: () => this.anchor,\n getPopup: () => this.popupEl,\n measure: (anchor, tip) => ({\n anchorRect: anchor.getBoundingClientRect(),\n // Fall back to token metrics until `ds-text` upgrades and reports a width.\n popupWidth: tip.offsetWidth || this.tooltipFallbackWidthPx,\n popupHeight: tip.offsetHeight || this.tooltipFallbackHeightPx,\n side: this.side,\n align: this.align,\n sideOffsetPx: this.sideOffsetPx,\n alignOffsetPx: this.alignOffsetPx,\n viewportPadPx: this.viewportPadPx,\n viewportWidth: window.innerWidth,\n viewportHeight: window.innerHeight,\n }),\n apply: ({ x, y, resolvedSide }) => {\n if (!this.popupEl) return;\n this.popupEl.dataset.side = resolvedSide;\n this.popupEl.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`;\n },\n liveUpdate: 'frame',\n observeResize: true,\n });\n private skipEnterAnimation = false;\n private isOpen = false;\n private lastInteractionWasKeyboard = false;\n private pointerEnterHandler = (event: PointerEvent) => {\n if (event.pointerType === 'touch') return;\n this.show();\n };\n private pointerLeaveHandler = (event: PointerEvent) => {\n if (event.pointerType === 'touch') return;\n this.hide();\n };\n private pointerDownHandler = (event: PointerEvent) => {\n this.lastInteractionWasKeyboard = false;\n if (event.pointerType === 'touch' && (this.isOpen || this.popupEl)) this.hideInstant();\n };\n private keyDownHandler = () => {\n this.lastInteractionWasKeyboard = true;\n };\n /** focusin/focusout so nested focus targets (e.g. ds-button-* inner button) still open the tip. */\n private focusHandler = () => {\n if (this.lastInteractionWasKeyboard || this.anchor?.matches(':focus-visible')) this.show();\n };\n private blurHandler: (e: FocusEvent) => void = (e) => {\n const next = e.relatedTarget as Node | null;\n if (next && this.anchor?.contains(next)) return;\n this.hide();\n };\n private escapeHandler = (event: KeyboardEvent) => {\n if (event.key !== 'Escape' || !this.isOpen) return;\n event.preventDefault();\n this.hide();\n };\n\n componentDidLoad() {\n this.bindAnchor();\n this.anchorObserver = new MutationObserver(() => this.handleSlotChange());\n this.anchorObserver.observe(this.el, { childList: true });\n }\n\n disconnectedCallback() {\n if (activeTooltip === this) activeTooltip = null;\n this.anchorObserver?.disconnect();\n this.anchorObserver = null;\n this.unbindAnchor();\n this.clearTimers();\n this.destroyPopup();\n }\n\n @Watch('label')\n @Watch('size')\n @Watch('side')\n @Watch('align')\n @Watch('sideOffset')\n @Watch('alignOffset')\n @Watch('shortcutKey')\n @Watch('shortcutKeyPosition')\n onContentOrPositionChange() {\n if (!this.label?.trim()) {\n if (this.isOpen || this.popupEl) this.hideInstant();\n return;\n }\n if (!this.popupEl || !this.isOpen) return;\n this.renderPopupContent();\n this.schedulePosition();\n }\n\n private get viewportPadPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n }\n\n private get sideOffsetPx(): number {\n return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);\n }\n\n private get alignOffsetPx(): number {\n return resolveCssLengthPx(this.alignOffset, 0);\n }\n\n private get hoverDelayMs(): number {\n return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayMedium3);\n }\n\n private get instantReopenMs(): number {\n return resolveCssTimeMs(\n TOKEN_DEFAULTS.animationDurationMedium1,\n TOKEN_DEFAULTS.animationDurationMedium1,\n );\n }\n\n private get fadeOutMs(): number {\n return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n }\n\n private get tooltipFallbackWidthPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.tooltipFallbackWidth, TOKEN_DEFAULTS.tooltipFallbackWidth);\n }\n\n private get tooltipFallbackHeightPx(): number {\n const token = FALLBACK_HEIGHT[this.size];\n return resolveCssLengthPx(token, token);\n }\n\n private bindAnchor() {\n const slot = this.el.querySelector('slot') as HTMLSlotElement | null;\n const slotted = slot?.assignedElements?.() ?? [];\n const child = (slotted[0] ?? this.el.firstElementChild) as HTMLElement | null;\n if (!child || child === this.anchor) return;\n this.anchor = child;\n child.addEventListener('pointerenter', this.pointerEnterHandler);\n child.addEventListener('pointerleave', this.pointerLeaveHandler);\n child.addEventListener('pointerdown', this.pointerDownHandler);\n child.addEventListener('keydown', this.keyDownHandler);\n child.addEventListener('focusin', this.focusHandler);\n child.addEventListener('focusout', this.blurHandler);\n }\n\n private unbindAnchor() {\n if (!this.anchor) return;\n this.unlinkDescribedBy();\n this.anchor.removeEventListener('pointerenter', this.pointerEnterHandler);\n this.anchor.removeEventListener('pointerleave', this.pointerLeaveHandler);\n this.anchor.removeEventListener('pointerdown', this.pointerDownHandler);\n this.anchor.removeEventListener('keydown', this.keyDownHandler);\n this.anchor.removeEventListener('focusin', this.focusHandler);\n this.anchor.removeEventListener('focusout', this.blurHandler);\n this.anchor = null;\n }\n\n private linkDescribedBy() {\n if (!this.anchor || !this.popupEl) return;\n const ids = new Set((this.anchor.getAttribute('aria-describedby') ?? '').split(/\\s+/).filter(Boolean));\n ids.add(this.tooltipId);\n this.anchor.setAttribute('aria-describedby', Array.from(ids).join(' '));\n }\n\n private unlinkDescribedBy() {\n if (!this.anchor) return;\n const ids = (this.anchor.getAttribute('aria-describedby') ?? '')\n .split(/\\s+/)\n .filter(id => id && id !== this.tooltipId);\n if (ids.length) this.anchor.setAttribute('aria-describedby', ids.join(' '));\n else this.anchor.removeAttribute('aria-describedby');\n }\n\n private handleSlotChange = () => {\n const slot = this.el.querySelector('slot') as HTMLSlotElement | null;\n const next = (slot?.assignedElements?.()[0] ?? this.el.firstElementChild) as HTMLElement | null;\n if (next === this.anchor) return;\n if (this.isOpen || this.popupEl) this.hideInstant();\n this.unbindAnchor();\n this.bindAnchor();\n };\n\n private clearTimers() {\n if (this.delayTimer) { clearTimeout(this.delayTimer); this.delayTimer = null; }\n if (this.closeTimer) { clearTimeout(this.closeTimer); this.closeTimer = null; }\n }\n\n private setupOpenListeners() {\n // Binds scroll/resize + the resize observer; placement itself is scheduled\n // by schedulePosition() so the label restyle stays interleaved.\n this.position.observe();\n document.addEventListener('keydown', this.escapeHandler);\n }\n\n private teardownOpenListeners() {\n this.position.unobserve();\n document.removeEventListener('keydown', this.escapeHandler);\n }\n\n private destroyPopup() {\n this.teardownOpenListeners();\n this.unlinkDescribedBy();\n if (!this.popupEl) return;\n this.popupEl.remove();\n this.popupEl = null;\n }\n\n /**\n * Position after `ds-text` upgrades and lays out. Measuring synchronously in\n * `mountPopup` reads a collapsed/fallback width and places left/right tips wrong.\n */\n private schedulePosition() {\n if (!this.popupEl) return;\n\n const reapplyLabelStyles = () => {\n const label = this.popupEl?.querySelector(':scope > .tooltip-inner > ds-text');\n if (label instanceof HTMLElement) styleTooltipLabel(label);\n };\n\n requestAnimationFrame(() => {\n reapplyLabelStyles();\n this.position.update();\n requestAnimationFrame(() => {\n reapplyLabelStyles();\n this.position.update();\n });\n });\n\n // The popup remounts on every show, so re-target the observer bound in start().\n this.position.observeResizeTargets();\n }\n\n /** Drop the open tip immediately (warm handoff to another tooltip). */\n private hideInstant() {\n this.clearTimers();\n lastDismissedAt = Date.now();\n if (activeTooltip === this) activeTooltip = null;\n this.destroyPopup();\n this.isOpen = false;\n this.skipEnterAnimation = false;\n }\n\n private show() {\n // Empty label = wrapper present for DOM stability (e.g. PanelNav expand/collapse)\n // but no tip should appear.\n if (!this.label?.trim()) return;\n this.clearTimers();\n let instant = Date.now() - lastDismissedAt < this.instantReopenMs;\n if (activeTooltip && activeTooltip !== this) {\n activeTooltip.hideInstant();\n instant = true;\n }\n // eslint-disable-next-line @typescript-eslint/no-this-alias -- module singleton tracks the active instance\n activeTooltip = this;\n this.skipEnterAnimation = instant;\n if (instant) {\n this.mountPopup();\n return;\n }\n this.delayTimer = setTimeout(() => {\n this.delayTimer = null;\n if (!this.label?.trim()) return;\n this.mountPopup();\n }, this.hoverDelayMs);\n }\n\n private hide() {\n this.clearTimers();\n if (!this.popupEl && !this.isOpen) return;\n lastDismissedAt = Date.now();\n if (!this.popupEl) {\n this.isOpen = false;\n return;\n }\n this.popupEl.classList.remove('tooltip-popup--instant');\n this.popupEl.classList.add('tooltip-popup--closing');\n if (this.fadeOutMs === 0) {\n if (activeTooltip === this) activeTooltip = null;\n this.destroyPopup();\n this.isOpen = false;\n this.skipEnterAnimation = false;\n return;\n }\n this.closeTimer = setTimeout(() => {\n this.closeTimer = null;\n if (activeTooltip === this) activeTooltip = null;\n this.destroyPopup();\n this.isOpen = false;\n this.skipEnterAnimation = false;\n }, this.fadeOutMs);\n }\n\n private mountPopup() {\n if (!this.popupEl) {\n const tip = document.createElement('div');\n tip.id = this.tooltipId;\n tip.setAttribute('role', 'tooltip');\n // `sc-ds-tooltip` is required for Stencil scoped CSS to match outside the host.\n tip.className = 'tooltip-popup ds-forced-colors-scope sc-ds-tooltip';\n Object.assign(tip.style, {\n position: 'fixed',\n left: '0',\n top: '0',\n zIndex: 'var(--dimension-z-index-tooltip)',\n pointerEvents: 'none',\n });\n document.body.appendChild(tip);\n this.popupEl = tip;\n }\n\n this.setupOpenListeners();\n this.linkDescribedBy();\n this.popupEl.classList.toggle('tooltip-popup--instant', this.skipEnterAnimation);\n this.popupEl.classList.remove('tooltip-popup--closing');\n this.renderPopupContent();\n this.schedulePosition();\n this.isOpen = true;\n }\n\n private renderPopupContent() {\n if (!this.popupEl) return;\n const textVariant = CONTROL_TEXT_VARIANT[this.size];\n const density =\n this.size === 'md' ? 'ds-control--md' : this.size === 'sm' ? 'ds-control--sm' : 'ds-control--xs';\n // Every layout node needs `sc-ds-tooltip` so scoped selectors (`.foo.sc-ds-tooltip`) match.\n const sc = 'sc-ds-tooltip';\n\n const inner = document.createElement('div');\n inner.className = `tooltip-inner ${density} ${sc}`;\n\n const appendShortcut = (position: 'start' | 'end') => {\n if (!this.shortcutKey || this.shortcutKeyPosition !== position) return;\n const group = document.createElement('span');\n group.className = `key-hint-group ${sc}`;\n group.setAttribute('aria-hidden', 'true');\n\n for (const label of shortcutKeyLabels(this.shortcutKey)) {\n const hint = document.createElement('span');\n const wide = Array.from(label).length > 1 ? ' key-hint--wide' : '';\n hint.className = `key-hint${wide} ${sc}`;\n const text = document.createElement('span');\n text.className = `key-hint__label ${sc}`;\n text.textContent = label;\n hint.appendChild(text);\n group.appendChild(hint);\n }\n inner.appendChild(group);\n };\n\n appendShortcut('start');\n\n // ds-text is the layout box (metric-box + 2px control label-inset).\n // Inline styles required — see styleTooltipLabel.\n const label = createDsText({ variant: textVariant, wrap: 'nowrap', text: this.label });\n styleTooltipLabel(label);\n inner.appendChild(label);\n\n appendShortcut('end');\n\n this.popupEl.replaceChildren(inner);\n }\n\n render() {\n return (\n <Host style={{ display: 'contents' }}>\n <slot onSlotchange={this.handleSlotChange} />\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}