@tartaguti/ui-components 0.0.0-stage → 0.2.0

package/dist/tt-toast.js

@@ -0,0 +1,440 @@
+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, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { srOnly } from "./sr-only.js";
+import { afterTransitions } from "./motion.js";
+import "./tt-icon.js";
+let toastId = 0;
+/*
+  The most toasts shown at once.
+
+  Without a cap, holding down a button that toasts builds a column that
+  eventually fills the viewport, and since each toast takes pointer
+  events, the page underneath stops being clickable. Three is enough to
+  show that several things happened without becoming the page.
+*/
+const MAX_VISIBLE = 3;
+/**
+ * Drop one of these anywhere in the app, then call the module-level
+ * toast() from anywhere else. Notifications are global by nature, so
+ * routing every message down through props would mean every component
+ * in the tree carrying a notify callback it does not otherwise need.
+ */
+let TTToast = class TTToast extends LitElement {
+    constructor() {
+        super(...arguments);
+        /*
+          REFLECTED, and that is not optional here. Every position rule is a
+          :host([position="..."]) selector, and a selector matches an ATTRIBUTE,
+          never a property. Without reflect, setting toastEl.position = "top-right"
+          in script changed the property, matched no rule, and left the element
+          with position: fixed and no offsets at all, so it sat wherever the
+          layout happened to put it. Writing it as an attribute in HTML worked,
+          which is exactly the kind of split that hides a bug.
+      
+          Top by default. A toast at the bottom of a phone lands under the
+          thumb, over the home indicator, and on top of whatever action just
+          triggered it. All four values remain available, and on screens up to
+          768px wide the bottom ones move to the top anyway (see the styles).
+        */
+        this.position = "top-right";
+        this.items = [];
+        /*
+          Toasts on their way out: dismissed, timed out, or pushed off by the
+          cap. Kept apart from `items` because they are no longer toasts, only
+          the picture of one fading. They cannot be hovered, focused or counted,
+          and they leave once afterTransitions says their transition is done.
+        */
+        this.leaving = [];
+        this.exits = new Map();
+        /*
+          What the two live regions below currently say. See render().
+        */
+        this.politeText = "";
+        this.alertText = "";
+        this.timers = new Map();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        registry.add(this);
+    }
+    disconnectedCallback() {
+        registry.delete(this);
+        this.timers.forEach((timer) => clearTimeout(timer));
+        this.timers.clear();
+        this.exits.forEach((cancel) => cancel());
+        this.exits.clear();
+        this.leaving = [];
+        super.disconnectedCallback();
+    }
+    // Each leaving toast is timed once, after the render that gave it its
+    // exit styles, so the durations read are the exit ones.
+    updated() {
+        for (const item of this.leaving) {
+            if (this.exits.has(item.id))
+                continue;
+            const node = this.renderRoot.querySelector(`[data-toast="${item.id}"]`);
+            this.exits.set(item.id, afterTransitions([node], () => {
+                this.exits.delete(item.id);
+                this.leaving = this.leaving.filter((gone) => gone !== item);
+            }));
+        }
+    }
+    show(options) {
+        const variant = options.variant ?? "neutral";
+        const duration = options.duration ?? 4000;
+        /*
+          The same message twice is one message that happened twice.
+    
+          Pressing Add to basket five times used to stack five identical
+          toasts. Now the existing one counts up and its timer restarts, so
+          the feedback still says "that registered" without the screen
+          filling. Matched on message AND variant, since the same words as a
+          success and as an error are different events.
+        */
+        const existing = this.items.find((item) => item.message === options.message && item.variant === variant);
+        if (existing) {
+            this.items = this.items.map((item) => item === existing ? { ...item, count: item.count + 1 } : item);
+            this.restartTimer(existing.id, duration);
+            this.announce(options.message, variant);
+            return;
+        }
+        const item = {
+            id: ++toastId,
+            message: options.message,
+            variant,
+            duration,
+            count: 1,
+        };
+        /*
+          Oldest out once the cap is reached, rather than refusing the new
+          one: the newest message is the one the user just caused, so it is
+          the one that must be visible.
+        */
+        const next = [...this.items, item].slice(-MAX_VISIBLE);
+        const dropped = this.items.filter((old) => !next.includes(old));
+        dropped.forEach((old) => this.clearTimer(old.id));
+        this.items = next;
+        this.leaving = [...this.leaving, ...dropped];
+        this.restartTimer(item.id, duration);
+        this.announce(item.message, variant);
+    }
+    clearTimer(id) {
+        const timer = this.timers.get(id);
+        if (timer) {
+            clearTimeout(timer);
+            this.timers.delete(id);
+        }
+    }
+    /* A repeat of the same message should get its full time again, not
+       inherit whatever was left of the first one's. */
+    restartTimer(id, duration) {
+        this.clearTimer(id);
+        if (duration > 0) {
+            this.timers.set(id, setTimeout(() => this.dismiss(id), duration));
+        }
+    }
+    /*
+      Cleared first, then written on the next render. A live region only
+      speaks when its text CHANGES, so the same message twice in a row
+      ("Saved", "Saved") would otherwise be heard once.
+    */
+    announce(message, variant) {
+        const key = variant === "danger" ? "alertText" : "politeText";
+        this[key] = "";
+        this.updateComplete.then(() => {
+            this[key] = message;
+        });
+    }
+    /*
+      A toast the pointer or focus is on stays until they leave it. Four
+      seconds is not long enough for everyone to read a message, and one
+      that vanishes while you are reaching for its Dismiss button is worse.
+    */
+    hold(id) {
+        this.clearTimer(id);
+    }
+    release(item) {
+        if (this.items.includes(item))
+            this.restartTimer(item.id, item.duration);
+    }
+    dismiss(id) {
+        this.clearTimer(id);
+        const gone = this.items.find((item) => item.id === id);
+        this.items = this.items.filter((item) => item.id !== id);
+        if (gone)
+            this.leaving = [...this.leaving, gone];
+        // The live regions stay on the page, so empty them too. Otherwise a
+        // screen-reader user reading the page later meets a message for
+        // something that has already gone away.
+        if (gone && this.politeText === gone.message)
+            this.politeText = "";
+        if (gone && this.alertText === gone.message)
+            this.alertText = "";
+    }
+    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 {
+      position: fixed;
+      z-index: var(--tt-z-toast);
+
+      display: flex;
+      flex-direction: column;
+      gap: var(--tt-space-2);
+
+      /* The container spans the edge but must not swallow clicks on the
+         page behind it. Individual toasts opt back in. */
+      pointer-events: none;
+
+      font-family: var(--tt-font-sans);
+    }
+
+    :host([position="bottom-right"]) {
+      /* Clear of the home indicator on a phone. */
+      bottom: calc(var(--tt-space-5) + env(safe-area-inset-bottom));
+      right: var(--tt-space-5);
+      align-items: flex-end;
+    }
+
+    :host([position="bottom-center"]) {
+      bottom: calc(var(--tt-space-5) + env(safe-area-inset-bottom));
+      left: 50%;
+      transform: translateX(-50%);
+      align-items: center;
+    }
+
+    :host([position="top-right"]) {
+      /* Clear of the notch. */
+      top: calc(var(--tt-space-5) + env(safe-area-inset-top));
+      right: var(--tt-space-5);
+      align-items: flex-end;
+    }
+
+    :host([position="top-center"]) {
+      top: calc(var(--tt-space-5) + env(safe-area-inset-top));
+      left: 50%;
+      transform: translateX(-50%);
+      align-items: center;
+    }
+
+    /*
+      On a phone every toast goes to the TOP, whatever position says. At
+      the bottom it sits over the action bar or dock that triggered it,
+      under the thumb that is about to press the next button, so the
+      message blocks the work it is reporting on. A desktop keeps the
+      corner the app asked for.
+    */
+    @media (max-width: 768px) {
+      :host([position="bottom-right"]),
+      :host([position="bottom-center"]) {
+        bottom: auto;
+        top: calc(var(--tt-space-3) + env(safe-area-inset-top));
+      }
+    }
+
+    /* Quiet: it is a repetition marker, not part of the message. */
+    .count {
+      flex: 0 0 auto;
+      align-self: center;
+      font-size: var(--tt-text-xs);
+      font-variant-numeric: tabular-nums;
+      color: var(--tt-muted-foreground);
+    }
+
+    .toast,
+    .leaving {
+      pointer-events: auto;
+
+      display: flex;
+      align-items: flex-start;
+      gap: var(--tt-space-3);
+
+      max-width: 360px;
+      box-sizing: border-box;
+
+      padding: var(--tt-space-3) var(--tt-space-4);
+
+      border: 1px solid var(--tt-border);
+      border-left: 3px solid var(--_accent, var(--tt-border));
+      border-radius: var(--tt-radius);
+
+      background: var(--tt-popover);
+      color: var(--tt-popover-foreground);
+
+      box-shadow: var(--tt-elevation-2);
+
+      font-size: var(--tt-text-sm);
+      line-height: var(--tt-leading-normal);
+
+      transition:
+        opacity var(--tt-duration-slow) var(--tt-ease-out),
+        translate var(--tt-duration-slow) var(--tt-ease-out),
+        scale var(--tt-duration-slow) var(--tt-ease-out);
+    }
+
+    /*
+      In: rises from just below as it is first drawn. Out: shrinks a
+      touch and fades, the same in every corner, quicker and accelerating
+      away. Click-through while it goes, so the page underneath is never
+      blocked by a toast that is already leaving. Reduced motion is the
+      1ms durations in tokens.css.
+    */
+    @starting-style {
+      .toast {
+        opacity: 0;
+        translate: 0 8px;
+      }
+    }
+
+    .leaving {
+      opacity: 0;
+      scale: 0.96;
+      pointer-events: none;
+
+      transition-duration: var(--tt-duration-normal);
+      transition-timing-function: var(--tt-ease-in);
+    }
+
+    .success { --_accent: var(--tt-success); }
+    .warning { --_accent: var(--tt-warning); }
+    .danger  { --_accent: var(--tt-destructive); }
+
+    .message {
+      flex: 1;
+      min-width: 0;
+      overflow-wrap: anywhere;
+    }
+
+    .close {
+      flex: 0 0 auto;
+
+      width: 20px;
+      height: 20px;
+      padding: 0;
+      margin: -2px -4px 0 0;
+
+      border: none;
+      background: transparent;
+      color: var(--tt-muted-foreground);
+
+      font: inherit;
+      font-size: var(--tt-text-sm);
+      line-height: 1;
+      cursor: pointer;
+      border-radius: var(--tt-radius-sm);
+    }
+
+    .close:hover {
+      color: var(--tt-foreground);
+    }
+
+    .close:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+    }
+
+  `]; }
+    render() {
+        return html `
+      <!--
+        TWO LIVE REGIONS that are always on the page, and the toasts
+        themselves are not live at all.
+
+        Each toast used to be its own role="status", created already
+        holding its message. A screen reader watches a live region for
+        CHANGES, and a region that arrives with its text in it has not
+        changed, so NVDA and VoiceOver regularly said nothing. These two
+        exist from the start and only their text changes.
+
+        Polite for most messages: a "Saved" should not interrupt what is
+        being read. Assertive (role="alert") for danger, which should.
+      -->
+      <div class="sr-only" role="status">${this.politeText}</div>
+      <div class="sr-only" role="alert">${this.alertText}</div>
+
+      <!--
+        Keyed by id, and in id order with the leaving ones still in their
+        place. Without the key Lit reuses nodes by POSITION: dismissing the
+        first toast would hand its node to the second and play the exit on
+        the wrong message.
+      -->
+      ${repeat([...this.items, ...this.leaving].sort((a, b) => a.id - b.id), (item) => item.id, (item) => html `
+          <div
+            class="${this.leaving.includes(item) ? "leaving" : "toast"} ${item.variant}"
+            data-toast=${item.id}
+            ?inert=${this.leaving.includes(item)}
+            @mouseenter=${() => this.hold(item.id)}
+            @mouseleave=${() => this.release(item)}
+            @focusin=${() => this.hold(item.id)}
+            @focusout=${() => this.release(item)}
+          >
+            <span class="message">${item.message}</span>
+
+            <!-- Only past one. "x1" on every toast would be noise. -->
+            ${item.count > 1
+            ? html `<span class="count" aria-hidden="true"
+                  >&times;${item.count}</span
+                >`
+            : nothing}
+
+            <button
+              class="close"
+              aria-label="Dismiss"
+              @click=${() => this.dismiss(item.id)}
+            >
+              <tt-icon name="x" size="16px"></tt-icon>
+            </button>
+          </div>
+        `)}
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], TTToast.prototype, "position", void 0);
+__decorate([
+    state()
+], TTToast.prototype, "items", void 0);
+__decorate([
+    state()
+], TTToast.prototype, "leaving", void 0);
+__decorate([
+    state()
+], TTToast.prototype, "politeText", void 0);
+__decorate([
+    state()
+], TTToast.prototype, "alertText", void 0);
+TTToast = __decorate([
+    customElement("tt-toast")
+], TTToast);
+export { TTToast };
+// Every mounted tt-toast, so the helper below can find one without the
+// caller holding a reference.
+const registry = new Set();
+/**
+ * Show a toast from anywhere:
+ *
+ *   toast({ message: "Request posted", variant: "success" });
+ *
+ * Requires a <tt-toast> mounted somewhere in the page.
+ */
+export function toast(options) {
+    const target = registry.values().next().value;
+    if (!target) {
+        console.warn("toast() called but no <tt-toast> is mounted.");
+        return;
+    }
+    target.show(options);
+}
+//# sourceMappingURL=tt-toast.js.map

package/dist/tt-toast.js.map

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

package/dist/tt-toggle-group.d.ts

@@ -0,0 +1,73 @@
+import { LitElement } from "lit";
+import type { PropertyValues } from "lit";
+import "./tt-toggle.js";
+export type ToggleGroupType = "single" | "multiple";
+/**
+ * A row of tt-toggle that agree with each other.
+ *
+ * ---------------------------------------------------------------------
+ * `values` IS ALWAYS AN ARRAY, EVEN IN SINGLE MODE.
+ *
+ * The obvious API is `value: string` for single and `values: string[]`
+ * for multiple, which is what most libraries do. It is rejected here.
+ *
+ * A property whose TYPE depends on another property is a property you
+ * have to think about at every call site, and it makes the change event
+ * carry two shapes as well. Every consumer then needs a branch, and half
+ * of them will forget it.
+ *
+ * One shape instead: a single-select group holds an array of zero or one
+ * entries. `values[0] ?? null` is the whole cost, paid once by whoever
+ * actually wants a scalar, and `tt-change` always carries the complete
+ * new array. Same contract as tt-checkbox-group.
+ *
+ * ---------------------------------------------------------------------
+ * WHO OWNS THE SELECTION.
+ *
+ * Both. `values` comes in, and `tt-change` goes out with the whole new
+ * set. The group also keeps that new set itself (Oct 2026). It used to
+ * store nothing and wait for the page to echo `values` back, which
+ * meant a group with no listener (a pasted snippet, a generated
+ * component) started every click from the old set: `multiple` acted
+ * like single, and `allow-empty` cleared instead of selecting. A page
+ * that sets `values` still wins, the same as with a native input.
+ *
+ * But it does WRITE to its children, immediately, in its own handler,
+ * rather than waiting for the page to echo `values` back. That is the
+ * one thing worth understanding here.
+ *
+ * A tt-toggle flips itself when clicked. In single mode that leaves two
+ * pressed toggles for as long as it takes the page to respond, and if
+ * the page ignores the event it leaves them pressed forever. So the
+ * group corrects its children on the spot: the click is the child's, the
+ * ANSWER is the group's.
+ *
+ * That makes it work whether or not the page echoes the value back, and
+ * `updated()` re-applies the same result when it does, which is
+ * idempotent (applying it twice is the same as applying it once).
+ */
+export declare class TTToggleGroup extends LitElement {
+    multiple: boolean;
+    /** The older spelling of `multiple`; type="multiple" still works. */
+    type: ToggleGroupType;
+    values: string[];
+    disabled: boolean;
+    label: string;
+    detached: boolean;
+    private toggles;
+    allowEmpty: boolean;
+    private handleChange;
+    /** Writes a selection onto every child. Safe to call repeatedly. */
+    private disabledByGroup;
+    private applyTo;
+    updated(changed: PropertyValues): void;
+    private handleSlotChange;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-toggle-group": TTToggleGroup;
+    }
+}
+//# sourceMappingURL=tt-toggle-group.d.ts.map

package/dist/tt-toggle-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-toggle-group.d.ts","sourceRoot":"","sources":["../src/tt-toggle-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAQ1C,OAAO,gBAAgB,CAAC;AAExB,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,qBACa,aAAc,SAAQ,UAAU;IAQC,QAAQ,UAAS;IAE7D,qEAAqE;IAC1B,IAAI,EAAE,eAAe,CAAY;IAEjD,MAAM,EAAE,MAAM,EAAE,CAAM;IAEL,QAAQ,UAAS;IAOjC,KAAK,SAAM;IAWV,QAAQ,UAAS;IAG9C,OAAO,CAAC,OAAO,CAAc;IAO0B,UAAU,UAAS;IAE1E,OAAO,CAAC,YAAY;IA6CpB,oEAAoE;IAUpE,OAAO,CAAC,eAAe,CAA2B;IAElD,OAAO,CAAC,OAAO;IAcf,OAAO,CAAC,OAAO,EAAE,cAAc;IAS/B,OAAO,CAAC,gBAAgB;IAIxB,MAAM,CAAC,MAAM,0BAiEX;IAEF,MAAM;CAaP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}