@ds-mo/ui 12.2.0 → 12.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (301) hide show
  1. package/README.md +8 -2
  2. package/dist/.build-stamp +1 -1
  3. package/dist/agent-patterns.json +94 -16
  4. package/dist/agent.json +1092 -53
  5. package/dist/angular/ds-bar-title.d.ts +7 -1
  6. package/dist/angular/ds-bar-title.js +7 -4
  7. package/dist/angular/ds-breadcrumb.d.ts +19 -0
  8. package/dist/angular/ds-breadcrumb.js +42 -0
  9. package/dist/angular/ds-card-data-viz-bar.d.ts +18 -0
  10. package/dist/angular/ds-card-data-viz-bar.js +42 -0
  11. package/dist/angular/ds-card-data-viz-line.d.ts +18 -0
  12. package/dist/angular/ds-card-data-viz-line.js +42 -0
  13. package/dist/angular/ds-chart-bar-stacked.d.ts +12 -0
  14. package/dist/angular/ds-chart-bar-stacked.js +38 -0
  15. package/dist/angular/ds-chart-legend.d.ts +1 -1
  16. package/dist/angular/ds-chart-legend.js +3 -3
  17. package/dist/angular/ds-shell-app.d.ts +13 -2
  18. package/dist/angular/ds-shell-app.js +9 -5
  19. package/dist/angular/ds-shell-mobile-bar.d.ts +18 -0
  20. package/dist/angular/ds-shell-mobile-bar.js +46 -0
  21. package/dist/angular/ds-shell-mobile-nav.d.ts +23 -0
  22. package/dist/angular/ds-shell-mobile-nav.js +51 -0
  23. package/dist/angular/ds-shell-mobile-section-nav.d.ts +18 -0
  24. package/dist/angular/ds-shell-mobile-section-nav.js +42 -0
  25. package/dist/angular/ds-shell-page.d.ts +1 -1
  26. package/dist/angular/ds-shell-page.js +3 -3
  27. package/dist/angular/ds-shell-tools.d.ts +42 -0
  28. package/dist/angular/ds-shell-tools.js +52 -0
  29. package/dist/angular/index.d.ts +1 -1
  30. package/dist/angular/index.js +8 -0
  31. package/dist/angular/proxies.d.ts +8 -0
  32. package/dist/angular/proxies.js +8 -0
  33. package/dist/components/ds-agent-activity.js +1 -1
  34. package/dist/components/ds-agent-response.js +1 -1
  35. package/dist/components/ds-agent-source-list.js +1 -1
  36. package/dist/components/ds-agent-tool-call.js +1 -1
  37. package/dist/components/ds-attachment-list.js +1 -1
  38. package/dist/components/ds-badge.js +1 -1
  39. package/dist/components/ds-bar-nav.js +1 -1
  40. package/dist/components/ds-bar-title.js +1 -1
  41. package/dist/components/ds-bar-title.js.map +1 -1
  42. package/dist/components/ds-bar-workflow.js +1 -1
  43. package/dist/components/ds-breadcrumb.d.ts +11 -0
  44. package/dist/components/ds-breadcrumb.js +2 -0
  45. package/dist/components/ds-breadcrumb.js.map +1 -0
  46. package/dist/components/ds-button-filled.js +1 -1
  47. package/dist/components/ds-button-unfilled.js +1 -1
  48. package/dist/components/ds-card-data-viz-bar.d.ts +11 -0
  49. package/dist/components/ds-card-data-viz-bar.js +2 -0
  50. package/dist/components/ds-card-data-viz-bar.js.map +1 -0
  51. package/dist/components/ds-card-data-viz-donut.js +1 -1
  52. package/dist/components/ds-card-data-viz-donut.js.map +1 -1
  53. package/dist/components/ds-card-data-viz-line.d.ts +11 -0
  54. package/dist/components/ds-card-data-viz-line.js +2 -0
  55. package/dist/components/ds-card-data-viz-line.js.map +1 -0
  56. package/dist/components/ds-card-setting.js +1 -1
  57. package/dist/components/ds-card-setting.js.map +1 -1
  58. package/dist/components/ds-card-shell-data-viz.js +1 -1
  59. package/dist/components/ds-chart-bar-stacked.d.ts +11 -0
  60. package/dist/components/ds-chart-bar-stacked.js +2 -0
  61. package/dist/components/ds-chart-bar-stacked.js.map +1 -0
  62. package/dist/components/ds-chart-bar.js +1 -1
  63. package/dist/components/ds-chart-bar.js.map +1 -1
  64. package/dist/components/ds-chart-donut.js +1 -1
  65. package/dist/components/ds-chart-legend.js +1 -1
  66. package/dist/components/ds-chart-legend.js.map +1 -1
  67. package/dist/components/ds-chart-line.js +1 -1
  68. package/dist/components/ds-chart-line.js.map +1 -1
  69. package/dist/components/ds-checkbox.js +1 -1
  70. package/dist/components/ds-chip.js +1 -1
  71. package/dist/components/ds-code-block.js +1 -1
  72. package/dist/components/ds-conversation-list-item.js +1 -1
  73. package/dist/components/ds-conversation-list-item.js.map +1 -1
  74. package/dist/components/ds-conversation-list-section.js +1 -1
  75. package/dist/components/ds-conversation-list.js +1 -1
  76. package/dist/components/ds-divider.js +1 -1
  77. package/dist/components/ds-empty-state.js +1 -1
  78. package/dist/components/ds-field.js +1 -1
  79. package/dist/components/ds-input.js +1 -1
  80. package/dist/components/ds-markdown.js +1 -1
  81. package/dist/components/ds-menu.js +1 -1
  82. package/dist/components/ds-message-bubble.js +1 -1
  83. package/dist/components/ds-message-bubble.js.map +1 -1
  84. package/dist/components/ds-message-composer.js +1 -1
  85. package/dist/components/ds-message-scroller.js +1 -1
  86. package/dist/components/ds-message-scroller.js.map +1 -1
  87. package/dist/components/ds-message.js +1 -1
  88. package/dist/components/ds-modal.js +1 -1
  89. package/dist/components/ds-modal.js.map +1 -1
  90. package/dist/components/ds-panel-nav.js +1 -1
  91. package/dist/components/ds-panel-nav.js.map +1 -1
  92. package/dist/components/ds-panel-sub-nav.js +1 -1
  93. package/dist/components/ds-panel-tool-header.js +1 -1
  94. package/dist/components/ds-panel-tool-search.js +1 -1
  95. package/dist/components/ds-panel-tools.js +1 -1
  96. package/dist/components/ds-panel-tools.js.map +1 -1
  97. package/dist/components/ds-radio.js +1 -1
  98. package/dist/components/ds-scroll-overlay.js +1 -1
  99. package/dist/components/ds-scroll-overlay.js.map +1 -1
  100. package/dist/components/ds-select-multi.js +1 -1
  101. package/dist/components/ds-select-multi.js.map +1 -1
  102. package/dist/components/ds-select.js +1 -1
  103. package/dist/components/ds-select.js.map +1 -1
  104. package/dist/components/ds-shell-app.js +1 -1
  105. package/dist/components/ds-shell-app.js.map +1 -1
  106. package/dist/components/ds-shell-gradient-picker.js +1 -1
  107. package/dist/components/ds-shell-gradient-picker.js.map +1 -1
  108. package/dist/components/ds-shell-gradient-swatch.js +1 -1
  109. package/dist/components/ds-shell-mobile-bar.d.ts +11 -0
  110. package/dist/components/ds-shell-mobile-bar.js +2 -0
  111. package/dist/components/ds-shell-mobile-bar.js.map +1 -0
  112. package/dist/components/ds-shell-mobile-nav.d.ts +11 -0
  113. package/dist/components/ds-shell-mobile-nav.js +2 -0
  114. package/dist/components/ds-shell-mobile-nav.js.map +1 -0
  115. package/dist/components/ds-shell-mobile-section-nav.d.ts +11 -0
  116. package/dist/components/ds-shell-mobile-section-nav.js +2 -0
  117. package/dist/components/ds-shell-mobile-section-nav.js.map +1 -0
  118. package/dist/components/ds-shell-page.js +1 -1
  119. package/dist/components/ds-shell-page.js.map +1 -1
  120. package/dist/components/ds-shell-tools.d.ts +11 -0
  121. package/dist/components/ds-shell-tools.js +2 -0
  122. package/dist/components/ds-shell-tools.js.map +1 -0
  123. package/dist/components/ds-skeleton.js +1 -1
  124. package/dist/components/ds-slider.js +1 -1
  125. package/dist/components/ds-slider.js.map +1 -1
  126. package/dist/components/ds-swatch-picker.js +1 -1
  127. package/dist/components/ds-switch.js +1 -1
  128. package/dist/components/ds-tab-group.js +1 -1
  129. package/dist/components/ds-tab-group.js.map +1 -1
  130. package/dist/components/ds-tag.js +1 -1
  131. package/dist/components/ds-text.js +1 -1
  132. package/dist/components/ds-toast.js +1 -1
  133. package/dist/components/ds-toast.js.map +1 -1
  134. package/dist/components/ds-tooltip-data-viz.js +1 -1
  135. package/dist/components/ds-tooltip.js +1 -1
  136. package/dist/components/ds-typing-indicator.js +1 -1
  137. package/dist/components/ds-typing-indicator.js.map +1 -1
  138. package/dist/components/{p-DcGpdIlT.js → p-9dQQSgwT.js} +2 -2
  139. package/dist/components/p-B3rbhRAk.js +2 -0
  140. package/dist/components/p-B3rbhRAk.js.map +1 -0
  141. package/dist/components/p-B6Vuayt6.js +2 -0
  142. package/dist/components/p-B6Vuayt6.js.map +1 -0
  143. package/dist/components/{p-BWUTr_XN.js → p-BJMRBHKW.js} +2 -2
  144. package/dist/components/p-BJMRBHKW.js.map +1 -0
  145. package/dist/components/p-BPS9VExm.js +2 -0
  146. package/dist/components/{p-CCHqsF_H.js.map → p-BPS9VExm.js.map} +1 -1
  147. package/dist/components/p-BVV_rlIP.js +2 -0
  148. package/dist/components/p-BVV_rlIP.js.map +1 -0
  149. package/dist/components/{p-GMDGgtY8.js → p-BhxwpOH8.js} +2 -2
  150. package/dist/components/{p-2W-ZjZCR.js → p-Biz6xo-z.js} +2 -2
  151. package/dist/components/p-BrusnEYP.js +2 -0
  152. package/dist/components/p-BrusnEYP.js.map +1 -0
  153. package/dist/components/{p-CG5EX4NW.js → p-BtEjlcB9.js} +2 -2
  154. package/dist/components/{p-C0_8K4y7.js → p-BwGnhInj.js} +2 -2
  155. package/dist/components/p-BwGnhInj.js.map +1 -0
  156. package/dist/components/{p-D6jK2Hyi.js → p-C7bZ-jiU.js} +2 -2
  157. package/dist/components/p-CH3w-P2H.js +2 -0
  158. package/dist/components/p-CH3w-P2H.js.map +1 -0
  159. package/dist/components/{p-DOCKtrS4.js → p-CH6cNXXF.js} +2 -2
  160. package/dist/components/{p-BE_CDJeL.js → p-CY19gMiz.js} +2 -2
  161. package/dist/components/p-C_0Q8Cnp.js +2 -0
  162. package/dist/components/{p-Dg3xLna0.js.map → p-C_0Q8Cnp.js.map} +1 -1
  163. package/dist/components/p-C_ewSXTT.js +2 -0
  164. package/dist/components/p-C_ewSXTT.js.map +1 -0
  165. package/dist/components/{p-CHkI3oIS.js → p-Ce52yVXF.js} +2 -2
  166. package/dist/components/p-CgHTNfC1.js +2 -0
  167. package/dist/components/p-CgHTNfC1.js.map +1 -0
  168. package/dist/components/p-Co8hD3P-.js +2 -0
  169. package/dist/components/{p-Cxpl-rzP.js.map → p-Co8hD3P-.js.map} +1 -1
  170. package/dist/components/{p-xY3TjBF5.js → p-CoYFJD-w.js} +2 -2
  171. package/dist/components/{p-DBi1bmOL.js → p-CtD24EyI.js} +2 -2
  172. package/dist/components/{p-BRLDJmkh.js → p-D-xttdpn.js} +2 -2
  173. package/dist/components/{p-CNffejay.js → p-DSa0Hnd3.js} +2 -2
  174. package/dist/components/p-DXewjzkM.js +2 -0
  175. package/dist/components/p-DXewjzkM.js.map +1 -0
  176. package/dist/components/p-DXnFhmZF.js +2 -0
  177. package/dist/components/{p-BpA9uYKX.js.map → p-DXnFhmZF.js.map} +1 -1
  178. package/dist/components/{p-DyGB97Oy.js → p-DYqReipj.js} +2 -2
  179. package/dist/components/{p-ky1msbJ8.js → p-DjPZxzIG.js} +2 -2
  180. package/dist/components/{p-ky1msbJ8.js.map → p-DjPZxzIG.js.map} +1 -1
  181. package/dist/components/p-NUNsefU1.js +2 -0
  182. package/dist/components/{p-8OOCLGph.js.map → p-NUNsefU1.js.map} +1 -1
  183. package/dist/components/p-PZ6R_nGI.js +2 -0
  184. package/dist/components/p-PZ6R_nGI.js.map +1 -0
  185. package/dist/components/{p-B8CubPgQ.js → p-g40DTeV8.js} +2 -2
  186. package/dist/components/p-jCWtxthA.js +2 -0
  187. package/dist/components/{p-XgIQ3oI_.js.map → p-jCWtxthA.js.map} +1 -1
  188. package/dist/components/p-yhj1lIPx.js +2 -0
  189. package/dist/components/p-yhj1lIPx.js.map +1 -0
  190. package/dist/docs/components.json +8860 -6021
  191. package/dist/lib/components/BarNav/bar-nav-types.d.ts +2 -0
  192. package/dist/lib/components/PanelNav/panel-nav-types.d.ts +29 -0
  193. package/dist/lib/components/PanelTools/panel-tools-types.d.ts +40 -0
  194. package/dist/lib/components/TabGroup/tab-item-utils.d.ts +31 -0
  195. package/dist/lib/shell/index.d.ts +5 -0
  196. package/dist/lib/shell/index.js +36 -0
  197. package/dist/lib/shell/index.js.map +3 -3
  198. package/dist/lib/shell/shell-responsive.d.ts +13 -0
  199. package/dist/lib/utils/index.js +3 -1
  200. package/dist/lib/utils/index.js.map +2 -2
  201. package/dist/mcp/cli.js +142 -18
  202. package/dist/mcp-data/registry/agent-source-list.json +1 -1
  203. package/dist/mcp-data/registry/bar-title.json +68 -14
  204. package/dist/mcp-data/registry/breadcrumb.json +205 -0
  205. package/dist/mcp-data/registry/card-data-viz-bar.json +212 -0
  206. package/dist/mcp-data/registry/card-data-viz-line.json +206 -0
  207. package/dist/mcp-data/registry/card-shell-data-viz.json +7 -0
  208. package/dist/mcp-data/registry/chart-bar-stacked.json +225 -0
  209. package/dist/mcp-data/registry/chart-bar.json +9 -2
  210. package/dist/mcp-data/registry/chart-legend.json +29 -3
  211. package/dist/mcp-data/registry/chart-line.json +4 -2
  212. package/dist/mcp-data/registry/conversation-list-item.json +3 -3
  213. package/dist/mcp-data/registry/message-scroller.json +4 -2
  214. package/dist/mcp-data/registry/message.json +3 -2
  215. package/dist/mcp-data/registry/modal.json +1 -1
  216. package/dist/mcp-data/registry/registry.json +1107 -44
  217. package/dist/mcp-data/registry/shell-app.json +71 -11
  218. package/dist/mcp-data/registry/shell-mobile-bar.json +314 -0
  219. package/dist/mcp-data/registry/shell-mobile-nav.json +348 -0
  220. package/dist/mcp-data/registry/shell-mobile-section-nav.json +267 -0
  221. package/dist/mcp-data/registry/shell-page.json +31 -13
  222. package/dist/mcp-data/registry/shell-tools.json +450 -0
  223. package/dist/mcp-data/registry/text.json +1 -1
  224. package/dist/mcp-data/registry/typing-indicator.json +7 -7
  225. package/dist/react/components.d.ts +8 -0
  226. package/dist/react/components.js +8 -0
  227. package/dist/react/ds-bar-title.d.ts +2 -1
  228. package/dist/react/ds-bar-title.js +1 -0
  229. package/dist/react/ds-breadcrumb.d.ts +12 -0
  230. package/dist/react/ds-breadcrumb.js +12 -0
  231. package/dist/react/ds-card-data-viz-bar.d.ts +12 -0
  232. package/dist/react/ds-card-data-viz-bar.js +12 -0
  233. package/dist/react/ds-card-data-viz-line.d.ts +12 -0
  234. package/dist/react/ds-card-data-viz-line.js +12 -0
  235. package/dist/react/ds-chart-bar-stacked.d.ts +9 -0
  236. package/dist/react/ds-chart-bar-stacked.js +12 -0
  237. package/dist/react/ds-shell-app.d.ts +7 -2
  238. package/dist/react/ds-shell-app.js +1 -1
  239. package/dist/react/ds-shell-mobile-bar.d.ts +13 -0
  240. package/dist/react/ds-shell-mobile-bar.js +15 -0
  241. package/dist/react/ds-shell-mobile-nav.d.ts +15 -0
  242. package/dist/react/ds-shell-mobile-nav.js +17 -0
  243. package/dist/react/ds-shell-mobile-section-nav.d.ts +12 -0
  244. package/dist/react/ds-shell-mobile-section-nav.js +12 -0
  245. package/dist/react/ds-shell-tools.d.ts +25 -0
  246. package/dist/react/ds-shell-tools.js +17 -0
  247. package/dist/styles/prose.css +1 -0
  248. package/dist/types/components/BarTitle/BarTitle.d.ts +13 -1
  249. package/dist/types/components/Breadcrumb/Breadcrumb.d.ts +31 -0
  250. package/dist/types/components/Breadcrumb/breadcrumb-types.d.ts +17 -0
  251. package/dist/types/components/CardDataVizBar/CardDataVizBar.d.ts +24 -0
  252. package/dist/types/components/CardDataVizBar/index.d.ts +2 -0
  253. package/dist/types/components/CardDataVizLine/CardDataVizLine.d.ts +24 -0
  254. package/dist/types/components/CardDataVizLine/index.d.ts +2 -0
  255. package/dist/types/components/ChartBarStacked/ChartBarStacked.d.ts +15 -0
  256. package/dist/types/components/ChartBarStacked/index.d.ts +3 -0
  257. package/dist/types/components/ChartLegend/ChartLegend.d.ts +3 -0
  258. package/dist/types/components/ShellApp/ShellApp.d.ts +16 -0
  259. package/dist/types/components/ShellMobileBar/ShellMobileBar.d.ts +25 -0
  260. package/dist/types/components/ShellMobileBar/index.d.ts +4 -0
  261. package/dist/types/components/ShellMobileBar/shell-mobile-bar-types.d.ts +5 -0
  262. package/dist/types/components/ShellMobileNav/ShellMobileNav.d.ts +32 -0
  263. package/dist/types/components/ShellMobileNav/index.d.ts +2 -0
  264. package/dist/types/components/ShellMobileNav/shell-mobile-nav-types.d.ts +6 -0
  265. package/dist/types/components/ShellMobileSectionNav/ShellMobileSectionNav.d.ts +30 -0
  266. package/dist/types/components/ShellMobileSectionNav/index.d.ts +2 -0
  267. package/dist/types/components/ShellPage/ShellPage.d.ts +19 -7
  268. package/dist/types/components/ShellPage/shell-page-responsive.d.ts +0 -8
  269. package/dist/types/components/ShellTools/ShellTools.d.ts +61 -0
  270. package/dist/types/components/ShellTools/index.d.ts +3 -0
  271. package/dist/types/components/TypingIndicator/TypingIndicator.d.ts +1 -1
  272. package/dist/types/components.d.ts +953 -19
  273. package/dist/types/shell/index.d.ts +5 -0
  274. package/dist/types/shell/shell-responsive.d.ts +14 -0
  275. package/package.json +1 -1
  276. package/dist/components/p-8OOCLGph.js +0 -2
  277. package/dist/components/p-BWUTr_XN.js.map +0 -1
  278. package/dist/components/p-BpA9uYKX.js +0 -2
  279. package/dist/components/p-C0_8K4y7.js.map +0 -1
  280. package/dist/components/p-CA3kLO7K.js +0 -2
  281. package/dist/components/p-CA3kLO7K.js.map +0 -1
  282. package/dist/components/p-CCHqsF_H.js +0 -2
  283. package/dist/components/p-Cxpl-rzP.js +0 -2
  284. package/dist/components/p-CzBnvtcz.js +0 -2
  285. package/dist/components/p-CzBnvtcz.js.map +0 -1
  286. package/dist/components/p-Dg3xLna0.js +0 -2
  287. package/dist/components/p-XgIQ3oI_.js +0 -2
  288. /package/dist/components/{p-DcGpdIlT.js.map → p-9dQQSgwT.js.map} +0 -0
  289. /package/dist/components/{p-GMDGgtY8.js.map → p-BhxwpOH8.js.map} +0 -0
  290. /package/dist/components/{p-2W-ZjZCR.js.map → p-Biz6xo-z.js.map} +0 -0
  291. /package/dist/components/{p-CG5EX4NW.js.map → p-BtEjlcB9.js.map} +0 -0
  292. /package/dist/components/{p-D6jK2Hyi.js.map → p-C7bZ-jiU.js.map} +0 -0
  293. /package/dist/components/{p-DOCKtrS4.js.map → p-CH6cNXXF.js.map} +0 -0
  294. /package/dist/components/{p-BE_CDJeL.js.map → p-CY19gMiz.js.map} +0 -0
  295. /package/dist/components/{p-CHkI3oIS.js.map → p-Ce52yVXF.js.map} +0 -0
  296. /package/dist/components/{p-xY3TjBF5.js.map → p-CoYFJD-w.js.map} +0 -0
  297. /package/dist/components/{p-DBi1bmOL.js.map → p-CtD24EyI.js.map} +0 -0
  298. /package/dist/components/{p-BRLDJmkh.js.map → p-D-xttdpn.js.map} +0 -0
  299. /package/dist/components/{p-CNffejay.js.map → p-DSa0Hnd3.js.map} +0 -0
  300. /package/dist/components/{p-DyGB97Oy.js.map → p-DYqReipj.js.map} +0 -0
  301. /package/dist/components/{p-B8CubPgQ.js.map → p-g40DTeV8.js.map} +0 -0
@@ -1,2 +1,2 @@
1
- import{p as e,H as s,h as t,a,t as o}from"./index.js";import{S as d}from"./p-BE_CDJeL.js";const r=()=>`@property --ds-scroll-edge-fade-top{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-bottom{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-left{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-right{syntax:'<length-percentage>';inherits:false;initial-value:0px}@keyframes ds-scroll-edge-fade-reveal-top{from{--ds-scroll-edge-fade-top:0px}to{--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top)}}@keyframes ds-scroll-edge-fade-reveal-bottom{from{--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom)}to{--ds-scroll-edge-fade-bottom:0px}}@keyframes ds-scroll-edge-fade-reveal-left{from{--ds-scroll-edge-fade-left:0px}to{--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left)}}@keyframes ds-scroll-edge-fade-reveal-right{from{--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right)}to{--ds-scroll-edge-fade-right:0px}}.scroll-edge-fade.sc-ds-conversation-list{--ds-scroll-edge-fade-size:var(--dimension-size-600);--ds-scroll-edge-fade-reveal-distance:var(--dimension-size-800);--ds-scroll-edge-fade-target-top:0px;--ds-scroll-edge-fade-target-bottom:0px;--ds-scroll-edge-fade-target-left:0px;--ds-scroll-edge-fade-target-right:0px;--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top);--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom);--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left);--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right);--ds-scroll-edge-fade-block-mask:linear-gradient( to bottom, transparent 0, #000 var(--ds-scroll-edge-fade-top), #000 calc(100% - var(--ds-scroll-edge-fade-bottom)), transparent 100% );--ds-scroll-edge-fade-inline-mask:linear-gradient( to right, transparent 0, #000 var(--ds-scroll-edge-fade-left), #000 calc(100% - var(--ds-scroll-edge-fade-right)), transparent 100% );-webkit-mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--top.sc-ds-conversation-list{--ds-scroll-edge-fade-target-top:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--bottom.sc-ds-conversation-list{--ds-scroll-edge-fade-target-bottom:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--left.sc-ds-conversation-list{--ds-scroll-edge-fade-target-left:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--right.sc-ds-conversation-list{--ds-scroll-edge-fade-target-right:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--top-at-edge.sc-ds-conversation-list{--ds-scroll-edge-fade-target-top:0px}.scroll-edge-fade--bottom-at-edge.sc-ds-conversation-list{--ds-scroll-edge-fade-target-bottom:0px}.scroll-edge-fade--left-at-edge.sc-ds-conversation-list{--ds-scroll-edge-fade-target-left:0px}.scroll-edge-fade--right-at-edge.sc-ds-conversation-list{--ds-scroll-edge-fade-target-right:0px}@supports (animation-timeline: scroll()){.scroll-edge-fade--scroll-aware.sc-ds-conversation-list{animation-name:ds-scroll-edge-fade-reveal-top, ds-scroll-edge-fade-reveal-bottom, ds-scroll-edge-fade-reveal-left, ds-scroll-edge-fade-reveal-right;animation-duration:1ms;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-timeline:scroll(self y), scroll(self y), scroll(self x), scroll(self x);animation-range:0 var(--ds-scroll-edge-fade-reveal-distance), calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%, 0 var(--ds-scroll-edge-fade-reveal-distance), calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%}@media (prefers-reduced-motion: reduce){.scroll-edge-fade--scroll-aware.sc-ds-conversation-list{animation:none}}}.scroll-edge-fade--at-end.sc-ds-conversation-list,.scroll-edge-fade--hidden.sc-ds-conversation-list{-webkit-mask-image:none;mask-image:none}.scroll-edge-fade--block-window.sc-ds-conversation-list{--ds-scroll-edge-fade-window-start:100%;--ds-scroll-edge-fade-window-end:100%;-webkit-mask-image:linear-gradient( to bottom, #000 0, #000 var(--ds-scroll-edge-fade-window-start), transparent var(--ds-scroll-edge-fade-window-end) );mask-image:linear-gradient( to bottom, #000 0, #000 var(--ds-scroll-edge-fade-window-start), transparent var(--ds-scroll-edge-fade-window-end) );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}`;const l=()=>`.sc-ds-conversation-list-h{display:block;position:relative;width:100%;height:100%;min-height:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}.conversation-list.sc-ds-conversation-list{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:0;box-sizing:border-box}.conversation-list__viewport.sc-ds-conversation-list{position:relative;flex:1 1 auto;min-height:0;overflow:auto;box-sizing:border-box}.conversation-list__content.sc-ds-conversation-list{position:relative;min-height:100%;padding:var(--dimension-space-100);padding-bottom:calc( var(--dimension-space-100) + var(--ds-scroll-overlay-block-size, 0px) );box-sizing:border-box}.conversation-list__fade.sc-ds-conversation-list{position:absolute;right:0;bottom:0;left:0;z-index:1;height:var(--ds-scroll-overlay-fade-block-size, 0);pointer-events:none;background-color:var( --ds-scroll-overlay-surface-color, var(--_shell-chrome-bg, var(--color-background-primary)) );--ds-scroll-edge-fade-size:100%}.conversation-list__fade.sc-ds-conversation-list::before{content:'';position:absolute;inset:0;background-image:var( --ds-scroll-overlay-surface-image, var(--ds-shell-gradient-image, none) );background-position:var(--ds-scroll-overlay-surface-position, 0 0);background-attachment:fixed;background-size:var( --ds-scroll-overlay-surface-size, var(--ds-shell-gradient-size, auto) );background-repeat:no-repeat;opacity:var( --ds-scroll-overlay-surface-image-opacity, var(--ds-shell-gradient-opacity, 1) )}.conversation-list__empty.sc-ds-conversation-list{display:contents}.conversation-list__actions.sc-ds-conversation-list{position:absolute;right:0;bottom:0;z-index:var(--dimension-z-index-floating);padding:0 var(--dimension-space-200) var(--dimension-space-200) 0}.conversation-list__actions--footer.sc-ds-conversation-list{left:0;padding:0 var(--dimension-space-100) var(--dimension-space-100)}.conversation-list__actions-surface.sc-ds-conversation-list{display:flex;border-radius:var(--dimension-radius-half);box-shadow:var(--effect-elevation-elevated-md)}.conversation-list__actions--footer.sc-ds-conversation-list .conversation-list__actions-surface.sc-ds-conversation-list{width:100%}.conversation-list__actions-surface.sc-ds-conversation-list:empty{display:none}`;const i=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.actionLayout="floating";this.syncEmptyStateLayout=()=>{const e=this.el.querySelector('[slot="empty"]');if(e){e.style.setProperty("position","absolute");e.style.setProperty("inset-block-start","0");e.style.setProperty("inset-inline","0");e.style.setProperty("inset-block-end","var(--ds-scroll-overlay-block-size, 0)");e.style.setProperty("height","auto");e.style.setProperty("box-sizing","border-box")}this.scrollOverlayController?.sync()}}componentDidLoad(){if(!this.viewport||!this.content||!this.overlay)return;this.scrollOverlayController=new d({host:this.el,viewport:this.viewport,content:this.content,overlay:this.overlay,overlayContentSelector:'[slot="actions"]'});this.scrollOverlayController.connect();this.syncEmptyStateLayout();this.emptySlotObserver=new MutationObserver(this.syncEmptyStateLayout);this.emptySlotObserver.observe(this.el,{childList:true,subtree:true})}disconnectedCallback(){this.scrollOverlayController?.disconnect();this.emptySlotObserver?.disconnect()}render(){return t(a,{key:"e84187fa23d60be4e93406b4a7be9eb91ed781f0"},t("div",{key:"62de8ac94d66a49855addbf46a85e9c81d2b579a",class:"conversation-list"},t("div",{key:"71bcb32e4fa0974cdbb7c1f7c308622c743ba6b5",class:"conversation-list__viewport",ref:e=>{this.viewport=e},onScroll:()=>this.scrollOverlayController?.sync()},t("div",{key:"e2675890e8cd1259a229a2421ed9eb0cf7d1df64",class:"conversation-list__content",ref:e=>{this.content=e}},t("slot",{key:"cbf1e9897fe27a78d02accdd0998df1b5e18dbad"}),t("div",{key:"b857969ab47b5e2301db65d73d7773d13218916a",class:"conversation-list__empty"},t("slot",{key:"86cf1ac34f0738edf5c29cd021d20a6d9ee93f4d",name:"empty"})))),t("div",{key:"8c244d5cb540ad7f68f4548835a000f5c90bfc82",class:"conversation-list__fade scroll-edge-fade scroll-edge-fade--top","aria-hidden":"true"}),t("div",{key:"d1007602abfe971a98d0135b6355a474a9154b24",class:{"conversation-list__actions":true,"conversation-list__actions--footer":this.actionLayout==="footer"},ref:e=>{this.overlay=e}},t("div",{key:"b6a1e7f4e5a12dc8c971e54652f09bf68c482d1f",class:"conversation-list__actions-surface"},t("slot",{key:"68402e4fe3ea9cedecdaba3ca2fa1c6010c1a963",name:"actions"})))))}get el(){return this}static get style(){return r()+l()}},[262,"ds-conversation-list",{actionLayout:[1,"action-layout"]}]);function n(){if(typeof customElements==="undefined"){return}const e=["ds-conversation-list"];e.forEach((e=>{switch(e){case"ds-conversation-list":if(!customElements.get(o(e))){customElements.define(o(e),i)}break}}))}n();const c=i;const f=n;export{c as DsConversationList,f as defineCustomElement};
1
+ import{p as e,H as s,h as t,a,t as o}from"./index.js";import{S as r}from"./p-CY19gMiz.js";const d=()=>`@property --ds-scroll-edge-fade-top{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-bottom{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-left{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-right{syntax:'<length-percentage>';inherits:false;initial-value:0px}@keyframes ds-scroll-edge-fade-reveal-top{from{--ds-scroll-edge-fade-top:0px}to{--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top)}}@keyframes ds-scroll-edge-fade-reveal-bottom{from{--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom)}to{--ds-scroll-edge-fade-bottom:0px}}@keyframes ds-scroll-edge-fade-reveal-left{from{--ds-scroll-edge-fade-left:0px}to{--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left)}}@keyframes ds-scroll-edge-fade-reveal-right{from{--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right)}to{--ds-scroll-edge-fade-right:0px}}.scroll-edge-fade.sc-ds-conversation-list{--ds-scroll-edge-fade-size:var(--dimension-size-600);--ds-scroll-edge-fade-reveal-distance:var(--dimension-size-800);--ds-scroll-edge-fade-target-top:0px;--ds-scroll-edge-fade-target-bottom:0px;--ds-scroll-edge-fade-target-left:0px;--ds-scroll-edge-fade-target-right:0px;--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top);--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom);--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left);--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right);--ds-scroll-edge-fade-block-mask:linear-gradient( to bottom, transparent 0, #000 var(--ds-scroll-edge-fade-top), #000 calc(100% - var(--ds-scroll-edge-fade-bottom)), transparent 100% );--ds-scroll-edge-fade-inline-mask:linear-gradient( to right, transparent 0, #000 var(--ds-scroll-edge-fade-left), #000 calc(100% - var(--ds-scroll-edge-fade-right)), transparent 100% );-webkit-mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--top.sc-ds-conversation-list{--ds-scroll-edge-fade-target-top:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--bottom.sc-ds-conversation-list{--ds-scroll-edge-fade-target-bottom:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--left.sc-ds-conversation-list{--ds-scroll-edge-fade-target-left:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--right.sc-ds-conversation-list{--ds-scroll-edge-fade-target-right:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--top-at-edge.sc-ds-conversation-list{--ds-scroll-edge-fade-target-top:0px}.scroll-edge-fade--bottom-at-edge.sc-ds-conversation-list{--ds-scroll-edge-fade-target-bottom:0px}.scroll-edge-fade--left-at-edge.sc-ds-conversation-list{--ds-scroll-edge-fade-target-left:0px}.scroll-edge-fade--right-at-edge.sc-ds-conversation-list{--ds-scroll-edge-fade-target-right:0px}@supports (animation-timeline: scroll()){.scroll-edge-fade--scroll-aware.sc-ds-conversation-list{animation-name:ds-scroll-edge-fade-reveal-top, ds-scroll-edge-fade-reveal-bottom, ds-scroll-edge-fade-reveal-left, ds-scroll-edge-fade-reveal-right;animation-duration:1ms;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-timeline:scroll(self y), scroll(self y), scroll(self x), scroll(self x);animation-range:0 var(--ds-scroll-edge-fade-reveal-distance), calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%, 0 var(--ds-scroll-edge-fade-reveal-distance), calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%}@media (prefers-reduced-motion: reduce){.scroll-edge-fade--scroll-aware.sc-ds-conversation-list{animation:none}}}.scroll-edge-fade--at-end.sc-ds-conversation-list,.scroll-edge-fade--hidden.sc-ds-conversation-list{-webkit-mask-image:none;mask-image:none}.scroll-edge-fade--block-window.sc-ds-conversation-list{--ds-scroll-edge-fade-window-start:100%;--ds-scroll-edge-fade-window-end:100%;-webkit-mask-image:linear-gradient( to bottom, #000 0, #000 var(--ds-scroll-edge-fade-window-start), transparent var(--ds-scroll-edge-fade-window-end) );mask-image:linear-gradient( to bottom, #000 0, #000 var(--ds-scroll-edge-fade-window-start), transparent var(--ds-scroll-edge-fade-window-end) );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}`;const i=()=>`.sc-ds-conversation-list-h{display:block;position:relative;width:100%;height:100%;min-height:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}.conversation-list.sc-ds-conversation-list{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:0;box-sizing:border-box}.conversation-list__viewport.sc-ds-conversation-list{position:relative;flex:1 1 auto;min-height:0;overflow:auto;box-sizing:border-box}.conversation-list__content.sc-ds-conversation-list{position:relative;min-height:100%;padding:var(--dimension-space-100);padding-bottom:calc( var(--dimension-space-100) + var(--ds-scroll-overlay-block-size, 0px) );box-sizing:border-box}.conversation-list__fade.sc-ds-conversation-list{position:absolute;right:0;bottom:0;left:0;z-index:1;height:var(--ds-scroll-overlay-fade-block-size, 0);pointer-events:none;background-color:var( --ds-scroll-overlay-surface-color, var(--_shell-chrome-bg, var(--color-background-primary)) );--ds-scroll-edge-fade-size:100%}.conversation-list__fade.sc-ds-conversation-list::before{content:'';position:absolute;inset:0;background-image:var( --ds-scroll-overlay-surface-image, var(--ds-shell-gradient-image, none) );background-position:var(--ds-scroll-overlay-surface-position, 0 0);background-attachment:fixed;background-size:var( --ds-scroll-overlay-surface-size, var(--ds-shell-gradient-size, auto) );background-repeat:no-repeat;opacity:var( --ds-scroll-overlay-surface-image-opacity, var(--ds-shell-gradient-opacity, 1) )}.conversation-list__empty.sc-ds-conversation-list{display:contents}.conversation-list__actions.sc-ds-conversation-list{position:absolute;right:0;bottom:0;z-index:var(--dimension-z-index-floating);padding:0 var(--dimension-space-200) var(--dimension-space-200) 0}.conversation-list__actions--footer.sc-ds-conversation-list{left:0;padding:0 var(--dimension-space-100) var(--dimension-space-100)}.conversation-list__actions-surface.sc-ds-conversation-list{display:flex;border-radius:var(--dimension-radius-half);box-shadow:var(--effect-elevation-elevated-md)}.conversation-list__actions--footer.sc-ds-conversation-list .conversation-list__actions-surface.sc-ds-conversation-list{width:100%}.conversation-list__actions-surface.sc-ds-conversation-list:empty{display:none}`;const l=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.actionLayout="floating";this.syncEmptyStateLayout=()=>{const e=this.el.querySelector('[slot="empty"]');if(e){e.style.setProperty("position","absolute");e.style.setProperty("inset-block-start","0");e.style.setProperty("inset-inline","0");e.style.setProperty("inset-block-end","var(--ds-scroll-overlay-block-size, 0)");e.style.setProperty("height","auto");e.style.setProperty("box-sizing","border-box")}this.scrollOverlayController?.sync()}}componentDidLoad(){if(!this.viewport||!this.content||!this.overlay)return;this.scrollOverlayController=new r({host:this.el,viewport:this.viewport,content:this.content,overlay:this.overlay,overlayContentSelector:'[slot="actions"]'});this.scrollOverlayController.connect();this.syncEmptyStateLayout();this.emptySlotObserver=new MutationObserver(this.syncEmptyStateLayout);this.emptySlotObserver.observe(this.el,{childList:true,subtree:true})}disconnectedCallback(){this.scrollOverlayController?.disconnect();this.emptySlotObserver?.disconnect()}render(){return t(a,{key:"7e6366e7d7526da6864c1ad872c8c9be19ca1554"},t("div",{key:"701840b493d07e36930fa5c923428f06c17100bf",class:"conversation-list"},t("div",{key:"d1bcbe57f8102f002d167bae12aca086b2eeb7c8",class:"conversation-list__viewport",ref:e=>{this.viewport=e},onScroll:()=>this.scrollOverlayController?.sync()},t("div",{key:"f7132e4126f5c467f61127a02eb7bc936185f8ee",class:"conversation-list__content",ref:e=>{this.content=e}},t("slot",{key:"4591e2cd2ea034566c76db18f661027c1eadcb2a"}),t("div",{key:"7487e4e663d1316e317343d4940db0104929b9aa",class:"conversation-list__empty"},t("slot",{key:"ed11cd90da3ae44473633a7ad964e3548f5c5a6c",name:"empty"})))),t("div",{key:"14b51099a615fcf4f032b0617fe31ae5c63219bf",class:"conversation-list__fade scroll-edge-fade scroll-edge-fade--top","aria-hidden":"true"}),t("div",{key:"d8c7297ea9ff7d57b7c6e4b10bb4e5b74aec482d",class:{"conversation-list__actions":true,"conversation-list__actions--footer":this.actionLayout==="footer"},ref:e=>{this.overlay=e}},t("div",{key:"d69bf3b2c4ab800599322be67348275878e3fe49",class:"conversation-list__actions-surface"},t("slot",{key:"ddb7d162726fb9628f793b46d84a37eb5378569e",name:"actions"})))))}get el(){return this}static get style(){return d()+i()}},[262,"ds-conversation-list",{actionLayout:[1,"action-layout"]}]);function n(){if(typeof customElements==="undefined"){return}const e=["ds-conversation-list"];e.forEach((e=>{switch(e){case"ds-conversation-list":if(!customElements.get(o(e))){customElements.define(o(e),l)}break}}))}n();const c=l;const f=n;export{c as DsConversationList,f as defineCustomElement};
2
2
  //# sourceMappingURL=ds-conversation-list.js.map
@@ -1,2 +1,2 @@
1
- import{D as o,d as s}from"./p-D6jK2Hyi.js";const t=o;const p=s;export{t as DsDivider,p as defineCustomElement};
1
+ import{D as o,d as s}from"./p-C7bZ-jiU.js";const t=o;const p=s;export{t as DsDivider,p as defineCustomElement};
2
2
  //# sourceMappingURL=ds-divider.js.map
@@ -1,2 +1,2 @@
1
- import{E as o,d as s}from"./p-XgIQ3oI_.js";const t=o;const p=s;export{t as DsEmptyState,p as defineCustomElement};
1
+ import{E as t,d as o}from"./p-jCWtxthA.js";const s=t;const p=o;export{s as DsEmptyState,p as defineCustomElement};
2
2
  //# sourceMappingURL=ds-empty-state.js.map
@@ -1,2 +1,2 @@
1
- import{p as e,H as t,h as i,a as s,t as d}from"./index.js";import{d as n}from"./p-C0_8K4y7.js";const r=()=>`.sc-ds-field-h{display:block}.field.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.field__control.sc-ds-field{display:flex;min-width:0}.field__control.sc-ds-field>*.sc-ds-field{width:100%}`;let a=0;const o=e=>e?.split(/\s+/).filter(Boolean)??[];const l=(...e)=>[...new Set(e.flat())];const h=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.error=false;this.focused=false;this.filled=false;this.dirty=false;this.touched=false;this.controlDisabled=false;this.controlRequired=false;this.generatedId=`ds-field-${++a}`;this.initialValue="";this.authoredAria=new WeakMap;this.syncControl=()=>{const e=this.findControl();if(!e)return;if(e!==this.control){this.control=e;this.initialValue=this.readValue(e);this.authoredAria.set(e,{labelledby:o(e.getAttribute("aria-labelledby")),describedby:o(e.getAttribute("aria-describedby"))})}const t=e.tagName.startsWith("DS-");if(t&&"inputId"in e)e.inputId=this.controlId;else this.updateControlAttribute(e,"id",this.controlId);const i=this.authoredAria.get(e)??{labelledby:[],describedby:[]};const s=l(i.labelledby,[this.labelId]).join(" ");const d=l(i.describedby,this.renderedDescription?[this.descriptionId]:[],this.renderedError?[this.errorId]:[]).join(" ");this.updateControlAttribute(e,"aria-labelledby",s);this.updateControlAttribute(e,"aria-describedby",d||undefined);this.updateControlAttribute(e,"aria-invalid",this.error?"true":undefined);if(t&&"error"in e&&e.error!==this.error)e.error=this.error;const n=this.readValue(e);this.filled=n.length>0;this.dirty=n!==this.initialValue;this.controlDisabled=Boolean(e.disabled||e.isInactive||e.hasAttribute("disabled"));this.controlRequired=Boolean(e.required||e.hasAttribute("required"))};this.handleLabelClick=e=>{if(!this.control?.tagName.startsWith("DS-"))return;e.preventDefault();this.control.setFocus?.()};this.handleFocusIn=()=>{this.focused=true};this.handleFocusOut=e=>{if(e.relatedTarget instanceof Node&&this.el.contains(e.relatedTarget))return;this.focused=false;this.touched=true};this.handleValueChange=()=>{this.syncControl()}}componentDidLoad(){this.syncControl();requestAnimationFrame((()=>this.syncControl()))}componentDidRender(){this.syncControl()}onFieldContractChange(){this.syncControl()}get controlId(){return this.fieldId||this.generatedId}get labelId(){return`${this.controlId}-label`}get descriptionId(){return`${this.controlId}-description`}get errorId(){return`${this.controlId}-error`}get renderedDescription(){return Boolean(this.description)&&!this.renderedError}get renderedError(){return this.error&&Boolean(this.errorMessage)}readValue(e){const t=e.value;return Array.isArray(t)?t.join(""):String(t??"")}updateControlAttribute(e,t,i){if(i===undefined){if(e.hasAttribute(t))e.removeAttribute(t);return}if(e.getAttribute(t)!==i)e.setAttribute(t,i)}findControl(){return this.controlContainer?.querySelector(":scope > :not(slot)")??undefined}render(){return i(s,{key:"03d2e84ee508f65b9b89f4167282dc22319114fe","data-focused":this.focused?"":undefined,"data-filled":this.filled?"":undefined,"data-dirty":this.dirty?"":undefined,"data-touched":this.touched?"":undefined,"data-invalid":this.error?"":undefined,"data-disabled":this.controlDisabled?"":undefined,"data-required":this.controlRequired?"":undefined,onFocusin:this.handleFocusIn,onFocusout:this.handleFocusOut,onInput:this.handleValueChange,onChange:this.handleValueChange,onDsChange:this.handleValueChange},i("div",{key:"a64331feb023beb1af4092e5cab63480f3b89a52",class:"field"},i("ds-text",{key:"322e6e59cdb5a20296e2451c04b54e772880f3d8",class:"field__label",as:"label",variant:"text-body-small",color:"primary",emphasis:true,for:this.controlId,textId:this.labelId,onClick:this.handleLabelClick},this.label),i("div",{key:"ae5591dd80c541e0db7db608e3ad7348b5ffed3f",class:"field__control",ref:e=>this.controlContainer=e},i("slot",{key:"e26774822ee6ab16dbce4e565c9e58c80fa01fe0",onSlotchange:this.syncControl})),this.renderedDescription&&i("ds-text",{key:"7c14ed0dbadb8219c729be75fcce04727c7cce56",class:"field__description",as:"div",variant:"text-body-small",color:"secondary",textId:this.descriptionId},this.description),this.renderedError&&i("ds-text",{key:"70f4a5804ae526f8131f83df0e251180f51d0edf",class:"field__error",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage)))}get el(){return this}static get watchers(){return{fieldId:[{onFieldContractChange:0}],description:[{onFieldContractChange:0}],error:[{onFieldContractChange:0}],errorMessage:[{onFieldContractChange:0}]}}static get style(){return r()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"],description:[1],error:[4],errorMessage:[1,"error-message"],focused:[32],filled:[32],dirty:[32],touched:[32],controlDisabled:[32],controlRequired:[32]},undefined,{fieldId:[{onFieldContractChange:0}],description:[{onFieldContractChange:0}],error:[{onFieldContractChange:0}],errorMessage:[{onFieldContractChange:0}]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-field","ds-text"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(d(e))){customElements.define(d(e),h)}break;case"ds-text":if(!customElements.get(d(e))){n()}break}}))}c();const f=h;const u=c;export{f as DsField,u as defineCustomElement};
1
+ import{p as e,H as t,h as i,a as s,t as d}from"./index.js";import{d as a}from"./p-BwGnhInj.js";const n=()=>`.sc-ds-field-h{display:block}.field.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.field__control.sc-ds-field{display:flex;min-width:0}.field__control.sc-ds-field>*.sc-ds-field{width:100%}`;let r=0;const o=e=>e?.split(/\s+/).filter(Boolean)??[];const l=(...e)=>[...new Set(e.flat())];const h=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.error=false;this.focused=false;this.filled=false;this.dirty=false;this.touched=false;this.controlDisabled=false;this.controlRequired=false;this.generatedId=`ds-field-${++r}`;this.initialValue="";this.authoredAria=new WeakMap;this.syncControl=()=>{const e=this.findControl();if(!e)return;if(e!==this.control){this.control=e;this.initialValue=this.readValue(e);this.authoredAria.set(e,{labelledby:o(e.getAttribute("aria-labelledby")),describedby:o(e.getAttribute("aria-describedby"))})}const t=e.tagName.startsWith("DS-");if(t&&"inputId"in e)e.inputId=this.controlId;else this.updateControlAttribute(e,"id",this.controlId);const i=this.authoredAria.get(e)??{labelledby:[],describedby:[]};const s=l(i.labelledby,[this.labelId]).join(" ");const d=l(i.describedby,this.renderedDescription?[this.descriptionId]:[],this.renderedError?[this.errorId]:[]).join(" ");this.updateControlAttribute(e,"aria-labelledby",s);this.updateControlAttribute(e,"aria-describedby",d||undefined);this.updateControlAttribute(e,"aria-invalid",this.error?"true":undefined);if(t&&"error"in e&&e.error!==this.error)e.error=this.error;const a=this.readValue(e);this.filled=a.length>0;this.dirty=a!==this.initialValue;this.controlDisabled=Boolean(e.disabled||e.isInactive||e.hasAttribute("disabled"));this.controlRequired=Boolean(e.required||e.hasAttribute("required"))};this.handleLabelClick=e=>{if(!this.control?.tagName.startsWith("DS-"))return;e.preventDefault();this.control.setFocus?.()};this.handleFocusIn=()=>{this.focused=true};this.handleFocusOut=e=>{if(e.relatedTarget instanceof Node&&this.el.contains(e.relatedTarget))return;this.focused=false;this.touched=true};this.handleValueChange=()=>{this.syncControl()}}componentDidLoad(){this.syncControl();requestAnimationFrame((()=>this.syncControl()))}componentDidRender(){this.syncControl()}onFieldContractChange(){this.syncControl()}get controlId(){return this.fieldId||this.generatedId}get labelId(){return`${this.controlId}-label`}get descriptionId(){return`${this.controlId}-description`}get errorId(){return`${this.controlId}-error`}get renderedDescription(){return Boolean(this.description)&&!this.renderedError}get renderedError(){return this.error&&Boolean(this.errorMessage)}readValue(e){const t=e.value;return Array.isArray(t)?t.join(""):String(t??"")}updateControlAttribute(e,t,i){if(i===undefined){if(e.hasAttribute(t))e.removeAttribute(t);return}if(e.getAttribute(t)!==i)e.setAttribute(t,i)}findControl(){return this.controlContainer?.querySelector(":scope > :not(slot)")??undefined}render(){return i(s,{key:"2d6b5e6a776aed80eab5bbaf2bd3a48cc2a799ba","data-focused":this.focused?"":undefined,"data-filled":this.filled?"":undefined,"data-dirty":this.dirty?"":undefined,"data-touched":this.touched?"":undefined,"data-invalid":this.error?"":undefined,"data-disabled":this.controlDisabled?"":undefined,"data-required":this.controlRequired?"":undefined,onFocusin:this.handleFocusIn,onFocusout:this.handleFocusOut,onInput:this.handleValueChange,onChange:this.handleValueChange,onDsChange:this.handleValueChange},i("div",{key:"7e63f2b02c77b595d6cf79abed8f33b366febb95",class:"field"},i("ds-text",{key:"89f3675f3b692c4ad95f8939d4ae75ac420ce221",class:"field__label",as:"label",variant:"text-body-small",color:"primary",emphasis:true,for:this.controlId,textId:this.labelId,onClick:this.handleLabelClick},this.label),i("div",{key:"77a8467a2cab6c2a0c466eb0fa3a542ad667793d",class:"field__control",ref:e=>this.controlContainer=e},i("slot",{key:"203a543c3aa56e202b3eca3eb1d6d29426a9f349",onSlotchange:this.syncControl})),this.renderedDescription&&i("ds-text",{key:"508830b5e7027b2f3a27623a7debdfd1b1f2a3ba",class:"field__description",as:"div",variant:"text-body-small",color:"secondary",textId:this.descriptionId},this.description),this.renderedError&&i("ds-text",{key:"cfaf9ba059b335563ce64e0aed4323cf67c9aa98",class:"field__error",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage)))}get el(){return this}static get watchers(){return{fieldId:[{onFieldContractChange:0}],description:[{onFieldContractChange:0}],error:[{onFieldContractChange:0}],errorMessage:[{onFieldContractChange:0}]}}static get style(){return n()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"],description:[1],error:[4],errorMessage:[1,"error-message"],focused:[32],filled:[32],dirty:[32],touched:[32],controlDisabled:[32],controlRequired:[32]},undefined,{fieldId:[{onFieldContractChange:0}],description:[{onFieldContractChange:0}],error:[{onFieldContractChange:0}],errorMessage:[{onFieldContractChange:0}]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-field","ds-text"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(d(e))){customElements.define(d(e),h)}break;case"ds-text":if(!customElements.get(d(e))){a()}break}}))}c();const f=h;const u=c;export{f as DsField,u as defineCustomElement};
2
2
  //# sourceMappingURL=ds-field.js.map
@@ -1,2 +1,2 @@
1
- import{p as t,H as i,c as s,h as e,a as n,t as r}from"./index.js";import{d as o}from"./p-DOCKtrS4.js";import{d as a}from"./p-xY3TjBF5.js";import{d}from"./p-BAfG3M8z.js";import{d as c}from"./p-Cpr3K41-.js";import{d as l}from"./p-C0_8K4y7.js";import{C as p}from"./p-Cx-ywr1e.js";import{c as u}from"./p-DuFm-ieS.js";const h=()=>`.ds-interaction-fill.sc-ds-input-h,.ds-interaction-fill.sc-ds-input{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-input-h::before,.ds-interaction-fill.sc-ds-input::before,.ds-interaction-fill.sc-ds-input-h::after,.ds-interaction-fill.sc-ds-input::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-input-h::before,.ds-interaction-fill.sc-ds-input::before{z-index:1}.ds-interaction-fill.sc-ds-input-h::after,.ds-interaction-fill.sc-ds-input::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-input-h,.ds-interaction-fill--bordered.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-input-h::before,.ds-interaction-fill--selected.sc-ds-input::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-input-h,.ds-interaction-fill--selected.sc-ds-input{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-input-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-input:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-input-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-input:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-input-h>.ds-interaction-fill__content.sc-ds-input,.ds-interaction-fill.sc-ds-input>.ds-interaction-fill__content.sc-ds-input,.ds-interaction-fill__content.sc-ds-input{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-input-h,.ds-interaction-fill--on-faint.sc-ds-input{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-input-h,.ds-interaction-fill--on-medium.sc-ds-input{--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-input-h,.ds-interaction-fill--on-bold.sc-ds-input{--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-input-h,.ds-interaction-fill--on-strong.sc-ds-input{--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-input-h,.ds-interaction-fill--on-translucent.sc-ds-input{--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-input-h,.ds-interaction-fill--on-inverted.sc-ds-input{--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-input-h,.ds-interaction-fill--on-media.sc-ds-input{--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-input-h,.ds-interaction-fill--on-always-dark.sc-ds-input{--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-input-h,.ds-interaction-fill--on-navigation.sc-ds-input{--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-input-h,.ds-control-inactive.sc-ds-input{opacity:0.5;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-input-h,.ds-control--md.sc-ds-input,.ds-control--sm.sc-ds-input-h,.ds-control--sm.sc-ds-input,.ds-control--xs.sc-ds-input-h,.ds-control--xs.sc-ds-input{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-input-h,.ds-control--md.sc-ds-input{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-input-h,.ds-control--sm.sc-ds-input{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-input-h,.ds-control--xs.sc-ds-input{--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-width--hug.sc-ds-input-h,.ds-control-width--hug.sc-ds-input{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-input-h,.ds-control-width--fill.sc-ds-input{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.ds-text--display-medium.sc-ds-input-h,.ds-text--display-medium.sc-ds-input{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-input-h,.ds-text--display-small.sc-ds-input{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-input-h,.ds-text--title-large.sc-ds-input{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-input-h,.ds-text--title-medium.sc-ds-input{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-input-h,.ds-text--title-small.sc-ds-input{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-input-h,.ds-text--body-large.sc-ds-input{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-input-h,.ds-text--body-medium.sc-ds-input{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-input-h,.ds-text--body-small.sc-ds-input{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-input-h,.ds-text--caption.sc-ds-input{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--display-small.ds-text--emphasis.sc-ds-input-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-input,.ds-text--display-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-input-h,.ds-text--display-small.ds-text--regular.sc-ds-input-h,.ds-text--display-medium.ds-text--regular.sc-ds-input,.ds-text--display-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-input-h,.ds-text--title-large.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-input-h,.ds-text--title-large.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--title-small.ds-text--emphasis.sc-ds-input-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-input,.ds-text--title-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-input-h,.ds-text--title-small.ds-text--regular.sc-ds-input-h,.ds-text--title-medium.ds-text--regular.sc-ds-input,.ds-text--title-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-input-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--body-large.ds-text--emphasis.sc-ds-input,.ds-text--body-medium.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-input-h,.ds-text--body-medium.ds-text--regular.sc-ds-input-h,.ds-text--body-large.ds-text--regular.sc-ds-input,.ds-text--body-medium.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-input-h,.ds-text--body-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-input-h,.ds-text--body-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-input-h,.ds-text--caption.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-input-h,.ds-text--caption.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}.input-host.sc-ds-input-h{display:inline-flex;flex-direction:column;gap:var(--dimension-space-050);--ds-input-fg:var(--color-foreground-primary);--ds-input-placeholder:var(--color-foreground-secondary);--ds-input-placeholder-active:var(--color-foreground-quaternary);--ds-input-adornment-fg:var(--color-foreground-secondary);--ds-input-border:var(--color-border-secondary)}.ds-control-width--fill.sc-ds-input-h,.ds-control-width--fill.sc-ds-input-h .input-control.sc-ds-input{width:100%}.input-control.sc-ds-input{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));overflow:hidden;background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-input-fg)}.input-control--bordered.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-input-border)}.input-control--error.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-negative)}.input-control.sc-ds-input:focus-within:not(.input-control--error){--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-brand)}.ds-control-inactive.sc-ds-input-h .input-control.sc-ds-input::after{background:transparent}.native-input.sc-ds-input{position:relative;z-index:2;flex:1 1 auto;min-width:0;height:100%;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));background:transparent;border:none;border-radius:inherit;outline:none;color:var(--ds-input-fg);font-family:inherit;-webkit-appearance:none;appearance:none}.native-input.sc-ds-input:disabled{cursor:not-allowed}.native-input.sc-ds-input:read-only:not(:disabled){cursor:default}.native-input.sc-ds-input::placeholder{color:var(--ds-input-placeholder)}.native-input.sc-ds-input:focus::placeholder{color:var(--ds-input-placeholder-active)}.native-input[type='search'].sc-ds-input::-webkit-search-cancel-button,.native-input[type='search'].sc-ds-input::-webkit-search-decoration{display:none}.input-control__prefix.sc-ds-input,.input-control__suffix.sc-ds-input{position:relative;z-index:2;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;color:var(--ds-input-adornment-fg)}.input-control__suffix--empty.sc-ds-input{display:none}.input-control__clear.sc-ds-input{position:relative;z-index:2;flex-shrink:0;align-self:center}.input-control.ds-control--md.sc-ds-input:has(.input-control__clear),.input-control.ds-control--sm.sc-ds-input:has(.input-control__clear){padding-right:var(--dimension-space-050)}.input-control.ds-control--xs.sc-ds-input:has(.input-control__clear){padding-right:0}.error-text.sc-ds-input{width:100%}`;const f={md:"md",sm:"sm",xs:"xs"};const g={md:"sm",sm:"xs",xs:"xs"};let v=0;const m=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.dsClear=s(this,"dsClear");this.internals=this.attachInternals();this.generatedId=`ds-input-${++v}`;this.errorId=`${this.generatedId}-error`;this.value="";this.disabled=false;this.readOnly=false;this.required=false;this.requiredMessage="This field is required.";this.clearLabel="Clear";this.type="text";this.inputMode="";this.enterKeyHint="";this.size="md";this.width="fill";this.hasBorder=true;this.isInactive=false;this.autoFocus=false;this.error=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false;this.hasSuffix=false;this.focused=false;this.touched=false;this.handleInput=t=>{this.value=t.target.value;this.dsChange.emit(this.value)};this.handleFocus=()=>{this.focused=true};this.handleBlur=()=>{this.focused=false;this.touched=true};this.handleClear=()=>{this.value="";this.dsChange.emit("");this.dsClear.emit();this.el.querySelector("input")?.focus()}}componentWillLoad(){this.initialValue=this.value;this.hasSuffix=Boolean(this.el.querySelector('[slot="suffix"]'));this.syncFormValue()}componentDidRender(){const t=Boolean(this.el.querySelector('[slot="suffix"]'));if(t!==this.hasSuffix)this.hasSuffix=t}syncFormValue(){const t=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(t?null:this.value);const i=this.required&&!t&&this.value.length===0;this.internals.setValidity(i?{valueMissing:true}:{},i?this.requiredMessage:"")}formDisabledCallback(t){this.formDisabled=t;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(t){this.value=typeof t==="string"?t:""}async setFocus(){this.el.querySelector("input")?.focus()}render(){const t=this.inputId??this.generatedId;const i=this.isInactive||this.disabled||this.formDisabled;const s=this.value.length>0;const r=this.value!==this.initialValue;const o=this.type==="search"&&s&&!i&&!this.readOnly;const a=this.error&&Boolean(this.errorMessage);const d=p[this.size];const c=f[this.size];const l=[this.ariaDescribedby,a?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return e(n,{key:"5bc02207d076e943093a7d972a0f4eb7031d7745",class:{"input-host":true,"ds-control-inactive":i,[`ds-control--${this.size}`]:true,...u(this.width)},"data-disabled":i?"":undefined,"data-readonly":this.readOnly?"":undefined,"data-required":this.required?"":undefined,"data-invalid":this.error?"":undefined,"data-filled":s?"":undefined,"data-focused":this.focused?"":undefined,"data-dirty":r?"":undefined,"data-touched":this.touched?"":undefined},e("div",{key:"0a91b57744d7ea613dd37945383bc4019ffaecb2",class:{"input-control":true,"input-control--bordered":this.hasBorder||this.error,"input-control--error":this.error,"ds-interaction-fill":true,[`ds-control--${this.size}`]:true}},this.icon&&e("span",{key:"6f633b652c1122d3df05b70a9f497fbd5d1beac4",class:"input-control__prefix ds-interaction-fill__content","aria-hidden":"true"},e("ds-icon",{key:"5098662161ac12eaf09f43ddd593504aac5fe56f",name:this.icon,size:c,color:"inherit"})),e("input",{key:"68209e27ffaf8493648c8a8e2a08411f0224d312",type:this.type,id:t,value:this.value,placeholder:this.placeholder,disabled:i,readOnly:this.readOnly,required:this.required,autoFocus:this.autoFocus,autoComplete:this.autoComplete,inputMode:this.inputMode||undefined,enterKeyHint:this.enterKeyHint||undefined,class:`native-input ds-text--${d.replace("text-","")} ds-text--regular ds-interaction-fill__content`,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":l,"aria-invalid":this.error?"true":undefined,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur}),e("span",{key:"84fff549f71c73d1dee2fe451b34364608e3eb19",class:{"input-control__suffix":true,"input-control__suffix--empty":!this.hasSuffix}},e("slot",{key:"f67eaa7a510e66db0a8793ccb4802b70016c8937",name:"suffix"})),o&&e("ds-button-unfilled",{key:"f31256e9d1b40b1ab02b08bfba3fdf2b97253452",class:"input-control__clear",variant:"icon",size:g[this.size],icon:"CrossCircle",hasBorder:false,rounded:true,ariaLabel:this.clearLabel,onDsClick:this.handleClear})),a&&e("ds-text",{key:"05c405db6d86625f6d3d4369d6d9ece04fa272be",class:"error-text",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return h()}},[326,"ds-input",{value:[1025],name:[513],form:[513],disabled:[516],readOnly:[516,"read-only"],required:[516],requiredMessage:[1,"required-message"],clearLabel:[1,"clear-label"],placeholder:[1],type:[1],autoComplete:[1,"autocomplete"],inputMode:[1,"inputmode"],enterKeyHint:[1,"enterkeyhint"],size:[1],width:[1],hasBorder:[4,"has-border"],icon:[1],isInactive:[4,"is-inactive"],autoFocus:[4,"auto-focus"],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],formDisabled:[32],hasSuffix:[32],focused:[32],touched:[32],setFocus:[64]},undefined,{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function y(){if(typeof customElements==="undefined"){return}const t=["ds-input","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-input":if(!customElements.get(r(t))){customElements.define(r(t),m)}break;case"ds-badge":if(!customElements.get(r(t))){o()}break;case"ds-button-unfilled":if(!customElements.get(r(t))){a()}break;case"ds-icon":if(!customElements.get(r(t))){d()}break;case"ds-loader":if(!customElements.get(r(t))){c()}break;case"ds-text":if(!customElements.get(r(t))){l()}break}}))}y();const b=m;const x=y;export{b as DsInput,x as defineCustomElement};
1
+ import{p as t,H as i,c as s,h as e,a as n,t as r}from"./index.js";import{d as o}from"./p-CH6cNXXF.js";import{d as a}from"./p-CoYFJD-w.js";import{d}from"./p-BAfG3M8z.js";import{d as c}from"./p-Cpr3K41-.js";import{d as l}from"./p-BwGnhInj.js";import{C as p}from"./p-Cx-ywr1e.js";import{c as u}from"./p-DuFm-ieS.js";const h=()=>`.ds-interaction-fill.sc-ds-input-h,.ds-interaction-fill.sc-ds-input{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-input-h::before,.ds-interaction-fill.sc-ds-input::before,.ds-interaction-fill.sc-ds-input-h::after,.ds-interaction-fill.sc-ds-input::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-input-h::before,.ds-interaction-fill.sc-ds-input::before{z-index:1}.ds-interaction-fill.sc-ds-input-h::after,.ds-interaction-fill.sc-ds-input::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-input-h,.ds-interaction-fill--bordered.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-input-h::before,.ds-interaction-fill--selected.sc-ds-input::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-input-h,.ds-interaction-fill--selected.sc-ds-input{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-input-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-input:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-input-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-input:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-input-h>.ds-interaction-fill__content.sc-ds-input,.ds-interaction-fill.sc-ds-input>.ds-interaction-fill__content.sc-ds-input,.ds-interaction-fill__content.sc-ds-input{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-input-h,.ds-interaction-fill--on-faint.sc-ds-input{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-input-h,.ds-interaction-fill--on-medium.sc-ds-input{--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-input-h,.ds-interaction-fill--on-bold.sc-ds-input{--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-input-h,.ds-interaction-fill--on-strong.sc-ds-input{--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-input-h,.ds-interaction-fill--on-translucent.sc-ds-input{--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-input-h,.ds-interaction-fill--on-inverted.sc-ds-input{--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-input-h,.ds-interaction-fill--on-media.sc-ds-input{--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-input-h,.ds-interaction-fill--on-always-dark.sc-ds-input{--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-input-h,.ds-interaction-fill--on-navigation.sc-ds-input{--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-input-h,.ds-control-inactive.sc-ds-input{opacity:0.5;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-input-h,.ds-control--md.sc-ds-input,.ds-control--sm.sc-ds-input-h,.ds-control--sm.sc-ds-input,.ds-control--xs.sc-ds-input-h,.ds-control--xs.sc-ds-input{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-input-h,.ds-control--md.sc-ds-input{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-input-h,.ds-control--sm.sc-ds-input{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-input-h,.ds-control--xs.sc-ds-input{--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-width--hug.sc-ds-input-h,.ds-control-width--hug.sc-ds-input{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-input-h,.ds-control-width--fill.sc-ds-input{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.ds-text--display-medium.sc-ds-input-h,.ds-text--display-medium.sc-ds-input{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-input-h,.ds-text--display-small.sc-ds-input{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-input-h,.ds-text--title-large.sc-ds-input{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-input-h,.ds-text--title-medium.sc-ds-input{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-input-h,.ds-text--title-small.sc-ds-input{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-input-h,.ds-text--body-large.sc-ds-input{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-input-h,.ds-text--body-medium.sc-ds-input{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-input-h,.ds-text--body-small.sc-ds-input{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-input-h,.ds-text--caption.sc-ds-input{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--display-small.ds-text--emphasis.sc-ds-input-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-input,.ds-text--display-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-input-h,.ds-text--display-small.ds-text--regular.sc-ds-input-h,.ds-text--display-medium.ds-text--regular.sc-ds-input,.ds-text--display-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-input-h,.ds-text--title-large.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-input-h,.ds-text--title-large.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--title-small.ds-text--emphasis.sc-ds-input-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-input,.ds-text--title-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-input-h,.ds-text--title-small.ds-text--regular.sc-ds-input-h,.ds-text--title-medium.ds-text--regular.sc-ds-input,.ds-text--title-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-input-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--body-large.ds-text--emphasis.sc-ds-input,.ds-text--body-medium.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-input-h,.ds-text--body-medium.ds-text--regular.sc-ds-input-h,.ds-text--body-large.ds-text--regular.sc-ds-input,.ds-text--body-medium.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-input-h,.ds-text--body-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-input-h,.ds-text--body-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-input-h,.ds-text--caption.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-input-h,.ds-text--caption.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}.input-host.sc-ds-input-h{display:inline-flex;flex-direction:column;gap:var(--dimension-space-050);--ds-input-fg:var(--color-foreground-primary);--ds-input-placeholder:var(--color-foreground-secondary);--ds-input-placeholder-active:var(--color-foreground-quaternary);--ds-input-adornment-fg:var(--color-foreground-secondary);--ds-input-border:var(--color-border-secondary)}.ds-control-width--fill.sc-ds-input-h,.ds-control-width--fill.sc-ds-input-h .input-control.sc-ds-input{width:100%}.input-control.sc-ds-input{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));overflow:hidden;background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-input-fg)}.input-control--bordered.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-input-border)}.input-control--error.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-negative)}.input-control.sc-ds-input:focus-within:not(.input-control--error){--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-brand)}.ds-control-inactive.sc-ds-input-h .input-control.sc-ds-input::after{background:transparent}.native-input.sc-ds-input{position:relative;z-index:2;flex:1 1 auto;min-width:0;height:100%;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));background:transparent;border:none;border-radius:inherit;outline:none;color:var(--ds-input-fg);font-family:inherit;-webkit-appearance:none;appearance:none}.native-input.sc-ds-input:disabled{cursor:not-allowed}.native-input.sc-ds-input:read-only:not(:disabled){cursor:default}.native-input.sc-ds-input::placeholder{color:var(--ds-input-placeholder)}.native-input.sc-ds-input:focus::placeholder{color:var(--ds-input-placeholder-active)}.native-input[type='search'].sc-ds-input::-webkit-search-cancel-button,.native-input[type='search'].sc-ds-input::-webkit-search-decoration{display:none}.input-control__prefix.sc-ds-input,.input-control__suffix.sc-ds-input{position:relative;z-index:2;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;color:var(--ds-input-adornment-fg)}.input-control__suffix--empty.sc-ds-input{display:none}.input-control__clear.sc-ds-input{position:relative;z-index:2;flex-shrink:0;align-self:center}.input-control.ds-control--md.sc-ds-input:has(.input-control__clear),.input-control.ds-control--sm.sc-ds-input:has(.input-control__clear){padding-right:var(--dimension-space-050)}.input-control.ds-control--xs.sc-ds-input:has(.input-control__clear){padding-right:0}.error-text.sc-ds-input{width:100%}`;const g={md:"md",sm:"sm",xs:"xs"};const f={md:"sm",sm:"xs",xs:"xs"};let v=0;const m=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.dsClear=s(this,"dsClear");this.internals=this.attachInternals();this.generatedId=`ds-input-${++v}`;this.errorId=`${this.generatedId}-error`;this.value="";this.disabled=false;this.readOnly=false;this.required=false;this.requiredMessage="This field is required.";this.clearLabel="Clear";this.type="text";this.inputMode="";this.enterKeyHint="";this.size="md";this.width="fill";this.hasBorder=true;this.isInactive=false;this.autoFocus=false;this.error=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false;this.hasSuffix=false;this.focused=false;this.touched=false;this.handleInput=t=>{this.value=t.target.value;this.dsChange.emit(this.value)};this.handleFocus=()=>{this.focused=true};this.handleBlur=()=>{this.focused=false;this.touched=true};this.handleClear=()=>{this.value="";this.dsChange.emit("");this.dsClear.emit();this.el.querySelector("input")?.focus()}}componentWillLoad(){this.initialValue=this.value;this.hasSuffix=Boolean(this.el.querySelector('[slot="suffix"]'));this.syncFormValue()}componentDidRender(){const t=Boolean(this.el.querySelector('[slot="suffix"]'));if(t!==this.hasSuffix)this.hasSuffix=t}syncFormValue(){const t=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(t?null:this.value);const i=this.required&&!t&&this.value.length===0;this.internals.setValidity(i?{valueMissing:true}:{},i?this.requiredMessage:"")}formDisabledCallback(t){this.formDisabled=t;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(t){this.value=typeof t==="string"?t:""}async setFocus(){this.el.querySelector("input")?.focus()}render(){const t=this.inputId??this.generatedId;const i=this.isInactive||this.disabled||this.formDisabled;const s=this.value.length>0;const r=this.value!==this.initialValue;const o=this.type==="search"&&s&&!i&&!this.readOnly;const a=this.error&&Boolean(this.errorMessage);const d=p[this.size];const c=g[this.size];const l=[this.ariaDescribedby,a?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return e(n,{key:"4e45518c4ae5b5a157150a1cd02dce6efe00f0d5",class:{"input-host":true,"ds-control-inactive":i,[`ds-control--${this.size}`]:true,...u(this.width)},"data-disabled":i?"":undefined,"data-readonly":this.readOnly?"":undefined,"data-required":this.required?"":undefined,"data-invalid":this.error?"":undefined,"data-filled":s?"":undefined,"data-focused":this.focused?"":undefined,"data-dirty":r?"":undefined,"data-touched":this.touched?"":undefined},e("div",{key:"092d7b86e59c88d79e263c4317ce238965593c54",class:{"input-control":true,"input-control--bordered":this.hasBorder||this.error,"input-control--error":this.error,"ds-interaction-fill":true,[`ds-control--${this.size}`]:true}},this.icon&&e("span",{key:"8c6d5b8d635e7370a4b7765a75037080d494bb59",class:"input-control__prefix ds-interaction-fill__content","aria-hidden":"true"},e("ds-icon",{key:"9b0b300c0617fd61dd2f005e585a3b48f1e06752",name:this.icon,size:c,color:"inherit"})),e("input",{key:"0429d8e4a37c4300fc27f330da6c63a11f9707f3",type:this.type,id:t,value:this.value,placeholder:this.placeholder,disabled:i,readOnly:this.readOnly,required:this.required,autoFocus:this.autoFocus,autoComplete:this.autoComplete,inputMode:this.inputMode||undefined,enterKeyHint:this.enterKeyHint||undefined,class:`native-input ds-text--${d.replace("text-","")} ds-text--regular ds-interaction-fill__content`,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":l,"aria-invalid":this.error?"true":undefined,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur}),e("span",{key:"5c803993c8db025fb01d7b27e523a3ffccfb1335",class:{"input-control__suffix":true,"input-control__suffix--empty":!this.hasSuffix}},e("slot",{key:"8ff22cf6030d2151296ed20b2774082f539c6af7",name:"suffix"})),o&&e("ds-button-unfilled",{key:"e8ef18cda02e6a4ca5337f0c9af02eed80a7b059",class:"input-control__clear",variant:"icon",size:f[this.size],icon:"CrossCircle",hasBorder:false,rounded:true,ariaLabel:this.clearLabel,onDsClick:this.handleClear})),a&&e("ds-text",{key:"7cc92e2e45ccc80476e0bd3c00617ccc676a3eb9",class:"error-text",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return h()}},[326,"ds-input",{value:[1025],name:[513],form:[513],disabled:[516],readOnly:[516,"read-only"],required:[516],requiredMessage:[1,"required-message"],clearLabel:[1,"clear-label"],placeholder:[1],type:[1],autoComplete:[1,"autocomplete"],inputMode:[1,"inputmode"],enterKeyHint:[1,"enterkeyhint"],size:[1],width:[1],hasBorder:[4,"has-border"],icon:[1],isInactive:[4,"is-inactive"],autoFocus:[4,"auto-focus"],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],formDisabled:[32],hasSuffix:[32],focused:[32],touched:[32],setFocus:[64]},undefined,{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function y(){if(typeof customElements==="undefined"){return}const t=["ds-input","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-input":if(!customElements.get(r(t))){customElements.define(r(t),m)}break;case"ds-badge":if(!customElements.get(r(t))){o()}break;case"ds-button-unfilled":if(!customElements.get(r(t))){a()}break;case"ds-icon":if(!customElements.get(r(t))){d()}break;case"ds-loader":if(!customElements.get(r(t))){c()}break;case"ds-text":if(!customElements.get(r(t))){l()}break}}))}y();const b=m;const x=y;export{b as DsInput,x as defineCustomElement};
2
2
  //# sourceMappingURL=ds-input.js.map
@@ -1,2 +1,2 @@
1
- import{M as o,d as s}from"./p-BpA9uYKX.js";const p=o;const t=s;export{p as DsMarkdown,t as defineCustomElement};
1
+ import{M as o,d as s}from"./p-DXnFhmZF.js";const t=o;const m=s;export{t as DsMarkdown,m as defineCustomElement};
2
2
  //# sourceMappingURL=ds-markdown.js.map
@@ -1,2 +1,2 @@
1
- import{M as o,d as s}from"./p-8OOCLGph.js";const p=o;const t=s;export{p as DsMenu,t as defineCustomElement};
1
+ import{M as s,d as o}from"./p-NUNsefU1.js";const t=s;const p=o;export{t as DsMenu,p as defineCustomElement};
2
2
  //# sourceMappingURL=ds-menu.js.map
@@ -1,2 +1,2 @@
1
- import{p as e,H as s,h as a,a as r,t as b}from"./index.js";const t=()=>`.sc-ds-message-bubble-h{display:inline-flex;max-width:80%;box-sizing:border-box;-webkit-user-select:text;user-select:text}.message-bubble.sc-ds-message-bubble{min-width:0;padding-block:var(--dimension-space-100);padding-inline:calc(var(--dimension-space-100) + var(--dimension-space-025));border-radius:var(--dimension-radius-050);background:transparent;color:var(--color-foreground-primary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half);box-sizing:border-box;overflow-wrap:anywhere}.message-bubble--user.sc-ds-message-bubble-h .message-bubble.sc-ds-message-bubble{background:var(--color-translucent-translucent);color:var(--color-foreground-secondary);box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary)}.message-bubble--received.sc-ds-message-bubble-h .message-bubble.sc-ds-message-bubble{box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary)}`;const o=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.variant="received"}render(){return a(r,{key:"82e0b7bab0472afa9d37bcefbee5828a47e457ea",class:`message-bubble--${this.variant}`},a("div",{key:"c428bb2e664f1e2ce1b7c91aa3a453cbff71fb8a",class:"message-bubble"},a("slot",{key:"697a08ef1b480ecdbcf8091e3dc2cc8b42b53e9a"})))}static get style(){return t()}},[262,"ds-message-bubble",{variant:[1]}]);function i(){if(typeof customElements==="undefined"){return}const e=["ds-message-bubble"];e.forEach((e=>{switch(e){case"ds-message-bubble":if(!customElements.get(b(e))){customElements.define(b(e),o)}break}}))}i();const n=o;const c=i;export{n as DsMessageBubble,c as defineCustomElement};
1
+ import{p as e,H as s,h as a,a as r,t}from"./index.js";const o=()=>`.sc-ds-message-bubble-h{display:inline-flex;max-width:80%;box-sizing:border-box;-webkit-user-select:text;user-select:text}.message-bubble.sc-ds-message-bubble{min-width:0;padding-block:var(--dimension-space-100);padding-inline:calc(var(--dimension-space-100) + var(--dimension-space-025));border-radius:var(--dimension-radius-050);background:transparent;color:var(--color-foreground-primary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half);box-sizing:border-box;overflow-wrap:anywhere}.message-bubble--user.sc-ds-message-bubble-h .message-bubble.sc-ds-message-bubble{background:var(--color-translucent-translucent);color:var(--color-foreground-secondary);box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary)}.message-bubble--received.sc-ds-message-bubble-h .message-bubble.sc-ds-message-bubble{box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary)}`;const b=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.variant="received"}render(){return a(r,{key:"29b025292c19f31220d89288b64550f60184fa96",class:`message-bubble--${this.variant}`},a("div",{key:"99397f25376bf84b035ad509e816dad29889aae9",class:"message-bubble"},a("slot",{key:"a22a6980995527ccea600cae1c4b0d5c850e81f8"})))}static get style(){return o()}},[262,"ds-message-bubble",{variant:[1]}]);function i(){if(typeof customElements==="undefined"){return}const e=["ds-message-bubble"];e.forEach((e=>{switch(e){case"ds-message-bubble":if(!customElements.get(t(e))){customElements.define(t(e),b)}break}}))}i();const n=b;const c=i;export{n as DsMessageBubble,c as defineCustomElement};
2
2
  //# sourceMappingURL=ds-message-bubble.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["messageBubbleCss","MessageBubble","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","render","h","Host","key","class"],"sources":["src/wc/components/MessageBubble/MessageBubble.css?tag=ds-message-bubble&encapsulation=scoped","src/wc/components/MessageBubble/MessageBubble.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n max-width: 80%;\n box-sizing: border-box;\n -webkit-user-select: text;\n user-select: text;\n}\n\n.message-bubble {\n min-width: 0;\n padding-block: var(--dimension-space-100);\n padding-inline: calc(var(--dimension-space-100) + var(--dimension-space-025));\n border-radius: var(--dimension-radius-050);\n background: transparent;\n color: var(--color-foreground-primary);\n font-family: var(--typography-font-family);\n font-size: var(--typography-fontsize-md);\n line-height: var(--typography-lineheight-md);\n font-weight: var(--typography-weight-regular);\n letter-spacing: var(--typography-letterspacing-negative-half);\n box-sizing: border-box;\n overflow-wrap: anywhere;\n}\n\n:host(.message-bubble--user) .message-bubble {\n background: var(--color-translucent-translucent);\n color: var(--color-foreground-secondary);\n box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n\n:host(.message-bubble--received) .message-bubble {\n box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nexport type MessageBubbleVariant = 'user' | 'received';\n\n@Component({\n tag: 'ds-message-bubble',\n styleUrl: 'MessageBubble.css',\n scoped: true,\n})\nexport class MessageBubble {\n @Prop() variant: MessageBubbleVariant = 'received';\n\n render() {\n return (\n <Host class={`message-bubble--${this.variant}`}>\n <div class=\"message-bubble\"><slot /></div>\n </Host>\n );\n }\n}\n"],"mappings":"2DAAA,MAAMA,EAAmB,IAAM,4kC,MCSlBC,EAAaC,EAAA,MAAAD,UAAAE,EAL1B,WAAAC,CAAAC,G,4CAMUC,KAAAC,QAAgC,UASzC,CAPC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,mBAAmBN,KAAKC,WACnCE,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBAAiBH,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
1
+ {"version":3,"names":["messageBubbleCss","MessageBubble","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","render","h","Host","key","class"],"sources":["src/wc/components/MessageBubble/MessageBubble.css?tag=ds-message-bubble&encapsulation=scoped","src/wc/components/MessageBubble/MessageBubble.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n max-width: 80%;\n box-sizing: border-box;\n -webkit-user-select: text;\n user-select: text;\n}\n\n.message-bubble {\n min-width: 0;\n padding-block: var(--dimension-space-100);\n padding-inline: calc(var(--dimension-space-100) + var(--dimension-space-025));\n border-radius: var(--dimension-radius-050);\n background: transparent;\n color: var(--color-foreground-primary);\n font-family: var(--typography-font-family);\n font-size: var(--typography-fontsize-md);\n line-height: var(--typography-lineheight-md);\n font-weight: var(--typography-weight-regular);\n letter-spacing: var(--typography-letterspacing-negative-half);\n box-sizing: border-box;\n overflow-wrap: anywhere;\n}\n\n:host(.message-bubble--user) .message-bubble {\n background: var(--color-translucent-translucent);\n color: var(--color-foreground-secondary);\n box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n\n:host(.message-bubble--received) .message-bubble {\n box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nexport type MessageBubbleVariant = 'user' | 'received';\n\n@Component({\n tag: 'ds-message-bubble',\n styleUrl: 'MessageBubble.css',\n scoped: true,\n})\nexport class MessageBubble {\n @Prop() variant: MessageBubbleVariant = 'received';\n\n render() {\n return (\n <Host class={`message-bubble--${this.variant}`}>\n <div class=\"message-bubble\"><slot /></div>\n </Host>\n );\n }\n}\n"],"mappings":"sDAAA,MAAMA,EAAmB,IAAM,4kC,MCSlBC,EAAaC,EAAA,MAAAD,UAAAE,EAL1B,WAAAC,CAAAC,G,4CAMUC,KAAAC,QAAgC,UASzC,CAPC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,mBAAmBN,KAAKC,WACnCE,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBAAiBH,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
@@ -1,2 +1,2 @@
1
- import{p as e,H as s,c as a,h as t,a as o,t as i}from"./index.js";import{d as r}from"./p-DOCKtrS4.js";import{d as n}from"./p-GMDGgtY8.js";import{d as c}from"./p-xY3TjBF5.js";import{d}from"./p-BAfG3M8z.js";import{d as m}from"./p-Cpr3K41-.js";import{d as l}from"./p-C0_8K4y7.js";import{d as p}from"./p-CCHqsF_H.js";const h=()=>`.sc-ds-message-composer-h{display:block;width:100%;box-sizing:border-box;-webkit-user-select:none;user-select:none}.message-composer.sc-ds-message-composer{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%;margin:0}.message-composer__attachments.sc-ds-message-composer:empty,.message-composer__tools.sc-ds-message-composer:empty{display:none}.message-composer__field.sc-ds-message-composer{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-100);border-radius:var(--dimension-radius-125);background:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-md);overflow:hidden}.message-composer.sc-ds-message-composer:not(.message-composer--error) .message-composer__field.sc-ds-message-composer:focus-within{box-shadow:var(--effect-elevation-elevated-md), inset 0 0 0 var(--dimension-stroke-width-018) var(--color-border-bold-brand)}.message-composer--error.sc-ds-message-composer .message-composer__field.sc-ds-message-composer{box-shadow:var(--effect-elevation-elevated-md), inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-negative)}textarea.sc-ds-message-composer{width:100%;min-height:calc(var(--typography-lineheight-md) * 2 + var(--dimension-space-150));max-height:calc(var(--typography-lineheight-md) * 6 + var(--dimension-space-150));padding:var(--dimension-space-075);border:none;outline:none;resize:none;overflow-y:auto;box-sizing:border-box;background:transparent;color:var(--color-foreground-primary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half);-webkit-user-select:text;user-select:text}textarea.sc-ds-message-composer::placeholder{color:var(--color-foreground-secondary)}textarea.sc-ds-message-composer:focus::placeholder{color:var(--color-foreground-quaternary)}textarea.sc-ds-message-composer:focus,textarea.sc-ds-message-composer:focus-visible{outline:none}.message-composer__tools.sc-ds-message-composer{display:flex;align-items:center;gap:var(--dimension-space-050);min-height:var(--dimension-size-400)}.message-composer__controls.sc-ds-message-composer{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-050);width:100%;min-width:0}.message-composer__actions.sc-ds-message-composer{display:flex;align-items:center;gap:var(--dimension-space-100);flex:0 0 auto;margin-inline-start:auto}`;const f=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsInput=a(this,"dsInput");this.dsSubmit=a(this,"dsSubmit");this.dsStop=a(this,"dsStop");this.value="";this.placeholder="Write a message";this.label="Message";this.status="ready";this.isInactive=false;this.submitIntent="brand";this.handleInput=e=>{this.value=e.target.value;this.resize();this.dsInput.emit(this.value)};this.handleKeyDown=e=>{if(e.key!=="Enter"||e.shiftKey||e.isComposing)return;e.preventDefault();this.submit()};this.handleAction=()=>{if(this.streaming)this.dsStop.emit();else this.submit()}}componentDidLoad(){this.resize()}onValueChange(){requestAnimationFrame((()=>this.resize()))}async setFocus(){this.textarea?.focus()}get streaming(){return this.status==="submitted"||this.status==="streaming"}resize(){if(!this.textarea)return;this.textarea.style.height="auto";this.textarea.style.height=`${this.textarea.scrollHeight}px`}submit(){const e=this.value.trim();if(!e||this.isInactive||this.streaming)return;this.dsSubmit.emit({text:e})}render(){const e=this.status==="error";const s=!this.streaming&&(this.isInactive||!this.value.trim());return t(o,{key:"235bc0af1080359e164f3a0ec556e0fd1a42fd25"},t("form",{key:"aa0bf8f675e6a7f53e93665e343fe25b9da1a85d",class:{"message-composer":true,"message-composer--error":e},"aria-busy":this.streaming?"true":undefined,onSubmit:e=>{e.preventDefault();this.submit()}},t("div",{key:"55fd112b02d02e008ead76a9e3ab89d7271ebe7f",class:"message-composer__attachments"},t("slot",{key:"b613e971e30c4f5e65ba7509446c5c4006904fa1",name:"attachments"})),t("div",{key:"dd24f705ec9ad808a011faf7bc88db308c5101ac",class:"message-composer__field"},t("textarea",{key:"c109beb5e43a65f5ecbcf1737e449a25e8aa1ddf",ref:e=>{this.textarea=e},value:this.value,placeholder:this.placeholder,"aria-label":this.label,"aria-invalid":e?"true":undefined,disabled:this.isInactive,rows:2,onInput:this.handleInput,onKeyDown:this.handleKeyDown}),t("div",{key:"308e041091fbbd1cb5bfa4e7e879ac3f87594f95",class:"message-composer__controls"},t("div",{key:"8105e9df256a30c0f889f5d382d2110e0e9ec142",class:"message-composer__tools"},t("slot",{key:"7cf3964731e89fc59faec121aa1aa3e48ae9a9d5",name:"tools"})),t("div",{key:"c947bf43d3206e1e385ca2aa1ca2229f1c573a88",class:"message-composer__actions"},t("slot",{key:"edf1efb13711c88c65d459b21cc170eeb649ea59",name:"actions"}),s?t("ds-tooltip",{label:"Send message",side:"top",size:"sm"},t("ds-button-unfilled",{class:"message-composer__action",variant:"icon",icon:"ArrowUp",size:"md","aria-label":"Send message",hasBorder:true,isInactive:true,onDsClick:this.handleAction})):t("ds-tooltip",{label:this.streaming?"Stop response":"Send message",side:"top",size:"sm"},t("ds-button-filled",{class:"message-composer__action",variant:"icon",icon:this.streaming?"SquareFilled":"ArrowUp",intent:this.streaming?"brand":this.submitIntent,contrast:"bold",size:"md","aria-label":this.streaming?"Stop response":"Send message",onDsClick:this.handleAction})))))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return h()}},[262,"ds-message-composer",{value:[1025],placeholder:[1],label:[1],status:[1],isInactive:[4,"is-inactive"],submitIntent:[1,"submit-intent"],setFocus:[64]},undefined,{value:[{onValueChange:0}]}]);function g(){if(typeof customElements==="undefined"){return}const e=["ds-message-composer","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-message-composer":if(!customElements.get(i(e))){customElements.define(i(e),f)}break;case"ds-badge":if(!customElements.get(i(e))){r()}break;case"ds-button-filled":if(!customElements.get(i(e))){n()}break;case"ds-button-unfilled":if(!customElements.get(i(e))){c()}break;case"ds-icon":if(!customElements.get(i(e))){d()}break;case"ds-loader":if(!customElements.get(i(e))){m()}break;case"ds-text":if(!customElements.get(i(e))){l()}break;case"ds-tooltip":if(!customElements.get(i(e))){p()}break}}))}g();const u=f;const b=g;export{u as DsMessageComposer,b as defineCustomElement};
1
+ import{p as e,H as s,c as t,h as a,a as o,t as i}from"./index.js";import{d as r}from"./p-CH6cNXXF.js";import{d as c}from"./p-BhxwpOH8.js";import{d as n}from"./p-CoYFJD-w.js";import{d}from"./p-BAfG3M8z.js";import{d as m}from"./p-Cpr3K41-.js";import{d as l}from"./p-BwGnhInj.js";import{d as p}from"./p-BPS9VExm.js";const h=()=>`.sc-ds-message-composer-h{display:block;width:100%;box-sizing:border-box;-webkit-user-select:none;user-select:none}.message-composer.sc-ds-message-composer{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%;margin:0}.message-composer__attachments.sc-ds-message-composer:empty,.message-composer__tools.sc-ds-message-composer:empty{display:none}.message-composer__field.sc-ds-message-composer{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-100);border-radius:var(--dimension-radius-125);background:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-md);overflow:hidden}.message-composer.sc-ds-message-composer:not(.message-composer--error) .message-composer__field.sc-ds-message-composer:focus-within{box-shadow:var(--effect-elevation-elevated-md), inset 0 0 0 var(--dimension-stroke-width-018) var(--color-border-bold-brand)}.message-composer--error.sc-ds-message-composer .message-composer__field.sc-ds-message-composer{box-shadow:var(--effect-elevation-elevated-md), inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-negative)}textarea.sc-ds-message-composer{width:100%;min-height:calc(var(--typography-lineheight-md) * 2 + var(--dimension-space-150));max-height:calc(var(--typography-lineheight-md) * 6 + var(--dimension-space-150));padding:var(--dimension-space-075);border:none;outline:none;resize:none;overflow-y:auto;box-sizing:border-box;background:transparent;color:var(--color-foreground-primary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half);-webkit-user-select:text;user-select:text}textarea.sc-ds-message-composer::placeholder{color:var(--color-foreground-secondary)}textarea.sc-ds-message-composer:focus::placeholder{color:var(--color-foreground-quaternary)}textarea.sc-ds-message-composer:focus,textarea.sc-ds-message-composer:focus-visible{outline:none}.message-composer__tools.sc-ds-message-composer{display:flex;align-items:center;gap:var(--dimension-space-050);min-height:var(--dimension-size-400)}.message-composer__controls.sc-ds-message-composer{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-050);width:100%;min-width:0}.message-composer__actions.sc-ds-message-composer{display:flex;align-items:center;gap:var(--dimension-space-100);flex:0 0 auto;margin-inline-start:auto}`;const f=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsInput=t(this,"dsInput");this.dsSubmit=t(this,"dsSubmit");this.dsStop=t(this,"dsStop");this.value="";this.placeholder="Write a message";this.label="Message";this.status="ready";this.isInactive=false;this.submitIntent="brand";this.handleInput=e=>{this.value=e.target.value;this.resize();this.dsInput.emit(this.value)};this.handleKeyDown=e=>{if(e.key!=="Enter"||e.shiftKey||e.isComposing)return;e.preventDefault();this.submit()};this.handleAction=()=>{if(this.streaming)this.dsStop.emit();else this.submit()}}componentDidLoad(){this.resize()}onValueChange(){requestAnimationFrame((()=>this.resize()))}async setFocus(){this.textarea?.focus()}get streaming(){return this.status==="submitted"||this.status==="streaming"}resize(){if(!this.textarea)return;this.textarea.style.height="auto";this.textarea.style.height=`${this.textarea.scrollHeight}px`}submit(){const e=this.value.trim();if(!e||this.isInactive||this.streaming)return;this.dsSubmit.emit({text:e})}render(){const e=this.status==="error";const s=!this.streaming&&(this.isInactive||!this.value.trim());return a(o,{key:"af69199afcb3041b0544fe85c233a61cfad57b6a"},a("form",{key:"6ca2528632a62dee5d9f593931aa0bc0a346e692",class:{"message-composer":true,"message-composer--error":e},"aria-busy":this.streaming?"true":undefined,onSubmit:e=>{e.preventDefault();this.submit()}},a("div",{key:"66ae6d307e836afee447f636724089fec4721699",class:"message-composer__attachments"},a("slot",{key:"e3c29045ba306f09579cfd70ea14541316c41db9",name:"attachments"})),a("div",{key:"926864ed98ae0f0c982f4674c89c15839ac81975",class:"message-composer__field"},a("textarea",{key:"d5c8aa176d3b79cd7cc163fbf452c1199abab455",ref:e=>{this.textarea=e},value:this.value,placeholder:this.placeholder,"aria-label":this.label,"aria-invalid":e?"true":undefined,disabled:this.isInactive,rows:2,onInput:this.handleInput,onKeyDown:this.handleKeyDown}),a("div",{key:"b9ddb090c859719f5e431cae71c5878f778c9434",class:"message-composer__controls"},a("div",{key:"979f31dea8fccdce1f86b15a9b358bb8104c18b4",class:"message-composer__tools"},a("slot",{key:"c096dc6735c54817be14159b8a48b52a02ce273d",name:"tools"})),a("div",{key:"080a6596987548e9ae4fa7e8ffb2f5444210e5ea",class:"message-composer__actions"},a("slot",{key:"79bdda53c205ed3b63cf51171440c05763efffca",name:"actions"}),s?a("ds-tooltip",{label:"Send message",side:"top",size:"sm"},a("ds-button-unfilled",{class:"message-composer__action",variant:"icon",icon:"ArrowUp",size:"md","aria-label":"Send message",hasBorder:true,isInactive:true,onDsClick:this.handleAction})):a("ds-tooltip",{label:this.streaming?"Stop response":"Send message",side:"top",size:"sm"},a("ds-button-filled",{class:"message-composer__action",variant:"icon",icon:this.streaming?"SquareFilled":"ArrowUp",intent:this.streaming?"brand":this.submitIntent,contrast:"bold",size:"md","aria-label":this.streaming?"Stop response":"Send message",onDsClick:this.handleAction})))))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return h()}},[262,"ds-message-composer",{value:[1025],placeholder:[1],label:[1],status:[1],isInactive:[4,"is-inactive"],submitIntent:[1,"submit-intent"],setFocus:[64]},undefined,{value:[{onValueChange:0}]}]);function g(){if(typeof customElements==="undefined"){return}const e=["ds-message-composer","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-message-composer":if(!customElements.get(i(e))){customElements.define(i(e),f)}break;case"ds-badge":if(!customElements.get(i(e))){r()}break;case"ds-button-filled":if(!customElements.get(i(e))){c()}break;case"ds-button-unfilled":if(!customElements.get(i(e))){n()}break;case"ds-icon":if(!customElements.get(i(e))){d()}break;case"ds-loader":if(!customElements.get(i(e))){m()}break;case"ds-text":if(!customElements.get(i(e))){l()}break;case"ds-tooltip":if(!customElements.get(i(e))){p()}break}}))}g();const u=f;const b=g;export{u as DsMessageComposer,b as defineCustomElement};
2
2
  //# sourceMappingURL=ds-message-composer.js.map
@@ -1,2 +1,2 @@
1
- import{p as e,H as s,c as t,h as a,a as r,t as l}from"./index.js";import{S as o}from"./p-BE_CDJeL.js";import{d}from"./p-DOCKtrS4.js";import{d as i}from"./p-xY3TjBF5.js";import{d as c}from"./p-BAfG3M8z.js";import{d as n}from"./p-Cpr3K41-.js";import{d as g}from"./p-C0_8K4y7.js";import{d as f}from"./p-CCHqsF_H.js";const h=()=>`@property --ds-scroll-edge-fade-top{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-bottom{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-left{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-right{syntax:'<length-percentage>';inherits:false;initial-value:0px}@keyframes ds-scroll-edge-fade-reveal-top{from{--ds-scroll-edge-fade-top:0px}to{--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top)}}@keyframes ds-scroll-edge-fade-reveal-bottom{from{--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom)}to{--ds-scroll-edge-fade-bottom:0px}}@keyframes ds-scroll-edge-fade-reveal-left{from{--ds-scroll-edge-fade-left:0px}to{--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left)}}@keyframes ds-scroll-edge-fade-reveal-right{from{--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right)}to{--ds-scroll-edge-fade-right:0px}}.scroll-edge-fade.sc-ds-message-scroller{--ds-scroll-edge-fade-size:var(--dimension-size-600);--ds-scroll-edge-fade-reveal-distance:var(--dimension-size-800);--ds-scroll-edge-fade-target-top:0px;--ds-scroll-edge-fade-target-bottom:0px;--ds-scroll-edge-fade-target-left:0px;--ds-scroll-edge-fade-target-right:0px;--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top);--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom);--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left);--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right);--ds-scroll-edge-fade-block-mask:linear-gradient( to bottom, transparent 0, #000 var(--ds-scroll-edge-fade-top), #000 calc(100% - var(--ds-scroll-edge-fade-bottom)), transparent 100% );--ds-scroll-edge-fade-inline-mask:linear-gradient( to right, transparent 0, #000 var(--ds-scroll-edge-fade-left), #000 calc(100% - var(--ds-scroll-edge-fade-right)), transparent 100% );-webkit-mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--top.sc-ds-message-scroller{--ds-scroll-edge-fade-target-top:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--bottom.sc-ds-message-scroller{--ds-scroll-edge-fade-target-bottom:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--left.sc-ds-message-scroller{--ds-scroll-edge-fade-target-left:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--right.sc-ds-message-scroller{--ds-scroll-edge-fade-target-right:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--top-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-top:0px}.scroll-edge-fade--bottom-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-bottom:0px}.scroll-edge-fade--left-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-left:0px}.scroll-edge-fade--right-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-right:0px}@supports (animation-timeline: scroll()){.scroll-edge-fade--scroll-aware.sc-ds-message-scroller{animation-name:ds-scroll-edge-fade-reveal-top, ds-scroll-edge-fade-reveal-bottom, ds-scroll-edge-fade-reveal-left, ds-scroll-edge-fade-reveal-right;animation-duration:1ms;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-timeline:scroll(self y), scroll(self y), scroll(self x), scroll(self x);animation-range:0 var(--ds-scroll-edge-fade-reveal-distance), calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%, 0 var(--ds-scroll-edge-fade-reveal-distance), calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%}@media (prefers-reduced-motion: reduce){.scroll-edge-fade--scroll-aware.sc-ds-message-scroller{animation:none}}}.scroll-edge-fade--at-end.sc-ds-message-scroller,.scroll-edge-fade--hidden.sc-ds-message-scroller{-webkit-mask-image:none;mask-image:none}.scroll-edge-fade--block-window.sc-ds-message-scroller{--ds-scroll-edge-fade-window-start:100%;--ds-scroll-edge-fade-window-end:100%;-webkit-mask-image:linear-gradient( to bottom, #000 0, #000 var(--ds-scroll-edge-fade-window-start), transparent var(--ds-scroll-edge-fade-window-end) );mask-image:linear-gradient( to bottom, #000 0, #000 var(--ds-scroll-edge-fade-window-start), transparent var(--ds-scroll-edge-fade-window-end) );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}`;const m=()=>`.sc-ds-message-scroller-h{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box}.message-scroller.sc-ds-message-scroller{position:relative;width:100%;height:100%;min-height:0}.message-scroller__viewport.sc-ds-message-scroller{width:100%;height:100%;min-height:0;overflow:auto;overscroll-behavior:contain;box-sizing:border-box}.message-scroller__viewport.sc-ds-message-scroller:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.message-scroller__content.sc-ds-message-scroller{display:flex;flex-direction:column;gap:var(--dimension-space-300);width:100%;max-width:var(--dimension-panel-width-2xl);min-height:100%;margin-inline:auto;padding-block-start:var(--dimension-space-200);padding-inline:var(--dimension-space-200);padding-block-end:calc( var(--dimension-space-200) + var(--ds-scroll-overlay-block-size, 0px) );box-sizing:border-box}.message-scroller__overlay.sc-ds-message-scroller{position:absolute;right:0;bottom:0;left:0;z-index:var(--dimension-z-index-floating)}.message-scroller__control.sc-ds-message-scroller{position:absolute;bottom:calc( var(--ds-scroll-overlay-content-block-size, 0px) + var(--dimension-space-200) );left:50%;z-index:var(--dimension-z-index-floating);display:flex;align-items:center;justify-content:center;border-radius:var(--dimension-radius-half);background:var(--color-background-transparent);box-shadow:var(--effect-elevation-elevated-md);transform:translateX(-50%);-webkit-backdrop-filter:blur(var(--effect-blur-sm));backdrop-filter:blur(var(--effect-blur-sm))}`;const p=24;const b=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsReachStart=t(this,"dsReachStart");this.busy=false;this.autoFollow=true;this.defaultPosition="last-anchor";this.messagesLabel="Messages";this.showScrollToLatest=false;this.following=true;this.atStart=false;this.programmatic=false;this.previousScrollHeight=0;this.handleScroll=()=>{if(!this.viewport)return;this.scrollOverlayController?.sync();if(this.programmatic)return;this.following=this.isAtLiveEdge();this.showScrollToLatest=!this.following;const e=this.viewport.scrollTop<=p;if(e&&!this.atStart)this.dsReachStart.emit();this.atStart=e};this.releaseFollow=()=>{this.following=false;this.showScrollToLatest=!this.isAtLiveEdge()};this.handleSelectionChange=()=>{const e=document.getSelection();if(e&&!e.isCollapsed&&e.anchorNode&&this.el.contains(e.anchorNode)){this.following=false;this.showScrollToLatest=!this.isAtLiveEdge()}}}componentDidLoad(){this.connectObservers();requestAnimationFrame((()=>this.applyDefaultPosition()));document.addEventListener("selectionchange",this.handleSelectionChange)}disconnectedCallback(){this.scrollOverlayController?.disconnect();this.mutationObserver?.disconnect();document.removeEventListener("selectionchange",this.handleSelectionChange)}async scrollToMessage(e){const s=Array.from(this.el.querySelectorAll("ds-message")).find((s=>s.messageId===e||s.getAttribute("message-id")===e));if(!s)return false;this.following=false;this.showScrollToLatest=true;s.scrollIntoView({block:"start",behavior:this.motionBehavior()});return true}async scrollToStart(){this.scrollTo(0);this.following=false;this.showScrollToLatest=Boolean(this.viewport&&this.viewport.scrollHeight>this.viewport.clientHeight)}async scrollToEnd(){this.following=true;this.showScrollToLatest=false;this.scrollTo(this.viewport?.scrollHeight??0)}motionBehavior(){return matchMedia("(prefers-reduced-motion: reduce)").matches?"auto":"smooth"}scrollTo(e){if(!this.viewport)return;this.programmatic=true;this.viewport.scrollTo({top:e,behavior:this.motionBehavior()});requestAnimationFrame((()=>{this.programmatic=false}))}connectObservers(){if(!this.viewport||!this.content||!this.overlay)return;this.previousScrollHeight=this.viewport.scrollHeight;this.scrollOverlayController=new o({host:this.el,viewport:this.viewport,content:this.content,overlay:this.overlay,onGeometryChange:()=>this.handleContentGrowth()});this.scrollOverlayController.connect();this.mutationObserver=new MutationObserver((()=>this.handleContentGrowth()));this.mutationObserver.observe(this.content,{childList:true,subtree:true,characterData:true})}handleContentGrowth(){if(!this.viewport)return;const e=this.viewport.scrollHeight;const s=e-this.previousScrollHeight;if(s>0&&this.viewport.scrollTop<=p&&!this.following){this.viewport.scrollTop+=s}else if(this.autoFollow&&this.following){this.viewport.scrollTop=e}this.previousScrollHeight=e;this.showScrollToLatest=!this.following&&!this.isAtLiveEdge();this.scrollOverlayController?.sync()}applyDefaultPosition(){if(!this.viewport)return;if(this.defaultPosition==="start"){this.viewport.scrollTop=0;this.following=false;this.showScrollToLatest=this.viewport.scrollHeight>this.viewport.clientHeight;this.scrollOverlayController?.sync();return}if(this.defaultPosition==="last-anchor"){const e=this.el.querySelectorAll("ds-message[scroll-anchor]");const s=e.item(e.length-1);if(s){s.scrollIntoView({block:"start"});this.following=this.isAtLiveEdge();this.showScrollToLatest=!this.following;this.scrollOverlayController?.sync();return}}this.viewport.scrollTop=this.viewport.scrollHeight;this.following=true;this.showScrollToLatest=false;this.scrollOverlayController?.sync()}isAtLiveEdge(){if(!this.viewport)return true;return this.viewport.scrollHeight-this.viewport.clientHeight-this.viewport.scrollTop<=p}render(){return a(r,{key:"c913cc43b43c95d60da5984a0c5963c8cdbdb193"},a("div",{key:"465ca3f82da91608fb963214c89fa6db97ca2fc9",class:"message-scroller"},a("div",{key:"6ad576efc33f0c217189b78a67276d9447bdff60",class:"message-scroller__viewport",ref:e=>{this.viewport=e},role:"region","aria-label":this.messagesLabel,tabIndex:0,onScroll:this.handleScroll,onPointerDown:this.releaseFollow,onKeyDown:e=>{if(["ArrowUp","PageUp","Home"].includes(e.key))this.releaseFollow()}},a("div",{key:"6e15d72ca22b5d6ab84e14bae53ecb28fdf2138c",class:"message-scroller__content scroll-edge-fade--block-window",ref:e=>{this.content=e},role:"log","aria-live":"polite","aria-relevant":"additions","aria-busy":this.busy?"true":undefined},a("slot",{key:"e9ac89c978d88111a8ec2acdb3a8730c9cd8641e"}))),a("div",{key:"68e3a69c60187aca1448a8b4ff006f1b16af6c4a",class:"message-scroller__overlay",ref:e=>{this.overlay=e}},a("slot",{key:"acdd34e65890dbe74bd20c485b4956f38e480e18",name:"overlay"})),this.showScrollToLatest?a("div",{class:"message-scroller__control"},a("ds-tooltip",{label:"Scroll to latest message",side:"top",size:"sm"},a("ds-button-unfilled",{variant:"icon",icon:"ChevronDown",size:"md",rounded:true,hasBorder:false,"aria-label":"Scroll to latest message",onDsClick:()=>void this.scrollToEnd()}))):null))}get el(){return this}static get style(){return h()+m()}},[262,"ds-message-scroller",{busy:[4],autoFollow:[4,"auto-follow"],defaultPosition:[1,"default-position"],messagesLabel:[1,"messages-label"],showScrollToLatest:[32],scrollToMessage:[64],scrollToStart:[64],scrollToEnd:[64]}]);function v(){if(typeof customElements==="undefined"){return}const e=["ds-message-scroller","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-message-scroller":if(!customElements.get(l(e))){customElements.define(l(e),b)}break;case"ds-badge":if(!customElements.get(l(e))){d()}break;case"ds-button-unfilled":if(!customElements.get(l(e))){i()}break;case"ds-icon":if(!customElements.get(l(e))){c()}break;case"ds-loader":if(!customElements.get(l(e))){n()}break;case"ds-text":if(!customElements.get(l(e))){g()}break;case"ds-tooltip":if(!customElements.get(l(e))){f()}break}}))}v();const u=b;const k=v;export{u as DsMessageScroller,k as defineCustomElement};
1
+ import{p as e,H as s,c as t,h as r,a,t as l}from"./index.js";import{S as o}from"./p-CY19gMiz.js";import{d as i}from"./p-CH6cNXXF.js";import{d}from"./p-CoYFJD-w.js";import{d as c}from"./p-BAfG3M8z.js";import{d as n}from"./p-Cpr3K41-.js";import{d as f}from"./p-BwGnhInj.js";import{d as g}from"./p-BPS9VExm.js";const h=()=>`@property --ds-scroll-edge-fade-top{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-bottom{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-left{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-right{syntax:'<length-percentage>';inherits:false;initial-value:0px}@keyframes ds-scroll-edge-fade-reveal-top{from{--ds-scroll-edge-fade-top:0px}to{--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top)}}@keyframes ds-scroll-edge-fade-reveal-bottom{from{--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom)}to{--ds-scroll-edge-fade-bottom:0px}}@keyframes ds-scroll-edge-fade-reveal-left{from{--ds-scroll-edge-fade-left:0px}to{--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left)}}@keyframes ds-scroll-edge-fade-reveal-right{from{--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right)}to{--ds-scroll-edge-fade-right:0px}}.scroll-edge-fade.sc-ds-message-scroller{--ds-scroll-edge-fade-size:var(--dimension-size-600);--ds-scroll-edge-fade-reveal-distance:var(--dimension-size-800);--ds-scroll-edge-fade-target-top:0px;--ds-scroll-edge-fade-target-bottom:0px;--ds-scroll-edge-fade-target-left:0px;--ds-scroll-edge-fade-target-right:0px;--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top);--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom);--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left);--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right);--ds-scroll-edge-fade-block-mask:linear-gradient( to bottom, transparent 0, #000 var(--ds-scroll-edge-fade-top), #000 calc(100% - var(--ds-scroll-edge-fade-bottom)), transparent 100% );--ds-scroll-edge-fade-inline-mask:linear-gradient( to right, transparent 0, #000 var(--ds-scroll-edge-fade-left), #000 calc(100% - var(--ds-scroll-edge-fade-right)), transparent 100% );-webkit-mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--top.sc-ds-message-scroller{--ds-scroll-edge-fade-target-top:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--bottom.sc-ds-message-scroller{--ds-scroll-edge-fade-target-bottom:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--left.sc-ds-message-scroller{--ds-scroll-edge-fade-target-left:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--right.sc-ds-message-scroller{--ds-scroll-edge-fade-target-right:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--top-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-top:0px}.scroll-edge-fade--bottom-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-bottom:0px}.scroll-edge-fade--left-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-left:0px}.scroll-edge-fade--right-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-right:0px}@supports (animation-timeline: scroll()){.scroll-edge-fade--scroll-aware.sc-ds-message-scroller{animation-name:ds-scroll-edge-fade-reveal-top, ds-scroll-edge-fade-reveal-bottom, ds-scroll-edge-fade-reveal-left, ds-scroll-edge-fade-reveal-right;animation-duration:1ms;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-timeline:scroll(self y), scroll(self y), scroll(self x), scroll(self x);animation-range:0 var(--ds-scroll-edge-fade-reveal-distance), calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%, 0 var(--ds-scroll-edge-fade-reveal-distance), calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%}@media (prefers-reduced-motion: reduce){.scroll-edge-fade--scroll-aware.sc-ds-message-scroller{animation:none}}}.scroll-edge-fade--at-end.sc-ds-message-scroller,.scroll-edge-fade--hidden.sc-ds-message-scroller{-webkit-mask-image:none;mask-image:none}.scroll-edge-fade--block-window.sc-ds-message-scroller{--ds-scroll-edge-fade-window-start:100%;--ds-scroll-edge-fade-window-end:100%;-webkit-mask-image:linear-gradient( to bottom, #000 0, #000 var(--ds-scroll-edge-fade-window-start), transparent var(--ds-scroll-edge-fade-window-end) );mask-image:linear-gradient( to bottom, #000 0, #000 var(--ds-scroll-edge-fade-window-start), transparent var(--ds-scroll-edge-fade-window-end) );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}`;const m=()=>`.sc-ds-message-scroller-h{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box}.message-scroller.sc-ds-message-scroller{position:relative;width:100%;height:100%;min-height:0}.message-scroller__viewport.sc-ds-message-scroller{width:100%;height:100%;min-height:0;overflow:auto;overscroll-behavior:contain;box-sizing:border-box}.message-scroller__viewport.sc-ds-message-scroller:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.message-scroller__content.sc-ds-message-scroller{display:flex;flex-direction:column;gap:var(--dimension-space-300);width:100%;max-width:var( --ds-message-scroller-content-max-width, var(--dimension-panel-width-2xl) );min-height:100%;margin-inline:auto;padding-block-start:var(--dimension-space-200);padding-inline:var(--dimension-space-200);padding-block-end:calc( var(--dimension-space-200) + var(--ds-scroll-overlay-block-size, 0px) );box-sizing:border-box}.message-scroller__overlay.sc-ds-message-scroller{position:absolute;right:0;bottom:0;left:0;z-index:var(--dimension-z-index-floating)}.message-scroller__control.sc-ds-message-scroller{position:absolute;bottom:calc( var(--ds-scroll-overlay-content-block-size, 0px) + var(--dimension-space-200) );left:50%;z-index:var(--dimension-z-index-floating);display:flex;align-items:center;justify-content:center;border-radius:var(--dimension-radius-half);background:var(--color-background-transparent);box-shadow:var(--effect-elevation-elevated-md);transform:translateX(-50%);-webkit-backdrop-filter:blur(var(--effect-blur-sm));backdrop-filter:blur(var(--effect-blur-sm))}`;const p=24;const b=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsReachStart=t(this,"dsReachStart");this.busy=false;this.autoFollow=true;this.defaultPosition="last-anchor";this.messagesLabel="Messages";this.showScrollToLatest=false;this.following=true;this.atStart=false;this.programmatic=false;this.previousScrollHeight=0;this.handleScroll=()=>{if(!this.viewport)return;this.scrollOverlayController?.sync();if(this.programmatic)return;this.following=this.isAtLiveEdge();this.showScrollToLatest=!this.following;const e=this.viewport.scrollTop<=p;if(e&&!this.atStart)this.dsReachStart.emit();this.atStart=e};this.releaseFollow=()=>{this.following=false;this.showScrollToLatest=!this.isAtLiveEdge()};this.handleSelectionChange=()=>{const e=document.getSelection();if(e&&!e.isCollapsed&&e.anchorNode&&this.el.contains(e.anchorNode)){this.following=false;this.showScrollToLatest=!this.isAtLiveEdge()}}}componentDidLoad(){this.connectObservers();requestAnimationFrame((()=>this.applyDefaultPosition()));document.addEventListener("selectionchange",this.handleSelectionChange)}disconnectedCallback(){this.scrollOverlayController?.disconnect();this.mutationObserver?.disconnect();document.removeEventListener("selectionchange",this.handleSelectionChange)}async scrollToMessage(e){const s=Array.from(this.el.querySelectorAll("ds-message")).find((s=>s.messageId===e||s.getAttribute("message-id")===e));if(!s)return false;this.following=false;this.showScrollToLatest=true;s.scrollIntoView({block:"start",behavior:this.motionBehavior()});return true}async scrollToStart(){this.scrollTo(0);this.following=false;this.showScrollToLatest=Boolean(this.viewport&&this.viewport.scrollHeight>this.viewport.clientHeight)}async scrollToEnd(){this.following=true;this.showScrollToLatest=false;this.scrollTo(this.viewport?.scrollHeight??0)}motionBehavior(){return matchMedia("(prefers-reduced-motion: reduce)").matches?"auto":"smooth"}scrollTo(e){if(!this.viewport)return;this.programmatic=true;this.viewport.scrollTo({top:e,behavior:this.motionBehavior()});requestAnimationFrame((()=>{this.programmatic=false}))}connectObservers(){if(!this.viewport||!this.content||!this.overlay)return;this.previousScrollHeight=this.viewport.scrollHeight;this.scrollOverlayController=new o({host:this.el,viewport:this.viewport,content:this.content,overlay:this.overlay,onGeometryChange:()=>this.handleContentGrowth()});this.scrollOverlayController.connect();this.mutationObserver=new MutationObserver((()=>this.handleContentGrowth()));this.mutationObserver.observe(this.content,{childList:true,subtree:true,characterData:true})}handleContentGrowth(){if(!this.viewport)return;const e=this.viewport.scrollHeight;const s=e-this.previousScrollHeight;if(s>0&&this.viewport.scrollTop<=p&&!this.following){this.viewport.scrollTop+=s}else if(this.autoFollow&&this.following){this.viewport.scrollTop=e}this.previousScrollHeight=e;this.showScrollToLatest=!this.following&&!this.isAtLiveEdge();this.scrollOverlayController?.sync()}applyDefaultPosition(){if(!this.viewport)return;if(this.defaultPosition==="start"){this.viewport.scrollTop=0;this.following=false;this.showScrollToLatest=this.viewport.scrollHeight>this.viewport.clientHeight;this.scrollOverlayController?.sync();return}if(this.defaultPosition==="last-anchor"){const e=this.el.querySelectorAll("ds-message[scroll-anchor]");const s=e.item(e.length-1);if(s){s.scrollIntoView({block:"start"});this.following=this.isAtLiveEdge();this.showScrollToLatest=!this.following;this.scrollOverlayController?.sync();return}}this.viewport.scrollTop=this.viewport.scrollHeight;this.following=true;this.showScrollToLatest=false;this.scrollOverlayController?.sync()}isAtLiveEdge(){if(!this.viewport)return true;return this.viewport.scrollHeight-this.viewport.clientHeight-this.viewport.scrollTop<=p}render(){return r(a,{key:"2861b415dbd15b08a5c12daf8dffedfec9cc696c"},r("div",{key:"5b6b0983b001858e19bfe2a586e488019ae6f445",class:"message-scroller"},r("div",{key:"e105d4a67cb4d9e6f2524224d4542383ccb037f1",class:"message-scroller__viewport",ref:e=>{this.viewport=e},role:"region","aria-label":this.messagesLabel,tabIndex:0,onScroll:this.handleScroll,onPointerDown:this.releaseFollow,onKeyDown:e=>{if(["ArrowUp","PageUp","Home"].includes(e.key))this.releaseFollow()}},r("div",{key:"5521438681f0952d0362c8f28e9b5cf547e51c83",class:"message-scroller__content scroll-edge-fade--block-window",ref:e=>{this.content=e},role:"log","aria-live":"polite","aria-relevant":"additions","aria-busy":this.busy?"true":undefined},r("slot",{key:"f043b3f63105c8e971ff422806ca17fa153d951f"}))),r("div",{key:"4e2157c4928c7d6abab5bf8be8616d05cfaabb29",class:"message-scroller__overlay",ref:e=>{this.overlay=e}},r("slot",{key:"391a3686e8fbb3cda416b1cb4e63353faa60e9c5",name:"overlay"})),this.showScrollToLatest?r("div",{class:"message-scroller__control"},r("ds-tooltip",{label:"Scroll to latest message",side:"top",size:"sm"},r("ds-button-unfilled",{variant:"icon",icon:"ChevronDown",size:"md",rounded:true,hasBorder:false,"aria-label":"Scroll to latest message",onDsClick:()=>void this.scrollToEnd()}))):null))}get el(){return this}static get style(){return h()+m()}},[262,"ds-message-scroller",{busy:[4],autoFollow:[4,"auto-follow"],defaultPosition:[1,"default-position"],messagesLabel:[1,"messages-label"],showScrollToLatest:[32],scrollToMessage:[64],scrollToStart:[64],scrollToEnd:[64]}]);function v(){if(typeof customElements==="undefined"){return}const e=["ds-message-scroller","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-message-scroller":if(!customElements.get(l(e))){customElements.define(l(e),b)}break;case"ds-badge":if(!customElements.get(l(e))){i()}break;case"ds-button-unfilled":if(!customElements.get(l(e))){d()}break;case"ds-icon":if(!customElements.get(l(e))){c()}break;case"ds-loader":if(!customElements.get(l(e))){n()}break;case"ds-text":if(!customElements.get(l(e))){f()}break;case"ds-tooltip":if(!customElements.get(l(e))){g()}break}}))}v();const u=b;const k=v;export{u as DsMessageScroller,k as defineCustomElement};
2
2
  //# sourceMappingURL=ds-message-scroller.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["scrollEdgeFadeCss","messageScrollerCss","LIVE_EDGE_THRESHOLD","MessageScroller","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","busy","autoFollow","defaultPosition","messagesLabel","showScrollToLatest","following","atStart","programmatic","previousScrollHeight","handleScroll","viewport","scrollOverlayController","sync","isAtLiveEdge","nextAtStart","scrollTop","dsReachStart","emit","releaseFollow","handleSelectionChange","selection","document","getSelection","isCollapsed","anchorNode","el","contains","componentDidLoad","connectObservers","requestAnimationFrame","applyDefaultPosition","addEventListener","disconnectedCallback","disconnect","mutationObserver","removeEventListener","scrollToMessage","id","message","Array","from","querySelectorAll","find","item","messageId","getAttribute","scrollIntoView","block","behavior","motionBehavior","scrollToStart","scrollTo","Boolean","scrollHeight","clientHeight","scrollToEnd","matchMedia","matches","top","content","overlay","ScrollOverlayController","host","onGeometryChange","handleContentGrowth","connect","MutationObserver","observe","childList","subtree","characterData","nextHeight","delta","anchors","last","length","render","h","Host","key","class","ref","element","role","tabIndex","onScroll","onPointerDown","onKeyDown","event","includes","undefined","name","label","side","size","variant","icon","rounded","hasBorder","onDsClick"],"sources":["src/wc/utils/scroll-edge-fade.css?tag=ds-message-scroller&encapsulation=scoped","src/wc/components/MessageScroller/MessageScroller.css?tag=ds-message-scroller&encapsulation=scoped","src/wc/components/MessageScroller/MessageScroller.tsx"],"sourcesContent":["/**\n * Scroll-edge alpha fade — the single edge-fade utility for overflow containers.\n * Masks scrolling content to transparent so flat surfaces, shell gradients, and\n * images show through.\n *\n * Static fades are the default (PanelNav intentionally keeps its bottom fade).\n * Add `.scroll-edge-fade--scroll-aware` to reveal/hide each configured edge from\n * the container's own scroll position without JavaScript. Browsers without CSS\n * scroll-driven animations retain the configured static fades.\n *\n * @see scroll-edge-fade.ts — `scrollEdgeFadeClassMap`, `isScrollAtEdge`, size helpers.\n */\n\n@property --ds-scroll-edge-fade-top {\n syntax: '<length-percentage>';\n inherits: false;\n /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-bottom {\n syntax: '<length-percentage>';\n inherits: false;\n /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-left {\n syntax: '<length-percentage>';\n inherits: false;\n /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-right {\n syntax: '<length-percentage>';\n inherits: false;\n /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n initial-value: 0px;\n}\n\n@keyframes ds-scroll-edge-fade-reveal-top {\n from { --ds-scroll-edge-fade-top: 0px; }\n to { --ds-scroll-edge-fade-top: var(--ds-scroll-edge-fade-target-top); }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-bottom {\n from { --ds-scroll-edge-fade-bottom: var(--ds-scroll-edge-fade-target-bottom); }\n to { --ds-scroll-edge-fade-bottom: 0px; }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-left {\n from { --ds-scroll-edge-fade-left: 0px; }\n to { --ds-scroll-edge-fade-left: var(--ds-scroll-edge-fade-target-left); }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-right {\n from { --ds-scroll-edge-fade-right: var(--ds-scroll-edge-fade-target-right); }\n to { --ds-scroll-edge-fade-right: 0px; }\n}\n\n/* Mask gradients use #000 / transparent as alpha stops — not theme colors. */\n/* stylelint-disable color-no-hex */\n\n.scroll-edge-fade {\n --ds-scroll-edge-fade-size: var(--dimension-size-600);\n --ds-scroll-edge-fade-reveal-distance: var(--dimension-size-800);\n --ds-scroll-edge-fade-target-top: 0px;\n --ds-scroll-edge-fade-target-bottom: 0px;\n --ds-scroll-edge-fade-target-left: 0px;\n --ds-scroll-edge-fade-target-right: 0px;\n --ds-scroll-edge-fade-top: var(--ds-scroll-edge-fade-target-top);\n --ds-scroll-edge-fade-bottom: var(--ds-scroll-edge-fade-target-bottom);\n --ds-scroll-edge-fade-left: var(--ds-scroll-edge-fade-target-left);\n --ds-scroll-edge-fade-right: var(--ds-scroll-edge-fade-target-right);\n --ds-scroll-edge-fade-block-mask: linear-gradient(\n to bottom,\n transparent 0,\n #000 var(--ds-scroll-edge-fade-top),\n #000 calc(100% - var(--ds-scroll-edge-fade-bottom)),\n transparent 100%\n );\n --ds-scroll-edge-fade-inline-mask: linear-gradient(\n to right,\n transparent 0,\n #000 var(--ds-scroll-edge-fade-left),\n #000 calc(100% - var(--ds-scroll-edge-fade-right)),\n transparent 100%\n );\n\n /* Intersecting the block and inline masks lets every edge compose correctly. */\n -webkit-mask-image:\n var(--ds-scroll-edge-fade-block-mask),\n var(--ds-scroll-edge-fade-inline-mask);\n mask-image:\n var(--ds-scroll-edge-fade-block-mask),\n var(--ds-scroll-edge-fade-inline-mask);\n -webkit-mask-composite: source-in;\n mask-composite: intersect;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n}\n\n.scroll-edge-fade--top {\n --ds-scroll-edge-fade-target-top: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--bottom {\n --ds-scroll-edge-fade-target-bottom: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--left {\n --ds-scroll-edge-fade-target-left: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--right {\n --ds-scroll-edge-fade-target-right: var(--ds-scroll-edge-fade-size);\n}\n\n/* Manual per-edge state remains available when scroll state already lives in JS. */\n.scroll-edge-fade--top-at-edge {\n --ds-scroll-edge-fade-target-top: 0px;\n}\n\n.scroll-edge-fade--bottom-at-edge {\n --ds-scroll-edge-fade-target-bottom: 0px;\n}\n\n.scroll-edge-fade--left-at-edge {\n --ds-scroll-edge-fade-target-left: 0px;\n}\n\n.scroll-edge-fade--right-at-edge {\n --ds-scroll-edge-fade-target-right: 0px;\n}\n\n@supports (animation-timeline: scroll()) {\n .scroll-edge-fade--scroll-aware {\n animation-name:\n ds-scroll-edge-fade-reveal-top,\n ds-scroll-edge-fade-reveal-bottom,\n ds-scroll-edge-fade-reveal-left,\n ds-scroll-edge-fade-reveal-right;\n /* stylelint-disable-next-line declaration-property-value-disallowed-list -- scroll timelines require a nonzero sentinel duration; elapsed time is ignored. */\n animation-duration: 1ms;\n animation-timing-function: ease-in-out;\n animation-fill-mode: both;\n animation-timeline: scroll(self y), scroll(self y), scroll(self x), scroll(self x);\n animation-range:\n 0 var(--ds-scroll-edge-fade-reveal-distance),\n calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%,\n 0 var(--ds-scroll-edge-fade-reveal-distance),\n calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .scroll-edge-fade--scroll-aware {\n animation: none;\n }\n }\n}\n\n.scroll-edge-fade--at-end,\n.scroll-edge-fade--hidden {\n -webkit-mask-image: none;\n mask-image: none;\n}\n\n/**\n * Masks a long content element against a scrollport-relative block window.\n * The owner updates the start/end offsets as the scrollport moves. Keeping the\n * mask on the content instead of the overflow element leaves native scrollbars\n * outside the fade.\n */\n.scroll-edge-fade--block-window {\n --ds-scroll-edge-fade-window-start: 100%;\n --ds-scroll-edge-fade-window-end: 100%;\n\n -webkit-mask-image: linear-gradient(\n to bottom,\n #000 0,\n #000 var(--ds-scroll-edge-fade-window-start),\n transparent var(--ds-scroll-edge-fade-window-end)\n );\n mask-image: linear-gradient(\n to bottom,\n #000 0,\n #000 var(--ds-scroll-edge-fade-window-start),\n transparent var(--ds-scroll-edge-fade-window-end)\n );\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n}\n\n/* stylelint-enable color-no-hex */\n",":host {\n display: block;\n width: 100%;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n}\n\n.message-scroller {\n position: relative;\n width: 100%;\n height: 100%;\n min-height: 0;\n}\n\n.message-scroller__viewport {\n width: 100%;\n height: 100%;\n min-height: 0;\n overflow: auto;\n overscroll-behavior: contain;\n box-sizing: border-box;\n}\n\n.message-scroller__viewport:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);\n outline-offset: calc(-1 * var(--dimension-stroke-width-025));\n}\n\n.message-scroller__content {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-300);\n width: 100%;\n max-width: var(--dimension-panel-width-2xl);\n min-height: 100%;\n margin-inline: auto;\n padding-block-start: var(--dimension-space-200);\n padding-inline: var(--dimension-space-200);\n padding-block-end: calc(\n var(--dimension-space-200) + var(--ds-scroll-overlay-block-size, 0px)\n );\n box-sizing: border-box;\n}\n\n.message-scroller__overlay {\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--dimension-z-index-floating);\n}\n\n.message-scroller__control {\n position: absolute;\n bottom: calc(\n var(--ds-scroll-overlay-content-block-size, 0px) + var(--dimension-space-200)\n );\n left: 50%;\n z-index: var(--dimension-z-index-floating);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--dimension-radius-half);\n background: var(--color-background-transparent);\n box-shadow: var(--effect-elevation-elevated-md);\n transform: translateX(-50%);\n -webkit-backdrop-filter: blur(var(--effect-blur-sm));\n backdrop-filter: blur(var(--effect-blur-sm));\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport type { MessageScrollerPosition } from '../conversation-types';\nimport { ScrollOverlayController } from '../../utils/scroll-overlay-controller';\n\nconst LIVE_EDGE_THRESHOLD = 24;\n\n@Component({\n tag: 'ds-message-scroller',\n styleUrl: 'MessageScroller.css',\n styleUrls: ['../../utils/scroll-edge-fade.css'],\n scoped: true,\n})\nexport class MessageScroller {\n @Element() el!: HTMLElement;\n\n @Prop() busy: boolean = false;\n @Prop() autoFollow: boolean = true;\n @Prop() defaultPosition: MessageScrollerPosition = 'last-anchor';\n @Prop() messagesLabel: string = 'Messages';\n\n @Event() dsReachStart!: EventEmitter<void>;\n\n @State() private showScrollToLatest = false;\n\n private viewport?: HTMLElement;\n private content?: HTMLElement;\n private overlay?: HTMLElement;\n private scrollOverlayController?: ScrollOverlayController;\n private mutationObserver?: MutationObserver;\n private following = true;\n private atStart = false;\n private programmatic = false;\n private previousScrollHeight = 0;\n\n componentDidLoad() {\n this.connectObservers();\n requestAnimationFrame(() => this.applyDefaultPosition());\n document.addEventListener('selectionchange', this.handleSelectionChange);\n }\n\n disconnectedCallback() {\n this.scrollOverlayController?.disconnect();\n this.mutationObserver?.disconnect();\n document.removeEventListener('selectionchange', this.handleSelectionChange);\n }\n\n @Method()\n async scrollToMessage(id: string): Promise<boolean> {\n const message = Array.from(\n this.el.querySelectorAll<HTMLElement & { messageId?: string }>('ds-message')\n ).find(item => item.messageId === id || item.getAttribute('message-id') === id);\n if (!message) return false;\n this.following = false;\n this.showScrollToLatest = true;\n message.scrollIntoView({ block: 'start', behavior: this.motionBehavior() });\n return true;\n }\n\n @Method()\n async scrollToStart() {\n this.scrollTo(0);\n this.following = false;\n this.showScrollToLatest = Boolean(\n this.viewport && this.viewport.scrollHeight > this.viewport.clientHeight\n );\n }\n\n @Method()\n async scrollToEnd() {\n this.following = true;\n this.showScrollToLatest = false;\n this.scrollTo(this.viewport?.scrollHeight ?? 0);\n }\n\n private motionBehavior(): ScrollBehavior {\n return matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth';\n }\n\n private scrollTo(top: number) {\n if (!this.viewport) return;\n this.programmatic = true;\n this.viewport.scrollTo({ top, behavior: this.motionBehavior() });\n requestAnimationFrame(() => {\n this.programmatic = false;\n });\n }\n\n private connectObservers() {\n if (!this.viewport || !this.content || !this.overlay) return;\n this.previousScrollHeight = this.viewport.scrollHeight;\n this.scrollOverlayController = new ScrollOverlayController({\n host: this.el,\n viewport: this.viewport,\n content: this.content,\n overlay: this.overlay,\n onGeometryChange: () => this.handleContentGrowth(),\n });\n this.scrollOverlayController.connect();\n this.mutationObserver = new MutationObserver(() => this.handleContentGrowth());\n this.mutationObserver.observe(this.content, {\n childList: true,\n subtree: true,\n characterData: true,\n });\n }\n\n private handleContentGrowth() {\n if (!this.viewport) return;\n const nextHeight = this.viewport.scrollHeight;\n const delta = nextHeight - this.previousScrollHeight;\n if (delta > 0 && this.viewport.scrollTop <= LIVE_EDGE_THRESHOLD && !this.following) {\n this.viewport.scrollTop += delta;\n } else if (this.autoFollow && this.following) {\n this.viewport.scrollTop = nextHeight;\n }\n this.previousScrollHeight = nextHeight;\n this.showScrollToLatest = !this.following && !this.isAtLiveEdge();\n this.scrollOverlayController?.sync();\n }\n\n private applyDefaultPosition() {\n if (!this.viewport) return;\n if (this.defaultPosition === 'start') {\n this.viewport.scrollTop = 0;\n this.following = false;\n this.showScrollToLatest = this.viewport.scrollHeight > this.viewport.clientHeight;\n this.scrollOverlayController?.sync();\n return;\n }\n if (this.defaultPosition === 'last-anchor') {\n const anchors = this.el.querySelectorAll<HTMLElement>('ds-message[scroll-anchor]');\n const last = anchors.item(anchors.length - 1);\n if (last) {\n last.scrollIntoView({ block: 'start' });\n this.following = this.isAtLiveEdge();\n this.showScrollToLatest = !this.following;\n this.scrollOverlayController?.sync();\n return;\n }\n }\n this.viewport.scrollTop = this.viewport.scrollHeight;\n this.following = true;\n this.showScrollToLatest = false;\n this.scrollOverlayController?.sync();\n }\n\n private isAtLiveEdge(): boolean {\n if (!this.viewport) return true;\n return (\n this.viewport.scrollHeight - this.viewport.clientHeight - this.viewport.scrollTop <=\n LIVE_EDGE_THRESHOLD\n );\n }\n\n private handleScroll = () => {\n if (!this.viewport) return;\n this.scrollOverlayController?.sync();\n if (this.programmatic) return;\n this.following = this.isAtLiveEdge();\n this.showScrollToLatest = !this.following;\n const nextAtStart = this.viewport.scrollTop <= LIVE_EDGE_THRESHOLD;\n if (nextAtStart && !this.atStart) this.dsReachStart.emit();\n this.atStart = nextAtStart;\n };\n\n private releaseFollow = () => {\n this.following = false;\n this.showScrollToLatest = !this.isAtLiveEdge();\n };\n\n private handleSelectionChange = () => {\n const selection = document.getSelection();\n if (\n selection &&\n !selection.isCollapsed &&\n selection.anchorNode &&\n this.el.contains(selection.anchorNode)\n ) {\n this.following = false;\n this.showScrollToLatest = !this.isAtLiveEdge();\n }\n };\n\n render() {\n return (\n <Host>\n <div class=\"message-scroller\">\n <div\n class=\"message-scroller__viewport\"\n ref={element => {\n this.viewport = element;\n }}\n role=\"region\"\n aria-label={this.messagesLabel}\n tabIndex={0}\n onScroll={this.handleScroll}\n onPointerDown={this.releaseFollow}\n onKeyDown={(event: KeyboardEvent) => {\n if (['ArrowUp', 'PageUp', 'Home'].includes(event.key)) this.releaseFollow();\n }}\n >\n <div\n class=\"message-scroller__content scroll-edge-fade--block-window\"\n ref={element => {\n this.content = element;\n }}\n role=\"log\"\n aria-live=\"polite\"\n aria-relevant=\"additions\"\n aria-busy={this.busy ? 'true' : undefined}\n >\n <slot />\n </div>\n </div>\n <div\n class=\"message-scroller__overlay\"\n ref={element => {\n this.overlay = element;\n }}\n >\n <slot name=\"overlay\" />\n </div>\n {this.showScrollToLatest ? (\n <div class=\"message-scroller__control\">\n <ds-tooltip label=\"Scroll to latest message\" side=\"top\" size=\"sm\">\n <ds-button-unfilled\n variant=\"icon\"\n icon=\"ChevronDown\"\n size=\"md\"\n rounded\n hasBorder={false}\n aria-label=\"Scroll to latest message\"\n onDsClick={() => void this.scrollToEnd()}\n />\n </ds-tooltip>\n </div>\n ) : null}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yTAAA,MAAMA,EAAoB,IAAM,uhJCAhC,MAAMC,EAAqB,IAAM,omDCcjC,MAAMC,EAAsB,G,MAQfC,EAAeC,EAAA,MAAAD,UAAAE,EAN5B,WAAAC,CAAAC,G,qFASUC,KAAAC,KAAgB,MAChBD,KAAAE,WAAsB,KACtBF,KAAAG,gBAA2C,cAC3CH,KAAAI,cAAwB,WAIfJ,KAAAK,mBAAqB,MAO9BL,KAAAM,UAAY,KACZN,KAAAO,QAAU,MACVP,KAAAQ,aAAe,MACfR,KAAAS,qBAAuB,EA0HvBT,KAAAU,aAAe,KACrB,IAAKV,KAAKW,SAAU,OACpBX,KAAKY,yBAAyBC,OAC9B,GAAIb,KAAKQ,aAAc,OACvBR,KAAKM,UAAYN,KAAKc,eACtBd,KAAKK,oBAAsBL,KAAKM,UAChC,MAAMS,EAAcf,KAAKW,SAASK,WAAatB,EAC/C,GAAIqB,IAAgBf,KAAKO,QAASP,KAAKiB,aAAaC,OACpDlB,KAAKO,QAAUQ,CAAW,EAGpBf,KAAAmB,cAAgB,KACtBnB,KAAKM,UAAY,MACjBN,KAAKK,oBAAsBL,KAAKc,cAAc,EAGxCd,KAAAoB,sBAAwB,KAC9B,MAAMC,EAAYC,SAASC,eAC3B,GACEF,IACCA,EAAUG,aACXH,EAAUI,YACVzB,KAAK0B,GAAGC,SAASN,EAAUI,YAC3B,CACAzB,KAAKM,UAAY,MACjBN,KAAKK,oBAAsBL,KAAKc,c,EA8DrC,CA/MC,gBAAAc,GACE5B,KAAK6B,mBACLC,uBAAsB,IAAM9B,KAAK+B,yBACjCT,SAASU,iBAAiB,kBAAmBhC,KAAKoB,sB,CAGpD,oBAAAa,GACEjC,KAAKY,yBAAyBsB,aAC9BlC,KAAKmC,kBAAkBD,aACvBZ,SAASc,oBAAoB,kBAAmBpC,KAAKoB,sB,CAIvD,qBAAMiB,CAAgBC,GACpB,MAAMC,EAAUC,MAAMC,KACpBzC,KAAK0B,GAAGgB,iBAAuD,eAC/DC,MAAKC,GAAQA,EAAKC,YAAcP,GAAMM,EAAKE,aAAa,gBAAkBR,IAC5E,IAAKC,EAAS,OAAO,MACrBvC,KAAKM,UAAY,MACjBN,KAAKK,mBAAqB,KAC1BkC,EAAQQ,eAAe,CAAEC,MAAO,QAASC,SAAUjD,KAAKkD,mBACxD,OAAO,I,CAIT,mBAAMC,GACJnD,KAAKoD,SAAS,GACdpD,KAAKM,UAAY,MACjBN,KAAKK,mBAAqBgD,QACxBrD,KAAKW,UAAYX,KAAKW,SAAS2C,aAAetD,KAAKW,SAAS4C,a,CAKhE,iBAAMC,GACJxD,KAAKM,UAAY,KACjBN,KAAKK,mBAAqB,MAC1BL,KAAKoD,SAASpD,KAAKW,UAAU2C,cAAgB,E,CAGvC,cAAAJ,GACN,OAAOO,WAAW,oCAAoCC,QAAU,OAAS,Q,CAGnE,QAAAN,CAASO,GACf,IAAK3D,KAAKW,SAAU,OACpBX,KAAKQ,aAAe,KACpBR,KAAKW,SAASyC,SAAS,CAAEO,MAAKV,SAAUjD,KAAKkD,mBAC7CpB,uBAAsB,KACpB9B,KAAKQ,aAAe,KAAK,G,CAIrB,gBAAAqB,GACN,IAAK7B,KAAKW,WAAaX,KAAK4D,UAAY5D,KAAK6D,QAAS,OACtD7D,KAAKS,qBAAuBT,KAAKW,SAAS2C,aAC1CtD,KAAKY,wBAA0B,IAAIkD,EAAwB,CACzDC,KAAM/D,KAAK0B,GACXf,SAAUX,KAAKW,SACfiD,QAAS5D,KAAK4D,QACdC,QAAS7D,KAAK6D,QACdG,iBAAkB,IAAMhE,KAAKiE,wBAE/BjE,KAAKY,wBAAwBsD,UAC7BlE,KAAKmC,iBAAmB,IAAIgC,kBAAiB,IAAMnE,KAAKiE,wBACxDjE,KAAKmC,iBAAiBiC,QAAQpE,KAAK4D,QAAS,CAC1CS,UAAW,KACXC,QAAS,KACTC,cAAe,M,CAIX,mBAAAN,GACN,IAAKjE,KAAKW,SAAU,OACpB,MAAM6D,EAAaxE,KAAKW,SAAS2C,aACjC,MAAMmB,EAAQD,EAAaxE,KAAKS,qBAChC,GAAIgE,EAAQ,GAAKzE,KAAKW,SAASK,WAAatB,IAAwBM,KAAKM,UAAW,CAClFN,KAAKW,SAASK,WAAayD,C,MACtB,GAAIzE,KAAKE,YAAcF,KAAKM,UAAW,CAC5CN,KAAKW,SAASK,UAAYwD,C,CAE5BxE,KAAKS,qBAAuB+D,EAC5BxE,KAAKK,oBAAsBL,KAAKM,YAAcN,KAAKc,eACnDd,KAAKY,yBAAyBC,M,CAGxB,oBAAAkB,GACN,IAAK/B,KAAKW,SAAU,OACpB,GAAIX,KAAKG,kBAAoB,QAAS,CACpCH,KAAKW,SAASK,UAAY,EAC1BhB,KAAKM,UAAY,MACjBN,KAAKK,mBAAqBL,KAAKW,SAAS2C,aAAetD,KAAKW,SAAS4C,aACrEvD,KAAKY,yBAAyBC,OAC9B,M,CAEF,GAAIb,KAAKG,kBAAoB,cAAe,CAC1C,MAAMuE,EAAU1E,KAAK0B,GAAGgB,iBAA8B,6BACtD,MAAMiC,EAAOD,EAAQ9B,KAAK8B,EAAQE,OAAS,GAC3C,GAAID,EAAM,CACRA,EAAK5B,eAAe,CAAEC,MAAO,UAC7BhD,KAAKM,UAAYN,KAAKc,eACtBd,KAAKK,oBAAsBL,KAAKM,UAChCN,KAAKY,yBAAyBC,OAC9B,M,EAGJb,KAAKW,SAASK,UAAYhB,KAAKW,SAAS2C,aACxCtD,KAAKM,UAAY,KACjBN,KAAKK,mBAAqB,MAC1BL,KAAKY,yBAAyBC,M,CAGxB,YAAAC,GACN,IAAKd,KAAKW,SAAU,OAAO,KAC3B,OACEX,KAAKW,SAAS2C,aAAetD,KAAKW,SAAS4C,aAAevD,KAAKW,SAASK,WACxEtB,C,CAiCJ,MAAAmF,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACTH,EAAA,OAAAE,IAAA,2CACEC,MAAM,6BACNC,IAAKC,IACHnF,KAAKW,SAAWwE,CAAO,EAEzBC,KAAK,SAAQ,aACDpF,KAAKI,cACjBiF,SAAU,EACVC,SAAUtF,KAAKU,aACf6E,cAAevF,KAAKmB,cACpBqE,UAAYC,IACV,GAAI,CAAC,UAAW,SAAU,QAAQC,SAASD,EAAMT,KAAMhF,KAAKmB,eAAe,GAG7E2D,EAAA,OAAAE,IAAA,2CACEC,MAAM,2DACNC,IAAKC,IACHnF,KAAK4D,QAAUuB,CAAO,EAExBC,KAAK,MAAK,YACA,SAAQ,gBACJ,YAAW,YACdpF,KAAKC,KAAO,OAAS0F,WAEhCb,EAAA,QAAAE,IAAA,+CAGJF,EAAA,OAAAE,IAAA,2CACEC,MAAM,4BACNC,IAAKC,IACHnF,KAAK6D,QAAUsB,CAAO,GAGxBL,EAAA,QAAAE,IAAA,2CAAMY,KAAK,aAEZ5F,KAAKK,mBACJyE,EAAA,OAAKG,MAAM,6BACTH,EAAA,cAAYe,MAAM,2BAA2BC,KAAK,MAAMC,KAAK,MAC3DjB,EAAA,sBACEkB,QAAQ,OACRC,KAAK,cACLF,KAAK,KACLG,QAAO,KACPC,UAAW,MAAK,aACL,2BACXC,UAAW,SAAWpG,KAAKwD,kBAI/B,M","ignoreList":[]}
1
+ {"version":3,"names":["scrollEdgeFadeCss","messageScrollerCss","LIVE_EDGE_THRESHOLD","MessageScroller","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","busy","autoFollow","defaultPosition","messagesLabel","showScrollToLatest","following","atStart","programmatic","previousScrollHeight","handleScroll","viewport","scrollOverlayController","sync","isAtLiveEdge","nextAtStart","scrollTop","dsReachStart","emit","releaseFollow","handleSelectionChange","selection","document","getSelection","isCollapsed","anchorNode","el","contains","componentDidLoad","connectObservers","requestAnimationFrame","applyDefaultPosition","addEventListener","disconnectedCallback","disconnect","mutationObserver","removeEventListener","scrollToMessage","id","message","Array","from","querySelectorAll","find","item","messageId","getAttribute","scrollIntoView","block","behavior","motionBehavior","scrollToStart","scrollTo","Boolean","scrollHeight","clientHeight","scrollToEnd","matchMedia","matches","top","content","overlay","ScrollOverlayController","host","onGeometryChange","handleContentGrowth","connect","MutationObserver","observe","childList","subtree","characterData","nextHeight","delta","anchors","last","length","render","h","Host","key","class","ref","element","role","tabIndex","onScroll","onPointerDown","onKeyDown","event","includes","undefined","name","label","side","size","variant","icon","rounded","hasBorder","onDsClick"],"sources":["src/wc/utils/scroll-edge-fade.css?tag=ds-message-scroller&encapsulation=scoped","src/wc/components/MessageScroller/MessageScroller.css?tag=ds-message-scroller&encapsulation=scoped","src/wc/components/MessageScroller/MessageScroller.tsx"],"sourcesContent":["/**\n * Scroll-edge alpha fade — the single edge-fade utility for overflow containers.\n * Masks scrolling content to transparent so flat surfaces, shell gradients, and\n * images show through.\n *\n * Static fades are the default (PanelNav intentionally keeps its bottom fade).\n * Add `.scroll-edge-fade--scroll-aware` to reveal/hide each configured edge from\n * the container's own scroll position without JavaScript. Browsers without CSS\n * scroll-driven animations retain the configured static fades.\n *\n * @see scroll-edge-fade.ts — `scrollEdgeFadeClassMap`, `isScrollAtEdge`, size helpers.\n */\n\n@property --ds-scroll-edge-fade-top {\n syntax: '<length-percentage>';\n inherits: false;\n /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-bottom {\n syntax: '<length-percentage>';\n inherits: false;\n /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-left {\n syntax: '<length-percentage>';\n inherits: false;\n /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-right {\n syntax: '<length-percentage>';\n inherits: false;\n /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n initial-value: 0px;\n}\n\n@keyframes ds-scroll-edge-fade-reveal-top {\n from { --ds-scroll-edge-fade-top: 0px; }\n to { --ds-scroll-edge-fade-top: var(--ds-scroll-edge-fade-target-top); }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-bottom {\n from { --ds-scroll-edge-fade-bottom: var(--ds-scroll-edge-fade-target-bottom); }\n to { --ds-scroll-edge-fade-bottom: 0px; }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-left {\n from { --ds-scroll-edge-fade-left: 0px; }\n to { --ds-scroll-edge-fade-left: var(--ds-scroll-edge-fade-target-left); }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-right {\n from { --ds-scroll-edge-fade-right: var(--ds-scroll-edge-fade-target-right); }\n to { --ds-scroll-edge-fade-right: 0px; }\n}\n\n/* Mask gradients use #000 / transparent as alpha stops — not theme colors. */\n/* stylelint-disable color-no-hex */\n\n.scroll-edge-fade {\n --ds-scroll-edge-fade-size: var(--dimension-size-600);\n --ds-scroll-edge-fade-reveal-distance: var(--dimension-size-800);\n --ds-scroll-edge-fade-target-top: 0px;\n --ds-scroll-edge-fade-target-bottom: 0px;\n --ds-scroll-edge-fade-target-left: 0px;\n --ds-scroll-edge-fade-target-right: 0px;\n --ds-scroll-edge-fade-top: var(--ds-scroll-edge-fade-target-top);\n --ds-scroll-edge-fade-bottom: var(--ds-scroll-edge-fade-target-bottom);\n --ds-scroll-edge-fade-left: var(--ds-scroll-edge-fade-target-left);\n --ds-scroll-edge-fade-right: var(--ds-scroll-edge-fade-target-right);\n --ds-scroll-edge-fade-block-mask: linear-gradient(\n to bottom,\n transparent 0,\n #000 var(--ds-scroll-edge-fade-top),\n #000 calc(100% - var(--ds-scroll-edge-fade-bottom)),\n transparent 100%\n );\n --ds-scroll-edge-fade-inline-mask: linear-gradient(\n to right,\n transparent 0,\n #000 var(--ds-scroll-edge-fade-left),\n #000 calc(100% - var(--ds-scroll-edge-fade-right)),\n transparent 100%\n );\n\n /* Intersecting the block and inline masks lets every edge compose correctly. */\n -webkit-mask-image:\n var(--ds-scroll-edge-fade-block-mask),\n var(--ds-scroll-edge-fade-inline-mask);\n mask-image:\n var(--ds-scroll-edge-fade-block-mask),\n var(--ds-scroll-edge-fade-inline-mask);\n -webkit-mask-composite: source-in;\n mask-composite: intersect;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n}\n\n.scroll-edge-fade--top {\n --ds-scroll-edge-fade-target-top: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--bottom {\n --ds-scroll-edge-fade-target-bottom: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--left {\n --ds-scroll-edge-fade-target-left: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--right {\n --ds-scroll-edge-fade-target-right: var(--ds-scroll-edge-fade-size);\n}\n\n/* Manual per-edge state remains available when scroll state already lives in JS. */\n.scroll-edge-fade--top-at-edge {\n --ds-scroll-edge-fade-target-top: 0px;\n}\n\n.scroll-edge-fade--bottom-at-edge {\n --ds-scroll-edge-fade-target-bottom: 0px;\n}\n\n.scroll-edge-fade--left-at-edge {\n --ds-scroll-edge-fade-target-left: 0px;\n}\n\n.scroll-edge-fade--right-at-edge {\n --ds-scroll-edge-fade-target-right: 0px;\n}\n\n@supports (animation-timeline: scroll()) {\n .scroll-edge-fade--scroll-aware {\n animation-name:\n ds-scroll-edge-fade-reveal-top,\n ds-scroll-edge-fade-reveal-bottom,\n ds-scroll-edge-fade-reveal-left,\n ds-scroll-edge-fade-reveal-right;\n /* stylelint-disable-next-line declaration-property-value-disallowed-list -- scroll timelines require a nonzero sentinel duration; elapsed time is ignored. */\n animation-duration: 1ms;\n animation-timing-function: ease-in-out;\n animation-fill-mode: both;\n animation-timeline: scroll(self y), scroll(self y), scroll(self x), scroll(self x);\n animation-range:\n 0 var(--ds-scroll-edge-fade-reveal-distance),\n calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%,\n 0 var(--ds-scroll-edge-fade-reveal-distance),\n calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .scroll-edge-fade--scroll-aware {\n animation: none;\n }\n }\n}\n\n.scroll-edge-fade--at-end,\n.scroll-edge-fade--hidden {\n -webkit-mask-image: none;\n mask-image: none;\n}\n\n/**\n * Masks a long content element against a scrollport-relative block window.\n * The owner updates the start/end offsets as the scrollport moves. Keeping the\n * mask on the content instead of the overflow element leaves native scrollbars\n * outside the fade.\n */\n.scroll-edge-fade--block-window {\n --ds-scroll-edge-fade-window-start: 100%;\n --ds-scroll-edge-fade-window-end: 100%;\n\n -webkit-mask-image: linear-gradient(\n to bottom,\n #000 0,\n #000 var(--ds-scroll-edge-fade-window-start),\n transparent var(--ds-scroll-edge-fade-window-end)\n );\n mask-image: linear-gradient(\n to bottom,\n #000 0,\n #000 var(--ds-scroll-edge-fade-window-start),\n transparent var(--ds-scroll-edge-fade-window-end)\n );\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n}\n\n/* stylelint-enable color-no-hex */\n",":host {\n display: block;\n width: 100%;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n}\n\n.message-scroller {\n position: relative;\n width: 100%;\n height: 100%;\n min-height: 0;\n}\n\n.message-scroller__viewport {\n width: 100%;\n height: 100%;\n min-height: 0;\n overflow: auto;\n overscroll-behavior: contain;\n box-sizing: border-box;\n}\n\n.message-scroller__viewport:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);\n outline-offset: calc(-1 * var(--dimension-stroke-width-025));\n}\n\n.message-scroller__content {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-300);\n width: 100%;\n max-width: var(\n --ds-message-scroller-content-max-width,\n var(--dimension-panel-width-2xl)\n );\n min-height: 100%;\n margin-inline: auto;\n padding-block-start: var(--dimension-space-200);\n padding-inline: var(--dimension-space-200);\n padding-block-end: calc(\n var(--dimension-space-200) + var(--ds-scroll-overlay-block-size, 0px)\n );\n box-sizing: border-box;\n}\n\n.message-scroller__overlay {\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--dimension-z-index-floating);\n}\n\n.message-scroller__control {\n position: absolute;\n bottom: calc(\n var(--ds-scroll-overlay-content-block-size, 0px) + var(--dimension-space-200)\n );\n left: 50%;\n z-index: var(--dimension-z-index-floating);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--dimension-radius-half);\n background: var(--color-background-transparent);\n box-shadow: var(--effect-elevation-elevated-md);\n transform: translateX(-50%);\n -webkit-backdrop-filter: blur(var(--effect-blur-sm));\n backdrop-filter: blur(var(--effect-blur-sm));\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport type { MessageScrollerPosition } from '../conversation-types';\nimport { ScrollOverlayController } from '../../utils/scroll-overlay-controller';\n\nconst LIVE_EDGE_THRESHOLD = 24;\n\n@Component({\n tag: 'ds-message-scroller',\n styleUrl: 'MessageScroller.css',\n styleUrls: ['../../utils/scroll-edge-fade.css'],\n scoped: true,\n})\nexport class MessageScroller {\n @Element() el!: HTMLElement;\n\n @Prop() busy: boolean = false;\n @Prop() autoFollow: boolean = true;\n @Prop() defaultPosition: MessageScrollerPosition = 'last-anchor';\n @Prop() messagesLabel: string = 'Messages';\n\n @Event() dsReachStart!: EventEmitter<void>;\n\n @State() private showScrollToLatest = false;\n\n private viewport?: HTMLElement;\n private content?: HTMLElement;\n private overlay?: HTMLElement;\n private scrollOverlayController?: ScrollOverlayController;\n private mutationObserver?: MutationObserver;\n private following = true;\n private atStart = false;\n private programmatic = false;\n private previousScrollHeight = 0;\n\n componentDidLoad() {\n this.connectObservers();\n requestAnimationFrame(() => this.applyDefaultPosition());\n document.addEventListener('selectionchange', this.handleSelectionChange);\n }\n\n disconnectedCallback() {\n this.scrollOverlayController?.disconnect();\n this.mutationObserver?.disconnect();\n document.removeEventListener('selectionchange', this.handleSelectionChange);\n }\n\n @Method()\n async scrollToMessage(id: string): Promise<boolean> {\n const message = Array.from(\n this.el.querySelectorAll<HTMLElement & { messageId?: string }>('ds-message')\n ).find(item => item.messageId === id || item.getAttribute('message-id') === id);\n if (!message) return false;\n this.following = false;\n this.showScrollToLatest = true;\n message.scrollIntoView({ block: 'start', behavior: this.motionBehavior() });\n return true;\n }\n\n @Method()\n async scrollToStart() {\n this.scrollTo(0);\n this.following = false;\n this.showScrollToLatest = Boolean(\n this.viewport && this.viewport.scrollHeight > this.viewport.clientHeight\n );\n }\n\n @Method()\n async scrollToEnd() {\n this.following = true;\n this.showScrollToLatest = false;\n this.scrollTo(this.viewport?.scrollHeight ?? 0);\n }\n\n private motionBehavior(): ScrollBehavior {\n return matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth';\n }\n\n private scrollTo(top: number) {\n if (!this.viewport) return;\n this.programmatic = true;\n this.viewport.scrollTo({ top, behavior: this.motionBehavior() });\n requestAnimationFrame(() => {\n this.programmatic = false;\n });\n }\n\n private connectObservers() {\n if (!this.viewport || !this.content || !this.overlay) return;\n this.previousScrollHeight = this.viewport.scrollHeight;\n this.scrollOverlayController = new ScrollOverlayController({\n host: this.el,\n viewport: this.viewport,\n content: this.content,\n overlay: this.overlay,\n onGeometryChange: () => this.handleContentGrowth(),\n });\n this.scrollOverlayController.connect();\n this.mutationObserver = new MutationObserver(() => this.handleContentGrowth());\n this.mutationObserver.observe(this.content, {\n childList: true,\n subtree: true,\n characterData: true,\n });\n }\n\n private handleContentGrowth() {\n if (!this.viewport) return;\n const nextHeight = this.viewport.scrollHeight;\n const delta = nextHeight - this.previousScrollHeight;\n if (delta > 0 && this.viewport.scrollTop <= LIVE_EDGE_THRESHOLD && !this.following) {\n this.viewport.scrollTop += delta;\n } else if (this.autoFollow && this.following) {\n this.viewport.scrollTop = nextHeight;\n }\n this.previousScrollHeight = nextHeight;\n this.showScrollToLatest = !this.following && !this.isAtLiveEdge();\n this.scrollOverlayController?.sync();\n }\n\n private applyDefaultPosition() {\n if (!this.viewport) return;\n if (this.defaultPosition === 'start') {\n this.viewport.scrollTop = 0;\n this.following = false;\n this.showScrollToLatest = this.viewport.scrollHeight > this.viewport.clientHeight;\n this.scrollOverlayController?.sync();\n return;\n }\n if (this.defaultPosition === 'last-anchor') {\n const anchors = this.el.querySelectorAll<HTMLElement>('ds-message[scroll-anchor]');\n const last = anchors.item(anchors.length - 1);\n if (last) {\n last.scrollIntoView({ block: 'start' });\n this.following = this.isAtLiveEdge();\n this.showScrollToLatest = !this.following;\n this.scrollOverlayController?.sync();\n return;\n }\n }\n this.viewport.scrollTop = this.viewport.scrollHeight;\n this.following = true;\n this.showScrollToLatest = false;\n this.scrollOverlayController?.sync();\n }\n\n private isAtLiveEdge(): boolean {\n if (!this.viewport) return true;\n return (\n this.viewport.scrollHeight - this.viewport.clientHeight - this.viewport.scrollTop <=\n LIVE_EDGE_THRESHOLD\n );\n }\n\n private handleScroll = () => {\n if (!this.viewport) return;\n this.scrollOverlayController?.sync();\n if (this.programmatic) return;\n this.following = this.isAtLiveEdge();\n this.showScrollToLatest = !this.following;\n const nextAtStart = this.viewport.scrollTop <= LIVE_EDGE_THRESHOLD;\n if (nextAtStart && !this.atStart) this.dsReachStart.emit();\n this.atStart = nextAtStart;\n };\n\n private releaseFollow = () => {\n this.following = false;\n this.showScrollToLatest = !this.isAtLiveEdge();\n };\n\n private handleSelectionChange = () => {\n const selection = document.getSelection();\n if (\n selection &&\n !selection.isCollapsed &&\n selection.anchorNode &&\n this.el.contains(selection.anchorNode)\n ) {\n this.following = false;\n this.showScrollToLatest = !this.isAtLiveEdge();\n }\n };\n\n render() {\n return (\n <Host>\n <div class=\"message-scroller\">\n <div\n class=\"message-scroller__viewport\"\n ref={element => {\n this.viewport = element;\n }}\n role=\"region\"\n aria-label={this.messagesLabel}\n tabIndex={0}\n onScroll={this.handleScroll}\n onPointerDown={this.releaseFollow}\n onKeyDown={(event: KeyboardEvent) => {\n if (['ArrowUp', 'PageUp', 'Home'].includes(event.key)) this.releaseFollow();\n }}\n >\n <div\n class=\"message-scroller__content scroll-edge-fade--block-window\"\n ref={element => {\n this.content = element;\n }}\n role=\"log\"\n aria-live=\"polite\"\n aria-relevant=\"additions\"\n aria-busy={this.busy ? 'true' : undefined}\n >\n <slot />\n </div>\n </div>\n <div\n class=\"message-scroller__overlay\"\n ref={element => {\n this.overlay = element;\n }}\n >\n <slot name=\"overlay\" />\n </div>\n {this.showScrollToLatest ? (\n <div class=\"message-scroller__control\">\n <ds-tooltip label=\"Scroll to latest message\" side=\"top\" size=\"sm\">\n <ds-button-unfilled\n variant=\"icon\"\n icon=\"ChevronDown\"\n size=\"md\"\n rounded\n hasBorder={false}\n aria-label=\"Scroll to latest message\"\n onDsClick={() => void this.scrollToEnd()}\n />\n </ds-tooltip>\n </div>\n ) : null}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"oTAAA,MAAMA,EAAoB,IAAM,uhJCAhC,MAAMC,EAAqB,IAAM,8pDCcjC,MAAMC,EAAsB,G,MAQfC,EAAeC,EAAA,MAAAD,UAAAE,EAN5B,WAAAC,CAAAC,G,qFASUC,KAAAC,KAAgB,MAChBD,KAAAE,WAAsB,KACtBF,KAAAG,gBAA2C,cAC3CH,KAAAI,cAAwB,WAIfJ,KAAAK,mBAAqB,MAO9BL,KAAAM,UAAY,KACZN,KAAAO,QAAU,MACVP,KAAAQ,aAAe,MACfR,KAAAS,qBAAuB,EA0HvBT,KAAAU,aAAe,KACrB,IAAKV,KAAKW,SAAU,OACpBX,KAAKY,yBAAyBC,OAC9B,GAAIb,KAAKQ,aAAc,OACvBR,KAAKM,UAAYN,KAAKc,eACtBd,KAAKK,oBAAsBL,KAAKM,UAChC,MAAMS,EAAcf,KAAKW,SAASK,WAAatB,EAC/C,GAAIqB,IAAgBf,KAAKO,QAASP,KAAKiB,aAAaC,OACpDlB,KAAKO,QAAUQ,CAAW,EAGpBf,KAAAmB,cAAgB,KACtBnB,KAAKM,UAAY,MACjBN,KAAKK,oBAAsBL,KAAKc,cAAc,EAGxCd,KAAAoB,sBAAwB,KAC9B,MAAMC,EAAYC,SAASC,eAC3B,GACEF,IACCA,EAAUG,aACXH,EAAUI,YACVzB,KAAK0B,GAAGC,SAASN,EAAUI,YAC3B,CACAzB,KAAKM,UAAY,MACjBN,KAAKK,oBAAsBL,KAAKc,c,EA8DrC,CA/MC,gBAAAc,GACE5B,KAAK6B,mBACLC,uBAAsB,IAAM9B,KAAK+B,yBACjCT,SAASU,iBAAiB,kBAAmBhC,KAAKoB,sB,CAGpD,oBAAAa,GACEjC,KAAKY,yBAAyBsB,aAC9BlC,KAAKmC,kBAAkBD,aACvBZ,SAASc,oBAAoB,kBAAmBpC,KAAKoB,sB,CAIvD,qBAAMiB,CAAgBC,GACpB,MAAMC,EAAUC,MAAMC,KACpBzC,KAAK0B,GAAGgB,iBAAuD,eAC/DC,MAAKC,GAAQA,EAAKC,YAAcP,GAAMM,EAAKE,aAAa,gBAAkBR,IAC5E,IAAKC,EAAS,OAAO,MACrBvC,KAAKM,UAAY,MACjBN,KAAKK,mBAAqB,KAC1BkC,EAAQQ,eAAe,CAAEC,MAAO,QAASC,SAAUjD,KAAKkD,mBACxD,OAAO,I,CAIT,mBAAMC,GACJnD,KAAKoD,SAAS,GACdpD,KAAKM,UAAY,MACjBN,KAAKK,mBAAqBgD,QACxBrD,KAAKW,UAAYX,KAAKW,SAAS2C,aAAetD,KAAKW,SAAS4C,a,CAKhE,iBAAMC,GACJxD,KAAKM,UAAY,KACjBN,KAAKK,mBAAqB,MAC1BL,KAAKoD,SAASpD,KAAKW,UAAU2C,cAAgB,E,CAGvC,cAAAJ,GACN,OAAOO,WAAW,oCAAoCC,QAAU,OAAS,Q,CAGnE,QAAAN,CAASO,GACf,IAAK3D,KAAKW,SAAU,OACpBX,KAAKQ,aAAe,KACpBR,KAAKW,SAASyC,SAAS,CAAEO,MAAKV,SAAUjD,KAAKkD,mBAC7CpB,uBAAsB,KACpB9B,KAAKQ,aAAe,KAAK,G,CAIrB,gBAAAqB,GACN,IAAK7B,KAAKW,WAAaX,KAAK4D,UAAY5D,KAAK6D,QAAS,OACtD7D,KAAKS,qBAAuBT,KAAKW,SAAS2C,aAC1CtD,KAAKY,wBAA0B,IAAIkD,EAAwB,CACzDC,KAAM/D,KAAK0B,GACXf,SAAUX,KAAKW,SACfiD,QAAS5D,KAAK4D,QACdC,QAAS7D,KAAK6D,QACdG,iBAAkB,IAAMhE,KAAKiE,wBAE/BjE,KAAKY,wBAAwBsD,UAC7BlE,KAAKmC,iBAAmB,IAAIgC,kBAAiB,IAAMnE,KAAKiE,wBACxDjE,KAAKmC,iBAAiBiC,QAAQpE,KAAK4D,QAAS,CAC1CS,UAAW,KACXC,QAAS,KACTC,cAAe,M,CAIX,mBAAAN,GACN,IAAKjE,KAAKW,SAAU,OACpB,MAAM6D,EAAaxE,KAAKW,SAAS2C,aACjC,MAAMmB,EAAQD,EAAaxE,KAAKS,qBAChC,GAAIgE,EAAQ,GAAKzE,KAAKW,SAASK,WAAatB,IAAwBM,KAAKM,UAAW,CAClFN,KAAKW,SAASK,WAAayD,C,MACtB,GAAIzE,KAAKE,YAAcF,KAAKM,UAAW,CAC5CN,KAAKW,SAASK,UAAYwD,C,CAE5BxE,KAAKS,qBAAuB+D,EAC5BxE,KAAKK,oBAAsBL,KAAKM,YAAcN,KAAKc,eACnDd,KAAKY,yBAAyBC,M,CAGxB,oBAAAkB,GACN,IAAK/B,KAAKW,SAAU,OACpB,GAAIX,KAAKG,kBAAoB,QAAS,CACpCH,KAAKW,SAASK,UAAY,EAC1BhB,KAAKM,UAAY,MACjBN,KAAKK,mBAAqBL,KAAKW,SAAS2C,aAAetD,KAAKW,SAAS4C,aACrEvD,KAAKY,yBAAyBC,OAC9B,M,CAEF,GAAIb,KAAKG,kBAAoB,cAAe,CAC1C,MAAMuE,EAAU1E,KAAK0B,GAAGgB,iBAA8B,6BACtD,MAAMiC,EAAOD,EAAQ9B,KAAK8B,EAAQE,OAAS,GAC3C,GAAID,EAAM,CACRA,EAAK5B,eAAe,CAAEC,MAAO,UAC7BhD,KAAKM,UAAYN,KAAKc,eACtBd,KAAKK,oBAAsBL,KAAKM,UAChCN,KAAKY,yBAAyBC,OAC9B,M,EAGJb,KAAKW,SAASK,UAAYhB,KAAKW,SAAS2C,aACxCtD,KAAKM,UAAY,KACjBN,KAAKK,mBAAqB,MAC1BL,KAAKY,yBAAyBC,M,CAGxB,YAAAC,GACN,IAAKd,KAAKW,SAAU,OAAO,KAC3B,OACEX,KAAKW,SAAS2C,aAAetD,KAAKW,SAAS4C,aAAevD,KAAKW,SAASK,WACxEtB,C,CAiCJ,MAAAmF,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACTH,EAAA,OAAAE,IAAA,2CACEC,MAAM,6BACNC,IAAKC,IACHnF,KAAKW,SAAWwE,CAAO,EAEzBC,KAAK,SAAQ,aACDpF,KAAKI,cACjBiF,SAAU,EACVC,SAAUtF,KAAKU,aACf6E,cAAevF,KAAKmB,cACpBqE,UAAYC,IACV,GAAI,CAAC,UAAW,SAAU,QAAQC,SAASD,EAAMT,KAAMhF,KAAKmB,eAAe,GAG7E2D,EAAA,OAAAE,IAAA,2CACEC,MAAM,2DACNC,IAAKC,IACHnF,KAAK4D,QAAUuB,CAAO,EAExBC,KAAK,MAAK,YACA,SAAQ,gBACJ,YAAW,YACdpF,KAAKC,KAAO,OAAS0F,WAEhCb,EAAA,QAAAE,IAAA,+CAGJF,EAAA,OAAAE,IAAA,2CACEC,MAAM,4BACNC,IAAKC,IACHnF,KAAK6D,QAAUsB,CAAO,GAGxBL,EAAA,QAAAE,IAAA,2CAAMY,KAAK,aAEZ5F,KAAKK,mBACJyE,EAAA,OAAKG,MAAM,6BACTH,EAAA,cAAYe,MAAM,2BAA2BC,KAAK,MAAMC,KAAK,MAC3DjB,EAAA,sBACEkB,QAAQ,OACRC,KAAK,cACLF,KAAK,KACLG,QAAO,KACPC,UAAW,MAAK,aACL,2BACXC,UAAW,SAAWpG,KAAKwD,kBAI/B,M","ignoreList":[]}
@@ -1,2 +1,2 @@
1
- import{M as s,d as o}from"./p-ky1msbJ8.js";const t=s;const m=o;export{t as DsMessage,m as defineCustomElement};
1
+ import{M as o,d as s}from"./p-DjPZxzIG.js";const t=o;const p=s;export{t as DsMessage,p as defineCustomElement};
2
2
  //# sourceMappingURL=ds-message.js.map
@@ -1,2 +1,2 @@
1
- import{p as o,H as e,c as s,h as t,a,t as i}from"./index.js";import{d}from"./p-DOCKtrS4.js";import{d as n}from"./p-xY3TjBF5.js";import{d as l}from"./p-BAfG3M8z.js";import{d as r}from"./p-Cpr3K41-.js";import{d as c}from"./p-C0_8K4y7.js";import{d as m}from"./p-CCHqsF_H.js";import{b as f,T as h}from"./p-Dg3xLna0.js";const b=()=>`.sc-ds-modal-h{display:contents}.modal-dialog.sc-ds-modal{display:none;flex-direction:column;max-width:none;max-height:calc(100vh - 2 * var(--dimension-space-200));margin:auto;padding:0;overflow:hidden;color:var(--color-foreground-primary);background-color:var(--color-background-primary);border:0;border-radius:var(--dimension-radius-050);box-shadow:var(--effect-elevation-elevated-floating);outline:none;box-sizing:border-box}.modal-dialog[open].sc-ds-modal{display:flex;animation:modalDialogIn var(--effect-motion-short-2) forwards}.modal-dialog.sc-ds-modal::backdrop{background-color:var(--color-background-shade);animation:modalBackdropIn var(--effect-motion-short-2) forwards}.modal-dialog--closing.sc-ds-modal{animation:modalDialogOut var(--effect-motion-short-3) forwards}.modal-dialog--closing.sc-ds-modal::backdrop{animation:modalBackdropOut var(--effect-motion-short-3) forwards}@keyframes modalBackdropIn{from{opacity:0}to{opacity:1}}@keyframes modalBackdropOut{from{opacity:1}to{opacity:0}}@keyframes modalDialogIn{from{opacity:0;transform:scale(0.97) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalDialogOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.97) translateY(4px)}}@media (prefers-reduced-motion: reduce){.modal-dialog[open].sc-ds-modal,.modal-dialog--closing.sc-ds-modal{animation:none;transform:none}.modal-dialog.sc-ds-modal::backdrop{animation:none;opacity:1}.modal-dialog--closing.sc-ds-modal,.modal-dialog--closing.sc-ds-modal::backdrop{opacity:0}}.modal-header.sc-ds-modal{display:flex;align-items:center;gap:var(--dimension-space-050);height:var(--dimension-size-800);padding:var(--dimension-space-200);flex:0 0 auto;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);color:var(--color-foreground-primary)}ds-text.modal-heading.sc-ds-modal{flex:1 1 0;width:auto;min-width:0;text-align:left;-webkit-user-select:none;user-select:none}.modal-close-tooltip.sc-ds-modal{flex:0 0 auto}.modal-content.sc-ds-modal{min-height:0;padding:var(--dimension-space-200);overflow-y:auto;flex:1 1 auto;box-sizing:border-box}.modal-footer.sc-ds-modal{display:flex;align-items:center;justify-content:flex-start;gap:var(--dimension-space-100);height:var(--dimension-size-800);padding:var(--dimension-space-200);flex:0 0 auto;box-sizing:border-box;border-top:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.modal-footer--empty.sc-ds-modal{display:none}.modal-footer.sc-ds-modal slot.sc-ds-modal{display:contents}`;const u={sm:"var(--dimension-modal-width-sm)",md:"var(--dimension-modal-width-md)",lg:"var(--dimension-modal-width-lg)"};const p=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(",");let g=0;const y=o(class o extends e{constructor(o){super();if(o!==false){this.__registerHost()}this.dsClose=s(this,"dsClose");this.dsAfterClose=s(this,"dsAfterClose");this.open=false;this.closeAriaLabel="Close";this.modalWidth="md";this.closing=false;this.hasFooter=false;this.titleId=`ds-modal-title-${++g}`;this.dialogEl=null;this.previousFocus=null;this.closeTimer=null}componentDidLoad(){this.updateFooterPresence();if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.clearCloseTimer();if(this.dialogEl?.open)this.dialogEl.close()}onOpenChange(o){if(o){this.clearCloseTimer();const o=!!this.dialogEl?.open;this.closing=false;if(!this.dialogEl||o)return;this.previousFocus=document.activeElement;this.dialogEl.showModal();requestAnimationFrame((()=>{if(this.open&&this.dialogEl?.open)this.focusClose()}))}else if(this.dialogEl?.open){this.closing=true;const o=this.closeAnimationMs;if(o<=0){this.finishClose();return}this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.finishClose()}),o)}}focusClose(){const o=this.el.querySelector("ds-button-unfilled.modal-close");void o?.setFocus?.()}clearCloseTimer(){if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}requestClose(o,e){if(!this.open||this.closing||!this.dialogEl?.open)return;this.dsClose.emit({reason:o,originalEvent:e});this.open=false}updateFooterPresence(o){const e=o?.assignedNodes({flatten:true})??[];this.hasFooter=e.some((o=>o.nodeType!==Node.TEXT_NODE||!!o.textContent?.trim()))||this.el.querySelector('[slot="footer"]')!==null}handleCancel(o){o.preventDefault();this.requestClose("escape",o)}handleBackdropPointerDown(o){if(o.target===this.dialogEl)this.requestClose("backdrop",o)}handleKeyDown(o){if(o.key!=="Tab"||!this.dialogEl)return;const e=Array.from(this.dialogEl.querySelectorAll(p)).filter((o=>!o.hasAttribute("disabled")&&o.getAttribute("aria-hidden")!=="true"));if(!e.length){o.preventDefault();this.dialogEl.focus();return}const s=e[0];const t=e[e.length-1];const a=document.activeElement;if(o.shiftKey&&(a===s||a===this.dialogEl)){o.preventDefault();t.focus()}else if(!o.shiftKey&&a===t){o.preventDefault();s.focus()}}get resolvedWidth(){if(this.modalWidth==="sm"||this.modalWidth==="md"||this.modalWidth==="lg"){return u[this.modalWidth]}return this.modalWidth}get closeAnimationMs(){return f(h.motionShort3,h.animationDurationShort3)}finishClose(){if(!this.dialogEl?.open)return;this.dialogEl.close();this.closing=false;this.clearCloseTimer();this.previousFocus?.focus?.();this.previousFocus=null;this.dsAfterClose.emit()}render(){return t(a,{key:"f59182e6839061125508db976ff99f611b8c5526"},t("dialog",{key:"5dabbc641a95efad670090961df7b4cea70ab442",ref:o=>{this.dialogEl=o??null},class:{"modal-dialog":true,"modal-dialog--closing":this.closing},"aria-labelledby":this.titleId,"aria-describedby":this.ariaDescribedby,onCancel:o=>this.handleCancel(o),onPointerDown:o=>this.handleBackdropPointerDown(o),onKeyDown:o=>this.handleKeyDown(o),style:{width:`min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))`}},t("div",{key:"245860f909ff4e06713ffc7ec2e8278bd1b72aa3",class:"modal-header"},t("ds-text",{key:"ccf29c35d05e108743ff1372f7e036c85fd244c9",class:"modal-heading",as:"h2",variant:"text-title-medium",emphasis:true,color:"primary",lineTruncation:1,textId:this.titleId},this.heading),t("ds-tooltip",{key:"2fe8e5251a9ba285c81b20bcf8574626434f346b",class:"modal-close-tooltip",label:this.closeAriaLabel,side:"bottom",size:"sm"},t("ds-button-unfilled",{key:"8de4b7884640f8cc324f6965a05a23aa219e7b0a",class:"modal-close",variant:"icon",icon:"Cross",size:"md","aria-label":this.closeAriaLabel,activeFill:false,hasBorder:false,onDsClick:o=>this.requestClose("close-button",o.detail)}))),t("div",{key:"f8e03771adcfbc95f6614df91795cac6f0e4a53e",class:"modal-content"},t("slot",{key:"6fe8f545bb0090effc74dfefc7410f2891957195"})),t("div",{key:"9122f7c8130ecf812f010052bf151dd14844d943",class:{"modal-footer":true,"modal-footer--empty":!this.hasFooter}},t("slot",{key:"ef0cd796c14460d0c974ae32b9823c9d2b4d5b7b",name:"footer",onSlotchange:o=>this.updateFooterPresence(o.currentTarget)}))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return b()}},[262,"ds-modal",{open:[1028],heading:[1],closeAriaLabel:[1,"close-aria-label"],modalWidth:[1,"modal-width"],ariaDescribedby:[1,"aria-describedby"],closing:[32],hasFooter:[32]},undefined,{open:[{onOpenChange:0}]}]);function v(){if(typeof customElements==="undefined"){return}const o=["ds-modal","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];o.forEach((o=>{switch(o){case"ds-modal":if(!customElements.get(i(o))){customElements.define(i(o),y)}break;case"ds-badge":if(!customElements.get(i(o))){d()}break;case"ds-button-unfilled":if(!customElements.get(i(o))){n()}break;case"ds-icon":if(!customElements.get(i(o))){l()}break;case"ds-loader":if(!customElements.get(i(o))){r()}break;case"ds-text":if(!customElements.get(i(o))){c()}break;case"ds-tooltip":if(!customElements.get(i(o))){m()}break}}))}v();const k=y;const x=v;export{k as DsModal,x as defineCustomElement};
1
+ import{p as o,H as e,c as s,h as t,a,t as i}from"./index.js";import{d}from"./p-CH6cNXXF.js";import{d as n}from"./p-CoYFJD-w.js";import{d as l}from"./p-BAfG3M8z.js";import{d as r}from"./p-Cpr3K41-.js";import{d as c}from"./p-BwGnhInj.js";import{d as m}from"./p-BPS9VExm.js";import{a as f}from"./p-B6Vuayt6.js";import{T as h}from"./p-C_0Q8Cnp.js";const b=()=>`.sc-ds-modal-h{display:contents}.modal-dialog.sc-ds-modal{display:none;flex-direction:column;max-width:none;max-height:calc(100vh - 2 * var(--dimension-space-200));margin:auto;padding:0;overflow:hidden;color:var(--color-foreground-primary);background-color:var(--color-background-primary);border:0;border-radius:var(--dimension-radius-050);box-shadow:var(--effect-elevation-elevated-floating);outline:none;box-sizing:border-box}.modal-dialog[open].sc-ds-modal{display:flex;animation:modalDialogIn var(--effect-motion-short-2) forwards}.modal-dialog.sc-ds-modal::backdrop{background-color:var(--color-background-shade);animation:modalBackdropIn var(--effect-motion-short-2) forwards}.modal-dialog--closing.sc-ds-modal{animation:modalDialogOut var(--effect-motion-short-3) forwards}.modal-dialog--closing.sc-ds-modal::backdrop{animation:modalBackdropOut var(--effect-motion-short-3) forwards}@keyframes modalBackdropIn{from{opacity:0}to{opacity:1}}@keyframes modalBackdropOut{from{opacity:1}to{opacity:0}}@keyframes modalDialogIn{from{opacity:0;transform:scale(0.97) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalDialogOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.97) translateY(4px)}}@media (prefers-reduced-motion: reduce){.modal-dialog[open].sc-ds-modal,.modal-dialog--closing.sc-ds-modal{animation:none;transform:none}.modal-dialog.sc-ds-modal::backdrop{animation:none;opacity:1}.modal-dialog--closing.sc-ds-modal,.modal-dialog--closing.sc-ds-modal::backdrop{opacity:0}}.modal-header.sc-ds-modal{display:flex;align-items:center;gap:var(--dimension-space-050);height:var(--dimension-size-800);padding:var(--dimension-space-200);flex:0 0 auto;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);color:var(--color-foreground-primary)}ds-text.modal-heading.sc-ds-modal{flex:1 1 0;width:auto;min-width:0;text-align:left;-webkit-user-select:none;user-select:none}.modal-close-tooltip.sc-ds-modal{flex:0 0 auto}.modal-content.sc-ds-modal{min-height:0;padding:var(--dimension-space-200);overflow-y:auto;flex:1 1 auto;box-sizing:border-box}.modal-footer.sc-ds-modal{display:flex;align-items:center;justify-content:flex-start;gap:var(--dimension-space-100);height:var(--dimension-size-800);padding:var(--dimension-space-200);flex:0 0 auto;box-sizing:border-box;border-top:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.modal-footer--empty.sc-ds-modal{display:none}.modal-footer.sc-ds-modal slot.sc-ds-modal{display:contents}`;const p={sm:"var(--dimension-modal-width-sm)",md:"var(--dimension-modal-width-md)",lg:"var(--dimension-modal-width-lg)"};const u=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(",");let g=0;const y=o(class o extends e{constructor(o){super();if(o!==false){this.__registerHost()}this.dsClose=s(this,"dsClose");this.dsAfterClose=s(this,"dsAfterClose");this.open=false;this.closeAriaLabel="Close";this.modalWidth="md";this.closing=false;this.hasFooter=false;this.titleId=`ds-modal-title-${++g}`;this.dialogEl=null;this.previousFocus=null;this.closeTimer=null}componentDidLoad(){this.updateFooterPresence();if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.clearCloseTimer();if(this.dialogEl?.open)this.dialogEl.close()}onOpenChange(o){if(o){this.clearCloseTimer();const o=!!this.dialogEl?.open;this.closing=false;if(!this.dialogEl||o)return;this.previousFocus=document.activeElement;this.dialogEl.showModal();requestAnimationFrame((()=>{if(this.open&&this.dialogEl?.open)this.focusClose()}))}else if(this.dialogEl?.open){this.closing=true;const o=this.closeAnimationMs;if(o<=0){this.finishClose();return}this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.finishClose()}),o)}}focusClose(){const o=this.el.querySelector("ds-button-unfilled.modal-close");void o?.setFocus?.()}clearCloseTimer(){if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}requestClose(o,e){if(!this.open||this.closing||!this.dialogEl?.open)return;this.dsClose.emit({reason:o,originalEvent:e});this.open=false}updateFooterPresence(o){const e=o?.assignedNodes()??[];this.hasFooter=e.some((o=>o.nodeType!==Node.TEXT_NODE||!!o.textContent?.trim()))||this.el.querySelector('[slot="footer"]')!==null}handleCancel(o){o.preventDefault();this.requestClose("escape",o)}handleBackdropPointerDown(o){if(o.target===this.dialogEl)this.requestClose("backdrop",o)}handleKeyDown(o){if(o.key!=="Tab"||!this.dialogEl)return;const e=Array.from(this.dialogEl.querySelectorAll(u)).filter((o=>!o.hasAttribute("disabled")&&o.getAttribute("aria-hidden")!=="true"));if(!e.length){o.preventDefault();this.dialogEl.focus();return}const s=e[0];const t=e[e.length-1];const a=document.activeElement;if(o.shiftKey&&(a===s||a===this.dialogEl)){o.preventDefault();t.focus()}else if(!o.shiftKey&&a===t){o.preventDefault();s.focus()}}get resolvedWidth(){if(this.modalWidth==="sm"||this.modalWidth==="md"||this.modalWidth==="lg"){return p[this.modalWidth]}return this.modalWidth}get closeAnimationMs(){return f(h.motionShort3,h.animationDurationShort3)}finishClose(){if(!this.dialogEl?.open)return;this.dialogEl.close();this.closing=false;this.clearCloseTimer();this.previousFocus?.focus?.();this.previousFocus=null;this.dsAfterClose.emit()}render(){return t(a,{key:"80aee0b968e187d93b7037f3fa279dcbb57450d6"},t("dialog",{key:"30a524c375a5c034633c64ab96566961ec185555",ref:o=>{this.dialogEl=o??null},class:{"modal-dialog":true,"modal-dialog--closing":this.closing},"aria-labelledby":this.titleId,"aria-describedby":this.ariaDescribedby,onCancel:o=>this.handleCancel(o),onPointerDown:o=>this.handleBackdropPointerDown(o),onKeyDown:o=>this.handleKeyDown(o),style:{width:`min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))`}},t("div",{key:"8754b2caa4a7ff8f430c96e52a642ce8309e2cdf",class:"modal-header"},t("ds-text",{key:"2056473b0c9dd42e40386e02a794b9231948ef28",class:"modal-heading",as:"h2",variant:"text-title-medium",emphasis:true,color:"primary",lineTruncation:1,textId:this.titleId},this.heading),t("ds-tooltip",{key:"ac65e17cb89520e820099125748a24f13d7407ed",class:"modal-close-tooltip",label:this.closeAriaLabel,side:"bottom",size:"sm"},t("ds-button-unfilled",{key:"faa5ce4fcacc433bb41e545f6a898089ed63d5fd",class:"modal-close",variant:"icon",icon:"Cross",size:"md","aria-label":this.closeAriaLabel,activeFill:false,hasBorder:false,onDsClick:o=>this.requestClose("close-button",o.detail)}))),t("div",{key:"3ab14f6c5c483b3ed3b6ff2f5646fd68088b2135",class:"modal-content"},t("slot",{key:"9a84bb4067a6e9db72c11f8c741dc2183e6ddcd9"})),t("div",{key:"9b5fad0f494f6f265b1966b5bf6f0e4a6bab7b8c",class:{"modal-footer":true,"modal-footer--empty":!this.hasFooter}},t("slot",{key:"991a001ddadf533c2dcf7b974b1c69e7a3199164",name:"footer",onSlotchange:o=>this.updateFooterPresence(o.currentTarget)}))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return b()}},[262,"ds-modal",{open:[1028],heading:[1],closeAriaLabel:[1,"close-aria-label"],modalWidth:[1,"modal-width"],ariaDescribedby:[1,"aria-describedby"],closing:[32],hasFooter:[32]},undefined,{open:[{onOpenChange:0}]}]);function v(){if(typeof customElements==="undefined"){return}const o=["ds-modal","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];o.forEach((o=>{switch(o){case"ds-modal":if(!customElements.get(i(o))){customElements.define(i(o),y)}break;case"ds-badge":if(!customElements.get(i(o))){d()}break;case"ds-button-unfilled":if(!customElements.get(i(o))){n()}break;case"ds-icon":if(!customElements.get(i(o))){l()}break;case"ds-loader":if(!customElements.get(i(o))){r()}break;case"ds-text":if(!customElements.get(i(o))){c()}break;case"ds-tooltip":if(!customElements.get(i(o))){m()}break}}))}v();const k=y;const x=v;export{k as DsModal,x as defineCustomElement};
2
2
  //# sourceMappingURL=ds-modal.js.map