@dalexto/lexsys-registry 0.0.6 → 0.1.0

package/templates/styles/tokens.css

@@ -3,7 +3,7 @@
  *
  * Generated by @dalexto/lexsys-tokens.
  * Manual changes will be overwritten.
- * Last generated: 2026-06-06T10:34:21.106Z
+ * Last generated: 2026-06-06T12:57:40.698Z
  */
 
 :root {
@@ -667,6 +667,46 @@
   --lex-alert-danger-background: var(--lex-color-feedback-danger-background);
   --lex-alert-danger-foreground: var(--lex-color-feedback-danger-foreground);
   --lex-alert-danger-border-color: var(--lex-color-feedback-danger-foreground);
+  --lex-autocomplete-background: var(--lex-color-background-base);
+  --lex-autocomplete-foreground: var(--lex-color-text-primary);
+  --lex-autocomplete-border-color: var(--lex-border-default);
+  --lex-autocomplete-radius: var(--lex-radius-control);
+  --lex-autocomplete-height-sm: var(--lex-size-control-sm);
+  --lex-autocomplete-height-md: var(--lex-size-control-md);
+  --lex-autocomplete-height-lg: var(--lex-size-control-lg);
+  --lex-autocomplete-padding-x-sm: var(--lex-space-control-x-sm);
+  --lex-autocomplete-padding-x-md: var(--lex-space-control-x-md);
+  --lex-autocomplete-padding-x-lg: var(--lex-space-control-x-lg);
+  --lex-autocomplete-trigger-gap: var(--lex-space-control-gap-sm);
+  --lex-autocomplete-font-family: var(--lex-typography-control-md-font-family);
+  --lex-autocomplete-font-size-sm: var(--lex-typography-control-sm-font-size);
+  --lex-autocomplete-font-size-md: var(--lex-typography-control-md-font-size);
+  --lex-autocomplete-font-size-lg: var(--lex-typography-control-lg-font-size);
+  --lex-autocomplete-font-weight: var(--lex-typography-control-md-font-weight);
+  --lex-autocomplete-font-line-height: var(--lex-typography-control-md-line-height);
+  --lex-autocomplete-font-letter-spacing: var(--lex-typography-control-md-letter-spacing);
+  --lex-autocomplete-popup-background: var(--lex-color-background-base);
+  --lex-autocomplete-popup-foreground: var(--lex-color-text-primary);
+  --lex-autocomplete-popup-border-color: var(--lex-border-default);
+  --lex-autocomplete-popup-max-height: var(--lex-size-overlay-list-max-height);
+  --lex-autocomplete-popup-shadow: var(--lex-elevation-shadow-floating-box-shadow);
+  --lex-autocomplete-list-gap: var(--lex-space-control-gap-sm);
+  --lex-autocomplete-list-padding: var(--lex-space-control-y-xs);
+  --lex-autocomplete-item-foreground: var(--lex-color-text-primary);
+  --lex-autocomplete-item-highlight-background: var(--lex-color-background-subtle);
+  --lex-autocomplete-item-highlight-foreground: var(--lex-color-text-primary);
+  --lex-autocomplete-item-selected-background: var(--lex-action-primary-base);
+  --lex-autocomplete-item-selected-foreground: var(--lex-color-text-inverse);
+  --lex-autocomplete-focus-border-color: var(--lex-border-focus);
+  --lex-autocomplete-focus-ring-color: var(--lex-border-focus);
+  --lex-autocomplete-focus-ring-offset-color: var(--lex-color-background-base);
+  --lex-autocomplete-focus-ring-width: var(--lex-outline-width-focus);
+  --lex-autocomplete-focus-ring-offset: var(--lex-outline-offset-focus);
+  --lex-autocomplete-invalid-border-color: var(--lex-action-danger-base);
+  --lex-autocomplete-invalid-ring-color: var(--lex-action-danger-base);
+  --lex-autocomplete-invalid-ring-width: var(--lex-outline-width-focus);
+  --lex-autocomplete-transition-duration: var(--lex-duration-control);
+  --lex-autocomplete-transition-easing: var(--lex-easing-control);
   --lex-avatar-background: var(--lex-color-background-subtle);
   --lex-avatar-foreground: var(--lex-color-text-secondary);
   --lex-avatar-border-color: var(--lex-border-default);
@@ -705,6 +745,23 @@
   --lex-badge-danger-background: var(--lex-action-danger-base);
   --lex-badge-danger-foreground: var(--lex-color-text-inverse);
   --lex-badge-danger-border-color: var(--lex-action-danger-base);
+  --lex-breadcrumb-list-gap: var(--lex-space-control-gap-sm);
+  --lex-breadcrumb-item-gap: var(--lex-space-control-gap-sm);
+  --lex-breadcrumb-link-foreground: var(--lex-color-text-secondary);
+  --lex-breadcrumb-link-hover-foreground: var(--lex-color-text-primary);
+  --lex-breadcrumb-link-font-size: var(--lex-typography-body-sm-font-size);
+  --lex-breadcrumb-link-font-weight: var(--lex-typography-body-sm-font-weight);
+  --lex-breadcrumb-link-font-line-height: var(--lex-typography-body-sm-line-height);
+  --lex-breadcrumb-page-foreground: var(--lex-color-text-primary);
+  --lex-breadcrumb-page-font-size: var(--lex-typography-body-sm-font-size);
+  --lex-breadcrumb-page-font-weight: var(--lex-typography-label-sm-font-weight);
+  --lex-breadcrumb-page-font-line-height: var(--lex-typography-body-sm-line-height);
+  --lex-breadcrumb-separator-foreground: var(--lex-color-text-secondary);
+  --lex-breadcrumb-separator-size: var(--lex-size-control-sm);
+  --lex-breadcrumb-ellipsis-foreground: var(--lex-color-text-secondary);
+  --lex-breadcrumb-ellipsis-size: var(--lex-size-control-sm);
+  --lex-breadcrumb-transition-duration: var(--lex-duration-control);
+  --lex-breadcrumb-transition-easing: var(--lex-easing-control);
   --lex-button-radius: var(--lex-radius-control);
   --lex-button-focus-ring-color: var(--lex-border-focus);
   --lex-button-focus-ring-offset-color: var(--lex-color-background-base);
@@ -790,6 +847,82 @@
   --lex-checkbox-focus-ring-offset: var(--lex-outline-offset-focus);
   --lex-checkbox-transition-duration: var(--lex-duration-control);
   --lex-checkbox-transition-easing: var(--lex-easing-control);
+  --lex-checkbox-group-gap: var(--lex-space-control-gap-md);
+  --lex-checkbox-group-label-foreground: var(--lex-color-text-primary);
+  --lex-checkbox-group-label-font-size: var(--lex-typography-label-sm-font-size);
+  --lex-checkbox-group-label-font-weight: var(--lex-typography-label-sm-font-weight);
+  --lex-checkbox-group-label-font-line-height: var(--lex-typography-label-sm-line-height);
+  --lex-combobox-background: var(--lex-color-background-base);
+  --lex-combobox-foreground: var(--lex-color-text-primary);
+  --lex-combobox-border-color: var(--lex-border-default);
+  --lex-combobox-radius: var(--lex-radius-control);
+  --lex-combobox-height-sm: var(--lex-size-control-sm);
+  --lex-combobox-height-md: var(--lex-size-control-md);
+  --lex-combobox-height-lg: var(--lex-size-control-lg);
+  --lex-combobox-padding-x-sm: var(--lex-space-control-x-sm);
+  --lex-combobox-padding-x-md: var(--lex-space-control-x-md);
+  --lex-combobox-padding-x-lg: var(--lex-space-control-x-lg);
+  --lex-combobox-trigger-gap: var(--lex-space-control-gap-sm);
+  --lex-combobox-label-foreground: var(--lex-color-text-primary);
+  --lex-combobox-label-font-size: var(--lex-typography-label-sm-font-size);
+  --lex-combobox-label-font-weight: var(--lex-typography-label-sm-font-weight);
+  --lex-combobox-label-font-line-height: var(--lex-typography-label-sm-line-height);
+  --lex-combobox-font-family: var(--lex-typography-control-md-font-family);
+  --lex-combobox-font-size-sm: var(--lex-typography-control-sm-font-size);
+  --lex-combobox-font-size-md: var(--lex-typography-control-md-font-size);
+  --lex-combobox-font-size-lg: var(--lex-typography-control-lg-font-size);
+  --lex-combobox-font-weight: var(--lex-typography-control-md-font-weight);
+  --lex-combobox-font-line-height: var(--lex-typography-control-md-line-height);
+  --lex-combobox-font-letter-spacing: var(--lex-typography-control-md-letter-spacing);
+  --lex-combobox-popup-background: var(--lex-color-background-base);
+  --lex-combobox-popup-foreground: var(--lex-color-text-primary);
+  --lex-combobox-popup-border-color: var(--lex-border-default);
+  --lex-combobox-popup-max-height: var(--lex-size-overlay-list-max-height);
+  --lex-combobox-popup-shadow: var(--lex-elevation-shadow-floating-box-shadow);
+  --lex-combobox-list-gap: var(--lex-space-control-gap-sm);
+  --lex-combobox-list-padding: var(--lex-space-control-y-xs);
+  --lex-combobox-item-foreground: var(--lex-color-text-primary);
+  --lex-combobox-item-highlight-background: var(--lex-color-background-subtle);
+  --lex-combobox-item-highlight-foreground: var(--lex-color-text-primary);
+  --lex-combobox-item-selected-background: var(--lex-action-primary-base);
+  --lex-combobox-item-selected-foreground: var(--lex-color-text-inverse);
+  --lex-combobox-focus-border-color: var(--lex-border-focus);
+  --lex-combobox-focus-ring-color: var(--lex-border-focus);
+  --lex-combobox-focus-ring-offset-color: var(--lex-color-background-base);
+  --lex-combobox-focus-ring-width: var(--lex-outline-width-focus);
+  --lex-combobox-focus-ring-offset: var(--lex-outline-offset-focus);
+  --lex-combobox-invalid-border-color: var(--lex-action-danger-base);
+  --lex-combobox-invalid-ring-color: var(--lex-action-danger-base);
+  --lex-combobox-invalid-ring-width: var(--lex-outline-width-focus);
+  --lex-combobox-transition-duration: var(--lex-duration-control);
+  --lex-combobox-transition-easing: var(--lex-easing-control);
+  --lex-context-menu-radius: var(--lex-radius-surface);
+  --lex-context-menu-popup-background: var(--lex-color-background-base);
+  --lex-context-menu-popup-foreground: var(--lex-color-text-primary);
+  --lex-context-menu-popup-border-color: var(--lex-border-default);
+  --lex-context-menu-popup-shadow: var(--lex-elevation-shadow-floating-box-shadow);
+  --lex-context-menu-positioner-z-index: var(--lex-elevation-floating-z-index);
+  --lex-context-menu-positioner-side-offset: var(--lex-space-overlay-side-offset);
+  --lex-context-menu-list-gap: var(--lex-space-control-gap-sm);
+  --lex-context-menu-list-padding: var(--lex-space-control-y-xs);
+  --lex-context-menu-item-foreground: var(--lex-color-text-primary);
+  --lex-context-menu-item-radius: var(--lex-radius-control);
+  --lex-context-menu-item-padding-x: var(--lex-space-control-x-sm);
+  --lex-context-menu-item-padding-y: var(--lex-space-control-y-xs);
+  --lex-context-menu-item-highlight-background: var(--lex-color-background-subtle);
+  --lex-context-menu-item-highlight-foreground: var(--lex-color-text-primary);
+  --lex-context-menu-item-focus-ring-width: var(--lex-outline-width-focus);
+  --lex-context-menu-item-focus-ring-color: var(--lex-border-focus);
+  --lex-context-menu-item-focus-ring-offset: var(--lex-outline-offset-focus);
+  --lex-context-menu-item-focus-ring-offset-color: var(--lex-color-background-base);
+  --lex-context-menu-separator-background: var(--lex-border-default);
+  --lex-context-menu-separator-margin-y: var(--lex-space-control-y-xs);
+  --lex-context-menu-focus-ring-color: var(--lex-border-focus);
+  --lex-context-menu-focus-ring-offset-color: var(--lex-color-background-base);
+  --lex-context-menu-focus-ring-width: var(--lex-outline-width-focus);
+  --lex-context-menu-focus-ring-offset: var(--lex-outline-offset-focus);
+  --lex-context-menu-transition-duration: var(--lex-duration-control);
+  --lex-context-menu-transition-easing: var(--lex-easing-control);
   --lex-collapsible-background: var(--lex-color-background-surface);
   --lex-collapsible-foreground: var(--lex-color-text-primary);
   --lex-collapsible-border-color: var(--lex-border-default);
@@ -811,6 +944,44 @@
   --lex-collapsible-panel-font-line-height: var(--lex-typography-body-sm-line-height);
   --lex-collapsible-transition-duration: var(--lex-duration-surface);
   --lex-collapsible-transition-easing: var(--lex-easing-surface);
+  --lex-date-picker-calendar-background: var(--lex-color-background-base);
+  --lex-date-picker-calendar-foreground: var(--lex-color-text-primary);
+  --lex-date-picker-calendar-border-color: var(--lex-border-default);
+  --lex-date-picker-calendar-radius: var(--lex-radius-surface);
+  --lex-date-picker-calendar-padding: var(--lex-space-surface-md);
+  --lex-date-picker-calendar-gap: var(--lex-space-surface-gap-sm);
+  --lex-date-picker-calendar-width: var(--lex-size-panel-width-sm);
+  --lex-date-picker-header-foreground: var(--lex-color-text-primary);
+  --lex-date-picker-header-font-size: var(--lex-typography-heading-xs-font-size);
+  --lex-date-picker-header-font-weight: var(--lex-typography-heading-xs-font-weight);
+  --lex-date-picker-header-font-line-height: var(--lex-typography-heading-xs-line-height);
+  --lex-date-picker-weekday-foreground: var(--lex-color-text-secondary);
+  --lex-date-picker-weekday-font-size: var(--lex-typography-label-xs-font-size);
+  --lex-date-picker-weekday-font-weight: var(--lex-typography-label-xs-font-weight);
+  --lex-date-picker-weekday-font-line-height: 1;
+  --lex-date-picker-day-size: var(--lex-size-control-md);
+  --lex-date-picker-day-radius: var(--lex-radius-selection);
+  --lex-date-picker-day-background: transparent;
+  --lex-date-picker-day-foreground: var(--lex-color-text-primary);
+  --lex-date-picker-day-hover-background: var(--lex-color-background-subtle);
+  --lex-date-picker-day-selected-background: var(--lex-action-primary-base);
+  --lex-date-picker-day-selected-foreground: var(--lex-color-text-inverse);
+  --lex-date-picker-day-outside-foreground: var(--lex-color-text-secondary);
+  --lex-date-picker-day-today-border-color: var(--lex-border-focus);
+  --lex-date-picker-day-font-size: var(--lex-typography-control-sm-font-size);
+  --lex-date-picker-day-font-weight: var(--lex-typography-control-sm-font-weight);
+  --lex-date-picker-day-font-line-height: 1;
+  --lex-date-picker-nav-size: var(--lex-size-control-sm);
+  --lex-date-picker-nav-foreground: var(--lex-color-text-secondary);
+  --lex-date-picker-nav-hover-background: var(--lex-color-background-subtle);
+  --lex-date-picker-nav-hover-foreground: var(--lex-color-text-primary);
+  --lex-date-picker-nav-radius: var(--lex-radius-control);
+  --lex-date-picker-focus-ring-color: var(--lex-border-focus);
+  --lex-date-picker-focus-ring-offset-color: var(--lex-color-background-base);
+  --lex-date-picker-focus-ring-width: var(--lex-outline-width-focus);
+  --lex-date-picker-focus-ring-offset: var(--lex-outline-offset-focus);
+  --lex-date-picker-transition-duration: var(--lex-duration-control);
+  --lex-date-picker-transition-easing: var(--lex-easing-control);
   --lex-dialog-backdrop-background: var(--lex-color-text-primary);
   --lex-dialog-backdrop-opacity: 0.48;
   --lex-dialog-backdrop-z-index: var(--lex-elevation-backdrop-z-index);
@@ -1076,6 +1247,27 @@
   --lex-menu-focus-ring-offset: var(--lex-outline-offset-focus);
   --lex-menu-transition-duration: var(--lex-duration-control);
   --lex-menu-transition-easing: var(--lex-easing-control);
+  --lex-menubar-radius: var(--lex-radius-surface);
+  --lex-menubar-trigger-background: var(--lex-color-background-surface);
+  --lex-menubar-trigger-foreground: var(--lex-color-text-primary);
+  --lex-menubar-trigger-border-color: var(--lex-border-default);
+  --lex-menubar-list-gap: var(--lex-space-control-gap-sm);
+  --lex-menubar-list-padding: var(--lex-space-control-y-xs);
+  --lex-menubar-item-foreground: var(--lex-color-text-primary);
+  --lex-menubar-item-highlight-background: var(--lex-color-background-subtle);
+  --lex-menubar-item-highlight-foreground: var(--lex-color-text-primary);
+  --lex-menubar-item-open-background: var(--lex-color-background-subtle);
+  --lex-menubar-item-open-border-color: var(--lex-border-focus);
+  --lex-menubar-popup-background: var(--lex-color-background-base);
+  --lex-menubar-popup-foreground: var(--lex-color-text-primary);
+  --lex-menubar-popup-border-color: var(--lex-border-default);
+  --lex-menubar-popup-shadow: var(--lex-elevation-shadow-floating-box-shadow);
+  --lex-menubar-focus-ring-color: var(--lex-border-focus);
+  --lex-menubar-focus-ring-offset-color: var(--lex-color-background-base);
+  --lex-menubar-focus-ring-width: var(--lex-outline-width-focus);
+  --lex-menubar-focus-ring-offset: var(--lex-outline-offset-focus);
+  --lex-menubar-transition-duration: var(--lex-duration-control);
+  --lex-menubar-transition-easing: var(--lex-easing-control);
   --lex-meter-gap: var(--lex-space-control-gap-sm);
   --lex-meter-header-gap: var(--lex-space-control-gap-sm);
   --lex-meter-label-foreground: var(--lex-color-text-secondary);
@@ -1093,6 +1285,29 @@
   --lex-meter-indicator-background-complete: var(--lex-action-primary-base);
   --lex-meter-transition-duration: var(--lex-duration-surface);
   --lex-meter-transition-easing: var(--lex-easing-surface);
+  --lex-navigation-menu-radius: var(--lex-radius-surface);
+  --lex-navigation-menu-trigger-background: var(--lex-color-background-surface);
+  --lex-navigation-menu-trigger-foreground: var(--lex-color-text-primary);
+  --lex-navigation-menu-trigger-border-color: var(--lex-border-default);
+  --lex-navigation-menu-trigger-hover-background: var(--lex-color-background-subtle);
+  --lex-navigation-menu-list-gap: var(--lex-space-control-gap-sm);
+  --lex-navigation-menu-list-padding: var(--lex-space-control-y-xs);
+  --lex-navigation-menu-item-foreground: var(--lex-color-text-primary);
+  --lex-navigation-menu-item-highlight-background: var(--lex-color-background-subtle);
+  --lex-navigation-menu-item-highlight-foreground: var(--lex-color-text-primary);
+  --lex-navigation-menu-item-active-background: var(--lex-action-primary-base);
+  --lex-navigation-menu-item-active-foreground: var(--lex-color-text-inverse);
+  --lex-navigation-menu-popup-background: var(--lex-color-background-base);
+  --lex-navigation-menu-popup-foreground: var(--lex-color-text-primary);
+  --lex-navigation-menu-popup-border-color: var(--lex-border-default);
+  --lex-navigation-menu-popup-shadow: var(--lex-elevation-shadow-floating-box-shadow);
+  --lex-navigation-menu-viewport-max-height: var(--lex-size-overlay-list-max-height);
+  --lex-navigation-menu-focus-ring-color: var(--lex-border-focus);
+  --lex-navigation-menu-focus-ring-offset-color: var(--lex-color-background-base);
+  --lex-navigation-menu-focus-ring-width: var(--lex-outline-width-focus);
+  --lex-navigation-menu-focus-ring-offset: var(--lex-outline-offset-focus);
+  --lex-navigation-menu-transition-duration: var(--lex-duration-control);
+  --lex-navigation-menu-transition-easing: var(--lex-easing-control);
   --lex-number-field-gap: var(--lex-space-control-gap-sm);
   --lex-number-field-foreground: var(--lex-color-text-primary);
   --lex-number-field-background: var(--lex-color-background-base);
@@ -1136,6 +1351,75 @@
   --lex-number-field-scrub-cursor-size: var(--lex-size-selection-indicator-md);
   --lex-number-field-transition-duration: var(--lex-duration-control);
   --lex-number-field-transition-easing: var(--lex-easing-control);
+  --lex-otp-field-gap: var(--lex-space-control-gap-sm);
+  --lex-otp-field-slot-background: var(--lex-color-background-base);
+  --lex-otp-field-slot-foreground: var(--lex-color-text-primary);
+  --lex-otp-field-slot-border-color: var(--lex-border-default);
+  --lex-otp-field-slot-radius: var(--lex-radius-control);
+  --lex-otp-field-slot-height-sm: var(--lex-size-control-sm);
+  --lex-otp-field-slot-height-md: var(--lex-size-control-md);
+  --lex-otp-field-slot-height-lg: var(--lex-size-control-lg);
+  --lex-otp-field-slot-font-family: var(--lex-typography-control-md-font-family);
+  --lex-otp-field-slot-font-size-sm: var(--lex-typography-control-sm-font-size);
+  --lex-otp-field-slot-font-size-md: var(--lex-typography-control-md-font-size);
+  --lex-otp-field-slot-font-size-lg: var(--lex-typography-control-lg-font-size);
+  --lex-otp-field-slot-font-weight: var(--lex-typography-control-md-font-weight);
+  --lex-otp-field-slot-font-line-height: var(--lex-typography-control-md-line-height);
+  --lex-otp-field-slot-font-letter-spacing: var(--lex-typography-control-md-letter-spacing);
+  --lex-otp-field-slot-focus-border-color: var(--lex-border-focus);
+  --lex-otp-field-slot-focus-ring-color: var(--lex-border-focus);
+  --lex-otp-field-slot-focus-ring-offset-color: var(--lex-color-background-base);
+  --lex-otp-field-slot-focus-ring-width: var(--lex-outline-width-focus);
+  --lex-otp-field-slot-focus-ring-offset: var(--lex-outline-offset-focus);
+  --lex-otp-field-slot-filled-border-color: var(--lex-border-focus);
+  --lex-otp-field-separator-foreground: var(--lex-color-text-secondary);
+  --lex-otp-field-separator-font-size: var(--lex-typography-control-md-font-size);
+  --lex-otp-field-separator-font-weight: var(--lex-typography-control-md-font-weight);
+  --lex-otp-field-transition-duration: var(--lex-duration-control);
+  --lex-otp-field-transition-easing: var(--lex-easing-control);
+  --lex-preview-card-backdrop-background: var(--lex-color-text-primary);
+  --lex-preview-card-backdrop-opacity: 0.24;
+  --lex-preview-card-backdrop-z-index: var(--lex-elevation-backdrop-z-index);
+  --lex-preview-card-positioner-z-index: var(--lex-elevation-floating-z-index);
+  --lex-preview-card-positioner-side-offset: var(--lex-space-overlay-side-offset);
+  --lex-preview-card-popup-background: var(--lex-color-background-base);
+  --lex-preview-card-popup-foreground: var(--lex-color-text-primary);
+  --lex-preview-card-popup-border-color: var(--lex-border-default);
+  --lex-preview-card-popup-radius: var(--lex-radius-surface);
+  --lex-preview-card-popup-max-width: var(--lex-size-panel-width-sm);
+  --lex-preview-card-popup-padding: var(--lex-space-surface-md);
+  --lex-preview-card-popup-shadow: var(--lex-elevation-shadow-floating-box-shadow);
+  --lex-preview-card-arrow-size: var(--lex-size-selection-control-sm);
+  --lex-preview-card-trigger-focus-ring-color: var(--lex-border-focus);
+  --lex-preview-card-trigger-focus-ring-offset-color: var(--lex-color-background-base);
+  --lex-preview-card-trigger-focus-ring-width: var(--lex-outline-width-focus);
+  --lex-preview-card-trigger-focus-ring-offset: var(--lex-outline-offset-focus);
+  --lex-preview-card-transition-duration: var(--lex-duration-control);
+  --lex-preview-card-transition-easing: var(--lex-easing-control);
+  --lex-pagination-gap: var(--lex-space-control-gap-sm);
+  --lex-pagination-link-background: var(--lex-color-background-base);
+  --lex-pagination-link-foreground: var(--lex-color-text-primary);
+  --lex-pagination-link-border-color: var(--lex-border-default);
+  --lex-pagination-link-hover-background: var(--lex-color-background-subtle);
+  --lex-pagination-link-active-background: var(--lex-action-primary-base);
+  --lex-pagination-link-active-foreground: var(--lex-color-text-inverse);
+  --lex-pagination-link-radius: var(--lex-radius-control);
+  --lex-pagination-link-height-sm: var(--lex-size-control-sm);
+  --lex-pagination-link-height-md: var(--lex-size-control-md);
+  --lex-pagination-link-padding-x-sm: var(--lex-space-control-x-sm);
+  --lex-pagination-link-padding-x-md: var(--lex-space-control-x-md);
+  --lex-pagination-link-font-size-sm: var(--lex-typography-control-sm-font-size);
+  --lex-pagination-link-font-size-md: var(--lex-typography-control-md-font-size);
+  --lex-pagination-link-font-weight: var(--lex-typography-control-md-font-weight);
+  --lex-pagination-link-font-line-height: var(--lex-typography-control-md-line-height);
+  --lex-pagination-ellipsis-foreground: var(--lex-color-text-secondary);
+  --lex-pagination-ellipsis-size: var(--lex-size-control-sm);
+  --lex-pagination-focus-ring-color: var(--lex-border-focus);
+  --lex-pagination-focus-ring-offset-color: var(--lex-color-background-base);
+  --lex-pagination-focus-ring-width: var(--lex-outline-width-focus);
+  --lex-pagination-focus-ring-offset: var(--lex-outline-offset-focus);
+  --lex-pagination-transition-duration: var(--lex-duration-control);
+  --lex-pagination-transition-easing: var(--lex-easing-control);
   --lex-popover-backdrop-background: var(--lex-color-text-primary);
   --lex-popover-backdrop-opacity: 0.24;
   --lex-popover-backdrop-z-index: var(--lex-elevation-backdrop-z-index);
@@ -1488,6 +1772,55 @@
   --lex-toggle-group-gap-sm: var(--lex-space-control-gap-sm);
   --lex-toggle-group-gap-md: var(--lex-space-control-gap-sm);
   --lex-toggle-group-gap-lg: var(--lex-space-control-gap-md);
+  --lex-toolbar-radius: var(--lex-radius-control);
+  --lex-toolbar-root-gap: var(--lex-space-control-gap-sm);
+  --lex-toolbar-root-background: var(--lex-color-background-subtle);
+  --lex-toolbar-root-foreground: var(--lex-color-text-primary);
+  --lex-toolbar-root-border-color: var(--lex-border-default);
+  --lex-toolbar-root-padding: var(--lex-space-control-x-sm);
+  --lex-toolbar-group-gap: var(--lex-space-control-gap-sm);
+  --lex-toolbar-button-height: var(--lex-size-control-sm);
+  --lex-toolbar-button-radius: var(--lex-radius-control);
+  --lex-toolbar-button-padding-x: var(--lex-space-control-x-sm);
+  --lex-toolbar-button-foreground: var(--lex-color-text-primary);
+  --lex-toolbar-button-hover-background: var(--lex-color-background-surface);
+  --lex-toolbar-button-font-size: var(--lex-typography-control-sm-font-size);
+  --lex-toolbar-button-font-weight: var(--lex-typography-control-md-font-weight);
+  --lex-toolbar-button-font-line-height: var(--lex-typography-control-sm-line-height);
+  --lex-toolbar-button-focus-ring-color: var(--lex-border-focus);
+  --lex-toolbar-button-focus-ring-offset-color: var(--lex-color-background-base);
+  --lex-toolbar-button-focus-ring-width: var(--lex-outline-width-focus);
+  --lex-toolbar-button-focus-ring-offset: var(--lex-outline-offset-focus);
+  --lex-toolbar-link-height: var(--lex-size-control-sm);
+  --lex-toolbar-link-radius: var(--lex-radius-control);
+  --lex-toolbar-link-padding-x: var(--lex-space-control-x-sm);
+  --lex-toolbar-link-foreground: var(--lex-color-text-primary);
+  --lex-toolbar-link-hover-background: var(--lex-color-background-surface);
+  --lex-toolbar-link-font-size: var(--lex-typography-control-sm-font-size);
+  --lex-toolbar-link-font-weight: var(--lex-typography-control-md-font-weight);
+  --lex-toolbar-link-font-line-height: var(--lex-typography-control-sm-line-height);
+  --lex-toolbar-link-focus-ring-color: var(--lex-border-focus);
+  --lex-toolbar-link-focus-ring-offset-color: var(--lex-color-background-base);
+  --lex-toolbar-link-focus-ring-width: var(--lex-outline-width-focus);
+  --lex-toolbar-link-focus-ring-offset: var(--lex-outline-offset-focus);
+  --lex-toolbar-input-height: var(--lex-size-control-sm);
+  --lex-toolbar-input-radius: var(--lex-radius-control);
+  --lex-toolbar-input-padding-x: var(--lex-space-control-x-sm);
+  --lex-toolbar-input-background: var(--lex-color-background-base);
+  --lex-toolbar-input-foreground: var(--lex-color-text-primary);
+  --lex-toolbar-input-placeholder-color: var(--lex-color-text-secondary);
+  --lex-toolbar-input-border-color: var(--lex-border-default);
+  --lex-toolbar-input-font-family: var(--lex-typography-control-md-font-family);
+  --lex-toolbar-input-font-size: var(--lex-typography-control-sm-font-size);
+  --lex-toolbar-input-font-weight: var(--lex-typography-control-md-font-weight);
+  --lex-toolbar-input-font-line-height: var(--lex-typography-control-sm-line-height);
+  --lex-toolbar-input-focus-border-color: var(--lex-border-focus);
+  --lex-toolbar-input-focus-ring-color: var(--lex-border-focus);
+  --lex-toolbar-input-focus-ring-offset-color: var(--lex-color-background-base);
+  --lex-toolbar-input-focus-ring-width: var(--lex-outline-width-focus);
+  --lex-toolbar-input-focus-ring-offset: var(--lex-outline-offset-focus);
+  --lex-toolbar-transition-duration: var(--lex-duration-control);
+  --lex-toolbar-transition-easing: var(--lex-easing-control);
   --lex-tooltip-positioner-z-index: var(--lex-elevation-tooltip-z-index);
   --lex-tooltip-positioner-side-offset: var(--lex-space-overlay-side-offset);
   --lex-tooltip-background: var(--lex-color-text-primary);

package/templates/templates/SettingsPageLayout/SettingsPageLayout.tsx

@@ -0,0 +1,198 @@
+/**
+ * SettingsPageLayout.tsx
+ *
+ * Reference SettingsPageLayout template — settings page shell with header and panels.
+ */
+
+import { PageHeader } from "@/components/blocks/PageHeader"
+import {
+  SettingsPanel,
+  SettingsPanelContent,
+  SettingsPanelDescription,
+  SettingsPanelFooter,
+  SettingsPanelHeader,
+  SettingsPanelTitle,
+} from "@/components/blocks/SettingsPanel"
+import type {
+  SettingsPageLayoutBodyProps,
+  SettingsPageLayoutHeaderProps,
+  SettingsPageLayoutMainProps,
+  SettingsPageLayoutNavProps,
+  SettingsPageLayoutPanelContentProps,
+  SettingsPageLayoutPanelDescriptionProps,
+  SettingsPageLayoutPanelFooterProps,
+  SettingsPageLayoutPanelHeaderProps,
+  SettingsPageLayoutPanelProps,
+  SettingsPageLayoutPanelTitleProps,
+  SettingsPageLayoutProps,
+} from "./SettingsPageLayout.types"
+import {
+  settingsPageLayoutBodyClasses,
+  settingsPageLayoutClasses,
+  settingsPageLayoutHeaderClasses,
+  settingsPageLayoutMainClasses,
+  settingsPageLayoutNavClasses,
+  settingsPageLayoutPanelClasses,
+} from "./SettingsPageLayout.variants"
+import { cn } from "@/lib/utils"
+
+const SettingsPageLayout = ({
+  ref,
+  className,
+  ...props
+}: SettingsPageLayoutProps) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(settingsPageLayoutClasses(), className)}
+      {...props}
+    />
+  )
+}
+
+SettingsPageLayout.displayName = "SettingsPageLayout"
+
+const SettingsPageLayoutHeader = ({
+  ref,
+  className,
+  ...props
+}: SettingsPageLayoutHeaderProps) => {
+  return (
+    <PageHeader
+      ref={ref}
+      className={cn(settingsPageLayoutHeaderClasses(), className)}
+      {...props}
+    />
+  )
+}
+
+SettingsPageLayoutHeader.displayName = "SettingsPageLayoutHeader"
+
+const SettingsPageLayoutBody = ({
+  ref,
+  className,
+  ...props
+}: SettingsPageLayoutBodyProps) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(settingsPageLayoutBodyClasses(), className)}
+      {...props}
+    />
+  )
+}
+
+SettingsPageLayoutBody.displayName = "SettingsPageLayoutBody"
+
+const SettingsPageLayoutNav = ({
+  ref,
+  className,
+  ...props
+}: SettingsPageLayoutNavProps) => {
+  return (
+    <aside
+      ref={ref}
+      className={cn(settingsPageLayoutNavClasses(), className)}
+      {...props}
+    />
+  )
+}
+
+SettingsPageLayoutNav.displayName = "SettingsPageLayoutNav"
+
+const SettingsPageLayoutMain = ({
+  ref,
+  className,
+  ...props
+}: SettingsPageLayoutMainProps) => {
+  return (
+    <main
+      ref={ref}
+      className={cn(settingsPageLayoutMainClasses(), className)}
+      {...props}
+    />
+  )
+}
+
+SettingsPageLayoutMain.displayName = "SettingsPageLayoutMain"
+
+const SettingsPageLayoutPanel = ({
+  ref,
+  className,
+  ...props
+}: SettingsPageLayoutPanelProps) => {
+  return (
+    <SettingsPanel
+      ref={ref}
+      className={cn(settingsPageLayoutPanelClasses(), className)}
+      {...props}
+    />
+  )
+}
+
+SettingsPageLayoutPanel.displayName = "SettingsPageLayoutPanel"
+
+const SettingsPageLayoutPanelHeader = ({
+  ref,
+  className,
+  ...props
+}: SettingsPageLayoutPanelHeaderProps) => {
+  return <SettingsPanelHeader ref={ref} className={className} {...props} />
+}
+
+SettingsPageLayoutPanelHeader.displayName = "SettingsPageLayoutPanelHeader"
+
+const SettingsPageLayoutPanelTitle = ({
+  ref,
+  className,
+  ...props
+}: SettingsPageLayoutPanelTitleProps) => {
+  return <SettingsPanelTitle ref={ref} className={className} {...props} />
+}
+
+SettingsPageLayoutPanelTitle.displayName = "SettingsPageLayoutPanelTitle"
+
+const SettingsPageLayoutPanelDescription = ({
+  ref,
+  className,
+  ...props
+}: SettingsPageLayoutPanelDescriptionProps) => {
+  return <SettingsPanelDescription ref={ref} className={className} {...props} />
+}
+
+SettingsPageLayoutPanelDescription.displayName =
+  "SettingsPageLayoutPanelDescription"
+
+const SettingsPageLayoutPanelContent = ({
+  ref,
+  className,
+  ...props
+}: SettingsPageLayoutPanelContentProps) => {
+  return <SettingsPanelContent ref={ref} className={className} {...props} />
+}
+
+SettingsPageLayoutPanelContent.displayName = "SettingsPageLayoutPanelContent"
+
+const SettingsPageLayoutPanelFooter = ({
+  ref,
+  className,
+  ...props
+}: SettingsPageLayoutPanelFooterProps) => {
+  return <SettingsPanelFooter ref={ref} className={className} {...props} />
+}
+
+SettingsPageLayoutPanelFooter.displayName = "SettingsPageLayoutPanelFooter"
+
+export {
+  SettingsPageLayout,
+  SettingsPageLayoutHeader,
+  SettingsPageLayoutBody,
+  SettingsPageLayoutNav,
+  SettingsPageLayoutMain,
+  SettingsPageLayoutPanel,
+  SettingsPageLayoutPanelHeader,
+  SettingsPageLayoutPanelTitle,
+  SettingsPageLayoutPanelDescription,
+  SettingsPageLayoutPanelContent,
+  SettingsPageLayoutPanelFooter,
+}

package/templates/templates/SettingsPageLayout/SettingsPageLayout.types.ts

@@ -0,0 +1,55 @@
+/**
+ * SettingsPageLayout.types.ts
+ *
+ * Public types for the SettingsPageLayout template.
+ */
+
+import type { HTMLAttributes, ReactNode, Ref } from "react"
+import type { PageHeaderProps } from "@/components/blocks/PageHeader"
+import type {
+  SettingsPanelContentProps,
+  SettingsPanelDescriptionProps,
+  SettingsPanelFooterProps,
+  SettingsPanelHeaderProps,
+  SettingsPanelProps,
+  SettingsPanelTitleProps,
+} from "@/components/blocks/SettingsPanel"
+
+export interface SettingsPageLayoutProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>
+  className?: string
+  children?: ReactNode
+}
+
+export type SettingsPageLayoutHeaderProps = PageHeaderProps
+
+export interface SettingsPageLayoutBodyProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>
+  className?: string
+  children?: ReactNode
+}
+
+export interface SettingsPageLayoutNavProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>
+  className?: string
+  children?: ReactNode
+}
+
+export interface SettingsPageLayoutMainProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>
+  className?: string
+  children?: ReactNode
+}
+
+export type SettingsPageLayoutPanelProps = SettingsPanelProps
+
+export type SettingsPageLayoutPanelHeaderProps = SettingsPanelHeaderProps
+
+export type SettingsPageLayoutPanelTitleProps = SettingsPanelTitleProps
+
+export type SettingsPageLayoutPanelDescriptionProps =
+  SettingsPanelDescriptionProps
+
+export type SettingsPageLayoutPanelContentProps = SettingsPanelContentProps
+
+export type SettingsPageLayoutPanelFooterProps = SettingsPanelFooterProps