@womp/kookie-ui 0.25.1 → 0.25.2

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 (5) hide show
  1. package/components.css +14 -1
  2. package/package.json +1 -1
  3. package/src/components/shell.css +7 -2
  4. package/src/components/sidebar.css +10 -0
  5. package/styles.css +14 -1
package/components.css CHANGED
@@ -10938,6 +10938,11 @@
10938
10938
  -ms-flex: 1;
10939
10939
  flex: 1;
10940
10940
  }
10941
+ .kui-SidebarHeader:where(.kui-SidebarHeader--container) > :where(.kui-Toolbar) {
10942
+ -webkit-box-flex: 1;
10943
+ -ms-flex: 1;
10944
+ flex: 1;
10945
+ }
10941
10946
  .kui-SidebarFooter:where(.kui-SidebarFooter--container) {
10942
10947
  display: -webkit-box;
10943
10948
  display: -ms-flexbox;
@@ -10958,6 +10963,11 @@
10958
10963
  -ms-flex: 1;
10959
10964
  flex: 1;
10960
10965
  }
10966
+ .kui-SidebarFooter:where(.kui-SidebarFooter--container) > :where(.kui-Toolbar) {
10967
+ -webkit-box-flex: 1;
10968
+ -ms-flex: 1;
10969
+ flex: 1;
10970
+ }
10961
10971
  .kui-SidebarHeader :where(.kui-SidebarMenuButton),
10962
10972
  .kui-SidebarFooter :where(.kui-SidebarMenuButton) {
10963
10973
  display: -webkit-box;
@@ -12012,12 +12022,15 @@
12012
12022
  z-index: 1;
12013
12023
  pointer-events: none;
12014
12024
  }
12015
- :is(.kui-ShellPaneHeader[data-float],.kui-ShellPaneFooter[data-float]) > :where(*),:is(.kui-ShellPaneHeader[data-float],.kui-ShellPaneFooter[data-float]) > :where(.kui-Toolbar) > :where(*) {
12025
+ :is(.kui-ShellPaneHeader[data-float],.kui-ShellPaneFooter[data-float]) > :where(*) {
12016
12026
  pointer-events: auto;
12017
12027
  }
12018
12028
  :is(.kui-ShellPaneHeader[data-float],.kui-ShellPaneFooter[data-float]) > :where(.kui-Toolbar) {
12019
12029
  pointer-events: none;
12020
12030
  }
12031
+ :is(.kui-ShellPaneHeader[data-float],.kui-ShellPaneFooter[data-float]) > :where(.kui-Toolbar) :where(.kui-ToolbarGroup,.kui-BaseButton,.kui-TextFieldRoot,.kui-SelectTrigger,.kui-SegmentedControlRoot,[href],[tabindex]) {
12032
+ pointer-events: auto;
12033
+ }
12021
12034
  .kui-ShellPaneHeader[data-float] {
12022
12035
  top: 0;
12023
12036
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@womp/kookie-ui",
3
- "version": "0.25.1",
3
+ "version": "0.25.2",
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",
package/src/components/shell.css CHANGED
@@ -249,13 +249,18 @@
249
249
  z-index: 1;
250
250
  pointer-events: none;
251
251
 
252
- & > :where(*),
253
- & > :where(.kui-Toolbar) > :where(*) {
252
+ & > :where(*) {
254
253
  pointer-events: auto;
255
254
  }
255
+ /* A Toolbar spans the row, and so may a cluster inside it. pointer-events inherits, so the
256
+ Toolbar passes clicks through and only its controls and groups take them back: the empty
257
+ stretch between them lets clicks reach the content. */
256
258
  & > :where(.kui-Toolbar) {
257
259
  pointer-events: none;
258
260
  }
261
+ & > :where(.kui-Toolbar) :where(.kui-ToolbarGroup, .kui-BaseButton, .kui-TextFieldRoot, .kui-SelectTrigger, .kui-SegmentedControlRoot, [href], [tabindex]) {
262
+ pointer-events: auto;
263
+ }
259
264
  }
260
265
  .kui-ShellPaneHeader[data-float] {
261
266
  top: 0;
package/src/components/sidebar.css CHANGED
@@ -337,6 +337,11 @@
337
337
  & :where(.kui-SidebarMenuButton) {
338
338
  flex: 1;
339
339
  }
340
+
341
+ /* A Toolbar fills the header, so its leading and trailing groups sit at the two ends. */
342
+ & > :where(.kui-Toolbar) {
343
+ flex: 1;
344
+ }
340
345
  }
341
346
 
342
347
  .kui-SidebarFooter:where(.kui-SidebarFooter--container) {
@@ -351,6 +356,11 @@
351
356
  & :where(.kui-SidebarMenuButton) {
352
357
  flex: 1;
353
358
  }
359
+
360
+ /* A Toolbar fills the footer, so its leading and trailing groups sit at the two ends. */
361
+ & > :where(.kui-Toolbar) {
362
+ flex: 1;
363
+ }
354
364
  }
355
365
 
356
366
  /* Header/Footer Menu Button Support */
package/styles.css CHANGED
@@ -16044,6 +16044,11 @@
16044
16044
  -ms-flex: 1;
16045
16045
  flex: 1;
16046
16046
  }
16047
+ .kui-SidebarHeader:where(.kui-SidebarHeader--container) > :where(.kui-Toolbar) {
16048
+ -webkit-box-flex: 1;
16049
+ -ms-flex: 1;
16050
+ flex: 1;
16051
+ }
16047
16052
  .kui-SidebarFooter:where(.kui-SidebarFooter--container) {
16048
16053
  display: -webkit-box;
16049
16054
  display: -ms-flexbox;
@@ -16064,6 +16069,11 @@
16064
16069
  -ms-flex: 1;
16065
16070
  flex: 1;
16066
16071
  }
16072
+ .kui-SidebarFooter:where(.kui-SidebarFooter--container) > :where(.kui-Toolbar) {
16073
+ -webkit-box-flex: 1;
16074
+ -ms-flex: 1;
16075
+ flex: 1;
16076
+ }
16067
16077
  .kui-SidebarHeader :where(.kui-SidebarMenuButton),
16068
16078
  .kui-SidebarFooter :where(.kui-SidebarMenuButton) {
16069
16079
  display: -webkit-box;
@@ -17118,12 +17128,15 @@
17118
17128
  z-index: 1;
17119
17129
  pointer-events: none;
17120
17130
  }
17121
- :is(.kui-ShellPaneHeader[data-float],.kui-ShellPaneFooter[data-float]) > :where(*),:is(.kui-ShellPaneHeader[data-float],.kui-ShellPaneFooter[data-float]) > :where(.kui-Toolbar) > :where(*) {
17131
+ :is(.kui-ShellPaneHeader[data-float],.kui-ShellPaneFooter[data-float]) > :where(*) {
17122
17132
  pointer-events: auto;
17123
17133
  }
17124
17134
  :is(.kui-ShellPaneHeader[data-float],.kui-ShellPaneFooter[data-float]) > :where(.kui-Toolbar) {
17125
17135
  pointer-events: none;
17126
17136
  }
17137
+ :is(.kui-ShellPaneHeader[data-float],.kui-ShellPaneFooter[data-float]) > :where(.kui-Toolbar) :where(.kui-ToolbarGroup,.kui-BaseButton,.kui-TextFieldRoot,.kui-SelectTrigger,.kui-SegmentedControlRoot,[href],[tabindex]) {
17138
+ pointer-events: auto;
17139
+ }
17127
17140
  .kui-ShellPaneHeader[data-float] {
17128
17141
  top: 0;
17129
17142
  }