@fluentui/web-components 3.0.0-beta.12 → 3.0.0-beta.121

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

@@ -0,0 +1,84 @@
+import type { ValuesOf } from '../utils/index.js';
+import type { AnchorOptions } from './anchor-button.js';
+/**
+ * Anchor Button Appearance constants
+ * @public
+ */
+export declare const AnchorButtonAppearance: {
+    readonly primary: "primary";
+    readonly outline: "outline";
+    readonly subtle: "subtle";
+    readonly transparent: "transparent";
+};
+/**
+ * An Anchor Button can be secondary, primary, outline, subtle, transparent
+ * @public
+ */
+export type AnchorButtonAppearance = ValuesOf<typeof AnchorButtonAppearance>;
+/**
+ * An Anchor Button can be square, circular or rounded.
+ * @public
+ */
+export declare const AnchorButtonShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+/**
+ * An Anchor Button can be square, circular or rounded
+ * @public
+ */
+export type AnchorButtonShape = ValuesOf<typeof AnchorButtonShape>;
+/**
+ * An Anchor Button can be a size of small, medium or large.
+ * @public
+ */
+export declare const AnchorButtonSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+/**
+ * An Anchor Button can be on of several preset sizes.
+ * @public
+ */
+export type AnchorButtonSize = ValuesOf<typeof AnchorButtonSize>;
+export type { AnchorOptions as AnchorButtonOptions };
+/**
+ * Anchor target values.
+ *
+ * @public
+ */
+export declare const AnchorTarget: {
+    readonly _self: "_self";
+    readonly _blank: "_blank";
+    readonly _parent: "_parent";
+    readonly _top: "_top";
+};
+/**
+ * Type for anchor target values.
+ *
+ * @public
+ */
+export type AnchorTarget = ValuesOf<typeof AnchorTarget>;
+/**
+ * Reflected anchor attributes.
+ *
+ * @public
+ */
+export declare const AnchorAttributes: {
+    readonly download: "download";
+    readonly href: "href";
+    readonly hreflang: "hreflang";
+    readonly ping: "ping";
+    readonly referrerpolicy: "referrerpolicy";
+    readonly rel: "rel";
+    readonly target: "target";
+    readonly type: "type";
+};
+/**
+ * Type for anchor attributes.
+ *
+ * @public
+ */
+export type AnchorAttributes = ValuesOf<typeof AnchorAttributes>;

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

@@ -25,4 +25,19 @@ export const AnchorTarget = {
     _parent: '_parent',
     _top: '_top',
 };
+/**
+ * Reflected anchor attributes.
+ *
+ * @public
+ */
+export const AnchorAttributes = {
+    download: 'download',
+    href: 'href',
+    hreflang: 'hreflang',
+    ping: 'ping',
+    referrerpolicy: 'referrerpolicy',
+    rel: 'rel',
+    target: 'target',
+    type: 'type',
+};
 //# 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"}
+{"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"}

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

@@ -1,262 +1,18 @@
 import { css } from '@microsoft/fast-element';
-import { borderRadiusCircular, borderRadiusLarge, borderRadiusMedium, borderRadiusNone, borderRadiusSmall, colorBrandBackground, colorBrandBackgroundHover, colorBrandBackgroundPressed, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackgroundDisabled, colorNeutralForeground1, colorNeutralForeground1Hover, colorNeutralForeground1Pressed, colorNeutralForeground2, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForegroundDisabled, colorNeutralForegroundOnBrand, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStrokeDisabled, colorStrokeFocus2, colorSubtleBackground, colorSubtleBackgroundHover, colorSubtleBackgroundPressed, colorTransparentBackground, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentStroke, curveEasyEase, durationFaster, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontWeightRegular, fontWeightSemibold, lineHeightBase200, lineHeightBase300, lineHeightBase400, shadow2, shadow4, spacingHorizontalL, spacingHorizontalM, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXS, strokeWidthThick, strokeWidthThin, } from '../theme/design-tokens.js';
-import { forcedColorsStylesheetBehavior } from '../utils/behaviors/match-media-stylesheet-behavior.js';
-import { display } from '../utils/display.js';
+import { baseButtonStyles } from '../button/button.styles.js';
+import { forcedColorsStylesheetBehavior } from '../utils/index.js';
 // Need to support icon hover styles
 export const styles = css `
-  ${display('inline-flex')}
+  ${baseButtonStyles}
 
-  :host {
-    --icon-spacing: ${spacingHorizontalSNudge};
-    contain: layout style;
-    vertical-align: middle;
-  }
-
-  :host .control {
-    display: inline-flex;
-    align-items: center;
-    box-sizing: border-box;
-    justify-content: center;
-    text-decoration-line: none;
-    margin: 0;
-    min-height: 32px;
-    outline-style: none;
-    background-color: ${colorNeutralBackground1};
-    color: ${colorNeutralForeground1};
-    border: ${strokeWidthThin} solid ${colorNeutralStroke1};
-    padding: 0 ${spacingHorizontalM};
-    min-width: 96px;
-    border-radius: ${borderRadiusMedium};
-    font-size: ${fontSizeBase300};
-    font-family: ${fontFamilyBase};
-    font-weight: ${fontWeightSemibold};
-    line-height: ${lineHeightBase300};
-    transition-duration: ${durationFaster};
-    transition-property: background, border, color;
-    transition-timing-function: ${curveEasyEase};
-    cursor: pointer;
-  }
-
-  .content {
-    display: inherit;
-    text-align: center;
-  }
-
-  :host(:hover) .control {
-    background-color: ${colorNeutralBackground1Hover};
-    color: ${colorNeutralForeground1Hover};
-    border-color: ${colorNeutralStroke1Hover};
-  }
-
-  :host(:hover:active) .control {
-    background-color: ${colorNeutralBackground1Pressed};
-    border-color: ${colorNeutralStroke1Pressed};
-    color: ${colorNeutralForeground1Pressed};
-    outline-style: none;
-  }
-
-  :host .control:focus-visible {
-    border-color: ${colorTransparentStroke};
-    outline: ${strokeWidthThick}) solid ${colorTransparentStroke};
-    box-shadow: ${shadow4}, 0 0 0 2px ${colorStrokeFocus2};
-  }
-
-  @media screen and (prefers-reduced-motion: reduce) {
-    transition-duration: 0.01ms;
-  }
-
-  ::slotted(svg) {
-    font-size: 20px;
-    height: 20px;
-    width: 20px;
-    fill: currentColor;
-  }
-
-  [slot='start'],
-  ::slotted([slot='start']) {
-    margin-inline-end: var(--icon-spacing);
-  }
-
-  [slot='end'],
-  ::slotted([slot='end']) {
-    margin-inline-start: var(--icon-spacing);
-  }
-
-  :host([icon-only]) .control {
-    min-width: 32px;
-    max-width: 32px;
-  }
-
-  :host([size='small']) {
-    --icon-spacing: ${spacingHorizontalXS};
-  }
-
-  :host([size='small']) .control {
-    min-height: 24px;
-    min-width: 64px;
-    padding: 0 ${spacingHorizontalS};
-    border-radius: ${borderRadiusSmall};
-    font-size: ${fontSizeBase200};
-    line-height: ${lineHeightBase200};
-    font-weight: ${fontWeightRegular};
-  }
-
-  :host([size='small'][icon-only]) .control {
-    min-width: 24px;
-    max-width: 24px;
-  }
-
-  :host([size='large']) .control {
-    min-height: 40px;
-    border-radius: ${borderRadiusLarge};
-    padding: 0 ${spacingHorizontalL};
-    font-size: ${fontSizeBase400};
-    line-height: ${lineHeightBase400};
-  }
-
-  :host([size='large'][icon-only]) .control {
-    min-width: 40px;
-    max-width: 40px;
-  }
-
-  :host([size='large']) ::slotted(svg) {
-    font-size: 24px;
-    height: 24px;
-    width: 24px;
-  }
-
-  :host([shape='circular']) .control,
-  :host([shape='circular']) .control:focus-visible {
-    border-radius: ${borderRadiusCircular};
-  }
-
-  :host([shape='square']) .control,
-  :host([shape='square']) .control:focus-visible {
-    border-radius: ${borderRadiusNone};
-  }
-
-  :host([appearance='primary']) .control {
-    background-color: ${colorBrandBackground};
-    color: ${colorNeutralForegroundOnBrand};
-    border-color: transparent;
-  }
-
-  :host([appearance='primary']:hover) .control {
-    background-color: ${colorBrandBackgroundHover};
-  }
-
-  :host([appearance='primary']:hover) .control,
-  :host([appearance='primary']:hover:active) .control {
-    border-color: transparent;
-    color: ${colorNeutralForegroundOnBrand};
-  }
-
-  :host([appearance='primary']:hover:active) .control {
-    background-color: ${colorBrandBackgroundPressed};
-  }
-
-  :host([appearance='primary']) .control:focus-visible {
-    border-color: ${colorNeutralForegroundOnBrand};
-    box-shadow: ${shadow2}, 0 0 0 2px ${colorStrokeFocus2};
-  }
-
-  :host(is:([disabled][appearance='primary'], [disabled-focusabale][appearance="primary"])) .control,
-  :host(is:([disabled][appearance='primary'], [disabled-focusabale][appearance="primary"]):hover) .control,
-  :host(is:([disabled][appearance='primary'], [disabled-focusabale][appearance="primary"]):hover:active) .control {
-    border-color: transparent;
-  }
-
-  :host([appearance='outline']) .control {
-    background-color: ${colorTransparentBackground};
-  }
-
-  :host([appearance='outline']:hover) .control {
-    background-color: ${colorTransparentBackgroundHover};
-  }
-
-  :host([appearance='outline']:hover:active) .control {
-    background-color: ${colorTransparentBackgroundPressed};
-  }
-
-  :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"])) .control,
-  :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"]):hover) .control,
-  :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"]):hover:active) .control {
-    background-color: ${colorTransparentBackground};
-  }
-
-  :host([appearance='subtle']) .control {
-    background-color: ${colorSubtleBackground};
-    color: ${colorNeutralForeground2};
-    border-color: transparent;
-  }
-
-  :host([appearance='subtle']:hover) .control {
-    background-color: ${colorSubtleBackgroundHover};
-    color: ${colorNeutralForeground2Hover};
-    border-color: transparent;
-  }
-
-  :host([appearance='subtle']:hover:active) .control {
-    background-color: ${colorSubtleBackgroundPressed};
-    color: ${colorNeutralForeground2Pressed};
-    border-color: transparent;
-  }
-
-  :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"])) .control,
-  :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"]):hover) .control,
-  :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"]):hover:active) .control {
-    background-color: ${colorTransparentBackground};
-    border-color: transparent;
-  }
-
-  :host([appearance='subtle']:hover) ::slotted(svg) {
-    fill: ${colorNeutralForeground2BrandHover};
-  }
-
-  :host([appearance='subtle']:hover:active) ::slotted(svg) {
-    fill: ${colorNeutralForeground2BrandPressed};
-  }
-
-  :host([appearance='transparent']) .control {
-    background-color: ${colorTransparentBackground};
-    color: ${colorNeutralForeground2};
-  }
-
-  :host([appearance='transparent']:hover) .control {
-    background-color: ${colorTransparentBackgroundHover};
-    color: ${colorNeutralForeground2BrandHover};
-  }
-
-  :host([appearance='transparent']:hover:active) .control {
-    background-color: ${colorTransparentBackgroundPressed};
-    color: ${colorNeutralForeground2BrandPressed};
-  }
-
-  :host([appearance='transparent']) .control,
-  :host([appearance='transparent']:hover) .control,
-  :host([appearance='transparent']:hover:active) .control {
-    border-color: transparent;
-  }
-
-  :host(is:([disabled][appearance='transparent'], [disabled-focusabale][appearance="transparent"])) .control,
-  :host(is:([disabled][appearance='transparent'], [disabled-focusabale][appearance="transparent"]):hover) .control,
-  :host(is:([disabled][appearance='transparent'], [disabled-focusabale][appearance="transparent"]):hover:active) .control {
-    border-color: transparent;
-    background-color: ${colorTransparentBackground};
-  }
-
-  :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable])) .control,
-  :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable]):hover) .control,
-  :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable]):hover:active)
-    .control {
-    background-color: ${colorNeutralBackgroundDisabled};
-    border-color: ${colorNeutralStrokeDisabled};
-    color: ${colorNeutralForegroundDisabled};
-    cursor: not-allowed;
+  ::slotted(a) {
+    position: absolute;
+    inset: 0;
   }
 `.withBehaviors(forcedColorsStylesheetBehavior(css `
-    :host([appearance='transparent']:hover) .control {
-      border-color: Highlight;
+    :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":"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"}
+{"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"}

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

@@ -0,0 +1,12 @@
+import { type ElementViewTemplate, type ViewTemplate } from '@microsoft/fast-element';
+import type { AnchorButton, AnchorOptions } from './anchor-button.js';
+/**
+ * The template for the Button component.
+ * @public
+ */
+export declare function anchorTemplate<T extends AnchorButton>(options?: AnchorOptions): ViewTemplate<T>;
+/**
+ * The template for the Button component.
+ * @public
+ */
+export declare const template: ElementViewTemplate<AnchorButton>;

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

@@ -1,4 +1,4 @@
-import { html, ref, slotted } from '@microsoft/fast-element';
+import { html } from '@microsoft/fast-element';
 import { endSlotTemplate, startSlotTemplate } from '../patterns/index.js';
 /**
  * The template for the Button component.
@@ -6,45 +6,17 @@ import { endSlotTemplate, startSlotTemplate } from '../patterns/index.js';
  */
 export function anchorTemplate(options = {}) {
     return html `
-    <a
-      class="control"
-      part="control"
-      download="${x => x.download}"
-      href="${x => x.href}"
-      hreflang="${x => x.hreflang}"
-      ping="${x => x.ping}"
-      referrerpolicy="${x => x.referrerpolicy}"
-      rel="${x => x.rel}"
-      target="${x => x.target}"
-      type="${x => x.type}"
-      aria-atomic="${x => x.ariaAtomic}"
-      aria-busy="${x => x.ariaBusy}"
-      aria-controls="${x => x.ariaControls}"
-      aria-current="${x => x.ariaCurrent}"
-      aria-describedby="${x => x.ariaDescribedby}"
-      aria-details="${x => x.ariaDetails}"
-      aria-disabled="${x => x.ariaDisabled}"
-      aria-errormessage="${x => x.ariaErrormessage}"
-      aria-expanded="${x => x.ariaExpanded}"
-      aria-flowto="${x => x.ariaFlowto}"
-      aria-haspopup="${x => x.ariaHaspopup}"
-      aria-hidden="${x => x.ariaHidden}"
-      aria-invalid="${x => x.ariaInvalid}"
-      aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
-      aria-label="${x => x.ariaLabel}"
-      aria-labelledby="${x => x.ariaLabelledby}"
-      aria-live="${x => x.ariaLive}"
-      aria-owns="${x => x.ariaOwns}"
-      aria-relevant="${x => x.ariaRelevant}"
-      aria-roledescription="${x => x.ariaRoledescription}"
-      ${ref('control')}
+    <template
+      tabindex="0"
+      @click="${(x, c) => x.clickHandler(c.event)}"
+      @keydown="${(x, c) => x.keydownHandler(c.event)}"
     >
       ${startSlotTemplate(options)}
       <span class="content" part="content">
-        <slot ${slotted('defaultSlottedContent')}></slot>
+        <slot></slot>
       </span>
       ${endSlotTemplate(options)}
-    </a>
+    </template>
   `;
 }
 /**

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,EAAuB,IAAI,EAAE,GAAG,EAAE,OAAO,EAAgB,MAAM,yBAAyB,CAAC;AAChG,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAG1E;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAyB,UAAyB,EAAE;IAChF,OAAO,IAAI,CAAG;;;;kBAIE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;cACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;kBACP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;cACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;wBACD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;aAChC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG;gBACP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;cACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;qBACJ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;mBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;sBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;0BACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;sBAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;uBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;2BACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;uBAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;qBACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;uBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;qBACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;sBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;2BACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;oBAC9B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;yBACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;mBAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;mBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;8BACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;QAChD,GAAG,CAAC,SAAS,CAAC;;QAEd,iBAAiB,CAAC,OAAO,CAAC;;gBAElB,OAAO,CAAC,uBAAuB,CAAC;;QAExC,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,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"}

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

@@ -0,0 +1,7 @@
+export { definition as AnchorButtonDefinition } from './anchor-button.definition.js';
+export { BaseAnchor } from './anchor-button.base.js';
+export { AnchorButton } from './anchor-button.js';
+export { AnchorButtonAppearance, AnchorButtonShape, AnchorButtonSize, AnchorTarget } from './anchor-button.options.js';
+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';

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

@@ -1,5 +1,7 @@
-export * from './anchor-button.js';
-export * from './anchor-button.options.js';
-export { template as AnchorButtonTemplate } from './anchor-button.template.js';
 export { definition as AnchorButtonDefinition } from './anchor-button.definition.js';
+export { BaseAnchor } from './anchor-button.base.js';
+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';
 //# 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,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,QAAQ,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAC/E,OAAO,EAAE,UAAU,IAAI,sBAAsB,EAAE,MAAM,+BAA+B,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"}

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

@@ -0,0 +1,30 @@
+import { FASTElement } from '@microsoft/fast-element';
+/**
+ * The base class used for constructing a fluent-avatar custom element
+ * @public
+ */
+export declare class BaseAvatar extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * The name of the person or entity represented by this Avatar. This should always be provided if it is available.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: name
+     */
+    name?: string | undefined;
+    /**
+     * Provide custom initials rather than one generated via the name
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: name
+     */
+    initials?: string | undefined;
+    constructor();
+}

package/dist/esm/avatar/avatar.base.js

@@ -0,0 +1,25 @@
+import { __decorate } from "tslib";
+import { attr, FASTElement } from '@microsoft/fast-element';
+/**
+ * The base class used for constructing a fluent-avatar custom element
+ * @public
+ */
+export class BaseAvatar extends FASTElement {
+    constructor() {
+        super();
+        /**
+         * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+         *
+         * @internal
+         */
+        this.elementInternals = this.attachInternals();
+        this.elementInternals.role = 'img';
+    }
+}
+__decorate([
+    attr
+], BaseAvatar.prototype, "name", void 0);
+__decorate([
+    attr
+], BaseAvatar.prototype, "initials", void 0);
+//# sourceMappingURL=avatar.base.js.map

package/dist/esm/avatar/avatar.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.base.js","sourceRoot":"","sources":["../../../src/avatar/avatar.base.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE5D;;;GAGG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;IA4BzC;QACE,KAAK,EAAE,CAAC;QA5BV;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAyBjE,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,KAAK,CAAC;IACrC,CAAC;CACF;AAjBQ;IADN,IAAI;wCAC4B;AAU1B;IADN,IAAI;4CACgC"}

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

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

package/dist/esm/avatar/avatar.bench.js

@@ -0,0 +1,10 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './avatar.definition.js';
+definition.define(FluentDesignSystem.registry);
+const itemRenderer = () => {
+    const avatar = document.createElement('fluent-avatar');
+    return avatar;
+};
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';
+//# sourceMappingURL=avatar.bench.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.bench.js","sourceRoot":"","sources":["../../../src/avatar/avatar.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,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}