npm - @bcc-code/design-tokens - Versions diffs - 5.1.44 → 5.1.46 - Mend

@bcc-code/design-tokens 5.1.44 → 5.1.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md +13 -0
package/build/primevue/component-dark.js +2969 -128
package/build/primevue/component-light.js +2971 -130
package/build/primevue/config.js +3235 -1062
package/package.json +1 -1

package/build/primevue/config.js CHANGED Viewed

@@ -970,59 +970,7 @@ const BCCPreset = definePreset(Aura, {
     }
   },
   components: {
-    accordion: {
-      root: {
-        transitionDuration: "{transition.duration}"
-      },
-      panel: {
-        borderWidth: "0 0 var(--border-width-1) 0",
-        borderColor: "var(--color-border-default)"
-      },
-      header: {
-        color: "var(--color-text-subtle)",
-        hoverColor: "var(--color-text-default)",
-        activeColor: "var(--color-text-default)",
-        padding: "var(--space-200)",
-        fontWeight: "var(--font-weight-bold)",
-        borderRadius: "0",
-        borderWidth: "var(--border-width-0)",
-        borderColor: "var(--color-elevation-surface-default)",
-        background: "var(--color-elevation-surface-default)",
-        hoverBackground: "var(--color-elevation-surface-default)",
-        activeBackground: "var(--color-elevation-surface-default)",
-        activeHoverBackground: "var(--color-elevation-surface-default)",
-        focusRing: {
-          width: "{focus.ring.width}",
-          style: "{focus.ring.style}",
-          color: "var(--color-border-focused)",
-          offset: "{focus.ring.offset}",
-          shadow: "{focus.ring.shadow}"
-        },
-        toggleIcon: {
-          color: "var(--color-icon-subtle)",
-          hoverColor: "var(--color-icon-default)",
-          activeColor: "var(--color-icon-default)",
-          activeHoverColor: "var(--color-icon-default)"
-        },
-        first: {
-          topBorderRadius: "var(--border-radius-sm)",
-          borderWidth: "var(--border-width-0)"
-        },
-        last: {
-          bottomBorderRadius: "var(--border-radius-sm)",
-          activeBottomBorderRadius: "0"
-        },
-        gap: "var(--space-100)"
-      },
-      content: {
-        borderWidth: "var(--border-width-0)",
-        borderColor: "var(--color-border-default)",
-        background: "var(--color-elevation-surface-default)",
-        color: "var(--color-text-default)",
-        padding: "var(--space-0) var(--space-200) var(--space-200) var(--space-200)"
-      }
-    },
-    autocomplete: {
+    inputtext: {
       root: {
         background: "var(--color-elevation-surface-default)",
         disabledBackground: "var(--color-background-disabled-default)",
@@ -1038,8 +986,8 @@ const BCCPreset = definePreset(Aura, {
         placeholderColor: "var(--color-text-subtlest)",
         invalidPlaceholderColor: "var(--color-text-danger)",
         shadow: "{form.field.shadow}",
-        paddingX: "var(--space-100)",
-        paddingY: "var(--space-25)",
+        paddingX: "var(--space-150)",
+        paddingY: "var(--space-50)",
         borderRadius: "var(--border-radius-sm)",
         focusRing: {
           width: "{form.field.focus.ring.width}",
@@ -1048,266 +996,85 @@ const BCCPreset = definePreset(Aura, {
           offset: "{form.field.focus.ring.offset}",
           shadow: "{form.field.focus.ring.shadow}"
         },
-        transitionDuration: "{transition.duration}"
-      },
-      overlay: {
-        background: "var(--color-elevation-surface-default)",
-        borderColor: "var(--color-border-default)",
-        borderRadius: "var(--border-radius-sm)",
-        color: "var(--color-border-default)",
-        shadow: "{overlay.select.shadow}"
-      },
-      list: {
-        padding: "var(--space-100)",
-        gap: "var(--space-25)"
-      },
-      option: {
-        focusBackground: "var(--color-background-accent-gray-subtle-hover)",
-        selectedBackground: "var(--color-background-brand-subtlest-default)",
-        selectedFocusBackground: "var(--color-background-brand-subtler-default)",
-        color: "var(--color-text-subtle)",
-        focusColor: "var(--color-text-default)",
-        selectedColor: "var(--color-text-selected)",
-        selectedFocusColor: "var(--color-text-selected)",
-        padding: "var(--space-100) var(--space-150)",
-        borderRadius: "var(--border-radius-xs)",
-        gap: "var(--space-100)"
-      },
-      optionGroup: {
-        background: "var(--color-elevation-surface-default)",
-        color: "var(--color-text-subtlest)",
-        fontWeight: "{list.option.group.font.weight}",
-        padding: "var(--space-100) var(--space-150)"
-      },
-      dropdown: {
-        width: "var(--space-500)",
+        transitionDuration: "{form.field.transition.duration}",
         sm: {
-          width: "var(--space-400)"
+          fontSize: "var(--font-size-sm)",
+          paddingX: "var(--space-150)",
+          paddingY: "var(--space-25)",
+          minHeight: "var(--space-400)"
         },
         lg: {
-          width: "var(--space-600)"
-        },
-        borderColor: "var(--color-border-default)",
-        hoverBorderColor: "var(--color-border-default)",
-        activeBorderColor: "var(--color-border-default)",
-        borderRadius: "var(--border-radius-sm)",
-        focusRing: {
-          width: "{focus.ring.width}",
-          style: "{focus.ring.style}",
-          color: "var(--color-border-focused)",
-          offset: "{focus.ring.offset}",
-          shadow: "{focus.ring.shadow}"
-        }
-      },
-      chip: {
-        borderRadius: "var(--border-radius-xs)"
-      },
-      emptyMessage: {
-        padding: "var(--space-100) var(--space-150)"
-      },
-      colorScheme: {
-        light: {
-          chip: {
-            focusBackground: "var(--color-background-accent-gray-hover)",
-            focusColor: "var(--color-text-default)"
-          },
-          dropdown: {
-            background: "var(--color-background-accent-gray-subtle-default)",
-            hoverBackground: "var(--color-background-accent-gray-subtle-hover)",
-            activeBackground: "var(--color-background-accent-gray-subtle-pressed)",
-            color: "var(--color-icon-subtlest)",
-            hoverColor: "var(--color-icon-subtle)",
-            activeColor: "var(--color-icon-default)"
-          }
+          fontSize: "var(--font-size-lg)",
+          paddingX: "var(--space-150)",
+          paddingY: "var(--space-100)",
+          minHeight: "var(--space-600)"
         },
-        dark: {
-          chip: {
-            focusBackground: "var(--color-background-accent-gray-hover)",
-            focusColor: "var(--color-text-default)"
-          },
-          dropdown: {
-            background: "var(--color-background-accent-gray-subtle-default)",
-            hoverBackground: "var(--color-background-accent-gray-subtle-hover)",
-            activeBackground: "var(--color-background-accent-gray-subtle-pressed)",
-            color: "var(--color-icon-subtlest)",
-            hoverColor: "var(--color-icon-subtle)",
-            activeColor: "var(--color-icon-default)"
-          }
-        }
-      },
-      input: {
-        multiple: {
-          gap: "var(--space-50)",
-          minHeight: "var(--space-500)"
-        }
+        gap: "var(--space-50)",
+        minHeight: "var(--space-500)"
       }
     },
-    avatar: {
+    panel: {
       root: {
-        width: "var(--space-400)",
-        height: "var(--space-400)",
-        fontSize: "var(--font-size-sm)",
-        background: "var(--color-background-accent-gray-default)",
-        color: "var(--color-text-default)",
-        borderRadius: "var(--border-radius-sm)"
+        background: "{content.background}",
+        borderColor: "{content.border.color}",
+        color: "{content.color}",
+        borderRadius: "{content.border.radius}"
       },
-      icon: {
-        size: "var(--icon-size-sm)"
+      header: {
+        background: "rgba(0, 0, 0, 0)",
+        color: "{text.color}",
+        padding: "var(--space-200)",
+        borderColor: "{content.border.color}",
+        borderWidth: "var(--border-width-0)",
+        borderRadius: "0"
       },
-      group: {
-        borderColor: "var(--color-border-inverse)",
-        offset: "var(--space-negative-150)"
+      toggleableHeader: {
+        padding: "0.375rem 1.125rem"
       },
-      lg: {
-        width: "var(--space-500)",
-        height: "var(--space-500)",
-        fontSize: "var(--font-size-md)",
-        icon: {
-          size: "var(--icon-size-md)"
-        },
-        group: {
-          offset: "var(--space-negative-200)"
-        }
+      title: {
+        fontWeight: "var(--font-weight-medium)"
       },
-      xl: {
-        width: "var(--space-800)",
-        height: "var(--space-800)",
-        fontSize: "var(--font-size-xl)",
-        icon: {
-          size: "var(--icon-size-lg)"
-        },
-        group: {
-          offset: "var(--space-negative-300)"
-        }
+      content: {
+        padding: "0 1.125rem 1.125rem 1.125rem"
+      },
+      footer: {
+        padding: "0 1.125rem 1.125rem 1.125rem"
       }
     },
-    badge: {
+    button: {
       root: {
-        borderRadius: "var(--border-radius-sm)",
-        padding: "var(--space-0)",
-        fontSize: "var(--font-size-xs)",
-        fontWeight: "var(--font-weight-bold)",
-        minWidth: "var(--space-250)",
-        height: "var(--space-250)"
-      },
-      dot: {
-        size: "var(--space-100)"
-      },
-      sm: {
-        fontSize: "var(--font-size-xs)",
-        minWidth: "var(--space-200)",
-        height: "var(--space-200)"
-      },
-      lg: {
-        fontSize: "var(--font-size-sm)",
-        minWidth: "var(--space-300)",
-        height: "var(--space-300)"
-      },
-      xl: {
-        fontSize: "var(--font-size-md)",
-        minWidth: "var(--space-400)",
-        height: "var(--space-400)"
-      },
-      colorScheme: {
-        light: {
-          primary: {
-            background: "var(--color-background-brand-bolder-default)",
-            color: "var(--color-text-inverse)"
-          },
-          secondary: {
-            background: "var(--color-background-accent-gray-default)",
-            color: "var(--color-text-default)"
-          },
-          success: {
-            background: "var(--color-background-success-bolder-default)",
-            color: "var(--color-text-inverse)"
-          },
-          info: {
-            background: "var(--color-background-information-bolder-default)",
-            color: "var(--color-text-inverse)"
-          },
-          warn: {
-            background: "var(--color-background-warning-bolder-default)",
-            color: "var(--color-text-inverse)"
-          },
-          danger: {
-            background: "var(--color-background-danger-bolder-default)",
-            color: "var(--color-text-inverse)"
-          },
-          contrast: {
-            background: "var(--color-background-accent-gray-boldest-default)",
-            color: "var(--color-text-inverse)"
-          }
-        },
-        dark: {
-          primary: {
-            background: "var(--color-background-brand-bolder-default)",
-            color: "var(--color-text-inverse)"
-          },
-          secondary: {
-            background: "var(--color-background-accent-gray-default)",
-            color: "var(--color-text-default)"
-          },
-          success: {
-            background: "var(--color-background-success-bolder-default)",
-            color: "var(--color-text-inverse)"
-          },
-          info: {
-            background: "var(--color-background-information-bolder-default)",
-            color: "var(--color-text-inverse)"
-          },
-          warn: {
-            background: "var(--color-background-warning-bolder-default)",
-            color: "var(--color-text-inverse)"
-          },
-          danger: {
-            background: "var(--color-background-danger-bolder-default)",
-            color: "var(--color-text-inverse)"
-          },
-          contrast: {
-            background: "var(--color-background-accent-gray-boldest-default)",
-            color: "var(--color-text-inverse)"
-          }
-        }
-      },
-      circle: {
-        borderRadius: "9999px"
-      }
-    },
-    button: {
-      root: {
-        borderRadius: "var(--border-radius-md)",
-        roundedBorderRadius: "var(--border-radius-full)",
-        gap: "var(--space-100)",
-        paddingX: "var(--space-200)",
-        paddingY: "var(--space-75)",
-        iconOnlyWidth: "var(--space-500)",
-        sm: {
-          fontSize: "var(--font-size-sm)",
-          paddingX: "var(--space-150)",
-          paddingY: "var(--space-50)",
-          iconOnlyWidth: "var(--space-400)",
-          minHeight: "var(--space-400)"
-        },
-        lg: {
-          fontSize: "var(--font-size-lg)",
-          paddingX: "var(--space-250)",
-          paddingY: "var(--space-100)",
-          iconOnlyWidth: "var(--space-600)",
-          minHeight: "var(--space-600)"
-        },
-        label: {
-          fontWeight: "var(--font-weight-medium)"
-        },
-        raisedShadow: "0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)",
-        focusRing: {
-          width: "{focus.ring.width}",
-          style: "{focus.ring.style}",
-          offset: "{focus.ring.offset}"
-        },
-        badgeSize: "var(--space-200)",
-        transitionDuration: "{form.field.transition.duration}",
-        minHeight: "var(--space-500)"
+        borderRadius: "var(--border-radius-md)",
+        roundedBorderRadius: "var(--border-radius-full)",
+        gap: "var(--space-100)",
+        paddingX: "var(--space-200)",
+        paddingY: "var(--space-75)",
+        iconOnlyWidth: "var(--space-500)",
+        sm: {
+          fontSize: "var(--font-size-sm)",
+          paddingX: "var(--space-150)",
+          paddingY: "var(--space-50)",
+          iconOnlyWidth: "var(--space-400)",
+          minHeight: "var(--space-400)"
+        },
+        lg: {
+          fontSize: "var(--font-size-lg)",
+          paddingX: "var(--space-250)",
+          paddingY: "var(--space-100)",
+          iconOnlyWidth: "var(--space-600)",
+          minHeight: "var(--space-600)"
+        },
+        label: {
+          fontWeight: "var(--font-weight-medium)"
+        },
+        raisedShadow: "0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          offset: "{focus.ring.offset}"
+        },
+        badgeSize: "var(--space-200)",
+        transitionDuration: "{form.field.transition.duration}",
+        minHeight: "var(--space-500)"
       },
       colorScheme: {
         light: {
@@ -1776,6 +1543,172 @@ const BCCPreset = definePreset(Aura, {
         }
       }
     },
+    iconfield: {
+      icon: {
+        color: "var(--color-icon-subtlest)"
+      }
+    },
+    toggleswitch: {
+      root: {
+        width: "var(--space-500)",
+        height: "var(--space-300)",
+        borderRadius: "var(--border-radius-3xl)",
+        gap: "var(--space-50)",
+        shadow: "{form.field.shadow}",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "{focus.ring.color}",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        },
+        borderWidth: "var(--border-width-1)",
+        borderColor: "transparent",
+        hoverBorderColor: "transparent",
+        checkedBorderColor: "transparent",
+        checkedHoverBorderColor: "transparent",
+        invalidBorderColor: "{form.field.invalid.border.color}",
+        transitionDuration: "{form.field.transition.duration}",
+        slideDuration: "0.2s"
+      },
+      handle: {
+        borderRadius: "var(--border-radius-full)",
+        size: "var(--space-200)"
+      },
+      colorScheme: {
+        light: {
+          root: {
+            background: "var(--color-background-accent-gray-default)",
+            disabledBackground: "var(--color-background-disabled-default)",
+            hoverBackground: "var(--color-background-accent-gray-hover)",
+            checkedBackground: "var(--color-background-brand-bolder-default)",
+            checkedHoverBackground: "var(--color-background-brand-bolder-default)"
+          },
+          handle: {
+            background: "var(--color-elevation-surface-default)",
+            disabledBackground: "var(--color-icon-disabled)",
+            hoverBackground: "var(--color-elevation-surface-hovered)",
+            checkedBackground: "var(--color-elevation-surface-default)",
+            checkedHoverBackground: "var(--color-elevation-surface-default)",
+            color: "var(--color-text-subtlest)",
+            hoverColor: "var(--color-text-default)",
+            checkedColor: "var(--color-background-brand-bolder-default)",
+            checkedHoverColor: "var(--color-background-brand-bolder-hover)"
+          }
+        },
+        dark: {
+          root: {
+            background: "var(--color-background-accent-gray-default)",
+            disabledBackground: "var(--color-background-disabled-default)",
+            hoverBackground: "var(--color-background-accent-gray-hover)",
+            checkedBackground: "var(--color-background-brand-bolder-default)",
+            checkedHoverBackground: "var(--color-background-brand-bolder-default)"
+          },
+          handle: {
+            background: "var(--color-elevation-surface-default)",
+            disabledBackground: "var(--color-icon-disabled)",
+            hoverBackground: "var(--color-elevation-surface-hovered)",
+            checkedBackground: "var(--color-elevation-surface-default)",
+            checkedHoverBackground: "var(--color-elevation-surface-default)",
+            color: "var(--color-text-subtlest)",
+            hoverColor: "var(--color-text-default)",
+            checkedColor: "var(--color-background-brand-bolder-default)",
+            checkedHoverColor: "var(--color-background-brand-bolder-hover)"
+          }
+        }
+      }
+    },
+    floatlabel: {
+      root: {
+        color: "var(--color-text-subtlest)",
+        focusColor: "var(--color-text-subtlest)",
+        activeColor: "var(--color-text-default)",
+        invalidColor: "var(--color-text-danger)",
+        transitionDuration: "0.2s",
+        positionX: "var(--space-150)",
+        positionY: "var(--space-50)",
+        fontWeight: "var(--font-weight-medium)",
+        active: {
+          fontSize: "var(--font-size-xs)",
+          fontWeight: "var(--font-weight-regular)"
+        }
+      },
+      over: {
+        active: {
+          top: "var(--space-negative-250)"
+        }
+      },
+      in: {
+        input: {
+          paddingTop: "var(--space-300)",
+          paddingBottom: "var(--space-50)"
+        },
+        active: {
+          top: "var(--space-50)"
+        }
+      },
+      on: {
+        borderRadius: "var(--border-radius-2xs)",
+        active: {
+          background: "var(--color-elevation-surface-default)",
+          padding: "var(--space-0) var(--space-25)"
+        },
+        gap: "var(--space-negative-100)"
+      }
+    },
+    radiobutton: {
+      root: {
+        width: "var(--space-250)",
+        height: "var(--space-250)",
+        background: "var(--color-elevation-surface-default)",
+        checkedBackground: "var(--color-background-brand-bolder-default)",
+        checkedHoverBackground: "var(--color-background-brand-bolder-hover)",
+        disabledBackground: "var(--color-background-disabled-default)",
+        filledBackground: "var(--color-background-accent-gray-subtler-default)",
+        borderColor: "var(--color-border-default)",
+        hoverBorderColor: "var(--color-border-bold)",
+        focusBorderColor: "var(--color-border-focused)",
+        checkedBorderColor: "var(--color-background-brand-bolder-default)",
+        checkedHoverBorderColor: "var(--color-background-brand-bolder-hover)",
+        checkedFocusBorderColor: "var(--color-border-focused)",
+        checkedDisabledBorderColor: "var(--color-border-disabled)",
+        invalidBorderColor: "var(--color-border-danger)",
+        shadow: "{form.field.shadow}",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "var(--color-border-focused)",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        },
+        transitionDuration: "{form.field.transition.duration}",
+        sm: {
+          width: "var(--space-200)",
+          height: "var(--space-200)"
+        },
+        lg: {
+          width: "var(--space-300)",
+          height: "var(--space-300)"
+        }
+      },
+      icon: {
+        size: "var(--space-150)",
+        checkedColor: "var(--color-icon-inverse)",
+        checkedHoverColor: "var(--color-icon-inverse)",
+        disabledColor: "var(--color-icon-disabled)",
+        sm: {
+          size: "var(--space-100)",
+          borderRadius: "9999px"
+        },
+        lg: {
+          size: "var(--space-200)",
+          borderRadius: "9999px"
+        },
+        borderRadius: "9999px"
+      },
+      gap: "var(--space-100)",
+      borderRadius: "9999px"
+    },
     checkbox: {
       root: {
         borderRadius: "var(--border-radius-xs)",
@@ -1827,95 +1760,7 @@ const BCCPreset = definePreset(Aura, {
         }
       }
     },
-    chip: {
-      root: {
-        borderRadius: "var(--border-radius-full)",
-        paddingX: "var(--space-100)",
-        paddingY: "var(--space-75)",
-        gap: "var(--space-50)",
-        transitionDuration: "{transition.duration}"
-      },
-      image: {
-        width: "var(--space-300)",
-        height: "var(--space-300)"
-      },
-      icon: {
-        size: "var(--space-250)"
-      },
-      removeIcon: {
-        size: "var(--space-250)",
-        focusRing: {
-          width: "{focus.ring.width}",
-          style: "{focus.ring.style}",
-          color: "var(--color-border-focused)",
-          offset: "{focus.ring.offset}",
-          shadow: "{form.field.focus.ring.shadow}"
-        },
-        borderRadius: "9999px"
-      },
-      colorScheme: {
-        light: {
-          root: {
-            background: "var(--color-background-accent-gray-default)",
-            color: "var(--color-text-default)"
-          },
-          icon: {
-            color: "var(--color-icon-default)"
-          },
-          removeIcon: {
-            color: "var(--color-icon-default)"
-          }
-        },
-        dark: {
-          root: {
-            background: "var(--color-background-accent-gray-default)",
-            color: "var(--color-text-default)"
-          },
-          icon: {
-            color: "var(--color-icon-default)"
-          },
-          removeIcon: {
-            color: "var(--color-icon-default)"
-          }
-        }
-      }
-    },
-    divider: {
-      root: {
-        borderColor: "var(--color-background-alpha-subtle-default)"
-      },
-      content: {
-        background: "transparent",
-        color: "var(--color-text-default)",
-        gap: "var(--space-100)"
-      },
-      horizontal: {
-        margin: "var(--space-200) 0",
-        padding: "var(--space-100)",
-        content: {
-          padding: "0 var(--space-100)"
-        }
-      },
-      vertical: {
-        margin: "0 var(--space-200)",
-        padding: "var(--space-100)",
-        content: {
-          padding: "var(--space-100) 0"
-        }
-      }
-    },
-    inputgroup: {
-      addon: {
-        background: "var(--color-elevation-surface-default)",
-        borderColor: "var(--color-border-default)",
-        color: "var(--color-text-subtle)",
-        borderRadius: "var(--border-radius-sm)",
-        padding: "var(--space-100)",
-        minWidth: "var(--space-500)",
-        minHeight: "var(--space-500)"
-      }
-    },
-    inputtext: {
+    autocomplete: {
       root: {
         background: "var(--color-elevation-surface-default)",
         disabledBackground: "var(--color-background-disabled-default)",
@@ -1931,8 +1776,8 @@ const BCCPreset = definePreset(Aura, {
         placeholderColor: "var(--color-text-subtlest)",
         invalidPlaceholderColor: "var(--color-text-danger)",
         shadow: "{form.field.shadow}",
-        paddingX: "var(--space-150)",
-        paddingY: "var(--space-50)",
+        paddingX: "var(--space-100)",
+        paddingY: "var(--space-25)",
         borderRadius: "var(--border-radius-sm)",
         focusRing: {
           width: "{form.field.focus.ring.width}",
@@ -1941,41 +1786,18 @@ const BCCPreset = definePreset(Aura, {
           offset: "{form.field.focus.ring.offset}",
           shadow: "{form.field.focus.ring.shadow}"
         },
-        transitionDuration: "{form.field.transition.duration}",
-        sm: {
-          fontSize: "var(--font-size-sm)",
-          paddingX: "var(--space-150)",
-          paddingY: "var(--space-25)",
-          minHeight: "var(--space-400)"
-        },
-        lg: {
-          fontSize: "var(--font-size-lg)",
-          paddingX: "var(--space-150)",
-          paddingY: "var(--space-100)",
-          minHeight: "var(--space-600)"
-        },
-        gap: "var(--space-50)",
-        minHeight: "var(--space-500)"
-      }
-    },
-    listbox: {
-      root: {
+        transitionDuration: "{transition.duration}"
+      },
+      overlay: {
         background: "var(--color-elevation-surface-default)",
-        disabledBackground: "var(--color-background-disabled-default)",
         borderColor: "var(--color-border-default)",
-        invalidBorderColor: "var(--color-border-danger)",
-        color: "var(--color-elevation-surface-default)",
-        disabledColor: "var(--color-background-accent-gray-default)",
-        shadow: "{form.field.shadow}",
         borderRadius: "var(--border-radius-sm)",
-        transitionDuration: "{form.field.transition.duration}"
+        color: "var(--color-border-default)",
+        shadow: "{overlay.select.shadow}"
       },
       list: {
         padding: "var(--space-100)",
-        gap: "var(--space-25)",
-        header: {
-          padding: "var(--space-100)"
-        }
+        gap: "var(--space-25)"
       },
       option: {
         focusBackground: "var(--color-background-accent-gray-subtle-hover)",
@@ -1986,7 +1808,8 @@ const BCCPreset = definePreset(Aura, {
         selectedColor: "var(--color-text-selected)",
         selectedFocusColor: "var(--color-text-selected)",
         padding: "var(--space-100) var(--space-150)",
-        borderRadius: "var(--border-radius-xs)"
+        borderRadius: "var(--border-radius-xs)",
+        gap: "var(--space-100)"
       },
       optionGroup: {
         background: "var(--color-elevation-surface-default)",
@@ -1994,211 +1817,496 @@ const BCCPreset = definePreset(Aura, {
         fontWeight: "{list.option.group.font.weight}",
         padding: "var(--space-100) var(--space-150)"
       },
-      checkmark: {
-        color: "var(--color-icon-subtle)",
-        gutterStart: "var(--space-negative-75)",
-        gutterEnd: "var(--space-75)"
+      dropdown: {
+        width: "var(--space-500)",
+        sm: {
+          width: "var(--space-400)"
+        },
+        lg: {
+          width: "var(--space-600)"
+        },
+        borderColor: "var(--color-border-default)",
+        hoverBorderColor: "var(--color-border-default)",
+        activeBorderColor: "var(--color-border-default)",
+        borderRadius: "var(--border-radius-sm)",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "var(--color-border-focused)",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        }
+      },
+      chip: {
+        borderRadius: "var(--border-radius-xs)"
       },
       emptyMessage: {
         padding: "var(--space-100) var(--space-150)"
       },
       colorScheme: {
         light: {
-          option: {
-            stripedBackground: "{surface.50}"
+          chip: {
+            focusBackground: "var(--color-background-accent-gray-hover)",
+            focusColor: "var(--color-text-default)"
+          },
+          dropdown: {
+            background: "var(--color-background-accent-gray-subtle-default)",
+            hoverBackground: "var(--color-background-accent-gray-subtle-hover)",
+            activeBackground: "var(--color-background-accent-gray-subtle-pressed)",
+            color: "var(--color-icon-subtlest)",
+            hoverColor: "var(--color-icon-subtle)",
+            activeColor: "var(--color-icon-default)"
           }
         },
         dark: {
-          option: {
-            stripedBackground: "{surface.900}"
+          chip: {
+            focusBackground: "var(--color-background-accent-gray-hover)",
+            focusColor: "var(--color-text-default)"
+          },
+          dropdown: {
+            background: "var(--color-background-accent-gray-subtle-default)",
+            hoverBackground: "var(--color-background-accent-gray-subtle-hover)",
+            activeBackground: "var(--color-background-accent-gray-subtle-pressed)",
+            color: "var(--color-icon-subtlest)",
+            hoverColor: "var(--color-icon-subtle)",
+            activeColor: "var(--color-icon-default)"
           }
         }
+      },
+      input: {
+        multiple: {
+          gap: "var(--space-50)",
+          minHeight: "var(--space-500)"
+        }
       }
     },
-    message: {
+    datepicker: {
       root: {
-        borderRadius: "var(--border-radius-sm)",
-        borderWidth: "var(--border-width-1)",
         transitionDuration: "{transition.duration}"
       },
-      content: {
-        padding: "var(--space-75) var(--space-150)",
+      panel: {
+        background: "var(--color-elevation-surface-default)",
+        borderColor: "var(--color-border-default)",
+        color: "var(--color-text-default)",
+        borderRadius: "var(--border-radius-sm)",
+        shadow: "{overlay.popover.shadow}",
+        padding: "var(--space-200) var(--space-150)"
+      },
+      header: {
+        background: "var(--color-elevation-surface-default)",
+        borderColor: "var(--color-border-default)",
+        color: "var(--color-text-default)",
+        padding: "var(--space-0) var(--space-100) var(--space-0) var(--space-0)"
+      },
+      title: {
         gap: "var(--space-100)",
-        sm: {
-          padding: "var(--space-25) var(--space-100)"
-        },
-        lg: {
-          padding: "var(--space-100) var(--space-200)"
-        }
+        fontWeight: "var(--font-weight-medium)"
       },
-      text: {
-        fontSize: "var(--font-size-sm)",
-        fontWeight: "var(--font-weight-medium)",
+      dropdown: {
+        width: "var(--space-500)",
         sm: {
-          fontSize: "var(--font-size-sm)"
+          width: "var(--space-400)"
         },
         lg: {
-          fontSize: "var(--font-size-md)"
-        },
-        lineHeight: "var(--line-height-4)"
-      },
-      icon: {
-        size: "var(--space-250)",
-        sm: {
-          size: "var(--space-250)"
+          width: "var(--space-500)"
         },
-        lg: {
-          size: "var(--space-250)"
-        }
-      },
-      closeButton: {
-        width: "var(--space-300)",
-        height: "var(--space-300)",
-        borderRadius: "var(--border-radius-lg)",
+        borderColor: "var(--color-border-default)",
+        hoverBorderColor: "var(--color-border-default)",
+        activeBorderColor: "var(--color-background-accent-gray-subtle-pressed)",
+        borderRadius: "var(--border-radius-sm)",
         focusRing: {
           width: "{focus.ring.width}",
           style: "{focus.ring.style}",
-          offset: "{focus.ring.offset}"
+          color: "var(--color-border-focused)",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
         }
       },
-      closeIcon: {
-        size: "var(--space-250)",
-        sm: {
-          size: "var(--space-150)"
-        },
-        lg: {
-          size: "var(--space-200)"
-        }
+      inputIcon: {
+        color: "var(--color-icon-subtlest)"
       },
-      simple: {
-        content: {
-          padding: "var(--space-0)"
-        }
+      selectMonth: {
+        hoverBackground: "var(--color-background-accent-gray-subtler-hover)",
+        color: "var(--color-text-default)",
+        hoverColor: "var(--color-text-default)",
+        padding: "var(--space-50) var(--space-100)",
+        borderRadius: "var(--border-radius-sm)"
       },
-      colorScheme: {
-        light: {
-          info: {
-            background: "var(--color-background-information-default)",
-            borderColor: "var(--color-border-information)",
-            color: "var(--color-text-information)",
-            shadow: "0 4px 8px 0 rgba(2, 5, 10, 0.04)",
-            closeButton: {
-              hoverBackground: "var(--color-background-information-hover)",
-              focusRing: {
-                color: "var(--color-border-information)",
-                shadow: "0 0 0 0 #00000000"
-              }
-            },
-            outlined: {
-              color: "var(--color-text-information)",
-              borderColor: "var(--color-border-information)"
-            },
-            simple: {
-              color: "var(--color-text-information)"
-            }
+      selectYear: {
+        hoverBackground: "var(--color-background-accent-gray-subtler-hover)",
+        color: "var(--color-text-default)",
+        hoverColor: "var(--color-text-default)",
+        padding: "var(--space-50) var(--space-100)",
+        borderRadius: "var(--border-radius-sm)"
+      },
+      group: {
+        borderColor: "var(--color-border-default)",
+        gap: "var(--space-200) var(--space-150)"
+      },
+      dayView: {
+        margin: "var(--space-100) var(--space-0) var(--space-0) var(--space-0)"
+      },
+      weekDay: {
+        padding: "var(--space-50)",
+        fontWeight: "var(--font-weight-medium)",
+        color: "var(--color-text-subtlest)"
+      },
+      date: {
+        hoverBackground: "var(--color-background-accent-gray-subtle-hover)",
+        selectedBackground: "var(--color-background-brand-bolder-default)",
+        rangeSelectedBackground: "var(--color-background-selected-default)",
+        color: "var(--color-text-default)",
+        hoverColor: "var(--color-text-default)",
+        selectedColor: "var(--color-text-inverse)",
+        rangeSelectedColor: "var(--color-text-selected)",
+        width: "var(--space-400)",
+        height: "var(--space-400)",
+        borderRadius: "var(--border-radius-full)",
+        padding: "var(--space-50)",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "var(--color-border-focused)",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        }
+      },
+      monthView: {
+        margin: "var(--space-100) var(--space-0) var(--space-0) var(--space-0)"
+      },
+      month: {
+        padding: "var(--space-75)",
+        borderRadius: "var(--border-radius-sm)"
+      },
+      yearView: {
+        margin: "var(--space-100) var(--space-0) var(--space-0) var(--space-0)"
+      },
+      year: {
+        padding: "var(--space-75)",
+        borderRadius: "var(--border-radius-sm)"
+      },
+      buttonbar: {
+        padding: "var(--space-100) var(--space-0) var(--space-0) var(--space-0)",
+        borderColor: "var(--color-border-default)"
+      },
+      timePicker: {
+        padding: "var(--space-100) var(--space-0) var(--space-0) var(--space-0)",
+        borderColor: "var(--color-border-default)",
+        gap: "var(--space-100)",
+        buttonGap: "var(--space-50)"
+      },
+      colorScheme: {
+        light: {
+          dropdown: {
+            background: "var(--color-background-accent-gray-subtle-default)",
+            hoverBackground: "var(--color-background-accent-gray-subtle-hover)",
+            activeBackground: "var(--color-background-accent-gray-subtle-pressed)",
+            color: "var(--color-text-subtlest)",
+            hoverColor: "var(--color-text-subtle)",
+            activeColor: "var(--color-text-default)"
+          },
+          today: {
+            background: "var(--color-background-accent-gray-default)",
+            color: "var(--color-text-default)"
+          }
+        },
+        dark: {
+          dropdown: {
+            background: "var(--color-background-accent-gray-subtle-default)",
+            hoverBackground: "var(--color-background-accent-gray-subtle-hover)",
+            activeBackground: "var(--color-background-accent-gray-subtle-pressed)",
+            color: "var(--color-text-subtlest)",
+            hoverColor: "var(--color-text-subtle)",
+            activeColor: "var(--color-text-default)"
+          },
+          today: {
+            background: "var(--color-background-accent-gray-default)",
+            color: "var(--color-text-default)"
+          }
+        }
+      }
+    },
+    rating: {
+      root: {
+        gap: "var(--space-50)",
+        transitionDuration: "{transition.duration}",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "{focus.ring.color}",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        }
+      },
+      icon: {
+        size: "var(--space-200)",
+        color: "{text.muted.color}",
+        hoverColor: "{primary.color}",
+        activeColor: "{primary.color}"
+      }
+    },
+    avatar: {
+      root: {
+        width: "var(--space-400)",
+        height: "var(--space-400)",
+        fontSize: "var(--font-size-sm)",
+        background: "var(--color-background-accent-gray-default)",
+        color: "var(--color-text-default)",
+        borderRadius: "var(--border-radius-sm)"
+      },
+      icon: {
+        size: "var(--icon-size-sm)"
+      },
+      group: {
+        borderColor: "var(--color-border-inverse)",
+        offset: "var(--space-negative-150)"
+      },
+      lg: {
+        width: "var(--space-500)",
+        height: "var(--space-500)",
+        fontSize: "var(--font-size-md)",
+        icon: {
+          size: "var(--icon-size-md)"
+        },
+        group: {
+          offset: "var(--space-negative-200)"
+        }
+      },
+      xl: {
+        width: "var(--space-800)",
+        height: "var(--space-800)",
+        fontSize: "var(--font-size-xl)",
+        icon: {
+          size: "var(--icon-size-lg)"
+        },
+        group: {
+          offset: "var(--space-negative-300)"
+        }
+      }
+    },
+    badge: {
+      root: {
+        borderRadius: "var(--border-radius-sm)",
+        padding: "var(--space-0)",
+        fontSize: "var(--font-size-xs)",
+        fontWeight: "var(--font-weight-bold)",
+        minWidth: "var(--space-250)",
+        height: "var(--space-250)"
+      },
+      dot: {
+        size: "var(--space-100)"
+      },
+      sm: {
+        fontSize: "var(--font-size-xs)",
+        minWidth: "var(--space-200)",
+        height: "var(--space-200)"
+      },
+      lg: {
+        fontSize: "var(--font-size-sm)",
+        minWidth: "var(--space-300)",
+        height: "var(--space-300)"
+      },
+      xl: {
+        fontSize: "var(--font-size-md)",
+        minWidth: "var(--space-400)",
+        height: "var(--space-400)"
+      },
+      colorScheme: {
+        light: {
+          primary: {
+            background: "var(--color-background-brand-bolder-default)",
+            color: "var(--color-text-inverse)"
+          },
+          secondary: {
+            background: "var(--color-background-accent-gray-default)",
+            color: "var(--color-text-default)"
           },
           success: {
-            background: "var(--color-background-success-default)",
-            borderColor: "var(--color-border-success)",
-            color: "var(--color-text-success)",
-            shadow: "0 4px 8px 0 rgba(1, 8, 4, 0.04)",
-            closeButton: {
-              hoverBackground: "var(--color-background-success-hover)",
-              focusRing: {
-                color: "var(--color-border-success)",
-                shadow: "0 0 0 0 #00000000"
-              }
-            },
-            outlined: {
-              color: "var(--color-text-success)",
-              borderColor: "var(--color-border-success)"
-            },
-            simple: {
-              color: "var(--color-text-success)"
-            }
+            background: "var(--color-background-success-bolder-default)",
+            color: "var(--color-text-inverse)"
           },
-          warn: {
-            background: "var(--color-background-warning-default)",
-            borderColor: "var(--color-border-warning)",
-            color: "var(--color-text-warning-default)",
-            shadow: "0 4px 8px 0 rgba(9, 7, 0, 0.04)",
-            closeButton: {
-              hoverBackground: "var(--color-background-warning-hover)",
-              focusRing: {
-                color: "var(--color-border-warning)",
-                shadow: "0 0 0 0 #00000000"
-              }
-            },
-            outlined: {
-              color: "var(--color-text-warning-default)",
-              borderColor: "var(--color-border-warning)"
-            },
-            simple: {
-              color: "var(--color-text-warning-default)"
-            }
+          info: {
+            background: "var(--color-background-information-bolder-default)",
+            color: "var(--color-text-inverse)"
           },
-          error: {
-            background: "var(--color-background-danger-default)",
-            borderColor: "var(--color-border-danger)",
-            color: "var(--color-text-danger)",
-            shadow: "0 4px 8px 0 rgba(10, 3, 3, 0.04)",
-            closeButton: {
-              hoverBackground: "var(--color-background-danger-hover)",
-              focusRing: {
-                color: "var(--color-border-danger)",
-                shadow: "0 0 0 0 #00000000"
-              }
-            },
-            outlined: {
-              color: "var(--color-text-danger)",
-              borderColor: "var(--color-border-danger)"
-            },
-            simple: {
-              color: "var(--color-text-danger)"
-            }
+          warn: {
+            background: "var(--color-background-warning-bolder-default)",
+            color: "var(--color-text-inverse)"
           },
-          secondary: {
-            background: "var(--color-background-accent-gray-subtler-default)",
-            borderColor: "var(--color-border-accent-gray)",
-            color: "var(--color-text-default)",
-            shadow: "0 4px 8px 0 rgba(4, 5, 6, 0.04)",
-            closeButton: {
-              hoverBackground: "var(--color-background-accent-gray-subtler-hover)",
-              focusRing: {
-                color: "var(--color-border-accent-gray)",
-                shadow: "0 0 0 0 #00000000"
-              }
-            },
-            outlined: {
-              color: "var(--color-text-default)",
-              borderColor: "var(--color-border-accent-gray)"
-            },
-            simple: {
-              color: "var(--color-text-default)"
-            }
+          danger: {
+            background: "var(--color-background-danger-bolder-default)",
+            color: "var(--color-text-inverse)"
           },
           contrast: {
             background: "var(--color-background-accent-gray-boldest-default)",
-            borderColor: "var(--color-icon-default)",
-            color: "var(--color-text-inverse)",
-            shadow: "0 4px 8px 0 rgba(0, 0, 1, 0.04)",
-            closeButton: {
-              hoverBackground: "var(--color-background-accent-gray-boldest-hover)",
-              focusRing: {
-                color: "var(--color-border-inverse)",
-                shadow: "0 0 0 0 #00000000"
-              }
-            },
-            outlined: {
-              color: "var(--color-text-default)",
-              borderColor: "var(--color-background-accent-gray-boldest-default)"
-            },
-            simple: {
-              color: "var(--color-text-default)"
-            }
+            color: "var(--color-text-inverse)"
+          }
+        },
+        dark: {
+          primary: {
+            background: "var(--color-background-brand-bolder-default)",
+            color: "var(--color-text-inverse)"
+          },
+          secondary: {
+            background: "var(--color-background-accent-gray-default)",
+            color: "var(--color-text-default)"
+          },
+          success: {
+            background: "var(--color-background-success-bolder-default)",
+            color: "var(--color-text-inverse)"
+          },
+          info: {
+            background: "var(--color-background-information-bolder-default)",
+            color: "var(--color-text-inverse)"
+          },
+          warn: {
+            background: "var(--color-background-warning-bolder-default)",
+            color: "var(--color-text-inverse)"
+          },
+          danger: {
+            background: "var(--color-background-danger-bolder-default)",
+            color: "var(--color-text-inverse)"
+          },
+          contrast: {
+            background: "var(--color-background-accent-gray-boldest-default)",
+            color: "var(--color-text-inverse)"
+          }
+        }
+      },
+      circle: {
+        borderRadius: "9999px"
+      }
+    },
+    chip: {
+      root: {
+        borderRadius: "var(--border-radius-full)",
+        paddingX: "var(--space-100)",
+        paddingY: "var(--space-75)",
+        gap: "var(--space-50)",
+        transitionDuration: "{transition.duration}"
+      },
+      image: {
+        width: "var(--space-300)",
+        height: "var(--space-300)"
+      },
+      icon: {
+        size: "var(--space-250)"
+      },
+      removeIcon: {
+        size: "var(--space-250)",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "var(--color-border-focused)",
+          offset: "{focus.ring.offset}",
+          shadow: "{form.field.focus.ring.shadow}"
+        },
+        borderRadius: "9999px"
+      },
+      colorScheme: {
+        light: {
+          root: {
+            background: "var(--color-background-accent-gray-default)",
+            color: "var(--color-text-default)"
+          },
+          icon: {
+            color: "var(--color-icon-default)"
+          },
+          removeIcon: {
+            color: "var(--color-icon-default)"
           }
         },
         dark: {
+          root: {
+            background: "var(--color-background-accent-gray-default)",
+            color: "var(--color-text-default)"
+          },
+          icon: {
+            color: "var(--color-icon-default)"
+          },
+          removeIcon: {
+            color: "var(--color-icon-default)"
+          }
+        }
+      }
+    },
+    progressbar: {
+      root: {
+        background: "var(--color-background-accent-gray-default)",
+        borderRadius: "var(--border-radius-sm)",
+        height: "var(--space-250)"
+      },
+      value: {
+        background: "var(--color-background-brand-bolder-default)"
+      },
+      label: {
+        color: "var(--color-text-inverse)",
+        fontSize: "var(--font-size-xs)",
+        fontWeight: "var(--font-weight-medium)"
+      }
+    },
+    message: {
+      root: {
+        borderRadius: "var(--border-radius-sm)",
+        borderWidth: "var(--border-width-1)",
+        transitionDuration: "{transition.duration}"
+      },
+      content: {
+        padding: "var(--space-75) var(--space-150)",
+        gap: "var(--space-100)",
+        sm: {
+          padding: "var(--space-25) var(--space-100)"
+        },
+        lg: {
+          padding: "var(--space-100) var(--space-200)"
+        }
+      },
+      text: {
+        fontSize: "var(--font-size-sm)",
+        fontWeight: "var(--font-weight-medium)",
+        sm: {
+          fontSize: "var(--font-size-sm)"
+        },
+        lg: {
+          fontSize: "var(--font-size-md)"
+        },
+        lineHeight: "var(--line-height-4)"
+      },
+      icon: {
+        size: "var(--space-250)",
+        sm: {
+          size: "var(--space-250)"
+        },
+        lg: {
+          size: "var(--space-250)"
+        }
+      },
+      closeButton: {
+        width: "var(--space-300)",
+        height: "var(--space-300)",
+        borderRadius: "var(--border-radius-lg)",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          offset: "{focus.ring.offset}"
+        }
+      },
+      closeIcon: {
+        size: "var(--space-250)",
+        sm: {
+          size: "var(--space-150)"
+        },
+        lg: {
+          size: "var(--space-200)"
+        }
+      },
+      simple: {
+        content: {
+          padding: "var(--space-0)"
+        }
+      },
+      colorScheme: {
+        light: {
           info: {
             background: "var(--color-background-information-default)",
             borderColor: "var(--color-border-information)",
@@ -2319,319 +2427,2249 @@ const BCCPreset = definePreset(Aura, {
               color: "var(--color-text-default)"
             }
           }
+        },
+        dark: {
+          info: {
+            background: "var(--color-background-information-default)",
+            borderColor: "var(--color-border-information)",
+            color: "var(--color-text-information)",
+            shadow: "0 4px 8px 0 rgba(2, 5, 10, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-information-hover)",
+              focusRing: {
+                color: "var(--color-border-information)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            outlined: {
+              color: "var(--color-text-information)",
+              borderColor: "var(--color-border-information)"
+            },
+            simple: {
+              color: "var(--color-text-information)"
+            }
+          },
+          success: {
+            background: "var(--color-background-success-default)",
+            borderColor: "var(--color-border-success)",
+            color: "var(--color-text-success)",
+            shadow: "0 4px 8px 0 rgba(1, 8, 4, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-success-hover)",
+              focusRing: {
+                color: "var(--color-border-success)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            outlined: {
+              color: "var(--color-text-success)",
+              borderColor: "var(--color-border-success)"
+            },
+            simple: {
+              color: "var(--color-text-success)"
+            }
+          },
+          warn: {
+            background: "var(--color-background-warning-default)",
+            borderColor: "var(--color-border-warning)",
+            color: "var(--color-text-warning-default)",
+            shadow: "0 4px 8px 0 rgba(9, 7, 0, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-warning-hover)",
+              focusRing: {
+                color: "var(--color-border-warning)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            outlined: {
+              color: "var(--color-text-warning-default)",
+              borderColor: "var(--color-border-warning)"
+            },
+            simple: {
+              color: "var(--color-text-warning-default)"
+            }
+          },
+          error: {
+            background: "var(--color-background-danger-default)",
+            borderColor: "var(--color-border-danger)",
+            color: "var(--color-text-danger)",
+            shadow: "0 4px 8px 0 rgba(10, 3, 3, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-danger-hover)",
+              focusRing: {
+                color: "var(--color-border-danger)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            outlined: {
+              color: "var(--color-text-danger)",
+              borderColor: "var(--color-border-danger)"
+            },
+            simple: {
+              color: "var(--color-text-danger)"
+            }
+          },
+          secondary: {
+            background: "var(--color-background-accent-gray-subtler-default)",
+            borderColor: "var(--color-border-accent-gray)",
+            color: "var(--color-text-default)",
+            shadow: "0 4px 8px 0 rgba(4, 5, 6, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-accent-gray-subtler-hover)",
+              focusRing: {
+                color: "var(--color-border-accent-gray)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            outlined: {
+              color: "var(--color-text-default)",
+              borderColor: "var(--color-border-accent-gray)"
+            },
+            simple: {
+              color: "var(--color-text-default)"
+            }
+          },
+          contrast: {
+            background: "var(--color-background-accent-gray-boldest-default)",
+            borderColor: "var(--color-icon-default)",
+            color: "var(--color-text-inverse)",
+            shadow: "0 4px 8px 0 rgba(0, 0, 1, 0.04)",
+            closeButton: {
+              hoverBackground: "var(--color-background-accent-gray-boldest-hover)",
+              focusRing: {
+                color: "var(--color-border-inverse)",
+                shadow: "0 0 0 0 #00000000"
+              }
+            },
+            outlined: {
+              color: "var(--color-text-default)",
+              borderColor: "var(--color-background-accent-gray-boldest-default)"
+            },
+            simple: {
+              color: "var(--color-text-default)"
+            }
+          }
+        }
+      }
+    },
+    card: {
+      root: {
+        background: "{content.background}",
+        borderRadius: "{border.radius.xl}",
+        color: "{content.color}",
+        shadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)"
+      },
+      body: {
+        padding: "var(--space-250)",
+        gap: "var(--space-100)"
+      },
+      caption: {
+        gap: "var(--space-100)"
+      },
+      title: {
+        fontSize: "var(--font-size-xl)",
+        fontWeight: "var(--font-weight-medium)"
+      },
+      subtitle: {
+        color: "{text.muted.color}"
+      }
+    },
+    tag: {
+      root: {
+        fontSize: "var(--font-size-sm)",
+        fontWeight: "var(--font-weight-regular)",
+        padding: "var(--space-50) var(--space-100)",
+        gap: "var(--space-50)",
+        borderRadius: "var(--border-radius-sm)",
+        roundedBorderRadius: "var(--border-radius-full)"
+      },
+      icon: {
+        size: "var(--icon-size-xs)"
+      },
+      colorScheme: {
+        light: {
+          primary: {
+            background: "var(--color-background-brand-subtler-default)",
+            color: "var(--color-text-brand-bold)"
+          },
+          secondary: {
+            background: "var(--color-background-accent-gray-subtle-default)",
+            color: "var(--color-text-accent-gray-bold)"
+          },
+          success: {
+            background: "var(--color-background-accent-green-subtler-default)",
+            color: "var(--color-text-accent-green-bold)"
+          },
+          info: {
+            background: "var(--color-background-accent-blue-subtler-default)",
+            color: "var(--color-text-accent-blue-bold)"
+          },
+          warn: {
+            background: "var(--color-background-accent-orange-subtler-default)",
+            color: "var(--color-text-accent-orange-bold)"
+          },
+          danger: {
+            background: "var(--color-background-accent-red-subtler-default)",
+            color: "var(--color-text-accent-red-bold)"
+          },
+          contrast: {
+            background: "var(--color-background-accent-gray-bolder-default)",
+            color: "var(--color-text-inverse)"
+          }
+        },
+        dark: {
+          primary: {
+            background: "var(--color-background-brand-subtler-default)",
+            color: "var(--color-text-brand-bold)"
+          },
+          secondary: {
+            background: "var(--color-background-accent-gray-subtle-default)",
+            color: "var(--color-text-accent-gray-bold)"
+          },
+          success: {
+            background: "var(--color-background-accent-green-subtler-default)",
+            color: "var(--color-text-accent-green-bold)"
+          },
+          info: {
+            background: "var(--color-background-accent-blue-subtler-default)",
+            color: "var(--color-text-accent-blue-bold)"
+          },
+          warn: {
+            background: "var(--color-background-accent-orange-subtler-default)",
+            color: "var(--color-text-accent-orange-bold)"
+          },
+          danger: {
+            background: "var(--color-background-accent-red-subtler-default)",
+            color: "var(--color-text-accent-red-bold)"
+          },
+          contrast: {
+            background: "var(--color-background-accent-gray-bolder-default)",
+            color: "var(--color-text-inverse)"
+          }
+        }
+      }
+    },
+    skeleton: {
+      root: {
+        borderRadius: "{content.border.radius}"
+      },
+      colorScheme: {
+        light: {
+          root: {
+            background: "{surface.200}",
+            animationBackground: "rgba(255, 255, 255, 0.4)"
+          }
+        },
+        dark: {
+          root: {
+            background: "rgba(255, 255, 255, 0.06)",
+            animationBackground: "rgba(255, 255, 255, 0.04)"
+          }
+        }
+      }
+    },
+    breadcrumb: {
+      root: {
+        padding: "var(--space-200)",
+        background: "{content.background}",
+        gap: "var(--space-50)",
+        transitionDuration: "{transition.duration}"
+      },
+      item: {
+        color: "{text.muted.color}",
+        hoverColor: "{text.color}",
+        borderRadius: "var(--border-radius-full)",
+        gap: "{navigation.item.gap}",
+        icon: {
+          color: "{navigation.item.icon.color}",
+          hoverColor: "{navigation.item.icon.focus.color}"
+        },
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "{focus.ring.color}",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        }
+      },
+      separator: {
+        color: "{navigation.item.icon.color}"
+      }
+    },
+    drawer: {
+      root: {
+        background: "{overlay.modal.background}",
+        borderColor: "{overlay.modal.border.color}",
+        color: "{overlay.modal.color}",
+        shadow: "{overlay.modal.shadow}"
+      },
+      header: {
+        padding: "{overlay.modal.padding}"
+      },
+      title: {
+        fontSize: "var(--font-size-2xl)",
+        fontWeight: "var(--font-weight-medium)"
+      },
+      content: {
+        padding: "0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}"
+      },
+      footer: {
+        padding: "{overlay.modal.padding}"
+      }
+    },
+    cascadeselect: {
+      root: {
+        background: "{form.field.background}",
+        disabledBackground: "{form.field.disabled.background}",
+        filledBackground: "{form.field.filled.background}",
+        filledHoverBackground: "{form.field.filled.hover.background}",
+        filledFocusBackground: "{form.field.filled.focus.background}",
+        borderColor: "{form.field.border.color}",
+        hoverBorderColor: "{form.field.hover.border.color}",
+        focusBorderColor: "{form.field.focus.border.color}",
+        invalidBorderColor: "{form.field.invalid.border.color}",
+        color: "{form.field.color}",
+        disabledColor: "{form.field.disabled.color}",
+        placeholderColor: "{form.field.placeholder.color}",
+        invalidPlaceholderColor: "{form.field.invalid.placeholder.color}",
+        shadow: "{form.field.shadow}",
+        paddingX: "{form.field.padding.x}",
+        paddingY: "{form.field.padding.y}",
+        borderRadius: "{form.field.border.radius}",
+        focusRing: {
+          width: "{form.field.focus.ring.width}",
+          style: "{form.field.focus.ring.style}",
+          color: "{form.field.focus.ring.color}",
+          offset: "{form.field.focus.ring.offset}",
+          shadow: "{form.field.focus.ring.shadow}"
+        },
+        transitionDuration: "{form.field.transition.duration}",
+        sm: {
+          fontSize: "{form.field.sm.font.size}",
+          paddingX: "{form.field.sm.padding.x}",
+          paddingY: "{form.field.sm.padding.y}"
+        },
+        lg: {
+          fontSize: "{form.field.lg.font.size}",
+          paddingX: "{form.field.lg.padding.x}",
+          paddingY: "{form.field.lg.padding.y}"
+        }
+      },
+      dropdown: {
+        width: "var(--space-500)",
+        color: "{form.field.icon.color}"
+      },
+      overlay: {
+        background: "{overlay.select.background}",
+        borderColor: "{overlay.select.border.color}",
+        borderRadius: "{overlay.select.border.radius}",
+        color: "{overlay.select.color}",
+        shadow: "{overlay.select.shadow}"
+      },
+      list: {
+        padding: "{list.padding}",
+        gap: "{list.gap}",
+        mobileIndent: "1rem"
+      },
+      option: {
+        focusBackground: "{list.option.focus.background}",
+        selectedBackground: "{list.option.selected.background}",
+        selectedFocusBackground: "{list.option.selected.focus.background}",
+        color: "{list.option.color}",
+        focusColor: "{list.option.focus.color}",
+        selectedColor: "{list.option.selected.color}",
+        selectedFocusColor: "{list.option.selected.focus.color}",
+        padding: "{list.option.padding}",
+        borderRadius: "{list.option.border.radius}",
+        icon: {
+          color: "{list.option.icon.color}",
+          focusColor: "{list.option.icon.focus.color}",
+          size: "var(--space-150)"
+        }
+      },
+      clearIcon: {
+        color: "{form.field.icon.color}"
+      }
+    },
+    colorpicker: {
+      preview: {
+        width: "var(--space-300)",
+        height: "var(--space-300)",
+        borderRadius: "{form.field.border.radius}",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "{focus.ring.color}",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        }
+      },
+      panel: {
+        shadow: "{overlay.popover.shadow}",
+        borderRadius: "{overlay.popover.border.radius}"
+      },
+      colorScheme: {
+        light: {
+          panel: {
+            background: "{surface.800}",
+            borderColor: "{surface.900}"
+          },
+          handle: {
+            color: "{surface.0}"
+          }
+        },
+        dark: {
+          panel: {
+            background: "{surface.900}",
+            borderColor: "{surface.700}"
+          },
+          handle: {
+            color: "{surface.0}"
+          }
+        }
+      }
+    },
+    select: {
+      root: {
+        background: "var(--color-elevation-surface-default)",
+        disabledBackground: "var(--color-background-disabled-default)",
+        filledBackground: "var(--color-background-accent-gray-subtler-default)",
+        filledHoverBackground: "var(--color-background-accent-gray-subtler-default)",
+        filledFocusBackground: "var(--color-background-accent-gray-subtler-default)",
+        borderColor: "var(--color-background-accent-gray-hover)",
+        hoverBorderColor: "var(--color-background-accent-gray-pressed)",
+        focusBorderColor: "var(--color-border-focused)",
+        invalidBorderColor: "var(--color-border-danger)",
+        color: "var(--color-text-default)",
+        disabledColor: "var(--color-text-disabled)",
+        placeholderColor: "var(--color-text-subtlest)",
+        invalidPlaceholderColor: "var(--color-text-danger)",
+        shadow: "{form.field.shadow}",
+        paddingX: "var(--space-150)",
+        paddingY: "var(--space-50)",
+        borderRadius: "var(--border-radius-sm)",
+        focusRing: {
+          width: "{form.field.focus.ring.width}",
+          style: "{form.field.focus.ring.style}",
+          color: "{form.field.focus.ring.color}",
+          offset: "{form.field.focus.ring.offset}",
+          shadow: "{form.field.focus.ring.shadow}"
+        },
+        transitionDuration: "{form.field.transition.duration}",
+        sm: {
+          fontSize: "var(--font-size-sm)",
+          paddingX: "var(--space-150)",
+          paddingY: "var(--space-50)",
+          minHeight: "var(--space-400)"
+        },
+        lg: {
+          fontSize: "var(--font-size-md)",
+          paddingX: "var(--space-150)",
+          paddingY: "var(--space-100)",
+          minHeight: "var(--space-600)"
+        },
+        minHeight: "var(--space-500)"
+      },
+      dropdown: {
+        width: "var(--space-500)",
+        color: "var(--color-icon-subtlest)"
+      },
+      overlay: {
+        background: "var(--color-elevation-surface-default)",
+        borderColor: "var(--color-border-default)",
+        borderRadius: "var(--border-radius-sm)",
+        color: "{overlay.select.color}",
+        shadow: "{overlay.select.shadow}"
+      },
+      list: {
+        padding: "var(--space-100)",
+        gap: "var(--space-25)",
+        header: {
+          padding: "var(--space-100)"
+        }
+      },
+      option: {
+        focusBackground: "var(--color-background-accent-gray-subtle-hover)",
+        selectedBackground: "var(--color-background-brand-subtlest-default)",
+        selectedFocusBackground: "var(--color-background-brand-subtler-default)",
+        color: "var(--color-text-subtle)",
+        focusColor: "var(--color-text-default)",
+        selectedColor: "var(--color-text-selected)",
+        selectedFocusColor: "var(--color-text-selected)",
+        padding: "var(--space-100) var(--space-150)",
+        borderRadius: "var(--border-radius-xs)",
+        gap: "var(--space-100)"
+      },
+      optionGroup: {
+        background: "var(--color-elevation-surface-default)",
+        color: "var(--color-text-subtlest)",
+        fontWeight: "{list.option.group.font.weight}",
+        padding: "var(--space-100) var(--space-150)"
+      },
+      clearIcon: {
+        color: "var(--color-icon-subtle)"
+      },
+      checkmark: {
+        color: "var(--color-text-subtle)",
+        gutterStart: "var(--space-negative-75)",
+        gutterEnd: "var(--space-75)"
+      },
+      emptyMessage: {
+        padding: "var(--space-100) var(--space-150)"
+      }
+    },
+    editor: {
+      toolbar: {
+        background: "{content.background}",
+        borderColor: "{content.border.color}",
+        borderRadius: "{content.border.radius}"
+      },
+      toolbarItem: {
+        color: "{text.muted.color}",
+        hoverColor: "{text.color}",
+        activeColor: "{primary.color}"
+      },
+      overlay: {
+        background: "{overlay.select.background}",
+        borderColor: "{overlay.select.border.color}",
+        borderRadius: "{overlay.select.border.radius}",
+        color: "{overlay.select.color}",
+        shadow: "{overlay.select.shadow}",
+        padding: "{list.padding}"
+      },
+      overlayOption: {
+        focusBackground: "{list.option.focus.background}",
+        color: "{list.option.color}",
+        focusColor: "{list.option.focus.color}",
+        padding: "{list.option.padding}",
+        borderRadius: "{list.option.border.radius}"
+      },
+      content: {
+        background: "{content.background}",
+        borderColor: "{content.border.color}",
+        color: "{content.color}",
+        borderRadius: "{content.border.radius}"
+      }
+    },
+    inputgroup: {
+      addon: {
+        background: "var(--color-elevation-surface-default)",
+        borderColor: "var(--color-border-default)",
+        color: "var(--color-text-subtle)",
+        borderRadius: "var(--border-radius-sm)",
+        padding: "var(--space-100)",
+        minWidth: "var(--space-500)",
+        minHeight: "var(--space-500)"
+      }
+    },
+    textarea: {
+      root: {
+        background: "var(--color-elevation-surface-default)",
+        disabledBackground: "var(--color-background-disabled-default)",
+        filledBackground: "var(--color-background-accent-gray-subtler-default)",
+        filledHoverBackground: "var(--color-background-accent-gray-subtler-default)",
+        filledFocusBackground: "var(--color-background-accent-gray-subtler-default)",
+        borderColor: "var(--color-border-default)",
+        hoverBorderColor: "var(--color-border-bold)",
+        focusBorderColor: "var(--color-border-focused)",
+        invalidBorderColor: "var(--color-border-danger)",
+        color: "var(--color-text-default)",
+        disabledColor: "var(--color-text-disabled)",
+        placeholderColor: "var(--color-text-subtlest)",
+        invalidPlaceholderColor: "var(--color-text-danger)",
+        shadow: "{form.field.shadow}",
+        paddingX: "var(--space-150)",
+        paddingY: "var(--space-50)",
+        borderRadius: "var(--border-radius-sm)",
+        focusRing: {
+          width: "{form.field.focus.ring.width}",
+          style: "{form.field.focus.ring.style}",
+          color: "transparent",
+          offset: "{form.field.focus.ring.offset}",
+          shadow: "{form.field.focus.ring.shadow}"
+        },
+        transitionDuration: "{form.field.transition.duration}",
+        sm: {
+          fontSize: "{form.field.sm.font.size}",
+          paddingX: "var(--space-150)",
+          paddingY: "var(--space-50)"
+        },
+        lg: {
+          fontSize: "{form.field.lg.font.size}",
+          paddingX: "var(--space-150)",
+          paddingY: "var(--space-50)"
+        },
+        gap: "var(--space-200)",
+        minHeight: "var(--space-300)"
+      }
+    },
+    inputnumber: {
+      root: {
+        transitionDuration: "{transition.duration}"
+      },
+      button: {
+        width: "var(--space-500)",
+        borderRadius: "var(--border-radius-sm)",
+        verticalPadding: "{form.field.padding.y}"
+      },
+      colorScheme: {
+        light: {
+          button: {
+            background: "rgba(0, 0, 0, 0)",
+            hoverBackground: "{surface.100}",
+            activeBackground: "{surface.200}",
+            borderColor: "{form.field.border.color}",
+            hoverBorderColor: "{form.field.border.color}",
+            activeBorderColor: "{form.field.border.color}",
+            color: "{surface.400}",
+            hoverColor: "{surface.500}",
+            activeColor: "{surface.600}"
+          }
+        },
+        dark: {
+          button: {
+            background: "rgba(0, 0, 0, 0)",
+            hoverBackground: "{surface.800}",
+            activeBackground: "{surface.700}",
+            borderColor: "{form.field.border.color}",
+            hoverBorderColor: "{form.field.border.color}",
+            activeBorderColor: "{form.field.border.color}",
+            color: "{surface.400}",
+            hoverColor: "{surface.300}",
+            activeColor: "{surface.200}"
+          }
+        }
+      }
+    },
+    knob: {
+      root: {
+        transitionDuration: "{transition.duration}",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "{focus.ring.color}",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        }
+      },
+      value: {
+        background: "{primary.color}"
+      },
+      range: {
+        background: "{content.border.color}"
+      },
+      text: {
+        color: "{text.muted.color}"
+      }
+    },
+    listbox: {
+      root: {
+        background: "var(--color-elevation-surface-default)",
+        disabledBackground: "var(--color-background-disabled-default)",
+        borderColor: "var(--color-border-default)",
+        invalidBorderColor: "var(--color-border-danger)",
+        color: "var(--color-elevation-surface-default)",
+        disabledColor: "var(--color-background-accent-gray-default)",
+        shadow: "{form.field.shadow}",
+        borderRadius: "var(--border-radius-sm)",
+        transitionDuration: "{form.field.transition.duration}"
+      },
+      list: {
+        padding: "var(--space-100)",
+        gap: "var(--space-25)",
+        header: {
+          padding: "var(--space-100)"
+        }
+      },
+      option: {
+        focusBackground: "var(--color-background-accent-gray-subtle-hover)",
+        selectedBackground: "var(--color-background-brand-subtlest-default)",
+        selectedFocusBackground: "var(--color-background-brand-subtler-default)",
+        color: "var(--color-text-subtle)",
+        focusColor: "var(--color-text-default)",
+        selectedColor: "var(--color-text-selected)",
+        selectedFocusColor: "var(--color-text-selected)",
+        padding: "var(--space-100) var(--space-150)",
+        borderRadius: "var(--border-radius-xs)"
+      },
+      optionGroup: {
+        background: "var(--color-elevation-surface-default)",
+        color: "var(--color-text-subtlest)",
+        fontWeight: "{list.option.group.font.weight}",
+        padding: "var(--space-100) var(--space-150)"
+      },
+      checkmark: {
+        color: "var(--color-icon-subtle)",
+        gutterStart: "var(--space-negative-75)",
+        gutterEnd: "var(--space-75)"
+      },
+      emptyMessage: {
+        padding: "var(--space-100) var(--space-150)"
+      },
+      colorScheme: {
+        light: {
+          option: {
+            stripedBackground: "{surface.50}"
+          }
+        },
+        dark: {
+          option: {
+            stripedBackground: "{surface.900}"
+          }
+        }
+      }
+    },
+    multiselect: {
+      root: {
+        background: "var(--color-elevation-surface-default)",
+        disabledBackground: "var(--color-background-disabled-default)",
+        filledBackground: "var(--color-background-accent-gray-subtler-default)",
+        filledHoverBackground: "var(--color-background-accent-gray-subtler-default)",
+        filledFocusBackground: "var(--color-background-accent-gray-subtler-default)",
+        borderColor: "var(--color-border-default)",
+        hoverBorderColor: "var(--color-border-input)",
+        focusBorderColor: "var(--color-border-focused)",
+        invalidBorderColor: "var(--color-border-danger)",
+        color: "var(--color-text-default)",
+        disabledColor: "var(--color-text-disabled)",
+        placeholderColor: "var(--color-text-subtlest)",
+        invalidPlaceholderColor: "var(--color-text-danger)",
+        shadow: "{form.field.shadow}",
+        paddingX: "var(--space-150)",
+        paddingY: "var(--space-50)",
+        borderRadius: "var(--border-radius-sm)",
+        focusRing: {
+          width: "{form.field.focus.ring.width}",
+          style: "{form.field.focus.ring.style}",
+          color: "transparent",
+          offset: "{form.field.focus.ring.offset}",
+          shadow: "{form.field.focus.ring.shadow}"
+        },
+        transitionDuration: "{form.field.transition.duration}",
+        sm: {
+          fontSize: "var(--font-size-sm)",
+          paddingX: "var(--space-150)",
+          paddingY: "var(--space-50)",
+          minHeight: "var(--space-400)"
+        },
+        lg: {
+          fontSize: "var(--font-size-md)",
+          paddingX: "var(--space-150)",
+          paddingY: "var(--space-100)",
+          minHeight: "var(--space-600)"
+        },
+        minHeight: "var(--space-500)"
+      },
+      dropdown: {
+        width: "var(--space-500)",
+        color: "var(--color-icon-subtlest)"
+      },
+      overlay: {
+        background: "var(--color-elevation-surface-default)",
+        borderColor: "var(--color-border-default)",
+        borderRadius: "var(--border-radius-sm)",
+        color: "{overlay.select.color}",
+        shadow: "{overlay.select.shadow}"
+      },
+      list: {
+        padding: "var(--space-100)",
+        gap: "var(--space-25)",
+        header: {
+          padding: "var(--space-100)"
+        }
+      },
+      option: {
+        focusBackground: "var(--color-background-accent-gray-subtle-hover)",
+        selectedBackground: "var(--color-background-brand-subtlest-default)",
+        selectedFocusBackground: "var(--color-background-brand-subtler-default)",
+        color: "var(--color-text-subtle)",
+        focusColor: "var(--color-text-default)",
+        selectedColor: "var(--color-text-selected)",
+        selectedFocusColor: "var(--color-text-selected)",
+        padding: "var(--space-100) var(--space-150)",
+        borderRadius: "var(--border-radius-xs)",
+        gap: "var(--space-100)"
+      },
+      optionGroup: {
+        background: "var(--color-elevation-surface-default)",
+        color: "var(--color-text-subtlest)",
+        fontWeight: "{list.option.group.font.weight}",
+        padding: "var(--space-100) var(--space-150)"
+      },
+      chip: {
+        borderRadius: "var(--border-radius-xs)"
+      },
+      clearIcon: {
+        color: "var(--color-icon-subtlest)"
+      },
+      emptyMessage: {
+        padding: "var(--space-100) var(--space-150)"
+      }
+    },
+    password: {
+      meter: {
+        background: "{content.border.color}",
+        borderRadius: "{content.border.radius}",
+        height: "var(--space-150)"
+      },
+      icon: {
+        color: "{form.field.icon.color}"
+      },
+      overlay: {
+        background: "{overlay.popover.background}",
+        borderColor: "{overlay.popover.border.color}",
+        borderRadius: "{overlay.popover.border.radius}",
+        color: "{overlay.popover.color}",
+        padding: "{overlay.popover.padding}",
+        shadow: "{overlay.popover.shadow}"
+      },
+      content: {
+        gap: "var(--space-100)"
+      },
+      colorScheme: {
+        light: {
+          strength: {
+            weakBackground: "{red.500}",
+            mediumBackground: "{amber.500}",
+            strongBackground: "{green.500}"
+          }
+        },
+        dark: {
+          strength: {
+            mediumBackground: "{amber.400}",
+            strongBackground: "{green.400}"
+          }
+        }
+      }
+    },
+    slider: {
+      root: {
+        transitionDuration: "{transition.duration}"
+      },
+      track: {
+        background: "{content.border.color}",
+        borderRadius: "{content.border.radius}",
+        size: "var(--space-50)"
+      },
+      range: {
+        background: "{primary.color}"
+      },
+      handle: {
+        width: "var(--space-250)",
+        height: "var(--space-250)",
+        borderRadius: "{slider.handle.width} / 2",
+        background: "{content.border.color}",
+        hoverBackground: "{content.border.color}",
+        content: {
+          borderRadius: "{slider.handle.content.width} / 2",
+          hoverBackground: "{content.background}",
+          width: "var(--space-200)",
+          height: "var(--space-200)",
+          shadow: "0 0.5px 0 0 rgba(0, 0, 0, 0.08), 0 1px 1px 0 rgba(0, 0, 0, 0.14)"
+        },
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "{focus.ring.color}",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        }
+      },
+      colorScheme: {
+        light: {
+          handle: {
+            content: {
+              background: "{surface.0}"
+            }
+          }
+        },
+        dark: {
+          handle: {
+            content: {
+              background: "{surface.950}"
+            }
+          }
+        }
+      }
+    },
+    togglebutton: {
+      root: {
+        padding: "var(--space-50)",
+        borderRadius: "var(--border-radius-md)",
+        gap: "var(--space-100)",
+        fontWeight: "var(--font-weight-medium)",
+        disabledBackground: "var(--color-background-disabled-default)",
+        disabledBorderColor: "var(--color-background-disabled-default)",
+        disabledColor: "var(--color-text-disabled)",
+        invalidBorderColor: "var(--color-border-danger)",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "var(--color-border-focused)",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        },
+        transitionDuration: "{form.field.transition.duration}",
+        sm: {
+          fontSize: "var(--font-size-sm)",
+          padding: "var(--space-50)"
+        },
+        lg: {
+          fontSize: "{form.field.lg.font.size}",
+          padding: "var(--space-50)"
+        }
+      },
+      icon: {
+        disabledColor: "var(--color-icon-disabled)"
+      },
+      content: {
+        padding: "var(--space-50) var(--space-100)",
+        borderRadius: "var(--border-radius-sm)",
+        checkedShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.02), 0 1px 2px 0 rgba(0, 0, 0, 0.04)",
+        sm: {
+          padding: "var(--space-25) var(--space-50)",
+          minHeight: "var(--space-300)",
+          border: {
+            radius: "var(--border-radius-sm)"
+          }
+        },
+        lg: {
+          padding: "var(--space-75) var(--space-150)",
+          minHeight: "var(--space-500)"
+        },
+        minHeight: "var(--space-400)"
+      },
+      colorScheme: {
+        light: {
+          root: {
+            background: "var(--color-background-accent-gray-default)",
+            checkedBackground: "var(--color-background-accent-gray-default)",
+            hoverBackground: "var(--color-background-accent-gray-default)",
+            borderColor: "var(--color-background-accent-gray-default)",
+            color: "var(--color-text-subtle)",
+            hoverColor: "var(--color-text-default)",
+            checkedColor: "var(--color-text-default)",
+            checkedBorderColor: "var(--color-background-accent-gray-default)"
+          },
+          content: {
+            checkedBackground: "var(--color-elevation-surface-default)"
+          },
+          icon: {
+            color: "var(--color-icon-subtle)",
+            hoverColor: "var(--color-icon-default)",
+            checkedColor: "var(--color-icon-default)"
+          }
+        },
+        dark: {
+          root: {
+            background: "var(--color-background-accent-gray-default)",
+            checkedBackground: "var(--color-background-accent-gray-default)",
+            hoverBackground: "var(--color-background-accent-gray-default)",
+            borderColor: "var(--color-background-accent-gray-default)",
+            color: "var(--color-text-subtle)",
+            hoverColor: "var(--color-text-default)",
+            checkedColor: "var(--color-text-default)",
+            checkedBorderColor: "var(--color-background-accent-gray-default)"
+          },
+          content: {
+            checkedBackground: "var(--color-elevation-surface-default)"
+          },
+          icon: {
+            color: "var(--color-icon-subtle)",
+            hoverColor: "var(--color-icon-default)",
+            checkedColor: "var(--color-icon-default)"
+          }
+        }
+      },
+      minHeight: "var(--space-500)",
+      sm: {
+        minHeight: "var(--space-400)",
+        border: {
+          radius: "var(--border-radius-sm)"
+        }
+      },
+      lg: {
+        minHeight: "var(--space-600)"
+      }
+    },
+    selectbutton: {
+      root: {
+        borderRadius: "var(--border-radius-md)"
+      },
+      colorScheme: {
+        light: {
+          root: {
+            invalidBorderColor: "var(--color-border-danger)"
+          }
+        },
+        dark: {
+          root: {
+            invalidBorderColor: "var(--color-border-danger)"
+          }
+        }
+      }
+    },
+    treeselect: {
+      root: {
+        background: "{form.field.background}",
+        disabledBackground: "{form.field.disabled.background}",
+        filledBackground: "{form.field.filled.background}",
+        filledHoverBackground: "{form.field.filled.hover.background}",
+        filledFocusBackground: "{form.field.filled.focus.background}",
+        borderColor: "{form.field.border.color}",
+        hoverBorderColor: "{form.field.hover.border.color}",
+        focusBorderColor: "{form.field.focus.border.color}",
+        invalidBorderColor: "{form.field.invalid.border.color}",
+        color: "{form.field.color}",
+        disabledColor: "{form.field.disabled.color}",
+        placeholderColor: "{form.field.placeholder.color}",
+        invalidPlaceholderColor: "{form.field.invalid.placeholder.color}",
+        shadow: "{form.field.shadow}",
+        paddingX: "{form.field.padding.x}",
+        paddingY: "{form.field.padding.y}",
+        borderRadius: "{form.field.border.radius}",
+        focusRing: {
+          width: "{form.field.focus.ring.width}",
+          style: "{form.field.focus.ring.style}",
+          color: "{form.field.focus.ring.color}",
+          offset: "{form.field.focus.ring.offset}",
+          shadow: "{form.field.focus.ring.shadow}"
+        },
+        transitionDuration: "{form.field.transition.duration}",
+        sm: {
+          fontSize: "{form.field.sm.font.size}",
+          paddingX: "{form.field.sm.padding.x}",
+          paddingY: "{form.field.sm.padding.y}"
+        },
+        lg: {
+          fontSize: "{form.field.lg.font.size}",
+          paddingX: "{form.field.lg.padding.x}",
+          paddingY: "{form.field.lg.padding.y}"
+        }
+      },
+      dropdown: {
+        width: "var(--space-500)",
+        color: "{form.field.icon.color}"
+      },
+      overlay: {
+        background: "{overlay.select.background}",
+        borderColor: "{overlay.select.border.color}",
+        borderRadius: "{overlay.select.border.radius}",
+        color: "{overlay.select.color}",
+        shadow: "{overlay.select.shadow}"
+      },
+      tree: {
+        padding: "{list.padding}"
+      },
+      emptyMessage: {
+        padding: "{list.option.padding}"
+      },
+      chip: {
+        borderRadius: "var(--border-radius-xs)"
+      },
+      clearIcon: {
+        color: "{form.field.icon.color}"
+      }
+    },
+    dataview: {
+      root: {
+        borderColor: "rgba(0, 0, 0, 0)",
+        borderWidth: "var(--border-width-0)",
+        borderRadius: "0",
+        padding: "var(--space-0)"
+      },
+      header: {
+        background: "{content.background}",
+        color: "{content.color}",
+        borderColor: "{content.border.color}",
+        borderWidth: "var(--border-width-1)",
+        padding: "0.75rem 1rem",
+        borderRadius: "0"
+      },
+      content: {
+        background: "{content.background}",
+        color: "{content.color}",
+        borderColor: "rgba(0, 0, 0, 0)",
+        borderWidth: "var(--border-width-0)",
+        padding: "var(--space-0)",
+        borderRadius: "0"
+      },
+      footer: {
+        background: "{content.background}",
+        color: "{content.color}",
+        borderColor: "{content.border.color}",
+        borderWidth: "var(--border-width-1)",
+        padding: "0.75rem 1rem",
+        borderRadius: "0"
+      },
+      paginatorTop: {
+        borderColor: "var(--color-border-default)",
+        borderWidth: "var(--border-width-1)"
+      },
+      paginatorBottom: {
+        borderColor: "{content.border.color}",
+        borderWidth: "var(--border-width-1)"
+      }
+    },
+    accordion: {
+      root: {
+        transitionDuration: "{transition.duration}"
+      },
+      panel: {
+        borderWidth: "0 0 var(--border-width-1) 0",
+        borderColor: "var(--color-border-default)"
+      },
+      header: {
+        color: "var(--color-text-subtle)",
+        hoverColor: "var(--color-text-default)",
+        activeColor: "var(--color-text-default)",
+        padding: "var(--space-200)",
+        fontWeight: "var(--font-weight-bold)",
+        borderRadius: "0",
+        borderWidth: "var(--border-width-0)",
+        borderColor: "var(--color-elevation-surface-default)",
+        background: "var(--color-elevation-surface-default)",
+        hoverBackground: "var(--color-elevation-surface-default)",
+        activeBackground: "var(--color-elevation-surface-default)",
+        activeHoverBackground: "var(--color-elevation-surface-default)",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "var(--color-border-focused)",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        },
+        toggleIcon: {
+          color: "var(--color-icon-subtle)",
+          hoverColor: "var(--color-icon-default)",
+          activeColor: "var(--color-icon-default)",
+          activeHoverColor: "var(--color-icon-default)"
+        },
+        first: {
+          topBorderRadius: "var(--border-radius-sm)",
+          borderWidth: "var(--border-width-0)"
+        },
+        last: {
+          bottomBorderRadius: "var(--border-radius-sm)",
+          activeBottomBorderRadius: "0"
+        },
+        gap: "var(--space-100)"
+      },
+      content: {
+        borderWidth: "var(--border-width-0)",
+        borderColor: "var(--color-border-default)",
+        background: "var(--color-elevation-surface-default)",
+        color: "var(--color-text-default)",
+        padding: "var(--space-0) var(--space-200) var(--space-200) var(--space-200)"
+      }
+    },
+    divider: {
+      root: {
+        borderColor: "var(--color-background-alpha-subtle-default)"
+      },
+      content: {
+        background: "transparent",
+        color: "var(--color-text-default)",
+        gap: "var(--space-100)"
+      },
+      horizontal: {
+        margin: "var(--space-200) 0",
+        padding: "var(--space-100)",
+        content: {
+          padding: "0 var(--space-100)"
+        }
+      },
+      vertical: {
+        margin: "0 var(--space-200)",
+        padding: "var(--space-100)",
+        content: {
+          padding: "var(--space-100) 0"
+        }
+      }
+    },
+    fieldset: {
+      root: {
+        background: "{content.background}",
+        borderColor: "{content.border.color}",
+        borderRadius: "{content.border.radius}",
+        color: "{content.color}",
+        padding: "1.125rem 1.125rem 1.125rem 1.125rem",
+        transitionDuration: "{transition.duration}"
+      },
+      legend: {
+        background: "{content.background}",
+        hoverBackground: "{content.hover.background}",
+        color: "{content.color}",
+        hoverColor: "{content.hover.color}",
+        borderRadius: "{content.border.radius}",
+        borderWidth: "var(--border-width-1)",
+        borderColor: "rgba(0, 0, 0, 0)",
+        padding: "0.5rem 0.75rem",
+        gap: "var(--space-100)",
+        fontWeight: "var(--font-weight-medium)",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "{focus.ring.color}",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        }
+      },
+      toggleIcon: {
+        color: "{text.muted.color}",
+        hoverColor: "{text.hover.muted.color}"
+      },
+      content: {
+        padding: "var(--space-0)"
+      }
+    },
+    splitter: {
+      root: {
+        background: "{content.background}",
+        borderColor: "{content.border.color}",
+        color: "{content.color}",
+        transitionDuration: "{transition.duration}"
+      },
+      gutter: {
+        background: "{content.border.color}"
+      },
+      handle: {
+        size: "var(--space-300)",
+        background: "rgba(0, 0, 0, 0)",
+        borderRadius: "{content.border.radius}",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "{focus.ring.color}",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        }
+      }
+    },
+    scrollpanel: {
+      root: {
+        transitionDuration: "{transition.duration}"
+      },
+      bar: {
+        size: "var(--space-100)",
+        borderRadius: "{border.radius.sm}",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "{focus.ring.color}",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        }
+      },
+      colorScheme: {
+        light: {
+          bar: {
+            background: "{surface.100}"
+          }
+        },
+        dark: {
+          bar: {
+            background: "{surface.800}"
+          }
+        }
+      }
+    },
+    tabs: {
+      root: {
+        transitionDuration: "{transition.duration}"
+      },
+      tablist: {
+        borderWidth: "0 0 1px 0",
+        background: "transparent",
+        borderColor: "var(--color-border-default)"
+      },
+      tab: {
+        background: "transparent",
+        hoverBackground: "transparent",
+        activeBackground: "transparent",
+        borderWidth: "0 0 1px 0",
+        borderColor: "var(--color-border-default)",
+        hoverBorderColor: "var(--color-border-default)",
+        activeBorderColor: "var(--color-border-selected)",
+        color: "var(--color-text-subtlest)",
+        hoverColor: "var(--color-text-default)",
+        activeColor: "var(--color-text-selected)",
+        padding: "var(--space-150)",
+        fontWeight: "var(--font-weight-medium)",
+        margin: "0 0 -1px 0",
+        gap: "var(--space-100)",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "var(--color-border-focused)",
+          offset: "-1px",
+          shadow: "{focus.ring.shadow}"
+        }
+      },
+      tabpanel: {
+        background: "transparent",
+        color: "var(--color-text-default)",
+        padding: "var(--space-200)",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "var(--color-border-focused)",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        }
+      },
+      navButton: {
+        background: "var(--color-elevation-surface-default)",
+        color: "var(--color-text-subtlest)",
+        hoverColor: "{text.color}",
+        width: "var(--space-500)",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "{focus.ring.color}",
+          offset: "-1px",
+          shadow: "{focus.ring.shadow}"
+        }
+      },
+      activeBar: {
+        height: "var(--space-25)",
+        bottom: "-1px",
+        background: "var(--color-background-brand-bolder-default)"
+      },
+      colorScheme: {
+        light: {
+          navButton: {
+            shadow: "0 0 10px 50px rgba(255, 255, 255, 0.6)"
+          }
+        },
+        dark: {
+          navButton: {
+            shadow: "0 0 10px 50px #0F172A80"
+          }
+        }
+      }
+    },
+    toolbar: {
+      root: {
+        background: "{content.background}",
+        borderColor: "{content.border.color}",
+        borderRadius: "{content.border.radius}",
+        color: "{content.color}",
+        gap: "var(--space-100)",
+        padding: "var(--space-150)"
+      }
+    },
+    confirmdialog: {
+      icon: {
+        size: "var(--space-400)",
+        color: "var(--color-icon-default)"
+      },
+      content: {
+        gap: "var(--space-200)"
+      }
+    },
+    confirmpopup: {
+      root: {
+        background: "{overlay.popover.background}",
+        borderColor: "{overlay.popover.border.color}",
+        color: "{overlay.popover.color}",
+        borderRadius: "{overlay.popover.border.radius}",
+        shadow: "{overlay.popover.shadow}",
+        gutter: "var(--space-100)",
+        arrowOffset: "var(--space-250)"
+      },
+      content: {
+        padding: "{overlay.popover.padding}",
+        gap: "var(--space-100)"
+      },
+      icon: {
+        size: "var(--space-300)",
+        color: "{overlay.popover.color}"
+      },
+      footer: {
+        gap: "var(--space-100)",
+        padding: "var(--space-150) 0 var(--space-150) var(--space-150)"
+      }
+    },
+    dialog: {
+      root: {
+        background: "var(--color-elevation-surface-overlay-default)",
+        borderColor: "var(--color-border-default)",
+        color: "var(--color-text-default)",
+        borderRadius: "var(--border-radius-lg)",
+        shadow: "{overlay.modal.shadow}"
+      },
+      header: {
+        padding: "var(--space-200)",
+        gap: "var(--space-100)"
+      },
+      title: {
+        fontSize: "var(--font-size-lg)",
+        fontWeight: "var(--font-weight-medium)"
+      },
+      content: {
+        padding: "0 var(--space-200) var(--space-200) var(--space-200)"
+      },
+      footer: {
+        padding: "0 var(--space-200) var(--space-200) var(--space-200)",
+        gap: "var(--space-100)"
+      }
+    },
+    tooltip: {
+      root: {
+        maxWidth: "var(--space-1000)",
+        gutter: "0.25rem",
+        shadow: "{overlay.popover.shadow}",
+        padding: "0.5rem 0.75rem",
+        borderRadius: "{overlay.popover.border.radius}"
+      },
+      colorScheme: {
+        light: {
+          root: {
+            background: "{surface.700}",
+            color: "{surface.0}"
+          }
+        },
+        dark: {
+          root: {
+            background: "{surface.700}",
+            color: "{surface.0}"
+          }
         }
       }
     },
-    multiselect: {
+    contextmenu: {
       root: {
-        background: "var(--color-elevation-surface-default)",
-        disabledBackground: "var(--color-background-disabled-default)",
-        filledBackground: "var(--color-background-accent-gray-subtler-default)",
-        filledHoverBackground: "var(--color-background-accent-gray-subtler-default)",
-        filledFocusBackground: "var(--color-background-accent-gray-subtler-default)",
+        background: "{content.background}",
         borderColor: "var(--color-border-default)",
-        hoverBorderColor: "var(--color-border-input)",
-        focusBorderColor: "var(--color-border-focused)",
-        invalidBorderColor: "var(--color-border-danger)",
-        color: "var(--color-text-default)",
-        disabledColor: "var(--color-text-disabled)",
-        placeholderColor: "var(--color-text-subtlest)",
-        invalidPlaceholderColor: "var(--color-text-danger)",
-        shadow: "{form.field.shadow}",
-        paddingX: "var(--space-150)",
-        paddingY: "var(--space-50)",
+        color: "{content.color}",
         borderRadius: "var(--border-radius-sm)",
+        shadow: "{overlay.navigation.shadow}",
+        transitionDuration: "{transition.duration}"
+      },
+      list: {
+        padding: "{navigation.list.padding}",
+        gap: "{navigation.list.gap}"
+      },
+      item: {
+        focusBackground: "{navigation.item.focus.background}",
+        activeBackground: "{navigation.item.active.background}",
+        color: "{navigation.item.color}",
+        focusColor: "{navigation.item.focus.color}",
+        activeColor: "{navigation.item.active.color}",
+        padding: "var(--space-100) var(--space-150)",
+        borderRadius: "var(--border-radius-xs)",
+        gap: "var(--space-100)",
+        icon: {
+          color: "var(--color-icon-default)",
+          focusColor: "var(--color-icon-default)",
+          activeColor: "{navigation.item.icon.active.color}"
+        }
+      },
+      submenu: {
+        mobileIndent: "var(--space-200)"
+      },
+      submenuIcon: {
+        size: "var(--icon-size-xs)",
+        color: "{navigation.submenu.icon.color}",
+        focusColor: "{navigation.submenu.icon.focus.color}",
+        activeColor: "{navigation.submenu.icon.active.color}"
+      },
+      separator: {
+        borderColor: "var(--color-border-default)"
+      }
+    },
+    dock: {
+      root: {
+        background: "rgba(255, 255, 255, 0.1)",
+        borderColor: "rgba(255, 255, 255, 0.2)",
+        padding: "var(--space-100)",
+        borderRadius: "{border.radius.xl}"
+      },
+      item: {
+        borderRadius: "{content.border.radius}",
+        padding: "var(--space-100)",
+        size: "var(--space-500)",
         focusRing: {
-          width: "{form.field.focus.ring.width}",
-          style: "{form.field.focus.ring.style}",
-          color: "transparent",
-          offset: "{form.field.focus.ring.offset}",
-          shadow: "{form.field.focus.ring.shadow}"
-        },
-        transitionDuration: "{form.field.transition.duration}",
-        sm: {
-          fontSize: "var(--font-size-sm)",
-          paddingX: "var(--space-150)",
-          paddingY: "var(--space-50)",
-          minHeight: "var(--space-400)"
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "{focus.ring.color}",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        }
+      }
+    },
+    megamenu: {
+      root: {
+        background: "{content.background}",
+        borderColor: "{content.border.color}",
+        borderRadius: "var(--border-radius-sm)",
+        color: "{content.color}",
+        gap: "var(--space-100)",
+        verticalOrientation: {
+          padding: "{navigation.list.padding}",
+          gap: "{navigation.list.gap}"
         },
-        lg: {
-          fontSize: "var(--font-size-md)",
-          paddingX: "var(--space-150)",
-          paddingY: "var(--space-100)",
-          minHeight: "var(--space-600)"
+        horizontalOrientation: {
+          padding: "0.5rem 0.75rem",
+          gap: "var(--space-100)"
         },
-        minHeight: "var(--space-500)"
+        transitionDuration: "{transition.duration}"
       },
-      dropdown: {
-        width: "var(--space-500)",
-        color: "var(--color-icon-subtlest)"
+      baseItem: {
+        borderRadius: "{content.border.radius}",
+        padding: "{navigation.item.padding}"
+      },
+      item: {
+        focusBackground: "{navigation.item.focus.background}",
+        activeBackground: "{navigation.item.active.background}",
+        color: "{navigation.item.color}",
+        focusColor: "{navigation.item.focus.color}",
+        activeColor: "{navigation.item.active.color}",
+        padding: "var(--space-100) var(--space-150)",
+        borderRadius: "var(--border-radius-xs)",
+        gap: "var(--space-100)",
+        icon: {
+          color: "{navigation.item.icon.color}",
+          focusColor: "{navigation.item.icon.focus.color}",
+          activeColor: "{navigation.item.icon.active.color}"
+        }
       },
       overlay: {
+        padding: "var(--space-0)",
+        background: "{content.background}",
+        borderColor: "{content.border.color}",
+        borderRadius: "{content.border.radius}",
+        color: "{content.color}",
+        shadow: "{overlay.navigation.shadow}",
+        gap: "var(--space-100)"
+      },
+      submenu: {
+        padding: "var(--space-50)",
+        gap: "var(--space-25)"
+      },
+      submenuLabel: {
+        padding: "var(--space-100) var(--space-150)",
+        fontWeight: "{navigation.submenu.label.font.weight}",
+        background: "{navigation.submenu.label.background}",
+        color: "{navigation.submenu.label.color}"
+      },
+      submenuIcon: {
+        size: "var(--icon-size-xs)",
+        color: "{navigation.submenu.icon.color}",
+        focusColor: "{navigation.submenu.icon.focus.color}",
+        activeColor: "{navigation.submenu.icon.active.color}"
+      },
+      separator: {
+        borderColor: "var(--color-border-default)"
+      },
+      mobileButton: {
+        borderRadius: "{megamenu.mobile.button.size} / 2",
+        size: "var(--space-300)",
+        color: "{text.muted.color}",
+        hoverColor: "{text.hover.muted.color}",
+        hoverBackground: "{content.hover.background}",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "{focus.ring.color}",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        }
+      }
+    },
+    menu: {
+      root: {
         background: "var(--color-elevation-surface-default)",
         borderColor: "var(--color-border-default)",
+        color: "var(--color-elevation-surface-default)",
         borderRadius: "var(--border-radius-sm)",
-        color: "{overlay.select.color}",
-        shadow: "{overlay.select.shadow}"
+        shadow: "{overlay.navigation.shadow}",
+        transitionDuration: "{transition.duration}"
       },
       list: {
-        padding: "var(--space-100)",
-        gap: "var(--space-25)",
-        header: {
-          padding: "var(--space-100)"
-        }
+        padding: "var(--space-50)",
+        gap: "var(--space-25)"
       },
-      option: {
-        focusBackground: "var(--color-background-accent-gray-subtle-hover)",
-        selectedBackground: "var(--color-background-brand-subtlest-default)",
-        selectedFocusBackground: "var(--color-background-brand-subtler-default)",
-        color: "var(--color-text-subtle)",
+      item: {
+        focusBackground: "var(--color-background-accent-gray-subtle-default)",
+        color: "var(--color-text-default)",
         focusColor: "var(--color-text-default)",
-        selectedColor: "var(--color-text-selected)",
-        selectedFocusColor: "var(--color-text-selected)",
         padding: "var(--space-100) var(--space-150)",
         borderRadius: "var(--border-radius-xs)",
+        gap: "var(--space-100)",
+        icon: {
+          color: "var(--color-icon-default)",
+          focusColor: "var(--color-icon-default)"
+        }
+      },
+      submenuLabel: {
+        padding: "var(--space-100) var(--space-150)",
+        fontWeight: "{navigation.submenu.label.font.weight}",
+        background: "transparent",
+        color: "var(--color-text-subtlest)"
+      },
+      separator: {
+        borderColor: "var(--color-border-default)"
+      }
+    },
+    menubar: {
+      root: {
+        background: "{content.background}",
+        borderColor: "{content.border.color}",
+        borderRadius: "{content.border.radius}",
+        color: "{content.color}",
+        gap: "var(--space-100)",
+        padding: "0.5rem 0.75rem",
+        transitionDuration: "{transition.duration}"
+      },
+      baseItem: {
+        borderRadius: "{content.border.radius}",
+        padding: "{navigation.item.padding}"
+      },
+      item: {
+        focusBackground: "{navigation.item.focus.background}",
+        activeBackground: "{navigation.item.active.background}",
+        color: "{navigation.item.color}",
+        focusColor: "{navigation.item.focus.color}",
+        activeColor: "{navigation.item.active.color}",
+        padding: "{navigation.item.padding}",
+        borderRadius: "{navigation.item.border.radius}",
+        gap: "{navigation.item.gap}",
+        icon: {
+          color: "{navigation.item.icon.color}",
+          focusColor: "{navigation.item.icon.focus.color}",
+          activeColor: "{navigation.item.icon.active.color}"
+        }
+      },
+      submenu: {
+        padding: "{navigation.list.padding}",
+        gap: "{navigation.list.gap}",
+        background: "{content.background}",
+        borderColor: "{content.border.color}",
+        borderRadius: "var(--border-radius-sm)",
+        shadow: "{overlay.navigation.shadow}",
+        mobileIndent: "1rem",
+        icon: {
+          size: "var(--icon-size-xs)",
+          color: "{navigation.submenu.icon.color}",
+          focusColor: "{navigation.submenu.icon.focus.color}",
+          activeColor: "{navigation.submenu.icon.active.color}"
+        }
+      },
+      separator: {
+        borderColor: "{content.border.color}"
+      },
+      mobileButton: {
+        borderRadius: "{menubar.mobile.button.size} / 2",
+        size: "var(--space-300)",
+        color: "{text.muted.color}",
+        hoverColor: "{text.hover.muted.color}",
+        hoverBackground: "{content.hover.background}",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "{focus.ring.color}",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        }
+      }
+    },
+    panelmenu: {
+      root: {
+        gap: "var(--space-100)",
+        transitionDuration: "{transition.duration}"
+      },
+      panel: {
+        background: "{content.background}",
+        borderColor: "{content.border.color}",
+        borderWidth: "var(--border-width-1)",
+        color: "{content.color}",
+        padding: "0.25rem 0.25rem",
+        borderRadius: "{content.border.radius}",
+        first: {
+          borderWidth: "var(--border-width-1)",
+          topBorderRadius: "{content.border.radius}"
+        },
+        last: {
+          borderWidth: "var(--border-width-1)",
+          bottomBorderRadius: "{content.border.radius}"
+        }
+      },
+      item: {
+        focusBackground: "{navigation.item.focus.background}",
+        color: "{navigation.item.color}",
+        focusColor: "{navigation.item.focus.color}",
+        gap: "var(--space-100)",
+        padding: "var(--space-100) var(--space-150)",
+        borderRadius: "var(--border-radius-sm)",
+        icon: {
+          color: "var(--color-icon-default)",
+          focusColor: "var(--color-icon-default)"
+        }
+      },
+      submenu: {
+        indent: "var(--space-200)"
+      },
+      submenuIcon: {
+        color: "{navigation.submenu.icon.color}",
+        focusColor: "{navigation.submenu.icon.focus.color}"
+      }
+    },
+    tieredmenu: {
+      root: {
+        background: "{content.background}",
+        borderColor: "{content.border.color}",
+        color: "{content.color}",
+        borderRadius: "var(--border-radius-sm)",
+        shadow: "{overlay.navigation.shadow}",
+        transitionDuration: "{transition.duration}"
+      },
+      list: {
+        padding: "{navigation.list.padding}",
+        gap: "{navigation.list.gap}"
+      },
+      item: {
+        focusBackground: "{navigation.item.focus.background}",
+        activeBackground: "{navigation.item.active.background}",
+        color: "{navigation.item.color}",
+        focusColor: "{navigation.item.focus.color}",
+        activeColor: "{navigation.item.active.color}",
+        padding: "var(--space-100) var(--space-150)",
+        borderRadius: "var(--border-radius-xs)",
+        gap: "var(--space-100)",
+        icon: {
+          color: "{navigation.item.icon.color}",
+          focusColor: "{navigation.item.icon.focus.color}",
+          activeColor: "{navigation.item.icon.active.color}"
+        }
+      },
+      submenu: {
+        mobileIndent: "var(--space-200)"
+      },
+      submenuIcon: {
+        size: "var(--icon-size-xs)",
+        color: "{navigation.submenu.icon.color}",
+        focusColor: "{navigation.submenu.icon.focus.color}",
+        activeColor: "{navigation.submenu.icon.active.color}"
+      },
+      separator: {
+        borderColor: "{content.border.color}"
+      }
+    },
+    orderlist: {
+      root: {
+        gap: "var(--space-200)"
+      },
+      controls: {
         gap: "var(--space-100)"
+      }
+    },
+    organizationchart: {
+      root: {
+        gutter: "0.75rem",
+        transitionDuration: "{transition.duration}"
+      },
+      node: {
+        background: "{content.background}",
+        hoverBackground: "{content.hover.background}",
+        selectedBackground: "{highlight.background}",
+        borderColor: "{content.border.color}",
+        color: "{content.color}",
+        selectedColor: "{highlight.color}",
+        hoverColor: "{content.hover.color}",
+        padding: "0.75rem 1rem",
+        toggleablePadding: "0.75rem 1rem 1.25rem 1rem",
+        borderRadius: "{content.border.radius}"
+      },
+      nodeToggleButton: {
+        background: "{content.background}",
+        hoverBackground: "{content.hover.background}",
+        borderColor: "{content.border.color}",
+        color: "{text.muted.color}",
+        hoverColor: "{text.color}",
+        size: "var(--space-300)",
+        borderRadius: "{organizationchart.node.toggle.button.size} / 2",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "{focus.ring.color}",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        }
+      },
+      connector: {
+        color: "{content.border.color}",
+        borderRadius: "{content.border.radius}",
+        height: "var(--space-300)"
+      }
+    },
+    paginator: {
+      root: {
+        padding: "var(--space-100) var(--space-150)",
+        gap: "var(--space-50)",
+        borderRadius: "var(--border-radius-sm)",
+        background: "var(--color-elevation-surface-default)",
+        color: "var(--color-text-default)",
+        transitionDuration: "{transition.duration}"
       },
-      optionGroup: {
-        background: "var(--color-elevation-surface-default)",
+      navButton: {
+        background: "transparent",
+        hoverBackground: "var(--color-background-accent-gray-subtler-hover)",
+        selectedBackground: "var(--color-background-selected-default)",
         color: "var(--color-text-subtlest)",
-        fontWeight: "{list.option.group.font.weight}",
-        padding: "var(--space-100) var(--space-150)"
-      },
-      chip: {
-        borderRadius: "var(--border-radius-xs)"
+        hoverColor: "var(--color-text-subtlest)",
+        selectedColor: "var(--color-text-selected)",
+        width: "var(--space-500)",
+        height: "var(--space-500)",
+        borderRadius: "var(--border-radius-full)",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "var(--color-border-focused)",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        }
       },
-      clearIcon: {
-        color: "var(--color-icon-subtlest)"
+      currentPageReport: {
+        color: "var(--color-text-subtlest)"
       },
-      emptyMessage: {
-        padding: "var(--space-100) var(--space-150)"
+      jumpToPageInput: {
+        maxWidth: "var(--space-500)"
       }
     },
-    progressbar: {
+    picklist: {
       root: {
-        background: "var(--color-background-accent-gray-default)",
-        borderRadius: "var(--border-radius-sm)",
-        height: "var(--space-250)"
+        gap: "var(--space-200)"
       },
-      value: {
-        background: "var(--color-background-brand-bolder-default)"
-      },
-      label: {
-        color: "var(--color-text-inverse)",
-        fontSize: "var(--font-size-xs)",
-        fontWeight: "var(--font-weight-medium)"
+      controls: {
+        gap: "var(--space-100)"
       }
     },
-    radiobutton: {
+    datatable: {
       root: {
-        width: "var(--space-250)",
-        height: "var(--space-250)",
-        background: "var(--color-elevation-surface-default)",
-        checkedBackground: "var(--color-background-brand-bolder-default)",
-        checkedHoverBackground: "var(--color-background-brand-bolder-hover)",
-        disabledBackground: "var(--color-background-disabled-default)",
-        filledBackground: "var(--color-background-accent-gray-subtler-default)",
-        borderColor: "var(--color-border-default)",
-        hoverBorderColor: "var(--color-border-bold)",
-        focusBorderColor: "var(--color-border-focused)",
-        checkedBorderColor: "var(--color-background-brand-bolder-default)",
-        checkedHoverBorderColor: "var(--color-background-brand-bolder-hover)",
-        checkedFocusBorderColor: "var(--color-border-focused)",
-        checkedDisabledBorderColor: "var(--color-border-disabled)",
-        invalidBorderColor: "var(--color-border-danger)",
-        shadow: "{form.field.shadow}",
+        transitionDuration: "{transition.duration}"
+      },
+      header: {
+        background: "{content.background}",
+        borderColor: "{datatable.border.color}",
+        color: "{content.color}",
+        borderWidth: "var(--border-width-1)",
+        padding: "0.75rem 1rem",
+        sm: {
+          padding: "0.375rem 0.5rem"
+        },
+        lg: {
+          padding: "1rem 1.25rem"
+        }
+      },
+      headerCell: {
+        background: "{content.background}",
+        hoverBackground: "{content.hover.background}",
+        selectedBackground: "{highlight.background}",
+        borderColor: "{datatable.border.color}",
+        color: "{content.color}",
+        hoverColor: "{content.hover.color}",
+        selectedColor: "{highlight.color}",
+        gap: "var(--space-100)",
+        padding: "0.75rem 1rem",
         focusRing: {
           width: "{focus.ring.width}",
           style: "{focus.ring.style}",
-          color: "var(--color-border-focused)",
-          offset: "{focus.ring.offset}",
+          color: "{focus.ring.color}",
+          offset: "-1px",
           shadow: "{focus.ring.shadow}"
         },
-        transitionDuration: "{form.field.transition.duration}",
         sm: {
-          width: "var(--space-200)",
-          height: "var(--space-200)"
+          padding: "0.375rem 0.5rem"
         },
         lg: {
-          width: "var(--space-300)",
-          height: "var(--space-300)"
+          padding: "1rem 1.25rem"
         }
       },
-      icon: {
-        size: "var(--space-150)",
-        checkedColor: "var(--color-icon-inverse)",
-        checkedHoverColor: "var(--color-icon-inverse)",
-        disabledColor: "var(--color-icon-disabled)",
+      columnTitle: {
+        fontWeight: "var(--font-weight-medium)"
+      },
+      row: {
+        background: "{content.background}",
+        hoverBackground: "{content.hover.background}",
+        selectedBackground: "{highlight.background}",
+        color: "{content.color}",
+        hoverColor: "{content.hover.color}",
+        selectedColor: "{highlight.color}",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "{focus.ring.color}",
+          offset: "-1px",
+          shadow: "{focus.ring.shadow}"
+        }
+      },
+      bodyCell: {
+        borderColor: "{datatable.border.color}",
+        padding: "0.75rem 1rem",
         sm: {
-          size: "var(--space-100)",
-          borderRadius: "9999px"
+          padding: "0.375rem 0.5rem"
         },
         lg: {
-          size: "var(--space-200)",
-          borderRadius: "9999px"
-        },
-        borderRadius: "9999px"
+          padding: "1rem 1.25rem"
+        }
       },
-      gap: "var(--space-100)",
-      borderRadius: "9999px"
-    },
-    select: {
-      root: {
-        background: "var(--color-elevation-surface-default)",
-        disabledBackground: "var(--color-background-disabled-default)",
-        filledBackground: "var(--color-background-accent-gray-subtler-default)",
-        filledHoverBackground: "var(--color-background-accent-gray-subtler-default)",
-        filledFocusBackground: "var(--color-background-accent-gray-subtler-default)",
-        borderColor: "var(--color-background-accent-gray-hover)",
-        hoverBorderColor: "var(--color-background-accent-gray-pressed)",
-        focusBorderColor: "var(--color-border-focused)",
-        invalidBorderColor: "var(--color-border-danger)",
-        color: "var(--color-text-default)",
-        disabledColor: "var(--color-text-disabled)",
-        placeholderColor: "var(--color-text-subtlest)",
-        invalidPlaceholderColor: "var(--color-text-danger)",
-        shadow: "{form.field.shadow}",
-        paddingX: "var(--space-150)",
-        paddingY: "var(--space-50)",
-        borderRadius: "var(--border-radius-sm)",
-        focusRing: {
-          width: "{form.field.focus.ring.width}",
-          style: "{form.field.focus.ring.style}",
-          color: "{form.field.focus.ring.color}",
-          offset: "{form.field.focus.ring.offset}",
-          shadow: "{form.field.focus.ring.shadow}"
+      footerCell: {
+        background: "{content.background}",
+        borderColor: "{datatable.border.color}",
+        color: "{content.color}",
+        padding: "0.75rem 1rem",
+        sm: {
+          padding: "0.375rem 0.5rem"
         },
-        transitionDuration: "{form.field.transition.duration}",
+        lg: {
+          padding: "1rem 1.25rem"
+        }
+      },
+      columnFooter: {
+        fontWeight: "var(--font-weight-medium)"
+      },
+      footer: {
+        background: "{content.background}",
+        borderColor: "{datatable.border.color}",
+        color: "{content.color}",
+        borderWidth: "var(--border-width-1)",
+        padding: "0.75rem 1rem",
         sm: {
-          fontSize: "var(--font-size-sm)",
-          paddingX: "var(--space-150)",
-          paddingY: "var(--space-50)",
-          minHeight: "var(--space-400)"
+          padding: "0.375rem 0.5rem"
         },
         lg: {
-          fontSize: "var(--font-size-md)",
-          paddingX: "var(--space-150)",
-          paddingY: "var(--space-100)",
-          minHeight: "var(--space-600)"
+          padding: "1rem 1.25rem"
+        }
+      },
+      dropPoint: {
+        color: "{primary.color}"
+      },
+      columnResizer: {
+        width: "var(--space-100)"
+      },
+      resizeIndicator: {
+        width: "var(--space-25)",
+        color: "{primary.color}"
+      },
+      sortIcon: {
+        color: "{text.muted.color}",
+        hoverColor: "{text.hover.muted.color}",
+        size: "var(--space-150)"
+      },
+      loadingIcon: {
+        size: "var(--space-400)"
+      },
+      rowToggleButton: {
+        hoverBackground: "{content.hover.background}",
+        selectedHoverBackground: "{content.background}",
+        color: "{text.muted.color}",
+        hoverColor: "{text.color}",
+        selectedHoverColor: "{primary.color}",
+        size: "var(--space-300)",
+        borderRadius: "{datatable.row.toggle.button.size} / 2",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "{focus.ring.color}",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        }
+      },
+      filter: {
+        inlineGap: "var(--space-100)",
+        overlaySelect: {
+          background: "{overlay.select.background}",
+          borderColor: "{overlay.select.border.color}",
+          borderRadius: "{overlay.select.border.radius}",
+          color: "{overlay.select.color}",
+          shadow: "{overlay.select.shadow}"
         },
-        minHeight: "var(--space-500)"
+        overlayPopover: {
+          background: "{overlay.popover.background}",
+          borderColor: "{overlay.popover.border.color}",
+          borderRadius: "{overlay.popover.border.radius}",
+          color: "{overlay.popover.color}",
+          shadow: "{overlay.popover.shadow}",
+          padding: "{overlay.popover.padding}",
+          gap: "var(--space-100)"
+        },
+        rule: {
+          borderColor: "{content.border.color}"
+        },
+        constraintList: {
+          padding: "{list.padding}",
+          gap: "{list.gap}"
+        },
+        constraint: {
+          focusBackground: "{list.option.focus.background}",
+          selectedBackground: "{list.option.selected.background}",
+          selectedFocusBackground: "{list.option.selected.focus.background}",
+          color: "{list.option.color}",
+          focusColor: "{list.option.focus.color}",
+          selectedColor: "{list.option.selected.color}",
+          selectedFocusColor: "{list.option.selected.focus.color}",
+          separator: {
+            borderColor: "{content.border.color}"
+          },
+          padding: "{list.option.padding}",
+          borderRadius: "{list.option.border.radius}"
+        }
       },
-      dropdown: {
-        width: "var(--space-500)",
-        color: "var(--color-icon-subtlest)"
+      paginatorTop: {
+        borderColor: "{datatable.border.color}",
+        borderWidth: "var(--border-width-1)"
       },
-      overlay: {
-        background: "var(--color-elevation-surface-default)",
-        borderColor: "var(--color-border-default)",
-        borderRadius: "var(--border-radius-sm)",
-        color: "{overlay.select.color}",
-        shadow: "{overlay.select.shadow}"
+      paginatorBottom: {
+        borderColor: "{datatable.border.color}",
+        borderWidth: "var(--border-width-1)"
       },
-      list: {
-        padding: "var(--space-100)",
-        gap: "var(--space-25)",
-        header: {
-          padding: "var(--space-100)"
+      colorScheme: {
+        light: {
+          root: {
+            borderColor: "{content.border.color}"
+          },
+          row: {
+            stripedBackground: "{surface.50}"
+          },
+          bodyCell: {
+            selectedBorderColor: "{primary.100}"
+          }
+        },
+        dark: {
+          root: {
+            borderColor: "{surface.800}"
+          },
+          row: {
+            stripedBackground: "{surface.950}"
+          },
+          bodyCell: {
+            selectedBorderColor: "{primary.900}"
+          }
         }
+      }
+    },
+    timeline: {
+      event: {
+        minHeight: "var(--space-1000)"
       },
-      option: {
-        focusBackground: "var(--color-background-accent-gray-subtle-hover)",
-        selectedBackground: "var(--color-background-brand-subtlest-default)",
-        selectedFocusBackground: "var(--color-background-brand-subtler-default)",
-        color: "var(--color-text-subtle)",
-        focusColor: "var(--color-text-default)",
-        selectedColor: "var(--color-text-selected)",
-        selectedFocusColor: "var(--color-text-selected)",
-        padding: "var(--space-100) var(--space-150)",
-        borderRadius: "var(--border-radius-xs)",
-        gap: "var(--space-100)"
+      horizontal: {
+        eventContent: {
+          padding: "1rem"
+        }
       },
-      optionGroup: {
-        background: "var(--color-elevation-surface-default)",
-        color: "var(--color-text-subtlest)",
-        fontWeight: "{list.option.group.font.weight}",
-        padding: "var(--space-100) var(--space-150)"
+      vertical: {
+        eventContent: {
+          padding: "0 1rem"
+        }
       },
-      clearIcon: {
-        color: "var(--color-icon-subtle)"
+      eventMarker: {
+        size: "var(--space-200)",
+        borderRadius: "{timeline.event.marker.size} / 2",
+        borderWidth: "var(--border-width-2)",
+        background: "{content.background}",
+        borderColor: "{content.border.color}",
+        content: {
+          borderRadius: "{timeline.event.marker.content.size} / 2",
+          size: "var(--space-75)",
+          background: "{primary.color}",
+          insetShadow: "0 0.5px 0 0 rgba(0, 0, 0, 0.06), 0 1px 1px 0 rgba(0, 0, 0, 0.12)"
+        }
       },
-      checkmark: {
-        color: "var(--color-text-subtle)",
-        gutterStart: "var(--space-negative-75)",
-        gutterEnd: "var(--space-75)"
+      eventConnector: {
+        color: "{content.border.color}",
+        size: "var(--space-50)"
+      }
+    },
+    tree: {
+      root: {
+        background: "{content.background}",
+        color: "{content.color}",
+        padding: "var(--space-200)",
+        gap: "var(--space-50)",
+        indent: "1rem",
+        transitionDuration: "{transition.duration}"
       },
-      emptyMessage: {
-        padding: "var(--space-100) var(--space-150)"
+      node: {
+        padding: "0.25rem 0.5rem",
+        borderRadius: "{content.border.radius}",
+        hoverBackground: "{content.hover.background}",
+        selectedBackground: "{highlight.background}",
+        color: "{text.color}",
+        hoverColor: "{text.hover.color}",
+        selectedColor: "{highlight.color}",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "{focus.ring.color}",
+          offset: "-1px",
+          shadow: "{focus.ring.shadow}"
+        },
+        gap: "var(--space-50)"
+      },
+      nodeIcon: {
+        color: "{text.muted.color}",
+        hoverColor: "{text.hover.muted.color}",
+        selectedColor: "{highlight.color}"
+      },
+      nodeToggleButton: {
+        borderRadius: "{tree.node.toggle.button.size} / 2",
+        size: "var(--space-300)",
+        hoverBackground: "{content.hover.background}",
+        selectedHoverBackground: "{content.background}",
+        color: "{text.muted.color}",
+        hoverColor: "{text.hover.muted.color}",
+        selectedHoverColor: "{primary.color}",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "{focus.ring.color}",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        }
+      },
+      loadingIcon: {
+        size: "var(--space-400)"
+      },
+      filter: {
+        margin: "var(--space-100)"
       }
     },
-    selectbutton: {
+    virtualscroller: {
+      loader: {
+        mask: {
+          background: "{content.background}",
+          color: "{text.muted.color}"
+        },
+        icon: {
+          size: "var(--space-400)"
+        }
+      }
+    },
+    carousel: {
       root: {
-        borderRadius: "var(--border-radius-md)"
+        transitionDuration: "{transition.duration}"
+      },
+      content: {
+        gap: "var(--space-50)"
+      },
+      indicatorList: {
+        padding: "var(--space-100)",
+        gap: "var(--space-100)"
+      },
+      indicator: {
+        width: "var(--space-400)",
+        height: "var(--space-100)",
+        borderRadius: "var(--border-radius-sm)",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "var(--color-border-focused)",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        }
       },
       colorScheme: {
         light: {
-          root: {
-            invalidBorderColor: "var(--color-border-danger)"
+          indicator: {
+            background: "var(--color-background-accent-gray-default)",
+            hoverBackground: "var(--color-background-accent-gray-hover)",
+            activeBackground: "var(--color-background-selected-bold-default)"
           }
         },
         dark: {
-          root: {
-            invalidBorderColor: "var(--color-border-danger)"
+          indicator: {
+            background: "var(--color-background-accent-gray-default)",
+            hoverBackground: "var(--color-background-accent-gray-hover)",
+            activeBackground: "var(--color-background-selected-bold-default)"
           }
         }
       }
     },
-    tabs: {
+    image: {
       root: {
         transitionDuration: "{transition.duration}"
       },
-      tablist: {
-        borderWidth: "0 0 1px 0",
-        background: "transparent",
-        borderColor: "var(--color-border-default)"
+      preview: {
+        icon: {
+          size: "var(--space-300)"
+        },
+        mask: {
+          background: "var(--color-background-alpha-bold-default)",
+          color: "var(--color-icon-inverse)"
+        }
       },
-      tab: {
-        background: "transparent",
-        hoverBackground: "transparent",
-        activeBackground: "transparent",
-        borderWidth: "0 0 1px 0",
-        borderColor: "var(--color-border-default)",
-        hoverBorderColor: "var(--color-border-default)",
-        activeBorderColor: "var(--color-border-selected)",
-        color: "var(--color-text-subtlest)",
-        hoverColor: "var(--color-text-default)",
-        activeColor: "var(--color-text-selected)",
-        padding: "var(--space-150)",
-        fontWeight: "var(--font-weight-medium)",
-        margin: "0 0 -1px 0",
-        gap: "var(--space-100)",
+      toolbar: {
+        position: {
+          left: "auto",
+          right: "var(--space-200)",
+          top: "var(--space-200)",
+          bottom: "auto"
+        },
+        blur: "8",
+        background: "rgba(255, 255, 255, 0.1)",
+        borderColor: "rgba(255, 255, 255, 0.2)",
+        borderWidth: "var(--border-width-1)",
+        borderRadius: "var(--border-radius-full)",
+        padding: "var(--space-100)",
+        gap: "var(--space-100)"
+      },
+      action: {
+        hoverBackground: "var(--color-background-alpha-subtler-hover)",
+        color: "var(--color-icon-inverse)",
+        hoverColor: "var(--color-icon-inverse)",
+        size: "var(--space-500)",
+        iconSize: "var(--space-300)",
+        borderRadius: "var(--border-radius-full)",
         focusRing: {
           width: "{focus.ring.width}",
           style: "{focus.ring.style}",
           color: "var(--color-border-focused)",
-          offset: "-1px",
+          offset: "{focus.ring.offset}",
           shadow: "{focus.ring.shadow}"
         }
+      }
+    },
+    treetable: {
+      root: {
+        transitionDuration: "{transition.duration}"
       },
-      tabpanel: {
-        background: "transparent",
-        color: "var(--color-text-default)",
-        padding: "var(--space-200)",
+      header: {
+        background: "{content.background}",
+        borderColor: "{treetable.border.color}",
+        color: "{content.color}",
+        borderWidth: "var(--border-width-1)",
+        padding: "0.75rem 1rem"
+      },
+      headerCell: {
+        background: "{content.background}",
+        hoverBackground: "{content.hover.background}",
+        selectedBackground: "{highlight.background}",
+        borderColor: "{treetable.border.color}",
+        color: "{content.color}",
+        hoverColor: "{content.hover.color}",
+        selectedColor: "{highlight.color}",
+        gap: "var(--space-100)",
+        padding: "0.75rem 1rem",
         focusRing: {
           width: "{focus.ring.width}",
           style: "{focus.ring.style}",
-          color: "var(--color-border-focused)",
-          offset: "{focus.ring.offset}",
+          color: "{focus.ring.color}",
+          offset: "-1px",
           shadow: "{focus.ring.shadow}"
         }
       },
-      navButton: {
-        background: "var(--color-elevation-surface-default)",
-        color: "var(--color-text-subtlest)",
-        hoverColor: "{text.color}",
-        width: "var(--space-500)",
+      columnTitle: {
+        fontWeight: "var(--font-weight-medium)"
+      },
+      row: {
+        background: "{content.background}",
+        hoverBackground: "{content.hover.background}",
+        selectedBackground: "{highlight.background}",
+        color: "{content.color}",
+        hoverColor: "{content.hover.color}",
+        selectedColor: "{highlight.color}",
         focusRing: {
           width: "{focus.ring.width}",
           style: "{focus.ring.style}",
@@ -2640,140 +4678,85 @@ const BCCPreset = definePreset(Aura, {
           shadow: "{focus.ring.shadow}"
         }
       },
-      activeBar: {
-        height: "var(--space-25)",
-        bottom: "-1px",
-        background: "var(--color-background-brand-bolder-default)"
+      bodyCell: {
+        borderColor: "{treetable.border.color}",
+        padding: "0.75rem 1rem",
+        gap: "var(--space-100)"
       },
-      colorScheme: {
-        light: {
-          navButton: {
-            shadow: "0 0 10px 50px rgba(255, 255, 255, 0.6)"
-          }
-        },
-        dark: {
-          navButton: {
-            shadow: "0 0 10px 50px #0F172A80"
-          }
+      footerCell: {
+        background: "{content.background}",
+        borderColor: "{treetable.border.color}",
+        color: "{content.color}",
+        padding: "0.75rem 1rem"
+      },
+      columnFooter: {
+        fontWeight: "var(--font-weight-medium)"
+      },
+      footer: {
+        background: "{content.background}",
+        borderColor: "{treetable.border.color}",
+        color: "{content.color}",
+        borderWidth: "var(--border-width-1)",
+        padding: "0.75rem 1rem"
+      },
+      columnResizer: {
+        width: "var(--space-100)"
+      },
+      resizeIndicator: {
+        width: "var(--space-25)",
+        color: "{primary.color}"
+      },
+      sortIcon: {
+        color: "{text.muted.color}",
+        hoverColor: "{text.hover.muted.color}",
+        size: "var(--space-150)"
+      },
+      loadingIcon: {
+        size: "var(--space-400)"
+      },
+      nodeToggleButton: {
+        hoverBackground: "{content.hover.background}",
+        selectedHoverBackground: "{content.background}",
+        color: "{text.muted.color}",
+        hoverColor: "{text.color}",
+        selectedHoverColor: "{primary.color}",
+        size: "var(--space-300)",
+        borderRadius: "{treetable.node.toggle.button.size} / 2",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "{focus.ring.color}",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
         }
-      }
-    },
-    tag: {
-      root: {
-        fontSize: "var(--font-size-sm)",
-        fontWeight: "var(--font-weight-regular)",
-        padding: "var(--space-50) var(--space-100)",
-        gap: "var(--space-50)",
-        borderRadius: "var(--border-radius-sm)",
-        roundedBorderRadius: "var(--border-radius-full)"
       },
-      icon: {
-        size: "var(--icon-size-xs)"
+      paginatorTop: {
+        borderColor: "{content.border.color}",
+        borderWidth: "var(--border-width-1)"
+      },
+      paginatorBottom: {
+        borderColor: "{content.border.color}",
+        borderWidth: "var(--border-width-1)"
       },
       colorScheme: {
         light: {
-          primary: {
-            background: "var(--color-background-brand-subtler-default)",
-            color: "var(--color-text-brand-bold)"
-          },
-          secondary: {
-            background: "var(--color-background-accent-gray-subtle-default)",
-            color: "var(--color-text-accent-gray-bold)"
-          },
-          success: {
-            background: "var(--color-background-accent-green-subtler-default)",
-            color: "var(--color-text-accent-green-bold)"
-          },
-          info: {
-            background: "var(--color-background-accent-blue-subtler-default)",
-            color: "var(--color-text-accent-blue-bold)"
-          },
-          warn: {
-            background: "var(--color-background-accent-orange-subtler-default)",
-            color: "var(--color-text-accent-orange-bold)"
-          },
-          danger: {
-            background: "var(--color-background-accent-red-subtler-default)",
-            color: "var(--color-text-accent-red-bold)"
+          root: {
+            borderColor: "{content.border.color}"
           },
-          contrast: {
-            background: "var(--color-background-accent-gray-bolder-default)",
-            color: "var(--color-text-inverse)"
+          bodyCell: {
+            selectedBorderColor: "{primary.100}"
           }
         },
         dark: {
-          primary: {
-            background: "var(--color-background-brand-subtler-default)",
-            color: "var(--color-text-brand-bold)"
-          },
-          secondary: {
-            background: "var(--color-background-accent-gray-subtle-default)",
-            color: "var(--color-text-accent-gray-bold)"
-          },
-          success: {
-            background: "var(--color-background-accent-green-subtler-default)",
-            color: "var(--color-text-accent-green-bold)"
-          },
-          info: {
-            background: "var(--color-background-accent-blue-subtler-default)",
-            color: "var(--color-text-accent-blue-bold)"
-          },
-          warn: {
-            background: "var(--color-background-accent-orange-subtler-default)",
-            color: "var(--color-text-accent-orange-bold)"
-          },
-          danger: {
-            background: "var(--color-background-accent-red-subtler-default)",
-            color: "var(--color-text-accent-red-bold)"
+          root: {
+            borderColor: "{surface.800}"
           },
-          contrast: {
-            background: "var(--color-background-accent-gray-bolder-default)",
-            color: "var(--color-text-inverse)"
+          bodyCell: {
+            selectedBorderColor: "{primary.900}"
           }
         }
       }
     },
-    textarea: {
-      root: {
-        background: "var(--color-elevation-surface-default)",
-        disabledBackground: "var(--color-background-disabled-default)",
-        filledBackground: "var(--color-background-accent-gray-subtler-default)",
-        filledHoverBackground: "var(--color-background-accent-gray-subtler-default)",
-        filledFocusBackground: "var(--color-background-accent-gray-subtler-default)",
-        borderColor: "var(--color-border-default)",
-        hoverBorderColor: "var(--color-border-bold)",
-        focusBorderColor: "var(--color-border-focused)",
-        invalidBorderColor: "var(--color-border-danger)",
-        color: "var(--color-text-default)",
-        disabledColor: "var(--color-text-disabled)",
-        placeholderColor: "var(--color-text-subtlest)",
-        invalidPlaceholderColor: "var(--color-text-danger)",
-        shadow: "{form.field.shadow}",
-        paddingX: "var(--space-150)",
-        paddingY: "var(--space-50)",
-        borderRadius: "var(--border-radius-sm)",
-        focusRing: {
-          width: "{form.field.focus.ring.width}",
-          style: "{form.field.focus.ring.style}",
-          color: "transparent",
-          offset: "{form.field.focus.ring.offset}",
-          shadow: "{form.field.focus.ring.shadow}"
-        },
-        transitionDuration: "{form.field.transition.duration}",
-        sm: {
-          fontSize: "{form.field.sm.font.size}",
-          paddingX: "var(--space-150)",
-          paddingY: "var(--space-50)"
-        },
-        lg: {
-          fontSize: "{form.field.lg.font.size}",
-          paddingX: "var(--space-150)",
-          paddingY: "var(--space-50)"
-        },
-        gap: "var(--space-200)",
-        minHeight: "var(--space-300)"
-      }
-    },
     toast: {
       root: {
         width: "25rem",
@@ -2993,113 +4976,260 @@ const BCCPreset = definePreset(Aura, {
         }
       }
     },
-    togglebutton: {
+    galleria: {
       root: {
-        padding: "var(--space-50)",
-        borderRadius: "var(--border-radius-md)",
+        borderWidth: "var(--border-width-1)",
+        borderColor: "{content.border.color}",
+        borderRadius: "{content.border.radius}",
+        transitionDuration: "{transition.duration}"
+      },
+      navButton: {
+        background: "rgba(255, 255, 255, 0.1)",
+        hoverBackground: "rgba(255, 255, 255, 0.2)",
+        color: "{surface.100}",
+        hoverColor: "{surface.0}",
+        size: "var(--space-500)",
+        gutter: "0.5rem",
+        prev: {
+          borderRadius: "{galleria.nav.button.size} / 2"
+        },
+        next: {
+          borderRadius: "{galleria.nav.button.size} / 2"
+        },
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "{focus.ring.color}",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        }
+      },
+      navIcon: {
+        size: "var(--space-300)"
+      },
+      thumbnailsContent: {
+        background: "{content.background}",
+        padding: "1rem 0.25rem"
+      },
+      thumbnailNavButton: {
+        size: "var(--space-400)",
+        borderRadius: "{content.border.radius}",
+        gutter: "0.5rem",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "{focus.ring.color}",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        }
+      },
+      thumbnailNavButtonIcon: {
+        size: "var(--space-200)"
+      },
+      caption: {
+        background: "rgba(0, 0, 0, 0.5)",
+        color: "{surface.100}",
+        padding: "var(--space-200)"
+      },
+      indicatorList: {
         gap: "var(--space-100)",
-        fontWeight: "var(--font-weight-medium)",
-        disabledBackground: "var(--color-background-disabled-default)",
-        disabledBorderColor: "var(--color-background-disabled-default)",
-        disabledColor: "var(--color-text-disabled)",
-        invalidBorderColor: "var(--color-border-danger)",
+        padding: "var(--space-200)"
+      },
+      indicatorButton: {
+        width: "var(--space-200)",
+        height: "var(--space-200)",
+        activeBackground: "{primary.color}",
+        borderRadius: "{galleria.indicator.button.width} / 2",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "{focus.ring.color}",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        }
+      },
+      insetIndicatorList: {
+        background: "rgba(0, 0, 0, 0.5)"
+      },
+      insetIndicatorButton: {
+        background: "rgba(255, 255, 255, 0.4)",
+        hoverBackground: "rgba(255, 255, 255, 0.6)",
+        activeBackground: "rgba(255, 255, 255, 0.9)"
+      },
+      closeButton: {
+        size: "var(--space-500)",
+        gutter: "0.5rem",
+        background: "rgba(255, 255, 255, 0.1)",
+        hoverBackground: "rgba(255, 255, 255, 0.2)",
+        color: "{surface.50}",
+        hoverColor: "{surface.0}",
+        borderRadius: "{galleria.close.button.size} / 2",
         focusRing: {
           width: "{focus.ring.width}",
           style: "{focus.ring.style}",
-          color: "var(--color-border-focused)",
+          color: "{focus.ring.color}",
           offset: "{focus.ring.offset}",
           shadow: "{focus.ring.shadow}"
-        },
-        transitionDuration: "{form.field.transition.duration}",
-        sm: {
-          fontSize: "var(--font-size-sm)",
-          padding: "var(--space-50)"
-        },
-        lg: {
-          fontSize: "{form.field.lg.font.size}",
-          padding: "var(--space-50)"
         }
       },
-      icon: {
-        disabledColor: "var(--color-icon-disabled)"
-      },
-      content: {
-        padding: "var(--space-50) var(--space-100)",
-        borderRadius: "var(--border-radius-sm)",
-        checkedShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.02), 0 1px 2px 0 rgba(0, 0, 0, 0.04)",
-        sm: {
-          padding: "var(--space-25) var(--space-50)",
-          minHeight: "var(--space-300)",
-          border: {
-            radius: "var(--border-radius-sm)"
-          }
-        },
-        lg: {
-          padding: "var(--space-75) var(--space-150)",
-          minHeight: "var(--space-500)"
-        },
-        minHeight: "var(--space-400)"
+      closeButtonIcon: {
+        size: "var(--space-300)"
       },
       colorScheme: {
         light: {
-          root: {
-            background: "var(--color-background-accent-gray-default)",
-            checkedBackground: "var(--color-background-accent-gray-default)",
-            hoverBackground: "var(--color-background-accent-gray-default)",
-            borderColor: "var(--color-background-accent-gray-default)",
-            color: "var(--color-text-subtle)",
-            hoverColor: "var(--color-text-default)",
-            checkedColor: "var(--color-text-default)",
-            checkedBorderColor: "var(--color-background-accent-gray-default)"
-          },
-          content: {
-            checkedBackground: "var(--color-elevation-surface-default)"
+          thumbnailNavButton: {
+            hoverBackground: "{surface.100}",
+            color: "{surface.600}",
+            hoverColor: "{surface.700}"
           },
-          icon: {
-            color: "var(--color-icon-subtle)",
-            hoverColor: "var(--color-icon-default)",
-            checkedColor: "var(--color-icon-default)"
+          indicatorButton: {
+            background: "{surface.200}",
+            hoverBackground: "{surface.300}"
           }
         },
         dark: {
-          root: {
-            background: "var(--color-background-accent-gray-default)",
-            checkedBackground: "var(--color-background-accent-gray-default)",
-            hoverBackground: "var(--color-background-accent-gray-default)",
-            borderColor: "var(--color-background-accent-gray-default)",
-            color: "var(--color-text-subtle)",
-            hoverColor: "var(--color-text-default)",
-            checkedColor: "var(--color-text-default)",
-            checkedBorderColor: "var(--color-background-accent-gray-default)"
-          },
-          content: {
-            checkedBackground: "var(--color-elevation-surface-default)"
+          thumbnailNavButton: {
+            hoverBackground: "{surface.700}",
+            color: "{surface.400}",
+            hoverColor: "{surface.0}"
           },
-          icon: {
-            color: "var(--color-icon-subtle)",
-            hoverColor: "var(--color-icon-default)",
-            checkedColor: "var(--color-icon-default)"
+          indicatorButton: {
+            background: "{surface.700}",
+            hoverBackground: "{surface.600}"
           }
         }
+      }
+    },
+    popover: {
+      root: {
+        background: "{overlay.popover.background}",
+        borderColor: "{overlay.popover.border.color}",
+        color: "{overlay.popover.color}",
+        borderRadius: "{overlay.popover.border.radius}",
+        shadow: "{overlay.popover.shadow}",
+        gutter: "10px",
+        arrowOffset: "var(--space-250)"
       },
-      minHeight: "var(--space-500)",
-      sm: {
-        minHeight: "var(--space-400)",
-        border: {
-          radius: "var(--border-radius-sm)"
+      content: {
+        padding: "{overlay.popover.padding}"
+      }
+    },
+    fileupload: {
+      root: {
+        background: "{content.background}",
+        borderColor: "{content.border.color}",
+        color: "{content.color}",
+        borderRadius: "{content.border.radius}",
+        transitionDuration: "{transition.duration}"
+      },
+      header: {
+        background: "rgba(0, 0, 0, 0)",
+        color: "{text.color}",
+        padding: "var(--space-200)",
+        borderColor: "rgba(0, 0, 0, 0)",
+        borderWidth: "var(--border-width-0)",
+        borderRadius: "0",
+        gap: "var(--space-100)"
+      },
+      content: {
+        highlightBorderColor: "{primary.color}",
+        padding: "0 1.125rem 1.125rem 1.125rem",
+        gap: "var(--space-200)"
+      },
+      file: {
+        padding: "var(--space-200)",
+        gap: "var(--space-200)",
+        borderColor: "{content.border.color}",
+        info: {
+          gap: "var(--space-100)"
         }
       },
-      lg: {
-        minHeight: "var(--space-600)"
+      fileList: {
+        gap: "var(--space-100)"
+      },
+      progressbar: {
+        height: "var(--space-50)"
+      },
+      basic: {
+        gap: "var(--space-100)"
       }
     },
-    toggleswitch: {
+    speeddial: {
       root: {
-        width: "var(--space-500)",
-        height: "var(--space-300)",
-        borderRadius: "var(--border-radius-3xl)",
-        gap: "var(--space-50)",
-        shadow: "{form.field.shadow}",
+        gap: "var(--space-100)",
+        transitionDuration: "{transition.duration}"
+      }
+    },
+    splitbutton: {
+      root: {
+        borderRadius: "{form.field.border.radius}",
+        roundedBorderRadius: "2rem",
+        raisedShadow: "0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)"
+      }
+    },
+    stepper: {
+      root: {
+        transitionDuration: "{transition.duration}"
+      },
+      separator: {
+        background: "var(--color-background-accent-gray-default)",
+        activeBackground: "var(--color-background-brand-bolder-default)",
+        margin: "var(--space-0) var(--space-0) var(--space-0) var(--space-200)",
+        size: "var(--space-50)"
+      },
+      step: {
+        padding: "var(--space-100)",
+        gap: "var(--space-200)"
+      },
+      stepHeader: {
+        padding: "var(--space-0)",
+        borderRadius: "var(--border-radius-sm)",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "var(--color-border-focused)",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        },
+        gap: "var(--space-100)"
+      },
+      stepTitle: {
+        color: "var(--color-text-subtlest)",
+        activeColor: "var(--color-text-selected)",
+        fontWeight: "var(--font-weight-medium)"
+      },
+      stepNumber: {
+        background: "var(--color-elevation-surface-default)",
+        activeBackground: "var(--color-elevation-surface-default)",
+        borderColor: "var(--color-border-default)",
+        activeBorderColor: "var(--color-border-default)",
+        color: "var(--color-text-subtlest)",
+        activeColor: "var(--color-text-selected)",
+        size: "var(--space-400)",
+        fontSize: "var(--font-size-md)",
+        fontWeight: "var(--font-weight-medium)",
+        borderRadius: "var(--border-radius-xl)",
+        shadow: "0 0.5px 0 0 rgba(0, 0, 0, 0.06), 0 1px 1px 0 rgba(0, 0, 0, 0.12)"
+      },
+      steppanels: {
+        padding: "var(--space-150) var(--space-100) var(--space-200) var(--space-100)"
+      },
+      steppanel: {
+        background: "transparent",
+        color: "var(--color-text-default)",
+        padding: "var(--space-0)",
+        indent: "var(--space-200)"
+      }
+    },
+    blockui: {
+      root: {
+        borderRadius: "{content.border.radius}"
+      }
+    },
+    inplace: {
+      root: {
+        padding: "{form.field.padding.y} {form.field.padding.x}",
+        borderRadius: "{content.border.radius}",
         focusRing: {
           width: "{focus.ring.width}",
           style: "{focus.ring.style}",
@@ -3107,65 +5237,108 @@ const BCCPreset = definePreset(Aura, {
           offset: "{focus.ring.offset}",
           shadow: "{focus.ring.shadow}"
         },
-        borderWidth: "var(--border-width-1)",
-        borderColor: "transparent",
-        hoverBorderColor: "transparent",
-        checkedBorderColor: "transparent",
-        checkedHoverBorderColor: "transparent",
-        invalidBorderColor: "{form.field.invalid.border.color}",
-        transitionDuration: "{form.field.transition.duration}",
-        slideDuration: "0.2s"
+        transitionDuration: "{transition.duration}"
       },
-      handle: {
-        borderRadius: "var(--border-radius-full)",
+      display: {
+        hoverBackground: "{content.hover.background}",
+        hoverColor: "{content.hover.color}"
+      }
+    },
+    metergroup: {
+      root: {
+        borderRadius: "{content.border.radius}",
+        gap: "var(--space-200)"
+      },
+      meters: {
+        background: "{content.border.color}",
+        size: "var(--space-100)"
+      },
+      label: {
+        gap: "var(--space-100)"
+      },
+      labelMarker: {
+        size: "var(--space-100)"
+      },
+      labelIcon: {
         size: "var(--space-200)"
       },
-      colorScheme: {
-        light: {
-          root: {
-            background: "var(--color-background-accent-gray-default)",
-            disabledBackground: "var(--color-background-disabled-default)",
-            hoverBackground: "var(--color-background-accent-gray-hover)",
-            checkedBackground: "var(--color-background-brand-bolder-default)",
-            checkedHoverBackground: "var(--color-background-brand-bolder-default)"
-          },
-          handle: {
-            background: "var(--color-elevation-surface-default)",
-            disabledBackground: "var(--color-icon-disabled)",
-            hoverBackground: "var(--color-elevation-surface-hovered)",
-            checkedBackground: "var(--color-elevation-surface-default)",
-            checkedHoverBackground: "var(--color-elevation-surface-default)",
-            color: "var(--color-text-subtlest)",
-            hoverColor: "var(--color-text-default)",
-            checkedColor: "var(--color-background-brand-bolder-default)",
-            checkedHoverColor: "var(--color-background-brand-bolder-hover)"
-          }
+      labelList: {
+        verticalGap: "var(--space-100)",
+        horizontalGap: "var(--space-200)"
+      }
+    },
+    terminal: {
+      root: {
+        background: "{form.field.background}",
+        borderColor: "{form.field.border.color}",
+        color: "{form.field.color}",
+        height: "var(--space-1000)",
+        padding: "{form.field.padding.y} {form.field.padding.x}",
+        borderRadius: "{form.field.border.radius}"
+      },
+      prompt: {
+        gap: "var(--space-50)"
+      },
+      commandResponse: {
+        margin: "2rem"
+      }
+    },
+    imagecompare: {
+      handle: {
+        size: "var(--space-150)",
+        hoverSize: "var(--space-300)",
+        background: "rgba(255, 255, 255, 0.3)",
+        hoverBackground: "rgba(255, 255, 255, 0.3)",
+        borderColor: "transparent",
+        hoverBorderColor: "transparent",
+        borderWidth: "var(--border-width-0)",
+        borderRadius: "{imagecompare.handle.size} / 2",
+        transitionDuration: "{transition.duration}",
+        focusRing: {
+          width: "{focus.ring.width}",
+          style: "{focus.ring.style}",
+          color: "rgba(255, 255, 255, 0.3)",
+          offset: "{focus.ring.offset}",
+          shadow: "{focus.ring.shadow}"
+        }
+      }
+    },
+    overlaybadge: {
+      root: {
+        outline: {
+          width: "var(--space-50)",
+          color: "var(--color-border-inverse)"
+        }
+      }
+    },
+    inputotp: {
+      root: {
+        gap: "var(--space-100)"
+      },
+      input: {
+        width: "var(--space-500)",
+        sm: {
+          width: "var(--space-400)"
         },
-        dark: {
-          root: {
-            background: "var(--color-background-accent-gray-default)",
-            disabledBackground: "var(--color-background-disabled-default)",
-            hoverBackground: "var(--color-background-accent-gray-hover)",
-            checkedBackground: "var(--color-background-brand-bolder-default)",
-            checkedHoverBackground: "var(--color-background-brand-bolder-default)"
-          },
-          handle: {
-            background: "var(--color-elevation-surface-default)",
-            disabledBackground: "var(--color-icon-disabled)",
-            hoverBackground: "var(--color-elevation-surface-hovered)",
-            checkedBackground: "var(--color-elevation-surface-default)",
-            checkedHoverBackground: "var(--color-elevation-surface-default)",
-            color: "var(--color-text-subtlest)",
-            hoverColor: "var(--color-text-default)",
-            checkedColor: "var(--color-background-brand-bolder-default)",
-            checkedHoverColor: "var(--color-background-brand-bolder-hover)"
-          }
+        lg: {
+          width: "var(--space-500)"
         }
       }
     },
-    floatlabel: {
-      on: {
-        gap: "var(--space-negative-100)"
+    iftalabel: {
+      root: {
+        color: "var(--color-text-subtlest)",
+        focusColor: "var(--color-text-subtlest)",
+        invalidColor: "var(--color-text-danger)",
+        transitionDuration: "0.2s",
+        positionX: "var(--space-150)",
+        top: "var(--space-50)",
+        fontSize: "var(--font-size-xs)",
+        fontWeight: "var(--font-weight-regular)"
+      },
+      input: {
+        paddingTop: "var(--space-300)",
+        paddingBottom: "var(--space-50)"
       }
     }
   }