@ni/nimble-components 29.1.3 → 29.1.5

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

@@ -21,6 +21,12 @@ export declare class Anchor extends AnchorBase {
      * HTML Attribute: appearance
      */
     appearance: AnchorAppearance;
+    /**
+     * @public
+     * @remarks
+     * HTML Attribute: tabindex
+     */
+    tabIndex: number;
     /**
      * @public
      * @remarks

package/dist/esm/anchor/index.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { attr } from '@microsoft/fast-element';
+import { attr, nullableNumberConverter } from '@microsoft/fast-element';
 import { DesignSystem, Anchor as FoundationAnchor } from '@microsoft/fast-foundation';
 import { AnchorBase } from '../anchor-base';
 import { styles } from './styles';
@@ -24,6 +24,9 @@ __decorate([
 __decorate([
     attr
 ], Anchor.prototype, "appearance", void 0);
+__decorate([
+    attr({ attribute: 'tabindex', converter: nullableNumberConverter })
+], Anchor.prototype, "tabIndex", void 0);
 __decorate([
     attr({ attribute: 'contenteditable' })
 ], Anchor.prototype, "contentEditable", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/anchor/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,YAAY,EACZ,MAAM,IAAI,gBAAgB,EAE7B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAStC;;GAEG;AACH,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QACI;;;;WAIG;QAEI,oBAAe,GAAG,KAAK,CAAC;IAsBnC,CAAC;CAAA;AAtBU;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;+CAC1B;AAQxB;IADN,IAAI;0CAC+B;AAapB;IADf,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;+CACE;AAG7C,uFAAuF;AAEvF,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC;AACzE,MAAM,CAAC,MAAM,SAAS,GAAG,eAAe,CAAC","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport {\n    DesignSystem,\n    Anchor as FoundationAnchor,\n    AnchorOptions\n} from '@microsoft/fast-foundation';\nimport { AnchorBase } from '../anchor-base';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { AnchorAppearance } from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-anchor': Anchor;\n    }\n}\n\n/**\n * A nimble-styled anchor\n */\nexport class Anchor extends AnchorBase {\n    /**\n     * @public\n     * @remarks\n     * HTML Attribute: underline-hidden\n     */\n    @attr({ attribute: 'underline-hidden', mode: 'boolean' })\n    public underlineHidden = false;\n\n    /**\n     * @public\n     * @remarks\n     * HTML Attribute: appearance\n     */\n    @attr\n    public appearance: AnchorAppearance;\n\n    /**\n     * @public\n     * @remarks\n     * HTML Attribute: contenteditable\n     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable\n     *\n     * Ideally, proper support for contenteditable should come from FAST.\n     * I have filed bug https://github.com/microsoft/fast/issues/6870 to them.\n     * If/when it is fixed, we can remove this workaround.\n     */\n    @attr({ attribute: 'contenteditable' })\n    public override contentEditable!: string;\n}\n\n// FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.\n\nconst nimbleAnchor = Anchor.compose<AnchorOptions>({\n    baseName: 'anchor',\n    baseClass: FoundationAnchor,\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    }\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchor());\nexport const anchorTag = 'nimble-anchor';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/anchor/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EACH,YAAY,EACZ,MAAM,IAAI,gBAAgB,EAE7B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAStC;;GAEG;AACH,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QACI;;;;WAIG;QAEI,oBAAe,GAAG,KAAK,CAAC;IA8BnC,CAAC;CAAA;AA9BU;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;+CAC1B;AAQxB;IADN,IAAI;0CAC+B;AAQpB;IADf,IAAI,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;wCAClC;AAalB;IADf,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;+CACE;AAG7C,uFAAuF;AAEvF,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC;AACzE,MAAM,CAAC,MAAM,SAAS,GAAG,eAAe,CAAC","sourcesContent":["import { attr, nullableNumberConverter } from '@microsoft/fast-element';\nimport {\n    DesignSystem,\n    Anchor as FoundationAnchor,\n    AnchorOptions\n} from '@microsoft/fast-foundation';\nimport { AnchorBase } from '../anchor-base';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { AnchorAppearance } from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-anchor': Anchor;\n    }\n}\n\n/**\n * A nimble-styled anchor\n */\nexport class Anchor extends AnchorBase {\n    /**\n     * @public\n     * @remarks\n     * HTML Attribute: underline-hidden\n     */\n    @attr({ attribute: 'underline-hidden', mode: 'boolean' })\n    public underlineHidden = false;\n\n    /**\n     * @public\n     * @remarks\n     * HTML Attribute: appearance\n     */\n    @attr\n    public appearance: AnchorAppearance;\n\n    /**\n     * @public\n     * @remarks\n     * HTML Attribute: tabindex\n     */\n    @attr({ attribute: 'tabindex', converter: nullableNumberConverter })\n    public override tabIndex!: number;\n\n    /**\n     * @public\n     * @remarks\n     * HTML Attribute: contenteditable\n     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable\n     *\n     * Ideally, proper support for contenteditable should come from FAST.\n     * I have filed bug https://github.com/microsoft/fast/issues/6870 to them.\n     * If/when it is fixed, we can remove this workaround.\n     */\n    @attr({ attribute: 'contenteditable' })\n    public override contentEditable!: string;\n}\n\n// FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.\n\nconst nimbleAnchor = Anchor.compose<AnchorOptions>({\n    baseName: 'anchor',\n    baseClass: FoundationAnchor,\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    }\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchor());\nexport const anchorTag = 'nimble-anchor';\n"]}

package/dist/esm/anchor/styles.js

@@ -1,7 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '../utilities/style/display';
 import { focusVisible } from '../utilities/style/focus';
-import { linkActiveFontColor, linkActiveProminentFontColor, linkDisabledFontColor, linkFont, linkFontColor, linkProminentFontColor } from '../theme-provider/design-tokens';
+import { borderHoverColor, linkActiveFontColor, linkActiveProminentFontColor, linkDisabledFontColor, linkFont, linkFontColor, linkProminentFontColor } from '../theme-provider/design-tokens';
 export const styles = css `
     @layer base, hover, focusVisible, active, disabled;
 
@@ -54,6 +54,7 @@ export const styles = css `
             outline: none;
             box-shadow: inset 0px -1px;
             text-decoration: underline;
+            color: ${borderHoverColor};
         }
     }
 

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EACH,mBAAmB,EACnB,4BAA4B,EAC5B,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,sBAAsB,EACzB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,QAAQ,CAAC;;;;oBAIP,QAAQ;;;;;;;;qBAQP,aAAa;;;;;;;;;qBASb,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;kBAuBzB,YAAY;;;;;;;;;qBAST,mBAAmB;;;;;;qBAMnB,4BAA4B;;;;;;;;;;qBAU5B,qBAAqB;;;CAGzC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport { focusVisible } from '../utilities/style/focus';\nimport {\n    linkActiveFontColor,\n    linkActiveProminentFontColor,\n    linkDisabledFontColor,\n    linkFont,\n    linkFontColor,\n    linkProminentFontColor\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    @layer base, hover, focusVisible, active, disabled;\n\n    @layer base {\n        ${display('inline')}\n\n        :host {\n            box-sizing: border-box;\n            font: ${linkFont};\n        }\n\n        .top-container {\n            display: contents;\n        }\n\n        .control {\n            color: ${linkFontColor};\n            text-decoration: underline;\n        }\n\n        :host([underline-hidden]) .control {\n            text-decoration: none;\n        }\n\n        :host([appearance='prominent']) .control {\n            color: ${linkProminentFontColor};\n        }\n\n        [part='start'] {\n            display: none;\n        }\n\n        .content {\n            pointer-events: none;\n        }\n\n        [part='end'] {\n            display: none;\n        }\n    }\n\n    @layer hover {\n        .control:any-link:hover {\n            text-decoration: underline;\n        }\n    }\n\n    @layer focusVisible {\n        .control${focusVisible} {\n            outline: none;\n            box-shadow: inset 0px -1px;\n            text-decoration: underline;\n        }\n    }\n\n    @layer active {\n        .control:active {\n            color: ${linkActiveFontColor};\n            text-decoration: underline;\n            box-shadow: none;\n        }\n\n        :host([appearance='prominent']) .control:active {\n            color: ${linkActiveProminentFontColor};\n        }\n\n        :host([underline-hidden]) .control:active {\n            text-decoration: none;\n        }\n    }\n\n    @layer disabled {\n        .control:not(:any-link) {\n            color: ${linkDisabledFontColor};\n        }\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EACH,gBAAgB,EAChB,mBAAmB,EACnB,4BAA4B,EAC5B,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,sBAAsB,EACzB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,QAAQ,CAAC;;;;oBAIP,QAAQ;;;;;;;;qBAQP,aAAa;;;;;;;;;qBASb,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;kBAuBzB,YAAY;;;;qBAIT,gBAAgB;;;;;;qBAMhB,mBAAmB;;;;;;qBAMnB,4BAA4B;;;;;;;;;;qBAU5B,qBAAqB;;;CAGzC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport { focusVisible } from '../utilities/style/focus';\nimport {\n    borderHoverColor,\n    linkActiveFontColor,\n    linkActiveProminentFontColor,\n    linkDisabledFontColor,\n    linkFont,\n    linkFontColor,\n    linkProminentFontColor\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    @layer base, hover, focusVisible, active, disabled;\n\n    @layer base {\n        ${display('inline')}\n\n        :host {\n            box-sizing: border-box;\n            font: ${linkFont};\n        }\n\n        .top-container {\n            display: contents;\n        }\n\n        .control {\n            color: ${linkFontColor};\n            text-decoration: underline;\n        }\n\n        :host([underline-hidden]) .control {\n            text-decoration: none;\n        }\n\n        :host([appearance='prominent']) .control {\n            color: ${linkProminentFontColor};\n        }\n\n        [part='start'] {\n            display: none;\n        }\n\n        .content {\n            pointer-events: none;\n        }\n\n        [part='end'] {\n            display: none;\n        }\n    }\n\n    @layer hover {\n        .control:any-link:hover {\n            text-decoration: underline;\n        }\n    }\n\n    @layer focusVisible {\n        .control${focusVisible} {\n            outline: none;\n            box-shadow: inset 0px -1px;\n            text-decoration: underline;\n            color: ${borderHoverColor};\n        }\n    }\n\n    @layer active {\n        .control:active {\n            color: ${linkActiveFontColor};\n            text-decoration: underline;\n            box-shadow: none;\n        }\n\n        :host([appearance='prominent']) .control:active {\n            color: ${linkActiveProminentFontColor};\n        }\n\n        :host([underline-hidden]) .control:active {\n            text-decoration: none;\n        }\n    }\n\n    @layer disabled {\n        .control:not(:any-link) {\n            color: ${linkDisabledFontColor};\n        }\n    }\n`;\n"]}

package/dist/esm/anchor/template.js

@@ -17,6 +17,7 @@ export const template = (_context, definition) => html `${
         rel="${x => x.rel}"
         target="${x => x.target}"
         type="${x => x.type}"
+        tabindex="${x => x.tabIndex}"
         aria-atomic="${x => x.ariaAtomic}"
         aria-busy="${x => x.ariaBusy}"
         aria-controls="${x => x.ariaControls}"

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

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/anchor/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAgB,MAAM,yBAAyB,CAAC;AAO3E,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAGjB,CAAC,QAAQ,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAQ,GAAG;AACzC;;EAEE,CAAC,EACP;;2BAE2B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;;;;oBAI7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;eACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;oBACN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;gBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;0BACD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;eAChC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG;kBACP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;gBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;uBACJ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;qBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;yBACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;wBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;4BACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;wBAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;yBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;6BACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;yBAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;uBACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;yBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;uBACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;wBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;6BACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;sBAC9B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;2BACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;qBAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;qBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;yBACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;gCACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;UAChD,GAAG,CAAC,SAAS,CAAC;OACjB;AACH;;;qEAGqE,CAAC,EAC1E;;UAEU,GAAG,CAAC,gBAAgB,CAAC;iBACd,EAAE,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;;;cAG5C,GAAG,CAAC,OAAO,CAAC;2BACC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,wBAAwB,EAAE;cAC9C,UAAU,CAAC,KAAK,IAAI,EAAE;;;;;;;cAOtB,OAAO,CAAC,uBAAuB,CAAC;;;;;UAKpC,GAAG,CAAC,cAAc,CAAC;gBACb,EAAE,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;;;cAGvC,GAAG,CAAC,KAAK,CAAC;2BACG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,sBAAsB,EAAE;cAC5C,UAAU,CAAC,GAAG,IAAI,EAAE;;uBAEX,CAAC","sourcesContent":["import { html, ref, slotted, ViewTemplate } from '@microsoft/fast-element';\nimport type {\n    AnchorOptions,\n    FoundationElementTemplate\n} from '@microsoft/fast-foundation';\nimport type { Anchor } from '.';\n\n// prettier-ignore\nexport const template: FoundationElementTemplate<\nViewTemplate<Anchor>,\nAnchorOptions\n> = (_context, definition) => html<Anchor>`${\n    /* top-container div is necessary because setting contenteditable directly on the native anchor instead\n       leaves it focusable, unlike the behavior you get when the anchor is _within_ a contenteditable element.\n    */ ''\n}<div\n        class=\"top-container\"\n        contenteditable=\"${x => x.contentEditable}\"\n    ><a\n        class=\"control\"\n        part=\"control\"\n        download=\"${x => x.download}\"\n        href=${x => x.href}\n        hreflang=\"${x => x.hreflang}\"\n        ping=\"${x => x.ping}\"\n        referrerpolicy=\"${x => x.referrerpolicy}\"\n        rel=\"${x => x.rel}\"\n        target=\"${x => x.target}\"\n        type=\"${x => x.type}\"\n        aria-atomic=\"${x => x.ariaAtomic}\"\n        aria-busy=\"${x => x.ariaBusy}\"\n        aria-controls=\"${x => x.ariaControls}\"\n        aria-current=\"${x => x.ariaCurrent}\"\n        aria-describedby=\"${x => x.ariaDescribedby}\"\n        aria-details=\"${x => x.ariaDetails}\"\n        aria-disabled=\"${x => x.ariaDisabled}\"\n        aria-errormessage=\"${x => x.ariaErrormessage}\"\n        aria-expanded=\"${x => x.ariaExpanded}\"\n        aria-flowto=\"${x => x.ariaFlowto}\"\n        aria-haspopup=\"${x => x.ariaHaspopup}\"\n        aria-hidden=\"${x => x.ariaHidden}\"\n        aria-invalid=\"${x => x.ariaInvalid}\"\n        aria-keyshortcuts=\"${x => x.ariaKeyshortcuts}\"\n        aria-label=\"${x => x.ariaLabel}\"\n        aria-labelledby=\"${x => x.ariaLabelledby}\"\n        aria-live=\"${x => x.ariaLive}\"\n        aria-owns=\"${x => x.ariaOwns}\"\n        aria-relevant=\"${x => x.ariaRelevant}\"\n        aria-roledescription=\"${x => x.ariaRoledescription}\"\n        ${ref('control')}\n    >${\n    /* Start and End slot templates inlined to avoid extra whitespace.\n       See https://github.com/microsoft/fast/issues/6557\n\n       Whitespace intentionally avoided between tags for inline styles */ ''\n}<span\n        part=\"start\"\n        ${ref('startContainer')}\n        class=\"${_x => (definition.start ? 'start' : null)}\"\n        ><slot\n            name=\"start\"\n            ${ref('start')}\n            @slotchange=\"${x => x.handleStartContentChange()}\">\n            ${definition.start || ''}\n        </slot\n    ></span\n    ><span\n        class=\"content\"\n        part=\"content\"\n        ><slot\n            ${slotted('defaultSlottedContent')}\n        ></slot\n    ></span\n    ><span\n        part=\"end\"\n        ${ref('endContainer')}\n        class=${_x => (definition.end ? 'end' : null)}\n        ><slot\n            name=\"end\"\n            ${ref('end')}\n            @slotchange=\"${x => x.handleEndContentChange()}\">\n            ${definition.end || ''}\n        </slot\n    ></span></a></div>`;\n"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/anchor/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAgB,MAAM,yBAAyB,CAAC;AAO3E,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAGjB,CAAC,QAAQ,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAQ,GAAG;AACzC;;EAEE,CAAC,EACP;;2BAE2B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;;;;oBAI7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;eACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;oBACN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;gBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;0BACD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;eAChC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG;kBACP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;gBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;oBACP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;qBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;yBACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;wBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;4BACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;wBAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;yBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;6BACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;yBAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;uBACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;yBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;uBACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;wBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;6BACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;sBAC9B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;2BACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;qBAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;qBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;yBACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;gCACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;UAChD,GAAG,CAAC,SAAS,CAAC;OACjB;AACH;;;qEAGqE,CAAC,EAC1E;;UAEU,GAAG,CAAC,gBAAgB,CAAC;iBACd,EAAE,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;;;cAG5C,GAAG,CAAC,OAAO,CAAC;2BACC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,wBAAwB,EAAE;cAC9C,UAAU,CAAC,KAAK,IAAI,EAAE;;;;;;;cAOtB,OAAO,CAAC,uBAAuB,CAAC;;;;;UAKpC,GAAG,CAAC,cAAc,CAAC;gBACb,EAAE,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;;;cAGvC,GAAG,CAAC,KAAK,CAAC;2BACG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,sBAAsB,EAAE;cAC5C,UAAU,CAAC,GAAG,IAAI,EAAE;;uBAEX,CAAC","sourcesContent":["import { html, ref, slotted, ViewTemplate } from '@microsoft/fast-element';\nimport type {\n    AnchorOptions,\n    FoundationElementTemplate\n} from '@microsoft/fast-foundation';\nimport type { Anchor } from '.';\n\n// prettier-ignore\nexport const template: FoundationElementTemplate<\nViewTemplate<Anchor>,\nAnchorOptions\n> = (_context, definition) => html<Anchor>`${\n    /* top-container div is necessary because setting contenteditable directly on the native anchor instead\n       leaves it focusable, unlike the behavior you get when the anchor is _within_ a contenteditable element.\n    */ ''\n}<div\n        class=\"top-container\"\n        contenteditable=\"${x => x.contentEditable}\"\n    ><a\n        class=\"control\"\n        part=\"control\"\n        download=\"${x => x.download}\"\n        href=${x => x.href}\n        hreflang=\"${x => x.hreflang}\"\n        ping=\"${x => x.ping}\"\n        referrerpolicy=\"${x => x.referrerpolicy}\"\n        rel=\"${x => x.rel}\"\n        target=\"${x => x.target}\"\n        type=\"${x => x.type}\"\n        tabindex=\"${x => x.tabIndex}\"\n        aria-atomic=\"${x => x.ariaAtomic}\"\n        aria-busy=\"${x => x.ariaBusy}\"\n        aria-controls=\"${x => x.ariaControls}\"\n        aria-current=\"${x => x.ariaCurrent}\"\n        aria-describedby=\"${x => x.ariaDescribedby}\"\n        aria-details=\"${x => x.ariaDetails}\"\n        aria-disabled=\"${x => x.ariaDisabled}\"\n        aria-errormessage=\"${x => x.ariaErrormessage}\"\n        aria-expanded=\"${x => x.ariaExpanded}\"\n        aria-flowto=\"${x => x.ariaFlowto}\"\n        aria-haspopup=\"${x => x.ariaHaspopup}\"\n        aria-hidden=\"${x => x.ariaHidden}\"\n        aria-invalid=\"${x => x.ariaInvalid}\"\n        aria-keyshortcuts=\"${x => x.ariaKeyshortcuts}\"\n        aria-label=\"${x => x.ariaLabel}\"\n        aria-labelledby=\"${x => x.ariaLabelledby}\"\n        aria-live=\"${x => x.ariaLive}\"\n        aria-owns=\"${x => x.ariaOwns}\"\n        aria-relevant=\"${x => x.ariaRelevant}\"\n        aria-roledescription=\"${x => x.ariaRoledescription}\"\n        ${ref('control')}\n    >${\n    /* Start and End slot templates inlined to avoid extra whitespace.\n       See https://github.com/microsoft/fast/issues/6557\n\n       Whitespace intentionally avoided between tags for inline styles */ ''\n}<span\n        part=\"start\"\n        ${ref('startContainer')}\n        class=\"${_x => (definition.start ? 'start' : null)}\"\n        ><slot\n            name=\"start\"\n            ${ref('start')}\n            @slotchange=\"${x => x.handleStartContentChange()}\">\n            ${definition.start || ''}\n        </slot\n    ></span\n    ><span\n        class=\"content\"\n        part=\"content\"\n        ><slot\n            ${slotted('defaultSlottedContent')}\n        ></slot\n    ></span\n    ><span\n        part=\"end\"\n        ${ref('endContainer')}\n        class=${_x => (definition.end ? 'end' : null)}\n        ><slot\n            name=\"end\"\n            ${ref('end')}\n            @slotchange=\"${x => x.handleEndContentChange()}\">\n            ${definition.end || ''}\n        </slot\n    ></span></a></div>`;\n"]}

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

@@ -28,5 +28,11 @@ export declare class Button extends FoundationButton implements ButtonPattern, B
      * HTML Attribute: content-hidden
      */
     contentHidden: boolean;
+    /**
+     * @public
+     * @remarks
+     * HTML Attribute: tabindex
+     */
+    tabIndex: number;
 }
 export declare const buttonTag = "nimble-button";

package/dist/esm/button/index.js

@@ -1,7 +1,8 @@
 import { __decorate } from "tslib";
-import { attr } from '@microsoft/fast-element';
-import { Button as FoundationButton, buttonTemplate as template, DesignSystem } from '@microsoft/fast-foundation';
+import { attr, nullableNumberConverter } from '@microsoft/fast-element';
+import { Button as FoundationButton, DesignSystem } from '@microsoft/fast-foundation';
 import { styles } from './styles';
+import { template } from './template';
 import { ButtonAppearance } from './types';
 /**
  * A nimble-styled HTML button
@@ -32,6 +33,9 @@ __decorate([
 __decorate([
     attr({ attribute: 'content-hidden', mode: 'boolean' })
 ], Button.prototype, "contentHidden", void 0);
+__decorate([
+    attr({ attribute: 'tabindex', converter: nullableNumberConverter })
+], Button.prototype, "tabIndex", void 0);
 /**
  * A function that returns a nimble-button registration for configuring the component with a DesignSystem.
  * Implements {@link @microsoft/fast-foundation#buttonTemplate}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,MAAM,IAAI,gBAAgB,EAE1B,cAAc,IAAI,QAAQ,EAC1B,YAAY,EACf,MAAM,4BAA4B,CAAC;AAKpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAA2B,MAAM,SAAS,CAAC;AAQpE;;GAEG;AACH,MAAM,OAAO,MACT,SAAQ,gBAAgB;IAD5B;;QAGI;;;;WAIG;QAEI,eAAU,GAAqB,gBAAgB,CAAC,OAAO,CAAC;QAU/D;;;;WAIG;QAEI,kBAAa,GAAG,KAAK,CAAC;IACjC,CAAC;CAAA;AAjBU;IADN,IAAI;0CAC0D;AAQxD;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;iDACQ;AAQ3C;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;6CAC1B;AAGjC;;;;;;;;GAQG;AACH,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC;AACzE,MAAM,CAAC,MAAM,SAAS,GAAG,eAAe,CAAC","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport {\n    Button as FoundationButton,\n    ButtonOptions,\n    buttonTemplate as template,\n    DesignSystem\n} from '@microsoft/fast-foundation';\nimport type {\n    ButtonPattern,\n    ButtonAppearanceVariantPattern\n} from '../patterns/button/types';\nimport { styles } from './styles';\nimport { ButtonAppearance, ButtonAppearanceVariant } from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-button': Button;\n    }\n}\n\n/**\n * A nimble-styled HTML button\n */\nexport class Button\n    extends FoundationButton\n    implements ButtonPattern, ButtonAppearanceVariantPattern {\n    /**\n     * @public\n     * @remarks\n     * HTML Attribute: appearance\n     */\n    @attr\n    public appearance: ButtonAppearance = ButtonAppearance.outline;\n\n    /**\n     * @public\n     * @remarks\n     * HTML Attribute: appearance-variant\n     */\n    @attr({ attribute: 'appearance-variant' })\n    public appearanceVariant: ButtonAppearanceVariant;\n\n    /**\n     * @public\n     * @remarks\n     * HTML Attribute: content-hidden\n     */\n    @attr({ attribute: 'content-hidden', mode: 'boolean' })\n    public contentHidden = false;\n}\n\n/**\n * A function that returns a nimble-button registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#buttonTemplate}\n *\n * @public\n * @remarks\n * Generates HTML Element: \\<nimble-button\\>\n *\n */\nconst nimbleButton = Button.compose<ButtonOptions>({\n    baseName: 'button',\n    baseClass: FoundationButton,\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    }\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleButton());\nexport const buttonTag = 'nimble-button';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EACH,MAAM,IAAI,gBAAgB,EAE1B,YAAY,EACf,MAAM,4BAA4B,CAAC;AAKpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAA2B,MAAM,SAAS,CAAC;AAQpE;;GAEG;AACH,MAAM,OAAO,MACT,SAAQ,gBAAgB;IAD5B;;QAGI;;;;WAIG;QAEI,eAAU,GAAqB,gBAAgB,CAAC,OAAO,CAAC;QAU/D;;;;WAIG;QAEI,kBAAa,GAAG,KAAK,CAAC;IASjC,CAAC;CAAA;AAzBU;IADN,IAAI;0CAC0D;AAQxD;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;iDACQ;AAQ3C;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;6CAC1B;AAQb;IADf,IAAI,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;wCAClC;AAGtC;;;;;;;;GAQG;AACH,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC;AACzE,MAAM,CAAC,MAAM,SAAS,GAAG,eAAe,CAAC","sourcesContent":["import { attr, nullableNumberConverter } from '@microsoft/fast-element';\nimport {\n    Button as FoundationButton,\n    ButtonOptions,\n    DesignSystem\n} from '@microsoft/fast-foundation';\nimport type {\n    ButtonPattern,\n    ButtonAppearanceVariantPattern\n} from '../patterns/button/types';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { ButtonAppearance, ButtonAppearanceVariant } from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-button': Button;\n    }\n}\n\n/**\n * A nimble-styled HTML button\n */\nexport class Button\n    extends FoundationButton\n    implements ButtonPattern, ButtonAppearanceVariantPattern {\n    /**\n     * @public\n     * @remarks\n     * HTML Attribute: appearance\n     */\n    @attr\n    public appearance: ButtonAppearance = ButtonAppearance.outline;\n\n    /**\n     * @public\n     * @remarks\n     * HTML Attribute: appearance-variant\n     */\n    @attr({ attribute: 'appearance-variant' })\n    public appearanceVariant: ButtonAppearanceVariant;\n\n    /**\n     * @public\n     * @remarks\n     * HTML Attribute: content-hidden\n     */\n    @attr({ attribute: 'content-hidden', mode: 'boolean' })\n    public contentHidden = false;\n\n    /**\n     * @public\n     * @remarks\n     * HTML Attribute: tabindex\n     */\n    @attr({ attribute: 'tabindex', converter: nullableNumberConverter })\n    public override tabIndex!: number;\n}\n\n/**\n * A function that returns a nimble-button registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#buttonTemplate}\n *\n * @public\n * @remarks\n * Generates HTML Element: \\<nimble-button\\>\n *\n */\nconst nimbleButton = Button.compose<ButtonOptions>({\n    baseName: 'button',\n    baseClass: FoundationButton,\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    }\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleButton());\nexport const buttonTag = 'nimble-button';\n"]}

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

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import { ButtonOptions, FoundationElementTemplate } from '@microsoft/fast-foundation';
+import type { Button } from '.';
+export declare const template: FoundationElementTemplate<ViewTemplate<Button>, ButtonOptions>;

package/dist/esm/button/template.js

@@ -0,0 +1,49 @@
+import { html, ref, slotted } from '@microsoft/fast-element';
+import { endSlotTemplate, startSlotTemplate } from '@microsoft/fast-foundation';
+export const template = (context, definition) => 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}"
+        tabindex="${x => x.tabIndex}"
+        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(context, definition)}
+        <span class="content" part="content">
+            <slot ${slotted('defaultSlottedContent')}></slot>
+        </span>
+        ${endSlotTemplate(context, definition)}
+    </button>
+`;
+//# sourceMappingURL=template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/button/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,EAEH,eAAe,EAEf,iBAAiB,EACpB,MAAM,4BAA4B,CAAC;AAGpC,MAAM,CAAC,MAAM,QAAQ,GAGjB,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAA;;;;sBAIX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;qBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;gBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;sBACP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;uBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;sBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;0BACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;sBACzB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;gBACvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;gBACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;iBACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;oBACT,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;qBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;yBACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;wBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;4BACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;wBAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;yBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;6BACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;yBAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;uBACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;yBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;uBACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;wBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;6BACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;sBAC9B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;2BACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;qBAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;qBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;wBACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;yBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;gCACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;UAChD,GAAG,CAAC,SAAS,CAAC;;UAEd,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC;;oBAE5B,OAAO,CAAC,uBAAuB,CAAC;;UAE1C,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;;CAE7C,CAAC","sourcesContent":["import { html, ref, slotted } from '@microsoft/fast-element';\nimport type { ViewTemplate } from '@microsoft/fast-element';\nimport {\n    ButtonOptions,\n    endSlotTemplate,\n    FoundationElementTemplate,\n    startSlotTemplate\n} from '@microsoft/fast-foundation';\nimport type { Button } from '.';\n\nexport const template: FoundationElementTemplate<\nViewTemplate<Button>,\nButtonOptions\n> = (context, definition) => html`\n    <button\n        class=\"control\"\n        part=\"control\"\n        ?autofocus=\"${x => x.autofocus}\"\n        ?disabled=\"${x => x.disabled}\"\n        form=\"${x => x.formId}\"\n        formaction=\"${x => x.formaction}\"\n        formenctype=\"${x => x.formenctype}\"\n        formmethod=\"${x => x.formmethod}\"\n        formnovalidate=\"${x => x.formnovalidate}\"\n        formtarget=\"${x => x.formtarget}\"\n        name=\"${x => x.name}\"\n        type=\"${x => x.type}\"\n        value=\"${x => x.value}\"\n        tabindex=\"${x => x.tabIndex}\"\n        aria-atomic=\"${x => x.ariaAtomic}\"\n        aria-busy=\"${x => x.ariaBusy}\"\n        aria-controls=\"${x => x.ariaControls}\"\n        aria-current=\"${x => x.ariaCurrent}\"\n        aria-describedby=\"${x => x.ariaDescribedby}\"\n        aria-details=\"${x => x.ariaDetails}\"\n        aria-disabled=\"${x => x.ariaDisabled}\"\n        aria-errormessage=\"${x => x.ariaErrormessage}\"\n        aria-expanded=\"${x => x.ariaExpanded}\"\n        aria-flowto=\"${x => x.ariaFlowto}\"\n        aria-haspopup=\"${x => x.ariaHaspopup}\"\n        aria-hidden=\"${x => x.ariaHidden}\"\n        aria-invalid=\"${x => x.ariaInvalid}\"\n        aria-keyshortcuts=\"${x => x.ariaKeyshortcuts}\"\n        aria-label=\"${x => x.ariaLabel}\"\n        aria-labelledby=\"${x => x.ariaLabelledby}\"\n        aria-live=\"${x => x.ariaLive}\"\n        aria-owns=\"${x => x.ariaOwns}\"\n        aria-pressed=\"${x => x.ariaPressed}\"\n        aria-relevant=\"${x => x.ariaRelevant}\"\n        aria-roledescription=\"${x => x.ariaRoledescription}\"\n        ${ref('control')}\n    >\n        ${startSlotTemplate(context, definition)}\n        <span class=\"content\" part=\"content\">\n            <slot ${slotted('defaultSlottedContent')}></slot>\n        </span>\n        ${endSlotTemplate(context, definition)}\n    </button>\n`;\n"]}

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

@@ -8,5 +8,15 @@ declare global {
  * A nimble-styled checkbox control.
  */
 export declare class Checkbox extends FoundationCheckbox {
+    /**
+     * @public
+     * @remarks
+     * HTML Attribute: tabindex
+     */
+    tabIndex: number;
+    /**
+     * @internal
+     */
+    get resolvedTabindex(): string | undefined;
 }
 export declare const checkboxTag = "nimble-checkbox";

package/dist/esm/checkbox/index.js

@@ -1,11 +1,24 @@
-import { DesignSystem, Checkbox as FoundationCheckbox, checkboxTemplate as template } from '@microsoft/fast-foundation';
+import { __decorate } from "tslib";
+import { attr, nullableNumberConverter } from '@microsoft/fast-element';
+import { DesignSystem, Checkbox as FoundationCheckbox } from '@microsoft/fast-foundation';
 import { check16X16, minus16X16 } from '@ni/nimble-tokens/dist/icons/js';
 import { styles } from './styles';
+import { template } from './template';
 /**
  * A nimble-styled checkbox control.
  */
 export class Checkbox extends FoundationCheckbox {
+    /**
+     * @internal
+     */
+    get resolvedTabindex() {
+        const tabIndex = this.tabIndex ?? 0;
+        return this.disabled ? undefined : `${tabIndex}`;
+    }
 }
+__decorate([
+    attr({ attribute: 'tabindex', converter: nullableNumberConverter })
+], Checkbox.prototype, "tabIndex", void 0);
 const nimbleCheckbox = Checkbox.compose({
     baseName: 'checkbox',
     baseClass: FoundationCheckbox,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,QAAQ,IAAI,kBAAkB,EAE9B,gBAAgB,IAAI,QAAQ,EAC/B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,kBAAkB;CAAG;AAEnD,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAkB;IACrD,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ;IACR,MAAM;IACN,gBAAgB,EAAE,UAAU,CAAC,IAAI;IACjC,sBAAsB,EAAE,UAAU,CAAC,IAAI;CAC1C,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import {\n    DesignSystem,\n    Checkbox as FoundationCheckbox,\n    CheckboxOptions,\n    checkboxTemplate as template\n} from '@microsoft/fast-foundation';\nimport { check16X16, minus16X16 } from '@ni/nimble-tokens/dist/icons/js';\nimport { styles } from './styles';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-checkbox': Checkbox;\n    }\n}\n\n/**\n * A nimble-styled checkbox control.\n */\nexport class Checkbox extends FoundationCheckbox {}\n\nconst nimbleCheckbox = Checkbox.compose<CheckboxOptions>({\n    baseName: 'checkbox',\n    baseClass: FoundationCheckbox,\n    template,\n    styles,\n    checkedIndicator: check16X16.data,\n    indeterminateIndicator: minus16X16.data\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());\nexport const checkboxTag = 'nimble-checkbox';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/checkbox/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EACH,YAAY,EACZ,QAAQ,IAAI,kBAAkB,EAEjC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,kBAAkB;IAS5C;;OAEG;IACH,IAAW,gBAAgB;QACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC;QACpC,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,QAAQ,EAAE,CAAC;IACrD,CAAC;CACJ;AATmB;IADf,IAAI,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;0CAClC;AAWtC,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAkB;IACrD,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ;IACR,MAAM;IACN,gBAAgB,EAAE,UAAU,CAAC,IAAI;IACjC,sBAAsB,EAAE,UAAU,CAAC,IAAI;CAC1C,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import { attr, nullableNumberConverter } from '@microsoft/fast-element';\nimport {\n    DesignSystem,\n    Checkbox as FoundationCheckbox,\n    CheckboxOptions\n} from '@microsoft/fast-foundation';\nimport { check16X16, minus16X16 } from '@ni/nimble-tokens/dist/icons/js';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-checkbox': Checkbox;\n    }\n}\n\n/**\n * A nimble-styled checkbox control.\n */\nexport class Checkbox extends FoundationCheckbox {\n    /**\n     * @public\n     * @remarks\n     * HTML Attribute: tabindex\n     */\n    @attr({ attribute: 'tabindex', converter: nullableNumberConverter })\n    public override tabIndex!: number;\n\n    /**\n     * @internal\n     */\n    public get resolvedTabindex(): string | undefined {\n        const tabIndex = this.tabIndex ?? 0;\n        return this.disabled ? undefined : `${tabIndex}`;\n    }\n}\n\nconst nimbleCheckbox = Checkbox.compose<CheckboxOptions>({\n    baseName: 'checkbox',\n    baseClass: FoundationCheckbox,\n    template,\n    styles,\n    checkedIndicator: check16X16.data,\n    indeterminateIndicator: minus16X16.data\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());\nexport const checkboxTag = 'nimble-checkbox';\n"]}

package/dist/esm/checkbox/template.d.ts

@@ -0,0 +1,4 @@
+import { type ViewTemplate } from '@microsoft/fast-element';
+import type { CheckboxOptions, FoundationElementTemplate } from '@microsoft/fast-foundation';
+import type { Checkbox } from '.';
+export declare const template: FoundationElementTemplate<ViewTemplate<Checkbox>, CheckboxOptions>;

package/dist/esm/checkbox/template.js

@@ -0,0 +1,32 @@
+import { html, slotted } from '@microsoft/fast-element';
+export const template = (_context, definition) => html `
+    <template
+        role="checkbox"
+        aria-checked="${x => x.checked}"
+        aria-required="${x => x.required}"
+        aria-disabled="${x => x.disabled}"
+        aria-readonly="${x => x.readOnly}"
+        tabindex="${x => x.resolvedTabindex}"
+        @keypress="${(x, c) => x.keypressHandler(c.event)}"
+        @click="${(x, c) => x.clickHandler(c.event)}"
+        class="${x => (x.readOnly ? 'readonly' : '')} ${x => (x.checked ? 'checked' : '')} ${x => (x.indeterminate ? 'indeterminate' : '')}"
+    >
+        <div part="control" class="control">
+            <slot name="checked-indicator">
+                ${definition.checkedIndicator || ''}
+            </slot>
+            <slot name="indeterminate-indicator">
+                ${definition.indeterminateIndicator || ''}
+            </slot>
+        </div>
+        <label
+            part="label"
+            class="${x => (x.defaultSlottedNodes?.length
+    ? 'label'
+    : 'label label__hidden')}"
+        >
+            <slot ${slotted('defaultSlottedNodes')}></slot>
+        </label>
+    </template>
+`;
+//# sourceMappingURL=template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/checkbox/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAqB,MAAM,yBAAyB,CAAC;AAO3E,MAAM,CAAC,MAAM,QAAQ,GAGjB,CAAC,QAAQ,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAA;;;wBAGV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;yBACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;yBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;yBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;oBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;qBACtB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAsB,CAAC;kBACxD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;iBAChD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;;;;kBAIxH,UAAU,CAAC,gBAAgB,IAAI,EAAE;;;kBAGjC,UAAU,CAAC,sBAAsB,IAAI,EAAE;;;;;qBAKpC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,mBAAmB,EAAE,MAAM;IAChD,CAAC,CAAC,OAAO;IACT,CAAC,CAAC,qBAAqB,CAAC;;oBAEZ,OAAO,CAAC,qBAAqB,CAAC;;;CAGjD,CAAC","sourcesContent":["import { html, slotted, type ViewTemplate } from '@microsoft/fast-element';\nimport type {\n    CheckboxOptions,\n    FoundationElementTemplate\n} from '@microsoft/fast-foundation';\nimport type { Checkbox } from '.';\n\nexport const template: FoundationElementTemplate<\nViewTemplate<Checkbox>,\nCheckboxOptions\n> = (_context, definition) => html`\n    <template\n        role=\"checkbox\"\n        aria-checked=\"${x => x.checked}\"\n        aria-required=\"${x => x.required}\"\n        aria-disabled=\"${x => x.disabled}\"\n        aria-readonly=\"${x => x.readOnly}\"\n        tabindex=\"${x => x.resolvedTabindex}\"\n        @keypress=\"${(x, c) => x.keypressHandler(c.event as KeyboardEvent)}\"\n        @click=\"${(x, c) => x.clickHandler(c.event as MouseEvent)}\"\n        class=\"${x => (x.readOnly ? 'readonly' : '')} ${x => (x.checked ? 'checked' : '')} ${x => (x.indeterminate ? 'indeterminate' : '')}\"\n    >\n        <div part=\"control\" class=\"control\">\n            <slot name=\"checked-indicator\">\n                ${definition.checkedIndicator || ''}\n            </slot>\n            <slot name=\"indeterminate-indicator\">\n                ${definition.indeterminateIndicator || ''}\n            </slot>\n        </div>\n        <label\n            part=\"label\"\n            class=\"${x => (x.defaultSlottedNodes?.length\n        ? 'label'\n        : 'label label__hidden')}\"\n        >\n            <slot ${slotted('defaultSlottedNodes')}></slot>\n        </label>\n    </template>\n`;\n"]}

package/dist/esm/menu-button/index.d.ts

@@ -16,6 +16,7 @@ export declare class MenuButton extends FoundationElement implements ButtonPatte
     appearanceVariant: ButtonAppearanceVariant;
     disabled: boolean;
     contentHidden: boolean;
+    tabIndex: number;
     /**
      * Specifies whether or not the menu is open.
      */

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

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { attr, observable } from '@microsoft/fast-element';
+import { attr, nullableNumberConverter, observable } from '@microsoft/fast-element';
 import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
 import { eventChange, keyArrowDown, keyArrowUp, keyEscape } from '@microsoft/fast-web-utilities';
 import { ButtonAppearance, MenuButtonPosition } from './types';
@@ -190,6 +190,9 @@ __decorate([
 __decorate([
     attr({ attribute: 'content-hidden', mode: 'boolean' })
 ], MenuButton.prototype, "contentHidden", void 0);
+__decorate([
+    attr({ attribute: 'tabindex', converter: nullableNumberConverter })
+], MenuButton.prototype, "tabIndex", void 0);
 __decorate([
     attr({ mode: 'boolean' })
 ], MenuButton.prototype, "open", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/menu-button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EACH,WAAW,EACX,YAAY,EACZ,UAAU,EACV,SAAS,EACZ,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACH,gBAAgB,EAGhB,kBAAkB,EACrB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAUtC;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,iBAAiB;IAAjD;;QAEW,eAAU,GAAqB,gBAAgB,CAAC,OAAO,CAAC;QAMxD,aAAQ,GAAG,KAAK,CAAC;QAGjB,kBAAa,GAAG,KAAK,CAAC;QAE7B;;WAEG;QAEI,SAAI,GAAG,KAAK,CAAC;QAEpB;;WAEG;QAEI,aAAQ,GAAuB,kBAAkB,CAAC,IAAI,CAAC;QAc9D;;;WAGG;QACK,4BAAuB,GAAG,KAAK,CAAC;QAqLvB,sBAAiB,GAAG,GAAS,EAAE;YAC5C,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YACpB,IAAI,CAAC,YAAa,CAAC,KAAK,EAAE,CAAC;QAC/B,CAAC,CAAC;IACN,CAAC;IAvLmB,oBAAoB;QAChC,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,IAAI,CAAC,MAAM,EAAE;YACb,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAC3B,WAAW,EACX,IAAI,CAAC,iBAAiB,CACzB,CAAC;SACL;IACL,CAAC;IAEM,mBAAmB,CACtB,KAA+B,EAC/B,KAA+B;QAE/B,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,YAAY,EAAE;YAClC,IAAI,CAAC,MAAM,CAAC,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC;SACjD;IACL,CAAC;IAEM,aAAa,CAChB,IAAgC,EAChC,KAAiC;QAEjC,IAAI,IAAI,EAAE;YACN,IAAI,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;SACjE;QAED,IAAI,IAAI,CAAC,MAAM,EAAE;YACb,IAAI,IAAI,CAAC,YAAY,EAAE;gBACnB,IAAI,CAAC,MAAM,CAAC,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC;aACjD;YACD,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,iBAAiB,EAAE;gBAC9D,OAAO,EAAE,IAAI;aAChB,CAAC,CAAC;SACN;IACL,CAAC;IAEM,WAAW,CAAC,KAA0B,EAAE,KAAc;QACzD,IAAI,IAAI,CAAC,YAAY,EAAE;YACnB,IAAI,CAAC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;SACzC;QAED,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACZ,8EAA8E;YAC9E,kEAAkE;YAClE,MAAM,WAAW,GAAgC;gBAC7C,QAAQ,EAAE,IAAI;gBACd,QAAQ,EAAE,KAAK;aAClB,CAAC;YACF,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;SACrC;IACL,CAAC;IAEM,mBAAmB;QACtB,IAAI,IAAI,CAAC,uBAAuB,EAAE;YAC9B,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACzB,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC;SACxC;aAAM;YACH,IAAI,CAAC,SAAS,EAAE,CAAC;SACpB;QAED,MAAM,WAAW,GAAgC;YAC7C,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,IAAI;SACjB,CAAC;QACF,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;IACtC,CAAC;IAEM,eAAe,CAAC,CAAa;QAChC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACZ,OAAO,IAAI,CAAC;SACf;QAED,MAAM,WAAW,GAAG,CAAC,CAAC,aAA4B,CAAC;QACnD,IACI,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC;eACxB,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,QAAQ,CAAC,WAAW,CAAC,EAC3C;YACE,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YACpB,OAAO,KAAK,CAAC;SAChB;QAED,OAAO,IAAI,CAAC;IAChB,CAAC;IAEM,gCAAgC,CAAC,CAAQ;QAC5C,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,YAAa,CAAC,OAAO,CAAC,CAAC;QACzC,iEAAiE;QACjE,8CAA8C;QAC9C,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,OAAO,KAAK,CAAC;IACjB,CAAC;IAEM,0BAA0B,CAAC,CAAgB;QAC9C,QAAQ,CAAC,CAAC,GAAG,EAAE;YACX,KAAK,UAAU;gBACX,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC;gBACpC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;gBACnB,OAAO,KAAK,CAAC;YACjB,KAAK,YAAY;gBACb,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;gBACnB,OAAO,KAAK,CAAC;YACjB;gBACI,OAAO,IAAI,CAAC;SACnB;IACL,CAAC;IAEM,kBAAkB,CAAC,CAAgB;QACtC,QAAQ,CAAC,CAAC,GAAG,EAAE;YACX,KAAK,SAAS;gBACV,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;gBACpB,IAAI,CAAC,YAAa,CAAC,KAAK,EAAE,CAAC;gBAC3B,OAAO,KAAK,CAAC;YACjB;gBACI,OAAO,IAAI,CAAC;SACnB;IACL,CAAC;IAEO,OAAO,CAAC,QAAiB;QAC7B,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;YACxB,OAAO;SACV;QAED,MAAM,WAAW,GAAgC;YAC7C,QAAQ,EAAE,IAAI,CAAC,IAAI;YACnB,QAAQ,EAAE,QAAQ;SACrB,CAAC;QACF,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;QAExC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;IACzB,CAAC;IAEO,OAAO;QACX,2EAA2E;QAC3E,2EAA2E;QAC3E,kBAAkB;QAClB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,MAAM,EAAE;YAC5B,OAAO,SAAS,CAAC;SACpB;QAED,IAAI,WAAW,GAA4B,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QAChE,OAAO,WAAW,EAAE;YAChB,IAAI,WAAW,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,MAAM,EAAE;gBAC7C,OAAO,WAAW,CAAC;aACtB;YAED,IAAI,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE;gBACjC,MAAM,SAAS,GAAG,WAAW,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,CAAC;gBACjD,IAAI,SAAS,YAAY,WAAW,EAAE;oBAClC,WAAW,GAAG,SAAS,CAAC;iBAC3B;qBAAM;oBACH,WAAW,GAAG,SAAS,CAAC;iBAC3B;aACJ;iBAAM;gBACH,OAAO,SAAS,CAAC;aACpB;SACJ;QAED,OAAO,SAAS,CAAC;IACrB,CAAC;IAEO,aAAa,CACjB,OAAgC;QAEhC,OAAO,OAAO,EAAE,QAAQ,KAAK,MAAM,CAAC;IACxC,CAAC;IAEO,SAAS;QACb,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,CAAC;IAC5B,CAAC;IAEO,iBAAiB;QACrB,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,EAAE,EAAE,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;QACtE,IAAI,SAAS,EAAE,MAAM,EAAE;YACnB,MAAM,YAAY,GAAG,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAgB,CAAC;YACpE,YAAY,CAAC,KAAK,EAAE,CAAC;SACxB;IACL,CAAC;CAMJ;AAhOU;IADN,IAAI;8CAC0D;AAGxD;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;qDACQ;AAG3C;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4CACF;AAGjB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;iDAC1B;AAMtB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;wCACN;AAMb;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;4CAC8B;AAI9C;IADf,UAAU;gDACiC;AAI5B;IADf,UAAU;0CAC6B;AAIxB;IADf,UAAU;gDACkC;AAiMjD,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAC;IACxC,QAAQ,EAAE,aAAa;IACvB,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,aAAa,GAAG,oBAAoB,CAAC","sourcesContent":["import { attr, observable } from '@microsoft/fast-element';\nimport { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';\nimport {\n    eventChange,\n    keyArrowDown,\n    keyArrowUp,\n    keyEscape\n} from '@microsoft/fast-web-utilities';\nimport {\n    ButtonAppearance,\n    ButtonAppearanceVariant,\n    MenuButtonToggleEventDetail,\n    MenuButtonPosition\n} from './types';\nimport type { ToggleButton } from '../toggle-button';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { ButtonPattern } from '../patterns/button/types';\nimport type { AnchoredRegion } from '../anchored-region';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-menu-button': MenuButton;\n    }\n}\n\n/**\n * A nimble-styled menu button control.\n */\nexport class MenuButton extends FoundationElement implements ButtonPattern {\n    @attr\n    public appearance: ButtonAppearance = ButtonAppearance.outline;\n\n    @attr({ attribute: 'appearance-variant' })\n    public appearanceVariant: ButtonAppearanceVariant;\n\n    @attr({ mode: 'boolean' })\n    public disabled = false;\n\n    @attr({ attribute: 'content-hidden', mode: 'boolean' })\n    public contentHidden = false;\n\n    /**\n     * Specifies whether or not the menu is open.\n     */\n    @attr({ mode: 'boolean' })\n    public open = false;\n\n    /**\n     * Configures where the menu should be placed relative to the button that opens the menu.\n     */\n    @attr({ attribute: 'position' })\n    public position: MenuButtonPosition = MenuButtonPosition.auto;\n\n    /** @internal */\n    @observable\n    public readonly toggleButton?: ToggleButton;\n\n    /** @internal */\n    @observable\n    public readonly region?: AnchoredRegion;\n\n    /** @internal */\n    @observable\n    public readonly slottedMenus?: HTMLElement[];\n\n    /**\n     * Used to maintain the internal state of whether the last menu item should be focused instead\n     * of the first menu item the next time the menu is opened.\n     */\n    private focusLastItemWhenOpened = false;\n\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        if (this.region) {\n            this.region.removeEventListener(\n                eventChange,\n                this.menuChangeHandler\n            );\n        }\n    }\n\n    public toggleButtonChanged(\n        _prev: ToggleButton | undefined,\n        _next: ToggleButton | undefined\n    ): void {\n        if (this.region && this.toggleButton) {\n            this.region.anchorElement = this.toggleButton;\n        }\n    }\n\n    public regionChanged(\n        prev: AnchoredRegion | undefined,\n        _next: AnchoredRegion | undefined\n    ): void {\n        if (prev) {\n            prev.removeEventListener(eventChange, this.menuChangeHandler);\n        }\n\n        if (this.region) {\n            if (this.toggleButton) {\n                this.region.anchorElement = this.toggleButton;\n            }\n            this.region.addEventListener(eventChange, this.menuChangeHandler, {\n                capture: true\n            });\n        }\n    }\n\n    public openChanged(_prev: boolean | undefined, _next: boolean): void {\n        if (this.toggleButton) {\n            this.toggleButton.checked = this.open;\n        }\n\n        if (!this.open) {\n            // Only fire an event here if the menu is changing to being closed. Otherwise,\n            // wait until the menu is actually opened before firing the event.\n            const eventDetail: MenuButtonToggleEventDetail = {\n                oldState: true,\n                newState: false\n            };\n            this.$emit('toggle', eventDetail);\n        }\n    }\n\n    public regionLoadedHandler(): void {\n        if (this.focusLastItemWhenOpened) {\n            this.focusLastMenuItem();\n            this.focusLastItemWhenOpened = false;\n        } else {\n            this.focusMenu();\n        }\n\n        const eventDetail: MenuButtonToggleEventDetail = {\n            oldState: false,\n            newState: true\n        };\n        this.$emit('toggle', eventDetail);\n    }\n\n    public focusoutHandler(e: FocusEvent): boolean {\n        if (!this.open) {\n            return true;\n        }\n\n        const focusTarget = e.relatedTarget as HTMLElement;\n        if (\n            !this.contains(focusTarget)\n            && !this.getMenu()?.contains(focusTarget)\n        ) {\n            this.setOpen(false);\n            return false;\n        }\n\n        return true;\n    }\n\n    public toggleButtonCheckedChangeHandler(e: Event): boolean {\n        this.setOpen(this.toggleButton!.checked);\n        // Don't bubble the 'change' event from the toggle button because\n        // the menu button has its own 'toggle' event.\n        e.stopPropagation();\n        return false;\n    }\n\n    public toggleButtonKeyDownHandler(e: KeyboardEvent): boolean {\n        switch (e.key) {\n            case keyArrowUp:\n                this.focusLastItemWhenOpened = true;\n                this.setOpen(true);\n                return false;\n            case keyArrowDown:\n                this.setOpen(true);\n                return false;\n            default:\n                return true;\n        }\n    }\n\n    public menuKeyDownHandler(e: KeyboardEvent): boolean {\n        switch (e.key) {\n            case keyEscape:\n                this.setOpen(false);\n                this.toggleButton!.focus();\n                return false;\n            default:\n                return true;\n        }\n    }\n\n    private setOpen(newValue: boolean): void {\n        if (this.open === newValue) {\n            return;\n        }\n\n        const eventDetail: MenuButtonToggleEventDetail = {\n            oldState: this.open,\n            newState: newValue\n        };\n        this.$emit('beforetoggle', eventDetail);\n\n        this.open = newValue;\n    }\n\n    private getMenu(): HTMLElement | undefined {\n        // Get the menu that is slotted within the menu-button, taking into account\n        // that it may be nested within multiple 'slot' elements, such as when used\n        // within a table.\n        if (!this.slottedMenus?.length) {\n            return undefined;\n        }\n\n        let currentItem: HTMLElement | undefined = this.slottedMenus[0];\n        while (currentItem) {\n            if (currentItem.getAttribute('role') === 'menu') {\n                return currentItem;\n            }\n\n            if (this.isSlotElement(currentItem)) {\n                const firstNode = currentItem.assignedNodes()[0];\n                if (firstNode instanceof HTMLElement) {\n                    currentItem = firstNode;\n                } else {\n                    currentItem = undefined;\n                }\n            } else {\n                return undefined;\n            }\n        }\n\n        return undefined;\n    }\n\n    private isSlotElement(\n        element: HTMLElement | undefined\n    ): element is HTMLSlotElement {\n        return element?.nodeName === 'SLOT';\n    }\n\n    private focusMenu(): void {\n        this.getMenu()?.focus();\n    }\n\n    private focusLastMenuItem(): void {\n        const menuItems = this.getMenu()?.querySelectorAll('[role=menuitem]');\n        if (menuItems?.length) {\n            const lastMenuItem = menuItems[menuItems.length - 1] as HTMLElement;\n            lastMenuItem.focus();\n        }\n    }\n\n    private readonly menuChangeHandler = (): void => {\n        this.setOpen(false);\n        this.toggleButton!.focus();\n    };\n}\n\nconst nimbleMenuButton = MenuButton.compose({\n    baseName: 'menu-button',\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    }\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());\nexport const menuButtonTag = 'nimble-menu-button';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/menu-button/index.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n    attr,\n    nullableNumberConverter,\n    observable\n} from '@microsoft/fast-element';\nimport { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';\nimport {\n    eventChange,\n    keyArrowDown,\n    keyArrowUp,\n    keyEscape\n} from '@microsoft/fast-web-utilities';\nimport {\n    ButtonAppearance,\n    ButtonAppearanceVariant,\n    MenuButtonToggleEventDetail,\n    MenuButtonPosition\n} from './types';\nimport type { ToggleButton } from '../toggle-button';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { ButtonPattern } from '../patterns/button/types';\nimport type { AnchoredRegion } from '../anchored-region';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-menu-button': MenuButton;\n    }\n}\n\n/**\n * A nimble-styled menu button control.\n */\nexport class MenuButton extends FoundationElement implements ButtonPattern {\n    @attr\n    public appearance: ButtonAppearance = ButtonAppearance.outline;\n\n    @attr({ attribute: 'appearance-variant' })\n    public appearanceVariant: ButtonAppearanceVariant;\n\n    @attr({ mode: 'boolean' })\n    public disabled = false;\n\n    @attr({ attribute: 'content-hidden', mode: 'boolean' })\n    public contentHidden = false;\n\n    @attr({ attribute: 'tabindex', converter: nullableNumberConverter })\n    public override tabIndex!: number;\n\n    /**\n     * Specifies whether or not the menu is open.\n     */\n    @attr({ mode: 'boolean' })\n    public open = false;\n\n    /**\n     * Configures where the menu should be placed relative to the button that opens the menu.\n     */\n    @attr({ attribute: 'position' })\n    public position: MenuButtonPosition = MenuButtonPosition.auto;\n\n    /** @internal */\n    @observable\n    public readonly toggleButton?: ToggleButton;\n\n    /** @internal */\n    @observable\n    public readonly region?: AnchoredRegion;\n\n    /** @internal */\n    @observable\n    public readonly slottedMenus?: HTMLElement[];\n\n    /**\n     * Used to maintain the internal state of whether the last menu item should be focused instead\n     * of the first menu item the next time the menu is opened.\n     */\n    private focusLastItemWhenOpened = false;\n\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        if (this.region) {\n            this.region.removeEventListener(\n                eventChange,\n                this.menuChangeHandler\n            );\n        }\n    }\n\n    public toggleButtonChanged(\n        _prev: ToggleButton | undefined,\n        _next: ToggleButton | undefined\n    ): void {\n        if (this.region && this.toggleButton) {\n            this.region.anchorElement = this.toggleButton;\n        }\n    }\n\n    public regionChanged(\n        prev: AnchoredRegion | undefined,\n        _next: AnchoredRegion | undefined\n    ): void {\n        if (prev) {\n            prev.removeEventListener(eventChange, this.menuChangeHandler);\n        }\n\n        if (this.region) {\n            if (this.toggleButton) {\n                this.region.anchorElement = this.toggleButton;\n            }\n            this.region.addEventListener(eventChange, this.menuChangeHandler, {\n                capture: true\n            });\n        }\n    }\n\n    public openChanged(_prev: boolean | undefined, _next: boolean): void {\n        if (this.toggleButton) {\n            this.toggleButton.checked = this.open;\n        }\n\n        if (!this.open) {\n            // Only fire an event here if the menu is changing to being closed. Otherwise,\n            // wait until the menu is actually opened before firing the event.\n            const eventDetail: MenuButtonToggleEventDetail = {\n                oldState: true,\n                newState: false\n            };\n            this.$emit('toggle', eventDetail);\n        }\n    }\n\n    public regionLoadedHandler(): void {\n        if (this.focusLastItemWhenOpened) {\n            this.focusLastMenuItem();\n            this.focusLastItemWhenOpened = false;\n        } else {\n            this.focusMenu();\n        }\n\n        const eventDetail: MenuButtonToggleEventDetail = {\n            oldState: false,\n            newState: true\n        };\n        this.$emit('toggle', eventDetail);\n    }\n\n    public focusoutHandler(e: FocusEvent): boolean {\n        if (!this.open) {\n            return true;\n        }\n\n        const focusTarget = e.relatedTarget as HTMLElement;\n        if (\n            !this.contains(focusTarget)\n            && !this.getMenu()?.contains(focusTarget)\n        ) {\n            this.setOpen(false);\n            return false;\n        }\n\n        return true;\n    }\n\n    public toggleButtonCheckedChangeHandler(e: Event): boolean {\n        this.setOpen(this.toggleButton!.checked);\n        // Don't bubble the 'change' event from the toggle button because\n        // the menu button has its own 'toggle' event.\n        e.stopPropagation();\n        return false;\n    }\n\n    public toggleButtonKeyDownHandler(e: KeyboardEvent): boolean {\n        switch (e.key) {\n            case keyArrowUp:\n                this.focusLastItemWhenOpened = true;\n                this.setOpen(true);\n                return false;\n            case keyArrowDown:\n                this.setOpen(true);\n                return false;\n            default:\n                return true;\n        }\n    }\n\n    public menuKeyDownHandler(e: KeyboardEvent): boolean {\n        switch (e.key) {\n            case keyEscape:\n                this.setOpen(false);\n                this.toggleButton!.focus();\n                return false;\n            default:\n                return true;\n        }\n    }\n\n    private setOpen(newValue: boolean): void {\n        if (this.open === newValue) {\n            return;\n        }\n\n        const eventDetail: MenuButtonToggleEventDetail = {\n            oldState: this.open,\n            newState: newValue\n        };\n        this.$emit('beforetoggle', eventDetail);\n\n        this.open = newValue;\n    }\n\n    private getMenu(): HTMLElement | undefined {\n        // Get the menu that is slotted within the menu-button, taking into account\n        // that it may be nested within multiple 'slot' elements, such as when used\n        // within a table.\n        if (!this.slottedMenus?.length) {\n            return undefined;\n        }\n\n        let currentItem: HTMLElement | undefined = this.slottedMenus[0];\n        while (currentItem) {\n            if (currentItem.getAttribute('role') === 'menu') {\n                return currentItem;\n            }\n\n            if (this.isSlotElement(currentItem)) {\n                const firstNode = currentItem.assignedNodes()[0];\n                if (firstNode instanceof HTMLElement) {\n                    currentItem = firstNode;\n                } else {\n                    currentItem = undefined;\n                }\n            } else {\n                return undefined;\n            }\n        }\n\n        return undefined;\n    }\n\n    private isSlotElement(\n        element: HTMLElement | undefined\n    ): element is HTMLSlotElement {\n        return element?.nodeName === 'SLOT';\n    }\n\n    private focusMenu(): void {\n        this.getMenu()?.focus();\n    }\n\n    private focusLastMenuItem(): void {\n        const menuItems = this.getMenu()?.querySelectorAll('[role=menuitem]');\n        if (menuItems?.length) {\n            const lastMenuItem = menuItems[menuItems.length - 1] as HTMLElement;\n            lastMenuItem.focus();\n        }\n    }\n\n    private readonly menuChangeHandler = (): void => {\n        this.setOpen(false);\n        this.toggleButton!.focus();\n    };\n}\n\nconst nimbleMenuButton = MenuButton.compose({\n    baseName: 'menu-button',\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    }\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());\nexport const menuButtonTag = 'nimble-menu-button';\n"]}

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

@@ -14,6 +14,7 @@ export const template = html `
             ?content-hidden="${x => x.contentHidden}"
             ?checked="${x => x.open}"
             ?disabled="${x => x.disabled}"
+            tabindex="${x => x.tabIndex}"
             aria-haspopup="true"
             aria-expanded="${x => x.open}"
             @change="${(x, c) => x.toggleButtonCheckedChangeHandler(c.event)}"

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

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/menu-button/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAY;;iBAEvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;qBACP,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAmB,CAAC;;WAE5D,eAAe;;0BAEA,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;kCACT,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB;+BAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;wBAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;yBACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;6BAEX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;uBACjB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,KAAK,CAAC;wBACpD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,KAAsB,CAAC;cAC1E,GAAG,CAAC,cAAc,CAAC;;;cAGnB,EAAE,CAAC,wFAAwF;;;;YAI7F,eAAe;UACjB,IAAI,CACN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EACX,IAAI,CAAY;eACT,iBAAiB;;;;;6CAKa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC;6CAC1D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;2BAClE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;4BAC3B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAsB,CAAC;kBAClE,GAAG,CAAC,QAAQ,CAAC;;;wCAGS,OAAO,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,CAAC;;gBAE7D,iBAAiB;SACxB,CACJ;;CAEJ,CAAC","sourcesContent":["import { html, ref, slotted, when } from '@microsoft/fast-element';\nimport type { MenuButton } from '.';\nimport { toggleButtonTag } from '../toggle-button';\nimport { anchoredRegionTag } from '../anchored-region';\n\n// prettier-ignore\nexport const template = html<MenuButton>`\n    <template\n        ?open=\"${x => x.open}\"\n        @focusout=\"${(x, c) => x.focusoutHandler(c.event as FocusEvent)}\"\n    >\n        <${toggleButtonTag}\n            part=\"button\"\n            appearance=\"${x => x.appearance}\"\n            appearance-variant=\"${x => x.appearanceVariant}\"\n            ?content-hidden=\"${x => x.contentHidden}\"\n            ?checked=\"${x => x.open}\"\n            ?disabled=\"${x => x.disabled}\"\n            aria-haspopup=\"true\"\n            aria-expanded=\"${x => x.open}\"\n            @change=\"${(x, c) => x.toggleButtonCheckedChangeHandler(c.event)}\"\n            @keydown=\"${(x, c) => x.toggleButtonKeyDownHandler(c.event as KeyboardEvent)}\"\n            ${ref('toggleButton')}\n            exportparts=\"start,end\"\n        >\n            ${'' /* Forward the contents of the 'start', 'end', and default slots to the toggle button */}\n            <slot slot=\"start\" name=\"start\"></slot>\n            <slot></slot>\n            <slot slot=\"end\" name=\"end\"></slot>\n        </${toggleButtonTag}>\n        ${when(\n        x => x.open,\n        html<MenuButton>`\n            <${anchoredRegionTag}\n                fixed-placement=\"true\"\n                auto-update-mode=\"auto\"\n                horizontal-inset=\"true\"\n                horizontal-positioning-mode=\"dynamic\"\n                vertical-positioning-mode=\"${x => (x.position === 'auto' ? 'dynamic' : 'locktodefault')}\"\n                vertical-default-position=\"${x => (x.position === 'above' ? 'top' : 'bottom')}\"\n                @loaded=\"${x => x.regionLoadedHandler()}\"\n                @keydown=\"${(x, c) => x.menuKeyDownHandler(c.event as KeyboardEvent)}\"\n                ${ref('region')}\n            >\n                <span part=\"menu\">\n                    <slot name=\"menu\" ${slotted({ property: 'slottedMenus' })}></slot>\n                </span>\n            </${anchoredRegionTag}>\n        `\n    )}\n    </template>\n`;\n"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/menu-button/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAY;;iBAEvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;qBACP,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAmB,CAAC;;WAE5D,eAAe;;0BAEA,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;kCACT,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB;+BAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;wBAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;yBACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;wBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;6BAEV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;uBACjB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,KAAK,CAAC;wBACpD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,KAAsB,CAAC;cAC1E,GAAG,CAAC,cAAc,CAAC;;;cAGnB,EAAE,CAAC,wFAAwF;;;;YAI7F,eAAe;UACjB,IAAI,CACN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EACX,IAAI,CAAY;eACT,iBAAiB;;;;;6CAKa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC;6CAC1D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;2BAClE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;4BAC3B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAsB,CAAC;kBAClE,GAAG,CAAC,QAAQ,CAAC;;;wCAGS,OAAO,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,CAAC;;gBAE7D,iBAAiB;SACxB,CACJ;;CAEJ,CAAC","sourcesContent":["import { html, ref, slotted, when } from '@microsoft/fast-element';\nimport type { MenuButton } from '.';\nimport { toggleButtonTag } from '../toggle-button';\nimport { anchoredRegionTag } from '../anchored-region';\n\n// prettier-ignore\nexport const template = html<MenuButton>`\n    <template\n        ?open=\"${x => x.open}\"\n        @focusout=\"${(x, c) => x.focusoutHandler(c.event as FocusEvent)}\"\n    >\n        <${toggleButtonTag}\n            part=\"button\"\n            appearance=\"${x => x.appearance}\"\n            appearance-variant=\"${x => x.appearanceVariant}\"\n            ?content-hidden=\"${x => x.contentHidden}\"\n            ?checked=\"${x => x.open}\"\n            ?disabled=\"${x => x.disabled}\"\n            tabindex=\"${x => x.tabIndex}\"\n            aria-haspopup=\"true\"\n            aria-expanded=\"${x => x.open}\"\n            @change=\"${(x, c) => x.toggleButtonCheckedChangeHandler(c.event)}\"\n            @keydown=\"${(x, c) => x.toggleButtonKeyDownHandler(c.event as KeyboardEvent)}\"\n            ${ref('toggleButton')}\n            exportparts=\"start,end\"\n        >\n            ${'' /* Forward the contents of the 'start', 'end', and default slots to the toggle button */}\n            <slot slot=\"start\" name=\"start\"></slot>\n            <slot></slot>\n            <slot slot=\"end\" name=\"end\"></slot>\n        </${toggleButtonTag}>\n        ${when(\n        x => x.open,\n        html<MenuButton>`\n            <${anchoredRegionTag}\n                fixed-placement=\"true\"\n                auto-update-mode=\"auto\"\n                horizontal-inset=\"true\"\n                horizontal-positioning-mode=\"dynamic\"\n                vertical-positioning-mode=\"${x => (x.position === 'auto' ? 'dynamic' : 'locktodefault')}\"\n                vertical-default-position=\"${x => (x.position === 'above' ? 'top' : 'bottom')}\"\n                @loaded=\"${x => x.regionLoadedHandler()}\"\n                @keydown=\"${(x, c) => x.menuKeyDownHandler(c.event as KeyboardEvent)}\"\n                ${ref('region')}\n            >\n                <span part=\"menu\">\n                    <slot name=\"menu\" ${slotted({ property: 'slottedMenus' })}></slot>\n                </span>\n            </${anchoredRegionTag}>\n        `\n    )}\n    </template>\n`;\n"]}

package/dist/esm/theme-provider/design-tokens.js

@@ -75,9 +75,9 @@ export const [titleFont, titleFontColor, titleDisabledFontColor, titleFontFamily
 export const [subtitlePlus1Font, subtitlePlus1FontColor, subtitlePlus1DisabledFontColor, subtitlePlus1FontFamily, subtitlePlus1FontWeight, subtitlePlus1FontSize, subtitlePlus1FontLineHeight] = createFontTokens(tokenNames.subtitlePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Subtitle2Family, Subtitle2Weight, Subtitle2Size, Subtitle2LineHeight);
 export const [subtitleFont, subtitleFontColor, subtitleDisabledFontColor, subtitleFontFamily, subtitleFontWeight, subtitleFontSize, subtitleFontLineHeight] = createFontTokens(tokenNames.subtitleFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Subtitle1Family, Subtitle1Weight, Subtitle1Size, Subtitle1LineHeight);
 export const [linkFont, linkFontColor, linkDisabledFontColor, linkFontFamily, linkFontWeight, linkFontSize, linkFontLineHeight] = createFontTokens(tokenNames.linkFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight);
-export const [linkActiveFont, linkActiveFontColor, linkActiveDisabledFontColor, linkActiveFontFamily, linkActiveFontWeight, linkActiveFontSize, linkActiveFontLineHeight] = createFontTokens(tokenNames.linkActiveFont, (element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, hexToRgbaCssColor(White, 0.6)), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight);
-export const [linkProminentFont, linkProminentFontColor, linkProminentDisabledFontColor, linkProminentFontFamily, linkProminentFontWeight, linkProminentFontSize, linkProminentFontLineHeight] = createFontTokens(tokenNames.linkProminentFont, (element) => getColorForTheme(element, DigitalGreenDark105, PowerGreen, PowerGreen), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight);
-export const [linkActiveProminentFont, linkActiveProminentFontColor, linkActiveProminentDisabledFontColor, linkActiveProminentFontFamily, linkActiveProminentFontWeight, linkActiveProminentFontSize, linkActiveProminentFontLineHeight] = createFontTokens(tokenNames.linkActiveProminentFont, (element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, hexToRgbaCssColor(White, 0.6)), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight);
+export const [linkActiveFont, linkActiveFontColor, linkActiveDisabledFontColor, linkActiveFontFamily, linkActiveFontWeight, linkActiveFontSize, linkActiveFontLineHeight] = createFontTokens(tokenNames.linkActiveFont, (element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, hexToRgbaCssColor(White, 0.75)), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight);
+export const [linkProminentFont, linkProminentFontColor, linkProminentDisabledFontColor, linkProminentFontFamily, linkProminentFontWeight, linkProminentFontSize, linkProminentFontLineHeight] = createFontTokens(tokenNames.linkProminentFont, (element) => getColorForTheme(element, DigitalGreenDark105, PowerGreen, White), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight);
+export const [linkActiveProminentFont, linkActiveProminentFontColor, linkActiveProminentDisabledFontColor, linkActiveProminentFontFamily, linkActiveProminentFontWeight, linkActiveProminentFontSize, linkActiveProminentFontLineHeight] = createFontTokens(tokenNames.linkActiveProminentFont, (element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, hexToRgbaCssColor(White, 0.75)), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight);
 export const [placeholderFont, placeholderFontColor, placeholderDisabledFontColor, placeholderFontFamily, placeholderFontWeight, placeholderFontSize, placeholderFontLineHeight] = createFontTokens(tokenNames.placeholderFont, (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.6), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), PlaceholderFamily, PlaceholderWeight, PlaceholderSize, PlaceholderLineHeight);
 export const [bodyFont, bodyFontColor, bodyDisabledFontColor, bodyFontFamily, bodyFontWeight, bodyFontSize, bodyFontLineHeight] = createFontTokens(tokenNames.bodyFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyFamily, BodyWeight, BodySize, BodyLineHeight);
 export const [bodyEmphasizedFont, bodyEmphasizedFontColor, bodyEmphasizedDisabledFontColor, bodyEmphasizedFontFamily, bodyEmphasizedFontWeight, bodyEmphasizedFontSize, bodyEmphasizedFontLineHeight] = createFontTokens(tokenNames.bodyEmphasizedFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyEmphasizedFamily, BodyEmphasizedWeight, BodyEmphasizedSize, BodyEmphasizedLineHeight);