@fluentui/web-components 3.0.0-rc.3 → 3.0.0-rc.30

package/dist/esm/counter-badge/counter-badge.styles.css

@@ -0,0 +1,177 @@
+:host([shape='rounded']) {
+  border-radius: var(--borderRadiusMedium);
+}
+
+:host([shape='rounded']:is([size='tiny'], [size='extra-small'], [size='small'])) {
+  border-radius: var(--borderRadiusSmall);
+}
+
+:host([size='tiny']) {
+  width: 6px;
+  height: 6px;
+  font-size: 4px;
+  line-height: 4px;
+  padding-inline: 0;
+  min-width: unset;
+}
+:host([size='tiny']) ::slotted(svg) {
+  font-size: 6px;
+}
+:host([size='extra-small']) {
+  width: 10px;
+  height: 10px;
+  font-size: 6px;
+  line-height: 6px;
+  padding-inline: 0;
+  min-width: unset;
+}
+:host([size='extra-small']) ::slotted(svg) {
+  font-size: 10px;
+}
+:host([size='small']) {
+  min-width: 16px;
+  height: 16px;
+  font-size: var(--fontSizeBase100);
+  line-height: var(--lineHeightBase100);
+  padding-inline: calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));
+}
+:host([size='small']) ::slotted(svg) {
+  font-size: 12px;
+}
+:host([size='large']) {
+  min-width: 24px;
+  height: 24px;
+  font-size: var(--fontSizeBase200);
+  line-height: var(--lineHeightBase200);
+  padding-inline: calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));
+}
+:host([size='large']) ::slotted(svg) {
+  font-size: 16px;
+}
+:host([size='extra-large']) {
+  min-width: 32px;
+  height: 32px;
+  font-size: var(--fontSizeBase200);
+  line-height: var(--lineHeightBase200);
+  padding-inline: calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));
+}
+:host([size='extra-large']) ::slotted(svg) {
+  font-size: 20px;
+}
+
+:host([color='danger']) {
+  background-color: var(--colorPaletteRedBackground3);
+  color: var(--colorNeutralForegroundOnBrand);
+}
+
+:host([color='important']) {
+  background-color: var(--colorNeutralForeground1);
+  color: var(--colorNeutralBackground1);
+}
+
+:host([color='informative']) {
+  background-color: var(--colorNeutralBackground5);
+  color: var(--colorNeutralForeground3);
+}
+
+:host([color='severe']) {
+  background-color: var(--colorPaletteDarkOrangeBackground3);
+  color: var(--colorNeutralForegroundOnBrand);
+}
+
+:host([color='subtle']) {
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
+}
+
+:host([color='success']) {
+  background-color: var(--colorPaletteGreenBackground3);
+  color: var(--colorNeutralForegroundOnBrand);
+}
+
+:host([color='warning']) {
+  background-color: var(--colorPaletteYellowBackground3);
+  color: var(--colorNeutralForeground1Static);
+}
+
+:host([appearance='ghost']) {
+  color: var(--colorBrandForeground1);
+  background-color: initial;
+}
+
+:host([appearance='ghost'][color='danger']) {
+  color: var(--colorPaletteRedForeground3);
+}
+
+:host([appearance='ghost'][color='important']) {
+  color: var(--colorNeutralForeground1);
+}
+
+:host([appearance='ghost'][color='informative']) {
+  color: var(--colorNeutralForeground3);
+}
+
+:host([appearance='ghost'][color='severe']) {
+  color: var(--colorPaletteDarkOrangeForeground3);
+}
+
+:host([appearance='ghost'][color='subtle']) {
+  color: var(--colorNeutralForegroundInverted);
+}
+
+:host([appearance='ghost'][color='success']) {
+  color: var(--colorPaletteGreenForeground3);
+}
+
+:host([appearance='ghost'][color='warning']) {
+  color: var(--colorPaletteYellowForeground2);
+}
+
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: inline-flex;
+}
+:host {
+  position: relative;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--fontFamilyBase);
+  font-weight: var(--fontWeightSemibold);
+  font-size: var(--fontSizeBase200);
+  line-height: var(--lineHeightBase200);
+  min-width: 20px;
+  height: 20px;
+  padding-inline: calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));
+  border-radius: var(--borderRadiusCircular);
+  border-color: var(--colorTransparentStroke);
+  background-color: var(--colorBrandBackground);
+  color: var(--colorNeutralForegroundOnBrand);
+  contain: content;
+}
+
+::slotted(svg) {
+  font-size: 12px;
+}
+
+:host(:not([appearance='ghost']))::after {
+  position: absolute;
+  content: '';
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  border-style: solid;
+  border-width: var(--strokeWidthThin);
+  border-color: inherit;
+  border-radius: inherit;
+}
+
+:host(:is([dot], [dot][appearance][size])) {
+  min-width: auto;
+  width: 6px;
+  height: 6px;
+  padding: 0;
+}

package/dist/esm/counter-badge/counter-badge.styles.js

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { badgeBaseStyles, badgeFilledStyles, badgeGhostStyles, badgeSizeStyles } from '../styles/index.js';
+import { badgeBaseStyles, badgeFilledStyles, badgeGhostStyles, badgeSizeStyles, } from '../styles/partials/badge.partials.js';
 import { borderRadiusMedium, borderRadiusSmall } from '../theme/design-tokens.js';
 /** Badge styles
  * @public

package/dist/esm/counter-badge/counter-badge.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"counter-badge.styles.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC3G,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAElF;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;qBAEJ,kBAAkB;;;;qBAIlB,iBAAiB;;;IAGlC,eAAe;IACf,iBAAiB;IACjB,gBAAgB;IAChB,eAAe;;;;;;;;CAQlB,CAAC"}
+{"version":3,"file":"counter-badge.styles.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,GAChB,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAElF;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;qBAEJ,kBAAkB;;;;qBAIlB,iBAAiB;;;IAGlC,eAAe;IACf,iBAAiB;IACjB,gBAAgB;IAChB,eAAe;;;;;;;;CAQlB,CAAC"}

package/dist/esm/counter-badge/counter-badge.template.d.ts

@@ -1,7 +1,15 @@
 import { type ElementViewTemplate } from '@microsoft/fast-element';
 import type { CounterBadge } from './counter-badge.js';
+import type { CounterBadgeOptions } from './counter-badge.options.js';
 /**
- * The template for the Counter Badge component.
+ * Generates a template for the CounterBadge component.
+ *
+ * @public
+ */
+export declare function counterBadgeTemplate<T extends CounterBadge>(options?: CounterBadgeOptions): ElementViewTemplate<T>;
+/**
+ * The template for the fluent-counter-badge component.
+ *
  * @public
  */
 export declare const template: ElementViewTemplate<CounterBadge>;

package/dist/esm/counter-badge/counter-badge.template.html

@@ -0,0 +1,8 @@
+<f-template name="fluent-counter-badge" shadowrootmode="open">
+  <template>
+    {{styles}}
+    <slot name="start" f-ref="{start}"></slot>
+    <span>{{displayValue}}</span>
+    <slot name="end" f-ref="{end}"></slot>
+  </template>
+</f-template>

package/dist/esm/counter-badge/counter-badge.template.js

@@ -1,13 +1,21 @@
 import { html } from '@microsoft/fast-element';
-import { badgeTemplate } from '../badge/badge.template.js';
-function composeTemplate(options = {}) {
-    return badgeTemplate({
-        defaultContent: html `${x => x.setCount()}`,
-    });
+import { endSlotTemplate, startSlotTemplate } from '../patterns/start-end.js';
+/**
+ * Generates a template for the CounterBadge component.
+ *
+ * @public
+ */
+export function counterBadgeTemplate(options = {}) {
+    return html `
+    ${startSlotTemplate(options)}
+    <span>${x => x.displayValue}</span>
+    ${endSlotTemplate(options)}
+  `;
 }
 /**
- * The template for the Counter Badge component.
+ * The template for the fluent-counter-badge component.
+ *
  * @public
  */
-export const template = composeTemplate();
+export const template = counterBadgeTemplate();
 //# sourceMappingURL=counter-badge.template.js.map

package/dist/esm/counter-badge/counter-badge.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"counter-badge.template.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAK3D,SAAS,eAAe,CAAiC,UAA+B,EAAE;IACxF,OAAO,aAAa,CAAI;QACtB,cAAc,EAAE,IAAI,CAAG,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE;KAC9C,CAAC,CAAC;AACL,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAsC,eAAe,EAAwB,CAAC"}
+{"version":3,"file":"counter-badge.template.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAI9E;;;;GAIG;AACH,MAAM,UAAU,oBAAoB,CAClC,UAA+B,EAAE;IAEjC,OAAO,IAAI,CAAG;MACV,iBAAiB,CAAC,OAAO,CAAC;YACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;MACzB,eAAe,CAAC,OAAO,CAAC;GAC3B,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAsC,oBAAoB,EAAE,CAAC"}

package/dist/esm/counter-badge/define-async.d.ts

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

package/dist/esm/counter-badge/define-async.js

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

package/dist/esm/counter-badge/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/counter-badge/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,qBAAqB,CAAC,YAAY,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/counter-badge/define.js

@@ -1,4 +1,4 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
 import { definition } from './counter-badge.definition.js';
-definition.define(FluentDesignSystem.registry);
+import { CounterBadge } from './counter-badge.js';
+CounterBadge.define(definition);
 //# sourceMappingURL=define.js.map

package/dist/esm/counter-badge/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/counter-badge/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/counter-badge/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,YAAY,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/counter-badge/index.d.ts

@@ -1,5 +1,6 @@
+export { BaseCounterBadge } from './counter-badge.base.js';
+export { definition as CounterBadgeDefinition } from './counter-badge.definition.js';
 export { CounterBadge } from './counter-badge.js';
-export { CounterBadgeAppearance, CounterBadgeColor, CounterBadgeShape, CounterBadgeSize, } from './counter-badge.options.js';
-export { template as CounterBadgeTemplate } from './counter-badge.template.js';
+export { CounterBadgeAppearance, CounterBadgeColor, CounterBadgeShape, CounterBadgeSize, tagName as CounterBadgeTagName, } from './counter-badge.options.js';
 export { styles as CounterBadgeStyles } from './counter-badge.styles.js';
-export { definition as CounterBadgeDefinition } from './counter-badge.definition.js';
+export { template as CounterBadgeTemplate } from './counter-badge.template.js';

package/dist/esm/counter-badge/index.js

@@ -1,6 +1,7 @@
+export { BaseCounterBadge } from './counter-badge.base.js';
+export { definition as CounterBadgeDefinition } from './counter-badge.definition.js';
 export { CounterBadge } from './counter-badge.js';
-export { CounterBadgeAppearance, CounterBadgeColor, CounterBadgeShape, CounterBadgeSize, } from './counter-badge.options.js';
-export { template as CounterBadgeTemplate } from './counter-badge.template.js';
+export { CounterBadgeAppearance, CounterBadgeColor, CounterBadgeShape, CounterBadgeSize, tagName as CounterBadgeTagName, } from './counter-badge.options.js';
 export { styles as CounterBadgeStyles } from './counter-badge.styles.js';
-export { definition as CounterBadgeDefinition } from './counter-badge.definition.js';
+export { template as CounterBadgeTemplate } from './counter-badge.template.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/counter-badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/counter-badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EACL,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,QAAQ,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAC/E,OAAO,EAAE,MAAM,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,UAAU,IAAI,sBAAsB,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/counter-badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,UAAU,IAAI,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACrF,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EACL,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,OAAO,IAAI,mBAAmB,GAC/B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,QAAQ,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/esm/define-all.d.ts

@@ -0,0 +1,42 @@
+import './accordion-item/define.js';
+import './accordion/define.js';
+import './anchor-button/define.js';
+import './avatar/define.js';
+import './badge/define.js';
+import './button/define.js';
+import './checkbox/define.js';
+import './compound-button/define.js';
+import './counter-badge/define.js';
+import './dialog/define.js';
+import './dialog-body/define.js';
+import './divider/define.js';
+import './drawer/define.js';
+import './drawer-body/define.js';
+import './dropdown/define.js';
+import './field/define.js';
+import './image/define.js';
+import './label/define.js';
+import './link/define.js';
+import './listbox/define.js';
+import './menu-button/define.js';
+import './menu-item/define.js';
+import './menu-list/define.js';
+import './menu/define.js';
+import './message-bar/define.js';
+import './option/define.js';
+import './progress-bar/define.js';
+import './radio-group/define.js';
+import './radio/define.js';
+import './rating-display/define.js';
+import './slider/define.js';
+import './spinner/define.js';
+import './switch/define.js';
+import './tab/define.js';
+import './tablist/define.js';
+import './textarea/define.js';
+import './text-input/define.js';
+import './text/define.js';
+import './toggle-button/define.js';
+import './tooltip/define.js';
+import './tree/define.js';
+import './tree-item/define.js';

package/dist/esm/define-all.js

@@ -0,0 +1,43 @@
+import './accordion-item/define.js';
+import './accordion/define.js';
+import './anchor-button/define.js';
+import './avatar/define.js';
+import './badge/define.js';
+import './button/define.js';
+import './checkbox/define.js';
+import './compound-button/define.js';
+import './counter-badge/define.js';
+import './dialog/define.js';
+import './dialog-body/define.js';
+import './divider/define.js';
+import './drawer/define.js';
+import './drawer-body/define.js';
+import './dropdown/define.js';
+import './field/define.js';
+import './image/define.js';
+import './label/define.js';
+import './link/define.js';
+import './listbox/define.js';
+import './menu-button/define.js';
+import './menu-item/define.js';
+import './menu-list/define.js';
+import './menu/define.js';
+import './message-bar/define.js';
+import './option/define.js';
+import './progress-bar/define.js';
+import './radio-group/define.js';
+import './radio/define.js';
+import './rating-display/define.js';
+import './slider/define.js';
+import './spinner/define.js';
+import './switch/define.js';
+import './tab/define.js';
+import './tablist/define.js';
+import './textarea/define.js';
+import './text-input/define.js';
+import './text/define.js';
+import './toggle-button/define.js';
+import './tooltip/define.js';
+import './tree/define.js';
+import './tree-item/define.js';
+//# sourceMappingURL=define-all.js.map

package/dist/esm/define-all.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-all.js","sourceRoot":"","sources":["../../src/define-all.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAC;AACpC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,2BAA2B,CAAC;AACnC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,2BAA2B,CAAC;AACnC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,yBAAyB,CAAC;AACjC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,yBAAyB,CAAC;AACjC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,yBAAyB,CAAC;AACjC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,0BAA0B,CAAC;AAClC,OAAO,yBAAyB,CAAC;AACjC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,iBAAiB,CAAC;AACzB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,wBAAwB,CAAC;AAChC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,uBAAuB,CAAC"}

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
 import { definition } from './dialog.definition.js';
-definition.define(FluentDesignSystem.registry);
+import { Dialog } from './dialog.js';
+Dialog.define(definition);
 //# sourceMappingURL=define.js.map

package/dist/esm/dialog/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/dialog/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/dialog/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/dialog/dialog.bench.d.ts

@@ -1,3 +1,4 @@
+import './define.js';
 declare const itemRenderer: () => HTMLElement;
 export default itemRenderer;
 export { tests } from '../utils/benchmark-wrapper.js';

package/dist/esm/dialog/dialog.bench.js

@@ -1,6 +1,4 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
-import { definition } from './dialog.definition.js';
-definition.define(FluentDesignSystem.registry);
+import './define.js';
 const itemRenderer = () => {
     const dialog = document.createElement('fluent-dialog');
     dialog.appendChild(document.createTextNode('Dialog'));

package/dist/esm/dialog/dialog.bench.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.bench.js","sourceRoot":"","sources":["../../../src/dialog/dialog.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEtD,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"dialog.bench.js","sourceRoot":"","sources":["../../../src/dialog/dialog.bench.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEtD,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/dialog/dialog.d.ts

@@ -5,57 +5,109 @@ import { DialogType } from './dialog.options.js';
  *
  * @tag fluent-dialog
  *
+ * @fires { ToggleEvent } toggle - Event emitted after the dialog's open state changes.
+ * @fires { ToggleEvent } beforetoggle - Event emitted before the dialog's open state changes.
+ * @slot - The default slot. {@link (DialogBody:class)} element recommended.
+ *
  * @public
  */
 export declare class Dialog extends FASTElement {
     /**
-     * @public
      * The dialog element
+     *
+     * @public
      */
     dialog: HTMLDialogElement;
     /**
-     * @public
      * The ID of the element that describes the dialog
+     *
+     * @public
      */
     ariaDescribedby?: string;
     /**
-     * @public
      * The ID of the element that labels the dialog
+     *
+     * @public
      */
     ariaLabelledby?: string;
     /**
+     * The label of the dialog
+     *
      * @public
+     */
+    ariaLabel: string | null;
+    /**
      * The type of the dialog modal
+     *
+     * @public
      */
     type: DialogType;
-    protected typeChanged(prev: DialogType | undefined, next: DialogType | undefined): void;
-    /** @internal */
+    /**
+     * The `aria-describedby` attribute value for the dialog, which is determined by the `ariaDescribedby` property. This
+     * is used to ensure that the dialog's accessible description is properly announced by assistive technologies.
+     *
+     * @internal
+     */
+    get dialogDescribedby(): string | undefined;
+    /**
+     * The `aria-label` attribute value for the dialog, which is determined by the `ariaLabel` property. This is used to
+     * ensure that the dialog's accessible name is properly announced by assistive technologies.
+     *
+     * @internal
+     */
+    get dialogLabel(): string | null | undefined;
+    /**
+     * The `aria-labelledby` attribute value for the dialog, which is determined by the `ariaLabelledby` property. This is
+     * used to ensure that the dialog's accessible name is properly announced by assistive technologies.
+     *
+     * @internal
+     */
+    get dialogLabelledby(): string | undefined;
+    /**
+     * The modal state of the dialog, which is determined by the `type` property. If the dialog is not a non-modal dialog,
+     * the modal state will be true, otherwise it will be undefined.
+     *
+     * @internal
+     */
+    get dialogModal(): boolean | undefined;
+    /**
+     * The role of the dialog, which is determined by the `type` property. If the dialog is an alert dialog, the role will
+     * be 'alertdialog', otherwise it will be undefined.
+     *
+     * @internal
+     */
+    get dialogRole(): string | undefined;
     connectedCallback(): void;
     /**
-     * @public
      * Method to emit an event before the dialog's open state changes
      * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     *
+     * @public
      */
-    emitBeforeToggle: () => void;
+    emitBeforeToggle(): void;
     /**
-     * @public
      * Method to emit an event after the dialog's open state changes
      * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     *
+     * @public
      */
     emitToggle: () => void;
     /**
-     * @public
      * Method to show the dialog
+     *
+     * @public
      */
     show(): void;
     /**
-     * @public
      * Method to hide the dialog
+     *
+     * @public
      */
     hide(): void;
     /**
-     * @public
      * Handles click events on the dialog overlay for light-dismiss
+     *
+     * @public
      * @param event - The click event
      * @returns boolean
      */

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

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

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

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

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

@@ -1,9 +1,7 @@
-import { Dialog } from './dialog.js';
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
 /**
- * The Fluent Dialog Element
+ * The definition for the `<fluent-dialog>` element.
  *
  * @public
- * @remarks
- * HTML Element: \<fluent-dialog\>
  */
-export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Dialog>;
+export declare const definition: PartialFASTElementDefinition;

package/dist/esm/dialog/dialog.definition.js

@@ -1,17 +1,16 @@
 import { FluentDesignSystem } from '../fluent-design-system.js';
-import { Dialog } from './dialog.js';
-import { template } from './dialog.template.js';
+import { tagName } from './dialog.options.js';
 import { styles } from './dialog.styles.js';
+import { template } from './dialog.template.js';
 /**
- * The Fluent Dialog Element
+ * The definition for the `<fluent-dialog>` element.
  *
  * @public
- * @remarks
- * HTML Element: \<fluent-dialog\>
  */
-export const definition = Dialog.compose({
-    name: `${FluentDesignSystem.prefix}-dialog`,
-    template,
+export const definition = {
+    name: tagName,
+    registry: FluentDesignSystem.registry,
     styles,
-});
+    template,
+};
 //# sourceMappingURL=dialog.definition.js.map

package/dist/esm/dialog/dialog.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.definition.js","sourceRoot":"","sources":["../../../src/dialog/dialog.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC;IACvC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,SAAS;IAC3C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
+{"version":3,"file":"dialog.definition.js","sourceRoot":"","sources":["../../../src/dialog/dialog.definition.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,kBAAkB,CAAC,QAAQ;IACrC,MAAM;IACN,QAAQ;CACT,CAAC"}