@womp/kookie-ui 0.27.1 → 0.28.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 (9) hide show
  1. package/components.css +72 -66
  2. package/package.json +1 -1
  3. package/src/components/_internal/base-menu.css +4 -4
  4. package/src/components/shell.css +7 -7
  5. package/src/components/sidebar.css +22 -9
  6. package/src/styles/tokens/radius.css +66 -25
  7. package/styles.css +136 -103
  8. package/tokens/base.css +64 -37
  9. package/tokens.css +64 -37
package/styles.css CHANGED
@@ -4717,38 +4717,65 @@
4717
4717
  --radius-row-2: var(--radius-control-2);
4718
4718
  --radius-row-3: var(--radius-control-3);
4719
4719
  --radius-row-4: var(--radius-control-4);
4720
- --radius-surface-1: calc(8px * var(--scale) * var(--radius-surface-factor));
4721
- --radius-surface-2: calc(12px * var(--scale) * var(--radius-surface-factor));
4722
- --radius-surface-3: calc(16px * var(--scale) * var(--radius-surface-factor));
4723
- --radius-surface-4: calc(20px * var(--scale) * var(--radius-surface-factor));
4724
- --radius-overlay-1: calc(12px * var(--scale) * var(--radius-surface-factor));
4725
- --radius-overlay-2: calc(16px * var(--scale) * var(--radius-surface-factor));
4726
- --radius-overlay-3: calc(20px * var(--scale) * var(--radius-surface-factor));
4727
- --radius-overlay-4: calc(24px * var(--scale) * var(--radius-surface-factor));
4720
+ --radius-panel-1: calc(var(--radius-row-1) + var(--panel-p-1));
4721
+ --radius-panel-2: calc(var(--radius-row-2) + var(--panel-p-2));
4722
+ --radius-panel-3: calc(var(--radius-row-3) + var(--panel-p-3));
4723
+ --radius-panel-4: calc(var(--radius-row-4) + var(--panel-p-4));
4724
+ --radius-surface-1: calc(16px * var(--scale));
4725
+ --radius-surface-2: calc(20px * var(--scale));
4726
+ --radius-surface-3: calc(24px * var(--scale));
4727
+ --radius-surface-4: calc(28px * var(--scale));
4728
+ --radius-overlay-1: calc(20px * var(--scale));
4729
+ --radius-overlay-2: calc(24px * var(--scale));
4730
+ --radius-overlay-3: calc(28px * var(--scale));
4731
+ --radius-overlay-4: calc(32px * var(--scale));
4728
4732
  }
4729
4733
  [data-radius='none'] {
4730
4734
  --radius-factor: 0;
4731
- --radius-surface-factor: 0;
4732
4735
  --radius-full: 0px;
4736
+ --radius-panel-1: 0px;
4737
+ --radius-panel-2: 0px;
4738
+ --radius-panel-3: 0px;
4739
+ --radius-panel-4: 0px;
4740
+ --radius-surface-1: 0px;
4741
+ --radius-surface-2: 0px;
4742
+ --radius-surface-3: 0px;
4743
+ --radius-surface-4: 0px;
4744
+ --radius-overlay-1: 0px;
4745
+ --radius-overlay-2: 0px;
4746
+ --radius-overlay-3: 0px;
4747
+ --radius-overlay-4: 0px;
4733
4748
  }
4734
4749
  [data-radius='small'] {
4735
4750
  --radius-factor: 0.75;
4736
- --radius-surface-factor: 0.5;
4737
4751
  --radius-full: 0px;
4752
+ --radius-surface-1: calc(5px * var(--scale));
4753
+ --radius-surface-2: calc(6px * var(--scale));
4754
+ --radius-surface-3: calc(8px * var(--scale));
4755
+ --radius-surface-4: calc(10px * var(--scale));
4756
+ --radius-overlay-1: calc(6px * var(--scale));
4757
+ --radius-overlay-2: calc(8px * var(--scale));
4758
+ --radius-overlay-3: calc(10px * var(--scale));
4759
+ --radius-overlay-4: calc(12px * var(--scale));
4738
4760
  }
4739
4761
  [data-radius='medium'] {
4740
4762
  --radius-factor: 1;
4741
- --radius-surface-factor: 0.75;
4742
4763
  --radius-full: 0px;
4764
+ --radius-surface-1: calc(12px * var(--scale));
4765
+ --radius-surface-2: calc(18px * var(--scale));
4766
+ --radius-surface-3: calc(24px * var(--scale));
4767
+ --radius-surface-4: calc(30px * var(--scale));
4768
+ --radius-overlay-1: calc(18px * var(--scale));
4769
+ --radius-overlay-2: calc(24px * var(--scale));
4770
+ --radius-overlay-3: calc(30px * var(--scale));
4771
+ --radius-overlay-4: calc(36px * var(--scale));
4743
4772
  }
4744
4773
  [data-radius='large'] {
4745
4774
  --radius-factor: 1.5;
4746
- --radius-surface-factor: 0.9;
4747
4775
  --radius-full: 0px;
4748
4776
  }
4749
4777
  [data-radius='full'] {
4750
4778
  --radius-factor: 2;
4751
- --radius-surface-factor: 1;
4752
4779
  --radius-full: 9999px;
4753
4780
  --radius-control-1: calc(var(--control-height-1) / 2);
4754
4781
  --radius-control-2: calc(var(--control-height-2) / 2);
@@ -4764,28 +4791,28 @@
4764
4791
  --kui-sf-p: var(--surface-p-1);
4765
4792
  }
4766
4793
  .kui-SurfaceNest:where(.kui-r-size-1) > * {
4767
- --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
4794
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-1) - var(--surface-p-1)));
4768
4795
  }
4769
4796
  .kui-SurfaceNest:where(.kui-r-size-2) {
4770
4797
  --kui-sf-radius: var(--radius-surface-2);
4771
4798
  --kui-sf-p: var(--surface-p-2);
4772
4799
  }
4773
4800
  .kui-SurfaceNest:where(.kui-r-size-2) > * {
4774
- --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
4801
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-2) - var(--surface-p-2)));
4775
4802
  }
4776
4803
  .kui-SurfaceNest:where(.kui-r-size-3) {
4777
4804
  --kui-sf-radius: var(--radius-surface-3);
4778
4805
  --kui-sf-p: var(--surface-p-3);
4779
4806
  }
4780
4807
  .kui-SurfaceNest:where(.kui-r-size-3) > * {
4781
- --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
4808
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-3) - var(--surface-p-3)));
4782
4809
  }
4783
4810
  .kui-SurfaceNest:where(.kui-r-size-4) {
4784
4811
  --kui-sf-radius: var(--radius-surface-4);
4785
4812
  --kui-sf-p: var(--surface-p-4);
4786
4813
  }
4787
4814
  .kui-SurfaceNest:where(.kui-r-size-4) > * {
4788
- --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
4815
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-4) - var(--surface-p-4)));
4789
4816
  }
4790
4817
  @media (min-width: 520px) {
4791
4818
  .kui-SurfaceNest:where(.xs\:kui-r-size-1) {
@@ -4793,28 +4820,28 @@
4793
4820
  --kui-sf-p: var(--surface-p-1);
4794
4821
  }
4795
4822
  .kui-SurfaceNest:where(.xs\:kui-r-size-1) > * {
4796
- --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
4823
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-1) - var(--surface-p-1)));
4797
4824
  }
4798
4825
  .kui-SurfaceNest:where(.xs\:kui-r-size-2) {
4799
4826
  --kui-sf-radius: var(--radius-surface-2);
4800
4827
  --kui-sf-p: var(--surface-p-2);
4801
4828
  }
4802
4829
  .kui-SurfaceNest:where(.xs\:kui-r-size-2) > * {
4803
- --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
4830
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-2) - var(--surface-p-2)));
4804
4831
  }
4805
4832
  .kui-SurfaceNest:where(.xs\:kui-r-size-3) {
4806
4833
  --kui-sf-radius: var(--radius-surface-3);
4807
4834
  --kui-sf-p: var(--surface-p-3);
4808
4835
  }
4809
4836
  .kui-SurfaceNest:where(.xs\:kui-r-size-3) > * {
4810
- --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
4837
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-3) - var(--surface-p-3)));
4811
4838
  }
4812
4839
  .kui-SurfaceNest:where(.xs\:kui-r-size-4) {
4813
4840
  --kui-sf-radius: var(--radius-surface-4);
4814
4841
  --kui-sf-p: var(--surface-p-4);
4815
4842
  }
4816
4843
  .kui-SurfaceNest:where(.xs\:kui-r-size-4) > * {
4817
- --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
4844
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-4) - var(--surface-p-4)));
4818
4845
  }
4819
4846
  }
4820
4847
  @media (min-width: 768px) {
@@ -4823,28 +4850,28 @@
4823
4850
  --kui-sf-p: var(--surface-p-1);
4824
4851
  }
4825
4852
  .kui-SurfaceNest:where(.sm\:kui-r-size-1) > * {
4826
- --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
4853
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-1) - var(--surface-p-1)));
4827
4854
  }
4828
4855
  .kui-SurfaceNest:where(.sm\:kui-r-size-2) {
4829
4856
  --kui-sf-radius: var(--radius-surface-2);
4830
4857
  --kui-sf-p: var(--surface-p-2);
4831
4858
  }
4832
4859
  .kui-SurfaceNest:where(.sm\:kui-r-size-2) > * {
4833
- --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
4860
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-2) - var(--surface-p-2)));
4834
4861
  }
4835
4862
  .kui-SurfaceNest:where(.sm\:kui-r-size-3) {
4836
4863
  --kui-sf-radius: var(--radius-surface-3);
4837
4864
  --kui-sf-p: var(--surface-p-3);
4838
4865
  }
4839
4866
  .kui-SurfaceNest:where(.sm\:kui-r-size-3) > * {
4840
- --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
4867
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-3) - var(--surface-p-3)));
4841
4868
  }
4842
4869
  .kui-SurfaceNest:where(.sm\:kui-r-size-4) {
4843
4870
  --kui-sf-radius: var(--radius-surface-4);
4844
4871
  --kui-sf-p: var(--surface-p-4);
4845
4872
  }
4846
4873
  .kui-SurfaceNest:where(.sm\:kui-r-size-4) > * {
4847
- --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
4874
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-4) - var(--surface-p-4)));
4848
4875
  }
4849
4876
  }
4850
4877
  @media (min-width: 1024px) {
@@ -4853,28 +4880,28 @@
4853
4880
  --kui-sf-p: var(--surface-p-1);
4854
4881
  }
4855
4882
  .kui-SurfaceNest:where(.md\:kui-r-size-1) > * {
4856
- --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
4883
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-1) - var(--surface-p-1)));
4857
4884
  }
4858
4885
  .kui-SurfaceNest:where(.md\:kui-r-size-2) {
4859
4886
  --kui-sf-radius: var(--radius-surface-2);
4860
4887
  --kui-sf-p: var(--surface-p-2);
4861
4888
  }
4862
4889
  .kui-SurfaceNest:where(.md\:kui-r-size-2) > * {
4863
- --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
4890
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-2) - var(--surface-p-2)));
4864
4891
  }
4865
4892
  .kui-SurfaceNest:where(.md\:kui-r-size-3) {
4866
4893
  --kui-sf-radius: var(--radius-surface-3);
4867
4894
  --kui-sf-p: var(--surface-p-3);
4868
4895
  }
4869
4896
  .kui-SurfaceNest:where(.md\:kui-r-size-3) > * {
4870
- --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
4897
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-3) - var(--surface-p-3)));
4871
4898
  }
4872
4899
  .kui-SurfaceNest:where(.md\:kui-r-size-4) {
4873
4900
  --kui-sf-radius: var(--radius-surface-4);
4874
4901
  --kui-sf-p: var(--surface-p-4);
4875
4902
  }
4876
4903
  .kui-SurfaceNest:where(.md\:kui-r-size-4) > * {
4877
- --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
4904
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-4) - var(--surface-p-4)));
4878
4905
  }
4879
4906
  }
4880
4907
  @media (min-width: 1280px) {
@@ -4883,28 +4910,28 @@
4883
4910
  --kui-sf-p: var(--surface-p-1);
4884
4911
  }
4885
4912
  .kui-SurfaceNest:where(.lg\:kui-r-size-1) > * {
4886
- --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
4913
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-1) - var(--surface-p-1)));
4887
4914
  }
4888
4915
  .kui-SurfaceNest:where(.lg\:kui-r-size-2) {
4889
4916
  --kui-sf-radius: var(--radius-surface-2);
4890
4917
  --kui-sf-p: var(--surface-p-2);
4891
4918
  }
4892
4919
  .kui-SurfaceNest:where(.lg\:kui-r-size-2) > * {
4893
- --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
4920
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-2) - var(--surface-p-2)));
4894
4921
  }
4895
4922
  .kui-SurfaceNest:where(.lg\:kui-r-size-3) {
4896
4923
  --kui-sf-radius: var(--radius-surface-3);
4897
4924
  --kui-sf-p: var(--surface-p-3);
4898
4925
  }
4899
4926
  .kui-SurfaceNest:where(.lg\:kui-r-size-3) > * {
4900
- --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
4927
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-3) - var(--surface-p-3)));
4901
4928
  }
4902
4929
  .kui-SurfaceNest:where(.lg\:kui-r-size-4) {
4903
4930
  --kui-sf-radius: var(--radius-surface-4);
4904
4931
  --kui-sf-p: var(--surface-p-4);
4905
4932
  }
4906
4933
  .kui-SurfaceNest:where(.lg\:kui-r-size-4) > * {
4907
- --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
4934
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-4) - var(--surface-p-4)));
4908
4935
  }
4909
4936
  }
4910
4937
  @media (min-width: 1640px) {
@@ -4913,28 +4940,28 @@
4913
4940
  --kui-sf-p: var(--surface-p-1);
4914
4941
  }
4915
4942
  .kui-SurfaceNest:where(.xl\:kui-r-size-1) > * {
4916
- --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
4943
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-1) - var(--surface-p-1)));
4917
4944
  }
4918
4945
  .kui-SurfaceNest:where(.xl\:kui-r-size-2) {
4919
4946
  --kui-sf-radius: var(--radius-surface-2);
4920
4947
  --kui-sf-p: var(--surface-p-2);
4921
4948
  }
4922
4949
  .kui-SurfaceNest:where(.xl\:kui-r-size-2) > * {
4923
- --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
4950
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-2) - var(--surface-p-2)));
4924
4951
  }
4925
4952
  .kui-SurfaceNest:where(.xl\:kui-r-size-3) {
4926
4953
  --kui-sf-radius: var(--radius-surface-3);
4927
4954
  --kui-sf-p: var(--surface-p-3);
4928
4955
  }
4929
4956
  .kui-SurfaceNest:where(.xl\:kui-r-size-3) > * {
4930
- --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
4957
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-3) - var(--surface-p-3)));
4931
4958
  }
4932
4959
  .kui-SurfaceNest:where(.xl\:kui-r-size-4) {
4933
4960
  --kui-sf-radius: var(--radius-surface-4);
4934
4961
  --kui-sf-p: var(--surface-p-4);
4935
4962
  }
4936
4963
  .kui-SurfaceNest:where(.xl\:kui-r-size-4) > * {
4937
- --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
4964
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-4) - var(--surface-p-4)));
4938
4965
  }
4939
4966
  }
4940
4967
  .kui-SurfaceNest {
@@ -9731,7 +9758,7 @@
9731
9758
  --base-menu-font-size: var(--font-size-1);
9732
9759
  --base-menu-line-height: var(--line-height-1);
9733
9760
  --base-menu-letter-spacing: var(--letter-spacing-1);
9734
- border-radius: var(--radius-surface-1);
9761
+ border-radius: var(--radius-panel-1);
9735
9762
  }
9736
9763
  .kui-BaseMenuContent:where(.kui-r-size-2) {
9737
9764
  --base-menu-content-padding: var(--panel-p-2);
@@ -9745,7 +9772,7 @@
9745
9772
  --base-menu-font-size: var(--font-size-2);
9746
9773
  --base-menu-line-height: var(--line-height-2);
9747
9774
  --base-menu-letter-spacing: var(--letter-spacing-2);
9748
- border-radius: var(--radius-surface-2);
9775
+ border-radius: var(--radius-panel-2);
9749
9776
  }
9750
9777
  .kui-BaseMenuContent:where(.kui-r-size-3) {
9751
9778
  --base-menu-content-padding: var(--panel-p-3);
@@ -9759,7 +9786,7 @@
9759
9786
  --base-menu-font-size: var(--font-size-3);
9760
9787
  --base-menu-line-height: var(--line-height-3);
9761
9788
  --base-menu-letter-spacing: var(--letter-spacing-3);
9762
- border-radius: var(--radius-surface-3);
9789
+ border-radius: var(--radius-panel-3);
9763
9790
  }
9764
9791
  .kui-BaseMenuContent:where(.kui-r-size-4) {
9765
9792
  --base-menu-content-padding: var(--panel-p-4);
@@ -9773,7 +9800,7 @@
9773
9800
  --base-menu-font-size: var(--font-size-4);
9774
9801
  --base-menu-line-height: var(--line-height-4);
9775
9802
  --base-menu-letter-spacing: var(--letter-spacing-4);
9776
- border-radius: var(--radius-surface-4);
9803
+ border-radius: var(--radius-panel-4);
9777
9804
  }
9778
9805
  @media (min-width: 520px) {
9779
9806
  .kui-BaseMenuContent:where(.xs\:kui-r-size-1) {
@@ -9788,7 +9815,7 @@
9788
9815
  --base-menu-font-size: var(--font-size-1);
9789
9816
  --base-menu-line-height: var(--line-height-1);
9790
9817
  --base-menu-letter-spacing: var(--letter-spacing-1);
9791
- border-radius: var(--radius-surface-1);
9818
+ border-radius: var(--radius-panel-1);
9792
9819
  }
9793
9820
  .kui-BaseMenuContent:where(.xs\:kui-r-size-2) {
9794
9821
  --base-menu-content-padding: var(--panel-p-2);
@@ -9802,7 +9829,7 @@
9802
9829
  --base-menu-font-size: var(--font-size-2);
9803
9830
  --base-menu-line-height: var(--line-height-2);
9804
9831
  --base-menu-letter-spacing: var(--letter-spacing-2);
9805
- border-radius: var(--radius-surface-2);
9832
+ border-radius: var(--radius-panel-2);
9806
9833
  }
9807
9834
  .kui-BaseMenuContent:where(.xs\:kui-r-size-3) {
9808
9835
  --base-menu-content-padding: var(--panel-p-3);
@@ -9816,7 +9843,7 @@
9816
9843
  --base-menu-font-size: var(--font-size-3);
9817
9844
  --base-menu-line-height: var(--line-height-3);
9818
9845
  --base-menu-letter-spacing: var(--letter-spacing-3);
9819
- border-radius: var(--radius-surface-3);
9846
+ border-radius: var(--radius-panel-3);
9820
9847
  }
9821
9848
  .kui-BaseMenuContent:where(.xs\:kui-r-size-4) {
9822
9849
  --base-menu-content-padding: var(--panel-p-4);
@@ -9830,7 +9857,7 @@
9830
9857
  --base-menu-font-size: var(--font-size-4);
9831
9858
  --base-menu-line-height: var(--line-height-4);
9832
9859
  --base-menu-letter-spacing: var(--letter-spacing-4);
9833
- border-radius: var(--radius-surface-4);
9860
+ border-radius: var(--radius-panel-4);
9834
9861
  }
9835
9862
  }
9836
9863
  @media (min-width: 768px) {
@@ -9846,7 +9873,7 @@
9846
9873
  --base-menu-font-size: var(--font-size-1);
9847
9874
  --base-menu-line-height: var(--line-height-1);
9848
9875
  --base-menu-letter-spacing: var(--letter-spacing-1);
9849
- border-radius: var(--radius-surface-1);
9876
+ border-radius: var(--radius-panel-1);
9850
9877
  }
9851
9878
  .kui-BaseMenuContent:where(.sm\:kui-r-size-2) {
9852
9879
  --base-menu-content-padding: var(--panel-p-2);
@@ -9860,7 +9887,7 @@
9860
9887
  --base-menu-font-size: var(--font-size-2);
9861
9888
  --base-menu-line-height: var(--line-height-2);
9862
9889
  --base-menu-letter-spacing: var(--letter-spacing-2);
9863
- border-radius: var(--radius-surface-2);
9890
+ border-radius: var(--radius-panel-2);
9864
9891
  }
9865
9892
  .kui-BaseMenuContent:where(.sm\:kui-r-size-3) {
9866
9893
  --base-menu-content-padding: var(--panel-p-3);
@@ -9874,7 +9901,7 @@
9874
9901
  --base-menu-font-size: var(--font-size-3);
9875
9902
  --base-menu-line-height: var(--line-height-3);
9876
9903
  --base-menu-letter-spacing: var(--letter-spacing-3);
9877
- border-radius: var(--radius-surface-3);
9904
+ border-radius: var(--radius-panel-3);
9878
9905
  }
9879
9906
  .kui-BaseMenuContent:where(.sm\:kui-r-size-4) {
9880
9907
  --base-menu-content-padding: var(--panel-p-4);
@@ -9888,7 +9915,7 @@
9888
9915
  --base-menu-font-size: var(--font-size-4);
9889
9916
  --base-menu-line-height: var(--line-height-4);
9890
9917
  --base-menu-letter-spacing: var(--letter-spacing-4);
9891
- border-radius: var(--radius-surface-4);
9918
+ border-radius: var(--radius-panel-4);
9892
9919
  }
9893
9920
  }
9894
9921
  @media (min-width: 1024px) {
@@ -9904,7 +9931,7 @@
9904
9931
  --base-menu-font-size: var(--font-size-1);
9905
9932
  --base-menu-line-height: var(--line-height-1);
9906
9933
  --base-menu-letter-spacing: var(--letter-spacing-1);
9907
- border-radius: var(--radius-surface-1);
9934
+ border-radius: var(--radius-panel-1);
9908
9935
  }
9909
9936
  .kui-BaseMenuContent:where(.md\:kui-r-size-2) {
9910
9937
  --base-menu-content-padding: var(--panel-p-2);
@@ -9918,7 +9945,7 @@
9918
9945
  --base-menu-font-size: var(--font-size-2);
9919
9946
  --base-menu-line-height: var(--line-height-2);
9920
9947
  --base-menu-letter-spacing: var(--letter-spacing-2);
9921
- border-radius: var(--radius-surface-2);
9948
+ border-radius: var(--radius-panel-2);
9922
9949
  }
9923
9950
  .kui-BaseMenuContent:where(.md\:kui-r-size-3) {
9924
9951
  --base-menu-content-padding: var(--panel-p-3);
@@ -9932,7 +9959,7 @@
9932
9959
  --base-menu-font-size: var(--font-size-3);
9933
9960
  --base-menu-line-height: var(--line-height-3);
9934
9961
  --base-menu-letter-spacing: var(--letter-spacing-3);
9935
- border-radius: var(--radius-surface-3);
9962
+ border-radius: var(--radius-panel-3);
9936
9963
  }
9937
9964
  .kui-BaseMenuContent:where(.md\:kui-r-size-4) {
9938
9965
  --base-menu-content-padding: var(--panel-p-4);
@@ -9946,7 +9973,7 @@
9946
9973
  --base-menu-font-size: var(--font-size-4);
9947
9974
  --base-menu-line-height: var(--line-height-4);
9948
9975
  --base-menu-letter-spacing: var(--letter-spacing-4);
9949
- border-radius: var(--radius-surface-4);
9976
+ border-radius: var(--radius-panel-4);
9950
9977
  }
9951
9978
  }
9952
9979
  @media (min-width: 1280px) {
@@ -9962,7 +9989,7 @@
9962
9989
  --base-menu-font-size: var(--font-size-1);
9963
9990
  --base-menu-line-height: var(--line-height-1);
9964
9991
  --base-menu-letter-spacing: var(--letter-spacing-1);
9965
- border-radius: var(--radius-surface-1);
9992
+ border-radius: var(--radius-panel-1);
9966
9993
  }
9967
9994
  .kui-BaseMenuContent:where(.lg\:kui-r-size-2) {
9968
9995
  --base-menu-content-padding: var(--panel-p-2);
@@ -9976,7 +10003,7 @@
9976
10003
  --base-menu-font-size: var(--font-size-2);
9977
10004
  --base-menu-line-height: var(--line-height-2);
9978
10005
  --base-menu-letter-spacing: var(--letter-spacing-2);
9979
- border-radius: var(--radius-surface-2);
10006
+ border-radius: var(--radius-panel-2);
9980
10007
  }
9981
10008
  .kui-BaseMenuContent:where(.lg\:kui-r-size-3) {
9982
10009
  --base-menu-content-padding: var(--panel-p-3);
@@ -9990,7 +10017,7 @@
9990
10017
  --base-menu-font-size: var(--font-size-3);
9991
10018
  --base-menu-line-height: var(--line-height-3);
9992
10019
  --base-menu-letter-spacing: var(--letter-spacing-3);
9993
- border-radius: var(--radius-surface-3);
10020
+ border-radius: var(--radius-panel-3);
9994
10021
  }
9995
10022
  .kui-BaseMenuContent:where(.lg\:kui-r-size-4) {
9996
10023
  --base-menu-content-padding: var(--panel-p-4);
@@ -10004,7 +10031,7 @@
10004
10031
  --base-menu-font-size: var(--font-size-4);
10005
10032
  --base-menu-line-height: var(--line-height-4);
10006
10033
  --base-menu-letter-spacing: var(--letter-spacing-4);
10007
- border-radius: var(--radius-surface-4);
10034
+ border-radius: var(--radius-panel-4);
10008
10035
  }
10009
10036
  }
10010
10037
  @media (min-width: 1640px) {
@@ -10020,7 +10047,7 @@
10020
10047
  --base-menu-font-size: var(--font-size-1);
10021
10048
  --base-menu-line-height: var(--line-height-1);
10022
10049
  --base-menu-letter-spacing: var(--letter-spacing-1);
10023
- border-radius: var(--radius-surface-1);
10050
+ border-radius: var(--radius-panel-1);
10024
10051
  }
10025
10052
  .kui-BaseMenuContent:where(.xl\:kui-r-size-2) {
10026
10053
  --base-menu-content-padding: var(--panel-p-2);
@@ -10034,7 +10061,7 @@
10034
10061
  --base-menu-font-size: var(--font-size-2);
10035
10062
  --base-menu-line-height: var(--line-height-2);
10036
10063
  --base-menu-letter-spacing: var(--letter-spacing-2);
10037
- border-radius: var(--radius-surface-2);
10064
+ border-radius: var(--radius-panel-2);
10038
10065
  }
10039
10066
  .kui-BaseMenuContent:where(.xl\:kui-r-size-3) {
10040
10067
  --base-menu-content-padding: var(--panel-p-3);
@@ -10048,7 +10075,7 @@
10048
10075
  --base-menu-font-size: var(--font-size-3);
10049
10076
  --base-menu-line-height: var(--line-height-3);
10050
10077
  --base-menu-letter-spacing: var(--letter-spacing-3);
10051
- border-radius: var(--radius-surface-3);
10078
+ border-radius: var(--radius-panel-3);
10052
10079
  }
10053
10080
  .kui-BaseMenuContent:where(.xl\:kui-r-size-4) {
10054
10081
  --base-menu-content-padding: var(--panel-p-4);
@@ -10062,7 +10089,7 @@
10062
10089
  --base-menu-font-size: var(--font-size-4);
10063
10090
  --base-menu-line-height: var(--line-height-4);
10064
10091
  --base-menu-letter-spacing: var(--letter-spacing-4);
10065
- border-radius: var(--radius-surface-4);
10092
+ border-radius: var(--radius-panel-4);
10066
10093
  }
10067
10094
  }
10068
10095
  .kui-BaseMenuItem:where([data-accent-color]) {
@@ -15819,6 +15846,9 @@
15819
15846
  -ms-flex: 1;
15820
15847
  flex: 1;
15821
15848
  }
15849
+ .kui-SidebarHeader:where(.kui-SidebarHeader--container:not([data-float]):has(+ .kui-ShellScroll)) {
15850
+ padding-bottom: 0;
15851
+ }
15822
15852
  .kui-SidebarFooter:where(.kui-SidebarFooter--container) {
15823
15853
  display: -webkit-box;
15824
15854
  display: -ms-flexbox;
@@ -15844,6 +15874,9 @@
15844
15874
  -ms-flex: 1;
15845
15875
  flex: 1;
15846
15876
  }
15877
+ :where(.kui-ShellScroll) + .kui-SidebarFooter:where(.kui-SidebarFooter--container:not([data-float])) {
15878
+ padding-top: 0;
15879
+ }
15847
15880
  .kui-SidebarHeader :where(.kui-SidebarMenuButton),
15848
15881
  .kui-SidebarFooter :where(.kui-SidebarMenuButton) {
15849
15882
  display: -webkit-box;
@@ -15947,22 +15980,22 @@
15947
15980
  --sidebar-item-height: var(--control-height-3);
15948
15981
  }
15949
15982
  .kui-ShellPaneChrome:where(.kui-r-size-1) {
15950
- --sidebar-base-padding: var(--surface-p-1);
15983
+ --sidebar-base-padding: var(--panel-p-1);
15951
15984
  }
15952
15985
  .kui-ShellPaneChrome:where(.kui-r-size-2) {
15953
- --sidebar-base-padding: var(--surface-p-2);
15986
+ --sidebar-base-padding: var(--panel-p-2);
15954
15987
  }
15955
15988
  .kui-ShellPaneChrome:where(.kui-r-size-3) {
15956
- --sidebar-base-padding: var(--surface-p-3);
15989
+ --sidebar-base-padding: var(--panel-p-3);
15957
15990
  }
15958
15991
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.kui-r-size-1) {
15959
- --base-menu-content-padding: var(--surface-p-1);
15992
+ --base-menu-content-padding: var(--panel-p-1);
15960
15993
  }
15961
15994
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.kui-r-size-2) {
15962
- --base-menu-content-padding: var(--surface-p-2);
15995
+ --base-menu-content-padding: var(--panel-p-2);
15963
15996
  }
15964
15997
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.kui-r-size-3) {
15965
- --base-menu-content-padding: var(--surface-p-3);
15998
+ --base-menu-content-padding: var(--panel-p-3);
15966
15999
  }
15967
16000
  @media (min-width: 520px) {
15968
16001
  .kui-SidebarHeader:where(.xs\:kui-r-size-1),
@@ -16026,22 +16059,22 @@
16026
16059
  --sidebar-item-height: var(--control-height-3);
16027
16060
  }
16028
16061
  .kui-ShellPaneChrome:where(.xs\:kui-r-size-1) {
16029
- --sidebar-base-padding: var(--surface-p-1);
16062
+ --sidebar-base-padding: var(--panel-p-1);
16030
16063
  }
16031
16064
  .kui-ShellPaneChrome:where(.xs\:kui-r-size-2) {
16032
- --sidebar-base-padding: var(--surface-p-2);
16065
+ --sidebar-base-padding: var(--panel-p-2);
16033
16066
  }
16034
16067
  .kui-ShellPaneChrome:where(.xs\:kui-r-size-3) {
16035
- --sidebar-base-padding: var(--surface-p-3);
16068
+ --sidebar-base-padding: var(--panel-p-3);
16036
16069
  }
16037
16070
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xs\:kui-r-size-1) {
16038
- --base-menu-content-padding: var(--surface-p-1);
16071
+ --base-menu-content-padding: var(--panel-p-1);
16039
16072
  }
16040
16073
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xs\:kui-r-size-2) {
16041
- --base-menu-content-padding: var(--surface-p-2);
16074
+ --base-menu-content-padding: var(--panel-p-2);
16042
16075
  }
16043
16076
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xs\:kui-r-size-3) {
16044
- --base-menu-content-padding: var(--surface-p-3);
16077
+ --base-menu-content-padding: var(--panel-p-3);
16045
16078
  }
16046
16079
  }
16047
16080
  @media (min-width: 768px) {
@@ -16106,22 +16139,22 @@
16106
16139
  --sidebar-item-height: var(--control-height-3);
16107
16140
  }
16108
16141
  .kui-ShellPaneChrome:where(.sm\:kui-r-size-1) {
16109
- --sidebar-base-padding: var(--surface-p-1);
16142
+ --sidebar-base-padding: var(--panel-p-1);
16110
16143
  }
16111
16144
  .kui-ShellPaneChrome:where(.sm\:kui-r-size-2) {
16112
- --sidebar-base-padding: var(--surface-p-2);
16145
+ --sidebar-base-padding: var(--panel-p-2);
16113
16146
  }
16114
16147
  .kui-ShellPaneChrome:where(.sm\:kui-r-size-3) {
16115
- --sidebar-base-padding: var(--surface-p-3);
16148
+ --sidebar-base-padding: var(--panel-p-3);
16116
16149
  }
16117
16150
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.sm\:kui-r-size-1) {
16118
- --base-menu-content-padding: var(--surface-p-1);
16151
+ --base-menu-content-padding: var(--panel-p-1);
16119
16152
  }
16120
16153
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.sm\:kui-r-size-2) {
16121
- --base-menu-content-padding: var(--surface-p-2);
16154
+ --base-menu-content-padding: var(--panel-p-2);
16122
16155
  }
16123
16156
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.sm\:kui-r-size-3) {
16124
- --base-menu-content-padding: var(--surface-p-3);
16157
+ --base-menu-content-padding: var(--panel-p-3);
16125
16158
  }
16126
16159
  }
16127
16160
  @media (min-width: 1024px) {
@@ -16186,22 +16219,22 @@
16186
16219
  --sidebar-item-height: var(--control-height-3);
16187
16220
  }
16188
16221
  .kui-ShellPaneChrome:where(.md\:kui-r-size-1) {
16189
- --sidebar-base-padding: var(--surface-p-1);
16222
+ --sidebar-base-padding: var(--panel-p-1);
16190
16223
  }
16191
16224
  .kui-ShellPaneChrome:where(.md\:kui-r-size-2) {
16192
- --sidebar-base-padding: var(--surface-p-2);
16225
+ --sidebar-base-padding: var(--panel-p-2);
16193
16226
  }
16194
16227
  .kui-ShellPaneChrome:where(.md\:kui-r-size-3) {
16195
- --sidebar-base-padding: var(--surface-p-3);
16228
+ --sidebar-base-padding: var(--panel-p-3);
16196
16229
  }
16197
16230
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.md\:kui-r-size-1) {
16198
- --base-menu-content-padding: var(--surface-p-1);
16231
+ --base-menu-content-padding: var(--panel-p-1);
16199
16232
  }
16200
16233
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.md\:kui-r-size-2) {
16201
- --base-menu-content-padding: var(--surface-p-2);
16234
+ --base-menu-content-padding: var(--panel-p-2);
16202
16235
  }
16203
16236
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.md\:kui-r-size-3) {
16204
- --base-menu-content-padding: var(--surface-p-3);
16237
+ --base-menu-content-padding: var(--panel-p-3);
16205
16238
  }
16206
16239
  }
16207
16240
  @media (min-width: 1280px) {
@@ -16266,22 +16299,22 @@
16266
16299
  --sidebar-item-height: var(--control-height-3);
16267
16300
  }
16268
16301
  .kui-ShellPaneChrome:where(.lg\:kui-r-size-1) {
16269
- --sidebar-base-padding: var(--surface-p-1);
16302
+ --sidebar-base-padding: var(--panel-p-1);
16270
16303
  }
16271
16304
  .kui-ShellPaneChrome:where(.lg\:kui-r-size-2) {
16272
- --sidebar-base-padding: var(--surface-p-2);
16305
+ --sidebar-base-padding: var(--panel-p-2);
16273
16306
  }
16274
16307
  .kui-ShellPaneChrome:where(.lg\:kui-r-size-3) {
16275
- --sidebar-base-padding: var(--surface-p-3);
16308
+ --sidebar-base-padding: var(--panel-p-3);
16276
16309
  }
16277
16310
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.lg\:kui-r-size-1) {
16278
- --base-menu-content-padding: var(--surface-p-1);
16311
+ --base-menu-content-padding: var(--panel-p-1);
16279
16312
  }
16280
16313
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.lg\:kui-r-size-2) {
16281
- --base-menu-content-padding: var(--surface-p-2);
16314
+ --base-menu-content-padding: var(--panel-p-2);
16282
16315
  }
16283
16316
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.lg\:kui-r-size-3) {
16284
- --base-menu-content-padding: var(--surface-p-3);
16317
+ --base-menu-content-padding: var(--panel-p-3);
16285
16318
  }
16286
16319
  }
16287
16320
  @media (min-width: 1640px) {
@@ -16346,22 +16379,22 @@
16346
16379
  --sidebar-item-height: var(--control-height-3);
16347
16380
  }
16348
16381
  .kui-ShellPaneChrome:where(.xl\:kui-r-size-1) {
16349
- --sidebar-base-padding: var(--surface-p-1);
16382
+ --sidebar-base-padding: var(--panel-p-1);
16350
16383
  }
16351
16384
  .kui-ShellPaneChrome:where(.xl\:kui-r-size-2) {
16352
- --sidebar-base-padding: var(--surface-p-2);
16385
+ --sidebar-base-padding: var(--panel-p-2);
16353
16386
  }
16354
16387
  .kui-ShellPaneChrome:where(.xl\:kui-r-size-3) {
16355
- --sidebar-base-padding: var(--surface-p-3);
16388
+ --sidebar-base-padding: var(--panel-p-3);
16356
16389
  }
16357
16390
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xl\:kui-r-size-1) {
16358
- --base-menu-content-padding: var(--surface-p-1);
16391
+ --base-menu-content-padding: var(--panel-p-1);
16359
16392
  }
16360
16393
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xl\:kui-r-size-2) {
16361
- --base-menu-content-padding: var(--surface-p-2);
16394
+ --base-menu-content-padding: var(--panel-p-2);
16362
16395
  }
16363
16396
  .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xl\:kui-r-size-3) {
16364
- --base-menu-content-padding: var(--surface-p-3);
16397
+ --base-menu-content-padding: var(--panel-p-3);
16365
16398
  }
16366
16399
  }
16367
16400
  :is(.kui-SidebarHeader:where(.kui-menu-variant-soft),.kui-SidebarContent:where(.kui-menu-variant-soft),.kui-SidebarFooter:where(.kui-menu-variant-soft)) :where(.kui-SidebarMenuSubTrigger[data-state='open']) {
@@ -16941,7 +16974,7 @@
16941
16974
  .kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-1)),
16942
16975
  .kui-ShellContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-1)) {
16943
16976
  --kui-pane-row-start: var(--control-height-1);
16944
- --kui-pane-pad-start: var(--surface-p-1);
16977
+ --kui-pane-pad-start: var(--panel-p-1);
16945
16978
  }
16946
16979
  .kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)),
16947
16980
  .kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)),
@@ -16950,7 +16983,7 @@
16950
16983
  .kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)),
16951
16984
  .kui-ShellContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)) {
16952
16985
  --kui-pane-row-start: var(--control-height-2);
16953
- --kui-pane-pad-start: var(--surface-p-2);
16986
+ --kui-pane-pad-start: var(--panel-p-2);
16954
16987
  }
16955
16988
  .kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)),
16956
16989
  .kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)),
@@ -16959,7 +16992,7 @@
16959
16992
  .kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)),
16960
16993
  .kui-ShellContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)) {
16961
16994
  --kui-pane-row-start: var(--control-height-3);
16962
- --kui-pane-pad-start: var(--surface-p-3);
16995
+ --kui-pane-pad-start: var(--panel-p-3);
16963
16996
  }
16964
16997
  .kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)),
16965
16998
  .kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)),
@@ -16968,7 +17001,7 @@
16968
17001
  .kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)),
16969
17002
  .kui-ShellContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)) {
16970
17003
  --kui-pane-row-end: var(--control-height-1);
16971
- --kui-pane-pad-end: var(--surface-p-1);
17004
+ --kui-pane-pad-end: var(--panel-p-1);
16972
17005
  }
16973
17006
  .kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)),
16974
17007
  .kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)),
@@ -16977,7 +17010,7 @@
16977
17010
  .kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)),
16978
17011
  .kui-ShellContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)) {
16979
17012
  --kui-pane-row-end: var(--control-height-2);
16980
- --kui-pane-pad-end: var(--surface-p-2);
17013
+ --kui-pane-pad-end: var(--panel-p-2);
16981
17014
  }
16982
17015
  .kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)),
16983
17016
  .kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)),
@@ -16986,7 +17019,7 @@
16986
17019
  .kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)),
16987
17020
  .kui-ShellContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)) {
16988
17021
  --kui-pane-row-end: var(--control-height-3);
16989
- --kui-pane-pad-end: var(--surface-p-3);
17022
+ --kui-pane-pad-end: var(--panel-p-3);
16990
17023
  }
16991
17024
  .kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-1)),
16992
17025
  .kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-1)),