@fluentui/web-components 3.0.0-beta.27 → 3.0.0-beta.29

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

@@ -1,7 +1,9 @@
 import { __decorate } from "tslib";
-import { attr, FASTElement, observable } from '@microsoft/fast-element';
-import { ARIAGlobalStatesAndProperties, StartEnd } from '../patterns/index.js';
+import { attr, FASTElement, Observable } from '@microsoft/fast-element';
+import { keyEnter } from '@microsoft/fast-web-utilities';
+import { StartEnd } from '../patterns/index.js';
 import { applyMixins } from '../utils/apply-mixins.js';
+import { AnchorAttributes, } from './anchor-button.options.js';
 /**
  * An Anchor Custom HTML Element.
  * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
@@ -14,100 +16,131 @@ import { applyMixins } from '../utils/apply-mixins.js';
  *
  * @public
  */
-export class AnchorButton extends FASTElement {
+export class BaseAnchor extends FASTElement {
     constructor() {
-        super(...arguments);
-        /**
-         * The anchor button has an icon only, no text content
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: icon-only
-         */
-        this.iconOnly = false;
-        /**
-         * The anchor button is disabled
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: disabled-focusable
-         */
-        this.disabled = false;
+        super();
         /**
-         * The anchor button is disabled but focusable
+         * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
          *
-         * @public
-         * @remarks
-         * HTML Attribute: disabled-focusable
+         * @internal
          */
-        this.disabledFocusable = false;
+        this.elementInternals = this.attachInternals();
         /**
-         * Prevents disabledFocusable click events
+         * The proxy anchor element
+         * @internal
          */
-        this.handleDisabledFocusableClick = (e) => {
-            if ((e && this.disabled) || this.disabledFocusable) {
-                e.stopImmediatePropagation();
-                return;
-            }
-        };
+        this.internalProxyAnchor = this.createProxyElement();
+        this.elementInternals.role = 'link';
     }
-    disabledChanged(prev, next) {
-        if (this.disabled) {
-            this.setAttribute('aria-disabled', 'true');
-            this.setAttribute('tabindex', '-1');
-        }
-        else {
-            this.removeAttribute('aria-disabled');
-            this.removeAttribute('tabindex');
+    connectedCallback() {
+        super.connectedCallback();
+        Observable.getNotifier(this).subscribe(this);
+        Object.keys(this.$fastController.definition.attributeLookup).forEach(key => {
+            this.handleChange(this, key);
+        });
+        this.append(this.internalProxyAnchor);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        Observable.getNotifier(this).unsubscribe(this);
+    }
+    /**
+     * Handles changes to observable properties
+     * @internal
+     * @param source - the source of the change
+     * @param propertyName - the property name being changed
+     */
+    handleChange(source, propertyName) {
+        var _a;
+        if (propertyName in AnchorAttributes) {
+            const attribute = (_a = this.$fastController.definition.attributeLookup[propertyName]) === null || _a === void 0 ? void 0 : _a.attribute;
+            if (attribute) {
+                this.handleProxyAttributeChange(attribute, this[propertyName]);
+            }
         }
     }
-    disabledFocusableChanged(prev, next) {
-        if (!this.$fastController.isConnected) {
+    /**
+     * Handles the anchor click event.
+     *
+     * @param e - The event object
+     * @internal
+     */
+    clickHandler() {
+        this.internalProxyAnchor.click();
+        return true;
+    }
+    /**
+     * Handles keypress events for the anchor.
+     *
+     * @param e - the keyboard event
+     * @returns - the return value of the click handler
+     * @public
+     */
+    keypressHandler(e) {
+        if (e.key === keyEnter) {
+            this.internalProxyAnchor.click();
             return;
         }
-        if (this.disabledFocusable) {
-            this.setAttribute('aria-disabled', 'true');
+        return true;
+    }
+    /**
+     * A method for updating proxy attributes when attributes have changed
+     * @internal
+     * @param attribute - an attribute to set/remove
+     * @param value - the value of the attribute
+     */
+    handleProxyAttributeChange(attribute, value) {
+        if (value) {
+            this.internalProxyAnchor.setAttribute(attribute, value);
         }
         else {
-            this.removeAttribute('aria-disabled');
+            this.internalProxyAnchor.removeAttribute(attribute);
         }
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('click', this.handleDisabledFocusableClick);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener('click', this.handleDisabledFocusableClick);
+    createProxyElement() {
+        var _a;
+        const proxy = (_a = this.internalProxyAnchor) !== null && _a !== void 0 ? _a : document.createElement('a');
+        proxy.hidden = true;
+        return proxy;
     }
 }
 __decorate([
     attr
-], AnchorButton.prototype, "download", void 0);
+], BaseAnchor.prototype, "download", void 0);
 __decorate([
     attr
-], AnchorButton.prototype, "href", void 0);
+], BaseAnchor.prototype, "href", void 0);
 __decorate([
     attr
-], AnchorButton.prototype, "hreflang", void 0);
+], BaseAnchor.prototype, "hreflang", void 0);
 __decorate([
     attr
-], AnchorButton.prototype, "ping", void 0);
+], BaseAnchor.prototype, "ping", void 0);
 __decorate([
     attr
-], AnchorButton.prototype, "referrerpolicy", void 0);
+], BaseAnchor.prototype, "referrerpolicy", void 0);
 __decorate([
     attr
-], AnchorButton.prototype, "rel", void 0);
+], BaseAnchor.prototype, "rel", void 0);
 __decorate([
     attr
-], AnchorButton.prototype, "target", void 0);
+], BaseAnchor.prototype, "target", void 0);
 __decorate([
     attr
-], AnchorButton.prototype, "type", void 0);
-__decorate([
-    observable
-], AnchorButton.prototype, "defaultSlottedContent", void 0);
+], BaseAnchor.prototype, "type", void 0);
+export class AnchorButton extends BaseAnchor {
+    constructor() {
+        super(...arguments);
+        /**
+         * The anchor button has an icon only, no text content
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: `icon-only`
+         */
+        this.iconOnly = false;
+    }
+}
 __decorate([
     attr
 ], AnchorButton.prototype, "appearance", void 0);
@@ -120,22 +153,5 @@ __decorate([
 __decorate([
     attr({ attribute: 'icon-only', mode: 'boolean' })
 ], AnchorButton.prototype, "iconOnly", void 0);
-__decorate([
-    attr({ mode: 'boolean' })
-], AnchorButton.prototype, "disabled", void 0);
-__decorate([
-    attr({ attribute: 'disabled-focusable', mode: 'boolean' })
-], AnchorButton.prototype, "disabledFocusable", void 0);
-/**
- * Includes ARIA states and properties relating to the ARIA link role
- *
- * @public
- */
-export class DelegatesARIALink {
-}
-__decorate([
-    attr({ attribute: 'aria-expanded' })
-], DelegatesARIALink.prototype, "ariaExpanded", void 0);
-applyMixins(DelegatesARIALink, ARIAGlobalStatesAndProperties);
-applyMixins(AnchorButton, StartEnd, DelegatesARIALink);
+applyMixins(AnchorButton, StartEnd);
 //# sourceMappingURL=anchor-button.js.map

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":"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"}
+{"version":3,"file":"anchor-button.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.ts"],"names":[],"mappings":"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"}

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,263 +1,11 @@
 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')}
-
-  :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;
-  }
-`.withBehaviors(forcedColorsStylesheetBehavior(css `
-    :host([appearance='transparent']:hover) .control {
-      border-color: Highlight;
+export const styles = baseButtonStyles.withBehaviors(forcedColorsStylesheetBehavior(css `
+    :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,gBAAgB,CAAC,aAAa,CAClD,8BAA8B,CAAC,GAAG,CAAA;;;;;GAKjC,CAAC,CACH,CAAC"}

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 => x.clickHandler()}"
+      @keypress="${(x, c) => x.keypressHandler(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,EAAuB,IAAI,EAAgB,MAAM,yBAAyB,CAAC;AAClF,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,CAAC,CAAC,YAAY,EAAE;mBAClB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAsB,CAAC;;QAEhE,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/button/button.styles.js

@@ -2,11 +2,9 @@ import { css } from '@microsoft/fast-element';
 import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
 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';
 /**
- * The styles for the Button component.
- *
- * @public
+ * @internal
  */
-export const styles = css `
+export const baseButtonStyles = css `
   ${display('inline-flex')}
 
   :host {
@@ -215,6 +213,14 @@ export const styles = css `
   :host([appearance='transparent']:hover:active) {
     border-color: transparent;
   }
+`;
+/**
+ * The styles for the Button component.
+ *
+ * @public
+ */
+export const styles = css `
+  ${baseButtonStyles}
 
   :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable])),
   :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable]):hover),
@@ -251,7 +257,12 @@ export const styles = css `
     background-color: ${colorTransparentBackground};
   }
 `.withBehaviors(forcedColorsStylesheetBehavior(css `
-    :host([appearance='transparent']:hover) {
+    :host {
+      background: ButtonFace;
+      color: ButtonText;
+    }
+
+    :host(:is(:hover, :focus-visible)) {
       border-color: Highlight;
     }
   `));