@fabric-msft/fabric-web 7.3.1 → 7.4.0

package/index.js

@@ -2,7 +2,7 @@ import { sizeVerticalXXXL, sizeVerticalXL, sizeHorizontalXL, sizeVerticalXXL, si
 export { fabricDarkTheme, fabricLightTheme, setTheme, sizeHorizontalL, sizeHorizontalM, sizeHorizontalMNudge, sizeHorizontalNone, sizeHorizontalS, sizeHorizontalSNudge, sizeHorizontalXL, sizeHorizontalXS, sizeHorizontalXXL, sizeHorizontalXXS, sizeHorizontalXXXL, sizeVerticalL, sizeVerticalM, sizeVerticalMNudge, sizeVerticalNone, sizeVerticalS, sizeVerticalSNudge, sizeVerticalXL, sizeVerticalXS, sizeVerticalXXL, sizeVerticalXXS, sizeVerticalXXXL, webDarkTheme, webLightTheme } from '@fabric-msft/theme';
 import { spacingHorizontalXL, spacingHorizontalL, spacingVerticalXXS, display, borderRadiusMedium, colorStrokeFocus2, spacingHorizontalS, typographyCaption1StrongStyles, spacingHorizontalMNudge, spacingHorizontalXS, colorNeutralForeground3, colorTransparentBackground, colorNeutralForegroundDisabled, fontSizeBase200, lineHeightBase200, fontSizeBase400, lineHeightBase400, fontSizeBase500, lineHeightBase500, spacingHorizontalXXS, spacingHorizontalSNudge, strokeWidthThin, colorNeutralStroke2, fontFamilyBase, shadow4, colorBrandBackground2, strokeWidthThick, colorTransparentStroke, colorNeutralBackground1, colorNeutralBackground2, colorNeutralStroke1, colorSubtleBackground, colorNeutralBackground1Hover, colorTransparentStrokeInteractive, shadow8, colorNeutralBackground1Pressed, colorNeutralBackground2Hover, colorNeutralBackground2Pressed, colorTransparentBackgroundHover, colorNeutralStroke1Hover, colorTransparentBackgroundPressed, colorNeutralStroke1Pressed, colorSubtleBackgroundHover, colorSubtleBackgroundPressed, colorNeutralBackground1Selected, colorSubtleBackgroundSelected, colorNeutralStroke1Selected, colorTransparentBackgroundSelected, colorNeutralBackground2Selected, colorNeutralBackgroundDisabled, colorTransparentStrokeDisabled, shadow2, spacingHorizontalM, spacingVerticalS, fontSizeBase300, fontWeightSemibold, fontWeightRegular, spacingVerticalM, spacingHorizontalXXL, colorNeutralForeground1, borderRadiusSmall, spacingVerticalXXL, borderRadiusCircular, colorNeutralForeground2, durationFast, curveEasyEase, durationNormal, fontWeightBold, BaseButton, ButtonAppearance, ButtonFormTarget, ButtonShape, ButtonSize, ButtonType, ButtonStyles, colorBrandBackground, colorNeutralForegroundOnBrand, colorNeutralStrokeOnBrand, colorBrandBackgroundHover, colorBrandBackgroundPressed, colorNeutralForeground1Hover, colorNeutralForeground1Pressed, ButtonTemplate, colorNeutralBackground4, spacingHorizontalXXXL, lineHeightBase300, durationFaster, fontSizeBase600, spacingVerticalXXXL, borderRadiusLarge, borderRadiusNone, colorNeutralBackground4Hover, colorNeutralBackgroundInverted, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralStrokeDisabled, colorNeutralForegroundInverted, colorNeutralForeground2Selected, colorNeutralForeground2BrandSelected, DialogStyles, Dialog as Dialog$1, DialogTemplate, spacingVerticalL, spacingVerticalXS, CompoundButtonStyles, CompoundButtonTemplate, Spinner as Spinner$1, SpinnerAppearance, SpinnerSize, SpinnerStyles, SpinnerTemplate, Button as Button$1, forcedColorsStylesheetBehavior as forcedColorsStylesheetBehavior$1, colorCompoundBrandStroke, DropdownStyles, Dropdown as Dropdown$1, DropdownTemplate, DropdownOption as DropdownOption$1, DropdownOptionStyles, DropdownOptionTemplate, isDropdownOption, Listbox as Listbox$1, ListboxStyles, ListboxTemplate, typographyCaption1Styles, typographyCaption2Styles, typographyBody1Styles, colorNeutralBackground3, colorBrandForeground1, spacingHorizontalNone, ButtonDefinition, shadow16, colorBrandForeground2, colorPaletteRedForeground3, AccordionItem as AccordionItem$1, AccordionItemMarkerPosition, AccordionItemSize, accordionItemStyles, accordionItemTemplate, Accordion as Accordion$1, accordionStyles, accordionTemplate, AccordionExpandMode, AnchorTarget, LinkAppearance, LinkTarget, Link as Link$1, LinkStyles, Avatar as Avatar$1, AvatarActive, AvatarAppearance, AvatarColor, AvatarNamedColor, AvatarShape, AvatarSize, AvatarStyles, AvatarTemplate, Badge as Badge$1, BadgeAppearance, BadgeColor, BadgeShape, BadgeSize, BadgeStyles, BadgeTemplate, Checkbox as Checkbox$1, CheckboxShape, CheckboxSize, CheckboxStyles, CheckboxTemplate, CounterBadge as CounterBadge$1, CounterBadgeAppearance, CounterBadgeColor, CounterBadgeShape, CounterBadgeSize, CounterBadgeStyles, CounterBadgeTemplate, DialogBody as DialogBody$1, DialogBodyStyles, DialogBodyTemplate, Divider as Divider$1, DividerAlignContent, DividerAppearance, DividerOrientation, DividerRole, DividerStyles, DividerTemplate, spacingVerticalSNudge, Drawer as Drawer$1, DrawerPosition, DrawerSize, DrawerType, DrawerStyles, DrawerTemplate, DrawerBody as DrawerBody$1, DrawerBodyStyles, DrawerBodyTemplate, DropdownAppearance, DropdownSize, DropdownType, Field as Field$1, FieldStyles, FieldTemplate, Image as Image$1, ImageFit, ImageShape, ImageStyles, ImageTemplate, Label as Label$1, LabelStyles, LabelTemplate, LabelSize, LabelWeight, AnchorButton as AnchorButton$1, AnchorButtonAppearance, AnchorButtonShape, AnchorButtonSize, ToggleButtonStyles, AnchorButtonTemplate, MessageBar as MessageBar$1, MessageBarStyles, MessageBarTemplate, MenuButton as MenuButton$1, MenuButtonStyles, MenuButtonTemplate, colorCompoundBrandForeground1Pressed, colorStatusDangerForeground1, ProgressBar as ProgressBar$1, ProgressBarStyles, ProgressBarTemplate, ProgressBarShape, ProgressBarThickness, ProgressBarValidationState, Radio as Radio$1, RadioGroup as RadioGroup$1, RadioGroupOrientation, RadioGroupStyles, RadioGroupTemplate, RadioStyles, RadioTemplate, RatingDisplay as RatingDisplay$1, RatingDisplayStyles, RatingDisplayTemplate, RatingDisplayColor, RatingDisplaySize, StartEnd, colorNeutralStrokeAccessible, colorPaletteRedBorder2, durationUltraFast, curveAccelerateMid, colorNeutralForeground4, colorNeutralStrokeAccessibleHover, curveDecelerateMid, colorCompoundBrandStrokePressed, colorNeutralStrokeAccessiblePressed, Slider as Slider$1, SliderMode, SliderOrientation, SliderSize, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorStrokeFocus1, colorNeutralBackground3Pressed, colorStatusDangerBorder2, Switch as Switch$1, SwitchStyles, SwitchTemplate, Tab as Tab$1, TabStyles, TabTemplate, TablistAppearance, TablistOrientation, TablistSize, Tablist as Tablist$1, TablistStyles, TablistTemplate, TextArea as TextArea$1, TextAreaStyles, TextAreaTemplate, TextAreaAppearance, TextAreaAppearancesForDisplayShadow, TextAreaAutocomplete, TextAreaResize, TextAreaSize, Text as Text$1, TextStyles, TextTemplate, TextAlign, TextFont, TextSize, TextWeight, Tree as Tree$1, TreeStyles, TreeTemplate, TreeItem as TreeItem$1, TreeItemStyles, ToggleButton as ToggleButton$1, ToggleButtonAppearance, ToggleButtonShape, ToggleButtonSize, ToggleButtonTemplate, Tooltip as Tooltip$1, TooltipStyles, TooltipTemplate, TooltipPositioningOption } from '@fluentui/web-components';
 export { AnchorButtonTemplate, AvatarStyles, AvatarTemplate, BadgeStyles, BadgeTemplate, BaseAccordionItem, BaseAnchor, BaseAvatar, BaseButton, BaseCheckbox, BaseDivider, BaseField, BaseProgressBar, BaseRatingDisplay, BaseSpinner, BaseTablist, BaseTextArea, BaseTextInput, CheckboxStyles, CheckboxTemplate, DialogBodyStyles, DialogBodyTemplate, DialogTemplate, ListboxStyles, ListboxTemplate, MessageBarIntent, MessageBarLayout, MessageBarShape, MessageBarStyles, MessageBarTemplate, SwitchStyles, SwitchTemplate, TextAreaStyles, TextAreaTemplate, TreeStyles, TreeTemplate, isDropdownOption, isListbox } from '@fluentui/web-components';
-import { FASTElement, attr, observable, Updates, Observable, slotted, html, css, ref, repeat, AttributeConfiguration, InlineTemplateDirective, oneTime, elements, nullableNumberConverter, when } from '@microsoft/fast-element';
+import { FASTElement, attr, observable, Updates, Observable, slotted, html, css, ref, AttributeConfiguration, InlineTemplateDirective, oneTime, repeat, elements, nullableNumberConverter, when } from '@microsoft/fast-element';
 import { keyArrowLeft, keyArrowRight, keySpace, keyEnter, isHTMLElement, keyHome, keyEnd, keyArrowUp, keyArrowDown, keyEscape, uniqueId, keyTab, Direction, limit } from '@microsoft/fast-web-utilities';
 import { isTabbable } from 'tabbable';
 import { formatString, getString } from '@fabric-msft/localization';
@@ -757,11 +757,11 @@ class MenuList extends FASTElement {
   }
   static elementIndent(el) {
     const role = el.getAttribute("role");
-    const startSlot = el.querySelector("[slot=start]");
+    const hasDirectStartSlot = Array.from(el.children).some(child => child.getAttribute("slot") === "start");
     if (role && role !== MenuItemRoles.menuitem) {
-      return startSlot ? 2 : 1;
+      return hasDirectStartSlot ? 2 : 1;
     }
-    return startSlot ? 1 : 0;
+    return hasDirectStartSlot ? 1 : 0;
   }
   setItems() {
     var _a;
@@ -1342,10 +1342,10 @@ function accordionMenuTemplate() {
 }
 const template$I = accordionMenuTemplate();
 
-const styles$O = css`
+const styles$1e = css`
   ${display("flex")}
 
-  :host{contain:content;flex-direction:column;height:fit-content;max-width:calc(${spacingHorizontalXL} * 15);min-width:calc(${spacingHorizontalL} * 10);width:auto;background-color:var(--colorNeutralBackground1);border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);box-shadow:var(--shadow16);row-gap:${spacingVerticalXXS}}`;
+  :host{white-space:normal;contain:content;flex-direction:column;height:fit-content;max-width:calc(${spacingHorizontalXL} * 15);min-width:calc(${spacingHorizontalL} * 10);width:auto;background-color:var(--colorNeutralBackground1);border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);box-shadow:var(--shadow16);row-gap:${spacingVerticalXXS}}`;
 
 const DesignSystem = Object.freeze({
   prefix: "fabric",
@@ -1362,7 +1362,7 @@ const DesignSystem = Object.freeze({
 const definition$1f = AccordionMenu.compose({
   name: `${DesignSystem.prefix}-accordion-menu`,
   template: template$I,
-  styles: styles$O,
+  styles: styles$1e,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -2093,10 +2093,10 @@ stateSelector("vertical");
  */
 stateSelector("warning");
 
-const styles$N = css`
+const styles$1d = css`
   ${display("block")}
 
-  :host{contain:content;position:relative}:host(:focus-visible){outline:none}:host(:focus-visible) .heading{border-radius:${borderRadiusMedium};outline:2px solid ${colorStrokeFocus2}}:host([marker-position="start"]) .heading{flex-direction:row-reverse}:host([marker-position="end"]) .heading{flex-direction:row}.heading{display:flex;justify-content:space-between;height:${sizeVerticalXXXL};align-items:center;position:relative;padding-inline:${spacingHorizontalS} ${spacingHorizontalS};border-radius:${borderRadiusMedium};${typographyCaption1StrongStyles}
+  :host{white-space:normal;contain:content;position:relative}:host(:focus-visible){outline:none}:host(:focus-visible) .heading{border-radius:${borderRadiusMedium};outline:2px solid ${colorStrokeFocus2}}:host([marker-position="start"]) .heading{flex-direction:row-reverse}:host([marker-position="end"]) .heading{flex-direction:row}.heading{display:flex;justify-content:space-between;height:${sizeVerticalXXXL};align-items:center;position:relative;padding-inline:${spacingHorizontalS} ${spacingHorizontalS};border-radius:${borderRadiusMedium};${typographyCaption1StrongStyles}
     grid-template-columns:auto auto 1fr auto;padding:0px ${spacingHorizontalMNudge};margin:1px;gap:${spacingHorizontalXS};cursor:pointer;color:${colorNeutralForeground3};background:${colorTransparentBackground};transition:background-color 0.2s ease-in-out}.heading *{pointer-events:none}.heading-content{flex:1;display:flex;align-items:center}.content{display:none}:where(.default-marker-collapsed,.default-marker-expanded),::slotted(:is([slot="marker-collapsed"],[slot="marker-expanded"])){display:flex;align-items:center;justify-content:center;pointer-events:none;position:relative;height:100%;transition:transform 0.2s ease-in-out}::slotted([slot="start"]){display:flex;justify-content:center;align-items:center;padding-inline-end:${spacingHorizontalS}}:host(${disabledState}) .heading{color:${colorNeutralForegroundDisabled};cursor:not-allowed}:host(${disabledState}) svg{filter:invert(89%) sepia(0%) saturate(569%) hue-rotate(155deg)
       brightness(88%) contrast(87%)}:host(${expandedState}) .content{display:block}:host(${expandedState}) .default-marker-collapsed,:host(${expandedState}) ::slotted([slot="marker-collapsed"]),:host(:not(${expandedState})) :is(.default-marker-expanded,.content),:host(:not(${expandedState})) ::slotted([slot="marker-expanded"]){display:none}:host(${expandedState}) ::slotted([slot="marker-expanded"]),:host(:not(${expandedState})) ::slotted([slot="marker-collapsed"]){display:flex}:host(${smallState}) .heading{font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host(${largeState}) .heading{font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(${extraLargeState}) .heading{font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host(${alignEndState}) :slotted([slot="start"]){grid-column:1 / span 1}:host(${alignEndState})
     :is(.default-marker-collapsed,.default-marker-expanded){padding-inline-start:${spacingHorizontalS};padding-inline-end:${spacingHorizontalXXS}}:host([block]){max-width:100%}:host(${alignEndState}) .heading{padding-inline:${spacingHorizontalS}}:host(${alignEndState}:has([slot='start'])) .heading{padding-inline:${spacingHorizontalSNudge} ${spacingHorizontalS}}:host(:not(:first-of-type)) .heading{border-block-start:${strokeWidthThin} solid ${colorNeutralStroke2};border-radius:0}::slotted(fabric-menu-list){box-shadow:none;border-radius:0;border:none}`;
@@ -2104,7 +2104,7 @@ const styles$N = css`
 const definition$1e = AccordionMenuPanel.compose({
   name: `${DesignSystem.prefix}-accordion-menu-panel`,
   template: template$H,
-  styles: styles$N,
+  styles: styles$1d,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -2546,9 +2546,9 @@ __decorate$y([attr({
 /** Card styles
  * @public
  */
-const styles$M = css`
+const styles$1c = css`
   ${display("inline-block")}
-  :host{font-family:${fontFamilyBase};background:${colorTransparentBackground};border-radius:${borderRadiusMedium};position:relative;max-width:100%;height:fit-content;overflow:hidden;box-shadow:${shadow4};box-sizing:border-box;width:var(--card-width,320px);height:var(--card-height,fit-content);z-index:var(--card-elevation,1);flex-shrink:0}.card:focus-visible::after{content:"";position:absolute;inset:-1px;border-color:${colorBrandBackground2};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}.control{position:absolute;z-index:2;top:5px;inset-inline-end:5px}.content{display:grid;padding:var(--card-padding,0)}.card{background:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorTransparentStroke};border-radius:${borderRadiusMedium}}:host([orientation="horizontal"]) .content{grid-template-rows:unset;row-gap:unset;grid-template-columns:auto 1fr;align-items:center}:host([appearance="filled-alternative"]) .card{background:${colorNeutralBackground2}}:host([appearance="outline"]){box-shadow:none}:host([appearance="outline"]) .card{background:${colorTransparentBackground};border-color:${colorNeutralStroke1};box-shadow:none}:host([appearance="subtle"]) .card{background:${colorSubtleBackground};border-color:${colorTransparentStroke};box-shadow:none}:host([interactive]){cursor:pointer;user-select:none}:host([interactive]:hover) .card{background:${colorNeutralBackground1Hover};border-color:${colorTransparentStrokeInteractive};box-shadow:${shadow8}}:host([interactive]:active) .card{background:${colorNeutralBackground1Pressed};border-color:${colorTransparentStrokeInteractive}}:host([interactive][appearance="filled-alternative"]:hover) .card{background:${colorNeutralBackground2Hover}}:host([interactive][appearance="filled-alternative"]:active) .card{background:${colorNeutralBackground2Pressed}}:host([interactive][appearance="outline"]:hover) .card{background:${colorTransparentBackgroundHover};border-color:${colorNeutralStroke1Hover};box-shadow:none}:host([interactive][appearance="outline"]:active) .card{background:${colorTransparentBackgroundPressed};border-color:${colorNeutralStroke1Pressed}}:host([interactive][appearance="subtle"]:hover) .card{background:${colorSubtleBackgroundHover};border-color:${colorTransparentStrokeInteractive};box-shadow:none}:host([interactive][appearance="subtle"]:active) .card{background:${colorSubtleBackgroundPressed}}.card[aria-selected="true"]{background:${colorNeutralBackground1Selected};border-color:${colorTransparentStrokeInteractive};cursor:pointer}:host([appearance="subtle"]) .card[aria-selected="true"]{background:${colorSubtleBackgroundSelected};border-color:${colorNeutralStroke1Selected}}:host([appearance="outline"]) .card[aria-selected="true"]{background:${colorTransparentBackgroundSelected};border-color:${colorNeutralStroke1Selected}}:host([appearance="filled-alternative"]) .card[aria-selected="true"]{background:${colorNeutralBackground2Selected}}:host([aria-disabled="true"]) .card{background:${colorNeutralBackgroundDisabled};border-color:${colorTransparentStrokeDisabled};cursor:not-allowed;pointer-events:none;box-shadow:${shadow2}}:host([appearance="subtle"]) .card[aria-disabled="true"],:host([appearance="outline"]) .card[aria-disabled="true"]{box-shadow:none}:host([appearance="outline"]) .card[aria-disabled="true"]{background:${colorTransparentBackground}}`;
+  :host{white-space:normal;font-family:${fontFamilyBase};background:${colorTransparentBackground};border-radius:${borderRadiusMedium};position:relative;max-width:100%;height:fit-content;overflow:hidden;box-shadow:${shadow4};box-sizing:border-box;width:var(--card-width,320px);height:var(--card-height,fit-content);z-index:var(--card-elevation,1);flex-shrink:0}.card:focus-visible::after{content:"";position:absolute;inset:-1px;border-color:${colorBrandBackground2};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}.control{position:absolute;z-index:2;top:5px;inset-inline-end:5px}.content{display:grid;padding:var(--card-padding,0)}.card{background:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorTransparentStroke};border-radius:${borderRadiusMedium}}:host([orientation="horizontal"]) .content{grid-template-rows:unset;row-gap:unset;grid-template-columns:auto 1fr;align-items:center}:host([appearance="filled-alternative"]) .card{background:${colorNeutralBackground2}}:host([appearance="outline"]){box-shadow:none}:host([appearance="outline"]) .card{background:${colorTransparentBackground};border-color:${colorNeutralStroke1};box-shadow:none}:host([appearance="subtle"]) .card{background:${colorSubtleBackground};border-color:${colorTransparentStroke};box-shadow:none}:host([interactive]){cursor:pointer;user-select:none}:host([interactive]:hover) .card{background:${colorNeutralBackground1Hover};border-color:${colorTransparentStrokeInteractive};box-shadow:${shadow8}}:host([interactive]:active) .card{background:${colorNeutralBackground1Pressed};border-color:${colorTransparentStrokeInteractive}}:host([interactive][appearance="filled-alternative"]:hover) .card{background:${colorNeutralBackground2Hover}}:host([interactive][appearance="filled-alternative"]:active) .card{background:${colorNeutralBackground2Pressed}}:host([interactive][appearance="outline"]:hover) .card{background:${colorTransparentBackgroundHover};border-color:${colorNeutralStroke1Hover};box-shadow:none}:host([interactive][appearance="outline"]:active) .card{background:${colorTransparentBackgroundPressed};border-color:${colorNeutralStroke1Pressed}}:host([interactive][appearance="subtle"]:hover) .card{background:${colorSubtleBackgroundHover};border-color:${colorTransparentStrokeInteractive};box-shadow:none}:host([interactive][appearance="subtle"]:active) .card{background:${colorSubtleBackgroundPressed}}.card[aria-selected="true"]{background:${colorNeutralBackground1Selected};border-color:${colorTransparentStrokeInteractive};cursor:pointer}:host([appearance="subtle"]) .card[aria-selected="true"]{background:${colorSubtleBackgroundSelected};border-color:${colorNeutralStroke1Selected}}:host([appearance="outline"]) .card[aria-selected="true"]{background:${colorTransparentBackgroundSelected};border-color:${colorNeutralStroke1Selected}}:host([appearance="filled-alternative"]) .card[aria-selected="true"]{background:${colorNeutralBackground2Selected}}:host([aria-disabled="true"]) .card{background:${colorNeutralBackgroundDisabled};border-color:${colorTransparentStrokeDisabled};cursor:not-allowed;pointer-events:none;box-shadow:${shadow2}}:host([appearance="subtle"]) .card[aria-disabled="true"],:host([appearance="outline"]) .card[aria-disabled="true"]{box-shadow:none}:host([appearance="outline"]) .card[aria-disabled="true"]{background:${colorTransparentBackground}}`;
 
 /**
  * The template for the {@link @fabric-msft/fabric-web#(Card:class)} component.
@@ -2568,7 +2568,7 @@ const template$G = cardTemplate();
 const definition$1d = Card.compose({
   name: `${DesignSystem.prefix}-card`,
   template: template$G,
-  styles: styles$M,
+  styles: styles$1c,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -2601,9 +2601,9 @@ const definition$1d = Card.compose({
  */
 class CardFooter extends FASTElement {}
 
-const styles$L = css`
+const styles$1b = css`
   ${display("flex")}
-  :host{display:grid;grid-template-columns:1fr min-content}.content{display:flex;column-gap:var(--card-size,${spacingHorizontalM});padding:${spacingVerticalS} ${spacingHorizontalS}}`;
+  :host{white-space:normal;display:grid;grid-template-columns:1fr min-content}.content{display:flex;column-gap:var(--card-size,${spacingHorizontalM});padding:${spacingVerticalS} ${spacingHorizontalS}}`;
 
 /**
  * The template for the {@link @fabric-msft/fabric-web#(CardFooter:class)} component.
@@ -2623,7 +2623,7 @@ const template$F = cardFooterTemplate();
 const definition$1c = CardFooter.compose({
   name: `${DesignSystem.prefix}-card-footer`,
   template: template$F,
-  styles: styles$L,
+  styles: styles$1b,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -2666,9 +2666,9 @@ class CardHeader extends FASTElement {}
 /** Card Header styles
  * @public
  */
-const styles$K = css`
+const styles$1a = css`
   ${display("flex")}
-  :host{position:relative;display:grid;grid-template-columns:min-content 1fr auto;padding:6px;justify-content:flex-start}::slotted([slot="icon"]){align-self:center}::slotted([slot="header"]){font-size:${fontSizeBase300};font-weight:${fontWeightSemibold}}::slotted([slot="action"]){grid-column:3;justify-self:flex-end}::slotted([slot="subtitle"]){font-size:${fontSizeBase200};font-weight:${fontWeightRegular}}.header{justify-self:flex-start;display:flex;flex-direction:column;gap:${spacingVerticalXXS}}.image{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-inline-end:${spacingHorizontalS}}.row{display:flex;align-items:center;gap:${spacingHorizontalXS}}`;
+  :host{white-space:normal;position:relative;display:grid;grid-template-columns:min-content 1fr auto;padding:6px;justify-content:flex-start}::slotted([slot="icon"]){align-self:center}::slotted([slot="header"]){font-size:${fontSizeBase300};font-weight:${fontWeightSemibold}}::slotted([slot="action"]){grid-column:3;justify-self:flex-end}::slotted([slot="subtitle"]){font-size:${fontSizeBase200};font-weight:${fontWeightRegular}}.header{justify-self:flex-start;display:flex;flex-direction:column;gap:${spacingVerticalXXS}}.image{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-inline-end:${spacingHorizontalS}}.row{display:flex;align-items:center;gap:${spacingHorizontalXS}}`;
 
 /**
  * The template for the Fluent Card Header web-component.
@@ -2688,7 +2688,7 @@ const template$E = cardHeaderTemplate();
 const definition$1b = CardHeader.compose({
   name: `${DesignSystem.prefix}-card-header`,
   template: template$E,
-  styles: styles$K,
+  styles: styles$1a,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -2718,9 +2718,9 @@ class CardPreview extends FASTElement {}
 /** Card Header styles
  * @public
  */
-const styles$J = css`
+const styles$19 = css`
   ${display("flex")}
-  :host{position:relative;overflow:hidden}::slotted([slot="badge"]){position:absolute;inset-inline-start:${spacingHorizontalM};bottom:${spacingVerticalM}}::slotted(img){overflow:hidden}`;
+  :host{white-space:normal;position:relative;overflow:hidden}::slotted([slot="badge"]){position:absolute;inset-inline-start:${spacingHorizontalM};bottom:${spacingVerticalM}}::slotted(img){overflow:hidden}`;
 
 /**
  * The template for the Fluent Card Preview web-component.
@@ -2740,7 +2740,7 @@ const template$D = cardPreviewTemplate();
 const definition$1a = CardPreview.compose({
   name: `${DesignSystem.prefix}-card-preview`,
   template: template$D,
-  styles: styles$J,
+  styles: styles$19,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -3093,42 +3093,6 @@ __decorate$x([attr({
 })], Carousel.prototype, "navButtonPlacement", void 0);
 __decorate$x([observable], Carousel.prototype, "slottedItems", void 0);
 
-/**
- * Styles for the {@link @fabric-msft/fabric-web#(Carousel:class)} component.
- * @public
- */
-const styles$I = css`
-  :host{--_carousel-dir:-1;display:flex;flex-direction:column;position:relative;background:${colorNeutralBackground1}}:host(:dir(rtl)){--_carousel-dir:1}.nav-container{display:flex;justify-content:center;width:100%}:host([nav-position="outside-content"]) .nav-container{position:relative;margin-block-start:${spacingVerticalM}}:host([nav-position="over-content"]) .nav-container{position:absolute;inset-block-end:${spacingVerticalM};inset-inline:0;z-index:1}`;
-
-/**
- * The template for the {@link @fabric-msft/fabric-web#(Carousel:class)} component.
- * @public
- */
-function carouselTemplate() {
-  return html`<template role="region" aria-roledescription="carousel" nav-position="${x => x.navPosition}" nav-button-placement="${x => x.navButtonPlacement}"><fabric-carousel-viewport :controller="${x => x.controller}"><slot ${slotted({
-    property: "slottedItems",
-    filter: el => el.tagName === "FABRIC-CAROUSEL-ITEM"
-  })}></slot></fabric-carousel-viewport><div class="nav-container"><fabric-carousel-nav :controller="${x => x.controller}" button-placement="${x => x.navButtonPlacement}" current-index="${x => x.currentIndex}">${repeat(x => x.slottedItems, html`<fabric-carousel-nav-item :tabId="${(_item, c) => c.parent.getTabId(c.index)}" :panelId="${(_item, c) => c.parent.getPanelId(c.index)}" :tabLabel="${(_item, c) => c.parent.getTabLabel(c.index)}"></fabric-carousel-nav-item>`, {
-    positioning: true
-  })}</fabric-carousel-nav></div></template>`;
-}
-const template$C = carouselTemplate();
-
-/**
- * The Carousel element definition.
- * @public
- * @remarks
- * HTML Element: <fabric-carousel>
- */
-const definition$19 = Carousel.compose({
-  name: `${DesignSystem.prefix}-carousel`,
-  template: template$C,
-  styles: styles$I,
-  shadowOptions: {
-    mode: DesignSystem.shadowRootMode
-  }
-});
-
 /**
  * Event names for the CarouselNav component
  * @public
@@ -4533,8 +4497,8 @@ function precisionRound(value, precision) {
  * Styles for the {@link @fabric-msft/fabric-web#(CarouselNav:class)} component.
  * @public
  */
-const styles$H = css`
-  :host{display:flex;align-items:center;justify-content:center;width:100%}.nav-content{display:flex;align-items:center;gap:${spacingHorizontalM}}:host([button-placement="grouped"]) .nav-content{justify-content:center}:host([button-placement="flexible"]) .nav-content{justify-content:space-between;width:100%}:host([button-placement="flexible"]) .indicators{flex:1;display:flex;justify-content:center}:host([button-placement="hidden"]) .nav-button{display:none}.indicators{display:flex;align-items:center}.nav-button{display:flex;align-items:center;justify-content:center;width:${spacingHorizontalXXL};height:${spacingHorizontalXXL};padding:${spacingHorizontalXXS};background:${colorNeutralBackground1};color:${colorNeutralForeground1};cursor:pointer;border:none}.nav-button svg{display:block}:dir(rtl) .nav-button svg{transform:scaleX(-1)}.nav-button:hover{background:${colorNeutralStroke1}}.nav-button:focus-visible{outline:2px solid ${colorNeutralForeground1};outline-offset:2px;border-radius:${borderRadiusSmall}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+const styles$18 = css`
+  :host{white-space:normal;display:flex;align-items:center;justify-content:center;width:100%}.nav-content{display:flex;align-items:center;gap:${spacingHorizontalM}}:host([button-placement="grouped"]) .nav-content{justify-content:center}:host([button-placement="flexible"]) .nav-content{justify-content:space-between;width:100%}:host([button-placement="flexible"]) .indicators{flex:1;display:flex;justify-content:center}:host([button-placement="hidden"]) .nav-button{display:none}.indicators{display:flex;align-items:center}.nav-button{display:flex;align-items:center;justify-content:center;width:${spacingHorizontalXXL};height:${spacingHorizontalXXL};padding:${spacingHorizontalXXS};background:${colorNeutralBackground1};color:${colorNeutralForeground1};cursor:pointer;border:none}.nav-button svg{display:block}:dir(rtl) .nav-button svg{transform:scaleX(-1)}.nav-button:hover{background:${colorNeutralStroke1}}.nav-button:focus-visible{outline:2px solid ${colorNeutralForeground1};outline-offset:2px;border-radius:${borderRadiusSmall}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     .nav-button:focus-visible{outline-color:Highlight !important}`));
 
 /**
@@ -4547,7 +4511,7 @@ function carouselNavTemplate() {
     filter: el => el.tagName === "FABRIC-CAROUSEL-NAV-ITEM"
   })}></slot></div><slot name="next-button"><button class="nav-button next-button" aria-label="${oneTime(() => getString("Carousel_Next"))}" @click="${x => x.handleNextClick()}">${chevronRightIcon}</button></slot></div></template>`;
 }
-const template$B = carouselNavTemplate();
+const template$C = carouselNavTemplate();
 
 /**
  * The CarouselNav element definition.
@@ -4555,10 +4519,10 @@ const template$B = carouselNavTemplate();
  * @remarks
  * HTML Element: <fabric-carousel-nav>
  */
-const definition$18 = CarouselNav.compose({
+const definition$19 = CarouselNav.compose({
   name: `${DesignSystem.prefix}-carousel-nav`,
-  template: template$B,
-  styles: styles$H,
+  template: template$C,
+  styles: styles$18,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -4613,8 +4577,8 @@ __decorate$v([observable], CarouselNavItem.prototype, "tabLabel", void 0);
  * Styles for the {@link @fabric-msft/fabric-web#(CarouselNavItem:class)} component.
  * @public
  */
-const styles$G = css`
-  :host{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;width:${spacingHorizontalXXL};height:${spacingVerticalXXL}}.indicator{display:block;width:${spacingHorizontalS};height:${spacingHorizontalS};border-radius:${borderRadiusCircular};background:${colorNeutralForeground2};opacity:0.3;transition:width ${durationFast} ${curveEasyEase},opacity ${durationFast} ${curveEasyEase}}:host([active]) .indicator{width:${spacingHorizontalL};opacity:1;background:${colorNeutralForeground1}}:host(:hover) .indicator{opacity:0.6}:host([active]:hover) .indicator{opacity:1}:host(:focus-visible){outline:2px solid ${colorNeutralForeground1};border-radius:${borderRadiusSmall}}@media (prefers-reduced-motion:reduce){.indicator{transition:none}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+const styles$17 = css`
+  :host{white-space:normal;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;width:${spacingHorizontalXXL};height:${spacingVerticalXXL}}.indicator{display:block;width:${spacingHorizontalS};height:${spacingHorizontalS};border-radius:${borderRadiusCircular};background:${colorNeutralForeground2};opacity:0.3;transition:width ${durationFast} ${curveEasyEase},opacity ${durationFast} ${curveEasyEase}}:host([active]) .indicator{width:${spacingHorizontalL};opacity:1;background:${colorNeutralForeground1}}:host(:hover) .indicator{opacity:0.6}:host([active]:hover) .indicator{opacity:1}:host(:focus-visible){outline:2px solid ${colorNeutralForeground1};border-radius:${borderRadiusSmall}}@media (prefers-reduced-motion:reduce){.indicator{transition:none}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host(:focus-visible){outline-color:Highlight !important}`));
 
 /**
@@ -4625,7 +4589,7 @@ const styles$G = css`
 function carouselNavItemTemplate() {
   return html`<template role="tab" id="${x => x.tabId}" aria-selected="${x => x.active}" aria-controls="${x => x.panelId}" aria-label="${x => x.tabLabel}" tabindex="-1" ?active="${x => x.active}"><span class="indicator"><slot></slot></span></template>`;
 }
-const template$A = carouselNavItemTemplate();
+const template$B = carouselNavItemTemplate();
 
 /**
  * The CarouselNavItem element definition.
@@ -4633,10 +4597,10 @@ const template$A = carouselNavItemTemplate();
  * @remarks
  * HTML Element: <fabric-carousel-nav-item>
  */
-const definition$17 = CarouselNavItem.compose({
+const definition$18 = CarouselNavItem.compose({
   name: `${DesignSystem.prefix}-carousel-nav-item`,
-  template: template$A,
-  styles: styles$G,
+  template: template$B,
+  styles: styles$17,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -4680,8 +4644,8 @@ __decorate$u([observable], CarouselViewport.prototype, "controller", void 0);
  * Styles for the {@link @fabric-msft/fabric-web#(CarouselViewport:class)} component.
  * @public
  */
-const styles$F = css`
-  :host{--_carousel-dir:-1;display:block;overflow:hidden;position:relative;width:100%}:host(:dir(rtl)){--_carousel-dir:1}.track{display:flex;transition:transform ${durationNormal} ${curveEasyEase};will-change:transform}@media (prefers-reduced-motion:reduce){.track{transition:none}}`;
+const styles$16 = css`
+  :host{white-space:normal;--_carousel-dir:-1;display:block;overflow:hidden;position:relative;width:100%}:host(:dir(rtl)){--_carousel-dir:1}.track{display:flex;transition:transform ${durationNormal} ${curveEasyEase};will-change:transform}@media (prefers-reduced-motion:reduce){.track{transition:none}}`;
 
 /**
  * The template for the {@link @fabric-msft/fabric-web#(CarouselViewport:class)} component.
@@ -4693,7 +4657,7 @@ function carouselViewportTemplate() {
     return (_b = (_a = x.controller) === null || _a === void 0 ? void 0 : _a.currentIndex) !== null && _b !== void 0 ? _b : 0;
   }} * 100%))"><slot></slot></div></template>`;
 }
-const template$z = carouselViewportTemplate();
+const template$A = carouselViewportTemplate();
 
 /**
  * The CarouselViewport element definition.
@@ -4701,15 +4665,50 @@ const template$z = carouselViewportTemplate();
  * @remarks
  * HTML Element: <fabric-carousel-viewport>
  */
-const definition$16 = CarouselViewport.compose({
+const definition$17 = CarouselViewport.compose({
   name: `${DesignSystem.prefix}-carousel-viewport`,
-  template: template$z,
-  styles: styles$F,
+  template: template$A,
+  styles: styles$16,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
 });
 
+/**
+ * Styles for the {@link @fabric-msft/fabric-web#(Carousel:class)} component.
+ * @public
+ */
+const styles$15 = css`
+  :host{white-space:normal;--_carousel-dir:-1;display:flex;flex-direction:column;position:relative;background:${colorNeutralBackground1}}:host(:dir(rtl)){--_carousel-dir:1}.nav-container{display:flex;justify-content:center;width:100%}:host([nav-position="outside-content"]) .nav-container{position:relative;margin-block-start:${spacingVerticalM}}:host([nav-position="over-content"]) .nav-container{position:absolute;inset-block-end:${spacingVerticalM};inset-inline:0;z-index:1}`;
+
+/**
+ * The template for the {@link @fabric-msft/fabric-web#(Carousel:class)} component.
+ * @public
+ */
+function carouselTemplate() {
+  return html`<template role="region" aria-roledescription="carousel" nav-position="${x => x.navPosition}" nav-button-placement="${x => x.navButtonPlacement}"><fabric-carousel-viewport :controller="${x => x.controller}"><slot ${slotted({
+    property: "slottedItems",
+    filter: el => el.tagName === "FABRIC-CAROUSEL-ITEM"
+  })}></slot></fabric-carousel-viewport><div class="nav-container"><fabric-carousel-nav :controller="${x => x.controller}" button-placement="${x => x.navButtonPlacement}" current-index="${x => x.currentIndex}">${repeat(x => x.slottedItems, html`<fabric-carousel-nav-item :tabId="${(_item, c) => c.parent.getTabId(c.index)}" :panelId="${(_item, c) => c.parent.getPanelId(c.index)}" :tabLabel="${(_item, c) => c.parent.getTabLabel(c.index)}"></fabric-carousel-nav-item>`, {
+    positioning: true
+  })}</fabric-carousel-nav></div></template>`;
+}
+const template$z = carouselTemplate();
+
+/**
+ * The Carousel element definition.
+ * @public
+ * @remarks
+ * HTML Element: <fabric-carousel>
+ */
+const definition$16 = Carousel.compose({
+  name: `${DesignSystem.prefix}-carousel`,
+  template: template$z,
+  styles: styles$15,
+  shadowOptions: {
+    mode: DesignSystem.shadowRootMode
+  }
+});
 /**
  * Registers the carousel element and all of its internal dependencies
  * (carousel-item, carousel-nav, carousel-nav-item) with the provided registry.
@@ -4725,12 +4724,11 @@ const definition$16 = CarouselViewport.compose({
  * @public
  */
 function defineCarousel(registry = customElements) {
-  definition$16.define(registry);
-  definition$18.define(registry);
   definition$17.define(registry);
   definition$19.define(registry);
+  definition$18.define(registry);
+  definition$16.define(registry);
 }
-defineCarousel(DesignSystem.registry);
 
 var __decorate$t = window && window.__decorate || function (decorators, target, key, desc) {
   var c = arguments.length,
@@ -4784,8 +4782,8 @@ __decorate$t([observable], CarouselItem.prototype, "tabId", void 0);
  * Styles for the {@link @fabric-msft/fabric-web#(CarouselItem:class)} component.
  * @public
  */
-const styles$E = css`
-  :host{display:block;flex-shrink:0;width:100%;box-sizing:border-box}`;
+const styles$14 = css`
+  :host{white-space:normal;display:block;flex-shrink:0;width:100%;box-sizing:border-box}`;
 
 /**
  * The template for the {@link @fabric-msft/fabric-web#(CarouselItem:class)} component.
@@ -4806,7 +4804,7 @@ const template$y = carouselItemTemplate();
 const definition$15 = CarouselItem.compose({
   name: `${DesignSystem.prefix}-carousel-item`,
   template: template$y,
-  styles: styles$E,
+  styles: styles$14,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -5257,9 +5255,9 @@ __decorate$s([observable], CardCarousel.prototype, "currentIndex", void 0);
 __decorate$s([observable], CardCarousel.prototype, "nextButton", void 0);
 __decorate$s([observable], CardCarousel.prototype, "prevButton", void 0);
 
-const styles$D = css`
+const styles$13 = css`
   ${display("block")}
-  :host{display:flex;flex-direction:column;align-items:center;width:100%;overflow:hidden;padding:${spacingVerticalM} ${spacingHorizontalS} ${spacingVerticalS}
+  :host{white-space:normal;display:flex;flex-direction:column;align-items:center;width:100%;overflow:hidden;padding:${spacingVerticalM} ${spacingHorizontalS} ${spacingVerticalS}
       ${spacingHorizontalS}}.navigation{display:flex;justify-content:space-between;align-items:center;width:100%;margin:${spacingVerticalM} 0}.header{font-size:${fontSizeBase400};font-family:${fontFamilyBase};font-weight:${fontWeightBold};line-height:${lineHeightBase400}}.viewport{display:flex;flex-direction:row;justify-content:flex-start;transition:transform 0.3s ease-in-out;will-change:transform;width:100%;padding-block-start:${spacingVerticalM};padding-inline:0;padding-block-end:${spacingVerticalS}}.viewport ::slotted(*){display:inline-block;margin-inline-end:var(--gap-width,16px)}`;
 
 /**
@@ -5283,7 +5281,7 @@ const template$x = cardCarouselTemplate();
 const definition$14 = CardCarousel.compose({
   name: `${DesignSystem.prefix}-card-carousel`,
   template: template$x,
-  styles: styles$D,
+  styles: styles$13,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -5405,8 +5403,10 @@ const ButtonTypes = {
   ...ButtonType
 };
 
-const styles$C = css`
-  ${ButtonStyles}:host([size="small"]:not([shape="circular"]):not([shape="square"])){border-radius:${borderRadiusMedium}}:host([appearance="primary-on-brand"]){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:${colorNeutralStrokeOnBrand}}:host(
+const styles$12 = css`
+  ${ButtonStyles}
+
+  :host{white-space:normal}:host([size="small"]:not([shape="circular"]):not([shape="square"])){border-radius:${borderRadiusMedium}}:host([appearance="primary-on-brand"]){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:${colorNeutralStrokeOnBrand}}:host(
     [appearance="primary-on-brand"]:is(:hover,:hover:active):not(
         :focus-visible
       )
@@ -5421,7 +5421,7 @@ const styles$C = css`
 const definition$13 = Button.compose({
   name: `${DesignSystem.prefix}-button`,
   template: ButtonTemplate,
-  styles: styles$C,
+  styles: styles$12,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -5679,10 +5679,10 @@ __decorate$q([attr({
  * @public
  * @privateRemarks
  */
-const styles$B = css`
+const styles$11 = css`
   ${display("inline-flex")}
 
-  :host{--icon-spacing:${spacingHorizontalSNudge};position:relative;contain:layout style;vertical-align:middle;align-items:center;box-sizing:border-box;justify-content:center;text-align:center;text-decoration-line:none;margin:0;min-height:${sizeVerticalXXXL};outline-style:none;background-color:${colorNeutralBackground4};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:calc(${spacingHorizontalXXXL} * 3);border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer;user-select:none;width:fit-content}.content{display:inherit;padding:0 ${spacingHorizontalSNudge}}:host(${mediumState}) .content{padding:0 ${spacingHorizontalMNudge}}:host(${largeState}) .content{padding:0 ${spacingHorizontalM}}:host(:hover){background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active){background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host(:focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 ${strokeWidthThick} ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){transition-duration:0.01ms}::slotted(svg){font-size:${fontSizeBase600};height:${sizeVerticalXL};width:${sizeHorizontalXL}}:is([slot="start"],::slotted([slot="start"])){margin-inline-end:var(--icon-spacing);display:flex;justify-content:center;align-items:center}:is([slot="end"],::slotted([slot="end"])){margin-inline-start:var(--icon-spacing);display:flex;justify-content:center;align-items:center}:host(${iconOnlyState}){width:${sizeVerticalXXXL};height:${sizeVerticalXXXL};min-width:${sizeVerticalXXXL};min-height:${sizeVerticalXXXL};max-width:${sizeVerticalXXXL};max-height:${sizeVerticalXXXL}}:host(${smallState}){--icon-spacing:${spacingHorizontalXS};min-height:${sizeVerticalXXL};min-width:calc(${spacingHorizontalXXXL} * 2);padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host(${smallState}${iconOnlyState}){width:${sizeVerticalXXL};height:${sizeVerticalXXL};min-width:${sizeVerticalXXL};min-height:${sizeVerticalXXL};max-width:${sizeVerticalXXL};max-height:${sizeVerticalXXL}}:host(${largeState}){min-height:calc(${spacingVerticalXXXL} + ${spacingVerticalS});border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(${largeState}${iconOnlyState}){min-width:calc(${spacingVerticalXXXL} + ${spacingVerticalS});max-width:calc(${spacingVerticalXXXL} + ${spacingVerticalS});max-height:calc(${spacingVerticalXXXL} + ${spacingVerticalS});min-height:calc(${spacingVerticalXXXL} + ${spacingVerticalS});width:calc(${spacingVerticalXXXL} + ${spacingVerticalS});height:calc(${spacingVerticalXXXL} + ${spacingVerticalS})}:host(${largeState}) ::slotted(svg){font-size:${fontSizeBase600};height:${sizeVerticalXXL};width:${sizeHorizontalXXL}}:host(:is(${circularState},${circularState}:focus-visible)){border-radius:${borderRadiusCircular}}:host(:is(${squareState},${squareState}:focus-visible)){border-radius:${borderRadiusNone}}:host(${primaryState}){background-color:${colorNeutralBackground4};color:${colorNeutralForeground1};border-color:transparent}:host(${primaryState}:hover){background-color:${colorNeutralBackground4Hover};color:${colorNeutralForeground1}}:host(${primaryState}:is(:hover,:hover:active)){border-color:${colorNeutralStroke2}}:host(${primaryState}:hover:active){border-color:${colorTransparentStroke};background-color:${colorNeutralBackgroundInverted};color:${colorNeutralForegroundOnBrand}}:host(${primaryState}:focus-visible){border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 ${strokeWidthThick} ${colorStrokeFocus2}}:host(${outlineState}){background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host(${outlineState}:hover){background-color:${colorTransparentBackgroundHover}}:host(${outlineState}:hover:active){background-color:${colorTransparentBackgroundPressed}}:host(${subtleState}){background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host(${subtleState}:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host(${subtleState}:hover:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host(${subtleState}:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host(${subtleState}:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host(${transparentState}){background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host(${transparentState}:hover){background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host(${transparentState}:hover:active){background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host(:is(${transparentState},${transparentState}:is(:hover,:active))){border-color:transparent}:host([appearance="primary-on-brand"]){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:${colorNeutralStrokeOnBrand}}:host(
+  :host{white-space:normal;--icon-spacing:${spacingHorizontalSNudge};position:relative;contain:layout style;vertical-align:middle;align-items:center;box-sizing:border-box;justify-content:center;text-align:center;text-decoration-line:none;margin:0;min-height:${sizeVerticalXXXL};outline-style:none;background-color:${colorNeutralBackground4};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:calc(${spacingHorizontalXXXL} * 3);border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer;user-select:none;width:fit-content}.content{display:inherit;padding:0 ${spacingHorizontalSNudge}}:host(${mediumState}) .content{padding:0 ${spacingHorizontalMNudge}}:host(${largeState}) .content{padding:0 ${spacingHorizontalM}}:host(:hover){background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active){background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host(:focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 ${strokeWidthThick} ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){transition-duration:0.01ms}::slotted(svg){font-size:${fontSizeBase600};height:${sizeVerticalXL};width:${sizeHorizontalXL}}:is([slot="start"],::slotted([slot="start"])){margin-inline-end:var(--icon-spacing);display:flex;justify-content:center;align-items:center}:is([slot="end"],::slotted([slot="end"])){margin-inline-start:var(--icon-spacing);display:flex;justify-content:center;align-items:center}:host(${iconOnlyState}){width:${sizeVerticalXXXL};height:${sizeVerticalXXXL};min-width:${sizeVerticalXXXL};min-height:${sizeVerticalXXXL};max-width:${sizeVerticalXXXL};max-height:${sizeVerticalXXXL}}:host(${smallState}){--icon-spacing:${spacingHorizontalXS};min-height:${sizeVerticalXXL};min-width:calc(${spacingHorizontalXXXL} * 2);padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host(${smallState}${iconOnlyState}){width:${sizeVerticalXXL};height:${sizeVerticalXXL};min-width:${sizeVerticalXXL};min-height:${sizeVerticalXXL};max-width:${sizeVerticalXXL};max-height:${sizeVerticalXXL}}:host(${largeState}){min-height:calc(${spacingVerticalXXXL} + ${spacingVerticalS});border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(${largeState}${iconOnlyState}){min-width:calc(${spacingVerticalXXXL} + ${spacingVerticalS});max-width:calc(${spacingVerticalXXXL} + ${spacingVerticalS});max-height:calc(${spacingVerticalXXXL} + ${spacingVerticalS});min-height:calc(${spacingVerticalXXXL} + ${spacingVerticalS});width:calc(${spacingVerticalXXXL} + ${spacingVerticalS});height:calc(${spacingVerticalXXXL} + ${spacingVerticalS})}:host(${largeState}) ::slotted(svg){font-size:${fontSizeBase600};height:${sizeVerticalXXL};width:${sizeHorizontalXXL}}:host(:is(${circularState},${circularState}:focus-visible)){border-radius:${borderRadiusCircular}}:host(:is(${squareState},${squareState}:focus-visible)){border-radius:${borderRadiusNone}}:host(${primaryState}){background-color:${colorNeutralBackground4};color:${colorNeutralForeground1};border-color:transparent}:host(${primaryState}:hover){background-color:${colorNeutralBackground4Hover};color:${colorNeutralForeground1}}:host(${primaryState}:is(:hover,:hover:active)){border-color:${colorNeutralStroke2}}:host(${primaryState}:hover:active){border-color:${colorTransparentStroke};background-color:${colorNeutralBackgroundInverted};color:${colorNeutralForegroundOnBrand}}:host(${primaryState}:focus-visible){border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 ${strokeWidthThick} ${colorStrokeFocus2}}:host(${outlineState}){background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host(${outlineState}:hover){background-color:${colorTransparentBackgroundHover}}:host(${outlineState}:hover:active){background-color:${colorTransparentBackgroundPressed}}:host(${subtleState}){background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host(${subtleState}:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host(${subtleState}:hover:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host(${subtleState}:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host(${subtleState}:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host(${transparentState}){background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host(${transparentState}:hover){background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host(${transparentState}:hover:active){background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host(:is(${transparentState},${transparentState}:is(:hover,:active))){border-color:transparent}:host([appearance="primary-on-brand"]){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:${colorNeutralStrokeOnBrand}}:host(
     [appearance="primary-on-brand"]:is(:hover,:hover:active):not(
         :focus-visible
       )
@@ -5739,7 +5739,7 @@ const template$w = filterPillTemplate();
 const definition$12 = FilterPill.compose({
   name: `${DesignSystem.prefix}-filter-pill`,
   template: template$w,
-  styles: styles$B,
+  styles: styles$11,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -6195,9 +6195,10 @@ __decorate$o([attr], ModalFreItem.prototype, "label", void 0);
 __decorate$o([observable], ModalFreItem.prototype, "panelId", void 0);
 __decorate$o([observable], ModalFreItem.prototype, "tabId", void 0);
 
-const styles$A = css`
+const styles$10 = css`
   ${DialogStyles}
-  dialog{max-width:var(--dialog-max-width,600px)}}`;
+
+  :host{white-space:normal}dialog{max-width:var(--dialog-max-width,600px)}`;
 
 /**
  * Dialog
@@ -6246,7 +6247,7 @@ class Dialog extends Dialog$1 {}
 const definition$11 = Dialog.compose({
   name: `${DesignSystem.prefix}-dialog`,
   template: DialogTemplate,
-  styles: styles$A,
+  styles: styles$10,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -6259,8 +6260,8 @@ const definition$11 = Dialog.compose({
  * layout (close button, content area, footer, FRE nav, buttons).
  * @public
  */
-const styles$z = css`
-  :host{display:contents}.modal-body{display:flex;flex-direction:column;position:relative;max-height:85vh}.close-button{position:absolute;inset-block-start:${spacingVerticalM};inset-inline-end:${spacingHorizontalL};z-index:1}.content{flex:1;overflow:auto;padding:${spacingVerticalL} ${spacingHorizontalXL}}:host([mode="fre"]) .content{padding:0;overflow:hidden}::slotted(fabric-modal-fre-item){display:block}::slotted(fabric-modal-fre-item:not([active])){display:none !important}.footer{display:flex;align-items:center;justify-content:space-between;padding:${spacingVerticalL} ${spacingHorizontalXL};gap:${spacingHorizontalL}}.nav{flex:1;display:flex;justify-content:center}::slotted(h1),::slotted(h2),::slotted(h3){font-size:${fontSizeBase500};font-weight:${fontWeightSemibold};color:${colorNeutralForeground1};margin:0 0 ${spacingVerticalS}}::slotted(p){font-size:${fontSizeBase300};color:${colorNeutralForeground2};margin:0}`;
+const styles$$ = css`
+  :host{white-space:normal;display:contents}.modal-body{display:flex;flex-direction:column;position:relative;max-height:85vh}.close-button{position:absolute;inset-block-start:${spacingVerticalM};inset-inline-end:${spacingHorizontalL};z-index:1}.content{flex:1;overflow:auto;padding:${spacingVerticalL} ${spacingHorizontalXL}}:host([mode="fre"]) .content{padding:0;overflow:hidden}::slotted(fabric-modal-fre-item){display:block}::slotted(fabric-modal-fre-item:not([active])){display:none !important}.footer{display:flex;align-items:center;justify-content:space-between;padding:${spacingVerticalL} ${spacingHorizontalXL};gap:${spacingHorizontalL}}.nav{flex:1;display:flex;justify-content:center}::slotted(h1),::slotted(h2),::slotted(h3){font-size:${fontSizeBase500};font-weight:${fontWeightSemibold};color:${colorNeutralForeground1};margin:0 0 ${spacingVerticalS}}::slotted(p){font-size:${fontSizeBase300};color:${colorNeutralForeground2};margin:0}`;
 
 const searchIcon = html`<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12.7291 13.4362C11.5924 14.411 10.115 15 8.5 15C4.91015 15 2 12.0899 2 8.5C2 4.91015 4.91015 2 8.5 2C12.0899 2 15 4.91015 15 8.5C15 10.115 14.411 11.5924 13.4361 12.7292L16.8535 16.1465C17.0487 16.3417 17.0487 16.6583 16.8535 16.8536C16.6799 17.0271 16.4105 17.0464 16.2156 16.9114L16.1464 16.8536L12.7291 13.4362ZM12.0196 12.7266C12.276 12.5128 12.5127 12.2761 12.7265 12.0197C13.5216 11.0659 14 9.83881 14 8.5C14 5.46243 11.5376 3 8.5 3C5.46243 3 3 5.46243 3 8.5C3 11.5376 5.46243 14 8.5 14C9.83877 14 11.0658 13.5217 12.0196 12.7266Z" fill="#616161" /></svg>`;
 const dismissIcon = html`<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M4.08859 4.21569L4.14645 4.14645C4.32001 3.97288 4.58944 3.9536 4.78431 4.08859L4.85355 4.14645L10 9.293L15.1464 4.14645C15.32 3.97288 15.5894 3.9536 15.7843 4.08859L15.8536 4.14645C16.0271 4.32001 16.0464 4.58944 15.9114 4.78431L15.8536 4.85355L10.707 10L15.8536 15.1464C16.0271 15.32 16.0464 15.5894 15.9114 15.7843L15.8536 15.8536C15.68 16.0271 15.4106 16.0464 15.2157 15.9114L15.1464 15.8536L10 10.707L4.85355 15.8536C4.67999 16.0271 4.41056 16.0464 4.21569 15.9114L4.14645 15.8536C3.97288 15.68 3.9536 15.4106 4.08859 15.2157L4.14645 15.1464L9.293 10L4.14645 4.85355C3.97288 4.67999 3.9536 4.41056 4.08859 4.21569L4.14645 4.14645L4.08859 4.21569Z" fill="#616161" /></svg>`;
@@ -6290,7 +6291,7 @@ const template$v = modalTemplate();
 const ModalDefinition = Modal.compose({
   name: `${DesignSystem.prefix}-modal`,
   template: template$v,
-  styles: styles$z,
+  styles: styles$$,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -6302,14 +6303,14 @@ const ModalDefinition = Modal.compose({
  * @remarks
  * HTML Element: `<fabric-modal>`
  */
-const definition$10 = composeDefinitions(fromFAST(ModalDefinition), fromFAST(definition$11), fromFAST(definition$13), fromFAST(definition$18), fromFAST(definition$17));
+const definition$10 = composeDefinitions(fromFAST(ModalDefinition), fromFAST(definition$11), fromFAST(definition$13), fromFAST(definition$19), fromFAST(definition$18));
 
 /**
  * Styles for the {@link @fabric-msft/fabric-web#(ModalFreItem:class)} component.
  * @public
  */
 const modalFreItemStyles = css`
-  :host{display:none}:host([active]){display:block}.hero{overflow:hidden}.hero ::slotted(*){display:block;width:100%}.info{padding:${spacingHorizontalXL};padding-block-end:0}.info-header{display:flex;align-items:flex-start;justify-content:space-between;gap:${spacingHorizontalL}}.title{font-size:${fontSizeBase400};font-weight:${fontWeightSemibold};color:${colorNeutralForeground1};margin:0}.description{margin:${spacingVerticalXS} 0 0;font-size:${fontSizeBase300};line-height:${lineHeightBase300};color:${colorNeutralForeground2}}`;
+  :host{white-space:normal;display:none}:host([active]){display:block}.hero{overflow:hidden}.hero ::slotted(*){display:block;width:100%}.info{padding:${spacingHorizontalXL};padding-block-end:0}.info-header{display:flex;align-items:flex-start;justify-content:space-between;gap:${spacingHorizontalL}}.title{font-size:${fontSizeBase400};font-weight:${fontWeightSemibold};color:${colorNeutralForeground1};margin:0}.description{margin:${spacingVerticalXS} 0 0;font-size:${fontSizeBase300};line-height:${lineHeightBase300};color:${colorNeutralForeground2}}`;
 
 /**
  * The template for the {@link @fabric-msft/fabric-web#(ModalFreItem:class)} component.
@@ -6476,9 +6477,10 @@ __decorate$n([attr({
   mode: "boolean"
 })], CompoundButton.prototype, "iconOnly", void 0);
 
-const styles$y = css`
+const styles$_ = css`
   ${CompoundButtonStyles}
-  :host([appearance='primary-on-brand']){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:${colorNeutralStrokeOnBrand}}:host([appearance="primary-on-brand"]) ::slotted([slot="description"]){color:${colorNeutralForegroundOnBrand}}:host(
+
+  :host{white-space:normal}:host([appearance="primary-on-brand"]){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:${colorNeutralStrokeOnBrand}}:host([appearance="primary-on-brand"]) ::slotted([slot="description"]){color:${colorNeutralForegroundOnBrand}}:host(
     [appearance="primary-on-brand"]:is(:hover,:hover:active):not(
         :focus-visible
       )
@@ -6492,7 +6494,7 @@ const styles$y = css`
 const definition$$ = CompoundButton.compose({
   name: `${DesignSystem.prefix}-compound-button`,
   template: CompoundButtonTemplate,
-  styles: styles$y,
+  styles: styles$_,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -6541,6 +6543,11 @@ const SpinnerSizes = {
   ...SpinnerSize
 };
 
+const styles$Z = css`
+  ${SpinnerStyles}
+
+  :host{white-space:normal}`;
+
 /**
  * The Fabric Spinner component.
  *
@@ -6549,7 +6556,7 @@ const SpinnerSizes = {
 const definition$_ = Spinner.compose({
   name: `${DesignSystem.prefix}-spinner`,
   template: SpinnerTemplate,
-  styles: SpinnerStyles,
+  styles: styles$Z,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -6617,8 +6624,10 @@ __decorate$m([attr({
   mode: "boolean"
 })], LoadingButton.prototype, "loading", void 0);
 
-const styles$x = css`
-  ${ButtonStyles}:host([size="small"]:not([shape="circular"]):not([shape="square"])){border-radius:${borderRadiusMedium}}:host([size="small"]) fluent-button{gap:${spacingHorizontalXS}}fabric-spinner{display:none}.content{gap:${spacingHorizontalS}}:host([size="large"]) .content{gap:${spacingHorizontalM}}:host([loading]){cursor:not-allowed}:host([loading]) fabric-spinner{display:block}`;
+const styles$Y = css`
+  ${ButtonStyles}
+
+  :host{white-space:normal}:host([size="small"]:not([shape="circular"]):not([shape="square"])){border-radius:${borderRadiusMedium}}:host([size="small"]) fluent-button{gap:${spacingHorizontalXS}}fabric-spinner{display:none}.content{gap:${spacingHorizontalS}}:host([size="large"]) .content{gap:${spacingHorizontalM}}:host([loading]){cursor:not-allowed}:host([loading]) fabric-spinner{display:block}`;
 
 /**
  * Generates the template for the {@link @fabric-msft/fabric-web#LoadingButton} component.
@@ -6651,7 +6660,7 @@ const template$u = loadingButtonTemplate();
 const LoadingButtonDefinition = LoadingButton.compose({
   name: `${DesignSystem.prefix}-loading-button`,
   template: template$u,
-  styles: styles$x,
+  styles: styles$Y,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -6734,10 +6743,10 @@ __decorate$l([attr({
 /** MultiView styles
  * @public
  */
-const styles$w = css`
+const styles$X = css`
   ${display("block")}
 
-  :host{display:block;position:relative;overflow-y:auto}:host([hidden]){display:none}:host([data-flexposition="2"]){order:2}:host(:focus-visible)::after{content:"";position:absolute;inset:1px;pointer-events:none;outline:${strokeWidthThick} solid ${colorStrokeFocus2};outline-offset:calc(${strokeWidthThick} * -1)}`.withBehaviors(forcedColorsStylesheetBehavior$1(css`
+  :host{white-space:normal;display:block;position:relative;overflow-y:auto}:host([hidden]){display:none}:host([data-flexposition="2"]){order:2}:host(:focus-visible)::after{content:"";position:absolute;inset:1px;pointer-events:none;outline:${strokeWidthThick} solid ${colorStrokeFocus2};outline-offset:calc(${strokeWidthThick} * -1)}`.withBehaviors(forcedColorsStylesheetBehavior$1(css`
     :host(:focus-visible)::after{outline-color:Highlight}`));
 
 /**
@@ -6771,7 +6780,7 @@ const template$t = multiViewTemplate();
 const definition$Y = MultiView.compose({
   name: `${DesignSystem.prefix}-multi-view`,
   template: template$t,
-  styles: styles$w,
+  styles: styles$X,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -6810,9 +6819,9 @@ const definition$Y = MultiView.compose({
 class MultiViewController extends FASTElement {}
 
 // Need to support icon hover styles
-const styles$v = css`
+const styles$W = css`
   ${display("flex")}
-  :host{position:relative;display:flex;justify-content:center;align-items:center;align-items:center;box-sizing:border-box;justify-content:center;text-decoration-line:none;margin:0px;min-height:${spacingVerticalXXXL};min-width:${spacingHorizontalXXXL};outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer}:host([aria-hidden="true"]){display:none}:host([aria-expanded="true"])::before{content:"";z-index:3;position:absolute;inset-inline-start:0;height:${spacingVerticalXXXL};width:3px;background:${colorBrandBackground}}:host(:focus)::after{content:"";position:absolute;inset:0px;pointer-events:none;border-radius:${borderRadiusSmall};outline:${strokeWidthThin} solid ${colorStrokeFocus2};outline-offset:calc(${strokeWidthThin} * -1)}`.withBehaviors(forcedColorsStylesheetBehavior$1(css`
+  :host{white-space:normal;position:relative;display:flex;justify-content:center;align-items:center;align-items:center;box-sizing:border-box;justify-content:center;text-decoration-line:none;margin:0px;min-height:${spacingVerticalXXXL};min-width:${spacingHorizontalXXXL};outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer}:host([aria-hidden="true"]){display:none}:host([aria-expanded="true"])::before{content:"";z-index:3;position:absolute;inset-inline-start:0;height:${spacingVerticalXXXL};width:3px;background:${colorBrandBackground}}:host(:focus)::after{content:"";position:absolute;inset:0px;pointer-events:none;border-radius:${borderRadiusSmall};outline:${strokeWidthThin} solid ${colorStrokeFocus2};outline-offset:calc(${strokeWidthThin} * -1)}`.withBehaviors(forcedColorsStylesheetBehavior$1(css`
     :host(:focus){border-color:CanvasText}:host(:focus)::after{outline-color:Highlight}`));
 
 /**
@@ -6845,7 +6854,7 @@ const template$s = multiViewControllerTemplate();
 const definition$X = MultiViewController.compose({
   name: `${DesignSystem.prefix}-multi-view-controller`,
   template: template$s,
-  styles: styles$v
+  styles: styles$W
 });
 
 var __decorate$k = window && window.__decorate || function (decorators, target, key, desc) {
@@ -7533,9 +7542,9 @@ __decorate$k([observable], MultiViewGroup.prototype, "openedMultiViews", void 0)
 /** PaneSwitcher styles
  * @public
  */
-const styles$u = css`
+const styles$V = css`
   ${display("flex")}
-  :host{flex-direction:column;position:absolute;z-index:10;inset-inline-end:0;top:0;height:100%}.root{display:flex;flex-direction:row;height:100%}.views{display:flex}.controllers{display:flex;flex-direction:column;background:var(--colorNeutralBackground1);position:relative}.controllers:focus-visible::after{content:"";position:absolute;inset:1px;pointer-events:none;outline:${strokeWidthThick} solid ${colorStrokeFocus2};outline-offset:calc(${strokeWidthThick} * -1)}`.withBehaviors(forcedColorsStylesheetBehavior$1(css`
+  :host{white-space:normal;flex-direction:column;position:absolute;z-index:10;inset-inline-end:0;top:0;height:100%}.root{display:flex;flex-direction:row;height:100%}.views{display:flex}.controllers{display:flex;flex-direction:column;background:var(--colorNeutralBackground1);position:relative}.controllers:focus-visible::after{content:"";position:absolute;inset:1px;pointer-events:none;outline:${strokeWidthThick} solid ${colorStrokeFocus2};outline-offset:calc(${strokeWidthThick} * -1)}`.withBehaviors(forcedColorsStylesheetBehavior$1(css`
     .controllers:focus-visible::after{outline-color:Highlight}`));
 
 /**
@@ -7573,7 +7582,7 @@ const template$r = multiViewGroupTemplate();
 const definition$W = MultiViewGroup.compose({
   name: `${DesignSystem.prefix}-multi-view-group`,
   template: template$r,
-  styles: styles$u,
+  styles: styles$V,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -8092,10 +8101,10 @@ __decorate$h([observable], Overflow.prototype, "defaultSlottedContent", void 0);
  * Styles for the {@link Overflow} component.
  * @public
  */
-const styles$t = css`
+const styles$U = css`
   ${display("flex")}
 
-  :host{position:relative;min-inline-size:0;inline-size:100%;flex-wrap:nowrap;overflow:clip;overflow-clip-margin:${spacingHorizontalXS}}:host([overflow-axis="vertical"]){flex-direction:column;block-size:100%}:host([overflow-direction="start"]) ::slotted([slot="menu"]){order:-1}`;
+  :host{white-space:normal;position:relative;min-inline-size:0;inline-size:100%;flex-wrap:nowrap;overflow:clip;overflow-clip-margin:${spacingHorizontalXS}}:host([overflow-axis="vertical"]){flex-direction:column;block-size:100%}:host([overflow-direction="start"]) ::slotted([slot="menu"]){order:-1}`;
 
 /**
  * The template for the {@link Overflow} component.
@@ -8112,7 +8121,7 @@ const template$q = html`<template><slot ${slotted("defaultSlottedContent")}></sl
 const definition$V = Overflow.compose({
   name: `${DesignSystem.prefix}-overflow`,
   template: template$q,
-  styles: styles$t,
+  styles: styles$U,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -8133,10 +8142,10 @@ const OverflowDirections = {
  * Styles for the {@link OverflowItem} component.
  * @public
  */
-const styles$s = css`
+const styles$T = css`
   ${display("inline-flex")}
 
-  :host{flex-shrink:0}:host(:focus-within){position:relative}:host([data-overflowing]){display:none}`;
+  :host{white-space:normal;flex-shrink:0}:host(:focus-within){position:relative}:host([data-overflowing]){display:none}`;
 
 /**
  * The template for the {@link OverflowItem} component.
@@ -8153,7 +8162,7 @@ const template$p = html`<template><slot></slot></template>`;
 const definition$U = OverflowItem.compose({
   name: `${DesignSystem.prefix}-overflow-item`,
   template: template$p,
-  styles: styles$s,
+  styles: styles$T,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -8163,10 +8172,10 @@ const definition$U = OverflowItem.compose({
  * Styles for the {@link OverflowDivider} component.
  * @public
  */
-const styles$r = css`
+const styles$S = css`
   ${display("inline-flex")}
 
-  :host{flex-shrink:0;align-items:stretch;padding-block:${spacingVerticalS};padding-inline:${spacingHorizontalXS};min-block-size:${sizeVerticalXL};box-sizing:border-box}:host::before{content:"";display:block;inline-size:${strokeWidthThin};background:${colorNeutralStroke2}}:host([data-overflowing]){display:none}`;
+  :host{white-space:normal;flex-shrink:0;align-items:stretch;padding-block:${spacingVerticalS};padding-inline:${spacingHorizontalXS};min-block-size:${sizeVerticalXL};box-sizing:border-box}:host::before{content:"";display:block;inline-size:${strokeWidthThin};background:${colorNeutralStroke2}}:host([data-overflowing]){display:none}`;
 
 /**
  * The template for the {@link OverflowDivider} component.
@@ -8183,7 +8192,7 @@ const template$o = html`<template><slot></slot></template>`;
 const definition$T = OverflowDivider.compose({
   name: `${DesignSystem.prefix}-overflow-divider`,
   template: template$o,
-  styles: styles$r,
+  styles: styles$S,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -9656,10 +9665,10 @@ __decorate$g([observable], Popover.prototype, "popoverReference", void 0);
 __decorate$g([observable], Popover.prototype, "popoverRole", void 0);
 __decorate$g([observable], Popover.prototype, "overflowBoundary", void 0);
 
-const styles$q = css`
+const styles$R = css`
   ${display("block")}
 
-  .popover-container{position:relative;width:fit-content}.popover{font-family:${fontFamilyBase};background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:1px solid ${colorTransparentStrokeInteractive};box-shadow:${shadow8};visibility:hidden;opacity:0;z-index:0;position:absolute;margin:0;min-width:50px;min-height:68px;max-width:var(--popoverMaxWidth,260px);width:max-content;height:max-content;padding:${spacingHorizontalL};transition-property:opacity,visibility;transition-duration:var(--popoverTransition,0ms);transition-delay:var(--popoverTransitionDelay,0ms)}.popover.popover-open{visibility:visible;display:block;opacity:1;z-index:1000}:host([size="small"]) .popover{padding:${spacingHorizontalM};max-width:var(--popoverMaxWidth,214px)}:host([size="large"]) .popover{padding:${spacingHorizontalXL};max-width:var(--popoverMaxWidth,317px)}.beak{position:absolute;top:0;width:0;height:0;border-inline-start:8px solid transparent;border-inline-end:8px solid transparent;border-bottom:8px solid ${colorNeutralBackground1};z-index:1}:host([beak]) .beak-shadow::after{content:"";position:absolute;width:0;height:0;border-inline-start:8px solid transparent;border-inline-end:9px solid transparent;border-bottom:8px solid rgba(0,0,0,0.14);filter:blur(8px);z-index:0;opacity:0;transition:all var(--popoverTransition,0ms);transition-delay:var(--popoverTransitionDelay,0ms)}:host([open][beak]) .beak-shadow:after{opacity:1}:host([beak]) .popover[data-position="above-start"] ~ .beak-shadow:after{start:calc(
+  :host{white-space:normal}.popover-container{position:relative;width:fit-content}.popover{font-family:${fontFamilyBase};background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:1px solid ${colorTransparentStrokeInteractive};box-shadow:${shadow8};visibility:hidden;opacity:0;z-index:0;position:absolute;margin:0;min-width:50px;min-height:68px;max-width:var(--popoverMaxWidth,260px);width:max-content;height:max-content;padding:${spacingHorizontalL};transition-property:opacity,visibility;transition-duration:var(--popoverTransition,0ms);transition-delay:var(--popoverTransitionDelay,0ms)}.popover.popover-open{visibility:visible;display:block;opacity:1;z-index:1000}:host([size="small"]) .popover{padding:${spacingHorizontalM};max-width:var(--popoverMaxWidth,214px)}:host([size="large"]) .popover{padding:${spacingHorizontalXL};max-width:var(--popoverMaxWidth,317px)}.beak{position:absolute;top:0;width:0;height:0;border-inline-start:8px solid transparent;border-inline-end:8px solid transparent;border-bottom:8px solid ${colorNeutralBackground1};z-index:1}:host([beak]) .beak-shadow::after{content:"";position:absolute;width:0;height:0;border-inline-start:8px solid transparent;border-inline-end:9px solid transparent;border-bottom:8px solid rgba(0,0,0,0.14);filter:blur(8px);z-index:0;opacity:0;transition:all var(--popoverTransition,0ms);transition-delay:var(--popoverTransitionDelay,0ms)}:host([open][beak]) .beak-shadow:after{opacity:1}:host([beak]) .popover[data-position="above-start"] ~ .beak-shadow:after{start:calc(
       16px + var(--beakShadowHorizontalNudge,0px)
     );top:calc(
       -8px + var(--beakShadowVerticalNudge,0px)
@@ -9713,7 +9722,7 @@ const template$n = popoverTemplate();
 const definition$S = Popover.compose({
   name: `${DesignSystem.prefix}-popover`,
   template: template$n,
-  styles: styles$q,
+  styles: styles$R,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -10167,10 +10176,10 @@ __decorate$f([attr({
 /**
  * Component styles for `fabric-pagination`.
  */
-const styles$p = css`
+const styles$Q = css`
   ${display("inline-flex")}
 
-  :host{box-sizing:border-box;font-family:${fontFamilyBase}}.pagination-root{display:inline-flex;align-items:center;justify-content:center;gap:${spacingHorizontalS};min-height:${spacingVerticalXXXL}}button{border:0;background:transparent;color:${colorNeutralForeground2};font-size:${fontSizeBase300};line-height:${lineHeightBase300};cursor:pointer}button:disabled{color:${colorNeutralForeground3};cursor:default}.text-button{display:inline-flex;align-items:center;gap:${spacingHorizontalXS};font-weight:${fontWeightSemibold};padding-block:0;padding-inline:${spacingHorizontalM};block-size:${spacingVerticalXXXL};border-radius:${borderRadiusMedium}}.button-label{display:inline-flex;align-items:center}.page-button{inline-size:${spacingHorizontalXXL};box-sizing:border-box;block-size:${spacingVerticalXXXL};padding-block:0;padding-inline:${spacingHorizontalSNudge};position:relative;font-weight:${fontWeightRegular};color:${colorNeutralForeground2};display:inline-flex;align-items:center;justify-content:center}.page-items{display:inline-flex;align-items:center;justify-content:center;gap:${spacingHorizontalSNudge}}.page-button.current{font-weight:${fontWeightSemibold};color:${colorNeutralForeground1}}.page-button.current::after{content:"";position:absolute;inset-inline-start:${spacingHorizontalSNudge};inset-inline-end:${spacingHorizontalSNudge};inset-block-end:0;block-size:2px;background:${colorCompoundBrandStroke};border-radius:1px}.ellipsis{display:inline-flex;align-items:center;justify-content:center;inline-size:${spacingHorizontalXXL};box-sizing:border-box;color:${colorNeutralForeground2};font-size:${fontSizeBase300};line-height:${lineHeightBase300};padding:0}.navigation-icon{display:inline-flex;align-items:center;justify-content:center}:host(:dir(rtl)) .navigation-icon{transform:scaleX(-1)}.icon-button{inline-size:${spacingVerticalXXXL};block-size:${spacingVerticalXXXL};padding-block:0;padding-inline:0;border-radius:${borderRadiusMedium};color:${colorNeutralForeground2};font-size:${fontSizeBase300};display:inline-flex;align-items:center;justify-content:center}.summary{display:inline-flex}.compact-dropdown{inline-size:130px;}:host([disabled]) .page-button,:host([disabled]) .text-button,:host([disabled]) .icon-button{color:${colorNeutralForeground3}}.text-button:focus-visible,.page-button:focus-visible,.icon-button:focus-visible{outline:2px solid ${colorStrokeFocus2};outline-offset:-2px;border-radius:${borderRadiusMedium}}@media (forced-colors:active){button:not(:disabled){color:ButtonText}button:disabled{color:GrayText}.page-button.current::after{background:Highlight}.text-button:focus-visible,.page-button:focus-visible,.icon-button:focus-visible{outline:2px solid Highlight}}`;
+  :host{white-space:normal;box-sizing:border-box;font-family:${fontFamilyBase}}.pagination-root{display:inline-flex;align-items:center;justify-content:center;gap:${spacingHorizontalS};min-height:${spacingVerticalXXXL}}button{border:0;background:transparent;color:${colorNeutralForeground2};font-size:${fontSizeBase300};line-height:${lineHeightBase300};cursor:pointer}button:disabled{color:${colorNeutralForeground3};cursor:default}.text-button{display:inline-flex;align-items:center;gap:${spacingHorizontalXS};font-weight:${fontWeightSemibold};padding-block:0;padding-inline:${spacingHorizontalM};block-size:${spacingVerticalXXXL};border-radius:${borderRadiusMedium}}.button-label{display:inline-flex;align-items:center}.page-button{inline-size:${spacingHorizontalXXL};box-sizing:border-box;block-size:${spacingVerticalXXXL};padding-block:0;padding-inline:${spacingHorizontalSNudge};position:relative;font-weight:${fontWeightRegular};color:${colorNeutralForeground2};display:inline-flex;align-items:center;justify-content:center}.page-items{display:inline-flex;align-items:center;justify-content:center;gap:${spacingHorizontalSNudge}}.page-button.current{font-weight:${fontWeightSemibold};color:${colorNeutralForeground1}}.page-button.current::after{content:"";position:absolute;inset-inline-start:${spacingHorizontalSNudge};inset-inline-end:${spacingHorizontalSNudge};inset-block-end:0;block-size:2px;background:${colorCompoundBrandStroke};border-radius:1px}.ellipsis{display:inline-flex;align-items:center;justify-content:center;inline-size:${spacingHorizontalXXL};box-sizing:border-box;color:${colorNeutralForeground2};font-size:${fontSizeBase300};line-height:${lineHeightBase300};padding:0}.navigation-icon{display:inline-flex;align-items:center;justify-content:center}:host(:dir(rtl)) .navigation-icon{transform:scaleX(-1)}.icon-button{inline-size:${spacingVerticalXXXL};block-size:${spacingVerticalXXXL};padding-block:0;padding-inline:0;border-radius:${borderRadiusMedium};color:${colorNeutralForeground2};font-size:${fontSizeBase300};display:inline-flex;align-items:center;justify-content:center}.summary{display:inline-flex}.compact-dropdown{inline-size:130px;}:host([disabled]) .page-button,:host([disabled]) .text-button,:host([disabled]) .icon-button{color:${colorNeutralForeground3}}.text-button:focus-visible,.page-button:focus-visible,.icon-button:focus-visible{outline:2px solid ${colorStrokeFocus2};outline-offset:-2px;border-radius:${borderRadiusMedium}}@media (forced-colors:active){button:not(:disabled){color:ButtonText}button:disabled{color:GrayText}.page-button.current::after{background:Highlight}.text-button:focus-visible,.page-button:focus-visible,.icon-button:focus-visible{outline:2px solid Highlight}}`;
 
 /**
  * Creates the FAST template for `fabric-pagination`.
@@ -10194,16 +10203,16 @@ const template$m = paginationTemplate();
 const definition$R = Pagination.compose({
   name: `${DesignSystem.prefix}-pagination`,
   template: template$m,
-  styles: styles$p,
+  styles: styles$Q,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
 });
 
-const styles$o = css`
+const styles$P = css`
   ${DropdownStyles}
 
-  ::slotted([popover]){position:fixed}@supports (anchor-name:--anchor){::slotted([popover]){width:anchor-size(width);max-width:anchor-size(width)}:host(:where(:focus-within):not(${focusVisibleState})) .control{box-shadow:inset 0 0 0 1px var(--control-border-color,transparent);outline:none}`;
+  :host{white-space:normal}::slotted([popover]){position:fixed}@supports (anchor-name:--anchor){::slotted([popover]){width:anchor-size(width);max-width:anchor-size(width)}:host(:where(:focus-within):not(${focusVisibleState})) .control{box-shadow:inset 0 0 0 1px var(--control-border-color,transparent);outline:none}`;
 
 /**
  * Dropdown
@@ -10375,7 +10384,7 @@ class Dropdown extends Dropdown$1 {
 const definition$Q = Dropdown.compose({
   name: `${DesignSystem.prefix}-dropdown`,
   template: DropdownTemplate,
-  styles: styles$o,
+  styles: styles$P,
   shadowOptions: {
     delegatesFocus: true
   }
@@ -10424,6 +10433,11 @@ const definition$Q = Dropdown.compose({
  */
 class DropdownOption extends DropdownOption$1 {}
 
+const styles$O = css`
+  ${DropdownOptionStyles}
+
+  :host{white-space:normal}`;
+
 /**
  * The Fabric Option Element definition.
  *
@@ -10434,7 +10448,7 @@ class DropdownOption extends DropdownOption$1 {}
 const definition$P = DropdownOption.compose({
   name: `${DesignSystem.prefix}-option`,
   template: DropdownOptionTemplate,
-  styles: DropdownOptionStyles,
+  styles: styles$O,
   shadowOptions: {
     delegatesFocus: true
     // No slotAssignment needed for option based on temp implementation
@@ -11281,10 +11295,10 @@ __decorate$e([attr({
 })], SvgIcon.prototype, "ariaHidden", void 0);
 __decorate$e([attr], SvgIcon.prototype, "focusable", void 0);
 
-const styles$n = css`
+const styles$N = css`
   ${display("inline-flex")}
 
-  :host,:host svg{height:var(--icon-height,${sizeHorizontalXL});width:var(--icon-width,${sizeHorizontalXL})}:host svg:not([role="img"]){fill:currentcolor}`;
+  :host{white-space:normal}:host,:host svg{height:var(--icon-height,${sizeHorizontalXL});width:var(--icon-width,${sizeHorizontalXL})}:host svg:not([role="img"]){fill:currentcolor}`;
 
 /**
  * Generates the template for the {@link @fabric-msft/fabric-web#SvgIcon} component.
@@ -11307,7 +11321,7 @@ const template$l = html`<template></template>`;
 const definition$N = SvgIcon.compose({
   name: `${DesignSystem.prefix}-svg-icon`,
   template: template$l,
-  styles: styles$n,
+  styles: styles$N,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -11858,10 +11872,10 @@ class TableCell extends FASTElement {
   }
 }
 
-const styles$m = css`
+const styles$M = css`
   ${display("table-cell")}
 
-  :host{vertical-align:inherit;unicode-bidi:isolate}.cell-content{display:flex;align-items:center}::slotted([slot="before"]){margin-inline-end:${spacingHorizontalS}}`;
+  :host{white-space:normal;vertical-align:inherit;unicode-bidi:isolate}.cell-content{display:flex;align-items:center}::slotted([slot="before"]){margin-inline-end:${spacingHorizontalS}}`;
 
 /**
  * The template for the {@link @fabric-msft/fabric-web#(TableCell:class)} component.
@@ -11881,16 +11895,16 @@ const template$k = tableCellTemplate();
 const definition$M = TableCell.compose({
   name: `${DesignSystem.prefix}-table-cell`,
   template: template$k,
-  styles: styles$m,
+  styles: styles$M,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
 });
 
-const styles$l = css`
+const styles$L = css`
   ${display("table")}
 
-  table{border-collapse:collapse;min-width:510px;table-layout:fixed;display:table;width:100%;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.table-sort-button{all:unset;align-items:center;cursor:pointer;font:inherit;color:inherit;outline-style:none;min-height:${sizeVerticalXXXL};box-sizing:content-box;display:flex;justify-content:space-between;align-items:center;color:${colorNeutralForeground1};font-weight:${fontWeightRegular};text-align:start}tr{display:table-row;box-sizing:border-box;color:${colorNeutralForeground1};border-bottom:${strokeWidthThin} solid ${colorNeutralStroke2}}tbody tr:hover{color:${colorNeutralForeground1Hover};background-color:${colorSubtleBackgroundHover}}th{color:${colorNeutralForeground1};text-align:start;font-weight:${fontWeightRegular};vertical-align:middle;padding:0px ${spacingHorizontalS};border-collapse:collapse}th div{outline-style:none;min-height:32px;box-sizing:content-box;display:flex;align-items:center}th[data-table-cell-focus="true"]{outline:-webkit-focus-ring-color auto 1px}:host([sortable]) th:hover{cursor:pointer;background-color:${colorNeutralBackground1Hover}}td,fabric-table-cell{height:44px;padding:0px ${spacingHorizontalS};vertical-align:middle;color:${colorNeutralForeground1}}.visually-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important}`;
+  :host{white-space:normal}table{border-collapse:collapse;min-width:510px;table-layout:fixed;display:table;width:100%;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.table-sort-button{all:unset;align-items:center;cursor:pointer;font:inherit;color:inherit;outline-style:none;min-height:${sizeVerticalXXXL};box-sizing:content-box;display:flex;justify-content:space-between;align-items:center;color:${colorNeutralForeground1};font-weight:${fontWeightRegular};text-align:start}tr{display:table-row;box-sizing:border-box;color:${colorNeutralForeground1};border-bottom:${strokeWidthThin} solid ${colorNeutralStroke2}}tbody tr:hover{color:${colorNeutralForeground1Hover};background-color:${colorSubtleBackgroundHover}}th{color:${colorNeutralForeground1};text-align:start;font-weight:${fontWeightRegular};vertical-align:middle;padding:0px ${spacingHorizontalS};border-collapse:collapse}th div{outline-style:none;min-height:32px;box-sizing:content-box;display:flex;align-items:center}th[data-table-cell-focus="true"]{outline:-webkit-focus-ring-color auto 1px}:host([sortable]) th:hover{cursor:pointer;background-color:${colorNeutralBackground1Hover}}td,fabric-table-cell{height:44px;padding:0px ${spacingHorizontalS};vertical-align:middle;color:${colorNeutralForeground1}}.visually-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important}`;
 
 function tableTemplateFunction() {
   return html`<slot name="start"></slot><table part="table" role="table" aria-label="${x => x.sortable ? "table with sort" : "table"}" ?sortable="${x => x.sortable}"><thead role="rowgroup"><tr ${ref("tableHeadRef")} role="row"><slot name="table-head-row"></slot></tr></thead><tbody ${ref("tableBodyRef")} role="rowgroup"><slot name="table-body"></slot></tbody></table><slot name="end"></slot>`;
@@ -11901,7 +11915,7 @@ const template$j = tableTemplateFunction();
 const TableDefinition = Table.compose({
   name: `${DesignSystem.prefix}-table`,
   template: template$j,
-  styles: styles$l,
+  styles: styles$L,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -11972,8 +11986,8 @@ class SimpleTable extends FASTElement {
   }
 }
 
-const styles$k = css`
-  fabric-simple-table{display:block;font-family:${fontFamilyBase}}.microsoft-fabric-ux-fabric-simple-table{border-collapse:collapse;width:100%;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.microsoft-fabric-ux-fabric-simple-table tr{box-sizing:border-box;color:${colorNeutralForeground1}}.microsoft-fabric-ux-fabric-simple-table tbody tr{border-block-end:${strokeWidthThin} solid ${colorNeutralStroke2}}.microsoft-fabric-ux-fabric-simple-table th{color:${colorNeutralForeground1};text-align:start;font-weight:${fontWeightSemibold};vertical-align:middle;padding-block:${spacingVerticalM};padding-inline:${spacingHorizontalS}}.microsoft-fabric-ux-fabric-simple-table td{padding-block:${spacingVerticalM};padding-inline:${spacingHorizontalS};vertical-align:middle;color:${colorNeutralForeground1}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+const styles$K = css`
+  :host{white-space:normal}fabric-simple-table{display:block;font-family:${fontFamilyBase}}.microsoft-fabric-ux-fabric-simple-table{border-collapse:collapse;width:100%;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.microsoft-fabric-ux-fabric-simple-table tr{box-sizing:border-box;color:${colorNeutralForeground1}}.microsoft-fabric-ux-fabric-simple-table tbody tr{border-block-end:${strokeWidthThin} solid ${colorNeutralStroke2}}.microsoft-fabric-ux-fabric-simple-table th{color:${colorNeutralForeground1};text-align:start;font-weight:${fontWeightSemibold};vertical-align:middle;padding-block:${spacingVerticalM};padding-inline:${spacingHorizontalS}}.microsoft-fabric-ux-fabric-simple-table td{padding-block:${spacingVerticalM};padding-inline:${spacingHorizontalS};vertical-align:middle;color:${colorNeutralForeground1}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     .microsoft-fabric-ux-fabric-simple-table{color:CanvasText;background-color:Canvas}.microsoft-fabric-ux-fabric-simple-table tr{border-color:CanvasText}.microsoft-fabric-ux-fabric-simple-table th{color:CanvasText;border-color:CanvasText}.microsoft-fabric-ux-fabric-simple-table td{color:CanvasText}`));
 
 /**
@@ -11985,7 +11999,7 @@ const styles$k = css`
  */
 const definition$K = SimpleTable.compose({
   name: `${DesignSystem.prefix}-simple-table`,
-  styles: styles$k,
+  styles: styles$K,
   // Light DOM (no shadow root) is required because HTML table semantics don't accept
   // <slot> as a valid child element. The DOM children of <table> must be thead, tbody,
   // tfoot, etc. - not slots. This preserves native table accessibility and framework
@@ -12344,9 +12358,9 @@ __decorate$c([observable], Tag.prototype, "textSecondarySlotted", void 0);
 __decorate$c([observable], Tag.prototype, "textSizePrimary", void 0);
 __decorate$c([observable], Tag.prototype, "leadingIconSlotted", void 0);
 
-const styles$j = css`
+const styles$J = css`
   ${display("block")}
-  .caption1{${typographyCaption1Styles}}.caption2{${typographyCaption2Styles}}.body1{${typographyBody1Styles}}:host{height:${sizeVerticalXXXL};width:fit-content;display:inline-flex;align-items:center;background-color:${colorNeutralBackground3};color:${colorNeutralForeground2};border-radius:${borderRadiusMedium};border:none}:host([size="extraSmall"]){height:${sizeVerticalXL}}:host([size="small"]){height:${sizeVerticalXXL}}:host([shape="circular"]){border-radius:${borderRadiusCircular}}:host([appearance="outline"]){border:${strokeWidthThin} solid ${colorNeutralStroke1};background-color:unset}:host([appearance="brand"]){background-color:${colorBrandBackground2};color:${colorBrandForeground1}}:host([appearance="brand"]) fluent-button.dismissButton{color:${colorBrandForeground1}}:host([disabled]){color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted(*){color:${colorNeutralForegroundDisabled}}fluent-button.dismissButton{min-width:unset;padding:${spacingHorizontalNone};min-height:unset;margin-inline-start:${spacingHorizontalNone};margin-inline-end:${spacingHorizontalSNudge}}:host([disabled]) fluent-button.dismissButton{color:${colorNeutralForegroundDisabled}}:host([size="extraSmall"]) fluent-button.dismissButton{width:${sizeHorizontalM}}:host([size="extraSmall"]) fluent-button.dismissButton svg{height:${sizeVerticalM}}:host([size="small"]) fluent-button.dismissButton{width:${sizeHorizontalL}}:host([size="small"]) fluent-button.dismissButton svg{height:${sizeVerticalL}}.container{display:flex;align-items:center}.content{display:flex;flex-direction:row;align-items:center}.textContent{display:flex;flex-direction:column;padding:0 ${spacingHorizontalXXS};padding-bottom:${spacingVerticalXXS};margin:${spacingVerticalXXS} ${spacingHorizontalS}}:host(.hasLeadingIcon) .textContent{margin-inline-start:${spacingHorizontalXS}}:host([dismissButton]) .textContent{margin-inline-end:${spacingHorizontalXS}}::slotted([slot="leadingIcon"]){margin-inline-end:${spacingHorizontalNone};margin-inline-start:${spacingHorizontalS};display:flex;align-items:center}:host([size="small"]) ::slotted([slot="leadingIcon"]),:host([size="extraSmall"]) ::slotted([slot="leadingIcon"]){margin-inline-start:${spacingHorizontalSNudge}}::slotted([slot="image"]){margin:${spacingHorizontalXXS};margin-inline-end:${spacingHorizontalNone};display:flex;align-items:center;height:calc(${spacingVerticalXXL} + ${spacingVerticalXS})}:host([size="small"]) ::slotted([slot="image"]){height:${sizeVerticalXL}}:host([size="extraSmall"]) ::slotted([slot="image"]){height:${sizeVerticalL}}:host([appearance="brand"]) ::slotted([slot="image"]){background-color:${colorBrandForeground1};color:${colorNeutralBackground1}}:host([disabled][appearance="brand"]) ::slotted([slot="image"]){background-color:${colorNeutralForegroundDisabled};color:${colorNeutralBackgroundDisabled}}`;
+  .caption1{${typographyCaption1Styles}}.caption2{${typographyCaption2Styles}}.body1{${typographyBody1Styles}}:host{white-space:normal;height:${sizeVerticalXXXL};width:fit-content;display:inline-flex;align-items:center;background-color:${colorNeutralBackground3};color:${colorNeutralForeground2};border-radius:${borderRadiusMedium};border:none}:host([size="extraSmall"]){height:${sizeVerticalXL}}:host([size="small"]){height:${sizeVerticalXXL}}:host([shape="circular"]){border-radius:${borderRadiusCircular}}:host([appearance="outline"]){border:${strokeWidthThin} solid ${colorNeutralStroke1};background-color:unset}:host([appearance="brand"]){background-color:${colorBrandBackground2};color:${colorBrandForeground1}}:host([appearance="brand"]) fluent-button.dismissButton{color:${colorBrandForeground1}}:host([disabled]){color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted(*){color:${colorNeutralForegroundDisabled}}fluent-button.dismissButton{min-width:unset;padding:${spacingHorizontalNone};min-height:unset;margin-inline-start:${spacingHorizontalNone};margin-inline-end:${spacingHorizontalSNudge}}:host([disabled]) fluent-button.dismissButton{color:${colorNeutralForegroundDisabled}}:host([size="extraSmall"]) fluent-button.dismissButton{width:${sizeHorizontalM}}:host([size="extraSmall"]) fluent-button.dismissButton svg{height:${sizeVerticalM}}:host([size="small"]) fluent-button.dismissButton{width:${sizeHorizontalL}}:host([size="small"]) fluent-button.dismissButton svg{height:${sizeVerticalL}}.container{display:flex;align-items:center}.content{display:flex;flex-direction:row;align-items:center}.textContent{display:flex;flex-direction:column;padding:0 ${spacingHorizontalXXS};padding-bottom:${spacingVerticalXXS};margin:${spacingVerticalXXS} ${spacingHorizontalS}}:host(.hasLeadingIcon) .textContent{margin-inline-start:${spacingHorizontalXS}}:host([dismissButton]) .textContent{margin-inline-end:${spacingHorizontalXS}}::slotted([slot="leadingIcon"]){margin-inline-end:${spacingHorizontalNone};margin-inline-start:${spacingHorizontalS};display:flex;align-items:center}:host([size="small"]) ::slotted([slot="leadingIcon"]),:host([size="extraSmall"]) ::slotted([slot="leadingIcon"]){margin-inline-start:${spacingHorizontalSNudge}}::slotted([slot="image"]){margin:${spacingHorizontalXXS};margin-inline-end:${spacingHorizontalNone};display:flex;align-items:center;height:calc(${spacingVerticalXXL} + ${spacingVerticalXS})}:host([size="small"]) ::slotted([slot="image"]){height:${sizeVerticalXL}}:host([size="extraSmall"]) ::slotted([slot="image"]){height:${sizeVerticalL}}:host([appearance="brand"]) ::slotted([slot="image"]){background-color:${colorBrandForeground1};color:${colorNeutralBackground1}}:host([disabled][appearance="brand"]) ::slotted([slot="image"]){background-color:${colorNeutralForegroundDisabled};color:${colorNeutralBackgroundDisabled}}`;
 
 const dismissSVG = html`<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.58859 4.21569L4.64645 4.14645C4.82001 3.97288 5.08944 3.9536 5.28431 4.08859L5.35355 4.14645L10.5 9.293L15.6464 4.14645C15.82 3.97288 16.0894 3.9536 16.2843 4.08859L16.3536 4.14645C16.5271 4.32001 16.5464 4.58944 16.4114 4.78431L16.3536 4.85355L11.207 10L16.3536 15.1464C16.5271 15.32 16.5464 15.5894 16.4114 15.7843L16.3536 15.8536C16.18 16.0271 15.9106 16.0464 15.7157 15.9114L15.6464 15.8536L10.5 10.707L5.35355 15.8536C5.17999 16.0271 4.91056 16.0464 4.71569 15.9114L4.64645 15.8536C4.47288 15.68 4.4536 15.4106 4.58859 15.2157L4.64645 15.1464L9.793 10L4.64645 4.85355C4.47288 4.67999 4.4536 4.41056 4.58859 4.21569L4.64645 4.14645L4.58859 4.21569Z" fill="currentColor" /></svg>`;
 /**
@@ -12362,7 +12376,7 @@ const template$i = tagTemplate();
 const TagDefinition = Tag.compose({
   name: `${DesignSystem.prefix}-tag`,
   template: template$i,
-  styles: styles$j,
+  styles: styles$J,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -12920,10 +12934,10 @@ __decorate$b([attr({
   mode: "reflect"
 })], TeachingBubble.prototype, "size", void 0);
 
-const styles$i = css`
+const styles$I = css`
   ${display("block")}
 
-  :host{position:absolute;border:1px solid ${colorBrandBackground};border-radius:${borderRadiusMedium};background-color:${colorBrandBackground};color:${colorNeutralBackground1};padding:${spacingHorizontalL};box-shadow:${shadow16};max-width:calc(${spacingHorizontalXXXL} * 9);z-index:var(--fabric-layer-teaching-bubble,1000)}::slotted(*){font-family:${fontFamilyBase};font-size:unset;font-weight:${fontWeightRegular};line-height:${lineHeightBase300};margin:0;margin-block-start:0;margin-block-end:0;margin-inline-start:0;margin-inline-end:0}:host([size="small"]) ::slotted(*){font-size:${fontSizeBase200}}:host([size="medium"]) ::slotted(*){font-size:${fontSizeBase300}}:host([size="large"]) ::slotted(*){font-size:${fontSizeBase400}}slot[name="close"]::slotted(*){position:absolute;top:0;inset-inline-end:0}.content{position:relative}.heading{margin-bottom:${spacingHorizontalS}}.arrow{position:absolute;background:${colorBrandBackground};width:${sizeHorizontalL};height:${sizeVerticalL};transform:rotate(45deg);border-radius:${borderRadiusSmall};pointer-events:none}slot[name="image"]::slotted(*){display:block;margin-bottom:${spacingHorizontalM}}slot[name="image"]::slotted(img),slot[name="image"]::slotted(picture),slot[name="image"]::slotted(video){max-width:100%;height:auto}slot[name="heading"]::slotted(*){font-weight:${fontWeightSemibold};line-height:${lineHeightBase400}}:host([size="small"]) slot[name="heading"]::slotted(*){font-size:${fontSizeBase300}}:host([size="medium"]) slot[name="heading"]::slotted(*){font-size:${fontSizeBase400}}:host([size="large"]) slot[name="heading"]::slotted(*){font-size:${fontSizeBase500}}slot[name="footer"]::slotted(*){line-height:${lineHeightBase200};margin-top:${spacingHorizontalM};padding-top:${spacingHorizontalM}}`;
+  :host{white-space:normal;position:absolute;border:1px solid ${colorBrandBackground};border-radius:${borderRadiusMedium};background-color:${colorBrandBackground};color:${colorNeutralBackground1};padding:${spacingHorizontalL};box-shadow:${shadow16};max-width:calc(${spacingHorizontalXXXL} * 9);z-index:var(--fabric-layer-teaching-bubble,1000)}::slotted(*){font-family:${fontFamilyBase};font-size:unset;font-weight:${fontWeightRegular};line-height:${lineHeightBase300};margin:0;margin-block-start:0;margin-block-end:0;margin-inline-start:0;margin-inline-end:0}:host([size="small"]) ::slotted(*){font-size:${fontSizeBase200}}:host([size="medium"]) ::slotted(*){font-size:${fontSizeBase300}}:host([size="large"]) ::slotted(*){font-size:${fontSizeBase400}}slot[name="close"]::slotted(*){position:absolute;top:0;inset-inline-end:0}.content{position:relative}.heading{margin-bottom:${spacingHorizontalS}}.arrow{position:absolute;background:${colorBrandBackground};width:${sizeHorizontalL};height:${sizeVerticalL};transform:rotate(45deg);border-radius:${borderRadiusSmall};pointer-events:none}slot[name="image"]::slotted(*){display:block;margin-bottom:${spacingHorizontalM}}slot[name="image"]::slotted(img),slot[name="image"]::slotted(picture),slot[name="image"]::slotted(video){max-width:100%;height:auto}slot[name="heading"]::slotted(*){font-weight:${fontWeightSemibold};line-height:${lineHeightBase400}}:host([size="small"]) slot[name="heading"]::slotted(*){font-size:${fontSizeBase300}}:host([size="medium"]) slot[name="heading"]::slotted(*){font-size:${fontSizeBase400}}:host([size="large"]) slot[name="heading"]::slotted(*){font-size:${fontSizeBase500}}slot[name="footer"]::slotted(*){line-height:${lineHeightBase200};margin-top:${spacingHorizontalM};padding-top:${spacingHorizontalM}}`;
 
 function teachingBubbleTemplate() {
   return html`<template ?hidden="${x => !x.open}"><div class="image"><slot name="image"></slot></div><div class="content"><div class="close"><slot name="close"></slot></div><div class="heading"><slot name="heading"></slot></div><slot></slot><div class="footer"><slot name="footer"></slot></div></div><div id="arrow" class="arrow" ${ref("arrowEl")}></div></template>`;
@@ -12939,7 +12953,7 @@ const template$h = teachingBubbleTemplate();
 const definition$I = TeachingBubble.compose({
   name: `${DesignSystem.prefix}-teaching-bubble`,
   template: template$h,
-  styles: styles$i,
+  styles: styles$I,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -14231,10 +14245,10 @@ __decorate$8([observable], Wizard.prototype, "activeid", void 0);
 /** Wizard styles
  * @public
  */
-const styles$h = css`
+const styles$H = css`
   ${display("block")}
 
-  :host{height:100%;width:100%;--wizard-overflow-tablist-width:calc(
+  :host{white-space:normal;height:100%;width:100%;--wizard-overflow-tablist-width:calc(
       ${spacingHorizontalXXXL} + ${spacingHorizontalXXXL} +
         ${spacingHorizontalXXXL}
     );--wizard-overflow-step-width:calc(
@@ -14262,7 +14276,7 @@ const template$g = wizardTemplate();
 const definition$H = Wizard.compose({
   name: `${DesignSystem.prefix}-wizard`,
   template: template$g,
-  styles: styles$h,
+  styles: styles$H,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -14271,9 +14285,9 @@ const definition$H = Wizard.compose({
 /** Wizard Panel styles
  * @public
  */
-const styles$g = css`
+const styles$G = css`
   ${display("block")}
-  :host{height:100%;background:${colorNeutralBackground2}}:host([active]){display:block}.content{padding-block-start:${spacingVerticalXXL};padding-inline:${spacingHorizontalXXL};padding-block-end:0}.title{padding-block-start:0;padding-inline:${spacingHorizontalXXL};padding-block-end:${spacingVerticalXS};color:${colorNeutralForeground1}}.footer{padding-block:${spacingVerticalL};padding-inline:${spacingHorizontalXXL};border-top:1px solid ${colorNeutralStroke1}}`;
+  :host{white-space:normal;height:100%;background:${colorNeutralBackground2}}:host([active]){display:block}.content{padding-block-start:${spacingVerticalXXL};padding-inline:${spacingHorizontalXXL};padding-block-end:0}.title{padding-block-start:0;padding-inline:${spacingHorizontalXXL};padding-block-end:${spacingVerticalXS};color:${colorNeutralForeground1}}.footer{padding-block:${spacingVerticalL};padding-inline:${spacingHorizontalXXL};border-top:1px solid ${colorNeutralStroke1}}`;
 
 /**
  * The template for the {@link @fabric-msft/fabric-web#(WizardPanel:class)} component.
@@ -14293,7 +14307,7 @@ const template$f = wizardPanelTemplate();
 const definition$G = WizardPanel.compose({
   name: `${DesignSystem.prefix}-wizard-panel`,
   template: template$f,
-  styles: styles$g,
+  styles: styles$G,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -14302,10 +14316,10 @@ const definition$G = WizardPanel.compose({
 /** Wizard Step styles
  * @public
  */
-const styles$f = css`
+const styles$F = css`
   ${display("block")}
 
-  .step{unset:all;background:transparent;color:${colorNeutralForeground1};text-align:start;border:0 none;box-sizing:border-box;display:flex;justify-content:center;align-items:center;flex-direction:column;font-family:${fontFamilyBase};position:relative;align-items:flex-start;column-gap:${spacingHorizontalM};flex-shrink:0;flex-grow:1}:host([hide-connector]) .step-connector,.summary,.title,.details{display:none}:host([disabled]) .step{cursor:not-allowed;pointer-events:none;color:${colorNeutralForegroundDisabled}}:host([disabled]) .step-connector{background:${colorNeutralStrokeDisabled}}:host([disabled]) .icon{background:${colorNeutralBackground4};border-color:${colorNeutralStrokeDisabled}}:host(.overflow){flex-shrink:0;flex-grow:0;width:36px;}:host(.first){padding-inline-start:${spacingHorizontalXXL}}:host(.first) .step-connector{inset-inline-start:28px;}:host(.last){padding-inline-end:${spacingHorizontalXXL}}.state-indicator{width:${sizeHorizontalXXL};height:${sizeVerticalXXL};display:flex;justify-content:center;align-items:center;padding:${spacingVerticalXXS};box-sizing:border-box}.icon{position:relative;z-index:9;display:flex;justify-content:center;align-items:center;width:${sizeHorizontalXL};height:${sizeVerticalXL};font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase100);font-size:var(--fontSizeBase200);border-radius:var(--borderRadiusCircular);border:${strokeWidthThick} solid var(--colorNeutralForeground2);background:var(--colorNeutralBackground4);flex-shrink:0;box-sizing:border-box}.order{font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);margin-bottom:1px;}.step-connector{position:absolute;top:${spacingVerticalM};inset-inline-start:${spacingHorizontalS};height:${strokeWidthThick};width:100%;background:var(--colorNeutralForegroundDisabled)}.title{font-weight:${fontWeightRegular};font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.details{font-weight:${fontWeightRegular};font-size:${fontSizeBase200};line-height:${lineHeightBase200}}.icon svg{color:${colorNeutralForegroundOnBrand};fill:${colorNeutralForegroundOnBrand};width:${sizeHorizontalM};height:${sizeVerticalM};box-sizing:border-box;vertical-align:middle}:host([hide-connector]) .step{width:fit-content;flex-grow:0;min-width:unset}:host([aria-current="step"]) .title{font-weight:${fontWeightSemibold}}:host([state="complete"]) .icon,:host([state="complete"]) .step-connector,:host([state="complete"].first) .step-connector,:host([active]) .icon{background:${colorBrandForeground2};border-color:${colorBrandForeground2};color:${colorNeutralForegroundOnBrand}}:host([state="complete"]) .icon svg{margin-top:${spacingVerticalXXS}}:host([state="error"]) .icon{background:${colorPaletteRedForeground3};border-color:${colorPaletteRedForeground3}}@media (min-width:32.5rem){:host(.overflow) .step,:host .step,:host(.first) .step{display:flex;align-items:flex-start;width:fit-content;height:fit-content;max-width:268px;padding:0 0 ${spacingVerticalL} 0;column-gap:${spacingHorizontalM};flex-grow:0}:host(.first) .step-connector,.step-connector{position:absolute;width:${strokeWidthThick};inset-inline-start:11px;height:100%;background:var(--colorNeutralForegroundDisabled);min-height:22px;}}@media (min-width:calc(${spacingHorizontalXXL} * 43 - ${spacingHorizontalS} - ${strokeWidthThin})){:host .step,:host(.first) .step{flex-direction:row}.step-connector{inset-inline-start:11px;}:host([aria-current="step"]) .details,.title{display:block}.order{display:none}.summary{display:flex;flex-direction:column;width:fit-content;gap:${spacingVerticalXXS}}}:host(:hover) .step{cursor:pointer}:host([disabled]) .step{cursor:not-allowed}`;
+  :host{white-space:normal}.step{unset:all;background:transparent;color:${colorNeutralForeground1};text-align:start;border:0 none;box-sizing:border-box;display:flex;justify-content:center;align-items:center;flex-direction:column;font-family:${fontFamilyBase};position:relative;align-items:flex-start;column-gap:${spacingHorizontalM};flex-shrink:0;flex-grow:1}:host([hide-connector]) .step-connector,.summary,.title,.details{display:none}:host([disabled]) .step{cursor:not-allowed;pointer-events:none;color:${colorNeutralForegroundDisabled}}:host([disabled]) .step-connector{background:${colorNeutralStrokeDisabled}}:host([disabled]) .icon{background:${colorNeutralBackground4};border-color:${colorNeutralStrokeDisabled}}:host(.overflow){flex-shrink:0;flex-grow:0;width:36px;}:host(.first){padding-inline-start:${spacingHorizontalXXL}}:host(.first) .step-connector{inset-inline-start:28px;}:host(.last){padding-inline-end:${spacingHorizontalXXL}}.state-indicator{width:${sizeHorizontalXXL};height:${sizeVerticalXXL};display:flex;justify-content:center;align-items:center;padding:${spacingVerticalXXS};box-sizing:border-box}.icon{position:relative;z-index:9;display:flex;justify-content:center;align-items:center;width:${sizeHorizontalXL};height:${sizeVerticalXL};font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase100);font-size:var(--fontSizeBase200);border-radius:var(--borderRadiusCircular);border:${strokeWidthThick} solid var(--colorNeutralForeground2);background:var(--colorNeutralBackground4);flex-shrink:0;box-sizing:border-box}.order{font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);margin-bottom:1px;}.step-connector{position:absolute;top:${spacingVerticalM};inset-inline-start:${spacingHorizontalS};height:${strokeWidthThick};width:100%;background:var(--colorNeutralForegroundDisabled)}.title{font-weight:${fontWeightRegular};font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.details{font-weight:${fontWeightRegular};font-size:${fontSizeBase200};line-height:${lineHeightBase200}}.icon svg{color:${colorNeutralForegroundOnBrand};fill:${colorNeutralForegroundOnBrand};width:${sizeHorizontalM};height:${sizeVerticalM};box-sizing:border-box;vertical-align:middle}:host([hide-connector]) .step{width:fit-content;flex-grow:0;min-width:unset}:host([aria-current="step"]) .title{font-weight:${fontWeightSemibold}}:host([state="complete"]) .icon,:host([state="complete"]) .step-connector,:host([state="complete"].first) .step-connector,:host([active]) .icon{background:${colorBrandForeground2};border-color:${colorBrandForeground2};color:${colorNeutralForegroundOnBrand}}:host([state="complete"]) .icon svg{margin-top:${spacingVerticalXXS}}:host([state="error"]) .icon{background:${colorPaletteRedForeground3};border-color:${colorPaletteRedForeground3}}@media (min-width:32.5rem){:host(.overflow) .step,:host .step,:host(.first) .step{display:flex;align-items:flex-start;width:fit-content;height:fit-content;max-width:268px;padding:0 0 ${spacingVerticalL} 0;column-gap:${spacingHorizontalM};flex-grow:0}:host(.first) .step-connector,.step-connector{position:absolute;width:${strokeWidthThick};inset-inline-start:11px;height:100%;background:var(--colorNeutralForegroundDisabled);min-height:22px;}}@media (min-width:calc(${spacingHorizontalXXL} * 43 - ${spacingHorizontalS} - ${strokeWidthThin})){:host .step,:host(.first) .step{flex-direction:row}.step-connector{inset-inline-start:11px;}:host([aria-current="step"]) .details,.title{display:block}.order{display:none}.summary{display:flex;flex-direction:column;width:fit-content;gap:${spacingVerticalXXS}}}:host(:hover) .step{cursor:pointer}:host([disabled]) .step{cursor:not-allowed}`;
 
 const Checkmark16Regular = html`<svg fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M13.86 3.66a.5.5 0 0 1-.02.7l-7.93 7.48a.6.6 0 0 1-.84-.02L2.4 9.1a.5.5 0 0 1 .72-.7l2.4 2.44 7.65-7.2a.5.5 0 0 1 .7.02Z" fill="currentColor"></path></svg>`;
 const Dismiss16Regular = html`<svg fill="currentColor" aria-hidden="true" width="12" height="12" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m2.4 2.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L8 6.94l4.47-4.47a.75.75 0 1 1 1.06 1.06L9.06 8l4.47 4.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L8 9.06l-4.47 4.47a.75.75 0 0 1-1.06-1.06L6.94 8 2.47 3.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z" fill="currentColor"></path></svg>`;
@@ -14327,7 +14341,7 @@ const template$e = baseStepTemplate();
 const definition$F = WizardStep.compose({
   name: `${DesignSystem.prefix}-wizard-step`,
   template: template$e,
-  styles: styles$f,
+  styles: styles$F,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -14390,6 +14404,12 @@ const AccordionItemMarkerPositions = {
   ...AccordionItemMarkerPosition
 };
 
+// eslint-disable-next-line fabric/no-hardcoded-design-values -- composing upstream Fluent styles
+const styles$E = css`
+  ${accordionItemStyles}
+
+  :host{white-space:normal}`;
+
 /**
  * @public
  * @remarks
@@ -14398,7 +14418,7 @@ const AccordionItemMarkerPositions = {
 const definition$E = AccordionItem.compose({
   name: `${DesignSystem.prefix}-accordion-item`,
   template: accordionItemTemplate,
-  styles: accordionItemStyles,
+  styles: styles$E,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -14436,6 +14456,12 @@ const definition$E = AccordionItem.compose({
  */
 class Accordion extends Accordion$1 {}
 
+// eslint-disable-next-line fabric/no-hardcoded-design-values -- composing upstream Fluent styles
+const styles$D = css`
+  ${accordionStyles}
+
+  :host{white-space:normal}`;
+
 /**
  * The Fabric Accordion component.
  *
@@ -14446,7 +14472,7 @@ class Accordion extends Accordion$1 {}
 const definition$D = Accordion.compose({
   name: `${DesignSystem.prefix}-accordion`,
   template: accordionTemplate,
-  styles: accordionStyles,
+  styles: styles$D,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -14560,6 +14586,11 @@ function linkTemplate() {
 }
 const template$d = linkTemplate();
 
+const styles$C = css`
+  ${LinkStyles}
+
+  :host{white-space:normal}`;
+
 /**
  * The Fabric Link component.
  *
@@ -14568,7 +14599,7 @@ const template$d = linkTemplate();
 const definition$C = Link.compose({
   name: `${DesignSystem.prefix}-link`,
   template: template$d,
-  styles: LinkStyles,
+  styles: styles$C,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -14642,6 +14673,12 @@ const AvatarSizes = {
   ...AvatarSize
 };
 
+// eslint-disable-next-line fabric/no-hardcoded-design-values -- composing upstream Fluent styles
+const styles$B = css`
+  ${AvatarStyles}
+
+  :host{white-space:normal}`;
+
 /**
  * The Fabric Avatar component.
  *
@@ -14650,7 +14687,7 @@ const AvatarSizes = {
 const definition$B = Avatar.compose({
   name: `${DesignSystem.prefix}-avatar`,
   template: AvatarTemplate,
-  styles: AvatarStyles,
+  styles: styles$B,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -14711,6 +14748,12 @@ const BadgeSizes = {
   ...BadgeSize
 };
 
+// eslint-disable-next-line fabric/no-hardcoded-design-values -- composing upstream Fluent styles
+const styles$A = css`
+  ${BadgeStyles}
+
+  :host{white-space:normal}`;
+
 /**
  * The Fabric Badge component.
  *
@@ -14719,7 +14762,7 @@ const BadgeSizes = {
 const definition$A = Badge.compose({
   name: `${DesignSystem.prefix}-badge`,
   template: BadgeTemplate,
-  styles: BadgeStyles,
+  styles: styles$A,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -14780,6 +14823,12 @@ const CheckboxSizes = {
   ...CheckboxSize
 };
 
+// eslint-disable-next-line fabric/no-hardcoded-design-values -- composing upstream Fluent styles
+const styles$z = css`
+  ${CheckboxStyles}
+
+  :host{white-space:normal}`;
+
 /**
  * The Fabric Checkbox component.
  *
@@ -14788,7 +14837,7 @@ const CheckboxSizes = {
 const definition$z = Checkbox.compose({
   name: `${DesignSystem.prefix}-checkbox`,
   template: CheckboxTemplate,
-  styles: CheckboxStyles,
+  styles: styles$z,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -14852,6 +14901,12 @@ const CounterBadgeSizes = {
   ...CounterBadgeSize
 };
 
+// eslint-disable-next-line fabric/no-hardcoded-design-values -- composing upstream Fluent styles
+const styles$y = css`
+  ${CounterBadgeStyles}
+
+  :host{white-space:normal}`;
+
 /**
  * The Fabric Counter Badge component.
  *
@@ -14860,7 +14915,7 @@ const CounterBadgeSizes = {
 const definition$y = CounterBadge.compose({
   name: `${DesignSystem.prefix}-counter-badge`,
   template: CounterBadgeTemplate,
-  styles: CounterBadgeStyles,
+  styles: styles$y,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -14910,6 +14965,11 @@ const DialogTypes = {
  */
 class DialogBody extends DialogBody$1 {}
 
+const styles$x = css`
+  ${DialogBodyStyles}
+
+  :host{white-space:normal}`;
+
 /**
  * The Fabric Dialog Body component.
  *
@@ -14918,7 +14978,7 @@ class DialogBody extends DialogBody$1 {}
 const definition$x = DialogBody.compose({
   name: `${DesignSystem.prefix}-dialog-body`,
   template: DialogBodyTemplate,
-  styles: DialogBodyStyles,
+  styles: styles$x,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -14982,9 +15042,10 @@ const DividerRoles = {
   ...DividerRole
 };
 
-const styles$e = css`
+const styles$w = css`
   ${DividerStyles}
-  :host([orientation='vertical']){min-height:unset}`;
+
+  :host{white-space:normal}:host([orientation="vertical"]){min-height:unset}`;
 
 /**
  * Template for the {@link Divider} component.
@@ -15000,7 +15061,7 @@ const template$c = DividerTemplate;
 const definition$w = Divider.compose({
   name: `${DesignSystem.prefix}-divider`,
   template: DividerTemplate,
-  styles: styles$e,
+  styles: styles$w,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -15269,15 +15330,15 @@ const visuallyHidden = css`.visually-hidden{position:absolute;width:1px;height:1
  * Styles for the DynamicTab component.
  * @public
  */
-const styles$d = css`
+const styles$v = css`
   ${visuallyHidden}
-  :host{outline:none}.root{display:inline-flex;position:relative;box-sizing:border-box;font-family:${fontFamilyBase};outline:none;min-width:180px;}.container{display:flex;align-items:center;gap:${spacingHorizontalXS};padding:${spacingVerticalSNudge} ${spacingHorizontalS};border-radius:${borderRadiusMedium};background:${colorSubtleBackground};width:100%;box-sizing:border-box;cursor:pointer}:host(:hover:not([disabled]):not([selected])) .container{background:${colorSubtleBackgroundHover}}:host(:hover:not([disabled])) .label{font-weight:${fontWeightSemibold}}:host(:active:not([disabled])) .container{background:${colorSubtleBackgroundPressed}}:host([selected]) .container{background:${colorSubtleBackgroundSelected}}:host([selected]) .label{font-weight:${fontWeightSemibold}}:host([selected]) .divider{display:none}:host(:focus-visible) .container{outline:2px solid ${colorStrokeFocus2};outline-offset:-2px}:host([disabled]){cursor:not-allowed}:host([disabled]) .container{cursor:not-allowed}:host([disabled]) .label{color:${colorNeutralForegroundDisabled}}:host([disabled]) .icon{color:${colorNeutralForegroundDisabled}}.icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;color:${colorNeutralForeground1}}.label{flex:1;font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};color:${colorNeutralForeground1};white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.dismiss-button{flex-shrink:0;--button-padding-inline:0;--button-min-width:20px;padding:0;padding-inline-start:${spacingHorizontalXS};min-width:unset;min-height:unset;border:unset}.modified-indicator{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;color:${colorNeutralForeground1}}.modified-indicator svg{width:6px;height:6px}.divider{position:absolute;inset-inline-end:-1px;top:50%;transform:translateY(-50%);width:1px;height:20px;background:${colorNeutralStroke2};display:var(--tab-divider-display,block)}`;
+  :host{white-space:normal;outline:none}.root{display:inline-flex;position:relative;box-sizing:border-box;font-family:${fontFamilyBase};outline:none;min-width:180px;}.container{display:flex;align-items:center;gap:${spacingHorizontalXS};padding:${spacingVerticalSNudge} ${spacingHorizontalS};border-radius:${borderRadiusMedium};background:${colorSubtleBackground};width:100%;box-sizing:border-box;cursor:pointer}:host(:hover:not([disabled]):not([selected])) .container{background:${colorSubtleBackgroundHover}}:host(:hover:not([disabled])) .label{font-weight:${fontWeightSemibold}}:host(:active:not([disabled])) .container{background:${colorSubtleBackgroundPressed}}:host([selected]) .container{background:${colorSubtleBackgroundSelected}}:host([selected]) .label{font-weight:${fontWeightSemibold}}:host([selected]) .divider{display:none}:host(:focus-visible) .container{outline:2px solid ${colorStrokeFocus2};outline-offset:-2px}:host([disabled]){cursor:not-allowed}:host([disabled]) .container{cursor:not-allowed}:host([disabled]) .label{color:${colorNeutralForegroundDisabled}}:host([disabled]) .icon{color:${colorNeutralForegroundDisabled}}.icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;color:${colorNeutralForeground1}}.label{flex:1;font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};color:${colorNeutralForeground1};white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.dismiss-button{flex-shrink:0;--button-padding-inline:0;--button-min-width:20px;padding:0;padding-inline-start:${spacingHorizontalXS};min-width:unset;min-height:unset;border:unset}.modified-indicator{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;color:${colorNeutralForeground1}}.modified-indicator svg{width:6px;height:6px}.divider{position:absolute;inset-inline-end:-1px;top:50%;transform:translateY(-50%);width:1px;height:20px;background:${colorNeutralStroke2};display:var(--tab-divider-display,block)}`;
 
 /** @internal */
 const DynamicTabDefinition = DynamicTab.compose({
   name: `${DesignSystem.prefix}-dynamic-tab`,
   template: template$b,
-  styles: styles$d,
+  styles: styles$v,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -16133,8 +16194,8 @@ const template$a = dynamicTabListTemplate();
  * Styles for the DynamicTabList component.
  * @public
  */
-const styles$c = css`
-  :host{display:flex;align-items:center;background:${colorNeutralBackground1};position:relative}:host([orientation="vertical"]){flex-direction:column;align-items:stretch}.tabs-container{display:flex;flex:1;gap:${spacingHorizontalXS};overflow-x:auto;overflow-y:clip;padding:${spacingVerticalSNudge} 0px;border-bottom:1px solid ${colorNeutralStroke1};max-height:44px;box-sizing:border-box}.tabs-container::-webkit-scrollbar{height:${spacingHorizontalXS};background:transparent}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:${colorNeutralForeground3};border-radius:${borderRadiusSmall}}.tabs-container:first-child{padding-inline-start:${spacingHorizontalSNudge}}.tabs-container:last-child{padding-inline-start:${spacingHorizontalSNudge}}:host([orientation="vertical"]) .tabs-container{flex-direction:column;overflow-x:visible;overflow-y:auto;--tab-divider-display:none}:host([orientation="vertical"]) .tabs-container::-webkit-scrollbar{width:${spacingHorizontalXS};height:auto}.actions-container{display:flex;align-items:center;flex-shrink:0;gap:${spacingHorizontalXS}}.actions-container ::slotted(*){margin-inline-start:${spacingHorizontalXS}}.manage-tabs-trigger{display:inline-flex;cursor:pointer;anchor-name:--manage-tabs-anchor}.manage-tabs-trigger[hidden]{display:none}.manage-tabs-menu{position:absolute;position-anchor:--manage-tabs-anchor;position-area:block-end;margin:0;padding:0;border:none;background:transparent;overflow:visible;color:inherit}.manage-tabs-menu:popover-open{inset:unset;inset-inline-start:anchor(start)}.manage-tabs-menu:not(:popover-open){display:none}.managed-tabs-built-in-menu{}.managed-tabs-built-in-menu fabric-menu-item{grid-template-columns:0px ${spacingHorizontalXL} 1fr ${spacingHorizontalXL}}.managed-tabs-built-in-menu fabric-menu-item [slot="start"]{display:inline-flex;align-items:center}.managed-tabs-separator{height:1px;background:${colorNeutralStroke2};margin:${spacingVerticalXS} ${spacingHorizontalS}}.managed-tabs-custom-icon[hidden]{display:none}.managed-tabs-tab-item[data-active]{color:${colorBrandForeground1};font-weight:${fontWeightSemibold}}`;
+const styles$u = css`
+  :host{white-space:normal;display:flex;align-items:center;background:${colorNeutralBackground1};position:relative}:host([orientation="vertical"]){flex-direction:column;align-items:stretch}.tabs-container{display:flex;flex:1;gap:${spacingHorizontalXS};overflow-x:auto;overflow-y:clip;padding:${spacingVerticalSNudge} 0px;border-bottom:1px solid ${colorNeutralStroke1};max-height:44px;box-sizing:border-box}.tabs-container::-webkit-scrollbar{height:${spacingHorizontalXS};background:transparent}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:${colorNeutralForeground3};border-radius:${borderRadiusSmall}}.tabs-container:first-child{padding-inline-start:${spacingHorizontalSNudge}}.tabs-container:last-child{padding-inline-start:${spacingHorizontalSNudge}}:host([orientation="vertical"]) .tabs-container{flex-direction:column;overflow-x:visible;overflow-y:auto;--tab-divider-display:none}:host([orientation="vertical"]) .tabs-container::-webkit-scrollbar{width:${spacingHorizontalXS};height:auto}.actions-container{display:flex;align-items:center;flex-shrink:0;gap:${spacingHorizontalXS}}.actions-container ::slotted(*){margin-inline-start:${spacingHorizontalXS}}.manage-tabs-trigger{display:inline-flex;cursor:pointer;anchor-name:--manage-tabs-anchor}.manage-tabs-trigger[hidden]{display:none}.manage-tabs-menu{position:absolute;position-anchor:--manage-tabs-anchor;position-area:block-end;margin:0;padding:0;border:none;background:transparent;overflow:visible;color:inherit}.manage-tabs-menu:popover-open{inset:unset;inset-inline-start:anchor(start)}.manage-tabs-menu:not(:popover-open){display:none}.managed-tabs-built-in-menu{}.managed-tabs-built-in-menu fabric-menu-item{grid-template-columns:0px ${spacingHorizontalXL} 1fr ${spacingHorizontalXL}}.managed-tabs-built-in-menu fabric-menu-item [slot="start"]{display:inline-flex;align-items:center}.managed-tabs-separator{height:1px;background:${colorNeutralStroke2};margin:${spacingVerticalXS} ${spacingHorizontalS}}.managed-tabs-custom-icon[hidden]{display:none}.managed-tabs-tab-item[data-active]{color:${colorBrandForeground1};font-weight:${fontWeightSemibold}}`;
 
 /**
  * The Fabric DynamicTabList component definition.
@@ -16143,7 +16204,7 @@ const styles$c = css`
 const definition$u = DynamicTabList.compose({
   name: `${DesignSystem.prefix}-dynamic-tab-list`,
   template: template$a,
-  styles: styles$c,
+  styles: styles$u,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -16183,8 +16244,8 @@ class EmptyState extends FASTElement {}
  * Styles for the {@link EmptyState} component.
  * @public
  */
-const styles$b = css`
-  :host{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:${fontFamilyBase};gap:${spacingVerticalL}}.illustration{display:flex;align-items:center;justify-content:center}.illustration ::slotted(*){display:block}.content{display:flex;flex-direction:column;align-items:center;gap:${spacingVerticalS}}::slotted([slot="title"]){font-size:${fontSizeBase400};font-weight:${fontWeightSemibold};line-height:${lineHeightBase400};color:${colorNeutralForeground1};margin:0}::slotted([slot="body"]){font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};color:${colorNeutralForeground2};margin:0}::slotted([slot="action"]){margin-block-start:${spacingVerticalM}}`;
+const styles$t = css`
+  :host{white-space:normal;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:${fontFamilyBase};gap:${spacingVerticalL}}.illustration{display:flex;align-items:center;justify-content:center}.illustration ::slotted(*){display:block}.content{display:flex;flex-direction:column;align-items:center;gap:${spacingVerticalS}}::slotted([slot="title"]){font-size:${fontSizeBase400};font-weight:${fontWeightSemibold};line-height:${lineHeightBase400};color:${colorNeutralForeground1};margin:0}::slotted([slot="body"]){font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};color:${colorNeutralForeground2};margin:0}::slotted([slot="action"]){margin-block-start:${spacingVerticalM}}`;
 
 /**
  * The template for the {@link @fabric-msft/fabric-web#(EmptyState:class)} component.
@@ -16205,7 +16266,7 @@ const template$9 = emptyStateTemplate();
 const definition$t = EmptyState.compose({
   name: `${DesignSystem.prefix}-empty-state`,
   template: template$9,
-  styles: styles$b,
+  styles: styles$t,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -16270,6 +16331,11 @@ const DrawerTypes = {
   ...DrawerType
 };
 
+const styles$s = css`
+  ${DrawerStyles}
+
+  :host{white-space:normal}`;
+
 /**
  * The Fabric Drawer component.
  *
@@ -16278,7 +16344,7 @@ const DrawerTypes = {
 const definition$s = Drawer.compose({
   name: `${DesignSystem.prefix}-drawer`,
   template: DrawerTemplate,
-  styles: DrawerStyles,
+  styles: styles$s,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -16313,6 +16379,11 @@ const definition$s = Drawer.compose({
  */
 class DrawerBody extends DrawerBody$1 {}
 
+const styles$r = css`
+  ${DrawerBodyStyles}
+
+  :host{white-space:normal}`;
+
 /**
  * The Fabric Drawer Body component.
  *
@@ -16321,7 +16392,7 @@ class DrawerBody extends DrawerBody$1 {}
 const definition$r = DrawerBody.compose({
   name: `${DesignSystem.prefix}-drawer-body`,
   template: DrawerBodyTemplate,
-  styles: DrawerBodyStyles,
+  styles: styles$r,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -16527,9 +16598,10 @@ class Field extends Field$1 {
   }
 }
 
-const styles$a = css`
+const styles$q = css`
   ${FieldStyles}
-`;
+
+  :host{white-space:normal}`;
 
 /**
  * Label position values exposed by {@link Field}.
@@ -16576,7 +16648,7 @@ const SlottableInputs = {
 const definition$q = Field.compose({
   name: `${DesignSystem.prefix}-field`,
   template: FieldTemplate,
-  styles: styles$a,
+  styles: styles$q,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -16622,6 +16694,11 @@ const ImageShapes = {
   ...ImageShape
 };
 
+const styles$p = css`
+  ${ImageStyles}
+
+  :host{white-space:normal}`;
+
 /**
  * The Fabric Image component.
  *
@@ -16630,7 +16707,7 @@ const ImageShapes = {
 const definition$p = Image.compose({
   name: `${DesignSystem.prefix}-image`,
   template: ImageTemplate,
-  styles: ImageStyles,
+  styles: styles$p,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -16669,6 +16746,11 @@ const definition$p = Image.compose({
  */
 class Label extends Label$1 {}
 
+const styles$o = css`
+  ${LabelStyles}
+
+  :host{white-space:normal}`;
+
 /**
  * The Fabric Label component.
  *
@@ -16677,7 +16759,7 @@ class Label extends Label$1 {}
 const definition$o = Label.compose({
   name: `${DesignSystem.prefix}-label`,
   template: LabelTemplate,
-  styles: LabelStyles,
+  styles: styles$o,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -16745,6 +16827,12 @@ const AnchorButtonSizes = {
   ...AnchorTarget
 });
 
+// eslint-disable-next-line fabric/no-hardcoded-design-values -- composing upstream Fluent styles
+const styles$n = css`
+  ${ToggleButtonStyles}
+
+  :host{white-space:normal}`;
+
 /**
  * The Fabric Anchor Button component.
  *
@@ -16753,7 +16841,7 @@ const AnchorButtonSizes = {
 const definition$n = AnchorButton.compose({
   name: `${DesignSystem.prefix}-anchor-button`,
   template: AnchorButtonTemplate,
-  styles: ToggleButtonStyles,
+  styles: styles$n,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -16803,6 +16891,11 @@ const definition$n = AnchorButton.compose({
  */
 class MessageBar extends MessageBar$1 {}
 
+const styles$m = css`
+  ${MessageBarStyles}
+
+  :host{white-space:normal}`;
+
 /**
  * The Fabric MessageBar Element definition.
  *
@@ -16813,7 +16906,7 @@ class MessageBar extends MessageBar$1 {}
 const definition$m = MessageBar.compose({
   name: `${DesignSystem.prefix}-message-bar`,
   template: MessageBarTemplate,
-  styles: MessageBarStyles,
+  styles: styles$m,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -16909,10 +17002,10 @@ const MenuButtonSizes = ButtonSize;
  *
  * @public
  */
-const styles$9 = css`
+const styles$l = css`
   ${MenuButtonStyles}
 
-  :host([icon-only]) slot[name="end"]{display:none}`;
+  :host{white-space:normal}:host([icon-only]) slot[name="end"]{display:none}`;
 
 /**
  * Menu Button definition
@@ -16931,7 +17024,7 @@ const styles$9 = css`
 const definition$l = MenuButton.compose({
   name: `${DesignSystem.prefix}-menu-button`,
   template: MenuButtonTemplate,
-  styles: styles$9,
+  styles: styles$l,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -16940,12 +17033,12 @@ const definition$l = MenuButton.compose({
 /** MenuItem styles
  * @public
  */
-const styles$8 = css`
+const styles$k = css`
   ${display("grid")}
 
-  :host{--indent:0;align-items:center;background:${colorNeutralBackground1};border-radius:${borderRadiusMedium};color:${colorNeutralForeground2};cursor:pointer;flex-shrink:0;font:${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300}
-      ${fontFamilyBase};grid-gap:${spacingHorizontalXS};grid-template-columns:${spacingHorizontalXL} ${spacingHorizontalXL} auto ${spacingHorizontalXL};height:${sizeVerticalXXXL};overflow:visible;padding:0 ${spacingHorizontalMNudge}}:host(:hover){background:${colorNeutralBackground1Hover};color:${colorNeutralForeground2Hover}}:host(:active){background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground2Pressed}}:host(:active) ::slotted([slot="start"]){color:${colorCompoundBrandForeground1Pressed}}:host(${dangerState}){color:${colorStatusDangerForeground1}}:host(${dangerState}) ::slotted([slot="start"]),:host(${dangerState}) ::slotted([slot="end"]){color:${colorStatusDangerForeground1}}: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:${strokeWidthThick} solid ${colorStrokeFocus2}}.content{white-space:nowrap;flex-grow:1;grid-column:auto / span 2;padding:0 ${spacingHorizontalXXS}}: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:${spacingHorizontalXL} ${spacingHorizontalXL} auto auto}:host(${submenuState}){grid-template-columns:${spacingHorizontalXL} auto auto ${spacingHorizontalXL}}:host([data-indent="2"]${submenuState}){grid-template-columns:${spacingHorizontalXL} ${spacingHorizontalXL} auto auto ${spacingHorizontalXL}}.indicator,::slotted([slot="indicator"]){grid-column:1 / span 1;width:${sizeHorizontalXL}}::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{position:relative}::slotted([popover]){margin:0;max-height:var(--menu-max-height,auto);position:fixed;inset:auto;position-area:inline-end span-block-end;position-try-fallbacks:flip-inline;z-index:1}::slotted([popover]:not(:popover-open)){display:none}::slotted([popover]:popover-open){inset:unset}@supports not (anchor-name:--menu-trigger){::slotted([popover]){position:absolute;align-self:start}}}`.withBehaviors(forcedColorsStylesheetBehavior$1(css`
+  :host{white-space:normal;--indent:0;align-items:center;background:${colorNeutralBackground1};border-radius:${borderRadiusMedium};color:${colorNeutralForeground2};cursor:pointer;flex-shrink:0;font:${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300}
+      ${fontFamilyBase};grid-gap:${spacingHorizontalXS};grid-template-columns:max-content auto auto ${spacingHorizontalXL};height:${sizeVerticalXXXL};min-width:calc(${spacingHorizontalXXXL} * 5);overflow:visible;padding:0 ${spacingHorizontalMNudge}}:host(:hover){background:${colorNeutralBackground1Hover};color:${colorNeutralForeground2Hover}}:host(:active){background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground2Pressed}}:host(:active) ::slotted([slot="start"]){color:${colorCompoundBrandForeground1Pressed}}:host(${dangerState}){color:${colorStatusDangerForeground1}}:host(${dangerState}) ::slotted([slot="start"]),:host(${dangerState}) ::slotted([slot="end"]){color:${colorStatusDangerForeground1}}: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:${strokeWidthThick} solid ${colorStrokeFocus2}}.content{white-space:nowrap;flex-grow:1;grid-column:auto / span 2;padding:0 ${spacingHorizontalXXS}}: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="0"]){--indent:0;grid-template-columns:max-content auto auto ${spacingHorizontalXL}}:host([data-indent="1"]){--indent:1;grid-template-columns:${spacingHorizontalXL} max-content auto ${spacingHorizontalXL}}:host([data-indent="2"]){--indent:2;grid-template-columns:${spacingHorizontalXL} ${spacingHorizontalXL} auto auto}:host([data-indent="2"]${submenuState}){grid-template-columns:${spacingHorizontalXL} ${spacingHorizontalXL} auto auto ${spacingHorizontalXL}}.indicator,::slotted([slot="indicator"]){grid-column:1 / span 1;width:${sizeHorizontalXL}}::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{position:relative}::slotted([popover]){margin:0;max-height:var(--menu-max-height,auto);position:fixed;inset:auto;position-area:inline-end span-block-end;position-try-fallbacks:flip-inline;z-index:1}::slotted([popover]:not(:popover-open)){display:none}::slotted([popover]:popover-open){inset:unset}@supports not (anchor-name:--menu-trigger){::slotted([popover]){position:absolute;align-self:start}}}`.withBehaviors(forcedColorsStylesheetBehavior$1(css`
     :host(${disabledState}),:host(${disabledState}) ::slotted([slot="start"]),:host(${disabledState}) ::slotted([slot="end"]){color:GrayText}`));
 
 const Checkmark16Filled = html.partial(`<svg class="indicator" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.05 3.49c.28.3.27.77-.04 1.06l-7.93 7.47A.85.85 0 014.9 12L2.22 9.28a.75.75 0 111.06-1.06l2.24 2.27 7.47-7.04a.75.75 0 011.06.04z" fill="currentColor"></path></svg>`);
@@ -16966,7 +17059,7 @@ const template$8 = menuItemTemplate();
 const definition$k = MenuItem.compose({
   name: `${DesignSystem.prefix}-menu-item`,
   template: template$8,
-  styles: styles$8,
+  styles: styles$k,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -16976,13 +17069,13 @@ definition$k.define(DesignSystem.registry);
 /** MenuList styles
  * @public
  */
-const styles$7 = css`
+const styles$j = css`
   ${display("flex")}
 
-  :host{flex-direction:column;height:fit-content;width:max-content;background-color:${colorNeutralBackground1};border:1px solid ${colorTransparentStroke};border-radius:${borderRadiusMedium};box-shadow:${shadow16};padding:${spacingHorizontalXS};row-gap:${spacingHorizontalXXS}}`;
+  :host{white-space:normal;flex-direction:column;height:fit-content;width:max-content;background-color:${colorNeutralBackground1};border:1px solid ${colorTransparentStroke};border-radius:${borderRadiusMedium};box-shadow:${shadow16};padding:${spacingHorizontalXS};row-gap:${spacingHorizontalXXS}}.default-slot{display:flex;flex-direction:column;inline-size:100%;row-gap:${spacingHorizontalXXS}}::slotted(fabric-menu-item){box-sizing:border-box;inline-size:100%}`;
 
 function menuTemplate$1() {
-  return html`<template slot="${x => x.slot ? x.slot : x.isNestedMenu() ? "submenu" : void 0}" @keydown="${(x, c) => x.handleMenuKeyDown(c.event)}" @focusout="${(x, c) => x.handleFocusOut(c.event)}"><slot ${slotted("items")}></slot></template>`;
+  return html`<template slot="${x => x.slot ? x.slot : x.isNestedMenu() ? "submenu" : void 0}" @keydown="${(x, c) => x.handleMenuKeyDown(c.event)}" @focusout="${(x, c) => x.handleFocusOut(c.event)}"><slot class="default-slot" ${slotted("items")}></slot></template>`;
 }
 const template$7 = menuTemplate$1();
 
@@ -16995,7 +17088,7 @@ const template$7 = menuTemplate$1();
 const definition$j = MenuList.compose({
   name: `${DesignSystem.prefix}-menu-list`,
   template: template$7,
-  styles: styles$7,
+  styles: styles$j,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -17864,10 +17957,10 @@ __decorate$5([observable], Menu.prototype, "slottedTriggers", void 0);
 /** Menu styles
  * @public
  */
-const styles$6 = css`
+const styles$i = css`
   ${display("inline-block")}
 
-  :host{position:relative}::slotted([data-menu-list]){margin:0;max-height:var(--menu-max-height,auto);overflow-y:auto;position:absolute;inset-block-start:100%;inset-inline-start:0;z-index:1}::slotted([data-menu-list][popover]){position:fixed;inset:auto}:host(:not([reposition-mode="auto"])) ::slotted([data-menu-list][popover]){inset-inline-start:anchor(start);inset-inline-end:auto;inset-block-start:anchor(bottom);inset-block-end:auto}:host([menu-position="above"]:not([reposition-mode="auto"]))
+  :host{white-space:normal;position:relative}::slotted([data-menu-list]){margin:0;max-height:var(--menu-max-height,auto);overflow-y:auto;position:absolute;inset-block-start:100%;inset-inline-start:0;z-index:1}::slotted([data-menu-list][popover]){position:fixed;inset:auto}:host(:not([reposition-mode="auto"])) ::slotted([data-menu-list][popover]){inset-inline-start:anchor(start);inset-inline-end:auto;inset-block-start:anchor(bottom);inset-block-end:auto}:host([menu-position="above"]:not([reposition-mode="auto"]))
     ::slotted([data-menu-list][popover]){inset-block-start:auto;inset-block-end:anchor(top)}:host([menu-alignment="end"]:not([reposition-mode="auto"]))
     ::slotted([data-menu-list][popover]){inset-inline-start:auto;inset-inline-end:anchor(end)}::slotted([data-menu-list]:not(.menu-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;z-index:1}:host([split]) ::slotted([slot="primary-action"]:focus-visible){z-index:1}:host([split]) ::slotted([slot="primary-action"][appearance="primary"]){border-inline-end:${strokeWidthThin} solid
       ${colorNeutralForegroundInverted}}:host([split]) ::slotted([slot="trigger"]){border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}`;
@@ -17892,7 +17985,7 @@ const template$6 = menuTemplate();
 const definition$i = Menu.compose({
   name: `${DesignSystem.prefix}-menu`,
   template: template$6,
-  styles: styles$6,
+  styles: styles$i,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -18001,8 +18094,8 @@ __decorate$4([observable], OptionGroup.prototype, "slottedOptions", void 0);
  *
  * @public
  */
-const styles$5 = css`
-  :host{display:block;font-family:${fontFamilyBase}}:host([hidden]){display:none}.label{color:${colorNeutralForeground3};font-size:${fontSizeBase200};font-weight:${fontWeightSemibold};line-height:${lineHeightBase200};padding-block:${spacingVerticalXS};padding-inline:${spacingHorizontalM};user-select:none;cursor:default}:host([disabled]) .label{color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted(*){color:${colorNeutralForegroundDisabled};background-color:${colorNeutralBackground1};cursor:default}.options{display:flex;flex-direction:column;padding-block-end:${spacingVerticalS}}`;
+const styles$h = css`
+  :host{white-space:normal;display:block;font-family:${fontFamilyBase}}:host([hidden]){display:none}.label{color:${colorNeutralForeground3};font-size:${fontSizeBase200};font-weight:${fontWeightSemibold};line-height:${lineHeightBase200};padding-block:${spacingVerticalXS};padding-inline:${spacingHorizontalM};user-select:none;cursor:default}:host([disabled]) .label{color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted(*){color:${colorNeutralForegroundDisabled};background-color:${colorNeutralBackground1};cursor:default}.options{display:flex;flex-direction:column;padding-block-end:${spacingVerticalS}}`;
 
 /**
  * The template for the {@link @fabric-msft/fabric-web#(OptionGroup:class)} component.
@@ -18024,7 +18117,7 @@ const template$5 = optionGroupTemplate();
 const definition$h = OptionGroup.compose({
   name: `${DesignSystem.prefix}-option-group`,
   template: template$5,
-  styles: styles$5,
+  styles: styles$h,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -18060,6 +18153,11 @@ const definition$h = OptionGroup.compose({
  */
 class ProgressBar extends ProgressBar$1 {}
 
+const styles$g = css`
+  ${ProgressBarStyles}
+
+  :host{white-space:normal}`;
+
 /**
  * The Fabric Progress Bar component.
  *
@@ -18068,7 +18166,7 @@ class ProgressBar extends ProgressBar$1 {}
 const definition$g = ProgressBar.compose({
   name: `${DesignSystem.prefix}-progress-bar`,
   template: ProgressBarTemplate,
-  styles: ProgressBarStyles,
+  styles: styles$g,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -18201,6 +18299,11 @@ const RadioGroupOrientations = {
   ...RadioGroupOrientation
 };
 
+const styles$f = css`
+  ${RadioGroupStyles}
+
+  :host{white-space:normal}`;
+
 /**
  * The Fabric Radio Group component.
  *
@@ -18209,12 +18312,17 @@ const RadioGroupOrientations = {
 const definition$f = RadioGroup.compose({
   name: `${DesignSystem.prefix}-radio-group`,
   template: RadioGroupTemplate,
-  styles: RadioGroupStyles,
+  styles: styles$f,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
 });
 
+const styles$e = css`
+  ${RadioStyles}
+
+  :host{white-space:normal}`;
+
 /**
  * The Fabric Radio component.
  *
@@ -18223,7 +18331,7 @@ const definition$f = RadioGroup.compose({
 const definition$e = Radio.compose({
   name: `${DesignSystem.prefix}-radio`,
   template: RadioTemplate,
-  styles: RadioStyles,
+  styles: styles$e,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -18275,6 +18383,11 @@ const definition$e = Radio.compose({
  */
 class RatingDisplay extends RatingDisplay$1 {}
 
+const styles$d = css`
+  ${RatingDisplayStyles}
+
+  :host{white-space:normal}`;
+
 /**
  * @public
  * @remarks
@@ -18283,7 +18396,7 @@ class RatingDisplay extends RatingDisplay$1 {}
 const definition$d = RatingDisplay.compose({
   name: `${DesignSystem.prefix}-rating-display`,
   template: RatingDisplayTemplate,
-  styles: RatingDisplayStyles,
+  styles: styles$d,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -19058,15 +19171,15 @@ __decorate$1([observable], SearchBox.prototype, "clearButton", void 0);
  *
  * @public
  */
-const styles$4 = css`
+const styles$c = css`
   ${display("block")}
 
-  :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300}}.label{display:flex;color:${colorNeutralForeground1};padding-bottom:${spacingVerticalXS};flex-shrink:0;padding-inline-end:${spacingHorizontalXS}}.label[hidden],:host(:empty) .label{display:none}.root{align-items:center;background-color:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};border-bottom-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};box-sizing:border-box;height:${sizeVerticalXXXL};display:inline-flex;flex-direction:row;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalMNudge};position:relative;width:100%;box-shadow:unset}:has(.control:user-invalid){border-color:${colorPaletteRedBorder2}}.root::after{box-sizing:border-box;content:"";position:absolute;inset-inline-start:-1px;bottom:0px;inset-inline-end:-1px;height:max(2px,${borderRadiusMedium});border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};border-bottom:2px solid ${colorCompoundBrandStroke};clip-path:inset(calc(100% - 2px) 1px 0px);transform:scaleX(0);transition-property:transform;transition-duration:${durationUltraFast};transition-delay:${curveAccelerateMid}}.control{width:100%;height:100%;box-sizing:border-box;color:${colorNeutralForeground1};border-radius:${borderRadiusMedium};background:${colorTransparentBackground};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};font-size:${fontSizeBase300};border:none;vertical-align:center}.control:focus-visible{outline:0;border:0}.control::placeholder{color:${colorNeutralForeground4}}:host ::slotted([slot="start"]),:host ::slotted([slot="end"]){display:flex;align-items:center;justify-content:center;color:${colorNeutralForeground3};font-size:${fontSizeBase500}}:host ::slotted([slot="start"]){padding-inline-end:${spacingHorizontalXXS}}:host ::slotted([slot="end"]){padding-inline-start:${spacingHorizontalXXS};gap:${spacingHorizontalXS}}:host(:hover) .root{border-color:${colorNeutralStroke1Hover};border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .root{border-color:${colorNeutralStroke1Pressed}}:host(:focus-within) .root{outline:transparent solid 2px;border-bottom:0}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host(:focus-within:active) .root:after{border-bottom-color:${colorCompoundBrandStrokePressed}}:host([appearance="outline"]:focus-within) .root{border:${strokeWidthThin} solid ${colorNeutralStroke1}}:host(:focus-within) .control{color:${colorNeutralForeground1}}:host([disabled]) .root{background:${colorTransparentBackground};border:${strokeWidthThin} solid ${colorNeutralStrokeDisabled}}:host([disabled]) .control::placeholder,:host([disabled]) ::slotted([slot="start"]),:host([disabled]) ::slotted([slot="end"]){color:${colorNeutralForegroundDisabled}}::selection{color:${colorNeutralForegroundInverted};background-color:${colorNeutralBackgroundInverted}}:host([control-size="small"]) .control{font-size:${fontSizeBase200};font-weight:${fontWeightRegular};line-height:${lineHeightBase200}}:host([control-size="small"]) .root{height:${sizeVerticalXXL};gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalSNudge}}:host([control-size="small"]) ::slotted([slot="start"]),:host([control-size="small"]) ::slotted([slot="end"]){font-size:${fontSizeBase400}}:host([control-size="large"]) .control{font-size:${fontSizeBase400};font-weight:${fontWeightRegular};line-height:${lineHeightBase400}}:host([control-size="large"]) .root{height:40px;gap:${spacingHorizontalS};padding:0 ${spacingHorizontalM}}:host([control-size="large"]) ::slotted([slot="start"]),:host([control-size="large"]) ::slotted([slot="end"]){font-size:${fontSizeBase600}}:host([appearance="underline"]) .root{background:${colorTransparentBackground};border:0;border-radius:0;border-bottom:${strokeWidthThin} solid ${colorNeutralStrokeAccessible}}:host([appearance="underline"]:hover) .root{border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host([appearance="underline"]:active) .root{border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance="underline"]:focus-within) .root{border:0;border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance="underline"][disabled]) .root{border-bottom-color:${colorNeutralStrokeDisabled}}:host([appearance="filled-lighter"]) .root,:host([appearance="filled-darker"]) .root{border:${strokeWidthThin} solid ${colorTransparentStroke}}:host([appearance="filled-lighter"]) .root{background:${colorNeutralBackground1}}:host([appearance="filled-darker"]) .root{background:${colorNeutralBackground3}}:host([appearance="filled-lighter"]:hover) .root,:host([appearance="filled-darker"]:hover) .root{border-color:${colorTransparentStrokeInteractive}}:host([appearance="filled-lighter"]:active) .root,:host([appearance="filled-darker"]:active) .root{border-color:${colorTransparentStrokeInteractive};background:${colorNeutralBackground3}}`;
+  :host{white-space:normal;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300}}.label{display:flex;color:${colorNeutralForeground1};padding-bottom:${spacingVerticalXS};flex-shrink:0;padding-inline-end:${spacingHorizontalXS}}.label[hidden],:host(:empty) .label{display:none}.root{align-items:center;background-color:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};border-bottom-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};box-sizing:border-box;height:${sizeVerticalXXXL};display:inline-flex;flex-direction:row;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalMNudge};position:relative;width:100%;box-shadow:unset}:has(.control:user-invalid){border-color:${colorPaletteRedBorder2}}.root::after{box-sizing:border-box;content:"";position:absolute;inset-inline-start:-1px;bottom:0px;inset-inline-end:-1px;height:max(2px,${borderRadiusMedium});border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};border-bottom:2px solid ${colorCompoundBrandStroke};clip-path:inset(calc(100% - 2px) 1px 0px);transform:scaleX(0);transition-property:transform;transition-duration:${durationUltraFast};transition-delay:${curveAccelerateMid}}.control{width:100%;height:100%;box-sizing:border-box;color:${colorNeutralForeground1};border-radius:${borderRadiusMedium};background:${colorTransparentBackground};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};font-size:${fontSizeBase300};border:none;vertical-align:center}.control:focus-visible{outline:0;border:0}.control::placeholder{color:${colorNeutralForeground4}}:host ::slotted([slot="start"]),:host ::slotted([slot="end"]){display:flex;align-items:center;justify-content:center;color:${colorNeutralForeground3};font-size:${fontSizeBase500}}:host ::slotted([slot="start"]){padding-inline-end:${spacingHorizontalXXS}}:host ::slotted([slot="end"]){padding-inline-start:${spacingHorizontalXXS};gap:${spacingHorizontalXS}}:host(:hover) .root{border-color:${colorNeutralStroke1Hover};border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .root{border-color:${colorNeutralStroke1Pressed}}:host(:focus-within) .root{outline:transparent solid 2px;border-bottom:0}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host(:focus-within:active) .root:after{border-bottom-color:${colorCompoundBrandStrokePressed}}:host([appearance="outline"]:focus-within) .root{border:${strokeWidthThin} solid ${colorNeutralStroke1}}:host(:focus-within) .control{color:${colorNeutralForeground1}}:host([disabled]) .root{background:${colorTransparentBackground};border:${strokeWidthThin} solid ${colorNeutralStrokeDisabled}}:host([disabled]) .control::placeholder,:host([disabled]) ::slotted([slot="start"]),:host([disabled]) ::slotted([slot="end"]){color:${colorNeutralForegroundDisabled}}::selection{color:${colorNeutralForegroundInverted};background-color:${colorNeutralBackgroundInverted}}:host([control-size="small"]) .control{font-size:${fontSizeBase200};font-weight:${fontWeightRegular};line-height:${lineHeightBase200}}:host([control-size="small"]) .root{height:${sizeVerticalXXL};gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalSNudge}}:host([control-size="small"]) ::slotted([slot="start"]),:host([control-size="small"]) ::slotted([slot="end"]){font-size:${fontSizeBase400}}:host([control-size="large"]) .control{font-size:${fontSizeBase400};font-weight:${fontWeightRegular};line-height:${lineHeightBase400}}:host([control-size="large"]) .root{height:40px;gap:${spacingHorizontalS};padding:0 ${spacingHorizontalM}}:host([control-size="large"]) ::slotted([slot="start"]),:host([control-size="large"]) ::slotted([slot="end"]){font-size:${fontSizeBase600}}:host([appearance="underline"]) .root{background:${colorTransparentBackground};border:0;border-radius:0;border-bottom:${strokeWidthThin} solid ${colorNeutralStrokeAccessible}}:host([appearance="underline"]:hover) .root{border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host([appearance="underline"]:active) .root{border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance="underline"]:focus-within) .root{border:0;border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance="underline"][disabled]) .root{border-bottom-color:${colorNeutralStrokeDisabled}}:host([appearance="filled-lighter"]) .root,:host([appearance="filled-darker"]) .root{border:${strokeWidthThin} solid ${colorTransparentStroke}}:host([appearance="filled-lighter"]) .root{background:${colorNeutralBackground1}}:host([appearance="filled-darker"]) .root{background:${colorNeutralBackground3}}:host([appearance="filled-lighter"]:hover) .root,:host([appearance="filled-darker"]:hover) .root{border-color:${colorTransparentStrokeInteractive}}:host([appearance="filled-lighter"]:active) .root,:host([appearance="filled-darker"]:active) .root{border-color:${colorTransparentStrokeInteractive};background:${colorNeutralBackground3}}`;
 
-const styles$3 = css`
-  ${styles$4}
+const styles$b = css`
+  ${styles$c}
 
-  .root{padding-inline:${spacingHorizontalS};padding-inline-end:0px}:host([control-size="small"]) .root{padding-inline-end:0px}:host([control-size="large"]) .root{padding-inline:${spacingHorizontalMNudge};padding-inline-end:0px}.search-icon{display:flex;box-sizing:border-box;color:${colorNeutralForeground3}}fabric-button.clear-button{min-width:${sizeHorizontalXL};min-height:${sizeHorizontalXL};margin-inline-end:${spacingHorizontalXS};padding:0px 2px;display:none}`;
+  :host{white-space:normal}.root{padding-inline:${spacingHorizontalS};padding-inline-end:0px}:host([control-size="small"]) .root{padding-inline-end:0px}:host([control-size="large"]) .root{padding-inline:${spacingHorizontalMNudge};padding-inline-end:0px}.search-icon{display:flex;box-sizing:border-box;color:${colorNeutralForeground3}}fabric-button.clear-button{min-width:${sizeHorizontalXL};min-height:${sizeHorizontalXL};margin-inline-end:${spacingHorizontalXS};padding:0px 2px;display:none}`;
 
 /**
  * The template for the {@link @fabric-msft/fabric-web#(SearchBox:class)} component.
@@ -19084,7 +19197,7 @@ const template$4 = searchBoxTemplate();
 const SearchBoxDefinition = SearchBox.compose({
   name: `${DesignSystem.prefix}-search-box`,
   template: template$4,
-  styles: styles$3,
+  styles: styles$b,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -19209,8 +19322,8 @@ const template$3 = sliderTemplate();
  *
  * @public
  */
-const styles$2 = css`
-  :host([hidden]){display:none}:host{--thumb-size:${sizeVerticalXL};--track-margin-inline:calc(var(--thumb-size) / 2);--track-size:4px;--track-overhang:calc(var(--track-size) / -2);--rail-color:${colorCompoundBrandBackground};--track-color:${colorNeutralStrokeAccessible};--slider-direction:90deg;--border-radius:${borderRadiusMedium};--step-marker-inset:var(--track-overhang) -1px;display:inline-flex;align-items:center;gap:${spacingHorizontalS};position:relative;box-sizing:border-box;outline:none;user-select:none;touch-action:none;min-width:calc(${sizeVerticalXL} * 6);min-height:${sizeVerticalXXXL}}:host(:hover){--rail-color:${colorCompoundBrandBackgroundHover}}:host(:active){--rail-color:${colorCompoundBrandBackgroundPressed}}:host(:disabled){--rail-color:${colorNeutralForegroundDisabled};--track-color:${colorNeutralBackgroundDisabled}}:host(:not(:disabled)){cursor:pointer}:host(:dir(rtl)){--slider-direction:-90deg}:host([size="small"]){--thumb-size:${sizeVerticalL};--track-overhang:-1px;--track-size:2px;--border-radius:${borderRadiusSmall};min-height:${sizeVerticalXXL}}:host([orientation="vertical"]){--slider-direction:0deg;--step-marker-inset:-1px var(--track-overhang);flex-direction:column;min-height:unset;min-width:${sizeVerticalXXXL}}:host(:not([slot="input"]):focus-visible){box-shadow:0 0 0 2pt ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}.root{display:inline-grid;position:relative;align-items:center;justify-content:center;flex:1 1 auto;min-width:calc(${sizeVerticalXL} * 6);min-height:${sizeVerticalXXXL};grid-template-rows:1fr var(--thumb-size) 1fr;grid-template-columns:var(--track-margin-inline) 1fr
+const styles$a = css`
+  :host([hidden]){display:none}:host{--thumb-size:${sizeVerticalXL};--track-margin-inline:calc(var(--thumb-size) / 2);--track-size:4px;--track-overhang:calc(var(--track-size) / -2);--rail-color:${colorCompoundBrandBackground};--track-color:${colorNeutralStrokeAccessible};--slider-direction:90deg;--border-radius:${borderRadiusMedium};--step-marker-inset:var(--track-overhang) -1px;white-space:normal;display:inline-flex;align-items:center;gap:${spacingHorizontalS};position:relative;box-sizing:border-box;outline:none;user-select:none;touch-action:none;min-width:calc(${sizeVerticalXL} * 6);min-height:${sizeVerticalXXXL}}:host(:hover){--rail-color:${colorCompoundBrandBackgroundHover}}:host(:active){--rail-color:${colorCompoundBrandBackgroundPressed}}:host(:disabled){--rail-color:${colorNeutralForegroundDisabled};--track-color:${colorNeutralBackgroundDisabled}}:host(:not(:disabled)){cursor:pointer}:host(:dir(rtl)){--slider-direction:-90deg}:host([size="small"]){--thumb-size:${sizeVerticalL};--track-overhang:-1px;--track-size:2px;--border-radius:${borderRadiusSmall};min-height:${sizeVerticalXXL}}:host([orientation="vertical"]){--slider-direction:0deg;--step-marker-inset:-1px var(--track-overhang);flex-direction:column;min-height:unset;min-width:${sizeVerticalXXXL}}:host(:not([slot="input"]):focus-visible){box-shadow:0 0 0 2pt ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}.root{display:inline-grid;position:relative;align-items:center;justify-content:center;flex:1 1 auto;min-width:calc(${sizeVerticalXL} * 6);min-height:${sizeVerticalXXXL};grid-template-rows:1fr var(--thumb-size) 1fr;grid-template-columns:var(--track-margin-inline) 1fr
       var(--track-margin-inline)}:host([orientation="vertical"]) .root{min-height:calc(${sizeVerticalXL} * 6);min-width:${sizeVerticalXXXL};grid-template-rows:var(--track-margin-inline) 1fr
       var(--track-margin-inline);grid-template-columns:1fr var(--thumb-size) 1fr;justify-items:center;flex:1 1 auto;width:unset}:host([size="small"]) .root{min-height:${sizeVerticalXXL}}.root::after{background-image:linear-gradient(
       var(--slider-direction),var(--rail-color) 0%,var(--rail-color) 50%,var(--track-color) 50.1%,var(--track-color) 100%
@@ -19228,7 +19341,7 @@ const styles$2 = css`
 const definition$b = Slider.compose({
   name: `${DesignSystem.prefix}-slider`,
   template: template$3,
-  styles: styles$2,
+  styles: styles$a,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -19895,10 +20008,10 @@ __decorate([observable], SpinButton.prototype, "atBound", void 0);
  *
  * @public
  */
-const styles$1 = css`
+const styles$9 = css`
   ${display("block")}
 
-  :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};max-width:400px;}.label{display:flex;color:${colorNeutralForeground1};padding-bottom:${spacingVerticalXS};flex-shrink:0;padding-inline-end:${spacingHorizontalXS}}.label[hidden],:host(:empty) .label{display:none}.root{align-items:center;background-color:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};border-bottom-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};box-sizing:border-box;height:${sizeVerticalXXXL};display:inline-flex;flex-direction:row;gap:${spacingHorizontalXXS};padding:0 0 0 ${spacingHorizontalMNudge};position:relative;width:100%}.root::after{box-sizing:border-box;content:"";position:absolute;inset-inline-start:-1px;bottom:0px;inset-inline-end:-1px;height:max(2px,${borderRadiusMedium});border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};border-bottom:2px solid ${colorCompoundBrandStroke};clip-path:inset(calc(100% - 2px) 1px 0px);transform:scaleX(0);transition-property:transform;transition-duration:${durationUltraFast};transition-delay:${curveAccelerateMid}}.control{flex:1;min-width:0;height:100%;box-sizing:border-box;color:${colorNeutralForeground1};border-radius:${borderRadiusMedium};background:${colorTransparentBackground};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};font-size:${fontSizeBase300};line-height:${lineHeightBase300};border:none;padding:0;text-align:start}.control:focus-visible{outline:0;border:0}.control::placeholder{color:${colorNeutralForeground4}}:host ::slotted([slot="start"]),:host ::slotted([slot="end"]){display:flex;align-items:center;justify-content:center;color:${colorNeutralForeground3}}:host ::slotted([slot="start"]){padding-inline-end:${spacingHorizontalXXS}}:host ::slotted([slot="end"]){padding-inline-start:${spacingHorizontalXXS}}.buttons{display:flex;flex-direction:column;height:100%;flex-shrink:0}.increment-button,.decrement-button{display:flex;flex-direction:column;align-items:center;justify-content:center;border:none;background:${colorTransparentBackground};color:${colorNeutralForeground3};cursor:pointer;padding:0 ${spacingHorizontalSNudge};flex:1;min-height:0;box-sizing:border-box}.increment-button{justify-content:flex-end;border-start-end-radius:${borderRadiusMedium}}.decrement-button{justify-content:flex-start;border-end-end-radius:${borderRadiusMedium}}.increment-button:hover,.decrement-button:hover{background:${colorNeutralBackground3}}.increment-button:active,.increment-button.pressed,.decrement-button:active,.decrement-button.pressed{color:${colorNeutralForeground1};background:${colorNeutralBackground3Pressed}}.increment-button:disabled,.decrement-button:disabled{color:${colorNeutralForegroundDisabled};cursor:not-allowed;background:${colorTransparentBackground}}:host(:hover) .root{border-color:${colorNeutralStroke1Hover};border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .root{border-color:${colorNeutralStroke1Pressed}}:host(:focus-within) .root{outline:transparent solid 2px;border-bottom:0}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host(:focus-within:active) .root::after{border-bottom-color:${colorCompoundBrandStrokePressed}}:host(:focus-within) .root{border:${strokeWidthThin} solid ${colorNeutralStroke1}}:host([disabled]) .root{background:${colorTransparentBackground};border:${strokeWidthThin} solid ${colorNeutralStrokeDisabled}}:host([disabled]) .control,:host([disabled]) .control::placeholder,:host([disabled]) ::slotted([slot="start"]),:host([disabled]) ::slotted([slot="end"]){color:${colorNeutralForegroundDisabled}}:host([control-size="small"]) .control{font-size:${fontSizeBase200};font-weight:${fontWeightRegular};line-height:${lineHeightBase200}}:host([control-size="small"]) .root{height:${sizeVerticalXXL};gap:${spacingHorizontalXXS};padding:0 0 0 ${spacingHorizontalSNudge}}.root.error,:host(:hover) .root.error,:host(:active) .root.error,:host(:focus-within) .root.error{border:${strokeWidthThin} solid ${colorStatusDangerBorder2}}:host(:has(.control:user-invalid)) .root{border:${strokeWidthThin} solid ${colorStatusDangerBorder2}}:host([appearance="underline"]) .root{background:${colorTransparentBackground};border:0;border-radius:0;border-bottom:${strokeWidthThin} solid ${colorNeutralStrokeAccessible}}:host([appearance="underline"]:hover) .root{border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host([appearance="underline"]:active) .root{border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance="underline"]:focus-within) .root{border:0;border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance="underline"][disabled]) .root{border-bottom-color:${colorNeutralStrokeDisabled}}:host([appearance="filled-lighter"]) .root,:host([appearance="filled-darker"]) .root{border:${strokeWidthThin} solid ${colorTransparentStroke}}:host([appearance="filled-lighter"]) .root{background:${colorNeutralBackground1}}:host([appearance="filled-darker"]) .root{background:${colorNeutralBackground3}}:host([appearance="filled-lighter"]:hover) .root,:host([appearance="filled-darker"]:hover) .root{border-color:${colorTransparentStrokeInteractive}}:host([appearance="filled-lighter"]:active) .root,:host([appearance="filled-darker"]:active) .root{border-color:${colorTransparentStrokeInteractive};background:${colorNeutralBackground3}}`;
+  :host{white-space:normal;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};max-width:400px;}.label{display:flex;color:${colorNeutralForeground1};padding-bottom:${spacingVerticalXS};flex-shrink:0;padding-inline-end:${spacingHorizontalXS}}.label[hidden],:host(:empty) .label{display:none}.root{align-items:center;background-color:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};border-bottom-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};box-sizing:border-box;height:${sizeVerticalXXXL};display:inline-flex;flex-direction:row;gap:${spacingHorizontalXXS};padding:0 0 0 ${spacingHorizontalMNudge};position:relative;width:100%}.root::after{box-sizing:border-box;content:"";position:absolute;inset-inline-start:-1px;bottom:0px;inset-inline-end:-1px;height:max(2px,${borderRadiusMedium});border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};border-bottom:2px solid ${colorCompoundBrandStroke};clip-path:inset(calc(100% - 2px) 1px 0px);transform:scaleX(0);transition-property:transform;transition-duration:${durationUltraFast};transition-delay:${curveAccelerateMid}}.control{flex:1;min-width:0;height:100%;box-sizing:border-box;color:${colorNeutralForeground1};border-radius:${borderRadiusMedium};background:${colorTransparentBackground};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};font-size:${fontSizeBase300};line-height:${lineHeightBase300};border:none;padding:0;text-align:start}.control:focus-visible{outline:0;border:0}.control::placeholder{color:${colorNeutralForeground4}}:host ::slotted([slot="start"]),:host ::slotted([slot="end"]){display:flex;align-items:center;justify-content:center;color:${colorNeutralForeground3}}:host ::slotted([slot="start"]){padding-inline-end:${spacingHorizontalXXS}}:host ::slotted([slot="end"]){padding-inline-start:${spacingHorizontalXXS}}.buttons{display:flex;flex-direction:column;height:100%;flex-shrink:0}.increment-button,.decrement-button{display:flex;flex-direction:column;align-items:center;justify-content:center;border:none;background:${colorTransparentBackground};color:${colorNeutralForeground3};cursor:pointer;padding:0 ${spacingHorizontalSNudge};flex:1;min-height:0;box-sizing:border-box}.increment-button{justify-content:flex-end;border-start-end-radius:${borderRadiusMedium}}.decrement-button{justify-content:flex-start;border-end-end-radius:${borderRadiusMedium}}.increment-button:hover,.decrement-button:hover{background:${colorNeutralBackground3}}.increment-button:active,.increment-button.pressed,.decrement-button:active,.decrement-button.pressed{color:${colorNeutralForeground1};background:${colorNeutralBackground3Pressed}}.increment-button:disabled,.decrement-button:disabled{color:${colorNeutralForegroundDisabled};cursor:not-allowed;background:${colorTransparentBackground}}:host(:hover) .root{border-color:${colorNeutralStroke1Hover};border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .root{border-color:${colorNeutralStroke1Pressed}}:host(:focus-within) .root{outline:transparent solid 2px;border-bottom:0}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host(:focus-within:active) .root::after{border-bottom-color:${colorCompoundBrandStrokePressed}}:host(:focus-within) .root{border:${strokeWidthThin} solid ${colorNeutralStroke1}}:host([disabled]) .root{background:${colorTransparentBackground};border:${strokeWidthThin} solid ${colorNeutralStrokeDisabled}}:host([disabled]) .control,:host([disabled]) .control::placeholder,:host([disabled]) ::slotted([slot="start"]),:host([disabled]) ::slotted([slot="end"]){color:${colorNeutralForegroundDisabled}}:host([control-size="small"]) .control{font-size:${fontSizeBase200};font-weight:${fontWeightRegular};line-height:${lineHeightBase200}}:host([control-size="small"]) .root{height:${sizeVerticalXXL};gap:${spacingHorizontalXXS};padding:0 0 0 ${spacingHorizontalSNudge}}.root.error,:host(:hover) .root.error,:host(:active) .root.error,:host(:focus-within) .root.error{border:${strokeWidthThin} solid ${colorStatusDangerBorder2}}:host(:has(.control:user-invalid)) .root{border:${strokeWidthThin} solid ${colorStatusDangerBorder2}}:host([appearance="underline"]) .root{background:${colorTransparentBackground};border:0;border-radius:0;border-bottom:${strokeWidthThin} solid ${colorNeutralStrokeAccessible}}:host([appearance="underline"]:hover) .root{border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host([appearance="underline"]:active) .root{border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance="underline"]:focus-within) .root{border:0;border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance="underline"][disabled]) .root{border-bottom-color:${colorNeutralStrokeDisabled}}:host([appearance="filled-lighter"]) .root,:host([appearance="filled-darker"]) .root{border:${strokeWidthThin} solid ${colorTransparentStroke}}:host([appearance="filled-lighter"]) .root{background:${colorNeutralBackground1}}:host([appearance="filled-darker"]) .root{background:${colorNeutralBackground3}}:host([appearance="filled-lighter"]:hover) .root,:host([appearance="filled-darker"]:hover) .root{border-color:${colorTransparentStrokeInteractive}}:host([appearance="filled-lighter"]:active) .root,:host([appearance="filled-darker"]:active) .root{border-color:${colorTransparentStrokeInteractive};background:${colorNeutralBackground3}}`;
 
 /**
  * Default increment chevron icon (ChevronUp12Regular from @fluentui/svg-icons).
@@ -19936,7 +20049,7 @@ const template$2 = spinButtonTemplate();
 const definition$a = SpinButton.compose({
   name: `${DesignSystem.prefix}-spin-button`,
   template: template$2,
-  styles: styles$1,
+  styles: styles$9,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -19984,6 +20097,11 @@ const definition$a = SpinButton.compose({
  */
 class Switch extends Switch$1 {}
 
+const styles$8 = css`
+  ${SwitchStyles}
+
+  :host{white-space:normal}`;
+
 /**
  * The Fabric Switch component.
  *
@@ -19992,7 +20110,7 @@ class Switch extends Switch$1 {}
 const definition$9 = Switch.compose({
   name: `${DesignSystem.prefix}-switch`,
   template: SwitchTemplate,
-  styles: SwitchStyles,
+  styles: styles$8,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -20028,6 +20146,11 @@ const definition$9 = Switch.compose({
  */
 class Tab extends Tab$1 {}
 
+const styles$7 = css`
+  ${TabStyles}
+
+  :host{white-space:normal}`;
+
 /**
  * The Fabric Tab component
  *
@@ -20036,7 +20159,7 @@ class Tab extends Tab$1 {}
 const definition$8 = Tab.compose({
   name: `${DesignSystem.prefix}-tab`,
   template: TabTemplate,
-  styles: TabStyles,
+  styles: styles$7,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -20128,6 +20251,11 @@ class Tablist extends Tablist$1 {
   }
 }
 
+const styles$6 = css`
+  ${TablistStyles}
+
+  :host{white-space:normal}`;
+
 /**
  * The Fabric Tablist component.
  *
@@ -20136,7 +20264,7 @@ class Tablist extends Tablist$1 {
 const definition$7 = Tablist.compose({
   name: `${DesignSystem.prefix}-tablist`,
   template: TablistTemplate,
-  styles: TablistStyles,
+  styles: styles$6,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -20216,6 +20344,11 @@ const definition$7 = Tablist.compose({
  */
 class TextArea extends TextArea$1 {}
 
+const styles$5 = css`
+  ${TextAreaStyles}
+
+  :host{white-space:normal}`;
+
 /**
  * The Fabric Text Area component.
  *
@@ -20224,7 +20357,7 @@ class TextArea extends TextArea$1 {}
 const definition$6 = TextArea.compose({
   name: `${DesignSystem.prefix}-textarea`,
   template: TextAreaTemplate,
-  styles: TextAreaStyles,
+  styles: styles$5,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -20273,7 +20406,7 @@ const template$1 = textInputTemplate();
 const definition$5 = TextInput.compose({
   name: `${DesignSystem.prefix}-text-input`,
   template: template$1,
-  styles: styles$4,
+  styles: styles$c,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -20320,6 +20453,11 @@ const definition$5 = TextInput.compose({
  */
 class Text extends Text$1 {}
 
+const styles$4 = css`
+  ${TextStyles}
+
+  :host{white-space:normal}`;
+
 /**
  * The Fabric Text component.
  *
@@ -20328,7 +20466,7 @@ class Text extends Text$1 {}
 const definition$4 = Text.compose({
   name: `${DesignSystem.prefix}-text`,
   template: TextTemplate,
-  styles: TextStyles,
+  styles: styles$4,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -20431,6 +20569,11 @@ class Tree extends Tree$1 {
   }
 }
 
+const styles$3 = css`
+  ${TreeStyles}
+
+  :host{white-space:normal}`;
+
 /**
  * The Fabric Tree component.
  *
@@ -20439,7 +20582,7 @@ class Tree extends Tree$1 {
 const definition$3 = Tree.compose({
   name: `${DesignSystem.prefix}-tree`,
   template: TreeTemplate,
-  styles: TreeStyles,
+  styles: styles$3,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -20596,10 +20739,10 @@ TreeItem.sharedResizeObserver = new ResizeObserver(entries => {
 const chevronIcon = html.partial(`<svg viewBox="0 0 12 12" fill="currentColor"><path d="M4.65 2.15a.5.5 0 000 .7L7.79 6 4.65 9.15a.5.5 0 10.7.7l3.5-3.5a.5.5 0 000-.7l-3.5-3.5a.5.5 0 00-.7 0z"></path></svg>`);
 const template = html`<template slot="${x => x.isNestedItem ? "item" : void 0}"><div class="positioning-region" part="positioning-region"><div class="content" part="content"><span class="chevron" part="chevron" aria-hidden="true"><slot name="chevron">${chevronIcon}</slot></span><slot name="start"></slot><div class="text" ${ref("textEl")}><slot></slot></div><slot name="end"></slot></div><div class="aside" part="aside"><slot name="aside"></slot></div></div><div role="group" class="items" part="items"><slot name="item" ${ref("itemSlot")} @slotchange="${x => x.handleItemSlotChange()}"></slot></div></template>`;
 
-const styles = css`
+const styles$2 = css`
   ${TreeItemStyles}
 
-  .content{min-inline-size:0}.text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}`;
+  :host{white-space:normal}.content{min-inline-size:0}.text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}`;
 
 /**
  * The Fabric TreeItem component.
@@ -20609,7 +20752,7 @@ const styles = css`
 const definition$2 = TreeItem.compose({
   name: `${DesignSystem.prefix}-tree-item`,
   template,
-  styles,
+  styles: styles$2,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -20705,6 +20848,11 @@ const ToggleButtonFormTargets = {
   ...ButtonFormTarget
 };
 
+const styles$1 = css`
+  ${ToggleButtonStyles}
+
+  :host{white-space:normal}`;
+
 /**
  * The Fabric Toggle Button component.
  *
@@ -20713,7 +20861,7 @@ const ToggleButtonFormTargets = {
 const definition$1 = ToggleButton.compose({
   name: `${DesignSystem.prefix}-toggle-button`,
   template: ToggleButtonTemplate,
-  styles: ToggleButtonStyles,
+  styles: styles$1,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -20947,6 +21095,11 @@ class Tooltip extends Tooltip$1 {
 }
 Tooltip.DEFAULT_DELAY = 250;
 
+const styles = css`
+  ${TooltipStyles}
+
+  :host{white-space:normal}`;
+
 /**
  * The Fabric Tooltip component.
  *
@@ -20955,7 +21108,7 @@ Tooltip.DEFAULT_DELAY = 250;
 const definition = Tooltip.compose({
   name: `${DesignSystem.prefix}-tooltip`,
   template: TooltipTemplate,
-  styles: TooltipStyles,
+  styles,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }
@@ -20966,5 +21119,5 @@ const TooltipPositioningOptions = {
   ...TooltipPositioningOption
 };
 
-export { Accordion, definition$D as AccordionDefinition, AccordionExpandModes, AccordionItem, definition$E as AccordionItemDefinition, AccordionItemMarkerPositions, AccordionItemSizes, AccordionMenu, definition$1f as AccordionMenuDefinition, AccordionMenuExpandModes, AccordionMenuPanel, definition$1e as AccordionMenuPanelDefinition, AccordionMenuPanelMarkerPositions, AccordionMenuPanelSizes, styles$N as AccordionMenuPanelStyles, template$H as AccordionMenuPanelTemplate, styles$O as AccordionMenuStyles, template$I as AccordionMenuTemplate, AnchorButton, AnchorButtonAppearances, definition$n as AnchorButtonDefinition, AnchorButtonShapes, AnchorButtonSizes, AnchorTargets, Avatar, AvatarActives, AvatarAppearances, AvatarColors, definition$B as AvatarDefinition, AvatarNamedColors, AvatarShapes, AvatarSizes, Badge, BadgeAppearances, BadgeColors, definition$A as BadgeDefinition, BadgeShapes, BadgeSizes, Button, ButtonAppearances, definition$13 as ButtonDefinition, ButtonFormTargets, ButtonShapes, ButtonSizes, styles$C as ButtonStyles, ButtonTypes, Card, CardAppearances, CardCarousel, definition$14 as CardCarouselDefinition, styles$D as CardCarouselStyles, template$x as CardCarouselTemplate, definition$1d as CardDefinition, CardEventNames, CardFocusModes, CardFooter, definition$1c as CardFooterDefinition, CardHeader, definition$1b as CardHeaderDefinition, CardOrientations, CardPreview, definition$1a as CardPreviewDefinition, styles$M as CardStyles, template$G as CardTemplate, Carousel, definition$19 as CarouselDefinition, CarouselEventNames, CarouselItem, definition$15 as CarouselItemDefinition, styles$E as CarouselItemStyles, template$y as CarouselItemTemplate, CarouselNav, CarouselNavButtonPlacements, definition$18 as CarouselNavDefinition, CarouselNavEventNames, CarouselNavItem, definition$17 as CarouselNavItemDefinition, styles$G as CarouselNavItemStyles, template$A as CarouselNavItemTemplate, CarouselNavPositions, styles$H as CarouselNavStyles, template$B as CarouselNavTemplate, styles$I as CarouselStyles, template$C as CarouselTemplate, CarouselViewport, definition$16 as CarouselViewportDefinition, styles$F as CarouselViewportStyles, template$z as CarouselViewportTemplate, Checkbox, definition$z as CheckboxDefinition, CheckboxShapes, CheckboxSizes, CollisionEdges, CompoundButton, CompoundButtonAppearances, definition$$ as CompoundButtonDefinition, CompoundButtonFormTargets, CompoundButtonShapes, CompoundButtonSizes, CompoundButtonTypes, CounterBadge, CounterBadgeAppearances, CounterBadgeColors, definition$y as CounterBadgeDefinition, CounterBadgeShapes, CounterBadgeSizes, Dialog, DialogBody, definition$x as DialogBodyDefinition, definition$11 as DialogDefinition, styles$A as DialogStyles, DialogTypes, DirectionDetector, Divider, DividerAlignContents, DividerAppearances, definition$w as DividerDefinition, DividerOrientations, DividerRoles, styles$e as DividerStyles, template$c as DividerTemplate, Drawer, DrawerBody, definition$r as DrawerBodyDefinition, definition$s as DrawerDefinition, DrawerPositions, DrawerSizes, DrawerTypes, Dropdown, DropdownAppearances, definition$Q as DropdownDefinition, DropdownOption, definition$P as DropdownOptionDefinition, DropdownSizes, DropdownTypes, DynamicTab, definition$v as DynamicTabDefinition, DynamicTabEventNames, DynamicTabList, definition$u as DynamicTabListDefinition, DynamicTabListEventNames, DynamicTabListOrientations, styles$c as DynamicTabListStyles, template$a as DynamicTabListTemplate, styles$d as DynamicTabStyles, template$b as DynamicTabTemplate, EmptyState, definition$t as EmptyStateDefinition, styles$b as EmptyStateStyles, template$9 as EmptyStateTemplate, DesignSystem as FabricDesignSystem, Field, definition$q as FieldDefinition, FieldLabelPosition, FieldLabelPositions, styles$a as FieldStyles, FilterPill, FilterPillAppearances, definition$12 as FilterPillDefinition, FilterPillEventNames, FilterPillFormTargets, FilterPillShapes, FilterPillSizes, FilterPillTypes, Image, definition$p as ImageDefinition, ImageFits, ImageShapes, ImplicitSubmissionBlockingTypes$1 as ImplicitSubmissionBlockingTypes, Label, definition$o as LabelDefinition, LabelPositions, LabelSizes, LabelWeights, Link, LinkAppearances, definition$C as LinkDefinition, LinkTargets, Listbox, definition$O as ListboxDefinition, LoadingButton, definition$Z as LoadingButtonDefinition, Menu, MenuButton, MenuButtonAppearances, definition$l as MenuButtonDefinition, MenuButtonShapes, MenuButtonSizes, definition$i as MenuDefinition, MenuGroupRoles, MenuItem, MenuItemAppearances, definition$k as MenuItemDefinition, MenuItemRoles, styles$8 as MenuItemStyles, template$8 as MenuItemTemplate, MenuList, definition$j as MenuListDefinition, styles$7 as MenuListStyles, template$7 as MenuListTemplate, MenuPositions, MenuRepositionModes, styles$6 as MenuStyles, template$6 as MenuTemplate, MessageBar, definition$m as MessageBarDefinition, MockElementInternals, Modal, definition$10 as ModalDefinition, ModalEventNames, ModalFreItem, modalFreItemDefinition as ModalFreItemDefinition, ModalModes, MultiView, MultiViewController, definition$X as MultiViewControllerDefinition, definition$Y as MultiViewDefinition, MultiViewEventNames, MultiViewGroup, definition$W as MultiViewGroupDefinition, MultiViewGroupPositions, OptionGroup, definition$h as OptionGroupDefinition, Overflow, OverflowAxisValues, definition$V as OverflowDefinition, OverflowDirections, OverflowDivider, definition$T as OverflowDividerDefinition, styles$r as OverflowDividerStyles, OverflowEventNames, OverflowItem, definition$U as OverflowItemDefinition, styles$s as OverflowItemStyles, styles$t as OverflowStyles, Pagination, definition$R as PaginationDefinition, PaginationEventNames, PaginationVariants, Popover, definition$S as PopoverDefinition, PopoverEventNames, PopoverPositions, PopoverRepositionModes, styles$q as PopoverStyles, template$n as PopoverTemplate, PositioningShorthand, ProgressBar, definition$g as ProgressBarDefinition, ProgressBarShapes, ProgressBarThicknesses, ProgressBarValidationStates, Radio, definition$e as RadioDefinition, RadioGroup, definition$f as RadioGroupDefinition, RadioGroupOrientations, RatingDisplay, RatingDisplayColors, definition$d as RatingDisplayDefinition, RatingDisplaySizes, SearchBox, SearchBoxAppearances, SearchBoxControlSizes, definition$c as SearchBoxDefinition, SearchBoxEventNames, ImplicitSubmissionBlockingTypes as SearchBoxImplicitSubmissionBlockingTypes, SearchBoxTypes, SimpleTable, definition$K as SimpleTableDefinition, Slider, definition$b as SliderDefinition, SliderEventNames, SliderModes, SliderOrientations, SliderSizes, SlottableInputs, SortDirections, SpinButton, SpinButtonAppearances, SpinButtonBounds, SpinButtonControlSizes, definition$a as SpinButtonDefinition, SpinButtonEventNames, SpinButtonSpinStates, styles$1 as SpinButtonStyles, template$2 as SpinButtonTemplate, Spinner, SpinnerAppearances, definition$_ as SpinnerDefinition, SpinnerSizes, SvgIcon, definition$N as SvgIconDefinition, Switch, definition$9 as SwitchDefinition, Tab, definition$8 as TabDefinition, Table, TableCell, definition$M as TableCellDefinition, TableCellSizes, styles$m as TableCellStyles, template$k as TableCellTemplate, definition$L as TableDefinition, styles$l as TableStyles, template$j as TableTemplate, Tablist, TablistAppearances, definition$7 as TablistDefinition, TablistEventNames, TablistOrientations, TablistSizes, Tag, TagAppearances, definition$J as TagDefinition, TagEventNames, TagShapes, TagSizes, TagTextSizes, TeachingBubble, definition$I as TeachingBubbleDefinition, TeachingBubbleEventNames, TeachingBubblePlacements, TeachingBubbleSizes, Text, TextAligns, TextArea, TextareaAppearances as TextAreaAppearances, TextareaAppearancesForDisplayShadows as TextAreaAppearancesForDisplayShadows, TextareaAutocompletes as TextAreaAutocompletes, definition$6 as TextAreaDefinition, TextareaResizes as TextAreaResizes, TextareaSizes as TextAreaSizes, definition$4 as TextDefinition, TextFonts, TextInput, TextInputAppearances, TextInputControlSizes, definition$5 as TextInputDefinition, styles$4 as TextInputStyles, template$1 as TextInputTemplate, TextInputTypes, TextSizes, TextWeights, ToggleButton, ToggleButtonAppearances, definition$1 as ToggleButtonDefinition, ToggleButtonFormTargets, ToggleButtonShapes, ToggleButtonSizes, ToggleButtonTypes, Tooltip, definition as TooltipDefinition, TooltipPositioningOptions, Tree, definition$3 as TreeDefinition, TreeItem, definition$2 as TreeItemDefinition, styles as TreeItemStyles, template as TreeItemTemplate, ValidationFlags, Wizard, definition$H as WizardDefinition, WizardEvents, WizardPanel, definition$G as WizardPanelDefinition, WizardPanelEventNames, WizardPanelStates, WizardStep, definition$F as WizardStepDefinition, WizardStepEvents, WizardStepStates, applyMixins, attachMockElementInternals, clamp, composeDefinitions, createRovingFocusController, createUniqueId, debounce, debug, defineCarousel, definePagination, disabledState, expandedState, fromFAST, getDirection, getOptionsFromElement, globalDirectionDetector, inputElementMethods, isActionModifierKey, isDisabledElement, isFocusableElement, isHiddenElement, isOptionGroup, isRtl, styles$5 as optionGroupStyles, template$5 as optionGroupTemplate, precisionRound, roleForMenuGroup, roleForMenuItem, setAttributes, setChildrenFocusability, setGlobalDirectionDetector, staticallyCompose, toggleState, whitespaceFilter };
+export { Accordion, definition$D as AccordionDefinition, AccordionExpandModes, AccordionItem, definition$E as AccordionItemDefinition, AccordionItemMarkerPositions, AccordionItemSizes, AccordionMenu, definition$1f as AccordionMenuDefinition, AccordionMenuExpandModes, AccordionMenuPanel, definition$1e as AccordionMenuPanelDefinition, AccordionMenuPanelMarkerPositions, AccordionMenuPanelSizes, styles$1d as AccordionMenuPanelStyles, template$H as AccordionMenuPanelTemplate, styles$1e as AccordionMenuStyles, template$I as AccordionMenuTemplate, AnchorButton, AnchorButtonAppearances, definition$n as AnchorButtonDefinition, AnchorButtonShapes, AnchorButtonSizes, AnchorTargets, Avatar, AvatarActives, AvatarAppearances, AvatarColors, definition$B as AvatarDefinition, AvatarNamedColors, AvatarShapes, AvatarSizes, Badge, BadgeAppearances, BadgeColors, definition$A as BadgeDefinition, BadgeShapes, BadgeSizes, Button, ButtonAppearances, definition$13 as ButtonDefinition, ButtonFormTargets, ButtonShapes, ButtonSizes, styles$12 as ButtonStyles, ButtonTypes, Card, CardAppearances, CardCarousel, definition$14 as CardCarouselDefinition, styles$13 as CardCarouselStyles, template$x as CardCarouselTemplate, definition$1d as CardDefinition, CardEventNames, CardFocusModes, CardFooter, definition$1c as CardFooterDefinition, CardHeader, definition$1b as CardHeaderDefinition, CardOrientations, CardPreview, definition$1a as CardPreviewDefinition, styles$1c as CardStyles, template$G as CardTemplate, Carousel, definition$16 as CarouselDefinition, CarouselEventNames, CarouselItem, definition$15 as CarouselItemDefinition, styles$14 as CarouselItemStyles, template$y as CarouselItemTemplate, CarouselNav, CarouselNavButtonPlacements, definition$19 as CarouselNavDefinition, CarouselNavEventNames, CarouselNavItem, definition$18 as CarouselNavItemDefinition, styles$17 as CarouselNavItemStyles, template$B as CarouselNavItemTemplate, CarouselNavPositions, styles$18 as CarouselNavStyles, template$C as CarouselNavTemplate, styles$15 as CarouselStyles, template$z as CarouselTemplate, CarouselViewport, definition$17 as CarouselViewportDefinition, styles$16 as CarouselViewportStyles, template$A as CarouselViewportTemplate, Checkbox, definition$z as CheckboxDefinition, CheckboxShapes, CheckboxSizes, CollisionEdges, CompoundButton, CompoundButtonAppearances, definition$$ as CompoundButtonDefinition, CompoundButtonFormTargets, CompoundButtonShapes, CompoundButtonSizes, CompoundButtonTypes, CounterBadge, CounterBadgeAppearances, CounterBadgeColors, definition$y as CounterBadgeDefinition, CounterBadgeShapes, CounterBadgeSizes, Dialog, DialogBody, definition$x as DialogBodyDefinition, definition$11 as DialogDefinition, styles$10 as DialogStyles, DialogTypes, DirectionDetector, Divider, DividerAlignContents, DividerAppearances, definition$w as DividerDefinition, DividerOrientations, DividerRoles, styles$w as DividerStyles, template$c as DividerTemplate, Drawer, DrawerBody, definition$r as DrawerBodyDefinition, definition$s as DrawerDefinition, DrawerPositions, DrawerSizes, DrawerTypes, Dropdown, DropdownAppearances, definition$Q as DropdownDefinition, DropdownOption, definition$P as DropdownOptionDefinition, DropdownSizes, DropdownTypes, DynamicTab, definition$v as DynamicTabDefinition, DynamicTabEventNames, DynamicTabList, definition$u as DynamicTabListDefinition, DynamicTabListEventNames, DynamicTabListOrientations, styles$u as DynamicTabListStyles, template$a as DynamicTabListTemplate, styles$v as DynamicTabStyles, template$b as DynamicTabTemplate, EmptyState, definition$t as EmptyStateDefinition, styles$t as EmptyStateStyles, template$9 as EmptyStateTemplate, DesignSystem as FabricDesignSystem, Field, definition$q as FieldDefinition, FieldLabelPosition, FieldLabelPositions, styles$q as FieldStyles, FilterPill, FilterPillAppearances, definition$12 as FilterPillDefinition, FilterPillEventNames, FilterPillFormTargets, FilterPillShapes, FilterPillSizes, FilterPillTypes, Image, definition$p as ImageDefinition, ImageFits, ImageShapes, ImplicitSubmissionBlockingTypes$1 as ImplicitSubmissionBlockingTypes, Label, definition$o as LabelDefinition, LabelPositions, LabelSizes, LabelWeights, Link, LinkAppearances, definition$C as LinkDefinition, LinkTargets, Listbox, definition$O as ListboxDefinition, LoadingButton, definition$Z as LoadingButtonDefinition, Menu, MenuButton, MenuButtonAppearances, definition$l as MenuButtonDefinition, MenuButtonShapes, MenuButtonSizes, definition$i as MenuDefinition, MenuGroupRoles, MenuItem, MenuItemAppearances, definition$k as MenuItemDefinition, MenuItemRoles, styles$k as MenuItemStyles, template$8 as MenuItemTemplate, MenuList, definition$j as MenuListDefinition, styles$j as MenuListStyles, template$7 as MenuListTemplate, MenuPositions, MenuRepositionModes, styles$i as MenuStyles, template$6 as MenuTemplate, MessageBar, definition$m as MessageBarDefinition, MockElementInternals, Modal, definition$10 as ModalDefinition, ModalEventNames, ModalFreItem, modalFreItemDefinition as ModalFreItemDefinition, ModalModes, MultiView, MultiViewController, definition$X as MultiViewControllerDefinition, definition$Y as MultiViewDefinition, MultiViewEventNames, MultiViewGroup, definition$W as MultiViewGroupDefinition, MultiViewGroupPositions, OptionGroup, definition$h as OptionGroupDefinition, Overflow, OverflowAxisValues, definition$V as OverflowDefinition, OverflowDirections, OverflowDivider, definition$T as OverflowDividerDefinition, styles$S as OverflowDividerStyles, OverflowEventNames, OverflowItem, definition$U as OverflowItemDefinition, styles$T as OverflowItemStyles, styles$U as OverflowStyles, Pagination, definition$R as PaginationDefinition, PaginationEventNames, PaginationVariants, Popover, definition$S as PopoverDefinition, PopoverEventNames, PopoverPositions, PopoverRepositionModes, styles$R as PopoverStyles, template$n as PopoverTemplate, PositioningShorthand, ProgressBar, definition$g as ProgressBarDefinition, ProgressBarShapes, ProgressBarThicknesses, ProgressBarValidationStates, Radio, definition$e as RadioDefinition, RadioGroup, definition$f as RadioGroupDefinition, RadioGroupOrientations, RatingDisplay, RatingDisplayColors, definition$d as RatingDisplayDefinition, RatingDisplaySizes, SearchBox, SearchBoxAppearances, SearchBoxControlSizes, definition$c as SearchBoxDefinition, SearchBoxEventNames, ImplicitSubmissionBlockingTypes as SearchBoxImplicitSubmissionBlockingTypes, SearchBoxTypes, SimpleTable, definition$K as SimpleTableDefinition, Slider, definition$b as SliderDefinition, SliderEventNames, SliderModes, SliderOrientations, SliderSizes, SlottableInputs, SortDirections, SpinButton, SpinButtonAppearances, SpinButtonBounds, SpinButtonControlSizes, definition$a as SpinButtonDefinition, SpinButtonEventNames, SpinButtonSpinStates, styles$9 as SpinButtonStyles, template$2 as SpinButtonTemplate, Spinner, SpinnerAppearances, definition$_ as SpinnerDefinition, SpinnerSizes, SvgIcon, definition$N as SvgIconDefinition, Switch, definition$9 as SwitchDefinition, Tab, definition$8 as TabDefinition, Table, TableCell, definition$M as TableCellDefinition, TableCellSizes, styles$M as TableCellStyles, template$k as TableCellTemplate, definition$L as TableDefinition, styles$L as TableStyles, template$j as TableTemplate, Tablist, TablistAppearances, definition$7 as TablistDefinition, TablistEventNames, TablistOrientations, TablistSizes, Tag, TagAppearances, definition$J as TagDefinition, TagEventNames, TagShapes, TagSizes, TagTextSizes, TeachingBubble, definition$I as TeachingBubbleDefinition, TeachingBubbleEventNames, TeachingBubblePlacements, TeachingBubbleSizes, Text, TextAligns, TextArea, TextareaAppearances as TextAreaAppearances, TextareaAppearancesForDisplayShadows as TextAreaAppearancesForDisplayShadows, TextareaAutocompletes as TextAreaAutocompletes, definition$6 as TextAreaDefinition, TextareaResizes as TextAreaResizes, TextareaSizes as TextAreaSizes, definition$4 as TextDefinition, TextFonts, TextInput, TextInputAppearances, TextInputControlSizes, definition$5 as TextInputDefinition, styles$c as TextInputStyles, template$1 as TextInputTemplate, TextInputTypes, TextSizes, TextWeights, ToggleButton, ToggleButtonAppearances, definition$1 as ToggleButtonDefinition, ToggleButtonFormTargets, ToggleButtonShapes, ToggleButtonSizes, ToggleButtonTypes, Tooltip, definition as TooltipDefinition, TooltipPositioningOptions, Tree, definition$3 as TreeDefinition, TreeItem, definition$2 as TreeItemDefinition, styles$2 as TreeItemStyles, template as TreeItemTemplate, ValidationFlags, Wizard, definition$H as WizardDefinition, WizardEvents, WizardPanel, definition$G as WizardPanelDefinition, WizardPanelEventNames, WizardPanelStates, WizardStep, definition$F as WizardStepDefinition, WizardStepEvents, WizardStepStates, applyMixins, attachMockElementInternals, clamp, composeDefinitions, createRovingFocusController, createUniqueId, debounce, debug, defineCarousel, definePagination, disabledState, expandedState, fromFAST, getDirection, getOptionsFromElement, globalDirectionDetector, inputElementMethods, isActionModifierKey, isDisabledElement, isFocusableElement, isHiddenElement, isOptionGroup, isRtl, styles$h as optionGroupStyles, template$5 as optionGroupTemplate, precisionRound, roleForMenuGroup, roleForMenuItem, setAttributes, setChildrenFocusability, setGlobalDirectionDetector, staticallyCompose, toggleState, whitespaceFilter };
 //# sourceMappingURL=index.js.map