@fluentui/web-components 3.0.0-rc.25 → 3.0.0-rc.27

package/dist/esm/tab/tab.styles.css

@@ -1,118 +1,122 @@
-
-  :host([hidden]){display:none}:host{display:inline-flex}
-
-  :host {
-    position: relative;
-    flex-direction: row;
-    align-items: center;
-    cursor: pointer;
-    box-sizing: border-box;
-    justify-content: center;
-    line-height: var(--lineHeightBase300);
-    font-family: var(--fontFamilyBase);
-    font-size: var(--fontSizeBase300);
-    color: var(--colorNeutralForeground2);
-    fill: currentcolor;
-    grid-row: 1;
-    padding: var(--spacingHorizontalM) var(--spacingHorizontalMNudge);
-    border-radius: var(--borderRadiusMedium);
-    gap: 4px;
-  }
-  :host .tab-content {
-    display: inline-flex;
-    flex-direction: column;
-    padding: 0 2px;
-  }
-
-  :host([aria-selected='true']) {
-    color: var(--colorNeutralForeground1);
-    font-weight: var(--fontWeightSemibold);
-  }
-
-  /* adds hidden textContent to prevent shifting ui on bold / unbolding of text */
-  :host .tab-content::after {
-    content: var(--textContent);
-    visibility: hidden;
-    height: 0;
-    line-height: var(--lineHeightBase300);
-    font-weight: var(--fontWeightSemibold);
-  }
-
-  :host([aria-selected='true'])::after {
-    background-color: var(--colorCompoundBrandStroke);
-    border-radius: var(--borderRadiusCircular);
-    content: '';
-    inset: 0;
-    position: absolute;
-    z-index: 2;
-  }
-
-  :host([aria-selected='false']:hover)::after {
-    background-color: var(--colorNeutralStroke1Hover);
-    border-radius: var(--borderRadiusCircular);
-    content: '';
-    inset: 0;
-    position: absolute;
-    z-index: 1;
-  }
-
-  /*
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: inline-flex;
+}
+
+:host {
+  position: relative;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  box-sizing: border-box;
+  justify-content: center;
+  line-height: var(--lineHeightBase300);
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase300);
+  color: var(--colorNeutralForeground2);
+  fill: currentcolor;
+  grid-row: 1;
+  padding: var(--spacingHorizontalM) var(--spacingHorizontalMNudge);
+  border-radius: var(--borderRadiusMedium);
+  gap: 4px;
+}
+:host .tab-content {
+  display: inline-flex;
+  flex-direction: column;
+  padding: 0 2px;
+}
+
+:host([aria-selected='true']) {
+  color: var(--colorNeutralForeground1);
+  font-weight: var(--fontWeightSemibold);
+}
+
+/* adds hidden textContent to prevent shifting ui on bold / unbolding of text */
+:host .tab-content::after {
+  content: var(--textContent);
+  visibility: hidden;
+  height: 0;
+  line-height: var(--lineHeightBase300);
+  font-weight: var(--fontWeightSemibold);
+}
+
+:host([aria-selected='true'])::after {
+  background-color: var(--colorCompoundBrandStroke);
+  border-radius: var(--borderRadiusCircular);
+  content: '';
+  inset: 0;
+  position: absolute;
+  z-index: 2;
+}
+
+:host([aria-selected='false']:hover)::after {
+  background-color: var(--colorNeutralStroke1Hover);
+  border-radius: var(--borderRadiusCircular);
+  content: '';
+  inset: 0;
+  position: absolute;
+  z-index: 1;
+}
+
+/*
    * TODO: Remove '(text-size-adjust: auto)' after this bug is fixed:
    * https://bugs.webkit.org/show_bug.cgi?id=298646
    * Also remove the same trick from tablist.styles.ts.
    * Using '@supports (text-size-adjust: auto)' here to exclude Safari 26 from
    * using CSS Anchor Positioning here because it crashes.
    */
-  @supports (anchor-name: --a) and (text-size-adjust: auto) {
-    :host([aria-selected='true'])::after {
-      background-color: transparent;
-    }
-
-    :host([aria-selected='true']:hover)::after {
-      background-color: var(--colorNeutralStroke1Hover);
-    }
-  }
-
-  :host([aria-selected='true'][disabled])::after {
-    background-color: var(--colorNeutralForegroundDisabled);
-  }
-
-  ::slotted([slot='start']),
-  ::slotted([slot='end']) {
-    display: flex;
-  }
-  :host([disabled]) {
-    cursor: not-allowed;
-    fill: var(--colorNeutralForegroundDisabled);
-    color: var(--colorNeutralForegroundDisabled);
-    pointer-events: none;
-  }
-
-  :host([disabled]:hover)::after {
-    background-color: unset;
-  }
-
-  :host(:focus) {
-    outline: none;
-  }
-
-  :host(:focus-visible) {
-    border-radius: var(--borderRadiusSmall);
-    box-shadow: 0 0 0 3px var(--colorStrokeFocus2);
-    outline: 1px solid var(--colorStrokeFocus1);
-  }
-
-  :host([data-hasIndent]) {
-    display: grid;
-    grid-template-columns: 20px 1fr auto;
+@supports (anchor-name: --a) and (text-size-adjust: auto) {
+  :host([aria-selected='true'])::after {
+    background-color: transparent;
   }
 
-  :host([data-hasIndent]) .tab-content {
-    grid-column: 2;
+  :host([aria-selected='true']:hover)::after {
+    background-color: var(--colorNeutralStroke1Hover);
   }
-
-  @media (forced-colors: active) {
-    :host([aria-selected='true'])::after {
-      background-color: Highlight;
-    }
+}
+
+:host([aria-selected='true'][disabled])::after {
+  background-color: var(--colorNeutralForegroundDisabled);
+}
+
+::slotted([slot='start']),
+::slotted([slot='end']) {
+  display: flex;
+}
+:host([disabled]) {
+  cursor: not-allowed;
+  fill: var(--colorNeutralForegroundDisabled);
+  color: var(--colorNeutralForegroundDisabled);
+  pointer-events: none;
+}
+
+:host([disabled]:hover)::after {
+  background-color: unset;
+}
+
+:host(:focus) {
+  outline: none;
+}
+
+:host(:focus-visible) {
+  border-radius: var(--borderRadiusSmall);
+  box-shadow: 0 0 0 3px var(--colorStrokeFocus2);
+  outline: 1px solid var(--colorStrokeFocus1);
+}
+
+:host([data-hasIndent]) {
+  display: grid;
+  grid-template-columns: 20px 1fr auto;
+}
+
+:host([data-hasIndent]) .tab-content {
+  grid-column: 2;
+}
+
+@media (forced-colors: active) {
+  :host([aria-selected='true'])::after {
+    background-color: Highlight;
   }
+}

package/dist/esm/tab/tab.template.html

@@ -1,7 +1,8 @@
 <f-template name="fluent-tab" shadowrootmode="open">
-<template slot="tab" role="tab">{{styles}}
-       <slot name="start" f-ref="{start}"></slot> 
-      <span class="tab-content"><slot></slot></span>
-       <slot name="end" f-ref="{end}"></slot> 
-    </template>
+  <template slot="tab" role="tab">
+    {{styles}}
+    <slot name="start" f-ref="{start}"></slot>
+    <span class="tab-content"><slot></slot></span>
+    <slot name="end" f-ref="{end}"></slot>
+  </template>
 </f-template>

package/dist/esm/tablist/tablist.d.ts

@@ -5,6 +5,7 @@ import { TablistAppearance, type TablistSize } from './tablist.options.js';
  * A Tablist component.
  *
  * @tag fluent-tablist
+ * @fires { Event } change - Fired when the active tab changes.
  *
  * @public
  */

package/dist/esm/tablist/tablist.js

@@ -8,6 +8,7 @@ import { TablistAppearance } from './tablist.options.js';
  * A Tablist component.
  *
  * @tag fluent-tablist
+ * @fires { Event } change - Fired when the active tab changes.
  *
  * @public
  */

package/dist/esm/tablist/tablist.js.map

@@ -1 +1 @@
-{"version":3,"file":"tablist.js","sourceRoot":"","sources":["../../../src/tablist/tablist.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,2CAA2C,CAAC;AAEvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAoB,MAAM,sBAAsB,CAAC;AAE3E;;;;;;GAMG;AACH,MAAM,OAAO,OAAQ,SAAQ,WAAW;IAAxC;;QACE;;;WAGG;QAEI,eAAU,GAAuB,iBAAiB,CAAC,WAAW,CAAC;IAuCxE,CAAC;IAzBC,oBAAoB;QAClB,IAAI,CAAC,EAAE,EAAE,UAAU,EAAE,CAAC;QACtB,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAC/B,CAAC;IAEQ,WAAW,CAAC,IAAuB,EAAE,IAAuB;QACnE,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAE9B,IAAI,CAAC,OAAO,KAAK,IAAI,mBAAmB,CACtC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,EAC5G,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAC7B,CAAC;QACF,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;YACb,IAAI,CAAC,EAAE,GAAG,IAAI,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE;gBAC3C,UAAU,EAAE;oBACV,QAAQ,EAAE,SAAS;oBACnB,IAAI,EAAE,SAAS;oBACf,MAAM,EAAE,KAAK;oBACb,IAAI,EAAE,IAAI;iBACX;aACF,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;QACnB,CAAC;IACH,CAAC;CACF;AAvCQ;IADN,IAAI;2CACiE;AAQ/D;IADN,IAAI;qCACqB"}
+{"version":3,"file":"tablist.js","sourceRoot":"","sources":["../../../src/tablist/tablist.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,2CAA2C,CAAC;AAEvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAoB,MAAM,sBAAsB,CAAC;AAE3E;;;;;;;GAOG;AACH,MAAM,OAAO,OAAQ,SAAQ,WAAW;IAAxC;;QACE;;;WAGG;QAEI,eAAU,GAAuB,iBAAiB,CAAC,WAAW,CAAC;IAuCxE,CAAC;IAzBC,oBAAoB;QAClB,IAAI,CAAC,EAAE,EAAE,UAAU,EAAE,CAAC;QACtB,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAC/B,CAAC;IAEQ,WAAW,CAAC,IAAuB,EAAE,IAAuB;QACnE,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAE9B,IAAI,CAAC,OAAO,KAAK,IAAI,mBAAmB,CACtC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,EAC5G,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAC7B,CAAC;QACF,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;YACb,IAAI,CAAC,EAAE,GAAG,IAAI,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE;gBAC3C,UAAU,EAAE;oBACV,QAAQ,EAAE,SAAS;oBACnB,IAAI,EAAE,SAAS;oBACf,MAAM,EAAE,KAAK;oBACb,IAAI,EAAE,IAAI;iBACX;aACF,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;QACnB,CAAC;IACH,CAAC;CACF;AAvCQ;IADN,IAAI;2CACiE;AAQ/D;IADN,IAAI;qCACqB"}

package/dist/esm/tablist/tablist.styles.css

@@ -1,203 +1,207 @@
-
-  :host([hidden]){display:none}:host{display:flex}
-
-  :host {
-    --tabPaddingInline: var(--spacingHorizontalMNudge);
-    --tabPaddingBlock: var(--spacingHorizontalM);
-    --tabIndicatorInsetInline: var(--tabPaddingInline);
-    --tabIndicatorInsetBlock: 0;
-    box-sizing: border-box;
-    color: var(--colorNeutralForeground2);
-    flex-direction: row;
-    position: relative;
-  }
-
-  :host([size='small']) {
-    --tabPaddingBlock: var(--spacingVerticalSNudge);
-    --tabPaddingInline: var(--spacingHorizontalSNudge);
-  }
-
-  :host([size='large']) {
-    --tabPaddingBlock: var(--spacingVerticalL);
-    --tabPaddingInline: var(--spacingHorizontalMNudge);
-  }
-
-  :host([orientation='vertical']) {
-    --tabPaddingBlock: var(--spacingVerticalS);
-    --tabIndicatorInsetBlock: var(--spacingVerticalS);
-    flex-direction: column;
-  }
-
-  :host([orientation='vertical'][size='small']) {
-    --tabPaddingBlock: var(--spacingVerticalXXS);
-    --tabIndicatorInsetBlock: var(--spacingVerticalSNudge);
-  }
-
-  :host([orientation='vertical'][size='large']) {
-    --tabPaddingBlock: var(--spacingVerticalS);
-    --tabIndicatorInsetBlock: var(--spacingVerticalMNudge);
-  }
-
-  ::slotted([slot='tab']) {
-    padding-inline: var(--tabPaddingInline);
-    padding-block: var(--tabPaddingBlock);
-  }
-
-  :host([orientation='vertical']) ::slotted([role='tab']) {
-    justify-content: flex-start;
-  }
-
-  :host ::slotted([slot='tab'])::after {
-    height: var(--strokeWidthThicker);
-    margin-block-start: auto;
-  }
-
-  :host([orientation='vertical']) ::slotted([slot='tab'])::after {
-    width: var(--strokeWidthThicker);
-    height: unset;
-    margin-block-start: unset;
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: flex;
+}
+
+:host {
+  --tabPaddingInline: var(--spacingHorizontalMNudge);
+  --tabPaddingBlock: var(--spacingHorizontalM);
+  --tabIndicatorInsetInline: var(--tabPaddingInline);
+  --tabIndicatorInsetBlock: 0;
+  box-sizing: border-box;
+  color: var(--colorNeutralForeground2);
+  flex-direction: row;
+  position: relative;
+}
+
+:host([size='small']) {
+  --tabPaddingBlock: var(--spacingVerticalSNudge);
+  --tabPaddingInline: var(--spacingHorizontalSNudge);
+}
+
+:host([size='large']) {
+  --tabPaddingBlock: var(--spacingVerticalL);
+  --tabPaddingInline: var(--spacingHorizontalMNudge);
+}
+
+:host([orientation='vertical']) {
+  --tabPaddingBlock: var(--spacingVerticalS);
+  --tabIndicatorInsetBlock: var(--spacingVerticalS);
+  flex-direction: column;
+}
+
+:host([orientation='vertical'][size='small']) {
+  --tabPaddingBlock: var(--spacingVerticalXXS);
+  --tabIndicatorInsetBlock: var(--spacingVerticalSNudge);
+}
+
+:host([orientation='vertical'][size='large']) {
+  --tabPaddingBlock: var(--spacingVerticalS);
+  --tabIndicatorInsetBlock: var(--spacingVerticalMNudge);
+}
+
+::slotted([slot='tab']) {
+  padding-inline: var(--tabPaddingInline);
+  padding-block: var(--tabPaddingBlock);
+}
+
+:host([orientation='vertical']) ::slotted([role='tab']) {
+  justify-content: flex-start;
+}
+
+:host ::slotted([slot='tab'])::after {
+  height: var(--strokeWidthThicker);
+  margin-block-start: auto;
+}
+
+:host([orientation='vertical']) ::slotted([slot='tab'])::after {
+  width: var(--strokeWidthThicker);
+  height: unset;
+  margin-block-start: unset;
+}
+
+/* ::before adds a secondary indicator placeholder that appears right after click on the active tab */
+:host ::slotted([slot='tab'])::before {
+  height: var(--strokeWidthThicker);
+  border-radius: var(--borderRadiusCircular);
+  content: '';
+  inset-inline: var(--tabIndicatorInsetInline);
+  inset-block: var(--tabIndicatorInsetBlock);
+  position: absolute;
+  margin-top: auto;
+}
+
+:host ::slotted([slot='tab'])::before {
+  inset-inline: var(--tabIndicatorInsetInline);
+  inset-block: var(--tabIndicatorInsetBlock);
+}
+
+:host ::slotted([slot='tab'][aria-selected='true'])::before {
+  background-color: var(--colorNeutralForegroundDisabled);
+}
+
+:host ::slotted([slot='tab'][aria-selected='false']:hover)::after {
+  height: var(--strokeWidthThicker);
+  margin-block-start: auto;
+  transform-origin: left;
+}
+
+:host([orientation='vertical']) ::slotted([slot='tab'])::before,
+:host([orientation='vertical']) ::slotted([slot='tab'][aria-selected='false']:hover)::after {
+  height: unset;
+  width: var(--strokeWidthThicker);
+  margin-inline-end: auto;
+  transform-origin: top;
+}
+
+:host([size='small']) ::slotted([slot='tab']) {
+  font-size: var(--fontSizeBase300);
+  line-height: var(--lineHeightBase300);
+}
+
+:host([size='large']) ::slotted([slot='tab']) {
+  font-size: var(--fontSizeBase400);
+  line-height: var(--lineHeightBase400);
+}
+
+/* horizontal spacing for indicator */
+:host ::slotted([slot='tab'])::after,
+:host ::slotted([slot='tab'])::before,
+:host ::slotted([slot='tab']:hover)::after {
+  inset-inline: var(--tabIndicatorInsetInline);
+}
+
+:host([orientation='vertical']) ::slotted([slot='tab'])::after,
+:host([orientation='vertical']) ::slotted([slot='tab'])::before,
+:host([orientation='vertical']) ::slotted([slot='tab']:hover)::after {
+  inset-inline: 0;
+  inset-block: var(--tabIndicatorInsetBlock);
+}
+
+/* disabled styles */
+:host([disabled]) {
+  cursor: not-allowed;
+  color: var(--colorNeutralForegroundDisabled);
+}
+
+:host([disabled]) ::slotted([slot='tab']) {
+  pointer-events: none;
+  cursor: not-allowed;
+  color: var(--colorNeutralForegroundDisabled);
+}
+
+:host([disabled]) ::slotted([slot='tab']:after) {
+  background-color: var(--colorNeutralForegroundDisabled);
+}
+
+:host([disabled]) ::slotted([slot='tab'][aria-selected='true'])::after {
+  background-color: var(--colorNeutralForegroundDisabled);
+}
+
+:host([disabled]) ::slotted([slot='tab']:hover):before {
+  content: unset;
+}
+
+:host([appearance='subtle']) ::slotted([slot='tab']:hover) {
+  background-color: var(--colorSubtleBackgroundHover);
+  color: var(--colorNeutralForeground1Hover);
+  fill: var(--colorCompoundBrandForeground1Hover);
+}
+
+:host([appearance='subtle']) ::slotted([slot='tab']:active) {
+  background-color: var(--colorSubtleBackgroundPressed);
+  fill: var(--colorSubtleBackgroundPressed);
+  color: var(--colorNeutralForeground1);
+}
+
+/*
+   * TODO: Remove '(text-size-adjust: auto)' after this bug is fixed:
+   * https://bugs.webkit.org/show_bug.cgi?id=298646
+   * Also remove the same trick from tab.styles.ts.
+   * Using '@supports (text-size-adjust: auto)' here to exclude Safari 26 from
+   * using CSS Anchor Positioning here because it crashes.
+   */
+@supports (anchor-name: --a) and (text-size-adjust: auto) {
+  ::slotted([slot='tab'][aria-selected='true']) {
+    anchor-name: --tab;
   }
 
-  /* ::before adds a secondary indicator placeholder that appears right after click on the active tab */
-  :host ::slotted([slot='tab'])::before {
-    height: var(--strokeWidthThicker);
-    border-radius: var(--borderRadiusCircular);
+  :host::after {
+    background-color: var(--colorCompoundBrandStroke);
     content: '';
-    inset-inline: var(--tabIndicatorInsetInline);
-    inset-block: var(--tabIndicatorInsetBlock);
-    position: absolute;
-    margin-top: auto;
-  }
-
-  :host ::slotted([slot='tab'])::before {
-    inset-inline: var(--tabIndicatorInsetInline);
-    inset-block: var(--tabIndicatorInsetBlock);
-  }
-
-  :host ::slotted([slot='tab'][aria-selected='true'])::before {
-    background-color: var(--colorNeutralForegroundDisabled);
-  }
-
-  :host ::slotted([slot='tab'][aria-selected='false']:hover)::after {
+    inline-size: 100%;
+    inset: auto auto anchor(end) anchor(center);
+    position: fixed;
+    position-anchor: --tab;
+    transform: translateX(-50%);
+    transition-property: inset-inline, width;
+    transition-duration: var(--durationSlow);
+    transition-timing-function: var(--curveDecelerateMax);
+    z-index: 3;
+
+    /* These styles should be in sync with tab.styles.ts’s :host::after */
+    border-radius: var(--borderRadiusCircular);
+    width: calc(anchor-size() - var(--tabIndicatorInsetInline) * 2);
     height: var(--strokeWidthThicker);
-    margin-block-start: auto;
-    transform-origin: left;
-  }
-
-  :host([orientation='vertical']) ::slotted([slot='tab'])::before,
-  :host([orientation='vertical']) ::slotted([slot='tab'][aria-selected='false']:hover)::after {
-    height: unset;
-    width: var(--strokeWidthThicker);
-    margin-inline-end: auto;
-    transform-origin: top;
-  }
-
-  :host([size='small']) ::slotted([slot='tab']) {
-    font-size: var(--fontSizeBase300);
-    line-height: var(--lineHeightBase300);
-  }
-
-  :host([size='large']) ::slotted([slot='tab']) {
-    font-size: var(--fontSizeBase400);
-    line-height: var(--lineHeightBase400);
-  }
-
-  /* horizontal spacing for indicator */
-  :host ::slotted([slot='tab'])::after,
-  :host ::slotted([slot='tab'])::before,
-  :host ::slotted([slot='tab']:hover)::after {
-    inset-inline: var(--tabIndicatorInsetInline);
-  }
-
-  :host([orientation='vertical']) ::slotted([slot='tab'])::after,
-  :host([orientation='vertical']) ::slotted([slot='tab'])::before,
-  :host([orientation='vertical']) ::slotted([slot='tab']:hover)::after {
-    inset-inline: 0;
-    inset-block: var(--tabIndicatorInsetBlock);
   }
 
-  /* disabled styles */
-  :host([disabled]) {
-    cursor: not-allowed;
-    color: var(--colorNeutralForegroundDisabled);
-  }
+  :host([orientation='vertical'])::after {
+    inset: anchor(center) anchor(end) auto 0;
+    transform: translateY(-50%);
+    transition-property: inset-block, height;
 
-  :host([disabled]) ::slotted([slot='tab']) {
-    pointer-events: none;
-    cursor: not-allowed;
-    color: var(--colorNeutralForegroundDisabled);
+    /* These styles should be in sync with #vertical-tab-highlight above */
+    width: var(--strokeWidthThicker);
+    height: calc(anchor-size() - var(--tabIndicatorInsetBlock) * 2);
   }
 
-  :host([disabled]) ::slotted([slot='tab']:after) {
-    background-color: var(--colorNeutralForegroundDisabled);
+  :host(:dir(rtl)[orientation='vertical'])::after {
+    inset: anchor(center) anchor(start) auto 0;
   }
 
-  :host([disabled]) ::slotted([slot='tab'][aria-selected='true'])::after {
+  :host([disabled])::after {
     background-color: var(--colorNeutralForegroundDisabled);
   }
-
-  :host([disabled]) ::slotted([slot='tab']:hover):before {
-    content: unset;
-  }
-
-  :host([appearance='subtle']) ::slotted([slot='tab']:hover) {
-    background-color: var(--colorSubtleBackgroundHover);
-    color: var(--colorNeutralForeground1Hover);
-    fill: var(--colorCompoundBrandForeground1Hover);
-  }
-
-  :host([appearance='subtle']) ::slotted([slot='tab']:active) {
-    background-color: var(--colorSubtleBackgroundPressed);
-    fill: var(--colorSubtleBackgroundPressed);
-    color: var(--colorNeutralForeground1);
-  }
-
-  /*
-   * TODO: Remove '(text-size-adjust: auto)' after this bug is fixed:
-   * https://bugs.webkit.org/show_bug.cgi?id=298646
-   * Also remove the same trick from tab.styles.ts.
-   * Using '@supports (text-size-adjust: auto)' here to exclude Safari 26 from
-   * using CSS Anchor Positioning here because it crashes.
-   */
-  @supports (anchor-name: --a) and (text-size-adjust: auto) {
-    ::slotted([slot='tab'][aria-selected='true']) {
-      anchor-name: --tab;
-    }
-
-    :host::after {
-      background-color: var(--colorCompoundBrandStroke);
-      content: '';
-      inline-size: 100%;
-      inset: auto auto anchor(end) anchor(center);
-      position: fixed;
-      position-anchor: --tab;
-      transform: translateX(-50%);
-      transition-property: inset-inline, width;
-      transition-duration: var(--durationSlow);
-      transition-timing-function: var(--curveDecelerateMax);
-      z-index: 3;
-
-      /* These styles should be in sync with tab.styles.ts’s :host::after */
-      border-radius: var(--borderRadiusCircular);
-      width: calc(anchor-size() - var(--tabIndicatorInsetInline) * 2);
-      height: var(--strokeWidthThicker);
-    }
-
-    :host([orientation='vertical'])::after {
-      inset: anchor(center) anchor(end) auto 0;
-      transform: translateY(-50%);
-      transition-property: inset-block, height;
-
-      /* These styles should be in sync with #vertical-tab-highlight above */
-      width: var(--strokeWidthThicker);
-      height: calc(anchor-size() - var(--tabIndicatorInsetBlock) * 2);
-    }
-
-    :host(:dir(rtl)[orientation='vertical'])::after {
-      inset: anchor(center) anchor(start) auto 0;
-    }
-
-    :host([disabled])::after {
-      background-color: var(--colorNeutralForegroundDisabled);
-    }
-  }
+}