@autoguru/overdrive 4.62.0 → 4.64.0

package/dist/components/OverdriveProvider/useColorOverrides.spec.js

@@ -0,0 +1,226 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { colourMap } from "../../themes/base/colours.js";
+import { tokens as baseTokens } from "../../themes/base/tokens.js";
+import { getColourLuminance, getRGBValues } from "../../themes/helpers.js";
+import { useColorOverrides } from "./useColorOverrides.js";
+const BRAND = '#6d39a8'; // Merchant Finder's purple — dark, wants white on it
+const BRIGHT = '#e5bc01'; // a bright yellow — wants dark ink on it
+
+const vars = (overrides, tokens = baseTokens) => renderHook(() => useColorOverrides(overrides, tokens)).result.current;
+const luminance = colour => getColourLuminance(getRGBValues(colour));
+describe('useColorOverrides', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+  it('generates nothing when no overrides are supplied', () => {
+    expect(vars()).toEqual({});
+  });
+  describe('back-compat with the existing five keys', () => {
+    it('writes the legacy primary intent vars it always has', () => {
+      const result = vars({
+        primaryBackground: BRAND,
+        primaryForeground: '#ffffff',
+        primaryBorder: '#000000'
+      });
+      expect(result['--od-colours-intent-primary-background-standard']).toBe(BRAND);
+      expect(result['--od-colours-intent-primary-foreground']).toBe('#ffffff');
+      expect(result['--od-colours-intent-primary-border']).toBe('#000000');
+      expect(result['--od-typography-colour-primary']).toBe(BRAND);
+    });
+    it('honours explicitly supplied mild and strong values', () => {
+      const result = vars({
+        primaryBackground: BRAND,
+        primaryBackgroundMild: '#eeeeee',
+        primaryBackgroundStrong: '#111111'
+      });
+      expect(result['--od-colours-intent-primary-background-mild']).toBe('#eeeeee');
+      expect(result['--od-colours-intent-primary-background-strong']).toBe('#111111');
+    });
+    it('derives mild lighter and strong darker than the brand, not identical', () => {
+      const result = vars({
+        primaryBackground: BRAND
+      });
+      const mild = result['--od-colours-intent-primary-background-mild'];
+      const strong = result['--od-colours-intent-primary-background-strong'];
+
+      // regression guard: these were derived with identical arguments and
+      // both resolved to the same lightened colour, so a branded button's
+      // hover and active states were indistinguishable from resting
+      expect(mild).not.toBe(strong);
+      expect(luminance(mild)).toBeGreaterThan(luminance(BRAND));
+      expect(luminance(strong)).toBeLessThan(luminance(BRAND));
+    });
+  });
+  describe('brand accent', () => {
+    it('writes the brand pair from the supplied background', () => {
+      const result = vars({
+        primaryBackground: BRAND
+      });
+      expect(result['--od-color-brand-solid']).toBe(BRAND);
+    });
+    it('picks white as on-brand content for a dark brand', () => {
+      const result = vars({
+        primaryBackground: BRAND
+      });
+      expect(result['--od-color-brand-on-solid']).toBe(colourMap.white);
+    });
+    it('picks dark ink as on-brand content for a bright brand', () => {
+      const result = vars({
+        primaryBackground: BRIGHT
+      });
+      expect(result['--od-color-brand-on-solid']).toBe(colourMap.gray['900']);
+    });
+    it('prefers an explicit primaryForeground over the derived value', () => {
+      const result = vars({
+        primaryBackground: BRIGHT,
+        primaryForeground: '#123456'
+      });
+      expect(result['--od-color-brand-on-solid']).toBe('#123456');
+    });
+    it('ignores a primaryForeground that would be illegible on the brand', () => {
+      // a tenant pairing a light brand with white button text: taken
+      // verbatim this puts a white tick on a light checkbox, which is
+      // worse than the fixed dark ink these controls had before they
+      // followed the brand at all
+      const result = vars({
+        primaryBackground: '#ff6d00',
+        primaryForeground: '#ffffff'
+      });
+      expect(result['--od-color-brand-on-solid']).toBe(colourMap.gray['900']);
+      // the button label still honours what the tenant asked for — that
+      // is their stated brand pairing, and it was already the behaviour
+      expect(result['--od-colours-intent-primary-foreground']).toBe('#ffffff');
+    });
+    it('derives the button label too when no primaryForeground is given', () => {
+      // otherwise a light brand keeps the theme's white label and the
+      // solid button is unreadable, which the prop docs promise against
+      const result = vars({
+        primaryBackground: BRIGHT
+      });
+      expect(result['--od-colours-intent-primary-foreground']).toBe(colourMap.gray['900']);
+      expect(result['--od-color-brand-on-solid']).toBe(colourMap.gray['900']);
+    });
+    it('picks its contrast candidates from the active theme, not the base one', () => {
+      // the two candidates are the theme's own page background and body
+      // ink, so a theme that changes either gets decisions made against
+      // what it actually renders
+      const recoloured = _objectSpread(_objectSpread({}, baseTokens), {}, {
+        color: _objectSpread(_objectSpread({}, baseTokens.color), {}, {
+          background: _objectSpread(_objectSpread({}, baseTokens.color.background), {}, {
+            default: '#fff8e1'
+          }),
+          foreground: _objectSpread(_objectSpread({}, baseTokens.color.foreground), {}, {
+            primary: '#1a0033'
+          })
+        })
+      });
+      const result = vars({
+        primaryBackground: BRIGHT
+      }, recoloured);
+      expect(result['--od-color-brand-on-solid']).toBe('#1a0033');
+    });
+  });
+  describe('outlined button', () => {
+    it('takes the brand verbatim for border and label', () => {
+      const result = vars({
+        primaryBackground: BRAND
+      });
+      expect(result['--od-color-button-primary-outlined-border']).toBe(BRAND);
+      expect(result['--od-color-button-primary-outlined-text']).toBe(BRAND);
+    });
+    it('derives a hover wash paler than the pressed wash', () => {
+      const result = vars({
+        primaryBackground: BRAND
+      });
+      const hover = result['--od-color-button-primary-outlined-hover'];
+      const pressed = result['--od-color-button-primary-outlined-pressed'];
+      expect(luminance(hover)).toBeGreaterThan(luminance(pressed));
+      expect(luminance(pressed)).toBeGreaterThan(luminance(BRAND));
+    });
+  });
+  describe('links and focus rings', () => {
+    it('leaves them alone when only a brand background is supplied', () => {
+      const result = vars({
+        primaryBackground: BRAND
+      });
+      expect(result['--od-colours-foreground-link']).toBeUndefined();
+      expect(result['--od-typography-colour-link']).toBeUndefined();
+    });
+    it('brands them only when linkColor is passed explicitly', () => {
+      const result = vars({
+        primaryBackground: BRAND,
+        linkColor: BRAND
+      });
+      expect(result['--od-colours-foreground-link']).toBe(BRAND);
+      expect(result['--od-typography-colour-link']).toBe(BRAND);
+    });
+  });
+  describe('invalid values', () => {
+    it('warns, drops the key, and does not mutate the caller object', () => {
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      const supplied = {
+        primaryBackground: 'not-a-colour',
+        primaryForeground: '#ffffff'
+      };
+      const result = vars(supplied);
+      expect(warn).toHaveBeenCalledWith(expect.stringContaining('primaryBackground'));
+      expect(result['--od-color-brand-solid']).toBeUndefined();
+      // the hook used to `delete` off the prop object itself, which
+      // mutates state an MFE may be holding in a GraphQL cache
+      expect(supplied.primaryBackground).toBe('not-a-colour');
+    });
+  });
+  describe('contrast warning', () => {
+    it('warns when the brand is too light to read on the page background', () => {
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      // a colour not warned about elsewhere in this file, since the
+      // warning is deduplicated for the life of the module
+      vars({
+        primaryBackground: '#ffd54a'
+      });
+      expect(warn).toHaveBeenCalledWith(expect.stringContaining('does not meet WCAG AA'));
+    });
+    it('stays quiet for a brand with enough contrast', () => {
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      vars({
+        primaryBackground: BRAND
+      });
+      expect(warn).not.toHaveBeenCalled();
+    });
+    it('warns only once for a repeated colour, since the provider re-renders freely', () => {
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      vars({
+        primaryBackground: '#ffe08a'
+      });
+      vars({
+        primaryBackground: '#ffe08a'
+      });
+      vars({
+        primaryBackground: '#ffe08a'
+      });
+      expect(warn).toHaveBeenCalledTimes(1);
+    });
+  });
+  describe('server rendering', () => {
+    it('keeps overrides when the DOM colour check is unavailable', () => {
+      // `isValidColor` uses `Option`, a DOM global. Failing closed on the
+      // server stripped every override, so a branded page shipped no
+      // inline vars and only picked up the brand on hydration.
+      const original = globalThis.Option;
+      // @ts-expect-error simulating a non-DOM environment
+      delete globalThis.Option;
+      try {
+        const result = vars({
+          primaryBackground: BRAND
+        });
+        expect(result['--od-color-brand-solid']).toBe(BRAND);
+      } finally {
+        globalThis.Option = original;
+      }
+    });
+  });
+});

package/dist/components/Radio/Radio.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Radio/Radio.css.ts"],"names":[],"mappings":"AAqBA,eAAO,MAAM,KAAK,QAehB,CAAC;AAEH,eAAO,MAAM,aAAa,QAGxB,CAAC;AAEH,eAAO,MAAM,KAAK,QAYhB,CAAC;AAEH,eAAO,MAAM,aAAa,QAOxB,CAAC"}
+{"version":3,"file":"Radio.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Radio/Radio.css.ts"],"names":[],"mappings":"AAqBA,eAAO,MAAM,KAAK,QAehB,CAAC;AAEH,eAAO,MAAM,aAAa,QAGxB,CAAC;AAEH,eAAO,MAAM,KAAK,QAYhB,CAAC;AAEH,eAAO,MAAM,aAAa,QAQxB,CAAC"}

package/dist/components/Radio/Radio.css.js

@@ -3,7 +3,7 @@ __vanilla_filescope__.setFileScope("lib/components/Radio/Radio.css.ts", "@autogu
 import { style } from '@vanilla-extract/css';
 import { overdriveTokens as vars } from "../../themes/theme.css.js";
 import { checkable, nativeInput } from "../private/CheckableBase/CheckableBase.css.js";
-const colorAccent = vars.color.foreground.primary;
+const colorAccent = vars.color.brand.solid;
 const colorContrast = vars.color.background.default;
 const colorMid = vars.colours.background.neutral;
 const outerSize = vars.space['6'];
@@ -42,7 +42,8 @@ export const inner = style([circleBase, {
   }
 }], "inner");
 export const innerSelected = style({
-  backgroundColor: colorContrast,
+  // on the brand fill, unlike the unselected hover dot above
+  backgroundColor: vars.color.brand.onSolid,
   selectors: {
     [`${nativeInput}:hover ~${checkable} &`]: {
       transform: 'scale(0.85)'

package/dist/components/StandardModal/StandardModal.css.js

@@ -11,7 +11,7 @@ export const container = style({
 }, "container");
 export const modal = style(_objectSpread({
   alignSelf: 'flex-end',
-  borderRadius: `${vars.border.radius['2xl']} ${vars.border.radius['2xl']} 0 0`,
+  borderRadius: `${vars.border.radius.medium} ${vars.border.radius.medium} 0 0`,
   height: 'auto',
   maxHeight: `calc(100vh - ${vars.space['9']})`,
   minHeight: `calc(3 * ${vars.space['9']})`,
@@ -19,7 +19,7 @@ export const modal = style(_objectSpread({
 }, responsiveStyle({
   tablet: {
     alignSelf: 'center',
-    borderRadius: vars.border.radius['2xl']
+    borderRadius: vars.border.radius.medium
   },
   desktop: {
     maxWidth: `calc(100% - ${vars.space['12']} * 2)`,

package/dist/components/StandardModal/StandardModal.js

@@ -74,7 +74,7 @@ export const StandardModal = ({
         "aria-labelledby": titleId,
         display: "flex",
         flexDirection: "column",
-        backgroundColor: "white",
+        backgroundColor: "default",
         marginTop: "9",
         className: clsx([styles.modal, {
           [styles.modalSizeStandard]: size === 'standard'
@@ -100,7 +100,8 @@ export const StandardModal = ({
             flexGrow: "0",
             id: titleId,
             children: /*#__PURE__*/_jsx(Heading, {
-              as: "h4",
+              as: "h2",
+              color: "primary",
               children: title
             })
           }), /*#__PURE__*/_jsx(Button, {

package/dist/components/Switch/Switch.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.css.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,IAAI,QAMf,CAAC;AAEH,eAAO,MAAM,MAAM,QAqBjB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAMnB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAOnB,CAAC;AAKH,eAAO,MAAM,MAAM,sCAkCjB,CAAC;AAEH,eAAO,MAAM,UAAU,QAOrB,CAAC"}
+{"version":3,"file":"Switch.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.css.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,IAAI,QAMf,CAAC;AAEH,eAAO,MAAM,MAAM,QAqBjB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAMnB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAOnB,CAAC;AAKH,eAAO,MAAM,MAAM,sCAoCjB,CAAC;AAEH,eAAO,MAAM,UAAU,QAOrB,CAAC"}

package/dist/components/Switch/Switch.css.js

@@ -5,7 +5,7 @@ import { focusOutlineStyle } from "../../styles/focusOutline.css.js";
 import { LAYER_ORDER, cssLayerComponent } from "../../styles/layers.css.js";
 import { overdriveTokens as vars } from "../../themes/theme.css.js";
 globalLayer(LAYER_ORDER);
-const colorAccent = vars.color.foreground.primary;
+const colorAccent = vars.color.brand.solid;
 const colorContrast = vars.color.background.default;
 const colorMid = vars.colours.background.neutral;
 const colorLight = vars.colours.background.light;
@@ -78,6 +78,8 @@ export const handle = styleVariants({
       [cssLayerComponent]: {
         selectors: {
           [`${toggleOn} &`]: {
+            // on the brand track, so on-brand rather than page
+            backgroundColor: vars.color.brand.onSolid,
             transform: handleTranslate
           },
           [`${toggle}:not([data-disabled]):hover &`]: {

package/dist/components/Tabs/Tab.css.d.ts

@@ -30,6 +30,39 @@ export declare const styledTab: import("@vanilla-extract/recipes").RuntimeFn<{
                 };
             };
         };
+        segmented: {
+            borderColor: `var(--${string})`;
+            borderStyle: "solid";
+            borderWidth: `var(--${string})`;
+            color: `var(--${string})`;
+            flex: "1 0 0";
+            fontSize: `var(--${string})`;
+            fontWeight: `var(--${string})`;
+            lineHeight: `var(--${string})`;
+            minHeight: `var(--${string})`;
+            minWidth: number;
+            overflow: "hidden";
+            padding: `var(--${string}) var(--${string})`;
+            ':focus-visible': {
+                outlineOffset: "-1px";
+            };
+            selectors: {
+                '&:first-child': {
+                    borderBottomLeftRadius: `var(--${string})`;
+                    borderTopLeftRadius: `var(--${string})`;
+                };
+                '&:last-child': {
+                    borderBottomRightRadius: `var(--${string})`;
+                    borderTopRightRadius: `var(--${string})`;
+                };
+                '&+&': {
+                    marginLeft: `calc(-1 * var(--${string}))`;
+                };
+                '&:not([aria-selected=true]):hover': {
+                    backgroundColor: `var(--${string})`;
+                };
+            };
+        };
     };
     active: {
         true: {};
@@ -47,6 +80,13 @@ export declare const indication: import("@vanilla-extract/recipes").RuntimeFn<{
             };
         };
         minimal: {};
+        segmented: {
+            selectors: {
+                [x: string]: {
+                    backgroundColor: `var(--${string})`;
+                };
+            };
+        };
     };
     active: {
         true: {};

package/dist/components/Tabs/Tab.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/Tab.css.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsFpB,CAAC;AAEH,eAAO,MAAM,IAAI,QAIf,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;EAsDrB,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,MAAM,MAAM,aAAa,GAAG,WAAW,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Tab.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/Tab.css.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmIpB,CAAC;AAEH,eAAO,MAAM,IAAI,QAIf,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;EAwErB,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,MAAM,MAAM,aAAa,GAAG,WAAW,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC"}

package/dist/components/Tabs/Tab.css.js

@@ -51,6 +51,39 @@ export const styledTab = recipe({
             marginLeft: vars.space['6']
           }
         }
+      },
+      segmented: {
+        borderColor: vars.color.border.default,
+        borderStyle: 'solid',
+        borderWidth: vars.border.width['1'],
+        color: vars.color.foreground.secondary,
+        flex: '1 0 0',
+        fontSize: vars.typography.size.p2.fontSize,
+        fontWeight: vars.typography.fontWeight.semiBold,
+        lineHeight: vars.typography.size.p2.lineHeight,
+        minHeight: vars.space['8'],
+        minWidth: 0,
+        overflow: 'hidden',
+        padding: `${vars.space['2']} ${vars.space['4']}`,
+        ':focus-visible': {
+          outlineOffset: '-1px'
+        },
+        selectors: {
+          '&:first-child': {
+            borderBottomLeftRadius: vars.border.radius.small,
+            borderTopLeftRadius: vars.border.radius.small
+          },
+          '&:last-child': {
+            borderBottomRightRadius: vars.border.radius.small,
+            borderTopRightRadius: vars.border.radius.small
+          },
+          '&+&': {
+            marginLeft: `calc(-1 * ${vars.border.width['1']})`
+          },
+          '&:not([aria-selected=true]):hover': {
+            backgroundColor: vars.color.background.emphasisInactive
+          }
+        }
       }
     },
     active: {
@@ -63,8 +96,8 @@ export const styledTab = recipe({
       active: true
     },
     style: {
-      color: vars.colours.intent.neutral.background.strong,
-      borderBottomColor: vars.colours.intent.neutral.background.strong
+      color: vars.color.foreground.primary,
+      borderBottomColor: vars.color.border.strong
     }
   }, {
     variants: {
@@ -84,6 +117,18 @@ export const styledTab = recipe({
       color: vars.color.content.normal,
       borderBottomColor: vars.color.content.normal
     }
+  }, {
+    variants: {
+      appearance: 'segmented',
+      active: true
+    },
+    style: {
+      backgroundColor: vars.color.background.reverse,
+      borderColor: vars.color.background.reverse,
+      color: vars.color.foreground.reverse,
+      position: 'relative',
+      zIndex: 1
+    }
   }],
   defaultVariants: {
     appearance: 'underlined'
@@ -96,14 +141,14 @@ export const item = style({
 }, "item");
 export const indication = recipe({
   base: [{
-    backgroundColor: vars.colours.background.light,
+    backgroundColor: vars.color.background.emphasisInactive,
     borderRadius: vars.border.radius.pill,
     display: 'inline-block',
     minWidth: size,
     height: size,
     padding: `0 ${vars.space['1']}`,
     lineHeight: size,
-    transition: `color 0.2s ${vars.animation.easing.decelerate} 0s, backgroundColor 0.2s ${vars.animation.easing.decelerate} 0s`
+    transition: `color 0.2s ${vars.animation.easing.decelerate} 0s, background-color 0.2s ${vars.animation.easing.decelerate} 0s`
   }],
   variants: {
     appearance: {
@@ -111,11 +156,18 @@ export const indication = recipe({
       pill: {
         selectors: {
           [`${styledTab.classNames.base}:not([aria-selected=true]):hover &`]: {
-            backgroundColor: vars.colours.background.neutral
+            backgroundColor: vars.color.background.inactive
           }
         }
       },
-      minimal: {}
+      minimal: {},
+      segmented: {
+        selectors: {
+          [`${styledTab.classNames.base}:not([aria-selected=true]):hover &`]: {
+            backgroundColor: vars.color.background.inactive
+          }
+        }
+      }
     },
     active: {
       true: {}
@@ -127,7 +179,7 @@ export const indication = recipe({
       active: true
     },
     style: {
-      backgroundColor: vars.colours.intent.neutral.background.strong
+      backgroundColor: vars.color.foreground.primary
     }
   }, {
     variants: {
@@ -135,7 +187,16 @@ export const indication = recipe({
       active: true
     },
     style: {
-      backgroundColor: vars.colours.background.light,
+      backgroundColor: vars.color.background.emphasisInactive,
+      color: vars.color.foreground.primary
+    }
+  }, {
+    variants: {
+      appearance: 'segmented',
+      active: true
+    },
+    style: {
+      backgroundColor: vars.color.background.emphasisInactive,
       color: vars.color.foreground.primary
     }
   }],

package/dist/components/Tabs/Tab.js

@@ -43,7 +43,7 @@ export const Tab = /*#__PURE__*/forwardRef(({
       justifyContent: 'center',
       backgroundColor: 'transparent'
     }), textStyles({
-      colour: 'light',
+      color: 'secondary',
       noWrap: true,
       size: '3',
       weight: 'bold'

package/dist/components/Tabs/TabList.css.d.ts

@@ -5,6 +5,7 @@ export declare const styledTabList: import("@vanilla-extract/recipes").RuntimeFn
         };
         pill: {};
         minimal: {};
+        segmented: {};
     };
     scroll: {
         true: {

package/dist/components/Tabs/TabList.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/TabList.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;EAkBxB,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAW5B,CAAC"}
+{"version":3,"file":"TabList.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/TabList.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;EAmBxB,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAW5B,CAAC"}

package/dist/components/Tabs/TabList.css.js

@@ -11,7 +11,8 @@ export const styledTabList = recipe({
         boxShadow: `inset 0 -1px 0 0 ${vars.color.border.default}`
       },
       pill: {},
-      minimal: {}
+      minimal: {},
+      segmented: {}
     },
     scroll: {
       true: {

package/dist/components/Tabs/TabList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/TabList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAEb,KAAK,iBAAiB,EAGtB,KAAK,SAAS,EAMd,MAAM,OAAO,CAAC;AAYf,MAAM,WAAW,YAAY;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AASD,eAAO,MAAM,cAAc,8BAAqC,CAAC;AAEjE,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,CAwLnD,CAAC"}
+{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/TabList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAEb,KAAK,iBAAiB,EAGtB,KAAK,SAAS,EAMd,MAAM,OAAO,CAAC;AAYf,MAAM,WAAW,YAAY;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AASD,eAAO,MAAM,cAAc,8BAAqC,CAAC;AAEjE,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,CA+LnD,CAAC"}

package/dist/components/Tabs/TabList.js

@@ -42,6 +42,8 @@ export const TabList = ({
     activeIndex,
     onChange
   } = tabsContext;
+  const isSegmented = appearance === 'segmented';
+  !!(scrollable && isSegmented) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Tabs: `scrollable={true}` cannot be used with `appearance="segmented"`.') : invariant(false) : void 0;
   const [displayScroll, setDisplayScroll] = useState({
     start: false,
     end: false
@@ -141,7 +143,7 @@ export const TabList = ({
       onScroll: handleOnScroll,
       children: /*#__PURE__*/_jsx(Box, {
         ref: innerRef,
-        display: stretch ? 'flex' : 'block',
+        display: stretch || isSegmented ? 'flex' : 'block',
         flexWrap: "nowrap",
         width: "full",
         role: "tablist",
@@ -165,4 +167,5 @@ export const TabList = ({
       })
     }) : null]
   });
-};
+};
+TabList.displayName = 'TabList';

package/dist/components/Tabs/TabPane.js

@@ -28,4 +28,5 @@ export const TabPane = ({
     width: "full",
     children: isActive || renderInactive ? children : undefined
   });
-};
+};
+TabPane.displayName = 'TabPane';

package/dist/components/Tabs/TabPanes.js

@@ -21,4 +21,5 @@ export const TabPanes = ({
     },
     children: child
   }))
-});
+});
+TabPanes.displayName = 'TabPanes';

package/dist/components/Tabs/Tabs.d.ts

@@ -48,6 +48,8 @@ export declare const TabsContext: React.Context<TabsContextValue | null>;
  * - `"underlined"` (default) - Tabs with bottom border indication
  * - `"pill"`
  * - `"minimal"`
+ * - `"segmented"` - Equal-width bordered segments with a filled selected segment.
+ *   Always full width; cannot be combined with `TabList`'s `scrollable`.
  */
 export interface TabsProps {
     /** Custom ID for the tabs container. Auto-generated if not provided. */

package/dist/components/Tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEb,KAAK,iBAAiB,EACtB,KAAK,SAAS,EAId,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAE/C,UAAU,gBAAgB;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,aAAa,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7D,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,WAAW,GAAG,SAAS,CAAC;IACnD,WAAW,EAAE,MAAM,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,WAAW,wCAA+C,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,MAAM,WAAW,SAAS;IACzB,wEAAwE;IACxE,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,kDAAkD;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,CAuD7C,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEb,KAAK,iBAAiB,EACtB,KAAK,SAAS,EAId,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAE/C,UAAU,gBAAgB;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,aAAa,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7D,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,WAAW,GAAG,SAAS,CAAC;IACnD,WAAW,EAAE,MAAM,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,WAAW,wCAA+C,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,WAAW,SAAS;IACzB,wEAAwE;IACxE,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,kDAAkD;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,CAuD7C,CAAC"}

package/dist/components/Tabs/Tabs.js

@@ -41,6 +41,8 @@ export const TabsContext = /*#__PURE__*/createContext(null);
  * - `"underlined"` (default) - Tabs with bottom border indication
  * - `"pill"`
  * - `"minimal"`
+ * - `"segmented"` - Equal-width bordered segments with a filled selected segment.
+ *   Always full width; cannot be combined with `TabList`'s `scrollable`.
  */
 
 export const Tabs = ({
@@ -72,4 +74,5 @@ export const Tabs = ({
     }), [id, activeState, appearance, setActiveState, registerTab, getTab, getTabCount]),
     children: children
   });
-};
+};
+Tabs.displayName = 'Tabs';

package/dist/components/Tabs/index.d.ts

@@ -1,6 +1,7 @@
-export { Tabs } from './Tabs';
-export { Tab } from './Tab';
-export { TabList } from './TabList';
+export { Tabs, type TabsProps } from './Tabs';
+export { Tab, type TabProps } from './Tab';
+export { TabList, type TabListProps } from './TabList';
+export type { TabAppearance } from './Tab.css';
 export { TabPane } from './TabPane';
 export { TabPanes } from './TabPanes';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AACvD,YAAY,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/index.d.ts

@@ -19,6 +19,7 @@ export { DividerLine } from './DividerLine';
 export { DropDown, DropDownOption } from './DropDown';
 export { EditableText } from './EditableText';
 export { FillHeightBox } from './FillHeightBox';
+export { FilterChip, type FilterChipProps, type FilterChipType, } from './FilterChip';
 export { FlexInline, type FlexInlineComponentProps, FlexStack, type FlexStackComponentProps, type FlexComponentProps, inline, stack, } from './Flex';
 export { Flyout } from './Flyout';
 export { Heading } from './Heading';
@@ -62,7 +63,7 @@ export { Stepper } from './Stepper';
 export { StickyBox } from './StickyBox';
 export { Switch } from './Switch';
 export { Table, TableCell, TableHeadCell, TableRow, TableRowGroup, } from './Table';
-export { Tabs, Tab, TabList, TabPane, TabPanes } from './Tabs';
+export { Tabs, Tab, TabList, TabPane, TabPanes, type TabsProps, type TabProps, type TabListProps, type TabAppearance, } from './Tabs';
 export { Text } from './Text';
 export { TextAreaInput } from './TextAreaInput';
 export { TextBubble } from './TextBubble';