@tartaguti/ui-components 0.0.0-stage → 0.2.0

package/dist/tt-key-values.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from "lit";
+import type { TemplateResult } from "lit";
+export interface KeyValue {
+    label: string;
+    value: string | TemplateResult;
+}
+export declare class TTKeyValues extends LitElement {
+    items: KeyValue[];
+    static styles: import("lit").CSSResult;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-key-values": TTKeyValues;
+    }
+}
+//# sourceMappingURL=tt-key-values.d.ts.map

package/dist/tt-key-values.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-key-values.d.ts","sourceRoot":"","sources":["../src/tt-key-values.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IAGd,KAAK,EAAE,MAAM,GAAG,cAAc,CAAC;CAChC;AAED,qBACa,WAAY,SAAQ,UAAU;IAEzC,KAAK,EAAE,QAAQ,EAAE,CAAM;IAEvB,MAAM,CAAC,MAAM,0BA6FX;IAEF,MAAM;CAYP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/dist/tt-key-values.js

@@ -0,0 +1,126 @@
+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 { property, customElement } from "lit/decorators.js";
+let TTKeyValues = class TTKeyValues extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+    }
+    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);
+
+      /* Measured against THIS element, not the window. The same list sits
+         in a wide profile panel and inside a phone-width card. */
+      container-type: inline-size;
+      container-name: kv;
+    }
+
+    /*
+      Two columns on the list itself, so every row aligns without any
+      measuring: auto sizes the label column to the widest label, 1fr
+      gives whatever is left to the values.
+    */
+    dl {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: var(--tt-space-2) var(--tt-space-4);
+
+      margin: 0;
+
+      font-size: var(--tt-text-sm);
+      line-height: var(--tt-leading-normal);
+    }
+
+    dt {
+      color: var(--tt-muted-foreground);
+      white-space: nowrap;
+    }
+
+    dd {
+      margin: 0;
+
+      /* Grid items refuse to shrink below their content unless told to,
+         and long values have no natural break points. Without both of
+         these a VAT number or URL escapes the container. */
+      min-width: 0;
+      overflow-wrap: anywhere;
+
+      color: var(--tt-foreground);
+    }
+
+    /*
+      Values passed in as templates render inside THIS shadow root, so
+      they are styled here, not by whoever built the template. A caller
+      trying to style its own <a> from outside would have no effect.
+    */
+    dd a {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    dd a:hover {
+      text-decoration: underline;
+    }
+
+    /*
+      Narrow: label above value, one column.
+
+      Two columns need a label column AND a value column, and the labels
+      are nowrap so the label column always wins the argument. Inside a
+      phone-width card that left "2,868만 / $20,700" wrapping after every
+      few characters while "Estimated market" sat comfortably beside it.
+      Stacking gives the value the whole width, which is the half anyone
+      is actually reading.
+
+      The rules target dl and its children, never :host. A container query
+      styles the DESCENDANTS of a container and :host IS the container, so
+      a rule on :host here would silently never match.
+    */
+    @container kv (max-width: 330px) {
+      dl {
+        grid-template-columns: 1fr;
+        gap: 0;
+      }
+
+      dt {
+        margin-top: var(--tt-space-3);
+        font-size: var(--tt-text-xs);
+      }
+
+      dt:first-of-type {
+        margin-top: 0;
+      }
+    }
+  `; }
+    render() {
+        return html `
+      <dl part="list">
+        ${this.items.map((item) => html `
+            <dt part="label">${item.label}</dt>
+            <dd part="value">${item.value}</dd>
+          `)}
+      </dl>
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], TTKeyValues.prototype, "items", void 0);
+TTKeyValues = __decorate([
+    customElement("tt-key-values")
+], TTKeyValues);
+export { TTKeyValues };
+//# sourceMappingURL=tt-key-values.js.map

package/dist/tt-key-values.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-key-values.js","sourceRoot":"","sources":["../src/tt-key-values.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAUrD,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAEL,UAAK,GAAe,EAAE,CAAC;IA6GzB,CAAC;aA3GQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6FlB,AA7FY,CA6FX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK,CAAC,GAAG,CACd,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;+BACO,IAAI,CAAC,KAAK;+BACV,IAAI,CAAC,KAAK;WAC9B,CACF;;KAEJ,CAAC;IACJ,CAAC;;AA5GD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;0CACH;AAFZ,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CA+GvB"}

package/dist/tt-knowledge-doc.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from "lit";
+import "./tt-page.js";
+import "./tt-section.js";
+import "./tt-code-block.js";
+import "./tt-switcher.js";
+import "./tt-example.js";
+import type { SwitcherItem } from "./tt-switcher.js";
+import type { DocExample } from "./tt-component-doc.js";
+export declare class TTKnowledgeDoc extends LitElement {
+    heading: string;
+    description: string;
+    code: string;
+    language: string;
+    patterns: SwitcherItem[];
+    examples: DocExample[];
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-knowledge-doc": TTKnowledgeDoc;
+    }
+}
+//# sourceMappingURL=tt-knowledge-doc.d.ts.map

package/dist/tt-knowledge-doc.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-knowledge-doc.d.ts","sourceRoot":"","sources":["../src/tt-knowledge-doc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,cAAc,CAAC;AACtB,OAAO,iBAAiB,CAAC;AACzB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAExD,qBACa,cAAe,SAAQ,UAAU;IAI5C,OAAO,SAAM;IAGb,WAAW,SAAM;IAGjB,IAAI,SAAM;IAGV,QAAQ,SAAM;IAGd,QAAQ,EAAE,YAAY,EAAE,CAAM;IAc9B,QAAQ,EAAE,UAAU,EAAE,CAAM;IAE5B,MAAM,CAAC,MAAM,0BAgBX;IAEF,MAAM;CA6CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/tt-knowledge-doc.js

@@ -0,0 +1,120 @@
+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 { property, customElement } from "lit/decorators.js";
+import "./tt-page.js";
+import "./tt-section.js";
+import "./tt-code-block.js";
+import "./tt-switcher.js";
+import "./tt-example.js";
+let TTKnowledgeDoc = class TTKnowledgeDoc extends LitElement {
+    constructor() {
+        super(...arguments);
+        // Named `heading` rather than `title` so it cannot collide with the
+        // global HTML title attribute (which renders a native tooltip).
+        this.heading = "";
+        this.description = "";
+        this.code = "";
+        this.language = "";
+        this.patterns = [];
+        /*
+          Live examples, the same shape and the same tt-example that component
+          docs already use. Optional, so the knowledge pages that predate this
+          keep rendering unchanged and a page opts in by filling the array.
+      
+          Worth having on a knowledge page at all because some rules only
+          convince you once you watch them work. "Custom properties cross a
+          shadow boundary" reads as trivia until one declaration on a wrapper
+          visibly changes something inside a component that was never told
+          about it.
+        */
+        this.examples = [];
+    }
+    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;
+    }
+
+    /*
+      Same rhythm as the component docs. Anything tighter and two adjacent
+      examples read as a single one with two headings.
+    */
+    .examples {
+      display: flex;
+      flex-direction: column;
+      gap: var(--tt-space-10);
+    }
+  `; }
+    render() {
+        return html `
+      <tt-page heading=${this.heading} description=${this.description}>
+        <tt-section heading="Code Snippet">
+          <tt-code-block show-line-numbers
+            .code=${this.code}
+            language=${this.language}
+          ></tt-code-block>
+        </tt-section>
+
+        ${this.patterns.length
+            ? html `
+              <tt-section heading="Common Patterns">
+                <tt-switcher .items=${this.patterns}></tt-switcher>
+              </tt-section>
+            `
+            : ""}
+
+        ${this.examples.length
+            ? html `
+              <tt-section
+                heading="Worked examples"
+                description="Every one is live. Switch to Code for the markup behind it."
+              >
+                <div class="examples">
+                  ${this.examples.map((example) => html `
+                      <tt-example
+                        heading=${example.title}
+                        description=${example.description ?? ""}
+                        .code=${example.code}
+                        language=${example.language ?? "html"}
+                        align=${example.align ?? "stretch"}
+                      >
+                        ${example.preview}
+                      </tt-example>
+                    `)}
+                </div>
+              </tt-section>
+            `
+            : ""}
+      </tt-page>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TTKnowledgeDoc.prototype, "heading", void 0);
+__decorate([
+    property({ type: String })
+], TTKnowledgeDoc.prototype, "description", void 0);
+__decorate([
+    property({ type: String })
+], TTKnowledgeDoc.prototype, "code", void 0);
+__decorate([
+    property({ type: String })
+], TTKnowledgeDoc.prototype, "language", void 0);
+__decorate([
+    property({ type: Array })
+], TTKnowledgeDoc.prototype, "patterns", void 0);
+__decorate([
+    property({ type: Array })
+], TTKnowledgeDoc.prototype, "examples", void 0);
+TTKnowledgeDoc = __decorate([
+    customElement("tt-knowledge-doc")
+], TTKnowledgeDoc);
+export { TTKnowledgeDoc };
+//# sourceMappingURL=tt-knowledge-doc.js.map

package/dist/tt-knowledge-doc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-knowledge-doc.js","sourceRoot":"","sources":["../src/tt-knowledge-doc.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,cAAc,CAAC;AACtB,OAAO,iBAAiB,CAAC;AACzB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AAMlB,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QACL,oEAAoE;QACpE,gEAAgE;QAEhE,YAAO,GAAG,EAAE,CAAC;QAGb,gBAAW,GAAG,EAAE,CAAC;QAGjB,SAAI,GAAG,EAAE,CAAC;QAGV,aAAQ,GAAG,EAAE,CAAC;QAGd,aAAQ,GAAmB,EAAE,CAAC;QAE9B;;;;;;;;;;UAUE;QAEF,aAAQ,GAAiB,EAAE,CAAC;IAiE9B,CAAC;aA/DQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;GAgBlB,AAhBY,CAgBX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;yBACU,IAAI,CAAC,OAAO,gBAAgB,IAAI,CAAC,WAAW;;;oBAGjD,IAAI,CAAC,IAAI;uBACN,IAAI,CAAC,QAAQ;;;;UAI1B,IAAI,CAAC,QAAQ,CAAC,MAAM;YACpB,CAAC,CAAC,IAAI,CAAA;;sCAEsB,IAAI,CAAC,QAAQ;;aAEtC;YACH,CAAC,CAAC,EAAE;;UAEJ,IAAI,CAAC,QAAQ,CAAC,MAAM;YACpB,CAAC,CAAC,IAAI,CAAA;;;;;;oBAMI,IAAI,CAAC,QAAQ,CAAC,GAAG,CACjB,CAAC,OAAO,EAAE,EAAE,CAAC,IAAI,CAAA;;kCAEH,OAAO,CAAC,KAAK;sCACT,OAAO,CAAC,WAAW,IAAI,EAAE;gCAC/B,OAAO,CAAC,IAAI;mCACT,OAAO,CAAC,QAAQ,IAAI,MAAM;gCAC7B,OAAO,CAAC,KAAK,IAAI,SAAS;;0BAEhC,OAAO,CAAC,OAAO;;qBAEpB,CACF;;;aAGN;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;;AA1FD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDACI;AAc9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDACE;AA9BjB,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CA+F1B"}

package/dist/tt-layout.d.ts

@@ -0,0 +1,36 @@
+import { LitElement } from "lit";
+/**
+ * What tt-layout needs from whatever is slotted into `navbar`.
+ *
+ * A STRUCTURAL type, deliberately, rather than importing tt-navbar. The
+ * shell has to work with any navbar a consumer supplies, and importing
+ * one would make the app shell depend on a specific component it does
+ * not own. Anything that wants its menu button to stay in step with the
+ * sidebar just implements this shape.
+ *
+ * Optional, because a navbar with no menu button is legitimate and must
+ * not become a type error.
+ */
+export interface MenuToggleHost extends HTMLElement {
+    mobileMenuOpen?: boolean;
+}
+export declare class TTLayout extends LitElement {
+    private mobileSidebarOpen;
+    private closeSidebar;
+    private handleMenuToggle;
+    private handleSidebarMenu;
+    private handleKeydown;
+    connectedCallback(): void;
+    private locked;
+    private setLock;
+    disconnectedCallback(): void;
+    updated(): void;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-layout": TTLayout;
+    }
+}
+//# sourceMappingURL=tt-layout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-layout.d.ts","sourceRoot":"","sources":["../src/tt-layout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,qBACa,QAAS,SAAQ,UAAU;IAEtC,OAAO,CAAC,iBAAiB,CAAS;IAElC,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,aAAa,CAInB;IAEF,iBAAiB;IAQjB,OAAO,CAAC,MAAM,CAAS;IAEvB,OAAO,CAAC,OAAO;IASf,oBAAoB;IAQpB,OAAO;IAaP,MAAM,CAAC,MAAM,0BAiMX;IAEF,MAAM;CA+CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/tt-layout.js

@@ -0,0 +1,318 @@
+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, state } from "lit/decorators.js";
+import { lockScroll, unlockScroll } from "./scroll-lock.js";
+let TTLayout = class TTLayout extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.mobileSidebarOpen = false;
+        this.handleKeydown = (event) => {
+            if (event.key === "Escape" && this.mobileSidebarOpen) {
+                this.closeSidebar();
+            }
+        };
+        // Whether this element currently holds a scroll lock. The lock is
+        // reference counted, so it has to release exactly what it took.
+        this.locked = false;
+    }
+    closeSidebar() {
+        this.mobileSidebarOpen = false;
+    }
+    /*
+      Takes the state FROM the event rather than flipping independently.
+  
+      Both sides used to toggle their own boolean and then get resynced
+      below, which is two writers agreeing by luck. Now the navbar's click
+      is the single decision and the layout follows it.
+    */
+    handleMenuToggle(event) {
+        this.mobileSidebarOpen = event.detail.open;
+    }
+    handleSidebarMenu() {
+        this.closeSidebar();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener("keydown", this.handleKeydown);
+    }
+    setLock(want) {
+        if (want === this.locked)
+            return;
+        this.locked = want;
+        if (want)
+            lockScroll();
+        else
+            unlockScroll();
+    }
+    disconnectedCallback() {
+        window.removeEventListener("keydown", this.handleKeydown);
+        this.setLock(false);
+        super.disconnectedCallback();
+    }
+    updated() {
+        this.setLock(this.mobileSidebarOpen);
+        /*
+          Escape and the backdrop can also close the sidebar, and the navbar
+          hears neither: its own click handler is the only thing that would
+          have told it. Without this its button keeps showing an X over a
+          sidebar that is already gone.
+        */
+        const navbar = this.querySelector("tt-navbar");
+        if (navbar)
+            navbar.mobileMenuOpen = this.mobileSidebarOpen;
+    }
+    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;
+
+      height: 100vh;
+      height: 100dvh;
+
+      background: var(--tt-background);
+      color: var(--tt-foreground);
+
+      font-family: var(--tt-font-sans);
+      -webkit-font-smoothing: antialiased;
+    }
+
+    .layout {
+      display: flex;
+      flex-direction: column;
+
+      height: 100%;
+
+      background: var(--tt-background);
+      color: var(--tt-foreground);
+    }
+
+    /* Navbar */
+
+    .navbar {
+      flex-shrink: 0;
+
+      position: sticky;
+      top: 0;
+
+      z-index: var(--tt-z-sticky);
+    }
+
+    /* Main body */
+
+    .body {
+      display: flex;
+
+      flex: 1;
+      min-height: 0;
+
+      overflow: hidden;
+    }
+
+    /* Sidebar */
+
+    .sidebar {
+      flex-shrink: 0;
+      min-height: 0;
+    }
+
+    /* Content */
+
+    .content {
+      flex: 1;
+
+      min-width: 0;
+      min-height: 0;
+
+      padding: var(--tt-space-8);
+
+      overflow-y: auto;
+      overflow-x: hidden;
+
+      /*
+        Reserves the scrollbar's width whether or not one is showing, so
+        a page that grows past the viewport does not narrow this box by
+        ~15px and shift everything left. Without it, switching between a
+        short view and a long one nudges the whole layout sideways.
+      */
+      scrollbar-gutter: stable;
+
+      background: var(--tt-background);
+      color: var(--tt-foreground);
+    }
+
+    /* Backdrop */
+
+    .backdrop {
+      display: none;
+    }
+
+    /* Mobile */
+
+    @media (max-width: 768px) {
+      :host {
+        height: auto;
+        min-height: 100dvh;
+      }
+
+      .layout {
+        height: auto;
+        min-height: 100dvh;
+      }
+
+      .body {
+        display: block;
+
+        min-height: auto;
+
+        overflow: visible;
+      }
+
+      .content {
+        /*
+          Vertical only. The horizontal gutter belongs to whatever is
+          slotted in - tt-page, tt-component-doc - and every one of them
+          already sets it. Setting it here too doubled it, so a phone got
+          32px of inset around content whose own internal gutters were
+          half that, and a bento sat further from the screen edge than its
+          tiles sat from each other.
+
+          One owner for the page gutter, and it is the page.
+        */
+        padding: var(--tt-space-4) 0;
+
+        overflow: visible;
+      }
+
+      /* Mobile sidebar */
+
+      .sidebar {
+        position: fixed;
+
+        top: 60px;
+        left: 0;
+        bottom: 0;
+
+        width: 220px;
+        max-width: 82vw;
+
+        z-index: var(--tt-z-drawer);
+
+        transform: translateX(-100%);
+
+        /*
+          Hidden as well as moved. Off screen is not gone: a closed
+          sidebar's links stayed in the Tab order, so on a phone a
+          keyboard user tabbed through the whole menu, focus invisible
+          off the left edge, before reaching the page. The delay keeps it
+          visible until the slide-out has finished.
+        */
+        visibility: hidden;
+
+        transition:
+          transform var(--tt-duration-slow) var(--tt-ease-out),
+          visibility 0s linear var(--tt-duration-slow);
+
+        box-shadow: var(--tt-elevation-3);
+
+        will-change: transform;
+      }
+
+      .sidebar.open {
+        transform: translateX(0);
+        visibility: visible;
+        transition: transform var(--tt-duration-slow) var(--tt-ease-out);
+      }
+
+      /* Backdrop */
+
+      .backdrop {
+        position: fixed;
+
+        inset: 0;
+
+        background: var(--tt-overlay);
+
+        z-index: var(--tt-z-overlay);
+
+        opacity: 0;
+
+        transition: opacity var(--tt-duration-slow) var(--tt-ease);
+
+        -webkit-backdrop-filter: blur(2px);
+        backdrop-filter: blur(2px);
+      }
+
+      .backdrop.show {
+        display: block;
+
+        opacity: 1;
+      }
+    }
+
+  `; }
+    render() {
+        return html `
+      <div class="layout" part="layout">
+
+        <!-- Navbar -->
+
+        <div class="navbar" part="navbar">
+          <slot
+            name="navbar"
+            @tt-menu-toggle=${this.handleMenuToggle}
+          ></slot>
+        </div>
+
+        <!-- Backdrop -->
+
+        <div
+          class="backdrop ${this.mobileSidebarOpen ? "show" : ""}"
+          @click=${this.closeSidebar}
+        ></div>
+
+        <!-- Main body -->
+
+        <div class="body">
+
+          <!-- Sidebar -->
+
+          <aside
+            part="sidebar"
+            class="sidebar ${this.mobileSidebarOpen ? "open" : ""}"
+          >
+            <slot
+              name="sidebar"
+              @tt-menu-click=${this.handleSidebarMenu}
+            ></slot>
+          </aside>
+
+          <!-- Content -->
+
+          <main class="content" part="content">
+            <slot></slot>
+          </main>
+
+        </div>
+
+      </div>
+    `;
+    }
+};
+__decorate([
+    state()
+], TTLayout.prototype, "mobileSidebarOpen", void 0);
+TTLayout = __decorate([
+    customElement("tt-layout")
+], TTLayout);
+export { TTLayout };
+//# sourceMappingURL=tt-layout.js.map

package/dist/tt-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-layout.js","sourceRoot":"","sources":["../src/tt-layout.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEzD,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAmBrD,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAEG,sBAAiB,GAAG,KAAK,CAAC;QAqB1B,kBAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC/C,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBACrD,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;QAQF,kEAAkE;QAClE,gEAAgE;QACxD,WAAM,GAAG,KAAK,CAAC;IAkRzB,CAAC;IAnTS,YAAY;QAClB,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;IACjC,CAAC;IAED;;;;;;MAME;IACM,gBAAgB,CAAC,KAAkB;QACzC,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;IAC7C,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAQD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACzD,CAAC;IAMO,OAAO,CAAC,IAAa;QAC3B,IAAI,IAAI,KAAK,IAAI,CAAC,MAAM;YAAE,OAAO;QAEjC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QAEnB,IAAI,IAAI;YAAE,UAAU,EAAE,CAAC;;YAClB,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,oBAAoB;QAClB,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAE1D,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAEpB,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAC/B,CAAC;IAED,OAAO;QACL,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAErC;;;;;UAKE;QACF,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAiB,WAAW,CAAC,CAAC;QAC/D,IAAI,MAAM;YAAE,MAAM,CAAC,cAAc,GAAG,IAAI,CAAC,iBAAiB,CAAC;IAC7D,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiMlB,AAjMY,CAiMX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;8BAQe,IAAI,CAAC,gBAAgB;;;;;;;4BAOvB,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;mBAC7C,IAAI,CAAC,YAAY;;;;;;;;;;;6BAWP,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;;;;+BAIlC,IAAI,CAAC,iBAAiB;;;;;;;;;;;;;KAahD,CAAC;IACJ,CAAC;;AApTO;IADP,KAAK,EAAE;mDAC0B;AAFvB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAuTpB"}