@fabric-msft/fabric-web 4.0.0-beta.1 → 5.0.0

package/dist/esm/components/accordion-menu-panel/accordion-menu-panel.template.js

@@ -1,6 +1,5 @@
-import { html, slotted, ref } from "@microsoft/fast-element";
-import { startSlotTemplate } from "@fluentui/web-components";
-import { staticallyCompose } from "../../util/template-helpers";
+import { html, ref, slotted } from '@microsoft/fast-element';
+
 const chevronRight16Filled = html.partial(`<svg class="default-marker-collapsed" 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>`);
 const chevronDown20Filled = html.partial(`<svg
   width="20"
@@ -16,52 +15,13 @@ const chevronDown20Filled = html.partial(`<svg
     fill="currentColor"
   />
 </svg>`);
-export function accordionMenuPanelTemplate(options = {}) {
-    return html `
-    <template @keydown="${(x, c) => x.handleKeyDown(c.event)}">
-      <div
-        ${ref("headingElement")}
-        class="heading"
-        part="heading"
-        role="button"
-        tabindex="0"
-        aria-expanded="${(x) => x.expanded}"
-        aria-controls="${(x) => x.id}-panel"
-        aria-disabled="${(x) => x.disabled}"
-        id="${(x) => x.id}"
-        @click="${(x, c) => x.handleClick(c.event)}"
-        @keydown="${(x, c) => x.handleKeyDown(c.event)}"
-      >
-        ${startSlotTemplate(options)}
-        <div class="heading-content" part="heading-content">
-          <slot name="heading"></slot>
-        </div>
-        <div class="markers" part="markers">
-          <slot name="marker-expanded">
-            ${staticallyCompose(options.expandedIcon)}
-          </slot>
-          <slot name="marker-collapsed">
-            ${staticallyCompose(options.collapsedIcon)}
-          </slot>
-        </div>
-      </div>
-      <div
-        class="content"
-        part="content"
-        id="${(x) => x.id}-panel"
-        ?hidden="${(x) => !x.expanded}"
-      >
-        <slot ${slotted("menuList")}></slot>
-      </div>
-    </template>
-  `;
+function accordionMenuPanelTemplate() {
+  return html`<template @keydown="${(x, c) => x.handleKeyDown(c.event)}"><div ${ref("headingElement")} class="heading" part="heading" role="button" tabindex="0" aria-expanded="${x => x.expanded}" aria-controls="${x => x.id}-panel" aria-disabled="${x => x.disabled}" id="${x => x.id}" @click="${(x, c) => x.handleClick(c.event)}" @keydown="${(x, c) => x.handleKeyDown(c.event)}"><slot name="start"></slot><div class="heading-content" part="heading-content"><slot name="heading"></slot></div><div class="markers" part="markers"><slot name="marker-expanded">${chevronDown20Filled}</slot><slot name="marker-collapsed">${chevronRight16Filled}</slot></div></div><div class="content" part="content" id="${x => x.id}-panel" ?hidden="${x => !x.expanded}"><slot ${slotted("menuList")}></slot></div></template>`;
 }
 /**
  * The template for the accordion menu panel component.
  * @public
  */
-export const template = accordionMenuPanelTemplate({
-    collapsedIcon: chevronRight16Filled,
-    expandedIcon: chevronDown20Filled
-});
-//# sourceMappingURL=accordion-menu-panel.template.js.map
+const template = accordionMenuPanelTemplate();
+
+export { accordionMenuPanelTemplate, template };

package/dist/esm/components/accordion-menu-panel/accordion-menu-panel.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-menu-panel.template.js","sourceRoot":"","sources":["../../../../../../../src/components/accordion-menu-panel/accordion-menu-panel.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,IAAI,EACJ,OAAO,EACP,GAAG,EACJ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAIhE,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CACvC,mUAAmU,CACpU,CAAC;AAEF,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC;;;;;;;;;;;;;OAalC,CAAC,CAAC;AAET,MAAM,UAAU,0BAA0B,CACxC,UAAqC,EAAE;IAEvC,OAAO,IAAI,CAAG;0BACU,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAsB,CAAC;;UAEnE,GAAG,CAAC,gBAAgB,CAAC;;;;;yBAKN,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;yBACjB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE;yBACX,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;cAC5B,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE;kBACP,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAmB,CAAC;oBAC5C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAsB,CAAC;;UAE7D,iBAAiB,CAAC,OAAO,CAAC;;;;;;cAMtB,iBAAiB,CAAC,OAAO,CAAC,YAAY,CAAC;;;cAGvC,iBAAiB,CAAC,OAAO,CAAC,aAAa,CAAC;;;;;;;cAOxC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE;mBACN,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ;;gBAErB,OAAO,CAAC,UAAU,CAAC;;;GAGhC,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GACnB,0BAA0B,CAAC;IACzB,aAAa,EAAE,oBAAoB;IACnC,YAAY,EAAE,mBAAmB;CAClC,CAAC,CAAC"}
+{"version":3,"file":"accordion-menu-panel.template.js","sourceRoot":"","sources":["../../../../../../../src/components/accordion-menu-panel/accordion-menu-panel.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAI7D,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CACvC,mUAAmU,CACpU,CAAC;AAEF,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC;;;;;;;;;;;;;OAalC,CAAC,CAAC;AAET,MAAM,UAAU,0BAA0B;IAGxC,OAAO,IAAI,CAAG;0BACU,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAsB,CAAC;;UAEnE,GAAG,CAAC,gBAAgB,CAAC;;;;;yBAKN,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;yBACjB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE;yBACX,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;cAC5B,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE;kBACP,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAmB,CAAC;oBAC5C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAsB,CAAC;;;;;;;yCAO9B,mBAAmB;0CAClB,oBAAoB;;;;;;cAMhD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE;mBACN,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ;;gBAErB,OAAO,CAAC,UAAU,CAAC;;;GAGhC,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GACnB,0BAA0B,EAAE,CAAC"}

package/dist/esm/components/accordion-menu-panel/define.js

@@ -1,4 +1,4 @@
-import { DesignSystem } from "../design-system";
-import { definition as AccordionMenuPanelDefinition } from "./accordion-menu-panel.definition";
+import { DesignSystem } from "../design-system.js";
+import { definition as AccordionMenuPanelDefinition } from "./accordion-menu-panel.definition.js";
 AccordionMenuPanelDefinition.define(DesignSystem.registry);
 //# sourceMappingURL=define.js.map

package/dist/esm/components/accordion-menu-panel/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../../../../src/components/accordion-menu-panel/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,UAAU,IAAI,4BAA4B,EAAE,MAAM,mCAAmC,CAAC;AAC/F,4BAA4B,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../../../../src/components/accordion-menu-panel/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,UAAU,IAAI,4BAA4B,EAAE,MAAM,sCAAsC,CAAC;AAClG,4BAA4B,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/components/accordion-menu-panel/index.js

@@ -1,6 +1,6 @@
-export { AccordionMenuPanel } from "./accordion-menu-panel";
-export { AccordionMenuPanelSize, AccordionMenuPanelMarkerPosition } from "./accordion-menu-panel.options";
-export { template as AccordionMenuPanelTemplate } from "./accordion-menu-panel.template";
-export { styles as AccordionMenuPanelStyles } from "./accordion-menu-panel.styles";
-export { definition as AccordionMenuPanelDefinition } from "./accordion-menu-panel.definition";
+export { AccordionMenuPanel } from "./accordion-menu-panel.js";
+export { AccordionMenuPanelSizes, AccordionMenuPanelMarkerPositions } from "./accordion-menu-panel.options.js";
+export { template as AccordionMenuPanelTemplate } from "./accordion-menu-panel.template.js";
+export { styles as AccordionMenuPanelStyles } from "./accordion-menu-panel.styles.js";
+export { definition as AccordionMenuPanelDefinition } from "./accordion-menu-panel.definition.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/components/accordion-menu-panel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/accordion-menu-panel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EACL,sBAAsB,EACtB,gCAAgC,EAEjC,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,QAAQ,IAAI,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AACzF,OAAO,EAAE,MAAM,IAAI,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACnF,OAAO,EAAE,UAAU,IAAI,4BAA4B,EAAE,MAAM,mCAAmC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/accordion-menu-panel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EACL,uBAAuB,EACvB,iCAAiC,EAClC,MAAM,mCAAmC,CAAC;AAK3C,OAAO,EAAE,QAAQ,IAAI,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AAC5F,OAAO,EAAE,MAAM,IAAI,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AACtF,OAAO,EAAE,UAAU,IAAI,4BAA4B,EAAE,MAAM,sCAAsC,CAAC"}

package/dist/esm/components/anchor-button/anchor-button.definition.js

@@ -1,17 +1,19 @@
-import { AnchorButtonTemplate, ToggleButtonStyles } from "@fluentui/web-components";
-import { DesignSystem } from "../design-system";
-import { AnchorButton } from "./anchor-button";
+import { ToggleButtonStyles, AnchorButtonTemplate } from '@fluentui/web-components';
+import { DesignSystem } from '../design-system.js';
+import { AnchorButton } from './anchor-button.js';
+
 /**
  * The Fabric Anchor Button component.
  *
  * @public
  */
-export const definition = AnchorButton.compose({
-    name: `${DesignSystem.prefix}-anchor-button`,
-    template: AnchorButtonTemplate,
-    styles: ToggleButtonStyles,
-    shadowOptions: {
-        delegatesFocus: true
-    }
+const definition = AnchorButton.compose({
+  name: `${DesignSystem.prefix}-anchor-button`,
+  template: AnchorButtonTemplate,
+  styles: ToggleButtonStyles,
+  shadowOptions: {
+    mode: DesignSystem.shadowRootMode
+  }
 });
-//# sourceMappingURL=anchor-button.definition.js.map
+
+export { definition };

package/dist/esm/components/anchor-button/anchor-button.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"anchor-button.definition.js","sourceRoot":"","sources":["../../../../../../../src/components/anchor-button/anchor-button.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC;IAC7C,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,gBAAgB;IAC5C,QAAQ,EAAE,oBAAoB;IAC9B,MAAM,EAAE,kBAAkB;IAC1B,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC"}
+{"version":3,"file":"anchor-button.definition.js","sourceRoot":"","sources":["../../../../../../../src/components/anchor-button/anchor-button.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC;IAC7C,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,gBAAgB;IAC5C,QAAQ,EAAE,oBAAoB;IAC9B,MAAM,EAAE,kBAAkB;IAC1B,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

package/dist/esm/components/anchor-button/anchor-button.js

@@ -1,4 +1,5 @@
-import { AnchorButton as FluentAnchorButton } from "@fluentui/web-components";
+import { AnchorButton as AnchorButton$1 } from '@fluentui/web-components';
+
 /**
  * AnchorButton
  * @summary An Anchor Custom HTML Element that functions as a button with customizable appearance, shape, and size, and can be used as a link.
@@ -33,6 +34,6 @@ import { AnchorButton as FluentAnchorButton } from "@fluentui/web-components";
  * @tagname fabric-anchor-button
  * @public
  */
-export class AnchorButton extends FluentAnchorButton {
-}
-//# sourceMappingURL=anchor-button.js.map
+class AnchorButton extends AnchorButton$1 {}
+
+export { AnchorButton };

package/dist/esm/components/anchor-button/anchor-button.options.js

@@ -0,0 +1,20 @@
+import { AnchorButtonAppearance, AnchorButtonShape, AnchorButtonSize, AnchorTarget } from '@fluentui/web-components';
+
+/** Appearance values for {@link AnchorButton}. */
+const AnchorButtonAppearances = {
+  ...AnchorButtonAppearance
+};
+/** Shape values for {@link AnchorButton}. */
+const AnchorButtonShapes = {
+  ...AnchorButtonShape
+};
+/** Size values for {@link AnchorButton}. */
+const AnchorButtonSizes = {
+  ...AnchorButtonSize
+};
+/** Target values for {@link AnchorButton}. */
+({
+  ...AnchorTarget
+});
+
+export { AnchorButtonAppearances, AnchorButtonShapes, AnchorButtonSizes };

package/dist/esm/components/anchor-button/anchor-button.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"anchor-button.options.js","sourceRoot":"","sources":["../../../../../../../src/components/anchor-button/anchor-button.options.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,IAAI,4BAA4B,EACtD,iBAAiB,IAAI,uBAAuB,EAC5C,gBAAgB,IAAI,sBAAsB,EAC1C,YAAY,IAAI,kBAAkB,EACnC,MAAM,0BAA0B,CAAC;AAGlC,kDAAkD;AAClD,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,GAAG,4BAA4B;CACvB,CAAC;AAEX,MAAM,CAAC,MAAM,sBAAsB,GAAG,uBAAuB,CAAC;AAE9D,6CAA6C;AAC7C,MAAM,CAAC,MAAM,kBAAkB,GAAG,EAAE,GAAG,uBAAuB,EAAW,CAAC;AAE1E,MAAM,CAAC,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;AAEpD,4CAA4C;AAC5C,MAAM,CAAC,MAAM,iBAAiB,GAAG,EAAE,GAAG,sBAAsB,EAAW,CAAC;AAExE,MAAM,CAAC,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;AAElD,8CAA8C;AAC9C,MAAM,CAAC,MAAM,aAAa,GAAG,EAAE,GAAG,kBAAkB,EAAW,CAAC;AAEhE,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAC"}

package/dist/esm/components/anchor-button/define.js

@@ -1,4 +1,4 @@
-import { DesignSystem } from "../design-system";
-import { definition } from "./anchor-button.definition";
+import { DesignSystem } from "../design-system.js";
+import { definition } from "./anchor-button.definition.js";
 definition.define(DesignSystem.registry);
 //# sourceMappingURL=define.js.map

package/dist/esm/components/anchor-button/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../../../../src/components/anchor-button/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../../../../src/components/anchor-button/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/components/anchor-button/index.js

@@ -1,4 +1,5 @@
-export { AnchorButton } from "./anchor-button";
-export { AnchorButtonAppearance, AnchorButtonShape, AnchorButtonSize, AnchorTarget, AnchorButtonTemplate } from "@fluentui/web-components";
-export { definition as AnchorButtonDefinition } from "./anchor-button.definition";
+export { AnchorButton } from "./anchor-button.js";
+export { AnchorButtonAppearances, AnchorButtonShapes, AnchorButtonSizes, AnchorTargets } from "./anchor-button.options.js";
+export { AnchorButtonTemplate } from "@fluentui/web-components";
+export { definition as AnchorButtonDefinition } from "./anchor-button.definition.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/components/anchor-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/anchor-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EACL,sBAAsB,EACtB,iBAAiB,EACjB,gBAAgB,EAChB,YAAY,EACZ,oBAAoB,EACrB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,UAAU,IAAI,sBAAsB,EAAE,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/anchor-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EACL,uBAAuB,EACvB,kBAAkB,EAClB,iBAAiB,EACjB,aAAa,EACd,MAAM,4BAA4B,CAAC;AAOpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,UAAU,IAAI,sBAAsB,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/components/avatar/avatar.definition.js

@@ -1,17 +1,19 @@
-import { AvatarStyles, AvatarTemplate } from "@fluentui/web-components";
-import { DesignSystem } from "../design-system";
-import { Avatar } from "./avatar";
+import { AvatarStyles, AvatarTemplate } from '@fluentui/web-components';
+import { DesignSystem } from '../design-system.js';
+import { Avatar } from './avatar.js';
+
 /**
  * The Fabric Avatar component.
  *
  * @public
  */
-export const definition = Avatar.compose({
-    name: `${DesignSystem.prefix}-avatar`,
-    template: AvatarTemplate,
-    styles: AvatarStyles,
-    shadowOptions: {
-        delegatesFocus: true
-    }
+const definition = Avatar.compose({
+  name: `${DesignSystem.prefix}-avatar`,
+  template: AvatarTemplate,
+  styles: AvatarStyles,
+  shadowOptions: {
+    mode: DesignSystem.shadowRootMode
+  }
 });
-//# sourceMappingURL=avatar.definition.js.map
+
+export { definition };

package/dist/esm/components/avatar/avatar.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.definition.js","sourceRoot":"","sources":["../../../../../../../src/components/avatar/avatar.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC;IACvC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,SAAS;IACrC,QAAQ,EAAE,cAAc;IACxB,MAAM,EAAE,YAAY;IACpB,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC"}
+{"version":3,"file":"avatar.definition.js","sourceRoot":"","sources":["../../../../../../../src/components/avatar/avatar.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC;IACvC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,SAAS;IACrC,QAAQ,EAAE,cAAc;IACxB,MAAM,EAAE,YAAY;IACpB,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

package/dist/esm/components/avatar/avatar.js

@@ -1,4 +1,5 @@
-import { Avatar as FluentAvatar } from "@fluentui/web-components";
+import { Avatar as Avatar$1 } from '@fluentui/web-components';
+
 /**
  * Avatar
  * @summary An Avatar Custom HTML Element based on FluentAvatar, including style and layout specific attributes.
@@ -10,7 +11,7 @@ import { Avatar as FluentAvatar } from "@fluentui/web-components";
  *   appearance="ring"
  *   size="48"
  *   color="colorful"
- *   color-id="blue"
+ *   color-id="team-1"
  * >
  *   JD
  *   <span slot="badge">5</span>
@@ -40,6 +41,6 @@ import { Avatar as FluentAvatar } from "@fluentui/web-components";
  * @tagname fabric-avatar
  * @public
  */
-export class Avatar extends FluentAvatar {
-}
-//# sourceMappingURL=avatar.js.map
+class Avatar extends Avatar$1 {}
+
+export { Avatar };

package/dist/esm/components/avatar/avatar.options.js

@@ -0,0 +1,28 @@
+import { AvatarActive, AvatarAppearance, AvatarColor, AvatarNamedColor, AvatarShape, AvatarSize } from '@fluentui/web-components';
+
+/** Active state values for {@link Avatar}. */
+const AvatarActives = {
+  ...AvatarActive
+};
+/** Appearance values for {@link Avatar}. */
+const AvatarAppearances = {
+  ...AvatarAppearance
+};
+/** Color scheme values for {@link Avatar}. */
+const AvatarColors = {
+  ...AvatarColor
+};
+/** Named color values for {@link Avatar}. */
+const AvatarNamedColors = {
+  ...AvatarNamedColor
+};
+/** Shape values for {@link Avatar}. */
+const AvatarShapes = {
+  ...AvatarShape
+};
+/** Size values for {@link Avatar}. */
+const AvatarSizes = {
+  ...AvatarSize
+};
+
+export { AvatarActives, AvatarAppearances, AvatarColors, AvatarNamedColors, AvatarShapes, AvatarSizes };

package/dist/esm/components/avatar/avatar.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.options.js","sourceRoot":"","sources":["../../../../../../../src/components/avatar/avatar.options.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,IAAI,kBAAkB,EAClC,gBAAgB,IAAI,sBAAsB,EAC1C,WAAW,IAAI,iBAAiB,EAChC,gBAAgB,IAAI,sBAAsB,EAC1C,WAAW,IAAI,iBAAiB,EAChC,UAAU,IAAI,gBAAgB,EAC/B,MAAM,0BAA0B,CAAC;AAGlC,8CAA8C;AAC9C,MAAM,CAAC,MAAM,aAAa,GAAG,EAAE,GAAG,kBAAkB,EAAW,CAAC;AAEhE,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAC;AAE1C,4CAA4C;AAC5C,MAAM,CAAC,MAAM,iBAAiB,GAAG,EAAE,GAAG,sBAAsB,EAAW,CAAC;AAExE,MAAM,CAAC,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;AAElD,8CAA8C;AAC9C,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,GAAG,iBAAiB,EAAW,CAAC;AAE9D,MAAM,CAAC,MAAM,WAAW,GAAG,YAAY,CAAC;AAExC,6CAA6C;AAC7C,MAAM,CAAC,MAAM,iBAAiB,GAAG,EAAE,GAAG,sBAAsB,EAAW,CAAC;AAExE,MAAM,CAAC,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;AAElD,uCAAuC;AACvC,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,GAAG,iBAAiB,EAAW,CAAC;AAE9D,MAAM,CAAC,MAAM,WAAW,GAAG,YAAY,CAAC;AAExC,sCAAsC;AACtC,MAAM,CAAC,MAAM,WAAW,GAAG,EAAE,GAAG,gBAAgB,EAAW,CAAC;AAE5D,MAAM,CAAC,MAAM,UAAU,GAAG,WAAW,CAAC"}

package/dist/esm/components/avatar/define.js

@@ -1,4 +1,4 @@
-import { DesignSystem } from "../design-system";
-import { definition } from "./avatar.definition";
+import { DesignSystem } from "../design-system.js";
+import { definition } from "./avatar.definition.js";
 definition.define(DesignSystem.registry);
 //# sourceMappingURL=define.js.map

package/dist/esm/components/avatar/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../../../../src/components/avatar/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../../../../src/components/avatar/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/components/avatar/index.js

@@ -1,4 +1,5 @@
-export { Avatar } from "./avatar";
-export { AvatarNamedColor, AvatarShape, AvatarSize, AvatarActive, AvatarAppearance, AvatarColor, AvatarStyles, AvatarTemplate } from "@fluentui/web-components";
-export { definition as AvatarDefinition } from "./avatar.definition";
+export { Avatar } from "./avatar.js";
+export { AvatarActives, AvatarAppearances, AvatarColors, AvatarNamedColors, AvatarShapes, AvatarSizes } from "./avatar.options.js";
+export { AvatarStyles, AvatarTemplate } from "@fluentui/web-components";
+export { definition as AvatarDefinition } from "./avatar.definition.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/components/avatar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,YAAY,EACZ,cAAc,EACf,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,WAAW,EACZ,MAAM,qBAAqB,CAAC;AAS7B,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/esm/components/badge/badge.definition.js

@@ -1,17 +1,19 @@
-import { BadgeStyles, BadgeTemplate } from "@fluentui/web-components";
-import { DesignSystem } from "../design-system";
-import { Badge } from "./badge";
+import { BadgeStyles, BadgeTemplate } from '@fluentui/web-components';
+import { DesignSystem } from '../design-system.js';
+import { Badge } from './badge.js';
+
 /**
  * The Fabric Badge component.
  *
  * @public
  */
-export const definition = Badge.compose({
-    name: `${DesignSystem.prefix}-badge`,
-    template: BadgeTemplate,
-    styles: BadgeStyles,
-    shadowOptions: {
-        delegatesFocus: true
-    }
+const definition = Badge.compose({
+  name: `${DesignSystem.prefix}-badge`,
+  template: BadgeTemplate,
+  styles: BadgeStyles,
+  shadowOptions: {
+    mode: DesignSystem.shadowRootMode
+  }
 });
-//# sourceMappingURL=badge.definition.js.map
+
+export { definition };

package/dist/esm/components/badge/badge.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.definition.js","sourceRoot":"","sources":["../../../../../../../src/components/badge/badge.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC;IACtC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,QAAQ;IACpC,QAAQ,EAAE,aAAa;IACvB,MAAM,EAAE,WAAW;IACnB,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC"}
+{"version":3,"file":"badge.definition.js","sourceRoot":"","sources":["../../../../../../../src/components/badge/badge.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC;IACtC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,QAAQ;IACpC,QAAQ,EAAE,aAAa;IACvB,MAAM,EAAE,WAAW;IACnB,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

package/dist/esm/components/badge/badge.js

@@ -1,4 +1,5 @@
-import { Badge as FluentBadge } from "@fluentui/web-components";
+import { Badge as Badge$1 } from '@fluentui/web-components';
+
 /**
  * Badge
  * @summary A badge component representing a small count or label, often used to show status, categorization, or decorative purposes.
@@ -35,6 +36,6 @@ import { Badge as FluentBadge } from "@fluentui/web-components";
  * @tagname fabric-badge
  * @public
  */
-export class Badge extends FluentBadge {
-}
-//# sourceMappingURL=badge.js.map
+class Badge extends Badge$1 {}
+
+export { Badge };

package/dist/esm/components/badge/badge.options.js

@@ -0,0 +1,20 @@
+import { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize } from '@fluentui/web-components';
+
+/** Appearance values for {@link Badge}. */
+const BadgeAppearances = {
+  ...BadgeAppearance
+};
+/** Color values for {@link Badge}. */
+const BadgeColors = {
+  ...BadgeColor
+};
+/** Shape values for {@link Badge}. */
+const BadgeShapes = {
+  ...BadgeShape
+};
+/** Size values for {@link Badge}. */
+const BadgeSizes = {
+  ...BadgeSize
+};
+
+export { BadgeAppearances, BadgeColors, BadgeShapes, BadgeSizes };

package/dist/esm/components/badge/badge.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.options.js","sourceRoot":"","sources":["../../../../../../../src/components/badge/badge.options.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,IAAI,qBAAqB,EACxC,UAAU,IAAI,gBAAgB,EAC9B,UAAU,IAAI,gBAAgB,EAC9B,SAAS,IAAI,eAAe,EAC7B,MAAM,0BAA0B,CAAC;AAGlC,2CAA2C;AAC3C,MAAM,CAAC,MAAM,gBAAgB,GAAG,EAAE,GAAG,qBAAqB,EAAW,CAAC;AAEtE,MAAM,CAAC,MAAM,eAAe,GAAG,gBAAgB,CAAC;AAEhD,sCAAsC;AACtC,MAAM,CAAC,MAAM,WAAW,GAAG,EAAE,GAAG,gBAAgB,EAAW,CAAC;AAE5D,MAAM,CAAC,MAAM,UAAU,GAAG,WAAW,CAAC;AAEtC,sCAAsC;AACtC,MAAM,CAAC,MAAM,WAAW,GAAG,EAAE,GAAG,gBAAgB,EAAW,CAAC;AAE5D,MAAM,CAAC,MAAM,UAAU,GAAG,WAAW,CAAC;AAEtC,qCAAqC;AACrC,MAAM,CAAC,MAAM,UAAU,GAAG,EAAE,GAAG,eAAe,EAAW,CAAC;AAE1D,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAAC"}

package/dist/esm/components/badge/define.js

@@ -1,4 +1,4 @@
-import { DesignSystem } from "../design-system";
-import { definition } from "./badge.definition";
+import { DesignSystem } from "../design-system.js";
+import { definition } from "./badge.definition.js";
 definition.define(DesignSystem.registry);
 //# sourceMappingURL=define.js.map

package/dist/esm/components/badge/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../../../../src/components/badge/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../../../../src/components/badge/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/components/badge/index.js

@@ -1,4 +1,5 @@
-export { Badge } from "./badge";
-export { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize, BadgeStyles, BadgeTemplate } from "@fluentui/web-components";
-export { definition as BadgeDefinition } from "./badge.definition";
+export { Badge } from "./badge.js";
+export { BadgeAppearances, BadgeColors, BadgeShapes, BadgeSizes } from "./badge.options.js";
+export { definition as BadgeDefinition } from "./badge.definition.js";
+export { BadgeStyles, BadgeTemplate } from "@fluentui/web-components";
 //# sourceMappingURL=index.js.map

package/dist/esm/components/badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EACL,eAAe,EACf,UAAU,EACV,UAAU,EACV,SAAS,EACT,WAAW,EACX,aAAa,EACd,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,WAAW,EACX,UAAU,EACX,MAAM,oBAAoB,CAAC;AAO5B,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/esm/components/button/button.definition.js

@@ -1,19 +1,21 @@
-import { DesignSystem } from "../design-system";
-import { Button } from "./button";
-import { template as ButtonTemplate } from "./button.template";
-import { styles as ButtonStyles } from "./button.styles";
+import { DesignSystem } from '../design-system.js';
+import { Button } from './button.js';
+import { ButtonTemplate } from '@fluentui/web-components';
+import { styles } from './button.styles.js';
+
 /**
  *
  * @public
  * @remarks
  * HTML Element: <fabric-button>
  */
-export const definition = Button.compose({
-    name: `${DesignSystem.prefix}-button`,
-    template: ButtonTemplate,
-    styles: ButtonStyles,
-    shadowOptions: {
-        delegatesFocus: true
-    }
+const definition = Button.compose({
+  name: `${DesignSystem.prefix}-button`,
+  template: ButtonTemplate,
+  styles: styles,
+  shadowOptions: {
+    mode: DesignSystem.shadowRootMode
+  }
 });
-//# sourceMappingURL=button.definition.js.map
+
+export { definition };

package/dist/esm/components/button/button.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.definition.js","sourceRoot":"","sources":["../../../../../../../src/components/button/button.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEzD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC;IACvC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,SAAS;IACrC,QAAQ,EAAE,cAAc;IACxB,MAAM,EAAE,YAAY;IACpB,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC"}
+{"version":3,"file":"button.definition.js","sourceRoot":"","sources":["../../../../../../../src/components/button/button.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAE5D;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC;IACvC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,SAAS;IACrC,QAAQ,EAAE,cAAc;IACxB,MAAM,EAAE,YAAY;IACpB,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

package/dist/esm/components/button/button.js

@@ -1,11 +1,13 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
+import { BaseButton } from '@fluentui/web-components';
+import { attr } from '@microsoft/fast-element';
+
+var __decorate = globalThis && globalThis.__decorate || function (decorators, target, key, desc) {
+  var c = arguments.length,
+    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+    d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { BaseButton as FluentButton } from "@fluentui/web-components";
-import { attr } from "@microsoft/fast-element";
 /**
  * Button
  * @summary A Button Custom HTML Element. Based on FluentButton and includes style and layout specific attributes.
@@ -41,7 +43,7 @@ import { attr } from "@microsoft/fast-element";
  * @prop {ButtonShape | undefined} shape - The shape of the button.
  * @prop {ButtonSize | undefined} size - The size of the button.
  * @prop {boolean} iconOnly - Indicates that the button should only display as an icon with no text content.
- * @prop {boolean} autofocus - Indicates the button should be focused when the page is loaded.
+ * @prop {boolean} autofocus - Indicates the button should be focused whein the page is loaded.
  * @prop {boolean | undefined} disabled - Sets the element's disabled state.
  * @prop {boolean} disabledFocusable - Indicates that the button is focusable while disabled.
  * @prop {number} tabindex - Sets that the button tabindex attribute.
@@ -54,6 +56,7 @@ import { attr } from "@microsoft/fast-element";
  * @prop {string | undefined} name - The name of the element. This element's value will be surfaced during form submission under the provided name.
  * @prop {ButtonType} type - The button type.
  * @prop {string | undefined} value - The value attribute.
+ * @prop {string} role - Accessible role applied to the element (defaults to 'button').
  *
  * @slot start - Content which can be provided before the button content.
  * @slot end - Content which can be provided after the button content.
@@ -71,29 +74,25 @@ import { attr } from "@microsoft/fast-element";
  * @tagname fabric-button
  * @public
  */
-export class Button extends FluentButton {
-    constructor() {
-        super(...arguments);
-        /**
-         * Indicates that the button should only display as an icon with no text content.
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: `icon-only`
-         */
-        this.iconOnly = false;
-    }
+class Button extends BaseButton {
+  constructor() {
+    super(...arguments);
+    /**
+     * Indicates that the button should only display as an icon with no text content.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `icon-only`
+     */
+    this.iconOnly = false;
+  }
 }
-__decorate([
-    attr
-], Button.prototype, "appearance", void 0);
-__decorate([
-    attr
-], Button.prototype, "shape", void 0);
-__decorate([
-    attr
-], Button.prototype, "size", void 0);
-__decorate([
-    attr({ attribute: "icon-only", mode: "boolean" })
-], Button.prototype, "iconOnly", void 0);
-//# sourceMappingURL=button.js.map
+__decorate([attr], Button.prototype, "appearance", void 0);
+__decorate([attr], Button.prototype, "shape", void 0);
+__decorate([attr], Button.prototype, "size", void 0);
+__decorate([attr({
+  attribute: "icon-only",
+  mode: "boolean"
+})], Button.prototype, "iconOnly", void 0);
+
+export { Button };

package/dist/esm/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../../../../src/components/button/button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,UAAU,IAAI,YAAY,EAK3B,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,MAAM,OAAO,MAAO,SAAQ,YAAY;IAAxC;;QA+BE;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;IACnC,CAAC;CAAA;AA/BC;IADC,IAAI;0CACgC;AAUrC;IADC,IAAI;qCAC4B;AAUjC;IADC,IAAI;oCAC0B;AAU/B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;wCACjB"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../../../../src/components/button/button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,IAAI,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAO/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH,MAAM,OAAO,MAAO,SAAQ,YAAY;IAAxC;;QA+BE;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;IACnC,CAAC;CAAA;AA/BQ;IADN,IAAI;0CACgC;AAU9B;IADN,IAAI;qCACsB;AAUpB;IADN,IAAI;oCACoB;AAUlB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;wCACjB"}