@tartaguti/ui-components 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,358 @@
+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 { property, state, customElement } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import "../tt-icon.js";
+let groupId = 0;
+/**
+ * A labelled section of sidebar navigation, optionally collapsible.
+ *
+ * ---------------------------------------------------------------------
+ * TWO MODES.
+ *
+ *   (default)              the heading is a plain label and the content
+ *                          is always there. This is the right shape when
+ *                          a group exists to name a set of links rather
+ *                          than to hide them.
+ *   collapsible            the heading is a button, the content opens
+ *                          and closes, and `open` is the state.
+ *
+ * Opt-in, like tt-sidebar's collapsible and every other boolean: a
+ * boolean attribute can only switch something ON.
+ *
+ * The default is the old behaviour exactly, so nothing that already uses
+ * this component changes.
+ *
+ * ---------------------------------------------------------------------
+ * WHY THE HEADING ROW IS A ROW.
+ *
+ * Same reason as tt-menu-item: an actions slot next to a heading BUTTON
+ * cannot live inside that button, because a button inside a button is
+ * invalid HTML. So the heading row holds two siblings.
+ *
+ * ---------------------------------------------------------------------
+ * RAIL MODE.
+ *
+ * When tt-sidebar is collapsed it hides these headings and forces every
+ * group open. A closed group in a rail would be unreachable: its own
+ * heading is the only way to open it, and that heading is exactly what a
+ * rail has no room for. Both facts arrive as inherited custom properties,
+ * so this component still knows nothing about the sidebar.
+ *
+ * The events, for the custom-elements manifest. Its analyzer reads event
+ * names from string literals at the dispatch site, and these are chosen at
+ * run time, so without the tags the manifest listed a bogus event instead.
+ * @fires tt-open - When the group expands.
+ * @fires tt-close - When the group collapses.
+ * @fires tt-toggle - Either way, with detail.open.
+ */
+let TTMenuGroup = class TTMenuGroup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.heading = "";
+        this.open = false;
+        this.disabled = false;
+        this.collapsible = false;
+        this.hasActions = false;
+        this.contentId = `tt-menu-group-content-${++groupId}`;
+        this.headingId = `tt-menu-group-heading-${groupId}`;
+    }
+    /**
+     * Flips it and announces, the same call the heading makes. Public, and
+     * announced with tt-toggle as well as tt-open / tt-close, because
+     * tt-collapsible does both: the two are the same self-owning disclosure.
+     */
+    toggle() {
+        if (this.disabled || !this.collapsible)
+            return;
+        this.open = !this.open;
+        this.dispatchEvent(new CustomEvent(this.open ? "tt-open" : "tt-close", {
+            bubbles: true,
+            composed: true,
+        }));
+        this.dispatchEvent(new CustomEvent("tt-toggle", {
+            detail: { open: this.open },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    updateActions(event) {
+        const slot = event.target;
+        this.hasActions = 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);
+    }
+
+    .group {
+      width: 100%;
+    }
+
+    /* ---- heading ---- */
+
+    .head {
+      /* A rail has no room for a heading, and nothing about this row is
+         animated, so it simply goes. This was briefly a collapsing grid
+         track, which was the wrong tool twice over: it existed to make a
+         fade line up, and a 0fr track does not shrink a row anyway
+         unless the item inside it also opts out of its own automatic
+         minimum size. */
+      display: var(--tt-menu-heading-display, flex);
+      align-items: center;
+
+      width: 100%;
+      box-sizing: border-box;
+
+      border-radius: var(--tt-radius);
+
+      transition: background var(--tt-duration-fast) var(--tt-ease-out);
+    }
+
+    .head:hover:not(.static) {
+      background: var(--tt-sidebar-accent);
+    }
+
+    .label {
+      flex: 1;
+      min-width: 0;
+
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--tt-space-2);
+
+      box-sizing: border-box;
+      padding: var(--tt-space-2) var(--tt-space-3);
+
+      border: none;
+      border-radius: inherit;
+      background: transparent;
+
+      font: inherit;
+      font-size: var(--tt-text-xs);
+      font-weight: var(--tt-weight-semibold);
+
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      text-align: left;
+
+      color: var(--tt-muted-foreground);
+
+      transition: color var(--tt-duration-fast) var(--tt-ease-out);
+    }
+
+    button.label {
+      cursor: pointer;
+    }
+
+    .head:hover .label {
+      color: var(--tt-sidebar-accent-foreground);
+    }
+
+    .label > span {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    /* The one focus recipe from the token file: an outline over the
+       corner, not a box-shadow ring floating outside it. */
+    .label:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: calc(var(--tt-ring-width) * -1);
+    }
+
+    .label:disabled {
+      opacity: var(--tt-opacity-disabled);
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    .arrow {
+      display: flex;
+      flex-shrink: 0;
+
+      color: var(--tt-muted-foreground);
+
+      transition: transform var(--tt-duration-normal) var(--tt-ease-spring);
+    }
+
+    .open .arrow {
+      transform: rotate(90deg);
+    }
+
+    .actions {
+      display: flex;
+      align-items: center;
+
+      flex-shrink: 0;
+      padding-right: var(--tt-space-2);
+
+      opacity: 0;
+
+      transition: opacity var(--tt-duration-fast) var(--tt-ease-out);
+    }
+
+    .actions[hidden] {
+      display: none;
+    }
+
+    .head:hover .actions,
+    .head:focus-within .actions {
+      opacity: 1;
+    }
+
+    @media (hover: none) {
+      .actions {
+        opacity: 1;
+      }
+    }
+
+    /* ---- content ----
+
+       Height animates from 0fr to 1fr rather than from 0 to a pixel
+       number, because nothing here knows how tall the items are and any
+       max-height guess is either too small, which clips, or too large,
+       which makes the close look slow and the open look late. */
+
+    .content {
+      display: grid;
+      grid-template-rows: var(--tt-menu-rail-rows, 0fr);
+
+      /* Zero in rail mode: the items are icons centred in a narrow
+         column, and an indent pushes them off that centre. */
+      padding-left: var(--tt-menu-indent, var(--tt-space-2));
+      margin-top: 2px;
+
+      transition: grid-template-rows var(--tt-duration-normal)
+        var(--tt-ease-out);
+    }
+
+    .open .content,
+    .static .content {
+      grid-template-rows: var(--tt-menu-rail-rows, 1fr);
+    }
+
+    .content > .inner {
+      overflow: hidden;
+
+      display: flex;
+      flex-direction: column;
+      gap: var(--tt-space-1);
+    }
+
+    /*
+      A closed group is HIDDEN, not just zero height. 0fr hides it from
+      the eye only: its links stayed in the Tab order and in what a screen
+      reader reads, so a keyboard user tabbed through every item of every
+      closed group, onto links they could not see.
+
+      visibility rather than inert, because rail mode forces every group
+      open from outside through a custom property, and a custom property
+      can reach a CSS value but not an HTML attribute. The delay lets the
+      closing animation finish before the items go.
+    */
+    .group:not(.open):not(.static) .content > .inner {
+      visibility: var(--tt-menu-rail-visibility, hidden);
+      transition: visibility 0s linear var(--tt-duration-normal);
+    }
+  `; }
+    renderLabel() {
+        const inner = html `
+      <span id=${this.headingId}>${this.heading}</span>
+
+      ${this.collapsible
+            ? html `
+              <span class="arrow" aria-hidden="true">
+                <tt-icon name="chevron-right" size="14px"></tt-icon>
+              </span>
+            `
+            : nothing}
+    `;
+        if (!this.collapsible) {
+            return html `<div class="label" part="label">${inner}</div>`;
+        }
+        return html `
+      <button
+        class="label"
+        part="label"
+        type="button"
+        ?disabled=${this.disabled}
+        aria-expanded=${this.open}
+        aria-controls=${this.contentId}
+        @click=${this.toggle}
+      >
+        ${inner}
+      </button>
+    `;
+    }
+    render() {
+        const classes = [
+            "group",
+            this.open ? "open" : "",
+            this.collapsible ? "" : "static",
+        ].join(" ");
+        return html `
+      <div class=${classes}>
+        <div class="head ${this.collapsible ? "" : "static"}" part="head">
+          ${this.renderLabel()}
+
+          <span class="actions" ?hidden=${!this.hasActions}>
+            <slot name="actions" @slotchange=${this.updateActions}></slot>
+          </span>
+        </div>
+
+        <div
+          id=${this.contentId}
+          class="content"
+          role="group"
+          aria-labelledby=${ifDefined(this.heading ? this.headingId : undefined)}
+        >
+          <div class="inner">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TTMenuGroup.prototype, "heading", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTMenuGroup.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTMenuGroup.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTMenuGroup.prototype, "collapsible", void 0);
+__decorate([
+    state()
+], TTMenuGroup.prototype, "hasActions", void 0);
+TTMenuGroup = __decorate([
+    customElement("tt-menu-group")
+], TTMenuGroup);
+export { TTMenuGroup };
+//# sourceMappingURL=tt-menu-group.js.map

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

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

package/dist/sidebar/tt-menu-item.d.ts

@@ -0,0 +1,70 @@
+import { LitElement } from "lit";
+import "../tt-icon.js";
+export type MenuItemVariant = "default" | "link";
+/**
+ * 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.
+ */
+export declare class TTMenuItem extends LitElement {
+    variant: MenuItemVariant;
+    active: boolean;
+    disabled: boolean;
+    href: string;
+    target: string;
+    value: string;
+    label: string;
+    more: boolean;
+    moreLabel: string;
+    private hasBadge;
+    private hasActions;
+    private activate;
+    private openMore;
+    private updateSlot;
+    static styles: import("lit").CSSResult;
+    private renderMain;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-menu-item": TTMenuItem;
+    }
+}
+//# sourceMappingURL=tt-menu-item.d.ts.map

package/dist/sidebar/tt-menu-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-menu-item.d.ts","sourceRoot":"","sources":["../../src/sidebar/tt-menu-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAKrD,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,MAAM,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,qBACa,UAAW,SAAQ,UAAU;IAExC,OAAO,EAAE,eAAe,CAAa;IAIrC,MAAM,UAAS;IAGf,QAAQ,UAAS;IAGjB,IAAI,SAAM;IAQV,MAAM,SAAY;IAGlB,KAAK,SAAM;IAQX,KAAK,SAAM;IAIX,IAAI,UAAS;IAGb,SAAS,SAAkB;IAG3B,OAAO,CAAC,QAAQ,CAAS;IAGzB,OAAO,CAAC,UAAU,CAAS;IAE3B,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,QAAQ;IAoBhB,OAAO,CAAC,UAAU;IAYlB,MAAM,CAAC,MAAM,0BAgQX;IAEF,OAAO,CAAC,UAAU;IAsDlB,MAAM;CAiDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}