@fluentui/web-components 3.0.0-beta.18 → 3.0.0-beta.19

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Mon, 20 May 2024 04:06:59 GMT and should not be manually modified.
+This log was last generated on Tue, 21 May 2024 04:06:00 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-beta.19](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.19)
+
+Tue, 21 May 2024 04:06:00 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.18..@fluentui/web-components_v3.0.0-beta.19)
+
+### Changes
+
+- Use click() instead of press() in button keydownHandler ([PR #31428](https://github.com/microsoft/fluentui/pull/31428) by 863023+radium-v@users.noreply.github.com)
+
 ## [3.0.0-beta.18](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.18)
 
-Mon, 20 May 2024 04:06:59 GMT 
+Mon, 20 May 2024 04:07:06 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.17..@fluentui/web-components_v3.0.0-beta.18)
 
 ### Changes

package/dist/esm/button/button.js

@@ -175,7 +175,7 @@ export class Button extends FASTElement {
             return;
         }
         if (e.key === keyEnter || e.key === keySpace) {
-            this.press();
+            this.click();
             return;
         }
         return true;

package/dist/web-components.js

@@ -5650,7 +5650,7 @@ class Button extends FASTElement {
       return;
     }
     if (e.key === keyEnter || e.key === keySpace) {
-      this.press();
+      this.click();
       return;
     }
     return true;

package/dist/web-components.min.js

@@ -369,7 +369,7 @@ let hr;const gs="fast-kernel";try{if(document.currentScript)hr=document.currentS
   ${If}
   ${ch}
 `.withBehaviors(Te(g`
-    :host,:host([appearance='outline']),:host([appearance='tint']){border-color:CanvasText}`)),zf=Rt.compose({name:`${x.prefix}-badge`,template:lh,styles:ph});var Nf=Object.defineProperty,Lf=Object.getOwnPropertyDescriptor,K=(o,e,t,r)=>{for(var a=r>1?void 0:r?Lf(e,t):e,n=o.length-1,i;n>=0;n--)(i=o[n])&&(a=(r?i(e,t,a):i(a))||a);return r&&a&&Nf(e,t,a),a};class I extends S{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){t!==Qo.submit&&(this.formSubmissionFallbackControl?.remove(),this.shadowRoot?.querySelector('slot[name="internal"]')?.remove())}clickHandler(e){if(e&&this.disabledFocusable){e.stopImmediatePropagation();return}return this.press(),!0}connectedCallback(){super.connectedCallback(),this.elementInternals.ariaDisabled=`${!!this.disabledFocusable}`}createAndInsertFormSubmissionFallbackControl(){const e=this.formSubmissionFallbackControlSlot??document.createElement("slot");e.setAttribute("name","internal"),this.shadowRoot?.appendChild(e),this.formSubmissionFallbackControlSlot=e;const t=this.formSubmissionFallbackControl??document.createElement("button");t.style.display="none",t.setAttribute("type","submit"),t.setAttribute("slot","internal"),this.formNoValidate&&t.toggleAttribute("formnovalidate",!0),this.elementInternals.form?.id&&t.setAttribute("form",this.elementInternals.form.id),this.name&&t.setAttribute("name",this.name),this.value&&t.setAttribute("value",this.value),this.formAction&&t.setAttribute("formaction",this.formAction??""),this.formEnctype&&t.setAttribute("formenctype",this.formEnctype??""),this.formMethod&&t.setAttribute("formmethod",this.formMethod??""),this.formTarget&&t.setAttribute("formtarget",this.formTarget??""),this.append(t),this.formSubmissionFallbackControl=t}formDisabledCallback(e){this.disabled=e}keypressHandler(e){if(e&&this.disabledFocusable){e.stopImmediatePropagation();return}if(e.key===no||e.key===io){this.press();return}return!0}press(){switch(this.type){case Qo.reset:{this.resetForm();break}case Qo.submit:{this.submitForm();break}}}resetForm(){this.elementInternals.form?.reset()}submitForm(){if(!(!this.elementInternals.form||this.disabled||this.type!==Qo.submit)){if(!this.name&&!this.formAction&&!this.formEnctype&&!this.form&&!this.formMethod&&!this.formNoValidate&&!this.formTarget){this.elementInternals.form.requestSubmit();return}try{this.elementInternals.setFormValue(this.value??""),this.elementInternals.form.requestSubmit(this)}catch{this.createAndInsertFormSubmissionFallbackControl(),this.elementInternals.setFormValue(null),this.elementInternals.form.requestSubmit(this.formSubmissionFallbackControl)}}}}I.formAssociated=!0,K([s],I.prototype,"appearance",2),K([s({mode:"boolean"})],I.prototype,"autofocus",2),K([m],I.prototype,"defaultSlottedContent",2),K([s({mode:"boolean"})],I.prototype,"disabled",2),K([s({attribute:"disabled-focusable",mode:"boolean"})],I.prototype,"disabledFocusable",2),K([s({attribute:"formaction"})],I.prototype,"formAction",2),K([s({attribute:"form"})],I.prototype,"formAttribute",2),K([s({attribute:"formenctype"})],I.prototype,"formEnctype",2),K([s({attribute:"formmethod"})],I.prototype,"formMethod",2),K([s({attribute:"formnovalidate",mode:"boolean"})],I.prototype,"formNoValidate",2),K([s({attribute:"formtarget"})],I.prototype,"formTarget",2),K([s({attribute:"icon-only",mode:"boolean"})],I.prototype,"iconOnly",2),K([s],I.prototype,"name",2),K([s],I.prototype,"shape",2),K([s],I.prototype,"size",2),K([s],I.prototype,"type",2),K([s],I.prototype,"value",2),Ae(I,Ye);function Ki(o={}){return v`<template tabindex="${e=>e.disabled?-1:0}" @click="${(e,t)=>e.clickHandler(t.event)}" @keypress="${(e,t)=>e.keypressHandler(t.event)}">${Ze(o)}<span class="content" part="content"><slot ${Y("defaultSlottedContent")}></slot></span>${Qe(o)}</template>`}const gh=Ki(),ko=g`
+    :host,:host([appearance='outline']),:host([appearance='tint']){border-color:CanvasText}`)),zf=Rt.compose({name:`${x.prefix}-badge`,template:lh,styles:ph});var Nf=Object.defineProperty,Lf=Object.getOwnPropertyDescriptor,K=(o,e,t,r)=>{for(var a=r>1?void 0:r?Lf(e,t):e,n=o.length-1,i;n>=0;n--)(i=o[n])&&(a=(r?i(e,t,a):i(a))||a);return r&&a&&Nf(e,t,a),a};class I extends S{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){t!==Qo.submit&&(this.formSubmissionFallbackControl?.remove(),this.shadowRoot?.querySelector('slot[name="internal"]')?.remove())}clickHandler(e){if(e&&this.disabledFocusable){e.stopImmediatePropagation();return}return this.press(),!0}connectedCallback(){super.connectedCallback(),this.elementInternals.ariaDisabled=`${!!this.disabledFocusable}`}createAndInsertFormSubmissionFallbackControl(){const e=this.formSubmissionFallbackControlSlot??document.createElement("slot");e.setAttribute("name","internal"),this.shadowRoot?.appendChild(e),this.formSubmissionFallbackControlSlot=e;const t=this.formSubmissionFallbackControl??document.createElement("button");t.style.display="none",t.setAttribute("type","submit"),t.setAttribute("slot","internal"),this.formNoValidate&&t.toggleAttribute("formnovalidate",!0),this.elementInternals.form?.id&&t.setAttribute("form",this.elementInternals.form.id),this.name&&t.setAttribute("name",this.name),this.value&&t.setAttribute("value",this.value),this.formAction&&t.setAttribute("formaction",this.formAction??""),this.formEnctype&&t.setAttribute("formenctype",this.formEnctype??""),this.formMethod&&t.setAttribute("formmethod",this.formMethod??""),this.formTarget&&t.setAttribute("formtarget",this.formTarget??""),this.append(t),this.formSubmissionFallbackControl=t}formDisabledCallback(e){this.disabled=e}keypressHandler(e){if(e&&this.disabledFocusable){e.stopImmediatePropagation();return}if(e.key===no||e.key===io){this.click();return}return!0}press(){switch(this.type){case Qo.reset:{this.resetForm();break}case Qo.submit:{this.submitForm();break}}}resetForm(){this.elementInternals.form?.reset()}submitForm(){if(!(!this.elementInternals.form||this.disabled||this.type!==Qo.submit)){if(!this.name&&!this.formAction&&!this.formEnctype&&!this.form&&!this.formMethod&&!this.formNoValidate&&!this.formTarget){this.elementInternals.form.requestSubmit();return}try{this.elementInternals.setFormValue(this.value??""),this.elementInternals.form.requestSubmit(this)}catch{this.createAndInsertFormSubmissionFallbackControl(),this.elementInternals.setFormValue(null),this.elementInternals.form.requestSubmit(this.formSubmissionFallbackControl)}}}}I.formAssociated=!0,K([s],I.prototype,"appearance",2),K([s({mode:"boolean"})],I.prototype,"autofocus",2),K([m],I.prototype,"defaultSlottedContent",2),K([s({mode:"boolean"})],I.prototype,"disabled",2),K([s({attribute:"disabled-focusable",mode:"boolean"})],I.prototype,"disabledFocusable",2),K([s({attribute:"formaction"})],I.prototype,"formAction",2),K([s({attribute:"form"})],I.prototype,"formAttribute",2),K([s({attribute:"formenctype"})],I.prototype,"formEnctype",2),K([s({attribute:"formmethod"})],I.prototype,"formMethod",2),K([s({attribute:"formnovalidate",mode:"boolean"})],I.prototype,"formNoValidate",2),K([s({attribute:"formtarget"})],I.prototype,"formTarget",2),K([s({attribute:"icon-only",mode:"boolean"})],I.prototype,"iconOnly",2),K([s],I.prototype,"name",2),K([s],I.prototype,"shape",2),K([s],I.prototype,"size",2),K([s],I.prototype,"type",2),K([s],I.prototype,"value",2),Ae(I,Ye);function Ki(o={}){return v`<template tabindex="${e=>e.disabled?-1:0}" @click="${(e,t)=>e.clickHandler(t.event)}" @keypress="${(e,t)=>e.keypressHandler(t.event)}">${Ze(o)}<span class="content" part="content"><slot ${Y("defaultSlottedContent")}></slot></span>${Qe(o)}</template>`}const gh=Ki(),ko=g`
   ${F("inline-flex")}
 
   :host{--icon-spacing:${_e};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:${_};color:${O};border:${X} solid ${Je};padding:0 ${ot};min-width:96px;border-radius:${B};font-size:${P};font-family:${y};font-weight:${L};line-height:${A};transition-duration:${mo};transition-property:background,border,color;transition-timing-function:${$o};cursor:pointer;user-select:none}.content{display:inherit}:host(:hover){background-color:${lo};color:${Ao};border-color:${Dt}}:host(:hover:active){background-color:${Do};border-color:${ho};color:${Cr};outline-style:none}:host(:focus-visible){border-color:${me};outline:${ht}) solid ${me};box-shadow:${Ht},0 0 0 2px ${Se}}@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:${fe};min-height:24px;min-width:64px;padding:0 ${V};border-radius:${ge};font-size:${R};line-height:${se};font-weight:${T}}:host([size='small'][icon-only]){min-width:24px;max-width:24px}:host([size='large']){min-height:40px;border-radius:${qo};padding:0 ${ea};font-size:${ie};line-height:${ye}}: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:${Q}}:host([shape='square']),:host([shape='square']:focus-visible){border-radius:${Wo}}:host([appearance='primary']){background-color:${uo};color:${pe};border-color:transparent}:host([appearance='primary']:hover){background-color:${Oo}}:host([appearance='primary']:hover),:host([appearance='primary']:hover:active){border-color:transparent;color:${pe}}:host([appearance='primary']:hover:active){background-color:${Eo}}:host([appearance='primary']:focus-visible){border-color:${pe};box-shadow:${Xo},0 0 0 2px ${Se}}: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:${q}}:host([appearance='outline']:hover){background-color:${dt}}:host([appearance='outline']:hover:active){background-color:${Ft}}: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:${q}}:host([appearance='subtle']){background-color:${zr};color:${ne};border-color:transparent}:host([appearance='subtle']:hover){background-color:${co};color:${St};border-color:transparent}:host([appearance='subtle']:hover:active){background-color:${Ct};color:${Pt};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:${q};border-color:transparent}:host([appearance='subtle']:hover) ::slotted(svg){fill:${lt}}:host([appearance='subtle']:hover:active) ::slotted(svg){fill:${ct}}:host([appearance='transparent']){background-color:${q};color:${ne}}:host([appearance='transparent']:hover){background-color:${dt};color:${lt}}:host([appearance='transparent']:hover:active){background-color:${Ft};color:${ct}}: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:${q}}: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:${Tt};border-color:${Me};color:${k};cursor:not-allowed}`.withBehaviors(Te(g`

package/package.json

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