@ni/nimble-components 23.0.1 → 24.0.0

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

@@ -1,7 +1,6 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
-import { ButtonAppearance } from '../button/types';
+import { ButtonAppearance, ButtonAppearanceVariant, MenuButtonPosition } from './types';
 import type { ToggleButton } from '../toggle-button';
-import { MenuButtonPosition } from './types';
 import type { ButtonPattern } from '../patterns/button/types';
 import type { AnchoredRegion } from '../anchored-region';
 declare global {
@@ -14,6 +13,7 @@ declare global {
  */
 export declare class MenuButton extends FoundationElement implements ButtonPattern {
     appearance: ButtonAppearance;
+    appearanceVariant: ButtonAppearanceVariant;
     disabled: boolean;
     contentHidden: boolean;
     /**

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

@@ -2,10 +2,9 @@ import { __decorate } from "tslib";
 import { attr, observable } from '@microsoft/fast-element';
 import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
 import { eventChange, keyArrowDown, keyArrowUp, keyEscape } from '@microsoft/fast-web-utilities';
-import { ButtonAppearance } from '../button/types';
+import { ButtonAppearance, MenuButtonPosition } from './types';
 import { styles } from './styles';
 import { template } from './template';
-import { MenuButtonPosition } from './types';
 /**
  * A nimble-styled menu button control.
  */
@@ -182,6 +181,9 @@ export class MenuButton extends FoundationElement {
 __decorate([
     attr
 ], MenuButton.prototype, "appearance", void 0);
+__decorate([
+    attr({ attribute: 'appearance-variant' })
+], MenuButton.prototype, "appearanceVariant", void 0);
 __decorate([
     attr({ mode: 'boolean' })
 ], MenuButton.prototype, "disabled", 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 { ButtonAppearance } from '../button/types';\nimport type { ToggleButton } from '../toggle-button';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { MenuButtonToggleEventDetail, MenuButtonPosition } from './types';\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({ 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 { 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"]}

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

@@ -10,6 +10,7 @@ export const template = html `
         <${toggleButtonTag}
             part="button"
             appearance="${x => x.appearance}"
+            appearance-variant="${x => x.appearanceVariant}"
             ?content-hidden="${x => x.contentHidden}"
             ?checked="${x => x.open}"
             ?disabled="${x => x.disabled}"

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;+BACZ,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            ?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;;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"]}

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

@@ -2,7 +2,7 @@
  * Types of menu button appearance.
  * @public
  */
-export { ButtonAppearance } from '../patterns/button/types';
+export { ButtonAppearance, ButtonAppearanceVariant } from '../patterns/button/types';
 /**
  * The options of where to position the menu relative to the menu button.
  */

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

@@ -2,7 +2,7 @@
  * Types of menu button appearance.
  * @public
  */
-export { ButtonAppearance } from '../patterns/button/types';
+export { ButtonAppearance, ButtonAppearanceVariant } from '../patterns/button/types';
 /**
  * The options of where to position the menu relative to the menu button.
  */

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/menu-button/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAC9B,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;CACN,CAAC","sourcesContent":["/**\n * Types of menu button appearance.\n * @public\n */\nexport { ButtonAppearance } from '../patterns/button/types';\n\n/**\n * The options of where to position the menu relative to the menu button.\n */\nexport const MenuButtonPosition = {\n    above: 'above',\n    below: 'below',\n    auto: 'auto'\n} as const;\nexport type MenuButtonPosition =\n    (typeof MenuButtonPosition)[keyof typeof MenuButtonPosition];\n\n/**\n * The type of the detail associated with the `toggle` and `beforetoggle`\n * events on the menu button.\n */\nexport interface MenuButtonToggleEventDetail {\n    newState: boolean;\n    oldState: boolean;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/menu-button/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EACH,gBAAgB,EAChB,uBAAuB,EAC1B,MAAM,0BAA0B,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAC9B,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;CACN,CAAC","sourcesContent":["/**\n * Types of menu button appearance.\n * @public\n */\nexport {\n    ButtonAppearance,\n    ButtonAppearanceVariant\n} from '../patterns/button/types';\n\n/**\n * The options of where to position the menu relative to the menu button.\n */\nexport const MenuButtonPosition = {\n    above: 'above',\n    below: 'below',\n    auto: 'auto'\n} as const;\nexport type MenuButtonPosition =\n    (typeof MenuButtonPosition)[keyof typeof MenuButtonPosition];\n\n/**\n * The type of the detail associated with the `toggle` and `beforetoggle`\n * events on the menu button.\n */\nexport interface MenuButtonToggleEventDetail {\n    newState: boolean;\n    oldState: boolean;\n}\n"]}

package/dist/esm/patterns/button/styles.js

@@ -1,12 +1,12 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import { focusVisible } from '../../utilities/style/focus';
-import { actionRgbPartialColor, borderHoverColor, borderRgbPartialColor, borderWidth, buttonLabelFont, buttonLabelFontColor, buttonLabelDisabledFontColor, controlHeight, fillSelectedColor, iconColor, smallDelay, standardPadding, buttonPrimaryFontColor, buttonFillPrimaryColor, buttonFillActivePrimaryColor, buttonFillAccentColor, buttonAccentBlockFontColor, buttonFillAccentActiveColor, buttonBorderAccentOutlineColor, buttonAccentOutlineFontColor } from '../../theme-provider/design-tokens';
+import { actionRgbPartialColor, borderHoverColor, borderRgbPartialColor, borderWidth, buttonLabelFont, buttonLabelFontColor, buttonLabelDisabledFontColor, controlHeight, fillSelectedColor, iconColor, smallDelay, standardPadding, buttonPrimaryFontColor, buttonFillPrimaryColor, buttonFillAccentColor, buttonAccentBlockFontColor, buttonBorderAccentOutlineColor, buttonAccentOutlineFontColor } from '../../theme-provider/design-tokens';
 import { appearanceBehavior } from '../../utilities/style/appearance';
 import { ButtonAppearance } from './types';
 import { accessiblyHidden } from '../../utilities/style/accessibly-hidden';
 export const styles = css `
-    @layer base, hover, focusVisible, active, disabled, top;
+    @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
         ${display('inline-flex')}
@@ -79,15 +79,15 @@ export const styles = css `
             display: contents;
         }
 
-        :host([content-hidden]) .content {
-            ${accessiblyHidden}
-        }
-
         [part='start'] {
             display: contents;
             ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
         }
 
+        :host([content-hidden]) .content {
+            ${accessiblyHidden}
+        }
+
         [part='end'] {
             display: contents;
             ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
@@ -116,6 +116,8 @@ export const styles = css `
     @layer active {
         .control:active {
             box-shadow: none;
+            color: ${buttonLabelFontColor};
+            border-color: ${borderHoverColor};
             background-image: linear-gradient(
                 ${fillSelectedColor},
                 ${fillSelectedColor}
@@ -126,29 +128,30 @@ export const styles = css `
         .control:active::before {
             outline: none;
         }
+
+        .control:active [part='start'],
+        .control:active [part='end'] {
+            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
+        }
     }
 
     @layer disabled {
         :host([disabled]) {
-            color: ${buttonLabelDisabledFontColor};
             cursor: default;
         }
 
         :host([disabled]) .control {
+            color: ${buttonLabelDisabledFontColor};
             box-shadow: none;
             background-image: none;
-            color: rgba(${actionRgbPartialColor}, 0.3);
+            background-size: 100% 100%;
         }
 
         :host([disabled]) .control::before {
             box-shadow: none;
         }
 
-        :host([disabled]) slot[name='start']::slotted(*) {
-            opacity: 0.3;
-            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
-        }
-
+        :host([disabled]) slot[name='start']::slotted(*),
         :host([disabled]) slot[name='end']::slotted(*) {
             opacity: 0.3;
             ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
@@ -213,7 +216,6 @@ export const styles = css `
                         rgba(${borderRgbPartialColor}, 0.1),
                         rgba(${borderRgbPartialColor}, 0.1)
                     );
-                    background-size: 100% 100%;
                     border-color: rgba(${borderRgbPartialColor}, 0.1);
                 }
             }
@@ -228,13 +230,29 @@ export const buttonAppearanceVariantStyles = css ``.withBehaviors(appearanceBeha
                     border-color: ${buttonBorderAccentOutlineColor};
                     color: ${buttonAccentOutlineFontColor};
                 }
+
+                :host([appearance-variant='accent']) [part='start'],
+                :host([appearance-variant='accent']) [part='end'] {
+                    ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};
+                }
             }
-        `), appearanceBehavior(ButtonAppearance.block, css `
-            @layer base {
-                :host([appearance-variant='primary']) [part='start'] {
-                    ${iconColor.cssCustomProperty}: white;
+
+            @layer active {
+                :host([appearance-variant='accent']) .control:active {
+                    color: ${buttonAccentOutlineFontColor};
                 }
 
+                :host([appearance-variant='accent'])
+                    .control:active
+                    [part='start'],
+                :host([appearance-variant='accent'])
+                    .control:active
+                    [part='end'] {
+                    ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};
+                }
+            }
+        `), appearanceBehavior(ButtonAppearance.block, css `
+            @layer base {
                 :host([appearance-variant='primary']) .control {
                     background-image: linear-gradient(
                         ${buttonFillPrimaryColor},
@@ -244,14 +262,6 @@ export const buttonAppearanceVariantStyles = css ``.withBehaviors(appearanceBeha
                     border-color: ${buttonFillPrimaryColor};
                 }
 
-                :host([appearance-variant='primary']) [part='end'] {
-                    ${iconColor.cssCustomProperty}: white;
-                }
-
-                :host([appearance-variant='accent']) [part='start'] {
-                    ${iconColor.cssCustomProperty}: white;
-                }
-
                 :host([appearance-variant='accent']) .control {
                     background-image: linear-gradient(
                         ${buttonFillAccentColor},
@@ -261,24 +271,14 @@ export const buttonAppearanceVariantStyles = css ``.withBehaviors(appearanceBeha
                     border-color: ${buttonFillAccentColor};
                 }
 
-                :host([appearance-variant='accent']) [part='end'] {
-                    ${iconColor.cssCustomProperty}: white;
-                }
-            }
-
-            @layer active {
-                :host([appearance-variant='primary']) .control:active {
-                    background-image: linear-gradient(
-                        ${buttonFillActivePrimaryColor},
-                        ${buttonFillActivePrimaryColor}
-                    );
+                :host([appearance-variant='primary']) [part='start'],
+                :host([appearance-variant='primary']) [part='end'] {
+                    ${iconColor.cssCustomProperty}: ${buttonPrimaryFontColor};
                 }
 
-                :host([appearance-variant='accent']) .control:active {
-                    background-image: linear-gradient(
-                        ${buttonFillAccentActiveColor},
-                        ${buttonFillAccentActiveColor}
-                    );
+                :host([appearance-variant='accent']) [part='start'],
+                :host([appearance-variant='accent']) [part='end'] {
+                    ${iconColor.cssCustomProperty}: ${buttonPrimaryFontColor};
                 }
             }
         `));

package/dist/esm/patterns/button/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/button/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { focusVisible } from '../../utilities/style/focus';\nimport {\n    actionRgbPartialColor,\n    borderHoverColor,\n    borderRgbPartialColor,\n    borderWidth,\n    buttonLabelFont,\n    buttonLabelFontColor,\n    buttonLabelDisabledFontColor,\n    controlHeight,\n    fillSelectedColor,\n    iconColor,\n    smallDelay,\n    standardPadding,\n    buttonPrimaryFontColor,\n    buttonFillPrimaryColor,\n    buttonFillActivePrimaryColor,\n    buttonFillAccentColor,\n    buttonAccentBlockFontColor,\n    buttonFillAccentActiveColor,\n    buttonBorderAccentOutlineColor,\n    buttonAccentOutlineFontColor\n} from '../../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../../utilities/style/appearance';\nimport { ButtonAppearance } from './types';\nimport { accessiblyHidden } from '../../utilities/style/accessibly-hidden';\n\nexport const styles = css`\n    @layer base, hover, focusVisible, active, disabled, top;\n\n    @layer base {\n        ${display('inline-flex')}\n\n        :host {\n            background-color: transparent;\n            height: ${controlHeight};\n            color: ${buttonLabelFontColor};\n            font: ${buttonLabelFont};\n            cursor: pointer;\n            outline: none;\n            border: none;\n            box-sizing: border-box;\n            ${\n                /*\n                    Not sure why but this is needed to get buttons with icons and buttons\n                    without icons to align on the same line when the button is inline-flex\n                    See: https://github.com/ni/nimble/issues/503\n                */ ''\n            }\n            vertical-align: middle;\n        }\n\n        .control {\n            background-color: transparent;\n            height: 100%;\n            width: 100%;\n            border: ${borderWidth} solid transparent;\n            box-sizing: border-box;\n            color: inherit;\n            border-radius: inherit;\n            fill: inherit;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            gap: 4px;\n            cursor: inherit;\n            font: inherit;\n            outline: none;\n            margin: 0;\n            padding: 0 ${standardPadding};\n            position: relative;\n            transition:\n                box-shadow ${smallDelay} ease-in-out,\n                border-color ${smallDelay} ease-in-out,\n                background-size ${smallDelay} ease-in-out;\n            background-size: 100% 100%;\n            background-repeat: no-repeat;\n            background-position: center;\n        }\n\n        :host([content-hidden]) .control {\n            aspect-ratio: 1 / 1;\n            padding: 0px;\n        }\n\n        .control::before {\n            content: '';\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            pointer-events: none;\n            box-sizing: border-box;\n            outline: 0px solid transparent;\n            color: transparent;\n            background-clip: content-box;\n            transition: outline ${smallDelay} ease-in-out;\n        }\n\n        .content {\n            display: contents;\n        }\n\n        :host([content-hidden]) .content {\n            ${accessiblyHidden}\n        }\n\n        [part='start'] {\n            display: contents;\n            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n        }\n\n        [part='end'] {\n            display: contents;\n            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n        }\n    }\n\n    @layer hover {\n        .control:hover {\n            border-color: ${borderHoverColor};\n            box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n        }\n    }\n\n    @layer focusVisible {\n        .control${focusVisible} {\n            border-color: ${borderHoverColor};\n            box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n        }\n\n        .control${focusVisible}::before {\n            outline: ${borderWidth} solid ${borderHoverColor};\n            outline-offset: -3px;\n        }\n    }\n\n    @layer active {\n        .control:active {\n            box-shadow: none;\n            background-image: linear-gradient(\n                ${fillSelectedColor},\n                ${fillSelectedColor}\n            );\n            background-size: calc(100% - 2px) calc(100% - 2px);\n        }\n\n        .control:active::before {\n            outline: none;\n        }\n    }\n\n    @layer disabled {\n        :host([disabled]) {\n            color: ${buttonLabelDisabledFontColor};\n            cursor: default;\n        }\n\n        :host([disabled]) .control {\n            box-shadow: none;\n            background-image: none;\n            color: rgba(${actionRgbPartialColor}, 0.3);\n        }\n\n        :host([disabled]) .control::before {\n            box-shadow: none;\n        }\n\n        :host([disabled]) slot[name='start']::slotted(*) {\n            opacity: 0.3;\n            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n        }\n\n        :host([disabled]) slot[name='end']::slotted(*) {\n            opacity: 0.3;\n            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n        }\n    }\n\n    @layer top {\n        @media (prefers-reduced-motion) {\n            .control {\n                transition-duration: 0s;\n            }\n        }\n\n        :host([content-hidden]) [part='end'] {\n            display: none;\n        }\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        ButtonAppearance.outline,\n        css`\n            @layer base {\n                .control {\n                    border-color: rgba(${actionRgbPartialColor}, 0.3);\n                }\n            }\n\n            @layer disabled {\n                :host([disabled]) .control {\n                    border-color: rgba(${borderRgbPartialColor}, 0.3);\n                }\n            }\n        `\n    ),\n    appearanceBehavior(\n        ButtonAppearance.ghost,\n        css`\n            @layer disabled {\n                :host([disabled]) .control {\n                    border-color: transparent;\n                }\n            }\n        `\n    ),\n    appearanceBehavior(\n        ButtonAppearance.block,\n        css`\n            @layer base {\n                .control {\n                    background-image: linear-gradient(\n                        rgba(${borderRgbPartialColor}, 0.1),\n                        rgba(${borderRgbPartialColor}, 0.1)\n                    );\n                    border-color: rgba(${borderRgbPartialColor}, 0.1);\n                }\n            }\n\n            @layer hover {\n                .control:hover {\n                    background-size: calc(100% - 4px) calc(100% - 4px);\n                }\n            }\n\n            @layer focusVisible {\n                .control${focusVisible} {\n                    background-size: calc(100% - 4px) calc(100% - 4px);\n                }\n            }\n\n            @layer disabled {\n                :host([disabled]) .control {\n                    background-image: linear-gradient(\n                        rgba(${borderRgbPartialColor}, 0.1),\n                        rgba(${borderRgbPartialColor}, 0.1)\n                    );\n                    background-size: 100% 100%;\n                    border-color: rgba(${borderRgbPartialColor}, 0.1);\n                }\n            }\n        `\n    )\n);\n\nexport const buttonAppearanceVariantStyles = css``.withBehaviors(\n    appearanceBehavior(\n        ButtonAppearance.outline,\n        css`\n            @layer base {\n                :host([appearance-variant='primary']) .control {\n                    border-color: ${actionRgbPartialColor};\n                }\n\n                :host([appearance-variant='accent']) .control {\n                    border-color: ${buttonBorderAccentOutlineColor};\n                    color: ${buttonAccentOutlineFontColor};\n                }\n            }\n        `\n    ),\n    appearanceBehavior(\n        ButtonAppearance.block,\n        css`\n            @layer base {\n                :host([appearance-variant='primary']) [part='start'] {\n                    ${iconColor.cssCustomProperty}: white;\n                }\n\n                :host([appearance-variant='primary']) .control {\n                    background-image: linear-gradient(\n                        ${buttonFillPrimaryColor},\n                        ${buttonFillPrimaryColor}\n                    );\n                    color: ${buttonPrimaryFontColor};\n                    border-color: ${buttonFillPrimaryColor};\n                }\n\n                :host([appearance-variant='primary']) [part='end'] {\n                    ${iconColor.cssCustomProperty}: white;\n                }\n\n                :host([appearance-variant='accent']) [part='start'] {\n                    ${iconColor.cssCustomProperty}: white;\n                }\n\n                :host([appearance-variant='accent']) .control {\n                    background-image: linear-gradient(\n                        ${buttonFillAccentColor},\n                        ${buttonFillAccentColor}\n                    );\n                    color: ${buttonAccentBlockFontColor};\n                    border-color: ${buttonFillAccentColor};\n                }\n\n                :host([appearance-variant='accent']) [part='end'] {\n                    ${iconColor.cssCustomProperty}: white;\n                }\n            }\n\n            @layer active {\n                :host([appearance-variant='primary']) .control:active {\n                    background-image: linear-gradient(\n                        ${buttonFillActivePrimaryColor},\n                        ${buttonFillActivePrimaryColor}\n                    );\n                }\n\n                :host([appearance-variant='accent']) .control:active {\n                    background-image: linear-gradient(\n                        ${buttonFillAccentActiveColor},\n                        ${buttonFillAccentActiveColor}\n                    );\n                }\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/button/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { focusVisible } from '../../utilities/style/focus';\nimport {\n    actionRgbPartialColor,\n    borderHoverColor,\n    borderRgbPartialColor,\n    borderWidth,\n    buttonLabelFont,\n    buttonLabelFontColor,\n    buttonLabelDisabledFontColor,\n    controlHeight,\n    fillSelectedColor,\n    iconColor,\n    smallDelay,\n    standardPadding,\n    buttonPrimaryFontColor,\n    buttonFillPrimaryColor,\n    buttonFillAccentColor,\n    buttonAccentBlockFontColor,\n    buttonBorderAccentOutlineColor,\n    buttonAccentOutlineFontColor\n} from '../../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../../utilities/style/appearance';\nimport { ButtonAppearance } from './types';\nimport { accessiblyHidden } from '../../utilities/style/accessibly-hidden';\n\nexport const styles = css`\n    @layer base, checked, hover, focusVisible, active, disabled, top;\n\n    @layer base {\n        ${display('inline-flex')}\n\n        :host {\n            background-color: transparent;\n            height: ${controlHeight};\n            color: ${buttonLabelFontColor};\n            font: ${buttonLabelFont};\n            cursor: pointer;\n            outline: none;\n            border: none;\n            box-sizing: border-box;\n            ${\n                /*\n                    Not sure why but this is needed to get buttons with icons and buttons\n                    without icons to align on the same line when the button is inline-flex\n                    See: https://github.com/ni/nimble/issues/503\n                */ ''\n            }\n            vertical-align: middle;\n        }\n\n        .control {\n            background-color: transparent;\n            height: 100%;\n            width: 100%;\n            border: ${borderWidth} solid transparent;\n            box-sizing: border-box;\n            color: inherit;\n            border-radius: inherit;\n            fill: inherit;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            gap: 4px;\n            cursor: inherit;\n            font: inherit;\n            outline: none;\n            margin: 0;\n            padding: 0 ${standardPadding};\n            position: relative;\n            transition:\n                box-shadow ${smallDelay} ease-in-out,\n                border-color ${smallDelay} ease-in-out,\n                background-size ${smallDelay} ease-in-out;\n            background-size: 100% 100%;\n            background-repeat: no-repeat;\n            background-position: center;\n        }\n\n        :host([content-hidden]) .control {\n            aspect-ratio: 1 / 1;\n            padding: 0px;\n        }\n\n        .control::before {\n            content: '';\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            pointer-events: none;\n            box-sizing: border-box;\n            outline: 0px solid transparent;\n            color: transparent;\n            background-clip: content-box;\n            transition: outline ${smallDelay} ease-in-out;\n        }\n\n        .content {\n            display: contents;\n        }\n\n        [part='start'] {\n            display: contents;\n            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n        }\n\n        :host([content-hidden]) .content {\n            ${accessiblyHidden}\n        }\n\n        [part='end'] {\n            display: contents;\n            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n        }\n    }\n\n    @layer hover {\n        .control:hover {\n            border-color: ${borderHoverColor};\n            box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n        }\n    }\n\n    @layer focusVisible {\n        .control${focusVisible} {\n            border-color: ${borderHoverColor};\n            box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n        }\n\n        .control${focusVisible}::before {\n            outline: ${borderWidth} solid ${borderHoverColor};\n            outline-offset: -3px;\n        }\n    }\n\n    @layer active {\n        .control:active {\n            box-shadow: none;\n            color: ${buttonLabelFontColor};\n            border-color: ${borderHoverColor};\n            background-image: linear-gradient(\n                ${fillSelectedColor},\n                ${fillSelectedColor}\n            );\n            background-size: calc(100% - 2px) calc(100% - 2px);\n        }\n\n        .control:active::before {\n            outline: none;\n        }\n\n        .control:active [part='start'],\n        .control:active [part='end'] {\n            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n        }\n    }\n\n    @layer disabled {\n        :host([disabled]) {\n            cursor: default;\n        }\n\n        :host([disabled]) .control {\n            color: ${buttonLabelDisabledFontColor};\n            box-shadow: none;\n            background-image: none;\n            background-size: 100% 100%;\n        }\n\n        :host([disabled]) .control::before {\n            box-shadow: none;\n        }\n\n        :host([disabled]) slot[name='start']::slotted(*),\n        :host([disabled]) slot[name='end']::slotted(*) {\n            opacity: 0.3;\n            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n        }\n    }\n\n    @layer top {\n        @media (prefers-reduced-motion) {\n            .control {\n                transition-duration: 0s;\n            }\n        }\n\n        :host([content-hidden]) [part='end'] {\n            display: none;\n        }\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        ButtonAppearance.outline,\n        css`\n            @layer base {\n                .control {\n                    border-color: rgba(${actionRgbPartialColor}, 0.3);\n                }\n            }\n\n            @layer disabled {\n                :host([disabled]) .control {\n                    border-color: rgba(${borderRgbPartialColor}, 0.3);\n                }\n            }\n        `\n    ),\n    appearanceBehavior(\n        ButtonAppearance.ghost,\n        css`\n            @layer disabled {\n                :host([disabled]) .control {\n                    border-color: transparent;\n                }\n            }\n        `\n    ),\n    appearanceBehavior(\n        ButtonAppearance.block,\n        css`\n            @layer base {\n                .control {\n                    background-image: linear-gradient(\n                        rgba(${borderRgbPartialColor}, 0.1),\n                        rgba(${borderRgbPartialColor}, 0.1)\n                    );\n                    border-color: rgba(${borderRgbPartialColor}, 0.1);\n                }\n            }\n\n            @layer hover {\n                .control:hover {\n                    background-size: calc(100% - 4px) calc(100% - 4px);\n                }\n            }\n\n            @layer focusVisible {\n                .control${focusVisible} {\n                    background-size: calc(100% - 4px) calc(100% - 4px);\n                }\n            }\n\n            @layer disabled {\n                :host([disabled]) .control {\n                    background-image: linear-gradient(\n                        rgba(${borderRgbPartialColor}, 0.1),\n                        rgba(${borderRgbPartialColor}, 0.1)\n                    );\n                    border-color: rgba(${borderRgbPartialColor}, 0.1);\n                }\n            }\n        `\n    )\n);\n\nexport const buttonAppearanceVariantStyles = css``.withBehaviors(\n    appearanceBehavior(\n        ButtonAppearance.outline,\n        css`\n            @layer base {\n                :host([appearance-variant='primary']) .control {\n                    border-color: ${actionRgbPartialColor};\n                }\n\n                :host([appearance-variant='accent']) .control {\n                    border-color: ${buttonBorderAccentOutlineColor};\n                    color: ${buttonAccentOutlineFontColor};\n                }\n\n                :host([appearance-variant='accent']) [part='start'],\n                :host([appearance-variant='accent']) [part='end'] {\n                    ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};\n                }\n            }\n\n            @layer active {\n                :host([appearance-variant='accent']) .control:active {\n                    color: ${buttonAccentOutlineFontColor};\n                }\n\n                :host([appearance-variant='accent'])\n                    .control:active\n                    [part='start'],\n                :host([appearance-variant='accent'])\n                    .control:active\n                    [part='end'] {\n                    ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};\n                }\n            }\n        `\n    ),\n    appearanceBehavior(\n        ButtonAppearance.block,\n        css`\n            @layer base {\n                :host([appearance-variant='primary']) .control {\n                    background-image: linear-gradient(\n                        ${buttonFillPrimaryColor},\n                        ${buttonFillPrimaryColor}\n                    );\n                    color: ${buttonPrimaryFontColor};\n                    border-color: ${buttonFillPrimaryColor};\n                }\n\n                :host([appearance-variant='accent']) .control {\n                    background-image: linear-gradient(\n                        ${buttonFillAccentColor},\n                        ${buttonFillAccentColor}\n                    );\n                    color: ${buttonAccentBlockFontColor};\n                    border-color: ${buttonFillAccentColor};\n                }\n\n                :host([appearance-variant='primary']) [part='start'],\n                :host([appearance-variant='primary']) [part='end'] {\n                    ${iconColor.cssCustomProperty}: ${buttonPrimaryFontColor};\n                }\n\n                :host([appearance-variant='accent']) [part='start'],\n                :host([appearance-variant='accent']) [part='end'] {\n                    ${iconColor.cssCustomProperty}: ${buttonPrimaryFontColor};\n                }\n            }\n        `\n    )\n);\n"]}

package/dist/esm/theme-provider/design-token-comments.js

@@ -6,12 +6,10 @@ export const comments = {
     sectionBackgroundColor: 'Background color for sections',
     buttonFillPrimaryColor: 'Control fill color for "primary" appearance-variant buttons',
     buttonPrimaryFontColor: 'Font color for "primary" appearance-variant buttons',
-    buttonFillActivePrimaryColor: 'Active fill color for "primary" appearance-variant buttons',
     buttonFillAccentColor: 'Control fill color for "accent" appearance-variant buttons',
     buttonAccentBlockFontColor: 'Font color for "accent" appearance-variant block buttons',
     buttonAccentOutlineFontColor: 'Font color for "accent" appearance-variant outline buttons',
     buttonBorderAccentOutlineColor: 'Border color for "accent" appearance-variant outline buttons',
-    buttonFillAccentActiveColor: 'Active fill color for "accent" appearance-variant buttons',
     fillSelectedColor: 'Control fill color when a control is selected',
     fillSelectedRgbPartialColor: 'DEPRECATED: *-partial tokens are used with rgba() to set color transparency in component stylesheets',
     fillHoverSelectedColor: 'Control fill color when hovering a selected control',

package/dist/esm/theme-provider/design-token-comments.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-token-comments.js","sourceRoot":"","sources":["../../../src/theme-provider/design-token-comments.ts"],"names":[],"mappings":"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","sourcesContent":["import type * as TokensNamespace from './design-tokens';\n\ntype TokenName = keyof typeof TokensNamespace;\n\nexport const comments: { readonly [key in TokenName]: string | null } = {\n    actionRgbPartialColor:\n        'DEPRECATED: *-partial tokens are used with rgba() to set color transparency in component stylesheets',\n    applicationBackgroundColor: 'Primary background color for the application',\n    dividerBackgroundColor: 'Divider background color',\n    headerBackgroundColor: 'Background color for application headers',\n    sectionBackgroundColor: 'Background color for sections',\n    buttonFillPrimaryColor:\n        'Control fill color for \"primary\" appearance-variant buttons',\n    buttonPrimaryFontColor:\n        'Font color for \"primary\" appearance-variant buttons',\n    buttonFillActivePrimaryColor:\n        'Active fill color for \"primary\" appearance-variant buttons',\n    buttonFillAccentColor:\n        'Control fill color for \"accent\" appearance-variant buttons',\n    buttonAccentBlockFontColor:\n        'Font color for \"accent\" appearance-variant block buttons',\n    buttonAccentOutlineFontColor:\n        'Font color for \"accent\" appearance-variant outline buttons',\n    buttonBorderAccentOutlineColor:\n        'Border color for \"accent\" appearance-variant outline buttons',\n    buttonFillAccentActiveColor:\n        'Active fill color for \"accent\" appearance-variant buttons',\n    fillSelectedColor: 'Control fill color when a control is selected',\n    fillSelectedRgbPartialColor:\n        'DEPRECATED: *-partial tokens are used with rgba() to set color transparency in component stylesheets',\n    fillHoverSelectedColor:\n        'Control fill color when hovering a selected control',\n    fillHoverColor: 'Control fill color when hovering component',\n    fillHoverRgbPartialColor:\n        'DEPRECATED: *-partial tokens are used with rgba() to set color transparency in component stylesheets',\n    fillDownColor: 'Control fill color when mousedown event occurs',\n    borderColor: 'Standard control outline or border color',\n    borderRgbPartialColor:\n        'DEPRECATED: *-partial tokens are used with rgba() to set color transparency in component stylesheets',\n    failColor: 'Used to highlight errors or invalid input',\n    warningColor:\n        'Used to highlight invalid input or for icons to indicate that a process errored or failed',\n    passColor:\n        'Used to highlight a correct state or the successful completion of a process',\n    informationColor:\n        'Used to highlight information, which provides more details on the item',\n    borderHoverColor: 'Border color when hovering component',\n    iconColor: 'Equivalent to the font color for icons',\n    modalBackdropColor: 'Color of background overlay behind modal dialog boxes',\n    popupBorderColor: 'Border color for menus and dialog boxes',\n    cardBorderColor: 'Border color for cards',\n    controlHeight:\n        'Standard layout height for all controls. Add \"labelHeight\" for labels on top.',\n    controlSlimHeight:\n        'Height of controls that are somewhat shorter than standard height.',\n    smallPadding: 'Fixed 4px size ramp token for component layout',\n    mediumPadding: 'Fixed 8px size ramp token for component layout',\n    standardPadding: 'Fixed 16px size ramp token for component layout',\n    largePadding: 'Fixed 24px size ramp token for component layout',\n    labelHeight:\n        'Standard label height for components. Set the label font rather than explicitly setting the height for a label.',\n    borderWidth: 'Standard border width for most components',\n    iconSize: 'Standard layout height for all icons',\n    groupHeaderTextTransform: 'CSS text-transform string to use for headers',\n    drawerWidth: 'TODO: delete when able',\n    dialogSmallWidth:\n        'Standard width for small dialogs like a confirmation dialog.',\n    dialogSmallHeight:\n        'Standard height for small dialogs like a confirmation dialog.',\n    dialogSmallMaxHeight:\n        'Standard maximum height for small dialogs like a confirmation dialog.',\n    dialogLargeWidth: 'Standard width for large dialogs.',\n    dialogLargeHeight: 'Standard height for large dialogs.',\n    dialogLargeMaxHeight: 'Standard maximum height for large dialogs.',\n    menuMinWidth: 'Standard menu min width for menu popup.',\n    bannerGapSize: 'Space between stacked banners',\n    spinnerSmallHeight: 'Small height (16px) for a spinner component',\n    spinnerMediumHeight: 'Medium height (32px) for a spinner component',\n    spinnerLargeHeight: 'Large height (64px) for a spinner component',\n    smallDelay:\n        'Elements with small transition areas, such as icons and selection controls, have short durations.',\n    mediumDelay:\n        'Elements with larger transition areas, such as bottom sheets and expanding chips, have slightly longer durations.',\n    largeDelay:\n        'Animated elements that traverse a large portion of the screen have the longest durations.',\n    headlinePlus1Font: 'Font shorthand for the \"Headline_2\" base token',\n    headlinePlus1FontColor: 'Font color for the \"Headline_2\" base token',\n    headlinePlus1DisabledFontColor:\n        'Disabled font color for the \"Headline_2\" base token',\n    headlinePlus1FontFamily: 'Font family for the \"Headline_2\" base token',\n    headlinePlus1FontSize: 'Font size for the \"Headline_2\" base token',\n    headlinePlus1FontWeight: 'Font weight for the \"Headline_2\" base token',\n    headlinePlus1FontLineHeight:\n        'Font line height for the \"Headline_2\" base token',\n    headlinePlus1FallbackFontFamily: null,\n    headlineFont: 'Font shorthand for the \"Headline_1\" base token',\n    headlineFontColor: 'Font color for the \"Headline_1\" base token',\n    headlineDisabledFontColor:\n        'Disabled font color for the \"Headline_1\" base token',\n    headlineFontFamily: 'Font family for the \"Headline_1\" base token',\n    headlineFontSize: 'Font size for the \"Headline_1\" base token',\n    headlineFontWeight: 'Font weight for the \"Headline_1\" base token',\n    headlineFontLineHeight: 'Font line height for the \"Headline_1\" base token',\n    headlineFallbackFontFamily:\n        'Fallback font family for the \"Headline_1\" base token',\n    tableHeaderFont: 'Font shorthand for the \"Grid_Header\" base token',\n    tableHeaderFontColor: 'Font color for the \"Grid_Header\" base token',\n    tableHeaderDisabledFontColor:\n        'Disabled font color for the \"Grid_Header\" base token',\n    tableHeaderFontFamily: 'Font family for the \"Grid_Header\" base token',\n    tableHeaderFontSize: 'Font size for the \"Grid_Header\" base token',\n    tableHeaderFontWeight: 'Font weight for the \"Grid_Header\" base token',\n    tableHeaderFontLineHeight:\n        'Font line height for the \"Grid_Header\" base token',\n    tableHeaderFallbackFontFamily:\n        'Fallback font family for the \"Grid_Header\" base token',\n    titlePlus2Font: 'Font shorthand for the \"Title_3\" base token',\n    titlePlus2FontColor: 'Font color for the \"Title_3\" base token',\n    titlePlus2DisabledFontColor:\n        'Disabled font color for the \"Title_3\" base token',\n    titlePlus2FontFamily: 'Font family for the \"Title_3\" base token',\n    titlePlus2FontSize: 'Font size for the \"Title_3\" base token',\n    titlePlus2FontWeight: 'Font weight for the \"Title_3\" base token',\n    titlePlus2FontLineHeight: 'Font line height for the \"Title_3\" base token',\n    titlePlus2FallbackFontFamily:\n        'Fallback font family for the \"Title_3\" base token',\n    titlePlus1Font: 'Font shorthand for the \"Title_2\" base token',\n    titlePlus1FontColor: 'Font color for the \"Title_2\" base token',\n    titlePlus1DisabledFontColor:\n        'Disabled font color for the \"Title_2\" base token',\n    titlePlus1FontFamily: 'Font family for the \"Title_2\" base token',\n    titlePlus1FontSize: 'Font size for the \"Title_2\" base token',\n    titlePlus1FontWeight: 'Font weight for the \"Title_2\" base token',\n    titlePlus1FontLineHeight: 'Font line height for the \"Title_2\" base token',\n    titlePlus1FallbackFontFamily:\n        'Fallback font family for the \"Title_2\" base token',\n    titleFont: 'Font shorthand for the \"Title_1\" base token',\n    titleFontColor: 'Font color for the \"Title_1\" base token',\n    titleDisabledFontColor: 'Disabled font color for the \"Title_1\" base token',\n    titleFontFamily: 'Font family for the \"Title_1\" base token',\n    titleFontSize: 'Font size for the \"Title_1\" base token',\n    titleFontWeight: 'Font weight for the \"Title_1\" base token',\n    titleFontLineHeight: 'Font line height for the \"Title_1\" base token',\n    titleFallbackFontFamily:\n        'Fallback font family for the \"Title_1\" base token',\n    subtitlePlus1Font: 'Font shorthand for the \"Subtitle_2\" base token',\n    subtitlePlus1FontColor: 'Font color for the \"Subtitle_2\" base token',\n    subtitlePlus1DisabledFontColor:\n        'Disabled font color for the \"Subtitle_2\" base token',\n    subtitlePlus1FontFamily: 'Font family for the \"Subtitle_2\" base token',\n    subtitlePlus1FontSize: 'Font size for the \"Subitle_2\" base token',\n    subtitlePlus1FontWeight: 'Font weight for the \"Subtitle_2\" base token',\n    subtitlePlus1FontLineHeight:\n        'Font line height for the \"Subtitle_2\" base token',\n    subtitlePlus1FallbackFontFamily:\n        'Fallback font family for the \"Subtitle_2\" base token',\n    subtitleFont: 'Font shorthand for the \"Subtitle_1\" base token',\n    subtitleFontColor: 'Font color for the \"Subtitle_1\" base token',\n    subtitleDisabledFontColor:\n        'Disabled font color for the \"Subtitle_1\" base token',\n    subtitleFontFamily: 'Font family for the \"Subtitle_1\" base token',\n    subtitleFontSize: 'Font size for the \"Subitle_1\" base token',\n    subtitleFontWeight: 'Font weight for the \"Subtitle_1\" base token',\n    subtitleFontLineHeight: 'Font line height for the \"Subtitle_1\" base token',\n    subtitleFallbackFontFamily:\n        'Fallback font family for the \"Subtitle_1\" base token',\n    linkFont: 'Font shorthand for links',\n    linkFontColor: 'Font color for links',\n    linkDisabledFontColor: 'Disabled font color for links',\n    linkFontFamily: 'Font family for links',\n    linkFontSize: 'Font size for links',\n    linkFontWeight: 'Font weight for links',\n    linkFontLineHeight: 'Font line height for links',\n    linkFallbackFontFamily: 'Fallback font family for links',\n    linkActiveFont: 'Font shorthand for active links',\n    linkActiveFontColor: 'Font color for active links',\n    linkActiveDisabledFontColor: 'Disabled font color for active links',\n    linkActiveFontFamily: 'Font family for active links',\n    linkActiveFontSize: 'Font size for active links',\n    linkActiveFontWeight: 'Font weight for active links',\n    linkActiveFontLineHeight: 'Font line height for active links',\n    linkActiveFallbackFontFamily: 'Fallback font family for active links',\n    linkProminentFont: 'Font shorthand for prominent links',\n    linkProminentFontColor: 'Font color for prominent links',\n    linkProminentDisabledFontColor: 'Disabled font color for prominent links',\n    linkProminentFontFamily: 'Font family for prominent links',\n    linkProminentFontSize: 'Font size for prominent links',\n    linkProminentFontWeight: 'Font weight for prominent links',\n    linkProminentFontLineHeight: 'Font line height for prominent links',\n    linkProminentFallbackFontFamily: 'Fallback font family for prominent links',\n    linkActiveProminentFont: 'Font shorthand for active prominent links',\n    linkActiveProminentFontColor: 'Font color for active prominent links',\n    linkActiveProminentDisabledFontColor:\n        'Disabled font color for active prominent links',\n    linkActiveProminentFontFamily: 'Font family for active prominent links',\n    linkActiveProminentFontSize: 'Font size for active prominent links',\n    linkActiveProminentFontWeight: 'Font weight for active prominent links',\n    linkActiveProminentFontLineHeight:\n        'Font line height for active prominent links',\n    linkActiveProminentFallbackFontFamily:\n        'Fallback font family for active prominent links',\n    placeholderFont: 'Font shorthand for the \"Placeholder\" base token',\n    placeholderFontColor: 'Font color for the \"Placeholder\" base token',\n    placeholderDisabledFontColor:\n        'Disabled font color for the \"Placeholder\" base token',\n    placeholderFontFamily: 'Font family for the \"Placeholder\" base token',\n    placeholderFontSize: 'Font size for the \"Placeholder\" base token',\n    placeholderFontWeight: 'Font weight for the \"Placeholder\" base token',\n    placeholderFontLineHeight:\n        'Font line height for the \"Placeholder\" base token',\n    placeholderFallbackFontFamily:\n        'Fallback font family for the \"Placeholder\" base token',\n    bodyFont: 'Font shorthand for the \"Body\" base token',\n    bodyFontColor: 'Font color for the \"Body\" base token',\n    bodyDisabledFontColor: 'Disabled font color for the \"Body\" base token',\n    bodyFontFamily: 'Font family for the \"Body\" base token',\n    bodyFontSize: 'Font size for the \"Body\" base token',\n    bodyFontWeight: 'Font weight for the \"Body\" base token',\n    bodyFontLineHeight: 'Font line height for the \"Body\" base token',\n    bodyFallbackFontFamily: 'Fallback font family for the \"Body\" base token',\n    bodyEmphasizedFont: 'Font shorthand for the \"BodyEmphasized\" base token',\n    bodyEmphasizedFontColor: 'Font color for the \"BodyEmphasized\" base token',\n    bodyEmphasizedDisabledFontColor:\n        'Disabled font color for the \"BodyEmphasized\" base token',\n    bodyEmphasizedFontFamily: 'Font family for the \"BodyEmphasized\" base token',\n    bodyEmphasizedFontSize: 'Font size for the \"BodyEmphasized\" base token',\n    bodyEmphasizedFontWeight: 'Font weight for the \"BodyEmphasized\" base token',\n    bodyEmphasizedFontLineHeight:\n        'Font line height for the \"BodyEmphasized\" base token',\n    bodyEmphasizedFallbackFontFamily:\n        'Fallback font family for the \"BodyEmphasized\" base token',\n    bodyPlus1Font: 'Font shorthand for the \"Body_2\" base token',\n    bodyPlus1FontColor: 'Font color for the \"Body_2\" base token',\n    bodyPlus1DisabledFontColor:\n        'Disabled font color for the \"Body_2\" base token',\n    bodyPlus1FontFamily: 'Font family for the \"Body_2\" base token',\n    bodyPlus1FontSize: 'Font size for the \"Body_2\" base token',\n    bodyPlus1FontWeight: 'Font weight for the \"Body_2\" base token',\n    bodyPlus1FontLineHeight: 'Font line height for the \"Body_2\" base token',\n    bodyPlus1FallbackFontFamily:\n        'Fallback font family for the \"Body_2\" base token',\n    bodyPlus1EmphasizedFont:\n        'Font shorthand for the \"BodyEmphasized_2\" base token',\n    bodyPlus1EmphasizedFontColor:\n        'Font color for the \"BodyEmphasized_2\" base token',\n    bodyPlus1EmphasizedDisabledFontColor:\n        'Disabled font color for the \"BodyEmphasized_2\" base token',\n    bodyPlus1EmphasizedFontFamily:\n        'Font family for the \"BodyEmphasized_2\" base token',\n    bodyPlus1EmphasizedFontSize:\n        'Font size for the \"BodyEmphasized_2\" base token',\n    bodyPlus1EmphasizedFontWeight:\n        'Font weight for the \"BodyEmphasized_2\" base token',\n    bodyPlus1EmphasizedFontLineHeight:\n        'Font line height for the \"BodyEmphasized_2\" base token',\n    bodyPlus1EmphasizedFallbackFontFamily:\n        'Fallback font family for the \"BodyEmphasized_2\" base token',\n    groupHeaderFont: 'Font shorthand for the \"Group_Header_1\" base token',\n    groupHeaderFontColor: 'Font color for the \"Group_Header_1\" base token',\n    groupHeaderDisabledFontColor:\n        'Disabled font color for the\"Group_Header_1\" base token',\n    groupHeaderFontFamily: 'Font family for the \"Group_Header_1\" base token',\n    groupHeaderFontSize: 'Font size for the \"Group_Header_1\" base token',\n    groupHeaderFontWeight: 'Font weight for the \"Group_Header_1\" base token',\n    groupHeaderFontLineHeight:\n        'Font line height for the \"Group_Header_1\" base token',\n    groupHeaderFallbackFontFamily:\n        'Fallback font family for the \"Group_Header_1\" base token',\n    controlLabelFont: 'Font shorthand for the \"Control_Label_1\" base token',\n    controlLabelFontColor: 'Font color for the \"Control_Label_1\" base token',\n    controlLabelDisabledFontColor:\n        'Disabled font color for the \"Control_Label_1\" base token',\n    controlLabelFontFamily: 'Font family for the \"Control_Label_1\" base token',\n    controlLabelFontSize: 'Font size for the \"Control_Label_1\" base token',\n    controlLabelFontWeight: 'Font weight for the \"Control_Label_1\" base token',\n    controlLabelFontLineHeight:\n        'Font line height for the \"Control_Label_1\" base token',\n    controlLabelFallbackFontFamily:\n        'Fallback font family for the \"Control_Label_1\" base token',\n    buttonLabelFont: 'Font shorthand for the \"Button_Label_1\" base token',\n    buttonLabelFontColor: 'Font color for the \"Button_Label_1\" base token',\n    buttonLabelDisabledFontColor:\n        'Disabled font color for the \"Button_Label_1\" base token',\n    buttonLabelFontFamily: 'Font family for the \"Button_Label_1\" base token',\n    buttonLabelFontSize: 'Font size for the \"Button_Label_1\" base token',\n    buttonLabelFontWeight: 'Font weight for the \"Button_Label_1\" base token',\n    buttonLabelFontLineHeight:\n        'Font line height for the \"Button_Label_1\" base token',\n    buttonLabelFallbackFontFamily:\n        'Fallback font family for the \"Button_Label_1\" base token',\n    tooltipCaptionFont: 'Font shorthand for the \"Tooltip_Caption\" base token',\n    tooltipCaptionFontColor: 'Font color for the \"Tooltip_Caption\" base token',\n    tooltipCaptionDisabledFontColor:\n        'Disabled font color for the \"Tooltip_Caption\" base token',\n    tooltipCaptionFontFamily:\n        'Font family for the \"Tooltip_Caption\" base token',\n    tooltipCaptionFontSize: 'Font size for the \"Tooltip_Caption\" base token',\n    tooltipCaptionFontWeight:\n        'Font weight for the \"Tooltip_Caption\" base token',\n    tooltipCaptionFontLineHeight:\n        'Font line height for the \"Tooltip_Caption\" base token',\n    tooltipCaptionFallbackFontFamily:\n        'Fallback font family for the \"Tooltip_Caption\" base token',\n    tooltipBackgroundColor: 'Default background color for tooltips',\n    errorTextFont: 'Font shorthand for the \"Error_LightUi\" base token',\n    errorTextFontColor: 'Font color for the \"Error_LightUi\" base token',\n    errorTextDisabledFontColor:\n        'Disabled font color for the \"Error_LightUi\" base token',\n    errorTextFontFamily: 'Font family for the \"Error_LightUi\" base token',\n    errorTextFontSize: 'Font size for the \"Error_LightUi\" base token',\n    errorTextFontWeight: 'Font weight for the \"Error_LightUi\" base token',\n    errorTextFontLineHeight:\n        'Font line height for the \"Error_LightUi\" base token',\n    errorTextFallbackFontFamily:\n        'Fallback font family for the \"Error_LightUi\" base token',\n    tableRowBorderColor: 'Color for the border of rows in the table',\n    elevation1BoxShadow:\n        'The box shadow for elevation 1. Used for component hover states.',\n    elevation2BoxShadow:\n        'The box shadow for elevation 2. Used for components such as menus, banners, tooltips, error notifications, and scrolling.',\n    elevation3BoxShadow:\n        'The box shadow for elevation 3. Used for components such as dialogs, overlays, and pop-ups.',\n    graphGridlineColor: 'Gridline color for graphs',\n    mentionFont: 'Font shorthand for mention views',\n    mentionFontColor: 'Font color for mention views',\n    mentionDisabledFontColor: 'Disabled font color for mention views',\n    mentionFontFamily: 'Font family for mention views',\n    mentionFontSize: 'Font size for mention views',\n    mentionFontWeight: 'Font weight for mention views',\n    mentionFontLineHeight: 'Font line height for mention views',\n    mentionFallbackFontFamily: 'Fallback font family for mention views'\n};\n"]}
+{"version":3,"file":"design-token-comments.js","sourceRoot":"","sources":["../../../src/theme-provider/design-token-comments.ts"],"names":[],"mappings":"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","sourcesContent":["import type * as TokensNamespace from './design-tokens';\n\ntype TokenName = keyof typeof TokensNamespace;\n\nexport const comments: { readonly [key in TokenName]: string | null } = {\n    actionRgbPartialColor:\n        'DEPRECATED: *-partial tokens are used with rgba() to set color transparency in component stylesheets',\n    applicationBackgroundColor: 'Primary background color for the application',\n    dividerBackgroundColor: 'Divider background color',\n    headerBackgroundColor: 'Background color for application headers',\n    sectionBackgroundColor: 'Background color for sections',\n    buttonFillPrimaryColor:\n        'Control fill color for \"primary\" appearance-variant buttons',\n    buttonPrimaryFontColor:\n        'Font color for \"primary\" appearance-variant buttons',\n    buttonFillAccentColor:\n        'Control fill color for \"accent\" appearance-variant buttons',\n    buttonAccentBlockFontColor:\n        'Font color for \"accent\" appearance-variant block buttons',\n    buttonAccentOutlineFontColor:\n        'Font color for \"accent\" appearance-variant outline buttons',\n    buttonBorderAccentOutlineColor:\n        'Border color for \"accent\" appearance-variant outline buttons',\n    fillSelectedColor: 'Control fill color when a control is selected',\n    fillSelectedRgbPartialColor:\n        'DEPRECATED: *-partial tokens are used with rgba() to set color transparency in component stylesheets',\n    fillHoverSelectedColor:\n        'Control fill color when hovering a selected control',\n    fillHoverColor: 'Control fill color when hovering component',\n    fillHoverRgbPartialColor:\n        'DEPRECATED: *-partial tokens are used with rgba() to set color transparency in component stylesheets',\n    fillDownColor: 'Control fill color when mousedown event occurs',\n    borderColor: 'Standard control outline or border color',\n    borderRgbPartialColor:\n        'DEPRECATED: *-partial tokens are used with rgba() to set color transparency in component stylesheets',\n    failColor: 'Used to highlight errors or invalid input',\n    warningColor:\n        'Used to highlight invalid input or for icons to indicate that a process errored or failed',\n    passColor:\n        'Used to highlight a correct state or the successful completion of a process',\n    informationColor:\n        'Used to highlight information, which provides more details on the item',\n    borderHoverColor: 'Border color when hovering component',\n    iconColor: 'Equivalent to the font color for icons',\n    modalBackdropColor: 'Color of background overlay behind modal dialog boxes',\n    popupBorderColor: 'Border color for menus and dialog boxes',\n    cardBorderColor: 'Border color for cards',\n    controlHeight:\n        'Standard layout height for all controls. Add \"labelHeight\" for labels on top.',\n    controlSlimHeight:\n        'Height of controls that are somewhat shorter than standard height.',\n    smallPadding: 'Fixed 4px size ramp token for component layout',\n    mediumPadding: 'Fixed 8px size ramp token for component layout',\n    standardPadding: 'Fixed 16px size ramp token for component layout',\n    largePadding: 'Fixed 24px size ramp token for component layout',\n    labelHeight:\n        'Standard label height for components. Set the label font rather than explicitly setting the height for a label.',\n    borderWidth: 'Standard border width for most components',\n    iconSize: 'Standard layout height for all icons',\n    groupHeaderTextTransform: 'CSS text-transform string to use for headers',\n    drawerWidth: 'TODO: delete when able',\n    dialogSmallWidth:\n        'Standard width for small dialogs like a confirmation dialog.',\n    dialogSmallHeight:\n        'Standard height for small dialogs like a confirmation dialog.',\n    dialogSmallMaxHeight:\n        'Standard maximum height for small dialogs like a confirmation dialog.',\n    dialogLargeWidth: 'Standard width for large dialogs.',\n    dialogLargeHeight: 'Standard height for large dialogs.',\n    dialogLargeMaxHeight: 'Standard maximum height for large dialogs.',\n    menuMinWidth: 'Standard menu min width for menu popup.',\n    bannerGapSize: 'Space between stacked banners',\n    spinnerSmallHeight: 'Small height (16px) for a spinner component',\n    spinnerMediumHeight: 'Medium height (32px) for a spinner component',\n    spinnerLargeHeight: 'Large height (64px) for a spinner component',\n    smallDelay:\n        'Elements with small transition areas, such as icons and selection controls, have short durations.',\n    mediumDelay:\n        'Elements with larger transition areas, such as bottom sheets and expanding chips, have slightly longer durations.',\n    largeDelay:\n        'Animated elements that traverse a large portion of the screen have the longest durations.',\n    headlinePlus1Font: 'Font shorthand for the \"Headline_2\" base token',\n    headlinePlus1FontColor: 'Font color for the \"Headline_2\" base token',\n    headlinePlus1DisabledFontColor:\n        'Disabled font color for the \"Headline_2\" base token',\n    headlinePlus1FontFamily: 'Font family for the \"Headline_2\" base token',\n    headlinePlus1FontSize: 'Font size for the \"Headline_2\" base token',\n    headlinePlus1FontWeight: 'Font weight for the \"Headline_2\" base token',\n    headlinePlus1FontLineHeight:\n        'Font line height for the \"Headline_2\" base token',\n    headlinePlus1FallbackFontFamily: null,\n    headlineFont: 'Font shorthand for the \"Headline_1\" base token',\n    headlineFontColor: 'Font color for the \"Headline_1\" base token',\n    headlineDisabledFontColor:\n        'Disabled font color for the \"Headline_1\" base token',\n    headlineFontFamily: 'Font family for the \"Headline_1\" base token',\n    headlineFontSize: 'Font size for the \"Headline_1\" base token',\n    headlineFontWeight: 'Font weight for the \"Headline_1\" base token',\n    headlineFontLineHeight: 'Font line height for the \"Headline_1\" base token',\n    headlineFallbackFontFamily:\n        'Fallback font family for the \"Headline_1\" base token',\n    tableHeaderFont: 'Font shorthand for the \"Grid_Header\" base token',\n    tableHeaderFontColor: 'Font color for the \"Grid_Header\" base token',\n    tableHeaderDisabledFontColor:\n        'Disabled font color for the \"Grid_Header\" base token',\n    tableHeaderFontFamily: 'Font family for the \"Grid_Header\" base token',\n    tableHeaderFontSize: 'Font size for the \"Grid_Header\" base token',\n    tableHeaderFontWeight: 'Font weight for the \"Grid_Header\" base token',\n    tableHeaderFontLineHeight:\n        'Font line height for the \"Grid_Header\" base token',\n    tableHeaderFallbackFontFamily:\n        'Fallback font family for the \"Grid_Header\" base token',\n    titlePlus2Font: 'Font shorthand for the \"Title_3\" base token',\n    titlePlus2FontColor: 'Font color for the \"Title_3\" base token',\n    titlePlus2DisabledFontColor:\n        'Disabled font color for the \"Title_3\" base token',\n    titlePlus2FontFamily: 'Font family for the \"Title_3\" base token',\n    titlePlus2FontSize: 'Font size for the \"Title_3\" base token',\n    titlePlus2FontWeight: 'Font weight for the \"Title_3\" base token',\n    titlePlus2FontLineHeight: 'Font line height for the \"Title_3\" base token',\n    titlePlus2FallbackFontFamily:\n        'Fallback font family for the \"Title_3\" base token',\n    titlePlus1Font: 'Font shorthand for the \"Title_2\" base token',\n    titlePlus1FontColor: 'Font color for the \"Title_2\" base token',\n    titlePlus1DisabledFontColor:\n        'Disabled font color for the \"Title_2\" base token',\n    titlePlus1FontFamily: 'Font family for the \"Title_2\" base token',\n    titlePlus1FontSize: 'Font size for the \"Title_2\" base token',\n    titlePlus1FontWeight: 'Font weight for the \"Title_2\" base token',\n    titlePlus1FontLineHeight: 'Font line height for the \"Title_2\" base token',\n    titlePlus1FallbackFontFamily:\n        'Fallback font family for the \"Title_2\" base token',\n    titleFont: 'Font shorthand for the \"Title_1\" base token',\n    titleFontColor: 'Font color for the \"Title_1\" base token',\n    titleDisabledFontColor: 'Disabled font color for the \"Title_1\" base token',\n    titleFontFamily: 'Font family for the \"Title_1\" base token',\n    titleFontSize: 'Font size for the \"Title_1\" base token',\n    titleFontWeight: 'Font weight for the \"Title_1\" base token',\n    titleFontLineHeight: 'Font line height for the \"Title_1\" base token',\n    titleFallbackFontFamily:\n        'Fallback font family for the \"Title_1\" base token',\n    subtitlePlus1Font: 'Font shorthand for the \"Subtitle_2\" base token',\n    subtitlePlus1FontColor: 'Font color for the \"Subtitle_2\" base token',\n    subtitlePlus1DisabledFontColor:\n        'Disabled font color for the \"Subtitle_2\" base token',\n    subtitlePlus1FontFamily: 'Font family for the \"Subtitle_2\" base token',\n    subtitlePlus1FontSize: 'Font size for the \"Subitle_2\" base token',\n    subtitlePlus1FontWeight: 'Font weight for the \"Subtitle_2\" base token',\n    subtitlePlus1FontLineHeight:\n        'Font line height for the \"Subtitle_2\" base token',\n    subtitlePlus1FallbackFontFamily:\n        'Fallback font family for the \"Subtitle_2\" base token',\n    subtitleFont: 'Font shorthand for the \"Subtitle_1\" base token',\n    subtitleFontColor: 'Font color for the \"Subtitle_1\" base token',\n    subtitleDisabledFontColor:\n        'Disabled font color for the \"Subtitle_1\" base token',\n    subtitleFontFamily: 'Font family for the \"Subtitle_1\" base token',\n    subtitleFontSize: 'Font size for the \"Subitle_1\" base token',\n    subtitleFontWeight: 'Font weight for the \"Subtitle_1\" base token',\n    subtitleFontLineHeight: 'Font line height for the \"Subtitle_1\" base token',\n    subtitleFallbackFontFamily:\n        'Fallback font family for the \"Subtitle_1\" base token',\n    linkFont: 'Font shorthand for links',\n    linkFontColor: 'Font color for links',\n    linkDisabledFontColor: 'Disabled font color for links',\n    linkFontFamily: 'Font family for links',\n    linkFontSize: 'Font size for links',\n    linkFontWeight: 'Font weight for links',\n    linkFontLineHeight: 'Font line height for links',\n    linkFallbackFontFamily: 'Fallback font family for links',\n    linkActiveFont: 'Font shorthand for active links',\n    linkActiveFontColor: 'Font color for active links',\n    linkActiveDisabledFontColor: 'Disabled font color for active links',\n    linkActiveFontFamily: 'Font family for active links',\n    linkActiveFontSize: 'Font size for active links',\n    linkActiveFontWeight: 'Font weight for active links',\n    linkActiveFontLineHeight: 'Font line height for active links',\n    linkActiveFallbackFontFamily: 'Fallback font family for active links',\n    linkProminentFont: 'Font shorthand for prominent links',\n    linkProminentFontColor: 'Font color for prominent links',\n    linkProminentDisabledFontColor: 'Disabled font color for prominent links',\n    linkProminentFontFamily: 'Font family for prominent links',\n    linkProminentFontSize: 'Font size for prominent links',\n    linkProminentFontWeight: 'Font weight for prominent links',\n    linkProminentFontLineHeight: 'Font line height for prominent links',\n    linkProminentFallbackFontFamily: 'Fallback font family for prominent links',\n    linkActiveProminentFont: 'Font shorthand for active prominent links',\n    linkActiveProminentFontColor: 'Font color for active prominent links',\n    linkActiveProminentDisabledFontColor:\n        'Disabled font color for active prominent links',\n    linkActiveProminentFontFamily: 'Font family for active prominent links',\n    linkActiveProminentFontSize: 'Font size for active prominent links',\n    linkActiveProminentFontWeight: 'Font weight for active prominent links',\n    linkActiveProminentFontLineHeight:\n        'Font line height for active prominent links',\n    linkActiveProminentFallbackFontFamily:\n        'Fallback font family for active prominent links',\n    placeholderFont: 'Font shorthand for the \"Placeholder\" base token',\n    placeholderFontColor: 'Font color for the \"Placeholder\" base token',\n    placeholderDisabledFontColor:\n        'Disabled font color for the \"Placeholder\" base token',\n    placeholderFontFamily: 'Font family for the \"Placeholder\" base token',\n    placeholderFontSize: 'Font size for the \"Placeholder\" base token',\n    placeholderFontWeight: 'Font weight for the \"Placeholder\" base token',\n    placeholderFontLineHeight:\n        'Font line height for the \"Placeholder\" base token',\n    placeholderFallbackFontFamily:\n        'Fallback font family for the \"Placeholder\" base token',\n    bodyFont: 'Font shorthand for the \"Body\" base token',\n    bodyFontColor: 'Font color for the \"Body\" base token',\n    bodyDisabledFontColor: 'Disabled font color for the \"Body\" base token',\n    bodyFontFamily: 'Font family for the \"Body\" base token',\n    bodyFontSize: 'Font size for the \"Body\" base token',\n    bodyFontWeight: 'Font weight for the \"Body\" base token',\n    bodyFontLineHeight: 'Font line height for the \"Body\" base token',\n    bodyFallbackFontFamily: 'Fallback font family for the \"Body\" base token',\n    bodyEmphasizedFont: 'Font shorthand for the \"BodyEmphasized\" base token',\n    bodyEmphasizedFontColor: 'Font color for the \"BodyEmphasized\" base token',\n    bodyEmphasizedDisabledFontColor:\n        'Disabled font color for the \"BodyEmphasized\" base token',\n    bodyEmphasizedFontFamily: 'Font family for the \"BodyEmphasized\" base token',\n    bodyEmphasizedFontSize: 'Font size for the \"BodyEmphasized\" base token',\n    bodyEmphasizedFontWeight: 'Font weight for the \"BodyEmphasized\" base token',\n    bodyEmphasizedFontLineHeight:\n        'Font line height for the \"BodyEmphasized\" base token',\n    bodyEmphasizedFallbackFontFamily:\n        'Fallback font family for the \"BodyEmphasized\" base token',\n    bodyPlus1Font: 'Font shorthand for the \"Body_2\" base token',\n    bodyPlus1FontColor: 'Font color for the \"Body_2\" base token',\n    bodyPlus1DisabledFontColor:\n        'Disabled font color for the \"Body_2\" base token',\n    bodyPlus1FontFamily: 'Font family for the \"Body_2\" base token',\n    bodyPlus1FontSize: 'Font size for the \"Body_2\" base token',\n    bodyPlus1FontWeight: 'Font weight for the \"Body_2\" base token',\n    bodyPlus1FontLineHeight: 'Font line height for the \"Body_2\" base token',\n    bodyPlus1FallbackFontFamily:\n        'Fallback font family for the \"Body_2\" base token',\n    bodyPlus1EmphasizedFont:\n        'Font shorthand for the \"BodyEmphasized_2\" base token',\n    bodyPlus1EmphasizedFontColor:\n        'Font color for the \"BodyEmphasized_2\" base token',\n    bodyPlus1EmphasizedDisabledFontColor:\n        'Disabled font color for the \"BodyEmphasized_2\" base token',\n    bodyPlus1EmphasizedFontFamily:\n        'Font family for the \"BodyEmphasized_2\" base token',\n    bodyPlus1EmphasizedFontSize:\n        'Font size for the \"BodyEmphasized_2\" base token',\n    bodyPlus1EmphasizedFontWeight:\n        'Font weight for the \"BodyEmphasized_2\" base token',\n    bodyPlus1EmphasizedFontLineHeight:\n        'Font line height for the \"BodyEmphasized_2\" base token',\n    bodyPlus1EmphasizedFallbackFontFamily:\n        'Fallback font family for the \"BodyEmphasized_2\" base token',\n    groupHeaderFont: 'Font shorthand for the \"Group_Header_1\" base token',\n    groupHeaderFontColor: 'Font color for the \"Group_Header_1\" base token',\n    groupHeaderDisabledFontColor:\n        'Disabled font color for the\"Group_Header_1\" base token',\n    groupHeaderFontFamily: 'Font family for the \"Group_Header_1\" base token',\n    groupHeaderFontSize: 'Font size for the \"Group_Header_1\" base token',\n    groupHeaderFontWeight: 'Font weight for the \"Group_Header_1\" base token',\n    groupHeaderFontLineHeight:\n        'Font line height for the \"Group_Header_1\" base token',\n    groupHeaderFallbackFontFamily:\n        'Fallback font family for the \"Group_Header_1\" base token',\n    controlLabelFont: 'Font shorthand for the \"Control_Label_1\" base token',\n    controlLabelFontColor: 'Font color for the \"Control_Label_1\" base token',\n    controlLabelDisabledFontColor:\n        'Disabled font color for the \"Control_Label_1\" base token',\n    controlLabelFontFamily: 'Font family for the \"Control_Label_1\" base token',\n    controlLabelFontSize: 'Font size for the \"Control_Label_1\" base token',\n    controlLabelFontWeight: 'Font weight for the \"Control_Label_1\" base token',\n    controlLabelFontLineHeight:\n        'Font line height for the \"Control_Label_1\" base token',\n    controlLabelFallbackFontFamily:\n        'Fallback font family for the \"Control_Label_1\" base token',\n    buttonLabelFont: 'Font shorthand for the \"Button_Label_1\" base token',\n    buttonLabelFontColor: 'Font color for the \"Button_Label_1\" base token',\n    buttonLabelDisabledFontColor:\n        'Disabled font color for the \"Button_Label_1\" base token',\n    buttonLabelFontFamily: 'Font family for the \"Button_Label_1\" base token',\n    buttonLabelFontSize: 'Font size for the \"Button_Label_1\" base token',\n    buttonLabelFontWeight: 'Font weight for the \"Button_Label_1\" base token',\n    buttonLabelFontLineHeight:\n        'Font line height for the \"Button_Label_1\" base token',\n    buttonLabelFallbackFontFamily:\n        'Fallback font family for the \"Button_Label_1\" base token',\n    tooltipCaptionFont: 'Font shorthand for the \"Tooltip_Caption\" base token',\n    tooltipCaptionFontColor: 'Font color for the \"Tooltip_Caption\" base token',\n    tooltipCaptionDisabledFontColor:\n        'Disabled font color for the \"Tooltip_Caption\" base token',\n    tooltipCaptionFontFamily:\n        'Font family for the \"Tooltip_Caption\" base token',\n    tooltipCaptionFontSize: 'Font size for the \"Tooltip_Caption\" base token',\n    tooltipCaptionFontWeight:\n        'Font weight for the \"Tooltip_Caption\" base token',\n    tooltipCaptionFontLineHeight:\n        'Font line height for the \"Tooltip_Caption\" base token',\n    tooltipCaptionFallbackFontFamily:\n        'Fallback font family for the \"Tooltip_Caption\" base token',\n    tooltipBackgroundColor: 'Default background color for tooltips',\n    errorTextFont: 'Font shorthand for the \"Error_LightUi\" base token',\n    errorTextFontColor: 'Font color for the \"Error_LightUi\" base token',\n    errorTextDisabledFontColor:\n        'Disabled font color for the \"Error_LightUi\" base token',\n    errorTextFontFamily: 'Font family for the \"Error_LightUi\" base token',\n    errorTextFontSize: 'Font size for the \"Error_LightUi\" base token',\n    errorTextFontWeight: 'Font weight for the \"Error_LightUi\" base token',\n    errorTextFontLineHeight:\n        'Font line height for the \"Error_LightUi\" base token',\n    errorTextFallbackFontFamily:\n        'Fallback font family for the \"Error_LightUi\" base token',\n    tableRowBorderColor: 'Color for the border of rows in the table',\n    elevation1BoxShadow:\n        'The box shadow for elevation 1. Used for component hover states.',\n    elevation2BoxShadow:\n        'The box shadow for elevation 2. Used for components such as menus, banners, tooltips, error notifications, and scrolling.',\n    elevation3BoxShadow:\n        'The box shadow for elevation 3. Used for components such as dialogs, overlays, and pop-ups.',\n    graphGridlineColor: 'Gridline color for graphs',\n    mentionFont: 'Font shorthand for mention views',\n    mentionFontColor: 'Font color for mention views',\n    mentionDisabledFontColor: 'Disabled font color for mention views',\n    mentionFontFamily: 'Font family for mention views',\n    mentionFontSize: 'Font size for mention views',\n    mentionFontWeight: 'Font weight for mention views',\n    mentionFontLineHeight: 'Font line height for mention views',\n    mentionFallbackFontFamily: 'Fallback font family for mention views'\n};\n"]}

package/dist/esm/theme-provider/design-token-names.js

@@ -10,12 +10,10 @@ export const tokenNames = {
     sectionBackgroundColor: 'section-background-color',
     buttonFillPrimaryColor: 'button-fill-primary-color',
     buttonPrimaryFontColor: 'button-primary-font-color',
-    buttonFillActivePrimaryColor: 'button-fill-active-primary-color',
     buttonFillAccentColor: 'button-fill-accent-color',
     buttonAccentBlockFontColor: 'button-accent-block-font-color',
     buttonAccentOutlineFontColor: 'button-accent-outline-font-color',
     buttonBorderAccentOutlineColor: 'button-border-accent-outline-color',
-    buttonFillAccentActiveColor: 'button-fill-accent-active-color',
     fillSelectedColor: 'fill-selected-color',
     fillSelectedRgbPartialColor: 'fill-selected-rgb-partial-color',
     fillHoverSelectedColor: 'fill-hover-selected-color',