@fluentui/web-components 3.0.0-beta.40 → 3.0.0-beta.42

package/dist/web-components.js

@@ -3450,6 +3450,17 @@ __decorateClass$u([attr({
   attribute: "aria-roledescription"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", 2);
 
+const numberLikeStringConverter = {
+  fromView(value) {
+    const valueAsNumber = parseFloat(value);
+    return Number.isNaN(valueAsNumber) ? "" : valueAsNumber.toString();
+  },
+  toView(value) {
+    const valueAsNumber = parseFloat(value);
+    return Number.isNaN(valueAsNumber) ? void 0 : valueAsNumber.toString();
+  }
+};
+
 const getDirection = rootNode => {
   return rootNode.closest("[dir]")?.dir === "rtl" ? Direction.rtl : Direction.ltr;
 };
@@ -3743,6 +3754,7 @@ const squareState = css.partial`:is([state--square], :state(square))`;
 const tinyState = css.partial`:is([state--tiny], :state(tiny))`;
 const extraSmallState = css.partial`:is([state--extra-small], :state(extra-small))`;
 const smallState = css.partial`:is([state--small], :state(small))`;
+css.partial`:is([state--medium], :state(medium))`;
 const largeState = css.partial`:is([state--large], :state(large))`;
 const extraLargeState = css.partial`:is([state--extra-large], :state(extra-large))`;
 const hugeState = css.partial`:is([state--huge], :state(huge))`;
@@ -3979,6 +3991,7 @@ const spacingHorizontalS = "var(--spacingHorizontalS)";
 const spacingHorizontalMNudge = "var(--spacingHorizontalMNudge)";
 const spacingHorizontalM = "var(--spacingHorizontalM)";
 const spacingHorizontalL = "var(--spacingHorizontalL)";
+const spacingHorizontalXL = "var(--spacingHorizontalXL)";
 const spacingHorizontalXXL = "var(--spacingHorizontalXXL)";
 const spacingVerticalXXS = "var(--spacingVerticalXXS)";
 const spacingVerticalXS = "var(--spacingVerticalXS)";
@@ -4005,7 +4018,7 @@ const curveEasyEaseMax = "var(--curveEasyEaseMax)";
 const curveEasyEase = "var(--curveEasyEase)";
 const curveLinear = "var(--curveLinear)";
 
-const styles$x = css`
+const styles$y = css`
   ${display("block")}
 
   :host{max-width:fit-content;contain:content}.heading{height:44px;display:grid;position:relative;padding-inline:${spacingHorizontalM} ${spacingHorizontalMNudge};border-radius:${borderRadiusMedium};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};grid-template-columns:auto auto 1fr auto}.button{appearance:none;background:${colorTransparentBackground};border:none;box-sizing:border-box;color:${colorNeutralForeground1};cursor:pointer;font:inherit;grid-column:auto / span 2;grid-row:1;height:44px;outline:none;padding:0;text-align:start}.button::before{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall}}: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%;padding-inline-end:${spacingHorizontalS};grid-column:1 / span 1;grid-row:1}.content{margin:0 ${spacingHorizontalM}}::slotted([slot='start']){display:flex;justify-content:center;align-items:center;padding-right:${spacingHorizontalS};grid-column:2 / span 1;grid-row:1}button:focus-visible::after{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall};outline:none;border:2px solid ${colorStrokeFocus1};box-shadow:inset 0 0 0 1px ${colorStrokeFocus2}}:host(${disabledState}) .button{color:${colorNeutralForegroundDisabled}}: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}.heading{font-size:${fontSizeBase300};line-height:${lineHeightBase300}}: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){grid-column:4 / span 1;padding-inline-start:${spacingHorizontalS};padding-inline-end:0}:host(${alignEndState}) .button{grid-column:2 / span 3}:host([block]){max-width:100%}:host(${alignEndState}) .heading{grid-template-columns:auto auto 28px;padding-inline:${spacingHorizontalM}}:host(${alignEndState}:has([slot='start'])) .heading{padding-inline:${spacingHorizontalMNudge} ${spacingHorizontalM}}:host(${blockState}${alignEndState}) .heading{grid-template-columns:auto 1fr}:host(${alignEndState}) :is(.default-marker-collapsed,.default-marker-expanded){grid-column:5 / span 1}`;
@@ -4041,18 +4054,18 @@ const chevronDown20Filled = html.partial(`<svg
 function accordionItemTemplate(options = {}) {
   return html`<div class="heading" part="heading" role="heading" aria-level="${x => x.headinglevel}"><button class="button" part="button" ${ref("expandbutton")} ?disabled="${x => x.disabled ? "true" : void 0}" aria-expanded="${x => x.expanded}" aria-controls="${x => x.id}-panel" id="${x => x.id}"><slot name="heading"></slot></button>${startSlotTemplate(options)}<slot name="marker-expanded">${staticallyCompose(options.expandedIcon)}</slot><slot name="marker-collapsed">${staticallyCompose(options.collapsedIcon)}</slot></div><div class="content" part="content" id="${x => x.id}-panel" role="region" aria-labelledby="${x => x.id}"><slot></slot></div>`;
 }
-const template$y = accordionItemTemplate({
+const template$z = accordionItemTemplate({
   collapsedIcon: chevronRight20Filled,
   expandedIcon: chevronDown20Filled
 });
 
-const definition$y = AccordionItem.compose({
+const definition$z = AccordionItem.compose({
   name: `${FluentDesignSystem.prefix}-accordion-item`,
-  template: template$y,
-  styles: styles$x
+  template: template$z,
+  styles: styles$y
 });
 
-definition$y.define(FluentDesignSystem.registry);
+definition$z.define(FluentDesignSystem.registry);
 
 const AccordionExpandMode = {
   single: "single",
@@ -4208,7 +4221,7 @@ __decorateClass$s([attr({
 })], Accordion.prototype, "expandmode", 2);
 __decorateClass$s([observable], Accordion.prototype, "slottedAccordionItems", 2);
 
-const styles$w = css`
+const styles$x = css`
   ${display("flex")}
 
   :host{flex-direction:column;width:100%;contain:content}`;
@@ -4219,15 +4232,15 @@ function accordionTemplate() {
     filter: elements()
   })}></slot></template>`;
 }
-const template$x = accordionTemplate();
+const template$y = accordionTemplate();
 
-const definition$x = Accordion.compose({
+const definition$y = Accordion.compose({
   name: `${FluentDesignSystem.prefix}-accordion`,
-  template: template$x,
-  styles: styles$w
+  template: template$y,
+  styles: styles$x
 });
 
-definition$x.define(FluentDesignSystem.registry);
+definition$y.define(FluentDesignSystem.registry);
 
 const ButtonType = {
   submit: "submit",
@@ -4433,13 +4446,13 @@ const baseButtonStyles = 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:32px;outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:96px;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}.content{display:inherit}: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 2px ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){transition-duration:0.01ms}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}:is([slot='start'],::slotted([slot='start'])){margin-inline-end:var(--icon-spacing)}:is([slot='end'],::slotted([slot='end'])){margin-inline-start:var(--icon-spacing)}:host(${iconOnlyState}){min-width:32px;max-width:32px}:host(${smallState}){--icon-spacing:${spacingHorizontalXS};min-height:24px;min-width:64px;padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host(${smallState}${iconOnlyState}){min-width:24px;max-width:24px}:host(${largeState}){min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(${largeState}${iconOnlyState}){min-width:40px;max-width:40px}:host(${largeState}) ::slotted(svg){font-size:24px;height:24px;width:24px}:host(:is(${circularState},${circularState}:focus-visible)){border-radius:${borderRadiusCircular}}:host(:is(${squareState},${squareState}:focus-visible)){border-radius:${borderRadiusNone}}:host(${primaryState}){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host(${primaryState}:hover){background-color:${colorBrandBackgroundHover}}:host(${primaryState}:is(:hover,:hover:active)){border-color:transparent;color:${colorNeutralForegroundOnBrand}}:host(${primaryState}:hover:active){background-color:${colorBrandBackgroundPressed}}:host(${primaryState}:focus-visible){border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host(${outlineState}){background-color:${colorTransparentBackground}}: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}`;
-const styles$v = css`
+const styles$w = css`
   ${baseButtonStyles}
 
   :host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable])),:host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable]):hover),:host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable]):hover:active){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled};color:${colorNeutralForegroundDisabled};cursor:not-allowed}:host(${primaryState}:is(:disabled,[disabled-focusable])),:host(${primaryState}:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){border-color:transparent}:host(${outlineState}:is(:disabled,[disabled-focusable])),:host(${outlineState}:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){background-color:${colorTransparentBackground}}:host(${subtleState}:is(:disabled,[disabled-focusable])),:host(${subtleState}:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){background-color:${colorTransparentBackground};border-color:transparent}:host(${transparentState}:is(:disabled,[disabled-focusable])),:host(${transparentState}:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){border-color:transparent;background-color:${colorTransparentBackground}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host{background:ButtonFace;color:ButtonText}:host(:is(:hover,:focus-visible)){border-color:Highlight}`));
 
-const styles$u = css`
+const styles$v = css`
   ${baseButtonStyles}
 
   ::slotted(a){position:absolute;inset:0}`.withBehaviors(forcedColorsStylesheetBehavior(css`
@@ -4448,15 +4461,15 @@ const styles$u = css`
 function anchorTemplate$1(options = {}) {
   return html`<template tabindex="0" @click="${(x, c) => x.clickHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}">${startSlotTemplate(options)}<span class="content" part="content"><slot></slot></span>${endSlotTemplate(options)}</template>`;
 }
-const template$w = anchorTemplate$1();
+const template$x = anchorTemplate$1();
 
-const definition$w = AnchorButton.compose({
+const definition$x = AnchorButton.compose({
   name: `${FluentDesignSystem.prefix}-anchor-button`,
-  template: template$w,
-  styles: styles$u
+  template: template$x,
+  styles: styles$v
 });
 
-definition$w.define(FluentDesignSystem.registry);
+definition$x.define(FluentDesignSystem.registry);
 
 const UNWANTED_ENCLOSURES_REGEX = /[\(\[\{][^\)\]\}]*[\)\]\}]/g;
 const UNWANTED_CHARS_REGEX = /[\0-\u001F\!-/:-@\[-`\{-\u00BF\u0250-\u036F\uD800-\uFFFF]/g;
@@ -4643,22 +4656,22 @@ const animations = {
   normalEase: curveEasyEase,
   nullEasing: curveLinear
 };
-const styles$t = css`
+const styles$u = css`
   ${display("inline-flex")} :host{position:relative;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};font-size:${fontSizeBase300};border-radius:${borderRadiusCircular};color:${colorNeutralForeground3};background-color:${colorNeutralBackground6};contain:layout style}.default-icon,::slotted(svg){width:20px;height:20px;font-size:20px}::slotted(img){box-sizing:border-box;width:100%;height:100%;border-radius:${borderRadiusCircular}}::slotted([slot='badge']){position:absolute;bottom:0;right:0;box-shadow:0 0 0 ${strokeWidthThin}) ${colorNeutralBackground1}}:host([size='64']) ::slotted([slot='badge']),:host([size='72']) ::slotted([slot='badge']),:host([size='96']) ::slotted([slot='badge']),:host([size='120']) ::slotted([slot='badge']),:host([size='128']) ::slotted([slot='badge']){box-shadow:0 0 0 ${strokeWidthThick}) ${colorNeutralBackground1}}:host([size='16']),:host([size='20']),:host([size='24']){font-size:${fontSizeBase100};font-weight:${fontWeightRegular}}:host([size='16']){width:16px;height:16px}:host([size='20']){width:20px;height:20px}:host([size='24']){width:24px;height:24px}:host([size='16']) .default-icon,:host([size='16']) ::slotted(svg){width:12px;height:12px;font-size:12px}:host([size='20']) .default-icon,:host([size='24']) .default-icon,:host([size='20']) ::slotted(svg),:host([size='24']) ::slotted(svg){width:16px;height:16px;font-size:16px}:host([size='28']){width:28px;height:28px;font-size:${fontSizeBase200}}:host([size='36']){width:36px;height:36px}:host([size='40']){width:40px;height:40px}:host([size='48']),:host([size='56']){font-size:${fontSizeBase400}}:host([size='48']){width:48px;height:48px}:host([size='48']) .default-icon,:host([size='48']) ::slotted(svg){width:24px;height:24px;font-size:24px}:host([size='56']){width:56px;height:56px}:host([size='56']) .default-icon,:host([size='56']) ::slotted(svg){width:28px;height:28px;font-size:28px}:host([size='64']),:host([size='72']),:host([size='96']){font-size:${fontSizeBase500}}:host([size='64']) .default-icon,:host([size='72']) .default-icon,:host([size='64']) ::slotted(svg),:host([size='72']) ::slotted(svg){width:32px;height:32px;font-size:32px}:host([size='64']){width:64px;height:64px}:host([size='72']){width:72px;height:72px}:host([size='96']){width:96px;height:96px}:host([size='96']) .default-icon,:host([size='120']) .default-icon,:host([size='128']) .default-icon,:host([size='96']) ::slotted(svg),:host([size='120']) ::slotted(svg),:host([size='128']) ::slotted(svg){width:48px;height:48px;font-size:48px}:host([size='120']),:host([size='128']){font-size:${fontSizeBase600}}:host([size='120']){width:120px;height:120px}:host([size='128']){width:128px;height:128px}:host([shape='square']){border-radius:${borderRadiusMedium}}:host([shape='square'][size='20']),:host([shape='square'][size='24']){border-radius:${borderRadiusSmall}}:host([shape='square'][size='56']),:host([shape='square'][size='64']),:host([shape='square'][size='72']){border-radius:${borderRadiusLarge}}:host([shape='square'][size='96']),:host([shape='square'][size='120']),:host([shape='square'][size='128']){border-radius:${borderRadiusXLarge}}:host(:is([state--brand],:state(brand))){color:${colorNeutralForegroundStaticInverted};background-color:${colorBrandBackgroundStatic}}:host(:is([state--dark-red],:state(dark-red))){color:${colorPaletteDarkRedForeground2};background-color:${colorPaletteDarkRedBackground2}}:host(:is([state--cranberry],:state(cranberry))){color:${colorPaletteCranberryForeground2};background-color:${colorPaletteCranberryBackground2}}:host(:is([state--red],:state(red))){color:${colorPaletteRedForeground2};background-color:${colorPaletteRedBackground2}}:host(:is([state--pumpkin],:state(pumpkin))){color:${colorPalettePumpkinForeground2};background-color:${colorPalettePumpkinBackground2}}:host(:is([state--peach],:state(peach))){color:${colorPalettePeachForeground2};background-color:${colorPalettePeachBackground2}}:host(:is([state--marigold],:state(marigold))){color:${colorPaletteMarigoldForeground2};background-color:${colorPaletteMarigoldBackground2}}:host(:is([state--gold],:state(gold))){color:${colorPaletteGoldForeground2};background-color:${colorPaletteGoldBackground2}}:host(:is([state--brass],:state(brass))){color:${colorPaletteBrassForeground2};background-color:${colorPaletteBrassBackground2}}:host(:is([state--brown],:state(brown))){color:${colorPaletteBrownForeground2};background-color:${colorPaletteBrownBackground2}}:host(:is([state--forest],:state(forest))){color:${colorPaletteForestForeground2};background-color:${colorPaletteForestBackground2}}:host(:is([state--seafoam],:state(seafoam))){color:${colorPaletteSeafoamForeground2};background-color:${colorPaletteSeafoamBackground2}}:host(:is([state--dark-green],:state(dark-green))){color:${colorPaletteDarkGreenForeground2};background-color:${colorPaletteDarkGreenBackground2}}:host(:is([state--light-teal],:state(light-teal))){color:${colorPaletteLightTealForeground2};background-color:${colorPaletteLightTealBackground2}}:host(:is([state--teal],:state(teal))){color:${colorPaletteTealForeground2};background-color:${colorPaletteTealBackground2}}:host(:is([state--steel],:state(steel))){color:${colorPaletteSteelForeground2};background-color:${colorPaletteSteelBackground2}}:host(:is([state--blue],:state(blue))){color:${colorPaletteBlueForeground2};background-color:${colorPaletteBlueBackground2}}:host(:is([state--royal-blue],:state(royal-blue))){color:${colorPaletteRoyalBlueForeground2};background-color:${colorPaletteRoyalBlueBackground2}}:host(:is([state--cornflower],:state(cornflower))){color:${colorPaletteCornflowerForeground2};background-color:${colorPaletteCornflowerBackground2}}:host(:is([state--navy],:state(navy))){color:${colorPaletteNavyForeground2};background-color:${colorPaletteNavyBackground2}}:host(:is([state--lavender],:state(lavender))){color:${colorPaletteLavenderForeground2};background-color:${colorPaletteLavenderBackground2}}:host(:is([state--purple],:state(purple))){color:${colorPalettePurpleForeground2};background-color:${colorPalettePurpleBackground2}}:host(:is([state--grape],:state(grape))){color:${colorPaletteGrapeForeground2};background-color:${colorPaletteGrapeBackground2}}:host(:is([state--lilac],:state(lilac))){color:${colorPaletteLilacForeground2};background-color:${colorPaletteLilacBackground2}}:host(:is([state--pink],:state(pink))){color:${colorPalettePinkForeground2};background-color:${colorPalettePinkBackground2}}:host(:is([state--magenta],:state(magenta))){color:${colorPaletteMagentaForeground2};background-color:${colorPaletteMagentaBackground2}}:host(:is([state--plum],:state(plum))){color:${colorPalettePlumForeground2};background-color:${colorPalettePlumBackground2}}:host(:is([state--beige],:state(beige))){color:${colorPaletteBeigeForeground2};background-color:${colorPaletteBeigeBackground2}}:host(:is([state--mink],:state(mink))){color:${colorPaletteMinkForeground2};background-color:${colorPaletteMinkBackground2}}:host(:is([state--platinum],:state(platinum))){color:${colorPalettePlatinumForeground2};background-color:${colorPalettePlatinumBackground2}}:host(:is([state--anchor],:state(anchor))){color:${colorPaletteAnchorForeground2};background-color:${colorPaletteAnchorBackground2}}:host([active]){transform:perspective(1px);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastEase},${animations.nullEasing}}:host([active])::before{content:'';position:absolute;top:0;left:0;bottom:0;right:0;border-radius:inherit;transition-property:margin,opacity;transition-duration:${durationUltraSlow}),${durationSlower};transition-delay:${animations.fastEase}),${animations.nullEasing})}:host([active])::before{box-shadow:${shadow8};border-style:solid;border-color:${colorBrandBackgroundStatic}}:host([active][appearance='shadow'])::before{border-style:none;border-color:none}:host([active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThick});border-width:${strokeWidthThick}}:host([size='56'][active]:not([appearance='shadow']))::before,:host([size='64'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThicker});border-width:${strokeWidthThicker}}:host([size='72'][active]:not([appearance='shadow']))::before,:host([size='96'][active]:not([appearance='shadow']))::before,:host([size='120'][active]:not([appearance='shadow']))::before,:host([size='128'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThickest});border-width:${strokeWidthThickest}}:host([size='20'][active][appearance])::before,:host([size='24'][active][appearance])::before,:host([size='28'][active][appearance])::before{box-shadow:${shadow4}}:host([size='56'][active][appearance])::before,:host([size='64'][active][appearance])::before{box-shadow:${shadow16}}:host([size='72'][active][appearance])::before,:host([size='96'][active][appearance])::before,:host([size='120'][active][appearance])::before,:host([size='128'][active][appearance])::before{box-shadow:${shadow28}}:host([active][appearance='ring'])::before{box-shadow:none}:host([active='inactive']){opacity:0.8;transform:scale(0.875);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}:host([active='inactive'])::before{margin:0;opacity:0;transition-property:margin,opacity;transition-duration:${durationUltraSlow},${durationSlower};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}@media screen and (prefers-reduced-motion:reduce){:host([active]){transition-duration:0.01ms}:host([active])::before{transition-duration:0.01ms;transition-delay:0.01ms}}`;
 
 const defaultIconTemplate = html`<svg width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="default-icon" fill="currentcolor" aria-hidden="true"><path d="M10 2a4 4 0 100 8 4 4 0 000-8zM7 6a3 3 0 116 0 3 3 0 01-6 0zm-2 5a2 2 0 00-2 2c0 1.7.83 2.97 2.13 3.8A9.14 9.14 0 0010 18c1.85 0 3.58-.39 4.87-1.2A4.35 4.35 0 0017 13a2 2 0 00-2-2H5zm-1 2a1 1 0 011-1h10a1 1 0 011 1c0 1.3-.62 2.28-1.67 2.95A8.16 8.16 0 0110 17a8.16 8.16 0 01-4.33-1.05A3.36 3.36 0 014 13z"></path></svg>`;
 function avatarTemplate() {
   return html`<slot>${x => x.name || x.initials ? x.generateInitials() : defaultIconTemplate}</slot><slot name="badge"></slot>`;
 }
-const template$v = avatarTemplate();
+const template$w = avatarTemplate();
 
-const definition$v = Avatar.compose({
+const definition$w = Avatar.compose({
   name: `${FluentDesignSystem.prefix}-avatar`,
-  template: template$v,
-  styles: styles$t
+  template: template$w,
+  styles: styles$u
 });
 
-definition$v.define(FluentDesignSystem.registry);
+definition$w.define(FluentDesignSystem.registry);
 
 const BadgeAppearance = {
   filled: "filled",
@@ -5058,7 +5071,7 @@ css.partial`
   line-height: ${lineHeightBase100};
   font-weight: ${fontWeightSemibold};
 `;
-css.partial`
+const typographySubtitle1Styles = css.partial`
   font-family: ${fontFamilyBase};
   font-size: ${fontSizeBase500};
   line-height: ${lineHeightBase500};
@@ -5107,7 +5120,7 @@ css.partial`
   font-weight: ${fontWeightSemibold};
 `;
 
-const styles$s = css`
+const styles$t = css`
   :host(${squareState}){border-radius:${borderRadiusNone}}:host(${roundedState}){border-radius:${borderRadiusMedium}}:host(${roundedState}${tinyState}),:host(${roundedState}${extraSmallState}),:host(${roundedState}${smallState}){border-radius:${borderRadiusSmall}}${badgeSizeStyles}
   ${badgeFilledStyles}
   ${badgeGhostStyles}
@@ -5120,15 +5133,15 @@ const styles$s = css`
 function badgeTemplate(options = {}) {
   return html` ${startSlotTemplate(options)}<slot>${staticallyCompose(options.defaultContent)}</slot>${endSlotTemplate(options)} `;
 }
-const template$u = badgeTemplate();
+const template$v = badgeTemplate();
 
-const definition$u = Badge.compose({
+const definition$v = Badge.compose({
   name: `${FluentDesignSystem.prefix}-badge`,
-  template: template$u,
-  styles: styles$s
+  template: template$v,
+  styles: styles$t
 });
 
-definition$u.define(FluentDesignSystem.registry);
+definition$v.define(FluentDesignSystem.registry);
 
 var __defProp$o = Object.defineProperty;
 var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
@@ -5431,15 +5444,15 @@ applyMixins(Button, StartEnd);
 function buttonTemplate$1(options = {}) {
   return html`<template tabindex="${x => x.disabled ? -1 : 0}" @click="${(x, c) => x.clickHandler(c.event)}" @keypress="${(x, c) => x.keypressHandler(c.event)}">${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot></span>${endSlotTemplate(options)}</template>`;
 }
-const template$t = buttonTemplate$1();
+const template$u = buttonTemplate$1();
 
-const definition$t = Button.compose({
+const definition$u = Button.compose({
   name: `${FluentDesignSystem.prefix}-button`,
-  template: template$t,
-  styles: styles$v
+  template: template$u,
+  styles: styles$w
 });
 
-definition$t.define(FluentDesignSystem.registry);
+definition$u.define(FluentDesignSystem.registry);
 
 var __defProp$n = Object.defineProperty;
 var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
@@ -5878,7 +5891,7 @@ __decorateClass$n([attr], Checkbox.prototype, "shape", 2);
 __decorateClass$n([attr], Checkbox.prototype, "size", 2);
 
 const indeterminateState = css.partial`:is([state--indeterminate], :state(indeterminate))`;
-const styles$r = css`
+const styles$s = css`
   ${display("inline-flex")}
 
   :host{--size:16px;background-color:${colorNeutralBackground1};border-radius:${borderRadiusSmall};border:${strokeWidthThin} solid ${colorNeutralStrokeAccessible};box-sizing:border-box;cursor:pointer;position:relative;width:var(--size)}:host,.indeterminate-indicator,.checked-indicator{aspect-ratio:1}:host(:hover){border-color:${colorNeutralStrokeAccessibleHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(${checkedState}:hover){background-color:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandStrokeHover}}:host(${checkedState}:active){background-color:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandStrokePressed}}:host(:focus-visible){outline:none}:host(:not([slot='input']))::after{content:'';position:absolute;inset:-8px;box-sizing:border-box;outline:none;border:${strokeWidthThick} solid ${colorTransparentStroke};border-radius:${borderRadiusMedium}}:host(:not([slot='input']):focus-visible)::after{border-color:${colorStrokeFocus2}}.indeterminate-indicator,.checked-indicator{color:${colorNeutralForegroundInverted};inset:0;margin:auto;position:absolute}::slotted([slot='checked-indicator']),.checked-indicator{fill:currentColor;display:inline-flex;flex:1 0 auto;width:12px}:host(:not(${checkedState})) *:is(::slotted([slot='checked-indicator']),.checked-indicator){display:none}:host(${checkedState}),:host(${indeterminateState}){border-color:${colorCompoundBrandStroke}}:host(${checkedState}),:host(${indeterminateState}) .indeterminate-indicator{background-color:${colorCompoundBrandBackground}}:host(${indeterminateState}) .indeterminate-indicator{border-radius:${borderRadiusSmall};position:absolute;width:calc(var(--size) / 2);inset:0}:host(${largeState}){--size:20px}:host(${largeState}) ::slotted([slot='checked-indicator']),:host(${largeState}) .checked-indicator{width:16px}:host(${circularState}),:host(${circularState}) .indeterminate-indicator{border-radius:${borderRadiusCircular}}:host([disabled]),:host([disabled]${checkedState}){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}:host([disabled]){cursor:unset}:host([disabled]${indeterminateState}) .indeterminate-indicator{background-color:${colorNeutralStrokeDisabled}}:host([disabled]${checkedState}) .checked-indicator{color:${colorNeutralStrokeDisabled}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
@@ -5904,23 +5917,23 @@ const indeterminateIndicator = html.partial( /* html */
 function checkboxTemplate(options = {}) {
   return html`<template tabindex="${x => !x.disabled ? 0 : void 0}" @click="${(x, c) => x.clickHandler(c.event)}" @input="${(x, c) => x.inputHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @keyup="${(x, c) => x.keyupHandler(c.event)}"><slot name="checked-indicator">${staticallyCompose(options.checkedIndicator)}</slot><slot name="indeterminate-indicator">${staticallyCompose(options.indeterminateIndicator)}</slot></template>`;
 }
-const template$s = checkboxTemplate({
+const template$t = checkboxTemplate({
   checkedIndicator: checkedIndicator$1,
   indeterminateIndicator
 });
 
-const definition$s = Checkbox.compose({
+const definition$t = Checkbox.compose({
   name: `${FluentDesignSystem.prefix}-checkbox`,
-  template: template$s,
-  styles: styles$r
+  template: template$t,
+  styles: styles$s
 });
 
-definition$s.define(FluentDesignSystem.registry);
+definition$t.define(FluentDesignSystem.registry);
 
 class CompoundButton extends Button {}
 
-const styles$q = css`
-  ${styles$v}
+const styles$r = css`
+  ${styles$w}
 
   :host,:host(:is([size])){gap:12px;height:auto;padding-top:14px;padding-inline:12px;padding-bottom:16px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.content{display:flex;flex-direction:column;text-align:start}::slotted([slot='description']){color:${colorNeutralForeground2};line-height:100%;font-size:${fontSizeBase200};font-weight:${fontWeightRegular}}::slotted(svg),:host(${largeState}) ::slotted(svg){font-size:40px;height:40px;width:40px}:host(:hover) ::slotted([slot='description']){color:${colorNeutralForeground2Hover}}:host(:active) ::slotted([slot='description']){color:${colorNeutralForeground2Pressed}}:host(:is(${primaryState},${primaryState}:hover,${primaryState}:active)) ::slotted([slot='description']){color:${colorNeutralForegroundOnBrand}}:host(:is(${subtleState},${subtleState}:hover,${subtleState}:active)) ::slotted([slot='description']),:host(${transparentState}) ::slotted([slot='description']){color:${colorNeutralForeground2}}:host(${transparentState}:hover) ::slotted([slot='description']){color:${colorNeutralForeground2BrandHover}}:host(${transparentState}:active) ::slotted([slot='description']){color:${colorNeutralForeground2BrandPressed}}:host(:is(:disabled,:disabled[appearance],[disabled-focusable],[disabled-focusable][appearance]))
     ::slotted([slot='description']){color:${colorNeutralForegroundDisabled}}:host(${smallState}){padding:8px;padding-bottom:10px}:host(${iconOnlyState}){min-width:52px;max-width:52px;padding:${spacingHorizontalSNudge}}:host(${iconOnlyState}${smallState}){min-width:48px;max-width:48px;padding:${spacingHorizontalXS}}:host(${iconOnlyState}${largeState}){min-width:56px;max-width:56px;padding:${spacingHorizontalS}}:host(${largeState}){padding-top:18px;padding-inline:16px;padding-bottom:20px;font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(${largeState}) ::slotted([slot='description']){font-size:${fontSizeBase300}}`;
@@ -5928,15 +5941,15 @@ const styles$q = css`
 function buttonTemplate(options = {}) {
   return html`<template ?disabled="${x => x.disabled}" tabindex="${x => x.disabled ? -1 : 0}">${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot><slot name="description"></slot></span>${endSlotTemplate(options)}</template>`;
 }
-const template$r = buttonTemplate();
+const template$s = buttonTemplate();
 
-const definition$r = CompoundButton.compose({
+const definition$s = CompoundButton.compose({
   name: `${FluentDesignSystem.prefix}-compound-button`,
-  template: template$r,
-  styles: styles$q
+  template: template$s,
+  styles: styles$r
 });
 
-definition$r.define(FluentDesignSystem.registry);
+definition$s.define(FluentDesignSystem.registry);
 
 var __defProp$m = Object.defineProperty;
 var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
@@ -6061,7 +6074,7 @@ __decorateClass$m([attr({
 applyMixins(CounterBadge, StartEnd);
 
 const dotState = css.partial`:is([state--dot], :state(dot))`;
-const styles$p = css`
+const styles$q = css`
   :host(${roundedState}){border-radius:${borderRadiusMedium}}:host(${roundedState}${tinyState}),:host(${roundedState}${extraSmallState}),:host(${roundedState}${smallState}){border-radius:${borderRadiusSmall}}${badgeSizeStyles}
   ${badgeFilledStyles}
   ${badgeGhostStyles}
@@ -6074,15 +6087,15 @@ function composeTemplate(options = {}) {
     defaultContent: html`${x => x.setCount()}`
   });
 }
-const template$q = composeTemplate();
+const template$r = composeTemplate();
 
-const definition$q = CounterBadge.compose({
+const definition$r = CounterBadge.compose({
   name: `${FluentDesignSystem.prefix}-counter-badge`,
-  template: template$q,
-  styles: styles$p
+  template: template$r,
+  styles: styles$q
 });
 
-definition$q.define(FluentDesignSystem.registry);
+definition$r.define(FluentDesignSystem.registry);
 
 const DialogType = {
   modal: "modal",
@@ -6172,19 +6185,19 @@ __decorateClass$l([attr({
 })], Dialog.prototype, "ariaLabelledby", 2);
 __decorateClass$l([attr], Dialog.prototype, "type", 2);
 
-const template$p = html`<dialog role="${x => x.type === DialogType.alert ? "alertdialog" : "dialog"}" type="${x => x.type}" class="dialog" part="dialog" aria-modal="${x => x.type === DialogType.modal || x.type === DialogType.alert ? "true" : void 0}" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" @click="${(x, c) => x.clickHandler(c.event)}" @cancel="${(x, c) => x.type === DialogType.alert ? c.event.preventDefault() : x.hide()}" ${ref("dialog")}><slot></slot></dialog>`;
+const template$q = html`<dialog role="${x => x.type === DialogType.alert ? "alertdialog" : "dialog"}" type="${x => x.type}" class="dialog" part="dialog" aria-modal="${x => x.type === DialogType.modal || x.type === DialogType.alert ? "true" : void 0}" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" @click="${(x, c) => x.clickHandler(c.event)}" @cancel="${(x, c) => x.type === DialogType.alert ? c.event.preventDefault() : x.hide()}" ${ref("dialog")}><slot></slot></dialog>`;
 
-const styles$o = css`
+const styles$p = css`
   @layer base{:host{--dialog-backdrop:${colorBackgroundOverlay};--dialog-starting-scale:0.85}::backdrop{background:var(--dialog-backdrop,rgba(0,0,0,0.4))}dialog{background:${colorNeutralBackground1};border-radius:${borderRadiusXLarge};border:none;box-shadow:${shadow64};color:${colorNeutralForeground1};max-height:calc(-48px + 100vh);padding:0;width:100%;max-width:600px}:host([type='non-modal']) dialog{inset:0;position:fixed;z-index:2;overflow:auto}}@layer animations{@media (prefers-reduced-motion:no-preference){dialog,::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};opacity:0}::backdrop{transition-timing-function:${curveLinear}}[open],[open]::backdrop{opacity:1}dialog:not([open]){scale:var(--dialog-starting-scale);transition-timing-function:${curveAccelerateMid}}}@starting-style{[open],[open]::backdrop{opacity:0}dialog{scale:var(--dialog-starting-scale)}}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     @layer base{dialog{border:${strokeWidthThin} solid ${colorTransparentStroke}}}`));
 
-const definition$p = Dialog.compose({
+const definition$q = Dialog.compose({
   name: `${FluentDesignSystem.prefix}-dialog`,
-  template: template$p,
-  styles: styles$o
+  template: template$q,
+  styles: styles$p
 });
 
-definition$p.define(FluentDesignSystem.registry);
+definition$q.define(FluentDesignSystem.registry);
 
 var __defProp$k = Object.defineProperty;
 var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
@@ -6219,20 +6232,20 @@ const dismissed16Regular = html.partial(`
       fill="currentColor"
     ></path>
   </svg>`);
-const template$o = html`<div class="title" part="title"><slot name="title"></slot><slot name="title-action"><fluent-button ?hidden=${x => x.noTitleAction || x.parentNode?.type === DialogType.alert} tabindex="0" part="title-action" class="title-action" appearance="transparent" icon-only @click=${x => x.parentNode?.hide()} ${ref("defaultTitleAction")}>${dismissed16Regular}</fluent-button></slot></div><div class="content" part="content"><slot></slot></div><div class="actions" part="actions"><slot name="action"></slot></div>`;
+const template$p = html`<div class="title" part="title"><slot name="title"></slot><slot name="title-action"><fluent-button ?hidden=${x => x.noTitleAction || x.parentNode?.type === DialogType.alert} tabindex="0" part="title-action" class="title-action" appearance="transparent" icon-only @click=${x => x.parentNode?.hide()} ${ref("defaultTitleAction")}>${dismissed16Regular}</fluent-button></slot></div><div class="content" part="content"><slot></slot></div><div class="actions" part="actions"><slot name="action"></slot></div>`;
 
-const styles$n = css`
+const styles$o = css`
   ${display("grid")}
 
   :host{background:${colorNeutralBackground1};box-sizing:border-box;gap:${spacingVerticalS};padding:${spacingVerticalXXL} ${spacingHorizontalXXL};container:dialog-body / inline-size}.title{box-sizing:border-box;align-items:flex-start;background:${colorNeutralBackground1};color:${colorNeutralForeground1};column-gap:8px;display:flex;font-family:${fontFamilyBase};font-size:${fontSizeBase500};font-weight:${fontWeightSemibold};inset-block-start:0;justify-content:space-between;line-height:${lineHeightBase500};margin-block-end:calc(${spacingVerticalS} * -1);margin-block-start:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalS};padding-block-start:${spacingVerticalXXL};position:sticky;z-index:1}.content{box-sizing:border-box;color:${colorNeutralForeground1};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};min-height:32px}.actions{box-sizing:border-box;background:${colorNeutralBackground1};display:flex;flex-direction:column;gap:${spacingVerticalS};inset-block-end:0;margin-block-end:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalXXL};padding-block-start:${spacingVerticalL};position:sticky;z-index:2}:not(:has(:is([slot='title'],[slot='title-action']))) .title:not(:has(.title-action)),:not(:has([slot='action'])) .actions{display:none}@container (min-width:480px){.actions{align-items:center;flex-direction:row;justify-content:flex-end;margin-block-start:calc(${spacingVerticalS} * -1);padding-block-start:${spacingVerticalS}}}`;
 
-const definition$o = DialogBody.compose({
+const definition$p = DialogBody.compose({
   name: `${FluentDesignSystem.prefix}-dialog-body`,
-  template: template$o,
-  styles: styles$n
+  template: template$p,
+  styles: styles$o
 });
 
-definition$o.define(FluentDesignSystem.registry);
+definition$p.define(FluentDesignSystem.registry);
 
 const DividerRole = {
   /**
@@ -6351,21 +6364,21 @@ __decorateClass$j([attr({
 function dividerTemplate() {
   return html`<slot></slot>`;
 }
-const template$n = dividerTemplate();
+const template$o = dividerTemplate();
 
-const styles$m = css`
+const styles$n = css`
   ${display("flex")}
 
   :host{contain:content}:host::after,:host::before{align-self:center;background:${colorNeutralStroke2};box-sizing:border-box;content:'';display:flex;flex-grow:1;height:${strokeWidthThin}}:host(${insetState}){padding:0 12px}:host ::slotted(*){color:${colorNeutralForeground2};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};margin:0;padding:0 12px}:host(${alignStartState})::before,:host(${alignEndState})::after{flex-basis:12px;flex-grow:0;flex-shrink:0}:host(${verticalState}){height:100%;min-height:84px}:host(${verticalState}):empty{min-height:20px}:host(${verticalState}){flex-direction:column;align-items:center}:host(${verticalState}${insetState})::before{margin-top:12px}:host(${verticalState}${insetState})::after{margin-bottom:12px}:host(${verticalState}):empty::before,:host(${verticalState}):empty::after{height:10px;min-height:10px;flex-grow:0}:host(${verticalState})::before,:host(${verticalState})::after{width:${strokeWidthThin};min-height:20px;height:100%}:host(${verticalState}) ::slotted(*){display:flex;flex-direction:column;padding:12px 0;line-height:20px}:host(${verticalState}${alignStartState})::before{min-height:8px}:host(${verticalState}${alignEndState})::after{min-height:8px}:host(${strongState})::before,:host(${strongState})::after{background:${colorNeutralStroke1}}:host(${strongState}) ::slotted(*){color:${colorNeutralForeground1}}:host(${brandState})::before,:host(${brandState})::after{background:${colorBrandStroke1}}:host(${brandState}) ::slotted(*){color:${colorBrandForeground1}}:host(${subtleState})::before,:host(${subtleState})::after{background:${colorNeutralStroke3}}:host(${subtleState}) ::slotted(*){color:${colorNeutralForeground3}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host(${strongState})::before,:host(${strongState})::after,:host(${brandState})::before,:host(${brandState})::after,:host(${subtleState})::before,:host(${subtleState})::after,:host::after,:host::before{background:WindowText;color:WindowText}`));
 
-const definition$n = Divider.compose({
+const definition$o = Divider.compose({
   name: `${FluentDesignSystem.prefix}-divider`,
-  template: template$n,
-  styles: styles$m
+  template: template$o,
+  styles: styles$n
 });
 
-definition$n.define(FluentDesignSystem.registry);
+definition$o.define(FluentDesignSystem.registry);
 
 const DrawerPosition = {
   start: "start",
@@ -6471,7 +6484,7 @@ __decorateClass$i([attr({
 })], Drawer.prototype, "size", 2);
 __decorateClass$i([observable], Drawer.prototype, "dialog", 2);
 
-const styles$l = css`
+const styles$m = css`
   ${display("block")}
 
   :host{--dialog-backdrop:${colorBackgroundOverlay}}:host([type='non-modal']) dialog[open]::backdrop{display:none}:host([type='non-modal']) dialog{position:fixed;top:0;bottom:0}:host([type='inline']){height:100%;width:fit-content}:host([type='inline']) dialog[open]{box-shadow:none;position:relative}:host([size='small']) dialog{width:320px;max-width:320px}:host([size='large']) dialog{width:940px;max-width:940px}:host([size='full']) dialog{width:100%;max-width:100%}:host([position='end']) dialog{margin-inline-start:auto;margin-inline-end:0}dialog{box-sizing:border-box;z-index:var(--drawer-elevation,1000);font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};color:${colorNeutralForeground1};max-width:var(--drawer-width,592px);max-height:100vh;height:100%;margin-inline-start:0;margin-inline-end:auto;border-inline-end-color:${colorTransparentStroke};border-inline-start-color:var(--drawer-separator,${colorTransparentStroke});outline:none;top:0;bottom:0;width:var(--drawer-width,592px);border-radius:0;padding:0;max-width:var(--drawer-width,592px);box-shadow:${shadow64};border:${strokeWidthThin} solid ${colorTransparentStroke};background:${colorNeutralBackground1}}dialog::backdrop{background:var(--dialog-backdrop)}@layer animations{@media (prefers-reduced-motion:no-preference){dialog{transition:display allow-discrete,opacity,overlay allow-discrete,transform;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid}}:host dialog:not([open]){transform:translateX(-100%);transition-timing-function:${curveAccelerateMid}}:host([position='end']) dialog:not([open]){transform:translateX(100%);transition-timing-function:${curveAccelerateMid}}dialog[open]{transform:translateX(0)}dialog::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};background:var(--dialog-backdrop,${colorBackgroundOverlay});opacity:0}dialog[open]::backdrop{opacity:1}dialog::backdrop{transition-timing-function:${curveLinear}}}@starting-style{dialog[open]{transform:translateX(-100%)}:host([position='end']) dialog[open]{transform:translateX(100%)}dialog[open]::backdrop{opacity:0}}}`;
@@ -6479,10 +6492,29 @@ const styles$l = css`
 function drawerTemplate() {
   return html`<dialog class="dialog" part="dialog" role="${x => x.type === "modal" ? "dialog" : x.role}" aria-modal="${x => x.type === "modal" ? "true" : void 0}" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" size="${x => x.size}" position="${x => x.position}" type="${x => x.type}" @click="${(x, c) => x.clickHandler(c.event)}" @cancel="${(x, c) => x.hide()}" ${ref("dialog")}><slot></slot></dialog>`;
 }
-const template$m = drawerTemplate();
+const template$n = drawerTemplate();
 
-const definition$m = Drawer.compose({
+const definition$n = Drawer.compose({
   name: `${FluentDesignSystem.prefix}-drawer`,
+  template: template$n,
+  styles: styles$m
+});
+
+definition$n.define(FluentDesignSystem.registry);
+
+class DrawerBody extends FASTElement {}
+
+const styles$l = css`
+  ${display("grid")}
+  :host{box-sizing:border-box;grid-template-rows:min-content auto min-content;position:relative;height:100%;padding:${spacingHorizontalXL};max-height:100svh}.header{display:flex;justify-content:space-between;align-items:center;${typographySubtitle1Styles}}.footer{display:flex;justify-content:flex-start;gap:${spacingHorizontalM}}`;
+
+function drawerBodyTemplate() {
+  return html`<div class="header" part="header"><slot name="title"></slot><slot name="close"></slot></div><div class="content" part="content"><slot></slot></div><div class="footer" part="footer"><slot name="footer"></slot></div>`;
+}
+const template$m = drawerBodyTemplate();
+
+const definition$m = DrawerBody.compose({
+  name: `${FluentDesignSystem.prefix}-drawer-body`,
   template: template$m,
   styles: styles$l
 });
@@ -6981,7 +7013,7 @@ const template$h = buttonTemplate$1({
 const definition$h = MenuButton.compose({
   name: `${FluentDesignSystem.prefix}-menu-button`,
   template: template$h,
-  styles: styles$v
+  styles: styles$w
 });
 
 definition$h.define(FluentDesignSystem.registry);
@@ -7014,9 +7046,16 @@ var __decorateClass$d = (decorators, target, key, kind) => {
   if (kind && result) __defProp$d(target, key, result);
   return result;
 };
+const menuFilter = () => value => value.nodeType === 1 && value.elementInternals.role === "menu";
 class MenuItem extends FASTElement {
   constructor() {
     super(...arguments);
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    this.elementInternals = this.attachInternals();
     this.role = MenuItemRole.menuitem;
     this.checked = false;
     /**
@@ -7040,6 +7079,7 @@ class MenuItem extends FASTElement {
         case keyArrowLeft:
           if (this.parentElement?.hasAttribute("popover")) {
             this.parentElement.togglePopover(false);
+            this.parentElement.parentElement?.focus();
           }
           return false;
       }
@@ -7082,11 +7122,11 @@ class MenuItem extends FASTElement {
     this.toggleHandler = e => {
       if (e instanceof ToggleEvent && e.newState === "open") {
         this.setAttribute("tabindex", "-1");
-        this.setAttribute("aria-expanded", "true");
+        this.elementInternals.ariaExpanded = "true";
         this.setSubmenuPosition();
       }
       if (e instanceof ToggleEvent && e.newState === "closed") {
-        this.setAttribute("aria-expanded", "false");
+        this.elementInternals.ariaExpanded = "false";
         this.setAttribute("tabindex", "0");
       }
     };
@@ -7137,7 +7177,32 @@ class MenuItem extends FASTElement {
       }
     };
   }
-  checkedChanged(oldValue, newValue) {
+  /**
+   * Handles changes to disabled attribute custom states and element internals
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  disabledChanged(prev, next) {
+    this.elementInternals.ariaDisabled = !!next ? `${next}` : null;
+    toggleState(this.elementInternals, "disabled", next);
+  }
+  /**
+   * Handles changes to role attribute element internals properties
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  roleChanged(prev, next) {
+    this.elementInternals.role = next ?? MenuItemRole.menuitem;
+  }
+  /**
+   * Handles changes to checked attribute custom states and element internals
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  checkedChanged(prev, next) {
+    const checkableMenuItem = this.role !== MenuItemRole.menuitem;
+    this.elementInternals.ariaChecked = checkableMenuItem ? `${!!next}` : null;
+    toggleState(this.elementInternals, "checked", checkableMenuItem ? next : false);
     if (this.$fastController.isConnected) {
       this.$emit("change");
     }
@@ -7153,8 +7218,18 @@ class MenuItem extends FASTElement {
       this.submenu = next[0];
       this.submenu.toggleAttribute("popover", true);
       this.submenu.addEventListener("toggle", this.toggleHandler);
+      this.elementInternals.ariaHasPopup = "menu";
+      toggleState(this.elementInternals, "submenu", true);
+    } else {
+      this.elementInternals.ariaHasPopup = null;
+      toggleState(this.elementInternals, "submenu", false);
     }
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.elementInternals.role = this.role ?? MenuItemRole.menuitem;
+    this.elementInternals.ariaChecked = this.role !== MenuItemRole.menuitem ? `${!!this.checked}` : null;
+  }
 }
 __decorateClass$d([attr({
   mode: "boolean"
@@ -7170,18 +7245,19 @@ __decorateClass$d([observable], MenuItem.prototype, "slottedSubmenu", 2);
 __decorateClass$d([observable], MenuItem.prototype, "submenu", 2);
 applyMixins(MenuItem, StartEnd);
 
+const submenuState = css.partial`:is([state--submenu], :state(submenu))`;
 const styles$g = css`
   ${display("grid")}
 
-  :host{--indent:0;align-items:center;background:${colorNeutralBackground1};border-radius:${borderRadiusMedium};color:${colorNeutralForeground2};contain:layout;cursor:pointer;flex-shrink:0;font:${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};grid-gap:4px;grid-template-columns:20px 20px auto 20px;height:32px;overflow:visible;padding:0 10px}:host(:hover){background:${colorNeutralBackground1Hover};color:${colorNeutralForeground2Hover}}:host([icon]:hover) ::slotted([slot='start']){color:${colorCompoundBrandForeground1Hover}}:host(:active){background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground2Pressed}}:host(:active) ::slotted([slot='start']){color:${colorCompoundBrandForeground1Pressed}}:host([disabled]){background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='start']),:host([disabled]) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}:host(:focus-visible){border-radius:${borderRadiusMedium};outline:2px solid ${colorStrokeFocus2}}.content{white-space:nowrap;flex-grow:1;grid-column:auto / span 2;padding:0 2px}:host(:not([checked])) .indicator,:host(:not([checked])) ::slotted([slot='indicator']),:host(:not([aria-haspopup='menu'])) .submenu-glyph,:host(:not([aria-haspopup='menu'])) ::slotted([slot='submenu-glyph']){display:none}::slotted([slot='end']){color:${colorNeutralForeground3};font:${fontWeightRegular} ${fontSizeBase200} / ${lineHeightBase200} ${fontFamilyBase};white-space:nowrap}:host([data-indent='1']){--indent:1}:host([data-indent='2']){--indent:2;grid-template-columns:20px 20px auto auto}:host([aria-haspopup='menu']){grid-template-columns:20px auto auto 20px}:host([data-indent='2'][aria-haspopup='menu']){grid-template-columns:20px 20px auto auto 20px}.indicator,::slotted([slot='indicator']){grid-column:1 / span 1;width:20px}::slotted([slot='start']){display:inline-flex;grid-column:calc(var(--indent)) / span 1}.content{grid-column:calc(var(--indent) + 1) / span 1}::slotted([slot='end']){grid-column:calc(var(--indent) + 2) / span 1;justify-self:end}.submenu-glyph,::slotted([slot='submenu-glyph']){grid-column:-2 / span 1;justify-self:end}@layer popover{:host{anchor-name:--menu-trigger;position:relative}::slotted([popover]){align-self:start;inset-area:inline-end span-block-end;margin:0;max-height:var(--menu-max-height,auto);position:absolute;position-anchor:--menu-trigger;position-try-options:flip-inline,inset-area(block-start);z-index:1}::slotted([popover]:not(:popover-open)){display:none}::slotted([popover]:popover-open){inset:unset}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host([disabled]),:host([disabled]) ::slotted([slot='start']),:host([disabled]) ::slotted([slot='end']){color:GrayText}`));
+  :host{--indent:0;align-items:center;background:${colorNeutralBackground1};border-radius:${borderRadiusMedium};color:${colorNeutralForeground2};contain:layout;cursor:pointer;flex-shrink:0;font:${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};grid-gap:4px;grid-template-columns:20px 20px auto 20px;height:32px;overflow:visible;padding:0 10px}:host(:hover){background:${colorNeutralBackground1Hover};color:${colorNeutralForeground2Hover}}:host(:active){background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground2Pressed}}:host(:active) ::slotted([slot='start']){color:${colorCompoundBrandForeground1Pressed}}:host(${disabledState}){background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}:host(${disabledState}) ::slotted([slot='start']),:host(${disabledState}) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}:host(:focus-visible){border-radius:${borderRadiusMedium};outline:2px solid ${colorStrokeFocus2}}.content{white-space:nowrap;flex-grow:1;grid-column:auto / span 2;padding:0 2px}:host(:not(${checkedState})) .indicator,:host(:not(${checkedState})) ::slotted([slot='indicator']),:host(:not(${submenuState})) .submenu-glyph,:host(:not(${submenuState})) ::slotted([slot='submenu-glyph']){display:none}::slotted([slot='end']){color:${colorNeutralForeground3};font:${fontWeightRegular} ${fontSizeBase200} / ${lineHeightBase200} ${fontFamilyBase};white-space:nowrap}:host([data-indent='1']){--indent:1}:host([data-indent='2']){--indent:2;grid-template-columns:20px 20px auto auto}:host(${submenuState}){grid-template-columns:20px auto auto 20px}:host([data-indent='2']${submenuState}){grid-template-columns:20px 20px auto auto 20px}.indicator,::slotted([slot='indicator']){grid-column:1 / span 1;width:20px}::slotted([slot='start']){display:inline-flex;grid-column:calc(var(--indent)) / span 1}.content{grid-column:calc(var(--indent) + 1) / span 1}::slotted([slot='end']){grid-column:calc(var(--indent) + 2) / span 1;justify-self:end}.submenu-glyph,::slotted([slot='submenu-glyph']){grid-column:-2 / span 1;justify-self:end}@layer popover{:host{anchor-name:--menu-trigger;position:relative}::slotted([popover]){align-self:start;inset-area:inline-end span-block-end;margin:0;max-height:var(--menu-max-height,auto);position:absolute;position-anchor:--menu-trigger;position-try-options:flip-inline,inset-area(block-start);z-index:1}::slotted([popover]:not(:popover-open)){display:none}::slotted([popover]:popover-open){inset:unset}}`.withBehaviors(forcedColorsStylesheetBehavior(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>`);
 const chevronRight16Filled = html.partial(`<svg class="submenu-glyph" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5.74 3.2a.75.75 0 00-.04 1.06L9.23 8 5.7 11.74a.75.75 0 101.1 1.02l4-4.25a.75.75 0 000-1.02l-4-4.25a.75.75 0 00-1.06-.04z" fill="currentColor"></path></svg>`);
 function menuItemTemplate(options = {}) {
-  return html`<template aria-haspopup="${x => !!x.submenu ? "menu" : void 0}" aria-checked="${x => x.role !== MenuItemRole.menuitem ? x.checked : void 0}" aria-disabled="${x => x.disabled}" aria-expanded="${x => !!x.submenu ? "false" : void 0}" @keydown="${(x, c) => x.handleMenuItemKeyDown(c.event)}" @click="${(x, c) => x.handleMenuItemClick(c.event)}" @mouseover="${(x, c) => x.handleMouseOver(c.event)}" @mouseout="${(x, c) => x.handleMouseOut(c.event)}" @toggle="${(x, c) => x.toggleHandler(c.event)}"><slot name="indicator">${staticallyCompose(options.indicator)}</slot>${startSlotTemplate(options)}<div part="content" class="content"><slot></slot></div>${endSlotTemplate(options)}<slot name="submenu-glyph">${staticallyCompose(options.submenuGlyph)}</slot><slot name="submenu" ${slotted({
+  return html`<template @keydown="${(x, c) => x.handleMenuItemKeyDown(c.event)}" @click="${(x, c) => x.handleMenuItemClick(c.event)}" @mouseover="${(x, c) => x.handleMouseOver(c.event)}" @mouseout="${(x, c) => x.handleMouseOut(c.event)}" @toggle="${(x, c) => x.toggleHandler(c.event)}"><slot name="indicator">${staticallyCompose(options.indicator)}</slot>${startSlotTemplate(options)}<div part="content" class="content"><slot></slot></div>${endSlotTemplate(options)}<slot name="submenu-glyph">${staticallyCompose(options.submenuGlyph)}</slot><slot name="submenu" ${slotted({
     property: "slottedSubmenu",
-    filter: elements("[role='menu']")
+    filter: menuFilter()
   })}></slot></template>`;
 }
 const template$g = menuItemTemplate({
@@ -7207,7 +7283,13 @@ var __decorateClass$c = (decorators, target, key, kind) => {
 };
 const _MenuList = class _MenuList extends FASTElement {
   constructor() {
-    super(...arguments);
+    super();
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    this.elementInternals = this.attachInternals();
     /**
      * The index of the focusable element in the items array
      * defaults to -1
@@ -7287,6 +7369,7 @@ const _MenuList = class _MenuList extends FASTElement {
     this.isFocusableElement = el => {
       return this.isMenuItemElement(el);
     };
+    this.elementInternals.role = "menu";
   }
   itemsChanged(oldValue, newValue) {
     if (this.$fastController.isConnected && this.menuItems !== void 0) {
@@ -7420,7 +7503,7 @@ const styles$f = css`
   :host{flex-direction:column;height:fit-content;max-width:300px;min-width:160px;width:auto;background-color:${colorNeutralBackground1};border:1px solid ${colorTransparentStroke};border-radius:${borderRadiusMedium};box-shadow:${shadow16};padding:4px;row-gap:2px}`;
 
 function menuTemplate$1() {
-  return html`<template slot="${x => x.slot ? x.slot : x.isNestedMenu() ? "submenu" : void 0}" role="menu" @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 ${slotted("items")}></slot></template>`;
 }
 const template$f = menuTemplate$1();
 
@@ -7721,19 +7804,19 @@ class Menu extends FASTElement {
     }
   }
 }
-__decorateClass$b([observable, attr({
+__decorateClass$b([attr({
   attribute: "open-on-hover",
   mode: "boolean"
 })], Menu.prototype, "openOnHover", 2);
-__decorateClass$b([observable, attr({
+__decorateClass$b([attr({
   attribute: "open-on-context",
   mode: "boolean"
 })], Menu.prototype, "openOnContext", 2);
-__decorateClass$b([observable, attr({
+__decorateClass$b([attr({
   attribute: "close-on-scroll",
   mode: "boolean"
 })], Menu.prototype, "closeOnScroll", 2);
-__decorateClass$b([observable, attr({
+__decorateClass$b([attr({
   attribute: "persist-on-item-click",
   mode: "boolean"
 })], Menu.prototype, "persistOnItemClick", 2);
@@ -8655,372 +8738,11 @@ const definition$9 = RatingDisplay.compose({
 
 definition$9.define(FluentDesignSystem.registry);
 
-Orientation;
+const SliderOrientation = Orientation;
 const SliderMode = {
   singleValue: "single-value"
 };
 
-const proxySlotName = "form-associated-proxy";
-const ElementInternalsKey = "ElementInternals";
-const supportsElementInternals = ElementInternalsKey in window && "setFormValue" in window[ElementInternalsKey].prototype;
-const InternalsMap = /* @__PURE__ */new WeakMap();
-function FormAssociated(BaseCtor) {
-  const C = class extends BaseCtor {
-    constructor(...args) {
-      super(...args);
-      /**
-       * Track whether the value has been changed from the initial value
-       */
-      this.dirtyValue = false;
-      /**
-       * The initial value of the form. This value sets the `value` property
-       * only when the `value` property has not been explicitly set.
-       *
-       * @remarks
-       * HTML Attribute: value
-       */
-      this.initialValue = "";
-      /**
-       * Sets the element's disabled state. A disabled element will not be included during form submission.
-       *
-       * @remarks
-       * HTML Attribute: disabled
-       */
-      this.disabled = false;
-      /**
-       * These are events that are still fired by the proxy
-       * element based on user / programmatic interaction.
-       *
-       * The proxy implementation should be transparent to
-       * the app author, so block these events from emitting.
-       */
-      this.proxyEventsToBlock = ["change", "click"];
-      this.proxyInitialized = false;
-      this.required = false;
-      this.initialValue = this.initialValue || "";
-      if (!this.elementInternals) {
-        this.formResetCallback = this.formResetCallback.bind(this);
-      }
-    }
-    /**
-     * Must evaluate to true to enable elementInternals.
-     * Feature detects API support and resolve respectively
-     *
-     * @internal
-     */
-    static get formAssociated() {
-      return supportsElementInternals;
-    }
-    /**
-     * Returns the validity state of the element
-     *
-     * @beta
-     */
-    get validity() {
-      return this.elementInternals ? this.elementInternals.validity : this.proxy.validity;
-    }
-    /**
-     * Retrieve a reference to the associated form.
-     * Returns null if not associated to any form.
-     *
-     * @beta
-     */
-    get form() {
-      return this.elementInternals ? this.elementInternals.form : this.proxy.form;
-    }
-    /**
-     * Retrieve the localized validation message,
-     * or custom validation message if set.
-     *
-     * @beta
-     */
-    get validationMessage() {
-      return this.elementInternals ? this.elementInternals.validationMessage : this.proxy.validationMessage;
-    }
-    /**
-     * Whether the element will be validated when the
-     * form is submitted
-     */
-    get willValidate() {
-      return this.elementInternals ? this.elementInternals.willValidate : this.proxy.willValidate;
-    }
-    /**
-     * A reference to all associated label elements
-     */
-    get labels() {
-      if (this.elementInternals) {
-        return Object.freeze(Array.from(this.elementInternals.labels));
-      } else if (this.proxy instanceof HTMLElement && this.proxy.ownerDocument && this.id) {
-        const parentLabels = this.proxy.labels;
-        const forLabels = Array.from(this.proxy.getRootNode().querySelectorAll(`[for='${this.id}']`));
-        const labels = parentLabels ? forLabels.concat(Array.from(parentLabels)) : forLabels;
-        return Object.freeze(labels);
-      } else {
-        return emptyArray;
-      }
-    }
-    /**
-     * Invoked when the `value` property changes
-     * @param previous - the previous value
-     * @param next - the new value
-     *
-     * @remarks
-     * If elements extending `FormAssociated` implement a `valueChanged` method
-     * They must be sure to invoke `super.valueChanged(previous, next)` to ensure
-     * proper functioning of `FormAssociated`
-     */
-    valueChanged(previous, next) {
-      this.dirtyValue = true;
-      if (this.proxy instanceof HTMLElement) {
-        this.proxy.value = this.value;
-      }
-      this.currentValue = this.value;
-      this.setFormValue(this.value);
-      this.validate();
-    }
-    currentValueChanged() {
-      this.value = this.currentValue;
-    }
-    /**
-     * Invoked when the `initialValue` property changes
-     *
-     * @param previous - the previous value
-     * @param next - the new value
-     *
-     * @remarks
-     * If elements extending `FormAssociated` implement a `initialValueChanged` method
-     * They must be sure to invoke `super.initialValueChanged(previous, next)` to ensure
-     * proper functioning of `FormAssociated`
-     */
-    initialValueChanged(previous, next) {
-      if (!this.dirtyValue) {
-        this.value = this.initialValue;
-        this.dirtyValue = false;
-      }
-    }
-    /**
-     * Invoked when the `disabled` property changes
-     *
-     * @param previous - the previous value
-     * @param next - the new value
-     *
-     * @remarks
-     * If elements extending `FormAssociated` implement a `disabledChanged` method
-     * They must be sure to invoke `super.disabledChanged(previous, next)` to ensure
-     * proper functioning of `FormAssociated`
-     */
-    disabledChanged(previous, next) {
-      if (this.proxy instanceof HTMLElement) {
-        this.proxy.disabled = this.disabled;
-      }
-      Updates.enqueue(() => this.classList.toggle("disabled", this.disabled));
-    }
-    /**
-     * Invoked when the `name` property changes
-     *
-     * @param previous - the previous value
-     * @param next - the new value
-     *
-     * @remarks
-     * If elements extending `FormAssociated` implement a `nameChanged` method
-     * They must be sure to invoke `super.nameChanged(previous, next)` to ensure
-     * proper functioning of `FormAssociated`
-     */
-    nameChanged(previous, next) {
-      if (this.proxy instanceof HTMLElement) {
-        this.proxy.name = this.name;
-      }
-    }
-    /**
-     * Invoked when the `required` property changes
-     *
-     * @param previous - the previous value
-     * @param next - the new value
-     *
-     * @remarks
-     * If elements extending `FormAssociated` implement a `requiredChanged` method
-     * They must be sure to invoke `super.requiredChanged(previous, next)` to ensure
-     * proper functioning of `FormAssociated`
-     */
-    requiredChanged(prev, next) {
-      if (this.proxy instanceof HTMLElement) {
-        this.proxy.required = this.required;
-      }
-      Updates.enqueue(() => this.classList.toggle("required", this.required));
-      this.validate();
-    }
-    /**
-     * The element internals object. Will only exist
-     * in browsers supporting the attachInternals API
-     */
-    get elementInternals() {
-      if (!supportsElementInternals) {
-        return null;
-      }
-      let internals = InternalsMap.get(this);
-      if (!internals) {
-        internals = this.attachInternals();
-        InternalsMap.set(this, internals);
-      }
-      return internals;
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-      super.connectedCallback();
-      this.addEventListener("keypress", this._keypressHandler);
-      if (!this.value) {
-        this.value = this.initialValue;
-        this.dirtyValue = false;
-      }
-      if (!this.elementInternals) {
-        this.attachProxy();
-        if (this.form) {
-          this.form.addEventListener("reset", this.formResetCallback);
-        }
-      }
-    }
-    /**
-     * @internal
-     */
-    disconnectedCallback() {
-      this.proxyEventsToBlock.forEach(name => this.proxy.removeEventListener(name, this.stopPropagation));
-      if (!this.elementInternals && this.form) {
-        this.form.removeEventListener("reset", this.formResetCallback);
-      }
-    }
-    /**
-     * Return the current validity of the element.
-     */
-    checkValidity() {
-      return this.elementInternals ? this.elementInternals.checkValidity() : this.proxy.checkValidity();
-    }
-    /**
-     * Return the current validity of the element.
-     * If false, fires an invalid event at the element.
-     */
-    reportValidity() {
-      return this.elementInternals ? this.elementInternals.reportValidity() : this.proxy.reportValidity();
-    }
-    /**
-     * Set the validity of the control. In cases when the elementInternals object is not
-     * available (and the proxy element is used to report validity), this function will
-     * do nothing unless a message is provided, at which point the setCustomValidity method
-     * of the proxy element will be invoked with the provided message.
-     * @param flags - Validity flags
-     * @param message - Optional message to supply
-     * @param anchor - Optional element used by UA to display an interactive validation UI
-     */
-    setValidity(flags, message, anchor) {
-      if (this.elementInternals) {
-        this.elementInternals.setValidity(flags, message, anchor);
-      } else if (typeof message === "string") {
-        this.proxy.setCustomValidity(message);
-      }
-    }
-    /**
-     * Invoked when a connected component's form or fieldset has its disabled
-     * state changed.
-     * @param disabled - the disabled value of the form / fieldset
-     */
-    formDisabledCallback(disabled) {
-      this.disabled = disabled;
-    }
-    formResetCallback() {
-      this.value = this.initialValue;
-      this.dirtyValue = false;
-    }
-    /**
-     * Attach the proxy element to the DOM
-     */
-    attachProxy() {
-      if (!this.proxyInitialized) {
-        this.proxyInitialized = true;
-        this.proxy.style.display = "none";
-        this.proxyEventsToBlock.forEach(name => this.proxy.addEventListener(name, this.stopPropagation));
-        this.proxy.disabled = this.disabled;
-        this.proxy.required = this.required;
-        if (typeof this.name === "string") {
-          this.proxy.name = this.name;
-        }
-        if (typeof this.value === "string") {
-          this.proxy.value = this.value;
-        }
-        this.proxy.setAttribute("slot", proxySlotName);
-        this.proxySlot = document.createElement("slot");
-        this.proxySlot.setAttribute("name", proxySlotName);
-      }
-      this.shadowRoot?.appendChild(this.proxySlot);
-      this.appendChild(this.proxy);
-    }
-    /**
-     * Detach the proxy element from the DOM
-     */
-    detachProxy() {
-      this.removeChild(this.proxy);
-      this.shadowRoot?.removeChild(this.proxySlot);
-    }
-    /** {@inheritDoc (FormAssociated:interface).validate} */
-    validate(anchor) {
-      if (this.proxy instanceof HTMLElement) {
-        this.setValidity(this.proxy.validity, this.proxy.validationMessage, anchor);
-      }
-    }
-    /**
-     * Associates the provided value (and optional state) with the parent form.
-     * @param value - The value to set
-     * @param state - The state object provided to during session restores and when autofilling.
-     */
-    setFormValue(value, state) {
-      if (this.elementInternals) {
-        this.elementInternals.setFormValue(value, state || value);
-      }
-    }
-    _keypressHandler(e) {
-      switch (e.key) {
-        case keyEnter:
-          if (this.form instanceof HTMLFormElement) {
-            const defaultButton = this.form.querySelector("[type=submit]");
-            defaultButton?.click();
-          }
-          break;
-      }
-    }
-    /**
-     * Used to stop propagation of proxy element events
-     * @param e - Event object
-     */
-    stopPropagation(e) {
-      e.stopPropagation();
-    }
-  };
-  attr({
-    mode: "boolean"
-  })(C.prototype, "disabled");
-  attr({
-    mode: "fromView",
-    attribute: "value"
-  })(C.prototype, "initialValue");
-  attr({
-    attribute: "current-value"
-  })(C.prototype, "currentValue");
-  attr(C.prototype, "name");
-  attr({
-    mode: "boolean"
-  })(C.prototype, "required");
-  observable(C.prototype, "value");
-  return C;
-}
-
-class _Slider extends FASTElement {}
-class FormAssociatedSlider extends FormAssociated(_Slider) {
-  constructor() {
-    super(...arguments);
-    this.proxy = document.createElement("input");
-  }
-}
-
 function convertPixelToPercent(pixelPos, minPosition, maxPosition, direction) {
   let pct = limit(0, 1, (pixelPos - minPosition) / (maxPosition - minPosition));
   if (direction === Direction.rtl) {
@@ -9037,9 +8759,15 @@ var __decorateClass$6 = (decorators, target, key, kind) => {
   if (kind && result) __defProp$6(target, key, result);
   return result;
 };
-class Slider extends FormAssociatedSlider {
+class Slider extends FASTElement {
   constructor() {
-    super(...arguments);
+    super();
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    this.elementInternals = this.attachInternals();
     this.direction = Direction.ltr;
     this.isDragging = false;
     this.trackWidth = 0;
@@ -9047,34 +8775,39 @@ class Slider extends FormAssociatedSlider {
     this.trackHeight = 0;
     this.trackLeft = 0;
     this.trackMinHeight = 0;
-    this.valueTextFormatter = () => null;
-    this.min = 0;
-    this.max = 10;
-    this.orientation = Orientation.horizontal;
+    this.valueTextFormatter = () => "";
+    this.disabled = false;
+    this.min = "";
+    this.max = "";
+    this.step = "";
     this.mode = SliderMode.singleValue;
-    this.keypressHandler = e => {
-      if (this.readOnly || this.disabled) {
+    this.keypressHandler = event => {
+      if (this.disabled) {
         return;
       }
-      if (e.key === keyHome) {
-        e.preventDefault();
-        this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? this.value = `${this.min}` : this.value = `${this.max}`;
-      } else if (e.key === keyEnd) {
-        e.preventDefault();
-        this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? this.value = `${this.max}` : this.value = `${this.min}`;
-      } else if (!e.shiftKey) {
-        switch (e.key) {
-          case keyArrowRight:
-          case keyArrowUp:
-            e.preventDefault();
+      switch (event.key) {
+        case keyHome:
+          event.preventDefault();
+          this.value = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? `${this.minAsNumber}` : `${this.maxAsNumber}`;
+          break;
+        case keyEnd:
+          event.preventDefault();
+          this.value = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? `${this.maxAsNumber}` : `${this.minAsNumber}`;
+          break;
+        case keyArrowRight:
+        case keyArrowUp:
+          if (!event.shiftKey) {
+            event.preventDefault();
             this.increment();
-            break;
-          case keyArrowLeft:
-          case keyArrowDown:
-            e.preventDefault();
+          }
+          break;
+        case keyArrowLeft:
+        case keyArrowDown:
+          if (!event.shiftKey) {
+            event.preventDefault();
             this.decrement();
-            break;
-        }
+          }
+          break;
       }
     };
     this.setupTrackConstraints = () => {
@@ -9088,80 +8821,92 @@ class Slider extends FormAssociatedSlider {
         this.trackWidth = 1;
       }
     };
-    //Remove
     this.setupListeners = (remove = false) => {
       this.addEventListener("keydown", this.keypressHandler);
-      this.addEventListener("mousedown", this.handleMouseDown);
       if (remove) {
         this.removeEventListener("keydown", this.keypressHandler);
-        this.removeEventListener("mousedown", this.handleMouseDown);
       }
     };
-    /**
-     * @internal
-     */
-    this.initialValue = "";
     /**
      *  Handle mouse moves during a thumb drag operation
      *  If the event handler is null it removes the events
      */
-    this.handleThumbMouseDown = event => {
+    this.handleThumbPointerDown = event => {
       const windowFn = event !== null ? window.addEventListener : window.removeEventListener;
-      windowFn("mouseup", this.handleWindowMouseUp);
-      windowFn("mousemove", this.handleMouseMove, {
+      windowFn("pointerup", this.handleWindowPointerUp);
+      windowFn("pointermove", this.handlePointerMove, {
         passive: true
       });
-      windowFn("touchmove", this.handleMouseMove, {
+      windowFn("touchmove", this.handlePointerMove, {
         passive: true
       });
-      windowFn("touchend", this.handleWindowMouseUp);
+      windowFn("touchend", this.handleWindowPointerUp);
       this.isDragging = event !== null;
     };
     /**
      *  Handle mouse moves during a thumb drag operation
      */
-    this.handleMouseMove = e => {
-      if (this.readOnly || this.disabled || e.defaultPrevented) {
+    this.handlePointerMove = event => {
+      if (this.disabled || event.defaultPrevented) {
         return;
       }
-      const sourceEvent = window.TouchEvent && e instanceof TouchEvent ? e.touches[0] : e;
-      const eventValue = this.orientation === Orientation.horizontal ? sourceEvent.pageX - document.documentElement.scrollLeft - this.trackLeft : sourceEvent.pageY - document.documentElement.scrollTop;
+      const sourceEvent = window.TouchEvent && event instanceof TouchEvent ? event.touches[0] : event;
+      const eventValue = this.orientation === Orientation.vertical ? sourceEvent.pageY - document.documentElement.scrollTop : sourceEvent.pageX - document.documentElement.scrollLeft - this.trackLeft;
       this.value = `${this.calculateNewValue(eventValue)}`;
     };
     /**
      * Handle a window mouse up during a drag operation
      */
-    this.handleWindowMouseUp = event => {
+    this.handleWindowPointerUp = () => {
       this.stopDragging();
     };
     this.stopDragging = () => {
       this.isDragging = false;
-      this.handleMouseDown(null);
-      this.handleThumbMouseDown(null);
+      this.handlePointerDown(null);
+      this.handleThumbPointerDown(null);
     };
     /**
      *
-     * @param e - MouseEvent or null. If there is no event handler it will remove the events
+     * @param event - PointerEvent or null. If there is no event handler it will remove the events
      */
-    this.handleMouseDown = e => {
-      if (e === null || !this.disabled && !this.readOnly) {
-        const windowFn = e !== null ? window.addEventListener : window.removeEventListener;
-        const documentFn = e !== null ? document.addEventListener : document.removeEventListener;
-        windowFn("mouseup", this.handleWindowMouseUp);
-        documentFn("mouseleave", this.handleWindowMouseUp);
-        windowFn("mousemove", this.handleMouseMove);
-        if (e) {
+    this.handlePointerDown = event => {
+      if (event === null || !this.disabled) {
+        const windowFn = event !== null ? window.addEventListener : window.removeEventListener;
+        const documentFn = event !== null ? document.addEventListener : document.removeEventListener;
+        windowFn("pointerup", this.handleWindowPointerUp);
+        documentFn("mouseleave", this.handleWindowPointerUp);
+        windowFn("pointermove", this.handlePointerMove);
+        if (event) {
           this.setupTrackConstraints();
-          const controlValue = this.orientation === Orientation.horizontal ? e.pageX - document.documentElement.scrollLeft - this.trackLeft : e.pageY - document.documentElement.scrollTop;
+          const controlValue = this.orientation === Orientation.vertical ? event.pageY - document.documentElement.scrollTop : event.pageX - document.documentElement.scrollLeft - this.trackLeft;
           this.value = `${this.calculateNewValue(controlValue)}`;
         }
       }
     };
+    this.elementInternals.role = "slider";
+    this.elementInternals.ariaOrientation = this.orientation ?? SliderOrientation.horizontal;
   }
-  handleChange(source, propertyName) {
+  /**
+   * A reference to all associated `<label>` elements.
+   *
+   * @public
+   */
+  get labels() {
+    return Object.freeze(Array.from(this.elementInternals.labels));
+  }
+  sizeChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+  handleChange(_, propertyName) {
     switch (propertyName) {
       case "min":
       case "max":
+        this.setSliderPosition(this.direction);
       case "step":
         this.handleStepStyles();
         break;
@@ -9173,74 +8918,257 @@ class Slider extends FormAssociatedSlider {
    */
   handleStepStyles() {
     if (this.step) {
-      const totalSteps = 100 / Math.floor((this.max - this.min) / this.step);
+      const totalSteps = 100 / Math.floor((this.maxAsNumber - this.minAsNumber) / this.stepAsNumber);
       if (this.stepStyles !== void 0) {
         this.$fastController.removeStyles(this.stepStyles);
       }
       this.stepStyles = css`
-        :host{--step-rate:${totalSteps}%;color:blue}`;
+        :host{--step-rate:${totalSteps}%}`;
       this.$fastController.addStyles(this.stepStyles);
     } else if (this.stepStyles !== void 0) {
       this.$fastController.removeStyles(this.stepStyles);
     }
   }
-  // Map to proxy element
-  readOnlyChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.readOnly = this.readOnly;
+  /**
+   * Sets the value of the input when the value attribute changes.
+   *
+   * @param prev - The previous value
+   * @param next - The current value
+   * @internal
+   */
+  initialValueChanged(_, next) {
+    if (this.$fastController.isConnected) {
+      this.value = next;
+    } else {
+      this._value = next;
     }
   }
   /**
-   * The value property, typed as a number.
+   * The element's validity state.
    *
    * @public
+   * @remarks
+   * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
    */
-  get valueAsNumber() {
-    return parseFloat(super.value);
+  get validity() {
+    return this.elementInternals.validity;
   }
-  set valueAsNumber(next) {
-    this.value = next.toString();
+  /**
+   * The element's validation message.
+   *
+   * @public
+   * @remarks
+   * Reflects the {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/validationMessage | `ElemenentInternals.validationMessage`} property.
+   */
+  get validationMessage() {
+    return this.elementInternals.validationMessage;
+  }
+  /**
+   * Whether the element is a candidate for its owning form's constraint validation.
+   *
+   * @public
+   * @remarks
+   * Reflects the {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate | `ElemenentInternals.willValidate`} property.
+   */
+  get willValidate() {
+    return this.elementInternals.willValidate;
+  }
+  /**
+   * Checks the element's validity.
+   * @public
+   * @remarks
+   * Reflects the {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/checkValidity | `ElemenentInternals.checkValidity`} method.
+   */
+  checkValidity() {
+    return this.elementInternals.checkValidity();
+  }
+  /**
+   * Reports the element's validity.
+   * @public
+   * @remarks
+   * Reflects the {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/reportValidity | `ElemenentInternals.reportValidity`} method.
+   */
+  reportValidity() {
+    return this.elementInternals.reportValidity();
+  }
+  /**
+   * Sets a custom validity message.
+   * @public
+   */
+  setCustomValidity(message) {
+    this.setValidity({
+      customError: !!message
+    }, message);
   }
   /**
+   * Sets the validity of the control.
+   *
+   * @param flags - Validity flags to set.
+   * @param message - Optional message to supply. If not provided, the control's `validationMessage` will be used.
+   * @param anchor - Optional anchor to use for the validation message.
+   *
    * @internal
    */
-  valueChanged(previous, next) {
+  setValidity(flags, message, anchor) {
     if (this.$fastController.isConnected) {
-      const nextAsNumber = parseFloat(next);
-      const value = limit(this.min, this.max, this.convertToConstrainedValue(nextAsNumber)).toString();
-      if (value !== next) {
-        this.value = value;
+      if (this.disabled) {
+        this.elementInternals.setValidity({});
         return;
       }
-      super.valueChanged(previous, next);
-      this.setThumbPositionForOrientation(this.direction);
-      this.$emit("change");
+      this.elementInternals.setValidity({
+        customError: !!message,
+        ...flags
+      }, message ?? this.validationMessage, anchor);
+    }
+  }
+  /**
+   * The current value of the input.
+   *
+   * @public
+   */
+  get value() {
+    Observable.track(this, "value");
+    return this._value.toString();
+  }
+  set value(value) {
+    if (!this.$fastController.isConnected) {
+      this._value = value.toString();
+      return;
+    }
+    const nextAsNumber = parseFloat(value);
+    const newValue = limit(this.minAsNumber, this.maxAsNumber, this.convertToConstrainedValue(nextAsNumber)).toString();
+    if (newValue !== value) {
+      this.value = newValue;
+      return;
+    }
+    this._value = value.toString();
+    this.elementInternals.ariaValueNow = this._value;
+    this.elementInternals.ariaValueText = this.valueTextFormatter(this._value);
+    this.setSliderPosition(this.direction);
+    this.$emit("change");
+    this.setFormValue(value);
+    Observable.notify(this, "value");
+  }
+  /**
+   * Resets the form value to its initial value when the form is reset.
+   *
+   * @internal
+   */
+  formResetCallback() {
+    this.value = this.initialValue ?? this.midpoint;
+  }
+  /**
+   * Disabled the component when its associated form is disabled.
+   *
+   * @internal
+   *
+   * @privateRemarks
+   * DO NOT change the `disabled` property or attribute here, because if the
+   * `disabled` attribute is present, reenabling an ancestor `<fieldset>`
+   * element will not reenabling this component.
+   */
+  formDisabledCallback(disabled) {
+    this.setDisabledSideEffect(disabled);
+  }
+  /**
+   * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
+   *
+   * @internal
+   */
+  setFormValue(value, state) {
+    this.elementInternals.setFormValue(value, value ?? state);
+  }
+  /**
+   * The value property, typed as a number.
+   *
+   * @public
+   */
+  get valueAsNumber() {
+    return parseFloat(this.value);
+  }
+  set valueAsNumber(next) {
+    this.value = next.toString();
+  }
+  valueTextFormatterChanged() {
+    if (typeof this.valueTextFormatter === "function") {
+      this.elementInternals.ariaValueText = this.valueTextFormatter(this._value);
+    } else {
+      this.elementInternals.ariaValueText = "";
     }
   }
-  // Map to proxy element.
+  disabledChanged() {
+    this.setDisabledSideEffect(this.disabled);
+  }
   minChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.min = `${this.min}`;
+    this.elementInternals.ariaValueMin = `${this.minAsNumber}`;
+    if (this.$fastController.isConnected && this.minAsNumber > this.valueAsNumber) {
+      this.value = this.min;
     }
-    this.validate();
   }
-  // Map to proxy element.
+  /**
+   * Returns the min property or the default value
+   *
+   * @internal
+   */
+  get minAsNumber() {
+    if (this.min !== void 0) {
+      const parsed = parseFloat(this.min);
+      if (!Number.isNaN(parsed)) {
+        return parsed;
+      }
+    }
+    return 0;
+  }
   maxChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.max = `${this.max}`;
+    this.elementInternals.ariaValueMax = `${this.maxAsNumber}`;
+    if (this.$fastController.isConnected && this.maxAsNumber < this.valueAsNumber) {
+      this.value = this.max;
     }
-    this.validate();
   }
-  stepChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.step = `${this.step}`;
+  /**
+   * Returns the max property or the default value
+   *
+   * @internal
+   */
+  get maxAsNumber() {
+    if (this.max !== void 0) {
+      const parsed = parseFloat(this.max);
+      if (!Number.isNaN(parsed)) {
+        return parsed;
+      }
     }
+    return 100;
+  }
+  stepChanged() {
     this.updateStepMultiplier();
-    this.validate();
+    if (this.$fastController.isConnected) {
+      this.value = this._value;
+    }
   }
-  orientationChanged() {
+  /**
+   * Returns the step property as a number.
+   *
+   * @internal
+   */
+  get stepAsNumber() {
+    if (this.step !== void 0) {
+      const parsed = parseFloat(this.step);
+      if (!Number.isNaN(parsed) && parsed > 0) {
+        return parsed;
+      }
+    }
+    return 1;
+  }
+  orientationChanged(prev, next) {
+    this.elementInternals.ariaOrientation = next ?? Orientation.horizontal;
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
     if (this.$fastController.isConnected) {
-      this.setThumbPositionForOrientation(this.direction);
+      this.setSliderPosition(this.direction);
     }
   }
   /**
@@ -9248,13 +9176,13 @@ class Slider extends FormAssociatedSlider {
    */
   connectedCallback() {
     super.connectedCallback();
-    this.proxy.setAttribute("type", "range");
     this.direction = getDirection(this);
+    this.setDisabledSideEffect(this.disabled);
     this.updateStepMultiplier();
     this.setupTrackConstraints();
     this.setupListeners();
     this.setupDefaultValue();
-    this.setThumbPositionForOrientation(this.direction);
+    this.setSliderPosition(this.direction);
     Observable.getNotifier(this).subscribe(this, "max");
     Observable.getNotifier(this).subscribe(this, "min");
     Observable.getNotifier(this).subscribe(this, "step");
@@ -9276,9 +9204,9 @@ class Slider extends FormAssociatedSlider {
    * @public
    */
   increment() {
-    const newVal = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? Number(this.value) + Number(this.stepValue) : Number(this.value) + Number(this.stepValue);
+    const newVal = this.direction !== Direction.rtl ? Number(this.value) + this.stepAsNumber : Number(this.value) - this.stepAsNumber;
     const incrementedVal = this.convertToConstrainedValue(newVal);
-    const incrementedValString = incrementedVal < Number(this.max) ? `${incrementedVal}` : `${this.max}`;
+    const incrementedValString = incrementedVal < this.maxAsNumber ? `${incrementedVal}` : `${this.maxAsNumber}`;
     this.value = incrementedValString;
   }
   /**
@@ -9287,56 +9215,43 @@ class Slider extends FormAssociatedSlider {
    * @public
    */
   decrement() {
-    const newVal = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? Number(this.value) - Number(this.stepValue) : Number(this.value) - Number(this.stepValue);
+    const newVal = this.direction !== Direction.rtl ? Number(this.value) - Number(this.stepAsNumber) : Number(this.value) + Number(this.stepAsNumber);
     const decrementedVal = this.convertToConstrainedValue(newVal);
-    const decrementedValString = decrementedVal > Number(this.min) ? `${decrementedVal}` : `${this.min}`;
+    const decrementedValString = decrementedVal > this.minAsNumber ? `${decrementedVal}` : `${this.minAsNumber}`;
     this.value = decrementedValString;
   }
-  /**
-   * Gets the actual step value for the slider
-   *
-   */
-  get stepValue() {
-    return this.step === void 0 ? 1 : this.step;
-  }
   /**
    * Places the thumb based on the current value
    *
-   * @public
    * @param direction - writing mode
    */
-  setThumbPositionForOrientation(direction) {
-    const newPct = convertPixelToPercent(Number(this.value), Number(this.min), Number(this.max), direction);
+  setSliderPosition(direction) {
+    const newPct = convertPixelToPercent(parseFloat(this.value), this.minAsNumber, this.maxAsNumber, direction);
     const percentage = (1 - newPct) * 100;
-    if (this.orientation === Orientation.horizontal) {
-      this.position = this.isDragging ? `right: ${percentage}%; transition: none;` : `right: ${percentage}%; transition: all 0.2s ease;`;
-    } else {
-      this.position = this.isDragging ? `top: ${percentage}%; transition: none;` : `top: ${percentage}%; transition: all 0.2s ease;`;
-    }
+    const thumbPosition = `calc(100% - ${percentage}%)`;
+    const trackProgress = !(this.orientation === Orientation.vertical) && direction === Direction.rtl ? `${percentage}%` : `calc(100% - ${percentage}%)`;
+    this.position = `--slider-thumb: ${thumbPosition}; --slider-progress: ${trackProgress}`;
   }
   /**
    * Update the step multiplier used to ensure rounding errors from steps that
    * are not whole numbers
    */
   updateStepMultiplier() {
-    const stepString = this.stepValue + "";
-    const decimalPlacesOfStep = !!(this.stepValue % 1) ? stepString.length - stepString.indexOf(".") - 1 : 0;
+    const stepString = this.stepAsNumber + "";
+    const decimalPlacesOfStep = !!(this.stepAsNumber % 1) ? stepString.length - stepString.indexOf(".") - 1 : 0;
     this.stepMultiplier = Math.pow(10, decimalPlacesOfStep);
   }
   get midpoint() {
-    return `${this.convertToConstrainedValue((this.max + this.min) / 2)}`;
+    return `${this.convertToConstrainedValue((this.maxAsNumber + this.minAsNumber) / 2)}`;
   }
   setupDefaultValue() {
-    if (typeof this.value === "string") {
-      if (this.value.length === 0) {
-        this.initialValue = this.midpoint;
-      } else {
-        const value = parseFloat(this.value);
-        if (!Number.isNaN(value) && (value < this.min || value > this.max)) {
-          this.value = this.midpoint;
-        }
-      }
+    if (!this._value) {
+      this.value = this.initialValue ?? this.midpoint;
+    }
+    if (!Number.isNaN(this.valueAsNumber) && (this.valueAsNumber < this.minAsNumber || this.valueAsNumber > this.maxAsNumber)) {
+      this.value = this.midpoint;
     }
+    this.elementInternals.ariaValueNow = this.value;
   }
   /**
    * Calculate the new value based on the given raw pixel value.
@@ -9348,26 +9263,43 @@ class Slider extends FormAssociatedSlider {
    */
   calculateNewValue(rawValue) {
     this.setupTrackConstraints();
-    const newPosition = convertPixelToPercent(rawValue, this.orientation === Orientation.horizontal ? this.trackMinWidth : this.trackMinHeight, this.orientation === Orientation.horizontal ? this.trackWidth : this.trackHeight, this.direction);
-    const newValue = (this.max - this.min) * newPosition + this.min;
+    const newPosition = convertPixelToPercent(rawValue, this.orientation === Orientation.vertical ? this.trackMinHeight : this.trackMinWidth, this.orientation === Orientation.vertical ? this.trackHeight : this.trackWidth, this.direction);
+    const newValue = (this.maxAsNumber - this.minAsNumber) * newPosition + this.minAsNumber;
     return this.convertToConstrainedValue(newValue);
   }
   convertToConstrainedValue(value) {
     if (isNaN(value)) {
-      value = this.min;
+      value = this.minAsNumber;
     }
-    let constrainedValue = value - this.min;
-    const roundedConstrainedValue = Math.round(constrainedValue / this.stepValue);
-    const remainderValue = constrainedValue - roundedConstrainedValue * (this.stepMultiplier * this.stepValue) / this.stepMultiplier;
-    constrainedValue = remainderValue >= Number(this.stepValue) / 2 ? constrainedValue - remainderValue + Number(this.stepValue) : constrainedValue - remainderValue;
-    return constrainedValue + this.min;
+    let constrainedValue = value - this.minAsNumber;
+    const roundedConstrainedValue = Math.round(constrainedValue / this.stepAsNumber);
+    const remainderValue = constrainedValue - roundedConstrainedValue * (this.stepMultiplier * this.stepAsNumber) / this.stepMultiplier;
+    constrainedValue = remainderValue >= Number(this.stepAsNumber) / 2 ? constrainedValue - remainderValue + Number(this.stepAsNumber) : constrainedValue - remainderValue;
+    return constrainedValue + this.minAsNumber;
+  }
+  /**
+   * Makes sure the side effects of set up when the disabled state changes.
+   */
+  setDisabledSideEffect(disabled) {
+    if (!this.$fastController.isConnected) {
+      return;
+    }
+    this.elementInternals.ariaDisabled = disabled.toString();
+    this.tabIndex = disabled ? -1 : 0;
   }
 }
+/**
+ * The form-associated flag.
+ * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+ *
+ * @public
+ */
+Slider.formAssociated = true;
 __decorateClass$6([attr], Slider.prototype, "size", 2);
 __decorateClass$6([attr({
-  attribute: "readonly",
-  mode: "boolean"
-})], Slider.prototype, "readOnly", 2);
+  attribute: "value",
+  mode: "fromView"
+})], Slider.prototype, "initialValue", 2);
 __decorateClass$6([observable], Slider.prototype, "direction", 2);
 __decorateClass$6([observable], Slider.prototype, "isDragging", 2);
 __decorateClass$6([observable], Slider.prototype, "position", 2);
@@ -9378,28 +9310,33 @@ __decorateClass$6([observable], Slider.prototype, "trackLeft", 2);
 __decorateClass$6([observable], Slider.prototype, "trackMinHeight", 2);
 __decorateClass$6([observable], Slider.prototype, "valueTextFormatter", 2);
 __decorateClass$6([attr({
-  converter: nullableNumberConverter
+  mode: "boolean"
+})], Slider.prototype, "disabled", 2);
+__decorateClass$6([attr({
+  converter: numberLikeStringConverter
 })], Slider.prototype, "min", 2);
 __decorateClass$6([attr({
-  converter: nullableNumberConverter
+  converter: numberLikeStringConverter
 })], Slider.prototype, "max", 2);
 __decorateClass$6([attr({
-  converter: nullableNumberConverter
+  converter: numberLikeStringConverter
 })], Slider.prototype, "step", 2);
 __decorateClass$6([attr], Slider.prototype, "orientation", 2);
 __decorateClass$6([attr], Slider.prototype, "mode", 2);
 
 const styles$8 = css`
-  ${display("inline-grid")} :host{--thumb-size:18px;--thumb-padding:3px;--thumb-translate:calc(var(--thumb-size) * -0.5 + var(--track-width) / 2);--track-overhang:-2px;--track-width:4px;--fast-slider-height:calc(var(--thumb-size) * 10);--slider-direction:90deg;align-items:center;box-sizing:border-box;outline:none;cursor:pointer;user-select:none;border-radius:${borderRadiusSmall};touch-action:pan-y;min-width:calc(var(--thumb-size) * 1px);width:100%}:host([size='small']){--thumb-size:14px;--track-width:2px;--thumb-padding:3px}:host([orientation='vertical']){--slider-direction:0deg;height:160px;min-height:var(--thumb-size);touch-action:pan-x;padding:8px 0;width:auto;min-width:auto}:host([disabled]:hover){cursor:initial}:host(:focus-visible){box-shadow:0 0 0 2pt ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}.thumb-cursor:focus{outline:0}.thumb-container{position:absolute;height:var(--thumb-size);width:var(--thumb-size);transition:all 0.2s ease}.thumb-container{transform:translateX(calc(var(--thumb-size) * 0.5)) translateY(calc(var(--thumb-translate) * -1.5))}:host([size='small']) .thumb-container{transform:translateX(calc(var(--thumb-size) * 0.5)) translateY(calc(var(--thumb-translate) * -1.35))}:host([orientation='vertical']) .thumb-container{transform:translateX(calc(var(--thumb-translate) * -1.5)) translateY(calc(var(--thumb-size) * -0.5))}:host([orientation='vertical'][size='small']) .thumb-container{transform:translateX(calc(var(--thumb-translate) * -1.35)) translateY(calc(var(--thumb-size) * -0.5))}.thumb-cursor{height:var(--thumb-size);width:var(--thumb-size);background-color:${colorBrandBackground};border-radius:${borderRadiusCircular};box-shadow:inset 0 0 0 var(--thumb-padding) ${colorNeutralBackground1},0 0 0 1px ${colorNeutralStroke1}}.thumb-cursor:hover{background-color:${colorCompoundBrandBackgroundHover}}.thumb-cursor:active{background-color:${colorCompoundBrandBackgroundPressed}}:host([disabled]) .thumb-cursor{background-color:${colorNeutralForegroundDisabled};box-shadow:inset 0 0 0 var(--thumb-padding) ${colorNeutralBackground1},0 0 0 1px ${colorNeutralStrokeDisabled}}.positioning-region{position:relative;display:grid}:host([orientation='horizontal']) .positioning-region{margin:0 8px;grid-template-rows:var(--thumb-size) var(--thumb-size)}:host([orientation='vertical']) .positioning-region{margin:8px 0;height:100%;grid-template-columns:var(--thumb-size) var(--thumb-size)}.track{align-self:start;position:absolute;background-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};overflow:hidden}:host([step]) .track::after{content:'';position:absolute;border-radius:${borderRadiusMedium};width:100%;inset:0 2px;background-image:repeating-linear-gradient(
+  ${display("inline-grid")}
+
+  :host{--thumb-size:20px;--track-margin-inline:calc(var(--thumb-size) / 2);--track-size:4px;--track-overhang:calc(var(--track-size) / -2);--slider-direction:90deg;--border-radius:${borderRadiusMedium};--step-marker-inset:var(--track-overhang) -1px;position:relative;align-items:center;justify-content:center;box-sizing:border-box;outline:none;user-select:none;touch-action:none;min-width:120px;min-height:32px;grid-template-rows:1fr var(--thumb-size) 1fr;grid-template-columns:var(--track-margin-inline) 1fr var(--track-margin-inline)}:host(:not(:disabled)){cursor:pointer}:host(:dir(rtl)){--slider-direction:-90deg}:host(${smallState}){--thumb-size:16px;--track-overhang:-1px;--track-size:2px;--border-radius:${borderRadiusSmall}}:host(${verticalState}){--slider-direction:0deg;--step-marker-inset:-1px var(--track-overhang);min-height:120px;grid-template-rows:var(--track-margin-inline) 1fr var(--track-margin-inline);grid-template-columns:1fr var(--thumb-size) 1fr;width:unset;min-width:32px;justify-items:center}:host(:not([slot='input']):focus-visible){box-shadow:0 0 0 2pt ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}.track{position:relative;background-color:${colorNeutralStrokeAccessible};border-radius:var(--border-radius);grid-row:2 / 2;grid-column:2 / 2;width:100%;height:var(--track-size);forced-color-adjust:none}:host(${verticalState}) .track{top:var(--track-overhang);bottom:var(--track-overhang);width:var(--track-size);height:100%}.track::before{content:'';position:absolute;height:100%;border-radius:inherit;inset-inline-start:0;width:var(--slider-progress)}:host(${verticalState}) .track::before{width:100%;bottom:0;height:var(--slider-progress)}:host([step]) .track::after{content:'';position:absolute;border-radius:inherit;inset:var(--step-marker-inset);background-image:repeating-linear-gradient(
       var(--slider-direction),#0000 0%,#0000 calc(var(--step-rate) - 1px),${colorNeutralBackground1} calc(var(--step-rate) - 1px),${colorNeutralBackground1} var(--step-rate)
-    )}:host([orientation='vertical'][step]) .track::after{inset:-2px 0}:host([disabled]) .track{background-color:${colorNeutralBackgroundDisabled}}:host([orientation='horizontal']) .track{right:var(--track-overhang);left:var(--track-overhang);align-self:start;height:var(--track-width);grid-row:2 / auto}:host([orientation='vertical']) .track{top:var(--track-overhang);bottom:var(--track-overhang);width:var(--track-width);height:100%;grid-column:2 / auto}.track-start{background-color:${colorCompoundBrandBackground};position:absolute;height:100%;left:0;border-radius:${borderRadiusMedium}}:host([disabled]) .track-start{background-color:${colorNeutralForegroundDisabled}}:host(:hover) .track-start{background-color:${colorCompoundBrandBackgroundHover}}:host([disabled]:hover) .track-start{background-color:${colorNeutralForegroundDisabled}}.track-start:active{background-color:${colorCompoundBrandBackgroundPressed}}:host([orientation='vertical']) .track-start{height:auto;width:100%;bottom:0}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    .track:hover,.track:active,.track{background:WindowText}.thumb-cursor:hover,.thumb-cursor:active,.thumb-cursor{background:ButtonText}:host(:hover) .track-start,.track-start:active,.track-start{background:Highlight}`));
+    )}.thumb-container{position:absolute;grid-row:2 / 2;grid-column:2 / 2;transform:translateX(-50%);left:var(--slider-thumb)}:host(${verticalState}) .thumb-container{transform:translateY(50%);left:unset;bottom:var(--slider-thumb)}:host(:not(:active)) :is(.thumb-container,.track::before){transition:all 0.2s ease}.thumb{width:var(--thumb-size);height:var(--thumb-size);border-radius:${borderRadiusCircular};box-shadow:0 0 0 calc(var(--thumb-size) * 0.2) ${colorNeutralBackground1} inset;border:calc(var(--thumb-size) * 0.05) solid ${colorNeutralStroke1};box-sizing:border-box}.thumb,.track::before{background-color:${colorCompoundBrandBackground}}:host(:hover) .thumb,:host(:hover) .track::before{background-color:${colorCompoundBrandBackgroundHover}}:host(:active) .thumb,:host(:active) .track::before{background-color:${colorCompoundBrandBackgroundPressed}}:host(:disabled) .track{background-color:${colorNeutralBackgroundDisabled}}:host(:disabled) .thumb,:host(:disabled) .track::before{background-color:${colorNeutralForegroundDisabled}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    .track:hover,.track:active,.track{background:WindowText}.thumb:hover,.thumb:active,.thumb{background:ButtonText}:host(:hover) .track::before,:host(:active) .track::before,.track::before{background:Highlight}`));
 
 function sliderTemplate(options = {}) {
-  return html`<template role="slider" tabindex="${x => x.disabled ? null : 0}" aria-valuetext="${x => x.valueTextFormatter(x.value)}" aria-valuenow="${x => x.value}" aria-valuemin="${x => x.min}" aria-valuemax="${x => x.max}" aria-disabled="${x => x.disabled ? true : void 0}" aria-readonly="${x => x.readOnly ? true : void 0}" aria-orientation="${x => x.orientation}" class="${x => x.orientation}"><div part="positioning-region" class="positioning-region"><div ${ref("track")} part="track-container" class="track"><slot name="track"></slot><div part="track-start" class="track-start" style="${x => x.position}"><slot name="track-start"></slot></div></div><slot></slot><div ${ref("thumb")} part="thumb-container" class="thumb-container" style="${x => x.position}" @mousedown="${(x, c) => x.handleThumbMouseDown(c.event)}" @touchstart="${(x, c) => x.handleThumbMouseDown(c.event)}"><slot name="thumb">${staticallyCompose(options.thumb)}</slot></div></div></template>`;
+  return html`<template tabindex="${x => x.disabled ? null : 0}" @pointerdown="${(x, c) => x.handlePointerDown(c.event)}"><div ${ref("track")} part="track-container" class="track" style="${x => x.position}"></div><div ${ref("thumb")} part="thumb-container" class="thumb-container" style="${x => x.position}" @pointerdown="${(x, c) => x.handleThumbPointerDown(c.event)}"><slot name="thumb">${staticallyCompose(options.thumb)}</slot></div></template>`;
 }
 const template$8 = sliderTemplate({
-  thumb: `<div class="thumb-cursor"></div>`
+  thumb: `<div class="thumb"></div>`
 });
 
 const definition$8 = Slider.compose({
@@ -10621,7 +10558,7 @@ __decorateClass([attr({
 })], ToggleButton.prototype, "mixed", 2);
 
 const styles = css`
-  ${styles$v}
+  ${styles$w}
 
   :host(${pressedState}){border-color:${colorNeutralStroke1};background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground1};border-width:${strokeWidthThin}}:host(${pressedState}:hover){border-color:${colorNeutralStroke1Hover};background-color:${colorNeutralBackground1Hover}}:host(${pressedState}:active){border-color:${colorNeutralStroke1Pressed};background-color:${colorNeutralBackground1Pressed}}:host(${pressedState}${primaryState}){border-color:transparent;background-color:${colorBrandBackgroundSelected};color:${colorNeutralForegroundOnBrand}}:host(${pressedState}${primaryState}:hover){background-color:${colorBrandBackgroundHover}}:host(${pressedState}${primaryState}:active){background-color:${colorBrandBackgroundPressed}}:host(${pressedState}${subtleState}){border-color:transparent;background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host(${pressedState}${subtleState}:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}:host(${pressedState}${subtleState}:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}:host(${pressedState}${outlineState}),:host(${pressedState}${transparentState}){background-color:${colorTransparentBackgroundSelected}}:host(${pressedState}${outlineState}:hover),:host(${pressedState}${transparentState}:hover){background-color:${colorTransparentBackgroundHover}}:host(${pressedState}${outlineState}:active),:host(${pressedState}${transparentState}:active){background-color:${colorTransparentBackgroundPressed}}:host(${pressedState}${transparentState}){border-color:transparent;color:${colorNeutralForeground2BrandSelected}}:host(${pressedState}${transparentState}:hover){color:${colorNeutralForeground2BrandHover}}:host(${pressedState}${transparentState}:active){color:${colorNeutralForeground2BrandPressed}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host(${pressedState}),:host(${pressedState}${primaryState}),:host(${pressedState}${subtleState}),:host(${pressedState}${outlineState}),:host(${pressedState}${transparentState}){background:SelectedItem;color:SelectedItemText}`));