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

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

@@ -1,12 +1,15 @@
-import type { BadgeOptions } from '../badge/badge.options.js';
-import type { ValuesOf } from '../utils/index.js';
+import type { StartEndOptions } from '../patterns/start-end.js';
+import type { ValuesOf } from '../utils/typings.js';
+import type { CounterBadge } from './counter-badge.js';
 /**
- * CounterBadge options
+ * Template options for CounterBadge component.
+ *
  * @public
  */
-export type CounterBadgeOptions = BadgeOptions;
+export type CounterBadgeOptions = StartEndOptions<CounterBadge>;
 /**
- * CounterBadgeAppearance constants
+ * Values for the `appearance` attribute on CounterBadge elements.
+ *
  * @public
  */
 export declare const CounterBadgeAppearance: {
@@ -14,12 +17,13 @@ export declare const CounterBadgeAppearance: {
     readonly ghost: "ghost";
 };
 /**
- * A CounterBadge can have an appearance of filled or ghost
+ * Type for the `appearance` attribute on CounterBadge elements, based on the CounterBadgeAppearance constants.
  * @public
  */
 export type CounterBadgeAppearance = ValuesOf<typeof CounterBadgeAppearance>;
 /**
- * CounterBadgeColor constants
+ * Values for the `color` attribute on CounterBadge elements.
+ *
  * @public
  */
 export declare const CounterBadgeColor: {
@@ -33,12 +37,13 @@ export declare const CounterBadgeColor: {
     readonly warning: "warning";
 };
 /**
- * A CounterBadge can be one of preset colors
+ * Type for the `color` attribute on CounterBadge elements, based on the CounterBadgeColor constants.
  * @public
  */
 export type CounterBadgeColor = ValuesOf<typeof CounterBadgeColor>;
 /**
- * A CounterBadge shape can be circular or rounded.
+ * Values for the `shape` attribute on CounterBadge elements.
+ *
  * @public
  */
 export declare const CounterBadgeShape: {
@@ -46,12 +51,14 @@ export declare const CounterBadgeShape: {
     readonly rounded: "rounded";
 };
 /**
- * A CounterBadge can be one of preset colors
+ * Type for the `shape` attribute on CounterBadge elements, based on the CounterBadgeShape constants.
+ *
  * @public
  */
 export type CounterBadgeShape = ValuesOf<typeof CounterBadgeShape>;
 /**
- * A CounterBadge can be square, circular or rounded.
+ * Values for the `size` attribute on CounterBadge elements.
+ *
  * @public
  */
 export declare const CounterBadgeSize: {
@@ -63,7 +70,14 @@ export declare const CounterBadgeSize: {
     readonly extraLarge: "extra-large";
 };
 /**
- * A CounterBadge can be on of several preset sizes.
+ * Type for the `size` attribute on CounterBadge elements, based on the CounterBadgeSize constants.
+ *
  * @public
  */
 export type CounterBadgeSize = ValuesOf<typeof CounterBadgeSize>;
+/**
+ * The tag name for the counter badge element.
+ *
+ * @public
+ */
+export declare const tagName: "fluent-counter-badge";

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

@@ -1,5 +1,7 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
 /**
- * CounterBadgeAppearance constants
+ * Values for the `appearance` attribute on CounterBadge elements.
+ *
  * @public
  */
 export const CounterBadgeAppearance = {
@@ -7,7 +9,8 @@ export const CounterBadgeAppearance = {
     ghost: 'ghost',
 };
 /**
- * CounterBadgeColor constants
+ * Values for the `color` attribute on CounterBadge elements.
+ *
  * @public
  */
 export const CounterBadgeColor = {
@@ -21,7 +24,8 @@ export const CounterBadgeColor = {
     warning: 'warning',
 };
 /**
- * A CounterBadge shape can be circular or rounded.
+ * Values for the `shape` attribute on CounterBadge elements.
+ *
  * @public
  */
 export const CounterBadgeShape = {
@@ -29,7 +33,8 @@ export const CounterBadgeShape = {
     rounded: 'rounded',
 };
 /**
- * A CounterBadge can be square, circular or rounded.
+ * Values for the `size` attribute on CounterBadge elements.
+ *
  * @public
  */
 export const CounterBadgeSize = {
@@ -40,4 +45,10 @@ export const CounterBadgeSize = {
     large: 'large',
     extraLarge: 'extra-large',
 };
+/**
+ * The tag name for the counter badge element.
+ *
+ * @public
+ */
+export const tagName = `${FluentDesignSystem.prefix}-counter-badge`;
 //# sourceMappingURL=counter-badge.options.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"counter-badge.options.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.options.ts"],"names":[],"mappings":"AASA;;;GAGG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,SAAS,EAAE,WAAW;IACtB,WAAW,EAAE,aAAa;IAC1B,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;CACV,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;CACV,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE,MAAM;IACZ,UAAU,EAAE,aAAa;IACzB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,UAAU,EAAE,aAAa;CACjB,CAAC"}
+{"version":3,"file":"counter-badge.options.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAYhE;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAQX;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,SAAS,EAAE,WAAW;IACtB,WAAW,EAAE,aAAa;IAC1B,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;CACV,CAAC;AAQX;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;CACV,CAAC;AASX;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE,MAAM;IACZ,UAAU,EAAE,aAAa;IACzB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,UAAU,EAAE,aAAa;CACjB,CAAC;AASX;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,kBAAkB,CAAC,MAAM,gBAAyB,CAAC"}

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.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/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/dialog.d.ts

@@ -9,53 +9,101 @@ import { DialogType } from './dialog.options.js';
  */
 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.js

@@ -1,4 +1,4 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
+import { tagName } from './dialog.options.js';
 import { Dialog } from './dialog.js';
 import { template } from './dialog.template.js';
 import { styles } from './dialog.styles.js';
@@ -10,7 +10,7 @@ import { styles } from './dialog.styles.js';
  * HTML Element: \<fluent-dialog\>
  */
 export const definition = Dialog.compose({
-    name: `${FluentDesignSystem.prefix}-dialog`,
+    name: tagName,
     template,
     styles,
 });

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":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,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,OAAO;IACb,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}

package/dist/esm/dialog/dialog.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { attr, FASTElement, observable, Updates } from '@microsoft/fast-element';
+import { attr, FASTElement, observable, Updates, volatile } from '@microsoft/fast-element';
 import { DialogType } from './dialog.options.js';
 /**
  * A Dialog Custom HTML Element.
@@ -12,25 +12,10 @@ export class Dialog extends FASTElement {
     constructor() {
         super(...arguments);
         /**
-         * @public
-         * The type of the dialog modal
-         */
-        this.type = DialogType.modal;
-        /**
-         * @public
-         * Method to emit an event before the dialog's open state changes
-         * HTML spec proposal: https://github.com/whatwg/html/issues/9733
-         */
-        this.emitBeforeToggle = () => {
-            this.$emit('beforetoggle', {
-                oldState: this.dialog.open ? 'open' : 'closed',
-                newState: this.dialog.open ? 'closed' : 'open',
-            });
-        };
-        /**
-         * @public
          * Method to emit an event after the dialog's open state changes
          * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+         *
+         * @public
          */
         this.emitToggle = () => {
             this.$emit('toggle', {
@@ -39,31 +24,83 @@ export class Dialog extends FASTElement {
             });
         };
     }
-    typeChanged(prev, next) {
-        if (!this.dialog) {
-            return;
+    /**
+     * 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() {
+        if (this.dialog) {
+            return this.ariaDescribedby;
         }
-        if (next === DialogType.alert) {
-            this.dialog.setAttribute('role', 'alertdialog');
+    }
+    /**
+     * 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() {
+        if (this.dialog) {
+            return this.ariaLabel;
         }
-        else {
-            this.dialog.removeAttribute('role');
+    }
+    /**
+     * 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() {
+        if (this.dialog) {
+            return this.ariaLabelledby;
         }
-        if (next !== DialogType.nonModal) {
-            this.dialog.setAttribute('aria-modal', 'true');
+    }
+    /**
+     * 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() {
+        if (this.dialog && this.type !== DialogType.nonModal) {
+            return true;
         }
-        else {
-            this.dialog.removeAttribute('aria-modal');
+    }
+    /**
+     * 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() {
+        if (this.dialog && this.type === DialogType.alert) {
+            return 'alertdialog';
         }
     }
-    /** @internal */
     connectedCallback() {
         super.connectedCallback();
-        this.typeChanged(undefined, this.type);
+        Updates.enqueue(() => {
+            this.type = this.type ?? DialogType.modal;
+        });
     }
     /**
+     * Method to emit an event before the dialog's open state changes
+     * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     *
      * @public
+     */
+    emitBeforeToggle() {
+        this.$emit('beforetoggle', {
+            oldState: this.dialog.open ? 'open' : 'closed',
+            newState: this.dialog.open ? 'closed' : 'open',
+        });
+    }
+    /**
      * Method to show the dialog
+     *
+     * @public
      */
     show() {
         Updates.enqueue(() => {
@@ -78,8 +115,9 @@ export class Dialog extends FASTElement {
         });
     }
     /**
-     * @public
      * Method to hide the dialog
+     *
+     * @public
      */
     hide() {
         this.emitBeforeToggle();
@@ -87,8 +125,9 @@ export class Dialog extends FASTElement {
         this.emitToggle();
     }
     /**
-     * @public
      * Handles click events on the dialog overlay for light-dismiss
+     *
+     * @public
      * @param event - The click event
      * @returns boolean
      */
@@ -108,7 +147,25 @@ __decorate([
 __decorate([
     attr({ attribute: 'aria-labelledby' })
 ], Dialog.prototype, "ariaLabelledby", void 0);
+__decorate([
+    attr({ attribute: 'aria-label' })
+], Dialog.prototype, "ariaLabel", void 0);
 __decorate([
     attr
 ], Dialog.prototype, "type", void 0);
+__decorate([
+    volatile
+], Dialog.prototype, "dialogDescribedby", null);
+__decorate([
+    volatile
+], Dialog.prototype, "dialogLabel", null);
+__decorate([
+    volatile
+], Dialog.prototype, "dialogLabelledby", null);
+__decorate([
+    volatile
+], Dialog.prototype, "dialogModal", null);
+__decorate([
+    volatile
+], Dialog.prototype, "dialogRole", null);
 //# sourceMappingURL=dialog.js.map