luxen-ui 0.16.2 → 0.17.0

package/cdn/standalone.css

@@ -4047,6 +4047,173 @@ In dark mode, mixes the base color with black (default 15% black).
   }
 }
 
+/* segmented-control.css */
+@layer components {
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Segmented control
+   A single-select switch: a muted track with a sliding pill behind the
+   selected segment. Shares its visual language with l-tabs[variant='enclosed']
+   (same neutral-subtle track + surface pill), but carries radio-group
+   semantics instead of tabs.
+
+   Structural selectors (not [role='…']) so the control is styled from plain
+   light DOM — it is progressive, so it must look right before JS adds ARIA.
+   The host is the flex track; its `<button>` children are the segments. JS
+   only enhances (roles, keyboard, and the sliding pill offsets).
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-segmented-control {
+    --_height: var(--l-size-control-md);
+    --_pad: 0.1875rem;
+    --_duration: 150ms;
+    --_easing: cubic-bezier(0.25, 0.1, 0.25, 1);
+
+    display: inline-flex;
+    position: relative;
+    align-items: stretch;
+    height: var(--_height);
+    padding: var(--_pad);
+    gap: calc(var(--spacing) * 0.5);
+    background: var(--l-color-bg-fill-neutral-subtle);
+    border-radius: var(--border-radius, var(--l-radius-lg));
+    /* Match the form-control border (--l-color-border, as used by .l-button,
+       l-select, and l-input) so the track lines up with dropdowns in a toolbar
+       — not the lighter --l-color-divider that enclosed tabs use. */
+    box-shadow: inset 0 0 0 1px var(--l-color-border);
+
+    /* Sliding pill behind the selected segment. Positioned by JS via
+       --_indicator-left / --_indicator-width (button offsetLeft / offsetWidth);
+       width 0 until JS runs, so it stays invisible in the no-JS fallback. */
+    &::before {
+      content: '';
+      position: absolute;
+      top: var(--_pad);
+      bottom: var(--_pad);
+      left: 0;
+      width: var(--_indicator-width, 0);
+      transform: translateX(var(--_indicator-left, 0));
+      background: var(--indicator-color, var(--l-color-surface));
+      border-radius: var(--l-radius-md);
+      box-shadow:
+        0 1px 3px 0 rgb(0 0 0 / 0.08),
+        0 1px 2px -1px rgb(0 0 0 / 0.08);
+      pointer-events: none;
+      will-change: transform, width;
+      transition:
+        transform var(--_duration) var(--_easing),
+        width var(--_duration) var(--_easing);
+    }
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Sizes — align with .l-button and form controls at the same size.
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-segmented-control[size='sm'] {
+    --_height: var(--l-size-control-sm);
+  }
+
+  l-segmented-control[size='lg'] {
+    --_height: var(--l-size-control-lg);
+  }
+
+  l-segmented-control[size='xl'] {
+    --_height: var(--l-size-control-xl);
+  }
+
+  /* Whole-control disabled (host `disabled` attribute, form-associated). */
+  l-segmented-control[disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Segments
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-segmented-control button {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing) * 1.5);
+    padding-inline: calc(var(--spacing) * 3);
+    margin: 0;
+    appearance: none;
+    border: none;
+    background: none;
+    border-radius: var(--l-radius-md);
+    color: var(--l-color-text-secondary);
+    font-family: inherit;
+    font-size: var(--l-text-sm);
+    font-weight: 500;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: color 150ms;
+
+    /* Icon-only segments (JS-detected, no visible text): square them. */
+    &[data-icon-only] {
+      padding-inline: 0;
+      width: calc(var(--_height) - 2 * var(--_pad));
+    }
+
+    &[aria-checked='true'] {
+      color: var(--l-color-text-primary);
+    }
+
+    @media (hover: hover) {
+      &:hover:not([aria-checked='true']):not(:disabled):not([aria-disabled='true']) {
+        color: var(--l-color-text-primary);
+      }
+    }
+
+    &:disabled,
+    &[aria-disabled='true'] {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--l-focus-ring);
+      outline-offset: -2px;
+      border-radius: var(--l-radius-sm);
+    }
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Full width
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-segmented-control[full-width] {
+    display: flex;
+  }
+
+  l-segmented-control[full-width] button {
+    flex: 1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    l-segmented-control::before {
+      transition-duration: 0ms;
+    }
+
+    l-segmented-control button {
+      transition-duration: 0ms;
+    }
+  }
+}
+
 /* select.css */
 /* Select — `.l-select` on a native <select> using the customizable
    `base-select` appearance (the Customizable Select API).

package/cdn/standalone.js

@@ -1,68 +1,71 @@
 //#region src/html/elements/alert/index.ts
-define$32("alert", Alert);
+define$33("alert", Alert);
 //#endregion
 //#region src/html/elements/alert-dialog/index.ts
-define$31("alert-dialog", AlertDialog);
+define$32("alert-dialog", AlertDialog);
 //#endregion
 //#region src/html/elements/avatar/index.ts
-define$30("avatar", Avatar);
+define$31("avatar", Avatar);
 //#endregion
 //#region src/html/elements/badge/index.ts
-define$29("badge", Badge);
+define$30("badge", Badge);
 //#endregion
 //#region src/html/elements/button-group/index.ts
-define$28("button-group", ButtonGroup);
+define$29("button-group", ButtonGroup);
 //#endregion
 //#region src/html/elements/carousel/index.ts
-define$27("carousel", Carousel);
+define$28("carousel", Carousel);
 //#endregion
 //#region src/html/elements/carousel-item/index.ts
-define$26("carousel-item", CarouselItem);
+define$27("carousel-item", CarouselItem);
 //#endregion
 //#region src/html/elements/combobox/index.ts
-define$25("combobox", Combobox);
+define$26("combobox", Combobox);
 //#endregion
 //#region src/html/elements/dialog/index.ts
-define$24("dialog", Dialog);
+define$25("dialog", Dialog);
 //#endregion
 //#region src/html/elements/divider/index.ts
-define$23("divider", Divider);
+define$24("divider", Divider);
 //#endregion
 //#region src/html/elements/drawer/index.ts
-define$22("drawer", Drawer);
+define$23("drawer", Drawer);
 //#endregion
 //#region src/html/elements/dropdown/index.ts
-define$21("dropdown", Dropdown);
+define$22("dropdown", Dropdown);
 //#endregion
 //#region src/html/elements/dropdown-item/index.ts
-define$20("dropdown-item", DropdownItem);
+define$21("dropdown-item", DropdownItem);
 //#endregion
 //#region src/html/elements/dropdown-label/index.ts
-define$19("dropdown-label", DropdownLabel);
+define$20("dropdown-label", DropdownLabel);
 //#endregion
 //#region src/html/elements/form-field/index.ts
-define$18("form-field", FormField);
+define$19("form-field", FormField);
 //#endregion
 //#region src/html/elements/icon/index.ts
-define$17("icon", Icon);
+define$18("icon", Icon);
 //#endregion
 //#region src/html/elements/input-group/index.ts
-define$16("input-group", InputGroup);
+define$17("input-group", InputGroup);
 //#endregion
 //#region src/html/elements/input-otp/index.ts
-define$15("input-otp", InputOtp);
+define$16("input-otp", InputOtp);
 //#endregion
 //#region src/html/elements/input-stepper/index.ts
-define$14("input-stepper", InputStepper);
+define$15("input-stepper", InputStepper);
 //#endregion
 //#region src/html/elements/popover/index.ts
-define$13("popover", Popover);
+define$14("popover", Popover);
 //#endregion
 //#region src/html/elements/prose-editor/index.ts
-define$12("prose-editor", ProseEditor);
+define$13("prose-editor", ProseEditor);
 //#endregion
 //#region src/html/elements/rating/index.ts
-define$11("rating", Rating);
+define$12("rating", Rating);
+//#endregion
+//#region src/html/elements/segmented-control/index.ts
+define$11("segmented-control", SegmentedControl);
 //#endregion
 //#region src/html/elements/select/index.ts
 define$10("select", Select);

package/cdn/standalone.js.map

@@ -1 +1 @@
-{"version":3,"file":"standalone.js","names":[],"sources":["../src/html/elements/alert/index.ts","../src/html/elements/alert-dialog/index.ts","../src/html/elements/avatar/index.ts","../src/html/elements/badge/index.ts","../src/html/elements/button-group/index.ts","../src/html/elements/carousel/index.ts","../src/html/elements/carousel-item/index.ts","../src/html/elements/combobox/index.ts","../src/html/elements/dialog/index.ts","../src/html/elements/divider/index.ts","../src/html/elements/drawer/index.ts","../src/html/elements/dropdown/index.ts","../src/html/elements/dropdown-item/index.ts","../src/html/elements/dropdown-label/index.ts","../src/html/elements/form-field/index.ts","../src/html/elements/icon/index.ts","../src/html/elements/input-group/index.ts","../src/html/elements/input-otp/index.ts","../src/html/elements/input-stepper/index.ts","../src/html/elements/popover/index.ts","../src/html/elements/prose-editor/index.ts","../src/html/elements/rating/index.ts","../src/html/elements/select/index.ts","../src/html/elements/skeleton/index.ts","../src/html/elements/slider/index.ts","../src/html/elements/spinner/index.ts","../src/html/elements/sticky-bar/index.ts","../src/html/elements/tabs/index.ts","../src/html/elements/tag/index.ts","../src/html/elements/toast/index.ts","../src/html/elements/tooltip/index.ts","../src/html/elements/tree/index.ts","../src/html/elements/tree-item/index.ts","../src/html/registry.ts"],"sourcesContent":["import { define } from '../../define.js';\nimport { Alert } from './alert.js';\nexport * from './alert.js';\ndefine('alert', Alert);\n","import { define } from '../../define.js';\nimport { AlertDialog } from './alert-dialog.js';\nexport * from './alert-dialog.js';\ndefine('alert-dialog', AlertDialog);\n","import { define } from '../../define.js';\nimport { Avatar } from './avatar.js';\nexport * from './avatar.js';\ndefine('avatar', Avatar);\n","import { define } from '../../define.js';\nimport { Badge } from './badge.js';\nexport * from './badge.js';\ndefine('badge', Badge);\n","import { define } from '../../define.js';\nimport { ButtonGroup } from './button-group.js';\nexport * from './button-group.js';\ndefine('button-group', ButtonGroup);\n","import { define } from '../../define.js';\nimport { Carousel } from './carousel.js';\nexport * from './carousel.js';\ndefine('carousel', Carousel);\n","import { define } from '../../define.js';\nimport { CarouselItem } from './carousel-item.js';\nexport * from './carousel-item.js';\ndefine('carousel-item', CarouselItem);\n","import { define } from '../../define.js';\nimport { Combobox } from './combobox.js';\nexport * from './combobox.js';\ndefine('combobox', Combobox);\n","import { define } from '../../define.js';\nimport { Dialog } from './dialog.js';\nexport * from './dialog.js';\ndefine('dialog', Dialog);\n","import { define } from '../../define.js';\nimport { Divider } from './divider.js';\nexport * from './divider.js';\ndefine('divider', Divider);\n","import { define } from '../../define.js';\nimport { Drawer } from './drawer.js';\nexport * from './drawer.js';\ndefine('drawer', Drawer);\n","import { define } from '../../define.js';\nimport { Dropdown } from './dropdown.js';\nexport * from './dropdown.js';\ndefine('dropdown', Dropdown);\n","import { define } from '../../define.js';\nimport { DropdownItem } from './dropdown-item.js';\nexport * from './dropdown-item.js';\ndefine('dropdown-item', DropdownItem);\n","import { define } from '../../define.js';\nimport { DropdownLabel } from './dropdown-label.js';\nexport * from './dropdown-label.js';\ndefine('dropdown-label', DropdownLabel);\n","import { define } from '../../define.js';\nimport { FormField } from './form-field.js';\nexport * from './form-field.js';\ndefine('form-field', FormField);\n","import { define } from '../../define.js';\nimport { Icon } from './icon.js';\nexport * from './icon.js';\ndefine('icon', Icon);\n","import { define } from '../../define.js';\nimport { InputGroup } from './input-group.js';\nexport * from './input-group.js';\ndefine('input-group', InputGroup);\n","import { define } from '../../define.js';\nimport { InputOtp } from './input-otp.js';\nexport * from './input-otp.js';\ndefine('input-otp', InputOtp);\n","import { define } from '../../define.js';\nimport { InputStepper } from './input-stepper.js';\nexport * from './input-stepper.js';\ndefine('input-stepper', InputStepper);\n","import { define } from '../../define.js';\nimport { Popover } from './popover.js';\nexport * from './popover.js';\ndefine('popover', Popover);\n","import { define } from '../../define.js';\nimport { ProseEditor } from './prose-editor.js';\nexport * from './prose-editor.js';\ndefine('prose-editor', ProseEditor);\n","import { define } from '../../define.js';\nimport { Rating } from './rating.js';\nexport * from './rating.js';\ndefine('rating', Rating);\n","import { define } from '../../define.js';\nimport { Select } from './select.js';\nexport * from './select.js';\ndefine('select', Select);\n","import { define } from '../../define.js';\nimport { Skeleton } from './skeleton.js';\nexport * from './skeleton.js';\ndefine('skeleton', Skeleton);\n","import { define } from '../../define.js';\nimport { Slider } from './slider.js';\nexport * from './slider.js';\ndefine('slider', Slider);\n","import { define } from '../../define.js';\nimport { Spinner } from './spinner.js';\nexport * from './spinner.js';\ndefine('spinner', Spinner);\n","import { define } from '../../define.js';\nimport { StickyBar } from './sticky-bar.js';\nexport * from './sticky-bar.js';\ndefine('sticky-bar', StickyBar);\n","import { define } from '../../define.js';\nimport { Tabs } from './tabs.js';\nexport * from './tabs.js';\ndefine('tabs', Tabs);\n","import { define } from '../../define.js';\nimport { Tag } from './tag.js';\nexport * from './tag.js';\ndefine('tag', Tag);\n","import { define } from '../../define.js';\nimport { Toast, ToastItem } from './toast.js';\nexport * from './toast.js';\ndefine('toast', Toast);\ndefine('toast-item', ToastItem);\n","import { define } from '../../define.js';\nimport { Tooltip } from './tooltip.js';\nexport * from './tooltip.js';\ndefine('tooltip', Tooltip);\n","import { define } from '../../define.js';\nimport { Tree } from './tree.js';\nexport * from './tree.js';\ndefine('tree', Tree);\n","import { define } from '../../define.js';\nimport { TreeItem } from './tree-item.js';\nexport * from './tree-item.js';\ndefine('tree-item', TreeItem);\n","/** Every component base name the library ships. */\nexport type ElementBaseName =\n  | 'alert'\n  | 'alert-dialog'\n  | 'avatar'\n  | 'badge'\n  | 'button-group'\n  | 'carousel'\n  | 'carousel-item'\n  | 'combobox'\n  | 'dialog'\n  | 'divider'\n  | 'drawer'\n  | 'dropdown'\n  | 'dropdown-item'\n  | 'dropdown-label'\n  | 'form-field'\n  | 'icon'\n  | 'input-group'\n  | 'input-otp'\n  | 'input-stepper'\n  | 'popover'\n  | 'prose-editor'\n  | 'skeleton'\n  | 'slider'\n  | 'spinner'\n  | 'rating'\n  | 'select'\n  | 'sticky-bar'\n  | 'stories'\n  | 'story'\n  | 'stories-viewer'\n  | 'tabs'\n  | 'tag'\n  | 'toast'\n  | 'toast-item'\n  | 'tooltip'\n  | 'tree'\n  | 'tree-item';\n\nlet _elementPrefix = 'l';\nlet _cssPrefix = 'l';\nconst _registered = new Set<ElementBaseName>();\n\n/** Set the global prefix. Must be called before defining elements. */\nexport function setPrefix(prefix: { element: string; css: string }): void {\n  _elementPrefix = prefix.element;\n  _cssPrefix = prefix.css;\n}\n\n/** Get the current prefixes. */\nexport function getPrefix(): { element: string; css: string } {\n  return { element: _elementPrefix, css: _cssPrefix };\n}\n\n/** Derive the full tag name from element prefix + base name. */\nexport function tagName(baseName: ElementBaseName): string {\n  return `${_elementPrefix}-${baseName}`;\n}\n\n/** Prefix a CSS class name. `cls('toast-icon')` → `'l-toast-icon'` */\nexport function cls(name: string): string {\n  return `${_cssPrefix}-${name}`;\n}\n\n/** Generate a globally unique prefixed ID. `uniqueId('toast')` → `'l:toast:1'` */\nlet _uid = 0;\nexport function uniqueId(base: string): string {\n  return `${_cssPrefix}:${base}:${++_uid}`;\n}\n\n/** Check if a base name is already registered. */\nexport function isRegistered(baseName: ElementBaseName): boolean {\n  return _registered.has(baseName);\n}\n\n/** Mark a base name as registered. Called internally by define(). */\nexport function markRegistered(baseName: ElementBaseName): void {\n  _registered.add(baseName);\n}\n"],"mappings":";AAGA,UAAO,SAAS,KAAK;;;ACArB,UAAO,gBAAgB,WAAW;;;ACAlC,UAAO,UAAU,MAAM;;;ACAvB,UAAO,SAAS,KAAK;;;ACArB,UAAO,gBAAgB,WAAW;;;ACAlC,UAAO,YAAY,QAAQ;;;ACA3B,UAAO,iBAAiB,YAAY;;;ACApC,UAAO,YAAY,QAAQ;;;ACA3B,UAAO,UAAU,MAAM;;;ACAvB,UAAO,WAAW,OAAO;;;ACAzB,UAAO,UAAU,MAAM;;;ACAvB,UAAO,YAAY,QAAQ;;;ACA3B,UAAO,iBAAiB,YAAY;;;ACApC,UAAO,kBAAkB,aAAa;;;ACAtC,UAAO,cAAc,SAAS;;;ACA9B,UAAO,QAAQ,IAAI;;;ACAnB,UAAO,eAAe,UAAU;;;ACAhC,UAAO,aAAa,QAAQ;;;ACA5B,UAAO,iBAAiB,YAAY;;;ACApC,UAAO,WAAW,OAAO;;;ACAzB,UAAO,gBAAgB,WAAW;;;ACAlC,UAAO,UAAU,MAAM;;;ACAvB,UAAO,UAAU,MAAM;;;ACAvB,SAAO,YAAY,QAAQ;;;ACA3B,SAAO,UAAU,MAAM;;;ACAvB,SAAO,WAAW,OAAO;;;ACAzB,SAAO,cAAc,SAAS;;;ACA9B,SAAO,QAAQ,IAAI;;;ACAnB,SAAO,OAAO,GAAG;;;ACAjB,SAAO,SAAS,KAAK;AACrB,SAAO,cAAc,SAAS;;;ACD9B,SAAO,WAAW,OAAO;;;ACAzB,SAAO,QAAQ,IAAI;;;ACAnB,OAAO,aAAa,QAAQ;;;ACqC5B,IAAI,iBAAiB;AACrB,IAAI,aAAa;;AAIjB,SAAgB,UAAU,QAAgD;CACxE,iBAAiB,OAAO;CACxB,aAAa,OAAO;AACtB;;AAGA,SAAgB,YAA8C;CAC5D,OAAO;EAAE,SAAS;EAAgB,KAAK;CAAW;AACpD"}
+{"version":3,"file":"standalone.js","names":[],"sources":["../src/html/elements/alert/index.ts","../src/html/elements/alert-dialog/index.ts","../src/html/elements/avatar/index.ts","../src/html/elements/badge/index.ts","../src/html/elements/button-group/index.ts","../src/html/elements/carousel/index.ts","../src/html/elements/carousel-item/index.ts","../src/html/elements/combobox/index.ts","../src/html/elements/dialog/index.ts","../src/html/elements/divider/index.ts","../src/html/elements/drawer/index.ts","../src/html/elements/dropdown/index.ts","../src/html/elements/dropdown-item/index.ts","../src/html/elements/dropdown-label/index.ts","../src/html/elements/form-field/index.ts","../src/html/elements/icon/index.ts","../src/html/elements/input-group/index.ts","../src/html/elements/input-otp/index.ts","../src/html/elements/input-stepper/index.ts","../src/html/elements/popover/index.ts","../src/html/elements/prose-editor/index.ts","../src/html/elements/rating/index.ts","../src/html/elements/segmented-control/index.ts","../src/html/elements/select/index.ts","../src/html/elements/skeleton/index.ts","../src/html/elements/slider/index.ts","../src/html/elements/spinner/index.ts","../src/html/elements/sticky-bar/index.ts","../src/html/elements/tabs/index.ts","../src/html/elements/tag/index.ts","../src/html/elements/toast/index.ts","../src/html/elements/tooltip/index.ts","../src/html/elements/tree/index.ts","../src/html/elements/tree-item/index.ts","../src/html/registry.ts"],"sourcesContent":["import { define } from '../../define.js';\nimport { Alert } from './alert.js';\nexport * from './alert.js';\ndefine('alert', Alert);\n","import { define } from '../../define.js';\nimport { AlertDialog } from './alert-dialog.js';\nexport * from './alert-dialog.js';\ndefine('alert-dialog', AlertDialog);\n","import { define } from '../../define.js';\nimport { Avatar } from './avatar.js';\nexport * from './avatar.js';\ndefine('avatar', Avatar);\n","import { define } from '../../define.js';\nimport { Badge } from './badge.js';\nexport * from './badge.js';\ndefine('badge', Badge);\n","import { define } from '../../define.js';\nimport { ButtonGroup } from './button-group.js';\nexport * from './button-group.js';\ndefine('button-group', ButtonGroup);\n","import { define } from '../../define.js';\nimport { Carousel } from './carousel.js';\nexport * from './carousel.js';\ndefine('carousel', Carousel);\n","import { define } from '../../define.js';\nimport { CarouselItem } from './carousel-item.js';\nexport * from './carousel-item.js';\ndefine('carousel-item', CarouselItem);\n","import { define } from '../../define.js';\nimport { Combobox } from './combobox.js';\nexport * from './combobox.js';\ndefine('combobox', Combobox);\n","import { define } from '../../define.js';\nimport { Dialog } from './dialog.js';\nexport * from './dialog.js';\ndefine('dialog', Dialog);\n","import { define } from '../../define.js';\nimport { Divider } from './divider.js';\nexport * from './divider.js';\ndefine('divider', Divider);\n","import { define } from '../../define.js';\nimport { Drawer } from './drawer.js';\nexport * from './drawer.js';\ndefine('drawer', Drawer);\n","import { define } from '../../define.js';\nimport { Dropdown } from './dropdown.js';\nexport * from './dropdown.js';\ndefine('dropdown', Dropdown);\n","import { define } from '../../define.js';\nimport { DropdownItem } from './dropdown-item.js';\nexport * from './dropdown-item.js';\ndefine('dropdown-item', DropdownItem);\n","import { define } from '../../define.js';\nimport { DropdownLabel } from './dropdown-label.js';\nexport * from './dropdown-label.js';\ndefine('dropdown-label', DropdownLabel);\n","import { define } from '../../define.js';\nimport { FormField } from './form-field.js';\nexport * from './form-field.js';\ndefine('form-field', FormField);\n","import { define } from '../../define.js';\nimport { Icon } from './icon.js';\nexport * from './icon.js';\ndefine('icon', Icon);\n","import { define } from '../../define.js';\nimport { InputGroup } from './input-group.js';\nexport * from './input-group.js';\ndefine('input-group', InputGroup);\n","import { define } from '../../define.js';\nimport { InputOtp } from './input-otp.js';\nexport * from './input-otp.js';\ndefine('input-otp', InputOtp);\n","import { define } from '../../define.js';\nimport { InputStepper } from './input-stepper.js';\nexport * from './input-stepper.js';\ndefine('input-stepper', InputStepper);\n","import { define } from '../../define.js';\nimport { Popover } from './popover.js';\nexport * from './popover.js';\ndefine('popover', Popover);\n","import { define } from '../../define.js';\nimport { ProseEditor } from './prose-editor.js';\nexport * from './prose-editor.js';\ndefine('prose-editor', ProseEditor);\n","import { define } from '../../define.js';\nimport { Rating } from './rating.js';\nexport * from './rating.js';\ndefine('rating', Rating);\n","import { define } from '../../define.js';\nimport { SegmentedControl } from './segmented-control.js';\nexport * from './segmented-control.js';\ndefine('segmented-control', SegmentedControl);\n","import { define } from '../../define.js';\nimport { Select } from './select.js';\nexport * from './select.js';\ndefine('select', Select);\n","import { define } from '../../define.js';\nimport { Skeleton } from './skeleton.js';\nexport * from './skeleton.js';\ndefine('skeleton', Skeleton);\n","import { define } from '../../define.js';\nimport { Slider } from './slider.js';\nexport * from './slider.js';\ndefine('slider', Slider);\n","import { define } from '../../define.js';\nimport { Spinner } from './spinner.js';\nexport * from './spinner.js';\ndefine('spinner', Spinner);\n","import { define } from '../../define.js';\nimport { StickyBar } from './sticky-bar.js';\nexport * from './sticky-bar.js';\ndefine('sticky-bar', StickyBar);\n","import { define } from '../../define.js';\nimport { Tabs } from './tabs.js';\nexport * from './tabs.js';\ndefine('tabs', Tabs);\n","import { define } from '../../define.js';\nimport { Tag } from './tag.js';\nexport * from './tag.js';\ndefine('tag', Tag);\n","import { define } from '../../define.js';\nimport { Toast, ToastItem } from './toast.js';\nexport * from './toast.js';\ndefine('toast', Toast);\ndefine('toast-item', ToastItem);\n","import { define } from '../../define.js';\nimport { Tooltip } from './tooltip.js';\nexport * from './tooltip.js';\ndefine('tooltip', Tooltip);\n","import { define } from '../../define.js';\nimport { Tree } from './tree.js';\nexport * from './tree.js';\ndefine('tree', Tree);\n","import { define } from '../../define.js';\nimport { TreeItem } from './tree-item.js';\nexport * from './tree-item.js';\ndefine('tree-item', TreeItem);\n","/** Every component base name the library ships. */\nexport type ElementBaseName =\n  | 'alert'\n  | 'alert-dialog'\n  | 'avatar'\n  | 'badge'\n  | 'button-group'\n  | 'carousel'\n  | 'carousel-item'\n  | 'combobox'\n  | 'dialog'\n  | 'divider'\n  | 'drawer'\n  | 'dropdown'\n  | 'dropdown-item'\n  | 'dropdown-label'\n  | 'form-field'\n  | 'icon'\n  | 'input-group'\n  | 'input-otp'\n  | 'input-stepper'\n  | 'popover'\n  | 'prose-editor'\n  | 'skeleton'\n  | 'slider'\n  | 'spinner'\n  | 'rating'\n  | 'segmented-control'\n  | 'select'\n  | 'sticky-bar'\n  | 'stories'\n  | 'story'\n  | 'stories-viewer'\n  | 'tabs'\n  | 'tag'\n  | 'toast'\n  | 'toast-item'\n  | 'tooltip'\n  | 'tree'\n  | 'tree-item';\n\nlet _elementPrefix = 'l';\nlet _cssPrefix = 'l';\nconst _registered = new Set<ElementBaseName>();\n\n/** Set the global prefix. Must be called before defining elements. */\nexport function setPrefix(prefix: { element: string; css: string }): void {\n  _elementPrefix = prefix.element;\n  _cssPrefix = prefix.css;\n}\n\n/** Get the current prefixes. */\nexport function getPrefix(): { element: string; css: string } {\n  return { element: _elementPrefix, css: _cssPrefix };\n}\n\n/** Derive the full tag name from element prefix + base name. */\nexport function tagName(baseName: ElementBaseName): string {\n  return `${_elementPrefix}-${baseName}`;\n}\n\n/** Prefix a CSS class name. `cls('toast-icon')` → `'l-toast-icon'` */\nexport function cls(name: string): string {\n  return `${_cssPrefix}-${name}`;\n}\n\n/** Generate a globally unique prefixed ID. `uniqueId('toast')` → `'l:toast:1'` */\nlet _uid = 0;\nexport function uniqueId(base: string): string {\n  return `${_cssPrefix}:${base}:${++_uid}`;\n}\n\n/** Check if a base name is already registered. */\nexport function isRegistered(baseName: ElementBaseName): boolean {\n  return _registered.has(baseName);\n}\n\n/** Mark a base name as registered. Called internally by define(). */\nexport function markRegistered(baseName: ElementBaseName): void {\n  _registered.add(baseName);\n}\n"],"mappings":";AAGA,UAAO,SAAS,KAAK;;;ACArB,UAAO,gBAAgB,WAAW;;;ACAlC,UAAO,UAAU,MAAM;;;ACAvB,UAAO,SAAS,KAAK;;;ACArB,UAAO,gBAAgB,WAAW;;;ACAlC,UAAO,YAAY,QAAQ;;;ACA3B,UAAO,iBAAiB,YAAY;;;ACApC,UAAO,YAAY,QAAQ;;;ACA3B,UAAO,UAAU,MAAM;;;ACAvB,UAAO,WAAW,OAAO;;;ACAzB,UAAO,UAAU,MAAM;;;ACAvB,UAAO,YAAY,QAAQ;;;ACA3B,UAAO,iBAAiB,YAAY;;;ACApC,UAAO,kBAAkB,aAAa;;;ACAtC,UAAO,cAAc,SAAS;;;ACA9B,UAAO,QAAQ,IAAI;;;ACAnB,UAAO,eAAe,UAAU;;;ACAhC,UAAO,aAAa,QAAQ;;;ACA5B,UAAO,iBAAiB,YAAY;;;ACApC,UAAO,WAAW,OAAO;;;ACAzB,UAAO,gBAAgB,WAAW;;;ACAlC,UAAO,UAAU,MAAM;;;ACAvB,UAAO,qBAAqB,gBAAgB;;;ACA5C,UAAO,UAAU,MAAM;;;ACAvB,SAAO,YAAY,QAAQ;;;ACA3B,SAAO,UAAU,MAAM;;;ACAvB,SAAO,WAAW,OAAO;;;ACAzB,SAAO,cAAc,SAAS;;;ACA9B,SAAO,QAAQ,IAAI;;;ACAnB,SAAO,OAAO,GAAG;;;ACAjB,SAAO,SAAS,KAAK;AACrB,SAAO,cAAc,SAAS;;;ACD9B,SAAO,WAAW,OAAO;;;ACAzB,SAAO,QAAQ,IAAI;;;ACAnB,OAAO,aAAa,QAAQ;;;ACsC5B,IAAI,iBAAiB;AACrB,IAAI,aAAa;;AAIjB,SAAgB,UAAU,QAAgD;CACxE,iBAAiB,OAAO;CACxB,aAAa,OAAO;AACtB;;AAGA,SAAgB,YAA8C;CAC5D,OAAO;EAAE,SAAS;EAAgB,KAAK;CAAW;AACpD"}

package/cdn/styles/elements/segmented-control.css

@@ -0,0 +1,165 @@
+@layer components {
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Segmented control
+   A single-select switch: a muted track with a sliding pill behind the
+   selected segment. Shares its visual language with l-tabs[variant='enclosed']
+   (same neutral-subtle track + surface pill), but carries radio-group
+   semantics instead of tabs.
+
+   Structural selectors (not [role='…']) so the control is styled from plain
+   light DOM — it is progressive, so it must look right before JS adds ARIA.
+   The host is the flex track; its `<button>` children are the segments. JS
+   only enhances (roles, keyboard, and the sliding pill offsets).
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-segmented-control {
+    --_height: var(--l-size-control-md);
+    --_pad: 0.1875rem;
+    --_duration: 150ms;
+    --_easing: cubic-bezier(0.25, 0.1, 0.25, 1);
+
+    display: inline-flex;
+    position: relative;
+    align-items: stretch;
+    height: var(--_height);
+    padding: var(--_pad);
+    gap: calc(var(--spacing) * 0.5);
+    background: var(--l-color-bg-fill-neutral-subtle);
+    border-radius: var(--border-radius, var(--l-radius-lg));
+    /* Match the form-control border (--l-color-border, as used by .l-button,
+       l-select, and l-input) so the track lines up with dropdowns in a toolbar
+       — not the lighter --l-color-divider that enclosed tabs use. */
+    box-shadow: inset 0 0 0 1px var(--l-color-border);
+
+    /* Sliding pill behind the selected segment. Positioned by JS via
+       --_indicator-left / --_indicator-width (button offsetLeft / offsetWidth);
+       width 0 until JS runs, so it stays invisible in the no-JS fallback. */
+    &::before {
+      content: '';
+      position: absolute;
+      top: var(--_pad);
+      bottom: var(--_pad);
+      left: 0;
+      width: var(--_indicator-width, 0);
+      transform: translateX(var(--_indicator-left, 0));
+      background: var(--indicator-color, var(--l-color-surface));
+      border-radius: var(--l-radius-md);
+      box-shadow:
+        0 1px 3px 0 rgb(0 0 0 / 0.08),
+        0 1px 2px -1px rgb(0 0 0 / 0.08);
+      pointer-events: none;
+      will-change: transform, width;
+      transition:
+        transform var(--_duration) var(--_easing),
+        width var(--_duration) var(--_easing);
+    }
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Sizes — align with .l-button and form controls at the same size.
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-segmented-control[size='sm'] {
+    --_height: var(--l-size-control-sm);
+  }
+
+  l-segmented-control[size='lg'] {
+    --_height: var(--l-size-control-lg);
+  }
+
+  l-segmented-control[size='xl'] {
+    --_height: var(--l-size-control-xl);
+  }
+
+  /* Whole-control disabled (host `disabled` attribute, form-associated). */
+  l-segmented-control[disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Segments
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-segmented-control button {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing) * 1.5);
+    padding-inline: calc(var(--spacing) * 3);
+    margin: 0;
+    appearance: none;
+    border: none;
+    background: none;
+    border-radius: var(--l-radius-md);
+    color: var(--l-color-text-secondary);
+    font-family: inherit;
+    font-size: var(--l-text-sm);
+    font-weight: 500;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: color 150ms;
+
+    /* Icon-only segments (JS-detected, no visible text): square them. */
+    &[data-icon-only] {
+      padding-inline: 0;
+      width: calc(var(--_height) - 2 * var(--_pad));
+    }
+
+    &[aria-checked='true'] {
+      color: var(--l-color-text-primary);
+    }
+
+    @media (hover: hover) {
+      &:hover:not([aria-checked='true']):not(:disabled):not([aria-disabled='true']) {
+        color: var(--l-color-text-primary);
+      }
+    }
+
+    &:disabled,
+    &[aria-disabled='true'] {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--l-focus-ring);
+      outline-offset: -2px;
+      border-radius: var(--l-radius-sm);
+    }
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Full width
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-segmented-control[full-width] {
+    display: flex;
+  }
+
+  l-segmented-control[full-width] button {
+    flex: 1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    l-segmented-control::before {
+      transition-duration: 0ms;
+    }
+
+    l-segmented-control button {
+      transition-duration: 0ms;
+    }
+  }
+}

package/dist/css/elements/segmented-control.css

@@ -0,0 +1,165 @@
+@layer components {
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Segmented control
+   A single-select switch: a muted track with a sliding pill behind the
+   selected segment. Shares its visual language with l-tabs[variant='enclosed']
+   (same neutral-subtle track + surface pill), but carries radio-group
+   semantics instead of tabs.
+
+   Structural selectors (not [role='…']) so the control is styled from plain
+   light DOM — it is progressive, so it must look right before JS adds ARIA.
+   The host is the flex track; its `<button>` children are the segments. JS
+   only enhances (roles, keyboard, and the sliding pill offsets).
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-segmented-control {
+    --_height: var(--l-size-control-md);
+    --_pad: 0.1875rem;
+    --_duration: 150ms;
+    --_easing: cubic-bezier(0.25, 0.1, 0.25, 1);
+
+    display: inline-flex;
+    position: relative;
+    align-items: stretch;
+    height: var(--_height);
+    padding: var(--_pad);
+    gap: calc(var(--spacing) * 0.5);
+    background: var(--l-color-bg-fill-neutral-subtle);
+    border-radius: var(--border-radius, var(--l-radius-lg));
+    /* Match the form-control border (--l-color-border, as used by .l-button,
+       l-select, and l-input) so the track lines up with dropdowns in a toolbar
+       — not the lighter --l-color-divider that enclosed tabs use. */
+    box-shadow: inset 0 0 0 1px var(--l-color-border);
+
+    /* Sliding pill behind the selected segment. Positioned by JS via
+       --_indicator-left / --_indicator-width (button offsetLeft / offsetWidth);
+       width 0 until JS runs, so it stays invisible in the no-JS fallback. */
+    &::before {
+      content: '';
+      position: absolute;
+      top: var(--_pad);
+      bottom: var(--_pad);
+      left: 0;
+      width: var(--_indicator-width, 0);
+      transform: translateX(var(--_indicator-left, 0));
+      background: var(--indicator-color, var(--l-color-surface));
+      border-radius: var(--l-radius-md);
+      box-shadow:
+        0 1px 3px 0 rgb(0 0 0 / 0.08),
+        0 1px 2px -1px rgb(0 0 0 / 0.08);
+      pointer-events: none;
+      will-change: transform, width;
+      transition:
+        transform var(--_duration) var(--_easing),
+        width var(--_duration) var(--_easing);
+    }
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Sizes — align with .l-button and form controls at the same size.
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-segmented-control[size='sm'] {
+    --_height: var(--l-size-control-sm);
+  }
+
+  l-segmented-control[size='lg'] {
+    --_height: var(--l-size-control-lg);
+  }
+
+  l-segmented-control[size='xl'] {
+    --_height: var(--l-size-control-xl);
+  }
+
+  /* Whole-control disabled (host `disabled` attribute, form-associated). */
+  l-segmented-control[disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Segments
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-segmented-control button {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing) * 1.5);
+    padding-inline: calc(var(--spacing) * 3);
+    margin: 0;
+    appearance: none;
+    border: none;
+    background: none;
+    border-radius: var(--l-radius-md);
+    color: var(--l-color-text-secondary);
+    font-family: inherit;
+    font-size: var(--l-text-sm);
+    font-weight: 500;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: color 150ms;
+
+    /* Icon-only segments (JS-detected, no visible text): square them. */
+    &[data-icon-only] {
+      padding-inline: 0;
+      width: calc(var(--_height) - 2 * var(--_pad));
+    }
+
+    &[aria-checked='true'] {
+      color: var(--l-color-text-primary);
+    }
+
+    @media (hover: hover) {
+      &:hover:not([aria-checked='true']):not(:disabled):not([aria-disabled='true']) {
+        color: var(--l-color-text-primary);
+      }
+    }
+
+    &:disabled,
+    &[aria-disabled='true'] {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--l-focus-ring);
+      outline-offset: -2px;
+      border-radius: var(--l-radius-sm);
+    }
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Full width
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-segmented-control[full-width] {
+    display: flex;
+  }
+
+  l-segmented-control[full-width] button {
+    flex: 1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    l-segmented-control::before {
+      transition-duration: 0ms;
+    }
+
+    l-segmented-control button {
+      transition-duration: 0ms;
+    }
+  }
+}