@ds-mo/ui 9.1.0 → 9.2.1

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 (333) hide show
  1. package/README.md +0 -79
  2. package/dist/.build-stamp +1 -1
  3. package/dist/agent-patterns.json +165 -1
  4. package/dist/agent.json +2131 -639
  5. package/dist/angular/ds-agent-activity.d.ts +12 -0
  6. package/dist/angular/ds-agent-activity.js +38 -0
  7. package/dist/angular/ds-agent-response.d.ts +12 -0
  8. package/dist/angular/ds-agent-response.js +38 -0
  9. package/dist/angular/ds-agent-source-list.d.ts +12 -0
  10. package/dist/angular/ds-agent-source-list.js +38 -0
  11. package/dist/angular/ds-agent-tool-call.d.ts +12 -0
  12. package/dist/angular/ds-agent-tool-call.js +38 -0
  13. package/dist/angular/ds-attachment-list.d.ts +12 -0
  14. package/dist/angular/ds-attachment-list.js +38 -0
  15. package/dist/angular/ds-avatar.d.ts +12 -0
  16. package/dist/angular/ds-avatar.js +38 -0
  17. package/dist/angular/ds-code-block.d.ts +12 -0
  18. package/dist/angular/ds-code-block.js +38 -0
  19. package/dist/angular/ds-conversation-list-item.d.ts +19 -0
  20. package/dist/angular/ds-conversation-list-item.js +42 -0
  21. package/dist/angular/ds-conversation-list-section.d.ts +12 -0
  22. package/dist/angular/ds-conversation-list-section.js +38 -0
  23. package/dist/angular/ds-conversation-list.d.ts +12 -0
  24. package/dist/angular/ds-conversation-list.js +37 -0
  25. package/dist/angular/ds-markdown.d.ts +12 -0
  26. package/dist/angular/ds-markdown.js +38 -0
  27. package/dist/angular/ds-menu.d.ts +6 -1
  28. package/dist/angular/ds-menu.js +7 -4
  29. package/dist/angular/ds-message-bubble.d.ts +12 -0
  30. package/dist/angular/ds-message-bubble.js +38 -0
  31. package/dist/angular/ds-message-composer.d.ts +23 -0
  32. package/dist/angular/ds-message-composer.js +49 -0
  33. package/dist/angular/ds-message-scroller.d.ts +15 -0
  34. package/dist/angular/ds-message-scroller.js +43 -0
  35. package/dist/angular/ds-message.d.ts +12 -0
  36. package/dist/angular/ds-message.js +38 -0
  37. package/dist/angular/ds-panel-nav.d.ts +1 -1
  38. package/dist/angular/ds-panel-nav.js +3 -3
  39. package/dist/angular/ds-panel-tool-header.d.ts +25 -0
  40. package/dist/angular/ds-panel-tool-header.js +49 -0
  41. package/dist/angular/ds-panel-tool-search.d.ts +19 -0
  42. package/dist/angular/ds-panel-tool-search.js +49 -0
  43. package/dist/angular/ds-panel-tools.d.ts +30 -1
  44. package/dist/angular/ds-panel-tools.js +14 -5
  45. package/dist/angular/index.d.ts +1 -1
  46. package/dist/angular/index.js +17 -0
  47. package/dist/angular/proxies.d.ts +17 -0
  48. package/dist/angular/proxies.js +17 -0
  49. package/dist/components/ds-agent-activity.d.ts +11 -0
  50. package/dist/components/ds-agent-activity.js +2 -0
  51. package/dist/components/ds-agent-activity.js.map +1 -0
  52. package/dist/components/ds-agent-response.d.ts +11 -0
  53. package/dist/components/ds-agent-response.js +2 -0
  54. package/dist/components/ds-agent-response.js.map +1 -0
  55. package/dist/components/ds-agent-source-list.d.ts +11 -0
  56. package/dist/components/ds-agent-source-list.js +2 -0
  57. package/dist/components/ds-agent-source-list.js.map +1 -0
  58. package/dist/components/ds-agent-tool-call.d.ts +11 -0
  59. package/dist/components/ds-agent-tool-call.js +2 -0
  60. package/dist/components/ds-agent-tool-call.js.map +1 -0
  61. package/dist/components/ds-app-shell.js +1 -1
  62. package/dist/components/ds-app-shell.js.map +1 -1
  63. package/dist/components/ds-attachment-list.d.ts +11 -0
  64. package/dist/components/ds-attachment-list.js +2 -0
  65. package/dist/components/ds-attachment-list.js.map +1 -0
  66. package/dist/components/ds-avatar.d.ts +11 -0
  67. package/dist/components/ds-avatar.js +2 -0
  68. package/dist/components/ds-avatar.js.map +1 -0
  69. package/dist/components/ds-badge.js +1 -1
  70. package/dist/components/ds-banner.js +1 -1
  71. package/dist/components/ds-bar-nav.js +1 -1
  72. package/dist/components/ds-bar-nav.js.map +1 -1
  73. package/dist/components/ds-button-filled.js +1 -1
  74. package/dist/components/ds-button-unfilled.js +1 -1
  75. package/dist/components/ds-card-data-viz-donut.js +1 -1
  76. package/dist/components/ds-card-setting.js +1 -1
  77. package/dist/components/ds-card-shell-data-viz.js +1 -1
  78. package/dist/components/ds-card.js +1 -1
  79. package/dist/components/ds-chart-bar.js +1 -1
  80. package/dist/components/ds-chart-bar.js.map +1 -1
  81. package/dist/components/ds-chart-donut.js +1 -1
  82. package/dist/components/ds-chart-legend.js +1 -1
  83. package/dist/components/ds-chart-line.js +1 -1
  84. package/dist/components/ds-checkbox.js +1 -1
  85. package/dist/components/ds-chip.js +1 -1
  86. package/dist/components/ds-code-block.d.ts +11 -0
  87. package/dist/components/ds-code-block.js +2 -0
  88. package/dist/components/ds-code-block.js.map +1 -0
  89. package/dist/components/ds-conversation-list-item.d.ts +11 -0
  90. package/dist/components/ds-conversation-list-item.js +2 -0
  91. package/dist/components/ds-conversation-list-item.js.map +1 -0
  92. package/dist/components/ds-conversation-list-section.d.ts +11 -0
  93. package/dist/components/ds-conversation-list-section.js +2 -0
  94. package/dist/components/ds-conversation-list-section.js.map +1 -0
  95. package/dist/components/ds-conversation-list.d.ts +11 -0
  96. package/dist/components/ds-conversation-list.js +2 -0
  97. package/dist/components/ds-conversation-list.js.map +1 -0
  98. package/dist/components/ds-divider.js +1 -1
  99. package/dist/components/ds-divider.js.map +1 -1
  100. package/dist/components/ds-empty-state.js +1 -1
  101. package/dist/components/ds-field.js +1 -1
  102. package/dist/components/ds-icon.js +1 -1
  103. package/dist/components/ds-input.js +1 -1
  104. package/dist/components/ds-markdown.d.ts +11 -0
  105. package/dist/components/ds-markdown.js +2 -0
  106. package/dist/components/ds-markdown.js.map +1 -0
  107. package/dist/components/ds-menu.js +1 -1
  108. package/dist/components/ds-message-bubble.d.ts +11 -0
  109. package/dist/components/ds-message-bubble.js +2 -0
  110. package/dist/components/ds-message-bubble.js.map +1 -0
  111. package/dist/components/ds-message-composer.d.ts +11 -0
  112. package/dist/components/ds-message-composer.js +2 -0
  113. package/dist/components/ds-message-composer.js.map +1 -0
  114. package/dist/components/ds-message-scroller.d.ts +11 -0
  115. package/dist/components/ds-message-scroller.js +2 -0
  116. package/dist/components/ds-message-scroller.js.map +1 -0
  117. package/dist/components/ds-message.d.ts +11 -0
  118. package/dist/components/ds-message.js +2 -0
  119. package/dist/components/ds-message.js.map +1 -0
  120. package/dist/components/ds-modal.js +1 -1
  121. package/dist/components/ds-panel-nav.js +1 -1
  122. package/dist/components/ds-panel-nav.js.map +1 -1
  123. package/dist/components/ds-panel-sub-nav.js +1 -1
  124. package/dist/components/ds-panel-tool-header.d.ts +11 -0
  125. package/dist/components/ds-panel-tool-header.js +2 -0
  126. package/dist/components/ds-panel-tool-header.js.map +1 -0
  127. package/dist/components/ds-panel-tool-search.d.ts +11 -0
  128. package/dist/components/ds-panel-tool-search.js +2 -0
  129. package/dist/components/ds-panel-tool-search.js.map +1 -0
  130. package/dist/components/ds-panel-tools.js +1 -1
  131. package/dist/components/ds-panel-tools.js.map +1 -1
  132. package/dist/components/ds-radio.js +1 -1
  133. package/dist/components/ds-select-multi.js +1 -1
  134. package/dist/components/ds-select-multi.js.map +1 -1
  135. package/dist/components/ds-select.js +1 -1
  136. package/dist/components/ds-select.js.map +1 -1
  137. package/dist/components/ds-shell-gradient-picker.js +1 -1
  138. package/dist/components/ds-shell-gradient-picker.js.map +1 -1
  139. package/dist/components/ds-shell-gradient-swatch.js +1 -1
  140. package/dist/components/ds-skeleton.js +1 -1
  141. package/dist/components/ds-slider.js +1 -1
  142. package/dist/components/ds-slider.js.map +1 -1
  143. package/dist/components/ds-swatch-picker.js +1 -1
  144. package/dist/components/ds-switch.js +1 -1
  145. package/dist/components/ds-tab-group.js +1 -1
  146. package/dist/components/ds-tab-group.js.map +1 -1
  147. package/dist/components/ds-tag.js +1 -1
  148. package/dist/components/ds-tag.js.map +1 -1
  149. package/dist/components/ds-text.js +1 -1
  150. package/dist/components/ds-tooltip-data-viz.js +1 -1
  151. package/dist/components/ds-tooltip.js +1 -1
  152. package/dist/components/index.d.ts +14 -0
  153. package/dist/components/{p-HBIxvS5C.js → p-B1pWGQn1.js} +2 -2
  154. package/dist/components/p-BBu_Svz7.js +2 -0
  155. package/dist/components/p-BBu_Svz7.js.map +1 -0
  156. package/dist/components/p-BHpWYKtP.js +2 -0
  157. package/dist/components/p-BHpWYKtP.js.map +1 -0
  158. package/dist/components/{p-KRGBGTu5.js → p-BO6C8abO.js} +2 -2
  159. package/dist/components/p-BRfOCc_h.js +2 -0
  160. package/dist/components/p-BRfOCc_h.js.map +1 -0
  161. package/dist/components/{p-CbS_WWs2.js → p-BSOZXagj.js} +2 -2
  162. package/dist/components/p-BSOZXagj.js.map +1 -0
  163. package/dist/components/p-BhC1YyId.js +2 -0
  164. package/dist/components/p-BhC1YyId.js.map +1 -0
  165. package/dist/components/p-BjtXYFhw.js +2 -0
  166. package/dist/components/p-BjtXYFhw.js.map +1 -0
  167. package/dist/components/p-CBYuvZKM.js +2 -0
  168. package/dist/components/p-CBYuvZKM.js.map +1 -0
  169. package/dist/components/{p-CZ9wemOA.js → p-CJlgONwR.js} +2 -2
  170. package/dist/components/p-CKaJx0IX.js +2 -0
  171. package/dist/components/p-CKaJx0IX.js.map +1 -0
  172. package/dist/components/p-CWNdl52Y.js +2 -0
  173. package/dist/components/p-CWNdl52Y.js.map +1 -0
  174. package/dist/components/{p-DT2MK8Kt.js → p-CblAABEo.js} +2 -2
  175. package/dist/components/p-CeFBA7Dx.js +2 -0
  176. package/dist/components/p-CeFBA7Dx.js.map +1 -0
  177. package/dist/components/p-CiKGqsA2.js +2 -0
  178. package/dist/components/{p-BLzivrE3.js.map → p-CiKGqsA2.js.map} +1 -1
  179. package/dist/components/p-Ci_nVk5P.js +2 -0
  180. package/dist/components/p-Ci_nVk5P.js.map +1 -0
  181. package/dist/components/p-Cijzn3YQ.js +2 -0
  182. package/dist/components/p-Cijzn3YQ.js.map +1 -0
  183. package/dist/components/{p-BbV68F23.js → p-CiwdnKKp.js} +2 -2
  184. package/dist/components/p-DFxqk71w.js +2 -0
  185. package/dist/components/p-DFxqk71w.js.map +1 -0
  186. package/dist/components/p-DVsje4AY.js +2 -0
  187. package/dist/components/p-DVsje4AY.js.map +1 -0
  188. package/dist/components/p-DaQ0ZE_V.js +2 -0
  189. package/dist/components/p-DaQ0ZE_V.js.map +1 -0
  190. package/dist/components/p-DiooIO2B.js +2 -0
  191. package/dist/components/p-DiooIO2B.js.map +1 -0
  192. package/dist/components/p-Dj5MejHv.js +2 -0
  193. package/dist/components/p-Dj5MejHv.js.map +1 -0
  194. package/dist/components/{p-B-zhgAvL.js → p-DnMCRAwx.js} +2 -2
  195. package/dist/components/{p-DyZj3k9S.js → p-Dst-OliP.js} +2 -2
  196. package/dist/components/p-Dst-OliP.js.map +1 -0
  197. package/dist/components/p-T0Mzhv3-.js +2 -0
  198. package/dist/components/p-T0Mzhv3-.js.map +1 -0
  199. package/dist/components/p-a9nGf1s6.js +2 -0
  200. package/dist/components/p-a9nGf1s6.js.map +1 -0
  201. package/dist/components/p-gidVv1FX.js +2 -0
  202. package/dist/components/p-gidVv1FX.js.map +1 -0
  203. package/dist/components/p-kezp2_Xu.js +2 -0
  204. package/dist/components/p-kezp2_Xu.js.map +1 -0
  205. package/dist/components/p-rEe-3KR_.js +2 -0
  206. package/dist/components/p-rEe-3KR_.js.map +1 -0
  207. package/dist/components/{p-C7RObioO.js → p-xB0GPG3-.js} +2 -2
  208. package/dist/docs/components.json +8294 -4079
  209. package/dist/lib/components/Menu/menu-placement.d.ts +13 -0
  210. package/dist/lib/shell/index.d.ts +1 -1
  211. package/dist/lib/shell/index.js +8 -0
  212. package/dist/lib/shell/index.js.map +2 -2
  213. package/dist/mcp-data/registry/agent-activity.json +158 -0
  214. package/dist/mcp-data/registry/agent-response.json +211 -0
  215. package/dist/mcp-data/registry/agent-source-list.json +153 -0
  216. package/dist/mcp-data/registry/agent-tool-call.json +213 -0
  217. package/dist/mcp-data/registry/app-shell.json +2 -2
  218. package/dist/mcp-data/registry/attachment-list.json +137 -0
  219. package/dist/mcp-data/registry/avatar.json +154 -0
  220. package/dist/mcp-data/registry/bar-nav.json +2 -2
  221. package/dist/mcp-data/registry/button-unfilled.json +2 -2
  222. package/dist/mcp-data/registry/code-block.json +150 -0
  223. package/dist/mcp-data/registry/conversation-list-item.json +283 -0
  224. package/dist/mcp-data/registry/conversation-list-section.json +139 -0
  225. package/dist/mcp-data/registry/conversation-list.json +101 -0
  226. package/dist/mcp-data/registry/markdown.json +141 -0
  227. package/dist/mcp-data/registry/menu.json +43 -7
  228. package/dist/mcp-data/registry/message-bubble.json +119 -0
  229. package/dist/mcp-data/registry/message-composer.json +265 -0
  230. package/dist/mcp-data/registry/message-scroller.json +217 -0
  231. package/dist/mcp-data/registry/message.json +255 -0
  232. package/dist/mcp-data/registry/panel-nav.json +20 -2
  233. package/dist/mcp-data/registry/panel-tool-header.json +342 -0
  234. package/dist/mcp-data/registry/panel-tool-search.json +387 -0
  235. package/dist/mcp-data/registry/panel-tools.json +150 -10
  236. package/dist/mcp-data/registry/registry.json +2159 -616
  237. package/dist/mcp-data/registry/select.json +1 -1
  238. package/dist/mcp-data/registry/slider.json +4 -4
  239. package/dist/mcp-data/registry/switch.json +1 -1
  240. package/dist/mcp-data/registry/tab-group.json +2 -2
  241. package/dist/mcp-data/registry/tag.json +2 -2
  242. package/dist/mcp-data/registry/text.json +1 -1
  243. package/dist/react/components.d.ts +17 -0
  244. package/dist/react/components.js +17 -0
  245. package/dist/react/ds-agent-activity.d.ts +9 -0
  246. package/dist/react/ds-agent-activity.js +12 -0
  247. package/dist/react/ds-agent-response.d.ts +9 -0
  248. package/dist/react/ds-agent-response.js +12 -0
  249. package/dist/react/ds-agent-source-list.d.ts +9 -0
  250. package/dist/react/ds-agent-source-list.js +12 -0
  251. package/dist/react/ds-agent-tool-call.d.ts +9 -0
  252. package/dist/react/ds-agent-tool-call.js +12 -0
  253. package/dist/react/ds-attachment-list.d.ts +9 -0
  254. package/dist/react/ds-attachment-list.js +12 -0
  255. package/dist/react/ds-avatar.d.ts +9 -0
  256. package/dist/react/ds-avatar.js +12 -0
  257. package/dist/react/ds-code-block.d.ts +9 -0
  258. package/dist/react/ds-code-block.js +12 -0
  259. package/dist/react/ds-conversation-list-item.d.ts +14 -0
  260. package/dist/react/ds-conversation-list-item.js +12 -0
  261. package/dist/react/ds-conversation-list-section.d.ts +9 -0
  262. package/dist/react/ds-conversation-list-section.js +12 -0
  263. package/dist/react/ds-conversation-list.d.ts +9 -0
  264. package/dist/react/ds-conversation-list.js +12 -0
  265. package/dist/react/ds-markdown.d.ts +9 -0
  266. package/dist/react/ds-markdown.js +12 -0
  267. package/dist/react/ds-menu.d.ts +1 -0
  268. package/dist/react/ds-menu.js +1 -0
  269. package/dist/react/ds-message-bubble.d.ts +9 -0
  270. package/dist/react/ds-message-bubble.js +12 -0
  271. package/dist/react/ds-message-composer.d.ts +16 -0
  272. package/dist/react/ds-message-composer.js +16 -0
  273. package/dist/react/ds-message-scroller.d.ts +12 -0
  274. package/dist/react/ds-message-scroller.js +12 -0
  275. package/dist/react/ds-message.d.ts +9 -0
  276. package/dist/react/ds-message.js +12 -0
  277. package/dist/react/ds-panel-tool-header.d.ts +17 -0
  278. package/dist/react/ds-panel-tool-header.js +16 -0
  279. package/dist/react/ds-panel-tool-search.d.ts +14 -0
  280. package/dist/react/ds-panel-tool-search.js +16 -0
  281. package/dist/react/ds-panel-tools.d.ts +10 -0
  282. package/dist/react/ds-panel-tools.js +3 -0
  283. package/dist/types/components/AgentActivity/AgentActivity.d.ts +14 -0
  284. package/dist/types/components/AgentResponse/AgentResponse.d.ts +12 -0
  285. package/dist/types/components/AgentSourceList/AgentSourceList.d.ts +9 -0
  286. package/dist/types/components/AgentToolCall/AgentToolCall.d.ts +13 -0
  287. package/dist/types/components/AppShell/AppShell.d.ts +4 -0
  288. package/dist/types/components/AttachmentList/AttachmentList.d.ts +8 -0
  289. package/dist/types/components/Avatar/Avatar.d.ts +11 -0
  290. package/dist/types/components/BarNav/BarNav.d.ts +2 -0
  291. package/dist/types/components/ButtonUnfilled/ButtonUnfilled.d.ts +2 -0
  292. package/dist/types/components/CodeBlock/CodeBlock.d.ts +11 -0
  293. package/dist/types/components/ConversationList/ConversationList.d.ts +4 -0
  294. package/dist/types/components/ConversationListItem/ConversationListItem.d.ts +24 -0
  295. package/dist/types/components/ConversationListSection/ConversationListSection.d.ts +9 -0
  296. package/dist/types/components/Markdown/Markdown.d.ts +15 -0
  297. package/dist/types/components/Menu/Menu.d.ts +9 -0
  298. package/dist/types/components/Menu/menu-placement.d.ts +13 -0
  299. package/dist/types/components/Menu/menu-types.d.ts +1 -1
  300. package/dist/types/components/Message/Message.d.ts +17 -0
  301. package/dist/types/components/MessageBubble/MessageBubble.d.ts +6 -0
  302. package/dist/types/components/MessageComposer/MessageComposer.d.ts +29 -0
  303. package/dist/types/components/MessageScroller/MessageScroller.d.ts +41 -0
  304. package/dist/types/components/PanelNav/PanelNav.d.ts +5 -0
  305. package/dist/types/components/PanelToolHeader/PanelToolHeader.d.ts +34 -0
  306. package/dist/types/components/PanelToolSearch/PanelToolSearch.d.ts +35 -0
  307. package/dist/types/components/PanelTools/PanelTools.d.ts +40 -1
  308. package/dist/types/components/PanelTools/panel-tools-types.d.ts +20 -0
  309. package/dist/types/components/PanelTools/panel-tools-utils.d.ts +2 -0
  310. package/dist/types/components/Slider/Slider.d.ts +1 -1
  311. package/dist/types/components/conversation-types.d.ts +55 -0
  312. package/dist/types/components.d.ts +1229 -14
  313. package/dist/types/shell/index.d.ts +1 -1
  314. package/dist/types/utils/choice-list-parts.d.ts +4 -1
  315. package/package.json +11 -11
  316. package/dist/components/p-BLzivrE3.js +0 -2
  317. package/dist/components/p-C7UFYvsO.js +0 -2
  318. package/dist/components/p-C7UFYvsO.js.map +0 -1
  319. package/dist/components/p-CXF8yd-g.js +0 -2
  320. package/dist/components/p-CXF8yd-g.js.map +0 -1
  321. package/dist/components/p-CbS_WWs2.js.map +0 -1
  322. package/dist/components/p-DyZj3k9S.js.map +0 -1
  323. package/dist/components/p-VKIsOVza.js +0 -2
  324. package/dist/components/p-VKIsOVza.js.map +0 -1
  325. package/dist/components/p-tQ1QHeOE.js +0 -2
  326. package/dist/components/p-tQ1QHeOE.js.map +0 -1
  327. /package/dist/components/{p-HBIxvS5C.js.map → p-B1pWGQn1.js.map} +0 -0
  328. /package/dist/components/{p-KRGBGTu5.js.map → p-BO6C8abO.js.map} +0 -0
  329. /package/dist/components/{p-CZ9wemOA.js.map → p-CJlgONwR.js.map} +0 -0
  330. /package/dist/components/{p-DT2MK8Kt.js.map → p-CblAABEo.js.map} +0 -0
  331. /package/dist/components/{p-BbV68F23.js.map → p-CiwdnKKp.js.map} +0 -0
  332. /package/dist/components/{p-B-zhgAvL.js.map → p-DnMCRAwx.js.map} +0 -0
  333. /package/dist/components/{p-C7RObioO.js.map → p-xB0GPG3-.js.map} +0 -0
@@ -1 +0,0 @@
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","rounded","dot","isInactive","isLoading","type","ariaLabel","buttonEl","handleClick","event","preventDefault","stopPropagation","dsClick","emit","dsChange","setFocus","focus","showIcon","showLabel","showDot","dotRing","accessibleName","undefined","render","bg","background","textVariant","CONTROL_TEXT_VARIANT","iconSize","cls","h","Host","key","class","controlWidthClass","tabIndex","ref","el","disabled","focusTabIndex","controls","expanded","String","haspopup","pressed","onClick","color","name","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--rounded {\n --ds-control-radius: var(--dimension-radius-half);\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--background-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--background-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--background-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--background-translucent {\n --ds-button-unfilled-fg: var(--color-translucent-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-translucent-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-translucent-translucent);\n --ds-button-unfilled-border: var(--color-translucent-border-secondary);\n}\n\n.button-unfilled--background-inverted {\n --ds-button-unfilled-fg: var(--color-inverted-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-inverted-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-inverted-background);\n --ds-button-unfilled-border: var(--color-inverted-border-secondary);\n}\n\n.button-unfilled--background-media {\n --ds-button-unfilled-fg: var(--color-media-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-media-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-media-background);\n --ds-button-unfilled-border: var(--color-media-border-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/*\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__label--loading {\n visibility: hidden;\n}\n\n.button-unfilled > .button-unfilled__loader-overlay {\n position: absolute;\n inset: 0;\n z-index: 2;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\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 ButtonUnfilledBackground =\n | 'faint'\n | 'medium'\n | 'bold'\n | 'strong'\n | 'translucent'\n | 'inverted'\n | 'media'\n | 'always-dark';\n\nexport type ButtonUnfilledVariant = 'icon' | 'label' | 'icon-label';\n\nexport type ButtonUnfilledSize = 'md' | 'sm' | 'xs';\n\nexport type ButtonUnfilledWidth = ControlWidth;\nexport type ButtonUnfilledPopup = 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';\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 /** Use the half-radius treatment instead of the default control radius. */\n @Prop() rounded: boolean = false;\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 /** Shows an inline loader and prevents interaction without applying inactive opacity. */\n @Prop() isLoading: boolean = false;\n\n /** Native button type. */\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n /** Actual parent surface context. Omit on primary and secondary surfaces. */\n @Prop() background: ButtonUnfilledBackground | undefined;\n\n /** Accessible name override. Required for icon-only buttons. */\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n @Prop() controls: string | undefined;\n @Prop() expanded: boolean | undefined;\n @Prop() haspopup: ButtonUnfilledPopup | 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 || this.isLoading) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n this.dsClick.emit(event);\n this.dsChange.emit(!this.isActive);\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 && !this.isLoading;\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.isLoading && this.variant === 'label' && this.label) return this.label;\n return undefined;\n }\n\n render() {\n const bg = this.background;\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-faint': bg === 'faint',\n 'ds-interaction-fill--on-medium': bg === 'medium',\n 'ds-interaction-fill--on-bold': bg === 'bold',\n 'ds-interaction-fill--on-strong': bg === 'strong',\n 'ds-interaction-fill--on-translucent': bg === 'translucent',\n 'ds-interaction-fill--on-inverted': bg === 'inverted',\n 'ds-interaction-fill--on-media': bg === 'media',\n 'ds-interaction-fill--on-always-dark': bg === 'always-dark',\n 'button-unfilled--active': this.isActive,\n 'button-unfilled--bordered': this.hasBorder,\n 'button-unfilled--rounded': this.rounded,\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--background-faint': bg === 'faint',\n 'button-unfilled--background-medium': bg === 'medium',\n 'button-unfilled--background-bold': bg === 'bold',\n 'button-unfilled--background-strong': bg === 'strong',\n 'button-unfilled--background-translucent': bg === 'translucent',\n 'button-unfilled--background-inverted': bg === 'inverted',\n 'button-unfilled--background-media': bg === 'media',\n 'button-unfilled--on-always-dark': bg === 'always-dark',\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-busy={this.isLoading ? 'true' : undefined}\n aria-disabled={this.isLoading ? 'true' : undefined}\n aria-controls={this.controls}\n aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}\n aria-haspopup={this.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 {this.isLoading\n ? <ds-loader size={iconSize} color=\"inherit\" />\n : <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n }\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={{\n 'button-unfilled__label': true,\n 'button-unfilled__label--loading': this.isLoading && this.variant === 'label',\n 'ds-interaction-fill__content': true,\n }}\n as=\"span\"\n variant={textVariant}\n emphasis\n color=\"inherit\"\n >\n {this.label}\n </ds-text>\n )}\n {this.isLoading && this.variant === 'label' && (\n <span class=\"button-unfilled__loader-overlay ds-interaction-fill__content\">\n <ds-loader size={iconSize} color=\"inherit\" />\n </span>\n )}\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{h as e}from"./index.js";const n=({value:n,placeholder:t,controls:o,activeDescendant:s,inputRef:i,clearLabel:a,onValueChange:r,onKeyDown:c})=>{let l=null;return e("div",{class:"select-search"},e("div",{class:"select-search__control ds-control--md"},e("ds-icon",{name:"MagnifyingGlass",size:"md",color:"inherit"}),e("input",{class:"ds-text--body-medium ds-text--regular",ref:e=>{l=e??null;i(l)},type:"search",value:n,placeholder:t,"aria-label":t,"aria-controls":o,"aria-activedescendant":s,onInput:e=>r(e.target.value),onKeyDown:c}),n&&e("ds-button-unfilled",{class:"select-search__clear",variant:"icon",size:"sm",icon:"CrossCircle",hasBorder:false,rounded:true,ariaLabel:`${a} ${t}`,onDsClick:()=>{r("");requestAnimationFrame((()=>l?.focus()))}})))};const t=({clearLabel:n,summary:t,onClear:o})=>e("div",{class:"ds-choice-footer"},e("div",{class:"ds-choice-footer__content ds-control--md"},t&&e("ds-text",{class:"ds-choice-footer__summary",as:"span",variant:"text-body-medium",color:"secondary"},t),e("button",{type:"button",class:"ds-choice-footer__clear ds-focus-ring",onClick:o},e("ds-text",{as:"span",variant:"text-body-medium",color:"inherit"},n))));const o=({id:n,option:t,selected:o,active:s,focusRingVisible:i,usesSubtext:a,leading:r,onHover:c,onSelect:l})=>e("div",{id:n,class:{"select-option":true,"ds-choice-item":true,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-focus-ring--visible":s&&i,"ds-interaction-fill":!t.isInactive,"ds-interaction-fill--selected":o&&!t.isInactive,"ds-control-inactive":!!t.isInactive,"select-option--active":s},role:"option","aria-selected":String(o),"aria-disabled":t.isInactive?"true":undefined,onMouseDown:e=>e.preventDefault(),onMouseMove:()=>{if(!t.isInactive)c()},onClick:l},r,e("div",{class:"ds-choice-item__content ds-interaction-fill__content"},e("ds-text",{class:"ds-choice-item__label",as:"span",variant:"text-body-medium",color:o?"primary":"secondary"},t.label),a&&e("ds-text",{class:"ds-choice-item__subtext",as:"span",variant:"text-body-small",color:"secondary"},t.subtext?.trim()||"—")));function s(e,n){return n.length>0?n:[{options:e}]}function i(e){return e.flatMap((e=>e.options))}function a(e){return e.length>0&&e.every((e=>Boolean(e.icon)))}function r(e){return e.some((e=>Boolean(e.subtext?.trim())))}function c(e,n){const t=n.trim().toLocaleLowerCase();if(!t)return e;return e.map((e=>{const n=e.header?.toLocaleLowerCase().includes(t);return{...e,options:n?e.options:e.options.filter((e=>`${e.label} ${e.subtext??""}`.toLocaleLowerCase().includes(t)))}})).filter((e=>e.options.length>0))}function l(e){return e.map(((e,n)=>({option:e,index:n}))).filter((({option:e})=>!e.isInactive)).map((({index:e})=>e))}function d(e,n,t){const o=l(e);if(!o.length)return-1;const s=o.indexOf(n);const i=s>=0?s:t===1?-1:0;return o[(i+t+o.length)%o.length]}function u(e,n,t){const o=n.toLocaleLowerCase();if(!o)return-1;for(let n=1;n<=e.length;n+=1){const s=(Math.max(t,-1)+n)%e.length;const i=e[s];if(!i.isInactive&&i.label.toLocaleLowerCase().startsWith(o))return s}return-1}function f(e){return{"ds-interaction-fill--on-faint":e==="faint","ds-interaction-fill--on-medium":e==="medium","ds-interaction-fill--on-bold":e==="bold","ds-interaction-fill--on-strong":e==="strong","ds-interaction-fill--on-translucent":e==="translucent","ds-interaction-fill--on-inverted":e==="inverted","ds-interaction-fill--on-media":e==="media","ds-interaction-fill--on-always-dark":e==="always-dark"}}export{o as C,c as a,u as b,a as c,r as d,l as e,i as f,n as g,t as h,f as i,d as m,s as r};
2
- //# sourceMappingURL=p-VKIsOVza.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["ChoiceSearch","value","placeholder","controls","activeDescendant","inputRef","clearLabel","onValueChange","onKeyDown","inputElement","h","class","name","size","color","ref","element","type","onInput","event","target","variant","icon","hasBorder","rounded","ariaLabel","onDsClick","requestAnimationFrame","focus","ChoiceFooter","summary","onClear","as","onClick","ChoiceOptionRow","id","option","selected","active","focusRingVisible","usesSubtext","leading","onHover","onSelect","isInactive","role","String","undefined","onMouseDown","preventDefault","onMouseMove","label","subtext","trim","resolveChoiceSections","options","sections","length","flattenChoiceSections","flatMap","section","choiceListUsesIcons","every","Boolean","choiceListUsesSubtext","some","filterChoiceSections","searchTerm","normalized","toLocaleLowerCase","map","sectionMatches","header","includes","filter","enabledChoiceIndexes","index","moveChoiceIndex","currentIndex","direction","enabled","currentEnabledIndex","indexOf","start","findChoiceTypeaheadMatch","query","offset","Math","max","startsWith","choiceBackgroundClassMap","background"],"sources":["src/wc/utils/choice-list-parts.tsx","src/wc/utils/choice-list.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-unused-vars -- Stencil's configured JSX factory requires h at compile time.\nimport { FunctionalComponent, h, VNode } from '@stencil/core';\nimport type { ChoiceOption } from './choice-list';\n\ninterface ChoiceSearchProps {\n value: string;\n placeholder: string;\n controls: string;\n activeDescendant?: string;\n inputRef: (element: HTMLInputElement | null) => void;\n clearLabel: string;\n onValueChange: (value: string) => void;\n onKeyDown: (event: KeyboardEvent) => void;\n}\n\nexport const ChoiceSearch: FunctionalComponent<ChoiceSearchProps> = ({\n value,\n placeholder,\n controls,\n activeDescendant,\n inputRef,\n clearLabel,\n onValueChange,\n onKeyDown,\n}) => {\n let inputElement: HTMLInputElement | null = null;\n\n return (\n <div class=\"select-search\">\n <div class=\"select-search__control ds-control--md\">\n <ds-icon name=\"MagnifyingGlass\" size=\"md\" color=\"inherit\" />\n <input\n class=\"ds-text--body-medium ds-text--regular\"\n ref={element => {\n inputElement = (element as HTMLInputElement) ?? null;\n inputRef(inputElement);\n }}\n type=\"search\"\n value={value}\n placeholder={placeholder}\n aria-label={placeholder}\n aria-controls={controls}\n aria-activedescendant={activeDescendant}\n onInput={event => onValueChange((event.target as HTMLInputElement).value)}\n onKeyDown={onKeyDown}\n />\n {value && (\n <ds-button-unfilled\n class=\"select-search__clear\"\n variant=\"icon\"\n size=\"sm\"\n icon=\"CrossCircle\"\n hasBorder={false}\n rounded\n ariaLabel={`${clearLabel} ${placeholder}`}\n onDsClick={() => {\n onValueChange('');\n requestAnimationFrame(() => inputElement?.focus());\n }}\n />\n )}\n </div>\n </div>\n );\n};\n\ninterface ChoiceFooterProps {\n clearLabel: string;\n summary?: string;\n onClear: (event: MouseEvent) => void;\n}\n\nexport const ChoiceFooter: FunctionalComponent<ChoiceFooterProps> = ({\n clearLabel,\n summary,\n onClear,\n}) => (\n <div class=\"ds-choice-footer\">\n <div class=\"ds-choice-footer__content ds-control--md\">\n {summary && (\n <ds-text class=\"ds-choice-footer__summary\" as=\"span\" variant=\"text-body-medium\" color=\"secondary\">\n {summary}\n </ds-text>\n )}\n <button\n type=\"button\"\n class=\"ds-choice-footer__clear ds-focus-ring\"\n onClick={onClear}\n >\n <ds-text as=\"span\" variant=\"text-body-medium\" color=\"inherit\">\n {clearLabel}\n </ds-text>\n </button>\n </div>\n </div>\n);\n\ninterface ChoiceOptionRowProps {\n id: string;\n option: ChoiceOption;\n selected: boolean;\n active: boolean;\n focusRingVisible: boolean;\n usesSubtext: boolean;\n leading?: VNode;\n onHover: () => void;\n onSelect: () => void;\n}\n\nexport const ChoiceOptionRow: FunctionalComponent<ChoiceOptionRowProps> = ({\n id,\n option,\n selected,\n active,\n focusRingVisible,\n usesSubtext,\n leading,\n onHover,\n onSelect,\n}) => (\n <div\n id={id}\n class={{\n 'select-option': true,\n 'ds-choice-item': true,\n 'ds-control--md': true,\n 'ds-focus-ring-inset': true,\n 'ds-focus-ring--visible': active && focusRingVisible,\n 'ds-interaction-fill': !option.isInactive,\n 'ds-interaction-fill--selected': selected && !option.isInactive,\n 'ds-control-inactive': !!option.isInactive,\n 'select-option--active': active,\n }}\n role=\"option\"\n aria-selected={String(selected)}\n aria-disabled={option.isInactive ? 'true' : undefined}\n onMouseDown={event => event.preventDefault()}\n onMouseMove={() => {\n if (!option.isInactive) onHover();\n }}\n onClick={onSelect}\n >\n {leading}\n <div class=\"ds-choice-item__content ds-interaction-fill__content\">\n <ds-text\n class=\"ds-choice-item__label\"\n as=\"span\"\n variant=\"text-body-medium\"\n color={selected ? 'primary' : 'secondary'}\n >\n {option.label}\n </ds-text>\n {usesSubtext && (\n <ds-text class=\"ds-choice-item__subtext\" as=\"span\" variant=\"text-body-small\" color=\"secondary\">\n {option.subtext?.trim() || '—'}\n </ds-text>\n )}\n </div>\n </div>\n);\n","export interface ChoiceOption {\n label: string;\n value: string;\n subtext?: string;\n /** Rendered only when every option in the complete list supplies an icon. */\n icon?: string;\n isInactive?: boolean;\n}\n\nexport interface ChoiceSection {\n header?: string;\n options: ChoiceOption[];\n divider?: boolean;\n}\n\nexport type ChoiceBackground =\n | 'faint'\n | 'medium'\n | 'bold'\n | 'strong'\n | 'translucent'\n | 'inverted'\n | 'media'\n | 'always-dark';\n\nexport function resolveChoiceSections(\n options: ChoiceOption[],\n sections: ChoiceSection[],\n): ChoiceSection[] {\n return sections.length > 0 ? sections : [{ options }];\n}\n\nexport function flattenChoiceSections(sections: ChoiceSection[]): ChoiceOption[] {\n return sections.flatMap(section => section.options);\n}\n\n/** A choice list has one stable row layout: every option has an icon, or none do. */\nexport function choiceListUsesIcons(options: ChoiceOption[]): boolean {\n return options.length > 0 && options.every(option => Boolean(option.icon));\n}\n\n/** Once one option needs supporting text, every row keeps the same two-line structure. */\nexport function choiceListUsesSubtext(options: ChoiceOption[]): boolean {\n return options.some(option => Boolean(option.subtext?.trim()));\n}\n\nexport function filterChoiceSections(\n sections: ChoiceSection[],\n searchTerm: string,\n): ChoiceSection[] {\n const normalized = searchTerm.trim().toLocaleLowerCase();\n if (!normalized) return sections;\n\n return sections\n .map(section => {\n const sectionMatches = section.header?.toLocaleLowerCase().includes(normalized);\n return {\n ...section,\n options: sectionMatches\n ? section.options\n : section.options.filter(option =>\n `${option.label} ${option.subtext ?? ''}`.toLocaleLowerCase().includes(normalized),\n ),\n };\n })\n .filter(section => section.options.length > 0);\n}\n\nexport function enabledChoiceIndexes(options: ChoiceOption[]): number[] {\n return options\n .map((option, index) => ({ option, index }))\n .filter(({ option }) => !option.isInactive)\n .map(({ index }) => index);\n}\n\nexport function moveChoiceIndex(\n options: ChoiceOption[],\n currentIndex: number,\n direction: 1 | -1,\n): number {\n const enabled = enabledChoiceIndexes(options);\n if (!enabled.length) return -1;\n\n const currentEnabledIndex = enabled.indexOf(currentIndex);\n const start = currentEnabledIndex >= 0 ? currentEnabledIndex : direction === 1 ? -1 : 0;\n return enabled[(start + direction + enabled.length) % enabled.length];\n}\n\nexport function findChoiceTypeaheadMatch(\n options: ChoiceOption[],\n query: string,\n currentIndex: number,\n): number {\n const normalized = query.toLocaleLowerCase();\n if (!normalized) return -1;\n\n for (let offset = 1; offset <= options.length; offset += 1) {\n const index = (Math.max(currentIndex, -1) + offset) % options.length;\n const option = options[index];\n if (!option.isInactive && option.label.toLocaleLowerCase().startsWith(normalized)) return index;\n }\n return -1;\n}\n\nexport function choiceBackgroundClassMap(\n background: ChoiceBackground | undefined,\n): Record<string, boolean> {\n return {\n 'ds-interaction-fill--on-faint': background === 'faint',\n 'ds-interaction-fill--on-medium': background === 'medium',\n 'ds-interaction-fill--on-bold': background === 'bold',\n 'ds-interaction-fill--on-strong': background === 'strong',\n 'ds-interaction-fill--on-translucent': background === 'translucent',\n 'ds-interaction-fill--on-inverted': background === 'inverted',\n 'ds-interaction-fill--on-media': background === 'media',\n 'ds-interaction-fill--on-always-dark': background === 'always-dark',\n };\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{p as i,H as e,c as s,h as n,a as t,t as o}from"./index.js";import{a as r,c,r as a}from"./p-l6PmnW_P.js";import{s as d}from"./p-D1HFMTdC.js";import{d as l}from"./p-BbV68F23.js";import{d as h}from"./p-HBIxvS5C.js";import{d as u}from"./p-C7UFYvsO.js";import{d as m}from"./p-CbS_WWs2.js";import{a as f,T as p}from"./p-drBA73M_.js";import{r as v}from"./p-BWUTr_XN.js";import{r as g}from"./p-BHtg1fh3.js";const b=r;function x(i){return"variant"in i&&i.variant==="gradient-picker"}function w(i){return"variant"in i&&i.variant==="swatch-picker"}function y(i){return x(i)||w(i)}const _=()=>`.sc-ds-menu-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-menu-h:focus-visible,.ds-focus-ring.sc-ds-menu: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-menu-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-menu{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-menu-h:focus-visible,.ds-focus-ring-inset.sc-ds-menu:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-menu-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-menu: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-menu-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu::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-menu-h,.ds-interaction-fill.sc-ds-menu{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-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-menu-h::before,.ds-interaction-fill.sc-ds-menu::before,.ds-interaction-fill.sc-ds-menu-h::after,.ds-interaction-fill.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-menu-h::before,.ds-interaction-fill.sc-ds-menu::before{z-index:1}.ds-interaction-fill.sc-ds-menu-h::after,.ds-interaction-fill.sc-ds-menu::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-menu-h,.ds-interaction-fill--bordered.sc-ds-menu{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-menu-h::before,.ds-interaction-fill--selected.sc-ds-menu::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-menu-h,.ds-interaction-fill--selected.sc-ds-menu{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-menu-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-menu:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-menu-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-menu:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-menu-h>.ds-interaction-fill__content.sc-ds-menu,.ds-interaction-fill.sc-ds-menu>.ds-interaction-fill__content.sc-ds-menu,.ds-interaction-fill__content.sc-ds-menu{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-menu-h,.ds-interaction-fill--on-faint.sc-ds-menu{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-menu-h,.ds-interaction-fill--on-medium.sc-ds-menu{--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-menu-h,.ds-interaction-fill--on-bold.sc-ds-menu{--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-menu-h,.ds-interaction-fill--on-strong.sc-ds-menu{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-menu-h,.ds-interaction-fill--on-translucent.sc-ds-menu{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-menu-h,.ds-interaction-fill--on-inverted.sc-ds-menu{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-menu-h,.ds-interaction-fill--on-media.sc-ds-menu{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-menu-h,.ds-interaction-fill--on-always-dark.sc-ds-menu{--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-menu-h,.ds-interaction-fill--on-navigation.sc-ds-menu{--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-menu-h,.ds-control-inactive.sc-ds-menu{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-menu-h,.ds-control--md.sc-ds-menu{--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-menu-h,.ds-control--sm.sc-ds-menu{--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-menu-h,.ds-control--xs.sc-ds-menu{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0;--ds-control-radius:var(--dimension-radius-025)}.ds-choice-popup.sc-ds-menu{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--dimension-menu-width-xs);max-width:min( var(--dimension-panel-width-lg), calc(100vw - var(--dimension-space-200)) );max-height:calc(100vh - var(--dimension-space-200));overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-shadow-elevated-floating);animation:dsChoiceFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform;text-align:start}.ds-choice-popup.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.ds-choice-popup--closing.sc-ds-menu{animation:dsChoiceFadeOut var(--effect-motion-short-2) forwards}@keyframes dsChoiceFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes dsChoiceFadeOut{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.ds-choice-popup.sc-ds-menu{animation:none;opacity:1}.ds-choice-popup--closing.sc-ds-menu{opacity:0}}.ds-choice-list.sc-ds-menu{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain}.ds-choice-section.sc-ds-menu{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-050)}.ds-choice-section--divided.sc-ds-menu{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}ds-text.ds-choice-section__header.sc-ds-menu{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 calc( var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) );text-align:start;-webkit-user-select:none;user-select:none}.ds-choice-item.sc-ds-menu{display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));width:100%;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;color:inherit}.ds-choice-item.sc-ds-menu:has(.ds-choice-item__subtext){height:auto;min-height:var(--ds-control-height, var(--dimension-size-400));padding-block:var(--ds-control-padding-inline, var(--dimension-space-075));align-items:flex-start}.ds-choice-item__content.sc-ds-menu{display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}ds-text.ds-choice-item__label.sc-ds-menu,.ds-choice-item__subtext.sc-ds-menu,ds-text.ds-choice-item__subtext.sc-ds-menu{padding:0 var(--ds-control-label-inset, var(--dimension-space-025))}ds-text.ds-choice-item__label.sc-ds-menu{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ds-text.ds-choice-item__subtext.sc-ds-menu{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ds-choice-item__icon.sc-ds-menu,.ds-choice-item__suffix.sc-ds-menu{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));pointer-events:none}.ds-choice-empty.sc-ds-menu,.ds-choice-loading.sc-ds-menu{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--dimension-size-600);padding:var(--dimension-space-100)}.ds-choice-footer.sc-ds-menu{position:relative;box-sizing:border-box;padding:var(--dimension-space-050)}.ds-choice-footer.sc-ds-menu::before{content:'';position:absolute;inset:0 0 auto;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.ds-choice-footer__content.sc-ds-menu{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;height:var(--dimension-size-400);padding:0 var(--ds-control-padding-inline, var(--dimension-space-075))}.ds-choice-footer__summary.sc-ds-menu,.ds-choice-footer__clear.sc-ds-menu ds-text.sc-ds-menu{padding:0 var(--ds-control-label-inset, var(--dimension-space-025))}.ds-choice-footer__clear.sc-ds-menu{appearance:none;display:inline-flex;align-items:center;padding:0;border:0;border-radius:var(--dimension-radius-025);background:transparent;color:var(--color-foreground-bold-brand);cursor:pointer}.ds-choice-footer__clear.sc-ds-menu:hover{text-decoration:underline}.menu-item--destructive.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-bold-negative) !important}.menu-item__dot-box.sc-ds-menu{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));pointer-events:none}.menu-item__switch.sc-ds-menu{flex-shrink:0}`;const k=8;const P=["a[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(",");const C=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.dsClose=s(this,"dsClose");this.dsSelect=s(this,"dsSelect");this.dsGradientSelect=s(this,"dsGradientSelect");this.dsSwatchSelect=s(this,"dsSwatchSelect");this.open=false;this.items=[];this.sections=[];this.side="bottom";this.align="start";this.anchorAlignment="choice-cell";this.sideOffset=f.space050;this.alignOffset=0;this.initialFocusVisible=false;this.menuLabel="Menu";this.shouldRender=false;this.closing=false;this.pos={x:0,y:0};this.focusedIndex=0;this.positionReady=false;this.focusRingVisible=false;this.clickOutsideHandler=null;this.scrollResizeHandler=null;this.closeTimer=null;this.itemEls=[];this.positionRetryRaf=null;this.listenersReady=false}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.cancelPositionRetry();this.teardownListeners()}onOpenChange(i){if(i){this.teardownListeners();this.shouldRender=true;this.closing=false;this.positionReady=false;this.listenersReady=false;this.focusRingVisible=this.initialFocusVisible;this.listenersReady=true;this.setupListeners();this.schedulePositionUpdate((()=>{this.focusInitialItem()}))}else if(this.shouldRender){this.cancelPositionRetry();this.closing=true;this.teardownListeners();this.listenersReady=false;const i=this.closeAnimationMs;if(i<=0){this.finishClose();return}this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.finishClose()}),i)}}onAnchorChange(){if(this.open)this.schedulePositionUpdate()}onPositionPropsChange(){if(this.open)this.schedulePositionUpdate()}get viewportPadPx(){return v(p.space050,p.space050)}get sideOffsetPx(){return v(this.sideOffset,p.space050)}get alignOffsetPx(){return v(this.alignOffset,0)}get popupFallbackWidthPx(){return v(p.menuWidthXs,p.menuWidthXs)}get popupFallbackHeightPx(){return v(p.menuFallbackHeight,p.menuFallbackHeight)}get closeAnimationMs(){return g(p.motionShort2,p.animationDurationShort3)}finishClose(){this.shouldRender=false;this.closing=false}get resolvedAnchor(){if(this.anchor)return this.anchor;if(this.anchorId)return document.getElementById(this.anchorId);return null}get anchorFocusTarget(){const i=this.resolvedAnchor;if(!i)return null;if(i.matches(P))return i;return i.querySelector(P)??i}focusAnchor(){const i=this.resolvedAnchor;if(i?.setFocus){i.setFocus();return}this.anchorFocusTarget?.focus()}moveFocusAfterTab(i){const e=this.anchorFocusTarget;if(!e)return;if(i){e.focus();return}const s=Array.from(document.querySelectorAll(P)).filter((i=>!i.closest(".menu-popup")&&!i.closest("[inert]")&&i.getClientRects().length>0));const n=s.indexOf(e);(s[n+1]??e).focus()}compositeTabLeavesPopup(i){const e=this.el.querySelector(".menu-popup");if(!e)return true;const s=Array.from(e.querySelectorAll(P)).filter((i=>i.getClientRects().length>0));const n=s.indexOf(i.target);if(n<0)return true;return i.shiftKey?n===0:n===s.length-1}get activeSections(){if(this.sections.length>0)return this.sections;if(this.items.length>0)return[{items:this.items}];return[]}get flatItems(){return this.activeSections.flatMap((i=>y(i)?[]:i.items))}get hasCompositeSections(){return this.activeSections.some(y)}cancelPositionRetry(){if(this.positionRetryRaf!==null){cancelAnimationFrame(this.positionRetryRaf);this.positionRetryRaf=null}}schedulePositionUpdate(i){if(!this.open)return;this.cancelPositionRetry();this.positionReady=false;let e=k;const s=()=>{this.positionRetryRaf=null;if(!this.open)return;if(this.calculatePosition()){this.positionReady=true;i?.();return}if(e>0){e-=1;this.positionRetryRaf=requestAnimationFrame(s)}};this.positionRetryRaf=requestAnimationFrame(s)}calculatePosition(){const i=this.resolvedAnchor;if(!i)return false;const e=this.el.querySelector(".menu-popup");if(!e)return false;const s=i.getBoundingClientRect();const n=this.viewportPadPx;if(!this.minWidth){if(this.anchorAlignment==="choice-cell"&&(this.side==="top"||this.side==="bottom")){e.style.minWidth=`max(var(--dimension-menu-width-xs), ${c(s.width,n)}px)`}else{e.style.removeProperty("min-width")}}this.pos=b({anchorRect:s,popupWidth:e.offsetWidth||this.popupFallbackWidthPx,popupHeight:e.offsetHeight||this.popupFallbackHeightPx,side:this.side,align:this.align,sideOffsetPx:this.sideOffsetPx,alignOffsetPx:a({align:this.align,alignOffsetPx:this.alignOffsetPx,sectionInsetPx:n,anchorAlignment:this.anchorAlignment}),viewportPadPx:this.viewportPadPx,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight});return true}focusInitialItem(){if(this.hasCompositeSections){requestAnimationFrame((()=>{this.el.querySelector('.menu-popup [tabindex="0"]')?.focus()}));return}const i=this.flatItems;const e=i.findIndex((i=>i.isSelected&&!i.isInactive));const s=i.findIndex((i=>!i.isInactive));this.focusedIndex=e>=0?e:s>=0?s:0;requestAnimationFrame((()=>{const i=this.el.querySelectorAll(".menu-item");i[this.focusedIndex]?.focus()}))}setupListeners(){this.clickOutsideHandler=i=>{const e=i.target;const s=this.el.querySelector(".menu-popup");const n=this.resolvedAnchor;if(s?.contains(e)||n?.contains(e))return;this.close()};this.scrollResizeHandler=()=>{if(this.shouldRender&&!this.closing)this.calculatePosition()};document.addEventListener("mousedown",this.clickOutsideHandler,true);window.addEventListener("scroll",this.scrollResizeHandler,true);window.addEventListener("resize",this.scrollResizeHandler)}teardownListeners(){if(this.clickOutsideHandler){document.removeEventListener("mousedown",this.clickOutsideHandler,true);this.clickOutsideHandler=null}if(this.scrollResizeHandler){window.removeEventListener("scroll",this.scrollResizeHandler,true);window.removeEventListener("resize",this.scrollResizeHandler);this.scrollResizeHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(i=true){if(i)this.focusAnchor();this.dsClose.emit();this.open=false;this.onOpenChange(false)}handleKeyDown(i){if(!this.shouldRender||this.closing)return;if(i.key==="Escape"){i.preventDefault();this.close();return}if(i.key==="Tab"){if(this.hasCompositeSections&&!this.compositeTabLeavesPopup(i))return;i.preventDefault();this.close(false);this.moveFocusAfterTab(i.shiftKey);return}if(this.hasCompositeSections)return;const e=this.flatItems;const s=e.map(((i,e)=>({it:i,i:e}))).filter((({it:i})=>!i.isInactive)).map((({i})=>i));if(!s.length)return;const n=s.indexOf(this.focusedIndex);const t=n<0?0:n;switch(i.key){case"ArrowDown":i.preventDefault();i.stopPropagation();this.focusRingVisible=true;this.focusedIndex=s[(t+1)%s.length];this.focusItem(this.focusedIndex);break;case"ArrowUp":i.preventDefault();i.stopPropagation();this.focusRingVisible=true;this.focusedIndex=s[(t-1+s.length)%s.length];this.focusItem(this.focusedIndex);break;case"Home":i.preventDefault();i.stopPropagation();this.focusRingVisible=true;this.focusedIndex=s[0];this.focusItem(this.focusedIndex);break;case"End":i.preventDefault();i.stopPropagation();this.focusRingVisible=true;this.focusedIndex=s[s.length-1];this.focusItem(this.focusedIndex);break}}focusItem(i){const e=this.el.querySelectorAll(".menu-item");e[i]?.focus()}handleItemClick(i){if(i.isInactive)return;this.dsSelect.emit(i)}handleGradientSelect(i){this.dsGradientSelect.emit(i)}handleSwatchSelect(i){this.dsSwatchSelect.emit(i)}render(){if(!this.shouldRender)return n(t,{style:{display:"contents"}});const i=this.activeSections;let e=0;const s={position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,zIndex:"9998",visibility:this.positionReady?"visible":"hidden"};if(this.menuWidth)s["width"]=this.menuWidth;if(this.minWidth)s["min-width"]=this.minWidth;return n(t,{style:{display:"contents"}},n("div",{class:{"menu-popup":true,"menu-popup--closing":this.closing,"ds-choice-popup":true,"ds-choice-popup--closing":this.closing},style:s,role:this.hasCompositeSections?"dialog":"menu","aria-label":this.menuLabel,"aria-orientation":this.hasCompositeSections?undefined:"vertical"},n("div",{class:"ds-choice-list"},i.map(((s,t)=>n("div",{key:t,class:{"menu-section":true,"menu-section--divided":t<i.length-1,"menu-section--gradient-picker":y(s),"ds-choice-section":true,"ds-choice-section--divided":t<i.length-1},role:s.header?"group":undefined,"aria-label":s.header},s.header&&n("ds-text",{class:"section-header ds-choice-section__header ds-control--md",as:"span",variant:"text-body-small",emphasis:true,color:"primary","aria-hidden":"true"},s.header),x(s)?n("ds-swatch-picker",{value:s.value,groupLabel:s.header??"Shell gradient theme",sections:d(),onDsChange:i=>{i.stopPropagation();this.handleGradientSelect(i.detail)}}):w(s)?n("ds-swatch-picker",{value:s.value,groupLabel:s.groupLabel??s.header??"Swatch options",options:s.options??[],sections:s.sections??[],onDsChange:i=>{i.stopPropagation();this.handleSwatchSelect(i.detail)}}):s.items.map((i=>{const s=e++;const t=this.focusedIndex===s;return n("button",{key:s,type:"button",class:{"menu-item":true,"ds-choice-item":true,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-focus-ring--visible":t&&this.focusRingVisible,"ds-interaction-fill":!i.isInactive,"ds-interaction-fill--selected":!!i.isSelected&&!i.isInactive,"menu-item--selected":!!i.isSelected,"ds-control-inactive":!!i.isInactive,"menu-item--destructive":!!i.isDestructive,"menu-item--focused":t},role:this.hasCompositeSections?undefined:i.showSwitch?"menuitemcheckbox":"menuitem","aria-checked":!this.hasCompositeSections&&i.showSwitch?String(!!i.switchValue):undefined,"aria-pressed":this.hasCompositeSections?String(i.showSwitch?!!i.switchValue:!!i.isSelected):undefined,"aria-current":!this.hasCompositeSections&&!i.showSwitch&&i.isSelected?"true":undefined,disabled:i.isInactive,tabIndex:this.hasCompositeSections?0:t?0:-1,onMouseDown:()=>{this.focusRingVisible=false},onClick:()=>this.handleItemClick(i),onFocus:()=>{this.focusedIndex=s}},n("div",{class:"menu-item__content ds-choice-item__content ds-interaction-fill__content"},n("ds-text",{class:"menu-item__label ds-choice-item__label",as:"span",variant:"text-body-medium",color:i.isSelected?"primary":"secondary"},i.label),i.subtext&&n("ds-text",{class:"menu-item__subtext ds-choice-item__subtext",as:"span",variant:"text-body-small",color:"secondary"},i.subtext)),i.dot&&n("span",{class:"menu-item__dot-box ds-interaction-fill__content","aria-hidden":"true"},n("ds-badge",{class:"menu-item__dot",variant:"dot",hasRing:false,label:""})),i.showSwitch&&n("ds-switch",{class:"menu-item__switch ds-interaction-fill__content",size:"md",checked:!!i.switchValue,presentation:true}))}))))))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],anchorAlignment:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}}static get style(){return _()}},[2,"ds-menu",{open:[1028],items:[16],sections:[16],side:[1],align:[1],anchorAlignment:[1,"anchor-alignment"],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],menuWidth:[1,"menu-width"],minWidth:[1,"min-width"],anchor:[16],anchorId:[1,"anchor-id"],initialFocusVisible:[4,"initial-focus-visible"],menuLabel:[1,"menu-label"],shouldRender:[32],closing:[32],pos:[32],focusedIndex:[32],positionReady:[32],focusRingVisible:[32]},[[0,"keydown","handleKeyDown"]],{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],anchorAlignment:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}]);function A(){if(typeof customElements==="undefined"){return}const i=["ds-menu","ds-badge","ds-swatch-picker","ds-switch","ds-text"];i.forEach((i=>{switch(i){case"ds-menu":if(!customElements.get(o(i))){customElements.define(o(i),C)}break;case"ds-badge":if(!customElements.get(o(i))){l()}break;case"ds-swatch-picker":if(!customElements.get(o(i))){h()}break;case"ds-switch":if(!customElements.get(o(i))){u()}break;case"ds-text":if(!customElements.get(o(i))){m()}break}}))}A();export{C as M,A as d};
2
- //# sourceMappingURL=p-tQ1QHeOE.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["computeMenuPosition","computeAnchoredPopupPosition","isMenuGradientPickerSection","section","variant","isMenuSwatchPickerSection","isMenuPickerSection","menuCss","POSITION_RETRY_BUDGET","MENU_FOCUSABLE_SELECTOR","join","Menu","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","items","sections","side","align","anchorAlignment","sideOffset","TOKEN_CSS_LENGTHS","space050","alignOffset","initialFocusVisible","menuLabel","shouldRender","closing","pos","x","y","focusedIndex","positionReady","focusRingVisible","clickOutsideHandler","scrollResizeHandler","closeTimer","itemEls","positionRetryRaf","listenersReady","componentDidLoad","onOpenChange","disconnectedCallback","cancelPositionRetry","teardownListeners","isOpen","setupListeners","schedulePositionUpdate","focusInitialItem","closeAnimationMs","finishClose","setTimeout","onAnchorChange","onPositionPropsChange","viewportPadPx","resolveCssLengthPx","TOKEN_DEFAULTS","sideOffsetPx","alignOffsetPx","popupFallbackWidthPx","menuWidthXs","popupFallbackHeightPx","menuFallbackHeight","resolveMotionTimeMs","motionShort2","animationDurationShort3","resolvedAnchor","anchor","anchorId","document","getElementById","anchorFocusTarget","matches","querySelector","focusAnchor","setFocus","focus","moveFocusAfterTab","backwards","candidates","Array","from","querySelectorAll","filter","element","closest","getClientRects","length","index","indexOf","compositeTabLeavesPopup","event","popup","el","focusables","currentIndex","target","shiftKey","activeSections","flatItems","flatMap","hasCompositeSections","some","cancelAnimationFrame","onReady","remaining","attempt","calculatePosition","requestAnimationFrame","anchorEl","anchorRect","getBoundingClientRect","sectionInsetPx","minWidth","style","choicePopupMinWidth","width","removeProperty","popupWidth","offsetWidth","popupHeight","offsetHeight","resolveChoicePopupAlignOffset","viewportWidth","window","innerWidth","viewportHeight","innerHeight","flat","selectedIdx","findIndex","it","isSelected","isInactive","firstEnabledIdx","btns","e","t","contains","close","addEventListener","removeEventListener","clearTimeout","restoreFocus","dsClose","emit","handleKeyDown","key","preventDefault","enabled","map","i","cur","safe","stopPropagation","focusItem","idx","handleItemClick","item","dsSelect","handleGradientSelect","preset","dsGradientSelect","handleSwatchSelect","value","dsSwatchSelect","render","h","Host","display","flatIdx","popupStyle","position","left","top","transform","Math","round","zIndex","visibility","menuWidth","class","role","undefined","si","header","as","emphasis","color","groupLabel","shellGradientPickerSections","onDsChange","detail","options","isFocused","type","isDestructive","showSwitch","String","switchValue","disabled","tabIndex","onMouseDown","onClick","onFocus","label","subtext","dot","hasRing","size","checked","presentation"],"sources":["src/wc/components/Menu/menu-position.ts","src/wc/components/Menu/menu-types.ts","src/wc/components/Menu/Menu.css?tag=ds-menu&encapsulation=scoped","src/wc/components/Menu/Menu.tsx"],"sourcesContent":["import {\n computeAnchoredPopupPosition,\n type AnchoredPopupAlign,\n type AnchoredPopupPositionInput,\n type AnchoredPopupSide,\n} from '../../utils/anchored-popup';\n\nexport type MenuSide = AnchoredPopupSide;\nexport type MenuAlign = AnchoredPopupAlign;\nexport type MenuPositionInput = AnchoredPopupPositionInput;\n\n/** Backward-compatible menu alias for the shared anchored-popup layout math. */\nexport const computeMenuPosition = computeAnchoredPopupPosition;\n","import type { ShellGradientPreset } from '../../shell/shell-gradient-presets';\nimport type { SwatchPickerOption, SwatchPickerSection } from '../SwatchPicker/swatch-picker-types';\n\nexport type { MenuAlign, MenuSide } from './menu-position';\nexport {\n PANEL_NAV_USER_MENU_PLACEMENT,\n type MenuPlacement,\n} from './menu-placement';\n\nexport interface MenuItemData {\n label: string;\n value?: string;\n subtext?: string;\n /** Show a supplemental brand notification dot. */\n dot?: boolean;\n isSelected?: boolean;\n isInactive?: boolean;\n isDestructive?: boolean;\n /** Render a compact switch indicator; the menu row owns interaction. */\n showSwitch?: boolean;\n switchValue?: boolean;\n}\n\nexport interface MenuItemsSection {\n header?: string;\n items: MenuItemData[];\n}\n\nexport interface MenuGradientPickerSection {\n header?: string;\n /** @deprecated Use the generic `swatch-picker` section. */\n variant: 'gradient-picker';\n value: ShellGradientPreset;\n}\n\nexport interface MenuSwatchPickerSection {\n header?: string;\n variant: 'swatch-picker';\n value: string;\n options?: SwatchPickerOption[];\n sections?: SwatchPickerSection[];\n groupLabel?: string;\n}\n\nexport type MenuSection =\n | MenuItemsSection\n | MenuGradientPickerSection\n | MenuSwatchPickerSection;\n\nexport function isMenuGradientPickerSection(\n section: MenuSection,\n): section is MenuGradientPickerSection {\n return 'variant' in section && section.variant === 'gradient-picker';\n}\n\nexport function isMenuSwatchPickerSection(\n section: MenuSection,\n): section is MenuSwatchPickerSection {\n return 'variant' in section && section.variant === 'swatch-picker';\n}\n\nexport function isMenuPickerSection(\n section: MenuSection,\n): section is MenuGradientPickerSection | MenuSwatchPickerSection {\n return isMenuGradientPickerSection(section) || isMenuSwatchPickerSection(section);\n}\n\nexport type { ShellGradientPreset };\nexport type { SwatchPickerOption, SwatchPickerSection };\n","@import '../../utils/choice-list.css';\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n.menu-item--destructive .menu-item__label {\n /* Beat ds-text color-* host classes for destructive rows. */\n color: var(--color-foreground-bold-negative) !important;\n}\n\n/* Standard md icon zone keeps the dot aligned with other control suffixes. */\n.menu-item__dot-box {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--ds-control-icon, var(--dimension-iconography-md));\n height: var(--ds-control-icon, var(--dimension-iconography-md));\n pointer-events: none;\n}\n\n/* ── Switch suffix ───────────────────────────────────────────────────────── */\n\n.menu-item__switch {\n flex-shrink: 0;\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';\nimport {\n choicePopupMinWidth,\n resolveChoicePopupAlignOffset,\n resolveCssLengthPx,\n resolveMotionTimeMs,\n TOKEN_CSS_LENGTHS,\n TOKEN_DEFAULTS,\n type ChoicePopupAnchorAlignment,\n} from '../../utils';\nimport { computeMenuPosition, type MenuAlign, type MenuSide } from './menu-position';\nimport type { MenuItemData, MenuSection } from './menu-types';\nimport {\n isMenuGradientPickerSection,\n isMenuPickerSection,\n isMenuSwatchPickerSection,\n} from './menu-types';\nimport {\n shellGradientPickerSections,\n type ShellGradientPreset,\n} from '../../shell/shell-gradient-presets';\n\n/** rAF retries while the popup mounts or the anchor resolves. */\nconst POSITION_RETRY_BUDGET = 8;\nconst MENU_FOCUSABLE_SELECTOR = [\n 'a[href]',\n 'button:not([disabled])',\n 'input:not([disabled]):not([type=\"hidden\"])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\n@Component({\n tag: 'ds-menu',\n styleUrl: 'Menu.css',\n scoped: true,\n})\nexport class Menu {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) open: boolean = false;\n @Prop() items: MenuItemData[] = [];\n @Prop() sections: MenuSection[] = [];\n @Prop() side: MenuSide = 'bottom';\n @Prop() align: MenuAlign = 'start';\n /** Align choice-row edges to the anchor by default; use `popup-frame` only for custom frame geometry. */\n @Prop() anchorAlignment: ChoicePopupAnchorAlignment = 'choice-cell';\n /** Gap between anchor and menu — number (px) or TokoMo length (`var(--dimension-space-050)`, etc.). */\n @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n /** Cross-axis offset — number (px) or TokoMo length. */\n @Prop() alignOffset: number | string = 0;\n @Prop() menuWidth: string | undefined;\n @Prop() minWidth: string | undefined;\n /** External trigger element to position against. Set via JS: menuEl.anchor = buttonEl */\n @Prop() anchor: HTMLElement | undefined;\n /** ID of the external trigger element for positioning */\n @Prop() anchorId: string | undefined;\n /** Show a visible ring on the initially focused menu item. Use only when the opener was keyboard-driven. */\n @Prop() initialFocusVisible: boolean = false;\n /** Accessible name for the popup menu. */\n @Prop() menuLabel: string = 'Menu';\n\n @State() private shouldRender: boolean = false;\n @State() private closing: boolean = false;\n @State() private pos: { x: number; y: number } = { x: 0, y: 0 };\n @State() private focusedIndex: number = 0;\n @State() private positionReady: boolean = false;\n @State() private focusRingVisible: boolean = false;\n\n @Event() dsClose!: EventEmitter<void>;\n @Event() dsSelect!: EventEmitter<MenuItemData>;\n /** Emitted when a `gradient-picker` section swatch is chosen. */\n @Event() dsGradientSelect!: EventEmitter<ShellGradientPreset>;\n /** Emitted when a generic `swatch-picker` section option is chosen. */\n @Event() dsSwatchSelect!: EventEmitter<string>;\n\n private clickOutsideHandler: ((e: MouseEvent) => void) | null = null;\n private scrollResizeHandler: (() => void) | null = null;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n private itemEls: HTMLElement[] = [];\n private positionRetryRaf: number | null = null;\n private listenersReady = false;\n\n componentDidLoad() {\n if (this.open) this.onOpenChange(true);\n }\n\n disconnectedCallback() {\n this.cancelPositionRetry();\n this.teardownListeners();\n }\n\n @Watch('open')\n onOpenChange(isOpen: boolean) {\n if (isOpen) {\n this.teardownListeners();\n this.shouldRender = true;\n this.closing = false;\n this.positionReady = false;\n this.listenersReady = false;\n this.focusRingVisible = this.initialFocusVisible;\n this.listenersReady = true;\n this.setupListeners();\n this.schedulePositionUpdate(() => {\n this.focusInitialItem();\n });\n } else if (this.shouldRender) {\n this.cancelPositionRetry();\n this.closing = true;\n this.teardownListeners();\n this.listenersReady = false;\n const closeAnimationMs = this.closeAnimationMs;\n if (closeAnimationMs <= 0) {\n this.finishClose();\n return;\n }\n this.closeTimer = setTimeout(() => {\n this.closeTimer = null;\n this.finishClose();\n }, closeAnimationMs);\n }\n }\n\n @Watch('anchor')\n @Watch('anchorId')\n onAnchorChange() {\n if (this.open) this.schedulePositionUpdate();\n }\n\n @Watch('side')\n @Watch('align')\n @Watch('anchorAlignment')\n @Watch('sideOffset')\n @Watch('alignOffset')\n onPositionPropsChange() {\n if (this.open) this.schedulePositionUpdate();\n }\n\n private get viewportPadPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n }\n\n private get sideOffsetPx(): number {\n return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);\n }\n\n private get alignOffsetPx(): number {\n return resolveCssLengthPx(this.alignOffset, 0);\n }\n\n private get popupFallbackWidthPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthXs, TOKEN_DEFAULTS.menuWidthXs);\n }\n\n private get popupFallbackHeightPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n }\n\n private get closeAnimationMs(): number {\n return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort2, TOKEN_DEFAULTS.animationDurationShort3);\n }\n\n private finishClose() {\n this.shouldRender = false;\n this.closing = false;\n }\n\n private get resolvedAnchor(): HTMLElement | null {\n if (this.anchor) return this.anchor;\n if (this.anchorId) return document.getElementById(this.anchorId);\n return null;\n }\n\n private get anchorFocusTarget(): HTMLElement | null {\n const anchor = this.resolvedAnchor;\n if (!anchor) return null;\n if (anchor.matches(MENU_FOCUSABLE_SELECTOR)) return anchor;\n return anchor.querySelector<HTMLElement>(MENU_FOCUSABLE_SELECTOR) ?? anchor;\n }\n\n private focusAnchor() {\n const anchor = this.resolvedAnchor as (HTMLElement & { setFocus?: () => Promise<void> | void }) | null;\n if (anchor?.setFocus) {\n anchor.setFocus();\n return;\n }\n this.anchorFocusTarget?.focus();\n }\n\n private moveFocusAfterTab(backwards: boolean) {\n const anchor = this.anchorFocusTarget;\n if (!anchor) return;\n if (backwards) {\n anchor.focus();\n return;\n }\n\n const candidates = Array.from(document.querySelectorAll<HTMLElement>(MENU_FOCUSABLE_SELECTOR))\n .filter(element => (\n !element.closest('.menu-popup') &&\n !element.closest('[inert]') &&\n element.getClientRects().length > 0\n ));\n const index = candidates.indexOf(anchor);\n (candidates[index + 1] ?? anchor).focus();\n }\n\n private compositeTabLeavesPopup(event: KeyboardEvent): boolean {\n const popup = this.el.querySelector<HTMLElement>('.menu-popup');\n if (!popup) return true;\n const focusables = Array.from(popup.querySelectorAll<HTMLElement>(MENU_FOCUSABLE_SELECTOR))\n .filter(element => element.getClientRects().length > 0);\n const currentIndex = focusables.indexOf(event.target as HTMLElement);\n if (currentIndex < 0) return true;\n return event.shiftKey ? currentIndex === 0 : currentIndex === focusables.length - 1;\n }\n\n private get activeSections(): MenuSection[] {\n if (this.sections.length > 0) return this.sections;\n if (this.items.length > 0) return [{ items: this.items }];\n return [];\n }\n\n private get flatItems(): MenuItemData[] {\n return this.activeSections.flatMap(section =>\n isMenuPickerSection(section) ? [] : section.items,\n );\n }\n\n /** Rich preference content is a non-modal dialog, not an ARIA action menu. */\n private get hasCompositeSections(): boolean {\n return this.activeSections.some(isMenuPickerSection);\n }\n\n private cancelPositionRetry() {\n if (this.positionRetryRaf !== null) {\n cancelAnimationFrame(this.positionRetryRaf);\n this.positionRetryRaf = null;\n }\n }\n\n /** Retry until anchor + popup exist — do not reveal at 0,0 on a failed first pass. */\n private schedulePositionUpdate(onReady?: () => void) {\n if (!this.open) return;\n\n this.cancelPositionRetry();\n this.positionReady = false;\n\n let remaining = POSITION_RETRY_BUDGET;\n\n const attempt = () => {\n this.positionRetryRaf = null;\n if (!this.open) return;\n\n if (this.calculatePosition()) {\n this.positionReady = true;\n onReady?.();\n return;\n }\n\n if (remaining > 0) {\n remaining -= 1;\n this.positionRetryRaf = requestAnimationFrame(attempt);\n }\n };\n\n this.positionRetryRaf = requestAnimationFrame(attempt);\n }\n\n /** @returns `true` when anchor and popup were found and `pos` was updated. */\n private calculatePosition(): boolean {\n const anchorEl = this.resolvedAnchor;\n if (!anchorEl) return false;\n const popup = this.el.querySelector('.menu-popup') as HTMLElement | null;\n if (!popup) return false;\n\n const anchorRect = anchorEl.getBoundingClientRect();\n const sectionInsetPx = this.viewportPadPx;\n if (!this.minWidth) {\n if (this.anchorAlignment === 'choice-cell' && (this.side === 'top' || this.side === 'bottom')) {\n popup.style.minWidth = `max(var(--dimension-menu-width-xs), ${choicePopupMinWidth(anchorRect.width, sectionInsetPx)}px)`;\n } else {\n popup.style.removeProperty('min-width');\n }\n }\n\n this.pos = computeMenuPosition({\n anchorRect,\n popupWidth: popup.offsetWidth || this.popupFallbackWidthPx,\n popupHeight: popup.offsetHeight || this.popupFallbackHeightPx,\n side: this.side,\n align: this.align,\n sideOffsetPx: this.sideOffsetPx,\n alignOffsetPx: resolveChoicePopupAlignOffset({\n align: this.align,\n alignOffsetPx: this.alignOffsetPx,\n sectionInsetPx,\n anchorAlignment: this.anchorAlignment,\n }),\n viewportPadPx: this.viewportPadPx,\n viewportWidth: window.innerWidth,\n viewportHeight: window.innerHeight,\n });\n return true;\n }\n\n /** Focus the selected item when present, otherwise the first enabled item. */\n private focusInitialItem() {\n if (this.hasCompositeSections) {\n requestAnimationFrame(() => {\n this.el.querySelector<HTMLElement>('.menu-popup [tabindex=\"0\"]')?.focus();\n });\n return;\n }\n\n const flat = this.flatItems;\n const selectedIdx = flat.findIndex(it => it.isSelected && !it.isInactive);\n const firstEnabledIdx = flat.findIndex(it => !it.isInactive);\n this.focusedIndex = selectedIdx >= 0\n ? selectedIdx\n : (firstEnabledIdx >= 0 ? firstEnabledIdx : 0);\n\n requestAnimationFrame(() => {\n const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n btns[this.focusedIndex]?.focus();\n });\n }\n\n private setupListeners() {\n this.clickOutsideHandler = (e: MouseEvent) => {\n const t = e.target as Node;\n const popup = this.el.querySelector('.menu-popup');\n const anchorEl = this.resolvedAnchor;\n if (popup?.contains(t) || anchorEl?.contains(t)) return;\n this.close();\n };\n\n this.scrollResizeHandler = () => {\n if (this.shouldRender && !this.closing) this.calculatePosition();\n };\n\n document.addEventListener('mousedown', this.clickOutsideHandler, true);\n window.addEventListener('scroll', this.scrollResizeHandler, true);\n window.addEventListener('resize', this.scrollResizeHandler);\n }\n\n private teardownListeners() {\n if (this.clickOutsideHandler) {\n document.removeEventListener('mousedown', this.clickOutsideHandler, true);\n this.clickOutsideHandler = null;\n }\n if (this.scrollResizeHandler) {\n window.removeEventListener('scroll', this.scrollResizeHandler, true);\n window.removeEventListener('resize', this.scrollResizeHandler);\n this.scrollResizeHandler = null;\n }\n if (this.closeTimer) {\n clearTimeout(this.closeTimer);\n this.closeTimer = null;\n }\n }\n\n private close(restoreFocus = true) {\n if (restoreFocus) this.focusAnchor();\n this.dsClose.emit();\n this.open = false;\n this.onOpenChange(false);\n }\n\n @Listen('keydown')\n handleKeyDown(e: KeyboardEvent) {\n if (!this.shouldRender || this.closing) return;\n\n if (e.key === 'Escape') {\n e.preventDefault();\n this.close();\n return;\n }\n\n if (e.key === 'Tab') {\n if (this.hasCompositeSections && !this.compositeTabLeavesPopup(e)) return;\n e.preventDefault();\n this.close(false);\n this.moveFocusAfterTab(e.shiftKey);\n return;\n }\n\n if (this.hasCompositeSections) return;\n\n const flat = this.flatItems;\n const enabled = flat.map((it, i) => ({ it, i })).filter(({ it }) => !it.isInactive).map(({ i }) => i);\n if (!enabled.length) return;\n\n const cur = enabled.indexOf(this.focusedIndex);\n const safe = cur < 0 ? 0 : cur;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault(); e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[(safe + 1) % enabled.length];\n this.focusItem(this.focusedIndex);\n break;\n case 'ArrowUp':\n e.preventDefault(); e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[(safe - 1 + enabled.length) % enabled.length];\n this.focusItem(this.focusedIndex);\n break;\n case 'Home':\n e.preventDefault(); e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[0];\n this.focusItem(this.focusedIndex);\n break;\n case 'End':\n e.preventDefault(); e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[enabled.length - 1];\n this.focusItem(this.focusedIndex);\n break;\n }\n }\n\n private focusItem(idx: number) {\n const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n btns[idx]?.focus();\n }\n\n private handleItemClick(item: MenuItemData) {\n if (item.isInactive) return;\n this.dsSelect.emit(item);\n }\n\n private handleGradientSelect(preset: ShellGradientPreset) {\n this.dsGradientSelect.emit(preset);\n }\n\n private handleSwatchSelect(value: string) {\n this.dsSwatchSelect.emit(value);\n }\n\n render() {\n if (!this.shouldRender) return <Host style={{ display: 'contents' }} />;\n\n const sections = this.activeSections;\n let flatIdx = 0;\n\n const popupStyle: Record<string, string> = {\n position: 'fixed',\n left: '0',\n top: '0',\n transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n zIndex: '9998',\n visibility: this.positionReady ? 'visible' : 'hidden',\n };\n\n if (this.menuWidth) popupStyle['width'] = this.menuWidth;\n if (this.minWidth) popupStyle['min-width'] = this.minWidth;\n\n return (\n <Host style={{ display: 'contents' }}>\n <div\n class={{\n 'menu-popup': true,\n 'menu-popup--closing': this.closing,\n 'ds-choice-popup': true,\n 'ds-choice-popup--closing': this.closing,\n }}\n style={popupStyle}\n role={this.hasCompositeSections ? 'dialog' : 'menu'}\n aria-label={this.menuLabel}\n aria-orientation={this.hasCompositeSections ? undefined : 'vertical'}\n >\n <div class=\"ds-choice-list\">\n {sections.map((section, si) => (\n <div\n key={si}\n class={{\n 'menu-section': true,\n 'menu-section--divided': si < sections.length - 1,\n 'menu-section--gradient-picker': isMenuPickerSection(section),\n 'ds-choice-section': true,\n 'ds-choice-section--divided': si < sections.length - 1,\n }}\n role={section.header ? 'group' : undefined}\n aria-label={section.header}\n >\n {section.header && (\n <ds-text\n class=\"section-header ds-choice-section__header ds-control--md\"\n as=\"span\"\n variant=\"text-body-small\"\n emphasis\n color=\"primary\"\n aria-hidden=\"true\"\n >\n {section.header}\n </ds-text>\n )}\n {isMenuGradientPickerSection(section) ? (\n <ds-swatch-picker\n value={section.value}\n groupLabel={section.header ?? 'Shell gradient theme'}\n sections={shellGradientPickerSections()}\n onDsChange={(e: CustomEvent<string>) => {\n e.stopPropagation();\n this.handleGradientSelect(e.detail as ShellGradientPreset);\n }}\n />\n ) : isMenuSwatchPickerSection(section) ? (\n <ds-swatch-picker\n value={section.value}\n groupLabel={section.groupLabel ?? section.header ?? 'Swatch options'}\n options={section.options ?? []}\n sections={section.sections ?? []}\n onDsChange={(e: CustomEvent<string>) => {\n e.stopPropagation();\n this.handleSwatchSelect(e.detail);\n }}\n />\n ) : (\n section.items.map(item => {\n const idx = flatIdx++;\n const isFocused = this.focusedIndex === idx;\n return (\n <button\n key={idx}\n type=\"button\"\n class={{\n 'menu-item': true,\n 'ds-choice-item': true,\n 'ds-control--md': true,\n 'ds-focus-ring-inset': true,\n 'ds-focus-ring--visible': isFocused && this.focusRingVisible,\n 'ds-interaction-fill': !item.isInactive,\n 'ds-interaction-fill--selected': !!item.isSelected && !item.isInactive,\n 'menu-item--selected': !!item.isSelected,\n 'ds-control-inactive': !!item.isInactive,\n 'menu-item--destructive': !!item.isDestructive,\n 'menu-item--focused': isFocused,\n }}\n role={this.hasCompositeSections ? undefined : item.showSwitch ? 'menuitemcheckbox' : 'menuitem'}\n aria-checked={!this.hasCompositeSections && item.showSwitch ? String(!!item.switchValue) : undefined}\n aria-pressed={this.hasCompositeSections\n ? String(item.showSwitch ? !!item.switchValue : !!item.isSelected)\n : undefined}\n aria-current={!this.hasCompositeSections && !item.showSwitch && item.isSelected ? 'true' : undefined}\n disabled={item.isInactive}\n tabIndex={this.hasCompositeSections ? 0 : isFocused ? 0 : -1}\n onMouseDown={() => { this.focusRingVisible = false; }}\n onClick={() => this.handleItemClick(item)}\n onFocus={() => { this.focusedIndex = idx; }}\n >\n <div class=\"menu-item__content ds-choice-item__content ds-interaction-fill__content\">\n <ds-text\n class=\"menu-item__label ds-choice-item__label\"\n as=\"span\"\n variant=\"text-body-medium\"\n color={item.isSelected ? 'primary' : 'secondary'}\n >\n {item.label}\n </ds-text>\n {item.subtext && (\n <ds-text class=\"menu-item__subtext ds-choice-item__subtext\" as=\"span\" variant=\"text-body-small\" color=\"secondary\">\n {item.subtext}\n </ds-text>\n )}\n </div>\n {item.dot && (\n <span class=\"menu-item__dot-box ds-interaction-fill__content\" aria-hidden=\"true\">\n <ds-badge\n class=\"menu-item__dot\"\n variant=\"dot\"\n hasRing={false}\n label=\"\"\n />\n </span>\n )}\n {item.showSwitch && (\n <ds-switch\n class=\"menu-item__switch ds-interaction-fill__content\"\n size=\"md\"\n checked={!!item.switchValue}\n presentation\n />\n )}\n </button>\n );\n }))}\n </div>\n ))}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}