@fluentui/web-components 3.0.0-rc.21 → 3.0.0-rc.23

package/dist/esm/spinner/spinner.styles.css

@@ -0,0 +1,155 @@
+
+  :host([hidden]){display:none}:host{display:inline-flex}
+
+  :host {
+    --duration: 1.5s;
+    --indicatorSize: var(--strokeWidthThicker);
+    --size: 32px;
+    height: var(--size);
+    width: var(--size);
+    contain: strict;
+    content-visibility: auto;
+  }
+
+  :host([size='tiny']) {
+    --indicatorSize: var(--strokeWidthThick);
+    --size: 20px;
+  }
+  :host([size='extra-small']) {
+    --indicatorSize: var(--strokeWidthThick);
+    --size: 24px;
+  }
+  :host([size='small']) {
+    --indicatorSize: var(--strokeWidthThick);
+    --size: 28px;
+  }
+  :host([size='large']) {
+    --indicatorSize: var(--strokeWidthThicker);
+    --size: 36px;
+  }
+  :host([size='extra-large']) {
+    --indicatorSize: var(--strokeWidthThicker);
+    --size: 40px;
+  }
+  :host([size='huge']) {
+    --indicatorSize: var(--strokeWidthThickest);
+    --size: 44px;
+  }
+
+  .progress,
+  .background,
+  .spinner,
+  .start,
+  .end,
+  .indicator {
+    position: absolute;
+    inset: 0;
+  }
+
+  .progress,
+  .spinner,
+  .indicator {
+    animation: none var(--duration) infinite var(--curveEasyEase);
+  }
+
+  .progress {
+    animation-timing-function: linear;
+    animation-name: spin-linear;
+  }
+
+  .background {
+    border: var(--indicatorSize) solid var(--colorBrandStroke2);
+    border-radius: 50%;
+  }
+
+  :host([appearance='inverted']) .background {
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+
+  .spinner {
+    animation-name: spin-swing;
+  }
+
+  .start {
+    overflow: hidden;
+    right: 50%;
+  }
+
+  .end {
+    overflow: hidden;
+    left: 50%;
+  }
+
+  .indicator {
+    color: var(--colorBrandStroke1);
+    box-sizing: border-box;
+    border-radius: 50%;
+    border: var(--indicatorSize) solid transparent;
+    border-block-start-color: currentcolor;
+    border-right-color: currentcolor;
+  }
+
+  :host([appearance='inverted']) .indicator {
+    color: var(--colorNeutralStrokeOnBrand2);
+  }
+
+  .start .indicator {
+    rotate: 135deg; /* Starts 9 o'clock */
+    inset: 0 -100% 0 0;
+    animation-name: spin-start;
+  }
+
+  .end .indicator {
+    rotate: 135deg; /* Ends at 3 o'clock */
+    inset: 0 0 0 -100%;
+    animation-name: spin-end;
+  }
+
+  @keyframes spin-linear {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes spin-swing {
+    0% {
+      transform: rotate(-135deg);
+    }
+    50% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(225deg);
+    }
+  }
+
+  @keyframes spin-start {
+    0%,
+    100% {
+      transform: rotate(0deg);
+    }
+    50% {
+      transform: rotate(-80deg);
+    }
+  }
+
+  @keyframes spin-end {
+    0%,
+    100% {
+      transform: rotate(0deg);
+    }
+    50% {
+      transform: rotate(70deg);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .background {
+      display: none;
+    }
+    .indicator {
+      border-color: Canvas;
+      border-block-start-color: Highlight;
+      border-right-color: Highlight;
+    }
+  }

package/dist/esm/spinner/spinner.template.html

@@ -0,0 +1,13 @@
+<f-template name="fluent-spinner" shadowrootmode="open"><template>{{styles}}<slot name="indicator">
+    <div class="background"></div>
+    <div class="progress">
+      <div class="spinner">
+        <div class="start">
+          <div class="indicator"></div>
+        </div>
+        <div class="end">
+          <div class="indicator"></div>
+        </div>
+      </div>
+    </div>
+  </slot></template></f-template>

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/switch/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,qBAAqB,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC"}

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

@@ -0,0 +1,10 @@
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+/**
+ * The async definition configuration for the fluent-switch 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/switch/switch.definition-async.js

@@ -0,0 +1,14 @@
+import { tagName } from './switch.options.js';
+/**
+ * The async definition configuration for the fluent-switch 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=switch.definition-async.js.map

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

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

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"}