@usefragments/ui 1.5.3 → 1.6.0

package/src/components/Chart/index.tsx

@@ -1,8 +1,8 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import { mergeAriaIds } from '../../utils/aria';
-import styles from './Chart.module.scss';
+import * as React from "react";
+import { mergeAriaIds } from "../../utils/aria";
+import styles from "./Chart.module.scss";
 
 // ============================================
 // Types (self-owned — no external dependency for types)
@@ -36,10 +36,10 @@ export interface ChartTooltipContentProps {
     payload?: Record<string, unknown>;
   }[];
   label?: string;
-  indicator?: 'dot' | 'line' | 'dashed';
+  indicator?: "dot" | "line" | "dashed";
   hideLabel?: boolean;
   hideIndicator?: boolean;
-  labelFormatter?: (label: string, payload: ChartTooltipContentProps['payload']) => React.ReactNode;
+  labelFormatter?: (label: string, payload: ChartTooltipContentProps["payload"]) => React.ReactNode;
   valueFormatter?: (value: number | string) => string;
 }
 
@@ -69,15 +69,15 @@ function loadChartDeps(): Promise<void> {
   if (!_chartLoadPromise) {
     _chartLoadPromise = (async () => {
       try {
-        const rc = await import('recharts');
+        const rc = await import("recharts");
         _RechartsTooltip = rc.Tooltip as unknown as React.ComponentType<Record<string, unknown>>;
         _RechartsLegend = rc.Legend as unknown as React.ComponentType<Record<string, unknown>>;
       } catch {
         _chartFailed = true;
-        if (process.env.NODE_ENV === 'development') {
+        if (process.env.NODE_ENV === "development") {
           console.warn(
-            '[@usefragments/ui] Chart: recharts is not installed. ' +
-            'Install it with: npm install recharts'
+            "[@usefragments/ui] Chart: recharts is not installed. " +
+              "Install it with: npm install recharts"
           );
         }
       }
@@ -102,7 +102,6 @@ function useChartDeps(): boolean {
   return _RechartsTooltip !== null;
 }
 
-
 // ============================================
 // Context
 // ============================================
@@ -112,7 +111,7 @@ const ChartConfigContext = React.createContext<ChartConfig | null>(null);
 export function useChartConfig() {
   const ctx = React.useContext(ChartConfigContext);
   if (!ctx) {
-    throw new Error('useChartConfig must be used within a <ChartContainer>');
+    throw new Error("useChartConfig must be used within a <ChartContainer>");
   }
   return ctx;
 }
@@ -128,8 +127,8 @@ export function ChartContainer({
   style,
   summary,
   dataTable,
-  'aria-label': ariaLabel,
-  'aria-describedby': ariaDescribedBy,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
   ...htmlProps
 }: ChartContainerProps) {
   const chartId = React.useId();
@@ -145,17 +144,17 @@ export function ChartContainer({
     return vars;
   }, [config]);
 
-  const rootClasses = [styles.container, className].filter(Boolean).join(' ');
+  const rootClasses = [styles.container, className].filter(Boolean).join(" ");
 
   // Inject sizing props into the chart child (recharts API).
   // Only pass `responsive` for custom component types to avoid leaking the
   // prop to intrinsic DOM nodes in test/demo usage.
   const chartChildProps: Record<string, unknown> = {
-    width: '100%',
-    height: '100%',
+    width: "100%",
+    height: "100%",
   };
 
-  if (typeof children.type !== 'string') {
+  if (typeof children.type !== "string") {
     chartChildProps.responsive = true;
   }
 
@@ -171,12 +170,8 @@ export function ChartContainer({
         className={rootClasses}
         style={{ ...cssVars, ...style }}
         role="img"
-        aria-label={ariaLabel || 'Chart'}
-        aria-describedby={mergeAriaIds(
-          ariaDescribedBy,
-          summaryId,
-          dataTableId
-        )}
+        aria-label={ariaLabel || "Chart"}
+        aria-describedby={mergeAriaIds(ariaDescribedBy, summaryId, dataTableId)}
       >
         {chartChild}
         {summaryId && (
@@ -202,7 +197,7 @@ export function ChartTooltipContent({
   active,
   payload,
   label,
-  indicator = 'dot',
+  indicator = "dot",
   hideLabel = false,
   hideIndicator = false,
   labelFormatter,
@@ -212,15 +207,11 @@ export function ChartTooltipContent({
 
   if (!active || !payload?.length) return null;
 
-  const formattedLabel = labelFormatter
-    ? labelFormatter(String(label), payload)
-    : label;
+  const formattedLabel = labelFormatter ? labelFormatter(String(label), payload) : label;
 
   return (
     <div className={styles.tooltip}>
-      {!hideLabel && formattedLabel && (
-        <div className={styles.tooltipLabel}>{formattedLabel}</div>
-      )}
+      {!hideLabel && formattedLabel && <div className={styles.tooltipLabel}>{formattedLabel}</div>}
       <div className={styles.tooltipItems}>
         {payload.map((entry, i) => {
           const key = String(entry.dataKey ?? entry.name ?? i);
@@ -229,20 +220,25 @@ export function ChartTooltipContent({
           const color = entry.color ?? configEntry?.color;
           const displayValue = valueFormatter
             ? valueFormatter(entry.value ?? 0)
-            : String(entry.value ?? '');
+            : String(entry.value ?? "");
 
           const indicatorClass = [
             styles.tooltipIndicator,
-            indicator === 'line' && styles.tooltipIndicatorLine,
-            indicator === 'dashed' && styles.tooltipIndicatorDashed,
-          ].filter(Boolean).join(' ');
+            indicator === "line" && styles.tooltipIndicatorLine,
+            indicator === "dashed" && styles.tooltipIndicatorDashed,
+          ]
+            .filter(Boolean)
+            .join(" ");
 
           return (
             <div key={key} className={styles.tooltipItem}>
               {!hideIndicator && (
                 <span
                   className={indicatorClass}
-                  style={{ backgroundColor: indicator === 'dashed' ? undefined : color, borderColor: color }}
+                  style={{
+                    backgroundColor: indicator === "dashed" ? undefined : color,
+                    borderColor: color,
+                  }}
                 />
               )}
               <span className={styles.tooltipItemLabel}>{displayLabel}</span>
@@ -260,11 +256,11 @@ export function ChartTooltipContent({
 // ============================================
 
 type ChartTooltipProps = {
-  indicator?: 'dot' | 'line' | 'dashed';
+  indicator?: "dot" | "line" | "dashed";
   hideLabel?: boolean;
   hideIndicator?: boolean;
-  labelFormatter?: ChartTooltipContentProps['labelFormatter'];
-  valueFormatter?: ChartTooltipContentProps['valueFormatter'];
+  labelFormatter?: ChartTooltipContentProps["labelFormatter"];
+  valueFormatter?: ChartTooltipContentProps["valueFormatter"];
   content?: React.ReactNode | ((tooltipProps: Record<string, unknown>) => React.ReactNode);
   [key: string]: unknown;
 };
@@ -281,7 +277,6 @@ export function ChartTooltip({
   const chartReady = useChartDeps();
 
   const defaultContent = React.useCallback(
-
     (tooltipProps: Record<string, unknown>) => (
       <ChartTooltipContent
         {...(tooltipProps as ChartTooltipContentProps)}
@@ -292,7 +287,7 @@ export function ChartTooltip({
         valueFormatter={valueFormatter}
       />
     ),
-    [indicator, hideLabel, hideIndicator, labelFormatter, valueFormatter],
+    [indicator, hideLabel, hideIndicator, labelFormatter, valueFormatter]
   );
 
   // Nothing until recharts resolves; nothing at all if it is not installed.
@@ -304,7 +299,7 @@ export function ChartTooltip({
 
   return (
     <RechartsTooltipComponent
-      cursor={{ stroke: 'var(--fui-border)' }}
+      cursor={{ stroke: "var(--fui-border)" }}
       content={content ?? defaultContent}
       {...props}
     />
@@ -323,17 +318,14 @@ export function ChartLegendContent({ payload }: ChartLegendContentProps) {
   return (
     <div className={styles.legend}>
       {payload.map((entry) => {
-        const key = String(entry.dataKey ?? entry.value ?? '');
+        const key = String(entry.dataKey ?? entry.value ?? "");
         const configEntry = config?.[key];
         const label = configEntry?.label ?? entry.value ?? key;
         const color = entry.color ?? configEntry?.color;
 
         return (
           <div key={key} className={styles.legendItem}>
-            <span
-              className={styles.legendDot}
-              style={{ backgroundColor: color }}
-            />
+            <span className={styles.legendDot} style={{ backgroundColor: color }} />
             <span className={styles.legendLabel}>{label}</span>
           </div>
         );
@@ -363,12 +355,7 @@ export function ChartLegend({ content, ...props }: ChartLegendProps) {
 
   const RechartsLegendComponent = _RechartsLegend;
 
-  return (
-    <RechartsLegendComponent
-      content={content ?? defaultContent}
-      {...props}
-    />
-  );
+  return <RechartsLegendComponent content={content ?? defaultContent} {...props} />;
 }
 
 export const Chart = Object.assign(ChartContainer, {

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]) {
@@ -74,22 +78,11 @@ $fui-checkbox-radius: 0.25rem !default;
       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 +90,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)
@@ -109,8 +102,8 @@ $fui-checkbox-radius: 0.25rem !default;
   color: var(--fui-button-primary-color, #fff);
 
   svg {
-    width: 0.75rem;
-    height: 0.75rem;
+    width: var(--fui-icon-xs, $fui-icon-xs);
+    height: var(--fui-icon-xs, $fui-icon-xs);
   }
 
   // Animation
@@ -134,42 +127,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 +157,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),
@@ -222,8 +192,16 @@ $fui-checkbox-radius: 0.25rem !default;
       color-mix(in srgb, var(--fui-button-primary-base, #{$fui-color-accent}) 28%, transparent);
   }
 
-  .label {
-    font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  &[data-size="sm"] {
+    @include boolean.card("sm");
+  }
+
+  &[data-size="md"] {
+    @include boolean.card("md");
+  }
+
+  &[data-size="lg"] {
+    @include boolean.card("lg");
   }
 }
 
@@ -233,8 +211,9 @@ $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] {

package/src/components/Checkbox/index.tsx

@@ -167,14 +167,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 +196,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 +212,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 +233,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 +241,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

@@ -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"]
     },
@@ -93,6 +93,7 @@
     "guidelines": [
       "Keep chip labels short (1-3 words)",
       "Use Chip.Group for multi-select sets with shared state",
+      "Keep the default micro size for filters and tags; opt into a larger size only when the surrounding control track requires it",
       "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"
@@ -172,7 +173,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);
@@ -18,14 +20,9 @@
 .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;
 }
@@ -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");
 }

package/src/components/Chip/index.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import * as React from "react";
-import { useResolvedControlSize } from "../ComponentDefaults";
 import styles from "./Chip.module.scss";
 
 /**
@@ -15,7 +14,7 @@ export interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEle
    * @see https://usefragments.com/components/chip#variants */
   variant?: "filled" | "outlined" | "outline" | "soft";
   /** Chip size.
-   * @default "md" */
+   * @default "xs" */
   size?: "xs" | "sm" | "md" | "lg";
   /** Whether the chip is selected */
   selected?: boolean;
@@ -59,7 +58,7 @@ const ChipBase = React.forwardRef<HTMLButtonElement, ChipProps>(function Chip(
   },
   ref
 ) {
-  const size = useResolvedControlSize(sizeProp);
+  const size = sizeProp ?? "xs";
   // Resolve alias: "outline" → "outlined"
   const variant = variantProp === "outline" ? "outlined" : variantProp;
 
@@ -110,7 +109,7 @@ const ChipBase = React.forwardRef<HTMLButtonElement, ChipProps>(function Chip(
   }
 
   return (
-    <span className={styles.removableChip} data-disabled={disabled || undefined}>
+    <span className={styles.removableChip} data-disabled={disabled || undefined} data-size={size}>
       {chipButton}
       <button
         type="button"