@fluentui/web-components 3.0.0-beta.9 → 3.0.0-beta.91

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.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"}

package/dist/esm/avatar/avatar.js

@@ -1,83 +1,87 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { attr, FASTElement, nullableNumberConverter } from '@microsoft/fast-element';
+import { __decorate } from "tslib";
+import { attr, nullableNumberConverter, Observable } from '@microsoft/fast-element';
 import { getInitials } from '../utils/get-initials.js';
+import { BaseAvatar } from './avatar.base.js';
 import { AvatarColor, AvatarNamedColor, } from './avatar.options.js';
 /**
- * The base class used for constructing a fluent-avatar custom element
+ * An Avatar Custom HTML Element.
+ * Based on BaseAvatar and includes style and layout specific attributes
+ *
  * @public
  */
-export class Avatar extends FASTElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The color when displaying either an icon or initials.
-         * * neutral (default): gray
-         * * brand: color from the brand palette
-         * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or colorId if provided)
-         * * [AvatarNamedColor]: a specific color from the theme
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: color
-         */
-        this.color = 'neutral';
-    }
+export class Avatar extends BaseAvatar {
     /**
-     * Sets the data-color attribute used for the visual presentation
+     * Handles changes to observable properties
      * @internal
+     * @param source - the source of the change
+     * @param propertyName - the property name being changed
      */
-    generateColor() {
-        var _a, _b;
-        if (!this.color) {
-            return;
+    handleChange(source, propertyName) {
+        switch (propertyName) {
+            case 'color':
+            case 'colorId':
+                this.generateColor();
+                break;
+            default:
+                break;
         }
-        return this.color === AvatarColor.colorful
-            ? Avatar.colors[getHashCode((_b = (_a = this.colorId) !== null && _a !== void 0 ? _a : this.name) !== null && _b !== void 0 ? _b : '') % Avatar.colors.length]
-            : this.color;
     }
     /**
      * Generates and sets the initials for the template
      * @internal
      */
     generateInitials() {
-        var _a, _b;
         if (!this.name && !this.initials) {
             return;
         }
         // size can be undefined since we default it in CSS only
-        const size = (_a = this.size) !== null && _a !== void 0 ? _a : 32;
-        return ((_b = this.initials) !== null && _b !== void 0 ? _b : getInitials(this.name, window.getComputedStyle(this).direction === 'rtl', {
-            firstInitialOnly: size <= 16,
-        }));
+        const size = this.size ?? 32;
+        return (this.initials ??
+            getInitials(this.name, window.getComputedStyle(this).direction === 'rtl', {
+                firstInitialOnly: size <= 16,
+            }));
+    }
+    /**
+     * Sets the data-color attribute used for the visual presentation
+     * @internal
+     */
+    generateColor() {
+        const colorful = this.color === AvatarColor.colorful;
+        const prev = this.currentColor;
+        this.currentColor =
+            colorful && this.colorId
+                ? this.colorId
+                : colorful
+                    ? Avatar.colors[getHashCode(this.name ?? '') % Avatar.colors.length]
+                    : this.color ?? AvatarColor.neutral;
+        this.setAttribute('data-color', this.currentColor);
+    }
+    /**
+     * An array of the available Avatar named colors
+     */
+    static { this.colors = Object.values(AvatarNamedColor); }
+    connectedCallback() {
+        super.connectedCallback();
+        Observable.getNotifier(this).subscribe(this);
+        this.generateColor();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        Observable.getNotifier(this).unsubscribe(this);
     }
 }
-/**
- * An array of the available Avatar named colors
- */
-Avatar.colors = Object.values(AvatarNamedColor);
-__decorate([
-    attr
-], Avatar.prototype, "name", void 0);
 __decorate([
     attr
-], Avatar.prototype, "initials", void 0);
-__decorate([
-    attr({ converter: nullableNumberConverter })
-], Avatar.prototype, "size", void 0);
+], Avatar.prototype, "active", void 0);
 __decorate([
     attr
 ], Avatar.prototype, "shape", void 0);
-__decorate([
-    attr
-], Avatar.prototype, "active", void 0);
 __decorate([
     attr
 ], Avatar.prototype, "appearance", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], Avatar.prototype, "size", void 0);
 __decorate([
     attr
 ], Avatar.prototype, "color", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/avatar/avatar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAGL,WAAW,EACX,gBAAgB,GAGjB,MAAM,qBAAqB,CAAC;AAE7B;;;GAGG;AACH,MAAM,OAAO,MAAO,SAAQ,WAAW;IAAvC;;QAuEE;;;;;;;;;;WAUG;QAEI,UAAK,GAAiB,SAAS,CAAC;IA+CzC,CAAC;IAtCC;;;OAGG;IACI,aAAa;;QAClB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,OAAO;SACR;QAED,OAAO,IAAI,CAAC,KAAK,KAAK,WAAW,CAAC,QAAQ;YACxC,CAAC,CAAE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,MAAA,MAAA,IAAI,CAAC,OAAO,mCAAI,IAAI,CAAC,IAAI,mCAAI,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAiB;YACrG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;IACjB,CAAC;IAED;;;OAGG;IACI,gBAAgB;;QACrB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAChC,OAAO;SACR;QAED,wDAAwD;QACxD,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,IAAI,mCAAI,EAAE,CAAC;QAE7B,OAAO,CACL,MAAA,IAAI,CAAC,QAAQ,mCACb,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,gBAAgB,CAAE,IAA+B,CAAC,CAAC,SAAS,KAAK,KAAK,EAAE;YACpG,gBAAgB,EAAE,IAAI,IAAI,EAAE;SAC7B,CAAC,CACH,CAAC;IACJ,CAAC;;AAED;;GAEG;AACW,aAAM,GAAG,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAxHvD;IADC,IAAI;oCAC4B;AAUjC;IADC,IAAI;wCACgC;AAiBrC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;oCACR;AAUrC;IADC,IAAI;qCACkC;AAavC;IADC,IAAI;sCACoC;AAUzC;IADC,IAAI;0CAC4C;AAcjD;IADC,IAAI;qCACkC;AAOvC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;uCACc;AA0ChD,2BAA2B;AAC3B,MAAM,WAAW,GAAG,CAAC,GAAW,EAAU,EAAE;IAC1C,IAAI,QAAQ,GAAG,CAAC,CAAC;IACjB,KAAK,IAAI,GAAG,GAAW,GAAG,CAAC,MAAM,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,GAAG,EAAE,EAAE;QACtD,MAAM,EAAE,GAAG,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;QAC/B,MAAM,KAAK,GAAG,GAAG,GAAG,CAAC,CAAC;QACtB,QAAQ,IAAI,CAAC,EAAE,IAAI,KAAK,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,iCAAiC;KACnF;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC"}
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/avatar/avatar.ts"],"names":[],"mappings":"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"}

package/dist/esm/avatar/avatar.styles.js

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import { borderRadiusCircular, borderRadiusLarge, borderRadiusMedium, borderRadiusSmall, borderRadiusXLarge, colorBrandBackgroundStatic, colorNeutralBackground1, colorNeutralBackground6, colorNeutralForeground3, colorNeutralForegroundStaticInverted, colorPaletteAnchorBackground2, colorPaletteAnchorForeground2, colorPaletteBeigeBackground2, colorPaletteBeigeForeground2, colorPaletteBlueBackground2, colorPaletteBlueForeground2, colorPaletteBrassBackground2, colorPaletteBrassForeground2, colorPaletteBrownBackground2, colorPaletteBrownForeground2, colorPaletteCornflowerBackground2, colorPaletteCornflowerForeground2, colorPaletteCranberryBackground2, colorPaletteCranberryForeground2, colorPaletteDarkGreenBackground2, colorPaletteDarkGreenForeground2, colorPaletteDarkRedBackground2, colorPaletteDarkRedForeground2, colorPaletteForestBackground2, colorPaletteForestForeground2, colorPaletteGoldBackground2, colorPaletteGoldForeground2, colorPaletteGrapeBackground2, colorPaletteGrapeForeground2, colorPaletteLavenderBackground2, colorPaletteLavenderForeground2, colorPaletteLightTealBackground2, colorPaletteLightTealForeground2, colorPaletteLilacBackground2, colorPaletteLilacForeground2, colorPaletteMagentaBackground2, colorPaletteMagentaForeground2, colorPaletteMarigoldBackground2, colorPaletteMarigoldForeground2, colorPaletteMinkBackground2, colorPaletteMinkForeground2, colorPaletteNavyBackground2, colorPaletteNavyForeground2, colorPalettePeachBackground2, colorPalettePeachForeground2, colorPalettePinkBackground2, colorPalettePinkForeground2, colorPalettePlatinumBackground2, colorPalettePlatinumForeground2, colorPalettePlumBackground2, colorPalettePlumForeground2, colorPalettePumpkinBackground2, colorPalettePumpkinForeground2, colorPalettePurpleBackground2, colorPalettePurpleForeground2, colorPaletteRedBackground2, colorPaletteRedForeground2, colorPaletteRoyalBlueBackground2, colorPaletteRoyalBlueForeground2, colorPaletteSeafoamBackground2, colorPaletteSeafoamForeground2, colorPaletteSteelBackground2, colorPaletteSteelForeground2, colorPaletteTealBackground2, colorPaletteTealForeground2, curveAccelerateMax, curveAccelerateMid, curveAccelerateMin, curveDecelerateMax, curveDecelerateMid, curveDecelerateMin, curveEasyEase, curveEasyEaseMax, curveLinear, durationFaster, durationSlower, durationUltraSlow, fontFamilyBase, fontSizeBase100, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontWeightRegular, fontWeightSemibold, shadow16, shadow28, shadow4, shadow8, strokeWidthThick, strokeWidthThicker, strokeWidthThickest, strokeWidthThin, } from '../theme/design-tokens.js';
 const animations = {
     fastOutSlowInMax: curveDecelerateMax,
@@ -23,12 +23,12 @@ export const styles = css `
     flex-shrink: 0;
     width: 32px;
     height: 32px;
-    font-family: var(${fontFamilyBase});
-    font-weight: var(${fontWeightSemibold});
-    font-size: var(${fontSizeBase300});
-    border-radius: var(${borderRadiusCircular});
-    color: var(${colorNeutralForeground3});
-    background-color: var(${colorNeutralBackground6});
+    font-family: ${fontFamilyBase};
+    font-weight: ${fontWeightSemibold};
+    font-size: ${fontSizeBase300};
+    border-radius: ${borderRadiusCircular};
+    color: ${colorNeutralForeground3};
+    background-color: ${colorNeutralBackground6};
     contain: layout style;
   }
 
@@ -43,14 +43,14 @@ export const styles = css `
     box-sizing: border-box;
     width: 100%;
     height: 100%;
-    border-radius: var(${borderRadiusCircular});
+    border-radius: ${borderRadiusCircular};
   }
 
   ::slotted([slot='badge']) {
     position: absolute;
     bottom: 0;
     right: 0;
-    box-shadow: 0 0 0 var(${strokeWidthThin}) var(${colorNeutralBackground1});
+    box-shadow: 0 0 0 ${strokeWidthThin}) ${colorNeutralBackground1};
   }
 
   :host([size='64']) ::slotted([slot='badge']),
@@ -58,14 +58,14 @@ export const styles = css `
   :host([size='96']) ::slotted([slot='badge']),
   :host([size='120']) ::slotted([slot='badge']),
   :host([size='128']) ::slotted([slot='badge']) {
-    box-shadow: 0 0 0 var(${strokeWidthThick}) var(${colorNeutralBackground1});
+    box-shadow: 0 0 0 ${strokeWidthThick}) ${colorNeutralBackground1};
   }
 
   :host([size='16']),
   :host([size='20']),
   :host([size='24']) {
-    font-size: var(${fontSizeBase100});
-    font-weight: var(${fontWeightRegular});
+    font-size: ${fontSizeBase100};
+    font-weight: ${fontWeightRegular};
   }
 
   :host([size='16']) {
@@ -102,7 +102,7 @@ export const styles = css `
   :host([size='28']) {
     width: 28px;
     height: 28px;
-    font-size: var(${fontSizeBase200});
+    font-size: ${fontSizeBase200};
   }
 
   :host([size='36']) {
@@ -117,7 +117,7 @@ export const styles = css `
 
   :host([size='48']),
   :host([size='56']) {
-    font-size: var(${fontSizeBase400});
+    font-size: ${fontSizeBase400};
   }
 
   :host([size='48']) {
@@ -147,7 +147,7 @@ export const styles = css `
   :host([size='64']),
   :host([size='72']),
   :host([size='96']) {
-    font-size: var(${fontSizeBase500});
+    font-size: ${fontSizeBase500};
   }
 
   :host([size='64']) .default-icon,
@@ -187,7 +187,7 @@ export const styles = css `
 
   :host([size='120']),
   :host([size='128']) {
-    font-size: var(${fontSizeBase600});
+    font-size: ${fontSizeBase600};
   }
 
   :host([size='120']) {
@@ -201,186 +201,186 @@ export const styles = css `
   }
 
   :host([shape='square']) {
-    border-radius: var(${borderRadiusMedium});
+    border-radius: ${borderRadiusMedium};
   }
 
   :host([shape='square'][size='20']),
   :host([shape='square'][size='24']) {
-    border-radius: var(${borderRadiusSmall});
+    border-radius: ${borderRadiusSmall};
   }
 
   :host([shape='square'][size='56']),
   :host([shape='square'][size='64']),
   :host([shape='square'][size='72']) {
-    border-radius: var(${borderRadiusLarge});
+    border-radius: ${borderRadiusLarge};
   }
   :host([shape='square'][size='96']),
   :host([shape='square'][size='120']),
   :host([shape='square'][size='128']) {
-    border-radius: var(${borderRadiusXLarge});
+    border-radius: ${borderRadiusXLarge};
   }
 
   :host([data-color='brand']) {
-    color: var(${colorNeutralForegroundStaticInverted});
-    background-color: var(${colorBrandBackgroundStatic});
+    color: ${colorNeutralForegroundStaticInverted};
+    background-color: ${colorBrandBackgroundStatic};
   }
 
   :host([data-color='dark-red']) {
-    color: var(${colorPaletteDarkRedForeground2});
-    background-color: var(${colorPaletteDarkRedBackground2});
+    color: ${colorPaletteDarkRedForeground2};
+    background-color: ${colorPaletteDarkRedBackground2};
   }
 
   :host([data-color='cranberry']) {
-    color: var(${colorPaletteCranberryForeground2});
-    background-color: var(${colorPaletteCranberryBackground2});
+    color: ${colorPaletteCranberryForeground2};
+    background-color: ${colorPaletteCranberryBackground2};
   }
 
   :host([data-color='red']) {
-    color: var(${colorPaletteRedForeground2});
-    background-color: var(${colorPaletteRedBackground2});
+    color: ${colorPaletteRedForeground2};
+    background-color: ${colorPaletteRedBackground2};
   }
 
   :host([data-color='pumpkin']) {
-    color: var(${colorPalettePumpkinForeground2});
-    background-color: var(${colorPalettePumpkinBackground2});
+    color: ${colorPalettePumpkinForeground2};
+    background-color: ${colorPalettePumpkinBackground2};
   }
 
   :host([data-color='peach']) {
-    color: var(${colorPalettePeachForeground2});
-    background-color: var(${colorPalettePeachBackground2});
+    color: ${colorPalettePeachForeground2};
+    background-color: ${colorPalettePeachBackground2};
   }
 
   :host([data-color='marigold']) {
-    color: var(${colorPaletteMarigoldForeground2});
-    background-color: var(${colorPaletteMarigoldBackground2});
+    color: ${colorPaletteMarigoldForeground2};
+    background-color: ${colorPaletteMarigoldBackground2};
   }
 
   :host([data-color='gold']) {
-    color: var(${colorPaletteGoldForeground2});
-    background-color: var(${colorPaletteGoldBackground2});
+    color: ${colorPaletteGoldForeground2};
+    background-color: ${colorPaletteGoldBackground2};
   }
 
   :host([data-color='brass']) {
-    color: var(${colorPaletteBrassForeground2});
-    background-color: var(${colorPaletteBrassBackground2});
+    color: ${colorPaletteBrassForeground2};
+    background-color: ${colorPaletteBrassBackground2};
   }
 
   :host([data-color='brown']) {
-    color: var(${colorPaletteBrownForeground2});
-    background-color: var(${colorPaletteBrownBackground2});
+    color: ${colorPaletteBrownForeground2};
+    background-color: ${colorPaletteBrownBackground2};
   }
 
   :host([data-color='forest']) {
-    color: var(${colorPaletteForestForeground2});
-    background-color: var(${colorPaletteForestBackground2});
+    color: ${colorPaletteForestForeground2};
+    background-color: ${colorPaletteForestBackground2};
   }
 
   :host([data-color='seafoam']) {
-    color: var(${colorPaletteSeafoamForeground2});
-    background-color: var(${colorPaletteSeafoamBackground2});
+    color: ${colorPaletteSeafoamForeground2};
+    background-color: ${colorPaletteSeafoamBackground2};
   }
 
   :host([data-color='dark-green']) {
-    color: var(${colorPaletteDarkGreenForeground2});
-    background-color: var(${colorPaletteDarkGreenBackground2});
+    color: ${colorPaletteDarkGreenForeground2};
+    background-color: ${colorPaletteDarkGreenBackground2};
   }
 
   :host([data-color='light-teal']) {
-    color: var(${colorPaletteLightTealForeground2});
-    background-color: var(${colorPaletteLightTealBackground2});
+    color: ${colorPaletteLightTealForeground2};
+    background-color: ${colorPaletteLightTealBackground2};
   }
 
   :host([data-color='teal']) {
-    color: var(${colorPaletteTealForeground2});
-    background-color: var(${colorPaletteTealBackground2});
+    color: ${colorPaletteTealForeground2};
+    background-color: ${colorPaletteTealBackground2};
   }
 
   :host([data-color='steel']) {
-    color: var(${colorPaletteSteelForeground2});
-    background-color: var(${colorPaletteSteelBackground2});
+    color: ${colorPaletteSteelForeground2};
+    background-color: ${colorPaletteSteelBackground2};
   }
 
   :host([data-color='blue']) {
-    color: var(${colorPaletteBlueForeground2});
-    background-color: var(${colorPaletteBlueBackground2});
+    color: ${colorPaletteBlueForeground2};
+    background-color: ${colorPaletteBlueBackground2};
   }
 
   :host([data-color='royal-blue']) {
-    color: var(${colorPaletteRoyalBlueForeground2});
-    background-color: var(${colorPaletteRoyalBlueBackground2});
+    color: ${colorPaletteRoyalBlueForeground2};
+    background-color: ${colorPaletteRoyalBlueBackground2};
   }
 
   :host([data-color='cornflower']) {
-    color: var(${colorPaletteCornflowerForeground2});
-    background-color: var(${colorPaletteCornflowerBackground2});
+    color: ${colorPaletteCornflowerForeground2};
+    background-color: ${colorPaletteCornflowerBackground2};
   }
 
   :host([data-color='navy']) {
-    color: var(${colorPaletteNavyForeground2});
-    background-color: var(${colorPaletteNavyBackground2});
+    color: ${colorPaletteNavyForeground2};
+    background-color: ${colorPaletteNavyBackground2};
   }
 
   :host([data-color='lavender']) {
-    color: var(${colorPaletteLavenderForeground2});
-    background-color: var(${colorPaletteLavenderBackground2});
+    color: ${colorPaletteLavenderForeground2};
+    background-color: ${colorPaletteLavenderBackground2};
   }
 
   :host([data-color='purple']) {
-    color: var(${colorPalettePurpleForeground2});
-    background-color: var(${colorPalettePurpleBackground2});
+    color: ${colorPalettePurpleForeground2};
+    background-color: ${colorPalettePurpleBackground2};
   }
 
   :host([data-color='grape']) {
-    color: var(${colorPaletteGrapeForeground2});
-    background-color: var(${colorPaletteGrapeBackground2});
+    color: ${colorPaletteGrapeForeground2};
+    background-color: ${colorPaletteGrapeBackground2};
   }
 
   :host([data-color='lilac']) {
-    color: var(${colorPaletteLilacForeground2});
-    background-color: var(${colorPaletteLilacBackground2});
+    color: ${colorPaletteLilacForeground2};
+    background-color: ${colorPaletteLilacBackground2};
   }
 
   :host([data-color='pink']) {
-    color: var(${colorPalettePinkForeground2});
-    background-color: var(${colorPalettePinkBackground2});
+    color: ${colorPalettePinkForeground2};
+    background-color: ${colorPalettePinkBackground2};
   }
 
   :host([data-color='magenta']) {
-    color: var(${colorPaletteMagentaForeground2});
-    background-color: var(${colorPaletteMagentaBackground2});
+    color: ${colorPaletteMagentaForeground2};
+    background-color: ${colorPaletteMagentaBackground2};
   }
 
   :host([data-color='plum']) {
-    color: var(${colorPalettePlumForeground2});
-    background-color: var(${colorPalettePlumBackground2});
+    color: ${colorPalettePlumForeground2};
+    background-color: ${colorPalettePlumBackground2};
   }
 
   :host([data-color='beige']) {
-    color: var(${colorPaletteBeigeForeground2});
-    background-color: var(${colorPaletteBeigeBackground2});
+    color: ${colorPaletteBeigeForeground2};
+    background-color: ${colorPaletteBeigeBackground2};
   }
 
   :host([data-color='mink']) {
-    color: var(${colorPaletteMinkForeground2});
-    background-color: var(${colorPaletteMinkBackground2});
+    color: ${colorPaletteMinkForeground2};
+    background-color: ${colorPaletteMinkBackground2};
   }
 
   :host([data-color='platinum']) {
-    color: var(${colorPalettePlatinumForeground2});
-    background-color: var(${colorPalettePlatinumBackground2});
+    color: ${colorPalettePlatinumForeground2};
+    background-color: ${colorPalettePlatinumBackground2};
   }
 
   :host([data-color='anchor']) {
-    color: var(${colorPaletteAnchorForeground2});
-    background-color: var(${colorPaletteAnchorBackground2});
+    color: ${colorPaletteAnchorForeground2};
+    background-color: ${colorPaletteAnchorBackground2};
   }
 
   :host([active]) {
     /* Work-around for text pixel snapping at the end of the animation */
     transform: perspective(1px);
     transition-property: transform, opacity;
-    transition-duration: var(${durationUltraSlow}), var(${durationFaster});
-    transition-delay: var(${animations.fastEase}), var(${animations.nullEasing});
+    transition-duration: ${durationUltraSlow}, ${durationFaster};
+    transition-delay: ${animations.fastEase}, ${animations.nullEasing};
   }
 
   :host([active])::before {
@@ -392,13 +392,13 @@ export const styles = css `
     right: 0;
     border-radius: inherit;
     transition-property: margin, opacity;
-    transition-duration: var(${durationUltraSlow}), var(${durationSlower});
-    transition-delay: var(${animations.fastEase}), var(${animations.nullEasing});
+    transition-duration: ${durationUltraSlow}), ${durationSlower};
+    transition-delay: ${animations.fastEase}), ${animations.nullEasing});
   }
   :host([active])::before {
-    box-shadow: var(${shadow8});
+    box-shadow: ${shadow8};
     border-style: solid;
-    border-color: var(${colorBrandBackgroundStatic});
+    border-color: ${colorBrandBackgroundStatic};
   }
 
   :host([active][appearance='shadow'])::before {
@@ -407,40 +407,40 @@ export const styles = css `
   }
 
   :host([active]:not([appearance='shadow']))::before {
-    margin: calc(-2 * var(${strokeWidthThick}));
-    border-width: var(${strokeWidthThick});
+    margin: calc(-2 * ${strokeWidthThick});
+    border-width: ${strokeWidthThick};
   }
 
   :host([size='56'][active]:not([appearance='shadow']))::before,
   :host([size='64'][active]:not([appearance='shadow']))::before {
-    margin: calc(-2 * var(${strokeWidthThicker}));
-    border-width: var(${strokeWidthThicker});
+    margin: calc(-2 * ${strokeWidthThicker});
+    border-width: ${strokeWidthThicker};
   }
 
   :host([size='72'][active]:not([appearance='shadow']))::before,
   :host([size='96'][active]:not([appearance='shadow']))::before,
   :host([size='120'][active]:not([appearance='shadow']))::before,
   :host([size='128'][active]:not([appearance='shadow']))::before {
-    margin: calc(-2 * var(${strokeWidthThickest}));
-    border-width: var(${strokeWidthThickest});
+    margin: calc(-2 * ${strokeWidthThickest});
+    border-width: ${strokeWidthThickest};
   }
 
   :host([size='20'][active][appearance])::before,
   :host([size='24'][active][appearance])::before,
   :host([size='28'][active][appearance])::before {
-    box-shadow: var(${shadow4});
+    box-shadow: ${shadow4};
   }
 
   :host([size='56'][active][appearance])::before,
   :host([size='64'][active][appearance])::before {
-    box-shadow: var(${shadow16});
+    box-shadow: ${shadow16};
   }
 
   :host([size='72'][active][appearance])::before,
   :host([size='96'][active][appearance])::before,
   :host([size='120'][active][appearance])::before,
   :host([size='128'][active][appearance])::before {
-    box-shadow: var(${shadow28});
+    box-shadow: ${shadow28};
   }
 
   :host([active][appearance='ring'])::before {
@@ -451,16 +451,16 @@ export const styles = css `
     opacity: 0.8;
     transform: scale(0.875);
     transition-property: transform, opacity;
-    transition-duration: var(${durationUltraSlow}), var(${durationFaster});
-    transition-delay: var(${animations.fastOutSlowInMin}), var(${animations.nullEasing});
+    transition-duration: ${durationUltraSlow}, ${durationFaster};
+    transition-delay: ${animations.fastOutSlowInMin}, ${animations.nullEasing};
   }
 
   :host([active='inactive'])::before {
     margin: 0;
     opacity: 0;
     transition-property: margin, opacity;
-    transition-duration: var(${durationUltraSlow}), var(${durationSlower});
-    transition-delay: var(${animations.fastOutSlowInMin}), var(${animations.nullEasing});
+    transition-duration: ${durationUltraSlow}, ${durationSlower};
+    transition-delay: ${animations.fastOutSlowInMin}, ${animations.nullEasing};
   }
 
   @media screen and (prefers-reduced-motion: reduce) {