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

package/dist/esm/menu-button/menu-button.template.html

@@ -0,0 +1,16 @@
+<f-template name="fluent-menu-button" shadowrootmode="open">
+<template
+      @click="{clickHandler($e)}"
+      @keypress="{keypressHandler($e)}"
+    >{{styles}}
+       <slot name="start" f-ref="{start}"></slot> 
+      <span class="content" part="content">
+        <slot f-slotted="{defaultSlottedContent}"></slot>
+      </span>
+       <slot name="end" f-ref="{end}">
+    <svg slot="end" fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z" fill="currentColor"></path>
+    </svg>
+  </slot> 
+    </template>
+</f-template>

package/dist/esm/menu-item/define-async.d.ts

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

package/dist/esm/menu-item/define-async.js

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

package/dist/esm/menu-item/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/menu-item/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,qBAAqB,CAAC,QAAQ,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/menu-item/menu-item.definition-async.d.ts

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

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

package/dist/esm/menu-item/menu-item.definition-async.js.map

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

package/dist/esm/menu-item/menu-item.styles.css

@@ -0,0 +1,152 @@
+
+  :host([hidden]){display:none}:host{display:grid}
+
+  :host {
+    --indent: 0;
+    align-items: center;
+    background: var(--colorNeutralBackground1);
+    border-radius: var(--borderRadiusMedium);
+    color: var(--colorNeutralForeground2);
+    contain: layout;
+    cursor: pointer;
+    /* Prevent shrinking of MenuItems when max-height is applied to MenuList */
+    flex-shrink: 0;
+    font: var(--fontWeightRegular) var(--fontSizeBase300) / var(--lineHeightBase300) var(--fontFamilyBase);
+    grid-gap: 4px;
+    grid-template-columns: 20px 20px auto 20px;
+    height: 32px;
+    overflow: visible;
+    padding: 0 10px;
+  }
+
+  :host(:hover) {
+    background: var(--colorNeutralBackground1Hover);
+    color: var(--colorNeutralForeground2Hover);
+  }
+
+  :host(:active) {
+    background-color: var(--colorNeutralBackground1Selected);
+    color: var(--colorNeutralForeground2Pressed);
+  }
+
+  :host(:active) ::slotted([slot='start']) {
+    color: var(--colorCompoundBrandForeground1Pressed);
+  }
+
+  :host(:state(disabled)) {
+    background-color: var(--colorNeutralBackgroundDisabled);
+    color: var(--colorNeutralForegroundDisabled);
+  }
+
+  :host(:state(disabled)) ::slotted([slot='start']),
+  :host(:state(disabled)) ::slotted([slot='end']) {
+    color: var(--colorNeutralForegroundDisabled);
+  }
+
+  :host(:focus-visible) {
+    border-radius: var(--borderRadiusMedium);
+    outline: 2px solid var(--colorStrokeFocus2);
+  }
+
+  .content {
+    white-space: nowrap;
+    flex-grow: 1;
+    grid-column: auto / span 2;
+    padding: 0 2px;
+  }
+
+  :host(:not(:state(checked))) .indicator,
+  :host(:not(:state(checked))) ::slotted([slot='indicator']),
+  :host(:not(:state(submenu))) .submenu-glyph,
+  :host(:not(:state(submenu))) ::slotted([slot='submenu-glyph']) {
+    display: none;
+  }
+
+  ::slotted([slot='end']) {
+    color: var(--colorNeutralForeground3);
+    font: var(--fontWeightRegular) var(--fontSizeBase200) / var(--lineHeightBase200) var(--fontFamilyBase);
+    white-space: nowrap;
+  }
+
+  :host([data-indent='1']) {
+    --indent: 1;
+  }
+
+  :host([data-indent='2']) {
+    --indent: 2;
+    grid-template-columns: 20px 20px auto auto;
+  }
+
+  :host(:state(submenu)) {
+    grid-template-columns: 20px auto auto 20px;
+  }
+
+  :host([data-indent='2']:state(submenu)) {
+    grid-template-columns: 20px 20px auto auto 20px;
+  }
+
+  .indicator,
+  ::slotted([slot='indicator']) {
+    grid-column: 1 / span 1;
+    width: 20px;
+  }
+
+  ::slotted([slot='start']) {
+    display: inline-flex;
+    grid-column: calc(var(--indent)) / span 1;
+  }
+
+  .content {
+    grid-column: calc(var(--indent) + 1) / span 1;
+  }
+
+  ::slotted([slot='end']) {
+    grid-column: calc(var(--indent) + 2) / span 1;
+    justify-self: end;
+  }
+
+  .submenu-glyph,
+  ::slotted([slot='submenu-glyph']) {
+    grid-column: -2 / span 1;
+    justify-self: end;
+  }
+
+  @layer popover {
+    :host {
+      anchor-name: --menu-trigger;
+      position: relative;
+    }
+
+    ::slotted([popover]) {
+      margin: 0;
+      max-height: var(--menu-max-height, auto);
+      position: absolute;
+      position-anchor: --menu-trigger;
+      position-area: inline-end span-block-end;
+      position-try-fallbacks: flip-inline, block-start, block-end;
+      z-index: 1;
+    }
+
+    ::slotted([popover]:not(:popover-open)) {
+      display: none;
+    }
+
+    ::slotted([popover]:popover-open) {
+      inset: unset;
+    }
+
+    /* Fallback for no anchor-positioning */
+    @supports not (anchor-name: --menu-trigger) {
+      ::slotted([popover]) {
+        align-self: start;
+      }
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host(:state(disabled)),
+    :host(:state(disabled)) ::slotted([slot='start']),
+    :host(:state(disabled)) ::slotted([slot='end']) {
+      color: GrayText;
+    }
+  }

package/dist/esm/menu-item/menu-item.template.html

@@ -0,0 +1,19 @@
+<f-template name="fluent-menu-item" shadowrootmode="open">
+<template
+      tabindex="0"
+      @keydown="{handleMenuItemKeyDown($e)}"
+      @click="{handleMenuItemClick($e)}"
+      @mouseover="{handleMouseOver($e)}"
+      @mouseout="{handleMouseOut($e)}"
+      @toggle="{handleToggle($e)}"
+    >{{styles}}
+      <slot name="indicator"> <svg class="indicator" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.05 3.49c.28.3.27.77-.04 1.06l-7.93 7.47A.85.85 0 014.9 12L2.22 9.28a.75.75 0 111.06-1.06l2.24 2.27 7.47-7.04a.75.75 0 011.06.04z" fill="currentColor"></path></svg> </slot>
+       <slot name="start" f-ref="{start}"></slot> 
+      <div part="content" class="content">
+        <slot></slot>
+      </div>
+       <slot name="end" f-ref="{end}"></slot> 
+      <slot name="submenu-glyph"> <svg class="submenu-glyph" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5.74 3.2a.75.75 0 00-.04 1.06L9.23 8 5.7 11.74a.75.75 0 101.1 1.02l4-4.25a.75.75 0 000-1.02l-4-4.25a.75.75 0 00-1.06-.04z" fill="currentColor"></path></svg> </slot>
+      <slot name="submenu" f-slotted="{slottedSubmenu}"></slot>
+    </template>
+</f-template>

package/dist/esm/menu-list/define-async.d.ts

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

package/dist/esm/menu-list/define-async.js

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

package/dist/esm/menu-list/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/menu-list/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,qBAAqB,CAAC,QAAQ,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/menu-list/menu-list.base.js

@@ -77,6 +77,9 @@ export class BaseMenuList extends FASTElement {
      */
     connectedCallback() {
         super.connectedCallback();
+        if (!this.slot && this.isNestedMenu()) {
+            this.slot = 'submenu';
+        }
         Updates.enqueue(() => {
             // wait until children have had a chance to
             // connect before setting/checking their props/attributes

package/dist/esm/menu-list/menu-list.base.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-list.base.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.base.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"menu-list.base.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.base.ts"],"names":[],"mappings":"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"}

package/dist/esm/menu-list/menu-list.definition-async.d.ts

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

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

package/dist/esm/menu-list/menu-list.definition-async.js.map

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

package/dist/esm/menu-list/menu-list.styles.css

@@ -0,0 +1,16 @@
+
+  :host([hidden]){display:none}:host{display:flex}
+
+  :host {
+    flex-direction: column;
+    height: fit-content;
+    max-width: 300px;
+    min-width: 160px;
+    width: auto;
+    background-color: var(--colorNeutralBackground1);
+    border: 1px solid var(--colorTransparentStroke);
+    border-radius: var(--borderRadiusMedium);
+    box-shadow: var(--shadow16);
+    padding: 4px;
+    row-gap: 2px;
+  }

package/dist/esm/menu-list/menu-list.template.html

@@ -0,0 +1,5 @@
+<f-template name="fluent-menu-list" shadowrootmode="open">
+<template focusgroup="menu">{{styles}}
+      <slot f-slotted="{items}"></slot>
+    </template>
+</f-template>

package/dist/esm/menu-list/menu-list.template.js

@@ -1,7 +1,7 @@
 import { html, slotted } from '@microsoft/fast-element';
 export function menuTemplate() {
     return html `
-    <template focusgroup="menu" slot="${x => (x.slot ? x.slot : x.isNestedMenu() ? 'submenu' : void 0)}">
+    <template focusgroup="menu">
       <slot ${slotted('items')}></slot>
     </template>
   `;

package/dist/esm/menu-list/menu-list.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-list.template.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGlF,MAAM,UAAU,YAAY;IAC1B,OAAO,IAAI,CAAG;wCACwB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;cACxF,OAAO,CAAC,OAAO,CAAC;;GAE3B,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAkC,YAAY,EAAE,CAAC"}
+{"version":3,"file":"menu-list.template.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGlF,MAAM,UAAU,YAAY;IAC1B,OAAO,IAAI,CAAG;;cAEF,OAAO,CAAC,OAAO,CAAC;;GAE3B,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAkC,YAAY,EAAE,CAAC"}

package/dist/esm/message-bar/define-async.d.ts

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

package/dist/esm/message-bar/define-async.js

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

package/dist/esm/message-bar/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/message-bar/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,qBAAqB,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/message-bar/message-bar.definition-async.d.ts

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

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

package/dist/esm/message-bar/message-bar.definition-async.js.map

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

@@ -0,0 +1,98 @@
+
+  :host {
+    display: grid;
+    box-sizing: border-box;
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase200);
+    line-height: var(--lineHeightBase200);
+    width: 100%;
+    background: var(--colorNeutralBackground3);
+    border: 1px solid var(--colorNeutralStroke1);
+    padding-inline: var(--spacingHorizontalM);
+    border-radius: var(--borderRadiusMedium);
+    min-height: 36px;
+    align-items: center;
+    grid-template: 'icon body actions dismiss' / auto 1fr auto auto;
+    contain: layout style paint;
+  }
+
+  :host([shape='square']) {
+    border-radius: 0;
+  }
+
+  :host([intent='success']) {
+    background-color: var(--colorPaletteGreenBackground1);
+    border-color: var(--colorPaletteGreenBorder1);
+  }
+
+  :host([intent='warning']) {
+    background-color: var(--colorPaletteDarkOrangeBackground1);
+    border-color: var(--colorPaletteDarkOrangeBorder1);
+  }
+
+  :host([intent='error']) {
+    background-color: var(--colorPaletteRedBackground1);
+    border-color: var(--colorPaletteRedBorder1);
+  }
+
+  :host([layout='multiline']) {
+    grid-template-areas:
+      'icon body dismiss'
+      'actions actions actions';
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto 1fr;
+    padding-block: var(--spacingVerticalMNudge);
+    padding-inline: var(--spacingHorizontalM);
+  }
+
+  .content {
+    grid-area: body;
+    max-width: 520px;
+    padding-block: var(--spacingVerticalMNudge);
+    padding-inline: 0;
+  }
+
+  :host([layout='multiline']) .content {
+    padding: 0;
+  }
+
+  ::slotted([slot='icon']) {
+    display: flex;
+    grid-area: icon;
+    flex-direction: column;
+    align-items: center;
+    color: var(--colorNeutralForeground3);
+    margin-inline-end: var(--spacingHorizontalS);
+  }
+
+  :host([layout='multiline']) ::slotted([slot='icon']) {
+    align-items: start;
+    height: 100%;
+  }
+
+  ::slotted([slot='dismiss']) {
+    grid-area: dismiss;
+  }
+
+  .actions {
+    grid-area: actions;
+    display: flex;
+    justify-self: end;
+    margin-inline-end: var(--spacingHorizontalS);
+    gap: var(--spacingHorizontalS);
+  }
+
+  :host([layout='multiline']) .actions {
+    margin-block-start: var(--spacingVerticalMNudge);
+    margin-inline-end: 0;
+  }
+
+  :host([layout='multiline']) ::slotted([slot='dismiss']) {
+    align-items: start;
+    height: 100%;
+    padding-block-start: var(--spacingVerticalS);
+  }
+
+  ::slotted(*) {
+    font-size: inherit;
+  }

package/dist/esm/message-bar/message-bar.template.html

@@ -0,0 +1,8 @@
+<f-template name="fluent-message-bar" shadowrootmode="open"><template>{{styles}}<slot name="icon"></slot>
+    <div class="content">
+      <slot></slot>
+    </div>
+    <div class="actions">
+      <slot name="actions"></slot>
+    </div>
+    <slot name="dismiss"></slot></template></f-template>

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

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

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

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

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

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

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

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

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

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

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