@tartaguti/ui-components 0.0.0-stage → 0.2.0

package/dist/tt-skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-skeleton.d.ts","sourceRoot":"","sources":["../src/tt-skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;GAIG;AACH,qBACa,UAAW,SAAQ,UAAU;IAExC,OAAO,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAU;IAI3B,KAAK,SAAM;IACX,MAAM,SAAM;IAGZ,KAAK,SAAK;IAEtC,MAAM,CAAC,MAAM,0BAyEX;IAEF,MAAM;CAiCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/tt-skeleton.js

@@ -0,0 +1,143 @@
+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 { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+/**
+ * Placeholder shape shown while data loads. Use it in the same layout as
+ * the real content so nothing jumps when the data arrives: a skeleton
+ * that is a different size than what replaces it is worse than a spinner.
+ */
+let TTSkeleton = class TTSkeleton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = "text";
+        // Any CSS length. Text lines often want a varied width so a paragraph
+        // does not look like a solid block.
+        this.width = "";
+        this.height = "";
+        // Number of stacked lines, for the text variant.
+        this.lines = 1;
+    }
+    static { this.styles = css `
+    /* The browser's own [hidden] rule loses to any :host display, so a
+       hidden element would still show. Important, so it always wins. */
+    :host([hidden]) {
+      display: none !important;
+    }
+
+    :host {
+      display: block;
+    }
+
+    .stack {
+      display: flex;
+      flex-direction: column;
+      gap: var(--tt-space-2);
+    }
+
+    .bone {
+      background: var(--tt-muted);
+      border-radius: var(--tt-radius-sm);
+
+      /* A moving highlight rather than a pulse: it reads as "loading"
+         instead of "broken and flashing". */
+      background-image: linear-gradient(
+        90deg,
+        transparent 0%,
+        color-mix(in srgb, var(--tt-foreground) 6%, transparent) 50%,
+        transparent 100%
+      );
+      background-size: 200% 100%;
+      background-repeat: no-repeat;
+
+      animation: shimmer 1.4s ease-in-out infinite;
+    }
+
+    :host([variant="text"]) .bone {
+      height: 0.85em;
+      border-radius: var(--tt-radius-sm);
+    }
+
+    :host([variant="title"]) .bone {
+      height: 1.4em;
+      border-radius: var(--tt-radius-sm);
+    }
+
+    :host([variant="circle"]) .bone {
+      border-radius: var(--tt-radius-full);
+      aspect-ratio: 1;
+    }
+
+    :host([variant="rect"]) .bone {
+      border-radius: var(--tt-radius);
+    }
+
+    /* The last line of a paragraph is rarely full width. */
+    .stack .bone:last-child:not(:only-child) {
+      width: 70%;
+    }
+
+    @keyframes shimmer {
+      from { background-position: 200% 0; }
+      to { background-position: -200% 0; }
+    }
+
+    /* Cannot come from a token: an infinite animation at 1ms strobes rather
+       than stops, so the shimmer has to be switched off properly. Everything
+       else in the library is handled centrally in tokens.css. */
+
+    @media (prefers-reduced-motion: reduce) {
+      .bone {
+        animation: none;
+      }
+    }
+  `; }
+    render() {
+        /*
+          A width of "10px; position: fixed" used to write a second
+          declaration into the style string. styleMap sets one property per
+          key on every update, but its FIRST render still joins them into one
+          string, so each value is also checked to be a single valid value for
+          its property. Anything else, empty included, is dropped and leaves
+          the CSS default.
+        */
+        const valid = (property, value) => value && CSS.supports(property, value) ? value : undefined;
+        const style = styleMap({
+            width: valid("width", this.width),
+            height: valid("height", this.height),
+        });
+        const count = this.variant === "text" ? Math.max(1, this.lines) : 1;
+        return html `
+      <!--
+        aria-hidden and aria-busy: a screen reader should hear "loading",
+        not a description of grey rectangles. Put aria-busy on the region
+        being replaced.
+      -->
+      <div class="stack" part="stack" aria-hidden="true">
+        ${Array.from({ length: count }, () => html `<div class="bone" part="bone" style=${style}></div>`)}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], TTSkeleton.prototype, "variant", void 0);
+__decorate([
+    property({ type: String })
+], TTSkeleton.prototype, "width", void 0);
+__decorate([
+    property({ type: String })
+], TTSkeleton.prototype, "height", void 0);
+__decorate([
+    property({ type: Number })
+], TTSkeleton.prototype, "lines", void 0);
+TTSkeleton = __decorate([
+    customElement("tt-skeleton")
+], TTSkeleton);
+export { TTSkeleton };
+//# sourceMappingURL=tt-skeleton.js.map

package/dist/tt-skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-skeleton.js","sourceRoot":"","sources":["../src/tt-skeleton.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD;;;;GAIG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAEL,YAAO,GAAyC,MAAM,CAAC;QAEvD,sEAAsE;QACtE,oCAAoC;QACR,UAAK,GAAG,EAAE,CAAC;QACX,WAAM,GAAG,EAAE,CAAC;QAExC,iDAAiD;QACrB,UAAK,GAAG,CAAC,CAAC;IA8GxC,CAAC;aA5GQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyElB,AAzEY,CAyEX;IAEF,MAAM;QACJ;;;;;;;UAOE;QACF,MAAM,KAAK,GAAG,CAAC,QAAgB,EAAE,KAAa,EAAE,EAAE,CAChD,KAAK,IAAI,GAAG,CAAC,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;QAE7D,MAAM,KAAK,GAAG,QAAQ,CAAC;YACrB,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;YACjC,MAAM,EAAE,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC;SACrC,CAAC,CAAC;QAEH,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAEpE,OAAO,IAAI,CAAA;;;;;;;UAOL,KAAK,CAAC,IAAI,CACV,EAAE,MAAM,EAAE,KAAK,EAAE,EACjB,GAAG,EAAE,CAAC,IAAI,CAAA,uCAAuC,KAAK,SAAS,CAChE;;KAEJ,CAAC;IACJ,CAAC;;AArHD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACa;AAI3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAY;AACX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAa;AAGZ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAW;AAV3B,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAwHtB"}

package/dist/tt-slider.d.ts

@@ -0,0 +1,74 @@
+import { LitElement } from "lit";
+import type { PropertyValues } from "lit";
+/**
+ * A value picked from a range.
+ *
+ * ---------------------------------------------------------------------
+ * IT WRAPS A REAL `<input type="range">`, AND THAT IS THE DESIGN.
+ *
+ * A div with a draggable dot is about forty lines to make look right and
+ * several hundred to make correct. The native input already ships:
+ *
+ *   - Arrow keys, Home, End, Page Up, Page Down, all with the right step
+ *   - role="slider" with aria-valuenow / valuemin / valuemax kept in sync
+ *   - pointer capture, so a drag survives leaving the element
+ *   - touch, pen and mouse without a line of code
+ *   - correct behaviour in a form, including reset
+ *
+ * Every one of those is a thing hand-rolled sliders get wrong. So this
+ * component styles the native control rather than replacing it. The cost
+ * is four vendor pseudo-elements below; the alternative cost is the list
+ * above.
+ *
+ * ---------------------------------------------------------------------
+ * TWO EVENTS, BECAUSE THERE ARE TWO QUESTIONS.
+ *
+ *   tt-input   fires continuously while dragging. Use it to update a
+ *              preview: a live number, a colour, a zoom level.
+ *   tt-change  fires once, when the drag is released. Use it to save.
+ *
+ * Collapsing them into one would force every consumer that writes to a
+ * server to debounce, and every consumer that draws a preview to poll.
+ * The platform already draws this line and this keeps it.
+ *
+ * It owns its own `value`, like the native input it wraps. Setting the
+ * property from outside still wins.
+ */
+export declare class TTSlider extends LitElement {
+    static formAssociated: boolean;
+    private internals;
+    name: string;
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    label: string;
+    labelHidden: boolean;
+    showValue: boolean;
+    unit: string;
+    disabled: boolean;
+    private control;
+    private sliderId;
+    get form(): HTMLFormElement | null;
+    get validity(): ValidityState;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    focus(options?: FocusOptions): void;
+    connectedCallback(): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    updated(changed: PropertyValues): void;
+    private syncFormState;
+    /** How far along the track the value sits, 0 to 100. */
+    private get percent();
+    private handleInput;
+    private handleChange;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-slider": TTSlider;
+    }
+}
+//# sourceMappingURL=tt-slider.d.ts.map

package/dist/tt-slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-slider.d.ts","sourceRoot":"","sources":["../src/tt-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAQ1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAO,CAAC,SAAS,CAA0B;IASA,IAAI,SAAM;IAEzB,KAAK,SAAM;IAEX,GAAG,SAAK;IACR,GAAG,SAAO;IACV,IAAI,SAAK;IAET,KAAK,SAAM;IAIvC,WAAW,UAAS;IAKkC,SAAS,UAAS;IAG5C,IAAI,SAAM;IAEM,QAAQ,UAAS;IAE7C,OAAO,CAAC,OAAO,CAAoB;IAEnD,OAAO,CAAC,QAAQ,CAAwB;IAExC,IAAI,IAAI,2BAEP;IAED,IAAI,QAAQ,kBAEX;IAID,aAAa;IAIb,cAAc;IAUd,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B,iBAAiB;IAKjB,iBAAiB;IASjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAKtC,OAAO,CAAC,OAAO,EAAE,cAAc;IAW/B,OAAO,CAAC,aAAa;IAIrB,wDAAwD;IACxD,OAAO,KAAK,OAAO,GASlB;IAED,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,YAAY;IAiBpB,MAAM,CAAC,MAAM,4BA0LV;IAEH,MAAM;CAkDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/tt-slider.js

@@ -0,0 +1,426 @@
+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 { LitElement, html, css } from "lit";
+import { property, customElement, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { srOnly } from "./sr-only.js";
+let uid = 0;
+/**
+ * A value picked from a range.
+ *
+ * ---------------------------------------------------------------------
+ * IT WRAPS A REAL `<input type="range">`, AND THAT IS THE DESIGN.
+ *
+ * A div with a draggable dot is about forty lines to make look right and
+ * several hundred to make correct. The native input already ships:
+ *
+ *   - Arrow keys, Home, End, Page Up, Page Down, all with the right step
+ *   - role="slider" with aria-valuenow / valuemin / valuemax kept in sync
+ *   - pointer capture, so a drag survives leaving the element
+ *   - touch, pen and mouse without a line of code
+ *   - correct behaviour in a form, including reset
+ *
+ * Every one of those is a thing hand-rolled sliders get wrong. So this
+ * component styles the native control rather than replacing it. The cost
+ * is four vendor pseudo-elements below; the alternative cost is the list
+ * above.
+ *
+ * ---------------------------------------------------------------------
+ * TWO EVENTS, BECAUSE THERE ARE TWO QUESTIONS.
+ *
+ *   tt-input   fires continuously while dragging. Use it to update a
+ *              preview: a live number, a colour, a zoom level.
+ *   tt-change  fires once, when the drag is released. Use it to save.
+ *
+ * Collapsing them into one would force every consumer that writes to a
+ * server to debounce, and every consumer that draws a preview to poll.
+ * The platform already draws this line and this keeps it.
+ *
+ * It owns its own `value`, like the native input it wraps. Setting the
+ * property from outside still wins.
+ */
+let TTSlider = class TTSlider extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.internals = this.attachInternals();
+        /*
+          Reflected, and it has to be. A form-associated custom element is
+          submitted under its name CONTENT ATTRIBUTE, not its JS property.
+          Without reflect, setting .name from script leaves the attribute
+          absent and the field vanishes from FormData with no error anywhere.
+          Same trap as tt-switch and tt-checkbox-group.
+        */
+        this.name = "";
+        this.value = 50;
+        this.min = 0;
+        this.max = 100;
+        this.step = 1;
+        this.label = "";
+        // Hides the label but keeps it as the control's name, as on tt-input.
+        this.labelHidden = false;
+        // Prints the current value beside the label. Off by default: on a
+        // slider whose meaning is relative (volume, opacity) the number is
+        // noise, and on one whose meaning is absolute it is essential.
+        this.showValue = false;
+        // Appended to the printed value only. Never part of the form value.
+        this.unit = "";
+        this.disabled = false;
+        this.sliderId = `tt-slider-${++uid}`;
+    }
+    static { this.formAssociated = true; }
+    get form() {
+        return this.internals.form;
+    }
+    get validity() {
+        return this.internals.validity;
+    }
+    // Form-associated elements do not get these for free, and tt-form
+    // calls them rather than reaching into internals.
+    checkValidity() {
+        return this.internals.checkValidity();
+    }
+    reportValidity() {
+        return this.internals.reportValidity();
+    }
+    /*
+      Focus has to be forwarded by hand. Calling focus() on a custom
+      element focuses the host, not the control inside its shadow root, so
+      without this a form trying to jump to its first invalid field would
+      move focus to something that cannot receive a keystroke.
+    */
+    focus(options) {
+        this.control?.focus(options);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.syncFormState();
+    }
+    formResetCallback() {
+        /*
+          Back to the middle of the range rather than to 0, because 0 may not
+          be in the range at all. A slider from 200 to 800 reset to 0 would
+          be outside its own bounds.
+        */
+        this.value = this.min + (this.max - this.min) / 2;
+    }
+    formStateRestoreCallback(state) {
+        const restored = Number(state);
+        if (!Number.isNaN(restored))
+            this.value = restored;
+    }
+    updated(changed) {
+        if (changed.has("value") ||
+            changed.has("min") ||
+            changed.has("max") ||
+            changed.has("name")) {
+            this.syncFormState();
+        }
+    }
+    syncFormState() {
+        this.internals.setFormValue(String(this.value));
+    }
+    /** How far along the track the value sits, 0 to 100. */
+    get percent() {
+        const span = this.max - this.min;
+        // A zero-width range is a configuration mistake, not a crash. Show a
+        // full track rather than dividing by zero and painting NaN.
+        if (span <= 0)
+            return 100;
+        const clamped = Math.min(this.max, Math.max(this.min, this.value));
+        return ((clamped - this.min) / span) * 100;
+    }
+    handleInput(event) {
+        const next = Number(event.target.value);
+        this.value = next;
+        this.dispatchEvent(new CustomEvent("tt-input", {
+            detail: { value: next },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleChange(event) {
+        /*
+          Stops the native `change` here. It is composed by default, so it
+          would cross the shadow boundary and arrive at a listener as an
+          untyped event that looks like tt-change but carries no detail.
+        */
+        event.stopPropagation();
+        this.dispatchEvent(new CustomEvent("tt-change", {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    static { this.styles = [srOnly, css `
+    /* The browser's own [hidden] rule loses to any :host display, so a
+       hidden element would still show. Important, so it always wins. */
+    :host([hidden]) {
+      display: none !important;
+    }
+
+    :host {
+      display: block;
+
+      font-family: var(--tt-font-sans);
+      -webkit-font-smoothing: antialiased;
+
+      color: var(--tt-foreground);
+    }
+
+    :host([disabled]) {
+      opacity: var(--tt-opacity-disabled);
+      pointer-events: none;
+    }
+
+    .head {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      gap: var(--tt-space-3);
+
+      margin-bottom: var(--tt-space-2);
+    }
+
+    label {
+      font-size: var(--tt-text-sm);
+      font-weight: var(--tt-weight-medium);
+    }
+
+    .value {
+      font-family: var(--tt-font-mono);
+      font-size: var(--tt-text-xs);
+      color: var(--tt-muted-foreground);
+
+      /* Tabular figures, so the number does not shuffle sideways while
+         you drag. A proportional 1 is narrower than a 0. */
+      font-variant-numeric: tabular-nums;
+    }
+
+    /* ---- the control ----
+
+       appearance: none is required before ANY of the vendor
+       pseudo-elements below will take effect. Without it the browser
+       keeps its own widget and every rule underneath is silently
+       ignored, which reads as "my CSS does nothing". */
+
+    input {
+      -webkit-appearance: none;
+      appearance: none;
+
+      display: block;
+      width: 100%;
+      margin: 0;
+
+      background: transparent;
+      cursor: pointer;
+    }
+
+    input:disabled {
+      cursor: not-allowed;
+    }
+
+    /* The filled part is painted with a gradient on the track rather
+       than with a second element, so there is nothing to keep in sync
+       with the thumb position. One number, --_pct, drives both. */
+
+    /* Chrome, Edge, Safari */
+    input::-webkit-slider-runnable-track {
+      height: 6px;
+      border-radius: var(--tt-radius-full);
+      background: linear-gradient(
+        to right,
+        var(--tt-primary) 0 var(--_pct),
+        var(--tt-muted) var(--_pct) 100%
+      );
+    }
+
+    input::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+
+      width: 16px;
+      height: 16px;
+
+      /* Centres the thumb on the track: half the thumb minus half the
+         track. Webkit aligns the thumb's TOP to the track's top, unlike
+         Firefox, which centres it for you. */
+      margin-top: -5px;
+
+      border: 2px solid var(--tt-primary);
+      border-radius: var(--tt-radius-full);
+      background: var(--tt-background);
+
+      box-shadow: var(--tt-elevation-1);
+
+      transition: transform var(--tt-duration-fast) var(--tt-ease-out);
+    }
+
+    input:hover::-webkit-slider-thumb,
+    input:active::-webkit-slider-thumb {
+      transform: scale(1.15);
+    }
+
+    /* Firefox */
+    input::-moz-range-track {
+      height: 6px;
+      border-radius: var(--tt-radius-full);
+      background: var(--tt-muted);
+    }
+
+    input::-moz-range-progress {
+      height: 6px;
+      border-radius: var(--tt-radius-full);
+      background: var(--tt-primary);
+    }
+
+    input::-moz-range-thumb {
+      width: 16px;
+      height: 16px;
+
+      border: 2px solid var(--tt-primary);
+      border-radius: var(--tt-radius-full);
+      background: var(--tt-background);
+
+      transition: transform var(--tt-duration-fast) var(--tt-ease-out);
+    }
+
+    input:hover::-moz-range-thumb,
+    input:active::-moz-range-thumb {
+      transform: scale(1.15);
+    }
+
+    /*
+      The token file's one focus recipe: an outline, never a box-shadow.
+      It goes on .field, the box around everything, rather than on the
+      input, because the input is only as tall as its thumb and a ring
+      drawn on it would cut through the track.
+
+      ---------------------------------------------------------------
+      :has(input:focus-visible), NOT :focus-within.
+
+      They look interchangeable and are not.
+
+        :focus-within   true whenever anything inside holds focus, and
+                        clicking a slider gives it focus. So dragging
+                        the thumb with a mouse drew a ring around the
+                        whole component, which is not what a ring is
+                        for: the pointer user can already see what they
+                        grabbed.
+
+        :focus-visible  the browser's own judgement about whether a
+                        ring is WARRANTED. Keyboard focus matches;
+                        a mouse press on a slider does not. Arrow-key
+                        after a click does, which is right.
+
+      Note the element: a wrapper inside the shadow root, NOT the host.
+
+      This first shipped as :host:has(input:focus-visible), and Firefox
+      had no keyboard ring at all. The host is a strange element from
+      inside its own stylesheet, and engines disagree on whether :has()
+      on it may look into the shadow tree: Chrome says yes, Firefox says
+      no. :host(:has(...)) is no better, it searches the host's light-DOM
+      children and never finds the input in here. An ordinary element
+      in the shadow tree has no such question, so the ring lives on one
+      and every engine agrees.
+
+      The ring cannot live on the input itself either: the input is
+      thumb-height, so a ring on it cuts the track in half. So the input
+      suppresses its own ring and .field draws one, keyed off the
+      input's state.
+    */
+    input:focus-visible {
+      outline: none;
+    }
+
+    .field:has(input:focus-visible) {
+      border-radius: var(--tt-radius-sm);
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+    }
+  `]; }
+    render() {
+        const showHead = this.label !== "" || this.showValue;
+        // .field exists only to draw the focus ring; see the styles above.
+        return html `
+      <div class="field">
+        ${showHead
+            ? html `
+                <div class="head">
+                  <label
+                    for=${this.sliderId}
+                    part="label"
+                    class=${this.labelHidden ? "sr-only" : ""}
+                  >${this.label}</label>
+
+                  ${this.showValue
+                ? html `<span class="value" part="value"
+                          >${this.value}${this.unit}</span
+                        >`
+                : ""}
+                </div>
+              `
+            : ""}
+
+        <!-- aria-valuetext carries the unit. Without it a screen reader read
+             "40" for a slider the screen showed as "40%". -->
+        <input
+          id=${this.sliderId}
+          type="range"
+          part="input"
+          style=${`--_pct: ${this.percent}%`}
+          .value=${String(this.value)}
+          min=${this.min}
+          max=${this.max}
+          step=${this.step}
+          ?disabled=${this.disabled}
+          aria-label=${ifDefined(this.label ? undefined : "Value")}
+          aria-valuetext=${ifDefined(this.unit ? `${this.value}${this.unit}` : undefined)}
+          @input=${this.handleInput}
+          @change=${this.handleChange}
+        />
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], TTSlider.prototype, "name", void 0);
+__decorate([
+    property({ type: Number })
+], TTSlider.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], TTSlider.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], TTSlider.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], TTSlider.prototype, "step", void 0);
+__decorate([
+    property({ type: String })
+], TTSlider.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "label-hidden", reflect: true })
+], TTSlider.prototype, "labelHidden", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "show-value" })
+], TTSlider.prototype, "showValue", void 0);
+__decorate([
+    property({ type: String })
+], TTSlider.prototype, "unit", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTSlider.prototype, "disabled", void 0);
+__decorate([
+    query("input")
+], TTSlider.prototype, "control", void 0);
+TTSlider = __decorate([
+    customElement("tt-slider")
+], TTSlider);
+export { TTSlider };
+//# sourceMappingURL=tt-slider.js.map

package/dist/tt-slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-slider.js","sourceRoot":"","sources":["../src/tt-slider.ts"],"names":[],"mappings":"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"}