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

package/dist/esm/radio-group/radio-group.definition-async.js

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

package/dist/esm/radio-group/radio-group.definition-async.js.map

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

package/dist/esm/radio-group/radio-group.styles.css

@@ -0,0 +1,41 @@
+
+  :host([hidden]){display:none}:host{display:flex}
+
+  :host {
+    -webkit-tap-highlight-color: transparent;
+    cursor: pointer;
+    gap: var(--spacingVerticalL);
+  }
+
+  :host([orientation='vertical']) {
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  :host([orientation='horizontal']) {
+    flex-direction: row;
+  }
+
+  ::slotted(*) {
+    color: var(--colorNeutralForeground3);
+  }
+
+  ::slotted(:hover) {
+    color: var(--colorNeutralForeground2);
+  }
+
+  ::slotted(:active) {
+    color: var(--colorNeutralForeground1);
+  }
+
+  ::slotted(:state(disabled)) {
+    color: var(--colorNeutralForegroundDisabled);
+  }
+
+  ::slotted(:state(checked)) {
+    color: var(--colorNeutralForeground1);
+  }
+
+  :host([slot='input']) {
+    margin: var(--spacingVerticalS) var(--spacingHorizontalS);
+  }

package/dist/esm/radio-group/radio-group.template.html

@@ -0,0 +1,12 @@
+<f-template name="fluent-radio-group" shadowrootmode="open">
+<template
+      focusgroup="radiogroup wrap"
+      @disabled="{disabledRadioHandler($e)}"
+      @change="{changeHandler($e)}"
+      @click="{clickHandler($e)}"
+      @focusin="{focusinHandler($e)}"
+      @keydown="{keydownHandler($e)}"
+    >{{styles}}
+      <slot f-slotted="{slottedRadios}"></slot>
+    </template>
+</f-template>

package/dist/esm/rating-display/define-async.d.ts

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

package/dist/esm/rating-display/define-async.js

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

package/dist/esm/rating-display/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/rating-display/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,qBAAqB,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/rating-display/rating-display.definition-async.d.ts

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

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

package/dist/esm/rating-display/rating-display.definition-async.js.map

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

package/dist/esm/rating-display/rating-display.styles.css

@@ -0,0 +1,140 @@
+
+  :host([hidden]){display:none}:host{display:inline-flex}
+
+  :host {
+    --_icon-size: 16px;
+    --_icon-gradient-degree: 90deg;
+    --_icon-color-value: var(--colorPaletteMarigoldBorderActive);
+    --_icon-color-empty: var(--colorPaletteMarigoldBackground2);
+    --_default-value: 0;
+    --_default-max: 5;
+    --_mask-image-filled: url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2012%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5.28347%201.54605C5.57692%200.951448%206.42479%200.951449%206.71825%201.54605L7.82997%203.79866L10.3159%204.15988C10.9721%204.25523%2011.2341%205.0616%2010.7592%205.52443L8.96043%207.27785L9.38507%209.7537C9.49716%2010.4072%208.81122%2010.9056%208.22431%2010.597L6.00086%209.4281L3.7774%2010.597C3.19049%2010.9056%202.50455%2010.4072%202.61664%209.7537L3.04128%207.27784L1.24246%205.52443C0.767651%205.0616%201.02966%204.25523%201.68584%204.15988L4.17174%203.79865L5.28347%201.54605Z%22%20%2F%3E%3C%2Fsvg%3E);
+    --_mask-image-outlined: url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2012%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M5.28347%201.54605C5.57692%200.951448%206.42479%200.951449%206.71825%201.54605L7.82997%203.79866L10.3159%204.15988C10.9721%204.25523%2011.2341%205.0616%2010.7592%205.52443L8.96043%207.27785L9.38507%209.7537C9.49716%2010.4072%208.81122%2010.9056%208.22431%2010.597L6.00086%209.4281L3.7774%2010.597C3.19049%2010.9056%202.50455%2010.4072%202.61664%209.7537L3.04128%207.27784L1.24246%205.52443C0.767651%205.0616%201.02966%204.25523%201.68584%204.15988L4.17174%203.79865L5.28347%201.54605Z%22%20%2F%3E%3C%2Fsvg%3E);
+    --_mask-position-x: left;
+
+    align-items: center;
+    color: var(--colorNeutralForeground1);
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase200);
+    line-height: var(--lineHeightBase200);
+    contain: layout style;
+    user-select: none;
+  }
+
+  :host(:dir(rtl)) {
+    --_icon-gradient-degree: -90deg;
+    --_mask-position-x: right;
+  }
+
+  :host([size='small']) {
+    --_icon-size: 12px;
+  }
+
+  :host([size='large']) {
+    --_icon-size: 20px;
+    font-size: var(--fontSizeBase300);
+    line-height: var(--lineHeightBase300);
+  }
+
+  ::slotted([slot='icon']) {
+    display: none;
+  }
+
+  :host([color='neutral']) {
+    --_icon-color-value: var(--colorNeutralForeground1);
+    --_icon-color-empty: var(--colorNeutralBackground6);
+  }
+
+  :host([color='brand']) {
+    --_icon-color-value: var(--colorBrandForeground1);
+    --_icon-color-empty: var(--colorBrandBackground2);
+  }
+
+  @supports (width: attr(value type(<number>))) {
+    :host {
+      --_attr-value: attr(value type(<number>));
+      --_attr-max: attr(max type(<number>));
+    }
+  }
+
+  :host([compact]) .display {
+    --_max: 1;
+  }
+
+  .display {
+    --_value: max(0, round(var(--_attr-value, var(--_default-value)) * 2) / 2);
+    --_max: max(1, var(--_attr-max, var(--_default-max)));
+    --_mask-inline-size: calc(var(--_icon-size) + var(--spacingHorizontalXXS));
+    --_icon-gradient-stop-visual-adjustment: 0px;
+    --_icon-gradient-stop: calc(
+      var(--_mask-inline-size) * var(--_value) - var(--_icon-gradient-stop-visual-adjustment)
+    );
+
+    background-image: linear-gradient(
+      var(--_icon-gradient-degree),
+      var(--_icon-color-value) var(--_icon-gradient-stop),
+      var(--_icon-color-empty) calc(var(--_icon-gradient-stop) + 0.5px)
+    );
+    block-size: var(--_icon-size);
+    display: grid;
+    inline-size: calc(var(--_max) * var(--_mask-inline-size) - var(--spacingHorizontalXXS) / 2);
+    mask-image: var(--_mask-image-filled);
+    mask-repeat: repeat no-repeat;
+    mask-size: var(--_mask-inline-size) var(--_icon-size);
+    mask-position: var(--_mask-position-x) center;
+  }
+
+  .value-label,
+  ::slotted([slot='value']) {
+    display: block;
+    margin-inline-start: var(--spacingHorizontalXS);
+    font-weight: var(--fontWeightSemibold);
+  }
+
+  :host([size='small']) .value-label,
+  :host([size='small']) ::slotted([slot='value']) {
+    margin-inline-start: var(--spacingHorizontalXXS);
+  }
+
+  :host([size='large']) .value-label,
+  :host([size='large']) ::slotted([slot='value']) {
+    margin-inline-start: var(--spacingHorizontalSNudge);
+  }
+
+  :host(:not([count])) .count-label {
+    display: none;
+  }
+
+  .count-label::before,
+  ::slotted([slot='count'])::before {
+    content: '·';
+    margin-inline: var(--spacingHorizontalXS);
+  }
+
+  :host([size='small']) .count-label::before,
+  :host([size='small']) ::slotted([slot='count'])::before {
+    margin-inline: var(--spacingHorizontalXXS);
+  }
+
+  :host([size='large']) .count-label::before,
+  :host([size='large']) ::slotted([slot='count'])::before {
+    margin-inline: var(--spacingHorizontalSNudge);
+  }
+
+  @media (forced-colors: active) {
+    .display {
+      --_icon-color-value: CanvasText;
+      --_icon-color-empty: Canvas;
+      --_icon-gradient-stop-visual-adjustment: 0.5px;
+
+      forced-color-adjust: none;
+    }
+
+    .display::before {
+      background-color: var(--_icon-color-value);
+      content: '';
+      grid-area: 1 / 1 / -1 / -1;
+      mask: inherit;
+      mask-image: var(--_mask-image-outlined);
+    }
+  }

package/dist/esm/rating-display/rating-display.template.html

@@ -0,0 +1,6 @@
+<f-template name="fluent-rating-display" shadowrootmode="open">
+<template>{{styles}}<div f-ref="{display}" class="display" aria-hidden="true"></div>
+    <slot name="icon" f-ref="{iconSlot}" @slotchange="{handleSlotChange()}"></slot>
+    <slot name="value"><span class="value-label" aria-hidden="true">{{value}}</span></slot>
+    <slot name="count"><span class="count-label" aria-hidden="true">{{formattedCount}}</span></slot></template>
+</f-template>

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/slider/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/slider/slider.definition-async.d.ts

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.definition-async.js","sourceRoot":"","sources":["../../../src/slider/slider.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/slider/slider.styles.css

@@ -0,0 +1,189 @@
+
+  :host([hidden]){display:none}:host{display:inline-grid}
+
+  :host {
+    --thumb-size: 20px;
+    --track-margin-inline: calc(var(--thumb-size) / 2);
+    --track-size: 4px;
+    --track-overhang: calc(var(--track-size) / -2);
+    --rail-color: var(--colorCompoundBrandBackground);
+    --track-color: var(--colorNeutralStrokeAccessible);
+    --slider-direction: 90deg;
+    --border-radius: var(--borderRadiusMedium);
+    --step-marker-inset: var(--track-overhang) -1px;
+
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    outline: none;
+    user-select: none;
+    touch-action: none;
+    min-width: 120px;
+    min-height: 32px;
+    grid-template-rows: 1fr var(--thumb-size) 1fr;
+    grid-template-columns: var(--track-margin-inline) 1fr var(--track-margin-inline);
+  }
+
+  :host(:hover) {
+    --rail-color: var(--colorCompoundBrandBackgroundHover);
+  }
+
+  :host(:active) {
+    --rail-color: var(--colorCompoundBrandBackgroundPressed);
+  }
+
+  :host(:disabled) {
+    --rail-color: var(--colorNeutralForegroundDisabled);
+    --track-color: var(--colorNeutralBackgroundDisabled);
+  }
+
+  :host(:not(:disabled)) {
+    cursor: pointer;
+  }
+
+  :host(:dir(rtl)) {
+    --slider-direction: -90deg;
+  }
+
+  :host([size='small']) {
+    --thumb-size: 16px;
+    --track-overhang: -1px;
+    --track-size: 2px;
+    --border-radius: var(--borderRadiusSmall);
+  }
+
+  :host([orientation='vertical']) {
+    --slider-direction: 0deg;
+    --step-marker-inset: -1px var(--track-overhang);
+    min-height: 120px;
+    grid-template-rows: var(--track-margin-inline) 1fr var(--track-margin-inline);
+    grid-template-columns: 1fr var(--thumb-size) 1fr;
+    width: unset;
+    min-width: 32px;
+    justify-items: center;
+  }
+
+  :host(:not([slot='input']):focus-visible) {
+    box-shadow: 0 0 0 2pt var(--colorStrokeFocus2);
+    outline: 1px solid var(--colorStrokeFocus1);
+  }
+
+  :host:after,
+  .track {
+    height: var(--track-size);
+    width: 100%;
+  }
+
+  :host:after {
+    background-image: linear-gradient(
+      var(--slider-direction),
+      var(--rail-color) 0%,
+      var(--rail-color) 50%,
+      var(--track-color) 50.1%,
+      var(--track-color) 100%
+    );
+    border-radius: var(--border-radius);
+    content: '';
+    grid-row: 1 / -1;
+    grid-column: 1 / -1;
+  }
+
+  .track {
+    position: relative;
+    background-color: var(--track-color);
+    grid-row: 2 / 2;
+    grid-column: 2 / 2;
+    forced-color-adjust: none;
+    overflow: hidden;
+  }
+
+  :host([orientation='vertical'])::after,
+  :host([orientation='vertical']) .track {
+    height: 100%;
+    width: var(--track-size);
+  }
+
+  .track::before {
+    content: '';
+    position: absolute;
+    height: 100%;
+    border-radius: inherit;
+    inset-inline-start: 0;
+    width: var(--slider-progress);
+  }
+
+  :host(:dir(rtl)) .track::before {
+    width: calc(100% - var(--slider-progress));
+  }
+
+  :host([orientation='vertical']) .track::before {
+    width: 100%;
+    bottom: 0;
+    height: var(--slider-progress);
+  }
+
+  :host([step]) .track::after {
+    content: '';
+    position: absolute;
+    border-radius: inherit;
+    inset: var(--step-marker-inset);
+    background-image: repeating-linear-gradient(
+      var(--slider-direction),
+      #0000 0%,
+      #0000 calc(var(--step-rate) - 1px),
+      var(--colorNeutralBackground1) calc(var(--step-rate) - 1px),
+      var(--colorNeutralBackground1) var(--step-rate)
+    );
+  }
+
+  .thumb-container {
+    position: absolute;
+    grid-row: 2 / 2;
+    grid-column: 2 / 2;
+    transform: translateX(-50%);
+    left: var(--slider-thumb);
+  }
+
+  :host([orientation='vertical']) .thumb-container {
+    transform: translateY(50%);
+    left: unset;
+    bottom: var(--slider-thumb);
+  }
+
+  :host(:not(:active)) :is(.thumb-container, .track::before) {
+    transition: all 0.2s ease;
+  }
+
+  .thumb {
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    border-radius: var(--borderRadiusCircular);
+    box-shadow: 0 0 0 calc(var(--thumb-size) * 0.2) var(--colorNeutralBackground1) inset;
+    border: calc(var(--thumb-size) * 0.05) solid var(--colorNeutralStroke1);
+    box-sizing: border-box;
+  }
+
+  .thumb,
+  .track::before {
+    background-color: var(--rail-color);
+  }
+
+  @media (forced-colors: active) {
+    .track:hover,
+    .track:active,
+    .track {
+      background: WindowText;
+    }
+    .thumb:hover,
+    .thumb:active,
+    .thumb {
+      background: ButtonText;
+    }
+
+    :host(:hover) .track::before,
+    :host(:active) .track::before,
+    .track::before {
+      background: Highlight;
+    }
+  }

package/dist/esm/slider/slider.template.html

@@ -0,0 +1,17 @@
+<f-template name="fluent-slider" shadowrootmode="open">
+<template
+      @pointerdown="{handlePointerDown($e)}"
+      @keydown="{handleKeydown($e)}"
+    >{{styles}}
+      <div f-ref="{track}" part="track-container" class="track" style="{{position}}"></div>
+      <div
+        f-ref="{thumb}"
+        part="thumb-container"
+        class="thumb-container"
+        style="{{position}}"
+        @pointerdown="{handleThumbPointerDown($e)}"
+      >
+        <slot name="thumb"><div class="thumb"></div></slot>
+      </div>
+    </template>
+</f-template>

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/spinner/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/spinner/spinner.definition-async.d.ts

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.definition-async.js","sourceRoot":"","sources":["../../../src/spinner/spinner.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"}