From d8e0c2978619e95920e387cc024ed7a7614cac80 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Mon, 17 Nov 2025 15:00:21 +0100
Subject: [PATCH 01/24] feat: data-input-type attribute for field components

---
 .changeset/tidy-laws-repair.md                |  5 +++++
 src/components/fields/Checkbox/Checkbox.tsx   |  5 +++--
 src/components/fields/ComboBox/ComboBox.tsx   |  1 +
 .../fields/DatePicker/DateInput.tsx           |  3 +++
 .../fields/DatePicker/DateInputBase.tsx       |  6 ++++++
 .../fields/DatePicker/DatePicker.tsx          |  3 +++
 .../fields/DatePicker/DateRangePicker.tsx     |  3 +++
 .../DatePicker/DateRangeSeparatedPicker.tsx   |  3 +++
 .../fields/DatePicker/TimeInput.tsx           |  3 +++
 src/components/fields/FileInput/FileInput.tsx |  3 ++-
 .../fields/FilterListBox/FilterListBox.tsx    |  1 +
 .../fields/FilterPicker/FilterPicker.tsx      |  1 +
 src/components/fields/Input/Input.tsx         | 21 +++++++------------
 src/components/fields/ListBox/ListBox.tsx     |  1 +
 .../fields/NumberInput/NumberInput.tsx        |  2 +-
 .../fields/PasswordInput/PasswordInput.tsx    |  2 +-
 src/components/fields/Picker/Picker.tsx       |  1 +
 src/components/fields/RadioGroup/Radio.tsx    |  2 ++
 .../fields/RadioGroup/RadioGroup.tsx          |  3 +++
 .../fields/SearchInput/SearchInput.tsx        |  2 +-
 src/components/fields/Select/Select.tsx       |  1 +
 src/components/fields/Slider/SliderBase.tsx   |  8 ++++++-
 src/components/fields/Switch/Switch.tsx       | 12 ++++-------
 src/components/fields/TextArea/TextArea.tsx   |  2 +-
 .../fields/TextInput/TextInputBase.tsx        |  1 +
 .../TextInputMapper/TextInputMapper.tsx       | 10 ++++++++-
 26 files changed, 74 insertions(+), 31 deletions(-)
 create mode 100644 .changeset/tidy-laws-repair.md

diff --git a/.changeset/tidy-laws-repair.md b/.changeset/tidy-laws-repair.md
new file mode 100644
index 000000000..eb498ac9d
--- /dev/null
+++ b/.changeset/tidy-laws-repair.md
@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Specify `data-input-type` attribute for each field component and improve `qa` prop handling in various field components for consistency.
diff --git a/src/components/fields/Checkbox/Checkbox.tsx b/src/components/fields/Checkbox/Checkbox.tsx
index b5710cfe4..e531d5bac 100644
--- a/src/components/fields/Checkbox/Checkbox.tsx
+++ b/src/components/fields/Checkbox/Checkbox.tsx
@@ -230,11 +230,12 @@ function Checkbox(
   const checkbox = (
     <>
       <HiddenInput
-        data-qa="HiddenInput"
+        qa={qa || 'Checkbox'}
+        data-input-type="checkbox"
         {...mergeProps(inputProps, focusProps)}
         ref={inputRef}
       />
-      <CheckboxElement qa={qa || 'Checkbox'} mods={mods} styles={inputStyles}>
+      <CheckboxElement mods={mods} styles={inputStyles}>
         {markIcon}
       </CheckboxElement>
     </>
diff --git a/src/components/fields/ComboBox/ComboBox.tsx b/src/components/fields/ComboBox/ComboBox.tsx
index f704f5bfc..c7714d128 100644
--- a/src/components/fields/ComboBox/ComboBox.tsx
+++ b/src/components/fields/ComboBox/ComboBox.tsx
@@ -760,6 +760,7 @@ const ComboBoxInput = forwardRef<HTMLInputElement, ComboBoxInputProps>(
         styles={inputStyles}
         mods={mods}
         data-size={size}
+        data-input-type="combobox"
         role="combobox"
         aria-expanded={isPopoverOpen && hasResults}
         aria-haspopup="listbox"
diff --git a/src/components/fields/DatePicker/DateInput.tsx b/src/components/fields/DatePicker/DateInput.tsx
index 561bc456d..5e88a3557 100644
--- a/src/components/fields/DatePicker/DateInput.tsx
+++ b/src/components/fields/DatePicker/DateInput.tsx
@@ -56,6 +56,7 @@ function DateInput<T extends DateValue>(
   props = Object.assign({}, DEFAULT_DATE_PROPS, props);
 
   let {
+    qa,
     autoFocus,
     isDisabled,
     inputStyles,
@@ -86,6 +87,8 @@ function DateInput<T extends DateValue>(
   const component = (
     <DateInputBase
       ref={fieldRef}
+      qa={qa || 'DateInput'}
+      inputType="dateinput"
       size={size}
       fieldProps={fieldProps}
       isDisabled={isDisabled}
diff --git a/src/components/fields/DatePicker/DateInputBase.tsx b/src/components/fields/DatePicker/DateInputBase.tsx
index 3d83b7ff6..f119e2c11 100644
--- a/src/components/fields/DatePicker/DateInputBase.tsx
+++ b/src/components/fields/DatePicker/DateInputBase.tsx
@@ -44,6 +44,8 @@ const DateInputElement = tasty({
 });
 
 interface CubeDateAtomInputProps extends ContainerStyleProps {
+  qa?: string;
+  inputType?: string;
   isDisabled?: boolean;
   children?: React.ReactNode;
   fieldProps?: Props;
@@ -61,6 +63,8 @@ interface CubeDateAtomInputProps extends ContainerStyleProps {
 function DateInputBase(props: CubeDateAtomInputProps, ref) {
   let inputRef = useRef(null);
   let {
+    qa,
+    inputType,
     isDisabled,
     inputStyles,
     children,
@@ -88,8 +92,10 @@ function DateInputBase(props: CubeDateAtomInputProps, ref) {
 
   return (
     <DateInputWrapperElement
+      qa={qa}
       styles={styles}
       data-size={size}
+      data-input-type={inputType}
       mods={{
         disabled: isDisabled,
         focused: isFocused && !disableFocusRing,
diff --git a/src/components/fields/DatePicker/DatePicker.tsx b/src/components/fields/DatePicker/DatePicker.tsx
index d701311b2..f73f283c7 100644
--- a/src/components/fields/DatePicker/DatePicker.tsx
+++ b/src/components/fields/DatePicker/DatePicker.tsx
@@ -62,6 +62,7 @@ function DatePicker<T extends DateValue>(
   let styles = extractStyles(props, CONTAINER_STYLES);
 
   let {
+    qa,
     size,
     placeholderValue,
     isDisabled,
@@ -119,6 +120,8 @@ function DatePicker<T extends DateValue>(
   const component = (
     <DateInputBase
       ref={targetRef}
+      qa={qa || 'DatePicker'}
+      inputType="datepicker"
       styles={props.wrapperStyles}
       disableFocusRing={isFocusedButton}
       isDisabled={isDisabled}
diff --git a/src/components/fields/DatePicker/DateRangePicker.tsx b/src/components/fields/DatePicker/DateRangePicker.tsx
index 95a3fc548..68482a1e1 100644
--- a/src/components/fields/DatePicker/DateRangePicker.tsx
+++ b/src/components/fields/DatePicker/DateRangePicker.tsx
@@ -72,6 +72,7 @@ function DateRangePicker<T extends DateValue>(
   let styles = extractStyles(props, CONTAINER_STYLES);
 
   let {
+    qa,
     size,
     shouldFlip,
     placeholderValue,
@@ -131,6 +132,8 @@ function DateRangePicker<T extends DateValue>(
   const component = (
     <DateInputBase
       ref={targetRef}
+      qa={qa || 'DateRangePicker'}
+      inputType="daterangepicker"
       styles={props.wrapperStyles}
       disableFocusRing={isFocusedButton}
       isDisabled={isDisabled}
diff --git a/src/components/fields/DatePicker/DateRangeSeparatedPicker.tsx b/src/components/fields/DatePicker/DateRangeSeparatedPicker.tsx
index f8c2830ef..05640b543 100644
--- a/src/components/fields/DatePicker/DateRangeSeparatedPicker.tsx
+++ b/src/components/fields/DatePicker/DateRangeSeparatedPicker.tsx
@@ -75,6 +75,7 @@ function DateRangeSeparatedPicker<T extends DateValue>(
   let styles = extractStyles(props, CONTAINER_STYLES);
 
   let {
+    qa,
     size,
     placeholderValue,
     isDisabled,
@@ -181,6 +182,8 @@ function DateRangeSeparatedPicker<T extends DateValue>(
   const component = (
     <DatePickerElement ref={targetRef} styles={props.wrapperStyles}>
       <DateInputBase
+        qa={qa || 'DateRangeSeparatedPicker'}
+        inputType="daterangeseparatedpicker"
         disableFocusRing={startFocusProps.isFocused}
         isDisabled={isDisabled}
         validationState={validationState}
diff --git a/src/components/fields/DatePicker/TimeInput.tsx b/src/components/fields/DatePicker/TimeInput.tsx
index 1c501f81f..cc376db53 100644
--- a/src/components/fields/DatePicker/TimeInput.tsx
+++ b/src/components/fields/DatePicker/TimeInput.tsx
@@ -70,6 +70,7 @@ function TimeInput<T extends TimeValue>(
   let styles = extractStyles(props, CONTAINER_STYLES);
 
   let {
+    qa,
     inputStyles,
     wrapperStyles,
     autoFocus,
@@ -93,6 +94,8 @@ function TimeInput<T extends TimeValue>(
   const timeInput = (
     <DateInputBase
       ref={fieldRef}
+      qa={qa || 'TimeInput'}
+      inputType="timeinput"
       size={size}
       fieldProps={fieldProps}
       isDisabled={isDisabled}
diff --git a/src/components/fields/FileInput/FileInput.tsx b/src/components/fields/FileInput/FileInput.tsx
index a87595a5b..44977693c 100644
--- a/src/components/fields/FileInput/FileInput.tsx
+++ b/src/components/fields/FileInput/FileInput.tsx
@@ -226,9 +226,10 @@ function FileInput(props: CubeFileInputProps, ref) {
   const fileInput = (
     <FileInputElement
       ref={domRef}
-      qa="FileInput"
+      qa={qa || 'FileInput'}
       styles={inputStyles}
       isDisabled={isDisabled}
+      data-input-type="fileinput"
       mods={{
         selected: !!value,
         'drag-hover': dragHover,
diff --git a/src/components/fields/FilterListBox/FilterListBox.tsx b/src/components/fields/FilterListBox/FilterListBox.tsx
index e1584f5a5..9c2d99ad3 100644
--- a/src/components/fields/FilterListBox/FilterListBox.tsx
+++ b/src/components/fields/FilterListBox/FilterListBox.tsx
@@ -824,6 +824,7 @@ export const FilterListBox = forwardRef(function FilterListBox<
         data-autofocus={autoFocus ? '' : undefined}
         styles={searchInputStyles}
         data-size={size}
+        data-input-type="filterlistbox"
         role="combobox"
         aria-expanded="true"
         aria-haspopup="listbox"
diff --git a/src/components/fields/FilterPicker/FilterPicker.tsx b/src/components/fields/FilterPicker/FilterPicker.tsx
index 665cba331..0676d7efa 100644
--- a/src/components/fields/FilterPicker/FilterPicker.tsx
+++ b/src/components/fields/FilterPicker/FilterPicker.tsx
@@ -730,6 +730,7 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
         theme={validationState === 'invalid' ? 'danger' : theme}
         size={size}
         isDisabled={isDisabled || isLoading}
+        data-input-type="filterpicker"
         mods={{
           placeholder: !hasSelection,
           ...externalMods,
diff --git a/src/components/fields/Input/Input.tsx b/src/components/fields/Input/Input.tsx
index d8af62e4b..6adc65cc9 100644
--- a/src/components/fields/Input/Input.tsx
+++ b/src/components/fields/Input/Input.tsx
@@ -1,5 +1,3 @@
-import { ForwardedRef, forwardRef } from 'react';
-
 import { FileInput } from '../FileInput/FileInput';
 import { NumberInput } from '../NumberInput/NumberInput';
 import { PasswordInput } from '../PasswordInput/PasswordInput';
@@ -14,15 +12,10 @@ type CubeInput = typeof TextInput & {
   File: typeof FileInput;
 };
 
-export const Input: CubeInput = Object.assign(
-  forwardRef(function Input(props, ref: ForwardedRef<HTMLElement>) {
-    return <TextInput ref={ref} {...props} />;
-  }),
-  {
-    Text: TextInput,
-    Password: PasswordInput,
-    Number: NumberInput,
-    TextArea: TextArea,
-    File: FileInput,
-  },
-);
+export const Input: CubeInput = Object.assign(TextInput, {
+  Text: TextInput,
+  Password: PasswordInput,
+  Number: NumberInput,
+  TextArea: TextArea,
+  File: FileInput,
+});
diff --git a/src/components/fields/ListBox/ListBox.tsx b/src/components/fields/ListBox/ListBox.tsx
index 7e5106173..5dba3bf5f 100644
--- a/src/components/fields/ListBox/ListBox.tsx
+++ b/src/components/fields/ListBox/ListBox.tsx
@@ -919,6 +919,7 @@ export const ListBox = forwardRef(function ListBox<T extends object>(
             aria-disabled={isDisabled || undefined}
             mods={{ sections: hasSections }}
             data-shape={shape}
+            data-input-type="listbox"
             style={
               shouldVirtualize
                 ? {
diff --git a/src/components/fields/NumberInput/NumberInput.tsx b/src/components/fields/NumberInput/NumberInput.tsx
index 0fd93e564..ef3e6fbce 100644
--- a/src/components/fields/NumberInput/NumberInput.tsx
+++ b/src/components/fields/NumberInput/NumberInput.tsx
@@ -91,7 +91,7 @@ function NumberInput(
       {...otherProps}
       ref={ref}
       labelProps={labelProps}
-      inputProps={inputProps}
+      inputProps={{ ...inputProps, 'data-input-type': 'numberinput' }}
       inputRef={inputRef}
       wrapperProps={groupProps}
       suffixPosition="after"
diff --git a/src/components/fields/PasswordInput/PasswordInput.tsx b/src/components/fields/PasswordInput/PasswordInput.tsx
index 394f55cc3..19591d54c 100644
--- a/src/components/fields/PasswordInput/PasswordInput.tsx
+++ b/src/components/fields/PasswordInput/PasswordInput.tsx
@@ -61,7 +61,7 @@ function PasswordInput(
     <TextInputBase
       ref={ref}
       labelProps={labelProps}
-      inputProps={inputProps}
+      inputProps={{ ...inputProps, 'data-input-type': 'passwordinput' }}
       inputRef={inputRef}
       inputStyles={{ paddingRight: '4x' }}
       type={type}
diff --git a/src/components/fields/Picker/Picker.tsx b/src/components/fields/Picker/Picker.tsx
index efe49bffc..f0db2afce 100644
--- a/src/components/fields/Picker/Picker.tsx
+++ b/src/components/fields/Picker/Picker.tsx
@@ -584,6 +584,7 @@ export const Picker = forwardRef(function Picker<T extends object>(
         theme={validationState === 'invalid' ? 'danger' : theme}
         size={size}
         isDisabled={isDisabled || isLoading}
+        data-input-type="picker"
         mods={{
           placeholder: !hasSelection,
           ...externalMods,
diff --git a/src/components/fields/RadioGroup/Radio.tsx b/src/components/fields/RadioGroup/Radio.tsx
index de675e481..3923093fc 100644
--- a/src/components/fields/RadioGroup/Radio.tsx
+++ b/src/components/fields/RadioGroup/Radio.tsx
@@ -315,6 +315,7 @@ function Radio(props: CubeRadioProps, ref) {
       >
         <HiddenInput
           data-qa={qa || 'Radio'}
+          data-input-type="radio"
           aria-label={ariaLabel}
           {...inputProps}
           ref={inputRef}
@@ -337,6 +338,7 @@ function Radio(props: CubeRadioProps, ref) {
     >
       <HiddenInput
         data-qa={qa || 'Radio'}
+        data-input-type="radio"
         aria-label={ariaLabel}
         {...mergeProps(inputProps, focusProps)}
         ref={inputRef}
diff --git a/src/components/fields/RadioGroup/RadioGroup.tsx b/src/components/fields/RadioGroup/RadioGroup.tsx
index 3351d4e09..afd3058f8 100644
--- a/src/components/fields/RadioGroup/RadioGroup.tsx
+++ b/src/components/fields/RadioGroup/RadioGroup.tsx
@@ -87,6 +87,7 @@ function RadioGroup(props: WithNullableValue<CubeRadioGroupProps>, ref) {
   props = useFieldProps(props, { defaultValidationTrigger: 'onChange' });
 
   let {
+    qa,
     isDisabled,
     isRequired,
     labelPosition = 'top',
@@ -122,7 +123,9 @@ function RadioGroup(props: WithNullableValue<CubeRadioGroupProps>, ref) {
 
   let radioGroup = (
     <RadioGroupElement
+      qa={qa || 'RadioGroup'}
       styles={styles}
+      data-input-type="radiogroup"
       mods={{
         horizontal: orientation === 'horizontal',
         'inside-form': insideForm,
diff --git a/src/components/fields/SearchInput/SearchInput.tsx b/src/components/fields/SearchInput/SearchInput.tsx
index 54b523d65..4e02c7b8b 100644
--- a/src/components/fields/SearchInput/SearchInput.tsx
+++ b/src/components/fields/SearchInput/SearchInput.tsx
@@ -42,7 +42,7 @@ export const SearchInput = forwardRef(function SearchInput(
   return (
     <TextInputBase
       ref={ref}
-      inputProps={inputProps}
+      inputProps={{ ...inputProps, 'data-input-type': 'searchinput' }}
       inputRef={inputRef}
       type="search"
       icon={<SearchIcon />}
diff --git a/src/components/fields/Select/Select.tsx b/src/components/fields/Select/Select.tsx
index 909670d01..2d5072b96 100644
--- a/src/components/fields/Select/Select.tsx
+++ b/src/components/fields/Select/Select.tsx
@@ -423,6 +423,7 @@ function Select<T extends object>(
       data-size={size}
       data-type={type}
       data-theme={theme}
+      data-input-type="select"
     >
       <HiddenSelect
         state={state}
diff --git a/src/components/fields/Slider/SliderBase.tsx b/src/components/fields/Slider/SliderBase.tsx
index abc2fa36d..b99bb0015 100644
--- a/src/components/fields/Slider/SliderBase.tsx
+++ b/src/components/fields/Slider/SliderBase.tsx
@@ -202,7 +202,13 @@ function SliderBase(allProps: SliderBaseProps, ref: DOMRef<HTMLDivElement>) {
   styles = extractStyles(otherProps, OUTER_STYLES, styles);
 
   const sliderField = (
-    <SliderElement ref={domRef} {...groupProps} mods={mods} styles={styles}>
+    <SliderElement
+      ref={domRef}
+      {...groupProps}
+      mods={mods}
+      styles={styles}
+      data-input-type="slider"
+    >
       <SliderControlsElement {...trackProps} ref={trackRef} mods={mods}>
         {children({
           trackRef,
diff --git a/src/components/fields/Switch/Switch.tsx b/src/components/fields/Switch/Switch.tsx
index 5ff80febf..cab989a61 100644
--- a/src/components/fields/Switch/Switch.tsx
+++ b/src/components/fields/Switch/Switch.tsx
@@ -189,24 +189,20 @@ function Switch(props: WithNullableSelected<CubeSwitchProps>, ref) {
 
   const switchField = (
     <SwitchWrapperElement
-      qa={qa || 'SwitchWrapper'}
+      qa="SwitchWrapper"
       mods={mods}
       data-size={size}
       styles={styles}
       {...hoverProps}
     >
       <HiddenInput
-        data-qa="HiddenInput"
+        qa={qa || 'Switch'}
+        data-input-type="switch"
         {...mergeProps(inputProps, focusProps)}
         ref={inputRef}
         id={id}
       />
-      <SwitchElement
-        qa="Switch"
-        mods={mods}
-        data-size={size}
-        styles={inputStyles}
-      >
+      <SwitchElement mods={mods} data-size={size} styles={inputStyles}>
         <div data-element="Thumb" aria-hidden="true" />
       </SwitchElement>
       {children ? <Text nowrap>{children}</Text> : null}
diff --git a/src/components/fields/TextArea/TextArea.tsx b/src/components/fields/TextArea/TextArea.tsx
index ee67a7654..95c36f9ce 100644
--- a/src/components/fields/TextArea/TextArea.tsx
+++ b/src/components/fields/TextArea/TextArea.tsx
@@ -139,7 +139,7 @@ function TextArea(
       multiLine
       inputRef={inputRef}
       labelProps={labelProps}
-      inputProps={inputProps}
+      inputProps={{ ...inputProps, 'data-input-type': 'textarea' }}
       isDisabled={isDisabled}
       isReadOnly={isReadOnly}
       isRequired={isRequired}
diff --git a/src/components/fields/TextInput/TextInputBase.tsx b/src/components/fields/TextInput/TextInputBase.tsx
index 85b893930..7469fd70b 100644
--- a/src/components/fields/TextInput/TextInputBase.tsx
+++ b/src/components/fields/TextInput/TextInputBase.tsx
@@ -378,6 +378,7 @@ function _TextInputBase(props: CubeTextInputBaseProps, ref) {
         data-autofocus={autoFocus ? '' : undefined}
         autoFocus={autoFocus}
         data-size={size}
+        data-input-type="textinput"
         autoComplete={autocomplete}
         styles={inputStyles}
         disabled={!!isDisabled}
diff --git a/src/components/fields/TextInputMapper/TextInputMapper.tsx b/src/components/fields/TextInputMapper/TextInputMapper.tsx
index de03aa21c..c6a39e0be 100644
--- a/src/components/fields/TextInputMapper/TextInputMapper.tsx
+++ b/src/components/fields/TextInputMapper/TextInputMapper.tsx
@@ -31,6 +31,7 @@ type Mapping = {
 };
 
 export interface CubeTextInputMapperProps extends FieldBaseProps {
+  qa?: string;
   actionLabel?: string;
   isDisabled?: boolean;
   value?: Record<string, string>;
@@ -89,6 +90,7 @@ function TextInputMapper(
   const counterRef = useRef(0);
 
   let {
+    qa,
     isDisabled,
     actionLabel,
     value,
@@ -268,7 +270,13 @@ function TextInputMapper(
   }, [JSON.stringify(mappings)]);
 
   const element = (
-    <Flow ref={ref} gap="1x" onKeyDown={onKeyDown}>
+    <Flow
+      ref={ref}
+      gap="1x"
+      data-qa={qa || 'TextInputMapper'}
+      data-input-type="textinputmapper"
+      onKeyDown={onKeyDown}
+    >
       {[...renderedMappings]}
       {showNewButton ? (
         <Space gap={0}>

From 71c09519b49f5bde567c7660ab2b40917a208f76 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Mon, 17 Nov 2025 16:10:53 +0100
Subject: [PATCH 02/24] feat: data-input-type attribute for field components *
 2

---
 src/components/CollectionItem.docs.mdx        |  12 +-
 .../fields/DatePicker/DateInputBase.tsx       |   4 +-
 .../DatePicker/DateRangeSeparatedPicker.tsx   |   9 +-
 .../fields/FilterPicker/FilterPicker.tsx      |   3 +-
 src/components/fields/Picker/Picker.tsx       |   3 +-
 .../overlays/Dialog/DialogForm.docs.mdx       | 300 ++++++++++++++++++
 .../overlays/Dialog/DialogForm.stories.tsx    |  33 ++
 7 files changed, 351 insertions(+), 13 deletions(-)
 create mode 100644 src/components/overlays/Dialog/DialogForm.docs.mdx

diff --git a/src/components/CollectionItem.docs.mdx b/src/components/CollectionItem.docs.mdx
index 3b1a9978d..e5924f162 100644
--- a/src/components/CollectionItem.docs.mdx
+++ b/src/components/CollectionItem.docs.mdx
@@ -98,7 +98,7 @@ const items = [{
 
 ## Properties
 
-Extends all [Item component](/components/Item) props:
+Extends all [Item component](/docs/content-item--docs) props:
 
 - `children` - Item content
 - `icon` / `rightIcon` - Icons
@@ -296,8 +296,8 @@ const items: User[] = [
 
 ## Related Components
 
-- [Item](/components/Item) - Base item component
-- [ListBox](/components/ListBox) - List with selection
-- [Select](/components/Select) - Dropdown selector
-- [ComboBox](/components/ComboBox) - Searchable input
-- [Menu](/components/Menu) - Action menu
+- [Item](/docs/content-item--docs) - Base item component
+- [ListBox](/docs/forms-listbox--docs) - List with selection
+- [Select](/docs/forms-select--docs) - Dropdown selector
+- [ComboBox](/docs/forms-combobox--docs) - Searchable input
+- [Menu](/docs/actions-menu--docs) - Action menu
diff --git a/src/components/fields/DatePicker/DateInputBase.tsx b/src/components/fields/DatePicker/DateInputBase.tsx
index f119e2c11..459d8380b 100644
--- a/src/components/fields/DatePicker/DateInputBase.tsx
+++ b/src/components/fields/DatePicker/DateInputBase.tsx
@@ -92,10 +92,10 @@ function DateInputBase(props: CubeDateAtomInputProps, ref) {
 
   return (
     <DateInputWrapperElement
-      qa={qa}
+      qa={qa || 'DateTimeInput'}
       styles={styles}
       data-size={size}
-      data-input-type={inputType}
+      data-input-type={inputType ? inputType : 'datetimeinput'}
       mods={{
         disabled: isDisabled,
         focused: isFocused && !disableFocusRing,
diff --git a/src/components/fields/DatePicker/DateRangeSeparatedPicker.tsx b/src/components/fields/DatePicker/DateRangeSeparatedPicker.tsx
index 05640b543..8a6a705f0 100644
--- a/src/components/fields/DatePicker/DateRangeSeparatedPicker.tsx
+++ b/src/components/fields/DatePicker/DateRangeSeparatedPicker.tsx
@@ -180,10 +180,13 @@ function DateRangeSeparatedPicker<T extends DateValue>(
   }
 
   const component = (
-    <DatePickerElement ref={targetRef} styles={props.wrapperStyles}>
+    <DatePickerElement
+      ref={targetRef}
+      styles={props.wrapperStyles}
+      qa={qa || 'DateRangeSeparatedPicker'}
+      data-input-type="daterangeseparatedpicker"
+    >
       <DateInputBase
-        qa={qa || 'DateRangeSeparatedPicker'}
-        inputType="daterangeseparatedpicker"
         disableFocusRing={startFocusProps.isFocused}
         isDisabled={isDisabled}
         validationState={validationState}
diff --git a/src/components/fields/FilterPicker/FilterPicker.tsx b/src/components/fields/FilterPicker/FilterPicker.tsx
index 0676d7efa..5239c0095 100644
--- a/src/components/fields/FilterPicker/FilterPicker.tsx
+++ b/src/components/fields/FilterPicker/FilterPicker.tsx
@@ -249,6 +249,7 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
     searchValue,
     onSearchChange,
     sortSelectedToTop: sortSelectedToTopProp,
+    isButton = false,
     form,
     ...otherProps
   } = props;
@@ -723,7 +724,7 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
       <ItemButton
         ref={triggerRef as any}
         data-popover-trigger
-        isButton={false}
+        isButton={isButton}
         qa={qa || 'FilterPicker'}
         id={id}
         type={type}
diff --git a/src/components/fields/Picker/Picker.tsx b/src/components/fields/Picker/Picker.tsx
index f0db2afce..0489932c4 100644
--- a/src/components/fields/Picker/Picker.tsx
+++ b/src/components/fields/Picker/Picker.tsx
@@ -226,6 +226,7 @@ export const Picker = forwardRef(function Picker<T extends object>(
     isClearable,
     onClear,
     sortSelectedToTop,
+    isButton = false,
     listStateRef: externalListStateRef,
     ...otherProps
   } = props;
@@ -577,7 +578,7 @@ export const Picker = forwardRef(function Picker<T extends object>(
       <ItemButton
         ref={triggerRef as any}
         data-popover-trigger
-        isButton={false}
+        isButton={isButton}
         id={id}
         qa={qa || 'PickerTrigger'}
         type={type}
diff --git a/src/components/overlays/Dialog/DialogForm.docs.mdx b/src/components/overlays/Dialog/DialogForm.docs.mdx
new file mode 100644
index 000000000..6176e2b50
--- /dev/null
+++ b/src/components/overlays/Dialog/DialogForm.docs.mdx
@@ -0,0 +1,300 @@
+import { Meta, Canvas, Story, Controls } from '@storybook/addon-docs/blocks';
+import { DialogForm } from './DialogForm';
+import * as DialogFormStories from './DialogForm.stories';
+
+<Meta of={DialogFormStories} />
+
+# DialogForm
+
+DialogForm combines [Dialog](/docs/overlays-dialog--docs) and [Form](/docs/forms-form--docs) functionality into a single component for collecting user input in a modal context. It provides automatic form submission handling, dialog closing, and default action buttons.
+
+**Recommended Usage:** Use the [`useDialogContainer`](/docs/overlays-usedialogcontainer--docs) hook for programmatic control over DialogForm. This provides a cleaner API and better state management compared to `DialogTrigger`.
+
+## When to Use
+
+- Collect user input in a focused modal interface
+- Create forms that require user attention and confirmation
+- Build edit dialogs, creation modals, or settings forms
+- Handle form submission with automatic dialog closing
+
+## Component
+
+<Story of={DialogFormStories.Default} />
+
+---
+
+### Properties
+
+<Controls of={DialogFormStories.Default} />
+
+### DialogForm-specific Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `title` | `string` | The title of the dialog |
+| `danger` | `boolean` | Whether the submit button has a danger theme |
+| `submitProps` | `CubeButtonProps` | Properties for submit button (use `label` to change text) |
+| `cancelProps` | `CubeButtonProps` | Properties for cancel button (use `label` to change text) |
+| `preserve` | `boolean` | Preserve form values after submission/dismissal (default: false) |
+| `noActions` | `boolean` | Hide default action buttons to manually specify them |
+
+### Inherited Properties
+
+DialogForm inherits all properties from:
+- **[Dialog](/docs/overlays-dialog--docs)**: `size`, `isDismissable`, `closeIcon`, styling properties, etc.
+- **[Form](/docs/forms-form--docs)**: `name`, `defaultValues`, `onSubmit`, `onSubmitFailed`, `onValuesChange`, `labelPosition`, `requiredMark`, validation properties, etc.
+
+See the respective component documentation for complete property lists.
+
+### Base Properties
+
+Supports [Base properties](/docs/tasty-base-properties--docs)
+
+## Examples
+
+### Basic DialogForm (Recommended)
+
+Using `useDialogContainer` for programmatic control:
+
+```jsx
+import { useDialogContainer, DialogForm, Input, Button } from '@cube-dev/ui-kit';
+
+function UserFormDialog({ onSubmit, initialData }) {
+  return (
+    <DialogForm
+      title="User Information"
+      defaultValues={initialData}
+      onSubmit={onSubmit}
+    >
+      <Input.Text
+        name="name"
+        label="Name"
+        rules={[{ required: true, message: 'Name is required' }]}
+        placeholder="Enter your name"
+      />
+      <Input.Text
+        name="email"
+        label="Email"
+        type="email"
+        rules={[
+          { required: true, message: 'Email is required' },
+          { type: 'email', message: 'Please enter a valid email' }
+        ]}
+        placeholder="Enter your email"
+      />
+    </DialogForm>
+  );
+}
+
+function App() {
+  const userDialog = useDialogContainer(UserFormDialog);
+
+  const openDialog = () => {
+    userDialog.open({
+      initialData: { name: '', email: '' },
+      onSubmit: async (data) => {
+        await saveUser(data);
+        userDialog.close();
+      }
+    });
+  };
+
+  return (
+    <>
+      <Button onPress={openDialog}>Add User</Button>
+      {userDialog.rendered}
+    </>
+  );
+}
+```
+
+### With DialogTrigger (Alternative)
+
+For simpler use cases, you can use `DialogTrigger`:
+
+```jsx
+<DialogTrigger>
+  <Button>Open Form</Button>
+  <DialogForm
+    title="User Information"
+    onSubmit={async (data) => {
+      await saveUser(data);
+    }}
+  >
+    <Input.Text
+      name="name"
+      label="Name"
+      rules={[{ required: true }]}
+      placeholder="Enter your name"
+    />
+    <Input.Text
+      name="email"
+      label="Email"
+      type="email"
+      rules={[
+        { required: true },
+        { type: 'email', message: 'Please enter a valid email' }
+      ]}
+      placeholder="Enter your email"
+    />
+  </DialogForm>
+</DialogTrigger>
+```
+
+### Danger DialogForm
+
+```jsx
+<DialogForm
+  title="Delete Account"
+  danger
+  submitProps={{ label: 'Delete' }}
+  cancelProps={{ label: 'Keep Account' }}
+  onSubmit={async (data) => {
+    await deleteAccount(data.confirmation);
+  }}
+>
+  <Input.Text
+    name="confirmation"
+    label="Type DELETE to confirm"
+    rules={[
+      { required: true },
+      { pattern: /^DELETE$/, message: 'Please type DELETE' }
+    ]}
+  />
+</DialogForm>
+```
+
+### Custom Actions with Access to Dismiss
+
+When you need custom action buttons, use `noActions` prop and the render function pattern:
+
+```jsx
+<DialogForm
+  title="Advanced Form"
+  noActions
+  onSubmit={handleSubmit}
+>
+  {(dismiss) => (
+    <>
+      <Input.Text name="field1" label="Field 1" />
+      <Input.Text name="field2" label="Field 2" />
+      
+      <ButtonGroup>
+        <SubmitButton>Save</SubmitButton>
+        <Button onPress={() => {
+          saveAsDraft();
+          dismiss();
+        }}>
+          Save as Draft
+        </Button>
+        <Button onPress={dismiss}>Cancel</Button>
+      </ButtonGroup>
+    </>
+  )}
+</DialogForm>
+```
+
+### Preserving Form Values
+
+Use `preserve` prop to keep form values when reopening the dialog:
+
+```jsx
+<DialogForm
+  title="Edit Draft"
+  preserve
+  defaultValues={draftData}
+  onSubmit={saveDraft}
+>
+  <Input.Text name="title" label="Title" />
+  <TextArea name="content" label="Content" />
+</DialogForm>
+```
+
+## Behavior
+
+### Form Submission
+
+- On successful submission (`onSubmit`), the dialog automatically closes
+- Form fields are automatically reset after closing (unless `preserve` is true)
+- Reset happens after a 250ms delay to allow exit animations to complete
+
+### Dialog Dismissal
+
+- When dismissed via cancel button or Escape key, form fields are reset (unless `preserve` is true)
+- Both `onClose` (from dialog context) and `onDismiss` callbacks are triggered
+
+### Default Buttons
+
+- **Submit Button**: Labeled "Submit" by default, automatically handles form submission and loading states
+- **Cancel Button**: Labeled "Cancel" by default, dismisses the dialog and resets the form
+- Both buttons can be customized via `submitProps` and `cancelProps`
+- Hide default buttons with `noActions={true}` to provide custom actions
+
+## Accessibility
+
+DialogForm combines accessibility features from both Dialog and Form:
+
+### Keyboard Navigation
+
+- `Tab` / `Shift + Tab` - Navigate through form fields and buttons
+- `Enter` - Submit the form (when on submit button)
+- `Escape` - Dismiss the dialog (if `isDismissable` is true)
+
+### Screen Reader Support
+
+- Dialog announces with proper title
+- Form fields have proper label associations
+- Validation errors are announced
+- Submit/cancel actions are clearly communicated
+- Focus management handles transitions between dialog open/close
+
+See [Dialog Accessibility](/docs/overlays-dialog--docs#accessibility) and [Form Accessibility](/docs/forms-form--docs#accessibility) for complete details.
+
+## Best Practices
+
+1. **Use useDialogContainer for programmatic control**: Preferred method for better state management
+   ```jsx
+   const dialog = useDialogContainer(MyFormDialog);
+   dialog.open({ initialData, onSubmit: handleSubmit });
+   ```
+
+2. **Provide clear titles**: Always set a descriptive `title` for context
+   ```jsx
+   <DialogForm title="Edit User Profile" onSubmit={save}>
+   ```
+
+3. **Use danger theme for destructive actions**: Apply `danger` for delete/remove operations
+   ```jsx
+   <DialogForm title="Delete Item" danger submitProps={{ label: 'Delete' }}>
+   ```
+
+4. **Customize button labels**: Make action buttons specific to the task
+   ```jsx
+   <DialogForm
+     title="Create Project"
+     submitProps={{ label: 'Create' }}
+     cancelProps={{ label: 'Discard' }}
+   >
+   ```
+
+5. **Handle submission errors**: Implement `onSubmitFailed` for error handling
+   ```jsx
+   <DialogForm
+     onSubmit={save}
+     onSubmitFailed={(error) => notify.error(error.message)}
+   >
+   ```
+
+6. **Use preserve for drafts**: Enable `preserve` when working with draft content
+   ```jsx
+   <DialogForm preserve title="Edit Draft" defaultValues={draft}>
+   ```
+
+## Related Components
+
+- [useDialogContainer](/docs/overlays-usedialogcontainer--docs) - **Recommended hook for programmatic dialog control**
+- [Dialog](/docs/overlays-dialog--docs) - Base dialog component
+- [Form](/docs/forms-form--docs) - Form component with validation
+- [DialogTrigger](/docs/overlays-dialogtrigger--docs) - Alternative: manages dialog open/close state
+- [AlertDialog](/docs/overlays-alertdialog--docs) - For simple confirmations without forms
+
diff --git a/src/components/overlays/Dialog/DialogForm.stories.tsx b/src/components/overlays/Dialog/DialogForm.stories.tsx
index aeea698d8..7ef87f9d9 100644
--- a/src/components/overlays/Dialog/DialogForm.stories.tsx
+++ b/src/components/overlays/Dialog/DialogForm.stories.tsx
@@ -48,6 +48,39 @@ const TemplateContainer: StoryFn<CubeDialogFormProps> = (args) => {
   );
 };
 
+export const Default: StoryFn<CubeDialogFormProps> = (args) => {
+  return (
+    <DialogTrigger>
+      <Button>Open</Button>
+
+      <DialogForm
+        title="User Information"
+        onSubmit={async (data) => {
+          console.log('Form submitted:', data);
+        }}
+        {...args}
+      >
+        <Input.Text
+          name="name"
+          label="Name"
+          rules={[{ required: true, message: 'Name is required' }]}
+          placeholder="Enter your name"
+        />
+        <Input.Text
+          name="email"
+          label="Email"
+          type="email"
+          rules={[
+            { required: true, message: 'Email is required' },
+            { type: 'email', message: 'Please enter a valid email' },
+          ]}
+          placeholder="Enter your email"
+        />
+      </DialogForm>
+    </DialogTrigger>
+  );
+};
+
 const DIALOG_CHILDREN = (
   <>
     <Paragraph>

From c800ae214f47a3cd6b1dd72a8a99ec463ac2b60e Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Mon, 17 Nov 2025 16:11:13 +0100
Subject: [PATCH 03/24] feat: add isButton prop to pickers

---
 .changeset/picker-is-button-prop.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/picker-is-button-prop.md

diff --git a/.changeset/picker-is-button-prop.md b/.changeset/picker-is-button-prop.md
new file mode 100644
index 000000000..26947dd76
--- /dev/null
+++ b/.changeset/picker-is-button-prop.md
@@ -0,0 +1,6 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Add `isButton` prop support to `Picker` and `FilterPicker` components. The prop is now properly passed to the trigger `ItemButton` component, allowing control over button styling. Defaults to `false` to maintain existing behavior.
+

From 44319c1b130c87c521f8480f74939c650805ce02 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Mon, 17 Nov 2025 16:15:03 +0100
Subject: [PATCH 04/24] chore: update storybook

---
 .cursor/rules/storybook.mdc                   |   4 +-
 .storybook/preview.jsx                        |   2 +-
 package.json                                  |  11 +-
 pnpm-lock.yaml                                | 249 +++++-------------
 .../CommandMenu/CommandMenu.stories.tsx       |   8 +-
 .../actions/ItemAction/ItemAction.stories.tsx |   2 +-
 .../actions/ItemButton/ItemButton.stories.tsx |   2 +-
 src/components/actions/Menu/Menu.stories.tsx  |   8 +-
 src/components/content/Item/Item.stories.tsx  |   2 +-
 .../fields/ComboBox/ComboBox.stories.tsx      |   2 +-
 .../fields/DatePicker/DatePicker.stories.tsx  |   2 +-
 .../DatePicker/DateRangePicker.stories.tsx    |   2 +-
 .../fields/FileInput/FileInput.stories.tsx    |   2 +-
 .../FilterListBox/FilterListBox.stories.tsx   |   2 +-
 .../FilterPicker/FilterPicker.stories.tsx     |   2 +-
 .../fields/Select/Select.stories.tsx          |   2 +-
 .../TextInputMapper.stories.tsx               |   2 +-
 .../form/Form/ComplexForm.stories.tsx         |   2 +-
 .../AlertDialog/AlertDialog.stories.tsx       |   2 +-
 .../overlays/Dialog/Dialog.stories.tsx        |   2 +-
 .../overlays/Dialog/DialogForm.stories.tsx    |   4 +-
 .../Notifications.stories.tsx                 |   2 +-
 .../overlays/Toasts/Toasts.stories.tsx        |   2 +-
 .../overlays/Tooltip/Tooltip.stories.tsx      |   2 +-
 src/stories/RenderCache.stories.tsx           |   2 +-
 src/types/storybook-assertions.d.ts           |   9 -
 26 files changed, 89 insertions(+), 242 deletions(-)
 delete mode 100644 src/types/storybook-assertions.d.ts

diff --git a/.cursor/rules/storybook.mdc b/.cursor/rules/storybook.mdc
index e7d04ad5b..828edcc5d 100644
--- a/.cursor/rules/storybook.mdc
+++ b/.cursor/rules/storybook.mdc
@@ -7,7 +7,7 @@ alwaysApply: false
 ### Stories Files (.stories.tsx)
 - Import types: `import type { Meta, StoryObj } from '@storybook/react-vite';`
 - Import `StoryFn` for custom template functions
-- For interactive tests: `import { userEvent, within } from '@storybook/test';` (NOT from `@testing-library/react`)
+- For interactive tests: `import { userEvent, within } from 'storybook/test';` (NOT from `@testing-library/react`)
 
 ### Documentation Files (.docs.mdx)
 - `import { Meta, Canvas, Story, Controls } from '@storybook/addon-docs/blocks';`
@@ -103,7 +103,7 @@ export const Interactive: StoryObj = {
 };
 ```
 
-**Important:** Always import `userEvent` and `within` from `'@storybook/test'` in story files. This ensures they respect Storybook's configuration (e.g., `testIdAttribute: 'data-qa'` set in `.storybook/preview.jsx`). Do NOT use `@testing-library/react` imports in stories.
+**Important:** Always import `userEvent` and `within` from `'storybook/test'` in story files. This ensures they respect Storybook's configuration (e.g., `testIdAttribute: 'data-qa'` set in `.storybook/preview.jsx`). Do NOT use `@testing-library/react` imports in stories.
 
 ## MDX Documentation Structure
 
diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx
index 2277aa1ae..5a91c78aa 100644
--- a/.storybook/preview.jsx
+++ b/.storybook/preview.jsx
@@ -1,6 +1,6 @@
-import { configure } from '@storybook/test';
 import isChromatic from 'chromatic/isChromatic';
 import { config } from 'react-transition-group';
+import { configure } from 'storybook/test';
 
 import { Root } from '../src';
 
diff --git a/package.json b/package.json
index 719a18da3..9916e04e0 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,6 @@
     "@react-stately/utils": "^3.10.8",
     "@react-types/shared": "^3.31.0",
     "@sparticuz/chromium": "^137.0.1",
-    "@storybook/test": "^8.6.14",
     "@tabler/icons-react": "^3.31.0",
     "@tanstack/react-virtual": "^3.13.12",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
@@ -117,9 +116,9 @@
     "@size-limit/webpack": "^8.2.4",
     "@size-limit/webpack-why": "^8.2.4",
     "@statoscope/cli": "^5.20.1",
-    "@storybook/addon-docs": "^10.0.0",
-    "@storybook/addon-links": "^10.0.0",
-    "@storybook/react-vite": "^10.0.0",
+    "@storybook/addon-docs": "^10.0.8",
+    "@storybook/addon-links": "^10.0.8",
+    "@storybook/react-vite": "^10.0.8",
     "@swc/core": "^1.3.36",
     "@swc/jest": "^0.2.36",
     "@testing-library/dom": "^10.4.1",
@@ -148,7 +147,7 @@
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-storybook": "^10.0.0",
+    "eslint-plugin-storybook": "^10.0.8",
     "husky": "^6.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -165,7 +164,7 @@
     "react-test-renderer": "^19.1.1",
     "rimraf": "^6.0.1",
     "size-limit": "^8.2.6",
-    "storybook": "^10.0.0",
+    "storybook": "^10.0.8",
     "storybook-addon-turbo-build": "^2.0.1",
     "styled-components": "^6.1.19",
     "swc-loader": "^0.2.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2473f5b08..45a53e52b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,9 +44,6 @@ importers:
       '@sparticuz/chromium':
         specifier: ^137.0.1
         version: 137.0.1
-      '@storybook/test':
-        specifier: ^8.6.14
-        version: 8.6.14(storybook@10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))
       '@tabler/icons-react':
         specifier: ^3.31.0
         version: 3.31.0(react@19.1.1)
@@ -166,14 +163,14 @@ importers:
         specifier: ^5.20.1
         version: 5.20.1
       '@storybook/addon-docs':
-        specifier: ^10.0.0
-        version: 10.0.0(@types/react@19.1.10)(esbuild@0.25.9)(rollup@4.46.4)(storybook@10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))(webpack@5.76.1(@swc/core@1.3.36)(esbuild@0.25.9))
+        specifier: ^10.0.8
+        version: 10.0.8(@types/react@19.1.10)(esbuild@0.25.9)(rollup@4.46.4)(storybook@10.0.8(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))(webpack@5.76.1(@swc/core@1.3.36)(esbuild@0.25.9))
       '@storybook/addon-links':
-        specifier: ^10.0.0
-        version: 10.0.0(react@19.1.1)(storybook@10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))
+        specifier: ^10.0.8
+        version: 10.0.8(react@19.1.1)(storybook@10.0.8(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))
       '@storybook/react-vite':
-        specifier: ^10.0.0
-        version: 10.0.0(esbuild@0.25.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(rollup@4.46.4)(storybook@10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))(typescript@5.6.3)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))(webpack@5.76.1(@swc/core@1.3.36)(esbuild@0.25.9))
+        specifier: ^10.0.8
+        version: 10.0.8(esbuild@0.25.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(rollup@4.46.4)(storybook@10.0.8(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))(typescript@5.6.3)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))(webpack@5.76.1(@swc/core@1.3.36)(esbuild@0.25.9))
       '@swc/core':
         specifier: ^1.3.36
         version: 1.3.36
@@ -259,8 +256,8 @@ importers:
         specifier: ^5.2.0
         version: 5.2.0(eslint@9.25.1)
       eslint-plugin-storybook:
-        specifier: ^10.0.0
-        version: 10.0.0(eslint@9.25.1)(storybook@10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))(typescript@5.6.3)
+        specifier: ^10.0.8
+        version: 10.0.8(eslint@9.25.1)(storybook@10.0.8(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))(typescript@5.6.3)
       husky:
         specifier: ^6.0.0
         version: 6.0.0
@@ -310,8 +307,8 @@ importers:
         specifier: ^8.2.6
         version: 8.2.6
       storybook:
-        specifier: ^10.0.0
-        version: 10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))
+        specifier: ^10.0.8
+        version: 10.0.8(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))
       storybook-addon-turbo-build:
         specifier: ^2.0.1
         version: 2.0.1(webpack@5.76.1(@swc/core@1.3.36)(esbuild@0.25.9))
@@ -2640,32 +2637,32 @@ packages:
   '@statoscope/webpack-ui@5.26.2':
     resolution: {integrity: sha512-01RYHyG2nrif9Y5i717EI6jUMqdypbrOMdqpNUBFlw2rmaEB5t21V35b5Vd0pZEgesKNijE3ULvP7EQ37jEbIg==}
 
-  '@storybook/addon-docs@10.0.0':
-    resolution: {integrity: sha512-mwEI/os48ncIQMrLFAI3rJf88Ge/2/7Pj+g6+MRYjWAz5x9zCLrOgRUJFRvuzVY4SJKsKuSPYplrbmj4L+YlRQ==}
+  '@storybook/addon-docs@10.0.8':
+    resolution: {integrity: sha512-PYuaGXGycsamK/7OrFoE4syHGy22mdqqArl67cfosRwmRxZEI9ManQK0jTjNQM9ZX14NpThMOSWNGoWLckkxog==}
     peerDependencies:
-      storybook: ^10.0.0
+      storybook: ^10.0.8
 
-  '@storybook/addon-links@10.0.0':
-    resolution: {integrity: sha512-HCMA2eLuUyAZVyoEAgROvrrpKQYMD3BsjG7cc6nNxVQQO9xw5vcC6uKp/o6Yim3iiT5A+Vy/jSH72Lj9v9E0qA==}
+  '@storybook/addon-links@10.0.8':
+    resolution: {integrity: sha512-LnakruogdN5ND0cF0SOKyhzbEeIGDe1njkufX2aR9LOXQ0mMj5S2P86TdP87dR5R9bJjYYPPg/F7sjsAiI1Lqg==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      storybook: ^10.0.0
+      storybook: ^10.0.8
     peerDependenciesMeta:
       react:
         optional: true
 
-  '@storybook/builder-vite@10.0.0':
-    resolution: {integrity: sha512-D8rcLAJSKeAol/xFA+uB9YGKOzg/SZiSMw12DkrJGgJD7GGM9xPR7VwQVxPtMUewmQrPtYB7LZ3Eaa+7PlMQ4Q==}
+  '@storybook/builder-vite@10.0.8':
+    resolution: {integrity: sha512-kaf/pUENzXxYgQMHGGPNiIk1ieb+SOMuSeLKx8wAUOlQOrzhtSH+ItACW/l43t+O6YZ8jYHoNBMF1kdQ1+Y5+w==}
     peerDependencies:
-      storybook: ^10.0.0
+      storybook: ^10.0.8
       vite: ^5.0.0 || ^6.0.0 || ^7.0.0
 
-  '@storybook/csf-plugin@10.0.0':
-    resolution: {integrity: sha512-PLmhyDOCD71gRiWI1sUhf515PNNopp9MxWPEFfXN7ijBYZA4WJwHz1DBXK2qif/cY+e+Z12Wirhf0wM2kkOBJg==}
+  '@storybook/csf-plugin@10.0.8':
+    resolution: {integrity: sha512-OtLUWHIm3SDGtclQn6Mdd/YsWizLBgdEBRAdekGtwI/TvICfT7gpWYIycP53v2t9ufu2MIXjsxtV2maZKs8sZg==}
     peerDependencies:
       esbuild: '*'
       rollup: '*'
-      storybook: ^10.0.0
+      storybook: ^10.0.8
       vite: '*'
       webpack: '*'
     peerDependenciesMeta:
@@ -2688,42 +2685,32 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
 
-  '@storybook/instrumenter@8.6.14':
-    resolution: {integrity: sha512-iG4MlWCcz1L7Yu8AwgsnfVAmMbvyRSk700Mfy2g4c8y5O+Cv1ejshE1LBBsCwHgkuqU0H4R0qu4g23+6UnUemQ==}
-    peerDependencies:
-      storybook: ^8.6.14
-
-  '@storybook/react-dom-shim@10.0.0':
-    resolution: {integrity: sha512-A4+DCu9o1F0ONpJx5yHIZ37Q7h63zxHIhK1MfDpOLfwfrapUkc/uag3WZuhwXrQMUbgFUgNA1A+8TceU5W4czA==}
+  '@storybook/react-dom-shim@10.0.8':
+    resolution: {integrity: sha512-ojuH22MB9Sz6rWbhTmC5IErZr0ZADbZijtPteUdydezY7scORT00UtbNoBcG0V6iVjdChgDtSKw2KHUUfchKqg==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      storybook: ^10.0.0
+      storybook: ^10.0.8
 
-  '@storybook/react-vite@10.0.0':
-    resolution: {integrity: sha512-2R9RHuZsPuuNZZMyL3R+h+FJ2mhkj34zIJRgWNFx+41RujOjNUBFEAxUZ7aKcmZvWLN5SRzmAwKR3g42JNtS+A==}
+  '@storybook/react-vite@10.0.8':
+    resolution: {integrity: sha512-HS2X4qlitrZr3/sN2+ollxAaNE813IasZRE8lOez1Ey1ISGBtYIb9rmJs82MK35+yDM0pHdiDjkFMD4SkNYh2g==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      storybook: ^10.0.0
+      storybook: ^10.0.8
       vite: ^5.0.0 || ^6.0.0 || ^7.0.0
 
-  '@storybook/react@10.0.0':
-    resolution: {integrity: sha512-9e0RMlMG1QJFbga258AchHQlpD9uF+uGALi63kVILm5OApVyc9sC1FGgHtVS7DrEIdW5wVCWAFLNzgSw2YFC2w==}
+  '@storybook/react@10.0.8':
+    resolution: {integrity: sha512-PkuPb8sAqmjjkowSzm3rutiSuETvZI2F8SnjbHE6FRqZWWK4iFoaUrQbrg5kpPAtX//xIrqkdFwlbmQ3skhiPA==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      storybook: ^10.0.0
+      storybook: ^10.0.8
       typescript: '>= 4.9.x'
     peerDependenciesMeta:
       typescript:
         optional: true
 
-  '@storybook/test@8.6.14':
-    resolution: {integrity: sha512-GkPNBbbZmz+XRdrhMtkxPotCLOQ1BaGNp/gFZYdGDk2KmUWBKmvc5JxxOhtoXM2703IzNFlQHSSNnhrDZYuLlw==}
-    peerDependencies:
-      storybook: ^8.6.14
-
   '@swc/core-darwin-arm64@1.3.36':
     resolution: {integrity: sha512-lsP+C8p9cC/Vd9uAbtxpEnM8GoJI/MMnVuXak7OlxOtDH9/oTwmAcAQTfNGNaH19d2FAIRwf+5RbXCPnxa2Zjw==}
     engines: {node: '>=10'}
@@ -2820,18 +2807,10 @@ packages:
   '@tanstack/virtual-core@3.13.12':
     resolution: {integrity: sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==}
 
-  '@testing-library/dom@10.4.0':
-    resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
-    engines: {node: '>=18'}
-
   '@testing-library/dom@10.4.1':
     resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
     engines: {node: '>=18'}
 
-  '@testing-library/jest-dom@6.5.0':
-    resolution: {integrity: sha512-xGGHpBXYSHUUr6XsKBfs85TWlYKpTc37cSBBVrXcib2MkHLboWlkClhWF37JKlDb9KEq3dHs+f2xR7XJEWGBxA==}
-    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
-
   '@testing-library/jest-dom@6.7.0':
     resolution: {integrity: sha512-RI2e97YZ7MRa+vxP4UUnMuMFL2buSsf0ollxUbTgrbPLKhMn8KVTx7raS6DYjC7v1NDVrioOvaShxsguLNISCA==}
     engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
@@ -2867,12 +2846,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@testing-library/user-event@14.5.2':
-    resolution: {integrity: sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==}
-    engines: {node: '>=12', npm: '>=6'}
-    peerDependencies:
-      '@testing-library/dom': '>=7.21.4'
-
   '@testing-library/user-event@14.6.1':
     resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==}
     engines: {node: '>=12', npm: '>=6'}
@@ -3195,9 +3168,6 @@ packages:
     peerDependencies:
       vite: ^4.2.0 || ^5.0.0
 
-  '@vitest/expect@2.0.5':
-    resolution: {integrity: sha512-yHZtwuP7JZivj65Gxoi8upUN2OzHTi3zVfjwdpu2WrvCZPLwsJ2Ey5ILIPccoW23dd/zQBlJ4/dhi7DWNyXCpA==}
-
   '@vitest/expect@3.2.4':
     resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==}
 
@@ -3212,27 +3182,12 @@ packages:
       vite:
         optional: true
 
-  '@vitest/pretty-format@2.0.5':
-    resolution: {integrity: sha512-h8k+1oWHfwTkyTkb9egzwNMfJAEx4veaPSnMeKbVSjp4euqGSbQlm5+6VHwTr7u4FJslVVsUG5nopCaAYdOmSQ==}
-
-  '@vitest/pretty-format@2.1.9':
-    resolution: {integrity: sha512-KhRIdGV2U9HOUzxfiHmY8IFHTdqtOhIzCpd8WRdJiE7D/HUcZVD0EgQCVjm+Q9gkUXWgBvMmTtZgIG48wq7sOQ==}
-
   '@vitest/pretty-format@3.2.4':
     resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==}
 
-  '@vitest/spy@2.0.5':
-    resolution: {integrity: sha512-c/jdthAhvJdpfVuaexSrnawxZz6pywlTPe84LUB2m/4t3rl2fTo9NFGBG4oWgaD+FTgDDV8hJ/nibT7IfH3JfA==}
-
   '@vitest/spy@3.2.4':
     resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==}
 
-  '@vitest/utils@2.0.5':
-    resolution: {integrity: sha512-d8HKbqIcya+GR67mkZbrzhS5kKhtp8dQLcmRZLGTscGVg7yImT82cIrhtn2L8+VujWcy6KZweApgNmPsTAO/UQ==}
-
-  '@vitest/utils@2.1.9':
-    resolution: {integrity: sha512-v0psaMSkNJ3A2NMrUEHFRzJtDPFn+/VWZ5WxImB21T9fjucJRmS7xCS3ppEnARb9y11OAzaD+P2Ps+b+BGX5iQ==}
-
   '@vitest/utils@3.2.4':
     resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
 
@@ -4325,11 +4280,11 @@ packages:
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
 
-  eslint-plugin-storybook@10.0.0:
-    resolution: {integrity: sha512-q2NdHr1cRSR+cZef02EQOwaKdQwO+cslaDUndqszIaitfjvR31BzvuU7DCSTSJNhhLUEa8svda/kARZhG/bn2Q==}
+  eslint-plugin-storybook@10.0.8:
+    resolution: {integrity: sha512-ZKEMFhF/z/HRVvIgnEIYG2uAqmuLbkebUdHH3DpGHE64GPgk+KozcpqnD6zNk5vJ407bFmcWsGinBc2zi74f0g==}
     peerDependencies:
       eslint: '>=8'
-      storybook: ^10.0.0
+      storybook: ^10.0.8
 
   eslint-plugin-testing-library@5.11.1:
     resolution: {integrity: sha512-5eX9e1Kc2PqVRed3taaLnAAqPZGEX75C+M/rXzUAI3wIg/ZxzUm1OVAwfe/O+vE+6YXOLetSe9g5GKD2ecXipw==}
@@ -6438,8 +6393,8 @@ packages:
   storybook-addon-turbo-build@2.0.1:
     resolution: {integrity: sha512-NP9e42fOmhkRe93okDlmIJ+2m+j4c9HZSa8EQJPJiJBQiAZ6MrjL6v0jzMukcwhIlu91RtHSkjlACm3xbi9jWQ==}
 
-  storybook@10.0.0:
-    resolution: {integrity: sha512-lJfn3+4koKQW1kp3RotkAYlvV8C/3lnhXOJYm+4aD9CACoT48qEOLwEmvIho6u+KTlbDnGonP5697Jw6rZ2E9A==}
+  storybook@10.0.8:
+    resolution: {integrity: sha512-vQMufKKA9TxgoEDHJv3esrqUkjszuuRiDkThiHxENFPdQawHhm2Dei+iwNRwH5W671zTDy9iRT9P1KDjcU5Iyw==}
     hasBin: true
     peerDependencies:
       prettier: ^2 || ^3
@@ -6652,18 +6607,10 @@ packages:
     resolution: {integrity: sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==}
     engines: {node: '>=12.0.0'}
 
-  tinyrainbow@1.2.0:
-    resolution: {integrity: sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==}
-    engines: {node: '>=14.0.0'}
-
   tinyrainbow@2.0.0:
     resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
     engines: {node: '>=14.0.0'}
 
-  tinyspy@3.0.2:
-    resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==}
-    engines: {node: '>=14.0.0'}
-
   tinyspy@4.0.3:
     resolution: {integrity: sha512-t2T/WLB2WRgZ9EpE4jgPJ9w+i66UZfDc8wHh0xrwiRNN+UwH98GIJkTeZqX9rg0i0ptwzqW+uYeIF0T4F8LR7A==}
     engines: {node: '>=14.0.0'}
@@ -10284,15 +10231,15 @@ snapshots:
     dependencies:
       '@statoscope/types': 5.22.0
 
-  '@storybook/addon-docs@10.0.0(@types/react@19.1.10)(esbuild@0.25.9)(rollup@4.46.4)(storybook@10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))(webpack@5.76.1(@swc/core@1.3.36)(esbuild@0.25.9))':
+  '@storybook/addon-docs@10.0.8(@types/react@19.1.10)(esbuild@0.25.9)(rollup@4.46.4)(storybook@10.0.8(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))(webpack@5.76.1(@swc/core@1.3.36)(esbuild@0.25.9))':
     dependencies:
       '@mdx-js/react': 3.0.1(@types/react@19.1.10)(react@19.1.1)
-      '@storybook/csf-plugin': 10.0.0(esbuild@0.25.9)(rollup@4.46.4)(storybook@10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))(webpack@5.76.1(@swc/core@1.3.36)(esbuild@0.25.9))
+      '@storybook/csf-plugin': 10.0.8(esbuild@0.25.9)(rollup@4.46.4)(storybook@10.0.8(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))(webpack@5.76.1(@swc/core@1.3.36)(esbuild@0.25.9))
       '@storybook/icons': 1.6.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
-      '@storybook/react-dom-shim': 10.0.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))
+      '@storybook/react-dom-shim': 10.0.8(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@10.0.8(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
-      storybook: 10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))
+      storybook: 10.0.8(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - '@types/react'
@@ -10301,17 +10248,17 @@ snapshots:
       - vite
       - webpack
 
-  '@storybook/addon-links@10.0.0(react@19.1.1)(storybook@10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))':
+  '@storybook/addon-links@10.0.8(react@19.1.1)(storybook@10.0.8(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))
+      storybook: 10.0.8(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))
     optionalDependencies:
       react: 19.1.1
 
-  '@storybook/builder-vite@10.0.0(esbuild@0.25.9)(rollup@4.46.4)(storybook@10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))(webpack@5.76.1(@swc/core@1.3.36)(esbuild@0.25.9))':
+  '@storybook/builder-vite@10.0.8(esbuild@0.25.9)(rollup@4.46.4)(storybook@10.0.8(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))(webpack@5.76.1(@swc/core@1.3.36)(esbuild@0.25.9))':
     dependencies:
-      '@storybook/csf-plugin': 10.0.0(esbuild@0.25.9)(rollup@4.46.4)(storybook@10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))(webpack@5.76.1(@swc/core@1.3.36)(esbuild@0.25.9))
-      storybook: 10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))
+      '@storybook/csf-plugin': 10.0.8(esbuild@0.25.9)(rollup@4.46.4)(storybook@10.0.8(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))(webpack@5.76.1(@swc/core@1.3.36)(esbuild@0.25.9))
+      storybook: 10.0.8(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))
       ts-dedent: 2.2.0
       vite: 7.1.3(@types/node@22.17.2)(terser@5.31.1)
     transitivePeerDependencies:
@@ -10319,9 +10266,9 @@ snapshots:
       - rollup
       - webpack
 
-  '@storybook/csf-plugin@10.0.0(esbuild@0.25.9)(rollup@4.46.4)(storybook@10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))(webpack@5.76.1(@swc/core@1.3.36)(esbuild@0.25.9))':
+  '@storybook/csf-plugin@10.0.8(esbuild@0.25.9)(rollup@4.46.4)(storybook@10.0.8(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))(webpack@5.76.1(@swc/core@1.3.36)(esbuild@0.25.9))':
     dependencies:
-      storybook: 10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))
+      storybook: 10.0.8(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))
       unplugin: 2.3.10
     optionalDependencies:
       esbuild: 0.25.9
@@ -10336,31 +10283,25 @@ snapshots:
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
 
-  '@storybook/instrumenter@8.6.14(storybook@10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))':
-    dependencies:
-      '@storybook/global': 5.0.0
-      '@vitest/utils': 2.1.9
-      storybook: 10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))
-
-  '@storybook/react-dom-shim@10.0.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))':
+  '@storybook/react-dom-shim@10.0.8(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@10.0.8(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))':
     dependencies:
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
-      storybook: 10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))
+      storybook: 10.0.8(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))
 
-  '@storybook/react-vite@10.0.0(esbuild@0.25.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(rollup@4.46.4)(storybook@10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))(typescript@5.6.3)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))(webpack@5.76.1(@swc/core@1.3.36)(esbuild@0.25.9))':
+  '@storybook/react-vite@10.0.8(esbuild@0.25.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(rollup@4.46.4)(storybook@10.0.8(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))(typescript@5.6.3)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))(webpack@5.76.1(@swc/core@1.3.36)(esbuild@0.25.9))':
     dependencies:
       '@joshwooding/vite-plugin-react-docgen-typescript': 0.6.1(typescript@5.6.3)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))
       '@rollup/pluginutils': 5.1.0(rollup@4.46.4)
-      '@storybook/builder-vite': 10.0.0(esbuild@0.25.9)(rollup@4.46.4)(storybook@10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))(webpack@5.76.1(@swc/core@1.3.36)(esbuild@0.25.9))
-      '@storybook/react': 10.0.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))(typescript@5.6.3)
+      '@storybook/builder-vite': 10.0.8(esbuild@0.25.9)(rollup@4.46.4)(storybook@10.0.8(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))(webpack@5.76.1(@swc/core@1.3.36)(esbuild@0.25.9))
+      '@storybook/react': 10.0.8(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@10.0.8(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))(typescript@5.6.3)
       empathic: 2.0.0
       magic-string: 0.30.17
       react: 19.1.1
       react-docgen: 8.0.0
       react-dom: 19.1.1(react@19.1.1)
       resolve: 1.22.8
-      storybook: 10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))
+      storybook: 10.0.8(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))
       tsconfig-paths: 4.2.0
       vite: 7.1.3(@types/node@22.17.2)(terser@5.31.1)
     transitivePeerDependencies:
@@ -10370,27 +10311,16 @@ snapshots:
       - typescript
       - webpack
 
-  '@storybook/react@10.0.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))(typescript@5.6.3)':
+  '@storybook/react@10.0.8(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@10.0.8(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))(typescript@5.6.3)':
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/react-dom-shim': 10.0.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))
+      '@storybook/react-dom-shim': 10.0.8(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@10.0.8(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
-      storybook: 10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))
+      storybook: 10.0.8(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))
     optionalDependencies:
       typescript: 5.6.3
 
-  '@storybook/test@8.6.14(storybook@10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))':
-    dependencies:
-      '@storybook/global': 5.0.0
-      '@storybook/instrumenter': 8.6.14(storybook@10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))
-      '@testing-library/dom': 10.4.0
-      '@testing-library/jest-dom': 6.5.0
-      '@testing-library/user-event': 14.5.2(@testing-library/dom@10.4.0)
-      '@vitest/expect': 2.0.5
-      '@vitest/spy': 2.0.5
-      storybook: 10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))
-
   '@swc/core-darwin-arm64@1.3.36':
     optional: true
 
@@ -10466,17 +10396,6 @@ snapshots:
 
   '@tanstack/virtual-core@3.13.12': {}
 
-  '@testing-library/dom@10.4.0':
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/runtime': 7.28.3
-      '@types/aria-query': 5.0.4
-      aria-query: 5.3.0
-      chalk: 4.1.2
-      dom-accessibility-api: 0.5.16
-      lz-string: 1.5.0
-      pretty-format: 27.5.1
-
   '@testing-library/dom@10.4.1':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -10488,16 +10407,6 @@ snapshots:
       picocolors: 1.1.1
       pretty-format: 27.5.1
 
-  '@testing-library/jest-dom@6.5.0':
-    dependencies:
-      '@adobe/css-tools': 4.4.4
-      aria-query: 5.3.2
-      chalk: 3.0.0
-      css.escape: 1.5.1
-      dom-accessibility-api: 0.6.3
-      lodash: 4.17.21
-      redent: 3.0.0
-
   '@testing-library/jest-dom@6.7.0':
     dependencies:
       '@adobe/css-tools': 4.4.4
@@ -10527,10 +10436,6 @@ snapshots:
       '@types/react': 19.1.10
       '@types/react-dom': 19.1.7(@types/react@19.1.10)
 
-  '@testing-library/user-event@14.5.2(@testing-library/dom@10.4.0)':
-    dependencies:
-      '@testing-library/dom': 10.4.0
-
   '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)':
     dependencies:
       '@testing-library/dom': 10.4.1
@@ -10918,13 +10823,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@vitest/expect@2.0.5':
-    dependencies:
-      '@vitest/spy': 2.0.5
-      '@vitest/utils': 2.0.5
-      chai: 5.2.0
-      tinyrainbow: 1.2.0
-
   '@vitest/expect@3.2.4':
     dependencies:
       '@types/chai': 5.2.2
@@ -10941,39 +10839,14 @@ snapshots:
     optionalDependencies:
       vite: 7.1.3(@types/node@22.17.2)(terser@5.31.1)
 
-  '@vitest/pretty-format@2.0.5':
-    dependencies:
-      tinyrainbow: 1.2.0
-
-  '@vitest/pretty-format@2.1.9':
-    dependencies:
-      tinyrainbow: 1.2.0
-
   '@vitest/pretty-format@3.2.4':
     dependencies:
       tinyrainbow: 2.0.0
 
-  '@vitest/spy@2.0.5':
-    dependencies:
-      tinyspy: 3.0.2
-
   '@vitest/spy@3.2.4':
     dependencies:
       tinyspy: 4.0.3
 
-  '@vitest/utils@2.0.5':
-    dependencies:
-      '@vitest/pretty-format': 2.0.5
-      estree-walker: 3.0.3
-      loupe: 3.2.0
-      tinyrainbow: 1.2.0
-
-  '@vitest/utils@2.1.9':
-    dependencies:
-      '@vitest/pretty-format': 2.1.9
-      loupe: 3.2.0
-      tinyrainbow: 1.2.0
-
   '@vitest/utils@3.2.4':
     dependencies:
       '@vitest/pretty-format': 3.2.4
@@ -12299,11 +12172,11 @@ snapshots:
       string.prototype.matchall: 4.0.12
       string.prototype.repeat: 1.0.0
 
-  eslint-plugin-storybook@10.0.0(eslint@9.25.1)(storybook@10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))(typescript@5.6.3):
+  eslint-plugin-storybook@10.0.8(eslint@9.25.1)(storybook@10.0.8(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)))(typescript@5.6.3):
     dependencies:
       '@typescript-eslint/utils': 8.31.0(eslint@9.25.1)(typescript@5.6.3)
       eslint: 9.25.1
-      storybook: 10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))
+      storybook: 10.0.8(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1))
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -14962,7 +14835,7 @@ snapshots:
     transitivePeerDependencies:
       - webpack
 
-  storybook@10.0.0(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)):
+  storybook@10.0.8(@testing-library/dom@10.4.1)(prettier@3.2.5)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(vite@7.1.3(@types/node@22.17.2)(terser@5.31.1)):
     dependencies:
       '@storybook/global': 5.0.0
       '@storybook/icons': 1.6.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
@@ -15231,12 +15104,8 @@ snapshots:
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
 
-  tinyrainbow@1.2.0: {}
-
   tinyrainbow@2.0.0: {}
 
-  tinyspy@3.0.2: {}
-
   tinyspy@4.0.3: {}
 
   tmp@0.0.33:
diff --git a/src/components/actions/CommandMenu/CommandMenu.stories.tsx b/src/components/actions/CommandMenu/CommandMenu.stories.tsx
index ef069b937..131548c07 100644
--- a/src/components/actions/CommandMenu/CommandMenu.stories.tsx
+++ b/src/components/actions/CommandMenu/CommandMenu.stories.tsx
@@ -1,10 +1,3 @@
-import {
-  expect,
-  findByRole,
-  userEvent,
-  waitFor,
-  within,
-} from '@storybook/test';
 import {
   IconArrowBack,
   IconArrowForward,
@@ -18,6 +11,7 @@ import {
   IconSelect,
 } from '@tabler/icons-react';
 import React, { useState } from 'react';
+import { expect, findByRole, userEvent, waitFor, within } from 'storybook/test';
 
 import { EditIcon, TrashIcon } from '../../../icons';
 import { tasty } from '../../../tasty';
diff --git a/src/components/actions/ItemAction/ItemAction.stories.tsx b/src/components/actions/ItemAction/ItemAction.stories.tsx
index a3fea0b57..379564099 100644
--- a/src/components/actions/ItemAction/ItemAction.stories.tsx
+++ b/src/components/actions/ItemAction/ItemAction.stories.tsx
@@ -1,4 +1,3 @@
-import { userEvent, within } from '@storybook/test';
 import {
   IconCopy,
   IconEdit,
@@ -8,6 +7,7 @@ import {
   IconStar,
   IconTrash,
 } from '@tabler/icons-react';
+import { userEvent, within } from 'storybook/test';
 
 import { Item } from '../../content/Item';
 import { Space } from '../../layout/Space';
diff --git a/src/components/actions/ItemButton/ItemButton.stories.tsx b/src/components/actions/ItemButton/ItemButton.stories.tsx
index bec6b88be..92615aef1 100644
--- a/src/components/actions/ItemButton/ItemButton.stories.tsx
+++ b/src/components/actions/ItemButton/ItemButton.stories.tsx
@@ -1,10 +1,10 @@
-import { userEvent, within } from '@storybook/test';
 import {
   IconEdit,
   IconExternalLink,
   IconFile,
   IconTrash,
 } from '@tabler/icons-react';
+import { userEvent, within } from 'storybook/test';
 
 import { timeout } from '../../../utils/promise';
 import { ItemAction } from '../ItemAction';
diff --git a/src/components/actions/Menu/Menu.stories.tsx b/src/components/actions/Menu/Menu.stories.tsx
index 1155b5751..2e4cdb163 100644
--- a/src/components/actions/Menu/Menu.stories.tsx
+++ b/src/components/actions/Menu/Menu.stories.tsx
@@ -1,13 +1,6 @@
 // @ts-nocheck
 // NOTE: Type checking is disabled in this Storybook file to prevent
 // noisy errors from complex generic typings that do not affect runtime behaviour.
-import {
-  expect,
-  findByRole,
-  userEvent,
-  waitFor,
-  within,
-} from '@storybook/test';
 import {
   IconBook,
   IconBulb,
@@ -17,6 +10,7 @@ import {
   IconReload,
 } from '@tabler/icons-react';
 import { useState } from 'react';
+import { expect, findByRole, userEvent, waitFor, within } from 'storybook/test';
 
 import {
   CheckIcon,
diff --git a/src/components/content/Item/Item.stories.tsx b/src/components/content/Item/Item.stories.tsx
index 47d757015..d7db2fa76 100644
--- a/src/components/content/Item/Item.stories.tsx
+++ b/src/components/content/Item/Item.stories.tsx
@@ -1,4 +1,3 @@
-import { expect, userEvent, waitFor, within } from '@storybook/test';
 import {
   IconCoin,
   IconEdit,
@@ -7,6 +6,7 @@ import {
   IconUser,
 } from '@tabler/icons-react';
 import { useState } from 'react';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 
 import { DirectionIcon } from '../../../icons';
 import { baseProps } from '../../../stories/lists/baseProps';
diff --git a/src/components/fields/ComboBox/ComboBox.stories.tsx b/src/components/fields/ComboBox/ComboBox.stories.tsx
index 72d9beb20..82213fc95 100644
--- a/src/components/fields/ComboBox/ComboBox.stories.tsx
+++ b/src/components/fields/ComboBox/ComboBox.stories.tsx
@@ -1,5 +1,5 @@
-import { userEvent, within } from '@storybook/test';
 import { useMemo, useState } from 'react';
+import { userEvent, within } from 'storybook/test';
 
 import { baseProps } from '../../../stories/lists/baseProps';
 
diff --git a/src/components/fields/DatePicker/DatePicker.stories.tsx b/src/components/fields/DatePicker/DatePicker.stories.tsx
index eef966504..199377de6 100644
--- a/src/components/fields/DatePicker/DatePicker.stories.tsx
+++ b/src/components/fields/DatePicker/DatePicker.stories.tsx
@@ -1,5 +1,5 @@
 import { StoryFn } from '@storybook/react-vite';
-import { userEvent, within } from '@storybook/test';
+import { userEvent, within } from 'storybook/test';
 
 import { baseProps } from '../../../stories/lists/baseProps';
 
diff --git a/src/components/fields/DatePicker/DateRangePicker.stories.tsx b/src/components/fields/DatePicker/DateRangePicker.stories.tsx
index ece57b6e3..3133addd0 100644
--- a/src/components/fields/DatePicker/DateRangePicker.stories.tsx
+++ b/src/components/fields/DatePicker/DateRangePicker.stories.tsx
@@ -1,5 +1,5 @@
 import { StoryFn } from '@storybook/react-vite';
-import { userEvent, within } from '@storybook/test';
+import { userEvent, within } from 'storybook/test';
 
 import { ICON_ARG, VALIDATION_STATE_ARG } from '../../../stories/FormFieldArgs';
 import { baseProps } from '../../../stories/lists/baseProps';
diff --git a/src/components/fields/FileInput/FileInput.stories.tsx b/src/components/fields/FileInput/FileInput.stories.tsx
index 662fc8aac..72befdd09 100644
--- a/src/components/fields/FileInput/FileInput.stories.tsx
+++ b/src/components/fields/FileInput/FileInput.stories.tsx
@@ -1,5 +1,5 @@
 import { StoryFn } from '@storybook/react-vite';
-import { userEvent, waitFor, within } from '@storybook/test';
+import { userEvent, waitFor, within } from 'storybook/test';
 
 import { baseProps } from '../../../stories/lists/baseProps';
 
diff --git a/src/components/fields/FilterListBox/FilterListBox.stories.tsx b/src/components/fields/FilterListBox/FilterListBox.stories.tsx
index af70451c2..3120e9254 100644
--- a/src/components/fields/FilterListBox/FilterListBox.stories.tsx
+++ b/src/components/fields/FilterListBox/FilterListBox.stories.tsx
@@ -1,7 +1,7 @@
 import { StoryFn } from '@storybook/react-vite';
-import { userEvent, within } from '@storybook/test';
 import { IconFile, IconFileDiff } from '@tabler/icons-react';
 import { useState } from 'react';
+import { userEvent, within } from 'storybook/test';
 
 import {
   BellFilledIcon,
diff --git a/src/components/fields/FilterPicker/FilterPicker.stories.tsx b/src/components/fields/FilterPicker/FilterPicker.stories.tsx
index 022ab7f28..35e4bd631 100644
--- a/src/components/fields/FilterPicker/FilterPicker.stories.tsx
+++ b/src/components/fields/FilterPicker/FilterPicker.stories.tsx
@@ -1,5 +1,5 @@
-import { userEvent, within } from '@storybook/test';
 import { useEffect, useMemo, useState } from 'react';
+import { userEvent, within } from 'storybook/test';
 
 import {
   CheckIcon,
diff --git a/src/components/fields/Select/Select.stories.tsx b/src/components/fields/Select/Select.stories.tsx
index 7d768c7e0..25211b820 100644
--- a/src/components/fields/Select/Select.stories.tsx
+++ b/src/components/fields/Select/Select.stories.tsx
@@ -1,5 +1,5 @@
-import { userEvent, within } from '@storybook/test';
 import { IconCoin, IconUser } from '@tabler/icons-react';
+import { userEvent, within } from 'storybook/test';
 
 import { baseProps } from '../../../stories/lists/baseProps';
 import { Text } from '../../content/Text';
diff --git a/src/components/fields/TextInputMapper/TextInputMapper.stories.tsx b/src/components/fields/TextInputMapper/TextInputMapper.stories.tsx
index 57bded36f..f4b5c1568 100644
--- a/src/components/fields/TextInputMapper/TextInputMapper.stories.tsx
+++ b/src/components/fields/TextInputMapper/TextInputMapper.stories.tsx
@@ -1,5 +1,5 @@
 import { StoryFn } from '@storybook/react-vite';
-import { userEvent, within } from '@storybook/test';
+import { userEvent, within } from 'storybook/test';
 
 import { baseProps } from '../../../stories/lists/baseProps';
 import { Form } from '../../form';
diff --git a/src/components/form/Form/ComplexForm.stories.tsx b/src/components/form/Form/ComplexForm.stories.tsx
index 7e1adba97..a7ce41153 100644
--- a/src/components/form/Form/ComplexForm.stories.tsx
+++ b/src/components/form/Form/ComplexForm.stories.tsx
@@ -1,6 +1,6 @@
 import { linkTo } from '@storybook/addon-links';
 import { StoryFn } from '@storybook/react-vite';
-import { expect, userEvent, waitFor, within } from '@storybook/test';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 
 import {
   Block,
diff --git a/src/components/overlays/AlertDialog/AlertDialog.stories.tsx b/src/components/overlays/AlertDialog/AlertDialog.stories.tsx
index 85129ee40..6cfd89684 100644
--- a/src/components/overlays/AlertDialog/AlertDialog.stories.tsx
+++ b/src/components/overlays/AlertDialog/AlertDialog.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryFn } from '@storybook/react-vite';
-import { expect, userEvent, within } from '@storybook/test';
 import { action } from 'storybook/actions';
+import { expect, userEvent, within } from 'storybook/test';
 
 import { baseProps } from '../../../stories/lists/baseProps';
 import { Button } from '../../actions';
diff --git a/src/components/overlays/Dialog/Dialog.stories.tsx b/src/components/overlays/Dialog/Dialog.stories.tsx
index 342c36166..19fe50ec0 100644
--- a/src/components/overlays/Dialog/Dialog.stories.tsx
+++ b/src/components/overlays/Dialog/Dialog.stories.tsx
@@ -1,7 +1,7 @@
 import { FocusableRefValue } from '@react-types/shared';
 import { StoryFn } from '@storybook/react-vite';
-import { expect, userEvent, waitFor, within } from '@storybook/test';
 import { useRef, useState } from 'react';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 
 import {
   Button,
diff --git a/src/components/overlays/Dialog/DialogForm.stories.tsx b/src/components/overlays/Dialog/DialogForm.stories.tsx
index 7ef87f9d9..a4d0002eb 100644
--- a/src/components/overlays/Dialog/DialogForm.stories.tsx
+++ b/src/components/overlays/Dialog/DialogForm.stories.tsx
@@ -1,11 +1,11 @@
 import { Meta, StoryFn } from '@storybook/react-vite';
+import { useState } from 'react';
 import {
   expect,
   userEvent,
   waitForElementToBeRemoved,
   within,
-} from '@storybook/test';
-import { useState } from 'react';
+} from 'storybook/test';
 
 import { baseProps } from '../../../stories/lists/baseProps';
 import { Button } from '../../actions';
diff --git a/src/components/overlays/NewNotifications/Notifications.stories.tsx b/src/components/overlays/NewNotifications/Notifications.stories.tsx
index a14b02d53..90db3ccb4 100644
--- a/src/components/overlays/NewNotifications/Notifications.stories.tsx
+++ b/src/components/overlays/NewNotifications/Notifications.stories.tsx
@@ -1,7 +1,7 @@
 import { Meta, StoryFn } from '@storybook/react-vite';
-import { expect, userEvent, within } from '@storybook/test';
 import { IconBell, IconBellFilled, IconBrandWechat } from '@tabler/icons-react';
 import { Key, useRef, useState } from 'react';
+import { expect, userEvent, within } from 'storybook/test';
 
 import { wait } from '../../../test/utils/wait';
 import { Button } from '../../actions';
diff --git a/src/components/overlays/Toasts/Toasts.stories.tsx b/src/components/overlays/Toasts/Toasts.stories.tsx
index 2239ccf25..ebbb6aa14 100644
--- a/src/components/overlays/Toasts/Toasts.stories.tsx
+++ b/src/components/overlays/Toasts/Toasts.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryFn } from '@storybook/react-vite';
-import { expect, userEvent, within } from '@storybook/test';
 import { IconBell } from '@tabler/icons-react';
+import { expect, userEvent, within } from 'storybook/test';
 
 import { Button } from '../../actions';
 
diff --git a/src/components/overlays/Tooltip/Tooltip.stories.tsx b/src/components/overlays/Tooltip/Tooltip.stories.tsx
index 0e372508b..0fbc40486 100644
--- a/src/components/overlays/Tooltip/Tooltip.stories.tsx
+++ b/src/components/overlays/Tooltip/Tooltip.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, Story } from '@storybook/react-vite';
-import { expect, userEvent, waitFor, within } from '@storybook/test';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 
 import { baseProps } from '../../../stories/lists/baseProps';
 import { Button } from '../../actions';
diff --git a/src/stories/RenderCache.stories.tsx b/src/stories/RenderCache.stories.tsx
index 20ee78d9b..f728cb704 100644
--- a/src/stories/RenderCache.stories.tsx
+++ b/src/stories/RenderCache.stories.tsx
@@ -1,5 +1,5 @@
-import { userEvent, within } from '@storybook/test';
 import { useRef, useState } from 'react';
+import { userEvent, within } from 'storybook/test';
 
 import { Block } from '../components/Block';
 import { Radio } from '../components/fields/RadioGroup/Radio';
diff --git a/src/types/storybook-assertions.d.ts b/src/types/storybook-assertions.d.ts
deleted file mode 100644
index ca1a93239..000000000
--- a/src/types/storybook-assertions.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// Make Storybook's assertion type aware of jest-dom matchers
-import '@testing-library/jest-dom';
-
-declare module '@storybook/test' {
-  interface Assertion<T = any> {
-    toBeInTheDocument(): void;
-    // You can add other jest-dom matchers here if needed
-  }
-}

From 192e602672060c1f8d03e9a4f570660ebb6db937 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Mon, 17 Nov 2025 16:21:57 +0100
Subject: [PATCH 05/24] feat: add isButton prop to pickers * 2

---
 .changeset/picker-is-button-prop.md     | 2 +-
 src/components/fields/Select/Select.tsx | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/.changeset/picker-is-button-prop.md b/.changeset/picker-is-button-prop.md
index 26947dd76..f12187b37 100644
--- a/.changeset/picker-is-button-prop.md
+++ b/.changeset/picker-is-button-prop.md
@@ -2,5 +2,5 @@
 '@cube-dev/ui-kit': minor
 ---
 
-Add `isButton` prop support to `Picker` and `FilterPicker` components. The prop is now properly passed to the trigger `ItemButton` component, allowing control over button styling. Defaults to `false` to maintain existing behavior.
+Add `isButton` prop support to `Picker`, `FilterPicker`, and `Select` components. The prop is now properly passed to their trigger components (`ItemButton` for Picker/FilterPicker, `Item` for Select), allowing control over button styling. Defaults to `false` to maintain existing behavior.
 
diff --git a/src/components/fields/Select/Select.tsx b/src/components/fields/Select/Select.tsx
index 2d5072b96..660193e8e 100644
--- a/src/components/fields/Select/Select.tsx
+++ b/src/components/fields/Select/Select.tsx
@@ -223,6 +223,10 @@ export interface CubeSelectBaseProps<T>
   isClearable?: boolean;
   /** Callback called when the clear button is pressed */
   onClear?: () => void;
+  /** Whether the trigger should use button styling
+   * @default false
+   */
+  isButton?: boolean;
 }
 
 export interface CubeSelectProps<T> extends CubeSelectBaseProps<T> {
@@ -291,6 +295,7 @@ function Select<T extends object>(
     labelSuffix,
     suffixPosition = 'before',
     isClearable,
+    isButton = false,
     form,
     ...otherProps
   } = props;
@@ -467,6 +472,7 @@ function Select<T extends object>(
         descriptionPlacement={descriptionPlacement}
         hotkeys={hotkeys}
         tooltip={tooltip}
+        isButton={isButton}
         labelProps={valueProps}
       >
         {state.selectedItem

From 2f5e7892e89b298c3511b94f219fd0d77b86d0d1 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Mon, 17 Nov 2025 16:49:18 +0100
Subject: [PATCH 06/24] fix: qa props in pickers

---
 src/components/fields/FilterPicker/FilterPicker.tsx | 1 +
 src/components/fields/Picker/Picker.tsx             | 1 +
 src/components/fields/Select/Select.tsx             | 6 ++++--
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/fields/FilterPicker/FilterPicker.tsx b/src/components/fields/FilterPicker/FilterPicker.tsx
index 5239c0095..bd8541855 100644
--- a/src/components/fields/FilterPicker/FilterPicker.tsx
+++ b/src/components/fields/FilterPicker/FilterPicker.tsx
@@ -796,6 +796,7 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
         {renderTrigger}
         {(close) => (
           <Dialog
+            qa="FilterPickerOverlay"
             display="grid"
             styles={{
               gridRows: '1sf',
diff --git a/src/components/fields/Picker/Picker.tsx b/src/components/fields/Picker/Picker.tsx
index 0489932c4..30d9dcd80 100644
--- a/src/components/fields/Picker/Picker.tsx
+++ b/src/components/fields/Picker/Picker.tsx
@@ -649,6 +649,7 @@ export const Picker = forwardRef(function Picker<T extends object>(
         {renderTrigger}
         {(close) => (
           <Dialog
+            qa="PickerOverlay"
             display="grid"
             styles={{
               gridRows: '1sf',
diff --git a/src/components/fields/Select/Select.tsx b/src/components/fields/Select/Select.tsx
index 660193e8e..b97b74fc3 100644
--- a/src/components/fields/Select/Select.tsx
+++ b/src/components/fields/Select/Select.tsx
@@ -87,7 +87,7 @@ const SelectWrapperElement = tasty({
 
 const SelectTrigger = tasty(Item, {
   as: 'button',
-  qa: 'Trigger',
+  qa: 'SelectTrigger',
   styles: {
     reset: 'button',
 
@@ -132,6 +132,7 @@ const SelectOverlayWrapper = tasty({
 });
 
 const OverlayElement = tasty({
+  qa: 'SelectOverlay',
   styles: {
     width: 'min $overlay-min-width',
     display: 'grid',
@@ -422,7 +423,7 @@ function Select<T extends object>(
 
   let selectField = (
     <SelectWrapperElement
-      qa={qa || 'Select'}
+      qa="SelectWrapper"
       mods={modifiers}
       styles={{ ...wrapperStyles, ...styles }}
       data-size={size}
@@ -431,6 +432,7 @@ function Select<T extends object>(
       data-input-type="select"
     >
       <HiddenSelect
+        qa={qa || 'Select'}
         state={state}
         triggerRef={triggerRef}
         label={props.label}

From df929ce88a17b956ac17f521ac0e9fea33216449 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Mon, 17 Nov 2025 16:56:23 +0100
Subject: [PATCH 07/24] fix: qa props in pickers * 2

---
 src/components/content/Item/Item.tsx    | 37 +++++--------------------
 src/components/fields/Select/Select.tsx | 13 ++-------
 2 files changed, 9 insertions(+), 41 deletions(-)

diff --git a/src/components/content/Item/Item.tsx b/src/components/content/Item/Item.tsx
index 6347526b0..d22d6eb40 100644
--- a/src/components/content/Item/Item.tsx
+++ b/src/components/content/Item/Item.tsx
@@ -16,6 +16,7 @@ import {
 import { OverlayProps } from 'react-aria';
 import { useHotkeys } from 'react-hotkeys-hook';
 
+import { useEvent } from '../../../_internal';
 import {
   DANGER_CLEAR_STYLES,
   DANGER_ITEM_STYLES,
@@ -353,6 +354,10 @@ const ItemElement = tasty({
       maxWidth: '100%',
       padding:
         '$block-padding $label-padding-right $label-padding-bottom $label-padding-left',
+      opacity: {
+        '': 1,
+        placeholder: '$disabled-opacity',
+      },
     },
 
     Description: {
@@ -573,7 +578,7 @@ export function useAutoTooltip({
     return props;
   }, [labelProps]);
 
-  const renderWithTooltip = useCallback(
+  const renderWithTooltip = useEvent(
     (
       renderElement: (
         tooltipTriggerProps?: HTMLAttributes<HTMLElement>,
@@ -654,7 +659,6 @@ export function useAutoTooltip({
 
       return renderElement();
     },
-    [tooltip, children, labelProps, isLabelOverflowed],
   );
 
   return {
@@ -835,7 +839,7 @@ const Item = <T extends HTMLElement = HTMLDivElement>(
   });
 
   // Create a stable render function that doesn't call hooks
-  const renderItemElement = useCallback(
+  const renderItemElement = useEvent(
     (
       tooltipTriggerProps?: HTMLAttributes<HTMLElement>,
       tooltipRef?: RefObject<HTMLElement>,
@@ -911,33 +915,6 @@ const Item = <T extends HTMLElement = HTMLDivElement>(
         </ItemElement>
       );
     },
-    [
-      ref,
-      theme,
-      type,
-      finalIsDisabled,
-      size,
-      isSelected,
-      mods,
-      styles,
-      htmlType,
-      rest,
-      finalIcon,
-      hasCheckbox,
-      finalPrefix,
-      children,
-      labelProps,
-      finalLabelProps,
-      description,
-      descriptionProps,
-      finalSuffix,
-      finalRightIcon,
-      actions,
-      showActionsOnHover,
-      size,
-      style,
-      shape,
-    ],
   );
 
   return renderWithTooltip(renderItemElement, defaultTooltipPlacement);
diff --git a/src/components/fields/Select/Select.tsx b/src/components/fields/Select/Select.tsx
index b97b74fc3..a52a548bf 100644
--- a/src/components/fields/Select/Select.tsx
+++ b/src/components/fields/Select/Select.tsx
@@ -67,6 +67,7 @@ import { InvalidIcon } from '../../shared/InvalidIcon';
 import { ValidIcon } from '../../shared/ValidIcon';
 
 const SelectWrapperElement = tasty({
+  qa: 'SelectWrapper',
   styles: {
     display: 'grid',
     position: 'relative',
@@ -88,19 +89,10 @@ const SelectWrapperElement = tasty({
 const SelectTrigger = tasty(Item, {
   as: 'button',
   qa: 'SelectTrigger',
-  styles: {
-    reset: 'button',
-
-    Label: {
-      opacity: {
-        '': 1,
-        placeholder: '$disabled-opacity',
-      },
-    },
-  },
 });
 
 export const ListBoxElement = tasty({
+  qa: 'ListBox',
   as: 'ul',
   styles: {
     display: 'flex',
@@ -423,7 +415,6 @@ function Select<T extends object>(
 
   let selectField = (
     <SelectWrapperElement
-      qa="SelectWrapper"
       mods={modifiers}
       styles={{ ...wrapperStyles, ...styles }}
       data-size={size}

From 998653d33db21113680605d3845872486ecffbca Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Mon, 17 Nov 2025 17:15:37 +0100
Subject: [PATCH 08/24] fix(Item): remove memoization for rendering element

---
 src/components/content/Item/Item.tsx | 276 +++++++++++++--------------
 1 file changed, 130 insertions(+), 146 deletions(-)

diff --git a/src/components/content/Item/Item.tsx b/src/components/content/Item/Item.tsx
index d22d6eb40..5b2c0bec5 100644
--- a/src/components/content/Item/Item.tsx
+++ b/src/components/content/Item/Item.tsx
@@ -16,7 +16,6 @@ import {
 import { OverlayProps } from 'react-aria';
 import { useHotkeys } from 'react-hotkeys-hook';
 
-import { useEvent } from '../../../_internal';
 import {
   DANGER_CLEAR_STYLES,
   DANGER_ITEM_STYLES,
@@ -578,88 +577,77 @@ export function useAutoTooltip({
     return props;
   }, [labelProps]);
 
-  const renderWithTooltip = useEvent(
-    (
-      renderElement: (
-        tooltipTriggerProps?: HTMLAttributes<HTMLElement>,
-        tooltipRef?: RefObject<HTMLElement>,
-      ) => ReactNode,
-      defaultTooltipPlacement: OverlayProps['placement'],
-    ) => {
-      // Handle tooltip rendering based on tooltip prop type
-      if (tooltip) {
-        // String tooltip - simple case
-        if (typeof tooltip === 'string') {
+  const renderWithTooltip = (
+    renderElement: (
+      tooltipTriggerProps?: HTMLAttributes<HTMLElement>,
+      tooltipRef?: RefObject<HTMLElement>,
+    ) => ReactNode,
+    defaultTooltipPlacement: OverlayProps['placement'],
+  ) => {
+    // Handle tooltip rendering based on tooltip prop type
+    if (tooltip) {
+      // String tooltip - simple case
+      if (typeof tooltip === 'string') {
+        return (
+          <TooltipProvider placement={defaultTooltipPlacement} title={tooltip}>
+            {(triggerProps, ref) => renderElement(triggerProps, ref)}
+          </TooltipProvider>
+        );
+      }
+
+      // Boolean tooltip - auto tooltip on overflow
+      if (tooltip === true) {
+        if ((children || labelProps) && (isLabelOverflowed || isDynamicLabel)) {
           return (
             <TooltipProvider
               placement={defaultTooltipPlacement}
-              title={tooltip}
+              title={children}
+              isDisabled={!isLabelOverflowed && isDynamicLabel}
             >
               {(triggerProps, ref) => renderElement(triggerProps, ref)}
             </TooltipProvider>
           );
         }
+      }
 
-        // Boolean tooltip - auto tooltip on overflow
-        if (tooltip === true) {
-          if (
-            (children || labelProps) &&
-            (isLabelOverflowed || isDynamicLabel)
-          ) {
-            return (
-              <TooltipProvider
-                placement={defaultTooltipPlacement}
-                title={children}
-                isDisabled={!isLabelOverflowed && isDynamicLabel}
-              >
-                {(triggerProps, ref) => renderElement(triggerProps, ref)}
-              </TooltipProvider>
-            );
-          }
-        }
+      // Object tooltip - advanced configuration
+      if (typeof tooltip === 'object') {
+        const { auto, ...tooltipProps } = tooltip;
 
-        // Object tooltip - advanced configuration
-        if (typeof tooltip === 'object') {
-          const { auto, ...tooltipProps } = tooltip;
+        // If title is provided and auto is not explicitly true, always show the tooltip
+        if (tooltipProps.title && auto !== true) {
+          return (
+            <TooltipProvider
+              placement={defaultTooltipPlacement}
+              {...tooltipProps}
+            >
+              {(triggerProps, ref) => renderElement(triggerProps, ref)}
+            </TooltipProvider>
+          );
+        }
 
-          // If title is provided and auto is not explicitly true, always show the tooltip
-          if (tooltipProps.title && auto !== true) {
-            return (
-              <TooltipProvider
-                placement={defaultTooltipPlacement}
-                {...tooltipProps}
-              >
-                {(triggerProps, ref) => renderElement(triggerProps, ref)}
-              </TooltipProvider>
-            );
-          }
-
-          // If title is provided with auto=true, OR no title but auto behavior enabled
-          if (
-            (children || labelProps) &&
-            (isLabelOverflowed || isDynamicLabel)
-          ) {
-            return (
-              <TooltipProvider
-                placement={defaultTooltipPlacement}
-                title={tooltipProps.title ?? children}
-                isDisabled={
-                  !isLabelOverflowed &&
-                  isDynamicLabel &&
-                  tooltipProps.isDisabled !== true
-                }
-                {...tooltipProps}
-              >
-                {(triggerProps, ref) => renderElement(triggerProps, ref)}
-              </TooltipProvider>
-            );
-          }
+        // If title is provided with auto=true, OR no title but auto behavior enabled
+        if ((children || labelProps) && (isLabelOverflowed || isDynamicLabel)) {
+          return (
+            <TooltipProvider
+              placement={defaultTooltipPlacement}
+              title={tooltipProps.title ?? children}
+              isDisabled={
+                !isLabelOverflowed &&
+                isDynamicLabel &&
+                tooltipProps.isDisabled !== true
+              }
+              {...tooltipProps}
+            >
+              {(triggerProps, ref) => renderElement(triggerProps, ref)}
+            </TooltipProvider>
+          );
         }
       }
+    }
 
-      return renderElement();
-    },
-  );
+    return renderElement();
+  };
 
   return {
     labelRef: handleLabelElementRef,
@@ -838,84 +826,80 @@ const Item = <T extends HTMLElement = HTMLDivElement>(
     isDynamicLabel: !!actions,
   });
 
-  // Create a stable render function that doesn't call hooks
-  const renderItemElement = useEvent(
-    (
-      tooltipTriggerProps?: HTMLAttributes<HTMLElement>,
-      tooltipRef?: RefObject<HTMLElement>,
-    ) => {
-      // Use callback ref to merge multiple refs without calling hooks
-      const handleRef = (element: HTMLElement | null) => {
-        // Set the component's forwarded ref
-        if (typeof ref === 'function') {
-          ref(element as T | null);
-        } else if (ref) {
-          (ref as any).current = element;
-        }
-        // Set the tooltip ref if provided
-        if (tooltipRef) {
-          (tooltipRef as any).current = element;
+  // Render function that creates the item element
+  const renderItemElement = (
+    tooltipTriggerProps?: HTMLAttributes<HTMLElement>,
+    tooltipRef?: RefObject<HTMLElement>,
+  ) => {
+    // Use callback ref to merge multiple refs without calling hooks
+    const handleRef = (element: HTMLElement | null) => {
+      // Set the component's forwarded ref
+      if (typeof ref === 'function') {
+        ref(element as T | null);
+      } else if (ref) {
+        (ref as any).current = element;
+      }
+      // Set the tooltip ref if provided
+      if (tooltipRef) {
+        (tooltipRef as any).current = element;
+      }
+    };
+
+    // Merge custom size style with provided style
+    const finalStyle =
+      typeof size === 'number'
+        ? ({ ...style, '--size': `${size}px` } as any)
+        : style;
+
+    return (
+      <ItemElement
+        ref={handleRef}
+        variant={
+          theme && type ? (`${theme}.${type}` as ItemVariant) : undefined
         }
-      };
-
-      // Merge custom size style with provided style
-      const finalStyle =
-        typeof size === 'number'
-          ? ({ ...style, '--size': `${size}px` } as any)
-          : style;
-
-      return (
-        <ItemElement
-          ref={handleRef}
-          variant={
-            theme && type ? (`${theme}.${type}` as ItemVariant) : undefined
-          }
-          disabled={finalIsDisabled}
-          aria-disabled={finalIsDisabled}
-          aria-selected={isSelected}
-          mods={mods}
-          styles={styles}
-          type={htmlType as any}
-          {...mergeProps(rest, tooltipTriggerProps || {})}
-          style={finalStyle}
-        >
-          {finalIcon && (
-            <div data-element="Icon">
-              {hasCheckbox ? <CheckIcon /> : finalIcon}
-            </div>
-          )}
-          {finalPrefix && <div data-element="Prefix">{finalPrefix}</div>}
-          {children || labelProps ? (
-            <div data-element="Label" {...finalLabelProps} ref={labelRef}>
-              {children}
-            </div>
-          ) : null}
-          {showDescription ? (
-            <div data-element="Description" {...descriptionProps}>
-              {description}
-            </div>
-          ) : null}
-          {finalSuffix && <div data-element="Suffix">{finalSuffix}</div>}
-          {finalRightIcon && (
-            <div data-element="RightIcon">{finalRightIcon}</div>
-          )}
-          {actions && (
-            <div data-element="Actions" {...ACTIONS_EVENT_HANDLERS}>
-              {actions !== true ? (
-                <ItemActionProvider
-                  type={type}
-                  theme={theme}
-                  disableActionsFocus={disableActionsFocus}
-                >
-                  {actions}
-                </ItemActionProvider>
-              ) : null}
-            </div>
-          )}
-        </ItemElement>
-      );
-    },
-  );
+        disabled={finalIsDisabled}
+        aria-disabled={finalIsDisabled}
+        aria-selected={isSelected}
+        mods={mods}
+        styles={styles}
+        type={htmlType as any}
+        {...mergeProps(rest, tooltipTriggerProps || {})}
+        style={finalStyle}
+      >
+        {finalIcon && (
+          <div data-element="Icon">
+            {hasCheckbox ? <CheckIcon /> : finalIcon}
+          </div>
+        )}
+        {finalPrefix && <div data-element="Prefix">{finalPrefix}</div>}
+        {children || labelProps ? (
+          <div data-element="Label" {...finalLabelProps} ref={labelRef}>
+            {children}
+          </div>
+        ) : null}
+        {showDescription ? (
+          <div data-element="Description" {...descriptionProps}>
+            {description}
+          </div>
+        ) : null}
+        {finalSuffix && <div data-element="Suffix">{finalSuffix}</div>}
+        {finalRightIcon && <div data-element="RightIcon">{finalRightIcon}</div>}
+        {actions && (
+          <div data-element="Actions" {...ACTIONS_EVENT_HANDLERS}>
+            {actions !== true ? (
+              <ItemActionProvider
+                type={type}
+                theme={theme}
+                disableActionsFocus={disableActionsFocus}
+              >
+                {actions}
+              </ItemActionProvider>
+            ) : null}
+          </div>
+        )}
+      </ItemElement>
+    );
+  };
 
   return renderWithTooltip(renderItemElement, defaultTooltipPlacement);
 };

From 65ad77e796abf2453894c0ce969aeddca0a9e0f9 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Mon, 17 Nov 2025 17:36:42 +0100
Subject: [PATCH 09/24] fix: placeholder mod in pickers

---
 src/components/fields/FilterPicker/FilterPicker.tsx | 2 +-
 src/components/fields/Picker/Picker.tsx             | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/fields/FilterPicker/FilterPicker.tsx b/src/components/fields/FilterPicker/FilterPicker.tsx
index bd8541855..5218dcb98 100644
--- a/src/components/fields/FilterPicker/FilterPicker.tsx
+++ b/src/components/fields/FilterPicker/FilterPicker.tsx
@@ -733,7 +733,7 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
         isDisabled={isDisabled || isLoading}
         data-input-type="filterpicker"
         mods={{
-          placeholder: !hasSelection,
+          placeholder: !hasSelection && !renderSummary,
           ...externalMods,
         }}
         icon={icon}
diff --git a/src/components/fields/Picker/Picker.tsx b/src/components/fields/Picker/Picker.tsx
index 30d9dcd80..01366e645 100644
--- a/src/components/fields/Picker/Picker.tsx
+++ b/src/components/fields/Picker/Picker.tsx
@@ -447,7 +447,7 @@ export const Picker = forwardRef(function Picker<T extends object>(
 
   const renderTriggerContent = () => {
     // When there is a selection and a custom summary renderer is provided – use it.
-    if (hasSelection && typeof renderSummary === 'function') {
+    if (typeof renderSummary === 'function') {
       if (selectionMode === 'single') {
         return renderSummary({
           selectedLabel: selectedLabels[0],
@@ -463,7 +463,7 @@ export const Picker = forwardRef(function Picker<T extends object>(
         selectedKeys: effectiveSelectedKeys,
         selectionMode: 'multiple',
       });
-    } else if (hasSelection && renderSummary === false) {
+    } else if (renderSummary === false) {
       return null;
     }
 
@@ -587,7 +587,7 @@ export const Picker = forwardRef(function Picker<T extends object>(
         isDisabled={isDisabled || isLoading}
         data-input-type="picker"
         mods={{
-          placeholder: !hasSelection,
+          placeholder: !hasSelection && !renderSummary,
           ...externalMods,
         }}
         icon={icon}

From 4570f59262dd8fc3108ac40bb6ac9fce2f52db25 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Mon, 17 Nov 2025 17:45:16 +0100
Subject: [PATCH 10/24] fix: minimum popover width for pickers

---
 .changeset/overlay-min-width-improvement.md         |  6 ++++++
 src/components/fields/ComboBox/ComboBox.tsx         |  8 +++++---
 src/components/fields/FilterPicker/FilterPicker.tsx | 11 ++++++++++-
 src/components/fields/Picker/Picker.tsx             | 11 ++++++++++-
 4 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/overlay-min-width-improvement.md

diff --git a/.changeset/overlay-min-width-improvement.md b/.changeset/overlay-min-width-improvement.md
new file mode 100644
index 000000000..622a5d9a3
--- /dev/null
+++ b/.changeset/overlay-min-width-improvement.md
@@ -0,0 +1,6 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Improved overlay width behavior for Picker and FilterPicker components to match their trigger button width, ensuring better visual consistency.
+
diff --git a/src/components/fields/ComboBox/ComboBox.tsx b/src/components/fields/ComboBox/ComboBox.tsx
index c7714d128..e8a92fd78 100644
--- a/src/components/fields/ComboBox/ComboBox.tsx
+++ b/src/components/fields/ComboBox/ComboBox.tsx
@@ -85,7 +85,7 @@ const ComboBoxOverlayElement = tasty({
     display: 'grid',
     gridRows: '1sf',
     gridColumns: '1sf',
-    width: '$min-width max-content 50vw',
+    width: '$overlay-min-width max-content 50vw',
     height: 'initial max-content (50vh - 5x)',
     overflow: 'auto',
     background: '#white',
@@ -120,7 +120,7 @@ const ComboBoxOverlayElement = tasty({
       '!open': 0.001,
     },
 
-    '$min-width': 'min 30x',
+    '$overlay-min-width': 'min 30x',
   },
 });
 
@@ -913,7 +913,9 @@ function ComboBoxOverlay({
             }}
             styles={overlayStyles}
             style={{
-              '--min-width': comboBoxWidth ? `${comboBoxWidth}px` : undefined,
+              '--overlay-min-width': comboBoxWidth
+                ? `${comboBoxWidth}px`
+                : undefined,
             }}
           >
             <ListBox
diff --git a/src/components/fields/FilterPicker/FilterPicker.tsx b/src/components/fields/FilterPicker/FilterPicker.tsx
index 5218dcb98..63546fe13 100644
--- a/src/components/fields/FilterPicker/FilterPicker.tsx
+++ b/src/components/fields/FilterPicker/FilterPicker.tsx
@@ -635,6 +635,9 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
 
   const [shouldUpdatePosition, setShouldUpdatePosition] = useState(true);
 
+  // Capture trigger width for overlay min-width
+  const triggerWidth = triggerRef?.current?.offsetWidth;
+
   // The trigger is rendered as a function so we can access the dialog state
   const renderTrigger = (state) => {
     // Listen for other menus opening and close this one if needed
@@ -800,9 +803,15 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
             display="grid"
             styles={{
               gridRows: '1sf',
-              width: '30x max-content 50vw',
+              width: '$overlay-min-width max-content 50vw',
+              '$overlay-min-width': 'min 30x',
               ...popoverStyles,
             }}
+            style={
+              triggerWidth
+                ? ({ '--overlay-min-width': `${triggerWidth}px` } as any)
+                : undefined
+            }
           >
             <FocusScope restoreFocus>
               <FilterListBox
diff --git a/src/components/fields/Picker/Picker.tsx b/src/components/fields/Picker/Picker.tsx
index 01366e645..7d45be1f0 100644
--- a/src/components/fields/Picker/Picker.tsx
+++ b/src/components/fields/Picker/Picker.tsx
@@ -495,6 +495,9 @@ export const Picker = forwardRef(function Picker<T extends object>(
 
   const [shouldUpdatePosition, setShouldUpdatePosition] = useState(true);
 
+  // Capture trigger width for overlay min-width
+  const triggerWidth = triggerRef?.current?.offsetWidth;
+
   // The trigger is rendered as a function so we can access the dialog state
   const renderTrigger = (state) => {
     // Listen for other menus opening and close this one if needed
@@ -653,9 +656,15 @@ export const Picker = forwardRef(function Picker<T extends object>(
             display="grid"
             styles={{
               gridRows: '1sf',
-              width: '30x max-content 50vw',
+              width: '$overlay-min-width max-content 50vw',
+              '$overlay-min-width': 'min 30x',
               ...popoverStyles,
             }}
+            style={
+              triggerWidth
+                ? ({ '--overlay-min-width': `${triggerWidth}px` } as any)
+                : undefined
+            }
           >
             <FocusScope restoreFocus>
               <ListBox

From 612e9c117ad51692c74a86d2a5eddac26d92e227 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Mon, 17 Nov 2025 18:04:30 +0100
Subject: [PATCH 11/24] fix: descrease container padding

---
 .changeset/pink-rivers-destroy.md                   | 5 +++++
 src/components/fields/ComboBox/ComboBox.tsx         | 7 +++++++
 src/components/fields/FilterPicker/FilterPicker.tsx | 4 ++++
 src/components/fields/Picker/Picker.tsx             | 4 ++++
 src/components/fields/Select/Select.tsx             | 4 ++++
 src/components/overlays/Dialog/DialogTrigger.tsx    | 2 ++
 6 files changed, 26 insertions(+)
 create mode 100644 .changeset/pink-rivers-destroy.md

diff --git a/.changeset/pink-rivers-destroy.md b/.changeset/pink-rivers-destroy.md
new file mode 100644
index 000000000..66dbbe1e7
--- /dev/null
+++ b/.changeset/pink-rivers-destroy.md
@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Decrease containerPadding of all overlays 12px -> 8px.
diff --git a/src/components/fields/ComboBox/ComboBox.tsx b/src/components/fields/ComboBox/ComboBox.tsx
index e8a92fd78..2018c6740 100644
--- a/src/components/fields/ComboBox/ComboBox.tsx
+++ b/src/components/fields/ComboBox/ComboBox.tsx
@@ -234,6 +234,8 @@ export interface CubeComboBoxProps<T>
   direction?: 'bottom' | 'top';
   /** Offset for the popover */
   overlayOffset?: number;
+  /** Minimum padding in pixels between the popover and viewport edges */
+  containerPadding?: number;
   /** Whether the combobox is read-only */
   isReadOnly?: boolean;
   /** Suffix position goes before or after the validation and loading statuses */
@@ -792,6 +794,7 @@ interface ComboBoxOverlayProps {
   direction: 'bottom' | 'top';
   shouldFlip: boolean;
   overlayOffset: number;
+  containerPadding: number;
   comboBoxWidth?: number;
   comboBoxId: string;
   overlayStyles?: Styles;
@@ -825,6 +828,7 @@ function ComboBoxOverlay({
   direction,
   shouldFlip,
   overlayOffset,
+  containerPadding,
   comboBoxWidth,
   comboBoxId,
   overlayStyles,
@@ -858,6 +862,7 @@ function ComboBoxOverlay({
     shouldFlip,
     isOpen,
     offset: overlayOffset,
+    containerPadding: containerPadding,
   });
 
   // Overlay behavior (dismiss on outside click, escape)
@@ -1030,6 +1035,7 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
     headingStyles,
     isReadOnly,
     overlayOffset = 8,
+    containerPadding = 8,
     onSelectionChange: externalOnSelectionChange,
     sortSelectedToTop: sortSelectedToTopProp,
     onFocus,
@@ -1819,6 +1825,7 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
         direction={direction}
         shouldFlip={shouldFlip}
         overlayOffset={overlayOffset}
+        containerPadding={containerPadding}
         comboBoxWidth={comboBoxWidth}
         comboBoxId={comboBoxId}
         overlayStyles={overlayStyles}
diff --git a/src/components/fields/FilterPicker/FilterPicker.tsx b/src/components/fields/FilterPicker/FilterPicker.tsx
index 63546fe13..61d162955 100644
--- a/src/components/fields/FilterPicker/FilterPicker.tsx
+++ b/src/components/fields/FilterPicker/FilterPicker.tsx
@@ -82,6 +82,8 @@ export interface CubeFilterPickerProps<T>
   isCheckable?: boolean;
   /** Whether to flip the popover placement */
   shouldFlip?: boolean;
+  /** Minimum padding in pixels between the popover and viewport edges */
+  containerPadding?: number;
   /** Tooltip for the trigger button (separate from field tooltip) */
   triggerTooltip?: CubeItemProps['tooltip'];
   /** Description for the trigger button (separate from field description) */
@@ -207,6 +209,7 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
     shouldFocusWrap,
     children,
     shouldFlip = true,
+    containerPadding = 8,
     selectedKey,
     defaultSelectedKey,
     selectedKeys,
@@ -783,6 +786,7 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
         type="popover"
         placement="bottom start"
         styles={triggerStyles}
+        containerPadding={containerPadding}
         shouldUpdatePosition={shouldUpdatePosition}
         shouldFlip={shouldFlip && shouldUpdatePosition}
         isDismissable={true}
diff --git a/src/components/fields/Picker/Picker.tsx b/src/components/fields/Picker/Picker.tsx
index 7d45be1f0..bd081b075 100644
--- a/src/components/fields/Picker/Picker.tsx
+++ b/src/components/fields/Picker/Picker.tsx
@@ -69,6 +69,8 @@ export interface CubePickerProps<T>
   isCheckable?: boolean;
   /** Whether to flip the popover placement */
   shouldFlip?: boolean;
+  /** Minimum padding in pixels between the popover and viewport edges */
+  containerPadding?: number;
   /** Tooltip for the trigger button (separate from field tooltip) */
   triggerTooltip?: CubeItemProps['tooltip'];
   /** Description for the trigger button (separate from field description) */
@@ -194,6 +196,7 @@ export const Picker = forwardRef(function Picker<T extends object>(
     shouldFocusWrap,
     children,
     shouldFlip = true,
+    containerPadding = 8,
     selectedKey,
     defaultSelectedKey,
     selectedKeys,
@@ -636,6 +639,7 @@ export const Picker = forwardRef(function Picker<T extends object>(
         type="popover"
         placement="bottom start"
         styles={triggerStyles}
+        containerPadding={containerPadding}
         shouldUpdatePosition={shouldUpdatePosition}
         shouldFlip={shouldFlip && shouldUpdatePosition}
         isDismissable={true}
diff --git a/src/components/fields/Select/Select.tsx b/src/components/fields/Select/Select.tsx
index a52a548bf..757a933a5 100644
--- a/src/components/fields/Select/Select.tsx
+++ b/src/components/fields/Select/Select.tsx
@@ -208,6 +208,8 @@ export interface CubeSelectBaseProps<T>
   wrapperStyles?: Styles;
   direction?: 'top' | 'bottom';
   shouldFlip?: boolean;
+  /** Minimum padding in pixels between the popover and viewport edges */
+  containerPadding?: number;
   inputProps?: Props;
   type?: 'outline' | 'clear' | 'primary' | (string & {});
   suffixPosition?: 'before' | 'after';
@@ -279,6 +281,7 @@ function Select<T extends object>(
     hotkeys,
     direction = 'bottom',
     shouldFlip = true,
+    containerPadding = 8,
     placeholder,
     tooltip,
     size = 'medium',
@@ -341,6 +344,7 @@ function Select<T extends object>(
     isOpen: state.isOpen,
     onClose: state.close,
     offset: overlayOffset,
+    containerPadding: containerPadding,
   });
 
   let { isFocused, focusProps } = useFocus({ isDisabled }, true);
diff --git a/src/components/overlays/Dialog/DialogTrigger.tsx b/src/components/overlays/Dialog/DialogTrigger.tsx
index ce08d8129..6af1b2ba3 100644
--- a/src/components/overlays/Dialog/DialogTrigger.tsx
+++ b/src/components/overlays/Dialog/DialogTrigger.tsx
@@ -68,6 +68,8 @@ export interface CubeDialogTriggerProps
   defaultOpen?: boolean;
   shouldFlip?: boolean;
   shouldUpdatePosition?: boolean;
+  /** Minimum padding in pixels between the popover and viewport edges */
+  containerPadding?: number;
 }
 
 /**

From 4b8b1ffe8612d47ced163c6d048b0163ca7f3a1a Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Mon, 17 Nov 2025 18:11:09 +0100
Subject: [PATCH 12/24] fix(Radio): qa prop

---
 src/components/fields/RadioGroup/Radio.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/fields/RadioGroup/Radio.tsx b/src/components/fields/RadioGroup/Radio.tsx
index 3923093fc..3b6690ebd 100644
--- a/src/components/fields/RadioGroup/Radio.tsx
+++ b/src/components/fields/RadioGroup/Radio.tsx
@@ -44,7 +44,6 @@ const RadioButtonElement = tasty(Item, {
 });
 
 const TabRadioButtonSelectedElement = tasty(RadioButtonElement, {
-  qa: 'RadioSelected',
   styles: {
     fill: '#white',
     shadow: '$item-shadow',
@@ -314,7 +313,7 @@ function Radio(props: CubeRadioProps, ref) {
         {...mergeProps(hoverProps, focusProps)}
       >
         <HiddenInput
-          data-qa={qa || 'Radio'}
+          qa={qa || 'Radio'}
           data-input-type="radio"
           aria-label={ariaLabel}
           {...inputProps}
@@ -337,7 +336,7 @@ function Radio(props: CubeRadioProps, ref) {
       data-type={type}
     >
       <HiddenInput
-        data-qa={qa || 'Radio'}
+        qa={qa || 'Radio'}
         data-input-type="radio"
         aria-label={ariaLabel}
         {...mergeProps(inputProps, focusProps)}

From ad59d213ef8d96ac71546a132c0878eba65ffbda Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Mon, 17 Nov 2025 18:16:50 +0100
Subject: [PATCH 13/24] fix: remove placeholder wrapping

---
 src/components/fields/FilterPicker/FilterPicker.tsx | 9 +--------
 src/components/fields/Picker/Picker.tsx             | 9 +--------
 2 files changed, 2 insertions(+), 16 deletions(-)

diff --git a/src/components/fields/FilterPicker/FilterPicker.tsx b/src/components/fields/FilterPicker/FilterPicker.tsx
index 61d162955..966ea8a9c 100644
--- a/src/components/fields/FilterPicker/FilterPicker.tsx
+++ b/src/components/fields/FilterPicker/FilterPicker.tsx
@@ -626,14 +626,7 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
       return null;
     }
 
-    return (
-      <Text
-        ellipsis
-        style={{ opacity: hasSelection ? 1 : 'var(--disabled-opacity)' }}
-      >
-        {content}
-      </Text>
-    );
+    return content;
   };
 
   const [shouldUpdatePosition, setShouldUpdatePosition] = useState(true);
diff --git a/src/components/fields/Picker/Picker.tsx b/src/components/fields/Picker/Picker.tsx
index bd081b075..2831673d2 100644
--- a/src/components/fields/Picker/Picker.tsx
+++ b/src/components/fields/Picker/Picker.tsx
@@ -486,14 +486,7 @@ export const Picker = forwardRef(function Picker<T extends object>(
       return null;
     }
 
-    return (
-      <Text
-        ellipsis
-        style={{ opacity: hasSelection ? 1 : 'var(--disabled-opacity)' }}
-      >
-        {content}
-      </Text>
-    );
+    return content;
   };
 
   const [shouldUpdatePosition, setShouldUpdatePosition] = useState(true);

From 43d25a46879006fdcb5c131b46a3fe5219dcf52c Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Mon, 17 Nov 2025 18:21:21 +0100
Subject: [PATCH 14/24] fix(FilterPicker): min overlay width

---
 src/components/fields/FilterPicker/FilterPicker.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/fields/FilterPicker/FilterPicker.tsx b/src/components/fields/FilterPicker/FilterPicker.tsx
index 966ea8a9c..1033df80f 100644
--- a/src/components/fields/FilterPicker/FilterPicker.tsx
+++ b/src/components/fields/FilterPicker/FilterPicker.tsx
@@ -800,7 +800,7 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
             display="grid"
             styles={{
               gridRows: '1sf',
-              width: '$overlay-min-width max-content 50vw',
+              width: 'max($overlay-min-width, 30x) max-content 50vw',
               '$overlay-min-width': 'min 30x',
               ...popoverStyles,
             }}

From d28f908f94e6c1a8b803cc993d73ba35681aa65b Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Tue, 18 Nov 2025 10:18:29 +0100
Subject: [PATCH 15/24] fix: placeholders

---
 src/components/content/Item/Item.tsx             |  4 ----
 src/components/content/Text.tsx                  |  2 +-
 .../fields/FilterPicker/FilterPicker.tsx         |  4 ++--
 src/components/fields/Picker/Picker.stories.tsx  | 12 ++++++++++++
 src/components/fields/Picker/Picker.tsx          |  4 ++--
 src/components/fields/Select/Select.stories.tsx  | 16 ++++++++++++++++
 src/components/fields/Select/Select.tsx          | 11 +++++++----
 7 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/src/components/content/Item/Item.tsx b/src/components/content/Item/Item.tsx
index 5b2c0bec5..7cbfab538 100644
--- a/src/components/content/Item/Item.tsx
+++ b/src/components/content/Item/Item.tsx
@@ -353,10 +353,6 @@ const ItemElement = tasty({
       maxWidth: '100%',
       padding:
         '$block-padding $label-padding-right $label-padding-bottom $label-padding-left',
-      opacity: {
-        '': 1,
-        placeholder: '$disabled-opacity',
-      },
     },
 
     Description: {
diff --git a/src/components/content/Text.tsx b/src/components/content/Text.tsx
index e26c959ec..bcf8e6b08 100644
--- a/src/components/content/Text.tsx
+++ b/src/components/content/Text.tsx
@@ -142,7 +142,7 @@ const SelectionText = tasty(Text, {
 
 const PlaceholderText = tasty(Text, {
   styles: {
-    opacity: '$disabled-opacity',
+    color: '#dark-04',
   },
 });
 
diff --git a/src/components/fields/FilterPicker/FilterPicker.tsx b/src/components/fields/FilterPicker/FilterPicker.tsx
index 1033df80f..a000983fa 100644
--- a/src/components/fields/FilterPicker/FilterPicker.tsx
+++ b/src/components/fields/FilterPicker/FilterPicker.tsx
@@ -613,7 +613,7 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
     let content: ReactNode = '';
 
     if (!hasSelection) {
-      content = placeholder;
+      return <Text.Placeholder>{placeholder}</Text.Placeholder>;
     } else if (selectionMode === 'single') {
       content = selectedLabels[0];
     } else if (effectiveSelectedKeys === 'all') {
@@ -732,7 +732,7 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
         isDisabled={isDisabled || isLoading}
         data-input-type="filterpicker"
         mods={{
-          placeholder: !hasSelection && !renderSummary,
+          placeholder: !hasSelection,
           ...externalMods,
         }}
         icon={icon}
diff --git a/src/components/fields/Picker/Picker.stories.tsx b/src/components/fields/Picker/Picker.stories.tsx
index ec3ad016d..424de7176 100644
--- a/src/components/fields/Picker/Picker.stories.tsx
+++ b/src/components/fields/Picker/Picker.stories.tsx
@@ -267,3 +267,15 @@ export const WithDescription: Story = {
     )),
   },
 };
+
+export const LoadingState: Story = {
+  args: {
+    placeholder: 'Loading...',
+    label: 'Favorite Fruit',
+    selectionMode: 'single',
+    isLoading: true,
+    children: fruits.map((fruit) => (
+      <Picker.Item key={fruit.key}>{fruit.label}</Picker.Item>
+    )),
+  },
+};
diff --git a/src/components/fields/Picker/Picker.tsx b/src/components/fields/Picker/Picker.tsx
index 2831673d2..7eaf734f8 100644
--- a/src/components/fields/Picker/Picker.tsx
+++ b/src/components/fields/Picker/Picker.tsx
@@ -473,7 +473,7 @@ export const Picker = forwardRef(function Picker<T extends object>(
     let content: ReactNode = '';
 
     if (!hasSelection) {
-      content = placeholder;
+      return <Text.Placeholder>{placeholder}</Text.Placeholder>;
     } else if (selectionMode === 'single') {
       content = selectedLabels[0];
     } else if (effectiveSelectedKeys === 'all') {
@@ -586,7 +586,7 @@ export const Picker = forwardRef(function Picker<T extends object>(
         isDisabled={isDisabled || isLoading}
         data-input-type="picker"
         mods={{
-          placeholder: !hasSelection && !renderSummary,
+          placeholder: !hasSelection,
           ...externalMods,
         }}
         icon={icon}
diff --git a/src/components/fields/Select/Select.stories.tsx b/src/components/fields/Select/Select.stories.tsx
index 25211b820..3610b3831 100644
--- a/src/components/fields/Select/Select.stories.tsx
+++ b/src/components/fields/Select/Select.stories.tsx
@@ -678,3 +678,19 @@ WithTooltips.parameters = {
     },
   },
 };
+
+export const LoadingState = Template.bind({});
+LoadingState.args = {
+  isLoading: true,
+  placeholder: 'Loading...',
+  label: 'Color',
+};
+
+LoadingState.parameters = {
+  docs: {
+    description: {
+      story:
+        'Select displays a loading indicator when `isLoading` is true, preventing user interaction until data is loaded.',
+    },
+  },
+};
diff --git a/src/components/fields/Select/Select.tsx b/src/components/fields/Select/Select.tsx
index 757a933a5..ea616926a 100644
--- a/src/components/fields/Select/Select.tsx
+++ b/src/components/fields/Select/Select.tsx
@@ -60,6 +60,7 @@ import {
 } from '../../actions/Menu/styled';
 import { CollectionItem } from '../../CollectionItem';
 import { CubeItemProps, Item } from '../../content/Item';
+import { Text } from '../../content/Text';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
 import { DisplayTransition } from '../../helpers';
 import { Portal } from '../../portal';
@@ -259,7 +260,7 @@ function Select<T extends object>(
     necessityIndicator,
     validationState,
     prefix,
-    isDisabled,
+    isDisabled = props.isLoading || false,
     autoFocus,
     inputProps,
     triggerRef,
@@ -472,9 +473,11 @@ function Select<T extends object>(
         isButton={isButton}
         labelProps={valueProps}
       >
-        {state.selectedItem
-          ? state.selectedItem.rendered
-          : placeholder || <>&nbsp;</>}
+        {state.selectedItem ? (
+          state.selectedItem.rendered
+        ) : placeholder ? (
+          <Text.Placeholder>{placeholder}</Text.Placeholder>
+        ) : null}
       </SelectTrigger>
       <ListBoxPopup
         {...menuProps}

From 874785f0cdd657db3d2ba7e6ef443e8dbc1ec2ec Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Tue, 18 Nov 2025 10:23:31 +0100
Subject: [PATCH 16/24] fix: overlay size in pickers

---
 src/components/fields/FilterPicker/FilterPicker.tsx | 2 +-
 src/components/fields/Picker/Picker.tsx             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/fields/FilterPicker/FilterPicker.tsx b/src/components/fields/FilterPicker/FilterPicker.tsx
index a000983fa..f85e173ba 100644
--- a/src/components/fields/FilterPicker/FilterPicker.tsx
+++ b/src/components/fields/FilterPicker/FilterPicker.tsx
@@ -801,7 +801,7 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
             styles={{
               gridRows: '1sf',
               width: 'max($overlay-min-width, 30x) max-content 50vw',
-              '$overlay-min-width': 'min 30x',
+              '$overlay-min-width': '30x',
               ...popoverStyles,
             }}
             style={
diff --git a/src/components/fields/Picker/Picker.tsx b/src/components/fields/Picker/Picker.tsx
index 7eaf734f8..31831f4d3 100644
--- a/src/components/fields/Picker/Picker.tsx
+++ b/src/components/fields/Picker/Picker.tsx
@@ -654,7 +654,7 @@ export const Picker = forwardRef(function Picker<T extends object>(
             styles={{
               gridRows: '1sf',
               width: '$overlay-min-width max-content 50vw',
-              '$overlay-min-width': 'min 30x',
+              '$overlay-min-width': '30x',
               ...popoverStyles,
             }}
             style={

From bc665ebe40bdc7c445ea231ba51759bbaf9447a1 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Tue, 18 Nov 2025 11:49:46 +0100
Subject: [PATCH 17/24] feat: color token fallback

---
 .changeset/color-token-fallback.md          |   6 +
 .changeset/remove-legacy-at-syntax.md       |   6 +
 .size-limit.cjs                             |   2 +-
 src/components/content/Text.tsx             |   2 +-
 src/data/item-themes.ts                     |   4 +
 src/stories/Tasty.docs.mdx                  |   9 +
 src/tasty/__snapshots__/tasty.test.tsx.snap | 833 ++++++++++----------
 src/tasty/parser/classify.ts                |  39 +-
 src/tasty/parser/parser.md                  |  30 +-
 src/tasty/parser/parser.test.ts             |  92 ++-
 src/tasty/styles.test.ts                    | 154 ++++
 src/tasty/styles/color.ts                   |  14 +-
 src/tasty/styles/createStyle.ts             |  40 +-
 src/tasty/styles/fill.ts                    |   4 +-
 src/tasty/tasty.test.tsx                    |  24 +
 src/tasty/utils/styles.ts                   |   5 +-
 16 files changed, 820 insertions(+), 444 deletions(-)
 create mode 100644 .changeset/color-token-fallback.md
 create mode 100644 .changeset/remove-legacy-at-syntax.md

diff --git a/.changeset/color-token-fallback.md b/.changeset/color-token-fallback.md
new file mode 100644
index 000000000..92759512b
--- /dev/null
+++ b/.changeset/color-token-fallback.md
@@ -0,0 +1,6 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Added color token fallback syntax `(#color, #fallback)` for robust color hierarchies. Supports nested fallbacks like `(#primary, (#secondary, #default))`. Automatically generates RGB variants for the entire fallback chain, ensuring proper color variable resolution at runtime.
+
diff --git a/.changeset/remove-legacy-at-syntax.md b/.changeset/remove-legacy-at-syntax.md
new file mode 100644
index 000000000..3764ba78c
--- /dev/null
+++ b/.changeset/remove-legacy-at-syntax.md
@@ -0,0 +1,6 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Removed legacy `@` prefix support for custom properties. Use `$` prefix instead (e.g., `$custom-color` instead of `@custom-color`).
+
diff --git a/.size-limit.cjs b/.size-limit.cjs
index 3482f2adf..9edc44a85 100644
--- a/.size-limit.cjs
+++ b/.size-limit.cjs
@@ -20,7 +20,7 @@ module.exports = [
         }),
       );
     },
-    limit: '320kB',
+    limit: '310kB',
   },
   {
     name: 'Tree shaking (just a Button)',
diff --git a/src/components/content/Text.tsx b/src/components/content/Text.tsx
index bcf8e6b08..09c2dad49 100644
--- a/src/components/content/Text.tsx
+++ b/src/components/content/Text.tsx
@@ -142,7 +142,7 @@ const SelectionText = tasty(Text, {
 
 const PlaceholderText = tasty(Text, {
   styles: {
-    color: '#dark-04',
+    color: '(#placeholder, #dark-04)',
   },
 });
 
diff --git a/src/data/item-themes.ts b/src/data/item-themes.ts
index ccf6fc918..64d218348 100644
--- a/src/data/item-themes.ts
+++ b/src/data/item-themes.ts
@@ -81,6 +81,7 @@ export const DEFAULT_PRIMARY_STYLES: Styles = {
     '': '#white',
     disabled: '#dark-04',
   },
+  '#placeholder': '#white.5',
 } as const;
 
 export const DEFAULT_SECONDARY_STYLES: Styles = {
@@ -219,6 +220,7 @@ export const DANGER_PRIMARY_STYLES: Styles = {
     '': '#white',
     disabled: '#dark-04',
   },
+  '#placeholder': '#white.5',
 } as const;
 
 export const DANGER_SECONDARY_STYLES: Styles = {
@@ -351,6 +353,7 @@ export const SUCCESS_PRIMARY_STYLES: Styles = {
     '': '#white',
     disabled: '#dark-04',
   },
+  '#placeholder': '#white.5',
 } as const;
 
 export const SUCCESS_SECONDARY_STYLES: Styles = {
@@ -483,6 +486,7 @@ export const SPECIAL_PRIMARY_STYLES: Styles = {
     '': '#white',
     disabled: '#white.4',
   },
+  '#placeholder': '#white.5',
 } as const;
 
 export const SPECIAL_SECONDARY_STYLES: Styles = {
diff --git a/src/stories/Tasty.docs.mdx b/src/stories/Tasty.docs.mdx
index b26dcf19d..86a2f9d5f 100644
--- a/src/stories/Tasty.docs.mdx
+++ b/src/stories/Tasty.docs.mdx
@@ -255,6 +255,11 @@ color: '#purple',      // Full opacity
 color: '#purple.5',    // 50% opacity
 color: '#purple.05',   // 5% opacity
 
+// Color token fallback syntax (supports nesting)
+color: '(#primary, #secondary)',                    // Single fallback
+fill: '(#surface, (#fallback, #default))',          // Nested fallbacks
+'#theme-color': '(#brand, #purple)',                // In definitions
+
 // Color token definition syntax
 '#primary': 'rgb(255 120 45)',       // Define custom color variables
 '#brand': '#purple',                 // Reference existing color tokens
@@ -386,6 +391,8 @@ color: '#text',                   // Text color token
 color: true,                      // Default: 'currentColor'
 fill: '#purple.10',               // Background with opacity
 fill: '#surface',                 // Background color token
+color: '(#primary, #dark)',       // Color with fallback
+fill: '(#surface, (#white, #default))', // Nested fallbacks
 color: {
   '': '#dark',
   hovered: '#purple',
@@ -824,6 +831,7 @@ const ThemedComponent = tasty({
     '#accent': '#purple.5',              // Creates --accent-color with 50% opacity
     '#success': '#aaffbb',               // Creates --success-color from hex
     '#brand': 'var(--purple-color)',     // Creates --brand-color from CSS variable
+    '#theme': '(#brand, #purple)',       // Creates --theme-color with fallback chain
     
     // Use the defined colors
     fill: '#primary',                    // Uses var(--primary-color)
@@ -841,6 +849,7 @@ const ThemedComponent = tasty({
 
 // Color variables are automatically scoped and provide RGB variants
 // Generates: --primary-color, --primary-color-rgb, etc.
+// Fallback chains maintain RGB variants: var(--brand-color-rgb, var(--purple-color-rgb))
 ```
 
 ## ✅ Best Practices & Anti-patterns
diff --git a/src/tasty/__snapshots__/tasty.test.tsx.snap b/src/tasty/__snapshots__/tasty.test.tsx.snap
index 43b1390b5..c455b2b9a 100644
--- a/src/tasty/__snapshots__/tasty.test.tsx.snap
+++ b/src/tasty/__snapshots__/tasty.test.tsx.snap
@@ -1,474 +1,481 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`tasty() API should allow multiple wrapping 1`] = `".t14.t14 {position: static; padding-top: calc(2 * var(--gap)); border: var(--border-width) solid var(--black-color); color: var(--white-color); --current-color: var(--white-color, white); --current-color-rgb: var(--white-color-rgb); display: flex;}"`;
+exports[`tasty() API should allow multiple wrapping 1`] = `".t16.t16 {position: static; padding-top: calc(2 * var(--gap)); border: var(--border-width) solid var(--black-color); color: var(--white-color); --current-color: var(--white-color); --current-color-rgb: var(--white-color-rgb); display: flex;}"`;
 
 exports[`tasty() API should allow nested modifiers 1`] = `
-".t15.t15 {display: block;}
-.t15.t15:first-child {color: var(--clear-color); --current-color: var(--clear-color, clear); --current-color-rgb: var(--clear-color-rgb);}
-.t15.t15:not(:first-child) {color: var(--black-color); --current-color: var(--black-color, black); --current-color-rgb: var(--black-color-rgb);}"
+".t17.t17 {display: block;}
+.t17.t17:first-child {color: var(--clear-color); --current-color: var(--clear-color); --current-color-rgb: var(--clear-color-rgb);}
+.t17.t17:not(:first-child) {color: var(--black-color); --current-color: var(--black-color); --current-color-rgb: var(--black-color-rgb);}"
 `;
 
-exports[`tasty() API should be able to override styles 1`] = `".t7.t7 {display: block; color: rgb(var(--black-color-rgb) / .1); --current-color: var(--black-color, black); --current-color-rgb: var(--black-color-rgb);}"`;
+exports[`tasty() API should be able to override styles 1`] = `".t9.t9 {display: block; color: rgb(var(--black-color-rgb) / .1); --current-color: rgb(var(--black-color-rgb) / .1); --current-color-rgb: rgb(var(--black-color-rgb) / .1);}"`;
 
 exports[`tasty() API should create element styles 1`] = `
-".t11.t11:not([data-modified]) [data-element="Element"] {color: var(--dark-color); --current-color: var(--dark-color, dark); --current-color-rgb: var(--dark-color-rgb);}
-.t11.t11[data-modified] [data-element="Element"] {color: var(--purple-color); --current-color: var(--purple-color, purple); --current-color-rgb: var(--purple-color-rgb);}"
+".t13.t13:not([data-modified]) [data-element="Element"] {color: var(--dark-color); --current-color: var(--dark-color); --current-color-rgb: var(--dark-color-rgb);}
+.t13.t13[data-modified] [data-element="Element"] {color: var(--purple-color); --current-color: var(--purple-color); --current-color-rgb: var(--purple-color-rgb);}"
 `;
 
 exports[`tasty() API should create responsive styles 1`] = `
-"@media (min-width: 980px) {.t10.t10 {display: grid;}}
-@media (max-width: 979px) {.t10.t10 {display: flex;}}"
+"@media (min-width: 980px) {.t12.t12 {display: grid;}}
+@media (max-width: 979px) {.t12.t12 {display: flex;}}"
 `;
 
-exports[`tasty() API should define style props 1`] = `".t13.t13 {border: var(--border-width) solid var(--border-color);}"`;
+exports[`tasty() API should define style props 1`] = `".t15.t15 {border: var(--border-width) solid var(--border-color);}"`;
 
-exports[`tasty() API should fallback to default variant 1`] = `".t9.t9 {color: var(--white-color); --current-color: var(--white-color, white); --current-color-rgb: var(--white-color-rgb);}"`;
+exports[`tasty() API should fallback to default variant 1`] = `".t11.t11 {color: var(--white-color); --current-color: var(--white-color); --current-color-rgb: var(--white-color-rgb);}"`;
 
 exports[`tasty() API should handle arrays containing state maps 1`] = `
-".t19.t19 {display: block;}
-@media (min-width: 1200px) {.t19.t19 {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap)); margin-top: var(--gap); margin-right: var(--gap); margin-bottom: var(--gap); margin-left: var(--gap);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t19.t19:not([data-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap); background-color: rgb(var(--gray-color-rgb) / .05);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t19.t19[data-hovered] {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap)); background-color: rgb(var(--blue-color-rgb) / .10);}}
-@media (max-width: 767px) {.t19.t19:not([data-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap); background-color: rgb(var(--gray-color-rgb) / .05);}}
-@media (max-width: 767px) {.t19.t19[data-hovered] {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap)); background-color: rgb(var(--blue-color-rgb) / .10);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t19.t19:not([data-disabled]):not([data-pressed]) {margin-top: calc(2 * var(--gap)); margin-right: calc(2 * var(--gap)); margin-bottom: calc(2 * var(--gap)); margin-left: calc(2 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t19.t19[data-disabled]:not([data-pressed]) {margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t19.t19[data-pressed]:not([data-disabled]) {margin-top: var(--gap); margin-right: var(--gap); margin-bottom: var(--gap); margin-left: var(--gap);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t19.t19[data-disabled][data-pressed] {margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;}}
-@media (max-width: 767px) {.t19.t19:not([data-focused]) {margin-top: calc(0.5 * var(--gap)); margin-right: calc(0.5 * var(--gap)); margin-bottom: calc(0.5 * var(--gap)); margin-left: calc(0.5 * var(--gap));}}
-@media (max-width: 767px) {.t19.t19[data-focused] {margin-top: var(--gap); margin-right: var(--gap); margin-bottom: var(--gap); margin-left: var(--gap);}}
-@media (min-width: 1200px) {.t19.t19:not([data-hovered]) {background-color: var(--white-color);}}
-@media (min-width: 1200px) {.t19.t19:not([data-hovered])>* {--context-fill-color: var(--white-color); --context-fill-color-rgb: var(--white-color-rgb);}}
-@media (min-width: 1200px) {.t19.t19[data-hovered] {background-color: rgb(var(--blue-color-rgb) / .05);}}
-@media (min-width: 1200px) {.t19.t19[data-hovered]>* {--context-fill-color: rgb(var(--blue-color-rgb) / .05); --context-fill-color-rgb: var(--blue-color-rgb);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t19.t19:not([data-hovered])>* {--context-fill-color: rgb(var(--gray-color-rgb) / .05); --context-fill-color-rgb: var(--gray-color-rgb);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t19.t19[data-hovered]>* {--context-fill-color: rgb(var(--blue-color-rgb) / .10); --context-fill-color-rgb: var(--blue-color-rgb);}}
-@media (max-width: 767px) {.t19.t19:not([data-hovered])>* {--context-fill-color: rgb(var(--gray-color-rgb) / .05); --context-fill-color-rgb: var(--gray-color-rgb);}}
-@media (max-width: 767px) {.t19.t19[data-hovered]>* {--context-fill-color: rgb(var(--blue-color-rgb) / .10); --context-fill-color-rgb: var(--blue-color-rgb);}}"
+".t21.t21 {display: block;}
+@media (min-width: 1200px) {.t21.t21 {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap)); margin-top: var(--gap); margin-right: var(--gap); margin-bottom: var(--gap); margin-left: var(--gap);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t21.t21:not([data-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap); background-color: rgb(var(--gray-color-rgb) / .05);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t21.t21[data-hovered] {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap)); background-color: rgb(var(--blue-color-rgb) / .10);}}
+@media (max-width: 767px) {.t21.t21:not([data-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap); background-color: rgb(var(--gray-color-rgb) / .05);}}
+@media (max-width: 767px) {.t21.t21[data-hovered] {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap)); background-color: rgb(var(--blue-color-rgb) / .10);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t21.t21:not([data-disabled]):not([data-pressed]) {margin-top: calc(2 * var(--gap)); margin-right: calc(2 * var(--gap)); margin-bottom: calc(2 * var(--gap)); margin-left: calc(2 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t21.t21[data-disabled]:not([data-pressed]) {margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t21.t21[data-pressed]:not([data-disabled]) {margin-top: var(--gap); margin-right: var(--gap); margin-bottom: var(--gap); margin-left: var(--gap);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t21.t21[data-disabled][data-pressed] {margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;}}
+@media (max-width: 767px) {.t21.t21:not([data-focused]) {margin-top: calc(0.5 * var(--gap)); margin-right: calc(0.5 * var(--gap)); margin-bottom: calc(0.5 * var(--gap)); margin-left: calc(0.5 * var(--gap));}}
+@media (max-width: 767px) {.t21.t21[data-focused] {margin-top: var(--gap); margin-right: var(--gap); margin-bottom: var(--gap); margin-left: var(--gap);}}
+@media (min-width: 1200px) {.t21.t21:not([data-hovered]) {background-color: var(--white-color);}}
+@media (min-width: 1200px) {.t21.t21:not([data-hovered])>* {--context-fill-color: var(--white-color); --context-fill-color-rgb: var(--white-color-rgb);}}
+@media (min-width: 1200px) {.t21.t21[data-hovered] {background-color: rgb(var(--blue-color-rgb) / .05);}}
+@media (min-width: 1200px) {.t21.t21[data-hovered]>* {--context-fill-color: rgb(var(--blue-color-rgb) / .05); --context-fill-color-rgb: rgb(var(--blue-color-rgb) / .05);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t21.t21:not([data-hovered])>* {--context-fill-color: rgb(var(--gray-color-rgb) / .05); --context-fill-color-rgb: rgb(var(--gray-color-rgb) / .05);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t21.t21[data-hovered]>* {--context-fill-color: rgb(var(--blue-color-rgb) / .10); --context-fill-color-rgb: rgb(var(--blue-color-rgb) / .10);}}
+@media (max-width: 767px) {.t21.t21:not([data-hovered])>* {--context-fill-color: rgb(var(--gray-color-rgb) / .05); --context-fill-color-rgb: rgb(var(--gray-color-rgb) / .05);}}
+@media (max-width: 767px) {.t21.t21[data-hovered]>* {--context-fill-color: rgb(var(--blue-color-rgb) / .10); --context-fill-color-rgb: rgb(var(--blue-color-rgb) / .10);}}"
 `;
 
+exports[`tasty() API should handle color fallback syntax 1`] = `".t0.t0 {color: var(--placeholder-color, var(--dark-04-color)); --current-color: var(--placeholder-color, var(--dark-04-color)); --current-color-rgb: var(--placeholder-color-rgb, var(--dark-04-color-rgb));}"`;
+
 exports[`tasty() API should handle complex gridAreas with responsive arrays and state modifiers 1`] = `
-".t23.t23:not([data-sticky]) {position: static; background-color: transparent; z-index: auto; box-shadow: none;}
-.t23.t23[data-sticky] {position: sticky; top: 0; background-color: var(--white-color); z-index: 10; box-shadow: 0 calc(0.5 * var(--gap)) calc(0.5 * var(--gap)) var(--white-color);}
-.t23.t23[data-sticky]>* {--context-fill-color: var(--white-color); --context-fill-color-rgb: var(--white-color-rgb);}
-.t23.t23 {display: grid; padding-top: var(--gap); padding-right: calc(2 * var(--gap)); padding-bottom: var(--gap); padding-left: calc(2 * var(--gap)); height: auto; min-height: calc(6 * var(--gap)); max-height: initial; place-items: center stretch; place-content: stretch;}
-@media (min-width: 1200px) {.t23.t23:not([data-back-button-top]) {grid-template-areas: "breadcrumbs breadcrumbs breadcrumbs breadcrumbs breadcrumbs breadcrumbs" "back        title       .           subtitle    spacer      extra" "back        title       .           subtitle    spacer      extra" "content     content     content     content     content     content" "footer      footer      footer      footer      footer      footer";}}
-@media (min-width: 1200px) {.t23.t23[data-back-button-top] {grid-template-areas: "back        back        back        back        back        back" "breadcrumbs breadcrumbs breadcrumbs breadcrumbs breadcrumbs breadcrumbs" ".           title       .           subtitle    spacer      extra" ".           title       .           subtitle    spacer      extra" "content     content     content     content     content     content" "footer      footer      footer      footer      footer      footer";}}
-@media (max-width: 1199px) {.t23.t23:not([data-back-button-top]) {grid-template-areas: "breadcrumbs breadcrumbs breadcrumbs breadcrumbs" "back        title       spacer      extra" "back        subtitle    subtitle    extra" "back        .           .           extra" "content     content     content     content" "footer      footer      footer      footer";}}
-@media (max-width: 1199px) {.t23.t23[data-back-button-top] {grid-template-areas: "back        back        back        back" "breadcrumbs breadcrumbs breadcrumbs breadcrumbs" ".           title       spacer      extra" ".           subtitle    subtitle    extra" ".           .           .           extra" "content     content     content     content" "footer      footer      footer      footer";}}
-@media (min-width: 1200px) {.t23.t23 {grid-template-columns: max-content minmax(calc(2 * var(--gap)), auto) calc(2 * var(--gap)) minmax(0, auto) minmax(calc(2 * var(--gap)), 1fr) minmax(min-content, max-content);}}
-@media (max-width: 1199px) {.t23.t23 {grid-template-columns: max-content minmax(calc(2 * var(--gap)), auto) minmax(calc(2 * var(--gap)), 1fr) minmax(min-content, max-content);}}"
+".t25.t25:not([data-sticky]) {position: static; background-color: transparent; z-index: auto; box-shadow: none;}
+.t25.t25[data-sticky] {position: sticky; top: 0; background-color: var(--white-color); z-index: 10; box-shadow: 0 calc(0.5 * var(--gap)) calc(0.5 * var(--gap)) var(--white-color);}
+.t25.t25[data-sticky]>* {--context-fill-color: var(--white-color); --context-fill-color-rgb: var(--white-color-rgb);}
+.t25.t25 {display: grid; padding-top: var(--gap); padding-right: calc(2 * var(--gap)); padding-bottom: var(--gap); padding-left: calc(2 * var(--gap)); height: auto; min-height: calc(6 * var(--gap)); max-height: initial; place-items: center stretch; place-content: stretch;}
+@media (min-width: 1200px) {.t25.t25:not([data-back-button-top]) {grid-template-areas: "breadcrumbs breadcrumbs breadcrumbs breadcrumbs breadcrumbs breadcrumbs" "back        title       .           subtitle    spacer      extra" "back        title       .           subtitle    spacer      extra" "content     content     content     content     content     content" "footer      footer      footer      footer      footer      footer";}}
+@media (min-width: 1200px) {.t25.t25[data-back-button-top] {grid-template-areas: "back        back        back        back        back        back" "breadcrumbs breadcrumbs breadcrumbs breadcrumbs breadcrumbs breadcrumbs" ".           title       .           subtitle    spacer      extra" ".           title       .           subtitle    spacer      extra" "content     content     content     content     content     content" "footer      footer      footer      footer      footer      footer";}}
+@media (max-width: 1199px) {.t25.t25:not([data-back-button-top]) {grid-template-areas: "breadcrumbs breadcrumbs breadcrumbs breadcrumbs" "back        title       spacer      extra" "back        subtitle    subtitle    extra" "back        .           .           extra" "content     content     content     content" "footer      footer      footer      footer";}}
+@media (max-width: 1199px) {.t25.t25[data-back-button-top] {grid-template-areas: "back        back        back        back" "breadcrumbs breadcrumbs breadcrumbs breadcrumbs" ".           title       spacer      extra" ".           subtitle    subtitle    extra" ".           .           .           extra" "content     content     content     content" "footer      footer      footer      footer";}}
+@media (min-width: 1200px) {.t25.t25 {grid-template-columns: max-content minmax(calc(2 * var(--gap)), auto) calc(2 * var(--gap)) minmax(0, auto) minmax(calc(2 * var(--gap)), 1fr) minmax(min-content, max-content);}}
+@media (max-width: 1199px) {.t25.t25 {grid-template-columns: max-content minmax(calc(2 * var(--gap)), auto) minmax(calc(2 * var(--gap)), 1fr) minmax(min-content, max-content);}}"
 `;
 
 exports[`tasty() API should handle complex responsive styles with state binding 1`] = `
-"@media (min-width: 1200px) {.t22.t22 [data-element="Header"] {--font-size: var(--h2-font-size, var(--default-font-size, inherit)); font-size: var(--h2-font-size, var(--default-font-size, inherit)); --line-height: var(--h2-line-height, var(--default-line-height, inherit)); line-height: var(--h2-line-height, var(--default-line-height, inherit)); --letter-spacing: var(--h2-letter-spacing, var(--default-letter-spacing, inherit)); letter-spacing: var(--h2-letter-spacing, var(--default-letter-spacing, inherit)); --font-weight: var(--h2-font-weight, var(--default-font-weight, inherit)); font-weight: var(--h2-font-weight, var(--default-font-weight, inherit)); --font-style: var(--h2-font-style, var(--default-font-style, inherit)); font-style: var(--h2-font-style, var(--default-font-style, inherit)); --text-transform: var(--h2-text-transform, var(--default-text-transform, inherit)); text-transform: var(--h2-text-transform, var(--default-text-transform, inherit)); --font-family: var(--h2-font-family, var(--default-font-family, var(--font, NonexistentFontName))), var(--font, sans-serif); font-family: var(--h2-font-family, var(--default-font-family, var(--font, NonexistentFontName))), var(--font, sans-serif); --bold-font-weight: var(--h2-bold-font-weight, var(--default-bold-font-weight, inherit)); --icon-size: var(--h2-icon-size, var(--default-icon-size, inherit)); margin-top: 0; margin-right: 0; margin-bottom: calc(2 * var(--gap)); margin-left: 0;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22 [data-element="Header"] {--font-size: var(--h3-font-size, var(--default-font-size, inherit)); font-size: var(--h3-font-size, var(--default-font-size, inherit)); --line-height: var(--h3-line-height, var(--default-line-height, inherit)); line-height: var(--h3-line-height, var(--default-line-height, inherit)); --letter-spacing: var(--h3-letter-spacing, var(--default-letter-spacing, inherit)); letter-spacing: var(--h3-letter-spacing, var(--default-letter-spacing, inherit)); --font-weight: var(--h3-font-weight, var(--default-font-weight, inherit)); font-weight: var(--h3-font-weight, var(--default-font-weight, inherit)); --font-style: var(--h3-font-style, var(--default-font-style, inherit)); font-style: var(--h3-font-style, var(--default-font-style, inherit)); --text-transform: var(--h3-text-transform, var(--default-text-transform, inherit)); text-transform: var(--h3-text-transform, var(--default-text-transform, inherit)); --font-family: var(--h3-font-family, var(--default-font-family, var(--font, NonexistentFontName))), var(--font, sans-serif); font-family: var(--h3-font-family, var(--default-font-family, var(--font, NonexistentFontName))), var(--font, sans-serif); --bold-font-weight: var(--h3-bold-font-weight, var(--default-bold-font-weight, inherit)); --icon-size: var(--h3-icon-size, var(--default-icon-size, inherit)); margin-top: 0; margin-right: 0; margin-bottom: var(--gap); margin-left: 0;}}
-@media (max-width: 767px) {.t22.t22 [data-element="Header"] {--font-size: var(--h4-font-size, var(--default-font-size, inherit)); font-size: var(--h4-font-size, var(--default-font-size, inherit)); --line-height: var(--h4-line-height, var(--default-line-height, inherit)); line-height: var(--h4-line-height, var(--default-line-height, inherit)); --letter-spacing: var(--h4-letter-spacing, var(--default-letter-spacing, inherit)); letter-spacing: var(--h4-letter-spacing, var(--default-letter-spacing, inherit)); --font-weight: var(--h4-font-weight, var(--default-font-weight, inherit)); font-weight: var(--h4-font-weight, var(--default-font-weight, inherit)); --font-style: var(--h4-font-style, var(--default-font-style, inherit)); font-style: var(--h4-font-style, var(--default-font-style, inherit)); --text-transform: var(--h4-text-transform, var(--default-text-transform, inherit)); text-transform: var(--h4-text-transform, var(--default-text-transform, inherit)); --font-family: var(--h4-font-family, var(--default-font-family, var(--font, NonexistentFontName))), var(--font, sans-serif); font-family: var(--h4-font-family, var(--default-font-family, var(--font, NonexistentFontName))), var(--font, sans-serif); --bold-font-weight: var(--h4-bold-font-weight, var(--default-bold-font-weight, inherit)); --icon-size: var(--h4-icon-size, var(--default-icon-size, inherit)); margin-top: 0; margin-right: 0; margin-bottom: calc(0.5 * var(--gap)); margin-left: 0;}}
-.t22.t22:not([data-hovered]):not([data-variant="danger"]) [data-element="Header"] {color: var(--text-primary-color); --current-color: var(--text-primary-color, text-primary); --current-color-rgb: var(--text-primary-color-rgb);}
-.t22.t22[data-hovered]:not([data-variant="danger"]) [data-element="Header"] {color: var(--text-primary-hover-color); --current-color: var(--text-primary-hover-color, text-primary-hover); --current-color-rgb: var(--text-primary-hover-color-rgb);}
-.t22.t22[data-variant="danger"]:not([data-hovered]) [data-element="Header"] {color: var(--danger-color); --current-color: var(--danger-color, danger); --current-color-rgb: var(--danger-color-rgb);}
-.t22.t22[data-hovered][data-variant="danger"] [data-element="Header"] {color: var(--text-primary-hover-color); --current-color: var(--text-primary-hover-color, text-primary-hover); --current-color-rgb: var(--text-primary-hover-color-rgb);}
-@media (min-width: 1200px) {.t22.t22 [data-element="Content"] {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22 [data-element="Content"] {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (max-width: 767px) {.t22.t22 [data-element="Content"] {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
-.t22.t22:not([data-highlighted]):not([data-disabled]) [data-element="Content"] {color: var(--text-color); --current-color: var(--text-color, text); --current-color-rgb: var(--text-color-rgb);}
-.t22.t22[data-highlighted]:not([data-disabled]) [data-element="Content"] {color: var(--text-highlighted-color); --current-color: var(--text-highlighted-color, text-highlighted); --current-color-rgb: var(--text-highlighted-color-rgb);}
-.t22.t22[data-disabled]:not([data-highlighted]) [data-element="Content"] {color: var(--text-disabled-color); --current-color: var(--text-disabled-color, text-disabled); --current-color-rgb: var(--text-disabled-color-rgb);}
-.t22.t22[data-highlighted][data-disabled] [data-element="Content"] {color: var(--text-disabled-color); --current-color: var(--text-disabled-color, text-disabled); --current-color-rgb: var(--text-disabled-color-rgb);}
-@media (min-width: 1200px) {.t22.t22:not([data-expanded]) [data-element="Footer"] {display: flex; gap: calc(2 * var(--gap));}}
-@media (min-width: 1200px) {.t22.t22[data-expanded] [data-element="Footer"] {display: flex; gap: calc(2 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22:not([data-expanded]) [data-element="Footer"] {display: flex; gap: var(--gap);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-expanded] [data-element="Footer"] {display: flex; gap: var(--gap);}}
-@media (max-width: 767px) {.t22.t22:not([data-expanded]) [data-element="Footer"] {display: none;}}
-@media (max-width: 767px) {.t22.t22[data-expanded] [data-element="Footer"] {display: flex; gap: calc(0.5 * var(--gap));}}
-@media (max-width: 767px) {.t22.t22:not([data-expanded]) [data-element="Footer"] > *:not(:last-child) {margin-bottom: calc(0.5 * var(--gap));}}
-@media (min-width: 1200px) {.t22.t22:not([data-compact]) [data-element="Footer"] {padding-top: calc(2 * var(--gap));}}
-@media (min-width: 1200px) {.t22.t22[data-compact] [data-element="Footer"] {padding-top: var(--gap);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22:not([data-compact]) [data-element="Footer"] {padding-top: var(--gap);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-compact] [data-element="Footer"] {padding-top: calc(0.5 * var(--gap));}}
-@media (max-width: 767px) {.t22.t22:not([data-compact]) [data-element="Footer"] {padding-top: calc(0.5 * var(--gap));}}
-@media (max-width: 767px) {.t22.t22[data-compact] [data-element="Footer"] {padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;}}
-@media (min-width: 1200px) {.t22.t22 {display: grid; gap: calc(3 * var(--gap)); --local-radius: calc(2 * var(--radius)); border-radius: var(--local-radius);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22 {display: flex; gap: calc(2 * var(--gap)); --local-radius: var(--radius); border-radius: var(--local-radius);}}
-@media (max-width: 767px) {.t22.t22 {display: block; --local-radius: calc(0.5 * var(--radius)); border-radius: var(--local-radius);}}
-@media (max-width: 767px) {.t22.t22 > *:not(:last-child) {margin-bottom: var(--gap);}}
-@media (min-width: 1200px) {.t22.t22:not([data-variant="compact"]):not([data-pressed]):not([data-disabled]):not([data-hovered]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
-@media (min-width: 1200px) {.t22.t22[data-variant="compact"]:not([data-pressed]):not([data-disabled]):not([data-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (min-width: 1200px) {.t22.t22[data-pressed]:not([data-variant="compact"]):not([data-disabled]):not([data-hovered]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
-@media (min-width: 1200px) {.t22.t22[data-variant="compact"][data-pressed]:not([data-disabled]):not([data-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (min-width: 1200px) {.t22.t22[data-disabled]:not([data-variant="compact"]):not([data-pressed]):not([data-hovered]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
-@media (min-width: 1200px) {.t22.t22[data-variant="compact"][data-disabled]:not([data-pressed]):not([data-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (min-width: 1200px) {.t22.t22[data-pressed][data-disabled]:not([data-variant="compact"]):not([data-hovered]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
-@media (min-width: 1200px) {.t22.t22[data-variant="compact"][data-pressed][data-disabled]:not([data-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (min-width: 1200px) {.t22.t22[data-hovered]:not([data-variant="compact"]):not([data-pressed]):not([data-disabled]) {padding-top: calc(5 * var(--gap)); padding-right: calc(5 * var(--gap)); padding-bottom: calc(5 * var(--gap)); padding-left: calc(5 * var(--gap));}}
-@media (min-width: 1200px) {.t22.t22[data-variant="compact"][data-hovered]:not([data-pressed]):not([data-disabled]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (min-width: 1200px) {.t22.t22[data-pressed][data-hovered]:not([data-variant="compact"]):not([data-disabled]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
-@media (min-width: 1200px) {.t22.t22[data-variant="compact"][data-pressed][data-hovered]:not([data-disabled]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (min-width: 1200px) {.t22.t22[data-disabled][data-hovered]:not([data-variant="compact"]):not([data-pressed]) {padding-top: calc(5 * var(--gap)); padding-right: calc(5 * var(--gap)); padding-bottom: calc(5 * var(--gap)); padding-left: calc(5 * var(--gap));}}
-@media (min-width: 1200px) {.t22.t22[data-variant="compact"][data-disabled][data-hovered]:not([data-pressed]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (min-width: 1200px) {.t22.t22[data-pressed][data-disabled][data-hovered]:not([data-variant="compact"]) {padding-top: calc(5 * var(--gap)); padding-right: calc(5 * var(--gap)); padding-bottom: calc(5 * var(--gap)); padding-left: calc(5 * var(--gap));}}
-@media (min-width: 1200px) {.t22.t22[data-variant="compact"][data-pressed][data-disabled][data-hovered] {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22:not([data-variant="compact"]):not([data-pressed]):not([data-disabled]):not([data-hovered]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="compact"]:not([data-pressed]):not([data-disabled]):not([data-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-pressed]:not([data-variant="compact"]):not([data-disabled]):not([data-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="compact"][data-pressed]:not([data-disabled]):not([data-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-disabled]:not([data-variant="compact"]):not([data-pressed]):not([data-hovered]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="compact"][data-disabled]:not([data-pressed]):not([data-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-pressed][data-disabled]:not([data-variant="compact"]):not([data-hovered]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="compact"][data-pressed][data-disabled]:not([data-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-hovered]:not([data-variant="compact"]):not([data-pressed]):not([data-disabled]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="compact"][data-hovered]:not([data-pressed]):not([data-disabled]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-pressed][data-hovered]:not([data-variant="compact"]):not([data-disabled]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="compact"][data-pressed][data-hovered]:not([data-disabled]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-disabled][data-hovered]:not([data-variant="compact"]):not([data-pressed]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="compact"][data-disabled][data-hovered]:not([data-pressed]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-pressed][data-disabled][data-hovered]:not([data-variant="compact"]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="compact"][data-pressed][data-disabled][data-hovered] {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (max-width: 767px) {.t22.t22:not([data-variant="compact"]):not([data-pressed]):not([data-disabled]):not([data-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (max-width: 767px) {.t22.t22[data-variant="compact"]:not([data-pressed]):not([data-disabled]):not([data-hovered]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
-@media (max-width: 767px) {.t22.t22[data-pressed]:not([data-variant="compact"]):not([data-disabled]):not([data-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (max-width: 767px) {.t22.t22[data-variant="compact"][data-pressed]:not([data-disabled]):not([data-hovered]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
-@media (max-width: 767px) {.t22.t22[data-disabled]:not([data-variant="compact"]):not([data-pressed]):not([data-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (max-width: 767px) {.t22.t22[data-variant="compact"][data-disabled]:not([data-pressed]):not([data-hovered]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
-@media (max-width: 767px) {.t22.t22[data-pressed][data-disabled]:not([data-variant="compact"]):not([data-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (max-width: 767px) {.t22.t22[data-variant="compact"][data-pressed][data-disabled]:not([data-hovered]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
-@media (max-width: 767px) {.t22.t22[data-hovered]:not([data-variant="compact"]):not([data-pressed]):not([data-disabled]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
-@media (max-width: 767px) {.t22.t22[data-variant="compact"][data-hovered]:not([data-pressed]):not([data-disabled]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
-@media (max-width: 767px) {.t22.t22[data-pressed][data-hovered]:not([data-variant="compact"]):not([data-disabled]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (max-width: 767px) {.t22.t22[data-variant="compact"][data-pressed][data-hovered]:not([data-disabled]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
-@media (max-width: 767px) {.t22.t22[data-disabled][data-hovered]:not([data-variant="compact"]):not([data-pressed]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
-@media (max-width: 767px) {.t22.t22[data-variant="compact"][data-disabled][data-hovered]:not([data-pressed]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
-@media (max-width: 767px) {.t22.t22[data-pressed][data-disabled][data-hovered]:not([data-variant="compact"]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
-@media (max-width: 767px) {.t22.t22[data-variant="compact"][data-pressed][data-disabled][data-hovered] {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
-@media (min-width: 1200px) {.t22.t22:not([data-hovered]):not([data-focused]):not([data-disabled]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1200px;}}
-@media (min-width: 1200px) {.t22.t22[data-hovered]:not([data-focused]):not([data-disabled]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1300px;}}
-@media (min-width: 1200px) {.t22.t22[data-focused]:not([data-hovered]):not([data-disabled]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1300px;}}
-@media (min-width: 1200px) {.t22.t22[data-hovered][data-focused]:not([data-disabled]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1300px;}}
-@media (min-width: 1200px) {.t22.t22[data-disabled]:not([data-hovered]):not([data-focused]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1200px;}}
-@media (min-width: 1200px) {.t22.t22[data-hovered][data-disabled]:not([data-focused]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1200px;}}
-@media (min-width: 1200px) {.t22.t22[data-focused][data-disabled]:not([data-hovered]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1200px;}}
-@media (min-width: 1200px) {.t22.t22[data-hovered][data-focused][data-disabled]:not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1200px;}}
-@media (min-width: 1200px) {.t22.t22[data-expanded]:not([data-hovered]):not([data-focused]):not([data-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 1200px) {.t22.t22[data-hovered][data-expanded]:not([data-focused]):not([data-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1300px;}}
-@media (min-width: 1200px) {.t22.t22[data-focused][data-expanded]:not([data-hovered]):not([data-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1300px;}}
-@media (min-width: 1200px) {.t22.t22[data-hovered][data-focused][data-expanded]:not([data-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1300px;}}
-@media (min-width: 1200px) {.t22.t22[data-disabled][data-expanded]:not([data-hovered]):not([data-focused]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 1200px) {.t22.t22[data-hovered][data-disabled][data-expanded]:not([data-focused]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 1200px) {.t22.t22[data-focused][data-disabled][data-expanded]:not([data-hovered]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 1200px) {.t22.t22[data-hovered][data-focused][data-disabled][data-expanded]:not([data-size="large"]) {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 1200px) {.t22.t22[data-size="large"]:not([data-hovered]):not([data-focused]):not([data-disabled]):not([data-expanded]) {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 1200px) {.t22.t22[data-hovered][data-size="large"]:not([data-focused]):not([data-disabled]):not([data-expanded]) {width: auto; min-width: initial; max-width: 1300px;}}
-@media (min-width: 1200px) {.t22.t22[data-focused][data-size="large"]:not([data-hovered]):not([data-disabled]):not([data-expanded]) {width: auto; min-width: initial; max-width: 1300px;}}
-@media (min-width: 1200px) {.t22.t22[data-hovered][data-focused][data-size="large"]:not([data-disabled]):not([data-expanded]) {width: auto; min-width: initial; max-width: 1300px;}}
-@media (min-width: 1200px) {.t22.t22[data-disabled][data-size="large"]:not([data-hovered]):not([data-focused]):not([data-expanded]) {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 1200px) {.t22.t22[data-hovered][data-disabled][data-size="large"]:not([data-focused]):not([data-expanded]) {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 1200px) {.t22.t22[data-focused][data-disabled][data-size="large"]:not([data-hovered]):not([data-expanded]) {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 1200px) {.t22.t22[data-hovered][data-focused][data-disabled][data-size="large"]:not([data-expanded]) {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 1200px) {.t22.t22[data-expanded][data-size="large"]:not([data-hovered]):not([data-focused]):not([data-disabled]) {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 1200px) {.t22.t22[data-hovered][data-expanded][data-size="large"]:not([data-focused]):not([data-disabled]) {width: auto; min-width: initial; max-width: 1300px;}}
-@media (min-width: 1200px) {.t22.t22[data-focused][data-expanded][data-size="large"]:not([data-hovered]):not([data-disabled]) {width: auto; min-width: initial; max-width: 1300px;}}
-@media (min-width: 1200px) {.t22.t22[data-hovered][data-focused][data-expanded][data-size="large"]:not([data-disabled]) {width: auto; min-width: initial; max-width: 1300px;}}
-@media (min-width: 1200px) {.t22.t22[data-disabled][data-expanded][data-size="large"]:not([data-hovered]):not([data-focused]) {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 1200px) {.t22.t22[data-hovered][data-disabled][data-expanded][data-size="large"]:not([data-focused]) {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 1200px) {.t22.t22[data-focused][data-disabled][data-expanded][data-size="large"]:not([data-hovered]) {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 1200px) {.t22.t22[data-hovered][data-focused][data-disabled][data-expanded][data-size="large"] {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22:not([data-hovered]):not([data-focused]):not([data-disabled]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 800px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-hovered]:not([data-focused]):not([data-disabled]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 900px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-focused]:not([data-hovered]):not([data-disabled]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 900px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-hovered][data-focused]:not([data-disabled]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 900px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-disabled]:not([data-hovered]):not([data-focused]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 800px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-hovered][data-disabled]:not([data-focused]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 800px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-focused][data-disabled]:not([data-hovered]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 800px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-hovered][data-focused][data-disabled]:not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 800px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-expanded]:not([data-hovered]):not([data-focused]):not([data-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1000px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-hovered][data-expanded]:not([data-focused]):not([data-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 900px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-focused][data-expanded]:not([data-hovered]):not([data-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 900px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-hovered][data-focused][data-expanded]:not([data-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 900px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-disabled][data-expanded]:not([data-hovered]):not([data-focused]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1000px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-hovered][data-disabled][data-expanded]:not([data-focused]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1000px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-focused][data-disabled][data-expanded]:not([data-hovered]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1000px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-hovered][data-focused][data-disabled][data-expanded]:not([data-size="large"]) {width: auto; min-width: initial; max-width: 1000px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-size="large"]:not([data-hovered]):not([data-focused]):not([data-disabled]):not([data-expanded]) {width: auto; min-width: initial; max-width: 1000px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-hovered][data-size="large"]:not([data-focused]):not([data-disabled]):not([data-expanded]) {width: auto; min-width: initial; max-width: 900px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-focused][data-size="large"]:not([data-hovered]):not([data-disabled]):not([data-expanded]) {width: auto; min-width: initial; max-width: 900px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-hovered][data-focused][data-size="large"]:not([data-disabled]):not([data-expanded]) {width: auto; min-width: initial; max-width: 900px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-disabled][data-size="large"]:not([data-hovered]):not([data-focused]):not([data-expanded]) {width: auto; min-width: initial; max-width: 1000px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-hovered][data-disabled][data-size="large"]:not([data-focused]):not([data-expanded]) {width: auto; min-width: initial; max-width: 1000px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-focused][data-disabled][data-size="large"]:not([data-hovered]):not([data-expanded]) {width: auto; min-width: initial; max-width: 1000px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-hovered][data-focused][data-disabled][data-size="large"]:not([data-expanded]) {width: auto; min-width: initial; max-width: 1000px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-expanded][data-size="large"]:not([data-hovered]):not([data-focused]):not([data-disabled]) {width: auto; min-width: initial; max-width: 1000px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-hovered][data-expanded][data-size="large"]:not([data-focused]):not([data-disabled]) {width: auto; min-width: initial; max-width: 900px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-focused][data-expanded][data-size="large"]:not([data-hovered]):not([data-disabled]) {width: auto; min-width: initial; max-width: 900px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-hovered][data-focused][data-expanded][data-size="large"]:not([data-disabled]) {width: auto; min-width: initial; max-width: 900px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-disabled][data-expanded][data-size="large"]:not([data-hovered]):not([data-focused]) {width: auto; min-width: initial; max-width: 1000px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-hovered][data-disabled][data-expanded][data-size="large"]:not([data-focused]) {width: auto; min-width: initial; max-width: 1000px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-focused][data-disabled][data-expanded][data-size="large"]:not([data-hovered]) {width: auto; min-width: initial; max-width: 1000px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-hovered][data-focused][data-disabled][data-expanded][data-size="large"] {width: auto; min-width: initial; max-width: 1000px;}}
-@media (max-width: 767px) {.t22.t22:not([data-hovered]):not([data-focused]):not([data-disabled]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-hovered]:not([data-focused]):not([data-disabled]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-focused]:not([data-hovered]):not([data-disabled]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-hovered][data-focused]:not([data-disabled]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-disabled]:not([data-hovered]):not([data-focused]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-hovered][data-disabled]:not([data-focused]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-focused][data-disabled]:not([data-hovered]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-hovered][data-focused][data-disabled]:not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-expanded]:not([data-hovered]):not([data-focused]):not([data-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-hovered][data-expanded]:not([data-focused]):not([data-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-focused][data-expanded]:not([data-hovered]):not([data-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-hovered][data-focused][data-expanded]:not([data-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-disabled][data-expanded]:not([data-hovered]):not([data-focused]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-hovered][data-disabled][data-expanded]:not([data-focused]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-focused][data-disabled][data-expanded]:not([data-hovered]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-hovered][data-focused][data-disabled][data-expanded]:not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-size="large"]:not([data-hovered]):not([data-focused]):not([data-disabled]):not([data-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-hovered][data-size="large"]:not([data-focused]):not([data-disabled]):not([data-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-focused][data-size="large"]:not([data-hovered]):not([data-disabled]):not([data-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-hovered][data-focused][data-size="large"]:not([data-disabled]):not([data-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-disabled][data-size="large"]:not([data-hovered]):not([data-focused]):not([data-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-hovered][data-disabled][data-size="large"]:not([data-focused]):not([data-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-focused][data-disabled][data-size="large"]:not([data-hovered]):not([data-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-hovered][data-focused][data-disabled][data-size="large"]:not([data-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-expanded][data-size="large"]:not([data-hovered]):not([data-focused]):not([data-disabled]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-hovered][data-expanded][data-size="large"]:not([data-focused]):not([data-disabled]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-focused][data-expanded][data-size="large"]:not([data-hovered]):not([data-disabled]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-hovered][data-focused][data-expanded][data-size="large"]:not([data-disabled]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-disabled][data-expanded][data-size="large"]:not([data-hovered]):not([data-focused]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-hovered][data-disabled][data-expanded][data-size="large"]:not([data-focused]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-focused][data-disabled][data-expanded][data-size="large"]:not([data-hovered]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t22.t22[data-hovered][data-focused][data-disabled][data-expanded][data-size="large"] {width: auto; min-width: initial; max-width: 100%;}}
-.t22.t22:not([data-variant="success"]):not([data-disabled]):not([data-variant="danger"]):not([data-hovered]):not([data-pressed]) {background-color: var(--surface-color);}
-.t22.t22:not([data-variant="success"]):not([data-disabled]):not([data-variant="danger"]):not([data-hovered]):not([data-pressed])>* {--context-fill-color: var(--surface-color); --context-fill-color-rgb: var(--surface-color-rgb);}
-.t22.t22[data-variant="success"]:not([data-disabled]):not([data-hovered]):not([data-pressed]) {background-color: var(--success-color);}
-.t22.t22[data-variant="success"]:not([data-disabled]):not([data-hovered]):not([data-pressed])>* {--context-fill-color: var(--success-color); --context-fill-color-rgb: var(--success-color-rgb);}
-.t22.t22[data-disabled]:not([data-variant="success"]):not([data-variant="danger"]):not([data-hovered]):not([data-pressed]) {background-color: var(--surface-disabled-color);}
-.t22.t22[data-disabled]:not([data-variant="success"]):not([data-variant="danger"]):not([data-hovered]):not([data-pressed])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
-.t22.t22[data-variant="success"][data-disabled]:not([data-hovered]):not([data-pressed]) {background-color: var(--surface-disabled-color);}
-.t22.t22[data-variant="success"][data-disabled]:not([data-hovered]):not([data-pressed])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
-.t22.t22[data-variant="danger"]:not([data-disabled]):not([data-hovered]):not([data-pressed]) {background-color: var(--surface-color);}
-.t22.t22[data-variant="danger"]:not([data-disabled]):not([data-hovered]):not([data-pressed])>* {--context-fill-color: var(--surface-color); --context-fill-color-rgb: var(--surface-color-rgb);}
-.t22.t22[data-disabled][data-variant="danger"]:not([data-hovered]):not([data-pressed]) {background-color: var(--surface-disabled-color);}
-.t22.t22[data-disabled][data-variant="danger"]:not([data-hovered]):not([data-pressed])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
-.t22.t22[data-hovered]:not([data-variant="success"]):not([data-disabled]):not([data-variant="danger"]):not([data-pressed]) {background-color: var(--surface-hover-color);}
-.t22.t22[data-hovered]:not([data-variant="success"]):not([data-disabled]):not([data-variant="danger"]):not([data-pressed])>* {--context-fill-color: var(--surface-hover-color); --context-fill-color-rgb: var(--surface-hover-color-rgb);}
-.t22.t22[data-variant="success"][data-hovered]:not([data-disabled]):not([data-pressed]) {background-color: var(--success-color);}
-.t22.t22[data-variant="success"][data-hovered]:not([data-disabled]):not([data-pressed])>* {--context-fill-color: var(--success-color); --context-fill-color-rgb: var(--success-color-rgb);}
-.t22.t22[data-disabled][data-hovered]:not([data-variant="success"]):not([data-variant="danger"]):not([data-pressed]) {background-color: var(--surface-disabled-color);}
-.t22.t22[data-disabled][data-hovered]:not([data-variant="success"]):not([data-variant="danger"]):not([data-pressed])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
-.t22.t22[data-variant="success"][data-disabled][data-hovered]:not([data-pressed]) {background-color: var(--surface-disabled-color);}
-.t22.t22[data-variant="success"][data-disabled][data-hovered]:not([data-pressed])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
-.t22.t22[data-variant="danger"][data-hovered]:not([data-disabled]):not([data-pressed]) {background-color: var(--danger-hover-color);}
-.t22.t22[data-variant="danger"][data-hovered]:not([data-disabled]):not([data-pressed])>* {--context-fill-color: var(--danger-hover-color); --context-fill-color-rgb: var(--danger-hover-color-rgb);}
-.t22.t22[data-disabled][data-variant="danger"][data-hovered]:not([data-pressed]) {background-color: var(--danger-hover-color);}
-.t22.t22[data-disabled][data-variant="danger"][data-hovered]:not([data-pressed])>* {--context-fill-color: var(--danger-hover-color); --context-fill-color-rgb: var(--danger-hover-color-rgb);}
-.t22.t22[data-pressed]:not([data-variant="success"]):not([data-disabled]):not([data-variant="danger"]):not([data-hovered]) {background-color: var(--surface-pressed-color);}
-.t22.t22[data-pressed]:not([data-variant="success"]):not([data-disabled]):not([data-variant="danger"]):not([data-hovered])>* {--context-fill-color: var(--surface-pressed-color); --context-fill-color-rgb: var(--surface-pressed-color-rgb);}
-.t22.t22[data-variant="success"][data-pressed]:not([data-disabled]):not([data-hovered]) {background-color: var(--success-color);}
-.t22.t22[data-variant="success"][data-pressed]:not([data-disabled]):not([data-hovered])>* {--context-fill-color: var(--success-color); --context-fill-color-rgb: var(--success-color-rgb);}
-.t22.t22[data-disabled][data-pressed]:not([data-variant="success"]):not([data-variant="danger"]):not([data-hovered]) {background-color: var(--surface-disabled-color);}
-.t22.t22[data-disabled][data-pressed]:not([data-variant="success"]):not([data-variant="danger"]):not([data-hovered])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
-.t22.t22[data-variant="success"][data-disabled][data-pressed]:not([data-hovered]) {background-color: var(--surface-disabled-color);}
-.t22.t22[data-variant="success"][data-disabled][data-pressed]:not([data-hovered])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
-.t22.t22[data-variant="danger"][data-pressed]:not([data-disabled]):not([data-hovered]) {background-color: var(--surface-pressed-color);}
-.t22.t22[data-variant="danger"][data-pressed]:not([data-disabled]):not([data-hovered])>* {--context-fill-color: var(--surface-pressed-color); --context-fill-color-rgb: var(--surface-pressed-color-rgb);}
-.t22.t22[data-disabled][data-variant="danger"][data-pressed]:not([data-hovered]) {background-color: var(--surface-disabled-color);}
-.t22.t22[data-disabled][data-variant="danger"][data-pressed]:not([data-hovered])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
-.t22.t22[data-hovered][data-pressed]:not([data-variant="success"]):not([data-disabled]):not([data-variant="danger"]) {background-color: var(--surface-pressed-color);}
-.t22.t22[data-hovered][data-pressed]:not([data-variant="success"]):not([data-disabled]):not([data-variant="danger"])>* {--context-fill-color: var(--surface-pressed-color); --context-fill-color-rgb: var(--surface-pressed-color-rgb);}
-.t22.t22[data-variant="success"][data-hovered][data-pressed]:not([data-disabled]) {background-color: var(--success-color);}
-.t22.t22[data-variant="success"][data-hovered][data-pressed]:not([data-disabled])>* {--context-fill-color: var(--success-color); --context-fill-color-rgb: var(--success-color-rgb);}
-.t22.t22[data-disabled][data-hovered][data-pressed]:not([data-variant="success"]):not([data-variant="danger"]) {background-color: var(--surface-disabled-color);}
-.t22.t22[data-disabled][data-hovered][data-pressed]:not([data-variant="success"]):not([data-variant="danger"])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
-.t22.t22[data-variant="success"][data-disabled][data-hovered][data-pressed] {background-color: var(--surface-disabled-color);}
-.t22.t22[data-variant="success"][data-disabled][data-hovered][data-pressed]>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
-.t22.t22[data-variant="danger"][data-hovered][data-pressed]:not([data-disabled]) {background-color: var(--danger-hover-color);}
-.t22.t22[data-variant="danger"][data-hovered][data-pressed]:not([data-disabled])>* {--context-fill-color: var(--danger-hover-color); --context-fill-color-rgb: var(--danger-hover-color-rgb);}
-.t22.t22[data-disabled][data-variant="danger"][data-hovered][data-pressed] {background-color: var(--danger-hover-color);}
-.t22.t22[data-disabled][data-variant="danger"][data-hovered][data-pressed]>* {--context-fill-color: var(--danger-hover-color); --context-fill-color-rgb: var(--danger-hover-color-rgb);}
-@media (min-width: 1200px) {.t22.t22:not([data-variant="borderless"]):not([data-hovered]):not([data-error]):not([data-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
-@media (min-width: 1200px) {.t22.t22[data-variant="borderless"]:not([data-hovered]):not([data-error]):not([data-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
-@media (min-width: 1200px) {.t22.t22[data-hovered]:not([data-variant="borderless"]):not([data-error]):not([data-focused]) {border: calc(2 * var(--border-width)) solid var(--border-hover-color);}}
-@media (min-width: 1200px) {.t22.t22[data-variant="borderless"][data-hovered]:not([data-error]):not([data-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
-@media (min-width: 1200px) {.t22.t22[data-error]:not([data-variant="borderless"]):not([data-hovered]):not([data-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
-@media (min-width: 1200px) {.t22.t22[data-variant="borderless"][data-error]:not([data-hovered]):not([data-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
-@media (min-width: 1200px) {.t22.t22[data-hovered][data-error]:not([data-variant="borderless"]):not([data-focused]) {border: calc(2 * var(--border-width)) solid var(--border-hover-color);}}
-@media (min-width: 1200px) {.t22.t22[data-variant="borderless"][data-hovered][data-error]:not([data-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
-@media (min-width: 1200px) {.t22.t22[data-focused]:not([data-variant="borderless"]):not([data-hovered]):not([data-error]) {border: calc(3 * var(--border-width)) solid var(--primary-color);}}
-@media (min-width: 1200px) {.t22.t22[data-variant="borderless"][data-focused]:not([data-hovered]):not([data-error]) {border: calc(3 * var(--border-width)) solid var(--primary-color);}}
-@media (min-width: 1200px) {.t22.t22[data-hovered][data-focused]:not([data-variant="borderless"]):not([data-error]) {border: calc(2 * var(--border-width)) solid var(--border-hover-color);}}
-@media (min-width: 1200px) {.t22.t22[data-variant="borderless"][data-hovered][data-focused]:not([data-error]) {border: calc(3 * var(--border-width)) solid var(--primary-color);}}
-@media (min-width: 1200px) {.t22.t22[data-error][data-focused]:not([data-variant="borderless"]):not([data-hovered]) {border: calc(3 * var(--border-width)) solid var(--danger-color);}}
-@media (min-width: 1200px) {.t22.t22[data-variant="borderless"][data-error][data-focused]:not([data-hovered]) {border: calc(3 * var(--border-width)) solid var(--danger-color);}}
-@media (min-width: 1200px) {.t22.t22[data-hovered][data-error][data-focused]:not([data-variant="borderless"]) {border: calc(2 * var(--border-width)) solid var(--border-hover-color);}}
-@media (min-width: 1200px) {.t22.t22[data-variant="borderless"][data-hovered][data-error][data-focused] {border: calc(3 * var(--border-width)) solid var(--danger-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22:not([data-variant="borderless"]):not([data-hovered]):not([data-error]):not([data-focused]) {border: var(--border-width) solid var(--border-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="borderless"]:not([data-hovered]):not([data-error]):not([data-focused]) {border: var(--border-width) solid var(--border-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-hovered]:not([data-variant="borderless"]):not([data-error]):not([data-focused]) {border: var(--border-width) solid var(--border-hover-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="borderless"][data-hovered]:not([data-error]):not([data-focused]) {border: var(--border-width) solid var(--border-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-error]:not([data-variant="borderless"]):not([data-hovered]):not([data-focused]) {border: var(--border-width) solid var(--border-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="borderless"][data-error]:not([data-hovered]):not([data-focused]) {border: var(--border-width) solid var(--border-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-hovered][data-error]:not([data-variant="borderless"]):not([data-focused]) {border: var(--border-width) solid var(--border-hover-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="borderless"][data-hovered][data-error]:not([data-focused]) {border: var(--border-width) solid var(--border-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-focused]:not([data-variant="borderless"]):not([data-hovered]):not([data-error]) {border: calc(2 * var(--border-width)) solid var(--primary-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="borderless"][data-focused]:not([data-hovered]):not([data-error]) {border: calc(2 * var(--border-width)) solid var(--primary-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-hovered][data-focused]:not([data-variant="borderless"]):not([data-error]) {border: var(--border-width) solid var(--border-hover-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="borderless"][data-hovered][data-focused]:not([data-error]) {border: calc(2 * var(--border-width)) solid var(--primary-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-error][data-focused]:not([data-variant="borderless"]):not([data-hovered]) {border: calc(2 * var(--border-width)) solid var(--danger-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="borderless"][data-error][data-focused]:not([data-hovered]) {border: calc(2 * var(--border-width)) solid var(--danger-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-hovered][data-error][data-focused]:not([data-variant="borderless"]) {border: var(--border-width) solid var(--border-hover-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="borderless"][data-hovered][data-error][data-focused] {border: calc(2 * var(--border-width)) solid var(--danger-color);}}
-@media (max-width: 767px) {.t22.t22:not([data-variant="borderless"]):not([data-hovered]):not([data-error]):not([data-focused]) {border: var(--border-width) none var(--border-color);}}
-@media (max-width: 767px) {.t22.t22[data-variant="borderless"]:not([data-hovered]):not([data-error]):not([data-focused]) {border: var(--border-width) none var(--border-color);}}
-@media (max-width: 767px) {.t22.t22[data-hovered]:not([data-variant="borderless"]):not([data-error]):not([data-focused]) {border: var(--border-width) solid var(--border-hover-color);}}
-@media (max-width: 767px) {.t22.t22[data-variant="borderless"][data-hovered]:not([data-error]):not([data-focused]) {border: var(--border-width) none var(--border-color);}}
-@media (max-width: 767px) {.t22.t22[data-error]:not([data-variant="borderless"]):not([data-hovered]):not([data-focused]) {border: var(--border-width) none var(--border-color);}}
-@media (max-width: 767px) {.t22.t22[data-variant="borderless"][data-error]:not([data-hovered]):not([data-focused]) {border: var(--border-width) none var(--border-color);}}
-@media (max-width: 767px) {.t22.t22[data-hovered][data-error]:not([data-variant="borderless"]):not([data-focused]) {border: var(--border-width) solid var(--border-hover-color);}}
-@media (max-width: 767px) {.t22.t22[data-variant="borderless"][data-hovered][data-error]:not([data-focused]) {border: var(--border-width) none var(--border-color);}}
-@media (max-width: 767px) {.t22.t22[data-focused]:not([data-variant="borderless"]):not([data-hovered]):not([data-error]) {border: var(--border-width) solid var(--primary-color);}}
-@media (max-width: 767px) {.t22.t22[data-variant="borderless"][data-focused]:not([data-hovered]):not([data-error]) {border: var(--border-width) solid var(--primary-color);}}
-@media (max-width: 767px) {.t22.t22[data-hovered][data-focused]:not([data-variant="borderless"]):not([data-error]) {border: var(--border-width) solid var(--border-hover-color);}}
-@media (max-width: 767px) {.t22.t22[data-variant="borderless"][data-hovered][data-focused]:not([data-error]) {border: var(--border-width) solid var(--primary-color);}}
-@media (max-width: 767px) {.t22.t22[data-error][data-focused]:not([data-variant="borderless"]):not([data-hovered]) {border: var(--border-width) solid var(--danger-color);}}
-@media (max-width: 767px) {.t22.t22[data-variant="borderless"][data-error][data-focused]:not([data-hovered]) {border: var(--border-width) solid var(--danger-color);}}
-@media (max-width: 767px) {.t22.t22[data-hovered][data-error][data-focused]:not([data-variant="borderless"]) {border: var(--border-width) solid var(--border-hover-color);}}
-@media (max-width: 767px) {.t22.t22[data-variant="borderless"][data-hovered][data-error][data-focused] {border: var(--border-width) solid var(--danger-color);}}
-@media (min-width: 1200px) {.t22.t22>* {--context-radius: calc(2 * var(--radius));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t22.t22>* {--context-radius: var(--radius);}}
-@media (max-width: 767px) {.t22.t22>* {--context-radius: calc(0.5 * var(--radius));}}"
+"@media (min-width: 1200px) {.t24.t24 [data-element="Header"] {--font-size: var(--h2-font-size, var(--default-font-size, inherit)); font-size: var(--h2-font-size, var(--default-font-size, inherit)); --line-height: var(--h2-line-height, var(--default-line-height, inherit)); line-height: var(--h2-line-height, var(--default-line-height, inherit)); --letter-spacing: var(--h2-letter-spacing, var(--default-letter-spacing, inherit)); letter-spacing: var(--h2-letter-spacing, var(--default-letter-spacing, inherit)); --font-weight: var(--h2-font-weight, var(--default-font-weight, inherit)); font-weight: var(--h2-font-weight, var(--default-font-weight, inherit)); --font-style: var(--h2-font-style, var(--default-font-style, inherit)); font-style: var(--h2-font-style, var(--default-font-style, inherit)); --text-transform: var(--h2-text-transform, var(--default-text-transform, inherit)); text-transform: var(--h2-text-transform, var(--default-text-transform, inherit)); --font-family: var(--h2-font-family, var(--default-font-family, var(--font, NonexistentFontName))), var(--font, sans-serif); font-family: var(--h2-font-family, var(--default-font-family, var(--font, NonexistentFontName))), var(--font, sans-serif); --bold-font-weight: var(--h2-bold-font-weight, var(--default-bold-font-weight, inherit)); --icon-size: var(--h2-icon-size, var(--default-icon-size, inherit)); margin-top: 0; margin-right: 0; margin-bottom: calc(2 * var(--gap)); margin-left: 0;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24 [data-element="Header"] {--font-size: var(--h3-font-size, var(--default-font-size, inherit)); font-size: var(--h3-font-size, var(--default-font-size, inherit)); --line-height: var(--h3-line-height, var(--default-line-height, inherit)); line-height: var(--h3-line-height, var(--default-line-height, inherit)); --letter-spacing: var(--h3-letter-spacing, var(--default-letter-spacing, inherit)); letter-spacing: var(--h3-letter-spacing, var(--default-letter-spacing, inherit)); --font-weight: var(--h3-font-weight, var(--default-font-weight, inherit)); font-weight: var(--h3-font-weight, var(--default-font-weight, inherit)); --font-style: var(--h3-font-style, var(--default-font-style, inherit)); font-style: var(--h3-font-style, var(--default-font-style, inherit)); --text-transform: var(--h3-text-transform, var(--default-text-transform, inherit)); text-transform: var(--h3-text-transform, var(--default-text-transform, inherit)); --font-family: var(--h3-font-family, var(--default-font-family, var(--font, NonexistentFontName))), var(--font, sans-serif); font-family: var(--h3-font-family, var(--default-font-family, var(--font, NonexistentFontName))), var(--font, sans-serif); --bold-font-weight: var(--h3-bold-font-weight, var(--default-bold-font-weight, inherit)); --icon-size: var(--h3-icon-size, var(--default-icon-size, inherit)); margin-top: 0; margin-right: 0; margin-bottom: var(--gap); margin-left: 0;}}
+@media (max-width: 767px) {.t24.t24 [data-element="Header"] {--font-size: var(--h4-font-size, var(--default-font-size, inherit)); font-size: var(--h4-font-size, var(--default-font-size, inherit)); --line-height: var(--h4-line-height, var(--default-line-height, inherit)); line-height: var(--h4-line-height, var(--default-line-height, inherit)); --letter-spacing: var(--h4-letter-spacing, var(--default-letter-spacing, inherit)); letter-spacing: var(--h4-letter-spacing, var(--default-letter-spacing, inherit)); --font-weight: var(--h4-font-weight, var(--default-font-weight, inherit)); font-weight: var(--h4-font-weight, var(--default-font-weight, inherit)); --font-style: var(--h4-font-style, var(--default-font-style, inherit)); font-style: var(--h4-font-style, var(--default-font-style, inherit)); --text-transform: var(--h4-text-transform, var(--default-text-transform, inherit)); text-transform: var(--h4-text-transform, var(--default-text-transform, inherit)); --font-family: var(--h4-font-family, var(--default-font-family, var(--font, NonexistentFontName))), var(--font, sans-serif); font-family: var(--h4-font-family, var(--default-font-family, var(--font, NonexistentFontName))), var(--font, sans-serif); --bold-font-weight: var(--h4-bold-font-weight, var(--default-bold-font-weight, inherit)); --icon-size: var(--h4-icon-size, var(--default-icon-size, inherit)); margin-top: 0; margin-right: 0; margin-bottom: calc(0.5 * var(--gap)); margin-left: 0;}}
+.t24.t24:not([data-hovered]):not([data-variant="danger"]) [data-element="Header"] {color: var(--text-primary-color); --current-color: var(--text-primary-color); --current-color-rgb: var(--text-primary-color-rgb);}
+.t24.t24[data-hovered]:not([data-variant="danger"]) [data-element="Header"] {color: var(--text-primary-hover-color); --current-color: var(--text-primary-hover-color); --current-color-rgb: var(--text-primary-hover-color-rgb);}
+.t24.t24[data-variant="danger"]:not([data-hovered]) [data-element="Header"] {color: var(--danger-color); --current-color: var(--danger-color); --current-color-rgb: var(--danger-color-rgb);}
+.t24.t24[data-hovered][data-variant="danger"] [data-element="Header"] {color: var(--text-primary-hover-color); --current-color: var(--text-primary-hover-color); --current-color-rgb: var(--text-primary-hover-color-rgb);}
+@media (min-width: 1200px) {.t24.t24 [data-element="Content"] {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24 [data-element="Content"] {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (max-width: 767px) {.t24.t24 [data-element="Content"] {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
+.t24.t24:not([data-highlighted]):not([data-disabled]) [data-element="Content"] {color: var(--text-color); --current-color: var(--text-color); --current-color-rgb: var(--text-color-rgb);}
+.t24.t24[data-highlighted]:not([data-disabled]) [data-element="Content"] {color: var(--text-highlighted-color); --current-color: var(--text-highlighted-color); --current-color-rgb: var(--text-highlighted-color-rgb);}
+.t24.t24[data-disabled]:not([data-highlighted]) [data-element="Content"] {color: var(--text-disabled-color); --current-color: var(--text-disabled-color); --current-color-rgb: var(--text-disabled-color-rgb);}
+.t24.t24[data-highlighted][data-disabled] [data-element="Content"] {color: var(--text-disabled-color); --current-color: var(--text-disabled-color); --current-color-rgb: var(--text-disabled-color-rgb);}
+@media (min-width: 1200px) {.t24.t24:not([data-expanded]) [data-element="Footer"] {display: flex; gap: calc(2 * var(--gap));}}
+@media (min-width: 1200px) {.t24.t24[data-expanded] [data-element="Footer"] {display: flex; gap: calc(2 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24:not([data-expanded]) [data-element="Footer"] {display: flex; gap: var(--gap);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-expanded] [data-element="Footer"] {display: flex; gap: var(--gap);}}
+@media (max-width: 767px) {.t24.t24:not([data-expanded]) [data-element="Footer"] {display: none;}}
+@media (max-width: 767px) {.t24.t24[data-expanded] [data-element="Footer"] {display: flex; gap: calc(0.5 * var(--gap));}}
+@media (max-width: 767px) {.t24.t24:not([data-expanded]) [data-element="Footer"] > *:not(:last-child) {margin-bottom: calc(0.5 * var(--gap));}}
+@media (min-width: 1200px) {.t24.t24:not([data-compact]) [data-element="Footer"] {padding-top: calc(2 * var(--gap));}}
+@media (min-width: 1200px) {.t24.t24[data-compact] [data-element="Footer"] {padding-top: var(--gap);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24:not([data-compact]) [data-element="Footer"] {padding-top: var(--gap);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-compact] [data-element="Footer"] {padding-top: calc(0.5 * var(--gap));}}
+@media (max-width: 767px) {.t24.t24:not([data-compact]) [data-element="Footer"] {padding-top: calc(0.5 * var(--gap));}}
+@media (max-width: 767px) {.t24.t24[data-compact] [data-element="Footer"] {padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;}}
+@media (min-width: 1200px) {.t24.t24 {display: grid; gap: calc(3 * var(--gap)); --local-radius: calc(2 * var(--radius)); border-radius: var(--local-radius);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24 {display: flex; gap: calc(2 * var(--gap)); --local-radius: var(--radius); border-radius: var(--local-radius);}}
+@media (max-width: 767px) {.t24.t24 {display: block; --local-radius: calc(0.5 * var(--radius)); border-radius: var(--local-radius);}}
+@media (max-width: 767px) {.t24.t24 > *:not(:last-child) {margin-bottom: var(--gap);}}
+@media (min-width: 1200px) {.t24.t24:not([data-variant="compact"]):not([data-pressed]):not([data-disabled]):not([data-hovered]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
+@media (min-width: 1200px) {.t24.t24[data-variant="compact"]:not([data-pressed]):not([data-disabled]):not([data-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (min-width: 1200px) {.t24.t24[data-pressed]:not([data-variant="compact"]):not([data-disabled]):not([data-hovered]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
+@media (min-width: 1200px) {.t24.t24[data-variant="compact"][data-pressed]:not([data-disabled]):not([data-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (min-width: 1200px) {.t24.t24[data-disabled]:not([data-variant="compact"]):not([data-pressed]):not([data-hovered]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
+@media (min-width: 1200px) {.t24.t24[data-variant="compact"][data-disabled]:not([data-pressed]):not([data-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (min-width: 1200px) {.t24.t24[data-pressed][data-disabled]:not([data-variant="compact"]):not([data-hovered]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
+@media (min-width: 1200px) {.t24.t24[data-variant="compact"][data-pressed][data-disabled]:not([data-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (min-width: 1200px) {.t24.t24[data-hovered]:not([data-variant="compact"]):not([data-pressed]):not([data-disabled]) {padding-top: calc(5 * var(--gap)); padding-right: calc(5 * var(--gap)); padding-bottom: calc(5 * var(--gap)); padding-left: calc(5 * var(--gap));}}
+@media (min-width: 1200px) {.t24.t24[data-variant="compact"][data-hovered]:not([data-pressed]):not([data-disabled]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (min-width: 1200px) {.t24.t24[data-pressed][data-hovered]:not([data-variant="compact"]):not([data-disabled]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
+@media (min-width: 1200px) {.t24.t24[data-variant="compact"][data-pressed][data-hovered]:not([data-disabled]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (min-width: 1200px) {.t24.t24[data-disabled][data-hovered]:not([data-variant="compact"]):not([data-pressed]) {padding-top: calc(5 * var(--gap)); padding-right: calc(5 * var(--gap)); padding-bottom: calc(5 * var(--gap)); padding-left: calc(5 * var(--gap));}}
+@media (min-width: 1200px) {.t24.t24[data-variant="compact"][data-disabled][data-hovered]:not([data-pressed]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (min-width: 1200px) {.t24.t24[data-pressed][data-disabled][data-hovered]:not([data-variant="compact"]) {padding-top: calc(5 * var(--gap)); padding-right: calc(5 * var(--gap)); padding-bottom: calc(5 * var(--gap)); padding-left: calc(5 * var(--gap));}}
+@media (min-width: 1200px) {.t24.t24[data-variant="compact"][data-pressed][data-disabled][data-hovered] {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24:not([data-variant="compact"]):not([data-pressed]):not([data-disabled]):not([data-hovered]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-variant="compact"]:not([data-pressed]):not([data-disabled]):not([data-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-pressed]:not([data-variant="compact"]):not([data-disabled]):not([data-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-variant="compact"][data-pressed]:not([data-disabled]):not([data-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-disabled]:not([data-variant="compact"]):not([data-pressed]):not([data-hovered]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-variant="compact"][data-disabled]:not([data-pressed]):not([data-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-pressed][data-disabled]:not([data-variant="compact"]):not([data-hovered]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-variant="compact"][data-pressed][data-disabled]:not([data-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-hovered]:not([data-variant="compact"]):not([data-pressed]):not([data-disabled]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-variant="compact"][data-hovered]:not([data-pressed]):not([data-disabled]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-pressed][data-hovered]:not([data-variant="compact"]):not([data-disabled]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-variant="compact"][data-pressed][data-hovered]:not([data-disabled]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-disabled][data-hovered]:not([data-variant="compact"]):not([data-pressed]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-variant="compact"][data-disabled][data-hovered]:not([data-pressed]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-pressed][data-disabled][data-hovered]:not([data-variant="compact"]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-variant="compact"][data-pressed][data-disabled][data-hovered] {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (max-width: 767px) {.t24.t24:not([data-variant="compact"]):not([data-pressed]):not([data-disabled]):not([data-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (max-width: 767px) {.t24.t24[data-variant="compact"]:not([data-pressed]):not([data-disabled]):not([data-hovered]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
+@media (max-width: 767px) {.t24.t24[data-pressed]:not([data-variant="compact"]):not([data-disabled]):not([data-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (max-width: 767px) {.t24.t24[data-variant="compact"][data-pressed]:not([data-disabled]):not([data-hovered]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
+@media (max-width: 767px) {.t24.t24[data-disabled]:not([data-variant="compact"]):not([data-pressed]):not([data-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (max-width: 767px) {.t24.t24[data-variant="compact"][data-disabled]:not([data-pressed]):not([data-hovered]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
+@media (max-width: 767px) {.t24.t24[data-pressed][data-disabled]:not([data-variant="compact"]):not([data-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (max-width: 767px) {.t24.t24[data-variant="compact"][data-pressed][data-disabled]:not([data-hovered]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
+@media (max-width: 767px) {.t24.t24[data-hovered]:not([data-variant="compact"]):not([data-pressed]):not([data-disabled]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
+@media (max-width: 767px) {.t24.t24[data-variant="compact"][data-hovered]:not([data-pressed]):not([data-disabled]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
+@media (max-width: 767px) {.t24.t24[data-pressed][data-hovered]:not([data-variant="compact"]):not([data-disabled]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (max-width: 767px) {.t24.t24[data-variant="compact"][data-pressed][data-hovered]:not([data-disabled]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
+@media (max-width: 767px) {.t24.t24[data-disabled][data-hovered]:not([data-variant="compact"]):not([data-pressed]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
+@media (max-width: 767px) {.t24.t24[data-variant="compact"][data-disabled][data-hovered]:not([data-pressed]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
+@media (max-width: 767px) {.t24.t24[data-pressed][data-disabled][data-hovered]:not([data-variant="compact"]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
+@media (max-width: 767px) {.t24.t24[data-variant="compact"][data-pressed][data-disabled][data-hovered] {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
+@media (min-width: 1200px) {.t24.t24:not([data-hovered]):not([data-focused]):not([data-disabled]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1200px;}}
+@media (min-width: 1200px) {.t24.t24[data-hovered]:not([data-focused]):not([data-disabled]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1300px;}}
+@media (min-width: 1200px) {.t24.t24[data-focused]:not([data-hovered]):not([data-disabled]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1300px;}}
+@media (min-width: 1200px) {.t24.t24[data-hovered][data-focused]:not([data-disabled]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1300px;}}
+@media (min-width: 1200px) {.t24.t24[data-disabled]:not([data-hovered]):not([data-focused]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1200px;}}
+@media (min-width: 1200px) {.t24.t24[data-hovered][data-disabled]:not([data-focused]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1200px;}}
+@media (min-width: 1200px) {.t24.t24[data-focused][data-disabled]:not([data-hovered]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1200px;}}
+@media (min-width: 1200px) {.t24.t24[data-hovered][data-focused][data-disabled]:not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1200px;}}
+@media (min-width: 1200px) {.t24.t24[data-expanded]:not([data-hovered]):not([data-focused]):not([data-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 1200px) {.t24.t24[data-hovered][data-expanded]:not([data-focused]):not([data-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1300px;}}
+@media (min-width: 1200px) {.t24.t24[data-focused][data-expanded]:not([data-hovered]):not([data-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1300px;}}
+@media (min-width: 1200px) {.t24.t24[data-hovered][data-focused][data-expanded]:not([data-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1300px;}}
+@media (min-width: 1200px) {.t24.t24[data-disabled][data-expanded]:not([data-hovered]):not([data-focused]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 1200px) {.t24.t24[data-hovered][data-disabled][data-expanded]:not([data-focused]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 1200px) {.t24.t24[data-focused][data-disabled][data-expanded]:not([data-hovered]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 1200px) {.t24.t24[data-hovered][data-focused][data-disabled][data-expanded]:not([data-size="large"]) {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 1200px) {.t24.t24[data-size="large"]:not([data-hovered]):not([data-focused]):not([data-disabled]):not([data-expanded]) {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 1200px) {.t24.t24[data-hovered][data-size="large"]:not([data-focused]):not([data-disabled]):not([data-expanded]) {width: auto; min-width: initial; max-width: 1300px;}}
+@media (min-width: 1200px) {.t24.t24[data-focused][data-size="large"]:not([data-hovered]):not([data-disabled]):not([data-expanded]) {width: auto; min-width: initial; max-width: 1300px;}}
+@media (min-width: 1200px) {.t24.t24[data-hovered][data-focused][data-size="large"]:not([data-disabled]):not([data-expanded]) {width: auto; min-width: initial; max-width: 1300px;}}
+@media (min-width: 1200px) {.t24.t24[data-disabled][data-size="large"]:not([data-hovered]):not([data-focused]):not([data-expanded]) {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 1200px) {.t24.t24[data-hovered][data-disabled][data-size="large"]:not([data-focused]):not([data-expanded]) {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 1200px) {.t24.t24[data-focused][data-disabled][data-size="large"]:not([data-hovered]):not([data-expanded]) {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 1200px) {.t24.t24[data-hovered][data-focused][data-disabled][data-size="large"]:not([data-expanded]) {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 1200px) {.t24.t24[data-expanded][data-size="large"]:not([data-hovered]):not([data-focused]):not([data-disabled]) {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 1200px) {.t24.t24[data-hovered][data-expanded][data-size="large"]:not([data-focused]):not([data-disabled]) {width: auto; min-width: initial; max-width: 1300px;}}
+@media (min-width: 1200px) {.t24.t24[data-focused][data-expanded][data-size="large"]:not([data-hovered]):not([data-disabled]) {width: auto; min-width: initial; max-width: 1300px;}}
+@media (min-width: 1200px) {.t24.t24[data-hovered][data-focused][data-expanded][data-size="large"]:not([data-disabled]) {width: auto; min-width: initial; max-width: 1300px;}}
+@media (min-width: 1200px) {.t24.t24[data-disabled][data-expanded][data-size="large"]:not([data-hovered]):not([data-focused]) {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 1200px) {.t24.t24[data-hovered][data-disabled][data-expanded][data-size="large"]:not([data-focused]) {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 1200px) {.t24.t24[data-focused][data-disabled][data-expanded][data-size="large"]:not([data-hovered]) {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 1200px) {.t24.t24[data-hovered][data-focused][data-disabled][data-expanded][data-size="large"] {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24:not([data-hovered]):not([data-focused]):not([data-disabled]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 800px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-hovered]:not([data-focused]):not([data-disabled]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 900px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-focused]:not([data-hovered]):not([data-disabled]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 900px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-hovered][data-focused]:not([data-disabled]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 900px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-disabled]:not([data-hovered]):not([data-focused]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 800px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-hovered][data-disabled]:not([data-focused]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 800px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-focused][data-disabled]:not([data-hovered]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 800px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-hovered][data-focused][data-disabled]:not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 800px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-expanded]:not([data-hovered]):not([data-focused]):not([data-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1000px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-hovered][data-expanded]:not([data-focused]):not([data-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 900px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-focused][data-expanded]:not([data-hovered]):not([data-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 900px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-hovered][data-focused][data-expanded]:not([data-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 900px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-disabled][data-expanded]:not([data-hovered]):not([data-focused]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1000px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-hovered][data-disabled][data-expanded]:not([data-focused]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1000px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-focused][data-disabled][data-expanded]:not([data-hovered]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1000px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-hovered][data-focused][data-disabled][data-expanded]:not([data-size="large"]) {width: auto; min-width: initial; max-width: 1000px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-size="large"]:not([data-hovered]):not([data-focused]):not([data-disabled]):not([data-expanded]) {width: auto; min-width: initial; max-width: 1000px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-hovered][data-size="large"]:not([data-focused]):not([data-disabled]):not([data-expanded]) {width: auto; min-width: initial; max-width: 900px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-focused][data-size="large"]:not([data-hovered]):not([data-disabled]):not([data-expanded]) {width: auto; min-width: initial; max-width: 900px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-hovered][data-focused][data-size="large"]:not([data-disabled]):not([data-expanded]) {width: auto; min-width: initial; max-width: 900px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-disabled][data-size="large"]:not([data-hovered]):not([data-focused]):not([data-expanded]) {width: auto; min-width: initial; max-width: 1000px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-hovered][data-disabled][data-size="large"]:not([data-focused]):not([data-expanded]) {width: auto; min-width: initial; max-width: 1000px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-focused][data-disabled][data-size="large"]:not([data-hovered]):not([data-expanded]) {width: auto; min-width: initial; max-width: 1000px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-hovered][data-focused][data-disabled][data-size="large"]:not([data-expanded]) {width: auto; min-width: initial; max-width: 1000px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-expanded][data-size="large"]:not([data-hovered]):not([data-focused]):not([data-disabled]) {width: auto; min-width: initial; max-width: 1000px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-hovered][data-expanded][data-size="large"]:not([data-focused]):not([data-disabled]) {width: auto; min-width: initial; max-width: 900px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-focused][data-expanded][data-size="large"]:not([data-hovered]):not([data-disabled]) {width: auto; min-width: initial; max-width: 900px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-hovered][data-focused][data-expanded][data-size="large"]:not([data-disabled]) {width: auto; min-width: initial; max-width: 900px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-disabled][data-expanded][data-size="large"]:not([data-hovered]):not([data-focused]) {width: auto; min-width: initial; max-width: 1000px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-hovered][data-disabled][data-expanded][data-size="large"]:not([data-focused]) {width: auto; min-width: initial; max-width: 1000px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-focused][data-disabled][data-expanded][data-size="large"]:not([data-hovered]) {width: auto; min-width: initial; max-width: 1000px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-hovered][data-focused][data-disabled][data-expanded][data-size="large"] {width: auto; min-width: initial; max-width: 1000px;}}
+@media (max-width: 767px) {.t24.t24:not([data-hovered]):not([data-focused]):not([data-disabled]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-hovered]:not([data-focused]):not([data-disabled]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-focused]:not([data-hovered]):not([data-disabled]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-hovered][data-focused]:not([data-disabled]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-disabled]:not([data-hovered]):not([data-focused]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-hovered][data-disabled]:not([data-focused]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-focused][data-disabled]:not([data-hovered]):not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-hovered][data-focused][data-disabled]:not([data-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-expanded]:not([data-hovered]):not([data-focused]):not([data-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-hovered][data-expanded]:not([data-focused]):not([data-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-focused][data-expanded]:not([data-hovered]):not([data-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-hovered][data-focused][data-expanded]:not([data-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-disabled][data-expanded]:not([data-hovered]):not([data-focused]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-hovered][data-disabled][data-expanded]:not([data-focused]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-focused][data-disabled][data-expanded]:not([data-hovered]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-hovered][data-focused][data-disabled][data-expanded]:not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-size="large"]:not([data-hovered]):not([data-focused]):not([data-disabled]):not([data-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-hovered][data-size="large"]:not([data-focused]):not([data-disabled]):not([data-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-focused][data-size="large"]:not([data-hovered]):not([data-disabled]):not([data-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-hovered][data-focused][data-size="large"]:not([data-disabled]):not([data-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-disabled][data-size="large"]:not([data-hovered]):not([data-focused]):not([data-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-hovered][data-disabled][data-size="large"]:not([data-focused]):not([data-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-focused][data-disabled][data-size="large"]:not([data-hovered]):not([data-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-hovered][data-focused][data-disabled][data-size="large"]:not([data-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-expanded][data-size="large"]:not([data-hovered]):not([data-focused]):not([data-disabled]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-hovered][data-expanded][data-size="large"]:not([data-focused]):not([data-disabled]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-focused][data-expanded][data-size="large"]:not([data-hovered]):not([data-disabled]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-hovered][data-focused][data-expanded][data-size="large"]:not([data-disabled]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-disabled][data-expanded][data-size="large"]:not([data-hovered]):not([data-focused]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-hovered][data-disabled][data-expanded][data-size="large"]:not([data-focused]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-focused][data-disabled][data-expanded][data-size="large"]:not([data-hovered]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t24.t24[data-hovered][data-focused][data-disabled][data-expanded][data-size="large"] {width: auto; min-width: initial; max-width: 100%;}}
+.t24.t24:not([data-variant="success"]):not([data-disabled]):not([data-variant="danger"]):not([data-hovered]):not([data-pressed]) {background-color: var(--surface-color);}
+.t24.t24:not([data-variant="success"]):not([data-disabled]):not([data-variant="danger"]):not([data-hovered]):not([data-pressed])>* {--context-fill-color: var(--surface-color); --context-fill-color-rgb: var(--surface-color-rgb);}
+.t24.t24[data-variant="success"]:not([data-disabled]):not([data-hovered]):not([data-pressed]) {background-color: var(--success-color);}
+.t24.t24[data-variant="success"]:not([data-disabled]):not([data-hovered]):not([data-pressed])>* {--context-fill-color: var(--success-color); --context-fill-color-rgb: var(--success-color-rgb);}
+.t24.t24[data-disabled]:not([data-variant="success"]):not([data-variant="danger"]):not([data-hovered]):not([data-pressed]) {background-color: var(--surface-disabled-color);}
+.t24.t24[data-disabled]:not([data-variant="success"]):not([data-variant="danger"]):not([data-hovered]):not([data-pressed])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
+.t24.t24[data-variant="success"][data-disabled]:not([data-hovered]):not([data-pressed]) {background-color: var(--surface-disabled-color);}
+.t24.t24[data-variant="success"][data-disabled]:not([data-hovered]):not([data-pressed])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
+.t24.t24[data-variant="danger"]:not([data-disabled]):not([data-hovered]):not([data-pressed]) {background-color: var(--surface-color);}
+.t24.t24[data-variant="danger"]:not([data-disabled]):not([data-hovered]):not([data-pressed])>* {--context-fill-color: var(--surface-color); --context-fill-color-rgb: var(--surface-color-rgb);}
+.t24.t24[data-disabled][data-variant="danger"]:not([data-hovered]):not([data-pressed]) {background-color: var(--surface-disabled-color);}
+.t24.t24[data-disabled][data-variant="danger"]:not([data-hovered]):not([data-pressed])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
+.t24.t24[data-hovered]:not([data-variant="success"]):not([data-disabled]):not([data-variant="danger"]):not([data-pressed]) {background-color: var(--surface-hover-color);}
+.t24.t24[data-hovered]:not([data-variant="success"]):not([data-disabled]):not([data-variant="danger"]):not([data-pressed])>* {--context-fill-color: var(--surface-hover-color); --context-fill-color-rgb: var(--surface-hover-color-rgb);}
+.t24.t24[data-variant="success"][data-hovered]:not([data-disabled]):not([data-pressed]) {background-color: var(--success-color);}
+.t24.t24[data-variant="success"][data-hovered]:not([data-disabled]):not([data-pressed])>* {--context-fill-color: var(--success-color); --context-fill-color-rgb: var(--success-color-rgb);}
+.t24.t24[data-disabled][data-hovered]:not([data-variant="success"]):not([data-variant="danger"]):not([data-pressed]) {background-color: var(--surface-disabled-color);}
+.t24.t24[data-disabled][data-hovered]:not([data-variant="success"]):not([data-variant="danger"]):not([data-pressed])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
+.t24.t24[data-variant="success"][data-disabled][data-hovered]:not([data-pressed]) {background-color: var(--surface-disabled-color);}
+.t24.t24[data-variant="success"][data-disabled][data-hovered]:not([data-pressed])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
+.t24.t24[data-variant="danger"][data-hovered]:not([data-disabled]):not([data-pressed]) {background-color: var(--danger-hover-color);}
+.t24.t24[data-variant="danger"][data-hovered]:not([data-disabled]):not([data-pressed])>* {--context-fill-color: var(--danger-hover-color); --context-fill-color-rgb: var(--danger-hover-color-rgb);}
+.t24.t24[data-disabled][data-variant="danger"][data-hovered]:not([data-pressed]) {background-color: var(--danger-hover-color);}
+.t24.t24[data-disabled][data-variant="danger"][data-hovered]:not([data-pressed])>* {--context-fill-color: var(--danger-hover-color); --context-fill-color-rgb: var(--danger-hover-color-rgb);}
+.t24.t24[data-pressed]:not([data-variant="success"]):not([data-disabled]):not([data-variant="danger"]):not([data-hovered]) {background-color: var(--surface-pressed-color);}
+.t24.t24[data-pressed]:not([data-variant="success"]):not([data-disabled]):not([data-variant="danger"]):not([data-hovered])>* {--context-fill-color: var(--surface-pressed-color); --context-fill-color-rgb: var(--surface-pressed-color-rgb);}
+.t24.t24[data-variant="success"][data-pressed]:not([data-disabled]):not([data-hovered]) {background-color: var(--success-color);}
+.t24.t24[data-variant="success"][data-pressed]:not([data-disabled]):not([data-hovered])>* {--context-fill-color: var(--success-color); --context-fill-color-rgb: var(--success-color-rgb);}
+.t24.t24[data-disabled][data-pressed]:not([data-variant="success"]):not([data-variant="danger"]):not([data-hovered]) {background-color: var(--surface-disabled-color);}
+.t24.t24[data-disabled][data-pressed]:not([data-variant="success"]):not([data-variant="danger"]):not([data-hovered])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
+.t24.t24[data-variant="success"][data-disabled][data-pressed]:not([data-hovered]) {background-color: var(--surface-disabled-color);}
+.t24.t24[data-variant="success"][data-disabled][data-pressed]:not([data-hovered])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
+.t24.t24[data-variant="danger"][data-pressed]:not([data-disabled]):not([data-hovered]) {background-color: var(--surface-pressed-color);}
+.t24.t24[data-variant="danger"][data-pressed]:not([data-disabled]):not([data-hovered])>* {--context-fill-color: var(--surface-pressed-color); --context-fill-color-rgb: var(--surface-pressed-color-rgb);}
+.t24.t24[data-disabled][data-variant="danger"][data-pressed]:not([data-hovered]) {background-color: var(--surface-disabled-color);}
+.t24.t24[data-disabled][data-variant="danger"][data-pressed]:not([data-hovered])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
+.t24.t24[data-hovered][data-pressed]:not([data-variant="success"]):not([data-disabled]):not([data-variant="danger"]) {background-color: var(--surface-pressed-color);}
+.t24.t24[data-hovered][data-pressed]:not([data-variant="success"]):not([data-disabled]):not([data-variant="danger"])>* {--context-fill-color: var(--surface-pressed-color); --context-fill-color-rgb: var(--surface-pressed-color-rgb);}
+.t24.t24[data-variant="success"][data-hovered][data-pressed]:not([data-disabled]) {background-color: var(--success-color);}
+.t24.t24[data-variant="success"][data-hovered][data-pressed]:not([data-disabled])>* {--context-fill-color: var(--success-color); --context-fill-color-rgb: var(--success-color-rgb);}
+.t24.t24[data-disabled][data-hovered][data-pressed]:not([data-variant="success"]):not([data-variant="danger"]) {background-color: var(--surface-disabled-color);}
+.t24.t24[data-disabled][data-hovered][data-pressed]:not([data-variant="success"]):not([data-variant="danger"])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
+.t24.t24[data-variant="success"][data-disabled][data-hovered][data-pressed] {background-color: var(--surface-disabled-color);}
+.t24.t24[data-variant="success"][data-disabled][data-hovered][data-pressed]>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
+.t24.t24[data-variant="danger"][data-hovered][data-pressed]:not([data-disabled]) {background-color: var(--danger-hover-color);}
+.t24.t24[data-variant="danger"][data-hovered][data-pressed]:not([data-disabled])>* {--context-fill-color: var(--danger-hover-color); --context-fill-color-rgb: var(--danger-hover-color-rgb);}
+.t24.t24[data-disabled][data-variant="danger"][data-hovered][data-pressed] {background-color: var(--danger-hover-color);}
+.t24.t24[data-disabled][data-variant="danger"][data-hovered][data-pressed]>* {--context-fill-color: var(--danger-hover-color); --context-fill-color-rgb: var(--danger-hover-color-rgb);}
+@media (min-width: 1200px) {.t24.t24:not([data-variant="borderless"]):not([data-hovered]):not([data-error]):not([data-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
+@media (min-width: 1200px) {.t24.t24[data-variant="borderless"]:not([data-hovered]):not([data-error]):not([data-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
+@media (min-width: 1200px) {.t24.t24[data-hovered]:not([data-variant="borderless"]):not([data-error]):not([data-focused]) {border: calc(2 * var(--border-width)) solid var(--border-hover-color);}}
+@media (min-width: 1200px) {.t24.t24[data-variant="borderless"][data-hovered]:not([data-error]):not([data-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
+@media (min-width: 1200px) {.t24.t24[data-error]:not([data-variant="borderless"]):not([data-hovered]):not([data-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
+@media (min-width: 1200px) {.t24.t24[data-variant="borderless"][data-error]:not([data-hovered]):not([data-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
+@media (min-width: 1200px) {.t24.t24[data-hovered][data-error]:not([data-variant="borderless"]):not([data-focused]) {border: calc(2 * var(--border-width)) solid var(--border-hover-color);}}
+@media (min-width: 1200px) {.t24.t24[data-variant="borderless"][data-hovered][data-error]:not([data-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
+@media (min-width: 1200px) {.t24.t24[data-focused]:not([data-variant="borderless"]):not([data-hovered]):not([data-error]) {border: calc(3 * var(--border-width)) solid var(--primary-color);}}
+@media (min-width: 1200px) {.t24.t24[data-variant="borderless"][data-focused]:not([data-hovered]):not([data-error]) {border: calc(3 * var(--border-width)) solid var(--primary-color);}}
+@media (min-width: 1200px) {.t24.t24[data-hovered][data-focused]:not([data-variant="borderless"]):not([data-error]) {border: calc(2 * var(--border-width)) solid var(--border-hover-color);}}
+@media (min-width: 1200px) {.t24.t24[data-variant="borderless"][data-hovered][data-focused]:not([data-error]) {border: calc(3 * var(--border-width)) solid var(--primary-color);}}
+@media (min-width: 1200px) {.t24.t24[data-error][data-focused]:not([data-variant="borderless"]):not([data-hovered]) {border: calc(3 * var(--border-width)) solid var(--danger-color);}}
+@media (min-width: 1200px) {.t24.t24[data-variant="borderless"][data-error][data-focused]:not([data-hovered]) {border: calc(3 * var(--border-width)) solid var(--danger-color);}}
+@media (min-width: 1200px) {.t24.t24[data-hovered][data-error][data-focused]:not([data-variant="borderless"]) {border: calc(2 * var(--border-width)) solid var(--border-hover-color);}}
+@media (min-width: 1200px) {.t24.t24[data-variant="borderless"][data-hovered][data-error][data-focused] {border: calc(3 * var(--border-width)) solid var(--danger-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24:not([data-variant="borderless"]):not([data-hovered]):not([data-error]):not([data-focused]) {border: var(--border-width) solid var(--border-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-variant="borderless"]:not([data-hovered]):not([data-error]):not([data-focused]) {border: var(--border-width) solid var(--border-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-hovered]:not([data-variant="borderless"]):not([data-error]):not([data-focused]) {border: var(--border-width) solid var(--border-hover-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-variant="borderless"][data-hovered]:not([data-error]):not([data-focused]) {border: var(--border-width) solid var(--border-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-error]:not([data-variant="borderless"]):not([data-hovered]):not([data-focused]) {border: var(--border-width) solid var(--border-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-variant="borderless"][data-error]:not([data-hovered]):not([data-focused]) {border: var(--border-width) solid var(--border-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-hovered][data-error]:not([data-variant="borderless"]):not([data-focused]) {border: var(--border-width) solid var(--border-hover-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-variant="borderless"][data-hovered][data-error]:not([data-focused]) {border: var(--border-width) solid var(--border-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-focused]:not([data-variant="borderless"]):not([data-hovered]):not([data-error]) {border: calc(2 * var(--border-width)) solid var(--primary-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-variant="borderless"][data-focused]:not([data-hovered]):not([data-error]) {border: calc(2 * var(--border-width)) solid var(--primary-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-hovered][data-focused]:not([data-variant="borderless"]):not([data-error]) {border: var(--border-width) solid var(--border-hover-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-variant="borderless"][data-hovered][data-focused]:not([data-error]) {border: calc(2 * var(--border-width)) solid var(--primary-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-error][data-focused]:not([data-variant="borderless"]):not([data-hovered]) {border: calc(2 * var(--border-width)) solid var(--danger-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-variant="borderless"][data-error][data-focused]:not([data-hovered]) {border: calc(2 * var(--border-width)) solid var(--danger-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-hovered][data-error][data-focused]:not([data-variant="borderless"]) {border: var(--border-width) solid var(--border-hover-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24[data-variant="borderless"][data-hovered][data-error][data-focused] {border: calc(2 * var(--border-width)) solid var(--danger-color);}}
+@media (max-width: 767px) {.t24.t24:not([data-variant="borderless"]):not([data-hovered]):not([data-error]):not([data-focused]) {border: var(--border-width) none var(--border-color);}}
+@media (max-width: 767px) {.t24.t24[data-variant="borderless"]:not([data-hovered]):not([data-error]):not([data-focused]) {border: var(--border-width) none var(--border-color);}}
+@media (max-width: 767px) {.t24.t24[data-hovered]:not([data-variant="borderless"]):not([data-error]):not([data-focused]) {border: var(--border-width) solid var(--border-hover-color);}}
+@media (max-width: 767px) {.t24.t24[data-variant="borderless"][data-hovered]:not([data-error]):not([data-focused]) {border: var(--border-width) none var(--border-color);}}
+@media (max-width: 767px) {.t24.t24[data-error]:not([data-variant="borderless"]):not([data-hovered]):not([data-focused]) {border: var(--border-width) none var(--border-color);}}
+@media (max-width: 767px) {.t24.t24[data-variant="borderless"][data-error]:not([data-hovered]):not([data-focused]) {border: var(--border-width) none var(--border-color);}}
+@media (max-width: 767px) {.t24.t24[data-hovered][data-error]:not([data-variant="borderless"]):not([data-focused]) {border: var(--border-width) solid var(--border-hover-color);}}
+@media (max-width: 767px) {.t24.t24[data-variant="borderless"][data-hovered][data-error]:not([data-focused]) {border: var(--border-width) none var(--border-color);}}
+@media (max-width: 767px) {.t24.t24[data-focused]:not([data-variant="borderless"]):not([data-hovered]):not([data-error]) {border: var(--border-width) solid var(--primary-color);}}
+@media (max-width: 767px) {.t24.t24[data-variant="borderless"][data-focused]:not([data-hovered]):not([data-error]) {border: var(--border-width) solid var(--primary-color);}}
+@media (max-width: 767px) {.t24.t24[data-hovered][data-focused]:not([data-variant="borderless"]):not([data-error]) {border: var(--border-width) solid var(--border-hover-color);}}
+@media (max-width: 767px) {.t24.t24[data-variant="borderless"][data-hovered][data-focused]:not([data-error]) {border: var(--border-width) solid var(--primary-color);}}
+@media (max-width: 767px) {.t24.t24[data-error][data-focused]:not([data-variant="borderless"]):not([data-hovered]) {border: var(--border-width) solid var(--danger-color);}}
+@media (max-width: 767px) {.t24.t24[data-variant="borderless"][data-error][data-focused]:not([data-hovered]) {border: var(--border-width) solid var(--danger-color);}}
+@media (max-width: 767px) {.t24.t24[data-hovered][data-error][data-focused]:not([data-variant="borderless"]) {border: var(--border-width) solid var(--border-hover-color);}}
+@media (max-width: 767px) {.t24.t24[data-variant="borderless"][data-hovered][data-error][data-focused] {border: var(--border-width) solid var(--danger-color);}}
+@media (min-width: 1200px) {.t24.t24>* {--context-radius: calc(2 * var(--radius));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t24.t24>* {--context-radius: var(--radius);}}
+@media (max-width: 767px) {.t24.t24>* {--context-radius: calc(0.5 * var(--radius));}}"
+`;
+
+exports[`tasty() API should handle fill fallback syntax 1`] = `
+".t1.t1 {background-color: var(--surface-color, var(--white-color));}
+.t1.t1>* {--context-fill-color: var(--surface-color, var(--white-color)); --context-fill-color-rgb: var(--surface-color-rgb, var(--white-color-rgb));}"
 `;
 
 exports[`tasty() API should handle state-map-of-arrays pattern 1`] = `
-".t20.t20 {display: block;}
-@media (min-width: 1200px) {.t20.t20:not([data-variant="compact"]):not([data-hovered]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
-@media (min-width: 1200px) {.t20.t20[data-variant="compact"]:not([data-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (min-width: 1200px) {.t20.t20[data-hovered]:not([data-variant="compact"]) {padding-top: calc(6 * var(--gap)); padding-right: calc(6 * var(--gap)); padding-bottom: calc(6 * var(--gap)); padding-left: calc(6 * var(--gap));}}
-@media (min-width: 1200px) {.t20.t20[data-variant="compact"][data-hovered] {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t20.t20:not([data-variant="compact"]):not([data-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t20.t20[data-variant="compact"]:not([data-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t20.t20[data-hovered]:not([data-variant="compact"]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t20.t20[data-variant="compact"][data-hovered] {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (max-width: 767px) {.t20.t20:not([data-variant="compact"]):not([data-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (max-width: 767px) {.t20.t20[data-variant="compact"]:not([data-hovered]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
-@media (max-width: 767px) {.t20.t20[data-hovered]:not([data-variant="compact"]) {padding-top: calc(1.5 * var(--gap)); padding-right: calc(1.5 * var(--gap)); padding-bottom: calc(1.5 * var(--gap)); padding-left: calc(1.5 * var(--gap));}}
-@media (max-width: 767px) {.t20.t20[data-variant="compact"][data-hovered] {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
-@media (min-width: 1200px) {.t20.t20:not([data-error]):not([data-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
-@media (min-width: 1200px) {.t20.t20[data-error]:not([data-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
-@media (min-width: 1200px) {.t20.t20[data-focused]:not([data-error]) {border: calc(3 * var(--border-width)) solid var(--primary-color);}}
-@media (min-width: 1200px) {.t20.t20[data-error][data-focused] {border: calc(3 * var(--border-width)) solid var(--danger-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t20.t20:not([data-error]):not([data-focused]) {border: var(--border-width) solid var(--border-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t20.t20[data-error]:not([data-focused]) {border: var(--border-width) solid var(--border-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t20.t20[data-focused]:not([data-error]) {border: calc(2 * var(--border-width)) solid var(--primary-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t20.t20[data-error][data-focused] {border: calc(2 * var(--border-width)) solid var(--danger-color);}}
-@media (max-width: 767px) {.t20.t20:not([data-error]):not([data-focused]) {border: var(--border-width) none var(--border-color);}}
-@media (max-width: 767px) {.t20.t20[data-error]:not([data-focused]) {border: var(--border-width) none var(--border-color);}}
-@media (max-width: 767px) {.t20.t20[data-focused]:not([data-error]) {border: var(--border-width) solid var(--primary-color);}}
-@media (max-width: 767px) {.t20.t20[data-error][data-focused] {border: var(--border-width) solid var(--danger-color);}}"
+".t22.t22 {display: block;}
+@media (min-width: 1200px) {.t22.t22:not([data-variant="compact"]):not([data-hovered]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
+@media (min-width: 1200px) {.t22.t22[data-variant="compact"]:not([data-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (min-width: 1200px) {.t22.t22[data-hovered]:not([data-variant="compact"]) {padding-top: calc(6 * var(--gap)); padding-right: calc(6 * var(--gap)); padding-bottom: calc(6 * var(--gap)); padding-left: calc(6 * var(--gap));}}
+@media (min-width: 1200px) {.t22.t22[data-variant="compact"][data-hovered] {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22:not([data-variant="compact"]):not([data-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="compact"]:not([data-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-hovered]:not([data-variant="compact"]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="compact"][data-hovered] {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (max-width: 767px) {.t22.t22:not([data-variant="compact"]):not([data-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (max-width: 767px) {.t22.t22[data-variant="compact"]:not([data-hovered]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
+@media (max-width: 767px) {.t22.t22[data-hovered]:not([data-variant="compact"]) {padding-top: calc(1.5 * var(--gap)); padding-right: calc(1.5 * var(--gap)); padding-bottom: calc(1.5 * var(--gap)); padding-left: calc(1.5 * var(--gap));}}
+@media (max-width: 767px) {.t22.t22[data-variant="compact"][data-hovered] {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
+@media (min-width: 1200px) {.t22.t22:not([data-error]):not([data-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
+@media (min-width: 1200px) {.t22.t22[data-error]:not([data-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
+@media (min-width: 1200px) {.t22.t22[data-focused]:not([data-error]) {border: calc(3 * var(--border-width)) solid var(--primary-color);}}
+@media (min-width: 1200px) {.t22.t22[data-error][data-focused] {border: calc(3 * var(--border-width)) solid var(--danger-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22:not([data-error]):not([data-focused]) {border: var(--border-width) solid var(--border-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-error]:not([data-focused]) {border: var(--border-width) solid var(--border-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-focused]:not([data-error]) {border: calc(2 * var(--border-width)) solid var(--primary-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-error][data-focused] {border: calc(2 * var(--border-width)) solid var(--danger-color);}}
+@media (max-width: 767px) {.t22.t22:not([data-error]):not([data-focused]) {border: var(--border-width) none var(--border-color);}}
+@media (max-width: 767px) {.t22.t22[data-error]:not([data-focused]) {border: var(--border-width) none var(--border-color);}}
+@media (max-width: 767px) {.t22.t22[data-focused]:not([data-error]) {border: var(--border-width) solid var(--primary-color);}}
+@media (max-width: 767px) {.t22.t22[data-error][data-focused] {border: var(--border-width) solid var(--danger-color);}}"
 `;
 
 exports[`tasty() API should merge element styles 1`] = `
-".t12.t12:not([data-modified]) [data-element="Element"] {color: var(--dark-color); --current-color: var(--dark-color, dark); --current-color-rgb: var(--dark-color-rgb);}
-.t12.t12[data-modified] [data-element="Element"] {color: var(--purple-color); --current-color: var(--purple-color, purple); --current-color-rgb: var(--purple-color-rgb);}
-.t12.t12 [data-element="Element"] {background-color: var(--black-color);}
-.t12.t12 [data-element="Element"]>* {--context-fill-color: var(--black-color); --context-fill-color-rgb: var(--black-color-rgb);}"
+".t14.t14:not([data-modified]) [data-element="Element"] {color: var(--dark-color); --current-color: var(--dark-color); --current-color-rgb: var(--dark-color-rgb);}
+.t14.t14[data-modified] [data-element="Element"] {color: var(--purple-color); --current-color: var(--purple-color); --current-color-rgb: var(--purple-color-rgb);}
+.t14.t14 [data-element="Element"] {background-color: var(--black-color);}
+.t14.t14 [data-element="Element"]>* {--context-fill-color: var(--black-color); --context-fill-color-rgb: var(--black-color-rgb);}"
 `;
 
 exports[`tasty() API should merge styles 1`] = `
-".t6.t6:not([data-modified]) {color: var(--dark-color); --current-color: var(--dark-color, dark); --current-color-rgb: var(--dark-color-rgb);}
-.t6.t6[data-modified] {color: var(--purple-color); --current-color: var(--purple-color, purple); --current-color-rgb: var(--purple-color-rgb);}
-.t6.t6 {background-color: var(--black-color);}
-.t6.t6>* {--context-fill-color: var(--black-color); --context-fill-color-rgb: var(--black-color-rgb);}"
+".t8.t8:not([data-modified]) {color: var(--dark-color); --current-color: var(--dark-color); --current-color-rgb: var(--dark-color-rgb);}
+.t8.t8[data-modified] {color: var(--purple-color); --current-color: var(--purple-color); --current-color-rgb: var(--purple-color-rgb);}
+.t8.t8 {background-color: var(--black-color);}
+.t8.t8>* {--context-fill-color: var(--black-color); --context-fill-color-rgb: var(--black-color-rgb);}"
 `;
 
 exports[`tasty() API should merge styles in custom prop 1`] = `
-".t6.t6:not([data-modified]) {color: var(--dark-color); --current-color: var(--dark-color, dark); --current-color-rgb: var(--dark-color-rgb);}
-.t6.t6[data-modified] {color: var(--purple-color); --current-color: var(--purple-color, purple); --current-color-rgb: var(--purple-color-rgb);}
-.t6.t6 {background-color: var(--black-color);}
-.t6.t6>* {--context-fill-color: var(--black-color); --context-fill-color-rgb: var(--black-color-rgb);}"
+".t8.t8:not([data-modified]) {color: var(--dark-color); --current-color: var(--dark-color); --current-color-rgb: var(--dark-color-rgb);}
+.t8.t8[data-modified] {color: var(--purple-color); --current-color: var(--purple-color); --current-color-rgb: var(--purple-color-rgb);}
+.t8.t8 {background-color: var(--black-color);}
+.t8.t8>* {--context-fill-color: var(--black-color); --context-fill-color-rgb: var(--black-color-rgb);}"
 `;
 
 exports[`tasty() API should optimize attribute selectors 1`] = `
-".t16.t16 {display: block;}
-.t16.t16:not([data-size="large"]):not([data-size="medium"]) {padding-top: var(--gap);}
-.t16.t16[data-size="large"] {padding-top: calc(3 * var(--gap));}
-.t16.t16[data-size="medium"] {padding-top: calc(2 * var(--gap));}"
+".t18.t18 {display: block;}
+.t18.t18:not([data-size="large"]):not([data-size="medium"]) {padding-top: var(--gap);}
+.t18.t18[data-size="large"] {padding-top: calc(3 * var(--gap));}
+.t18.t18[data-size="medium"] {padding-top: calc(2 * var(--gap));}"
 `;
 
 exports[`tasty() API should optimize attribute selectors 2`] = `
-".t17.t17 {display: block;}
-.t17.t17:not([data-size="large"]):not([data-size="medium"]):not([data-selected]) {padding-top: var(--gap);}
-.t17.t17[data-size="large"]:not([data-selected]) {padding-top: calc(3 * var(--gap));}
-.t17.t17[data-size="medium"]:not([data-selected]) {padding-top: var(--gap);}
-.t17.t17[data-selected]:not([data-size="large"]):not([data-size="medium"]) {padding-top: var(--gap);}
-.t17.t17[data-size="large"][data-selected] {padding-top: calc(3 * var(--gap));}
-.t17.t17[data-size="medium"][data-selected] {padding-top: calc(2 * var(--gap));}"
+".t19.t19 {display: block;}
+.t19.t19:not([data-size="large"]):not([data-size="medium"]):not([data-selected]) {padding-top: var(--gap);}
+.t19.t19[data-size="large"]:not([data-selected]) {padding-top: calc(3 * var(--gap));}
+.t19.t19[data-size="medium"]:not([data-selected]) {padding-top: var(--gap);}
+.t19.t19[data-selected]:not([data-size="large"]):not([data-size="medium"]) {padding-top: var(--gap);}
+.t19.t19[data-size="large"][data-selected] {padding-top: calc(3 * var(--gap));}
+.t19.t19[data-size="medium"][data-selected] {padding-top: calc(2 * var(--gap));}"
 `;
 
 exports[`tasty() API should optimize attribute selectors 3`] = `
-".t18.t18 {display: block;}
-.t18.t18:not([data-size="large"]):not([data-selected]):not([data-size="medium"]) {padding-top: var(--gap);}
-.t18.t18[data-size="large"]:not([data-selected]) {padding-top: var(--gap);}
-.t18.t18[data-selected]:not([data-size="large"]):not([data-size="medium"]) {padding-top: calc(2 * var(--gap));}
-.t18.t18[data-size="large"][data-selected] {padding-top: calc(3 * var(--gap));}
-.t18.t18[data-size="medium"]:not([data-selected]) {padding-top: calc(2 * var(--gap));}
-.t18.t18[data-selected][data-size="medium"] {padding-top: calc(2 * var(--gap));}"
+".t20.t20 {display: block;}
+.t20.t20:not([data-size="large"]):not([data-selected]):not([data-size="medium"]) {padding-top: var(--gap);}
+.t20.t20[data-size="large"]:not([data-selected]) {padding-top: var(--gap);}
+.t20.t20[data-selected]:not([data-size="large"]):not([data-size="medium"]) {padding-top: calc(2 * var(--gap));}
+.t20.t20[data-size="large"][data-selected] {padding-top: calc(3 * var(--gap));}
+.t20.t20[data-size="medium"]:not([data-selected]) {padding-top: calc(2 * var(--gap));}
+.t20.t20[data-selected][data-size="medium"] {padding-top: calc(2 * var(--gap));}"
 `;
 
-exports[`tasty() API should pass styles from tasty 1`] = `".t2.t2 {display: block; color: rgb(var(--clear-color-rgb) / .1); --current-color: var(--clear-color, clear); --current-color-rgb: var(--clear-color-rgb);}"`;
+exports[`tasty() API should pass styles from tasty 1`] = `".t4.t4 {display: block; color: rgb(var(--clear-color-rgb) / .1); --current-color: rgb(var(--clear-color-rgb) / .1); --current-color-rgb: rgb(var(--clear-color-rgb) / .1);}"`;
 
 exports[`tasty() API should preserve null values in state-map-of-arrays conversion 1`] = `
-".t21.t21 {display: block;}
-@media (min-width: 768px) {.t21.t21:not([data-disabled]):not([data-hovered]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
-@media (min-width: 768px) {.t21.t21[data-disabled]:not([data-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (min-width: 768px) {.t21.t21[data-disabled][data-hovered] {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (max-width: 767px) {.t21.t21:not([data-disabled]):not([data-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (max-width: 767px) {.t21.t21[data-disabled]:not([data-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (max-width: 767px) {.t21.t21[data-hovered]:not([data-disabled]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
-@media (max-width: 767px) {.t21.t21[data-disabled][data-hovered] {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-.t21.t21:not([data-disabled]):not([data-hovered]) {background-color: var(--white-color);}
-.t21.t21:not([data-disabled]):not([data-hovered])>* {--context-fill-color: var(--white-color); --context-fill-color-rgb: var(--white-color-rgb);}
-.t21.t21[data-disabled]:not([data-hovered]) {background-color: var(--gray-color);}
-.t21.t21[data-disabled]:not([data-hovered])>* {--context-fill-color: var(--gray-color); --context-fill-color-rgb: var(--gray-color-rgb);}
-.t21.t21[data-hovered]:not([data-disabled]) {background-color: var(--blue-color);}
-.t21.t21[data-hovered]:not([data-disabled])>* {--context-fill-color: var(--blue-color); --context-fill-color-rgb: var(--blue-color-rgb);}
-.t21.t21[data-disabled][data-hovered] {background-color: var(--gray-color);}
-.t21.t21[data-disabled][data-hovered]>* {--context-fill-color: var(--gray-color); --context-fill-color-rgb: var(--gray-color-rgb);}"
+".t23.t23 {display: block;}
+@media (min-width: 768px) {.t23.t23:not([data-disabled]):not([data-hovered]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
+@media (min-width: 768px) {.t23.t23[data-disabled]:not([data-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (min-width: 768px) {.t23.t23[data-disabled][data-hovered] {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (max-width: 767px) {.t23.t23:not([data-disabled]):not([data-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (max-width: 767px) {.t23.t23[data-disabled]:not([data-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (max-width: 767px) {.t23.t23[data-hovered]:not([data-disabled]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
+@media (max-width: 767px) {.t23.t23[data-disabled][data-hovered] {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+.t23.t23:not([data-disabled]):not([data-hovered]) {background-color: var(--white-color);}
+.t23.t23:not([data-disabled]):not([data-hovered])>* {--context-fill-color: var(--white-color); --context-fill-color-rgb: var(--white-color-rgb);}
+.t23.t23[data-disabled]:not([data-hovered]) {background-color: var(--gray-color);}
+.t23.t23[data-disabled]:not([data-hovered])>* {--context-fill-color: var(--gray-color); --context-fill-color-rgb: var(--gray-color-rgb);}
+.t23.t23[data-hovered]:not([data-disabled]) {background-color: var(--blue-color);}
+.t23.t23[data-hovered]:not([data-disabled])>* {--context-fill-color: var(--blue-color); --context-fill-color-rgb: var(--blue-color-rgb);}
+.t23.t23[data-disabled][data-hovered] {background-color: var(--gray-color);}
+.t23.t23[data-disabled][data-hovered]>* {--context-fill-color: var(--gray-color); --context-fill-color-rgb: var(--gray-color-rgb);}"
 `;
 
 exports[`tasty() API should preserve null values in state-map-of-arrays conversion 2`] = `
-".t21.t21 {display: block;}
-@media (min-width: 768px) {.t21.t21:not([data-disabled]):not([data-hovered]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
-@media (min-width: 768px) {.t21.t21[data-disabled]:not([data-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (min-width: 768px) {.t21.t21[data-disabled][data-hovered] {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (max-width: 767px) {.t21.t21:not([data-disabled]):not([data-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (max-width: 767px) {.t21.t21[data-disabled]:not([data-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (max-width: 767px) {.t21.t21[data-hovered]:not([data-disabled]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
-@media (max-width: 767px) {.t21.t21[data-disabled][data-hovered] {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-.t21.t21:not([data-disabled]):not([data-hovered]) {background-color: var(--white-color);}
-.t21.t21:not([data-disabled]):not([data-hovered])>* {--context-fill-color: var(--white-color); --context-fill-color-rgb: var(--white-color-rgb);}
-.t21.t21[data-disabled]:not([data-hovered]) {background-color: var(--gray-color);}
-.t21.t21[data-disabled]:not([data-hovered])>* {--context-fill-color: var(--gray-color); --context-fill-color-rgb: var(--gray-color-rgb);}
-.t21.t21[data-hovered]:not([data-disabled]) {background-color: var(--blue-color);}
-.t21.t21[data-hovered]:not([data-disabled])>* {--context-fill-color: var(--blue-color); --context-fill-color-rgb: var(--blue-color-rgb);}
-.t21.t21[data-disabled][data-hovered] {background-color: var(--gray-color);}
-.t21.t21[data-disabled][data-hovered]>* {--context-fill-color: var(--gray-color); --context-fill-color-rgb: var(--gray-color-rgb);}"
+".t23.t23 {display: block;}
+@media (min-width: 768px) {.t23.t23:not([data-disabled]):not([data-hovered]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
+@media (min-width: 768px) {.t23.t23[data-disabled]:not([data-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (min-width: 768px) {.t23.t23[data-disabled][data-hovered] {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (max-width: 767px) {.t23.t23:not([data-disabled]):not([data-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (max-width: 767px) {.t23.t23[data-disabled]:not([data-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (max-width: 767px) {.t23.t23[data-hovered]:not([data-disabled]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
+@media (max-width: 767px) {.t23.t23[data-disabled][data-hovered] {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+.t23.t23:not([data-disabled]):not([data-hovered]) {background-color: var(--white-color);}
+.t23.t23:not([data-disabled]):not([data-hovered])>* {--context-fill-color: var(--white-color); --context-fill-color-rgb: var(--white-color-rgb);}
+.t23.t23[data-disabled]:not([data-hovered]) {background-color: var(--gray-color);}
+.t23.t23[data-disabled]:not([data-hovered])>* {--context-fill-color: var(--gray-color); --context-fill-color-rgb: var(--gray-color-rgb);}
+.t23.t23[data-hovered]:not([data-disabled]) {background-color: var(--blue-color);}
+.t23.t23[data-hovered]:not([data-disabled])>* {--context-fill-color: var(--blue-color); --context-fill-color-rgb: var(--blue-color-rgb);}
+.t23.t23[data-disabled][data-hovered] {background-color: var(--gray-color);}
+.t23.t23[data-disabled][data-hovered]>* {--context-fill-color: var(--gray-color); --context-fill-color-rgb: var(--gray-color-rgb);}"
 `;
 
 exports[`tasty() API should support camelCase modifiers 1`] = `
-".t5.t5 {display: block;}
-.t5.t5:not([data-somehow-modified]) {color: var(--dark-color); --current-color: var(--dark-color, dark); --current-color-rgb: var(--dark-color-rgb);}
-.t5.t5[data-somehow-modified] {color: var(--purple-color); --current-color: var(--purple-color, purple); --current-color-rgb: var(--purple-color-rgb);}"
+".t7.t7 {display: block;}
+.t7.t7:not([data-somehow-modified]) {color: var(--dark-color); --current-color: var(--dark-color); --current-color-rgb: var(--dark-color-rgb);}
+.t7.t7[data-somehow-modified] {color: var(--purple-color); --current-color: var(--purple-color); --current-color-rgb: var(--purple-color-rgb);}"
 `;
 
 exports[`tasty() API should support kebab-case modifiers 1`] = `
-".t4.t4 {display: block;}
-.t4.t4:not([data-somehow-modified]) {color: var(--dark-color); --current-color: var(--dark-color, dark); --current-color-rgb: var(--dark-color-rgb);}
-.t4.t4[data-somehow-modified] {color: var(--purple-color); --current-color: var(--purple-color, purple); --current-color-rgb: var(--purple-color-rgb);}"
+".t6.t6 {display: block;}
+.t6.t6:not([data-somehow-modified]) {color: var(--dark-color); --current-color: var(--dark-color); --current-color-rgb: var(--dark-color-rgb);}
+.t6.t6[data-somehow-modified] {color: var(--purple-color); --current-color: var(--purple-color); --current-color-rgb: var(--purple-color-rgb);}"
 `;
 
 exports[`tasty() API should support modifiers 1`] = `
-".t3.t3 {display: block;}
-.t3.t3:not([data-modified]) {color: var(--dark-color); --current-color: var(--dark-color, dark); --current-color-rgb: var(--dark-color-rgb);}
-.t3.t3[data-modified] {color: var(--purple-color); --current-color: var(--purple-color, purple); --current-color-rgb: var(--purple-color-rgb);}"
+".t5.t5 {display: block;}
+.t5.t5:not([data-modified]) {color: var(--dark-color); --current-color: var(--dark-color); --current-color-rgb: var(--dark-color-rgb);}
+.t5.t5[data-modified] {color: var(--purple-color); --current-color: var(--purple-color); --current-color-rgb: var(--purple-color-rgb);}"
 `;
 
-exports[`tasty() API should support variants 1`] = `".t8.t8 {color: var(--black-color); --current-color: var(--black-color, black); --current-color-rgb: var(--black-color-rgb);}"`;
+exports[`tasty() API should support variants 1`] = `".t10.t10 {color: var(--black-color); --current-color: var(--black-color); --current-color-rgb: var(--black-color-rgb);}"`;
diff --git a/src/tasty/parser/classify.ts b/src/tasty/parser/classify.ts
index bd7a6cf61..9705712f2 100644
--- a/src/tasty/parser/classify.ts
+++ b/src/tasty/parser/classify.ts
@@ -70,8 +70,8 @@ export function classify(
   }
 
   // 2. Custom property
-  if (token[0] === '@' || token[0] === '$') {
-    const identMatch = token.match(/^[$@]([a-z_][a-z0-9-_]*)$/);
+  if (token[0] === '$') {
+    const identMatch = token.match(/^\$([a-z_][a-z0-9-_]*)$/);
     if (identMatch) {
       const name = identMatch[1];
       const processed = `var(--${name})`;
@@ -138,28 +138,43 @@ export function classify(
     return { bucket: Bucket.Value, processed: `${fname}(${argProcessed})` };
   }
 
-  // 6. Custom property with fallback syntax: (${prop}, fallback)
+  // 6. Color fallback syntax: (#name, fallback)
   if (token.startsWith('(') && token.endsWith(')')) {
     const inner = token.slice(1, -1);
-    const match = inner.match(/^[$@]([a-z_][a-z0-9-_]*)\s*,\s*(.*)$/);
+    const colorMatch = inner.match(/^#([a-z0-9-]+)\s*,\s*(.*)$/i);
+    if (colorMatch) {
+      const [, name, fallback] = colorMatch;
+      const processedFallback = recurse(fallback).output;
+      return {
+        bucket: Bucket.Color,
+        processed: `var(--${name}-color, ${processedFallback})`,
+      };
+    }
+  }
+
+  // 7. Custom property with fallback syntax: ($prop, fallback)
+  if (token.startsWith('(') && token.endsWith(')')) {
+    const inner = token.slice(1, -1);
+    const match = inner.match(/^\$([a-z_][a-z0-9-_]*)\s*,\s*(.*)$/);
     if (match) {
       const [, name, fallback] = match;
       const processedFallback = recurse(fallback).output;
+      const bucketType = name.endsWith('-color') ? Bucket.Color : Bucket.Value;
       return {
-        bucket: Bucket.Value,
+        bucket: bucketType,
         processed: `var(--${name}, ${processedFallback})`,
       };
     }
   }
 
-  // 7. Auto-calc group
+  // 8. Auto-calc group
   if (token[0] === '(' && token[token.length - 1] === ')') {
     const inner = token.slice(1, -1);
     const innerProcessed = recurse(inner).output;
     return { bucket: Bucket.Value, processed: `calc(${innerProcessed})` };
   }
 
-  // 8. Unit number
+  // 9. Unit number
   const um = token.match(RE_UNIT_NUM);
   if (um) {
     const unit = um[1];
@@ -187,27 +202,27 @@ export function classify(
     }
   }
 
-  // 8b. Unknown numeric+unit → treat as literal value (e.g., 1fr)
+  // 9b. Unknown numeric+unit → treat as literal value (e.g., 1fr)
   if (/^[+-]?(?:\d*\.\d+|\d+)[a-z%]+$/.test(token)) {
     return { bucket: Bucket.Value, processed: token };
   }
 
-  // 8c. Plain unit-less numbers should be treated as value tokens so that
+  // 9c. Plain unit-less numbers should be treated as value tokens so that
   // code such as `scrollbar={10}` resolves correctly.
   if (RE_NUMBER.test(token)) {
     return { bucket: Bucket.Value, processed: token };
   }
 
-  // 9. Literal value keywords
+  // 10. Literal value keywords
   if (VALUE_KEYWORDS.has(token)) {
     return { bucket: Bucket.Value, processed: token };
   }
 
-  // 9b. Special keyword colors
+  // 10b. Special keyword colors
   if (token === 'transparent' || token === 'currentcolor') {
     return { bucket: Bucket.Color, processed: token };
   }
 
-  // 10. Fallback modifier
+  // 11. Fallback modifier
   return { bucket: Bucket.Mod, processed: token };
 }
diff --git a/src/tasty/parser/parser.md b/src/tasty/parser/parser.md
index b15cc7b61..8db500a38 100644
--- a/src/tasty/parser/parser.md
+++ b/src/tasty/parser/parser.md
@@ -39,6 +39,14 @@ The Style Parser converts an arbitrary CSS-like value string into:
 
 The parser operates in a single pass and never throws on malformed input.
 
+**Style System Integration:**
+
+When defining custom color tokens (e.g., `#local-placeholder: '(#primary, #fallback)'`), the style system automatically generates both color and RGB variants:
+- `--local-placeholder-color: var(--primary-color, var(--fallback-color))`
+- `--local-placeholder-color-rgb: var(--primary-color-rgb, var(--fallback-color-rgb))`
+
+This applies to all color fallback syntaxes, including nested fallbacks and literal values.
+
 ---
 
 ## 2. Public API
@@ -137,10 +145,12 @@ Each `StyleParser` instance maintains its own LRU cache.
 | 3     | Hash token – `#xxxxxx` if valid hex → `var(--xxxxxx-color, #xxxxxx)`; otherwise `var(--name-color)`. | color    |
 | 4     | Color function – name in list §12.2 followed by `(` (balanced).                            | color    |
 | 5     | User / other function – `ident(` not in color list; parse args recursively, hand off to `funcs[name]` if provided; else rebuild with processed args. | value    |
-| 6     | Auto-calc group – parentheses not preceded by identifier. See §6.                          | value    |
-| 7     | Numeric + custom unit – regex `^[+-]?(\d*.\d+ \d+)([a-z][a-z0-9]*)$` and unit key exists.  |          |
-| 8     | Literal value keyword – exactly `auto`, `max-content`, `min-content`, `fit-content`, `stretch`. | value    |
-| 9     | Fallback                                                                                   | modifier |
+| 6     | Color fallback – `(#name, fallback)` → `var(--name-color, <processed fallback>)`. Supports unlimited nesting. Fallback can be another color token, nested color fallback, hex literal, or CSS color function. | color    |
+| 7     | Custom property fallback – `($ident, fallback)` → `var(--ident, <processed fallback>)`. Classified as color if ident ends with `-color`, otherwise value. | color/value |
+| 8     | Auto-calc group – parentheses not preceded by identifier. See §6.                          | value    |
+| 9     | Numeric + custom unit – regex `^[+-]?(\d*.\d+ \d+)([a-z][a-z0-9]*)$` and unit key exists.  |          |
+| 10    | Literal value keyword – exactly `auto`, `max-content`, `min-content`, `fit-content`, `stretch`. | value    |
+| 11    | Fallback                                                                                   | modifier |
 
 Each processed string is inserted into its bucket and into `all` in source order.
 
@@ -152,7 +162,8 @@ Each processed string is inserted into its bucket and into `all` in source order
 |--------------------------|---------------------------------------------------------------------------------------------|
 | Custom unit (`2x`, `.75r`, `-3cr`) | `units[unit]`: • string → `calc(n * replacement)` • function → `calc(handler(numeric))`<br> `0u` stays `calc(0 * …)` (unit info preserved). |
 | Auto-calc parentheses    | Applies anywhere, nesting allowed.<br>Trigger = `(` whose previous non-space char is not `[a-z0-9_-]` and not `l` in `url(`.<br>Algorithm:<br>1. Strip outer parens.<br>2. Recursively parse inner text (so `2r`, `#fff`, nested auto-calc, etc., all expand).<br>3. Wrap in `calc( … )`. |
-| Custom property          | `$ident` → `var(--ident)` \| `($ident,fallback)` → `var(--ident, <processed fallback>)` |
+| Color fallback           | `(#name, fallback)` → `var(--name-color, <processed fallback>)`<br>Fallback is recursively processed, supporting unlimited nesting: `(#a, (#b, #c))` → `var(--a-color, var(--b-color, var(--c-color)))`. |
+| Custom property          | `$ident` → `var(--ident)` \| `($ident,fallback)` → `var(--ident, <processed fallback>)`<br>If ident ends with `-color`, classified as color bucket. |
 | Hash colors              | As in §5-3.                                                                                 |
 | Color functions          | Arguments are parsed, inner colors re-expanded; function name retained.                     |
 | User functions           | If `funcs[name]` exists → call with parsed arg-`StyleDetails[]`, use return string.<br>Else rebuild `ident(<processed args>)`. |
@@ -227,13 +238,18 @@ rgb rgba hsl hsla hwb lab lch oklab oklch color device-cmyk gray color-mix color
 
 | Case                           | Expected outcome                                                                 |
 |--------------------------------|----------------------------------------------------------------------------------|
-| `url("img,with,comma.png")`    | Single value token; comma doesn’t split.                                         |
+| `url("img,with,comma.png")`    | Single value token; comma doesn't split.                                         |
 | `sum(min(1x,2x),(1px+5%))`     | Inner `(1px+5%)` → `calc(1px + 5%)`.                                            |
 | `.75x`                         | `calc(0.75 * var(--gap))` value.                                                |
 | `1bw top #purple, 1ow right #dark-05` | Two groups; colors processed; positions as modifiers.                  |
 | Comments `/*…*/2x`             | `calc(2 * var(--gap))`.                                                         |
 | `#+not-hash`                   | Modifier (fails hex test).                                                      |
-| `($custom-gap, 1x)`           | `var(--custom-gap, var(--gap))` (new custom property syntax).                  |
+| `($custom-gap, 1x)`           | `var(--custom-gap, var(--gap))` (custom property fallback syntax).             |
+| `($placeholder-color, $dark-04-color)` | `var(--placeholder-color, var(--dark-04-color))` (color bucket).      |
+| `(#placeholder, #dark-04)`    | `var(--placeholder-color, var(--dark-04-color))` (color fallback syntax).      |
+| `(#primary, (#secondary, #tertiary))` | `var(--primary-color, var(--secondary-color, var(--tertiary-color)))` (nested fallbacks). |
+| `(#theme, #fff)`              | `var(--theme-color, var(--fff-color, #fff))` (fallback with hex literal).      |
+| `(#bg, rgb(255 0 0))`         | `var(--bg-color, rgb(255 0 0))` (fallback with CSS function).                  |
 | `($123invalid, fallback)`     | `calc($123invalid, fallback)` (invalid name → auto-calc).                      |
 | Excess spaces/newlines         | Collapsed in output.                                                            |
 | `+2r, 1e3x`                    | Invalid → modifiers.                                                            |
diff --git a/src/tasty/parser/parser.test.ts b/src/tasty/parser/parser.test.ts
index 66682a329..5cf026bb6 100644
--- a/src/tasty/parser/parser.test.ts
+++ b/src/tasty/parser/parser.test.ts
@@ -201,6 +201,9 @@ describe('StyleProcessor', () => {
     );
     expect(result.groups[0].values).toEqual([
       'var(--custom-margin, var(--gap))',
+    ]);
+    // $theme-color is now classified as a color since it ends with -color
+    expect(result.groups[0].colors).toEqual([
       'var(--theme-color, var(--purple-color))',
     ]);
   });
@@ -333,7 +336,7 @@ describe('StyleProcessor', () => {
     );
     expect(result6.groups[0].values).toEqual([
       'calc(not-a-prop, value)', // Auto-calc (no $ prefix)
-      'var(--invalid-syntax, bad)', // @ is valid custom property prefix
+      'calc(@invalid-syntax, bad)', // Auto-calc (@ is not valid, only $ is)
     ]);
 
     // Test 7: Edge case with spaces and special characters
@@ -363,6 +366,93 @@ describe('StyleProcessor', () => {
     expect(result9.groups[1].values).toEqual(['var(--prop2, fallback)']);
   });
 
+  test('parses color fallback syntax', () => {
+    // Single fallback
+    const result1 = parser.process('(#primary, #fallback)');
+    expect(result1.groups[0].colors).toEqual([
+      'var(--primary-color, var(--fallback-color))',
+    ]);
+    expect(result1.output).toBe('var(--primary-color, var(--fallback-color))');
+
+    // Hex literal fallback
+    const result2 = parser.process('(#primary, #fff)');
+    expect(result2.groups[0].colors).toEqual([
+      'var(--primary-color, var(--fff-color, #fff))',
+    ]);
+
+    // CSS function fallback
+    const result3 = parser.process('(#primary, rgb(255 0 0))');
+    expect(result3.groups[0].colors).toEqual([
+      'var(--primary-color, rgb(255 0 0))',
+    ]);
+
+    // Nested fallbacks (2 levels)
+    const result4 = parser.process('(#primary, (#secondary, #tertiary))');
+    expect(result4.groups[0].colors).toEqual([
+      'var(--primary-color, var(--secondary-color, var(--tertiary-color)))',
+    ]);
+
+    // Nested fallbacks (3+ levels)
+    const result5 = parser.process('(#a, (#b, (#c, #d)))');
+    expect(result5.groups[0].colors).toEqual([
+      'var(--a-color, var(--b-color, var(--c-color, var(--d-color))))',
+    ]);
+
+    // Mixed nesting with literals
+    const result6 = parser.process('(#primary, (#secondary, rgb(0 0 0)))');
+    expect(result6.groups[0].colors).toEqual([
+      'var(--primary-color, var(--secondary-color, rgb(0 0 0)))',
+    ]);
+
+    // Verify bucket classification is Color, not Value
+    expect(result1.groups[0].values).toEqual([]);
+    expect(result1.groups[0].mods).toEqual([]);
+  });
+
+  test('color fallback works with existing color tokens', () => {
+    // Color fallback with named tokens
+    const result1 = parser.process('(#placeholder, #dark-04)');
+    expect(result1.groups[0].colors).toEqual([
+      'var(--placeholder-color, var(--dark-04-color))',
+    ]);
+
+    // Multiple color fallbacks in one expression
+    const result2 = parser.process('(#a, #b) (#c, #d)');
+    expect(result2.groups[0].colors).toEqual([
+      'var(--a-color, var(--b-color))',
+      'var(--c-color, var(--d-color))',
+    ]);
+
+    // Color fallback with hex literal
+    const result3 = parser.process('(#theme, #3366ff)');
+    expect(result3.groups[0].colors).toEqual([
+      'var(--theme-color, var(--3366ff-color, #3366ff))',
+    ]);
+  });
+
+  test('distinguishes color fallback from custom property fallback', () => {
+    // Color fallback (starts with #)
+    const result1 = parser.process('(#primary, #fallback)');
+    expect(result1.groups[0].colors).toEqual([
+      'var(--primary-color, var(--fallback-color))',
+    ]);
+    expect(result1.groups[0].values).toEqual([]);
+
+    // Custom property fallback (starts with $)
+    const result2 = parser.process('($primary, $fallback)');
+    expect(result2.groups[0].values).toEqual([
+      'var(--primary, var(--fallback))',
+    ]);
+    expect(result2.groups[0].colors).toEqual([]);
+
+    // Custom property with -color suffix should be classified as color
+    const result3 = parser.process('($primary-color, $fallback-color)');
+    expect(result3.groups[0].colors).toEqual([
+      'var(--primary-color, var(--fallback-color))',
+    ]);
+    expect(result3.groups[0].values).toEqual([]);
+  });
+
   test('skips invalid functions while parsing (for example missing closing parenthesis)', () => {
     const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
 
diff --git a/src/tasty/styles.test.ts b/src/tasty/styles.test.ts
index 901e384e3..9f3e736ba 100644
--- a/src/tasty/styles.test.ts
+++ b/src/tasty/styles.test.ts
@@ -1,4 +1,7 @@
 import { borderStyle } from './styles/border';
+import { colorStyle } from './styles/color';
+import { createStyle } from './styles/createStyle';
+import { fillStyle } from './styles/fill';
 import { flowStyle } from './styles/flow';
 import { gapStyle } from './styles/gap';
 import { insetStyle } from './styles/inset';
@@ -17,6 +20,88 @@ describe('Tasty style tests', () => {
     });
   });
 
+  it('should handle color styles with fallbacks', () => {
+    // Simple color variable
+    expect(colorStyle({ color: 'var(--primary-color)' })).toEqual({
+      color: 'var(--primary-color)',
+      '--current-color': 'var(--primary-color)',
+      '--current-color-rgb': 'var(--primary-color-rgb)',
+    });
+
+    // Color with fallback chain
+    expect(
+      colorStyle({ color: 'var(--placeholder-color, var(--dark-04-color))' }),
+    ).toEqual({
+      color: 'var(--placeholder-color, var(--dark-04-color))',
+      '--current-color': 'var(--placeholder-color, var(--dark-04-color))',
+      '--current-color-rgb':
+        'var(--placeholder-color-rgb, var(--dark-04-color-rgb))',
+    });
+
+    // Nested fallbacks
+    expect(
+      colorStyle({
+        color:
+          'var(--primary-color, var(--secondary-color, var(--tertiary-color)))',
+      }),
+    ).toEqual({
+      color:
+        'var(--primary-color, var(--secondary-color, var(--tertiary-color)))',
+      '--current-color':
+        'var(--primary-color, var(--secondary-color, var(--tertiary-color)))',
+      '--current-color-rgb':
+        'var(--primary-color-rgb, var(--secondary-color-rgb, var(--tertiary-color-rgb)))',
+    });
+  });
+
+  it('should handle fill styles with fallbacks', () => {
+    // Simple fill variable
+    expect(fillStyle({ fill: 'var(--primary-color)' })).toEqual([
+      {
+        'background-color': 'var(--primary-color)',
+      },
+      {
+        $: '>*',
+        '--context-fill-color': 'var(--primary-color)',
+        '--context-fill-color-rgb': 'var(--primary-color-rgb)',
+      },
+    ]);
+
+    // Fill with fallback chain
+    expect(
+      fillStyle({ fill: 'var(--surface-color, var(--white-color))' }),
+    ).toEqual([
+      {
+        'background-color': 'var(--surface-color, var(--white-color))',
+      },
+      {
+        $: '>*',
+        '--context-fill-color': 'var(--surface-color, var(--white-color))',
+        '--context-fill-color-rgb':
+          'var(--surface-color-rgb, var(--white-color-rgb))',
+      },
+    ]);
+
+    // Nested fallbacks
+    expect(
+      fillStyle({
+        fill: 'var(--primary-color, var(--secondary-color, var(--tertiary-color)))',
+      }),
+    ).toEqual([
+      {
+        'background-color':
+          'var(--primary-color, var(--secondary-color, var(--tertiary-color)))',
+      },
+      {
+        $: '>*',
+        '--context-fill-color':
+          'var(--primary-color, var(--secondary-color, var(--tertiary-color)))',
+        '--context-fill-color-rgb':
+          'var(--primary-color-rgb, var(--secondary-color-rgb, var(--tertiary-color-rgb)))',
+      },
+    ]);
+  });
+
   it('should handle outline styles', () => {
     expect(outlineStyle({ outline: '2px dashed #f00' })).toEqual({
       outline: '2px dashed var(--f00-color, #f00)',
@@ -116,4 +201,73 @@ describe('Tasty style tests', () => {
       'margin-bottom': '1rem',
     });
   });
+
+  describe('Color fallback syntax', () => {
+    it('should generate both color and RGB variants for color fallback', () => {
+      const handler = createStyle('#local-placeholder');
+      const result = handler({
+        '#local-placeholder': '(#placeholder, #dark-04)',
+      });
+
+      expect(result).toEqual({
+        '--local-placeholder-color':
+          'var(--placeholder-color, var(--dark-04-color))',
+        '--local-placeholder-color-rgb':
+          'var(--placeholder-color-rgb, var(--dark-04-color-rgb))',
+      });
+    });
+
+    it('should handle nested color fallbacks with RGB variants', () => {
+      const handler = createStyle('#theme');
+      const result = handler({
+        '#theme': '(#primary, (#secondary, #tertiary))',
+      });
+
+      expect(result).toEqual({
+        '--theme-color':
+          'var(--primary-color, var(--secondary-color, var(--tertiary-color)))',
+        '--theme-color-rgb':
+          'var(--primary-color-rgb, var(--secondary-color-rgb, var(--tertiary-color-rgb)))',
+      });
+    });
+
+    it('should handle color fallback with hex literal', () => {
+      const handler = createStyle('#custom');
+      const result = handler({
+        '#custom': '(#primary, #fff)',
+      });
+
+      expect(result).toEqual({
+        '--custom-color': 'var(--primary-color, var(--fff-color, #fff))',
+        '--custom-color-rgb':
+          'var(--primary-color-rgb, var(--fff-color-rgb, 255 255 255))',
+      });
+    });
+
+    it('should handle color fallback with CSS function', () => {
+      const handler = createStyle('#background');
+      const result = handler({
+        '#background': '(#theme, rgb(255 0 0))',
+      });
+
+      expect(result).toEqual({
+        '--background-color': 'var(--theme-color, rgb(255 0 0))',
+        '--background-color-rgb': 'var(--theme-color-rgb, rgb(255 0 0))',
+      });
+    });
+
+    it('should handle custom property with -color suffix and fallback', () => {
+      const handler = createStyle('$local-placeholder-color');
+      const result = handler({
+        '$local-placeholder-color': '($placeholder-color, $dark-04-color)',
+      });
+
+      expect(result).toEqual({
+        '--local-placeholder-color':
+          'var(--placeholder-color, var(--dark-04-color))',
+        '--local-placeholder-color-rgb':
+          'var(--placeholder-color-rgb, var(--dark-04-color-rgb))',
+      });
+    });
+  });
 });
diff --git a/src/tasty/styles/color.ts b/src/tasty/styles/color.ts
index dab6f53b9..ede9b1d91 100644
--- a/src/tasty/styles/color.ts
+++ b/src/tasty/styles/color.ts
@@ -1,11 +1,19 @@
 import { parseColor } from '../utils/styles';
 
+import { convertColorChainToRgbChain } from './createStyle';
+
 export function colorStyle({ color }) {
   if (!color) return '';
 
   if (color === true) color = 'currentColor';
 
-  if (typeof color === 'string' && color.startsWith('#')) {
+  // Handle color values that need parsing:
+  // - Simple color tokens: #placeholder
+  // - Color fallback syntax: (#placeholder, #dark-04)
+  if (
+    typeof color === 'string' &&
+    (color.startsWith('#') || color.startsWith('(#'))
+  ) {
     color = parseColor(color).color || color;
   }
 
@@ -22,8 +30,8 @@ export function colorStyle({ color }) {
 
   if (name) {
     Object.assign(styles, {
-      '--current-color': `var(--${name}-color, ${name})`,
-      '--current-color-rgb': `var(--${name}-color-rgb)`,
+      '--current-color': color,
+      '--current-color-rgb': convertColorChainToRgbChain(color),
     });
   }
 
diff --git a/src/tasty/styles/createStyle.ts b/src/tasty/styles/createStyle.ts
index c35b92781..b1eceb349 100644
--- a/src/tasty/styles/createStyle.ts
+++ b/src/tasty/styles/createStyle.ts
@@ -8,6 +8,41 @@ import {
 
 const CACHE = {};
 
+/**
+ * Convert color fallback chain to RGB fallback chain.
+ * Example: var(--primary-color, var(--secondary-color)) → var(--primary-color-rgb, var(--secondary-color-rgb))
+ */
+export function convertColorChainToRgbChain(colorValue: string): string {
+  // Match var(--name-color, ...) pattern
+  const varPattern = /var\(--([a-z0-9-]+)-color\s*(?:,\s*(.+))?\)/;
+  const match = colorValue.match(varPattern);
+
+  if (!match) {
+    // Not a color variable, check if it's a color function or literal
+    if (colorValue.startsWith('rgb(') || colorValue.startsWith('rgba(')) {
+      return colorValue;
+    }
+    // Try to convert to RGB if possible
+    const rgba = strToRgb(colorValue);
+    if (rgba) {
+      const rgbValues = getRgbValuesFromRgbaString(rgba);
+      return rgbValues.join(' ');
+    }
+    return colorValue;
+  }
+
+  const [, name, fallback] = match;
+
+  if (!fallback) {
+    // Simple var without fallback
+    return `var(--${name}-color-rgb)`;
+  }
+
+  // Recursively process the fallback
+  const processedFallback = convertColorChainToRgbChain(fallback.trim());
+  return `var(--${name}-color-rgb, ${processedFallback})`;
+}
+
 export function createStyle(
   styleName: string,
   cssStyle?: string,
@@ -35,8 +70,7 @@ export function createStyle(
         const name = toSnakeCase(raw).replace(/^-+/, '');
         finalCssStyle = `--${name}-color`;
       } else {
-        finalCssStyle =
-          cssStyle || toSnakeCase(styleName).replace(/^[@$]/, '--');
+        finalCssStyle = cssStyle || toSnakeCase(styleName).replace(/^\$/, '--');
       }
 
       // convert non-string values
@@ -68,7 +102,7 @@ export function createStyle(
           if (color) {
             return {
               [finalCssStyle]: color,
-              [`${finalCssStyle}-rgb`]: `var(--${name}-color-rgb)`,
+              [`${finalCssStyle}-rgb`]: convertColorChainToRgbChain(color),
             };
           }
 
diff --git a/src/tasty/styles/fill.ts b/src/tasty/styles/fill.ts
index 41a7eb8d1..55cad5806 100644
--- a/src/tasty/styles/fill.ts
+++ b/src/tasty/styles/fill.ts
@@ -1,5 +1,7 @@
 import { parseStyle } from '../utils/styles';
 
+import { convertColorChainToRgbChain } from './createStyle';
+
 export function fillStyle({ fill }) {
   if (!fill) return '';
 
@@ -23,7 +25,7 @@ export function fillStyle({ fill }) {
     styles.push({
       $: '>*',
       '--context-fill-color': fill,
-      '--context-fill-color-rgb': `var(--${name}-color-rgb)`,
+      '--context-fill-color-rgb': convertColorChainToRgbChain(fill),
     });
   }
 
diff --git a/src/tasty/tasty.test.tsx b/src/tasty/tasty.test.tsx
index a35eedbe2..c62bca181 100644
--- a/src/tasty/tasty.test.tsx
+++ b/src/tasty/tasty.test.tsx
@@ -13,6 +13,30 @@ import { tasty } from './tasty';
 import { configure } from './index';
 
 describe('tasty() API', () => {
+  it('should handle color fallback syntax', () => {
+    const Element = tasty({
+      styles: {
+        color: '(#placeholder, #dark-04)',
+      },
+    });
+
+    const { container } = render(<Element />);
+
+    expect(container).toMatchTastySnapshot();
+  });
+
+  it('should handle fill fallback syntax', () => {
+    const Element = tasty({
+      styles: {
+        fill: '(#surface, #white)',
+      },
+    });
+
+    const { container } = render(<Element />);
+
+    expect(container).toMatchTastySnapshot();
+  });
+
   it('should provide defaults and give ability to override', () => {
     const SButton = tasty(Button, { type: 'primary' });
 
diff --git a/src/tasty/utils/styles.ts b/src/tasty/utils/styles.ts
index b81e5bf96..aee216d97 100644
--- a/src/tasty/utils/styles.ts
+++ b/src/tasty/utils/styles.ts
@@ -62,8 +62,9 @@ export type StyleStateMap = { [key: string]: StyleStateData };
 const devMode = process.env.NODE_ENV !== 'production';
 
 // Precompiled regex patterns for parseColor optimization
-const COLOR_VAR_PATTERN = /var\(--([a-z0-9-]+)-color(?:-rgb)?\)/;
-const COLOR_VAR_RGB_PATTERN = /var\(--([a-z0-9-]+)-color-rgb\)/;
+// Match var(--name-color...) and extract the name, regardless of fallbacks
+const COLOR_VAR_PATTERN = /var\(--([a-z0-9-]+)-color/;
+const COLOR_VAR_RGB_PATTERN = /var\(--([a-z0-9-]+)-color-rgb/;
 const RGB_ALPHA_PATTERN = /\/\s*([0-9.]+)\)/;
 const SIMPLE_COLOR_PATTERNS = [
   /^#[0-9a-fA-F]{3,8}$/, // Hex colors: #fff, #ffffff, #ffff, #ffffffff

From a6cc2ddef86213d02b015018b81f62b8c3ee62df Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Tue, 18 Nov 2025 15:29:14 +0100
Subject: [PATCH 18/24] fix: legacy token declaration

---
 src/components/overlays/Modal/Modal.tsx |  2 +-
 src/data/item-themes.ts                 | 11 +++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/overlays/Modal/Modal.tsx b/src/components/overlays/Modal/Modal.tsx
index 1a9aa1f55..f8bbc979a 100644
--- a/src/components/overlays/Modal/Modal.tsx
+++ b/src/components/overlays/Modal/Modal.tsx
@@ -51,7 +51,7 @@ const ModalElement = tasty({
       'type=panel': 'auto',
     },
     width: {
-      '': '@min-dialog-size 90vw',
+      '': '$min-dialog-size 90vw',
       'type=panel': 'auto',
     },
     pointerEvents: 'none',
diff --git a/src/data/item-themes.ts b/src/data/item-themes.ts
index 64d218348..3382fe86a 100644
--- a/src/data/item-themes.ts
+++ b/src/data/item-themes.ts
@@ -164,6 +164,7 @@ export const DEFAULT_CLEAR_STYLES: Styles = {
     '': '#purple-text',
     disabled: '#dark-04',
   },
+  '#placeholder': '#purple-text.5',
 } as const;
 
 export const DEFAULT_LINK_STYLES: Styles = {
@@ -239,6 +240,7 @@ export const DANGER_SECONDARY_STYLES: Styles = {
     '': '#danger',
     disabled: '#dark-04',
   },
+  '#placeholder': '#danger-text.5',
 } as const;
 
 export const DANGER_OUTLINE_STYLES: Styles = {
@@ -258,6 +260,7 @@ export const DANGER_OUTLINE_STYLES: Styles = {
     '': '#danger-text',
     disabled: '#dark-04',
   },
+  '#placeholder': '#danger-text.5',
 } as const;
 
 export const DANGER_NEUTRAL_STYLES: Styles = {
@@ -297,6 +300,7 @@ export const DANGER_CLEAR_STYLES: Styles = {
     pressed: '#danger-text',
     disabled: '#danger-text.4',
   },
+  '#placeholder': '#danger-text.5',
 } as const;
 
 export const DANGER_LINK_STYLES: Styles = {
@@ -372,6 +376,7 @@ export const SUCCESS_SECONDARY_STYLES: Styles = {
     '': '#success',
     disabled: '#dark-04',
   },
+  '#placeholder': '#success-text.5',
 } as const;
 
 export const SUCCESS_OUTLINE_STYLES: Styles = {
@@ -391,6 +396,7 @@ export const SUCCESS_OUTLINE_STYLES: Styles = {
     '': '#success-text',
     disabled: '#dark-04',
   },
+  '#placeholder': '#success-text.5',
 } as const;
 
 export const SUCCESS_NEUTRAL_STYLES: Styles = {
@@ -430,6 +436,7 @@ export const SUCCESS_CLEAR_STYLES: Styles = {
     pressed: '#success-text',
     disabled: '#success-text.4',
   },
+  '#placeholder': '#success-text.5',
 } as const;
 
 export const SUCCESS_LINK_STYLES: Styles = {
@@ -504,6 +511,7 @@ export const SPECIAL_SECONDARY_STYLES: Styles = {
     '': '#white',
     disabled: '#white.4',
   },
+  '#placeholder': '#white.5',
 } as const;
 
 export const SPECIAL_OUTLINE_STYLES: Styles = {
@@ -523,6 +531,7 @@ export const SPECIAL_OUTLINE_STYLES: Styles = {
     '': '#white',
     disabled: '#white.4',
   },
+  '#placeholder': '#white.5',
 } as const;
 
 export const SPECIAL_NEUTRAL_STYLES: Styles = {
@@ -540,6 +549,7 @@ export const SPECIAL_NEUTRAL_STYLES: Styles = {
     '': '#white',
     disabled: '#white.4',
   },
+  '#placeholder': '#white.5',
 } as const;
 
 export const SPECIAL_CLEAR_STYLES: Styles = {
@@ -563,6 +573,7 @@ export const SPECIAL_CLEAR_STYLES: Styles = {
     'pressed & hovered': '#purple-text',
     disabled: '#white.4',
   },
+  '#placeholder': '#purple-text.5',
 } as const;
 
 export const SPECIAL_LINK_STYLES: Styles = {

From 53780e158ae1681becde15d2e99df46421ddf920 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Tue, 18 Nov 2025 15:37:39 +0100
Subject: [PATCH 19/24] fix: legacy token declaration * 2

---
 src/components/overlays/Modal/Tray.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/overlays/Modal/Tray.tsx b/src/components/overlays/Modal/Tray.tsx
index f8e5fe523..70746c367 100644
--- a/src/components/overlays/Modal/Tray.tsx
+++ b/src/components/overlays/Modal/Tray.tsx
@@ -34,7 +34,7 @@ const TrayElement = tasty({
     },
     zIndex: 10,
     height: 'max 90dvh',
-    width: '@min-dialog-size 90vw',
+    width: '$min-dialog-size 90vw',
     pointerEvents: 'auto',
     transition:
       'transform .25s ease-in-out, opacity .25s linear, visibility 0ms linear',

From 4c722830e1ef366a40ba3b1906f3305bc94f5459 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Tue, 18 Nov 2025 15:39:43 +0100
Subject: [PATCH 20/24] fix: placeholders * 2

---
 src/data/item-themes.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/data/item-themes.ts b/src/data/item-themes.ts
index 3382fe86a..e3e929f55 100644
--- a/src/data/item-themes.ts
+++ b/src/data/item-themes.ts
@@ -101,6 +101,7 @@ export const DEFAULT_SECONDARY_STYLES: Styles = {
     '': '#purple',
     disabled: '#dark-04',
   },
+  '#placeholder': '#purple-text.5',
 } as const;
 
 export const DEFAULT_OUTLINE_STYLES: Styles = {

From 813e2e6f803180b76e20793e7b71c120a1254cbc Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Tue, 18 Nov 2025 15:44:33 +0100
Subject: [PATCH 21/24] fix: placeholders * 3

---
 src/components/content/Text.tsx |  2 +-
 src/data/item-themes.ts         | 16 ----------------
 src/tasty/styles/color.ts       |  2 +-
 3 files changed, 2 insertions(+), 18 deletions(-)

diff --git a/src/components/content/Text.tsx b/src/components/content/Text.tsx
index 09c2dad49..18938d0ad 100644
--- a/src/components/content/Text.tsx
+++ b/src/components/content/Text.tsx
@@ -142,7 +142,7 @@ const SelectionText = tasty(Text, {
 
 const PlaceholderText = tasty(Text, {
   styles: {
-    color: '(#placeholder, #dark-04)',
+    color: '#current.5',
   },
 });
 
diff --git a/src/data/item-themes.ts b/src/data/item-themes.ts
index e3e929f55..ccf6fc918 100644
--- a/src/data/item-themes.ts
+++ b/src/data/item-themes.ts
@@ -81,7 +81,6 @@ export const DEFAULT_PRIMARY_STYLES: Styles = {
     '': '#white',
     disabled: '#dark-04',
   },
-  '#placeholder': '#white.5',
 } as const;
 
 export const DEFAULT_SECONDARY_STYLES: Styles = {
@@ -101,7 +100,6 @@ export const DEFAULT_SECONDARY_STYLES: Styles = {
     '': '#purple',
     disabled: '#dark-04',
   },
-  '#placeholder': '#purple-text.5',
 } as const;
 
 export const DEFAULT_OUTLINE_STYLES: Styles = {
@@ -165,7 +163,6 @@ export const DEFAULT_CLEAR_STYLES: Styles = {
     '': '#purple-text',
     disabled: '#dark-04',
   },
-  '#placeholder': '#purple-text.5',
 } as const;
 
 export const DEFAULT_LINK_STYLES: Styles = {
@@ -222,7 +219,6 @@ export const DANGER_PRIMARY_STYLES: Styles = {
     '': '#white',
     disabled: '#dark-04',
   },
-  '#placeholder': '#white.5',
 } as const;
 
 export const DANGER_SECONDARY_STYLES: Styles = {
@@ -241,7 +237,6 @@ export const DANGER_SECONDARY_STYLES: Styles = {
     '': '#danger',
     disabled: '#dark-04',
   },
-  '#placeholder': '#danger-text.5',
 } as const;
 
 export const DANGER_OUTLINE_STYLES: Styles = {
@@ -261,7 +256,6 @@ export const DANGER_OUTLINE_STYLES: Styles = {
     '': '#danger-text',
     disabled: '#dark-04',
   },
-  '#placeholder': '#danger-text.5',
 } as const;
 
 export const DANGER_NEUTRAL_STYLES: Styles = {
@@ -301,7 +295,6 @@ export const DANGER_CLEAR_STYLES: Styles = {
     pressed: '#danger-text',
     disabled: '#danger-text.4',
   },
-  '#placeholder': '#danger-text.5',
 } as const;
 
 export const DANGER_LINK_STYLES: Styles = {
@@ -358,7 +351,6 @@ export const SUCCESS_PRIMARY_STYLES: Styles = {
     '': '#white',
     disabled: '#dark-04',
   },
-  '#placeholder': '#white.5',
 } as const;
 
 export const SUCCESS_SECONDARY_STYLES: Styles = {
@@ -377,7 +369,6 @@ export const SUCCESS_SECONDARY_STYLES: Styles = {
     '': '#success',
     disabled: '#dark-04',
   },
-  '#placeholder': '#success-text.5',
 } as const;
 
 export const SUCCESS_OUTLINE_STYLES: Styles = {
@@ -397,7 +388,6 @@ export const SUCCESS_OUTLINE_STYLES: Styles = {
     '': '#success-text',
     disabled: '#dark-04',
   },
-  '#placeholder': '#success-text.5',
 } as const;
 
 export const SUCCESS_NEUTRAL_STYLES: Styles = {
@@ -437,7 +427,6 @@ export const SUCCESS_CLEAR_STYLES: Styles = {
     pressed: '#success-text',
     disabled: '#success-text.4',
   },
-  '#placeholder': '#success-text.5',
 } as const;
 
 export const SUCCESS_LINK_STYLES: Styles = {
@@ -494,7 +483,6 @@ export const SPECIAL_PRIMARY_STYLES: Styles = {
     '': '#white',
     disabled: '#white.4',
   },
-  '#placeholder': '#white.5',
 } as const;
 
 export const SPECIAL_SECONDARY_STYLES: Styles = {
@@ -512,7 +500,6 @@ export const SPECIAL_SECONDARY_STYLES: Styles = {
     '': '#white',
     disabled: '#white.4',
   },
-  '#placeholder': '#white.5',
 } as const;
 
 export const SPECIAL_OUTLINE_STYLES: Styles = {
@@ -532,7 +519,6 @@ export const SPECIAL_OUTLINE_STYLES: Styles = {
     '': '#white',
     disabled: '#white.4',
   },
-  '#placeholder': '#white.5',
 } as const;
 
 export const SPECIAL_NEUTRAL_STYLES: Styles = {
@@ -550,7 +536,6 @@ export const SPECIAL_NEUTRAL_STYLES: Styles = {
     '': '#white',
     disabled: '#white.4',
   },
-  '#placeholder': '#white.5',
 } as const;
 
 export const SPECIAL_CLEAR_STYLES: Styles = {
@@ -574,7 +559,6 @@ export const SPECIAL_CLEAR_STYLES: Styles = {
     'pressed & hovered': '#purple-text',
     disabled: '#white.4',
   },
-  '#placeholder': '#purple-text.5',
 } as const;
 
 export const SPECIAL_LINK_STYLES: Styles = {
diff --git a/src/tasty/styles/color.ts b/src/tasty/styles/color.ts
index ede9b1d91..fd5dfdf64 100644
--- a/src/tasty/styles/color.ts
+++ b/src/tasty/styles/color.ts
@@ -28,7 +28,7 @@ export function colorStyle({ color }) {
     color: color,
   };
 
-  if (name) {
+  if (name && name !== 'current') {
     Object.assign(styles, {
       '--current-color': color,
       '--current-color-rgb': convertColorChainToRgbChain(color),

From c0e30c194bff2f1a7e677aa6caa150045ed421c0 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Tue, 18 Nov 2025 16:20:18 +0100
Subject: [PATCH 22/24] fix(FilterListBox): focus on selected item first

---
 .../fields/FilterListBox/FilterListBox.tsx    | 47 +++++++++++++++++--
 1 file changed, 44 insertions(+), 3 deletions(-)

diff --git a/src/components/fields/FilterListBox/FilterListBox.tsx b/src/components/fields/FilterListBox/FilterListBox.tsx
index 9c2d99ad3..2491e5509 100644
--- a/src/components/fields/FilterListBox/FilterListBox.tsx
+++ b/src/components/fields/FilterListBox/FilterListBox.tsx
@@ -552,6 +552,7 @@ export const FilterListBox = forwardRef(function FilterListBox<
   // If the currently focused item is no longer visible, move virtual focus to the first
   // available item so that arrow navigation and Enter behaviour continue to work.
   // If there are no available items, reset the selection so Enter won't select anything.
+  // Priority: focus on selected items first, then fall back to first visible item.
   useLayoutEffect(() => {
     const listState = listStateRef.current;
 
@@ -586,9 +587,49 @@ export const FilterListBox = forwardRef(function FilterListBox<
       return;
     }
 
-    // Set focus to the first visible item
-    selectionManager.setFocusedKey(visibleKeys[0]);
-  }, [searchValue, enhancedChildren]);
+    // Helper to find the first selected item that's visible
+    const findFirstVisibleSelectedKey = (): Key | null => {
+      if (selectionMode === 'single') {
+        // Single selection: check if selectedKey is visible
+        if (selectedKey != null) {
+          const selectedKeyStr = String(selectedKey);
+          if (visibleKeys.some((k) => String(k) === selectedKeyStr)) {
+            return selectedKey;
+          }
+        }
+      } else if (selectionMode === 'multiple') {
+        // Multiple selection: find first selected key that's visible
+        if (selectedKeys && selectedKeys !== 'all') {
+          for (const key of selectedKeys) {
+            const keyStr = String(key);
+            if (visibleKeys.some((k) => String(k) === keyStr)) {
+              return key;
+            }
+          }
+        }
+      }
+      return null;
+    };
+
+    // Determine which key to focus
+    let keyToFocus: Key | null = null;
+
+    // If there's no focus yet (initial state), prioritize selected items
+    if (currentFocused == null) {
+      keyToFocus = findFirstVisibleSelectedKey();
+    } else {
+      // If current focused item was filtered out, try to focus another selected item
+      keyToFocus = findFirstVisibleSelectedKey();
+    }
+
+    // Fallback to first visible item if no selected item found
+    if (keyToFocus == null) {
+      keyToFocus = visibleKeys[0];
+    }
+
+    // Set focus to the determined key
+    selectionManager.setFocusedKey(keyToFocus);
+  }, [searchValue, enhancedChildren, selectionMode, selectedKey, selectedKeys]);
 
   // Keyboard navigation handler for search input
   const { keyboardProps } = useKeyboard({

From 698667970ecbd68bd9e8008eea93281c32d647b2 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Tue, 18 Nov 2025 16:27:44 +0100
Subject: [PATCH 23/24] fix(FilterListBox): focus on selected item first * 2

---
 src/components/fields/FilterListBox/FilterListBox.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/fields/FilterListBox/FilterListBox.tsx b/src/components/fields/FilterListBox/FilterListBox.tsx
index 2491e5509..4c9d1ca51 100644
--- a/src/components/fields/FilterListBox/FilterListBox.tsx
+++ b/src/components/fields/FilterListBox/FilterListBox.tsx
@@ -627,6 +627,11 @@ export const FilterListBox = forwardRef(function FilterListBox<
       keyToFocus = visibleKeys[0];
     }
 
+    // Mark this focus change as keyboard navigation so ListBox will scroll to it
+    if (listState.lastFocusSourceRef) {
+      listState.lastFocusSourceRef.current = 'keyboard';
+    }
+
     // Set focus to the determined key
     selectionManager.setFocusedKey(keyToFocus);
   }, [searchValue, enhancedChildren, selectionMode, selectedKey, selectedKeys]);

From 46697cf6109079c9773c51ac4e8f23199cc28622 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Tue, 18 Nov 2025 16:38:07 +0100
Subject: [PATCH 24/24] fix(TextInputBase): set default input type

---
 src/components/fields/TextInput/TextInputBase.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/fields/TextInput/TextInputBase.tsx b/src/components/fields/TextInput/TextInputBase.tsx
index 7469fd70b..f76712ab7 100644
--- a/src/components/fields/TextInput/TextInputBase.tsx
+++ b/src/components/fields/TextInput/TextInputBase.tsx
@@ -370,6 +370,7 @@ function _TextInputBase(props: CubeTextInputBaseProps, ref) {
       <InputElement
         qa={qa || 'Input'}
         as={ElementType}
+        data-input-type="textinput"
         {...mergeProps(inputProps, focusProps, hoverProps)}
         ref={inputRef}
         rows={multiLine ? rows : undefined}
@@ -378,7 +379,6 @@ function _TextInputBase(props: CubeTextInputBaseProps, ref) {
         data-autofocus={autoFocus ? '' : undefined}
         autoFocus={autoFocus}
         data-size={size}
-        data-input-type="textinput"
         autoComplete={autocomplete}
         styles={inputStyles}
         disabled={!!isDisabled}