@ds-mo/ui 3.0.0 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (456) hide show
  1. package/dist/.build-stamp +1 -1
  2. package/dist/angular/angular-component-lib/utils.d.ts +9 -0
  3. package/dist/angular/angular-component-lib/utils.js +58 -0
  4. package/dist/angular/boolean-value-accessor.d.ts +9 -0
  5. package/dist/angular/boolean-value-accessor.js +37 -0
  6. package/dist/angular/ds-app-shell.d.ts +12 -0
  7. package/dist/angular/ds-app-shell.js +38 -0
  8. package/dist/angular/ds-badge.d.ts +12 -0
  9. package/dist/angular/ds-badge.js +38 -0
  10. package/dist/angular/ds-banner.d.ts +15 -0
  11. package/dist/angular/ds-banner.js +42 -0
  12. package/dist/angular/ds-bar-nav.d.ts +18 -0
  13. package/dist/angular/ds-bar-nav.js +42 -0
  14. package/dist/angular/ds-button-filled.d.ts +15 -0
  15. package/dist/angular/ds-button-filled.js +43 -0
  16. package/dist/angular/ds-button-unfilled.d.ts +17 -0
  17. package/dist/angular/ds-button-unfilled.js +46 -0
  18. package/dist/angular/ds-card-data-viz-donut.d.ts +18 -0
  19. package/dist/angular/ds-card-data-viz-donut.js +42 -0
  20. package/dist/angular/ds-card-setting.d.ts +18 -0
  21. package/dist/angular/ds-card-setting.js +42 -0
  22. package/dist/angular/ds-card.d.ts +12 -0
  23. package/dist/angular/ds-card.js +38 -0
  24. package/dist/angular/ds-chart-bar.d.ts +12 -0
  25. package/dist/angular/ds-chart-bar.js +38 -0
  26. package/dist/angular/ds-chart-donut.d.ts +19 -0
  27. package/dist/angular/ds-chart-donut.js +42 -0
  28. package/dist/angular/ds-chart-legend.d.ts +30 -0
  29. package/dist/angular/ds-chart-legend.js +45 -0
  30. package/dist/angular/ds-chart-line.d.ts +12 -0
  31. package/dist/angular/ds-chart-line.js +38 -0
  32. package/dist/angular/ds-checkbox.d.ts +15 -0
  33. package/dist/angular/ds-checkbox.js +42 -0
  34. package/dist/angular/ds-chip.d.ts +18 -0
  35. package/dist/angular/ds-chip.js +42 -0
  36. package/dist/angular/ds-divider.d.ts +12 -0
  37. package/dist/angular/ds-divider.js +38 -0
  38. package/dist/angular/ds-empty-state.d.ts +12 -0
  39. package/dist/angular/ds-empty-state.js +38 -0
  40. package/dist/angular/ds-field.d.ts +12 -0
  41. package/dist/angular/ds-field.js +38 -0
  42. package/dist/angular/ds-icon.d.ts +12 -0
  43. package/dist/angular/ds-icon.js +38 -0
  44. package/dist/angular/ds-input.d.ts +17 -0
  45. package/dist/angular/ds-input.js +46 -0
  46. package/dist/angular/ds-loader.d.ts +12 -0
  47. package/dist/angular/ds-loader.js +38 -0
  48. package/dist/angular/ds-menu.d.ts +24 -0
  49. package/dist/angular/ds-menu.js +48 -0
  50. package/dist/angular/ds-modal.d.ts +15 -0
  51. package/dist/angular/ds-modal.js +42 -0
  52. package/dist/angular/ds-pagination.d.ts +15 -0
  53. package/dist/angular/ds-pagination.js +42 -0
  54. package/dist/angular/ds-panel-nav.d.ts +42 -0
  55. package/dist/angular/ds-panel-nav.js +58 -0
  56. package/dist/angular/ds-panel-tools.d.ts +33 -0
  57. package/dist/angular/ds-panel-tools.js +49 -0
  58. package/dist/angular/ds-radio-group.d.ts +15 -0
  59. package/dist/angular/ds-radio-group.js +42 -0
  60. package/dist/angular/ds-select.d.ts +18 -0
  61. package/dist/angular/ds-select.js +42 -0
  62. package/dist/angular/ds-shell-gradient-picker.d.ts +16 -0
  63. package/dist/angular/ds-shell-gradient-picker.js +42 -0
  64. package/dist/angular/ds-shell-gradient-swatch.d.ts +16 -0
  65. package/dist/angular/ds-shell-gradient-swatch.js +42 -0
  66. package/dist/angular/ds-skeleton.d.ts +12 -0
  67. package/dist/angular/ds-skeleton.js +38 -0
  68. package/dist/angular/ds-slider.d.ts +15 -0
  69. package/dist/angular/ds-slider.js +42 -0
  70. package/dist/angular/ds-tab-group-nav.d.ts +20 -0
  71. package/dist/angular/ds-tab-group-nav.js +46 -0
  72. package/dist/angular/ds-tab-group.d.ts +15 -0
  73. package/dist/angular/ds-tab-group.js +42 -0
  74. package/dist/angular/ds-table.d.ts +33 -0
  75. package/dist/angular/ds-table.js +48 -0
  76. package/dist/angular/ds-tag.d.ts +12 -0
  77. package/dist/angular/ds-tag.js +38 -0
  78. package/dist/angular/ds-text.d.ts +12 -0
  79. package/dist/angular/ds-text.js +38 -0
  80. package/dist/angular/ds-toggle.d.ts +15 -0
  81. package/dist/angular/ds-toggle.js +42 -0
  82. package/dist/angular/ds-tooltip-data-viz.d.ts +12 -0
  83. package/dist/angular/ds-tooltip-data-viz.js +38 -0
  84. package/dist/angular/ds-tooltip.d.ts +12 -0
  85. package/dist/angular/ds-tooltip.js +38 -0
  86. package/dist/angular/index.d.ts +2 -0
  87. package/dist/angular/index.js +43 -0
  88. package/dist/angular/proxies.d.ts +44 -0
  89. package/dist/angular/proxies.js +45 -0
  90. package/dist/angular/radio-value-accessor.d.ts +8 -0
  91. package/dist/angular/radio-value-accessor.js +34 -0
  92. package/dist/angular/select-value-accessor.d.ts +8 -0
  93. package/dist/angular/select-value-accessor.js +34 -0
  94. package/dist/angular/text-value-accessor.d.ts +8 -0
  95. package/dist/angular/text-value-accessor.js +34 -0
  96. package/dist/angular/value-accessor.d.ts +18 -0
  97. package/dist/angular/value-accessor.js +39 -0
  98. package/dist/components/ds-badge.js +1 -1
  99. package/dist/components/ds-banner.js +1 -1
  100. package/dist/components/ds-bar-nav.js +1 -1
  101. package/dist/components/ds-bar-nav.js.map +1 -1
  102. package/dist/components/ds-button-filled.js +1 -1
  103. package/dist/components/ds-button-unfilled.js +1 -1
  104. package/dist/components/ds-card-data-viz-donut.js +1 -1
  105. package/dist/components/ds-card-data-viz-donut.js.map +1 -1
  106. package/dist/components/ds-card-setting.js +1 -1
  107. package/dist/components/ds-card-setting.js.map +1 -1
  108. package/dist/components/ds-card.js +1 -1
  109. package/dist/components/ds-chart-donut.js +1 -1
  110. package/dist/components/ds-chart-donut.js.map +1 -1
  111. package/dist/components/ds-chart-legend.js +1 -1
  112. package/dist/components/ds-chart-legend.js.map +1 -1
  113. package/dist/components/ds-checkbox.js +1 -1
  114. package/dist/components/ds-checkbox.js.map +1 -1
  115. package/dist/components/ds-chip.js +1 -1
  116. package/dist/components/ds-chip.js.map +1 -1
  117. package/dist/components/ds-empty-state.js +1 -1
  118. package/dist/components/ds-empty-state.js.map +1 -1
  119. package/dist/components/ds-field.js +1 -1
  120. package/dist/components/ds-input.js +1 -1
  121. package/dist/components/ds-input.js.map +1 -1
  122. package/dist/components/ds-menu.js +1 -1
  123. package/dist/components/ds-modal.js +1 -1
  124. package/dist/components/ds-pagination.js +1 -1
  125. package/dist/components/ds-pagination.js.map +1 -1
  126. package/dist/components/ds-panel-nav.js +1 -1
  127. package/dist/components/ds-panel-nav.js.map +1 -1
  128. package/dist/components/ds-panel-tools.js +1 -1
  129. package/dist/components/ds-panel-tools.js.map +1 -1
  130. package/dist/components/ds-radio-group.js +1 -1
  131. package/dist/components/ds-radio-group.js.map +1 -1
  132. package/dist/components/ds-select.js +1 -1
  133. package/dist/components/ds-select.js.map +1 -1
  134. package/dist/components/ds-shell-gradient-picker.js +1 -1
  135. package/dist/components/ds-shell-gradient-swatch.js +1 -1
  136. package/dist/components/ds-slider.js +1 -1
  137. package/dist/components/ds-tab-group-nav.js +1 -1
  138. package/dist/components/ds-tab-group.js +1 -1
  139. package/dist/components/ds-tab-group.js.map +1 -1
  140. package/dist/components/ds-table.js +1 -1
  141. package/dist/components/ds-table.js.map +1 -1
  142. package/dist/components/ds-tag.js +1 -1
  143. package/dist/components/ds-text.js +1 -1
  144. package/dist/components/ds-toggle.js +1 -1
  145. package/dist/components/ds-toggle.js.map +1 -1
  146. package/dist/components/ds-tooltip-data-viz.js +1 -1
  147. package/dist/components/ds-tooltip.js +1 -1
  148. package/dist/components/index.js +1 -1
  149. package/dist/components/index.js.map +1 -1
  150. package/dist/components/p-BBpASejH.js +2 -0
  151. package/dist/components/p-BBpASejH.js.map +1 -0
  152. package/dist/components/{p-V2qW8NL0.js → p-BFiaUYu7.js} +2 -2
  153. package/dist/components/p-BFiaUYu7.js.map +1 -0
  154. package/dist/components/p-BOQRM49Q.js +2 -0
  155. package/dist/components/{p-sBx2MuF2.js.map → p-BOQRM49Q.js.map} +1 -1
  156. package/dist/components/p-CTK82RIw.js +2 -0
  157. package/dist/components/p-CTK82RIw.js.map +1 -0
  158. package/dist/components/{p-BSNlp8Di.js → p-Cp86p-11.js} +2 -2
  159. package/dist/components/{p-BSNlp8Di.js.map → p-Cp86p-11.js.map} +1 -1
  160. package/dist/components/{p-DQ3l2TXw.js → p-DEgY_Lnb.js} +2 -2
  161. package/dist/components/{p-CNgNgezy.js → p-DHjjwgku.js} +2 -2
  162. package/dist/components/{p-CNgNgezy.js.map → p-DHjjwgku.js.map} +1 -1
  163. package/dist/components/p-DI8rHm9u.js +2 -0
  164. package/dist/components/p-DI8rHm9u.js.map +1 -0
  165. package/dist/components/p-DMD-RO1W.js +2 -0
  166. package/dist/components/p-DMD-RO1W.js.map +1 -0
  167. package/dist/components/{p-BVNJnFI9.js → p-DOEMwKBb.js} +2 -2
  168. package/dist/components/{p-BVNJnFI9.js.map → p-DOEMwKBb.js.map} +1 -1
  169. package/dist/components/p-DolYlDbY.js +2 -0
  170. package/dist/components/p-DolYlDbY.js.map +1 -0
  171. package/dist/framework/angular.d.ts +6 -0
  172. package/dist/framework/angular.js +6 -0
  173. package/dist/lib/utils/format-compact-number.d.ts +1 -1
  174. package/dist/lib/utils/index.js +8 -1
  175. package/dist/lib/utils/index.js.map +2 -2
  176. package/dist/react/components.d.ts +44 -0
  177. package/{src/react/components.ts → dist/react/components.js} +0 -1
  178. package/dist/react/ds-app-shell.d.ts +9 -0
  179. package/dist/react/ds-app-shell.js +12 -0
  180. package/dist/react/ds-badge.d.ts +9 -0
  181. package/dist/react/ds-badge.js +12 -0
  182. package/dist/react/ds-banner.d.ts +12 -0
  183. package/dist/react/ds-banner.js +12 -0
  184. package/dist/react/ds-bar-nav.d.ts +12 -0
  185. package/dist/react/ds-bar-nav.js +12 -0
  186. package/dist/react/ds-button-filled.d.ts +12 -0
  187. package/dist/react/ds-button-filled.js +12 -0
  188. package/dist/react/ds-button-unfilled.d.ts +13 -0
  189. package/dist/react/ds-button-unfilled.js +15 -0
  190. package/dist/react/ds-card-data-viz-donut.d.ts +12 -0
  191. package/dist/react/ds-card-data-viz-donut.js +12 -0
  192. package/dist/react/ds-card-setting.d.ts +12 -0
  193. package/dist/react/ds-card-setting.js +12 -0
  194. package/dist/react/ds-card.d.ts +9 -0
  195. package/dist/react/ds-card.js +12 -0
  196. package/dist/react/ds-chart-bar.d.ts +9 -0
  197. package/dist/react/ds-chart-bar.js +12 -0
  198. package/dist/react/ds-chart-donut.d.ts +12 -0
  199. package/dist/react/ds-chart-donut.js +12 -0
  200. package/dist/react/ds-chart-legend.d.ts +16 -0
  201. package/dist/react/ds-chart-legend.js +15 -0
  202. package/dist/react/ds-chart-line.d.ts +9 -0
  203. package/dist/react/ds-chart-line.js +12 -0
  204. package/dist/react/ds-checkbox.d.ts +12 -0
  205. package/dist/react/ds-checkbox.js +12 -0
  206. package/dist/react/ds-chip.d.ts +12 -0
  207. package/dist/react/ds-chip.js +12 -0
  208. package/dist/react/ds-divider.d.ts +9 -0
  209. package/dist/react/ds-divider.js +12 -0
  210. package/dist/react/ds-empty-state.d.ts +9 -0
  211. package/dist/react/ds-empty-state.js +12 -0
  212. package/dist/react/ds-field.d.ts +9 -0
  213. package/dist/react/ds-field.js +12 -0
  214. package/dist/react/ds-icon.d.ts +9 -0
  215. package/dist/react/ds-icon.js +12 -0
  216. package/dist/react/ds-input.d.ts +13 -0
  217. package/dist/react/ds-input.js +15 -0
  218. package/dist/react/ds-loader.d.ts +9 -0
  219. package/dist/react/ds-loader.js +12 -0
  220. package/dist/react/ds-menu.d.ts +14 -0
  221. package/dist/react/ds-menu.js +16 -0
  222. package/dist/react/ds-modal.d.ts +12 -0
  223. package/dist/react/ds-modal.js +12 -0
  224. package/dist/react/ds-pagination.d.ts +12 -0
  225. package/dist/react/ds-pagination.js +12 -0
  226. package/dist/react/ds-panel-nav.d.ts +17 -0
  227. package/dist/react/ds-panel-nav.js +19 -0
  228. package/dist/react/ds-panel-tools.d.ts +17 -0
  229. package/dist/react/ds-panel-tools.js +16 -0
  230. package/dist/react/ds-radio-group.d.ts +12 -0
  231. package/dist/react/ds-radio-group.js +12 -0
  232. package/dist/react/ds-select.d.ts +12 -0
  233. package/dist/react/ds-select.js +12 -0
  234. package/dist/react/ds-shell-gradient-picker.d.ts +12 -0
  235. package/dist/react/ds-shell-gradient-picker.js +12 -0
  236. package/dist/react/ds-shell-gradient-swatch.d.ts +12 -0
  237. package/dist/react/ds-shell-gradient-swatch.js +12 -0
  238. package/dist/react/ds-skeleton.d.ts +9 -0
  239. package/dist/react/ds-skeleton.js +12 -0
  240. package/dist/react/ds-slider.d.ts +12 -0
  241. package/dist/react/ds-slider.js +12 -0
  242. package/dist/react/ds-tab-group-nav.d.ts +13 -0
  243. package/dist/react/ds-tab-group-nav.js +15 -0
  244. package/dist/react/ds-tab-group.d.ts +12 -0
  245. package/dist/react/ds-tab-group.js +12 -0
  246. package/dist/react/ds-table.d.ts +21 -0
  247. package/dist/react/ds-table.js +16 -0
  248. package/dist/react/ds-tag.d.ts +9 -0
  249. package/dist/react/ds-tag.js +12 -0
  250. package/dist/react/ds-text.d.ts +9 -0
  251. package/dist/react/ds-text.js +12 -0
  252. package/dist/react/ds-toggle.d.ts +12 -0
  253. package/dist/react/ds-toggle.js +12 -0
  254. package/dist/react/ds-tooltip-data-viz.d.ts +9 -0
  255. package/dist/react/ds-tooltip-data-viz.js +12 -0
  256. package/dist/react/ds-tooltip.d.ts +9 -0
  257. package/dist/react/ds-tooltip.js +12 -0
  258. package/dist/types/components/BarNav/BarNav.d.ts +1 -0
  259. package/dist/types/components/ButtonFilled/ButtonFilled.d.ts +1 -1
  260. package/dist/types/components/ButtonUnfilled/ButtonUnfilled.d.ts +1 -1
  261. package/dist/types/components/CardDataVizDonut/CardDataVizDonut.d.ts +1 -0
  262. package/dist/types/components/CardSetting/CardSetting.d.ts +3 -0
  263. package/dist/types/components/ChartDonut/ChartDonut.d.ts +2 -0
  264. package/dist/types/components/ChartLegend/ChartLegend.d.ts +1 -0
  265. package/dist/types/components/Checkbox/Checkbox.d.ts +12 -0
  266. package/dist/types/components/Chip/Chip.d.ts +2 -0
  267. package/dist/types/components/EmptyState/EmptyState.d.ts +2 -0
  268. package/dist/types/components/Input/Input.d.ts +14 -1
  269. package/dist/types/components/Menu/Menu.d.ts +2 -0
  270. package/dist/types/components/Pagination/Pagination.d.ts +3 -0
  271. package/dist/types/components/PanelNav/PanelNav.d.ts +7 -0
  272. package/dist/types/components/PanelTools/PanelTools.d.ts +2 -0
  273. package/dist/types/components/RadioGroup/RadioGroup.d.ts +13 -1
  274. package/dist/types/components/Select/Select.d.ts +13 -1
  275. package/dist/types/components/ShellGradientPicker/ShellGradientPicker.d.ts +1 -0
  276. package/dist/types/components/ShellGradientSwatch/ShellGradientSwatch.d.ts +1 -1
  277. package/dist/types/components/TabGroup/TabGroup.d.ts +1 -1
  278. package/dist/types/components/TabGroupNav/TabGroupNav.d.ts +1 -1
  279. package/dist/types/components/Table/Table.d.ts +6 -0
  280. package/dist/types/components/Text/Text.d.ts +2 -1
  281. package/dist/types/components/Toggle/Toggle.d.ts +12 -0
  282. package/dist/types/components/Tooltip/Tooltip.d.ts +6 -0
  283. package/dist/types/components.d.ts +527 -32
  284. package/dist/types/stencil-public-runtime.d.ts +1 -0
  285. package/dist/types/utils/format-compact-number.d.ts +1 -1
  286. package/package.json +58 -41
  287. package/dist/components/p-B_ENgncs.js +0 -2
  288. package/dist/components/p-B_ENgncs.js.map +0 -1
  289. package/dist/components/p-CQmul5NK.js +0 -2
  290. package/dist/components/p-CQmul5NK.js.map +0 -1
  291. package/dist/components/p-CsaW5gDM.js +0 -2
  292. package/dist/components/p-CsaW5gDM.js.map +0 -1
  293. package/dist/components/p-DEpLlQZK.js +0 -2
  294. package/dist/components/p-DEpLlQZK.js.map +0 -1
  295. package/dist/components/p-DRqJ3RUb.js +0 -2
  296. package/dist/components/p-DRqJ3RUb.js.map +0 -1
  297. package/dist/components/p-V2qW8NL0.js.map +0 -1
  298. package/dist/components/p-sBx2MuF2.js +0 -2
  299. package/src/angular/angular-component-lib/utils.ts +0 -65
  300. package/src/angular/index.ts +0 -45
  301. package/src/angular/proxies.ts +0 -1156
  302. package/src/react/ds-app-shell.ts +0 -26
  303. package/src/react/ds-badge.ts +0 -26
  304. package/src/react/ds-banner.ts +0 -27
  305. package/src/react/ds-bar-nav.ts +0 -27
  306. package/src/react/ds-button-filled.ts +0 -27
  307. package/src/react/ds-button-unfilled.ts +0 -33
  308. package/src/react/ds-card-data-viz-donut.ts +0 -27
  309. package/src/react/ds-card-setting.ts +0 -27
  310. package/src/react/ds-card.ts +0 -26
  311. package/src/react/ds-chart-bar.ts +0 -26
  312. package/src/react/ds-chart-donut.ts +0 -27
  313. package/src/react/ds-chart-legend.ts +0 -33
  314. package/src/react/ds-chart-line.ts +0 -26
  315. package/src/react/ds-checkbox.ts +0 -27
  316. package/src/react/ds-chip.ts +0 -27
  317. package/src/react/ds-divider.ts +0 -26
  318. package/src/react/ds-empty-state.ts +0 -26
  319. package/src/react/ds-field.ts +0 -26
  320. package/src/react/ds-icon.ts +0 -26
  321. package/src/react/ds-input.ts +0 -33
  322. package/src/react/ds-loader.ts +0 -26
  323. package/src/react/ds-menu.ts +0 -35
  324. package/src/react/ds-modal.ts +0 -27
  325. package/src/react/ds-pagination.ts +0 -27
  326. package/src/react/ds-panel-nav.ts +0 -41
  327. package/src/react/ds-panel-tools.ts +0 -35
  328. package/src/react/ds-radio-group.ts +0 -27
  329. package/src/react/ds-select.ts +0 -27
  330. package/src/react/ds-shell-gradient-picker.ts +0 -27
  331. package/src/react/ds-shell-gradient-swatch.ts +0 -27
  332. package/src/react/ds-skeleton.ts +0 -26
  333. package/src/react/ds-slider.ts +0 -27
  334. package/src/react/ds-tab-group-nav.ts +0 -33
  335. package/src/react/ds-tab-group.ts +0 -27
  336. package/src/react/ds-table.ts +0 -35
  337. package/src/react/ds-tag.ts +0 -26
  338. package/src/react/ds-text.ts +0 -26
  339. package/src/react/ds-toggle.ts +0 -27
  340. package/src/react/ds-tooltip-data-viz.ts +0 -26
  341. package/src/react/ds-tooltip.ts +0 -26
  342. package/src/wc/components/AppShell/AppShell.tsx +0 -377
  343. package/src/wc/components/Badge/Badge.tsx +0 -179
  344. package/src/wc/components/Badge/index.ts +0 -1
  345. package/src/wc/components/Banner/Banner.tsx +0 -156
  346. package/src/wc/components/BarNav/BarNav.tsx +0 -742
  347. package/src/wc/components/BarNav/bar-nav-dom-utils.ts +0 -23
  348. package/src/wc/components/BarNav/bar-nav-tabs-menu-utils.ts +0 -114
  349. package/src/wc/components/BarNav/bar-nav-types.ts +0 -3
  350. package/src/wc/components/BarNav/bar-nav-utils.ts +0 -67
  351. package/src/wc/components/BarNav/index.ts +0 -2
  352. package/src/wc/components/ButtonFilled/ButtonFilled.tsx +0 -171
  353. package/src/wc/components/ButtonFilled/index.ts +0 -7
  354. package/src/wc/components/ButtonUnfilled/ButtonUnfilled.tsx +0 -229
  355. package/src/wc/components/ButtonUnfilled/index.ts +0 -7
  356. package/src/wc/components/Card/Card.tsx +0 -78
  357. package/src/wc/components/Card/index.ts +0 -1
  358. package/src/wc/components/CardDataVizDonut/CardDataVizDonut.tsx +0 -108
  359. package/src/wc/components/CardDataVizDonut/index.ts +0 -1
  360. package/src/wc/components/CardSetting/CardSetting.tsx +0 -81
  361. package/src/wc/components/CardSetting/index.ts +0 -1
  362. package/src/wc/components/ChartBar/ChartBar.tsx +0 -88
  363. package/src/wc/components/ChartBar/index.ts +0 -1
  364. package/src/wc/components/ChartDonut/ChartDonut.tsx +0 -289
  365. package/src/wc/components/ChartDonut/index.ts +0 -1
  366. package/src/wc/components/ChartLegend/ChartLegend.tsx +0 -125
  367. package/src/wc/components/ChartLegend/index.ts +0 -2
  368. package/src/wc/components/ChartLine/ChartLine.tsx +0 -102
  369. package/src/wc/components/ChartLine/index.ts +0 -1
  370. package/src/wc/components/Checkbox/Checkbox.tsx +0 -60
  371. package/src/wc/components/Checkbox/index.ts +0 -1
  372. package/src/wc/components/Chip/Chip.tsx +0 -104
  373. package/src/wc/components/Chip/index.ts +0 -1
  374. package/src/wc/components/Divider/Divider.tsx +0 -107
  375. package/src/wc/components/Divider/index.ts +0 -2
  376. package/src/wc/components/EmptyState/EmptyState.tsx +0 -30
  377. package/src/wc/components/Field/Field.tsx +0 -30
  378. package/src/wc/components/Icon/Icon.tsx +0 -172
  379. package/src/wc/components/Icon/flag-icon-catalog.ts +0 -36
  380. package/src/wc/components/Icon/icon-cache.ts +0 -47
  381. package/src/wc/components/Icon/icon-svg.ts +0 -73
  382. package/src/wc/components/Icon/index.ts +0 -1
  383. package/src/wc/components/Icon/system-icon-catalog.ts +0 -401
  384. package/src/wc/components/Input/Input.tsx +0 -107
  385. package/src/wc/components/Input/index.ts +0 -1
  386. package/src/wc/components/Loader/Loader.tsx +0 -99
  387. package/src/wc/components/Loader/index.ts +0 -1
  388. package/src/wc/components/Menu/Menu.tsx +0 -437
  389. package/src/wc/components/Menu/menu-placement.ts +0 -26
  390. package/src/wc/components/Menu/menu-position.ts +0 -78
  391. package/src/wc/components/Menu/menu-types.ts +0 -39
  392. package/src/wc/components/Modal/Modal.tsx +0 -213
  393. package/src/wc/components/Pagination/Pagination.tsx +0 -97
  394. package/src/wc/components/PanelNav/PanelNav.tsx +0 -707
  395. package/src/wc/components/PanelNav/index.ts +0 -17
  396. package/src/wc/components/PanelNav/panel-nav-types.ts +0 -36
  397. package/src/wc/components/PanelNav/panel-nav-utils.ts +0 -79
  398. package/src/wc/components/PanelTools/PanelTools.tsx +0 -366
  399. package/src/wc/components/PanelTools/index.ts +0 -7
  400. package/src/wc/components/PanelTools/panel-tools-types.ts +0 -44
  401. package/src/wc/components/PanelTools/panel-tools-utils.ts +0 -50
  402. package/src/wc/components/RadioGroup/RadioGroup.tsx +0 -130
  403. package/src/wc/components/RadioGroup/index.ts +0 -1
  404. package/src/wc/components/Select/Select.tsx +0 -274
  405. package/src/wc/components/Select/index.ts +0 -1
  406. package/src/wc/components/ShellGradientPicker/ShellGradientPicker.tsx +0 -55
  407. package/src/wc/components/ShellGradientSwatch/ShellGradientSwatch.tsx +0 -69
  408. package/src/wc/components/ShellGradientSwatch/shell-gradient-swatch-types.ts +0 -17
  409. package/src/wc/components/Skeleton/Skeleton.tsx +0 -64
  410. package/src/wc/components/Skeleton/index.ts +0 -1
  411. package/src/wc/components/Slider/Slider.tsx +0 -76
  412. package/src/wc/components/Slider/index.ts +0 -1
  413. package/src/wc/components/TabGroup/TabGroup.tsx +0 -204
  414. package/src/wc/components/TabGroup/tab-item-utils.ts +0 -25
  415. package/src/wc/components/TabGroupNav/TabGroupNav.tsx +0 -347
  416. package/src/wc/components/Table/Table.tsx +0 -273
  417. package/src/wc/components/Tag/Tag.tsx +0 -63
  418. package/src/wc/components/Tag/index.ts +0 -1
  419. package/src/wc/components/Text/Text.tsx +0 -98
  420. package/src/wc/components/Text/index.ts +0 -12
  421. package/src/wc/components/Text/text-types.ts +0 -23
  422. package/src/wc/components/Text/text-utils.ts +0 -13
  423. package/src/wc/components/Toggle/Toggle.tsx +0 -43
  424. package/src/wc/components/Toggle/index.ts +0 -1
  425. package/src/wc/components/Tooltip/Tooltip.tsx +0 -372
  426. package/src/wc/components/TooltipDataViz/TooltipDataViz.tsx +0 -145
  427. package/src/wc/components/TooltipDataViz/index.ts +0 -1
  428. package/src/wc/components.d.ts +0 -3569
  429. package/src/wc/nav/badge-gradient-ring.ts +0 -109
  430. package/src/wc/nav/chrome-transition.ts +0 -62
  431. package/src/wc/nav/index.ts +0 -80
  432. package/src/wc/nav/nav-chrome.ts +0 -47
  433. package/src/wc/nav/shell-chrome-metrics.ts +0 -49
  434. package/src/wc/nav/shell-gradient-presets.ts +0 -60
  435. package/src/wc/nav/shell-gradient.ts +0 -94
  436. package/src/wc/nav/shell-shortcuts.ts +0 -63
  437. package/src/wc/nav/shell-view-transition.ts +0 -122
  438. package/src/wc/utils/chart-colors.ts +0 -7
  439. package/src/wc/utils/chart-types.ts +0 -25
  440. package/src/wc/utils/control-density.css +0 -43
  441. package/src/wc/utils/control-inactive.css +0 -20
  442. package/src/wc/utils/control-text.ts +0 -11
  443. package/src/wc/utils/control-width.css +0 -28
  444. package/src/wc/utils/control-width.ts +0 -10
  445. package/src/wc/utils/focus-ring.css +0 -33
  446. package/src/wc/utils/format-compact-number.ts +0 -27
  447. package/src/wc/utils/index.ts +0 -27
  448. package/src/wc/utils/interaction-fill.css +0 -162
  449. package/src/wc/utils/resolve-css-length-px.ts +0 -66
  450. package/src/wc/utils/resolve-css-time-ms.ts +0 -46
  451. package/src/wc/utils/scroll-edge-fade.css +0 -80
  452. package/src/wc/utils/scroll-edge-fade.ts +0 -148
  453. package/src/wc/utils/token-defaults.ts +0 -81
  454. package/src/wc/utils/truncate-svg-text.ts +0 -25
  455. package/src/wc/utils/typography.css +0 -146
  456. /package/dist/components/{p-DQ3l2TXw.js.map → p-DEgY_Lnb.js.map} +0 -0
@@ -0,0 +1,2 @@
1
+ const t=[{threshold:1e9,suffix:"b"},{threshold:1e6,suffix:"m"},{threshold:1e3,suffix:"k"}];function n(n,r){if(r){return new Intl.NumberFormat(r,{notation:"compact",compactDisplay:"short",maximumFractionDigits:1}).format(n)}const e=n<0?"-":"";const o=Math.abs(n);if(o<1e3)return String(n);for(let n=0;n<t.length;n++){const r=t[n];if(o<r.threshold)continue;let i=Math.round(o/r.threshold*10)/10;if(i>=1e3&&n>0){const r=t[n-1];i=Math.round(o/r.threshold*10)/10;return`${e}${i}${r.suffix}`}return`${e}${i}${r.suffix}`}return String(n)}export{n as f};
2
+ //# sourceMappingURL=p-BBpASejH.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["COMPACT_UNITS","threshold","suffix","formatCompactNumber","value","locale","Intl","NumberFormat","notation","compactDisplay","maximumFractionDigits","format","sign","abs","Math","String","i","length","unit","scaled","round","next"],"sources":["src/wc/utils/format-compact-number.ts"],"sourcesContent":["const COMPACT_UNITS: { threshold: number; suffix: string }[] = [\n { threshold: 1_000_000_000, suffix: 'b' },\n { threshold: 1_000_000, suffix: 'm' },\n { threshold: 1_000, suffix: 'k' },\n];\n\n/** Compact large numbers for display: 1000 -> \"1k\", 1500 -> \"1.5k\", 110100 -> \"110.1k\", 1000000 -> \"1m\". */\nexport function formatCompactNumber(value: number, locale?: string): string {\n if (locale) {\n return new Intl.NumberFormat(locale, {\n notation: 'compact',\n compactDisplay: 'short',\n maximumFractionDigits: 1,\n }).format(value);\n }\n const sign = value < 0 ? '-' : '';\n const abs = Math.abs(value);\n if (abs < 1000) return String(value);\n\n for (let i = 0; i < COMPACT_UNITS.length; i++) {\n const unit = COMPACT_UNITS[i];\n if (abs < unit.threshold) continue;\n\n let scaled = Math.round((abs / unit.threshold) * 10) / 10;\n // Carry over, e.g. 999.96k rounds to \"1000k\" — bump to the next unit instead.\n if (scaled >= 1000 && i > 0) {\n const next = COMPACT_UNITS[i - 1];\n scaled = Math.round((abs / next.threshold) * 10) / 10;\n return `${sign}${scaled}${next.suffix}`;\n }\n return `${sign}${scaled}${unit.suffix}`;\n }\n return String(value);\n}\n"],"mappings":"AAAA,MAAMA,EAAyD,CAC7D,CAAEC,UAAW,IAAeC,OAAQ,KACpC,CAAED,UAAW,IAAWC,OAAQ,KAChC,CAAED,UAAW,IAAOC,OAAQ,MAIxB,SAAUC,EAAoBC,EAAeC,GACjD,GAAIA,EAAQ,CACV,OAAO,IAAIC,KAAKC,aAAaF,EAAQ,CACnCG,SAAU,UACVC,eAAgB,QAChBC,sBAAuB,IACtBC,OAAOP,E,CAEZ,MAAMQ,EAAOR,EAAQ,EAAI,IAAM,GAC/B,MAAMS,EAAMC,KAAKD,IAAIT,GACrB,GAAIS,EAAM,IAAM,OAAOE,OAAOX,GAE9B,IAAK,IAAIY,EAAI,EAAGA,EAAIhB,EAAciB,OAAQD,IAAK,CAC7C,MAAME,EAAOlB,EAAcgB,GAC3B,GAAIH,EAAMK,EAAKjB,UAAW,SAE1B,IAAIkB,EAASL,KAAKM,MAAOP,EAAMK,EAAKjB,UAAa,IAAM,GAEvD,GAAIkB,GAAU,KAAQH,EAAI,EAAG,CAC3B,MAAMK,EAAOrB,EAAcgB,EAAI,GAC/BG,EAASL,KAAKM,MAAOP,EAAMQ,EAAKpB,UAAa,IAAM,GACnD,MAAO,GAAGW,IAAOO,IAASE,EAAKnB,Q,CAEjC,MAAO,GAAGU,IAAOO,IAASD,EAAKhB,Q,CAEjC,OAAOa,OAAOX,EAChB,Q","ignoreList":[]}
@@ -1,2 +1,2 @@
1
- import{p as o,H as t,c as r,h as s,a as n,t as a}from"./index.js";import{g as i,i as e}from"./p-BQq26pt9.js";import{d}from"./p-DQ3l2TXw.js";import{d as c}from"./p-sBx2MuF2.js";const l=()=>`.sc-ds-tab-group-nav-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-nav: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-nav{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-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tab-group-nav: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-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-tab-group-nav-h,.ds-control-inactive.sc-ds-tab-group-nav{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-tab-group-nav-h{display:block}.tab-list.sc-ds-tab-group-nav{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative}.tab-list--vertical.sc-ds-tab-group-nav{flex-direction:column;align-items:stretch}.tab.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);background-color:transparent;border:none;border-radius:var(--dimension-radius-025);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);position:relative;transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-400);min-width:var(--dimension-size-400);box-sizing:border-box;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_dot:var(--color-foreground-bold-brand);--_dot-ring:var(--color-background-secondary)}.tab.sc-ds-tab-group-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.tab.sc-ds-tab-group-nav:hover::after{background:var(--_hover-bg);transition:none}.tab.sc-ds-tab-group-nav:active::after{background:var(--_pressed-bg);transition:none}.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-primary)}.tab-list--vertical.sc-ds-tab-group-nav .tab.sc-ds-tab-group-nav{justify-content:flex-start}.tab__label.sc-ds-tab-group-nav{position:relative;display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);white-space:nowrap}.tab__label--dot.sc-ds-tab-group-nav{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.tab__dot.sc-ds-tab-group-nav{position:absolute;top:0;right:0;pointer-events:none}.on-medium.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_dot-ring:var(--color-background-medium-neutral);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.on-bold.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_dot-ring:var(--color-background-bold-neutral);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_dot-ring:var(--color-background-strong-neutral);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group-nav{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background);--ds-focus-ring-color:var(--color-always-dark-interaction-focus);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group-nav{color:var(--color-always-dark-foreground-primary)}.on-navigation.sc-ds-tab-group-nav{color:var(--color-navigation-foreground-secondary);--_hover-bg:var(--color-navigation-interaction-hover);--_pressed-bg:var(--color-navigation-interaction-pressed);--_dot:var(--color-navigation-foreground-brand);--_dot-ring:var(--color-navigation-background);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.on-navigation.tab--selected.sc-ds-tab-group-nav{color:var(--color-navigation-foreground-primary)}.tab-list--on-navigation.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{background-color:var(--color-navigation-border-tertiary)}.tab-divider.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--dimension-size-400);padding-block:var(--dimension-space-075);flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group-nav{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--color-border-secondary)}.tab-divider--vertical.sc-ds-tab-group-nav{width:auto;height:var(--dimension-space-100);align-self:stretch;padding-block:0;padding-inline:var(--dimension-space-075)}.tab-divider--vertical.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch}`;const u=o(class o extends t{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=r(this,"dsChange");this.dsRovingExit=r(this,"dsRovingExit");this.value="";this.tabs=[];this.orientation="horizontal";this.selectionFollowsFocus=true;this.rovingEnabled=true;this.focusedTabId=""}get selectableTabs(){return i(this.tabs)}componentWillLoad(){this.syncFocusedTabId(this.value)}onValueChange(o,t){if(!this.selectionFollowsFocus){if(t===undefined||o!==this.focusedTabId){this.syncFocusedTabId(o)}return}if(t===undefined||o===t)return;requestAnimationFrame((()=>{const t=document.activeElement;if(!t||!this.el.contains(t))return;const r=t.getAttribute("data-tab-id");if(r===o)return;const s=this.el.querySelector(`[data-tab-id="${o}"]`);if(s){s.focus({preventScroll:true})}else{t.blur()}}))}onTabsChange(){if(!this.selectableTabs.some((o=>o.id===this.focusedTabId))){this.syncFocusedTabId(this.value)}}async focusTab(o){this.focusedTabId=o;const t=this.el.querySelector(`[data-tab-id="${o}"]`);t?.focus({preventScroll:true})}async focusLastTab(){const o=this.selectableTabs;const t=[...o].reverse().find((o=>!o.isInactive));if(t)await this.focusTab(t.id)}async focusFirstTab(){const o=this.selectableTabs.find((o=>!o.isInactive));if(o)await this.focusTab(o.id)}syncFocusedTabId(o){const t=this.selectableTabs;if(t.some((t=>t.id===o&&!t.isInactive))){this.focusedTabId=o;return}const r=t.find((o=>!o.isInactive));this.focusedTabId=r?.id??""}selectTab(o,t){this.value=o;this.focusedTabId=o;this.dsChange.emit(o);if(t?.focus!==false){void this.focusTab(o)}}getFocusedIndex(){return this.selectableTabs.findIndex((o=>o.id===this.focusedTabId))}findEnabledLinear(o,t){const r=this.selectableTabs;for(let s=o+t;s>=0&&s<r.length;s+=t){if(!r[s]?.isInactive)return s}return null}findEnabled(o,t){const r=this.selectableTabs;const s=r.length;for(let n=0;n<s;n++){const a=(o+t*(n+1)+s*(n+1))%s;if(!r[a]?.isInactive)return a}return o}moveFocusToIndex(o){const t=this.selectableTabs[o];if(!t)return;this.focusedTabId=t.id;void this.focusTab(t.id)}activateFocusedTab(o){if(o.key!=="Enter"&&o.key!==" ")return;const t=this.selectableTabs.find((o=>o.id===this.focusedTabId));if(!t||t.isInactive)return;o.preventDefault();this.selectTab(t.id,{focus:true})}handleKeyDown(o){const t=this.selectableTabs;if(!t.length)return;if(!this.selectionFollowsFocus){if(o.key==="Enter"||o.key===" "){this.activateFocusedTab(o);return}}const r=this.selectionFollowsFocus?t.findIndex((o=>o.id===this.value)):this.getFocusedIndex();if(r<0)return;const s=this.orientation==="vertical";let n=null;let a=null;if(!s){if(o.key==="ArrowRight"){if(this.selectionFollowsFocus){n=this.findEnabled(r,1)}else{const o=this.findEnabledLinear(r,1);if(o===null)a="end";else n=o}}else if(o.key==="ArrowLeft"){if(this.selectionFollowsFocus){n=this.findEnabled(r,-1)}else{const o=this.findEnabledLinear(r,-1);if(o===null)a="start";else n=o}}}else{if(o.key==="ArrowDown"){if(this.selectionFollowsFocus){n=this.findEnabled(r,1)}else{const o=this.findEnabledLinear(r,1);if(o===null)a="end";else n=o}}else if(o.key==="ArrowUp"){if(this.selectionFollowsFocus){n=this.findEnabled(r,-1)}else{const o=this.findEnabledLinear(r,-1);if(o===null)a="start";else n=o}}}if(o.key==="Home"){const o=t.findIndex((o=>!o.isInactive));n=o===-1?null:o}else if(o.key==="End"){const o=[...t].reverse().findIndex((o=>!o.isInactive));n=o===-1?null:t.length-1-o}if(a){o.preventDefault();this.dsRovingExit.emit(a);return}if(n!==null&&n!==r){o.preventDefault();const r=t[n];if(this.selectionFollowsFocus){this.selectTab(r.id)}else{this.moveFocusToIndex(n)}}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";if(this.background==="navigation")return"on-navigation";return`on-${this.background}`}tabIndexForTab(o){if(!this.rovingEnabled)return-1;if(this.selectionFollowsFocus){return o.id===this.value?0:-1}return o.id===this.focusedTabId?0:-1}render(){const o=this.getBgClass();const t=this.orientation==="vertical";const r=this.background==="navigation";return s(n,{key:"2073d14bd7c0384d1f0d7d5310560b16514c765f",class:"tab-group-nav-host"},s("div",{key:"130b8d4c20dcb30ab9b47f3222eed132e8aa7119",role:"tablist",class:{"tab-list":true,"tab-list--vertical":t,"tab-list--on-navigation":r},"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-orientation":t?"vertical":undefined},this.tabs.map(((r,n)=>{if(e(r)){return s("div",{key:`divider-${n}`,class:{"tab-divider":true,"tab-divider--vertical":t},"aria-hidden":"true"},s("div",{class:"tab-divider__line"}))}const a=r.id===this.value;return s("button",{key:r.id,type:"button",role:"tab","data-tab-id":r.id,class:{tab:true,"tab--selected":a,"ds-focus-ring-inset":true,"ds-control-inactive":!!r.isInactive,[o]:!!o},"aria-selected":a,"aria-disabled":r.isInactive||undefined,"aria-controls":r.panelId??undefined,disabled:r.isInactive,tabIndex:this.tabIndexForTab(r),onClick:()=>!r.isInactive&&this.selectTab(r.id),onFocus:()=>{if(!this.selectionFollowsFocus){this.focusedTabId=r.id}}},s("span",{class:{tab__label:true,"tab__label--dot":!!r.dot}},s("ds-text",{as:"span",variant:"text-body-medium",emphasis:a,color:"inherit"},r.label),r.dot&&s("ds-badge",{class:"tab__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}],tabs:[{onTabsChange:0}]}}static get style(){return l()}},[2,"ds-tab-group-nav",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],orientation:[1],selectionFollowsFocus:[4,"selection-follows-focus"],rovingEnabled:[4,"roving-enabled"],focusedTabId:[32],focusTab:[64],focusLastTab:[64],focusFirstTab:[64]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}],tabs:[{onTabsChange:0}]}]);function b(){if(typeof customElements==="undefined"){return}const o=["ds-tab-group-nav","ds-badge","ds-text"];o.forEach((o=>{switch(o){case"ds-tab-group-nav":if(!customElements.get(a(o))){customElements.define(a(o),u)}break;case"ds-badge":if(!customElements.get(a(o))){d()}break;case"ds-text":if(!customElements.get(a(o))){c()}break}}))}b();export{u as T,b as d};
2
- //# sourceMappingURL=p-V2qW8NL0.js.map
1
+ import{p as o,H as t,c as r,h as s,a as n,t as a}from"./index.js";import{g as i,i as e}from"./p-BQq26pt9.js";import{d}from"./p-DEgY_Lnb.js";import{d as c}from"./p-BOQRM49Q.js";const l=()=>`.sc-ds-tab-group-nav-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-nav: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-nav{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-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tab-group-nav: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-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-tab-group-nav-h,.ds-control-inactive.sc-ds-tab-group-nav{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-tab-group-nav-h{display:block}.tab-list.sc-ds-tab-group-nav{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative}.tab-list--vertical.sc-ds-tab-group-nav{flex-direction:column;align-items:stretch}.tab.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);background-color:transparent;border:none;border-radius:var(--dimension-radius-025);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);position:relative;transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-400);min-width:var(--dimension-size-400);box-sizing:border-box;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_dot:var(--color-foreground-bold-brand);--_dot-ring:var(--color-background-secondary)}.tab.sc-ds-tab-group-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.tab.sc-ds-tab-group-nav:hover::after{background:var(--_hover-bg);transition:none}.tab.sc-ds-tab-group-nav:active::after{background:var(--_pressed-bg);transition:none}.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-primary)}.tab-list--vertical.sc-ds-tab-group-nav .tab.sc-ds-tab-group-nav{justify-content:flex-start}.tab__label.sc-ds-tab-group-nav{position:relative;display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);white-space:nowrap}.tab__label--dot.sc-ds-tab-group-nav{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.tab__dot.sc-ds-tab-group-nav{position:absolute;top:0;right:0;pointer-events:none}.on-medium.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_dot-ring:var(--color-background-medium-neutral);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.on-bold.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_dot-ring:var(--color-background-bold-neutral);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_dot-ring:var(--color-background-strong-neutral);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group-nav{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background);--ds-focus-ring-color:var(--color-always-dark-interaction-focus);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group-nav{color:var(--color-always-dark-foreground-primary)}.on-navigation.sc-ds-tab-group-nav{color:var(--color-navigation-foreground-secondary);--_hover-bg:var(--color-navigation-interaction-hover);--_pressed-bg:var(--color-navigation-interaction-pressed);--_dot:var(--color-navigation-foreground-brand);--_dot-ring:var(--color-navigation-background);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.on-navigation.tab--selected.sc-ds-tab-group-nav{color:var(--color-navigation-foreground-primary)}.tab-list--on-navigation.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{background-color:var(--color-navigation-border-tertiary)}.tab-divider.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--dimension-size-400);padding-block:var(--dimension-space-075);flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group-nav{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--color-border-secondary)}.tab-divider--vertical.sc-ds-tab-group-nav{width:auto;height:var(--dimension-space-100);align-self:stretch;padding-block:0;padding-inline:var(--dimension-space-075)}.tab-divider--vertical.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch}`;const u=o(class o extends t{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=r(this,"dsChange");this.dsRovingExit=r(this,"dsRovingExit");this.value="";this.tabs=[];this.ariaLabel=null;this.orientation="horizontal";this.selectionFollowsFocus=true;this.rovingEnabled=true;this.focusedTabId=""}get selectableTabs(){return i(this.tabs)}componentWillLoad(){this.syncFocusedTabId(this.value)}onValueChange(o,t){if(!this.selectionFollowsFocus){if(t===undefined||o!==this.focusedTabId){this.syncFocusedTabId(o)}return}if(t===undefined||o===t)return;requestAnimationFrame((()=>{const t=document.activeElement;if(!t||!this.el.contains(t))return;const r=t.getAttribute("data-tab-id");if(r===o)return;const s=this.el.querySelector(`[data-tab-id="${o}"]`);if(s){s.focus({preventScroll:true})}else{t.blur()}}))}onTabsChange(){if(!this.selectableTabs.some((o=>o.id===this.focusedTabId))){this.syncFocusedTabId(this.value)}}async focusTab(o){this.focusedTabId=o;const t=this.el.querySelector(`[data-tab-id="${o}"]`);t?.focus({preventScroll:true})}async focusLastTab(){const o=this.selectableTabs;const t=[...o].reverse().find((o=>!o.isInactive));if(t)await this.focusTab(t.id)}async focusFirstTab(){const o=this.selectableTabs.find((o=>!o.isInactive));if(o)await this.focusTab(o.id)}syncFocusedTabId(o){const t=this.selectableTabs;if(t.some((t=>t.id===o&&!t.isInactive))){this.focusedTabId=o;return}const r=t.find((o=>!o.isInactive));this.focusedTabId=r?.id??""}selectTab(o,t){this.value=o;this.focusedTabId=o;this.dsChange.emit(o);if(t?.focus!==false){void this.focusTab(o)}}getFocusedIndex(){return this.selectableTabs.findIndex((o=>o.id===this.focusedTabId))}findEnabledLinear(o,t){const r=this.selectableTabs;for(let s=o+t;s>=0&&s<r.length;s+=t){if(!r[s]?.isInactive)return s}return null}findEnabled(o,t){const r=this.selectableTabs;const s=r.length;for(let n=0;n<s;n++){const a=(o+t*(n+1)+s*(n+1))%s;if(!r[a]?.isInactive)return a}return o}moveFocusToIndex(o){const t=this.selectableTabs[o];if(!t)return;this.focusedTabId=t.id;void this.focusTab(t.id)}activateFocusedTab(o){if(o.key!=="Enter"&&o.key!==" ")return;const t=this.selectableTabs.find((o=>o.id===this.focusedTabId));if(!t||t.isInactive)return;o.preventDefault();this.selectTab(t.id,{focus:true})}handleKeyDown(o){const t=this.selectableTabs;if(!t.length)return;if(!this.selectionFollowsFocus){if(o.key==="Enter"||o.key===" "){this.activateFocusedTab(o);return}}const r=this.selectionFollowsFocus?t.findIndex((o=>o.id===this.value)):this.getFocusedIndex();if(r<0)return;const s=this.orientation==="vertical";let n=null;let a=null;if(!s){if(o.key==="ArrowRight"){if(this.selectionFollowsFocus){n=this.findEnabled(r,1)}else{const o=this.findEnabledLinear(r,1);if(o===null)a="end";else n=o}}else if(o.key==="ArrowLeft"){if(this.selectionFollowsFocus){n=this.findEnabled(r,-1)}else{const o=this.findEnabledLinear(r,-1);if(o===null)a="start";else n=o}}}else{if(o.key==="ArrowDown"){if(this.selectionFollowsFocus){n=this.findEnabled(r,1)}else{const o=this.findEnabledLinear(r,1);if(o===null)a="end";else n=o}}else if(o.key==="ArrowUp"){if(this.selectionFollowsFocus){n=this.findEnabled(r,-1)}else{const o=this.findEnabledLinear(r,-1);if(o===null)a="start";else n=o}}}if(o.key==="Home"){const o=t.findIndex((o=>!o.isInactive));n=o===-1?null:o}else if(o.key==="End"){const o=[...t].reverse().findIndex((o=>!o.isInactive));n=o===-1?null:t.length-1-o}if(a){o.preventDefault();this.dsRovingExit.emit(a);return}if(n!==null&&n!==r){o.preventDefault();const r=t[n];if(this.selectionFollowsFocus){this.selectTab(r.id)}else{this.moveFocusToIndex(n)}}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";if(this.background==="navigation")return"on-navigation";return`on-${this.background}`}tabIndexForTab(o){if(!this.rovingEnabled)return-1;if(this.selectionFollowsFocus){return o.id===this.value?0:-1}return o.id===this.focusedTabId?0:-1}render(){const o=this.getBgClass();const t=this.orientation==="vertical";const r=this.background==="navigation";return s(n,{key:"644c159ed30cfa3d1697e521dd2431438fcb7922",class:"tab-group-nav-host"},s("div",{key:"285f43ef68195e3c21dada0057519285f77a6850",role:"tablist",class:{"tab-list":true,"tab-list--vertical":t,"tab-list--on-navigation":r},"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-orientation":t?"vertical":undefined},this.tabs.map(((r,n)=>{if(e(r)){return s("div",{key:`divider-${n}`,class:{"tab-divider":true,"tab-divider--vertical":t},"aria-hidden":"true"},s("div",{class:"tab-divider__line"}))}const a=r.id===this.value;return s("button",{key:r.id,type:"button",role:"tab","data-tab-id":r.id,class:{tab:true,"tab--selected":a,"ds-focus-ring-inset":true,"ds-control-inactive":!!r.isInactive,[o]:!!o},"aria-selected":a,"aria-disabled":r.isInactive?"true":undefined,"aria-controls":r.panelId??undefined,disabled:r.isInactive,tabIndex:this.tabIndexForTab(r),onClick:()=>!r.isInactive&&this.selectTab(r.id),onFocus:()=>{if(!this.selectionFollowsFocus){this.focusedTabId=r.id}}},s("span",{class:{tab__label:true,"tab__label--dot":!!r.dot}},s("ds-text",{as:"span",variant:"text-body-medium",emphasis:a,color:"inherit"},r.label),r.dot&&s("ds-badge",{class:"tab__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}],tabs:[{onTabsChange:0}]}}static get style(){return l()}},[2,"ds-tab-group-nav",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],orientation:[1],selectionFollowsFocus:[4,"selection-follows-focus"],rovingEnabled:[4,"roving-enabled"],focusedTabId:[32],focusTab:[64],focusLastTab:[64],focusFirstTab:[64]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}],tabs:[{onTabsChange:0}]}]);function b(){if(typeof customElements==="undefined"){return}const o=["ds-tab-group-nav","ds-badge","ds-text"];o.forEach((o=>{switch(o){case"ds-tab-group-nav":if(!customElements.get(a(o))){customElements.define(a(o),u)}break;case"ds-badge":if(!customElements.get(a(o))){d()}break;case"ds-text":if(!customElements.get(a(o))){c()}break}}))}b();export{u as T,b as d};
2
+ //# sourceMappingURL=p-BFiaUYu7.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["tabGroupNavCss","TabGroupNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","tabs","ariaLabel","orientation","selectionFollowsFocus","rovingEnabled","focusedTabId","selectableTabs","getSelectableTabs","componentWillLoad","syncFocusedTabId","onValueChange","next","prev","undefined","requestAnimationFrame","active","document","activeElement","el","contains","activeId","getAttribute","nextTab","querySelector","focus","preventScroll","blur","onTabsChange","some","tab","id","focusTab","btn","focusLastTab","last","reverse","find","isInactive","focusFirstTab","first","preferred","selectTab","options","dsChange","emit","getFocusedIndex","findIndex","findEnabledLinear","from","step","i","length","findEnabled","len","n","moveFocusToIndex","nextIdx","activateFocusedTab","e","key","item","preventDefault","handleKeyDown","currentIdx","t","isVertical","exit","candidate","lastEnabled","dsRovingExit","getBgClass","background","tabIndexForTab","render","bgClass","isNavigation","h","Host","class","role","ariaLabelledby","map","index","isTabDivider","isSelected","type","panelId","disabled","tabIndex","onClick","onFocus","tab__label","dot","as","variant","emphasis","color","label"],"sources":["src/wc/components/TabGroupNav/TabGroupNav.css?tag=ds-tab-group-nav&encapsulation=scoped","src/wc/components/TabGroupNav/TabGroupNav.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n display: block;\n}\n\n.tab-list {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n position: relative;\n}\n\n/* Vertical orientation */\n.tab-list--vertical {\n flex-direction: column;\n align-items: stretch;\n}\n\n.tab {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--dimension-space-050);\n padding: var(--dimension-space-075);\n background-color: transparent;\n border: none;\n border-radius: var(--dimension-radius-025);\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n color: var(--color-foreground-secondary);\n position: relative;\n /* Only transition color — hover bg is instant (see ::after below) */\n transition: color var(--effect-motion-short-2);\n flex-shrink: 0;\n height: var(--dimension-size-400);\n min-width: var(--dimension-size-400);\n box-sizing: border-box;\n --_hover-bg: var(--color-interaction-hover);\n --_pressed-bg: var(--color-interaction-pressed);\n --_dot: var(--color-foreground-bold-brand);\n --_dot-ring: var(--color-background-secondary);\n}\n\n/* Interaction layer — same pattern as PanelNav */\n.tab::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: var(--dimension-radius-025, 2px);\n background: transparent;\n pointer-events: none;\n transition: none;\n}\n\n.tab:hover::after { background: var(--_hover-bg); transition: none; }\n.tab:active::after { background: var(--_pressed-bg); transition: none; }\n\n.tab--selected { color: var(--color-foreground-primary); }\n\n/* Inactive: `.ds-control-inactive` (25% opacity) — applied via class in TSX. */\n\n/* Vertical tabs read as a list — left-align the label */\n.tab-list--vertical .tab { justify-content: flex-start; }\n\n/* Label — dot anchors top-right like BarNav action icon zone */\n.tab__label {\n position: relative;\n display: inline-flex;\n align-items: center;\n padding: 0 var(--dimension-space-025);\n white-space: nowrap;\n}\n\n/* Clearance for top-right dot — slightly less than space-025 + space-075 */\n.tab__label--dot {\n padding-right: calc(var(--dimension-space-025) + var(--dimension-space-050));\n}\n\n/* Notification dot — top-right corner of the label zone */\n.tab__dot {\n position: absolute;\n top: 0;\n right: 0;\n pointer-events: none;\n}\n\n/* Background context */\n.on-medium {\n --_hover-bg: var(--color-interaction-on-medium-background-hover);\n --_pressed-bg: var(--color-interaction-on-medium-background-pressed);\n --_dot-ring: var(--color-background-medium-neutral);\n --ds-focus-ring-color: var(--color-interaction-on-medium-background-focus);\n}\n\n.on-bold {\n --_hover-bg: var(--color-interaction-on-bold-background-hover);\n --_pressed-bg: var(--color-interaction-on-bold-background-pressed);\n --_dot-ring: var(--color-background-bold-neutral);\n --ds-focus-ring-color: var(--color-interaction-on-bold-background-focus);\n color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-bold.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-strong {\n --_hover-bg: var(--color-interaction-on-strong-background-hover);\n --_pressed-bg: var(--color-interaction-on-strong-background-pressed);\n --_dot-ring: var(--color-background-strong-neutral);\n --ds-focus-ring-color: var(--color-interaction-on-strong-background-focus);\n color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-strong.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-always-dark {\n --_hover-bg: var(--color-always-dark-interaction-hover);\n --_pressed-bg: var(--color-always-dark-interaction-pressed);\n --_dot-ring: var(--color-always-dark-background);\n --ds-focus-ring-color: var(--color-always-dark-interaction-focus);\n color: var(--color-always-dark-foreground-secondary);\n}\n\n.on-always-dark.tab--selected { color: var(--color-always-dark-foreground-primary); }\n\n.on-navigation {\n color: var(--color-navigation-foreground-secondary);\n --_hover-bg: var(--color-navigation-interaction-hover);\n --_pressed-bg: var(--color-navigation-interaction-pressed);\n --_dot: var(--color-navigation-foreground-brand);\n --_dot-ring: var(--color-navigation-background);\n --ds-focus-ring-color: var(--color-navigation-interaction-focus);\n}\n\n.on-navigation.tab--selected { color: var(--color-navigation-foreground-primary); }\n\n.tab-list--on-navigation .tab-divider__line {\n background-color: var(--color-navigation-border-tertiary);\n}\n\n/* In-tablist visual group separator — not focusable, skipped by keyboard nav */\n.tab-divider {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--dimension-space-100);\n height: var(--dimension-size-400);\n padding-block: var(--dimension-space-075);\n flex-shrink: 0;\n pointer-events: none;\n}\n\n.tab-divider__line {\n width: var(--dimension-stroke-width-012);\n align-self: stretch;\n background-color: var(--color-border-secondary);\n}\n\n.tab-divider--vertical {\n width: auto;\n height: var(--dimension-space-100);\n align-self: stretch;\n padding-block: 0;\n padding-inline: var(--dimension-space-075);\n}\n\n.tab-divider--vertical .tab-divider__line {\n width: auto;\n height: var(--dimension-stroke-width-012);\n align-self: stretch;\n}\n","import { Component, Prop, Event, EventEmitter, Element, Listen, Watch, Method, State, h, Host } from '@stencil/core';\nimport {\n getSelectableTabs,\n isTabDivider,\n type TabItem,\n type TabItemTab,\n} from '../TabGroup/tab-item-utils';\n\nexport type TabGroupNavBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark' | 'navigation';\n\n@Component({\n tag: 'ds-tab-group-nav',\n styleUrl: 'TabGroupNav.css',\n scoped: true,\n})\nexport class TabGroupNav {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) value: string = '';\n @Prop() tabs: TabItem[] = [];\n @Prop() background: TabGroupNavBackground | undefined;\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * When `false`, arrow keys move focus only — Space/Enter (or click) commits selection.\n * Used by bar nav where each tab is a full page transition.\n */\n @Prop() selectionFollowsFocus: boolean = true;\n\n /** When `false`, every tab uses `tabindex=\"-1\"` (another chrome control owns the tab stop). */\n @Prop() rovingEnabled: boolean = true;\n\n @Event() dsChange!: EventEmitter<string>;\n\n /** Fired when arrow navigation reaches the first/last tab in manual selection mode. */\n @Event() dsRovingExit!: EventEmitter<'start' | 'end'>;\n\n @State() private focusedTabId: string = '';\n\n private get selectableTabs(): TabItemTab[] {\n return getSelectableTabs(this.tabs);\n }\n\n componentWillLoad() {\n this.syncFocusedTabId(this.value);\n }\n\n @Watch('value')\n onValueChange(next: string, prev: string | undefined) {\n if (!this.selectionFollowsFocus) {\n if (prev === undefined || next !== this.focusedTabId) {\n this.syncFocusedTabId(next);\n }\n return;\n }\n\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 nextTab = this.el.querySelector(`[data-tab-id=\"${next}\"]`) as HTMLElement | null;\n if (nextTab) {\n nextTab.focus({ preventScroll: true });\n } else {\n active.blur();\n }\n });\n }\n\n @Watch('tabs')\n onTabsChange() {\n if (!this.selectableTabs.some(tab => tab.id === this.focusedTabId)) {\n this.syncFocusedTabId(this.value);\n }\n }\n\n @Method()\n async focusTab(id: string) {\n this.focusedTabId = id;\n const btn = this.el.querySelector(`[data-tab-id=\"${id}\"]`) as HTMLElement | null;\n btn?.focus({ preventScroll: true });\n }\n\n @Method()\n async focusLastTab() {\n const tabs = this.selectableTabs;\n const last = [...tabs].reverse().find(tab => !tab.isInactive);\n if (last) await this.focusTab(last.id);\n }\n\n @Method()\n async focusFirstTab() {\n const first = this.selectableTabs.find(tab => !tab.isInactive);\n if (first) await this.focusTab(first.id);\n }\n\n private syncFocusedTabId(preferred: string) {\n const tabs = this.selectableTabs;\n if (tabs.some(tab => tab.id === preferred && !tab.isInactive)) {\n this.focusedTabId = preferred;\n return;\n }\n const first = tabs.find(tab => !tab.isInactive);\n this.focusedTabId = first?.id ?? '';\n }\n\n private selectTab(id: string, options?: { focus?: boolean }) {\n this.value = id;\n this.focusedTabId = id;\n this.dsChange.emit(id);\n if (options?.focus !== false) {\n void this.focusTab(id);\n }\n }\n\n private getFocusedIndex(): number {\n return this.selectableTabs.findIndex(tab => tab.id === this.focusedTabId);\n }\n\n private findEnabledLinear(from: number, step: 1 | -1): number | null {\n const tabs = this.selectableTabs;\n for (let i = from + step; i >= 0 && i < tabs.length; i += step) {\n if (!tabs[i]?.isInactive) return i;\n }\n return null;\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 private moveFocusToIndex(nextIdx: number) {\n const next = this.selectableTabs[nextIdx];\n if (!next) return;\n this.focusedTabId = next.id;\n void this.focusTab(next.id);\n }\n\n private activateFocusedTab(e: KeyboardEvent) {\n if (e.key !== 'Enter' && e.key !== ' ') return;\n const tab = this.selectableTabs.find(item => item.id === this.focusedTabId);\n if (!tab || tab.isInactive) return;\n e.preventDefault();\n this.selectTab(tab.id, { focus: true });\n }\n\n @Listen('keydown')\n handleKeyDown(e: KeyboardEvent) {\n const tabs = this.selectableTabs;\n if (!tabs.length) return;\n\n if (!this.selectionFollowsFocus) {\n if (e.key === 'Enter' || e.key === ' ') {\n this.activateFocusedTab(e);\n return;\n }\n }\n\n const currentIdx = this.selectionFollowsFocus\n ? tabs.findIndex(t => t.id === this.value)\n : this.getFocusedIndex();\n if (currentIdx < 0) return;\n\n const isVertical = this.orientation === 'vertical';\n let nextIdx: number | null = null;\n let exit: 'start' | 'end' | null = null;\n\n if (!isVertical) {\n if (e.key === 'ArrowRight') {\n if (this.selectionFollowsFocus) {\n nextIdx = this.findEnabled(currentIdx, 1);\n } else {\n const candidate = this.findEnabledLinear(currentIdx, 1);\n if (candidate === null) exit = 'end';\n else nextIdx = candidate;\n }\n } else if (e.key === 'ArrowLeft') {\n if (this.selectionFollowsFocus) {\n nextIdx = this.findEnabled(currentIdx, -1);\n } else {\n const candidate = this.findEnabledLinear(currentIdx, -1);\n if (candidate === null) exit = 'start';\n else nextIdx = candidate;\n }\n }\n } else {\n if (e.key === 'ArrowDown') {\n if (this.selectionFollowsFocus) {\n nextIdx = this.findEnabled(currentIdx, 1);\n } else {\n const candidate = this.findEnabledLinear(currentIdx, 1);\n if (candidate === null) exit = 'end';\n else nextIdx = candidate;\n }\n } else if (e.key === 'ArrowUp') {\n if (this.selectionFollowsFocus) {\n nextIdx = this.findEnabled(currentIdx, -1);\n } else {\n const candidate = this.findEnabledLinear(currentIdx, -1);\n if (candidate === null) exit = 'start';\n else nextIdx = candidate;\n }\n }\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 (exit) {\n e.preventDefault();\n this.dsRovingExit.emit(exit);\n return;\n }\n\n if (nextIdx !== null && nextIdx !== currentIdx) {\n e.preventDefault();\n const next = tabs[nextIdx];\n if (this.selectionFollowsFocus) {\n this.selectTab(next.id);\n } else {\n this.moveFocusToIndex(nextIdx);\n }\n }\n }\n\n private getBgClass(): string {\n if (!this.background || this.background === 'faint') return '';\n if (this.background === 'always-dark') return 'on-always-dark';\n if (this.background === 'navigation') return 'on-navigation';\n return `on-${this.background}`;\n }\n\n private tabIndexForTab(tab: TabItemTab): number {\n if (!this.rovingEnabled) return -1;\n if (this.selectionFollowsFocus) {\n return tab.id === this.value ? 0 : -1;\n }\n return tab.id === this.focusedTabId ? 0 : -1;\n }\n\n render() {\n const bgClass = this.getBgClass();\n const isVertical = this.orientation === 'vertical';\n const isNavigation = this.background === 'navigation';\n\n return (\n <Host class=\"tab-group-nav-host\">\n <div\n role=\"tablist\"\n class={{\n 'tab-list': true,\n 'tab-list--vertical': isVertical,\n 'tab-list--on-navigation': isNavigation,\n }}\n aria-label={this.ariaLabel}\n aria-labelledby={this.ariaLabelledby}\n aria-orientation={isVertical ? 'vertical' : undefined}\n >\n {this.tabs.map((tab, index) => {\n if (isTabDivider(tab)) {\n return (\n <div\n key={`divider-${index}`}\n class={{\n 'tab-divider': true,\n 'tab-divider--vertical': isVertical,\n }}\n aria-hidden=\"true\"\n >\n <div class=\"tab-divider__line\" />\n </div>\n );\n }\n\n const isSelected = tab.id === this.value;\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-focus-ring-inset': true,\n 'ds-control-inactive': !!tab.isInactive,\n [bgClass]: !!bgClass,\n }}\n aria-selected={isSelected}\n aria-disabled={tab.isInactive ? 'true' : undefined}\n aria-controls={tab.panelId ?? undefined}\n disabled={tab.isInactive}\n tabIndex={this.tabIndexForTab(tab)}\n onClick={() => !tab.isInactive && this.selectTab(tab.id)}\n onFocus={() => {\n if (!this.selectionFollowsFocus) {\n this.focusedTabId = tab.id;\n }\n }}\n >\n <span class={{\n tab__label: true,\n 'tab__label--dot': !!tab.dot,\n }}>\n <ds-text as=\"span\" variant=\"text-body-medium\" emphasis={isSelected} color=\"inherit\">\n {tab.label}\n </ds-text>\n {tab.dot && (\n <ds-badge\n class=\"tab__dot\"\n variant=\"dot\"\n background=\"var(--_dot-ring)\"\n label=\"\"\n aria-hidden=\"true\"\n />\n )}\n </span>\n </button>\n );\n })}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"gLAAA,MAAMA,EAAiB,IAAM,qsL,MCehBC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,sHAQ2BC,KAAAC,MAAgB,GACjCD,KAAAE,KAAkB,GAESF,KAAAG,UAA2B,KAEtDH,KAAAI,YAAyC,aAMzCJ,KAAAK,sBAAiC,KAGjCL,KAAAM,cAAyB,KAOhBN,KAAAO,aAAuB,EAmTzC,CAjTC,kBAAYC,GACV,OAAOC,EAAkBT,KAAKE,K,CAGhC,iBAAAQ,GACEV,KAAKW,iBAAiBX,KAAKC,M,CAI7B,aAAAW,CAAcC,EAAcC,GAC1B,IAAKd,KAAKK,sBAAuB,CAC/B,GAAIS,IAASC,WAAaF,IAASb,KAAKO,aAAc,CACpDP,KAAKW,iBAAiBE,E,CAExB,M,CAGF,GAAIC,IAASC,WAAaF,IAASC,EAAM,OAEzCE,uBAAsB,KACpB,MAAMC,EAASC,SAASC,cACxB,IAAKF,IAAWjB,KAAKoB,GAAGC,SAASJ,GAAS,OAE1C,MAAMK,EAAWL,EAAOM,aAAa,eACrC,GAAID,IAAaT,EAAM,OAEvB,MAAMW,EAAUxB,KAAKoB,GAAGK,cAAc,iBAAiBZ,OACvD,GAAIW,EAAS,CACXA,EAAQE,MAAM,CAAEC,cAAe,M,KAC1B,CACLV,EAAOW,M,KAMb,YAAAC,GACE,IAAK7B,KAAKQ,eAAesB,MAAKC,GAAOA,EAAIC,KAAOhC,KAAKO,eAAe,CAClEP,KAAKW,iBAAiBX,KAAKC,M,EAK/B,cAAMgC,CAASD,GACbhC,KAAKO,aAAeyB,EACpB,MAAME,EAAMlC,KAAKoB,GAAGK,cAAc,iBAAiBO,OACnDE,GAAKR,MAAM,CAAEC,cAAe,M,CAI9B,kBAAMQ,GACJ,MAAMjC,EAAOF,KAAKQ,eAClB,MAAM4B,EAAO,IAAIlC,GAAMmC,UAAUC,MAAKP,IAAQA,EAAIQ,aAClD,GAAIH,QAAYpC,KAAKiC,SAASG,EAAKJ,G,CAIrC,mBAAMQ,GACJ,MAAMC,EAAQzC,KAAKQ,eAAe8B,MAAKP,IAAQA,EAAIQ,aACnD,GAAIE,QAAazC,KAAKiC,SAASQ,EAAMT,G,CAG/B,gBAAArB,CAAiB+B,GACvB,MAAMxC,EAAOF,KAAKQ,eAClB,GAAIN,EAAK4B,MAAKC,GAAOA,EAAIC,KAAOU,IAAcX,EAAIQ,aAAa,CAC7DvC,KAAKO,aAAemC,EACpB,M,CAEF,MAAMD,EAAQvC,EAAKoC,MAAKP,IAAQA,EAAIQ,aACpCvC,KAAKO,aAAekC,GAAOT,IAAM,E,CAG3B,SAAAW,CAAUX,EAAYY,GAC5B5C,KAAKC,MAAQ+B,EACbhC,KAAKO,aAAeyB,EACpBhC,KAAK6C,SAASC,KAAKd,GACnB,GAAIY,GAASlB,QAAU,MAAO,MACvB1B,KAAKiC,SAASD,E,EAIf,eAAAe,GACN,OAAO/C,KAAKQ,eAAewC,WAAUjB,GAAOA,EAAIC,KAAOhC,KAAKO,c,CAGtD,iBAAA0C,CAAkBC,EAAcC,GACtC,MAAMjD,EAAOF,KAAKQ,eAClB,IAAK,IAAI4C,EAAIF,EAAOC,EAAMC,GAAK,GAAKA,EAAIlD,EAAKmD,OAAQD,GAAKD,EAAM,CAC9D,IAAKjD,EAAKkD,IAAIb,WAAY,OAAOa,C,CAEnC,OAAO,I,CAOD,WAAAE,CAAYJ,EAAcC,GAChC,MAAMjD,EAAOF,KAAKQ,eAClB,MAAM+C,EAAMrD,EAAKmD,OACjB,IAAK,IAAIG,EAAI,EAAGA,EAAID,EAAKC,IAAK,CAC5B,MAAMJ,GAAKF,EAAOC,GAAQK,EAAI,GAAKD,GAAOC,EAAI,IAAMD,EACpD,IAAKrD,EAAKkD,IAAIb,WAAY,OAAOa,C,CAEnC,OAAOF,C,CAGD,gBAAAO,CAAiBC,GACvB,MAAM7C,EAAOb,KAAKQ,eAAekD,GACjC,IAAK7C,EAAM,OACXb,KAAKO,aAAeM,EAAKmB,QACpBhC,KAAKiC,SAASpB,EAAKmB,G,CAGlB,kBAAA2B,CAAmBC,GACzB,GAAIA,EAAEC,MAAQ,SAAWD,EAAEC,MAAQ,IAAK,OACxC,MAAM9B,EAAM/B,KAAKQ,eAAe8B,MAAKwB,GAAQA,EAAK9B,KAAOhC,KAAKO,eAC9D,IAAKwB,GAAOA,EAAIQ,WAAY,OAC5BqB,EAAEG,iBACF/D,KAAK2C,UAAUZ,EAAIC,GAAI,CAAEN,MAAO,M,CAIlC,aAAAsC,CAAcJ,GACZ,MAAM1D,EAAOF,KAAKQ,eAClB,IAAKN,EAAKmD,OAAQ,OAElB,IAAKrD,KAAKK,sBAAuB,CAC/B,GAAIuD,EAAEC,MAAQ,SAAWD,EAAEC,MAAQ,IAAK,CACtC7D,KAAK2D,mBAAmBC,GACxB,M,EAIJ,MAAMK,EAAajE,KAAKK,sBACpBH,EAAK8C,WAAUkB,GAAKA,EAAElC,KAAOhC,KAAKC,QAClCD,KAAK+C,kBACT,GAAIkB,EAAa,EAAG,OAEpB,MAAME,EAAanE,KAAKI,cAAgB,WACxC,IAAIsD,EAAyB,KAC7B,IAAIU,EAA+B,KAEnC,IAAKD,EAAY,CACf,GAAIP,EAAEC,MAAQ,aAAc,CAC1B,GAAI7D,KAAKK,sBAAuB,CAC9BqD,EAAU1D,KAAKsD,YAAYW,EAAY,E,KAClC,CACL,MAAMI,EAAYrE,KAAKiD,kBAAkBgB,EAAY,GACrD,GAAII,IAAc,KAAMD,EAAO,WAC1BV,EAAUW,C,OAEZ,GAAIT,EAAEC,MAAQ,YAAa,CAChC,GAAI7D,KAAKK,sBAAuB,CAC9BqD,EAAU1D,KAAKsD,YAAYW,GAAY,E,KAClC,CACL,MAAMI,EAAYrE,KAAKiD,kBAAkBgB,GAAY,GACrD,GAAII,IAAc,KAAMD,EAAO,aAC1BV,EAAUW,C,OAGd,CACL,GAAIT,EAAEC,MAAQ,YAAa,CACzB,GAAI7D,KAAKK,sBAAuB,CAC9BqD,EAAU1D,KAAKsD,YAAYW,EAAY,E,KAClC,CACL,MAAMI,EAAYrE,KAAKiD,kBAAkBgB,EAAY,GACrD,GAAII,IAAc,KAAMD,EAAO,WAC1BV,EAAUW,C,OAEZ,GAAIT,EAAEC,MAAQ,UAAW,CAC9B,GAAI7D,KAAKK,sBAAuB,CAC9BqD,EAAU1D,KAAKsD,YAAYW,GAAY,E,KAClC,CACL,MAAMI,EAAYrE,KAAKiD,kBAAkBgB,GAAY,GACrD,GAAII,IAAc,KAAMD,EAAO,aAC1BV,EAAUW,C,GAKrB,GAAIT,EAAEC,MAAQ,OAAQ,CACpB,MAAMpB,EAAQvC,EAAK8C,WAAUkB,IAAMA,EAAE3B,aACrCmB,EAAUjB,KAAU,EAAK,KAAOA,C,MAC3B,GAAImB,EAAEC,MAAQ,MAAO,CAC1B,MAAMS,EAAc,IAAIpE,GAAMmC,UAAUW,WAAUkB,IAAMA,EAAE3B,aAC1DmB,EAAUY,KAAgB,EAAK,KAAOpE,EAAKmD,OAAS,EAAIiB,C,CAG1D,GAAIF,EAAM,CACRR,EAAEG,iBACF/D,KAAKuE,aAAazB,KAAKsB,GACvB,M,CAGF,GAAIV,IAAY,MAAQA,IAAYO,EAAY,CAC9CL,EAAEG,iBACF,MAAMlD,EAAOX,EAAKwD,GAClB,GAAI1D,KAAKK,sBAAuB,CAC9BL,KAAK2C,UAAU9B,EAAKmB,G,KACf,CACLhC,KAAKyD,iBAAiBC,E,GAKpB,UAAAc,GACN,IAAKxE,KAAKyE,YAAczE,KAAKyE,aAAe,QAAS,MAAO,GAC5D,GAAIzE,KAAKyE,aAAe,cAAe,MAAO,iBAC9C,GAAIzE,KAAKyE,aAAe,aAAc,MAAO,gBAC7C,MAAO,MAAMzE,KAAKyE,Y,CAGZ,cAAAC,CAAe3C,GACrB,IAAK/B,KAAKM,cAAe,OAAO,EAChC,GAAIN,KAAKK,sBAAuB,CAC9B,OAAO0B,EAAIC,KAAOhC,KAAKC,MAAQ,GAAI,C,CAErC,OAAO8B,EAAIC,KAAOhC,KAAKO,aAAe,GAAI,C,CAG5C,MAAAoE,GACE,MAAMC,EAAU5E,KAAKwE,aACrB,MAAML,EAAanE,KAAKI,cAAgB,WACxC,MAAMyE,EAAe7E,KAAKyE,aAAe,aAEzC,OACEK,EAACC,EAAI,CAAAlB,IAAA,2CAACmB,MAAM,sBACVF,EAAA,OAAAjB,IAAA,2CACEoB,KAAK,UACLD,MAAO,CACL,WAAY,KACZ,qBAAsBb,EACtB,0BAA2BU,GAC5B,aACW7E,KAAKG,UAAS,kBACTH,KAAKkF,eAAc,mBAClBf,EAAa,WAAapD,WAE3Cf,KAAKE,KAAKiF,KAAI,CAACpD,EAAKqD,KACnB,GAAIC,EAAatD,GAAM,CACrB,OACE+C,EAAA,OACEjB,IAAK,WAAWuB,IAChBJ,MAAO,CACL,cAAe,KACf,wBAAyBb,GAC1B,cACW,QAEZW,EAAA,OAAKE,MAAM,sB,CAKjB,MAAMM,EAAavD,EAAIC,KAAOhC,KAAKC,MACnC,OACE6E,EAAA,UACEjB,IAAK9B,EAAIC,GACTuD,KAAK,SACLN,KAAK,MAAK,cACGlD,EAAIC,GACjBgD,MAAO,CACLjD,IAAK,KACL,gBAAiBuD,EACjB,sBAAuB,KACvB,wBAAyBvD,EAAIQ,WAC7BqC,CAACA,KAAYA,GACd,gBACcU,EAAU,gBACVvD,EAAIQ,WAAa,OAASxB,UAAS,gBACnCgB,EAAIyD,SAAWzE,UAC9B0E,SAAU1D,EAAIQ,WACdmD,SAAU1F,KAAK0E,eAAe3C,GAC9B4D,QAAS,KAAO5D,EAAIQ,YAAcvC,KAAK2C,UAAUZ,EAAIC,IACrD4D,QAAS,KACP,IAAK5F,KAAKK,sBAAuB,CAC/BL,KAAKO,aAAewB,EAAIC,E,IAI5B8C,EAAA,QAAME,MAAO,CACXa,WAAY,KACZ,oBAAqB9D,EAAI+D,MAEzBhB,EAAA,WAASiB,GAAG,OAAOC,QAAQ,mBAAmBC,SAAUX,EAAYY,MAAM,WACvEnE,EAAIoE,OAENpE,EAAI+D,KACHhB,EAAA,YACEE,MAAM,WACNgB,QAAQ,MACRvB,WAAW,mBACX0B,MAAM,GAAE,cACI,UAIX,K","ignoreList":[]}
@@ -0,0 +1,2 @@
1
+ import{p as t,H as e,h as s,a as d,t as i}from"./index.js";function r(t){return`ds-text--${t.replace(/^text-/,"")}`}function a(t){return t==="span"||t==="label"?"ds-text--inline-box":"ds-text--block-box"}const o=()=>`.ds-text--display-medium.sc-ds-text-h,.ds-text--display-medium.sc-ds-text{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-text-h,.ds-text--display-small.sc-ds-text{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-text-h,.ds-text--title-large.sc-ds-text{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-text-h,.ds-text--title-medium.sc-ds-text{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-text-h,.ds-text--title-small.sc-ds-text{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-text-h,.ds-text--body-large.sc-ds-text{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-text-h,.ds-text--body-medium.sc-ds-text{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-text-h,.ds-text--body-small.sc-ds-text{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-text-h,.ds-text--caption.sc-ds-text{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-text-h,.ds-text--display-small.ds-text--emphasis.sc-ds-text-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-text,.ds-text--display-small.ds-text--emphasis.sc-ds-text{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-text-h,.ds-text--display-small.ds-text--regular.sc-ds-text-h,.ds-text--display-medium.ds-text--regular.sc-ds-text,.ds-text--display-small.ds-text--regular.sc-ds-text{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-text-h,.ds-text--title-large.ds-text--emphasis.sc-ds-text{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-text-h,.ds-text--title-large.ds-text--regular.sc-ds-text{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-text-h,.ds-text--title-small.ds-text--emphasis.sc-ds-text-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-text,.ds-text--title-small.ds-text--emphasis.sc-ds-text{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-text-h,.ds-text--title-small.ds-text--regular.sc-ds-text-h,.ds-text--title-medium.ds-text--regular.sc-ds-text,.ds-text--title-small.ds-text--regular.sc-ds-text{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-text-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-text-h,.ds-text--body-large.ds-text--emphasis.sc-ds-text,.ds-text--body-medium.ds-text--emphasis.sc-ds-text{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-text-h,.ds-text--body-medium.ds-text--regular.sc-ds-text-h,.ds-text--body-large.ds-text--regular.sc-ds-text,.ds-text--body-medium.ds-text--regular.sc-ds-text{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-text-h,.ds-text--body-small.ds-text--emphasis.sc-ds-text{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-text-h,.ds-text--body-small.ds-text--regular.sc-ds-text{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-text-h,.ds-text--caption.ds-text--emphasis.sc-ds-text{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-text-h,.ds-text--caption.ds-text--regular.sc-ds-text{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}.sc-ds-text-h{box-sizing:border-box;max-width:100%;min-width:0;margin:0;padding:0;border:0;font-family:var(--typography-font-family)}.ds-text--inline-box.sc-ds-text-h{display:inline-block}.ds-text--block-box.sc-ds-text-h{display:block;width:100%}.ds-text__element.sc-ds-text{display:block;box-sizing:border-box;width:100%;min-width:0;margin:0;padding:0;border:0;font:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;text-transform:inherit;text-align:inherit;text-decoration:inherit;font-style:inherit;font-variant-numeric:inherit;font-feature-settings:inherit;white-space:inherit;text-wrap:inherit;overflow-wrap:inherit;word-break:inherit;overflow:inherit;text-overflow:inherit}.ds-text--truncate-1.sc-ds-text-h{overflow:hidden}.ds-text--truncate-1.sc-ds-text-h .ds-text__element.sc-ds-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-text--truncate-2.sc-ds-text-h,.ds-text--truncate-3.sc-ds-text-h,.ds-text--truncate-4.sc-ds-text-h,.ds-text--truncate-5.sc-ds-text-h{overflow:hidden}.ds-text--truncate-2.sc-ds-text-h .ds-text__element.sc-ds-text,.ds-text--truncate-3.sc-ds-text-h .ds-text__element.sc-ds-text,.ds-text--truncate-4.sc-ds-text-h .ds-text__element.sc-ds-text,.ds-text--truncate-5.sc-ds-text-h .ds-text__element.sc-ds-text{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word}.ds-text--truncate-2.sc-ds-text-h .ds-text__element.sc-ds-text{-webkit-line-clamp:2}.ds-text--truncate-3.sc-ds-text-h .ds-text__element.sc-ds-text{-webkit-line-clamp:3}.ds-text--truncate-4.sc-ds-text-h .ds-text__element.sc-ds-text{-webkit-line-clamp:4}.ds-text--truncate-5.sc-ds-text-h .ds-text__element.sc-ds-text{-webkit-line-clamp:5}.ds-text--nowrap.sc-ds-text-h,.ds-text--nowrap.sc-ds-text-h .ds-text__element.sc-ds-text{white-space:nowrap;word-break:normal;overflow:hidden;text-overflow:ellipsis;min-width:0}.ds-text--balance.sc-ds-text-h,.ds-text--balance.sc-ds-text-h .ds-text__element.sc-ds-text{text-wrap:balance}.ds-text--pretty.sc-ds-text-h,.ds-text--pretty.sc-ds-text-h .ds-text__element.sc-ds-text{text-wrap:pretty}.ds-text--color-primary.sc-ds-text-h{color:var(--color-foreground-primary)}.ds-text--color-secondary.sc-ds-text-h{color:var(--color-foreground-secondary)}.ds-text--color-tertiary.sc-ds-text-h{color:var(--color-foreground-tertiary)}.ds-text--color-brand.sc-ds-text-h{color:var(--color-foreground-bold-brand)}.ds-text--color-negative.sc-ds-text-h{color:var(--color-foreground-bold-negative)}.ds-text--color-positive.sc-ds-text-h{color:var(--color-foreground-bold-positive)}.ds-text--color-warning.sc-ds-text-h{color:var(--color-foreground-bold-warning)}.ds-text--color-caution.sc-ds-text-h{color:var(--color-foreground-bold-caution)}.ds-text--color-ai.sc-ds-text-h{color:var(--color-foreground-bold-ai)}.ds-text--color-on-strong.sc-ds-text-h{color:var(--color-foreground-on-strong-background-primary)}.ds-text--color-on-bold.sc-ds-text-h{color:var(--color-foreground-on-bold-background-primary)}.ds-text--color-inherit.sc-ds-text-h{color:inherit}.ds-text--decoration-underline.sc-ds-text-h{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}.ds-text--decoration-dotted-underline.sc-ds-text-h{text-decoration:underline dotted;text-underline-offset:2px;text-decoration-thickness:1px}.ds-text--italic.sc-ds-text-h{font-style:italic}.ds-text--font-feature-tabular-nums.sc-ds-text-h{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}.ds-text--align-left.sc-ds-text-h{text-align:left}.ds-text--align-center.sc-ds-text-h{text-align:center}.ds-text--align-right.sc-ds-text-h{text-align:right}`;const n=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.variant="text-body-medium";this.emphasis=false;this.italic=false;this.lineTruncation="none";this.fontFeature="normal";this.as="p"}render(){const t=this.as;const e=t=>typeof t==="string"&&t.startsWith("var(--");const i={"ds-text":true,[a(this.as)]:true,[r(this.variant)]:true,"ds-text--emphasis":this.emphasis,"ds-text--regular":!this.emphasis,"ds-text--nowrap":this.wrap==="nowrap","ds-text--balance":this.wrap==="balance","ds-text--pretty":this.wrap==="pretty","ds-text--truncate-1":this.lineTruncation===1&&this.wrap!=="nowrap","ds-text--truncate-2":this.lineTruncation===2&&this.wrap!=="nowrap","ds-text--truncate-3":this.lineTruncation===3&&this.wrap!=="nowrap","ds-text--truncate-4":this.lineTruncation===4&&this.wrap!=="nowrap","ds-text--truncate-5":this.lineTruncation===5&&this.wrap!=="nowrap","ds-text--color-primary":this.color==="primary","ds-text--color-secondary":this.color==="secondary","ds-text--color-tertiary":this.color==="tertiary","ds-text--color-brand":this.color==="brand","ds-text--color-negative":this.color==="negative","ds-text--color-positive":this.color==="positive","ds-text--color-warning":this.color==="warning","ds-text--color-caution":this.color==="caution","ds-text--color-ai":this.color==="ai","ds-text--color-on-strong":this.color==="on-strong","ds-text--color-on-bold":this.color==="on-bold","ds-text--color-inherit":this.color==="inherit","ds-text--decoration-underline":this.decoration==="underline","ds-text--decoration-dotted-underline":this.decoration==="dotted-underline","ds-text--italic":this.italic,"ds-text--align-left":this.align==="left","ds-text--align-center":this.align==="center","ds-text--align-right":this.align==="right","ds-text--font-feature-tabular-nums":this.fontFeature==="tabular-nums"};const o=this.color&&e(this.color)?{color:this.color}:undefined;const n={};if(this.as==="label"&&this.for)n["for"]=this.for;if(this.textId)n["id"]=this.textId;return s(d,{key:"2b07d102e41ea1dd2d073ae7fc01332150feb733",class:i,style:o},s(t,{key:"fe2e2deb64168a31105e5de31e5e5c63aa8ce487",class:"ds-text__element",...n},s("slot",{key:"ea21620e2cae61d119aee00f63114ea9b051a138"})))}static get style(){return o()}},[262,"ds-text",{variant:[1],emphasis:[4],color:[1],decoration:[1],italic:[4],align:[1],lineTruncation:[8,"line-truncation"],wrap:[1],fontFeature:[1,"font-feature"],as:[1],for:[1],textId:[1,"text-id"]}]);function x(){if(typeof customElements==="undefined"){return}const t=["ds-text"];t.forEach((t=>{switch(t){case"ds-text":if(!customElements.get(i(t))){customElements.define(i(t),n)}break}}))}x();export{n as T,x as d};
2
+ //# sourceMappingURL=p-BOQRM49Q.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["textVariantClass","variant","replace","textDisplayClass","element","textCss","Text","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","emphasis","italic","lineTruncation","fontFeature","as","render","Tag","isCustomColor","c","startsWith","cls","wrap","color","decoration","align","style","undefined","extraProps","for","textId","h","Host","key","class"],"sources":["src/wc/components/Text/text-utils.ts","src/wc/components/Text/Text.css?tag=ds-text&encapsulation=scoped","src/wc/components/Text/Text.tsx"],"sourcesContent":["import type { TextElement, TextVariant } from './text-types';\n\n/** `text-body-medium` → `ds-text--body-medium` */\nexport function textVariantClass(variant: TextVariant): string {\n return `ds-text--${variant.replace(/^text-/, '')}`;\n}\n\n/** Inline semantics get a measurable inline box; paragraphs/headings get a block box. */\nexport function textDisplayClass(element: TextElement): string {\n return element === 'span' || element === 'label'\n ? 'ds-text--inline-box'\n : 'ds-text--block-box';\n}\n","@import '../../utils/typography.css';\n\n:host {\n box-sizing: border-box;\n max-width: 100%;\n min-width: 0;\n margin: 0;\n padding: 0;\n border: 0;\n font-family: var(--typography-font-family);\n}\n\n:host(.ds-text--inline-box) {\n display: inline-block;\n}\n\n:host(.ds-text--block-box) {\n display: block;\n width: 100%;\n}\n\n/*\n * The host is the measurable typography box. The semantic inner element fills\n * it and inherits every text metric without adding margins, padding, or its own\n * line-height strut. One rendered line therefore measures exactly one token\n * line-height; N lines measure N × that token.\n */\n.ds-text__element {\n display: block;\n box-sizing: border-box;\n width: 100%;\n min-width: 0;\n margin: 0;\n padding: 0;\n border: 0;\n font: inherit;\n line-height: inherit;\n letter-spacing: inherit;\n color: inherit;\n text-transform: inherit;\n text-align: inherit;\n text-decoration: inherit;\n font-style: inherit;\n font-variant-numeric: inherit;\n font-feature-settings: inherit;\n white-space: inherit;\n text-wrap: inherit;\n overflow-wrap: inherit;\n word-break: inherit;\n /* Consumer truncation on the host (PanelNav, ChartLegend, …) must reach the\n text node — overflow/text-overflow are not inherited by default. */\n overflow: inherit;\n text-overflow: inherit;\n}\n\n/* ── Truncation ─────────────────────────────────────────────────────────── */\n\n:host(.ds-text--truncate-1) {\n overflow: hidden;\n}\n\n:host(.ds-text--truncate-1) .ds-text__element {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(.ds-text--truncate-2),\n:host(.ds-text--truncate-3),\n:host(.ds-text--truncate-4),\n:host(.ds-text--truncate-5) {\n overflow: hidden;\n}\n\n:host(.ds-text--truncate-2) .ds-text__element,\n:host(.ds-text--truncate-3) .ds-text__element,\n:host(.ds-text--truncate-4) .ds-text__element,\n:host(.ds-text--truncate-5) .ds-text__element {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-word;\n}\n\n:host(.ds-text--truncate-2) .ds-text__element { -webkit-line-clamp: 2; }\n:host(.ds-text--truncate-3) .ds-text__element { -webkit-line-clamp: 3; }\n:host(.ds-text--truncate-4) .ds-text__element { -webkit-line-clamp: 4; }\n:host(.ds-text--truncate-5) .ds-text__element { -webkit-line-clamp: 5; }\n\n/* ── Wrap ───────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--nowrap),\n:host(.ds-text--nowrap) .ds-text__element {\n white-space: nowrap;\n word-break: normal;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n}\n\n:host(.ds-text--balance),\n:host(.ds-text--balance) .ds-text__element { text-wrap: balance; }\n\n:host(.ds-text--pretty),\n:host(.ds-text--pretty) .ds-text__element { text-wrap: pretty; }\n\n/* ── Color ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--color-primary) { color: var(--color-foreground-primary); }\n:host(.ds-text--color-secondary) { color: var(--color-foreground-secondary); }\n:host(.ds-text--color-tertiary) { color: var(--color-foreground-tertiary); }\n:host(.ds-text--color-brand) { color: var(--color-foreground-bold-brand); }\n:host(.ds-text--color-negative) { color: var(--color-foreground-bold-negative); }\n:host(.ds-text--color-positive) { color: var(--color-foreground-bold-positive); }\n:host(.ds-text--color-warning) { color: var(--color-foreground-bold-warning); }\n:host(.ds-text--color-caution) { color: var(--color-foreground-bold-caution); }\n:host(.ds-text--color-ai) { color: var(--color-foreground-bold-ai); }\n:host(.ds-text--color-on-strong) { color: var(--color-foreground-on-strong-background-primary); }\n:host(.ds-text--color-on-bold) { color: var(--color-foreground-on-bold-background-primary); }\n:host(.ds-text--color-inherit) { color: inherit; }\n\n/* ── Decorations ─────────────────────────────────────────────────────────── */\n\n:host(.ds-text--decoration-underline) {\n text-decoration: underline;\n text-underline-offset: 2px;\n text-decoration-thickness: 1px;\n}\n\n:host(.ds-text--decoration-dotted-underline) {\n text-decoration: underline dotted;\n text-underline-offset: 2px;\n text-decoration-thickness: 1px;\n}\n\n/* ── Style ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--italic) { font-style: italic; }\n\n:host(.ds-text--font-feature-tabular-nums) {\n font-variant-numeric: tabular-nums;\n font-feature-settings: 'tnum';\n}\n\n/* ── Align ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--align-left) { text-align: left; }\n:host(.ds-text--align-center) { text-align: center; }\n:host(.ds-text--align-right) { text-align: right; }\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { textDisplayClass, textVariantClass } from './text-utils';\nimport type {\n TextAlign,\n TextColor,\n TextDecoration,\n TextElement,\n TextFontFeature,\n TextVariant,\n LineTruncation,\n TextWrap,\n} from './text-types';\n\n@Component({\n tag: 'ds-text',\n styleUrl: 'Text.css',\n scoped: true,\n})\nexport class Text {\n @Prop() variant: TextVariant = 'text-body-medium';\n /**\n * Heavier weight + tighter letter-spacing for the variant.\n * `false` (default): regular weight (caption stays medium).\n * `true`: display bold, title/caption semibold, body medium.\n */\n @Prop() emphasis: boolean = false;\n @Prop() color: TextColor | undefined;\n @Prop() decoration: TextDecoration | undefined;\n @Prop() italic: boolean = false;\n @Prop() align: TextAlign | undefined;\n @Prop() lineTruncation: LineTruncation = 'none';\n @Prop() wrap: TextWrap | undefined;\n @Prop() fontFeature: TextFontFeature = 'normal';\n @Prop() as: TextElement = 'p';\n /** Maps to `for` attribute on <label> elements. */\n @Prop() for: string | undefined;\n /** Forwarded to the inner element (e.g. aria-labelledby targets). */\n @Prop() textId: string | undefined;\n\n render() {\n // Polymorphic element: TSX treats a variable tag as a component, so a\n // dynamic intrinsic element name must be cast to `any` to render.\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const Tag = this.as as any;\n const isCustomColor = (c: TextColor) => typeof c === 'string' && c.startsWith('var(--');\n\n const cls: Record<string, boolean> = {\n 'ds-text': true,\n [textDisplayClass(this.as)]: true,\n [textVariantClass(this.variant)]: true,\n 'ds-text--emphasis': this.emphasis,\n 'ds-text--regular': !this.emphasis,\n 'ds-text--nowrap': this.wrap === 'nowrap',\n 'ds-text--balance': this.wrap === 'balance',\n 'ds-text--pretty': this.wrap === 'pretty',\n 'ds-text--truncate-1': this.lineTruncation === 1 && this.wrap !== 'nowrap',\n 'ds-text--truncate-2': this.lineTruncation === 2 && this.wrap !== 'nowrap',\n 'ds-text--truncate-3': this.lineTruncation === 3 && this.wrap !== 'nowrap',\n 'ds-text--truncate-4': this.lineTruncation === 4 && this.wrap !== 'nowrap',\n 'ds-text--truncate-5': this.lineTruncation === 5 && this.wrap !== 'nowrap',\n 'ds-text--color-primary': this.color === 'primary',\n 'ds-text--color-secondary': this.color === 'secondary',\n 'ds-text--color-tertiary': this.color === 'tertiary',\n 'ds-text--color-brand': this.color === 'brand',\n 'ds-text--color-negative': this.color === 'negative',\n 'ds-text--color-positive': this.color === 'positive',\n 'ds-text--color-warning': this.color === 'warning',\n 'ds-text--color-caution': this.color === 'caution',\n 'ds-text--color-ai': this.color === 'ai',\n 'ds-text--color-on-strong': this.color === 'on-strong',\n 'ds-text--color-on-bold': this.color === 'on-bold',\n 'ds-text--color-inherit': this.color === 'inherit',\n 'ds-text--decoration-underline': this.decoration === 'underline',\n 'ds-text--decoration-dotted-underline': this.decoration === 'dotted-underline',\n 'ds-text--italic': this.italic,\n 'ds-text--align-left': this.align === 'left',\n 'ds-text--align-center': this.align === 'center',\n 'ds-text--align-right': this.align === 'right',\n 'ds-text--font-feature-tabular-nums': this.fontFeature === 'tabular-nums',\n };\n\n const style = this.color && isCustomColor(this.color)\n ? { color: this.color as string }\n : undefined;\n\n const extraProps: Record<string, string> = {};\n if (this.as === 'label' && this.for) extraProps['for'] = this.for;\n if (this.textId) extraProps['id'] = this.textId;\n\n return (\n <Host class={cls} style={style}>\n <Tag class=\"ds-text__element\" {...extraProps}>\n <slot />\n </Tag>\n </Host>\n );\n }\n}\n"],"mappings":"2DAGM,SAAUA,EAAiBC,GAC/B,MAAO,YAAYA,EAAQC,QAAQ,SAAU,KAC/C,CAGM,SAAUC,EAAiBC,GAC/B,OAAOA,IAAY,QAAUA,IAAY,QACrC,sBACA,oBACN,CCZA,MAAMC,EAAU,IAAM,w7P,MCkBTC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CAMUC,KAAAV,QAAuB,mBAMvBU,KAAAC,SAAoB,MAGpBD,KAAAE,OAAkB,MAElBF,KAAAG,eAAiC,OAEjCH,KAAAI,YAA+B,SAC/BJ,KAAAK,GAAkB,GAgE3B,CA1DC,MAAAC,GAIE,MAAMC,EAAMP,KAAKK,GACjB,MAAMG,EAAiBC,UAAwBA,IAAM,UAAYA,EAAEC,WAAW,UAE9E,MAAMC,EAA+B,CACnC,UAAW,KACX,CAACnB,EAAiBQ,KAAKK,KAAM,KAC7B,CAAChB,EAAiBW,KAAKV,UAAW,KAClC,oBAAqBU,KAAKC,SAC1B,oBAAqBD,KAAKC,SAC1B,kBAAmBD,KAAKY,OAAS,SACjC,mBAAoBZ,KAAKY,OAAS,UAClC,kBAAmBZ,KAAKY,OAAS,SACjC,sBAAuBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAClE,sBAAuBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAClE,sBAAuBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAClE,sBAAuBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAClE,sBAAuBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAClE,yBAA4BZ,KAAKa,QAAU,UAC3C,2BAA4Bb,KAAKa,QAAU,YAC3C,0BAA4Bb,KAAKa,QAAU,WAC3C,uBAA4Bb,KAAKa,QAAU,QAC3C,0BAA4Bb,KAAKa,QAAU,WAC3C,0BAA4Bb,KAAKa,QAAU,WAC3C,yBAA4Bb,KAAKa,QAAU,UAC3C,yBAA4Bb,KAAKa,QAAU,UAC3C,oBAA4Bb,KAAKa,QAAU,KAC3C,2BAA4Bb,KAAKa,QAAU,YAC3C,yBAA4Bb,KAAKa,QAAU,UAC3C,yBAA4Bb,KAAKa,QAAU,UAC3C,gCAAwCb,KAAKc,aAAe,YAC5D,uCAAwCd,KAAKc,aAAe,mBAC5D,kBAAmBd,KAAKE,OACxB,sBAAyBF,KAAKe,QAAU,OACxC,wBAAyBf,KAAKe,QAAU,SACxC,uBAAyBf,KAAKe,QAAU,QACxC,qCAAsCf,KAAKI,cAAgB,gBAG7D,MAAMY,EAAQhB,KAAKa,OAASL,EAAcR,KAAKa,OAC3C,CAAEA,MAAOb,KAAKa,OACdI,UAEJ,MAAMC,EAAqC,GAC3C,GAAIlB,KAAKK,KAAO,SAAWL,KAAKmB,IAAKD,EAAW,OAASlB,KAAKmB,IAC9D,GAAInB,KAAKoB,OAAQF,EAAW,MAAQlB,KAAKoB,OAEzC,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOb,EAAKK,MAAOA,GACvBK,EAACd,EAAG,CAAAgB,IAAA,2CAACC,MAAM,sBAAuBN,GAChCG,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
1
+ {"version":3,"names":["textVariantClass","variant","replace","textDisplayClass","element","textCss","Text","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","emphasis","italic","lineTruncation","fontFeature","as","render","Tag","isCustomColor","c","startsWith","cls","wrap","color","decoration","align","style","undefined","extraProps","for","textId","h","Host","key","class"],"sources":["src/wc/components/Text/text-utils.ts","src/wc/components/Text/Text.css?tag=ds-text&encapsulation=scoped","src/wc/components/Text/Text.tsx"],"sourcesContent":["import type { TextElement, TextVariant } from './text-types';\n\n/** `text-body-medium` → `ds-text--body-medium` */\nexport function textVariantClass(variant: TextVariant): string {\n return `ds-text--${variant.replace(/^text-/, '')}`;\n}\n\n/** Inline semantics get a measurable inline box; paragraphs/headings get a block box. */\nexport function textDisplayClass(element: TextElement): string {\n return element === 'span' || element === 'label'\n ? 'ds-text--inline-box'\n : 'ds-text--block-box';\n}\n","@import '../../utils/typography.css';\n\n:host {\n box-sizing: border-box;\n max-width: 100%;\n min-width: 0;\n margin: 0;\n padding: 0;\n border: 0;\n font-family: var(--typography-font-family);\n}\n\n:host(.ds-text--inline-box) {\n display: inline-block;\n}\n\n:host(.ds-text--block-box) {\n display: block;\n width: 100%;\n}\n\n/*\n * The host is the measurable typography box. The semantic inner element fills\n * it and inherits every text metric without adding margins, padding, or its own\n * line-height strut. One rendered line therefore measures exactly one token\n * line-height; N lines measure N × that token.\n */\n.ds-text__element {\n display: block;\n box-sizing: border-box;\n width: 100%;\n min-width: 0;\n margin: 0;\n padding: 0;\n border: 0;\n font: inherit;\n line-height: inherit;\n letter-spacing: inherit;\n color: inherit;\n text-transform: inherit;\n text-align: inherit;\n text-decoration: inherit;\n font-style: inherit;\n font-variant-numeric: inherit;\n font-feature-settings: inherit;\n white-space: inherit;\n text-wrap: inherit;\n overflow-wrap: inherit;\n word-break: inherit;\n /* Consumer truncation on the host (PanelNav, ChartLegend, …) must reach the\n text node — overflow/text-overflow are not inherited by default. */\n overflow: inherit;\n text-overflow: inherit;\n}\n\n/* ── Truncation ─────────────────────────────────────────────────────────── */\n\n:host(.ds-text--truncate-1) {\n overflow: hidden;\n}\n\n:host(.ds-text--truncate-1) .ds-text__element {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(.ds-text--truncate-2),\n:host(.ds-text--truncate-3),\n:host(.ds-text--truncate-4),\n:host(.ds-text--truncate-5) {\n overflow: hidden;\n}\n\n:host(.ds-text--truncate-2) .ds-text__element,\n:host(.ds-text--truncate-3) .ds-text__element,\n:host(.ds-text--truncate-4) .ds-text__element,\n:host(.ds-text--truncate-5) .ds-text__element {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-word;\n}\n\n:host(.ds-text--truncate-2) .ds-text__element { -webkit-line-clamp: 2; }\n:host(.ds-text--truncate-3) .ds-text__element { -webkit-line-clamp: 3; }\n:host(.ds-text--truncate-4) .ds-text__element { -webkit-line-clamp: 4; }\n:host(.ds-text--truncate-5) .ds-text__element { -webkit-line-clamp: 5; }\n\n/* ── Wrap ───────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--nowrap),\n:host(.ds-text--nowrap) .ds-text__element {\n white-space: nowrap;\n word-break: normal;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n}\n\n:host(.ds-text--balance),\n:host(.ds-text--balance) .ds-text__element { text-wrap: balance; }\n\n:host(.ds-text--pretty),\n:host(.ds-text--pretty) .ds-text__element { text-wrap: pretty; }\n\n/* ── Color ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--color-primary) { color: var(--color-foreground-primary); }\n:host(.ds-text--color-secondary) { color: var(--color-foreground-secondary); }\n:host(.ds-text--color-tertiary) { color: var(--color-foreground-tertiary); }\n:host(.ds-text--color-brand) { color: var(--color-foreground-bold-brand); }\n:host(.ds-text--color-negative) { color: var(--color-foreground-bold-negative); }\n:host(.ds-text--color-positive) { color: var(--color-foreground-bold-positive); }\n:host(.ds-text--color-warning) { color: var(--color-foreground-bold-warning); }\n:host(.ds-text--color-caution) { color: var(--color-foreground-bold-caution); }\n:host(.ds-text--color-ai) { color: var(--color-foreground-bold-ai); }\n:host(.ds-text--color-on-strong) { color: var(--color-foreground-on-strong-background-primary); }\n:host(.ds-text--color-on-bold) { color: var(--color-foreground-on-bold-background-primary); }\n:host(.ds-text--color-inherit) { color: inherit; }\n\n/* ── Decorations ─────────────────────────────────────────────────────────── */\n\n:host(.ds-text--decoration-underline) {\n text-decoration: underline;\n text-underline-offset: 2px;\n text-decoration-thickness: 1px;\n}\n\n:host(.ds-text--decoration-dotted-underline) {\n text-decoration: underline dotted;\n text-underline-offset: 2px;\n text-decoration-thickness: 1px;\n}\n\n/* ── Style ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--italic) { font-style: italic; }\n\n:host(.ds-text--font-feature-tabular-nums) {\n font-variant-numeric: tabular-nums;\n font-feature-settings: 'tnum';\n}\n\n/* ── Align ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--align-left) { text-align: left; }\n:host(.ds-text--align-center) { text-align: center; }\n:host(.ds-text--align-right) { text-align: right; }\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { textDisplayClass, textVariantClass } from './text-utils';\nimport type {\n TextAlign,\n TextColor,\n TextDecoration,\n TextElement,\n TextFontFeature,\n TextVariant,\n LineTruncation,\n TextWrap,\n} from './text-types';\n\n@Component({\n tag: 'ds-text',\n styleUrl: 'Text.css',\n scoped: true,\n})\nexport class Text {\n @Prop() variant: TextVariant = 'text-body-medium';\n /**\n * Heavier weight + tighter letter-spacing for the variant.\n * `false` (default): one step below emphasis (display semibold, title/body\n * medium, caption medium).\n * `true`: display bold, title/caption semibold, body medium.\n */\n @Prop() emphasis: boolean = false;\n @Prop() color: TextColor | undefined;\n @Prop() decoration: TextDecoration | undefined;\n @Prop() italic: boolean = false;\n @Prop() align: TextAlign | undefined;\n @Prop() lineTruncation: LineTruncation = 'none';\n @Prop() wrap: TextWrap | undefined;\n @Prop() fontFeature: TextFontFeature = 'normal';\n @Prop() as: TextElement = 'p';\n /** Maps to `for` attribute on <label> elements. */\n @Prop() for: string | undefined;\n /** Forwarded to the inner element (e.g. aria-labelledby targets). */\n @Prop() textId: string | undefined;\n\n render() {\n // Polymorphic element: TSX treats a variable tag as a component, so a\n // dynamic intrinsic element name must be cast to `any` to render.\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const Tag = this.as as any;\n const isCustomColor = (c: TextColor) => typeof c === 'string' && c.startsWith('var(--');\n\n const cls: Record<string, boolean> = {\n 'ds-text': true,\n [textDisplayClass(this.as)]: true,\n [textVariantClass(this.variant)]: true,\n 'ds-text--emphasis': this.emphasis,\n 'ds-text--regular': !this.emphasis,\n 'ds-text--nowrap': this.wrap === 'nowrap',\n 'ds-text--balance': this.wrap === 'balance',\n 'ds-text--pretty': this.wrap === 'pretty',\n 'ds-text--truncate-1': this.lineTruncation === 1 && this.wrap !== 'nowrap',\n 'ds-text--truncate-2': this.lineTruncation === 2 && this.wrap !== 'nowrap',\n 'ds-text--truncate-3': this.lineTruncation === 3 && this.wrap !== 'nowrap',\n 'ds-text--truncate-4': this.lineTruncation === 4 && this.wrap !== 'nowrap',\n 'ds-text--truncate-5': this.lineTruncation === 5 && this.wrap !== 'nowrap',\n 'ds-text--color-primary': this.color === 'primary',\n 'ds-text--color-secondary': this.color === 'secondary',\n 'ds-text--color-tertiary': this.color === 'tertiary',\n 'ds-text--color-brand': this.color === 'brand',\n 'ds-text--color-negative': this.color === 'negative',\n 'ds-text--color-positive': this.color === 'positive',\n 'ds-text--color-warning': this.color === 'warning',\n 'ds-text--color-caution': this.color === 'caution',\n 'ds-text--color-ai': this.color === 'ai',\n 'ds-text--color-on-strong': this.color === 'on-strong',\n 'ds-text--color-on-bold': this.color === 'on-bold',\n 'ds-text--color-inherit': this.color === 'inherit',\n 'ds-text--decoration-underline': this.decoration === 'underline',\n 'ds-text--decoration-dotted-underline': this.decoration === 'dotted-underline',\n 'ds-text--italic': this.italic,\n 'ds-text--align-left': this.align === 'left',\n 'ds-text--align-center': this.align === 'center',\n 'ds-text--align-right': this.align === 'right',\n 'ds-text--font-feature-tabular-nums': this.fontFeature === 'tabular-nums',\n };\n\n const style = this.color && isCustomColor(this.color)\n ? { color: this.color as string }\n : undefined;\n\n const extraProps: Record<string, string> = {};\n if (this.as === 'label' && this.for) extraProps['for'] = this.for;\n if (this.textId) extraProps['id'] = this.textId;\n\n return (\n <Host class={cls} style={style}>\n <Tag class=\"ds-text__element\" {...extraProps}>\n <slot />\n </Tag>\n </Host>\n );\n }\n}\n"],"mappings":"2DAGM,SAAUA,EAAiBC,GAC/B,MAAO,YAAYA,EAAQC,QAAQ,SAAU,KAC/C,CAGM,SAAUC,EAAiBC,GAC/B,OAAOA,IAAY,QAAUA,IAAY,QACrC,sBACA,oBACN,CCZA,MAAMC,EAAU,IAAM,u7P,MCkBTC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CAMUC,KAAAV,QAAuB,mBAOvBU,KAAAC,SAAoB,MAGpBD,KAAAE,OAAkB,MAElBF,KAAAG,eAAiC,OAEjCH,KAAAI,YAA+B,SAC/BJ,KAAAK,GAAkB,GAgE3B,CA1DC,MAAAC,GAIE,MAAMC,EAAMP,KAAKK,GACjB,MAAMG,EAAiBC,UAAwBA,IAAM,UAAYA,EAAEC,WAAW,UAE9E,MAAMC,EAA+B,CACnC,UAAW,KACX,CAACnB,EAAiBQ,KAAKK,KAAM,KAC7B,CAAChB,EAAiBW,KAAKV,UAAW,KAClC,oBAAqBU,KAAKC,SAC1B,oBAAqBD,KAAKC,SAC1B,kBAAmBD,KAAKY,OAAS,SACjC,mBAAoBZ,KAAKY,OAAS,UAClC,kBAAmBZ,KAAKY,OAAS,SACjC,sBAAuBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAClE,sBAAuBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAClE,sBAAuBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAClE,sBAAuBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAClE,sBAAuBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAClE,yBAA4BZ,KAAKa,QAAU,UAC3C,2BAA4Bb,KAAKa,QAAU,YAC3C,0BAA4Bb,KAAKa,QAAU,WAC3C,uBAA4Bb,KAAKa,QAAU,QAC3C,0BAA4Bb,KAAKa,QAAU,WAC3C,0BAA4Bb,KAAKa,QAAU,WAC3C,yBAA4Bb,KAAKa,QAAU,UAC3C,yBAA4Bb,KAAKa,QAAU,UAC3C,oBAA4Bb,KAAKa,QAAU,KAC3C,2BAA4Bb,KAAKa,QAAU,YAC3C,yBAA4Bb,KAAKa,QAAU,UAC3C,yBAA4Bb,KAAKa,QAAU,UAC3C,gCAAwCb,KAAKc,aAAe,YAC5D,uCAAwCd,KAAKc,aAAe,mBAC5D,kBAAmBd,KAAKE,OACxB,sBAAyBF,KAAKe,QAAU,OACxC,wBAAyBf,KAAKe,QAAU,SACxC,uBAAyBf,KAAKe,QAAU,QACxC,qCAAsCf,KAAKI,cAAgB,gBAG7D,MAAMY,EAAQhB,KAAKa,OAASL,EAAcR,KAAKa,OAC3C,CAAEA,MAAOb,KAAKa,OACdI,UAEJ,MAAMC,EAAqC,GAC3C,GAAIlB,KAAKK,KAAO,SAAWL,KAAKmB,IAAKD,EAAW,OAASlB,KAAKmB,IAC9D,GAAInB,KAAKoB,OAAQF,EAAW,MAAQlB,KAAKoB,OAEzC,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOb,EAAKK,MAAOA,GACvBK,EAACd,EAAG,CAAAgB,IAAA,2CAACC,MAAM,sBAAuBN,GAChCG,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
@@ -0,0 +1,2 @@
1
+ import{p as e,H as s,c as i,h as t,a as r,t as a}from"./index.js";import{d}from"./p-Cp86p-11.js";import{D as n,S as l}from"./p-Bz3jyrDV.js";const c=()=>`.sc-ds-shell-gradient-picker-h{display:block;width:100%}.shell-gradient-picker.sc-ds-shell-gradient-picker{box-sizing:border-box;display:flex;align-items:center;width:100%;min-height:var(--dimension-size-400);gap:var(--dimension-space-100);padding:var(--dimension-space-100)}.shell-gradient-picker__divider.sc-ds-shell-gradient-picker{flex:0 0 auto;align-self:center;width:var(--dimension-stroke-width-012);height:var(--dimension-size-300);background-color:var(--color-border-tertiary)}`;const h=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.value=n;this.groupLabel="Shell gradient theme";this.handleSwatchSelect=e=>{if(e===this.value)return;this.value=e;this.dsChange.emit(e)}}renderSwatch(e){return t("ds-shell-gradient-swatch",{key:e,preset:e,selected:this.value===e,onDsSelect:e=>{e.stopPropagation();this.handleSwatchSelect(e.detail)}})}render(){return t(r,{key:"2500d305749e42bc266e27d724c6edfb412f557e"},t("div",{key:"57a2501b25b98f095967c54bf92d8b5590429cb8",class:"shell-gradient-picker",role:"radiogroup","aria-label":this.groupLabel},this.renderSwatch("none"),t("div",{key:"a550ee975345b382175850dbcad58dd336fab409",class:"shell-gradient-picker__divider","aria-hidden":"true"}),l.map((e=>this.renderSwatch(e)))))}static get style(){return c()}},[2,"ds-shell-gradient-picker",{value:[1537],groupLabel:[1,"group-label"]}]);function o(){if(typeof customElements==="undefined"){return}const e=["ds-shell-gradient-picker","ds-shell-gradient-swatch"];e.forEach((e=>{switch(e){case"ds-shell-gradient-picker":if(!customElements.get(a(e))){customElements.define(a(e),h)}break;case"ds-shell-gradient-swatch":if(!customElements.get(a(e))){d()}break}}))}o();export{h as S,o as d};
2
+ //# sourceMappingURL=p-CTK82RIw.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["shellGradientPickerCss","ShellGradientPicker","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","DEFAULT_SHELL_GRADIENT_PRESET","groupLabel","handleSwatchSelect","preset","dsChange","emit","renderSwatch","h","key","selected","onDsSelect","e","stopPropagation","detail","render","Host","class","role","SHELL_GRADIENT_WASH_PRESETS","map"],"sources":["src/wc/components/ShellGradientPicker/ShellGradientPicker.css?tag=ds-shell-gradient-picker&encapsulation=scoped","src/wc/components/ShellGradientPicker/ShellGradientPicker.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n/* One row — same width footprint as menu items; 24px orbs + divider inside. */\n.shell-gradient-picker {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n min-height: var(--dimension-size-400);\n gap: var(--dimension-space-100);\n padding: var(--dimension-space-100);\n}\n\n.shell-gradient-picker__divider {\n flex: 0 0 auto;\n align-self: center;\n width: var(--dimension-stroke-width-012);\n height: var(--dimension-size-300);\n background-color: var(--color-border-tertiary);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport {\n SHELL_GRADIENT_WASH_PRESETS,\n DEFAULT_SHELL_GRADIENT_PRESET,\n type ShellGradientPreset,\n} from '../ShellGradientSwatch/shell-gradient-swatch-types';\n\n@Component({\n tag: 'ds-shell-gradient-picker',\n styleUrl: 'ShellGradientPicker.css',\n scoped: true,\n})\nexport class ShellGradientPicker {\n /** Active shell wash preset. */\n @Prop({ mutable: true, reflect: true }) value: ShellGradientPreset =\n DEFAULT_SHELL_GRADIENT_PRESET;\n @Prop() groupLabel: string = 'Shell gradient theme';\n\n @Event() dsChange!: EventEmitter<ShellGradientPreset>;\n\n private handleSwatchSelect = (preset: ShellGradientPreset) => {\n if (preset === this.value) return;\n this.value = preset;\n this.dsChange.emit(preset);\n };\n\n private renderSwatch(preset: ShellGradientPreset) {\n return (\n <ds-shell-gradient-swatch\n key={preset}\n preset={preset}\n selected={this.value === preset}\n onDsSelect={(e: CustomEvent<ShellGradientPreset>) => {\n e.stopPropagation();\n this.handleSwatchSelect(e.detail);\n }}\n />\n );\n }\n\n render() {\n return (\n <Host>\n <div\n class=\"shell-gradient-picker\"\n role=\"radiogroup\"\n aria-label={this.groupLabel}\n >\n {this.renderSwatch('none')}\n <div class=\"shell-gradient-picker__divider\" aria-hidden=\"true\" />\n {SHELL_GRADIENT_WASH_PRESETS.map(preset => this.renderSwatch(preset))}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"4IAAA,MAAMA,EAAyB,IAAM,ye,MCYxBC,EAAmBC,EAAA,MAAAD,UAAAE,EALhC,WAAAC,CAAAC,G,6EAO0CC,KAAAC,MACtCC,EACMF,KAAAG,WAAqB,uBAIrBH,KAAAI,mBAAsBC,IAC5B,GAAIA,IAAWL,KAAKC,MAAO,OAC3BD,KAAKC,MAAQI,EACbL,KAAKM,SAASC,KAAKF,EAAO,CAgC7B,CA7BS,YAAAG,CAAaH,GACnB,OACEI,EAAA,4BACEC,IAAKL,EACLA,OAAQA,EACRM,SAAUX,KAAKC,QAAUI,EACzBO,WAAaC,IACXA,EAAEC,kBACFd,KAAKI,mBAAmBS,EAAEE,OAAO,G,CAMzC,MAAAC,GACE,OACEP,EAACQ,EAAI,CAAAP,IAAA,4CACHD,EAAA,OAAAC,IAAA,2CACEQ,MAAM,wBACNC,KAAK,aAAY,aACLnB,KAAKG,YAEhBH,KAAKQ,aAAa,QACnBC,EAAA,OAAAC,IAAA,2CAAKQ,MAAM,iCAAgC,cAAa,SACvDE,EAA4BC,KAAIhB,GAAUL,KAAKQ,aAAaH,M","ignoreList":[]}
@@ -1,2 +1,2 @@
1
- import{p as s,H as e,c as t,h as a,a as i,t as r}from"./index.js";import{D as n,a as c,b as l,c as d}from"./p-Bz3jyrDV.js";const o=()=>`.sc-ds-shell-gradient-swatch-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-shell-gradient-swatch: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-shell-gradient-swatch{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-shell-gradient-swatch:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-shell-gradient-swatch: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-shell-gradient-swatch{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-gradient-swatch::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-shell-gradient-swatch-h,.ds-control-inactive.sc-ds-shell-gradient-swatch{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-shell-gradient-swatch-h{box-sizing:border-box;display:inline-flex;flex:0 0 auto;width:var(--dimension-size-300);height:var(--dimension-size-300);--_swatch-inner-inset:calc( var(--dimension-stroke-width-025) + var(--dimension-space-025) );--_swatch-ring-bg:var(--color-background-primary);--_swatch-select-motion:var(--effect-motion-short-3)}.shell-gradient-swatch.sc-ds-shell-gradient-swatch{position:relative;box-sizing:border-box;width:var(--dimension-size-300);height:var(--dimension-size-300);padding:0;border:none;border-radius:var(--dimension-radius-half);background:transparent;cursor:pointer;flex-shrink:0;isolation:isolate}.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none}.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{z-index:1;background-color:var(--color-background-secondary);background-image:var(--_swatch-gradient-image);background-repeat:no-repeat;background-size:cover;background-position:0 0;transition:top var(--_swatch-select-motion), right var(--_swatch-select-motion), bottom var(--_swatch-select-motion), left var(--_swatch-select-motion)}.shell-gradient-swatch--none.sc-ds-shell-gradient-swatch .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{background-image:none}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:not(.shell-gradient-swatch--none) .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{opacity:var(--ds-shell-gradient-opacity, 0.1)}.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch{z-index:2;box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-secondary);transition:top var(--_swatch-select-motion), right var(--_swatch-select-motion), bottom var(--_swatch-select-motion), left var(--_swatch-select-motion)}.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{z-index:3;background:transparent;transition:top var(--_swatch-select-motion), right var(--_swatch-select-motion), bottom var(--_swatch-select-motion), left var(--_swatch-select-motion), background-color 0s}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:hover:not(:disabled) .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{background:var(--color-interaction-hover)}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:active:not(:disabled) .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{background:var(--color-interaction-pressed)}.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch{z-index:4;opacity:0;transform:scale(1.2);transform-origin:center;box-shadow:inset 0 0 0 var(--_swatch-inner-inset) var(--_swatch-ring-bg);transition:opacity var(--_swatch-select-motion), transform var(--_swatch-select-motion)}.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{z-index:5;opacity:0;transform:scale(1.2);transform-origin:center;box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);transition:opacity var(--_swatch-select-motion), transform var(--_swatch-select-motion)}.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{top:var(--_swatch-inner-inset);right:var(--_swatch-inner-inset);bottom:var(--_swatch-inner-inset);left:var(--_swatch-inner-inset)}.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{opacity:1;transform:scale(1)}@media (prefers-reduced-motion: reduce){.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{transition:none}}`;const h=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsSelect=t(this,"dsSelect");this.preset=n;this.selected=false;this.isInactive=false;this.handleClick=()=>{if(this.isInactive)return;this.dsSelect.emit(this.preset)}}render(){const s=this.ariaLabel??c[this.preset];return a(i,{key:"eea2a4a43c678772882f288c35d140b0e5404567"},a("button",{key:"40df3cefb4681f6151d2655b404cde36e2c38e4f",type:"button",class:{"shell-gradient-swatch":true,"ds-focus-ring-inset":true,"ds-control-inactive":this.isInactive,"shell-gradient-swatch--selected":this.selected,"shell-gradient-swatch--none":this.preset==="none"},style:this.preset==="none"?undefined:{"--_swatch-gradient-image":d(this.preset),"--ds-shell-gradient-opacity":l},"aria-label":s,"aria-pressed":this.selected?"true":"false",disabled:this.isInactive,onClick:this.handleClick},a("span",{key:"d3a033a78e897761562425deb273a6ae1269739f",class:"shell-gradient-swatch__fill","aria-hidden":"true"}),a("span",{key:"c89ac154a93f391be160dad3079807e133983c26",class:"shell-gradient-swatch__border","aria-hidden":"true"}),a("span",{key:"d64c151d02da7883837e43dac2b56328adb9951d",class:"shell-gradient-swatch__interaction","aria-hidden":"true"}),a("span",{key:"f8fe474d3c1fff30555fcc73be8d27d985835d12",class:"shell-gradient-swatch__halo","aria-hidden":"true"}),a("span",{key:"1d1faa535266fb6a107229bdf000a4795e4f3b98",class:"shell-gradient-swatch__stroke","aria-hidden":"true"})))}static get style(){return o()}},[2,"ds-shell-gradient-swatch",{preset:[513],selected:[516],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"]}]);function g(){if(typeof customElements==="undefined"){return}const s=["ds-shell-gradient-swatch"];s.forEach((s=>{switch(s){case"ds-shell-gradient-swatch":if(!customElements.get(r(s))){customElements.define(r(s),h)}break}}))}g();export{h as S,g as d};
2
- //# sourceMappingURL=p-BSNlp8Di.js.map
1
+ import{p as s,H as e,c as t,h as a,a as i,t as r}from"./index.js";import{D as n,a as c,b as l,c as o}from"./p-Bz3jyrDV.js";const d=()=>`.sc-ds-shell-gradient-swatch-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-shell-gradient-swatch: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-shell-gradient-swatch{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-shell-gradient-swatch:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-shell-gradient-swatch: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-shell-gradient-swatch{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-gradient-swatch::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-shell-gradient-swatch-h,.ds-control-inactive.sc-ds-shell-gradient-swatch{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-shell-gradient-swatch-h{box-sizing:border-box;display:inline-flex;flex:0 0 auto;width:var(--dimension-size-300);height:var(--dimension-size-300);--_swatch-inner-inset:calc( var(--dimension-stroke-width-025) + var(--dimension-space-025) );--_swatch-ring-bg:var(--color-background-primary);--_swatch-select-motion:var(--effect-motion-short-3)}.shell-gradient-swatch.sc-ds-shell-gradient-swatch{position:relative;box-sizing:border-box;width:var(--dimension-size-300);height:var(--dimension-size-300);padding:0;border:none;border-radius:var(--dimension-radius-half);background:transparent;cursor:pointer;flex-shrink:0;isolation:isolate}.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none}.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{z-index:1;background-color:var(--color-background-secondary);background-image:var(--_swatch-gradient-image);background-repeat:no-repeat;background-size:cover;background-position:0 0;transition:top var(--_swatch-select-motion), right var(--_swatch-select-motion), bottom var(--_swatch-select-motion), left var(--_swatch-select-motion)}.shell-gradient-swatch--none.sc-ds-shell-gradient-swatch .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{background-image:none}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:not(.shell-gradient-swatch--none) .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{opacity:var(--ds-shell-gradient-opacity, 0.1)}.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch{z-index:2;box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-secondary);transition:top var(--_swatch-select-motion), right var(--_swatch-select-motion), bottom var(--_swatch-select-motion), left var(--_swatch-select-motion)}.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{z-index:3;background:transparent;transition:top var(--_swatch-select-motion), right var(--_swatch-select-motion), bottom var(--_swatch-select-motion), left var(--_swatch-select-motion), background-color 0s}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:hover:not(:disabled) .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{background:var(--color-interaction-hover)}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:active:not(:disabled) .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{background:var(--color-interaction-pressed)}.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch{z-index:4;opacity:0;transform:scale(1.2);transform-origin:center;box-shadow:inset 0 0 0 var(--_swatch-inner-inset) var(--_swatch-ring-bg);transition:opacity var(--_swatch-select-motion), transform var(--_swatch-select-motion)}.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{z-index:5;opacity:0;transform:scale(1.2);transform-origin:center;box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);transition:opacity var(--_swatch-select-motion), transform var(--_swatch-select-motion)}.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{top:var(--_swatch-inner-inset);right:var(--_swatch-inner-inset);bottom:var(--_swatch-inner-inset);left:var(--_swatch-inner-inset)}.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{opacity:1;transform:scale(1)}@media (prefers-reduced-motion: reduce){.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{transition:none}}`;const h=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsSelect=t(this,"dsSelect");this.preset=n;this.selected=false;this.isInactive=false;this.ariaLabel=null;this.handleClick=()=>{if(this.isInactive)return;this.dsSelect.emit(this.preset)}}render(){const s=this.ariaLabel??c[this.preset];return a(i,{key:"54ecc0a98231cef366c32acf21fe844117048e50"},a("button",{key:"59405e9da3a933e043423714bbd8c0310e1ab3cf",type:"button",class:{"shell-gradient-swatch":true,"ds-focus-ring-inset":true,"ds-control-inactive":this.isInactive,"shell-gradient-swatch--selected":this.selected,"shell-gradient-swatch--none":this.preset==="none"},style:this.preset==="none"?undefined:{"--_swatch-gradient-image":o(this.preset),"--ds-shell-gradient-opacity":l},"aria-label":s,"aria-pressed":this.selected?"true":"false",disabled:this.isInactive,onClick:this.handleClick},a("span",{key:"f12572e97ce8a743e6477332e84cec66dec0521b",class:"shell-gradient-swatch__fill","aria-hidden":"true"}),a("span",{key:"b82bf0b6d1601ab27f5efa898c7febe4e8aaf84f",class:"shell-gradient-swatch__border","aria-hidden":"true"}),a("span",{key:"f0af150e2e684a16ab8bd11882821c1ae21e3e55",class:"shell-gradient-swatch__interaction","aria-hidden":"true"}),a("span",{key:"636dd5f3ff64229650e9bc4e9098ea3977c694bb",class:"shell-gradient-swatch__halo","aria-hidden":"true"}),a("span",{key:"1e861a22e505a987a4b703ccabd1e8e200050c31",class:"shell-gradient-swatch__stroke","aria-hidden":"true"})))}static get style(){return d()}},[2,"ds-shell-gradient-swatch",{preset:[513],selected:[516],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"]}]);function g(){if(typeof customElements==="undefined"){return}const s=["ds-shell-gradient-swatch"];s.forEach((s=>{switch(s){case"ds-shell-gradient-swatch":if(!customElements.get(r(s))){customElements.define(r(s),h)}break}}))}g();export{h as S,g as d};
2
+ //# sourceMappingURL=p-Cp86p-11.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["shellGradientSwatchCss","ShellGradientSwatch","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","preset","DEFAULT_SHELL_GRADIENT_PRESET","selected","isInactive","handleClick","dsSelect","emit","render","label","ariaLabel","SHELL_GRADIENT_PRESET_LABELS","h","Host","key","type","class","style","undefined","buildShellRadialGradientForPreset","SHELL_GRADIENT_OPACITY","disabled","onClick"],"sources":["src/wc/components/ShellGradientSwatch/ShellGradientSwatch.css?tag=ds-shell-gradient-swatch&encapsulation=scoped","src/wc/components/ShellGradientSwatch/ShellGradientSwatch.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n\n/**\n * Swatch — 24×24 orb (size-300). Spacing lives on the picker row.\n *\n * Layer stack (bottom → top):\n * Default: fill → border → interaction (hover/press)\n * Selected: fill → border → interaction → halo → stroke (brand)\n */\n\n:host {\n box-sizing: border-box;\n display: inline-flex;\n flex: 0 0 auto;\n width: var(--dimension-size-300);\n height: var(--dimension-size-300);\n --_swatch-inner-inset: calc(\n var(--dimension-stroke-width-025) + var(--dimension-space-025)\n );\n --_swatch-ring-bg: var(--color-background-primary);\n --_swatch-select-motion: var(--effect-motion-short-3);\n}\n\n.shell-gradient-swatch {\n position: relative;\n box-sizing: border-box;\n width: var(--dimension-size-300);\n height: var(--dimension-size-300);\n padding: 0;\n border: none;\n border-radius: var(--dimension-radius-half);\n background: transparent;\n cursor: pointer;\n flex-shrink: 0;\n isolation: isolate;\n}\n\n.shell-gradient-swatch__fill,\n.shell-gradient-swatch__border,\n.shell-gradient-swatch__interaction,\n.shell-gradient-swatch__halo,\n.shell-gradient-swatch__stroke {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-radius: inherit;\n pointer-events: none;\n}\n\n/* 1 — fill */\n.shell-gradient-swatch__fill {\n z-index: 1;\n background-color: var(--color-background-secondary);\n background-image: var(--_swatch-gradient-image);\n background-repeat: no-repeat;\n background-size: cover;\n background-position: 0 0;\n transition:\n top var(--_swatch-select-motion),\n right var(--_swatch-select-motion),\n bottom var(--_swatch-select-motion),\n left var(--_swatch-select-motion);\n}\n\n.shell-gradient-swatch--none .shell-gradient-swatch__fill {\n background-image: none;\n}\n\n.shell-gradient-swatch:not(.shell-gradient-swatch--none) .shell-gradient-swatch__fill {\n opacity: var(--ds-shell-gradient-opacity, 0.1);\n}\n\n/* 2 — secondary border (matches ds-interaction-fill--bordered) */\n.shell-gradient-swatch__border {\n z-index: 2;\n box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-secondary);\n transition:\n top var(--_swatch-select-motion),\n right var(--_swatch-select-motion),\n bottom var(--_swatch-select-motion),\n left var(--_swatch-select-motion);\n}\n\n/* 3 — hover / press (over border, under selected chrome) */\n.shell-gradient-swatch__interaction {\n z-index: 3;\n background: transparent;\n transition:\n top var(--_swatch-select-motion),\n right var(--_swatch-select-motion),\n bottom var(--_swatch-select-motion),\n left var(--_swatch-select-motion),\n background-color 0s;\n}\n\n.shell-gradient-swatch:hover:not(:disabled) .shell-gradient-swatch__interaction {\n background: var(--color-interaction-hover);\n}\n\n.shell-gradient-swatch:active:not(:disabled) .shell-gradient-swatch__interaction {\n background: var(--color-interaction-pressed);\n}\n\n/* 4 — halo gap (selected only) */\n.shell-gradient-swatch__halo {\n z-index: 4;\n opacity: 0;\n transform: scale(1.2);\n transform-origin: center;\n box-shadow: inset 0 0 0 var(--_swatch-inner-inset) var(--_swatch-ring-bg);\n transition:\n opacity var(--_swatch-select-motion),\n transform var(--_swatch-select-motion);\n}\n\n/* 5 — brand stroke (selected only) */\n.shell-gradient-swatch__stroke {\n z-index: 5;\n opacity: 0;\n transform: scale(1.2);\n transform-origin: center;\n box-shadow: inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n transition:\n opacity var(--_swatch-select-motion),\n transform var(--_swatch-select-motion);\n}\n\n.shell-gradient-swatch--selected .shell-gradient-swatch__fill,\n.shell-gradient-swatch--selected .shell-gradient-swatch__border,\n.shell-gradient-swatch--selected .shell-gradient-swatch__interaction {\n top: var(--_swatch-inner-inset);\n right: var(--_swatch-inner-inset);\n bottom: var(--_swatch-inner-inset);\n left: var(--_swatch-inner-inset);\n}\n\n.shell-gradient-swatch--selected .shell-gradient-swatch__halo,\n.shell-gradient-swatch--selected .shell-gradient-swatch__stroke {\n opacity: 1;\n transform: scale(1);\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n@media (prefers-reduced-motion: reduce) {\n .shell-gradient-swatch__fill,\n .shell-gradient-swatch__border,\n .shell-gradient-swatch__interaction,\n .shell-gradient-swatch__halo,\n .shell-gradient-swatch__stroke {\n transition: none;\n }\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport {\n SHELL_GRADIENT_PRESET_LABELS,\n buildShellRadialGradientForPreset,\n DEFAULT_SHELL_GRADIENT_PRESET,\n type ShellGradientPreset,\n} from './shell-gradient-swatch-types';\nimport { SHELL_GRADIENT_OPACITY } from '../../nav/shell-gradient';\n\n@Component({\n tag: 'ds-shell-gradient-swatch',\n styleUrl: 'ShellGradientSwatch.css',\n scoped: true,\n})\nexport class ShellGradientSwatch {\n /** Wash preset this orb previews. */\n @Prop({ reflect: true }) preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET;\n\n /** Selected — brand stroke + halo over inner fill/border/interaction stack. */\n @Prop({ reflect: true }) selected = false;\n\n @Prop() isInactive = false;\n\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n\n @Event() dsSelect!: EventEmitter<ShellGradientPreset>;\n\n private handleClick = () => {\n if (this.isInactive) return;\n this.dsSelect.emit(this.preset);\n };\n\n render() {\n const label = this.ariaLabel ?? SHELL_GRADIENT_PRESET_LABELS[this.preset];\n\n return (\n <Host>\n <button\n type=\"button\"\n class={{\n 'shell-gradient-swatch': true,\n 'ds-focus-ring-inset': true,\n 'ds-control-inactive': this.isInactive,\n 'shell-gradient-swatch--selected': this.selected,\n 'shell-gradient-swatch--none': this.preset === 'none',\n }}\n style={\n this.preset === 'none'\n ? undefined\n : {\n '--_swatch-gradient-image': buildShellRadialGradientForPreset(this.preset),\n '--ds-shell-gradient-opacity': SHELL_GRADIENT_OPACITY,\n }\n }\n aria-label={label}\n aria-pressed={this.selected ? 'true' : 'false'}\n disabled={this.isInactive}\n onClick={this.handleClick}\n >\n <span class=\"shell-gradient-swatch__fill\" aria-hidden=\"true\" />\n <span class=\"shell-gradient-swatch__border\" aria-hidden=\"true\" />\n <span class=\"shell-gradient-swatch__interaction\" aria-hidden=\"true\" />\n <span class=\"shell-gradient-swatch__halo\" aria-hidden=\"true\" />\n <span class=\"shell-gradient-swatch__stroke\" aria-hidden=\"true\" />\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"2HAAA,MAAMA,EAAyB,IAAM,+iL,MCcxBC,EAAmBC,EAAA,MAAAD,UAAAE,EALhC,WAAAC,CAAAC,G,6EAO2BC,KAAAC,OAA8BC,EAG9BF,KAAAG,SAAW,MAE5BH,KAAAI,WAAa,MAMbJ,KAAAK,YAAc,KACpB,GAAIL,KAAKI,WAAY,OACrBJ,KAAKM,SAASC,KAAKP,KAAKC,OAAO,CAuClC,CApCC,MAAAO,GACE,MAAMC,EAAQT,KAAKU,WAAaC,EAA6BX,KAAKC,QAElE,OACEW,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CACEC,KAAK,SACLC,MAAO,CACL,wBAAyB,KACzB,sBAAuB,KACvB,sBAAuBhB,KAAKI,WAC5B,kCAAmCJ,KAAKG,SACxC,8BAA+BH,KAAKC,SAAW,QAEjDgB,MACEjB,KAAKC,SAAW,OACZiB,UACA,CACE,2BAA4BC,EAAkCnB,KAAKC,QACnE,8BAA+BmB,GAChC,aAEKX,EAAK,eACHT,KAAKG,SAAW,OAAS,QACvCkB,SAAUrB,KAAKI,WACfkB,QAAStB,KAAKK,aAEdO,EAAA,QAAAE,IAAA,2CAAME,MAAM,8BAA6B,cAAa,SACtDJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,gCAA+B,cAAa,SACxDJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,qCAAoC,cAAa,SAC7DJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,8BAA6B,cAAa,SACtDJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,gCAA+B,cAAa,U","ignoreList":[]}
1
+ {"version":3,"names":["shellGradientSwatchCss","ShellGradientSwatch","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","preset","DEFAULT_SHELL_GRADIENT_PRESET","selected","isInactive","ariaLabel","handleClick","dsSelect","emit","render","label","SHELL_GRADIENT_PRESET_LABELS","h","Host","key","type","class","style","undefined","buildShellRadialGradientForPreset","SHELL_GRADIENT_OPACITY","disabled","onClick"],"sources":["src/wc/components/ShellGradientSwatch/ShellGradientSwatch.css?tag=ds-shell-gradient-swatch&encapsulation=scoped","src/wc/components/ShellGradientSwatch/ShellGradientSwatch.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n\n/**\n * Swatch — 24×24 orb (size-300). Spacing lives on the picker row.\n *\n * Layer stack (bottom → top):\n * Default: fill → border → interaction (hover/press)\n * Selected: fill → border → interaction → halo → stroke (brand)\n */\n\n:host {\n box-sizing: border-box;\n display: inline-flex;\n flex: 0 0 auto;\n width: var(--dimension-size-300);\n height: var(--dimension-size-300);\n --_swatch-inner-inset: calc(\n var(--dimension-stroke-width-025) + var(--dimension-space-025)\n );\n --_swatch-ring-bg: var(--color-background-primary);\n --_swatch-select-motion: var(--effect-motion-short-3);\n}\n\n.shell-gradient-swatch {\n position: relative;\n box-sizing: border-box;\n width: var(--dimension-size-300);\n height: var(--dimension-size-300);\n padding: 0;\n border: none;\n border-radius: var(--dimension-radius-half);\n background: transparent;\n cursor: pointer;\n flex-shrink: 0;\n isolation: isolate;\n}\n\n.shell-gradient-swatch__fill,\n.shell-gradient-swatch__border,\n.shell-gradient-swatch__interaction,\n.shell-gradient-swatch__halo,\n.shell-gradient-swatch__stroke {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-radius: inherit;\n pointer-events: none;\n}\n\n/* 1 — fill */\n.shell-gradient-swatch__fill {\n z-index: 1;\n background-color: var(--color-background-secondary);\n background-image: var(--_swatch-gradient-image);\n background-repeat: no-repeat;\n background-size: cover;\n background-position: 0 0;\n transition:\n top var(--_swatch-select-motion),\n right var(--_swatch-select-motion),\n bottom var(--_swatch-select-motion),\n left var(--_swatch-select-motion);\n}\n\n.shell-gradient-swatch--none .shell-gradient-swatch__fill {\n background-image: none;\n}\n\n.shell-gradient-swatch:not(.shell-gradient-swatch--none) .shell-gradient-swatch__fill {\n opacity: var(--ds-shell-gradient-opacity, 0.1);\n}\n\n/* 2 — secondary border (matches ds-interaction-fill--bordered) */\n.shell-gradient-swatch__border {\n z-index: 2;\n box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-secondary);\n transition:\n top var(--_swatch-select-motion),\n right var(--_swatch-select-motion),\n bottom var(--_swatch-select-motion),\n left var(--_swatch-select-motion);\n}\n\n/* 3 — hover / press (over border, under selected chrome) */\n.shell-gradient-swatch__interaction {\n z-index: 3;\n background: transparent;\n transition:\n top var(--_swatch-select-motion),\n right var(--_swatch-select-motion),\n bottom var(--_swatch-select-motion),\n left var(--_swatch-select-motion),\n background-color 0s;\n}\n\n.shell-gradient-swatch:hover:not(:disabled) .shell-gradient-swatch__interaction {\n background: var(--color-interaction-hover);\n}\n\n.shell-gradient-swatch:active:not(:disabled) .shell-gradient-swatch__interaction {\n background: var(--color-interaction-pressed);\n}\n\n/* 4 — halo gap (selected only) */\n.shell-gradient-swatch__halo {\n z-index: 4;\n opacity: 0;\n transform: scale(1.2);\n transform-origin: center;\n box-shadow: inset 0 0 0 var(--_swatch-inner-inset) var(--_swatch-ring-bg);\n transition:\n opacity var(--_swatch-select-motion),\n transform var(--_swatch-select-motion);\n}\n\n/* 5 — brand stroke (selected only) */\n.shell-gradient-swatch__stroke {\n z-index: 5;\n opacity: 0;\n transform: scale(1.2);\n transform-origin: center;\n box-shadow: inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n transition:\n opacity var(--_swatch-select-motion),\n transform var(--_swatch-select-motion);\n}\n\n.shell-gradient-swatch--selected .shell-gradient-swatch__fill,\n.shell-gradient-swatch--selected .shell-gradient-swatch__border,\n.shell-gradient-swatch--selected .shell-gradient-swatch__interaction {\n top: var(--_swatch-inner-inset);\n right: var(--_swatch-inner-inset);\n bottom: var(--_swatch-inner-inset);\n left: var(--_swatch-inner-inset);\n}\n\n.shell-gradient-swatch--selected .shell-gradient-swatch__halo,\n.shell-gradient-swatch--selected .shell-gradient-swatch__stroke {\n opacity: 1;\n transform: scale(1);\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n@media (prefers-reduced-motion: reduce) {\n .shell-gradient-swatch__fill,\n .shell-gradient-swatch__border,\n .shell-gradient-swatch__interaction,\n .shell-gradient-swatch__halo,\n .shell-gradient-swatch__stroke {\n transition: none;\n }\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport {\n SHELL_GRADIENT_PRESET_LABELS,\n buildShellRadialGradientForPreset,\n DEFAULT_SHELL_GRADIENT_PRESET,\n type ShellGradientPreset,\n} from './shell-gradient-swatch-types';\nimport { SHELL_GRADIENT_OPACITY } from '../../nav/shell-gradient';\n\n@Component({\n tag: 'ds-shell-gradient-swatch',\n styleUrl: 'ShellGradientSwatch.css',\n scoped: true,\n})\nexport class ShellGradientSwatch {\n /** Wash preset this orb previews. */\n @Prop({ reflect: true }) preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET;\n\n /** Selected — brand stroke + halo over inner fill/border/interaction stack. */\n @Prop({ reflect: true }) selected = false;\n\n @Prop() isInactive = false;\n\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n\n @Event() dsSelect!: EventEmitter<ShellGradientPreset>;\n\n private handleClick = () => {\n if (this.isInactive) return;\n this.dsSelect.emit(this.preset);\n };\n\n render() {\n const label = this.ariaLabel ?? SHELL_GRADIENT_PRESET_LABELS[this.preset];\n\n return (\n <Host>\n <button\n type=\"button\"\n class={{\n 'shell-gradient-swatch': true,\n 'ds-focus-ring-inset': true,\n 'ds-control-inactive': this.isInactive,\n 'shell-gradient-swatch--selected': this.selected,\n 'shell-gradient-swatch--none': this.preset === 'none',\n }}\n style={\n this.preset === 'none'\n ? undefined\n : {\n '--_swatch-gradient-image': buildShellRadialGradientForPreset(this.preset),\n '--ds-shell-gradient-opacity': SHELL_GRADIENT_OPACITY,\n }\n }\n aria-label={label}\n aria-pressed={this.selected ? 'true' : 'false'}\n disabled={this.isInactive}\n onClick={this.handleClick}\n >\n <span class=\"shell-gradient-swatch__fill\" aria-hidden=\"true\" />\n <span class=\"shell-gradient-swatch__border\" aria-hidden=\"true\" />\n <span class=\"shell-gradient-swatch__interaction\" aria-hidden=\"true\" />\n <span class=\"shell-gradient-swatch__halo\" aria-hidden=\"true\" />\n <span class=\"shell-gradient-swatch__stroke\" aria-hidden=\"true\" />\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"2HAAA,MAAMA,EAAyB,IAAM,+iL,MCcxBC,EAAmBC,EAAA,MAAAD,UAAAE,EALhC,WAAAC,CAAAC,G,6EAO2BC,KAAAC,OAA8BC,EAG9BF,KAAAG,SAAW,MAE5BH,KAAAI,WAAa,MAEcJ,KAAAK,UAA2B,KAItDL,KAAAM,YAAc,KACpB,GAAIN,KAAKI,WAAY,OACrBJ,KAAKO,SAASC,KAAKR,KAAKC,OAAO,CAuClC,CApCC,MAAAQ,GACE,MAAMC,EAAQV,KAAKK,WAAaM,EAA6BX,KAAKC,QAElE,OACEW,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CACEC,KAAK,SACLC,MAAO,CACL,wBAAyB,KACzB,sBAAuB,KACvB,sBAAuBhB,KAAKI,WAC5B,kCAAmCJ,KAAKG,SACxC,8BAA+BH,KAAKC,SAAW,QAEjDgB,MACEjB,KAAKC,SAAW,OACZiB,UACA,CACE,2BAA4BC,EAAkCnB,KAAKC,QACnE,8BAA+BmB,GAChC,aAEKV,EAAK,eACHV,KAAKG,SAAW,OAAS,QACvCkB,SAAUrB,KAAKI,WACfkB,QAAStB,KAAKM,aAEdM,EAAA,QAAAE,IAAA,2CAAME,MAAM,8BAA6B,cAAa,SACtDJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,gCAA+B,cAAa,SACxDJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,qCAAoC,cAAa,SAC7DJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,8BAA6B,cAAa,SACtDJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,gCAA+B,cAAa,U","ignoreList":[]}
@@ -1,2 +1,2 @@
1
- import{p as e,H as a,h as n,a as i,t as r}from"./index.js";import{d as t}from"./p-sBx2MuF2.js";const d="--_badge-gradient-position";function s(e){const a=e.closest("ds-app-shell");return a?.hasAttribute("gradient")===true}const o=()=>`.sc-ds-badge-h{display:inline-flex;align-items:center;justify-content:center;pointer-events:none;vertical-align:middle;--_badge-bg:var(--color-background-bold-brand);--_badge-fg:var(--color-foreground-on-bold-background-primary);--_badge-ring:var(--color-background-secondary);--_badge-ring-width:var(--dimension-stroke-width-018)}.badge__mark.sc-ds-badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;color:var(--_badge-fg);background:var(--_badge-bg);box-shadow:0 0 0 var(--_badge-ring-width) var(--_badge-ring);white-space:nowrap}.badge--dot.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-075);height:var(--dimension-size-075);border-radius:var(--dimension-radius-half)}.badge--counter.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-150);height:var(--dimension-size-150);padding:0;border-radius:var(--dimension-radius-half)}.badge--selected.sc-ds-badge-h{--_badge-bg:var(--color-foreground-primary)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge{position:relative;z-index:0;box-shadow:none;isolation:isolate}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before,.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{content:'';position:absolute;inset:calc(-1 * var(--_badge-ring-width));border-radius:inherit;box-sizing:border-box;padding:var(--_badge-ring-width);pointer-events:none;-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);mask-composite:exclude}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before{z-index:-2;background-color:var(--_badge-ring)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{z-index:-1;background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-position:0 0;background-repeat:no-repeat;background-attachment:fixed;opacity:var(--ds-shell-gradient-opacity, 1)}`;const g={default:"var(--color-background-secondary)",primary:"var(--color-background-primary)",secondary:"var(--color-background-secondary)",medium:"var(--color-background-medium-neutral)",bold:"var(--color-background-bold-neutral)",strong:"var(--color-background-strong-neutral)",navigation:"var(--color-navigation-background)","always-dark":"var(--color-always-dark-background)"};const c=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.variant="counter";this.count=0;this.max=9;this.surface="default";this.gradientBackground=false;this.isSelected=false;this.gradientLayoutVersion=0;this.gradientObserver=null;this.gradientWindowListener=null}componentDidLoad(){this.enableShellGradientRingIfNeeded()}disconnectedCallback(){this.unbindGradientRingSync()}gradientBackgroundChanged(){this.bindGradientRingSync()}enableShellGradientRingIfNeeded(){if(!this.gradientBackground&&s(this.el)){this.gradientBackground=true}if(this.gradientBackground){this.bindGradientRingSync()}}bindGradientRingSync(){this.unbindGradientRingSync();if(!this.gradientBackground)return;const e=()=>{this.gradientLayoutVersion+=1};e();this.gradientWindowListener=e;window.addEventListener("resize",e);if(typeof ResizeObserver!=="undefined"){this.gradientObserver=new ResizeObserver(e);this.gradientObserver.observe(this.el);const a=this.el.closest("ds-app-shell");if(a)this.gradientObserver.observe(a);const n=this.el.closest("ds-bar-nav");if(n)this.gradientObserver.observe(n);const i=this.el.closest("ds-panel-nav");if(i)this.gradientObserver.observe(i)}}unbindGradientRingSync(){if(this.gradientWindowListener){window.removeEventListener("resize",this.gradientWindowListener);this.gradientWindowListener=null}this.gradientObserver?.disconnect();this.gradientObserver=null}ringHostStyle(e){const a={"--_badge-ring":e};if(!this.gradientBackground||!s(this.el))return a;a[d]="0 0";return a}render(){const e=this.variant==="dot";if(!e&&this.count===0)return n(i,{style:{display:"none"}});const a=this.count>this.max?"+":String(this.count);const r=this.label??(e?"Notification":String(this.count));const t=this.background??g[this.surface];return n(i,{class:{badge:true,"badge--counter":!e,"badge--dot":e,"badge--selected":this.isSelected,"badge--on-gradient-background":this.gradientBackground},"aria-label":r,style:this.ringHostStyle(t)},n("span",{class:"badge__mark","aria-hidden":"true"},!e&&n("ds-text",{as:"span",variant:"text-caption",emphasis:true,color:"inherit"},a)))}get el(){return this}static get watchers(){return{gradientBackground:[{gradientBackgroundChanged:0}]}}static get style(){return o()}},[2,"ds-badge",{variant:[1],count:[2],max:[2],surface:[1],background:[1],gradientBackground:[516,"gradient-background"],isSelected:[4,"is-selected"],label:[1],gradientLayoutVersion:[32]},undefined,{gradientBackground:[{gradientBackgroundChanged:0}]}]);function b(){if(typeof customElements==="undefined"){return}const e=["ds-badge","ds-text"];e.forEach((e=>{switch(e){case"ds-badge":if(!customElements.get(r(e))){customElements.define(r(e),c)}break;case"ds-text":if(!customElements.get(r(e))){t()}break}}))}b();export{c as B,b as d};
2
- //# sourceMappingURL=p-DQ3l2TXw.js.map
1
+ import{p as e,H as a,h as n,a as i,t as r}from"./index.js";import{d as t}from"./p-BOQRM49Q.js";const d="--_badge-gradient-position";function s(e){const a=e.closest("ds-app-shell");return a?.hasAttribute("gradient")===true}const o=()=>`.sc-ds-badge-h{display:inline-flex;align-items:center;justify-content:center;pointer-events:none;vertical-align:middle;--_badge-bg:var(--color-background-bold-brand);--_badge-fg:var(--color-foreground-on-bold-background-primary);--_badge-ring:var(--color-background-secondary);--_badge-ring-width:var(--dimension-stroke-width-018)}.badge__mark.sc-ds-badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;color:var(--_badge-fg);background:var(--_badge-bg);box-shadow:0 0 0 var(--_badge-ring-width) var(--_badge-ring);white-space:nowrap}.badge--dot.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-075);height:var(--dimension-size-075);border-radius:var(--dimension-radius-half)}.badge--counter.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-150);height:var(--dimension-size-150);padding:0;border-radius:var(--dimension-radius-half)}.badge--selected.sc-ds-badge-h{--_badge-bg:var(--color-foreground-primary)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge{position:relative;z-index:0;box-shadow:none;isolation:isolate}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before,.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{content:'';position:absolute;inset:calc(-1 * var(--_badge-ring-width));border-radius:inherit;box-sizing:border-box;padding:var(--_badge-ring-width);pointer-events:none;-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);mask-composite:exclude}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before{z-index:-2;background-color:var(--_badge-ring)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{z-index:-1;background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-position:0 0;background-repeat:no-repeat;background-attachment:fixed;opacity:var(--ds-shell-gradient-opacity, 1)}`;const g={default:"var(--color-background-secondary)",primary:"var(--color-background-primary)",secondary:"var(--color-background-secondary)",medium:"var(--color-background-medium-neutral)",bold:"var(--color-background-bold-neutral)",strong:"var(--color-background-strong-neutral)",navigation:"var(--color-navigation-background)","always-dark":"var(--color-always-dark-background)"};const c=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.variant="counter";this.count=0;this.max=9;this.surface="default";this.gradientBackground=false;this.isSelected=false;this.gradientLayoutVersion=0;this.gradientObserver=null;this.gradientWindowListener=null}componentDidLoad(){this.enableShellGradientRingIfNeeded()}disconnectedCallback(){this.unbindGradientRingSync()}gradientBackgroundChanged(){this.bindGradientRingSync()}enableShellGradientRingIfNeeded(){if(!this.gradientBackground&&s(this.el)){this.gradientBackground=true}if(this.gradientBackground){this.bindGradientRingSync()}}bindGradientRingSync(){this.unbindGradientRingSync();if(!this.gradientBackground)return;const e=()=>{this.gradientLayoutVersion+=1};e();this.gradientWindowListener=e;window.addEventListener("resize",e);if(typeof ResizeObserver!=="undefined"){this.gradientObserver=new ResizeObserver(e);this.gradientObserver.observe(this.el);const a=this.el.closest("ds-app-shell");if(a)this.gradientObserver.observe(a);const n=this.el.closest("ds-bar-nav");if(n)this.gradientObserver.observe(n);const i=this.el.closest("ds-panel-nav");if(i)this.gradientObserver.observe(i)}}unbindGradientRingSync(){if(this.gradientWindowListener){window.removeEventListener("resize",this.gradientWindowListener);this.gradientWindowListener=null}this.gradientObserver?.disconnect();this.gradientObserver=null}ringHostStyle(e){const a={"--_badge-ring":e};if(!this.gradientBackground||!s(this.el))return a;a[d]="0 0";return a}render(){const e=this.variant==="dot";if(!e&&this.count===0)return n(i,{style:{display:"none"}});const a=this.count>this.max?"+":String(this.count);const r=this.label??(e?"Notification":String(this.count));const t=this.background??g[this.surface];return n(i,{class:{badge:true,"badge--counter":!e,"badge--dot":e,"badge--selected":this.isSelected,"badge--on-gradient-background":this.gradientBackground},"aria-label":r,style:this.ringHostStyle(t)},n("span",{class:"badge__mark","aria-hidden":"true"},!e&&n("ds-text",{as:"span",variant:"text-caption",emphasis:true,color:"inherit"},a)))}get el(){return this}static get watchers(){return{gradientBackground:[{gradientBackgroundChanged:0}]}}static get style(){return o()}},[2,"ds-badge",{variant:[1],count:[2],max:[2],surface:[1],background:[1],gradientBackground:[516,"gradient-background"],isSelected:[4,"is-selected"],label:[1],gradientLayoutVersion:[32]},undefined,{gradientBackground:[{gradientBackgroundChanged:0}]}]);function b(){if(typeof customElements==="undefined"){return}const e=["ds-badge","ds-text"];e.forEach((e=>{switch(e){case"ds-badge":if(!customElements.get(r(e))){customElements.define(r(e),c)}break;case"ds-text":if(!customElements.get(r(e))){t()}break}}))}b();export{c as B,b as d};
2
+ //# sourceMappingURL=p-DEgY_Lnb.js.map
@@ -1,2 +1,2 @@
1
- import{p as n,H as t,c as o,h as i,a as s,t as e}from"./index.js";import{d}from"./p-DQ3l2TXw.js";import{d as r}from"./p-9Qu1ls2y.js";import{d as l}from"./p-sBx2MuF2.js";import{C as a}from"./p-Cx-ywr1e.js";import{c}from"./p-DuFm-ieS.js";const u=()=>`.sc-ds-button-unfilled-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-button-unfilled:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-button-unfilled{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-button-unfilled:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-unfilled:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-button-unfilled-h,.ds-interaction-fill.sc-ds-button-unfilled{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-button-unfilled-h::before,.ds-interaction-fill.sc-ds-button-unfilled::before,.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-button-unfilled-h::before,.ds-interaction-fill.sc-ds-button-unfilled::before{z-index:1}.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-button-unfilled-h,.ds-interaction-fill--bordered.sc-ds-button-unfilled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-button-unfilled-h::before,.ds-interaction-fill--selected.sc-ds-button-unfilled::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-button-unfilled-h,.ds-interaction-fill--selected.sc-ds-button-unfilled{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-button-unfilled-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-unfilled:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-button-unfilled-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-unfilled:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-button-unfilled-h>.ds-interaction-fill__content.sc-ds-button-unfilled,.ds-interaction-fill.sc-ds-button-unfilled>.ds-interaction-fill__content.sc-ds-button-unfilled,.ds-interaction-fill__content.sc-ds-button-unfilled{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-button-unfilled-h,.ds-interaction-fill--on-medium.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-button-unfilled-h,.ds-interaction-fill--on-bold.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-button-unfilled-h,.ds-interaction-fill--on-strong.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-button-unfilled-h,.ds-interaction-fill--on-always-dark.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-button-unfilled-h,.ds-interaction-fill--on-navigation.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-button-unfilled-h,.ds-control-inactive.sc-ds-button-unfilled{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-button-unfilled-h,.ds-control--md.sc-ds-button-unfilled{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-button-unfilled-h,.ds-control--sm.sc-ds-button-unfilled{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-button-unfilled-h,.ds-control--xs.sc-ds-button-unfilled{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control-width--hug.sc-ds-button-unfilled-h,.ds-control-width--hug.sc-ds-button-unfilled{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-button-unfilled-h,.ds-control-width--fill.sc-ds-button-unfilled{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.sc-ds-button-unfilled-h{display:inline-flex;outline:none;--ds-button-unfilled-fg:var(--color-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-background-secondary);--ds-button-unfilled-border:var(--color-border-secondary)}.button-unfilled-host--icon.ds-control-width--hug.sc-ds-button-unfilled-h{width:var(--ds-control-height, var(--dimension-size-400));height:var(--ds-control-height, var(--dimension-size-400));min-width:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.button-unfilled-host--icon.ds-control-width--fill.sc-ds-button-unfilled-h{height:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.ds-control-width--fill.sc-ds-button-unfilled-h .button-unfilled.sc-ds-button-unfilled{width:100%}.button-unfilled.sc-ds-button-unfilled{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-button-unfilled-fg);cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;transition:color var(--effect-motion-short-2)}.button-unfilled--icon.sc-ds-button-unfilled{width:100%;height:100%;padding:0}.button-unfilled--active.sc-ds-button-unfilled{color:var(--ds-button-unfilled-fg-active)}.button-unfilled--bordered.sc-ds-button-unfilled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-button-unfilled-border)}.button-unfilled--bordered.sc-ds-button-unfilled:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.button-unfilled--contrast-medium.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-medium-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-medium-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-medium-neutral);--ds-button-unfilled-border:var(--color-border-on-medium-background-secondary)}.button-unfilled--contrast-bold.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-bold-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-bold-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-bold-neutral);--ds-button-unfilled-border:var(--color-border-on-bold-background-secondary)}.button-unfilled--contrast-strong.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-strong-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-strong-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-strong-neutral);--ds-button-unfilled-border:var(--color-border-on-strong-background-secondary)}.button-unfilled--on-always-dark.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-always-dark-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-always-dark-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-always-dark-background);--ds-button-unfilled-border:var(--color-always-dark-border-secondary)}.button-unfilled--on-navigation.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-navigation-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-navigation-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-navigation-background);--ds-button-unfilled-border:var(--color-navigation-border-secondary)}.button-unfilled.ds-interaction-fill--selected.sc-ds-button-unfilled{--ds-button-unfilled-dot-ring:var(--ds-interaction-active)}.button-unfilled__icon-wrap.sc-ds-button-unfilled{position:relative;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2}.button-unfilled__label.sc-ds-button-unfilled{position:relative;z-index:2;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));white-space:nowrap;flex-shrink:0;min-width:0}.button-unfilled__dot.sc-ds-button-unfilled{position:absolute;top:0;right:0;z-index:2;pointer-events:none}`;const f={md:"md",sm:"sm",xs:"xs"};const b=n(class n extends t{constructor(n){super();if(n!==false){this.__registerHost()}this.dsClick=o(this,"dsClick");this.dsChange=o(this,"dsChange");this.variant="label";this.size="md";this.width="hug";this.label="";this.icon="";this.isActive=false;this.activeFill=true;this.hasBorder=true;this.dot=false;this.isInactive=false;this.type="button";this.buttonEl=null;this.handleClick=n=>{if(this.isInactive)return;this.dsClick.emit(n);this.dsChange.emit(!this.isActive)}}async setFocus(){this.buttonEl?.focus()}effectiveContrast(){return this.backgroundContrast??"default"}get showIcon(){return this.variant==="icon"||this.variant==="icon-label"}get showLabel(){return this.variant==="label"||this.variant==="icon-label"}get showDot(){return this.variant==="icon"&&this.dot}get dotRing(){if(this.isActive&&this.activeFill){return"var(--ds-interaction-active)"}return"var(--ds-button-unfilled-dot-ring)"}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.showLabel&&this.label)return undefined;if(this.variant==="icon")return this.icon||"action";return this.label||"action"}render(){const n=this.background;const t=this.effectiveContrast();const o=a[this.size];const e=f[this.size];const d={"button-unfilled":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":this.isActive&&this.activeFill&&!this.isInactive,"ds-interaction-fill--on-medium":t==="medium","ds-interaction-fill--on-bold":t==="bold","ds-interaction-fill--on-strong":t==="strong","ds-interaction-fill--on-always-dark":n==="always-dark","ds-interaction-fill--on-navigation":n==="navigation","button-unfilled--active":this.isActive,"button-unfilled--bordered":this.hasBorder,"ds-control-inactive":this.isInactive,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","button-unfilled--icon":this.variant==="icon","button-unfilled--label":this.variant==="label","button-unfilled--icon-label":this.variant==="icon-label","button-unfilled--contrast-medium":t==="medium","button-unfilled--contrast-bold":t==="bold","button-unfilled--contrast-strong":t==="strong","button-unfilled--on-always-dark":n==="always-dark","button-unfilled--on-navigation":n==="navigation"};return i(s,{key:"2d979484f1a3cee8ead4ca3f7c9edfab8dd474b2",class:{"button-unfilled-host":true,"button-unfilled-host--icon":this.variant==="icon","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...c(this.width)},tabIndex:-1},i("button",{key:"6b0348d367c9eb73ef8a76ad94bd07b23ccea68d",ref:n=>{this.buttonEl=n??null},type:this.type,class:d,disabled:this.isInactive,tabIndex:this.focusTabIndex??0,"aria-label":this.accessibleName,"aria-controls":this.controls,"aria-expanded":this.expanded===undefined?undefined:String(this.expanded),"aria-haspopup":this.haspopup,"aria-pressed":this.pressed===undefined?undefined:String(this.pressed),onClick:this.handleClick},this.showIcon&&i("span",{key:"738b15892de45bc9e8a7bf0f1e16df64170ce359",class:"button-unfilled__icon-wrap ds-interaction-fill__content"},i("ds-icon",{key:"bc049c53a41b8eb09daacb68c73fef99aa66fa76",name:this.icon,size:e,color:"inherit"}),this.showDot&&i("ds-badge",{key:"c9eeacc100e32331c27d85a16b422abe59df6147",class:"button-unfilled__dot",variant:"dot",background:this.dotRing,label:"","aria-hidden":"true"})),this.showLabel&&i("ds-text",{key:"b577aed4bf50bf8987c6ff4fcdfdd989ee71bc96",class:"button-unfilled__label ds-interaction-fill__content",as:"span",variant:o,emphasis:true,color:"inherit"},this.label)))}get el(){return this}static get style(){return u()}},[2,"ds-button-unfilled",{variant:[1],size:[1],width:[1],label:[1],icon:[1],isActive:[4,"is-active"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],dot:[4],isInactive:[4,"is-inactive"],type:[1],backgroundContrast:[1,"on-background-contrast"],background:[1],ariaLabel:[1,"aria-label"],controls:[1],expanded:[4],haspopup:[1],pressed:[4],focusTabIndex:[2,"tab-index"],setFocus:[64]}]);function h(){if(typeof customElements==="undefined"){return}const n=["ds-button-unfilled","ds-badge","ds-icon","ds-text"];n.forEach((n=>{switch(n){case"ds-button-unfilled":if(!customElements.get(e(n))){customElements.define(e(n),b)}break;case"ds-badge":if(!customElements.get(e(n))){d()}break;case"ds-icon":if(!customElements.get(e(n))){r()}break;case"ds-text":if(!customElements.get(e(n))){l()}break}}))}h();export{b as B,h as d};
2
- //# sourceMappingURL=p-CNgNgezy.js.map
1
+ import{p as n,H as t,c as o,h as i,a as s,t as e}from"./index.js";import{d}from"./p-DEgY_Lnb.js";import{d as r}from"./p-9Qu1ls2y.js";import{d as l}from"./p-BOQRM49Q.js";import{C as a}from"./p-Cx-ywr1e.js";import{c}from"./p-DuFm-ieS.js";const u=()=>`.sc-ds-button-unfilled-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-button-unfilled:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-button-unfilled{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-button-unfilled:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-unfilled:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-button-unfilled-h,.ds-interaction-fill.sc-ds-button-unfilled{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-button-unfilled-h::before,.ds-interaction-fill.sc-ds-button-unfilled::before,.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-button-unfilled-h::before,.ds-interaction-fill.sc-ds-button-unfilled::before{z-index:1}.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-button-unfilled-h,.ds-interaction-fill--bordered.sc-ds-button-unfilled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-button-unfilled-h::before,.ds-interaction-fill--selected.sc-ds-button-unfilled::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-button-unfilled-h,.ds-interaction-fill--selected.sc-ds-button-unfilled{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-button-unfilled-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-unfilled:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-button-unfilled-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-unfilled:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-button-unfilled-h>.ds-interaction-fill__content.sc-ds-button-unfilled,.ds-interaction-fill.sc-ds-button-unfilled>.ds-interaction-fill__content.sc-ds-button-unfilled,.ds-interaction-fill__content.sc-ds-button-unfilled{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-button-unfilled-h,.ds-interaction-fill--on-medium.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-button-unfilled-h,.ds-interaction-fill--on-bold.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-button-unfilled-h,.ds-interaction-fill--on-strong.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-button-unfilled-h,.ds-interaction-fill--on-always-dark.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-button-unfilled-h,.ds-interaction-fill--on-navigation.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-button-unfilled-h,.ds-control-inactive.sc-ds-button-unfilled{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-button-unfilled-h,.ds-control--md.sc-ds-button-unfilled{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-button-unfilled-h,.ds-control--sm.sc-ds-button-unfilled{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-button-unfilled-h,.ds-control--xs.sc-ds-button-unfilled{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control-width--hug.sc-ds-button-unfilled-h,.ds-control-width--hug.sc-ds-button-unfilled{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-button-unfilled-h,.ds-control-width--fill.sc-ds-button-unfilled{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.sc-ds-button-unfilled-h{display:inline-flex;outline:none;--ds-button-unfilled-fg:var(--color-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-background-secondary);--ds-button-unfilled-border:var(--color-border-secondary)}.button-unfilled-host--icon.ds-control-width--hug.sc-ds-button-unfilled-h{width:var(--ds-control-height, var(--dimension-size-400));height:var(--ds-control-height, var(--dimension-size-400));min-width:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.button-unfilled-host--icon.ds-control-width--fill.sc-ds-button-unfilled-h{height:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.ds-control-width--fill.sc-ds-button-unfilled-h .button-unfilled.sc-ds-button-unfilled{width:100%}.button-unfilled.sc-ds-button-unfilled{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-button-unfilled-fg);cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;transition:color var(--effect-motion-short-2)}.button-unfilled--icon.sc-ds-button-unfilled{width:100%;height:100%;padding:0}.button-unfilled--active.sc-ds-button-unfilled{color:var(--ds-button-unfilled-fg-active)}.button-unfilled--bordered.sc-ds-button-unfilled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-button-unfilled-border)}.button-unfilled--bordered.sc-ds-button-unfilled:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.button-unfilled--contrast-medium.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-medium-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-medium-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-medium-neutral);--ds-button-unfilled-border:var(--color-border-on-medium-background-secondary)}.button-unfilled--contrast-bold.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-bold-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-bold-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-bold-neutral);--ds-button-unfilled-border:var(--color-border-on-bold-background-secondary)}.button-unfilled--contrast-strong.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-strong-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-strong-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-strong-neutral);--ds-button-unfilled-border:var(--color-border-on-strong-background-secondary)}.button-unfilled--on-always-dark.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-always-dark-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-always-dark-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-always-dark-background);--ds-button-unfilled-border:var(--color-always-dark-border-secondary)}.button-unfilled--on-navigation.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-navigation-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-navigation-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-navigation-background);--ds-button-unfilled-border:var(--color-navigation-border-secondary)}.button-unfilled.ds-interaction-fill--selected.sc-ds-button-unfilled{--ds-button-unfilled-dot-ring:var(--ds-interaction-active)}.button-unfilled__icon-wrap.sc-ds-button-unfilled{position:relative;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2}.button-unfilled__label.sc-ds-button-unfilled{position:relative;z-index:2;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));white-space:nowrap;flex-shrink:0;min-width:0}.button-unfilled__dot.sc-ds-button-unfilled{position:absolute;top:0;right:0;z-index:2;pointer-events:none}`;const f={md:"md",sm:"sm",xs:"xs"};const b=n(class n extends t{constructor(n){super();if(n!==false){this.__registerHost()}this.dsClick=o(this,"dsClick");this.dsChange=o(this,"dsChange");this.variant="label";this.size="md";this.width="hug";this.label="";this.icon="";this.isActive=false;this.activeFill=true;this.hasBorder=true;this.dot=false;this.isInactive=false;this.type="button";this.ariaLabel=null;this.buttonEl=null;this.handleClick=n=>{if(this.isInactive)return;this.dsClick.emit(n);this.dsChange.emit(!this.isActive)}}async setFocus(){this.buttonEl?.focus()}effectiveContrast(){return this.backgroundContrast??"default"}get showIcon(){return this.variant==="icon"||this.variant==="icon-label"}get showLabel(){return this.variant==="label"||this.variant==="icon-label"}get showDot(){return this.variant==="icon"&&this.dot}get dotRing(){if(this.isActive&&this.activeFill){return"var(--ds-interaction-active)"}return"var(--ds-button-unfilled-dot-ring)"}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.showLabel&&this.label)return undefined;if(this.variant==="icon")return this.icon||"action";return this.label||"action"}render(){const n=this.background;const t=this.effectiveContrast();const o=a[this.size];const e=f[this.size];const d={"button-unfilled":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":this.isActive&&this.activeFill&&!this.isInactive,"ds-interaction-fill--on-medium":t==="medium","ds-interaction-fill--on-bold":t==="bold","ds-interaction-fill--on-strong":t==="strong","ds-interaction-fill--on-always-dark":n==="always-dark","ds-interaction-fill--on-navigation":n==="navigation","button-unfilled--active":this.isActive,"button-unfilled--bordered":this.hasBorder,"ds-control-inactive":this.isInactive,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","button-unfilled--icon":this.variant==="icon","button-unfilled--label":this.variant==="label","button-unfilled--icon-label":this.variant==="icon-label","button-unfilled--contrast-medium":t==="medium","button-unfilled--contrast-bold":t==="bold","button-unfilled--contrast-strong":t==="strong","button-unfilled--on-always-dark":n==="always-dark","button-unfilled--on-navigation":n==="navigation"};return i(s,{key:"75ce066872d1826e4f64e9a2337d1749778ea4f9",class:{"button-unfilled-host":true,"button-unfilled-host--icon":this.variant==="icon","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...c(this.width)},tabIndex:-1},i("button",{key:"a3a0c18d952d1b78023fc89b216c5b77221247ac",ref:n=>{this.buttonEl=n??null},type:this.type,class:d,disabled:this.isInactive,tabIndex:this.focusTabIndex??0,"aria-label":this.accessibleName,"aria-controls":this.controls,"aria-expanded":this.expanded===undefined?undefined:String(this.expanded),"aria-haspopup":this.haspopup,"aria-pressed":this.pressed===undefined?undefined:String(this.pressed),onClick:this.handleClick},this.showIcon&&i("span",{key:"4105d7b25b912dc690827e2a26767a5b3fab17e0",class:"button-unfilled__icon-wrap ds-interaction-fill__content"},i("ds-icon",{key:"e8987c5531cb80d357000c5ead825c30376c5a96",name:this.icon,size:e,color:"inherit"}),this.showDot&&i("ds-badge",{key:"8f605dab684c672918e142d72c31f653140414d8",class:"button-unfilled__dot",variant:"dot",background:this.dotRing,label:"","aria-hidden":"true"})),this.showLabel&&i("ds-text",{key:"5d0065ca18def0991263879542ce21054a39cdd7",class:"button-unfilled__label ds-interaction-fill__content",as:"span",variant:o,emphasis:true,color:"inherit"},this.label)))}get el(){return this}static get style(){return u()}},[2,"ds-button-unfilled",{variant:[1],size:[1],width:[1],label:[1],icon:[1],isActive:[4,"is-active"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],dot:[4],isInactive:[4,"is-inactive"],type:[1],backgroundContrast:[1,"on-background-contrast"],background:[1],ariaLabel:[1,"aria-label"],controls:[1],expanded:[4],haspopup:[1],pressed:[4],focusTabIndex:[2,"tab-index"],setFocus:[64]}]);function h(){if(typeof customElements==="undefined"){return}const n=["ds-button-unfilled","ds-badge","ds-icon","ds-text"];n.forEach((n=>{switch(n){case"ds-button-unfilled":if(!customElements.get(e(n))){customElements.define(e(n),b)}break;case"ds-badge":if(!customElements.get(e(n))){d()}break;case"ds-icon":if(!customElements.get(e(n))){r()}break;case"ds-text":if(!customElements.get(e(n))){l()}break}}))}h();export{b as B,h as d};
2
+ //# sourceMappingURL=p-DHjjwgku.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["buttonUnfilledCss","ICON_SIZE","md","sm","xs","ButtonUnfilled","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","width","label","icon","isActive","activeFill","hasBorder","dot","isInactive","type","buttonEl","handleClick","event","dsClick","emit","dsChange","setFocus","focus","effectiveContrast","backgroundContrast","showIcon","showLabel","showDot","dotRing","accessibleName","ariaLabel","undefined","render","bg","background","contrast","textVariant","CONTROL_TEXT_VARIANT","iconSize","cls","h","Host","key","class","controlWidthClass","tabIndex","ref","el","disabled","focusTabIndex","controls","expanded","String","haspopup","pressed","onClick","name","color","as","emphasis"],"sources":["src/wc/components/ButtonUnfilled/ButtonUnfilled.css?tag=ds-button-unfilled&encapsulation=scoped","src/wc/components/ButtonUnfilled/ButtonUnfilled.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-width.css';\n\n:host {\n display: inline-flex;\n outline: none;\n --ds-button-unfilled-fg: var(--color-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-background-secondary);\n --ds-button-unfilled-border: var(--color-border-secondary);\n}\n\n/* Icon-only: fixed square from density height (hug). Fill stretches the hit target. */\n:host(.button-unfilled-host--icon.ds-control-width--hug) {\n width: var(--ds-control-height, var(--dimension-size-400));\n height: var(--ds-control-height, var(--dimension-size-400));\n min-width: var(--ds-control-height, var(--dimension-size-400));\n min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.button-unfilled-host--icon.ds-control-width--fill) {\n height: var(--ds-control-height, var(--dimension-size-400));\n min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.ds-control-width--fill) .button-unfilled {\n width: 100%;\n}\n\n.button-unfilled {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: var(--ds-control-height, var(--dimension-size-400));\n padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n gap: var(--ds-control-gap, var(--dimension-space-050));\n background: transparent;\n border: none;\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n color: var(--ds-button-unfilled-fg);\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n overflow: hidden;\n transition: color var(--effect-motion-short-2);\n /* Hover/press/selected fill: `.ds-interaction-fill` (+ `--selected` / `--on-*`).\n Active always promotes foreground to primary (toggle mode). */\n}\n\n.button-unfilled--icon {\n width: 100%;\n height: 100%;\n padding: 0;\n}\n\n.button-unfilled--active {\n color: var(--ds-button-unfilled-fg-active);\n}\n\n/* Inset stroke via interaction-fill ::after (above selected / hover washes). */\n.button-unfilled--bordered {\n --ds-interaction-border-width: var(--dimension-stroke-width-012);\n --ds-interaction-border-color: var(--ds-button-unfilled-border);\n}\n\n/* Fallback if interaction-fill is omitted (should be rare — prefer keep the util class). */\n.button-unfilled--bordered: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` (25% opacity). */\n\n/* Foreground / chrome tokens per surface — interaction tokens come from util `--on-*`. */\n.button-unfilled--contrast-medium {\n --ds-button-unfilled-fg: var(--color-foreground-on-medium-background-secondary);\n --ds-button-unfilled-fg-active: var(--color-foreground-on-medium-background-primary);\n --ds-button-unfilled-dot-ring: var(--color-background-medium-neutral);\n --ds-button-unfilled-border: var(--color-border-on-medium-background-secondary);\n}\n\n.button-unfilled--contrast-bold {\n --ds-button-unfilled-fg: var(--color-foreground-on-bold-background-secondary);\n --ds-button-unfilled-fg-active: var(--color-foreground-on-bold-background-primary);\n --ds-button-unfilled-dot-ring: var(--color-background-bold-neutral);\n --ds-button-unfilled-border: var(--color-border-on-bold-background-secondary);\n}\n\n.button-unfilled--contrast-strong {\n --ds-button-unfilled-fg: var(--color-foreground-on-strong-background-secondary);\n --ds-button-unfilled-fg-active: var(--color-foreground-on-strong-background-primary);\n --ds-button-unfilled-dot-ring: var(--color-background-strong-neutral);\n --ds-button-unfilled-border: var(--color-border-on-strong-background-secondary);\n}\n\n.button-unfilled--on-always-dark {\n --ds-button-unfilled-fg: var(--color-always-dark-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-always-dark-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-always-dark-background);\n --ds-button-unfilled-border: var(--color-always-dark-border-secondary);\n}\n\n.button-unfilled--on-navigation {\n --ds-button-unfilled-fg: var(--color-navigation-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-navigation-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-navigation-background);\n --ds-button-unfilled-border: var(--color-navigation-border-secondary);\n}\n\n/*\n * After surface ring defaults: selected fill remaps the knock-out to the active\n * wash so the badge halo matches the selected background.\n */\n.button-unfilled.ds-interaction-fill--selected {\n --ds-button-unfilled-dot-ring: var(--ds-interaction-active);\n}\n\n.button-unfilled__icon-wrap {\n position: relative;\n width: var(--ds-control-icon, var(--dimension-iconography-md));\n height: var(--ds-control-icon, var(--dimension-iconography-md));\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n z-index: 2;\n}\n\n.button-unfilled__label {\n position: relative;\n z-index: 2;\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n white-space: nowrap;\n flex-shrink: 0;\n min-width: 0;\n}\n\n.button-unfilled__dot {\n position: absolute;\n top: 0;\n right: 0;\n z-index: 2;\n pointer-events: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';\n\nexport type ButtonUnfilledOnBackgroundContrast = 'default' | 'medium' | 'bold' | 'strong';\n\nexport type ButtonUnfilledBackground = 'always-dark' | 'navigation';\n\nexport type ButtonUnfilledVariant = 'icon' | 'label' | 'icon-label';\n\nexport type ButtonUnfilledSize = 'md' | 'sm' | 'xs';\n\nexport type ButtonUnfilledWidth = ControlWidth;\n\n/**\n * `ds-icon` size prop matching control-density icon metrics\n * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).\n */\nconst ICON_SIZE: Record<ButtonUnfilledSize, 'md' | 'sm' | 'xs'> = {\n md: 'md',\n sm: 'sm',\n xs: 'xs',\n};\n\n@Component({\n tag: 'ds-button-unfilled',\n styleUrl: 'ButtonUnfilled.css',\n scoped: true,\n})\nexport class ButtonUnfilled {\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: ButtonUnfilledVariant = 'label';\n\n /** Control density (height, padding, icon, type). */\n @Prop() size: ButtonUnfilledSize = 'md';\n\n /** Width fit — hug content (default) or fill the parent. */\n @Prop() width: ButtonUnfilledWidth = 'hug';\n\n /** Visible text for `label` / `icon-label` variants. */\n @Prop() label: string = '';\n\n /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n @Prop() icon: string = '';\n\n /** Active/selected visual state. Always promotes foreground to primary. */\n @Prop() isActive: boolean = false;\n\n /**\n * When active, render the selected interaction fill.\n * Default `true` for general UI. Shell chrome (nav / tool rails) should pass\n * `false` so selection is foreground-only (primary color, no fill).\n */\n @Prop() activeFill: boolean = true;\n\n /** Show a 1px secondary inset border. Default on; shell chrome can pass `false`. */\n @Prop() hasBorder: boolean = true;\n\n /** Show a notification dot at the top-right of the icon zone (icon variant only). */\n @Prop() dot: boolean = false;\n\n /** Disables interaction. */\n @Prop() isInactive: boolean = false;\n\n /** Native button type. */\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n /**\n * Foreground and interaction tokens when the button sits on a contrasting parent\n * background (default, medium, bold, or strong).\n */\n @Prop({ attribute: 'on-background-contrast' })\n backgroundContrast?: ButtonUnfilledOnBackgroundContrast;\n\n /** Parent surface context for navigation and always-dark chrome. */\n @Prop() background: ButtonUnfilledBackground | undefined;\n\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n @Prop() controls: string | undefined;\n @Prop() expanded: boolean | undefined;\n @Prop() haspopup: string | undefined;\n @Prop() pressed: boolean | undefined;\n\n /**\n * Native `tabindex` for roving keyboard groups in shell chrome.\n * Omit for the default button tab stop (`0`).\n */\n @Prop({ attribute: 'tab-index' }) focusTabIndex?: number;\n\n @Event() dsClick!: EventEmitter<MouseEvent>;\n @Event() dsChange!: EventEmitter<boolean>;\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) return;\n this.dsClick.emit(event);\n this.dsChange.emit(!this.isActive);\n };\n\n private effectiveContrast(): ButtonUnfilledOnBackgroundContrast {\n return this.backgroundContrast ?? 'default';\n }\n\n private get showIcon(): boolean {\n return this.variant === 'icon' || this.variant === 'icon-label';\n }\n\n private get showLabel(): boolean {\n return this.variant === 'label' || this.variant === 'icon-label';\n }\n\n private get showDot(): boolean {\n return this.variant === 'icon' && this.dot;\n }\n\n /** Knock-out ring: selected fill → active wash; otherwise surface token. */\n private get dotRing(): string {\n if (this.isActive && this.activeFill) {\n return 'var(--ds-interaction-active)';\n }\n return 'var(--ds-button-unfilled-dot-ring)';\n }\n\n private get accessibleName(): string | undefined {\n if (this.ariaLabel) return this.ariaLabel;\n if (this.showLabel && this.label) return undefined;\n if (this.variant === 'icon') return this.icon || 'action';\n return this.label || 'action';\n }\n\n render() {\n const bg = this.background;\n const contrast = this.effectiveContrast();\n const textVariant = CONTROL_TEXT_VARIANT[this.size];\n const iconSize = ICON_SIZE[this.size];\n\n const cls: Record<string, boolean> = {\n 'button-unfilled': true,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': true,\n 'ds-interaction-fill--selected': this.isActive && this.activeFill && !this.isInactive,\n 'ds-interaction-fill--on-medium': contrast === 'medium',\n 'ds-interaction-fill--on-bold': contrast === 'bold',\n 'ds-interaction-fill--on-strong': contrast === 'strong',\n 'ds-interaction-fill--on-always-dark': bg === 'always-dark',\n 'ds-interaction-fill--on-navigation': bg === 'navigation',\n 'button-unfilled--active': this.isActive,\n 'button-unfilled--bordered': this.hasBorder,\n 'ds-control-inactive': this.isInactive,\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n 'button-unfilled--icon': this.variant === 'icon',\n 'button-unfilled--label': this.variant === 'label',\n 'button-unfilled--icon-label': this.variant === 'icon-label',\n 'button-unfilled--contrast-medium': contrast === 'medium',\n 'button-unfilled--contrast-bold': contrast === 'bold',\n 'button-unfilled--contrast-strong': contrast === 'strong',\n 'button-unfilled--on-always-dark': bg === 'always-dark',\n 'button-unfilled--on-navigation': bg === 'navigation',\n };\n\n return (\n <Host\n class={{\n 'button-unfilled-host': true,\n 'button-unfilled-host--icon': this.variant === 'icon',\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\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 tabIndex={this.focusTabIndex ?? 0}\n aria-label={this.accessibleName}\n aria-controls={this.controls}\n aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}\n aria-haspopup={this.haspopup}\n aria-pressed={this.pressed === undefined ? undefined : String(this.pressed)}\n onClick={this.handleClick}\n >\n {this.showIcon && (\n <span class=\"button-unfilled__icon-wrap ds-interaction-fill__content\">\n <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n {this.showDot && (\n <ds-badge\n class=\"button-unfilled__dot\"\n variant=\"dot\"\n background={this.dotRing}\n label=\"\"\n aria-hidden=\"true\"\n />\n )}\n </span>\n )}\n {this.showLabel && (\n <ds-text\n class=\"button-unfilled__label ds-interaction-fill__content\"\n as=\"span\"\n variant={textVariant}\n emphasis\n color=\"inherit\"\n >\n {this.label}\n </ds-text>\n )}\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["buttonUnfilledCss","ICON_SIZE","md","sm","xs","ButtonUnfilled","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","width","label","icon","isActive","activeFill","hasBorder","dot","isInactive","type","ariaLabel","buttonEl","handleClick","event","dsClick","emit","dsChange","setFocus","focus","effectiveContrast","backgroundContrast","showIcon","showLabel","showDot","dotRing","accessibleName","undefined","render","bg","background","contrast","textVariant","CONTROL_TEXT_VARIANT","iconSize","cls","h","Host","key","class","controlWidthClass","tabIndex","ref","el","disabled","focusTabIndex","controls","expanded","String","haspopup","pressed","onClick","name","color","as","emphasis"],"sources":["src/wc/components/ButtonUnfilled/ButtonUnfilled.css?tag=ds-button-unfilled&encapsulation=scoped","src/wc/components/ButtonUnfilled/ButtonUnfilled.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-width.css';\n\n:host {\n display: inline-flex;\n outline: none;\n --ds-button-unfilled-fg: var(--color-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-background-secondary);\n --ds-button-unfilled-border: var(--color-border-secondary);\n}\n\n/* Icon-only: fixed square from density height (hug). Fill stretches the hit target. */\n:host(.button-unfilled-host--icon.ds-control-width--hug) {\n width: var(--ds-control-height, var(--dimension-size-400));\n height: var(--ds-control-height, var(--dimension-size-400));\n min-width: var(--ds-control-height, var(--dimension-size-400));\n min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.button-unfilled-host--icon.ds-control-width--fill) {\n height: var(--ds-control-height, var(--dimension-size-400));\n min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.ds-control-width--fill) .button-unfilled {\n width: 100%;\n}\n\n.button-unfilled {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: var(--ds-control-height, var(--dimension-size-400));\n padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n gap: var(--ds-control-gap, var(--dimension-space-050));\n background: transparent;\n border: none;\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n color: var(--ds-button-unfilled-fg);\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n overflow: hidden;\n transition: color var(--effect-motion-short-2);\n /* Hover/press/selected fill: `.ds-interaction-fill` (+ `--selected` / `--on-*`).\n Active always promotes foreground to primary (toggle mode). */\n}\n\n.button-unfilled--icon {\n width: 100%;\n height: 100%;\n padding: 0;\n}\n\n.button-unfilled--active {\n color: var(--ds-button-unfilled-fg-active);\n}\n\n/* Inset stroke via interaction-fill ::after (above selected / hover washes). */\n.button-unfilled--bordered {\n --ds-interaction-border-width: var(--dimension-stroke-width-012);\n --ds-interaction-border-color: var(--ds-button-unfilled-border);\n}\n\n/* Fallback if interaction-fill is omitted (should be rare — prefer keep the util class). */\n.button-unfilled--bordered: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` (25% opacity). */\n\n/* Foreground / chrome tokens per surface — interaction tokens come from util `--on-*`. */\n.button-unfilled--contrast-medium {\n --ds-button-unfilled-fg: var(--color-foreground-on-medium-background-secondary);\n --ds-button-unfilled-fg-active: var(--color-foreground-on-medium-background-primary);\n --ds-button-unfilled-dot-ring: var(--color-background-medium-neutral);\n --ds-button-unfilled-border: var(--color-border-on-medium-background-secondary);\n}\n\n.button-unfilled--contrast-bold {\n --ds-button-unfilled-fg: var(--color-foreground-on-bold-background-secondary);\n --ds-button-unfilled-fg-active: var(--color-foreground-on-bold-background-primary);\n --ds-button-unfilled-dot-ring: var(--color-background-bold-neutral);\n --ds-button-unfilled-border: var(--color-border-on-bold-background-secondary);\n}\n\n.button-unfilled--contrast-strong {\n --ds-button-unfilled-fg: var(--color-foreground-on-strong-background-secondary);\n --ds-button-unfilled-fg-active: var(--color-foreground-on-strong-background-primary);\n --ds-button-unfilled-dot-ring: var(--color-background-strong-neutral);\n --ds-button-unfilled-border: var(--color-border-on-strong-background-secondary);\n}\n\n.button-unfilled--on-always-dark {\n --ds-button-unfilled-fg: var(--color-always-dark-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-always-dark-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-always-dark-background);\n --ds-button-unfilled-border: var(--color-always-dark-border-secondary);\n}\n\n.button-unfilled--on-navigation {\n --ds-button-unfilled-fg: var(--color-navigation-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-navigation-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-navigation-background);\n --ds-button-unfilled-border: var(--color-navigation-border-secondary);\n}\n\n/*\n * After surface ring defaults: selected fill remaps the knock-out to the active\n * wash so the badge halo matches the selected background.\n */\n.button-unfilled.ds-interaction-fill--selected {\n --ds-button-unfilled-dot-ring: var(--ds-interaction-active);\n}\n\n.button-unfilled__icon-wrap {\n position: relative;\n width: var(--ds-control-icon, var(--dimension-iconography-md));\n height: var(--ds-control-icon, var(--dimension-iconography-md));\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n z-index: 2;\n}\n\n.button-unfilled__label {\n position: relative;\n z-index: 2;\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n white-space: nowrap;\n flex-shrink: 0;\n min-width: 0;\n}\n\n.button-unfilled__dot {\n position: absolute;\n top: 0;\n right: 0;\n z-index: 2;\n pointer-events: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';\n\nexport type ButtonUnfilledOnBackgroundContrast = 'default' | 'medium' | 'bold' | 'strong';\n\nexport type ButtonUnfilledBackground = 'always-dark' | 'navigation';\n\nexport type ButtonUnfilledVariant = 'icon' | 'label' | 'icon-label';\n\nexport type ButtonUnfilledSize = 'md' | 'sm' | 'xs';\n\nexport type ButtonUnfilledWidth = ControlWidth;\n\n/**\n * `ds-icon` size prop matching control-density icon metrics\n * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).\n */\nconst ICON_SIZE: Record<ButtonUnfilledSize, 'md' | 'sm' | 'xs'> = {\n md: 'md',\n sm: 'sm',\n xs: 'xs',\n};\n\n@Component({\n tag: 'ds-button-unfilled',\n styleUrl: 'ButtonUnfilled.css',\n scoped: true,\n})\nexport class ButtonUnfilled {\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: ButtonUnfilledVariant = 'label';\n\n /** Control density (height, padding, icon, type). */\n @Prop() size: ButtonUnfilledSize = 'md';\n\n /** Width fit — hug content (default) or fill the parent. */\n @Prop() width: ButtonUnfilledWidth = 'hug';\n\n /** Visible text for `label` / `icon-label` variants. */\n @Prop() label: string = '';\n\n /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n @Prop() icon: string = '';\n\n /** Active/selected visual state. Always promotes foreground to primary. */\n @Prop() isActive: boolean = false;\n\n /**\n * When active, render the selected interaction fill.\n * Default `true` for general UI. Shell chrome (nav / tool rails) should pass\n * `false` so selection is foreground-only (primary color, no fill).\n */\n @Prop() activeFill: boolean = true;\n\n /** Show a 1px secondary inset border. Default on; shell chrome can pass `false`. */\n @Prop() hasBorder: boolean = true;\n\n /** Show a notification dot at the top-right of the icon zone (icon variant only). */\n @Prop() dot: boolean = false;\n\n /** Disables interaction. */\n @Prop() isInactive: boolean = false;\n\n /** Native button type. */\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n /**\n * Foreground and interaction tokens when the button sits on a contrasting parent\n * background (default, medium, bold, or strong).\n */\n @Prop({ attribute: 'on-background-contrast' })\n backgroundContrast?: ButtonUnfilledOnBackgroundContrast;\n\n /** Parent surface context for navigation and always-dark chrome. */\n @Prop() background: ButtonUnfilledBackground | undefined;\n\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n @Prop() controls: string | undefined;\n @Prop() expanded: boolean | undefined;\n @Prop() haspopup: string | undefined;\n @Prop() pressed: boolean | undefined;\n\n /**\n * Native `tabindex` for roving keyboard groups in shell chrome.\n * Omit for the default button tab stop (`0`).\n */\n @Prop({ attribute: 'tab-index' }) focusTabIndex?: number;\n\n @Event() dsClick!: EventEmitter<MouseEvent>;\n @Event() dsChange!: EventEmitter<boolean>;\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) return;\n this.dsClick.emit(event);\n this.dsChange.emit(!this.isActive);\n };\n\n private effectiveContrast(): ButtonUnfilledOnBackgroundContrast {\n return this.backgroundContrast ?? 'default';\n }\n\n private get showIcon(): boolean {\n return this.variant === 'icon' || this.variant === 'icon-label';\n }\n\n private get showLabel(): boolean {\n return this.variant === 'label' || this.variant === 'icon-label';\n }\n\n private get showDot(): boolean {\n return this.variant === 'icon' && this.dot;\n }\n\n /** Knock-out ring: selected fill → active wash; otherwise surface token. */\n private get dotRing(): string {\n if (this.isActive && this.activeFill) {\n return 'var(--ds-interaction-active)';\n }\n return 'var(--ds-button-unfilled-dot-ring)';\n }\n\n private get accessibleName(): string | undefined {\n if (this.ariaLabel) return this.ariaLabel;\n if (this.showLabel && this.label) return undefined;\n if (this.variant === 'icon') return this.icon || 'action';\n return this.label || 'action';\n }\n\n render() {\n const bg = this.background;\n const contrast = this.effectiveContrast();\n const textVariant = CONTROL_TEXT_VARIANT[this.size];\n const iconSize = ICON_SIZE[this.size];\n\n const cls: Record<string, boolean> = {\n 'button-unfilled': true,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': true,\n 'ds-interaction-fill--selected': this.isActive && this.activeFill && !this.isInactive,\n 'ds-interaction-fill--on-medium': contrast === 'medium',\n 'ds-interaction-fill--on-bold': contrast === 'bold',\n 'ds-interaction-fill--on-strong': contrast === 'strong',\n 'ds-interaction-fill--on-always-dark': bg === 'always-dark',\n 'ds-interaction-fill--on-navigation': bg === 'navigation',\n 'button-unfilled--active': this.isActive,\n 'button-unfilled--bordered': this.hasBorder,\n 'ds-control-inactive': this.isInactive,\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n 'button-unfilled--icon': this.variant === 'icon',\n 'button-unfilled--label': this.variant === 'label',\n 'button-unfilled--icon-label': this.variant === 'icon-label',\n 'button-unfilled--contrast-medium': contrast === 'medium',\n 'button-unfilled--contrast-bold': contrast === 'bold',\n 'button-unfilled--contrast-strong': contrast === 'strong',\n 'button-unfilled--on-always-dark': bg === 'always-dark',\n 'button-unfilled--on-navigation': bg === 'navigation',\n };\n\n return (\n <Host\n class={{\n 'button-unfilled-host': true,\n 'button-unfilled-host--icon': this.variant === 'icon',\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\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 tabIndex={this.focusTabIndex ?? 0}\n aria-label={this.accessibleName}\n aria-controls={this.controls}\n aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}\n aria-haspopup={this.haspopup}\n aria-pressed={this.pressed === undefined ? undefined : String(this.pressed)}\n onClick={this.handleClick}\n >\n {this.showIcon && (\n <span class=\"button-unfilled__icon-wrap ds-interaction-fill__content\">\n <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n {this.showDot && (\n <ds-badge\n class=\"button-unfilled__dot\"\n variant=\"dot\"\n background={this.dotRing}\n label=\"\"\n aria-hidden=\"true\"\n />\n )}\n </span>\n )}\n {this.showLabel && (\n <ds-text\n class=\"button-unfilled__label ds-interaction-fill__content\"\n as=\"span\"\n variant={textVariant}\n emphasis\n color=\"inherit\"\n >\n {this.label}\n </ds-text>\n )}\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}