@fluentui/web-components 3.0.0-beta.6 → 3.0.0-beta.8

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

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

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

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

package/dist/esm/badge/badge.definition.js

@@ -3,9 +3,6 @@ import { Badge } from './badge.js';
 import { styles } from './badge.styles.js';
 import { template } from './badge.template.js';
 /**
- * The Fluent Badge Element. Implements {@link @microsoft/fast-foundation#Badge },
- * {@link @microsoft/fast-foundation#badgeTemplate}
- *
  *
  * @public
  * @remarks

package/dist/esm/badge/badge.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.definition.js","sourceRoot":"","sources":["../../../src/badge/badge.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC;IACtC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,QAAQ;IAC1C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
+{"version":3,"file":"badge.definition.js","sourceRoot":"","sources":["../../../src/badge/badge.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC;IACtC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,QAAQ;IAC1C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}

package/dist/esm/badge/badge.js

@@ -5,9 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { attr, FASTElement } from '@microsoft/fast-element';
-import { StartEnd } from '@microsoft/fast-foundation/patterns.js';
 // TODO: Remove with https://github.com/microsoft/fast/pull/6797
 import { applyMixins } from '../utils/apply-mixins.js';
+import { StartEnd } from '../patterns/index.js';
 import { BadgeAppearance, BadgeColor } from './badge.options.js';
 /**
  * The base class used for constructing a fluent-badge custom element

package/dist/esm/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/badge/badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAClE,gEAAgE;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,UAAU,EAAyB,MAAM,oBAAoB,CAAC;AAExF;;;GAGG;AACH,MAAM,OAAO,KAAM,SAAQ,WAAW;IAAtC;;QACE;;;;;;WAMG;QAEI,eAAU,GAAoB,eAAe,CAAC,MAAM,CAAC;QAE5D;;;;;;WAMG;QAEI,UAAK,GAAe,UAAU,CAAC,KAAK,CAAC;IAoB9C,CAAC;CAAA;AA9BC;IADC,IAAI;yCACuD;AAU5D;IADC,IAAI;oCACuC;AAS5C;IADC,IAAI;oCACqB;AAU1B;IADC,IAAI;mCACmB;AAW1B,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/badge/badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC5D,gEAAgE;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,UAAU,EAAyB,MAAM,oBAAoB,CAAC;AAExF;;;GAGG;AACH,MAAM,OAAO,KAAM,SAAQ,WAAW;IAAtC;;QACE;;;;;;WAMG;QAEI,eAAU,GAAoB,eAAe,CAAC,MAAM,CAAC;QAE5D;;;;;;WAMG;QAEI,UAAK,GAAe,UAAU,CAAC,KAAK,CAAC;IAoB9C,CAAC;CAAA;AA9BC;IADC,IAAI;yCACuD;AAU5D;IADC,IAAI;oCACuC;AAS5C;IADC,IAAI;oCACqB;AAU1B;IADC,IAAI;mCACmB;AAW1B,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC"}

package/dist/esm/badge/badge.styles.js

@@ -7,17 +7,17 @@ import { borderRadiusMedium, borderRadiusNone, borderRadiusSmall } from '../them
  */
 export const styles = css `
   :host([shape='square']) {
-    border-radius: ${borderRadiusNone};
+    border-radius: var(${borderRadiusNone});
   }
 
   :host([shape='rounded']) {
-    border-radius: ${borderRadiusMedium};
+    border-radius: var(${borderRadiusMedium});
   }
 
   :host([shape='rounded'][size='tiny']),
   :host([shape='rounded'][size='extra-small']),
   :host([shape='rounded'][size='small']) {
-    border-radius: ${borderRadiusSmall};
+    border-radius: var(${borderRadiusSmall});
   }
 
   ${badgeSizeStyles}

package/dist/esm/badge/badge.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.styles.js","sourceRoot":"","sources":["../../../src/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,eAAe,GAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACpG,oCAAoC;AACpC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;qBAEJ,gBAAgB;;;;qBAIhB,kBAAkB;;;;;;qBAMlB,iBAAiB;;;IAGlC,eAAe;IACf,iBAAiB;IACjB,gBAAgB;IAChB,kBAAkB;IAClB,eAAe;IACf,eAAe;CAClB,CAAC"}
+{"version":3,"file":"badge.styles.js","sourceRoot":"","sources":["../../../src/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,eAAe,GAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACpG,oCAAoC;AACpC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;yBAEA,gBAAgB;;;;yBAIhB,kBAAkB;;;;;;yBAMlB,iBAAiB;;;IAGtC,eAAe;IACf,iBAAiB;IACjB,gBAAgB;IAChB,kBAAkB;IAClB,eAAe;IACf,eAAe;CAClB,CAAC"}

package/dist/esm/badge/badge.template.js

@@ -1,6 +1,6 @@
 import { html } from '@microsoft/fast-element';
-import { endSlotTemplate, startSlotTemplate } from '@microsoft/fast-foundation/patterns.js';
-import { staticallyCompose } from '@microsoft/fast-foundation/utilities.js';
+import { endSlotTemplate, startSlotTemplate } from '../patterns/index.js';
+import { staticallyCompose } from '../utils/template-helpers.js';
 /**
  * The template for the Badge component.
  * @public

package/dist/esm/badge/badge.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.template.js","sourceRoot":"","sources":["../../../src/badge/badge.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAC5F,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAI5E;;;GAGG;AACH,MAAM,UAAU,aAAa,CAAkB,UAAwB,EAAE;IACvE,OAAO,IAAI,CAAG;MACV,iBAAiB,CAAC,OAAO,CAAC;YACpB,iBAAiB,CAAC,OAAO,CAAC,cAAc,CAAC;MAC/C,eAAe,CAAC,OAAO,CAAC;GAC3B,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAA+B,aAAa,EAAE,CAAC"}
+{"version":3,"file":"badge.template.js","sourceRoot":"","sources":["../../../src/badge/badge.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAIjE;;;GAGG;AACH,MAAM,UAAU,aAAa,CAAkB,UAAwB,EAAE;IACvE,OAAO,IAAI,CAAG;MACV,iBAAiB,CAAC,OAAO,CAAC;YACpB,iBAAiB,CAAC,OAAO,CAAC,cAAc,CAAC;MAC/C,eAAe,CAAC,OAAO,CAAC;GAC3B,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAA+B,aAAa,EAAE,CAAC"}

package/dist/esm/button/button.definition.js

@@ -3,9 +3,6 @@ import { Button } from './button.js';
 import { styles } from './button.styles.js';
 import { template } from './button.template.js';
 /**
- * The Fluent Button Element. Implements {@link @microsoft/fast-foundation#Button },
- * {@link @microsoft/fast-foundation#buttonTemplate}
- *
  * @public
  * @remarks
  * HTML Element: \<fluent-button\>

package/dist/esm/button/button.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.definition.js","sourceRoot":"","sources":["../../../src/button/button.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC;IACvC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,SAAS;IAC3C,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC"}
+{"version":3,"file":"button.definition.js","sourceRoot":"","sources":["../../../src/button/button.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC;IACvC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,SAAS;IAC3C,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC"}

package/dist/esm/button/button.form-associated.js

@@ -0,0 +1,14 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { FormAssociated } from '../form-associated/form-associated.js';
+class _Button extends FASTElement {
+}
+/**
+ * @beta
+ */
+export class FormAssociatedButton extends FormAssociated(_Button) {
+    constructor() {
+        super(...arguments);
+        this.proxy = document.createElement('input');
+    }
+}
+//# sourceMappingURL=button.form-associated.js.map

package/dist/esm/button/button.form-associated.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.form-associated.js","sourceRoot":"","sources":["../../../src/button/button.form-associated.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAEvE,MAAM,OAAQ,SAAQ,WAAW;CAAG;AAIpC;;GAEG;AACH,MAAM,OAAO,oBAAqB,SAAQ,cAAc,CAAC,OAAO,CAAC;IAAjE;;QACE,UAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC1C,CAAC;CAAA"}