@tartaguti/ui-components 0.0.0-stage → 0.2.0

package/dist/tt-modal.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from "lit";
+import type { PropertyValues } from "lit";
+import "./tt-icon.js";
+export type ModalSize = "small" | "medium" | "large";
+export declare class TTModal extends LitElement {
+    open: boolean;
+    heading: string;
+    size: ModalSize;
+    persistent: boolean;
+    preview: boolean;
+    private lastFocused;
+    private closing;
+    private cancelExit?;
+    private closeModal;
+    private handleBackdropClick;
+    private handleButtonClick;
+    connectedCallback(): void;
+    private locked;
+    private setLock;
+    disconnectedCallback(): void;
+    willUpdate(changed: PropertyValues): void;
+    updated(changed: PropertyValues): void;
+    private handleKeyDown;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-modal": TTModal;
+    }
+}
+//# sourceMappingURL=tt-modal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-modal.d.ts","sourceRoot":"","sources":["../src/tt-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAO1C,OAAO,cAAc,CAAC;AAEtB,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAErD,qBACa,OAAQ,SAAQ,UAAU;IAIrC,IAAI,UAAS;IAKb,OAAO,SAAM;IAGb,IAAI,EAAE,SAAS,CAAY;IAS3B,UAAU,UAAS;IAInB,OAAO,UAAS;IAEhB,OAAO,CAAC,WAAW,CAA4B;IAQtC,OAAO,CAAC,OAAO,CAAS;IACjC,OAAO,CAAC,UAAU,CAAC,CAAa;IAEhC,OAAO,CAAC,UAAU;IAelB,OAAO,CAAC,mBAAmB;IAM3B,OAAO,CAAC,iBAAiB;IAQzB,iBAAiB;IAWjB,OAAO,CAAC,MAAM,CAAS;IAEvB,OAAO,CAAC,OAAO;IASf,oBAAoB;IAapB,UAAU,CAAC,OAAO,EAAE,cAAc;IAYlC,OAAO,CAAC,OAAO,EAAE,cAAc;IA2D/B,OAAO,CAAC,aAAa,CA4BnB;IAEF,MAAM,CAAC,MAAM,0BAwSX;IAEF,MAAM;CAmDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/tt-modal.js

@@ -0,0 +1,553 @@
+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, state } from "lit/decorators.js";
+import { lockScroll, unlockScroll } from "./scroll-lock.js";
+import { deepActiveElement, pushOverlay, removeOverlay, isTopOverlay, trapTab } from "./overlay.js";
+import { afterTransitions } from "./motion.js";
+import "./tt-icon.js";
+let TTModal = class TTModal extends LitElement {
+    constructor() {
+        super(...arguments);
+        // Reflected, like open on tt-drawer and every other disclosure, so
+        // tt-modal[open] works as a selector.
+        this.open = false;
+        // Named `heading` rather than `title` so it cannot collide with the
+        // global HTML title attribute (which renders a native tooltip).
+        this.heading = "";
+        this.size = "medium";
+        /*
+          Cannot be dismissed: no close button, and Escape and the backdrop do
+          nothing. For a choice the user has to make. Named for the ON state
+          because a boolean attribute can only switch something on; the old
+          closable defaulted to true and could never be turned off from HTML.
+        */
+        this.persistent = false;
+        // Renders inline instead of as a fixed overlay, for documentation previews.
+        this.preview = false;
+        this.lastFocused = null;
+        /*
+          True for the length of the exit transition after `open` goes false.
+          The dialog stays drawn so it has something to fade, but inert and
+          click-through: the scroll lock, the overlay stack and focus going back
+          all happen at once in updated(), and only the picture lingers.
+        */
+        this.closing = false;
+        // Whether this element currently holds a scroll lock. The lock is
+        // reference counted, so it has to release exactly what it took.
+        this.locked = false;
+        this.handleKeyDown = (event) => {
+            if (!this.open || this.preview)
+                return;
+            // Only the overlay on top reacts. A confirm opened from inside this
+            // modal must take the Escape, not share it.
+            if (!isTopOverlay(this))
+                return;
+            if (event.key === "Escape") {
+                // A control inside the dialog already used this Escape, for
+                // example to close its own listbox. Closing the dialog as well
+                // would undo two things with one key.
+                if (event.defaultPrevented)
+                    return;
+                this.closeModal();
+                return;
+            }
+            /*
+              Keep Tab inside the dialog.
+        
+              Without this, tabbing past the last control walks focus into the page
+              behind the overlay. It is invisible to a sighted mouse user and
+              completely breaks the dialog for anyone using a keyboard or a screen
+              reader, who ends up reading content they cannot see.
+            */
+            if (event.key === "Tab") {
+                const dialog = this.renderRoot?.querySelector(".modal");
+                if (dialog)
+                    trapTab(event, dialog);
+            }
+        };
+    }
+    closeModal() {
+        if (this.persistent) {
+            return;
+        }
+        this.open = false;
+        this.dispatchEvent(new CustomEvent("tt-close", {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleBackdropClick(event) {
+        if (event.target === event.currentTarget) {
+            this.closeModal();
+        }
+    }
+    handleButtonClick(event) {
+        const target = event.target;
+        if (target.hasAttribute("data-close")) {
+            this.closeModal();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener("keydown", this.handleKeyDown);
+        // Moved in the page while open: back on the stack it left.
+        if (this.open && !this.preview && this.hasUpdated)
+            pushOverlay(this);
+    }
+    setLock(want) {
+        if (want === this.locked)
+            return;
+        this.locked = want;
+        if (want)
+            lockScroll();
+        else
+            unlockScroll();
+    }
+    disconnectedCallback() {
+        window.removeEventListener("keydown", this.handleKeyDown);
+        this.setLock(false);
+        removeOverlay(this);
+        // Removed mid-exit (a router swapping the page): nothing to finish.
+        this.cancelExit?.();
+        this.closing = false;
+        super.disconnectedCallback();
+    }
+    willUpdate(changed) {
+        if (!changed.has("open") || this.preview)
+            return;
+        if (this.open) {
+            // Reopened mid-exit: the same dialog turns round from where it got to.
+            this.cancelExit?.();
+            this.closing = false;
+        }
+        else if (changed.get("open") === true) {
+            this.closing = true;
+        }
+    }
+    updated(changed) {
+        // After the render that applied the closing styles, so afterTransitions
+        // reads the exit durations rather than the entrance ones.
+        if (changed.has("closing") && this.closing) {
+            const root = this.renderRoot;
+            this.cancelExit = afterTransitions([root.querySelector(".backdrop"), root.querySelector(".modal")], () => {
+                this.cancelExit = undefined;
+                this.closing = false;
+            });
+        }
+        if (changed.has("open") && !this.preview) {
+            this.setLock(this.open);
+            if (this.open) {
+                pushOverlay(this);
+                // Deep, as on tt-drawer: the outermost shadow host is not where
+                // the person was.
+                this.lastFocused = deepActiveElement();
+                /*
+                  Directly, not in requestAnimationFrame. updated() already runs
+                  after the dialog is rendered, so a frame bought nothing, and a
+                  browser does not deliver frames to a background tab: a dialog
+                  opened by a timer while the user was elsewhere never took focus
+                  at all, and the keyboard stayed behind it.
+                */
+                this.renderRoot?.querySelector(".modal")?.focus();
+                /*
+                  A slotted element marked autofocus then takes focus from the
+                  dialog: the same attribute a native <dialog> honours. tt-confirm
+                  uses it to land on Cancel, so a stray Enter on "Delete?" cancels
+                  rather than deletes, which its docs had promised while focus sat
+                  on the dialog box.
+        
+                  After ITS first render, not now: a tt-button created in the same
+                  template as this modal has not drawn its inner <button> yet when
+                  this runs, so focusing it immediately focused nothing.
+                */
+                const preferred = this.querySelector("[autofocus]");
+                if (preferred) {
+                    Promise.resolve(preferred.updateComplete).then(() => {
+                        if (this.open)
+                            preferred.focus();
+                    });
+                }
+            }
+            else {
+                removeOverlay(this);
+                this.lastFocused?.focus?.();
+                this.lastFocused = null;
+            }
+        }
+    }
+    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 {
+      /* Private aliases - underscore-prefixed so they never shadow a
+         global --tt-* token a consumer may have set. */
+      /* Rung 3 of the elevation ladder in tokens.css: the popover
+         surface, the same one tt-drawer uses. It said --tt-card, which
+         happens to hold the same colour today and is the wrong rung. */
+      --_surface: var(--tt-popover);
+      --_foreground: var(--tt-popover-foreground);
+      --_body: var(--tt-muted-foreground);
+      --_radius: var(--tt-radius-lg);
+
+      font-family: var(--tt-font-sans);
+      -webkit-font-smoothing: antialiased;
+    }
+
+    .backdrop {
+      position: fixed;
+      inset: 0;
+
+      background: var(--tt-overlay);
+
+      -webkit-backdrop-filter: blur(3px);
+      backdrop-filter: blur(3px);
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      padding: var(--tt-space-5);
+
+      z-index: var(--tt-z-modal);
+
+      transition: opacity var(--tt-duration-slow) var(--tt-ease-out);
+    }
+
+    .preview {
+      position: relative;
+      inset: auto;
+
+      padding: 0;
+
+      background: transparent;
+
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+
+      z-index: auto;
+
+      transition: none;
+    }
+
+    .modal {
+      box-sizing: border-box;
+
+      width: 100%;
+
+      max-height: calc(100dvh - 40px);
+
+      /*
+        The MODAL does not scroll. Its body does.
+
+        This used to be overflow: auto on the whole dialog, which sounds
+        equivalent and is not. The children are flex items with the
+        default flex-shrink: 1, so a tall body was SQUEEZED to fit the
+        max-height rather than the dialog scrolling, and because section
+        was overflow: visible its content then painted straight through
+        the footer. A shop quick view showed "reviews" and a stock badge
+        below the Close button.
+
+        Measured before the fix: section box 430px, its content 559px.
+        The missing 129px were being drawn over the buttons.
+      */
+      overflow: hidden;
+
+      display: flex;
+      flex-direction: column;
+
+      gap: var(--tt-space-4);
+
+      padding: var(--tt-space-6);
+
+      background: var(--_surface);
+      color: var(--_foreground);
+
+      border: 1px solid var(--tt-border);
+      border-radius: var(--_radius);
+
+      /*
+        Concentric corners for anything slotted in that FILLS this box: a
+        full-width image, a table, a nested panel. Same contract tt-card
+        publishes, so a child written for a card is already correct here
+        and needs no second rule.
+
+        This floors at sm, because the padding is wider than the radius.
+        That is the right answer rather than a missed opportunity: once
+        the inset exceeds the curve there is no visual relationship left
+        to preserve.
+      */
+      --tt-radius-nested: max(
+        var(--tt-radius-sm),
+        calc(var(--_radius) - var(--tt-space-6))
+      );
+
+      box-shadow: var(--tt-elevation-3);
+
+      transition:
+        opacity var(--tt-duration-slow) var(--tt-ease-out),
+        transform var(--tt-duration-slow) var(--tt-ease-out);
+
+      outline: none;
+    }
+
+    .preview .modal {
+      box-shadow: none;
+      transition: none;
+    }
+
+    /*
+      Entrance. @starting-style is what a NEWLY DRAWN element transitions
+      from, so the dialog rises and fades in as it first renders. A
+      transition rather than a keyframe animation, so a dialog closed
+      halfway in turns round from where it got to instead of jumping.
+      Reduced motion needs nothing here: tokens.css makes every duration
+      1ms, which leaves no movement to see.
+    */
+    @starting-style {
+      .backdrop {
+        opacity: 0;
+      }
+
+      .modal {
+        opacity: 0;
+        transform: translateY(8px) scale(0.98);
+      }
+    }
+
+    /*
+      Exit. Quicker than the entrance and accelerating away, because
+      nobody watches where a closed thing goes. pointer-events: none, so a
+      click during the fade reaches the page underneath.
+    */
+    .backdrop.closing {
+      opacity: 0;
+      pointer-events: none;
+
+      transition-duration: var(--tt-duration-normal);
+      transition-timing-function: var(--tt-ease-in);
+    }
+
+    .closing .modal {
+      opacity: 0;
+      transform: translateY(4px) scale(0.98);
+
+      transition-duration: var(--tt-duration-normal);
+      transition-timing-function: var(--tt-ease-in);
+    }
+
+    .small {
+      max-width: 340px;
+    }
+
+    .medium {
+      max-width: 460px;
+    }
+
+    .large {
+      max-width: 640px;
+    }
+
+    header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      gap: var(--tt-space-3);
+
+      color: var(--_foreground);
+
+      font-size: var(--tt-text-lg);
+      font-weight: var(--tt-weight-semibold);
+
+      letter-spacing: -0.015em;
+    }
+
+    .close {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      /* The control token, not a fixed 30px: the same close button in
+         tt-modal and tt-drawer, and it grows to a full touch target
+         under pointer: coarse like every other control. */
+      width: var(--tt-control-sm);
+      height: var(--tt-control-sm);
+
+      margin: -6px -6px -6px 0;
+
+      border: none;
+      border-radius: var(--tt-radius);
+
+      background: transparent;
+      color: var(--_body);
+
+      cursor: pointer;
+
+      font-size: var(--tt-text-lg);
+      line-height: 1;
+
+      transition:
+        background var(--tt-duration-normal) var(--tt-ease),
+        color var(--tt-duration-normal) var(--tt-ease);
+    }
+
+    .close:hover {
+      background: var(--tt-accent);
+      color: var(--_foreground);
+    }
+
+    .close:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+    }
+
+    /*
+      The scroller. Three declarations, all load-bearing.
+
+      flex: 1 lets it take the space header and footer do not.
+
+      min-height: 0 is the one people miss. A flex item defaults to
+      min-height: auto, which refuses to shrink below its content, so
+      overflow never engages and the item pushes the footer out of the
+      dialog instead.
+
+      overflow: auto then scrolls what is left over, rather than letting
+      it paint outside the box.
+    */
+    section {
+      flex: 1 1 auto;
+      min-height: 0;
+      overflow: auto;
+
+      color: var(--_body);
+
+      font-size: var(--tt-text-sm);
+      line-height: var(--tt-leading-relaxed);
+    }
+
+    /* Pinned. Neither may shrink, or a long body reclaims the space the
+       heading and the buttons need. */
+    header,
+    footer {
+      flex: 0 0 auto;
+    }
+
+    footer {
+      display: flex;
+      justify-content: flex-end;
+
+      gap: var(--tt-space-2);
+
+      flex-wrap: wrap;
+    }
+
+    /* Sheet-style on small screens */
+    @media (max-width: 520px) {
+      .backdrop:not(.preview) {
+        align-items: flex-end;
+        padding: 0;
+      }
+
+      .backdrop:not(.preview) .modal {
+        max-width: 100%;
+
+        border-radius: var(--_radius) var(--_radius) 0 0;
+
+        max-height: 88dvh;
+      }
+
+      /* A sheet comes up from the bottom edge and goes back down to it. */
+      @starting-style {
+        .backdrop:not(.preview) .modal {
+          transform: translateY(100%);
+        }
+      }
+
+      .backdrop.closing:not(.preview) .modal {
+        transform: translateY(100%);
+      }
+    }
+  `; }
+    render() {
+        if (!this.open && !this.closing && !this.preview) {
+            return html ``;
+        }
+        return html `
+      <div
+        class="backdrop ${this.preview ? "preview" : ""} ${this.closing
+            ? "closing"
+            : ""}"
+        ?inert=${this.closing}
+        @click=${this.handleBackdropClick}
+      >
+        <div
+          part="modal"
+          class="modal ${this.size}"
+          role="dialog"
+          aria-modal=${this.preview ? "false" : "true"}
+          aria-labelledby=${this.heading ? "tt-modal-title" : ""}
+          tabindex="-1"
+        >
+          <header part="header">
+            <span id="tt-modal-title">${this.heading}</span>
+
+            <slot name="header"></slot>
+
+            ${!this.persistent
+            ? html `
+                  <button
+                    part="close"
+                    class="close"
+                    aria-label="Close"
+                    @click=${this.closeModal}
+                  >
+                    <tt-icon name="x" size="16px"></tt-icon>
+                  </button>
+                `
+            : null}
+          </header>
+
+          <section part="body">
+            <slot></slot>
+          </section>
+
+          <footer part="footer" @tt-button-click=${this.handleButtonClick}>
+            <slot name="footer"></slot>
+          </footer>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTModal.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], TTModal.prototype, "heading", void 0);
+__decorate([
+    property({ type: String })
+], TTModal.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTModal.prototype, "persistent", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTModal.prototype, "preview", void 0);
+__decorate([
+    state()
+], TTModal.prototype, "closing", void 0);
+TTModal = __decorate([
+    customElement("tt-modal")
+], TTModal);
+export { TTModal };
+//# sourceMappingURL=tt-modal.js.map

package/dist/tt-modal.js.map

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

package/dist/tt-navbar.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from "lit";
+import "./tt-button.js";
+import "./tt-icon.js";
+export type NavbarSize = "small" | "medium" | "large";
+export declare class TTNavbar extends LitElement {
+    sticky: boolean;
+    bordered: boolean;
+    size: NavbarSize;
+    mobileMenuOpen: boolean;
+    /**
+     * A soft blurred boundary below the bar instead of a hard rule, for
+     * where content actually scrolls UNDERNEATH it: a landing page, or any
+     * layout where the bar floats over the scroller rather than sitting in
+     * a column above it.
+     *
+     * Not decoration, and not a nicer border. It marks where UI meets
+     * content, so it is wrong on a bar with nothing passing under it, and
+     * it does nothing unless `sticky` is set. Use one per scrolling view.
+     *
+     * Attribute is `scroll-edge`, kebab-case like every multi-word
+     * attribute in the library.
+     */
+    scrollEdge: boolean;
+    private handleMenuToggle;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-navbar": TTNavbar;
+    }
+}
+//# sourceMappingURL=tt-navbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-navbar.d.ts","sourceRoot":"","sources":["../src/tt-navbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,qBACa,QAAS,SAAQ,UAAU;IAUtC,MAAM,UAAS;IAKf,QAAQ,UAAS;IAKjB,IAAI,EAAE,UAAU,CAAY;IAG5B,cAAc,UAAS;IAEvB;;;;;;;;;;;;OAYG;IAEH,UAAU,UAAS;IAEnB,OAAO,CAAC,gBAAgB;IAcxB,MAAM,CAAC,MAAM,0BAuQX;IAEF,MAAM;CAmDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}