@womp/kookie-ui 0.28.1 → 0.29.1

package/components.css

@@ -5907,8 +5907,8 @@
   --text-field-focus-color: var(--focus-8);
   --text-field-border-width: 1px;
   background-color: var(--field-fill);
-  -webkit-box-shadow: var(--control-chrome);
-          box-shadow: var(--control-chrome);
+  -webkit-box-shadow: var(--field-chrome);
+          box-shadow: var(--field-chrome);
 }
 @media (hover: hover) {
   .kui-TextFieldRoot:where(.kui-variant-raised):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled,:-moz-read-only)))) {
@@ -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(--field-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(--field-chrome);
+          box-shadow: var(--field-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);
 }
@@ -9830,8 +10028,8 @@
   position: relative;
   color: var(--accent-ink);
   background-color: var(--field-fill);
-  -webkit-box-shadow: var(--control-chrome);
-          box-shadow: var(--control-chrome);
+  -webkit-box-shadow: var(--field-chrome);
+          box-shadow: var(--field-chrome);
 }
 .kui-SelectTrigger:where(.kui-variant-raised):where(:focus-visible) {
   outline: 2px solid var(--focus-8);
@@ -14837,8 +15035,8 @@
   --v-selection-color: var(--focus-a5);
   --v-focus-color: var(--focus-8);
   background-color: var(--field-fill);
-  -webkit-box-shadow: var(--control-chrome);
-          box-shadow: var(--control-chrome);
+  -webkit-box-shadow: var(--field-chrome);
+          box-shadow: var(--field-chrome);
 }
 :is(.kui-TextAreaRoot:where(.kui-variant-raised) :where(.kui-TextAreaInput))::-webkit-input-placeholder {
   color: var(--neutral-a10);