@aceshooting/lyra-ui 2.0.0 → 2.2.0

package/dist/components/select/select.styles.js

@@ -3,34 +3,34 @@ export const styles = css `
   :host {
     display: block;
     --lyra-select-trigger-padding: var(--lyra-space-xs) var(--lyra-space-s);
-    --lyra-select-trigger-min-height: 2.5rem;
-    --lyra-select-font-size: 1rem;
+    --lyra-select-trigger-min-height: var(--lyra-size-2-5rem);
+    --lyra-select-font-size: var(--lyra-font-size-md);
   }
   :host([size='xs']) {
-    --lyra-select-trigger-padding: 0.125rem var(--lyra-space-xs);
-    --lyra-select-trigger-min-height: 1.5rem;
-    --lyra-select-font-size: 0.75rem;
+    --lyra-select-trigger-padding: var(--lyra-size-0-125rem) var(--lyra-space-xs);
+    --lyra-select-trigger-min-height: var(--lyra-size-1-5rem);
+    --lyra-select-font-size: var(--lyra-font-size-xs);
   }
   :host([size='s']) {
     --lyra-select-trigger-padding: var(--lyra-space-xs) var(--lyra-space-xs);
-    --lyra-select-trigger-min-height: 1.875rem;
-    --lyra-select-font-size: 0.8125rem;
+    --lyra-select-trigger-min-height: var(--lyra-size-1-875rem);
+    --lyra-select-font-size: var(--lyra-font-size-sm);
   }
   :host([size='l']) {
     --lyra-select-trigger-padding: var(--lyra-space-s) var(--lyra-space-m);
-    --lyra-select-trigger-min-height: 3rem;
-    --lyra-select-font-size: 1.125rem;
+    --lyra-select-trigger-min-height: var(--lyra-size-3rem);
+    --lyra-select-font-size: var(--lyra-font-size-lg);
   }
   :host([size='xl']) {
     --lyra-select-trigger-padding: var(--lyra-space-m) var(--lyra-space-l);
-    --lyra-select-trigger-min-height: 3.5rem;
-    --lyra-select-font-size: 1.25rem;
+    --lyra-select-trigger-min-height: var(--lyra-size-3-5rem);
+    --lyra-select-font-size: var(--lyra-font-size-xl);
   }
   [part='form-control-label'] {
     display: block;
     margin-block-end: var(--lyra-space-xs);
-    font-size: 0.875rem;
-    font-weight: 600;
+    font-size: var(--lyra-font-size-md-sm);
+    font-weight: var(--lyra-font-weight-semibold);
   }
   /* :empty never matches here -- the part always contains a literal slot
      child element regardless of assigned/text content -- so real emptiness
@@ -55,7 +55,7 @@ export const styles = css `
     inline-size: 100%;
     min-block-size: var(--lyra-select-trigger-min-height);
     padding: var(--lyra-select-trigger-padding);
-    border: 1px solid var(--lyra-color-border);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     border-radius: var(--lyra-radius);
     background: var(--lyra-color-surface);
     color: inherit;
@@ -71,7 +71,7 @@ export const styles = css `
   :host([open]) [part='trigger'] {
     border-color: var(--lyra-color-brand);
   }
-  :host([disabled]) [part='trigger'] {
+  :host(:disabled) [part='trigger'] {
     /* Shared library-wide disabled-state token -- see lyra-combobox. */
     opacity: var(--lyra-opacity-disabled);
     cursor: not-allowed;
@@ -97,9 +97,9 @@ export const styles = css `
     justify-content: center;
     color: var(--lyra-color-text-quiet);
     /* Same real-touch-target reasoning as lyra-combobox's expand-icon. */
-    min-inline-size: min(var(--lyra-icon-button-size), 1.75rem);
-    min-block-size: min(var(--lyra-icon-button-size), 1.75rem);
-    line-height: 1;
+    min-inline-size: min(var(--lyra-icon-button-size), var(--lyra-size-1-75rem));
+    min-block-size: min(var(--lyra-icon-button-size), var(--lyra-size-1-75rem));
+    line-height: var(--lyra-line-height-none);
   }
   [part='expand-icon'] svg {
     transform: rotate(90deg);
@@ -107,16 +107,16 @@ export const styles = css `
 
   [part='listbox'] {
     position: fixed;
-    z-index: 900;
+    z-index: var(--lyra-layer-dropdown);
     box-sizing: border-box;
-    max-block-size: 18rem;
+    max-block-size: var(--lyra-size-18rem);
     overflow-y: auto;
     inline-size: max-content;
-    min-inline-size: 12rem;
-    max-inline-size: min(92vw, 28rem);
+    min-inline-size: var(--lyra-size-12rem);
+    max-inline-size: min(92vw, var(--lyra-size-28rem));
     padding: var(--lyra-space-xs);
     background: var(--lyra-color-surface);
-    border: 1px solid var(--lyra-color-border);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     border-radius: var(--lyra-radius);
     box-shadow: var(--lyra-shadow);
     /* Closed state: invisible + slightly raised. visibility (not
@@ -124,7 +124,7 @@ export const styles = css `
        and a11y exposure stay off since this part is already position:fixed. */
     visibility: hidden;
     opacity: 0;
-    transform: translateY(-0.25rem);
+    transform: translateY(var(--lyra-size-neg-0-25rem));
     transition:
       opacity var(--lyra-transition-fast),
       transform var(--lyra-transition-fast),
@@ -147,7 +147,7 @@ export const styles = css `
     align-items: start;
     inline-size: 100%;
     padding: var(--lyra-space-xs) var(--lyra-space-s);
-    border: 1px solid transparent;
+    border: var(--lyra-border-width-thin) solid transparent;
     border-radius: var(--lyra-radius);
     background: none;
     color: inherit;
@@ -162,15 +162,15 @@ export const styles = css `
   [part='option'][aria-selected='true'] {
     border-color: var(--lyra-color-brand);
     color: var(--lyra-color-brand);
-    font-weight: 600;
+    font-weight: var(--lyra-font-weight-semibold);
   }
   [part='option'][aria-disabled='true'] {
     opacity: var(--lyra-opacity-disabled);
     cursor: not-allowed;
   }
   [part='option-dot'] {
-    inline-size: 0.5rem;
-    block-size: 0.5rem;
+    inline-size: var(--lyra-size-0-5rem);
+    block-size: var(--lyra-size-0-5rem);
     border-radius: 50%;
     flex: 0 0 auto;
   }
@@ -180,21 +180,21 @@ export const styles = css `
     min-inline-size: 0;
   }
   [part='option-sub'] {
-    font-size: 0.75rem;
+    font-size: var(--lyra-font-size-xs);
     color: var(--lyra-color-text-quiet);
   }
 
   .group-label {
     padding: var(--lyra-space-xs) var(--lyra-space-s) 0;
-    font-size: 0.6875rem;
-    font-weight: 700;
+    font-size: var(--lyra-size-0-6875rem);
+    font-weight: var(--lyra-font-weight-bold);
     text-transform: uppercase;
-    letter-spacing: 0.04em;
+    letter-spacing: var(--lyra-size-0-04em);
     color: var(--lyra-color-text-quiet);
   }
   [part='hint'] {
     margin-block-start: var(--lyra-space-xs);
-    font-size: 0.8125rem;
+    font-size: var(--lyra-font-size-sm);
     color: var(--lyra-color-text-quiet);
   }
   /* :empty never matches here either -- same fix as lyra-combobox's hint/error. */
@@ -203,10 +203,11 @@ export const styles = css `
   }
   [part='error'] {
     margin-block-start: var(--lyra-space-xs);
-    font-size: 0.8125rem;
+    font-size: var(--lyra-font-size-sm);
     color: var(--lyra-color-danger);
   }
   [part='error'][hidden] {
     display: none;
   }
 `;
+//# sourceMappingURL=select.styles.js.map

package/dist/components/select/select.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.styles.js","sourceRoot":"","sources":["../../../src/components/select/select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkNxB,CAAC"}

package/dist/components/skeleton/skeleton.class.d.ts

@@ -0,0 +1,30 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export type SkeletonVariant = 'text' | 'circle' | 'rect';
+export type SkeletonEffect = 'pulse' | 'sheen';
+/**
+ * `<lyra-skeleton>` — a loading placeholder. First-party invention, standing
+ * in for the bespoke `animate-pulse` div most dashboards hand-roll.
+ *
+ * @customElement lyra-skeleton
+ * @csspart base - The placeholder shape.
+ */
+export declare class LyraSkeleton extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    variant: SkeletonVariant;
+    effect: SkeletonEffect;
+    width?: string;
+    height?: string;
+    /** Accessible name announced via `role="status"`. Override with a
+     *  description of what is actually loading (e.g. "Loading chart"). */
+    label: string;
+    protected willUpdate(): void;
+    protected updated(changed: PropertyValues): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-skeleton': LyraSkeleton;
+    }
+}
+//# sourceMappingURL=skeleton.class.d.ts.map

package/dist/components/skeleton/skeleton.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.class.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAErE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAI7D,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AACzD,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,CAAC;AAE/C;;;;;;GAMG;AACH,qBAAa,YAAa,SAAQ,WAAW;IAC3C,MAAM,CAAC,MAAM,iCAAwC;IAExB,OAAO,EAAE,eAAe,CAAU;IAClC,MAAM,EAAE,cAAc,CAAW;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAE5B;0EACsE;IAC1D,KAAK,SAAc;IAE/B,SAAS,CAAC,UAAU,IAAI,IAAI,CAE3B;IAED,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAa/C;IAED,MAAM,IAAI,cAAc,CAEvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/dist/components/skeleton/skeleton.class.js

@@ -0,0 +1,67 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { srOnly } from '../../internal/a11y.js';
+import { styles } from './skeleton.styles.js';
+/**
+ * `<lyra-skeleton>` — a loading placeholder. First-party invention, standing
+ * in for the bespoke `animate-pulse` div most dashboards hand-roll.
+ *
+ * @customElement lyra-skeleton
+ * @csspart base - The placeholder shape.
+ */
+export class LyraSkeleton extends LyraElement {
+    constructor() {
+        super(...arguments);
+        this.variant = 'text';
+        this.effect = 'pulse';
+        /** Accessible name announced via `role="status"`. Override with a
+         *  description of what is actually loading (e.g. "Loading chart"). */
+        this.label = 'Loading…';
+    }
+    static { this.styles = [LyraElement.styles, styles, srOnly]; }
+    willUpdate() {
+        this.setAttribute('role', 'status');
+    }
+    updated(changed) {
+        if (changed.has('width') || changed.has('height')) {
+            if (this.width) {
+                this.style.setProperty('--lyra-skeleton-w', this.width);
+            }
+            else {
+                this.style.removeProperty('--lyra-skeleton-w');
+            }
+            if (this.height) {
+                this.style.setProperty('--lyra-skeleton-h', this.height);
+            }
+            else {
+                this.style.removeProperty('--lyra-skeleton-h');
+            }
+        }
+    }
+    render() {
+        return html `<span part="base"><span class="sr-only">${this.label}</span></span>`;
+    }
+}
+__decorate([
+    property({ reflect: true })
+], LyraSkeleton.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraSkeleton.prototype, "effect", void 0);
+__decorate([
+    property()
+], LyraSkeleton.prototype, "width", void 0);
+__decorate([
+    property()
+], LyraSkeleton.prototype, "height", void 0);
+__decorate([
+    property()
+], LyraSkeleton.prototype, "label", void 0);
+//# sourceMappingURL=skeleton.class.js.map

package/dist/components/skeleton/skeleton.class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.class.js","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.class.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAA4C,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAK9C;;;;;;GAMG;AACH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAA7C;;QAG+B,YAAO,GAAoB,MAAM,CAAC;QAClC,WAAM,GAAmB,OAAO,CAAC;QAI9D;8EACsE;QAC1D,UAAK,GAAG,UAAU,CAAC;IAwBjC,CAAC;aAjCQ,WAAM,GAAG,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,AAAvC,CAAwC;IAW3C,UAAU;QAClB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACtC,CAAC;IAES,OAAO,CAAC,OAAuB;QACvC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAClD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;YAC1D,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC,CAAC;YACjD,CAAC;YACD,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;YAC3D,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC,CAAC;YACjD,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,2CAA2C,IAAI,CAAC,KAAK,gBAAgB,CAAC;IACnF,CAAC;CACF;AA/B8B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAmC;AAClC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAkC;AAClD;IAAX,QAAQ,EAAE;2CAAgB;AACf;IAAX,QAAQ,EAAE;4CAAiB;AAIhB;IAAX,QAAQ,EAAE;2CAAoB"}

package/dist/components/skeleton/skeleton.d.ts

@@ -1,26 +1,2 @@
-import { type TemplateResult, type PropertyValues } from 'lit';
-import { LyraElement } from '../../internal/lyra-element.js';
-export type SkeletonVariant = 'text' | 'circle' | 'rect';
-export type SkeletonEffect = 'pulse' | 'sheen';
-/**
- * `<lyra-skeleton>` — a loading placeholder. First-party invention, standing
- * in for the bespoke `animate-pulse` div most dashboards hand-roll.
- *
- * @customElement lyra-skeleton
- * @csspart base - The placeholder shape.
- */
-export declare class LyraSkeleton extends LyraElement {
-    static styles: import("lit").CSSResultGroup[];
-    variant: SkeletonVariant;
-    effect: SkeletonEffect;
-    width?: string;
-    height?: string;
-    protected willUpdate(): void;
-    protected updated(changed: PropertyValues): void;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lyra-skeleton': LyraSkeleton;
-    }
-}
+export * from './skeleton.class.js';
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/components/skeleton/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

package/dist/components/skeleton/skeleton.js

@@ -1,62 +1,5 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './skeleton.class.js';
+import { LyraSkeleton } from './skeleton.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { srOnly } from '../../internal/a11y.js';
-import { styles } from './skeleton.styles.js';
-/**
- * `<lyra-skeleton>` — a loading placeholder. First-party invention, standing
- * in for the bespoke `animate-pulse` div most dashboards hand-roll.
- *
- * @customElement lyra-skeleton
- * @csspart base - The placeholder shape.
- */
-export class LyraSkeleton extends LyraElement {
-    constructor() {
-        super(...arguments);
-        this.variant = 'text';
-        this.effect = 'pulse';
-    }
-    static { this.styles = [LyraElement.styles, styles, srOnly]; }
-    willUpdate() {
-        this.setAttribute('role', 'status');
-    }
-    updated(changed) {
-        if (changed.has('width') || changed.has('height')) {
-            if (this.width) {
-                this.style.setProperty('--lyra-skeleton-w', this.width);
-            }
-            else {
-                this.style.removeProperty('--lyra-skeleton-w');
-            }
-            if (this.height) {
-                this.style.setProperty('--lyra-skeleton-h', this.height);
-            }
-            else {
-                this.style.removeProperty('--lyra-skeleton-h');
-            }
-        }
-    }
-    render() {
-        return html `<span part="base"><span class="sr-only">Loading…</span></span>`;
-    }
-}
-__decorate([
-    property({ reflect: true })
-], LyraSkeleton.prototype, "variant", void 0);
-__decorate([
-    property({ reflect: true })
-], LyraSkeleton.prototype, "effect", void 0);
-__decorate([
-    property()
-], LyraSkeleton.prototype, "width", void 0);
-__decorate([
-    property()
-], LyraSkeleton.prototype, "height", void 0);
 defineElement('skeleton', LyraSkeleton);
+//# sourceMappingURL=skeleton.js.map

package/dist/components/skeleton/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC"}

package/dist/components/skeleton/skeleton.styles.d.ts

@@ -1 +1,2 @@
 export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=skeleton.styles.d.ts.map

package/dist/components/skeleton/skeleton.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.styles.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAwDlB,CAAC"}

package/dist/components/skeleton/skeleton.styles.js

@@ -3,22 +3,20 @@ export const styles = css `
   :host {
     display: inline-block;
     inline-size: var(--lyra-skeleton-w, 100%);
-    block-size: var(--lyra-skeleton-h, 1em);
+    block-size: var(--lyra-skeleton-h, var(--lyra-size-1em));
   }
   [part='base'] {
     inline-size: 100%;
     block-size: 100%;
     background: var(--lyra-color-border);
   }
-  :host([variant='text']) [part='base'] {
+  :host([variant='text']) [part='base'],
+  :host([variant='rect']) [part='base'] {
     border-radius: var(--lyra-radius);
   }
   :host([variant='circle']) [part='base'] {
     border-radius: 50%;
   }
-  :host([variant='rect']) [part='base'] {
-    border-radius: var(--lyra-radius);
-  }
   :host([effect='pulse']) [part='base'] {
     animation: lyra-skeleton-pulse 1.5s ease-in-out infinite;
   }
@@ -53,5 +51,9 @@ export const styles = css `
     [part='base'] {
       animation: none !important;
     }
+    :host([effect='sheen']) [part='base'] {
+      background-image: none;
+    }
   }
 `;
+//# sourceMappingURL=skeleton.styles.js.map

package/dist/components/skeleton/skeleton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.styles.js","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDxB,CAAC"}

package/dist/components/slider/slider.class.d.ts

@@ -0,0 +1,152 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/**
+ * `<lyra-slider>` — a numeric range control (e.g. an LLM "temperature"
+ * setting), form-associated. Mirrors native `<input type="range">`
+ * semantics: `value` is the string form-submitted via `FormAssociated`,
+ * `valueAsNumber` is the ergonomic numeric accessor (mirroring the native
+ * `<input type=range>` IDL attribute of the same name) kept in sync with it
+ * in both directions — reads parse `value`, writes stringify back to it.
+ *
+ * Unlike the mixin's other consumers, an unset `value` is eagerly defaulted
+ * — on connect, and again after `form.reset()` — to the midpoint of
+ * `[min, max]` snapped to `step`, the same "range sanitization algorithm"
+ * default a native range input applies. A slider always represents *some*
+ * number, so `required` (inherited from `FormAssociated`) only has a window
+ * to block submission before that default lands, matching how `required`
+ * isn't a meaningful constraint on a native range input either.
+ *
+ * Clicking anywhere on the track (not just the 16px thumb) jumps the thumb
+ * to that point and continues the same gesture as a drag, matching native
+ * `<input type=range>` click-to-seek.
+ *
+ * @customElement lyra-slider
+ * @event lyra-input - Fired continuously during an active drag or a
+ *   keyboard step (including OS key-repeat while a key is held), mirroring
+ *   native `<input type=range>`'s own `input` event. `detail: { value: number }`.
+ * @event lyra-change - Fired once an interaction commits: on pointerup for a
+ *   drag, or on keyup for a keyboard step — so a single Arrow/Home/End/
+ *   PageUp/PageDown press fires both `lyra-input` and `lyra-change`,
+ *   mirroring how native `<input type=range>` fires `change` on every
+ *   committed step too. `detail: { value: number }`.
+ * @csspart base - The row wrapping the track and the optional value readout.
+ * @csspart track - The full-width background line.
+ * @csspart fill - The filled portion of the track from `min` up to the current value.
+ * @csspart thumb - The draggable handle (`role="slider"`).
+ * @csspart value - The visible numeric readout, rendered when `show-value` is true.
+ */
+export interface LyraSliderEventMap {
+    'lyra-input': CustomEvent<{
+        value: number;
+    }>;
+    'lyra-change': CustomEvent<{
+        value: number;
+    }>;
+}
+declare class LyraSliderBase extends LyraElement<LyraSliderEventMap> {
+}
+declare const LyraSlider_base: typeof LyraSliderBase & (new (...args: any[]) => import("../../lyra.js").FormAssociatedInterface);
+export declare class LyraSlider extends LyraSlider_base {
+    static styles: import("lit").CSSResultGroup[];
+    static properties: {
+        min: {
+            type: NumberConstructor;
+            noAccessor: boolean;
+        };
+        max: {
+            type: NumberConstructor;
+            noAccessor: boolean;
+        };
+        step: {
+            type: NumberConstructor;
+            noAccessor: boolean;
+        };
+    };
+    private _min;
+    private _max;
+    private _step;
+    private pendingValue;
+    get min(): number;
+    set min(next: number);
+    get max(): number;
+    set max(next: number);
+    get step(): number;
+    set step(next: number);
+    /** Accessible name for the slider, used when no visible label context
+     *  exists around it (e.g. no wrapping `<label>` or adjacent heading). Set
+     *  as `aria-label` on the interactive `role="slider"` element. A plain
+     *  `aria-label` attribute on the host itself is honored as a fallback when
+     *  this is left unset, matching `<lyra-checkbox>`/`<lyra-switch>`. */
+    label: string;
+    /** Whether to render the current numeric value as visible text next to
+     *  the track. Like `<lyra-markdown>`'s `sanitize`/`gfm`, this is a plain
+     *  `type: Boolean` property defaulting `true` — turn it off via the
+     *  `.showValue=${false}` property binding (a bare `show-value="false"`
+     *  content attribute is still truthy, since presence is all Lit's default
+     *  boolean converter checks). */
+    showValue: boolean;
+    private activePointers;
+    private changedPointers;
+    private keyboardChanged;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** The numeric counterpart of `value`, mirroring native `<input
+     *  type=range>.valueAsNumber`. Reading always returns a finite, clamped,
+     *  step-snapped number — even if `value` is momentarily `""` (e.g. right
+     *  after `form.reset()` restores an undeclared default) — by falling back
+     *  to the midpoint of `[min, max]`. Writing stringifies the clamped result
+     *  back into `value`. */
+    get valueAsNumber(): number;
+    set valueAsNumber(next: number);
+    /**
+     * `FormAssociated` provides the form plumbing; this override adds the
+     * slider's native-range sanitization at the IDL boundary so invalid direct
+     * assignments cannot briefly submit a literal `NaN`/`Infinity`.
+     */
+    get value(): string;
+    set value(next: string);
+    formResetCallback(): void;
+    /** If `value` is still unset, seed it with the sanitized default — the
+     *  midpoint of `[min, max]`, snapped to `step` — so `value`/`valueAsNumber`
+     *  and rendering never have to treat "" as a real, distinct state. */
+    private ensureValue;
+    /** Re-sanitize an already assigned value immediately after range settings change. */
+    private sanitizeCurrentValue;
+    private domain;
+    private defaultNumericValue;
+    private percentOf;
+    private clampValue;
+    private formatValue;
+    private setValue;
+    private onKeyDown;
+    private onKeyUp;
+    /** Start tracking `pointerId` as an active drag, transferring pointer
+     *  capture to `captureTarget` and wiring the shared window-level move/end
+     *  listeners. Shared by a pointerdown that starts on the thumb itself and
+     *  one that starts elsewhere on the track (see `onBasePointerDown`), so
+     *  both gestures continue identically from here on. */
+    private beginDrag;
+    private onPointerDown;
+    /** A pointerdown anywhere on `[part="base"]` other than the thumb itself
+     *  (the vast majority of the control's clickable area) jumps the thumb to
+     *  that point and continues the same gesture as a drag, mirroring native
+     *  `<input type=range>` click-to-seek. A pointerdown that started on the
+     *  thumb bubbles up to this same listener too — already fully handled by
+     *  `onPointerDown` above, so it's ignored here via the `e.target === thumb`
+     *  check. Unlike the two-handle `lyra-time-range` (where a track click is
+     *  ambiguous about which handle should move), a single thumb has no such
+     *  ambiguity. */
+    private onBasePointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    /** Stop the drag owned by `pointerId`, optionally committing a final lyra-change. */
+    private endDrag;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-slider': LyraSlider;
+    }
+}
+export {};
+//# sourceMappingURL=slider.class.d.ts.map

package/dist/components/slider/slider.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.class.d.ts","sourceRoot":"","sources":["../../../src/components/slider/slider.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAgC7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC7C,aAAa,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC/C;AACD,cAAM,cAAe,SAAQ,WAAW,CAAC,kBAAkB,CAAC;CAAG;;AAE/D,qBAAa,UAAW,SAAQ,eAA8B;IAC5D,MAAM,CAAC,MAAM,iCAAgC;IAM7C,MAAM,CAAC,UAAU;QACf,GAAG;YAAI,IAAI;YAAU,UAAU;;QAC/B,GAAG;YAAI,IAAI;YAAU,UAAU;;QAC/B,IAAI;YAAI,IAAI;YAAU,UAAU;;MAChC;IAEF,OAAO,CAAC,IAAI,CAAK;IACjB,OAAO,CAAC,IAAI,CAAO;IACnB,OAAO,CAAC,KAAK,CAAK;IAKlB,OAAO,CAAC,YAAY,CAAqB;IAEzC,IAAI,GAAG,IAAI,MAAM,CAEhB;IACD,IAAI,GAAG,CAAC,IAAI,EAAE,MAAM,EAKnB;IAED,IAAI,GAAG,IAAI,MAAM,CAEhB;IACD,IAAI,GAAG,CAAC,IAAI,EAAE,MAAM,EAKnB;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IACD,IAAI,IAAI,CAAC,IAAI,EAAE,MAAM,EAQpB;IACD;;;;0EAIsE;IAC1D,KAAK,SAAM;IACvB;;;;;qCAKiC;IACqB,SAAS,UAAQ;IAKvE,OAAO,CAAC,cAAc,CAAqB;IAC3C,OAAO,CAAC,eAAe,CAAqB;IAC5C,OAAO,CAAC,eAAe,CAAS;IAEhC,iBAAiB,IAAI,IAAI,CASxB;IAED,oBAAoB,IAAI,IAAI,CAY3B;IAED;;;;;6BAKyB;IACzB,IAAI,aAAa,IAAI,MAAM,CAI1B;IAED,IAAI,aAAa,CAAC,IAAI,EAAE,MAAM,EAE7B;IAED;;;;OAIG;IACH,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,IAAI,EAAE,MAAM,EAUrB;IAED,iBAAiB,IAAI,IAAI,CAGxB;IAED;;0EAEsE;IACtE,OAAO,CAAC,WAAW;IAInB,qFAAqF;IACrF,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,MAAM;IAYd,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,UAAU;IAyBlB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,QAAQ;IAUhB,OAAO,CAAC,SAAS,CAgCf;IAEF,OAAO,CAAC,OAAO,CAcb;IAEF;;;;2DAIuD;IACvD,OAAO,CAAC,SAAS;IAajB,OAAO,CAAC,aAAa,CAGnB;IAEF;;;;;;;;qBAQiB;IACjB,OAAO,CAAC,iBAAiB,CAiBvB;IAEF,OAAO,CAAC,aAAa,CAqBnB;IAEF,OAAO,CAAC,WAAW,CAEjB;IAEF,qFAAqF;IACrF,OAAO,CAAC,OAAO;IAef,MAAM,IAAI,cAAc,CA4BvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}