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

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

@@ -0,0 +1,17 @@
+import { declarativeTemplate } from '@microsoft/fast-element/declarative.js';
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { tagName } from './anchor-button.options.js';
+/**
+ * The async definition configuration for the `<fluent-anchor-button>` 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 declarativeDefinition = {
+    name: tagName,
+    registry: FluentDesignSystem.registry,
+    template: declarativeTemplate(),
+};
+//# sourceMappingURL=anchor-button.definition-async.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"anchor-button.definition-async.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.definition-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAqC,MAAM,wCAAwC,CAAC;AAChH,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAiC;IACjE,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,kBAAkB,CAAC,QAAQ;IACrC,QAAQ,EAAE,mBAAmB,EAAE;CAChC,CAAC"}

package/dist/esm/anchor-button/anchor-button.definition.d.ts

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"anchor-button.definition.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC;IAC7C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,gBAAgB;IAClD,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
+{"version":3,"file":"anchor-button.definition.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.definition.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,kBAAkB,CAAC,QAAQ;IACrC,MAAM;IACN,QAAQ;CACT,CAAC"}

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

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { attr } from '@microsoft/fast-element';
-import { StartEnd } from '../patterns/index.js';
+import { StartEnd } from '../patterns/start-end.js';
 import { applyMixins } from '../utils/apply-mixins.js';
 import { swapStates, toggleState } from '../utils/element-internals.js';
 import { BaseAnchor } from './anchor-button.base.js';
@@ -9,6 +9,8 @@ import { AnchorButtonAppearance, AnchorButtonShape, AnchorButtonSize } from './a
  * An Anchor Custom HTML Element.
  * Based on BaseAnchor and includes style and layout specific attributes
  *
+ * @tag fluent-anchor-button
+ *
  * @public
  */
 export class AnchorButton extends BaseAnchor {

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

@@ -1 +1 @@
-{"version":3,"file":"anchor-button.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAWzG;;;;;GAKG;AACH,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QA0DE;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;IAUnC,CAAC;IAjEC;;;;OAIG;IACI,iBAAiB,CAAC,IAAwC,EAAE,IAAwC;QACzG,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,sBAAsB,CAAC,CAAC;IACxE,CAAC;IAYD;;;;OAIG;IACI,YAAY,CAAC,IAAmC,EAAE,IAAmC;QAC1F,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,iBAAiB,CAAC,CAAC;IACnE,CAAC;IAYD;;;;OAIG;IACI,WAAW,CAAC,IAAkC,EAAE,IAAkC;QACvF,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,gBAAgB,CAAC,CAAC;IAClE,CAAC;IAYD;;;;OAIG;IACI,eAAe,CAAC,IAAa,EAAE,IAAa;QACjD,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACrD,CAAC;CACF;AAnEQ;IADN,IAAI;gDACkD;AAmBhD;IADN,IAAI;2CACwC;AAmBtC;IADN,IAAI;0CAC0B;AAmBxB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CACjB;AAoBnC,WAAW,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"anchor-button.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAwB,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AASzG;;;;;;;GAOG;AACH,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QA0DE;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;IAUnC,CAAC;IAjEC;;;;OAIG;IACI,iBAAiB,CAAC,IAAwC,EAAE,IAAwC;QACzG,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,sBAAsB,CAAC,CAAC;IACxE,CAAC;IAYD;;;;OAIG;IACI,YAAY,CAAC,IAAmC,EAAE,IAAmC;QAC1F,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,iBAAiB,CAAC,CAAC;IACnE,CAAC;IAYD;;;;OAIG;IACI,WAAW,CAAC,IAAkC,EAAE,IAAkC;QACvF,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,gBAAgB,CAAC,CAAC;IAClE,CAAC;IAYD;;;;OAIG;IACI,eAAe,CAAC,IAAa,EAAE,IAAa;QACjD,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACrD,CAAC;CACF;AAnEQ;IADN,IAAI;gDACkD;AAmBhD;IADN,IAAI;2CACwC;AAmBtC;IADN,IAAI;0CAC0B;AAmBxB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CACjB;AAoBnC,WAAW,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC"}

package/dist/esm/anchor-button/anchor-button.options.d.ts

@@ -1,4 +1,4 @@
-import type { ValuesOf } from '../utils/index.js';
+import type { ValuesOf } from '../utils/typings.js';
 import type { AnchorOptions } from './anchor-button.js';
 /**
  * Anchor Button Appearance constants
@@ -82,3 +82,9 @@ export declare const AnchorAttributes: {
  * @public
  */
 export type AnchorAttributes = ValuesOf<typeof AnchorAttributes>;
+/**
+ * The tag name for the anchor button element.
+ *
+ * @public
+ */
+export declare const tagName: "fluent-anchor-button";

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

@@ -1,3 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
 import { ButtonAppearance, ButtonShape, ButtonSize } from '../button/button.options.js';
 /**
  * Anchor Button Appearance constants
@@ -40,4 +41,10 @@ export const AnchorAttributes = {
     target: 'target',
     type: 'type',
 };
+/**
+ * The tag name for the anchor button element.
+ *
+ * @public
+ */
+export const tagName = `${FluentDesignSystem.prefix}-anchor-button`;
 //# sourceMappingURL=anchor-button.options.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"anchor-button.options.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAIxF;;;GAGG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,gBAAgB,CAAC;AAQvD;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC;AAQ7C;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,UAAU,CAAC;AAU3C;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;CACJ,CAAC;AASX;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,MAAM;IACZ,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,MAAM;IACZ,cAAc,EAAE,gBAAgB;IAChC,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;CACJ,CAAC"}
+{"version":3,"file":"anchor-button.options.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAIxF;;;GAGG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,gBAAgB,CAAC;AAQvD;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC;AAQ7C;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,UAAU,CAAC;AAU3C;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;CACJ,CAAC;AASX;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,MAAM;IACZ,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,MAAM;IACZ,cAAc,EAAE,gBAAgB;IAChC,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;CACJ,CAAC;AASX;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,kBAAkB,CAAC,MAAM,gBAAyB,CAAC"}

package/dist/esm/anchor-button/anchor-button.styles.css

@@ -0,0 +1,226 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: inline-flex;
+}
+
+:host {
+  --icon-spacing: var(--spacingHorizontalSNudge);
+  position: relative;
+  contain: layout style;
+  vertical-align: middle;
+  align-items: center;
+  box-sizing: border-box;
+  justify-content: center;
+  text-align: center;
+  text-decoration-line: none;
+  margin: 0;
+  min-height: 32px;
+  outline-style: none;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
+  border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
+  padding: 0 var(--spacingHorizontalM);
+  min-width: 96px;
+  border-radius: var(--borderRadiusMedium);
+  font-size: var(--fontSizeBase300);
+  font-family: var(--fontFamilyBase);
+  font-weight: var(--fontWeightSemibold);
+  line-height: var(--lineHeightBase300);
+  transition-duration: var(--durationFaster);
+  transition-property: background, border, color;
+  transition-timing-function: var(--curveEasyEase);
+  cursor: pointer;
+  user-select: none;
+}
+
+.content {
+  display: inherit;
+}
+
+:host(:hover) {
+  background-color: var(--colorNeutralBackground1Hover);
+  color: var(--colorNeutralForeground1Hover);
+  border-color: var(--colorNeutralStroke1Hover);
+}
+
+:host(:hover:active) {
+  background-color: var(--colorNeutralBackground1Pressed);
+  border-color: var(--colorNeutralStroke1Pressed);
+  color: var(--colorNeutralForeground1Pressed);
+  outline-style: none;
+}
+
+:host(:focus-visible) {
+  border-color: var(--colorTransparentStroke);
+  outline: var(--strokeWidthThick) solid var(--colorTransparentStroke);
+  box-shadow: var(--shadow4), 0 0 0 2px var(--colorStrokeFocus2);
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  :host {
+    transition-duration: 0.01ms;
+  }
+}
+
+::slotted(svg) {
+  font-size: 20px;
+  height: 20px;
+  width: 20px;
+  fill: currentColor;
+}
+
+::slotted([slot='start']) {
+  margin-inline-end: var(--icon-spacing);
+}
+
+::slotted([slot='end']),
+[slot='end'] {
+  flex-shrink: 0;
+  margin-inline-start: var(--icon-spacing);
+}
+
+:host([icon-only]) {
+  min-width: 32px;
+  max-width: 32px;
+}
+
+:host([size='small']) {
+  --icon-spacing: var(--spacingHorizontalXS);
+  min-height: 24px;
+  min-width: 64px;
+  padding: 0 var(--spacingHorizontalS);
+  border-radius: var(--borderRadiusSmall);
+  font-size: var(--fontSizeBase200);
+  line-height: var(--lineHeightBase200);
+  font-weight: var(--fontWeightRegular);
+}
+
+:host([size='small'][icon-only]) {
+  min-width: 24px;
+  max-width: 24px;
+}
+
+:host([size='large']) {
+  min-height: 40px;
+  border-radius: var(--borderRadiusLarge);
+  padding: 0 var(--spacingHorizontalL);
+  font-size: var(--fontSizeBase400);
+  line-height: var(--lineHeightBase400);
+}
+
+:host([size='large'][icon-only]) {
+  min-width: 40px;
+  max-width: 40px;
+}
+
+:host([size='large']) ::slotted(svg) {
+  font-size: 24px;
+  height: 24px;
+  width: 24px;
+}
+
+:host(:is([shape='circular'], [shape='circular']:focus-visible)) {
+  border-radius: var(--borderRadiusCircular);
+}
+
+:host(:is([shape='square'], [shape='square']:focus-visible)) {
+  border-radius: var(--borderRadiusNone);
+}
+
+:host([appearance='primary']) {
+  background-color: var(--colorBrandBackground);
+  color: var(--colorNeutralForegroundOnBrand);
+  border-color: transparent;
+}
+
+:host([appearance='primary']:hover) {
+  background-color: var(--colorBrandBackgroundHover);
+}
+
+:host([appearance='primary']:is(:hover, :hover:active):not(:focus-visible)) {
+  border-color: transparent;
+}
+
+:host([appearance='primary']:is(:hover, :hover:active)) {
+  color: var(--colorNeutralForegroundOnBrand);
+}
+
+:host([appearance='primary']:hover:active) {
+  background-color: var(--colorBrandBackgroundPressed);
+}
+
+:host([appearance='primary']:focus-visible) {
+  border-color: var(--colorNeutralForegroundOnBrand);
+  box-shadow: var(--shadow2), 0 0 0 2px var(--colorStrokeFocus2);
+}
+
+:host([appearance='outline']) {
+  background-color: var(--colorTransparentBackground);
+}
+
+:host([appearance='outline']:hover) {
+  background-color: var(--colorTransparentBackgroundHover);
+}
+
+:host([appearance='outline']:hover:active) {
+  background-color: var(--colorTransparentBackgroundPressed);
+}
+
+:host([appearance='subtle']) {
+  background-color: var(--colorSubtleBackground);
+  color: var(--colorNeutralForeground2);
+  border-color: transparent;
+}
+
+:host([appearance='subtle']:hover) {
+  background-color: var(--colorSubtleBackgroundHover);
+  color: var(--colorNeutralForeground2Hover);
+  border-color: transparent;
+}
+
+:host([appearance='subtle']:hover:active) {
+  background-color: var(--colorSubtleBackgroundPressed);
+  color: var(--colorNeutralForeground2Pressed);
+  border-color: transparent;
+}
+
+:host([appearance='subtle']:hover) ::slotted(svg) {
+  fill: var(--colorNeutralForeground2BrandHover);
+}
+
+:host([appearance='subtle']:hover:active) ::slotted(svg) {
+  fill: var(--colorNeutralForeground2BrandPressed);
+}
+
+:host([appearance='transparent']) {
+  background-color: var(--colorTransparentBackground);
+  color: var(--colorNeutralForeground2);
+}
+
+:host([appearance='transparent']:hover) {
+  background-color: var(--colorTransparentBackgroundHover);
+  color: var(--colorNeutralForeground2BrandHover);
+}
+
+:host([appearance='transparent']:hover:active) {
+  background-color: var(--colorTransparentBackgroundPressed);
+  color: var(--colorNeutralForeground2BrandPressed);
+}
+
+:host(:is([appearance='transparent'], [appearance='transparent']:is(:hover, :active))) {
+  border-color: transparent;
+}
+
+::slotted(a) {
+  position: absolute;
+  inset: 0;
+}
+
+@media (forced-colors: active) {
+  :host {
+    border-color: LinkText;
+    color: LinkText;
+  }
+}

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

@@ -1,6 +1,5 @@
 import { css } from '@microsoft/fast-element';
 import { baseButtonStyles } from '../button/button.styles.js';
-import { forcedColorsStylesheetBehavior } from '../utils/index.js';
 // Need to support icon hover styles
 export const styles = css `
   ${baseButtonStyles}
@@ -9,10 +8,12 @@ export const styles = css `
     position: absolute;
     inset: 0;
   }
-`.withBehaviors(forcedColorsStylesheetBehavior(css `
+
+  @media (forced-colors: active) {
     :host {
       border-color: LinkText;
       color: LinkText;
     }
-  `));
+  }
+`;
 //# sourceMappingURL=anchor-button.styles.js.map

package/dist/esm/anchor-button/anchor-button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"anchor-button.styles.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oCAAoC;AACpC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,gBAAgB;;;;;;CAMnB,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;GAKjC,CAAC,CACH,CAAC"}
+{"version":3,"file":"anchor-button.styles.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAE9D,oCAAoC;AACpC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,gBAAgB;;;;;;;;;;;;;CAanB,CAAC"}

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

@@ -0,0 +1,10 @@
+<f-template name="fluent-anchor-button" shadowrootmode="open">
+  <template tabindex="0" @click="{clickHandler($e)}" @keydown="{keydownHandler($e)}">
+    {{styles}}
+    <slot name="start" f-ref="{start}"></slot>
+    <span class="content" part="content">
+      <slot></slot>
+    </span>
+    <slot name="end" f-ref="{end}"></slot>
+  </template>
+</f-template>

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

@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { endSlotTemplate, startSlotTemplate } from '../patterns/index.js';
+import { endSlotTemplate, startSlotTemplate } from '../patterns/start-end.js';
 /**
  * The template for the Button component.
  * @public

package/dist/esm/anchor-button/anchor-button.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"anchor-button.template.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAqB,MAAM,yBAAyB,CAAC;AAC5F,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAG1E;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAyB,UAAyB,EAAE;IAChF,OAAO,IAAI,CAAG;;;gBAGA,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAqB,CAAC;kBAC/C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;;QAE9D,iBAAiB,CAAC,OAAO,CAAC;;;;QAI1B,eAAe,CAAC,OAAO,CAAC;;GAE7B,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAsC,cAAc,EAAE,CAAC"}
+{"version":3,"file":"anchor-button.template.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAqB,MAAM,yBAAyB,CAAC;AAC5F,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAG9E;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAyB,UAAyB,EAAE;IAChF,OAAO,IAAI,CAAG;;;gBAGA,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAqB,CAAC;kBAC/C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;;QAE9D,iBAAiB,CAAC,OAAO,CAAC;;;;QAI1B,eAAe,CAAC,OAAO,CAAC;;GAE7B,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAsC,cAAc,EAAE,CAAC"}

package/dist/esm/anchor-button/define-async.d.ts

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

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

@@ -0,0 +1,4 @@
+import { declarativeDefinition } from './anchor-button.definition-async.js';
+import { AnchorButton } from './anchor-button.js';
+AnchorButton.define(declarativeDefinition);
+//# sourceMappingURL=define-async.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/anchor-button/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,YAAY,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/anchor-button/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/anchor-button/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/anchor-button/index.d.ts

@@ -5,3 +5,4 @@ export { AnchorButtonAppearance, AnchorButtonShape, AnchorButtonSize, AnchorTarg
 export type { AnchorButtonOptions } from './anchor-button.options.js';
 export { styles as AnchorButtonStyles } from './anchor-button.styles.js';
 export { template as AnchorButtonTemplate } from './anchor-button.template.js';
+export { tagName as AnchorButtonTagName } from './anchor-button.options.js';

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

@@ -4,4 +4,5 @@ export { AnchorButton } from './anchor-button.js';
 export { AnchorButtonAppearance, AnchorButtonShape, AnchorButtonSize, AnchorTarget } from './anchor-button.options.js';
 export { styles as AnchorButtonStyles } from './anchor-button.styles.js';
 export { template as AnchorButtonTemplate } from './anchor-button.template.js';
+export { tagName as AnchorButtonTagName } from './anchor-button.options.js';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/anchor-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACrF,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAEvH,OAAO,EAAE,MAAM,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,QAAQ,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/anchor-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACrF,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAEvH,OAAO,EAAE,MAAM,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,QAAQ,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/esm/avatar/avatar.base.d.ts

@@ -5,16 +5,50 @@ import { FASTElement } from '@microsoft/fast-element';
  */
 export declare class BaseAvatar extends FASTElement {
     /**
-     * Signal to remove event listeners when the component is disconnected.
+     * Reference to the default slot element.
      *
      * @internal
      */
-    private abortSignal?;
+    defaultSlot: HTMLSlotElement;
     /**
-     * Reference to the default slot element.
+     * Handles changes to the default slot element reference.
+     *
+     * Toggles the `has-slotted` class on the slot element for browsers that do not
+     * support the `:has-slotted` CSS selector. Defers cleanup using
+     * `Updates.enqueue` to avoid DOM mutations during hydration that could
+     * corrupt binding markers.
+     *
      * @internal
      */
-    defaultSlot: HTMLSlotElement;
+    defaultSlotChanged(): void;
+    /**
+     * Reference to the monogram element that displays generated initials.
+     *
+     * @internal
+     */
+    monogram: HTMLElement;
+    /**
+     * Updates the monogram text content when the ref is captured.
+     *
+     * @internal
+     */
+    protected monogramChanged(): void;
+    /**
+     * The slotted content nodes assigned to the default slot.
+     *
+     * @internal
+     */
+    slottedDefaults: Node[];
+    /**
+     * Handles changes to the slotted default content.
+     *
+     * Normalizes the DOM, toggles the `has-slotted` class on the default slot element
+     * for browsers that do not support the `:has-slotted` CSS selector, and removes
+     * empty text nodes from the default slot to keep the DOM clean.
+     *
+     * @internal
+     */
+    protected slottedDefaultsChanged(): void;
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
@@ -29,22 +63,42 @@ export declare class BaseAvatar extends FASTElement {
      * HTML Attribute: name
      */
     name?: string | undefined;
+    /**
+     * Handles changes to the name attribute.
+     * @internal
+     */
+    protected nameChanged(): void;
     /**
      * Provide custom initials rather than one generated via the name
      *
      * @public
      * @remarks
-     * HTML Attribute: name
+     * HTML Attribute: initials
      */
     initials?: string | undefined;
-    connectedCallback(): void;
+    /**
+     * Handles changes to the initials attribute.
+     * @internal
+     */
+    protected initialsChanged(): void;
     constructor();
-    disconnectedCallback(): void;
     /**
-     * Removes any empty text nodes from the default slot when the slotted content changes.
+     * Generates and sets the initials for the template.
+     * Subclasses should override this to provide custom initials logic.
+     *
+     * @internal
+     */
+    generateInitials(): string | void;
+    /**
+     * Updates the monogram element's text content with the generated initials.
+     *
+     * @internal
+     */
+    protected updateMonogram(): void;
+    /**
+     * Normalizes the DOM and removes empty text nodes from the default slot.
      *
-     * @param e - The event object
      * @internal
      */
-    slotchangeHandler(): void;
+    protected cleanupSlottedContent(): void;
 }