@tartaguti/ui-components 0.0.0-stage → 0.1.0

package/dist/sidebar/tt-menu-item.js

@@ -0,0 +1,502 @@
+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 { ifDefined } from "lit/directives/if-defined.js";
+import { property, state, customElement } from "lit/decorators.js";
+import { safeUrl } from "../safe-url.js";
+import "../tt-icon.js";
+/**
+ * One row of sidebar navigation.
+ *
+ * ---------------------------------------------------------------------
+ * WHY THE ROW IS NOT ONE ELEMENT.
+ *
+ * A menu item can carry a trailing control: a count, or the three dots
+ * that open a per-item menu. A button inside a button is invalid HTML and
+ * breaks keyboard and screen-reader behaviour in every browser, so the
+ * two cannot nest.
+ *
+ * So the row is a plain container, and the two controls are SIBLINGS
+ * inside it:
+ *
+ *   .row            the hover surface, the corner, the active bar
+ *     .main         a real <button> or <a>, holds the padding, flex: 1
+ *     .trail        the badge and the actions, only when there are any
+ *
+ * The padding lives on .main rather than on .row so that clicking the
+ * blank space beside the label still activates the item. If the row
+ * carried the padding, that space would belong to nothing.
+ *
+ * ---------------------------------------------------------------------
+ * WHY IT IS NO LONGER role="menuitem".
+ *
+ * menuitem is for application menus, and it is only valid inside a
+ * role="menu" parent. This is site navigation inside a landmark, so the
+ * honest markup is a link or a button, which also brings Enter, Space,
+ * middle-click and "open in new tab" for free instead of reimplementing
+ * them. The custom keydown handler this component used to carry is gone
+ * with it.
+ *
+ * ---------------------------------------------------------------------
+ * RAIL MODE.
+ *
+ * Nothing here knows whether the sidebar is collapsed. tt-sidebar sets a
+ * handful of custom properties when it is, and every one of them is read
+ * below through var() with the expanded value as the fallback. Custom
+ * properties inherit and cross shadow boundaries, so this works at any
+ * depth with no props and no coordination, and an item used outside a
+ * sidebar simply gets the fallbacks.
+ */
+let TTMenuItem = class TTMenuItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = "default";
+        // Selection state, independent of the style variant.
+        this.active = false;
+        this.disabled = false;
+        this.href = "";
+        /*
+          Kept at _blank because that is what this component has always done:
+          it used to call openSafely(), which opens a new tab. Set target="_self"
+          for an in-app link.
+        */
+        this.target = "_blank";
+        this.value = "";
+        /*
+          The accessible name, used for the tooltip when the sidebar is a rail
+          and the label is not readable. Optional: without it a collapsed item
+          still works, it just has no hover hint.
+        */
+        this.label = "";
+        // Renders the built-in three-dot button at the end of the row.
+        this.more = false;
+        this.moreLabel = "More actions";
+        this.hasBadge = false;
+        this.hasActions = false;
+    }
+    activate() {
+        if (this.disabled)
+            return;
+        this.dispatchEvent(new CustomEvent("tt-menu-click", {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    openMore(event) {
+        /*
+          The dots sit beside the main control rather than inside it, so this
+          click cannot reach it. What it CAN do is bubble on as a plain click
+          to whatever wraps the sidebar, which would look like a navigation
+          that never happened. Stopping it keeps the two intents separate.
+        */
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        this.dispatchEvent(new CustomEvent("tt-menu-more", {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    updateSlot(prop, event) {
+        const slot = event.target;
+        this[prop] = slot
+            .assignedNodes({ flatten: true })
+            .some((node) => node.nodeType === Node.ELEMENT_NODE ||
+            (node.textContent ?? "").trim() !== "");
+    }
+    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;
+
+      font-family: var(--tt-font-sans);
+      -webkit-font-smoothing: antialiased;
+
+      color: var(--tt-sidebar-foreground);
+    }
+
+    .row {
+      position: relative;
+
+      display: flex;
+      align-items: center;
+
+      width: 100%;
+      box-sizing: border-box;
+
+      border-radius: var(--tt-radius);
+
+      /* Fast on purpose. A navigation row is pointed at, not admired:
+         anything slower than this reads as lag rather than as polish. */
+      transition:
+        background var(--tt-duration-fast) var(--tt-ease-out),
+        color var(--tt-duration-fast) var(--tt-ease-out);
+    }
+
+    .row:hover {
+      background: var(--tt-sidebar-accent);
+      color: var(--tt-sidebar-accent-foreground);
+    }
+
+    .row.active {
+      background: var(--tt-sidebar-accent);
+      color: var(--tt-sidebar-accent-foreground);
+    }
+
+    /*
+      The active marker. Drawn on the row rather than as a border so it
+      cannot change the item's size, and scaled from nothing rather than
+      faded in, which is what gives it the small vertical spring.
+    */
+    .row::before {
+      content: "";
+
+      position: absolute;
+      left: 0;
+      top: 50%;
+
+      width: 3px;
+      height: 60%;
+
+      border-radius: var(--tt-radius-full);
+      background: var(--tt-sidebar-primary);
+
+      transform: translateY(-50%) scaleY(0);
+      opacity: 0;
+
+      transition:
+        transform var(--tt-duration-normal) var(--tt-ease-spring),
+        opacity var(--tt-duration-fast) var(--tt-ease-out);
+    }
+
+    .row.active::before {
+      transform: translateY(-50%) scaleY(1);
+      opacity: 1;
+    }
+
+    /* ---- the main control ---- */
+
+    .main {
+      flex: 1;
+      min-width: 0;
+
+      display: flex;
+      align-items: center;
+      justify-content: var(--tt-menu-justify, flex-start);
+
+      /* Zero in rail mode: the label is gone, and a gap next to nothing
+         reads as a mis-centred icon. */
+      gap: var(--tt-menu-gap, var(--tt-space-2));
+
+      box-sizing: border-box;
+      padding: var(--tt-space-2) var(--tt-space-3);
+
+      border: none;
+      background: none;
+
+      font: inherit;
+      font-size: var(--tt-text-sm);
+      font-weight: var(--tt-weight-medium);
+      text-align: left;
+      text-decoration: none;
+      color: inherit;
+
+      border-radius: inherit;
+      cursor: pointer;
+      user-select: none;
+
+      transition: font-weight var(--tt-duration-fast) var(--tt-ease-out);
+    }
+
+    .row.active .main {
+      font-weight: var(--tt-weight-semibold);
+    }
+
+    /* The token file's one focus recipe: an outline, never a box-shadow.
+       This component used to draw an inset ring, so focus looked
+       different here than everywhere else in the system. */
+    .main:focus-visible,
+    .dots:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: calc(var(--tt-ring-width) * -1);
+    }
+
+    .icon {
+      display: flex;
+      flex-shrink: 0;
+    }
+
+    /* Quieter than the leading icon on purpose. A trailing arrow is a
+       hint about where the link goes, not a thing to look at first. */
+    .icon-end {
+      display: var(--tt-menu-trail-display, flex);
+
+      color: var(--tt-muted-foreground);
+    }
+
+    /*
+      The label is on a grid track so a rail can take it to zero width
+      without a magic pixel number that would be wrong at some font size.
+
+      NOT animated, deliberately. The panel animates; the word is either
+      there or it is not. Anything that shrinks a label while it is on
+      screen has to show its own truncation on the way past, and no
+      easing fixes that because the text really is being squeezed. See
+      the note on the nav pin in tt-sidebar for the other half of this.
+    */
+    .label {
+      display: grid;
+      grid-template-columns: var(--tt-menu-label-cols, 1fr);
+
+      min-width: 0;
+    }
+
+    .label > span {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    /* ---- the trailing controls ---- */
+
+    .trail {
+      display: var(--tt-menu-trail-display, flex);
+      align-items: center;
+      gap: var(--tt-space-1);
+
+      flex-shrink: 0;
+      padding-right: var(--tt-space-2);
+    }
+
+    /* The rule above sets display, so it beats the browser's own
+       [hidden] { display: none }. Without this line the attribute does
+       nothing and an empty trail still takes its padding. */
+    .trail[hidden] {
+      display: none;
+    }
+
+    /*
+      A count is information, so it stays. The actions are an affordance,
+      so they arrive on hover and keep the resting row quiet.
+    */
+    .actions {
+      display: flex;
+      align-items: center;
+
+      opacity: 0;
+      transform: translateX(4px);
+
+      transition:
+        opacity var(--tt-duration-fast) var(--tt-ease-out),
+        transform var(--tt-duration-fast) var(--tt-ease-out);
+    }
+
+    .row:hover .actions,
+    .row:focus-within .actions,
+    .row.active .actions {
+      opacity: 1;
+      transform: none;
+    }
+
+    /*
+      A touch screen has no hover, so a control that appears on hover is a
+      control that never appears. On those devices it is simply always
+      there.
+    */
+    @media (hover: none) {
+      .actions {
+        opacity: 1;
+        transform: none;
+      }
+    }
+
+    .dots {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      width: 22px;
+      height: 22px;
+      padding: 0;
+
+      border: none;
+      border-radius: var(--tt-radius-sm);
+      background: none;
+
+      color: var(--tt-muted-foreground);
+      cursor: pointer;
+
+      transition:
+        background var(--tt-duration-fast) var(--tt-ease-out),
+        color var(--tt-duration-fast) var(--tt-ease-out);
+    }
+
+    .dots:hover {
+      background: color-mix(
+        in oklab,
+        var(--tt-sidebar-foreground) 12%,
+        transparent
+      );
+      color: var(--tt-sidebar-foreground);
+    }
+
+    /* ---- disabled ---- */
+
+    .row.disabled {
+      opacity: var(--tt-opacity-disabled);
+    }
+
+    .row.disabled .main,
+    .row.disabled .dots {
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    ::slotted(tt-icon) {
+      flex-shrink: 0;
+    }
+  `; }
+    renderMain() {
+        /*
+          icon-end sits INSIDE the main control rather than in the trail,
+          because it is part of the link: the little arrow that says this one
+          leaves the app. The trail is for things that are not the link, like
+          a count or the dots menu.
+        */
+        const inner = html `
+      <span class="icon"><slot name="icon"></slot></span>
+      <span class="label"
+        ><span><slot></slot></span
+      ></span>
+      <span class="icon icon-end"><slot name="icon-end"></slot></span>
+    `;
+        if (this.variant === "link") {
+            /*
+              href arrives as data, so it can be a javascript: URL. Sanitising
+              it here rather than at click time means an unsafe value never
+              reaches the DOM at all, and the row degrades to an inert span
+              instead of pretending to be a link that does nothing.
+            */
+            const safe = this.disabled ? null : safeUrl(this.href);
+            return html `
+        <a
+          class="main"
+          part="main"
+          href=${ifDefined(safe ?? undefined)}
+          target=${this.target}
+          rel="noopener noreferrer"
+          title=${ifDefined(this.label || undefined)}
+          aria-disabled=${ifDefined(this.disabled ? "true" : undefined)}
+          aria-current=${ifDefined(this.active ? "page" : undefined)}
+          >${inner}</a
+        >
+      `;
+        }
+        return html `
+      <button
+        class="main"
+        part="main"
+        type="button"
+        ?disabled=${this.disabled}
+        title=${ifDefined(this.label || undefined)}
+        aria-current=${ifDefined(this.active ? "page" : undefined)}
+        @click=${this.activate}
+      >
+        ${inner}
+      </button>
+    `;
+    }
+    render() {
+        const showTrail = this.more || this.hasBadge || this.hasActions;
+        return html `
+      <div
+        part="item"
+        class="row ${this.active ? "active" : ""} ${this.disabled ? "disabled" : ""}"
+      >
+        ${this.renderMain()}
+
+        <!--
+          Always rendered so slotchange can fire and tell us whether there
+          is anything in it. Hidden rather than absent, because a slot that
+          is never in the DOM never reports its content.
+        -->
+        <span class="trail" part="trail" ?hidden=${!showTrail}>
+          <slot
+            name="badge"
+            @slotchange=${(e) => this.updateSlot("hasBadge", e)}
+          ></slot>
+
+          <span class="actions">
+            <slot
+              name="actions"
+              @slotchange=${(e) => this.updateSlot("hasActions", e)}
+            ></slot>
+
+            ${this.more
+            ? html `
+                    <button
+                      class="dots"
+                      part="more"
+                      type="button"
+                      aria-label=${this.moreLabel}
+                      @click=${this.openMore}
+                    >
+                      <tt-icon name="more-horizontal" size="16px"></tt-icon>
+                    </button>
+                  `
+            : nothing}
+          </span>
+        </span>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TTMenuItem.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTMenuItem.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTMenuItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], TTMenuItem.prototype, "href", void 0);
+__decorate([
+    property({ type: String })
+], TTMenuItem.prototype, "target", void 0);
+__decorate([
+    property({ type: String })
+], TTMenuItem.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], TTMenuItem.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTMenuItem.prototype, "more", void 0);
+__decorate([
+    property({ type: String, attribute: "more-label" })
+], TTMenuItem.prototype, "moreLabel", void 0);
+__decorate([
+    state()
+], TTMenuItem.prototype, "hasBadge", void 0);
+__decorate([
+    state()
+], TTMenuItem.prototype, "hasActions", void 0);
+TTMenuItem = __decorate([
+    customElement("tt-menu-item")
+], TTMenuItem);
+export { TTMenuItem };
+//# sourceMappingURL=tt-menu-item.js.map

package/dist/sidebar/tt-menu-item.js.map

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

package/dist/sidebar/tt-sidebar-footer.d.ts

@@ -0,0 +1,39 @@
+import { LitElement } from "lit";
+/**
+ * The account row at the bottom of a sidebar.
+ *
+ * Goes in tt-sidebar's `footer` slot. Same shape as tt-sidebar-header on
+ * purpose: leading mark, two lines of text, trailing actions. Two rows
+ * that look alike should be built alike, or they drift apart the first
+ * time one of them is edited.
+ *
+ *   <tt-sidebar-footer slot="footer" heading="Alex Rana" description="alex@x.com">
+ *     <tt-avatar slot="leading" name="Alex Rana"></tt-avatar>
+ *     <tt-button slot="actions" variant="ghost" size="small">...</tt-button>
+ *   </tt-sidebar-footer>
+ *
+ * With `clickable` the whole row becomes one button and emits
+ * tt-sidebar-account, for the common case where clicking the account
+ * opens a menu. It is off by default because a row that looks clickable
+ * and is not is worse than a plain row, and most footers are plain.
+ *
+ * `clickable` and the `actions` slot work together, because the actions
+ * sit BESIDE the button rather than inside it. A button inside a button
+ * is invalid HTML, so the row is a container holding two siblings. Same
+ * arrangement as tt-menu-item, for the same reason.
+ */
+export declare class TTSidebarFooter extends LitElement {
+    heading: string;
+    description: string;
+    clickable: boolean;
+    private activate;
+    static styles: import("lit").CSSResult;
+    private renderInner;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-sidebar-footer": TTSidebarFooter;
+    }
+}
+//# sourceMappingURL=tt-sidebar-footer.d.ts.map

package/dist/sidebar/tt-sidebar-footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-sidebar-footer.d.ts","sourceRoot":"","sources":["../../src/sidebar/tt-sidebar-footer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAE7C,OAAO,SAAM;IAGb,WAAW,SAAM;IAGjB,SAAS,UAAS;IAElB,OAAO,CAAC,QAAQ;IAShB,MAAM,CAAC,MAAM,0BA4GX;IAEF,OAAO,CAAC,WAAW;IAmBnB,MAAM;CAwBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}