prime-ui-kit 0.5.1 → 0.7.1

package/src/components/popover/examples/states.tsx

@@ -10,11 +10,11 @@ export default function PopoverStatesExample() {
     <div className={styles.sizesRow}>
       <Popover.Root defaultOpen>
         <Popover.Trigger asChild>
-          <Button.Root mode="stroke" size="m" variant="neutral">
+          <Button.Root mode="stroke" variant="neutral">
             Starts open
           </Button.Root>
         </Popover.Trigger>
-        <Popover.Content align="start" insetGap="x3" insetPadding="x2" side="bottom" size="m">
+        <Popover.Content align="start" side="bottom">
           <p className={styles.panelTextMuted}>
             <code>defaultOpen</code> on the root — initial open state without lifting state up.
           </p>
@@ -23,11 +23,11 @@ export default function PopoverStatesExample() {
 
       <Popover.Root>
         <Popover.Trigger asChild>
-          <Button.Root disabled mode="stroke" size="m" variant="neutral">
+          <Button.Root disabled mode="stroke" variant="neutral">
             Trigger disabled
           </Button.Root>
         </Popover.Trigger>
-        <Popover.Content align="start" insetGap="x3" insetPadding="x2" side="bottom" size="m">
+        <Popover.Content align="start" side="bottom">
           <p className={styles.panelTextMuted}>Panel never opens while the button is disabled.</p>
         </Popover.Content>
       </Popover.Root>

package/src/components/progress-bar/examples/indeterminate-busy-state.tsx

@@ -12,7 +12,7 @@ export default function ProgressBarIndeterminateBusyExample() {
       <Typography.Root variant="body-small" tone="muted">
         Preparing your workspace…
       </Typography.Root>
-      <Button.Root type="button" loading variant="neutral" mode="stroke" size="m">
+      <Button.Root type="button" loading variant="neutral" mode="stroke">
         <Button.Spinner />
         Please wait
       </Button.Root>

package/src/components/progress-bar/examples/step-progress.tsx

@@ -16,7 +16,6 @@ export default function ProgressBarStepProgressExample() {
         value={currentStep}
         max={totalSteps}
         label={`Step ${currentStep} of ${totalSteps}`}
-        size="m"
       />
     </div>
   );

package/src/components/progress-bar/examples/upload-progress.tsx

@@ -13,7 +13,7 @@ export default function ProgressBarUploadExample() {
       <Typography.Root variant="body-small" tone="muted">
         quarterly-report.pdf
       </Typography.Root>
-      <ProgressBar.Root value={loaded} max={total} label={`Upload progress: ${loaded}%`} size="m" />
+      <ProgressBar.Root value={loaded} max={total} label={`Upload progress: ${loaded}%`} />
       <div className={s.actions}>
         <button type="button" onClick={() => setLoaded((n) => Math.max(0, n - 20))}>
           −20%

package/src/components/progress-bar/examples/wizard-composition.tsx

@@ -9,7 +9,7 @@ export default function ProgressBarWizardCompositionExample() {
       <Typography.Root variant="body-large" weight="semibold">
         Generating report
       </Typography.Root>
-      <ProgressBar.Root value={72} max={100} label="Collecting data" size="m" />
+      <ProgressBar.Root value={72} max={100} label="Collecting data" />
       <Typography.Root variant="body-small" tone="muted">
         Usually under five minutes; you can return to the task list.
       </Typography.Root>

package/src/components/progress-circle/examples/a11y-label.tsx

@@ -15,7 +15,7 @@ export default function A11yLabelExample() {
         alignItems: "center",
       }}
     >
-      <ProgressCircle.Root value={62} max={100} size="m" label="Data sync, 62 percent complete" />
+      <ProgressCircle.Root value={62} max={100} label="Data sync, 62 percent complete" />
       <div
         style={{
           display: "flex",

package/src/components/progress-circle/examples/composition.tsx

@@ -43,7 +43,7 @@ export default function CompositionExample() {
           </Typography.Root>
         </div>
       </ProgressCircle.Root>
-      <ProgressCircle.Root value={65} max={100} size="m">
+      <ProgressCircle.Root value={65} max={100}>
         <div
           style={{
             display: "flex",
@@ -52,7 +52,7 @@ export default function CompositionExample() {
             gap: "var(--prime-sys-spacing-xs)",
           }}
         >
-          <IconDownload size="m" aria-hidden />
+          <IconDownload aria-hidden />
           <Typography.Root as="span" variant="body-compact" weight="medium">
             65%
           </Typography.Root>

package/src/components/progress-circle/examples/dashboard-ring.tsx

@@ -19,12 +19,7 @@ export default function DashboardRingExample() {
             paddingBlock: "var(--prime-sys-spacing-s)",
           }}
         >
-          <ProgressCircle.Root
-            value={68}
-            max={100}
-            size="m"
-            label="Quarter target, 68 percent complete"
-          >
+          <ProgressCircle.Root value={68} max={100} label="Quarter target, 68 percent complete">
             <Typography.Root as="span" variant="body-small" weight="medium">
               68%
             </Typography.Root>

package/src/components/progress-circle/examples/max-scale.tsx

@@ -22,7 +22,7 @@ export default function MaxScaleExample() {
         <Typography.Root as="span" variant="body-compact" tone="muted">
           45 of 100
         </Typography.Root>
-        <ProgressCircle.Root value={45} max={100} size="m">
+        <ProgressCircle.Root value={45} max={100}>
           45%
         </ProgressCircle.Root>
       </div>
@@ -37,7 +37,7 @@ export default function MaxScaleExample() {
         <Typography.Root as="span" variant="body-compact" tone="muted">
           3 of 5 steps
         </Typography.Root>
-        <ProgressCircle.Root value={3} max={5} size="m">
+        <ProgressCircle.Root value={3} max={5}>
           3/5
         </ProgressCircle.Root>
       </div>
@@ -52,7 +52,7 @@ export default function MaxScaleExample() {
         <Typography.Root as="span" variant="body-compact" tone="muted">
           750 of 1000
         </Typography.Root>
-        <ProgressCircle.Root value={750} max={1000} size="m">
+        <ProgressCircle.Root value={750} max={1000}>
           75%
         </ProgressCircle.Root>
       </div>

package/src/components/progress-circle/examples/states.tsx

@@ -26,9 +26,7 @@ export default function StatesExample() {
         <Typography.Root as="span" variant="body-compact" tone="muted">
           value 0
         </Typography.Root>
-        <ProgressCircle.Root value={0} size="m">
-          0%
-        </ProgressCircle.Root>
+        <ProgressCircle.Root value={0}>0%</ProgressCircle.Root>
       </div>
       <div
         style={{
@@ -41,9 +39,7 @@ export default function StatesExample() {
         <Typography.Root as="span" variant="body-compact" tone="muted">
           value 50
         </Typography.Root>
-        <ProgressCircle.Root value={50} size="m">
-          50%
-        </ProgressCircle.Root>
+        <ProgressCircle.Root value={50}>50%</ProgressCircle.Root>
       </div>
       <div
         style={{
@@ -56,9 +52,7 @@ export default function StatesExample() {
         <Typography.Root as="span" variant="body-compact" tone="muted">
           value 100
         </Typography.Root>
-        <ProgressCircle.Root value={100} size="m">
-          100%
-        </ProgressCircle.Root>
+        <ProgressCircle.Root value={100}>100%</ProgressCircle.Root>
       </div>
       <div
         style={{
@@ -71,9 +65,7 @@ export default function StatesExample() {
         <Typography.Root as="span" variant="body-compact" tone="muted">
           value −20 → 0
         </Typography.Root>
-        <ProgressCircle.Root value={-20} size="m">
-          clamp
-        </ProgressCircle.Root>
+        <ProgressCircle.Root value={-20}>clamp</ProgressCircle.Root>
       </div>
       <div
         style={{
@@ -86,7 +78,7 @@ export default function StatesExample() {
         <Typography.Root as="span" variant="body-compact" tone="muted">
           value 140, max 100
         </Typography.Root>
-        <ProgressCircle.Root value={140} max={100} size="m">
+        <ProgressCircle.Root value={140} max={100}>
           full
         </ProgressCircle.Root>
       </div>

package/src/components/radio/examples/notification-channel.tsx

@@ -11,15 +11,15 @@ export default function NotificationChannelExample() {
         Choose one primary channel for account and login notices.
       </p>
       <div className={styles.columnTight}>
-        <Radio.Root name="security-alert-example" value="email" defaultChecked size="m">
+        <Radio.Root name="security-alert-example" value="email" defaultChecked>
           <Radio.Label>Email</Radio.Label>
           <Radio.Hint>Sent to your verified address immediately.</Radio.Hint>
         </Radio.Root>
-        <Radio.Root name="security-alert-example" value="sms" size="m">
+        <Radio.Root name="security-alert-example" value="sms">
           <Radio.Label>SMS</Radio.Label>
           <Radio.Hint>Requires a phone number on file.</Radio.Hint>
         </Radio.Root>
-        <Radio.Root name="security-alert-example" value="app" size="m">
+        <Radio.Root name="security-alert-example" value="app">
           <Radio.Label>Mobile app only</Radio.Label>
           <Radio.Hint>No email or SMS; push when the app is installed.</Radio.Hint>
         </Radio.Root>

package/src/components/radio/examples/plan-picker.tsx

@@ -13,7 +13,6 @@ export default function PlanPickerExample() {
         <Radio.Root
           name="plan-example"
           value="starter"
-          size="m"
           checked={plan === "starter"}
           onChange={(e) => {
             if (e.currentTarget.checked) setPlan("starter");
@@ -25,7 +24,6 @@ export default function PlanPickerExample() {
         <Radio.Root
           name="plan-example"
           value="growth"
-          size="m"
           checked={plan === "growth"}
           onChange={(e) => {
             if (e.currentTarget.checked) setPlan("growth");
@@ -37,7 +35,6 @@ export default function PlanPickerExample() {
         <Radio.Root
           name="plan-example"
           value="scale"
-          size="m"
           checked={plan === "scale"}
           onChange={(e) => {
             if (e.currentTarget.checked) setPlan("scale");

package/src/components/radio/examples/settings-group.tsx

@@ -8,19 +8,19 @@ export default function SettingsGroupExample() {
     <fieldset className={styles.fieldsetPlain}>
       <legend className={styles.legend}>Appearance</legend>
       <div className={styles.columnTight}>
-        <Radio.Root name="theme-example" value="light" defaultChecked size="m">
+        <Radio.Root name="theme-example" value="light" defaultChecked>
           <Radio.Label>Light</Radio.Label>
           <Radio.Hint>Best for bright environments.</Radio.Hint>
         </Radio.Root>
-        <Radio.Root name="theme-example" value="dark" size="m">
+        <Radio.Root name="theme-example" value="dark">
           <Radio.Label>Dark</Radio.Label>
           <Radio.Hint>Reduced glare in low light.</Radio.Hint>
         </Radio.Root>
-        <Radio.Root name="theme-example" value="system" size="m">
+        <Radio.Root name="theme-example" value="system">
           <Radio.Label>Match system</Radio.Label>
           <Radio.Hint>Follows your OS light/dark schedule.</Radio.Hint>
         </Radio.Root>
-        <Radio.Root name="theme-example" value="contrast" size="m" disabled>
+        <Radio.Root name="theme-example" value="contrast" disabled>
           <Radio.Label>High contrast</Radio.Label>
           <Radio.Hint>Available on Enterprise; contact sales to enable.</Radio.Hint>
         </Radio.Root>

package/src/components/radio/examples/shipping-method.tsx

@@ -8,15 +8,15 @@ export default function ShippingMethodExample() {
     <fieldset className={styles.fieldsetPlain}>
       <legend className={styles.legend}>Shipping method</legend>
       <div className={styles.columnTight}>
-        <Radio.Root name="shipping-example" value="standard" defaultChecked size="m">
+        <Radio.Root name="shipping-example" value="standard" defaultChecked>
           <Radio.Label>Standard (5–7 business days)</Radio.Label>
           <Radio.Hint>Free on orders over $50.</Radio.Hint>
         </Radio.Root>
-        <Radio.Root name="shipping-example" value="express" size="m">
+        <Radio.Root name="shipping-example" value="express">
           <Radio.Label>Express (2 business days)</Radio.Label>
           <Radio.Hint>Flat rate; tracking included.</Radio.Hint>
         </Radio.Root>
-        <Radio.Root name="shipping-example" value="pickup" size="m">
+        <Radio.Root name="shipping-example" value="pickup">
           <Radio.Label>Pick up in store</Radio.Label>
           <Radio.Hint>Ready next day at your selected location.</Radio.Hint>
         </Radio.Root>

package/src/components/segmented-control/examples/canonical-composition.tsx

@@ -18,22 +18,22 @@ export default function CanonicalCompositionExample() {
         alignItems: "flex-start",
       }}
     >
-      <SegmentedControl.Root defaultValue="light" size="m">
+      <SegmentedControl.Root defaultValue="light">
         <SegmentedControl.Item value="light">
           <SegmentedControl.Icon>
-            <Icon name="theme.light" size="m" />
+            <Icon name="theme.light" />
           </SegmentedControl.Icon>
           Light
         </SegmentedControl.Item>
         <SegmentedControl.Item value="dark">
           <SegmentedControl.Icon>
-            <Icon name="theme.dark" size="m" />
+            <Icon name="theme.dark" />
           </SegmentedControl.Icon>
           Dark
         </SegmentedControl.Item>
       </SegmentedControl.Root>
 
-      <SegmentedControl.Root value={period} onValueChange={setPeriod} size="m">
+      <SegmentedControl.Root value={period} onValueChange={setPeriod}>
         <SegmentedControl.Item value="day">Day</SegmentedControl.Item>
         <SegmentedControl.Item value="week">Week</SegmentedControl.Item>
         <SegmentedControl.Item value="month">Month</SegmentedControl.Item>
@@ -50,16 +50,16 @@ export default function CanonicalCompositionExample() {
         <Typography.Root as="span" variant="body-compact" tone="muted">
           Layout preview
         </Typography.Root>
-        <SegmentedControl.Root defaultValue="grid" size="m">
+        <SegmentedControl.Root defaultValue="grid">
           <SegmentedControl.Item value="feed">
             <SegmentedControl.Icon>
-              <Icon name="nav.home" size="m" />
+              <Icon name="nav.home" />
             </SegmentedControl.Icon>
             <span className={styles.visuallyHidden}>Feed</span>
           </SegmentedControl.Item>
           <SegmentedControl.Item value="grid">
             <SegmentedControl.Icon>
-              <Icon name="nav.layoutGrid" size="m" />
+              <Icon name="nav.layoutGrid" />
             </SegmentedControl.Icon>
             <span className={styles.visuallyHidden}>Grid</span>
           </SegmentedControl.Item>

package/src/components/segmented-control/examples/composition.tsx

@@ -10,16 +10,16 @@ export default function SegmentedCompositionExample() {
         <Typography.Root as="span" variant="body-compact" tone="muted">
           Icon and label
         </Typography.Root>
-        <SegmentedControl.Root defaultValue="light" size="m">
+        <SegmentedControl.Root defaultValue="light">
           <SegmentedControl.Item value="light">
             <SegmentedControl.Icon>
-              <Icon name="theme.light" size="m" />
+              <Icon name="theme.light" />
             </SegmentedControl.Icon>
             Light
           </SegmentedControl.Item>
           <SegmentedControl.Item value="dark">
             <SegmentedControl.Icon>
-              <Icon name="theme.dark" size="m" />
+              <Icon name="theme.dark" />
             </SegmentedControl.Icon>
             Dark
           </SegmentedControl.Item>
@@ -29,22 +29,22 @@ export default function SegmentedCompositionExample() {
         <Typography.Root as="span" variant="body-compact" tone="muted">
           Icon-only + visually hidden text
         </Typography.Root>
-        <SegmentedControl.Root defaultValue="grid" size="m">
+        <SegmentedControl.Root defaultValue="grid">
           <SegmentedControl.Item value="feed">
             <SegmentedControl.Icon>
-              <Icon name="nav.home" size="m" />
+              <Icon name="nav.home" />
             </SegmentedControl.Icon>
             <span className={styles.visuallyHidden}>Feed</span>
           </SegmentedControl.Item>
           <SegmentedControl.Item value="grid">
             <SegmentedControl.Icon>
-              <Icon name="nav.layoutGrid" size="m" />
+              <Icon name="nav.layoutGrid" />
             </SegmentedControl.Icon>
             <span className={styles.visuallyHidden}>Grid</span>
           </SegmentedControl.Item>
           <SegmentedControl.Item value="compact">
             <SegmentedControl.Icon>
-              <Icon name="theme.light" size="m" />
+              <Icon name="theme.light" />
             </SegmentedControl.Icon>
             <span className={styles.visuallyHidden}>Compact</span>
           </SegmentedControl.Item>

package/src/components/segmented-control/examples/features.tsx

@@ -10,7 +10,7 @@ export default function SegmentedFeaturesExample() {
         <Typography.Root as="span" variant="body-compact" tone="muted">
           Two segments
         </Typography.Root>
-        <SegmentedControl.Root defaultValue="all" size="m">
+        <SegmentedControl.Root defaultValue="all">
           <SegmentedControl.Item value="all">All tasks</SegmentedControl.Item>
           <SegmentedControl.Item value="mine">Mine</SegmentedControl.Item>
         </SegmentedControl.Root>
@@ -19,7 +19,7 @@ export default function SegmentedFeaturesExample() {
         <Typography.Root as="span" variant="body-compact" tone="muted">
           Three segments
         </Typography.Root>
-        <SegmentedControl.Root defaultValue="day" size="m">
+        <SegmentedControl.Root defaultValue="day">
           <SegmentedControl.Item value="day">Today</SegmentedControl.Item>
           <SegmentedControl.Item value="week">Week</SegmentedControl.Item>
           <SegmentedControl.Item value="month">Month</SegmentedControl.Item>
@@ -29,7 +29,7 @@ export default function SegmentedFeaturesExample() {
         <Typography.Root as="span" variant="body-compact" tone="muted">
           Four segments
         </Typography.Root>
-        <SegmentedControl.Root defaultValue="q1" size="m">
+        <SegmentedControl.Root defaultValue="q1">
           <SegmentedControl.Item value="q1">Q1</SegmentedControl.Item>
           <SegmentedControl.Item value="q2">Q2</SegmentedControl.Item>
           <SegmentedControl.Item value="q3">Q3</SegmentedControl.Item>

package/src/components/segmented-control/examples/full-width.tsx

@@ -6,7 +6,7 @@ import styles from "./segmented-examples.module.css";
 export default function SegmentedFullWidthExample() {
   return (
     <div className={styles.fullWidthShelf}>
-      <SegmentedControl.Root defaultValue="day" size="m" className={styles.fullWidthRoot}>
+      <SegmentedControl.Root defaultValue="day" className={styles.fullWidthRoot}>
         <SegmentedControl.Item value="day">Day</SegmentedControl.Item>
         <SegmentedControl.Item value="week">Week</SegmentedControl.Item>
         <SegmentedControl.Item value="month">Month</SegmentedControl.Item>

package/src/components/segmented-control/examples/pricing-toggle.tsx

@@ -27,7 +27,6 @@ export default function PricingToggleExample() {
         onValueChange={(v) => {
           if (isBillingCycle(v)) setCycle(v);
         }}
-        size="m"
       >
         <SegmentedControl.Item value="monthly">Monthly</SegmentedControl.Item>
         <SegmentedControl.Item value="annual">Annual</SegmentedControl.Item>

package/src/components/segmented-control/examples/states.tsx

@@ -10,7 +10,7 @@ export default function SegmentedStatesExample() {
         <Typography.Root as="span" variant="body-compact" tone="muted">
           Default
         </Typography.Root>
-        <SegmentedControl.Root defaultValue="day" size="m">
+        <SegmentedControl.Root defaultValue="day">
           <SegmentedControl.Item value="day">Day</SegmentedControl.Item>
           <SegmentedControl.Item value="week">Week</SegmentedControl.Item>
           <SegmentedControl.Item value="month">Month</SegmentedControl.Item>
@@ -20,7 +20,7 @@ export default function SegmentedStatesExample() {
         <Typography.Root as="span" variant="body-compact" tone="muted">
           One segment disabled
         </Typography.Root>
-        <SegmentedControl.Root defaultValue="active" size="m">
+        <SegmentedControl.Root defaultValue="active">
           <SegmentedControl.Item value="active">Active</SegmentedControl.Item>
           <SegmentedControl.Item value="paused" disabled>
             Paused
@@ -32,7 +32,7 @@ export default function SegmentedStatesExample() {
         <Typography.Root as="span" variant="body-compact" tone="muted">
           Entire control disabled
         </Typography.Root>
-        <SegmentedControl.Root defaultValue="day" disabled size="m">
+        <SegmentedControl.Root defaultValue="day" disabled>
           <SegmentedControl.Item value="day">Day</SegmentedControl.Item>
           <SegmentedControl.Item value="week">Week</SegmentedControl.Item>
           <SegmentedControl.Item value="month">Month</SegmentedControl.Item>

package/src/components/segmented-control/examples/view-mode.tsx

@@ -38,7 +38,6 @@ export default function ViewModeExample() {
           onValueChange={(v) => {
             if (isCatalogView(v)) setView(v);
           }}
-          size="m"
         >
           <SegmentedControl.Item value="list">List</SegmentedControl.Item>
           <SegmentedControl.Item value="grid">Grid</SegmentedControl.Item>

package/src/components/segmented-progress-bar/examples/size-ladder.tsx

@@ -11,7 +11,7 @@ export default function SizeLadderExample() {
   return (
     <>
       <SegmentedProgressBar.Root size="s" segments={segments} />
-      <SegmentedProgressBar.Root size="m" segments={segments} />
+      <SegmentedProgressBar.Root segments={segments} />
       <SegmentedProgressBar.Root size="l" segments={segments} />
       <SegmentedProgressBar.Root size="xl" segments={segments} />
     </>

package/src/components/select/COMPONENT.md

@@ -38,10 +38,10 @@ export function Example() {
 
   return (
     <div>
-      <Label.Root id={labelId} size="m">
+      <Label.Root id={labelId}>
         Department
       </Label.Root>
-      <Select.Root size="m" placeholder="Choose">
+      <Select.Root placeholder="Choose">
         <Select.Trigger aria-labelledby={labelId}>
           <Select.Value />
         </Select.Trigger>
@@ -66,7 +66,7 @@ import { Select } from "prime-ui-kit";
 
 export function NativeExample() {
   return (
-    <Select.Root native size="m" placeholder="Choose">
+    <Select.Root native placeholder="Choose">
       <Select.Item value="a">Option A</Select.Item>
       <Select.Item value="b">Option B</Select.Item>
     </Select.Root>

package/src/components/select/examples/01-country.tsx

@@ -16,10 +16,8 @@ export default function SelectExampleCountry() {
         Select a country for tax and delivery estimates.
       </Typography.Root>
       <div className={styles.field}>
-        <Label.Root id={countryLabelId} size="m">
-          Country or region
-        </Label.Root>
-        <Select.Root size="m" defaultValue="us" placeholder="Choose a country">
+        <Label.Root id={countryLabelId}>Country or region</Label.Root>
+        <Select.Root defaultValue="us" placeholder="Choose a country">
           <Select.Trigger aria-labelledby={countryLabelId}>
             <Select.Value />
           </Select.Trigger>

package/src/components/select/examples/02-controlled.tsx

@@ -13,10 +13,8 @@ export default function SelectExampleControlled() {
   return (
     <div className={styles.stack}>
       <div className={styles.field}>
-        <Label.Root id={tierLabelId} size="m">
-          Subscription tier
-        </Label.Root>
-        <Select.Root size="m" value={tier} onChange={setTier} placeholder="Choose a tier">
+        <Label.Root id={tierLabelId}>Subscription tier</Label.Root>
+        <Select.Root value={tier} onChange={setTier} placeholder="Choose a tier">
           <Select.Trigger aria-labelledby={tierLabelId}>
             <Select.Value />
           </Select.Trigger>

package/src/components/select/examples/03-groups.tsx

@@ -11,10 +11,8 @@ export default function SelectExampleGroups() {
 
   return (
     <div className={styles.field}>
-      <Label.Root id={timezoneLabelId} size="m">
-        Time zone
-      </Label.Root>
-      <Select.Root size="m" defaultValue="utc" placeholder="Select time zone">
+      <Label.Root id={timezoneLabelId}>Time zone</Label.Root>
+      <Select.Root defaultValue="utc" placeholder="Select time zone">
         <Select.Trigger aria-labelledby={timezoneLabelId}>
           <Select.Value />
         </Select.Trigger>

package/src/components/select/examples/04-full-width-form.tsx

@@ -17,10 +17,8 @@ export default function SelectExampleFullWidthForm() {
         Delivery details
       </Typography.Root>
       <div className={styles.fieldFullBleed}>
-        <Label.Root id={nameLabelId} size="m">
-          Full name
-        </Label.Root>
-        <Select.Root size="m" placeholder="How should we address the package?">
+        <Label.Root id={nameLabelId}>Full name</Label.Root>
+        <Select.Root placeholder="How should we address the package?">
           <Select.Trigger aria-labelledby={nameLabelId}>
             <Select.Value />
           </Select.Trigger>
@@ -32,10 +30,8 @@ export default function SelectExampleFullWidthForm() {
         </Select.Root>
       </div>
       <div className={styles.fieldFullBleed}>
-        <Label.Root id={methodLabelId} size="m">
-          Shipping method
-        </Label.Root>
-        <Select.Root size="m" defaultValue="standard" placeholder="Choose shipping">
+        <Label.Root id={methodLabelId}>Shipping method</Label.Root>
+        <Select.Root defaultValue="standard" placeholder="Choose shipping">
           <Select.Trigger aria-labelledby={methodLabelId}>
             <Select.Value />
           </Select.Trigger>

package/src/components/select/examples/pattern-composition.tsx

@@ -7,7 +7,7 @@ import styles from "./examples.module.css";
 export default function SelectPatternCompositionExample() {
   return (
     <div className={`${styles.stack} ${styles.stackNarrow}`}>
-      <Select.Root size="m" defaultValue="eur" placeholder="Report currency">
+      <Select.Root defaultValue="eur" placeholder="Report currency">
         <Select.Trigger>
           <Select.TriggerIcon>
             <Icon name="nav.layoutGrid" size="s" tone="subtle" />

package/src/components/select/examples/pattern-controlled.tsx

@@ -11,7 +11,7 @@ export default function SelectPatternControlledExample() {
 
   return (
     <div className={`${styles.stack} ${styles.stackNarrow}`}>
-      <Select.Root size="m" value={tier} onChange={setTier} placeholder="Tier">
+      <Select.Root value={tier} onChange={setTier} placeholder="Tier">
         <Select.Trigger aria-label="Subscription tier">
           <Select.Value />
         </Select.Trigger>

package/src/components/select/examples/pattern-features.tsx

@@ -5,7 +5,7 @@ const ZONES = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "K"] as const;
 /** Groups, labels, separator, disabled item, long scrollable list; mirrors `playground/snippets/select/features.tsx`. */
 export default function SelectPatternFeaturesExample() {
   return (
-    <Select.Root size="m" placeholder="Zones and groups">
+    <Select.Root placeholder="Zones and groups">
       <Select.Trigger>
         <Select.Value />
       </Select.Trigger>

package/src/components/select/examples/pattern-full-width.tsx

@@ -6,7 +6,7 @@ import styles from "./examples.module.css";
 export default function SelectPatternFullWidthExample() {
   return (
     <div className={styles.fullWidthShell}>
-      <Select.Root size="m" defaultValue="ship" placeholder="Shipping method">
+      <Select.Root defaultValue="ship" placeholder="Shipping method">
         <Select.Trigger>
           <Select.Value />
         </Select.Trigger>

package/src/components/select/examples/pattern-native.tsx

@@ -3,7 +3,7 @@ import { Select } from "@/components/select/Select";
 /** Native `<select>` via `native`; optional `Select.Content` wrapper; mirrors `playground/snippets/select/native.tsx`. */
 export default function SelectPatternNativeExample() {
   return (
-    <Select.Root native size="m" placeholder="Mode">
+    <Select.Root native placeholder="Mode">
       <Select.Content>
         <Select.Item value="auto">Auto</Select.Item>
         <Select.Item value="light">Light</Select.Item>