@tartaguti/ui-components 0.0.0-stage → 0.1.0

package/dist/tt-dropdown-menu.js

@@ -0,0 +1,631 @@
+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, query } from "lit/decorators.js";
+import { trackAnchor, placeBelow } from "./floating.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import "./tt-icon.js";
+let uid = 0;
+/**
+ * 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.
+ */
+let TTDropdownMenu = class TTDropdownMenu extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+        this.label = "Actions";
+        // Which edge of the trigger the menu lines up with.
+        this.align = "end";
+        this.disabled = false;
+        /*
+          The trigger's height: the same three steps, from the same tokens, as
+          tt-button and every field, so a menu beside them in a row or a
+          tt-button-group is exactly as tall. The trigger used to be fixed at
+          the small height, 4px short of a medium button in a split button.
+      
+          Defaults to small, not medium like the rest, because the usual home
+          of the default kebab trigger is a table row or a card corner, where
+          the smaller target keeps the row from growing. Reflected: the sizes
+          are :host rules.
+        */
+        this.size = "small";
+        this.open = false;
+        this.activeIndex = -1;
+        // The default trigger is a square icon button. Slotted content is
+        // usually a word, which needs horizontal padding and no fixed width.
+        // There is no CSS selector for "this slot has assigned nodes", so the
+        // slotchange event has to set a flag the styles can key off.
+        this.customTrigger = false;
+        /*
+          Whether the slotted trigger has text of its own. Text names the button
+          by itself, and an aria-label on top would replace the words people
+          can see. An icon has no text, so without label the trigger was
+          announced as just "button".
+        */
+        this.triggerHasText = false;
+        // The trigger width the menu is currently sized to, so a scroll does
+        // not redo the measurement on every frame.
+        this.appliedTriggerWidth = -1;
+        this.menuId = `tt-menu-${++uid}`;
+        // composedPath sees through shadow boundaries. event.target alone is
+        // retargeted to the host, so our own clicks would look like outside ones.
+        this.handleDocumentClick = (event) => {
+            if (!event.composedPath().includes(this))
+                this.closeMenu(false);
+        };
+        this.reposition = () => {
+            if (this.open)
+                this.position();
+        };
+    }
+    disconnectedCallback() {
+        this.removeGlobalListeners();
+        super.disconnectedCallback();
+    }
+    openMenu() {
+        if (this.disabled || this.open)
+            return;
+        this.open = true;
+        this.activeIndex = -1;
+        document.addEventListener("click", this.handleDocumentClick);
+        // Not a window scroll listener: scroll events are not composed, so a
+        // window listener never sees the page scrolling inside tt-layout's
+        // shadow root. trackAnchor listens on the real scroll ancestors.
+        this.untrack = trackAnchor(this, this.reposition);
+    }
+    closeMenu(refocus = true) {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.activeIndex = -1;
+        this.removeGlobalListeners();
+        if (refocus)
+            this.trigger?.focus();
+    }
+    removeGlobalListeners() {
+        document.removeEventListener("click", this.handleDocumentClick);
+        this.untrack?.();
+        this.untrack = undefined;
+    }
+    handleTriggerClick() {
+        if (this.open) {
+            this.closeMenu();
+            return;
+        }
+        this.openMenu();
+        // Onto the first item, as a menu button does, so the next arrow key
+        // or a screen reader starts from inside the menu.
+        this.move(1);
+    }
+    choose(item) {
+        if (item.disabled)
+            return;
+        this.closeMenu();
+        this.dispatchEvent(new CustomEvent("tt-menu-select", {
+            detail: { value: item.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    move(delta) {
+        const count = this.items.length;
+        if (count === 0)
+            return;
+        let next = this.activeIndex;
+        for (let i = 0; i < count; i++) {
+            next = (next + delta + count) % count;
+            if (!this.items[next].disabled)
+                break;
+        }
+        this.activeIndex = next;
+    }
+    handleKeydown(event) {
+        if (this.disabled)
+            return;
+        switch (event.key) {
+            /*
+              Opening with an arrow key also moves the cursor, matching
+              tt-select. Opening onto nothing means the next press is spent
+              just getting to the first item, and the keyboard user pays for
+              every menu twice.
+            */
+            case "ArrowDown":
+                event.preventDefault();
+                if (!this.open)
+                    this.openMenu();
+                this.move(1);
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                if (!this.open) {
+                    this.openMenu();
+                    // One past the end, so the step below lands on the last item.
+                    this.activeIndex = this.items.length;
+                }
+                this.move(-1);
+                break;
+            case "Enter":
+            case " ":
+                event.preventDefault();
+                if (this.open && this.activeIndex >= 0) {
+                    this.choose(this.items[this.activeIndex]);
+                }
+                else {
+                    this.openMenu();
+                    this.move(1);
+                }
+                break;
+            case "Escape":
+                if (this.open) {
+                    event.preventDefault();
+                    this.closeMenu();
+                }
+                break;
+            case "Tab":
+                this.closeMenu(false);
+                break;
+        }
+    }
+    /*
+      Keys pressed while focus is on an item. Only movement and leaving:
+      Enter and Space are left to the item's own <button>, whose click
+      already chooses it. Handling them here as well would choose twice.
+    */
+    handleMenuKeydown(event) {
+        switch (event.key) {
+            case "ArrowDown":
+                event.preventDefault();
+                this.move(1);
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                this.move(-1);
+                break;
+            case "Home":
+                event.preventDefault();
+                this.activeIndex = -1;
+                this.move(1);
+                break;
+            case "End":
+                event.preventDefault();
+                this.activeIndex = this.items.length;
+                this.move(-1);
+                break;
+            case "Escape":
+                event.preventDefault();
+                this.closeMenu();
+                break;
+            case "Tab":
+                // Back on the trigger BEFORE the browser moves focus, so Tab
+                // carries on from the trigger instead of from an item that is
+                // about to disappear.
+                this.closeMenu();
+                break;
+        }
+    }
+    updated(changed) {
+        if (changed.has("open"))
+            this.syncPopover();
+        /*
+          FOCUS FOLLOWS THE CURSOR. The highlighted item used to be a CSS
+          class and nothing else: focus stayed on the trigger, so a screen
+          reader said nothing at all while the user arrowed through the menu.
+          Moving real focus onto the item is the standard menu-button pattern
+          and makes every item announce itself, with no ARIA to keep in sync.
+        */
+        if (this.open &&
+            this.activeIndex >= 0 &&
+            (changed.has("activeIndex") || changed.has("open"))) {
+            const items = this.renderRoot.querySelectorAll(".item");
+            items[this.activeIndex]?.focus();
+        }
+    }
+    syncPopover() {
+        const menu = this.menu;
+        if (!menu)
+            return;
+        if (this.open) {
+            /*
+              Show BEFORE positioning. A closed popover is display:none, and a
+              display:none element measures 0x0, so positioning first meant
+              position() worked with a width of zero: the align="end" offset
+              collapsed to the trigger's right edge and the viewport clamp had
+              nothing to clamp, so a menu near the right edge ran off screen.
+            */
+            if (!menu.matches(":popover-open"))
+                menu.showPopover();
+            this.position();
+        }
+        else if (menu.matches(":popover-open")) {
+            menu.hidePopover();
+        }
+    }
+    /*
+      Rendered in the top layer via popover, so a table's overflow cannot
+      clip it. The top layer is outside normal flow, so the position has to
+      be set from script. The maths lives in floating.ts because tt-filter
+      needs exactly the same thing.
+    */
+    position() {
+        if (!this.trigger || !this.menu)
+            return;
+        // Before placeBelow, not after: the align="end" offset and the
+        // viewport clamp are both computed from the menu's width, so it has
+        // to be final before the maths runs.
+        this.matchTriggerWidth();
+        placeBelow(this.trigger, this.menu, { align: this.align });
+    }
+    /*
+      A menu narrower than the control that opened it looks like a mistake,
+      and one wider than it looks like a different control. So the menu is
+      never narrower than its own min-width, and never a different width
+      from the trigger once the trigger is the bigger of the two.
+  
+      An icon button keeps the default: a 36px trigger should not open a
+      36px menu. Above the floor the trigger wins outright, which is what
+      makes a full-width control open a full-width menu.
+    */
+    matchTriggerWidth() {
+        const menu = this.menu;
+        const trigger = this.trigger.getBoundingClientRect().width;
+        /*
+          position() runs again on every scroll and resize while the menu is
+          open, and the work below writes a style and then reads a computed
+          one, which forces a synchronous layout. The trigger almost never
+          changes width mid-scroll, so do it only when it actually has.
+        */
+        if (trigger === this.appliedTriggerWidth)
+            return;
+        this.appliedTriggerWidth = trigger;
+        // Cleared first, or the floor below is measured against a width this
+        // method set on a previous open.
+        menu.style.width = "";
+        // Read from the stylesheet rather than repeating the number here, so
+        // the CSS above stays the only place the floor is written down.
+        const floor = parseFloat(getComputedStyle(menu).minWidth) || 0;
+        if (trigger > floor)
+            menu.style.width = `${trigger}px`;
+    }
+    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: inline-flex;
+      font-family: var(--tt-font-sans);
+
+      --_h: var(--tt-control-sm);
+    }
+
+    :host([size="medium"]) {
+      --_h: var(--tt-control-md);
+    }
+
+    :host([size="large"]) {
+      --_h: var(--tt-control-lg);
+    }
+
+    :host([disabled]) {
+      opacity: var(--tt-opacity-disabled);
+    }
+
+    .trigger {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--tt-space-2);
+
+      /* border-box, so the 1px border sits inside the height, as on
+         tt-button, instead of being added around it. */
+      box-sizing: border-box;
+      width: var(--_h);
+      height: var(--_h);
+      padding: 0;
+
+      border: 1px solid transparent;
+      /* tt-button-group flattens this per position, so controls that
+         sit together share one edge instead of stacking two. */
+      border-radius: var(--tt-group-radius, var(--tt-radius));
+
+      background: transparent;
+      color: var(--tt-muted-foreground);
+
+      font: inherit;
+      font-size: var(--tt-text-sm);
+      cursor: pointer;
+
+      transition:
+        background var(--tt-duration-normal) var(--tt-ease),
+        color var(--tt-duration-normal) var(--tt-ease);
+      /* Long-press should activate the control, not start selecting
+         its label. The other half of the mobile blue flash: the tap
+         highlight is the flash, this is the drag-select. */
+      -webkit-user-select: none;
+      user-select: none;
+    }
+
+    /* A slotted label needs room to breathe; the icon-only default does
+       not, and would look lopsided with padding. */
+    .trigger.custom {
+      width: auto;
+      padding: 0 var(--tt-space-3);
+
+      /* A wrapped label would overflow the fixed height. */
+      white-space: nowrap;
+
+      border-color: var(--tt-input);
+      background: var(--tt-field);
+      color: var(--tt-foreground);
+      font-weight: var(--tt-weight-medium);
+    }
+
+    .trigger:hover:not(:disabled) {
+      background: var(--tt-accent);
+      color: var(--tt-foreground);
+    }
+
+    .trigger:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+    }
+
+    .trigger:disabled {
+      cursor: not-allowed;
+    }
+
+    .menu {
+      position: fixed;
+      margin: 0;
+      padding: var(--tt-space-1);
+
+      /*
+        So a width means the width you see. Without it the 4px padding and
+        1px border on each side were added on top of every measurement,
+        which is why a 180px min-width drew a 190px menu. It also has to be
+        true before position() can pin the menu to the trigger, or matching
+        a 240px trigger would draw a 250px menu.
+
+        The app's global reset does not reach in here: shadow DOM does not
+        inherit a * selector, so every component sets this for itself.
+      */
+      box-sizing: border-box;
+
+      /*
+        The floor, and the whole size for a small trigger. 190 rather than
+        180 only because border-box now counts the border and padding that
+        used to be added afterwards: the menu on screen is the same width
+        it has always been.
+
+        position() widens it to match anything wider than this.
+      */
+      min-width: 190px;
+
+      /* A backstop for the script clamp: an unusually long label can
+         still never make the menu wider than the viewport. */
+      max-width: calc(100vw - 16px);
+
+      max-height: 60vh;
+      overflow-y: auto;
+
+      list-style: none;
+
+      background: var(--tt-popover);
+      color: var(--tt-popover-foreground);
+
+      border: 1px solid var(--tt-border);
+      border-radius: var(--tt-radius);
+      box-shadow: var(--tt-elevation-2);
+    }
+
+    /*
+      In and out of the top layer. display and overlay are discrete, and
+      allow-discrete holds them for the whole exit, so the list stays
+      painted and in the top layer until its fade has finished. Quicker
+      out than in. translate only, never scale: placeBelow measures this
+      element while it is still at its starting style, and a scale would
+      shrink the width it measures. Reduced motion is the 1ms durations in
+      tokens.css.
+    */
+    .menu {
+      transition:
+        opacity var(--tt-duration-fast) var(--tt-ease-in),
+        translate var(--tt-duration-fast) var(--tt-ease-in),
+        overlay var(--tt-duration-fast) allow-discrete,
+        display var(--tt-duration-fast) allow-discrete;
+    }
+
+    .menu:popover-open {
+      transition-duration: var(--tt-duration-slow);
+      transition-timing-function: var(--tt-ease-out);
+    }
+
+    @starting-style {
+      .menu:popover-open {
+        opacity: 0;
+        translate: 0 -4px;
+      }
+    }
+
+    /* Closed, and closing: clicks during the fade reach the page. */
+    .menu:not(:popover-open) {
+      display: none;
+      opacity: 0;
+      translate: 0 -4px;
+      pointer-events: none;
+    }
+
+    li {
+      list-style: none;
+    }
+
+    .item {
+      display: flex;
+      align-items: center;
+      gap: var(--tt-space-2);
+
+      width: 100%;
+      box-sizing: border-box;
+
+      padding: var(--tt-space-2) var(--tt-space-3);
+
+      border: none;
+      border-radius: var(--tt-radius-sm);
+      background: transparent;
+      color: inherit;
+
+      font: inherit;
+      font-size: var(--tt-text-sm);
+      text-align: left;
+      white-space: nowrap;
+
+      cursor: pointer;
+      /* Long-press should activate the control, not start selecting
+         its label. The other half of the mobile blue flash: the tap
+         highlight is the flash, this is the drag-select. */
+      -webkit-user-select: none;
+      user-select: none;
+    }
+
+    .item:hover:not(:disabled),
+    .item.active:not(:disabled) {
+      background: var(--tt-accent);
+      color: var(--tt-accent-foreground);
+    }
+
+    .item.danger {
+      color: var(--tt-destructive);
+    }
+
+    .item.danger:hover:not(:disabled),
+    .item.danger.active:not(:disabled) {
+      background: color-mix(in srgb, var(--tt-destructive) 12%, transparent);
+      color: var(--tt-destructive);
+    }
+
+    .item:disabled {
+      opacity: var(--tt-opacity-disabled);
+      cursor: not-allowed;
+    }
+
+    .separated {
+      margin-top: var(--tt-space-1);
+      padding-top: var(--tt-space-1);
+      border-top: 1px solid var(--tt-border);
+    }
+
+  `; }
+    // Focus has to be forwarded: focusing the host focuses nothing, since the
+    // control lives in the shadow root. Same as tt-slider and tt-input.
+    focus(options) {
+        this.renderRoot?.querySelector(".trigger")?.focus(options);
+    }
+    render() {
+        return html `
+      <button
+        class="trigger ${this.customTrigger ? "custom" : ""}"
+        part="trigger"
+        type="button"
+        aria-haspopup="menu"
+        aria-expanded=${this.open ? "true" : "false"}
+        aria-controls=${this.menuId}
+        aria-label=${ifDefined(this.triggerHasText ? undefined : this.label)}
+        ?disabled=${this.disabled}
+        @click=${this.handleTriggerClick}
+        @keydown=${this.handleKeydown}
+      >
+        <slot
+          name="trigger"
+          @slotchange=${(e) => {
+            const slot = e.target;
+            const nodes = slot.assignedNodes();
+            this.customTrigger = nodes.length > 0;
+            this.triggerHasText = nodes.some((node) => node.textContent?.trim());
+        }}
+        >
+          <tt-icon name="more-vertical" size="16px"></tt-icon>
+        </slot>
+      </button>
+
+      <ul
+        class="menu"
+        part="menu"
+        id=${this.menuId}
+        popover="manual"
+        role="menu"
+        aria-label=${this.label}
+        @keydown=${this.handleMenuKeydown}
+      >
+        ${this.items.map((item, index) => html `
+            <!-- role="none": a menu's children must be menu items, and a
+                 bare <li> would sit between the two as a "listitem". -->
+            <li class=${item.separated ? "separated" : ""} role="none">
+              <button
+                class="item ${item.danger ? "danger" : ""} ${index ===
+            this.activeIndex
+            ? "active"
+            : ""}"
+                part="item"
+                type="button"
+                role="menuitem"
+                tabindex="-1"
+                ?disabled=${item.disabled}
+                @click=${() => this.choose(item)}
+                @mousemove=${() => (this.activeIndex = index)}
+              >
+                ${item.label}
+              </button>
+            </li>
+          `)}
+      </ul>
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], TTDropdownMenu.prototype, "items", void 0);
+__decorate([
+    property({ type: String })
+], TTDropdownMenu.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], TTDropdownMenu.prototype, "align", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTDropdownMenu.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTDropdownMenu.prototype, "size", void 0);
+__decorate([
+    state()
+], TTDropdownMenu.prototype, "open", void 0);
+__decorate([
+    state()
+], TTDropdownMenu.prototype, "activeIndex", void 0);
+__decorate([
+    state()
+], TTDropdownMenu.prototype, "customTrigger", void 0);
+__decorate([
+    state()
+], TTDropdownMenu.prototype, "triggerHasText", void 0);
+__decorate([
+    query(".trigger")
+], TTDropdownMenu.prototype, "trigger", void 0);
+__decorate([
+    query(".menu")
+], TTDropdownMenu.prototype, "menu", void 0);
+TTDropdownMenu = __decorate([
+    customElement("tt-dropdown-menu")
+], TTDropdownMenu);
+export { TTDropdownMenu };
+//# sourceMappingURL=tt-dropdown-menu.js.map

package/dist/tt-dropdown-menu.js.map

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

package/dist/tt-empty-state.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from "lit";
+export declare class TTEmptyState extends LitElement {
+    heading: string;
+    description: string;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-empty-state": TTEmptyState;
+    }
+}
+//# sourceMappingURL=tt-empty-state.d.ts.map

package/dist/tt-empty-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-empty-state.d.ts","sourceRoot":"","sources":["../src/tt-empty-state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,qBACa,YAAa,SAAQ,UAAU;IACd,OAAO,SAAM;IACb,WAAW,SAAM;IAE7C,MAAM,CAAC,MAAM,0BA8CX;IAEF,MAAM;CAqBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}