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

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

@@ -2,6 +2,7 @@ import { css } from '@microsoft/fast-element';
 import { styles as ButtonStyles } from '../button/button.styles.js';
 import { colorBrandBackgroundHover, colorBrandBackgroundPressed, colorBrandBackgroundSelected, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackground1Selected, colorNeutralForeground1, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2BrandSelected, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForeground2Selected, colorNeutralForegroundOnBrand, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorSubtleBackgroundHover, colorSubtleBackgroundPressed, colorSubtleBackgroundSelected, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentBackgroundSelected, strokeWidthThin, } from '../theme/design-tokens.js';
 import { forcedColorsStylesheetBehavior } from '../utils/behaviors/match-media-stylesheet-behavior.js';
+import { outlineState, pressedState, primaryState, subtleState, transparentState } from '../styles/states/index.js';
 /**
  * The styles for the ToggleButton component.
  *
@@ -12,86 +13,86 @@ import { forcedColorsStylesheetBehavior } from '../utils/behaviors/match-media-s
 export const styles = css `
   ${ButtonStyles}
 
-  :host([aria-pressed='true']) {
+  :host(${pressedState}) {
     border-color: ${colorNeutralStroke1};
     background-color: ${colorNeutralBackground1Selected};
     color: ${colorNeutralForeground1};
     border-width: ${strokeWidthThin};
   }
 
-  :host([aria-pressed='true']:hover) {
+  :host(${pressedState}:hover) {
     border-color: ${colorNeutralStroke1Hover};
     background-color: ${colorNeutralBackground1Hover};
   }
 
-  :host([aria-pressed='true']:active) {
+  :host(${pressedState}:active) {
     border-color: ${colorNeutralStroke1Pressed};
     background-color: ${colorNeutralBackground1Pressed};
   }
 
-  :host([aria-pressed='true'][appearance='primary']) {
+  :host(${pressedState}${primaryState}) {
     border-color: transparent;
     background-color: ${colorBrandBackgroundSelected};
     color: ${colorNeutralForegroundOnBrand};
   }
 
-  :host([aria-pressed='true'][appearance='primary']:hover) {
+  :host(${pressedState}${primaryState}:hover) {
     background-color: ${colorBrandBackgroundHover};
   }
 
-  :host([aria-pressed='true'][appearance='primary']:active) {
+  :host(${pressedState}${primaryState}:active) {
     background-color: ${colorBrandBackgroundPressed};
   }
 
-  :host([aria-pressed='true'][appearance='subtle']) {
+  :host(${pressedState}${subtleState}) {
     border-color: transparent;
     background-color: ${colorSubtleBackgroundSelected};
     color: ${colorNeutralForeground2Selected};
   }
 
-  :host([aria-pressed='true'][appearance='subtle']:hover) {
+  :host(${pressedState}${subtleState}:hover) {
     background-color: ${colorSubtleBackgroundHover};
     color: ${colorNeutralForeground2Hover};
   }
 
-  :host([aria-pressed='true'][appearance='subtle']:active) {
+  :host(${pressedState}${subtleState}:active) {
     background-color: ${colorSubtleBackgroundPressed};
     color: ${colorNeutralForeground2Pressed};
   }
 
-  :host([aria-pressed='true'][appearance='outline']),
-  :host([aria-pressed='true'][appearance='transparent']) {
+  :host(${pressedState}${outlineState}),
+  :host(${pressedState}${transparentState}) {
     background-color: ${colorTransparentBackgroundSelected};
   }
 
-  :host([aria-pressed='true'][appearance='outline']:hover),
-  :host([aria-pressed='true'][appearance='transparent']:hover) {
+  :host(${pressedState}${outlineState}:hover),
+  :host(${pressedState}${transparentState}:hover) {
     background-color: ${colorTransparentBackgroundHover};
   }
 
-  :host([aria-pressed='true'][appearance='outline']:active),
-  :host([aria-pressed='true'][appearance='transparent']:active) {
+  :host(${pressedState}${outlineState}:active),
+  :host(${pressedState}${transparentState}:active) {
     background-color: ${colorTransparentBackgroundPressed};
   }
 
-  :host([aria-pressed='true'][appearance='transparent']) {
+  :host(${pressedState}${transparentState}) {
     border-color: transparent;
     color: ${colorNeutralForeground2BrandSelected};
   }
 
-  :host([aria-pressed='true'][appearance='transparent']:hover) {
+  :host(${pressedState}${transparentState}:hover) {
     color: ${colorNeutralForeground2BrandHover};
   }
 
-  :host([aria-pressed='true'][appearance='transparent']:active) {
+  :host(${pressedState}${transparentState}:active) {
     color: ${colorNeutralForeground2BrandPressed};
   }
 `.withBehaviors(forcedColorsStylesheetBehavior(css `
-    :host([aria-pressed='true']),
-    :host([aria-pressed='true'][appearance='primary']),
-    :host([aria-pressed='true'][appearance='subtle']),
-    :host([aria-pressed='true'][appearance='outline']),
-    :host([aria-pressed='true'][appearance='transparent']) {
+    :host(${pressedState}),
+    :host(${pressedState}${primaryState}),
+    :host(${pressedState}${subtleState}),
+    :host(${pressedState}${outlineState}),
+    :host(${pressedState}${transparentState}) {
       background: SelectedItem;
       color: SelectedItemText;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.styles.js","sourceRoot":"","sources":["../../../src/toggle-button/toggle-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EACL,yBAAyB,EACzB,2BAA2B,EAC3B,4BAA4B,EAC5B,4BAA4B,EAC5B,8BAA8B,EAC9B,+BAA+B,EAC/B,uBAAuB,EACvB,iCAAiC,EACjC,mCAAmC,EACnC,oCAAoC,EACpC,4BAA4B,EAC5B,8BAA8B,EAC9B,+BAA+B,EAC/B,6BAA6B,EAC7B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,0BAA0B,EAC1B,4BAA4B,EAC5B,6BAA6B,EAC7B,+BAA+B,EAC/B,iCAAiC,EACjC,kCAAkC,EAClC,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,8BAA8B,EAAE,MAAM,uDAAuD,CAAC;AAEvG;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,YAAY;;;oBAGI,mBAAmB;wBACf,+BAA+B;aAC1C,uBAAuB;oBAChB,eAAe;;;;oBAIf,wBAAwB;wBACpB,4BAA4B;;;;oBAIhC,0BAA0B;wBACtB,8BAA8B;;;;;wBAK9B,4BAA4B;aACvC,6BAA6B;;;;wBAIlB,yBAAyB;;;;wBAIzB,2BAA2B;;;;;wBAK3B,6BAA6B;aACxC,+BAA+B;;;;wBAIpB,0BAA0B;aACrC,4BAA4B;;;;wBAIjB,4BAA4B;aACvC,8BAA8B;;;;;wBAKnB,kCAAkC;;;;;wBAKlC,+BAA+B;;;;;wBAK/B,iCAAiC;;;;;aAK5C,oCAAoC;;;;aAIpC,iCAAiC;;;;aAIjC,mCAAmC;;CAE/C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;GASjC,CAAC,CACH,CAAC"}
+{"version":3,"file":"toggle-button.styles.js","sourceRoot":"","sources":["../../../src/toggle-button/toggle-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EACL,yBAAyB,EACzB,2BAA2B,EAC3B,4BAA4B,EAC5B,4BAA4B,EAC5B,8BAA8B,EAC9B,+BAA+B,EAC/B,uBAAuB,EACvB,iCAAiC,EACjC,mCAAmC,EACnC,oCAAoC,EACpC,4BAA4B,EAC5B,8BAA8B,EAC9B,+BAA+B,EAC/B,6BAA6B,EAC7B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,0BAA0B,EAC1B,4BAA4B,EAC5B,6BAA6B,EAC7B,+BAA+B,EAC/B,iCAAiC,EACjC,kCAAkC,EAClC,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,8BAA8B,EAAE,MAAM,uDAAuD,CAAC;AACvG,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAEpH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,YAAY;;UAEN,YAAY;oBACF,mBAAmB;wBACf,+BAA+B;aAC1C,uBAAuB;oBAChB,eAAe;;;UAGzB,YAAY;oBACF,wBAAwB;wBACpB,4BAA4B;;;UAG1C,YAAY;oBACF,0BAA0B;wBACtB,8BAA8B;;;UAG5C,YAAY,GAAG,YAAY;;wBAEb,4BAA4B;aACvC,6BAA6B;;;UAGhC,YAAY,GAAG,YAAY;wBACb,yBAAyB;;;UAGvC,YAAY,GAAG,YAAY;wBACb,2BAA2B;;;UAGzC,YAAY,GAAG,WAAW;;wBAEZ,6BAA6B;aACxC,+BAA+B;;;UAGlC,YAAY,GAAG,WAAW;wBACZ,0BAA0B;aACrC,4BAA4B;;;UAG/B,YAAY,GAAG,WAAW;wBACZ,4BAA4B;aACvC,8BAA8B;;;UAGjC,YAAY,GAAG,YAAY;UAC3B,YAAY,GAAG,gBAAgB;wBACjB,kCAAkC;;;UAGhD,YAAY,GAAG,YAAY;UAC3B,YAAY,GAAG,gBAAgB;wBACjB,+BAA+B;;;UAG7C,YAAY,GAAG,YAAY;UAC3B,YAAY,GAAG,gBAAgB;wBACjB,iCAAiC;;;UAG/C,YAAY,GAAG,gBAAgB;;aAE5B,oCAAoC;;;UAGvC,YAAY,GAAG,gBAAgB;aAC5B,iCAAiC;;;UAGpC,YAAY,GAAG,gBAAgB;aAC5B,mCAAmC;;CAE/C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;YACxB,YAAY;YACZ,YAAY,GAAG,YAAY;YAC3B,YAAY,GAAG,WAAW;YAC1B,YAAY,GAAG,YAAY;YAC3B,YAAY,GAAG,gBAAgB;;;;GAIxC,CAAC,CACH,CAAC"}

package/dist/web-components.d.ts

@@ -247,6 +247,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.
      *
@@ -255,6 +261,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.
      *
@@ -263,6 +275,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
      *
@@ -271,6 +289,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;
 }
 
 /**
@@ -290,7 +314,6 @@ export declare const AnchorButtonAppearance: {
     readonly primary: "primary";
     readonly outline: "outline";
     readonly subtle: "subtle";
-    readonly secondary: "secondary";
     readonly transparent: "transparent";
 };
 
@@ -654,6 +677,12 @@ export declare const AvatarTemplate: ElementViewTemplate<Avatar>;
  * @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.
      *
@@ -662,6 +691,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.
      *
@@ -670,6 +705,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.
      *
@@ -678,6 +719,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.
      *
@@ -686,6 +733,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;
 }
 
 /**
@@ -798,6 +851,11 @@ export declare const BadgeTemplate: ElementViewTemplate<Badge>;
  * @public
  */
 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.
      *
@@ -898,15 +956,21 @@ 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
@@ -1344,6 +1408,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
@@ -1389,7 +1459,7 @@ export declare class Button extends FASTElement {
      *
      * @internal
      */
-    protected elementInternals: ElementInternals;
+    elementInternals: ElementInternals;
     /**
      * The associated form element.
      *
@@ -1477,6 +1547,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.
      *
@@ -1500,6 +1576,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.
      *
@@ -1508,6 +1590,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
@@ -1606,7 +1694,6 @@ export declare const ButtonAppearance: {
     readonly primary: "primary";
     readonly outline: "outline";
     readonly subtle: "subtle";
-    readonly secondary: "secondary";
     readonly transparent: "transparent";
 };
 
@@ -3905,11 +3992,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";
 };
 
@@ -3978,6 +4060,12 @@ declare type ConstructableFormAssociated = Constructable<HTMLElement & FASTEleme
  * @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.
      *
@@ -3986,6 +4074,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.
      *
@@ -3994,6 +4088,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.
      *
@@ -4002,6 +4102,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.
      *
@@ -4010,6 +4116,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.
      *
@@ -4044,6 +4156,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
@@ -5527,7 +5645,6 @@ export declare const MenuButtonAppearance: {
     readonly primary: "primary";
     readonly outline: "outline";
     readonly subtle: "subtle";
-    readonly secondary: "secondary";
     readonly transparent: "transparent";
 };
 
@@ -7852,7 +7969,6 @@ export declare const ToggleButtonAppearance: {
     readonly primary: "primary";
     readonly outline: "outline";
     readonly subtle: "subtle";
-    readonly secondary: "secondary";
     readonly transparent: "transparent";
 };