@fluentui/web-components 3.0.0-beta.12 → 3.0.0-beta.13

package/dist/storybook/project.json

@@ -1 +1 @@
-{"generatedAt":1713845279675,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"monorepo":"Nx","packageManager":{"type":"yarn","version":"1.23.34"},"storybookVersion":"6.5.15","language":"typescript","storybookPackages":{"@storybook/html":{"version":null}},"framework":{"name":"html"},"addons":{"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-essentials":{"options":{"backgrounds":false,"viewport":false,"toolbars":false,"actions":true},"version":"6.5.15"}}}
+{"generatedAt":1714018092511,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"monorepo":"Nx","packageManager":{"type":"yarn","version":"1.23.34"},"storybookVersion":"6.5.15","language":"typescript","storybookPackages":{"@storybook/html":{"version":null}},"framework":{"name":"html"},"addons":{"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-essentials":{"options":{"backgrounds":false,"viewport":false,"toolbars":false,"actions":true},"version":"6.5.15"}}}

package/dist/web-components.js

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

package/dist/web-components.min.js

@@ -261,7 +261,7 @@ let e;try{if(document.currentScript)e=document.currentScript.getAttribute("fast-
 `,id=Kc.compose({name:Et.prefix+"-badge",template:Qc,styles:nd});var sd=Object.defineProperty,ld=Object.getOwnPropertyDescriptor,cd=(e,t,o,r)=>{for(var a,n=r>1?void 0:r?ld(t,o):t,i=e.length-1;i>=0;i--)(a=e[i])&&(n=(r?a(t,o,n):a(n))||n);return r&&n&&sd(t,o,n),n};class dd extends et{constructor(){super(),this.disabledFocusable=!1,this.elementInternals=this.attachInternals(),this.iconOnly=!1,this.elementInternals.role="button"}disabledFocusableChanged(e,t){this.$fastController.isConnected&&(this.elementInternals.ariaDisabled=""+!!t)}get form(){return this.elementInternals.form}get labels(){return Object.freeze(Array.from(this.elementInternals.labels))}typeChanged(e,t){var o,r,a;t!==lc.submit&&(null==(o=this.formSubmissionFallbackControl)||o.remove(),null==(a=null==(r=this.shadowRoot)?void 0:r.querySelector('slot[name="internal"]'))||a.remove())}clickHandler(e){if(!e||!this.disabledFocusable)return this.press(),!0;e.stopImmediatePropagation()}connectedCallback(){super.connectedCallback(),this.elementInternals.ariaDisabled=""+!!this.disabledFocusable}createAndInsertFormSubmissionFallbackControl(){var e,t,o,r,a,n,i,s;const l=null!=(e=this.formSubmissionFallbackControlSlot)?e:document.createElement("slot");l.setAttribute("name","internal"),null==(t=this.shadowRoot)||t.appendChild(l),this.formSubmissionFallbackControlSlot=l;const c=null!=(o=this.formSubmissionFallbackControl)?o:document.createElement("button");c.style.display="none",c.setAttribute("type","submit"),c.setAttribute("slot","internal"),this.formNoValidate&&c.toggleAttribute("formnovalidate",!0),(null==(r=this.elementInternals.form)?void 0:r.id)&&c.setAttribute("form",this.elementInternals.form.id),this.name&&c.setAttribute("name",this.name),this.value&&c.setAttribute("value",this.value),this.formAction&&c.setAttribute("formaction",null!=(a=this.formAction)?a:""),this.formEnctype&&c.setAttribute("formenctype",null!=(n=this.formEnctype)?n:""),this.formMethod&&c.setAttribute("formmethod",null!=(i=this.formMethod)?i:""),this.formTarget&&c.setAttribute("formtarget",null!=(s=this.formTarget)?s:""),this.append(c),this.formSubmissionFallbackControl=c}formDisabledCallback(e){this.disabled=e}keypressHandler(e){if(e&&this.disabledFocusable)e.stopImmediatePropagation();else{if("Enter"!==e.key&&" "!==e.key)return!0;this.press()}}press(){switch(this.type){case lc.reset:this.resetForm();break;case lc.submit:this.submitForm()}}resetForm(){var e;null==(e=this.elementInternals.form)||e.reset()}submitForm(){var e;if(this.elementInternals.form&&!this.disabled&&this.type===lc.submit)if(this.name||this.formAction||this.formEnctype||this.form||this.formMethod||this.formNoValidate||this.formTarget)try{this.elementInternals.setFormValue(null!=(e=this.value)?e:""),this.elementInternals.form.requestSubmit(this)}catch(e){this.createAndInsertFormSubmissionFallbackControl(),this.elementInternals.setFormValue(null),this.elementInternals.form.requestSubmit(this.formSubmissionFallbackControl)}else this.elementInternals.form.requestSubmit()}}function ud(e={}){return ke`<template tabindex="${e=>e.disabled?-1:0}" @click="${(e,t)=>e.clickHandler(t.event)}" @keypress="${(e,t)=>e.keypressHandler(t.event)}">${wt(e)}<span class="content" part="content"><slot ${Ne("defaultSlottedContent")}></slot></span>${Bt(e)}</template>`}dd.formAssociated=!0,cd([Oe],dd.prototype,"appearance",2),cd([Oe({mode:"boolean"})],dd.prototype,"autofocus",2),cd([B],dd.prototype,"defaultSlottedContent",2),cd([Oe({mode:"boolean"})],dd.prototype,"disabled",2),cd([Oe({attribute:"disabled-focusable",mode:"boolean"})],dd.prototype,"disabledFocusable",2),cd([Oe({attribute:"formaction"})],dd.prototype,"formAction",2),cd([Oe({attribute:"form"})],dd.prototype,"formAttribute",2),cd([Oe({attribute:"formenctype"})],dd.prototype,"formEnctype",2),cd([Oe({attribute:"formmethod"})],dd.prototype,"formMethod",2),cd([Oe({attribute:"formnovalidate",mode:"boolean"})],dd.prototype,"formNoValidate",2),cd([Oe({attribute:"formtarget"})],dd.prototype,"formTarget",2),cd([Oe({attribute:"icon-only",mode:"boolean"})],dd.prototype,"iconOnly",2),cd([Oe],dd.prototype,"name",2),cd([Oe],dd.prototype,"shape",2),cd([Oe],dd.prototype,"size",2),cd([Oe],dd.prototype,"type",2),cd([Oe],dd.prototype,"value",2),Pt(dd,$t);const hd=ud(),pd=j`
   ${bt("inline-flex")}
 
-  :host{--icon-spacing:${vl};contain:layout style;vertical-align:middle;align-items:center;box-sizing:border-box;justify-content:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${Vo};color:${Vt};border:${ll} solid ${Qr};padding:0 ${fl};min-width:96px;border-radius:${ks};font-size:${Cs};font-family:${Bs};font-weight:${Es};line-height:${Vs};transition-duration:${Ol};transition-property:background,border,color;transition-timing-function:${Yl};cursor:pointer;user-select:none}.content{display:inherit}:host(:hover){background-color:${"var(--colorNeutralBackground1Hover)"};color:${"var(--colorNeutralForeground1Hover)"};border-color:${Zr}}:host(:hover:active){background-color:${"var(--colorNeutralBackground1Pressed)"};border-color:${"var(--colorNeutralStroke1Pressed)"};color:${"var(--colorNeutralForeground1Pressed)"};outline-style:none}:host(:focus-visible){border-color:${va};outline:${cl}) solid ${va};box-shadow:${Qs},0 0 0 2px ${ka}}@media screen and (prefers-reduced-motion:reduce){transition-duration:0.01ms}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}[slot='start'],::slotted([slot='start']){margin-inline-end:var(--icon-spacing)}[slot='end'],::slotted([slot='end']){margin-inline-start:var(--icon-spacing)}:host([icon-only]){min-width:32px;max-width:32px}:host([size='small']){--icon-spacing:${gl};min-height:24px;min-width:64px;padding:0 ${bl};border-radius:${fs};font-size:${Fs};line-height:${js};font-weight:${Hs}}:host([size='small'][icon-only]){min-width:24px;max-width:24px}:host([size='large']){min-height:40px;border-radius:${"var(--borderRadiusLarge)"};padding:0 ${"var(--spacingHorizontalL)"};font-size:${Ns};line-height:${_s}}:host([size='large'][icon-only]){min-width:40px;max-width:40px}:host([size='large']) ::slotted(svg){font-size:24px;height:24px;width:24px}:host([shape='circular']),:host([shape='circular']:focus-visible){border-radius:${$s}}:host([shape='square']),:host([shape='square']:focus-visible){border-radius:${ms}}:host([appearance='primary']){background-color:${Lr};color:${yo};border-color:transparent}:host([appearance='primary']:hover){background-color:${"var(--colorBrandBackgroundHover)"}}:host([appearance='primary']:hover),:host([appearance='primary']:hover:active){border-color:transparent;color:${yo}}:host([appearance='primary']:hover:active){background-color:${"var(--colorBrandBackgroundPressed)"}}:host([appearance='primary']:focus-visible){border-color:${yo};box-shadow:${Us},0 0 0 2px ${ka}}:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"])),:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"]):hover),:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"]):hover:active){border-color:transparent}:host([appearance='outline']){background-color:${$r}}:host([appearance='outline']:hover){background-color:${"var(--colorTransparentBackgroundHover)"}}:host([appearance='outline']:hover:active){background-color:${"var(--colorTransparentBackgroundPressed)"}}:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"])),:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"]):hover),:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"]):hover:active){background-color:${$r}}:host([appearance='subtle']){background-color:${"var(--colorSubtleBackground)"};color:${qt};border-color:transparent}:host([appearance='subtle']:hover){background-color:${"var(--colorSubtleBackgroundHover)"};color:${"var(--colorNeutralForeground2Hover)"};border-color:transparent}:host([appearance='subtle']:hover:active){background-color:${"var(--colorSubtleBackgroundPressed)"};color:${"var(--colorNeutralForeground2Pressed)"};border-color:transparent}:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"])),:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"]):hover),:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"]):hover:active){background-color:${$r};border-color:transparent}:host([appearance='subtle']:hover) ::slotted(svg){fill:${"var(--colorNeutralForeground2BrandHover)"}}:host([appearance='subtle']:hover:active) ::slotted(svg){fill:${"var(--colorNeutralForeground2BrandPressed)"}}:host([appearance='transparent']){background-color:${$r};color:${qt}}:host([appearance='transparent']:hover){background-color:${"var(--colorTransparentBackgroundHover)"};color:${"var(--colorNeutralForeground2BrandHover)"}}:host([appearance='transparent']:hover:active){background-color:${"var(--colorTransparentBackgroundPressed)"};color:${"var(--colorNeutralForeground2BrandPressed)"}}:host([appearance='transparent']),:host([appearance='transparent']:hover),:host([appearance='transparent']:hover:active){border-color:transparent}:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"])),:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"]):hover),:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"]):hover:active){border-color:transparent;background-color:${$r}}:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable])),:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover),:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover:active){background-color:${"var(--colorNeutralBackgroundDisabled)"};border-color:${pa};color:${so};cursor:not-allowed}`.withBehaviors(kt(j`
+  :host{--icon-spacing:${vl};contain:layout style;vertical-align:middle;align-items:center;box-sizing:border-box;justify-content:center;text-align:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${Vo};color:${Vt};border:${ll} solid ${Qr};padding:0 ${fl};min-width:96px;border-radius:${ks};font-size:${Cs};font-family:${Bs};font-weight:${Es};line-height:${Vs};transition-duration:${Ol};transition-property:background,border,color;transition-timing-function:${Yl};cursor:pointer;user-select:none}.content{display:inherit}:host(:hover){background-color:${"var(--colorNeutralBackground1Hover)"};color:${"var(--colorNeutralForeground1Hover)"};border-color:${Zr}}:host(:hover:active){background-color:${"var(--colorNeutralBackground1Pressed)"};border-color:${"var(--colorNeutralStroke1Pressed)"};color:${"var(--colorNeutralForeground1Pressed)"};outline-style:none}:host(:focus-visible){border-color:${va};outline:${cl}) solid ${va};box-shadow:${Qs},0 0 0 2px ${ka}}@media screen and (prefers-reduced-motion:reduce){transition-duration:0.01ms}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}[slot='start'],::slotted([slot='start']){margin-inline-end:var(--icon-spacing)}[slot='end'],::slotted([slot='end']){margin-inline-start:var(--icon-spacing)}:host([icon-only]){min-width:32px;max-width:32px}:host([size='small']){--icon-spacing:${gl};min-height:24px;min-width:64px;padding:0 ${bl};border-radius:${fs};font-size:${Fs};line-height:${js};font-weight:${Hs}}:host([size='small'][icon-only]){min-width:24px;max-width:24px}:host([size='large']){min-height:40px;border-radius:${"var(--borderRadiusLarge)"};padding:0 ${"var(--spacingHorizontalL)"};font-size:${Ns};line-height:${_s}}:host([size='large'][icon-only]){min-width:40px;max-width:40px}:host([size='large']) ::slotted(svg){font-size:24px;height:24px;width:24px}:host([shape='circular']),:host([shape='circular']:focus-visible){border-radius:${$s}}:host([shape='square']),:host([shape='square']:focus-visible){border-radius:${ms}}:host([appearance='primary']){background-color:${Lr};color:${yo};border-color:transparent}:host([appearance='primary']:hover){background-color:${"var(--colorBrandBackgroundHover)"}}:host([appearance='primary']:hover),:host([appearance='primary']:hover:active){border-color:transparent;color:${yo}}:host([appearance='primary']:hover:active){background-color:${"var(--colorBrandBackgroundPressed)"}}:host([appearance='primary']:focus-visible){border-color:${yo};box-shadow:${Us},0 0 0 2px ${ka}}:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"])),:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"]):hover),:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"]):hover:active){border-color:transparent}:host([appearance='outline']){background-color:${$r}}:host([appearance='outline']:hover){background-color:${"var(--colorTransparentBackgroundHover)"}}:host([appearance='outline']:hover:active){background-color:${"var(--colorTransparentBackgroundPressed)"}}:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"])),:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"]):hover),:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"]):hover:active){background-color:${$r}}:host([appearance='subtle']){background-color:${"var(--colorSubtleBackground)"};color:${qt};border-color:transparent}:host([appearance='subtle']:hover){background-color:${"var(--colorSubtleBackgroundHover)"};color:${"var(--colorNeutralForeground2Hover)"};border-color:transparent}:host([appearance='subtle']:hover:active){background-color:${"var(--colorSubtleBackgroundPressed)"};color:${"var(--colorNeutralForeground2Pressed)"};border-color:transparent}:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"])),:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"]):hover),:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"]):hover:active){background-color:${$r};border-color:transparent}:host([appearance='subtle']:hover) ::slotted(svg){fill:${"var(--colorNeutralForeground2BrandHover)"}}:host([appearance='subtle']:hover:active) ::slotted(svg){fill:${"var(--colorNeutralForeground2BrandPressed)"}}:host([appearance='transparent']){background-color:${$r};color:${qt}}:host([appearance='transparent']:hover){background-color:${"var(--colorTransparentBackgroundHover)"};color:${"var(--colorNeutralForeground2BrandHover)"}}:host([appearance='transparent']:hover:active){background-color:${"var(--colorTransparentBackgroundPressed)"};color:${"var(--colorNeutralForeground2BrandPressed)"}}:host([appearance='transparent']),:host([appearance='transparent']:hover),:host([appearance='transparent']:hover:active){border-color:transparent}:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"])),:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"]):hover),:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"]):hover:active){border-color:transparent;background-color:${$r}}:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable])),:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover),:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover:active){background-color:${"var(--colorNeutralBackgroundDisabled)"};border-color:${pa};color:${so};cursor:not-allowed}`.withBehaviors(kt(j`
     :host([appearance='transparent']:hover){border-color:Highlight}`)),gd=dd.compose({name:Et.prefix+"-button",template:hd,styles:pd}),vd="ElementInternals"in window&&"setFormValue"in window.ElementInternals.prototype,bd=new WeakMap;function md(e){const t=class extends e{constructor(...e){super(...e),this.dirtyValue=!1,this.initialValue="",this.disabled=!1,this.proxyEventsToBlock=["change","click"],this.proxyInitialized=!1,this.required=!1,this.initialValue=this.initialValue||"",this.elementInternals||(this.formResetCallback=this.formResetCallback.bind(this))}static get formAssociated(){return vd}get validity(){return this.elementInternals?this.elementInternals.validity:this.proxy.validity}get form(){return this.elementInternals?this.elementInternals.form:this.proxy.form}get validationMessage(){return this.elementInternals?this.elementInternals.validationMessage:this.proxy.validationMessage}get willValidate(){return this.elementInternals?this.elementInternals.willValidate:this.proxy.willValidate}get labels(){if(this.elementInternals)return Object.freeze(Array.from(this.elementInternals.labels));if(this.proxy instanceof HTMLElement&&this.proxy.ownerDocument&&this.id){const e=this.proxy.labels,t=Array.from(this.proxy.getRootNode().querySelectorAll(`[for='${this.id}']`)),o=e?t.concat(Array.from(e)):t;return Object.freeze(o)}return l}valueChanged(e,t){this.dirtyValue=!0,this.proxy instanceof HTMLElement&&(this.proxy.value=this.value),this.currentValue=this.value,this.setFormValue(this.value),this.validate()}currentValueChanged(){this.value=this.currentValue}initialValueChanged(e,t){this.dirtyValue||(this.value=this.initialValue,this.dirtyValue=!1)}disabledChanged(e,t){this.proxy instanceof HTMLElement&&(this.proxy.disabled=this.disabled),f.enqueue(()=>this.classList.toggle("disabled",this.disabled))}nameChanged(e,t){this.proxy instanceof HTMLElement&&(this.proxy.name=this.name)}requiredChanged(e,t){this.proxy instanceof HTMLElement&&(this.proxy.required=this.required),f.enqueue(()=>this.classList.toggle("required",this.required)),this.validate()}get elementInternals(){if(!vd)return null;let e=bd.get(this);return e||(e=this.attachInternals(),bd.set(this,e)),e}connectedCallback(){super.connectedCallback(),this.addEventListener("keypress",this._keypressHandler),this.value||(this.value=this.initialValue,this.dirtyValue=!1),this.elementInternals||(this.attachProxy(),this.form&&this.form.addEventListener("reset",this.formResetCallback))}disconnectedCallback(){this.proxyEventsToBlock.forEach(e=>this.proxy.removeEventListener(e,this.stopPropagation)),!this.elementInternals&&this.form&&this.form.removeEventListener("reset",this.formResetCallback)}checkValidity(){return this.elementInternals?this.elementInternals.checkValidity():this.proxy.checkValidity()}reportValidity(){return this.elementInternals?this.elementInternals.reportValidity():this.proxy.reportValidity()}setValidity(e,t,o){this.elementInternals?this.elementInternals.setValidity(e,t,o):"string"==typeof t&&this.proxy.setCustomValidity(t)}formDisabledCallback(e){this.disabled=e}formResetCallback(){this.value=this.initialValue,this.dirtyValue=!1}attachProxy(){var e;this.proxyInitialized||(this.proxyInitialized=!0,this.proxy.style.display="none",this.proxyEventsToBlock.forEach(e=>this.proxy.addEventListener(e,this.stopPropagation)),this.proxy.disabled=this.disabled,this.proxy.required=this.required,"string"==typeof this.name&&(this.proxy.name=this.name),"string"==typeof this.value&&(this.proxy.value=this.value),this.proxy.setAttribute("slot","form-associated-proxy"),this.proxySlot=document.createElement("slot"),this.proxySlot.setAttribute("name","form-associated-proxy")),null==(e=this.shadowRoot)||e.appendChild(this.proxySlot),this.appendChild(this.proxy)}detachProxy(){var e;this.removeChild(this.proxy),null==(e=this.shadowRoot)||e.removeChild(this.proxySlot)}validate(e){this.proxy instanceof HTMLElement&&this.setValidity(this.proxy.validity,this.proxy.validationMessage,e)}setFormValue(e,t){this.elementInternals&&this.elementInternals.setFormValue(e,t||e)}_keypressHandler(e){switch(e.key){case"Enter":if(this.form instanceof HTMLFormElement){const e=this.form.querySelector("[type=submit]");null==e||e.click()}}}stopPropagation(e){e.stopPropagation()}};return Oe({mode:"boolean"})(t.prototype,"disabled"),Oe({mode:"fromView",attribute:"value"})(t.prototype,"initialValue"),Oe({attribute:"current-value"})(t.prototype,"currentValue"),Oe(t.prototype,"name"),Oe({mode:"boolean"})(t.prototype,"required"),B(t.prototype,"value"),t}function fd(e){class t extends(md(e)){}class o extends t{constructor(...e){super(e),this.dirtyChecked=!1,this.checkedAttribute=!1,this.checked=!1,this.dirtyChecked=!1}checkedAttributeChanged(){this.defaultChecked=this.checkedAttribute}defaultCheckedChanged(){this.dirtyChecked||(this.checked=this.defaultChecked,this.dirtyChecked=!1)}checkedChanged(e,t){this.dirtyChecked||(this.dirtyChecked=!0),this.currentChecked=this.checked,this.updateForm(),this.proxy instanceof HTMLInputElement&&(this.proxy.checked=this.checked),void 0!==e&&this.$emit("change"),this.validate()}currentCheckedChanged(e,t){this.checked=this.currentChecked}updateForm(){const e=this.checked?this.value:null;this.setFormValue(e,e)}connectedCallback(){super.connectedCallback(),this.updateForm()}formResetCallback(){super.formResetCallback(),this.checked=!!this.checkedAttribute,this.dirtyChecked=!1}}return Oe({attribute:"checked",mode:"boolean"})(o.prototype,"checkedAttribute"),Oe({attribute:"current-checked",converter:Ae})(o.prototype,"currentChecked"),B(o.prototype,"defaultChecked"),B(o.prototype,"checked"),o}class kd extends et{}class yd extends(fd(kd)){constructor(){super(...arguments),this.proxy=document.createElement("input")}}var xd=Object.defineProperty,$d=Object.getOwnPropertyDescriptor,Bd=(e,t,o,r)=>{for(var a,n=r>1?void 0:r?$d(t,o):t,i=e.length-1;i>=0;i--)(a=e[i])&&(n=(r?a(t,o,n):a(n))||n);return r&&n&&xd(t,o,n),n};class wd extends yd{constructor(){super(),this.initialValue="on",this.indeterminate=!1,this.keypressHandler=e=>{if(!this.disabled)switch(e.key){case" ":this.toggleChecked()}},this.clickHandler=e=>{this.disabled||this.toggleChecked()},this.proxy.setAttribute("type","checkbox")}toggleChecked(){this.indeterminate&&(this.indeterminate=!1),this.checked=!this.checked}}Bd([Oe],wd.prototype,"shape",2),Bd([Oe],wd.prototype,"size",2),Bd([Oe({attribute:"label-position"})],wd.prototype,"labelPosition",2),Bd([B],wd.prototype,"defaultSlottedNodes",2),Bd([B],wd.prototype,"indeterminate",2);const Pd={circular:"circular",square:"square"},Sd={medium:"medium",large:"large"},Fd={before:"before",after:"after"};const Cd=function(e={}){return ke`<template role="checkbox" aria-checked="${e=>e.indeterminate?"mixed":e.checked}" aria-required="${e=>e.required}" aria-disabled="${e=>e.disabled}" tabindex="${e=>e.disabled?null:0}" @keypress="${(e,t)=>e.keypressHandler(t.event)}" @click="${(e,t)=>e.clickHandler(t.event)}"><div part="control" class="control"><slot name="checked-indicator">${pt(e.checkedIndicator)}</slot><slot name="indeterminate-indicator">${pt(e.indeterminateIndicator)}</slot></div><label part="label" class="${e=>e.defaultSlottedNodes&&e.defaultSlottedNodes.length?"label":"label label__hidden"}"><slot ${Ne("defaultSlottedNodes")}></slot></label></template>`}({checkedIndicator:ke.partial('\n    <div class="checked-indicator">\n        <svg fill="currentColor"\n            aria-hidden="true"\n            width="1em"\n            height="1em"\n            viewBox="0 0 12 12"\n            xmlns="http://www.w3.org/2000/svg">\n                <path d="M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04Z" fill="currentColor">\n                </path>\n        </svg>\n    </div>\n'),indeterminateIndicator:ke.partial('\n    <div class="indeterminate-indicator"></div>\n')}),Nd=j`
   ${bt("inline-flex")}
   :host{align-items:center;outline:none;user-select:none;vertical-align:middle;cursor:pointer;font-family:${Bs};font-size:${Cs};line-height:${Vs};color:${Jt};position:relative}:host(:focus-visible)::after{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${ks};outline:none;border:2px solid ${fa};box-shadow:inset 0 0 0 1px ${ka}}.control{position:relative;box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden;margin:${Fl} ${bl};fill:currentcolor;height:16px;width:16px;border:${ll} solid ${Wr};border-radius:${fs};outline:none}.label{align-self:center;cursor:inherit;padding-inline:${bl};padding-bottom:${Fl};padding-top:${Fl}}.label__hidden{display:none;visibility:hidden}.checked-indicator{display:flex;align-items:center;justify-content:center;color:${"var(--colorNeutralForegroundInverted)"};font-size:12px;margin:auto;opacity:0}.indeterminate-indicator{position:absolute;width:8px;height:8px;border-radius:${fs};background-color:${"var(--colorCompoundBrandForeground1)"};opacity:0}:host(:hover){color:${qt}}:host(:hover) .control{border-color:${"var(--colorNeutralStrokeAccessibleHover)"}}:host(:hover) .indeterminate-indicator{background-color:${"var(--colorCompoundBrandForeground1Hover)"}}:host(:active) .control{border-color:${"var(--colorNeutralStrokeAccessiblePressed)"}}:host(:active) .indeterminate-indicator{background-color:${"var(--colorCompoundBrandForeground1Pressed)"}}:host([aria-checked='true']),:host([aria-checked='mixed']),:host(:active){color:${Vt}}:host([aria-checked='true']) .control{background-color:${Er}}:host([aria-checked='true']:hover) .control{border-color:${"var(--colorCompoundBrandStrokeHover)"};background-color:${"var(--colorCompoundBrandBackgroundHover)"}}:host([aria-checked='true']:active) .control{background-color:${"var(--colorCompoundBrandBackgroundPressed)"}}:host([aria-checked='mixed']:hover) .control{border-color:${"var(--colorCompoundBrandStrokeHover)"}}:host([aria-checked='true']) .checked-indicator,:host([aria-checked='mixed']) .indeterminate-indicator{opacity:1}:host([aria-checked='true']) .control,:host([aria-checked='mixed']) .control{border-color:${"var(--colorCompoundBrandStroke)"}}:host([aria-checked='mixed']:active) .control,:host([aria-checked='true']:active) .control{border-color:${"var(--colorCompoundBrandStrokePressed)"}}:host([label-position='before']){flex-direction:row-reverse}:host([label-position='before']) .label{padding-inline:${bl} ${gl};padding-top:${Fl};padding-bottom:${Fl}}:host([size='large']) .control{width:20px;height:20px}:host([size='large']) .checked-indicator{font-size:16px;height:20px}:host([aria-checked='mixed'][size='large']) .indeterminate-indicator{height:10px;width:10px}:host([shape='circular']) .control,:host([shape='circular']) .indeterminate-indicator{border-radius:${$s}}:host([disabled]) .control,:host([aria-checked='mixed'][disabled]) .control,:host([aria-checked='true'][disabled]) .control{background-color:${"var(--colorTransparentBackgroundHover)"};border-color:${pa}}:host([aria-checked='true'][disabled]) .checked-indicator,:host([disabled]) ::slotted([slot='start']),:host([disabled]) .label,:host([aria-checked='mixed'][disabled]) .label,:host([aria-checked='true'][disabled]) .label{color:${so}}:host([disabled]) .indeterminate-indicator{background-color:${so}}`,Id=wd.compose({name:Et.prefix+"-checkbox",template:Cd,styles:Nd});class Ad extends dd{}const Td=nc,zd=ic,Ld=sc;const Od=function(e={}){return ke`<template ?disabled="${e=>e.disabled}" tabindex="${e=>e.disabled?-1:0}">${wt(e)}<span class="content" part="content"><slot ${Ne("defaultSlottedContent")}></slot><slot name="description"></slot></span>${Bt(e)}</template>`}(),Hd=j`

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fluentui/web-components",
   "description": "A library of Fluent Web Components",
-  "version": "3.0.0-beta.12",
+  "version": "3.0.0-beta.13",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"