@kerfjs/ui 5.0.0-beta.76 → 5.0.0-beta.78

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 (147) hide show
  1. package/README.md +15 -0
  2. package/ai/application-ui-diagnostic-ids-v1.json +3 -0
  3. package/ai/component-catalog.json +333 -28
  4. package/ai/component-composition.json +224 -17
  5. package/ai/components/nav-stack.md +4 -3
  6. package/ai/components/select.md +1 -0
  7. package/ai/components/split-view.md +1 -0
  8. package/ai/components/surface-scaffold.md +11 -2
  9. package/ai/components/text.md +4 -2
  10. package/ai/components/toolbar-control-group.md +22 -3
  11. package/ai/components/toolbar-text.md +21 -4
  12. package/ai/components/toolbar.md +12 -4
  13. package/ai/public-api-signatures-v1.md +99 -127
  14. package/ai/skill.md +37 -3
  15. package/ai/webawesome-jsx-signatures-v1.md +1 -1
  16. package/dist/browser/nav-stack.js +2 -0
  17. package/dist/browser/split-view.js +2 -0
  18. package/dist/catalog-resources.d.ts +3 -3
  19. package/dist/catalog.d.ts +3 -3
  20. package/dist/catalog.js +6 -6
  21. package/dist/chunk-2GOCOLQL.js +270 -0
  22. package/dist/chunk-2GOCOLQL.js.map +1 -0
  23. package/dist/{chunk-ZVYA6TLR.js → chunk-4Y4L5YEI.js} +3 -1
  24. package/dist/chunk-4Y4L5YEI.js.map +1 -0
  25. package/dist/{chunk-XIZRXI7N.js → chunk-A7DYEERU.js} +13 -1
  26. package/dist/chunk-A7DYEERU.js.map +1 -0
  27. package/dist/{chunk-7QWIJEK5.js → chunk-DSLRNR43.js} +9 -8
  28. package/dist/chunk-DSLRNR43.js.map +1 -0
  29. package/dist/{chunk-AOAW55JN.js → chunk-DXQZ3BEO.js} +4 -1
  30. package/dist/chunk-DXQZ3BEO.js.map +1 -0
  31. package/dist/chunk-IKCUPTR2.js +170 -0
  32. package/dist/chunk-IKCUPTR2.js.map +1 -0
  33. package/dist/{chunk-HGSTMZZ6.js → chunk-JL4BBZP4.js} +5 -4
  34. package/dist/chunk-JL4BBZP4.js.map +1 -0
  35. package/dist/{chunk-IVLTEBBT.js → chunk-M6BWQMQY.js} +2 -2
  36. package/dist/{chunk-IVLTEBBT.js.map → chunk-M6BWQMQY.js.map} +1 -1
  37. package/dist/{chunk-72LLWYP2.js → chunk-NVKRZ5DI.js} +1 -1
  38. package/dist/chunk-NVKRZ5DI.js.map +1 -0
  39. package/dist/{chunk-GO2CZX4M.js → chunk-RRCD3A6G.js} +13 -5
  40. package/dist/chunk-RRCD3A6G.js.map +1 -0
  41. package/dist/{chunk-5PAVAR4B.js → chunk-VHXHLZ6R.js} +10 -1
  42. package/dist/chunk-VHXHLZ6R.js.map +1 -0
  43. package/dist/collapsible-panel.js +2 -2
  44. package/dist/index.d.ts +4 -3
  45. package/dist/index.js +9 -8
  46. package/dist/list-header.d.ts +1 -0
  47. package/dist/list-header.js +1 -1
  48. package/dist/nav-stack-B1Qc2e5q.d.ts +101 -0
  49. package/dist/nav-stack.d.ts +12 -93
  50. package/dist/nav-stack.js +5 -1
  51. package/dist/pane.d.ts +5 -2
  52. package/dist/pane.js +1 -1
  53. package/dist/select-register.js +3 -0
  54. package/dist/select-register.js.map +1 -1
  55. package/dist/select.d.ts +1 -0
  56. package/dist/select.js +1 -1
  57. package/dist/split-view.d.ts +9 -4
  58. package/dist/split-view.js +7 -3
  59. package/dist/split-view.js.map +1 -1
  60. package/dist/styles/components/actions/toolbar/toolbar.css +32 -0
  61. package/dist/styles/components/actions/toolbar-control-group/toolbar-control-group.css +105 -7
  62. package/dist/styles/components/actions/toolbar-text/toolbar-text.css +17 -0
  63. package/dist/styles/components/layout/pane/pane.css +7 -0
  64. package/dist/styles/components/navigation/nav-stack/nav-stack.css +17 -12
  65. package/dist/styles/components/navigation/tab-scaffold/tab-scaffold.css +17 -0
  66. package/dist/styles/components/surfaces/surface-scaffold/surface-scaffold.css +55 -0
  67. package/dist/styles/components/typography/text/text.css +19 -0
  68. package/dist/styles/nav-stack.css +17 -12
  69. package/dist/styles/pane.css +7 -0
  70. package/dist/styles/surface-scaffold.css +55 -0
  71. package/dist/styles/tab-scaffold.css +17 -0
  72. package/dist/styles/text.css +19 -0
  73. package/dist/styles/toolbar-control-group.css +105 -7
  74. package/dist/styles/toolbar-text.css +17 -0
  75. package/dist/styles/toolbar.css +32 -0
  76. package/dist/surface-scaffold-register.d.ts +4 -0
  77. package/dist/surface-scaffold-register.js +59 -0
  78. package/dist/surface-scaffold-register.js.map +1 -0
  79. package/dist/surface-scaffold.d.ts +10 -2
  80. package/dist/surface-scaffold.js +1 -1
  81. package/dist/tab-scaffold.d.ts +2 -0
  82. package/dist/tab-scaffold.js +1 -0
  83. package/dist/tab-scaffold.js.map +1 -1
  84. package/dist/text.d.ts +5 -2
  85. package/dist/text.js +1 -1
  86. package/dist/toolbar-control-group.d.ts +14 -2
  87. package/dist/toolbar-control-group.js +1 -1
  88. package/dist/toolbar-text.d.ts +10 -2
  89. package/dist/toolbar-text.js +1 -1
  90. package/dist/wire-nav-stack.js +58 -22
  91. package/dist/wire-nav-stack.js.map +1 -1
  92. package/dist/wire-toolbar-visibility.d.ts +13 -0
  93. package/dist/wire-toolbar-visibility.js +3 -0
  94. package/dist/wire-toolbar-visibility.js.map +1 -0
  95. package/dist/workbench.d.ts +5 -13
  96. package/dist/workbench.js +1 -1
  97. package/docs/accessibility.md +15 -0
  98. package/docs/collapsible-panel.md +4 -0
  99. package/docs/component-contract.md +38 -0
  100. package/docs/component-selection.md +56 -2
  101. package/docs/design/templates/toolbar/width-visibility-320-dark.svg +1 -0
  102. package/docs/design/templates/toolbar/width-visibility-320.svg +1 -0
  103. package/docs/design/templates/toolbar/width-visibility-600-dark.svg +1 -0
  104. package/docs/design/templates/toolbar/width-visibility-600.svg +1 -0
  105. package/docs/design/templates/toolbar-control-group/icon-tile-brand-dark.svg +1 -0
  106. package/docs/design/templates/toolbar-control-group/icon-tile-brand.svg +1 -0
  107. package/docs/design/templates/toolbar-control-group/icon-tile-danger-dark.svg +1 -0
  108. package/docs/design/templates/toolbar-control-group/icon-tile-danger.svg +1 -0
  109. package/docs/design/templates/toolbar-control-group/icon-tile-neutral-dark.svg +1 -0
  110. package/docs/design/templates/toolbar-control-group/icon-tile-neutral.svg +1 -0
  111. package/docs/design/templates/toolbar-control-group/icon-tile-success-dark.svg +1 -0
  112. package/docs/design/templates/toolbar-control-group/icon-tile-success.svg +1 -0
  113. package/docs/design/templates/toolbar-control-group/icon-tile-warning-dark.svg +1 -0
  114. package/docs/design/templates/toolbar-control-group/icon-tile-warning.svg +1 -0
  115. package/docs/design/templates/toolbar-control-group-dark.svg +1 -1
  116. package/docs/design/templates/toolbar-control-group.svg +1 -1
  117. package/docs/design/templates/toolbar-dark.svg +1 -1
  118. package/docs/design/templates/toolbar-text/dark-tone-dark.svg +1 -0
  119. package/docs/design/templates/toolbar-text/dark-tone.svg +1 -0
  120. package/docs/design/templates/toolbar-text-dark.svg +1 -1
  121. package/docs/design/templates/toolbar-text.svg +1 -1
  122. package/docs/design/templates/toolbar.svg +1 -1
  123. package/docs/design/templates.md +2 -0
  124. package/docs/layout.md +32 -1
  125. package/docs/nav-stack.md +35 -19
  126. package/docs/recipes.md +5 -1
  127. package/docs/split-view.md +7 -4
  128. package/docs/surface-scaffold.md +46 -0
  129. package/docs/tab-scaffold.md +57 -0
  130. package/docs/ui-doctor.md +23 -0
  131. package/docs/workbench.md +3 -2
  132. package/doctor/component-style-checks.mjs +224 -0
  133. package/doctor/index.mjs +42 -13
  134. package/llms.txt +34 -0
  135. package/package.json +11 -2
  136. package/ux-demo/recipes/list-detail-dialog.tsx +4 -0
  137. package/ux-demo/recipes/navigation-stack.tsx +2 -2
  138. package/dist/chunk-5PAVAR4B.js.map +0 -1
  139. package/dist/chunk-72LLWYP2.js.map +0 -1
  140. package/dist/chunk-7QWIJEK5.js.map +0 -1
  141. package/dist/chunk-AOAW55JN.js.map +0 -1
  142. package/dist/chunk-GO2CZX4M.js.map +0 -1
  143. package/dist/chunk-HGSTMZZ6.js.map +0 -1
  144. package/dist/chunk-SJY7KC45.js +0 -123
  145. package/dist/chunk-SJY7KC45.js.map +0 -1
  146. package/dist/chunk-XIZRXI7N.js.map +0 -1
  147. package/dist/chunk-ZVYA6TLR.js.map +0 -1
package/dist/pane.d.ts CHANGED
@@ -23,6 +23,7 @@ type PaneRootAttributes = Readonly<Record<`data-${string}`, string | undefined>
23
23
  'data-chrome-placement'?: never;
24
24
  'data-chrome-dividers'?: never;
25
25
  'data-appearance'?: never;
26
+ 'data-deep-inset'?: never;
26
27
  }>;
27
28
  /** How a Pane's header and footer relate to its scrolling content. */
28
29
  type PaneChromePlacement = 'fixed' | 'auto';
@@ -62,6 +63,8 @@ interface PaneProps {
62
63
  chromeDividers?: PaneChromeDividers;
63
64
  /** Paint the scrolling work surface with the shared lowered-surface color. */
64
65
  appearance?: PaneAppearance;
66
+ /** Add an extra 8px inline gutter to scrolling content (default: false). */
67
+ deepInset?: boolean;
65
68
  /** Root semantics. Defaults to `div`. */
66
69
  element?: PaneElement;
67
70
  /** Scrolling content semantics. Defaults to `div`. */
@@ -96,13 +99,13 @@ interface PaneProps {
96
99
  * or a CollapsiblePanel) forwards, so the app configures that pane instead of
97
100
  * styling it. An omitted or `undefined` field keeps the composite's default.
98
101
  */
99
- type PaneConfig = Pick<PaneProps, 'contentElement' | 'contentLabel' | 'separators' | 'safeAreaEdges' | 'chromeDividers' | 'appearance'>;
102
+ type PaneConfig = Pick<PaneProps, 'contentElement' | 'contentLabel' | 'separators' | 'safeAreaEdges' | 'chromeDividers' | 'appearance' | 'deepInset'>;
100
103
  /**
101
104
  * An unpadded application column with optional fixed header/footer slots and one
102
105
  * scrolling vertical content owner. Separator lines are independently opt-in on
103
106
  * each logical edge, so the same component works as a sidebar, main area,
104
107
  * inspector, or dialog column.
105
108
  */
106
- declare function Pane({ header, children, footer, chromePlacement, chromeDividers, appearance, element, contentElement, separators, safeAreaEdges, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, slot, }: PaneProps): kerfjs.SafeHtml;
109
+ declare function Pane({ header, children, footer, chromePlacement, chromeDividers, appearance, deepInset, element, contentElement, separators, safeAreaEdges, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, slot, }: PaneProps): kerfjs.SafeHtml;
107
110
 
108
111
  export { Pane, type PaneAppearance, type PaneChromeDividers, type PaneChromePlacement, type PaneConfig, type PaneContentElement, type PaneElement, type PaneProps, type PaneSeparatorSide };
package/dist/pane.js CHANGED
@@ -1,4 +1,4 @@
1
- export { Pane } from './chunk-AOAW55JN.js';
1
+ export { Pane } from './chunk-DXQZ3BEO.js';
2
2
 
3
3
 
4
4
  //# sourceMappingURL=pane.js.map
@@ -128,6 +128,9 @@ function installSelectLifecycle(prototype) {
128
128
  if (opening) {
129
129
  host.addOpenListeners();
130
130
  host.listbox.hidden = false;
131
+ host.popup.sync = host.classList.contains("kui-select--fit-menu") ? "width" : void 0;
132
+ host.popup.autoSize = "both";
133
+ host.popup.shiftPadding = 10;
131
134
  host.popup.active = true;
132
135
  window.requestAnimationFrame(() => {
133
136
  if (current()) host.setCurrentOption(host.currentOption);
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/forms/select/internal/install-select-actions.ts","../src/components/forms/select/internal/animate-select-popup.ts","../src/components/forms/select/internal/install-select-lifecycle.ts","../src/components/forms/select/internal/install-select-multiple.ts","../src/components/forms/select/register/select-register.ts"],"names":["option"],"mappings":";;;;;;;;;;;;;;AAkBO,SAAS,eAAA,CACd,MACA,MAAA,EACS;AACT,EAAA,IAAI,IAAA,CAAK,QAAA,IAAY,CAAC,IAAA,CAAK,UAAU,OAAO,KAAA;AAC5C,EAAA,MAAM,OAAA,GAAU,KAAK,aAAA,EAAc,CAAE,OAAO,CAAC,MAAA,KAAW,CAAC,MAAA,CAAO,QAAQ,CAAA;AACxE,EAAA,MAAM,IAAA,GAAO,MAAA,KAAW,KAAA,GAAQ,OAAA,GAAU,EAAC;AAC3C,EAAA,MAAM,UAAU,IAAA,CAAK,eAAA;AACrB,EAAA,IACE,OAAA,CAAQ,MAAA,KAAW,IAAA,CAAK,MAAA,IACxB,OAAA,CAAQ,KAAA,CAAM,CAAC,MAAA,KAAW,IAAA,CAAK,QAAA,CAAS,MAAM,CAAC,CAAA;AAE/C,IAAA,OAAO,KAAA;AACT,EAAA,IAAA,CAAK,aAAA,GAAgB,IAAA;AACrB,EAAA,IAAA,CAAK,eAAA,GAAkB,IAAA;AACvB,EAAA,IAAA,CAAK,mBAAmB,IAAI,CAAA;AAC5B,EAAA,KAAK,IAAA,CAAK,cAAA,CAAe,IAAA,CAAK,MAAM;AAClC,IAAA,IAAA,CAAK,aAAA;AAAA,MACH,IAAI,WAAW,OAAA,EAAS,EAAE,SAAS,IAAA,EAAM,QAAA,EAAU,MAAM;AAAA,KAC3D;AACA,IAAA,IAAA,CAAK,aAAA,CAAc,IAAI,KAAA,CAAM,QAAA,EAAU,EAAE,SAAS,IAAA,EAAM,QAAA,EAAU,IAAA,EAAM,CAAC,CAAA;AAAA,EAC3E,CAAC,CAAA;AACD,EAAA,OAAO,IAAA;AACT;AAEA,IAAM,kBAAA,uBAAyB,OAAA,EAAkB;AAG1C,SAAS,oBAAA,CAAqB,MAAgB,QAAA,EAAgB;AACnE,EAAA,IAAI,kBAAA,CAAmB,GAAA,CAAI,GAAG,CAAA,EAAG;AACjC,EAAA,kBAAA,CAAmB,IAAI,GAAG,CAAA;AAI1B,EAAA,GAAA,CAAI,gBAAA,CAAiB,SAAA,EAAW,CAAC,KAAA,KAAU;AACzC,IAAA,IAAI,KAAA,CAAM,GAAA,KAAQ,QAAA,IAAY,KAAA,CAAM,QAAQ,KAAA,EAAO;AACnD,IAAA,IAAI,EAAE,KAAA,CAAM,MAAA,YAAkB,OAAA,CAAA,EAAU;AACxC,IAAA,MAAM,MAAA,GAAS,KAAA,CAAM,MAAA,CAAO,OAAA,CAAQ,4BAA4B,CAAA;AAChE,IAAA,IAAI,MAAA,EAAQ,QAAQ,oCAAoC,CAAA;AACtD,MAAA,KAAA,CAAM,wBAAA,EAAyB;AAAA,EACnC,CAAC,CAAA;AACD,EAAA,GAAA,CAAI,gBAAA,CAAiB,OAAA,EAAS,CAAC,KAAA,KAAU;AACvC,IAAA,IAAI,EAAE,KAAA,CAAM,MAAA,YAAkB,OAAA,CAAA,EAAU;AACxC,IAAA,MAAM,MAAA,GAAS,MAAM,MAAA,CAAO,OAAA;AAAA,MAC1B;AAAA,KACF;AACA,IAAA,IAAI,CAAC,MAAA,IAAU,MAAA,CAAO,YAAA,CAAa,UAAU,CAAA,EAAG;AAChD,IAAA,MAAM,OAAO,MAAA,CAAO,OAAA;AAAA,MAClB;AAAA,KACF;AACA,IAAA,IAAI,CAAC,IAAA,EAAM;AACX,IAAA,MAAM,MAAA,GAAS,OAAO,OAAA,CAAQ,YAAA;AAC9B,IAAA,IAAI,WAAW,KAAA,IAAS,MAAA,KAAW,OAAA,EAAS,eAAA,CAAgB,MAAM,MAAM,CAAA;AAAA,EAC1E,CAAC,CAAA;AACH;;;ACvEO,SAAS,kBAAA,CACd,KAAA,EACA,KAAA,EACA,MAAA,EACe;AACf,EAAA,OAAO,IAAI,OAAA,CAAQ,CAAC,OAAA,KAAY;AAC9B,IAAA,IAAI,OAAA,GAAU,KAAA;AACd,IAAA,IAAI,KAAA,GAAQ,CAAA;AACZ,IAAA,MAAM,SAAS,MAAM;AACnB,MAAA,IAAI,OAAA,EAAS;AACb,MAAA,OAAA,GAAU,IAAA;AACV,MAAA,MAAA,CAAO,qBAAqB,KAAK,CAAA;AACjC,MAAA,MAAA,CAAO,mBAAA,CAAoB,SAAS,MAAM,CAAA;AAC1C,MAAA,KAAA,CAAM,SAAA,CAAU,OAAO,KAAK,CAAA;AAC5B,MAAA,OAAA,EAAQ;AAAA,IACV,CAAA;AACA,IAAA,MAAA,CAAO,iBAAiB,OAAA,EAAS,MAAA,EAAQ,EAAE,IAAA,EAAM,MAAM,CAAA;AACvD,IAAA,KAAA,CAAM,SAAA,CAAU,IAAI,KAAK,CAAA;AAGzB,IAAA,KAAA,GAAQ,MAAA,CAAO,sBAAsB,MAAM;AAGzC,MAAA,KAAK,OAAA,CAAQ,GAAA;AAAA,QACX,KAAA,CACG,aAAA,EAAc,CACd,GAAA,CAAI,CAAC,SAAA,KAAc,SAAA,CAAU,QAAA,CAAS,KAAA,CAAM,MAAM,MAAS,CAAC;AAAA,OACjE,CAAE,KAAK,MAAM,CAAA;AAAA,IACf,CAAC,CAAA;AACD,IAAA,IAAI,MAAA,CAAO,SAAS,MAAA,EAAO;AAAA,EAC7B,CAAC,CAAA;AACH;;;ACAO,SAAS,uBACd,SAAA,EACM;AACN,EAAA,MAAM,SAAA,mBAAY,MAAA,CAAO,GAAA,CAAI,6BAA6B,CAAA;AAC1D,EAAA,IAAI,OAAO,SAAA,CAAU,cAAA,CAAe,IAAA,CAAK,SAAA,EAAW,SAAS,CAAA,EAAG;AAChE,EAAA,MAAA,CAAO,eAAe,SAAA,EAAW,SAAA,EAAW,EAAE,KAAA,EAAO,MAAM,CAAA;AAC3D,EAAA,MAAM,WAAW,SAAA,CAAU,gBAAA;AAC3B,EAAA,MAAM,mBAAmB,SAAA,CAAU,oBAAA;AACnC,EAAA,SAAA,CAAU,uBAAuB,WAAY;AAC3C,IAAA,MAAM,IAAA,GAAO,IAAA;AACb,IAAA,MAAM,UAAU,IAAA,CAAK,IAAA;AACrB,IAAA,gBAAA,CAAiB,KAAK,IAAI,CAAA;AAG1B,IAAA,IAAI,KAAK,OAAA,CAAQ,SAAA,KAAc,YAAY,OAAA,IAAW,CAAC,KAAK,IAAA,EAAM;AAChE,MAAA,KAAK,KAAK,gBAAA,EAAiB;AAAA,IAC7B;AAAA,EACF,CAAA;AACA,EAAA,MAAM,WAAA,uBAAkB,OAAA,EAAqC;AAC7D,EAAA,MAAM,YAAA,uBAAmB,OAAA,EAAuC;AAChE,EAAA,SAAA,CAAU,mBAAmB,iBAAkB;AAC7C,IAAA,MAAM,IAAA,GAAO,IAAA;AACb,IAAA,IAAI,KAAK,OAAA,CAAQ,SAAA,KAAc,UAAU,OAAO,QAAA,CAAS,KAAK,IAAI,CAAA;AAClE,IAAA,MAAM,YAAY,YAAA,CAAa,GAAA,CAAI,IAAI,CAAA,EAAG,SAAS,IAAA,CAAK,IAAA;AACxD,IAAA,YAAA,CAAa,OAAO,IAAI,CAAA;AACxB,IAAA,IAAI,SAAA,EAAW;AACf,IAAA,MAAM,UAAA,GAAa,IAAI,eAAA,EAAgB;AACvC,IAAA,MAAM,OAAA,GAAU,IAAA,CAAK,IAAA,IAAQ,CAAC,IAAA,CAAK,QAAA;AACnC,IAAA,MAAM,OAAA,GAAU,MACd,CAAC,UAAA,CAAW,MAAA,CAAO,OAAA,IACnB,IAAA,CAAK,WAAA,IAAA,CACJ,IAAA,CAAK,IAAA,IAAQ,CAAC,IAAA,CAAK,QAAA,MAAc,OAAA;AACpC,IAAA,IAAI;AACF,MAAA,IAAI,CAAC,KAAK,WAAA,EAAa;AACvB,MAAA,IAAI,OAAA,EAAS;AACX,QAAA,IAAA,CAAK,iBAAiB,IAAA,CAAK,eAAA,CAAgB,CAAC,CAAA,IAAK,IAAA,CAAK,gBAAgB,CAAA;AAAA,MACxE;AACA,MAAA,MAAM,QAAQ,OAAA,GAAU,IAAI,WAAA,EAAY,GAAI,IAAI,WAAA,EAAY;AAC5D,MAAA,IAAA,CAAK,cAAc,KAAK,CAAA;AACxB,MAAA,IAAI,MAAM,gBAAA,EAAkB;AAG1B,QAAA,IAAA,CAAK,OAAO,CAAC,OAAA;AACb,QAAA,MAAM,WAAA,GAAc,EAAE,IAAA,EAAM,IAAA,CAAK,IAAA,EAAK;AACtC,QAAA,YAAA,CAAa,GAAA,CAAI,MAAM,WAAW,CAAA;AAClC,QAAA,KAAK,IAAA,CAAK,cAAA,CAAe,IAAA,CAAK,MAAM;AAClC,UAAA,IAAI,aAAa,GAAA,CAAI,IAAI,MAAM,WAAA,EAAa,YAAA,CAAa,OAAO,IAAI,CAAA;AAAA,QACtE,CAAC,CAAA;AACD,QAAA;AAAA,MACF;AAEA,MAAA,IAAI,CAAC,SAAQ,EAAG;AAEhB,MAAA,WAAA,CAAY,GAAA,CAAI,IAAI,CAAA,EAAG,KAAA,EAAM;AAC7B,MAAA,WAAA,CAAY,GAAA,CAAI,MAAM,UAAU,CAAA;AAChC,MAAA,IAAI,OAAA,EAAS;AACX,QAAA,IAAA,CAAK,gBAAA,EAAiB;AACtB,QAAA,IAAA,CAAK,QAAQ,MAAA,GAAS,KAAA;AACtB,QAAA,IAAA,CAAK,MAAM,MAAA,GAAS,IAAA;AACpB,QAAA,MAAA,CAAO,sBAAsB,MAAM;AACjC,UAAA,IAAI,OAAA,EAAQ,EAAG,IAAA,CAAK,gBAAA,CAAiB,KAAK,aAAa,CAAA;AAAA,QACzD,CAAC,CAAA;AAAA,MACH,CAAA,MAAO;AACL,QAAA,IAAA,CAAK,mBAAA,EAAoB;AAAA,MAC3B;AACA,MAAA,MAAM,kBAAA;AAAA,QACJ,KAAK,KAAA,CAAM,KAAA;AAAA,QACX,UAAU,MAAA,GAAS,MAAA;AAAA,QACnB,UAAA,CAAW;AAAA,OACb;AACA,MAAA,IAAI,CAAC,UAAA,CAAW,MAAA,CAAO,OAAA,IAAW,CAAC,KAAK,WAAA,EAAa;AACnD,QAAA,IAAA,CAAK,mBAAA,EAAoB;AACzB,QAAA,IAAA,CAAK,QAAQ,MAAA,GAAS,IAAA;AACtB,QAAA,IAAA,CAAK,MAAM,MAAA,GAAS,KAAA;AAAA,MACtB;AACA,MAAA,IAAI,CAAC,SAAQ,EAAG;AAChB,MAAA,IAAI,OAAA,EAAS;AAGX,QAAA,MAAM,SAAS,IAAA,CAAK,aAAA;AACpB,QAAA,IAAI,MAAA,EAAQ;AACV,UAAA,MAAM,OAAO,IAAA,CAAK,OAAA;AAClB,UAAA,MAAM,SAAS,IAAA,CAAK,KAAA;AAAA,YAClB,OAAO,qBAAA,EAAsB,CAAE,GAAA,GAC7B,IAAA,CAAK,uBAAsB,CAAE;AAAA,WACjC;AACA,UAAA,IAAI,MAAA,GAAS,CAAA;AACX,YAAA,IAAA,CAAK,QAAA,CAAS,EAAE,GAAA,EAAK,IAAA,CAAK,YAAY,MAAA,EAAQ,QAAA,EAAU,QAAQ,CAAA;AAAA,eAAA,IACzD,MAAA,GAAS,MAAA,CAAO,YAAA,GAAe,IAAA,CAAK,YAAA,EAAc;AACzD,YAAA,IAAA,CAAK,QAAA,CAAS;AAAA,cACZ,KACE,IAAA,CAAK,SAAA,GACL,MAAA,GACA,IAAA,CAAK,eACL,MAAA,CAAO,YAAA;AAAA,cACT,QAAA,EAAU;AAAA,aACX,CAAA;AAAA,UACH;AAAA,QACF;AACA,QAAA,IAAA,CAAK,aAAA,CAAc,IAAI,gBAAA,EAAkB,CAAA;AAAA,MAC3C,CAAA,MAAO;AACL,QAAA,IAAA,CAAK,QAAQ,MAAA,GAAS,IAAA;AACtB,QAAA,IAAA,CAAK,MAAM,MAAA,GAAS,KAAA;AACpB,QAAA,IAAA,CAAK,aAAA,CAAc,IAAI,gBAAA,EAAkB,CAAA;AAAA,MAC3C;AAAA,IACF,CAAA,SAAE;AACA,MAAA,IAAI,YAAY,GAAA,CAAI,IAAI,MAAM,UAAA,EAAY,WAAA,CAAY,OAAO,IAAI,CAAA;AAAA,IACnE;AAAA,EACF,CAAA;AACF;;;ACxGA,SAAS,aAAa,IAAA,EAAkD;AACtE,EAAA,OACE,gBAAgB,WAAA,IAChB,IAAA,CAAK,OAAA,CAAQ,SAAA,KAAc,YAC1B,IAAA,CAA4B,QAAA;AAEjC;AAEA,SAAS,WAAW,IAAA,EAAuC;AACzD,EAAA,MAAM,IAAA,GAAO,IAAA,CAAK,OAAA,CAAqB,QAAQ,CAAA,EAAG,IAAA;AAClD,EAAA,OAAO,IAAA,IAAQ,MAAA;AACjB;AAGA,SAAS,kBAAA,CACP,QACA,MAAA,EACQ;AACR,EAAA,IAAI,MAAA,CAAO,MAAA,KAAW,CAAA,EAAG,OAAO,EAAA;AAChC,EAAA,IAAI;AACF,IAAA,OAAO,IAAI,IAAA,CAAK,UAAA,CAAW,MAAA,EAAQ;AAAA,MACjC,IAAA,EAAM,MAAA;AAAA,MACN,KAAA,EAAO;AAAA,KACR,CAAA,CAAE,MAAA,CAAO,MAAM,CAAA;AAAA,EAClB,CAAA,CAAA,MAAQ;AACN,IAAA,OAAO,MAAA,CAAO,KAAK,IAAI,CAAA;AAAA,EACzB;AACF;AAGO,SAAS,qBAAA,CACd,iBACA,eAAA,EACM;AACN,EAAA,MAAM,SAAA,mBAAY,MAAA,CAAO,GAAA,CAAI,4BAA4B,CAAA;AACzD,EAAA,IAAI,OAAO,SAAA,CAAU,cAAA,CAAe,IAAA,CAAK,eAAA,EAAiB,SAAS,CAAA,EAAG;AACtE,EAAA,MAAA,CAAO,eAAe,eAAA,EAAiB,SAAA,EAAW,EAAE,KAAA,EAAO,MAAM,CAAA;AAEjE,EAAA,MAAM,MAAA,GAAS,eAAA;AACf,EAAA,MAAM,mBAAmB,MAAA,CAAO,gBAAA;AAChC,EAAA,MAAA,CAAO,mBAAmB,WAAY;AACpC,IAAA,gBAAA,CAAiB,KAAK,IAAI,CAAA;AAC1B,IAAA,IAAI,CAAC,YAAA,CAAa,IAAI,CAAA,EAAG;AACzB,IAAA,MAAM,MAAA,GAAS,IAAI,GAAA,CAAI,IAAA,CAAK,eAAe,CAAA;AAC3C,IAAA,MAAM,OAAA,GAAU,kBAAA;AAAA,MACd,IAAA,CAAK,aAAA,EAAc,CAChB,MAAA,CAAO,CAACA,OAAAA,KAAW,MAAA,CAAO,GAAA,CAAIA,OAAM,CAAC,CAAA,CACrC,GAAA,CAAI,CAACA,OAAAA,KAAWA,QAAO,KAAK,CAAA;AAAA,MAC/B,WAAW,IAAI;AAAA,KACjB;AACA,IAAA,MAAM,cAAc,IAAA,CAAK,aAAA;AAAA,MACvB;AAAA,KACF;AACA,IAAA,IAAI,IAAA,CAAK,OAAA,CAAQ,oBAAA,KAAyB,WAAA,IAAe,WAAA,EAAa;AAGpE,MAAA,WAAA,CAAY,WAAA,GAAc,OAAA,GAAU,CAAA,EAAA,EAAK,OAAO,CAAA,CAAA,GAAK,EAAA;AACrD,MAAA,IAAA,CAAK,YAAA,GAAe,EAAA;AACpB,MAAA;AAAA,IACF;AACA,IAAA,IAAA,CAAK,YAAA,GAAe,OAAA;AAAA,EACtB,CAAA;AAGA,EAAA,MAAM,IAAA,GAAO,MAAA,CAAO,wBAAA,CAAyB,eAAA,EAAiB,MAAM,CAAA;AACpE,EAAA,IAAI,MAAM,GAAA,EAAK;AACb,IAAA,MAAM,UAAU,IAAA,CAAK,GAAA;AACrB,IAAA,MAAA,CAAO,cAAA,CAAe,iBAAiB,MAAA,EAAQ;AAAA,MAC7C,YAAA,EAAc,IAAA;AAAA,MACd,GAAA,GAA8B;AAC5B,QAAA,OAAO,aAAa,IAAI,CAAA,GAAI,EAAC,GAAI,OAAA,CAAQ,KAAK,IAAI,CAAA;AAAA,MACpD;AAAA,KACD,CAAA;AAAA,EACH;AAEA,EAAA,MAAM,MAAA,GAAS,eAAA;AACf,EAAA,MAAM,sBAAsB,MAAA,CAAO,mBAAA;AACnC,EAAA,MAAA,CAAO,sBAAsB,WAAY;AACvC,IAAA,MAAM,IAAA,GAAuB,IAAA,CAAK,OAAA,CAAQ,2BAA2B,CAAA;AACrE,IAAA,IAAI,CAAC,YAAA,CAAa,IAAI,CAAA,IAAK,CAAC,KAAK,UAAA,EAAY;AAC3C,MAAA,mBAAA,CAAoB,KAAK,IAAI,CAAA;AAC7B,MAAA;AAAA,IACF;AAGA,IAAA,IAAA,CAAK,QAAQ,IAAA,CACV,aAAA,EAAc,CACd,MAAA,CAAO,CAAC,SAAA,KAAc,SAAA,CAAU,YAAA,CAAa,UAAU,CAAC,CAAA,CACxD,GAAA,CAAI,CAAC,SAAA,KAAc,UAAU,KAAK,CAAA;AAAA,EACvC,CAAA;AACF;;;ACjHA,sBAAA,CAAuB,SAAS,SAAS,CAAA;AACzC,qBAAA,CAAsB,QAAA,CAAS,SAAA,EAAW,QAAA,CAAS,SAAS,CAAA;AAC5D,oBAAA,EAAqB;AACrB,eAAA,EAAgB;AAOT,IAAM,wBAAA,GAA2B","file":"select-register.js","sourcesContent":["type SelectAction = 'all' | 'clear';\n\ninterface SelectActionOption extends HTMLElement {\n disabled: boolean;\n}\n\ninterface SelectActionHost extends HTMLElement {\n multiple: boolean;\n disabled: boolean;\n hasInteracted: boolean;\n valueHasChanged: boolean;\n selectedOptions: SelectActionOption[];\n updateComplete: Promise<unknown>;\n getAllOptions(): SelectActionOption[];\n setSelectedOptions(options: SelectActionOption[]): void;\n}\n\n/** Apply one footer action through Web Awesome's ordinary selection path. */\nexport function runSelectAction(\n host: SelectActionHost,\n action: SelectAction,\n): boolean {\n if (host.disabled || !host.multiple) return false;\n const enabled = host.getAllOptions().filter((option) => !option.disabled);\n const next = action === 'all' ? enabled : [];\n const current = host.selectedOptions;\n if (\n current.length === next.length &&\n current.every((option) => next.includes(option))\n )\n return false;\n host.hasInteracted = true;\n host.valueHasChanged = true;\n host.setSelectedOptions(next);\n void host.updateComplete.then(() => {\n host.dispatchEvent(\n new InputEvent('input', { bubbles: true, composed: true }),\n );\n host.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n });\n return true;\n}\n\nconst installedDocuments = new WeakSet<Document>();\n\n/** Wire opt-in multiple-select footer buttons at the registration boundary. */\nexport function installSelectActions(doc: Document = document): void {\n if (installedDocuments.has(doc)) return;\n installedDocuments.add(doc);\n // Web Awesome listens for keydown on document while the popup is open. Its\n // option shortcuts would otherwise consume Enter/Space from these native\n // footer buttons before the browser can activate them.\n doc.addEventListener('keydown', (event) => {\n if (event.key === 'Escape' || event.key === 'Tab') return;\n if (!(event.target instanceof Element)) return;\n const button = event.target.closest('button[data-select-action]');\n if (button?.closest('wa-select[data-component=\"select\"]'))\n event.stopImmediatePropagation();\n });\n doc.addEventListener('click', (event) => {\n if (!(event.target instanceof Element)) return;\n const button = event.target.closest<HTMLElement>(\n 'button[data-select-action]',\n );\n if (!button || button.hasAttribute('disabled')) return;\n const host = button.closest<SelectActionHost>(\n 'wa-select[data-component=\"select\"]',\n );\n if (!host) return;\n const action = button.dataset.selectAction;\n if (action === 'all' || action === 'clear') runSelectAction(host, action);\n });\n}\n","/** Run one native Select CSS animation; a reversal owns cancellation and cleanup. */\nexport function animateSelectPopup(\n popup: HTMLElement,\n phase: 'show' | 'hide',\n signal: AbortSignal,\n): Promise<void> {\n return new Promise((resolve) => {\n let settled = false;\n let frame = 0;\n const finish = () => {\n if (settled) return;\n settled = true;\n window.cancelAnimationFrame(frame);\n signal.removeEventListener('abort', finish);\n popup.classList.remove(phase);\n resolve();\n };\n signal.addEventListener('abort', finish, { once: true });\n popup.classList.add(phase);\n // Activation renders asynchronously. Check for reduced/absent motion only\n // after the native popup has had its normal render opportunity.\n frame = window.requestAnimationFrame(() => {\n // Observe these exact animations. An old CSS animationcancel event can\n // arrive after the next phase starts and must not finish that new phase.\n void Promise.all(\n popup\n .getAnimations()\n .map((animation) => animation.finished.catch(() => undefined)),\n ).then(finish);\n });\n if (signal.aborted) finish();\n });\n}\n","import type WaSelect from '@awesome.me/webawesome/dist/components/select/select.js';\nimport { WaAfterHideEvent } from '@awesome.me/webawesome/dist/events/after-hide.js';\nimport { WaAfterShowEvent } from '@awesome.me/webawesome/dist/events/after-show.js';\nimport { WaHideEvent } from '@awesome.me/webawesome/dist/events/hide.js';\nimport { WaShowEvent } from '@awesome.me/webawesome/dist/events/show.js';\n\nimport { animateSelectPopup } from './animate-select-popup.js';\n\n// Web Awesome 3.12/3.13 expose the lifecycle method but not these helper types.\n// Keep this integration boundary local: native option selection, dismissal\n// listeners, popup positioning and rendering remain owned by Web Awesome.\ninterface SelectHost extends Pick<\n WaSelect,\n | 'open'\n | 'disabled'\n | 'isConnected'\n | 'dataset'\n | 'popup'\n | 'listbox'\n | 'currentOption'\n | 'selectedOptions'\n | 'dispatchEvent'\n | 'handleOpenChange'\n | 'updateComplete'\n> {\n getFirstOption(): WaSelect['currentOption'];\n setCurrentOption(option: WaSelect['currentOption']): void;\n addOpenListeners(): void;\n removeOpenListeners(): void;\n}\n\n/** Install once at the explicit registration boundary, only for Kerf Selects. */\nexport function installSelectLifecycle(\n prototype: Pick<WaSelect, 'handleOpenChange' | 'handleDisabledChange'>,\n): void {\n const installed = Symbol.for('@kerfjs/ui/select-lifecycle');\n if (Object.prototype.hasOwnProperty.call(prototype, installed)) return;\n Object.defineProperty(prototype, installed, { value: true });\n const original = prototype.handleOpenChange;\n const originalDisabled = prototype.handleDisabledChange;\n prototype.handleDisabledChange = function () {\n const host = this as unknown as SelectHost;\n const wasOpen = host.open;\n originalDisabled.call(this);\n // WA's disabled watcher runs after its open watcher in the same Lit update.\n // Its open=false mutation otherwise misses the open lifecycle altogether.\n if (host.dataset.component === 'select' && wasOpen && !host.open) {\n void host.handleOpenChange();\n }\n };\n const transitions = new WeakMap<SelectHost, AbortController>();\n const restorations = new WeakMap<SelectHost, { open: boolean }>();\n prototype.handleOpenChange = async function () {\n const host = this as unknown as SelectHost;\n if (host.dataset.component !== 'select') return original.call(this);\n const restoring = restorations.get(host)?.open === host.open;\n restorations.delete(host);\n if (restoring) return;\n const transition = new AbortController();\n const opening = host.open && !host.disabled;\n const current = () =>\n !transition.signal.aborted &&\n host.isConnected &&\n (host.open && !host.disabled) === opening;\n try {\n if (!host.isConnected) return;\n if (opening) {\n host.setCurrentOption(host.selectedOptions[0] || host.getFirstOption());\n }\n const event = opening ? new WaShowEvent() : new WaHideEvent();\n host.dispatchEvent(event);\n if (event.defaultPrevented) {\n // Restore the accepted state without emitting the opposite transition.\n // Clear at the update checkpoint too: Lit can coalesce a restoration.\n host.open = !opening;\n const restoration = { open: host.open };\n restorations.set(host, restoration);\n void host.updateComplete.then(() => {\n if (restorations.get(host) === restoration) restorations.delete(host);\n });\n return;\n }\n // A consumer can reverse the request synchronously in a lifecycle event.\n if (!current()) return;\n // A rejected reversal must not cancel the previously accepted animation.\n transitions.get(host)?.abort();\n transitions.set(host, transition);\n if (opening) {\n host.addOpenListeners();\n host.listbox.hidden = false;\n host.popup.active = true;\n window.requestAnimationFrame(() => {\n if (current()) host.setCurrentOption(host.currentOption);\n });\n } else {\n host.removeOpenListeners();\n }\n await animateSelectPopup(\n host.popup.popup,\n opening ? 'show' : 'hide',\n transition.signal,\n );\n if (!transition.signal.aborted && !host.isConnected) {\n host.removeOpenListeners();\n host.listbox.hidden = true;\n host.popup.active = false;\n }\n if (!current()) return;\n if (opening) {\n // Match native vertical, immediate option reveal without scrolling an\n // ancestor page or moving focus after animation completion.\n const option = host.currentOption;\n if (option) {\n const list = host.listbox;\n const offset = Math.round(\n option.getBoundingClientRect().top -\n list.getBoundingClientRect().top,\n );\n if (offset < 0)\n list.scrollTo({ top: list.scrollTop + offset, behavior: 'auto' });\n else if (offset + option.clientHeight > list.offsetHeight) {\n list.scrollTo({\n top:\n list.scrollTop +\n offset -\n list.offsetHeight +\n option.clientHeight,\n behavior: 'auto',\n });\n }\n }\n host.dispatchEvent(new WaAfterShowEvent());\n } else {\n host.listbox.hidden = true;\n host.popup.active = false;\n host.dispatchEvent(new WaAfterHideEvent());\n }\n } finally {\n if (transitions.get(host) === transition) transitions.delete(host);\n }\n };\n}\n","// Web Awesome's multiple select keeps its popup open while choices toggle and\n// closes on an outside press, Escape, or focus leaving; Kerf keeps that\n// behavior. This boundary adapts the rest to Kerf's rendering model, only for\n// Kerf Selects (`data-component=\"select\"`):\n// - the closed control summarizes the chosen labels instead of drawing a\n// removable tag per choice or a \"N options selected\" count; an icon-only\n// trigger (whose value text is hidden) ends its accessible name with that\n// summary instead;\n// - the rendered `selected` attributes are the controlled value, so a\n// re-render that changes them updates the selection (Web Awesome otherwise\n// reads them only until the first interaction).\n\ninterface MultipleOption extends HTMLElement {\n value: string;\n label: string;\n selected: boolean;\n defaultSelected: boolean;\n}\n\ninterface MultipleSelectHost extends HTMLElement {\n multiple: boolean;\n hasUpdated: boolean;\n displayLabel: string;\n value: string | string[] | null;\n selectedOptions: MultipleOption[];\n getAllOptions(): MultipleOption[];\n selectionChanged(): void;\n}\n\ninterface SelectPrototype {\n selectionChanged(this: MultipleSelectHost): void;\n}\n\ninterface OptionPrototype {\n syncDefaultSelected(this: MultipleOption): void;\n}\n\nfunction kerfMultiple(host: Element | null): host is MultipleSelectHost {\n return (\n host instanceof HTMLElement &&\n host.dataset.component === 'select' &&\n (host as MultipleSelectHost).multiple\n );\n}\n\nfunction listLocale(host: HTMLElement): string | undefined {\n const lang = host.closest<HTMLElement>('[lang]')?.lang;\n return lang || undefined;\n}\n\n/** The closed-control text: chosen labels in choice order, as a short list. */\nfunction summarizeSelection(\n labels: readonly string[],\n locale?: string,\n): string {\n if (labels.length === 0) return '';\n try {\n return new Intl.ListFormat(locale, {\n type: 'unit',\n style: 'short',\n }).format(labels);\n } catch {\n return labels.join(', ');\n }\n}\n\n/** Install once at the explicit registration boundary, only for Kerf Selects. */\nexport function installSelectMultiple(\n selectPrototype: object,\n optionPrototype: object,\n): void {\n const installed = Symbol.for('@kerfjs/ui/select-multiple');\n if (Object.prototype.hasOwnProperty.call(selectPrototype, installed)) return;\n Object.defineProperty(selectPrototype, installed, { value: true });\n\n const select = selectPrototype as SelectPrototype;\n const selectionChanged = select.selectionChanged;\n select.selectionChanged = function () {\n selectionChanged.call(this);\n if (!kerfMultiple(this)) return;\n const chosen = new Set(this.selectedOptions);\n const summary = summarizeSelection(\n this.getAllOptions()\n .filter((option) => chosen.has(option))\n .map((option) => option.label),\n listLocale(this),\n );\n const nameSummary = this.querySelector(\n ':scope > [slot=\"label\"] > .kui-select__name-summary',\n );\n if (this.dataset.selectedPresentation === 'icon-only' && nameSummary) {\n // An icon-only trigger carries the summary in its accessible name, so\n // the (visually hidden) value stays empty rather than repeating it.\n nameSummary.textContent = summary ? `: ${summary}` : '';\n this.displayLabel = '';\n return;\n }\n this.displayLabel = summary;\n };\n\n // The summary replaces Web Awesome's per-choice tags.\n const tags = Object.getOwnPropertyDescriptor(selectPrototype, 'tags');\n if (tags?.get) {\n const getTags = tags.get;\n Object.defineProperty(selectPrototype, 'tags', {\n configurable: true,\n get(this: MultipleSelectHost) {\n return kerfMultiple(this) ? [] : getTags.call(this);\n },\n });\n }\n\n const option = optionPrototype as OptionPrototype;\n const syncDefaultSelected = option.syncDefaultSelected;\n option.syncDefaultSelected = function () {\n const host: Element | null = this.closest('[data-component=\"select\"]');\n if (!kerfMultiple(host) || !host.hasUpdated) {\n syncDefaultSelected.call(this);\n return;\n }\n // A re-render changed which options carry `selected`: that is the new\n // controlled value, whether or not the person has interacted.\n host.value = host\n .getAllOptions()\n .filter((candidate) => candidate.hasAttribute('selected'))\n .map((candidate) => candidate.value);\n };\n}\n","import '@awesome.me/webawesome/dist/components/button/button.js';\nimport '@awesome.me/webawesome/dist/components/divider/divider.js';\nimport '@awesome.me/webawesome/dist/components/dropdown/dropdown.js';\nimport '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';\nimport '@awesome.me/webawesome/dist/components/tooltip/tooltip.js';\n\nimport WaOption from '@awesome.me/webawesome/dist/components/option/option.js';\nimport WaSelect from '@awesome.me/webawesome/dist/components/select/select.js';\n\nimport { installHelpTags } from '../../../../integrations/webawesome/help-tags/install-help-tag.js';\nimport { installSelectActions } from '../internal/install-select-actions.js';\nimport { installSelectLifecycle } from '../internal/install-select-lifecycle.js';\nimport { installSelectMultiple } from '../internal/install-select-multiple.js';\n\ninstallSelectLifecycle(WaSelect.prototype);\ninstallSelectMultiple(WaSelect.prototype, WaOption.prototype);\ninstallSelectActions();\ninstallHelpTags();\n\n/**\n * Marker export for tests and tooling; importing this module performs registration.\n * Registers both the `Select` elements and the `Catalog` related-entries popup-menu\n * elements (`wa-dropdown` / `wa-dropdown-item` / `wa-button`).\n */\nexport const selectElementsRegistered = true;\n"]}
1
+ {"version":3,"sources":["../src/components/forms/select/internal/install-select-actions.ts","../src/components/forms/select/internal/animate-select-popup.ts","../src/components/forms/select/internal/install-select-lifecycle.ts","../src/components/forms/select/internal/install-select-multiple.ts","../src/components/forms/select/register/select-register.ts"],"names":["option"],"mappings":"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","file":"select-register.js","sourcesContent":["type SelectAction = 'all' | 'clear';\n\ninterface SelectActionOption extends HTMLElement {\n disabled: boolean;\n}\n\ninterface SelectActionHost extends HTMLElement {\n multiple: boolean;\n disabled: boolean;\n hasInteracted: boolean;\n valueHasChanged: boolean;\n selectedOptions: SelectActionOption[];\n updateComplete: Promise<unknown>;\n getAllOptions(): SelectActionOption[];\n setSelectedOptions(options: SelectActionOption[]): void;\n}\n\n/** Apply one footer action through Web Awesome's ordinary selection path. */\nexport function runSelectAction(\n host: SelectActionHost,\n action: SelectAction,\n): boolean {\n if (host.disabled || !host.multiple) return false;\n const enabled = host.getAllOptions().filter((option) => !option.disabled);\n const next = action === 'all' ? enabled : [];\n const current = host.selectedOptions;\n if (\n current.length === next.length &&\n current.every((option) => next.includes(option))\n )\n return false;\n host.hasInteracted = true;\n host.valueHasChanged = true;\n host.setSelectedOptions(next);\n void host.updateComplete.then(() => {\n host.dispatchEvent(\n new InputEvent('input', { bubbles: true, composed: true }),\n );\n host.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n });\n return true;\n}\n\nconst installedDocuments = new WeakSet<Document>();\n\n/** Wire opt-in multiple-select footer buttons at the registration boundary. */\nexport function installSelectActions(doc: Document = document): void {\n if (installedDocuments.has(doc)) return;\n installedDocuments.add(doc);\n // Web Awesome listens for keydown on document while the popup is open. Its\n // option shortcuts would otherwise consume Enter/Space from these native\n // footer buttons before the browser can activate them.\n doc.addEventListener('keydown', (event) => {\n if (event.key === 'Escape' || event.key === 'Tab') return;\n if (!(event.target instanceof Element)) return;\n const button = event.target.closest('button[data-select-action]');\n if (button?.closest('wa-select[data-component=\"select\"]'))\n event.stopImmediatePropagation();\n });\n doc.addEventListener('click', (event) => {\n if (!(event.target instanceof Element)) return;\n const button = event.target.closest<HTMLElement>(\n 'button[data-select-action]',\n );\n if (!button || button.hasAttribute('disabled')) return;\n const host = button.closest<SelectActionHost>(\n 'wa-select[data-component=\"select\"]',\n );\n if (!host) return;\n const action = button.dataset.selectAction;\n if (action === 'all' || action === 'clear') runSelectAction(host, action);\n });\n}\n","/** Run one native Select CSS animation; a reversal owns cancellation and cleanup. */\nexport function animateSelectPopup(\n popup: HTMLElement,\n phase: 'show' | 'hide',\n signal: AbortSignal,\n): Promise<void> {\n return new Promise((resolve) => {\n let settled = false;\n let frame = 0;\n const finish = () => {\n if (settled) return;\n settled = true;\n window.cancelAnimationFrame(frame);\n signal.removeEventListener('abort', finish);\n popup.classList.remove(phase);\n resolve();\n };\n signal.addEventListener('abort', finish, { once: true });\n popup.classList.add(phase);\n // Activation renders asynchronously. Check for reduced/absent motion only\n // after the native popup has had its normal render opportunity.\n frame = window.requestAnimationFrame(() => {\n // Observe these exact animations. An old CSS animationcancel event can\n // arrive after the next phase starts and must not finish that new phase.\n void Promise.all(\n popup\n .getAnimations()\n .map((animation) => animation.finished.catch(() => undefined)),\n ).then(finish);\n });\n if (signal.aborted) finish();\n });\n}\n","import type WaSelect from '@awesome.me/webawesome/dist/components/select/select.js';\nimport { WaAfterHideEvent } from '@awesome.me/webawesome/dist/events/after-hide.js';\nimport { WaAfterShowEvent } from '@awesome.me/webawesome/dist/events/after-show.js';\nimport { WaHideEvent } from '@awesome.me/webawesome/dist/events/hide.js';\nimport { WaShowEvent } from '@awesome.me/webawesome/dist/events/show.js';\n\nimport { animateSelectPopup } from './animate-select-popup.js';\n\n// Web Awesome 3.12/3.13 expose the lifecycle method but not these helper types.\n// Keep this integration boundary local: native option selection, dismissal\n// listeners, popup positioning and rendering remain owned by Web Awesome.\ninterface SelectHost extends Pick<\n WaSelect,\n | 'open'\n | 'disabled'\n | 'isConnected'\n | 'dataset'\n | 'classList'\n | 'listbox'\n | 'currentOption'\n | 'selectedOptions'\n | 'dispatchEvent'\n | 'handleOpenChange'\n | 'updateComplete'\n> {\n // Native Popup starts with no sync policy; its declaration omits undefined.\n popup: Omit<WaSelect['popup'], 'sync'> & {\n sync?: WaSelect['popup']['sync'];\n };\n getFirstOption(): WaSelect['currentOption'];\n setCurrentOption(option: WaSelect['currentOption']): void;\n addOpenListeners(): void;\n removeOpenListeners(): void;\n}\n\n/** Install once at the explicit registration boundary, only for Kerf Selects. */\nexport function installSelectLifecycle(\n prototype: Pick<WaSelect, 'handleOpenChange' | 'handleDisabledChange'>,\n): void {\n const installed = Symbol.for('@kerfjs/ui/select-lifecycle');\n if (Object.prototype.hasOwnProperty.call(prototype, installed)) return;\n Object.defineProperty(prototype, installed, { value: true });\n const original = prototype.handleOpenChange;\n const originalDisabled = prototype.handleDisabledChange;\n prototype.handleDisabledChange = function () {\n const host = this as unknown as SelectHost;\n const wasOpen = host.open;\n originalDisabled.call(this);\n // WA's disabled watcher runs after its open watcher in the same Lit update.\n // Its open=false mutation otherwise misses the open lifecycle altogether.\n if (host.dataset.component === 'select' && wasOpen && !host.open) {\n void host.handleOpenChange();\n }\n };\n const transitions = new WeakMap<SelectHost, AbortController>();\n const restorations = new WeakMap<SelectHost, { open: boolean }>();\n prototype.handleOpenChange = async function () {\n const host = this as unknown as SelectHost;\n if (host.dataset.component !== 'select') return original.call(this);\n const restoring = restorations.get(host)?.open === host.open;\n restorations.delete(host);\n if (restoring) return;\n const transition = new AbortController();\n const opening = host.open && !host.disabled;\n const current = () =>\n !transition.signal.aborted &&\n host.isConnected &&\n (host.open && !host.disabled) === opening;\n try {\n if (!host.isConnected) return;\n if (opening) {\n host.setCurrentOption(host.selectedOptions[0] || host.getFirstOption());\n }\n const event = opening ? new WaShowEvent() : new WaHideEvent();\n host.dispatchEvent(event);\n if (event.defaultPrevented) {\n // Restore the accepted state without emitting the opposite transition.\n // Clear at the update checkpoint too: Lit can coalesce a restoration.\n host.open = !opening;\n const restoration = { open: host.open };\n restorations.set(host, restoration);\n void host.updateComplete.then(() => {\n if (restorations.get(host) === restoration) restorations.delete(host);\n });\n return;\n }\n // A consumer can reverse the request synchronously in a lifecycle event.\n if (!current()) return;\n // A rejected reversal must not cancel the previously accepted animation.\n transitions.get(host)?.abort();\n transitions.set(host, transition);\n if (opening) {\n host.addOpenListeners();\n host.listbox.hidden = false;\n // Measure the visible menu rather than a trigger-width wrapper. Native\n // shift/auto-size can then contain the complete surface at either edge.\n host.popup.sync = host.classList.contains('kui-select--fit-menu')\n ? 'width'\n : undefined;\n host.popup.autoSize = 'both';\n host.popup.shiftPadding = 10;\n host.popup.active = true;\n window.requestAnimationFrame(() => {\n if (current()) host.setCurrentOption(host.currentOption);\n });\n } else {\n host.removeOpenListeners();\n }\n await animateSelectPopup(\n host.popup.popup,\n opening ? 'show' : 'hide',\n transition.signal,\n );\n if (!transition.signal.aborted && !host.isConnected) {\n host.removeOpenListeners();\n host.listbox.hidden = true;\n host.popup.active = false;\n }\n if (!current()) return;\n if (opening) {\n // Match native vertical, immediate option reveal without scrolling an\n // ancestor page or moving focus after animation completion.\n const option = host.currentOption;\n if (option) {\n const list = host.listbox;\n const offset = Math.round(\n option.getBoundingClientRect().top -\n list.getBoundingClientRect().top,\n );\n if (offset < 0)\n list.scrollTo({ top: list.scrollTop + offset, behavior: 'auto' });\n else if (offset + option.clientHeight > list.offsetHeight) {\n list.scrollTo({\n top:\n list.scrollTop +\n offset -\n list.offsetHeight +\n option.clientHeight,\n behavior: 'auto',\n });\n }\n }\n host.dispatchEvent(new WaAfterShowEvent());\n } else {\n host.listbox.hidden = true;\n host.popup.active = false;\n host.dispatchEvent(new WaAfterHideEvent());\n }\n } finally {\n if (transitions.get(host) === transition) transitions.delete(host);\n }\n };\n}\n","// Web Awesome's multiple select keeps its popup open while choices toggle and\n// closes on an outside press, Escape, or focus leaving; Kerf keeps that\n// behavior. This boundary adapts the rest to Kerf's rendering model, only for\n// Kerf Selects (`data-component=\"select\"`):\n// - the closed control summarizes the chosen labels instead of drawing a\n// removable tag per choice or a \"N options selected\" count; an icon-only\n// trigger (whose value text is hidden) ends its accessible name with that\n// summary instead;\n// - the rendered `selected` attributes are the controlled value, so a\n// re-render that changes them updates the selection (Web Awesome otherwise\n// reads them only until the first interaction).\n\ninterface MultipleOption extends HTMLElement {\n value: string;\n label: string;\n selected: boolean;\n defaultSelected: boolean;\n}\n\ninterface MultipleSelectHost extends HTMLElement {\n multiple: boolean;\n hasUpdated: boolean;\n displayLabel: string;\n value: string | string[] | null;\n selectedOptions: MultipleOption[];\n getAllOptions(): MultipleOption[];\n selectionChanged(): void;\n}\n\ninterface SelectPrototype {\n selectionChanged(this: MultipleSelectHost): void;\n}\n\ninterface OptionPrototype {\n syncDefaultSelected(this: MultipleOption): void;\n}\n\nfunction kerfMultiple(host: Element | null): host is MultipleSelectHost {\n return (\n host instanceof HTMLElement &&\n host.dataset.component === 'select' &&\n (host as MultipleSelectHost).multiple\n );\n}\n\nfunction listLocale(host: HTMLElement): string | undefined {\n const lang = host.closest<HTMLElement>('[lang]')?.lang;\n return lang || undefined;\n}\n\n/** The closed-control text: chosen labels in choice order, as a short list. */\nfunction summarizeSelection(\n labels: readonly string[],\n locale?: string,\n): string {\n if (labels.length === 0) return '';\n try {\n return new Intl.ListFormat(locale, {\n type: 'unit',\n style: 'short',\n }).format(labels);\n } catch {\n return labels.join(', ');\n }\n}\n\n/** Install once at the explicit registration boundary, only for Kerf Selects. */\nexport function installSelectMultiple(\n selectPrototype: object,\n optionPrototype: object,\n): void {\n const installed = Symbol.for('@kerfjs/ui/select-multiple');\n if (Object.prototype.hasOwnProperty.call(selectPrototype, installed)) return;\n Object.defineProperty(selectPrototype, installed, { value: true });\n\n const select = selectPrototype as SelectPrototype;\n const selectionChanged = select.selectionChanged;\n select.selectionChanged = function () {\n selectionChanged.call(this);\n if (!kerfMultiple(this)) return;\n const chosen = new Set(this.selectedOptions);\n const summary = summarizeSelection(\n this.getAllOptions()\n .filter((option) => chosen.has(option))\n .map((option) => option.label),\n listLocale(this),\n );\n const nameSummary = this.querySelector(\n ':scope > [slot=\"label\"] > .kui-select__name-summary',\n );\n if (this.dataset.selectedPresentation === 'icon-only' && nameSummary) {\n // An icon-only trigger carries the summary in its accessible name, so\n // the (visually hidden) value stays empty rather than repeating it.\n nameSummary.textContent = summary ? `: ${summary}` : '';\n this.displayLabel = '';\n return;\n }\n this.displayLabel = summary;\n };\n\n // The summary replaces Web Awesome's per-choice tags.\n const tags = Object.getOwnPropertyDescriptor(selectPrototype, 'tags');\n if (tags?.get) {\n const getTags = tags.get;\n Object.defineProperty(selectPrototype, 'tags', {\n configurable: true,\n get(this: MultipleSelectHost) {\n return kerfMultiple(this) ? [] : getTags.call(this);\n },\n });\n }\n\n const option = optionPrototype as OptionPrototype;\n const syncDefaultSelected = option.syncDefaultSelected;\n option.syncDefaultSelected = function () {\n const host: Element | null = this.closest('[data-component=\"select\"]');\n if (!kerfMultiple(host) || !host.hasUpdated) {\n syncDefaultSelected.call(this);\n return;\n }\n // A re-render changed which options carry `selected`: that is the new\n // controlled value, whether or not the person has interacted.\n host.value = host\n .getAllOptions()\n .filter((candidate) => candidate.hasAttribute('selected'))\n .map((candidate) => candidate.value);\n };\n}\n","import '@awesome.me/webawesome/dist/components/button/button.js';\nimport '@awesome.me/webawesome/dist/components/divider/divider.js';\nimport '@awesome.me/webawesome/dist/components/dropdown/dropdown.js';\nimport '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';\nimport '@awesome.me/webawesome/dist/components/tooltip/tooltip.js';\n\nimport WaOption from '@awesome.me/webawesome/dist/components/option/option.js';\nimport WaSelect from '@awesome.me/webawesome/dist/components/select/select.js';\n\nimport { installHelpTags } from '../../../../integrations/webawesome/help-tags/install-help-tag.js';\nimport { installSelectActions } from '../internal/install-select-actions.js';\nimport { installSelectLifecycle } from '../internal/install-select-lifecycle.js';\nimport { installSelectMultiple } from '../internal/install-select-multiple.js';\n\ninstallSelectLifecycle(WaSelect.prototype);\ninstallSelectMultiple(WaSelect.prototype, WaOption.prototype);\ninstallSelectActions();\ninstallHelpTags();\n\n/**\n * Marker export for tests and tooling; importing this module performs registration.\n * Registers both the `Select` elements and the `Catalog` related-entries popup-menu\n * elements (`wa-dropdown` / `wa-dropdown-item` / `wa-button`).\n */\nexport const selectElementsRegistered = true;\n"]}
package/dist/select.d.ts CHANGED
@@ -50,6 +50,7 @@ interface SelectBaseProps<Value extends string = string> {
50
50
  /** Supporting text shown below the control and associated with its combobox. */
51
51
  hint?: string;
52
52
  disabled?: boolean;
53
+ /** Match menu width to the trigger; default menus grow to content within viewport gutters. */
53
54
  fitMenu?: boolean;
54
55
  /** Render as an unanimated loading skeleton: the label above a static, empty control box. */
55
56
  placeholder?: boolean;
package/dist/select.js CHANGED
@@ -1,4 +1,4 @@
1
- export { Select } from './chunk-72LLWYP2.js';
1
+ export { Select } from './chunk-NVKRZ5DI.js';
2
2
 
3
3
 
4
4
 
@@ -1,12 +1,17 @@
1
1
  import * as kerfjs from 'kerfjs';
2
2
  import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
3
- import { NavStackProps, NavStackView } from './nav-stack.js';
3
+ import { N as NavStackProps, a as NavStackView } from './nav-stack-B1Qc2e5q.js';
4
4
  import { ResizableRegionProps } from './resizable-region.js';
5
- import './toolbar.js';
5
+ import './list.js';
6
+ import './flex-alignment-4ms8ZbV8.js';
6
7
  import './sides-BPSWde0A.js';
8
+ import './css-values.js';
7
9
  import './pane.js';
10
+ import './panel-toolbar-CL9tYOkh.js';
11
+ import './toolbar.js';
12
+ import './lucide-icon.js';
13
+ import 'lucide';
8
14
  import './toolbar-text.js';
9
- import './css-values.js';
10
15
 
11
16
  /**
12
17
  * The roomy list pane's `ResizableRegion`: its committed `size` and `min` /
@@ -21,7 +26,7 @@ interface SplitViewResizable extends Pick<ResizableRegionProps, 'separator' | 'h
21
26
  max: number;
22
27
  }
23
28
  /** One compact view's top- and bottom-toolbar content (see `NavStackView`). */
24
- type SplitViewCompactViewToolbars = Pick<NavStackView, 'leading' | 'center' | 'toolbar' | 'bottomToolbar'>;
29
+ type SplitViewCompactViewToolbars = Pick<NavStackView, 'toolbar' | 'bottomToolbar'>;
25
30
  /**
26
31
  * The compact `NavStack`'s configuration: its toolbar configuration, back
27
32
  * control, persistent bottom toolbar, and chrome dividers forward to the
@@ -1,4 +1,4 @@
1
- import { NavStack } from './chunk-SJY7KC45.js';
1
+ import { NavStack } from './chunk-IKCUPTR2.js';
2
2
  import { ResizableRegion } from './chunk-Y6KT7ZTR.js';
3
3
 
4
4
 
@@ -7,6 +7,10 @@ import { ResizableRegion } from './chunk-Y6KT7ZTR.js';
7
7
 
8
8
 
9
9
 
10
+
11
+
12
+
13
+
10
14
  import { jsx, jsxs } from 'kerfjs/jsx-runtime';
11
15
 
12
16
  function SplitView({
@@ -28,7 +32,7 @@ function SplitView({
28
32
  const listView = {
29
33
  ...compactStack.list,
30
34
  key: "list",
31
- title: listTitle,
35
+ toolbar: { ...compactStack.list?.toolbar, title: listTitle },
32
36
  content: list
33
37
  };
34
38
  const views = detailActive ? [
@@ -36,7 +40,7 @@ function SplitView({
36
40
  {
37
41
  ...compactStack.detail,
38
42
  key: "detail",
39
- title: detailTitle,
43
+ toolbar: { ...compactStack.detail?.toolbar, title: detailTitle },
40
44
  content: detail
41
45
  }
42
46
  ] : [listView];
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/layout/split-view/split-view.tsx"],"names":[],"mappings":"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","file":"split-view.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n NavStack,\n type NavStackProps,\n type NavStackView,\n} from '../../navigation/nav-stack/nav-stack.js';\nimport {\n ResizableRegion,\n type ResizableRegionProps,\n} from '../resizable-region/resizable-region.js';\n\n/**\n * The roomy list pane's `ResizableRegion`: its committed `size` and `min` /\n * `max` limits, plus the region configuration that forwards unchanged\n * (`separator`, `handleIcon`, `contentOverflow`, and collapse:\n * `collapsed`, `transitioning`, `collapseMotion`, `restoreControl`,\n * `restorePosition`). Omitted options keep the region's defaults.\n */\nexport interface SplitViewResizable extends Pick<\n ResizableRegionProps,\n | 'separator'\n | 'handleIcon'\n | 'contentOverflow'\n | 'collapsed'\n | 'transitioning'\n | 'collapseMotion'\n | 'restoreControl'\n | 'restorePosition'\n> {\n size: number;\n min: number;\n max: number;\n}\n\n/** One compact view's top- and bottom-toolbar content (see `NavStackView`). */\nexport type SplitViewCompactViewToolbars = Pick<\n NavStackView,\n 'leading' | 'center' | 'toolbar' | 'bottomToolbar'\n>;\n\n/**\n * The compact `NavStack`'s configuration: its toolbar configuration, back\n * control, persistent bottom toolbar, and chrome dividers forward to the\n * stack, and `list` / `detail` give each view its own toolbar groups.\n */\nexport interface SplitViewCompactStack extends Pick<\n NavStackProps,\n | 'toolbarConfig'\n | 'backIcon'\n | 'backText'\n | 'hideToolbar'\n | 'bottomToolbar'\n | 'chromeDividers'\n> {\n /** Toolbar content for the list (root) view. */\n list?: SplitViewCompactViewToolbars;\n /** Toolbar content for the pushed detail view. */\n detail?: SplitViewCompactViewToolbars;\n}\n\nexport interface SplitViewProps {\n id: string;\n label: string;\n /** The list (primary) pane. */\n list: KerfUiContent;\n /** The detail (secondary) pane. */\n detail: KerfUiContent;\n /**\n * Compact (\"one pane at a time\") classes — a handset or portrait tablet.\n * Derive from `deviceClass().value.compact`. When true the split collapses to\n * a `NavStack`: the list is the root and the detail is pushed over it.\n */\n compact?: boolean;\n /** In compact mode, whether the detail is currently pushed over the list. */\n detailActive?: boolean;\n /** Title/label for the list (compact NavStack root + region label). */\n listTitle?: string;\n /** Title/label for the detail (compact NavStack pushed view + region label). */\n detailTitle?: string;\n /** Back label for the compact NavStack (default \"Back\"). */\n backLabel?: string;\n /** Compact NavStack configuration and per-view toolbars. */\n compactStack?: SplitViewCompactStack;\n /** A resizable separator on roomy classes (min/max px). Omit for a fixed split. */\n resizable?: SplitViewResizable;\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/**\n * A list-detail split. On roomy classes it shows both panes side\n * by side with an optional resizable separator; on compact classes it collapses\n * to a `NavStack` (list → detail). See `docs/23-app-layouts.md` §3.2. Compose the\n * resizable wiring with `wireResizableRegions` and the compact back with\n * `wireNavStack`.\n */\nexport function SplitView({\n id,\n label,\n list,\n detail,\n compact = false,\n detailActive = false,\n listTitle = '',\n detailTitle = '',\n backLabel = 'Back',\n compactStack = {},\n resizable,\n className = '',\n slot,\n}: SplitViewProps) {\n if (compact) {\n const listView: NavStackView = {\n ...compactStack.list,\n key: 'list',\n title: listTitle,\n content: list,\n };\n const views: NavStackView[] = detailActive\n ? [\n listView,\n {\n ...compactStack.detail,\n key: 'detail',\n title: detailTitle,\n content: detail,\n },\n ]\n : [listView];\n return (\n <div\n class={`kui-split-view kui-split-view--compact ${className}`.trim()}\n id={id}\n data-component=\"split-view\"\n data-split-mode=\"compact\"\n slot={slot}\n >\n <NavStack\n id={`${id}-stack`}\n label={label}\n views={views}\n backLabel={backLabel}\n backIcon={compactStack.backIcon}\n backText={compactStack.backText}\n toolbarConfig={compactStack.toolbarConfig}\n hideToolbar={compactStack.hideToolbar}\n bottomToolbar={compactStack.bottomToolbar}\n chromeDividers={compactStack.chromeDividers}\n />\n </div>\n );\n }\n const listPane = resizable ? (\n <ResizableRegion\n id={`${id}-list`}\n label={listTitle || 'List'}\n size={resizable.size}\n min={resizable.min}\n max={resizable.max}\n separator={resizable.separator}\n handleIcon={resizable.handleIcon}\n contentOverflow={resizable.contentOverflow}\n collapsed={resizable.collapsed}\n transitioning={resizable.transitioning}\n collapseMotion={resizable.collapseMotion}\n restoreControl={resizable.restoreControl}\n restorePosition={resizable.restorePosition}\n >\n <div\n class=\"kui-split-view__list kui-pane\"\n data-split-list\n data-resizable=\"true\"\n >\n {list}\n </div>\n </ResizableRegion>\n ) : (\n <div\n class=\"kui-split-view__list kui-pane\"\n data-split-list\n data-resizable=\"false\"\n >\n {list}\n </div>\n );\n return (\n <div\n class={`kui-split-view ${className}`.trim()}\n id={id}\n data-component=\"split-view\"\n data-split-mode=\"split\"\n aria-label={label}\n slot={slot}\n >\n {listPane}\n <div\n class=\"kui-split-view__detail kui-pane\"\n data-split-detail\n aria-label={detailTitle || undefined}\n >\n {detail}\n </div>\n </div>\n );\n}\n"]}
1
+ {"version":3,"sources":["../src/components/layout/split-view/split-view.tsx"],"names":[],"mappings":"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","file":"split-view.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n NavStack,\n type NavStackProps,\n type NavStackView,\n} from '../../navigation/nav-stack/nav-stack.js';\nimport {\n ResizableRegion,\n type ResizableRegionProps,\n} from '../resizable-region/resizable-region.js';\n\n/**\n * The roomy list pane's `ResizableRegion`: its committed `size` and `min` /\n * `max` limits, plus the region configuration that forwards unchanged\n * (`separator`, `handleIcon`, `contentOverflow`, and collapse:\n * `collapsed`, `transitioning`, `collapseMotion`, `restoreControl`,\n * `restorePosition`). Omitted options keep the region's defaults.\n */\nexport interface SplitViewResizable extends Pick<\n ResizableRegionProps,\n | 'separator'\n | 'handleIcon'\n | 'contentOverflow'\n | 'collapsed'\n | 'transitioning'\n | 'collapseMotion'\n | 'restoreControl'\n | 'restorePosition'\n> {\n size: number;\n min: number;\n max: number;\n}\n\n/** One compact view's top- and bottom-toolbar content (see `NavStackView`). */\nexport type SplitViewCompactViewToolbars = Pick<\n NavStackView,\n 'toolbar' | 'bottomToolbar'\n>;\n\n/**\n * The compact `NavStack`'s configuration: its toolbar configuration, back\n * control, persistent bottom toolbar, and chrome dividers forward to the\n * stack, and `list` / `detail` give each view its own toolbar groups.\n */\nexport interface SplitViewCompactStack extends Pick<\n NavStackProps,\n | 'toolbarConfig'\n | 'backIcon'\n | 'backText'\n | 'hideToolbar'\n | 'bottomToolbar'\n | 'chromeDividers'\n> {\n /** Toolbar content for the list (root) view. */\n list?: SplitViewCompactViewToolbars;\n /** Toolbar content for the pushed detail view. */\n detail?: SplitViewCompactViewToolbars;\n}\n\nexport interface SplitViewProps {\n id: string;\n label: string;\n /** The list (primary) pane. */\n list: KerfUiContent;\n /** The detail (secondary) pane. */\n detail: KerfUiContent;\n /**\n * Compact (\"one pane at a time\") classes — a handset or portrait tablet.\n * Derive from `deviceClass().value.compact`. When true the split collapses to\n * a `NavStack`: the list is the root and the detail is pushed over it.\n */\n compact?: boolean;\n /** In compact mode, whether the detail is currently pushed over the list. */\n detailActive?: boolean;\n /** Title/label for the list (compact NavStack root + region label). */\n listTitle?: string;\n /** Title/label for the detail (compact NavStack pushed view + region label). */\n detailTitle?: string;\n /** Back label for the compact NavStack (default \"Back\"). */\n backLabel?: string;\n /** Compact NavStack configuration and per-view toolbars. */\n compactStack?: SplitViewCompactStack;\n /** A resizable separator on roomy classes (min/max px). Omit for a fixed split. */\n resizable?: SplitViewResizable;\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/**\n * A list-detail split. On roomy classes it shows both panes side\n * by side with an optional resizable separator; on compact classes it collapses\n * to a `NavStack` (list → detail). See `docs/23-app-layouts.md` §3.2. Compose the\n * resizable wiring with `wireResizableRegions` and the compact back with\n * `wireNavStack`.\n */\nexport function SplitView({\n id,\n label,\n list,\n detail,\n compact = false,\n detailActive = false,\n listTitle = '',\n detailTitle = '',\n backLabel = 'Back',\n compactStack = {},\n resizable,\n className = '',\n slot,\n}: SplitViewProps) {\n if (compact) {\n const listView: NavStackView = {\n ...compactStack.list,\n key: 'list',\n toolbar: { ...compactStack.list?.toolbar, title: listTitle },\n content: list,\n };\n const views: NavStackView[] = detailActive\n ? [\n listView,\n {\n ...compactStack.detail,\n key: 'detail',\n toolbar: { ...compactStack.detail?.toolbar, title: detailTitle },\n content: detail,\n },\n ]\n : [listView];\n return (\n <div\n class={`kui-split-view kui-split-view--compact ${className}`.trim()}\n id={id}\n data-component=\"split-view\"\n data-split-mode=\"compact\"\n slot={slot}\n >\n <NavStack\n id={`${id}-stack`}\n label={label}\n views={views}\n backLabel={backLabel}\n backIcon={compactStack.backIcon}\n backText={compactStack.backText}\n toolbarConfig={compactStack.toolbarConfig}\n hideToolbar={compactStack.hideToolbar}\n bottomToolbar={compactStack.bottomToolbar}\n chromeDividers={compactStack.chromeDividers}\n />\n </div>\n );\n }\n const listPane = resizable ? (\n <ResizableRegion\n id={`${id}-list`}\n label={listTitle || 'List'}\n size={resizable.size}\n min={resizable.min}\n max={resizable.max}\n separator={resizable.separator}\n handleIcon={resizable.handleIcon}\n contentOverflow={resizable.contentOverflow}\n collapsed={resizable.collapsed}\n transitioning={resizable.transitioning}\n collapseMotion={resizable.collapseMotion}\n restoreControl={resizable.restoreControl}\n restorePosition={resizable.restorePosition}\n >\n <div\n class=\"kui-split-view__list kui-pane\"\n data-split-list\n data-resizable=\"true\"\n >\n {list}\n </div>\n </ResizableRegion>\n ) : (\n <div\n class=\"kui-split-view__list kui-pane\"\n data-split-list\n data-resizable=\"false\"\n >\n {list}\n </div>\n );\n return (\n <div\n class={`kui-split-view ${className}`.trim()}\n id={id}\n data-component=\"split-view\"\n data-split-mode=\"split\"\n aria-label={label}\n slot={slot}\n >\n {listPane}\n <div\n class=\"kui-split-view__detail kui-pane\"\n data-split-detail\n aria-label={detailTitle || undefined}\n >\n {detail}\n </div>\n </div>\n );\n}\n"]}
@@ -390,3 +390,35 @@
390
390
  display: none;
391
391
  }
392
392
  }
393
+ .kui-toolbar > [data-toolbar-visibility-probe] {
394
+ position: fixed;
395
+ left: 0;
396
+ top: 0;
397
+ height: 0;
398
+ overflow: hidden;
399
+ visibility: hidden;
400
+ pointer-events: none;
401
+ contain: layout paint;
402
+ }
403
+
404
+ .kui-toolbar > [data-toolbar-visibility-probe] > div {
405
+ position: absolute;
406
+ top: 0;
407
+ height: 0;
408
+ min-width: 0;
409
+ max-width: none;
410
+ padding: 0;
411
+ border: 0;
412
+ margin: 0;
413
+ }
414
+
415
+ /* A typed sentinel distinguishes invalid/unresolved input from a valid zero. */
416
+ @property --kui-toolbar-visibility-length {
417
+ syntax: "<length-percentage>";
418
+ inherits: false;
419
+ initial-value: -1px;
420
+ }
421
+ .kui-toolbar > [data-toolbar-visibility-probe] > div {
422
+ left: var(--kui-toolbar-visibility-length);
423
+ width: var(--kui-toolbar-visibility-length);
424
+ }
@@ -196,6 +196,10 @@
196
196
  ) {
197
197
  overflow: visible;
198
198
  }
199
+ .kui-toolbar-control-group[data-content="search"][data-expanded="true"][data-expanded-overflow="visible"] {
200
+ height: auto;
201
+ overflow: visible;
202
+ }
199
203
  .kui-toolbar-control-group[data-content="search"][data-expanded="false"] {
200
204
  width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
201
205
  flex: 0 0 auto;
@@ -606,17 +610,23 @@
606
610
  wa-button,
607
611
  .kui-select,
608
612
  .kui-toolbar-action-link
609
- ):only-child
613
+ ):nth-child(1 of :where(:not([data-toolbar-visibility-state]))):where(
614
+ :nth-last-child(1 of :not([data-toolbar-visibility-state]))
615
+ )
610
616
  ):hover {
611
617
  background-color: var(--kui-toolbar-control-hover-background);
612
618
  }
613
619
 
614
620
  .kui-toolbar-control-group:not([data-single="true"]):has(
615
- > :is(button, wa-button, .kui-toolbar-action-link):only-child
621
+ > :is(button, wa-button, .kui-toolbar-action-link):nth-child(
622
+ 1 of :where(:not([data-toolbar-visibility-state]))
623
+ ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
616
624
  )
617
625
  > :is(button, wa-button, .kui-toolbar-action-link):hover,
618
626
  .kui-toolbar-control-group:not([data-single="true"]):has(
619
- > :is(button, wa-button):only-child
627
+ > :is(button, wa-button):nth-child(
628
+ 1 of :where(:not([data-toolbar-visibility-state]))
629
+ ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
620
630
  )
621
631
  > wa-button:hover::part(base) {
622
632
  border-color: transparent;
@@ -761,25 +771,41 @@
761
771
 
762
772
  .kui-toolbar-control-group[data-content="avatar"]:is(
763
773
  [data-single="true"],
764
- :has(> :is(button, wa-button):only-child)
774
+ :has(
775
+ > :is(button, wa-button):nth-child(
776
+ 1 of :where(:not([data-toolbar-visibility-state]))
777
+ ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
778
+ )
765
779
  ) {
766
780
  background-image: var(--kui-toolbar-avatar-image);
767
781
  }
768
782
 
769
783
  .kui-toolbar-control-group[data-content="avatar"]:is(
770
784
  [data-single="true"],
771
- :has(> :is(button, wa-button):only-child)
785
+ :has(
786
+ > :is(button, wa-button):nth-child(
787
+ 1 of :where(:not([data-toolbar-visibility-state]))
788
+ ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
789
+ )
772
790
  )
773
791
  > :is(button, wa-button) {
774
792
  color: transparent;
775
793
  }
776
794
 
777
795
  .kui-toolbar-control-group[data-content="avatar"][data-single="false"]:not(
778
- :has(> :is(button, wa-button):only-child)
796
+ :has(
797
+ > :is(button, wa-button):nth-child(
798
+ 1 of :where(:not([data-toolbar-visibility-state]))
799
+ ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
800
+ )
779
801
  )
780
802
  > button[aria-pressed="true"],
781
803
  .kui-toolbar-control-group[data-content="avatar"][data-single="false"]:not(
782
- :has(> :is(button, wa-button):only-child)
804
+ :has(
805
+ > :is(button, wa-button):nth-child(
806
+ 1 of :where(:not([data-toolbar-visibility-state]))
807
+ ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
808
+ )
783
809
  )
784
810
  > wa-button[aria-pressed="true"]::part(base) {
785
811
  color: transparent;
@@ -788,3 +814,75 @@
788
814
  background-repeat: no-repeat;
789
815
  background-size: contain;
790
816
  }
817
+
818
+ /* Explicit quiet palette only for a lone decorative icon tile. The structural
819
+ guard keeps interactive, mixed and borderless groups on their existing chrome. */
820
+
821
+ .kui-toolbar-control-group[data-single="true"][data-appearance="contained"][data-tile-tone="neutral"]:has(
822
+ > svg[aria-hidden="true"]
823
+ ):not(
824
+ :has(> :not(svg[aria-hidden="true"], [data-toolbar-visibility-state])),
825
+ :has(> svg ~ svg)
826
+ ) {
827
+ background: var(--kui-color-neutral-fill-quiet);
828
+ border-color: var(--kui-color-neutral-border-quiet);
829
+ color: var(--kui-color-neutral-on-quiet);
830
+ }
831
+
832
+ .kui-toolbar-control-group[data-single="true"][data-appearance="contained"][data-tile-tone="brand"]:has(
833
+ > svg[aria-hidden="true"]
834
+ ):not(
835
+ :has(> :not(svg[aria-hidden="true"], [data-toolbar-visibility-state])),
836
+ :has(> svg ~ svg)
837
+ ) {
838
+ background: var(--kui-color-brand-fill-quiet);
839
+ border-color: var(--kui-color-brand-border-quiet);
840
+ color: var(--kui-color-brand-on-quiet);
841
+ }
842
+
843
+ .kui-toolbar-control-group[data-single="true"][data-appearance="contained"][data-tile-tone="success"]:has(
844
+ > svg[aria-hidden="true"]
845
+ ):not(
846
+ :has(> :not(svg[aria-hidden="true"], [data-toolbar-visibility-state])),
847
+ :has(> svg ~ svg)
848
+ ) {
849
+ background: var(--kui-color-success-fill-quiet);
850
+ border-color: var(--kui-color-success-border-quiet);
851
+ color: var(--kui-color-success-on-quiet);
852
+ }
853
+
854
+ .kui-toolbar-control-group[data-single="true"][data-appearance="contained"][data-tile-tone="warning"]:has(
855
+ > svg[aria-hidden="true"]
856
+ ):not(
857
+ :has(> :not(svg[aria-hidden="true"], [data-toolbar-visibility-state])),
858
+ :has(> svg ~ svg)
859
+ ) {
860
+ background: var(--kui-color-warning-fill-quiet);
861
+ border-color: var(--kui-color-warning-border-quiet);
862
+ color: var(--kui-color-warning-on-quiet);
863
+ }
864
+
865
+ .kui-toolbar-control-group[data-single="true"][data-appearance="contained"][data-tile-tone="danger"]:has(
866
+ > svg[aria-hidden="true"]
867
+ ):not(
868
+ :has(> :not(svg[aria-hidden="true"], [data-toolbar-visibility-state])),
869
+ :has(> svg ~ svg)
870
+ ) {
871
+ background: var(--kui-color-danger-fill-quiet);
872
+ border-color: var(--kui-color-danger-border-quiet);
873
+ color: var(--kui-color-danger-on-quiet);
874
+ }
875
+ .kui-toolbar-control-group[data-toolbar-width-hidden="true"],
876
+ .kui-toolbar-control-group__busy-status[data-toolbar-width-hidden="true"],
877
+ .kui-toolbar-control-group:has(
878
+ > [data-toolbar-visibility-state][data-toolbar-width-hidden="true"]
879
+ ),
880
+ .kui-toolbar-control-group__busy-status:has(
881
+ > [data-toolbar-visibility-state][data-toolbar-width-hidden="true"]
882
+ ) {
883
+ display: none;
884
+ }
885
+ .kui-toolbar-control-group > [data-toolbar-visibility-state],
886
+ .kui-toolbar-control-group__busy-status > [data-toolbar-visibility-state] {
887
+ display: none;
888
+ }
@@ -105,6 +105,14 @@ button.kui-toolbar-text:focus-visible {
105
105
  font-size: var(--kui-font-2xs);
106
106
  }
107
107
 
108
+ .kui-toolbar-text[data-tone="dark"] {
109
+ color: var(--kui-color-neutral-on-loud);
110
+ }
111
+
112
+ button.kui-toolbar-text[data-tone="dark"]:hover {
113
+ background: color-mix(in srgb, var(--kui-color-surface) 28%, transparent);
114
+ }
115
+
108
116
  /* Single line, no ellipsis: hard-clip the overflow instead of showing …. */
109
117
  .kui-toolbar-text[data-ellipsis="false"] .kui-toolbar-text__text {
110
118
  text-overflow: clip;
@@ -151,3 +159,12 @@ button.kui-toolbar-text:focus-visible {
151
159
  line-clamp: none;
152
160
  max-height: calc(var(--kui-toolbar-text-max-lines) * 1.25em);
153
161
  }
162
+ .kui-toolbar-text[data-toolbar-width-hidden="true"],
163
+ .kui-toolbar-text:has(
164
+ > [data-toolbar-visibility-state][data-toolbar-width-hidden="true"]
165
+ ) {
166
+ display: none;
167
+ }
168
+ .kui-toolbar-text > [data-toolbar-visibility-state] {
169
+ display: none;
170
+ }
@@ -158,6 +158,13 @@
158
158
  var(--_kui-pane-content-block-end);
159
159
  }
160
160
 
161
+ /* Add one outer gutter without changing the inherited item-margin token.
162
+ Nested Row, List, and Grid therefore keep their own default 8px insets. */
163
+ .kui-pane[data-deep-inset="true"] > .kui-pane__content {
164
+ padding-inline: calc(var(--_kui-pane-safe-inline-start) + var(--kui-space-xs))
165
+ calc(var(--_kui-pane-safe-inline-end) + var(--kui-space-xs));
166
+ }
167
+
161
168
  .kui-pane__header ~ .kui-pane__content {
162
169
  --_kui-pane-content-block-start: 0px;
163
170
  }
@@ -37,7 +37,9 @@
37
37
  transition: opacity var(--kui-nav-stack-transition-duration, 200ms) ease;
38
38
  }
39
39
 
40
+ /* Establish the starting opacity instantly; only the release animates. */
40
41
  .kui-nav-stack__chrome--entering {
42
+ transition: none;
41
43
  opacity: 0;
42
44
  }
43
45
 
@@ -69,10 +71,6 @@
69
71
  background: var(--kui-color-surface);
70
72
  }
71
73
 
72
- .kui-nav-stack__header {
73
- min-width: 0;
74
- }
75
-
76
74
  .kui-nav-stack__viewport {
77
75
  --kui-edge-inset-block-start: var(--_kui-nav-stack-safe-block-start);
78
76
  --kui-edge-inset-block-end: var(--_kui-nav-stack-safe-block-end);
@@ -104,11 +102,9 @@
104
102
  inset: 0;
105
103
  }
106
104
 
107
- .kui-nav-stack__view[data-appearance="sunken"] {
108
- background: var(
109
- --kui-sunken-panel-background,
110
- var(--kui-color-surface-lowered)
111
- );
105
+ .kui-nav-stack__view:has(> [data-component="pane"]) {
106
+ display: grid;
107
+ overflow: hidden;
112
108
  }
113
109
 
114
110
  /* Each view is its region's scroll owner: block insets become padding inside
@@ -156,6 +152,10 @@
156
152
  visibility: hidden;
157
153
  }
158
154
 
155
+ .kui-nav-stack__view[data-nav-revealed="true"] {
156
+ visibility: visible;
157
+ }
158
+
159
159
  .kui-nav-stack__view[data-nav-exiting="true"] {
160
160
  z-index: 1;
161
161
  visibility: visible;
@@ -163,15 +163,20 @@
163
163
 
164
164
  /* Push: the incoming view starts off the trailing edge and slides to rest.
165
165
  Pop: the outgoing view starts at rest and slides off the trailing edge. */
166
+ /* Establish the offscreen start without first transitioning toward it. */
167
+ .kui-nav-stack__view--entering {
168
+ transition: none;
169
+ }
170
+
166
171
  .kui-nav-stack__view--entering,
167
172
  .kui-nav-stack__view--exiting {
168
173
  transform: translateX(100%);
169
174
  }
170
175
 
171
176
  .kui-nav-stack__bottom {
172
- padding-block-end: var(--_kui-nav-stack-safe-block-end);
173
- padding-inline: var(--_kui-nav-stack-safe-inline-start)
174
- var(--_kui-nav-stack-safe-inline-end);
177
+ --kui-edge-inset-block-end: var(--_kui-nav-stack-safe-block-end);
178
+ --kui-edge-inset-inline-start: var(--_kui-nav-stack-safe-inline-start);
179
+ --kui-edge-inset-inline-end: var(--_kui-nav-stack-safe-inline-end);
175
180
  border-block-start: 1px solid
176
181
  var(--_kui-nav-stack-bottom-divider, transparent);
177
182
  background: var(--kui-color-surface);
@@ -73,6 +73,23 @@
73
73
  scroll-padding-block-start: var(--kui-edge-inset-block-start);
74
74
  }
75
75
 
76
+ /* A plain scene adds one outer gutter; a sole Pane or layout keeps ownership
77
+ of its own content and may opt into deepInset there. */
78
+ .kui-tab-scaffold__scene[data-deep-inset="true"]:not(
79
+ :has(
80
+ > :is(
81
+ [data-component="pane"],
82
+ [data-component="nav-stack"],
83
+ [data-component="split-view"],
84
+ [data-component="workbench"],
85
+ [data-component="tab-scaffold"]
86
+ ):only-child
87
+ )
88
+ ) {
89
+ padding-inline: calc(var(--kui-edge-inset-inline-start) + var(--kui-space-xs))
90
+ calc(var(--kui-edge-inset-inline-end) + var(--kui-space-xs));
91
+ }
92
+
76
93
  .kui-tab-scaffold__scene
77
94
  > :not(
78
95
  :is(