@igne-agency/react-web-ui 0.5.0 → 0.6.0

package/dist/components/switch-field/switch.css

@@ -1,37 +1,38 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._root_1ietq_3 {
+  ._root_1wavl_3 {
     display: inline-flex;
     flex-direction: column;
     align-items: flex-start;
     gap: var(--switch-gap, var(--sys-unit-8));
   }
-  ._label_1ietq_9 {
+  ._label_1wavl_9 {
     cursor: pointer;
   }
-  ._label_1ietq_9:hover ._control_1ietq_12 {
-    border-color: var(--sys-color-primary);
+  ._label_1wavl_9:hover ._control_1wavl_12 {
+    border-color: var(--checkbox-hover-border, var(--sys-color-primary));
   }
-  :where([data-readonly], [data-disabled]) ._label_1ietq_9 {
+  :where([data-readonly], [data-disabled]) ._label_1wavl_9 {
     cursor: default;
   }
-  :where([data-readonly], [data-disabled]) ._label_1ietq_9:hover ._control_1ietq_12:not([data-checked]) {
-    border-color: var(--box-border, var(--sys-color-border));
+  :where([data-readonly], [data-disabled]) ._label_1wavl_9:hover ._control_1wavl_12:not([data-checked]) {
+    border-color: var(--_checkbox-border, var(--checkbox-border, var(--sys-color-border)));
   }
-  ._label_1ietq_9 {
+  ._label_1wavl_9 {
     display: inline-grid;
     grid-template-columns: auto 1fr;
     grid-template-areas: "control text";
     align-items: center;
-    gap: var(--sys-unit-1) var(--sys-unit-6);
+    gap: var(--checkbox-label-row-gap, var(--sys-unit-1)) var(--checkbox-label-gap, var(--sys-unit-6));
+    font: var(--checkbox-label-font, inherit);
   }
-  ._label_1ietq_9:has(> [data-optional-suffix]) {
+  ._label_1wavl_9:has(> [data-optional-suffix]) {
     grid-template-areas: "control text" "control optional";
   }
-  ._label_1ietq_9 {
-    min-block-size: var(--sys-unit-20);
+  ._label_1wavl_9 {
+    min-block-size: var(--switch-label-min-block-size, var(--sys-unit-20));
   }
-  ._control_1ietq_12 {
+  ._control_1wavl_12 {
     --_switch-track-inline-size: var(
     	--switch-track-inline-size,
     	var(--sys-unit-26)
@@ -40,14 +41,24 @@
     	--switch-track-block-size,
     	var(--sys-unit-16)
     );
-    --_switch-track-inset: calc(1px + var(--sys-unit-2));
-    --_switch-thumb-size: calc(
-    	var(--_switch-track-block-size) - 2 *
-    		var(--_switch-track-inset)
+    --_switch-track-inset-x: calc(
+    	var(--switch-border-width, 1px) +
+    		var(--switch-pad-x, var(--sys-unit-2))
+    );
+    --_switch-track-inset-y: calc(
+    	var(--switch-border-width, 1px) +
+    		var(--switch-pad-y, var(--sys-unit-2))
+    );
+    --_switch-thumb-size: var(
+    	--switch-thumb-size,
+    	calc(
+    		var(--_switch-track-block-size) - 2 *
+    			var(--_switch-track-inset-y)
+    	)
     );
     --_switch-travel: calc(
     	var(--_switch-track-inline-size) - 2 *
-    		var(--_switch-track-inset) -
+    		var(--_switch-track-inset-x) -
     		var(--_switch-thumb-size)
     );
     --_switch-thumb-bg: var(
@@ -68,77 +79,115 @@
     box-sizing: border-box;
     inline-size: var(--_switch-track-inline-size);
     block-size: var(--_switch-track-block-size);
-    border: 1px solid var(--switch-border, var(--sys-color-border));
-    border-radius: var(--sys-radius-full);
+    border: var(--switch-border-width, 1px) solid var(--switch-border, var(--sys-color-border));
+    border-radius: var(--switch-radius, var(--sys-radius-full));
     background: var(--switch-track-bg, var(--sys-color-surface));
-    padding: var(--sys-unit-2);
-    color: var(--switch-on-thumb-bg, var(--sys-color-on-primary));
+    padding: var(--switch-pad-y, var(--sys-unit-2)) var(--switch-pad-x, var(--sys-unit-2));
+    color: var(--switch-thumb-on-bg, var(--sys-color-on-primary));
   }
-  ._control_1ietq_12 {
+  ._control_1wavl_12 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._control_1ietq_12[data-focus-visible] {
+  ._control_1wavl_12[data-focus-visible] {
     outline-width: var(--sys-focus-ring-width);
   }
   @media not (prefers-reduced-motion) {
-    ._control_1ietq_12 {
+    ._control_1wavl_12 {
       transition: background var(--sys-motion-instant) var(--sys-motion-standard), border-color var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._control_1ietq_12[data-focused] {
-    border-color: var(--_switch-on-bg);
+  ._control_1wavl_12[data-focused] {
+    border-color: var(--switch-focus-border, var(--_switch-on-bg));
   }
-  ._control_1ietq_12[data-checked] {
+  ._control_1wavl_12[data-checked] {
     border-color: var(--_switch-on-bg);
     background: var(--_switch-on-bg);
   }
-  ._control_1ietq_12[data-invalid] {
-    --field-fg: var(--sys-color-error-fg);
-    --field-muted-fg: var(--sys-color-error-fg);
-    --field-placeholder-fg: var(--sys-color-error-fg);
-    border-color: var(--sys-color-error-fg);
-    background-color: var(--sys-color-error-bg);
-    color: var(--field-fg);
-    --_switch-thumb-bg: var(--sys-color-error-outline);
-  }
-  ._control_1ietq_12[data-invalid][data-checked] {
-    background: var(--sys-color-error-fg);
-    color: var(--sys-color-error-bg);
-  }
-  ._control_1ietq_12[data-readonly] {
-    --field-fg: var(--sys-color-text);
-    border-style: dashed;
-    border-color: var(--sys-color-outline);
-    background: var(--sys-color-surface-high);
-    color: var(--field-fg);
-  }
-  ._control_1ietq_12[data-readonly][data-checked] {
-    background: var(--sys-color-primary-container);
-  }
-  ._control_1ietq_12[data-disabled], ._control_1ietq_12[data-disabled][data-checked] {
-    --field-fg: var(--sys-color-disabled-fg);
-    --field-muted-fg: var(--sys-color-disabled-fg);
-    --field-placeholder-fg: var(--sys-color-disabled-fg);
-    color: var(--sys-color-disabled-fg);
+  ._control_1wavl_12[data-invalid] {
+    --_field-fg: var(
+    	--field-invalid-fg,
+    	var(--sys-color-error-fg)
+    );
+    --_field-muted-fg: var(
+    	--field-invalid-muted-fg,
+    	var(--field-invalid-fg, var(--sys-color-error-fg))
+    );
+    --_field-placeholder-fg: var(
+    	--field-invalid-placeholder-fg,
+    	var(--field-invalid-fg, var(--sys-color-error-fg))
+    );
+    --_field-fill: var(
+    	--field-invalid-bg,
+    	var(--sys-color-error-bg)
+    );
+    border-color: var(--field-invalid-border, var(--sys-color-error-fg));
+    background-color: var(--_field-fill);
+    color: var(--_field-fg);
+    --_switch-thumb-bg: var(
+    	--switch-thumb-invalid-bg,
+    	var(--sys-color-error-outline)
+    );
+  }
+  ._control_1wavl_12[data-invalid][data-checked] {
+    background: var(--switch-invalid-on-bg, var(--sys-color-error-fg));
+    color: var(--switch-thumb-invalid-on-bg, var(--sys-color-error-bg));
+  }
+  ._control_1wavl_12[data-readonly] {
+    --_field-fg: var(
+    	--field-readonly-fg,
+    	var(--sys-color-text)
+    );
+    --_field-fill: var(
+    	--field-readonly-bg,
+    	var(--sys-color-surface-high)
+    );
+    border-style: var(--field-readonly-border-style, dashed);
+    border-color: var(--field-readonly-border, var(--sys-color-outline));
+    background: var(--_field-fill);
+    color: var(--_field-fg);
+  }
+  ._control_1wavl_12[data-readonly][data-checked] {
+    background: var(--switch-readonly-on-bg, var(--sys-color-primary-container));
+  }
+  ._control_1wavl_12[data-disabled], ._control_1wavl_12[data-disabled][data-checked] {
+    --_field-fg: var(
+    	--field-disabled-fg,
+    	var(--sys-color-disabled-fg)
+    );
+    --_field-muted-fg: var(
+    	--field-disabled-muted-fg,
+    	var(--field-disabled-fg, var(--sys-color-disabled-fg))
+    );
+    --_field-placeholder-fg: var(
+    	--field-disabled-placeholder-fg,
+    	var(--field-disabled-fg, var(--sys-color-disabled-fg))
+    );
+    color: var(--field-disabled-fg, var(--sys-color-disabled-fg));
     cursor: not-allowed;
-    --_switch-on-bg: var(--sys-color-disabled-bg);
-    --_switch-thumb-bg: var(--sys-color-disabled-fg);
-    background: var(--sys-color-disabled-bg);
+    --_switch-on-bg: var(
+    	--switch-disabled-on-border,
+    	var(--sys-color-disabled-bg)
+    );
+    --_switch-thumb-bg: var(
+    	--switch-thumb-disabled-bg,
+    	var(--sys-color-disabled-fg)
+    );
+    background: var(--switch-disabled-bg, var(--sys-color-disabled-bg));
   }
-  ._thumb_1ietq_129 {
+  ._thumb_1wavl_178 {
     inline-size: var(--_switch-thumb-size);
     block-size: var(--_switch-thumb-size);
-    border-radius: var(--sys-radius-circle);
+    border-radius: var(--switch-thumb-radius, var(--sys-radius-circle));
     background: var(--_switch-thumb-bg);
     translate: 0;
   }
   @media not (prefers-reduced-motion) {
-    ._thumb_1ietq_129 {
+    ._thumb_1wavl_178 {
       transition: translate var(--sys-motion-short) var(--sys-motion-emphasized), background var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._thumb_1ietq_129[data-checked] {
+  ._thumb_1wavl_178[data-checked] {
     background: currentcolor;
     translate: var(--_switch-travel);
   }

package/dist/components/switch-field/switch.d.ts

@@ -9,12 +9,26 @@ export type SwitchRootProps = FieldRootProps & Pick<FieldProps, "errors" | "requ
 }>;
 declare const SwitchRoot: ({ errors, requiredness, dirty, touched, pending, filled, readOnly, disabled, className, ...props }: SwitchRootProps) => ReactNode;
 declare const SwitchLabel: ({ className, ...props }: BaseField.Label.Props) => ReactNode;
+/**
+ * The track, which takes a `Switch.Thumb` as its child.
+ *
+ * @example
+ * <Switch.Control checked={enabled} onCheckedChange={setEnabled}><Switch.Thumb /></Switch.Control>
+ */
 declare const SwitchControl: ({ className, ...props }: BaseSwitch.Root.Props) => ReactNode;
+/**
+ * The thumb that slides along the track.
+ *
+ * @example
+ * <Switch.Thumb />
+ */
+declare const SwitchThumb: ({ className, ...props }: BaseSwitch.Thumb.Props) => ReactNode;
 /** The parts of a switch. */
 export type SwitchParts = Readonly<{
     Root: typeof SwitchRoot;
     Label: typeof SwitchLabel;
     Control: typeof SwitchControl;
+    Thumb: typeof SwitchThumb;
     Description: typeof Field.Description;
     Error: typeof Field.Error;
 }>;
@@ -24,10 +38,13 @@ export type SwitchParts = Readonly<{
  * share one hit area. For the ordinary case, use `SwitchField`.
  *
  * @example
- * <Switch.Root filled={enabled}>
+ * <Switch.Root filled={enabled} requiredness="optional">
  * 	<Switch.Label>
- * 		<Switch.Control checked={enabled} onCheckedChange={setEnabled} />
- * 		Email me about new messages
+ * 		<Switch.Control checked={enabled} onCheckedChange={setEnabled}>
+ * 			<Switch.Thumb />
+ * 		</Switch.Control>
+ * 		<Field.InlineLabelText>Email me about new messages <Field.RequiredMark /></Field.InlineLabelText>
+ * 		<Field.InlineOptional optionalLabel="optional" />
  * 	</Switch.Label>
  * </Switch.Root>
  */

package/dist/components/switch-field/switch.js

@@ -10,7 +10,7 @@ import { Field } from "@base-ui/react/field";
 import { Switch } from "@base-ui/react/switch";
 // src/components/switch-field/switch.tsx
 var SwitchRoot = (t0) => {
-	const $ = c(32);
+	const $ = c(33);
 	let className;
 	let dirty;
 	let disabled;
@@ -84,11 +84,12 @@ var SwitchRoot = (t0) => {
 		$[23] = t5;
 	} else t5 = $[23];
 	let t6;
-	if ($[24] !== dirty || $[25] !== field.disabled || $[26] !== field.invalid || $[27] !== props || $[28] !== t2 || $[29] !== t5 || $[30] !== touched) {
+	if ($[24] !== dirty || $[25] !== field.disabled || $[26] !== field.invalid || $[27] !== props || $[28] !== requiredness || $[29] !== t2 || $[30] !== t5 || $[31] !== touched) {
 		t6 = /* @__PURE__ */ jsx(Field$1.Root, {
 			className: t2,
 			disabled: t3,
 			invalid: t4,
+			requiredness,
 			dirty,
 			touched,
 			...t5,
@@ -98,11 +99,12 @@ var SwitchRoot = (t0) => {
 		$[25] = field.disabled;
 		$[26] = field.invalid;
 		$[27] = props;
-		$[28] = t2;
-		$[29] = t5;
-		$[30] = touched;
-		$[31] = t6;
-	} else t6 = $[31];
+		$[28] = requiredness;
+		$[29] = t2;
+		$[30] = t5;
+		$[31] = touched;
+		$[32] = t6;
+	} else t6 = $[32];
 	return t6;
 };
 var SwitchLabel = (t0) => {
@@ -136,8 +138,14 @@ var SwitchLabel = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+/**
+* The track, which takes a `Switch.Thumb` as its child.
+*
+* @example
+* <Switch.Control checked={enabled} onCheckedChange={setEnabled}><Switch.Thumb /></Switch.Control>
+*/
 var SwitchControl = (t0) => {
-	const $ = c(13);
+	const $ = c(12);
 	let className;
 	let props;
 	if ($[0] !== t0) {
@@ -163,26 +171,57 @@ var SwitchControl = (t0) => {
 		$[6] = t2;
 	} else t2 = $[6];
 	let t3;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ jsx(Switch.Thumb, { className: switch_module_default.thumb });
-		$[7] = t3;
-	} else t3 = $[7];
-	let t4;
-	if ($[8] !== focus.props || $[9] !== props || $[10] !== t1 || $[11] !== t2) {
-		t4 = /* @__PURE__ */ jsx(Switch.Root, {
+	if ($[7] !== focus.props || $[8] !== props || $[9] !== t1 || $[10] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Switch.Root, {
 			className: t1,
 			...t2,
 			...props,
-			...focus.props,
-			children: t3
+			...focus.props
 		});
-		$[8] = focus.props;
-		$[9] = props;
-		$[10] = t1;
-		$[11] = t2;
-		$[12] = t4;
-	} else t4 = $[12];
-	return t4;
+		$[7] = focus.props;
+		$[8] = props;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	return t3;
+};
+/**
+* The thumb that slides along the track.
+*
+* @example
+* <Switch.Thumb />
+*/
+var SwitchThumb = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(switch_module_default.thumb, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Switch.Thumb, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
 };
 /**
 * The styled parts of a base-ui Switch: a track with a sliding thumb that
@@ -190,10 +229,13 @@ var SwitchControl = (t0) => {
 * share one hit area. For the ordinary case, use `SwitchField`.
 *
 * @example
-* <Switch.Root filled={enabled}>
+* <Switch.Root filled={enabled} requiredness="optional">
 * 	<Switch.Label>
-* 		<Switch.Control checked={enabled} onCheckedChange={setEnabled} />
-* 		Email me about new messages
+* 		<Switch.Control checked={enabled} onCheckedChange={setEnabled}>
+* 			<Switch.Thumb />
+* 		</Switch.Control>
+* 		<Field.InlineLabelText>Email me about new messages <Field.RequiredMark /></Field.InlineLabelText>
+* 		<Field.InlineOptional optionalLabel="optional" />
 * 	</Switch.Label>
 * </Switch.Root>
 */
@@ -201,6 +243,7 @@ var Switch$1 = {
 	Root: SwitchRoot,
 	Label: SwitchLabel,
 	Control: SwitchControl,
+	Thumb: SwitchThumb,
 	Description: Field$1.Description,
 	Error: Field$1.Error
 };

package/dist/components/switch-field/switch.module.js

@@ -1,8 +1,8 @@
 import './switch.css';// src/components/switch-field/switch.module.scss
-var root = "_root_1ietq_3";
-var label = "_label_1ietq_9";
-var control = "_control_1ietq_12";
-var thumb = "_thumb_1ietq_129";
+var root = "_root_1wavl_3";
+var label = "_label_1wavl_9";
+var control = "_control_1wavl_12";
+var thumb = "_thumb_1wavl_178";
 var switch_module_default = {
 	root,
 	label,

package/dist/components/tabs/tabs.css

@@ -1,59 +1,59 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._root_1jg47_3 {
+  ._root_pzyl1_3 {
     display: flex;
     flex-direction: column;
     gap: var(--tabs-gap, var(--sys-unit-8));
   }
-  ._scroller_1jg47_8 {
+  ._scroller_pzyl1_8 {
     overflow-x: auto;
     overscroll-behavior-x: contain;
   }
-  ._list_1jg47_12 {
+  ._list_pzyl1_12 {
     position: relative;
     display: flex;
     gap: var(--tab-gap, var(--sys-unit-2));
     min-inline-size: max-content;
   }
-  ._tab_1jg47_18 {
+  ._tab_pzyl1_18 {
     display: inline-flex;
     align-items: center;
-    gap: var(--sys-unit-4);
-    padding: var(--sys-unit-6) var(--sys-unit-10);
-    border-radius: var(--sys-radius-full);
+    gap: var(--tab-icon-gap, var(--sys-unit-4));
+    padding: var(--tab-pad-y, var(--sys-unit-6)) var(--tab-pad-x, var(--sys-unit-10));
+    border-radius: var(--tab-radius, var(--sys-radius-full));
     color: var(--tab-fg, var(--sys-color-text-muted));
-    font: var(--sys-font-label-medium);
+    font: var(--tab-font, var(--sys-font-label-medium));
     text-decoration: none;
     white-space: nowrap;
     cursor: pointer;
   }
-  ._tab_1jg47_18 {
+  ._tab_pzyl1_18 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._tab_1jg47_18:focus-visible {
+  ._tab_pzyl1_18:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._tab_1jg47_18 {
+  ._tab_pzyl1_18 {
     outline-offset: calc(-1 * var(--sys-focus-ring-width));
   }
   @media not (prefers-reduced-motion) {
-    ._tab_1jg47_18 {
+    ._tab_pzyl1_18 {
       transition: background-color var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._tab_1jg47_18:hover {
-    background: var(--tab-bg-hover, var(--sys-color-primary-container));
+  ._tab_pzyl1_18:hover {
+    background: var(--tab-hover-bg, var(--sys-color-primary-container));
   }
-  ._tab_1jg47_18 {
+  ._tab_pzyl1_18 {
     border: none;
     background: none;
   }
-  ._tab_1jg47_18[data-disabled] {
+  ._tab_pzyl1_18[data-disabled] {
     color: var(--tab-disabled-fg, var(--sys-color-disabled-fg));
     cursor: not-allowed;
   }
-  ._indicator_1jg47_56 {
+  ._indicator_pzyl1_56 {
     --_indicator-slack: var(
     	--sliding-indicator-slack,
     	0px
@@ -71,27 +71,27 @@
     pointer-events: none;
   }
   @media not (prefers-reduced-motion) {
-    ._indicator_1jg47_56 {
+    ._indicator_pzyl1_56 {
       transition: inset-inline-start var(--_indicator-slide), inset-block-start var(--_indicator-slide), inline-size var(--_indicator-slide), block-size var(--_indicator-slide), opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-short) var(--sys-motion-overshoot);
     }
   }
-  ._indicator_1jg47_56[data-jump] {
+  ._indicator_pzyl1_56[data-jump] {
     --_indicator-slide: 0s;
   }
-  ._indicator_1jg47_56[data-empty] {
+  ._indicator_pzyl1_56[data-empty] {
     opacity: 0;
     scale: 0;
   }
   @media not (prefers-reduced-motion) {
-    ._indicator_1jg47_56[data-empty] {
+    ._indicator_pzyl1_56[data-empty] {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._indicator_1jg47_56 {
-    border-radius: var(--sys-radius-full);
+  ._indicator_pzyl1_56 {
+    border-radius: var(--tab-indicator-radius, var(--sys-radius-full));
     background: var(--tab-indicator, var(--sys-color-primary));
   }
-  ._indicatorLabels_1jg47_94 {
+  ._indicatorLabels_pzyl1_94 {
     position: absolute;
     inset-inline-start: calc(var(--_indicator-slack) - var(--active-tab-left, 0));
     inset-block-start: calc(var(--_indicator-slack) - var(--active-tab-top, 0));
@@ -99,24 +99,24 @@
     inline-size: max-content;
   }
   @media not (prefers-reduced-motion) {
-    ._indicatorLabels_1jg47_94 {
+    ._indicatorLabels_pzyl1_94 {
       transition: inset-inline-start var(--_indicator-slide), inset-block-start var(--_indicator-slide);
     }
   }
-  ._indicatorLabels_1jg47_94 {
+  ._indicatorLabels_pzyl1_94 {
     gap: var(--tab-gap, var(--sys-unit-2));
   }
-  ._indicatorLabels_1jg47_94 ._tab_1jg47_18 {
-    color: var(--tab-fg-active, var(--sys-color-on-primary));
+  ._indicatorLabels_pzyl1_94 ._tab_pzyl1_18 {
+    color: var(--tab-active-fg, var(--sys-color-on-primary));
   }
-  ._panel_1jg47_112 {
-    border-radius: var(--sys-radius-sm);
+  ._panel_pzyl1_112 {
+    border-radius: var(--tabs-panel-radius, var(--sys-radius-sm));
   }
-  ._panel_1jg47_112 {
+  ._panel_pzyl1_112 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._panel_1jg47_112:focus-visible {
+  ._panel_pzyl1_112:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
 }

package/dist/components/tabs/tabs.d.ts

@@ -1,5 +1,6 @@
 import { Tabs as BaseTabs } from "@base-ui/react/tabs";
-import { type ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { type ReactElement, type ReactNode } from "react";
 import { type BadgeProps } from "../badge/badge.tsx";
 export type TabsRootProps = Omit<BaseTabs.Root.Props, "className" | "value" | "defaultValue" | "onValueChange" | "orientation" | "children"> & Readonly<{
     /** The `Tabs.List` and the `Tabs.Panel`s it opens. */
@@ -21,12 +22,22 @@ export type TabsRootProps = Omit<BaseTabs.Root.Props, "className" | "value" | "d
 }>);
 /** The tabs and the panels they open. */
 declare const Root: ({ value, defaultValue, onValueChange, className, ...props }: TabsRootProps) => ReactNode;
+export type TabsScrollerProps = useRender.ComponentProps<"div">;
+/**
+ * Lets the `List` scroll sideways once it outgrows its room.
+ *
+ * @example
+ * <Tabs.Scroller>
+ * 	<Tabs.List label="Invoice">…</Tabs.List>
+ * </Tabs.Scroller>
+ */
+declare const Scroller: ({ render, className, ref, ...props }: TabsScrollerProps) => ReactElement;
 export type TabsListProps = Omit<BaseTabs.List.Props, "className" | "aria-label"> & Readonly<{
     /** What the tabs switch between, such as "Invoice". */
     label: string;
     className?: string;
 }>;
-/** The row of tabs, scrolling sideways when it outgrows its room. */
+/** The row of tabs; put it in a `Scroller` where it may outgrow its room. */
 declare const List: ({ label, className, children, ...props }: TabsListProps) => ReactNode;
 export type TabsTabProps = Omit<BaseTabs.Tab.Props, "className" | "value"> & Readonly<{
     /** The `value` of the panel this tab opens. */
@@ -55,6 +66,7 @@ export type TabsPanelProps = Omit<BaseTabs.Panel.Props, "className" | "value"> &
 declare const Panel: ({ className, ...props }: TabsPanelProps) => ReactNode;
 type TabsParts = Readonly<{
     Root: typeof Root;
+    Scroller: typeof Scroller;
     List: typeof List;
     Tab: typeof Tab;
     Count: typeof Count;
@@ -67,11 +79,13 @@ type TabsParts = Readonly<{
  *
  * @example
  * <Tabs.Root defaultValue="details">
- * 	<Tabs.List label="Invoice">
- * 		<Tabs.Tab value="details">Details</Tabs.Tab>
- * 		<Tabs.Tab value="history">History<Tabs.Count>3</Tabs.Count></Tabs.Tab>
- * 		<Tabs.Indicator />
- * 	</Tabs.List>
+ * 	<Tabs.Scroller>
+ * 		<Tabs.List label="Invoice">
+ * 			<Tabs.Tab value="details">Details</Tabs.Tab>
+ * 			<Tabs.Tab value="history">History<Tabs.Count>3</Tabs.Count></Tabs.Tab>
+ * 			<Tabs.Indicator />
+ * 		</Tabs.List>
+ * 	</Tabs.Scroller>
  * 	<Tabs.Panel value="details">…</Tabs.Panel>
  * 	<Tabs.Panel value="history">…</Tabs.Panel>
  * </Tabs.Root>