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

package/dist/esm/checkbox/checkbox.template.js

@@ -0,0 +1,27 @@
+import { html } from '@microsoft/fast-element';
+import { checkboxTemplate } from '@microsoft/fast-foundation/checkbox.js';
+const checkedIndicator = html.partial(`
+    <div class="checked-indicator">
+        <svg fill="currentColor" 
+            aria-hidden="true" 
+            width="1em" 
+            height="1em" 
+            viewBox="0 0 12 12" 
+            xmlns="http://www.w3.org/2000/svg">
+                <path d="M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04Z" fill="currentColor">
+                </path>
+        </svg>
+    </div>
+`);
+const indeterminateIndicator = html.partial(`
+    <div class="indeterminate-indicator"></div>
+`);
+/**
+ * Template for the Checkbox component
+ * @public
+ */
+export const template = checkboxTemplate({
+    checkedIndicator: checkedIndicator,
+    indeterminateIndicator: indeterminateIndicator,
+});
+//# sourceMappingURL=checkbox.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.template.js","sourceRoot":"","sources":["../../../src/checkbox/checkbox.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAI1E,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC;;;;;;;;;;;;CAYrC,CAAC,CAAC;AAEH,MAAM,sBAAsB,GAAG,IAAI,CAAC,OAAO,CAAC;;CAE3C,CAAC,CAAC;AAEH;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAkC,gBAAgB,CAAC;IACtE,gBAAgB,EAAE,gBAAgB;IAClC,sBAAsB,EAAE,sBAAsB;CAC/C,CAAC,CAAC"}

package/dist/esm/checkbox/define.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/checkbox/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/checkbox/index.js

@@ -0,0 +1,6 @@
+export * from './checkbox.js';
+export * from './checkbox.options.js';
+export { definition as CheckboxDefinition } from './checkbox.definition.js';
+export { template as CheckboxTemplate } from './checkbox.template.js';
+export { styles as CheckboxStyles } from './checkbox.styles.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/checkbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EAAE,QAAQ,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC"}

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

@@ -0,0 +1,21 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { CompoundButton } from './compound-button.js';
+import { styles } from './compound-button.styles.js';
+import { template } from './compound-button.template.js';
+/**
+ * The Fluent Compound Button Element. Implements {@link @microsoft/fast-foundation#Button },
+ * {@link @microsoft/fast-foundation#buttonTemplate}
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-comopund-button\>
+ */
+export const definition = CompoundButton.compose({
+    name: `${FluentDesignSystem.prefix}-compound-button`,
+    template,
+    styles,
+    shadowOptions: {
+        delegatesFocus: true,
+    },
+});
+//# sourceMappingURL=compound-button.definition.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"compound-button.definition.js","sourceRoot":"","sources":["../../../src/compound-button/compound-button.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAEzD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC;IAC/C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,kBAAkB;IACpD,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC"}

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

@@ -0,0 +1,8 @@
+import { Button } from '../button/button.js';
+/**
+ * The base class used for constructing a fluent-compound-button custom element
+ * @public
+ */
+export class CompoundButton extends Button {
+}
+//# sourceMappingURL=compound-button.js.map

package/dist/esm/compound-button/compound-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compound-button.js","sourceRoot":"","sources":["../../../src/compound-button/compound-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C;;;GAGG;AACH,MAAM,OAAO,cAAe,SAAQ,MAAM;CAAG"}

package/dist/esm/compound-button/compound-button.options.js

@@ -0,0 +1,17 @@
+import { ButtonAppearance, ButtonShape, ButtonSize } from '../button/button.options.js';
+/**
+ * Compound Button Appearance constants
+ * @public
+ */
+export const CompoundButtonAppearance = ButtonAppearance;
+/**
+ * A Compound Button can be square, circular or rounded.
+ * @public
+ */
+export const CompoundButtonShape = ButtonShape;
+/**
+ * A Compound Button can be a size of small, medium or large.
+ * @public
+ */
+export const CompoundButtonSize = ButtonSize;
+//# sourceMappingURL=compound-button.options.js.map

package/dist/esm/compound-button/compound-button.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compound-button.options.js","sourceRoot":"","sources":["../../../src/compound-button/compound-button.options.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAExF;;;GAGG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,gBAAgB,CAAC;AAQzD;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,WAAW,CAAC;AAQ/C;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,UAAU,CAAC"}

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

@@ -0,0 +1,105 @@
+import { css } from '@microsoft/fast-element';
+import { styles as ButtonStyles } from '../button/button.styles.js';
+import { colorNeutralForeground2, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForegroundDisabled, colorNeutralForegroundOnBrand, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontWeightRegular, lineHeightBase300, lineHeightBase400, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXS, } from '../theme/design-tokens.js';
+// Need to support icon hover styles
+export const styles = css `
+  ${ButtonStyles}
+
+  :host .control,
+  :host(:is([size])) .control {
+    gap: 12px;
+    height: auto;
+    padding-top: 14px;
+    padding-inline: 12px;
+    padding-bottom: 16px;
+    font-size: ${fontSizeBase300};
+    line-height: ${lineHeightBase300};
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    text-align: start;
+  }
+
+  ::slotted([slot='description']) {
+    color: ${colorNeutralForeground2};
+    line-height: 100%;
+    font-size: ${fontSizeBase200};
+    font-weight: ${fontWeightRegular};
+  }
+
+  ::slotted(svg),
+  :host([size='large']) ::slotted(svg) {
+    font-size: 40px;
+    height: 40px;
+    width: 40px;
+  }
+
+  :host(:hover) ::slotted([slot='description']) {
+    color: ${colorNeutralForeground2Hover};
+  }
+
+  :host(:active) ::slotted([slot='description']) {
+    color: ${colorNeutralForeground2Pressed};
+  }
+
+  :host(:is([appearance='primary'], [appearance='primary']:hover, [appearance='primary']:active))
+    ::slotted([slot='description']) {
+    color: ${colorNeutralForegroundOnBrand};
+  }
+
+  :host(:is([appearance='subtle'], [appearance='subtle']:hover, [appearance='subtle']:active))
+    ::slotted([slot='description']),
+  :host([appearance='transparent']) ::slotted([slot='description']) {
+    color: ${colorNeutralForeground2};
+  }
+
+  :host([appearance='transparent']:hover) ::slotted([slot='description']) {
+    color: ${colorNeutralForeground2BrandHover};
+  }
+
+  :host([appearance='transparent']:active) ::slotted([slot='description']) {
+    color: ${colorNeutralForeground2BrandPressed};
+  }
+
+  :host(:is([disabled], [disabled][appearance], [disabled-focusable], [disabled-focusable][appearance]))
+    ::slotted([slot='description']) {
+    color: ${colorNeutralForegroundDisabled};
+  }
+
+  :host([size='small']) .control {
+    padding: 8px;
+    padding-bottom: 10px;
+  }
+
+  :host([icon-only]) .control {
+    min-width: 52px;
+    max-width: 52px;
+    padding: ${spacingHorizontalSNudge};
+  }
+
+  :host([icon-only][size='small']) .control {
+    min-width: 48px;
+    max-width: 48px;
+    padding: ${spacingHorizontalXS};
+  }
+
+  :host([icon-only][size='large']) .control {
+    min-width: 56px;
+    max-width: 56px;
+    padding: ${spacingHorizontalS};
+  }
+
+  :host([size='large']) .control {
+    padding-top: 18px;
+    padding-inline: 16px;
+    padding-bottom: 20px;
+    font-size: ${fontSizeBase400};
+    line-height: ${lineHeightBase400};
+  }
+  :host([size='large']) ::slotted([slot='description']) {
+    font-size: ${fontSizeBase300};
+  }
+`;
+//# sourceMappingURL=compound-button.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"compound-button.styles.js","sourceRoot":"","sources":["../../../src/compound-button/compound-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,uBAAuB,EACvB,iCAAiC,EACjC,mCAAmC,EACnC,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,6BAA6B,EAC7B,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AAEnC,oCAAoC;AACpC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,YAAY;;;;;;;;;iBASC,eAAe;mBACb,iBAAiB;;;;;;;;;;aAUvB,uBAAuB;;iBAEnB,eAAe;mBACb,iBAAiB;;;;;;;;;;;aAWvB,4BAA4B;;;;aAI5B,8BAA8B;;;;;aAK9B,6BAA6B;;;;;;aAM7B,uBAAuB;;;;aAIvB,iCAAiC;;;;aAIjC,mCAAmC;;;;;aAKnC,8BAA8B;;;;;;;;;;;eAW5B,uBAAuB;;;;;;eAMvB,mBAAmB;;;;;;eAMnB,kBAAkB;;;;;;;iBAOhB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;;CAE/B,CAAC"}

package/dist/esm/compound-button/compound-button.template.js

@@ -0,0 +1,60 @@
+import { html, ref, slotted } from '@microsoft/fast-element';
+import { endSlotTemplate, startSlotTemplate } from '@microsoft/fast-foundation/patterns.js';
+/**
+ * The template for the Compound Button component.
+ * @public
+ */
+export function buttonTemplate(options = {}) {
+    return html `
+    <button
+      class="control"
+      part="control"
+      ?autofocus="${x => x.autofocus}"
+      ?disabled="${x => x.disabled}"
+      form="${x => x.formId}"
+      formaction="${x => x.formaction}"
+      formenctype="${x => x.formenctype}"
+      formmethod="${x => x.formmethod}"
+      ?formnovalidate="${x => x.formnovalidate}"
+      formtarget="${x => x.formtarget}"
+      name="${x => x.name}"
+      type="${x => x.type}"
+      value="${x => x.value}"
+      aria-atomic="${x => x.ariaAtomic}"
+      aria-busy="${x => x.ariaBusy}"
+      aria-controls="${x => x.ariaControls}"
+      aria-current="${x => x.ariaCurrent}"
+      aria-describedby="${x => x.ariaDescribedby}"
+      aria-details="${x => x.ariaDetails}"
+      aria-disabled="${x => x.ariaDisabled}"
+      aria-errormessage="${x => x.ariaErrormessage}"
+      aria-expanded="${x => x.ariaExpanded}"
+      aria-flowto="${x => x.ariaFlowto}"
+      aria-haspopup="${x => x.ariaHaspopup}"
+      aria-hidden="${x => x.ariaHidden}"
+      aria-invalid="${x => x.ariaInvalid}"
+      aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
+      aria-label="${x => x.ariaLabel}"
+      aria-labelledby="${x => x.ariaLabelledby}"
+      aria-live="${x => x.ariaLive}"
+      aria-owns="${x => x.ariaOwns}"
+      aria-pressed="${x => x.ariaPressed}"
+      aria-relevant="${x => x.ariaRelevant}"
+      aria-roledescription="${x => x.ariaRoledescription}"
+      ${ref('control')}
+    >
+      ${startSlotTemplate(options)}
+      <span class="content" part="content">
+        <slot ${slotted('defaultSlottedContent')}></slot>
+        <slot name="description"></slot>
+      </span>
+      ${endSlotTemplate(options)}
+    </button>
+  `;
+}
+/**
+ * The template for the Button component.
+ * @public
+ */
+export const template = buttonTemplate();
+//# sourceMappingURL=compound-button.template.js.map

package/dist/esm/compound-button/compound-button.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compound-button.template.js","sourceRoot":"","sources":["../../../src/compound-button/compound-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAI5F;;;GAGG;AACH,MAAM,UAAU,cAAc,CAA2B,UAAiC,EAAE;IAC1F,OAAO,IAAI,CAAG;;;;oBAII,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;mBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;cACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;oBACP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;qBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;oBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;yBACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;oBAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;cACvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;cACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;eACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;qBACN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;mBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;sBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;0BACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;sBAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;uBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;2BACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;uBAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;qBACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;uBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;qBACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;sBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;2BACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;oBAC9B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;yBACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;mBAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;mBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;sBACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;uBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;8BACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;QAChD,GAAG,CAAC,SAAS,CAAC;;QAEd,iBAAiB,CAAC,OAAO,CAAC;;gBAElB,OAAO,CAAC,uBAAuB,CAAC;;;QAGxC,eAAe,CAAC,OAAO,CAAC;;GAE7B,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAwC,cAAc,EAAE,CAAC"}

package/dist/esm/compound-button/define.js

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

package/dist/esm/compound-button/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/compound-button/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAE7D,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/compound-button/index.js

@@ -0,0 +1,6 @@
+export * from './compound-button.js';
+export * from './compound-button.options.js';
+export { template as CompoundButtonTemplate } from './compound-button.template.js';
+export { styles as CompoundButtonStyles } from './compound-button.styles.js';
+export { definition as CompoundButtonDefinition } from './compound-button.definition.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/compound-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/compound-button/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,8BAA8B,CAAC;AAC7C,OAAO,EAAE,QAAQ,IAAI,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACnF,OAAO,EAAE,MAAM,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,UAAU,IAAI,wBAAwB,EAAE,MAAM,iCAAiC,CAAC"}

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

@@ -16,3 +16,4 @@ export const definition = CounterBadge.compose({
     template,
     styles,
 });
+//# sourceMappingURL=counter-badge.definition.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"counter-badge.definition.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC;IAC7C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,gBAAgB;IAClD,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}

package/dist/esm/counter-badge/counter-badge.js

@@ -1,6 +1,8 @@
 import { __decorate } from "tslib";
 import { attr, FASTElement, nullableNumberConverter } from '@microsoft/fast-element';
-import { applyMixins, StartEnd } from '@microsoft/fast-foundation';
+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';
 /**
  * The base class used for constructing a fluent-badge custom element
  * @public
@@ -87,3 +89,4 @@ __decorate([
     attr({ mode: 'boolean' })
 ], CounterBadge.prototype, "dot", void 0);
 applyMixins(CounterBadge, StartEnd);
+//# sourceMappingURL=counter-badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"counter-badge.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAClE,gEAAgE;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAQvD;;;GAGG;AACH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAA7C;;QAwCE;;;;;;WAMG;QAEI,UAAK,GAAW,CAAC,CAAC;QAKzB;;;;;;WAMG;QAEI,kBAAa,GAAW,EAAE,CAAC;QAKlC;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;QAEjC;;;;;;WAMG;QAEI,QAAG,GAAY,KAAK,CAAC;IAiB9B,CAAC;IApDW,YAAY;QACpB,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAWS,oBAAoB;QAC5B,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAsBD;;;;;OAKG;IACI,QAAQ;;QACb,MAAM,KAAK,GAAkB,MAAA,IAAI,CAAC,KAAK,mCAAI,CAAC,CAAC;QAE7C,IAAI,CAAC,KAAK,KAAK,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;YAC/C,OAAO,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC;SAC3E;QAED,OAAO;IACT,CAAC;CACF;AA5FC;IADC,IAAI;gDACsC;AAU3C;IADC,IAAI;2CAC4B;AASjC;IADC,IAAI;2CAC4B;AAUjC;IADC,IAAI;0CAC0B;AAU/B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;2CACpB;AAazB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;mDACxC;AAalC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CACjB;AAUjC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;yCACE;AA2B9B,WAAW,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC"}

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

@@ -40,3 +40,4 @@ export const CounterBadgeSize = {
     large: 'large',
     extraLarge: 'extra-large',
 };
+//# sourceMappingURL=counter-badge.options.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"counter-badge.options.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.options.ts"],"names":[],"mappings":"AASA;;;GAGG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,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,iBAAiB,GAAG;IAC/B,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;CACV,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,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"}

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

@@ -28,3 +28,4 @@ export const styles = css `
     padding: 0;
   }
 `;
+//# sourceMappingURL=counter-badge.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"counter-badge.styles.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC3G,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAElF;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;qBAEJ,kBAAkB;;;;;;qBAMlB,iBAAiB;;;IAGlC,eAAe;IACf,iBAAiB;IACjB,gBAAgB;IAChB,eAAe;;;;;;;;;CASlB,CAAC"}

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

@@ -10,3 +10,4 @@ function composeTemplate(options = {}) {
  * @public
  */
 export const template = composeTemplate();
+//# sourceMappingURL=counter-badge.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"counter-badge.template.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAK3D,SAAS,eAAe,CAAiC,UAA+B,EAAE;IACxF,OAAO,aAAa,CAAI;QACtB,cAAc,EAAE,IAAI,CAAG,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE;KAC9C,CAAC,CAAC;AACL,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAsC,eAAe,EAAwB,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/counter-badge/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/counter-badge/index.js

@@ -3,3 +3,4 @@ export * from './counter-badge.options.js';
 export { template as CounterBadgeTemplate } from './counter-badge.template.js';
 export { styles as CounterBadgeStyles } from './counter-badge.styles.js';
 export { definition as CounterBadgeDefinition } from './counter-badge.definition.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/counter-badge/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,QAAQ,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAC/E,OAAO,EAAE,MAAM,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,UAAU,IAAI,sBAAsB,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/divider/define.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/divider/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/divider/divider.definition.js

@@ -0,0 +1,17 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { Divider } from './divider.js';
+import { template } from './divider.template.js';
+import { styles } from './divider.styles.js';
+/**
+ * The Fluent Divider Element
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-divider\>
+ */
+export const definition = Divider.compose({
+    name: `${FluentDesignSystem.prefix}-divider`,
+    template,
+    styles,
+});
+//# sourceMappingURL=divider.definition.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider.definition.js","sourceRoot":"","sources":["../../../src/divider/divider.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC;IACxC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,UAAU;IAC5C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}

package/dist/esm/divider/divider.js

@@ -0,0 +1,21 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { FASTDivider } from '@microsoft/fast-foundation/divider.js';
+/**
+ * @class Divider component
+ *
+ * @remarks
+ * This class extends the FASTDivider. A divider groups sections of content to create visual rhythm and hierarchy. Use dividers along with spacing and headers to organize content in your layout.
+ */
+export class Divider extends FASTDivider {
+}
+__decorate([
+    attr({ attribute: 'align-content' })
+], Divider.prototype, "alignContent", void 0);
+__decorate([
+    attr
+], Divider.prototype, "appearance", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], Divider.prototype, "inset", void 0);
+//# sourceMappingURL=divider.js.map

package/dist/esm/divider/divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../src/divider/divider.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAGpE;;;;;GAKG;AACH,MAAM,OAAO,OAAQ,SAAQ,WAAW;CA2BvC;AAnBC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;6CACK;AAS1C;IADC,IAAI;2CACiC;AAStC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;sCACH"}

package/dist/esm/divider/divider.options.js

@@ -0,0 +1,31 @@
+import { DividerOrientation, DividerRole } from '@microsoft/fast-foundation/divider.js';
+/**
+ * Fast Foundation DividerRole property
+ * @public
+ */
+export { DividerRole };
+/**
+ * Fast Foundation Orientation property
+ * @public
+ */
+export { DividerOrientation };
+/**
+ * Align content within divider
+ * @public
+ */
+export const DividerAlignContent = {
+    center: 'center',
+    start: 'start',
+    end: 'end',
+};
+/**
+ * DividerAppearance - divider color defined by a design token alias.
+ * @public
+ */
+export const DividerAppearance = {
+    strong: 'strong',
+    brand: 'brand',
+    subtle: 'subtle',
+    default: 'default',
+};
+//# sourceMappingURL=divider.options.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider.options.js","sourceRoot":"","sources":["../../../src/divider/divider.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAGxF;;;GAGG;AACH,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB;;;GAGG;AACH,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAE9B;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,GAAG,EAAE,KAAK;CACF,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;CACV,CAAC"}

package/dist/esm/divider/divider.styles.js

@@ -0,0 +1,127 @@
+import { css } from '@microsoft/fast-element';
+import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation/utilities.js';
+import { colorBrandForeground1, colorBrandStroke1, colorNeutralForeground1, colorNeutralForeground2, colorNeutralForeground3, colorNeutralStroke1, colorNeutralStroke2, colorNeutralStroke3, fontFamilyBase, fontSizeBase200, fontWeightRegular, strokeWidthThin, } from '../theme/design-tokens.js';
+/** Divider styles
+ * @public
+ */
+export const styles = css `
+  ${display('flex')}
+
+  :host {
+    contain: content;
+  }
+
+  :host::after,
+  :host::before {
+    align-self: center;
+    background: ${colorNeutralStroke2};
+    box-sizing: border-box;
+    content: '';
+    display: flex;
+    flex-grow: 1;
+    height: ${strokeWidthThin};
+  }
+
+  :host([inset]) {
+    padding: 0 12px;
+  }
+
+  :host ::slotted(*) {
+    color: ${colorNeutralForeground2};
+    font-family: ${fontFamilyBase};
+    font-size: ${fontSizeBase200};
+    font-weight: ${fontWeightRegular};
+    margin: 0;
+    padding: 0 12px;
+  }
+
+  :host([align-content='start'])::before,
+  :host([align-content='end'])::after {
+    flex-basis: 12px;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  :host([orientation='vertical']) {
+    height: 100%;
+    min-height: 84px;
+  }
+  :host([orientation='vertical']):empty {
+    min-height: 20px;
+  }
+
+  :host([orientation='vertical']) {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  :host([orientation='vertical'][inset])::before {
+    margin-top: 12px;
+  }
+  :host([orientation='vertical'][inset])::after {
+    margin-bottom: 12px;
+  }
+
+  :host([orientation='vertical']):empty::before,
+  :host([orientation='vertical']):empty::after {
+    height: 10px;
+    min-height: 10px;
+    flex-grow: 0;
+  }
+
+  :host([orientation='vertical'])::before,
+  :host([orientation='vertical'])::after {
+    width: ${strokeWidthThin};
+    min-height: 20px;
+    height: 100%;
+  }
+
+  :host([orientation='vertical']) ::slotted(*) {
+    display: flex;
+    flex-direction: column;
+    padding: 12px 0;
+    line-height: 20px;
+  }
+
+  :host([orientation='vertical'][align-content='start'])::before {
+    min-height: 8px;
+  }
+  :host([orientation='vertical'][align-content='end'])::after {
+    min-height: 8px;
+  }
+
+  :host([appearance='strong'])::before,
+  :host([appearance='strong'])::after {
+    background: ${colorNeutralStroke1};
+  }
+  :host([appearance='strong']) ::slotted(*) {
+    color: ${colorNeutralForeground1};
+  }
+  :host([appearance='brand'])::before,
+  :host([appearance='brand'])::after {
+    background: ${colorBrandStroke1};
+  }
+  :host([appearance='brand']) ::slotted(*) {
+    color: ${colorBrandForeground1};
+  }
+  :host([appearance='subtle'])::before,
+  :host([appearance='subtle'])::after {
+    background: ${colorNeutralStroke3};
+  }
+  :host([appearance='subtle']) ::slotted(*) {
+    color: ${colorNeutralForeground3};
+  }
+`.withBehaviors(forcedColorsStylesheetBehavior(css `
+    :host([appearance='strong'])::before,
+    :host([appearance='strong'])::after,
+    :host([appearance='brand'])::before,
+    :host([appearance='brand'])::after,
+    :host([appearance='subtle'])::before,
+    :host([appearance='subtle'])::after,
+    :host::after,
+    :host::before {
+      background: WindowText;
+      color: WindowText;
+    }
+  `));
+//# sourceMappingURL=divider.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider.styles.js","sourceRoot":"","sources":["../../../src/divider/divider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,yCAAyC,CAAC;AAClG,OAAO,EACL,qBAAqB,EACrB,iBAAiB,EACjB,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;kBASD,mBAAmB;;;;;cAKvB,eAAe;;;;;;;;aAQhB,uBAAuB;mBACjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAyCvB,eAAe;;;;;;;;;;;;;;;;;;;;;kBAqBV,mBAAmB;;;aAGxB,uBAAuB;;;;kBAIlB,iBAAiB;;;aAGtB,qBAAqB;;;;kBAIhB,mBAAmB;;;aAGxB,uBAAuB;;CAEnC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;;GAYjC,CAAC,CACH,CAAC"}

package/dist/esm/divider/divider.template.js

@@ -0,0 +1,7 @@
+import { dividerTemplate } from '@microsoft/fast-foundation/divider.js';
+/**
+ * Template for the Divider component
+ * @public
+ */
+export const template = dividerTemplate();
+//# sourceMappingURL=divider.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider.template.js","sourceRoot":"","sources":["../../../src/divider/divider.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAGxE;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAiC,eAAe,EAAE,CAAC"}