@fluentui/web-components 3.0.0-beta.2 → 3.0.0-beta.20

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/accordion/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/esm/accordion-item/accordion-item.definition.js

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

package/dist/esm/accordion-item/accordion-item.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.definition.js","sourceRoot":"","sources":["../../../src/accordion-item/accordion-item.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAExD;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,CAAC;IAC9C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,iBAAiB;IACnD,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
+{"version":3,"file":"accordion-item.definition.js","sourceRoot":"","sources":["../../../src/accordion-item/accordion-item.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAExD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,CAAC;IAC9C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,iBAAiB;IACnD,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}

package/dist/esm/accordion-item/accordion-item.js

@@ -4,14 +4,64 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 } from '@microsoft/fast-element';
-import { FASTAccordionItem } from '@microsoft/fast-foundation/accordion-item.js';
+import { attr, FASTElement, nullableNumberConverter } from '@microsoft/fast-element';
+import { uniqueId } from '@microsoft/fast-web-utilities';
+import { StartEnd } from '../patterns/index.js';
+import { applyMixins } from '../utils/apply-mixins.js';
 /**
- * @internal
+ *
+ * @slot start - Content which can be provided between the heading and the icon
+ * @slot end - Content which can be provided between the start slot and icon
+ * @slot heading - Content which serves as the accordion item heading and text of the expand button
+ * @slot - The default slot for accordion item content
+ * @slot expanded-icon - The expanded icon
+ * @slot collapsed-icon - The collapsed icon
+ * @fires change - Fires a custom 'change' event when the button is invoked
+ * @csspart heading - Wraps the button
+ * @csspart button - The button which serves to invoke the item
+ * @csspart heading-content - Wraps the slot for the heading content within the button
+ * @csspart icon - The icon container
+ * @csspart region - The wrapper for the accordion item content
+ *
+ * @public
  */
-export class AccordionItem extends FASTAccordionItem {
+export class AccordionItem extends FASTElement {
     constructor() {
         super(...arguments);
+        /**
+         * Configures the {@link https://www.w3.org/TR/wai-aria-1.1/#aria-level | level} of the
+         * heading element.
+         *
+         * @defaultValue 2
+         * @public
+         * @remarks
+         * HTML attribute: heading-level
+         */
+        this.headinglevel = 2;
+        /**
+         * Expands or collapses the item.
+         *
+         * @public
+         * @remarks
+         * HTML attribute: expanded
+         */
+        this.expanded = false;
+        /**
+         * Disables an accordion item
+         *
+         * @public
+         * @remarks
+         * HTML attribute: disabled
+         */
+        this.disabled = false;
+        /**
+         * The item ID
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: id
+         */
+        this.id = uniqueId('accordion-');
         /**
          * Sets the width of the focus state.
          *
@@ -20,8 +70,33 @@ export class AccordionItem extends FASTAccordionItem {
          * HTML Attribute: block
          */
         this.block = false;
+        /**
+         * @internal
+         */
+        this.clickHandler = (e) => {
+            if (this.disabled) {
+                return;
+            }
+            this.$emit('click', e);
+        };
     }
 }
+__decorate([
+    attr({
+        attribute: 'heading-level',
+        mode: 'fromView',
+        converter: nullableNumberConverter,
+    })
+], AccordionItem.prototype, "headinglevel", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], AccordionItem.prototype, "expanded", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], AccordionItem.prototype, "disabled", void 0);
+__decorate([
+    attr
+], AccordionItem.prototype, "id", void 0);
 __decorate([
     attr
 ], AccordionItem.prototype, "size", void 0);
@@ -31,4 +106,5 @@ __decorate([
 __decorate([
     attr({ attribute: 'expand-icon-position' })
 ], AccordionItem.prototype, "expandIconPosition", void 0);
+applyMixins(AccordionItem, StartEnd);
 //# sourceMappingURL=accordion-item.js.map

package/dist/esm/accordion-item/accordion-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.js","sourceRoot":"","sources":["../../../src/accordion-item/accordion-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,8CAA8C,CAAC;AAGjF;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,iBAAiB;IAApD;;QAYE;;;;;;WAMG;QAEI,UAAK,GAAY,KAAK,CAAC;IAYhC,CAAC;CAAA;AAtBC;IADC,IAAI;2CAC2B;AAUhC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4CACI;AAW9B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,sBAAsB,EAAE,CAAC;yDACgB"}
+{"version":3,"file":"accordion-item.js","sourceRoot":"","sources":["../../../src/accordion-item/accordion-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAYvD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,OAAO,aAAc,SAAQ,WAAW;IAA9C;;QACE;;;;;;;;WAQG;QAMI,iBAAY,GAA0B,CAAC,CAAC;QAE/C;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;QAEjC;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;QAEjC;;;;;;WAMG;QAEI,OAAE,GAAW,QAAQ,CAAC,YAAY,CAAC,CAAC;QAa3C;;;;;;WAMG;QAEI,UAAK,GAAY,KAAK,CAAC;QAkB9B;;WAEG;QACI,iBAAY,GAAG,CAAC,CAAa,EAAE,EAAE;YACtC,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YAED,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;QACzB,CAAC,CAAC;IACJ,CAAC;CAAA;AA/EC;IALC,IAAI,CAAC;QACJ,SAAS,EAAE,eAAe;QAC1B,IAAI,EAAE,UAAU;QAChB,SAAS,EAAE,uBAAuB;KACnC,CAAC;mDAC6C;AAU/C;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;+CACO;AAUjC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;+CACO;AAUjC;IADC,IAAI;yCACsC;AAW3C;IADC,IAAI;2CAC2B;AAUhC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4CACI;AAW9B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,sBAAsB,EAAE,CAAC;yDACgB;AA2B9D,WAAW,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC"}

package/dist/esm/accordion-item/accordion-item.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 { borderRadiusMedium, borderRadiusSmall, colorNeutralForeground1, colorNeutralForegroundDisabled, colorStrokeFocus1, colorStrokeFocus2, colorTransparentBackground, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontWeightRegular, lineHeightBase200, lineHeightBase300, lineHeightBase400, lineHeightBase500, spacingHorizontalM, spacingHorizontalMNudge, spacingHorizontalS, } from '../theme/design-tokens.js';
 export const styles = css `
   ${display('block')}

package/dist/esm/accordion-item/accordion-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.styles.js","sourceRoot":"","sources":["../../../src/accordion-item/accordion-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAClE,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,uBAAuB,EACvB,8BAA8B,EAC9B,iBAAiB,EACjB,iBAAiB,EACjB,0BAA0B,EAC1B,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;;;;;;;;;;sBAYE,kBAAkB,IAAI,uBAAuB;qBAC9C,kBAAkB;mBACpB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;;;;;;;;;;;;;;aAmBvB,uBAAuB;kBAClB,0BAA0B;mBACzB,iBAAiB;;;;;;;;;;;;;qBAaf,iBAAiB;;;;;;;;;;qBAUjB,kBAAkB;;;;;;gBAMvB,kBAAkB;;;;;;;qBAOb,kBAAkB;;;;;;;;;;qBAUlB,iBAAiB;;wBAEd,iBAAiB;kCACP,iBAAiB;;;;;;aAMtC,8BAA8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAgC1B,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDnC,CAAC"}
+{"version":3,"file":"accordion-item.styles.js","sourceRoot":"","sources":["../../../src/accordion-item/accordion-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,uBAAuB,EACvB,8BAA8B,EAC9B,iBAAiB,EACjB,iBAAiB,EACjB,0BAA0B,EAC1B,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;;;;;;;;;;sBAYE,kBAAkB,IAAI,uBAAuB;qBAC9C,kBAAkB;mBACpB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;;;;;;;;;;;;;;aAmBvB,uBAAuB;kBAClB,0BAA0B;mBACzB,iBAAiB;;;;;;;;;;;;;qBAaf,iBAAiB;;;;;;;;;;qBAUjB,kBAAkB;;;;;;gBAMvB,kBAAkB;;;;;;;qBAOb,kBAAkB;;;;;;;;;;qBAUlB,iBAAiB;;wBAEd,iBAAiB;kCACP,iBAAiB;;;;;;aAMtC,8BAA8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAgC1B,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDnC,CAAC"}

package/dist/esm/accordion-item/accordion-item.template.js

@@ -1,5 +1,6 @@
-import { html } from '@microsoft/fast-element';
-import { accordionItemTemplate } from '@microsoft/fast-foundation/accordion-item.js';
+import { html, ref } from '@microsoft/fast-element';
+import { endSlotTemplate, startSlotTemplate } from '../patterns/index.js';
+import { staticallyCompose } from '../utils/index.js';
 const chevronRight20Filled = html.partial(`<svg
   width="20"
   height="20"
@@ -26,6 +27,50 @@ const chevronDown20Filled = html.partial(`<svg
     fill="currentColor"
   />
 </svg>`);
+export function accordionItemTemplate(options = {}) {
+    return html `
+      <div
+          class="heading"
+          part="heading"
+          role="heading"
+          aria-level="${x => x.headinglevel}"
+      >
+          <button
+              class="button"
+              part="button"
+              ${ref('expandbutton')}
+              ?disabled="${x => (x.disabled ? 'true' : void 0)}"
+              aria-expanded="${x => x.expanded}"
+              aria-controls="${x => x.id}-panel"
+              id="${x => x.id}"
+              @click="${(x, c) => x.clickHandler(c.event)}"
+          >
+              <span class="heading-content" part="heading-content">
+                  <slot name="heading"></slot>
+              </span>
+          </button>
+          ${startSlotTemplate(options)}
+          ${endSlotTemplate(options)}
+          <span class="icon" part="icon" aria-hidden="true">
+              <slot name="expanded-icon">
+                  ${staticallyCompose(options.expandedIcon)}
+              </slot>
+              <slot name="collapsed-icon">
+                  ${staticallyCompose(options.collapsedIcon)}
+              </slot>
+          <span>
+      </div>
+      <div
+          class="region"
+          part="region"
+          id="${x => x.id}-panel"
+          role="region"
+          aria-labelledby="${x => x.id}"
+      >
+          <slot></slot>
+      </div>
+`;
+}
 /**
  * The template for the fluent-accordion component.
  * @public

package/dist/esm/accordion-item/accordion-item.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.template.js","sourceRoot":"","sources":["../../../src/accordion-item/accordion-item.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,qBAAqB,EAAE,MAAM,8CAA8C,CAAC;AAGrF,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CAAC;;;;;;;;;;;;OAYnC,CAAC,CAAC;AAET,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC;;;;;;;;;;;;OAYlC,CAAC,CAAC;AAET;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAuC,qBAAqB,CAAC;IAChF,aAAa,EAAE,oBAAoB;IACnC,YAAY,EAAE,mBAAmB;CAClC,CAAC,CAAC"}
+{"version":3,"file":"accordion-item.template.js","sourceRoot":"","sources":["../../../src/accordion-item/accordion-item.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAGtD,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CAAC;;;;;;;;;;;;OAYnC,CAAC,CAAC;AAET,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC;;;;;;;;;;;;OAYlC,CAAC,CAAC;AAET,MAAM,UAAU,qBAAqB,CACnC,UAAgC,EAAE;IAElC,OAAO,IAAI,CAAG;;;;;wBAKQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;;;;;gBAK3B,GAAG,CAAC,cAAc,CAAC;2BACR,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;+BAC/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;+BACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;oBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;wBACL,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;;;;;;YAM3D,iBAAiB,CAAC,OAAO,CAAC;YAC1B,eAAe,CAAC,OAAO,CAAC;;;oBAGhB,iBAAiB,CAAC,OAAO,CAAC,YAAY,CAAC;;;oBAGvC,iBAAiB,CAAC,OAAO,CAAC,aAAa,CAAC;;;;;;;gBAO5C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;;6BAEI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;;;;CAIrC,CAAC;AACF,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAuC,qBAAqB,CAAC;IAChF,aAAa,EAAE,oBAAoB;IACnC,YAAY,EAAE,mBAAmB;CAClC,CAAC,CAAC"}

package/dist/esm/accordion-item/index.js

@@ -1,5 +1,5 @@
-export * from './accordion-item.js';
-export * from './accordion-item.options.js';
+export { AccordionItem } from './accordion-item.js';
+export { AccordionItemSize, AccordionItemExpandIconPosition } from './accordion-item.options.js';
 export { styles as accordionItemStyles } from './accordion-item.styles.js';
 export { definition as accordionItemDefinition } from './accordion-item.definition.js';
 export { template as accordionItemTemplate } from './accordion-item.template.js';

package/dist/esm/accordion-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/accordion-item/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,MAAM,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAC3E,OAAO,EAAE,UAAU,IAAI,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AACvF,OAAO,EAAE,QAAQ,IAAI,qBAAqB,EAAE,MAAM,8BAA8B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/accordion-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAwB,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,+BAA+B,EAAE,MAAM,6BAA6B,CAAC;AACjG,OAAO,EAAE,MAAM,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAC3E,OAAO,EAAE,UAAU,IAAI,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AACvF,OAAO,EAAE,QAAQ,IAAI,qBAAqB,EAAE,MAAM,8BAA8B,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"anchor-button.definition.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.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;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC;IAC7C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,gBAAgB;IAClD,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC"}
+{"version":3,"file":"anchor-button.definition.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.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;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC;IAC7C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,gBAAgB;IAClD,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC"}

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

@@ -4,13 +4,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 } from '@microsoft/fast-element';
-import { FASTAnchor } from '@microsoft/fast-foundation/anchor.js';
+import { attr, FASTElement, observable } from '@microsoft/fast-element';
+import { ARIAGlobalStatesAndProperties, StartEnd } from '../patterns/index.js';
+import { applyMixins } from '../utils/apply-mixins.js';
 /**
- * The base class used for constructing a fluent-anchor-button custom element
+ * An Anchor Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
+ *
+ * @slot start - Content which can be provided before the anchor content
+ * @slot end - Content which can be provided after the anchor content
+ * @slot - The default slot for anchor content
+ * @csspart control - The anchor element
+ * @csspart content - The element wrapping anchor content
+ *
  * @public
  */
-export class AnchorButton extends FASTAnchor {
+export class AnchorButton extends FASTElement {
     constructor() {
         super(...arguments);
         /**
@@ -77,6 +86,33 @@ export class AnchorButton extends FASTAnchor {
         this.removeEventListener('click', this.handleDisabledFocusableClick);
     }
 }
+__decorate([
+    attr
+], AnchorButton.prototype, "download", void 0);
+__decorate([
+    attr
+], AnchorButton.prototype, "href", void 0);
+__decorate([
+    attr
+], AnchorButton.prototype, "hreflang", void 0);
+__decorate([
+    attr
+], AnchorButton.prototype, "ping", void 0);
+__decorate([
+    attr
+], AnchorButton.prototype, "referrerpolicy", void 0);
+__decorate([
+    attr
+], AnchorButton.prototype, "rel", void 0);
+__decorate([
+    attr
+], AnchorButton.prototype, "target", void 0);
+__decorate([
+    attr
+], AnchorButton.prototype, "type", void 0);
+__decorate([
+    observable
+], AnchorButton.prototype, "defaultSlottedContent", void 0);
 __decorate([
     attr
 ], AnchorButton.prototype, "appearance", void 0);
@@ -95,4 +131,16 @@ __decorate([
 __decorate([
     attr({ attribute: 'disabled-focusable', mode: 'boolean' })
 ], AnchorButton.prototype, "disabledFocusable", void 0);
+/**
+ * Includes ARIA states and properties relating to the ARIA link role
+ *
+ * @public
+ */
+export class DelegatesARIALink {
+}
+__decorate([
+    attr({ attribute: 'aria-expanded' })
+], DelegatesARIALink.prototype, "ariaExpanded", void 0);
+applyMixins(DelegatesARIALink, ARIAGlobalStatesAndProperties);
+applyMixins(AnchorButton, StartEnd, DelegatesARIALink);
 //# sourceMappingURL=anchor-button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"anchor-button.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAGlE;;;GAGG;AACH,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QA+BE;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;QAEjC;;;;;;WAMG;QAEI,aAAQ,GAAa,KAAK,CAAC;QAWlC;;;;;;WAMG;QAEI,sBAAiB,GAAa,KAAK,CAAC;QAa3C;;WAEG;QACK,iCAA4B,GAAG,CAAC,CAAa,EAAQ,EAAE;YAC7D,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,iBAAiB,EAAE;gBAClD,CAAC,CAAC,wBAAwB,EAAE,CAAC;gBAC7B,OAAO;aACR;QACH,CAAC,CAAC;IAaJ,CAAC;IApDW,eAAe,CAAC,IAAa,EAAE,IAAa;QACpD,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,IAAgC,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;YACvE,IAAgC,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;SACnE;aAAM;YACH,IAAgC,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;YAClE,IAAgC,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;SAChE;IACH,CAAC;IAWS,wBAAwB,CAAC,IAAa,EAAE,IAAa;QAC7D,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YACrC,OAAO;SACR;QAED,IAAI,IAAI,CAAC,iBAAiB,EAAE;YACxB,IAAgC,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;SAC1E;aAAM;YACH,IAAgC,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;SACrE;IACH,CAAC;IAYM,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAExB,IAAgC,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,4BAA4B,CAAC,CAAC;IAClG,CAAC;IAEM,oBAAoB;QACzB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE3B,IAAgC,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,4BAA4B,CAAC,CAAC;IACrG,CAAC;CACF;AA7FC;IADC,IAAI;gDACkD;AAUvD;IADC,IAAI;2CACwC;AAU7C;IADC,IAAI;0CAC0B;AAU/B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CACjB;AAUjC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CACQ;AAmBlC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uDAChB"}
+{"version":3,"file":"anchor-button.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.ts"],"names":[],"mappings":"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"}

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

@@ -14,4 +14,15 @@ export const AnchorButtonShape = ButtonShape;
  * @public
  */
 export const AnchorButtonSize = ButtonSize;
+/**
+ * Anchor target values.
+ *
+ * @public
+ */
+export const AnchorTarget = {
+    _self: '_self',
+    _blank: '_blank',
+    _parent: '_parent',
+    _top: '_top',
+};
 //# sourceMappingURL=anchor-button.options.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"anchor-button.options.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.options.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAExF;;;GAGG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,gBAAgB,CAAC;AAQvD;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC;AAQ7C;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,UAAU,CAAC"}
+{"version":3,"file":"anchor-button.options.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAIxF;;;GAGG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,gBAAgB,CAAC;AAQvD;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC;AAQ7C;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,UAAU,CAAC;AAU3C;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;CACJ,CAAC"}

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

@@ -1,11 +1,263 @@
 import { css } from '@microsoft/fast-element';
-import { styles as ButtonStyles } from '../button/button.styles.js';
+import { borderRadiusCircular, borderRadiusLarge, borderRadiusMedium, borderRadiusNone, borderRadiusSmall, colorBrandBackground, colorBrandBackgroundHover, colorBrandBackgroundPressed, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackgroundDisabled, colorNeutralForeground1, colorNeutralForeground1Hover, colorNeutralForeground1Pressed, colorNeutralForeground2, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForegroundDisabled, colorNeutralForegroundOnBrand, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStrokeDisabled, colorStrokeFocus2, colorSubtleBackground, colorSubtleBackgroundHover, colorSubtleBackgroundPressed, colorTransparentBackground, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentStroke, curveEasyEase, durationFaster, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontWeightRegular, fontWeightSemibold, lineHeightBase200, lineHeightBase300, lineHeightBase400, shadow2, shadow4, spacingHorizontalL, spacingHorizontalM, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXS, strokeWidthThick, strokeWidthThin, } from '../theme/design-tokens.js';
+import { forcedColorsStylesheetBehavior } from '../utils/behaviors/match-media-stylesheet-behavior.js';
+import { display } from '../utils/display.js';
 // Need to support icon hover styles
 export const styles = css `
-  ${ButtonStyles}
+  ${display('inline-flex')}
+
+  :host {
+    --icon-spacing: ${spacingHorizontalSNudge};
+    contain: layout style;
+    vertical-align: middle;
+  }
+
+  :host .control {
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    justify-content: center;
+    text-decoration-line: none;
+    margin: 0;
+    min-height: 32px;
+    outline-style: none;
+    background-color: ${colorNeutralBackground1};
+    color: ${colorNeutralForeground1};
+    border: ${strokeWidthThin} solid ${colorNeutralStroke1};
+    padding: 0 ${spacingHorizontalM};
+    min-width: 96px;
+    border-radius: ${borderRadiusMedium};
+    font-size: ${fontSizeBase300};
+    font-family: ${fontFamilyBase};
+    font-weight: ${fontWeightSemibold};
+    line-height: ${lineHeightBase300};
+    transition-duration: ${durationFaster};
+    transition-property: background, border, color;
+    transition-timing-function: ${curveEasyEase};
+    cursor: pointer;
+  }
 
   .content {
+    display: inherit;
     text-align: center;
   }
-`;
+
+  :host(:hover) .control {
+    background-color: ${colorNeutralBackground1Hover};
+    color: ${colorNeutralForeground1Hover};
+    border-color: ${colorNeutralStroke1Hover};
+  }
+
+  :host(:hover:active) .control {
+    background-color: ${colorNeutralBackground1Pressed};
+    border-color: ${colorNeutralStroke1Pressed};
+    color: ${colorNeutralForeground1Pressed};
+    outline-style: none;
+  }
+
+  :host .control:focus-visible {
+    border-color: ${colorTransparentStroke};
+    outline: ${strokeWidthThick}) solid ${colorTransparentStroke};
+    box-shadow: ${shadow4}, 0 0 0 2px ${colorStrokeFocus2};
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    transition-duration: 0.01ms;
+  }
+
+  ::slotted(svg) {
+    font-size: 20px;
+    height: 20px;
+    width: 20px;
+    fill: currentColor;
+  }
+
+  [slot='start'],
+  ::slotted([slot='start']) {
+    margin-inline-end: var(--icon-spacing);
+  }
+
+  [slot='end'],
+  ::slotted([slot='end']) {
+    margin-inline-start: var(--icon-spacing);
+  }
+
+  :host([icon-only]) .control {
+    min-width: 32px;
+    max-width: 32px;
+  }
+
+  :host([size='small']) {
+    --icon-spacing: ${spacingHorizontalXS};
+  }
+
+  :host([size='small']) .control {
+    min-height: 24px;
+    min-width: 64px;
+    padding: 0 ${spacingHorizontalS};
+    border-radius: ${borderRadiusSmall};
+    font-size: ${fontSizeBase200};
+    line-height: ${lineHeightBase200};
+    font-weight: ${fontWeightRegular};
+  }
+
+  :host([size='small'][icon-only]) .control {
+    min-width: 24px;
+    max-width: 24px;
+  }
+
+  :host([size='large']) .control {
+    min-height: 40px;
+    border-radius: ${borderRadiusLarge};
+    padding: 0 ${spacingHorizontalL};
+    font-size: ${fontSizeBase400};
+    line-height: ${lineHeightBase400};
+  }
+
+  :host([size='large'][icon-only]) .control {
+    min-width: 40px;
+    max-width: 40px;
+  }
+
+  :host([size='large']) ::slotted(svg) {
+    font-size: 24px;
+    height: 24px;
+    width: 24px;
+  }
+
+  :host([shape='circular']) .control,
+  :host([shape='circular']) .control:focus-visible {
+    border-radius: ${borderRadiusCircular};
+  }
+
+  :host([shape='square']) .control,
+  :host([shape='square']) .control:focus-visible {
+    border-radius: ${borderRadiusNone};
+  }
+
+  :host([appearance='primary']) .control {
+    background-color: ${colorBrandBackground};
+    color: ${colorNeutralForegroundOnBrand};
+    border-color: transparent;
+  }
+
+  :host([appearance='primary']:hover) .control {
+    background-color: ${colorBrandBackgroundHover};
+  }
+
+  :host([appearance='primary']:hover) .control,
+  :host([appearance='primary']:hover:active) .control {
+    border-color: transparent;
+    color: ${colorNeutralForegroundOnBrand};
+  }
+
+  :host([appearance='primary']:hover:active) .control {
+    background-color: ${colorBrandBackgroundPressed};
+  }
+
+  :host([appearance='primary']) .control:focus-visible {
+    border-color: ${colorNeutralForegroundOnBrand};
+    box-shadow: ${shadow2}, 0 0 0 2px ${colorStrokeFocus2};
+  }
+
+  :host(:is([disabled][appearance='primary'], [disabled-focusabale][appearance='primary'])) .control,
+  :host(:is([disabled][appearance='primary'], [disabled-focusabale][appearance='primary']):hover) .control,
+  :host(:is([disabled][appearance='primary'], [disabled-focusabale][appearance='primary']):hover:active) .control {
+    border-color: transparent;
+  }
+
+  :host([appearance='outline']) .control {
+    background-color: ${colorTransparentBackground};
+  }
+
+  :host([appearance='outline']:hover) .control {
+    background-color: ${colorTransparentBackgroundHover};
+  }
+
+  :host([appearance='outline']:hover:active) .control {
+    background-color: ${colorTransparentBackgroundPressed};
+  }
+
+  :host(:is([disabled][appearance='outline'], [disabled-focusabale][appearance='outline'])) .control,
+  :host(:is([disabled][appearance='outline'], [disabled-focusabale][appearance='outline']):hover) .control,
+  :host(:is([disabled][appearance='outline'], [disabled-focusabale][appearance='outline']):hover:active) .control {
+    background-color: ${colorTransparentBackground};
+  }
+
+  :host([appearance='subtle']) .control {
+    background-color: ${colorSubtleBackground};
+    color: ${colorNeutralForeground2};
+    border-color: transparent;
+  }
+
+  :host([appearance='subtle']:hover) .control {
+    background-color: ${colorSubtleBackgroundHover};
+    color: ${colorNeutralForeground2Hover};
+    border-color: transparent;
+  }
+
+  :host([appearance='subtle']:hover:active) .control {
+    background-color: ${colorSubtleBackgroundPressed};
+    color: ${colorNeutralForeground2Pressed};
+    border-color: transparent;
+  }
+
+  :host(:is([disabled][appearance='subtle'], [disabled-focusabale][appearance='subtle'])) .control,
+  :host(:is([disabled][appearance='subtle'], [disabled-focusabale][appearance='subtle']):hover) .control,
+  :host(:is([disabled][appearance='subtle'], [disabled-focusabale][appearance='subtle']):hover:active) .control {
+    background-color: ${colorTransparentBackground};
+    border-color: transparent;
+  }
+
+  :host([appearance='subtle']:hover) ::slotted(svg) {
+    fill: ${colorNeutralForeground2BrandHover};
+  }
+
+  :host([appearance='subtle']:hover:active) ::slotted(svg) {
+    fill: ${colorNeutralForeground2BrandPressed};
+  }
+
+  :host([appearance='transparent']) .control {
+    background-color: ${colorTransparentBackground};
+    color: ${colorNeutralForeground2};
+  }
+
+  :host([appearance='transparent']:hover) .control {
+    background-color: ${colorTransparentBackgroundHover};
+    color: ${colorNeutralForeground2BrandHover};
+  }
+
+  :host([appearance='transparent']:hover:active) .control {
+    background-color: ${colorTransparentBackgroundPressed};
+    color: ${colorNeutralForeground2BrandPressed};
+  }
+
+  :host([appearance='transparent']) .control,
+  :host([appearance='transparent']:hover) .control,
+  :host([appearance='transparent']:hover:active) .control {
+    border-color: transparent;
+  }
+
+  :host(:is([disabled][appearance='transparent'], [disabled-focusabale][appearance='transparent'])) .control,
+  :host(:is([disabled][appearance='transparent'], [disabled-focusabale][appearance='transparent']):hover) .control,
+  :host(:is([disabled][appearance='transparent'], [disabled-focusabale][appearance='transparent']):hover:active)
+    .control {
+    border-color: transparent;
+    background-color: ${colorTransparentBackground};
+  }
+
+  :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable])) .control,
+  :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable]):hover) .control,
+  :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable]):hover:active)
+    .control {
+    background-color: ${colorNeutralBackgroundDisabled};
+    border-color: ${colorNeutralStrokeDisabled};
+    color: ${colorNeutralForegroundDisabled};
+    cursor: not-allowed;
+  }
+`.withBehaviors(forcedColorsStylesheetBehavior(css `
+    :host([appearance='transparent']:hover) .control {
+      border-color: Highlight;
+    }
+  `));
 //# sourceMappingURL=anchor-button.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"anchor-button.styles.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAEpE,oCAAoC;AACpC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,YAAY;;;;;CAKf,CAAC"}
+{"version":3,"file":"anchor-button.styles.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.styles.ts"],"names":[],"mappings":"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"}