@fluentui/web-components 2.5.9 → 2.5.11

package/CHANGELOG.json

@@ -2,7 +2,37 @@
   "name": "@fluentui/web-components",
   "entries": [
     {
-      "date": "Thu, 05 Jan 2023 07:58:08 GMT",
+      "date": "Wed, 11 Jan 2023 07:49:04 GMT",
+      "tag": "@fluentui/web-components_v2.5.11",
+      "version": "2.5.11",
+      "comments": {
+        "patch": [
+          {
+            "author": "mgodbolt@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "854d1159c9a57d496f6db1ab9f20885136d20cc6",
+            "comment": "chore: upgrade version of storybook"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 10 Jan 2023 07:50:14 GMT",
+      "tag": "@fluentui/web-components_v2.5.10",
+      "version": "2.5.10",
+      "comments": {
+        "patch": [
+          {
+            "author": "jes@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "49ead1dcd8c34cf87b151e0c0cc7bd716260f22f",
+            "comment": "fix: layering zindex issue with sub menus"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 05 Jan 2023 07:59:57 GMT",
       "tag": "@fluentui/web-components_v2.5.9",
       "version": "2.5.9",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Thu, 05 Jan 2023 07:58:08 GMT and should not be manually modified.
+This log was last generated on Wed, 11 Jan 2023 07:49:04 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [2.5.11](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.5.11)
+
+Wed, 11 Jan 2023 07:49:04 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.5.10..@fluentui/web-components_v2.5.11)
+
+### Patches
+
+- chore: upgrade version of storybook ([PR #26259](https://github.com/microsoft/fluentui/pull/26259) by mgodbolt@microsoft.com)
+
+## [2.5.10](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.5.10)
+
+Tue, 10 Jan 2023 07:50:14 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.5.9..@fluentui/web-components_v2.5.10)
+
+### Patches
+
+- fix: layering zindex issue with sub menus ([PR #26260](https://github.com/microsoft/fluentui/pull/26260) by jes@microsoft.com)
+
 ## [2.5.9](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.5.9)
 
-Thu, 05 Jan 2023 07:58:08 GMT 
+Thu, 05 Jan 2023 07:59:57 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.5.8..@fluentui/web-components_v2.5.9)
 
 ### Patches

package/dist/esm/menu/menu.stories.js

@@ -10,7 +10,14 @@ const MenuTemplate = () => `
       Menu item 2
       <fluent-menu>
         <fluent-menu-item>Nested Menu item 2.1</fluent-menu-item>
-        <fluent-menu-item>Nested Menu item 2.2</fluent-menu-item>
+        <fluent-menu-item>
+          Nested Menu item 2.2
+          <fluent-menu>
+            <fluent-menu-item>Nested Menu item 2.2.1</fluent-menu-item>
+            <fluent-menu-item>Nested Menu item 2.2.2</fluent-menu-item>
+            <fluent-menu-item>Nested Menu item 2.2.3</fluent-menu-item>
+          </fluent-menu>
+        </fluent-menu-item>
         <fluent-menu-item>Nested Menu item 2.3</fluent-menu-item>
       </fluent-menu>
     </fluent-menu-item>

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

@@ -23,6 +23,7 @@ export const menuItemStyles = (context, definition) => css `
       cursor: pointer;
       border-radius: calc(${controlCornerRadius} * 1px);
       border: calc(${strokeWidth} * 1px) solid transparent;
+      position: relative;
     }
 
     :host(.indent-0) {
@@ -75,6 +76,7 @@ export const menuItemStyles = (context, definition) => css `
     :host(.expanded) {
       background: ${neutralFillStealthActive};
       color: ${neutralForegroundRest};
+      z-index: 2;
     }
 
     :host([disabled]) {

package/dist/web-components.js

@@ -21082,7 +21082,7 @@ const menuStyles = menuStyles$1;
 
 const menuItemStyles$1 = (context, definition) => css`
     ${display('grid')} :host{contain:layout;overflow:visible;${typeRampBase}
-      box-sizing:border-box;height:calc(${heightNumber} * 1px);grid-template-columns:minmax(32px,auto) 1fr minmax(32px,auto);grid-template-rows:auto;justify-items:center;align-items:center;padding:0;white-space:nowrap;color:${neutralForegroundRest};fill:currentcolor;cursor:pointer;border-radius:calc(${controlCornerRadius} * 1px);border:calc(${strokeWidth} * 1px) solid transparent}:host(.indent-0){grid-template-columns:auto 1fr minmax(32px,auto)}:host(.indent-0) .content{grid-column:1;grid-row:1;margin-inline-start:10px}:host(.indent-0) .expand-collapse-glyph-container{grid-column:5;grid-row:1}:host(.indent-2){grid-template-columns:minmax(32px,auto) minmax(32px,auto) 1fr minmax(32px,auto) minmax(32px,auto)}:host(.indent-2) .content{grid-column:3;grid-row:1;margin-inline-start:10px}:host(.indent-2) .expand-collapse-glyph-container{grid-column:5;grid-row:1}:host(.indent-2) .start{grid-column:2}:host(.indent-2) .end{grid-column:4}:host(:${focusVisible}){${focusTreatmentBase}}:host(:not([disabled]):hover){background:${neutralFillStealthHover}}:host(:not([disabled]):active),:host(.expanded){background:${neutralFillStealthActive};color:${neutralForegroundRest}}:host([disabled]){cursor:${disabledCursor};opacity:${disabledOpacity}}.content{grid-column-start:2;justify-self:start;overflow:hidden;text-overflow:ellipsis}.start,.end{display:flex;justify-content:center}:host(.indent-0[aria-haspopup='menu']){display:grid;grid-template-columns:minmax(32px,auto) auto 1fr minmax(32px,auto) minmax(32px,auto);align-items:center;min-height:32px}:host(.indent-1[aria-haspopup='menu']),:host(.indent-1[role='menuitemcheckbox']),:host(.indent-1[role='menuitemradio']){display:grid;grid-template-columns:minmax(32px,auto) auto 1fr minmax(32px,auto) minmax(32px,auto);align-items:center;min-height:32px}:host(.indent-2:not([aria-haspopup='menu'])) .end{grid-column:5}:host .input-container,:host .expand-collapse-glyph-container{display:none}:host([aria-haspopup='menu']) .expand-collapse-glyph-container,:host([role='menuitemcheckbox']) .input-container,:host([role='menuitemradio']) .input-container{display:grid}:host([aria-haspopup='menu']) .content,:host([role='menuitemcheckbox']) .content,:host([role='menuitemradio']) .content{grid-column-start:3}:host([aria-haspopup='menu'].indent-0) .content{grid-column-start:1}:host([aria-haspopup='menu']) .end,:host([role='menuitemcheckbox']) .end,:host([role='menuitemradio']) .end{grid-column-start:4}:host .expand-collapse,:host .checkbox,:host .radio{display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box}:host .checkbox-indicator,:host .radio-indicator,slot[name='checkbox-indicator'],slot[name='radio-indicator']{display:none}::slotted([slot='end']:not(svg)){margin-inline-end:10px;color:${neutralForegroundHint}}:host([aria-checked='true']) .checkbox-indicator,:host([aria-checked='true']) slot[name='checkbox-indicator'],:host([aria-checked='true']) .radio-indicator,:host([aria-checked='true']) slot[name='radio-indicator']{display:flex}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+      box-sizing:border-box;height:calc(${heightNumber} * 1px);grid-template-columns:minmax(32px,auto) 1fr minmax(32px,auto);grid-template-rows:auto;justify-items:center;align-items:center;padding:0;white-space:nowrap;color:${neutralForegroundRest};fill:currentcolor;cursor:pointer;border-radius:calc(${controlCornerRadius} * 1px);border:calc(${strokeWidth} * 1px) solid transparent;position:relative}:host(.indent-0){grid-template-columns:auto 1fr minmax(32px,auto)}:host(.indent-0) .content{grid-column:1;grid-row:1;margin-inline-start:10px}:host(.indent-0) .expand-collapse-glyph-container{grid-column:5;grid-row:1}:host(.indent-2){grid-template-columns:minmax(32px,auto) minmax(32px,auto) 1fr minmax(32px,auto) minmax(32px,auto)}:host(.indent-2) .content{grid-column:3;grid-row:1;margin-inline-start:10px}:host(.indent-2) .expand-collapse-glyph-container{grid-column:5;grid-row:1}:host(.indent-2) .start{grid-column:2}:host(.indent-2) .end{grid-column:4}:host(:${focusVisible}){${focusTreatmentBase}}:host(:not([disabled]):hover){background:${neutralFillStealthHover}}:host(:not([disabled]):active),:host(.expanded){background:${neutralFillStealthActive};color:${neutralForegroundRest};z-index:2}:host([disabled]){cursor:${disabledCursor};opacity:${disabledOpacity}}.content{grid-column-start:2;justify-self:start;overflow:hidden;text-overflow:ellipsis}.start,.end{display:flex;justify-content:center}:host(.indent-0[aria-haspopup='menu']){display:grid;grid-template-columns:minmax(32px,auto) auto 1fr minmax(32px,auto) minmax(32px,auto);align-items:center;min-height:32px}:host(.indent-1[aria-haspopup='menu']),:host(.indent-1[role='menuitemcheckbox']),:host(.indent-1[role='menuitemradio']){display:grid;grid-template-columns:minmax(32px,auto) auto 1fr minmax(32px,auto) minmax(32px,auto);align-items:center;min-height:32px}:host(.indent-2:not([aria-haspopup='menu'])) .end{grid-column:5}:host .input-container,:host .expand-collapse-glyph-container{display:none}:host([aria-haspopup='menu']) .expand-collapse-glyph-container,:host([role='menuitemcheckbox']) .input-container,:host([role='menuitemradio']) .input-container{display:grid}:host([aria-haspopup='menu']) .content,:host([role='menuitemcheckbox']) .content,:host([role='menuitemradio']) .content{grid-column-start:3}:host([aria-haspopup='menu'].indent-0) .content{grid-column-start:1}:host([aria-haspopup='menu']) .end,:host([role='menuitemcheckbox']) .end,:host([role='menuitemradio']) .end{grid-column-start:4}:host .expand-collapse,:host .checkbox,:host .radio{display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box}:host .checkbox-indicator,:host .radio-indicator,slot[name='checkbox-indicator'],slot[name='radio-indicator']{display:none}::slotted([slot='end']:not(svg)){margin-inline-end:10px;color:${neutralForegroundHint}}:host([aria-checked='true']) .checkbox-indicator,:host([aria-checked='true']) slot[name='checkbox-indicator'],:host([aria-checked='true']) .radio-indicator,:host([aria-checked='true']) slot[name='radio-indicator']{display:flex}`.withBehaviors(forcedColorsStylesheetBehavior(css`
         :host,::slotted([slot='end']:not(svg)){forced-color-adjust:none;color:${SystemColors.ButtonText};fill:currentcolor}:host(:not([disabled]):hover){background:${SystemColors.Highlight};color:${SystemColors.HighlightText};fill:currentcolor}:host(:hover) .start,:host(:hover) .end,:host(:hover)::slotted(svg),:host(:active) .start,:host(:active) .end,:host(:active)::slotted(svg),:host(:hover) ::slotted([slot='end']:not(svg)),:host(:${focusVisible}) ::slotted([slot='end']:not(svg)){color:${SystemColors.HighlightText};fill:currentcolor}:host(.expanded){background:${SystemColors.Highlight};color:${SystemColors.HighlightText}}:host(:${focusVisible}){background:${SystemColors.Highlight};outline-color:${SystemColors.ButtonText};color:${SystemColors.HighlightText};fill:currentcolor}:host([disabled]),:host([disabled]:hover),:host([disabled]:hover) .start,:host([disabled]:hover) .end,:host([disabled]:hover)::slotted(svg),:host([disabled]:${focusVisible}){background:${SystemColors.ButtonFace};color:${SystemColors.GrayText};fill:currentcolor;opacity:1}:host([disabled]:${focusVisible}){outline-color:${SystemColors.GrayText}}:host .expanded-toggle,:host .checkbox,:host .radio{border-color:${SystemColors.ButtonText};background:${SystemColors.HighlightText}}:host([checked]) .checkbox,:host([checked]) .radio{background:${SystemColors.HighlightText};border-color:${SystemColors.HighlightText}}:host(:hover) .expanded-toggle,:host(:hover) .checkbox,:host(:hover) .radio,:host(:${focusVisible}) .expanded-toggle,:host(:${focusVisible}) .checkbox,:host(:${focusVisible}) .radio,:host([checked]:hover) .checkbox,:host([checked]:hover) .radio,:host([checked]:${focusVisible}) .checkbox,:host([checked]:${focusVisible}) .radio{border-color:${SystemColors.HighlightText}}:host([aria-checked='true']){background:${SystemColors.Highlight};color:${SystemColors.HighlightText}}:host([aria-checked='true']) .checkbox-indicator,:host([aria-checked='true']) ::slotted([slot='checkbox-indicator']),:host([aria-checked='true']) ::slotted([slot='radio-indicator']){fill:${SystemColors.Highlight}}:host([aria-checked='true']) .radio-indicator{background:${SystemColors.Highlight}}`), new DirectionalStyleSheetBehavior(css`
         .expand-collapse-glyph-container{transform:rotate(0deg)}`, css`
         .expand-collapse-glyph-container{transform:rotate(180deg)}`));

package/dist/web-components.min.js

@@ -177,7 +177,7 @@ ${rn("inline-block")} :host{--calendar-cell-size:calc((${or} + 2 + ${nr}) * ${rr
     ${rn("block")} :host{background:${Ga};border:calc(${cr} * 1px) solid transparent;border-radius:calc(${lr} * 1px);box-shadow:${kd};padding:calc((${rr} - ${cr}) * 1px) 0;max-width:368px;min-width:64px}:host([slot='submenu']){width:max-content;margin:0 calc(${rr} * 2px)}::slotted(${t.tagFor(_o)}){margin:0 calc(${rr} * 1px)}::slotted(${t.tagFor(Po)}){margin:calc(${rr} * 1px) 0}::slotted(hr){box-sizing:content-box;height:0;margin:calc(${rr} * 1px) 0;border:none;border-top:calc(${cr} * 1px) solid ${kc}}`.withBehaviors(sn(ft`
         :host([slot='submenu']){background:${Ge.Canvas};border-color:${Ge.CanvasText}}`));class dp extends Go{connectedCallback(){super.connectedCallback(),el.setValueFor(this,Ga)}}const up=dp.compose({baseName:"menu",baseClass:Go,template:(t,e)=>_`<template slot="${t=>t.slot?t.slot:t.isNestedMenu()?"submenu":void 0}" role="menu" @keydown="${(t,e)=>t.handleMenuKeyDown(e.event)}" @focusout="${(t,e)=>t.handleFocusOut(e.event)}"><slot ${Ht("items")}></slot></template>`,styles:hp}),pp=hp,gp=(t,e)=>ft`
     ${rn("grid")} :host{contain:layout;overflow:visible;${Hh}
-      box-sizing:border-box;height:calc(${Yh} * 1px);grid-template-columns:minmax(32px,auto) 1fr minmax(32px,auto);grid-template-rows:auto;justify-items:center;align-items:center;padding:0;white-space:nowrap;color:${rc};fill:currentcolor;cursor:pointer;border-radius:calc(${ar} * 1px);border:calc(${cr} * 1px) solid transparent}:host(.indent-0){grid-template-columns:auto 1fr minmax(32px,auto)}:host(.indent-0) .content{grid-column:1;grid-row:1;margin-inline-start:10px}:host(.indent-0) .expand-collapse-glyph-container{grid-column:5;grid-row:1}:host(.indent-2){grid-template-columns:minmax(32px,auto) minmax(32px,auto) 1fr minmax(32px,auto) minmax(32px,auto)}:host(.indent-2) .content{grid-column:3;grid-row:1;margin-inline-start:10px}:host(.indent-2) .expand-collapse-glyph-container{grid-column:5;grid-row:1}:host(.indent-2) .start{grid-column:2}:host(.indent-2) .end{grid-column:4}:host(:${an}){${Kh}}:host(:not([disabled]):hover){background:${Ql}}:host(:not([disabled]):active),:host(.expanded){background:${Zl};color:${rc}}:host([disabled]){cursor:${"not-allowed"};opacity:${ir}}.content{grid-column-start:2;justify-self:start;overflow:hidden;text-overflow:ellipsis}.start,.end{display:flex;justify-content:center}:host(.indent-0[aria-haspopup='menu']){display:grid;grid-template-columns:minmax(32px,auto) auto 1fr minmax(32px,auto) minmax(32px,auto);align-items:center;min-height:32px}:host(.indent-1[aria-haspopup='menu']),:host(.indent-1[role='menuitemcheckbox']),:host(.indent-1[role='menuitemradio']){display:grid;grid-template-columns:minmax(32px,auto) auto 1fr minmax(32px,auto) minmax(32px,auto);align-items:center;min-height:32px}:host(.indent-2:not([aria-haspopup='menu'])) .end{grid-column:5}:host .input-container,:host .expand-collapse-glyph-container{display:none}:host([aria-haspopup='menu']) .expand-collapse-glyph-container,:host([role='menuitemcheckbox']) .input-container,:host([role='menuitemradio']) .input-container{display:grid}:host([aria-haspopup='menu']) .content,:host([role='menuitemcheckbox']) .content,:host([role='menuitemradio']) .content{grid-column-start:3}:host([aria-haspopup='menu'].indent-0) .content{grid-column-start:1}:host([aria-haspopup='menu']) .end,:host([role='menuitemcheckbox']) .end,:host([role='menuitemradio']) .end{grid-column-start:4}:host .expand-collapse,:host .checkbox,:host .radio{display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box}:host .checkbox-indicator,:host .radio-indicator,slot[name='checkbox-indicator'],slot[name='radio-indicator']{display:none}::slotted([slot='end']:not(svg)){margin-inline-end:10px;color:${dc}}:host([aria-checked='true']) .checkbox-indicator,:host([aria-checked='true']) slot[name='checkbox-indicator'],:host([aria-checked='true']) .radio-indicator,:host([aria-checked='true']) slot[name='radio-indicator']{display:flex}`.withBehaviors(sn(ft`
+      box-sizing:border-box;height:calc(${Yh} * 1px);grid-template-columns:minmax(32px,auto) 1fr minmax(32px,auto);grid-template-rows:auto;justify-items:center;align-items:center;padding:0;white-space:nowrap;color:${rc};fill:currentcolor;cursor:pointer;border-radius:calc(${ar} * 1px);border:calc(${cr} * 1px) solid transparent;position:relative}:host(.indent-0){grid-template-columns:auto 1fr minmax(32px,auto)}:host(.indent-0) .content{grid-column:1;grid-row:1;margin-inline-start:10px}:host(.indent-0) .expand-collapse-glyph-container{grid-column:5;grid-row:1}:host(.indent-2){grid-template-columns:minmax(32px,auto) minmax(32px,auto) 1fr minmax(32px,auto) minmax(32px,auto)}:host(.indent-2) .content{grid-column:3;grid-row:1;margin-inline-start:10px}:host(.indent-2) .expand-collapse-glyph-container{grid-column:5;grid-row:1}:host(.indent-2) .start{grid-column:2}:host(.indent-2) .end{grid-column:4}:host(:${an}){${Kh}}:host(:not([disabled]):hover){background:${Ql}}:host(:not([disabled]):active),:host(.expanded){background:${Zl};color:${rc};z-index:2}:host([disabled]){cursor:${"not-allowed"};opacity:${ir}}.content{grid-column-start:2;justify-self:start;overflow:hidden;text-overflow:ellipsis}.start,.end{display:flex;justify-content:center}:host(.indent-0[aria-haspopup='menu']){display:grid;grid-template-columns:minmax(32px,auto) auto 1fr minmax(32px,auto) minmax(32px,auto);align-items:center;min-height:32px}:host(.indent-1[aria-haspopup='menu']),:host(.indent-1[role='menuitemcheckbox']),:host(.indent-1[role='menuitemradio']){display:grid;grid-template-columns:minmax(32px,auto) auto 1fr minmax(32px,auto) minmax(32px,auto);align-items:center;min-height:32px}:host(.indent-2:not([aria-haspopup='menu'])) .end{grid-column:5}:host .input-container,:host .expand-collapse-glyph-container{display:none}:host([aria-haspopup='menu']) .expand-collapse-glyph-container,:host([role='menuitemcheckbox']) .input-container,:host([role='menuitemradio']) .input-container{display:grid}:host([aria-haspopup='menu']) .content,:host([role='menuitemcheckbox']) .content,:host([role='menuitemradio']) .content{grid-column-start:3}:host([aria-haspopup='menu'].indent-0) .content{grid-column-start:1}:host([aria-haspopup='menu']) .end,:host([role='menuitemcheckbox']) .end,:host([role='menuitemradio']) .end{grid-column-start:4}:host .expand-collapse,:host .checkbox,:host .radio{display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box}:host .checkbox-indicator,:host .radio-indicator,slot[name='checkbox-indicator'],slot[name='radio-indicator']{display:none}::slotted([slot='end']:not(svg)){margin-inline-end:10px;color:${dc}}:host([aria-checked='true']) .checkbox-indicator,:host([aria-checked='true']) slot[name='checkbox-indicator'],:host([aria-checked='true']) .radio-indicator,:host([aria-checked='true']) slot[name='radio-indicator']{display:flex}`.withBehaviors(sn(ft`
         :host,::slotted([slot='end']:not(svg)){forced-color-adjust:none;color:${Ge.ButtonText};fill:currentcolor}:host(:not([disabled]):hover){background:${Ge.Highlight};color:${Ge.HighlightText};fill:currentcolor}:host(:hover) .start,:host(:hover) .end,:host(:hover)::slotted(svg),:host(:active) .start,:host(:active) .end,:host(:active)::slotted(svg),:host(:hover) ::slotted([slot='end']:not(svg)),:host(:${an}) ::slotted([slot='end']:not(svg)){color:${Ge.HighlightText};fill:currentcolor}:host(.expanded){background:${Ge.Highlight};color:${Ge.HighlightText}}:host(:${an}){background:${Ge.Highlight};outline-color:${Ge.ButtonText};color:${Ge.HighlightText};fill:currentcolor}:host([disabled]),:host([disabled]:hover),:host([disabled]:hover) .start,:host([disabled]:hover) .end,:host([disabled]:hover)::slotted(svg),:host([disabled]:${an}){background:${Ge.ButtonFace};color:${Ge.GrayText};fill:currentcolor;opacity:1}:host([disabled]:${an}){outline-color:${Ge.GrayText}}:host .expanded-toggle,:host .checkbox,:host .radio{border-color:${Ge.ButtonText};background:${Ge.HighlightText}}:host([checked]) .checkbox,:host([checked]) .radio{background:${Ge.HighlightText};border-color:${Ge.HighlightText}}:host(:hover) .expanded-toggle,:host(:hover) .checkbox,:host(:hover) .radio,:host(:${an}) .expanded-toggle,:host(:${an}) .checkbox,:host(:${an}) .radio,:host([checked]:hover) .checkbox,:host([checked]:hover) .radio,:host([checked]:${an}) .checkbox,:host([checked]:${an}) .radio{border-color:${Ge.HighlightText}}:host([aria-checked='true']){background:${Ge.Highlight};color:${Ge.HighlightText}}:host([aria-checked='true']) .checkbox-indicator,:host([aria-checked='true']) ::slotted([slot='checkbox-indicator']),:host([aria-checked='true']) ::slotted([slot='radio-indicator']){fill:${Ge.Highlight}}:host([aria-checked='true']) .radio-indicator{background:${Ge.Highlight}}`),new rd(ft`
         .expand-collapse-glyph-container{transform:rotate(0deg)}`,ft`
         .expand-collapse-glyph-container{transform:rotate(180deg)}`)),fp=_o.compose({baseName:"menu-item",template:(t,e)=>_`<template role="${t=>t.role}" aria-haspopup="${t=>t.hasSubmenu?"menu":void 0}" aria-checked="${t=>t.role!==No?t.checked:void 0}" aria-disabled="${t=>t.disabled}" aria-expanded="${t=>t.expanded}" @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)}" class="${t=>t.disabled?"disabled":""} ${t=>t.expanded?"expanded":""} ${t=>"indent-"+t.startColumnCount}">${Tt(t=>t.role===jo,_`<div part="input-container" class="input-container"><span part="checkbox" class="checkbox"><slot name="checkbox-indicator">${e.checkboxIndicator||""}</slot></span></div>`)} ${Tt(t=>t.role===Uo,_`<div part="input-container" class="input-container"><span part="radio" class="radio"><slot name="radio-indicator">${e.radioIndicator||""}</slot></span></div>`)}</div>${Ut(0,e)}<span class="content" part="content"><slot></slot></span>${jt(0,e)} ${Tt(t=>t.hasSubmenu,_`<div part="expand-collapse-glyph-container" class="expand-collapse-glyph-container"><span part="expand-collapse" class="expand-collapse"><slot name="expand-collapse-indicator">${e.expandCollapseGlyph||""}</slot></span></div>`)} ${Tt(t=>t.expanded,_`<${t.tagFor(ei)} :anchorElement="${t=>t}" vertical-positioning-mode="dynamic" vertical-default-position="bottom" vertical-inset="true" horizontal-positioning-mode="dynamic" horizontal-default-position="end" class="submenu-region" dir="${t=>t.currentDirection}" @loaded="${t=>t.submenuLoaded()}" ${Dt("submenuRegion")} part="submenu-region"><slot name="submenu"></slot></${t.tagFor(ei)}>`)}</template>`,styles:gp,checkboxIndicator:'\n    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n      <path d="M13.86 3.66a.5.5 0 01-.02.7l-7.93 7.48a.6.6 0 01-.84-.02L2.4 9.1a.5.5 0 01.72-.7l2.4 2.44 7.65-7.2a.5.5 0 01.7.02z"/>\n    </svg>\n  ',expandCollapseGlyph:'\n    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n      <path d="M5.65 3.15a.5.5 0 000 .7L9.79 8l-4.14 4.15a.5.5 0 00.7.7l4.5-4.5a.5.5 0 000-.7l-4.5-4.5a.5.5 0 00-.7 0z"/>\n    </svg>\n  ',radioIndicator:'\n    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n      <circle cx="8" cy="8" r="2"/>\n    </svg>\n  '}),mp=gp,vp=(t,e)=>ft`

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fluentui/web-components",
   "description": "A library of Fluent Web Components",
   "sideEffects": false,
-  "version": "2.5.9",
+  "version": "2.5.11",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
@@ -47,7 +47,7 @@
     "test-firefox:verbose": "karma start karma.conf.js --browsers=FirefoxHeadless --single-run --coverage --reporter=mocha"
   },
   "devDependencies": {
-    "@storybook/html": "6.5.5",
+    "@storybook/html": "6.5.15",
     "@types/chai": "4.3.3",
     "@types/chai-spies": "1.0.3",
     "@types/karma": "6.3.3",