@womp/kookie-ui 0.35.2 → 0.35.4

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 (7) hide show
  1. package/components.css +37 -191
  2. package/package.json +1 -1
  3. package/src/components/notice.css +4 -4
  4. package/src/components/sidebar.css +32 -184
  5. package/src/styles/tokens/constants.css +5 -5
  6. package/styles.css +41 -195
  7. package/tokens.css +4 -4
package/components.css CHANGED
@@ -10819,119 +10819,33 @@
10819
10819
  margin-top: 1px;
10820
10820
  margin-bottom: 1px;
10821
10821
  }
10822
- :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-1) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) {
10822
+ :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter):is(.kui-r-size-1, .kui-r-size-2)) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) {
10823
10823
  padding-top: var(--space-2) !important;
10824
10824
  padding-bottom: var(--space-2) !important;
10825
- -webkit-box-pack: center;
10826
- -ms-flex-pack: center;
10827
- justify-content: center;
10828
- -webkit-box-align: center;
10829
- -ms-flex-align: center;
10830
- align-items: center;
10831
- -webkit-box-orient: vertical;
10832
- -webkit-box-direction: normal;
10833
- -ms-flex-direction: column;
10834
- flex-direction: column;
10835
- gap: var(--space-2);
10836
- text-align: center;
10837
- font-size: var(--font-size-1);
10838
- line-height: var(--line-height-1);
10839
- white-space: nowrap;
10840
- overflow: hidden;
10841
- text-overflow: ellipsis;
10842
- max-width: 100%;
10843
- min-width: 0;
10844
- }
10845
- :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-2) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) {
10846
- padding-top: var(--space-2) !important;
10847
- padding-bottom: var(--space-2) !important;
10848
- -webkit-box-pack: center;
10849
- -ms-flex-pack: center;
10850
- justify-content: center;
10851
- -webkit-box-align: center;
10852
- -ms-flex-align: center;
10853
- align-items: center;
10854
- -webkit-box-orient: vertical;
10855
- -webkit-box-direction: normal;
10856
- -ms-flex-direction: column;
10857
- flex-direction: column;
10858
- gap: var(--space-2);
10859
- text-align: center;
10860
- font-size: var(--font-size-1);
10861
- line-height: var(--line-height-1);
10862
- white-space: nowrap;
10863
- overflow: hidden;
10864
- text-overflow: ellipsis;
10865
- max-width: 100%;
10866
- min-width: 0;
10867
10825
  }
10868
10826
  :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-3) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) {
10869
10827
  padding-top: var(--space-3) !important;
10870
10828
  padding-bottom: var(--space-3) !important;
10871
- -webkit-box-pack: center;
10872
- -ms-flex-pack: center;
10873
- justify-content: center;
10874
- -webkit-box-align: center;
10875
- -ms-flex-align: center;
10876
- align-items: center;
10877
- -webkit-box-orient: vertical;
10878
- -webkit-box-direction: normal;
10879
- -ms-flex-direction: column;
10880
- flex-direction: column;
10881
- gap: var(--space-2);
10882
- text-align: center;
10883
- font-size: var(--font-size-1);
10884
- line-height: var(--line-height-1);
10885
- white-space: nowrap;
10886
- overflow: hidden;
10887
- text-overflow: ellipsis;
10888
- max-width: 100%;
10889
- min-width: 0;
10890
- }
10891
- :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-1) {
10892
- --base-menu-item-padding-left: var(--space-2) !important;
10893
- --base-menu-item-padding-right: var(--space-2) !important;
10894
- --base-menu-item-padding-y: var(--space-3) !important;
10895
- }
10896
- :where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter).kui-r-size-1):where(:not(:has(.kui-BaseMenuCheckboxItem,.kui-BaseMenuRadioItem))) {
10897
- --base-menu-item-padding-left: var(--space-2) !important;
10898
- }
10899
- :where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter).kui-r-size-1):where(:has(.kui-BaseMenuCheckboxItem,.kui-BaseMenuRadioItem)) {
10900
- --base-menu-item-padding-left: var(--space-2) !important;
10901
- }
10902
- :where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter).kui-r-size-1) :where(.kui-SidebarMenuButton,.kui-SidebarMenuSubTrigger) :where(svg) {
10903
- width: var(--content-icon-size-3);
10904
- height: var(--content-icon-size-3);
10905
- }
10906
- :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-2) {
10907
- --base-menu-item-padding-left: var(--space-2) !important;
10908
- --base-menu-item-padding-right: var(--space-2) !important;
10909
- --base-menu-item-padding-y: var(--space-3) !important;
10910
- }
10911
- :where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter).kui-r-size-2):where(:not(:has(.kui-BaseMenuCheckboxItem,.kui-BaseMenuRadioItem))) {
10912
- --base-menu-item-padding-left: var(--space-2) !important;
10913
- }
10914
- :where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter).kui-r-size-2):where(:has(.kui-BaseMenuCheckboxItem,.kui-BaseMenuRadioItem)) {
10915
- --base-menu-item-padding-left: var(--space-2) !important;
10916
10829
  }
10917
- :where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter).kui-r-size-2) :where(.kui-SidebarMenuButton,.kui-SidebarMenuSubTrigger) :where(svg) {
10918
- width: var(--content-icon-size-4);
10919
- height: var(--content-icon-size-4);
10920
- }
10921
- :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-3) {
10830
+ :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter):is(.kui-r-size-1, .kui-r-size-2, .kui-r-size-3)) {
10922
10831
  --base-menu-item-padding-left: var(--space-2) !important;
10923
10832
  --base-menu-item-padding-right: var(--space-2) !important;
10924
10833
  --base-menu-item-padding-y: var(--space-3) !important;
10925
10834
  }
10926
- :where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter).kui-r-size-3):where(:not(:has(.kui-BaseMenuCheckboxItem,.kui-BaseMenuRadioItem))) {
10927
- --base-menu-item-padding-left: var(--space-2) !important;
10835
+ :where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter):is(.kui-r-size-1,.kui-r-size-2,.kui-r-size-3)) :where(.kui-SidebarMenuButton,.kui-SidebarMenuSubTrigger) {
10836
+ white-space: nowrap;
10837
+ overflow: hidden;
10838
+ text-overflow: ellipsis;
10839
+ max-width: 100%;
10840
+ min-width: 0;
10928
10841
  }
10929
- :where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter).kui-r-size-3):where(:has(.kui-BaseMenuCheckboxItem,.kui-BaseMenuRadioItem)) {
10930
- --base-menu-item-padding-left: var(--space-2) !important;
10842
+ :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-1) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) :where(svg) {
10843
+ width: var(--icon-size-3);
10844
+ height: var(--icon-size-3);
10931
10845
  }
10932
- :where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter).kui-r-size-3) :where(.kui-SidebarMenuButton,.kui-SidebarMenuSubTrigger) :where(svg) {
10933
- width: var(--content-icon-size-4);
10934
- height: var(--content-icon-size-4);
10846
+ :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter):is(.kui-r-size-2, .kui-r-size-3)) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) :where(svg) {
10847
+ width: var(--icon-size-4);
10848
+ height: var(--icon-size-4);
10935
10849
  }
10936
10850
  :where(.kui-ShellRailContent .kui-SidebarMenuButton > *) {
10937
10851
  display: -webkit-box;
@@ -11040,17 +10954,7 @@
11040
10954
  :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-menu-variant-soft .kui-SidebarMenuButton[data-active] .kui-SidebarMenuIconWrapper) {
11041
10955
  background-color: var(--accent-3);
11042
10956
  }
11043
- :where(.kui-ShellRailContent .kui-SidebarMenuBadge),
11044
- :where(.kui-ShellRailContent .kui-SidebarMenuShortcut),
11045
- :where(.kui-ShellRailContent .kui-Chip),
11046
- :where(.kui-ShellRailContent .kui-Kbd) {
11047
- display: none !important;
11048
- }
11049
- :where(.kui-ShellRailContent .kui-SidebarGroupLabel) {
11050
- display: none !important;
11051
- }
11052
- :where(.kui-ShellRailContent .kui-SidebarMenuSubTriggerIcon),
11053
- :where(.kui-ShellRailContent .kui-BaseMenuSubTriggerIcon) {
10957
+ :where(.kui-ShellRailContent) :where(.kui-SidebarMenuBadge, .kui-SidebarMenuShortcut, .kui-Chip, .kui-Kbd, .kui-SidebarGroupLabel, .kui-SidebarMenuSubTriggerIcon, .kui-BaseMenuSubTriggerIcon) {
11054
10958
  display: none !important;
11055
10959
  }
11056
10960
  .kui-SidebarMenuLabel {
@@ -11059,7 +10963,8 @@
11059
10963
  text-overflow: ellipsis;
11060
10964
  white-space: nowrap;
11061
10965
  }
11062
- .kui-SidebarHeader:where(.kui-SidebarHeader--container) {
10966
+ .kui-SidebarHeader:where(.kui-SidebarHeader--container),
10967
+ .kui-SidebarFooter:where(.kui-SidebarFooter--container) {
11063
10968
  display: -webkit-box;
11064
10969
  display: -ms-flexbox;
11065
10970
  display: flex;
@@ -11074,12 +10979,12 @@
11074
10979
  padding: var(--sidebar-base-padding);
11075
10980
  min-height: var(--sidebar-item-height);
11076
10981
  }
11077
- .kui-SidebarHeader:where(.kui-SidebarHeader--container) :where(.kui-SidebarMenuButton) {
10982
+ :is(.kui-SidebarHeader:where(.kui-SidebarHeader--container),.kui-SidebarFooter:where(.kui-SidebarFooter--container)) :where(.kui-SidebarMenuButton) {
11078
10983
  -webkit-box-flex: 1;
11079
10984
  -ms-flex: 1;
11080
10985
  flex: 1;
11081
10986
  }
11082
- .kui-SidebarHeader:where(.kui-SidebarHeader--container) > :where(.kui-Toolbar) {
10987
+ :is(.kui-SidebarHeader:where(.kui-SidebarHeader--container),.kui-SidebarFooter:where(.kui-SidebarFooter--container)) > :where(.kui-Toolbar) {
11083
10988
  -webkit-box-flex: 1;
11084
10989
  -ms-flex: 1;
11085
10990
  flex: 1;
@@ -11087,31 +10992,6 @@
11087
10992
  .kui-SidebarHeader:where(.kui-SidebarHeader--container:not([data-float]):has(+ .kui-ShellScroll)) {
11088
10993
  padding-bottom: 0;
11089
10994
  }
11090
- .kui-SidebarFooter:where(.kui-SidebarFooter--container) {
11091
- display: -webkit-box;
11092
- display: -ms-flexbox;
11093
- display: flex;
11094
- -webkit-box-orient: horizontal;
11095
- -webkit-box-direction: normal;
11096
- -ms-flex-direction: row;
11097
- flex-direction: row;
11098
- -webkit-box-align: center;
11099
- -ms-flex-align: center;
11100
- align-items: center;
11101
- gap: var(--space-3);
11102
- padding: var(--sidebar-base-padding);
11103
- min-height: var(--sidebar-item-height);
11104
- }
11105
- .kui-SidebarFooter:where(.kui-SidebarFooter--container) :where(.kui-SidebarMenuButton) {
11106
- -webkit-box-flex: 1;
11107
- -ms-flex: 1;
11108
- flex: 1;
11109
- }
11110
- .kui-SidebarFooter:where(.kui-SidebarFooter--container) > :where(.kui-Toolbar) {
11111
- -webkit-box-flex: 1;
11112
- -ms-flex: 1;
11113
- flex: 1;
11114
- }
11115
10995
  :where(.kui-ShellScroll) + .kui-SidebarFooter:where(.kui-SidebarFooter--container:not([data-float])) {
11116
10996
  padding-top: 0;
11117
10997
  }
@@ -11727,7 +11607,7 @@
11727
11607
  :where(.kui-ShellRailContent) .kui-SidebarSearch {
11728
11608
  padding: var(--space-3);
11729
11609
  }
11730
- .kui-SidebarSearch--expanded .kui-SidebarSearchInputWrapper {
11610
+ :is(.kui-SidebarSearch--expanded, .kui-SidebarSearchPopover) .kui-SidebarSearchInputWrapper {
11731
11611
  display: -webkit-box;
11732
11612
  display: -ms-flexbox;
11733
11613
  display: flex;
@@ -11743,7 +11623,7 @@
11743
11623
  border-radius: var(--radius-2);
11744
11624
  padding: var(--space-2) var(--space-3);
11745
11625
  }
11746
- .kui-SidebarSearch--expanded .kui-SidebarSearchInputWrapper:focus-within {
11626
+ :is(.kui-SidebarSearch--expanded, .kui-SidebarSearchPopover) .kui-SidebarSearchInputWrapper:focus-within {
11747
11627
  -webkit-box-shadow: inset 0 0 0 1px var(--accent-a7);
11748
11628
  box-shadow: inset 0 0 0 1px var(--accent-a7);
11749
11629
  }
@@ -11777,11 +11657,7 @@
11777
11657
  margin-top: 1px;
11778
11658
  margin-bottom: 1px;
11779
11659
  }
11780
- :where(.kui-ShellRailContent.kui-r-size-1) :where(.kui-SidebarSearchTrigger) {
11781
- padding-top: var(--space-2) !important;
11782
- padding-bottom: var(--space-2) !important;
11783
- }
11784
- :where(.kui-ShellRailContent.kui-r-size-2) :where(.kui-SidebarSearchTrigger) {
11660
+ :where(.kui-ShellRailContent:is(.kui-r-size-1, .kui-r-size-2)) :where(.kui-SidebarSearchTrigger) {
11785
11661
  padding-top: var(--space-2) !important;
11786
11662
  padding-bottom: var(--space-2) !important;
11787
11663
  }
@@ -11790,16 +11666,12 @@
11790
11666
  padding-bottom: var(--space-3) !important;
11791
11667
  }
11792
11668
  .kui-ShellRailContent.kui-r-size-1 .kui-SidebarSearchTrigger svg {
11793
- width: var(--content-icon-size-2);
11794
- height: var(--content-icon-size-2);
11795
- }
11796
- .kui-ShellRailContent.kui-r-size-2 .kui-SidebarSearchTrigger svg {
11797
- width: var(--content-icon-size-3);
11798
- height: var(--content-icon-size-3);
11669
+ width: var(--icon-size-2);
11670
+ height: var(--icon-size-2);
11799
11671
  }
11800
- .kui-ShellRailContent.kui-r-size-3 .kui-SidebarSearchTrigger svg {
11801
- width: var(--content-icon-size-3);
11802
- height: var(--content-icon-size-3);
11672
+ .kui-ShellRailContent:is(.kui-r-size-2, .kui-r-size-3) .kui-SidebarSearchTrigger svg {
11673
+ width: var(--icon-size-3);
11674
+ height: var(--icon-size-3);
11803
11675
  }
11804
11676
  :where(.kui-ShellRailContent) :where(.kui-SidebarSearchTrigger:where([data-state='open'])) {
11805
11677
  background-color: transparent !important;
@@ -11847,26 +11719,6 @@
11847
11719
  --base-menu-line-height: var(--line-height-2);
11848
11720
  --base-menu-letter-spacing: var(--letter-spacing-2);
11849
11721
  }
11850
- .kui-SidebarSearchPopover .kui-SidebarSearchInputWrapper {
11851
- display: -webkit-box;
11852
- display: -ms-flexbox;
11853
- display: flex;
11854
- -webkit-box-orient: horizontal;
11855
- -webkit-box-direction: normal;
11856
- -ms-flex-direction: row;
11857
- flex-direction: row;
11858
- -webkit-box-align: center;
11859
- -ms-flex-align: center;
11860
- align-items: center;
11861
- gap: var(--space-3);
11862
- background-color: var(--neutral-a3);
11863
- border-radius: var(--radius-2);
11864
- padding: var(--space-2) var(--space-3);
11865
- }
11866
- .kui-SidebarSearchPopover .kui-SidebarSearchInputWrapper:focus-within {
11867
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-a7);
11868
- box-shadow: inset 0 0 0 1px var(--accent-a7);
11869
- }
11870
11722
  .kui-SidebarSearchPopover .kui-SidebarMenu {
11871
11723
  list-style: none;
11872
11724
  margin: 0;
@@ -11894,18 +11746,12 @@
11894
11746
  color: var(--accent-a12);
11895
11747
  font-weight: var(--font-weight-medium);
11896
11748
  }
11897
- .kui-SidebarSearchPopover .kui-SidebarMenuLabel {
11898
- min-width: 0;
11899
- overflow: hidden;
11900
- text-overflow: ellipsis;
11901
- white-space: nowrap;
11902
- }
11903
11749
  .kui-SidebarSearchIcon {
11904
11750
  -ms-flex-negative: 0;
11905
11751
  flex-shrink: 0;
11906
11752
  color: var(--neutral-a9);
11907
- width: var(--content-icon-size-2);
11908
- height: var(--content-icon-size-2);
11753
+ width: var(--icon-size-2);
11754
+ height: var(--icon-size-2);
11909
11755
  }
11910
11756
  .kui-SidebarSearchInput {
11911
11757
  -webkit-box-flex: 1;
@@ -11967,16 +11813,16 @@
11967
11813
  line-height: var(--line-height-1);
11968
11814
  }
11969
11815
  .kui-SidebarSearch.kui-r-size-1 .kui-SidebarSearchIcon {
11970
- width: var(--content-icon-size-1);
11971
- height: var(--content-icon-size-1);
11816
+ width: var(--icon-size-1);
11817
+ height: var(--icon-size-1);
11972
11818
  }
11973
11819
  .kui-SidebarSearch.kui-r-size-3 .kui-SidebarSearchInput {
11974
11820
  font-size: var(--font-size-3);
11975
11821
  line-height: var(--line-height-3);
11976
11822
  }
11977
11823
  .kui-SidebarSearch.kui-r-size-3 .kui-SidebarSearchIcon {
11978
- width: var(--content-icon-size-3);
11979
- height: var(--content-icon-size-3);
11824
+ width: var(--icon-size-3);
11825
+ height: var(--icon-size-3);
11980
11826
  }
11981
11827
  @media (prefers-contrast: more) {
11982
11828
  :where(.kui-ShellRailContent :is(.kui-SidebarMenuButton[data-active], .kui-SidebarMenuButton[data-highlighted]:not([data-disabled]))) .kui-SidebarMenuIconWrapper {
@@ -16812,28 +16658,28 @@
16812
16658
  --notice-radius: var(--radius-surface-1);
16813
16659
  --notice-line: var(--line-height-1);
16814
16660
  --notice-control: var(--control-height-1);
16815
- --notice-icon-size: var(--content-icon-size-1);
16661
+ --notice-icon-size: var(--icon-size-1);
16816
16662
  }
16817
16663
  .kui-NoticeRoot:where(.kui-r-size-2) {
16818
16664
  --notice-padding: var(--surface-p-2);
16819
16665
  --notice-radius: var(--radius-surface-2);
16820
16666
  --notice-line: var(--line-height-2);
16821
16667
  --notice-control: var(--control-height-2);
16822
- --notice-icon-size: var(--content-icon-size-2);
16668
+ --notice-icon-size: var(--icon-size-2);
16823
16669
  }
16824
16670
  .kui-NoticeRoot:where(.kui-r-size-3) {
16825
16671
  --notice-padding: var(--surface-p-3);
16826
16672
  --notice-radius: var(--radius-surface-3);
16827
16673
  --notice-line: var(--line-height-3);
16828
16674
  --notice-control: var(--control-height-3);
16829
- --notice-icon-size: var(--content-icon-size-3);
16675
+ --notice-icon-size: var(--icon-size-3);
16830
16676
  }
16831
16677
  .kui-NoticeRoot:where(.kui-r-size-4) {
16832
16678
  --notice-padding: var(--surface-p-4);
16833
16679
  --notice-radius: var(--radius-surface-4);
16834
16680
  --notice-line: var(--line-height-4);
16835
16681
  --notice-control: var(--control-height-4);
16836
- --notice-icon-size: var(--content-icon-size-4);
16682
+ --notice-icon-size: var(--icon-size-4);
16837
16683
  }
16838
16684
  .kui-theme:where([data-is-root-theme='true']) {
16839
16685
  position: relative;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@womp/kookie-ui",
3
- "version": "0.35.2",
3
+ "version": "0.35.4",
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/notice.css CHANGED
@@ -76,27 +76,27 @@
76
76
  --notice-radius: var(--radius-surface-1);
77
77
  --notice-line: var(--line-height-1);
78
78
  --notice-control: var(--control-height-1);
79
- --notice-icon-size: var(--content-icon-size-1);
79
+ --notice-icon-size: var(--icon-size-1);
80
80
  }
81
81
  &:where(.kui-r-size-2) {
82
82
  --notice-padding: var(--surface-p-2);
83
83
  --notice-radius: var(--radius-surface-2);
84
84
  --notice-line: var(--line-height-2);
85
85
  --notice-control: var(--control-height-2);
86
- --notice-icon-size: var(--content-icon-size-2);
86
+ --notice-icon-size: var(--icon-size-2);
87
87
  }
88
88
  &:where(.kui-r-size-3) {
89
89
  --notice-padding: var(--surface-p-3);
90
90
  --notice-radius: var(--radius-surface-3);
91
91
  --notice-line: var(--line-height-3);
92
92
  --notice-control: var(--control-height-3);
93
- --notice-icon-size: var(--content-icon-size-3);
93
+ --notice-icon-size: var(--icon-size-3);
94
94
  }
95
95
  &:where(.kui-r-size-4) {
96
96
  --notice-padding: var(--surface-p-4);
97
97
  --notice-radius: var(--radius-surface-4);
98
98
  --notice-line: var(--line-height-4);
99
99
  --notice-control: var(--control-height-4);
100
- --notice-icon-size: var(--content-icon-size-4);
100
+ --notice-icon-size: var(--icon-size-4);
101
101
  }
102
102
  }
package/src/components/sidebar.css CHANGED
@@ -49,12 +49,7 @@
49
49
  }
50
50
 
51
51
  /* Size-specific vertical padding for thin mode buttons */
52
- :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-1) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) {
53
- padding-top: var(--space-2) !important;
54
- padding-bottom: var(--space-2) !important;
55
- }
56
-
57
- :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-2) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) {
52
+ :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter):is(.kui-r-size-1, .kui-r-size-2)) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) {
58
53
  padding-top: var(--space-2) !important;
59
54
  padding-bottom: var(--space-2) !important;
60
55
  }
@@ -64,112 +59,34 @@
64
59
  padding-bottom: var(--space-3) !important;
65
60
  }
66
61
 
67
- /* Consolidated thin mode size blocks */
68
- :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-1) {
62
+ /* Row padding and the label's clipping, the same at every size */
63
+ :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter):is(.kui-r-size-1, .kui-r-size-2, .kui-r-size-3)) {
69
64
  /* Horizontal padding tokens to free space for text */
70
65
  --base-menu-item-padding-left: var(--space-2) !important;
71
66
  --base-menu-item-padding-right: var(--space-2) !important;
72
67
  /* Unify vertical padding via tokens (used by BaseMenuItem) */
73
68
  --base-menu-item-padding-y: var(--space-3) !important;
74
69
 
75
- /* Override BaseMenu left padding resets */
76
- &:where(:not(:has(.kui-BaseMenuCheckboxItem, .kui-BaseMenuRadioItem))) {
77
- --base-menu-item-padding-left: var(--space-2) !important;
78
- }
79
- &:where(:has(.kui-BaseMenuCheckboxItem, .kui-BaseMenuRadioItem)) {
80
- --base-menu-item-padding-left: var(--space-2) !important;
81
- }
82
-
83
- /* Button and subtrigger layout */
84
70
  :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) {
85
- justify-content: center;
86
- align-items: center;
87
- flex-direction: column;
88
- gap: var(--space-2);
89
- text-align: center;
90
- font-size: var(--font-size-1);
91
- line-height: var(--line-height-1);
92
71
  white-space: nowrap;
93
72
  overflow: hidden;
94
73
  text-overflow: ellipsis;
95
74
  max-width: 100%;
96
75
  min-width: 0;
97
76
  }
98
-
99
- /* Icon sizing */
100
- /* stylelint-disable-next-line selector-max-type */
101
- :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) :where(svg) {
102
- width: var(--content-icon-size-3);
103
- height: var(--content-icon-size-3);
104
- }
105
77
  }
106
78
 
107
- :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-2) {
108
- --base-menu-item-padding-left: var(--space-2) !important;
109
- --base-menu-item-padding-right: var(--space-2) !important;
110
- --base-menu-item-padding-y: var(--space-3) !important;
111
-
112
- &:where(:not(:has(.kui-BaseMenuCheckboxItem, .kui-BaseMenuRadioItem))) {
113
- --base-menu-item-padding-left: var(--space-2) !important;
114
- }
115
- &:where(:has(.kui-BaseMenuCheckboxItem, .kui-BaseMenuRadioItem)) {
116
- --base-menu-item-padding-left: var(--space-2) !important;
117
- }
118
-
119
- :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) {
120
- justify-content: center;
121
- align-items: center;
122
- flex-direction: column;
123
- gap: var(--space-2);
124
- text-align: center;
125
- font-size: var(--font-size-1);
126
- line-height: var(--line-height-1);
127
- white-space: nowrap;
128
- overflow: hidden;
129
- text-overflow: ellipsis;
130
- max-width: 100%;
131
- min-width: 0;
132
- }
133
-
134
- /* stylelint-disable-next-line selector-max-type */
135
- :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) :where(svg) {
136
- width: var(--content-icon-size-4);
137
- height: var(--content-icon-size-4);
138
- }
79
+ /* Icon size: the one line that differs by size */
80
+ /* stylelint-disable-next-line selector-max-type */
81
+ :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-1) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) :where(svg) {
82
+ width: var(--icon-size-3);
83
+ height: var(--icon-size-3);
139
84
  }
140
85
 
141
- :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-3) {
142
- --base-menu-item-padding-left: var(--space-2) !important;
143
- --base-menu-item-padding-right: var(--space-2) !important;
144
- --base-menu-item-padding-y: var(--space-3) !important;
145
-
146
- &:where(:not(:has(.kui-BaseMenuCheckboxItem, .kui-BaseMenuRadioItem))) {
147
- --base-menu-item-padding-left: var(--space-2) !important;
148
- }
149
- &:where(:has(.kui-BaseMenuCheckboxItem, .kui-BaseMenuRadioItem)) {
150
- --base-menu-item-padding-left: var(--space-2) !important;
151
- }
152
-
153
- :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) {
154
- justify-content: center;
155
- align-items: center;
156
- flex-direction: column;
157
- gap: var(--space-2);
158
- text-align: center;
159
- font-size: var(--font-size-1);
160
- line-height: var(--line-height-1);
161
- white-space: nowrap;
162
- overflow: hidden;
163
- text-overflow: ellipsis;
164
- max-width: 100%;
165
- min-width: 0;
166
- }
167
-
168
- /* stylelint-disable-next-line selector-max-type */
169
- :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) :where(svg) {
170
- width: var(--content-icon-size-4);
171
- height: var(--content-icon-size-4);
172
- }
86
+ /* stylelint-disable-next-line selector-max-type */
87
+ :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter):is(.kui-r-size-2, .kui-r-size-3)) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) :where(svg) {
88
+ width: var(--icon-size-4);
89
+ height: var(--icon-size-4);
173
90
  }
174
91
 
175
92
  /* Ellipsis on root child content when using asChild (e.g., Next.js Link) */
@@ -292,21 +209,8 @@
292
209
  background-color: var(--accent-3);
293
210
  }
294
211
 
295
- /* Solid variant icon wrapper states in thin mode */
296
- :where(.kui-ShellRailContent .kui-SidebarMenuBadge),
297
- :where(.kui-ShellRailContent .kui-SidebarMenuShortcut),
298
- :where(.kui-ShellRailContent .kui-Chip),
299
- :where(.kui-ShellRailContent .kui-Kbd) {
300
- display: none !important;
301
- }
302
-
303
- :where(.kui-ShellRailContent .kui-SidebarGroupLabel) {
304
- display: none !important;
305
- }
306
-
307
- /* Hide submenu chevrons in rail */
308
- :where(.kui-ShellRailContent .kui-SidebarMenuSubTriggerIcon),
309
- :where(.kui-ShellRailContent .kui-BaseMenuSubTriggerIcon) {
212
+ /* A Rail shows the icon and its label only: no badge, shortcut, group label or chevron */
213
+ :where(.kui-ShellRailContent) :where(.kui-SidebarMenuBadge, .kui-SidebarMenuShortcut, .kui-Chip, .kui-Kbd, .kui-SidebarGroupLabel, .kui-SidebarMenuSubTriggerIcon, .kui-BaseMenuSubTriggerIcon) {
310
214
  display: none !important;
311
215
  }
312
216
 
@@ -325,7 +229,8 @@
325
229
  /* Base variables and panel background support (mirrors Card pattern) */
326
230
  /* Centralized borders: apply a consistent inset border; avoid context coupling */
327
231
  /* Container Variants (variables only) *//* Header/Footer Layout Utilities */
328
- .kui-SidebarHeader:where(.kui-SidebarHeader--container) {
232
+ .kui-SidebarHeader:where(.kui-SidebarHeader--container),
233
+ .kui-SidebarFooter:where(.kui-SidebarFooter--container) {
329
234
  display: flex;
330
235
  flex-direction: row;
331
236
  align-items: center;
@@ -338,7 +243,7 @@
338
243
  flex: 1;
339
244
  }
340
245
 
341
- /* A Toolbar fills the header, so its leading and trailing groups sit at the two ends. */
246
+ /* A Toolbar fills the row, so its leading and trailing groups sit at the two ends. */
342
247
  & > :where(.kui-Toolbar) {
343
248
  flex: 1;
344
249
  }
@@ -349,26 +254,6 @@
349
254
  .kui-SidebarHeader:where(.kui-SidebarHeader--container:not([data-float]):has(+ .kui-ShellScroll)) {
350
255
  padding-bottom: 0;
351
256
  }
352
-
353
- .kui-SidebarFooter:where(.kui-SidebarFooter--container) {
354
- display: flex;
355
- flex-direction: row;
356
- align-items: center;
357
- gap: var(--space-3);
358
- padding: var(--sidebar-base-padding);
359
- min-height: var(--sidebar-item-height);
360
-
361
- /* Make MenuButtons expand to full width */
362
- & :where(.kui-SidebarMenuButton) {
363
- flex: 1;
364
- }
365
-
366
- /* A Toolbar fills the footer, so its leading and trailing groups sit at the two ends. */
367
- & > :where(.kui-Toolbar) {
368
- flex: 1;
369
- }
370
- }
371
-
372
257
  /* Second half of the shared inset above; after the footer's own padding, at its specificity. */
373
258
  :where(.kui-ShellScroll) + .kui-SidebarFooter:where(.kui-SidebarFooter--container:not([data-float])) {
374
259
  padding-top: 0;
@@ -680,9 +565,9 @@
680
565
  padding: var(--space-3);
681
566
  }
682
567
 
683
- /* Expanded mode: inline input wrapper */
568
+ /* The field's box, inline in a pane and inside the Rail's popover */
684
569
  /* stylelint-disable-next-line selector-max-specificity */
685
- .kui-SidebarSearch--expanded .kui-SidebarSearchInputWrapper {
570
+ :is(.kui-SidebarSearch--expanded, .kui-SidebarSearchPopover) .kui-SidebarSearchInputWrapper {
686
571
  display: flex;
687
572
  flex-direction: row;
688
573
  align-items: center;
@@ -693,7 +578,7 @@
693
578
  }
694
579
 
695
580
  /* stylelint-disable-next-line selector-max-specificity */
696
- .kui-SidebarSearch--expanded .kui-SidebarSearchInputWrapper:focus-within {
581
+ :is(.kui-SidebarSearch--expanded, .kui-SidebarSearchPopover) .kui-SidebarSearchInputWrapper:focus-within {
697
582
  box-shadow: inset 0 0 0 1px var(--accent-a7);
698
583
  }
699
584
 
@@ -720,12 +605,7 @@
720
605
  }
721
606
 
722
607
  /* Size-specific vertical padding for thin search trigger */
723
- :where(.kui-ShellRailContent.kui-r-size-1) :where(.kui-SidebarSearchTrigger) {
724
- padding-top: var(--space-2) !important;
725
- padding-bottom: var(--space-2) !important;
726
- }
727
-
728
- :where(.kui-ShellRailContent.kui-r-size-2) :where(.kui-SidebarSearchTrigger) {
608
+ :where(.kui-ShellRailContent:is(.kui-r-size-1, .kui-r-size-2)) :where(.kui-SidebarSearchTrigger) {
729
609
  padding-top: var(--space-2) !important;
730
610
  padding-bottom: var(--space-2) !important;
731
611
  }
@@ -739,20 +619,14 @@
739
619
  /* Matches the effective icon size of other menu buttons (expanded-mode rules win on specificity) */
740
620
  /* stylelint-disable-next-line selector-max-type, selector-max-specificity */
741
621
  .kui-ShellRailContent.kui-r-size-1 .kui-SidebarSearchTrigger svg {
742
- width: var(--content-icon-size-2);
743
- height: var(--content-icon-size-2);
622
+ width: var(--icon-size-2);
623
+ height: var(--icon-size-2);
744
624
  }
745
625
 
746
626
  /* stylelint-disable-next-line selector-max-type, selector-max-specificity */
747
- .kui-ShellRailContent.kui-r-size-2 .kui-SidebarSearchTrigger svg {
748
- width: var(--content-icon-size-3);
749
- height: var(--content-icon-size-3);
750
- }
751
-
752
- /* stylelint-disable-next-line selector-max-type, selector-max-specificity */
753
- .kui-ShellRailContent.kui-r-size-3 .kui-SidebarSearchTrigger svg {
754
- width: var(--content-icon-size-3);
755
- height: var(--content-icon-size-3);
627
+ .kui-ShellRailContent:is(.kui-r-size-2, .kui-r-size-3) .kui-SidebarSearchTrigger svg {
628
+ width: var(--icon-size-3);
629
+ height: var(--icon-size-3);
756
630
  }
757
631
 
758
632
  /* Remove hover background from thin trigger button itself (styles live on icon wrapper) */
@@ -812,23 +686,6 @@
812
686
  --base-menu-line-height: var(--line-height-2);
813
687
  --base-menu-letter-spacing: var(--letter-spacing-2);
814
688
  }
815
-
816
- /* stylelint-disable-next-line selector-max-specificity */
817
- .kui-SidebarSearchPopover .kui-SidebarSearchInputWrapper {
818
- display: flex;
819
- flex-direction: row;
820
- align-items: center;
821
- gap: var(--space-3);
822
- background-color: var(--neutral-a3);
823
- border-radius: var(--radius-2);
824
- padding: var(--space-2) var(--space-3);
825
- }
826
-
827
- /* stylelint-disable-next-line selector-max-specificity */
828
- .kui-SidebarSearchPopover .kui-SidebarSearchInputWrapper:focus-within {
829
- box-shadow: inset 0 0 0 1px var(--accent-a7);
830
- }
831
-
832
689
  /* Popover menu list reset */
833
690
  /* stylelint-disable-next-line selector-max-specificity */
834
691
  .kui-SidebarSearchPopover .kui-SidebarMenu {
@@ -872,21 +729,12 @@
872
729
  font-weight: var(--font-weight-medium);
873
730
  }
874
731
 
875
- /* Popover menu label truncation */
876
- /* stylelint-disable-next-line selector-max-specificity */
877
- .kui-SidebarSearchPopover .kui-SidebarMenuLabel {
878
- min-width: 0;
879
- overflow: hidden;
880
- text-overflow: ellipsis;
881
- white-space: nowrap;
882
- }
883
-
884
732
  /* Search icon */
885
733
  .kui-SidebarSearchIcon {
886
734
  flex-shrink: 0;
887
735
  color: var(--neutral-a9);
888
- width: var(--content-icon-size-2);
889
- height: var(--content-icon-size-2);
736
+ width: var(--icon-size-2);
737
+ height: var(--icon-size-2);
890
738
  }
891
739
 
892
740
  /* Search input */
@@ -941,8 +789,8 @@
941
789
 
942
790
  /* stylelint-disable-next-line selector-max-specificity */
943
791
  .kui-SidebarSearch.kui-r-size-1 .kui-SidebarSearchIcon {
944
- width: var(--content-icon-size-1);
945
- height: var(--content-icon-size-1);
792
+ width: var(--icon-size-1);
793
+ height: var(--icon-size-1);
946
794
  }
947
795
 
948
796
  /* stylelint-disable-next-line selector-max-specificity */
@@ -953,8 +801,8 @@
953
801
 
954
802
  /* stylelint-disable-next-line selector-max-specificity */
955
803
  .kui-SidebarSearch.kui-r-size-3 .kui-SidebarSearchIcon {
956
- width: var(--content-icon-size-3);
957
- height: var(--content-icon-size-3);
804
+ width: var(--icon-size-3);
805
+ height: var(--icon-size-3);
958
806
  }
959
807
 
960
808
  /* In a Rail the fill is the icon tile, not the row. Under more contrast the tile goes solid and its icon
package/src/styles/tokens/constants.css CHANGED
@@ -28,11 +28,11 @@
28
28
  --trigger-icon-size-3: 11px;
29
29
  --trigger-icon-size-4: 12px;
30
30
 
31
- /* Content icon size constants (for buttons, menu items) */
32
- --content-icon-size-1: calc(var(--space-6) * 0.55);
33
- --content-icon-size-2: calc(var(--space-7) * 0.525);
34
- --content-icon-size-3: calc(var(--space-8) * 0.5125);
35
- --content-icon-size-4: calc(var(--space-9) * 0.5);
31
+ /* Older names for the icon sizes, kept for apps that read them */
32
+ --content-icon-size-1: var(--icon-size-1);
33
+ --content-icon-size-2: var(--icon-size-2);
34
+ --content-icon-size-3: var(--icon-size-3);
35
+ --content-icon-size-4: var(--icon-size-4);
36
36
 
37
37
  /* Indicator icon size constants (for checkboxes, radio, sub-triggers) */
38
38
  --indicator-icon-size-1: calc(9px * var(--scale));
package/styles.css CHANGED
@@ -3326,10 +3326,10 @@
3326
3326
  --trigger-icon-size-2: 11px;
3327
3327
  --trigger-icon-size-3: 11px;
3328
3328
  --trigger-icon-size-4: 12px;
3329
- --content-icon-size-1: calc(var(--space-6) * 0.55);
3330
- --content-icon-size-2: calc(var(--space-7) * 0.525);
3331
- --content-icon-size-3: calc(var(--space-8) * 0.5125);
3332
- --content-icon-size-4: calc(var(--space-9) * 0.5);
3329
+ --content-icon-size-1: var(--icon-size-1);
3330
+ --content-icon-size-2: var(--icon-size-2);
3331
+ --content-icon-size-3: var(--icon-size-3);
3332
+ --content-icon-size-4: var(--icon-size-4);
3333
3333
  --indicator-icon-size-1: calc(9px * var(--scale));
3334
3334
  --indicator-icon-size-2: calc(10px * var(--scale));
3335
3335
  --indicator-icon-size-3: calc(12px * var(--scale));
@@ -15965,119 +15965,33 @@
15965
15965
  margin-top: 1px;
15966
15966
  margin-bottom: 1px;
15967
15967
  }
15968
- :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-1) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) {
15968
+ :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter):is(.kui-r-size-1, .kui-r-size-2)) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) {
15969
15969
  padding-top: var(--space-2) !important;
15970
15970
  padding-bottom: var(--space-2) !important;
15971
- -webkit-box-pack: center;
15972
- -ms-flex-pack: center;
15973
- justify-content: center;
15974
- -webkit-box-align: center;
15975
- -ms-flex-align: center;
15976
- align-items: center;
15977
- -webkit-box-orient: vertical;
15978
- -webkit-box-direction: normal;
15979
- -ms-flex-direction: column;
15980
- flex-direction: column;
15981
- gap: var(--space-2);
15982
- text-align: center;
15983
- font-size: var(--font-size-1);
15984
- line-height: var(--line-height-1);
15985
- white-space: nowrap;
15986
- overflow: hidden;
15987
- text-overflow: ellipsis;
15988
- max-width: 100%;
15989
- min-width: 0;
15990
- }
15991
- :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-2) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) {
15992
- padding-top: var(--space-2) !important;
15993
- padding-bottom: var(--space-2) !important;
15994
- -webkit-box-pack: center;
15995
- -ms-flex-pack: center;
15996
- justify-content: center;
15997
- -webkit-box-align: center;
15998
- -ms-flex-align: center;
15999
- align-items: center;
16000
- -webkit-box-orient: vertical;
16001
- -webkit-box-direction: normal;
16002
- -ms-flex-direction: column;
16003
- flex-direction: column;
16004
- gap: var(--space-2);
16005
- text-align: center;
16006
- font-size: var(--font-size-1);
16007
- line-height: var(--line-height-1);
16008
- white-space: nowrap;
16009
- overflow: hidden;
16010
- text-overflow: ellipsis;
16011
- max-width: 100%;
16012
- min-width: 0;
16013
15971
  }
16014
15972
  :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-3) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) {
16015
15973
  padding-top: var(--space-3) !important;
16016
15974
  padding-bottom: var(--space-3) !important;
16017
- -webkit-box-pack: center;
16018
- -ms-flex-pack: center;
16019
- justify-content: center;
16020
- -webkit-box-align: center;
16021
- -ms-flex-align: center;
16022
- align-items: center;
16023
- -webkit-box-orient: vertical;
16024
- -webkit-box-direction: normal;
16025
- -ms-flex-direction: column;
16026
- flex-direction: column;
16027
- gap: var(--space-2);
16028
- text-align: center;
16029
- font-size: var(--font-size-1);
16030
- line-height: var(--line-height-1);
16031
- white-space: nowrap;
16032
- overflow: hidden;
16033
- text-overflow: ellipsis;
16034
- max-width: 100%;
16035
- min-width: 0;
16036
- }
16037
- :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-1) {
16038
- --base-menu-item-padding-left: var(--space-2) !important;
16039
- --base-menu-item-padding-right: var(--space-2) !important;
16040
- --base-menu-item-padding-y: var(--space-3) !important;
16041
- }
16042
- :where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter).kui-r-size-1):where(:not(:has(.kui-BaseMenuCheckboxItem,.kui-BaseMenuRadioItem))) {
16043
- --base-menu-item-padding-left: var(--space-2) !important;
16044
- }
16045
- :where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter).kui-r-size-1):where(:has(.kui-BaseMenuCheckboxItem,.kui-BaseMenuRadioItem)) {
16046
- --base-menu-item-padding-left: var(--space-2) !important;
16047
- }
16048
- :where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter).kui-r-size-1) :where(.kui-SidebarMenuButton,.kui-SidebarMenuSubTrigger) :where(svg) {
16049
- width: var(--content-icon-size-3);
16050
- height: var(--content-icon-size-3);
16051
- }
16052
- :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-2) {
16053
- --base-menu-item-padding-left: var(--space-2) !important;
16054
- --base-menu-item-padding-right: var(--space-2) !important;
16055
- --base-menu-item-padding-y: var(--space-3) !important;
16056
- }
16057
- :where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter).kui-r-size-2):where(:not(:has(.kui-BaseMenuCheckboxItem,.kui-BaseMenuRadioItem))) {
16058
- --base-menu-item-padding-left: var(--space-2) !important;
16059
- }
16060
- :where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter).kui-r-size-2):where(:has(.kui-BaseMenuCheckboxItem,.kui-BaseMenuRadioItem)) {
16061
- --base-menu-item-padding-left: var(--space-2) !important;
16062
15975
  }
16063
- :where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter).kui-r-size-2) :where(.kui-SidebarMenuButton,.kui-SidebarMenuSubTrigger) :where(svg) {
16064
- width: var(--content-icon-size-4);
16065
- height: var(--content-icon-size-4);
16066
- }
16067
- :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-3) {
15976
+ :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter):is(.kui-r-size-1, .kui-r-size-2, .kui-r-size-3)) {
16068
15977
  --base-menu-item-padding-left: var(--space-2) !important;
16069
15978
  --base-menu-item-padding-right: var(--space-2) !important;
16070
15979
  --base-menu-item-padding-y: var(--space-3) !important;
16071
15980
  }
16072
- :where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter).kui-r-size-3):where(:not(:has(.kui-BaseMenuCheckboxItem,.kui-BaseMenuRadioItem))) {
16073
- --base-menu-item-padding-left: var(--space-2) !important;
15981
+ :where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter):is(.kui-r-size-1,.kui-r-size-2,.kui-r-size-3)) :where(.kui-SidebarMenuButton,.kui-SidebarMenuSubTrigger) {
15982
+ white-space: nowrap;
15983
+ overflow: hidden;
15984
+ text-overflow: ellipsis;
15985
+ max-width: 100%;
15986
+ min-width: 0;
16074
15987
  }
16075
- :where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter).kui-r-size-3):where(:has(.kui-BaseMenuCheckboxItem,.kui-BaseMenuRadioItem)) {
16076
- --base-menu-item-padding-left: var(--space-2) !important;
15988
+ :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-1) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) :where(svg) {
15989
+ width: var(--icon-size-3);
15990
+ height: var(--icon-size-3);
16077
15991
  }
16078
- :where(.kui-ShellRailContent :is(.kui-SidebarContent,.kui-ShellPaneHeader,.kui-ShellPaneFooter).kui-r-size-3) :where(.kui-SidebarMenuButton,.kui-SidebarMenuSubTrigger) :where(svg) {
16079
- width: var(--content-icon-size-4);
16080
- height: var(--content-icon-size-4);
15992
+ :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter):is(.kui-r-size-2, .kui-r-size-3)) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) :where(svg) {
15993
+ width: var(--icon-size-4);
15994
+ height: var(--icon-size-4);
16081
15995
  }
16082
15996
  :where(.kui-ShellRailContent .kui-SidebarMenuButton > *) {
16083
15997
  display: -webkit-box;
@@ -16186,17 +16100,7 @@
16186
16100
  :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-menu-variant-soft .kui-SidebarMenuButton[data-active] .kui-SidebarMenuIconWrapper) {
16187
16101
  background-color: var(--accent-3);
16188
16102
  }
16189
- :where(.kui-ShellRailContent .kui-SidebarMenuBadge),
16190
- :where(.kui-ShellRailContent .kui-SidebarMenuShortcut),
16191
- :where(.kui-ShellRailContent .kui-Chip),
16192
- :where(.kui-ShellRailContent .kui-Kbd) {
16193
- display: none !important;
16194
- }
16195
- :where(.kui-ShellRailContent .kui-SidebarGroupLabel) {
16196
- display: none !important;
16197
- }
16198
- :where(.kui-ShellRailContent .kui-SidebarMenuSubTriggerIcon),
16199
- :where(.kui-ShellRailContent .kui-BaseMenuSubTriggerIcon) {
16103
+ :where(.kui-ShellRailContent) :where(.kui-SidebarMenuBadge, .kui-SidebarMenuShortcut, .kui-Chip, .kui-Kbd, .kui-SidebarGroupLabel, .kui-SidebarMenuSubTriggerIcon, .kui-BaseMenuSubTriggerIcon) {
16200
16104
  display: none !important;
16201
16105
  }
16202
16106
  .kui-SidebarMenuLabel {
@@ -16205,7 +16109,8 @@
16205
16109
  text-overflow: ellipsis;
16206
16110
  white-space: nowrap;
16207
16111
  }
16208
- .kui-SidebarHeader:where(.kui-SidebarHeader--container) {
16112
+ .kui-SidebarHeader:where(.kui-SidebarHeader--container),
16113
+ .kui-SidebarFooter:where(.kui-SidebarFooter--container) {
16209
16114
  display: -webkit-box;
16210
16115
  display: -ms-flexbox;
16211
16116
  display: flex;
@@ -16220,12 +16125,12 @@
16220
16125
  padding: var(--sidebar-base-padding);
16221
16126
  min-height: var(--sidebar-item-height);
16222
16127
  }
16223
- .kui-SidebarHeader:where(.kui-SidebarHeader--container) :where(.kui-SidebarMenuButton) {
16128
+ :is(.kui-SidebarHeader:where(.kui-SidebarHeader--container),.kui-SidebarFooter:where(.kui-SidebarFooter--container)) :where(.kui-SidebarMenuButton) {
16224
16129
  -webkit-box-flex: 1;
16225
16130
  -ms-flex: 1;
16226
16131
  flex: 1;
16227
16132
  }
16228
- .kui-SidebarHeader:where(.kui-SidebarHeader--container) > :where(.kui-Toolbar) {
16133
+ :is(.kui-SidebarHeader:where(.kui-SidebarHeader--container),.kui-SidebarFooter:where(.kui-SidebarFooter--container)) > :where(.kui-Toolbar) {
16229
16134
  -webkit-box-flex: 1;
16230
16135
  -ms-flex: 1;
16231
16136
  flex: 1;
@@ -16233,31 +16138,6 @@
16233
16138
  .kui-SidebarHeader:where(.kui-SidebarHeader--container:not([data-float]):has(+ .kui-ShellScroll)) {
16234
16139
  padding-bottom: 0;
16235
16140
  }
16236
- .kui-SidebarFooter:where(.kui-SidebarFooter--container) {
16237
- display: -webkit-box;
16238
- display: -ms-flexbox;
16239
- display: flex;
16240
- -webkit-box-orient: horizontal;
16241
- -webkit-box-direction: normal;
16242
- -ms-flex-direction: row;
16243
- flex-direction: row;
16244
- -webkit-box-align: center;
16245
- -ms-flex-align: center;
16246
- align-items: center;
16247
- gap: var(--space-3);
16248
- padding: var(--sidebar-base-padding);
16249
- min-height: var(--sidebar-item-height);
16250
- }
16251
- .kui-SidebarFooter:where(.kui-SidebarFooter--container) :where(.kui-SidebarMenuButton) {
16252
- -webkit-box-flex: 1;
16253
- -ms-flex: 1;
16254
- flex: 1;
16255
- }
16256
- .kui-SidebarFooter:where(.kui-SidebarFooter--container) > :where(.kui-Toolbar) {
16257
- -webkit-box-flex: 1;
16258
- -ms-flex: 1;
16259
- flex: 1;
16260
- }
16261
16141
  :where(.kui-ShellScroll) + .kui-SidebarFooter:where(.kui-SidebarFooter--container:not([data-float])) {
16262
16142
  padding-top: 0;
16263
16143
  }
@@ -16873,7 +16753,7 @@
16873
16753
  :where(.kui-ShellRailContent) .kui-SidebarSearch {
16874
16754
  padding: var(--space-3);
16875
16755
  }
16876
- .kui-SidebarSearch--expanded .kui-SidebarSearchInputWrapper {
16756
+ :is(.kui-SidebarSearch--expanded, .kui-SidebarSearchPopover) .kui-SidebarSearchInputWrapper {
16877
16757
  display: -webkit-box;
16878
16758
  display: -ms-flexbox;
16879
16759
  display: flex;
@@ -16889,7 +16769,7 @@
16889
16769
  border-radius: var(--radius-2);
16890
16770
  padding: var(--space-2) var(--space-3);
16891
16771
  }
16892
- .kui-SidebarSearch--expanded .kui-SidebarSearchInputWrapper:focus-within {
16772
+ :is(.kui-SidebarSearch--expanded, .kui-SidebarSearchPopover) .kui-SidebarSearchInputWrapper:focus-within {
16893
16773
  -webkit-box-shadow: inset 0 0 0 1px var(--accent-a7);
16894
16774
  box-shadow: inset 0 0 0 1px var(--accent-a7);
16895
16775
  }
@@ -16923,11 +16803,7 @@
16923
16803
  margin-top: 1px;
16924
16804
  margin-bottom: 1px;
16925
16805
  }
16926
- :where(.kui-ShellRailContent.kui-r-size-1) :where(.kui-SidebarSearchTrigger) {
16927
- padding-top: var(--space-2) !important;
16928
- padding-bottom: var(--space-2) !important;
16929
- }
16930
- :where(.kui-ShellRailContent.kui-r-size-2) :where(.kui-SidebarSearchTrigger) {
16806
+ :where(.kui-ShellRailContent:is(.kui-r-size-1, .kui-r-size-2)) :where(.kui-SidebarSearchTrigger) {
16931
16807
  padding-top: var(--space-2) !important;
16932
16808
  padding-bottom: var(--space-2) !important;
16933
16809
  }
@@ -16936,16 +16812,12 @@
16936
16812
  padding-bottom: var(--space-3) !important;
16937
16813
  }
16938
16814
  .kui-ShellRailContent.kui-r-size-1 .kui-SidebarSearchTrigger svg {
16939
- width: var(--content-icon-size-2);
16940
- height: var(--content-icon-size-2);
16941
- }
16942
- .kui-ShellRailContent.kui-r-size-2 .kui-SidebarSearchTrigger svg {
16943
- width: var(--content-icon-size-3);
16944
- height: var(--content-icon-size-3);
16815
+ width: var(--icon-size-2);
16816
+ height: var(--icon-size-2);
16945
16817
  }
16946
- .kui-ShellRailContent.kui-r-size-3 .kui-SidebarSearchTrigger svg {
16947
- width: var(--content-icon-size-3);
16948
- height: var(--content-icon-size-3);
16818
+ .kui-ShellRailContent:is(.kui-r-size-2, .kui-r-size-3) .kui-SidebarSearchTrigger svg {
16819
+ width: var(--icon-size-3);
16820
+ height: var(--icon-size-3);
16949
16821
  }
16950
16822
  :where(.kui-ShellRailContent) :where(.kui-SidebarSearchTrigger:where([data-state='open'])) {
16951
16823
  background-color: transparent !important;
@@ -16993,26 +16865,6 @@
16993
16865
  --base-menu-line-height: var(--line-height-2);
16994
16866
  --base-menu-letter-spacing: var(--letter-spacing-2);
16995
16867
  }
16996
- .kui-SidebarSearchPopover .kui-SidebarSearchInputWrapper {
16997
- display: -webkit-box;
16998
- display: -ms-flexbox;
16999
- display: flex;
17000
- -webkit-box-orient: horizontal;
17001
- -webkit-box-direction: normal;
17002
- -ms-flex-direction: row;
17003
- flex-direction: row;
17004
- -webkit-box-align: center;
17005
- -ms-flex-align: center;
17006
- align-items: center;
17007
- gap: var(--space-3);
17008
- background-color: var(--neutral-a3);
17009
- border-radius: var(--radius-2);
17010
- padding: var(--space-2) var(--space-3);
17011
- }
17012
- .kui-SidebarSearchPopover .kui-SidebarSearchInputWrapper:focus-within {
17013
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-a7);
17014
- box-shadow: inset 0 0 0 1px var(--accent-a7);
17015
- }
17016
16868
  .kui-SidebarSearchPopover .kui-SidebarMenu {
17017
16869
  list-style: none;
17018
16870
  margin: 0;
@@ -17040,18 +16892,12 @@
17040
16892
  color: var(--accent-a12);
17041
16893
  font-weight: var(--font-weight-medium);
17042
16894
  }
17043
- .kui-SidebarSearchPopover .kui-SidebarMenuLabel {
17044
- min-width: 0;
17045
- overflow: hidden;
17046
- text-overflow: ellipsis;
17047
- white-space: nowrap;
17048
- }
17049
16895
  .kui-SidebarSearchIcon {
17050
16896
  -ms-flex-negative: 0;
17051
16897
  flex-shrink: 0;
17052
16898
  color: var(--neutral-a9);
17053
- width: var(--content-icon-size-2);
17054
- height: var(--content-icon-size-2);
16899
+ width: var(--icon-size-2);
16900
+ height: var(--icon-size-2);
17055
16901
  }
17056
16902
  .kui-SidebarSearchInput {
17057
16903
  -webkit-box-flex: 1;
@@ -17113,16 +16959,16 @@
17113
16959
  line-height: var(--line-height-1);
17114
16960
  }
17115
16961
  .kui-SidebarSearch.kui-r-size-1 .kui-SidebarSearchIcon {
17116
- width: var(--content-icon-size-1);
17117
- height: var(--content-icon-size-1);
16962
+ width: var(--icon-size-1);
16963
+ height: var(--icon-size-1);
17118
16964
  }
17119
16965
  .kui-SidebarSearch.kui-r-size-3 .kui-SidebarSearchInput {
17120
16966
  font-size: var(--font-size-3);
17121
16967
  line-height: var(--line-height-3);
17122
16968
  }
17123
16969
  .kui-SidebarSearch.kui-r-size-3 .kui-SidebarSearchIcon {
17124
- width: var(--content-icon-size-3);
17125
- height: var(--content-icon-size-3);
16970
+ width: var(--icon-size-3);
16971
+ height: var(--icon-size-3);
17126
16972
  }
17127
16973
  @media (prefers-contrast: more) {
17128
16974
  :where(.kui-ShellRailContent :is(.kui-SidebarMenuButton[data-active], .kui-SidebarMenuButton[data-highlighted]:not([data-disabled]))) .kui-SidebarMenuIconWrapper {
@@ -21958,28 +21804,28 @@
21958
21804
  --notice-radius: var(--radius-surface-1);
21959
21805
  --notice-line: var(--line-height-1);
21960
21806
  --notice-control: var(--control-height-1);
21961
- --notice-icon-size: var(--content-icon-size-1);
21807
+ --notice-icon-size: var(--icon-size-1);
21962
21808
  }
21963
21809
  .kui-NoticeRoot:where(.kui-r-size-2) {
21964
21810
  --notice-padding: var(--surface-p-2);
21965
21811
  --notice-radius: var(--radius-surface-2);
21966
21812
  --notice-line: var(--line-height-2);
21967
21813
  --notice-control: var(--control-height-2);
21968
- --notice-icon-size: var(--content-icon-size-2);
21814
+ --notice-icon-size: var(--icon-size-2);
21969
21815
  }
21970
21816
  .kui-NoticeRoot:where(.kui-r-size-3) {
21971
21817
  --notice-padding: var(--surface-p-3);
21972
21818
  --notice-radius: var(--radius-surface-3);
21973
21819
  --notice-line: var(--line-height-3);
21974
21820
  --notice-control: var(--control-height-3);
21975
- --notice-icon-size: var(--content-icon-size-3);
21821
+ --notice-icon-size: var(--icon-size-3);
21976
21822
  }
21977
21823
  .kui-NoticeRoot:where(.kui-r-size-4) {
21978
21824
  --notice-padding: var(--surface-p-4);
21979
21825
  --notice-radius: var(--radius-surface-4);
21980
21826
  --notice-line: var(--line-height-4);
21981
21827
  --notice-control: var(--control-height-4);
21982
- --notice-icon-size: var(--content-icon-size-4);
21828
+ --notice-icon-size: var(--icon-size-4);
21983
21829
  }
21984
21830
  .kui-theme:where([data-is-root-theme='true']) {
21985
21831
  position: relative;
package/tokens.css CHANGED
@@ -3326,10 +3326,10 @@
3326
3326
  --trigger-icon-size-2: 11px;
3327
3327
  --trigger-icon-size-3: 11px;
3328
3328
  --trigger-icon-size-4: 12px;
3329
- --content-icon-size-1: calc(var(--space-6) * 0.55);
3330
- --content-icon-size-2: calc(var(--space-7) * 0.525);
3331
- --content-icon-size-3: calc(var(--space-8) * 0.5125);
3332
- --content-icon-size-4: calc(var(--space-9) * 0.5);
3329
+ --content-icon-size-1: var(--icon-size-1);
3330
+ --content-icon-size-2: var(--icon-size-2);
3331
+ --content-icon-size-3: var(--icon-size-3);
3332
+ --content-icon-size-4: var(--icon-size-4);
3333
3333
  --indicator-icon-size-1: calc(9px * var(--scale));
3334
3334
  --indicator-icon-size-2: calc(10px * var(--scale));
3335
3335
  --indicator-icon-size-3: calc(12px * var(--scale));