@usefragments/ui 1.5.4 → 1.7.0

package/src/components/Checkbox/Checkbox.module.scss

@@ -1,18 +1,23 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
-
-$fui-checkbox-radius: 0.25rem !default;
+@use "../../recipes/boolean-range" as boolean;
+@use "../../recipes/field" as field;
+@use "../../recipes/target" as target;
 
 // Wrapper for checkbox + label
 .wrapper {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--fui-space-2, $fui-space-2);
   cursor: pointer;
-  font-family: var(--fui-font-sans, $fui-font-sans);
 
-  &[data-has-description] {
-    align-items: flex-start;
+  &[data-size="sm"] {
+    @include boolean.row("sm");
+  }
+
+  &[data-size="md"] {
+    @include boolean.row("md");
+  }
+
+  &[data-size="lg"] {
+    @include boolean.row("lg");
   }
 
   &[data-disabled] {
@@ -24,19 +29,18 @@ $fui-checkbox-radius: 0.25rem !default;
 // The checkbox box itself
 .checkbox {
   @include interactive-base;
+  @include boolean.mark("md");
+  @include target.hit-area("micro");
 
-  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   box-sizing: border-box;
-  width: var(--fui-icon-sm, $fui-icon-sm);
-  height: var(--fui-icon-sm, $fui-icon-sm);
-  margin-top: 0;
+  margin-block-start: var(--_fui-boolean-mark-offset, 0);
   background-color: var(--fui-field-bg, $fui-bg-elevated);
-  border: 1px solid var(--fui-field-border, $fui-border-strong);
-  border-radius: var(--fui-checkbox-radius, $fui-checkbox-radius);
+  border: var(--fui-stroke-hairline, 1px) solid var(--fui-field-border, $fui-border-strong);
+  border-radius: var(--fui-checkbox-radius, var(--fui-radius-sm, #{$fui-radius-sm}));
   cursor: inherit;
 
   &:hover:not([data-disabled]) {
@@ -45,21 +49,15 @@ $fui-checkbox-radius: 0.25rem !default;
 
   &[data-checked],
   &[data-indeterminate] {
-    background-color: var(--fui-button-primary-base, $fui-color-accent);
-    border-color: var(
-      --fui-button-primary-border,
-      var(--fui-button-primary-base, #{$fui-color-accent})
-    );
+    background-color: var(--fui-control-checked-bg, $fui-color-accent);
+    border-color: var(--fui-control-checked-border, $fui-color-accent);
     box-shadow: inset 0 1px 0 color-mix(in srgb, white 24%, transparent);
   }
 
   &[data-checked]:hover:not([data-disabled]),
   &[data-indeterminate]:hover:not([data-disabled]) {
-    background-color: var(--fui-button-primary-hover, $fui-color-accent);
-    border-color: var(
-      --fui-button-primary-border-hover,
-      var(--fui-button-primary-hover, #{$fui-color-accent})
-    );
+    background-color: var(--fui-control-checked-bg-hover, $fui-color-accent-hover);
+    border-color: var(--fui-control-checked-border-hover, $fui-color-accent-hover);
   }
 
   &[data-invalid] {
@@ -73,23 +71,11 @@ $fui-checkbox-radius: 0.25rem !default;
     box-shadow: inset 0 0 0 1px
       color-mix(in srgb, var(--fui-color-danger-text, #{$fui-color-danger-text}) 35%, transparent);
   }
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: var(--fui-target-size-min, $fui-target-size-min);
-    height: var(--fui-target-size-min, $fui-target-size-min);
-    transform: translate(-50%, -50%);
-  }
 }
 
 // Size variants
 .sm {
-  width: var(--fui-icon-xs, $fui-icon-xs);
-  height: var(--fui-icon-xs, $fui-icon-xs);
-  border-radius: var(--fui-checkbox-radius, $fui-checkbox-radius);
+  @include boolean.mark("sm");
 }
 
 .md {
@@ -97,8 +83,8 @@ $fui-checkbox-radius: 0.25rem !default;
 }
 
 .lg {
-  width: 1.25rem;
-  height: 1.25rem;
+  @include boolean.mark("lg");
+  @include target.hit-area("compact");
 }
 
 // Indicator (checkmark or dash)
@@ -106,24 +92,40 @@ $fui-checkbox-radius: 0.25rem !default;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--fui-button-primary-color, #fff);
+  color: var(--fui-control-checked-color, $fui-color-on-accent);
 
   svg {
-    width: 0.75rem;
-    height: 0.75rem;
+    width: var(--fui-icon-xs, $fui-icon-xs);
+    height: var(--fui-icon-xs, $fui-icon-xs);
   }
 
-  // Animation
+  // Animation: the mark draws itself in (stroke-dashoffset over the
+  // pathLength-normalized glyphs) instead of popping. Opacity keeps the
+  // un-draw exit from lingering.
   opacity: 0;
-  transform: scale(0.8);
-  transition:
-    opacity var(--fui-transition-fast, $fui-transition-fast),
-    transform var(--fui-transition-fast, $fui-transition-fast);
+  transition: opacity var(--fui-transition-fast, $fui-transition-fast);
+
+  svg :is(polyline, line) {
+    stroke-dasharray: 24;
+    stroke-dashoffset: 24;
+    transition: stroke-dashoffset var(--fui-transition-normal, $fui-transition-normal);
+  }
 
   [data-checked] > &,
   [data-indeterminate] > & {
     opacity: 1;
-    transform: scale(1);
+
+    svg :is(polyline, line) {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+
+    svg :is(polyline, line) {
+      transition: none;
+    }
   }
 
   [data-invalid][data-checked] > &,
@@ -134,42 +136,28 @@ $fui-checkbox-radius: 0.25rem !default;
 
 // Size variant indicators
 .sm .indicator svg {
-  width: 0.625rem;
-  height: 0.625rem;
+  width: var(--fui-icon-xs, $fui-icon-xs);
+  height: var(--fui-icon-xs, $fui-icon-xs);
 }
 
 .lg .indicator svg {
-  width: 0.875rem;
-  height: 0.875rem;
+  width: var(--fui-icon-md, $fui-icon-md);
+  height: var(--fui-icon-md, $fui-icon-md);
 }
 
 // Label content
 .content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--fui-space-0-5, $fui-space-0-5);
+  min-inline-size: 0;
 }
 
 .label {
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   color: var(--fui-text-primary, $fui-text-primary);
-  line-height: var(--fui-line-height-tight, $fui-line-height-tight);
   user-select: none;
 }
 
-.labelSm {
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
-}
-
-.labelLg {
-  font-size: var(--fui-font-size-base, $fui-font-size-base);
-}
-
 .helper {
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
-  color: var(--fui-text-secondary, $fui-text-secondary);
-  line-height: var(--fui-line-height-normal, $fui-line-height-normal);
+  display: block;
+  @include field.helper;
 }
 
 // ============================================
@@ -178,18 +166,9 @@ $fui-checkbox-radius: 0.25rem !default;
 // styling reacts to the same control state the rest of the component uses.
 // ============================================
 .wrapperCard {
-  display: flex;
-  align-items: center;
-  gap: var(--fui-space-3, $fui-space-3);
   width: 100%;
-  height: var(
-    --fui-input-height,
-    $fui-input-height
-  ); // matches Input size="md" so checkbox cards align with form fields
-  box-sizing: border-box;
-  padding: 0 var(--fui-space-3, $fui-space-3);
   border-radius: var(--fui-radius-md, $fui-radius-md);
-  border: 1px solid var(--fui-border-default, $fui-border-default);
+  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border-default, $fui-border-default);
   background: transparent;
   transition:
     background var(--fui-transition-fast, $fui-transition-fast),
@@ -203,27 +182,35 @@ $fui-checkbox-radius: 0.25rem !default;
 
   &:focus-within:not([data-disabled]) {
     @include focus-ring;
-    border-color: var(--fui-button-primary-base, $fui-color-accent);
+    border-color: var(--fui-control-checked-border, $fui-color-accent);
   }
 
   &:has([data-checked]),
   &:has([data-indeterminate]) {
     background: color-mix(
       in srgb,
-      var(--fui-button-primary-base, #{$fui-color-accent}) 13%,
+      var(--fui-control-checked-bg, #{$fui-color-accent}) 13%,
       transparent
     );
     border-color: color-mix(
       in srgb,
-      var(--fui-button-primary-base, #{$fui-color-accent}) 62%,
+      var(--fui-control-checked-border, #{$fui-color-accent}) 62%,
       transparent
     );
     box-shadow: 0 0 0 1px
-      color-mix(in srgb, var(--fui-button-primary-base, #{$fui-color-accent}) 28%, transparent);
+      color-mix(in srgb, var(--fui-control-checked-border, #{$fui-color-accent}) 28%, transparent);
+  }
+
+  &[data-size="sm"] {
+    @include boolean.card("sm");
+  }
+
+  &[data-size="md"] {
+    @include boolean.card("md");
   }
 
-  .label {
-    font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  &[data-size="lg"] {
+    @include boolean.card("lg");
   }
 }
 
@@ -233,12 +220,13 @@ $fui-checkbox-radius: 0.25rem !default;
 
 @media (prefers-contrast: more) {
   .checkbox {
-    border-width: 2px;
     border-color: var(--fui-text-primary, $fui-text-primary);
+    outline: var(--fui-stroke-hairline, 1px) solid var(--fui-text-primary, $fui-text-primary);
+    outline-offset: calc(-1 * var(--fui-stroke-default, 2px));
 
     &[data-checked],
     &[data-indeterminate] {
-      border-color: var(--fui-button-primary-base, $fui-color-accent);
+      border-color: var(--fui-control-checked-border, $fui-color-accent);
     }
 
     &[data-invalid] {

package/src/components/Checkbox/index.tsx

@@ -93,7 +93,9 @@ function CheckIcon() {
       strokeLinejoin="round"
       aria-hidden="true"
     >
-      <polyline points="20 6 9 17 4 12" />
+      {/* Point order = draw order: the mark draws short arm first, then the
+          long stroke. pathLength normalizes the dash budget for the CSS draw. */}
+      <polyline points="4 12 9 17 20 6" pathLength={24} />
     </svg>
   );
 }
@@ -110,7 +112,7 @@ function MinusIcon() {
       strokeLinejoin="round"
       aria-hidden="true"
     >
-      <line x1="5" y1="12" x2="19" y2="12" />
+      <line x1="5" y1="12" x2="19" y2="12" pathLength={24} />
     </svg>
   );
 }
@@ -167,14 +169,6 @@ const CheckboxRoot = React.forwardRef<HTMLButtonElement, CheckboxProps>(function
     .filter(Boolean)
     .join(" ");
 
-  const labelClasses = [
-    styles.label,
-    size === "sm" && styles.labelSm,
-    size === "lg" && styles.labelLg,
-  ]
-    .filter(Boolean)
-    .join(" ");
-
   const wrapperClasses = [styles.wrapper, variant === "card" && styles.wrapperCard, className]
     .filter(Boolean)
     .join(" ");
@@ -204,6 +198,7 @@ const CheckboxRoot = React.forwardRef<HTMLButtonElement, CheckboxProps>(function
         aria-label={ariaLabel}
         aria-labelledby={ariaLabelledBy}
         aria-describedby={ariaDescribedBy}
+        data-size={size}
         className={[checkboxClasses, className].filter(Boolean).join(" ")}
       >
         <BaseCheckbox.Indicator className={styles.indicator} keepMounted>
@@ -219,6 +214,7 @@ const CheckboxRoot = React.forwardRef<HTMLButtonElement, CheckboxProps>(function
       className={wrapperClasses}
       data-disabled={disabled || undefined}
       data-has-description={resolvedHelperText ? true : undefined}
+      data-size={size}
     >
       <BaseCheckbox.Root
         ref={ref}
@@ -239,6 +235,7 @@ const CheckboxRoot = React.forwardRef<HTMLButtonElement, CheckboxProps>(function
         aria-label={ariaLabel}
         aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}
         aria-describedby={mergeAriaIds(ariaDescribedBy, descriptionId)}
+        data-size={size}
         className={checkboxClasses}
       >
         <BaseCheckbox.Indicator className={styles.indicator} keepMounted>
@@ -246,7 +243,7 @@ const CheckboxRoot = React.forwardRef<HTMLButtonElement, CheckboxProps>(function
         </BaseCheckbox.Indicator>
       </BaseCheckbox.Root>
       <div className={[styles.content, contentClassName].filter(Boolean).join(" ")}>
-        <span id={labelId} className={labelClasses}>
+        <span id={labelId} className={styles.label}>
           {label}
         </span>
         {resolvedHelperText && (

package/src/components/Chip/Chip.contract.json

@@ -1,8 +1,8 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "Chip",
-  "description": "Interactive pill-shaped element for filtering, selecting, and tagging. Supports single and multi-select via Chip.Group.",
-  "category": "forms",
+  "description": "Pill control for filtering, multi-select, and removable tags.",
+  "category": "inputs",
   "tags": ["chip", "tag", "filter", "selection", "multi-select", "action"],
   "status": "stable",
   "sourcePath": "src/components/Chip/index.tsx",
@@ -10,7 +10,7 @@
   "propsSummary": [
     "children: node (required)",
     "variant: filled|outlined|outline|soft (default: filled)",
-    "size: xs|sm|md|lg (default: md)",
+    "size: xs|sm|md|lg (default: xs)",
     "selected: boolean (default: false)",
     "icon: node",
     "avatar: node",
@@ -35,7 +35,7 @@
     "size": {
       "type": "enum",
       "description": "Chip size",
-      "default": "md",
+      "default": "xs",
       "required": false,
       "values": ["xs", "sm", "md", "lg"]
     },
@@ -79,76 +79,70 @@
   },
   "usage": {
     "when": [
-      "Filtering content by categories or tags",
-      "Multi-select scenarios like choosing interests or skills",
-      "Toggling options in a compact pill-shaped control",
-      "Displaying removable user-applied filters"
+      "Filtering a list by tag or category",
+      "Multi-select from a compact set",
+      "Showing filters the user can dismiss"
     ],
     "whenNot": [
-      "Display-only status labels (use Badge)",
-      "Navigation between views (use Tabs)",
-      "Binary on/off state (use Switch)",
-      "Primary call-to-action (use Button)"
+      "Read-only status — use Badge",
+      "Switching views — use Tabs",
+      "On/off state — use Switch",
+      "A main call to action — use Button"
     ],
     "guidelines": [
-      "Keep chip labels short (1-3 words)",
-      "Use Chip.Group for multi-select sets with shared state",
-      "Use onRemove only when users should be able to dismiss the chip",
-      "Pair avatar chips with user-related selections (assignees, reviewers)",
-      "Provide an explicit value on Chip when using non-string/custom JSX children inside Chip.Group"
+      "One to three words per chip",
+      "Chip.Group when chips share selection state",
+      "Keep xs for filters and tags; size up only to match a taller control track",
+      "onRemove only when the chip is genuinely dismissible",
+      "Pass an explicit value when children are custom JSX"
     ],
     "accessibility": [
-      "Chips are buttons and use aria-pressed for selection state",
-      "Chip.Group is a grouping wrapper; add role/aria-label when needed for assistive context",
-      "Remove buttons include descriptive aria-label with chip text",
-      "Disabled chips are properly excluded from interaction"
+      "Chips are buttons; selection is reported via aria-pressed",
+      "Add role and aria-label to Chip.Group when the set needs a name",
+      "Remove buttons carry the chip text in their aria-label",
+      "Disabled chips are skipped by keyboard and pointer"
     ]
   },
   "examples": [
     {
-      "name": "Default",
-      "description": "Basic filled chip",
-      "code": "<Chip>Default</Chip>"
+      "name": "Variants",
+      "description": "Tinted, hairline, and accent-soft chrome.",
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Chip variant=\"filled\">Filled</Chip>\n  <Chip variant=\"outlined\">Outlined</Chip>\n  <Chip variant=\"soft\">Soft</Chip>\n</Stack>"
     },
     {
-      "name": "Outline",
-      "description": "Chip with border using the \"outline\" alias for \"outlined\"",
-      "code": "<div style={{ display: 'flex', gap: '8px' }}>\n  <Chip variant=\"outline\">Outline</Chip>\n  <Chip variant=\"outline\" selected>Outline Selected</Chip>\n</div>"
+      "name": "Sizes",
+      "description": "xs for filter rows; larger sizes match taller field tracks.",
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" align=\"center\" wrap>\n  <Chip variant=\"outlined\" size=\"xs\">Extra small</Chip>\n  <Chip variant=\"outlined\" size=\"sm\">Small</Chip>\n  <Chip variant=\"outlined\" size=\"md\">Medium</Chip>\n  <Chip variant=\"outlined\" size=\"lg\">Large</Chip>\n</Stack>"
     },
     {
       "name": "Selected",
-      "description": "Chip in selected state across variants",
-      "code": "<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Chip selected>Filled</Chip>\n  <Chip variant=\"outlined\" selected>Outlined</Chip>\n  <Chip variant=\"soft\" selected>Soft</Chip>\n</Stack>"
+      "description": "All three variants share one selection treatment.",
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Chip selected>Filled</Chip>\n  <Chip variant=\"outlined\" selected>Outlined</Chip>\n  <Chip variant=\"soft\" selected>Soft</Chip>\n</Stack>"
     },
     {
       "name": "With Avatar",
-      "description": "Chip with a leading avatar image",
+      "description": "Leading face, for people-shaped selections.",
       "code": "<Chip avatar={<img src=\"https://i.pravatar.cc/32?u=chip\" alt=\"\" />}>\n  Jane Doe\n</Chip>"
     },
     {
       "name": "With Remove",
-      "description": "Removable chip with dismiss button",
-      "code": "<div style={{ display: 'flex', gap: '8px' }}>\n  <Chip onRemove={() => {}}>React</Chip>\n  <Chip onRemove={() => {}}>TypeScript</Chip>\n  <Chip onRemove={() => {}}>SCSS</Chip>\n</div>"
-    },
-    {
-      "name": "Selected Removable",
-      "description": "Selected removable chips retain the shared selection treatment across variants",
-      "code": "<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Chip selected onRemove={() => {}}>Filled</Chip>\n  <Chip variant=\"outlined\" selected onRemove={() => {}}>Outlined</Chip>\n  <Chip variant=\"soft\" selected onRemove={() => {}}>Soft</Chip>\n</Stack>"
+      "description": "Trailing dismiss button clears the tag.",
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Chip variant=\"outlined\" onRemove={() => {}}>React</Chip>\n  <Chip variant=\"outlined\" selected onRemove={() => {}}>TypeScript</Chip>\n  <Chip variant=\"soft\" onRemove={() => {}}>SCSS</Chip>\n</Stack>"
     },
     {
       "name": "Chip Group",
-      "description": "Multi-select chip set with shared state",
+      "description": "Selection state is held by the group, not each chip.",
       "code": "<Chip.Group defaultValue={['react']}>\n  <Chip value=\"react\">React</Chip>\n  <Chip value=\"vue\">Vue</Chip>\n  <Chip value=\"angular\">Angular</Chip>\n  <Chip value=\"svelte\">Svelte</Chip>\n</Chip.Group>"
     },
     {
       "name": "Chip Group with Custom Labels",
-      "description": "Use explicit values when chip labels are custom JSX",
+      "description": "Custom JSX children need an explicit value.",
       "code": "<Chip.Group aria-label=\"Assignees\">\n  <Chip value=\"jane\">\n    <span>Jane Doe</span>\n  </Chip>\n  <Chip value=\"sam\">\n    <span>Sam Lee</span>\n  </Chip>\n</Chip.Group>"
     },
     {
       "name": "Disabled",
-      "description": "Chip in disabled state",
-      "code": "<div style={{ display: 'flex', gap: '8px' }}>\n  <Chip disabled>Disabled</Chip>\n  <Chip disabled selected>Disabled Selected</Chip>\n</div>"
+      "description": "Dimmed and unreachable, selected or not.",
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Chip variant=\"outlined\" disabled>Disabled</Chip>\n  <Chip variant=\"outlined\" disabled selected>Disabled selected</Chip>\n</Stack>"
     }
   ],
   "relations": [
@@ -172,7 +166,7 @@
     "propsSummary": [
       "children: ReactNode - chip label (required)",
       "variant: filled|outlined|outline|soft - visual style",
-      "size: sm|md - chip size",
+      "size: xs|sm|md|lg - chip size (xs by default)",
       "selected: boolean - selection state",
       "icon/avatar: ReactNode - leading visual",
       "onRemove: () => void - makes chip removable",

package/src/components/Chip/Chip.module.scss

@@ -1,5 +1,7 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../recipes/action";
+@use "../../recipes/layout";
 
 @mixin selected-surface {
   background-color: var(--fui-field-selection-bg, $fui-bg-hover);
@@ -11,23 +13,18 @@
 
   &:active:not(:disabled) {
     background-color: var(--fui-field-selection-bg-hover, $fui-bg-hover);
-    box-shadow: inset 0 0 0 1px var(--fui-field-selection-border, $fui-border-strong);
+    box-shadow: inset 0 0 0 var(--fui-stroke-hairline, 1px)
+      var(--fui-field-selection-border, $fui-border-strong);
   }
 }
 
 .chip {
   @include button-reset;
   @include interactive-base;
+  @include action.base;
 
-  display: inline-flex;
-  align-items: center;
-  gap: var(--fui-space-1, $fui-space-1);
   border-radius: var(--fui-radius-full, $fui-radius-full);
-  font-family: var(--fui-font-sans, $fui-font-sans);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
-  line-height: 1;
   white-space: nowrap;
-  user-select: none;
 }
 
 .withRemove {
@@ -37,28 +34,19 @@
 
 // Sizes
 .xs {
-  min-height: var(--fui-target-size-min, $fui-target-size-min);
-  padding: 0 var(--fui-space-1, $fui-space-1);
-  font-size: var(--fui-font-size-2xs, $fui-font-size-2xs);
-  gap: var(--fui-space-0-5, $fui-space-0-5);
+  @include action.size("micro");
 }
 
 .sm {
-  min-height: var(--fui-button-height-sm, $fui-button-height-sm);
-  padding: 0 var(--fui-space-2, $fui-space-2);
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+  @include action.size("sm");
 }
 
 .md {
-  min-height: var(--fui-button-height-md, $fui-button-height-md);
-  padding: 0 var(--fui-space-3, $fui-space-3);
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  @include action.size("md");
 }
 
 .lg {
-  min-height: var(--fui-button-height-lg, $fui-button-height-lg);
-  padding: 0 var(--fui-space-4, $fui-space-4);
-  font-size: var(--fui-font-size-base, $fui-font-size-base);
+  @include action.size("lg");
 }
 
 // Variants
@@ -82,7 +70,7 @@
 .outlined {
   background-color: transparent;
   color: var(--fui-text-primary, $fui-text-primary);
-  border: 1px solid var(--fui-border, $fui-border);
+  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
 
   &:hover:not(:disabled) {
     background-color: var(--fui-bg-hover, $fui-bg-hover);
@@ -120,7 +108,6 @@
 .avatar {
   display: flex;
   align-items: center;
-  margin-left: calc(-1 * var(--fui-space-1, $fui-space-1));
 
   img {
     width: var(--fui-icon-md, $fui-icon-md);
@@ -159,29 +146,31 @@
 .remove {
   @include button-reset;
   @include interactive-base;
+  @include action.base;
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 var(--fui-space-1, $fui-space-1);
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
   color: var(--fui-text-secondary, $fui-text-secondary);
-  line-height: 1;
   border-top-right-radius: var(--fui-radius-full, $fui-radius-full);
   border-bottom-right-radius: var(--fui-radius-full, $fui-radius-full);
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   background-color: transparent;
-  border: 1px solid transparent;
+  border: var(--fui-stroke-hairline, 1px) solid transparent;
   border-left-color: var(--fui-border, $fui-border);
 
-  .xs & {
-    font-size: var(--fui-font-size-2xs, $fui-font-size-2xs);
-    padding: 0 var(--fui-space-0-5, $fui-space-0-5);
+  .removableChip[data-size="xs"] & {
+    @include action.icon-only("micro");
   }
 
-  .sm & {
-    font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+  .removableChip[data-size="sm"] & {
+    @include action.icon-only("sm");
+  }
+
+  .removableChip[data-size="md"] & {
+    @include action.icon-only("md");
+  }
+
+  .removableChip[data-size="lg"] & {
+    @include action.icon-only("lg");
   }
 
   &:hover:not(:disabled) {
@@ -237,5 +226,5 @@
 .group {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--fui-space-2, $fui-space-2);
+  gap: layout.gap("sm");
 }