agnosticui-core 2.0.0-alpha.2

package/dist/components/Slider/core/_Slider.js

@@ -0,0 +1,916 @@
+import { LitElement as y, css as $, html as d } from "lit";
+import { n as h } from "../../../property-CemaeiRl.js";
+import { r as _ } from "../../../state-CovhUvdr.js";
+import { e as f } from "../../../query-BykXNUlT.js";
+import { o as c } from "../../../if-defined-C8i28hSj.js";
+import { createFormControlIds as x, isHorizontalLabel as b, buildAriaDescribedBy as k } from "../../../shared/form-control-utils.js";
+import { formControlStyles as w } from "../../../shared/form-control-styles.js";
+var T = Object.defineProperty, s = (v, t, e, o) => {
+  for (var i = void 0, r = v.length - 1, l; r >= 0; r--)
+    (l = v[r]) && (i = l(t, e, i) || i);
+  return i && T(t, e, i), i;
+};
+const g = class g extends y {
+  // ~60fps
+  constructor() {
+    super(), this._activeDrag = null, this._lastRenderTime = 0, this._renderThrottleMs = 16, this.labelPosition = "top", this._activeThumb = null, this._focusedThumb = null, this._draggingThumb = null, this._internals = this.attachInternals();
+    const t = x("slider");
+    this._sliderId = this.id || t.inputId, this._minInputId = `${t.inputId}-min`, this._maxInputId = `${t.inputId}-max`, this._labelId = t.labelId, this._helperId = t.helperId, this._errorId = t.errorId, this.label = "", this.labelHidden = !1, this.noLabel = !1, this.ariaLabel = "", this.min = 0, this.max = 100, this.step = 1, this.value = 0, this.dual = !1, this.vertical = !1, this.filled = !1, this.monochrome = !1, this.size = "default", this.disabled = !1, this.readonly = !1, this.required = !1, this.invalid = !1, this.errorMessage = "", this.helpText = "", this.name = "", this.showTooltip = !1, this.showTicks = !1, this.tickStep = 25, this._handlePointerMove = this._handlePointerMove.bind(this), this._handlePointerUp = this._handlePointerUp.bind(this);
+  }
+  /**
+   * Form value handling
+   */
+  get form() {
+    return this._internals.form;
+  }
+  get validity() {
+    return this._internals.validity;
+  }
+  get validationMessage() {
+    return this._internals.validationMessage;
+  }
+  get willValidate() {
+    return this._internals.willValidate;
+  }
+  checkValidity() {
+    return this._internals.checkValidity();
+  }
+  reportValidity() {
+    return this._internals.reportValidity();
+  }
+  /**
+   * Property validation
+   */
+  willUpdate(t) {
+    (t.has("min") || t.has("max")) && this.min >= this.max && (console.warn(`ag-slider: min (${this.min}) must be less than max (${this.max}). Adjusting values.`), t.has("min") ? this.max = this.min + 1 : this.min = this.max - 1), t.has("step") && this.step !== void 0 && this.step <= 0 && (console.warn(`ag-slider: step (${this.step}) must be greater than 0. Using default step of 1.`), this.step = 1), (t.has("value") || t.has("min") || t.has("max")) && this._clampAndValidateValue();
+  }
+  /**
+   * Clamp current value to min/max and validate
+   */
+  _clampAndValidateValue() {
+    if (this.dual && Array.isArray(this.value)) {
+      const t = this._clampValue(this.value[0]), e = this._clampValue(this.value[1]);
+      (t !== this.value[0] || e !== this.value[1]) && (this.value = [t, e]);
+    } else if (!this.dual && typeof this.value == "number") {
+      const t = this._clampValue(this.value);
+      t !== this.value && (this.value = t);
+    }
+  }
+  /**
+   * Update form value when component value changes
+   */
+  _updateFormValue() {
+    const t = new FormData();
+    this.name ? (this.dual && Array.isArray(this.value) ? (t.append(this.name, this.value[0].toString()), t.append(this.name, this.value[1].toString())) : t.append(this.name, this.value.toString()), this._internals.setFormValue(t)) : this._internals.setFormValue(null), this._internals.setValidity({});
+  }
+  /**
+   * Get current values as array for consistent handling
+   */
+  get _values() {
+    return Array.isArray(this.value) ? this.value : [this.min, this.value];
+  }
+  /**
+   * Get percentage position for a value
+   */
+  _getPercentage(t) {
+    return (t - this.min) / (this.max - this.min) * 100;
+  }
+  /**
+   * Get value from percentage
+   */
+  _getValueFromPercentage(t) {
+    const e = this.min + t / 100 * (this.max - this.min);
+    return this.step ? Math.round(e / this.step) * this.step : e;
+  }
+  /**
+   * Get value from pointer position
+   */
+  _getValueFromPointer(t, e, o) {
+    let i;
+    return this.vertical ? i = (o.bottom - e) / o.height * 100 : i = (t - o.left) / o.width * 100, i = Math.max(0, Math.min(100, i)), this._getValueFromPercentage(i);
+  }
+  /**
+   * Clamp value to min/max and step
+   */
+  _clampValue(t) {
+    let e = Math.max(this.min, Math.min(this.max, t));
+    return this.step && (e = Math.round(e / this.step) * this.step), Number(e.toFixed(10));
+  }
+  /**
+   * Announce value to screen readers with enhanced context
+   */
+  _announceValue(t) {
+    if (!this._liveRegion) return;
+    let e = "";
+    this.dual && Array.isArray(t) ? e = `Range selected from ${t[0]} to ${t[1]}` : !this.dual && typeof t == "number" && (e = `Value set to ${t}`), setTimeout(() => {
+      this._liveRegion && (this._liveRegion.textContent = e, setTimeout(() => {
+        this._liveRegion && (this._liveRegion.textContent = "");
+      }, 100));
+    }, 50);
+  }
+  /**
+   * Handle thumb pointer down (start of drag)
+   */
+  _handleThumbPointerDown(t, e) {
+    if (this.disabled || this.readonly) return;
+    const o = this._track;
+    if (!o) return;
+    t.preventDefault(), t.stopPropagation(), t.currentTarget.setPointerCapture(t.pointerId);
+    const r = o.getBoundingClientRect(), l = this._values;
+    this._activeDrag = {
+      thumb: e,
+      startX: t.clientX,
+      startY: t.clientY,
+      startValue: e === "min" ? l[0] : l[1],
+      trackRect: r
+    }, this._draggingThumb = e, document.addEventListener("pointermove", this._handlePointerMove), document.addEventListener("pointerup", this._handlePointerUp), document.addEventListener("pointercancel", this._handlePointerUp);
+  }
+  /**
+   * Handle pointer move during drag (with throttling)
+   */
+  _handlePointerMove(t) {
+    if (!this._activeDrag || this.disabled || this.readonly) return;
+    const e = Date.now();
+    if (e - this._lastRenderTime < this._renderThrottleMs)
+      return;
+    this._lastRenderTime = e, t.preventDefault();
+    const { thumb: o, trackRect: i } = this._activeDrag, r = this._getValueFromPointer(t.clientX, t.clientY, i);
+    if (this.dual) {
+      const l = this._values;
+      if (o === "min") {
+        const u = this.step, p = l[1] - u, m = [Math.min(r, p), l[1]];
+        this._updateValue(m, "input");
+      } else if (o === "max") {
+        const u = this.step, p = l[0] + u, n = Math.max(r, p), m = [l[0], n];
+        this._updateValue(m, "input");
+      }
+    } else
+      this._updateValue(r, "input");
+  }
+  /**
+   * Handle pointer up (end of drag)
+   */
+  _handlePointerUp(t) {
+    if (!this._activeDrag) return;
+    t.preventDefault(), this.shadowRoot?.querySelector(`.ag-slider__thumb[part*="${this._activeDrag.thumb}"]`)?.releasePointerCapture(t.pointerId), this._activeDrag && this._updateValue(this.value, "change"), this._activeDrag = null, this._draggingThumb = null, document.removeEventListener("pointermove", this._handlePointerMove), document.removeEventListener("pointerup", this._handlePointerUp), document.removeEventListener("pointercancel", this._handlePointerUp);
+  }
+  /**
+   * Update value and dispatch events
+   */
+  _updateValue(t, e = "change") {
+    if (this.readonly || this.disabled)
+      return;
+    if (this.dual && Array.isArray(t)) {
+      t = [this._clampValue(t[0]), this._clampValue(t[1])];
+      const i = this.step;
+      t[1] - t[0] < i && (t[0] === this._values[0] ? t[0] = t[1] - i : t[1] = t[0] + i), t[0] > t[1] && (t = [t[1], t[0]]);
+    } else !this.dual && typeof t == "number" && (t = this._clampValue(t));
+    this.value = t, this._updateFormValue(), e === "input" && this._draggingThumb && this._announceValue(t);
+    const o = new CustomEvent(e, {
+      bubbles: !0,
+      composed: !0,
+      detail: { value: t }
+    });
+    this.dispatchEvent(o), e === "change" && this.onChange ? this.onChange(o) : e === "input" && this.onInput && this.onInput(o);
+  }
+  /**
+   * Handle input events from native range inputs
+   */
+  _handleInput(t, e) {
+    if (this._activeDrag)
+      return;
+    if (this.readonly) {
+      t.preventDefault();
+      return;
+    }
+    const o = t.target, i = parseFloat(o.value);
+    if (this.dual) {
+      const r = this._values, l = e === "min" ? [i, r[1]] : [r[0], i];
+      this._updateValue(l, "input");
+    } else
+      this._updateValue(i, "input");
+  }
+  /**
+   * Handle change events from native range inputs
+   */
+  _handleChange(t, e) {
+    if (this._activeDrag)
+      return;
+    if (this.readonly) {
+      t.preventDefault();
+      return;
+    }
+    const o = t.target, i = parseFloat(o.value);
+    if (this.dual) {
+      const r = this._values, l = e === "min" ? [i, r[1]] : [r[0], i];
+      this._updateValue(l, "change");
+    } else
+      this._updateValue(i, "change");
+  }
+  /**
+   * Handle focus events
+   */
+  _handleFocus(t, e) {
+    this._focusedThumb = e, this.dispatchEvent(new FocusEvent("focus", {
+      bubbles: !0,
+      composed: !0
+    })), this.onFocus && this.onFocus(t);
+  }
+  /**
+   * Handle blur events
+   */
+  _handleBlur(t, e) {
+    this._focusedThumb = null, this.dispatchEvent(new FocusEvent("blur", {
+      bubbles: !0,
+      composed: !0
+    })), this.onBlur && this.onBlur(t);
+  }
+  /**
+   * Handle track click to set value
+   */
+  _handleTrackClick(t) {
+    if (this.disabled || this.readonly) return;
+    const o = t.currentTarget.getBoundingClientRect(), i = this._getValueFromPointer(t.clientX, t.clientY, o);
+    if (this.dual) {
+      const r = this._values, l = Math.abs(i - r[0]), u = Math.abs(i - r[1]), p = l < u ? [i, r[1]] : [r[0], i];
+      this._updateValue(p);
+    } else
+      this._updateValue(i);
+  }
+  /**
+   * Generate tick marks
+   */
+  _renderTicks() {
+    if (!this.showTicks || !this.tickStep || this.tickStep <= 0 || !isFinite(this.tickStep))
+      return null;
+    const t = [], e = Math.floor((this.max - this.min) / this.tickStep);
+    if (e > 1e3)
+      return null;
+    for (let i = 0; i <= e; i++) {
+      const r = this.min + i * this.tickStep, l = this._getPercentage(r), u = this.vertical ? `bottom: ${l}%` : `inset-inline-start: ${l}%`;
+      t.push(d`
+        <div class="ag-slider__tick" style="${u}">
+          <div class="ag-slider__tick-label">${r}</div>
+        </div>
+      `);
+    }
+    return d`<div class="ag-slider__ticks">${t}</div>`;
+  }
+  /**
+   * Render thumb with tooltip
+   */
+  _renderThumb(t, e, o) {
+    const i = this._getPercentage(t), r = this._focusedThumb === e, l = this._draggingThumb === e, u = this.vertical ? `bottom: ${i}%` : `inset-inline-start: ${i}%`, p = `ag-slider__thumb 
+      ${r ? "ag-slider__thumb--focused" : ""} 
+      ${l ? "ag-slider__thumb--active" : ""}
+      ${this.readonly ? "ag-slider__thumb--readonly" : ""}`;
+    return d`
+      <div
+        class="${p}"
+        style="${u}"
+        part="ag-slider-thumb ${e === "single" ? "ag-slider-thumb-single" : `ag-slider-thumb-${e}`} ${this.readonly ? "ag-slider-thumb-readonly" : ""}"
+        aria-hidden="true"
+        @pointerdown=${(n) => this._handleThumbPointerDown(n, e)}
+      >
+        ${this.showTooltip ? d`
+          <div class="ag-slider__tooltip">
+            ${t}
+          </div>
+        ` : ""}
+      </div>
+    `;
+  }
+  /**
+   * Render progress bar with enhanced visual feedback
+   */
+  _renderProgress() {
+    const t = this._values;
+    if (this.dual) {
+      const e = this._getPercentage(t[0]), o = this._getPercentage(t[1]), r = `ag-slider__progress ${t[1] - t[0] <= this.step ? "ag-slider__progress--min-gap" : ""}`, l = this.vertical ? `bottom: ${e}%; height: ${o - e}%` : `left: ${e}%; width: ${o - e}%`;
+      return d`<div class="${r}" style="${l}" part="ag-slider-progress"></div>`;
+    } else {
+      const e = this._getPercentage(t[1]), o = this.vertical ? `bottom: 0; height: ${e}%` : `left: 0; width: ${e}%`;
+      return d`<div class="ag-slider__progress" style="${o}" part="ag-slider-progress"></div>`;
+    }
+  }
+  renderLabel() {
+    if (!this.label || this.noLabel || this.dual) return "";
+    const t = [];
+    return b(this.labelPosition) ? (t.push("ag-form-control__label--horizontal"), t.push(`ag-form-control__label--${this.labelPosition}`)) : this.labelPosition === "bottom" && t.push(`ag-form-control__label--${this.labelPosition}`), d`
+      <label
+        id=${this._labelId}
+        for=${this._sliderId}
+        class="ag-form-control__label ${this.labelHidden ? "ag-form-control__label--hidden" : ""} ${this.required ? "ag-form-control__label--required" : ""} ${t.join(" ")}"
+        part="ag-slider-label"
+      >
+        ${this.label}
+      </label>
+    `;
+  }
+  render() {
+    const t = this._values, e = k({
+      helperId: this._helperId,
+      errorId: this._errorId,
+      hasHelper: !!this.helpText && !this.invalid,
+      hasError: !!this.invalid && !!this.errorMessage
+    }), o = this.label ? `${this.label} - Minimum value` : "Minimum value", i = this.label ? `${this.label} - Maximum value` : "Maximum value", r = this.helpText && !this.invalid ? d`<div class="ag-form-control__helper" id="${this._helperId}">
+          ${this.helpText}
+        </div>` : "", l = this.invalid && this.errorMessage ? d`<div class="ag-form-control__error" id="${this._errorId}">
+          ${this.errorMessage}
+        </div>` : "", u = d`
+      <div
+        class="ag-slider__container"
+        part="ag-slider-container"
+        role=${c(this.dual ? "group" : void 0)}
+        aria-label=${c(this.dual ? this.label || this.ariaLabel : void 0)}
+      >
+        <!-- Hidden accessible inputs -->
+        ${this.dual ? d`
+          <input
+            id="${this._minInputId}"
+            class="ag-slider__input"
+            type="range"
+            min="${this.min}"
+            max="${this.max}"
+            step="${c(this.step || void 0)}"
+            .value="${t[0].toString()}"
+            ?disabled="${this.disabled}"
+            ?readonly="${this.readonly}"
+            aria-valuemin="${this.min}"
+            aria-valuemax="${t[1]}"
+            aria-valuenow="${t[0]}"
+            aria-label="${c(this.dual ? o : this.ariaLabel || void 0)}"
+            aria-describedby="${c(e)}"
+            @input=${(n) => this._handleInput(n, "min")}
+            @change=${(n) => this._handleChange(n, "min")}
+            @focus=${(n) => this._handleFocus(n, "min")}
+            @blur=${(n) => this._handleBlur(n, "min")}
+          />
+          <input
+            id="${this._maxInputId}"
+            class="ag-slider__input"
+            type="range"
+            min="${this.min}"
+            max="${this.max}"
+            step="${c(this.step || void 0)}"
+            .value="${t[1].toString()}"
+            ?disabled="${this.disabled}"
+            ?readonly="${this.readonly}"
+            aria-valuemin="${t[0]}"
+            aria-valuemax="${this.max}"
+            aria-valuenow="${t[1]}"
+            aria-label="${c(this.dual ? i : void 0)}"
+            aria-describedby="${c(e)}"
+            @input=${(n) => this._handleInput(n, "max")}
+            @change=${(n) => this._handleChange(n, "max")}
+            @focus=${(n) => this._handleFocus(n, "max")}
+            @blur=${(n) => this._handleBlur(n, "max")}
+          />
+        ` : d`
+          <input
+            id="${this._sliderId}"
+            class="ag-slider__input"
+            type="range"
+            min="${this.min}"
+            max="${this.max}"
+            step="${c(this.step || void 0)}"
+            .value="${t[1].toString()}"
+            ?disabled="${this.disabled}"
+            ?readonly="${this.readonly}"
+            aria-valuemin="${this.min}"
+            aria-valuemax="${this.max}"
+            aria-valuenow="${t[1]}"
+            aria-label="${c(this.ariaLabel || void 0)}"
+            aria-describedby="${c(e)}"
+            @input=${(n) => this._handleInput(n, "max")}
+            @change=${(n) => this._handleChange(n, "max")}
+            @focus=${(n) => this._handleFocus(n, "max")}
+            @blur=${(n) => this._handleBlur(n, "max")}
+          />
+        `}
+
+        <!-- Visual track -->
+        <div
+          class="ag-slider__track"
+          part="ag-slider-track"
+          @click=${this._handleTrackClick}
+        >
+          ${this._renderProgress()}
+          ${this._renderTicks()}
+
+          <!-- Thumbs -->
+          ${this.dual ? d`
+                ${this._renderThumb(t[0], "min")}
+                ${this._renderThumb(t[1], "max")}
+              ` : this._renderThumb(t[1], "single")}
+        </div>
+      </div>
+    `;
+    return b(this.labelPosition) ? d`
+        <div class="ag-slider" part="ag-slider-wrapper">
+          <!-- Live region for screen reader announcements -->
+          <div
+            class="ag-slider__live-region"
+            aria-live="polite"
+            aria-atomic="true"
+            part="ag-slider-live-region"
+          ></div>
+
+          <div class="ag-form-control--horizontal">
+            ${this.renderLabel()}
+            ${u}
+          </div>
+          ${r}
+          ${l}
+        </div>
+      ` : this.labelPosition === "bottom" ? d`
+        <div class="ag-slider" part="ag-slider-wrapper">
+          <!-- Live region for screen reader announcements -->
+          <div
+            class="ag-slider__live-region"
+            aria-live="polite"
+            aria-atomic="true"
+            part="ag-slider-live-region"
+          ></div>
+
+          ${u}
+          ${r}
+          ${l}
+          ${this.renderLabel()}
+        </div>
+      ` : d`
+      <div class="ag-slider" part="ag-slider-wrapper">
+        <!-- Live region for screen reader announcements -->
+        <div
+          class="ag-slider__live-region"
+          aria-live="polite"
+          aria-atomic="true"
+          part="ag-slider-live-region"
+        ></div>
+
+        ${this.renderLabel()}
+        ${u}
+        ${r}
+        ${l}
+      </div>
+    `;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("pointermove", this._handlePointerMove), document.removeEventListener("pointerup", this._handlePointerUp), document.removeEventListener("pointercancel", this._handlePointerUp);
+  }
+};
+g.formAssociated = !0, g.styles = [
+  w,
+  $`
+    :host {
+      display: block;
+      --ag-slider-track-height: var(--ag-space-2);
+      --ag-slider-thumb-size: var(--ag-space-6);
+      --ag-slider-tooltip-offset: var(--ag-space-6);
+      -webkit-user-select: none;
+      user-select: none;
+      touch-action: none;
+    }
+
+    :host([vertical]) {
+      display: inline-block;
+    }
+
+    /* Container */
+    .ag-slider__container {
+      position: relative;
+      display: flex;
+      align-items: center;
+      min-height: var(--ag-space-6);
+    }
+
+    :host([vertical]) .ag-slider__container {
+      flex-direction: column;
+      min-height: auto;
+      min-width: var(--ag-space-6);
+    }
+
+    /* Track */
+    .ag-slider__track {
+      position: relative;
+      flex: 1;
+      height: var(--ag-slider-track-height);
+      background: var(--ag-border-subtle);
+      border-radius: var(--ag-radius-full);
+      cursor: pointer;
+    }
+
+    :host([vertical]) .ag-slider__track {
+      width: var(--ag-slider-track-height);
+      height: 100%;
+      min-height: 8rem;
+    }
+
+    /* Filled variant - solid thumb instead of bordered */
+    :host([filled]) .ag-slider__thumb {
+      background: var(--ag-primary);
+      border-color: var(--ag-primary);
+    }
+
+    :host([filled]) .ag-slider__thumb:hover {
+      background: var(--ag-primary-dark);
+      border-color: var(--ag-primary-dark);
+    }
+
+    /* Monochrome variant - unfilled adapts to theme */
+    :host([monochrome]) .ag-slider__progress {
+      background: var(--ag-text-primary);
+    }
+
+    :host([monochrome]) .ag-slider__thumb {
+      background: var(--ag-background-secondary);
+      border-color: var(--ag-text-primary);
+    }
+
+    :host([monochrome]) .ag-slider__thumb:hover {
+      border-color: var(--ag-text-secondary);
+    }
+
+    /* Monochrome + Filled - use adaptive text color for visibility in both modes */
+    :host([monochrome][filled]) .ag-slider__progress {
+      background: var(--ag-text-primary);
+    }
+
+    :host([monochrome][filled]) .ag-slider__thumb {
+      background: var(--ag-text-primary);
+      border-color: var(--ag-text-primary);
+    }
+
+    :host([monochrome][filled]) .ag-slider__thumb:hover {
+      background: var(--ag-text-secondary);
+      border-color: var(--ag-text-secondary);
+    }
+
+    /* Progress */
+    .ag-slider__progress {
+      position: absolute;
+      height: 100%;
+      background: var(--ag-primary);
+      border-radius: var(--ag-radius-full);
+      pointer-events: none;
+      transition: background-color var(--ag-motion-fast);
+    }
+
+    .ag-slider__progress--min-gap {
+      background: var(--ag-warning);
+      animation: pulse-gap 2s ease-in-out infinite;
+    }
+
+    @keyframes pulse-gap {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.7; }
+    }
+
+    :host([vertical]) .ag-slider__progress {
+      width: 100%;
+      height: auto;
+    }
+
+    /* Thumb */
+    .ag-slider__thumb {
+      position: absolute;
+      width: var(--ag-slider-thumb-size);
+      height: var(--ag-slider-thumb-size);
+      background: var(--ag-white);
+      border: 3px solid var(--ag-primary);
+      border-radius: var(--ag-radius-full);
+      cursor: grab;
+      transform: translate(-50%, -50%);
+      top: 50%;
+      transition: all var(--ag-motion-fast);
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+      touch-action: none;
+      box-sizing: border-box;
+    }
+
+    .ag-slider__thumb:active {
+      cursor: grabbing;
+      transform: translate(-50%, -50%) scale(1.1);
+    }
+
+    :host([vertical]) .ag-slider__thumb {
+      transform: translate(-50%, 50%);
+      inset-inline-start: 50%;
+      top: auto;
+    }
+
+    :host([vertical]) .ag-slider__thumb:active {
+      transform: translate(-50%, 50%) scale(1.1);
+    }
+
+    .ag-slider__thumb:hover {
+      border-color: var(--ag-primary-dark);
+      box-shadow: var(--ag-shadow-md);
+    }
+
+    /* Visual focus state - controlled by internal state */
+    .ag-slider__thumb--focused {
+      outline: var(--ag-focus-width) solid rgba(var(--ag-focus), 0.5);
+      outline-offset: var(--ag-focus-offset);
+      border-color: var(--ag-primary-dark);
+    }
+
+    /* Active drag state */
+    .ag-slider__thumb--active {
+      transform: translate(-50%, -50%) scale(1.1);
+      z-index: 1;
+    }
+
+    :host([vertical]) .ag-slider__thumb--active {
+      transform: translate(-50%, 50%) scale(1.1);
+    }
+
+    /* Readonly state */
+    :host([readonly]) .ag-slider__thumb {
+      cursor: default;
+      border-color: var(--ag-border-subtle);
+    }
+
+    :host([readonly]) .ag-slider__thumb:hover {
+      border-color: var(--ag-border-subtle);
+      box-shadow: var(--ag-shadow-sm);
+    }
+
+    :host([readonly]) .ag-slider__thumb:active {
+      transform: translate(-50%, -50%);
+      cursor: default;
+    }
+
+    :host([vertical][readonly]) .ag-slider__thumb:active {
+      transform: translate(-50%, 50%);
+    }
+
+    /* Readonly lock indicator (simple inline SVG) */
+    :host([readonly]) .ag-slider__thumb::after {
+      content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z" /%3E%3Cpath d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" /%3E%3Cpath d="M8 11v-4a4 4 0 1 1 8 0v4" /%3E%3C/svg%3E');
+      position: absolute;
+      top: -8px;
+      inset-inline-end: -8px;
+      filter: grayscale(1);
+      opacity: 0.7;
+    }
+
+    /* Input (hidden but accessible) */
+    .ag-slider__input {
+      position: absolute;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    /* Tooltip */
+    .ag-slider__tooltip {
+      position: absolute;
+      bottom: var(--ag-slider-tooltip-offset);
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+      background: var(--ag-neutral-800);
+      color: var(--ag-white);
+      padding: var(--ag-space-1) var(--ag-space-2);
+      border-radius: var(--ag-radius-sm);
+      font-size: var(--ag-font-size-sm);
+      white-space: nowrap;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity var(--ag-motion-fast);
+      z-index: 2;
+    }
+
+    /* Show tooltip on hover and focus - ensure it works with both thumb and input focus */
+    .ag-slider__thumb:hover .ag-slider__tooltip,
+    .ag-slider__thumb--focused .ag-slider__tooltip,
+    .ag-slider__thumb--active .ag-slider__tooltip,
+    .ag-slider__input:focus-visible ~ .ag-slider__track .ag-slider__thumb .ag-slider__tooltip {
+      opacity: 1;
+    }
+
+    :host([vertical]) .ag-slider__tooltip {
+      bottom: auto;
+      inset-inline-start: var(--ag-slider-tooltip-offset);
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    /* Ticks */
+    .ag-slider__ticks {
+      position: absolute;
+      top: 50%;
+      inset-inline: 0;
+      height: var(--ag-space-2);
+      pointer-events: none;
+    }
+
+    :host([vertical]) .ag-slider__ticks {
+      top: 0;
+      bottom: 0;
+      inset-inline-start: 50%;
+      width: var(--ag-space-2);
+      height: auto;
+    }
+
+    .ag-slider__tick {
+      position: absolute;
+      width: 1px;
+      height: var(--ag-space-2);
+      background: var(--ag-border);
+      transform: translateX(-50%);
+    }
+
+    :host([vertical]) .ag-slider__tick {
+      width: var(--ag-space-2);
+      height: 1px;
+      transform: translateY(-50%);
+    }
+
+    .ag-slider__tick-label {
+      position: absolute;
+      top: var(--ag-space-3);
+      font-size: var(--ag-font-size-xs);
+      color: var(--ag-text-muted);
+      transform: translateX(-50%);
+      white-space: nowrap;
+    }
+
+    :host([vertical]) .ag-slider__tick-label {
+      top: auto;
+      inset-inline-start: var(--ag-space-3);
+      transform: translateY(-50%);
+    }
+
+    /* Vertical tick label rotation for better space usage */
+    :host([vertical]) .ag-slider__tick-label {
+      transform: translateY(-50%) rotate(-90deg);
+      transform-origin: left center;
+      inset-inline-start: var(--ag-space-4);
+    }
+
+    /* Sizes */
+    :host([size="small"]) {
+      --ag-slider-track-height: var(--ag-space-1);
+      --ag-slider-thumb-size: var(--ag-space-5);
+    }
+
+    :host([size="large"]) {
+      --ag-slider-track-height: var(--ag-space-3);
+      --ag-slider-thumb-size: var(--ag-space-7);
+    }
+
+    /* States */
+    :host([disabled]) {
+      opacity: 0.6;
+      pointer-events: none;
+    }
+
+    :host([disabled]) .ag-slider__thumb {
+      cursor: not-allowed;
+      border-color: var(--ag-border-subtle);
+      background: var(--ag-background-disabled);
+    }
+
+    :host([disabled]) .ag-slider__progress {
+      background: var(--ag-border-subtle);
+    }
+
+    :host([invalid]) .ag-slider__progress {
+      background: var(--ag-danger);
+    }
+
+    :host([invalid]) .ag-slider__thumb {
+      border-color: var(--ag-danger);
+    }
+
+    /* Help & Error Text */
+    .ag-slider__help,
+    .ag-slider__error {
+      margin-block-start: var(--ag-space-2);
+      font-size: var(--ag-font-size-sm);
+    }
+
+    .ag-slider__help {
+      color: var(--ag-text-secondary);
+    }
+
+    .ag-slider__error {
+      color: var(--ag-danger);
+    }
+
+    /* Live region for value announcements */
+    .ag-slider__live-region {
+      position: absolute;
+      overflow: hidden;
+      clip: rect(0 0 0 0);
+      height: 1px;
+      width: 1px;
+      margin: -1px;
+      padding: 0;
+      border: 0;
+    }
+  `
+];
+let a = g;
+s([
+  h({ type: String })
+], a.prototype, "label");
+s([
+  h({ type: String, attribute: "label-position" })
+], a.prototype, "labelPosition");
+s([
+  h({ type: Boolean, attribute: "label-hidden" })
+], a.prototype, "labelHidden");
+s([
+  h({ type: Boolean, attribute: "no-label" })
+], a.prototype, "noLabel");
+s([
+  h({ type: String, reflect: !0, attribute: "aria-label" })
+], a.prototype, "ariaLabel");
+s([
+  h({ type: Number })
+], a.prototype, "min");
+s([
+  h({ type: Number })
+], a.prototype, "max");
+s([
+  h({ type: Number })
+], a.prototype, "step");
+s([
+  h({ type: Object })
+], a.prototype, "value");
+s([
+  h({ type: Boolean, reflect: !0 })
+], a.prototype, "dual");
+s([
+  h({ type: Boolean, reflect: !0 })
+], a.prototype, "vertical");
+s([
+  h({ type: Boolean, reflect: !0 })
+], a.prototype, "filled");
+s([
+  h({ type: Boolean, reflect: !0 })
+], a.prototype, "monochrome");
+s([
+  h({ type: String, reflect: !0 })
+], a.prototype, "size");
+s([
+  h({ type: Boolean, reflect: !0 })
+], a.prototype, "disabled");
+s([
+  h({ type: Boolean, reflect: !0 })
+], a.prototype, "readonly");
+s([
+  h({ type: Boolean, reflect: !0 })
+], a.prototype, "required");
+s([
+  h({ type: Boolean, reflect: !0 })
+], a.prototype, "invalid");
+s([
+  h({ type: String, attribute: "error-message" })
+], a.prototype, "errorMessage");
+s([
+  h({ type: String, attribute: "help-text" })
+], a.prototype, "helpText");
+s([
+  h({ type: String, reflect: !0 })
+], a.prototype, "name");
+s([
+  h({ type: Boolean, attribute: "show-tooltip" })
+], a.prototype, "showTooltip");
+s([
+  h({ type: Boolean, attribute: "show-ticks" })
+], a.prototype, "showTicks");
+s([
+  h({ type: Number, attribute: "tick-step" })
+], a.prototype, "tickStep");
+s([
+  h({ attribute: !1 })
+], a.prototype, "onChange");
+s([
+  h({ attribute: !1 })
+], a.prototype, "onInput");
+s([
+  h({ attribute: !1 })
+], a.prototype, "onFocus");
+s([
+  h({ attribute: !1 })
+], a.prototype, "onBlur");
+s([
+  _()
+], a.prototype, "_activeThumb");
+s([
+  _()
+], a.prototype, "_focusedThumb");
+s([
+  _()
+], a.prototype, "_draggingThumb");
+s([
+  f(".ag-slider__track")
+], a.prototype, "_track");
+s([
+  f(".ag-slider__live-region")
+], a.prototype, "_liveRegion");
+export {
+  a as AgSlider
+};