@fluentui/web-components 3.0.0-rc.23 → 3.0.0-rc.25

package/dist/web-components.d.ts

@@ -6853,6 +6853,11 @@ export declare const DialogStyles: ElementStyles;
 
 /**
  * Template for the Dialog component
+ *
+ * Note: The empty `<div tabindex="-1">` element above the `<slot>` element is
+ * for working around a dialog focus issue, learn more at
+ * https://github.com/microsoft/fluentui/pull/36278
+ *
  * @public
  */
 export declare const DialogTemplate: ElementViewTemplate<Dialog>;

package/dist/web-components.js

@@ -7063,9 +7063,9 @@ __decorateClass$B([
   volatile
 ], Dialog.prototype, "dialogRole", 1);
 
-const template$w = html`<dialog class=dialog part=dialog aria-modal=${(x) => x.dialogModal} aria-describedby=${(x) => x.dialogDescribedby} aria-labelledby=${(x) => x.dialogLabelledby} aria-label=${(x) => x.dialogLabel} role=${(x) => x.dialogRole} @click=${(x, c) => x.clickHandler(c.event)} @cancel=${(x) => x.hide()} ${ref("dialog")}><slot></slot></dialog>`;
+const template$w = html`<dialog class=dialog part=dialog aria-modal=${(x) => x.dialogModal} aria-describedby=${(x) => x.dialogDescribedby} aria-labelledby=${(x) => x.dialogLabelledby} aria-label=${(x) => x.dialogLabel} role=${(x) => x.dialogRole} @click=${(x, c) => x.clickHandler(c.event)} @cancel=${(x) => x.hide()} ${ref("dialog")}><div tabindex=-1></div><slot></slot></dialog>`;
 
-const styles$w = css`@layer base{:host{--dialog-backdrop:${colorBackgroundOverlay};--dialog-starting-scale:0.85}::backdrop{background:var(--dialog-backdrop,rgba(0,0,0,0.4))}dialog{background:${colorNeutralBackground1};border-radius:${borderRadiusXLarge};border:none;box-shadow:${shadow64};color:${colorNeutralForeground1};max-height:100vh;padding:0;width:100%;max-width:600px}:host([type='non-modal']) dialog{inset:0;position:fixed;z-index:2;overflow:auto}@supports (max-height:1dvh){dialog{max-height:100dvh}}}@layer animations{@media (prefers-reduced-motion:no-preference){dialog,::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};opacity:0}::backdrop{transition-timing-function:${curveLinear}}[open],[open]::backdrop{opacity:1}dialog:not([open]){scale:var(--dialog-starting-scale);transition-timing-function:${curveAccelerateMid}}}@starting-style{[open],[open]::backdrop{opacity:0}dialog{scale:var(--dialog-starting-scale)}}}@media (forced-colors:active){@layer base{dialog{border:${strokeWidthThin} solid ${colorTransparentStroke}}}}`;
+const styles$w = css`@layer base{:host{--dialog-backdrop:${colorBackgroundOverlay};--dialog-starting-scale:0.85}::backdrop{background:var(--dialog-backdrop,rgba(0,0,0,0.4))}dialog{background:${colorNeutralBackground1};border-radius:${borderRadiusXLarge};border:none;box-shadow:${shadow64};color:${colorNeutralForeground1};max-height:100vh;padding:0;width:100%;max-width:600px}:host([type='non-modal']) dialog{inset:0;z-index:2;overflow:auto}@supports (max-height:1dvh){dialog{max-height:100dvh}}}@layer animations{@media (prefers-reduced-motion:no-preference){dialog,::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};opacity:0}::backdrop{transition-timing-function:${curveLinear}}[open],[open]::backdrop{opacity:1}dialog:not([open]){scale:var(--dialog-starting-scale);transition-timing-function:${curveAccelerateMid}}}@starting-style{[open],[open]::backdrop{opacity:0}dialog{scale:var(--dialog-starting-scale)}}}@media (forced-colors:active){@layer base{dialog{border:${strokeWidthThin} solid ${colorTransparentStroke}}}}`;
 
 const definition$w = Dialog.compose({
   name: tagName$w,
@@ -8387,7 +8387,7 @@ __decorateClass$w([
   attr
 ], Dropdown.prototype, "size", 2);
 
-const styles$r = css`${display("inline-flex")} :host{anchor-name:--dropdown-trigger;box-sizing:border-box;color:${colorNeutralForeground1};cursor:pointer}:host(${placeholderShownState}){color:${colorNeutralForeground4}}.control{appearance:none;background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:inset 0 0 0 ${strokeWidthThin} var(--control-border-color);box-sizing:border-box;color:inherit;column-gap:${spacingHorizontalXXS};display:inline-flex;justify-content:space-between;min-width:160px;overflow:hidden;padding:${spacingVerticalSNudge} ${spacingHorizontalMNudge};white-space:normal;position:relative;text-align:start;width:100%;z-index:1;${typographyBody1Styles}}:host([size='small']) .control{column-gap:${spacingHorizontalXXS};padding:${spacingVerticalXS} ${spacingHorizontalSNudge};${typographyCaption1Styles}}:host([size='large']) .control{column-gap:${spacingHorizontalS};padding:${spacingVerticalS} ${spacingHorizontalM};${typographyBody2Styles}}::slotted(:is(input,button)){all:unset;flex:1 1 auto}::slotted(button){cursor:pointer}::slotted(input){cursor:text}:where(slot[name='indicator']>*,::slotted([slot='indicator'])){all:unset;align-items:center;appearance:none;aspect-ratio:1;color:${colorNeutralForeground3};display:inline-flex;justify-content:center;width:20px}:host([size='small']) :where(slot[name='indicator']>*,::slotted([slot='indicator'])){width:16px}:host([size='large']) :where(slot[name='indicator']>*,::slotted([slot='indicator'])){width:24px}.control::after,.control::before{content:''/'';inset:auto 0 0;pointer-events:none;position:absolute}.control::before{height:${strokeWidthThin}}.control::after{background-color:${colorCompoundBrandStroke};height:${strokeWidthThick};scale:0 1;transition:scale ${durationUltraFast} ${curveDecelerateMid}}:host(:where(:focus-within)) .control{border-radius:${borderRadiusMedium};box-shadow:inset 0 0 0 1px ${colorStrokeFocus1};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}:host(:where(${openState},:focus-within)) .control::after{scale:1 1;transition-duration:${durationNormal};transition-timing-function:${curveAccelerateMid}}:host(:where([appearance='outline'],[appearance='transparent'])) .control::before{background-color:${colorNeutralStrokeAccessible}}:host([appearance='transparent']) .control{--control-border-color:${colorTransparentStrokeInteractive};background-color:${colorTransparentBackground};border-radius:${borderRadiusNone}}:host([appearance='outline']) .control{--control-border-color:${colorNeutralStroke1}}:host([appearance='outline']) .control:hover{--control-border-color:${colorNeutralStroke1Hover}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:hover::before{background-color:${colorNeutralStrokeAccessibleHover}}:host([appearance='outline']) .control:hover::after{background-color:${colorCompoundBrandBackgroundHover}}:host([appearance='outline']) .control:active{--control-border-color:${colorNeutralStroke1Pressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::before{background-color:${colorNeutralStrokeAccessiblePressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::after{background-color:${colorCompoundBrandBackgroundPressed}}:host([appearance='filled-darker']) .control{background-color:${colorNeutralBackground3}}:host(:where([appearance='filled-lighter'],[appearance='filled-darker'])) .control{--control-border-color:${colorTransparentStroke}}:host(:disabled),:host(:disabled) ::slotted(:where(button,input)){cursor:not-allowed}:host(:disabled) .control::before,:host(:disabled) .control::after{content:none}:host(:disabled) .control:is(*,:active,:hover),:host(:disabled) :where(slot[name='indicator']>*,::slotted([slot='indicator'])){--control-border-color:${colorNeutralStrokeDisabled};background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}::slotted(:not([slot]):not([popover])),::slotted([popover]:not(:popover-open)){display:none}@supports not (anchor-name:--anchor){:host{--listbox-max-height:50vh;--margin-offset:calc(${lineHeightBase300} + (${spacingVerticalSNudge} * 2) + ${strokeWidthThin})}:host([size='small']){--margin-offset:calc(${lineHeightBase200} + (${spacingVerticalXS} * 2) + ${strokeWidthThin})}:host([size='large']){--margin-offset:calc(${lineHeightBase400} + (${spacingVerticalS} * 2) + ${strokeWidthThin})}}@media (forced-colors:active){:host(:disabled) .control{border-color:GrayText}:host(:disabled) :where(slot[name='indicator']>*,::slotted([slot='indicator'])){color:GrayText}`;
+const styles$r = css`${display("inline-flex")} :host{box-sizing:border-box;color:${colorNeutralForeground1};cursor:pointer}:host(${placeholderShownState}){color:${colorNeutralForeground4}}.control{appearance:none;background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:inset 0 0 0 ${strokeWidthThin} var(--control-border-color);box-sizing:border-box;color:inherit;column-gap:${spacingHorizontalXXS};display:inline-flex;justify-content:space-between;min-width:160px;overflow:hidden;padding:${spacingVerticalSNudge} ${spacingHorizontalMNudge};white-space:normal;position:relative;text-align:start;width:100%;z-index:1;${typographyBody1Styles}}:host([size='small']) .control{column-gap:${spacingHorizontalXXS};padding:${spacingVerticalXS} ${spacingHorizontalSNudge};${typographyCaption1Styles}}:host([size='large']) .control{column-gap:${spacingHorizontalS};padding:${spacingVerticalS} ${spacingHorizontalM};${typographyBody2Styles}}::slotted(:is(input,button)){all:unset;flex:1 1 auto}::slotted(button){cursor:pointer}::slotted(input){cursor:text}:where(slot[name='indicator']>*,::slotted([slot='indicator'])){all:unset;align-items:center;appearance:none;aspect-ratio:1;color:${colorNeutralForeground3};display:inline-flex;justify-content:center;width:20px}:host([size='small']) :where(slot[name='indicator']>*,::slotted([slot='indicator'])){width:16px}:host([size='large']) :where(slot[name='indicator']>*,::slotted([slot='indicator'])){width:24px}.control::after,.control::before{content:''/'';inset:auto 0 0;pointer-events:none;position:absolute}.control::before{height:${strokeWidthThin}}.control::after{background-color:${colorCompoundBrandStroke};height:${strokeWidthThick};scale:0 1;transition:scale ${durationUltraFast} ${curveDecelerateMid}}:host(:where(:focus-within)) .control{border-radius:${borderRadiusMedium};box-shadow:inset 0 0 0 1px ${colorStrokeFocus1};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}:host(:where(${openState},:focus-within)) .control::after{scale:1 1;transition-duration:${durationNormal};transition-timing-function:${curveAccelerateMid}}:host(:where([appearance='outline'],[appearance='transparent'])) .control::before{background-color:${colorNeutralStrokeAccessible}}:host([appearance='transparent']) .control{--control-border-color:${colorTransparentStrokeInteractive};background-color:${colorTransparentBackground};border-radius:${borderRadiusNone}}:host([appearance='outline']) .control{--control-border-color:${colorNeutralStroke1}}:host([appearance='outline']) .control:hover{--control-border-color:${colorNeutralStroke1Hover}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:hover::before{background-color:${colorNeutralStrokeAccessibleHover}}:host([appearance='outline']) .control:hover::after{background-color:${colorCompoundBrandBackgroundHover}}:host([appearance='outline']) .control:active{--control-border-color:${colorNeutralStroke1Pressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::before{background-color:${colorNeutralStrokeAccessiblePressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::after{background-color:${colorCompoundBrandBackgroundPressed}}:host([appearance='filled-darker']) .control{background-color:${colorNeutralBackground3}}:host(:where([appearance='filled-lighter'],[appearance='filled-darker'])) .control{--control-border-color:${colorTransparentStroke}}:host(:disabled),:host(:disabled) ::slotted(:where(button,input)){cursor:not-allowed}:host(:disabled) .control::before,:host(:disabled) .control::after{content:none}:host(:disabled) .control:is(*,:active,:hover),:host(:disabled) :where(slot[name='indicator']>*,::slotted([slot='indicator'])){--control-border-color:${colorNeutralStrokeDisabled};background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}::slotted(:not([slot]):not([popover])),::slotted([popover]:not(:popover-open)){display:none}@supports not (anchor-name:--anchor){:host{--listbox-max-height:50vh;--margin-offset:calc(${lineHeightBase300} + (${spacingVerticalSNudge} * 2) + ${strokeWidthThin})}:host([size='small']){--margin-offset:calc(${lineHeightBase200} + (${spacingVerticalXS} * 2) + ${strokeWidthThin})}:host([size='large']){--margin-offset:calc(${lineHeightBase400} + (${spacingVerticalS} * 2) + ${strokeWidthThin})}}@media (forced-colors:active){:host(:disabled) .control{border-color:GrayText}:host(:disabled) :where(slot[name='indicator']>*,::slotted([slot='indicator'])){color:GrayText}`;
 
 const definition$r = Dropdown.compose({
   name: tagName$r,
@@ -8966,7 +8966,7 @@ __decorateClass$q([
   observable
 ], Listbox.prototype, "dropdown", 2);
 
-const styles$m = css`${display("inline-flex")} :host{background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:${shadow16};box-sizing:border-box;flex-direction:column;margin:0;min-width:160px;padding:${spacingHorizontalXS};row-gap:${spacingHorizontalXXS};width:auto}:host([popover]){inset:unset;overflow:auto}@supports (anchor-name:--anchor){:host([popover]){position:absolute;margin-block-start:0;max-height:var(--listbox-max-height,calc(50vh - anchor-size(self-block)));min-width:anchor-size(width);position-anchor:--dropdown;position-area:block-end span-inline-end;position-try-fallbacks:flip-inline,flip-block,--flip-block,block-start}@position-try --flip-block{bottom:anchor(top);top:unset}}@supports not (anchor-name:--anchor){:host([popover]){margin-block-start:var(--margin-offset,0);max-height:var(--listbox-max-height,50vh);position:fixed}:host([popover]${flipBlockState}){margin-block-start:revert;translate:0 -100%}}`;
+const styles$m = css`${display("inline-flex")} :host{background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:${shadow16};box-sizing:border-box;flex-direction:column;margin:0;min-inline-size:160px;padding:${spacingHorizontalXS};row-gap:${spacingHorizontalXXS};width:auto}:host([popover]){inset:unset;overflow:auto}@supports (anchor-name:--anchor){:host([popover]){position:fixed;max-block-size:var(--listbox-max-height,calc(50vh - anchor-size(self-block)));min-inline-size:anchor-size(inline);inset-block-start:anchor(end);inset-inline-start:anchor(start);position-try-fallbacks:flip-block,flip-inline,flip-inline flip-block}}@supports not (anchor-name:--anchor){:host([popover]){margin-block-start:var(--margin-offset,0);max-block-size:var(--listbox-max-height,50vh);position:absolute}:host([popover]${flipBlockState}){margin-block-start:revert;translate:0 -100%}}`;
 
 function listboxTemplate() {
   return html`<template @beforetoggle=${(x, c) => x.beforetoggleHandler(c.event)} @click=${(x, c) => x.clickHandler(c.event)}><slot ${ref("defaultSlot")} @slotchange=${(x, c) => x.slotchangeHandler(c.event)}></slot></template>`;
@@ -9256,7 +9256,7 @@ __decorateClass$p([
 ], MenuItem.prototype, "submenu", 2);
 applyMixins(MenuItem, StartEnd);
 
-const styles$k = 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]){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,block-start,block-end;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}}}@media (forced-colors:active){:host(${disabledState}),:host(${disabledState}) ::slotted([slot='start']),:host(${disabledState}) ::slotted([slot='end']){color:GrayText}}`;
+const styles$k = 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]){margin:0;max-height:var(--menu-max-height,auto);position:fixed;position-anchor:--menu-trigger;inset:unset;inset-block-start:anchor(start);inset-inline-start:anchor(end);position-try-fallbacks:flip-inline,block-start,block-end;z-index:1}::slotted([popover]:not(:popover-open)){display:none}@supports not (anchor-name:--menu-trigger){::slotted([popover]){align-self:start}}}@media (forced-colors:active){: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>`
@@ -10256,7 +10256,7 @@ __decorateClass$n([
   observable
 ], Menu.prototype, "primaryAction", 2);
 
-const styles$i = css`${display("inline-block")} ::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}`;
+const styles$i = css`${display("inline-block")} ::slotted([slot='trigger']){anchor-name:--menu-trigger}::slotted([popover]){margin:0;max-height:var(--menu-max-height,auto);position-anchor:--menu-trigger;inset:unset;inset-block-start:anchor(end);inset-inline-start:anchor(start);position-try-fallbacks:flip-block;position:fixed;z-index:1}:host([split]) ::slotted([popover]){inset-inline-start:auto;inset-inline-end:anchor(end)}::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 @keydown=${(x, c) => x.menuKeydownHandler(c.event)}><slot name=primary-action ${ref("primaryAction")}></slot><slot name=trigger ${slotted({ property: "slottedTriggers", filter: elements() })}></slot><slot ${slotted({ property: "slottedMenuList", filter: elements() })}></slot></template>`;
@@ -12506,7 +12506,7 @@ __decorateClass$b([
 
 const template$7 = html`<template role=tablist focusgroup="tablist inline block" @focusin=${(x, c) => x.handleFocusIn(c.event)}><slot name=tab ${slotted("slottedTabs")}></slot></template>`;
 
-const styles$7 = css`${display("flex")} :host{--tabPaddingInline:${spacingHorizontalMNudge};--tabPaddingBlock:${spacingHorizontalM};--tabIndicatorInsetInline:var(--tabPaddingInline);--tabIndicatorInsetBlock:0;box-sizing:border-box;color:${colorNeutralForeground2};flex-direction:row;position:relative}:host([size='small']){--tabPaddingBlock:${spacingVerticalSNudge};--tabPaddingInline:${spacingHorizontalSNudge}}:host([size='large']){--tabPaddingBlock:${spacingVerticalL};--tabPaddingInline:${spacingHorizontalMNudge}}:host([orientation='vertical']){--tabPaddingBlock:${spacingVerticalS};--tabIndicatorInsetBlock:${spacingVerticalS};flex-direction:column}:host([orientation='vertical'][size='small']){--tabPaddingBlock:${spacingVerticalXXS};--tabIndicatorInsetBlock:${spacingVerticalSNudge}}:host([orientation='vertical'][size='large']){--tabPaddingBlock:${spacingVerticalS};--tabIndicatorInsetBlock:${spacingVerticalMNudge}}::slotted([slot='tab']){padding-inline:var(--tabPaddingInline);padding-block:var(--tabPaddingBlock)}:host([orientation='vertical']) ::slotted([role='tab']){justify-content:flex-start}:host ::slotted([slot='tab'])::after{height:${strokeWidthThicker};margin-block-start:auto}:host([orientation='vertical']) ::slotted([slot='tab'])::after{width:${strokeWidthThicker};height:unset;margin-block-start:unset}:host ::slotted([slot='tab'])::before{height:${strokeWidthThicker};border-radius:${borderRadiusCircular};content:'';inset-inline:var(--tabIndicatorInsetInline);inset-block:var(--tabIndicatorInsetBlock);position:absolute;margin-top:auto}:host ::slotted([slot='tab'])::before{inset-inline:var(--tabIndicatorInsetInline);inset-block:var(--tabIndicatorInsetBlock)}:host ::slotted([slot='tab'][aria-selected='true'])::before{background-color:${colorNeutralForegroundDisabled}}:host ::slotted([slot='tab'][aria-selected='false']:hover)::after{height:${strokeWidthThicker};margin-block-start:auto;transform-origin:left}:host([orientation='vertical']) ::slotted([slot='tab'])::before,:host([orientation='vertical']) ::slotted([slot='tab'][aria-selected='false']:hover)::after{height:unset;width:${strokeWidthThicker};margin-inline-end:auto;transform-origin:top}:host([size='small']) ::slotted([slot='tab']){font-size:${fontSizeBase300};line-height:${lineHeightBase300}}:host([size='large']) ::slotted([slot='tab']){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host ::slotted([slot='tab'])::after,:host ::slotted([slot='tab'])::before,:host ::slotted([slot='tab']:hover)::after{inset-inline:var(--tabIndicatorInsetInline)}:host([orientation='vertical']) ::slotted([slot='tab'])::after,:host([orientation='vertical']) ::slotted([slot='tab'])::before,:host([orientation='vertical']) ::slotted([slot='tab']:hover)::after{inset-inline:0;inset-block:var(--tabIndicatorInsetBlock)}:host([disabled]){cursor:not-allowed;color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='tab']){pointer-events:none;cursor:not-allowed;color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='tab']:after){background-color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='tab'][aria-selected='true'])::after{background-color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='tab']:hover):before{content:unset}:host([appearance='subtle']) ::slotted([slot='tab']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground1Hover};fill:${colorCompoundBrandForeground1Hover}}:host([appearance='subtle']) ::slotted([slot='tab']:active){background-color:${colorSubtleBackgroundPressed};fill:${colorSubtleBackgroundPressed};color:${colorNeutralForeground1}}@supports (anchor-name:--a) and (text-size-adjust:auto){::slotted([slot='tab'][aria-selected='true']){anchor-name:--tab}:host::after{background-color:${colorCompoundBrandStroke};content:'';inline-size:100%;inset:auto auto anchor(end) anchor(center);position:absolute;position-anchor:--tab;transform:translateX(-50%);transition-property:inset-inline,width;transition-duration:${durationSlow};transition-timing-function:${curveDecelerateMax};z-index:3;border-radius:${borderRadiusCircular};width:calc(anchor-size() - var(--tabIndicatorInsetInline) * 2);height:${strokeWidthThicker}}:host([orientation='vertical'])::after{inset:anchor(center) anchor(end) auto 0;transform:translateY(-50%);transition-property:inset-block,height;width:${strokeWidthThicker};height:calc(anchor-size() - var(--tabIndicatorInsetBlock) * 2)}:host(:dir(rtl)[orientation='vertical'])::after{inset:anchor(center) anchor(start) auto 0}:host([disabled])::after{background-color:${colorNeutralForegroundDisabled}}}`;
+const styles$7 = css`${display("flex")} :host{--tabPaddingInline:${spacingHorizontalMNudge};--tabPaddingBlock:${spacingHorizontalM};--tabIndicatorInsetInline:var(--tabPaddingInline);--tabIndicatorInsetBlock:0;box-sizing:border-box;color:${colorNeutralForeground2};flex-direction:row;position:relative}:host([size='small']){--tabPaddingBlock:${spacingVerticalSNudge};--tabPaddingInline:${spacingHorizontalSNudge}}:host([size='large']){--tabPaddingBlock:${spacingVerticalL};--tabPaddingInline:${spacingHorizontalMNudge}}:host([orientation='vertical']){--tabPaddingBlock:${spacingVerticalS};--tabIndicatorInsetBlock:${spacingVerticalS};flex-direction:column}:host([orientation='vertical'][size='small']){--tabPaddingBlock:${spacingVerticalXXS};--tabIndicatorInsetBlock:${spacingVerticalSNudge}}:host([orientation='vertical'][size='large']){--tabPaddingBlock:${spacingVerticalS};--tabIndicatorInsetBlock:${spacingVerticalMNudge}}::slotted([slot='tab']){padding-inline:var(--tabPaddingInline);padding-block:var(--tabPaddingBlock)}:host([orientation='vertical']) ::slotted([role='tab']){justify-content:flex-start}:host ::slotted([slot='tab'])::after{height:${strokeWidthThicker};margin-block-start:auto}:host([orientation='vertical']) ::slotted([slot='tab'])::after{width:${strokeWidthThicker};height:unset;margin-block-start:unset}:host ::slotted([slot='tab'])::before{height:${strokeWidthThicker};border-radius:${borderRadiusCircular};content:'';inset-inline:var(--tabIndicatorInsetInline);inset-block:var(--tabIndicatorInsetBlock);position:absolute;margin-top:auto}:host ::slotted([slot='tab'])::before{inset-inline:var(--tabIndicatorInsetInline);inset-block:var(--tabIndicatorInsetBlock)}:host ::slotted([slot='tab'][aria-selected='true'])::before{background-color:${colorNeutralForegroundDisabled}}:host ::slotted([slot='tab'][aria-selected='false']:hover)::after{height:${strokeWidthThicker};margin-block-start:auto;transform-origin:left}:host([orientation='vertical']) ::slotted([slot='tab'])::before,:host([orientation='vertical']) ::slotted([slot='tab'][aria-selected='false']:hover)::after{height:unset;width:${strokeWidthThicker};margin-inline-end:auto;transform-origin:top}:host([size='small']) ::slotted([slot='tab']){font-size:${fontSizeBase300};line-height:${lineHeightBase300}}:host([size='large']) ::slotted([slot='tab']){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host ::slotted([slot='tab'])::after,:host ::slotted([slot='tab'])::before,:host ::slotted([slot='tab']:hover)::after{inset-inline:var(--tabIndicatorInsetInline)}:host([orientation='vertical']) ::slotted([slot='tab'])::after,:host([orientation='vertical']) ::slotted([slot='tab'])::before,:host([orientation='vertical']) ::slotted([slot='tab']:hover)::after{inset-inline:0;inset-block:var(--tabIndicatorInsetBlock)}:host([disabled]){cursor:not-allowed;color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='tab']){pointer-events:none;cursor:not-allowed;color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='tab']:after){background-color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='tab'][aria-selected='true'])::after{background-color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='tab']:hover):before{content:unset}:host([appearance='subtle']) ::slotted([slot='tab']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground1Hover};fill:${colorCompoundBrandForeground1Hover}}:host([appearance='subtle']) ::slotted([slot='tab']:active){background-color:${colorSubtleBackgroundPressed};fill:${colorSubtleBackgroundPressed};color:${colorNeutralForeground1}}@supports (anchor-name:--a) and (text-size-adjust:auto){::slotted([slot='tab'][aria-selected='true']){anchor-name:--tab}:host::after{background-color:${colorCompoundBrandStroke};content:'';inline-size:100%;inset:auto auto anchor(end) anchor(center);position:fixed;position-anchor:--tab;transform:translateX(-50%);transition-property:inset-inline,width;transition-duration:${durationSlow};transition-timing-function:${curveDecelerateMax};z-index:3;border-radius:${borderRadiusCircular};width:calc(anchor-size() - var(--tabIndicatorInsetInline) * 2);height:${strokeWidthThicker}}:host([orientation='vertical'])::after{inset:anchor(center) anchor(end) auto 0;transform:translateY(-50%);transition-property:inset-block,height;width:${strokeWidthThicker};height:calc(anchor-size() - var(--tabIndicatorInsetBlock) * 2)}:host(:dir(rtl)[orientation='vertical'])::after{inset:anchor(center) anchor(start) auto 0}:host([disabled])::after{background-color:${colorNeutralForegroundDisabled}}}`;
 
 const definition$7 = Tablist.compose({
   name: tagName$7,
@@ -13878,7 +13878,7 @@ class Tooltip extends FASTElement {
       #${this.id} {
         inset: unset;
         position-anchor: ${anchorName};
-        position: absolute;
+        position: fixed;
         ${directionCSS}
         ${alignmentCSS}
       }
@@ -13902,7 +13902,7 @@ __decorateClass$4([
   attr
 ], Tooltip.prototype, "anchor", 2);
 
-const styles$2 = css`${display("inline-flex")} :host(:not(:popover-open)){display:none}:host{--position-area:block-start;--position-try-options:flip-block;--block-offset:${spacingVerticalXS};--inline-offset:${spacingHorizontalXS};background:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:1px solid ${colorTransparentStroke};box-sizing:border-box;color:${colorNeutralForeground1};display:inline-flex;filter:drop-shadow(0 0 2px ${colorNeutralShadowAmbient}) drop-shadow(0 4px 8px ${colorNeutralShadowKey});font-family:${fontFamilyBase};font-size:${fontSizeBase200};inset:unset;line-height:${lineHeightBase200};margin:unset;max-width:240px;overflow:visible;padding:4px ${spacingHorizontalMNudge} 6px;position:absolute;position-area:var(--position-area);position-try-options:var(--position-try-options);width:auto;z-index:1}@supports (inset-area:block-start){:host{inset-area:var(--position-area);position-try-fallbacks:var(--position-try-options)}}:host(:is([positioning^='above'],[positioning^='below'],:not([positioning]))){margin-block:var(--block-offset)}:host(:is([positioning^='before'],[positioning^='after'])){margin-inline:var(--inline-offset);--position-try-options:flip-inline}:host([positioning='above-start']){--position-area:${TooltipPositioningOption["above-start"]}}:host([positioning='above']){--position-area:${TooltipPositioningOption.above}}:host([positioning='above-end']){--position-area:${TooltipPositioningOption["above-end"]}}:host([positioning='below-start']){--position-area:${TooltipPositioningOption["below-start"]}}:host([positioning='below']){--position-area:${TooltipPositioningOption.below}}:host([positioning='below-end']){--position-area:${TooltipPositioningOption["below-end"]}}:host([positioning='before-top']){--position-area:${TooltipPositioningOption["before-top"]}}:host([positioning='before']){--position-area:${TooltipPositioningOption.before}}:host([positioning='before-bottom']){--position-area:${TooltipPositioningOption["before-bottom"]}}:host([positioning='after-top']){--position-area:${TooltipPositioningOption["after-top"]}}:host([positioning='after']){--position-area:${TooltipPositioningOption.after}}:host([positioning='after-bottom']){--position-area:${TooltipPositioningOption["after-bottom"]}}`;
+const styles$2 = css`${display("inline-flex")} :host(:not(:popover-open)){display:none}:host{--position-area:block-start;--position-try-options:flip-block;--block-offset:${spacingVerticalXS};--inline-offset:${spacingHorizontalXS};background:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:1px solid ${colorTransparentStroke};box-sizing:border-box;color:${colorNeutralForeground1};display:inline-flex;filter:drop-shadow(0 0 2px ${colorNeutralShadowAmbient}) drop-shadow(0 4px 8px ${colorNeutralShadowKey});font-family:${fontFamilyBase};font-size:${fontSizeBase200};inset:unset;line-height:${lineHeightBase200};margin:unset;max-width:240px;overflow:visible;padding:4px ${spacingHorizontalMNudge} 6px;position:absolute;position-area:var(--position-area);position-try-fallbacks:var(--position-try-options);width:auto;z-index:1}@supports (inset-area:block-start){:host{inset-area:var(--position-area);position-try-fallbacks:var(--position-try-options)}}:host(:is([positioning^='above'],[positioning^='below'],:not([positioning]))){margin-block:var(--block-offset)}:host(:is([positioning^='before'],[positioning^='after'])){margin-inline:var(--inline-offset);--position-try-options:flip-inline}:host([positioning='above-start']){--position-area:${TooltipPositioningOption["above-start"]}}:host([positioning='above']){--position-area:${TooltipPositioningOption.above}}:host([positioning='above-end']){--position-area:${TooltipPositioningOption["above-end"]}}:host([positioning='below-start']){--position-area:${TooltipPositioningOption["below-start"]}}:host([positioning='below']){--position-area:${TooltipPositioningOption.below}}:host([positioning='below-end']){--position-area:${TooltipPositioningOption["below-end"]}}:host([positioning='before-top']){--position-area:${TooltipPositioningOption["before-top"]}}:host([positioning='before']){--position-area:${TooltipPositioningOption.before}}:host([positioning='before-bottom']){--position-area:${TooltipPositioningOption["before-bottom"]}}:host([positioning='after-top']){--position-area:${TooltipPositioningOption["after-top"]}}:host([positioning='after']){--position-area:${TooltipPositioningOption.after}}:host([positioning='after-bottom']){--position-area:${TooltipPositioningOption["after-bottom"]}}`;
 
 const template$2 = html`<template popover aria-hidden=true><slot></slot></template>`;