@latty-ds/web 0.10.3 → 1.0.0

package/dist/components/slider/index.js

@@ -35,7 +35,7 @@ __decorateClass([
 ], ThemeableElement.prototype, "theme", 2);
 
 // src/components/slider/slider.ts
-import { customElement as customElement3, property as property4, query as query2 } from "lit/decorators.js";
+import { customElement as customElement3, property as property4 } from "lit/decorators.js";
 
 // src/components/slider/slider.styles.ts
 import { css } from "lit";
@@ -65,17 +65,20 @@ var sliderStyles = css`
     width: 100%;
   }
 
-  /* Position the tooltip above the thumb rather than the track center */
+  /* Position the tooltip above the thumb rather than the track center. --_fill is a unitless 0–1 ratio (set from
+     JS on :host) — computed in CSS, not from a JS-read offsetWidth, so it can never drift after a resize or when
+     first shown from display:none (SLD-1). The thumb travels only (100% - thumb size), offset by half the thumb
+     so it's centered on the value, matching a native range input's own thumb geometry. */
   lt-tooltip::part(tooltip) {
-    left: var(--_thumb-left, 50%);
+    left: calc(var(--_fill, 0) * (100% - var(--lt-slider-thumb-size, 18px)) + var(--lt-slider-thumb-size, 18px) / 2);
   }
 
   input[type='range'] {
     appearance: none;
     background: linear-gradient(
       to right,
-      var(--lt-interactive-primary-bg) var(--lt-slider-fill, 0%),
-      var(--lt-border-strong) var(--lt-slider-fill, 0%)
+      var(--lt-interactive-primary-bg) calc(var(--_fill, 0) * 100%),
+      var(--lt-border-strong) calc(var(--_fill, 0) * 100%)
     );
     border-radius: 9999px;
     cursor: pointer;
@@ -162,17 +165,102 @@ var sliderStyles = css`
     --lt-slider-thumb-size: 22px;
   }
 
-  /* Disabled */
-  :host([disabled]) {
+  /* Disabled. :host(:disabled) — the browser matches this automatically for a form-associated element inside a
+     disabled <fieldset>, no JS required; :host([disabled]) covers the component's own explicit attribute. */
+  :host([disabled]),
+  :host(:disabled) {
     opacity: 0.5;
   }
 
-  :host([disabled]) input[type='range'] {
+  :host([disabled]) input[type='range'],
+  :host(:disabled) input[type='range'] {
     cursor: not-allowed;
     pointer-events: none;
   }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    input[type='range']::-webkit-slider-thumb,
+    input[type='range']::-moz-range-thumb {
+      transition: none;
+    }
+  }
+
+  /* ── Forced colors (Windows High Contrast) ─────────────────────────────────
+     Under forced-colors, the track's linear-gradient (WebKit/Chromium) and the Firefox ::-moz-range-track/
+     ::-moz-range-progress pair are all flattened to Canvas, with no border to fall back on — the whole track
+     disappears. Restoring a visible track boundary, plus a solid thumb fill, is enough: the thumb's own
+     position already conveys the value (the primary way a slider communicates it visually), matching how
+     native <input type="range"> itself renders under forced-colors in every engine — no attempt to also
+     recreate the fill-amount gradient with system colors, which native sliders don't do either. System color
+     keywords are exempt from the flattening and always resolve to the OS's own guaranteed-contrasting
+     palette. ─────────────────────────────────────────────────────────────────────────────────────────────── */
+
+  @media (forced-colors: active) {
+    input[type='range'] {
+      background: Canvas;
+      border: 1px solid ButtonText;
+    }
+
+    input[type='range']::-webkit-slider-thumb {
+      background: Highlight;
+      border-color: ButtonText;
+    }
+
+    input[type='range']::-moz-range-thumb {
+      background: Highlight;
+      border-color: ButtonText;
+    }
+
+    input[type='range']::-moz-range-track {
+      background: Canvas;
+      border: 1px solid ButtonText;
+    }
+
+    input[type='range']::-moz-range-progress {
+      background: Highlight;
+    }
+  }
 `;
 
+// src/components/shared/form-default.ts
+var FormDefaultController = class {
+  constructor(host, get) {
+    this._captured = false;
+    this._get = get;
+    host.addController(this);
+  }
+  hostConnected() {
+    if (this._captured) return;
+    this._captured = true;
+    this.value = this._get();
+  }
+};
+
+// src/components/shared/form-disabled.ts
+var FormDisabledController = class {
+  constructor(host) {
+    this._fieldsetDisabled = false;
+    this._host = host;
+    host.addController(this);
+  }
+  // No-op — this controller has no connect-time work of its own (formDisabledCallback drives it instead), but
+  // ReactiveController's members are all optional, and a class satisfying an all-optional interface with no
+  // members in common is a TS error (TS2559); this gives it one.
+  hostConnected() {
+  }
+  /** Whether an ancestor `<fieldset>` is currently disabled. */
+  get fieldsetDisabled() {
+    return this._fieldsetDisabled;
+  }
+  setFieldsetDisabled(disabled) {
+    if (this._fieldsetDisabled === disabled) return;
+    this._fieldsetDisabled = disabled;
+    this._host.requestUpdate();
+  }
+};
+
 // src/components/tooltip/tooltip.ts
 import { html as html2 } from "lit";
 import { customElement as customElement2, property as property3, query } from "lit/decorators.js";
@@ -187,20 +275,39 @@ var tooltipStyles = css2`
     --lt-tooltip-offset: 8px;
   }
 
+  /* The bubble is a "manual" popover so it renders in the top layer — above an open lt-dialog/lt-sidepanel
+     regardless of z-index, and never clipped by an overflow:hidden ancestor. Its position is set from JS (see
+     _reposition in tooltip.ts), since a top-layer element is positioned against the viewport, not the host.
+     display/overlay need allow-discrete so hidePopover() doesn't cut the exit fade short — same as lt-snackbar. */
   .tooltip {
     background: var(--lt-tooltip-bg, var(--lt-bg-inverse));
+    border: 0;
     border-radius: 4px;
     color: var(--lt-tooltip-color, var(--lt-text-inverse));
+    inset: auto;
+    margin: 0;
     opacity: 0;
+    overflow: visible;
     padding: var(--lt-spacing-1) var(--lt-spacing-2);
     pointer-events: none;
-    position: absolute;
+    position: fixed;
     transition:
       opacity 150ms ease,
-      visibility 150ms ease;
-    visibility: hidden;
+      display 150ms allow-discrete,
+      overlay 150ms allow-discrete;
     white-space: nowrap;
-    z-index: 1000;
+  }
+
+  .tooltip:popover-open {
+    opacity: 1;
+  }
+
+  /* A newly-shown popover has no earlier rendered frame to transition from — @starting-style supplies one so the
+     fade-in actually animates instead of snapping straight to the open state. */
+  @starting-style {
+    .tooltip:popover-open {
+      opacity: 0;
+    }
   }
 
   .arrow {
@@ -210,78 +317,60 @@ var tooltipStyles = css2`
     width: 0;
   }
 
-  :host(:hover) .tooltip,
-  :host(:focus-within) .tooltip {
-    opacity: 1;
-    visibility: visible;
-  }
-
   :host([disabled]) .tooltip,
   :host(:not([content])) .tooltip,
   :host([content='']) .tooltip {
     display: none;
   }
 
-  /* ── Top (default) ──────────────────────────── */
+  /* ── Arrows ─────────────────────────────────────────────────────────────── The bubble's own position is set
+     from JS; each arrow sits on the bubble edge facing the host. Centering is direction-symmetric, so
+     inset-inline-start:50% + translateX(-50%) is correct in both LTR and RTL. Start/end use logical properties, so
+     they flip with the page direction without a custom-property trick. ─────────────────────────── */
 
-  :host(:not([placement])) .tooltip,
-  :host([placement='top']) .tooltip {
-    bottom: calc(100% + var(--lt-tooltip-offset));
-    left: 50%;
-    transform: translateX(-50%);
-  }
+  /* ── Top (default) ──────────────────────────── */
 
   :host(:not([placement])) .arrow,
   :host([placement='top']) .arrow {
     border-top-color: var(--lt-tooltip-bg, var(--lt-color-neutral-900));
-    left: 50%;
+    inset-inline-start: 50%;
     top: 100%;
     transform: translateX(-50%);
   }
 
   /* ── Bottom ─────────────────────────────────── */
 
-  :host([placement='bottom']) .tooltip {
-    left: 50%;
-    top: calc(100% + var(--lt-tooltip-offset));
-    transform: translateX(-50%);
-  }
-
   :host([placement='bottom']) .arrow {
     border-bottom-color: var(--lt-tooltip-bg, var(--lt-color-neutral-900));
     bottom: 100%;
-    left: 50%;
+    inset-inline-start: 50%;
     transform: translateX(-50%);
   }
 
-  /* ── Left ───────────────────────────────────── */
+  /* ── Start ──────────────────────────────────── */
 
-  :host([placement='left']) .tooltip {
-    right: calc(100% + var(--lt-tooltip-offset));
+  :host([placement='start']) .arrow {
+    border-inline-start-color: var(--lt-tooltip-bg, var(--lt-color-neutral-900));
+    inset-inline-start: 100%;
     top: 50%;
     transform: translateY(-50%);
   }
 
-  :host([placement='left']) .arrow {
-    border-left-color: var(--lt-tooltip-bg, var(--lt-color-neutral-900));
-    left: 100%;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  /* ── Right ──────────────────────────────────── */
+  /* ── End ────────────────────────────────────── */
 
-  :host([placement='right']) .tooltip {
-    left: calc(100% + var(--lt-tooltip-offset));
+  :host([placement='end']) .arrow {
+    border-inline-end-color: var(--lt-tooltip-bg, var(--lt-color-neutral-900));
+    inset-inline-end: 100%;
     top: 50%;
     transform: translateY(-50%);
   }
 
-  :host([placement='right']) .arrow {
-    border-right-color: var(--lt-tooltip-bg, var(--lt-color-neutral-900));
-    right: 100%;
-    top: 50%;
-    transform: translateY(-50%);
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .tooltip {
+      transition: none;
+    }
   }
 `;
 
@@ -457,6 +546,20 @@ var textStyles = css3`
 `;
 
 // src/components/text/text.ts
+var ALLOWED_TAGS = /* @__PURE__ */ new Set([
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "p",
+  "span",
+  "div",
+  "label",
+  "strong",
+  "em"
+]);
 var VARIANT_TAG = {
   "display-2xl": "p",
   "display-xl": "p",
@@ -481,7 +584,8 @@ var Text = class extends ThemeableElement {
     this.as = "";
   }
   render() {
-    const tag = unsafeStatic(this.as || VARIANT_TAG[this.variant] || "p");
+    const requested = this.as && ALLOWED_TAGS.has(this.as) ? this.as : "";
+    const tag = unsafeStatic(requested || VARIANT_TAG[this.variant] || "p");
     return html`<${tag} part="base"><slot></slot></${tag}>`;
   }
 };
@@ -502,17 +606,117 @@ var Tooltip = class extends ThemeableElement {
   constructor() {
     super(...arguments);
     this._tooltipId = `lt-tooltip-${++_tooltipIdCounter}`;
+    this._hovered = false;
+    this._focused = false;
     this.content = "";
     this.placement = "top";
     this.disabled = false;
     this.background = "";
     this.color = "";
-  }
-  firstUpdated() {
+    // A top-layer popover is positioned against the viewport, not the host, so the bubble's fixed coordinates are
+    // computed here from the host's rect. Fixed coordinates need a physical side, so the logical start/end placements
+    // are resolved against the host's computed direction (start is the left side in LTR, the right side in RTL).
+    this._reposition = () => {
+      if (!this._isShown()) return;
+      const host = this.getBoundingClientRect();
+      const { width, height } = this._tooltipEl.getBoundingClientRect();
+      const style = getComputedStyle(this);
+      const offset = parseFloat(style.getPropertyValue("--lt-tooltip-offset")) || 8;
+      const rtl = style.direction === "rtl";
+      let left;
+      let top;
+      switch (this.placement) {
+        case "bottom":
+          left = host.left + host.width / 2 - width / 2;
+          top = host.bottom + offset;
+          break;
+        case "start":
+        case "end": {
+          const onLeft = this.placement === "start" !== rtl;
+          left = onLeft ? host.left - offset - width : host.right + offset;
+          top = host.top + host.height / 2 - height / 2;
+          break;
+        }
+        default:
+          left = host.left + host.width / 2 - width / 2;
+          top = host.top - offset - height;
+      }
+      this._tooltipEl.style.left = `${left}px`;
+      this._tooltipEl.style.top = `${top}px`;
+    };
+    this._onPointerEnter = () => {
+      this._hovered = true;
+      this._sync();
+    };
+    this._onPointerLeave = () => {
+      this._hovered = false;
+      this._sync();
+    };
+    this._onFocusIn = () => {
+      this._focused = true;
+      this._sync();
+    };
+    this._onFocusOut = (e) => {
+      if (this.contains(e.relatedTarget)) return;
+      this._focused = false;
+      this._sync();
+    };
+  }
+  // aria-describedby's id lookup only works within one tree: the tooltip bubble lives in this element's own
+  // shadow root, but the trigger the id is set on is the slotted (light DOM) element — an id reference can't
+  // cross that boundary, so no AT ever actually announces it (verified: resolves to nothing in the accessibility
+  // tree). aria-description carries the text itself, so there's no id, and nothing to fail to resolve.
+  _describeTrigger() {
     const trigger = this._slot?.assignedElements()[0];
-    if (trigger) {
-      trigger.setAttribute("aria-describedby", this._tooltipId);
+    trigger?.setAttribute("aria-description", this.content);
+  }
+  _isShown() {
+    return this._tooltipEl?.matches(":popover-open") ?? false;
+  }
+  _sync() {
+    const shouldShow = (this._hovered || this._focused) && !this.disabled && !!this.content;
+    if (shouldShow) this._show();
+    else this._hide();
+  }
+  _show() {
+    if (!this._isShown()) {
+      this._tooltipEl.showPopover();
+      window.addEventListener("scroll", this._reposition, true);
+      window.addEventListener("resize", this._reposition);
     }
+    this._reposition();
+  }
+  _hide() {
+    if (!this._isShown()) return;
+    this._tooltipEl.hidePopover();
+    window.removeEventListener("scroll", this._reposition, true);
+    window.removeEventListener("resize", this._reposition);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("pointerenter", this._onPointerEnter);
+    this.addEventListener("pointerleave", this._onPointerLeave);
+    this.addEventListener("focusin", this._onFocusIn);
+    this.addEventListener("focusout", this._onFocusOut);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("pointerenter", this._onPointerEnter);
+    this.removeEventListener("pointerleave", this._onPointerLeave);
+    this.removeEventListener("focusin", this._onFocusIn);
+    this.removeEventListener("focusout", this._onFocusOut);
+    this._hovered = false;
+    this._focused = false;
+    this._hide();
+  }
+  firstUpdated() {
+    this._describeTrigger();
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("content")) this._describeTrigger();
+    if (changed.has("content") || changed.has("disabled")) this._sync();
+    else if (changed.has("placement")) this._reposition();
   }
   render() {
     const tooltipStyle = styleMap({
@@ -521,7 +725,15 @@ var Tooltip = class extends ThemeableElement {
     });
     return html2`
       <slot></slot>
-      <div class="tooltip" id=${this._tooltipId} role="tooltip" part="tooltip" aria-hidden="true" style=${tooltipStyle}>
+      <div
+        class="tooltip"
+        id=${this._tooltipId}
+        popover="manual"
+        role="tooltip"
+        part="tooltip"
+        aria-hidden="true"
+        style=${tooltipStyle}
+      >
         <lt-text variant="caption" as="span">${this.content}</lt-text>
         <span class="arrow" part="arrow"></span>
       </div>
@@ -532,6 +744,9 @@ Tooltip.styles = tooltipStyles;
 __decorateClass([
   query("slot")
 ], Tooltip.prototype, "_slot", 2);
+__decorateClass([
+  query(".tooltip")
+], Tooltip.prototype, "_tooltipEl", 2);
 __decorateClass([
   property3({ reflect: true })
 ], Tooltip.prototype, "content", 2);
@@ -555,6 +770,8 @@ Tooltip = __decorateClass([
 var Slider = class extends ThemeableElement {
   constructor() {
     super();
+    this._default = new FormDefaultController(this, () => this.value);
+    this._fieldsetDisabled = new FormDisabledController(this);
     this.size = "md";
     this.disabled = false;
     this.tooltip = false;
@@ -566,26 +783,44 @@ var Slider = class extends ThemeableElement {
     this.name = "";
     this._internals = this.attachInternals();
   }
-  get _fillPercent() {
-    return (this.value - this.min) / (this.max - this.min) * 100;
+  // A unitless 0–1 ratio, not a percentage — CSS derives both the track's fill percentage and the tooltip's
+  // thumb-following offset from it via calc() (SLD-1), so there's only one number to keep in sync.
+  get _fillRatio() {
+    if (this.max === this.min) return 0;
+    return (this.value - this.min) / (this.max - this.min);
+  }
+  /** Clamps to [min, max] and snaps to the nearest step from min, matching how a native <input type="range">
+   * sanitizes its own value — including when `value`/`min`/`max`/`step` are set programmatically, which a native
+   * range input clamps on its own internal value but this component didn't mirror onto its own `value` property
+   * (SLD-1: `value` wasn't clamped/stepped, so e.g. `value=150` with `max=100` produced a 150% fill and
+   * submitted "150" to the form even though the visible thumb was pinned at the end). */
+  _sanitize(value) {
+    if (this.min === this.max) return this.min;
+    const clamped = Math.min(this.max, Math.max(this.min, value));
+    if (this.step <= 0) return clamped;
+    const steps = Math.round((clamped - this.min) / this.step);
+    return Math.min(this.max, Math.max(this.min, this.min + steps * this.step));
   }
-  _thumbSizePx() {
-    return { sm: 14, md: 18, lg: 22 }[this.size] ?? 18;
+  willUpdate(changed) {
+    if (changed.has("value") || changed.has("min") || changed.has("max") || changed.has("step")) {
+      const sanitized = this._sanitize(this.value);
+      if (sanitized !== this.value) this.value = sanitized;
+    }
   }
   updated() {
-    const fill = this._fillPercent;
-    this.style.setProperty("--_fill", `${fill}%`);
-    const trackW = this.input?.offsetWidth ?? 0;
-    if (trackW) {
-      const thumbPx = this._thumbSizePx();
-      const centerPx = fill / 100 * (trackW - thumbPx) + thumbPx / 2;
-      this.style.setProperty("--_thumb-left", `${centerPx / trackW * 100}%`);
-    }
+    this.style.setProperty("--_fill", String(this._fillRatio));
     this._internals.setFormValue(String(this.value));
     this._internals.setValidity({});
   }
   formResetCallback() {
-    this.value = this.min;
+    this.value = this._default.value;
+  }
+  formDisabledCallback(disabled) {
+    this._fieldsetDisabled.setFieldsetDisabled(disabled);
+  }
+  /** `this.disabled` combined with an ancestor `<fieldset>`'s own disabled state (see `FormDisabledController`). */
+  get _isDisabled() {
+    return this.disabled || this._fieldsetDisabled.fieldsetDisabled;
   }
   checkValidity() {
     return this._internals.checkValidity();
@@ -626,7 +861,7 @@ var Slider = class extends ThemeableElement {
         max=${this.max}
         step=${this.step}
         .value=${String(this.value)}
-        ?disabled=${this.disabled}
+        ?disabled=${this._isDisabled}
         name=${this.name}
         aria-label=${this.label || "slider"}
         aria-valuemin=${this.min}
@@ -665,7 +900,7 @@ __decorateClass([
   property4({ type: Number })
 ], Slider.prototype, "step", 2);
 __decorateClass([
-  property4({ type: Number, reflect: true })
+  property4({ type: Number })
 ], Slider.prototype, "value", 2);
 __decorateClass([
   property4({ reflect: true })
@@ -673,9 +908,6 @@ __decorateClass([
 __decorateClass([
   property4({ reflect: true })
 ], Slider.prototype, "name", 2);
-__decorateClass([
-  query2("input")
-], Slider.prototype, "input", 2);
 Slider = __decorateClass([
   customElement3("lt-slider")
 ], Slider);

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

@@ -1,3 +1,4 @@
+import { type PropertyValues } from 'lit';
 import { ThemeableElement } from '../../base';
 import type { SliderSize } from './slider.types';
 import '../tooltip/tooltip';
@@ -13,6 +14,8 @@ export declare class Slider extends ThemeableElement {
     static styles: import("lit").CSSResult;
     static formAssociated: boolean;
     private _internals;
+    private _default;
+    private _fieldsetDisabled;
     constructor();
     size: SliderSize;
     disabled: boolean;
@@ -21,16 +24,26 @@ export declare class Slider extends ThemeableElement {
     min: number;
     max: number;
     step: number;
+    /** Not reflected as an attribute — read the property, or the `change` event's `detail.value`, instead of
+     * `getAttribute('value')`/`[value]`. */
     value: number;
     /** Label displayed above the track */
     label: string;
     /** Name attribute for form submission */
     name: string;
-    private input;
-    private get _fillPercent();
-    private _thumbSizePx;
+    private get _fillRatio();
+    /** Clamps to [min, max] and snaps to the nearest step from min, matching how a native <input type="range">
+     * sanitizes its own value — including when `value`/`min`/`max`/`step` are set programmatically, which a native
+     * range input clamps on its own internal value but this component didn't mirror onto its own `value` property
+     * (SLD-1: `value` wasn't clamped/stepped, so e.g. `value=150` with `max=100` produced a 150% fill and
+     * submitted "150" to the form even though the visible thumb was pinned at the end). */
+    private _sanitize;
+    willUpdate(changed: PropertyValues): void;
     updated(): void;
     formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    /** `this.disabled` combined with an ancestor `<fieldset>`'s own disabled state (see `FormDisabledController`). */
+    private get _isDisabled();
     checkValidity(): boolean;
     reportValidity(): boolean;
     private _onInput;