@fluentui/web-components 3.0.0-beta.41 → 3.0.0-beta.43

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))`;
@@ -5143,6 +5155,7 @@ class Button extends FASTElement {
   constructor() {
     super();
     this.disabledFocusable = false;
+    this.tabIndex = 0;
     /**
      * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
@@ -5399,6 +5412,11 @@ __decorateClass$o([attr({
   attribute: "disabled-focusable",
   mode: "boolean"
 })], Button.prototype, "disabledFocusable", 2);
+__decorateClass$o([attr({
+  attribute: "tabindex",
+  mode: "fromView",
+  converter: nullableNumberConverter
+})], Button.prototype, "tabIndex", 2);
 __decorateClass$o([attr({
   attribute: "formaction"
 })], Button.prototype, "formAction", 2);
@@ -5430,7 +5448,7 @@ __decorateClass$o([attr], Button.prototype, "value", 2);
 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>`;
+  return html`<template tabindex="${x => x.disabled ? null : x.tabIndex ?? 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$u = buttonTemplate$1();
 
@@ -5927,7 +5945,7 @@ const styles$r = css`
     ::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}}`;
 
 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>`;
+  return html`<template ?disabled="${x => x.disabled}" tabindex="${x => x.disabled ? null : x.tabIndex ?? 0}">${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot><slot name="description"></slot></span>${endSlotTemplate(options)}</template>`;
 }
 const template$s = buttonTemplate();
 
@@ -7237,7 +7255,7 @@ 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(: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{--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]){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}@supports not (anchor-name:--menu-trigger){::slotted([popover]){align-self:start}}}`.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>`);
@@ -8726,372 +8744,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) {
@@ -9108,9 +8765,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;
@@ -9118,34 +8781,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 = () => {
@@ -9159,80 +8827,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;
@@ -9244,74 +8924,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 = "";
+    }
+  }
+  disabledChanged() {
+    this.setDisabledSideEffect(this.disabled);
   }
-  // Map to proxy element.
   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;
+    }
+  }
+  /**
+   * 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;
+      }
     }
-    this.validate();
+    return 0;
   }
-  // Map to proxy element.
   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);
     }
   }
   /**
@@ -9319,13 +9182,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");
@@ -9347,9 +9210,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;
   }
   /**
@@ -9358,56 +9221,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.
@@ -9419,26 +9269,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);
@@ -9449,28 +9316,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({