@ni/nimble-components 29.1.2 → 29.1.4

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/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":"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","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/select/styles.js

@@ -2,7 +2,7 @@ import { css } from '@microsoft/fast-element';
 import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
 import { styles as dropdownStyles } from '../patterns/dropdown/styles';
 import { styles as errorStyles } from '../patterns/error/styles';
-import { borderRgbPartialColor, borderWidth, controlHeight, controlSlimHeight, fillHoverColor, fillHoverSelectedColor, fillSelectedColor, mediumPadding, placeholderFontColor, smallPadding } from '../theme-provider/design-tokens';
+import { borderRgbPartialColor, borderWidth, controlHeight, controlSlimHeight, fillHoverColor, fillHoverSelectedColor, fillSelectedColor, iconColor, mediumPadding, placeholderFontColor, smallPadding } from '../theme-provider/design-tokens';
 import { appearanceBehavior } from '../utilities/style/appearance';
 import { DropdownAppearance } from './types';
 import { focusVisible } from '../utilities/style/focus';
@@ -89,6 +89,7 @@ export const styles = css `
 
     .filter-icon {
         padding-left: ${smallPadding};
+        ${iconColor.cssCustomProperty}: ${placeholderFontColor};
     }
 
     .filter-input {

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EACH,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACb,oBAAoB,EACpB,YAAY,EACf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;MACd,WAAW;;MAEX;AACE;gGACgG,CAAC,EACrG;;;iBAGa,oBAAoB;;;;;;;;;kBASnB,iBAAiB;uBACZ,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA+BjB,aAAa;;;;;;;;8BAQD,qBAAqB;uBAC5B,aAAa,MAAM,YAAY,MAAM,WAAW;;;;kCAIrC,WAAW;;;;;;;8BAOf,qBAAqB;oBAC/B,aAAa,MAAM,YAAY,MAAM,WAAW;;;;kCAIlC,WAAW;;;;wBAIrB,YAAY;;;;;;;;;qBASf,YAAY,MAAM,aAAa;;;;;iBAKnC,oBAAoB;;;mBAGlB,YAAY;;;;;;;;;;;;;4BAaH,cAAc;;;;4BAId,iBAAiB;;;;4BAIjB,sBAAsB;;;;iBAIjC,oBAAoB;kBACnB,aAAa;;;mBAGZ,YAAY,IAAI,aAAa;;CAE/C,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;8BAGmB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { styles as dropdownStyles } from '../patterns/dropdown/styles';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport {\n    borderRgbPartialColor,\n    borderWidth,\n    controlHeight,\n    controlSlimHeight,\n    fillHoverColor,\n    fillHoverSelectedColor,\n    fillSelectedColor,\n    mediumPadding,\n    placeholderFontColor,\n    smallPadding\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { DropdownAppearance } from './types';\nimport { focusVisible } from '../utilities/style/focus';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\n\nexport const styles = css`\n    ${dropdownStyles}\n    ${errorStyles}\n\n    ${\n        /* We are using flex `order` to define the visual ordering of the selected value,\n         error icon, and dropdown arrow because they are not \"interactive\" i.e. part of the tab order */ ''\n    }\n\n    .selected-value.placeholder {\n        color: ${placeholderFontColor};\n    }\n\n    .selected-value {\n        order: 1;\n    }\n\n    .clear-button {\n        order: 3;\n        height: ${controlSlimHeight};\n        margin-left: ${smallPadding};\n    }\n\n    [part='indicator'] {\n        order: 4;\n    }\n\n    .error-icon {\n        order: 2;\n    }\n\n    [part='end'] {\n        display: contents;\n    }\n\n    .listbox {\n        overflow-x: clip;\n    }\n\n    .listbox.empty slot {\n        display: none;\n    }\n\n    .listbox.above {\n        flex-flow: column-reverse;\n    }\n\n    .filter-field {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        height: ${controlHeight};\n        background: transparent;\n    }\n\n    .filter-field::before {\n        content: '';\n        position: absolute;\n        height: 0px;\n        border-bottom: rgba(${borderRgbPartialColor}, 0.1) 2px solid;\n        bottom: calc(${controlHeight} + ${smallPadding} - ${borderWidth});\n    }\n\n    .filter-field.above::before {\n        width: calc(100% - (2 * ${borderWidth}));\n    }\n\n    .filter-field::after {\n        content: '';\n        position: absolute;\n        height: 0px;\n        border-bottom: rgba(${borderRgbPartialColor}, 0.1) 2px solid;\n        top: calc(${controlHeight} + ${smallPadding} - ${borderWidth});\n    }\n\n    .filter-field:not(.above)::after {\n        width: calc(100% - (2 * ${borderWidth}));\n    }\n\n    .filter-icon {\n        padding-left: ${smallPadding};\n    }\n\n    .filter-input {\n        background: transparent;\n        border: none;\n        color: inherit;\n        font: inherit;\n        height: var(--ni-nimble-control-height);\n        padding: 0 ${smallPadding} 0 ${mediumPadding};\n        width: 100%;\n    }\n\n    .filter-input::placeholder {\n        color: ${placeholderFontColor};\n    }\n\n    .filter-input${focusVisible} {\n        outline: 0px;\n    }\n\n    .scrollable-region {\n        overflow: auto;\n    }\n\n    ::slotted([role='option']) {\n        background-color: transparent;\n    }\n\n    ::slotted([role='option']:hover) {\n        background-color: ${fillHoverColor};\n    }\n\n    ::slotted([role='option'][active-option]) {\n        background-color: ${fillSelectedColor};\n    }\n\n    ::slotted([role='option'][active-option]:hover) {\n        background-color: ${fillHoverSelectedColor};\n    }\n\n    .no-results-label {\n        color: ${placeholderFontColor};\n        height: ${controlHeight};\n        display: inline-flex;\n        align-items: center;\n        padding: ${smallPadding} ${mediumPadding};\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        DropdownAppearance.block,\n        css`\n            :host([error-visible]) .control {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            .filter-field,\n            .no-results-label {\n                background: ${hexToRgbaCssColor(White, 0.15)};\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EACH,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,SAAS,EACT,aAAa,EACb,oBAAoB,EACpB,YAAY,EACf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;MACd,WAAW;;MAEX;AACE;gGACgG,CAAC,EACrG;;;iBAGa,oBAAoB;;;;;;;;;kBASnB,iBAAiB;uBACZ,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA+BjB,aAAa;;;;;;;;8BAQD,qBAAqB;uBAC5B,aAAa,MAAM,YAAY,MAAM,WAAW;;;;kCAIrC,WAAW;;;;;;;8BAOf,qBAAqB;oBAC/B,aAAa,MAAM,YAAY,MAAM,WAAW;;;;kCAIlC,WAAW;;;;wBAIrB,YAAY;UAC1B,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;qBASzC,YAAY,MAAM,aAAa;;;;;iBAKnC,oBAAoB;;;mBAGlB,YAAY;;;;;;;;;;;;;4BAaH,cAAc;;;;4BAId,iBAAiB;;;;4BAIjB,sBAAsB;;;;iBAIjC,oBAAoB;kBACnB,aAAa;;;mBAGZ,YAAY,IAAI,aAAa;;CAE/C,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;8BAGmB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { styles as dropdownStyles } from '../patterns/dropdown/styles';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport {\n    borderRgbPartialColor,\n    borderWidth,\n    controlHeight,\n    controlSlimHeight,\n    fillHoverColor,\n    fillHoverSelectedColor,\n    fillSelectedColor,\n    iconColor,\n    mediumPadding,\n    placeholderFontColor,\n    smallPadding\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { DropdownAppearance } from './types';\nimport { focusVisible } from '../utilities/style/focus';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\n\nexport const styles = css`\n    ${dropdownStyles}\n    ${errorStyles}\n\n    ${\n        /* We are using flex `order` to define the visual ordering of the selected value,\n         error icon, and dropdown arrow because they are not \"interactive\" i.e. part of the tab order */ ''\n    }\n\n    .selected-value.placeholder {\n        color: ${placeholderFontColor};\n    }\n\n    .selected-value {\n        order: 1;\n    }\n\n    .clear-button {\n        order: 3;\n        height: ${controlSlimHeight};\n        margin-left: ${smallPadding};\n    }\n\n    [part='indicator'] {\n        order: 4;\n    }\n\n    .error-icon {\n        order: 2;\n    }\n\n    [part='end'] {\n        display: contents;\n    }\n\n    .listbox {\n        overflow-x: clip;\n    }\n\n    .listbox.empty slot {\n        display: none;\n    }\n\n    .listbox.above {\n        flex-flow: column-reverse;\n    }\n\n    .filter-field {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        height: ${controlHeight};\n        background: transparent;\n    }\n\n    .filter-field::before {\n        content: '';\n        position: absolute;\n        height: 0px;\n        border-bottom: rgba(${borderRgbPartialColor}, 0.1) 2px solid;\n        bottom: calc(${controlHeight} + ${smallPadding} - ${borderWidth});\n    }\n\n    .filter-field.above::before {\n        width: calc(100% - (2 * ${borderWidth}));\n    }\n\n    .filter-field::after {\n        content: '';\n        position: absolute;\n        height: 0px;\n        border-bottom: rgba(${borderRgbPartialColor}, 0.1) 2px solid;\n        top: calc(${controlHeight} + ${smallPadding} - ${borderWidth});\n    }\n\n    .filter-field:not(.above)::after {\n        width: calc(100% - (2 * ${borderWidth}));\n    }\n\n    .filter-icon {\n        padding-left: ${smallPadding};\n        ${iconColor.cssCustomProperty}: ${placeholderFontColor};\n    }\n\n    .filter-input {\n        background: transparent;\n        border: none;\n        color: inherit;\n        font: inherit;\n        height: var(--ni-nimble-control-height);\n        padding: 0 ${smallPadding} 0 ${mediumPadding};\n        width: 100%;\n    }\n\n    .filter-input::placeholder {\n        color: ${placeholderFontColor};\n    }\n\n    .filter-input${focusVisible} {\n        outline: 0px;\n    }\n\n    .scrollable-region {\n        overflow: auto;\n    }\n\n    ::slotted([role='option']) {\n        background-color: transparent;\n    }\n\n    ::slotted([role='option']:hover) {\n        background-color: ${fillHoverColor};\n    }\n\n    ::slotted([role='option'][active-option]) {\n        background-color: ${fillSelectedColor};\n    }\n\n    ::slotted([role='option'][active-option]:hover) {\n        background-color: ${fillHoverSelectedColor};\n    }\n\n    .no-results-label {\n        color: ${placeholderFontColor};\n        height: ${controlHeight};\n        display: inline-flex;\n        align-items: center;\n        padding: ${smallPadding} ${mediumPadding};\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        DropdownAppearance.block,\n        css`\n            :host([error-visible]) .control {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            .filter-field,\n            .no-results-label {\n                background: ${hexToRgbaCssColor(White, 0.15)};\n            }\n        `\n    )\n);\n"]}

package/dist/esm/text-field/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '../utilities/style/display';
-import { borderRgbPartialColor, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, failColor, smallDelay, controlLabelFont, bodyFont, controlLabelFontColor, controlLabelDisabledFontColor, mediumPadding, iconColor } from '../theme-provider/design-tokens';
+import { borderRgbPartialColor, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, failColor, smallDelay, controlLabelFont, bodyFont, controlLabelFontColor, controlLabelDisabledFontColor, mediumPadding } from '../theme-provider/design-tokens';
 import { appearanceBehavior } from '../utilities/style/appearance';
 import { TextFieldAppearance } from './types';
 import { Theme } from '../theme-provider/types';
@@ -101,7 +101,11 @@ export const styles = css `
 
     slot[name='start']::slotted(*) {
         flex: none;
-        ${iconColor.cssCustomProperty}: currentcolor;
+        opacity: 0.6;
+    }
+
+    :host([disabled]) slot[name='start']::slotted(*) {
+        opacity: 0.3;
     }
 
     .control {

package/dist/esm/text-field/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,aAAa,EACb,SAAS,EACZ,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;;;gBAGD,QAAQ;;UAEd,cAAc;iBACP,aAAa;mDACqB,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;iCAYb,qBAAqB;eACvC,aAAa;mBACT,WAAW;;;;6BAID,qBAAqB;;;;6BAIrB,qBAAqB;;;;+BAInB,SAAS;;;;+BAIT,gBAAgB;;;;;;;;;UASrC,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;;;UAQd,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;;;;;;;;UAad,SAAS,CAAC,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;UAyB3B;AACE;;6CAE6C,CAAC,EAClD;;;;;iBAKS,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;;;;4BAUV,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;UAiB9B,aAAa,CAAC,iBAAiB;;CAExC,CAAC,aAAa,CACX,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;gCAI9B,WAAW;iCACV,WAAW;;;;;uCAKL,WAAW;;;;;;;;;yCAST,qBAAqB;;;;;yCAKrB,qBAAqB;;SAErD,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;gCAEqB,WAAW;iCACV,WAAW;;;;;;SAMnC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;SAIF,CACJ,EACD,aAAa,CACT,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,EACzB,GAAG,CAAA;;;;SAIF,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\n\nimport {\n    borderRgbPartialColor,\n    borderHoverColor,\n    borderWidth,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    controlHeight,\n    failColor,\n    smallDelay,\n    controlLabelFont,\n    bodyFont,\n    controlLabelFontColor,\n    controlLabelDisabledFontColor,\n    mediumPadding,\n    iconColor\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { TextFieldAppearance } from './types';\nimport { Theme } from '../theme-provider/types';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n    ${display('inline-block')}\n    ${errorStyles}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        ${userSelectNone}\n        color: ${bodyFontColor};\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n        --ni-private-height-within-border: calc(\n            ${controlHeight} - 2 * ${borderWidth}\n        );\n    }\n\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .label {\n        display: flex;\n        color: ${controlLabelFontColor};\n        font: ${controlLabelFont};\n    }\n\n    :host([disabled]) .label {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    .root {\n        box-sizing: border-box;\n        position: relative;\n        display: flex;\n        flex-direction: row;\n        border-radius: 0px;\n        font: inherit;\n        align-items: center;\n        justify-content: center;\n        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n        gap: ${mediumPadding};\n        padding: ${borderWidth};\n    }\n\n    :host([readonly]) .root {\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([disabled]) .root {\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .root {\n        border-bottom-color: ${failColor};\n    }\n\n    .root:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    :host([appearance='frameless'][full-bleed]) .root {\n        padding-left: 0px;\n        padding-right: 0px;\n    }\n\n    .root::before {\n        ${/* Empty string causes alignment issue */ ''}\n        content: ' ';\n        color: transparent;\n        width: 0px;\n        ${userSelectNone}\n    }\n\n    :host([appearance='frameless'][full-bleed]) .root::before {\n        display: none;\n    }\n\n    .root::after {\n        ${/* Empty string causes alignment issue */ ''}\n        content: ' ';\n        color: transparent;\n        width: 0px;\n        ${userSelectNone}\n    }\n\n    :host([appearance='frameless'][full-bleed]) .root::after {\n        display: none;\n    }\n\n    [part='start'] {\n        display: contents;\n    }\n\n    slot[name='start']::slotted(*) {\n        flex: none;\n        ${iconColor.cssCustomProperty}: currentcolor;\n    }\n\n    .control {\n        -webkit-appearance: none;\n        font: inherit;\n        background: transparent;\n        color: inherit;\n        padding: 0px;\n        height: var(--ni-private-height-within-border);\n        width: 100%;\n        margin-top: auto;\n        margin-bottom: auto;\n        border: none;\n        text-overflow: ellipsis;\n    }\n\n    .control:hover,\n    .control:focus,\n    .control:disabled,\n    .control:active {\n        outline: none;\n    }\n\n    .control:disabled {\n        ${\n            /* There's an issue with the input element where the ellipsized\n               overflowed text is blank when scrolled into view, so just clip instead.\n               See https://webcompat.com/issues/104481 */ ''\n        }\n        text-overflow: clip;\n    }\n\n    .control::placeholder {\n        color: ${controlLabelFontColor};\n    }\n\n    .control[disabled]::placeholder {\n        color: ${bodyDisabledFontColor};\n    }\n\n    [part='end'] {\n        display: contents;\n    }\n\n    [part='end']::after {\n        content: '';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-hover-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        [part='end']::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host([error-visible]) [part='end']::after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host(:hover) [part='end']::after {\n        width: 100%;\n    }\n\n    :host([disabled]:hover) [part='end']::after,\n    :host([readonly]:hover) [part='end']::after {\n        width: 0px;\n    }\n\n    [part='actions'] {\n        display: contents;\n    }\n\n    slot[name='actions']::slotted(*) {\n        ${controlHeight.cssCustomProperty}: 24px;\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        TextFieldAppearance.underline,\n        css`\n            .root {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        TextFieldAppearance.block,\n        css`\n            .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            .control {\n                padding-left: ${borderWidth};\n                padding-right: ${borderWidth};\n            }\n\n            .root:focus-within,\n            :host([error-visible]) .root {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host(:hover) .root {\n                padding-bottom: 0;\n            }\n\n            :host([readonly]) .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n                border-color: transparent;\n            }\n\n            :host([disabled]) .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n            }\n        `\n    ),\n    appearanceBehavior(\n        TextFieldAppearance.outline,\n        css`\n            .root {\n                border-width: ${borderWidth};\n                padding: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        TextFieldAppearance.frameless,\n        css`\n            .control {\n                padding-left: ${borderWidth};\n                padding-right: ${borderWidth};\n            }\n\n            :host([readonly]) .root {\n                border-color: transparent;\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.light,\n        css`\n            .control::-ms-reveal {\n                filter: invert(0%);\n            }\n        `\n    ),\n    themeBehavior(\n        [Theme.dark, Theme.color],\n        css`\n            .control::-ms-reveal {\n                filter: invert(100%);\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,aAAa,EAChB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;;;gBAGD,QAAQ;;UAEd,cAAc;iBACP,aAAa;mDACqB,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;iCAYb,qBAAqB;eACvC,aAAa;mBACT,WAAW;;;;6BAID,qBAAqB;;;;6BAIrB,qBAAqB;;;;+BAInB,SAAS;;;;+BAIT,gBAAgB;;;;;;;;;UASrC,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;;;UAQd,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA0Cd;AACE;;6CAE6C,CAAC,EAClD;;;;;iBAKS,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;;;;4BAUV,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;UAiB9B,aAAa,CAAC,iBAAiB;;CAExC,CAAC,aAAa,CACX,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;gCAI9B,WAAW;iCACV,WAAW;;;;;uCAKL,WAAW;;;;;;;;;yCAST,qBAAqB;;;;;yCAKrB,qBAAqB;;SAErD,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;gCAEqB,WAAW;iCACV,WAAW;;;;;;SAMnC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;SAIF,CACJ,EACD,aAAa,CACT,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,EACzB,GAAG,CAAA;;;;SAIF,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\n\nimport {\n    borderRgbPartialColor,\n    borderHoverColor,\n    borderWidth,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    controlHeight,\n    failColor,\n    smallDelay,\n    controlLabelFont,\n    bodyFont,\n    controlLabelFontColor,\n    controlLabelDisabledFontColor,\n    mediumPadding\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { TextFieldAppearance } from './types';\nimport { Theme } from '../theme-provider/types';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n    ${display('inline-block')}\n    ${errorStyles}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        ${userSelectNone}\n        color: ${bodyFontColor};\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n        --ni-private-height-within-border: calc(\n            ${controlHeight} - 2 * ${borderWidth}\n        );\n    }\n\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .label {\n        display: flex;\n        color: ${controlLabelFontColor};\n        font: ${controlLabelFont};\n    }\n\n    :host([disabled]) .label {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    .root {\n        box-sizing: border-box;\n        position: relative;\n        display: flex;\n        flex-direction: row;\n        border-radius: 0px;\n        font: inherit;\n        align-items: center;\n        justify-content: center;\n        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n        gap: ${mediumPadding};\n        padding: ${borderWidth};\n    }\n\n    :host([readonly]) .root {\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([disabled]) .root {\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .root {\n        border-bottom-color: ${failColor};\n    }\n\n    .root:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    :host([appearance='frameless'][full-bleed]) .root {\n        padding-left: 0px;\n        padding-right: 0px;\n    }\n\n    .root::before {\n        ${/* Empty string causes alignment issue */ ''}\n        content: ' ';\n        color: transparent;\n        width: 0px;\n        ${userSelectNone}\n    }\n\n    :host([appearance='frameless'][full-bleed]) .root::before {\n        display: none;\n    }\n\n    .root::after {\n        ${/* Empty string causes alignment issue */ ''}\n        content: ' ';\n        color: transparent;\n        width: 0px;\n        ${userSelectNone}\n    }\n\n    :host([appearance='frameless'][full-bleed]) .root::after {\n        display: none;\n    }\n\n    [part='start'] {\n        display: contents;\n    }\n\n    slot[name='start']::slotted(*) {\n        flex: none;\n        opacity: 0.6;\n    }\n\n    :host([disabled]) slot[name='start']::slotted(*) {\n        opacity: 0.3;\n    }\n\n    .control {\n        -webkit-appearance: none;\n        font: inherit;\n        background: transparent;\n        color: inherit;\n        padding: 0px;\n        height: var(--ni-private-height-within-border);\n        width: 100%;\n        margin-top: auto;\n        margin-bottom: auto;\n        border: none;\n        text-overflow: ellipsis;\n    }\n\n    .control:hover,\n    .control:focus,\n    .control:disabled,\n    .control:active {\n        outline: none;\n    }\n\n    .control:disabled {\n        ${\n            /* There's an issue with the input element where the ellipsized\n               overflowed text is blank when scrolled into view, so just clip instead.\n               See https://webcompat.com/issues/104481 */ ''\n        }\n        text-overflow: clip;\n    }\n\n    .control::placeholder {\n        color: ${controlLabelFontColor};\n    }\n\n    .control[disabled]::placeholder {\n        color: ${bodyDisabledFontColor};\n    }\n\n    [part='end'] {\n        display: contents;\n    }\n\n    [part='end']::after {\n        content: '';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-hover-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        [part='end']::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host([error-visible]) [part='end']::after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host(:hover) [part='end']::after {\n        width: 100%;\n    }\n\n    :host([disabled]:hover) [part='end']::after,\n    :host([readonly]:hover) [part='end']::after {\n        width: 0px;\n    }\n\n    [part='actions'] {\n        display: contents;\n    }\n\n    slot[name='actions']::slotted(*) {\n        ${controlHeight.cssCustomProperty}: 24px;\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        TextFieldAppearance.underline,\n        css`\n            .root {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        TextFieldAppearance.block,\n        css`\n            .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            .control {\n                padding-left: ${borderWidth};\n                padding-right: ${borderWidth};\n            }\n\n            .root:focus-within,\n            :host([error-visible]) .root {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host(:hover) .root {\n                padding-bottom: 0;\n            }\n\n            :host([readonly]) .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n                border-color: transparent;\n            }\n\n            :host([disabled]) .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n            }\n        `\n    ),\n    appearanceBehavior(\n        TextFieldAppearance.outline,\n        css`\n            .root {\n                border-width: ${borderWidth};\n                padding: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        TextFieldAppearance.frameless,\n        css`\n            .control {\n                padding-left: ${borderWidth};\n                padding-right: ${borderWidth};\n            }\n\n            :host([readonly]) .root {\n                border-color: transparent;\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.light,\n        css`\n            .control::-ms-reveal {\n                filter: invert(0%);\n            }\n        `\n    ),\n    themeBehavior(\n        [Theme.dark, Theme.color],\n        css`\n            .control::-ms-reveal {\n                filter: invert(100%);\n            }\n        `\n    )\n);\n"]}

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

@@ -28,8 +28,18 @@ export declare class ToggleButton extends FoundationSwitch implements ButtonPatt
      * HTML Attribute: content-hidden
      */
     contentHidden: boolean;
+    /**
+     * @public
+     * @remarks
+     * HTML Attribute: tabindex
+     */
+    tabIndex: number;
     /** @internal */
     readonly control: HTMLElement;
+    /**
+     * @internal
+     */
+    get resolvedTabindex(): string | undefined;
 }
 export interface ToggleButton extends StartEnd, DelegatesARIAButton {
 }