@womp/kookie-ui 0.28.0 → 0.29.0

package/components.css

@@ -6263,6 +6263,173 @@
             filter: none;
   }
 }
+.kui-TextFieldGroup {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  position: relative;
+  isolation: isolate;
+  border-radius: var(--text-field-border-radius);
+}
+.kui-TextFieldGroup::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  border-radius: inherit;
+  -webkit-box-shadow: var(--text-field-group-edge);
+          box-shadow: var(--text-field-group-edge);
+  pointer-events: none;
+}
+.kui-TextFieldGroup:where(.kui-r-size-1) {
+  --text-field-border-radius: var(--radius-control-1);
+}
+.kui-TextFieldGroup:where(.kui-r-size-2) {
+  --text-field-border-radius: var(--radius-control-2);
+}
+.kui-TextFieldGroup:where(.kui-r-size-3) {
+  --text-field-border-radius: var(--radius-control-3);
+}
+.kui-TextFieldGroup:where(.kui-r-size-4) {
+  --text-field-border-radius: var(--radius-control-4);
+}
+@media (min-width: 520px) {
+  .kui-TextFieldGroup:where(.xs\:kui-r-size-1) {
+    --text-field-border-radius: var(--radius-control-1);
+  }
+  .kui-TextFieldGroup:where(.xs\:kui-r-size-2) {
+    --text-field-border-radius: var(--radius-control-2);
+  }
+  .kui-TextFieldGroup:where(.xs\:kui-r-size-3) {
+    --text-field-border-radius: var(--radius-control-3);
+  }
+  .kui-TextFieldGroup:where(.xs\:kui-r-size-4) {
+    --text-field-border-radius: var(--radius-control-4);
+  }
+}
+@media (min-width: 768px) {
+  .kui-TextFieldGroup:where(.sm\:kui-r-size-1) {
+    --text-field-border-radius: var(--radius-control-1);
+  }
+  .kui-TextFieldGroup:where(.sm\:kui-r-size-2) {
+    --text-field-border-radius: var(--radius-control-2);
+  }
+  .kui-TextFieldGroup:where(.sm\:kui-r-size-3) {
+    --text-field-border-radius: var(--radius-control-3);
+  }
+  .kui-TextFieldGroup:where(.sm\:kui-r-size-4) {
+    --text-field-border-radius: var(--radius-control-4);
+  }
+}
+@media (min-width: 1024px) {
+  .kui-TextFieldGroup:where(.md\:kui-r-size-1) {
+    --text-field-border-radius: var(--radius-control-1);
+  }
+  .kui-TextFieldGroup:where(.md\:kui-r-size-2) {
+    --text-field-border-radius: var(--radius-control-2);
+  }
+  .kui-TextFieldGroup:where(.md\:kui-r-size-3) {
+    --text-field-border-radius: var(--radius-control-3);
+  }
+  .kui-TextFieldGroup:where(.md\:kui-r-size-4) {
+    --text-field-border-radius: var(--radius-control-4);
+  }
+}
+@media (min-width: 1280px) {
+  .kui-TextFieldGroup:where(.lg\:kui-r-size-1) {
+    --text-field-border-radius: var(--radius-control-1);
+  }
+  .kui-TextFieldGroup:where(.lg\:kui-r-size-2) {
+    --text-field-border-radius: var(--radius-control-2);
+  }
+  .kui-TextFieldGroup:where(.lg\:kui-r-size-3) {
+    --text-field-border-radius: var(--radius-control-3);
+  }
+  .kui-TextFieldGroup:where(.lg\:kui-r-size-4) {
+    --text-field-border-radius: var(--radius-control-4);
+  }
+}
+@media (min-width: 1640px) {
+  .kui-TextFieldGroup:where(.xl\:kui-r-size-1) {
+    --text-field-border-radius: var(--radius-control-1);
+  }
+  .kui-TextFieldGroup:where(.xl\:kui-r-size-2) {
+    --text-field-border-radius: var(--radius-control-2);
+  }
+  .kui-TextFieldGroup:where(.xl\:kui-r-size-3) {
+    --text-field-border-radius: var(--radius-control-3);
+  }
+  .kui-TextFieldGroup:where(.xl\:kui-r-size-4) {
+    --text-field-border-radius: var(--radius-control-4);
+  }
+}
+.kui-TextFieldGroup:where(.kui-variant-raised) {
+  --text-field-group-edge: var(--control-chrome);
+  --text-field-group-divider: var(--neutral-a4);
+}
+.kui-TextFieldGroup:where(.kui-variant-raised):where([data-disabled]) {
+  --text-field-group-edge: inset 0 0 0 1px var(--field-edge-disabled);
+}
+.kui-TextFieldGroup:where(.kui-variant-outline, .kui-variant-surface) {
+  --text-field-group-edge: inset 0 0 0 1px var(--accent-6);
+  --text-field-group-divider: var(--accent-6);
+}
+.kui-TextFieldGroup:where(.kui-variant-outline,.kui-variant-surface):where([data-disabled]) {
+  --text-field-group-edge: inset 0 0 0 1px var(--neutral-a6);
+  --text-field-group-divider: var(--neutral-a6);
+}
+.kui-TextFieldGroup:where(.kui-variant-soft) {
+  --text-field-group-edge: none;
+  --text-field-group-divider: var(--accent-a5);
+}
+.kui-TextFieldGroup:where(.kui-variant-ghost) {
+  --text-field-group-edge: none;
+  --text-field-group-divider: var(--neutral-a5);
+}
+.kui-TextFieldGroup > .kui-TextFieldWrapper > .kui-TextFieldRoot {
+  position: relative;
+  border-radius: 0;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+:is(.kui-TextFieldGroup > .kui-TextFieldWrapper > .kui-TextFieldRoot):focus-within {
+  z-index: 3;
+}
+.kui-TextFieldGroup > .kui-TextFieldWrapper:first-child > .kui-TextFieldRoot {
+  border-start-start-radius: var(--text-field-border-radius);
+  border-end-start-radius: var(--text-field-border-radius);
+}
+.kui-TextFieldGroup > .kui-TextFieldWrapper:last-child > .kui-TextFieldRoot {
+  border-start-end-radius: var(--text-field-border-radius);
+  border-end-end-radius: var(--text-field-border-radius);
+}
+.kui-TextFieldGroup > .kui-TextFieldWrapper + .kui-TextFieldWrapper > .kui-TextFieldRoot::before {
+  content: '';
+  position: absolute;
+  z-index: 1;
+  inset-block: 0;
+  inset-inline-start: 0;
+  width: 1px;
+  background-color: var(--text-field-group-divider);
+  pointer-events: none;
+}
+.kui-TextFieldGroup > .kui-TextFieldWrapper > .kui-TextFieldRoot:focus-within::before,
+.kui-TextFieldGroup > .kui-TextFieldWrapper:has(> .kui-TextFieldRoot:focus-within) + .kui-TextFieldWrapper > .kui-TextFieldRoot::before {
+  opacity: 0;
+}
+.kui-TextFieldGroup > .kui-TextFieldWrapper > .kui-TextFieldRoot:has(> .kui-TextFieldInput[aria-invalid='true']) {
+  z-index: 3;
+  -webkit-box-shadow: inset 0 0 0 1px var(--red-6);
+          box-shadow: inset 0 0 0 1px var(--red-6);
+}
+@media (forced-colors: active) {
+  .kui-TextFieldGroup {
+    border: 1px solid CanvasText;
+  }
+  .kui-TextFieldGroup > .kui-TextFieldWrapper > .kui-TextFieldRoot {
+    border: none;
+  }
+}
 .kui-ComboboxContent {
   --combobox-list-max-height: calc(300px * var(--scale));
   -ms-scroll-chaining: none;
@@ -8636,6 +8803,37 @@
     height: var(--icon-size-4);
   }
 }
+.kui-SegmentedControlRoot:where(.kui-variant-raised, .kui-variant-outline) {
+  --segmented-control-indicator-background-color: var(--neutral-a4);
+}
+.kui-SegmentedControlRoot:where(.kui-variant-raised,.kui-variant-outline) :where(.kui-SegmentedControlIndicator)::before {
+  inset: var(--segmented-control-indicator-inset);
+  border-radius: max(var(--border-width-standard), calc(var(--segmented-control-border-radius) - var(--segmented-control-indicator-inset)));
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.kui-SegmentedControlRoot:where(.kui-variant-raised) {
+  --segmented-control-indicator-inset: 2px;
+  background-color: var(--field-fill);
+  -webkit-box-shadow: var(--control-chrome);
+          box-shadow: var(--control-chrome);
+}
+.kui-SegmentedControlRoot:where(.kui-variant-raised):where([data-disabled]) {
+  background-color: var(--field-fill-disabled);
+  -webkit-box-shadow: inset 0 0 0 1px var(--field-edge-disabled);
+          box-shadow: inset 0 0 0 1px var(--field-edge-disabled);
+}
+.kui-SegmentedControlRoot:where(.kui-variant-outline) {
+  --segmented-control-indicator-inset: 2px;
+  background-color: transparent;
+  -webkit-box-shadow: inset 0 0 0 1px var(--neutral-6);
+          box-shadow: inset 0 0 0 1px var(--neutral-6);
+}
+.kui-SegmentedControlRoot:where(.kui-variant-outline):where([data-disabled]) {
+  background-color: transparent;
+  -webkit-box-shadow: inset 0 0 0 1px var(--neutral-a6);
+          box-shadow: inset 0 0 0 1px var(--neutral-a6);
+}
 .kui-SegmentedControlItem:where([data-icon-only]) {
   min-width: var(--segmented-control-height);
 }
@@ -10703,6 +10901,9 @@
       -ms-flex: 1;
           flex: 1;
 }
+.kui-SidebarHeader:where(.kui-SidebarHeader--container:not([data-float]):has(+ .kui-ShellScroll)) {
+  padding-bottom: 0;
+}
 .kui-SidebarFooter:where(.kui-SidebarFooter--container) {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -10728,6 +10929,9 @@
       -ms-flex: 1;
           flex: 1;
 }
+:where(.kui-ShellScroll) + .kui-SidebarFooter:where(.kui-SidebarFooter--container:not([data-float])) {
+  padding-top: 0;
+}
 .kui-SidebarHeader :where(.kui-SidebarMenuButton),
 .kui-SidebarFooter :where(.kui-SidebarMenuButton) {
   display: -webkit-box;
@@ -10831,22 +11035,22 @@
   --sidebar-item-height: var(--control-height-3);
 }
 .kui-ShellPaneChrome:where(.kui-r-size-1) {
-  --sidebar-base-padding: var(--surface-p-1);
+  --sidebar-base-padding: var(--panel-p-1);
 }
 .kui-ShellPaneChrome:where(.kui-r-size-2) {
-  --sidebar-base-padding: var(--surface-p-2);
+  --sidebar-base-padding: var(--panel-p-2);
 }
 .kui-ShellPaneChrome:where(.kui-r-size-3) {
-  --sidebar-base-padding: var(--surface-p-3);
+  --sidebar-base-padding: var(--panel-p-3);
 }
 .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.kui-r-size-1) {
-  --base-menu-content-padding: var(--surface-p-1);
+  --base-menu-content-padding: var(--panel-p-1);
 }
 .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.kui-r-size-2) {
-  --base-menu-content-padding: var(--surface-p-2);
+  --base-menu-content-padding: var(--panel-p-2);
 }
 .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.kui-r-size-3) {
-  --base-menu-content-padding: var(--surface-p-3);
+  --base-menu-content-padding: var(--panel-p-3);
 }
 @media (min-width: 520px) {
   .kui-SidebarHeader:where(.xs\:kui-r-size-1),
@@ -10910,22 +11114,22 @@
     --sidebar-item-height: var(--control-height-3);
   }
   .kui-ShellPaneChrome:where(.xs\:kui-r-size-1) {
-    --sidebar-base-padding: var(--surface-p-1);
+    --sidebar-base-padding: var(--panel-p-1);
   }
   .kui-ShellPaneChrome:where(.xs\:kui-r-size-2) {
-    --sidebar-base-padding: var(--surface-p-2);
+    --sidebar-base-padding: var(--panel-p-2);
   }
   .kui-ShellPaneChrome:where(.xs\:kui-r-size-3) {
-    --sidebar-base-padding: var(--surface-p-3);
+    --sidebar-base-padding: var(--panel-p-3);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xs\:kui-r-size-1) {
-    --base-menu-content-padding: var(--surface-p-1);
+    --base-menu-content-padding: var(--panel-p-1);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xs\:kui-r-size-2) {
-    --base-menu-content-padding: var(--surface-p-2);
+    --base-menu-content-padding: var(--panel-p-2);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xs\:kui-r-size-3) {
-    --base-menu-content-padding: var(--surface-p-3);
+    --base-menu-content-padding: var(--panel-p-3);
   }
 }
 @media (min-width: 768px) {
@@ -10990,22 +11194,22 @@
     --sidebar-item-height: var(--control-height-3);
   }
   .kui-ShellPaneChrome:where(.sm\:kui-r-size-1) {
-    --sidebar-base-padding: var(--surface-p-1);
+    --sidebar-base-padding: var(--panel-p-1);
   }
   .kui-ShellPaneChrome:where(.sm\:kui-r-size-2) {
-    --sidebar-base-padding: var(--surface-p-2);
+    --sidebar-base-padding: var(--panel-p-2);
   }
   .kui-ShellPaneChrome:where(.sm\:kui-r-size-3) {
-    --sidebar-base-padding: var(--surface-p-3);
+    --sidebar-base-padding: var(--panel-p-3);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.sm\:kui-r-size-1) {
-    --base-menu-content-padding: var(--surface-p-1);
+    --base-menu-content-padding: var(--panel-p-1);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.sm\:kui-r-size-2) {
-    --base-menu-content-padding: var(--surface-p-2);
+    --base-menu-content-padding: var(--panel-p-2);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.sm\:kui-r-size-3) {
-    --base-menu-content-padding: var(--surface-p-3);
+    --base-menu-content-padding: var(--panel-p-3);
   }
 }
 @media (min-width: 1024px) {
@@ -11070,22 +11274,22 @@
     --sidebar-item-height: var(--control-height-3);
   }
   .kui-ShellPaneChrome:where(.md\:kui-r-size-1) {
-    --sidebar-base-padding: var(--surface-p-1);
+    --sidebar-base-padding: var(--panel-p-1);
   }
   .kui-ShellPaneChrome:where(.md\:kui-r-size-2) {
-    --sidebar-base-padding: var(--surface-p-2);
+    --sidebar-base-padding: var(--panel-p-2);
   }
   .kui-ShellPaneChrome:where(.md\:kui-r-size-3) {
-    --sidebar-base-padding: var(--surface-p-3);
+    --sidebar-base-padding: var(--panel-p-3);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.md\:kui-r-size-1) {
-    --base-menu-content-padding: var(--surface-p-1);
+    --base-menu-content-padding: var(--panel-p-1);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.md\:kui-r-size-2) {
-    --base-menu-content-padding: var(--surface-p-2);
+    --base-menu-content-padding: var(--panel-p-2);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.md\:kui-r-size-3) {
-    --base-menu-content-padding: var(--surface-p-3);
+    --base-menu-content-padding: var(--panel-p-3);
   }
 }
 @media (min-width: 1280px) {
@@ -11150,22 +11354,22 @@
     --sidebar-item-height: var(--control-height-3);
   }
   .kui-ShellPaneChrome:where(.lg\:kui-r-size-1) {
-    --sidebar-base-padding: var(--surface-p-1);
+    --sidebar-base-padding: var(--panel-p-1);
   }
   .kui-ShellPaneChrome:where(.lg\:kui-r-size-2) {
-    --sidebar-base-padding: var(--surface-p-2);
+    --sidebar-base-padding: var(--panel-p-2);
   }
   .kui-ShellPaneChrome:where(.lg\:kui-r-size-3) {
-    --sidebar-base-padding: var(--surface-p-3);
+    --sidebar-base-padding: var(--panel-p-3);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.lg\:kui-r-size-1) {
-    --base-menu-content-padding: var(--surface-p-1);
+    --base-menu-content-padding: var(--panel-p-1);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.lg\:kui-r-size-2) {
-    --base-menu-content-padding: var(--surface-p-2);
+    --base-menu-content-padding: var(--panel-p-2);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.lg\:kui-r-size-3) {
-    --base-menu-content-padding: var(--surface-p-3);
+    --base-menu-content-padding: var(--panel-p-3);
   }
 }
 @media (min-width: 1640px) {
@@ -11230,22 +11434,22 @@
     --sidebar-item-height: var(--control-height-3);
   }
   .kui-ShellPaneChrome:where(.xl\:kui-r-size-1) {
-    --sidebar-base-padding: var(--surface-p-1);
+    --sidebar-base-padding: var(--panel-p-1);
   }
   .kui-ShellPaneChrome:where(.xl\:kui-r-size-2) {
-    --sidebar-base-padding: var(--surface-p-2);
+    --sidebar-base-padding: var(--panel-p-2);
   }
   .kui-ShellPaneChrome:where(.xl\:kui-r-size-3) {
-    --sidebar-base-padding: var(--surface-p-3);
+    --sidebar-base-padding: var(--panel-p-3);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xl\:kui-r-size-1) {
-    --base-menu-content-padding: var(--surface-p-1);
+    --base-menu-content-padding: var(--panel-p-1);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xl\:kui-r-size-2) {
-    --base-menu-content-padding: var(--surface-p-2);
+    --base-menu-content-padding: var(--panel-p-2);
   }
   .kui-SidebarContent.kui-ShellPaneChrome:not(.kui-ShellRailContent *):where(.xl\:kui-r-size-3) {
-    --base-menu-content-padding: var(--surface-p-3);
+    --base-menu-content-padding: var(--panel-p-3);
   }
 }
 :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']) {
@@ -11825,7 +12029,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-1)),
 .kui-ShellContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-1)) {
   --kui-pane-row-start: var(--control-height-1);
-  --kui-pane-pad-start: var(--surface-p-1);
+  --kui-pane-pad-start: var(--panel-p-1);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)),
@@ -11834,7 +12038,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)),
 .kui-ShellContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)) {
   --kui-pane-row-start: var(--control-height-2);
-  --kui-pane-pad-start: var(--surface-p-2);
+  --kui-pane-pad-start: var(--panel-p-2);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)),
@@ -11843,7 +12047,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)),
 .kui-ShellContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)) {
   --kui-pane-row-start: var(--control-height-3);
-  --kui-pane-pad-start: var(--surface-p-3);
+  --kui-pane-pad-start: var(--panel-p-3);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)),
@@ -11852,7 +12056,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)),
 .kui-ShellContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)) {
   --kui-pane-row-end: var(--control-height-1);
-  --kui-pane-pad-end: var(--surface-p-1);
+  --kui-pane-pad-end: var(--panel-p-1);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)),
@@ -11861,7 +12065,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)),
 .kui-ShellContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)) {
   --kui-pane-row-end: var(--control-height-2);
-  --kui-pane-pad-end: var(--surface-p-2);
+  --kui-pane-pad-end: var(--panel-p-2);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)),
@@ -11870,7 +12074,7 @@
 .kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)),
 .kui-ShellContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)) {
   --kui-pane-row-end: var(--control-height-3);
-  --kui-pane-pad-end: var(--surface-p-3);
+  --kui-pane-pad-end: var(--panel-p-3);
 }
 .kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-1)),
 .kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-1)),