@tartaguti/ui-components 0.0.0-stage → 0.1.0

package/dist/tt-code-block.js

@@ -0,0 +1,409 @@
+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 } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { srOnly } from "./sr-only.js";
+import Prism from "prismjs";
+import "prismjs/components/prism-typescript";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-css";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-markup"; // HTML
+import "./tt-icon.js";
+let TTCodeBlock = class TTCodeBlock extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.code = "";
+        this.language = "";
+        this.filename = "";
+        // Opt-in, like show-value on tt-progress, tt-rating and tt-slider.
+        this.showLineNumbers = false;
+        this.tabs = [];
+        this.activeTabIndex = 0;
+        this.copied = false;
+    }
+    disconnectedCallback() {
+        clearTimeout(this.copyTimer);
+        super.disconnectedCallback();
+    }
+    get currentCode() {
+        if (this.tabs.length > 0) {
+            return this.tabs[this.activeTabIndex]?.code ?? "";
+        }
+        return this.code;
+    }
+    get currentLanguage() {
+        if (this.tabs.length > 0) {
+            return this.tabs[this.activeTabIndex]?.language ?? this.language;
+        }
+        return this.language;
+    }
+    // Highlighting happens during render rather than by poking innerHTML in
+    // updated(), so the markup is correct on first paint and Lit stays in
+    // charge of the DOM.
+    get highlighted() {
+        const lang = this.currentLanguage.toLowerCase();
+        const grammar = Prism.languages[lang] ??
+            Prism.languages.clike ??
+            Prism.languages.markup;
+        return Prism.highlight(this.currentCode.trim(), grammar, lang);
+    }
+    async copyCode() {
+        try {
+            await navigator.clipboard.writeText(this.currentCode);
+            this.copied = true;
+            clearTimeout(this.copyTimer);
+            this.copyTimer = setTimeout(() => {
+                this.copied = false;
+            }, 2000);
+        }
+        catch {
+            // Clipboard access can be denied (insecure context, permissions).
+            // Failing silently is better than throwing out of an event handler.
+        }
+    }
+    renderLineNumbers() {
+        if (!this.showLineNumbers)
+            return null;
+        const lineCount = this.currentCode.trim().split("\n").length;
+        return html `
+      <div class="line-numbers" aria-hidden="true">
+        ${Array.from({ length: lineCount }, (_, i) => html `<span>${i + 1}</span>`)}
+      </div>
+    `;
+    }
+    static { this.styles = [srOnly, 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;
+    }
+
+    /*
+      The code surface is intentionally theme-independent: it stays dark in
+      both light and dark mode so one syntax palette stays readable.
+      Override the --tt-code-* tokens for a light code surface.
+    */
+    :host {
+      display: block;
+      font-family: var(--tt-font-sans);
+    }
+
+    .container {
+      overflow: hidden;
+      background: var(--tt-code-background);
+      border: 1px solid var(--tt-code-border);
+      border-radius: var(--tt-radius-lg);
+    }
+
+    /* Header */
+
+    .header {
+      height: 42px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 var(--tt-space-3) 0 var(--tt-space-4);
+      background: var(--tt-code-surface);
+      border-bottom: 1px solid var(--tt-code-border);
+    }
+
+    /* min-width: 0 lets this side shrink and scroll beside the copy
+       button; without it a flex item will not shrink below its content,
+       so on a phone the tabs wrapped and slid under the button. */
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: var(--tt-space-3);
+      min-width: 0;
+      overflow-x: auto;
+    }
+
+    /* Decorative window buttons */
+
+    .window-dots {
+      display: flex;
+      gap: 6px;
+    }
+
+    .window-dot {
+      width: 10px;
+      height: 10px;
+      border-radius: var(--tt-radius-full);
+    }
+
+    .window-dot.close { background: #ff5f56; }
+    .window-dot.minimize { background: #ffbd2e; }
+    .window-dot.maximize { background: #27c93f; }
+
+    /* File tabs */
+
+    .tabs {
+      display: flex;
+      gap: 4px;
+      white-space: nowrap;
+    }
+
+    .tab {
+      background: transparent;
+      border: none;
+      color: var(--tt-code-muted);
+      padding: 4px 10px;
+      font-family: inherit;
+      font-size: var(--tt-text-xs);
+      font-weight: var(--tt-weight-medium);
+      border-radius: var(--tt-radius);
+      cursor: pointer;
+      transition:
+        color var(--tt-duration-normal) var(--tt-ease),
+        background var(--tt-duration-normal) var(--tt-ease);
+    }
+
+    .tab:hover {
+      color: var(--tt-code-foreground);
+      background: rgb(255 255 255 / 0.05);
+    }
+
+    .tab.active {
+      color: var(--tt-code-foreground);
+      background: rgb(255 255 255 / 0.1);
+    }
+
+    .tab:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-code-muted);
+      outline-offset: calc(var(--tt-ring-width) * -1);
+    }
+
+    .meta-info {
+      font-size: var(--tt-text-xs);
+      font-weight: var(--tt-weight-semibold);
+      letter-spacing: 0.04em;
+      color: var(--tt-code-muted);
+      text-transform: uppercase;
+    }
+
+    /* Copy button */
+
+    .copy-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      border: 1px solid var(--tt-code-border);
+      background: rgb(255 255 255 / 0.03);
+      color: var(--tt-code-foreground);
+      cursor: pointer;
+      font-family: inherit;
+      font-size: var(--tt-text-xs);
+      font-weight: var(--tt-weight-medium);
+      padding: 4px 10px;
+      border-radius: var(--tt-radius);
+      transition:
+        background var(--tt-duration-normal) var(--tt-ease),
+        border-color var(--tt-duration-normal) var(--tt-ease);
+    }
+
+    .copy-btn:hover {
+      background: rgb(255 255 255 / 0.08);
+      border-color: var(--tt-code-muted);
+    }
+
+    .copy-btn:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-code-muted);
+      outline-offset: var(--tt-ring-offset);
+    }
+
+    .copy-btn.copied {
+      border-color: #2ea043;
+      color: #3fb950;
+      background: rgb(46 160 67 / 0.1);
+    }
+
+    /* Code body */
+
+    .code-viewport {
+      display: flex;
+      position: relative;
+      overflow-x: auto;
+    }
+
+    .line-numbers {
+      display: flex;
+      flex-direction: column;
+      padding: var(--tt-space-4) 0 var(--tt-space-4) var(--tt-space-4);
+      font-family: var(--tt-font-mono);
+      font-size: 13px;
+      line-height: var(--tt-leading-relaxed);
+      color: var(--tt-code-muted);
+      opacity: 0.5;
+      user-select: none;
+      text-align: right;
+      min-width: 24px;
+    }
+
+    pre {
+      margin: 0;
+      padding: var(--tt-space-4);
+      flex-grow: 1;
+      overflow-x: auto;
+      font-family: var(--tt-font-mono);
+      font-size: 13px;
+      line-height: var(--tt-leading-relaxed);
+      color: var(--tt-code-foreground);
+      tab-size: 2;
+    }
+
+    code {
+      font-family: inherit;
+    }
+
+    /* Prism tokens */
+
+    .token.comment,
+    .token.prolog,
+    .token.doctype,
+    .token.cdata {
+      color: var(--tt-code-comment);
+      font-style: italic;
+    }
+
+    .token.punctuation { color: var(--tt-code-punctuation); }
+
+    .token.property,
+    .token.tag,
+    .token.boolean,
+    .token.number,
+    .token.constant,
+    .token.symbol { color: var(--tt-code-constant); }
+
+    .token.selector,
+    .token.attr-name,
+    .token.string,
+    .token.char,
+    .token.builtin { color: var(--tt-code-string); }
+
+    .token.operator,
+    .token.entity,
+    .token.url,
+    .token.variable { color: var(--tt-code-operator); }
+
+    .token.atrule,
+    .token.attr-value,
+    .token.keyword { color: var(--tt-code-keyword); }
+
+    .token.function,
+    .token.class-name { color: var(--tt-code-function); }
+
+    .token.regex,
+    .token.important { color: var(--tt-code-regex); }
+
+    /* Scrollbars */
+
+    pre::-webkit-scrollbar,
+    .code-viewport::-webkit-scrollbar {
+      height: 8px;
+      width: 8px;
+    }
+
+    pre::-webkit-scrollbar-thumb,
+    .code-viewport::-webkit-scrollbar-thumb {
+      background: var(--tt-code-border);
+      border-radius: var(--tt-radius-sm);
+    }
+
+  `]; }
+    render() {
+        const hasTabs = this.tabs.length > 0;
+        return html `
+      <div class="container" part="container">
+        <div class="header" part="header">
+          <div class="header-left">
+            <div class="window-dots" aria-hidden="true">
+              <span class="window-dot close"></span>
+              <span class="window-dot minimize"></span>
+              <span class="window-dot maximize"></span>
+            </div>
+
+            ${hasTabs
+            ? html `
+                  <!--
+            Toggle buttons, not tabs. role="tab" promises arrow keys, one
+            Tab stop and a tabpanel, and none of those existed, so a screen
+            reader announced a tab list that did not behave like one.
+            aria-pressed is the honest name for "one of these is on".
+          -->
+          <div class="tabs" role="group" aria-label="Files">
+                    ${this.tabs.map((tab, index) => html `
+                        <button
+                          class="tab ${this.activeTabIndex === index
+                ? "active"
+                : ""}"
+                          type="button"
+                          aria-pressed=${this.activeTabIndex === index
+                ? "true"
+                : "false"}
+                          @click=${() => (this.activeTabIndex = index)}
+                        >
+                          ${tab.label || tab.language || `Tab ${index + 1}`}
+                        </button>
+                      `)}
+                  </div>
+                `
+            : html `
+                  <span class="meta-info">
+                    ${this.filename ? this.filename : this.currentLanguage}
+                  </span>
+                `}
+          </div>
+
+          <button
+            part="copy"
+            class="copy-btn ${this.copied ? "copied" : ""}"
+            @click=${this.copyCode}
+            aria-label="Copy code to clipboard"
+          >
+            ${this.copied
+            ? html `<tt-icon name="check" size="12px"></tt-icon> Copied`
+            : "Copy"}
+          </button>
+          <span class="sr-only" role="status">${this.copied ? "Copied" : ""}</span>
+        </div>
+
+        <div class="code-viewport">
+          ${this.renderLineNumbers()}
+          <pre part="code"><code>${unsafeHTML(this.highlighted)}</code></pre>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TTCodeBlock.prototype, "code", void 0);
+__decorate([
+    property({ type: String })
+], TTCodeBlock.prototype, "language", void 0);
+__decorate([
+    property({ type: String })
+], TTCodeBlock.prototype, "filename", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "show-line-numbers" })
+], TTCodeBlock.prototype, "showLineNumbers", void 0);
+__decorate([
+    property({ type: Array })
+], TTCodeBlock.prototype, "tabs", void 0);
+__decorate([
+    state()
+], TTCodeBlock.prototype, "activeTabIndex", void 0);
+__decorate([
+    state()
+], TTCodeBlock.prototype, "copied", void 0);
+TTCodeBlock = __decorate([
+    customElement("tt-code-block")
+], TTCodeBlock);
+export { TTCodeBlock };
+//# sourceMappingURL=tt-code-block.js.map

package/dist/tt-code-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-code-block.js","sourceRoot":"","sources":["../src/tt-code-block.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,KAAK,MAAM,SAAS,CAAC;AAE5B,OAAO,qCAAqC,CAAC;AAC7C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,8BAA8B,CAAC;AACtC,OAAO,+BAA+B,CAAC;AACvC,OAAO,iCAAiC,CAAC,CAAC,OAAO;AAEjD,OAAO,cAAc,CAAC;AASf,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QACuB,SAAI,GAAG,EAAE,CAAC;QACV,aAAQ,GAAG,EAAE,CAAC;QACd,aAAQ,GAAG,EAAE,CAAC;QAC1C,mEAAmE;QAEnE,oBAAe,GAAG,KAAK,CAAC;QACG,SAAI,GAAc,EAAE,CAAC;QAE/B,mBAAc,GAAG,CAAC,CAAC;QACnB,WAAM,GAAG,KAAK,CAAC;IAsXlC,CAAC;IAlXC,oBAAoB;QAClB,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC7B,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAC/B,CAAC;IAED,IAAY,WAAW;QACrB,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACzB,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,IAAI,IAAI,EAAE,CAAC;QACpD,CAAC;QACD,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IAED,IAAY,eAAe;QACzB,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACzB,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC;QACnE,CAAC;QACD,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAED,wEAAwE;IACxE,sEAAsE;IACtE,qBAAqB;IACrB,IAAY,WAAW;QACrB,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,CAAC;QAEhD,MAAM,OAAO,GACX,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC;YACrB,KAAK,CAAC,SAAS,CAAC,KAAK;YACrB,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC;QAEzB,OAAO,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;IACjE,CAAC;IAEO,KAAK,CAAC,QAAQ;QACpB,IAAI,CAAC;YACH,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACtD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YAEnB,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAC7B,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC/B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACtB,CAAC,EAAE,IAAI,CAAC,CAAC;QACX,CAAC;QAAC,MAAM,CAAC;YACP,kEAAkE;YAClE,oEAAoE;QACtE,CAAC;IACH,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,eAAe;YAAE,OAAO,IAAI,CAAC;QAEvC,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC;QAE7D,OAAO,IAAI,CAAA;;UAEL,KAAK,CAAC,IAAI,CACV,EAAE,MAAM,EAAE,SAAS,EAAE,EACrB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA,SAAS,CAAC,GAAG,CAAC,SAAS,CACtC;;KAEJ,CAAC;IACJ,CAAC;aAEM,WAAM,GAAG,CAAC,MAAM,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8O3B,CAAC,AA9OW,CA8OV;IAEH,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAErC,OAAO,IAAI,CAAA;;;;;;;;;;cAUD,OAAO;YACP,CAAC,CAAC,IAAI,CAAA;;;;;;;;sBAQE,IAAI,CAAC,IAAI,CAAC,GAAG,CACb,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;uCAEH,IAAI,CAAC,cAAc,KAAK,KAAK;gBACxC,CAAC,CAAC,QAAQ;gBACV,CAAC,CAAC,EAAE;;yCAES,IAAI,CAAC,cAAc,KAAK,KAAK;gBAC1C,CAAC,CAAC,MAAM;gBACR,CAAC,CAAC,OAAO;mCACF,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;;4BAE1C,GAAG,CAAC,KAAK,IAAI,GAAG,CAAC,QAAQ,IAAI,OAAO,KAAK,GAAG,CAAC,EAAE;;uBAEpD,CACF;;iBAEJ;YACH,CAAC,CAAC,IAAI,CAAA;;sBAEE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe;;iBAEzD;;;;;8BAKa,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;qBACpC,IAAI,CAAC,QAAQ;;;cAGpB,IAAI,CAAC,MAAM;YACX,CAAC,CAAC,IAAI,CAAA,qDAAqD;YAC3D,CAAC,CAAC,MAAM;;gDAE0B,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;;;YAI/D,IAAI,CAAC,iBAAiB,EAAE;mCACD,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC;;;KAG1D,CAAC;IACJ,CAAC;;AA9X2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AAG1C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;oDACpC;AACG;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;yCAAsB;AAE/B;IAAhB,KAAK,EAAE;mDAA4B;AACnB;IAAhB,KAAK,EAAE;2CAAwB;AAVrB,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAgYvB"}

package/dist/tt-collapsible.d.ts

@@ -0,0 +1,71 @@
+import { LitElement } from "lit";
+/**
+ * One section that opens and closes. The plainest member of a family of
+ * three, and the differences matter:
+ *
+ *   tt-collapsible     ONE section, no heading of its own, no styling.
+ *                      You supply the trigger. Use it to hide detail
+ *                      inside something else: "show 3 more", an advanced
+ *                      block in a form, a nested panel.
+ *   tt-accordion-item  a section WITH a styled heading button, meant to
+ *                      sit in a tt-accordion that coordinates siblings.
+ *   tt-menu-group      the sidebar's version, with its own uppercase
+ *                      heading and rail behaviour.
+ *
+ * Reach for this one when you already have something to click and only
+ * need the opening part.
+ *
+ * ---------------------------------------------------------------------
+ * IT OWNS ITS OWN `open`, and that is deliberate.
+ *
+ * The house rule is that a component reports intent and the owner
+ * decides, which is why tt-accordion-item refuses to open itself: an
+ * accordion may need to close a sibling first, so the decision is not
+ * the item's to make.
+ *
+ * Nothing coordinates a collapsible. There is no sibling to close and no
+ * parent to ask, so a component that would not open itself would need a
+ * listener on every single use to do the one thing it is for. It flips
+ * and then announces, the same shape as tt-switch and tt-menu-group.
+ *
+ * Set `open` from outside whenever you do want to own it; the property
+ * is the source of truth either way.
+ *
+ * ---------------------------------------------------------------------
+ * THE HEIGHT ANIMATION.
+ *
+ * A grid track from 0fr to 1fr, because nothing here knows how tall the
+ * content is and every max-height guess is either too small, which
+ * clips, or too large, which makes the close look slow and the open look
+ * late.
+ *
+ * The `overflow: hidden` on the inner element is NOT decoration. An fr
+ * track keeps an automatic minimum equal to its content unless the item
+ * inside opts out of it, so without that line the panel never collapses
+ * at all. That exact bug shipped in tt-menu-group and hid behind an
+ * opacity fade for a week.
+ *
+ * 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-toggle - { open } on every change.
+ * @fires tt-open - When it expands.
+ * @fires tt-close - When it collapses.
+ */
+export declare class TTCollapsible extends LitElement {
+    open: boolean;
+    disabled: boolean;
+    /** Flips it and announces. The same call the trigger makes. */
+    toggle(): void;
+    private wireTrigger;
+    private markTrigger;
+    updated(): void;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-collapsible": TTCollapsible;
+    }
+}
+//# sourceMappingURL=tt-collapsible.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-collapsible.d.ts","sourceRoot":"","sources":["../src/tt-collapsible.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,qBACa,aAAc,SAAQ,UAAU;IACC,IAAI,UAAS;IAEb,QAAQ,UAAS;IAE7D,+DAA+D;IAC/D,MAAM;IAyCN,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,WAAW;IAUnB,OAAO;IAYP,MAAM,CAAC,MAAM,0BAwCX;IAEF,MAAM;CAoBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}

package/dist/tt-collapsible.js

@@ -0,0 +1,206 @@
+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";
+/**
+ * One section that opens and closes. The plainest member of a family of
+ * three, and the differences matter:
+ *
+ *   tt-collapsible     ONE section, no heading of its own, no styling.
+ *                      You supply the trigger. Use it to hide detail
+ *                      inside something else: "show 3 more", an advanced
+ *                      block in a form, a nested panel.
+ *   tt-accordion-item  a section WITH a styled heading button, meant to
+ *                      sit in a tt-accordion that coordinates siblings.
+ *   tt-menu-group      the sidebar's version, with its own uppercase
+ *                      heading and rail behaviour.
+ *
+ * Reach for this one when you already have something to click and only
+ * need the opening part.
+ *
+ * ---------------------------------------------------------------------
+ * IT OWNS ITS OWN `open`, and that is deliberate.
+ *
+ * The house rule is that a component reports intent and the owner
+ * decides, which is why tt-accordion-item refuses to open itself: an
+ * accordion may need to close a sibling first, so the decision is not
+ * the item's to make.
+ *
+ * Nothing coordinates a collapsible. There is no sibling to close and no
+ * parent to ask, so a component that would not open itself would need a
+ * listener on every single use to do the one thing it is for. It flips
+ * and then announces, the same shape as tt-switch and tt-menu-group.
+ *
+ * Set `open` from outside whenever you do want to own it; the property
+ * is the source of truth either way.
+ *
+ * ---------------------------------------------------------------------
+ * THE HEIGHT ANIMATION.
+ *
+ * A grid track from 0fr to 1fr, because nothing here knows how tall the
+ * content is and every max-height guess is either too small, which
+ * clips, or too large, which makes the close look slow and the open look
+ * late.
+ *
+ * The `overflow: hidden` on the inner element is NOT decoration. An fr
+ * track keeps an automatic minimum equal to its content unless the item
+ * inside opts out of it, so without that line the panel never collapses
+ * at all. That exact bug shipped in tt-menu-group and hid behind an
+ * opacity fade for a week.
+ *
+ * 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-toggle - { open } on every change.
+ * @fires tt-open - When it expands.
+ * @fires tt-close - When it collapses.
+ */
+let TTCollapsible = class TTCollapsible extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.disabled = false;
+    }
+    /** Flips it and announces. The same call the trigger makes. */
+    toggle() {
+        if (this.disabled)
+            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,
+        }));
+    }
+    /*
+      The trigger is slotted, so it is the consumer's element and this
+      component must not restyle it. All it does is make it work: a click
+      toggles, and aria-expanded is written onto whatever was slotted so a
+      screen reader is told the state.
+  
+      NO aria-controls, and that is not an omission.
+  
+      aria-controls takes the id of another element, and an id reference
+      does not cross a shadow boundary. The panel lives in THIS component's
+      shadow root; the trigger lives in the consumer's light DOM. Pointing
+      one at the other produces an attribute that resolves to nothing,
+      which axe reports as a critical aria-valid-attr-value failure and a
+      screen reader simply ignores.
+  
+      Same rule that made tt-accordion-item put aria-expanded on its own
+      real button rather than on a wrapper. aria-expanded alone is a
+      complete disclosure pattern; aria-controls is optional in it and
+      support was always patchy.
+    */
+    wireTrigger(event) {
+        const slot = event.target;
+        this.markTrigger(slot.assignedElements({ flatten: true })[0]);
+    }
+    /*
+      A tt-button trigger gets its `expanded` PROPERTY, not the attribute.
+      The host of a custom element has no role, so aria-expanded written on
+      it reaches nothing: the real <button> is inside tt-button's shadow
+      root. tt-button forwards `expanded` to it, the same way it forwards
+      `label`.
+    */
+    markTrigger(el) {
+        if (!el)
+            return;
+        if (el.tagName === "TT-BUTTON") {
+            el.expanded = String(this.open);
+            el.removeAttribute("aria-expanded");
+        }
+        else {
+            el.setAttribute("aria-expanded", String(this.open));
+        }
+    }
+    updated() {
+        /*
+          Re-applied on every update rather than only on slotchange, because
+          `open` can change without the slot changing, and an aria-expanded
+          that says "false" over an open panel is worse than none at all.
+        */
+        const slot = this.renderRoot.querySelector('slot[name="trigger"]');
+        this.markTrigger(slot?.assignedElements({ flatten: true })[0]);
+    }
+    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;
+    }
+
+    .trigger {
+      display: contents;
+    }
+
+    .content {
+      display: grid;
+      grid-template-rows: 0fr;
+
+      transition: grid-template-rows var(--tt-duration-normal)
+        var(--tt-ease-out);
+    }
+
+    :host([open]) .content {
+      grid-template-rows: 1fr;
+    }
+
+    /* Load-bearing. See the note at the top: without this the fr track
+       keeps a content-sized minimum and the panel never closes. */
+    .inner {
+      overflow: hidden;
+    }
+
+    :host([disabled]) .trigger {
+      opacity: var(--tt-opacity-disabled);
+      pointer-events: none;
+    }
+  `; }
+    render() {
+        return html `
+      <div class="trigger" part="trigger" @click=${this.toggle}>
+        <slot name="trigger" @slotchange=${this.wireTrigger}></slot>
+      </div>
+
+      <!--
+        inert while closed. The panel is squeezed to zero height, which
+        hides it from the EYE only: its links and fields stayed in the Tab
+        order, so a keyboard user tabbed onto controls they could not see,
+        and a screen reader read the closed panel aloud. Same as
+        tt-accordion-item.
+      -->
+      <div class="content" part="content" ?inert=${!this.open}>
+        <div class="inner">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTCollapsible.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTCollapsible.prototype, "disabled", void 0);
+TTCollapsible = __decorate([
+    customElement("tt-collapsible")
+], TTCollapsible);
+export { TTCollapsible };
+//# sourceMappingURL=tt-collapsible.js.map