@snack-uikit/segmented-control 0.4.20 → 0.6.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.6.0 (2025-05-28)
+
+
+### Features
+
+* **PDS-1990:** added xs size for segmented control ([0f8fb0d](https://github.com/cloud-ru-tech/snack-uikit/commit/0f8fb0de09568eb983c685118068870a03ad3f92))
+
+
+
+
+
+# 0.5.0 (2025-05-21)
+
+
+### Features
+
+* **FF-6410:** add name for segment control ([b6e5488](https://github.com/cloud-ru-tech/snack-uikit/commit/b6e548889cdae95e87c3bd0e615c1c97f0489b12))
+
+
+
+
+
 ## 0.4.20 (2025-05-16)
 
 ### Only dependencies have been changed

package/README.md

@@ -19,9 +19,10 @@ SegmentedControl
 | defaultValue | `IdType` | - | ID выбранного по умолчанию сегмента. (в uncontrolled режиме) |
 | onChange | `(value: Value) => void` | - | Колбек смены выбранного сегмента. |
 | className | `string` | - | CSS-класс контейнера. |
-| size | enum Size: `"s"`, `"m"`, `"l"` | m | Размер компонента. |
+| size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | m | Размер компонента. |
 | outline | `boolean` | - | Обводка |
 | width | enum Width: `"auto"`, `"full"` | auto | Управление шириной компонента. |
+| name | `string` | - | Имя поля |
 
 
 [//]: DOCUMENTATION_SECTION_END

package/dist/cjs/components/SegmentedControl.d.ts

@@ -33,8 +33,12 @@ export type SegmentedControlProps<Value extends IdType = IdType> = WithSupportPr
      * Управление шириной компонента.
      */
     width?: Width;
+    /**
+     * Имя поля
+     */
+    name?: string;
 }>;
 /**
  * SegmentedControl
  */
-export declare function SegmentedControl<Value extends IdType>({ defaultValue, size, className, onChange, items, value, outline, width, ...other }: SegmentedControlProps<Value>): import("react/jsx-runtime").JSX.Element;
+export declare function SegmentedControl<Value extends IdType>({ defaultValue, size, className, onChange, items, value, outline, width, name, ...other }: SegmentedControlProps<Value>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/SegmentedControl.js

@@ -38,9 +38,10 @@ function SegmentedControl(_a) {
       items,
       value,
       outline,
-      width = constants_1.WIDTH.Auto
+      width = constants_1.WIDTH.Auto,
+      name
     } = _a,
-    other = __rest(_a, ["defaultValue", "size", "className", "onChange", "items", "value", "outline", "width"]);
+    other = __rest(_a, ["defaultValue", "size", "className", "onChange", "items", "value", "outline", "width", "name"]);
   const [selected, setSelected] = (0, uncontrollable_1.useUncontrolledProp)(value, defaultValue, onChange);
   const {
     focusableSegmentValue,
@@ -106,7 +107,11 @@ function SegmentedControl(_a) {
       "data-outline": outline || undefined,
       "data-width": width
     }, (0, utils_1.extractDataTestProps)(other), (0, utils_1.extractSupportProps)(other), {
-      children: [(0, jsx_runtime_1.jsx)("div", {
+      children: [name && (0, jsx_runtime_1.jsx)("input", {
+        type: 'hidden',
+        value: selected,
+        name: name
+      }), (0, jsx_runtime_1.jsx)("div", {
         "data-size": size,
         style: selectionPosition,
         className: styles_module_scss_1.default.selection,

package/dist/cjs/components/styles.module.css

@@ -28,6 +28,10 @@
 .container[data-width=full]{
   display:flex;
 }
+.container[data-size=xs]::before{
+  border-width:var(--border-width-segmented-control-single, 1px);
+  border-radius:var(--radius-segmented-control-container-xs, 8px);
+}
 .container[data-size=s]::before{
   border-width:var(--border-width-segmented-control-single, 1px);
   border-radius:var(--radius-segmented-control-container-s, 12px);
@@ -59,6 +63,13 @@
   background-color:var(--sys-neutral-background2-level, #ffffff);
   transition:left 0.15s ease-in-out, width 0.15s ease-in-out;
 }
+.selection[data-size=xs]{
+  border-radius:var(--radius-segmented-control-segment-s, 10px);
+  padding-left:var(--space-segmented-control-segment-s-icon-only, 2px);
+  padding-right:var(--space-segmented-control-segment-s-icon-only, 2px);
+  gap:var(--space-segmented-control-segment-s-gap, 4px);
+  height:var(--size-segmented-control-segment-s, 28px);
+}
 .selection[data-size=s]{
   border-radius:var(--radius-segmented-control-segment-s, 10px);
   padding-left:var(--space-segmented-control-segment-s-icon-only, 2px);

package/dist/cjs/constants.d.ts

@@ -1,4 +1,5 @@
 export declare const SIZE: {
+    readonly XS: "xs";
     readonly S: "s";
     readonly M: "m";
     readonly L: "l";

package/dist/cjs/constants.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.WIDTH = exports.SIZE = void 0;
 exports.SIZE = {
+  XS: 'xs',
   S: 's',
   M: 'm',
   L: 'l'

package/dist/cjs/helperComponents/Segment/Segment.js

@@ -45,7 +45,7 @@ function Segment(_ref) {
     "data-test-id": `section-${value}`,
     "data-active": selected || undefined,
     "data-disabled": disabled || undefined,
-    "data-layout": (0, utils_1.getLayout)(icon, label),
+    "data-layout": (0, utils_1.getLayout)(icon, label, size),
     className: (0, classnames_1.default)(styles_module_scss_1.default.segment),
     onClick: onClick,
     "data-size": size,
@@ -54,7 +54,7 @@ function Segment(_ref) {
     "aria-checked": selected,
     role: 'radio',
     type: 'button',
-    children: [icon && (0, jsx_runtime_1.jsx)("div", {
+    children: [size !== 'xs' && icon && (0, jsx_runtime_1.jsx)("div", {
       className: styles_module_scss_1.default.icon,
       children: icon
     }), label && (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {

package/dist/cjs/helperComponents/Segment/styles.module.css

@@ -29,6 +29,27 @@
   outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
   outline-color:var(--sys-available-complementary, #1c1c24);
 }
+.segment[data-size=xs][data-layout=label-only]{
+  border-radius:var(--radius-segmented-control-segment-xs, 6px);
+  padding-left:var(--space-segmented-control-segment-xs-from-label, 8px);
+  padding-right:var(--space-segmented-control-segment-xs-from-label, 8px);
+  gap:var(--space-segmented-control-segment-xs-gap, 2px);
+  height:var(--size-segmented-control-segment-xs, 20px);
+}
+.segment[data-size=xs][data-layout=icon-before]{
+  border-radius:var(--radius-segmented-control-segment-s, 10px);
+  padding-left:var(--space-segmented-control-segment-s-from-icon, 8px);
+  padding-right:var(--space-segmented-control-segment-s-from-label, 16px);
+  gap:var(--space-segmented-control-segment-s-gap, 4px);
+  height:var(--size-segmented-control-segment-s, 28px);
+}
+.segment[data-size=xs][data-layout=icon-only]{
+  border-radius:var(--radius-segmented-control-segment-s, 10px);
+  padding-left:var(--space-segmented-control-segment-s-icon-only, 2px);
+  padding-right:var(--space-segmented-control-segment-s-icon-only, 2px);
+  gap:var(--space-segmented-control-segment-s-gap, 4px);
+  height:var(--size-segmented-control-segment-s, 28px);
+}
 .segment[data-size=s][data-layout=label-only]{
   border-radius:var(--radius-segmented-control-segment-s, 10px);
   padding-left:var(--space-segmented-control-segment-s-from-label, 16px);
@@ -99,6 +120,14 @@
   align-items:center;
 }
 
+.label[data-size=xs]{
+  font-family:var(--sans-label-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-m-font-weight, Semibold);
+  line-height:var(--sans-label-m-line-height, 16px);
+  font-size:var(--sans-label-m-font-size, 12px);
+  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}
 .label[data-size=s]{
   font-family:var(--sans-label-m-font-family, SB Sans Interface);
   font-weight:var(--sans-label-m-font-weight, Semibold);

package/dist/cjs/utils.d.ts

@@ -1,2 +1,2 @@
 import { ReactNode } from 'react';
-export declare const getLayout: (icon?: ReactNode, label?: string) => "icon-before" | "label-only" | "icon-only";
+export declare const getLayout: (icon?: ReactNode, label?: string, size?: string) => "label-only" | "icon-before" | "icon-only";

package/dist/cjs/utils.js

@@ -4,7 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getLayout = void 0;
-const getLayout = (icon, label) => {
+const getLayout = (icon, label, size) => {
+  if (size === 'xs') {
+    return 'label-only';
+  }
   if (icon && label) {
     return 'icon-before';
   }

package/dist/esm/components/SegmentedControl.d.ts

@@ -33,8 +33,12 @@ export type SegmentedControlProps<Value extends IdType = IdType> = WithSupportPr
      * Управление шириной компонента.
      */
     width?: Width;
+    /**
+     * Имя поля
+     */
+    name?: string;
 }>;
 /**
  * SegmentedControl
  */
-export declare function SegmentedControl<Value extends IdType>({ defaultValue, size, className, onChange, items, value, outline, width, ...other }: SegmentedControlProps<Value>): import("react/jsx-runtime").JSX.Element;
+export declare function SegmentedControl<Value extends IdType>({ defaultValue, size, className, onChange, items, value, outline, width, name, ...other }: SegmentedControlProps<Value>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/SegmentedControl.js

@@ -22,7 +22,7 @@ import styles from './styles.module.css';
  * SegmentedControl
  */
 export function SegmentedControl(_a) {
-    var { defaultValue, size = 'm', className, onChange, items, value, outline, width = WIDTH.Auto } = _a, other = __rest(_a, ["defaultValue", "size", "className", "onChange", "items", "value", "outline", "width"]);
+    var { defaultValue, size = 'm', className, onChange, items, value, outline, width = WIDTH.Auto, name } = _a, other = __rest(_a, ["defaultValue", "size", "className", "onChange", "items", "value", "outline", "width", "name"]);
     const [selected, setSelected] = useUncontrolledProp(value, defaultValue, onChange);
     const { focusableSegmentValue, onGetFocusable, onKeyDown } = useFocusControl({ selected, items });
     const containerRef = useRef(null);
@@ -60,5 +60,5 @@ export function SegmentedControl(_a) {
     const itemsJSX = useMemo(() => items.map(props => (_jsx("div", { className: styles.segmentHolder, "data-width": width, children: _jsx(Segment, Object.assign({}, props, { size: size, onGetFocusable: onGetFocusable, selected: selected === props.value, onClick: () => setSelected(props.value), focusable: focusableSegmentValue === props.value, onSelectionUpdated: updateSelectionPosition })) }, props.value))), [items, width, size, onGetFocusable, selected, focusableSegmentValue, updateSelectionPosition, setSelected]);
     return (
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-    _jsxs("div", Object.assign({ ref: containerRef, "data-size": size, onKeyDown: onKeyDown, className: cn(styles.container, className), role: 'radiogroup', "data-outline": outline || undefined, "data-width": width }, extractDataTestProps(other), extractSupportProps(other), { children: [_jsx("div", { "data-size": size, style: selectionPosition, className: styles.selection, "aria-hidden": true }), itemsJSX] })));
+    _jsxs("div", Object.assign({ ref: containerRef, "data-size": size, onKeyDown: onKeyDown, className: cn(styles.container, className), role: 'radiogroup', "data-outline": outline || undefined, "data-width": width }, extractDataTestProps(other), extractSupportProps(other), { children: [name && _jsx("input", { type: 'hidden', value: selected, name: name }), _jsx("div", { "data-size": size, style: selectionPosition, className: styles.selection, "aria-hidden": true }), itemsJSX] })));
 }

package/dist/esm/components/styles.module.css

@@ -28,6 +28,10 @@
 .container[data-width=full]{
   display:flex;
 }
+.container[data-size=xs]::before{
+  border-width:var(--border-width-segmented-control-single, 1px);
+  border-radius:var(--radius-segmented-control-container-xs, 8px);
+}
 .container[data-size=s]::before{
   border-width:var(--border-width-segmented-control-single, 1px);
   border-radius:var(--radius-segmented-control-container-s, 12px);
@@ -59,6 +63,13 @@
   background-color:var(--sys-neutral-background2-level, #ffffff);
   transition:left 0.15s ease-in-out, width 0.15s ease-in-out;
 }
+.selection[data-size=xs]{
+  border-radius:var(--radius-segmented-control-segment-s, 10px);
+  padding-left:var(--space-segmented-control-segment-s-icon-only, 2px);
+  padding-right:var(--space-segmented-control-segment-s-icon-only, 2px);
+  gap:var(--space-segmented-control-segment-s-gap, 4px);
+  height:var(--size-segmented-control-segment-s, 28px);
+}
 .selection[data-size=s]{
   border-radius:var(--radius-segmented-control-segment-s, 10px);
   padding-left:var(--space-segmented-control-segment-s-icon-only, 2px);

package/dist/esm/constants.d.ts

@@ -1,4 +1,5 @@
 export declare const SIZE: {
+    readonly XS: "xs";
     readonly S: "s";
     readonly M: "m";
     readonly L: "l";

package/dist/esm/constants.js

@@ -1,4 +1,5 @@
 export const SIZE = {
+    XS: 'xs',
     S: 's',
     M: 'm',
     L: 'l',

package/dist/esm/helperComponents/Segment/Segment.js

@@ -16,6 +16,6 @@ export function Segment({ size, label, value, selected, onClick, disabled, icon,
             onSelectionUpdated(buttonRef.current);
         }
     }, [selected, buttonRef, onSelectionUpdated]);
-    const segment = (_jsxs("button", { ref: buttonRef, "data-test-id": `section-${value}`, "data-active": selected || undefined, "data-disabled": disabled || undefined, "data-layout": getLayout(icon, label), className: cn(styles.segment), onClick: onClick, "data-size": size, disabled: disabled, tabIndex: focusable ? 0 : -1, "aria-checked": selected, role: 'radio', type: 'button', children: [icon && _jsx("div", { className: styles.icon, children: icon }), label && _jsx(TruncateString, { className: styles.label, "data-size": size, text: label })] }));
+    const segment = (_jsxs("button", { ref: buttonRef, "data-test-id": `section-${value}`, "data-active": selected || undefined, "data-disabled": disabled || undefined, "data-layout": getLayout(icon, label, size), className: cn(styles.segment), onClick: onClick, "data-size": size, disabled: disabled, tabIndex: focusable ? 0 : -1, "aria-checked": selected, role: 'radio', type: 'button', children: [size !== 'xs' && icon && _jsx("div", { className: styles.icon, children: icon }), label && _jsx(TruncateString, { className: styles.label, "data-size": size, text: label })] }));
     return renderWrapSegment ? renderWrapSegment(segment) : segment;
 }

package/dist/esm/helperComponents/Segment/styles.module.css

@@ -29,6 +29,27 @@
   outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
   outline-color:var(--sys-available-complementary, #1c1c24);
 }
+.segment[data-size=xs][data-layout=label-only]{
+  border-radius:var(--radius-segmented-control-segment-xs, 6px);
+  padding-left:var(--space-segmented-control-segment-xs-from-label, 8px);
+  padding-right:var(--space-segmented-control-segment-xs-from-label, 8px);
+  gap:var(--space-segmented-control-segment-xs-gap, 2px);
+  height:var(--size-segmented-control-segment-xs, 20px);
+}
+.segment[data-size=xs][data-layout=icon-before]{
+  border-radius:var(--radius-segmented-control-segment-s, 10px);
+  padding-left:var(--space-segmented-control-segment-s-from-icon, 8px);
+  padding-right:var(--space-segmented-control-segment-s-from-label, 16px);
+  gap:var(--space-segmented-control-segment-s-gap, 4px);
+  height:var(--size-segmented-control-segment-s, 28px);
+}
+.segment[data-size=xs][data-layout=icon-only]{
+  border-radius:var(--radius-segmented-control-segment-s, 10px);
+  padding-left:var(--space-segmented-control-segment-s-icon-only, 2px);
+  padding-right:var(--space-segmented-control-segment-s-icon-only, 2px);
+  gap:var(--space-segmented-control-segment-s-gap, 4px);
+  height:var(--size-segmented-control-segment-s, 28px);
+}
 .segment[data-size=s][data-layout=label-only]{
   border-radius:var(--radius-segmented-control-segment-s, 10px);
   padding-left:var(--space-segmented-control-segment-s-from-label, 16px);
@@ -99,6 +120,14 @@
   align-items:center;
 }
 
+.label[data-size=xs]{
+  font-family:var(--sans-label-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-m-font-weight, Semibold);
+  line-height:var(--sans-label-m-line-height, 16px);
+  font-size:var(--sans-label-m-font-size, 12px);
+  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}
 .label[data-size=s]{
   font-family:var(--sans-label-m-font-family, SB Sans Interface);
   font-weight:var(--sans-label-m-font-weight, Semibold);

package/dist/esm/utils.d.ts

@@ -1,2 +1,2 @@
 import { ReactNode } from 'react';
-export declare const getLayout: (icon?: ReactNode, label?: string) => "icon-before" | "label-only" | "icon-only";
+export declare const getLayout: (icon?: ReactNode, label?: string, size?: string) => "label-only" | "icon-before" | "icon-only";

package/dist/esm/utils.js

@@ -1,4 +1,7 @@
-export const getLayout = (icon, label) => {
+export const getLayout = (icon, label, size) => {
+    if (size === 'xs') {
+        return 'label-only';
+    }
     if (icon && label) {
         return 'icon-before';
     }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Segmented Control",
-  "version": "0.4.20",
+  "version": "0.6.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -41,5 +41,5 @@
     "classnames": "2.5.1",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "0eedd13082bdc63c6f0b1a6c592421e6133f17af"
+  "gitHead": "c7d15bfb4027c8177ba19f9b55be31d6f7cfcdbb"
 }

package/src/components/SegmentedControl.tsx

@@ -43,6 +43,10 @@ export type SegmentedControlProps<Value extends IdType = IdType> = WithSupportPr
    * Управление шириной компонента.
    */
   width?: Width;
+  /**
+   * Имя поля
+   */
+  name?: string;
 }>;
 
 /**
@@ -57,6 +61,7 @@ export function SegmentedControl<Value extends IdType>({
   value,
   outline,
   width = WIDTH.Auto,
+  name,
   ...other
 }: SegmentedControlProps<Value>) {
   const [selected, setSelected] = useUncontrolledProp(value, defaultValue, onChange);
@@ -129,6 +134,7 @@ export function SegmentedControl<Value extends IdType>({
       {...extractDataTestProps(other)}
       {...extractSupportProps(other)}
     >
+      {name && <input type='hidden' value={selected} name={name} />}
       <div data-size={size} style={selectionPosition} className={styles.selection} aria-hidden={true} />
       {itemsJSX}
     </div>

package/src/components/styles.module.scss

@@ -1,6 +1,6 @@
 @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-segmentedControl';
 
-$sizes: 's', 'm', 'l';
+$sizes: 'xs', 's', 'm', 'l';
 
 .container {
   @include styles-tokens-segmentedControl.composite-var(styles-tokens-segmentedControl.$segmented-control-container);
@@ -40,7 +40,11 @@ $sizes: 's', 'm', 'l';
 
   @each $size in $sizes {
     &[data-size='#{$size}']::before {
-      @include styles-tokens-segmentedControl.composite-var(styles-tokens-segmentedControl.$segmented-control, 'background', $size);
+      @include styles-tokens-segmentedControl.composite-var(
+        styles-tokens-segmentedControl.$segmented-control,
+        'background',
+        $size
+      );
     }
   }
 }
@@ -67,11 +71,18 @@ $sizes: 's', 'm', 'l';
 
   background-color: styles-tokens-segmentedControl.$sys-neutral-background2-level;
 
-  transition: left 0.15s ease-in-out, width 0.15s ease-in-out;
+  transition:
+    left 0.15s ease-in-out,
+    width 0.15s ease-in-out;
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
-      @include styles-tokens-segmentedControl.composite-var(styles-tokens-segmentedControl.$segmented-control, 'segment', $size, 'icon-only');
+      @include styles-tokens-segmentedControl.composite-var(
+        styles-tokens-segmentedControl.$segmented-control,
+        'segment',
+        $size,
+        'icon-only'
+      );
     }
   }
-}
+}

package/src/constants.ts

@@ -1,4 +1,5 @@
 export const SIZE = {
+  XS: 'xs',
   S: 's',
   M: 'm',
   L: 'l',

package/src/helperComponents/Segment/Segment.tsx

@@ -49,7 +49,7 @@ export function Segment({
       data-test-id={`section-${value}`}
       data-active={selected || undefined}
       data-disabled={disabled || undefined}
-      data-layout={getLayout(icon, label)}
+      data-layout={getLayout(icon, label, size)}
       className={cn(styles.segment)}
       onClick={onClick}
       data-size={size}
@@ -59,7 +59,7 @@ export function Segment({
       role='radio'
       type='button'
     >
-      {icon && <div className={styles.icon}>{icon}</div>}
+      {size !== 'xs' && icon && <div className={styles.icon}>{icon}</div>}
       {label && <TruncateString className={styles.label} data-size={size} text={label} />}
     </button>
   );

package/src/helperComponents/Segment/styles.module.scss

@@ -1,9 +1,10 @@
 @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-segmentedControl';
-@use "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element";
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
-$sizes: 's', 'm', 'l';
+$sizes: 'xs', 's', 'm', 'l';
 $layouts: 'label-only', 'icon-before', 'icon-only';
 $typographies: (
+  'xs': styles-tokens-segmentedControl.$sans-label-m,
   's': styles-tokens-segmentedControl.$sans-label-m,
   'm': styles-tokens-segmentedControl.$sans-label-m,
   'l': styles-tokens-segmentedControl.$sans-label-l,
@@ -29,7 +30,8 @@ $typographies: (
     color: styles-tokens-segmentedControl.$sys-neutral-text-main;
   }
 
-  &[data-disabled], &[data-disabled]:hover {
+  &[data-disabled],
+  &[data-disabled]:hover {
     cursor: not-allowed;
     color: styles-tokens-segmentedControl.$sys-neutral-text-disabled;
   }
@@ -37,7 +39,8 @@ $typographies: (
   &[data-active] {
     color: styles-tokens-segmentedControl.$sys-neutral-text-main;
 
-    &[data-disabled], &[data-disabled]:hover {
+    &[data-disabled],
+    &[data-disabled]:hover {
       color: styles-tokens-segmentedControl.$sys-neutral-text-disabled;
     }
   }
@@ -45,14 +48,21 @@ $typographies: (
   &:focus-visible {
     @include styles-tokens-segmentedControl.outline-inside-var(styles-tokens-element.$container-focused-s);
 
-    outline-color: styles-tokens-segmentedControl.simple-var(styles-tokens-segmentedControl.$sys-available-complementary);
+    outline-color: styles-tokens-segmentedControl.simple-var(
+      styles-tokens-segmentedControl.$sys-available-complementary
+    );
   }
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
       @each $layout in $layouts {
         &[data-layout='#{$layout}'] {
-          @include styles-tokens-segmentedControl.composite-var(styles-tokens-segmentedControl.$segmented-control, 'segment', $size, $layout);
+          @include styles-tokens-segmentedControl.composite-var(
+            styles-tokens-segmentedControl.$segmented-control,
+            'segment',
+            $size,
+            $layout
+          );
         }
       }
     }

package/src/utils.ts

@@ -1,6 +1,10 @@
 import { ReactNode } from 'react';
 
-export const getLayout = (icon?: ReactNode, label?: string) => {
+export const getLayout = (icon?: ReactNode, label?: string, size?: string) => {
+  if (size === 'xs') {
+    return 'label-only';
+  }
+
   if (icon && label) {
     return 'icon-before';
   }