ui-foundations 0.3.1 → 0.4.1

package/dist/main.css

@@ -181,7 +181,176 @@
   }
 }
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-03-31T20:27:09.733Z */
+/* Generated on 2026-04-28T09:23:28.563Z */
+
+:root {
+  --color-neutral-100: rgb(230 230 230);
+  --color-neutral-200: rgb(204 204 204);
+  --color-neutral-300: rgb(179 179 179);
+  --color-neutral-400: rgb(128 128 128);
+  --color-neutral-500: rgb(128 128 128);
+  --color-neutral-600: rgb(102 102 102);
+  --color-neutral-700: rgb(77 77 77);
+  --color-neutral-800: rgb(51 51 51);
+  --color-neutral-900: rgb(26 26 26);
+  --color-neutral-1000: rgb(0 0 0);
+  --color-neutral-alpha-100: rgba(0 0 0 / 0.1);
+  --color-neutral-alpha-200: rgba(0 0 0 / 0.2);
+  --color-neutral-alpha-300: rgba(0 0 0 / 0.3);
+  --color-neutral-alpha-400: rgba(0 0 0 / 0.4);
+  --color-neutral-alpha-500: rgba(0 0 0 / 0.5);
+  --color-neutral-alpha-600: rgba(0 0 0 / 0.6);
+  --color-neutral-alpha-700: rgba(0 0 0 / 0.7);
+  --color-neutral-alpha-800: rgba(0 0 0 / 0.8);
+  --color-neutral-alpha-900: rgba(0 0 0 / 0.9);
+  --color-neutral-alpha-000: rgba(0 0 0 / 0);
+  --color-neutral-000: rgb(255 255 255);
+  --color-brand-b-purple-200: rgb(222 192 255);
+  --color-brand-b-purple-300: rgb(196 143 255);
+  --color-brand-b-purple-600: rgb(151 71 255);
+  --color-brand-b-purple-700: rgb(122 20 255);
+  --color-brand-b-purple-800: rgb(85 26 139);
+  --color-brand-b-purple-900: rgb(58 18 95);
+  --color-brand-b-blue-100: rgb(206 219 253);
+  --color-brand-b-blue-200: rgb(158 183 250);
+  --color-brand-b-blue-300: rgb(109 147 248);
+  --color-brand-b-blue-400: rgb(61 111 245);
+  --color-brand-b-blue-500: rgb(12 75 243);
+  --color-brand-b-blue-600: rgb(10 60 194);
+  --color-brand-b-blue-700: rgb(7 45 146);
+  --color-brand-b-blue-800: rgb(5 30 97);
+  --color-brand-b-blue-900: rgb(2 15 49);
+  --color-brand-b-red-100: rgb(255 255 255);
+  --color-brand-b-red-200: rgb(255 204 204);
+  --color-brand-b-red-300: rgb(255 153 153);
+  --color-brand-b-red-400: rgb(255 102 102);
+  --color-brand-b-red-500: rgb(255 51 51);
+  --color-brand-b-red-600: rgb(255 0 0);
+  --color-brand-b-red-700: rgb(153 0 0);
+  --color-brand-b-red-800: rgb(102 0 0);
+  --color-brand-b-red-900: rgb(51 0 0);
+  --color-brand-b-green-100: rgb(246 254 250);
+  --color-brand-b-green-200: rgb(200 249 223);
+  --color-brand-b-green-300: rgb(154 244 196);
+  --color-brand-b-green-400: rgb(108 239 170);
+  --color-brand-b-green-500: rgb(62 234 143);
+  --color-brand-b-green-600: rgb(19 174 92);
+  --color-brand-b-green-700: rgb(14 129 68);
+  --color-brand-b-green-800: rgb(8 69 36);
+  --color-brand-b-green-900: rgb(4 37 19);
+  --color-transparent: rgba(0 0 0 / 0);
+  --color-brand-a-green-100: rgb(243 246 233);
+  --color-brand-a-green-200: rgb(223 231 197);
+  --color-brand-a-green-300: rgb(207 219 169);
+  --color-brand-a-green-400: rgb(191 207 140);
+  --color-brand-a-green-500: rgb(175 195 111);
+  --color-brand-a-green-600: rgb(159 183 82);
+  --color-brand-a-green-700: rgb(137 158 66);
+  --color-brand-a-green-800: rgb(112 129 54);
+  --color-brand-a-green-900: rgb(81 93 39);
+  --color-brand-a-red-100: rgb(254 251 251);
+  --color-brand-a-red-200: rgb(250 224 230);
+  --color-brand-a-red-300: rgb(244 179 195);
+  --color-brand-a-red-400: rgb(238 135 160);
+  --color-brand-a-red-500: rgb(231 90 124);
+  --color-brand-a-red-600: rgb(225 46 89);
+  --color-brand-a-red-700: rgb(191 28 67);
+  --color-brand-a-red-800: rgb(147 21 52);
+  --color-brand-a-red-900: rgb(102 15 36);
+  --color-brand-a-sand-100: rgb(240 240 229);
+  --color-brand-a-sand-200: rgb(221 222 197);
+  --color-brand-a-sand-300: rgb(192 193 172);
+  --color-brand-a-sand-400: rgb(164 165 147);
+  --color-brand-a-sand-500: rgb(136 137 122);
+  --color-brand-a-sand-600: rgb(108 109 97);
+  --color-brand-a-sand-700: rgb(80 81 72);
+  --color-brand-a-sand-800: rgb(52 52 47);
+  --color-brand-a-sand-900: rgb(24 24 22);
+  --font-size-md: 1rem;
+  --font-size-xs: .75rem;
+  --font-size-sm: .875rem;
+  --font-size-lg: 1.25rem;
+  --font-size-xl: 1.5rem;
+  --font-size-xxl: 2rem;
+  --font-size-xxxl: 2.5rem;
+  --font-weight-100: 100;
+  --font-weight-200: 200;
+  --font-weight-300: 300;
+  --font-weight-400: 400;
+  --font-weight-500: 500;
+  --font-weight-600: 600;
+  --font-weight-700: 700;
+  --font-weight-800: 800;
+  --font-weight-900: 900;
+  --font-family-sans: Inter;
+  --font-family-serif: Rokkitt;
+  --font-family-mono: SFMono-Regular;
+  --line-height-xs: 1rem;
+  --line-height-sm: 1.25rem;
+  --line-height-md: 1.5rem;
+  --line-height-lg: 1.75rem;
+  --line-height-xl: 2rem;
+  --line-height-xxl: 2.75rem;
+  --line-height-xxxl: 3.5rem;
+  --size-spacing-100: .25rem;
+  --size-spacing-200: .5rem;
+  --size-spacing-300: .75rem;
+  --size-spacing-400: 1rem;
+  --size-spacing-500: 1.25rem;
+  --size-spacing-600: 1.5rem;
+  --size-spacing-700: 2rem;
+  --size-spacing-800: 2.5rem;
+  --size-spacing-900: 3rem;
+  --size-spacing-1000: 4rem;
+  --size-spacing-000: 0;
+  --size-radius-100: .125rem;
+  --size-radius-200: .25rem;
+  --size-radius-300: .375rem;
+  --size-radius-400: .5rem;
+  --size-radius-500: .75rem;
+  --size-radius-600: 1rem;
+  --size-radius-700: 1.25rem;
+  --size-radius-800: 1.5rem;
+  --size-radius-900: 2rem;
+  --size-radius-000: 0;
+  --size-radius-full: 625rem;
+  --shadow-focus: .5rem;
+  --breakpoint-100: 580px;
+  --breakpoint-200: 760px;
+  --breakpoint-300: 960px;
+  --breakpoint-400: 1200px;
+  --breakpoint-500: 1440px;
+  --breakpoint-600: 1920px;
+  --container-100: 192px;
+  --container-200: 384px;
+  --container-300: 576px;
+  --container-400: 768px;
+  --container-500: 960px;
+  --container-600: 1152px;
+  --size-border-100: .0625rem;
+  --size-border-200: .125rem;
+  --size-border-300: .1875rem;
+  --size-border-000: 0;
+  --layout-columns: 12;
+  --layout-gutter: 1rem;
+  --layout-max-width: 1236px;
+  --layout-column-max-width: 412px;
+  --layout-float-breakpoint: 1220px;
+  --layout-base-grid: .25rem;
+  --zindex-fixed: 1030;
+  --zindex-sticky: 1020;
+  --zindex-dropdown: 1000;
+  --zindex-dropdown-base: 900;
+  --zindex-modal: 1050;
+  --zindex-base: 0;
+  --zindex-tooltip: 1070;
+  --zindex-raised: 1;
+  --zindex-popover: 1060;
+  --zindex-modal-overlay: 1040;
+  --zindex-hidden: -1;
+}
+/* Auto-generated design tokens from Figma */
+/* Generated on 2026-04-28T09:23:28.564Z */
 
 :root {
   --typography-heading-font-family: var(--brand-font-lead);
@@ -217,7 +386,7 @@
   --corner-checkbox-radius: var(--brand-corner-input);
 }
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-03-31T20:27:09.724Z */
+/* Generated on 2026-04-28T09:23:28.559Z */
 
 :root {
   --button-border-size-hover: var(--size-border-100);
@@ -310,18 +479,41 @@
   --input-overlay-active: var(--color-transparent);
   --input-height: 2.5rem;
   --input-checkbox-text-color-default: var(--color-text-default);
-  --input-checkbox-text-color-hover: var(--color-text-default);
+  --input-checkbox-text-color-hover: var(--color-text-strong);
   --input-checkbox-text-color-active: var(--color-text-inverse);
   --input-checkbox-border-color-default: var(--color-border-subtle);
-  --input-checkbox-border-color-hover: var(--color-border-brand);
+  --input-checkbox-border-color-hover: var(--color-border-strong);
   --input-checkbox-border-color-active: var(--color-border-brand);
   --input-checkbox-border-color-focus: var(--color-border-brand);
   --input-checkbox-border-color-invalid: var(--color-border-danger);
   --input-checkbox-border-color-valid: var(--color-border-strong);
+  --input-checkbox-border-color-disabled: var(--color-border-disabled);
   --input-checkbox-container-background-default: var(--color-fill-surface);
   --input-checkbox-container-background-hover: var(--color-fill-surface);
   --input-checkbox-container-background-focus: var(--color-fill-surface);
   --input-checkbox-container-background-active: var(--color-fill-brand);
+  --input-checkbox-container-background-disabled: var(--color-fill-disabled);
+  --input-checkbox-text-color-disabled: var(--color-text-disabled);
+  --checkbox-border-size-hover: var(--size-border-200);
+  --checkbox-border-size-disabled: var(--size-border-000);
+  --checkbox-border-size-default: var(--size-border-100);
+  --input-radio-text-color-default: var(--color-text-default);
+  --input-radio-text-color-hover: var(--color-text-strong);
+  --input-radio-text-color-active: var(--color-text-inverse);
+  --input-radio-text-color-disabled: var(--color-text-disabled);
+  --input-radio-border-color-default: var(--color-border-subtle);
+  --input-radio-border-color-hover: var(--color-border-strong);
+  --input-radio-border-color-active: var(--color-border-brand);
+  --input-radio-border-color-focus: var(--color-border-brand);
+  --input-radio-border-color-disabled: var(--color-border-disabled);
+  --input-radio-container-background-default: var(--color-fill-surface);
+  --input-radio-container-background-hover: var(--color-fill-surface);
+  --input-radio-container-background-focus: var(--color-fill-surface);
+  --input-radio-container-background-active: var(--color-fill-brand);
+  --input-radio-container-background-disabled: var(--color-fill-disabled);
+  --radio-border-size-default: var(--size-border-100);
+  --radio-border-size-hover: var(--size-border-200);
+  --radio-border-size-disabled: var(--size-border-000);
   --form-group-gap: var(--size-spacing-400);
   --form-group-title-color: var(--color-text-default);
   --form-padding-inline: var(--size-spacing-400);
@@ -334,9 +526,29 @@
   --form-container-background: var(--color-fill-surface);
   --form-container-border-color: var(--color-border-subtle);
   --form-border-size: var(--size-border-100);
+  --badge-default-container-background: var(--color-fill-subtle);
+  --badge-default-text-color: var(--color-text-default);
+  --badge-brand-container-background: var(--color-fill-brand);
+  --badge-brand-text-color: var(--color-text-inverse);
+  --badge-success-container-background: var(--color-fill-success);
+  --badge-success-text-color: var(--color-text-inverse);
+  --badge-danger-container-background: var(--color-fill-danger);
+  --badge-danger-text-color: var(--color-text-inverse);
+  --badge-border-radius: var(--size-radius-full);
+  --badge-font-family: var(--typography-label-font-family);
+  --badge-font-weight: var(--font-weight-700);
+  --badge-font-size-sm: var(--font-size-xs);
+  --badge-font-size-md: var(--font-size-sm);
+  --badge-line-height-sm: var(--line-height-xs);
+  --badge-line-height-md: var(--line-height-sm);
+  --badge-padding-inline-sm: var(--size-spacing-200);
+  --badge-padding-inline-md: var(--size-spacing-300);
+  --badge-padding-block-sm: var(--size-spacing-000);
+  --badge-padding-block-md: var(--size-spacing-100);
+  --badge-gap: var(--size-spacing-100);
 }
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-03-31T20:27:09.721Z */
+/* Generated on 2026-04-28T09:23:28.554Z */
 
 :root[data-mode="dark"] {
   --color-text-default: var(--color-neutral-800);
@@ -368,7 +580,7 @@
   --color-focus: var(--brand-color-primary-dark);
 }
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-03-31T20:27:09.718Z */
+/* Generated on 2026-04-28T09:23:28.552Z */
 
 :root {
   --color-text-default: var(--color-neutral-800);
@@ -400,144 +612,17 @@
   --color-focus: var(--brand-color-primary);
 }
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-03-31T20:27:09.731Z */
-
-:root {
-  --color-neutral-100: rgb(230 230 230);
-  --color-neutral-200: rgb(204 204 204);
-  --color-neutral-300: rgb(179 179 179);
-  --color-neutral-400: rgb(128 128 128);
-  --color-neutral-500: rgb(128 128 128);
-  --color-neutral-600: rgb(102 102 102);
-  --color-neutral-700: rgb(77 77 77);
-  --color-neutral-800: rgb(51 51 51);
-  --color-neutral-900: rgb(26 26 26);
-  --color-neutral-1000: rgb(0 0 0);
-  --color-neutral-alpha-100: rgba(0 0 0 / 0.1);
-  --color-neutral-alpha-200: rgba(0 0 0 / 0.2);
-  --color-neutral-alpha-300: rgba(0 0 0 / 0.3);
-  --color-neutral-alpha-400: rgba(0 0 0 / 0.4);
-  --color-neutral-alpha-500: rgba(0 0 0 / 0.5);
-  --color-neutral-alpha-600: rgba(0 0 0 / 0.6);
-  --color-neutral-alpha-700: rgba(0 0 0 / 0.7);
-  --color-neutral-alpha-800: rgba(0 0 0 / 0.8);
-  --color-neutral-alpha-900: rgba(0 0 0 / 0.9);
-  --color-neutral-alpha-000: rgba(0 0 0 / 0);
-  --color-neutral-000: rgb(255 255 255);
-  --color-brand-a-purple-200: rgb(222 192 255);
-  --color-brand-a-purple-600: rgb(151 71 255);
-  --color-brand-a-purple-800: rgb(85 26 139);
-  --color-brand-a-blue-200: rgb(226 244 253);
-  --color-brand-a-blue-500: rgb(112 203 244);
-  --color-brand-a-blue-700: rgb(12 75 243);
-  --color-brand-a-blue-800: rgb(27 17 92);
-  --color-brand-a-green: rgb(19 174 92);
-  --color-brand-a-red: rgb(255 0 0);
-  --color-brand-b-purple-200: rgb(196 143 255);
-  --color-brand-b-purple-600: rgb(122 20 255);
-  --color-brand-b-purple-800: rgb(58 18 95);
-  --color-brand-b-blue-200: rgb(179 226 250);
-  --color-brand-b-blue-500: rgb(66 186 240);
-  --color-brand-b-blue-700: rgb(10 60 194);
-  --color-brand-b-blue-800: rgb(14 9 47);
-  --color-brand-b-red: rgb(204 0 0);
-  --color-brand-b-green: rgb(14 129 68);
-  --color-transparent: rgba(0 0 0 / 0);
-  --font-size-md: 1rem;
-  --font-size-xs: .75rem;
-  --font-size-sm: .875rem;
-  --font-size-lg: 1.25rem;
-  --font-size-xl: 1.5rem;
-  --font-size-xxl: 2rem;
-  --font-size-xxxl: 2.5rem;
-  --font-weight-100: 100;
-  --font-weight-200: 200;
-  --font-weight-300: 300;
-  --font-weight-400: 400;
-  --font-weight-500: 500;
-  --font-weight-600: 600;
-  --font-weight-700: 700;
-  --font-weight-800: 800;
-  --font-weight-900: 900;
-  --font-family-sans: Inter;
-  --font-family-serif: Rokkitt;
-  --font-family-mono: SFMono-Regular;
-  --line-height-xs: 1rem;
-  --line-height-sm: 1.25rem;
-  --line-height-md: 1.5rem;
-  --line-height-lg: 1.75rem;
-  --line-height-xl: 2rem;
-  --line-height-xxl: 2.75rem;
-  --line-height-xxxl: 3.5rem;
-  --size-spacing-100: .25rem;
-  --size-spacing-200: .5rem;
-  --size-spacing-300: .75rem;
-  --size-spacing-400: 1rem;
-  --size-spacing-500: 1.25rem;
-  --size-spacing-600: 1.5rem;
-  --size-spacing-700: 2rem;
-  --size-spacing-800: 2.5rem;
-  --size-spacing-900: 3rem;
-  --size-spacing-1000: 4rem;
-  --size-spacing-000: 0;
-  --size-radius-100: .125rem;
-  --size-radius-200: .25rem;
-  --size-radius-300: .375rem;
-  --size-radius-400: .5rem;
-  --size-radius-500: .75rem;
-  --size-radius-600: 1rem;
-  --size-radius-700: 1.25rem;
-  --size-radius-800: 1.5rem;
-  --size-radius-900: 2rem;
-  --size-radius-000: 0;
-  --size-radius-full: 625rem;
-  --shadow-focus: .5rem;
-  --breakpoint-100: 580px;
-  --breakpoint-200: 760px;
-  --breakpoint-300: 960px;
-  --breakpoint-400: 1200px;
-  --breakpoint-500: 1440px;
-  --breakpoint-600: 1920px;
-  --container-100: 192px;
-  --container-200: 384px;
-  --container-300: 576px;
-  --container-400: 768px;
-  --container-500: 960px;
-  --container-600: 1152px;
-  --size-border-100: .0625rem;
-  --size-border-200: .125rem;
-  --size-border-300: .1875rem;
-  --size-border-000: 0;
-  --layout-columns: 12;
-  --layout-gutter: 1rem;
-  --layout-max-width: 1236px;
-  --layout-column-max-width: 412px;
-  --layout-float-breakpoint: 1220px;
-  --layout-base-grid: .25rem;
-  --zindex-fixed: 1030;
-  --zindex-sticky: 1020;
-  --zindex-dropdown: 1000;
-  --zindex-dropdown-base: 900;
-  --zindex-modal: 1050;
-  --zindex-base: 0;
-  --zindex-tooltip: 1070;
-  --zindex-raised: 1;
-  --zindex-popover: 1060;
-  --zindex-modal-overlay: 1040;
-  --zindex-hidden: -1;
-}
-/* Auto-generated design tokens from Figma */
-/* Generated on 2026-03-31T20:27:09.734Z */
+/* Generated on 2026-04-28T09:23:28.565Z */
 
 :root[data-brand="a"] {
-  --brand-color-functional-success: var(--color-brand-a-green);
-  --brand-color-functional-danger: var(--color-brand-a-red);
-  --brand-color-functional-base: var(--color-brand-a-blue-700);
-  --brand-color-functional-base-dark: var(--color-brand-a-blue-800);
-  --brand-color-primary: var(--color-brand-a-purple-600);
-  --brand-color-accent: var(--color-brand-a-blue-500);
-  --brand-color-primary-dark: var(--color-brand-a-purple-800);
-  --brand-color-accent-dark: var(--color-brand-a-blue-700);
+  --brand-color-functional-success: var(--color-brand-a-green-600);
+  --brand-color-functional-danger: var(--color-brand-a-red-600);
+  --brand-color-functional-base: var(--color-brand-a-green-700);
+  --brand-color-functional-base-dark: var(--color-brand-a-green-900);
+  --brand-color-primary: var(--color-brand-a-sand-700);
+  --brand-color-accent: var(--color-brand-a-green-400);
+  --brand-color-primary-dark: var(--color-brand-a-sand-900);
+  --brand-color-accent-dark: var(--color-brand-a-green-600);
   --brand-color-subtle: var(--color-neutral-500);
   --brand-color-subtle-dark: var(--color-neutral-800);
   --brand-color-subtle-light: var(--color-neutral-200);
@@ -549,17 +634,17 @@
   --brand-corner-input: var(--size-radius-200);
 }
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-03-31T20:27:09.734Z */
+/* Generated on 2026-04-28T09:23:28.567Z */
 
 :root[data-brand="b"] {
-  --brand-color-functional-success: var(--color-brand-b-green);
-  --brand-color-functional-danger: var(--color-brand-b-red);
-  --brand-color-functional-base: var(--color-brand-b-purple-600);
-  --brand-color-functional-base-dark: var(--color-brand-b-purple-800);
-  --brand-color-primary: var(--color-brand-b-blue-500);
-  --brand-color-accent: var(--color-brand-b-purple-600);
-  --brand-color-primary-dark: var(--color-brand-b-blue-700);
-  --brand-color-accent-dark: var(--color-brand-b-purple-800);
+  --brand-color-functional-success: var(--color-brand-b-green-600);
+  --brand-color-functional-danger: var(--color-brand-b-red-600);
+  --brand-color-functional-base: var(--color-brand-b-purple-700);
+  --brand-color-functional-base-dark: var(--color-brand-b-purple-900);
+  --brand-color-primary: var(--color-brand-b-purple-600);
+  --brand-color-accent: var(--color-brand-b-green-400);
+  --brand-color-primary-dark: var(--color-brand-b-purple-800);
+  --brand-color-accent-dark: var(--color-brand-b-green-800);
   --brand-color-subtle: var(--color-neutral-500);
   --brand-color-subtle-dark: var(--color-neutral-800);
   --brand-color-subtle-light: var(--color-neutral-200);
@@ -972,12 +1057,12 @@
     font-weight: var(--typography-label-font-weight);
     font-size: var(--typography-label-font-size);
     line-height: var(--typography-label-line-height);
-    color: var(--color-text-default);
+    color: var(--input-checkbox-text-color-default);
     cursor: pointer;
   }
 
   .checkbox-field.is-disabled {
-    color: var(--color-text-disabled);
+    color: var(--input-checkbox-text-color-disabled);
     cursor: not-allowed;
   }
 
@@ -989,52 +1074,91 @@
     display: inline-grid;
     place-content: center;
     border-style: solid;
-    border-width: var(--size-border-100);
-    border-color: var(--color-border-default);
-    border-radius: var(--brand-corner-input);
-    background: var(--color-fill-surface);
-    color: var(--color-text-inverse);
+    border-width: var(--checkbox-border-size-default);
+    border-color: var(--input-checkbox-border-color-default);
+    border-radius: var(--corner-checkbox-radius);
+    background: var(--input-checkbox-container-background-default);
+    color: var(--input-checkbox-text-color-active);
     cursor: pointer;
   }
 
   .checkbox::after {
     content: "";
+    display: block;
   }
 
   .checkbox:checked,
   .checkbox.is-checked {
-    border-color: var(--color-border-brand);
-    background: var(--color-fill-brand);
+    border-color: var(--input-checkbox-border-color-active);
+    background: var(--input-checkbox-container-background-active);
   }
 
   .checkbox:checked::after,
   .checkbox.is-checked::after {
-    content: "\2713";
-    font-size: var(--typography-label-font-size);
-    line-height: var(--typography-label-line-height);
+    content: "";
+    inline-size: 0.75em;
+    block-size: 0.75em;
+    background-color: currentColor;
+    -webkit-mask-image: url("/assets/icons/checkmark.svg");
+    mask-image: url("/assets/icons/checkmark.svg");
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+  }
+
+  .checkbox:indeterminate,
+  .checkbox.is-indeterminate {
+    border-color: var(--input-checkbox-border-color-active);
+    background: var(--input-checkbox-container-background-active);
+  }
+
+  .checkbox:indeterminate::after,
+  .checkbox.is-indeterminate::after {
+    inline-size: 0.75rem;
+    block-size: var(--size-border-200);
+    border-radius: 999px;
+    background: currentColor;
   }
 
   .checkbox:hover,
   .checkbox.is-hover {
     background:
       linear-gradient(0deg, var(--color-overlay-hover), var(--color-overlay-hover)),
-      var(--color-fill-surface);
-    border-color: var(--color-border-brand);
+      var(--input-checkbox-container-background-hover);
+    color: var(--input-checkbox-text-color-hover);
+    border-color: var(--input-checkbox-border-color-hover);
+    border-width: var(--checkbox-border-size-hover);
   }
 
   .checkbox:checked:hover,
   .checkbox.is-checked.is-hover {
     background:
       linear-gradient(0deg, var(--color-overlay-hover), var(--color-overlay-hover)),
-      var(--color-fill-brand);
+      var(--input-checkbox-container-background-active);
+    color: var(--input-checkbox-text-color-hover);
+    border-color: var(--input-checkbox-border-color-hover);
+    border-width: var(--checkbox-border-size-hover);
+  }
+
+  .checkbox:indeterminate:hover,
+  .checkbox.is-indeterminate.is-hover {
+    background:
+      linear-gradient(0deg, var(--color-overlay-hover), var(--color-overlay-hover)),
+      var(--input-checkbox-container-background-active);
+    color: var(--input-checkbox-text-color-hover);
+    border-color: var(--input-checkbox-border-color-hover);
+    border-width: var(--checkbox-border-size-hover);
   }
 
   .checkbox:active,
   .checkbox.is-active {
     background:
       linear-gradient(0deg, var(--color-overlay-active), var(--color-overlay-active)),
-      var(--color-fill-surface);
-    border-color: var(--color-border-brand);
+      var(--input-checkbox-container-background-default);
+    border-color: var(--input-checkbox-border-color-active);
     border-width: var(--size-border-200);
   }
 
@@ -1042,21 +1166,140 @@
   .checkbox.is-checked.is-active {
     background:
       linear-gradient(0deg, var(--color-overlay-active), var(--color-overlay-active)),
-      var(--color-fill-brand);
+      var(--input-checkbox-container-background-active);
+    border-color: var(--input-checkbox-border-color-active);
+  }
+
+  .checkbox:indeterminate:active,
+  .checkbox.is-indeterminate.is-active {
+    background:
+      linear-gradient(0deg, var(--color-overlay-active), var(--color-overlay-active)),
+      var(--input-checkbox-container-background-active);
+    border-color: var(--input-checkbox-border-color-active);
   }
 
   .checkbox:focus-visible,
   .checkbox.is-focus-visible {
-    border-color: var(--color-border-brand);
+    border-color: var(--input-checkbox-border-color-focus);
     outline: none;
     box-shadow: 0 0 0 var(--shadow-focus, 0) var(--color-focus, transparent);
   }
 
   .checkbox:disabled,
   .checkbox.is-disabled {
-    border-color: var(--color-border-disabled);
-    background: var(--color-fill-disabled);
-    color: var(--color-text-disabled);
+    border-width: var(--checkbox-border-size-disabled);
+    border-color: var(--input-checkbox-border-color-disabled);
+    background: var(--input-checkbox-container-background-disabled);
+    color: var(--input-checkbox-text-color-disabled);
+    cursor: not-allowed;
+  }
+}
+@layer components {
+  .radio-field {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--typography-label-gap);
+    font-family: var(--typography-label-font-family);
+    font-weight: var(--typography-label-font-weight);
+    font-size: var(--typography-label-font-size);
+    line-height: var(--typography-label-line-height);
+    color: var(--input-radio-text-color-default);
+    cursor: pointer;
+  }
+
+  .radio-field.is-disabled {
+    color: var(--input-radio-text-color-disabled);
+    cursor: not-allowed;
+  }
+
+  .radio {
+    inline-size: var(--size-spacing-600);
+    block-size: var(--size-spacing-600);
+    margin: 0;
+    appearance: none;
+    display: inline-grid;
+    place-content: center;
+    border-style: solid;
+    border-width: var(--radio-border-size-default);
+    border-color: var(--input-radio-border-color-default);
+    border-radius: var(--size-radius-full);
+    background: var(--input-radio-container-background-default);
+    cursor: pointer;
+  }
+
+  .radio::after {
+    content: "";
+    display: block;
+    inline-size: 0;
+    block-size: 0;
+    border-radius: var(--size-radius-full);
+    background: currentColor;
+    transition: all 120ms ease;
+  }
+
+  .radio:checked,
+  .radio.is-checked {
+    border-color: var(--input-radio-border-color-active);
+    background: var(--input-radio-container-background-default);
+    color: var(--input-radio-text-color-active);
+  }
+
+  .radio:checked::after,
+  .radio.is-checked::after {
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    background: var(--input-radio-border-color-active);
+  }
+
+  .radio:hover,
+  .radio.is-hover {
+    background:
+      linear-gradient(0deg, var(--color-overlay-hover), var(--color-overlay-hover)),
+      var(--input-radio-container-background-hover);
+    color: var(--input-radio-text-color-hover);
+    border-color: var(--input-radio-border-color-hover);
+    border-width: var(--radio-border-size-hover);
+  }
+
+  .radio:checked:hover,
+  .radio.is-checked.is-hover {
+    background:
+      linear-gradient(0deg, var(--color-overlay-hover), var(--color-overlay-hover)),
+      var(--input-radio-container-background-default);
+    border-color: var(--input-radio-border-color-hover);
+    border-width: var(--radio-border-size-hover);
+  }
+
+  .radio:active,
+  .radio.is-active {
+    background:
+      linear-gradient(0deg, var(--color-overlay-active), var(--color-overlay-active)),
+      var(--input-radio-container-background-default);
+    border-color: var(--input-radio-border-color-active);
+    border-width: var(--size-border-200);
+  }
+
+  .radio:checked:active,
+  .radio.is-checked.is-active {
+    background:
+      linear-gradient(0deg, var(--color-overlay-active), var(--color-overlay-active)),
+      var(--input-radio-container-background-default);
+    border-color: var(--input-radio-border-color-active);
+  }
+
+  .radio:focus-visible,
+  .radio.is-focus-visible {
+    border-color: var(--input-radio-border-color-focus);
+    outline: none;
+    box-shadow: 0 0 0 var(--shadow-focus, 0) var(--color-focus, transparent);
+  }
+
+  .radio:disabled,
+  .radio.is-disabled {
+    border-width: var(--radio-border-size-disabled);
+    border-color: var(--input-radio-border-color-disabled);
+    background: var(--input-radio-container-background-disabled);
+    color: var(--input-radio-text-color-disabled);
     cursor: not-allowed;
   }
 }
@@ -1215,3 +1458,52 @@
     background: var(--color-fill-brand);
   }
 }
+@layer components {
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--badge-gap, 0.25rem);
+    border-radius: var(--badge-border-radius, 625rem);
+    font-family: var(--badge-font-family, inherit);
+    font-weight: var(--badge-font-weight, 700);
+    white-space: nowrap;
+    background: var(--badge-default-container-background);
+    color: var(--badge-default-text-color);
+    font-size: var(--badge-font-size-md);
+    line-height: var(--badge-line-height-md);
+    padding-inline: var(--badge-padding-inline-md);
+    padding-block: var(--badge-padding-block-md);
+  }
+
+  /* ── Sizes ── */
+
+  .badge.sm {
+    font-size: var(--badge-font-size-sm);
+    line-height: var(--badge-line-height-sm);
+    padding-inline: var(--badge-padding-inline-sm);
+    padding-block: var(--badge-padding-block-sm);
+  }
+
+  /* ── Variants ── */
+
+  .badge.brand {
+    background: var(--badge-brand-container-background);
+    color: var(--badge-brand-text-color);
+  }
+
+  .badge.success {
+    background: var(--badge-success-container-background);
+    color: var(--badge-success-text-color);
+  }
+
+  .badge.danger {
+    background: var(--badge-danger-container-background);
+    color: var(--badge-danger-text-color);
+  }
+
+  /* ── Icon slot ── */
+
+  .badge > .icon {
+    flex: 0 0 auto;
+  }
+}