@techsio/ui-kit 0.3.2 → 0.4.1

package/src/tokens/components/molecules/_carousel.css

@@ -64,9 +64,17 @@
 }
 
 @utility token-icon-carousel-prev {
-  @apply icon-[mdi--chevron-left];
+  @apply token-icon-chevron-left;
 }
 
 @utility token-icon-carousel-next {
-  @apply icon-[mdi--chevron-right];
+  @apply token-icon-chevron-right;
 }
+
+@utility token-icon-carousel-play {
+  @apply token-icon-play;
+}
+
+@utility token-icon-carousel-pause {
+  @apply token-icon-pause;
+}

package/src/tokens/components/molecules/_color-select.css

@@ -12,7 +12,7 @@
 
 @theme static {
   /* === DERIVED COLORS === */
-  --color-color-select-accent: var(--color-primary);
+  --color-color-select-accent: var(--color-fg-primary);
   --color-color-select-border: var(--color-highlight);
   --color-color-select-border-hover: var(--color-color-select-accent);
   --color-color-select-selected: var(--color-color-select-accent);
@@ -25,7 +25,7 @@
   --spacing-color-select-group-sm: var(--spacing-100);
   --spacing-color-select-group-md: var(--spacing-200);
   --spacing-color-select-group-lg: var(--spacing-300);
-
+  
   --spacing-color-select-sm: var(--spacing-250);
   --spacing-color-select-md: var(--spacing-350);
   --spacing-color-select-lg: var(--spacing-450);
@@ -49,7 +49,7 @@
 }
 
 @utility token-icon-color-select {
-  @apply icon-[mdi--check-bold];
+  @apply token-icon-check-bold;
 }
 
 @utility select-disabled {

package/src/tokens/components/molecules/_combobox.css

@@ -1,21 +1,16 @@
 @theme static {
   /* === BASE COLOR MAPPING === */
   /* Reference layer - single source of truth for theming */
-  --color-combobox: var(--color-surface);
+  --color-combobox: var(--color-form-control-bg);
+  --color-combobox-accent: var(--color-primary);
   --color-combobox-success-fg: var(--color-success);
   --color-combobox-warning-fg: var(--color-warning);
   --color-combobox-danger-fg: var(--color-danger);
 
   /* === DERIVED COLORS === */
-  /* Background colors - using reference layer */
-  --color-combobox-bg: var(--color-combobox);
-
   /* Foreground colors */
   --color-combobox-fg: var(--color-fg-primary);
-  --color-combobox-placeholder: --alpha(
-    var(--color-combobox-fg) /
-    var(--opacity-placeholder)
-  );
+  --color-combobox-placeholder: var(--color-form-control-placeholder);
 
   /* Border colors */
   --color-combobox-border: var(--color-border-primary);
@@ -40,16 +35,14 @@
 
   /* Trigger button states */
   --color-combobox-trigger: var(--color-combobox-fg);
-  --color-combobox-trigger-hover: oklch(
-    from var(--color-combobox) min(l - 0.4, 1) c h
-  );
+  --color-combobox-trigger-hover: var(--color-combobox-accent);
   --color-combobox-trigger-bg: transparent;
   --color-combobox-trigger-bg-hover: var(--color-combobox-trigger-bg);
   --color-combobox-trigger-bg-active: var(--color-combobox-trigger-bg);
 
   /* === COMPONENT VARIANTS === */
   /* Dropdown content */
-  --color-combobox-content-bg: var(--color-combobox);
+  --color-combobox-content-bg: var(--color-surface);
 
   /* Dropdown items */
   --color-combobox-item-fg: var(--color-combobox-fg);
@@ -71,12 +64,8 @@
   --spacing-combobox-root-md: var(--spacing-150);
   --spacing-combobox-root-lg: var(--spacing-200);
 
-  --padding-combobox-input-sm: var(--spacing-50);
-  --padding-combobox-input-md: var(--spacing-100);
-  --padding-combobox-input-lg: var(--spacing-150);
-
-  --padding-combobox-item-sm: var(--spacing-50) var(--spacing-150);
-  --padding-combobox-item-md: var(--spacing-50) var(--spacing-200);
+  --padding-combobox-item-sm: var(--spacing-150) var(--spacing-250);
+  --padding-combobox-item-md: var(--spacing-150) var(--spacing-250);
   --padding-combobox-item-lg: var(--spacing-50) var(--spacing-250);
 
   --padding-combobox-trigger: 0 var(--spacing-100);
@@ -86,13 +75,18 @@
   /* === TYPOGRAPHY === */
   /* Font sizes and weights */
   --text-combobox-trigger-size: var(--text-lg);
+  --text-combobox-item-sm: var(--text-sm);
+  --text-combobox-item-md: var(--text-md);
+  --text-combobox-item-lg: var(--text-lg);
   --text-combobox-content-sm: var(--text-sm);
   --text-combobox-content-md: var(--text-md);
   --text-combobox-content-lg: var(--text-lg);
 
   /* === BORDERS & RADIUS === */
   /* Border widths and radius values */
-  --radius-combobox: var(--radius-sm);
+  --radius-combobox: var(--radius-form-control);
+  --radius-combobox-sm: var(--radius-form-control-sm);
+  --radius-combobox-md: var(--radius-form-control-md);
   --border-width-combobox: var(--border-width-input);
 
   /* === SHADOWS === */
@@ -108,9 +102,9 @@
 
 /* Semantic tokens for combobox icons */
 @utility token-icon-combobox-chevron {
-  @apply icon-[mdi--chevron-down];
+  @apply token-icon-chevron-down;
 }
 
 @utility token-icon-combobox-clear {
-  @apply icon-[mdi--close];
+  @apply token-icon-close;
 }

package/src/tokens/components/molecules/_dialog.css

@@ -6,7 +6,6 @@
   /* === BASE COLOR MAPPING === */
   /* Reference layer - single source of truth for theming */
   --color-dialog: var(--color-surface);
-  --color-dialog-accent: var(--color-primary);
 
   /* === DERIVED COLORS === */
   /* Background colors - using reference layer */

package/src/tokens/components/molecules/_menu.css

@@ -28,7 +28,6 @@
   /* ===== MENU SUBMENU INDICATOR ===== */
   --color-menu-submenu-indicator-fg: var(--color-fg-secondary);
   --spacing-menu-submenu-indicator: var(--spacing-250);
-  --spacing-menu-submenu-offset: var(--spacing-200);
 
   /* ===== MENU DISABLED STATE ===== */
   --color-menu-fg-disabled: var(--color-fg-disabled);

package/src/tokens/components/molecules/_pagination.css

@@ -57,13 +57,13 @@
 }
 
 @utility token-icon-pagination-prev {
-  @apply icon-[mdi--chevron-left];
+  @apply token-icon-chevron-left;
 }
 
 @utility token-icon-pagination-next {
-  @apply icon-[mdi--chevron-right];
+  @apply token-icon-chevron-right;
 }
 
 @utility token-icon-pagination-ellipsis {
-  @apply icon-[mdi--ellipsis-horizontal];
+  @apply token-icon-ellipsis-horizontal;
 }

package/src/tokens/components/molecules/_phone-input.css

@@ -0,0 +1,63 @@
+@theme static {
+  --gap-phone-input-root: var(--spacing-form-field-gap);
+
+  --color-phone-input: var(--color-form-control-bg);
+  --color-phone-input-fg: var(--color-fg-primary);
+  --color-phone-input-bg-hover: oklch(
+    from var(--color-phone-input) calc(l + var(--state-hover)) c h
+  );
+  --color-phone-input-bg-focus: oklch(
+    from var(--color-phone-input) calc(l + var(--state-active)) c h
+  );
+  --color-phone-input-border-hover: var(--color-form-control-border-hover);
+  --color-phone-input-border-focus: var(--color-form-control-border-focus);
+  --color-phone-input-ring: var(--color-form-control-ring);
+  --color-phone-input-input-bg-base: transparent;
+  --color-phone-input-input-bg-hover: transparent;
+  --color-phone-input-input-bg-focus: transparent;
+
+  --color-phone-input-border-danger: var(--color-danger);
+  --color-phone-input-border-success: var(--color-success);
+  --color-phone-input-border-warning: var(--color-warning);
+
+  --color-phone-input-placeholder: var(--color-form-control-placeholder);
+  --color-phone-input-bg-disabled: var(--color-form-control-bg-disabled);
+  --color-phone-input-fg-disabled: var(--color-form-control-fg-disabled);
+  --color-phone-input-border-disabled: var(
+    --color-form-control-border-disabled
+  );
+
+  --color-phone-input-divider: var(--color-border-primary);
+  --color-phone-input-country-calling-code: var(--color-fg-secondary);
+  --color-phone-input-item-meta: var(--color-phone-input-country-calling-code);
+
+  --padding-phone-input-country-flag: 0;
+  --spacing-phone-input-country-value: var(--spacing-100);
+  --spacing-phone-input-item: var(--spacing-150);
+  --spacing-phone-input-country-flag: 0;
+
+  --text-phone-input-sm: var(--text-sm);
+  --text-phone-input-md: var(--text-md);
+  --text-phone-input-lg: var(--text-lg);
+  --text-phone-input-country-flag: var(--text-xs);
+
+  --radius-phone-input-sm: var(--radius-form-control-sm);
+  --radius-phone-input-md: var(--radius-form-control-md);
+  --radius-phone-input-lg: var(--radius-form-control-lg);
+  --radius-phone-input-country-flag: var(--radius-button-sm);
+  --color-phone-input-trigger-bg-base: transparent;
+  --color-phone-input-trigger-bg-hover: var(--color-fill-hover);
+  --border-phone-input-trigger: 0;
+  --width-phone-input-trigger: 12ch;
+}
+
+@utility phone-input-focus {
+  &:has(:focus-within) {
+    border-color: var(--color-phone-input-border-focus);
+    background: var(--color-phone-input-bg-focus);
+    outline-style: var(--default-ring-style);
+    outline-width: var(--default-ring-width);
+    outline-color: var(--color-phone-input-ring);
+    outline-offset: var(--default-ring-offset);
+  }
+}

package/src/tokens/components/molecules/_popover.css

@@ -15,6 +15,9 @@
   /* Border colors */
   --color-popover-border: var(--color-highlight);
 
+  /* Close trigger colors */
+  --color-popover-close-trigger-fg: var(--color-popover-fg);
+
   /* === SPACING === */
   --spacing-popover-sm: var(--spacing-200);
   --spacing-popover-md: var(--spacing-250);

package/src/tokens/components/molecules/_product-card.css

@@ -1,5 +1,9 @@
 @theme static {
-  --product-card-layout-row-grid: auto 1fr;
+  --product-card-layout-row-grid: minmax(
+      var(--width-product-card-image-min),
+      var(--width-product-card-image-max)
+    )
+    minmax(0, 1fr);
   --product-card-layout-column-grid: 1fr;
   /* === BASE COLORS === */
   --color-product-card-bg: var(--color-surface);
@@ -45,6 +49,10 @@
   --spacing-product-card-max: 100%;
   --spacing-product-card-buttons: var(--spacing-150);
 
+  /* === SIZING === */
+  --width-product-card-image-min: 8rem;
+  --width-product-card-image-max: 12rem;
+
   /* === TYPOGRAPHY === */
   --text-product-card-name-size: var(--text-md);
   --text-product-card-stock-size: var(--text-sm);

package/src/tokens/components/molecules/_radio-card.css

@@ -0,0 +1,197 @@
+@theme static {
+  /* === BASE COLOR MAPPING === */
+  --color-radio-card-accent: var(--color-primary);
+  --color-radio-card-accent-hover: var(--color-primary-hover);
+  --color-radio-card-accent-light: var(--color-primary-light);
+  --color-radio-card-accent-light-hover: var(--color-primary-light-hover);
+  --color-radio-card-accent-contrast: var(--color-fg-light);
+  --color-radio-card-danger: var(--color-danger);
+  --color-radio-card-fg: var(--color-fg-primary);
+  --color-radio-card-fg-secondary: var(--color-fg-secondary);
+  --color-radio-card-fg-disabled: var(--color-fg-disabled);
+  --color-radio-card-surface: var(--color-surface);
+  --color-radio-card-border: var(--color-border-primary);
+
+  /* === DERIVED COLORS === */
+  --color-radio-card-item-bg: var(--color-radio-card-surface);
+  --color-radio-card-item-border: var(--color-radio-card-border);
+  --color-radio-card-item-fg: var(--color-radio-card-fg);
+  --color-radio-card-item-description-fg: var(--color-radio-card-fg-secondary);
+  --color-radio-card-item-addon-border: var(--color-radio-card-border);
+  --color-radio-card-item-addon-fg: var(--color-radio-card-fg-secondary);
+  --color-radio-card-item-indicator-border: var(--color-radio-card-border);
+  --color-radio-card-item-indicator-bg: transparent;
+  --color-radio-card-item-indicator-content-fg: var(--color-radio-card-accent);
+
+  /* === STATE VARIATIONS === */
+  --color-radio-card-item-bg-hover: oklch(
+    from var(--color-radio-card-item-bg) calc(l + var(--state-hover)) c h
+  );
+  --color-radio-card-item-border-hover: oklch(
+    from var(--color-radio-card-item-border) calc(l + var(--state-hover)) c h
+  );
+
+  /* === COMPONENT VARIANTS === */
+  --color-radio-card-item-bg-outline-checked: var(--color-radio-card-item-bg);
+  --color-radio-card-item-bg-outline-checked-hover: var(
+    --color-radio-card-item-bg-hover
+  );
+  --color-radio-card-item-border-outline-checked: var(
+    --color-radio-card-accent
+  );
+  --color-radio-card-item-border-outline-checked-hover: var(
+    --color-radio-card-accent-hover
+  );
+  --color-radio-card-item-indicator-border-outline-checked: var(
+    --color-radio-card-accent
+  );
+  --color-radio-card-item-indicator-content-fg-outline-checked: var(
+    --color-radio-card-accent
+  );
+
+  --color-radio-card-item-bg-subtle-checked: var(
+    --color-radio-card-accent-light
+  );
+  --color-radio-card-item-bg-subtle-checked-hover: var(
+    --color-radio-card-accent-light-hover
+  );
+  --color-radio-card-item-border-subtle-checked: var(
+    --color-radio-card-accent-light
+  );
+  --color-radio-card-item-border-subtle-checked-hover: var(
+    --color-radio-card-accent-light-hover
+  );
+  --color-radio-card-item-fg-subtle-checked: var(
+    --color-radio-card-accent-contrast
+  );
+  --color-radio-card-item-description-fg-subtle-checked: var(
+    --color-radio-card-accent-contrast
+  );
+  --color-radio-card-item-addon-border-subtle-checked: var(
+    --color-radio-card-accent-light-hover
+  );
+  --color-radio-card-item-addon-fg-subtle-checked: var(
+    --color-radio-card-accent-contrast
+  );
+  --color-radio-card-item-indicator-border-subtle-checked: var(
+    --color-radio-card-accent-contrast
+  );
+  --color-radio-card-item-indicator-content-fg-subtle-checked: var(
+    --color-radio-card-accent-contrast
+  );
+
+  --color-radio-card-item-bg-solid-checked: var(--color-radio-card-accent);
+  --color-radio-card-item-bg-solid-checked-hover: var(
+    --color-radio-card-accent-hover
+  );
+  --color-radio-card-item-border-solid-checked: var(--color-radio-card-accent);
+  --color-radio-card-item-border-solid-checked-hover: var(
+    --color-radio-card-accent-hover
+  );
+  --color-radio-card-item-fg-solid-checked: var(
+    --color-radio-card-accent-contrast
+  );
+  --color-radio-card-item-description-fg-solid-checked: var(
+    --color-radio-card-accent-contrast
+  );
+  --color-radio-card-item-addon-border-solid-checked: var(
+    --color-radio-card-accent-hover
+  );
+  --color-radio-card-item-addon-fg-solid-checked: var(
+    --color-radio-card-accent-contrast
+  );
+  --color-radio-card-item-indicator-bg-solid-checked: var(
+    --color-radio-card-accent-contrast
+  );
+  --color-radio-card-item-indicator-border-solid-checked: var(
+    --color-radio-card-accent-contrast
+  );
+  --color-radio-card-item-indicator-content-fg-solid-checked: var(
+    --color-radio-card-accent
+  );
+
+  /* === VALIDATION STATES === */
+  --color-radio-card-item-border-error: var(--color-radio-card-danger);
+
+  /* === DISABLED STATES === */
+  --color-radio-card-item-bg-disabled: var(--color-bg-disabled);
+  --color-radio-card-item-border-disabled: var(--color-border-disabled);
+  --color-radio-card-item-fg-disabled: var(--color-radio-card-fg-disabled);
+  --color-radio-card-item-description-fg-disabled: var(
+    --color-radio-card-fg-disabled
+  );
+  --color-radio-card-item-addon-bg-disabled: var(--color-bg-disabled);
+  --color-radio-card-item-addon-border-disabled: var(--color-border-disabled);
+  --color-radio-card-item-addon-fg-disabled: var(
+    --color-radio-card-fg-disabled
+  );
+  --color-radio-card-item-indicator-border-disabled: var(
+    --color-radio-card-item-border-disabled
+  );
+  --color-radio-card-item-indicator-bg-disabled: transparent;
+  --color-radio-card-item-indicator-content-fg-disabled: var(
+    --color-radio-card-fg-disabled
+  );
+
+  /* === SPACING === */
+  --gap-radio-card-root-sm: var(--spacing-100);
+  --gap-radio-card-root-md: var(--spacing-150);
+  --gap-radio-card-root-lg: var(--spacing-200);
+
+  --gap-radio-card-item-control-sm: var(--spacing-100);
+  --gap-radio-card-item-control-md: var(--spacing-150);
+  --gap-radio-card-item-control-lg: var(--spacing-200);
+
+  --gap-radio-card-item-content-sm: var(--spacing-50);
+  --gap-radio-card-item-content-md: var(--spacing-100);
+  --gap-radio-card-item-content-lg: var(--spacing-100);
+
+  --padding-radio-card-item-control-sm: var(--spacing-150);
+  --padding-radio-card-item-control-md: var(--spacing-200);
+  --padding-radio-card-item-control-lg: var(--spacing-250);
+
+  --padding-radio-card-item-addon-sm: var(--spacing-100);
+  --padding-radio-card-item-addon-md: var(--spacing-150);
+  --padding-radio-card-item-addon-lg: var(--spacing-200);
+
+  --spacing-radio-card-indicator-sm: 1rem;
+  --spacing-radio-card-indicator-md: 1.125rem;
+  --spacing-radio-card-indicator-lg: 1.25rem;
+
+  --spacing-radio-card-indicator-mark-sm: 0.375rem;
+  --spacing-radio-card-indicator-mark-md: 0.5rem;
+  --spacing-radio-card-indicator-mark-lg: 0.625rem;
+
+  /* === TYPOGRAPHY === */
+  --text-radio-card-item-sm: var(--text-sm);
+  --text-radio-card-item-md: var(--text-md);
+  --text-radio-card-item-lg: var(--text-lg);
+
+  --text-radio-card-item-description-sm: var(--text-sm);
+  --text-radio-card-item-description-md: var(--text-sm);
+  --text-radio-card-item-description-lg: var(--text-md);
+
+  --text-radio-card-item-addon-sm: var(--text-xs);
+  --text-radio-card-item-addon-md: var(--text-sm);
+  --text-radio-card-item-addon-lg: var(--text-md);
+
+  --font-weight-radio-card-item: var(--font-weight-medium);
+  --font-weight-radio-card-item-addon: var(--font-weight-medium);
+
+  /* === BORDERS & RADIUS === */
+  --border-width-radio-card: var(--border-width-sm);
+  --border-width-radio-card-addon: var(--border-width-sm);
+  --border-width-radio-card-indicator: var(--border-width-sm);
+  --radius-radio-card-item: var(--radius-md);
+  --radius-radio-card-indicator: var(--radius-full);
+
+  /* === SHADOWS === */
+  --shadow-radio-card-item: var(--shadow-sm);
+
+  /* === FOCUS RINGS === */
+  --color-radio-card-ring: var(--color-ring);
+}
+
+@utility token-icon-radio-card-checked {
+  @apply token-icon-circle;
+}

package/src/tokens/components/molecules/_radio-group.css

@@ -0,0 +1,150 @@
+@theme static {
+  --radio-group-item-grid: min-content minmax(0, 1fr);
+
+  /* === BASE COLOR MAPPING === */
+  --color-radio-group-accent: var(--color-primary);
+  --color-radio-group-accent-hover: var(--color-primary-hover);
+  --color-radio-group-accent-light: var(--color-primary-light);
+  --color-radio-group-accent-light-hover: var(--color-primary-light-hover);
+  --color-radio-group-accent-contrast: var(--color-fg-dark);
+  --color-radio-group-danger: var(--color-danger);
+  --color-radio-group-fg: var(--color-fg-primary);
+  --color-radio-group-fg-secondary: var(--color-fg-secondary);
+  --color-radio-group-fg-disabled: var(--color-fg-disabled);
+  --color-radio-group-surface: var(--color-fill-active);
+  --color-radio-group-border: var(--color-border-primary);
+
+  /* === DERIVED COLORS === */
+  --color-radio-group-item-control-bg: var(--color-radio-group-surface);
+  --color-radio-group-item-control-border: var(--color-radio-group-border);
+  --color-radio-group-item-indicator: var(--color-radio-group-accent);
+  --color-radio-group-item-fg: var(--color-radio-group-fg);
+  --color-radio-group-item-description: var(--color-radio-group-fg-secondary);
+
+  /* === STATE VARIATIONS === */
+  --color-radio-group-item-control-bg-hover: oklch(
+    from var(--color-radio-group-item-control-bg) calc(l + var(--state-hover)) c
+      h
+  );
+  --color-radio-group-item-control-border-hover: oklch(
+    from var(--color-radio-group-item-control-border)
+      calc(l + var(--state-hover)) c h
+  );
+
+  /* === COMPONENT VARIANTS === */
+  --color-radio-group-item-control-bg-outline-checked: var(
+    --color-radio-group-item-control-bg
+  );
+  --color-radio-group-item-control-bg-outline-checked-hover: var(
+    --color-radio-group-item-control-bg-hover
+  );
+  --color-radio-group-item-control-border-outline-checked: var(
+    --color-radio-group-accent
+  );
+  --color-radio-group-item-control-border-outline-checked-hover: var(
+    --color-radio-group-accent-hover
+  );
+  --color-radio-group-item-indicator-outline: var(
+    --color-radio-group-item-indicator
+  );
+
+  --color-radio-group-item-control-bg-subtle-checked: var(
+    --color-radio-group-accent-light
+  );
+  --color-radio-group-item-control-bg-subtle-checked-hover: var(
+    --color-radio-group-accent-light-hover
+  );
+  --color-radio-group-item-control-border-subtle-checked: var(
+    --color-radio-group-accent-light
+  );
+  --color-radio-group-item-control-border-subtle-checked-hover: var(
+    --color-radio-group-accent-light-hover
+  );
+  --color-radio-group-item-indicator-subtle: var(
+    --color-radio-group-item-indicator
+  );
+
+  --color-radio-group-item-control-bg-solid-checked: var(
+    --color-radio-group-accent
+  );
+  --color-radio-group-item-control-bg-solid-checked-hover: var(
+    --color-radio-group-accent-hover
+  );
+  --color-radio-group-item-control-border-solid-checked: var(
+    --color-radio-group-accent
+  );
+  --color-radio-group-item-control-border-solid-checked-hover: var(
+    --color-radio-group-accent-hover
+  );
+  --color-radio-group-item-indicator-solid: var(
+    --color-radio-group-accent-contrast
+  );
+
+  /* === VALIDATION STATES === */
+  --color-radio-group-item-control-border-error: var(
+    --color-radio-group-danger
+  );
+  --color-radio-group-ring-error: var(--color-radio-group-danger);
+
+  /* === DISABLED STATES === */
+  --color-radio-group-item-control-bg-disabled: var(--color-bg-disabled);
+  --color-radio-group-item-control-border-disabled: var(
+    --color-border-disabled
+  );
+  --color-radio-group-item-indicator-disabled: var(--color-fg-disabled);
+  --color-radio-group-item-fg-disabled: var(--color-radio-group-fg-disabled);
+  --color-radio-group-item-description-disabled: var(
+    --color-radio-group-fg-disabled
+  );
+
+  /* === SPACING === */
+  --gap-radio-group-root-sm: var(--spacing-100);
+  --gap-radio-group-root-md: var(--spacing-150);
+  --gap-radio-group-root-lg: var(--spacing-200);
+
+  --gap-radio-group-items-vertical-sm: var(--spacing-100);
+  --gap-radio-group-items-vertical-md: var(--spacing-150);
+  --gap-radio-group-items-vertical-lg: var(--spacing-200);
+
+  --gap-radio-group-items-horizontal-sm: var(--spacing-150);
+  --gap-radio-group-items-horizontal-md: var(--spacing-250);
+  --gap-radio-group-items-horizontal-lg: var(--spacing-300);
+
+  --gap-radio-group-item-sm: var(--spacing-100);
+  --gap-radio-group-item-md: var(--spacing-150);
+  --gap-radio-group-item-lg: var(--spacing-200);
+
+  --gap-radio-group-item-content-sm: var(--spacing-50);
+  --gap-radio-group-item-content-md: var(--spacing-100);
+  --gap-radio-group-item-content-lg: var(--spacing-100);
+
+  --spacing-radio-group-control-sm: 0.875rem;
+  --spacing-radio-group-control-md: 1rem;
+  --spacing-radio-group-control-lg: 1.125rem;
+  --spacing-radio-group-indicator-sm: 0.5rem;
+  --spacing-radio-group-indicator-md: 0.625rem;
+  --spacing-radio-group-indicator-lg: 0.75rem;
+
+  /* === TYPOGRAPHY === */
+  --text-radio-group-item-sm: var(--text-sm);
+  --text-radio-group-item-md: var(--text-md);
+  --text-radio-group-item-lg: var(--text-lg);
+  --text-radio-group-item-description-sm: var(--text-sm);
+  --text-radio-group-item-description-md: var(--text-sm);
+  --text-radio-group-item-description-lg: var(--text-md);
+
+  /* === BORDERS & RADIUS === */
+  --border-width-radio-group: var(--border-width-sm);
+  --radius-radio-group-control: var(--radius-full);
+
+  /* === SHADOWS === */
+  /* No shadows. */
+
+  /* === FOCUS RINGS === */
+  --color-radio-group-ring: var(--color-ring);
+}
+
+
+@utility token-icon-radio-group-checked {
+  @apply token-icon-circle;
+}

package/src/tokens/components/molecules/_search-form.css

@@ -1,10 +1,14 @@
 @theme static {
+  --border-width-search-form: var(--border-width-form-control);
+
   /* Spacing for stacked layout */
   --spacing-search-form-sm: var(--spacing-150);
   --spacing-search-form-md: var(--spacing-200);
   --spacing-search-form-lg: var(--spacing-250);
-}
 
-@utility token-icon-search {
-  @apply icon-[mdi--magnify];
+  --radius-search-form: var(--radius-form-control);
+  --radius-search-form-sm: var(--radius-form-control-sm);
+  --radius-search-form-md: var(--radius-form-control-md);
+  --radius-search-form-input: 0;
+  --padding-search-form-clear-button: var(--spacing-200);
 }