@bspk/ui 1.1.34 → 1.2.0

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

@@ -1,84 +1,8 @@
-import { ElementProps } from '../../index.js';
+import { TabOption, TabListProps } from '-/components/TabList';
+import { ElementProps } from '-/types/common';
 import './segmented-control.scss';
-export type SegmentedControlOption = {
-    /**
-     * The label of the option. This is the text that will be displayed on the option.
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * Determines if the element is [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /** The value of the option. If not provided, the label will be used as the value. */
-    value?: string;
-    /**
-     * The the icon to display before the label.
-     *
-     * @type BspkIcon
-     */
-    icon?: React.ReactNode;
-    /**
-     * The icon to display before the label when the option is active.
-     *
-     * @type BspkIcon
-     */
-    iconActive?: React.ReactNode;
-};
-export type SegmentedControlProps = {
-    /**
-     * The options to display. Each option has a label and an optional leading icon.
-     *
-     * @example
-     *     [
-     *         { value: '1', label: 'Option 1' },
-     *         { value: '2', label: 'Option 2' },
-     *         { value: '3', label: 'Option 3' },
-     *     ];
-     *
-     * @type Array<SegmentedControlOption>
-     * @required
-     */
-    options: SegmentedControlOption[];
-    /**
-     * The id of the selected option.
-     *
-     * @example
-     *     1;
-     *
-     * @required
-     */
-    value: SegmentedControlOption['value'];
-    /**
-     * The function to call when the option is clicked.
-     *
-     * @required
-     */
-    onChange: (value: SegmentedControlOption['value']) => void;
-    /**
-     * The size of the options.
-     *
-     * @default medium
-     */
-    size?: 'medium' | 'small';
-    /**
-     * The width of the options. If set to 'fill', the options will fill the width of the container. If set to 'hug',
-     * the options will be as wide as their content.
-     *
-     * @default hug
-     */
-    width?: 'fill' | 'hug';
-    /**
-     * Determines if the labels of the options should be displayed. If icons are not provided for every option this is
-     * ignored and labels are shown.
-     *
-     * @default true
-     */
-    showLabels?: boolean;
-};
+export type SegmentedControlOption = Pick<TabOption, 'disabled' | 'icon' | 'iconSelected' | 'label' | 'value'>;
+export type SegmentedControlProps = TabListProps<SegmentedControlOption>;
 /**
  * Navigation tool that organizes content across different screens and views.
  *
@@ -103,11 +27,7 @@ export type SegmentedControlProps = {
  *     }
  *
  * @name SegmentedControl
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function SegmentedControl({ onChange, value, size, options: optionsProp, width, showLabels: showLabelsProp, ...containerProps }: ElementProps<SegmentedControlProps, 'div'>): import("react/jsx-runtime").JSX.Element;
-declare namespace SegmentedControl {
-    var bspkName: string;
-}
-export { SegmentedControl };
+export declare function SegmentedControl({ onChange, value, size, options, width, iconsOnly, ...containerProps }: ElementProps<SegmentedControlProps, 'ul'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -1,7 +1,5 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Fragment } from 'react';
-import { Tooltip } from '../Tooltip';
-import { useOptionIconsInvalid } from '../../hooks/useOptionIconsInvalid';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TabList } from '../TabList';
 import './segmented-control.css.js';
 /**
  * Navigation tool that organizes content across different screens and views.
@@ -27,17 +25,9 @@ import './segmented-control.css.js';
  *     }
  *
  * @name SegmentedControl
- * @phase DesignReview
+ * @phase UXReview
  */
-function SegmentedControl({ onChange, value, size = 'medium', options: optionsProp, width = 'hug', showLabels: showLabelsProp = true, ...containerProps }) {
-    const options = Array.isArray(optionsProp) ? optionsProp : [];
-    useOptionIconsInvalid(options);
-    const hideLabels = showLabelsProp === false && options.every((item) => item.icon && item.label);
-    return (_jsx("div", { ...containerProps, "data-bspk": "segmented-control", "data-size": size, "data-width": width, children: options.map((item, index) => {
-            const isActive = item.value === value;
-            return (_jsx(Fragment, { children: _jsx(Tooltip, { disabled: !hideLabels, label: item.label, placement: "top", children: _jsx("button", { "aria-label": item.label, "data-first": index === 0 || undefined, "data-last": index === options.length - 1 || undefined, "data-selected": isActive || undefined, disabled: item.disabled || undefined, onClick: () => onChange(item.value || item.label), children: _jsx("span", { "data-outer": true, children: _jsxs("span", { "data-inner": true, children: [(isActive && item.iconActive) || item.icon, !hideLabels && item.label] }) }) }) }) }, item.value));
-        }) }));
+export function SegmentedControl({ onChange, value, size = 'medium', options, width = 'hug', iconsOnly, ...containerProps }) {
+    return (_jsx(TabList, { ...containerProps, "data-bspk": "segmented-control", iconsOnly: iconsOnly, onChange: onChange, options: options, size: size, value: value, width: width }));
 }
-SegmentedControl.bspkName = 'SegmentedControl';
-export { SegmentedControl };
 //# sourceMappingURL=SegmentedControl.js.map

package/dist/components/SegmentedControl/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,0BAA0B,CAAC;AAmFlC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,SAAS,gBAAgB,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,OAAO,EAAE,WAAW,EACpB,KAAK,GAAG,KAAK,EACb,UAAU,EAAE,cAAc,GAAG,IAAI,EACjC,GAAG,cAAc,EACwB;IACzC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9D,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAE/B,MAAM,UAAU,GAAG,cAAc,KAAK,KAAK,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IAEhG,OAAO,CACH,iBAAS,cAAc,eAAY,mBAAmB,eAAY,IAAI,gBAAc,KAAK,YACpF,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;YACtC,OAAO,CACH,KAAC,QAAQ,cACL,KAAC,OAAO,IAAC,QAAQ,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAC,KAAK,YAC9D,+BACgB,IAAI,CAAC,KAAK,gBACV,KAAK,KAAK,CAAC,IAAI,SAAS,eACzB,KAAK,KAAK,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,SAAS,mBACrC,QAAQ,IAAI,SAAS,EACpC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,YAEjD,6CACI,+CACK,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,IAAI,EAC1C,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,IACvB,GACJ,GACF,GACH,IAjBC,IAAI,CAAC,KAAK,CAkBd,CACd,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAED,gBAAgB,CAAC,QAAQ,GAAG,kBAAkB,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,OAAO,EAAgB,MAAM,sBAAsB,CAAC;AAGxE,OAAO,0BAA0B,CAAC;AAMlC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,OAAO,EACP,KAAK,GAAG,KAAK,EACb,SAAS,EACT,GAAG,cAAc,EACuB;IACxC,OAAO,CACH,KAAC,OAAO,OACA,cAAc,eACR,mBAAmB,EAC7B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,GACd,CACL,CAAC;AACN,CAAC"}

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

@@ -1,3 +1,3 @@
-import { ComponentExample } from '../../utils/demo';
 import { SegmentedControlProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 export declare const SegmentedControlExample: ComponentExample<SegmentedControlProps>;

package/dist/components/SegmentedControl/SegmentedControlExample.js

@@ -4,34 +4,55 @@ import { SvgDiamond } from '@bspk/icons/Diamond';
 import { SvgDiamondFill } from '@bspk/icons/DiamondFill';
 import { SvgSquare } from '@bspk/icons/Square';
 import { SvgSquareFill } from '@bspk/icons/SquareFill';
+const PRESET_OPTIONS = [
+    {
+        value: '1',
+        label: 'Option 1',
+        icon: _jsx(SvgDiamond, {}),
+        iconSelected: _jsx(SvgDiamondFill, {}),
+    },
+    {
+        value: '2',
+        label: 'Disabled 2',
+        disabled: true,
+        icon: _jsx(SvgCircle, {}),
+    },
+    {
+        value: '3',
+        label: 'Option 3',
+        icon: _jsx(SvgSquare, {}),
+        iconSelected: _jsx(SvgSquareFill, {}),
+    },
+];
 export const SegmentedControlExample = {
     containerStyle: { width: '100%' },
+    defaultState: {
+        options: PRESET_OPTIONS,
+    },
     presets: [
         {
             label: 'With icons',
             propState: {
-                options: [
-                    {
-                        value: '1',
-                        label: 'Option 1',
-                        icon: _jsx(SvgDiamond, {}),
-                        iconActive: _jsx(SvgDiamondFill, {}),
-                    },
-                    {
-                        value: '2',
-                        label: 'Disabled 2',
-                        disabled: true,
-                        icon: _jsx(SvgCircle, {}),
-                    },
-                    {
-                        value: '3',
-                        label: 'Option 3',
-                        icon: _jsx(SvgSquare, {}),
-                        iconActive: _jsx(SvgSquareFill, {}),
-                    },
-                ],
+                iconsOnly: undefined,
+            },
+        },
+        {
+            label: 'Icons only',
+            propState: {
+                iconsOnly: true,
+            },
+        },
+        {
+            label: 'Long label text',
+            propState: {
+                iconsOnly: undefined,
+                options: PRESET_OPTIONS.map((option) => ({
+                    ...option,
+                    label: `${option.label} with a very long label text that should be truncated if it exceeds the width of the control`,
+                })),
             },
         },
     ],
+    variants: false,
 };
 //# sourceMappingURL=SegmentedControlExample.js.map

package/dist/components/SegmentedControl/SegmentedControlExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlExample.js","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControlExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAMvD,MAAM,CAAC,MAAM,uBAAuB,GAA4C;IAC5E,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,OAAO,EAAE;QACL;YACI,KAAK,EAAE,YAAY;YACnB,SAAS,EAAE;gBACP,OAAO,EAAE;oBACL;wBACI,KAAK,EAAE,GAAG;wBACV,KAAK,EAAE,UAAU;wBACjB,IAAI,EAAE,KAAC,UAAU,KAAG;wBACpB,UAAU,EAAE,KAAC,cAAc,KAAG;qBACjC;oBACD;wBACI,KAAK,EAAE,GAAG;wBACV,KAAK,EAAE,YAAY;wBACnB,QAAQ,EAAE,IAAI;wBACd,IAAI,EAAE,KAAC,SAAS,KAAG;qBACtB;oBACD;wBACI,KAAK,EAAE,GAAG;wBACV,KAAK,EAAE,UAAU;wBACjB,IAAI,EAAE,KAAC,SAAS,KAAG;wBACnB,UAAU,EAAE,KAAC,aAAa,KAAG;qBAChC;iBACJ;aACJ;SACJ;KACJ;CACJ,CAAC"}
+{"version":3,"file":"SegmentedControlExample.js","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControlExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAKvD,MAAM,cAAc,GAA6B;IAC7C;QACI,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,KAAC,UAAU,KAAG;QACpB,YAAY,EAAE,KAAC,cAAc,KAAG;KACnC;IACD;QACI,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,YAAY;QACnB,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,KAAC,SAAS,KAAG;KACtB;IACD;QACI,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,KAAC,SAAS,KAAG;QACnB,YAAY,EAAE,KAAC,aAAa,KAAG;KAClC;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAA4C;IAC5E,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,YAAY,EAAE;QACV,OAAO,EAAE,cAAc;KAC1B;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,YAAY;YACnB,SAAS,EAAE;gBACP,SAAS,EAAE,SAAS;aACvB;SACJ;QACD;YACI,KAAK,EAAE,YAAY;YACnB,SAAS,EAAE;gBACP,SAAS,EAAE,IAAI;aAClB;SACJ;QACD;YACI,KAAK,EAAE,iBAAiB;YACxB,SAAS,EAAE;gBACP,SAAS,EAAE,SAAS;gBACpB,OAAO,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;oBACrC,GAAG,MAAM;oBACT,KAAK,EAAE,GAAG,MAAM,CAAC,KAAK,8FAA8F;iBACvH,CAAC,CAAC;aACN;SACJ;KACJ;IACD,QAAQ,EAAE,KAAK;CAClB,CAAC"}

package/dist/components/SegmentedControl/segmented-control.css

@@ -1,90 +1,43 @@
-[data-bspk=segmented-control] {
-  display: flex;
-  flex-direction: row;
-  max-width: 100%;
-  overflow: scroll;
-  --outer-height: var(--spacing-sizing-10);
-  --inner-height: var(--spacing-sizing-08);
-  --svg-width: 20px;
+ul[data-bspk=segmented-control] {
+  background: var(--surface-neutral-t3-low);
+  border-radius: var(--radius-sm);
+  padding: var(--spacing-sizing-01);
+  --padding: var(--spacing-sizing-04);
 }
-[data-bspk=segmented-control][data-width=fill] {
-  align-items: stretch;
-  width: 100%;
-  --btn-flex-grow: 1;
+ul[data-bspk=segmented-control][data-width=fill] {
   margin: 0 var(--spacing-sizing-04);
 }
-[data-bspk=segmented-control][data-width=hug] {
-  width: fit-content;
-  --btn-flex-grow: 0;
+ul[data-bspk=segmented-control][data-size=small] {
+  --padding: var(--spacing-sizing-03);
 }
-[data-bspk=segmented-control][data-size=small] {
-  --outer-height: var(--spacing-sizing-08);
-  --inner-height: var(--spacing-sizing-06);
-  --svg-width: 16px;
+ul[data-bspk=segmented-control][data-size=large] {
+  --padding: var(--spacing-sizing-05);
 }
-[data-bspk=segmented-control] svg {
-  width: var(--svg-width) !important;
-}
-[data-bspk=segmented-control] button {
-  border: 0;
-  cursor: pointer;
+ul[data-bspk=segmented-control] li {
   color: var(--foreground-neutral-on-surface);
-  flex-grow: var(--btn-flex-grow);
-  font: var(--labels-small);
-  margin: 0;
-  height: var(--spacing-sizing-12);
-  background: transparent;
-  position: relative;
-  white-space: nowrap;
-}
-[data-bspk=segmented-control] button [data-focus-ring] {
-  display: none;
-}
-[data-bspk=segmented-control] button [data-outer] {
-  height: var(--outer-height);
-  background: var(--surface-neutral-t3-low);
-  margin: var(--spacing-sizing-01) 0;
-  padding: var(--spacing-sizing-01) 0;
-  display: block;
-}
-[data-bspk=segmented-control] button [data-inner] {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  height: var(--inner-height);
-  border-bottom: 1px solid transparent;
-  justify-content: center;
-  gap: var(--spacing-sizing-01);
+  padding: 0 var(--padding);
   border-radius: var(--radius-sm);
-  padding: var(--spacing-sizing-02) var(--spacing-sizing-03);
 }
-[data-bspk=segmented-control] button:first-of-type [data-outer] {
-  border-top-left-radius: var(--radius-md);
-  border-bottom-left-radius: var(--radius-md);
-  padding-left: var(--spacing-sizing-01);
+ul[data-bspk=segmented-control] li:has([data-icon]) {
+  padding: 0 calc(var(--padding) - var(--spacing-sizing-01));
 }
-[data-bspk=segmented-control] button:last-of-type [data-outer] {
-  border-top-right-radius: var(--radius-md);
-  border-bottom-right-radius: var(--radius-md);
-  padding-right: var(--spacing-sizing-01);
+ul[data-bspk=segmented-control] li:has([data-icon]):has([data-label]) {
+  padding-right: var(--padding);
 }
-[data-bspk=segmented-control] button:not(:disabled):hover [data-inner] {
-  background: var(--interactions-neutral-hover-opacity);
+ul[data-bspk=segmented-control] li:not([aria-disabled])[aria-selected] {
+  background: var(--surface-neutral-t1-base);
+  box-shadow: 0 0 1px 0 var(--shadow-variant-03), 0 1px 1px 0 var(--shadow-variant-05);
 }
-[data-bspk=segmented-control] button:not(:disabled):active [data-inner] {
-  background: var(--interactions-neutral-press-opacity);
+ul[data-bspk=segmented-control] li:not([aria-disabled])[data-active], ul[data-bspk=segmented-control] li:not([aria-disabled]):hover:not(:has(~ [data-active])) {
+  background: var(--interactions-neutral-hover-opacity);
 }
-[data-bspk=segmented-control] button:not(:disabled)[data-selected] [data-inner] {
-  background: var(--surface-neutral-t1-base);
+ul[data-bspk=segmented-control] li:not([aria-disabled])[data-active][aria-selected], ul[data-bspk=segmented-control] li:not([aria-disabled]):hover:not(:has(~ [data-active]))[aria-selected] {
+  background: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=segmented-control] button:not(:disabled):focus-visible {
-  z-index: 2;
-  outline: solid 2px var(--stroke-neutral-focus);
+ul[data-bspk=segmented-control] li:not([aria-disabled]):active {
+  background: var(--interactions-neutral-press-opacity);
 }
-[data-bspk=segmented-control] button:disabled {
-  pointer-events: none;
+ul[data-bspk=segmented-control] li[aria-disabled] {
   color: var(--foreground-neutral-disabled-on-surface);
   cursor: not-allowed;
 }
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/SegmentedControl/segmented-control.css.js

@@ -1,96 +1,48 @@
 /** * This file is generated by the build script.
 * Do not edit this file directly. */
 const style = document.createElement('style');
-style.appendChild(document.createTextNode(`[data-bspk=segmented-control] {
-  display: flex;
-  flex-direction: row;
-  max-width: 100%;
-  overflow: scroll;
-  --outer-height: var(--spacing-sizing-10);
-  --inner-height: var(--spacing-sizing-08);
-  --svg-width: 20px;
+style.appendChild(document.createTextNode(`ul[data-bspk=segmented-control] {
+  background: var(--surface-neutral-t3-low);
+  border-radius: var(--radius-sm);
+  padding: var(--spacing-sizing-01);
+  --padding: var(--spacing-sizing-04);
 }
-[data-bspk=segmented-control][data-width=fill] {
-  align-items: stretch;
-  width: 100%;
-  --btn-flex-grow: 1;
+ul[data-bspk=segmented-control][data-width=fill] {
   margin: 0 var(--spacing-sizing-04);
 }
-[data-bspk=segmented-control][data-width=hug] {
-  width: fit-content;
-  --btn-flex-grow: 0;
+ul[data-bspk=segmented-control][data-size=small] {
+  --padding: var(--spacing-sizing-03);
 }
-[data-bspk=segmented-control][data-size=small] {
-  --outer-height: var(--spacing-sizing-08);
-  --inner-height: var(--spacing-sizing-06);
-  --svg-width: 16px;
+ul[data-bspk=segmented-control][data-size=large] {
+  --padding: var(--spacing-sizing-05);
 }
-[data-bspk=segmented-control] svg {
-  width: var(--svg-width) !important;
-}
-[data-bspk=segmented-control] button {
-  border: 0;
-  cursor: pointer;
+ul[data-bspk=segmented-control] li {
   color: var(--foreground-neutral-on-surface);
-  flex-grow: var(--btn-flex-grow);
-  font: var(--labels-small);
-  margin: 0;
-  height: var(--spacing-sizing-12);
-  background: transparent;
-  position: relative;
-  white-space: nowrap;
-}
-[data-bspk=segmented-control] button [data-focus-ring] {
-  display: none;
-}
-[data-bspk=segmented-control] button [data-outer] {
-  height: var(--outer-height);
-  background: var(--surface-neutral-t3-low);
-  margin: var(--spacing-sizing-01) 0;
-  padding: var(--spacing-sizing-01) 0;
-  display: block;
-}
-[data-bspk=segmented-control] button [data-inner] {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  height: var(--inner-height);
-  border-bottom: 1px solid transparent;
-  justify-content: center;
-  gap: var(--spacing-sizing-01);
+  padding: 0 var(--padding);
   border-radius: var(--radius-sm);
-  padding: var(--spacing-sizing-02) var(--spacing-sizing-03);
 }
-[data-bspk=segmented-control] button:first-of-type [data-outer] {
-  border-top-left-radius: var(--radius-md);
-  border-bottom-left-radius: var(--radius-md);
-  padding-left: var(--spacing-sizing-01);
+ul[data-bspk=segmented-control] li:has([data-icon]) {
+  padding: 0 calc(var(--padding) - var(--spacing-sizing-01));
 }
-[data-bspk=segmented-control] button:last-of-type [data-outer] {
-  border-top-right-radius: var(--radius-md);
-  border-bottom-right-radius: var(--radius-md);
-  padding-right: var(--spacing-sizing-01);
+ul[data-bspk=segmented-control] li:has([data-icon]):has([data-label]) {
+  padding-right: var(--padding);
 }
-[data-bspk=segmented-control] button:not(:disabled):hover [data-inner] {
-  background: var(--interactions-neutral-hover-opacity);
+ul[data-bspk=segmented-control] li:not([aria-disabled])[aria-selected] {
+  background: var(--surface-neutral-t1-base);
+  box-shadow: 0 0 1px 0 var(--shadow-variant-03), 0 1px 1px 0 var(--shadow-variant-05);
 }
-[data-bspk=segmented-control] button:not(:disabled):active [data-inner] {
-  background: var(--interactions-neutral-press-opacity);
+ul[data-bspk=segmented-control] li:not([aria-disabled])[data-active], ul[data-bspk=segmented-control] li:not([aria-disabled]):hover:not(:has(~ [data-active])) {
+  background: var(--interactions-neutral-hover-opacity);
 }
-[data-bspk=segmented-control] button:not(:disabled)[data-selected] [data-inner] {
-  background: var(--surface-neutral-t1-base);
+ul[data-bspk=segmented-control] li:not([aria-disabled])[data-active][aria-selected], ul[data-bspk=segmented-control] li:not([aria-disabled]):hover:not(:has(~ [data-active]))[aria-selected] {
+  background: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=segmented-control] button:not(:disabled):focus-visible {
-  z-index: 2;
-  outline: solid 2px var(--stroke-neutral-focus);
+ul[data-bspk=segmented-control] li:not([aria-disabled]):active {
+  background: var(--interactions-neutral-press-opacity);
 }
-[data-bspk=segmented-control] button:disabled {
-  pointer-events: none;
+ul[data-bspk=segmented-control] li[aria-disabled] {
   color: var(--foreground-neutral-disabled-on-surface);
   cursor: not-allowed;
 }
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/Select/Select.d.ts

@@ -1,5 +1,5 @@
-import { CommonProps, ElementProps } from '../../index.js';
-import { ComboboxProps } from '../Combobox';
+import { ComboboxProps } from '-/components/Combobox';
+import { CommonProps, ElementProps, FormFieldControlProps } from '-/types/common';
 import './select.scss';
 export type SelectOption = Record<string, unknown> & {
     /** The value of the option. */
@@ -7,7 +7,7 @@ export type SelectOption = Record<string, unknown> & {
     /** The label of the option. This is the text that will be displayed on the option. */
     label: string;
 };
-export type SelectProps<T extends SelectOption = SelectOption> = CommonProps<'name' | 'size'> & Pick<ComboboxProps<T>, 'disabled' | 'errorMessage' | 'id' | 'invalid' | 'isMulti' | 'itemDisplayCount' | 'label' | 'onChange' | 'readOnly' | 'selectAll' | 'value'> & {
+export type SelectProps<T extends SelectOption = SelectOption> = CommonProps<'invalid' | 'name' | 'size'> & FormFieldControlProps & Pick<ComboboxProps<T>, 'disabled' | 'id' | 'isMulti' | 'itemDisplayCount' | 'label' | 'onChange' | 'readOnly' | 'selectAll' | 'value'> & {
     /**
      * Array of options to display in the select
      *
@@ -76,11 +76,7 @@ export type SelectProps<T extends SelectOption = SelectOption> = CommonProps<'na
  *     }
  *
  * @name Select
- * @phase DesignReview
+ * @phase Dev
  */
-declare function Select({ options, value: selected, onChange, label, placeholder, size, itemDisplayCount, disabled, id: propId, invalid, errorMessage, readOnly, name, isMulti, selectAll, description, ...props }: ElementProps<SelectProps, 'button'>): import("react/jsx-runtime").JSX.Element;
-declare namespace Select {
-    var bspkName: string;
-}
-export { Select };
+export declare function Select({ options, value: selected, onChange, label, placeholder, size, itemDisplayCount, disabled, id: propId, invalid, readOnly, name, isMulti, selectAll, description, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, ...props }: ElementProps<SelectProps, 'button'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Select/Select.js

@@ -39,9 +39,9 @@ import './select.css.js';
  *     }
  *
  * @name Select
- * @phase DesignReview
+ * @phase Dev
  */
-function Select({ options = [], value: selected, onChange, label, placeholder = 'Select one', size = 'medium', itemDisplayCount = 5, disabled, id: propId, invalid, errorMessage, readOnly, name, isMulti, selectAll, description, ...props }) {
+export function Select({ options = [], value: selected, onChange, label, placeholder = 'Select one', size = 'medium', itemDisplayCount = 5, disabled, id: propId, invalid, readOnly, name, isMulti, selectAll, description, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, ...props }) {
     const id = useId(propId);
     const selectedItem = useMemo(() => {
         if (isMulti)
@@ -49,13 +49,11 @@ function Select({ options = [], value: selected, onChange, label, placeholder =
                 label: `${selected?.length || 0} option${selected?.length !== 1 ? 's' : ''} selected`,
                 value: selected?.join(', ') || '',
             };
-        return options.find((o) => o.value === selected?.[0]) || { label: placeholder, value: '' };
-    }, [isMulti, options, placeholder, selected]);
-    return (_jsx(Combobox, { description: description || '', disabled: disabled, errorMessage: errorMessage, header: placeholder || label, id: id, invalid: invalid, isMulti: isMulti, itemDisplayCount: itemDisplayCount, items: options, label: label, onChange: onChange, readOnly: readOnly, selectAll: selectAll, value: selected || [], children: ({ setReference, toggleProps }) => (_jsxs(_Fragment, { children: [_jsx("input", { defaultValue: selected, name: name, type: "hidden" }), _jsxs("button", { "aria-label": label || selectedItem?.label || placeholder, "data-bspk": "select", "data-empty": selectedItem?.label ? undefined : '', "data-invalid": invalid || undefined, "data-size": size, disabled: disabled || readOnly, id: id, ref: (node) => {
+        return options.find((o) => o.value === selected?.[0]);
+    }, [isMulti, options, selected]);
+    return (_jsx(Combobox, { description: description || '', disabled: disabled, id: id, isMulti: isMulti, itemDisplayCount: itemDisplayCount, items: options, label: placeholder || label, onChange: onChange, readOnly: readOnly, selectAll: selectAll, value: selected || [], children: ({ setReference, toggleProps }) => (_jsxs(_Fragment, { children: [_jsx("input", { defaultValue: selected, name: name, type: "hidden" }), _jsxs("span", { ...props, ...toggleProps, "aria-describedby": ariaDescribedBy || undefined, "aria-disabled": disabled || readOnly, "aria-errormessage": ariaErrorMessage || undefined, "aria-label": label || selectedItem?.label || placeholder, "data-bspk": "select", "data-invalid": invalid || undefined, "data-size": size, id: id, ref: (node) => {
                         if (node)
                             setReference(node);
-                    }, ...props, ...toggleProps, children: [_jsx(ListItem, { as: "span", "data-placeholder": true, ...selectedItem, readOnly: true }), _jsx("span", { "data-icon": true, children: _jsx(SvgChevronRight, {}) })] })] })) }));
+                    }, children: [_jsx(ListItem, { "data-bspk-owner": "select", "data-placeholder": !selectedItem || undefined, label: selectedItem?.label || placeholder, owner: "select", readOnly: true }), _jsx("span", { "data-icon": true, children: _jsx(SvgChevronRight, {}) })] })] })) }));
 }
-Select.bspkName = 'Select';
-export { Select };
 //# sourceMappingURL=Select.js.map

package/dist/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,QAAQ,EAAiB,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGtC,OAAO,eAAe,CAAC;AAkDvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,UAAU,MAAM,CAAC,EACnB,OAAO,GAAG,EAAE,EACZ,KAAK,EAAE,QAAQ,EACf,QAAQ,EACR,KAAK,EACL,WAAW,GAAG,YAAY,EAC1B,IAAI,GAAG,QAAQ,EACf,gBAAgB,GAAG,CAAC,EACpB,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EACT,WAAW,EACX,kBAAkB,EAAE,eAAe,EACnC,mBAAmB,EAAE,gBAAgB,EACrC,GAAG,KAAK,EAC0B;IAClC,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzB,MAAM,YAAY,GAA6B,OAAO,CAAC,GAAG,EAAE;QACxD,IAAI,OAAO;YACP,OAAO;gBACH,KAAK,EAAE,GAAG,QAAQ,EAAE,MAAM,IAAI,CAAC,UAAU,QAAQ,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,WAAW;gBACrF,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;aACpC,CAAC;QAEN,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1D,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEjC,OAAO,CACH,KAAC,QAAQ,IACL,WAAW,EAAE,WAAW,IAAI,EAAE,EAC9B,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,KAAK,EAAE,OAAO,EACd,KAAK,EAAE,WAAW,IAAI,KAAK,EAC3B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,QAAQ,IAAI,EAAE,YAEpB,CAAC,EAAE,YAAY,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAChC,8BACI,gBAAO,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,QAAQ,GAAG,EAC3D,mBACQ,KAAK,KACL,WAAW,sBACG,eAAe,IAAI,SAAS,mBAC/B,QAAQ,IAAI,QAAQ,uBAChB,gBAAgB,IAAI,SAAS,gBACpC,KAAK,IAAI,YAAY,EAAE,KAAK,IAAI,WAAW,eAC7C,QAAQ,kBACJ,OAAO,IAAI,SAAS,eACvB,IAAI,EACf,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;wBACV,IAAI,IAAI;4BAAE,YAAY,CAAC,IAAI,CAAC,CAAC;oBACjC,CAAC,aAED,KAAC,QAAQ,uBACW,QAAQ,sBACN,CAAC,YAAY,IAAI,SAAS,EAC5C,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,WAAW,EACzC,KAAK,EAAC,QAAQ,EACd,QAAQ,SACV,EACF,4CACI,KAAC,eAAe,KAAG,GAChB,IACJ,IACR,CACN,GACM,CACd,CAAC;AACN,CAAC"}

package/dist/components/Select/SelectExample.d.ts

@@ -1,3 +1,3 @@
-import { ComponentExample } from '../../utils/demo';
 import { SelectProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 export declare const SelectExample: ComponentExample<SelectProps>;

package/dist/components/Select/SelectExample.js

@@ -53,12 +53,12 @@ export const SelectExample = {
                     {
                         value: 'a',
                         label: 'Package A',
-                        trailing: (_jsx(Tag, { color: "blue", size: "x-small", children: "Recommended" })),
+                        trailing: _jsx(Tag, { color: "blue", label: "Recommended", size: "x-small" }),
                     },
                     {
                         value: 'b',
                         label: 'Package B',
-                        trailing: (_jsx(Tag, { color: "green", size: "x-small", children: "Best Value" })),
+                        trailing: _jsx(Tag, { color: "green", label: "Best Value", size: "x-small" }),
                     },
                     { value: 'c', label: 'Package C' },
                     { value: 'd', label: 'Package D' },
@@ -111,6 +111,6 @@ export const SelectExample = {
             },
         },
     ],
-    hideVariants: true,
+    variants: false,
 };
 //# sourceMappingURL=SelectExample.js.map

package/dist/components/Select/SelectExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectExample.js","sourceRoot":"","sources":["../../../src/components/Select/SelectExample.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectExample.js","sourceRoot":"","sources":["../../../src/components/Select/SelectExample.tsx"],"names":[],"mappings":"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"}