@tartaguti/ui-components 0.0.0-stage → 0.1.0

package/dist/tt-drawer.d.ts

@@ -0,0 +1,38 @@
+import { LitElement } from "lit";
+import type { PropertyValues } from "lit";
+import "./tt-icon.js";
+export type DrawerSide = "right" | "left" | "bottom";
+/**
+ * A panel that slides in over the page.
+ *
+ * Use it instead of a modal when the thing behind still matters: editing
+ * a row without losing your place in the list, or a filter panel you
+ * adjust while watching results change. A modal says "deal with this
+ * first"; a drawer says "here is more, the list is still there".
+ */
+export declare class TTDrawer extends LitElement {
+    open: boolean;
+    side: DrawerSide;
+    heading: string;
+    size: string;
+    persistent: boolean;
+    private lastFocused;
+    private locked;
+    private closing;
+    private cancelExit?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleKeydown;
+    willUpdate(changed: PropertyValues): void;
+    updated(changed: PropertyValues): void;
+    private close;
+    private handleBackdropClick;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-drawer": TTDrawer;
+    }
+}
+//# sourceMappingURL=tt-drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-drawer.d.ts","sourceRoot":"","sources":["../src/tt-drawer.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,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAErD;;;;;;;GAOG;AACH,qBACa,QAAS,SAAQ,UAAU;IACM,IAAI,UAAS;IAEd,IAAI,EAAE,UAAU,CAAW;IAE1C,OAAO,SAAM;IAEb,IAAI,SAAM;IAIT,UAAU,UAAS;IAEhD,OAAO,CAAC,WAAW,CAA4B;IAG/C,OAAO,CAAC,MAAM,CAAS;IAGd,OAAO,CAAC,OAAO,CAAS;IACjC,OAAO,CAAC,UAAU,CAAC,CAAa;IAEhC,iBAAiB;IAKjB,oBAAoB;IAkBpB,OAAO,CAAC,aAAa,CAmBnB;IAEF,UAAU,CAAC,OAAO,EAAE,cAAc;IAWlC,OAAO,CAAC,OAAO,EAAE,cAAc;IA6C/B,OAAO,CAAC,KAAK;IAUb,OAAO,CAAC,mBAAmB;IAI3B,MAAM,CAAC,MAAM,0BAmOX;IAEF,MAAM;CA+CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/tt-drawer.js

@@ -0,0 +1,433 @@
+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, 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";
+/**
+ * A panel that slides in over the page.
+ *
+ * Use it instead of a modal when the thing behind still matters: editing
+ * a row without losing your place in the list, or a filter panel you
+ * adjust while watching results change. A modal says "deal with this
+ * first"; a drawer says "here is more, the list is still there".
+ */
+let TTDrawer = class TTDrawer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.side = "right";
+        this.heading = "";
+        this.size = "";
+        // Cannot be dismissed: no close button, Escape and the backdrop do
+        // nothing. Same meaning and reason as tt-modal's persistent.
+        this.persistent = false;
+        this.lastFocused = null;
+        // Whether this element currently holds a scroll lock.
+        this.locked = false;
+        // Drawn, inert, for the length of the exit transition. See tt-modal.
+        this.closing = false;
+        this.handleKeydown = (event) => {
+            if (!this.open || !isTopOverlay(this))
+                return;
+            if (event.key === "Escape") {
+                // Already used by a control inside, e.g. to close its listbox.
+                if (event.defaultPrevented || this.persistent)
+                    return;
+                this.close();
+                return;
+            }
+            /*
+              aria-modal="true" PROMISES a screen reader that nothing outside this
+              panel can be reached, and the drawer used to break that promise: Tab
+              walked straight out of the panel into the page behind it.
+            */
+            if (event.key === "Tab") {
+                const panel = this.renderRoot?.querySelector(".panel");
+                if (panel)
+                    trapTab(event, panel);
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener("keydown", this.handleKeydown);
+    }
+    disconnectedCallback() {
+        window.removeEventListener("keydown", this.handleKeydown);
+        removeOverlay(this);
+        // Release only what this element took. Clearing the body style
+        // outright was fine while one component owned it and is wrong now
+        // that the lock is counted: it would strand the count above zero.
+        if (this.locked) {
+            this.locked = false;
+            unlockScroll();
+        }
+        this.cancelExit?.();
+        this.closing = false;
+        super.disconnectedCallback();
+    }
+    willUpdate(changed) {
+        if (!changed.has("open"))
+            return;
+        if (this.open) {
+            this.cancelExit?.();
+            this.closing = false;
+        }
+        else if (changed.get("open") === true) {
+            this.closing = true;
+        }
+    }
+    updated(changed) {
+        if (changed.has("closing") && this.closing) {
+            const root = this.renderRoot;
+            this.cancelExit = afterTransitions([root.querySelector(".backdrop"), root.querySelector(".panel")], () => {
+                this.cancelExit = undefined;
+                this.closing = false;
+            });
+        }
+        if (changed.has("size")) {
+            this.style.setProperty("--_size", this.size);
+        }
+        if (!changed.has("open"))
+            return;
+        if (this.open && !this.locked) {
+            this.locked = true;
+            lockScroll();
+        }
+        else if (!this.open && this.locked) {
+            this.locked = false;
+            unlockScroll();
+        }
+        if (this.open) {
+            pushOverlay(this);
+            // Remember where focus was so it can go back, otherwise a keyboard
+            // user is dumped at the top of the document on close. The DEEP
+            // active element: document.activeElement stops at the outermost
+            // shadow host, which in an app built from components is the app
+            // itself, and focusing that focuses nothing.
+            this.lastFocused = deepActiveElement();
+            // Directly, not in a frame: see tt-modal. A background tab gets no
+            // frames, so the panel never took focus there.
+            this.renderRoot?.querySelector(".panel")?.focus();
+        }
+        else {
+            removeOverlay(this);
+            this.lastFocused?.focus?.();
+            this.lastFocused = null;
+        }
+    }
+    close() {
+        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.close();
+    }
+    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;
+    }
+
+    /*
+      display: contents, so the host NEVER generates a box.
+
+      Everything this component draws is position:fixed, so it has no
+      business taking part in its parent's layout. Without a display of
+      its own the host fell back to inline, which is only harmless while
+      the rule below is also matching: opening the drawer stopped
+      display:none applying and the host became a real box among its
+      siblings.
+
+      That did NOT turn out to be what made the trigger button jump - the
+      scroll lock did, see scroll-lock.ts - but a component whose output
+      is entirely fixed should not be able to affect a flex gap or an
+      inline run at all. tt-confirm already does this.
+    */
+    :host {
+      display: contents;
+
+      --_size: 420px;
+    }
+
+    /*
+      Closed, render() draws nothing at all, so nothing inside can be
+      tabbed to. That used to be backed by display: none on a closed host,
+      which also cut the exit short: the panel vanished the moment open
+      went false. A host with display: contents and nothing rendered has
+      no box either way.
+    */
+
+    .backdrop {
+      position: fixed;
+      inset: 0;
+      z-index: var(--tt-z-drawer);
+
+      background: var(--tt-overlay);
+      -webkit-backdrop-filter: blur(2px);
+      backdrop-filter: blur(2px);
+
+      transition: opacity var(--tt-duration-normal) var(--tt-ease);
+    }
+
+    .panel {
+      position: fixed;
+      z-index: var(--tt-z-drawer);
+
+      display: flex;
+      flex-direction: column;
+
+      box-sizing: border-box;
+
+      /* Rung 3 of the elevation ladder: the popover surface, as on
+         tt-modal. It used --tt-background, the PAGE colour, so the panel
+         read as a grey hole in the page rather than a sheet above it,
+         and did not match a modal opened from the same screen. */
+      background: var(--tt-popover);
+      color: var(--tt-popover-foreground);
+
+      box-shadow: var(--tt-elevation-3);
+      outline: none;
+
+      font-family: var(--tt-font-sans);
+
+      transition:
+        transform var(--tt-duration-slow) var(--tt-ease-out),
+        opacity var(--tt-duration-slow) var(--tt-ease-out);
+    }
+
+    /* Insets keep the panel clear of notches and home indicators. */
+    :host([side="right"]) .panel,
+    :host([side="left"]) .panel {
+      top: 0;
+      bottom: 0;
+      width: min(var(--_size), 100vw);
+      padding-top: env(safe-area-inset-top);
+      padding-bottom: env(safe-area-inset-bottom);
+    }
+
+    :host([side="right"]) .panel {
+      right: 0;
+      border-left: 1px solid var(--tt-border);
+    }
+
+    :host([side="left"]) .panel {
+      left: 0;
+      border-right: 1px solid var(--tt-border);
+    }
+
+    :host([side="bottom"]) .panel {
+      left: 0;
+      right: 0;
+      bottom: 0;
+
+      max-height: min(var(--_size, 70vh), 90dvh);
+
+      border-top: 1px solid var(--tt-border);
+      border-radius: var(--tt-radius-lg) var(--tt-radius-lg) 0 0;
+
+      padding-bottom: env(safe-area-inset-bottom);
+    }
+
+    header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--tt-space-3);
+
+      flex-shrink: 0;
+
+      padding: var(--tt-space-4) var(--tt-space-5);
+      border-bottom: 1px solid var(--tt-border);
+    }
+
+    h2 {
+      margin: 0;
+      font-size: var(--tt-text-md);
+      font-weight: var(--tt-weight-semibold);
+      overflow-wrap: anywhere;
+    }
+
+    .body {
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
+      padding: var(--tt-space-5);
+    }
+
+    footer {
+      flex-shrink: 0;
+
+      display: flex;
+      justify-content: flex-end;
+      gap: var(--tt-space-2);
+      flex-wrap: wrap;
+
+      padding: var(--tt-space-4) var(--tt-space-5);
+      border-top: 1px solid var(--tt-border);
+    }
+
+    /* Hidden when nothing is slotted, so an empty footer draws no line. */
+    footer:not(:has(*)) {
+      display: none;
+    }
+
+    .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: -4px -6px -4px 0;
+      /* Stays at the end even when the heading is hidden. */
+      margin-inline-start: auto;
+
+      border: none;
+      border-radius: var(--tt-radius);
+      background: transparent;
+      color: var(--tt-muted-foreground);
+
+      font: inherit;
+      cursor: pointer;
+
+      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(--tt-foreground);
+    }
+
+    .close:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+    }
+
+    /*
+      Entrance and exit are one transition run both ways: in from the
+      edge it is attached to as it is first drawn (@starting-style), and
+      back out to it on close, quicker and accelerating away. Transitions
+      rather than keyframes, so closing mid-entrance turns round where it
+      is. Reduced motion is handled by the 1ms durations in tokens.css.
+    */
+    :host([side="right"]) .panel { --_from: translateX(100%); }
+    :host([side="left"]) .panel { --_from: translateX(-100%); }
+    :host([side="bottom"]) .panel { --_from: translateY(100%); }
+
+    @starting-style {
+      .backdrop {
+        opacity: 0;
+      }
+
+      .panel {
+        transform: var(--_from);
+        opacity: 0.6;
+      }
+    }
+
+    /* Inert and click-through while it goes, so focus is already back
+       and the page underneath takes clicks. */
+    .closing {
+      pointer-events: none;
+
+      transition-duration: var(--tt-duration-normal);
+      transition-timing-function: var(--tt-ease-in);
+    }
+
+    .backdrop.closing {
+      opacity: 0;
+    }
+
+    .panel.closing {
+      transform: var(--_from);
+      opacity: 0.6;
+    }
+
+  `; }
+    render() {
+        if (!this.open && !this.closing)
+            return html ``;
+        const closing = this.closing ? "closing" : "";
+        return html `
+      <div
+        class="backdrop ${closing}"
+        ?inert=${this.closing}
+        @click=${this.handleBackdropClick}
+      ></div>
+
+      <div
+        class="panel ${closing}"
+        part="panel"
+        ?inert=${this.closing}
+        role="dialog"
+        aria-modal="true"
+        aria-label=${this.heading || "Panel"}
+        tabindex="-1"
+      >
+        <header part="header">
+          <!-- Hidden, not empty: an empty heading is still a heading, and
+               a screen reader lists it as a blank entry in the outline. -->
+          <h2 ?hidden=${!this.heading}>${this.heading}</h2>
+
+          <slot name="header"></slot>
+
+          ${!this.persistent
+            ? html `
+                <button class="close" part="close" aria-label="Close" @click=${this.close}>
+                  <tt-icon name="x" size="16px"></tt-icon>
+                </button>
+              `
+            : ""}
+        </header>
+
+        <div class="body" part="body">
+          <slot></slot>
+        </div>
+
+        <footer part="footer">
+          <slot name="footer"></slot>
+        </footer>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTDrawer.prototype, "open", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTDrawer.prototype, "side", void 0);
+__decorate([
+    property({ type: String })
+], TTDrawer.prototype, "heading", void 0);
+__decorate([
+    property({ type: String })
+], TTDrawer.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTDrawer.prototype, "persistent", void 0);
+__decorate([
+    state()
+], TTDrawer.prototype, "closing", void 0);
+TTDrawer = __decorate([
+    customElement("tt-drawer")
+], TTDrawer);
+export { TTDrawer };
+//# sourceMappingURL=tt-drawer.js.map

package/dist/tt-drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-drawer.js","sourceRoot":"","sources":["../src/tt-drawer.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACpG,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,cAAc,CAAC;AAItB;;;;;;;GAOG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QACuC,SAAI,GAAG,KAAK,CAAC;QAEd,SAAI,GAAe,OAAO,CAAC;QAE1C,YAAO,GAAG,EAAE,CAAC;QAEb,SAAI,GAAG,EAAE,CAAC;QAEtC,mEAAmE;QACnE,6DAA6D;QAChC,eAAU,GAAG,KAAK,CAAC;QAExC,gBAAW,GAAuB,IAAI,CAAC;QAE/C,sDAAsD;QAC9C,WAAM,GAAG,KAAK,CAAC;QAEvB,qEAAqE;QACpD,YAAO,GAAG,KAAK,CAAC;QA0BzB,kBAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC/C,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBAAE,OAAO;YAE9C,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC3B,+DAA+D;gBAC/D,IAAI,KAAK,CAAC,gBAAgB,IAAI,IAAI,CAAC,UAAU;oBAAE,OAAO;gBACtD,IAAI,CAAC,KAAK,EAAE,CAAC;gBACb,OAAO;YACT,CAAC;YAED;;;;cAIE;YACF,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;gBACxB,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;gBACvD,IAAI,KAAK;oBAAE,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;YACnC,CAAC;QACH,CAAC,CAAC;IA4VJ,CAAC;IAtYC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACzD,CAAC;IAED,oBAAoB;QAClB,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAC1D,aAAa,CAAC,IAAI,CAAC,CAAC;QAEpB,+DAA+D;QAC/D,kEAAkE;QAClE,kEAAkE;QAClE,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,YAAY,EAAE,CAAC;QACjB,CAAC;QAED,IAAI,CAAC,UAAU,EAAE,EAAE,CAAC;QACpB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QAErB,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAC/B,CAAC;IAuBD,UAAU,CAAC,OAAuB;QAChC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC;YAAE,OAAO;QAEjC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,UAAU,EAAE,EAAE,CAAC;YACpB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC;aAAM,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC;YACxC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC;IACH,CAAC;IAED,OAAO,CAAC,OAAuB;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAC3C,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC;YAC7B,IAAI,CAAC,UAAU,GAAG,gBAAgB,CAChC,CAAC,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,EAC/D,GAAG,EAAE;gBACH,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;gBAC5B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACvB,CAAC,CACF,CAAC;QACJ,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/C,CAAC;QAED,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC;YAAE,OAAO;QAEjC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YAC9B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACnB,UAAU,EAAE,CAAC;QACf,CAAC;aAAM,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACrC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,YAAY,EAAE,CAAC;QACjB,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,WAAW,CAAC,IAAI,CAAC,CAAC;YAClB,mEAAmE;YACnE,+DAA+D;YAC/D,gEAAgE;YAChE,gEAAgE;YAChE,6CAA6C;YAC7C,IAAI,CAAC,WAAW,GAAG,iBAAiB,EAAwB,CAAC;YAE7D,mEAAmE;YACnE,+CAA+C;YAC/C,IAAI,CAAC,UAAU,EAAE,aAAa,CAAc,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC;QACjE,CAAC;aAAM,CAAC;YACN,aAAa,CAAC,IAAI,CAAC,CAAC;YACpB,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,CAAC;YAC5B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QAC1B,CAAC;IACH,CAAC;IAEO,KAAK;QACX,IAAI,IAAI,CAAC,UAAU;YAAE,OAAO;QAE5B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAElB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAC/D,CAAC;IACJ,CAAC;IAEO,mBAAmB,CAAC,KAAiB;QAC3C,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,aAAa;YAAE,IAAI,CAAC,KAAK,EAAE,CAAC;IACzD,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmOlB,AAnOY,CAmOX;IAEF,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAA,EAAE,CAAC;QAE/C,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;QAE9C,OAAO,IAAI,CAAA;;0BAEW,OAAO;iBAChB,IAAI,CAAC,OAAO;iBACZ,IAAI,CAAC,mBAAmB;;;;uBAIlB,OAAO;;iBAEb,IAAI,CAAC,OAAO;;;qBAGR,IAAI,CAAC,OAAO,IAAI,OAAO;;;;;;wBAMpB,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO;;;;YAIzC,CAAC,IAAI,CAAC,UAAU;YAChB,CAAC,CAAC,IAAI,CAAA;+EAC6D,IAAI,CAAC,KAAK;;;eAG1E;YACH,CAAC,CAAC,EAAE;;;;;;;;;;;KAWX,CAAC;IACJ,CAAC;;AA1Z2C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAc;AAEd;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAA4B;AAE1C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAc;AAEb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAW;AAIT;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAoB;AAQ/B;IAAhB,KAAK,EAAE;yCAAyB;AAnBtB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA4ZpB"}

package/dist/tt-dropdown-menu.d.ts

@@ -0,0 +1,57 @@
+import { LitElement } from "lit";
+import type { PropertyValues } from "lit";
+import "./tt-icon.js";
+export interface MenuAction {
+    value: string;
+    label: string;
+    danger?: boolean;
+    disabled?: boolean;
+    separated?: boolean;
+}
+/**
+ * Actions attached to a thing: the row menu behind a table's dots button,
+ * or a settings menu in a header.
+ *
+ * Distinct from tt-select. A select edits a value and shows what is
+ * currently chosen; a menu performs an action and remembers nothing.
+ */
+export declare class TTDropdownMenu extends LitElement {
+    items: MenuAction[];
+    label: string;
+    align: "start" | "end";
+    disabled: boolean;
+    size: "small" | "medium" | "large";
+    private open;
+    private activeIndex;
+    private customTrigger;
+    private triggerHasText;
+    private trigger;
+    private menu;
+    private appliedTriggerWidth;
+    private menuId;
+    private untrack?;
+    disconnectedCallback(): void;
+    private openMenu;
+    private closeMenu;
+    private removeGlobalListeners;
+    private handleDocumentClick;
+    private reposition;
+    private handleTriggerClick;
+    private choose;
+    private move;
+    private handleKeydown;
+    private handleMenuKeydown;
+    updated(changed: PropertyValues): void;
+    private syncPopover;
+    private position;
+    private matchTriggerWidth;
+    static styles: import("lit").CSSResult;
+    focus(options?: FocusOptions): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-dropdown-menu": TTDropdownMenu;
+    }
+}
+//# sourceMappingURL=tt-dropdown-menu.d.ts.map

package/dist/tt-dropdown-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-dropdown-menu.d.ts","sourceRoot":"","sources":["../src/tt-dropdown-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1C,OAAO,cAAc,CAAC;AAItB,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IAEd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;GAMG;AACH,qBACa,cAAe,SAAQ,UAAU;IACjB,KAAK,EAAE,UAAU,EAAE,CAAM;IAExB,KAAK,SAAa;IAGlB,KAAK,EAAE,OAAO,GAAG,KAAK,CAAS;IAEf,QAAQ,UAAS;IAc7D,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAW;IAEpC,OAAO,CAAC,IAAI,CAAS;IAErB,OAAO,CAAC,WAAW,CAAM;IAMzB,OAAO,CAAC,aAAa,CAAS;IAQ9B,OAAO,CAAC,cAAc,CAAS;IAErB,OAAO,CAAC,OAAO,CAAe;IAEjC,OAAO,CAAC,IAAI,CAAe;IAI3C,OAAO,CAAC,mBAAmB,CAAM;IAEjC,OAAO,CAAC,MAAM,CAAsB;IAEpC,OAAO,CAAC,OAAO,CAAC,CAAa;IAE7B,oBAAoB;IAKpB,OAAO,CAAC,QAAQ;IAchB,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,qBAAqB;IAS7B,OAAO,CAAC,mBAAmB,CAEzB;IAEF,OAAO,CAAC,UAAU,CAEhB;IAEF,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,MAAM;IAcd,OAAO,CAAC,IAAI;IAaZ,OAAO,CAAC,aAAa;IAuDrB,OAAO,CAAC,iBAAiB;IAiCzB,OAAO,CAAC,OAAO,EAAE,cAAc;IAoB/B,OAAO,CAAC,WAAW;IAyBnB,OAAO,CAAC,QAAQ;IAqBhB,OAAO,CAAC,iBAAiB;IAwBzB,MAAM,CAAC,MAAM,0BAsOX;IAIF,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B,MAAM;CA8DP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}