@ds-mo/ui 13.12.0 → 13.13.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 (124) hide show
  1. package/dist/.package-ready.json +1 -1
  2. package/dist/agent-patterns.json +1 -1
  3. package/dist/agent.json +22 -3
  4. package/dist/angular/ds-button-filled.d.ts +1 -1
  5. package/dist/angular/ds-button-filled.js +3 -3
  6. package/dist/angular/ds-button-unfilled.d.ts +1 -1
  7. package/dist/angular/ds-button-unfilled.js +3 -3
  8. package/dist/angular/ds-table.d.ts +4 -1
  9. package/dist/angular/ds-table.js +5 -2
  10. package/dist/components/ds-agent-response.js +1 -1
  11. package/dist/components/ds-banner.js +1 -1
  12. package/dist/components/ds-bar-nav.js +1 -1
  13. package/dist/components/ds-bar-title.js +1 -1
  14. package/dist/components/ds-bar-workflow.js +1 -1
  15. package/dist/components/ds-button-filled.js +1 -1
  16. package/dist/components/ds-button-unfilled.js +1 -1
  17. package/dist/components/ds-card-chart.js +1 -1
  18. package/dist/components/ds-card-overview.js +1 -1
  19. package/dist/components/ds-card-overview.js.map +1 -1
  20. package/dist/components/ds-card-setting.js +1 -1
  21. package/dist/components/ds-chart-legend.js +1 -1
  22. package/dist/components/ds-chart-legend.js.map +1 -1
  23. package/dist/components/ds-checkbox.js +1 -1
  24. package/dist/components/ds-chip.js +1 -1
  25. package/dist/components/ds-chip.js.map +1 -1
  26. package/dist/components/ds-code-block.js +1 -1
  27. package/dist/components/ds-conversation-list-item.js +1 -1
  28. package/dist/components/ds-conversation-list-item.js.map +1 -1
  29. package/dist/components/ds-input.js +1 -1
  30. package/dist/components/ds-input.js.map +1 -1
  31. package/dist/components/ds-markdown.js +1 -1
  32. package/dist/components/ds-menu.js +1 -1
  33. package/dist/components/ds-message-actions.js +1 -1
  34. package/dist/components/ds-message-composer.js +1 -1
  35. package/dist/components/ds-message-scroller.js +1 -1
  36. package/dist/components/ds-mobile-bar-nav.js +1 -1
  37. package/dist/components/ds-mobile-header.js +1 -1
  38. package/dist/components/ds-mobile-section-switcher.js +1 -1
  39. package/dist/components/ds-mobile-sheet-nav.js +1 -1
  40. package/dist/components/ds-modal.js +1 -1
  41. package/dist/components/ds-panel-nav.js +1 -1
  42. package/dist/components/ds-panel-sub-nav.js +1 -1
  43. package/dist/components/ds-panel-sub-nav.js.map +1 -1
  44. package/dist/components/ds-panel-tool-header.js +1 -1
  45. package/dist/components/ds-panel-tool-search.js +1 -1
  46. package/dist/components/ds-panel-tools.js +1 -1
  47. package/dist/components/ds-radio.js +1 -1
  48. package/dist/components/ds-radio.js.map +1 -1
  49. package/dist/components/ds-select.js +1 -1
  50. package/dist/components/ds-select.js.map +1 -1
  51. package/dist/components/ds-shell-app.js +1 -1
  52. package/dist/components/ds-shell-tools.js +1 -1
  53. package/dist/components/ds-tab-group.js +1 -1
  54. package/dist/components/ds-table.js +1 -1
  55. package/dist/components/ds-table.js.map +1 -1
  56. package/dist/components/ds-tag.js +1 -1
  57. package/dist/components/ds-toast.js +1 -1
  58. package/dist/components/ds-typing-indicator.js +1 -1
  59. package/dist/components/p-B1JB0Zn-.js +2 -0
  60. package/dist/components/{p-BYre-ZDg.js.map → p-B1JB0Zn-.js.map} +1 -1
  61. package/dist/components/p-B2t8alvH.js +2 -0
  62. package/dist/components/{p-DK4PGrHm.js.map → p-B2t8alvH.js.map} +1 -1
  63. package/dist/components/{p-DxygUurH.js → p-BAGTb6cZ.js} +2 -2
  64. package/dist/components/p-BEEYhbIb.js +2 -0
  65. package/dist/components/{p-CFNG0K3m.js.map → p-BEEYhbIb.js.map} +1 -1
  66. package/dist/components/{p-BRajO-Za.js → p-BFMV9TJO.js} +2 -2
  67. package/dist/components/p-BNHPCCw8.js +2 -0
  68. package/dist/components/{p-x9jO4lZ7.js.map → p-BNHPCCw8.js.map} +1 -1
  69. package/dist/components/{p-DKftz0O8.js → p-BUZLhvs1.js} +2 -2
  70. package/dist/components/p-BgaF83uh.js +2 -0
  71. package/dist/components/{p-C5gZHZHU.js.map → p-BgaF83uh.js.map} +1 -1
  72. package/dist/components/p-Br0fwWUG.js +2 -0
  73. package/dist/components/{p-BFXN4ioL.js.map → p-Br0fwWUG.js.map} +1 -1
  74. package/dist/components/{p-DcmqsAMP.js → p-BydCwx7x.js} +2 -2
  75. package/dist/components/p-C3Z01Glr.js +2 -0
  76. package/dist/components/p-C3Z01Glr.js.map +1 -0
  77. package/dist/components/{p-BX57q1Lo.js → p-CSlTJWFG.js} +2 -2
  78. package/dist/components/p-Cw1bbiCG.js +2 -0
  79. package/dist/components/{p-B_eqa09C.js.map → p-Cw1bbiCG.js.map} +1 -1
  80. package/dist/components/p-CzV4gIxd.js +2 -0
  81. package/dist/components/{p-BxJurXEn.js.map → p-CzV4gIxd.js.map} +1 -1
  82. package/dist/components/p-D-F8eyXy.js +2 -0
  83. package/dist/components/p-D-F8eyXy.js.map +1 -0
  84. package/dist/components/p-DGvzGGcu.js +2 -0
  85. package/dist/components/{p-CIlO_j3q.js.map → p-DGvzGGcu.js.map} +1 -1
  86. package/dist/components/{p-DkhE3BsH.js → p-bLCbOPYa.js} +2 -2
  87. package/dist/components/p-cPh32CFB.js +2 -0
  88. package/dist/components/{p-Bj7KrXzw.js.map → p-cPh32CFB.js.map} +1 -1
  89. package/dist/docs/components.json +87 -3
  90. package/dist/lib/components/ButtonFilled/ButtonFilled.d.ts +2 -0
  91. package/dist/mcp-data/registry/button-filled.json +20 -1
  92. package/dist/mcp-data/registry/button-unfilled.json +20 -1
  93. package/dist/mcp-data/registry/registry.json +21 -2
  94. package/dist/mcp-data/registry/table.json +24 -5
  95. package/dist/react/ds-table.d.ts +2 -1
  96. package/dist/react/ds-table.js +2 -1
  97. package/dist/styles/table.css +258 -61
  98. package/dist/types/components/ButtonFilled/ButtonFilled.d.ts +2 -0
  99. package/dist/types/components/ButtonUnfilled/ButtonUnfilled.d.ts +2 -0
  100. package/dist/types/components/Table/Table.d.ts +12 -1
  101. package/dist/types/components/Table/index.d.ts +1 -1
  102. package/dist/types/components/Table/table-types.d.ts +11 -0
  103. package/dist/types/components.d.ts +26 -2
  104. package/package.json +1 -1
  105. package/dist/components/p-BFXN4ioL.js +0 -2
  106. package/dist/components/p-BYre-ZDg.js +0 -2
  107. package/dist/components/p-B_eqa09C.js +0 -2
  108. package/dist/components/p-Bj7KrXzw.js +0 -2
  109. package/dist/components/p-BxJurXEn.js +0 -2
  110. package/dist/components/p-C5gZHZHU.js +0 -2
  111. package/dist/components/p-CFNG0K3m.js +0 -2
  112. package/dist/components/p-CIlO_j3q.js +0 -2
  113. package/dist/components/p-DAbaMtEX.js +0 -2
  114. package/dist/components/p-DAbaMtEX.js.map +0 -1
  115. package/dist/components/p-DK4PGrHm.js +0 -2
  116. package/dist/components/p-c1pY-Mqq.js +0 -2
  117. package/dist/components/p-c1pY-Mqq.js.map +0 -1
  118. package/dist/components/p-x9jO4lZ7.js +0 -2
  119. /package/dist/components/{p-DxygUurH.js.map → p-BAGTb6cZ.js.map} +0 -0
  120. /package/dist/components/{p-BRajO-Za.js.map → p-BFMV9TJO.js.map} +0 -0
  121. /package/dist/components/{p-DKftz0O8.js.map → p-BUZLhvs1.js.map} +0 -0
  122. /package/dist/components/{p-DcmqsAMP.js.map → p-BydCwx7x.js.map} +0 -0
  123. /package/dist/components/{p-BX57q1Lo.js.map → p-CSlTJWFG.js.map} +0 -0
  124. /package/dist/components/{p-DkhE3BsH.js.map → p-bLCbOPYa.js.map} +0 -0
@@ -0,0 +1,2 @@
1
+ import{p as e,H as i,c as s,h as n,a as o,t}from"./index.js";import{A as r}from"./p-BBxcMVqk.js";import{d as c}from"./p-DwKC_9u2.js";import{d}from"./p-DLwM1RNL.js";import{d as a}from"./p-Ch5yT3UA.js";import{d as l}from"./p-BNiIyZCn.js";import{b as h,a as u,T as m}from"./p-CXduurfd.js";import{c as f,r as v}from"./p-DhKvqh5G.js";import{r as p}from"./p-BJMRBHKW.js";import{a as g,C as b}from"./p-CuwopElg.js";function x(e){return"variant"in e&&e.variant==="swatch-picker"}function w(e){return x(e)}function y(e){return e.map((e=>{if(x(e)){return{...e,...e.options?{options:e.options.map((e=>({...e})))}:{},...e.sections?{sections:e.sections.map((e=>({...e,options:e.options.map((e=>({...e})))})))}:{}}}return{...e,items:e.items.map((e=>({...e})))}}))}const k=()=>`@media (forced-colors: active){.sc-ds-menu:root,.sc-ds-menu-h,.ds-forced-colors-scope.sc-ds-menu{--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-menu-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-menu-h,.ds-focus-ring.sc-ds-menu,.ds-focus-ring-inset.sc-ds-menu-h,.ds-focus-ring-inset.sc-ds-menu{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-menu-h:focus-visible,.ds-focus-ring.sc-ds-menu:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-menu-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-menu{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-menu-h:focus-visible,.ds-focus-ring-inset.sc-ds-menu:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-menu-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-menu:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-menu-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-menu:root,.sc-ds-menu-h,.ds-forced-colors-scope.sc-ds-menu{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}@media (forced-colors: active){.sc-ds-menu:root,.sc-ds-menu-h,.ds-forced-colors-scope.sc-ds-menu{--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-menu-h,.ds-interaction-fill.sc-ds-menu{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-menu-h::before,.ds-interaction-fill.sc-ds-menu::before,.ds-interaction-fill.sc-ds-menu-h::after,.ds-interaction-fill.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-menu-h::before,.ds-interaction-fill.sc-ds-menu::before{z-index:1}.ds-interaction-fill.sc-ds-menu-h::after,.ds-interaction-fill.sc-ds-menu::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color), inset var(--ds-interaction-divider-inline-start-width) 0 0 var(--ds-interaction-divider-inline-start-color), inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0 var(--ds-interaction-divider-inline-end-color), inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-menu-h,.ds-interaction-fill--bordered.sc-ds-menu{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-menu-h::before,.ds-interaction-fill--selected.sc-ds-menu::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-menu-h,.ds-interaction-fill--selected.sc-ds-menu{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-menu-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-menu:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-menu-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-menu:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-menu-h::after,.ds-interaction-fill--grouped.sc-ds-menu::after,.ds-interaction-fill--grouped.sc-ds-menu-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-menu:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-menu-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-menu:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}.ds-interaction-fill--grouped.sc-ds-menu-h,.ds-interaction-fill--grouped.sc-ds-menu{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var( --ds-interaction-group-divider-inline-start-width, 0px );--ds-interaction-divider-inline-start-color:var( --ds-interaction-group-divider-inline-start-color, transparent );--ds-interaction-divider-inline-end-width:var( --ds-interaction-group-divider-inline-end-width, 0px );--ds-interaction-divider-inline-end-color:var( --ds-interaction-group-divider-inline-end-color, transparent )}.ds-interaction-fill.sc-ds-menu-h>.ds-interaction-fill__content.sc-ds-menu,.ds-interaction-fill.sc-ds-menu>.ds-interaction-fill__content.sc-ds-menu,.ds-interaction-fill__content.sc-ds-menu{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-menu-h,.ds-interaction-fill--on-faint.sc-ds-menu{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-menu-h,.ds-interaction-fill--on-medium.sc-ds-menu{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-menu-h,.ds-interaction-fill--on-bold.sc-ds-menu{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-menu-h,.ds-interaction-fill--on-strong.sc-ds-menu{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-menu-h,.ds-interaction-fill--on-translucent.sc-ds-menu{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-menu-h,.ds-interaction-fill--on-inverted.sc-ds-menu{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-menu-h,.ds-interaction-fill--on-media.sc-ds-menu{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-menu-h,.ds-interaction-fill--on-always-dark.sc-ds-menu{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-menu-h,.ds-interaction-fill--on-navigation.sc-ds-menu{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-menu-h::after,.ds-interaction-fill.sc-ds-menu::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-menu-h::before,.ds-interaction-fill--selected.sc-ds-menu::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-menu-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-menu: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-menu:root,.sc-ds-menu-h,.ds-forced-colors-scope.sc-ds-menu{--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-menu-h,.ds-control-inactive.sc-ds-menu{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-menu-h,.ds-control-inactive.sc-ds-menu{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-menu,.ds-control--lg.sc-ds-menu-h,.ds-control--md.sc-ds-menu-h,.ds-control--md.sc-ds-menu,.ds-control--sm.sc-ds-menu-h,.ds-control--sm.sc-ds-menu,.ds-control--xs.sc-ds-menu-h,.ds-control--xs.sc-ds-menu{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-menu-h,.ds-control--lg.sc-ds-menu{--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-menu-h,.ds-control--md.sc-ds-menu{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-menu-h,.ds-control--sm.sc-ds-menu{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-menu-h,.ds-control--xs.sc-ds-menu{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-space--sm.sc-ds-menu-h,.ds-chrome-space--sm.sc-ds-menu{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-menu-h,.ds-chrome-space--md.sc-ds-menu{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-menu-h,.ds-chrome-space--lg.sc-ds-menu{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-menu-h,.ds-chrome-row.sc-ds-menu,.ds-chrome-column.sc-ds-menu-h,.ds-chrome-column.sc-ds-menu,.ds-chrome-grid.sc-ds-menu-h,.ds-chrome-grid.sc-ds-menu{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-menu-h,.ds-chrome-row.sc-ds-menu{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-menu-h,.ds-chrome-column.sc-ds-menu{flex-direction:column}.ds-chrome-grid.sc-ds-menu-h,.ds-chrome-grid.sc-ds-menu{display:grid;align-items:center}.ds-control-frame.sc-ds-menu{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-icon-box.sc-ds-menu{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-menu{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-empty-region.sc-ds-menu{display:flex;flex:1 1 auto;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;min-height:0}.ds-empty-region--padded.sc-ds-menu{padding:var(--dimension-space-200)}.ds-choice-popup.sc-ds-menu{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--dimension-menu-width-xs);max-width:min( var(--dimension-panel-width-lg), calc(100vw - var(--dimension-space-200)) );max-height:calc(100vh - var(--dimension-space-200));overflow:hidden;inset:auto;margin:0;padding:0;border:0;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-shadow-elevated-floating);animation:dsChoiceFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform;text-align:start}.ds-choice-popup.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.ds-choice-popup--closing.sc-ds-menu{animation:dsChoiceFadeOut var(--effect-motion-short-2) forwards}@keyframes dsChoiceFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes dsChoiceFadeOut{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.ds-choice-popup.sc-ds-menu{animation:none;opacity:1}.ds-choice-popup--closing.sc-ds-menu{opacity:0}}.ds-choice-list.sc-ds-menu{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain}.ds-choice-section--divided.sc-ds-menu{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}ds-text.ds-choice-section__header.sc-ds-menu{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 calc( var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) );text-align:start;-webkit-user-select:none;user-select:none}.ds-choice-item.sc-ds-menu{width:100%;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent;cursor:default;-webkit-user-select:none;user-select:none;text-align:left;color:inherit}.ds-choice-item.sc-ds-menu:has(.ds-choice-item__subtext){height:auto;min-height:var(--ds-control-height, var(--dimension-size-400));padding-block:var(--ds-control-padding-inline, var(--dimension-space-075));align-items:flex-start}.ds-choice-item__content.sc-ds-menu{display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}ds-text.ds-choice-item__label.sc-ds-menu{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ds-text.ds-choice-item__subtext.sc-ds-menu{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ds-choice-item__icon.sc-ds-menu,.ds-choice-item__suffix.sc-ds-menu{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));pointer-events:none}.ds-choice-empty.sc-ds-menu,.ds-choice-loading.sc-ds-menu{min-height:var(--dimension-size-600);padding:var(--dimension-space-100)}.ds-choice-footer.sc-ds-menu{position:relative;box-sizing:border-box;padding-block:var(--dimension-space-050)}.ds-choice-footer.sc-ds-menu::before{content:'';position:absolute;inset:0 0 auto;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.ds-choice-footer__content.sc-ds-menu{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400))}.ds-choice-footer__summary.sc-ds-menu,.ds-choice-footer__clear.sc-ds-menu ds-text.sc-ds-menu{padding-inline:calc( var(--dimension-space-050) + var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) )}.ds-choice-footer__clear.sc-ds-menu{appearance:none;display:inline-flex;align-items:center;padding:0;border:0;border-radius:var(--dimension-radius-025);background:transparent;color:var(--color-foreground-bold-brand);cursor:default}.ds-choice-footer__clear.sc-ds-menu:hover{text-decoration:underline;text-decoration-color:var(--color-foreground-tertiary)}@media (forced-colors: active){.ds-choice-popup.sc-ds-menu{outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.ds-choice-popup.sc-ds-menu::after{box-shadow:none}.ds-choice-section--divided.sc-ds-menu{border-bottom-color:var(--ds-forced-color-content)}.ds-choice-footer.sc-ds-menu::before{background-color:var(--ds-forced-color-content)}}.menu-item--destructive.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-bold-negative) !important}.menu-item__dot-box.sc-ds-menu{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));pointer-events:none}.menu-item__switch.sc-ds-menu{flex-shrink:0}`;const _=["a[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(",");const C=e(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=s(this,"dsClose");this.dsAfterClose=s(this,"dsAfterClose");this.dsSelect=s(this,"dsSelect");this.dsSwatchSelect=s(this,"dsSwatchSelect");this.open=false;this.items=[];this.size="md";this.selectionMode="none";this.sections=[];this.side="bottom";this.align="start";this.anchorAlignment="choice-cell";this.sideOffset=h.space050;this.alignOffset=0;this.initialFocusVisible=false;this.menuLabel="Menu";this.shouldRender=false;this.closing=false;this.pos={x:0,y:0};this.focusedIndex=0;this.positionReady=false;this.focusRingVisible=false;this.clickOutsideHandler=null;this.closeTimer=null;this.position=new r({getAnchor:()=>this.resolvedAnchor??null,getPopup:()=>this.el.querySelector(".menu-popup"),measure:(e,i)=>{if(!this.open)return null;const s=e.getBoundingClientRect();const n=this.viewportPadPx;if(!this.minWidth){if(this.anchorAlignment==="choice-cell"&&(this.side==="top"||this.side==="bottom")){i.style.minWidth=`max(var(--dimension-menu-width-xs), ${f(s.width,n)}px)`}else{i.style.removeProperty("min-width")}}return{anchorRect:s,popupWidth:i.offsetWidth||this.popupFallbackWidthPx,popupHeight:i.offsetHeight||this.popupFallbackHeightPx,side:this.side,align:this.align,sideOffsetPx:this.sideOffsetPx,alignOffsetPx:v({align:this.align,alignOffsetPx:this.alignOffsetPx,sectionInsetPx:n,anchorAlignment:this.anchorAlignment}),viewportPadPx:this.viewportPadPx,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight}},apply:({x:e,y:i})=>{this.pos={x:e,y:i}},onReady:()=>{this.positionReady=true},liveUpdate:"double-frame",topLayer:true});this.lastRenderedSections=[];this.closingSections=null}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.cancelPositionRetry();this.cancelLivePositionUpdate();this.teardownListeners()}onOpenChange(e){if(e){this.teardownListeners();this.closingSections=null;this.shouldRender=true;this.closing=false;this.positionReady=false;this.focusRingVisible=this.initialFocusVisible;this.setupListeners();this.schedulePositionUpdate((()=>{this.focusInitialItem()}))}else if(this.shouldRender){this.cancelPositionRetry();this.captureClosingSections();this.closing=true;this.teardownListeners();const e=this.closeAnimationMs;if(e<=0){this.finishClose();return}this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.finishClose()}),e)}}onAnchorChange(){if(this.open)this.schedulePositionUpdate()}onPositionPropsChange(){if(this.open)this.schedulePositionUpdate()}get viewportPadPx(){return p(m.space050,m.space050)}get sideOffsetPx(){return p(this.sideOffset,m.space050)}get alignOffsetPx(){return p(this.alignOffset,0)}get popupFallbackWidthPx(){return p(m.menuWidthXs,m.menuWidthXs)}get popupFallbackHeightPx(){return p(m.menuFallbackHeight,m.menuFallbackHeight)}get closeAnimationMs(){return u(m.motionShort2,m.animationDurationShort3)}finishClose(){const e=this.el.querySelector(".menu-popup");if(e?.matches(":popover-open"))e.hidePopover();this.shouldRender=false;this.closing=false;this.lastRenderedSections=[];this.closingSections=null;this.dsAfterClose.emit()}captureClosingSections(){if(this.closingSections)return;const e=this.lastRenderedSections.length?this.lastRenderedSections:this.activeSections;this.closingSections=y(e)}get resolvedAnchor(){if(this.anchor)return this.anchor;if(this.anchorId)return document.getElementById(this.anchorId);return null}get anchorFocusTarget(){const e=this.resolvedAnchor;if(!e)return null;if(e.matches(_))return e;return e.querySelector(_)??e}focusAnchor(){const e=this.resolvedAnchor;if(e?.setFocus){e.setFocus();return}this.anchorFocusTarget?.focus()}moveFocusAfterTab(e){const i=this.anchorFocusTarget;if(!i)return;if(e){i.focus();return}const s=Array.from(document.querySelectorAll(_)).filter((e=>!e.closest(".menu-popup")&&!e.closest("[inert]")&&e.getClientRects().length>0));const n=s.indexOf(i);(s[n+1]??i).focus()}compositeTabLeavesPopup(e){const i=this.el.querySelector(".menu-popup");if(!i)return true;const s=Array.from(i.querySelectorAll(_)).filter((e=>e.getClientRects().length>0));const n=s.indexOf(e.target);if(n<0)return true;return e.shiftKey?n===0:n===s.length-1}get activeSections(){if(this.sections.length>0)return this.sections;if(this.items.length>0)return[{items:this.items}];return[]}get flatItems(){return this.activeSections.flatMap((e=>w(e)?[]:e.items))}get hasCompositeSections(){return this.activeSections.some(w)}cancelPositionRetry(){this.position.cancel()}cancelLivePositionUpdate(){this.position.cancel()}scheduleLivePositionUpdate(){this.position.scheduleLiveUpdate()}schedulePositionUpdate(e){if(!this.open)return;this.positionReady=false;this.position.schedule(e)}calculatePosition(){return this.position.update()}focusInitialItem(){if(this.hasCompositeSections){requestAnimationFrame((()=>{this.el.querySelector('.menu-popup [tabindex="0"]')?.focus()}));return}const e=this.flatItems;const i=e.findIndex((e=>e.isSelected&&!e.isInactive));const s=e.findIndex((e=>!e.isInactive));this.focusedIndex=i>=0?i:s>=0?s:0;requestAnimationFrame((()=>{const e=this.el.querySelectorAll(".menu-item");e[this.focusedIndex]?.focus()}))}setupListeners(){this.clickOutsideHandler=e=>{const i=e.target;const s=this.el.querySelector(".menu-popup");const n=this.resolvedAnchor;if(s?.contains(i)||n?.contains(i))return;this.close()};document.addEventListener("mousedown",this.clickOutsideHandler,true);this.position.observe()}teardownListeners(){this.position.unobserve();if(this.clickOutsideHandler){document.removeEventListener("mousedown",this.clickOutsideHandler,true);this.clickOutsideHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(e=true){this.captureClosingSections();if(e)this.focusAnchor();this.dsClose.emit();this.open=false;this.onOpenChange(false)}handleKeyDown(e){if(!this.shouldRender||this.closing)return;if(e.key==="Escape"){e.preventDefault();this.close();return}if(e.key==="Tab"){if(this.hasCompositeSections&&!this.compositeTabLeavesPopup(e))return;e.preventDefault();this.close(false);this.moveFocusAfterTab(e.shiftKey);return}if(this.hasCompositeSections)return;const i=this.flatItems;const s=i.map(((e,i)=>({it:e,i}))).filter((({it:e})=>!e.isInactive)).map((({i:e})=>e));if(!s.length)return;const n=s.indexOf(this.focusedIndex);const o=n<0?0:n;switch(e.key){case"ArrowDown":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=s[(o+1)%s.length];this.focusItem(this.focusedIndex);break;case"ArrowUp":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=s[(o-1+s.length)%s.length];this.focusItem(this.focusedIndex);break;case"Home":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=s[0];this.focusItem(this.focusedIndex);break;case"End":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=s[s.length-1];this.focusItem(this.focusedIndex);break}}focusItem(e){const i=this.el.querySelectorAll(".menu-item");i[e]?.focus()}handleItemClick(e){if(e.isInactive)return;this.captureClosingSections();this.dsSelect.emit(e)}handleSwatchSelect(e){this.dsSwatchSelect.emit(e)}render(){if(!this.shouldRender)return n(o,{style:{display:"contents"}});const e=this.closing?this.closingSections??this.lastRenderedSections:this.activeSections;const i=e.some(w);if(!this.closing){this.lastRenderedSections=y(e);this.closingSections=null}let s=0;const t={position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,zIndex:"9998",visibility:this.positionReady?"visible":"hidden"};if(this.menuWidth)t["width"]=this.menuWidth;if(this.minWidth)t["min-width"]=this.minWidth;return n(o,{style:{display:"contents"}},n("div",{popover:"manual",class:{"menu-popup":true,"menu-popup--closing":this.closing,"ds-choice-popup":true,"ds-choice-popup--closing":this.closing},style:t,role:i?"dialog":"menu","aria-label":this.menuLabel,"aria-orientation":i?undefined:"vertical"},n("div",{class:"ds-choice-list"},e.map(((o,t)=>n("div",{key:t,class:{"menu-section":true,"menu-section--divided":t<e.length-1,"menu-section--swatch-picker":w(o),"ds-choice-section":true,"ds-chrome-column":true,"ds-chrome-space--sm":true,"ds-choice-section--divided":t<e.length-1},role:o.header?"group":undefined,"aria-label":o.header},o.header&&n("ds-text",{class:`section-header ds-choice-section__header ds-control--${this.size}`,as:"span",variant:g[this.size],emphasis:true,color:"primary","aria-hidden":"true"},o.header),x(o)?n("ds-swatch-picker",{value:o.value,groupLabel:o.groupLabel??o.header??"Swatch options",options:o.options??[],sections:o.sections??[],onDsChange:e=>{e.stopPropagation();this.handleSwatchSelect(e.detail)}}):o.items.map((e=>{const o=s++;const t=this.focusedIndex===o;const r=!i&&this.selectionMode==="single"&&!e.showSwitch;return n("button",{key:o,type:"button",class:{"menu-item":true,"ds-choice-item":true,"ds-control-frame":true,[`ds-control--${this.size}`]:true,"ds-focus-ring-inset":true,"ds-focus-ring--visible":t&&this.focusRingVisible,"ds-interaction-fill":!e.isInactive,"ds-interaction-fill--selected":!!e.isSelected&&!e.isInactive,"menu-item--selected":!!e.isSelected,"ds-control-inactive":!!e.isInactive,"menu-item--destructive":!!e.isDestructive,"menu-item--focused":t},role:i?undefined:e.showSwitch?"menuitemcheckbox":r?"menuitemradio":"menuitem","aria-checked":!i&&e.showSwitch?String(!!e.switchValue):r?String(!!e.isSelected):undefined,"aria-pressed":i?String(e.showSwitch?!!e.switchValue:!!e.isSelected):undefined,"aria-current":!i&&!e.showSwitch&&!r&&e.isSelected?"true":undefined,disabled:e.isInactive,tabIndex:i?0:t?0:-1,onMouseDown:()=>{this.focusRingVisible=false},onClick:()=>this.handleItemClick(e),onFocus:()=>{this.focusedIndex=o}},n("div",{class:"menu-item__content ds-choice-item__content ds-interaction-fill__content"},n("ds-text",{class:"menu-item__label ds-choice-item__label ds-control-label-box",as:"span",variant:b[this.size],color:e.isSelected?"primary":"secondary"},e.label),e.subtext&&n("ds-text",{class:"menu-item__subtext ds-choice-item__subtext ds-control-label-box",as:"span",variant:g[this.size],color:"secondary"},e.subtext)),e.dot&&n("span",{class:"menu-item__dot-box ds-interaction-fill__content","aria-hidden":"true"},n("ds-badge",{class:"menu-item__dot",variant:"dot",hasRing:false,label:""})),e.showSwitch&&n("ds-switch",{class:"menu-item__switch ds-interaction-fill__content",size:this.size,checked:!!e.switchValue,presentation:true}))}))))))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],anchorAlignment:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}}static get style(){return k()}},[2,"ds-menu",{open:[1028],items:[16],size:[1],selectionMode:[1,"selection-mode"],sections:[16],side:[1],align:[1],anchorAlignment:[1,"anchor-alignment"],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],menuWidth:[1,"menu-width"],minWidth:[1,"min-width"],anchor:[16],anchorId:[1,"anchor-id"],initialFocusVisible:[4,"initial-focus-visible"],menuLabel:[1,"menu-label"],shouldRender:[32],closing:[32],pos:[32],focusedIndex:[32],positionReady:[32],focusRingVisible:[32]},[[0,"keydown","handleKeyDown"]],{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],anchorAlignment:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}]);function P(){if(typeof customElements==="undefined"){return}const e=["ds-menu","ds-badge","ds-swatch-picker","ds-switch","ds-text"];e.forEach((e=>{switch(e){case"ds-menu":if(!customElements.get(t(e))){customElements.define(t(e),C)}break;case"ds-badge":if(!customElements.get(t(e))){c()}break;case"ds-swatch-picker":if(!customElements.get(t(e))){d()}break;case"ds-switch":if(!customElements.get(t(e))){a()}break;case"ds-text":if(!customElements.get(t(e))){l()}break}}))}P();export{C as M,P as d};
2
+ //# sourceMappingURL=p-cPh32CFB.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["isMenuSwatchPickerSection","section","variant","isMenuPickerSection","snapshotMenuSections","sections","map","options","option","swatchSection","items","item","menuCss","MENU_FOCUSABLE_SELECTOR","join","Menu","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","size","selectionMode","side","align","anchorAlignment","sideOffset","TOKEN_CSS_LENGTHS","space050","alignOffset","initialFocusVisible","menuLabel","shouldRender","closing","pos","x","y","focusedIndex","positionReady","focusRingVisible","clickOutsideHandler","closeTimer","position","AnchoredPositionController","getAnchor","resolvedAnchor","getPopup","el","querySelector","measure","anchorEl","popup","anchorRect","getBoundingClientRect","sectionInsetPx","viewportPadPx","minWidth","style","choicePopupMinWidth","width","removeProperty","popupWidth","offsetWidth","popupFallbackWidthPx","popupHeight","offsetHeight","popupFallbackHeightPx","sideOffsetPx","alignOffsetPx","resolveChoicePopupAlignOffset","viewportWidth","window","innerWidth","viewportHeight","innerHeight","apply","onReady","liveUpdate","topLayer","lastRenderedSections","closingSections","componentDidLoad","onOpenChange","disconnectedCallback","cancelPositionRetry","cancelLivePositionUpdate","teardownListeners","isOpen","setupListeners","schedulePositionUpdate","focusInitialItem","captureClosingSections","closeAnimationMs","finishClose","setTimeout","onAnchorChange","onPositionPropsChange","resolveCssLengthPx","TOKEN_DEFAULTS","menuWidthXs","menuFallbackHeight","resolveMotionTimeMs","motionShort2","animationDurationShort3","matches","hidePopover","dsAfterClose","emit","visibleSections","length","activeSections","anchor","anchorId","document","getElementById","anchorFocusTarget","focusAnchor","setFocus","focus","moveFocusAfterTab","backwards","candidates","Array","from","querySelectorAll","filter","element","closest","getClientRects","index","indexOf","compositeTabLeavesPopup","event","focusables","currentIndex","target","shiftKey","flatItems","flatMap","hasCompositeSections","some","cancel","scheduleLivePositionUpdate","scheduleLiveUpdate","schedule","calculatePosition","update","requestAnimationFrame","flat","selectedIdx","findIndex","it","isSelected","isInactive","firstEnabledIdx","btns","e","t","contains","close","addEventListener","observe","unobserve","removeEventListener","clearTimeout","restoreFocus","dsClose","handleKeyDown","key","preventDefault","enabled","i","cur","safe","stopPropagation","focusItem","idx","handleItemClick","dsSelect","handleSwatchSelect","value","dsSwatchSelect","render","h","Host","display","flatIdx","popupStyle","left","top","transform","Math","round","zIndex","visibility","menuWidth","popover","class","role","undefined","si","header","as","CONTROL_SUPPORTING_TEXT_VARIANT","emphasis","color","groupLabel","onDsChange","detail","isFocused","isSingleSelectionItem","showSwitch","type","isDestructive","String","switchValue","disabled","tabIndex","onMouseDown","onClick","onFocus","CONTROL_TEXT_VARIANT","label","subtext","dot","hasRing","checked","presentation"],"sources":["src/wc/components/Menu/menu-types.ts","src/wc/components/Menu/menu-sections.ts","src/wc/components/Menu/Menu.css?tag=ds-menu&encapsulation=scoped","src/wc/components/Menu/Menu.tsx"],"sourcesContent":["import type { SwatchPickerOption, SwatchPickerSection } from '../SwatchPicker/swatch-picker-types';\n\nexport type { MenuAlign, MenuSide } from './menu-position';\nexport {\n PANEL_NAV_USER_MENU_PLACEMENT,\n PANEL_TOOLS_HEADER_MENU_PLACEMENT,\n type MenuPlacement,\n} from './menu-placement';\n\nexport interface MenuItemData {\n label: string;\n value?: string;\n subtext?: string;\n /** Show a supplemental brand notification dot. */\n dot?: boolean;\n isSelected?: boolean;\n isInactive?: boolean;\n isDestructive?: boolean;\n /** Render a compact switch indicator; the menu row owns interaction. */\n showSwitch?: boolean;\n switchValue?: boolean;\n}\n\nexport interface MenuItemsSection {\n header?: string;\n items: MenuItemData[];\n}\n\nexport interface MenuSwatchPickerSection {\n header?: string;\n variant: 'swatch-picker';\n value: string;\n options?: SwatchPickerOption[];\n sections?: SwatchPickerSection[];\n groupLabel?: string;\n}\n\nexport type MenuSection =\n | MenuItemsSection\n | MenuSwatchPickerSection;\n\nexport function isMenuSwatchPickerSection(\n section: MenuSection,\n): section is MenuSwatchPickerSection {\n return 'variant' in section && section.variant === 'swatch-picker';\n}\n\nexport function isMenuPickerSection(\n section: MenuSection,\n): section is MenuSwatchPickerSection {\n return isMenuSwatchPickerSection(section);\n}\n\nexport type { SwatchPickerOption, SwatchPickerSection };\n","import type { MenuSection } from './menu-types';\nimport { isMenuSwatchPickerSection } from './menu-types';\n\n/** Preserve the exact menu context painted during exit motion. */\nexport function snapshotMenuSections(sections: readonly MenuSection[]): MenuSection[] {\n return sections.map(section => {\n if (isMenuSwatchPickerSection(section)) {\n return {\n ...section,\n ...(section.options\n ? { options: section.options.map(option => ({ ...option })) }\n : {}),\n ...(section.sections\n ? {\n sections: section.sections.map(swatchSection => ({\n ...swatchSection,\n options: swatchSection.options.map(option => ({ ...option })),\n })),\n }\n : {}),\n };\n }\n return { ...section, items: section.items.map(item => ({ ...item })) };\n });\n}\n","@import '../../utils/choice-list.css';\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n.menu-item--destructive .menu-item__label {\n /* Beat ds-text color-* host classes for destructive rows. */\n color: var(--color-foreground-bold-negative) !important;\n}\n\n/* Standard md icon zone keeps the dot aligned with other control suffixes. */\n.menu-item__dot-box {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--ds-control-icon, var(--dimension-iconography-md));\n height: var(--ds-control-icon, var(--dimension-iconography-md));\n pointer-events: none;\n}\n\n/* ── Switch suffix ───────────────────────────────────────────────────────── */\n\n.menu-item__switch {\n flex-shrink: 0;\n}\n","import {\n Component,\n Prop,\n State,\n Event,\n EventEmitter,\n Element,\n Watch,\n Listen,\n h,\n Host,\n} from '@stencil/core';\nimport {\n choicePopupMinWidth,\n CONTROL_SUPPORTING_TEXT_VARIANT,\n CONTROL_TEXT_VARIANT,\n resolveChoicePopupAlignOffset,\n resolveCssLengthPx,\n resolveMotionTimeMs,\n TOKEN_CSS_LENGTHS,\n TOKEN_DEFAULTS,\n type ChoicePopupAnchorAlignment,\n type ControlSize,\n} from '../../utils';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport type { MenuAlign, MenuSide } from './menu-position';\nimport type { MenuItemData, MenuSection } from './menu-types';\nimport { snapshotMenuSections } from './menu-sections';\n\nexport type MenuSelectionMode = 'none' | 'single';\nexport type MenuSize = ControlSize;\nimport {\n isMenuPickerSection,\n isMenuSwatchPickerSection,\n} from './menu-types';\n\nconst MENU_FOCUSABLE_SELECTOR = [\n 'a[href]',\n 'button:not([disabled])',\n 'input:not([disabled]):not([type=\"hidden\"])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\n@Component({\n tag: 'ds-menu',\n styleUrl: 'Menu.css',\n scoped: true,\n})\nexport class Menu {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) open: boolean = false;\n @Prop() items: MenuItemData[] = [];\n /** Choice-row density. */\n @Prop() size: MenuSize = 'md';\n /** Give ordinary rows mutually-exclusive menu semantics using isSelected. */\n @Prop() selectionMode: MenuSelectionMode = 'none';\n @Prop() sections: MenuSection[] = [];\n /** Preferred side; placement flips to the opposite side when that offers a better fit. */\n @Prop() side: MenuSide = 'bottom';\n @Prop() align: MenuAlign = 'start';\n /** Align choice-row edges to the anchor by default; use `popup-frame` only for custom frame geometry. */\n @Prop() anchorAlignment: ChoicePopupAnchorAlignment = 'choice-cell';\n /** Gap between anchor and menu — number (px) or TokoMo length (`var(--dimension-space-050)`, etc.). */\n @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n /** Cross-axis offset — number (px) or TokoMo length. */\n @Prop() alignOffset: number | string = 0;\n @Prop() menuWidth: string | undefined;\n @Prop() minWidth: string | undefined;\n /** External trigger element to position against. Set via JS: menuEl.anchor = buttonEl */\n @Prop() anchor: HTMLElement | undefined;\n /** ID of the external trigger element for positioning */\n @Prop() anchorId: string | undefined;\n /** Show a visible ring on the initially focused menu item. Use only when the opener was keyboard-driven. */\n @Prop() initialFocusVisible: boolean = false;\n /** Accessible name for the popup menu. */\n @Prop() menuLabel: string = 'Menu';\n\n @State() private shouldRender: boolean = false;\n @State() private closing: boolean = false;\n @State() private pos: { x: number; y: number } = { x: 0, y: 0 };\n @State() private focusedIndex: number = 0;\n @State() private positionReady: boolean = false;\n @State() private focusRingVisible: boolean = false;\n\n @Event() dsClose!: EventEmitter<void>;\n /** Emitted after the popup's exit motion is complete and its rendered content is removed. */\n @Event() dsAfterClose!: EventEmitter<void>;\n @Event() dsSelect!: EventEmitter<MenuItemData>;\n /** Emitted when a generic `swatch-picker` section option is chosen. */\n @Event() dsSwatchSelect!: EventEmitter<string>;\n\n private clickOutsideHandler: ((e: MouseEvent) => void) | null = null;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n /**\n * Anchored placement. The choice-cell measurement stays here on purpose: the\n * inner-cell align offset and the `--dimension-menu-width-xs` floor are Menu\n * semantics, not shared geometry.\n */\n private readonly position = new AnchoredPositionController({\n getAnchor: () => this.resolvedAnchor ?? null,\n getPopup: () => this.el.querySelector<HTMLElement>('.menu-popup'),\n measure: (anchorEl, popup) => {\n if (!this.open) return null;\n\n const anchorRect = anchorEl.getBoundingClientRect();\n const sectionInsetPx = this.viewportPadPx;\n if (!this.minWidth) {\n if (\n this.anchorAlignment === 'choice-cell' &&\n (this.side === 'top' || this.side === 'bottom')\n ) {\n popup.style.minWidth = `max(var(--dimension-menu-width-xs), ${choicePopupMinWidth(\n anchorRect.width,\n sectionInsetPx\n )}px)`;\n } else {\n popup.style.removeProperty('min-width');\n }\n }\n\n return {\n anchorRect,\n popupWidth: popup.offsetWidth || this.popupFallbackWidthPx,\n popupHeight: popup.offsetHeight || this.popupFallbackHeightPx,\n side: this.side,\n align: this.align,\n sideOffsetPx: this.sideOffsetPx,\n alignOffsetPx: resolveChoicePopupAlignOffset({\n align: this.align,\n alignOffsetPx: this.alignOffsetPx,\n sectionInsetPx,\n anchorAlignment: this.anchorAlignment,\n }),\n viewportPadPx: this.viewportPadPx,\n viewportWidth: window.innerWidth,\n viewportHeight: window.innerHeight,\n };\n },\n apply: ({ x, y }) => {\n this.pos = { x, y };\n },\n onReady: () => {\n this.positionReady = true;\n },\n liveUpdate: 'double-frame',\n topLayer: true,\n });\n /** Last content actually painted while open; retained unchanged through exit motion. */\n private lastRenderedSections: MenuSection[] = [];\n private closingSections: MenuSection[] | null = null;\n\n componentDidLoad() {\n if (this.open) this.onOpenChange(true);\n }\n\n disconnectedCallback() {\n this.cancelPositionRetry();\n this.cancelLivePositionUpdate();\n this.teardownListeners();\n }\n\n @Watch('open')\n onOpenChange(isOpen: boolean) {\n if (isOpen) {\n this.teardownListeners();\n this.closingSections = null;\n this.shouldRender = true;\n this.closing = false;\n this.positionReady = false;\n this.focusRingVisible = this.initialFocusVisible;\n this.setupListeners();\n this.schedulePositionUpdate(() => {\n this.focusInitialItem();\n });\n } else if (this.shouldRender) {\n this.cancelPositionRetry();\n this.captureClosingSections();\n this.closing = true;\n this.teardownListeners();\n const closeAnimationMs = this.closeAnimationMs;\n if (closeAnimationMs <= 0) {\n this.finishClose();\n return;\n }\n this.closeTimer = setTimeout(() => {\n this.closeTimer = null;\n this.finishClose();\n }, closeAnimationMs);\n }\n }\n\n @Watch('anchor')\n @Watch('anchorId')\n onAnchorChange() {\n if (this.open) this.schedulePositionUpdate();\n }\n\n @Watch('side')\n @Watch('align')\n @Watch('anchorAlignment')\n @Watch('sideOffset')\n @Watch('alignOffset')\n onPositionPropsChange() {\n if (this.open) this.schedulePositionUpdate();\n }\n\n private get viewportPadPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n }\n\n private get sideOffsetPx(): number {\n return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);\n }\n\n private get alignOffsetPx(): number {\n return resolveCssLengthPx(this.alignOffset, 0);\n }\n\n private get popupFallbackWidthPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthXs, TOKEN_DEFAULTS.menuWidthXs);\n }\n\n private get popupFallbackHeightPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n }\n\n private get closeAnimationMs(): number {\n return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort2, TOKEN_DEFAULTS.animationDurationShort3);\n }\n\n private finishClose() {\n const popup = this.el.querySelector<HTMLElement>('.menu-popup');\n if (popup?.matches(':popover-open')) popup.hidePopover();\n this.shouldRender = false;\n this.closing = false;\n this.lastRenderedSections = [];\n this.closingSections = null;\n this.dsAfterClose.emit();\n }\n\n private captureClosingSections() {\n if (this.closingSections) return;\n const visibleSections = this.lastRenderedSections.length\n ? this.lastRenderedSections\n : this.activeSections;\n this.closingSections = snapshotMenuSections(visibleSections);\n }\n\n private get resolvedAnchor(): HTMLElement | null {\n if (this.anchor) return this.anchor;\n if (this.anchorId) return document.getElementById(this.anchorId);\n return null;\n }\n\n private get anchorFocusTarget(): HTMLElement | null {\n const anchor = this.resolvedAnchor;\n if (!anchor) return null;\n if (anchor.matches(MENU_FOCUSABLE_SELECTOR)) return anchor;\n return anchor.querySelector<HTMLElement>(MENU_FOCUSABLE_SELECTOR) ?? anchor;\n }\n\n private focusAnchor() {\n const anchor = this.resolvedAnchor as\n (HTMLElement & { setFocus?: () => Promise<void> | void }) | null;\n if (anchor?.setFocus) {\n anchor.setFocus();\n return;\n }\n this.anchorFocusTarget?.focus();\n }\n\n private moveFocusAfterTab(backwards: boolean) {\n const anchor = this.anchorFocusTarget;\n if (!anchor) return;\n if (backwards) {\n anchor.focus();\n return;\n }\n\n const candidates = Array.from(\n document.querySelectorAll<HTMLElement>(MENU_FOCUSABLE_SELECTOR)\n ).filter(\n element =>\n !element.closest('.menu-popup') &&\n !element.closest('[inert]') &&\n element.getClientRects().length > 0\n );\n const index = candidates.indexOf(anchor);\n (candidates[index + 1] ?? anchor).focus();\n }\n\n private compositeTabLeavesPopup(event: KeyboardEvent): boolean {\n const popup = this.el.querySelector<HTMLElement>('.menu-popup');\n if (!popup) return true;\n const focusables = Array.from(\n popup.querySelectorAll<HTMLElement>(MENU_FOCUSABLE_SELECTOR)\n ).filter(element => element.getClientRects().length > 0);\n const currentIndex = focusables.indexOf(event.target as HTMLElement);\n if (currentIndex < 0) return true;\n return event.shiftKey ? currentIndex === 0 : currentIndex === focusables.length - 1;\n }\n\n private get activeSections(): MenuSection[] {\n if (this.sections.length > 0) return this.sections;\n if (this.items.length > 0) return [{ items: this.items }];\n return [];\n }\n\n private get flatItems(): MenuItemData[] {\n return this.activeSections.flatMap(section =>\n isMenuPickerSection(section) ? [] : section.items\n );\n }\n\n /** Rich preference content is a non-modal dialog, not an ARIA action menu. */\n private get hasCompositeSections(): boolean {\n return this.activeSections.some(isMenuPickerSection);\n }\n\n private cancelPositionRetry() {\n this.position.cancel();\n }\n\n private cancelLivePositionUpdate() {\n this.position.cancel();\n }\n\n /** Reposition after the current scroll/layout frame without hiding the open popup. */\n private scheduleLivePositionUpdate() {\n this.position.scheduleLiveUpdate();\n }\n\n /** Retry until anchor + popup exist — do not reveal at 0,0 on a failed first pass. */\n private schedulePositionUpdate(onReady?: () => void) {\n if (!this.open) return;\n this.positionReady = false;\n this.position.schedule(onReady);\n }\n\n /** @returns `true` when anchor and popup were found and `pos` was updated. */\n private calculatePosition(): boolean {\n return this.position.update();\n }\n\n /** Focus the selected item when present, otherwise the first enabled item. */\n private focusInitialItem() {\n if (this.hasCompositeSections) {\n requestAnimationFrame(() => {\n this.el.querySelector<HTMLElement>('.menu-popup [tabindex=\"0\"]')?.focus();\n });\n return;\n }\n\n const flat = this.flatItems;\n const selectedIdx = flat.findIndex(it => it.isSelected && !it.isInactive);\n const firstEnabledIdx = flat.findIndex(it => !it.isInactive);\n this.focusedIndex = selectedIdx >= 0 ? selectedIdx : firstEnabledIdx >= 0 ? firstEnabledIdx : 0;\n\n requestAnimationFrame(() => {\n const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n btns[this.focusedIndex]?.focus();\n });\n }\n\n private setupListeners() {\n this.clickOutsideHandler = (e: MouseEvent) => {\n const t = e.target as Node;\n const popup = this.el.querySelector('.menu-popup');\n const anchorEl = this.resolvedAnchor;\n if (popup?.contains(t) || anchorEl?.contains(t)) return;\n this.close();\n };\n\n document.addEventListener('mousedown', this.clickOutsideHandler, true);\n this.position.observe();\n }\n\n private teardownListeners() {\n this.position.unobserve();\n if (this.clickOutsideHandler) {\n document.removeEventListener('mousedown', this.clickOutsideHandler, true);\n this.clickOutsideHandler = null;\n }\n if (this.closeTimer) {\n clearTimeout(this.closeTimer);\n this.closeTimer = null;\n }\n }\n\n private close(restoreFocus = true) {\n this.captureClosingSections();\n if (restoreFocus) this.focusAnchor();\n this.dsClose.emit();\n this.open = false;\n this.onOpenChange(false);\n }\n\n @Listen('keydown')\n handleKeyDown(e: KeyboardEvent) {\n if (!this.shouldRender || this.closing) return;\n\n if (e.key === 'Escape') {\n e.preventDefault();\n this.close();\n return;\n }\n\n if (e.key === 'Tab') {\n if (this.hasCompositeSections && !this.compositeTabLeavesPopup(e)) return;\n e.preventDefault();\n this.close(false);\n this.moveFocusAfterTab(e.shiftKey);\n return;\n }\n\n if (this.hasCompositeSections) return;\n\n const flat = this.flatItems;\n const enabled = flat\n .map((it, i) => ({ it, i }))\n .filter(({ it }) => !it.isInactive)\n .map(({ i }) => i);\n if (!enabled.length) return;\n\n const cur = enabled.indexOf(this.focusedIndex);\n const safe = cur < 0 ? 0 : cur;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[(safe + 1) % enabled.length];\n this.focusItem(this.focusedIndex);\n break;\n case 'ArrowUp':\n e.preventDefault();\n e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[(safe - 1 + enabled.length) % enabled.length];\n this.focusItem(this.focusedIndex);\n break;\n case 'Home':\n e.preventDefault();\n e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[0];\n this.focusItem(this.focusedIndex);\n break;\n case 'End':\n e.preventDefault();\n e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[enabled.length - 1];\n this.focusItem(this.focusedIndex);\n break;\n }\n }\n\n private focusItem(idx: number) {\n const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n btns[idx]?.focus();\n }\n\n private handleItemClick(item: MenuItemData) {\n if (item.isInactive) return;\n // Consumers commonly change the item source while handling selection.\n // Capture first so the exit animation never paints the next menu context.\n this.captureClosingSections();\n this.dsSelect.emit(item);\n }\n\n private handleSwatchSelect(value: string) {\n this.dsSwatchSelect.emit(value);\n }\n\n render() {\n if (!this.shouldRender) return <Host style={{ display: 'contents' }} />;\n\n const sections = this.closing\n ? (this.closingSections ?? this.lastRenderedSections)\n : this.activeSections;\n const hasCompositeSections = sections.some(isMenuPickerSection);\n if (!this.closing) {\n this.lastRenderedSections = snapshotMenuSections(sections);\n this.closingSections = null;\n }\n let flatIdx = 0;\n\n const popupStyle: Record<string, string> = {\n position: 'fixed',\n left: '0',\n top: '0',\n transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n zIndex: '9998',\n visibility: this.positionReady ? 'visible' : 'hidden',\n };\n\n if (this.menuWidth) popupStyle['width'] = this.menuWidth;\n if (this.minWidth) popupStyle['min-width'] = this.minWidth;\n\n return (\n <Host style={{ display: 'contents' }}>\n <div\n popover=\"manual\"\n class={{\n 'menu-popup': true,\n 'menu-popup--closing': this.closing,\n 'ds-choice-popup': true,\n 'ds-choice-popup--closing': this.closing,\n }}\n style={popupStyle}\n role={hasCompositeSections ? 'dialog' : 'menu'}\n aria-label={this.menuLabel}\n aria-orientation={hasCompositeSections ? undefined : 'vertical'}\n >\n <div class=\"ds-choice-list\">\n {sections.map((section, si) => (\n <div\n key={si}\n class={{\n 'menu-section': true,\n 'menu-section--divided': si < sections.length - 1,\n 'menu-section--swatch-picker': isMenuPickerSection(section),\n 'ds-choice-section': true,\n 'ds-chrome-column': true,\n 'ds-chrome-space--sm': true,\n 'ds-choice-section--divided': si < sections.length - 1,\n }}\n role={section.header ? 'group' : undefined}\n aria-label={section.header}\n >\n {section.header && (\n <ds-text\n class={`section-header ds-choice-section__header ds-control--${this.size}`}\n as=\"span\"\n variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n emphasis\n color=\"primary\"\n aria-hidden=\"true\"\n >\n {section.header}\n </ds-text>\n )}\n {isMenuSwatchPickerSection(section) ? (\n <ds-swatch-picker\n value={section.value}\n groupLabel={section.groupLabel ?? section.header ?? 'Swatch options'}\n options={section.options ?? []}\n sections={section.sections ?? []}\n onDsChange={(e: CustomEvent<string>) => {\n e.stopPropagation();\n this.handleSwatchSelect(e.detail);\n }}\n />\n ) : (\n section.items.map(item => {\n const idx = flatIdx++;\n const isFocused = this.focusedIndex === idx;\n const isSingleSelectionItem =\n !hasCompositeSections && this.selectionMode === 'single' && !item.showSwitch;\n return (\n <button\n key={idx}\n type=\"button\"\n class={{\n 'menu-item': true,\n 'ds-choice-item': true,\n 'ds-control-frame': true,\n [`ds-control--${this.size}`]: true,\n 'ds-focus-ring-inset': true,\n 'ds-focus-ring--visible': isFocused && this.focusRingVisible,\n 'ds-interaction-fill': !item.isInactive,\n 'ds-interaction-fill--selected': !!item.isSelected && !item.isInactive,\n 'menu-item--selected': !!item.isSelected,\n 'ds-control-inactive': !!item.isInactive,\n 'menu-item--destructive': !!item.isDestructive,\n 'menu-item--focused': isFocused,\n }}\n role={\n hasCompositeSections\n ? undefined\n : item.showSwitch\n ? 'menuitemcheckbox'\n : isSingleSelectionItem\n ? 'menuitemradio'\n : 'menuitem'\n }\n aria-checked={\n !hasCompositeSections && item.showSwitch\n ? String(!!item.switchValue)\n : isSingleSelectionItem\n ? String(!!item.isSelected)\n : undefined\n }\n aria-pressed={\n hasCompositeSections\n ? String(item.showSwitch ? !!item.switchValue : !!item.isSelected)\n : undefined\n }\n aria-current={\n !hasCompositeSections &&\n !item.showSwitch &&\n !isSingleSelectionItem &&\n item.isSelected\n ? 'true'\n : undefined\n }\n disabled={item.isInactive}\n tabIndex={hasCompositeSections ? 0 : isFocused ? 0 : -1}\n onMouseDown={() => {\n this.focusRingVisible = false;\n }}\n onClick={() => this.handleItemClick(item)}\n onFocus={() => {\n this.focusedIndex = idx;\n }}\n >\n <div class=\"menu-item__content ds-choice-item__content ds-interaction-fill__content\">\n <ds-text\n class=\"menu-item__label ds-choice-item__label ds-control-label-box\"\n as=\"span\"\n variant={CONTROL_TEXT_VARIANT[this.size]}\n color={item.isSelected ? 'primary' : 'secondary'}\n >\n {item.label}\n </ds-text>\n {item.subtext && (\n <ds-text\n class=\"menu-item__subtext ds-choice-item__subtext ds-control-label-box\"\n as=\"span\"\n variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n color=\"secondary\"\n >\n {item.subtext}\n </ds-text>\n )}\n </div>\n {item.dot && (\n <span\n class=\"menu-item__dot-box ds-interaction-fill__content\"\n aria-hidden=\"true\"\n >\n <ds-badge\n class=\"menu-item__dot\"\n variant=\"dot\"\n hasRing={false}\n label=\"\"\n />\n </span>\n )}\n {item.showSwitch && (\n <ds-switch\n class=\"menu-item__switch ds-interaction-fill__content\"\n size={this.size}\n checked={!!item.switchValue}\n presentation\n />\n )}\n </button>\n );\n })\n )}\n </div>\n ))}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["isMenuSwatchPickerSection","section","variant","isMenuPickerSection","snapshotMenuSections","sections","map","options","option","swatchSection","items","item","menuCss","MENU_FOCUSABLE_SELECTOR","join","Menu","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","size","selectionMode","side","align","anchorAlignment","sideOffset","TOKEN_CSS_LENGTHS","space050","alignOffset","initialFocusVisible","menuLabel","shouldRender","closing","pos","x","y","focusedIndex","positionReady","focusRingVisible","clickOutsideHandler","closeTimer","position","AnchoredPositionController","getAnchor","resolvedAnchor","getPopup","el","querySelector","measure","anchorEl","popup","anchorRect","getBoundingClientRect","sectionInsetPx","viewportPadPx","minWidth","style","choicePopupMinWidth","width","removeProperty","popupWidth","offsetWidth","popupFallbackWidthPx","popupHeight","offsetHeight","popupFallbackHeightPx","sideOffsetPx","alignOffsetPx","resolveChoicePopupAlignOffset","viewportWidth","window","innerWidth","viewportHeight","innerHeight","apply","onReady","liveUpdate","topLayer","lastRenderedSections","closingSections","componentDidLoad","onOpenChange","disconnectedCallback","cancelPositionRetry","cancelLivePositionUpdate","teardownListeners","isOpen","setupListeners","schedulePositionUpdate","focusInitialItem","captureClosingSections","closeAnimationMs","finishClose","setTimeout","onAnchorChange","onPositionPropsChange","resolveCssLengthPx","TOKEN_DEFAULTS","menuWidthXs","menuFallbackHeight","resolveMotionTimeMs","motionShort2","animationDurationShort3","matches","hidePopover","dsAfterClose","emit","visibleSections","length","activeSections","anchor","anchorId","document","getElementById","anchorFocusTarget","focusAnchor","setFocus","focus","moveFocusAfterTab","backwards","candidates","Array","from","querySelectorAll","filter","element","closest","getClientRects","index","indexOf","compositeTabLeavesPopup","event","focusables","currentIndex","target","shiftKey","flatItems","flatMap","hasCompositeSections","some","cancel","scheduleLivePositionUpdate","scheduleLiveUpdate","schedule","calculatePosition","update","requestAnimationFrame","flat","selectedIdx","findIndex","it","isSelected","isInactive","firstEnabledIdx","btns","e","t","contains","close","addEventListener","observe","unobserve","removeEventListener","clearTimeout","restoreFocus","dsClose","handleKeyDown","key","preventDefault","enabled","i","cur","safe","stopPropagation","focusItem","idx","handleItemClick","dsSelect","handleSwatchSelect","value","dsSwatchSelect","render","h","Host","display","flatIdx","popupStyle","left","top","transform","Math","round","zIndex","visibility","menuWidth","popover","class","role","undefined","si","header","as","CONTROL_SUPPORTING_TEXT_VARIANT","emphasis","color","groupLabel","onDsChange","detail","isFocused","isSingleSelectionItem","showSwitch","type","isDestructive","String","switchValue","disabled","tabIndex","onMouseDown","onClick","onFocus","CONTROL_TEXT_VARIANT","label","subtext","dot","hasRing","checked","presentation"],"sources":["src/wc/components/Menu/menu-types.ts","src/wc/components/Menu/menu-sections.ts","src/wc/components/Menu/Menu.css?tag=ds-menu&encapsulation=scoped","src/wc/components/Menu/Menu.tsx"],"sourcesContent":["import type { SwatchPickerOption, SwatchPickerSection } from '../SwatchPicker/swatch-picker-types';\n\nexport type { MenuAlign, MenuSide } from './menu-position';\nexport {\n PANEL_NAV_USER_MENU_PLACEMENT,\n PANEL_TOOLS_HEADER_MENU_PLACEMENT,\n type MenuPlacement,\n} from './menu-placement';\n\nexport interface MenuItemData {\n label: string;\n value?: string;\n subtext?: string;\n /** Show a supplemental brand notification dot. */\n dot?: boolean;\n isSelected?: boolean;\n isInactive?: boolean;\n isDestructive?: boolean;\n /** Render a compact switch indicator; the menu row owns interaction. */\n showSwitch?: boolean;\n switchValue?: boolean;\n}\n\nexport interface MenuItemsSection {\n header?: string;\n items: MenuItemData[];\n}\n\nexport interface MenuSwatchPickerSection {\n header?: string;\n variant: 'swatch-picker';\n value: string;\n options?: SwatchPickerOption[];\n sections?: SwatchPickerSection[];\n groupLabel?: string;\n}\n\nexport type MenuSection =\n | MenuItemsSection\n | MenuSwatchPickerSection;\n\nexport function isMenuSwatchPickerSection(\n section: MenuSection,\n): section is MenuSwatchPickerSection {\n return 'variant' in section && section.variant === 'swatch-picker';\n}\n\nexport function isMenuPickerSection(\n section: MenuSection,\n): section is MenuSwatchPickerSection {\n return isMenuSwatchPickerSection(section);\n}\n\nexport type { SwatchPickerOption, SwatchPickerSection };\n","import type { MenuSection } from './menu-types';\nimport { isMenuSwatchPickerSection } from './menu-types';\n\n/** Preserve the exact menu context painted during exit motion. */\nexport function snapshotMenuSections(sections: readonly MenuSection[]): MenuSection[] {\n return sections.map(section => {\n if (isMenuSwatchPickerSection(section)) {\n return {\n ...section,\n ...(section.options\n ? { options: section.options.map(option => ({ ...option })) }\n : {}),\n ...(section.sections\n ? {\n sections: section.sections.map(swatchSection => ({\n ...swatchSection,\n options: swatchSection.options.map(option => ({ ...option })),\n })),\n }\n : {}),\n };\n }\n return { ...section, items: section.items.map(item => ({ ...item })) };\n });\n}\n","@import '../../utils/choice-list.css';\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n.menu-item--destructive .menu-item__label {\n /* Beat ds-text color-* host classes for destructive rows. */\n color: var(--color-foreground-bold-negative) !important;\n}\n\n/* Standard md icon zone keeps the dot aligned with other control suffixes. */\n.menu-item__dot-box {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--ds-control-icon, var(--dimension-iconography-md));\n height: var(--ds-control-icon, var(--dimension-iconography-md));\n pointer-events: none;\n}\n\n/* ── Switch suffix ───────────────────────────────────────────────────────── */\n\n.menu-item__switch {\n flex-shrink: 0;\n}\n","import {\n Component,\n Prop,\n State,\n Event,\n EventEmitter,\n Element,\n Watch,\n Listen,\n h,\n Host,\n} from '@stencil/core';\nimport {\n choicePopupMinWidth,\n CONTROL_SUPPORTING_TEXT_VARIANT,\n CONTROL_TEXT_VARIANT,\n resolveChoicePopupAlignOffset,\n resolveCssLengthPx,\n resolveMotionTimeMs,\n TOKEN_CSS_LENGTHS,\n TOKEN_DEFAULTS,\n type ChoicePopupAnchorAlignment,\n type ControlSize,\n} from '../../utils';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport type { MenuAlign, MenuSide } from './menu-position';\nimport type { MenuItemData, MenuSection } from './menu-types';\nimport { snapshotMenuSections } from './menu-sections';\n\nexport type MenuSelectionMode = 'none' | 'single';\nexport type MenuSize = ControlSize;\nimport {\n isMenuPickerSection,\n isMenuSwatchPickerSection,\n} from './menu-types';\n\nconst MENU_FOCUSABLE_SELECTOR = [\n 'a[href]',\n 'button:not([disabled])',\n 'input:not([disabled]):not([type=\"hidden\"])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\n@Component({\n tag: 'ds-menu',\n styleUrl: 'Menu.css',\n scoped: true,\n})\nexport class Menu {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) open: boolean = false;\n @Prop() items: MenuItemData[] = [];\n /** Choice-row density. */\n @Prop() size: MenuSize = 'md';\n /** Give ordinary rows mutually-exclusive menu semantics using isSelected. */\n @Prop() selectionMode: MenuSelectionMode = 'none';\n @Prop() sections: MenuSection[] = [];\n /** Preferred side; placement flips to the opposite side when that offers a better fit. */\n @Prop() side: MenuSide = 'bottom';\n @Prop() align: MenuAlign = 'start';\n /** Align choice-row edges to the anchor by default; use `popup-frame` only for custom frame geometry. */\n @Prop() anchorAlignment: ChoicePopupAnchorAlignment = 'choice-cell';\n /** Gap between anchor and menu — number (px) or TokoMo length (`var(--dimension-space-050)`, etc.). */\n @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n /** Cross-axis offset — number (px) or TokoMo length. */\n @Prop() alignOffset: number | string = 0;\n @Prop() menuWidth: string | undefined;\n @Prop() minWidth: string | undefined;\n /** External trigger element to position against. Set via JS: menuEl.anchor = buttonEl */\n @Prop() anchor: HTMLElement | undefined;\n /** ID of the external trigger element for positioning */\n @Prop() anchorId: string | undefined;\n /** Show a visible ring on the initially focused menu item. Use only when the opener was keyboard-driven. */\n @Prop() initialFocusVisible: boolean = false;\n /** Accessible name for the popup menu. */\n @Prop() menuLabel: string = 'Menu';\n\n @State() private shouldRender: boolean = false;\n @State() private closing: boolean = false;\n @State() private pos: { x: number; y: number } = { x: 0, y: 0 };\n @State() private focusedIndex: number = 0;\n @State() private positionReady: boolean = false;\n @State() private focusRingVisible: boolean = false;\n\n @Event() dsClose!: EventEmitter<void>;\n /** Emitted after the popup's exit motion is complete and its rendered content is removed. */\n @Event() dsAfterClose!: EventEmitter<void>;\n @Event() dsSelect!: EventEmitter<MenuItemData>;\n /** Emitted when a generic `swatch-picker` section option is chosen. */\n @Event() dsSwatchSelect!: EventEmitter<string>;\n\n private clickOutsideHandler: ((e: MouseEvent) => void) | null = null;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n /**\n * Anchored placement. The choice-cell measurement stays here on purpose: the\n * inner-cell align offset and the `--dimension-menu-width-xs` floor are Menu\n * semantics, not shared geometry.\n */\n private readonly position = new AnchoredPositionController({\n getAnchor: () => this.resolvedAnchor ?? null,\n getPopup: () => this.el.querySelector<HTMLElement>('.menu-popup'),\n measure: (anchorEl, popup) => {\n if (!this.open) return null;\n\n const anchorRect = anchorEl.getBoundingClientRect();\n const sectionInsetPx = this.viewportPadPx;\n if (!this.minWidth) {\n if (\n this.anchorAlignment === 'choice-cell' &&\n (this.side === 'top' || this.side === 'bottom')\n ) {\n popup.style.minWidth = `max(var(--dimension-menu-width-xs), ${choicePopupMinWidth(\n anchorRect.width,\n sectionInsetPx\n )}px)`;\n } else {\n popup.style.removeProperty('min-width');\n }\n }\n\n return {\n anchorRect,\n popupWidth: popup.offsetWidth || this.popupFallbackWidthPx,\n popupHeight: popup.offsetHeight || this.popupFallbackHeightPx,\n side: this.side,\n align: this.align,\n sideOffsetPx: this.sideOffsetPx,\n alignOffsetPx: resolveChoicePopupAlignOffset({\n align: this.align,\n alignOffsetPx: this.alignOffsetPx,\n sectionInsetPx,\n anchorAlignment: this.anchorAlignment,\n }),\n viewportPadPx: this.viewportPadPx,\n viewportWidth: window.innerWidth,\n viewportHeight: window.innerHeight,\n };\n },\n apply: ({ x, y }) => {\n this.pos = { x, y };\n },\n onReady: () => {\n this.positionReady = true;\n },\n liveUpdate: 'double-frame',\n topLayer: true,\n });\n /** Last content actually painted while open; retained unchanged through exit motion. */\n private lastRenderedSections: MenuSection[] = [];\n private closingSections: MenuSection[] | null = null;\n\n componentDidLoad() {\n if (this.open) this.onOpenChange(true);\n }\n\n disconnectedCallback() {\n this.cancelPositionRetry();\n this.cancelLivePositionUpdate();\n this.teardownListeners();\n }\n\n @Watch('open')\n onOpenChange(isOpen: boolean) {\n if (isOpen) {\n this.teardownListeners();\n this.closingSections = null;\n this.shouldRender = true;\n this.closing = false;\n this.positionReady = false;\n this.focusRingVisible = this.initialFocusVisible;\n this.setupListeners();\n this.schedulePositionUpdate(() => {\n this.focusInitialItem();\n });\n } else if (this.shouldRender) {\n this.cancelPositionRetry();\n this.captureClosingSections();\n this.closing = true;\n this.teardownListeners();\n const closeAnimationMs = this.closeAnimationMs;\n if (closeAnimationMs <= 0) {\n this.finishClose();\n return;\n }\n this.closeTimer = setTimeout(() => {\n this.closeTimer = null;\n this.finishClose();\n }, closeAnimationMs);\n }\n }\n\n @Watch('anchor')\n @Watch('anchorId')\n onAnchorChange() {\n if (this.open) this.schedulePositionUpdate();\n }\n\n @Watch('side')\n @Watch('align')\n @Watch('anchorAlignment')\n @Watch('sideOffset')\n @Watch('alignOffset')\n onPositionPropsChange() {\n if (this.open) this.schedulePositionUpdate();\n }\n\n private get viewportPadPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n }\n\n private get sideOffsetPx(): number {\n return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);\n }\n\n private get alignOffsetPx(): number {\n return resolveCssLengthPx(this.alignOffset, 0);\n }\n\n private get popupFallbackWidthPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthXs, TOKEN_DEFAULTS.menuWidthXs);\n }\n\n private get popupFallbackHeightPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n }\n\n private get closeAnimationMs(): number {\n return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort2, TOKEN_DEFAULTS.animationDurationShort3);\n }\n\n private finishClose() {\n const popup = this.el.querySelector<HTMLElement>('.menu-popup');\n if (popup?.matches(':popover-open')) popup.hidePopover();\n this.shouldRender = false;\n this.closing = false;\n this.lastRenderedSections = [];\n this.closingSections = null;\n this.dsAfterClose.emit();\n }\n\n private captureClosingSections() {\n if (this.closingSections) return;\n const visibleSections = this.lastRenderedSections.length\n ? this.lastRenderedSections\n : this.activeSections;\n this.closingSections = snapshotMenuSections(visibleSections);\n }\n\n private get resolvedAnchor(): HTMLElement | null {\n if (this.anchor) return this.anchor;\n if (this.anchorId) return document.getElementById(this.anchorId);\n return null;\n }\n\n private get anchorFocusTarget(): HTMLElement | null {\n const anchor = this.resolvedAnchor;\n if (!anchor) return null;\n if (anchor.matches(MENU_FOCUSABLE_SELECTOR)) return anchor;\n return anchor.querySelector<HTMLElement>(MENU_FOCUSABLE_SELECTOR) ?? anchor;\n }\n\n private focusAnchor() {\n const anchor = this.resolvedAnchor as\n (HTMLElement & { setFocus?: () => Promise<void> | void }) | null;\n if (anchor?.setFocus) {\n anchor.setFocus();\n return;\n }\n this.anchorFocusTarget?.focus();\n }\n\n private moveFocusAfterTab(backwards: boolean) {\n const anchor = this.anchorFocusTarget;\n if (!anchor) return;\n if (backwards) {\n anchor.focus();\n return;\n }\n\n const candidates = Array.from(\n document.querySelectorAll<HTMLElement>(MENU_FOCUSABLE_SELECTOR)\n ).filter(\n element =>\n !element.closest('.menu-popup') &&\n !element.closest('[inert]') &&\n element.getClientRects().length > 0\n );\n const index = candidates.indexOf(anchor);\n (candidates[index + 1] ?? anchor).focus();\n }\n\n private compositeTabLeavesPopup(event: KeyboardEvent): boolean {\n const popup = this.el.querySelector<HTMLElement>('.menu-popup');\n if (!popup) return true;\n const focusables = Array.from(\n popup.querySelectorAll<HTMLElement>(MENU_FOCUSABLE_SELECTOR)\n ).filter(element => element.getClientRects().length > 0);\n const currentIndex = focusables.indexOf(event.target as HTMLElement);\n if (currentIndex < 0) return true;\n return event.shiftKey ? currentIndex === 0 : currentIndex === focusables.length - 1;\n }\n\n private get activeSections(): MenuSection[] {\n if (this.sections.length > 0) return this.sections;\n if (this.items.length > 0) return [{ items: this.items }];\n return [];\n }\n\n private get flatItems(): MenuItemData[] {\n return this.activeSections.flatMap(section =>\n isMenuPickerSection(section) ? [] : section.items\n );\n }\n\n /** Rich preference content is a non-modal dialog, not an ARIA action menu. */\n private get hasCompositeSections(): boolean {\n return this.activeSections.some(isMenuPickerSection);\n }\n\n private cancelPositionRetry() {\n this.position.cancel();\n }\n\n private cancelLivePositionUpdate() {\n this.position.cancel();\n }\n\n /** Reposition after the current scroll/layout frame without hiding the open popup. */\n private scheduleLivePositionUpdate() {\n this.position.scheduleLiveUpdate();\n }\n\n /** Retry until anchor + popup exist — do not reveal at 0,0 on a failed first pass. */\n private schedulePositionUpdate(onReady?: () => void) {\n if (!this.open) return;\n this.positionReady = false;\n this.position.schedule(onReady);\n }\n\n /** @returns `true` when anchor and popup were found and `pos` was updated. */\n private calculatePosition(): boolean {\n return this.position.update();\n }\n\n /** Focus the selected item when present, otherwise the first enabled item. */\n private focusInitialItem() {\n if (this.hasCompositeSections) {\n requestAnimationFrame(() => {\n this.el.querySelector<HTMLElement>('.menu-popup [tabindex=\"0\"]')?.focus();\n });\n return;\n }\n\n const flat = this.flatItems;\n const selectedIdx = flat.findIndex(it => it.isSelected && !it.isInactive);\n const firstEnabledIdx = flat.findIndex(it => !it.isInactive);\n this.focusedIndex = selectedIdx >= 0 ? selectedIdx : firstEnabledIdx >= 0 ? firstEnabledIdx : 0;\n\n requestAnimationFrame(() => {\n const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n btns[this.focusedIndex]?.focus();\n });\n }\n\n private setupListeners() {\n this.clickOutsideHandler = (e: MouseEvent) => {\n const t = e.target as Node;\n const popup = this.el.querySelector('.menu-popup');\n const anchorEl = this.resolvedAnchor;\n if (popup?.contains(t) || anchorEl?.contains(t)) return;\n this.close();\n };\n\n document.addEventListener('mousedown', this.clickOutsideHandler, true);\n this.position.observe();\n }\n\n private teardownListeners() {\n this.position.unobserve();\n if (this.clickOutsideHandler) {\n document.removeEventListener('mousedown', this.clickOutsideHandler, true);\n this.clickOutsideHandler = null;\n }\n if (this.closeTimer) {\n clearTimeout(this.closeTimer);\n this.closeTimer = null;\n }\n }\n\n private close(restoreFocus = true) {\n this.captureClosingSections();\n if (restoreFocus) this.focusAnchor();\n this.dsClose.emit();\n this.open = false;\n this.onOpenChange(false);\n }\n\n @Listen('keydown')\n handleKeyDown(e: KeyboardEvent) {\n if (!this.shouldRender || this.closing) return;\n\n if (e.key === 'Escape') {\n e.preventDefault();\n this.close();\n return;\n }\n\n if (e.key === 'Tab') {\n if (this.hasCompositeSections && !this.compositeTabLeavesPopup(e)) return;\n e.preventDefault();\n this.close(false);\n this.moveFocusAfterTab(e.shiftKey);\n return;\n }\n\n if (this.hasCompositeSections) return;\n\n const flat = this.flatItems;\n const enabled = flat\n .map((it, i) => ({ it, i }))\n .filter(({ it }) => !it.isInactive)\n .map(({ i }) => i);\n if (!enabled.length) return;\n\n const cur = enabled.indexOf(this.focusedIndex);\n const safe = cur < 0 ? 0 : cur;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[(safe + 1) % enabled.length];\n this.focusItem(this.focusedIndex);\n break;\n case 'ArrowUp':\n e.preventDefault();\n e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[(safe - 1 + enabled.length) % enabled.length];\n this.focusItem(this.focusedIndex);\n break;\n case 'Home':\n e.preventDefault();\n e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[0];\n this.focusItem(this.focusedIndex);\n break;\n case 'End':\n e.preventDefault();\n e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[enabled.length - 1];\n this.focusItem(this.focusedIndex);\n break;\n }\n }\n\n private focusItem(idx: number) {\n const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n btns[idx]?.focus();\n }\n\n private handleItemClick(item: MenuItemData) {\n if (item.isInactive) return;\n // Consumers commonly change the item source while handling selection.\n // Capture first so the exit animation never paints the next menu context.\n this.captureClosingSections();\n this.dsSelect.emit(item);\n }\n\n private handleSwatchSelect(value: string) {\n this.dsSwatchSelect.emit(value);\n }\n\n render() {\n if (!this.shouldRender) return <Host style={{ display: 'contents' }} />;\n\n const sections = this.closing\n ? (this.closingSections ?? this.lastRenderedSections)\n : this.activeSections;\n const hasCompositeSections = sections.some(isMenuPickerSection);\n if (!this.closing) {\n this.lastRenderedSections = snapshotMenuSections(sections);\n this.closingSections = null;\n }\n let flatIdx = 0;\n\n const popupStyle: Record<string, string> = {\n position: 'fixed',\n left: '0',\n top: '0',\n transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n zIndex: '9998',\n visibility: this.positionReady ? 'visible' : 'hidden',\n };\n\n if (this.menuWidth) popupStyle['width'] = this.menuWidth;\n if (this.minWidth) popupStyle['min-width'] = this.minWidth;\n\n return (\n <Host style={{ display: 'contents' }}>\n <div\n popover=\"manual\"\n class={{\n 'menu-popup': true,\n 'menu-popup--closing': this.closing,\n 'ds-choice-popup': true,\n 'ds-choice-popup--closing': this.closing,\n }}\n style={popupStyle}\n role={hasCompositeSections ? 'dialog' : 'menu'}\n aria-label={this.menuLabel}\n aria-orientation={hasCompositeSections ? undefined : 'vertical'}\n >\n <div class=\"ds-choice-list\">\n {sections.map((section, si) => (\n <div\n key={si}\n class={{\n 'menu-section': true,\n 'menu-section--divided': si < sections.length - 1,\n 'menu-section--swatch-picker': isMenuPickerSection(section),\n 'ds-choice-section': true,\n 'ds-chrome-column': true,\n 'ds-chrome-space--sm': true,\n 'ds-choice-section--divided': si < sections.length - 1,\n }}\n role={section.header ? 'group' : undefined}\n aria-label={section.header}\n >\n {section.header && (\n <ds-text\n class={`section-header ds-choice-section__header ds-control--${this.size}`}\n as=\"span\"\n variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n emphasis\n color=\"primary\"\n aria-hidden=\"true\"\n >\n {section.header}\n </ds-text>\n )}\n {isMenuSwatchPickerSection(section) ? (\n <ds-swatch-picker\n value={section.value}\n groupLabel={section.groupLabel ?? section.header ?? 'Swatch options'}\n options={section.options ?? []}\n sections={section.sections ?? []}\n onDsChange={(e: CustomEvent<string>) => {\n e.stopPropagation();\n this.handleSwatchSelect(e.detail);\n }}\n />\n ) : (\n section.items.map(item => {\n const idx = flatIdx++;\n const isFocused = this.focusedIndex === idx;\n const isSingleSelectionItem =\n !hasCompositeSections && this.selectionMode === 'single' && !item.showSwitch;\n return (\n <button\n key={idx}\n type=\"button\"\n class={{\n 'menu-item': true,\n 'ds-choice-item': true,\n 'ds-control-frame': true,\n [`ds-control--${this.size}`]: true,\n 'ds-focus-ring-inset': true,\n 'ds-focus-ring--visible': isFocused && this.focusRingVisible,\n 'ds-interaction-fill': !item.isInactive,\n 'ds-interaction-fill--selected': !!item.isSelected && !item.isInactive,\n 'menu-item--selected': !!item.isSelected,\n 'ds-control-inactive': !!item.isInactive,\n 'menu-item--destructive': !!item.isDestructive,\n 'menu-item--focused': isFocused,\n }}\n role={\n hasCompositeSections\n ? undefined\n : item.showSwitch\n ? 'menuitemcheckbox'\n : isSingleSelectionItem\n ? 'menuitemradio'\n : 'menuitem'\n }\n aria-checked={\n !hasCompositeSections && item.showSwitch\n ? String(!!item.switchValue)\n : isSingleSelectionItem\n ? String(!!item.isSelected)\n : undefined\n }\n aria-pressed={\n hasCompositeSections\n ? String(item.showSwitch ? !!item.switchValue : !!item.isSelected)\n : undefined\n }\n aria-current={\n !hasCompositeSections &&\n !item.showSwitch &&\n !isSingleSelectionItem &&\n item.isSelected\n ? 'true'\n : undefined\n }\n disabled={item.isInactive}\n tabIndex={hasCompositeSections ? 0 : isFocused ? 0 : -1}\n onMouseDown={() => {\n this.focusRingVisible = false;\n }}\n onClick={() => this.handleItemClick(item)}\n onFocus={() => {\n this.focusedIndex = idx;\n }}\n >\n <div class=\"menu-item__content ds-choice-item__content ds-interaction-fill__content\">\n <ds-text\n class=\"menu-item__label ds-choice-item__label ds-control-label-box\"\n as=\"span\"\n variant={CONTROL_TEXT_VARIANT[this.size]}\n color={item.isSelected ? 'primary' : 'secondary'}\n >\n {item.label}\n </ds-text>\n {item.subtext && (\n <ds-text\n class=\"menu-item__subtext ds-choice-item__subtext ds-control-label-box\"\n as=\"span\"\n variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n color=\"secondary\"\n >\n {item.subtext}\n </ds-text>\n )}\n </div>\n {item.dot && (\n <span\n class=\"menu-item__dot-box ds-interaction-fill__content\"\n aria-hidden=\"true\"\n >\n <ds-badge\n class=\"menu-item__dot\"\n variant=\"dot\"\n hasRing={false}\n label=\"\"\n />\n </span>\n )}\n {item.showSwitch && (\n <ds-switch\n class=\"menu-item__switch ds-interaction-fill__content\"\n size={this.size}\n checked={!!item.switchValue}\n presentation\n />\n )}\n </button>\n );\n })\n )}\n </div>\n ))}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2026-08-09T04:41:00",
2
+ "timestamp": "2026-08-09T23:01:36",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.43.5",
@@ -3813,6 +3813,35 @@
3813
3813
  "getter": false,
3814
3814
  "setter": false
3815
3815
  },
3816
+ {
3817
+ "name": "isInset",
3818
+ "type": "boolean",
3819
+ "complexType": {
3820
+ "original": "boolean",
3821
+ "resolved": "boolean",
3822
+ "references": {}
3823
+ },
3824
+ "mutable": false,
3825
+ "attr": "is-inset",
3826
+ "reflectToAttr": false,
3827
+ "docs": "Use reduced outer geometry when nested inside a control of the same size.",
3828
+ "docsTags": [
3829
+ {
3830
+ "name": "default",
3831
+ "text": "false"
3832
+ }
3833
+ ],
3834
+ "default": "false",
3835
+ "values": [
3836
+ {
3837
+ "type": "boolean"
3838
+ }
3839
+ ],
3840
+ "optional": false,
3841
+ "required": false,
3842
+ "getter": false,
3843
+ "setter": false
3844
+ },
3816
3845
  {
3817
3846
  "name": "isLoading",
3818
3847
  "type": "boolean",
@@ -4621,6 +4650,35 @@
4621
4650
  "getter": false,
4622
4651
  "setter": false
4623
4652
  },
4653
+ {
4654
+ "name": "isInset",
4655
+ "type": "boolean",
4656
+ "complexType": {
4657
+ "original": "boolean",
4658
+ "resolved": "boolean",
4659
+ "references": {}
4660
+ },
4661
+ "mutable": false,
4662
+ "attr": "is-inset",
4663
+ "reflectToAttr": false,
4664
+ "docs": "Use reduced outer geometry when nested inside a control of the same size.",
4665
+ "docsTags": [
4666
+ {
4667
+ "name": "default",
4668
+ "text": "false"
4669
+ }
4670
+ ],
4671
+ "default": "false",
4672
+ "values": [
4673
+ {
4674
+ "type": "boolean"
4675
+ }
4676
+ ],
4677
+ "optional": false,
4678
+ "required": false,
4679
+ "getter": false,
4680
+ "setter": false
4681
+ },
4624
4682
  {
4625
4683
  "name": "isLoading",
4626
4684
  "type": "boolean",
@@ -22966,6 +23024,27 @@
22966
23024
  "docs": "",
22967
23025
  "docsTags": []
22968
23026
  },
23027
+ {
23028
+ "event": "dsRowActivate",
23029
+ "detail": "TableRowActivateDetail",
23030
+ "bubbles": true,
23031
+ "complexType": {
23032
+ "original": "TableRowActivateDetail",
23033
+ "resolved": "TableRowActivateDetail",
23034
+ "references": {
23035
+ "TableRowActivateDetail": {
23036
+ "location": "import",
23037
+ "path": "./table-types",
23038
+ "id": "src/wc/components/Table/table-types.ts::TableRowActivateDetail",
23039
+ "referenceLocation": "TableRowActivateDetail"
23040
+ }
23041
+ }
23042
+ },
23043
+ "cancelable": true,
23044
+ "composed": true,
23045
+ "docs": "",
23046
+ "docsTags": []
23047
+ },
22969
23048
  {
22970
23049
  "event": "dsSelectionChange",
22971
23050
  "detail": "TableSelectionChangeDetail",
@@ -26086,12 +26165,12 @@
26086
26165
  "path": "src/wc/components/SwatchPicker/swatch-picker-types.ts"
26087
26166
  },
26088
26167
  "src/wc/components/Table/table-types.ts::TableColumn": {
26089
- "declaration": "export interface TableColumn {\n /** Stable column identity. */\n id: string;\n header: string;\n /** Optional labels for columns that present and sort multiple related data points. */\n headerSegments?: TableHeaderSegment[];\n align?: TableCellAlign;\n sortable?: boolean;\n /** Preferred TokoMo table-column width. Numbers remain available for exceptional custom pixel widths. */\n size?: TableColumnWidth | number;\n /** Minimum accepted preferred width in CSS pixels. */\n minSize?: number;\n /** Maximum accepted preferred width in CSS pixels. */\n maxSize?: number;\n /** Wrap cell text instead of truncating it to one line. */\n wrap?: boolean;\n}",
26168
+ "declaration": "export interface TableColumn {\n /** Stable column identity. */\n id: string;\n /** Visible column label. May be empty when headerLabel supplies a non-visual name. */\n header: string;\n /** Screen-reader-only column name for an intentionally blank visual header. */\n headerLabel?: string;\n /** Optional labels for columns that present and sort multiple related data points. */\n headerSegments?: TableHeaderSegment[];\n align?: TableCellAlign;\n sortable?: boolean;\n /** Preferred TokoMo table-column width. Numbers remain available for exceptional custom pixel widths. */\n size?: TableColumnWidth | number;\n /** Minimum accepted preferred width in CSS pixels. */\n minSize?: number;\n /** Maximum accepted preferred width in CSS pixels. */\n maxSize?: number;\n /** Wrap cell text instead of truncating it to one line. */\n wrap?: boolean;\n /** Pin one application column to either inline edge during horizontal scrolling. */\n sticky?: TableColumnSticky;\n}",
26090
26169
  "docstring": "",
26091
26170
  "path": "src/wc/components/Table/table-types.ts"
26092
26171
  },
26093
26172
  "src/wc/components/Table/table-types.ts::TableRow": {
26094
- "declaration": "export interface TableRow {\n /** Stable identity, unique across all groups. */\n id: string;\n cells: Record<string, TableCellValue>;\n /** Accessible row name used by its selection control. Falls back to the first cell. */\n selectionLabel?: string;\n /** Exclude this row from selection without muting its content. */\n selectable?: boolean;\n /** Keep the row visible while disabling its selection control and styling it as inactive. */\n disabled?: boolean;\n}",
26173
+ "declaration": "export interface TableRow {\n /** Stable identity, unique across all groups. */\n id: string;\n cells: Record<string, TableCellValue>;\n /** Accessible row name used by its selection control. Falls back to the first cell. */\n selectionLabel?: string;\n /** Exclude this row from selection without muting its content. */\n selectable?: boolean;\n /** Keep the row visible while disabling its selection control and styling it as inactive. */\n disabled?: boolean;\n /** Make the complete row a keyboard- and pointer-activatable application target. */\n interactive?: boolean;\n}",
26095
26174
  "docstring": "",
26096
26175
  "path": "src/wc/components/Table/table-types.ts"
26097
26176
  },
@@ -26150,6 +26229,11 @@
26150
26229
  "docstring": "",
26151
26230
  "path": "src/wc/components/Table/table-types.ts"
26152
26231
  },
26232
+ "src/wc/components/Table/table-types.ts::TableRowActivateDetail": {
26233
+ "declaration": "export interface TableRowActivateDetail {\n rowId: string;\n}",
26234
+ "docstring": "",
26235
+ "path": "src/wc/components/Table/table-types.ts"
26236
+ },
26153
26237
  "src/wc/toast/index.ts::ToastManager": {
26154
26238
  "declaration": "any",
26155
26239
  "docstring": "",
@@ -17,6 +17,8 @@ export declare class ButtonFilled {
17
17
  variant: ButtonFilledVariant;
18
18
  /** Control density (height, padding, icon, type). */
19
19
  size: ButtonFilledSize;
20
+ /** Use reduced outer geometry when nested inside a control of the same size. */
21
+ isInset: boolean;
20
22
  /** Width fit — hug content (default) or fill the parent. */
21
23
  width: ButtonFilledWidth;
22
24
  /** Visible text for `label` / `icon-label` variants. */
@@ -63,6 +63,7 @@
63
63
  ],
64
64
  "states": [
65
65
  "Every size applies one complete control-density recipe across frame height, inline padding, icon zone, text-container inset, gap, and radius.",
66
+ "Set isInset only when the button is nested inside a same-size control; it reduces the outer geometry while preserving the size's icon, label inset, gap, radius, and typography.",
66
67
  "Use only one filled action per local decision area; render all secondary actions with ButtonUnfilled.",
67
68
  "Choose brand or neutral for general commands. Reserve positive, negative, warning, and caution for matching action consequences, and AI, guide, or walkthrough for actions that enter those feature experiences.",
68
69
  "Contrast serves both surface adaptation and hierarchy, but never permits a second filled action in the same decision area.",
@@ -194,6 +195,15 @@
194
195
  "mutable": false,
195
196
  "description": "Disables interaction."
196
197
  },
198
+ "isInset": {
199
+ "type": "boolean",
200
+ "resolvedType": "boolean",
201
+ "attribute": "is-inset",
202
+ "default": "false",
203
+ "required": false,
204
+ "mutable": false,
205
+ "description": "Use reduced outer geometry when nested inside a control of the same size."
206
+ },
197
207
  "isLoading": {
198
208
  "type": "boolean",
199
209
  "resolvedType": "boolean",
@@ -380,6 +390,15 @@
380
390
  "mutable": false,
381
391
  "description": "Disables interaction."
382
392
  },
393
+ "isInset": {
394
+ "type": "boolean",
395
+ "resolvedType": "boolean",
396
+ "attribute": "is-inset",
397
+ "default": "false",
398
+ "required": false,
399
+ "mutable": false,
400
+ "description": "Use reduced outer geometry when nested inside a control of the same size."
401
+ },
383
402
  "isLoading": {
384
403
  "type": "boolean",
385
404
  "resolvedType": "boolean",
@@ -517,7 +536,7 @@
517
536
  },
518
537
  {
519
538
  "path": "src/wc/components/ButtonFilled/ButtonFilled.tsx",
520
- "content": "import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass } from '../../utils';\nimport type { ChoiceBackground } from '../../utils/choice-list';\nimport { beginElevatedControlPress } from '../../utils/control-press';\nimport { renderButtonContent } from '../../utils/button-render';\nimport type {\n ButtonPopup,\n ButtonSize,\n ButtonVariant,\n ButtonWidth,\n} from '../../utils/button-types';\n\nexport type ButtonFilledIntent =\n | 'neutral'\n | 'brand'\n | 'ai'\n | 'negative'\n | 'warning'\n | 'caution'\n | 'positive'\n | 'guide'\n | 'walkthrough';\n\nexport type ButtonFilledContrast = 'bold' | 'strong' | 'medium' | 'faint';\n\nexport type ButtonFilledBackground = ChoiceBackground;\n\nexport type ButtonFilledVariant = ButtonVariant;\nexport type ButtonFilledSize = ButtonSize;\nexport type ButtonFilledWidth = ButtonWidth;\nexport type ButtonFilledPopup = ButtonPopup;\n\n@Component({\n tag: 'ds-button-filled',\n styleUrl: 'ButtonFilled.css',\n scoped: true,\n})\nexport class ButtonFilled {\n @Element() el!: HTMLElement;\n\n /**\n * Content layout. Default is label-only; pass `icon` for icon-only chrome\n * (nav / tool rails) or `icon-label` for leading icon + text.\n */\n @Prop() variant: ButtonFilledVariant = 'label';\n\n /** Control density (height, padding, icon, type). */\n @Prop() size: ButtonFilledSize = 'md';\n\n /** Width fit — hug content (default) or fill the parent. */\n @Prop() width: ButtonFilledWidth = 'hug';\n\n /** Visible text for `label` / `icon-label` variants. */\n @Prop() label: string = '';\n\n /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n @Prop() icon: string = '';\n\n /** Semantic colour intent. */\n @Prop() intent: ButtonFilledIntent = 'brand';\n\n /**\n * Background fill weight. Foreground uses the paired contrast token:\n * bold → faint, strong → medium, medium → strong, faint → bold.\n */\n @Prop() contrast: ButtonFilledContrast = 'bold';\n\n /** Show a 1px secondary inset border. */\n @Prop() hasBorder: boolean = false;\n\n /**\n * Actual parent surface context for the optional inset border color only.\n * Omit on primary and secondary surfaces.\n */\n @Prop() background: ButtonFilledBackground | undefined;\n\n /** Use the half-radius treatment instead of the default control radius. */\n @Prop() rounded: boolean = false;\n\n /**\n * Scale down during a physical pointer press.\n * Disable when an owning composite requires fixed child or background geometry.\n */\n @Prop() pressScale: boolean = true;\n\n /** Disables interaction. */\n @Prop() isInactive: boolean = false;\n\n /** Shows an inline loader and prevents interaction without applying inactive opacity. */\n @Prop() isLoading: boolean = false;\n\n /** Native button type. */\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n /** Accessible name override. Required for icon-only buttons. */\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n\n /** ID of the popup this button controls. */\n @Prop() controls: string | undefined;\n\n /**\n * Controlled open state of the popup this button triggers. Holds the pressed\n * wash for the popup's rendered lifecycle. ButtonFilled has no selected state,\n * so an open popup never promotes to an active treatment.\n */\n @Prop() expanded: boolean | undefined;\n\n /** Popup type exposed to assistive technology. */\n @Prop() haspopup: ButtonFilledPopup | undefined;\n\n /**\n * This action *has* a menu: implies `aria-haspopup=\"menu\"` and adds the trailing\n * chevron that carries the affordance.\n *\n * Only `label` and `icon-label` are supported. A filled button is never the\n * overflow / more-options control — that role belongs to ButtonUnfilled with an\n * `Ellipses` glyph, which conveys the menu without a chevron.\n *\n * Use `haspopup` directly for non-menu popups.\n */\n @Prop() hasMenu: boolean = false;\n\n @Event() dsClick!: EventEmitter<MouseEvent>;\n\n private buttonEl: HTMLButtonElement | null = null;\n\n @Method()\n async setFocus() {\n this.buttonEl?.focus();\n }\n\n private handleClick = (event: MouseEvent) => {\n if (this.isInactive || this.isLoading) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n this.dsClick.emit(event);\n };\n\n private get resolvedHaspopup(): ButtonFilledPopup | undefined {\n return this.haspopup ?? (this.hasMenu ? 'menu' : undefined);\n }\n\n private get accessibleName(): string | undefined {\n if (this.ariaLabel) return this.ariaLabel;\n if (this.isLoading && this.variant === 'label' && this.label) return this.label;\n return undefined;\n }\n\n render() {\n const cls: Record<string, boolean> = {\n 'button-filled': true,\n 'ds-button': true,\n 'ds-focus-ring-inset': true,\n 'ds-control-press-scale': this.pressScale,\n 'ds-interaction-fill': !this.isInactive,\n /* Bold is the default filled contrast — on-bold interaction tokens. */\n 'ds-interaction-fill--on-bold': this.contrast === 'bold',\n 'ds-interaction-fill--on-strong': this.contrast === 'strong',\n 'ds-interaction-fill--on-medium': this.contrast === 'medium',\n /* faint → default app interaction tokens (no --on-*). */\n 'button-filled--bordered': this.hasBorder,\n 'ds-button--bordered': this.hasBorder,\n 'button-filled--expanded': this.expanded === true && !this.isInactive,\n 'ds-button--expanded': this.expanded === true && !this.isInactive,\n 'ds-control-inactive': this.isInactive,\n 'ds-control--lg': this.size === 'lg',\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n 'ds-control-frame': true,\n 'button-filled--icon': this.variant === 'icon',\n 'ds-button--icon': this.variant === 'icon',\n 'button-filled--label': this.variant === 'label',\n 'button-filled--icon-label': this.variant === 'icon-label',\n 'button-filled--rounded': this.rounded,\n 'ds-button--rounded': this.rounded,\n [`button-filled--background-${this.background}`]: this.background !== undefined,\n [`button-filled--intent-${this.intent}`]: true,\n [`button-filled--contrast-${this.contrast}`]: true,\n };\n\n return (\n <Host\n class={{\n 'button-filled-host': true,\n 'button-filled-host--icon': this.variant === 'icon',\n 'ds-button-host--icon': this.variant === 'icon',\n 'ds-control--lg': this.size === 'lg',\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n ...controlWidthClass(this.width),\n }}\n tabIndex={-1}\n >\n <button\n ref={el => {\n this.buttonEl = el ?? null;\n }}\n type={this.type}\n class={cls}\n disabled={this.isInactive}\n aria-label={this.accessibleName}\n aria-busy={this.isLoading ? 'true' : undefined}\n aria-disabled={this.isLoading ? 'true' : undefined}\n aria-controls={this.controls}\n aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}\n aria-haspopup={this.resolvedHaspopup}\n onPointerDown={event =>\n beginElevatedControlPress(\n event,\n this.pressScale && !this.isInactive && !this.isLoading,\n )\n }\n onClick={this.handleClick}\n >\n {renderButtonContent({\n namespace: 'button-filled',\n variant: this.variant,\n size: this.size,\n label: this.label,\n icon: this.icon,\n hasMenu: this.hasMenu,\n isLoading: this.isLoading,\n })}\n </button>\n </Host>\n );\n }\n}\n",
539
+ "content": "import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass } from '../../utils';\nimport type { ChoiceBackground } from '../../utils/choice-list';\nimport { beginElevatedControlPress } from '../../utils/control-press';\nimport { renderButtonContent } from '../../utils/button-render';\nimport type {\n ButtonPopup,\n ButtonSize,\n ButtonVariant,\n ButtonWidth,\n} from '../../utils/button-types';\n\nexport type ButtonFilledIntent =\n | 'neutral'\n | 'brand'\n | 'ai'\n | 'negative'\n | 'warning'\n | 'caution'\n | 'positive'\n | 'guide'\n | 'walkthrough';\n\nexport type ButtonFilledContrast = 'bold' | 'strong' | 'medium' | 'faint';\n\nexport type ButtonFilledBackground = ChoiceBackground;\n\nexport type ButtonFilledVariant = ButtonVariant;\nexport type ButtonFilledSize = ButtonSize;\nexport type ButtonFilledWidth = ButtonWidth;\nexport type ButtonFilledPopup = ButtonPopup;\n\n@Component({\n tag: 'ds-button-filled',\n styleUrl: 'ButtonFilled.css',\n scoped: true,\n})\nexport class ButtonFilled {\n @Element() el!: HTMLElement;\n\n /**\n * Content layout. Default is label-only; pass `icon` for icon-only chrome\n * (nav / tool rails) or `icon-label` for leading icon + text.\n */\n @Prop() variant: ButtonFilledVariant = 'label';\n\n /** Control density (height, padding, icon, type). */\n @Prop() size: ButtonFilledSize = 'md';\n\n /** Use reduced outer geometry when nested inside a control of the same size. */\n @Prop() isInset: boolean = false;\n\n /** Width fit — hug content (default) or fill the parent. */\n @Prop() width: ButtonFilledWidth = 'hug';\n\n /** Visible text for `label` / `icon-label` variants. */\n @Prop() label: string = '';\n\n /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n @Prop() icon: string = '';\n\n /** Semantic colour intent. */\n @Prop() intent: ButtonFilledIntent = 'brand';\n\n /**\n * Background fill weight. Foreground uses the paired contrast token:\n * bold → faint, strong → medium, medium → strong, faint → bold.\n */\n @Prop() contrast: ButtonFilledContrast = 'bold';\n\n /** Show a 1px secondary inset border. */\n @Prop() hasBorder: boolean = false;\n\n /**\n * Actual parent surface context for the optional inset border color only.\n * Omit on primary and secondary surfaces.\n */\n @Prop() background: ButtonFilledBackground | undefined;\n\n /** Use the half-radius treatment instead of the default control radius. */\n @Prop() rounded: boolean = false;\n\n /**\n * Scale down during a physical pointer press.\n * Disable when an owning composite requires fixed child or background geometry.\n */\n @Prop() pressScale: boolean = true;\n\n /** Disables interaction. */\n @Prop() isInactive: boolean = false;\n\n /** Shows an inline loader and prevents interaction without applying inactive opacity. */\n @Prop() isLoading: boolean = false;\n\n /** Native button type. */\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n /** Accessible name override. Required for icon-only buttons. */\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n\n /** ID of the popup this button controls. */\n @Prop() controls: string | undefined;\n\n /**\n * Controlled open state of the popup this button triggers. Holds the pressed\n * wash for the popup's rendered lifecycle. ButtonFilled has no selected state,\n * so an open popup never promotes to an active treatment.\n */\n @Prop() expanded: boolean | undefined;\n\n /** Popup type exposed to assistive technology. */\n @Prop() haspopup: ButtonFilledPopup | undefined;\n\n /**\n * This action *has* a menu: implies `aria-haspopup=\"menu\"` and adds the trailing\n * chevron that carries the affordance.\n *\n * Only `label` and `icon-label` are supported. A filled button is never the\n * overflow / more-options control — that role belongs to ButtonUnfilled with an\n * `Ellipses` glyph, which conveys the menu without a chevron.\n *\n * Use `haspopup` directly for non-menu popups.\n */\n @Prop() hasMenu: boolean = false;\n\n @Event() dsClick!: EventEmitter<MouseEvent>;\n\n private buttonEl: HTMLButtonElement | null = null;\n\n @Method()\n async setFocus() {\n this.buttonEl?.focus();\n }\n\n private handleClick = (event: MouseEvent) => {\n if (this.isInactive || this.isLoading) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n this.dsClick.emit(event);\n };\n\n private get resolvedHaspopup(): ButtonFilledPopup | undefined {\n return this.haspopup ?? (this.hasMenu ? 'menu' : undefined);\n }\n\n private get accessibleName(): string | undefined {\n if (this.ariaLabel) return this.ariaLabel;\n if (this.isLoading && this.variant === 'label' && this.label) return this.label;\n return undefined;\n }\n\n render() {\n const cls: Record<string, boolean> = {\n 'button-filled': true,\n 'ds-button': true,\n 'ds-focus-ring-inset': true,\n 'ds-control-press-scale': this.pressScale,\n 'ds-interaction-fill': !this.isInactive,\n /* Bold is the default filled contrast — on-bold interaction tokens. */\n 'ds-interaction-fill--on-bold': this.contrast === 'bold',\n 'ds-interaction-fill--on-strong': this.contrast === 'strong',\n 'ds-interaction-fill--on-medium': this.contrast === 'medium',\n /* faint → default app interaction tokens (no --on-*). */\n 'button-filled--bordered': this.hasBorder,\n 'ds-button--bordered': this.hasBorder,\n 'button-filled--expanded': this.expanded === true && !this.isInactive,\n 'ds-button--expanded': this.expanded === true && !this.isInactive,\n 'ds-control-inactive': this.isInactive,\n 'ds-control--lg': this.size === 'lg',\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n 'ds-control--inset': this.isInset,\n 'ds-control-frame': true,\n 'button-filled--icon': this.variant === 'icon',\n 'ds-button--icon': this.variant === 'icon',\n 'button-filled--label': this.variant === 'label',\n 'button-filled--icon-label': this.variant === 'icon-label',\n 'button-filled--rounded': this.rounded,\n 'ds-button--rounded': this.rounded,\n [`button-filled--background-${this.background}`]: this.background !== undefined,\n [`button-filled--intent-${this.intent}`]: true,\n [`button-filled--contrast-${this.contrast}`]: true,\n };\n\n return (\n <Host\n class={{\n 'button-filled-host': true,\n 'button-filled-host--icon': this.variant === 'icon',\n 'ds-button-host--icon': this.variant === 'icon',\n 'ds-control--lg': this.size === 'lg',\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n 'ds-control--inset': this.isInset,\n ...controlWidthClass(this.width),\n }}\n tabIndex={-1}\n >\n <button\n ref={el => {\n this.buttonEl = el ?? null;\n }}\n type={this.type}\n class={cls}\n disabled={this.isInactive}\n aria-label={this.accessibleName}\n aria-busy={this.isLoading ? 'true' : undefined}\n aria-disabled={this.isLoading ? 'true' : undefined}\n aria-controls={this.controls}\n aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}\n aria-haspopup={this.resolvedHaspopup}\n onPointerDown={event =>\n beginElevatedControlPress(\n event,\n this.pressScale && !this.isInactive && !this.isLoading,\n )\n }\n onClick={this.handleClick}\n >\n {renderButtonContent({\n namespace: 'button-filled',\n variant: this.variant,\n size: this.size,\n label: this.label,\n icon: this.icon,\n hasMenu: this.hasMenu,\n isLoading: this.isLoading,\n })}\n </button>\n </Host>\n );\n }\n}\n",
521
540
  "type": "registry:ui"
522
541
  }
523
542
  ]