@ds-mo/ui 14.20.0 → 14.22.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 (310) hide show
  1. package/dist/.package-ready.json +1 -1
  2. package/dist/agent-patterns.json +8 -4
  3. package/dist/agent.json +447 -44
  4. package/dist/angular/ds-bar-title.d.ts +1 -1
  5. package/dist/angular/ds-bar-title.js +3 -3
  6. package/dist/angular/ds-chip.d.ts +1 -1
  7. package/dist/angular/ds-chip.js +3 -3
  8. package/dist/angular/ds-filter-menu.d.ts +7 -1
  9. package/dist/angular/ds-filter-menu.js +7 -4
  10. package/dist/angular/ds-input.d.ts +1 -1
  11. package/dist/angular/ds-input.js +3 -3
  12. package/dist/angular/ds-panel-nav.d.ts +7 -1
  13. package/dist/angular/ds-panel-nav.js +7 -4
  14. package/dist/angular/ds-shell-app.d.ts +7 -1
  15. package/dist/angular/ds-shell-app.js +7 -4
  16. package/dist/angular/ds-shell-page.d.ts +1 -1
  17. package/dist/angular/ds-shell-page.js +3 -3
  18. package/dist/angular/ds-tab-group.d.ts +1 -1
  19. package/dist/angular/ds-tab-group.js +3 -3
  20. package/dist/angular/ds-table-filter.d.ts +7 -1
  21. package/dist/angular/ds-table-filter.js +7 -4
  22. package/dist/angular/ds-table-group.d.ts +29 -0
  23. package/dist/angular/ds-table-group.js +48 -0
  24. package/dist/angular/ds-table-search.d.ts +20 -0
  25. package/dist/angular/ds-table-search.js +49 -0
  26. package/dist/angular/ds-table.d.ts +1 -1
  27. package/dist/angular/ds-table.js +3 -3
  28. package/dist/angular/index.d.ts +1 -1
  29. package/dist/angular/index.js +2 -0
  30. package/dist/angular/proxies.d.ts +2 -0
  31. package/dist/angular/proxies.js +2 -0
  32. package/dist/components/ds-agent-activity.js +1 -1
  33. package/dist/components/ds-agent-questionnaire.js +1 -1
  34. package/dist/components/ds-agent-response.js +1 -1
  35. package/dist/components/ds-agent-source-list.js +1 -1
  36. package/dist/components/ds-agent-tool-call.js +1 -1
  37. package/dist/components/ds-attachment-list.js +1 -1
  38. package/dist/components/ds-badge.js +1 -1
  39. package/dist/components/ds-banner.js +1 -1
  40. package/dist/components/ds-bar-action.js +1 -1
  41. package/dist/components/ds-bar-nav.js +1 -1
  42. package/dist/components/ds-bar-title.js +1 -1
  43. package/dist/components/ds-bar-workflow.js +1 -1
  44. package/dist/components/ds-breadcrumb.js +1 -1
  45. package/dist/components/ds-button-filled.js +1 -1
  46. package/dist/components/ds-button-unfilled.js +1 -1
  47. package/dist/components/ds-card-chart.js +1 -1
  48. package/dist/components/ds-card-overview.js +1 -1
  49. package/dist/components/ds-card-setting.js +1 -1
  50. package/dist/components/ds-chart-legend.js +1 -1
  51. package/dist/components/ds-chart.js +1 -1
  52. package/dist/components/ds-checkbox.js +1 -1
  53. package/dist/components/ds-chip.js +1 -1
  54. package/dist/components/ds-chip.js.map +1 -1
  55. package/dist/components/ds-code-block.js +1 -1
  56. package/dist/components/ds-conversation-list-item.js +1 -1
  57. package/dist/components/ds-conversation-list-section.js +1 -1
  58. package/dist/components/ds-empty-state.js +1 -1
  59. package/dist/components/ds-field.js +1 -1
  60. package/dist/components/ds-filter-menu.js +1 -1
  61. package/dist/components/ds-input.js +1 -1
  62. package/dist/components/ds-markdown.js +1 -1
  63. package/dist/components/ds-menu.js +1 -1
  64. package/dist/components/ds-message-actions.js +1 -1
  65. package/dist/components/ds-message-composer.js +1 -1
  66. package/dist/components/ds-message-scroller.js +1 -1
  67. package/dist/components/ds-message-scroller.js.map +1 -1
  68. package/dist/components/ds-message.js +1 -1
  69. package/dist/components/ds-mobile-bar-nav.js +1 -1
  70. package/dist/components/ds-mobile-header.js +1 -1
  71. package/dist/components/ds-mobile-section-switcher.js +1 -1
  72. package/dist/components/ds-mobile-sheet-nav.js +1 -1
  73. package/dist/components/ds-modal.js +1 -1
  74. package/dist/components/ds-pagination.js +1 -1
  75. package/dist/components/ds-panel-nav.js +1 -1
  76. package/dist/components/ds-panel-sub-nav.js +1 -1
  77. package/dist/components/ds-panel-tool-header.js +1 -1
  78. package/dist/components/ds-panel-tool-search.js +1 -1
  79. package/dist/components/ds-panel-tool-search.js.map +1 -1
  80. package/dist/components/ds-panel-tools.js +1 -1
  81. package/dist/components/ds-paper-texture.js +1 -1
  82. package/dist/components/ds-radio.js +1 -1
  83. package/dist/components/ds-select.js +1 -1
  84. package/dist/components/ds-shell-app.js +1 -1
  85. package/dist/components/ds-shell-app.js.map +1 -1
  86. package/dist/components/ds-shell-page.js +1 -1
  87. package/dist/components/ds-shell-tools.js +1 -1
  88. package/dist/components/ds-slider.js +1 -1
  89. package/dist/components/ds-swatch-picker.js +1 -1
  90. package/dist/components/ds-tab-group.js +1 -1
  91. package/dist/components/ds-table-filter.js +1 -1
  92. package/dist/components/ds-table-filter.js.map +1 -1
  93. package/dist/components/ds-table-group.d.ts +11 -0
  94. package/dist/components/ds-table-group.js +2 -0
  95. package/dist/components/ds-table-group.js.map +1 -0
  96. package/dist/components/ds-table-saved-views.js +1 -1
  97. package/dist/components/ds-table-search.d.ts +11 -0
  98. package/dist/components/ds-table-search.js +2 -0
  99. package/dist/components/ds-table-search.js.map +1 -0
  100. package/dist/components/ds-table-sort.js +1 -1
  101. package/dist/components/ds-table-sort.js.map +1 -1
  102. package/dist/components/ds-table-toolbar.js +1 -1
  103. package/dist/components/ds-table-toolbar.js.map +1 -1
  104. package/dist/components/ds-table.js +1 -1
  105. package/dist/components/ds-table.js.map +1 -1
  106. package/dist/components/ds-tag.js +1 -1
  107. package/dist/components/ds-text.js +1 -1
  108. package/dist/components/ds-toast.js +1 -1
  109. package/dist/components/ds-tooltip-chart.js +1 -1
  110. package/dist/components/ds-tooltip.js +1 -1
  111. package/dist/components/ds-typing-indicator.js +1 -1
  112. package/dist/components/{p-Bf7PZJPT.js → p-5Z4oYuiK.js} +2 -2
  113. package/dist/components/{p-DIlScMvI.js → p-6rB0eAda.js} +2 -2
  114. package/dist/components/{p-CptSB-tA.js → p-9ykZwPlI.js} +2 -2
  115. package/dist/components/p-B0OZx3JB.js +2 -0
  116. package/dist/components/p-B0OZx3JB.js.map +1 -0
  117. package/dist/components/{p-BHhmB9-4.js → p-B0kSlcaw.js} +2 -2
  118. package/dist/components/{p-DWjTOoXs.js → p-B1wMpt1z.js} +2 -2
  119. package/dist/components/p-BEttT0UB.js +2 -0
  120. package/dist/components/p-BEttT0UB.js.map +1 -0
  121. package/dist/components/p-BFit8o0r.js +2 -0
  122. package/dist/components/p-BFit8o0r.js.map +1 -0
  123. package/dist/components/{p-fRDzpfi9.js → p-BXv6RpoF.js} +2 -2
  124. package/dist/components/{p-D7QlTWbN.js → p-BbG7nOcz.js} +2 -2
  125. package/dist/components/{p-Bx5BSd6F.js → p-BcxidW9k.js} +2 -2
  126. package/dist/components/{p-1UAVanY9.js → p-Bd8I2oXN.js} +2 -2
  127. package/dist/components/{p-DGe5oXR0.js → p-Bjq1KP_Y.js} +2 -2
  128. package/dist/components/p-Bjq1KP_Y.js.map +1 -0
  129. package/dist/components/{p-DW5Ita-P.js → p-BnTPuV3x.js} +2 -2
  130. package/dist/components/{p-DW5Ita-P.js.map → p-BnTPuV3x.js.map} +1 -1
  131. package/dist/components/p-BqVXMEJm.js +2 -0
  132. package/dist/components/p-BqVXMEJm.js.map +1 -0
  133. package/dist/components/p-CB3fv_Oh.js +2 -0
  134. package/dist/components/p-CB3fv_Oh.js.map +1 -0
  135. package/dist/components/{p-DdH7b4JF.js → p-CBymzuOO.js} +2 -2
  136. package/dist/components/{p-BjRD57w3.js → p-CE2b5GPu.js} +2 -2
  137. package/dist/components/{p-DBYv7fRq.js → p-CFkZSDwI.js} +2 -2
  138. package/dist/components/{p-Bb4KnRy0.js → p-CTH3dSYg.js} +2 -2
  139. package/dist/components/{p-BmssRAEZ.js → p-CZ144LS5.js} +2 -2
  140. package/dist/components/{p-B-HsfQOK.js → p-Cd1JnnVK.js} +2 -2
  141. package/dist/components/p-CeKa4VbU.js +2 -0
  142. package/dist/components/{p-AtUP95E_.js.map → p-CeKa4VbU.js.map} +1 -1
  143. package/dist/components/{p-CDw_WEVt.js → p-Cnsvgx1M.js} +2 -2
  144. package/dist/components/{p-BYFS2qWb.js → p-CpeJMKJ5.js} +2 -2
  145. package/dist/components/{p-DM1Z_hh0.js → p-D36EmETH.js} +2 -2
  146. package/dist/components/p-D9wZlB_N.js +2 -0
  147. package/dist/components/p-D9wZlB_N.js.map +1 -0
  148. package/dist/components/{p-DFC0sRM-.js → p-DI8DUozc.js} +2 -2
  149. package/dist/components/{p-v4oqkJms.js → p-DSy1oOnd.js} +2 -2
  150. package/dist/components/{p-v4oqkJms.js.map → p-DSy1oOnd.js.map} +1 -1
  151. package/dist/components/{p-DQBT1Jkf.js → p-DbLLH3hr.js} +2 -2
  152. package/dist/components/{p-B2FT4Da6.js → p-De0qjzPu.js} +2 -2
  153. package/dist/components/{p-B6rSDhJY.js → p-Dit6JmAK.js} +2 -2
  154. package/dist/components/p-DnZ7DNaz.js +2 -0
  155. package/dist/components/p-DnZ7DNaz.js.map +1 -0
  156. package/dist/components/{p-caLOcQUK.js → p-DzPtYdXy.js} +2 -2
  157. package/dist/components/{p-Do8wbFff.js → p-XaCYqck3.js} +2 -2
  158. package/dist/components/{p-L8IIeDXM.js → p-_C-XRpCB.js} +2 -2
  159. package/dist/components/{p-CyZqk196.js → p-bHnk8t5I.js} +2 -2
  160. package/dist/components/p-hYjmOPCI.js +2 -0
  161. package/dist/components/p-hYjmOPCI.js.map +1 -0
  162. package/dist/components/{p-ChfVRPHw.js → p-pUOA3iDG.js} +2 -2
  163. package/dist/components/{p-DLbHgbVj.js → p-pnO8tAYB.js} +2 -2
  164. package/dist/components/{p-CCmgtju-.js → p-pxN8JGEh.js} +2 -2
  165. package/dist/components/p-pxN8JGEh.js.map +1 -0
  166. package/dist/components/{p-B4wTnsUL.js → p-w9fkkwL2.js} +2 -2
  167. package/dist/components/p-x5u5Ueli.js +2 -0
  168. package/dist/components/{p-BeA6Jv-3.js.map → p-x5u5Ueli.js.map} +1 -1
  169. package/dist/docs/components.json +1582 -45
  170. package/dist/lib/components/BarTitle/bar-title-types.d.ts +1 -0
  171. package/dist/lib/components/Menu/menu-placement.d.ts +13 -0
  172. package/dist/lib/components/PanelNav/panel-nav-types.d.ts +19 -0
  173. package/dist/lib/components/ShellApp/shell-app-types.d.ts +1 -0
  174. package/dist/lib/components/ShellPage/shell-page-types.d.ts +1 -0
  175. package/dist/lib/shell/index.d.ts +3 -3
  176. package/dist/lib/shell/index.js.map +2 -2
  177. package/dist/mcp-data/registry/bar-title.json +25 -4
  178. package/dist/mcp-data/registry/button-filled.json +1 -0
  179. package/dist/mcp-data/registry/button-unfilled.json +1 -0
  180. package/dist/mcp-data/registry/chip.json +39 -2
  181. package/dist/mcp-data/registry/filter-menu.json +84 -11
  182. package/dist/mcp-data/registry/input.json +54 -2
  183. package/dist/mcp-data/registry/menu.json +1 -1
  184. package/dist/mcp-data/registry/panel-nav.json +71 -10
  185. package/dist/mcp-data/registry/panel-tool-search.json +4 -5
  186. package/dist/mcp-data/registry/registry.json +452 -43
  187. package/dist/mcp-data/registry/select.json +1 -0
  188. package/dist/mcp-data/registry/shell-app.json +47 -5
  189. package/dist/mcp-data/registry/shell-page.json +25 -5
  190. package/dist/mcp-data/registry/tab-group.json +21 -2
  191. package/dist/mcp-data/registry/table-filter.json +79 -9
  192. package/dist/mcp-data/registry/table-group.json +301 -0
  193. package/dist/mcp-data/registry/table-search.json +343 -0
  194. package/dist/mcp-data/registry/table-sort.json +1 -1
  195. package/dist/mcp-data/registry/table-toolbar.json +7 -6
  196. package/dist/mcp-data/registry/table.json +55 -17
  197. package/dist/react/components.d.ts +2 -0
  198. package/dist/react/components.js +2 -0
  199. package/dist/react/ds-filter-menu.d.ts +2 -1
  200. package/dist/react/ds-filter-menu.js +1 -0
  201. package/dist/react/ds-panel-nav.d.ts +2 -1
  202. package/dist/react/ds-panel-nav.js +1 -0
  203. package/dist/react/ds-shell-app.d.ts +2 -1
  204. package/dist/react/ds-shell-app.js +1 -0
  205. package/dist/react/ds-table-filter.d.ts +2 -1
  206. package/dist/react/ds-table-filter.js +1 -0
  207. package/dist/react/ds-table-group.d.ts +14 -0
  208. package/dist/react/ds-table-group.js +16 -0
  209. package/dist/react/ds-table-search.d.ts +14 -0
  210. package/dist/react/ds-table-search.js +16 -0
  211. package/dist/styles/table.css +46 -0
  212. package/dist/types/components/BarTitle/BarTitle.d.ts +4 -1
  213. package/dist/types/components/BarTitle/bar-title-types.d.ts +1 -0
  214. package/dist/types/components/BarTitle/index.d.ts +1 -1
  215. package/dist/types/components/Chip/Chip.d.ts +5 -0
  216. package/dist/types/components/FilterMenu/FilterMenu.d.ts +26 -0
  217. package/dist/types/components/Input/Input.d.ts +6 -0
  218. package/dist/types/components/Menu/menu-placement.d.ts +13 -0
  219. package/dist/types/components/PanelNav/PanelNav.d.ts +29 -2
  220. package/dist/types/components/PanelNav/index.d.ts +2 -2
  221. package/dist/types/components/PanelNav/panel-nav-types.d.ts +19 -0
  222. package/dist/types/components/PanelNav/panel-nav-utils.d.ts +10 -2
  223. package/dist/types/components/ShellApp/ShellApp.d.ts +11 -1
  224. package/dist/types/components/ShellApp/shell-app-types.d.ts +1 -0
  225. package/dist/types/components/ShellPage/ShellPage.d.ts +6 -1
  226. package/dist/types/components/ShellPage/index.d.ts +1 -1
  227. package/dist/types/components/ShellPage/shell-page-types.d.ts +1 -0
  228. package/dist/types/components/TabGroup/TabGroup.d.ts +2 -0
  229. package/dist/types/components/Table/Table.d.ts +6 -0
  230. package/dist/types/components/Table/index.d.ts +1 -1
  231. package/dist/types/components/Table/table-cell-model.d.ts +11 -1
  232. package/dist/types/components/Table/table-highlight.d.ts +12 -0
  233. package/dist/types/components/Table/table-model.d.ts +6 -5
  234. package/dist/types/components/Table/table-render-model.d.ts +1 -1
  235. package/dist/types/components/Table/table-row-view.d.ts +4 -1
  236. package/dist/types/components/Table/table-types.d.ts +22 -4
  237. package/dist/types/components/Table/table-virtual-model.d.ts +2 -0
  238. package/dist/types/components/TableFilter/TableFilter.d.ts +9 -1
  239. package/dist/types/components/TableGroup/TableGroup.d.ts +60 -0
  240. package/dist/types/components/TableSearch/TableSearch.d.ts +56 -0
  241. package/dist/types/components/TableSearch/table-search-model.d.ts +10 -0
  242. package/dist/types/components/TableSearch/table-search-types.d.ts +10 -0
  243. package/dist/types/components.d.ts +459 -14
  244. package/dist/types/shell/index.d.ts +3 -3
  245. package/dist/types/utils/choice-list-parts.d.ts +11 -1
  246. package/dist/types/utils/select-controller.d.ts +1 -1
  247. package/dist/vue/components.d.ts +2 -0
  248. package/dist/vue/components.js +2 -0
  249. package/dist/vue/ds-bar-title.js +1 -0
  250. package/dist/vue/ds-chip.js +2 -0
  251. package/dist/vue/ds-filter-menu.js +5 -0
  252. package/dist/vue/ds-input.js +3 -0
  253. package/dist/vue/ds-panel-nav.js +4 -0
  254. package/dist/vue/ds-shell-app.js +3 -0
  255. package/dist/vue/ds-shell-page.js +1 -0
  256. package/dist/vue/ds-tab-group.js +1 -0
  257. package/dist/vue/ds-table-filter.js +5 -0
  258. package/dist/vue/ds-table-group.d.ts +3 -0
  259. package/dist/vue/ds-table-group.js +20 -0
  260. package/dist/vue/ds-table-search.d.ts +3 -0
  261. package/dist/vue/ds-table-search.js +22 -0
  262. package/dist/vue/ds-table.js +2 -0
  263. package/package.json +1 -1
  264. package/dist/components/p-AtUP95E_.js +0 -2
  265. package/dist/components/p-B5-R5mb8.js +0 -2
  266. package/dist/components/p-B5-R5mb8.js.map +0 -1
  267. package/dist/components/p-BUexfjjg.js +0 -2
  268. package/dist/components/p-BUexfjjg.js.map +0 -1
  269. package/dist/components/p-BeA6Jv-3.js +0 -2
  270. package/dist/components/p-BkelrY4-.js +0 -2
  271. package/dist/components/p-BkelrY4-.js.map +0 -1
  272. package/dist/components/p-CCmgtju-.js.map +0 -1
  273. package/dist/components/p-DA5H_Iq_.js +0 -2
  274. package/dist/components/p-DA5H_Iq_.js.map +0 -1
  275. package/dist/components/p-DGe5oXR0.js.map +0 -1
  276. package/dist/components/p-DKt_8s-U.js +0 -2
  277. package/dist/components/p-DKt_8s-U.js.map +0 -1
  278. package/dist/components/p-DfDoqOlx.js +0 -2
  279. package/dist/components/p-DfDoqOlx.js.map +0 -1
  280. package/dist/components/p-rw0ZxIE4.js +0 -2
  281. package/dist/components/p-rw0ZxIE4.js.map +0 -1
  282. /package/dist/components/{p-Bf7PZJPT.js.map → p-5Z4oYuiK.js.map} +0 -0
  283. /package/dist/components/{p-DIlScMvI.js.map → p-6rB0eAda.js.map} +0 -0
  284. /package/dist/components/{p-CptSB-tA.js.map → p-9ykZwPlI.js.map} +0 -0
  285. /package/dist/components/{p-BHhmB9-4.js.map → p-B0kSlcaw.js.map} +0 -0
  286. /package/dist/components/{p-DWjTOoXs.js.map → p-B1wMpt1z.js.map} +0 -0
  287. /package/dist/components/{p-fRDzpfi9.js.map → p-BXv6RpoF.js.map} +0 -0
  288. /package/dist/components/{p-D7QlTWbN.js.map → p-BbG7nOcz.js.map} +0 -0
  289. /package/dist/components/{p-Bx5BSd6F.js.map → p-BcxidW9k.js.map} +0 -0
  290. /package/dist/components/{p-1UAVanY9.js.map → p-Bd8I2oXN.js.map} +0 -0
  291. /package/dist/components/{p-DdH7b4JF.js.map → p-CBymzuOO.js.map} +0 -0
  292. /package/dist/components/{p-BjRD57w3.js.map → p-CE2b5GPu.js.map} +0 -0
  293. /package/dist/components/{p-DBYv7fRq.js.map → p-CFkZSDwI.js.map} +0 -0
  294. /package/dist/components/{p-Bb4KnRy0.js.map → p-CTH3dSYg.js.map} +0 -0
  295. /package/dist/components/{p-BmssRAEZ.js.map → p-CZ144LS5.js.map} +0 -0
  296. /package/dist/components/{p-B-HsfQOK.js.map → p-Cd1JnnVK.js.map} +0 -0
  297. /package/dist/components/{p-CDw_WEVt.js.map → p-Cnsvgx1M.js.map} +0 -0
  298. /package/dist/components/{p-BYFS2qWb.js.map → p-CpeJMKJ5.js.map} +0 -0
  299. /package/dist/components/{p-DM1Z_hh0.js.map → p-D36EmETH.js.map} +0 -0
  300. /package/dist/components/{p-DFC0sRM-.js.map → p-DI8DUozc.js.map} +0 -0
  301. /package/dist/components/{p-DQBT1Jkf.js.map → p-DbLLH3hr.js.map} +0 -0
  302. /package/dist/components/{p-B2FT4Da6.js.map → p-De0qjzPu.js.map} +0 -0
  303. /package/dist/components/{p-B6rSDhJY.js.map → p-Dit6JmAK.js.map} +0 -0
  304. /package/dist/components/{p-caLOcQUK.js.map → p-DzPtYdXy.js.map} +0 -0
  305. /package/dist/components/{p-Do8wbFff.js.map → p-XaCYqck3.js.map} +0 -0
  306. /package/dist/components/{p-L8IIeDXM.js.map → p-_C-XRpCB.js.map} +0 -0
  307. /package/dist/components/{p-CyZqk196.js.map → p-bHnk8t5I.js.map} +0 -0
  308. /package/dist/components/{p-ChfVRPHw.js.map → p-pUOA3iDG.js.map} +0 -0
  309. /package/dist/components/{p-DLbHgbVj.js.map → p-pnO8tAYB.js.map} +0 -0
  310. /package/dist/components/{p-B4wTnsUL.js.map → p-w9fkkwL2.js.map} +0 -0
@@ -1,2 +1,2 @@
1
- import{p as o,H as r,c as t,h as s,a as i,t as n}from"./index.js";import{g as e,i as a}from"./p-BQq26pt9.js";import{d}from"./p-caLOcQUK.js";import{d as c}from"./p-Cea7rROU.js";import{d as l}from"./p-B-HsfQOK.js";import{C as u}from"./p-CuwopElg.js";import{c as b}from"./p-DuFm-ieS.js";const g=()=>`.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))}.ds-control-width--hug.sc-ds-tab-group-h,.ds-control-width--hug.sc-ds-tab-group{width:fit-content;max-width:100%;flex:0 0 auto}.ds-control-width--fill.sc-ds-tab-group-h,.ds-control-width--fill.sc-ds-tab-group{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}@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-brand);--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-brand);--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-brand);--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-faint.sc-ds-tab-group-h{--_tab-group-selected-fill:var(--color-interaction-active)}.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-selected-fill:var(--color-interaction-on-medium-background-active)}.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-selected-fill:var(--color-interaction-on-bold-background-active)}.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-selected-fill:var(--color-interaction-on-strong-background-active)}.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-selected-fill:var(--color-translucent-interaction-active)}.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-selected-fill:var(--color-inverted-interaction-active)}.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-selected-fill:var(--color-media-interaction-active)}.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-group-selected-fill:var(--color-always-dark-interaction-active)}.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}.ds-control-width--fill.sc-ds-tab-group-h .tab-list.sc-ds-tab-group{width:100%}.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)}.ds-control-width--fill.sc-ds-tab-group-h .tab.sc-ds-tab-group{flex:1 1 0;min-width:0;overflow:hidden}.ds-control-width--fill.sc-ds-tab-group-h .tab__content.sc-ds-tab-group{max-width:100%;overflow:hidden}.ds-control-width--fill.sc-ds-tab-group-h .tab__label.sc-ds-tab-group{overflow:hidden;text-overflow:ellipsis}.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(--_tab-group-selected-fill)}.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 p=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=t(this,"dsChange",7);this.value="";this.tabs=[];this.size="md";this.width="hug";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 i=this.el.querySelector(`[data-tab-id="${s}"]`);if(i){i.focus({preventScroll:true})}else{r.blur()}}))}findEnabled(o,r){const t=this.selectableTabs;const s=t.length;for(let i=0;i<s;i++){const n=(o+r*(i+1)+s*(i+1))%s;if(!t[n]?.isInactive)return n}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 i=null;if(o.key==="ArrowRight"){i=this.findEnabled(s,1)}else if(o.key==="ArrowLeft"){i=this.findEnabled(s,-1)}if(o.key==="Home"){const o=r.findIndex((o=>!o.isInactive));i=o===-1?null:o}else if(o.key==="End"){const o=[...r].reverse().findIndex((o=>!o.isInactive));i=o===-1?null:r.length-1-o}if(i!==null){o.preventDefault();const t=r[i];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(i,{key:"7c8282bcba9a1304e2d1abe14f23597cef089370",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,...b(this.width)}},s("div",{key:"21ee804595e9dfe546f80c0b0c51842d673a8789",role:"tablist",class:"tab-list","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby},this.tabs.map(((t,i)=>{if(a(t)){return s("div",{key:`divider-${i}`,class:"tab-divider","aria-hidden":"true"},s("div",{class:"tab-divider__line"}))}const n=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=n&&!o;return s("button",{key:t.id,type:"button",role:"tab","data-tab-id":t.id,class:{tab:true,"tab--selected":n,[`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":String(n),"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 g()}},[2,"ds-tab-group",{value:[1025],tabs:[16],size:[1],width:[1],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}]}]);function v(){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(n(o))){customElements.define(n(o),p)}break;case"ds-badge":if(!customElements.get(n(o))){d()}break;case"ds-icon":if(!customElements.get(n(o))){c()}break;case"ds-text":if(!customElements.get(n(o))){l()}break}}))}v();export{p as T,v as d};
2
- //# sourceMappingURL=p-DGe5oXR0.js.map
1
+ import{p as o,H as r,c as t,h as s,a as i,t as n}from"./index.js";import{g as e,i as a}from"./p-BQq26pt9.js";import{d}from"./p-DzPtYdXy.js";import{d as c}from"./p-Cea7rROU.js";import{d as l}from"./p-Cd1JnnVK.js";import{C as u}from"./p-CuwopElg.js";import{c as b}from"./p-DuFm-ieS.js";const g=()=>`.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))}.ds-control-width--hug.sc-ds-tab-group-h,.ds-control-width--hug.sc-ds-tab-group{width:fit-content;max-width:100%;flex:0 0 auto}.ds-control-width--fill.sc-ds-tab-group-h,.ds-control-width--fill.sc-ds-tab-group{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}@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-brand);--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-brand);--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-brand);--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-faint.sc-ds-tab-group-h{--_tab-group-selected-fill:var(--color-interaction-active)}.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-selected-fill:var(--color-interaction-on-medium-background-active)}.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-selected-fill:var(--color-interaction-on-bold-background-active)}.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-selected-fill:var(--color-interaction-on-strong-background-active)}.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-selected-fill:var(--color-translucent-interaction-active)}.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-selected-fill:var(--color-inverted-interaction-active)}.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-selected-fill:var(--color-media-interaction-active)}.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-group-selected-fill:var(--color-always-dark-interaction-active)}.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}.ds-control-width--fill.sc-ds-tab-group-h .tab-list.sc-ds-tab-group{width:100%}.tab-group-host--surface.sc-ds-tab-group-h .tab-list.sc-ds-tab-group{background-color:transparent}.tab-group-host--containerless.sc-ds-tab-group-h .tab-list.sc-ds-tab-group{padding:0;border:0;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)}.ds-control-width--fill.sc-ds-tab-group-h .tab.sc-ds-tab-group{flex:1 1 0;min-width:0;overflow:hidden}.ds-control-width--fill.sc-ds-tab-group-h .tab__content.sc-ds-tab-group{max-width:100%;overflow:hidden}.ds-control-width--fill.sc-ds-tab-group-h .tab__label.sc-ds-tab-group{overflow:hidden;text-overflow:ellipsis}.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(--_tab-group-selected-fill)}.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 p=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=t(this,"dsChange",7);this.value="";this.tabs=[];this.size="md";this.width="hug";this.hasContainer=true;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 i=this.el.querySelector(`[data-tab-id="${s}"]`);if(i){i.focus({preventScroll:true})}else{r.blur()}}))}findEnabled(o,r){const t=this.selectableTabs;const s=t.length;for(let i=0;i<s;i++){const n=(o+r*(i+1)+s*(i+1))%s;if(!t[n]?.isInactive)return n}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 i=null;if(o.key==="ArrowRight"){i=this.findEnabled(s,1)}else if(o.key==="ArrowLeft"){i=this.findEnabled(s,-1)}if(o.key==="Home"){const o=r.findIndex((o=>!o.isInactive));i=o===-1?null:o}else if(o.key==="End"){const o=[...r].reverse().findIndex((o=>!o.isInactive));i=o===-1?null:r.length-1-o}if(i!==null){o.preventDefault();const t=r[i];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(i,{key:"ebb5eefc2cc2ea2952af4064ca53dc5f3cca7025",class:{"tab-group-host":true,[`tab-group-host--${this.size}`]:true,[`ds-control--${this.size}`]:true,"tab-group-host--containerless":!this.hasContainer,"tab-group-host--surface":!!o,[`tab-group-host--${o}`]:!!o,...b(this.width)}},s("div",{key:"cc3b51390020a01408f1e22451c0b8342c64ab6c",role:"tablist",class:"tab-list","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby},this.tabs.map(((t,i)=>{if(a(t)){return s("div",{key:`divider-${i}`,class:"tab-divider","aria-hidden":"true"},s("div",{class:"tab-divider__line"}))}const n=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=n&&!o;return s("button",{key:t.id,type:"button",role:"tab","data-tab-id":t.id,class:{tab:true,"tab--selected":n,[`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":String(n),"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 g()}},[2,"ds-tab-group",{value:[1025],tabs:[16],size:[1],width:[1],hasContainer:[4,"has-container"],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}]}]);function v(){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(n(o))){customElements.define(n(o),p)}break;case"ds-badge":if(!customElements.get(n(o))){d()}break;case"ds-icon":if(!customElements.get(n(o))){c()}break;case"ds-text":if(!customElements.get(n(o))){l()}break}}))}v();export{p as T,v as d};
2
+ //# sourceMappingURL=p-Bjq1KP_Y.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["tabGroupCss","TabGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","tabs","size","width","hasContainer","ariaLabel","selectableTabs","getSelectableTabs","focusableTabId","some","tab","id","isInactive","find","selectTab","options","dsChange","emit","focus","focusTab","btn","el","querySelector","preventScroll","onValueChange","next","prev","undefined","requestAnimationFrame","active","document","activeElement","contains","activeId","getAttribute","focusId","nextTab","blur","findEnabled","from","step","len","length","n","i","handleKeyDown","e","focusedId","target","closest","dataset","currentIdx","findIndex","t","nextIdx","key","first","lastEnabled","reverse","preventDefault","getBgClass","background","render","bgClass","h","Host","class","controlWidthClass","role","ariaLabelledby","map","index","isTabDivider","isSelected","variant","showIcon","showLabel","emphasizeLabel","type","label","String","panelId","disabled","tabIndex","onClick","tab__content","dot","name","icon","color","as","CONTROL_TEXT_VARIANT","emphasis","hasRing"],"sources":["src/wc/components/TabGroup/TabGroup.css?tag=ds-tab-group&encapsulation=scoped","src/wc/components/TabGroup/TabGroup.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/control-density-inset.css';\n@import '../../utils/control-width.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n display: block;\n --_tab-group-surface-border: var(--color-border-tertiary);\n --_tab-group-divider: var(--color-border-secondary);\n}\n\n:host(.tab-group-host--on-faint) {\n --_tab-group-selected-fill: var(--color-interaction-active);\n}\n\n:host(.tab-group-host--on-medium) {\n --_tab-group-surface-border: var(--color-border-on-medium-background-tertiary);\n --_tab-group-divider: var(--color-border-on-medium-background-secondary);\n --_tab-group-selected-fill: var(--color-interaction-on-medium-background-active);\n}\n\n:host(.tab-group-host--on-bold) {\n --_tab-group-surface-border: var(--color-border-on-bold-background-tertiary);\n --_tab-group-divider: var(--color-border-on-bold-background-secondary);\n --_tab-group-selected-fill: var(--color-interaction-on-bold-background-active);\n}\n\n:host(.tab-group-host--on-strong) {\n --_tab-group-surface-border: var(--color-border-on-strong-background-tertiary);\n --_tab-group-divider: var(--color-border-on-strong-background-secondary);\n --_tab-group-selected-fill: var(--color-interaction-on-strong-background-active);\n}\n\n:host(.tab-group-host--on-translucent) {\n --_tab-group-surface-border: var(--color-translucent-border-tertiary);\n --_tab-group-divider: var(--color-translucent-border-secondary);\n --_tab-group-selected-fill: var(--color-translucent-interaction-active);\n}\n\n:host(.tab-group-host--on-inverted) {\n --_tab-group-surface-border: var(--color-inverted-border-tertiary);\n --_tab-group-divider: var(--color-inverted-border-secondary);\n --_tab-group-selected-fill: var(--color-inverted-interaction-active);\n}\n\n:host(.tab-group-host--on-media) {\n --_tab-group-surface-border: var(--color-media-border-tertiary);\n --_tab-group-divider: var(--color-media-border-secondary);\n --_tab-group-selected-fill: var(--color-media-interaction-active);\n}\n\n:host(.tab-group-host--on-always-dark) {\n --_tab-group-surface-border: var(--color-always-dark-border-tertiary);\n --_tab-group-divider: var(--color-always-dark-border-secondary);\n --_tab-group-selected-fill: var(--color-always-dark-interaction-active);\n}\n\n.tab-list {\n display: flex;\n align-items: center;\n gap: var(--ds-control-gap);\n position: relative;\n width: max-content;\n max-width: 100%;\n height: var(--ds-control-height);\n padding: calc(var(--dimension-space-025) - var(--dimension-stroke-width-012));\n background-color: var(--color-background-secondary);\n border: var(--dimension-stroke-width-012) solid var(--_tab-group-surface-border);\n border-radius: var(--dimension-radius-half);\n box-sizing: border-box;\n}\n\n:host(.ds-control-width--fill) .tab-list {\n width: 100%;\n}\n\n:host(.tab-group-host--surface) .tab-list {\n background-color: transparent;\n}\n\n:host(.tab-group-host--containerless) .tab-list {\n padding: 0;\n border: 0;\n background-color: transparent;\n}\n\n.tab {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--ds-control-gap);\n padding: 0 var(--ds-control-padding-inline);\n background-color: transparent;\n border: none;\n border-radius: var(--dimension-radius-half);\n cursor: default;\n -webkit-user-select: none;\n user-select: none;\n color: var(--color-foreground-secondary);\n transition: color var(--effect-motion-short-2);\n flex-shrink: 0;\n height: var(--ds-control-height);\n min-width: var(--ds-control-height);\n box-sizing: border-box;\n --_dot: var(--color-foreground-bold-brand);\n /* Hover/press: `.ds-interaction-fill` fills cover the complete segment. */\n}\n\n:host(.ds-control-width--fill) .tab {\n flex: 1 1 0;\n min-width: 0;\n overflow: hidden;\n}\n\n:host(.ds-control-width--fill) .tab__content {\n max-width: 100%;\n overflow: hidden;\n}\n\n:host(.ds-control-width--fill) .tab__label {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.tab--selected {\n color: var(--color-foreground-primary);\n background-color: var(--color-background-primary);\n /* Inset stroke on interaction-fill ::after — stays above hover wash. */\n --ds-interaction-border-width: var(--dimension-stroke-width-012);\n --ds-interaction-border-color: var(--_tab-group-surface-border);\n}\n\n:host(.tab-group-host--surface) .tab--selected {\n background-color: var(--_tab-group-selected-fill);\n}\n\n.tab--selected:not(.ds-interaction-fill) {\n box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity) — applied via class in TSX. */\n\n.tab__content {\n position: relative;\n z-index: 2;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--ds-control-gap);\n min-width: 0;\n}\n\n.tab__content--dot {\n padding-right: var(--dimension-space-050);\n}\n\n.tab__label {\n padding: 0 var(--ds-control-label-inset);\n white-space: nowrap;\n}\n\n.tab__icon {\n flex-shrink: 0;\n}\n\n.tab__dot {\n position: absolute;\n top: 0;\n right: 0;\n z-index: 2;\n pointer-events: none;\n}\n\n.on-medium {\n color: var(--color-foreground-on-medium-background-secondary);\n}\n\n.on-medium.tab--selected {\n color: var(--color-foreground-on-medium-background-primary);\n}\n\n.on-bold {\n color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-bold.tab--selected {\n color: var(--color-foreground-on-bold-background-primary);\n}\n\n.on-strong {\n color: var(--color-foreground-on-strong-background-secondary);\n}\n\n.on-strong.tab--selected {\n color: var(--color-foreground-on-strong-background-primary);\n}\n\n.on-translucent {\n color: var(--color-translucent-foreground-secondary);\n}\n\n.on-translucent.tab--selected {\n color: var(--color-translucent-foreground-primary);\n}\n\n.on-inverted {\n color: var(--color-inverted-foreground-secondary);\n}\n\n.on-inverted.tab--selected {\n color: var(--color-inverted-foreground-primary);\n}\n\n.on-media {\n color: var(--color-media-foreground-secondary);\n}\n\n.on-media.tab--selected {\n color: var(--color-media-foreground-primary);\n}\n\n.on-always-dark {\n color: var(--color-always-dark-foreground-secondary);\n}\n\n.on-always-dark.tab--selected {\n color: var(--color-always-dark-foreground-primary);\n}\n\n.tab-divider {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--dimension-stroke-width-012);\n align-self: center;\n padding: 0;\n flex-shrink: 0;\n pointer-events: none;\n}\n\n.tab-divider__line {\n width: var(--dimension-stroke-width-012);\n height: var(--typography-lineheight-sm);\n flex-shrink: 0;\n background-color: var(--_tab-group-divider);\n}\n","import {\n Component,\n Prop,\n Event,\n EventEmitter,\n Element,\n Listen,\n Watch,\n h,\n Host,\n} from '@stencil/core';\nimport { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';\nimport {\n getSelectableTabs,\n isTabDivider,\n type TabGroupItem,\n type TabItemTab,\n} from './tab-item-utils';\n\nexport type TabBackground =\n | 'faint'\n | 'medium'\n | 'bold'\n | 'strong'\n | 'translucent'\n | 'inverted'\n | 'media'\n | 'always-dark';\n\nexport type TabGroupSize = 'sm' | 'md' | 'lg';\nexport type TabGroupWidth = ControlWidth;\n\n@Component({\n tag: 'ds-tab-group',\n styleUrl: 'TabGroup.css',\n scoped: true,\n})\nexport class TabGroup {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) value: string = '';\n @Prop() tabs: TabGroupItem[] = [];\n /** Control density: 24px small, 32px medium, or 40px large track. */\n @Prop() size: TabGroupSize = 'md';\n /** Width fit — hug content (default) or fill the parent with equal-width segments. */\n @Prop() width: TabGroupWidth = 'hug';\n /** Show the segmented control's outer background, border, and inset. */\n @Prop() hasContainer: boolean = true;\n @Prop() background: TabBackground | undefined;\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n @Event() dsChange!: EventEmitter<string>;\n\n private get selectableTabs(): TabItemTab[] {\n return getSelectableTabs(this.tabs);\n }\n\n private get focusableTabId(): string {\n return this.selectableTabs.some(tab => tab.id === this.value && !tab.isInactive)\n ? this.value\n : (this.selectableTabs.find(tab => !tab.isInactive)?.id ?? '');\n }\n\n private selectTab(id: string, options?: { focus?: boolean }) {\n this.value = id;\n this.dsChange.emit(id);\n if (options?.focus !== false) {\n this.focusTab(id);\n }\n }\n\n private focusTab(id: string) {\n const btn = this.el.querySelector(`[data-tab-id=\"${id}\"]`) as HTMLElement | null;\n btn?.focus({ preventScroll: true });\n }\n\n /** Keep focus on the selected tab when value changes externally (e.g. BarNav menu). */\n @Watch('value')\n onValueChange(next: string, prev: string | undefined) {\n if (prev === undefined || next === prev) return;\n\n requestAnimationFrame(() => {\n const active = document.activeElement as HTMLElement | null;\n if (!active || !this.el.contains(active)) return;\n\n const activeId = active.getAttribute('data-tab-id');\n if (activeId === next) return;\n\n const focusId = this.selectableTabs.some(tab => tab.id === next && !tab.isInactive)\n ? next\n : this.focusableTabId;\n const nextTab = this.el.querySelector(`[data-tab-id=\"${focusId}\"]`) as HTMLElement | null;\n if (nextTab) {\n nextTab.focus({ preventScroll: true });\n } else {\n active.blur();\n }\n });\n }\n\n /**\n * Find the next non-inactive tab index relative to `from`, stepping by `step`.\n * Returns `from` unchanged if no other enabled tab exists.\n */\n private findEnabled(from: number, step: 1 | -1): number {\n const tabs = this.selectableTabs;\n const len = tabs.length;\n for (let n = 0; n < len; n++) {\n const i = (from + step * (n + 1) + len * (n + 1)) % len;\n if (!tabs[i]?.isInactive) return i;\n }\n return from;\n }\n\n @Listen('keydown')\n handleKeyDown(e: KeyboardEvent) {\n const tabs = this.selectableTabs;\n if (!tabs.length) return;\n\n const focusedId = (e.target as Element | null)?.closest<HTMLElement>('[data-tab-id]')?.dataset[\n 'tabId'\n ];\n const currentIdx = tabs.findIndex(t => t.id === (focusedId ?? this.focusableTabId));\n\n let nextIdx: number | null = null;\n\n if (e.key === 'ArrowRight') {\n nextIdx = this.findEnabled(currentIdx, 1);\n } else if (e.key === 'ArrowLeft') {\n nextIdx = this.findEnabled(currentIdx, -1);\n }\n\n if (e.key === 'Home') {\n const first = tabs.findIndex(t => !t.isInactive);\n nextIdx = first === -1 ? null : first;\n } else if (e.key === 'End') {\n const lastEnabled = [...tabs].reverse().findIndex(t => !t.isInactive);\n nextIdx = lastEnabled === -1 ? null : tabs.length - 1 - lastEnabled;\n }\n\n if (nextIdx !== null) {\n e.preventDefault();\n const next = tabs[nextIdx];\n this.selectTab(next.id);\n }\n }\n\n private getBgClass(): string {\n if (!this.background) return '';\n if (this.background === 'always-dark') return 'on-always-dark';\n return `on-${this.background}`;\n }\n\n render() {\n const bgClass = this.getBgClass();\n const focusableTabId = this.focusableTabId;\n\n return (\n <Host\n class={{\n 'tab-group-host': true,\n [`tab-group-host--${this.size}`]: true,\n [`ds-control--${this.size}`]: true,\n 'tab-group-host--containerless': !this.hasContainer,\n 'tab-group-host--surface': !!bgClass,\n [`tab-group-host--${bgClass}`]: !!bgClass,\n ...controlWidthClass(this.width),\n }}\n >\n <div\n role=\"tablist\"\n class=\"tab-list\"\n aria-label={this.ariaLabel}\n aria-labelledby={this.ariaLabelledby}\n >\n {this.tabs.map((tab, index) => {\n if (isTabDivider(tab)) {\n return (\n <div key={`divider-${index}`} class=\"tab-divider\" aria-hidden=\"true\">\n <div class=\"tab-divider__line\" />\n </div>\n );\n }\n\n const isSelected = tab.id === this.value;\n const variant = tab.variant ?? 'label';\n const showIcon = variant === 'icon' || variant === 'icon-label';\n const showLabel = variant === 'label' || variant === 'icon-label';\n const emphasizeLabel = isSelected && !bgClass;\n return (\n <button\n key={tab.id}\n type=\"button\"\n role=\"tab\"\n data-tab-id={tab.id}\n class={{\n tab: true,\n 'tab--selected': isSelected,\n [`ds-control--${this.size}`]: true,\n 'ds-control--inset': true,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': !tab.isInactive,\n 'ds-interaction-fill--on-faint': bgClass === 'on-faint',\n 'ds-interaction-fill--on-medium': bgClass === 'on-medium',\n 'ds-interaction-fill--on-bold': bgClass === 'on-bold',\n 'ds-interaction-fill--on-strong': bgClass === 'on-strong',\n 'ds-interaction-fill--on-translucent': bgClass === 'on-translucent',\n 'ds-interaction-fill--on-inverted': bgClass === 'on-inverted',\n 'ds-interaction-fill--on-media': bgClass === 'on-media',\n 'ds-interaction-fill--on-always-dark': bgClass === 'on-always-dark',\n 'ds-control-inactive': !!tab.isInactive,\n [bgClass]: !!bgClass,\n }}\n aria-label={variant === 'icon' ? tab.label : undefined}\n aria-selected={String(isSelected)}\n aria-disabled={tab.isInactive ? 'true' : undefined}\n aria-controls={tab.panelId ?? undefined}\n disabled={tab.isInactive}\n tabIndex={tab.id === focusableTabId ? 0 : -1}\n onClick={() => !tab.isInactive && this.selectTab(tab.id)}\n >\n <span\n class={{\n tab__content: true,\n [`tab__content--${variant}`]: true,\n 'tab__content--dot': !!tab.dot,\n }}\n >\n {showIcon && (\n <ds-icon class=\"tab__icon\" name={tab.icon} size={this.size} color=\"inherit\" />\n )}\n {showLabel && (\n <ds-text\n class=\"tab__label\"\n as=\"span\"\n variant={CONTROL_TEXT_VARIANT[this.size]}\n emphasis={emphasizeLabel}\n color=\"inherit\"\n >\n {tab.label}\n </ds-text>\n )}\n {tab.dot && (\n <ds-badge\n class=\"tab__dot\"\n variant=\"dot\"\n hasRing={false}\n label=\"\"\n aria-hidden=\"true\"\n />\n )}\n </span>\n </button>\n );\n })}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"4RAAA,MAAMA,EAAc,IAAM,0zpB,MCqCbC,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,+EAQ2BC,KAAAC,MAAgB,GACjCD,KAAAE,KAAuB,GAEvBF,KAAAG,KAAqB,KAErBH,KAAAI,MAAuB,MAEvBJ,KAAAK,aAAwB,KAEGL,KAAAM,UAA2B,IAmN/D,CA9MC,kBAAYC,GACV,OAAOC,EAAkBR,KAAKE,K,CAGhC,kBAAYO,GACV,OAAOT,KAAKO,eAAeG,MAAKC,GAAOA,EAAIC,KAAOZ,KAAKC,QAAUU,EAAIE,aACjEb,KAAKC,MACJD,KAAKO,eAAeO,MAAKH,IAAQA,EAAIE,cAAaD,IAAM,E,CAGvD,SAAAG,CAAUH,EAAYI,GAC5BhB,KAAKC,MAAQW,EACbZ,KAAKiB,SAASC,KAAKN,GACnB,GAAII,GAASG,QAAU,MAAO,CAC5BnB,KAAKoB,SAASR,E,EAIV,QAAAQ,CAASR,GACf,MAAMS,EAAMrB,KAAKsB,GAAGC,cAAc,iBAAiBX,OACnDS,GAAKF,MAAM,CAAEK,cAAe,M,CAK9B,aAAAC,CAAcC,EAAcC,GAC1B,GAAIA,IAASC,WAAaF,IAASC,EAAM,OAEzCE,uBAAsB,KACpB,MAAMC,EAASC,SAASC,cACxB,IAAKF,IAAW9B,KAAKsB,GAAGW,SAASH,GAAS,OAE1C,MAAMI,EAAWJ,EAAOK,aAAa,eACrC,GAAID,IAAaR,EAAM,OAEvB,MAAMU,EAAUpC,KAAKO,eAAeG,MAAKC,GAAOA,EAAIC,KAAOc,IAASf,EAAIE,aACpEa,EACA1B,KAAKS,eACT,MAAM4B,EAAUrC,KAAKsB,GAAGC,cAAc,iBAAiBa,OACvD,GAAIC,EAAS,CACXA,EAAQlB,MAAM,CAAEK,cAAe,M,KAC1B,CACLM,EAAOQ,M,KASL,WAAAC,CAAYC,EAAcC,GAChC,MAAMvC,EAAOF,KAAKO,eAClB,MAAMmC,EAAMxC,EAAKyC,OACjB,IAAK,IAAIC,EAAI,EAAGA,EAAIF,EAAKE,IAAK,CAC5B,MAAMC,GAAKL,EAAOC,GAAQG,EAAI,GAAKF,GAAOE,EAAI,IAAMF,EACpD,IAAKxC,EAAK2C,IAAIhC,WAAY,OAAOgC,C,CAEnC,OAAOL,C,CAIT,aAAAM,CAAcC,GACZ,MAAM7C,EAAOF,KAAKO,eAClB,IAAKL,EAAKyC,OAAQ,OAElB,MAAMK,EAAaD,EAAEE,QAA2BC,QAAqB,kBAAkBC,QACrF,SAEF,MAAMC,EAAalD,EAAKmD,WAAUC,GAAKA,EAAE1C,MAAQoC,GAAahD,KAAKS,kBAEnE,IAAI8C,EAAyB,KAE7B,GAAIR,EAAES,MAAQ,aAAc,CAC1BD,EAAUvD,KAAKuC,YAAYa,EAAY,E,MAClC,GAAIL,EAAES,MAAQ,YAAa,CAChCD,EAAUvD,KAAKuC,YAAYa,GAAY,E,CAGzC,GAAIL,EAAES,MAAQ,OAAQ,CACpB,MAAMC,EAAQvD,EAAKmD,WAAUC,IAAMA,EAAEzC,aACrC0C,EAAUE,KAAU,EAAK,KAAOA,C,MAC3B,GAAIV,EAAES,MAAQ,MAAO,CAC1B,MAAME,EAAc,IAAIxD,GAAMyD,UAAUN,WAAUC,IAAMA,EAAEzC,aAC1D0C,EAAUG,KAAgB,EAAK,KAAOxD,EAAKyC,OAAS,EAAIe,C,CAG1D,GAAIH,IAAY,KAAM,CACpBR,EAAEa,iBACF,MAAMlC,EAAOxB,EAAKqD,GAClBvD,KAAKe,UAAUW,EAAKd,G,EAIhB,UAAAiD,GACN,IAAK7D,KAAK8D,WAAY,MAAO,GAC7B,GAAI9D,KAAK8D,aAAe,cAAe,MAAO,iBAC9C,MAAO,MAAM9D,KAAK8D,Y,CAGpB,MAAAC,GACE,MAAMC,EAAUhE,KAAK6D,aACrB,MAAMpD,EAAiBT,KAAKS,eAE5B,OACEwD,EAACC,EAAI,CAAAV,IAAA,2CACHW,MAAO,CACL,iBAAkB,KAClB,CAAC,mBAAmBnE,KAAKG,QAAS,KAClC,CAAC,eAAeH,KAAKG,QAAS,KAC9B,iCAAkCH,KAAKK,aACvC,4BAA6B2D,EAC7B,CAAC,mBAAmBA,OAAcA,KAC/BI,EAAkBpE,KAAKI,SAG5B6D,EAAA,OAAAT,IAAA,2CACEa,KAAK,UACLF,MAAM,WAAU,aACJnE,KAAKM,UAAS,kBACTN,KAAKsE,gBAErBtE,KAAKE,KAAKqE,KAAI,CAAC5D,EAAK6D,KACnB,GAAIC,EAAa9D,GAAM,CACrB,OACEsD,EAAA,OAAKT,IAAK,WAAWgB,IAASL,MAAM,cAAa,cAAa,QAC5DF,EAAA,OAAKE,MAAM,sB,CAKjB,MAAMO,EAAa/D,EAAIC,KAAOZ,KAAKC,MACnC,MAAM0E,EAAUhE,EAAIgE,SAAW,QAC/B,MAAMC,EAAWD,IAAY,QAAUA,IAAY,aACnD,MAAME,EAAYF,IAAY,SAAWA,IAAY,aACrD,MAAMG,EAAiBJ,IAAeV,EACtC,OACEC,EAAA,UACET,IAAK7C,EAAIC,GACTmE,KAAK,SACLV,KAAK,MAAK,cACG1D,EAAIC,GACjBuD,MAAO,CACLxD,IAAK,KACL,gBAAiB+D,EACjB,CAAC,eAAe1E,KAAKG,QAAS,KAC9B,oBAAqB,KACrB,sBAAuB,KACvB,uBAAwBQ,EAAIE,WAC5B,gCAAiCmD,IAAY,WAC7C,iCAAkCA,IAAY,YAC9C,+BAAgCA,IAAY,UAC5C,iCAAkCA,IAAY,YAC9C,sCAAuCA,IAAY,iBACnD,mCAAoCA,IAAY,cAChD,gCAAiCA,IAAY,WAC7C,sCAAuCA,IAAY,iBACnD,wBAAyBrD,EAAIE,WAC7BmD,CAACA,KAAYA,GACd,aACWW,IAAY,OAAShE,EAAIqE,MAAQpD,UAAS,gBACvCqD,OAAOP,GAAW,gBAClB/D,EAAIE,WAAa,OAASe,UAAS,gBACnCjB,EAAIuE,SAAWtD,UAC9BuD,SAAUxE,EAAIE,WACduE,SAAUzE,EAAIC,KAAOH,EAAiB,GAAI,EAC1C4E,QAAS,KAAO1E,EAAIE,YAAcb,KAAKe,UAAUJ,EAAIC,KAErDqD,EAAA,QACEE,MAAO,CACLmB,aAAc,KACd,CAAC,iBAAiBX,KAAY,KAC9B,sBAAuBhE,EAAI4E,MAG5BX,GACCX,EAAA,WAASE,MAAM,YAAYqB,KAAM7E,EAAI8E,KAAMtF,KAAMH,KAAKG,KAAMuF,MAAM,YAEnEb,GACCZ,EAAA,WACEE,MAAM,aACNwB,GAAG,OACHhB,QAASiB,EAAqB5F,KAAKG,MACnC0F,SAAUf,EACVY,MAAM,WAEL/E,EAAIqE,OAGRrE,EAAI4E,KACHtB,EAAA,YACEE,MAAM,WACNQ,QAAQ,MACRmB,QAAS,MACTd,MAAM,GAAE,cACI,UAIX,K","ignoreList":[]}
@@ -1,2 +1,2 @@
1
- import{p as t,H as o,c as n,h as i,a as d,t as e}from"./index.js";import{b as s,r}from"./p-DZ58Sg5a.js";import{d as l}from"./p-caLOcQUK.js";import{d as c}from"./p-Cea7rROU.js";import{d as a}from"./p-0XTyQNRG.js";import{d as u}from"./p-B-HsfQOK.js";import{c as f}from"./p-DuFm-ieS.js";const b=()=>`@media (forced-colors: active){.sc-ds-button-filled:root,.sc-ds-button-filled-h,.ds-forced-colors-scope.sc-ds-button-filled{--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-filled-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-filled-h,.ds-focus-ring.sc-ds-button-filled,.ds-focus-ring-inset.sc-ds-button-filled-h,.ds-focus-ring-inset.sc-ds-button-filled{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-button-filled-h:focus-visible,.ds-focus-ring.sc-ds-button-filled: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-filled-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-button-filled{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-filled-h:focus-visible,.ds-focus-ring-inset.sc-ds-button-filled:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-filled-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-button-filled: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-filled-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled::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-filled-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-button-filled:root,.sc-ds-button-filled-h,.ds-forced-colors-scope.sc-ds-button-filled{--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-filled:root,.sc-ds-button-filled-h,.ds-forced-colors-scope.sc-ds-button-filled{--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-filled-h,.ds-interaction-fill.sc-ds-button-filled{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-filled-h::before,.ds-interaction-fill.sc-ds-button-filled::before,.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-button-filled-h::before,.ds-interaction-fill.sc-ds-button-filled::before{z-index:1}.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::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-filled-h,.ds-interaction-fill--bordered.sc-ds-button-filled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-button-filled-h::before,.ds-interaction-fill--selected.sc-ds-button-filled::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-button-filled-h,.ds-interaction-fill--selected.sc-ds-button-filled{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-button-filled-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-filled:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-button-filled-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-filled:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-button-filled-h::after,.ds-interaction-fill--grouped.sc-ds-button-filled::after,.ds-interaction-fill--grouped.sc-ds-button-filled-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-button-filled:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-button-filled-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-button-filled:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-button-filled-h,.ds-interaction-fill--grouped.sc-ds-button-filled{--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-filled-h>.ds-interaction-fill__content.sc-ds-button-filled,.ds-interaction-fill.sc-ds-button-filled>.ds-interaction-fill__content.sc-ds-button-filled,.ds-interaction-fill__content.sc-ds-button-filled{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-button-filled-h,.ds-interaction-fill--on-faint.sc-ds-button-filled{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-button-filled-h,.ds-interaction-fill--on-medium.sc-ds-button-filled{--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-filled-h,.ds-interaction-fill--on-bold.sc-ds-button-filled{--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-filled-h,.ds-interaction-fill--on-strong.sc-ds-button-filled{--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-filled-h,.ds-interaction-fill--on-translucent.sc-ds-button-filled{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-button-filled-h,.ds-interaction-fill--on-inverted.sc-ds-button-filled{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-button-filled-h,.ds-interaction-fill--on-media.sc-ds-button-filled{--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-filled-h,.ds-interaction-fill--on-always-dark.sc-ds-button-filled{--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-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-button-filled-h,.ds-interaction-fill--on-navigation.sc-ds-button-filled{--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-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::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-filled-h::before,.ds-interaction-fill--selected.sc-ds-button-filled::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-filled-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-button-filled: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-filled{transition:scale var(--effect-motion-short-2)}.ds-control-press-scale.sc-ds-button-filled: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-filled,.ds-control-press-scale.sc-ds-button-filled:active:not(:disabled):not(.ds-control-inactive):not([aria-busy='true']){scale:none;transition:none}}@media (forced-colors: active){.sc-ds-button-filled:root,.sc-ds-button-filled-h,.ds-forced-colors-scope.sc-ds-button-filled{--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-filled-h,.ds-control-inactive.sc-ds-button-filled{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-button-filled-h,.ds-control-inactive.sc-ds-button-filled{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-button-filled,.ds-control--lg.sc-ds-button-filled-h,.ds-control--md.sc-ds-button-filled-h,.ds-control--md.sc-ds-button-filled,.ds-control--sm.sc-ds-button-filled-h,.ds-control--sm.sc-ds-button-filled,.ds-control--xs.sc-ds-button-filled-h,.ds-control--xs.sc-ds-button-filled{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-button-filled-h,.ds-control--lg.sc-ds-button-filled{--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-filled-h,.ds-control--md.sc-ds-button-filled{--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-filled-h,.ds-control--sm.sc-ds-button-filled{--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-filled-h,.ds-control--xs.sc-ds-button-filled{--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-filled-h,.ds-control--lg.ds-control--inset.sc-ds-button-filled{--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-filled-h,.ds-control--md.ds-control--inset.sc-ds-button-filled{--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-filled-h,.ds-control--sm.ds-control--inset.sc-ds-button-filled{--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-filled-h,.ds-control--xs.ds-control--inset.sc-ds-button-filled{--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-filled-h,.ds-control--lg.ds-control--inset-double.sc-ds-button-filled{--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-filled-h,.ds-control--md.ds-control--inset-double.sc-ds-button-filled{--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-filled-h,.ds-control--sm.ds-control--inset-double.sc-ds-button-filled{--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-filled{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-filled{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-filled{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-filled{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-button-filled{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-filled{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}.ds-control-width--hug.sc-ds-button-filled-h,.ds-control-width--hug.sc-ds-button-filled{width:fit-content;max-width:100%;flex:0 0 auto}.ds-control-width--fill.sc-ds-button-filled-h,.ds-control-width--fill.sc-ds-button-filled{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.sc-ds-button-filled-h{display:inline-flex;outline:none}.ds-button-host--icon.ds-control-width--hug.sc-ds-button-filled-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-filled-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-filled-h .ds-button.sc-ds-button-filled{width:100%}.ds-button.sc-ds-button-filled{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-filled{width:100%;height:100%;padding:0}.ds-button--rounded.sc-ds-button-filled{--ds-control-radius:var(--dimension-radius-half)}.ds-button--expanded.sc-ds-button-filled{--ds-interaction-hover:var(--ds-interaction-pressed)}.ds-button--expanded.sc-ds-button-filled::after{background:var(--ds-interaction-pressed)}.ds-button--bordered.sc-ds-button-filled{--ds-interaction-border-width:var(--dimension-stroke-width-012)}.ds-button--bordered.sc-ds-button-filled: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-filled,.ds-button__label.sc-ds-button-filled,.ds-button__chevron.sc-ds-button-filled{position:relative;z-index:2}.ds-button__label.sc-ds-button-filled{flex-shrink:0;min-width:0;white-space:nowrap}.ds-button__label--loading.sc-ds-button-filled,.ds-button__chevron--loading.sc-ds-button-filled{visibility:hidden}.ds-button.sc-ds-button-filled>.ds-button__loader-overlay.sc-ds-button-filled{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}.ds-button__dot.sc-ds-button-filled{position:absolute;top:0;right:0;z-index:2;pointer-events:none}@media (forced-colors: active){.ds-button.sc-ds-button-filled{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-filled-h{--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand);--ds-button-filled-border:var(--color-border-secondary)}.button-filled.sc-ds-button-filled{background-color:var(--ds-button-filled-bg);color:var(--ds-button-filled-fg);transition:background-color var(--effect-motion-short-2), color var(--effect-motion-short-2)}.button-filled--bordered.sc-ds-button-filled{--ds-interaction-border-color:var(--ds-button-filled-border)}.button-filled--background-medium.sc-ds-button-filled{--ds-button-filled-border:var(--color-border-on-medium-background-secondary)}.button-filled--background-bold.sc-ds-button-filled{--ds-button-filled-border:var(--color-border-on-bold-background-secondary)}.button-filled--background-strong.sc-ds-button-filled{--ds-button-filled-border:var(--color-border-on-strong-background-secondary)}.button-filled--background-translucent.sc-ds-button-filled{--ds-button-filled-border:var(--color-translucent-border-secondary)}.button-filled--background-inverted.sc-ds-button-filled{--ds-button-filled-border:var(--color-inverted-border-secondary)}.button-filled--background-media.sc-ds-button-filled{--ds-button-filled-border:var(--color-media-border-secondary)}.button-filled--background-always-dark.sc-ds-button-filled{--ds-button-filled-border:var(--color-always-dark-border-secondary)}.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-neutral);--ds-button-filled-fg:var(--color-foreground-faint-neutral)}.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand)}.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-ai);--ds-button-filled-fg:var(--color-foreground-faint-ai)}.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-negative);--ds-button-filled-fg:var(--color-foreground-faint-negative)}.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-warning);--ds-button-filled-fg:var(--color-foreground-faint-warning)}.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-caution);--ds-button-filled-fg:var(--color-foreground-faint-caution)}.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-positive);--ds-button-filled-fg:var(--color-foreground-faint-positive)}.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-guide);--ds-button-filled-fg:var(--color-foreground-faint-guide)}.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-walkthrough);--ds-button-filled-fg:var(--color-foreground-faint-walkthrough)}.button-filled--contrast-strong.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-neutral);--ds-button-filled-fg:var(--color-foreground-medium-neutral)}.button-filled--contrast-strong.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-brand);--ds-button-filled-fg:var(--color-foreground-medium-brand)}.button-filled--contrast-strong.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-ai);--ds-button-filled-fg:var(--color-foreground-medium-ai)}.button-filled--contrast-strong.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-negative);--ds-button-filled-fg:var(--color-foreground-medium-negative)}.button-filled--contrast-strong.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-warning);--ds-button-filled-fg:var(--color-foreground-medium-warning)}.button-filled--contrast-strong.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-caution);--ds-button-filled-fg:var(--color-foreground-medium-caution)}.button-filled--contrast-strong.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-positive);--ds-button-filled-fg:var(--color-foreground-medium-positive)}.button-filled--contrast-strong.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-guide);--ds-button-filled-fg:var(--color-foreground-medium-guide)}.button-filled--contrast-strong.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-walkthrough);--ds-button-filled-fg:var(--color-foreground-medium-walkthrough)}.button-filled--contrast-medium.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-neutral);--ds-button-filled-fg:var(--color-foreground-strong-neutral)}.button-filled--contrast-medium.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-brand);--ds-button-filled-fg:var(--color-foreground-strong-brand)}.button-filled--contrast-medium.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-ai);--ds-button-filled-fg:var(--color-foreground-strong-ai)}.button-filled--contrast-medium.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-negative);--ds-button-filled-fg:var(--color-foreground-strong-negative)}.button-filled--contrast-medium.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-warning);--ds-button-filled-fg:var(--color-foreground-strong-warning)}.button-filled--contrast-medium.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-caution);--ds-button-filled-fg:var(--color-foreground-strong-caution)}.button-filled--contrast-medium.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-positive);--ds-button-filled-fg:var(--color-foreground-strong-positive)}.button-filled--contrast-medium.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-guide);--ds-button-filled-fg:var(--color-foreground-strong-guide)}.button-filled--contrast-medium.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-walkthrough);--ds-button-filled-fg:var(--color-foreground-strong-walkthrough)}.button-filled--contrast-faint.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-neutral);--ds-button-filled-fg:var(--color-foreground-bold-neutral)}.button-filled--contrast-faint.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-brand);--ds-button-filled-fg:var(--color-foreground-bold-brand)}.button-filled--contrast-faint.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-ai);--ds-button-filled-fg:var(--color-foreground-bold-ai)}.button-filled--contrast-faint.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-negative);--ds-button-filled-fg:var(--color-foreground-bold-negative)}.button-filled--contrast-faint.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-warning);--ds-button-filled-fg:var(--color-foreground-bold-warning)}.button-filled--contrast-faint.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-caution);--ds-button-filled-fg:var(--color-foreground-bold-caution)}.button-filled--contrast-faint.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-positive);--ds-button-filled-fg:var(--color-foreground-bold-positive)}.button-filled--contrast-faint.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-guide);--ds-button-filled-fg:var(--color-foreground-bold-guide)}.button-filled--contrast-faint.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-walkthrough);--ds-button-filled-fg:var(--color-foreground-bold-walkthrough)}.button-filled--contrast-bold.button-filled.sc-ds-button-filled{--ds-button-filled-fg:var(--color-foreground-on-bold-background-primary)}.button-filled--contrast-strong.button-filled.sc-ds-button-filled{--ds-button-filled-fg:var(--color-foreground-on-strong-background-primary)}.button-filled--contrast-medium.button-filled.sc-ds-button-filled{--ds-button-filled-fg:var(--color-foreground-on-medium-background-primary)}`;const g=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsClick=n(this,"dsClick",7);this.variant="label";this.size="md";this.isInset=false;this.insetDepth="single";this.width="hug";this.label="";this.labelEmphasis=true;this.icon="";this.intent="brand";this.contrast="bold";this.hasBorder=false;this.rounded=false;this.pressScale=true;this.isInactive=false;this.isLoading=false;this.type="button";this.ariaLabel=null;this.hasMenu=false;this.buttonEl=null;this.handleClick=t=>{if(this.isInactive||this.isLoading){t.preventDefault();t.stopPropagation();return}this.dsClick.emit(t)}}async setFocus(){this.buttonEl?.focus()}get resolvedHaspopup(){return this.haspopup??(this.hasMenu?"menu":undefined)}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.isLoading&&this.variant==="label"&&this.label)return this.label;return undefined}get doubleInset(){return this.isInset&&this.insetDepth==="double"&&this.size!=="xs"}render(){const t={"button-filled":true,"ds-button":true,"ds-focus-ring-inset":true,"ds-control-press-scale":this.pressScale,"ds-interaction-fill":!this.isInactive,"ds-interaction-fill--on-bold":this.contrast==="bold","ds-interaction-fill--on-strong":this.contrast==="strong","ds-interaction-fill--on-medium":this.contrast==="medium","button-filled--bordered":this.hasBorder,"ds-button--bordered":this.hasBorder,"button-filled--expanded":this.expanded===true&&!this.isInactive,"ds-button--expanded":this.expanded===true&&!this.isInactive,"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-filled--icon":this.variant==="icon","ds-button--icon":this.variant==="icon","button-filled--label":this.variant==="label","button-filled--icon-label":this.variant==="icon-label","button-filled--rounded":this.rounded,"ds-button--rounded":this.rounded,[`button-filled--background-${this.background}`]:this.background!==undefined,[`button-filled--intent-${this.intent}`]:true,[`button-filled--contrast-${this.contrast}`]:true};return i(d,{key:"05f36b8373f1110c1ac577531e1a5b802fb75661",class:{"button-filled-host":true,"button-filled-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,...f(this.width)},tabIndex:-1},i("button",{key:"a6edbb804921183aadb444a9ec3b40175b312a27",ref:t=>{this.buttonEl=t??null},type:this.type,class:t,disabled:this.isInactive,"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,onPointerDown:t=>s(t,this.pressScale&&!this.isInactive&&!this.isLoading),onClick:this.handleClick},r({namespace:"button-filled",variant:this.variant,size:this.size,label:this.label,labelEmphasis:this.labelEmphasis,icon:this.icon,hasMenu:this.hasMenu,isLoading:this.isLoading})))}get el(){return this}static get style(){return b()}},[2,"ds-button-filled",{variant:[1],size:[1],isInset:[4,"is-inset"],insetDepth:[1,"inset-depth"],width:[1],label:[1],labelEmphasis:[4,"label-emphasis"],icon:[1],intent:[1],contrast:[1],hasBorder:[4,"has-border"],background:[1],rounded:[4],pressScale:[4,"press-scale"],isInactive:[4,"is-inactive"],isLoading:[4,"is-loading"],type:[1],ariaLabel:[1,"aria-label"],controls:[1],expanded:[4],haspopup:[1],hasMenu:[4,"has-menu"],setFocus:[64]}]);function v(){if(typeof customElements==="undefined"){return}const t=["ds-button-filled","ds-badge","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-button-filled":if(!customElements.get(e(t))){customElements.define(e(t),g)}break;case"ds-badge":if(!customElements.get(e(t))){l()}break;case"ds-icon":if(!customElements.get(e(t))){c()}break;case"ds-loader":if(!customElements.get(e(t))){a()}break;case"ds-text":if(!customElements.get(e(t))){u()}break}}))}v();export{g as B,v as d};
2
- //# sourceMappingURL=p-DW5Ita-P.js.map
1
+ import{p as t,H as o,c as n,h as i,a as d,t as e}from"./index.js";import{b as s,r}from"./p-DZ58Sg5a.js";import{d as l}from"./p-DzPtYdXy.js";import{d as c}from"./p-Cea7rROU.js";import{d as a}from"./p-0XTyQNRG.js";import{d as u}from"./p-Cd1JnnVK.js";import{c as f}from"./p-DuFm-ieS.js";const b=()=>`@media (forced-colors: active){.sc-ds-button-filled:root,.sc-ds-button-filled-h,.ds-forced-colors-scope.sc-ds-button-filled{--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-filled-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-filled-h,.ds-focus-ring.sc-ds-button-filled,.ds-focus-ring-inset.sc-ds-button-filled-h,.ds-focus-ring-inset.sc-ds-button-filled{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-button-filled-h:focus-visible,.ds-focus-ring.sc-ds-button-filled: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-filled-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-button-filled{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-filled-h:focus-visible,.ds-focus-ring-inset.sc-ds-button-filled:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-filled-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-button-filled: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-filled-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled::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-filled-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-button-filled:root,.sc-ds-button-filled-h,.ds-forced-colors-scope.sc-ds-button-filled{--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-filled:root,.sc-ds-button-filled-h,.ds-forced-colors-scope.sc-ds-button-filled{--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-filled-h,.ds-interaction-fill.sc-ds-button-filled{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-filled-h::before,.ds-interaction-fill.sc-ds-button-filled::before,.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-button-filled-h::before,.ds-interaction-fill.sc-ds-button-filled::before{z-index:1}.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::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-filled-h,.ds-interaction-fill--bordered.sc-ds-button-filled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-button-filled-h::before,.ds-interaction-fill--selected.sc-ds-button-filled::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-button-filled-h,.ds-interaction-fill--selected.sc-ds-button-filled{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-button-filled-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-filled:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-button-filled-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-filled:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-button-filled-h::after,.ds-interaction-fill--grouped.sc-ds-button-filled::after,.ds-interaction-fill--grouped.sc-ds-button-filled-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-button-filled:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-button-filled-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-button-filled:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-button-filled-h,.ds-interaction-fill--grouped.sc-ds-button-filled{--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-filled-h>.ds-interaction-fill__content.sc-ds-button-filled,.ds-interaction-fill.sc-ds-button-filled>.ds-interaction-fill__content.sc-ds-button-filled,.ds-interaction-fill__content.sc-ds-button-filled{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-button-filled-h,.ds-interaction-fill--on-faint.sc-ds-button-filled{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-button-filled-h,.ds-interaction-fill--on-medium.sc-ds-button-filled{--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-filled-h,.ds-interaction-fill--on-bold.sc-ds-button-filled{--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-filled-h,.ds-interaction-fill--on-strong.sc-ds-button-filled{--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-filled-h,.ds-interaction-fill--on-translucent.sc-ds-button-filled{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-button-filled-h,.ds-interaction-fill--on-inverted.sc-ds-button-filled{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-button-filled-h,.ds-interaction-fill--on-media.sc-ds-button-filled{--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-filled-h,.ds-interaction-fill--on-always-dark.sc-ds-button-filled{--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-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-button-filled-h,.ds-interaction-fill--on-navigation.sc-ds-button-filled{--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-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::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-filled-h::before,.ds-interaction-fill--selected.sc-ds-button-filled::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-filled-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-button-filled: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-filled{transition:scale var(--effect-motion-short-2)}.ds-control-press-scale.sc-ds-button-filled: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-filled,.ds-control-press-scale.sc-ds-button-filled:active:not(:disabled):not(.ds-control-inactive):not([aria-busy='true']){scale:none;transition:none}}@media (forced-colors: active){.sc-ds-button-filled:root,.sc-ds-button-filled-h,.ds-forced-colors-scope.sc-ds-button-filled{--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-filled-h,.ds-control-inactive.sc-ds-button-filled{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-button-filled-h,.ds-control-inactive.sc-ds-button-filled{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-button-filled,.ds-control--lg.sc-ds-button-filled-h,.ds-control--md.sc-ds-button-filled-h,.ds-control--md.sc-ds-button-filled,.ds-control--sm.sc-ds-button-filled-h,.ds-control--sm.sc-ds-button-filled,.ds-control--xs.sc-ds-button-filled-h,.ds-control--xs.sc-ds-button-filled{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-button-filled-h,.ds-control--lg.sc-ds-button-filled{--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-filled-h,.ds-control--md.sc-ds-button-filled{--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-filled-h,.ds-control--sm.sc-ds-button-filled{--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-filled-h,.ds-control--xs.sc-ds-button-filled{--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-filled-h,.ds-control--lg.ds-control--inset.sc-ds-button-filled{--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-filled-h,.ds-control--md.ds-control--inset.sc-ds-button-filled{--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-filled-h,.ds-control--sm.ds-control--inset.sc-ds-button-filled{--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-filled-h,.ds-control--xs.ds-control--inset.sc-ds-button-filled{--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-filled-h,.ds-control--lg.ds-control--inset-double.sc-ds-button-filled{--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-filled-h,.ds-control--md.ds-control--inset-double.sc-ds-button-filled{--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-filled-h,.ds-control--sm.ds-control--inset-double.sc-ds-button-filled{--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-filled{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-filled{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-filled{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-filled{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-button-filled{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-filled{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}.ds-control-width--hug.sc-ds-button-filled-h,.ds-control-width--hug.sc-ds-button-filled{width:fit-content;max-width:100%;flex:0 0 auto}.ds-control-width--fill.sc-ds-button-filled-h,.ds-control-width--fill.sc-ds-button-filled{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.sc-ds-button-filled-h{display:inline-flex;outline:none}.ds-button-host--icon.ds-control-width--hug.sc-ds-button-filled-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-filled-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-filled-h .ds-button.sc-ds-button-filled{width:100%}.ds-button.sc-ds-button-filled{justify-content:center;overflow:hidden;min-inline-size:var(--ds-control-height);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-filled{width:100%;height:100%;padding:0}.ds-button--rounded.sc-ds-button-filled{--ds-control-radius:var(--dimension-radius-half)}.ds-button--expanded.sc-ds-button-filled{--ds-interaction-hover:var(--ds-interaction-pressed)}.ds-button--expanded.sc-ds-button-filled::after{background:var(--ds-interaction-pressed)}.ds-button--bordered.sc-ds-button-filled{--ds-interaction-border-width:var(--dimension-stroke-width-012)}.ds-button--bordered.sc-ds-button-filled: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-filled,.ds-button__label.sc-ds-button-filled,.ds-button__chevron.sc-ds-button-filled{position:relative;z-index:2}.ds-button__label.sc-ds-button-filled{flex-shrink:0;min-width:0;white-space:nowrap}.ds-button__label--loading.sc-ds-button-filled,.ds-button__chevron--loading.sc-ds-button-filled{visibility:hidden}.ds-button.sc-ds-button-filled>.ds-button__loader-overlay.sc-ds-button-filled{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}.ds-button__dot.sc-ds-button-filled{position:absolute;top:0;right:0;z-index:2;pointer-events:none}@media (forced-colors: active){.ds-button.sc-ds-button-filled{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-filled-h{--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand);--ds-button-filled-border:var(--color-border-secondary)}.button-filled.sc-ds-button-filled{background-color:var(--ds-button-filled-bg);color:var(--ds-button-filled-fg);transition:background-color var(--effect-motion-short-2), color var(--effect-motion-short-2)}.button-filled--bordered.sc-ds-button-filled{--ds-interaction-border-color:var(--ds-button-filled-border)}.button-filled--background-medium.sc-ds-button-filled{--ds-button-filled-border:var(--color-border-on-medium-background-secondary)}.button-filled--background-bold.sc-ds-button-filled{--ds-button-filled-border:var(--color-border-on-bold-background-secondary)}.button-filled--background-strong.sc-ds-button-filled{--ds-button-filled-border:var(--color-border-on-strong-background-secondary)}.button-filled--background-translucent.sc-ds-button-filled{--ds-button-filled-border:var(--color-translucent-border-secondary)}.button-filled--background-inverted.sc-ds-button-filled{--ds-button-filled-border:var(--color-inverted-border-secondary)}.button-filled--background-media.sc-ds-button-filled{--ds-button-filled-border:var(--color-media-border-secondary)}.button-filled--background-always-dark.sc-ds-button-filled{--ds-button-filled-border:var(--color-always-dark-border-secondary)}.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-neutral);--ds-button-filled-fg:var(--color-foreground-faint-neutral)}.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand)}.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-ai);--ds-button-filled-fg:var(--color-foreground-faint-ai)}.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-negative);--ds-button-filled-fg:var(--color-foreground-faint-negative)}.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-warning);--ds-button-filled-fg:var(--color-foreground-faint-warning)}.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-caution);--ds-button-filled-fg:var(--color-foreground-faint-caution)}.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-positive);--ds-button-filled-fg:var(--color-foreground-faint-positive)}.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-guide);--ds-button-filled-fg:var(--color-foreground-faint-guide)}.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-walkthrough);--ds-button-filled-fg:var(--color-foreground-faint-walkthrough)}.button-filled--contrast-strong.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-neutral);--ds-button-filled-fg:var(--color-foreground-medium-neutral)}.button-filled--contrast-strong.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-brand);--ds-button-filled-fg:var(--color-foreground-medium-brand)}.button-filled--contrast-strong.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-ai);--ds-button-filled-fg:var(--color-foreground-medium-ai)}.button-filled--contrast-strong.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-negative);--ds-button-filled-fg:var(--color-foreground-medium-negative)}.button-filled--contrast-strong.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-warning);--ds-button-filled-fg:var(--color-foreground-medium-warning)}.button-filled--contrast-strong.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-caution);--ds-button-filled-fg:var(--color-foreground-medium-caution)}.button-filled--contrast-strong.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-positive);--ds-button-filled-fg:var(--color-foreground-medium-positive)}.button-filled--contrast-strong.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-guide);--ds-button-filled-fg:var(--color-foreground-medium-guide)}.button-filled--contrast-strong.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-walkthrough);--ds-button-filled-fg:var(--color-foreground-medium-walkthrough)}.button-filled--contrast-medium.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-neutral);--ds-button-filled-fg:var(--color-foreground-strong-neutral)}.button-filled--contrast-medium.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-brand);--ds-button-filled-fg:var(--color-foreground-strong-brand)}.button-filled--contrast-medium.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-ai);--ds-button-filled-fg:var(--color-foreground-strong-ai)}.button-filled--contrast-medium.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-negative);--ds-button-filled-fg:var(--color-foreground-strong-negative)}.button-filled--contrast-medium.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-warning);--ds-button-filled-fg:var(--color-foreground-strong-warning)}.button-filled--contrast-medium.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-caution);--ds-button-filled-fg:var(--color-foreground-strong-caution)}.button-filled--contrast-medium.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-positive);--ds-button-filled-fg:var(--color-foreground-strong-positive)}.button-filled--contrast-medium.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-guide);--ds-button-filled-fg:var(--color-foreground-strong-guide)}.button-filled--contrast-medium.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-walkthrough);--ds-button-filled-fg:var(--color-foreground-strong-walkthrough)}.button-filled--contrast-faint.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-neutral);--ds-button-filled-fg:var(--color-foreground-bold-neutral)}.button-filled--contrast-faint.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-brand);--ds-button-filled-fg:var(--color-foreground-bold-brand)}.button-filled--contrast-faint.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-ai);--ds-button-filled-fg:var(--color-foreground-bold-ai)}.button-filled--contrast-faint.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-negative);--ds-button-filled-fg:var(--color-foreground-bold-negative)}.button-filled--contrast-faint.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-warning);--ds-button-filled-fg:var(--color-foreground-bold-warning)}.button-filled--contrast-faint.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-caution);--ds-button-filled-fg:var(--color-foreground-bold-caution)}.button-filled--contrast-faint.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-positive);--ds-button-filled-fg:var(--color-foreground-bold-positive)}.button-filled--contrast-faint.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-guide);--ds-button-filled-fg:var(--color-foreground-bold-guide)}.button-filled--contrast-faint.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-walkthrough);--ds-button-filled-fg:var(--color-foreground-bold-walkthrough)}.button-filled--contrast-bold.button-filled.sc-ds-button-filled{--ds-button-filled-fg:var(--color-foreground-on-bold-background-primary)}.button-filled--contrast-strong.button-filled.sc-ds-button-filled{--ds-button-filled-fg:var(--color-foreground-on-strong-background-primary)}.button-filled--contrast-medium.button-filled.sc-ds-button-filled{--ds-button-filled-fg:var(--color-foreground-on-medium-background-primary)}`;const g=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsClick=n(this,"dsClick",7);this.variant="label";this.size="md";this.isInset=false;this.insetDepth="single";this.width="hug";this.label="";this.labelEmphasis=true;this.icon="";this.intent="brand";this.contrast="bold";this.hasBorder=false;this.rounded=false;this.pressScale=true;this.isInactive=false;this.isLoading=false;this.type="button";this.ariaLabel=null;this.hasMenu=false;this.buttonEl=null;this.handleClick=t=>{if(this.isInactive||this.isLoading){t.preventDefault();t.stopPropagation();return}this.dsClick.emit(t)}}async setFocus(){this.buttonEl?.focus()}get resolvedHaspopup(){return this.haspopup??(this.hasMenu?"menu":undefined)}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.isLoading&&this.variant==="label"&&this.label)return this.label;return undefined}get doubleInset(){return this.isInset&&this.insetDepth==="double"&&this.size!=="xs"}render(){const t={"button-filled":true,"ds-button":true,"ds-focus-ring-inset":true,"ds-control-press-scale":this.pressScale,"ds-interaction-fill":!this.isInactive,"ds-interaction-fill--on-bold":this.contrast==="bold","ds-interaction-fill--on-strong":this.contrast==="strong","ds-interaction-fill--on-medium":this.contrast==="medium","button-filled--bordered":this.hasBorder,"ds-button--bordered":this.hasBorder,"button-filled--expanded":this.expanded===true&&!this.isInactive,"ds-button--expanded":this.expanded===true&&!this.isInactive,"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-filled--icon":this.variant==="icon","ds-button--icon":this.variant==="icon","button-filled--label":this.variant==="label","button-filled--icon-label":this.variant==="icon-label","button-filled--rounded":this.rounded,"ds-button--rounded":this.rounded,[`button-filled--background-${this.background}`]:this.background!==undefined,[`button-filled--intent-${this.intent}`]:true,[`button-filled--contrast-${this.contrast}`]:true};return i(d,{key:"05f36b8373f1110c1ac577531e1a5b802fb75661",class:{"button-filled-host":true,"button-filled-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,...f(this.width)},tabIndex:-1},i("button",{key:"a6edbb804921183aadb444a9ec3b40175b312a27",ref:t=>{this.buttonEl=t??null},type:this.type,class:t,disabled:this.isInactive,"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,onPointerDown:t=>s(t,this.pressScale&&!this.isInactive&&!this.isLoading),onClick:this.handleClick},r({namespace:"button-filled",variant:this.variant,size:this.size,label:this.label,labelEmphasis:this.labelEmphasis,icon:this.icon,hasMenu:this.hasMenu,isLoading:this.isLoading})))}get el(){return this}static get style(){return b()}},[2,"ds-button-filled",{variant:[1],size:[1],isInset:[4,"is-inset"],insetDepth:[1,"inset-depth"],width:[1],label:[1],labelEmphasis:[4,"label-emphasis"],icon:[1],intent:[1],contrast:[1],hasBorder:[4,"has-border"],background:[1],rounded:[4],pressScale:[4,"press-scale"],isInactive:[4,"is-inactive"],isLoading:[4,"is-loading"],type:[1],ariaLabel:[1,"aria-label"],controls:[1],expanded:[4],haspopup:[1],hasMenu:[4,"has-menu"],setFocus:[64]}]);function v(){if(typeof customElements==="undefined"){return}const t=["ds-button-filled","ds-badge","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-button-filled":if(!customElements.get(e(t))){customElements.define(e(t),g)}break;case"ds-badge":if(!customElements.get(e(t))){l()}break;case"ds-icon":if(!customElements.get(e(t))){c()}break;case"ds-loader":if(!customElements.get(e(t))){a()}break;case"ds-text":if(!customElements.get(e(t))){u()}break}}))}v();export{g as B,v as d};
2
+ //# sourceMappingURL=p-BnTPuV3x.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["buttonFilledCss","ButtonFilled","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","isInset","insetDepth","width","label","labelEmphasis","icon","intent","contrast","hasBorder","rounded","pressScale","isInactive","isLoading","type","ariaLabel","hasMenu","buttonEl","handleClick","event","preventDefault","stopPropagation","dsClick","emit","setFocus","focus","resolvedHaspopup","haspopup","undefined","accessibleName","doubleInset","render","cls","expanded","background","h","Host","key","class","controlWidthClass","tabIndex","ref","el","disabled","controls","String","onPointerDown","beginElevatedControlPress","onClick","renderButtonContent","namespace"],"sources":["src/wc/components/ButtonFilled/ButtonFilled.css?tag=ds-button-filled&encapsulation=scoped","src/wc/components/ButtonFilled/ButtonFilled.tsx"],"sourcesContent":["@import '../../utils/button-base.css';\n\n:host {\n --ds-button-filled-bg: var(--color-background-bold-brand);\n --ds-button-filled-fg: var(--color-foreground-faint-brand);\n --ds-button-filled-border: var(--color-border-secondary);\n}\n\n.button-filled {\n background-color: var(--ds-button-filled-bg);\n color: var(--ds-button-filled-fg);\n transition:\n background-color var(--effect-motion-short-2),\n color var(--effect-motion-short-2);\n /* Hover/press: `.ds-interaction-fill` + contrast → `--on-*` (token overlay, not color-mix). */\n}\n\n/*\n * An open popup is a transient pressed state, not a selected state. ButtonFilled\n * deliberately has no active state, so hold the pressed wash for the popup's\n * complete rendered lifecycle instead of promoting any selected treatment.\n */\n/* Inset stroke via interaction-fill ::after (above hover and pressed washes). */\n.button-filled--bordered {\n --ds-interaction-border-color: var(--ds-button-filled-border);\n}\n\n/*\n * Parent-surface context affects only the optional inset border.\n * Intent + contrast continue to own fill, foreground, and interaction overlays.\n */\n.button-filled--background-medium {\n --ds-button-filled-border: var(--color-border-on-medium-background-secondary);\n}\n\n.button-filled--background-bold {\n --ds-button-filled-border: var(--color-border-on-bold-background-secondary);\n}\n\n.button-filled--background-strong {\n --ds-button-filled-border: var(--color-border-on-strong-background-secondary);\n}\n\n.button-filled--background-translucent {\n --ds-button-filled-border: var(--color-translucent-border-secondary);\n}\n\n.button-filled--background-inverted {\n --ds-button-filled-border: var(--color-inverted-border-secondary);\n}\n\n.button-filled--background-media {\n --ds-button-filled-border: var(--color-media-border-secondary);\n}\n\n.button-filled--background-always-dark {\n --ds-button-filled-border: var(--color-always-dark-border-secondary);\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n/* ── Intent + contrast (bold default) ─────────────────────────────────────── */\n\n.button-filled--intent-neutral {\n --ds-button-filled-bg: var(--color-background-bold-neutral);\n --ds-button-filled-fg: var(--color-foreground-faint-neutral);\n}\n\n.button-filled--intent-brand {\n --ds-button-filled-bg: var(--color-background-bold-brand);\n --ds-button-filled-fg: var(--color-foreground-faint-brand);\n}\n\n.button-filled--intent-ai {\n --ds-button-filled-bg: var(--color-background-bold-ai);\n --ds-button-filled-fg: var(--color-foreground-faint-ai);\n}\n\n.button-filled--intent-negative {\n --ds-button-filled-bg: var(--color-background-bold-negative);\n --ds-button-filled-fg: var(--color-foreground-faint-negative);\n}\n\n.button-filled--intent-warning {\n --ds-button-filled-bg: var(--color-background-bold-warning);\n --ds-button-filled-fg: var(--color-foreground-faint-warning);\n}\n\n.button-filled--intent-caution {\n --ds-button-filled-bg: var(--color-background-bold-caution);\n --ds-button-filled-fg: var(--color-foreground-faint-caution);\n}\n\n.button-filled--intent-positive {\n --ds-button-filled-bg: var(--color-background-bold-positive);\n --ds-button-filled-fg: var(--color-foreground-faint-positive);\n}\n\n.button-filled--intent-guide {\n --ds-button-filled-bg: var(--color-background-bold-guide);\n --ds-button-filled-fg: var(--color-foreground-faint-guide);\n}\n\n.button-filled--intent-walkthrough {\n --ds-button-filled-bg: var(--color-background-bold-walkthrough);\n --ds-button-filled-fg: var(--color-foreground-faint-walkthrough);\n}\n\n/* strong → medium fg */\n.button-filled--contrast-strong.button-filled--intent-neutral {\n --ds-button-filled-bg: var(--color-background-strong-neutral);\n --ds-button-filled-fg: var(--color-foreground-medium-neutral);\n}\n\n.button-filled--contrast-strong.button-filled--intent-brand {\n --ds-button-filled-bg: var(--color-background-strong-brand);\n --ds-button-filled-fg: var(--color-foreground-medium-brand);\n}\n\n.button-filled--contrast-strong.button-filled--intent-ai {\n --ds-button-filled-bg: var(--color-background-strong-ai);\n --ds-button-filled-fg: var(--color-foreground-medium-ai);\n}\n\n.button-filled--contrast-strong.button-filled--intent-negative {\n --ds-button-filled-bg: var(--color-background-strong-negative);\n --ds-button-filled-fg: var(--color-foreground-medium-negative);\n}\n\n.button-filled--contrast-strong.button-filled--intent-warning {\n --ds-button-filled-bg: var(--color-background-strong-warning);\n --ds-button-filled-fg: var(--color-foreground-medium-warning);\n}\n\n.button-filled--contrast-strong.button-filled--intent-caution {\n --ds-button-filled-bg: var(--color-background-strong-caution);\n --ds-button-filled-fg: var(--color-foreground-medium-caution);\n}\n\n.button-filled--contrast-strong.button-filled--intent-positive {\n --ds-button-filled-bg: var(--color-background-strong-positive);\n --ds-button-filled-fg: var(--color-foreground-medium-positive);\n}\n\n.button-filled--contrast-strong.button-filled--intent-guide {\n --ds-button-filled-bg: var(--color-background-strong-guide);\n --ds-button-filled-fg: var(--color-foreground-medium-guide);\n}\n\n.button-filled--contrast-strong.button-filled--intent-walkthrough {\n --ds-button-filled-bg: var(--color-background-strong-walkthrough);\n --ds-button-filled-fg: var(--color-foreground-medium-walkthrough);\n}\n\n/* medium → strong fg */\n.button-filled--contrast-medium.button-filled--intent-neutral {\n --ds-button-filled-bg: var(--color-background-medium-neutral);\n --ds-button-filled-fg: var(--color-foreground-strong-neutral);\n}\n\n.button-filled--contrast-medium.button-filled--intent-brand {\n --ds-button-filled-bg: var(--color-background-medium-brand);\n --ds-button-filled-fg: var(--color-foreground-strong-brand);\n}\n\n.button-filled--contrast-medium.button-filled--intent-ai {\n --ds-button-filled-bg: var(--color-background-medium-ai);\n --ds-button-filled-fg: var(--color-foreground-strong-ai);\n}\n\n.button-filled--contrast-medium.button-filled--intent-negative {\n --ds-button-filled-bg: var(--color-background-medium-negative);\n --ds-button-filled-fg: var(--color-foreground-strong-negative);\n}\n\n.button-filled--contrast-medium.button-filled--intent-warning {\n --ds-button-filled-bg: var(--color-background-medium-warning);\n --ds-button-filled-fg: var(--color-foreground-strong-warning);\n}\n\n.button-filled--contrast-medium.button-filled--intent-caution {\n --ds-button-filled-bg: var(--color-background-medium-caution);\n --ds-button-filled-fg: var(--color-foreground-strong-caution);\n}\n\n.button-filled--contrast-medium.button-filled--intent-positive {\n --ds-button-filled-bg: var(--color-background-medium-positive);\n --ds-button-filled-fg: var(--color-foreground-strong-positive);\n}\n\n.button-filled--contrast-medium.button-filled--intent-guide {\n --ds-button-filled-bg: var(--color-background-medium-guide);\n --ds-button-filled-fg: var(--color-foreground-strong-guide);\n}\n\n.button-filled--contrast-medium.button-filled--intent-walkthrough {\n --ds-button-filled-bg: var(--color-background-medium-walkthrough);\n --ds-button-filled-fg: var(--color-foreground-strong-walkthrough);\n}\n\n/* faint → bold fg */\n.button-filled--contrast-faint.button-filled--intent-neutral {\n --ds-button-filled-bg: var(--color-background-faint-neutral);\n --ds-button-filled-fg: var(--color-foreground-bold-neutral);\n}\n\n.button-filled--contrast-faint.button-filled--intent-brand {\n --ds-button-filled-bg: var(--color-background-faint-brand);\n --ds-button-filled-fg: var(--color-foreground-bold-brand);\n}\n\n.button-filled--contrast-faint.button-filled--intent-ai {\n --ds-button-filled-bg: var(--color-background-faint-ai);\n --ds-button-filled-fg: var(--color-foreground-bold-ai);\n}\n\n.button-filled--contrast-faint.button-filled--intent-negative {\n --ds-button-filled-bg: var(--color-background-faint-negative);\n --ds-button-filled-fg: var(--color-foreground-bold-negative);\n}\n\n.button-filled--contrast-faint.button-filled--intent-warning {\n --ds-button-filled-bg: var(--color-background-faint-warning);\n --ds-button-filled-fg: var(--color-foreground-bold-warning);\n}\n\n.button-filled--contrast-faint.button-filled--intent-caution {\n --ds-button-filled-bg: var(--color-background-faint-caution);\n --ds-button-filled-fg: var(--color-foreground-bold-caution);\n}\n\n.button-filled--contrast-faint.button-filled--intent-positive {\n --ds-button-filled-bg: var(--color-background-faint-positive);\n --ds-button-filled-fg: var(--color-foreground-bold-positive);\n}\n\n.button-filled--contrast-faint.button-filled--intent-guide {\n --ds-button-filled-bg: var(--color-background-faint-guide);\n --ds-button-filled-fg: var(--color-foreground-bold-guide);\n}\n\n.button-filled--contrast-faint.button-filled--intent-walkthrough {\n --ds-button-filled-bg: var(--color-background-faint-walkthrough);\n --ds-button-filled-fg: var(--color-foreground-bold-walkthrough);\n}\n\n/*\n * Bold, strong, and medium fills already communicate semantic intent. Their\n * on-background foreground tokens preserve AA text contrast across themes,\n * including brand pairs whose chromatic counterparts sit on the 4.5:1 edge.\n */\n.button-filled--contrast-bold.button-filled {\n --ds-button-filled-fg: var(--color-foreground-on-bold-background-primary);\n}\n\n.button-filled--contrast-strong.button-filled {\n --ds-button-filled-fg: var(--color-foreground-on-strong-background-primary);\n}\n\n.button-filled--contrast-medium.button-filled {\n --ds-button-filled-fg: var(--color-foreground-on-medium-background-primary);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass } from '../../utils';\nimport type { ChoiceBackground } from '../../utils/choice-list';\nimport { beginElevatedControlPress } from '../../utils/control-press';\nimport { renderButtonContent } from '../../utils/button-render';\nimport type { ControlInsetDepth } from '../../utils/control-text';\nimport type { ButtonPopup, ButtonSize, ButtonVariant, ButtonWidth } from '../../utils/button-types';\n\nexport type ButtonFilledIntent =\n | 'neutral'\n | 'brand'\n | 'ai'\n | 'negative'\n | 'warning'\n | 'caution'\n | 'positive'\n | 'guide'\n | 'walkthrough';\n\nexport type ButtonFilledContrast = 'bold' | 'strong' | 'medium' | 'faint';\n\nexport type ButtonFilledBackground = ChoiceBackground;\n\nexport type ButtonFilledVariant = ButtonVariant;\nexport type ButtonFilledSize = ButtonSize;\nexport type ButtonFilledWidth = ButtonWidth;\nexport type ButtonFilledPopup = ButtonPopup;\n\n@Component({\n tag: 'ds-button-filled',\n styleUrl: 'ButtonFilled.css',\n scoped: true,\n})\nexport class ButtonFilled {\n @Element() el!: HTMLElement;\n\n /**\n * Content layout. Default is label-only; pass `icon` for icon-only chrome\n * (nav / tool rails) or `icon-label` for leading icon + text.\n */\n @Prop() variant: ButtonFilledVariant = 'label';\n\n /** Control density (height, padding, icon, type). */\n @Prop() size: ButtonFilledSize = 'md';\n\n /** Use reduced outer geometry when nested inside a control of the same size. */\n @Prop() isInset: boolean = false;\n\n /** Single removes 4px overall; double removes 8px overall (xs stays single). */\n @Prop() insetDepth: ControlInsetDepth = 'single';\n\n /** Width fit — hug content (default) or fill the parent. */\n @Prop() width: ButtonFilledWidth = 'hug';\n\n /** Visible text for `label` / `icon-label` variants. */\n @Prop() label: string = '';\n\n /** Whether the visible label uses the emphasized weight. */\n @Prop() labelEmphasis: boolean = true;\n\n /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n @Prop() icon: string = '';\n\n /** Semantic colour intent. */\n @Prop() intent: ButtonFilledIntent = 'brand';\n\n /**\n * Background fill weight. Foreground uses the paired contrast token:\n * bold → faint, strong → medium, medium → strong, faint → bold.\n */\n @Prop() contrast: ButtonFilledContrast = 'bold';\n\n /** Show a 1px secondary inset border. */\n @Prop() hasBorder: boolean = false;\n\n /**\n * Actual parent surface context for the optional inset border color only.\n * Omit on primary and secondary surfaces.\n */\n @Prop() background: ButtonFilledBackground | undefined;\n\n /** Use the half-radius treatment instead of the default control radius. */\n @Prop() rounded: boolean = false;\n\n /**\n * Scale down during a physical pointer press.\n * Disable when an owning composite requires fixed child or background geometry.\n */\n @Prop() pressScale: boolean = true;\n\n /** Disables interaction. */\n @Prop() isInactive: boolean = false;\n\n /** Shows an inline loader and prevents interaction without applying inactive opacity. */\n @Prop() isLoading: boolean = false;\n\n /** Native button type. */\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n /** Accessible name override. Required for icon-only buttons. */\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n\n /** ID of the popup this button controls. */\n @Prop() controls: string | undefined;\n\n /**\n * Controlled open state of the popup this button triggers. Holds the pressed\n * wash for the popup's rendered lifecycle. ButtonFilled has no selected state,\n * so an open popup never promotes to an active treatment.\n */\n @Prop() expanded: boolean | undefined;\n\n /** Popup type exposed to assistive technology. */\n @Prop() haspopup: ButtonFilledPopup | undefined;\n\n /**\n * This action *has* a menu: implies `aria-haspopup=\"menu\"` and adds the trailing\n * chevron that carries the affordance.\n *\n * Only `label` and `icon-label` are supported. A filled button is never the\n * overflow / more-options control — that role belongs to ButtonUnfilled with an\n * `Ellipses` glyph, which conveys the menu without a chevron.\n *\n * Use `haspopup` directly for non-menu popups.\n */\n @Prop() hasMenu: boolean = false;\n\n @Event() dsClick!: EventEmitter<MouseEvent>;\n\n private buttonEl: HTMLButtonElement | null = null;\n\n @Method()\n async setFocus() {\n this.buttonEl?.focus();\n }\n\n private handleClick = (event: MouseEvent) => {\n if (this.isInactive || this.isLoading) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n this.dsClick.emit(event);\n };\n\n private get resolvedHaspopup(): ButtonFilledPopup | undefined {\n return this.haspopup ?? (this.hasMenu ? 'menu' : undefined);\n }\n\n private get accessibleName(): string | undefined {\n if (this.ariaLabel) return this.ariaLabel;\n if (this.isLoading && this.variant === 'label' && this.label) return this.label;\n return undefined;\n }\n\n private get doubleInset(): boolean {\n return this.isInset && this.insetDepth === 'double' && this.size !== 'xs';\n }\n\n render() {\n const cls: Record<string, boolean> = {\n 'button-filled': true,\n 'ds-button': true,\n 'ds-focus-ring-inset': true,\n 'ds-control-press-scale': this.pressScale,\n 'ds-interaction-fill': !this.isInactive,\n /* Bold is the default filled contrast — on-bold interaction tokens. */\n 'ds-interaction-fill--on-bold': this.contrast === 'bold',\n 'ds-interaction-fill--on-strong': this.contrast === 'strong',\n 'ds-interaction-fill--on-medium': this.contrast === 'medium',\n /* faint → default app interaction tokens (no --on-*). */\n 'button-filled--bordered': this.hasBorder,\n 'ds-button--bordered': this.hasBorder,\n 'button-filled--expanded': this.expanded === true && !this.isInactive,\n 'ds-button--expanded': this.expanded === true && !this.isInactive,\n 'ds-control-inactive': this.isInactive,\n 'ds-control--lg': this.size === 'lg',\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n 'ds-control--inset': this.isInset && !this.doubleInset,\n 'ds-control--inset-double': this.doubleInset,\n 'ds-control-frame': true,\n 'button-filled--icon': this.variant === 'icon',\n 'ds-button--icon': this.variant === 'icon',\n 'button-filled--label': this.variant === 'label',\n 'button-filled--icon-label': this.variant === 'icon-label',\n 'button-filled--rounded': this.rounded,\n 'ds-button--rounded': this.rounded,\n [`button-filled--background-${this.background}`]: this.background !== undefined,\n [`button-filled--intent-${this.intent}`]: true,\n [`button-filled--contrast-${this.contrast}`]: true,\n };\n\n return (\n <Host\n class={{\n 'button-filled-host': true,\n 'button-filled-host--icon': this.variant === 'icon',\n 'ds-button-host--icon': this.variant === 'icon',\n 'ds-control--lg': this.size === 'lg',\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n 'ds-control--inset': this.isInset && !this.doubleInset,\n 'ds-control--inset-double': this.doubleInset,\n ...controlWidthClass(this.width),\n }}\n tabIndex={-1}\n >\n <button\n ref={el => {\n this.buttonEl = el ?? null;\n }}\n type={this.type}\n class={cls}\n disabled={this.isInactive}\n aria-label={this.accessibleName}\n aria-busy={this.isLoading ? 'true' : undefined}\n aria-disabled={this.isLoading ? 'true' : undefined}\n aria-controls={this.controls}\n aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}\n aria-haspopup={this.resolvedHaspopup}\n onPointerDown={event =>\n beginElevatedControlPress(event, this.pressScale && !this.isInactive && !this.isLoading)\n }\n onClick={this.handleClick}\n >\n {renderButtonContent({\n namespace: 'button-filled',\n variant: this.variant,\n size: this.size,\n label: this.label,\n labelEmphasis: this.labelEmphasis,\n icon: this.icon,\n hasMenu: this.hasMenu,\n isLoading: this.isLoading,\n })}\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"4RAAA,MAAMA,EAAkB,IAAM,iv4B,MCiCjBC,EAAYC,EAAA,MAAAD,UAAAE,EALzB,WAAAC,CAAAC,G,6EAYUC,KAAAC,QAA+B,QAG/BD,KAAAE,KAAyB,KAGzBF,KAAAG,QAAmB,MAGnBH,KAAAI,WAAgC,SAGhCJ,KAAAK,MAA2B,MAG3BL,KAAAM,MAAgB,GAGhBN,KAAAO,cAAyB,KAGzBP,KAAAQ,KAAe,GAGfR,KAAAS,OAA6B,QAM7BT,KAAAU,SAAiC,OAGjCV,KAAAW,UAAqB,MASrBX,KAAAY,QAAmB,MAMnBZ,KAAAa,WAAsB,KAGtBb,KAAAc,WAAsB,MAGtBd,KAAAe,UAAqB,MAGrBf,KAAAgB,KAAsC,SAGXhB,KAAAiB,UAA2B,KAyBtDjB,KAAAkB,QAAmB,MAInBlB,KAAAmB,SAAqC,KAOrCnB,KAAAoB,YAAeC,IACrB,GAAIrB,KAAKc,YAAcd,KAAKe,UAAW,CACrCM,EAAMC,iBACND,EAAME,kBACN,M,CAEFvB,KAAKwB,QAAQC,KAAKJ,EAAM,CAoG3B,CA9GC,cAAMK,GACJ1B,KAAKmB,UAAUQ,O,CAYjB,oBAAYC,GACV,OAAO5B,KAAK6B,WAAa7B,KAAKkB,QAAU,OAASY,U,CAGnD,kBAAYC,GACV,GAAI/B,KAAKiB,UAAW,OAAOjB,KAAKiB,UAChC,GAAIjB,KAAKe,WAAaf,KAAKC,UAAY,SAAWD,KAAKM,MAAO,OAAON,KAAKM,MAC1E,OAAOwB,S,CAGT,eAAYE,GACV,OAAOhC,KAAKG,SAAWH,KAAKI,aAAe,UAAYJ,KAAKE,OAAS,I,CAGvE,MAAA+B,GACE,MAAMC,EAA+B,CACnC,gBAAiB,KACjB,YAAa,KACb,sBAAuB,KACvB,yBAA0BlC,KAAKa,WAC/B,uBAAwBb,KAAKc,WAE7B,+BAAgCd,KAAKU,WAAa,OAClD,iCAAkCV,KAAKU,WAAa,SACpD,iCAAkCV,KAAKU,WAAa,SAEpD,0BAA2BV,KAAKW,UAChC,sBAAuBX,KAAKW,UAC5B,0BAA2BX,KAAKmC,WAAa,OAASnC,KAAKc,WAC3D,sBAAuBd,KAAKmC,WAAa,OAASnC,KAAKc,WACvD,sBAAuBd,KAAKc,WAC5B,iBAAkBd,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,oBAAqBF,KAAKG,UAAYH,KAAKgC,YAC3C,2BAA4BhC,KAAKgC,YACjC,mBAAoB,KACpB,sBAAuBhC,KAAKC,UAAY,OACxC,kBAAmBD,KAAKC,UAAY,OACpC,uBAAwBD,KAAKC,UAAY,QACzC,4BAA6BD,KAAKC,UAAY,aAC9C,yBAA0BD,KAAKY,QAC/B,qBAAsBZ,KAAKY,QAC3B,CAAC,6BAA6BZ,KAAKoC,cAAepC,KAAKoC,aAAeN,UACtE,CAAC,yBAAyB9B,KAAKS,UAAW,KAC1C,CAAC,2BAA2BT,KAAKU,YAAa,MAGhD,OACE2B,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,qBAAsB,KACtB,2BAA4BxC,KAAKC,UAAY,OAC7C,uBAAwBD,KAAKC,UAAY,OACzC,iBAAkBD,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,oBAAqBF,KAAKG,UAAYH,KAAKgC,YAC3C,2BAA4BhC,KAAKgC,eAC9BS,EAAkBzC,KAAKK,QAE5BqC,UAAU,GAEVL,EAAA,UAAAE,IAAA,2CACEI,IAAKC,IACH5C,KAAKmB,SAAWyB,GAAM,IAAI,EAE5B5B,KAAMhB,KAAKgB,KACXwB,MAAON,EACPW,SAAU7C,KAAKc,WAAU,aACbd,KAAK+B,eAAc,YACpB/B,KAAKe,UAAY,OAASe,UAAS,gBAC/B9B,KAAKe,UAAY,OAASe,UAAS,gBACnC9B,KAAK8C,SAAQ,gBACb9C,KAAKmC,WAAaL,UAAYA,UAAYiB,OAAO/C,KAAKmC,UAAS,gBAC/DnC,KAAK4B,iBACpBoB,cAAe3B,GACb4B,EAA0B5B,EAAOrB,KAAKa,aAAeb,KAAKc,aAAed,KAAKe,WAEhFmC,QAASlD,KAAKoB,aAEb+B,EAAoB,CACnBC,UAAW,gBACXnD,QAASD,KAAKC,QACdC,KAAMF,KAAKE,KACXI,MAAON,KAAKM,MACZC,cAAeP,KAAKO,cACpBC,KAAMR,KAAKQ,KACXU,QAASlB,KAAKkB,QACdH,UAAWf,KAAKe,a","ignoreList":[]}
1
+ {"version":3,"names":["buttonFilledCss","ButtonFilled","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","isInset","insetDepth","width","label","labelEmphasis","icon","intent","contrast","hasBorder","rounded","pressScale","isInactive","isLoading","type","ariaLabel","hasMenu","buttonEl","handleClick","event","preventDefault","stopPropagation","dsClick","emit","setFocus","focus","resolvedHaspopup","haspopup","undefined","accessibleName","doubleInset","render","cls","expanded","background","h","Host","key","class","controlWidthClass","tabIndex","ref","el","disabled","controls","String","onPointerDown","beginElevatedControlPress","onClick","renderButtonContent","namespace"],"sources":["src/wc/components/ButtonFilled/ButtonFilled.css?tag=ds-button-filled&encapsulation=scoped","src/wc/components/ButtonFilled/ButtonFilled.tsx"],"sourcesContent":["@import '../../utils/button-base.css';\n\n:host {\n --ds-button-filled-bg: var(--color-background-bold-brand);\n --ds-button-filled-fg: var(--color-foreground-faint-brand);\n --ds-button-filled-border: var(--color-border-secondary);\n}\n\n.button-filled {\n background-color: var(--ds-button-filled-bg);\n color: var(--ds-button-filled-fg);\n transition:\n background-color var(--effect-motion-short-2),\n color var(--effect-motion-short-2);\n /* Hover/press: `.ds-interaction-fill` + contrast → `--on-*` (token overlay, not color-mix). */\n}\n\n/*\n * An open popup is a transient pressed state, not a selected state. ButtonFilled\n * deliberately has no active state, so hold the pressed wash for the popup's\n * complete rendered lifecycle instead of promoting any selected treatment.\n */\n/* Inset stroke via interaction-fill ::after (above hover and pressed washes). */\n.button-filled--bordered {\n --ds-interaction-border-color: var(--ds-button-filled-border);\n}\n\n/*\n * Parent-surface context affects only the optional inset border.\n * Intent + contrast continue to own fill, foreground, and interaction overlays.\n */\n.button-filled--background-medium {\n --ds-button-filled-border: var(--color-border-on-medium-background-secondary);\n}\n\n.button-filled--background-bold {\n --ds-button-filled-border: var(--color-border-on-bold-background-secondary);\n}\n\n.button-filled--background-strong {\n --ds-button-filled-border: var(--color-border-on-strong-background-secondary);\n}\n\n.button-filled--background-translucent {\n --ds-button-filled-border: var(--color-translucent-border-secondary);\n}\n\n.button-filled--background-inverted {\n --ds-button-filled-border: var(--color-inverted-border-secondary);\n}\n\n.button-filled--background-media {\n --ds-button-filled-border: var(--color-media-border-secondary);\n}\n\n.button-filled--background-always-dark {\n --ds-button-filled-border: var(--color-always-dark-border-secondary);\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n/* ── Intent + contrast (bold default) ─────────────────────────────────────── */\n\n.button-filled--intent-neutral {\n --ds-button-filled-bg: var(--color-background-bold-neutral);\n --ds-button-filled-fg: var(--color-foreground-faint-neutral);\n}\n\n.button-filled--intent-brand {\n --ds-button-filled-bg: var(--color-background-bold-brand);\n --ds-button-filled-fg: var(--color-foreground-faint-brand);\n}\n\n.button-filled--intent-ai {\n --ds-button-filled-bg: var(--color-background-bold-ai);\n --ds-button-filled-fg: var(--color-foreground-faint-ai);\n}\n\n.button-filled--intent-negative {\n --ds-button-filled-bg: var(--color-background-bold-negative);\n --ds-button-filled-fg: var(--color-foreground-faint-negative);\n}\n\n.button-filled--intent-warning {\n --ds-button-filled-bg: var(--color-background-bold-warning);\n --ds-button-filled-fg: var(--color-foreground-faint-warning);\n}\n\n.button-filled--intent-caution {\n --ds-button-filled-bg: var(--color-background-bold-caution);\n --ds-button-filled-fg: var(--color-foreground-faint-caution);\n}\n\n.button-filled--intent-positive {\n --ds-button-filled-bg: var(--color-background-bold-positive);\n --ds-button-filled-fg: var(--color-foreground-faint-positive);\n}\n\n.button-filled--intent-guide {\n --ds-button-filled-bg: var(--color-background-bold-guide);\n --ds-button-filled-fg: var(--color-foreground-faint-guide);\n}\n\n.button-filled--intent-walkthrough {\n --ds-button-filled-bg: var(--color-background-bold-walkthrough);\n --ds-button-filled-fg: var(--color-foreground-faint-walkthrough);\n}\n\n/* strong → medium fg */\n.button-filled--contrast-strong.button-filled--intent-neutral {\n --ds-button-filled-bg: var(--color-background-strong-neutral);\n --ds-button-filled-fg: var(--color-foreground-medium-neutral);\n}\n\n.button-filled--contrast-strong.button-filled--intent-brand {\n --ds-button-filled-bg: var(--color-background-strong-brand);\n --ds-button-filled-fg: var(--color-foreground-medium-brand);\n}\n\n.button-filled--contrast-strong.button-filled--intent-ai {\n --ds-button-filled-bg: var(--color-background-strong-ai);\n --ds-button-filled-fg: var(--color-foreground-medium-ai);\n}\n\n.button-filled--contrast-strong.button-filled--intent-negative {\n --ds-button-filled-bg: var(--color-background-strong-negative);\n --ds-button-filled-fg: var(--color-foreground-medium-negative);\n}\n\n.button-filled--contrast-strong.button-filled--intent-warning {\n --ds-button-filled-bg: var(--color-background-strong-warning);\n --ds-button-filled-fg: var(--color-foreground-medium-warning);\n}\n\n.button-filled--contrast-strong.button-filled--intent-caution {\n --ds-button-filled-bg: var(--color-background-strong-caution);\n --ds-button-filled-fg: var(--color-foreground-medium-caution);\n}\n\n.button-filled--contrast-strong.button-filled--intent-positive {\n --ds-button-filled-bg: var(--color-background-strong-positive);\n --ds-button-filled-fg: var(--color-foreground-medium-positive);\n}\n\n.button-filled--contrast-strong.button-filled--intent-guide {\n --ds-button-filled-bg: var(--color-background-strong-guide);\n --ds-button-filled-fg: var(--color-foreground-medium-guide);\n}\n\n.button-filled--contrast-strong.button-filled--intent-walkthrough {\n --ds-button-filled-bg: var(--color-background-strong-walkthrough);\n --ds-button-filled-fg: var(--color-foreground-medium-walkthrough);\n}\n\n/* medium → strong fg */\n.button-filled--contrast-medium.button-filled--intent-neutral {\n --ds-button-filled-bg: var(--color-background-medium-neutral);\n --ds-button-filled-fg: var(--color-foreground-strong-neutral);\n}\n\n.button-filled--contrast-medium.button-filled--intent-brand {\n --ds-button-filled-bg: var(--color-background-medium-brand);\n --ds-button-filled-fg: var(--color-foreground-strong-brand);\n}\n\n.button-filled--contrast-medium.button-filled--intent-ai {\n --ds-button-filled-bg: var(--color-background-medium-ai);\n --ds-button-filled-fg: var(--color-foreground-strong-ai);\n}\n\n.button-filled--contrast-medium.button-filled--intent-negative {\n --ds-button-filled-bg: var(--color-background-medium-negative);\n --ds-button-filled-fg: var(--color-foreground-strong-negative);\n}\n\n.button-filled--contrast-medium.button-filled--intent-warning {\n --ds-button-filled-bg: var(--color-background-medium-warning);\n --ds-button-filled-fg: var(--color-foreground-strong-warning);\n}\n\n.button-filled--contrast-medium.button-filled--intent-caution {\n --ds-button-filled-bg: var(--color-background-medium-caution);\n --ds-button-filled-fg: var(--color-foreground-strong-caution);\n}\n\n.button-filled--contrast-medium.button-filled--intent-positive {\n --ds-button-filled-bg: var(--color-background-medium-positive);\n --ds-button-filled-fg: var(--color-foreground-strong-positive);\n}\n\n.button-filled--contrast-medium.button-filled--intent-guide {\n --ds-button-filled-bg: var(--color-background-medium-guide);\n --ds-button-filled-fg: var(--color-foreground-strong-guide);\n}\n\n.button-filled--contrast-medium.button-filled--intent-walkthrough {\n --ds-button-filled-bg: var(--color-background-medium-walkthrough);\n --ds-button-filled-fg: var(--color-foreground-strong-walkthrough);\n}\n\n/* faint → bold fg */\n.button-filled--contrast-faint.button-filled--intent-neutral {\n --ds-button-filled-bg: var(--color-background-faint-neutral);\n --ds-button-filled-fg: var(--color-foreground-bold-neutral);\n}\n\n.button-filled--contrast-faint.button-filled--intent-brand {\n --ds-button-filled-bg: var(--color-background-faint-brand);\n --ds-button-filled-fg: var(--color-foreground-bold-brand);\n}\n\n.button-filled--contrast-faint.button-filled--intent-ai {\n --ds-button-filled-bg: var(--color-background-faint-ai);\n --ds-button-filled-fg: var(--color-foreground-bold-ai);\n}\n\n.button-filled--contrast-faint.button-filled--intent-negative {\n --ds-button-filled-bg: var(--color-background-faint-negative);\n --ds-button-filled-fg: var(--color-foreground-bold-negative);\n}\n\n.button-filled--contrast-faint.button-filled--intent-warning {\n --ds-button-filled-bg: var(--color-background-faint-warning);\n --ds-button-filled-fg: var(--color-foreground-bold-warning);\n}\n\n.button-filled--contrast-faint.button-filled--intent-caution {\n --ds-button-filled-bg: var(--color-background-faint-caution);\n --ds-button-filled-fg: var(--color-foreground-bold-caution);\n}\n\n.button-filled--contrast-faint.button-filled--intent-positive {\n --ds-button-filled-bg: var(--color-background-faint-positive);\n --ds-button-filled-fg: var(--color-foreground-bold-positive);\n}\n\n.button-filled--contrast-faint.button-filled--intent-guide {\n --ds-button-filled-bg: var(--color-background-faint-guide);\n --ds-button-filled-fg: var(--color-foreground-bold-guide);\n}\n\n.button-filled--contrast-faint.button-filled--intent-walkthrough {\n --ds-button-filled-bg: var(--color-background-faint-walkthrough);\n --ds-button-filled-fg: var(--color-foreground-bold-walkthrough);\n}\n\n/*\n * Bold, strong, and medium fills already communicate semantic intent. Their\n * on-background foreground tokens preserve AA text contrast across themes,\n * including brand pairs whose chromatic counterparts sit on the 4.5:1 edge.\n */\n.button-filled--contrast-bold.button-filled {\n --ds-button-filled-fg: var(--color-foreground-on-bold-background-primary);\n}\n\n.button-filled--contrast-strong.button-filled {\n --ds-button-filled-fg: var(--color-foreground-on-strong-background-primary);\n}\n\n.button-filled--contrast-medium.button-filled {\n --ds-button-filled-fg: var(--color-foreground-on-medium-background-primary);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass } from '../../utils';\nimport type { ChoiceBackground } from '../../utils/choice-list';\nimport { beginElevatedControlPress } from '../../utils/control-press';\nimport { renderButtonContent } from '../../utils/button-render';\nimport type { ControlInsetDepth } from '../../utils/control-text';\nimport type { ButtonPopup, ButtonSize, ButtonVariant, ButtonWidth } from '../../utils/button-types';\n\nexport type ButtonFilledIntent =\n | 'neutral'\n | 'brand'\n | 'ai'\n | 'negative'\n | 'warning'\n | 'caution'\n | 'positive'\n | 'guide'\n | 'walkthrough';\n\nexport type ButtonFilledContrast = 'bold' | 'strong' | 'medium' | 'faint';\n\nexport type ButtonFilledBackground = ChoiceBackground;\n\nexport type ButtonFilledVariant = ButtonVariant;\nexport type ButtonFilledSize = ButtonSize;\nexport type ButtonFilledWidth = ButtonWidth;\nexport type ButtonFilledPopup = ButtonPopup;\n\n@Component({\n tag: 'ds-button-filled',\n styleUrl: 'ButtonFilled.css',\n scoped: true,\n})\nexport class ButtonFilled {\n @Element() el!: HTMLElement;\n\n /**\n * Content layout. Default is label-only; pass `icon` for icon-only chrome\n * (nav / tool rails) or `icon-label` for leading icon + text.\n */\n @Prop() variant: ButtonFilledVariant = 'label';\n\n /** Control density (height, padding, icon, type). */\n @Prop() size: ButtonFilledSize = 'md';\n\n /** Use reduced outer geometry when nested inside a control of the same size. */\n @Prop() isInset: boolean = false;\n\n /** Single removes 4px overall; double removes 8px overall (xs stays single). */\n @Prop() insetDepth: ControlInsetDepth = 'single';\n\n /** Width fit — hug content (default) or fill the parent. */\n @Prop() width: ButtonFilledWidth = 'hug';\n\n /** Visible text for `label` / `icon-label` variants. */\n @Prop() label: string = '';\n\n /** Whether the visible label uses the emphasized weight. */\n @Prop() labelEmphasis: boolean = true;\n\n /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n @Prop() icon: string = '';\n\n /** Semantic colour intent. */\n @Prop() intent: ButtonFilledIntent = 'brand';\n\n /**\n * Background fill weight. Foreground uses the paired contrast token:\n * bold → faint, strong → medium, medium → strong, faint → bold.\n */\n @Prop() contrast: ButtonFilledContrast = 'bold';\n\n /** Show a 1px secondary inset border. */\n @Prop() hasBorder: boolean = false;\n\n /**\n * Actual parent surface context for the optional inset border color only.\n * Omit on primary and secondary surfaces.\n */\n @Prop() background: ButtonFilledBackground | undefined;\n\n /** Use the half-radius treatment instead of the default control radius. */\n @Prop() rounded: boolean = false;\n\n /**\n * Scale down during a physical pointer press.\n * Disable when an owning composite requires fixed child or background geometry.\n */\n @Prop() pressScale: boolean = true;\n\n /** Disables interaction. */\n @Prop() isInactive: boolean = false;\n\n /** Shows an inline loader and prevents interaction without applying inactive opacity. */\n @Prop() isLoading: boolean = false;\n\n /** Native button type. */\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n /** Accessible name override. Required for icon-only buttons. */\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n\n /** ID of the popup this button controls. */\n @Prop() controls: string | undefined;\n\n /**\n * Controlled open state of the popup this button triggers. Holds the pressed\n * wash for the popup's rendered lifecycle. ButtonFilled has no selected state,\n * so an open popup never promotes to an active treatment.\n */\n @Prop() expanded: boolean | undefined;\n\n /** Popup type exposed to assistive technology. */\n @Prop() haspopup: ButtonFilledPopup | undefined;\n\n /**\n * This action *has* a menu: implies `aria-haspopup=\"menu\"` and adds the trailing\n * chevron that carries the affordance.\n *\n * Only `label` and `icon-label` are supported. A filled button is never the\n * overflow / more-options control — that role belongs to ButtonUnfilled with an\n * `Ellipses` glyph, which conveys the menu without a chevron.\n *\n * Use `haspopup` directly for non-menu popups.\n */\n @Prop() hasMenu: boolean = false;\n\n @Event() dsClick!: EventEmitter<MouseEvent>;\n\n private buttonEl: HTMLButtonElement | null = null;\n\n @Method()\n async setFocus() {\n this.buttonEl?.focus();\n }\n\n private handleClick = (event: MouseEvent) => {\n if (this.isInactive || this.isLoading) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n this.dsClick.emit(event);\n };\n\n private get resolvedHaspopup(): ButtonFilledPopup | undefined {\n return this.haspopup ?? (this.hasMenu ? 'menu' : undefined);\n }\n\n private get accessibleName(): string | undefined {\n if (this.ariaLabel) return this.ariaLabel;\n if (this.isLoading && this.variant === 'label' && this.label) return this.label;\n return undefined;\n }\n\n private get doubleInset(): boolean {\n return this.isInset && this.insetDepth === 'double' && this.size !== 'xs';\n }\n\n render() {\n const cls: Record<string, boolean> = {\n 'button-filled': true,\n 'ds-button': true,\n 'ds-focus-ring-inset': true,\n 'ds-control-press-scale': this.pressScale,\n 'ds-interaction-fill': !this.isInactive,\n /* Bold is the default filled contrast — on-bold interaction tokens. */\n 'ds-interaction-fill--on-bold': this.contrast === 'bold',\n 'ds-interaction-fill--on-strong': this.contrast === 'strong',\n 'ds-interaction-fill--on-medium': this.contrast === 'medium',\n /* faint → default app interaction tokens (no --on-*). */\n 'button-filled--bordered': this.hasBorder,\n 'ds-button--bordered': this.hasBorder,\n 'button-filled--expanded': this.expanded === true && !this.isInactive,\n 'ds-button--expanded': this.expanded === true && !this.isInactive,\n 'ds-control-inactive': this.isInactive,\n 'ds-control--lg': this.size === 'lg',\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n 'ds-control--inset': this.isInset && !this.doubleInset,\n 'ds-control--inset-double': this.doubleInset,\n 'ds-control-frame': true,\n 'button-filled--icon': this.variant === 'icon',\n 'ds-button--icon': this.variant === 'icon',\n 'button-filled--label': this.variant === 'label',\n 'button-filled--icon-label': this.variant === 'icon-label',\n 'button-filled--rounded': this.rounded,\n 'ds-button--rounded': this.rounded,\n [`button-filled--background-${this.background}`]: this.background !== undefined,\n [`button-filled--intent-${this.intent}`]: true,\n [`button-filled--contrast-${this.contrast}`]: true,\n };\n\n return (\n <Host\n class={{\n 'button-filled-host': true,\n 'button-filled-host--icon': this.variant === 'icon',\n 'ds-button-host--icon': this.variant === 'icon',\n 'ds-control--lg': this.size === 'lg',\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n 'ds-control--inset': this.isInset && !this.doubleInset,\n 'ds-control--inset-double': this.doubleInset,\n ...controlWidthClass(this.width),\n }}\n tabIndex={-1}\n >\n <button\n ref={el => {\n this.buttonEl = el ?? null;\n }}\n type={this.type}\n class={cls}\n disabled={this.isInactive}\n aria-label={this.accessibleName}\n aria-busy={this.isLoading ? 'true' : undefined}\n aria-disabled={this.isLoading ? 'true' : undefined}\n aria-controls={this.controls}\n aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}\n aria-haspopup={this.resolvedHaspopup}\n onPointerDown={event =>\n beginElevatedControlPress(event, this.pressScale && !this.isInactive && !this.isLoading)\n }\n onClick={this.handleClick}\n >\n {renderButtonContent({\n namespace: 'button-filled',\n variant: this.variant,\n size: this.size,\n label: this.label,\n labelEmphasis: this.labelEmphasis,\n icon: this.icon,\n hasMenu: this.hasMenu,\n isLoading: this.isLoading,\n })}\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"4RAAA,MAAMA,EAAkB,IAAM,0x4B,MCiCjBC,EAAYC,EAAA,MAAAD,UAAAE,EALzB,WAAAC,CAAAC,G,6EAYUC,KAAAC,QAA+B,QAG/BD,KAAAE,KAAyB,KAGzBF,KAAAG,QAAmB,MAGnBH,KAAAI,WAAgC,SAGhCJ,KAAAK,MAA2B,MAG3BL,KAAAM,MAAgB,GAGhBN,KAAAO,cAAyB,KAGzBP,KAAAQ,KAAe,GAGfR,KAAAS,OAA6B,QAM7BT,KAAAU,SAAiC,OAGjCV,KAAAW,UAAqB,MASrBX,KAAAY,QAAmB,MAMnBZ,KAAAa,WAAsB,KAGtBb,KAAAc,WAAsB,MAGtBd,KAAAe,UAAqB,MAGrBf,KAAAgB,KAAsC,SAGXhB,KAAAiB,UAA2B,KAyBtDjB,KAAAkB,QAAmB,MAInBlB,KAAAmB,SAAqC,KAOrCnB,KAAAoB,YAAeC,IACrB,GAAIrB,KAAKc,YAAcd,KAAKe,UAAW,CACrCM,EAAMC,iBACND,EAAME,kBACN,M,CAEFvB,KAAKwB,QAAQC,KAAKJ,EAAM,CAoG3B,CA9GC,cAAMK,GACJ1B,KAAKmB,UAAUQ,O,CAYjB,oBAAYC,GACV,OAAO5B,KAAK6B,WAAa7B,KAAKkB,QAAU,OAASY,U,CAGnD,kBAAYC,GACV,GAAI/B,KAAKiB,UAAW,OAAOjB,KAAKiB,UAChC,GAAIjB,KAAKe,WAAaf,KAAKC,UAAY,SAAWD,KAAKM,MAAO,OAAON,KAAKM,MAC1E,OAAOwB,S,CAGT,eAAYE,GACV,OAAOhC,KAAKG,SAAWH,KAAKI,aAAe,UAAYJ,KAAKE,OAAS,I,CAGvE,MAAA+B,GACE,MAAMC,EAA+B,CACnC,gBAAiB,KACjB,YAAa,KACb,sBAAuB,KACvB,yBAA0BlC,KAAKa,WAC/B,uBAAwBb,KAAKc,WAE7B,+BAAgCd,KAAKU,WAAa,OAClD,iCAAkCV,KAAKU,WAAa,SACpD,iCAAkCV,KAAKU,WAAa,SAEpD,0BAA2BV,KAAKW,UAChC,sBAAuBX,KAAKW,UAC5B,0BAA2BX,KAAKmC,WAAa,OAASnC,KAAKc,WAC3D,sBAAuBd,KAAKmC,WAAa,OAASnC,KAAKc,WACvD,sBAAuBd,KAAKc,WAC5B,iBAAkBd,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,oBAAqBF,KAAKG,UAAYH,KAAKgC,YAC3C,2BAA4BhC,KAAKgC,YACjC,mBAAoB,KACpB,sBAAuBhC,KAAKC,UAAY,OACxC,kBAAmBD,KAAKC,UAAY,OACpC,uBAAwBD,KAAKC,UAAY,QACzC,4BAA6BD,KAAKC,UAAY,aAC9C,yBAA0BD,KAAKY,QAC/B,qBAAsBZ,KAAKY,QAC3B,CAAC,6BAA6BZ,KAAKoC,cAAepC,KAAKoC,aAAeN,UACtE,CAAC,yBAAyB9B,KAAKS,UAAW,KAC1C,CAAC,2BAA2BT,KAAKU,YAAa,MAGhD,OACE2B,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,qBAAsB,KACtB,2BAA4BxC,KAAKC,UAAY,OAC7C,uBAAwBD,KAAKC,UAAY,OACzC,iBAAkBD,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,oBAAqBF,KAAKG,UAAYH,KAAKgC,YAC3C,2BAA4BhC,KAAKgC,eAC9BS,EAAkBzC,KAAKK,QAE5BqC,UAAU,GAEVL,EAAA,UAAAE,IAAA,2CACEI,IAAKC,IACH5C,KAAKmB,SAAWyB,GAAM,IAAI,EAE5B5B,KAAMhB,KAAKgB,KACXwB,MAAON,EACPW,SAAU7C,KAAKc,WAAU,aACbd,KAAK+B,eAAc,YACpB/B,KAAKe,UAAY,OAASe,UAAS,gBAC/B9B,KAAKe,UAAY,OAASe,UAAS,gBACnC9B,KAAK8C,SAAQ,gBACb9C,KAAKmC,WAAaL,UAAYA,UAAYiB,OAAO/C,KAAKmC,UAAS,gBAC/DnC,KAAK4B,iBACpBoB,cAAe3B,GACb4B,EAA0B5B,EAAOrB,KAAKa,aAAeb,KAAKc,aAAed,KAAKe,WAEhFmC,QAASlD,KAAKoB,aAEb+B,EAAoB,CACnBC,UAAW,gBACXnD,QAASD,KAAKC,QACdC,KAAMF,KAAKE,KACXI,MAAON,KAAKM,MACZC,cAAeP,KAAKO,cACpBC,KAAMR,KAAKQ,KACXU,QAASlB,KAAKkB,QACdH,UAAWf,KAAKe,a","ignoreList":[]}
@@ -0,0 +1,2 @@
1
+ import{p as i,H as o,c as s,h as n,a as e,t as r}from"./index.js";import{d as c}from"./p-Cea7rROU.js";import{d as t}from"./p-Cd1JnnVK.js";import{C as d}from"./p-CuwopElg.js";const a=()=>`.ds-control--lg.sc-ds-chip,.ds-control--lg.sc-ds-chip-h,.ds-control--md.sc-ds-chip-h,.ds-control--md.sc-ds-chip,.ds-control--sm.sc-ds-chip-h,.ds-control--sm.sc-ds-chip,.ds-control--xs.sc-ds-chip-h,.ds-control--xs.sc-ds-chip{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-chip-h,.ds-control--lg.sc-ds-chip{--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-chip-h,.ds-control--md.sc-ds-chip{--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-chip-h,.ds-control--sm.sc-ds-chip{--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-chip-h,.ds-control--xs.sc-ds-chip{--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-chip:root,.sc-ds-chip-h,.ds-forced-colors-scope.sc-ds-chip{--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-chip-h,.ds-interaction-fill.sc-ds-chip{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-chip-h::before,.ds-interaction-fill.sc-ds-chip::before,.ds-interaction-fill.sc-ds-chip-h::after,.ds-interaction-fill.sc-ds-chip::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-chip-h::before,.ds-interaction-fill.sc-ds-chip::before{z-index:1}.ds-interaction-fill.sc-ds-chip-h::after,.ds-interaction-fill.sc-ds-chip::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-chip-h,.ds-interaction-fill--bordered.sc-ds-chip{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-chip-h::before,.ds-interaction-fill--selected.sc-ds-chip::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-chip-h,.ds-interaction-fill--selected.sc-ds-chip{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-chip-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-chip:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-chip-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-chip:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-chip-h::after,.ds-interaction-fill--grouped.sc-ds-chip::after,.ds-interaction-fill--grouped.sc-ds-chip-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-chip:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-chip-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-chip:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-chip-h,.ds-interaction-fill--grouped.sc-ds-chip{--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-chip-h>.ds-interaction-fill__content.sc-ds-chip,.ds-interaction-fill.sc-ds-chip>.ds-interaction-fill__content.sc-ds-chip,.ds-interaction-fill__content.sc-ds-chip{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-chip-h,.ds-interaction-fill--on-faint.sc-ds-chip{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-chip-h,.ds-interaction-fill--on-medium.sc-ds-chip{--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-chip-h,.ds-interaction-fill--on-bold.sc-ds-chip{--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-chip-h,.ds-interaction-fill--on-strong.sc-ds-chip{--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-chip-h,.ds-interaction-fill--on-translucent.sc-ds-chip{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-chip-h,.ds-interaction-fill--on-inverted.sc-ds-chip{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-chip-h,.ds-interaction-fill--on-media.sc-ds-chip{--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-chip-h,.ds-interaction-fill--on-always-dark.sc-ds-chip{--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-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-chip-h,.ds-interaction-fill--on-navigation.sc-ds-chip{--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-chip-h::after,.ds-interaction-fill.sc-ds-chip::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-chip-h::before,.ds-interaction-fill--selected.sc-ds-chip::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-chip-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-chip: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-chip:root,.sc-ds-chip-h,.ds-forced-colors-scope.sc-ds-chip{--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-chip-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-chip-h,.ds-focus-ring.sc-ds-chip,.ds-focus-ring-inset.sc-ds-chip-h,.ds-focus-ring-inset.sc-ds-chip{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-chip-h:focus-visible,.ds-focus-ring.sc-ds-chip: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-chip-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-chip{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-chip-h:focus-visible,.ds-focus-ring-inset.sc-ds-chip:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-chip-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-chip: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-chip-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chip{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chip-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chip::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-chip-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-chip:root,.sc-ds-chip-h,.ds-forced-colors-scope.sc-ds-chip{--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-chip-h,.ds-control-inactive.sc-ds-chip{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-chip-h,.ds-control-inactive.sc-ds-chip{color:var(--ds-forced-color-disabled);opacity:1}}.sc-ds-chip-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-chip-h{border-radius:var(--dimension-radius-half)}.tag__label.sc-ds-chip{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-chip-h,.ds-control--lg.ds-control--inset.sc-ds-chip{--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-chip-h,.ds-control--md.ds-control--inset.sc-ds-chip{--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-chip-h,.ds-control--sm.ds-control--inset.sc-ds-chip{--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-chip-h,.ds-control--xs.ds-control--inset.sc-ds-chip{--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-chip-h,.ds-control--lg.ds-control--inset-double.sc-ds-chip{--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-chip-h,.ds-control--md.ds-control--inset-double.sc-ds-chip{--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-chip-h,.ds-control--sm.ds-control--inset-double.sc-ds-chip{--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))}.chip--default.sc-ds-chip-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.chip--active.sc-ds-chip-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.chip--error.sc-ds-chip-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.chip--caution.sc-ds-chip-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.tag__remove.sc-ds-chip{--ds-chip-remove-size:var(--ds-control-height);padding:0;margin:0;border:none;box-sizing:border-box;background:none;display:flex;align-items:center;justify-content:center;width:var(--ds-chip-remove-size);height:var(--ds-chip-remove-size);cursor:default;color:inherit;flex-shrink:0;position:relative;z-index:2;border-radius:var(--dimension-radius-half)}.ds-control--inset.sc-ds-chip-h .tag__remove.sc-ds-chip{--ds-chip-remove-size:calc(var(--ds-control-height) - var(--dimension-space-050))}.ds-control--inset.sc-ds-chip-h{padding-inline-end:var(--dimension-space-025)}.ds-control--inset-double.sc-ds-chip-h .tag__remove.sc-ds-chip{--ds-chip-remove-size:calc(var(--ds-control-height) - var(--dimension-space-100))}.ds-control--inset-double.sc-ds-chip-h{padding-inline-end:var(--dimension-space-050)}.tag__remove.sc-ds-chip::before{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-half);background-color:transparent;transition:var(--effect-transition-interaction-background-short-2);pointer-events:none}@media (hover: hover) and (pointer: fine){.tag__remove.sc-ds-chip:hover::before{background-color:var(--color-interaction-hover)}}.tag__remove.sc-ds-chip:active::before{background-color:var(--color-interaction-pressed)}.tag__remove-x.sc-ds-chip{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 h=i(class i extends o{constructor(i){super();if(i!==false){this.__registerHost()}this.dsRemove=s(this,"dsRemove",7);this.state="default";this.size="md";this.isInset=false;this.insetDepth="single";this.rounded=false;this.isInactive=false;this.removeLabel="Remove {label}";this.handleRemove=i=>{i.stopPropagation();if(this.isInactive)return;this.dsRemove.emit()}}render(){const i=d[this.size];const o=l[this.size];const s=this.isInset&&this.insetDepth==="double"&&this.size!=="xs";const r=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;return n(e,{key:"ab80b89b7103e46f8a426595a35094ed7e337f08",class:{tag:true,chip:true,[`chip--${this.state}`]: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&&!s,"ds-control--inset-double":s,"tag--rounded":this.rounded,"tag--removable":true,"ds-interaction-fill":!this.isInactive,"ds-control-inactive":this.isInactive},style:r,"aria-disabled":this.isInactive?"true":undefined},n("ds-text",{key:"48d6d1fdb84334377a45fe7c6d143b9e0dfbf3b8",class:"tag__label",as:"span",variant:i,color:"inherit"},this.label),n("button",{key:"04c4a268f11bfbe53095526d898a5d9729f3e94c",type:"button",class:{tag__remove:true,"ds-focus-ring-inset":true},onClick:this.handleRemove,"aria-label":this.removeLabel.replace("{label}",this.label),disabled:this.isInactive||undefined},n("ds-icon",{key:"8328134823156a62bf473511d25cce82ee6ef7d6",class:"tag__remove-x",name:"Cross",size:o,color:"inherit"})))}static get style(){return a()}},[2,"ds-chip",{label:[1],state:[1],size:[1],isInset:[4,"is-inset"],insetDepth:[1,"inset-depth"],rounded:[4],maxWidth:[8,"max-width"],isInactive:[4,"is-inactive"],removeLabel:[1,"remove-label"]}]);function v(){if(typeof customElements==="undefined"){return}const i=["ds-chip","ds-icon","ds-text"];i.forEach((i=>{switch(i){case"ds-chip":if(!customElements.get(r(i))){customElements.define(r(i),h)}break;case"ds-icon":if(!customElements.get(r(i))){c()}break;case"ds-text":if(!customElements.get(r(i))){t()}break}}))}v();export{h as C,v as d};
2
+ //# sourceMappingURL=p-BqVXMEJm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["chipCss","ICON_SIZE","md","sm","xs","Chip","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","state","size","isInset","insetDepth","rounded","isInactive","removeLabel","handleRemove","e","stopPropagation","dsRemove","emit","render","textVariant","CONTROL_TEXT_VARIANT","iconSize","doubleInset","maxWidthStyle","maxWidth","undefined","h","Host","key","class","tag","chip","style","as","variant","color","label","type","tag__remove","onClick","replace","disabled","name"],"sources":["src/wc/components/Chip/Chip.css?tag=ds-chip&encapsulation=scoped","src/wc/components/Chip/Chip.tsx"],"sourcesContent":["@import '../../utils/tag-chip.css';\n@import '../../utils/control-density-inset.css';\n\n/*\n * Semantic state colors — Chip’s differentiator from Tag.\n * All states use the faint contrast weight; hue comes from the state.\n */\n:host(.chip--default) {\n background-color: var(--color-background-faint-neutral);\n color: var(--color-foreground-bold-neutral);\n}\n\n:host(.chip--active) {\n background-color: var(--color-background-faint-brand);\n color: var(--color-foreground-bold-brand);\n}\n\n:host(.chip--error) {\n background-color: var(--color-background-faint-negative);\n color: var(--color-foreground-bold-negative);\n}\n\n:host(.chip--caution) {\n background-color: var(--color-background-faint-caution);\n color: var(--color-foreground-bold-caution);\n}\n\n/*\n * Label↔dismiss uses host gap, mirroring Tag icon↔label spacing:\n * [inset][text][inset][gap][icon].\n */\n.tag__remove {\n --ds-chip-remove-size: var(--ds-control-height);\n\n padding: 0;\n margin: 0;\n border: none;\n box-sizing: border-box;\n background: none;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--ds-chip-remove-size);\n height: var(--ds-chip-remove-size);\n cursor: default;\n color: inherit;\n flex-shrink: 0;\n position: relative;\n z-index: 2;\n border-radius: var(--dimension-radius-half);\n}\n\n/* The dismiss action nests inside the already-inset chip, so its reduction is additive. */\n:host(.ds-control--inset) .tag__remove {\n --ds-chip-remove-size: calc(var(--ds-control-height) - var(--dimension-space-050));\n}\n\n:host(.ds-control--inset) {\n padding-inline-end: var(--dimension-space-025);\n}\n\n:host(.ds-control--inset-double) .tag__remove {\n --ds-chip-remove-size: calc(var(--ds-control-height) - var(--dimension-space-100));\n}\n\n:host(.ds-control--inset-double) {\n padding-inline-end: var(--dimension-space-050);\n}\n\n.tag__remove::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: var(--dimension-radius-half);\n background-color: transparent;\n transition: var(--effect-transition-interaction-background-short-2);\n pointer-events: none;\n}\n\n@media (hover: hover) and (pointer: fine) {\n .tag__remove:hover::before {\n background-color: var(--color-interaction-hover);\n }\n}\n\n.tag__remove:active::before {\n background-color: var(--color-interaction-pressed);\n}\n\n.tag__remove-x {\n display: inline-flex;\n flex-shrink: 0;\n width: var(--ds-control-icon);\n height: var(--ds-control-icon);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport { CONTROL_TEXT_VARIANT, type ControlInsetDepth } from '../../utils';\n\n/**\n * Semantic chip state — replaces Tag’s intent × contrast matrix.\n * - `default` — neutral faint\n * - `active` — brand faint\n * - `error` — negative faint\n * - `caution` — caution faint\n */\nexport type ChipState = 'default' | 'active' | 'error' | 'caution';\nexport type ChipSize = 'md' | 'sm' | 'xs';\n\n/** Dismiss `ds-icon` size — same iconography metrics as Tag’s leading icon. */\nconst ICON_SIZE: Record<ChipSize, 'md' | 'sm' | 'xs'> = {\n md: 'md',\n sm: 'sm',\n xs: 'xs',\n};\n\n/**\n * Removable chip — same density recipe as Tag, but colored by semantic `state`\n * (not intent × contrast). Not a toggle/select control; the only intentional\n * action is remove.\n */\n@Component({\n tag: 'ds-chip',\n styleUrl: 'Chip.css',\n scoped: true,\n})\nexport class Chip {\n @Prop() label!: string;\n /** Semantic color state. @default 'default' */\n @Prop() state: ChipState = 'default';\n @Prop() size: ChipSize = 'md';\n /** Use reduced outer geometry when nested inside a control of the same size. */\n @Prop() isInset: boolean = false;\n /** Single removes 4px overall; double removes 8px overall (xs stays single). */\n @Prop() insetDepth: ControlInsetDepth = 'single';\n @Prop() rounded: boolean = false;\n @Prop() maxWidth: string | number | undefined;\n @Prop() isInactive: boolean = false;\n /** Accessible remove action. Use `{label}` as the chip-label placeholder. */\n @Prop() removeLabel: string = 'Remove {label}';\n\n /** Fired when the remove button is clicked. */\n @Event() dsRemove!: EventEmitter<void>;\n\n private handleRemove = (e: MouseEvent) => {\n e.stopPropagation();\n if (this.isInactive) return;\n this.dsRemove.emit();\n };\n\n render() {\n const textVariant = CONTROL_TEXT_VARIANT[this.size];\n const iconSize = ICON_SIZE[this.size];\n const doubleInset = this.isInset && this.insetDepth === 'double' && this.size !== 'xs';\n\n const maxWidthStyle =\n this.maxWidth != null\n ? { maxWidth: typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth }\n : undefined;\n\n return (\n <Host\n class={{\n tag: true,\n chip: true,\n [`chip--${this.state}`]: true,\n [`tag--size-${this.size}`]: true,\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n 'ds-control--inset': this.isInset && !doubleInset,\n 'ds-control--inset-double': doubleInset,\n 'tag--rounded': this.rounded,\n 'tag--removable': true,\n /* Hover overlay on the chip surface — dismiss is the only action. */\n 'ds-interaction-fill': !this.isInactive,\n 'ds-control-inactive': this.isInactive,\n }}\n style={maxWidthStyle}\n aria-disabled={this.isInactive ? 'true' : undefined}\n >\n <ds-text class=\"tag__label\" as=\"span\" variant={textVariant} color=\"inherit\">\n {this.label}\n </ds-text>\n <button\n type=\"button\"\n class={{\n tag__remove: true,\n 'ds-focus-ring-inset': true,\n }}\n onClick={this.handleRemove}\n aria-label={this.removeLabel.replace('{label}', this.label)}\n disabled={this.isInactive || undefined}\n >\n <ds-icon class=\"tag__remove-x\" name=\"Cross\" size={iconSize} color=\"inherit\"></ds-icon>\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"8KAAA,MAAMA,EAAU,IAAM,g3gBCctB,MAAMC,EAAkD,CACtDC,GAAI,KACJC,GAAI,KACJC,GAAI,M,MAaOC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,+EAQUC,KAAAC,MAAmB,UACnBD,KAAAE,KAAiB,KAEjBF,KAAAG,QAAmB,MAEnBH,KAAAI,WAAgC,SAChCJ,KAAAK,QAAmB,MAEnBL,KAAAM,WAAsB,MAEtBN,KAAAO,YAAsB,iBAKtBP,KAAAQ,aAAgBC,IACtBA,EAAEC,kBACF,GAAIV,KAAKM,WAAY,OACrBN,KAAKW,SAASC,MAAM,CAoDvB,CAjDC,MAAAC,GACE,MAAMC,EAAcC,EAAqBf,KAAKE,MAC9C,MAAMc,EAAWzB,EAAUS,KAAKE,MAChC,MAAMe,EAAcjB,KAAKG,SAAWH,KAAKI,aAAe,UAAYJ,KAAKE,OAAS,KAElF,MAAMgB,EACJlB,KAAKmB,UAAY,KACb,CAAEA,gBAAiBnB,KAAKmB,WAAa,SAAW,GAAGnB,KAAKmB,aAAenB,KAAKmB,UAC5EC,UAEN,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLC,IAAK,KACLC,KAAM,KACN,CAAC,SAAS1B,KAAKC,SAAU,KACzB,CAAC,aAAaD,KAAKE,QAAS,KAC5B,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,oBAAqBF,KAAKG,UAAYc,EACtC,2BAA4BA,EAC5B,eAAgBjB,KAAKK,QACrB,iBAAkB,KAElB,uBAAwBL,KAAKM,WAC7B,sBAAuBN,KAAKM,YAE9BqB,MAAOT,EAAa,gBACLlB,KAAKM,WAAa,OAASc,WAE1CC,EAAA,WAAAE,IAAA,2CAASC,MAAM,aAAaI,GAAG,OAAOC,QAASf,EAAagB,MAAM,WAC/D9B,KAAK+B,OAERV,EAAA,UAAAE,IAAA,2CACES,KAAK,SACLR,MAAO,CACLS,YAAa,KACb,sBAAuB,MAEzBC,QAASlC,KAAKQ,aAAY,aACdR,KAAKO,YAAY4B,QAAQ,UAAWnC,KAAK+B,OACrDK,SAAUpC,KAAKM,YAAcc,WAE7BC,EAAA,WAAAE,IAAA,2CAASC,MAAM,gBAAgBa,KAAK,QAAQnC,KAAMc,EAAUc,MAAM,a","ignoreList":[]}