@luzmo/lucero 1.0.3-alpha.9 → 2.0.1

package/components/skeleton-loader-Cm50Ztzk.cjs

@@ -0,0 +1,18 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+const e=require("./decorate-Dq34MBGe.cjs");let t=require("lit"),n=require("lit/decorators.js");var r=`:host{box-sizing:border-box;background-color:var(--highcontrast-skeleton-loader-background-color,var(--luzmo-skeleton-loader-background-color,var(--skeleton-loader-background-color)));border-radius:var(--luzmo-skeleton-loader-border-radius,var(--skeleton-loader-border-radius));block-size:100%;inline-size:100%;display:block;position:relative;overflow:hidden;border-width:var(--luzmo-skeleton-loader-border-width,var(--skeleton-loader-border-width))!important;border-style:solid!important;border-color:var(--highcontrast-skeleton-loader-border-color,var(--luzmo-skeleton-loader-border-color,var(--skeleton-loader-border-color)))!important}.shimmer{background:linear-gradient(to right, transparent 0%, var(--luzmo-skeleton-loader-shimmer-color,var(--skeleton-loader-shimmer-color)) 50%, transparent 100%);inline-size:100%;position:absolute;inset-block:0;inset-inline-start:0;transform:translate(-100%)}@keyframes skeleton-loader-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media (prefers-reduced-motion:no-preference){.shimmer{animation-name:skeleton-loader-shimmer;animation-duration:var(--luzmo-skeleton-loader-animation-duration,var(--skeleton-loader-animation-duration));will-change:transform;animation-timing-function:ease-in-out;animation-iteration-count:infinite}}@media (forced-colors:active){:host{--highcontrast-skeleton-loader-background-color:Canvas;--highcontrast-skeleton-loader-border-color:CanvasText;forced-color-adjust:none}.shimmer{display:none}}:host{--skeleton-loader-background-color:var(--luzmo-background-color-highlight);--skeleton-loader-shimmer-color:#ffffffb3;--skeleton-loader-border-color:var(--luzmo-border-color);--skeleton-loader-border-width:var(--luzmo-border-width);--skeleton-loader-border-radius:var(--luzmo-border-radius-xl);--skeleton-loader-animation-duration:1.5s}`,i=class extends e.n{static get styles(){return[(0,t.unsafeCSS)(r)]}render(){return t.html`<div class="shimmer" part="shimmer"></div>`}connectedCallback(){super.connectedCallback(),this.setAttribute(`aria-hidden`,`true`)}updated(e){super.updated(e),e.has(`width`)&&(this.style.inlineSize=this.width??``),e.has(`height`)&&(this.style.blockSize=this.height??``)}};e.t([(0,n.property)({type:String,reflect:!0})],i.prototype,`width`,void 0),e.t([(0,n.property)({type:String,reflect:!0})],i.prototype,`height`,void 0),customElements.get(`luzmo-skeleton-loader`)||customElements.define(`luzmo-skeleton-loader`,i),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return i}});

package/components/slider/controllers/slider-handle-controller.d.ts

@@ -0,0 +1,79 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { LuzmoSliderHandle } from '../slider-handle';
+import type { SliderHandleModel, SliderNormalization } from '../types';
+/**
+ * The slice of `luzmo-slider` that the handle controller depends on. Keeping it
+ * narrow means the controller never reaches into the element's render tree.
+ */
+export interface SliderHandleControllerHost extends ReactiveControllerHost, HTMLElement {
+    readonly label: string;
+    readonly min: number;
+    readonly max: number;
+    readonly step: number;
+    readonly value: number;
+    readonly defaultValue?: number;
+    readonly normalization: SliderNormalization;
+}
+/**
+ * Resolves the slider's slotted `luzmo-slider-handle` elements — or the
+ * implicit single handle — into an ordered, render-ready snapshot, and owns
+ * the value writes and event dispatch for each one.
+ */
+export declare class SliderHandleController implements ReactiveController {
+    private readonly _applySingleValue;
+    private readonly _formatHandleValue;
+    private readonly _formatHandleLabel;
+    private readonly _host;
+    private _cachedModels?;
+    private _attachedHandles;
+    private _inputMap;
+    activeIndex: number;
+    draggingIndex: number;
+    constructor(host: SliderHandleControllerHost, _applySingleValue: (value: number) => void, _formatHandleValue: (model: SliderHandleModel) => string, _formatHandleLabel: (handle: LuzmoSliderHandle, index: number) => string);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /** Resolves the snapshot before the host renders, so `render()` stays pure. */
+    hostUpdate(): void;
+    hostUpdated(): void;
+    get handles(): LuzmoSliderHandle[];
+    /**
+     * The snapshot the host renders from. Reading it never writes the cache, so
+     * `render()` cannot mutate controller state; `hostUpdate()` fills the cache
+     * before every render and reads outside an update cycle resolve on demand.
+     */
+    get models(): readonly SliderHandleModel[];
+    get values(): Record<string, number>;
+    /** Drops the cached snapshot so the next read recomputes it. */
+    invalidate(): void;
+    /** Called by a handle whose own properties changed. */
+    requestHostUpdate(): void;
+    inputForHandle(handle: LuzmoSliderHandle): HTMLInputElement | undefined;
+    /**
+     * Writes a snapped value to the handle at `index`.
+     *
+     * @returns whether the stored value actually changed, so callers can skip
+     * emitting a value event for a no-op interaction.
+     */
+    setValue(index: number, rawValue: number): boolean;
+    setNormalizedValue(index: number, normalized: number): boolean;
+    nearestIndex(normalized: number): number;
+    /** Restores a handle's `default-value`. Returns whether anything changed. */
+    reset(index: number): boolean;
+    dispatchInput(index: number): void;
+    dispatchChange(index: number): void;
+    formatValue(index: number): string;
+    private _eventTarget;
+    private _syncInputReferences;
+    /**
+     * Pushes clamped values back onto the slotted handles after render, so the
+     * snapshot never mutates a handle while the template is being built.
+     */
+    private _commitClampedValues;
+    /** Keeps every current handle wired to this controller, and only those. */
+    private _syncAttachments;
+    private _detachHandles;
+    private _resolveModels;
+    private _resolveSingleModel;
+    private _resolveStep;
+    private _uniqueName;
+}

package/components/slider/index.cjs

@@ -15,4 +15,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../slider-D8w2ipBg.cjs`);exports.LuzmoSlider=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../slider-DxliwjT6.cjs");exports.DEFAULT_SLIDER_LABELS=e.r,exports.LuzmoSlider=e.n,exports.LuzmoSliderHandle=e.t;

package/components/slider/index.d.ts

@@ -1,7 +1,11 @@
 import { LuzmoSlider } from './slider';
+import { LuzmoSliderHandle } from './slider-handle';
 declare global {
     interface HTMLElementTagNameMap {
-        'luzmo-slider': LuzmoSlider;
+        'luzmo-slider': LuzmoSlider & HTMLElement;
+        'luzmo-slider-handle': LuzmoSliderHandle & HTMLElement;
     }
 }
 export { LuzmoSlider } from './slider';
+export { LuzmoSliderHandle } from './slider-handle';
+export { DEFAULT_SLIDER_LABELS, type SliderCombinedValueFormatter, type SliderHandleMax, type SliderHandleMin, type SliderHandleValueFormatter, type SliderLabelVisibility, type SliderLabels, type SliderNormalization, type SliderVariant } from './types';

package/components/slider/index.js

@@ -18,8 +18,8 @@
 (() => {
 	if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
 		let e = document.createElement("style");
-		e.setAttribute("data-luzmo-vars", ""), e.textContent = "html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-full-down: color-mix(in oklch, var(--luzmo-border-color-full), black 45%);--luzmo-border-color-full-focus: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-font-color-down: color-mix(in oklch, var(--luzmo-font-color), black 20%);--luzmo-font-color-focus: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-primary: #4434ff;--luzmo-primary-hover: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-down: color-mix(in oklch, var(--luzmo-primary), black 20%);--luzmo-primary-focus: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5%);--luzmo-background-color-down: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 7%), black 1%);--luzmo-background-color-focus: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5%);--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--luzmo-background-color-highlight-down: color-mix(in oklch, var(--luzmo-background-color-highlight), black 20%);--luzmo-background-color-highlight-focus: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--luzmo-secondary: #d000d0;--luzmo-secondary-hover: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-down: color-mix(in oklch, var(--luzmo-secondary), black 20%);--luzmo-secondary-focus: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 208, 0, 208;--luzmo-scrollbar-size: 6px;--luzmo-scrollbar-thumb-background: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-scrollbar-thumb-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-hover-background: rgba( var(--luzmo-border-color-rgb), 0.4 );--luzmo-scrollbar-track-background: transparent;--luzmo-scrollbar-track-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-width: thin;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-down: color-mix(in oklch, var(--luzmo-negative-color), black 20%);--luzmo-negative-color-focus: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-negative-inverse-color: #ffffff;--luzmo-positive-color: rgb(18, 133, 90);--luzmo-positive-color-hover: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-down: color-mix(in oklch, var(--luzmo-positive-color), black 20%);--luzmo-positive-color-focus: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-rgb: 18, 133, 90;--luzmo-positive-inverse-color: #ffffff;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-down: color-mix(in oklch, var(--luzmo-selected-color), black 45%);--luzmo-selected-color-focus: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-selected-color-hard-down: color-mix(in oklch, var(--luzmo-selected-color-hard), black 45%);--luzmo-selected-color-hard-focus: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-informative-color: #1670dd;--luzmo-informative-color-rgb: 22, 112, 221;--luzmo-notice-color: rgb(229, 127, 0);--luzmo-seafoam-color: rgb(0, 140, 140);--luzmo-indigo-color: rgb(68, 52, 255);--luzmo-purple-color: rgb(112, 48, 210);--luzmo-fuchsia-color: rgb(205, 30, 170);--luzmo-magenta-color: rgb(203, 36, 98);--luzmo-yellow-color: rgb(228, 208, 0);--luzmo-gray-color: rgb(110, 110, 110);--luzmo-red-color: rgb(202, 34, 28);--luzmo-orange-color: rgb(218, 123, 17);--luzmo-chartreuse-color: rgb(85, 135, 0);--luzmo-celery-color: rgb(48, 134, 22);--luzmo-green-color: rgb(18, 133, 90);--luzmo-cyan-color: rgb(0, 134, 180);--luzmo-blue-color: rgb(22, 112, 221);--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 10px;--luzmo-icon-size-xs: 12px;--luzmo-icon-size-s: 14px;--luzmo-icon-size-m: 16px;--luzmo-icon-size-l: 18px;--luzmo-icon-size-xl: 20px;--luzmo-icon-size-xxl: 32px}", document.head.appendChild(e);
+		e.setAttribute("data-luzmo-vars", ""), e.textContent = "html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-full-down: color-mix(in oklch, var(--luzmo-border-color-full), black 45%);--luzmo-border-color-full-focus: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-border-width: 1px;--luzmo-shadow-color-rgb: 0, 0, 0;--luzmo-shadow-opacity: 0.1;--luzmo-shadow-color: rgba( var(--luzmo-shadow-color-rgb), var(--luzmo-shadow-opacity) );--luzmo-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-font-color-down: color-mix(in oklch, var(--luzmo-font-color), black 20%);--luzmo-font-color-focus: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-primary: #4434ff;--luzmo-primary-hover: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-down: color-mix(in oklch, var(--luzmo-primary), black 20%);--luzmo-primary-focus: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-inverse-color: #ffffff;--luzmo-accent-on-subtle-color: var(--luzmo-primary);--luzmo-primary-rgb: 68, 52, 255;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5%);--luzmo-background-color-down: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 7%), black 1%);--luzmo-background-color-focus: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5%);--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--luzmo-background-color-highlight-down: color-mix(in oklch, var(--luzmo-background-color-highlight), black 20%);--luzmo-background-color-highlight-focus: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--luzmo-secondary: #d000d0;--luzmo-secondary-hover: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-down: color-mix(in oklch, var(--luzmo-secondary), black 20%);--luzmo-secondary-focus: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 208, 0, 208;--luzmo-scrollbar-size: 6px;--luzmo-scrollbar-thumb-background: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-scrollbar-thumb-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-hover-background: rgba( var(--luzmo-border-color-rgb), 0.4 );--luzmo-scrollbar-track-background: transparent;--luzmo-scrollbar-track-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-width: thin;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-down: color-mix(in oklch, var(--luzmo-negative-color), black 20%);--luzmo-negative-color-focus: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-on-subtle-color: var(--luzmo-negative-color);--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-negative-inverse-color: #ffffff;--luzmo-positive-color: rgb(18, 133, 90);--luzmo-positive-color-hover: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-down: color-mix(in oklch, var(--luzmo-positive-color), black 20%);--luzmo-positive-color-focus: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-on-subtle-color: color-mix( in oklch, var(--luzmo-positive-color), var(--luzmo-font-color) 11% );--luzmo-positive-color-rgb: 18, 133, 90;--luzmo-positive-inverse-color: #ffffff;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-down: color-mix(in oklch, var(--luzmo-selected-color), black 45%);--luzmo-selected-color-focus: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-selected-color-hard-down: color-mix(in oklch, var(--luzmo-selected-color-hard), black 45%);--luzmo-selected-color-hard-focus: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-neutral-on-subtle-color: var(--luzmo-selected-color-hard);--luzmo-informative-color: #1670dd;--luzmo-informative-color-hover: color-mix(in oklch, var(--luzmo-informative-color), black 8%);--luzmo-informative-color-down: color-mix(in oklch, var(--luzmo-informative-color), black 20%);--luzmo-informative-color-focus: var(--luzmo-informative-color-hover);--luzmo-informative-on-subtle-color: color-mix( in oklch, var(--luzmo-informative-color), var(--luzmo-font-color) 9% );--luzmo-informative-color-rgb: 22, 112, 221;--luzmo-informative-inverse-color: #ffffff;--luzmo-notice-color: rgb(229, 127, 0);--luzmo-notice-color-hover: color-mix(in oklch, var(--luzmo-notice-color), black 8%);--luzmo-notice-color-down: color-mix(in oklch, var(--luzmo-notice-color), black 20%);--luzmo-notice-color-focus: var(--luzmo-notice-color-hover);--luzmo-notice-on-subtle-color: color-mix( in oklch, var(--luzmo-notice-color), var(--luzmo-font-color) 40% );--luzmo-notice-inverse-color: var(--luzmo-selected-color-hard);--luzmo-seafoam-color: rgb(0, 140, 140);--luzmo-indigo-color: rgb(68, 52, 255);--luzmo-purple-color: rgb(112, 48, 210);--luzmo-fuchsia-color: rgb(205, 30, 170);--luzmo-magenta-color: rgb(203, 36, 98);--luzmo-yellow-color: rgb(228, 208, 0);--luzmo-gray-color: rgb(110, 110, 110);--luzmo-red-color: rgb(202, 34, 28);--luzmo-orange-color: rgb(218, 123, 17);--luzmo-chartreuse-color: rgb(85, 135, 0);--luzmo-celery-color: rgb(48, 134, 22);--luzmo-green-color: rgb(18, 133, 90);--luzmo-cyan-color: rgb(0, 134, 180);--luzmo-blue-color: rgb(22, 112, 221);--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 10px;--luzmo-icon-size-xs: 12px;--luzmo-icon-size-s: 14px;--luzmo-icon-size-m: 16px;--luzmo-icon-size-l: 18px;--luzmo-icon-size-xl: 20px;--luzmo-icon-size-xxl: 32px}html.dark,html.dark-theme,:where(.dark-theme){--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.2);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.35);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-rgb: 255, 255, 255;--luzmo-border-color-full: #4c4c57;--luzmo-border-color-full-hover: color-mix(in oklch, var(--luzmo-border-color-full), white 20%);--luzmo-border-color-full-down: color-mix(in oklch, var(--luzmo-border-color-full), white 35%);--luzmo-border-color-full-focus: color-mix(in oklch, var(--luzmo-border-color-full), white 20%);--luzmo-border-color-disabled: #333;--luzmo-shadow-opacity: 0.35;--luzmo-shadow-color: rgba( var(--luzmo-shadow-color-rgb), var(--luzmo-shadow-opacity) );--luzmo-font-color: #ced4da;--luzmo-font-color-extra-dimmed: #72787f;--luzmo-font-color-hover: color-mix(in oklch, var(--luzmo-font-color), white 8%);--luzmo-font-color-down: color-mix(in oklch, var(--luzmo-font-color), white 20%);--luzmo-font-color-focus: color-mix(in oklch, var(--luzmo-font-color), white 8%);--luzmo-primary: #7b90ff;--luzmo-primary-hover: color-mix(in oklch, var(--luzmo-primary), white 12%);--luzmo-primary-down: color-mix(in oklch, var(--luzmo-primary), white 24%);--luzmo-primary-focus: color-mix(in oklch, var(--luzmo-primary), white 12%);--luzmo-accent-on-subtle-color: color-mix( in oklch, var(--luzmo-primary), var(--luzmo-font-color) 1% );--luzmo-background-color: #262626;--luzmo-background-color-rgb: 0, 0, 0;--luzmo-background-color-disabled: #939ea8;--luzmo-background-color-hover: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 3%), white 14%);--luzmo-background-color-down: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 3%), white 25%);--luzmo-background-color-focus: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 3%), white 14%);--luzmo-background-color-highlight: rgb(72, 72, 72);--luzmo-background-color-highlight-disabled: #313131;--luzmo-background-color-highlight-hover: color-mix(in oklch, var(--luzmo-background-color-highlight), white 20%);--luzmo-background-color-highlight-down: color-mix(in oklch, var(--luzmo-background-color-highlight), white 35%);--luzmo-background-color-highlight-focus: color-mix(in oklch, var(--luzmo-background-color-highlight), white 20%);--luzmo-primary-inverse-color: var(--luzmo-background-color);--luzmo-indicator-color: var(--luzmo-primary);--luzmo-primary-rgb: 94, 113, 208;--luzmo-secondary: #ebff00;--luzmo-secondary-inverse-color: #333;--luzmo-secondary-rgb: 200, 219, 0;--luzmo-negative-color: #f76d74;--luzmo-negative-color-hover: color-mix(in oklch, var(--luzmo-negative-color), white 12%);--luzmo-negative-color-down: color-mix(in oklch, var(--luzmo-negative-color), white 24%);--luzmo-negative-color-focus: color-mix(in oklch, var(--luzmo-negative-color), white 12%);--luzmo-negative-on-subtle-color: color-mix( in oklch, var(--luzmo-negative-color), var(--luzmo-font-color) 40% );--luzmo-negative-color-rgb: 247, 109, 116;--luzmo-negative-inverse-color: var(--luzmo-background-color);--luzmo-positive-color: #39a875;--luzmo-positive-color-hover: color-mix(in oklch, var(--luzmo-positive-color), white 12%);--luzmo-positive-color-down: color-mix(in oklch, var(--luzmo-positive-color), white 24%);--luzmo-positive-color-focus: color-mix(in oklch, var(--luzmo-positive-color), white 12%);--luzmo-positive-on-subtle-color: color-mix( in oklch, var(--luzmo-positive-color), var(--luzmo-font-color) 35% );--luzmo-positive-color-rgb: 57, 168, 117;--luzmo-positive-inverse-color: var(--luzmo-background-color);--luzmo-selected-color: #afafaf;--luzmo-selected-color-hover: color-mix(in oklch, var(--luzmo-selected-color), white 20%);--luzmo-selected-color-down: color-mix(in oklch, var(--luzmo-selected-color), white 35%);--luzmo-selected-color-focus: color-mix(in oklch, var(--luzmo-selected-color), white 20%);--luzmo-selected-color-hard: #e9e9e9;--luzmo-selected-color-hard-hover: color-mix(in oklch, var(--luzmo-selected-color-hard), white 20%);--luzmo-selected-color-hard-down: color-mix(in oklch, var(--luzmo-selected-color-hard), white 35%);--luzmo-selected-color-hard-focus: color-mix(in oklch, var(--luzmo-selected-color-hard), white 20%);--luzmo-neutral-on-subtle-color: var(--luzmo-selected-color-hard);--luzmo-informative-color: #5c94ff;--luzmo-informative-color-hover: color-mix(in oklch, var(--luzmo-informative-color), white 12%);--luzmo-informative-color-down: color-mix(in oklch, var(--luzmo-informative-color), white 24%);--luzmo-informative-color-focus: var(--luzmo-informative-color-hover);--luzmo-informative-on-subtle-color: color-mix( in oklch, var(--luzmo-informative-color), var(--luzmo-font-color) 36% );--luzmo-informative-color-rgb: 92, 148, 255;--luzmo-informative-inverse-color: var(--luzmo-background-color);--luzmo-notice-color-hover: color-mix(in oklch, var(--luzmo-notice-color), white 12%);--luzmo-notice-color-down: color-mix(in oklch, var(--luzmo-notice-color), white 24%);--luzmo-notice-color-focus: var(--luzmo-notice-color-hover);--luzmo-notice-on-subtle-color: var(--luzmo-notice-color);--luzmo-notice-inverse-color: var(--luzmo-background-color);--luzmo-disabled-color: #75797b}", document.head.appendChild(e);
 	}
 })();
-import { t as e } from "../slider-Fy-VeKrU.js";
-export { e as LuzmoSlider };
+import { n as e, r as t, t as n } from "../slider-B7QAhDTM.js";
+export { t as DEFAULT_SLIDER_LABELS, e as LuzmoSlider, n as LuzmoSliderHandle };

package/components/slider/slider-control-templates.d.ts

@@ -0,0 +1,36 @@
+import { TemplateResult } from 'lit';
+import type { SliderHandleModel, SliderLabelVisibility } from './types';
+type HandleTemplateOptions = {
+    model: SliderHandleModel;
+    index: number;
+    total: number;
+    grouped: boolean;
+    label: string;
+    appliedLabel: string;
+    helpTextId: string | undefined;
+    labelVisibility: SliderLabelVisibility;
+    formattedValue: string;
+    activeIndex: number;
+    draggingIndex: number;
+    focusedIndex: number;
+    invalid: boolean;
+    readonly: boolean;
+    disabled: boolean;
+};
+export declare function renderSliderHandle({ model, index, total, grouped, label, appliedLabel, helpTextId, labelVisibility, formattedValue, activeIndex, draggingIndex, focusedIndex, invalid, readonly, disabled }: HandleTemplateOptions): TemplateResult;
+type EditableFieldTemplateOptions = {
+    model: SliderHandleModel;
+    label: string;
+    formatOptions: Intl.NumberFormatOptions;
+    size: string;
+    disabled: boolean;
+    invalid: boolean;
+    readonly: boolean;
+    hideStepper: boolean;
+    quiet: boolean;
+    indeterminate: boolean;
+    onInput: (event: Event) => void;
+    onChange: (event: Event) => void;
+};
+export declare function renderSliderEditableField({ model, label, formatOptions, size, disabled, invalid, readonly, hideStepper, quiet, indeterminate, onInput, onChange }: EditableFieldTemplateOptions): TemplateResult;
+export {};

package/components/slider/slider-handle.d.ts

@@ -0,0 +1,62 @@
+import { nothing, PropertyValues } from 'lit';
+import { LuzmoElement } from '../../utils/base';
+import type { SliderHandleMax, SliderHandleMin, SliderHandleValueFormatter, SliderNormalization } from './types';
+/** The controller surface a handle needs; see `SliderHandleController`. */
+type HandleHostController = {
+    inputForHandle(handle: LuzmoSliderHandle): HTMLInputElement | undefined;
+    requestHostUpdate(): void;
+};
+/**
+ * A value model for a handle slotted into `luzmo-slider`. It renders nothing
+ * itself; the parent slider draws the thumb and owns the interaction.
+ *
+ * @element luzmo-slider-handle
+ * @attr default-value - Value restored by Escape or double-click.
+ * @property normalization - Per-handle value normalization strategy.
+ * @property getAriaHandleText - Per-handle value formatter.
+ * @fires {Event} input - The handle value changed during user interaction.
+ * @fires {Event} change - The handle value change was committed.
+ */
+export declare class LuzmoSliderHandle extends LuzmoElement {
+    #private;
+    /**
+     * Unique key in the parent slider's `values` object. When omitted or
+     * duplicated the slider derives a positional key such as `handle2`.
+     */
+    name: string;
+    /**
+     * Accessible name that distinguishes this handle from its siblings. Falls
+     * back to an explicitly authored `name`, then the slider label and position.
+     */
+    label: string;
+    /** Current handle value. Defaults to the midpoint of its own range. */
+    value: number;
+    /** Value restored by Escape or a double-click on this handle. */
+    defaultValue?: number;
+    /** Lower bound, or `previous` to stay above the preceding handle. */
+    min?: SliderHandleMin;
+    /** Upper bound, or `next` to stay below the following handle. */
+    max?: SliderHandleMax;
+    /** Value interval for this handle; falls back to the slider's `step`. */
+    step?: number;
+    /** Optional CSS color used for this handle's fill and border. */
+    color: string;
+    /** Per-handle options passed to `Intl.NumberFormat`. */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** Per-handle value normalization strategy. */
+    set normalization(value: SliderNormalization | undefined);
+    get normalization(): SliderNormalization;
+    /** Formats this handle's tooltip, label, and `aria-valuetext`. */
+    getAriaHandleText?: SliderHandleValueFormatter;
+    private _normalization?;
+    /** @internal Wires this handle to its parent slider's handle controller. */
+    attachController(controller: HandleHostController): void;
+    /** @internal Releases the parent slider's handle controller. */
+    detachController(controller: HandleHostController): void;
+    /** @internal Whether a parent slider currently drives this handle. */
+    get hasController(): boolean;
+    focus(options?: FocusOptions): void;
+    protected render(): typeof nothing;
+    protected updated(changes: PropertyValues<this>): void;
+}
+export {};

package/components/slider/slider-model.d.ts

@@ -0,0 +1,16 @@
+import type { SliderNormalization } from './types';
+/**
+ * Upper bound on generated ticks. A very small `tick-step` over a wide range
+ * would otherwise build an array large enough to stall the page, so tick
+ * rendering is dropped instead.
+ */
+export declare const MAX_TICK_COUNT = 250;
+export declare const defaultNormalization: SliderNormalization;
+export declare const interpolate: (template: string, replacements: Record<string, string>) => string;
+export declare const decimalPlaces: (value: number) => number;
+export declare const clamp: (value: number, min: number, max: number) => number;
+export declare const snapValue: (value: number, min: number, max: number, step: number) => number;
+export declare const normalizeValue: (value: number, min: number, max: number, normalization?: SliderNormalization) => number;
+export declare const denormalizeValue: (value: number, min: number, max: number, step: number, normalization?: SliderNormalization) => number;
+export declare const createTicks: (min: number, max: number, tickStep: number) => number[];
+export declare const fillBounds: (value: number, min: number, max: number, fillStart: number | true | undefined, normalization?: SliderNormalization) => [number, number];

package/components/slider/slider-templates.d.ts

@@ -0,0 +1,6 @@
+import type { NumberFormatter } from '@internationalized/number';
+import { nothing, TemplateResult } from 'lit';
+import type { SliderHandleModel } from './types';
+export declare function renderSliderTicks(ticks: readonly number[], min: number, max: number, formatter: NumberFormatter, showLabels: boolean): TemplateResult | typeof nothing;
+export declare function renderSliderFill(models: readonly SliderHandleModel[], fillStart: number | true | undefined): TemplateResult | typeof nothing;
+export declare function renderSliderRamp(models: readonly SliderHandleModel[], fillStart: number | true | undefined, hasFill: boolean): TemplateResult;

package/components/slider/slider.d.ts

@@ -1,26 +1,204 @@
-import { API as NoUiSlider } from 'nouislider';
-import { LuzmoElement } from '../../utils/base';
-declare const LuzmoSlider_base: typeof LuzmoElement & {
+import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
+import { Focusable } from '../../utils/focusable';
+import '../number-field';
+import { type SliderCombinedValueFormatter, type SliderHandleValueFormatter, type SliderLabelVisibility, type SliderLabels, type SliderNormalization, type SliderVariant } from './types';
+declare const LuzmoSlider_base: typeof Focusable & {
     new (...args: any[]): import("../..").SizedElementInterface;
     prototype: import("../..").SizedElementInterface;
+} & {
+    new (...args: any[]): import("../text-field/manage-help-text").HelpTextElementInterface;
+    prototype: import("../text-field/manage-help-text").HelpTextElementInterface;
 };
+/**
+ * A numeric slider with one or more handles.
+ *
+ * @element luzmo-slider
+ * @slot handle - One or more `luzmo-slider-handle` value models.
+ * @slot help-text - Descriptive text shown below the slider.
+ * @slot negative-help-text - Error text shown below the slider when `invalid`.
+ * @attr default-value - Value restored by Escape or double-click.
+ * @attr label-visibility - `none` or `value`.
+ * @attr fill-start - Optional numeric fill origin; bare means midpoint.
+ * @attr tick-step - Tick interval; falls back to `step`.
+ * @attr tick-labels - Displays formatted tick labels.
+ * @attr hide-stepper - Hides the editable number field's stepper buttons.
+ * @fires {Event} input - The value changes during user interaction.
+ * @fires {Event} change - A user value change is committed.
+ * @cssprop --luzmo-slider-item-height - Overall control height.
+ * @cssprop --luzmo-slider-font-family - Font family for labels and ticks.
+ * @cssprop --luzmo-slider-track-height - Track thickness.
+ * @cssprop --luzmo-slider-fill-background - Fill background; takes a colour or
+ * a gradient and applies to regular and ramp tracks.
+ * @cssprop --luzmo-slider-min-inline-size - Minimum inline size.
+ * @cssprop --luzmo-slider-top-to-track - Vertical offset of the track.
+ * @cssprop --luzmo-slider-top-to-handle - Vertical offset of the handles.
+ * @cssprop --luzmo-slider-edge-to-handle - Inline offset of the handles.
+ * @cssprop --luzmo-slider-handle-size - Handle size before scaling.
+ * @cssprop --luzmo-slider-handle-scale - Scale applied to the handle size.
+ * @cssprop --luzmo-slider-background-color-hover - Handle hover fill.
+ * @cssprop --luzmo-slider-background-color-disabled - Disabled track fill.
+ * @cssprop --luzmo-slider-background-color-disabled-hover - Disabled handle fill.
+ * @cssprop --luzmo-slider-tooltip-font-size - Value tooltip font size.
+ */
 export declare class LuzmoSlider extends LuzmoSlider_base {
-    static styles: import("lit").CSSResult[];
-    get _slider(): HTMLDivElement | null;
+    static get styles(): CSSResultArray;
+    /** Accessible name for the slider and its single handle. */
     label: string;
-    value: number;
-    min: number;
-    max: number;
-    step: number;
-    disabled: boolean;
-    debounce: number;
-    noUiSlider: NoUiSlider;
-    debounceTimeout: any;
-    _doingUpdate: boolean;
-    firstUpdated(): void;
-    private _applyHandleLabels;
-    updated(changedProperties: Map<string, any>): void;
-    private setValue;
-    render(): import("lit-html").TemplateResult<1>;
+    /** Localizable copy used to name otherwise-unlabelled range handles. */
+    labels: SliderLabels;
+    private _appliedLabel;
+    /**
+     * Receives the text from a `luzmo-field-label` that targets this slider.
+     * The field label remains responsible for rendering and positioning itself.
+     */
+    applyFocusElementLabel: (value: string) => void;
+    /**
+     * The value used when no handles are slotted. Reading it while unset
+     * resolves to the midpoint of the current range.
+     */
+    set value(value: number);
+    get value(): number;
+    /** The inclusive lower bound. Non-finite input falls back to `0`. */
+    set min(value: number);
+    get min(): number;
+    /**
+     * The inclusive upper bound. A bound that does not sit above `min` falls
+     * back to `min` plus 100.
+     */
+    set max(value: number);
+    get max(): number;
+    /** The amount changed by an arrow key or a single pointer step. */
+    set step(value: number);
+    get step(): number;
+    /** Value restored by Escape or a double-click on the handle. */
+    defaultValue?: number;
+    /** Fill treatment of the track or ramp. */
+    set variant(value: SliderVariant);
+    get variant(): SliderVariant;
+    /** Uses a widening ramp independently of fill, ticks, and handle count. */
+    ramp: boolean;
+    /** Displays ticks independently of fill, track shape, and handle count. */
+    ticks: boolean;
+    /** Controls which persistent text and value labels are displayed. */
+    set labelVisibility(value: SliderLabelVisibility);
+    get labelVisibility(): SliderLabelVisibility;
+    /** Numeric fill origin, or the midpoint when used as a bare attribute. */
+    fillStart?: number | true;
+    /**
+     * Tick interval; falls back to `step`. An interval that would produce more
+     * than 250 ticks renders none.
+     */
+    set tickStep(value: number);
+    get tickStep(): number;
+    /** Displays localized labels below ticks. */
+    tickLabels: boolean;
+    /** Displays a synchronized number field for single-handle sliders. */
+    editable: boolean;
+    /** Hides the editable number field's stepper buttons. */
+    hideStepper: boolean;
+    /** Renders the editable number field without its field chrome. */
+    quiet: boolean;
+    /** Displays an indeterminate value until the next interaction. */
+    indeterminate: boolean;
+    /** Whether the value held by the slider is invalid. */
+    invalid: boolean;
+    /** Prevents value changes while keeping the slider focusable. */
+    readonly: boolean;
+    /** Property-only options passed to `Intl.NumberFormat` for every handle. */
+    formatOptions: Intl.NumberFormatOptions;
+    /** Maps values onto track positions so the scale can be non-linear. */
+    set normalization(value: SliderNormalization | undefined);
+    get normalization(): SliderNormalization;
+    /** Formats one handle's tooltip, label, and `aria-valuetext`. */
+    set getAriaHandleText(value: SliderHandleValueFormatter | undefined);
+    get getAriaHandleText(): SliderHandleValueFormatter;
+    /**
+     * Combines every handle's formatted value for the end-of-slider label.
+     * The default uses `Intl.ListFormat` on the resolved language.
+     */
+    set getAriaValueText(value: SliderCombinedValueFormatter | undefined);
+    get getAriaValueText(): SliderCombinedValueFormatter;
+    private rangeInputs;
+    private readonly _languageResolver;
+    private readonly _handleController;
+    private _rawValue;
+    private _rawMin;
+    private _rawMax;
+    private _rawStep;
+    private _rawTickStep;
+    private _rawVariant;
+    private _rawLabelVisibility;
+    private _focusedIndex;
+    private _dragStartValue?;
+    private _capturedPointer?;
+    private _formatterCache;
+    private _formatterCacheLanguage?;
+    private _pendingCommits;
+    private _normalization?;
+    private _getAriaHandleText?;
+    private _getAriaValueText?;
+    private readonly _defaultAriaHandleText;
+    private readonly _defaultAriaValueText;
+    /** The current value of every handle, keyed by its resolved `name`. */
+    get values(): Record<string, number>;
+    get focusElement(): HTMLElement;
+    private _applySingleValue;
+    private _normalizeRawValue;
+    private _formatHandleValue;
+    private _formatHandleLabel;
+    disconnectedCallback(): void;
+    private _numberFormatter;
+    private _withDefaultPrecision;
+    /**
+     * Falls back to the same options without `style`/`unit` when the runtime
+     * rejects them. Consumers needing an unsupported unit supply their own
+     * `getAriaHandleText` rather than relying on appended text, which no
+     * locale-aware formatter can position correctly.
+     */
+    private _createNumberFormatter;
+    private _clearNumberFormatterCache;
+    private _formatValueList;
+    private get _formattedValues();
+    private get _combinedValueText();
+    /**
+     * Handle indices address a different handle after the slot changes, so any
+     * interaction in flight is abandoned rather than redirected.
+     */
+    private handleSlotChange;
+    private _normalizedPointerValue;
+    private _capturePointer;
+    private _releaseCapturedPointer;
+    private _endDrag;
+    private handlePointerDown;
+    private handlePointerMove;
+    private handlePointerUp;
+    /**
+     * A pointer capture lost to the browser (a gesture taken over by scrolling,
+     * a device disconnecting) ends the drag on the same terms as a cancellation.
+     * Releasing the capture ourselves also fires this, but only after the drag
+     * has already been cleared, so the guard below makes that a no-op.
+     */
+    private handleLostPointerCapture;
+    /** A cancelled pointer reverts to the pre-drag value and commits nothing. */
+    private handlePointerCancel;
+    private _applyInputValue;
+    private _commitValue;
+    private handleNativeInput;
+    private handleNativeChange;
+    private handleKeyDown;
+    private handleTrackInput;
+    private handleTrackChange;
+    private handleTrackKeyDown;
+    private handleTrackFocusIn;
+    private handleTrackFocusOut;
+    private handleTrackDoubleClick;
+    private handleNumberInput;
+    private handleNumberChange;
+    private get _hasFill();
+    private _renderTicks;
+    private _renderFill;
+    protected render(): TemplateResult;
+    protected willUpdate(changes: PropertyValues): void;
+    protected updated(changes: PropertyValues): void;
 }
 export {};

package/components/slider/types.d.ts

@@ -0,0 +1,57 @@
+import type { NumberFormatter } from '@internationalized/number';
+import type { LuzmoSliderHandle } from './slider-handle';
+export type SliderVariant = 'filled' | 'unfilled';
+export type SliderLabelVisibility = 'none' | 'value';
+export type SliderLabels = {
+    /** `{label}` and `{position}` are replaced. */
+    handleName?: string;
+};
+export declare const DEFAULT_SLIDER_LABELS: Required<SliderLabels>;
+/** Lower bound of a slotted handle; `previous` follows the handle before it. */
+export type SliderHandleMin = number | 'previous';
+/** Upper bound of a slotted handle; `next` follows the handle after it. */
+export type SliderHandleMax = number | 'next';
+/**
+ * Maps a value onto the 0–1 track position and back, so a slider can present
+ * a non-linear scale.
+ */
+export type SliderNormalization = {
+    toNormalized(value: number, min: number, max: number): number;
+    fromNormalized(value: number, min: number, max: number): number;
+};
+/** Formats one handle's value for its tooltip, label, and `aria-valuetext`. */
+export type SliderHandleValueFormatter = (value: number, formatter: NumberFormatter) => string;
+/**
+ * Combines every handle's formatted value into the single string used by the
+ * end-of-slider value label. Keys are handle names.
+ */
+export type SliderCombinedValueFormatter = (values: Map<string, string>) => string;
+/** A resolved, render-ready snapshot of one handle. */
+export type SliderHandleModel = {
+    /** The slotted element, or `undefined` for the implicit single handle. */
+    handle?: LuzmoSliderHandle;
+    /** Unique key in the slider's `values` object. */
+    name: string;
+    /** Accessible name for this handle. */
+    label: string;
+    /** Snapped value inside the effective bounds. */
+    value: number;
+    /** Lower bound used for track positioning. */
+    min: number;
+    /** Upper bound used for track positioning. */
+    max: number;
+    /** Lower bound the user can reach, after neighbour constraints. */
+    effectiveMin: number;
+    /** Upper bound the user can reach, after neighbour constraints. */
+    effectiveMax: number;
+    step: number;
+    /** Value restored by Escape or a double-click. */
+    defaultValue?: number;
+    /** Track position between 0 and 1. */
+    normalizedValue: number;
+    normalization: SliderNormalization;
+};
+/** Number of steps an arrow key is multiplied by for Page Up and Page Down. */
+export declare const SLIDER_PAGE_STEP_MULTIPLIER = 5;
+/** Span applied when a supplied `max` does not sit above `min`. */
+export declare const SLIDER_FALLBACK_RANGE = 100;