@tartaguti/ui-components 0.0.0-stage → 0.2.0

package/dist/sidebar/tt-sidebar-footer.js

@@ -0,0 +1,205 @@
+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, customElement } from "lit/decorators.js";
+/**
+ * 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.
+ */
+let TTSidebarFooter = class TTSidebarFooter extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.heading = "";
+        this.description = "";
+        this.clickable = false;
+    }
+    activate() {
+        this.dispatchEvent(new CustomEvent("tt-sidebar-account", {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    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);
+    }
+
+    .wrap {
+      display: flex;
+      align-items: center;
+
+      width: 100%;
+      box-sizing: border-box;
+
+      border-radius: var(--tt-radius);
+    }
+
+    .row {
+      display: flex;
+      align-items: center;
+      justify-content: var(--tt-menu-justify, flex-start);
+      gap: var(--tt-menu-gap, var(--tt-space-3));
+
+      flex: 1;
+      box-sizing: border-box;
+      min-width: 0;
+
+      padding: var(--tt-space-2);
+
+      border: none;
+      border-radius: var(--tt-radius);
+      background: transparent;
+
+      font: inherit;
+      text-align: left;
+      color: inherit;
+
+      transition: background var(--tt-duration-fast) var(--tt-ease-out);
+    }
+
+    button.row {
+      cursor: pointer;
+    }
+
+    button.row:hover {
+      background: var(--tt-sidebar-accent);
+      color: var(--tt-sidebar-accent-foreground);
+    }
+
+    button.row:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: calc(var(--tt-ring-width) * -1);
+    }
+
+    .leading {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
+
+    .text {
+      display: grid;
+      grid-template-columns: var(--tt-menu-label-cols, 1fr);
+
+      flex: 1;
+      min-width: 0;
+
+      /* No transition. The width of the panel animates; the text does
+         not. See the note in tt-sidebar. */
+    }
+
+    .text > .inner {
+      overflow: hidden;
+    }
+
+    .heading {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+
+      font-size: var(--tt-text-sm);
+      font-weight: var(--tt-weight-semibold);
+      color: var(--tt-sidebar-foreground);
+    }
+
+    .sub {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+
+      font-size: var(--tt-text-xs);
+      color: var(--tt-muted-foreground);
+    }
+
+    .actions {
+      display: var(--tt-menu-trail-display, flex);
+      align-items: center;
+      flex-shrink: 0;
+    }
+  `; }
+    renderInner() {
+        return html `
+      <span class="leading" part="leading"><slot name="leading"></slot></span>
+
+      <span class="text">
+        <span class="inner">
+          ${this.heading
+            ? html `<div class="heading" part="heading">${this.heading}</div>`
+            : nothing}
+          ${this.description ? html `<div class="sub" part="description">${this.description}</div>` : nothing}
+
+          <slot></slot>
+        </span>
+      </span>
+    `;
+    }
+    render() {
+        const inner = this.renderInner();
+        /*
+          The actions stay outside whichever element the row turns out to be,
+          so a clickable footer with a trailing menu button is still valid
+          markup and both controls are reachable by keyboard.
+        */
+        return html `
+      <div class="wrap" part="row">
+        ${this.clickable
+            ? html `
+                <button class="row" type="button" @click=${this.activate}>
+                  ${inner}
+                </button>
+              `
+            : html `<div class="row">${inner}</div>`}
+
+        <span class="actions" part="actions"><slot name="actions"></slot></span>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TTSidebarFooter.prototype, "heading", void 0);
+__decorate([
+    property({ type: String })
+], TTSidebarFooter.prototype, "description", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTSidebarFooter.prototype, "clickable", void 0);
+TTSidebarFooter = __decorate([
+    customElement("tt-sidebar-footer")
+], TTSidebarFooter);
+export { TTSidebarFooter };
+//# sourceMappingURL=tt-sidebar-footer.js.map

package/dist/sidebar/tt-sidebar-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-sidebar-footer.js","sourceRoot":"","sources":["../../src/sidebar/tt-sidebar-footer.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAEL,YAAO,GAAG,EAAE,CAAC;QAGb,gBAAW,GAAG,EAAE,CAAC;QAGjB,cAAS,GAAG,KAAK,CAAC;IAoKpB,CAAC;IAlKS,QAAQ;QACd,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,oBAAoB,EAAE;YACpC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4GlB,AA5GY,CA4GX;IAEM,WAAW;QACjB,OAAO,IAAI,CAAA;;;;;YAMH,IAAI,CAAC,OAAO;YACV,CAAC,CAAC,IAAI,CAAA,uCAAuC,IAAI,CAAC,OAAO,QAAQ;YACjE,CAAC,CAAC,OACN;YACE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA,uCAAuC,IAAI,CAAC,WAAW,QAAQ,CAAC,CAAC,CAAC,OAAO;;;;;KAKvG,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAEjC;;;;UAIE;QACF,OAAO,IAAI,CAAA;;UAGL,IAAI,CAAC,SAAS;YACZ,CAAC,CAAC,IAAI,CAAA;2DACyC,IAAI,CAAC,QAAQ;oBACpD,KAAK;;eAEV;YACH,CAAC,CAAC,IAAI,CAAA,oBAAoB,KAAK,QACnC;;;;KAIH,CAAC;IACJ,CAAC;;AAzKD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACzB;AARP,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA4K3B"}

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

@@ -0,0 +1,31 @@
+import { LitElement } from "lit";
+/**
+ * The brand row at the top of a sidebar.
+ *
+ * Goes in tt-sidebar's `header` slot. It exists because every app puts
+ * the same three things there in the same order, and hand-rolling that
+ * row per app means three apps with three slightly different paddings.
+ *
+ *   <tt-sidebar collapsible>
+ *     <tt-sidebar-header slot="header" heading="Tartaguti" description="Base">
+ *       <tt-avatar slot="leading" name="T"></tt-avatar>
+ *     </tt-sidebar-header>
+ *   </tt-sidebar>
+ *
+ * The `leading` slot survives rail mode and the text does not, which is
+ * the whole reason the mark is a separate slot rather than part of the
+ * heading. Same inherited-property channel as tt-menu-item; see the note
+ * at the top of tt-sidebar.
+ */
+export declare class TTSidebarHeader extends LitElement {
+    heading: string;
+    description: string;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-sidebar-header": TTSidebarHeader;
+    }
+}
+//# sourceMappingURL=tt-sidebar-header.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-sidebar-header.d.ts","sourceRoot":"","sources":["../../src/sidebar/tt-sidebar-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAE7C,OAAO,SAAM;IAGb,WAAW,SAAM;IAEjB,MAAM,CAAC,MAAM,0BA2EX;IAEF,MAAM;CAkCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/sidebar/tt-sidebar-header.js

@@ -0,0 +1,150 @@
+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, customElement } from "lit/decorators.js";
+/**
+ * The brand row at the top of a sidebar.
+ *
+ * Goes in tt-sidebar's `header` slot. It exists because every app puts
+ * the same three things there in the same order, and hand-rolling that
+ * row per app means three apps with three slightly different paddings.
+ *
+ *   <tt-sidebar collapsible>
+ *     <tt-sidebar-header slot="header" heading="Tartaguti" description="Base">
+ *       <tt-avatar slot="leading" name="T"></tt-avatar>
+ *     </tt-sidebar-header>
+ *   </tt-sidebar>
+ *
+ * The `leading` slot survives rail mode and the text does not, which is
+ * the whole reason the mark is a separate slot rather than part of the
+ * heading. Same inherited-property channel as tt-menu-item; see the note
+ * at the top of tt-sidebar.
+ */
+let TTSidebarHeader = class TTSidebarHeader extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.heading = "";
+        this.description = "";
+    }
+    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 {
+      display: flex;
+      align-items: center;
+      justify-content: var(--tt-menu-justify, flex-start);
+      gap: var(--tt-menu-gap, var(--tt-space-3));
+
+      min-width: 0;
+      padding: var(--tt-space-1) var(--tt-space-2);
+    }
+
+    .leading {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
+
+    /* Collapses on the same track trick as a menu item label, so the
+       brand text slides away in step with every other label rather than
+       disappearing a beat early. */
+    .text {
+      display: grid;
+      grid-template-columns: var(--tt-menu-label-cols, 1fr);
+
+      flex: 1;
+      min-width: 0;
+
+      /* No transition. The width of the panel animates; the text does
+         not. See the note in tt-sidebar. */
+    }
+
+    .text > .inner {
+      overflow: hidden;
+    }
+
+    .heading {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+
+      font-size: var(--tt-text-sm);
+      font-weight: var(--tt-weight-bold);
+      letter-spacing: -0.01em;
+      color: var(--tt-sidebar-foreground);
+    }
+
+    .sub {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+
+      font-size: var(--tt-text-xs);
+      color: var(--tt-muted-foreground);
+    }
+
+    .actions {
+      display: var(--tt-menu-trail-display, flex);
+      align-items: center;
+      flex-shrink: 0;
+    }
+  `; }
+    render() {
+        return html `
+      <div class="row" part="row">
+        <span class="leading" part="leading"><slot name="leading"></slot></span>
+
+        <span class="text">
+          <span class="inner">
+            ${this.heading
+            ? html `<div class="heading" part="heading">
+                    ${this.heading}
+                  </div>`
+            : nothing}
+            ${this.description
+            ? html `<div class="sub" part="description">${this.description}</div>`
+            : nothing}
+
+            <!--
+              The default slot is the escape hatch: a workspace switcher
+              or anything else that is not two lines of text. It renders
+              alongside the props rather than instead of them, so a
+              consumer can use either or both without a mode flag.
+            -->
+            <slot></slot>
+          </span>
+        </span>
+
+        <span class="actions" part="actions"><slot name="actions"></slot></span>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TTSidebarHeader.prototype, "heading", void 0);
+__decorate([
+    property({ type: String })
+], TTSidebarHeader.prototype, "description", void 0);
+TTSidebarHeader = __decorate([
+    customElement("tt-sidebar-header")
+], TTSidebarHeader);
+export { TTSidebarHeader };
+//# sourceMappingURL=tt-sidebar-header.js.map

package/dist/sidebar/tt-sidebar-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-sidebar-header.js","sourceRoot":"","sources":["../../src/sidebar/tt-sidebar-header.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;;;;;;;;;;;;;GAiBG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAEL,YAAO,GAAG,EAAE,CAAC;QAGb,gBAAW,GAAG,EAAE,CAAC;IAiHnB,CAAC;aA/GQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2ElB,AA3EY,CA2EX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;cAOD,IAAI,CAAC,OAAO;YACV,CAAC,CAAC,IAAI,CAAA;sBACA,IAAI,CAAC,OAAO;yBACT;YACT,CAAC,CAAC,OACN;cAEE,IAAI,CAAC,WAAW;YACd,CAAC,CAAC,IAAI,CAAA,uCAAuC,IAAI,CAAC,WAAW,QAAQ;YACrE,CAAC,CAAC,OACN;;;;;;;;;;;;;;KAcP,CAAC;IACJ,CAAC;;AAnHD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACV;AALN,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAsH3B"}

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

@@ -0,0 +1,72 @@
+import { LitElement } from "lit";
+import type { PropertyValues } from "lit";
+import "../tt-icon.js";
+export type SidebarVariant = "default" | "borderless" | "floating";
+/**
+ * The navigation column of an app shell.
+ *
+ * ---------------------------------------------------------------------
+ * HOW COLLAPSING WORKS, AND WHY IT NEEDS NO PROPS.
+ *
+ * With `collapsible`, the sidebar can shrink to an icon rail. Everything
+ * inside it has to change at once: labels disappear, rows centre, group
+ * headings go, badges go, the indent goes. Passing that down would mean a
+ * `collapsed` prop on every child, kept in sync by hand, at every depth.
+ *
+ * Instead the collapsed state is published as ordinary CSS custom
+ * properties on the host, and each child reads the ones it cares about
+ * through var() with the expanded value as the fallback:
+ *
+ *   --tt-menu-label-cols      1fr  ->  0fr      label track collapses
+ *   --tt-menu-gap             sp-2 ->  0px      no gap beside nothing
+ *   --tt-menu-justify         start->  center   icons centre in the rail
+ *   --tt-menu-trail-display   flex ->  none     badges and dots go
+ *   --tt-menu-heading-display flex ->  none     group headings go
+ *   --tt-menu-rail-rows       unset->  1fr      every group forced open
+ *   --tt-menu-rail-visibility unset->  visible  ...and its items reachable
+ *   --tt-menu-indent          sp-2 ->  0px      no nesting indent
+ *
+ * Custom properties inherit and they cross shadow boundaries, so this
+ * reaches a menu item nested three groups deep with no wiring, and a menu
+ * item used outside a sidebar simply gets the fallbacks. Same mechanism
+ * as --tt-radius-nested in tokens.css.
+ *
+ * They are declared in the stylesheet under :host([collapsed]) rather
+ * than written from JavaScript, and that matters: a media query can
+ * override a stylesheet rule, and cannot override an inline style. It is
+ * what lets the block at the bottom of this file switch the whole rail
+ * off on a phone, where the sidebar is a drawer and a rail would be an
+ * unusable 64px strip sliding over the page.
+ *
+ * ---------------------------------------------------------------------
+ * WHO OWNS `collapsed`.
+ *
+ * The component toggles itself and announces it with tt-sidebar-toggle,
+ * the same shape tt-menu-group uses for open/close. An app that wants to
+ * remember the choice listens for the event and writes the property back;
+ * one that does not gets working behaviour for free.
+ */
+export declare class TTSidebar extends LitElement {
+    variant: SidebarVariant;
+    width: number;
+    railWidth: number;
+    collapsible: boolean;
+    collapsed: boolean;
+    label: string;
+    collapseLabel: string;
+    expandLabel: string;
+    private hasHeader;
+    private hasFooter;
+    /** Flips the rail open or shut, and announces it. */
+    toggle(): void;
+    willUpdate(changed: PropertyValues): void;
+    private updateSlot;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-sidebar": TTSidebar;
+    }
+}
+//# sourceMappingURL=tt-sidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-sidebar.d.ts","sourceRoot":"","sources":["../../src/sidebar/tt-sidebar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,YAAY,GAAG,UAAU,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,qBACa,SAAU,SAAQ,UAAU;IAEvC,OAAO,EAAE,cAAc,CAAa;IAGpC,KAAK,SAAO;IAIZ,SAAS,SAAM;IAIf,WAAW,UAAS;IAGpB,SAAS,UAAS;IAQlB,KAAK,SAAU;IAGf,aAAa,SAAsB;IAGnC,WAAW,SAAoB;IAG/B,OAAO,CAAC,SAAS,CAAS;IAG1B,OAAO,CAAC,SAAS,CAAS;IAE1B,qDAAqD;IACrD,MAAM;IAYN,UAAU,CAAC,OAAO,EAAE,cAAc;IAUlC,OAAO,CAAC,UAAU;IAYlB,MAAM,CAAC,MAAM,0BAgWX;IAEF,MAAM;CAyDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}