@fluentui/web-components 3.0.0-rc.26 → 3.0.0-rc.28

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.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);
-    }
-  }
+}

package/dist/esm/tablist/tablist.template.html

@@ -1,9 +1,6 @@
 <f-template name="fluent-tablist" shadowrootmode="open">
-<template
-    role="tablist"
-    focusgroup="tablist inline block"
-    @focusin="{handleFocusIn($e)}"
-  >{{styles}}
+  <template role="tablist" focusgroup="tablist inline block" @focusin="{handleFocusIn($e)}">
+    {{styles}}
     <slot name="tab" f-slotted="{slottedTabs}"></slot>
   </template>
 </f-template>