@fluentui/web-components 3.0.0-beta.5 → 3.0.0-beta.6

package/dist/storybook/{677.939f187f.iframe.bundle.js.LICENSE.txt → 350.e4be85c2.iframe.bundle.js.LICENSE.txt}

@@ -17,6 +17,11 @@ object-assign
  * Released under the MIT License.
  */
 
+/*!
+* tabbable 5.2.0
+* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
+*/
+
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 

package/dist/storybook/{677.939f187f.iframe.bundle.js.map → 350.e4be85c2.iframe.bundle.js.map}

@@ -1 +1 @@
-{"version":3,"file":"677.939f187f.iframe.bundle.js","mappings":";;;;;;AAaA;;;;;AAKA;AACA;AACA;AACA;AACA;AACA;;;;;;AAMA;AACA;;;AAGA;;;AAGA;;;;;;;AAOA;;AAEA;;;;AAKA;;;ACzCA;;;AAIA;;;;ACFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;;AAGA;;;;ACrCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;;AAGA;;;AC1CA;AACA;AACA;AACA;AACA;AACA;;;;AAIA;;;AAGA;;;;;AAKA;;AAIA;;;AAIA;;AC1BA;AACA;;;;AAKA;;ACFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;;AAIA;;;;;AAKA;;;;AAIA;;;;;;AAMA;;;;AAIA;AACA;;;;;;;AAOA;;;;;;AAMA;;;AAGA;;AAEA;;;AAOA;;AC/DA;;AAEA;AACA;;AAEA;;AAGA;ACCA;AACA;AAUA;AACA;;;AClBA;AACA;AACA;;AAEA;;;;;;;;;;;;;;;;;AAiBA;;;;;;AAOA;;AAEA;;;;AAKA;;;ACpCA;AACA;AACA;;AAEA;;;;;AAKA;;;AAGA;;;AAGA;AACA;;;;;AAMA;;;ACtBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIA;;;;AAMA;;;;AAQA;;;ACxBA;AACA;AACA;AACA;;;;AAIA;;;;;AAKA;;;AAQA;;;;AAQA;;;AC7BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;;;;;AAKA;;;;;;;AAOA;;;AAGA;;AAEA;;;;AAKA;;;ACjCA;AACA;AACA;AACA;AACA;AACA;;;;AAIA;;AAIA;;;AAGA;;;AAIA;;;;ACnBA;ACHA;;AAEA;;AAEA;;AAEA;;AAGA;;;;ACLA;;;AAKA;;;;AAOA;;;;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAGA","sources":["webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/accordion-item/accordion-item.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/accordion/accordion.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/anchor/anchor.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/button/button.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/checkbox/checkbox.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/divider/divider.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/menu-item/menu-item.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/menu/menu.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/patterns/start-end.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/progress-ring/progress-ring.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/progress/progress.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/radio-group/radio-group.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/radio/radio.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/slider/slider.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/switch/switch.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/tab-panel/tab-panel.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/tabs/tabs.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/text-field/text-field.template.js"],"sourcesContent":["import { html, ref } from \"@microsoft/fast-element\";\nimport { staticallyCompose } from \"../utilities/template-helpers.js\";\nimport { endSlotTemplate, startSlotTemplate } from \"../patterns/index.js\";\n/**\n * The template for the {@link @microsoft/fast-foundation#(FASTAccordionItem:class)} component.\n * @public\n */\nexport function accordionItemTemplate(options = {}) {\n    return html `\n        <div\n            class=\"heading\"\n            part=\"heading\"\n            role=\"heading\"\n            aria-level=\"${x => x.headinglevel}\"\n        >\n            <button\n                class=\"button\"\n                part=\"button\"\n                ${ref(\"expandbutton\")}\n                ?disabled=\"${x => (x.disabled ? \"true\" : void 0)}\"\n                aria-expanded=\"${x => x.expanded}\"\n                aria-controls=\"${x => x.id}-panel\"\n                id=\"${x => x.id}\"\n                @click=\"${(x, c) => x.clickHandler(c.event)}\"\n            >\n                <span class=\"heading-content\" part=\"heading-content\">\n                    <slot name=\"heading\"></slot>\n                </span>\n            </button>\n            ${startSlotTemplate(options)}\n            ${endSlotTemplate(options)}\n            <span class=\"icon\" part=\"icon\" aria-hidden=\"true\">\n                <slot name=\"expanded-icon\">\n                    ${staticallyCompose(options.expandedIcon)}\n                </slot>\n                <slot name=\"collapsed-icon\">\n                    ${staticallyCompose(options.collapsedIcon)}\n                </slot>\n            <span>\n        </div>\n        <div\n            class=\"region\"\n            part=\"region\"\n            id=\"${x => x.id}-panel\"\n            role=\"region\"\n            aria-labelledby=\"${x => x.id}\"\n        >\n            <slot></slot>\n        </div>\n`;\n}\n","import { elements, html, slotted } from \"@microsoft/fast-element\";\n/**\n * Creates a template for the {@link @microsoft/fast-foundation#FASTAccordion} component.\n * @public\n */\nexport function accordionTemplate() {\n    return html `\n        <template>\n            <slot\n                ${slotted({ property: \"slottedAccordionItems\", filter: elements() })}\n            ></slot>\n        </template>\n    `;\n}\n","import { html, ref, slotted } from \"@microsoft/fast-element\";\nimport { endSlotTemplate, startSlotTemplate } from \"../patterns/index.js\";\n/**\n * The template for the {@link @microsoft/fast-foundation#(FASTAnchor:class)} component.\n * @public\n */\nexport function anchorTemplate(options = {}) {\n    return html `\n        <a\n            class=\"control\"\n            part=\"control\"\n            download=\"${x => x.download}\"\n            href=\"${x => x.href}\"\n            hreflang=\"${x => x.hreflang}\"\n            ping=\"${x => x.ping}\"\n            referrerpolicy=\"${x => x.referrerpolicy}\"\n            rel=\"${x => x.rel}\"\n            target=\"${x => x.target}\"\n            type=\"${x => x.type}\"\n            aria-atomic=\"${x => x.ariaAtomic}\"\n            aria-busy=\"${x => x.ariaBusy}\"\n            aria-controls=\"${x => x.ariaControls}\"\n            aria-current=\"${x => x.ariaCurrent}\"\n            aria-describedby=\"${x => x.ariaDescribedby}\"\n            aria-details=\"${x => x.ariaDetails}\"\n            aria-disabled=\"${x => x.ariaDisabled}\"\n            aria-errormessage=\"${x => x.ariaErrormessage}\"\n            aria-expanded=\"${x => x.ariaExpanded}\"\n            aria-flowto=\"${x => x.ariaFlowto}\"\n            aria-haspopup=\"${x => x.ariaHaspopup}\"\n            aria-hidden=\"${x => x.ariaHidden}\"\n            aria-invalid=\"${x => x.ariaInvalid}\"\n            aria-keyshortcuts=\"${x => x.ariaKeyshortcuts}\"\n            aria-label=\"${x => x.ariaLabel}\"\n            aria-labelledby=\"${x => x.ariaLabelledby}\"\n            aria-live=\"${x => x.ariaLive}\"\n            aria-owns=\"${x => x.ariaOwns}\"\n            aria-relevant=\"${x => x.ariaRelevant}\"\n            aria-roledescription=\"${x => x.ariaRoledescription}\"\n            ${ref(\"control\")}\n        >\n            ${startSlotTemplate(options)}\n            <span class=\"content\" part=\"content\">\n                <slot ${slotted(\"defaultSlottedContent\")}></slot>\n            </span>\n            ${endSlotTemplate(options)}\n        </a>\n    `;\n}\n","import { html, ref, slotted } from \"@microsoft/fast-element\";\nimport { endSlotTemplate, startSlotTemplate } from \"../patterns/index.js\";\n/**\n * The template for the {@link @microsoft/fast-foundation#(FASTButton:class)} component.\n * @public\n */\nexport function buttonTemplate(options = {}) {\n    return html `\n        <button\n            class=\"control\"\n            part=\"control\"\n            ?autofocus=\"${x => x.autofocus}\"\n            ?disabled=\"${x => x.disabled}\"\n            form=\"${x => x.formId}\"\n            formaction=\"${x => x.formaction}\"\n            formenctype=\"${x => x.formenctype}\"\n            formmethod=\"${x => x.formmethod}\"\n            ?formnovalidate=\"${x => x.formnovalidate}\"\n            formtarget=\"${x => x.formtarget}\"\n            name=\"${x => x.name}\"\n            type=\"${x => x.type}\"\n            value=\"${x => x.value}\"\n            aria-atomic=\"${x => x.ariaAtomic}\"\n            aria-busy=\"${x => x.ariaBusy}\"\n            aria-controls=\"${x => x.ariaControls}\"\n            aria-current=\"${x => x.ariaCurrent}\"\n            aria-describedby=\"${x => x.ariaDescribedby}\"\n            aria-details=\"${x => x.ariaDetails}\"\n            aria-disabled=\"${x => x.ariaDisabled}\"\n            aria-errormessage=\"${x => x.ariaErrormessage}\"\n            aria-expanded=\"${x => x.ariaExpanded}\"\n            aria-flowto=\"${x => x.ariaFlowto}\"\n            aria-haspopup=\"${x => x.ariaHaspopup}\"\n            aria-hidden=\"${x => x.ariaHidden}\"\n            aria-invalid=\"${x => x.ariaInvalid}\"\n            aria-keyshortcuts=\"${x => x.ariaKeyshortcuts}\"\n            aria-label=\"${x => x.ariaLabel}\"\n            aria-labelledby=\"${x => x.ariaLabelledby}\"\n            aria-live=\"${x => x.ariaLive}\"\n            aria-owns=\"${x => x.ariaOwns}\"\n            aria-pressed=\"${x => x.ariaPressed}\"\n            aria-relevant=\"${x => x.ariaRelevant}\"\n            aria-roledescription=\"${x => x.ariaRoledescription}\"\n            ${ref(\"control\")}\n        >\n            ${startSlotTemplate(options)}\n            <span class=\"content\" part=\"content\">\n                <slot ${slotted(\"defaultSlottedContent\")}></slot>\n            </span>\n            ${endSlotTemplate(options)}\n        </button>\n    `;\n}\n","import { html, slotted } from \"@microsoft/fast-element\";\nimport { staticallyCompose } from \"../utilities/template-helpers.js\";\n/**\n * The template for the {@link @microsoft/fast-foundation#(FASTCheckbox:class)} component.\n * @public\n */\nexport function checkboxTemplate(options = {}) {\n    return html `\n        <template\n            role=\"checkbox\"\n            aria-checked=\"${x => (x.indeterminate ? \"mixed\" : x.checked)}\"\n            aria-required=\"${x => x.required}\"\n            aria-disabled=\"${x => x.disabled}\"\n            tabindex=\"${x => (x.disabled ? null : 0)}\"\n            @keypress=\"${(x, c) => x.keypressHandler(c.event)}\"\n            @click=\"${(x, c) => x.clickHandler(c.event)}\"\n        >\n            <div part=\"control\" class=\"control\">\n                <slot name=\"checked-indicator\">\n                    ${staticallyCompose(options.checkedIndicator)}\n                </slot>\n                <slot name=\"indeterminate-indicator\">\n                    ${staticallyCompose(options.indeterminateIndicator)}\n                </slot>\n            </div>\n            <label\n                part=\"label\"\n                class=\"${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length\n        ? \"label\"\n        : \"label label__hidden\"}\"\n            >\n                <slot ${slotted(\"defaultSlottedNodes\")}></slot>\n            </label>\n        </template>\n    `;\n}\n","import { html } from \"@microsoft/fast-element\";\nimport { DividerRole } from \"./divider.options.js\";\n/**\n * The template for the {@link @microsoft/fast-foundation#FASTDivider} component.\n * @public\n */\nexport function dividerTemplate() {\n    return html `\n        <template\n            role=\"${x => x.role}\"\n            aria-orientation=\"${x => x.role !== DividerRole.presentation ? x.orientation : void 0}\"\n        >\n            <slot></slot>\n        </template>\n    `;\n}\n","import { elements, html, ref, slotted, when, } from \"@microsoft/fast-element\";\nimport { staticallyCompose } from \"../utilities/template-helpers.js\";\nimport { endSlotTemplate, startSlotTemplate } from \"../patterns/index.js\";\nimport { MenuItemRole } from \"./menu-item.options.js\";\n/**\n * Generates a template for the {@link @microsoft/fast-foundation#(FASTMenuItem:class)} component using\n * the provided prefix.\n *\n * @public\n */\nexport function menuItemTemplate(options = {}) {\n    return html `\n    <template\n        aria-haspopup=\"${x => (x.hasSubmenu ? \"menu\" : void 0)}\"\n        aria-checked=\"${x => (x.role !== MenuItemRole.menuitem ? x.checked : void 0)}\"\n        aria-disabled=\"${x => x.disabled}\"\n        aria-expanded=\"${x => x.expanded}\"\n        @keydown=\"${(x, c) => x.handleMenuItemKeyDown(c.event)}\"\n        @click=\"${(x, c) => x.handleMenuItemClick(c.event)}\"\n        @mouseover=\"${(x, c) => x.handleMouseOver(c.event)}\"\n        @mouseout=\"${(x, c) => x.handleMouseOut(c.event)}\"\n    >\n            ${when(x => x.role === MenuItemRole.menuitemcheckbox, html `\n                    <div part=\"input-container\" class=\"input-container\">\n                        <span part=\"checkbox\" class=\"checkbox\">\n                            <slot name=\"checkbox-indicator\">\n                                ${staticallyCompose(options.checkboxIndicator)}\n                            </slot>\n                        </span>\n                    </div>\n                `)}\n            ${when(x => x.role === MenuItemRole.menuitemradio, html `\n                    <div part=\"input-container\" class=\"input-container\">\n                        <span part=\"radio\" class=\"radio\">\n                            <slot name=\"radio-indicator\">\n                                ${staticallyCompose(options.radioIndicator)}\n                            </slot>\n                        </span>\n                    </div>\n                `)}\n        </div>\n        ${startSlotTemplate(options)}\n        <span class=\"content\" part=\"content\">\n            <slot></slot>\n        </span>\n        ${endSlotTemplate(options)}\n        ${when(x => x.hasSubmenu, html `\n                <div\n                    part=\"expand-collapse-glyph-container\"\n                    class=\"expand-collapse-glyph-container\"\n                >\n                    <span part=\"expand-collapse\" class=\"expand-collapse\">\n                        <slot name=\"expand-collapse-indicator\">\n                            ${staticallyCompose(options.expandCollapseGlyph)}\n                        </slot>\n                    </span>\n                </div>\n            `)}\n        <span\n            ?hidden=\"${x => !x.expanded}\"\n            class=\"submenu-container\"\n            part=\"submenu-container\"\n            ${ref(\"submenuContainer\")}\n        >\n            <slot name=\"submenu\" ${slotted({\n        property: \"slottedSubmenu\",\n        filter: elements(\"[role='menu']\"),\n    })}></slot>\n        </span>\n    </template>\n    `;\n}\n","import { html, slotted } from \"@microsoft/fast-element\";\n/**\n * The template for the {@link @microsoft/fast-foundation#FASTMenu} component.\n * @public\n */\nexport function menuTemplate() {\n    return html `\n        <template\n            slot=\"${x => (x.slot ? x.slot : x.isNestedMenu() ? \"submenu\" : void 0)}\"\n            role=\"menu\"\n            @keydown=\"${(x, c) => x.handleMenuKeyDown(c.event)}\"\n            @focusout=\"${(x, c) => x.handleFocusOut(c.event)}\"\n        >\n            <slot ${slotted(\"items\")}></slot>\n        </template>\n    `;\n}\n","import { html, ref } from \"@microsoft/fast-element\";\nimport { staticallyCompose, } from \"../utilities/template-helpers.js\";\n/**\n * A mixin class implementing start and end slots.\n * These are generally used to decorate text elements with icons or other visual indicators.\n * @public\n */\nexport class StartEnd {\n}\n/**\n * The template for the end slot.\n * For use with {@link StartEnd}\n *\n * @public\n */\nexport function endSlotTemplate(options) {\n    return html `\n        <slot name=\"end\" ${ref(\"end\")}>${staticallyCompose(options.end)}</slot>\n    `.inline();\n}\n/**\n * The template for the start slots.\n * For use with {@link StartEnd}\n *\n * @public\n */\nexport function startSlotTemplate(options) {\n    return html `\n        <slot name=\"start\" ${ref(\"start\")}>${staticallyCompose(options.start)}</slot>\n    `.inline();\n}\n","import { html, when } from \"@microsoft/fast-element\";\nimport { staticallyCompose } from \"../utilities/template-helpers.js\";\nconst progressSegments = 44;\n/**\n * The template for the {@link @microsoft/fast-foundation#FASTProgressRing} component.\n * @public\n */\nexport function progressRingTemplate(options = {}) {\n    return html `\n        <template\n            role=\"progressbar\"\n            aria-valuenow=\"${x => x.value}\"\n            aria-valuemin=\"${x => x.min}\"\n            aria-valuemax=\"${x => x.max}\"\n        >\n            ${when(x => typeof x.value === \"number\", html `\n                    <svg\n                        class=\"progress\"\n                        part=\"progress\"\n                        viewBox=\"0 0 16 16\"\n                        slot=\"determinate\"\n                    >\n                        <circle\n                            class=\"background\"\n                            part=\"background\"\n                            cx=\"8px\"\n                            cy=\"8px\"\n                            r=\"7px\"\n                        ></circle>\n                        <circle\n                            class=\"determinate\"\n                            part=\"determinate\"\n                            style=\"stroke-dasharray: ${x => (progressSegments * x.percentComplete) /\n        100}px ${progressSegments}px\"\n                            cx=\"8px\"\n                            cy=\"8px\"\n                            r=\"7px\"\n                        ></circle>\n                    </svg>\n                `, html `\n                    <slot name=\"indeterminate\">\n                        ${staticallyCompose(options.indeterminateIndicator)}\n                    </slot>\n                `)}\n        </template>\n    `;\n}\n","import { html, when } from \"@microsoft/fast-element\";\nimport { staticallyCompose } from \"../utilities/template-helpers.js\";\n/**\n * The template for the {@link @microsoft/fast-foundation#FASTProgress} component.\n * @public\n */\nexport function progressTemplate(options = {}) {\n    return html `\n        <template\n            role=\"progressbar\"\n            aria-valuenow=\"${x => x.value}\"\n            aria-valuemin=\"${x => x.min}\"\n            aria-valuemax=\"${x => x.max}\"\n        >\n            ${when(x => typeof x.value === \"number\", html `\n                    <div class=\"progress\" part=\"progress\" slot=\"determinate\">\n                        <div\n                            class=\"determinate\"\n                            part=\"determinate\"\n                            style=\"width: ${x => x.percentComplete}%\"\n                        ></div>\n                    </div>\n                `, html `\n                    <div class=\"progress\" part=\"progress\" slot=\"indeterminate\">\n                        <slot name=\"indeterminate\">\n                            ${staticallyCompose(options.indeterminateIndicator1)}\n                            ${staticallyCompose(options.indeterminateIndicator2)}\n                        </slot>\n                    </div>\n                `)}\n        </template>\n    `;\n}\n","import { elements, html, slotted } from \"@microsoft/fast-element\";\nimport { RadioGroupOrientation } from \"./radio-group.options.js\";\n/**\n * The template for the {@link @microsoft/fast-foundation#FASTRadioGroup} component.\n * @public\n */\nexport function radioGroupTemplate() {\n    return html `\n        <template\n            role=\"radiogroup\"\n            tabindex=\"${x => (x.disabled ? -1 : void 0)}\"\n            aria-disabled=\"${x => x.disabled}\"\n            aria-readonly=\"${x => x.readOnly}\"\n            aria-orientation=\"${x => x.orientation}\"\n            @click=\"${(x, c) => x.clickHandler(c.event)}\"\n            @mousedown=\"${(x, c) => x.handleDisabledClick(c.event)}\"\n            @keydown=\"${(x, c) => x.keydownHandler(c.event)}\"\n            @focusout=\"${(x, c) => x.focusOutHandler(c.event)}\"\n        >\n            <slot name=\"label\"></slot>\n            <div\n                class=\"positioning-region ${x => x.orientation === RadioGroupOrientation.horizontal\n        ? \"horizontal\"\n        : \"vertical\"}\"\n                part=\"positioning-region\"\n            >\n                <slot\n                    ${slotted({\n        property: \"slottedRadioButtons\",\n        filter: elements(\"[role=radio]\"),\n    })}\n                ></slot>\n            </div>\n        </template>\n    `;\n}\n","import { html, slotted } from \"@microsoft/fast-element\";\nimport { staticallyCompose } from \"../utilities/template-helpers.js\";\nimport { whitespaceFilter } from \"../utilities/whitespace-filter.js\";\n/**\n * The template for the {@link @microsoft/fast-foundation#(FASTRadio:class)} component.\n * @public\n */\nexport function radioTemplate(options = {}) {\n    return html `\n        <template\n            role=\"radio\"\n            aria-checked=\"${x => x.checked}\"\n            aria-required=\"${x => x.required}\"\n            aria-disabled=\"${x => x.disabled}\"\n            @keypress=\"${(x, c) => x.keypressHandler(c.event)}\"\n        >\n            <div part=\"control\" class=\"control\">\n                <slot name=\"checked-indicator\">\n                    ${staticallyCompose(options.checkedIndicator)}\n                </slot>\n            </div>\n            <label\n                part=\"label\"\n                class=\"${x => {\n        var _a;\n        return [\"label\", !((_a = x.defaultSlottedNodes) === null || _a === void 0 ? void 0 : _a.length) && \"label__hidden\"]\n            .filter(Boolean)\n            .join(\" \");\n    }}\"\n            >\n                <slot\n                    ${slotted({\n        property: \"defaultSlottedNodes\",\n        filter: whitespaceFilter,\n    })}\n                ></slot>\n            </label>\n        </template>\n    `;\n}\n","import { html, ref } from \"@microsoft/fast-element\";\nimport { staticallyCompose } from \"../utilities/template-helpers.js\";\n/**\n * The template for the {@link @microsoft/fast-foundation#(FASTSlider:class)} component.\n * @public\n */\nexport function sliderTemplate(options = {}) {\n    return html `\n        <template\n            role=\"slider\"\n            tabindex=\"${x => (x.disabled ? null : 0)}\"\n            aria-valuetext=\"${x => x.valueTextFormatter(x.value)}\"\n            aria-valuenow=\"${x => x.value}\"\n            aria-valuemin=\"${x => x.min}\"\n            aria-valuemax=\"${x => x.max}\"\n            aria-disabled=\"${x => (x.disabled ? true : void 0)}\"\n            aria-readonly=\"${x => (x.readOnly ? true : void 0)}\"\n            aria-orientation=\"${x => x.orientation}\"\n            class=\"${x => x.orientation}\"\n        >\n            <div part=\"positioning-region\" class=\"positioning-region\">\n                <div ${ref(\"track\")} part=\"track-container\" class=\"track\">\n                    <slot name=\"track\"></slot>\n                    <div\n                        part=\"track-start\"\n                        class=\"track-start\"\n                        style=\"${x => x.position}\"\n                    >\n                        <slot name=\"track-start\"></slot>\n                    </div>\n                </div>\n                <slot></slot>\n                <div\n                    ${ref(\"thumb\")}\n                    part=\"thumb-container\"\n                    class=\"thumb-container\"\n                    style=\"${x => x.position}\"\n                >\n                    <slot name=\"thumb\">${staticallyCompose(options.thumb)}</slot>\n                </div>\n            </div>\n        </template>\n    `;\n}\n","import { html, slotted } from \"@microsoft/fast-element\";\nimport { staticallyCompose } from \"../utilities/template-helpers.js\";\n/**\n * The template for the {@link @microsoft/fast-foundation#(FASTSwitch:class)} component.\n * @public\n */\nexport function switchTemplate(options = {}) {\n    return html `\n        <template\n            role=\"switch\"\n            aria-checked=\"${x => x.checked}\"\n            aria-disabled=\"${x => x.disabled}\"\n            aria-readonly=\"${x => x.readOnly}\"\n            tabindex=\"${x => (x.disabled ? null : 0)}\"\n            @keypress=\"${(x, c) => x.keypressHandler(c.event)}\"\n            @click=\"${(x, c) => x.clickHandler(c.event)}\"\n        >\n            <label\n                part=\"label\"\n                class=\"${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length\n        ? \"label\"\n        : \"label label__hidden\"}\"\n            >\n                <slot ${slotted(\"defaultSlottedNodes\")}></slot>\n            </label>\n            <div part=\"switch\" class=\"switch\">\n                <slot name=\"switch\">${staticallyCompose(options.switch)}</slot>\n            </div>\n        </template>\n    `;\n}\n","import { html } from \"@microsoft/fast-element\";\n/**\n * The template for the {@link @microsoft/fast-foundation#FASTTabPanel} component.\n * @public\n */\nexport function tabPanelTemplate() {\n    return html `\n        <template slot=\"tabpanel\" role=\"tabpanel\">\n            <slot></slot>\n        </template>\n    `;\n}\n","import { html, slotted } from \"@microsoft/fast-element\";\nimport { endSlotTemplate, startSlotTemplate } from \"../patterns/index.js\";\n/**\n * The template for the {@link @microsoft/fast-foundation#(FASTTabs:class)} component.\n * @public\n */\nexport function tabsTemplate(options = {}) {\n    return html `\n        ${startSlotTemplate(options)}\n        <div class=\"tablist\" part=\"tablist\" role=\"tablist\">\n            <slot name=\"tab\" ${slotted(\"tabs\")}></slot>\n        </div>\n        ${endSlotTemplate(options)}\n        <div class=\"tabpanel\" part=\"tabpanel\">\n            <slot name=\"tabpanel\" ${slotted(\"tabpanels\")}></slot>\n        </div>\n    `;\n}\n","import { html, ref, slotted } from \"@microsoft/fast-element\";\nimport { endSlotTemplate, startSlotTemplate } from \"../patterns/index.js\";\nimport { whitespaceFilter } from \"../utilities/whitespace-filter.js\";\n/**\n * The template for the {@link @microsoft/fast-foundation#(FASTTextField:class)} component.\n * @public\n */\nexport function textFieldTemplate(options = {}) {\n    return html `\n        <label\n            part=\"label\"\n            for=\"control\"\n            class=\"${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length\n        ? \"label\"\n        : \"label label__hidden\"}\"\n        >\n            <slot\n                ${slotted({\n        property: \"defaultSlottedNodes\",\n        filter: whitespaceFilter,\n    })}\n            ></slot>\n        </label>\n        <div class=\"root\" part=\"root\">\n            ${startSlotTemplate(options)}\n            <input\n                class=\"control\"\n                part=\"control\"\n                id=\"control\"\n                @input=\"${x => x.handleTextInput()}\"\n                @change=\"${x => x.handleChange()}\"\n                ?autofocus=\"${x => x.autofocus}\"\n                ?disabled=\"${x => x.disabled}\"\n                list=\"${x => x.list}\"\n                maxlength=\"${x => x.maxlength}\"\n                name=\"${x => x.name}\"\n                minlength=\"${x => x.minlength}\"\n                pattern=\"${x => x.pattern}\"\n                placeholder=\"${x => x.placeholder}\"\n                ?readonly=\"${x => x.readOnly}\"\n                ?required=\"${x => x.required}\"\n                size=\"${x => x.size}\"\n                ?spellcheck=\"${x => x.spellcheck}\"\n                :value=\"${x => x.value}\"\n                type=\"${x => x.type}\"\n                aria-atomic=\"${x => x.ariaAtomic}\"\n                aria-busy=\"${x => x.ariaBusy}\"\n                aria-controls=\"${x => x.ariaControls}\"\n                aria-current=\"${x => x.ariaCurrent}\"\n                aria-describedby=\"${x => x.ariaDescribedby}\"\n                aria-details=\"${x => x.ariaDetails}\"\n                aria-disabled=\"${x => x.ariaDisabled}\"\n                aria-errormessage=\"${x => x.ariaErrormessage}\"\n                aria-flowto=\"${x => x.ariaFlowto}\"\n                aria-haspopup=\"${x => x.ariaHaspopup}\"\n                aria-hidden=\"${x => x.ariaHidden}\"\n                aria-invalid=\"${x => x.ariaInvalid}\"\n                aria-keyshortcuts=\"${x => x.ariaKeyshortcuts}\"\n                aria-label=\"${x => x.ariaLabel}\"\n                aria-labelledby=\"${x => x.ariaLabelledby}\"\n                aria-live=\"${x => x.ariaLive}\"\n                aria-owns=\"${x => x.ariaOwns}\"\n                aria-relevant=\"${x => x.ariaRelevant}\"\n                aria-roledescription=\"${x => x.ariaRoledescription}\"\n                ${ref(\"control\")}\n            />\n            ${endSlotTemplate(options)}\n        </div>\n    `;\n}\n"],"names":[],"sourceRoot":""}
+{"version":3,"file":"350.e4be85c2.iframe.bundle.js","mappings":";;;;;;AAaA;;;;;AAKA;AACA;AACA;AACA;AACA;AACA;;;;;;AAMA;AACA;;;AAGA;;;AAGA;;;;;;;AAOA;;AAEA;;;;AAKA;;;ACzCA;;;AAIA;;;;ACFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;;AAGA;;;;ACrCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;;AAGA;;;AC1CA;AACA;AACA;AACA;AACA;AACA;;;;AAIA;;;AAGA;;;;;AAKA;;AAIA;;;AAIA;;AC1BA;AACA;;;;AAKA;;ACFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;;AAIA;;;;;AAKA;;;;AAIA;;;;;;AAMA;;;;AAIA;AACA;;;;;;;AAOA;;;;;;AAMA;;;AAGA;;AAEA;;;AAOA;;AC/DA;;AAEA;AACA;;AAEA;;AAGA;ACCA;AACA;AAUA;AACA;;;AClBA;AACA;AACA;;AAEA;;;;;;;;;;;;;;;;;AAiBA;;;;;;AAOA;;AAEA;;;;AAKA;;;ACpCA;AACA;AACA;;AAEA;;;;;AAKA;;;AAGA;;;AAGA;AACA;;;;;AAMA;;;ACtBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIA;;;;AAMA;;;;AAQA;;;ACxBA;AACA;AACA;AACA;;;;AAIA;;;;;AAKA;;;AAQA;;;;AAQA;;;AC7BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;;;;;AAKA;;;;;;;AAOA;;;AAGA;;AAEA;;;;AAKA;;;ACjCA;AACA;AACA;AACA;AACA;AACA;;;;AAIA;;AAIA;;;AAGA;;;AAIA;;;;ACnBA;ACHA;;AAEA;;AAEA;;AAEA;;AAGA;;;;ACLA;;;AAKA;;;;AAOA;;;;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAGA","sources":["webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/accordion-item/accordion-item.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/accordion/accordion.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/anchor/anchor.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/button/button.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/checkbox/checkbox.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/divider/divider.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/menu-item/menu-item.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/menu/menu.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/patterns/start-end.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/progress-ring/progress-ring.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/progress/progress.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/radio-group/radio-group.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/radio/radio.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/slider/slider.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/switch/switch.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/tab-panel/tab-panel.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/tabs/tabs.template.js","webpack://@fluentui/web-components/../../node_modules/@microsoft/fast-foundation/dist/esm/text-field/text-field.template.js"],"sourcesContent":["import { html, ref } from \"@microsoft/fast-element\";\nimport { staticallyCompose } from \"../utilities/template-helpers.js\";\nimport { endSlotTemplate, startSlotTemplate } from \"../patterns/index.js\";\n/**\n * The template for the {@link @microsoft/fast-foundation#(FASTAccordionItem:class)} component.\n * @public\n */\nexport function accordionItemTemplate(options = {}) {\n    return html `\n        <div\n            class=\"heading\"\n            part=\"heading\"\n            role=\"heading\"\n            aria-level=\"${x => x.headinglevel}\"\n        >\n            <button\n                class=\"button\"\n                part=\"button\"\n                ${ref(\"expandbutton\")}\n                ?disabled=\"${x => (x.disabled ? \"true\" : void 0)}\"\n                aria-expanded=\"${x => x.expanded}\"\n                aria-controls=\"${x => x.id}-panel\"\n                id=\"${x => x.id}\"\n                @click=\"${(x, c) => x.clickHandler(c.event)}\"\n            >\n                <span class=\"heading-content\" part=\"heading-content\">\n                    <slot name=\"heading\"></slot>\n                </span>\n            </button>\n            ${startSlotTemplate(options)}\n            ${endSlotTemplate(options)}\n            <span class=\"icon\" part=\"icon\" aria-hidden=\"true\">\n                <slot name=\"expanded-icon\">\n                    ${staticallyCompose(options.expandedIcon)}\n                </slot>\n                <slot name=\"collapsed-icon\">\n                    ${staticallyCompose(options.collapsedIcon)}\n                </slot>\n            <span>\n        </div>\n        <div\n            class=\"region\"\n            part=\"region\"\n            id=\"${x => x.id}-panel\"\n            role=\"region\"\n            aria-labelledby=\"${x => x.id}\"\n        >\n            <slot></slot>\n        </div>\n`;\n}\n","import { elements, html, slotted } from \"@microsoft/fast-element\";\n/**\n * Creates a template for the {@link @microsoft/fast-foundation#FASTAccordion} component.\n * @public\n */\nexport function accordionTemplate() {\n    return html `\n        <template>\n            <slot\n                ${slotted({ property: \"slottedAccordionItems\", filter: elements() })}\n            ></slot>\n        </template>\n    `;\n}\n","import { html, ref, slotted } from \"@microsoft/fast-element\";\nimport { endSlotTemplate, startSlotTemplate } from \"../patterns/index.js\";\n/**\n * The template for the {@link @microsoft/fast-foundation#(FASTAnchor:class)} component.\n * @public\n */\nexport function anchorTemplate(options = {}) {\n    return html `\n        <a\n            class=\"control\"\n            part=\"control\"\n            download=\"${x => x.download}\"\n            href=\"${x => x.href}\"\n            hreflang=\"${x => x.hreflang}\"\n            ping=\"${x => x.ping}\"\n            referrerpolicy=\"${x => x.referrerpolicy}\"\n            rel=\"${x => x.rel}\"\n            target=\"${x => x.target}\"\n            type=\"${x => x.type}\"\n            aria-atomic=\"${x => x.ariaAtomic}\"\n            aria-busy=\"${x => x.ariaBusy}\"\n            aria-controls=\"${x => x.ariaControls}\"\n            aria-current=\"${x => x.ariaCurrent}\"\n            aria-describedby=\"${x => x.ariaDescribedby}\"\n            aria-details=\"${x => x.ariaDetails}\"\n            aria-disabled=\"${x => x.ariaDisabled}\"\n            aria-errormessage=\"${x => x.ariaErrormessage}\"\n            aria-expanded=\"${x => x.ariaExpanded}\"\n            aria-flowto=\"${x => x.ariaFlowto}\"\n            aria-haspopup=\"${x => x.ariaHaspopup}\"\n            aria-hidden=\"${x => x.ariaHidden}\"\n            aria-invalid=\"${x => x.ariaInvalid}\"\n            aria-keyshortcuts=\"${x => x.ariaKeyshortcuts}\"\n            aria-label=\"${x => x.ariaLabel}\"\n            aria-labelledby=\"${x => x.ariaLabelledby}\"\n            aria-live=\"${x => x.ariaLive}\"\n            aria-owns=\"${x => x.ariaOwns}\"\n            aria-relevant=\"${x => x.ariaRelevant}\"\n            aria-roledescription=\"${x => x.ariaRoledescription}\"\n            ${ref(\"control\")}\n        >\n            ${startSlotTemplate(options)}\n            <span class=\"content\" part=\"content\">\n                <slot ${slotted(\"defaultSlottedContent\")}></slot>\n            </span>\n            ${endSlotTemplate(options)}\n        </a>\n    `;\n}\n","import { html, ref, slotted } from \"@microsoft/fast-element\";\nimport { endSlotTemplate, startSlotTemplate } from \"../patterns/index.js\";\n/**\n * The template for the {@link @microsoft/fast-foundation#(FASTButton:class)} component.\n * @public\n */\nexport function buttonTemplate(options = {}) {\n    return html `\n        <button\n            class=\"control\"\n            part=\"control\"\n            ?autofocus=\"${x => x.autofocus}\"\n            ?disabled=\"${x => x.disabled}\"\n            form=\"${x => x.formId}\"\n            formaction=\"${x => x.formaction}\"\n            formenctype=\"${x => x.formenctype}\"\n            formmethod=\"${x => x.formmethod}\"\n            ?formnovalidate=\"${x => x.formnovalidate}\"\n            formtarget=\"${x => x.formtarget}\"\n            name=\"${x => x.name}\"\n            type=\"${x => x.type}\"\n            value=\"${x => x.value}\"\n            aria-atomic=\"${x => x.ariaAtomic}\"\n            aria-busy=\"${x => x.ariaBusy}\"\n            aria-controls=\"${x => x.ariaControls}\"\n            aria-current=\"${x => x.ariaCurrent}\"\n            aria-describedby=\"${x => x.ariaDescribedby}\"\n            aria-details=\"${x => x.ariaDetails}\"\n            aria-disabled=\"${x => x.ariaDisabled}\"\n            aria-errormessage=\"${x => x.ariaErrormessage}\"\n            aria-expanded=\"${x => x.ariaExpanded}\"\n            aria-flowto=\"${x => x.ariaFlowto}\"\n            aria-haspopup=\"${x => x.ariaHaspopup}\"\n            aria-hidden=\"${x => x.ariaHidden}\"\n            aria-invalid=\"${x => x.ariaInvalid}\"\n            aria-keyshortcuts=\"${x => x.ariaKeyshortcuts}\"\n            aria-label=\"${x => x.ariaLabel}\"\n            aria-labelledby=\"${x => x.ariaLabelledby}\"\n            aria-live=\"${x => x.ariaLive}\"\n            aria-owns=\"${x => x.ariaOwns}\"\n            aria-pressed=\"${x => x.ariaPressed}\"\n            aria-relevant=\"${x => x.ariaRelevant}\"\n            aria-roledescription=\"${x => x.ariaRoledescription}\"\n            ${ref(\"control\")}\n        >\n            ${startSlotTemplate(options)}\n            <span class=\"content\" part=\"content\">\n                <slot ${slotted(\"defaultSlottedContent\")}></slot>\n            </span>\n            ${endSlotTemplate(options)}\n        </button>\n    `;\n}\n","import { html, slotted } from \"@microsoft/fast-element\";\nimport { staticallyCompose } from \"../utilities/template-helpers.js\";\n/**\n * The template for the {@link @microsoft/fast-foundation#(FASTCheckbox:class)} component.\n * @public\n */\nexport function checkboxTemplate(options = {}) {\n    return html `\n        <template\n            role=\"checkbox\"\n            aria-checked=\"${x => (x.indeterminate ? \"mixed\" : x.checked)}\"\n            aria-required=\"${x => x.required}\"\n            aria-disabled=\"${x => x.disabled}\"\n            tabindex=\"${x => (x.disabled ? null : 0)}\"\n            @keypress=\"${(x, c) => x.keypressHandler(c.event)}\"\n            @click=\"${(x, c) => x.clickHandler(c.event)}\"\n        >\n            <div part=\"control\" class=\"control\">\n                <slot name=\"checked-indicator\">\n                    ${staticallyCompose(options.checkedIndicator)}\n                </slot>\n                <slot name=\"indeterminate-indicator\">\n                    ${staticallyCompose(options.indeterminateIndicator)}\n                </slot>\n            </div>\n            <label\n                part=\"label\"\n                class=\"${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length\n        ? \"label\"\n        : \"label label__hidden\"}\"\n            >\n                <slot ${slotted(\"defaultSlottedNodes\")}></slot>\n            </label>\n        </template>\n    `;\n}\n","import { html } from \"@microsoft/fast-element\";\nimport { DividerRole } from \"./divider.options.js\";\n/**\n * The template for the {@link @microsoft/fast-foundation#FASTDivider} component.\n * @public\n */\nexport function dividerTemplate() {\n    return html `\n        <template\n            role=\"${x => x.role}\"\n            aria-orientation=\"${x => x.role !== DividerRole.presentation ? x.orientation : void 0}\"\n        >\n            <slot></slot>\n        </template>\n    `;\n}\n","import { elements, html, ref, slotted, when, } from \"@microsoft/fast-element\";\nimport { staticallyCompose } from \"../utilities/template-helpers.js\";\nimport { endSlotTemplate, startSlotTemplate } from \"../patterns/index.js\";\nimport { MenuItemRole } from \"./menu-item.options.js\";\n/**\n * Generates a template for the {@link @microsoft/fast-foundation#(FASTMenuItem:class)} component using\n * the provided prefix.\n *\n * @public\n */\nexport function menuItemTemplate(options = {}) {\n    return html `\n    <template\n        aria-haspopup=\"${x => (x.hasSubmenu ? \"menu\" : void 0)}\"\n        aria-checked=\"${x => (x.role !== MenuItemRole.menuitem ? x.checked : void 0)}\"\n        aria-disabled=\"${x => x.disabled}\"\n        aria-expanded=\"${x => x.expanded}\"\n        @keydown=\"${(x, c) => x.handleMenuItemKeyDown(c.event)}\"\n        @click=\"${(x, c) => x.handleMenuItemClick(c.event)}\"\n        @mouseover=\"${(x, c) => x.handleMouseOver(c.event)}\"\n        @mouseout=\"${(x, c) => x.handleMouseOut(c.event)}\"\n    >\n            ${when(x => x.role === MenuItemRole.menuitemcheckbox, html `\n                    <div part=\"input-container\" class=\"input-container\">\n                        <span part=\"checkbox\" class=\"checkbox\">\n                            <slot name=\"checkbox-indicator\">\n                                ${staticallyCompose(options.checkboxIndicator)}\n                            </slot>\n                        </span>\n                    </div>\n                `)}\n            ${when(x => x.role === MenuItemRole.menuitemradio, html `\n                    <div part=\"input-container\" class=\"input-container\">\n                        <span part=\"radio\" class=\"radio\">\n                            <slot name=\"radio-indicator\">\n                                ${staticallyCompose(options.radioIndicator)}\n                            </slot>\n                        </span>\n                    </div>\n                `)}\n        </div>\n        ${startSlotTemplate(options)}\n        <span class=\"content\" part=\"content\">\n            <slot></slot>\n        </span>\n        ${endSlotTemplate(options)}\n        ${when(x => x.hasSubmenu, html `\n                <div\n                    part=\"expand-collapse-glyph-container\"\n                    class=\"expand-collapse-glyph-container\"\n                >\n                    <span part=\"expand-collapse\" class=\"expand-collapse\">\n                        <slot name=\"expand-collapse-indicator\">\n                            ${staticallyCompose(options.expandCollapseGlyph)}\n                        </slot>\n                    </span>\n                </div>\n            `)}\n        <span\n            ?hidden=\"${x => !x.expanded}\"\n            class=\"submenu-container\"\n            part=\"submenu-container\"\n            ${ref(\"submenuContainer\")}\n        >\n            <slot name=\"submenu\" ${slotted({\n        property: \"slottedSubmenu\",\n        filter: elements(\"[role='menu']\"),\n    })}></slot>\n        </span>\n    </template>\n    `;\n}\n","import { html, slotted } from \"@microsoft/fast-element\";\n/**\n * The template for the {@link @microsoft/fast-foundation#FASTMenu} component.\n * @public\n */\nexport function menuTemplate() {\n    return html `\n        <template\n            slot=\"${x => (x.slot ? x.slot : x.isNestedMenu() ? \"submenu\" : void 0)}\"\n            role=\"menu\"\n            @keydown=\"${(x, c) => x.handleMenuKeyDown(c.event)}\"\n            @focusout=\"${(x, c) => x.handleFocusOut(c.event)}\"\n        >\n            <slot ${slotted(\"items\")}></slot>\n        </template>\n    `;\n}\n","import { html, ref } from \"@microsoft/fast-element\";\nimport { staticallyCompose, } from \"../utilities/template-helpers.js\";\n/**\n * A mixin class implementing start and end slots.\n * These are generally used to decorate text elements with icons or other visual indicators.\n * @public\n */\nexport class StartEnd {\n}\n/**\n * The template for the end slot.\n * For use with {@link StartEnd}\n *\n * @public\n */\nexport function endSlotTemplate(options) {\n    return html `\n        <slot name=\"end\" ${ref(\"end\")}>${staticallyCompose(options.end)}</slot>\n    `.inline();\n}\n/**\n * The template for the start slots.\n * For use with {@link StartEnd}\n *\n * @public\n */\nexport function startSlotTemplate(options) {\n    return html `\n        <slot name=\"start\" ${ref(\"start\")}>${staticallyCompose(options.start)}</slot>\n    `.inline();\n}\n","import { html, when } from \"@microsoft/fast-element\";\nimport { staticallyCompose } from \"../utilities/template-helpers.js\";\nconst progressSegments = 44;\n/**\n * The template for the {@link @microsoft/fast-foundation#FASTProgressRing} component.\n * @public\n */\nexport function progressRingTemplate(options = {}) {\n    return html `\n        <template\n            role=\"progressbar\"\n            aria-valuenow=\"${x => x.value}\"\n            aria-valuemin=\"${x => x.min}\"\n            aria-valuemax=\"${x => x.max}\"\n        >\n            ${when(x => typeof x.value === \"number\", html `\n                    <svg\n                        class=\"progress\"\n                        part=\"progress\"\n                        viewBox=\"0 0 16 16\"\n                        slot=\"determinate\"\n                    >\n                        <circle\n                            class=\"background\"\n                            part=\"background\"\n                            cx=\"8px\"\n                            cy=\"8px\"\n                            r=\"7px\"\n                        ></circle>\n                        <circle\n                            class=\"determinate\"\n                            part=\"determinate\"\n                            style=\"stroke-dasharray: ${x => (progressSegments * x.percentComplete) /\n        100}px ${progressSegments}px\"\n                            cx=\"8px\"\n                            cy=\"8px\"\n                            r=\"7px\"\n                        ></circle>\n                    </svg>\n                `, html `\n                    <slot name=\"indeterminate\">\n                        ${staticallyCompose(options.indeterminateIndicator)}\n                    </slot>\n                `)}\n        </template>\n    `;\n}\n","import { html, when } from \"@microsoft/fast-element\";\nimport { staticallyCompose } from \"../utilities/template-helpers.js\";\n/**\n * The template for the {@link @microsoft/fast-foundation#FASTProgress} component.\n * @public\n */\nexport function progressTemplate(options = {}) {\n    return html `\n        <template\n            role=\"progressbar\"\n            aria-valuenow=\"${x => x.value}\"\n            aria-valuemin=\"${x => x.min}\"\n            aria-valuemax=\"${x => x.max}\"\n        >\n            ${when(x => typeof x.value === \"number\", html `\n                    <div class=\"progress\" part=\"progress\" slot=\"determinate\">\n                        <div\n                            class=\"determinate\"\n                            part=\"determinate\"\n                            style=\"width: ${x => x.percentComplete}%\"\n                        ></div>\n                    </div>\n                `, html `\n                    <div class=\"progress\" part=\"progress\" slot=\"indeterminate\">\n                        <slot name=\"indeterminate\">\n                            ${staticallyCompose(options.indeterminateIndicator1)}\n                            ${staticallyCompose(options.indeterminateIndicator2)}\n                        </slot>\n                    </div>\n                `)}\n        </template>\n    `;\n}\n","import { elements, html, slotted } from \"@microsoft/fast-element\";\nimport { RadioGroupOrientation } from \"./radio-group.options.js\";\n/**\n * The template for the {@link @microsoft/fast-foundation#FASTRadioGroup} component.\n * @public\n */\nexport function radioGroupTemplate() {\n    return html `\n        <template\n            role=\"radiogroup\"\n            tabindex=\"${x => (x.disabled ? -1 : void 0)}\"\n            aria-disabled=\"${x => x.disabled}\"\n            aria-readonly=\"${x => x.readOnly}\"\n            aria-orientation=\"${x => x.orientation}\"\n            @click=\"${(x, c) => x.clickHandler(c.event)}\"\n            @mousedown=\"${(x, c) => x.handleDisabledClick(c.event)}\"\n            @keydown=\"${(x, c) => x.keydownHandler(c.event)}\"\n            @focusout=\"${(x, c) => x.focusOutHandler(c.event)}\"\n        >\n            <slot name=\"label\"></slot>\n            <div\n                class=\"positioning-region ${x => x.orientation === RadioGroupOrientation.horizontal\n        ? \"horizontal\"\n        : \"vertical\"}\"\n                part=\"positioning-region\"\n            >\n                <slot\n                    ${slotted({\n        property: \"slottedRadioButtons\",\n        filter: elements(\"[role=radio]\"),\n    })}\n                ></slot>\n            </div>\n        </template>\n    `;\n}\n","import { html, slotted } from \"@microsoft/fast-element\";\nimport { staticallyCompose } from \"../utilities/template-helpers.js\";\nimport { whitespaceFilter } from \"../utilities/whitespace-filter.js\";\n/**\n * The template for the {@link @microsoft/fast-foundation#(FASTRadio:class)} component.\n * @public\n */\nexport function radioTemplate(options = {}) {\n    return html `\n        <template\n            role=\"radio\"\n            aria-checked=\"${x => x.checked}\"\n            aria-required=\"${x => x.required}\"\n            aria-disabled=\"${x => x.disabled}\"\n            @keypress=\"${(x, c) => x.keypressHandler(c.event)}\"\n        >\n            <div part=\"control\" class=\"control\">\n                <slot name=\"checked-indicator\">\n                    ${staticallyCompose(options.checkedIndicator)}\n                </slot>\n            </div>\n            <label\n                part=\"label\"\n                class=\"${x => {\n        var _a;\n        return [\"label\", !((_a = x.defaultSlottedNodes) === null || _a === void 0 ? void 0 : _a.length) && \"label__hidden\"]\n            .filter(Boolean)\n            .join(\" \");\n    }}\"\n            >\n                <slot\n                    ${slotted({\n        property: \"defaultSlottedNodes\",\n        filter: whitespaceFilter,\n    })}\n                ></slot>\n            </label>\n        </template>\n    `;\n}\n","import { html, ref } from \"@microsoft/fast-element\";\nimport { staticallyCompose } from \"../utilities/template-helpers.js\";\n/**\n * The template for the {@link @microsoft/fast-foundation#(FASTSlider:class)} component.\n * @public\n */\nexport function sliderTemplate(options = {}) {\n    return html `\n        <template\n            role=\"slider\"\n            tabindex=\"${x => (x.disabled ? null : 0)}\"\n            aria-valuetext=\"${x => x.valueTextFormatter(x.value)}\"\n            aria-valuenow=\"${x => x.value}\"\n            aria-valuemin=\"${x => x.min}\"\n            aria-valuemax=\"${x => x.max}\"\n            aria-disabled=\"${x => (x.disabled ? true : void 0)}\"\n            aria-readonly=\"${x => (x.readOnly ? true : void 0)}\"\n            aria-orientation=\"${x => x.orientation}\"\n            class=\"${x => x.orientation}\"\n        >\n            <div part=\"positioning-region\" class=\"positioning-region\">\n                <div ${ref(\"track\")} part=\"track-container\" class=\"track\">\n                    <slot name=\"track\"></slot>\n                    <div\n                        part=\"track-start\"\n                        class=\"track-start\"\n                        style=\"${x => x.position}\"\n                    >\n                        <slot name=\"track-start\"></slot>\n                    </div>\n                </div>\n                <slot></slot>\n                <div\n                    ${ref(\"thumb\")}\n                    part=\"thumb-container\"\n                    class=\"thumb-container\"\n                    style=\"${x => x.position}\"\n                >\n                    <slot name=\"thumb\">${staticallyCompose(options.thumb)}</slot>\n                </div>\n            </div>\n        </template>\n    `;\n}\n","import { html, slotted } from \"@microsoft/fast-element\";\nimport { staticallyCompose } from \"../utilities/template-helpers.js\";\n/**\n * The template for the {@link @microsoft/fast-foundation#(FASTSwitch:class)} component.\n * @public\n */\nexport function switchTemplate(options = {}) {\n    return html `\n        <template\n            role=\"switch\"\n            aria-checked=\"${x => x.checked}\"\n            aria-disabled=\"${x => x.disabled}\"\n            aria-readonly=\"${x => x.readOnly}\"\n            tabindex=\"${x => (x.disabled ? null : 0)}\"\n            @keypress=\"${(x, c) => x.keypressHandler(c.event)}\"\n            @click=\"${(x, c) => x.clickHandler(c.event)}\"\n        >\n            <label\n                part=\"label\"\n                class=\"${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length\n        ? \"label\"\n        : \"label label__hidden\"}\"\n            >\n                <slot ${slotted(\"defaultSlottedNodes\")}></slot>\n            </label>\n            <div part=\"switch\" class=\"switch\">\n                <slot name=\"switch\">${staticallyCompose(options.switch)}</slot>\n            </div>\n        </template>\n    `;\n}\n","import { html } from \"@microsoft/fast-element\";\n/**\n * The template for the {@link @microsoft/fast-foundation#FASTTabPanel} component.\n * @public\n */\nexport function tabPanelTemplate() {\n    return html `\n        <template slot=\"tabpanel\" role=\"tabpanel\">\n            <slot></slot>\n        </template>\n    `;\n}\n","import { html, slotted } from \"@microsoft/fast-element\";\nimport { endSlotTemplate, startSlotTemplate } from \"../patterns/index.js\";\n/**\n * The template for the {@link @microsoft/fast-foundation#(FASTTabs:class)} component.\n * @public\n */\nexport function tabsTemplate(options = {}) {\n    return html `\n        ${startSlotTemplate(options)}\n        <div class=\"tablist\" part=\"tablist\" role=\"tablist\">\n            <slot name=\"tab\" ${slotted(\"tabs\")}></slot>\n        </div>\n        ${endSlotTemplate(options)}\n        <div class=\"tabpanel\" part=\"tabpanel\">\n            <slot name=\"tabpanel\" ${slotted(\"tabpanels\")}></slot>\n        </div>\n    `;\n}\n","import { html, ref, slotted } from \"@microsoft/fast-element\";\nimport { endSlotTemplate, startSlotTemplate } from \"../patterns/index.js\";\nimport { whitespaceFilter } from \"../utilities/whitespace-filter.js\";\n/**\n * The template for the {@link @microsoft/fast-foundation#(FASTTextField:class)} component.\n * @public\n */\nexport function textFieldTemplate(options = {}) {\n    return html `\n        <label\n            part=\"label\"\n            for=\"control\"\n            class=\"${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length\n        ? \"label\"\n        : \"label label__hidden\"}\"\n        >\n            <slot\n                ${slotted({\n        property: \"defaultSlottedNodes\",\n        filter: whitespaceFilter,\n    })}\n            ></slot>\n        </label>\n        <div class=\"root\" part=\"root\">\n            ${startSlotTemplate(options)}\n            <input\n                class=\"control\"\n                part=\"control\"\n                id=\"control\"\n                @input=\"${x => x.handleTextInput()}\"\n                @change=\"${x => x.handleChange()}\"\n                ?autofocus=\"${x => x.autofocus}\"\n                ?disabled=\"${x => x.disabled}\"\n                list=\"${x => x.list}\"\n                maxlength=\"${x => x.maxlength}\"\n                name=\"${x => x.name}\"\n                minlength=\"${x => x.minlength}\"\n                pattern=\"${x => x.pattern}\"\n                placeholder=\"${x => x.placeholder}\"\n                ?readonly=\"${x => x.readOnly}\"\n                ?required=\"${x => x.required}\"\n                size=\"${x => x.size}\"\n                ?spellcheck=\"${x => x.spellcheck}\"\n                :value=\"${x => x.value}\"\n                type=\"${x => x.type}\"\n                aria-atomic=\"${x => x.ariaAtomic}\"\n                aria-busy=\"${x => x.ariaBusy}\"\n                aria-controls=\"${x => x.ariaControls}\"\n                aria-current=\"${x => x.ariaCurrent}\"\n                aria-describedby=\"${x => x.ariaDescribedby}\"\n                aria-details=\"${x => x.ariaDetails}\"\n                aria-disabled=\"${x => x.ariaDisabled}\"\n                aria-errormessage=\"${x => x.ariaErrormessage}\"\n                aria-flowto=\"${x => x.ariaFlowto}\"\n                aria-haspopup=\"${x => x.ariaHaspopup}\"\n                aria-hidden=\"${x => x.ariaHidden}\"\n                aria-invalid=\"${x => x.ariaInvalid}\"\n                aria-keyshortcuts=\"${x => x.ariaKeyshortcuts}\"\n                aria-label=\"${x => x.ariaLabel}\"\n                aria-labelledby=\"${x => x.ariaLabelledby}\"\n                aria-live=\"${x => x.ariaLive}\"\n                aria-owns=\"${x => x.ariaOwns}\"\n                aria-relevant=\"${x => x.ariaRelevant}\"\n                aria-roledescription=\"${x => x.ariaRoledescription}\"\n                ${ref(\"control\")}\n            />\n            ${endSlotTemplate(options)}\n        </div>\n    `;\n}\n"],"names":[],"sourceRoot":""}

package/dist/storybook/iframe.html

@@ -361,4 +361,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(ts|mdx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(ts|mdx))$"}];</script><script src="runtime~main.5d918fe7.iframe.bundle.js"></script><script src="677.939f187f.iframe.bundle.js"></script><script src="main.49f4b1e6.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(ts|mdx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(ts|mdx))$"}];</script><script src="runtime~main.5d918fe7.iframe.bundle.js"></script><script src="350.e4be85c2.iframe.bundle.js"></script><script src="main.c651bad5.iframe.bundle.js"></script></body></html>