@fluentui/web-components 2.5.14 → 2.5.16

package/dist/web-components.d.ts

@@ -231,7 +231,7 @@ export declare const allComponents: {
     fluentTooltip: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Tooltip>;
     fluentTreeView: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof TreeView>;
     fluentTreeItem: (overrideDefinition?: OverrideFoundationElementDefinition<TreeItemOptions> | undefined) => FoundationElementRegistry<TreeItemOptions, Constructable<FoundationElement>>;
-    register(container?: Container | undefined, ...rest: any[]): void;
+    register(container?: Container, ...rest: any[]): void;
 };
 
 /**

package/dist/web-components.js

@@ -20597,11 +20597,10 @@ const dataGridStyles = dataGridStyles$1;
  */
 const swatchConverter = {
   toView(value) {
-    var _a;
     if (value === null || value === undefined) {
       return null;
     }
-    return (_a = value) === null || _a === void 0 ? void 0 : _a.toColorString();
+    return value === null || value === void 0 ? void 0 : value.toColorString();
   },
   fromView(value) {
     if (value === null || value === undefined) {
@@ -20931,7 +20930,7 @@ const fluentDialog = Dialog.compose({
 const dialogStyles = dialogStyles$1;
 
 const dividerStyles$1 = (context, definition) => css`
-    ${display('block')} :host{box-sizing:content-box;height:0;border:none;border-top:calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest}}`;
+    ${display('block')} :host{box-sizing:content-box;height:0;border:none;border-top:calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest}}:host([orientation="vertical"]){border:none;height:100%;margin:0 calc(${designUnit} * 1px);border-left:calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest}}`;
 
 /**
  * The Fluent Divider Element. Implements {@link @microsoft/fast-foundation#Divider},
@@ -21069,7 +21068,8 @@ const listboxStyles = listboxStyles$1;
 const optionStyles = (context, definition) => css`
     ${display('inline-flex')} :host{position:relative;${typeRampBase}
       background:${neutralFillStealthRest};border-radius:calc(${controlCornerRadius} * 1px);border:calc(${strokeWidth} * 1px) solid transparent;box-sizing:border-box;color:${neutralForegroundRest};cursor:pointer;fill:currentcolor;height:calc(${heightNumber} * 1px);overflow:hidden;align-items:center;padding:0 calc(((${designUnit} * 3) - ${strokeWidth} - 1) * 1px);user-select:none;white-space:nowrap}:host::before{content:'';display:block;position:absolute;left:calc((${focusStrokeWidth} - ${strokeWidth}) * 1px);top:calc((${heightNumber} / 4) - ${focusStrokeWidth} * 1px);width:3px;height:calc((${heightNumber} / 2) * 1px);background:transparent;border-radius:calc(${controlCornerRadius} * 1px)}:host(:not([disabled]):hover){background:${neutralFillStealthHover}}:host(:not([disabled]):active){background:${neutralFillStealthActive}}:host(:not([disabled]):active)::before{background:${accentFillRest};height:calc(((${heightNumber} / 2) - 6) * 1px)}:host([aria-selected='true'])::before{background:${accentFillRest}}:host(:${focusVisible}){${focusTreatmentBase}
-      background:${neutralFillStealthFocus}}:host([aria-selected='true']){background:${neutralFillSecondaryRest}}:host(:not([disabled])[aria-selected='true']:hover){background:${neutralFillSecondaryHover}}:host(:not([disabled])[aria-selected='true']:active){background:${neutralFillSecondaryActive}}:host(:not([disabled]):not([aria-selected='true']):hover){background:${neutralFillStealthHover}}:host(:not([disabled]):not([aria-selected='true']):active){background:${neutralFillStealthActive}}:host([disabled]){cursor:${disabledCursor};opacity:${disabledOpacity}}.content{grid-column-start:2;justify-self:start;overflow:hidden;text-overflow:ellipsis}.start,.end,::slotted(svg){display:flex}::slotted([slot='end']){margin-inline-start:1ch}::slotted([slot='start']){margin-inline-end:1ch}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+      background:${neutralFillStealthFocus}}:host([aria-selected='true']){background:${neutralFillSecondaryRest}}:host(:not([disabled])[aria-selected='true']:hover){background:${neutralFillSecondaryHover}}:host(:not([disabled])[aria-selected='true']:active){background:${neutralFillSecondaryActive}}:host(:not([disabled]):not([aria-selected='true']):hover){background:${neutralFillStealthHover}}:host(:not([disabled]):not([aria-selected='true']):active){background:${neutralFillStealthActive}}:host([disabled]){cursor:${disabledCursor};opacity:${disabledOpacity}}.content{grid-column-start:2;justify-self:start;overflow:hidden;text-overflow:ellipsis}.start,.end,::slotted(svg){display:flex}::slotted([slot='end']){margin-inline-start:1ch}::slotted([slot='start']){margin-inline-end:1ch}`.withBehaviors(new DirectionalStyleSheetBehavior(null, css`
+      :host::before{right:calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)}`), forcedColorsStylesheetBehavior(css`
         :host{background:${SystemColors.ButtonFace};border-color:${SystemColors.ButtonFace};color:${SystemColors.ButtonText}}:host(:not([disabled]):not([aria-selected="true"]):hover),:host(:not([disabled])[aria-selected="true"]:hover),:host([aria-selected="true"]){forced-color-adjust:none;background:${SystemColors.Highlight};color:${SystemColors.HighlightText}}:host(:not([disabled]):active)::before,:host([aria-selected='true'])::before{background:${SystemColors.HighlightText}}:host([disabled]),:host([disabled]:not([aria-selected='true']):hover){background:${SystemColors.Canvas};color:${SystemColors.GrayText};fill:currentcolor;opacity:1}:host(:${focusVisible}){outline-color:${SystemColors.CanvasText}}`));
 
 /**
@@ -21703,7 +21703,7 @@ const textAreaStyles$1 = (context, definition) => css`
 
     ${inputStateStyles()}
 
-    :host{flex-direction:column;vertical-align:bottom}.control{height:calc((${heightNumber} * 2) * 1px);padding:calc(${designUnit} * 1.5px) calc(${designUnit} * 2px + 1px)}:host .control{resize:none}:host(.resize-both) .control{resize:both}:host(.resize-horizontal) .control{resize:horizontal}:host(.resize-vertical) .control{resize:vertical}`.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector$1)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector$1)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector$1)));
+    :host{flex-direction:column;vertical-align:bottom}.control{height:calc((${heightNumber} * 2) * 1px);padding:calc(${designUnit} * 1.5px) calc(${designUnit} * 2px + 1px)}:host .control{resize:none}:host(.resize-both) .control{resize:both}:host(.resize-horizontal) .control{resize:horizontal}:host(.resize-vertical) .control{resize:vertical}:host([cols]){width:initial}:host([rows]) .control{height:initial}`.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector$1)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector$1)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector$1)));
 
 /**
  * The Fluent TextArea class

package/dist/web-components.min.js

@@ -141,13 +141,13 @@ ${ln("inline-block")} :host{--calendar-cell-size:calc((${nr} + 2 + ${ar}) * ${lr
         :host{}`)),Eu=(t,e)=>vt`
     :host{padding:calc((${lr} + ${ur} - ${dr}) * 1px) calc(((${lr} * 3) + ${ur} - ${dr}) * 1px);color:${lc};box-sizing:border-box;${Bh}
       border:transparent calc(${dr} * 1px) solid;overflow:hidden;white-space:nowrap;border-radius:calc(${cr} * 1px)}:host(.column-header){font-weight:600}:host(:${cn}){${Yh}}`.withBehaviors(rn(vt`
-        :host{forced-color-adjust:none;background:${Ke.Field};color:${Ke.FieldText}}:host(:${cn}){outline-color:${Ke.FieldText}}`)),Vu=Oi.compose({baseName:"data-grid-cell",template:(t,e)=>_`<template tabindex="-1" role="${t=>t.cellType&&"default"!==t.cellType?t.cellType:"gridcell"}" class=" ${t=>"columnheader"===t.cellType?"column-header":"rowheader"===t.cellType?"row-header":""} "><slot></slot></template>`,styles:Eu}),Ru=Eu,Au=Fi.compose({baseName:"data-grid-row",template:(t,e)=>_`<template role="row" class="${t=>"default"!==t.rowType?t.rowType:""}" :defaultCellItemTemplate="${function(t){const e=t.tagFor(Oi);return _`<${e} cell-type="${t=>t.isRowHeader?"rowheader":void 0}" grid-column="${(t,e)=>e.index+1}" :rowData="${(t,e)=>e.parent.rowData}" :columnDefinition="${t=>t}"></${e}>`}(t)}" :defaultHeaderCellItemTemplate="${function(t){const e=t.tagFor(Oi);return _`<${e} cell-type="columnheader" grid-column="${(t,e)=>e.index+1}" :columnDefinition="${t=>t}"></${e}>`}(t)}" ${jt({property:"cellElements",filter:zt('[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"]')})}><slot ${Bt("slottedCellElements")}></slot></template>`,styles:Ou}),Lu=Ou,Pu=Di.compose({baseName:"data-grid",template:(t,e)=>{const i=function(t){const e=t.tagFor(Fi);return _`<${e} :rowData="${t=>t}" :cellItemTemplate="${(t,e)=>e.parent.cellItemTemplate}" :headerCellItemTemplate="${(t,e)=>e.parent.headerCellItemTemplate}"></${e}>`}(t),o=t.tagFor(Fi);return _`<template role="grid" tabindex="0" :rowElementTag="${()=>o}" :defaultRowItemTemplate="${i}" ${jt({property:"rowElements",filter:zt("[role=row]")})}><slot></slot></template>`},styles:Su}),zu=Su,Hu={toView(t){var e;return null==t?null:null===(e=t)||void 0===e?void 0:e.toColorString()},fromView(t){if(null==t)return null;const e=Sn(t);return e?En.create(e.r,e.g,e.b):null}},Mu=vt`
+        :host{forced-color-adjust:none;background:${Ke.Field};color:${Ke.FieldText}}:host(:${cn}){outline-color:${Ke.FieldText}}`)),Vu=Oi.compose({baseName:"data-grid-cell",template:(t,e)=>_`<template tabindex="-1" role="${t=>t.cellType&&"default"!==t.cellType?t.cellType:"gridcell"}" class=" ${t=>"columnheader"===t.cellType?"column-header":"rowheader"===t.cellType?"row-header":""} "><slot></slot></template>`,styles:Eu}),Ru=Eu,Au=Fi.compose({baseName:"data-grid-row",template:(t,e)=>_`<template role="row" class="${t=>"default"!==t.rowType?t.rowType:""}" :defaultCellItemTemplate="${function(t){const e=t.tagFor(Oi);return _`<${e} cell-type="${t=>t.isRowHeader?"rowheader":void 0}" grid-column="${(t,e)=>e.index+1}" :rowData="${(t,e)=>e.parent.rowData}" :columnDefinition="${t=>t}"></${e}>`}(t)}" :defaultHeaderCellItemTemplate="${function(t){const e=t.tagFor(Oi);return _`<${e} cell-type="columnheader" grid-column="${(t,e)=>e.index+1}" :columnDefinition="${t=>t}"></${e}>`}(t)}" ${jt({property:"cellElements",filter:zt('[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"]')})}><slot ${Bt("slottedCellElements")}></slot></template>`,styles:Ou}),Lu=Ou,Pu=Di.compose({baseName:"data-grid",template:(t,e)=>{const i=function(t){const e=t.tagFor(Fi);return _`<${e} :rowData="${t=>t}" :cellItemTemplate="${(t,e)=>e.parent.cellItemTemplate}" :headerCellItemTemplate="${(t,e)=>e.parent.headerCellItemTemplate}"></${e}>`}(t),o=t.tagFor(Fi);return _`<template role="grid" tabindex="0" :rowElementTag="${()=>o}" :defaultRowItemTemplate="${i}" ${jt({property:"rowElements",filter:zt("[role=row]")})}><slot></slot></template>`},styles:Su}),zu=Su,Hu={toView:t=>null==t?null:null==t?void 0:t.toColorString(),fromView(t){if(null==t)return null;const e=Sn(t);return e?En.create(e.r,e.g,e.b):null}},Mu=vt`
   :host{background-color:${ol};color:${lc}}`.withBehaviors(rn(vt`
       :host{background-color:${Ke.Canvas};box-shadow:0 0 0 1px ${Ke.CanvasText};color:${Ke.CanvasText}}`));function Bu(t){return(e,i)=>{e[i+"Changed"]=function(e,i){null!=i?t.setValueFor(this,i):t.deleteValueFor(this)}}}class Nu extends Ee{constructor(){super(),this.noPaint=!1;const t={handleChange:this.noPaintChanged.bind(this)};g.getNotifier(this).subscribe(t,"fillColor"),g.getNotifier(this).subscribe(t,"baseLayerLuminance")}connectedCallback(){super.connectedCallback(),this.noPaintChanged()}noPaintChanged(){this.noPaint||void 0===this.fillColor&&!this.baseLayerLuminance?this.$fastController.removeStyles(Mu):this.$fastController.addStyles(Mu)}}ad([st({attribute:"no-paint",mode:"boolean"})],Nu.prototype,"noPaint",void 0),ad([st({attribute:"fill-color",converter:Hu,mode:"fromView"}),Bu(ol)],Nu.prototype,"fillColor",void 0),ad([st({attribute:"accent-base-color",converter:Hu,mode:"fromView"}),Bu(Ua)],Nu.prototype,"accentBaseColor",void 0),ad([st({attribute:"neutral-base-color",converter:Hu,mode:"fromView"}),Bu(Na)],Nu.prototype,"neutralBaseColor",void 0),ad([st({converter:it}),Bu(ar)],Nu.prototype,"density",void 0),ad([st({attribute:"design-unit",converter:it}),Bu(lr)],Nu.prototype,"designUnit",void 0),ad([st({attribute:"direction"}),Bu(or)],Nu.prototype,"direction",void 0),ad([st({attribute:"base-height-multiplier",converter:it}),Bu(nr)],Nu.prototype,"baseHeightMultiplier",void 0),ad([st({attribute:"base-horizontal-spacing-multiplier",converter:it}),Bu(rr)],Nu.prototype,"baseHorizontalSpacingMultiplier",void 0),ad([st({attribute:"control-corner-radius",converter:it}),Bu(cr)],Nu.prototype,"controlCornerRadius",void 0),ad([st({attribute:"layer-corner-radius",converter:it}),Bu(hr)],Nu.prototype,"layerCornerRadius",void 0),ad([st({attribute:"stroke-width",converter:it}),Bu(dr)],Nu.prototype,"strokeWidth",void 0),ad([st({attribute:"focus-stroke-width",converter:it}),Bu(ur)],Nu.prototype,"focusStrokeWidth",void 0),ad([st({attribute:"disabled-opacity",converter:it}),Bu(sr)],Nu.prototype,"disabledOpacity",void 0),ad([st({attribute:"type-ramp-minus-2-font-size"}),Bu(wr)],Nu.prototype,"typeRampMinus2FontSize",void 0),ad([st({attribute:"type-ramp-minus-2-line-height"}),Bu(kr)],Nu.prototype,"typeRampMinus2LineHeight",void 0),ad([st({attribute:"type-ramp-minus-1-font-size"}),Bu(yr)],Nu.prototype,"typeRampMinus1FontSize",void 0),ad([st({attribute:"type-ramp-minus-1-line-height"}),Bu(xr)],Nu.prototype,"typeRampMinus1LineHeight",void 0),ad([st({attribute:"type-ramp-base-font-size"}),Bu(mr)],Nu.prototype,"typeRampBaseFontSize",void 0),ad([st({attribute:"type-ramp-base-line-height"}),Bu(vr)],Nu.prototype,"typeRampBaseLineHeight",void 0),ad([st({attribute:"type-ramp-plus-1-font-size"}),Bu(Ir)],Nu.prototype,"typeRampPlus1FontSize",void 0),ad([st({attribute:"type-ramp-plus-1-line-height"}),Bu(Fr)],Nu.prototype,"typeRampPlus1LineHeight",void 0),ad([st({attribute:"type-ramp-plus-2-font-size"}),Bu(Tr)],Nu.prototype,"typeRampPlus2FontSize",void 0),ad([st({attribute:"type-ramp-plus-2-line-height"}),Bu(Sr)],Nu.prototype,"typeRampPlus2LineHeight",void 0),ad([st({attribute:"type-ramp-plus-3-font-size"}),Bu(Er)],Nu.prototype,"typeRampPlus3FontSize",void 0),ad([st({attribute:"type-ramp-plus-3-line-height"}),Bu(Vr)],Nu.prototype,"typeRampPlus3LineHeight",void 0),ad([st({attribute:"type-ramp-plus-4-font-size"}),Bu(Ar)],Nu.prototype,"typeRampPlus4FontSize",void 0),ad([st({attribute:"type-ramp-plus-4-line-height"}),Bu(Lr)],Nu.prototype,"typeRampPlus4LineHeight",void 0),ad([st({attribute:"type-ramp-plus-5-font-size"}),Bu(zr)],Nu.prototype,"typeRampPlus5FontSize",void 0),ad([st({attribute:"type-ramp-plus-5-line-height"}),Bu(Hr)],Nu.prototype,"typeRampPlus5LineHeight",void 0),ad([st({attribute:"type-ramp-plus-6-font-size"}),Bu(Br)],Nu.prototype,"typeRampPlus6FontSize",void 0),ad([st({attribute:"type-ramp-plus-6-line-height"}),Bu(Nr)],Nu.prototype,"typeRampPlus6LineHeight",void 0),ad([st({attribute:"accent-fill-rest-delta",converter:it}),Bu(qr)],Nu.prototype,"accentFillRestDelta",void 0),ad([st({attribute:"accent-fill-hover-delta",converter:it}),Bu(_r)],Nu.prototype,"accentFillHoverDelta",void 0),ad([st({attribute:"accent-fill-active-delta",converter:it}),Bu(Gr)],Nu.prototype,"accentFillActiveDelta",void 0),ad([st({attribute:"accent-fill-focus-delta",converter:it}),Bu(Wr)],Nu.prototype,"accentFillFocusDelta",void 0),ad([st({attribute:"accent-foreground-rest-delta",converter:it}),Bu(Kr)],Nu.prototype,"accentForegroundRestDelta",void 0),ad([st({attribute:"accent-foreground-hover-delta",converter:it}),Bu(Xr)],Nu.prototype,"accentForegroundHoverDelta",void 0),ad([st({attribute:"accent-foreground-active-delta",converter:it}),Bu(Yr)],Nu.prototype,"accentForegroundActiveDelta",void 0),ad([st({attribute:"accent-foreground-focus-delta",converter:it}),Bu(Qr)],Nu.prototype,"accentForegroundFocusDelta",void 0),ad([st({attribute:"neutral-fill-rest-delta",converter:it}),Bu(Zr)],Nu.prototype,"neutralFillRestDelta",void 0),ad([st({attribute:"neutral-fill-hover-delta",converter:it}),Bu(Jr)],Nu.prototype,"neutralFillHoverDelta",void 0),ad([st({attribute:"neutral-fill-active-delta",converter:it}),Bu(ta)],Nu.prototype,"neutralFillActiveDelta",void 0),ad([st({attribute:"neutral-fill-focus-delta",converter:it}),Bu(ea)],Nu.prototype,"neutralFillFocusDelta",void 0),ad([st({attribute:"neutral-fill-input-rest-delta",converter:it}),Bu(ia)],Nu.prototype,"neutralFillInputRestDelta",void 0),ad([st({attribute:"neutral-fill-input-hover-delta",converter:it}),Bu(oa)],Nu.prototype,"neutralFillInputHoverDelta",void 0),ad([st({attribute:"neutral-fill-input-active-delta",converter:it}),Bu(sa)],Nu.prototype,"neutralFillInputActiveDelta",void 0),ad([st({attribute:"neutral-fill-input-focus-delta",converter:it}),Bu(na)],Nu.prototype,"neutralFillInputFocusDelta",void 0),ad([st({attribute:"neutral-fill-layer-rest-delta",converter:it}),Bu(ha)],Nu.prototype,"neutralFillLayerRestDelta",void 0),ad([st({attribute:"neutral-fill-stealth-rest-delta",converter:it}),Bu(ba)],Nu.prototype,"neutralFillStealthRestDelta",void 0),ad([st({attribute:"neutral-fill-stealth-hover-delta",converter:it}),Bu(ya)],Nu.prototype,"neutralFillStealthHoverDelta",void 0),ad([st({attribute:"neutral-fill-stealth-active-delta",converter:it}),Bu(xa)],Nu.prototype,"neutralFillStealthActiveDelta",void 0),ad([st({attribute:"neutral-fill-stealth-focus-delta",converter:it}),Bu($a)],Nu.prototype,"neutralFillStealthFocusDelta",void 0),ad([st({attribute:"neutral-fill-strong-hover-delta",converter:it}),Bu(ka)],Nu.prototype,"neutralFillStrongHoverDelta",void 0),ad([st({attribute:"neutral-fill-strong-active-delta",converter:it}),Bu(Ca)],Nu.prototype,"neutralFillStrongActiveDelta",void 0),ad([st({attribute:"neutral-fill-strong-focus-delta",converter:it}),Bu(Ia)],Nu.prototype,"neutralFillStrongFocusDelta",void 0),ad([st({attribute:"base-layer-luminance",converter:it}),Bu(Ur)],Nu.prototype,"baseLayerLuminance",void 0),ad([st({attribute:"neutral-stroke-divider-rest-delta",converter:it}),Bu(Aa)],Nu.prototype,"neutralStrokeDividerRestDelta",void 0),ad([st({attribute:"neutral-stroke-rest-delta",converter:it}),Bu(Fa)],Nu.prototype,"neutralStrokeRestDelta",void 0),ad([st({attribute:"neutral-stroke-hover-delta",converter:it}),Bu(Da)],Nu.prototype,"neutralStrokeHoverDelta",void 0),ad([st({attribute:"neutral-stroke-active-delta",converter:it}),Bu(Ta)],Nu.prototype,"neutralStrokeActiveDelta",void 0),ad([st({attribute:"neutral-stroke-focus-delta",converter:it}),Bu(Sa)],Nu.prototype,"neutralStrokeFocusDelta",void 0);const ju=Nu.compose({baseName:"design-system-provider",template:_`<slot></slot>`,styles:vt`
     ${ln("block")}
   `}),Uu=(t,e)=>vt`
   :host([hidden]){display:none}:host{--dialog-height:480px;--dialog-width:640px;display:block}.overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.3);touch-action:none}.positioning-region{display:flex;justify-content:center;position:fixed;top:0;bottom:0;left:0;right:0;overflow:auto}.control{box-shadow:${Dd};margin-top:auto;margin-bottom:auto;border-radius:calc(${hr} * 1px);width:var(--dialog-width);height:var(--dialog-height);background:${ol};z-index:1;border:calc(${dr} * 1px) solid transparent}`,qu=Po.compose({baseName:"dialog",template:(t,e)=>_`<div class="positioning-region" part="positioning-region">${Ot(t=>t.modal,_`<div class="overlay" part="overlay" role="presentation" @click="${t=>t.dismiss()}"></div>`)}<div role="dialog" tabindex="-1" class="control" part="control" aria-modal="${t=>t.modal}" aria-describedby="${t=>t.ariaDescribedby}" aria-labelledby="${t=>t.ariaLabelledby}" aria-label="${t=>t.ariaLabel}" ${St("dialog")}><slot></slot></div></div>`,styles:Uu}),_u=Uu,Gu=(t,e)=>vt`
-    ${ln("block")} :host{box-sizing:content-box;height:0;border:none;border-top:calc(${dr} * 1px) solid ${Ic}}`,Wu=Ho.compose({baseName:"divider",template:(t,e)=>_`<template role="${t=>t.role}" aria-orientation="${t=>t.orientation}"></template>`,styles:Gu}),Ku=Gu,Xu=(t,e)=>vt`
+    ${ln("block")} :host{box-sizing:content-box;height:0;border:none;border-top:calc(${dr} * 1px) solid ${Ic}}:host([orientation="vertical"]){border:none;height:100%;margin:0 calc(${lr} * 1px);border-left:calc(${dr} * 1px) solid ${Ic}}`,Wu=Ho.compose({baseName:"divider",template:(t,e)=>_`<template role="${t=>t.role}" aria-orientation="${t=>t.orientation}"></template>`,styles:Gu}),Ku=Gu,Xu=(t,e)=>vt`
     ${ln("inline-flex")} :host{height:calc((${Zh} + ${lr}) * 1px);justify-content:center;align-items:center;fill:currentcolor;color:${oc};background:padding-box linear-gradient(${Fl},${Fl}),border-box ${xc};box-sizing:border-box;border:calc(${dr} * 1px) solid transparent;border-radius:calc(${cr} * 1px);padding:0}:host(.disabled){opacity:${sr};cursor:${"not-allowed"};pointer-events:none}.next,.previous{display:flex}:host(:not(.disabled):hover){cursor:pointer}:host(:not(.disabled):hover){color:${sc}}:host(:not(.disabled):active){color:${nc}}:host(:${cn}){${Yh}}:host::-moz-focus-inner{border:0}`.withBehaviors(rn(vt`
         :host{background:${Ke.ButtonFace};border-color:${Ke.ButtonText}}:host .next,:host .previous{color:${Ke.ButtonText};fill:currentcolor}:host(:not(.disabled):hover){background:${Ke.Highlight}}:host(:not(.disabled):hover) .next,:host(:not(.disabled):hover) .previous{color:${Ke.HighlightText};fill:currentcolor}:host(.disabled){opacity:1}:host(.disabled),:host(.disabled) .next,:host(.disabled) .previous{border-color:${Ke.GrayText};color:${Ke.GrayText};fill:currentcolor}:host(:${cn}){forced-color-adjust:none;outline-color:${Ke.Highlight}}`)),Yu=No.compose({baseName:"flipper",template:(t,e)=>_`<template role="button" aria-disabled="${t=>!!t.disabled||void 0}" tabindex="${t=>t.hiddenFromAT?-1:0}" class="${t=>t.direction} ${t=>t.disabled?"disabled":""}" @keyup="${(t,e)=>t.keyupHandler(e.event)}">${Ot(t=>t.direction===Mo,_`<span part="next" class="next"><slot name="next">${e.next||""}</slot></span>`)} ${Ot(t=>t.direction===Bo,_`<span part="previous" class="previous"><slot name="previous">${e.previous||""}</slot></span>`)}</template>`,styles:Xu,next:'\n    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n      <path d="M7.57 11.84A1 1 0 016 11.02V4.98a1 1 0 011.57-.82l3.79 2.62c.85.59.85 1.85 0 2.44l-3.79 2.62z"/>\n    </svg>\n  ',previous:'\n    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n      <path d="M9.43 11.84a1 1 0 001.57-.82V4.98a1 1 0 00-1.57-.82L5.64 6.78c-.85.59-.85 1.85 0 2.44l3.79 2.62z"/>\n    </svg>\n  '}),Qu=Xu,Zu=vt`
   .scroll-prev{right:auto;left:0}.scroll.scroll-next::before,.scroll-next .scroll-action{left:auto;right:0}.scroll.scroll-next::before{background:linear-gradient(to right,transparent,var(--scroll-fade-next))}.scroll-next .scroll-action{transform:translate(50%,-50%)}`,Ju=vt`
@@ -157,7 +157,8 @@ ${ln("inline-block")} :host{--calendar-cell-size:calc((${nr} + 2 + ${ar}) * ${lr
     ${ln("inline-flex")} :host{border:calc(${dr} * 1px) solid ${fc};border-radius:calc(${cr} * 1px);box-sizing:border-box;flex-direction:column;padding:calc(${lr} * 1px) 0}::slotted(${t.tagFor(Mi)}){margin:0 calc(${lr} * 1px)}:host(:focus-within:not([disabled])){${Yh}}`;class rp extends Ni{}const ap=rp.compose({baseName:"listbox",template:(t,e)=>_`<template aria-activedescendant="${t=>t.ariaActiveDescendant}" aria-multiselectable="${t=>t.ariaMultiSelectable}" class="listbox" role="listbox" tabindex="${t=>t.disabled?null:"0"}" @click="${(t,e)=>t.clickHandler(e.event)}" @focusin="${(t,e)=>t.focusinHandler(e.event)}" @keydown="${(t,e)=>t.keydownHandler(e.event)}" @mousedown="${(t,e)=>t.mousedownHandler(e.event)}"><slot ${Bt({filter:jo.slottedOptionFilter,flatten:!0,property:"slottedOptions"})}></slot></template>`,styles:np}),lp=np,cp=(t,e)=>vt`
     ${ln("inline-flex")} :host{position:relative;${Bh}
       background:${Zl};border-radius:calc(${cr} * 1px);border:calc(${dr} * 1px) solid transparent;box-sizing:border-box;color:${lc};cursor:pointer;fill:currentcolor;height:calc(${Zh} * 1px);overflow:hidden;align-items:center;padding:0 calc(((${lr} * 3) - ${dr} - 1) * 1px);user-select:none;white-space:nowrap}:host::before{content:'';display:block;position:absolute;left:calc((${ur} - ${dr}) * 1px);top:calc((${Zh} / 4) - ${ur} * 1px);width:3px;height:calc((${Zh} / 2) * 1px);background:transparent;border-radius:calc(${cr} * 1px)}:host(:not([disabled]):hover){background:${Jl}}:host(:not([disabled]):active){background:${tc}}:host(:not([disabled]):active)::before{background:${rl};height:calc(((${Zh} / 2) - 6) * 1px)}:host([aria-selected='true'])::before{background:${rl}}:host(:${cn}){${Yh}
-      background:${ec}}:host([aria-selected='true']){background:${Wl}}:host(:not([disabled])[aria-selected='true']:hover){background:${Kl}}:host(:not([disabled])[aria-selected='true']:active){background:${Xl}}:host(:not([disabled]):not([aria-selected='true']):hover){background:${Jl}}:host(:not([disabled]):not([aria-selected='true']):active){background:${tc}}:host([disabled]){cursor:${"not-allowed"};opacity:${sr}}.content{grid-column-start:2;justify-self:start;overflow:hidden;text-overflow:ellipsis}.start,.end,::slotted(svg){display:flex}::slotted([slot='end']){margin-inline-start:1ch}::slotted([slot='start']){margin-inline-end:1ch}`.withBehaviors(rn(vt`
+      background:${ec}}:host([aria-selected='true']){background:${Wl}}:host(:not([disabled])[aria-selected='true']:hover){background:${Kl}}:host(:not([disabled])[aria-selected='true']:active){background:${Xl}}:host(:not([disabled]):not([aria-selected='true']):hover){background:${Jl}}:host(:not([disabled]):not([aria-selected='true']):active){background:${tc}}:host([disabled]){cursor:${"not-allowed"};opacity:${sr}}.content{grid-column-start:2;justify-self:start;overflow:hidden;text-overflow:ellipsis}.start,.end,::slotted(svg){display:flex}::slotted([slot='end']){margin-inline-start:1ch}::slotted([slot='start']){margin-inline-end:1ch}`.withBehaviors(new ld(null,vt`
+      :host::before{right:calc((${ur} - ${dr}) * 1px)}`),rn(vt`
         :host{background:${Ke.ButtonFace};border-color:${Ke.ButtonFace};color:${Ke.ButtonText}}:host(:not([disabled]):not([aria-selected="true"]):hover),:host(:not([disabled])[aria-selected="true"]:hover),:host([aria-selected="true"]){forced-color-adjust:none;background:${Ke.Highlight};color:${Ke.HighlightText}}:host(:not([disabled]):active)::before,:host([aria-selected='true'])::before{background:${Ke.HighlightText}}:host([disabled]),:host([disabled]:not([aria-selected='true']):hover){background:${Ke.Canvas};color:${Ke.GrayText};fill:currentcolor;opacity:1}:host(:${cn}){outline-color:${Ke.CanvasText}}`)),hp=Mi.compose({baseName:"option",template:(t,e)=>_`<template aria-checked="${t=>t.ariaChecked}" aria-disabled="${t=>t.ariaDisabled}" aria-posinset="${t=>t.ariaPosInSet}" aria-selected="${t=>t.ariaSelected}" aria-setsize="${t=>t.ariaSetSize}" class="${t=>[t.checked&&"checked",t.selected&&"selected",t.disabled&&"disabled"].filter(Boolean).join(" ")}" role="option">${_t(0,e)}<span class="content" part="content"><slot ${Bt("content")}></slot></span>${qt(0,e)}</template>`,styles:cp}),dp=cp,up=(t,e)=>vt`
     ${ln("block")} :host{background:${Ka};border:calc(${dr} * 1px) solid transparent;border-radius:calc(${hr} * 1px);box-shadow:${Id};padding:calc((${lr} - ${dr}) * 1px) 0;max-width:368px;min-width:64px}:host([slot='submenu']){width:max-content;margin:0 calc(${lr} * 2px)}::slotted(${t.tagFor(Wo)}){margin:0 calc(${lr} * 1px)}::slotted(${t.tagFor(Ho)}){margin:calc(${lr} * 1px) 0}::slotted(hr){box-sizing:content-box;height:0;margin:calc(${lr} * 1px) 0;border:none;border-top:calc(${dr} * 1px) solid ${Ic}}`.withBehaviors(rn(vt`
         :host([slot='submenu']){background:${Ke.Canvas};border-color:${Ke.CanvasText}}`));class pp extends Ko{connectedCallback(){super.connectedCallback(),ol.setValueFor(this,Ka)}}const gp=pp.compose({baseName:"menu",baseClass:Ko,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 ${Bt("items")}></slot></template>`,styles:up}),fp=up,mp=(t,e)=>vt`
@@ -218,7 +219,7 @@ ${ln("inline-block")} :host{--calendar-cell-size:calc((${nr} + 2 + ${ar}) * ${lr
 
     ${Bd()}
 
-    :host{flex-direction:column;vertical-align:bottom}.control{height:calc((${Zh} * 2) * 1px);padding:calc(${lr} * 1.5px) calc(${lr} * 2px + 1px)}:host .control{resize:none}:host(.resize-both) .control{resize:both}:host(.resize-horizontal) .control{resize:horizontal}:host(.resize-vertical) .control{resize:vertical}`.withBehaviors(qd("outline",Nd(0,0,".control")),qd("filled",jd(0,0,".control")),rn(Ud(0,0,".control")));class fg extends Ps{appearanceChanged(t,e){t!==e&&(this.classList.add(e),this.classList.remove(t))}connectedCallback(){super.connectedCallback(),this.appearance||(this.appearance="outline")}}ad([st],fg.prototype,"appearance",void 0);const mg=fg.compose({baseName:"text-area",baseClass:Ps,template:(t,e)=>_`<template class=" ${t=>t.readOnly?"readonly":""} ${t=>t.resize!==Ls?"resize-"+t.resize:""}"><label part="label" for="control" class="${t=>t.defaultSlottedNodes&&t.defaultSlottedNodes.length?"label":"label label__hidden"}"><slot ${Bt("defaultSlottedNodes")}></slot></label><textarea part="control" class="control" id="control" ?autofocus="${t=>t.autofocus}" cols="${t=>t.cols}" ?disabled="${t=>t.disabled}" form="${t=>t.form}" list="${t=>t.list}" maxlength="${t=>t.maxlength}" minlength="${t=>t.minlength}" name="${t=>t.name}" placeholder="${t=>t.placeholder}" ?readonly="${t=>t.readOnly}" ?required="${t=>t.required}" rows="${t=>t.rows}" ?spellcheck="${t=>t.spellcheck}" :value="${t=>t.value}" aria-atomic="${t=>t.ariaAtomic}" aria-busy="${t=>t.ariaBusy}" aria-controls="${t=>t.ariaControls}" aria-current="${t=>t.ariaCurrent}" aria-describedby="${t=>t.ariaDescribedby}" aria-details="${t=>t.ariaDetails}" aria-disabled="${t=>t.ariaDisabled}" aria-errormessage="${t=>t.ariaErrormessage}" aria-flowto="${t=>t.ariaFlowto}" aria-haspopup="${t=>t.ariaHaspopup}" aria-hidden="${t=>t.ariaHidden}" aria-invalid="${t=>t.ariaInvalid}" aria-keyshortcuts="${t=>t.ariaKeyshortcuts}" aria-label="${t=>t.ariaLabel}" aria-labelledby="${t=>t.ariaLabelledby}" aria-live="${t=>t.ariaLive}" aria-owns="${t=>t.ariaOwns}" aria-relevant="${t=>t.ariaRelevant}" aria-roledescription="${t=>t.ariaRoledescription}" @input="${(t,e)=>t.handleTextInput()}" @change="${t=>t.handleChange()}" ${St("control")}></textarea></template>`,styles:gg,shadowOptions:{delegatesFocus:!0}}),vg=gg,bg=(t,e)=>vt`
+    :host{flex-direction:column;vertical-align:bottom}.control{height:calc((${Zh} * 2) * 1px);padding:calc(${lr} * 1.5px) calc(${lr} * 2px + 1px)}:host .control{resize:none}:host(.resize-both) .control{resize:both}:host(.resize-horizontal) .control{resize:horizontal}:host(.resize-vertical) .control{resize:vertical}:host([cols]){width:initial}:host([rows]) .control{height:initial}`.withBehaviors(qd("outline",Nd(0,0,".control")),qd("filled",jd(0,0,".control")),rn(Ud(0,0,".control")));class fg extends Ps{appearanceChanged(t,e){t!==e&&(this.classList.add(e),this.classList.remove(t))}connectedCallback(){super.connectedCallback(),this.appearance||(this.appearance="outline")}}ad([st],fg.prototype,"appearance",void 0);const mg=fg.compose({baseName:"text-area",baseClass:Ps,template:(t,e)=>_`<template class=" ${t=>t.readOnly?"readonly":""} ${t=>t.resize!==Ls?"resize-"+t.resize:""}"><label part="label" for="control" class="${t=>t.defaultSlottedNodes&&t.defaultSlottedNodes.length?"label":"label label__hidden"}"><slot ${Bt("defaultSlottedNodes")}></slot></label><textarea part="control" class="control" id="control" ?autofocus="${t=>t.autofocus}" cols="${t=>t.cols}" ?disabled="${t=>t.disabled}" form="${t=>t.form}" list="${t=>t.list}" maxlength="${t=>t.maxlength}" minlength="${t=>t.minlength}" name="${t=>t.name}" placeholder="${t=>t.placeholder}" ?readonly="${t=>t.readOnly}" ?required="${t=>t.required}" rows="${t=>t.rows}" ?spellcheck="${t=>t.spellcheck}" :value="${t=>t.value}" aria-atomic="${t=>t.ariaAtomic}" aria-busy="${t=>t.ariaBusy}" aria-controls="${t=>t.ariaControls}" aria-current="${t=>t.ariaCurrent}" aria-describedby="${t=>t.ariaDescribedby}" aria-details="${t=>t.ariaDetails}" aria-disabled="${t=>t.ariaDisabled}" aria-errormessage="${t=>t.ariaErrormessage}" aria-flowto="${t=>t.ariaFlowto}" aria-haspopup="${t=>t.ariaHaspopup}" aria-hidden="${t=>t.ariaHidden}" aria-invalid="${t=>t.ariaInvalid}" aria-keyshortcuts="${t=>t.ariaKeyshortcuts}" aria-label="${t=>t.ariaLabel}" aria-labelledby="${t=>t.ariaLabelledby}" aria-live="${t=>t.ariaLive}" aria-owns="${t=>t.ariaOwns}" aria-relevant="${t=>t.ariaRelevant}" aria-roledescription="${t=>t.ariaRoledescription}" @input="${(t,e)=>t.handleTextInput()}" @change="${t=>t.handleChange()}" ${St("control")}></textarea></template>`,styles:gg,shadowOptions:{delegatesFocus:!0}}),vg=gg,bg=(t,e)=>vt`
     ${ln("inline-block")}
 
     ${Md(0,0,".root")}

package/docs/api-report.md

@@ -228,7 +228,7 @@ export const allComponents: {
     fluentTooltip: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Tooltip>;
     fluentTreeView: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof TreeView>;
     fluentTreeItem: (overrideDefinition?: OverrideFoundationElementDefinition<TreeItemOptions> | undefined) => FoundationElementRegistry<TreeItemOptions, Constructable<FoundationElement>>;
-    register(container?: Container | undefined, ...rest: any[]): void;
+    register(container?: Container, ...rest: any[]): void;
 };
 
 // Warning: (ae-internal-missing-underscore) The name "ambientShadow" should be prefixed with an underscore because the declaration is marked as @internal

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fluentui/web-components",
   "description": "A library of Fluent Web Components",
   "sideEffects": false,
-  "version": "2.5.14",
+  "version": "2.5.16",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"

package/project.json

@@ -0,0 +1,6 @@
+{
+  "name": "@fluentui/web-components",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "implicitDependencies": []
+}

package/dist/tsdoc-metadata.json

@@ -1,11 +0,0 @@
-// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
-// It should be published with your NPM package.  It should not be tracked by Git.
-{
-  "tsdocVersion": "0.12",
-  "toolPackages": [
-    {
-      "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.18.1"
-    }
-  ]
-}