@tartaguti/ui-components 0.0.0-stage → 0.1.0

package/dist/tt-page.js

@@ -0,0 +1,163 @@
+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";
+let TTPage = class TTPage 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 = "";
+        // How wide the content column may grow. Documentation wants a narrow,
+        // readable measure; an app dashboard usually wants the full width.
+        // Reflected so the :host([width=...]) rules below can match.
+        this.width = "default";
+    }
+    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;
+
+      /* One variable drives the column; each width overrides just this. */
+      --_max: 1000px;
+
+      font-family: var(--tt-font-sans);
+
+      -webkit-font-smoothing: antialiased;
+      text-rendering: optimizeLegibility;
+
+      color: var(--tt-foreground);
+    }
+
+    /* Reading measure, for prose and documentation. */
+    :host([width="narrow"]) {
+      --_max: 720px;
+    }
+
+    :host([width="wide"]) {
+      --_max: 1400px;
+    }
+
+    /* Edge to edge: dashboards, tables, anything data-dense. */
+    :host([width="full"]) {
+      --_max: none;
+    }
+
+    .page {
+      max-width: var(--_max);
+      margin: 0 auto;
+      padding: var(--tt-space-12) var(--tt-space-8);
+      box-sizing: border-box;
+    }
+
+    h1 {
+      margin: 0;
+
+      font-family: var(--tt-font-display);
+      font-size: var(--tt-text-3xl);
+      font-weight: var(--tt-weight-bold);
+      line-height: var(--tt-leading-tight);
+      letter-spacing: -0.02em;
+
+      color: var(--tt-foreground);
+    }
+
+    p {
+      margin: var(--tt-space-2) 0 0;
+      max-width: 62ch;
+
+      color: var(--tt-muted-foreground);
+
+      font-size: var(--tt-text-md);
+      line-height: var(--tt-leading-relaxed);
+    }
+
+    /*
+      The page owns the spacing between its children. Children never set
+      their own outer margins, so any mix of sections, grids and tables
+      spaces evenly without knowing about each other.
+    */
+    .content {
+      margin-top: var(--tt-space-10);
+
+      display: flex;
+      flex-direction: column;
+      gap: var(--tt-space-10);
+    }
+
+    @media (max-width: 768px) {
+      .page {
+        padding: var(--tt-space-8) var(--tt-space-5);
+      }
+
+      h1 {
+        font-size: var(--tt-text-2xl);
+      }
+
+      .content {
+        margin-top: var(--tt-space-8);
+      }
+    }
+
+    @media (max-width: 480px) {
+      .page {
+        /*
+          space-3 horizontally, matching --tt-bento-gap.
+
+          The inset around a grid should equal the gutter inside it, or the
+          first tile reads as further from the screen edge than it is from
+          its neighbour and the whole block looks off-centre. On a phone
+          this is the difference between a mosaic and a list of boxes with
+          a margin.
+
+          It is also simply more screen: 12px a side on a 390px phone is
+          worth about 10% of the width back.
+        */
+        padding: var(--tt-space-6) var(--tt-space-3);
+      }
+
+      h1 {
+        font-size: var(--tt-text-xl);
+      }
+    }
+  `; }
+    render() {
+        return html `
+      <div class="page" part="page">
+        <h1 part="heading">${this.heading}</h1>
+
+        ${this.description
+            ? html `<p part="description">${this.description}</p>`
+            : ""}
+
+        <div class="content" part="content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TTPage.prototype, "heading", void 0);
+__decorate([
+    property({ type: String })
+], TTPage.prototype, "description", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTPage.prototype, "width", void 0);
+TTPage = __decorate([
+    customElement("tt-page")
+], TTPage);
+export { TTPage };
+//# sourceMappingURL=tt-page.js.map

package/dist/tt-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-page.js","sourceRoot":"","sources":["../src/tt-page.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;AAGrD,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QACL,oEAAoE;QACpE,gEAAgE;QAEhE,YAAO,GAAG,EAAE,CAAC;QAGb,gBAAW,GAAG,EAAE,CAAC;QAEjB,sEAAsE;QACtE,mEAAmE;QACnE,6DAA6D;QAE7D,UAAK,GAA2C,SAAS,CAAC;IAmI5D,CAAC;aAjIQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgHlB,AAhHY,CAgHX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;;6BAEc,IAAI,CAAC,OAAO;;UAE/B,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,WAAW,MAAM;YACrD,CAAC,CAAC,EAAE;;;;;;KAMT,CAAC;IACJ,CAAC;;AA3ID;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACV;AAMjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCACgB;AAb/C,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAgJlB"}

package/dist/tt-pagination.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from "lit";
+import "./tt-button.js";
+import "./tt-icon.js";
+/**
+ * Page navigation. Owns nothing: the current page comes in, and a click
+ * emits the page you asked for. The parent decides what that means and
+ * passes the new page back down.
+ */
+export declare class TTPagination extends LitElement {
+    page: number;
+    total: number;
+    pageSize: number;
+    siblings: number;
+    private get pageCount();
+    private get current();
+    private get pages();
+    private go;
+    private get range();
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-pagination": TTPagination;
+    }
+}
+//# sourceMappingURL=tt-pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-pagination.d.ts","sourceRoot":"","sources":["../src/tt-pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB;;;;GAIG;AACH,qBACa,YAAa,SAAQ,UAAU;IACd,IAAI,SAAK;IAET,KAAK,SAAK;IAEc,QAAQ,SAAM;IAItC,QAAQ,SAAK;IAIzC,OAAO,KAAK,SAAS,GAEpB;IAED,OAAO,KAAK,OAAO,GAIlB;IAQD,OAAO,KAAK,KAAK,GAwBhB;IAED,OAAO,CAAC,EAAE;IAYV,OAAO,KAAK,KAAK,GAIhB;IAED,MAAM,CAAC,MAAM,0BAkDX;IAEF,MAAM;CAqDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/dist/tt-pagination.js

@@ -0,0 +1,194 @@
+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-button.js";
+import "./tt-icon.js";
+/**
+ * Page navigation. Owns nothing: the current page comes in, and a click
+ * emits the page you asked for. The parent decides what that means and
+ * passes the new page back down.
+ */
+let TTPagination = class TTPagination extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.page = 1;
+        this.total = 0;
+        this.pageSize = 10;
+        // How many numbered buttons to show around the current page before
+        // collapsing the rest into an ellipsis.
+        this.siblings = 1;
+    }
+    // Derived, never stored: total pages is a function of two properties
+    // that already exist, so it cannot go stale.
+    get pageCount() {
+        return Math.max(1, Math.ceil(this.total / this.pageSize));
+    }
+    get current() {
+        // Clamp, so a page number left over from a longer list cannot point
+        // past the end after the results shrink.
+        return Math.min(Math.max(1, this.page), this.pageCount);
+    }
+    /*
+      Which numbers to show. Always the first and last page, plus a window
+      around the current one, with -1 standing in for an ellipsis.
+  
+        1 ... 4 [5] 6 ... 20
+    */
+    get pages() {
+        const count = this.pageCount;
+        const current = this.current;
+        const span = this.siblings;
+        // Few enough to show them all.
+        if (count <= span * 2 + 5) {
+            return Array.from({ length: count }, (_, i) => i + 1);
+        }
+        const result = [1];
+        const start = Math.max(2, current - span);
+        const end = Math.min(count - 1, current + span);
+        if (start > 2)
+            result.push(-1);
+        for (let i = start; i <= end; i++)
+            result.push(i);
+        if (end < count - 1)
+            result.push(-1);
+        result.push(count);
+        return result;
+    }
+    go(page) {
+        if (page === this.current || page < 1 || page > this.pageCount)
+            return;
+        this.dispatchEvent(new CustomEvent("tt-page-change", {
+            detail: { page },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    get range() {
+        const from = (this.current - 1) * this.pageSize + 1;
+        const to = Math.min(this.current * this.pageSize, this.total);
+        return { from, to };
+    }
+    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);
+    }
+
+    .bar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      gap: var(--tt-space-3);
+    }
+
+    .summary {
+      font-size: var(--tt-text-sm);
+      color: var(--tt-muted-foreground);
+      font-variant-numeric: tabular-nums;
+    }
+
+    /*
+      Wraps, so the row fits any container. A middle page draws the most
+      buttons (previous, 1, ..., 9, 10, 11, ..., 20, next), and at touch
+      size that row is wider than a phone. Without wrap its min-content
+      width was the whole row, so it could only stick out.
+    */
+    .pages {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--tt-space-1);
+    }
+
+    .ellipsis {
+      padding: 0 var(--tt-space-1);
+      color: var(--tt-muted-foreground);
+      user-select: none;
+    }
+
+    /* Square at minimum, from the same token as the button's height, so
+       the number buttons grow with the touch and density modes too. */
+    tt-button {
+      min-width: var(--tt-control-sm);
+    }
+  `; }
+    render() {
+        // One page of results needs no controls at all.
+        if (this.pageCount <= 1)
+            return html ``;
+        const current = this.current;
+        const { from, to } = this.range;
+        return html `
+      <nav class="bar" part="bar" aria-label="Pagination">
+        <span class="summary">
+          ${from}-${to} of ${this.total}
+        </span>
+
+        <div class="pages">
+          <tt-button
+            variant="secondary"
+            size="small"
+            ?disabled=${current === 1}
+            label="Previous page"
+            @tt-button-click=${() => this.go(current - 1)}
+          >
+            <tt-icon name="chevron-left" size="16px"></tt-icon>
+          </tt-button>
+
+          ${this.pages.map((page) => page === -1
+            ? html `<span class="ellipsis" aria-hidden="true">…</span>`
+            : html `
+                  <tt-button
+                    variant=${page === current ? "primary" : "secondary"}
+                    size="small"
+                    label=${`Page ${page}`}
+                    current=${page === current ? "page" : ""}
+                    @tt-button-click=${() => this.go(page)}
+                  >
+                    ${page}
+                  </tt-button>
+                `)}
+
+          <tt-button
+            variant="secondary"
+            size="small"
+            ?disabled=${current === this.pageCount}
+            label="Next page"
+            @tt-button-click=${() => this.go(current + 1)}
+          >
+            <tt-icon name="chevron-right" size="16px"></tt-icon>
+          </tt-button>
+        </div>
+      </nav>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], TTPagination.prototype, "page", void 0);
+__decorate([
+    property({ type: Number })
+], TTPagination.prototype, "total", void 0);
+__decorate([
+    property({ type: Number, attribute: "page-size" })
+], TTPagination.prototype, "pageSize", void 0);
+__decorate([
+    property({ type: Number })
+], TTPagination.prototype, "siblings", void 0);
+TTPagination = __decorate([
+    customElement("tt-pagination")
+], TTPagination);
+export { TTPagination };
+//# sourceMappingURL=tt-pagination.js.map

package/dist/tt-pagination.js.map

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

package/dist/tt-preview.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from "lit";
+export declare class TTPreview extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-preview": TTPreview;
+    }
+}
+//# sourceMappingURL=tt-preview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-preview.d.ts","sourceRoot":"","sources":["../src/tt-preview.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,qBACa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,MAAM,0BA6CX;IAEF,MAAM;CAOP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/tt-preview.js

@@ -0,0 +1,68 @@
+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 } from "lit/decorators.js";
+let TTPreview = class TTPreview extends LitElement {
+    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;
+
+      /* Private alias - derived from the theme so the dot grid follows
+         light/dark automatically. */
+      --_dot: color-mix(in srgb, var(--tt-foreground) 8%, transparent);
+    }
+
+    .preview {
+      min-height: 140px;
+      max-height: 500px;
+      overflow: auto;
+
+      width: 100%;
+      box-sizing: border-box;
+
+      border: 1px solid var(--tt-border);
+      border-radius: var(--tt-radius-lg);
+
+      background-color: var(--tt-card);
+      background-image: radial-gradient(var(--_dot) 1px, transparent 1px);
+      background-size: 16px 16px;
+      background-position: -8px -8px;
+
+      padding: var(--tt-space-8);
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--tt-space-3);
+      flex-wrap: wrap;
+    }
+
+    @media (max-width: 480px) {
+      .preview {
+        padding: var(--tt-space-5);
+      }
+    }
+  `; }
+    render() {
+        return html `
+      <div class="preview" part="preview">
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+TTPreview = __decorate([
+    customElement("tt-preview")
+], TTPreview);
+export { TTPreview };
+//# sourceMappingURL=tt-preview.js.map

package/dist/tt-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-preview.js","sourceRoot":"","sources":["../src/tt-preview.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;aAChC,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6ClB,AA7CY,CA6CX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAtDU,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAuDrB"}

package/dist/tt-product.d.ts

@@ -0,0 +1,40 @@
+import { LitElement } from "lit";
+import "./tt-card.js";
+import "./tt-image.js";
+import "./tt-button.js";
+import "./tt-icon.js";
+export type ProductOrientation = "vertical" | "horizontal";
+export type ProductVariant = "default" | "minimal" | "elevated" | "featured";
+export type ProductLayout = "standard" | "overlay" | "compact";
+export declare class TTProduct extends LitElement {
+    src: string;
+    ratio: string;
+    orientation: ProductOrientation;
+    variant: ProductVariant;
+    layout: ProductLayout;
+    heading: string;
+    description: string;
+    descriptionLines: number;
+    price: string;
+    wasPrice: string;
+    rating: string;
+    value: string;
+    buttonLink: string;
+    buttonLabel: string;
+    disabled: boolean;
+    private handleClick;
+    static styles: import("lit").CSSResult[];
+    private renderMedia;
+    private renderRating;
+    private renderBody;
+    private get actionName();
+    private renderQuickAdd;
+    private renderButton;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-product": TTProduct;
+    }
+}
+//# sourceMappingURL=tt-product.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-product.d.ts","sourceRoot":"","sources":["../src/tt-product.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAQrD,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,YAAY,CAAC;AAC3D,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAC7E,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;AAE/D,qBACa,SAAU,SAAQ,UAAU;IACX,GAAG,SAAM;IACT,KAAK,SAAO;IAGxC,WAAW,EAAE,kBAAkB,CAAc;IAG7C,OAAO,EAAE,cAAc,CAAa;IAGpC,MAAM,EAAE,aAAa,CAAc;IAEP,OAAO,SAAM;IACb,WAAW,SAAM;IACe,gBAAgB,SAAK;IAErD,KAAK,SAAM;IACa,QAAQ,SAAM;IACtC,MAAM,SAAM;IAEZ,KAAK,SAAM;IACe,UAAU,SAAM;IACf,WAAW,SAAmB;IAEzC,QAAQ,UAAS;IAE7D,OAAO,CAAC,WAAW;IAcnB,MAAM,CAAC,MAAM,4BA4WV;IAEH,OAAO,CAAC,WAAW;IAoBnB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,UAAU;IA8ClB,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,YAAY;IAcpB,MAAM;CAyBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}