@womp/kookie-ui 0.26.3 → 0.27.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (161) hide show
  1. package/components.css +139 -0
  2. package/dist/cjs/components/_internal/pane-chrome.d.ts +13 -1
  3. package/dist/cjs/components/_internal/pane-chrome.d.ts.map +1 -1
  4. package/dist/cjs/components/_internal/pane-chrome.js +1 -1
  5. package/dist/cjs/components/_internal/pane-chrome.js.map +4 -4
  6. package/dist/cjs/components/_internal/shell-page-scroll.d.ts +15 -0
  7. package/dist/cjs/components/_internal/shell-page-scroll.d.ts.map +1 -0
  8. package/dist/cjs/components/_internal/shell-page-scroll.js +3 -0
  9. package/dist/cjs/components/_internal/shell-page-scroll.js.map +7 -0
  10. package/dist/cjs/components/_internal/shell-sidebar.js +1 -1
  11. package/dist/cjs/components/_internal/shell-sidebar.js.map +4 -4
  12. package/dist/cjs/components/index.js +2 -2
  13. package/dist/cjs/components/index.js.map +4 -4
  14. package/dist/cjs/components/schemas/index.js +1 -1
  15. package/dist/cjs/components/schemas/index.js.map +2 -2
  16. package/dist/cjs/components/schemas/shell.schema.d.ts +1 -0
  17. package/dist/cjs/components/schemas/shell.schema.d.ts.map +1 -1
  18. package/dist/cjs/components/schemas/shell.schema.js +1 -1
  19. package/dist/cjs/components/schemas/shell.schema.js.map +2 -2
  20. package/dist/cjs/components/shell.d.ts +11 -0
  21. package/dist/cjs/components/shell.d.ts.map +1 -1
  22. package/dist/cjs/components/shell.js +1 -1
  23. package/dist/cjs/components/shell.js.map +4 -4
  24. package/dist/cjs/components/sidebar.js +1 -1
  25. package/dist/cjs/components/sidebar.js.map +4 -4
  26. package/dist/cjs/components/toolbar.js +1 -1
  27. package/dist/cjs/components/toolbar.js.map +4 -4
  28. package/dist/cjs/index.js +4 -4
  29. package/dist/cjs/index.js.map +4 -4
  30. package/dist/esm/{chunk-GMWCTK5G.js → chunk-2E57H3NH.js} +2 -2
  31. package/dist/esm/{chunk-Q2TLWILH.js → chunk-2FYUM6TA.js} +2 -2
  32. package/dist/esm/{chunk-W3ES2XSB.js → chunk-2S7HPQVX.js} +2 -2
  33. package/dist/esm/{chunk-27XQ5PN5.js → chunk-2ZKEQS76.js} +2 -2
  34. package/dist/esm/chunk-4LV37PHM.js +3 -0
  35. package/dist/esm/chunk-4LV37PHM.js.map +7 -0
  36. package/dist/esm/{chunk-WYKNBNM5.js → chunk-5BX2YZV6.js} +2 -2
  37. package/dist/esm/{chunk-VPP5IDW7.js → chunk-67UEMB4K.js} +2 -2
  38. package/dist/esm/{chunk-MPCCYR7L.js → chunk-6YWHNLSC.js} +2 -2
  39. package/dist/esm/{chunk-6C6EK2B5.js → chunk-7V6M3MIR.js} +2 -2
  40. package/dist/esm/{chunk-T2DZDW5Y.js → chunk-AQKSO3SW.js} +2 -2
  41. package/dist/esm/{chunk-ACMANOVD.js → chunk-AS2STDGA.js} +2 -2
  42. package/dist/esm/{chunk-IDEDEPBM.js → chunk-B6OFKABP.js} +2 -2
  43. package/dist/esm/chunk-CZ24FOFS.js +3 -0
  44. package/dist/esm/chunk-CZ24FOFS.js.map +7 -0
  45. package/dist/esm/{chunk-RP5ORPPH.js → chunk-DP7MPGR7.js} +2 -2
  46. package/dist/esm/{chunk-UMR4AF35.js → chunk-FMVOB367.js} +2 -2
  47. package/dist/esm/{chunk-YOZXIUZY.js → chunk-FVRVBB6O.js} +2 -2
  48. package/dist/esm/{chunk-6JGF6PQH.js → chunk-H2J25HXP.js} +2 -2
  49. package/dist/esm/{chunk-E2LSWNWZ.js → chunk-HBO7W7SS.js} +2 -2
  50. package/dist/esm/{chunk-2R7WQPXX.js → chunk-HR2VHGJ5.js} +2 -2
  51. package/dist/esm/{chunk-3UIODOPE.js → chunk-J54GYD7A.js} +2 -2
  52. package/dist/esm/{chunk-DSM5SUH3.js → chunk-JKQN6QCP.js} +2 -2
  53. package/dist/esm/{chunk-FK434VPA.js → chunk-JTMLFTNZ.js} +2 -2
  54. package/dist/esm/{chunk-R7YHDIFM.js → chunk-K3GDM26A.js} +2 -2
  55. package/dist/esm/{chunk-CGFLZ3DC.js → chunk-KJZSXLIX.js} +2 -2
  56. package/dist/esm/{chunk-KLYI5E6F.js → chunk-LABMK6Q7.js} +2 -2
  57. package/dist/esm/{chunk-OLWUS7PC.js → chunk-MJKVVGGV.js} +2 -2
  58. package/dist/esm/chunk-MJROOEPE.js +3 -0
  59. package/dist/esm/chunk-MJROOEPE.js.map +7 -0
  60. package/dist/esm/{chunk-Z5W4ACO2.js → chunk-MMDZBPSX.js} +2 -2
  61. package/dist/esm/chunk-QEDKL23P.js +3 -0
  62. package/dist/esm/chunk-QEDKL23P.js.map +7 -0
  63. package/dist/esm/{chunk-ZIAA2C4H.js → chunk-REORAMUH.js} +2 -2
  64. package/dist/esm/{chunk-MCHK36NI.js → chunk-SUQJ7DD4.js} +2 -2
  65. package/dist/esm/{chunk-OUOP6Q3Z.js → chunk-VQDCHBZR.js} +2 -2
  66. package/dist/esm/{chunk-2NWHEGKZ.js → chunk-WAXRIARV.js} +2 -2
  67. package/dist/esm/{chunk-4CIQRUYW.js → chunk-ZOUIIO4C.js} +2 -2
  68. package/dist/esm/components/_internal/base-button.js +1 -1
  69. package/dist/esm/components/_internal/pane-chrome.d.ts +13 -1
  70. package/dist/esm/components/_internal/pane-chrome.d.ts.map +1 -1
  71. package/dist/esm/components/_internal/pane-chrome.js +1 -1
  72. package/dist/esm/components/_internal/portal-theme.js +1 -1
  73. package/dist/esm/components/_internal/shell-page-scroll.d.ts +15 -0
  74. package/dist/esm/components/_internal/shell-page-scroll.d.ts.map +1 -0
  75. package/dist/esm/components/_internal/shell-page-scroll.js +3 -0
  76. package/dist/esm/components/_internal/shell-page-scroll.js.map +7 -0
  77. package/dist/esm/components/_internal/shell-sidebar.js +1 -1
  78. package/dist/esm/components/accordion.js +1 -1
  79. package/dist/esm/components/alert-dialog.js +1 -1
  80. package/dist/esm/components/avatar.js +1 -1
  81. package/dist/esm/components/button.js +1 -1
  82. package/dist/esm/components/chatbar.js +1 -1
  83. package/dist/esm/components/checkbox-group.js +1 -1
  84. package/dist/esm/components/checkbox.js +1 -1
  85. package/dist/esm/components/chip.js +1 -1
  86. package/dist/esm/components/combobox.js +1 -1
  87. package/dist/esm/components/context-menu.js +1 -1
  88. package/dist/esm/components/dialog.js +1 -1
  89. package/dist/esm/components/dropdown-menu.js +1 -1
  90. package/dist/esm/components/index.js +1 -1
  91. package/dist/esm/components/message-scroller.js +1 -1
  92. package/dist/esm/components/notice.js +1 -1
  93. package/dist/esm/components/popover.js +1 -1
  94. package/dist/esm/components/radio-group.js +1 -1
  95. package/dist/esm/components/radio.js +1 -1
  96. package/dist/esm/components/schemas/index.js +1 -1
  97. package/dist/esm/components/schemas/shell.schema.d.ts +1 -0
  98. package/dist/esm/components/schemas/shell.schema.d.ts.map +1 -1
  99. package/dist/esm/components/schemas/shell.schema.js +1 -1
  100. package/dist/esm/components/select.js +1 -1
  101. package/dist/esm/components/sheet.js +1 -1
  102. package/dist/esm/components/shell.d.ts +11 -0
  103. package/dist/esm/components/shell.d.ts.map +1 -1
  104. package/dist/esm/components/shell.js +1 -1
  105. package/dist/esm/components/sidebar.js +1 -1
  106. package/dist/esm/components/slider.js +1 -1
  107. package/dist/esm/components/switch.js +1 -1
  108. package/dist/esm/components/tabs.js +1 -1
  109. package/dist/esm/components/text-area.js +1 -1
  110. package/dist/esm/components/text-field.js +1 -1
  111. package/dist/esm/components/theme.js +1 -1
  112. package/dist/esm/components/toggle.js +1 -1
  113. package/dist/esm/components/toolbar.js +1 -1
  114. package/dist/esm/components/tooltip.js +1 -1
  115. package/dist/esm/index.js +1 -1
  116. package/package.json +1 -1
  117. package/schemas/index.json +6 -1
  118. package/schemas/shell-root.json +6 -1
  119. package/src/components/_internal/pane-chrome.tsx +23 -4
  120. package/src/components/_internal/shell-page-scroll.ts +49 -0
  121. package/src/components/message-scroller.css +3 -0
  122. package/src/components/schemas/shell.schema.ts +4 -1
  123. package/src/components/shell.css +201 -0
  124. package/src/components/shell.tsx +128 -22
  125. package/styles.css +139 -0
  126. package/dist/esm/chunk-OLTRWCQK.js +0 -3
  127. package/dist/esm/chunk-OLTRWCQK.js.map +0 -7
  128. package/dist/esm/chunk-SCIFT27R.js +0 -3
  129. package/dist/esm/chunk-SCIFT27R.js.map +0 -7
  130. package/dist/esm/chunk-XGES2VBG.js +0 -3
  131. package/dist/esm/chunk-XGES2VBG.js.map +0 -7
  132. /package/dist/esm/{chunk-GMWCTK5G.js.map → chunk-2E57H3NH.js.map} +0 -0
  133. /package/dist/esm/{chunk-Q2TLWILH.js.map → chunk-2FYUM6TA.js.map} +0 -0
  134. /package/dist/esm/{chunk-W3ES2XSB.js.map → chunk-2S7HPQVX.js.map} +0 -0
  135. /package/dist/esm/{chunk-27XQ5PN5.js.map → chunk-2ZKEQS76.js.map} +0 -0
  136. /package/dist/esm/{chunk-WYKNBNM5.js.map → chunk-5BX2YZV6.js.map} +0 -0
  137. /package/dist/esm/{chunk-VPP5IDW7.js.map → chunk-67UEMB4K.js.map} +0 -0
  138. /package/dist/esm/{chunk-MPCCYR7L.js.map → chunk-6YWHNLSC.js.map} +0 -0
  139. /package/dist/esm/{chunk-6C6EK2B5.js.map → chunk-7V6M3MIR.js.map} +0 -0
  140. /package/dist/esm/{chunk-T2DZDW5Y.js.map → chunk-AQKSO3SW.js.map} +0 -0
  141. /package/dist/esm/{chunk-ACMANOVD.js.map → chunk-AS2STDGA.js.map} +0 -0
  142. /package/dist/esm/{chunk-IDEDEPBM.js.map → chunk-B6OFKABP.js.map} +0 -0
  143. /package/dist/esm/{chunk-RP5ORPPH.js.map → chunk-DP7MPGR7.js.map} +0 -0
  144. /package/dist/esm/{chunk-UMR4AF35.js.map → chunk-FMVOB367.js.map} +0 -0
  145. /package/dist/esm/{chunk-YOZXIUZY.js.map → chunk-FVRVBB6O.js.map} +0 -0
  146. /package/dist/esm/{chunk-6JGF6PQH.js.map → chunk-H2J25HXP.js.map} +0 -0
  147. /package/dist/esm/{chunk-E2LSWNWZ.js.map → chunk-HBO7W7SS.js.map} +0 -0
  148. /package/dist/esm/{chunk-2R7WQPXX.js.map → chunk-HR2VHGJ5.js.map} +0 -0
  149. /package/dist/esm/{chunk-3UIODOPE.js.map → chunk-J54GYD7A.js.map} +0 -0
  150. /package/dist/esm/{chunk-DSM5SUH3.js.map → chunk-JKQN6QCP.js.map} +0 -0
  151. /package/dist/esm/{chunk-FK434VPA.js.map → chunk-JTMLFTNZ.js.map} +0 -0
  152. /package/dist/esm/{chunk-R7YHDIFM.js.map → chunk-K3GDM26A.js.map} +0 -0
  153. /package/dist/esm/{chunk-CGFLZ3DC.js.map → chunk-KJZSXLIX.js.map} +0 -0
  154. /package/dist/esm/{chunk-KLYI5E6F.js.map → chunk-LABMK6Q7.js.map} +0 -0
  155. /package/dist/esm/{chunk-OLWUS7PC.js.map → chunk-MJKVVGGV.js.map} +0 -0
  156. /package/dist/esm/{chunk-Z5W4ACO2.js.map → chunk-MMDZBPSX.js.map} +0 -0
  157. /package/dist/esm/{chunk-ZIAA2C4H.js.map → chunk-REORAMUH.js.map} +0 -0
  158. /package/dist/esm/{chunk-MCHK36NI.js.map → chunk-SUQJ7DD4.js.map} +0 -0
  159. /package/dist/esm/{chunk-OUOP6Q3Z.js.map → chunk-VQDCHBZR.js.map} +0 -0
  160. /package/dist/esm/{chunk-2NWHEGKZ.js.map → chunk-WAXRIARV.js.map} +0 -0
  161. /package/dist/esm/{chunk-4CIQRUYW.js.map → chunk-ZOUIIO4C.js.map} +0 -0
@@ -1,3 +1,3 @@
1
1
  "use client";
2
- import{a}from"../chunk-R7YHDIFM.js";import"../chunk-OKQAVYW4.js";import"../chunk-HBWBPBSA.js";import"../chunk-5ON3XLRD.js";import"../chunk-XU74PNM2.js";import"../chunk-VQPANPMI.js";export{a as TextArea};
2
+ import{a}from"../chunk-K3GDM26A.js";import"../chunk-OKQAVYW4.js";import"../chunk-5ON3XLRD.js";import"../chunk-HBWBPBSA.js";import"../chunk-XU74PNM2.js";import"../chunk-VQPANPMI.js";export{a as TextArea};
3
3
  //# sourceMappingURL=text-area.js.map
@@ -1,3 +1,3 @@
1
1
  "use client";
2
- "use client";import{a,b}from"../chunk-4CIQRUYW.js";import"../chunk-YCLPURTD.js";import"../chunk-CR65RYGM.js";import"../chunk-OAJ5DARR.js";import"../chunk-OKQAVYW4.js";import"../chunk-HBWBPBSA.js";import"../chunk-5ON3XLRD.js";import"../chunk-XU74PNM2.js";import"../chunk-CLJ6SEGP.js";import"../chunk-VQPANPMI.js";export{a as Root,b as Slot};
2
+ "use client";import{a,b}from"../chunk-ZOUIIO4C.js";import"../chunk-YCLPURTD.js";import"../chunk-CR65RYGM.js";import"../chunk-OAJ5DARR.js";import"../chunk-OKQAVYW4.js";import"../chunk-5ON3XLRD.js";import"../chunk-HBWBPBSA.js";import"../chunk-XU74PNM2.js";import"../chunk-CLJ6SEGP.js";import"../chunk-VQPANPMI.js";export{a as Root,b as Slot};
3
3
  //# sourceMappingURL=text-field.js.map
@@ -1,3 +1,3 @@
1
1
  "use client";
2
- "use client";import{a,b,c}from"../chunk-YOZXIUZY.js";import"../chunk-GHUAUFG7.js";import"../chunk-HBWBPBSA.js";import"../chunk-5ON3XLRD.js";import"../chunk-XU74PNM2.js";import"../chunk-CLJ6SEGP.js";import"../chunk-VQPANPMI.js";export{c as Theme,a as ThemeContext,b as useThemeContext};
2
+ "use client";import{a,b,c}from"../chunk-FVRVBB6O.js";import"../chunk-GHUAUFG7.js";import"../chunk-5ON3XLRD.js";import"../chunk-HBWBPBSA.js";import"../chunk-XU74PNM2.js";import"../chunk-CLJ6SEGP.js";import"../chunk-VQPANPMI.js";export{c as Theme,a as ThemeContext,b as useThemeContext};
3
3
  //# sourceMappingURL=theme.js.map
@@ -1,3 +1,3 @@
1
1
  "use client";
2
- import{a}from"../chunk-UMR4AF35.js";import"../chunk-CGFLZ3DC.js";import"../chunk-Y2DBXOLT.js";import"../chunk-MPCCYR7L.js";import"../chunk-4MNRLB57.js";import"../chunk-BQC2P3SN.js";import"../chunk-UJ7JERJ5.js";import"../chunk-27XQ5PN5.js";import"../chunk-BUXK5VGR.js";import"../chunk-KVVRFWGQ.js";import"../chunk-YCLPURTD.js";import"../chunk-CR65RYGM.js";import"../chunk-GKDGNPBD.js";import"../chunk-7N2Q5WOM.js";import"../chunk-OAJ5DARR.js";import"../chunk-5KMEUZWN.js";import"../chunk-LPLW7OWA.js";import"../chunk-L54FWKJE.js";import"../chunk-OKQAVYW4.js";import"../chunk-T2DZDW5Y.js";import"../chunk-YOZXIUZY.js";import"../chunk-GHUAUFG7.js";import"../chunk-HBWBPBSA.js";import"../chunk-5ON3XLRD.js";import"../chunk-XU74PNM2.js";import"../chunk-CLJ6SEGP.js";import"../chunk-ANQLWGFN.js";import"../chunk-VQPANPMI.js";export{a as Toggle};
2
+ import{a}from"../chunk-FMVOB367.js";import"../chunk-KJZSXLIX.js";import"../chunk-Y2DBXOLT.js";import"../chunk-6YWHNLSC.js";import"../chunk-4MNRLB57.js";import"../chunk-BQC2P3SN.js";import"../chunk-UJ7JERJ5.js";import"../chunk-2ZKEQS76.js";import"../chunk-BUXK5VGR.js";import"../chunk-KVVRFWGQ.js";import"../chunk-YCLPURTD.js";import"../chunk-CR65RYGM.js";import"../chunk-GKDGNPBD.js";import"../chunk-7N2Q5WOM.js";import"../chunk-OAJ5DARR.js";import"../chunk-5KMEUZWN.js";import"../chunk-LPLW7OWA.js";import"../chunk-L54FWKJE.js";import"../chunk-OKQAVYW4.js";import"../chunk-AQKSO3SW.js";import"../chunk-FVRVBB6O.js";import"../chunk-GHUAUFG7.js";import"../chunk-5ON3XLRD.js";import"../chunk-HBWBPBSA.js";import"../chunk-XU74PNM2.js";import"../chunk-CLJ6SEGP.js";import"../chunk-ANQLWGFN.js";import"../chunk-VQPANPMI.js";export{a as Toggle};
3
3
  //# sourceMappingURL=toggle.js.map
@@ -1,3 +1,3 @@
1
1
  "use client";
2
- "use client";import{a,b,c,d,e,f,g,h,i,j}from"../chunk-FK434VPA.js";import"../chunk-VPP5IDW7.js";import"../chunk-2ACVWLFA.js";import"../chunk-TGRHRMQI.js";import"../chunk-CGFLZ3DC.js";import"../chunk-Y2DBXOLT.js";import"../chunk-MPCCYR7L.js";import"../chunk-4MNRLB57.js";import"../chunk-BQC2P3SN.js";import"../chunk-UJ7JERJ5.js";import"../chunk-27XQ5PN5.js";import"../chunk-BUXK5VGR.js";import"../chunk-KVVRFWGQ.js";import"../chunk-YCLPURTD.js";import"../chunk-CR65RYGM.js";import"../chunk-GKDGNPBD.js";import"../chunk-7N2Q5WOM.js";import"../chunk-OAJ5DARR.js";import"../chunk-5KMEUZWN.js";import"../chunk-5JYSYTHA.js";import"../chunk-ISCZ57VL.js";import"../chunk-EB4AG3OL.js";import"../chunk-QPRUTOLI.js";import"../chunk-OLTRWCQK.js";import"../chunk-MGWGD6KI.js";import"../chunk-KOAWATCI.js";import"../chunk-5KJIPH2N.js";import"../chunk-YOSLXJI5.js";import"../chunk-LPLW7OWA.js";import"../chunk-L54FWKJE.js";import"../chunk-OKQAVYW4.js";import"../chunk-T2DZDW5Y.js";import"../chunk-YOZXIUZY.js";import"../chunk-GHUAUFG7.js";import"../chunk-HBWBPBSA.js";import"../chunk-5ON3XLRD.js";import"../chunk-XU74PNM2.js";import"../chunk-CLJ6SEGP.js";import"../chunk-ANQLWGFN.js";import"../chunk-G66WDIIV.js";import"../chunk-GHWEXMF6.js";import"../chunk-MAA6LEE2.js";import"../chunk-VQPANPMI.js";export{d as Button,g as Fill,c as Group,e as Overflow,b as Root,h as Separator,f as Slot,i as Title,j as Toolbar,d as ToolbarButton,g as ToolbarFill,c as ToolbarGroup,e as ToolbarOverflow,h as ToolbarSeparator,f as ToolbarSlot,i as ToolbarTitle,a as useToolbarOverflow};
2
+ "use client";import{a,b,c,d,e,f,g,h,i,j}from"../chunk-JTMLFTNZ.js";import"../chunk-67UEMB4K.js";import"../chunk-2ACVWLFA.js";import"../chunk-TGRHRMQI.js";import"../chunk-KJZSXLIX.js";import"../chunk-Y2DBXOLT.js";import"../chunk-6YWHNLSC.js";import"../chunk-4MNRLB57.js";import"../chunk-BQC2P3SN.js";import"../chunk-UJ7JERJ5.js";import"../chunk-2ZKEQS76.js";import"../chunk-BUXK5VGR.js";import"../chunk-KVVRFWGQ.js";import"../chunk-YCLPURTD.js";import"../chunk-CR65RYGM.js";import"../chunk-GKDGNPBD.js";import"../chunk-7N2Q5WOM.js";import"../chunk-OAJ5DARR.js";import"../chunk-5KMEUZWN.js";import"../chunk-5JYSYTHA.js";import"../chunk-ISCZ57VL.js";import"../chunk-EB4AG3OL.js";import"../chunk-QPRUTOLI.js";import"../chunk-MJROOEPE.js";import"../chunk-MGWGD6KI.js";import"../chunk-KOAWATCI.js";import"../chunk-5KJIPH2N.js";import"../chunk-YOSLXJI5.js";import"../chunk-QEDKL23P.js";import"../chunk-LPLW7OWA.js";import"../chunk-L54FWKJE.js";import"../chunk-OKQAVYW4.js";import"../chunk-AQKSO3SW.js";import"../chunk-FVRVBB6O.js";import"../chunk-GHUAUFG7.js";import"../chunk-5ON3XLRD.js";import"../chunk-HBWBPBSA.js";import"../chunk-XU74PNM2.js";import"../chunk-CLJ6SEGP.js";import"../chunk-ANQLWGFN.js";import"../chunk-G66WDIIV.js";import"../chunk-GHWEXMF6.js";import"../chunk-MAA6LEE2.js";import"../chunk-VQPANPMI.js";export{d as Button,g as Fill,c as Group,e as Overflow,b as Root,h as Separator,f as Slot,i as Title,j as Toolbar,d as ToolbarButton,g as ToolbarFill,c as ToolbarGroup,e as ToolbarOverflow,h as ToolbarSeparator,f as ToolbarSlot,i as ToolbarTitle,a as useToolbarOverflow};
3
3
  //# sourceMappingURL=toolbar.js.map
@@ -1,3 +1,3 @@
1
1
  "use client";
2
- import{a,b}from"../chunk-MPCCYR7L.js";import"../chunk-4MNRLB57.js";import"../chunk-BQC2P3SN.js";import"../chunk-UJ7JERJ5.js";import"../chunk-L54FWKJE.js";import"../chunk-OKQAVYW4.js";import"../chunk-T2DZDW5Y.js";import"../chunk-YOZXIUZY.js";import"../chunk-GHUAUFG7.js";import"../chunk-HBWBPBSA.js";import"../chunk-5ON3XLRD.js";import"../chunk-XU74PNM2.js";import"../chunk-CLJ6SEGP.js";import"../chunk-ANQLWGFN.js";import"../chunk-VQPANPMI.js";export{b as Tooltip,a as TooltipProvider};
2
+ import{a,b}from"../chunk-6YWHNLSC.js";import"../chunk-4MNRLB57.js";import"../chunk-BQC2P3SN.js";import"../chunk-UJ7JERJ5.js";import"../chunk-L54FWKJE.js";import"../chunk-OKQAVYW4.js";import"../chunk-AQKSO3SW.js";import"../chunk-FVRVBB6O.js";import"../chunk-GHUAUFG7.js";import"../chunk-5ON3XLRD.js";import"../chunk-HBWBPBSA.js";import"../chunk-XU74PNM2.js";import"../chunk-CLJ6SEGP.js";import"../chunk-ANQLWGFN.js";import"../chunk-VQPANPMI.js";export{b as Tooltip,a as TooltipProvider};
3
3
  //# sourceMappingURL=tooltip.js.map
package/dist/esm/index.js CHANGED
@@ -1,3 +1,3 @@
1
1
  "use client";
2
- import"./chunk-AYKOOEZR.js";import{a as uo}from"./chunk-RIHTVZVJ.js";import{a as vo,b as wo,c as yo,d as zo}from"./chunk-3LIF53YY.js";import{a as so}from"./chunk-WTP2KIK3.js";import"./chunk-NG54K6FL.js";import{a as eo}from"./chunk-R7YHDIFM.js";import{c as fo}from"./chunk-4CIQRUYW.js";import{a as mo}from"./chunk-UMR4AF35.js";import{a as po,c as to,d as xo,e as ao,f as bo,g as co,h as go,i as ho,j as io}from"./chunk-FK434VPA.js";import{a as jo}from"./chunk-7QBNXNEN.js";import{l as ko}from"./chunk-Q2TLWILH.js";import{a as _}from"./chunk-IDEDEPBM.js";import{a as $}from"./chunk-DSM5SUH3.js";import{h as oo}from"./chunk-X7JHZ3HA.js";import{e as ro}from"./chunk-ZIAA2C4H.js";import{c as X}from"./chunk-W4Z6ORYO.js";import{h as Y}from"./chunk-OUOP6Q3Z.js";import{a as Z}from"./chunk-324VC67W.js";import{g as no}from"./chunk-2R7WQPXX.js";import{h as lo}from"./chunk-XGES2VBG.js";import"./chunk-4G3FJUER.js";import"./chunk-ZG2XQUOH.js";import{c as U}from"./chunk-E2LSWNWZ.js";import{a as V}from"./chunk-6JGF6PQH.js";import{a as W}from"./chunk-L66IUPDW.js";import{a as Q}from"./chunk-C67MM24U.js";import{i as qo}from"./chunk-Z5W4ACO2.js";import{e as R}from"./chunk-NWXODCTD.js";import{a as S}from"./chunk-AXODGYRY.js";import{a as T}from"./chunk-D2C2A2ZK.js";import{g as M}from"./chunk-WYKNBNM5.js";import{o as N}from"./chunk-VPP5IDW7.js";import{a as O}from"./chunk-Q5SANVIW.js";import{a as P}from"./chunk-ENQV6SEA.js";import{m as E}from"./chunk-KLYI5E6F.js";import{b as B,c as C}from"./chunk-6C6EK2B5.js";import{c as F}from"./chunk-FYTLUDL3.js";import"./chunk-2VSRZ4IT.js";import{a as G}from"./chunk-JD4KR6VZ.js";import"./chunk-4KIZRO52.js";import{a as H}from"./chunk-3UIODOPE.js";import{a as I}from"./chunk-WD66RYF6.js";import{l as K}from"./chunk-GMWCTK5G.js";import{g as J}from"./chunk-OLWUS7PC.js";import{a as D}from"./chunk-WUCBFB25.js";import{n as L}from"./chunk-W3ES2XSB.js";import"./chunk-2ACVWLFA.js";import{a as h}from"./chunk-B6YGNB3V.js";import{f as i}from"./chunk-RP5ORPPH.js";import{h as n}from"./chunk-2NWHEGKZ.js";import"./chunk-FATCGZZE.js";import{a as l}from"./chunk-7VJF6EXN.js";import{a as j}from"./chunk-JP36JSNP.js";import"./chunk-TGRHRMQI.js";import{a as q}from"./chunk-MCHK36NI.js";import{a as s}from"./chunk-HLIOHDEX.js";import{a as u}from"./chunk-XD3C3GVF.js";import{a as z}from"./chunk-CGFLZ3DC.js";import{a as y}from"./chunk-Y2DBXOLT.js";import{a as v,b as w}from"./chunk-MPCCYR7L.js";import{a as k}from"./chunk-4MNRLB57.js";import"./chunk-BQC2P3SN.js";import"./chunk-UJ7JERJ5.js";import{a as A}from"./chunk-EPGIYTFK.js";import"./chunk-YMUERC2J.js";import"./chunk-ACMANOVD.js";import"./chunk-27XQ5PN5.js";import{a as f}from"./chunk-BUXK5VGR.js";import{a as e}from"./chunk-KVVRFWGQ.js";import"./chunk-YCLPURTD.js";import"./chunk-CR65RYGM.js";import{a as m,b as p,c as t,d as x}from"./chunk-GKDGNPBD.js";import"./chunk-7N2Q5WOM.js";import"./chunk-OAJ5DARR.js";import{b as o,c as r}from"./chunk-5KMEUZWN.js";import"./chunk-5JYSYTHA.js";import"./chunk-ISCZ57VL.js";import"./chunk-EB4AG3OL.js";import{a}from"./chunk-QPRUTOLI.js";import"./chunk-OLTRWCQK.js";import{a as b}from"./chunk-MGWGD6KI.js";import"./chunk-KOAWATCI.js";import"./chunk-5KJIPH2N.js";import"./chunk-YOSLXJI5.js";import"./chunk-LPLW7OWA.js";import"./chunk-L54FWKJE.js";import"./chunk-OKQAVYW4.js";import"./chunk-T2DZDW5Y.js";import{a as c,b as d,c as g}from"./chunk-YOZXIUZY.js";import"./chunk-GHUAUFG7.js";import"./chunk-HBWBPBSA.js";import"./chunk-5ON3XLRD.js";import"./chunk-XU74PNM2.js";import"./chunk-CLJ6SEGP.js";import"./chunk-ANQLWGFN.js";import"./chunk-QRV32INS.js";import"./chunk-3QWGSRYC.js";import"./chunk-LTUW36HM.js";import"./chunk-QKCNGEX4.js";import"./chunk-WEBNIUEX.js";import"./chunk-XUCR7L4G.js";import"./chunk-G66WDIIV.js";import"./chunk-GHWEXMF6.js";import"./chunk-MAA6LEE2.js";import"./chunk-VQPANPMI.js";export{vo as APPEARANCE_STORAGE_KEY,h as AccessibleIcon,i as Accordion,n as AlertDialog,q as Avatar,s as Blockquote,u as Box,z as Button,A as Card,E as Chatbar,G as Checkbox,F as CheckboxGroup,t as ChevronDownIcon,H as Chip,I as Code,K as Combobox,C as Confirmation,L as ContextMenu,M as Dialog,N as DropdownMenu,e as Flex,O as Grid,j as Heading,P as Image,a as Kbd,Q as Link,qo as MessageScroller,R as Navbar,B as Notice,J as Popover,S as Portal,T as Progress,V as Radio,U as RadioGroup,W as Reset,b as ScrollArea,X as SegmentedControl,Y as Select,Z as Separator,no as Sheet,lo as Shell,ko as Sidebar,_ as Slider,o as Slot,r as Slottable,f as Spinner,$ as Switch,oo as Table,ro as Tabs,k as Text,eo as TextArea,fo as TextField,g as Theme,c as ThemeContext,p as ThickCheckIcon,x as ThickChevronRightIcon,m as ThickDividerHorizontalIcon,mo as Toggle,io as Toolbar,xo as ToolbarButton,co as ToolbarFill,to as ToolbarGroup,ao as ToolbarOverflow,go as ToolbarSeparator,bo as ToolbarSlot,ho as ToolbarTitle,w as Tooltip,v as TooltipProvider,jo as VirtualMenu,D as VisuallyHidden,wo as appearanceScript,yo as setAppearance,zo as useAppearance,l as useBodyPointerEventsCleanup,so as useLiveAnnouncer,d as useThemeContext,uo as useToggleState,po as useToolbarOverflow,y as useTooltipWrapper};
2
+ import"./chunk-AYKOOEZR.js";import{a as uo}from"./chunk-RIHTVZVJ.js";import{a as vo,b as wo,c as yo,d as zo}from"./chunk-3LIF53YY.js";import{a as so}from"./chunk-WTP2KIK3.js";import"./chunk-NG54K6FL.js";import{a as jo}from"./chunk-7QBNXNEN.js";import{e as ro}from"./chunk-REORAMUH.js";import{a as eo}from"./chunk-K3GDM26A.js";import{c as fo}from"./chunk-ZOUIIO4C.js";import{a as mo}from"./chunk-FMVOB367.js";import{a as po,c as to,d as xo,e as ao,f as bo,g as co,h as go,i as ho,j as io}from"./chunk-JTMLFTNZ.js";import{h as lo}from"./chunk-4LV37PHM.js";import{l as ko}from"./chunk-2FYUM6TA.js";import{a as _}from"./chunk-B6OFKABP.js";import{a as $}from"./chunk-JKQN6QCP.js";import{h as oo}from"./chunk-X7JHZ3HA.js";import{c as X}from"./chunk-W4Z6ORYO.js";import{h as Y}from"./chunk-VQDCHBZR.js";import{a as Z}from"./chunk-324VC67W.js";import{g as no}from"./chunk-HR2VHGJ5.js";import"./chunk-4G3FJUER.js";import"./chunk-ZG2XQUOH.js";import{a as T}from"./chunk-D2C2A2ZK.js";import{c as U}from"./chunk-HBO7W7SS.js";import{a as V}from"./chunk-H2J25HXP.js";import{a as W}from"./chunk-L66IUPDW.js";import{a as Q}from"./chunk-C67MM24U.js";import{i as qo}from"./chunk-MMDZBPSX.js";import{e as R}from"./chunk-NWXODCTD.js";import{a as S}from"./chunk-AXODGYRY.js";import{n as L}from"./chunk-2S7HPQVX.js";import{g as M}from"./chunk-5BX2YZV6.js";import{o as N}from"./chunk-67UEMB4K.js";import"./chunk-2ACVWLFA.js";import{a as O}from"./chunk-Q5SANVIW.js";import{a as P}from"./chunk-ENQV6SEA.js";import{a as A}from"./chunk-EPGIYTFK.js";import{m as E}from"./chunk-LABMK6Q7.js";import{b as B,c as C}from"./chunk-7V6M3MIR.js";import{c as F}from"./chunk-FYTLUDL3.js";import"./chunk-2VSRZ4IT.js";import{a as G}from"./chunk-JD4KR6VZ.js";import"./chunk-4KIZRO52.js";import{a as H}from"./chunk-J54GYD7A.js";import{a as I}from"./chunk-WD66RYF6.js";import{l as K}from"./chunk-2E57H3NH.js";import{g as J}from"./chunk-MJKVVGGV.js";import{a as D}from"./chunk-WUCBFB25.js";import{a as h}from"./chunk-B6YGNB3V.js";import{f as i}from"./chunk-DP7MPGR7.js";import{h as n}from"./chunk-WAXRIARV.js";import"./chunk-FATCGZZE.js";import{a as l}from"./chunk-7VJF6EXN.js";import{a as j}from"./chunk-JP36JSNP.js";import"./chunk-TGRHRMQI.js";import{a as q}from"./chunk-SUQJ7DD4.js";import{a as s}from"./chunk-HLIOHDEX.js";import{a as u}from"./chunk-XD3C3GVF.js";import{a as z}from"./chunk-KJZSXLIX.js";import{a as y}from"./chunk-Y2DBXOLT.js";import{a as v,b as w}from"./chunk-6YWHNLSC.js";import{a as k}from"./chunk-4MNRLB57.js";import"./chunk-BQC2P3SN.js";import"./chunk-UJ7JERJ5.js";import"./chunk-YMUERC2J.js";import"./chunk-AS2STDGA.js";import"./chunk-2ZKEQS76.js";import{a as f}from"./chunk-BUXK5VGR.js";import{a as e}from"./chunk-KVVRFWGQ.js";import"./chunk-YCLPURTD.js";import"./chunk-CR65RYGM.js";import{a as m,b as p,c as t,d as x}from"./chunk-GKDGNPBD.js";import"./chunk-7N2Q5WOM.js";import"./chunk-OAJ5DARR.js";import{b as o,c as r}from"./chunk-5KMEUZWN.js";import"./chunk-5JYSYTHA.js";import"./chunk-ISCZ57VL.js";import"./chunk-EB4AG3OL.js";import{a}from"./chunk-QPRUTOLI.js";import"./chunk-MJROOEPE.js";import{a as b}from"./chunk-MGWGD6KI.js";import"./chunk-KOAWATCI.js";import"./chunk-5KJIPH2N.js";import"./chunk-YOSLXJI5.js";import"./chunk-QEDKL23P.js";import"./chunk-LPLW7OWA.js";import"./chunk-L54FWKJE.js";import"./chunk-OKQAVYW4.js";import"./chunk-AQKSO3SW.js";import{a as c,b as d,c as g}from"./chunk-FVRVBB6O.js";import"./chunk-GHUAUFG7.js";import"./chunk-5ON3XLRD.js";import"./chunk-HBWBPBSA.js";import"./chunk-XU74PNM2.js";import"./chunk-CLJ6SEGP.js";import"./chunk-ANQLWGFN.js";import"./chunk-QRV32INS.js";import"./chunk-3QWGSRYC.js";import"./chunk-LTUW36HM.js";import"./chunk-QKCNGEX4.js";import"./chunk-WEBNIUEX.js";import"./chunk-XUCR7L4G.js";import"./chunk-G66WDIIV.js";import"./chunk-GHWEXMF6.js";import"./chunk-MAA6LEE2.js";import"./chunk-VQPANPMI.js";export{vo as APPEARANCE_STORAGE_KEY,h as AccessibleIcon,i as Accordion,n as AlertDialog,q as Avatar,s as Blockquote,u as Box,z as Button,A as Card,E as Chatbar,G as Checkbox,F as CheckboxGroup,t as ChevronDownIcon,H as Chip,I as Code,K as Combobox,C as Confirmation,L as ContextMenu,M as Dialog,N as DropdownMenu,e as Flex,O as Grid,j as Heading,P as Image,a as Kbd,Q as Link,qo as MessageScroller,R as Navbar,B as Notice,J as Popover,S as Portal,T as Progress,V as Radio,U as RadioGroup,W as Reset,b as ScrollArea,X as SegmentedControl,Y as Select,Z as Separator,no as Sheet,lo as Shell,ko as Sidebar,_ as Slider,o as Slot,r as Slottable,f as Spinner,$ as Switch,oo as Table,ro as Tabs,k as Text,eo as TextArea,fo as TextField,g as Theme,c as ThemeContext,p as ThickCheckIcon,x as ThickChevronRightIcon,m as ThickDividerHorizontalIcon,mo as Toggle,io as Toolbar,xo as ToolbarButton,co as ToolbarFill,to as ToolbarGroup,ao as ToolbarOverflow,go as ToolbarSeparator,bo as ToolbarSlot,ho as ToolbarTitle,w as Tooltip,v as TooltipProvider,jo as VirtualMenu,D as VisuallyHidden,wo as appearanceScript,yo as setAppearance,zo as useAppearance,l as useBodyPointerEventsCleanup,so as useLiveAnnouncer,d as useThemeContext,uo as useToggleState,po as useToolbarOverflow,y as useTooltipWrapper};
3
3
  //# sourceMappingURL=index.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@womp/kookie-ui",
3
- "version": "0.26.3",
3
+ "version": "0.27.1",
4
4
  "description": "Kookie UI v1: a React component library with design tokens, flexible theming, a full layout shell, and comprehensive documentation.",
5
5
  "keywords": [
6
6
  "react",
@@ -898,7 +898,7 @@
898
898
  "properties": {
899
899
  "height": {
900
900
  "default": "full",
901
- "description": "Height of the frame. `full` is 100dvh, with 100vh where dvh is not supported.",
901
+ "description": "Height of the frame. `full` is the window: 100dvh, with 100vh where dvh is not supported, and on a narrow touch screen the page scrolls. Any value other than `full` or `auto` makes the Shell contained.",
902
902
  "anyOf": [
903
903
  {
904
904
  "type": "string",
@@ -916,6 +916,11 @@
916
916
  }
917
917
  ]
918
918
  },
919
+ "contained": {
920
+ "default": false,
921
+ "description": "Fills the parent instead of the window and always scrolls inside itself. An explicit `height` implies it.",
922
+ "type": "boolean"
923
+ },
919
924
  "size": {
920
925
  "default": "2",
921
926
  "description": "Index of the pane chrome and the Sidebar rows in it",
@@ -6,7 +6,7 @@
6
6
  "properties": {
7
7
  "height": {
8
8
  "default": "full",
9
- "description": "Height of the frame. `full` is 100dvh, with 100vh where dvh is not supported.",
9
+ "description": "Height of the frame. `full` is the window: 100dvh, with 100vh where dvh is not supported, and on a narrow touch screen the page scrolls. Any value other than `full` or `auto` makes the Shell contained.",
10
10
  "anyOf": [
11
11
  {
12
12
  "type": "string",
@@ -24,6 +24,11 @@
24
24
  }
25
25
  ]
26
26
  },
27
+ "contained": {
28
+ "default": false,
29
+ "description": "Fills the parent instead of the window and always scrolls inside itself. An explicit `height` implies it.",
30
+ "type": "boolean"
31
+ },
27
32
  "size": {
28
33
  "default": "2",
29
34
  "description": "Index of the pane chrome and the Sidebar rows in it",
@@ -15,6 +15,7 @@ import classNames from 'classnames';
15
15
  import { ScrollArea } from '../scroll-area.js';
16
16
  import { ShellStoreContext } from './shell-store.js';
17
17
  import { PaneBandSizeContext, type BandSize } from './pane-band-context.js';
18
+ import { usePageScrollMedia } from './shell-page-scroll.js';
18
19
 
19
20
  type PaneSize = '1' | '2' | '3';
20
21
 
@@ -42,6 +43,13 @@ const ShellSizeContext = React.createContext<PaneSize>('2');
42
43
  */
43
44
  const ShellContentContext = React.createContext(false);
44
45
 
46
+ /**
47
+ * True inside a window Shell: one with no `contained` and no `height`, which lets the page scroll
48
+ * on a narrow touch screen. Each `Shell.Root` sets its own, so a Shell nested in another answers
49
+ * for itself.
50
+ */
51
+ const ShellWindowContext = React.createContext(false);
52
+
45
53
  /**
46
54
  * Gives a Shell pane's children the Shell's index, so Sidebar parts size themselves. In a Rail
47
55
  * the rows are `thin`: icon tiles with a small label, sub-menus as dropdowns.
@@ -141,6 +149,12 @@ PaneFooter.displayName = 'Shell.PaneFooter';
141
149
  interface ScrollProps extends React.ComponentPropsWithoutRef<'div'> {
142
150
  /** Fades the list out toward an edge with more past it, and under a floating header or footer. */
143
151
  fade?: boolean;
152
+ /**
153
+ * Keeps the pane's list (its menu rows) when React puts this under `Shell.Content`, as when an
154
+ * app renders a pane's content in its page and portals it into `Shell.Panel`. In a Rail, Panel
155
+ * or Sidebar it is already the pane's list.
156
+ */
157
+ pane?: boolean;
144
158
  }
145
159
 
146
160
  /**
@@ -150,15 +164,20 @@ interface ScrollProps extends React.ComponentPropsWithoutRef<'div'> {
150
164
  * `className`, `style` and `dir` apply to the content inside it. In a Rail, Panel or Sidebar the pane is
151
165
  * already a navigation landmark, so it needs no role of its own.
152
166
  */
153
- const Scroll = React.forwardRef<HTMLDivElement, ScrollProps>(({ className, style, dir, children, fade = false, ...props }, forwardedRef) => {
167
+ const Scroll = React.forwardRef<HTMLDivElement, ScrollProps>(({ className, style, dir, children, fade = false, pane = false, ...props }, forwardedRef) => {
154
168
  const chrome = useChromeClasses();
155
169
  // A Sidebar.Root inside the content still gets a menu.
156
170
  const contentPane = React.useContext(ShellContentContext);
157
171
  const visual = useSidebarVisual();
158
- const inContent = contentPane && visual === null;
172
+ const inContent = contentPane && visual === null && !pane;
173
+ // While the page scrolls, the content's viewport scrolls nothing: as a tab stop it would take a
174
+ // Tab, ring the whole page and move nothing. Resolved after mount; a `tabIndex` of the caller's wins.
175
+ const windowShell = React.useContext(ShellWindowContext);
176
+ const pageScrolls = usePageScrollMedia();
159
177
  if (inContent) {
178
+ const tabIndex = props.tabIndex ?? (windowShell && pageScrolls ? -1 : undefined);
160
179
  return (
161
- <ScrollArea {...props} ref={forwardedRef} type="hover" fade={fade} className="kui-ShellScroll">
180
+ <ScrollArea {...props} tabIndex={tabIndex} ref={forwardedRef} type="hover" fade={fade} className="kui-ShellScroll">
162
181
  <div style={style} dir={dir} className={classNames('kui-ShellScrollContent', className)}>
163
182
  {children}
164
183
  </div>
@@ -178,5 +197,5 @@ const Scroll = React.forwardRef<HTMLDivElement, ScrollProps>(({ className, style
178
197
  });
179
198
  Scroll.displayName = 'Shell.Scroll';
180
199
 
181
- export { SidebarVisualContext, useSidebarVisual, ShellSizeContext, ShellContentContext, PaneChromeScope, PaneHeader, PaneFooter, Scroll, BAND_STEP, usePaneBandSize };
200
+ export { SidebarVisualContext, useSidebarVisual, ShellSizeContext, ShellContentContext, ShellWindowContext, PaneChromeScope, PaneHeader, PaneFooter, Scroll, BAND_STEP, usePaneBandSize };
182
201
  export type { SidebarVisualContextValue, PaneSize, BandSize, PaneHeaderProps, PaneFooterProps, ScrollProps };
@@ -0,0 +1,49 @@
1
+ 'use client';
2
+
3
+ import * as React from 'react';
4
+
5
+ /**
6
+ * When a window Shell lets the page scroll: a narrow window (below the `sm` breakpoint) under a
7
+ * coarse pointer. The stylesheet decides it (shell.css, the page-scroll block), so first paint is
8
+ * right with no script. This is the script's copy, for the few things only script can do when the
9
+ * answer changes: carry the reading position between the two scrollers, and take the content's
10
+ * unused viewport out of the tab order. A test holds it equal to the stylesheet's.
11
+ */
12
+ export const PAGE_SCROLL_QUERY = '(max-width: 767.98px) and (pointer: coarse)';
13
+
14
+ let list: MediaQueryList | undefined;
15
+ const media = () => (list ??= window.matchMedia(PAGE_SCROLL_QUERY));
16
+
17
+ function listen(m: MediaQueryList, handler: () => void): () => void {
18
+ // Safari below 14 has only the deprecated listener API.
19
+ if (typeof m.addEventListener === 'function') {
20
+ m.addEventListener('change', handler);
21
+ return () => m.removeEventListener('change', handler);
22
+ }
23
+ m.addListener?.(handler);
24
+ return () => m.removeListener?.(handler);
25
+ }
26
+
27
+ function subscribe(onChange: () => void): () => void {
28
+ return listen(media(), onChange);
29
+ }
30
+
31
+ /** True where a window Shell lets the page scroll. False on the server and through hydration. */
32
+ export function usePageScrollMedia(): boolean {
33
+ return React.useSyncExternalStore(
34
+ subscribe,
35
+ () => media().matches,
36
+ () => false,
37
+ );
38
+ }
39
+
40
+ /** Whether the page scrolls right now. */
41
+ export function pageScrollMatches(): boolean {
42
+ return media().matches;
43
+ }
44
+
45
+ /** Subscribes to the answer changing, outside React. */
46
+ export function onPageScrollMediaChange(onChange: (matches: boolean) => void): () => void {
47
+ const m = media();
48
+ return listen(m, () => onChange(m.matches));
49
+ }
@@ -45,6 +45,9 @@
45
45
  right: 0;
46
46
  margin-inline: auto;
47
47
  z-index: 1;
48
+ /* Centred by left/right 0 and auto margins, so it needs a width of its own: an icon-only button
49
+ is square by aspect-ratio, and without one it stretched across the transcript. */
50
+ width: var(--base-button-height);
48
51
  }
49
52
 
50
53
  /* Asleep while the reader is at the end: the primitive makes it inert; this makes it unseen. */
@@ -122,7 +122,10 @@ export const ShellRootSchema = z
122
122
  height: z
123
123
  .union([z.literal('full'), z.literal('auto'), z.string(), z.number()])
124
124
  .default('full')
125
- .describe('Height of the frame. `full` is 100dvh, with 100vh where dvh is not supported.'),
125
+ .describe(
126
+ 'Height of the frame. `full` is the window: 100dvh, with 100vh where dvh is not supported, and on a narrow touch screen the page scrolls. Any value other than `full` or `auto` makes the Shell contained.',
127
+ ),
128
+ contained: z.boolean().default(false).describe('Fills the parent instead of the window and always scrolls inside itself. An explicit `height` implies it.'),
126
129
  size: z.enum(['1', '2', '3']).default('2').describe('Index of the pane chrome and the Sidebar rows in it'),
127
130
  className: z.string().optional().describe('Additional CSS class name'),
128
131
  style: StyleSchema,
@@ -30,6 +30,8 @@
30
30
  --shell-inset-gap: var(--space-3);
31
31
  /* Written inline by the Root while a Rail shows; stated here so a nested Shell never inherits its parent's. */
32
32
  --shell-rail-offset: 0px;
33
+ /* How far the stuck header reaches down the screen while the page scrolls. Stated here so a nested Shell never inherits its parent's. */
34
+ --kui-shell-page-top: 0px;
33
35
 
34
36
  display: grid;
35
37
  grid-template-areas:
@@ -58,6 +60,14 @@
58
60
  }
59
61
  }
60
62
 
63
+ /*
64
+ * A contained Shell fills its parent instead of the window. An explicit `height` is written
65
+ * inline and wins over this.
66
+ */
67
+ .kui-ShellRoot[data-contained] {
68
+ height: 100%;
69
+ }
70
+
61
71
  /* While an overlay is live the page holds still. Counted across Shells by the Root. */
62
72
  :root[data-kui-shell-lock] {
63
73
  overflow: hidden;
@@ -115,6 +125,8 @@
115
125
  --kui-pane-band-end: initial;
116
126
  --kui-shell-position: initial;
117
127
  --kui-shell-z: initial;
128
+ --kui-shell-pin: initial;
129
+ --kui-shell-pin-top: initial;
118
130
  --kui-shell-row: initial;
119
131
  --kui-shell-col: initial;
120
132
  --kui-shell-surface: initial;
@@ -470,6 +482,8 @@
470
482
  .kui-ShellRail[data-presentation='overlay'] ~ .kui-ShellPanel[data-presentation-follows] {
471
483
  --kui-shell-position: absolute;
472
484
  --kui-shell-z: 6;
485
+ --kui-shell-pin: fixed;
486
+ --kui-shell-pin-top: 0px;
473
487
  --kui-shell-row: 1 / -1;
474
488
  --kui-shell-col: 1 / -1;
475
489
  --kui-shell-surface: var(--color-surface);
@@ -484,6 +498,8 @@
484
498
  .kui-ShellRail[data-presentation='stacked'] ~ .kui-ShellPanel[data-presentation-follows] {
485
499
  --kui-shell-position: absolute;
486
500
  --kui-shell-z: 3;
501
+ --kui-shell-pin: fixed;
502
+ --kui-shell-pin-top: initial;
487
503
  --kui-shell-row: 2 / 3;
488
504
  --kui-shell-col: 1 / -1;
489
505
  --kui-shell-surface: var(--color-surface);
@@ -503,6 +519,8 @@
503
519
  .kui-ShellRail[data-presentation-initial='fixed'] ~ .kui-ShellPanel[data-presentation-follows] {
504
520
  --kui-shell-position: initial;
505
521
  --kui-shell-z: initial;
522
+ --kui-shell-pin: initial;
523
+ --kui-shell-pin-top: initial;
506
524
  --kui-shell-row: initial;
507
525
  --kui-shell-col: initial;
508
526
  --kui-shell-surface: initial;
@@ -517,6 +535,8 @@
517
535
  .kui-ShellRail[data-presentation-initial='overlay'] ~ .kui-ShellPanel[data-presentation-follows] {
518
536
  --kui-shell-position: absolute;
519
537
  --kui-shell-z: 6;
538
+ --kui-shell-pin: fixed;
539
+ --kui-shell-pin-top: 0px;
520
540
  --kui-shell-row: 1 / -1;
521
541
  --kui-shell-col: 1 / -1;
522
542
  --kui-shell-surface: var(--color-surface);
@@ -531,6 +551,8 @@
531
551
  .kui-ShellRail[data-presentation-initial='stacked'] ~ .kui-ShellPanel[data-presentation-follows] {
532
552
  --kui-shell-position: absolute;
533
553
  --kui-shell-z: 3;
554
+ --kui-shell-pin: fixed;
555
+ --kui-shell-pin-top: initial;
534
556
  --kui-shell-row: 2 / 3;
535
557
  --kui-shell-col: 1 / -1;
536
558
  --kui-shell-surface: var(--color-surface);
@@ -558,6 +580,8 @@
558
580
  .kui-ShellRail[data-presentation-xs='fixed'] ~ .kui-ShellPanel[data-presentation-follows] {
559
581
  --kui-shell-position: initial;
560
582
  --kui-shell-z: initial;
583
+ --kui-shell-pin: initial;
584
+ --kui-shell-pin-top: initial;
561
585
  --kui-shell-row: initial;
562
586
  --kui-shell-col: initial;
563
587
  --kui-shell-surface: initial;
@@ -572,6 +596,8 @@
572
596
  .kui-ShellRail[data-presentation-xs='overlay'] ~ .kui-ShellPanel[data-presentation-follows] {
573
597
  --kui-shell-position: absolute;
574
598
  --kui-shell-z: 6;
599
+ --kui-shell-pin: fixed;
600
+ --kui-shell-pin-top: 0px;
575
601
  --kui-shell-row: 1 / -1;
576
602
  --kui-shell-col: 1 / -1;
577
603
  --kui-shell-surface: var(--color-surface);
@@ -586,6 +612,8 @@
586
612
  .kui-ShellRail[data-presentation-xs='stacked'] ~ .kui-ShellPanel[data-presentation-follows] {
587
613
  --kui-shell-position: absolute;
588
614
  --kui-shell-z: 3;
615
+ --kui-shell-pin: fixed;
616
+ --kui-shell-pin-top: initial;
589
617
  --kui-shell-row: 2 / 3;
590
618
  --kui-shell-col: 1 / -1;
591
619
  --kui-shell-surface: var(--color-surface);
@@ -614,6 +642,8 @@
614
642
  .kui-ShellRail[data-presentation-sm='fixed'] ~ .kui-ShellPanel[data-presentation-follows] {
615
643
  --kui-shell-position: initial;
616
644
  --kui-shell-z: initial;
645
+ --kui-shell-pin: initial;
646
+ --kui-shell-pin-top: initial;
617
647
  --kui-shell-row: initial;
618
648
  --kui-shell-col: initial;
619
649
  --kui-shell-surface: initial;
@@ -628,6 +658,8 @@
628
658
  .kui-ShellRail[data-presentation-sm='overlay'] ~ .kui-ShellPanel[data-presentation-follows] {
629
659
  --kui-shell-position: absolute;
630
660
  --kui-shell-z: 6;
661
+ --kui-shell-pin: fixed;
662
+ --kui-shell-pin-top: 0px;
631
663
  --kui-shell-row: 1 / -1;
632
664
  --kui-shell-col: 1 / -1;
633
665
  --kui-shell-surface: var(--color-surface);
@@ -642,6 +674,8 @@
642
674
  .kui-ShellRail[data-presentation-sm='stacked'] ~ .kui-ShellPanel[data-presentation-follows] {
643
675
  --kui-shell-position: absolute;
644
676
  --kui-shell-z: 3;
677
+ --kui-shell-pin: fixed;
678
+ --kui-shell-pin-top: initial;
645
679
  --kui-shell-row: 2 / 3;
646
680
  --kui-shell-col: 1 / -1;
647
681
  --kui-shell-surface: var(--color-surface);
@@ -670,6 +704,8 @@
670
704
  .kui-ShellRail[data-presentation-md='fixed'] ~ .kui-ShellPanel[data-presentation-follows] {
671
705
  --kui-shell-position: initial;
672
706
  --kui-shell-z: initial;
707
+ --kui-shell-pin: initial;
708
+ --kui-shell-pin-top: initial;
673
709
  --kui-shell-row: initial;
674
710
  --kui-shell-col: initial;
675
711
  --kui-shell-surface: initial;
@@ -684,6 +720,8 @@
684
720
  .kui-ShellRail[data-presentation-md='overlay'] ~ .kui-ShellPanel[data-presentation-follows] {
685
721
  --kui-shell-position: absolute;
686
722
  --kui-shell-z: 6;
723
+ --kui-shell-pin: fixed;
724
+ --kui-shell-pin-top: 0px;
687
725
  --kui-shell-row: 1 / -1;
688
726
  --kui-shell-col: 1 / -1;
689
727
  --kui-shell-surface: var(--color-surface);
@@ -698,6 +736,8 @@
698
736
  .kui-ShellRail[data-presentation-md='stacked'] ~ .kui-ShellPanel[data-presentation-follows] {
699
737
  --kui-shell-position: absolute;
700
738
  --kui-shell-z: 3;
739
+ --kui-shell-pin: fixed;
740
+ --kui-shell-pin-top: initial;
701
741
  --kui-shell-row: 2 / 3;
702
742
  --kui-shell-col: 1 / -1;
703
743
  --kui-shell-surface: var(--color-surface);
@@ -726,6 +766,8 @@
726
766
  .kui-ShellRail[data-presentation-lg='fixed'] ~ .kui-ShellPanel[data-presentation-follows] {
727
767
  --kui-shell-position: initial;
728
768
  --kui-shell-z: initial;
769
+ --kui-shell-pin: initial;
770
+ --kui-shell-pin-top: initial;
729
771
  --kui-shell-row: initial;
730
772
  --kui-shell-col: initial;
731
773
  --kui-shell-surface: initial;
@@ -740,6 +782,8 @@
740
782
  .kui-ShellRail[data-presentation-lg='overlay'] ~ .kui-ShellPanel[data-presentation-follows] {
741
783
  --kui-shell-position: absolute;
742
784
  --kui-shell-z: 6;
785
+ --kui-shell-pin: fixed;
786
+ --kui-shell-pin-top: 0px;
743
787
  --kui-shell-row: 1 / -1;
744
788
  --kui-shell-col: 1 / -1;
745
789
  --kui-shell-surface: var(--color-surface);
@@ -754,6 +798,8 @@
754
798
  .kui-ShellRail[data-presentation-lg='stacked'] ~ .kui-ShellPanel[data-presentation-follows] {
755
799
  --kui-shell-position: absolute;
756
800
  --kui-shell-z: 3;
801
+ --kui-shell-pin: fixed;
802
+ --kui-shell-pin-top: initial;
757
803
  --kui-shell-row: 2 / 3;
758
804
  --kui-shell-col: 1 / -1;
759
805
  --kui-shell-surface: var(--color-surface);
@@ -782,6 +828,8 @@
782
828
  .kui-ShellRail[data-presentation-xl='fixed'] ~ .kui-ShellPanel[data-presentation-follows] {
783
829
  --kui-shell-position: initial;
784
830
  --kui-shell-z: initial;
831
+ --kui-shell-pin: initial;
832
+ --kui-shell-pin-top: initial;
785
833
  --kui-shell-row: initial;
786
834
  --kui-shell-col: initial;
787
835
  --kui-shell-surface: initial;
@@ -796,6 +844,8 @@
796
844
  .kui-ShellRail[data-presentation-xl='overlay'] ~ .kui-ShellPanel[data-presentation-follows] {
797
845
  --kui-shell-position: absolute;
798
846
  --kui-shell-z: 6;
847
+ --kui-shell-pin: fixed;
848
+ --kui-shell-pin-top: 0px;
799
849
  --kui-shell-row: 1 / -1;
800
850
  --kui-shell-col: 1 / -1;
801
851
  --kui-shell-surface: var(--color-surface);
@@ -810,6 +860,8 @@
810
860
  .kui-ShellRail[data-presentation-xl='stacked'] ~ .kui-ShellPanel[data-presentation-follows] {
811
861
  --kui-shell-position: absolute;
812
862
  --kui-shell-z: 3;
863
+ --kui-shell-pin: fixed;
864
+ --kui-shell-pin-top: initial;
813
865
  --kui-shell-row: 2 / 3;
814
866
  --kui-shell-col: 1 / -1;
815
867
  --kui-shell-surface: var(--color-surface);
@@ -844,6 +896,8 @@
844
896
  .kui-ShellRail ~ .kui-ShellPanel[data-presentation-follows][data-peek][data-state] {
845
897
  --kui-shell-position: absolute;
846
898
  --kui-shell-z: 4;
899
+ --kui-shell-pin: fixed;
900
+ --kui-shell-pin-top: initial;
847
901
  --kui-shell-row: 2 / 3;
848
902
  --kui-shell-col: 1 / -1;
849
903
  --kui-shell-surface: var(--color-surface);
@@ -946,6 +1000,153 @@
946
1000
  margin-block-start: 0;
947
1001
  }
948
1002
 
1003
+ /* ── On a phone, the page scrolls (0.27.0) ────────────────────────────────── */
1004
+
1005
+ /*
1006
+ * Ported from kookie-ui-v2's Shell. A mobile browser hides its toolbars only when the document
1007
+ * scrolls; no scroller inside the page reaches them. So on a narrow window with a coarse pointer
1008
+ * a window Shell (`data-window`: no `contained`, no `height`) grows with its content and the
1009
+ * document scrolls instead of the content pane. Everything that stayed put while the pane
1010
+ * scrolled stays put while the page scrolls: the header and the content's pinned rows stick, and
1011
+ * the drawers and the scrim attach to the screen.
1012
+ *
1013
+ * Narrow is below the `sm` breakpoint, where v1's panes leave the overlay posture by default.
1014
+ * `_internal/shell-page-scroll.ts` holds the same query for the few things only script can do,
1015
+ * and a test holds the two equal.
1016
+ *
1017
+ * Content that cannot wrap is clipped at the screen's edge rather than widening the page: it
1018
+ * needs its own horizontal scroller, as a code block has.
1019
+ */
1020
+ @media (max-width: 767.98px) and (pointer: coarse) {
1021
+ /* `clip`, not `hidden`: a hidden box is a scroll container, and it would catch every sticky row. */
1022
+ .kui-ShellRoot[data-window] {
1023
+ height: auto;
1024
+ min-height: 100vh;
1025
+ overflow: clip;
1026
+ }
1027
+
1028
+ @supports (height: 100dvh) {
1029
+ .kui-ShellRoot[data-window] {
1030
+ min-height: 100dvh;
1031
+ }
1032
+ }
1033
+
1034
+ /* The header's height, for the rows that stick beneath it. The Root writes `--kui-shell-header-h`
1035
+ when a Shell.Header is not the default 64px. */
1036
+ .kui-ShellRoot[data-window]:has(> .kui-ShellHeader) {
1037
+ --kui-shell-page-top: var(--kui-shell-header-h, 64px);
1038
+ }
1039
+
1040
+ .kui-ShellRoot[data-window] > .kui-ShellHeader {
1041
+ position: sticky;
1042
+ top: 0;
1043
+ }
1044
+
1045
+ /*
1046
+ * The content stops scrolling. Isolated, so nothing the app layers inside it climbs over a
1047
+ * sticky row and takes its taps. A focused control or a linked heading scrolls into view
1048
+ * beneath the stuck rows rather than under them.
1049
+ */
1050
+ .kui-ShellRoot[data-window] > .kui-ShellContent {
1051
+ overflow: clip;
1052
+ isolation: isolate;
1053
+ }
1054
+
1055
+ .kui-ShellRoot[data-window] > .kui-ShellContent :where(*) {
1056
+ scroll-margin-block: calc(var(--kui-shell-page-top) + var(--kui-content-float-start, 0px)) var(--kui-content-float-end, 0px);
1057
+ }
1058
+
1059
+ /* The floating rows' reach, as the content's Shell.Scroll works it out above. */
1060
+ .kui-ShellRoot[data-window] > .kui-ShellContent:has(> .kui-ShellPaneHeader[data-float]) {
1061
+ --kui-content-float-start: calc(max(var(--kui-pane-row-start), var(--kui-pane-band-start, 0px)) + 2 * var(--kui-pane-pad-start));
1062
+ }
1063
+
1064
+ .kui-ShellRoot[data-window] > .kui-ShellContent:has(> .kui-ShellPaneFooter[data-float]) {
1065
+ --kui-content-float-end: calc(max(var(--kui-pane-row-end), var(--kui-pane-band-end, 0px)) + 2 * var(--kui-pane-pad-end));
1066
+ }
1067
+
1068
+ /*
1069
+ * Shell.Scroll in the content stops scrolling too and grows with what it holds. The viewport's
1070
+ * overflow is written inline by Radix, hence `!important`. Its scrollbar and fade go: the
1071
+ * document's own scrollbar is the one a phone shows, and a mask with nothing to scroll could
1072
+ * only cut the page's edge.
1073
+ */
1074
+ .kui-ShellRoot[data-window] > .kui-ShellContent > .kui-ShellScroll {
1075
+ flex: none;
1076
+ height: auto;
1077
+ overflow: clip;
1078
+ }
1079
+
1080
+ .kui-ShellRoot[data-window] > .kui-ShellContent > .kui-ShellScroll > .kui-ScrollAreaViewport {
1081
+ height: auto;
1082
+ overflow: visible !important;
1083
+ mask-image: none;
1084
+ }
1085
+
1086
+ .kui-ShellRoot[data-window] > .kui-ShellContent > .kui-ShellScroll > .kui-ScrollAreaScrollbar {
1087
+ display: none;
1088
+ }
1089
+
1090
+ /*
1091
+ * The floating rows stick, and still float. Sticky is in flow, so a negative margin gives back
1092
+ * the room the row takes and the page starts where it starts in the frame. `order` because a
1093
+ * row sticks where it sits, and a footer must sit after the page.
1094
+ */
1095
+ .kui-ShellRoot[data-window] > .kui-ShellContent:has(> .kui-ShellScroll) > .kui-ShellPaneHeader[data-float] {
1096
+ position: sticky;
1097
+ top: var(--kui-shell-page-top);
1098
+ order: -1;
1099
+ margin-bottom: calc(-1 * var(--kui-content-float-start, 0px));
1100
+ }
1101
+
1102
+ .kui-ShellRoot[data-window] > .kui-ShellContent:has(> .kui-ShellScroll) > .kui-ShellPaneFooter[data-float] {
1103
+ position: sticky;
1104
+ bottom: 0;
1105
+ order: 1;
1106
+ margin-top: calc(-1 * var(--kui-content-float-end, 0px));
1107
+ }
1108
+
1109
+ /* A pinned sibling of the Scroll pins to the screen: one before it to the top, beneath the
1110
+ header, one after it to the bottom. */
1111
+ .kui-ShellRoot[data-window] > .kui-ShellContent > :not(.kui-ShellScroll, [data-float]):has(~ .kui-ShellScroll) {
1112
+ position: sticky;
1113
+ top: var(--kui-shell-page-top);
1114
+ z-index: 1;
1115
+ }
1116
+
1117
+ .kui-ShellRoot[data-window] > .kui-ShellContent > .kui-ShellScroll ~ :not([data-float]) {
1118
+ position: sticky;
1119
+ bottom: 0;
1120
+ z-index: 1;
1121
+ }
1122
+
1123
+ /*
1124
+ * The panes. A pane over the page (overlay, stacked, peek) attaches to the screen: its posture
1125
+ * writes `--kui-shell-pin: fixed`. A pane in flow sticks beneath the header, a screen tall, and
1126
+ * the bottom pane sticks to the screen's bottom. An overlay covers the header
1127
+ * (`--kui-shell-pin-top: 0px`); the rest start beneath it.
1128
+ */
1129
+ .kui-ShellRoot[data-window] > :is(.kui-ShellRail, .kui-ShellPanel, .kui-ShellSidebar, .kui-ShellInspector) {
1130
+ position: var(--kui-shell-pin, sticky);
1131
+ top: var(--kui-shell-pin-top, var(--kui-shell-page-top));
1132
+ block-size: calc(100vh - var(--kui-shell-pin-top, var(--kui-shell-page-top)));
1133
+ }
1134
+
1135
+ @supports (height: 100dvh) {
1136
+ .kui-ShellRoot[data-window] > :is(.kui-ShellRail, .kui-ShellPanel, .kui-ShellSidebar, .kui-ShellInspector) {
1137
+ block-size: calc(100dvh - var(--kui-shell-pin-top, var(--kui-shell-page-top)));
1138
+ }
1139
+ }
1140
+
1141
+ .kui-ShellRoot[data-window] > .kui-ShellBottom {
1142
+ position: var(--kui-shell-pin, sticky);
1143
+ }
1144
+
1145
+ .kui-ShellRoot[data-window] > .kui-ShellScrim {
1146
+ position: fixed;
1147
+ }
1148
+ }
1149
+
949
1150
  /* ── Resize handle ─────────────────────────────────────────────────────────── */
950
1151
 
951
1152
  /* A transparent hit area straddling the pane's edge. */