@fluentui/web-components 3.0.0-beta.69 → 3.0.0-beta.70

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Tue, 15 Oct 2024 04:07:37 GMT and should not be manually modified.
+This log was last generated on Fri, 25 Oct 2024 20:54:28 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-beta.70](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.70)
+
+Fri, 25 Oct 2024 20:54:28 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.69..@fluentui/web-components_v3.0.0-beta.70)
+
+### Changes
+
+- fix: move proper menu positioning for split button into component css ([PR #33140](https://github.com/microsoft/fluentui/pull/33140) by machi@microsoft.com)
+- fix: change to new css anchor positioning properties ([PR #33139](https://github.com/microsoft/fluentui/pull/33139) by machi@microsoft.com)
+
 ## [3.0.0-beta.69](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.69)
 
-Tue, 15 Oct 2024 04:07:37 GMT 
+Tue, 15 Oct 2024 04:07:48 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.68..@fluentui/web-components_v3.0.0-beta.69)
 
 ### Changes

package/dist/esm/menu/menu.styles.js

@@ -12,15 +12,19 @@ export const styles = css `
   }
 
   ::slotted([popover]) {
-    inset-area: block-end span-inline-end;
     margin: 0;
     max-height: var(--menu-max-height, auto);
     position-anchor: --menu-trigger;
-    position-try-options: flip-block;
+    position-area: block-end span-inline-end;
+    position-try-fallbacks: flip-block;
     position: absolute;
     z-index: 1;
   }
 
+  :host([split]) ::slotted([popover]) {
+    position-area: block-end span-inline-start;
+  }
+
   ::slotted([popover]:popover-open) {
     inset: unset;
   }

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

@@ -1 +1 @@
-{"version":3,"file":"menu.styles.js","sourceRoot":"","sources":["../../../src/menu/menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEjF;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBA6BF,eAAe,UAAU,mBAAmB;;;;;;;;;;;yBAW5C,eAAe;;;;;;;;CAQvC,CAAC"}
+{"version":3,"file":"menu.styles.js","sourceRoot":"","sources":["../../../src/menu/menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEjF;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAiCF,eAAe,UAAU,mBAAmB;;;;;;;;;;;yBAW5C,eAAe;;;;;;;;CAQvC,CAAC"}

package/dist/esm/menu-item/menu-item.styles.js

@@ -130,12 +130,12 @@ export const styles = css `
     }
 
     ::slotted([popover]) {
-      inset-area: inline-end span-block-end;
       margin: 0;
       max-height: var(--menu-max-height, auto);
       position: absolute;
       position-anchor: --menu-trigger;
-      position-try-options: flip-inline, inset-area(block-start);
+      position-area: inline-end span-block-end;
+      position-try-fallbacks: flip-inline;
       z-index: 1;
     }
 

package/dist/web-components.js

@@ -7992,7 +7992,7 @@ const submenuState = css.partial`:is([state--submenu], :state(submenu))`;
 const styles$i = css`
   ${display("grid")}
 
-  :host{--indent:0;align-items:center;background:${colorNeutralBackground1};border-radius:${borderRadiusMedium};color:${colorNeutralForeground2};contain:layout;cursor:pointer;flex-shrink:0;font:${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};grid-gap:4px;grid-template-columns:20px 20px auto 20px;height:32px;overflow:visible;padding:0 10px}:host(:hover){background:${colorNeutralBackground1Hover};color:${colorNeutralForeground2Hover}}:host(:active){background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground2Pressed}}:host(:active) ::slotted([slot='start']){color:${colorCompoundBrandForeground1Pressed}}:host(${disabledState}){background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}:host(${disabledState}) ::slotted([slot='start']),:host(${disabledState}) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}:host(:focus-visible){border-radius:${borderRadiusMedium};outline:2px solid ${colorStrokeFocus2}}.content{white-space:nowrap;flex-grow:1;grid-column:auto / span 2;padding:0 2px}:host(:not(${checkedState})) .indicator,:host(:not(${checkedState})) ::slotted([slot='indicator']),:host(:not(${submenuState})) .submenu-glyph,:host(:not(${submenuState})) ::slotted([slot='submenu-glyph']){display:none}::slotted([slot='end']){color:${colorNeutralForeground3};font:${fontWeightRegular} ${fontSizeBase200} / ${lineHeightBase200} ${fontFamilyBase};white-space:nowrap}:host([data-indent='1']){--indent:1}:host([data-indent='2']){--indent:2;grid-template-columns:20px 20px auto auto}:host(${submenuState}){grid-template-columns:20px auto auto 20px}:host([data-indent='2']${submenuState}){grid-template-columns:20px 20px auto auto 20px}.indicator,::slotted([slot='indicator']){grid-column:1 / span 1;width:20px}::slotted([slot='start']){display:inline-flex;grid-column:calc(var(--indent)) / span 1}.content{grid-column:calc(var(--indent) + 1) / span 1}::slotted([slot='end']){grid-column:calc(var(--indent) + 2) / span 1;justify-self:end}.submenu-glyph,::slotted([slot='submenu-glyph']){grid-column:-2 / span 1;justify-self:end}@layer popover{:host{anchor-name:--menu-trigger;position:relative}::slotted([popover]){inset-area:inline-end span-block-end;margin:0;max-height:var(--menu-max-height,auto);position:absolute;position-anchor:--menu-trigger;position-try-options:flip-inline,inset-area(block-start);z-index:1}::slotted([popover]:not(:popover-open)){display:none}::slotted([popover]:popover-open){inset:unset}@supports not (anchor-name:--menu-trigger){::slotted([popover]){align-self:start}}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+  :host{--indent:0;align-items:center;background:${colorNeutralBackground1};border-radius:${borderRadiusMedium};color:${colorNeutralForeground2};contain:layout;cursor:pointer;flex-shrink:0;font:${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};grid-gap:4px;grid-template-columns:20px 20px auto 20px;height:32px;overflow:visible;padding:0 10px}:host(:hover){background:${colorNeutralBackground1Hover};color:${colorNeutralForeground2Hover}}:host(:active){background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground2Pressed}}:host(:active) ::slotted([slot='start']){color:${colorCompoundBrandForeground1Pressed}}:host(${disabledState}){background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}:host(${disabledState}) ::slotted([slot='start']),:host(${disabledState}) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}:host(:focus-visible){border-radius:${borderRadiusMedium};outline:2px solid ${colorStrokeFocus2}}.content{white-space:nowrap;flex-grow:1;grid-column:auto / span 2;padding:0 2px}:host(:not(${checkedState})) .indicator,:host(:not(${checkedState})) ::slotted([slot='indicator']),:host(:not(${submenuState})) .submenu-glyph,:host(:not(${submenuState})) ::slotted([slot='submenu-glyph']){display:none}::slotted([slot='end']){color:${colorNeutralForeground3};font:${fontWeightRegular} ${fontSizeBase200} / ${lineHeightBase200} ${fontFamilyBase};white-space:nowrap}:host([data-indent='1']){--indent:1}:host([data-indent='2']){--indent:2;grid-template-columns:20px 20px auto auto}:host(${submenuState}){grid-template-columns:20px auto auto 20px}:host([data-indent='2']${submenuState}){grid-template-columns:20px 20px auto auto 20px}.indicator,::slotted([slot='indicator']){grid-column:1 / span 1;width:20px}::slotted([slot='start']){display:inline-flex;grid-column:calc(var(--indent)) / span 1}.content{grid-column:calc(var(--indent) + 1) / span 1}::slotted([slot='end']){grid-column:calc(var(--indent) + 2) / span 1;justify-self:end}.submenu-glyph,::slotted([slot='submenu-glyph']){grid-column:-2 / span 1;justify-self:end}@layer popover{:host{anchor-name:--menu-trigger;position:relative}::slotted([popover]){margin:0;max-height:var(--menu-max-height,auto);position:absolute;position-anchor:--menu-trigger;position-area:inline-end span-block-end;position-try-fallbacks:flip-inline;z-index:1}::slotted([popover]:not(:popover-open)){display:none}::slotted([popover]:popover-open){inset:unset}@supports not (anchor-name:--menu-trigger){::slotted([popover]){align-self:start}}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host(${disabledState}),:host(${disabledState}) ::slotted([slot='start']),:host(${disabledState}) ::slotted([slot='end']){color:GrayText}`));
 
 const Checkmark16Filled = html.partial(`<svg class="indicator" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.05 3.49c.28.3.27.77-.04 1.06l-7.93 7.47A.85.85 0 014.9 12L2.22 9.28a.75.75 0 111.06-1.06l2.24 2.27 7.47-7.04a.75.75 0 011.06.04z" fill="currentColor"></path></svg>`);
@@ -8571,7 +8571,7 @@ __decorateClass$d([observable], Menu.prototype, "primaryAction", 2);
 const styles$g = css`
   ${display("inline-block")}
 
-  ::slotted([slot='trigger']){anchor-name:--menu-trigger}::slotted([popover]){inset-area:block-end span-inline-end;margin:0;max-height:var(--menu-max-height,auto);position-anchor:--menu-trigger;position-try-options:flip-block;position:absolute;z-index:1}::slotted([popover]:popover-open){inset:unset}::slotted([popover]:not(:popover-open)){display:none}:host([split]){display:inline-flex}:host([split]) ::slotted([slot='primary-action']){border-inline-end:${strokeWidthThin} solid ${colorNeutralStroke1};border-start-end-radius:0;border-end-end-radius:0}:host([split]) ::slotted([slot='primary-action']:focus-visible){z-index:1}:host([split]) ::slotted([slot='primary-action'][appearance='primary']){border-inline-end:${strokeWidthThin} solid white}:host([split]) ::slotted([slot='trigger']){border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}`;
+  ::slotted([slot='trigger']){anchor-name:--menu-trigger}::slotted([popover]){margin:0;max-height:var(--menu-max-height,auto);position-anchor:--menu-trigger;position-area:block-end span-inline-end;position-try-fallbacks:flip-block;position:absolute;z-index:1}:host([split]) ::slotted([popover]){position-area:block-end span-inline-start}::slotted([popover]:popover-open){inset:unset}::slotted([popover]:not(:popover-open)){display:none}:host([split]){display:inline-flex}:host([split]) ::slotted([slot='primary-action']){border-inline-end:${strokeWidthThin} solid ${colorNeutralStroke1};border-start-end-radius:0;border-end-end-radius:0}:host([split]) ::slotted([slot='primary-action']:focus-visible){z-index:1}:host([split]) ::slotted([slot='primary-action'][appearance='primary']){border-inline-end:${strokeWidthThin} solid white}:host([split]) ::slotted([slot='trigger']){border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}`;
 
 function menuTemplate() {
   return html`<template ?open-on-hover="${x => x.openOnHover}" ?open-on-context="${x => x.openOnContext}" ?close-on-scroll="${x => x.closeOnScroll}" ?persist-on-item-click="${x => x.persistOnItemClick}" @keydown="${(x, c) => x.menuKeydownHandler(c.event)}"><slot name="primary-action" ${ref("primaryAction")}></slot><slot name="trigger" ${slotted({

package/dist/web-components.min.js

@@ -448,14 +448,14 @@ const g=Object.freeze({prefix:"fluent",shadowRootMode:"open",registry:customElem
   `)}),Uu=ju.compose({name:`${g.prefix}-menu-button`,template:qu,styles:Ts});Uu.define(g.registry);const J={menuitem:"menuitem",menuitemcheckbox:"menuitemcheckbox",menuitemradio:"menuitemradio"};J.menuitem+"",J.menuitemcheckbox+"",J.menuitemradio+"";var Gu=Object.defineProperty,Wu=Object.getOwnPropertyDescriptor,eo=(o,t,e,s)=>{for(var i=s>1?void 0:s?Wu(t,e):t,r=o.length-1,n;r>=0;r--)(n=o[r])&&(i=(s?n(t,e,i):n(i))||i);return s&&i&&Gu(t,e,i),i};const Xu=()=>o=>o.nodeType===1&&o.elementInternals.role==="menu";class At extends w{constructor(){super(...arguments),this.elementInternals=this.attachInternals(),this.role=J.menuitem,this.checked=!1,this.handleMenuItemKeyDown=t=>{if(t.defaultPrevented)return!1;switch(t.key){case ss:case ni:return this.invoke(),!1;case ts:return this.disabled||(this.submenu?.togglePopover(!0),this.submenu?.focus()),!1;case Jo:return this.parentElement?.hasAttribute("popover")&&(this.parentElement.togglePopover(!1),this.parentElement.parentElement?.focus()),!1}return!0},this.handleMenuItemClick=t=>(t.defaultPrevented||this.disabled||this.invoke(),!1),this.handleMouseOver=t=>(this.disabled||this.submenu?.togglePopover(!0),!1),this.handleMouseOut=t=>(this.contains(document.activeElement)||this.submenu?.togglePopover(!1),!1),this.toggleHandler=t=>{t instanceof ToggleEvent&&t.newState==="open"&&(this.setAttribute("tabindex","-1"),this.elementInternals.ariaExpanded="true",this.setSubmenuPosition()),t instanceof ToggleEvent&&t.newState==="closed"&&(this.elementInternals.ariaExpanded="false",this.setAttribute("tabindex","0"))},this.invoke=()=>{if(!this.disabled)switch(this.role){case J.menuitemcheckbox:this.checked=!this.checked;break;case J.menuitem:if(this.submenu){this.submenu.togglePopover(!0),this.submenu.focus();break}this.$emit("change");break;case J.menuitemradio:this.checked||(this.checked=!0);break}},this.setSubmenuPosition=()=>{if(!CSS.supports("anchor-name","--anchor")&&this.submenu){const t=this.getBoundingClientRect(),e=this.submenu.getBoundingClientRect(),s=getComputedStyle(this).direction==="ltr"?"right":"left";if(t.width+e.width>window.innerWidth*.75){this.submenu.style.translate="0 -100%";return}if(t[s]+e.width>window.innerWidth){this.submenu.style.translate="-100% 0";return}this.submenu.style.translate=`${t.width-8}px 0`}}}disabledChanged(t,e){this.elementInternals.ariaDisabled=e?`${e}`:null,c(this.elementInternals,"disabled",e)}roleChanged(t,e){this.elementInternals.role=e??J.menuitem}checkedChanged(t,e){const s=this.role!==J.menuitem;this.elementInternals.ariaChecked=s?`${!!e}`:null,c(this.elementInternals,"checked",s?e:!1),this.$fastController.isConnected&&this.$emit("change",e,{bubbles:!0})}slottedSubmenuChanged(t,e){this.submenu?.removeEventListener("toggle",this.toggleHandler),e.length?(this.submenu=e[0],this.submenu.toggleAttribute("popover",!0),this.submenu.addEventListener("toggle",this.toggleHandler),this.elementInternals.ariaHasPopup="menu",c(this.elementInternals,"submenu",!0)):(this.elementInternals.ariaHasPopup=null,c(this.elementInternals,"submenu",!1))}connectedCallback(){super.connectedCallback(),this.elementInternals.role=this.role??J.menuitem,this.elementInternals.ariaChecked=this.role!==J.menuitem?`${!!this.checked}`:null}}eo([a({mode:"boolean"})],At.prototype,"disabled",2),eo([a],At.prototype,"role",2),eo([a({mode:"boolean"})],At.prototype,"checked",2),eo([a({mode:"boolean"})],At.prototype,"hidden",2),eo([v],At.prototype,"slottedSubmenu",2),eo([v],At.prototype,"submenu",2),Xt(At,Gt);const Os=l.partial`:is([state--submenu], :state(submenu))`,Ku=l`
   ${S("grid")}
 
-  :host{--indent:0;align-items:center;background:${O};border-radius:${P};color:${Vt};contain:layout;cursor:pointer;flex-shrink:0;font:${M} ${E} / ${D} ${$};grid-gap:4px;grid-template-columns:20px 20px auto 20px;height:32px;overflow:visible;padding:0 10px}:host(:hover){background:${fi};color:${hs}}:host(:active){background-color:${an};color:${us}}:host(:active) ::slotted([slot='start']){color:${Il}}:host(${F}){background-color:${je};color:${B}}:host(${F}) ::slotted([slot='start']),:host(${F}) ::slotted([slot='end']){color:${B}}:host(:focus-visible){border-radius:${P};outline:2px solid ${Dt}}.content{white-space:nowrap;flex-grow:1;grid-column:auto / span 2;padding:0 2px}:host(:not(${y})) .indicator,:host(:not(${y})) ::slotted([slot='indicator']),:host(:not(${Os})) .submenu-glyph,:host(:not(${Os})) ::slotted([slot='submenu-glyph']){display:none}::slotted([slot='end']){color:${ut};font:${M} ${q} / ${it} ${$};white-space:nowrap}:host([data-indent='1']){--indent:1}:host([data-indent='2']){--indent:2;grid-template-columns:20px 20px auto auto}:host(${Os}){grid-template-columns:20px auto auto 20px}:host([data-indent='2']${Os}){grid-template-columns:20px 20px auto auto 20px}.indicator,::slotted([slot='indicator']){grid-column:1 / span 1;width:20px}::slotted([slot='start']){display:inline-flex;grid-column:calc(var(--indent)) / span 1}.content{grid-column:calc(var(--indent) + 1) / span 1}::slotted([slot='end']){grid-column:calc(var(--indent) + 2) / span 1;justify-self:end}.submenu-glyph,::slotted([slot='submenu-glyph']){grid-column:-2 / span 1;justify-self:end}@layer popover{:host{anchor-name:--menu-trigger;position:relative}::slotted([popover]){inset-area:inline-end span-block-end;margin:0;max-height:var(--menu-max-height,auto);position:absolute;position-anchor:--menu-trigger;position-try-options:flip-inline,inset-area(block-start);z-index:1}::slotted([popover]:not(:popover-open)){display:none}::slotted([popover]:popover-open){inset:unset}@supports not (anchor-name:--menu-trigger){::slotted([popover]){align-self:start}}}`.withBehaviors(Q(l`
+  :host{--indent:0;align-items:center;background:${O};border-radius:${P};color:${Vt};contain:layout;cursor:pointer;flex-shrink:0;font:${M} ${E} / ${D} ${$};grid-gap:4px;grid-template-columns:20px 20px auto 20px;height:32px;overflow:visible;padding:0 10px}:host(:hover){background:${fi};color:${hs}}:host(:active){background-color:${an};color:${us}}:host(:active) ::slotted([slot='start']){color:${Il}}:host(${F}){background-color:${je};color:${B}}:host(${F}) ::slotted([slot='start']),:host(${F}) ::slotted([slot='end']){color:${B}}:host(:focus-visible){border-radius:${P};outline:2px solid ${Dt}}.content{white-space:nowrap;flex-grow:1;grid-column:auto / span 2;padding:0 2px}:host(:not(${y})) .indicator,:host(:not(${y})) ::slotted([slot='indicator']),:host(:not(${Os})) .submenu-glyph,:host(:not(${Os})) ::slotted([slot='submenu-glyph']){display:none}::slotted([slot='end']){color:${ut};font:${M} ${q} / ${it} ${$};white-space:nowrap}:host([data-indent='1']){--indent:1}:host([data-indent='2']){--indent:2;grid-template-columns:20px 20px auto auto}:host(${Os}){grid-template-columns:20px auto auto 20px}:host([data-indent='2']${Os}){grid-template-columns:20px 20px auto auto 20px}.indicator,::slotted([slot='indicator']){grid-column:1 / span 1;width:20px}::slotted([slot='start']){display:inline-flex;grid-column:calc(var(--indent)) / span 1}.content{grid-column:calc(var(--indent) + 1) / span 1}::slotted([slot='end']){grid-column:calc(var(--indent) + 2) / span 1;justify-self:end}.submenu-glyph,::slotted([slot='submenu-glyph']){grid-column:-2 / span 1;justify-self:end}@layer popover{:host{anchor-name:--menu-trigger;position:relative}::slotted([popover]){margin:0;max-height:var(--menu-max-height,auto);position:absolute;position-anchor:--menu-trigger;position-area:inline-end span-block-end;position-try-fallbacks:flip-inline;z-index:1}::slotted([popover]:not(:popover-open)){display:none}::slotted([popover]:popover-open){inset:unset}@supports not (anchor-name:--menu-trigger){::slotted([popover]){align-self:start}}}`.withBehaviors(Q(l`
     :host(${F}),:host(${F}) ::slotted([slot='start']),:host(${F}) ::slotted([slot='end']){color:GrayText}`)),Yu=f.partial('<svg class="indicator" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.05 3.49c.28.3.27.77-.04 1.06l-7.93 7.47A.85.85 0 014.9 12L2.22 9.28a.75.75 0 111.06-1.06l2.24 2.27 7.47-7.04a.75.75 0 011.06.04z" fill="currentColor"></path></svg>'),Qu=f.partial('<svg class="submenu-glyph" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5.74 3.2a.75.75 0 00-.04 1.06L9.23 8 5.7 11.74a.75.75 0 101.1 1.02l4-4.25a.75.75 0 000-1.02l-4-4.25a.75.75 0 00-1.06-.04z" fill="currentColor"></path></svg>');function Zu(o={}){return f`<template @keydown="${(t,e)=>t.handleMenuItemKeyDown(e.event)}" @click="${(t,e)=>t.handleMenuItemClick(e.event)}" @mouseover="${(t,e)=>t.handleMouseOver(e.event)}" @mouseout="${(t,e)=>t.handleMouseOut(e.event)}" @toggle="${(t,e)=>t.toggleHandler(e.event)}"><slot name="indicator">${yt(o.indicator)}</slot>${Wt(o)}<div part="content" class="content"><slot></slot></div>${le(o)}<slot name="submenu-glyph">${yt(o.submenuGlyph)}</slot><slot name="submenu" ${ot({property:"slottedSubmenu",filter:Xu()})}></slot></template>`}const Ju=Zu({indicator:Yu,submenuGlyph:Qu}),tp=At.compose({name:`${g.prefix}-menu-item`,template:Ju,styles:Ku});tp.define(g.registry);var ep=Object.defineProperty,op=Object.getOwnPropertyDescriptor,sp=(o,t,e,s)=>{for(var i=s>1?void 0:s?op(t,e):t,r=o.length-1,n;r>=0;r--)(n=o[r])&&(i=(s?n(t,e,i):n(i))||i);return s&&i&&ep(t,e,i),i};const Hi=class Ki extends w{constructor(){super(),this.elementInternals=this.attachInternals(),this.focusIndex=-1,this.isNestedMenu=()=>this.parentElement!==null&&Zr(this.parentElement)&&this.parentElement.getAttribute("role")==="menuitem",this.handleFocusOut=t=>{if(!this.contains(t.relatedTarget)&&this.menuItems!==void 0){const e=this.menuItems.findIndex(this.isFocusableElement);this.menuItems[this.focusIndex].setAttribute("tabindex","-1"),this.menuItems[e].setAttribute("tabindex","0"),this.focusIndex=e}},this.handleItemFocus=t=>{const e=t.target;this.menuItems!==void 0&&e!==this.menuItems[this.focusIndex]&&(this.menuItems[this.focusIndex].setAttribute("tabindex","-1"),this.focusIndex=this.menuItems.indexOf(e),e.setAttribute("tabindex","0"))},this.changedMenuItemHandler=t=>{if(this.menuItems===void 0)return;const e=t.target,s=this.menuItems.indexOf(e);if(s!==-1&&e.role==="menuitemradio"&&e.checked===!0){for(let r=s-1;r>=0;--r){const n=this.menuItems[r],u=n.getAttribute("role");if(u===J.menuitemradio&&(n.checked=!1),u==="separator")break}const i=this.menuItems.length-1;for(let r=s+1;r<=i;++r){const n=this.menuItems[r],u=n.getAttribute("role");if(u===J.menuitemradio&&(n.checked=!1),u==="separator")break}}},this.isMenuItemElement=t=>t instanceof At||Zr(t)&&t.getAttribute("role")in Ki.focusableElementRoles,this.isFocusableElement=t=>this.isMenuItemElement(t),this.elementInternals.role="menu"}itemsChanged(t,e){this.$fastController.isConnected&&this.menuItems!==void 0&&this.setItems()}connectedCallback(){super.connectedCallback(),Ot.enqueue(()=>{this.setItems()}),this.addEventListener("change",this.changedMenuItemHandler)}disconnectedCallback(){super.disconnectedCallback(),this.removeItemListeners(),this.menuItems=void 0,this.removeEventListener("change",this.changedMenuItemHandler)}focus(){this.setFocus(0,1)}handleMenuKeyDown(t){if(!(t.defaultPrevented||this.menuItems===void 0))switch(t.key){case Zo:this.setFocus(this.focusIndex+1,1);return;case es:this.setFocus(this.focusIndex-1,-1);return;case os:this.setFocus(this.menuItems.length-1,-1);return;case is:this.setFocus(0,1);return;default:return!0}}removeItemListeners(t=this.items){t.forEach(e=>{e.removeEventListener("focus",this.handleItemFocus),m.getNotifier(e).unsubscribe(this,"hidden")})}static elementIndent(t){const e=t.getAttribute("role"),s=t.querySelector("[slot=start]");return e&&e!==J.menuitem?s?2:1:s?1:0}setItems(){const t=Array.from(this.children);this.removeItemListeners(t),t.forEach(n=>m.getNotifier(n).subscribe(this,"hidden"));const e=t.filter(n=>!n.hasAttribute("hidden"));this.menuItems=e;const s=this.menuItems.filter(this.isMenuItemElement);s.length&&(this.focusIndex=0),s.forEach((n,u)=>{n.setAttribute("tabindex",u===0?"0":"-1"),n.addEventListener("focus",this.handleItemFocus)});const i=this.menuItems?.filter(this.isMenuItemElement),r=i?.reduce((n,u)=>{const p=Ki.elementIndent(u);return Math.max(n,p)},0);i?.forEach(n=>{n instanceof At&&n.setAttribute("data-indent",`${r}`)})}handleChange(t,e){e==="hidden"&&this.setItems()}setFocus(t,e){if(this.menuItems!==void 0)for(;t>=0&&t<this.menuItems.length;){const s=this.menuItems[t];if(this.isFocusableElement(s)){this.focusIndex>-1&&this.menuItems.length>=this.focusIndex-1&&this.menuItems[this.focusIndex].setAttribute("tabindex","-1"),this.focusIndex=t,s.setAttribute("tabindex","0"),s.focus();break}t+=e}}};Hi.focusableElementRoles=J,sp([v],Hi.prototype,"items",2);let ip=Hi;const rp=l`
   ${S("flex")}
 
   :host{flex-direction:column;height:fit-content;max-width:300px;min-width:160px;width:auto;background-color:${O};border:1px solid ${pt};border-radius:${P};box-shadow:${Vn};padding:4px;row-gap:2px}`;function np(){return f`<template slot="${o=>o.slot?o.slot:o.isNestedMenu()?"submenu":void 0}" @keydown="${(o,t)=>o.handleMenuKeyDown(t.event)}" @focusout="${(o,t)=>o.handleFocusOut(t.event)}"><slot ${ot("items")}></slot></template>`}const ap=np(),lp=ip.compose({name:`${g.prefix}-menu-list`,template:ap,styles:rp});lp.define(g.registry);var cp=Object.defineProperty,dp=Object.getOwnPropertyDescriptor,fe=(o,t,e,s)=>{for(var i=s>1?void 0:s?dp(t,e):t,r=o.length-1,n;r>=0;r--)(n=o[r])&&(i=(s?n(t,e,i):n(i))||i);return s&&i&&cp(t,e,i),i};class ie extends w{constructor(){super(...arguments),this.slottedMenuList=[],this.slottedTriggers=[],this._open=!1,this.toggleMenu=()=>{this._menuList?.togglePopover(!this._open)},this.closeMenu=t=>{t?.target instanceof At&&(t.target.getAttribute("role")===J.menuitemcheckbox||t.target.getAttribute("role")===J.menuitemradio)||(this._menuList?.togglePopover(!1),this.closeOnScroll&&document.removeEventListener("scroll",this.closeMenu))},this.openMenu=t=>{this._menuList?.togglePopover(!0),t&&this.openOnContext&&t.preventDefault(),this.closeOnScroll&&document.addEventListener("scroll",this.closeMenu)},this.toggleHandler=t=>{if(t.type==="toggle"&&t.newState){const e=t.newState==="open";this._trigger?.setAttribute("aria-expanded",`${e}`),this._open=e,this.focusMenuList()}},this.triggerKeydownHandler=t=>{if(t.defaultPrevented)return;switch(t.key){case ni:case ss:t.preventDefault(),this.toggleMenu();break;default:return!0}},this.documentClickHandler=t=>{t.composedPath().some(e=>e===this._trigger||e===this._menuList)||this.closeMenu()}}connectedCallback(){super.connectedCallback(),Ot.enqueue(()=>this.setComponent())}disconnectedCallback(){super.disconnectedCallback(),this.removeListeners()}setComponent(){this.$fastController.isConnected&&this.slottedMenuList.length&&this.slottedTriggers.length&&(this._trigger=this.slottedTriggers[0],this._menuList=this.slottedMenuList[0],this._trigger.setAttribute("aria-haspopup","true"),this._trigger.setAttribute("aria-expanded",`${this._open}`),this._menuList.setAttribute("popover",this.openOnContext?"manual":""),this.addListeners())}focusMenuList(){Ot.enqueue(()=>{this._menuList.focus()})}focusTrigger(){Ot.enqueue(()=>{this._trigger.focus()})}openOnHoverChanged(t,e){e?this._trigger?.addEventListener("mouseover",this.openMenu):this._trigger?.removeEventListener("mouseover",this.openMenu)}persistOnItemClickChanged(t,e){e?this._menuList?.removeEventListener("change",this.closeMenu):this._menuList?.addEventListener("change",this.closeMenu)}openOnContextChanged(t,e){e?this._trigger?.addEventListener("contextmenu",this.openMenu):this._trigger?.removeEventListener("contextmenu",this.openMenu)}closeOnScrollChanged(t,e){e?document.addEventListener("scroll",this.closeMenu):document.removeEventListener("scroll",this.closeMenu)}addListeners(){this._menuList?.addEventListener("toggle",this.toggleHandler),this._trigger?.addEventListener("keydown",this.triggerKeydownHandler),this.persistOnItemClick||this._menuList?.addEventListener("change",this.closeMenu),this.openOnHover?this._trigger?.addEventListener("mouseover",this.openMenu):this.openOnContext?(this._trigger?.addEventListener("contextmenu",this.openMenu),document.addEventListener("click",this.documentClickHandler)):this._trigger?.addEventListener("click",this.toggleMenu)}removeListeners(){this._menuList?.removeEventListener("toggle",this.toggleHandler),this._trigger?.removeEventListener("keydown",this.triggerKeydownHandler),this.persistOnItemClick||this._menuList?.removeEventListener("change",this.closeMenu),this.openOnHover&&this._trigger?.removeEventListener("mouseover",this.openMenu),this.openOnContext?(this._trigger?.removeEventListener("contextmenu",this.openMenu),document.removeEventListener("click",this.documentClickHandler)):this._trigger?.removeEventListener("click",this.toggleMenu)}menuKeydownHandler(t){if(t.defaultPrevented)return;switch(t.key){case Za:t.preventDefault(),this._open&&(this.closeMenu(),this.focusTrigger());break;case Ja:if(this._open&&this.closeMenu(),t.shiftKey&&t.composedPath()[0]!==this._trigger&&t.composedPath()[0].assignedSlot!==this.primaryAction)this.focusTrigger();else if(t.shiftKey)return!0;default:return!0}}}fe([a({attribute:"open-on-hover",mode:"boolean"})],ie.prototype,"openOnHover",2),fe([a({attribute:"open-on-context",mode:"boolean"})],ie.prototype,"openOnContext",2),fe([a({attribute:"close-on-scroll",mode:"boolean"})],ie.prototype,"closeOnScroll",2),fe([a({attribute:"persist-on-item-click",mode:"boolean"})],ie.prototype,"persistOnItemClick",2),fe([a({mode:"boolean"})],ie.prototype,"split",2),fe([v],ie.prototype,"slottedMenuList",2),fe([v],ie.prototype,"slottedTriggers",2),fe([v],ie.prototype,"primaryAction",2);const hp=l`
   ${S("inline-block")}
 
-  ::slotted([slot='trigger']){anchor-name:--menu-trigger}::slotted([popover]){inset-area:block-end span-inline-end;margin:0;max-height:var(--menu-max-height,auto);position-anchor:--menu-trigger;position-try-options:flip-block;position:absolute;z-index:1}::slotted([popover]:popover-open){inset:unset}::slotted([popover]:not(:popover-open)){display:none}:host([split]){display:inline-flex}:host([split]) ::slotted([slot='primary-action']){border-inline-end:${H} solid ${ee};border-start-end-radius:0;border-end-end-radius:0}:host([split]) ::slotted([slot='primary-action']:focus-visible){z-index:1}:host([split]) ::slotted([slot='primary-action'][appearance='primary']){border-inline-end:${H} solid white}:host([split]) ::slotted([slot='trigger']){border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}`;function up(){return f`<template ?open-on-hover="${o=>o.openOnHover}" ?open-on-context="${o=>o.openOnContext}" ?close-on-scroll="${o=>o.closeOnScroll}" ?persist-on-item-click="${o=>o.persistOnItemClick}" @keydown="${(o,t)=>o.menuKeydownHandler(t.event)}"><slot name="primary-action" ${$t("primaryAction")}></slot><slot name="trigger" ${ot({property:"slottedTriggers",filter:_e()})}></slot><slot ${ot({property:"slottedMenuList",filter:_e()})}></slot></template>`}const pp=up(),gp=ie.compose({name:`${g.prefix}-menu`,template:pp,styles:hp});gp.define(g.registry);var bp=Object.defineProperty,fp=Object.getOwnPropertyDescriptor,Ri=(o,t,e,s)=>{for(var i=s>1?void 0:s?fp(t,e):t,r=o.length-1,n;r>=0;r--)(n=o[r])&&(i=(s?n(t,e,i):n(i))||i);return s&&i&&bp(t,e,i),i};class Ms extends w{constructor(){super(),this.elementInternals=this.attachInternals(),this.dismissMessageBar=()=>{this.$emit("dismiss",{})},this.elementInternals.role="status"}shapeChanged(t,e){t&&c(this.elementInternals,t,!1),e&&c(this.elementInternals,e,!0)}layoutChanged(t,e){t&&c(this.elementInternals,t,!1),e&&c(this.elementInternals,e,!0)}intentChanged(t,e){t&&c(this.elementInternals,t,!1),e&&c(this.elementInternals,e,!0)}}Ri([a],Ms.prototype,"shape",2),Ri([a],Ms.prototype,"layout",2),Ri([a],Ms.prototype,"intent",2);const mp=l`
+  ::slotted([slot='trigger']){anchor-name:--menu-trigger}::slotted([popover]){margin:0;max-height:var(--menu-max-height,auto);position-anchor:--menu-trigger;position-area:block-end span-inline-end;position-try-fallbacks:flip-block;position:absolute;z-index:1}:host([split]) ::slotted([popover]){position-area:block-end span-inline-start}::slotted([popover]:popover-open){inset:unset}::slotted([popover]:not(:popover-open)){display:none}:host([split]){display:inline-flex}:host([split]) ::slotted([slot='primary-action']){border-inline-end:${H} solid ${ee};border-start-end-radius:0;border-end-end-radius:0}:host([split]) ::slotted([slot='primary-action']:focus-visible){z-index:1}:host([split]) ::slotted([slot='primary-action'][appearance='primary']){border-inline-end:${H} solid white}:host([split]) ::slotted([slot='trigger']){border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}`;function up(){return f`<template ?open-on-hover="${o=>o.openOnHover}" ?open-on-context="${o=>o.openOnContext}" ?close-on-scroll="${o=>o.closeOnScroll}" ?persist-on-item-click="${o=>o.persistOnItemClick}" @keydown="${(o,t)=>o.menuKeydownHandler(t.event)}"><slot name="primary-action" ${$t("primaryAction")}></slot><slot name="trigger" ${ot({property:"slottedTriggers",filter:_e()})}></slot><slot ${ot({property:"slottedMenuList",filter:_e()})}></slot></template>`}const pp=up(),gp=ie.compose({name:`${g.prefix}-menu`,template:pp,styles:hp});gp.define(g.registry);var bp=Object.defineProperty,fp=Object.getOwnPropertyDescriptor,Ri=(o,t,e,s)=>{for(var i=s>1?void 0:s?fp(t,e):t,r=o.length-1,n;r>=0;r--)(n=o[r])&&(i=(s?n(t,e,i):n(i))||i);return s&&i&&bp(t,e,i),i};class Ms extends w{constructor(){super(),this.elementInternals=this.attachInternals(),this.dismissMessageBar=()=>{this.$emit("dismiss",{})},this.elementInternals.role="status"}shapeChanged(t,e){t&&c(this.elementInternals,t,!1),e&&c(this.elementInternals,e,!0)}layoutChanged(t,e){t&&c(this.elementInternals,t,!1),e&&c(this.elementInternals,e,!0)}intentChanged(t,e){t&&c(this.elementInternals,t,!1),e&&c(this.elementInternals,e,!0)}}Ri([a],Ms.prototype,"shape",2),Ri([a],Ms.prototype,"layout",2),Ri([a],Ms.prototype,"intent",2);const mp=l`
   :host{display:grid;box-sizing:border-box;font-family:${$};font-size:${q};line-height:${it};width:100%;background:${bs};border:1px solid ${ee};padding-inline:${ft};border-radius:${P};min-height:36px;align-items:center;grid-template:'icon body actions dismiss' / auto 1fr auto auto;contain:layout style paint}:host(${po}){border-radius:0}:host(${xe}){background-color:${yn};border-color:${Rl}}:host(${we}){background-color:${xn};border-color:${Cn}}:host(${ui}){background-color:${bn};border-color:${mn}}:host(${fo}){grid-template-areas:'icon body dismiss'
       'actions actions actions';grid-template-columns:auto 1fr auto;grid-template-rows:auto auto 1fr;padding-block:${Xe};padding-inline:${ft}}.content{grid-area:body;max-width:520px;padding-block:${Xe};padding-inline:0}:host(${fo}) .content{padding:0}::slotted([slot='icon']){display:flex;grid-area:icon;flex-direction:column;align-items:center;color:${ut};margin-inline-end:${oe}}:host(${fo}) ::slotted([slot='icon']){align-items:start;height:100%}::slotted([slot='dismiss']){grid-area:dismiss}.actions{grid-area:actions;display:flex;justify-self:end;margin-inline-end:${oe};gap:${oe}}:host(${fo}) .actions{margin-block-start:${Xe};margin-inline-end:0}:host(${fo}) ::slotted([slot='dismiss']){align-items:start;height:100%;padding-block-start:${nt}}::slotted(*){font-size:inherit}`;function $p(){return f`<slot name="icon"></slot><div class="content"><slot></slot></div><div class="actions"><slot name="actions"></slot></div><slot name="dismiss"></slot>`}const vp=$p(),yp=Ms.compose({name:`${g.prefix}-message-bar`,template:vp,styles:mp,shadowOptions:{mode:g.shadowRootMode}});yp.define(g.registry);var kp=Object.defineProperty,xp=Object.getOwnPropertyDescriptor,Te=(o,t,e,s)=>{for(var i=s>1?void 0:s?xp(t,e):t,r=o.length-1,n;r>=0;r--)(n=o[r])&&(i=(s?n(t,e,i):n(i))||i);return s&&i&&kp(t,e,i),i};class oo extends w{constructor(){super(),this.elementInternals=this.attachInternals(),this.validationState=null,this.elementInternals.role="progressbar"}validationStateChanged(t,e){t&&c(this.elementInternals,`${t}`,!1),e&&c(this.elementInternals,`${e}`,!0)}valueChanged(t,e){this.elementInternals.ariaValueNow=typeof e=="number"?`${e}`:null}minChanged(t,e){this.elementInternals.ariaValueMin=typeof e=="number"?`${e}`:null}maxChanged(t,e){this.elementInternals.ariaValueMax=typeof e=="number"?`${e}`:null}get percentComplete(){const t=this.min??0,e=this.max??100,s=this.value??0,i=e-t;return i===0?0:Math.fround((s-t)/i*100)}}Te([a({attribute:"validation-state"})],oo.prototype,"validationState",2),Te([a({converter:st})],oo.prototype,"value",2),Te([a({converter:st})],oo.prototype,"min",2),Te([a({converter:st})],oo.prototype,"max",2),Te([ba],oo.prototype,"percentComplete",1);class ji extends oo{thicknessChanged(t,e){t&&c(this.elementInternals,`${t}`,!1),e&&c(this.elementInternals,`${e}`,!0)}shapeChanged(t,e){t&&c(this.elementInternals,`${t}`,!1),e&&c(this.elementInternals,`${e}`,!0)}}Te([a],ji.prototype,"thickness",2),Te([a],ji.prototype,"shape",2);const wp=l`
   ${S("block")}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fluentui/web-components",
   "description": "A library of Fluent Web Components",
-  "version": "3.0.0-beta.69",
+  "version": "3.0.0-beta.70",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
@@ -98,7 +98,7 @@
   },
   "dependencies": {
     "@microsoft/fast-web-utilities": "^6.0.0",
-    "@fluentui/tokens": "1.0.0-alpha.17",
+    "@fluentui/tokens": "1.0.0-alpha.18",
     "tabbable": "^6.2.0",
     "tslib": "^2.1.0"
   },