@tartaguti/ui-components 0.0.0-stage → 0.2.0

package/dist/accordion/tt-accordion-item.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from "lit";
+import "../tt-icon.js";
+/**
+ * One row of a `tt-accordion`.
+ *
+ * It deliberately does not own `open`. Clicking the header fires
+ * `tt-accordion-toggle` and the parent decides what happens, which is what
+ * makes single-open mode possible: only the parent can know that opening
+ * this item has to close another one.
+ *
+ * Used on its own it will not open, because nothing is listening.
+ */
+export declare class TTAccordionItem extends LitElement {
+    open: boolean;
+    disabled: boolean;
+    heading: string;
+    value: string;
+    headingLevel: number;
+    private uid;
+    private headerId;
+    private contentId;
+    focusHeader(): void;
+    private toggle;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-accordion-item": TTAccordionItem;
+    }
+}
+//# sourceMappingURL=tt-accordion-item.d.ts.map

package/dist/accordion/tt-accordion-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-accordion-item.d.ts","sourceRoot":"","sources":["../../src/accordion/tt-accordion-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,eAAe,CAAC;AAIvB;;;;;;;;;GASG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAE7C,IAAI,UAAS;IAGb,QAAQ,UAAS;IAGjB,OAAO,SAAM;IAKb,KAAK,SAAM;IAQX,YAAY,SAAK;IAEjB,OAAO,CAAC,GAAG,CAAY;IAEvB,OAAO,CAAC,QAAQ,CAAqC;IAErD,OAAO,CAAC,SAAS,CAAsC;IAOvD,WAAW;IAIX,OAAO,CAAC,MAAM;IAiBd,MAAM,CAAC,MAAM,0BAgIX;IAEF,MAAM;CAqCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/accordion/tt-accordion-item.js

@@ -0,0 +1,247 @@
+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 } from "lit/decorators.js";
+import "../tt-icon.js";
+let itemId = 0;
+/**
+ * One row of a `tt-accordion`.
+ *
+ * It deliberately does not own `open`. Clicking the header fires
+ * `tt-accordion-toggle` and the parent decides what happens, which is what
+ * makes single-open mode possible: only the parent can know that opening
+ * this item has to close another one.
+ *
+ * Used on its own it will not open, because nothing is listening.
+ */
+let TTAccordionItem = class TTAccordionItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.disabled = false;
+        this.heading = "";
+        // Identifies the item to whoever handles the change event. Optional:
+        // the parent tracks items by reference, not by value.
+        this.value = "";
+        /*
+          A custom element cannot know where it sits in the page outline, so the
+          heading level is the author's call. role="heading" plus aria-level gives
+          them that without this component guessing an <h2> or <h3>.
+        */
+        this.headingLevel = 3;
+        this.uid = ++itemId;
+        this.headerId = `tt-accordion-header-${this.uid}`;
+        this.contentId = `tt-accordion-content-${this.uid}`;
+    }
+    /*
+      The header button lives in this shadow root, so tt-accordion cannot
+      focus it directly. Exposing a method keeps the boundary intact instead
+      of having the parent reach through renderRoot.
+    */
+    focusHeader() {
+        this.renderRoot.querySelector("button")?.focus();
+    }
+    toggle() {
+        if (this.disabled) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent("tt-accordion-toggle", {
+            detail: {
+                open: !this.open,
+                value: this.value,
+            },
+            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-foreground);
+
+      border-bottom: 1px solid var(--tt-border);
+    }
+
+    :host(:last-of-type) {
+      border-bottom: none;
+    }
+
+    .heading {
+      margin: 0;
+    }
+
+    button {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--tt-space-3);
+
+      width: 100%;
+      box-sizing: border-box;
+
+      padding: var(--tt-space-4);
+
+      border: none;
+      background: transparent;
+
+      font: inherit;
+      font-size: var(--tt-text-md);
+      font-weight: var(--tt-weight-semibold);
+
+      text-align: left;
+      color: inherit;
+
+      cursor: pointer;
+
+      transition: background var(--tt-duration-normal) var(--tt-ease);
+    }
+
+    button:hover:not(:disabled) {
+      background: var(--tt-muted);
+    }
+
+    /*
+      The parent clips its corners with overflow: hidden, so a box-shadow
+      ring would be cut off at the edges. An inset outline draws inside the
+      button and survives that.
+    */
+    button:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: calc(var(--tt-ring-width) * -1);
+    }
+
+    button:disabled {
+      opacity: var(--tt-opacity-disabled);
+      cursor: not-allowed;
+    }
+
+    .arrow {
+      display: inline-flex;
+      flex: none;
+
+      color: var(--tt-muted-foreground);
+
+      transition: transform var(--tt-duration-slow) var(--tt-ease-out);
+    }
+
+    :host([open]) .arrow {
+      transform: rotate(90deg);
+    }
+
+    /*
+      Height cannot be animated to auto, but a grid row can go from 0fr to
+      1fr, which resolves to the content's natural height. The inner div
+      does the clipping while the row shrinks.
+    */
+    .content {
+      display: grid;
+      grid-template-rows: 0fr;
+
+      transition: grid-template-rows var(--tt-duration-slow) var(--tt-ease-out);
+    }
+
+    :host([open]) .content {
+      grid-template-rows: 1fr;
+    }
+
+    .inner {
+      overflow: hidden;
+      min-height: 0;
+    }
+
+    /*
+      Padding has to sit below the clipping element. On .inner it would keep
+      showing while the row is collapsed to 0.
+    */
+    .body {
+      padding: 0 var(--tt-space-4) var(--tt-space-4);
+
+      font-size: var(--tt-text-sm);
+      line-height: var(--tt-leading-relaxed);
+
+      color: var(--tt-muted-foreground);
+    }
+
+    @media (max-width: 480px) {
+      button {
+        padding: var(--tt-space-3);
+      }
+
+      .body {
+        padding: 0 var(--tt-space-3) var(--tt-space-3);
+      }
+    }
+
+  `; }
+    render() {
+        return html `
+      <div
+        class="heading"
+        role="heading"
+        aria-level=${this.headingLevel}
+      >
+        <button
+          id=${this.headerId}
+          ?disabled=${this.disabled}
+          aria-expanded=${this.open}
+          aria-controls=${this.contentId}
+          @click=${this.toggle}
+        >
+          ${this.heading}
+
+          <span class="arrow" aria-hidden="true">
+            <tt-icon name="chevron-right" size="14px"></tt-icon>
+          </span>
+        </button>
+      </div>
+
+      <div
+        id=${this.contentId}
+        class="content"
+        role="region"
+        aria-labelledby=${this.headerId}
+        ?inert=${!this.open}
+      >
+        <div class="inner">
+          <div class="body">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTAccordionItem.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTAccordionItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], TTAccordionItem.prototype, "heading", void 0);
+__decorate([
+    property({ type: String })
+], TTAccordionItem.prototype, "value", void 0);
+__decorate([
+    property({ type: Number, attribute: "heading-level" })
+], TTAccordionItem.prototype, "headingLevel", void 0);
+TTAccordionItem = __decorate([
+    customElement("tt-accordion-item")
+], TTAccordionItem);
+export { TTAccordionItem };
+//# sourceMappingURL=tt-accordion-item.js.map

package/dist/accordion/tt-accordion-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-accordion-item.js","sourceRoot":"","sources":["../../src/accordion/tt-accordion-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,eAAe,CAAC;AAEvB,IAAI,MAAM,GAAG,CAAC,CAAC;AAEf;;;;;;;;;GASG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAEL,SAAI,GAAG,KAAK,CAAC;QAGb,aAAQ,GAAG,KAAK,CAAC;QAGjB,YAAO,GAAG,EAAE,CAAC;QAEb,qEAAqE;QACrE,sDAAsD;QAEtD,UAAK,GAAG,EAAE,CAAC;QAEX;;;;UAIE;QAEF,iBAAY,GAAG,CAAC,CAAC;QAET,QAAG,GAAG,EAAE,MAAM,CAAC;QAEf,aAAQ,GAAG,uBAAuB,IAAI,CAAC,GAAG,EAAE,CAAC;QAE7C,cAAS,GAAG,wBAAwB,IAAI,CAAC,GAAG,EAAE,CAAC;IAmMzD,CAAC;IAjMC;;;;MAIE;IACF,WAAW;QACT,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC;IACnD,CAAC;IAEO,MAAM;QACZ,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,qBAAqB,EAAE;YACrC,MAAM,EAAE;gBACN,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI;gBAChB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgIlB,AAhIY,CAgIX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;;;;qBAIM,IAAI,CAAC,YAAY;;;eAGvB,IAAI,CAAC,QAAQ;sBACN,IAAI,CAAC,QAAQ;0BACT,IAAI,CAAC,IAAI;0BACT,IAAI,CAAC,SAAS;mBACrB,IAAI,CAAC,MAAM;;YAElB,IAAI,CAAC,OAAO;;;;;;;;;aASX,IAAI,CAAC,SAAS;;;0BAGD,IAAI,CAAC,QAAQ;iBACtB,CAAC,IAAI,CAAC,IAAI;;;;;;;;KAQtB,CAAC;IACJ,CAAC;;AA3ND;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAC9B;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACd;AAKb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAChB;AAQX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;qDACtC;AArBN,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA8N3B"}

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

@@ -0,0 +1,28 @@
+import { LitElement } from "lit";
+import "./tt-accordion-item.js";
+/**
+ * Groups `tt-accordion-item` children and owns which of them are open:
+ *
+ *   <tt-accordion>
+ *     <tt-accordion-item heading="Shipping">...</tt-accordion-item>
+ *     <tt-accordion-item heading="Returns">...</tt-accordion-item>
+ *   </tt-accordion>
+ *
+ * By default one item is open at a time. Set `multiple` to let them stack.
+ * Clicking an open header always closes it.
+ */
+export declare class TTAccordion extends LitElement {
+    multiple: boolean;
+    private items;
+    private handleToggle;
+    private handleKeydown;
+    private handleSlotChange;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-accordion": TTAccordion;
+    }
+}
+//# sourceMappingURL=tt-accordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-accordion.d.ts","sourceRoot":"","sources":["../../src/accordion/tt-accordion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAO5C,OAAO,wBAAwB,CAAC;AAGhC;;;;;;;;;;GAUG;AACH,qBACa,WAAY,SAAQ,UAAU;IAEzC,QAAQ,UAAS;IAQjB,OAAO,CAAC,KAAK,CAAqB;IAElC,OAAO,CAAC,YAAY;IA4CpB,OAAO,CAAC,aAAa;IA+BrB,OAAO,CAAC,gBAAgB;IAkBxB,MAAM,CAAC,MAAM,0BAuBX;IAEF,MAAM;CAWP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/dist/accordion/tt-accordion.js

@@ -0,0 +1,148 @@
+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, queryAssignedElements, } from "lit/decorators.js";
+import "./tt-accordion-item.js";
+/**
+ * Groups `tt-accordion-item` children and owns which of them are open:
+ *
+ *   <tt-accordion>
+ *     <tt-accordion-item heading="Shipping">...</tt-accordion-item>
+ *     <tt-accordion-item heading="Returns">...</tt-accordion-item>
+ *   </tt-accordion>
+ *
+ * By default one item is open at a time. Set `multiple` to let them stack.
+ * Clicking an open header always closes it.
+ */
+let TTAccordion = class TTAccordion extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.multiple = false;
+    }
+    handleToggle(event) {
+        const item = event.target;
+        // The event bubbles and is composed, so a nested accordion's items reach
+        // this listener too. Anything not slotted here belongs to someone else.
+        if (!this.items.includes(item)) {
+            return;
+        }
+        event.stopPropagation();
+        const open = event.detail.open;
+        if (open && !this.multiple) {
+            for (const other of this.items) {
+                if (other !== item) {
+                    other.open = false;
+                }
+            }
+        }
+        item.open = open;
+        this.dispatchEvent(new CustomEvent("tt-accordion-change", {
+            detail: {
+                value: item.value,
+                open: item.open,
+                openValues: this.items.filter((i) => i.open).map((i) => i.value),
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    /*
+      Up and down move between headers, Home and End jump to the ends. Expected
+      behaviour for an accordion and what makes it usable without a mouse.
+  
+      A keypress starts on the button inside the item's shadow root, so by the
+      time it reaches this listener the target has been retargeted to the item
+      itself. That is why indexOf works here.
+    */
+    handleKeydown(event) {
+        const keys = ["ArrowDown", "ArrowUp", "Home", "End"];
+        if (!keys.includes(event.key)) {
+            return;
+        }
+        const items = this.items.filter((item) => !item.disabled);
+        const index = items.indexOf(event.target);
+        if (index === -1) {
+            return;
+        }
+        event.preventDefault();
+        let next = index;
+        if (event.key === "ArrowDown")
+            next = (index + 1) % items.length;
+        if (event.key === "ArrowUp")
+            next = (index - 1 + items.length) % items.length;
+        if (event.key === "Home")
+            next = 0;
+        if (event.key === "End")
+            next = items.length - 1;
+        items[next].focusHeader();
+    }
+    /*
+      Items can be authored with `open` already set. In single mode more than
+      one of those would contradict the component's own rule, so the first one
+      wins and the rest close.
+    */
+    handleSlotChange() {
+        if (this.multiple) {
+            return;
+        }
+        let found = false;
+        for (const item of this.items) {
+            if (!item.open)
+                continue;
+            if (found) {
+                item.open = false;
+            }
+            found = 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);
+    }
+
+    .accordion {
+      border: 1px solid var(--tt-border);
+      border-radius: var(--tt-radius);
+
+      background: var(--tt-card);
+      color: var(--tt-card-foreground);
+
+      /* Keeps the item dividers and hover fills inside the rounded corners. */
+      overflow: hidden;
+    }
+  `; }
+    render() {
+        return html `
+      <div
+        class="accordion"
+        @tt-accordion-toggle=${this.handleToggle}
+        @keydown=${this.handleKeydown}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], TTAccordion.prototype, "multiple", void 0);
+__decorate([
+    queryAssignedElements({ selector: "tt-accordion-item" })
+], TTAccordion.prototype, "items", void 0);
+TTAccordion = __decorate([
+    customElement("tt-accordion")
+], TTAccordion);
+export { TTAccordion };
+//# sourceMappingURL=tt-accordion.js.map

package/dist/accordion/tt-accordion.js.map

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

package/dist/bento/tt-bento-item.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from "lit";
+/**
+ * A tile surface for a `tt-bento`.
+ *
+ * It owns no placement. `bento-span` and `bento-rows` are read by the grid
+ * off any direct child, so this component exists purely to give bare
+ * content a surface: background, border, the 2xl corner, padding, and the
+ * concentric radius its own children read.
+ *
+ * Anything that already brings its own surface - a tt-card, a tt-stat, a
+ * tt-chart - goes straight into the grid and needs none of this:
+ *
+ *   <tt-bento>
+ *     <tt-stat bento-span="2"></tt-stat>
+ *     <tt-bento-item bento-span="2">bare content</tt-bento-item>
+ *   </tt-bento>
+ */
+export declare class TTBentoItem extends LitElement {
+    /** Drop the tile surface and render as a bare grid cell. */
+    plain: boolean;
+    /**
+     * The whole tile leads somewhere. Adds hover, focus and keyboard
+     * activation. Named clickable, as on tt-card and tt-sidebar-footer.
+     */
+    clickable: boolean;
+    private activate;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-bento-item": TTBentoItem;
+    }
+}
+//# sourceMappingURL=tt-bento-item.d.ts.map

package/dist/bento/tt-bento-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-bento-item.d.ts","sourceRoot":"","sources":["../../src/bento/tt-bento-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;;;;GAeG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,4DAA4D;IAE5D,KAAK,UAAS;IAEd;;;OAGG;IAEH,SAAS,UAAS;IAElB,OAAO,CAAC,QAAQ;IAWhB,MAAM,CAAC,MAAM,0BA0HX;IAEF,MAAM;CAoBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}