@fluentui/web-components 3.0.0-rc.3 → 3.0.0-rc.30

package/dist/esm/badge/badge.d.ts

@@ -1,15 +1,20 @@
 import { FASTElement } from '@microsoft/fast-element';
-import { StartEnd } from '../patterns/index.js';
+import { StartEnd } from '../patterns/start-end.js';
 import { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize } from './badge.options.js';
 /**
  * The base class used for constructing a fluent-badge custom element
+ * @tag fluent-badge
+ *
+ * @slot - Content which can be provided inside the badge.
+ * @slot start - Content which can be provided before the badge content.
+ * @slot end - Content which can be provided after the badge content.
+ *
  * @public
  */
 export declare class Badge extends FASTElement {
     /**
      * The appearance the badge should have.
      *
-     * @tag fluent-badge
      *
      * @public
      * @remarks

package/dist/esm/badge/badge.definition-async.d.ts

@@ -0,0 +1,10 @@
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+/**
+ * The async definition configuration for the fluent-badge element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export declare const definition: PartialFASTElementDefinition;

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

@@ -0,0 +1,14 @@
+import { tagName } from './badge.options.js';
+/**
+ * The async definition configuration for the fluent-badge element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export const definition = {
+    name: tagName,
+    templateOptions: 'defer-and-hydrate',
+};
+//# sourceMappingURL=badge.definition-async.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.definition-async.js","sourceRoot":"","sources":["../../../src/badge/badge.definition-async.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAE7C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,eAAe,EAAE,mBAAmB;CACrC,CAAC"}

package/dist/esm/badge/badge.definition.d.ts

@@ -1,8 +1,7 @@
-import { Badge } from './badge.js';
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
 /**
+ * The definition for the `<fluent-badge>` element.
  *
  * @public
- * @remarks
- * HTML Element: \<fluent-badge\>
  */
-export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Badge>;
+export declare const definition: PartialFASTElementDefinition;

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

@@ -1,16 +1,16 @@
 import { FluentDesignSystem } from '../fluent-design-system.js';
-import { Badge } from './badge.js';
+import { tagName } from './badge.options.js';
 import { styles } from './badge.styles.js';
 import { template } from './badge.template.js';
 /**
+ * The definition for the `<fluent-badge>` element.
  *
  * @public
- * @remarks
- * HTML Element: \<fluent-badge\>
  */
-export const definition = Badge.compose({
-    name: `${FluentDesignSystem.prefix}-badge`,
-    template,
+export const definition = {
+    name: tagName,
+    registry: FluentDesignSystem.registry,
     styles,
-});
+    template,
+};
 //# sourceMappingURL=badge.definition.js.map

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;;;;;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"}
+{"version":3,"file":"badge.definition.js","sourceRoot":"","sources":["../../../src/badge/badge.definition.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,kBAAkB,CAAC,QAAQ;IACrC,MAAM;IACN,QAAQ;CACT,CAAC"}

package/dist/esm/badge/badge.js

@@ -1,10 +1,16 @@
 import { __decorate } from "tslib";
 import { attr, FASTElement } from '@microsoft/fast-element';
 import { applyMixins } from '../utils/apply-mixins.js';
-import { StartEnd } from '../patterns/index.js';
+import { StartEnd } from '../patterns/start-end.js';
 import { BadgeAppearance, BadgeColor } from './badge.options.js';
 /**
  * The base class used for constructing a fluent-badge custom element
+ * @tag fluent-badge
+ *
+ * @slot - Content which can be provided inside the badge.
+ * @slot start - Content which can be provided before the badge content.
+ * @slot end - Content which can be provided after the badge content.
+ *
  * @public
  */
 export class Badge extends FASTElement {
@@ -13,7 +19,6 @@ export class Badge extends FASTElement {
         /**
          * The appearance the badge should have.
          *
-         * @tag fluent-badge
          *
          * @public
          * @remarks

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,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;;;;;;;;WAQG;QAEI,eAAU,GAAoB,eAAe,CAAC,MAAM,CAAC;QAE5D;;;;;;WAMG;QAEI,UAAK,GAAe,UAAU,CAAC,KAAK,CAAC;IAqB9C,CAAC;CAAA;AA/BQ;IADN,IAAI;yCACuD;AAUrD;IADN,IAAI;oCACuC;AAUrC;IADN,IAAI;oCACqB;AAUnB;IADN,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,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,UAAU,EAAyB,MAAM,oBAAoB,CAAC;AAExF;;;;;;;;;GASG;AACH,MAAM,OAAO,KAAM,SAAQ,WAAW;IAAtC;;QACE;;;;;;;WAOG;QAEI,eAAU,GAAoB,eAAe,CAAC,MAAM,CAAC;QAE5D;;;;;;WAMG;QAEI,UAAK,GAAe,UAAU,CAAC,KAAK,CAAC;IAqB9C,CAAC;CAAA;AA/BQ;IADN,IAAI;yCACuD;AAUrD;IADN,IAAI;oCACuC;AAUrC;IADN,IAAI;oCACqB;AAUnB;IADN,IAAI;mCACmB;AAW1B,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC"}

package/dist/esm/badge/badge.options.d.ts

@@ -1,8 +1,11 @@
-import type { StartEndOptions } from '../patterns/index.js';
-import type { StaticallyComposableHTML, ValuesOf } from '../utils/index.js';
+import type { StartEndOptions } from '../patterns/start-end.js';
+import type { StaticallyComposableHTML } from '../utils/template-helpers.js';
+import type { ValuesOf } from '../utils/typings.js';
 import type { Badge } from './badge.js';
 /**
- * @internal - marking as internal update when Badge PR for start/end is in
+ * - marking as internal update when Badge PR for start/end is in
+ *
+ * @internal
  */
 export type BadgeOptions = StartEndOptions<Badge> & {
     defaultContent?: StaticallyComposableHTML;
@@ -72,3 +75,9 @@ export declare const BadgeSize: {
  * @public
  */
 export type BadgeSize = ValuesOf<typeof BadgeSize>;
+/**
+ * The tag name for the badge element.
+ *
+ * @public
+ */
+export declare const tagName: "fluent-badge";

package/dist/esm/badge/badge.options.js

@@ -1,3 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
 /**
  * BadgeAppearance constants
  * @public
@@ -43,4 +44,10 @@ export const BadgeSize = {
     large: 'large',
     extraLarge: 'extra-large',
 };
+/**
+ * The tag name for the badge element.
+ *
+ * @public
+ */
+export const tagName = `${FluentDesignSystem.prefix}-badge`;
 //# sourceMappingURL=badge.options.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"badge.options.js","sourceRoot":"","sources":["../../../src/badge/badge.options.ts"],"names":[],"mappings":"AAWA;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;CACJ,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,SAAS,EAAE,WAAW;IACtB,WAAW,EAAE,aAAa;IAC1B,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;CACV,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE,MAAM;IACZ,UAAU,EAAE,aAAa;IACzB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,UAAU,EAAE,aAAa;CACjB,CAAC"}
+{"version":3,"file":"badge.options.js","sourceRoot":"","sources":["../../../src/badge/badge.options.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAYhE;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;CACJ,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,SAAS,EAAE,WAAW;IACtB,WAAW,EAAE,aAAa;IAC1B,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;CACV,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE,MAAM;IACZ,UAAU,EAAE,aAAa;IACzB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,UAAU,EAAE,aAAa;CACjB,CAAC;AAQX;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,kBAAkB,CAAC,MAAM,QAAiB,CAAC"}

package/dist/esm/badge/badge.styles.css

@@ -0,0 +1,266 @@
+:host([shape='square']) {
+  border-radius: var(--borderRadiusNone);
+}
+
+:host([shape='rounded']) {
+  border-radius: var(--borderRadiusMedium);
+}
+
+:host([shape='rounded']:is([size='tiny'], [size='extra-small'], [size='small'])) {
+  border-radius: var(--borderRadiusSmall);
+}
+
+:host([appearance='tint']) {
+  background-color: var(--colorBrandBackground2);
+  color: var(--colorBrandForeground2);
+  border-color: var(--colorBrandStroke2);
+}
+
+:host([appearance='tint'][color='danger']) {
+  background-color: var(--colorPaletteRedBackground1);
+  color: var(--colorPaletteRedForeground1);
+  border-color: var(--colorPaletteRedBorder1);
+}
+
+:host([appearance='tint'][color='important']) {
+  background-color: var(--colorNeutralForeground3);
+  color: var(--colorNeutralBackground1);
+  border-color: var(--colorTransparentStroke);
+}
+
+:host([appearance='tint'][color='informative']) {
+  background-color: var(--colorNeutralBackground4);
+  color: var(--colorNeutralForeground3);
+  border-color: var(--colorNeutralStroke2);
+}
+
+:host([appearance='tint'][color='severe']) {
+  background-color: var(--colorPaletteDarkOrangeBackground1);
+  color: var(--colorPaletteDarkOrangeForeground1);
+  border-color: var(--colorPaletteDarkOrangeBorder1);
+}
+
+:host([appearance='tint'][color='subtle']) {
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground3);
+  border-color: var(--colorNeutralStroke2);
+}
+
+:host([appearance='tint'][color='success']) {
+  background-color: var(--colorPaletteGreenBackground1);
+  color: var(--colorPaletteGreenForeground1);
+  border-color: var(--colorPaletteGreenBorder2);
+}
+
+:host([appearance='tint'][color='warning']) {
+  background-color: var(--colorPaletteYellowBackground1);
+  color: var(--colorPaletteYellowForeground2);
+  border-color: var(--colorPaletteYellowBorder1);
+}
+
+:host([appearance='outline']) {
+  border-color: currentColor;
+  color: var(--colorBrandForeground1);
+  background-color: initial;
+}
+
+:host([appearance='outline'][color='danger']) {
+  color: var(--colorPaletteRedForeground3);
+}
+
+:host([appearance='outline'][color='important']) {
+  color: var(--colorNeutralForeground3);
+  border-color: var(--colorNeutralStrokeAccessible);
+}
+
+:host([appearance='outline'][color='informative']) {
+  color: var(--colorNeutralForeground3);
+  border-color: var(--colorNeutralStroke2);
+}
+
+:host([appearance='outline'][color='severe']) {
+  color: var(--colorPaletteDarkOrangeForeground3);
+}
+
+:host([appearance='outline'][color='subtle']) {
+  color: var(--colorNeutralForegroundStaticInverted);
+}
+
+:host([appearance='outline'][color='success']) {
+  color: var(--colorPaletteGreenForeground2);
+}
+
+:host([appearance='outline'][color='warning']) {
+  color: var(--colorPaletteYellowForeground2);
+}
+
+:host([appearance='ghost']) {
+  color: var(--colorBrandForeground1);
+  background-color: initial;
+}
+
+:host([appearance='ghost'][color='danger']) {
+  color: var(--colorPaletteRedForeground3);
+}
+
+:host([appearance='ghost'][color='important']) {
+  color: var(--colorNeutralForeground1);
+}
+
+:host([appearance='ghost'][color='informative']) {
+  color: var(--colorNeutralForeground3);
+}
+
+:host([appearance='ghost'][color='severe']) {
+  color: var(--colorPaletteDarkOrangeForeground3);
+}
+
+:host([appearance='ghost'][color='subtle']) {
+  color: var(--colorNeutralForegroundInverted);
+}
+
+:host([appearance='ghost'][color='success']) {
+  color: var(--colorPaletteGreenForeground3);
+}
+
+:host([appearance='ghost'][color='warning']) {
+  color: var(--colorPaletteYellowForeground2);
+}
+
+:host([color='danger']) {
+  background-color: var(--colorPaletteRedBackground3);
+  color: var(--colorNeutralForegroundOnBrand);
+}
+
+:host([color='important']) {
+  background-color: var(--colorNeutralForeground1);
+  color: var(--colorNeutralBackground1);
+}
+
+:host([color='informative']) {
+  background-color: var(--colorNeutralBackground5);
+  color: var(--colorNeutralForeground3);
+}
+
+:host([color='severe']) {
+  background-color: var(--colorPaletteDarkOrangeBackground3);
+  color: var(--colorNeutralForegroundOnBrand);
+}
+
+:host([color='subtle']) {
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
+}
+
+:host([color='success']) {
+  background-color: var(--colorPaletteGreenBackground3);
+  color: var(--colorNeutralForegroundOnBrand);
+}
+
+:host([color='warning']) {
+  background-color: var(--colorPaletteYellowBackground3);
+  color: var(--colorNeutralForeground1Static);
+}
+
+:host([size='tiny']) {
+  width: 6px;
+  height: 6px;
+  font-size: 4px;
+  line-height: 4px;
+  padding-inline: 0;
+  min-width: unset;
+}
+:host([size='tiny']) ::slotted(svg) {
+  font-size: 6px;
+}
+:host([size='extra-small']) {
+  width: 10px;
+  height: 10px;
+  font-size: 6px;
+  line-height: 6px;
+  padding-inline: 0;
+  min-width: unset;
+}
+:host([size='extra-small']) ::slotted(svg) {
+  font-size: 10px;
+}
+:host([size='small']) {
+  min-width: 16px;
+  height: 16px;
+  font-size: var(--fontSizeBase100);
+  line-height: var(--lineHeightBase100);
+  padding-inline: calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));
+}
+:host([size='small']) ::slotted(svg) {
+  font-size: 12px;
+}
+:host([size='large']) {
+  min-width: 24px;
+  height: 24px;
+  font-size: var(--fontSizeBase200);
+  line-height: var(--lineHeightBase200);
+  padding-inline: calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));
+}
+:host([size='large']) ::slotted(svg) {
+  font-size: 16px;
+}
+:host([size='extra-large']) {
+  min-width: 32px;
+  height: 32px;
+  font-size: var(--fontSizeBase200);
+  line-height: var(--lineHeightBase200);
+  padding-inline: calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));
+}
+:host([size='extra-large']) ::slotted(svg) {
+  font-size: 20px;
+}
+
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: inline-flex;
+}
+:host {
+  position: relative;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--fontFamilyBase);
+  font-weight: var(--fontWeightSemibold);
+  font-size: var(--fontSizeBase200);
+  line-height: var(--lineHeightBase200);
+  min-width: 20px;
+  height: 20px;
+  padding-inline: calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));
+  border-radius: var(--borderRadiusCircular);
+  border-color: var(--colorTransparentStroke);
+  background-color: var(--colorBrandBackground);
+  color: var(--colorNeutralForegroundOnBrand);
+  contain: content;
+}
+
+::slotted(svg) {
+  font-size: 12px;
+}
+
+:host(:not([appearance='ghost']))::after {
+  position: absolute;
+  content: '';
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  border-style: solid;
+  border-width: var(--strokeWidthThin);
+  border-color: inherit;
+  border-radius: inherit;
+}
+
+@media (forced-colors: active) {
+  :host,
+  :host([appearance='outline']),
+  :host([appearance='tint']) {
+    border-color: CanvasText;
+  }
+}

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

@@ -1,6 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { forcedColorsStylesheetBehavior } from '../utils/index.js';
-import { badgeBaseStyles, badgeFilledStyles, badgeGhostStyles, badgeOutlineStyles, badgeSizeStyles, badgeTintStyles, } from '../styles/index.js';
+import { badgeBaseStyles, badgeFilledStyles, badgeGhostStyles, badgeOutlineStyles, badgeSizeStyles, badgeTintStyles, } from '../styles/partials/badge.partials.js';
 import { borderRadiusMedium, borderRadiusNone, borderRadiusSmall } from '../theme/design-tokens.js';
 // why is the border not showing up?
 /** Badge styles
@@ -25,11 +24,13 @@ export const styles = css `
   ${badgeFilledStyles}
   ${badgeSizeStyles}
   ${badgeBaseStyles}
-`.withBehaviors(forcedColorsStylesheetBehavior(css `
+
+  @media (forced-colors: active) {
     :host,
     :host([appearance='outline']),
     :host([appearance='tint']) {
       border-color: CanvasText;
     }
-  `));
+  }
+`;
 //# sourceMappingURL=badge.styles.js.map

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,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AACnE,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;;;;qBAIlB,iBAAiB;;;IAGlC,eAAe;IACf,kBAAkB;IAClB,gBAAgB;IAChB,iBAAiB;IACjB,eAAe;IACf,eAAe;CAClB,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;GAMjC,CAAC,CACH,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,sCAAsC,CAAC;AAC9C,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;;;;qBAIlB,iBAAiB;;;IAGlC,eAAe;IACf,kBAAkB;IAClB,gBAAgB;IAChB,iBAAiB;IACjB,eAAe;IACf,eAAe;;;;;;;;;CASlB,CAAC"}

package/dist/esm/badge/badge.template.html

@@ -0,0 +1,8 @@
+<f-template name="fluent-badge" shadowrootmode="open">
+  <template>
+    {{styles}}
+    <slot name="start" f-ref="{start}"></slot>
+    <slot></slot>
+    <slot name="end" f-ref="{end}"></slot>
+  </template>
+</f-template>

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

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

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,EAA4B,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACzE,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"}
+{"version":3,"file":"badge.template.js","sourceRoot":"","sources":["../../../src/badge/badge.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC9E,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/badge/define-async.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/badge/define-async.js

@@ -0,0 +1,5 @@
+import { RenderableFASTElement } from '@microsoft/fast-html';
+import { definition } from './badge.definition-async.js';
+import { Badge } from './badge.js';
+RenderableFASTElement(Badge).defineAsync(definition);
+//# sourceMappingURL=define-async.js.map

package/dist/esm/badge/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/badge/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,qBAAqB,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/badge/define.js

@@ -1,4 +1,4 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
 import { definition } from './badge.definition.js';
-definition.define(FluentDesignSystem.registry);
+import { Badge } from './badge.js';
+Badge.define(definition);
 //# sourceMappingURL=define.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/badge/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/badge/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/badge/index.d.ts

@@ -1,5 +1,5 @@
+export { definition as BadgeDefinition } from './badge.definition.js';
 export { Badge } from './badge.js';
-export { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize } from './badge.options.js';
-export { template as BadgeTemplate } from './badge.template.js';
+export { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize, tagName as BadgeTagName, type BadgeOptions, } from './badge.options.js';
 export { styles as BadgeStyles } from './badge.styles.js';
-export { definition as BadgeDefinition } from './badge.definition.js';
+export { template as BadgeTemplate } from './badge.template.js';

package/dist/esm/badge/index.js

@@ -1,6 +1,6 @@
+export { definition as BadgeDefinition } from './badge.definition.js';
 export { Badge } from './badge.js';
-export { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize } from './badge.options.js';
-export { template as BadgeTemplate } from './badge.template.js';
+export { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize, tagName as BadgeTagName, } from './badge.options.js';
 export { styles as BadgeStyles } from './badge.styles.js';
-export { definition as BadgeDefinition } from './badge.definition.js';
+export { template as BadgeTemplate } from './badge.template.js';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACxF,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EACL,eAAe,EACf,UAAU,EACV,UAAU,EACV,SAAS,EACT,OAAO,IAAI,YAAY,GAExB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/esm/button/button.base.d.ts

@@ -12,15 +12,6 @@ import { type ButtonFormTarget, ButtonType } from './button.options.js';
  * @public
  */
 export declare class BaseButton extends FASTElement {
-    /**
-     * 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
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `autofocus`
-     */
-    autofocus: boolean;
     /**
      * Default slotted content.
      *
@@ -36,7 +27,15 @@ export declare class BaseButton extends FASTElement {
      * HTML Attribute: `disabled`
      */
     disabled: boolean;
-    protected disabledChanged(): void;
+    /**
+     * Handles changes to the disabled attribute. If the button is disabled, it
+     * should not be focusable.
+     *
+     * @param previous - the previous disabled value
+     * @param next - the new disabled value
+     * @internal
+     */
+    disabledChanged(): void;
     /**
      * Indicates that the button is focusable while disabled.
      *
@@ -226,6 +225,12 @@ export declare class BaseButton extends FASTElement {
      * @public
      */
     resetForm(): void;
+    /**
+     * Sets the `tabindex` attribute based on the disabled state of the button.
+     *
+     * @internal
+     */
+    protected setTabIndex(): void;
     /**
      * Submits the associated form.
      *