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

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

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