@fluentui/web-components 3.0.0-beta.30 → 3.0.0-beta.31

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Fri, 14 Jun 2024 04:06:00 GMT and should not be manually modified.
+This log was last generated on Tue, 18 Jun 2024 04:05:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-beta.31](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.31)
+
+Tue, 18 Jun 2024 04:05:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.30..@fluentui/web-components_v3.0.0-beta.31)
+
+### Changes
+
+- feat: update button and anchor button to leverage custom states for variants ([PR #31718](https://github.com/microsoft/fluentui/pull/31718) by 13071055+chrisdholt@users.noreply.github.com)
+- update badge to use element internals custom states ([PR #31733](https://github.com/microsoft/fluentui/pull/31733) by 13071055+chrisdholt@users.noreply.github.com)
+
 ## [3.0.0-beta.30](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.30)
 
-Fri, 14 Jun 2024 04:06:00 GMT 
+Fri, 14 Jun 2024 04:06:06 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.29..@fluentui/web-components_v3.0.0-beta.30)
 
 ### Changes

package/dist/dts/anchor-button/anchor-button.d.ts

@@ -20,6 +20,11 @@ export type AnchorOptions = StartEndOptions<AnchorButton>;
  * @public
  */
 export declare class BaseAnchor extends FASTElement {
+    /**
+     * Holds a reference to the platform to manage ctrl+click on Windows and cmd+click on Mac
+     * @internal
+     */
+    private readonly isMac;
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
@@ -120,15 +125,21 @@ export declare class BaseAnchor extends FASTElement {
      * @param e - The event object
      * @internal
      */
-    clickHandler(): boolean;
+    clickHandler(e: PointerEvent): boolean;
     /**
-     * Handles keypress events for the anchor.
+     * Handles keydown events for the anchor.
      *
      * @param e - the keyboard event
      * @returns - the return value of the click handler
      * @public
      */
-    keypressHandler(e: KeyboardEvent): boolean | void;
+    keydownHandler(e: KeyboardEvent): boolean | void;
+    /**
+     * Handles navigation based on input
+     * If the metaKey is pressed, opens the href in a new window, if false, uses the click on the proxy
+     * @internal
+     */
+    private handleNavigation;
     /**
      * A method for updating proxy attributes when attributes have changed
      * @internal
@@ -147,6 +158,12 @@ export declare class AnchorButton extends BaseAnchor {
      * HTML Attribute: `appearance`
      */
     appearance?: AnchorButtonAppearance | undefined;
+    /**
+     * Handles changes to appearance attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    appearanceChanged(prev: AnchorButtonAppearance | undefined, next: AnchorButtonAppearance | undefined): void;
     /**
      * The shape the anchor button should have.
      *
@@ -155,6 +172,12 @@ export declare class AnchorButton extends BaseAnchor {
      * HTML Attribute: `shape`
      */
     shape?: AnchorButtonShape | undefined;
+    /**
+     * Handles changes to shape attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    shapeChanged(prev: AnchorButtonShape | undefined, next: AnchorButtonShape | undefined): void;
     /**
      * The size the anchor button should have.
      *
@@ -163,6 +186,12 @@ export declare class AnchorButton extends BaseAnchor {
      * HTML Attribute: `size`
      */
     size?: AnchorButtonSize;
+    /**
+     * Handles changes to size attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    sizeChanged(prev: AnchorButtonSize | undefined, next: AnchorButtonSize | undefined): void;
     /**
      * The anchor button has an icon only, no text content
      *
@@ -171,6 +200,12 @@ export declare class AnchorButton extends BaseAnchor {
      * HTML Attribute: `icon-only`
      */
     iconOnly: boolean;
+    /**
+     * Handles changes to icon only custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    iconOnlyChanged(prev: boolean, next: boolean): void;
 }
 /**
  * Mark internal because exporting class and interface of the same name

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

@@ -8,7 +8,6 @@ export declare const AnchorButtonAppearance: {
     readonly primary: "primary";
     readonly outline: "outline";
     readonly subtle: "subtle";
-    readonly secondary: "secondary";
     readonly transparent: "transparent";
 };
 /**

package/dist/dts/badge/badge.d.ts

@@ -6,6 +6,12 @@ import { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize } from './badge.opti
  * @public
  */
 export declare class Badge extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
     /**
      * The appearance the badge should have.
      *
@@ -14,6 +20,12 @@ export declare class Badge extends FASTElement {
      * HTML Attribute: appearance
      */
     appearance: BadgeAppearance;
+    /**
+     * Handles changes to appearance attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    appearanceChanged(prev: BadgeAppearance | undefined, next: BadgeAppearance | undefined): void;
     /**
      * The color the badge should have.
      *
@@ -22,6 +34,12 @@ export declare class Badge extends FASTElement {
      * HTML Attribute: color
      */
     color: BadgeColor;
+    /**
+     * Handles changes to color attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    colorChanged(prev: BadgeColor | undefined, next: BadgeColor | undefined): void;
     /**
      * The shape the badge should have.
      *
@@ -30,6 +48,12 @@ export declare class Badge extends FASTElement {
      * HTML Attribute: shape
      */
     shape?: BadgeShape;
+    /**
+     * Handles changes to shape attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    shapeChanged(prev: BadgeShape | undefined, next: BadgeShape | undefined): void;
     /**
      * The size the badge should have.
      *
@@ -38,6 +62,12 @@ export declare class Badge extends FASTElement {
      * HTML Attribute: size
      */
     size?: BadgeSize;
+    /**
+     * Handles changes to size attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    sizeChanged(prev: BadgeSize | undefined, next: BadgeSize | undefined): void;
 }
 /**
  * Mark internal because exporting class and interface of the same name

package/dist/dts/button/button.d.ts

@@ -22,6 +22,12 @@ export declare class Button extends FASTElement {
      * HTML Attribute: `appearance`
      */
     appearance?: ButtonAppearance;
+    /**
+     * Handles changes to appearance attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    appearanceChanged(prev: ButtonAppearance | undefined, next: ButtonAppearance | undefined): void;
     /**
      * Indicates the button should be focused when the page is loaded.
      * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#autofocus | `autofocus`} attribute
@@ -67,7 +73,7 @@ export declare class Button extends FASTElement {
      *
      * @internal
      */
-    protected elementInternals: ElementInternals;
+    elementInternals: ElementInternals;
     /**
      * The associated form element.
      *
@@ -155,6 +161,12 @@ export declare class Button extends FASTElement {
      * HTML Attribute: `icon-only`
      */
     iconOnly: boolean;
+    /**
+     * Handles changes to icon only custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    iconOnlyChanged(prev: boolean, next: boolean): void;
     /**
      * A reference to all associated label elements.
      *
@@ -178,6 +190,12 @@ export declare class Button extends FASTElement {
      * HTML Attribute: `shape`
      */
     shape?: ButtonShape;
+    /**
+     * Handles changes to shape attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    shapeChanged(prev: ButtonShape | undefined, next: ButtonShape | undefined): void;
     /**
      * The size of the button.
      *
@@ -186,6 +204,12 @@ export declare class Button extends FASTElement {
      * HTML Attribute: `size`
      */
     size?: ButtonSize;
+    /**
+     * Handles changes to size attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    sizeChanged(prev: ButtonSize | undefined, next: ButtonSize | undefined): void;
     /**
      * The button type.
      * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type | `type`} attribute

package/dist/dts/button/button.options.d.ts

@@ -9,7 +9,6 @@ export declare const ButtonAppearance: {
     readonly primary: "primary";
     readonly outline: "outline";
     readonly subtle: "subtle";
-    readonly secondary: "secondary";
     readonly transparent: "transparent";
 };
 /**

package/dist/dts/compound-button/compound-button.options.d.ts

@@ -8,11 +8,6 @@ export declare const CompoundButtonAppearance: {
     readonly primary: "primary";
     readonly outline: "outline";
     readonly subtle: "subtle";
-    readonly secondary: "secondary";
-    /**
-     * A Compound Button can be secondary, primary, outline, subtle, transparent
-     * @public
-     */
     readonly transparent: "transparent";
 };
 /**

package/dist/dts/counter-badge/counter-badge.d.ts

@@ -6,6 +6,12 @@ import { CounterBadgeAppearance, CounterBadgeColor, CounterBadgeShape, CounterBa
  * @public
  */
 export declare class CounterBadge extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
     /**
      * The appearance the badge should have.
      *
@@ -14,6 +20,12 @@ export declare class CounterBadge extends FASTElement {
      * HTML Attribute: appearance
      */
     appearance?: CounterBadgeAppearance;
+    /**
+     * Handles changes to appearance attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    appearanceChanged(prev: CounterBadgeAppearance | undefined, next: CounterBadgeAppearance | undefined): void;
     /**
      * The color the badge should have.
      *
@@ -22,6 +34,12 @@ export declare class CounterBadge extends FASTElement {
      * HTML Attribute: color
      */
     color?: CounterBadgeColor;
+    /**
+     * Handles changes to color attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    colorChanged(prev: CounterBadgeColor | undefined, next: CounterBadgeColor | undefined): void;
     /**
      * The shape the badge should have.
      *
@@ -30,6 +48,12 @@ export declare class CounterBadge extends FASTElement {
      * HTML Attribute: shape
      */
     shape?: CounterBadgeShape;
+    /**
+     * Handles changes to shape attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    shapeChanged(prev: CounterBadgeShape | undefined, next: CounterBadgeShape | undefined): void;
     /**
      * The size the badge should have.
      *
@@ -38,6 +62,12 @@ export declare class CounterBadge extends FASTElement {
      * HTML Attribute: size
      */
     size?: CounterBadgeSize;
+    /**
+     * Handles changes to size attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    sizeChanged(prev: CounterBadgeSize | undefined, next: CounterBadgeSize | undefined): void;
     /**
      * The count the badge should have.
      *
@@ -72,6 +102,12 @@ export declare class CounterBadge extends FASTElement {
      * HTML Attribute: dot
      */
     dot: boolean;
+    /**
+     * Handles changes to dot attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    dotChanged(prev: boolean | undefined, next: boolean | undefined): void;
     /**
      * @internal
      * Function to set the count

package/dist/dts/menu-button/menu-button.options.d.ts

@@ -8,7 +8,6 @@ export declare const MenuButtonAppearance: {
     readonly primary: "primary";
     readonly outline: "outline";
     readonly subtle: "subtle";
-    readonly secondary: "secondary";
     readonly transparent: "transparent";
 };
 /**

package/dist/dts/styles/states/index.d.ts

@@ -0,0 +1,110 @@
+/**
+ * Selector for the `ghost` state.
+ * @public
+ */
+export declare const ghostState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `primary` state.
+ * @public
+ */
+export declare const primaryState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `outline` state.
+ * @public
+ */
+export declare const outlineState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `subtle` state.
+ * @public
+ */
+export declare const subtleState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `tint` state.
+ * @public
+ */
+export declare const tintState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `transparent` state.
+ * @public
+ */
+export declare const transparentState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `circular` state.
+ * @public
+ */
+export declare const circularState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `rounded` state.
+ * @public
+ */
+export declare const roundedState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `square` state.
+ * @public
+ */
+export declare const squareState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `tiny` state.
+ * @public
+ */
+export declare const tinyState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `extra-small` state.
+ * @public
+ */
+export declare const extraSmallState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `small` state.
+ * @public
+ */
+export declare const smallState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `large` state.
+ * @public
+ */
+export declare const largeState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `extra-large` state.
+ * @public
+ */
+export declare const extraLargeState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `iconOnly` state.
+ * @public
+ */
+export declare const iconOnlyState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `pressed` state.
+ * @public
+ */
+export declare const pressedState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `danger` state.
+ * @public
+ */
+export declare const dangerState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `important` state.
+ * @public
+ */
+export declare const importantState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `informative` state.
+ * @public
+ */
+export declare const informativeState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `severe` state.
+ * @public
+ */
+export declare const severeState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `success` state.
+ * @public
+ */
+export declare const successState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `warning` state.
+ * @public
+ */
+export declare const warningState: import("@microsoft/fast-element").CSSDirective;

package/dist/dts/toggle-button/toggle-button.options.d.ts

@@ -8,7 +8,6 @@ export declare const ToggleButtonAppearance: {
     readonly primary: "primary";
     readonly outline: "outline";
     readonly subtle: "subtle";
-    readonly secondary: "secondary";
     readonly transparent: "transparent";
 };
 /**

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

@@ -3,6 +3,7 @@ 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 { toggleState } from '../utils/element-internals.js';
 import { AnchorAttributes, } from './anchor-button.options.js';
 /**
  * An Anchor Custom HTML Element.
@@ -19,6 +20,11 @@ import { AnchorAttributes, } from './anchor-button.options.js';
 export class BaseAnchor extends FASTElement {
     constructor() {
         super();
+        /**
+         * Holds a reference to the platform to manage ctrl+click on Windows and cmd+click on Mac
+         * @internal
+         */
+        this.isMac = navigator.userAgent.includes('Mac');
         /**
          * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
          *
@@ -65,24 +71,38 @@ export class BaseAnchor extends FASTElement {
      * @param e - The event object
      * @internal
      */
-    clickHandler() {
-        this.internalProxyAnchor.click();
+    clickHandler(e) {
+        if (this.href) {
+            const newTab = !this.isMac ? e.ctrlKey : e.metaKey;
+            this.handleNavigation(newTab);
+        }
         return true;
     }
     /**
-     * Handles keypress events for the anchor.
+     * Handles keydown 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;
+    keydownHandler(e) {
+        if (this.href) {
+            if (e.key === keyEnter) {
+                const newTab = !this.isMac ? e.ctrlKey : e.metaKey || e.ctrlKey;
+                this.handleNavigation(newTab);
+                return;
+            }
         }
         return true;
     }
+    /**
+     * Handles navigation based on input
+     * If the metaKey is pressed, opens the href in a new window, if false, uses the click on the proxy
+     * @internal
+     */
+    handleNavigation(newTab) {
+        newTab ? window.open(this.href, '_blank') : this.internalProxyAnchor.click();
+    }
     /**
      * A method for updating proxy attributes when attributes have changed
      * @internal
@@ -100,7 +120,8 @@ export class BaseAnchor extends FASTElement {
     createProxyElement() {
         var _a;
         const proxy = (_a = this.internalProxyAnchor) !== null && _a !== void 0 ? _a : document.createElement('a');
-        proxy.hidden = true;
+        proxy.ariaHidden = 'true';
+        proxy.tabIndex = -1;
         return proxy;
     }
 }
@@ -140,6 +161,53 @@ export class AnchorButton extends BaseAnchor {
          */
         this.iconOnly = false;
     }
+    /**
+     * Handles changes to appearance attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    appearanceChanged(prev, next) {
+        if (prev) {
+            toggleState(this.elementInternals, `${prev}`, false);
+        }
+        if (next) {
+            toggleState(this.elementInternals, `${next}`, true);
+        }
+    }
+    /**
+     * Handles changes to shape attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    shapeChanged(prev, next) {
+        if (prev) {
+            toggleState(this.elementInternals, `${prev}`, false);
+        }
+        if (next) {
+            toggleState(this.elementInternals, `${next}`, true);
+        }
+    }
+    /**
+     * Handles changes to size attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    sizeChanged(prev, next) {
+        if (prev) {
+            toggleState(this.elementInternals, `${prev}`, false);
+        }
+        if (next) {
+            toggleState(this.elementInternals, `${next}`, true);
+        }
+    }
+    /**
+     * Handles changes to icon only custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    iconOnlyChanged(prev, next) {
+        toggleState(this.elementInternals, 'icon', !!next);
+    }
 }
 __decorate([
     attr

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,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EACL,gBAAgB,GAKjB,MAAM,4BAA4B,CAAC;AAQpC;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;IAuGzC;QACE,KAAK,EAAE,CAAC;QAvGV;;;;WAIG;QACO,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAEtE;;;WAGG;QACK,wBAAmB,GAAsB,IAAI,CAAC,kBAAkB,EAAE,CAAC;QA8FzE,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,MAAM,CAAC;IACtC,CAAC;IAEM,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QAE7C,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACzE,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAC/B,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IACxC,CAAC;IAEM,oBAAoB;QACzB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IACjD,CAAC;IAED;;;;;OAKG;IACI,YAAY,CAAC,MAAW,EAAE,YAAoB;;QACnD,IAAI,YAAY,IAAI,gBAAgB,EAAE;YACpC,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,eAAe,CAAC,YAAY,CAAC,0CAAE,SAAS,CAAC;YAC3F,IAAI,SAAS,EAAE;gBACb,IAAI,CAAC,0BAA0B,CAAC,SAAS,EAAE,IAAI,CAAC,YAAgC,CAAC,CAAC,CAAC;aACpF;SACF;IACH,CAAC;IAED;;;;;OAKG;IACI,YAAY;QACjB,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,CAAC;QAEjC,OAAO,IAAI,CAAC;IACd,CAAC;IAED;;;;;;OAMG;IACI,eAAe,CAAC,CAAgB;QACrC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;YACtB,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,CAAC;YACjC,OAAO;SACR;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED;;;;;OAKG;IACK,0BAA0B,CAAC,SAAiB,EAAE,KAAyB;QAC7E,IAAI,KAAK,EAAE;YACT,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;SACzD;aAAM;YACL,IAAI,CAAC,mBAAmB,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;SACrD;IACH,CAAC;IAEO,kBAAkB;;QACxB,MAAM,KAAK,GAAG,MAAA,IAAI,CAAC,mBAAmB,mCAAI,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACtE,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;QACpB,OAAO,KAAK,CAAC;IACf,CAAC;CACF;AApKC;IADC,IAAI;4CACoB;AAWzB;IADC,IAAI;wCACgB;AAWrB;IADC,IAAI;4CACoB;AAWzB;IADC,IAAI;wCACgB;AAWrB;IADC,IAAI;kDAC0B;AAW/B;IADC,IAAI;uCACe;AAWpB;IADC,IAAI;0CACwB;AAW7B;IADC,IAAI;wCACgB;AAyFvB,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QA+BE;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;IACnC,CAAC;CAAA;AA/BC;IADC,IAAI;gDACkD;AAUvD;IADC,IAAI;2CACwC;AAU7C;IADC,IAAI;0CAC0B;AAU/B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CACjB;AAWnC,WAAW,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC"}
+{"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.styles.js

@@ -2,7 +2,14 @@ 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 = baseButtonStyles.withBehaviors(forcedColorsStylesheetBehavior(css `
+export const styles = css `
+  ${baseButtonStyles}
+
+  ::slotted(a) {
+    position: absolute;
+    inset: 0;
+  }
+`.withBehaviors(forcedColorsStylesheetBehavior(css `
     :host {
       border-color: LinkText;
       color: LinkText;

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,gBAAgB,CAAC,aAAa,CAClD,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;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.js

@@ -8,8 +8,8 @@ export function anchorTemplate(options = {}) {
     return html `
     <template
       tabindex="0"
-      @click="${x => x.clickHandler()}"
-      @keypress="${(x, c) => x.keypressHandler(c.event)}"
+      @click="${(x, c) => x.clickHandler(c.event)}"
+      @keydown="${(x, c) => x.keydownHandler(c.event)}"
     >
       ${startSlotTemplate(options)}
       <span class="content" part="content">

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,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"}
+{"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,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"}