@fluentui/web-components 3.0.0-rc.20 → 3.0.0-rc.22

package/dist/esm/switch/switch.styles.css

@@ -0,0 +1,121 @@
+
+  :host([hidden]){display:none}:host{display:inline-flex}
+
+  :host {
+    box-sizing: border-box;
+    align-items: center;
+    flex-direction: row;
+    outline: none;
+    user-select: none;
+    contain: content;
+    padding: 0 var(--spacingHorizontalXXS);
+    width: 40px;
+    height: 20px;
+    background-color: var(--colorTransparentBackground);
+    border: 1px solid var(--colorNeutralStrokeAccessible);
+    border-radius: var(--borderRadiusCircular);
+  }
+
+  :host(:enabled) {
+    cursor: pointer;
+  }
+
+  :host(:hover) {
+    background: none;
+    border-color: var(--colorNeutralStrokeAccessibleHover);
+  }
+  :host(:active) {
+    border-color: var(--colorNeutralStrokeAccessiblePressed);
+  }
+  :host(:disabled),
+  :host([readonly]) {
+    border: 1px solid var(--colorNeutralStrokeDisabled);
+    background-color: none;
+    pointer: default;
+  }
+  :host(:state(checked)) {
+    background: var(--colorCompoundBrandBackground);
+    border-color: var(--colorCompoundBrandBackground);
+  }
+  :host(:state(checked):hover) {
+    background: var(--colorCompoundBrandBackgroundHover);
+    border-color: var(--colorCompoundBrandBackgroundHover);
+  }
+  :host(:state(checked):active) {
+    background: var(--colorCompoundBrandBackgroundPressed);
+    border-color: var(--colorCompoundBrandBackgroundPressed);
+  }
+  :host(:state(checked):disabled) {
+    background: var(--colorNeutralBackgroundDisabled);
+    border-color: var(--colorNeutralStrokeDisabled);
+  }
+  .checked-indicator {
+    height: 14px;
+    width: 14px;
+    border-radius: 50%;
+    margin-inline-start: 0;
+    background-color: var(--colorNeutralForeground3);
+    transition-duration: var(--durationNormal);
+    transition-timing-function: var(--curveEasyEase);
+    transition-property: margin-inline-start;
+  }
+  :host(:state(checked)) .checked-indicator {
+    background-color: var(--colorNeutralForegroundInverted);
+    margin-inline-start: calc(100% - 14px);
+  }
+  :host(:state(checked):hover) .checked-indicator {
+    background: var(--colorNeutralForegroundInvertedHover);
+  }
+  :host(:state(checked):active) .checked-indicator {
+    background: var(--colorNeutralForegroundInvertedPressed);
+  }
+  :host(:hover) .checked-indicator {
+    background-color: var(--colorNeutralForeground3Hover);
+  }
+  :host(:active) .checked-indicator {
+    background-color: var(--colorNeutralForeground3Pressed);
+  }
+  :host(:disabled) .checked-indicator,
+  :host([readonly]) .checked-indicator {
+    background: var(--colorNeutralForegroundDisabled);
+  }
+  :host(:state(checked):disabled) .checked-indicator {
+    background: var(--colorNeutralForegroundDisabled);
+  }
+
+  :host(:focus-visible) {
+    outline: none;
+  }
+
+  :host(:not([slot='input']):focus-visible) {
+    border-color: var(--colorTransparentStroke);
+    outline: var(--strokeWidthThick) solid var(--colorTransparentStroke);
+    outline-offset: 1px;
+    box-shadow: var(--shadow4), 0 0 0 2px var(--colorStrokeFocus2);
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      border-color: InactiveBorder;
+    }
+    :host(:state(checked)),
+    :host(:state(checked):active),
+    :host(:state(checked):hover) {
+      background: Highlight;
+      border-color: Highlight;
+    }
+    .checked-indicator,
+    :host(:hover) .checked-indicator,
+    :host(:active) .checked-indicator {
+      background-color: ActiveCaption;
+    }
+    :host(:state(checked)) .checked-indicator,
+    :host(:state(checked):hover) .checked-indicator,
+    :host(:state(checked):active) .checked-indicator {
+      background-color: ButtonFace;
+    }
+    :host(:disabled) .checked-indicator,
+    :host(:state(checked):disabled) .checked-indicator {
+      background-color: GrayText;
+    }
+  }

package/dist/esm/switch/switch.template.html

@@ -0,0 +1,10 @@
+<f-template name="fluent-switch" shadowrootmode="open">
+<template
+      @click="{clickHandler($e)}"
+      @input="{inputHandler($e)}"
+      @keydown="{keydownHandler($e)}"
+      @keyup="{keyupHandler($e)}"
+    >{{styles}}
+      <slot name="switch"><span class="checked-indicator" part="checked-indicator"></span></slot>
+    </template>
+</f-template>

package/dist/esm/tab/define-async.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/tab/define-async.js

@@ -0,0 +1,5 @@
+import { RenderableFASTElement } from '@microsoft/fast-html';
+import { definition } from './tab.definition-async.js';
+import { Tab } from './tab.js';
+RenderableFASTElement(Tab).defineAsync(definition);
+//# sourceMappingURL=define-async.js.map

package/dist/esm/tab/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/tab/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,qBAAqB,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/tab/tab.definition-async.d.ts

@@ -0,0 +1,10 @@
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+/**
+ * The async definition configuration for the fluent-tab element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export declare const definition: PartialFASTElementDefinition;

package/dist/esm/tab/tab.definition-async.js

@@ -0,0 +1,14 @@
+import { tagName } from './tab.options.js';
+/**
+ * The async definition configuration for the fluent-tab element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export const definition = {
+    name: tagName,
+    templateOptions: 'defer-and-hydrate',
+};
+//# sourceMappingURL=tab.definition-async.js.map

package/dist/esm/tab/tab.definition-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.definition-async.js","sourceRoot":"","sources":["../../../src/tab/tab.definition-async.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,eAAe,EAAE,mBAAmB;CACrC,CAAC"}

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

@@ -0,0 +1,118 @@
+
+  :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;
+  }
+
+  :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

@@ -0,0 +1,7 @@
+<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>
+</f-template>

package/dist/esm/tablist/define-async.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/tablist/define-async.js

@@ -0,0 +1,5 @@
+import { RenderableFASTElement } from '@microsoft/fast-html';
+import { definition } from './tablist.definition-async.js';
+import { Tablist } from './tablist.js';
+RenderableFASTElement(Tablist).defineAsync(definition);
+//# sourceMappingURL=define-async.js.map

package/dist/esm/tablist/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/tablist/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,qBAAqB,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/tablist/tablist.definition-async.d.ts

@@ -0,0 +1,10 @@
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+/**
+ * The async definition configuration for the fluent-tablist element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export declare const definition: PartialFASTElementDefinition;

package/dist/esm/tablist/tablist.definition-async.js

@@ -0,0 +1,14 @@
+import { tagName } from './tablist.options.js';
+/**
+ * The async definition configuration for the fluent-tablist element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export const definition = {
+    name: tagName,
+    templateOptions: 'defer-and-hydrate',
+};
+//# sourceMappingURL=tablist.definition-async.js.map

package/dist/esm/tablist/tablist.definition-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tablist.definition-async.js","sourceRoot":"","sources":["../../../src/tablist/tablist.definition-async.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,eAAe,EAAE,mBAAmB;CACrC,CAAC"}

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

@@ -0,0 +1,203 @@
+
+  :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;
+    }
+
+    :host::after {
+      background-color: var(--colorCompoundBrandStroke);
+      content: '';
+      inline-size: 100%;
+      inset: auto auto anchor(end) anchor(center);
+      position: absolute;
+      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

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

package/dist/esm/text/define-async.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/text/define-async.js

@@ -0,0 +1,5 @@
+import { RenderableFASTElement } from '@microsoft/fast-html';
+import { definition } from './text.definition-async.js';
+import { Text } from './text.js';
+RenderableFASTElement(Text).defineAsync(definition);
+//# sourceMappingURL=define-async.js.map

package/dist/esm/text/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/text/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,qBAAqB,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/text/text.definition-async.d.ts

@@ -0,0 +1,10 @@
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+/**
+ * The async definition configuration for the fluent-text element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export declare const definition: PartialFASTElementDefinition;

package/dist/esm/text/text.definition-async.js

@@ -0,0 +1,14 @@
+import { tagName } from './text.options.js';
+/**
+ * The async definition configuration for the fluent-text element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export const definition = {
+    name: tagName,
+    templateOptions: 'defer-and-hydrate',
+};
+//# sourceMappingURL=text.definition-async.js.map

package/dist/esm/text/text.definition-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.definition-async.js","sourceRoot":"","sources":["../../../src/text/text.definition-async.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,eAAe,EAAE,mBAAmB;CACrC,CAAC"}