@fluentui/web-components 2.5.8 → 2.5.10

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`
@@ -245,8 +245,8 @@ ${rn("inline-block")} :host{--calendar-cell-size:calc((${or} + 2 + ${nr}) * ${rr
       width:16px;height:16px}`.withBehaviors(sn(ft`
         :host(:${an}){outline-color:${Ge.Highlight};color:${Ge.ButtonText};forced-color-adjust:none}`))});class wg extends Zs{connectedCallback(){super.connectedCallback(),el.setValueFor(this,Ga)}}const kg=wg.compose({baseName:"tooltip",baseClass:Zs,template:(t,e)=>_` ${Tt(t=>t.tooltipVisible,_`<${t.tagFor(ei)} fixed-placement="true" auto-update-mode="${t=>t.autoUpdateMode}" vertical-positioning-mode="${t=>t.verticalPositioningMode}" vertical-default-position="${t=>t.verticalDefaultPosition}" vertical-inset="${t=>t.verticalInset}" vertical-scaling="${t=>t.verticalScaling}" horizontal-positioning-mode="${t=>t.horizontalPositioningMode}" horizontal-default-position="${t=>t.horizontalDefaultPosition}" horizontal-scaling="${t=>t.horizontalScaling}" horizontal-inset="${t=>t.horizontalInset}" vertical-viewport-lock="${t=>t.horizontalViewportLock}" horizontal-viewport-lock="${t=>t.verticalViewportLock}" dir="${t=>t.currentDirection}" ${Dt("region")}><div class="tooltip" part="tooltip" role="tooltip"><slot></slot></div></${t.tagFor(ei)}>`)} `,styles:(t,e)=>ft`
     :host{position:relative;contain:layout;overflow:visible;height:0;width:0;z-index:10000}.tooltip{box-sizing:border-box;border-radius:calc(${ar} * 1px);border:calc(${cr} * 1px) solid ${Oc};background:${el};color:${rc};padding:4px 12px;height:fit-content;width:fit-content;${Hh}
-      white-space:nowrap;box-shadow:${$d}}fluent-anchored-region{display:flex;justify-content:center;align-items:center;overflow:visible;flex-direction:row}fluent-anchored-region.right,fluent-anchored-region.left{flex-direction:column}fluent-anchored-region.top .tooltip::after,fluent-anchored-region.bottom .tooltip::after,fluent-anchored-region.left .tooltip::after,fluent-anchored-region.right .tooltip::after{content:'';width:12px;height:12px;background:${el};border-top:calc(${cr} * 1px) solid ${Oc};border-left:calc(${cr} * 1px) solid ${Oc};position:absolute}fluent-anchored-region.top .tooltip::after{transform:translateX(-50%) rotate(225deg);bottom:5px;left:50%}fluent-anchored-region.top .tooltip{margin-bottom:12px}fluent-anchored-region.bottom .tooltip::after{transform:translateX(-50%) rotate(45deg);top:5px;left:50%}fluent-anchored-region.bottom .tooltip{margin-top:12px}fluent-anchored-region.left .tooltip::after{transform:translateY(-50%) rotate(135deg);top:50%;right:5px}fluent-anchored-region.left .tooltip{margin-right:12px}fluent-anchored-region.right .tooltip::after{transform:translateY(-50%) rotate(-45deg);top:50%;left:5px}fluent-anchored-region.right .tooltip{margin-left:12px}`.withBehaviors(sn(ft`
-        :host([disabled]){opacity:1}fluent-anchored-region.top .tooltip::after,fluent-anchored-region.bottom .tooltip::after,fluent-anchored-region.left .tooltip::after,fluent-anchored-region.right .tooltip::after{content:'';width:unset;height:unset}`))}),Cg=(t,e)=>ft`
+      white-space:nowrap;box-shadow:${$d}}${t.tagFor(ei)}{display:flex;justify-content:center;align-items:center;overflow:visible;flex-direction:row}${t.tagFor(ei)}.right,${t.tagFor(ei)}.left{flex-direction:column}${t.tagFor(ei)}.top .tooltip::after,${t.tagFor(ei)}.bottom .tooltip::after,${t.tagFor(ei)}.left .tooltip::after,${t.tagFor(ei)}.right .tooltip::after{content:'';width:12px;height:12px;background:${el};border-top:calc(${cr} * 1px) solid ${Oc};border-left:calc(${cr} * 1px) solid ${Oc};position:absolute}${t.tagFor(ei)}.top .tooltip::after{transform:translateX(-50%) rotate(225deg);bottom:5px;left:50%}${t.tagFor(ei)}.top .tooltip{margin-bottom:12px}${t.tagFor(ei)}.bottom .tooltip::after{transform:translateX(-50%) rotate(45deg);top:5px;left:50%}${t.tagFor(ei)}.bottom .tooltip{margin-top:12px}${t.tagFor(ei)}.left .tooltip::after{transform:translateY(-50%) rotate(135deg);top:50%;right:5px}${t.tagFor(ei)}.left .tooltip{margin-right:12px}${t.tagFor(ei)}.right .tooltip::after{transform:translateY(-50%) rotate(-45deg);top:50%;left:5px}${t.tagFor(ei)}.right .tooltip{margin-left:12px}`.withBehaviors(sn(ft`
+        :host([disabled]){opacity:1}${t.tagFor(ei)}.top .tooltip::after,${t.tagFor(ei)}.bottom .tooltip::after,${t.tagFor(ei)}.left .tooltip::after,${t.tagFor(ei)}.right .tooltip::after{content:'';width:unset;height:unset}`))}),Cg=(t,e)=>ft`
   :host([hidden]){display:none}${rn("flex")} :host{flex-direction:column;align-items:stretch;min-width:fit-content;font-size:0}`,Ig=en.compose({baseName:"tree-view",template:(t,e)=>_`<template role="tree" ${Dt("treeView")} @keydown="${(t,e)=>t.handleKeyDown(e.event)}" @focusin="${(t,e)=>t.handleFocus(e.event)}" @focusout="${(t,e)=>t.handleBlur(e.event)}" @click="${(t,e)=>t.handleClick(e.event)}" @selected-change="${(t,e)=>t.handleSelectedChange(e.event)}"><slot ${Ht("slottedTreeItems")}></slot></template>`,styles:Cg}),Fg=Cg,Dg=ft`
   .expand-collapse-button svg{transform:rotate(0deg)}:host(.nested) .expand-collapse-button{left:var(--expand-collapse-button-nested-width,calc(${Yh} * -1px))}:host([selected])::after{left:calc(${hr} * 1px)}:host([expanded]) > .positioning-region .expand-collapse-button svg{transform:rotate(90deg)}`,Tg=ft`
   .expand-collapse-button svg{transform:rotate(180deg)}:host(.nested) .expand-collapse-button{right:var(--expand-collapse-button-nested-width,calc(${Yh} * -1px))}:host([selected])::after{right:calc(${hr} * 1px)}:host([expanded]) > .positioning-region .expand-collapse-button svg{transform:rotate(90deg)}`,Sg=vt`((${or} / 2) * ${rr}) + ((${rr} * ${nr}) / 2)`,Og=fo.create("tree-item-expand-collapse-hover").withDefault(t=>{const e=Xl.getValueFor(t);return e.evaluate(t,e.evaluate(t).hover).hover}),Eg=fo.create("tree-item-expand-collapse-selected-hover").withDefault(t=>{const e=ql.getValueFor(t);return Xl.getValueFor(t).evaluate(t,e.evaluate(t).rest).hover}),Vg=(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.8",
+  "version": "2.5.10",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"