@fluentui/react-tabs 9.5.2 → 9.6.0

package/CHANGELOG.md

@@ -1,12 +1,27 @@
 # Change Log - @fluentui/react-tabs
 
-This log was last generated on Tue, 08 Oct 2024 22:02:32 GMT and should not be manually modified.
+This log was last generated on Tue, 15 Oct 2024 17:13:30 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.6.0)
+
+Tue, 15 Oct 2024 17:13:30 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.5.2..@fluentui/react-tabs_v9.6.0)
+
+### Minor changes
+
+- feature: add rounded tab variant ([PR #32944](https://github.com/microsoft/fluentui/pull/32944) by kirpadv@gmail.com)
+- Bump @fluentui/react-context-selector to v9.1.68 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.45 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.20.2 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
+- Bump @fluentui/react-tabster to v9.22.9 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
+- Bump @fluentui/react-theme to v9.1.21 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
+- Bump @fluentui/react-utilities to v9.18.16 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
+
 ## [9.5.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.5.2)
 
-Tue, 08 Oct 2024 22:02:32 GMT 
+Tue, 08 Oct 2024 22:05:59 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.5.1..@fluentui/react-tabs_v9.5.2)
 
 ### Patches

package/dist/index.d.ts

@@ -87,10 +87,13 @@ export declare type TabListProps = ComponentProps<TabListSlots> & {
      * A tab list can supports 'transparent' and 'subtle' appearance.
      *- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.
      *- 'transparent': No background and border styling
+     *- 'subtle-circular': Adds background and border styling
+     *- 'filled-circular': Adds background styling
+     *
      * The appearance affects each of the contained tabs.
      * @default 'transparent'
      */
-    appearance?: 'transparent' | 'subtle';
+    appearance?: 'transparent' | 'subtle' | 'subtle-circular' | 'filled-circular';
     /**
      * Tab size may change between unselected and selected states.
      * The default scenario is a selected tab has bold text.
@@ -196,9 +199,9 @@ export declare type TabSlots = {
  */
 export declare type TabState = ComponentState<TabInternalSlots> & Pick<TabProps, 'value'> & Required<Pick<TabProps, 'disabled'>> & {
     /**
-     * A tab supports 'transparent' and 'subtle' appearance.
+     * A tab supports 'transparent', 'subtle', `subtle-circular` and `filled-circular` appearance.
      */
-    appearance?: 'transparent' | 'subtle';
+    appearance?: 'transparent' | 'subtle' | 'subtle-circular' | 'filled-circular';
     /**
      * A tab can have only an icon slot filled and no content.
      */

package/lib/components/Tab/Tab.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Tab.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Any value that identifies a specific tab.\n */\nexport type TabValue = unknown;\n\nexport type TabSlots = {\n  /**\n   * Root of the component.\n   */\n  root: Slot<'button'>;\n\n  /**\n   * Icon that renders before the content.\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Component children are placed in this slot\n   * Avoid using the `children` property in this slot in favour of Component children whenever possible.\n   */\n  content: NonNullable<Slot<'span'>>;\n};\n\nexport type TabInternalSlots = TabSlots & {\n  contentReservedSpace?: Slot<'span'>;\n};\n\n/**\n * Tab Props\n */\nexport type TabProps = Omit<ComponentProps<Partial<TabSlots>>, 'content'> &\n  Pick<Partial<TabSlots>, 'content'> & {\n    /**\n     * A tab can be set to disable interaction.\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * The value that identifies this tab when selected.\n     */\n    value: TabValue;\n  };\n\n/**\n * State used in rendering Tab\n */\nexport type TabState = ComponentState<TabInternalSlots> &\n  Pick<TabProps, 'value'> &\n  Required<Pick<TabProps, 'disabled'>> & {\n    /**\n     * A tab supports 'transparent' and 'subtle' appearance.\n     */\n    appearance?: 'transparent' | 'subtle';\n    /**\n     * A tab can have only an icon slot filled and no content.\n     */\n    iconOnly: boolean;\n    /**\n     * If this tab is selected\n     */\n    selected: boolean;\n    /**\n     * When defined, tab content with selected style is rendered hidden to reserve space.\n     * This keeps consistent content size between unselected and selected states.\n     *\n     * @deprecated - use `contentReservedSpace` internal slot instead.\n     */\n    contentReservedSpaceClassName?: string;\n    /**\n     * A tab can be either 'small', 'medium', or 'large' size.\n     */\n    size: 'small' | 'medium' | 'large';\n    /**\n     * A tab can arrange its content based on if the tabs in the list are arranged vertically.\n     */\n    vertical: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AA6CA;;CAEC,GACD,WA8BI"}
+{"version":3,"sources":["Tab.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Any value that identifies a specific tab.\n */\nexport type TabValue = unknown;\n\nexport type TabSlots = {\n  /**\n   * Root of the component.\n   */\n  root: Slot<'button'>;\n\n  /**\n   * Icon that renders before the content.\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Component children are placed in this slot\n   * Avoid using the `children` property in this slot in favour of Component children whenever possible.\n   */\n  content: NonNullable<Slot<'span'>>;\n};\n\nexport type TabInternalSlots = TabSlots & {\n  contentReservedSpace?: Slot<'span'>;\n};\n\n/**\n * Tab Props\n */\nexport type TabProps = Omit<ComponentProps<Partial<TabSlots>>, 'content'> &\n  Pick<Partial<TabSlots>, 'content'> & {\n    /**\n     * A tab can be set to disable interaction.\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * The value that identifies this tab when selected.\n     */\n    value: TabValue;\n  };\n\n/**\n * State used in rendering Tab\n */\nexport type TabState = ComponentState<TabInternalSlots> &\n  Pick<TabProps, 'value'> &\n  Required<Pick<TabProps, 'disabled'>> & {\n    /**\n     * A tab supports 'transparent', 'subtle', `subtle-circular` and `filled-circular` appearance.\n     */\n    appearance?: 'transparent' | 'subtle' | 'subtle-circular' | 'filled-circular';\n\n    /**\n     * A tab can have only an icon slot filled and no content.\n     */\n    iconOnly: boolean;\n    /**\n     * If this tab is selected\n     */\n    selected: boolean;\n    /**\n     * When defined, tab content with selected style is rendered hidden to reserve space.\n     * This keeps consistent content size between unselected and selected states.\n     *\n     * @deprecated - use `contentReservedSpace` internal slot instead.\n     */\n    contentReservedSpaceClassName?: string;\n    /**\n     * A tab can be either 'small', 'medium', or 'large' size.\n     */\n    size: 'small' | 'medium' | 'large';\n    /**\n     * A tab can arrange its content based on if the tabs in the list are arranged vertically.\n     */\n    vertical: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AA6CA;;CAEC,GACD,WA+BI"}

package/lib/components/Tab/useTabStyles.styles.js

@@ -125,25 +125,25 @@ const useRootStyles = /*#__PURE__*/__styles({
   },
   transparent: {
     De3pzq: "f1c21dwh",
-    Jwef8y: "fjxutwb",
-    ecr2s2: "fophhak",
+    B95qlz1: "f9rvdkv",
+    B7xitij: "f1051ucx",
     Bptxc3x: "fmmjozx",
-    B076xvk: "f1mfqf41",
-    q9r9w5: "f10aiid4",
+    Bwqhzpy: "fqhzt5g",
+    iyk698: "f7l5cgy",
     cl4aha: "fpkze5g",
-    Bk452zc: "f149wc3x",
-    a4hkcw: "fjioou7"
+    B0q3jbp: "f1iywnoi",
+    Be9ayug: "f9n45c4"
   },
   subtle: {
     De3pzq: "fhovq9v",
-    Jwef8y: "f1t94bn6",
-    ecr2s2: "f1wfn5kd",
+    B95qlz1: "f1bifk9c",
+    B7xitij: "fo6hitd",
     Bptxc3x: "fmmjozx",
-    B076xvk: "f1mfqf41",
-    q9r9w5: "f10aiid4",
+    Bwqhzpy: "fqhzt5g",
+    iyk698: "f7l5cgy",
     cl4aha: "fpkze5g",
-    Bk452zc: "f149wc3x",
-    a4hkcw: "fjioou7"
+    B0q3jbp: "f1iywnoi",
+    Be9ayug: "f9n45c4"
   },
   disabled: {
     De3pzq: "f1c21dwh",
@@ -153,11 +153,234 @@ const useRootStyles = /*#__PURE__*/__styles({
   },
   selected: {
     Bptxc3x: "f1cadz5z",
-    B076xvk: "f1ck17l",
-    q9r9w5: "f42ak0g",
+    Bwqhzpy: "fwhdxxj",
+    iyk698: "fintccb",
     cl4aha: "ffplhdr",
-    Bk452zc: "ffth601",
-    a4hkcw: "fhklyu5"
+    B0q3jbp: "fjo17wb",
+    Be9ayug: "f148789c"
+  },
+  circular: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f44lkw9",
+    Bptxc3x: "ftorr8m",
+    cl4aha: "f16lqpmv"
+  },
+  subtleCircular: {
+    De3pzq: "f1c21dwh",
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "fp7rvkm",
+    sj55zd: "fkfq4zb",
+    B95qlz1: "f1yywxnv",
+    Eo63ln: 0,
+    r9osk6: 0,
+    Itrz8y: 0,
+    zeg6vx: 0,
+    l65xgk: 0,
+    Bw4olcx: 0,
+    Folb0i: 0,
+    I2h8y4: 0,
+    Bgxgoyi: 0,
+    Bvlkotb: 0,
+    Fwyncl: 0,
+    Byh5edv: 0,
+    Becqvjq: 0,
+    uumbiq: 0,
+    B73q3dg: 0,
+    Bblwbaf: 0,
+    B0ezav: "ft57sj0",
+    r4wkhp: "f1fcoy83",
+    B7xitij: "f1lzpamt",
+    d3wsvi: 0,
+    Hdqn7s: 0,
+    zu5y1p: 0,
+    owqphb: 0,
+    g9c53k: 0,
+    Btmu08z: 0,
+    Bthxvy6: 0,
+    gluvuq: 0,
+    tb88gp: 0,
+    wns6jk: 0,
+    kdfdk4: 0,
+    Bbw008l: 0,
+    Bayi1ib: 0,
+    B1kkfu3: 0,
+    J1oqyp: 0,
+    kem6az: 0,
+    goa3yj: "fhn220o",
+    p743kt: "f15qf7sh"
+  },
+  subtleCircularSelected: {
+    De3pzq: "f16xkysk",
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "f1c2pc3t",
+    sj55zd: "faj9fo0",
+    B95qlz1: "fsm7zmf",
+    Eo63ln: 0,
+    r9osk6: 0,
+    Itrz8y: 0,
+    zeg6vx: 0,
+    l65xgk: 0,
+    Bw4olcx: 0,
+    Folb0i: 0,
+    I2h8y4: 0,
+    Bgxgoyi: 0,
+    Bvlkotb: 0,
+    Fwyncl: 0,
+    Byh5edv: 0,
+    Becqvjq: 0,
+    uumbiq: 0,
+    B73q3dg: 0,
+    Bblwbaf: 0,
+    B0ezav: "f1wo0sfq",
+    r4wkhp: "f1afuynh",
+    B7xitij: "f94ddyl",
+    d3wsvi: 0,
+    Hdqn7s: 0,
+    zu5y1p: 0,
+    owqphb: 0,
+    g9c53k: 0,
+    Btmu08z: 0,
+    Bthxvy6: 0,
+    gluvuq: 0,
+    tb88gp: 0,
+    wns6jk: 0,
+    kdfdk4: 0,
+    Bbw008l: 0,
+    Bayi1ib: 0,
+    B1kkfu3: 0,
+    J1oqyp: 0,
+    kem6az: 0,
+    goa3yj: "fmle6oo",
+    p743kt: "f1d3itm4"
+  },
+  subtleCircularDisabled: {
+    De3pzq: "f1c21dwh",
+    sj55zd: "f1s2aq7o",
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "fp7rvkm"
+  },
+  subtleCircularDisabledSelected: {
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "fegtqic"
+  },
+  filledCircular: {
+    De3pzq: "f16xq7d1",
+    sj55zd: "fkfq4zb",
+    B95qlz1: "fwwxidx",
+    r4wkhp: "f1fcoy83",
+    B7xitij: "f14i52sd",
+    p743kt: "f15qf7sh"
+  },
+  filledCircularSelected: {
+    De3pzq: "ffp7eso",
+    sj55zd: "f1phragk",
+    B95qlz1: "f1lm9dni",
+    r4wkhp: "f1mn5ei1",
+    B7xitij: "f1g6ncd0",
+    p743kt: "fl71aob"
+  },
+  filledCircularDisabled: {
+    De3pzq: "f1bg9a2p",
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "fp7rvkm",
+    sj55zd: "f1s2aq7o"
+  },
+  filledCircularDisabledSelected: {
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "fegtqic"
   }
 }, {
   d: [".f122n59{align-items:center;}", ".f13qh94s{display:grid;}", ".fi64zpg{flex-shrink:0;}", ".f1u07yai{grid-auto-flow:column;}", ".frn2hmy{grid-template-columns:auto;}", ".f1olsevy{grid-template-rows:auto;}", ".f1s6fcnf{outline-style:none;}", ".f10pi13n{position:relative;}", [".f3bhgqh{border:none;}", {
@@ -178,9 +401,29 @@ const useRootStyles = /*#__PURE__*/__styles({
     p: -1
   }], [".fwkd1rq{padding:var(--spacingVerticalS) var(--spacingHorizontalMNudge);}", {
     p: -1
-  }], ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fmmjozx .fui-Tab__icon{color:var(--colorNeutralForeground2);}", ".fpkze5g .fui-Tab__content{color:var(--colorNeutralForeground2);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fato7r6 .fui-Tab__icon{color:var(--colorNeutralForegroundDisabled);}", ".fao1bnu .fui-Tab__content{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".f1cadz5z .fui-Tab__icon{color:var(--colorCompoundBrandForeground1);}", ".ffplhdr .fui-Tab__content{color:var(--colorNeutralForeground1);}"],
-  h: [".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f1mfqf41:hover .fui-Tab__icon{color:var(--colorNeutralForeground2Hover);}", ".f149wc3x:hover .fui-Tab__content{color:var(--colorNeutralForeground2Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1ck17l:hover .fui-Tab__icon{color:var(--colorCompoundBrandForeground1Hover);}", ".ffth601:hover .fui-Tab__content{color:var(--colorNeutralForeground1Hover);}"],
-  a: [".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f10aiid4:active .fui-Tab__icon{color:var(--colorNeutralForeground2Pressed);}", ".fjioou7:active .fui-Tab__content{color:var(--colorNeutralForeground2Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f42ak0g:active .fui-Tab__icon{color:var(--colorCompoundBrandForeground1Pressed);}", ".fhklyu5:active .fui-Tab__content{color:var(--colorNeutralForeground1Pressed);}"]
+  }], ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f9rvdkv:enabled:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f1051ucx:enabled:active{background-color:var(--colorTransparentBackgroundPressed);}", ".fmmjozx .fui-Tab__icon{color:var(--colorNeutralForeground2);}", ".fqhzt5g:enabled:hover .fui-Tab__icon{color:var(--colorNeutralForeground2Hover);}", ".f7l5cgy:enabled:active .fui-Tab__icon{color:var(--colorNeutralForeground2Pressed);}", ".fpkze5g .fui-Tab__content{color:var(--colorNeutralForeground2);}", ".f1iywnoi:enabled:hover .fui-Tab__content{color:var(--colorNeutralForeground2Hover);}", ".f9n45c4:enabled:active .fui-Tab__content{color:var(--colorNeutralForeground2Pressed);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".f1bifk9c:enabled:hover{background-color:var(--colorSubtleBackgroundHover);}", ".fo6hitd:enabled:active{background-color:var(--colorSubtleBackgroundPressed);}", ".fato7r6 .fui-Tab__icon{color:var(--colorNeutralForegroundDisabled);}", ".fao1bnu .fui-Tab__content{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".f1cadz5z .fui-Tab__icon{color:var(--colorCompoundBrandForeground1);}", ".fwhdxxj:enabled:hover .fui-Tab__icon{color:var(--colorCompoundBrandForeground1Hover);}", ".fintccb:enabled:active .fui-Tab__icon{color:var(--colorCompoundBrandForeground1Pressed);}", ".ffplhdr .fui-Tab__content{color:var(--colorNeutralForeground1);}", ".fjo17wb:enabled:hover .fui-Tab__content{color:var(--colorNeutralForeground1Hover);}", ".f148789c:enabled:active .fui-Tab__content{color:var(--colorNeutralForeground1Pressed);}", [".f44lkw9{border-radius:var(--borderRadiusCircular);}", {
+    p: -1
+  }], ".ftorr8m .fui-Tab__icon{color:inherit;}", ".f16lqpmv .fui-Tab__content{color:inherit;}", [".fp7rvkm{border:solid var(--strokeWidthThin) var(--colorTransparentStroke);}", {
+    p: -2
+  }], ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f1yywxnv:enabled:hover{background-color:var(--colorNeutralBackground1Hover);}", [".ft57sj0:enabled:hover{border:solid var(--strokeWidthThin) var(--colorNeutralStroke1Hover);}", {
+    p: -2
+  }], ".f1fcoy83:enabled:hover{color:var(--colorNeutralForeground2Hover);}", ".f1lzpamt:enabled:active{background-color:var(--colorNeutralBackground1Pressed);}", [".fhn220o:enabled:active{border:solid var(--strokeWidthThin) var(--colorNeutralStroke1Pressed);}", {
+    p: -2
+  }], ".f15qf7sh:enabled:active{color:var(--colorNeutralForeground2Pressed);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", [".f1c2pc3t{border:solid var(--strokeWidthThin) var(--colorCompoundBrandStroke);}", {
+    p: -2
+  }], ".faj9fo0{color:var(--colorBrandForeground2);}", ".fsm7zmf:enabled:hover{background-color:var(--colorBrandBackground2Hover);}", [".f1wo0sfq:enabled:hover{border:solid var(--strokeWidthThin) var(--colorCompoundBrandStrokeHover);}", {
+    p: -2
+  }], ".f1afuynh:enabled:hover{color:var(--colorBrandForeground2Hover);}", ".f94ddyl:enabled:active{background-color:var(--colorBrandBackground2Pressed);}", [".fmle6oo:enabled:active{border:solid var(--strokeWidthThin) var(--colorCompoundBrandStrokePressed);}", {
+    p: -2
+  }], ".f1d3itm4:enabled:active{color:var(--colorBrandForeground2Pressed);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", [".fp7rvkm{border:solid var(--strokeWidthThin) var(--colorTransparentStroke);}", {
+    p: -2
+  }], [".fegtqic{border:solid var(--strokeWidthThin) var(--colorNeutralStrokeDisabled);}", {
+    p: -2
+  }], ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fwwxidx:enabled:hover{background-color:var(--colorNeutralBackground3Hover);}", ".f14i52sd:enabled:active{background-color:var(--colorNeutralBackground3Pressed);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".f1lm9dni:enabled:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1mn5ei1:enabled:hover{color:var(--colorNeutralForegroundOnBrand);}", ".f1g6ncd0:enabled:active{background-color:var(--colorBrandBackgroundPressed);}", ".fl71aob:enabled:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}", [".fp7rvkm{border:solid var(--strokeWidthThin) var(--colorTransparentStroke);}", {
+    p: -2
+  }], [".fegtqic{border:solid var(--strokeWidthThin) var(--colorNeutralStrokeDisabled);}", {
+    p: -2
+  }]]
 });
 /**
  * Focus styles for the root slot
@@ -289,11 +532,11 @@ const useActiveIndicatorStyles = /*#__PURE__*/__styles({
   },
   selected: {
     Bjyk6c5: "f1ksivud",
-    Glksuk: "f1eytvvh",
-    Blzl0y7: "fuaa9s",
+    Bej4dhw: "f1476jrx",
+    B7wqxwa: "f18q216b",
     f7digc: "fy7ktjt",
-    Biqphg1: "f16tp0gf",
-    Bntoloa: "fj0yp7j"
+    Bvuzv5k: "f1033yux",
+    k4sdgo: "fkh9b8o"
   },
   disabled: {
     Bjyk6c5: "f13lkzet"
@@ -337,14 +580,12 @@ const useActiveIndicatorStyles = /*#__PURE__*/__styles({
 }, {
   d: [".f1rp0jgh::after{background-color:var(--colorTransparentStroke);}", [".f3b9emi::after{border-radius:var(--borderRadiusCircular);}", {
     p: -1
-  }], ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1ksivud::after{background-color:var(--colorCompoundBrandStroke);}", ".f13lkzet::after{background-color:var(--colorNeutralForegroundDisabled);}", ".fo72kxq::after{bottom:0;}", ".f9bb2ob::after{height:var(--strokeWidthThick);}", ".f1q70ajw::after{left:var(--spacingHorizontalSNudge);}", ".f18rbzdx::after{right:var(--spacingHorizontalSNudge);}", ".fqbue9b::after{bottom:var(--spacingVerticalXS);}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fk1klkt::after{top:var(--spacingVerticalXS);}", ".f1o25lip::after{width:var(--strokeWidthThicker);}", ".f1vx7lu8::after{height:var(--strokeWidthThicker);}", ".fna7m5n::after{left:var(--spacingHorizontalM);}", ".f1oxpfwv::after{right:var(--spacingHorizontalM);}", ".fipylg0::after{bottom:var(--spacingVerticalS);}", ".fqchiol::after{top:var(--spacingVerticalS);}", ".f1w7dm5g::after{bottom:var(--spacingVerticalMNudge);}", ".f1p6em4m::after{top:var(--spacingVerticalMNudge);}"],
-  h: [".f1eytvvh:hover::after{background-color:var(--colorCompoundBrandStrokeHover);}"],
-  a: [".fuaa9s:active::after{background-color:var(--colorCompoundBrandStrokePressed);}"],
+  }], ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1ksivud::after{background-color:var(--colorCompoundBrandStroke);}", ".f1476jrx:enabled:hover::after{background-color:var(--colorCompoundBrandStrokeHover);}", ".f18q216b:enabled:active::after{background-color:var(--colorCompoundBrandStrokePressed);}", ".f13lkzet::after{background-color:var(--colorNeutralForegroundDisabled);}", ".fo72kxq::after{bottom:0;}", ".f9bb2ob::after{height:var(--strokeWidthThick);}", ".f1q70ajw::after{left:var(--spacingHorizontalSNudge);}", ".f18rbzdx::after{right:var(--spacingHorizontalSNudge);}", ".fqbue9b::after{bottom:var(--spacingVerticalXS);}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fk1klkt::after{top:var(--spacingVerticalXS);}", ".f1o25lip::after{width:var(--strokeWidthThicker);}", ".f1vx7lu8::after{height:var(--strokeWidthThicker);}", ".fna7m5n::after{left:var(--spacingHorizontalM);}", ".f1oxpfwv::after{right:var(--spacingHorizontalM);}", ".fipylg0::after{bottom:var(--spacingVerticalS);}", ".fqchiol::after{top:var(--spacingVerticalS);}", ".f1w7dm5g::after{bottom:var(--spacingVerticalMNudge);}", ".f1p6em4m::after{top:var(--spacingVerticalMNudge);}"],
   m: [["@media (forced-colors: active){.fy7ktjt::after{background-color:ButtonText;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f16tp0gf:hover::after{background-color:ButtonText;}}", {
+  }], ["@media (forced-colors: active){.f1033yux:enabled:hover::after{background-color:ButtonText;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fj0yp7j:active::after{background-color:ButtonText;}}", {
+  }], ["@media (forced-colors: active){.fkh9b8o:enabled:active::after{background-color:ButtonText;}}", {
     m: "(forced-colors: active)"
   }]]
 });
@@ -469,16 +710,21 @@ export const useTabIndicatorStyles_unstable = state => {
   const pendingIndicatorStyles = usePendingIndicatorStyles();
   const activeIndicatorStyles = useActiveIndicatorStyles();
   const {
+    appearance,
     disabled,
     selected,
     size,
     vertical
   } = state;
-  state.root.className = mergeClasses(tabClassNames.root, rootStyles.root,
-  // pending indicator (before pseudo element)
-  pendingIndicatorStyles.base, size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal), size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal), size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal), disabled && pendingIndicatorStyles.disabled,
-  // active indicator (after pseudo element)
-  selected && activeIndicatorStyles.base, selected && !disabled && activeIndicatorStyles.selected, selected && size === 'small' && (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal), selected && size === 'medium' && (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal), selected && size === 'large' && (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal), selected && disabled && activeIndicatorStyles.disabled, state.root.className);
+  const classes = [tabClassNames.root, rootStyles.root];
+  if (appearance !== 'subtle-circular' && appearance !== 'filled-circular') {
+    classes.push(
+    // pending indicator (before pseudo element)
+    pendingIndicatorStyles.base, size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal), size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal), size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal), disabled && pendingIndicatorStyles.disabled,
+    // active indicator (after pseudo element)
+    selected && activeIndicatorStyles.base, selected && !disabled && activeIndicatorStyles.selected, selected && size === 'small' && (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal), selected && size === 'medium' && (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal), selected && size === 'large' && (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal), selected && disabled && activeIndicatorStyles.disabled);
+  }
+  state.root.className = mergeClasses(...classes, state.root.className);
   useTabAnimatedIndicatorStyles_unstable(state);
   return state;
 };
@@ -504,7 +750,19 @@ export const useTabButtonStyles_unstable = (state, slot) => {
     size,
     vertical
   } = state;
-  slot.className = mergeClasses(rootStyles.button, vertical ? rootStyles.vertical : rootStyles.horizontal, size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal), size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal), size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal), focusStyles.base, !disabled && appearance === 'subtle' && rootStyles.subtle, !disabled && appearance === 'transparent' && rootStyles.transparent, !disabled && selected && rootStyles.selected, disabled && rootStyles.disabled, slot.className);
+  const isSubtleCircular = appearance === 'subtle-circular';
+  const isFilledCircular = appearance === 'filled-circular';
+  const isCircular = isSubtleCircular || isFilledCircular;
+  const circularAppearance = [rootStyles.circular,
+  // subtle-circular appearance
+  isSubtleCircular && rootStyles.subtleCircular, selected && isSubtleCircular && rootStyles.subtleCircularSelected, disabled && isSubtleCircular && rootStyles.subtleCircularDisabled, selected && disabled && isSubtleCircular && rootStyles.subtleCircularDisabledSelected,
+  // filled-circular appearance
+  isFilledCircular && rootStyles.filledCircular, selected && isFilledCircular && rootStyles.filledCircularSelected, disabled && isFilledCircular && rootStyles.filledCircularDisabled, selected && disabled && isFilledCircular && rootStyles.filledCircularDisabledSelected];
+  slot.className = mergeClasses(rootStyles.button,
+  // orientation
+  vertical ? rootStyles.vertical : rootStyles.horizontal,
+  // size
+  size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal), size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal), size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal), focusStyles.base, !disabled && appearance === 'subtle' && rootStyles.subtle, !disabled && appearance === 'transparent' && rootStyles.transparent, ...(isCircular ? circularAppearance : [!disabled && selected && rootStyles.selected]), disabled && rootStyles.disabled, slot.className);
   return state;
 };
 /**