@ds-mo/ui 13.5.0 → 13.6.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 (172) hide show
  1. package/dist/.package-ready.json +1 -1
  2. package/dist/agent-patterns.json +8 -1
  3. package/dist/agent.json +169 -6
  4. package/dist/angular/ds-banner.d.ts +23 -0
  5. package/dist/angular/ds-banner.js +45 -0
  6. package/dist/angular/ds-modal.d.ts +1 -1
  7. package/dist/angular/ds-modal.js +3 -3
  8. package/dist/angular/index.d.ts +1 -1
  9. package/dist/angular/index.js +1 -0
  10. package/dist/angular/proxies.d.ts +1 -0
  11. package/dist/angular/proxies.js +1 -0
  12. package/dist/components/ds-agent-activity.js +1 -1
  13. package/dist/components/ds-agent-response.js +1 -1
  14. package/dist/components/ds-agent-source-list.js +1 -1
  15. package/dist/components/ds-agent-tool-call.js +1 -1
  16. package/dist/components/ds-attachment-list.js +1 -1
  17. package/dist/components/ds-badge.js +1 -1
  18. package/dist/components/ds-banner.d.ts +11 -0
  19. package/dist/components/ds-banner.js +2 -0
  20. package/dist/components/ds-banner.js.map +1 -0
  21. package/dist/components/ds-bar-nav.js +1 -1
  22. package/dist/components/ds-bar-title.js +1 -1
  23. package/dist/components/ds-bar-workflow.js +1 -1
  24. package/dist/components/ds-breadcrumb.js +1 -1
  25. package/dist/components/ds-button-filled.js +1 -1
  26. package/dist/components/ds-button-unfilled.js +1 -1
  27. package/dist/components/ds-card-data-viz.js +1 -1
  28. package/dist/components/ds-card-overview.js +1 -1
  29. package/dist/components/ds-card-setting.js +1 -1
  30. package/dist/components/ds-card-setting.js.map +1 -1
  31. package/dist/components/ds-chart-bar.js +1 -1
  32. package/dist/components/ds-chart-donut.js +1 -1
  33. package/dist/components/ds-chart-legend.js +1 -1
  34. package/dist/components/ds-chart-line.js +1 -1
  35. package/dist/components/ds-checkbox.js +1 -1
  36. package/dist/components/ds-chip.js +1 -1
  37. package/dist/components/ds-code-block.js +1 -1
  38. package/dist/components/ds-conversation-list-item.js +1 -1
  39. package/dist/components/ds-conversation-list-section.js +1 -1
  40. package/dist/components/ds-conversation-list.js +1 -1
  41. package/dist/components/ds-divider.js +1 -1
  42. package/dist/components/ds-empty-state.js +1 -1
  43. package/dist/components/ds-field.js +1 -1
  44. package/dist/components/ds-input.js +1 -1
  45. package/dist/components/ds-markdown.js +1 -1
  46. package/dist/components/ds-menu.js +1 -1
  47. package/dist/components/ds-message-actions.js +1 -1
  48. package/dist/components/ds-message-actions.js.map +1 -1
  49. package/dist/components/ds-message-bubble.js +1 -1
  50. package/dist/components/ds-message-composer.js +1 -1
  51. package/dist/components/ds-message-scroller.js +1 -1
  52. package/dist/components/ds-message.js +1 -1
  53. package/dist/components/ds-mobile-bar-nav.js +1 -1
  54. package/dist/components/ds-mobile-header.js +1 -1
  55. package/dist/components/ds-mobile-section-switcher.js +1 -1
  56. package/dist/components/ds-mobile-sheet-nav.js +1 -1
  57. package/dist/components/ds-modal.js +1 -1
  58. package/dist/components/ds-modal.js.map +1 -1
  59. package/dist/components/ds-panel-nav.js +1 -1
  60. package/dist/components/ds-panel-sub-nav.js +1 -1
  61. package/dist/components/ds-panel-tool-header.js +1 -1
  62. package/dist/components/ds-panel-tool-search.js +1 -1
  63. package/dist/components/ds-panel-tools.js +1 -1
  64. package/dist/components/ds-radio.js +1 -1
  65. package/dist/components/ds-scroll-overlay.js +1 -1
  66. package/dist/components/ds-scroll-overlay.js.map +1 -1
  67. package/dist/components/ds-select.js +1 -1
  68. package/dist/components/ds-shell-app.js +1 -1
  69. package/dist/components/ds-shell-app.js.map +1 -1
  70. package/dist/components/ds-shell-page.js +1 -1
  71. package/dist/components/ds-shell-tools.js +1 -1
  72. package/dist/components/ds-skeleton.js +1 -1
  73. package/dist/components/ds-slider.js +1 -1
  74. package/dist/components/ds-swatch-picker.js +1 -1
  75. package/dist/components/ds-switch.js +1 -1
  76. package/dist/components/ds-tab-group.js +1 -1
  77. package/dist/components/ds-tag.js +1 -1
  78. package/dist/components/ds-text.js +1 -1
  79. package/dist/components/ds-toast.js +1 -1
  80. package/dist/components/ds-tooltip-data-viz.js +1 -1
  81. package/dist/components/ds-tooltip.js +1 -1
  82. package/dist/components/ds-typing-indicator.js +1 -1
  83. package/dist/components/{p-BN9FZESH.js → p-1S9AW2MA.js} +2 -2
  84. package/dist/components/{p-D4bVE7e4.js → p-6B411hQA.js} +2 -2
  85. package/dist/components/{p-D5PN6zdD.js → p-B-kRByho.js} +2 -2
  86. package/dist/components/{p-CmUGA_q4.js → p-B4_0Ys4w.js} +2 -2
  87. package/dist/components/{p-BApNi_xA.js → p-B6RrZQqw.js} +2 -2
  88. package/dist/components/{p-CQ4vAZ9j.js → p-BBtjABBS.js} +2 -2
  89. package/dist/components/{p-CmMfRM1s.js → p-BFfHIu6y.js} +2 -2
  90. package/dist/components/{p-CBiAsFAZ.js → p-BPyymeuR.js} +2 -2
  91. package/dist/components/{p-Bgh0uG51.js → p-BR_oMaas.js} +2 -2
  92. package/dist/components/{p-w2kKeG_h.js → p-Bb4f5SuF.js} +2 -2
  93. package/dist/components/p-Bl6A5AJq.js +2 -0
  94. package/dist/components/{p-CIgag7g2.js.map → p-Bl6A5AJq.js.map} +1 -1
  95. package/dist/components/{p-B5snQKiP.js → p-BmNpPyzf.js} +2 -2
  96. package/dist/components/{p-CWItD0gL.js → p-Bmo4T96l.js} +2 -2
  97. package/dist/components/{p-DHAuidt1.js → p-Bsfpxto1.js} +2 -2
  98. package/dist/components/{p-a6cnCKWk.js → p-BtuYufL3.js} +2 -2
  99. package/dist/components/{p-BxEOlO5k.js → p-CKRJX0Y0.js} +2 -2
  100. package/dist/components/{p-1moOgMI-.js → p-Ca6s5fLR.js} +2 -2
  101. package/dist/components/{p-RT1mts9U.js → p-CbjFUpOj.js} +2 -2
  102. package/dist/components/{p-CqOswTy8.js → p-CuJ3J6OJ.js} +2 -2
  103. package/dist/components/{p-BQTJ7ePr.js → p-CxgMUvqg.js} +2 -2
  104. package/dist/components/{p-CWKrq35a.js → p-D0bM3cKj.js} +2 -2
  105. package/dist/components/{p-UtfErnpX.js → p-D2cjoj2r.js} +2 -2
  106. package/dist/components/{p-CGwVooB6.js → p-DHF5cLzr.js} +2 -2
  107. package/dist/components/{p-BgjtMMye.js → p-DVuxzrCC.js} +2 -2
  108. package/dist/components/p-DX4c3kZ1.js +2 -0
  109. package/dist/components/p-DX4c3kZ1.js.map +1 -0
  110. package/dist/components/p-DaqFuVKZ.js +2 -0
  111. package/dist/components/p-DaqFuVKZ.js.map +1 -0
  112. package/dist/components/{p-DXGKfXTh.js → p-DfvDNcoq.js} +2 -2
  113. package/dist/components/p-Di81y9Q2.js +2 -0
  114. package/dist/components/{p-C_3mZMFK.js → p-Eep5mxtv.js} +2 -2
  115. package/dist/components/{p-DoNdiEly.js → p-IYy-jODg.js} +2 -2
  116. package/dist/components/{p-DtV263qO.js → p-iCjUWcp7.js} +2 -2
  117. package/dist/components/{p-BgASe-BH.js → p-og48Kh2i.js} +2 -2
  118. package/dist/components/{p-BSocHH2X.js → p-wOOAzVMC.js} +2 -2
  119. package/dist/docs/components.json +436 -1
  120. package/dist/mcp-data/registry/banner.json +333 -0
  121. package/dist/mcp-data/registry/bar-title.json +3 -3
  122. package/dist/mcp-data/registry/message-actions.json +2 -1
  123. package/dist/mcp-data/registry/modal.json +25 -5
  124. package/dist/mcp-data/registry/panel-tool-header.json +3 -3
  125. package/dist/mcp-data/registry/panel-tools.json +3 -2
  126. package/dist/mcp-data/registry/registry.json +171 -5
  127. package/dist/mcp-data/registry/shell-app.json +6 -2
  128. package/dist/react/components.d.ts +1 -0
  129. package/dist/react/components.js +1 -0
  130. package/dist/react/ds-banner.d.ts +13 -0
  131. package/dist/react/ds-banner.js +15 -0
  132. package/dist/types/components/Banner/Banner.d.ts +50 -0
  133. package/dist/types/components/Modal/Modal.d.ts +4 -0
  134. package/dist/types/components/PanelTools/PanelTools.d.ts +7 -0
  135. package/dist/types/components.d.ts +138 -0
  136. package/package.json +1 -1
  137. package/dist/components/p-4scN0Mgn.js +0 -2
  138. package/dist/components/p-B3PdrMP0.js +0 -2
  139. package/dist/components/p-B3PdrMP0.js.map +0 -1
  140. package/dist/components/p-CIgag7g2.js +0 -2
  141. package/dist/components/p-CUSz0JFa.js +0 -2
  142. package/dist/components/p-CUSz0JFa.js.map +0 -1
  143. /package/dist/components/{p-BN9FZESH.js.map → p-1S9AW2MA.js.map} +0 -0
  144. /package/dist/components/{p-D4bVE7e4.js.map → p-6B411hQA.js.map} +0 -0
  145. /package/dist/components/{p-D5PN6zdD.js.map → p-B-kRByho.js.map} +0 -0
  146. /package/dist/components/{p-CmUGA_q4.js.map → p-B4_0Ys4w.js.map} +0 -0
  147. /package/dist/components/{p-BApNi_xA.js.map → p-B6RrZQqw.js.map} +0 -0
  148. /package/dist/components/{p-CQ4vAZ9j.js.map → p-BBtjABBS.js.map} +0 -0
  149. /package/dist/components/{p-CmMfRM1s.js.map → p-BFfHIu6y.js.map} +0 -0
  150. /package/dist/components/{p-CBiAsFAZ.js.map → p-BPyymeuR.js.map} +0 -0
  151. /package/dist/components/{p-Bgh0uG51.js.map → p-BR_oMaas.js.map} +0 -0
  152. /package/dist/components/{p-w2kKeG_h.js.map → p-Bb4f5SuF.js.map} +0 -0
  153. /package/dist/components/{p-B5snQKiP.js.map → p-BmNpPyzf.js.map} +0 -0
  154. /package/dist/components/{p-CWItD0gL.js.map → p-Bmo4T96l.js.map} +0 -0
  155. /package/dist/components/{p-DHAuidt1.js.map → p-Bsfpxto1.js.map} +0 -0
  156. /package/dist/components/{p-a6cnCKWk.js.map → p-BtuYufL3.js.map} +0 -0
  157. /package/dist/components/{p-BxEOlO5k.js.map → p-CKRJX0Y0.js.map} +0 -0
  158. /package/dist/components/{p-1moOgMI-.js.map → p-Ca6s5fLR.js.map} +0 -0
  159. /package/dist/components/{p-RT1mts9U.js.map → p-CbjFUpOj.js.map} +0 -0
  160. /package/dist/components/{p-CqOswTy8.js.map → p-CuJ3J6OJ.js.map} +0 -0
  161. /package/dist/components/{p-BQTJ7ePr.js.map → p-CxgMUvqg.js.map} +0 -0
  162. /package/dist/components/{p-CWKrq35a.js.map → p-D0bM3cKj.js.map} +0 -0
  163. /package/dist/components/{p-UtfErnpX.js.map → p-D2cjoj2r.js.map} +0 -0
  164. /package/dist/components/{p-CGwVooB6.js.map → p-DHF5cLzr.js.map} +0 -0
  165. /package/dist/components/{p-BgjtMMye.js.map → p-DVuxzrCC.js.map} +0 -0
  166. /package/dist/components/{p-DXGKfXTh.js.map → p-DfvDNcoq.js.map} +0 -0
  167. /package/dist/components/{p-4scN0Mgn.js.map → p-Di81y9Q2.js.map} +0 -0
  168. /package/dist/components/{p-C_3mZMFK.js.map → p-Eep5mxtv.js.map} +0 -0
  169. /package/dist/components/{p-DoNdiEly.js.map → p-IYy-jODg.js.map} +0 -0
  170. /package/dist/components/{p-DtV263qO.js.map → p-iCjUWcp7.js.map} +0 -0
  171. /package/dist/components/{p-BgASe-BH.js.map → p-og48Kh2i.js.map} +0 -0
  172. /package/dist/components/{p-BSocHH2X.js.map → p-wOOAzVMC.js.map} +0 -0
package/dist/components/ds-panel-sub-nav.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as n,H as s,c as e,h as o,a,t as r}from"./index.js";import{d as i}from"./p-w2kKeG_h.js";const t=()=>`.ds-control--lg.sc-ds-panel-sub-nav,.ds-control--lg.sc-ds-panel-sub-nav-h,.ds-control--md.sc-ds-panel-sub-nav-h,.ds-control--md.sc-ds-panel-sub-nav,.ds-control--sm.sc-ds-panel-sub-nav-h,.ds-control--sm.sc-ds-panel-sub-nav,.ds-control--xs.sc-ds-panel-sub-nav-h,.ds-control--xs.sc-ds-panel-sub-nav{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-panel-sub-nav-h,.ds-control--lg.sc-ds-panel-sub-nav{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-panel-sub-nav-h,.ds-control--md.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-control--sm.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-control--xs.sc-ds-panel-sub-nav{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}@media (forced-colors: active){.sc-ds-panel-sub-nav:root,.sc-ds-panel-sub-nav-h,.ds-forced-colors-scope.sc-ds-panel-sub-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-panel-sub-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-panel-sub-nav-h,.ds-focus-ring.sc-ds-panel-sub-nav,.ds-focus-ring-inset.sc-ds-panel-sub-nav-h,.ds-focus-ring-inset.sc-ds-panel-sub-nav{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-panel-sub-nav-h:focus-visible,.ds-focus-ring.sc-ds-panel-sub-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-panel-sub-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-panel-sub-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-panel-sub-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-panel-sub-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-panel-sub-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-panel-sub-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-sub-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-sub-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-sub-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-sub-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-panel-sub-nav-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-panel-sub-nav:root,.sc-ds-panel-sub-nav-h,.ds-forced-colors-scope.sc-ds-panel-sub-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-panel-sub-nav-h,.ds-interaction-fill.sc-ds-panel-sub-nav{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-panel-sub-nav-h::before,.ds-interaction-fill.sc-ds-panel-sub-nav::before,.ds-interaction-fill.sc-ds-panel-sub-nav-h::after,.ds-interaction-fill.sc-ds-panel-sub-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-panel-sub-nav-h::before,.ds-interaction-fill.sc-ds-panel-sub-nav::before{z-index:1}.ds-interaction-fill.sc-ds-panel-sub-nav-h::after,.ds-interaction-fill.sc-ds-panel-sub-nav::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-panel-sub-nav-h,.ds-interaction-fill--bordered.sc-ds-panel-sub-nav{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-panel-sub-nav-h::before,.ds-interaction-fill--selected.sc-ds-panel-sub-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-panel-sub-nav-h,.ds-interaction-fill--selected.sc-ds-panel-sub-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-panel-sub-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-sub-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-panel-sub-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-sub-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-panel-sub-nav-h>.ds-interaction-fill__content.sc-ds-panel-sub-nav,.ds-interaction-fill.sc-ds-panel-sub-nav>.ds-interaction-fill__content.sc-ds-panel-sub-nav,.ds-interaction-fill__content.sc-ds-panel-sub-nav{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-panel-sub-nav-h,.ds-interaction-fill--on-faint.sc-ds-panel-sub-nav{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-panel-sub-nav-h,.ds-interaction-fill--on-medium.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-interaction-fill--on-bold.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-interaction-fill--on-strong.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-interaction-fill--on-translucent.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-interaction-fill--on-inverted.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-interaction-fill--on-media.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-interaction-fill--on-always-dark.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-interaction-fill--on-navigation.sc-ds-panel-sub-nav{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-panel-sub-nav-h::after,.ds-interaction-fill.sc-ds-panel-sub-nav::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-panel-sub-nav-h::before,.ds-interaction-fill--selected.sc-ds-panel-sub-nav::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-panel-sub-nav-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-panel-sub-nav:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-panel-sub-nav:root,.sc-ds-panel-sub-nav-h,.ds-forced-colors-scope.sc-ds-panel-sub-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-panel-sub-nav-h,.ds-control-inactive.sc-ds-panel-sub-nav{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-panel-sub-nav-h,.ds-control-inactive.sc-ds-panel-sub-nav{color:var(--ds-forced-color-disabled);opacity:1}}.sc-ds-panel-sub-nav-h{display:block;width:100%}.panel-sub-nav.sc-ds-panel-sub-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.panel-sub-nav__item.sc-ds-panel-sub-nav{display:flex;align-items:center;justify-content:flex-start;gap:var(--ds-control-gap);width:100%;height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);box-sizing:border-box;border:none;border-radius:var(--ds-control-radius);background:transparent;color:var(--color-foreground-secondary);cursor:default;text-align:left;-webkit-user-select:none;user-select:none;transition:color var(--effect-motion-short-2)}.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-foreground-primary)}.panel-sub-nav__item--on-medium.sc-ds-panel-sub-nav{color:var(--color-foreground-on-medium-background-secondary)}.panel-sub-nav__item--on-medium.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-foreground-on-medium-background-primary)}.panel-sub-nav__item--on-bold.sc-ds-panel-sub-nav{color:var(--color-foreground-on-bold-background-secondary)}.panel-sub-nav__item--on-bold.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-foreground-on-bold-background-primary)}.panel-sub-nav__item--on-strong.sc-ds-panel-sub-nav{color:var(--color-foreground-on-strong-background-secondary)}.panel-sub-nav__item--on-strong.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-foreground-on-strong-background-primary)}.panel-sub-nav__item--on-translucent.sc-ds-panel-sub-nav{color:var(--color-translucent-foreground-secondary)}.panel-sub-nav__item--on-translucent.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-translucent-foreground-primary)}.panel-sub-nav__item--on-inverted.sc-ds-panel-sub-nav{color:var(--color-inverted-foreground-secondary)}.panel-sub-nav__item--on-inverted.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-inverted-foreground-primary)}.panel-sub-nav__item--on-media.sc-ds-panel-sub-nav{color:var(--color-media-foreground-secondary)}.panel-sub-nav__item--on-media.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-media-foreground-primary)}.panel-sub-nav__item--on-always-dark.sc-ds-panel-sub-nav{color:var(--color-always-dark-foreground-secondary)}.panel-sub-nav__item--on-always-dark.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-always-dark-foreground-primary)}ds-text.panel-sub-nav__label.sc-ds-panel-sub-nav{flex:1;min-width:0;padding:0 var(--ds-control-label-inset)}`;const c=n(class n extends s{constructor(n){super();if(n!==false){this.__registerHost()}this.dsChange=e(this,"dsChange");this.value="";this.items=[];this.ariaLabel=null}get enabledItems(){return this.items.filter((n=>!n.isInactive))}get focusableId(){return this.enabledItems.some((n=>n.id===this.value))?this.value:this.enabledItems[0]?.id??""}selectItem(n){this.value=n;this.dsChange.emit(n);this.focusItem(n)}focusItem(n){const s=this.el.querySelector(`[data-panel-sub-nav-id="${n}"]`);s?.focus({preventScroll:true})}onValueChange(n,s){if(s===undefined||n===s)return;requestAnimationFrame((()=>{const s=document.activeElement;if(!s||!this.el.contains(s))return;this.focusItem(this.enabledItems.some((s=>s.id===n))?n:this.focusableId)}))}findEnabled(n,s){const e=this.items.length;for(let o=1;o<=e;o++){const a=(n+s*o+e*o)%e;if(!this.items[a]?.isInactive)return a}return n}handleKeyDown(n){if(!this.enabledItems.length)return;const s=n.target?.closest("[data-panel-sub-nav-id]")?.dataset["panelSubNavId"];const e=this.items.findIndex((n=>n.id===s));const o=this.items.findIndex((n=>n.id===this.value&&!n.isInactive));const a=e>=0?e:o>=0?o:n.key==="ArrowUp"?0:-1;let r=null;if(n.key==="ArrowDown"){r=this.findEnabled(a,1)}else if(n.key==="ArrowUp"){r=this.findEnabled(a,-1)}else if(n.key==="Home"){r=this.items.findIndex((n=>!n.isInactive))}else if(n.key==="End"){const n=[...this.items].reverse().findIndex((n=>!n.isInactive));r=n<0?null:this.items.length-1-n}if(r===null||r<0)return;const i=this.items[r];if(!i||i.isInactive)return;n.preventDefault();this.selectItem(i.id)}render(){const n=this.focusableId;const s=this.background;return o(a,{key:"d2d9baf9fb38acf129ddbaf8946fa0ee69b62a7e"},o("div",{key:"094fa67ea80f3be59adae04ef1c68a2ec7ca3dba",class:"panel-sub-nav",role:"tablist","aria-orientation":"vertical","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby},this.items.map((e=>{const a=e.id===this.value;return o("button",{id:e.id,type:"button",role:"tab","data-panel-sub-nav-id":e.id,class:{"panel-sub-nav__item":true,"panel-sub-nav__item--selected":a,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-interaction-fill":!e.isInactive,"ds-interaction-fill--selected":a&&!e.isInactive,"ds-interaction-fill--on-faint":s==="faint","ds-interaction-fill--on-medium":s==="medium","ds-interaction-fill--on-bold":s==="bold","ds-interaction-fill--on-strong":s==="strong","ds-interaction-fill--on-translucent":s==="translucent","ds-interaction-fill--on-inverted":s==="inverted","ds-interaction-fill--on-media":s==="media","ds-interaction-fill--on-always-dark":s==="always-dark",[`panel-sub-nav__item--on-${s}`]:!!s,"ds-control-inactive":!!e.isInactive},"aria-selected":a?"true":"false","aria-controls":e.panelId,"aria-disabled":e.isInactive?"true":undefined,disabled:e.isInactive,tabIndex:e.id===n?0:-1,onClick:()=>!e.isInactive&&this.selectItem(e.id)},o("ds-text",{class:"panel-sub-nav__label ds-interaction-fill__content",as:"span",variant:"text-body-medium",color:"inherit"},e.label))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return t()}},[2,"ds-panel-sub-nav",{value:[1025],items:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}]}]);function d(){if(typeof customElements==="undefined"){return}const n=["ds-panel-sub-nav","ds-text"];n.forEach((n=>{switch(n){case"ds-panel-sub-nav":if(!customElements.get(r(n))){customElements.define(r(n),c)}break;case"ds-text":if(!customElements.get(r(n))){i()}break}}))}d();const l=c;const u=d;export{l as DsPanelSubNav,u as defineCustomElement};
1
+ import{p as n,H as s,c as e,h as o,a,t as r}from"./index.js";import{d as i}from"./p-Bb4f5SuF.js";const t=()=>`.ds-control--lg.sc-ds-panel-sub-nav,.ds-control--lg.sc-ds-panel-sub-nav-h,.ds-control--md.sc-ds-panel-sub-nav-h,.ds-control--md.sc-ds-panel-sub-nav,.ds-control--sm.sc-ds-panel-sub-nav-h,.ds-control--sm.sc-ds-panel-sub-nav,.ds-control--xs.sc-ds-panel-sub-nav-h,.ds-control--xs.sc-ds-panel-sub-nav{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-panel-sub-nav-h,.ds-control--lg.sc-ds-panel-sub-nav{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-panel-sub-nav-h,.ds-control--md.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-control--sm.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-control--xs.sc-ds-panel-sub-nav{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}@media (forced-colors: active){.sc-ds-panel-sub-nav:root,.sc-ds-panel-sub-nav-h,.ds-forced-colors-scope.sc-ds-panel-sub-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-panel-sub-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-panel-sub-nav-h,.ds-focus-ring.sc-ds-panel-sub-nav,.ds-focus-ring-inset.sc-ds-panel-sub-nav-h,.ds-focus-ring-inset.sc-ds-panel-sub-nav{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-panel-sub-nav-h:focus-visible,.ds-focus-ring.sc-ds-panel-sub-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-panel-sub-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-panel-sub-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-panel-sub-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-panel-sub-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-panel-sub-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-panel-sub-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-sub-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-sub-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-sub-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-sub-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-panel-sub-nav-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-panel-sub-nav:root,.sc-ds-panel-sub-nav-h,.ds-forced-colors-scope.sc-ds-panel-sub-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-panel-sub-nav-h,.ds-interaction-fill.sc-ds-panel-sub-nav{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-panel-sub-nav-h::before,.ds-interaction-fill.sc-ds-panel-sub-nav::before,.ds-interaction-fill.sc-ds-panel-sub-nav-h::after,.ds-interaction-fill.sc-ds-panel-sub-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-panel-sub-nav-h::before,.ds-interaction-fill.sc-ds-panel-sub-nav::before{z-index:1}.ds-interaction-fill.sc-ds-panel-sub-nav-h::after,.ds-interaction-fill.sc-ds-panel-sub-nav::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-panel-sub-nav-h,.ds-interaction-fill--bordered.sc-ds-panel-sub-nav{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-panel-sub-nav-h::before,.ds-interaction-fill--selected.sc-ds-panel-sub-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-panel-sub-nav-h,.ds-interaction-fill--selected.sc-ds-panel-sub-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-panel-sub-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-sub-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-panel-sub-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-sub-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-panel-sub-nav-h>.ds-interaction-fill__content.sc-ds-panel-sub-nav,.ds-interaction-fill.sc-ds-panel-sub-nav>.ds-interaction-fill__content.sc-ds-panel-sub-nav,.ds-interaction-fill__content.sc-ds-panel-sub-nav{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-panel-sub-nav-h,.ds-interaction-fill--on-faint.sc-ds-panel-sub-nav{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-panel-sub-nav-h,.ds-interaction-fill--on-medium.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-interaction-fill--on-bold.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-interaction-fill--on-strong.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-interaction-fill--on-translucent.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-interaction-fill--on-inverted.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-interaction-fill--on-media.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-interaction-fill--on-always-dark.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-interaction-fill--on-navigation.sc-ds-panel-sub-nav{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-panel-sub-nav-h::after,.ds-interaction-fill.sc-ds-panel-sub-nav::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-panel-sub-nav-h::before,.ds-interaction-fill--selected.sc-ds-panel-sub-nav::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-panel-sub-nav-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-panel-sub-nav:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-panel-sub-nav:root,.sc-ds-panel-sub-nav-h,.ds-forced-colors-scope.sc-ds-panel-sub-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-panel-sub-nav-h,.ds-control-inactive.sc-ds-panel-sub-nav{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-panel-sub-nav-h,.ds-control-inactive.sc-ds-panel-sub-nav{color:var(--ds-forced-color-disabled);opacity:1}}.sc-ds-panel-sub-nav-h{display:block;width:100%}.panel-sub-nav.sc-ds-panel-sub-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.panel-sub-nav__item.sc-ds-panel-sub-nav{display:flex;align-items:center;justify-content:flex-start;gap:var(--ds-control-gap);width:100%;height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);box-sizing:border-box;border:none;border-radius:var(--ds-control-radius);background:transparent;color:var(--color-foreground-secondary);cursor:default;text-align:left;-webkit-user-select:none;user-select:none;transition:color var(--effect-motion-short-2)}.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-foreground-primary)}.panel-sub-nav__item--on-medium.sc-ds-panel-sub-nav{color:var(--color-foreground-on-medium-background-secondary)}.panel-sub-nav__item--on-medium.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-foreground-on-medium-background-primary)}.panel-sub-nav__item--on-bold.sc-ds-panel-sub-nav{color:var(--color-foreground-on-bold-background-secondary)}.panel-sub-nav__item--on-bold.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-foreground-on-bold-background-primary)}.panel-sub-nav__item--on-strong.sc-ds-panel-sub-nav{color:var(--color-foreground-on-strong-background-secondary)}.panel-sub-nav__item--on-strong.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-foreground-on-strong-background-primary)}.panel-sub-nav__item--on-translucent.sc-ds-panel-sub-nav{color:var(--color-translucent-foreground-secondary)}.panel-sub-nav__item--on-translucent.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-translucent-foreground-primary)}.panel-sub-nav__item--on-inverted.sc-ds-panel-sub-nav{color:var(--color-inverted-foreground-secondary)}.panel-sub-nav__item--on-inverted.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-inverted-foreground-primary)}.panel-sub-nav__item--on-media.sc-ds-panel-sub-nav{color:var(--color-media-foreground-secondary)}.panel-sub-nav__item--on-media.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-media-foreground-primary)}.panel-sub-nav__item--on-always-dark.sc-ds-panel-sub-nav{color:var(--color-always-dark-foreground-secondary)}.panel-sub-nav__item--on-always-dark.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-always-dark-foreground-primary)}ds-text.panel-sub-nav__label.sc-ds-panel-sub-nav{flex:1;min-width:0;padding:0 var(--ds-control-label-inset)}`;const c=n(class n extends s{constructor(n){super();if(n!==false){this.__registerHost()}this.dsChange=e(this,"dsChange");this.value="";this.items=[];this.ariaLabel=null}get enabledItems(){return this.items.filter((n=>!n.isInactive))}get focusableId(){return this.enabledItems.some((n=>n.id===this.value))?this.value:this.enabledItems[0]?.id??""}selectItem(n){this.value=n;this.dsChange.emit(n);this.focusItem(n)}focusItem(n){const s=this.el.querySelector(`[data-panel-sub-nav-id="${n}"]`);s?.focus({preventScroll:true})}onValueChange(n,s){if(s===undefined||n===s)return;requestAnimationFrame((()=>{const s=document.activeElement;if(!s||!this.el.contains(s))return;this.focusItem(this.enabledItems.some((s=>s.id===n))?n:this.focusableId)}))}findEnabled(n,s){const e=this.items.length;for(let o=1;o<=e;o++){const a=(n+s*o+e*o)%e;if(!this.items[a]?.isInactive)return a}return n}handleKeyDown(n){if(!this.enabledItems.length)return;const s=n.target?.closest("[data-panel-sub-nav-id]")?.dataset["panelSubNavId"];const e=this.items.findIndex((n=>n.id===s));const o=this.items.findIndex((n=>n.id===this.value&&!n.isInactive));const a=e>=0?e:o>=0?o:n.key==="ArrowUp"?0:-1;let r=null;if(n.key==="ArrowDown"){r=this.findEnabled(a,1)}else if(n.key==="ArrowUp"){r=this.findEnabled(a,-1)}else if(n.key==="Home"){r=this.items.findIndex((n=>!n.isInactive))}else if(n.key==="End"){const n=[...this.items].reverse().findIndex((n=>!n.isInactive));r=n<0?null:this.items.length-1-n}if(r===null||r<0)return;const i=this.items[r];if(!i||i.isInactive)return;n.preventDefault();this.selectItem(i.id)}render(){const n=this.focusableId;const s=this.background;return o(a,{key:"a024de12f8028bfc3894e96cc586ec68e65b9b6f"},o("div",{key:"51e6c65cfeb8aef7585b092bec0abea8bdae11e9",class:"panel-sub-nav",role:"tablist","aria-orientation":"vertical","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby},this.items.map((e=>{const a=e.id===this.value;return o("button",{id:e.id,type:"button",role:"tab","data-panel-sub-nav-id":e.id,class:{"panel-sub-nav__item":true,"panel-sub-nav__item--selected":a,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-interaction-fill":!e.isInactive,"ds-interaction-fill--selected":a&&!e.isInactive,"ds-interaction-fill--on-faint":s==="faint","ds-interaction-fill--on-medium":s==="medium","ds-interaction-fill--on-bold":s==="bold","ds-interaction-fill--on-strong":s==="strong","ds-interaction-fill--on-translucent":s==="translucent","ds-interaction-fill--on-inverted":s==="inverted","ds-interaction-fill--on-media":s==="media","ds-interaction-fill--on-always-dark":s==="always-dark",[`panel-sub-nav__item--on-${s}`]:!!s,"ds-control-inactive":!!e.isInactive},"aria-selected":a?"true":"false","aria-controls":e.panelId,"aria-disabled":e.isInactive?"true":undefined,disabled:e.isInactive,tabIndex:e.id===n?0:-1,onClick:()=>!e.isInactive&&this.selectItem(e.id)},o("ds-text",{class:"panel-sub-nav__label ds-interaction-fill__content",as:"span",variant:"text-body-medium",color:"inherit"},e.label))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return t()}},[2,"ds-panel-sub-nav",{value:[1025],items:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}]}]);function d(){if(typeof customElements==="undefined"){return}const n=["ds-panel-sub-nav","ds-text"];n.forEach((n=>{switch(n){case"ds-panel-sub-nav":if(!customElements.get(r(n))){customElements.define(r(n),c)}break;case"ds-text":if(!customElements.get(r(n))){i()}break}}))}d();const l=c;const u=d;export{l as DsPanelSubNav,u as defineCustomElement};
2
2
  //# sourceMappingURL=ds-panel-sub-nav.js.map
package/dist/components/ds-panel-tool-header.js CHANGED
@@ -1,2 +1,2 @@
1
- import{P as o,d as s}from"./p-B3PdrMP0.js";const r=o;const t=s;export{r as DsPanelToolHeader,t as defineCustomElement};
1
+ import{P as o,d as s}from"./p-DX4c3kZ1.js";const t=o;const c=s;export{t as DsPanelToolHeader,c as defineCustomElement};
2
2
  //# sourceMappingURL=ds-panel-tool-header.js.map
package/dist/components/ds-panel-tool-search.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,H as s,c as t,h as a,a as o,t as r}from"./index.js";import{C as l}from"./p-ymtdhOU5.js";import{d as i}from"./p-DoNdiEly.js";import{d}from"./p-Bgh0uG51.js";import{d as n}from"./p-BgASe-BH.js";import{d as c}from"./p-BAfG3M8z.js";import{d as h}from"./p-Ca-I2UnB.js";import{d as p}from"./p-w2kKeG_h.js";import{d as g}from"./p-UtfErnpX.js";const m=()=>`.ds-control--lg.sc-ds-panel-tool-search,.ds-control--lg.sc-ds-panel-tool-search-h,.ds-control--md.sc-ds-panel-tool-search-h,.ds-control--md.sc-ds-panel-tool-search,.ds-control--sm.sc-ds-panel-tool-search-h,.ds-control--sm.sc-ds-panel-tool-search,.ds-control--xs.sc-ds-panel-tool-search-h,.ds-control--xs.sc-ds-panel-tool-search{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-panel-tool-search-h,.ds-control--lg.sc-ds-panel-tool-search{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-panel-tool-search-h,.ds-control--md.sc-ds-panel-tool-search{--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-panel-tool-search-h,.ds-control--sm.sc-ds-panel-tool-search{--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-panel-tool-search-h,.ds-control--xs.sc-ds-panel-tool-search{--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-chrome-space--sm.sc-ds-panel-tool-search-h,.ds-chrome-space--sm.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-panel-tool-search-h,.ds-chrome-space--md.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-panel-tool-search-h,.ds-chrome-space--lg.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-panel-tool-search-h,.ds-chrome-row.sc-ds-panel-tool-search,.ds-chrome-column.sc-ds-panel-tool-search-h,.ds-chrome-column.sc-ds-panel-tool-search,.ds-chrome-grid.sc-ds-panel-tool-search-h,.ds-chrome-grid.sc-ds-panel-tool-search{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-panel-tool-search-h,.ds-chrome-row.sc-ds-panel-tool-search{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-panel-tool-search-h,.ds-chrome-column.sc-ds-panel-tool-search{flex-direction:column}.ds-chrome-grid.sc-ds-panel-tool-search-h,.ds-chrome-grid.sc-ds-panel-tool-search{display:grid;align-items:center}.select-search.sc-ds-panel-tool-search{position:relative;box-sizing:border-box;padding:var(--dimension-space-050);background:transparent}.select-search.sc-ds-panel-tool-search::after{content:'';position:absolute;inset:auto 0 0;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.select-search.sc-ds-panel-tool-search:focus-within::after{height:var(--dimension-stroke-width-018);background-color:var(--color-border-bold-brand)}.select-search__control.sc-ds-panel-tool-search{display:flex;align-items:center;box-sizing:border-box;gap:var(--ds-control-gap, var(--dimension-space-050));height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border:0;border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.select-search__control.sc-ds-panel-tool-search:has(.select-search__clear){padding-right:0}.select-search__control.sc-ds-panel-tool-search>ds-icon.sc-ds-panel-tool-search{flex-shrink:0;color:var(--color-foreground-secondary)}.select-search.sc-ds-panel-tool-search .select-search__control.sc-ds-panel-tool-search .select-search__clear.sc-ds-panel-tool-search{align-self:center;flex-shrink:0;margin-right:var(--dimension-space-050)}.select-search__control.sc-ds-panel-tool-search input.sc-ds-panel-tool-search{flex:1;min-width:0;height:100%;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));border:0;outline:none;background:transparent;color:var(--color-foreground-primary);font-family:inherit}.select-search__control.sc-ds-panel-tool-search input.sc-ds-panel-tool-search::placeholder{color:var(--color-foreground-secondary)}.select-search__control.sc-ds-panel-tool-search input.sc-ds-panel-tool-search:focus::placeholder{color:var(--color-foreground-quaternary)}.select-search__control.sc-ds-panel-tool-search input[type='search'].sc-ds-panel-tool-search::-webkit-search-cancel-button,.select-search__control.sc-ds-panel-tool-search input[type='search'].sc-ds-panel-tool-search::-webkit-search-decoration{display:none}.ds-text--display-medium.sc-ds-panel-tool-search-h,.ds-text--display-medium.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-panel-tool-search-h,.ds-text--display-small.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-panel-tool-search-h,.ds-text--title-large.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-panel-tool-search-h,.ds-text--title-medium.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-panel-tool-search-h,.ds-text--title-small.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-panel-tool-search-h,.ds-text--body-large.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-panel-tool-search-h,.ds-text--body-medium.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-panel-tool-search-h,.ds-text--body-small.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-panel-tool-search-h,.ds-text--caption.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--display-small.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-panel-tool-search,.ds-text--display-small.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--display-small.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--display-medium.ds-text--regular.sc-ds-panel-tool-search,.ds-text--display-small.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--title-large.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--title-large.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--title-small.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-panel-tool-search,.ds-text--title-small.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--title-small.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--title-medium.ds-text--regular.sc-ds-panel-tool-search,.ds-text--title-small.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--body-large.ds-text--emphasis.sc-ds-panel-tool-search,.ds-text--body-medium.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--body-medium.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--body-large.ds-text--regular.sc-ds-panel-tool-search,.ds-text--body-medium.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--body-small.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--body-small.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--caption.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--caption.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}.sc-ds-panel-tool-search-h{display:block;flex:0 0 var(--dimension-size-600);width:100%;min-width:0;height:var(--dimension-size-600);box-sizing:border-box;background:transparent}.panel-tool-search.sc-ds-panel-tool-search{position:relative;width:100%;height:100%;background:transparent}.panel-tool-search.sc-ds-panel-tool-search::after{content:'';position:absolute;inset:auto 0 0;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.select-search.sc-ds-panel-tool-search{flex:1 1 auto;width:auto;min-width:0;height:var(--dimension-size-400);padding:0}.select-search.sc-ds-panel-tool-search::after{display:none}.panel-tool-search__filter-group.sc-ds-panel-tool-search{display:flex;flex:0 0 auto;align-items:center;gap:var(--dimension-space-100)}.panel-tool-search__divider.sc-ds-panel-tool-search,.panel-tool-search__filter.sc-ds-panel-tool-search{flex:0 0 auto}`;const y=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.dsClear=t(this,"dsClear");this.dsFilterToggle=t(this,"dsFilterToggle");this.value="";this.placeholder="Search";this.ariaLabel="Search";this.isInactive=false;this.showFilter=false;this.filterAriaLabel="Filter";this.filterTriggerId="";this.filterExpanded=false;this.filterActive=false;this.handleChange=e=>{this.value=e;this.dsChange.emit(e)}}componentDidRender(){const e=this.el.querySelector("input");if(e&&e.value!==this.value)e.value=this.value}async setFocus(){this.el.querySelector("input")?.focus()}async focusFilterTrigger(){const e=this.el.querySelector("ds-button-unfilled.panel-tool-search__filter");await(e?.setFocus?.())}render(){return a(o,{key:"2d5ec1c33b9e41ec48d9657c486813b8b706f2b1"},a("div",{key:"787418087fe7a2752fa89be010c6fc987a6d8ca6",class:"panel-tool-search ds-chrome-row ds-chrome-space--md"},a(l,{key:"9fc3e2f20375beb9c5d54f121b9bddc53395c97d",value:this.value,placeholder:this.placeholder,ariaLabel:this.ariaLabel,controls:this.controls,disabled:this.isInactive,inputRef:()=>undefined,clearLabel:"Clear",onValueChange:this.handleChange,onClear:()=>this.dsClear.emit(),onKeyDown:()=>undefined}),this.showFilter?a("div",{class:"panel-tool-search__filter-group"},a("ds-divider",{class:"panel-tool-search__divider",orientation:"vertical",length:"var(--dimension-size-200)"}),a("ds-tooltip",{label:this.filterAriaLabel,side:"bottom",size:"sm"},a("ds-button-unfilled",{id:this.filterTriggerId||undefined,class:"panel-tool-search__filter",variant:"icon",icon:"Filters",size:"md","aria-label":this.filterAriaLabel,haspopup:"menu",controls:this.filterControls,expanded:this.filterExpanded,isActive:this.filterActive,isInactive:this.isInactive,activeFill:false,hasBorder:false,onDsChange:e=>{e.stopPropagation()},onDsClick:e=>{e.stopPropagation();this.dsFilterToggle.emit(e.detail)}}))):null))}get el(){return this}static get style(){return m()}},[2,"ds-panel-tool-search",{value:[1025],placeholder:[1],ariaLabel:[1,"aria-label"],controls:[1],isInactive:[4,"is-inactive"],showFilter:[4,"show-filter"],filterAriaLabel:[1,"filter-aria-label"],filterTriggerId:[1,"filter-trigger-id"],filterControls:[1,"filter-controls"],filterExpanded:[4,"filter-expanded"],filterActive:[4,"filter-active"],setFocus:[64],focusFilterTrigger:[64]}]);function v(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tool-search","ds-badge","ds-button-unfilled","ds-divider","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-tool-search":if(!customElements.get(r(e))){customElements.define(r(e),y)}break;case"ds-badge":if(!customElements.get(r(e))){i()}break;case"ds-button-unfilled":if(!customElements.get(r(e))){d()}break;case"ds-divider":if(!customElements.get(r(e))){n()}break;case"ds-icon":if(!customElements.get(r(e))){c()}break;case"ds-loader":if(!customElements.get(r(e))){h()}break;case"ds-text":if(!customElements.get(r(e))){p()}break;case"ds-tooltip":if(!customElements.get(r(e))){g()}break}}))}v();const x=y;const u=v;export{x as DsPanelToolSearch,u as defineCustomElement};
1
+ import{p as e,H as s,c as t,h as a,a as o,t as r}from"./index.js";import{C as l}from"./p-ymtdhOU5.js";import{d as i}from"./p-IYy-jODg.js";import{d}from"./p-BR_oMaas.js";import{d as n}from"./p-og48Kh2i.js";import{d as c}from"./p-BAfG3M8z.js";import{d as h}from"./p-Ca-I2UnB.js";import{d as p}from"./p-Bb4f5SuF.js";import{d as g}from"./p-D2cjoj2r.js";const m=()=>`.ds-control--lg.sc-ds-panel-tool-search,.ds-control--lg.sc-ds-panel-tool-search-h,.ds-control--md.sc-ds-panel-tool-search-h,.ds-control--md.sc-ds-panel-tool-search,.ds-control--sm.sc-ds-panel-tool-search-h,.ds-control--sm.sc-ds-panel-tool-search,.ds-control--xs.sc-ds-panel-tool-search-h,.ds-control--xs.sc-ds-panel-tool-search{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-panel-tool-search-h,.ds-control--lg.sc-ds-panel-tool-search{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-panel-tool-search-h,.ds-control--md.sc-ds-panel-tool-search{--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-panel-tool-search-h,.ds-control--sm.sc-ds-panel-tool-search{--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-panel-tool-search-h,.ds-control--xs.sc-ds-panel-tool-search{--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-chrome-space--sm.sc-ds-panel-tool-search-h,.ds-chrome-space--sm.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-panel-tool-search-h,.ds-chrome-space--md.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-panel-tool-search-h,.ds-chrome-space--lg.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-panel-tool-search-h,.ds-chrome-row.sc-ds-panel-tool-search,.ds-chrome-column.sc-ds-panel-tool-search-h,.ds-chrome-column.sc-ds-panel-tool-search,.ds-chrome-grid.sc-ds-panel-tool-search-h,.ds-chrome-grid.sc-ds-panel-tool-search{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-panel-tool-search-h,.ds-chrome-row.sc-ds-panel-tool-search{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-panel-tool-search-h,.ds-chrome-column.sc-ds-panel-tool-search{flex-direction:column}.ds-chrome-grid.sc-ds-panel-tool-search-h,.ds-chrome-grid.sc-ds-panel-tool-search{display:grid;align-items:center}.select-search.sc-ds-panel-tool-search{position:relative;box-sizing:border-box;padding:var(--dimension-space-050);background:transparent}.select-search.sc-ds-panel-tool-search::after{content:'';position:absolute;inset:auto 0 0;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.select-search.sc-ds-panel-tool-search:focus-within::after{height:var(--dimension-stroke-width-018);background-color:var(--color-border-bold-brand)}.select-search__control.sc-ds-panel-tool-search{display:flex;align-items:center;box-sizing:border-box;gap:var(--ds-control-gap, var(--dimension-space-050));height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border:0;border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.select-search__control.sc-ds-panel-tool-search:has(.select-search__clear){padding-right:0}.select-search__control.sc-ds-panel-tool-search>ds-icon.sc-ds-panel-tool-search{flex-shrink:0;color:var(--color-foreground-secondary)}.select-search.sc-ds-panel-tool-search .select-search__control.sc-ds-panel-tool-search .select-search__clear.sc-ds-panel-tool-search{align-self:center;flex-shrink:0;margin-right:var(--dimension-space-050)}.select-search__control.sc-ds-panel-tool-search input.sc-ds-panel-tool-search{flex:1;min-width:0;height:100%;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));border:0;outline:none;background:transparent;color:var(--color-foreground-primary);font-family:inherit}.select-search__control.sc-ds-panel-tool-search input.sc-ds-panel-tool-search::placeholder{color:var(--color-foreground-secondary)}.select-search__control.sc-ds-panel-tool-search input.sc-ds-panel-tool-search:focus::placeholder{color:var(--color-foreground-quaternary)}.select-search__control.sc-ds-panel-tool-search input[type='search'].sc-ds-panel-tool-search::-webkit-search-cancel-button,.select-search__control.sc-ds-panel-tool-search input[type='search'].sc-ds-panel-tool-search::-webkit-search-decoration{display:none}.ds-text--display-medium.sc-ds-panel-tool-search-h,.ds-text--display-medium.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-panel-tool-search-h,.ds-text--display-small.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-panel-tool-search-h,.ds-text--title-large.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-panel-tool-search-h,.ds-text--title-medium.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-panel-tool-search-h,.ds-text--title-small.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-panel-tool-search-h,.ds-text--body-large.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-panel-tool-search-h,.ds-text--body-medium.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-panel-tool-search-h,.ds-text--body-small.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-panel-tool-search-h,.ds-text--caption.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--display-small.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-panel-tool-search,.ds-text--display-small.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--display-small.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--display-medium.ds-text--regular.sc-ds-panel-tool-search,.ds-text--display-small.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--title-large.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--title-large.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--title-small.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-panel-tool-search,.ds-text--title-small.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--title-small.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--title-medium.ds-text--regular.sc-ds-panel-tool-search,.ds-text--title-small.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--body-large.ds-text--emphasis.sc-ds-panel-tool-search,.ds-text--body-medium.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--body-medium.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--body-large.ds-text--regular.sc-ds-panel-tool-search,.ds-text--body-medium.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--body-small.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--body-small.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--caption.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--caption.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}.sc-ds-panel-tool-search-h{display:block;flex:0 0 var(--dimension-size-600);width:100%;min-width:0;height:var(--dimension-size-600);box-sizing:border-box;background:transparent}.panel-tool-search.sc-ds-panel-tool-search{position:relative;width:100%;height:100%;background:transparent}.panel-tool-search.sc-ds-panel-tool-search::after{content:'';position:absolute;inset:auto 0 0;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.select-search.sc-ds-panel-tool-search{flex:1 1 auto;width:auto;min-width:0;height:var(--dimension-size-400);padding:0}.select-search.sc-ds-panel-tool-search::after{display:none}.panel-tool-search__filter-group.sc-ds-panel-tool-search{display:flex;flex:0 0 auto;align-items:center;gap:var(--dimension-space-100)}.panel-tool-search__divider.sc-ds-panel-tool-search,.panel-tool-search__filter.sc-ds-panel-tool-search{flex:0 0 auto}`;const y=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.dsClear=t(this,"dsClear");this.dsFilterToggle=t(this,"dsFilterToggle");this.value="";this.placeholder="Search";this.ariaLabel="Search";this.isInactive=false;this.showFilter=false;this.filterAriaLabel="Filter";this.filterTriggerId="";this.filterExpanded=false;this.filterActive=false;this.handleChange=e=>{this.value=e;this.dsChange.emit(e)}}componentDidRender(){const e=this.el.querySelector("input");if(e&&e.value!==this.value)e.value=this.value}async setFocus(){this.el.querySelector("input")?.focus()}async focusFilterTrigger(){const e=this.el.querySelector("ds-button-unfilled.panel-tool-search__filter");await(e?.setFocus?.())}render(){return a(o,{key:"dd7392e3a7c289827f4800872f4e3d373862aa99"},a("div",{key:"b332c8ec5fd8ea1da5a14204cf7e10d1cab0185b",class:"panel-tool-search ds-chrome-row ds-chrome-space--md"},a(l,{key:"65654435dae2ac0aab25a137ef2fda6dde4d56ca",value:this.value,placeholder:this.placeholder,ariaLabel:this.ariaLabel,controls:this.controls,disabled:this.isInactive,inputRef:()=>undefined,clearLabel:"Clear",onValueChange:this.handleChange,onClear:()=>this.dsClear.emit(),onKeyDown:()=>undefined}),this.showFilter?a("div",{class:"panel-tool-search__filter-group"},a("ds-divider",{class:"panel-tool-search__divider",orientation:"vertical",length:"var(--dimension-size-200)"}),a("ds-tooltip",{label:this.filterAriaLabel,side:"bottom",size:"sm"},a("ds-button-unfilled",{id:this.filterTriggerId||undefined,class:"panel-tool-search__filter",variant:"icon",icon:"Filters",size:"md","aria-label":this.filterAriaLabel,haspopup:"menu",controls:this.filterControls,expanded:this.filterExpanded,isActive:this.filterActive,isInactive:this.isInactive,activeFill:false,hasBorder:false,onDsChange:e=>{e.stopPropagation()},onDsClick:e=>{e.stopPropagation();this.dsFilterToggle.emit(e.detail)}}))):null))}get el(){return this}static get style(){return m()}},[2,"ds-panel-tool-search",{value:[1025],placeholder:[1],ariaLabel:[1,"aria-label"],controls:[1],isInactive:[4,"is-inactive"],showFilter:[4,"show-filter"],filterAriaLabel:[1,"filter-aria-label"],filterTriggerId:[1,"filter-trigger-id"],filterControls:[1,"filter-controls"],filterExpanded:[4,"filter-expanded"],filterActive:[4,"filter-active"],setFocus:[64],focusFilterTrigger:[64]}]);function v(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tool-search","ds-badge","ds-button-unfilled","ds-divider","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-tool-search":if(!customElements.get(r(e))){customElements.define(r(e),y)}break;case"ds-badge":if(!customElements.get(r(e))){i()}break;case"ds-button-unfilled":if(!customElements.get(r(e))){d()}break;case"ds-divider":if(!customElements.get(r(e))){n()}break;case"ds-icon":if(!customElements.get(r(e))){c()}break;case"ds-loader":if(!customElements.get(r(e))){h()}break;case"ds-text":if(!customElements.get(r(e))){p()}break;case"ds-tooltip":if(!customElements.get(r(e))){g()}break}}))}v();const x=y;const u=v;export{x as DsPanelToolSearch,u as defineCustomElement};
2
2
  //# sourceMappingURL=ds-panel-tool-search.js.map
package/dist/components/ds-panel-tools.js CHANGED
@@ -1,2 +1,2 @@
1
- import{P as o,d as s}from"./p-CUSz0JFa.js";const t=o;const a=s;export{t as DsPanelTools,a as defineCustomElement};
1
+ import{P as o,d as s}from"./p-DaqFuVKZ.js";const t=o;const a=s;export{t as DsPanelTools,a as defineCustomElement};
2
2
  //# sourceMappingURL=ds-panel-tools.js.map
package/dist/components/ds-radio.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as o,H as i,c as r,h as s,a as e,t as d}from"./index.js";import{d as n}from"./p-w2kKeG_h.js";import{D as t,s as a}from"./p-DOUk4KoT.js";import{s as c,r as l}from"./p-D2xWcVv6.js";import{C as f}from"./p-CuwopElg.js";const v=()=>`@media (forced-colors: active){.sc-ds-radio:root,.sc-ds-radio-h,.ds-forced-colors-scope.sc-ds-radio{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-radio-h,.ds-control-inactive.sc-ds-radio{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-radio-h,.ds-control-inactive.sc-ds-radio{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-radio,.ds-control--lg.sc-ds-radio-h,.ds-control--md.sc-ds-radio-h,.ds-control--md.sc-ds-radio,.ds-control--sm.sc-ds-radio-h,.ds-control--sm.sc-ds-radio,.ds-control--xs.sc-ds-radio-h,.ds-control--xs.sc-ds-radio{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-radio-h,.ds-control--lg.sc-ds-radio{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-radio-h,.ds-control--md.sc-ds-radio{--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-radio-h,.ds-control--sm.sc-ds-radio{--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-radio-h,.ds-control--xs.sc-ds-radio{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}@media (forced-colors: active){.sc-ds-radio:root,.sc-ds-radio-h,.ds-forced-colors-scope.sc-ds-radio{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-radio-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-radio-h,.ds-focus-ring.sc-ds-radio,.ds-focus-ring-inset.sc-ds-radio-h,.ds-focus-ring-inset.sc-ds-radio{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-radio-h:focus-visible,.ds-focus-ring.sc-ds-radio:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-radio-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-radio{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-radio-h:focus-visible,.ds-focus-ring-inset.sc-ds-radio:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-radio-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-radio:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-radio-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-radio:root,.sc-ds-radio-h,.ds-forced-colors-scope.sc-ds-radio{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-radio-h,.ds-interaction-fill.sc-ds-radio{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-radio-h::before,.ds-interaction-fill.sc-ds-radio::before,.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-radio-h::before,.ds-interaction-fill.sc-ds-radio::before{z-index:1}.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::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-radio-h,.ds-interaction-fill--bordered.sc-ds-radio{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-radio-h::before,.ds-interaction-fill--selected.sc-ds-radio::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-radio-h,.ds-interaction-fill--selected.sc-ds-radio{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-radio-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-radio-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-radio-h>.ds-interaction-fill__content.sc-ds-radio,.ds-interaction-fill.sc-ds-radio>.ds-interaction-fill__content.sc-ds-radio,.ds-interaction-fill__content.sc-ds-radio{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-radio-h,.ds-interaction-fill--on-faint.sc-ds-radio{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-radio-h,.ds-interaction-fill--on-medium.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-bold.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-strong.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-translucent.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-inverted.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-media.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-always-dark.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-navigation.sc-ds-radio{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-radio-h::before,.ds-interaction-fill--selected.sc-ds-radio::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-radio-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-radio:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-radio:root,.sc-ds-radio-h,.ds-forced-colors-scope.sc-ds-radio{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-radio-h{display:flex;flex-direction:column;gap:var(--dimension-space-025)}.radio--horizontal.sc-ds-radio-h{flex-direction:row;gap:var(--dimension-space-100)}.radio--lg.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-md);--_radio-dot:calc(var(--dimension-size-base) * 5 / 4);--_radio-stroke:var(--dimension-stroke-width-018)}.radio--md.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-sm);--_radio-dot:var(--dimension-size-100);--_radio-stroke:var(--dimension-stroke-width-015)}.radio--sm.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-xs);--_radio-dot:var(--dimension-size-075);--_radio-stroke:var(--dimension-stroke-width-012)}.radio--xs.sc-ds-radio-h{--_radio-circle:var(--dimension-size-100);--_radio-dot:var(--dimension-size-050);--_radio-stroke:calc(var(--dimension-stroke-width-base) * 3 / 32)}.radio__item.sc-ds-radio{display:inline-flex;align-items:center;box-sizing:border-box;gap:var(--ds-control-gap);height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);border-radius:var(--ds-control-radius);cursor:default;user-select:none}.radio__placement.sc-ds-radio{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.radio__circle.sc-ds-radio{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--_radio-circle);height:var(--_radio-circle);border:0;border-radius:var(--dimension-radius-half);box-shadow:inset 0 0 0 var(--_radio-stroke) var(--color-foreground-tertiary);transition:background-color var(--effect-motion-short-2), box-shadow var(--effect-motion-short-2)}.radio__circle--checked.sc-ds-radio{background-color:var(--color-background-bold-brand);box-shadow:none}.radio__dot.sc-ds-radio{width:var(--_radio-dot);height:var(--_radio-dot);border-radius:var(--dimension-radius-half);background-color:var(--color-foreground-on-bold-background-primary)}.radio__label.sc-ds-radio{flex:1;min-width:0;padding:0 var(--ds-control-label-inset)}@media (forced-colors: active){.radio__circle.sc-ds-radio{border:var(--_radio-stroke) solid var(--ds-forced-color-content);box-shadow:none}.radio__circle--checked.sc-ds-radio{background-color:var(--ds-forced-color-selected);border-color:var(--ds-forced-color-selected)}.radio__dot.sc-ds-radio{background-color:var(--ds-forced-color-on-selected)}}`;const h=o(class o extends i{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=r(this,"dsChange");this.internals=this.attachInternals();this.options=[];this.value="";this.size="md";this.disabled=false;this.required=false;this.requiredMessage=t;this.direction="vertical";this.isInactive=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}syncFormValue(){const o=this.isInactive||this.disabled||this.formDisabled;c(this.internals,this.value,{inactive:o});const i=this.required&&!o&&this.value.length===0;a(this.internals,i,this.requiredMessage)}formDisabledCallback(o){this.formDisabled=o;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(o){this.value=l(o)}get activeItems(){return Array.from(this.el.querySelectorAll("[data-radio-item]:not([data-inactive])"))}handleKeyDown(o){const i=this.activeItems;if(!i.length)return;const r=i.find((o=>o===document.activeElement));if(!r)return;const s=i.indexOf(r);let e=-1;switch(o.key){case"ArrowDown":case"ArrowRight":o.preventDefault();e=(s+1)%i.length;break;case"ArrowUp":case"ArrowLeft":o.preventDefault();e=(s-1+i.length)%i.length;break;case"Home":o.preventDefault();e=0;break;case"End":o.preventDefault();e=i.length-1;break}if(e>=0){i[e].focus();const o=i[e].dataset["value"];if(o&&o!==this.value){this.value=o;this.dsChange.emit(o)}}}selectItem(o){if(this.isInactive||this.disabled||this.formDisabled)return;if(o!==this.value){this.value=o;this.dsChange.emit(o)}}render(){const o=this.isInactive||this.disabled||this.formDisabled;const i=this.required&&!o&&this.value.length===0;const r=this.options.findIndex((o=>o.value===this.value));const d=this.options.findIndex((i=>!o&&!i.isInactive));const n=r>=0&&!o&&!this.options[r]?.isInactive?r:d;return s(e,{key:"f42934be05f6c35aaf28e9578efcb03584a353fc",role:"radiogroup","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-required":this.required?"true":undefined,"aria-invalid":i?"true":undefined,class:{radio:true,"radio--horizontal":this.direction==="horizontal",[`radio--${this.size}`]:true}},this.options.map(((i,r)=>{const e=o||!!i.isInactive;const d=i.value===this.value;const t=e?-1:r===n?0:-1;return s("div",{key:i.value,role:"radio","aria-checked":String(d),"aria-disabled":e?"true":undefined,tabIndex:t,"data-radio-item":true,"data-value":i.value,"data-inactive":e||undefined,class:{radio__item:true,[`ds-control--${this.size}`]:true,"ds-control-inactive":e,"ds-focus-ring-inset":!e,"ds-interaction-fill":!e},onClick:()=>!e&&this.selectItem(i.value),onKeyDown:o=>{if((o.key===" "||o.key==="Enter")&&!e){o.preventDefault();this.selectItem(i.value)}}},s("span",{class:"radio__placement ds-interaction-fill__content","aria-hidden":"true"},s("span",{class:{radio__circle:true,"radio__circle--checked":d}},d&&s("span",{class:"radio__dot"}))),s("ds-text",{class:"radio__label ds-interaction-fill__content",as:"span",variant:f[this.size]},i.label))})))}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 v()}},[66,"ds-radio",{options:[16],value:[1025],size:[1],name:[513],form:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],direction:[1],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],formDisabled:[32]},[[0,"keydown","handleKeyDown"]],{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function u(){if(typeof customElements==="undefined"){return}const o=["ds-radio","ds-text"];o.forEach((o=>{switch(o){case"ds-radio":if(!customElements.get(d(o))){customElements.define(d(o),h)}break;case"ds-text":if(!customElements.get(d(o))){n()}break}}))}u();const g=h;const b=u;export{g as DsRadio,b as defineCustomElement};
1
+ import{p as o,H as i,c as r,h as s,a as e,t as d}from"./index.js";import{d as n}from"./p-Bb4f5SuF.js";import{D as t,s as a}from"./p-DOUk4KoT.js";import{s as c,r as l}from"./p-D2xWcVv6.js";import{C as f}from"./p-CuwopElg.js";const v=()=>`@media (forced-colors: active){.sc-ds-radio:root,.sc-ds-radio-h,.ds-forced-colors-scope.sc-ds-radio{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-radio-h,.ds-control-inactive.sc-ds-radio{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-radio-h,.ds-control-inactive.sc-ds-radio{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-radio,.ds-control--lg.sc-ds-radio-h,.ds-control--md.sc-ds-radio-h,.ds-control--md.sc-ds-radio,.ds-control--sm.sc-ds-radio-h,.ds-control--sm.sc-ds-radio,.ds-control--xs.sc-ds-radio-h,.ds-control--xs.sc-ds-radio{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-radio-h,.ds-control--lg.sc-ds-radio{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-radio-h,.ds-control--md.sc-ds-radio{--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-radio-h,.ds-control--sm.sc-ds-radio{--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-radio-h,.ds-control--xs.sc-ds-radio{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}@media (forced-colors: active){.sc-ds-radio:root,.sc-ds-radio-h,.ds-forced-colors-scope.sc-ds-radio{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-radio-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-radio-h,.ds-focus-ring.sc-ds-radio,.ds-focus-ring-inset.sc-ds-radio-h,.ds-focus-ring-inset.sc-ds-radio{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-radio-h:focus-visible,.ds-focus-ring.sc-ds-radio:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-radio-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-radio{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-radio-h:focus-visible,.ds-focus-ring-inset.sc-ds-radio:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-radio-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-radio:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-radio-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-radio:root,.sc-ds-radio-h,.ds-forced-colors-scope.sc-ds-radio{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-radio-h,.ds-interaction-fill.sc-ds-radio{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-radio-h::before,.ds-interaction-fill.sc-ds-radio::before,.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-radio-h::before,.ds-interaction-fill.sc-ds-radio::before{z-index:1}.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::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-radio-h,.ds-interaction-fill--bordered.sc-ds-radio{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-radio-h::before,.ds-interaction-fill--selected.sc-ds-radio::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-radio-h,.ds-interaction-fill--selected.sc-ds-radio{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-radio-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-radio-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-radio-h>.ds-interaction-fill__content.sc-ds-radio,.ds-interaction-fill.sc-ds-radio>.ds-interaction-fill__content.sc-ds-radio,.ds-interaction-fill__content.sc-ds-radio{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-radio-h,.ds-interaction-fill--on-faint.sc-ds-radio{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-radio-h,.ds-interaction-fill--on-medium.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-bold.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-strong.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-translucent.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-inverted.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-media.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-always-dark.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-navigation.sc-ds-radio{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-radio-h::before,.ds-interaction-fill--selected.sc-ds-radio::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-radio-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-radio:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-radio:root,.sc-ds-radio-h,.ds-forced-colors-scope.sc-ds-radio{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-radio-h{display:flex;flex-direction:column;gap:var(--dimension-space-025)}.radio--horizontal.sc-ds-radio-h{flex-direction:row;gap:var(--dimension-space-100)}.radio--lg.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-md);--_radio-dot:calc(var(--dimension-size-base) * 5 / 4);--_radio-stroke:var(--dimension-stroke-width-018)}.radio--md.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-sm);--_radio-dot:var(--dimension-size-100);--_radio-stroke:var(--dimension-stroke-width-015)}.radio--sm.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-xs);--_radio-dot:var(--dimension-size-075);--_radio-stroke:var(--dimension-stroke-width-012)}.radio--xs.sc-ds-radio-h{--_radio-circle:var(--dimension-size-100);--_radio-dot:var(--dimension-size-050);--_radio-stroke:calc(var(--dimension-stroke-width-base) * 3 / 32)}.radio__item.sc-ds-radio{display:inline-flex;align-items:center;box-sizing:border-box;gap:var(--ds-control-gap);height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);border-radius:var(--ds-control-radius);cursor:default;user-select:none}.radio__placement.sc-ds-radio{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.radio__circle.sc-ds-radio{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--_radio-circle);height:var(--_radio-circle);border:0;border-radius:var(--dimension-radius-half);box-shadow:inset 0 0 0 var(--_radio-stroke) var(--color-foreground-tertiary);transition:background-color var(--effect-motion-short-2), box-shadow var(--effect-motion-short-2)}.radio__circle--checked.sc-ds-radio{background-color:var(--color-background-bold-brand);box-shadow:none}.radio__dot.sc-ds-radio{width:var(--_radio-dot);height:var(--_radio-dot);border-radius:var(--dimension-radius-half);background-color:var(--color-foreground-on-bold-background-primary)}.radio__label.sc-ds-radio{flex:1;min-width:0;padding:0 var(--ds-control-label-inset)}@media (forced-colors: active){.radio__circle.sc-ds-radio{border:var(--_radio-stroke) solid var(--ds-forced-color-content);box-shadow:none}.radio__circle--checked.sc-ds-radio{background-color:var(--ds-forced-color-selected);border-color:var(--ds-forced-color-selected)}.radio__dot.sc-ds-radio{background-color:var(--ds-forced-color-on-selected)}}`;const h=o(class o extends i{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=r(this,"dsChange");this.internals=this.attachInternals();this.options=[];this.value="";this.size="md";this.disabled=false;this.required=false;this.requiredMessage=t;this.direction="vertical";this.isInactive=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}syncFormValue(){const o=this.isInactive||this.disabled||this.formDisabled;c(this.internals,this.value,{inactive:o});const i=this.required&&!o&&this.value.length===0;a(this.internals,i,this.requiredMessage)}formDisabledCallback(o){this.formDisabled=o;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(o){this.value=l(o)}get activeItems(){return Array.from(this.el.querySelectorAll("[data-radio-item]:not([data-inactive])"))}handleKeyDown(o){const i=this.activeItems;if(!i.length)return;const r=i.find((o=>o===document.activeElement));if(!r)return;const s=i.indexOf(r);let e=-1;switch(o.key){case"ArrowDown":case"ArrowRight":o.preventDefault();e=(s+1)%i.length;break;case"ArrowUp":case"ArrowLeft":o.preventDefault();e=(s-1+i.length)%i.length;break;case"Home":o.preventDefault();e=0;break;case"End":o.preventDefault();e=i.length-1;break}if(e>=0){i[e].focus();const o=i[e].dataset["value"];if(o&&o!==this.value){this.value=o;this.dsChange.emit(o)}}}selectItem(o){if(this.isInactive||this.disabled||this.formDisabled)return;if(o!==this.value){this.value=o;this.dsChange.emit(o)}}render(){const o=this.isInactive||this.disabled||this.formDisabled;const i=this.required&&!o&&this.value.length===0;const r=this.options.findIndex((o=>o.value===this.value));const d=this.options.findIndex((i=>!o&&!i.isInactive));const n=r>=0&&!o&&!this.options[r]?.isInactive?r:d;return s(e,{key:"e272b29f653ccba1f919e275624bc2183ff02529",role:"radiogroup","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-required":this.required?"true":undefined,"aria-invalid":i?"true":undefined,class:{radio:true,"radio--horizontal":this.direction==="horizontal",[`radio--${this.size}`]:true}},this.options.map(((i,r)=>{const e=o||!!i.isInactive;const d=i.value===this.value;const t=e?-1:r===n?0:-1;return s("div",{key:i.value,role:"radio","aria-checked":String(d),"aria-disabled":e?"true":undefined,tabIndex:t,"data-radio-item":true,"data-value":i.value,"data-inactive":e||undefined,class:{radio__item:true,[`ds-control--${this.size}`]:true,"ds-control-inactive":e,"ds-focus-ring-inset":!e,"ds-interaction-fill":!e},onClick:()=>!e&&this.selectItem(i.value),onKeyDown:o=>{if((o.key===" "||o.key==="Enter")&&!e){o.preventDefault();this.selectItem(i.value)}}},s("span",{class:"radio__placement ds-interaction-fill__content","aria-hidden":"true"},s("span",{class:{radio__circle:true,"radio__circle--checked":d}},d&&s("span",{class:"radio__dot"}))),s("ds-text",{class:"radio__label ds-interaction-fill__content",as:"span",variant:f[this.size]},i.label))})))}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 v()}},[66,"ds-radio",{options:[16],value:[1025],size:[1],name:[513],form:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],direction:[1],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],formDisabled:[32]},[[0,"keydown","handleKeyDown"]],{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function u(){if(typeof customElements==="undefined"){return}const o=["ds-radio","ds-text"];o.forEach((o=>{switch(o){case"ds-radio":if(!customElements.get(d(o))){customElements.define(d(o),h)}break;case"ds-text":if(!customElements.get(d(o))){n()}break}}))}u();const g=h;const b=u;export{g as DsRadio,b as defineCustomElement};
2
2
  //# sourceMappingURL=ds-radio.js.map
package/dist/components/ds-scroll-overlay.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,H as l,c as s,h as r,a,t as d}from"./index.js";import{S as o}from"./p-CY19gMiz.js";const t=()=>`@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-scroll-overlay{--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-scroll-overlay{--ds-scroll-edge-fade-target-top:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--bottom.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-bottom:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--left.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-left:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--right.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-right:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--top-at-edge.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-top:0px}.scroll-edge-fade--bottom-at-edge.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-bottom:0px}.scroll-edge-fade--left-at-edge.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-left:0px}.scroll-edge-fade--right-at-edge.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-right:0px}@supports (animation-timeline: scroll()){.scroll-edge-fade--scroll-aware.sc-ds-scroll-overlay{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-scroll-overlay{animation:none}}}.scroll-edge-fade--at-end.sc-ds-scroll-overlay,.scroll-edge-fade--hidden.sc-ds-scroll-overlay{-webkit-mask-image:none;mask-image:none}.scroll-edge-fade--block-window.sc-ds-scroll-overlay{--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 c=()=>`.sc-ds-scroll-overlay-h{display:block;width:100%;height:100%;min-width:0;min-height:0;box-sizing:border-box}.scroll-overlay.sc-ds-scroll-overlay{position:relative;width:100%;height:100%;min-width:0;min-height:0}.scroll-overlay__viewport.sc-ds-scroll-overlay{width:100%;height:100%;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;box-sizing:border-box}.scroll-overlay__viewport.sc-ds-scroll-overlay:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.scroll-overlay__content.sc-ds-scroll-overlay{display:flex;flex-direction:column;min-height:100%;padding-block-end:var(--ds-scroll-overlay-block-size, 0);box-sizing:border-box}.scroll-overlay__body.sc-ds-scroll-overlay{display:grid;grid-template-columns:minmax(0, 1fr);flex:1 0 auto;min-height:0}.scroll-overlay__overlay.sc-ds-scroll-overlay{position:absolute;right:0;bottom:0;left:0;z-index:var(--dimension-z-index-floating)}`;const i=e(class e extends l{constructor(e){super();if(e!==false){this.__registerHost()}this.dsScroll=s(this,"dsScroll");this.handleScroll=()=>{if(!this.viewport)return;this.controller?.sync();this.dsScroll.emit({scrollTop:this.viewport.scrollTop,scrollHeight:this.viewport.scrollHeight,clientHeight:this.viewport.clientHeight})}}componentDidLoad(){if(!this.viewport||!this.content||!this.overlay)return;this.controller=new o({host:this.el,viewport:this.viewport,content:this.content,overlay:this.overlay});this.controller.connect()}disconnectedCallback(){this.controller?.disconnect()}async scrollToStart(){this.viewport?.scrollTo({top:0,behavior:"auto"});this.controller?.sync()}async scrollToEnd(){this.viewport?.scrollTo({top:this.viewport.scrollHeight,behavior:"auto"});this.controller?.sync()}async refreshOverlay(){this.controller?.sync()}render(){const e=Boolean(this.scrollLabel?.trim());return r(a,{key:"d1dd7ac9d936224dad3a36641f11331e5c2ad8de"},r("div",{key:"7e10114fe482909968991ad2dc110c19c61bb666",class:"scroll-overlay"},r("div",{key:"92587844d9df4490a49b6f3088e71d33561bd7f2",class:"scroll-overlay__viewport",ref:e=>{this.viewport=e},role:e?"region":undefined,"aria-label":e?this.scrollLabel:undefined,tabIndex:e?0:undefined,onScroll:this.handleScroll},r("div",{key:"33a4f16de2668ae1c2fcf7bfb619a0f62ac5b8b2",class:"scroll-overlay__content scroll-edge-fade--block-window",ref:e=>{this.content=e}},r("div",{key:"f5299778670b8edffcaaabf0dd0f6cddadcca1c6",class:"scroll-overlay__body"},r("slot",{key:"0f2ffdf0e9d0e020e6e6600e71a4db06e3b44ff4"})))),r("div",{key:"a6bc61649f4849027bb6a4b158af6dbb5c63926f",class:"scroll-overlay__overlay",ref:e=>{this.overlay=e}},r("slot",{key:"0e3c3050374a68d96796466fa59f60b506752d61",name:"overlay"}))))}get el(){return this}static get style(){return t()+c()}},[262,"ds-scroll-overlay",{scrollLabel:[1,"scroll-label"],scrollToStart:[64],scrollToEnd:[64],refreshOverlay:[64]}]);function n(){if(typeof customElements==="undefined"){return}const e=["ds-scroll-overlay"];e.forEach((e=>{switch(e){case"ds-scroll-overlay":if(!customElements.get(d(e))){customElements.define(d(e),i)}break}}))}n();const f=i;const g=n;export{f as DsScrollOverlay,g as defineCustomElement};
1
+ import{p as e,H as l,c as s,h as r,a as o,t as a}from"./index.js";import{S as d}from"./p-CY19gMiz.js";const t=()=>`@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-scroll-overlay{--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-scroll-overlay{--ds-scroll-edge-fade-target-top:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--bottom.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-bottom:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--left.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-left:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--right.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-right:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--top-at-edge.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-top:0px}.scroll-edge-fade--bottom-at-edge.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-bottom:0px}.scroll-edge-fade--left-at-edge.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-left:0px}.scroll-edge-fade--right-at-edge.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-right:0px}@supports (animation-timeline: scroll()){.scroll-edge-fade--scroll-aware.sc-ds-scroll-overlay{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-scroll-overlay{animation:none}}}.scroll-edge-fade--at-end.sc-ds-scroll-overlay,.scroll-edge-fade--hidden.sc-ds-scroll-overlay{-webkit-mask-image:none;mask-image:none}.scroll-edge-fade--block-window.sc-ds-scroll-overlay{--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 c=()=>`.sc-ds-scroll-overlay-h{display:block;width:100%;height:100%;min-width:0;min-height:0;box-sizing:border-box}.scroll-overlay.sc-ds-scroll-overlay{position:relative;width:100%;height:100%;min-width:0;min-height:0}.scroll-overlay__viewport.sc-ds-scroll-overlay{width:100%;height:100%;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;box-sizing:border-box}.scroll-overlay__viewport.sc-ds-scroll-overlay:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.scroll-overlay__content.sc-ds-scroll-overlay{display:flex;flex-direction:column;min-height:100%;padding-block-end:var(--ds-scroll-overlay-block-size, 0);box-sizing:border-box}.scroll-overlay__body.sc-ds-scroll-overlay{display:grid;grid-template-columns:minmax(0, 1fr);flex:1 0 auto;min-height:0}.scroll-overlay__overlay.sc-ds-scroll-overlay{position:absolute;right:0;bottom:0;left:0;z-index:var(--dimension-z-index-floating)}`;const i=e(class e extends l{constructor(e){super();if(e!==false){this.__registerHost()}this.dsScroll=s(this,"dsScroll");this.handleScroll=()=>{if(!this.viewport)return;this.controller?.sync();this.dsScroll.emit({scrollTop:this.viewport.scrollTop,scrollHeight:this.viewport.scrollHeight,clientHeight:this.viewport.clientHeight})}}componentDidLoad(){if(!this.viewport||!this.content||!this.overlay)return;this.controller=new d({host:this.el,viewport:this.viewport,content:this.content,overlay:this.overlay});this.controller.connect()}disconnectedCallback(){this.controller?.disconnect()}async scrollToStart(){this.viewport?.scrollTo({top:0,behavior:"auto"});this.controller?.sync()}async scrollToEnd(){this.viewport?.scrollTo({top:this.viewport.scrollHeight,behavior:"auto"});this.controller?.sync()}async refreshOverlay(){this.controller?.sync()}render(){const e=Boolean(this.scrollLabel?.trim());return r(o,{key:"5bc8ca046153364c1000c22ad1b095b9d2d893b1"},r("div",{key:"b71191b8c1f6624783df18ac85a5db1cccc2f132",class:"scroll-overlay"},r("div",{key:"83193583717135dbe97e6bd21303e7d3402f85a7",class:"scroll-overlay__viewport",ref:e=>{this.viewport=e},role:e?"region":undefined,"aria-label":e?this.scrollLabel:undefined,tabIndex:e?0:undefined,onScroll:this.handleScroll},r("div",{key:"179d10d175ecd15c61841f4aae85f863565c1a31",class:"scroll-overlay__content scroll-edge-fade--block-window",ref:e=>{this.content=e}},r("div",{key:"5472fe69a11e774e8cd54868fcc2257b89e9520c",class:"scroll-overlay__body"},r("slot",{key:"27eac9c242b868ffaa38b91040d4bd0e7c97b8e9"})))),r("div",{key:"b6e9bbd6db5b16143fcc6422d1c59409279df426",class:"scroll-overlay__overlay",ref:e=>{this.overlay=e}},r("slot",{key:"73811444ddc00c8052977af99b5fe75bf86675a6",name:"overlay"}))))}get el(){return this}static get style(){return t()+c()}},[262,"ds-scroll-overlay",{scrollLabel:[1,"scroll-label"],scrollToStart:[64],scrollToEnd:[64],refreshOverlay:[64]}]);function n(){if(typeof customElements==="undefined"){return}const e=["ds-scroll-overlay"];e.forEach((e=>{switch(e){case"ds-scroll-overlay":if(!customElements.get(a(e))){customElements.define(a(e),i)}break}}))}n();const g=i;const f=n;export{g as DsScrollOverlay,f as defineCustomElement};
2
2
  //# sourceMappingURL=ds-scroll-overlay.js.map
package/dist/components/ds-scroll-overlay.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["scrollEdgeFadeCss","scrollOverlayCss","ScrollOverlay","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","handleScroll","viewport","controller","sync","dsScroll","emit","scrollTop","scrollHeight","clientHeight","componentDidLoad","content","overlay","ScrollOverlayController","host","el","connect","disconnectedCallback","disconnect","scrollToStart","scrollTo","top","behavior","scrollToEnd","refreshOverlay","render","labelled","Boolean","scrollLabel","trim","h","Host","key","class","ref","element","role","undefined","tabIndex","onScroll","name"],"sources":["src/wc/utils/scroll-edge-fade.css?tag=ds-scroll-overlay&encapsulation=scoped","src/wc/components/ScrollOverlay/ScrollOverlay.css?tag=ds-scroll-overlay&encapsulation=scoped","src/wc/components/ScrollOverlay/ScrollOverlay.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-width: 0;\n min-height: 0;\n box-sizing: border-box;\n}\n\n.scroll-overlay {\n position: relative;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n}\n\n.scroll-overlay__viewport {\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n overflow: auto;\n overscroll-behavior: contain;\n box-sizing: border-box;\n}\n\n.scroll-overlay__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.scroll-overlay__content {\n display: flex;\n flex-direction: column;\n min-height: 100%;\n padding-block-end: var(--ds-scroll-overlay-block-size, 0);\n box-sizing: border-box;\n}\n\n.scroll-overlay__body {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n flex: 1 0 auto;\n min-height: 0;\n}\n\n.scroll-overlay__overlay {\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--dimension-z-index-floating);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { ScrollOverlayController } from '../../utils/scroll-overlay-controller';\n\nexport interface ScrollOverlayScrollDetail {\n scrollTop: number;\n scrollHeight: number;\n clientHeight: number;\n}\n\n@Component({\n tag: 'ds-scroll-overlay',\n styleUrl: 'ScrollOverlay.css',\n styleUrls: ['../../utils/scroll-edge-fade.css'],\n scoped: true,\n})\nexport class ScrollOverlay {\n @Element() el!: HTMLElement;\n\n /** Optional accessible name. When provided, the scrollport is a focusable region. */\n @Prop() scrollLabel: string | undefined;\n\n /** Reports scroll position without exposing the internal scrollport element. */\n @Event() dsScroll!: EventEmitter<ScrollOverlayScrollDetail>;\n\n private viewport?: HTMLElement;\n private content?: HTMLElement;\n private overlay?: HTMLElement;\n private controller?: ScrollOverlayController;\n\n componentDidLoad(): void {\n if (!this.viewport || !this.content || !this.overlay) return;\n this.controller = new ScrollOverlayController({\n host: this.el,\n viewport: this.viewport,\n content: this.content,\n overlay: this.overlay,\n });\n this.controller.connect();\n }\n\n disconnectedCallback(): void {\n this.controller?.disconnect();\n }\n\n /** Move the owned scrollport to its beginning. */\n @Method()\n async scrollToStart(): Promise<void> {\n this.viewport?.scrollTo({ top: 0, behavior: 'auto' });\n this.controller?.sync();\n }\n\n /** Move the owned scrollport to its live end. */\n @Method()\n async scrollToEnd(): Promise<void> {\n this.viewport?.scrollTo({ top: this.viewport.scrollHeight, behavior: 'auto' });\n this.controller?.sync();\n }\n\n /** Re-measure footer geometry after an imperative slotted-content update. */\n @Method()\n async refreshOverlay(): Promise<void> {\n this.controller?.sync();\n }\n\n private handleScroll = (): void => {\n if (!this.viewport) return;\n this.controller?.sync();\n this.dsScroll.emit({\n scrollTop: this.viewport.scrollTop,\n scrollHeight: this.viewport.scrollHeight,\n clientHeight: this.viewport.clientHeight,\n });\n };\n\n render() {\n const labelled = Boolean(this.scrollLabel?.trim());\n return (\n <Host>\n <div class=\"scroll-overlay\">\n <div\n class=\"scroll-overlay__viewport\"\n ref={element => {\n this.viewport = element;\n }}\n role={labelled ? 'region' : undefined}\n aria-label={labelled ? this.scrollLabel : undefined}\n tabIndex={labelled ? 0 : undefined}\n onScroll={this.handleScroll}\n >\n <div\n class=\"scroll-overlay__content scroll-edge-fade--block-window\"\n ref={element => {\n this.content = element;\n }}\n >\n <div class=\"scroll-overlay__body\">\n <slot />\n </div>\n </div>\n </div>\n <div\n class=\"scroll-overlay__overlay\"\n ref={element => {\n this.overlay = element;\n }}\n >\n <slot name=\"overlay\" />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"iGAAA,MAAMA,EAAoB,IAAM,2/ICAhC,MAAMC,EAAmB,IAAM,u+B,MCelBC,EAAaC,EAAA,MAAAD,UAAAE,EAN1B,WAAAC,CAAAC,G,6EAuDUC,KAAAC,aAAe,KACrB,IAAKD,KAAKE,SAAU,OACpBF,KAAKG,YAAYC,OACjBJ,KAAKK,SAASC,KAAK,CACjBC,UAAWP,KAAKE,SAASK,UACzBC,aAAcR,KAAKE,SAASM,aAC5BC,aAAcT,KAAKE,SAASO,cAC5B,CAyCL,CAnFC,gBAAAC,GACE,IAAKV,KAAKE,WAAaF,KAAKW,UAAYX,KAAKY,QAAS,OACtDZ,KAAKG,WAAa,IAAIU,EAAwB,CAC5CC,KAAMd,KAAKe,GACXb,SAAUF,KAAKE,SACfS,QAASX,KAAKW,QACdC,QAASZ,KAAKY,UAEhBZ,KAAKG,WAAWa,S,CAGlB,oBAAAC,GACEjB,KAAKG,YAAYe,Y,CAKnB,mBAAMC,GACJnB,KAAKE,UAAUkB,SAAS,CAAEC,IAAK,EAAGC,SAAU,SAC5CtB,KAAKG,YAAYC,M,CAKnB,iBAAMmB,GACJvB,KAAKE,UAAUkB,SAAS,CAAEC,IAAKrB,KAAKE,SAASM,aAAcc,SAAU,SACrEtB,KAAKG,YAAYC,M,CAKnB,oBAAMoB,GACJxB,KAAKG,YAAYC,M,CAanB,MAAAqB,GACE,MAAMC,EAAWC,QAAQ3B,KAAK4B,aAAaC,QAC3C,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACTH,EAAA,OAAAE,IAAA,2CACEC,MAAM,2BACNC,IAAKC,IACHnC,KAAKE,SAAWiC,CAAO,EAEzBC,KAAMV,EAAW,SAAWW,UAAS,aACzBX,EAAW1B,KAAK4B,YAAcS,UAC1CC,SAAUZ,EAAW,EAAIW,UACzBE,SAAUvC,KAAKC,cAEf6B,EAAA,OAAAE,IAAA,2CACEC,MAAM,yDACNC,IAAKC,IACHnC,KAAKW,QAAUwB,CAAO,GAGxBL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,wBACTH,EAAA,QAAAE,IAAA,gDAINF,EAAA,OAAAE,IAAA,2CACEC,MAAM,0BACNC,IAAKC,IACHnC,KAAKY,QAAUuB,CAAO,GAGxBL,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,c","ignoreList":[]}
1
+ {"version":3,"names":["scrollEdgeFadeCss","scrollOverlayCss","ScrollOverlay","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","handleScroll","viewport","controller","sync","dsScroll","emit","scrollTop","scrollHeight","clientHeight","componentDidLoad","content","overlay","ScrollOverlayController","host","el","connect","disconnectedCallback","disconnect","scrollToStart","scrollTo","top","behavior","scrollToEnd","refreshOverlay","render","labelled","Boolean","scrollLabel","trim","h","Host","key","class","ref","element","role","undefined","tabIndex","onScroll","name"],"sources":["src/wc/utils/scroll-edge-fade.css?tag=ds-scroll-overlay&encapsulation=scoped","src/wc/components/ScrollOverlay/ScrollOverlay.css?tag=ds-scroll-overlay&encapsulation=scoped","src/wc/components/ScrollOverlay/ScrollOverlay.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-width: 0;\n min-height: 0;\n box-sizing: border-box;\n}\n\n.scroll-overlay {\n position: relative;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n}\n\n.scroll-overlay__viewport {\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n overflow: auto;\n overscroll-behavior: contain;\n box-sizing: border-box;\n}\n\n.scroll-overlay__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.scroll-overlay__content {\n display: flex;\n flex-direction: column;\n min-height: 100%;\n padding-block-end: var(--ds-scroll-overlay-block-size, 0);\n box-sizing: border-box;\n}\n\n.scroll-overlay__body {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n flex: 1 0 auto;\n min-height: 0;\n}\n\n.scroll-overlay__overlay {\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--dimension-z-index-floating);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { ScrollOverlayController } from '../../utils/scroll-overlay-controller';\n\nexport interface ScrollOverlayScrollDetail {\n scrollTop: number;\n scrollHeight: number;\n clientHeight: number;\n}\n\n@Component({\n tag: 'ds-scroll-overlay',\n styleUrl: 'ScrollOverlay.css',\n styleUrls: ['../../utils/scroll-edge-fade.css'],\n scoped: true,\n})\nexport class ScrollOverlay {\n @Element() el!: HTMLElement;\n\n /** Optional accessible name. When provided, the scrollport is a focusable region. */\n @Prop() scrollLabel: string | undefined;\n\n /** Reports scroll position without exposing the internal scrollport element. */\n @Event() dsScroll!: EventEmitter<ScrollOverlayScrollDetail>;\n\n private viewport?: HTMLElement;\n private content?: HTMLElement;\n private overlay?: HTMLElement;\n private controller?: ScrollOverlayController;\n\n componentDidLoad(): void {\n if (!this.viewport || !this.content || !this.overlay) return;\n this.controller = new ScrollOverlayController({\n host: this.el,\n viewport: this.viewport,\n content: this.content,\n overlay: this.overlay,\n });\n this.controller.connect();\n }\n\n disconnectedCallback(): void {\n this.controller?.disconnect();\n }\n\n /** Move the owned scrollport to its beginning. */\n @Method()\n async scrollToStart(): Promise<void> {\n this.viewport?.scrollTo({ top: 0, behavior: 'auto' });\n this.controller?.sync();\n }\n\n /** Move the owned scrollport to its live end. */\n @Method()\n async scrollToEnd(): Promise<void> {\n this.viewport?.scrollTo({ top: this.viewport.scrollHeight, behavior: 'auto' });\n this.controller?.sync();\n }\n\n /** Re-measure footer geometry after an imperative slotted-content update. */\n @Method()\n async refreshOverlay(): Promise<void> {\n this.controller?.sync();\n }\n\n private handleScroll = (): void => {\n if (!this.viewport) return;\n this.controller?.sync();\n this.dsScroll.emit({\n scrollTop: this.viewport.scrollTop,\n scrollHeight: this.viewport.scrollHeight,\n clientHeight: this.viewport.clientHeight,\n });\n };\n\n render() {\n const labelled = Boolean(this.scrollLabel?.trim());\n return (\n <Host>\n <div class=\"scroll-overlay\">\n <div\n class=\"scroll-overlay__viewport\"\n ref={element => {\n this.viewport = element;\n }}\n role={labelled ? 'region' : undefined}\n aria-label={labelled ? this.scrollLabel : undefined}\n tabIndex={labelled ? 0 : undefined}\n onScroll={this.handleScroll}\n >\n <div\n class=\"scroll-overlay__content scroll-edge-fade--block-window\"\n ref={element => {\n this.content = element;\n }}\n >\n <div class=\"scroll-overlay__body\">\n <slot />\n </div>\n </div>\n </div>\n <div\n class=\"scroll-overlay__overlay\"\n ref={element => {\n this.overlay = element;\n }}\n >\n <slot name=\"overlay\" />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"sGAAA,MAAMA,EAAoB,IAAM,2/ICAhC,MAAMC,EAAmB,IAAM,u+B,MCelBC,EAAaC,EAAA,MAAAD,UAAAE,EAN1B,WAAAC,CAAAC,G,6EAuDUC,KAAAC,aAAe,KACrB,IAAKD,KAAKE,SAAU,OACpBF,KAAKG,YAAYC,OACjBJ,KAAKK,SAASC,KAAK,CACjBC,UAAWP,KAAKE,SAASK,UACzBC,aAAcR,KAAKE,SAASM,aAC5BC,aAAcT,KAAKE,SAASO,cAC5B,CAyCL,CAnFC,gBAAAC,GACE,IAAKV,KAAKE,WAAaF,KAAKW,UAAYX,KAAKY,QAAS,OACtDZ,KAAKG,WAAa,IAAIU,EAAwB,CAC5CC,KAAMd,KAAKe,GACXb,SAAUF,KAAKE,SACfS,QAASX,KAAKW,QACdC,QAASZ,KAAKY,UAEhBZ,KAAKG,WAAWa,S,CAGlB,oBAAAC,GACEjB,KAAKG,YAAYe,Y,CAKnB,mBAAMC,GACJnB,KAAKE,UAAUkB,SAAS,CAAEC,IAAK,EAAGC,SAAU,SAC5CtB,KAAKG,YAAYC,M,CAKnB,iBAAMmB,GACJvB,KAAKE,UAAUkB,SAAS,CAAEC,IAAKrB,KAAKE,SAASM,aAAcc,SAAU,SACrEtB,KAAKG,YAAYC,M,CAKnB,oBAAMoB,GACJxB,KAAKG,YAAYC,M,CAanB,MAAAqB,GACE,MAAMC,EAAWC,QAAQ3B,KAAK4B,aAAaC,QAC3C,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACTH,EAAA,OAAAE,IAAA,2CACEC,MAAM,2BACNC,IAAKC,IACHnC,KAAKE,SAAWiC,CAAO,EAEzBC,KAAMV,EAAW,SAAWW,UAAS,aACzBX,EAAW1B,KAAK4B,YAAcS,UAC1CC,SAAUZ,EAAW,EAAIW,UACzBE,SAAUvC,KAAKC,cAEf6B,EAAA,OAAAE,IAAA,2CACEC,MAAM,yDACNC,IAAKC,IACHnC,KAAKW,QAAUwB,CAAO,GAGxBL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,wBACTH,EAAA,QAAAE,IAAA,gDAINF,EAAA,OAAAE,IAAA,2CACEC,MAAM,0BACNC,IAAKC,IACHnC,KAAKY,QAAUuB,CAAO,GAGxBL,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,c","ignoreList":[]}