@tartaguti/ui-components 0.0.0-stage → 0.1.0

package/dist/tt-product.js

@@ -0,0 +1,590 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { srOnly } from "./sr-only.js";
+import { openSafely } from "./safe-url.js";
+import "./tt-card.js";
+import "./tt-image.js";
+import "./tt-button.js";
+import "./tt-icon.js";
+let TTProduct = class TTProduct extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.src = "";
+        this.ratio = "1";
+        this.orientation = "vertical";
+        this.variant = "default";
+        this.layout = "standard";
+        this.heading = "";
+        this.description = "";
+        this.descriptionLines = 2;
+        this.price = "";
+        this.wasPrice = "";
+        this.rating = "";
+        this.value = "";
+        this.buttonLink = "";
+        this.buttonLabel = "Add to basket";
+        this.disabled = false;
+    }
+    handleClick() {
+        if (this.disabled)
+            return;
+        this.dispatchEvent(new CustomEvent("tt-product-action", {
+            detail: { value: this.value, heading: this.heading },
+            bubbles: true,
+            composed: true,
+        }));
+        if (this.buttonLink)
+            openSafely(this.buttonLink);
+    }
+    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;
+    }
+
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+      font-family: var(--tt-font-sans);
+      text-align: start;
+
+      --_name: var(--tt-text-sm);
+      --_price: var(--tt-text-md);
+      --_card-radius: var(--tt-radius-lg);
+      --_surface: var(--tt-card);
+      --_border: var(--tt-border);
+      --_shadow: none;
+      --_content-gap: var(--tt-space-2);
+    }
+
+    :host([orientation="horizontal"]) {
+      --_name: var(--tt-text-md);
+      --_price: var(--tt-text-lg);
+    }
+
+    :host([variant="minimal"]) {
+      --_surface: transparent;
+      --_border: transparent;
+      --_shadow: none;
+    }
+
+    :host([variant="elevated"]) {
+      --_shadow: var(--tt-elevation-1);
+    }
+
+    :host([variant="featured"]) {
+      --_card-radius: var(--tt-radius-xl);
+      --_shadow: var(--tt-elevation-1);
+    }
+
+    tt-card {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      /* tt-card's own radius knob, so its padding presets and
+         --tt-radius-nested follow the product's radius. */
+      --tt-card-radius: var(--_card-radius);
+      transition: transform var(--tt-duration-normal) var(--tt-ease-out);
+    }
+
+    /*
+      The SURFACE is styled through tt-card's "card" part.
+
+      These used to be set on the tt-card host, but tt-card draws its
+      background, border and shadow on an element inside its own shadow
+      root, which a rule on the host never reaches. So every variant
+      looked the same: "minimal" still drew a white card with a border.
+      ::part() is the one door a component opens for exactly this.
+    */
+    tt-card::part(card) {
+      background: var(--_surface);
+      border-color: var(--_border);
+      box-shadow: var(--_shadow);
+      overflow: hidden; /* clips the image to the card's corners */
+    }
+
+    :host(:hover:not([disabled])) tt-card {
+      transform: translateY(-2px);
+    }
+
+    :host([variant="minimal"]:hover) tt-card {
+      transform: none;
+    }
+
+    /* One rung up on hover, as tt-card's own elevated variant does. */
+    :host([variant="elevated"]:hover:not([disabled])) tt-card::part(card),
+    :host([variant="featured"]:hover:not([disabled])) tt-card::part(card) {
+      box-shadow: var(--tt-elevation-2);
+    }
+
+    /* ---------- media (Square corners) ---------- */
+
+    .media {
+      position: relative;
+      overflow: hidden;
+      background: var(--tt-muted);
+      border-radius: 0; /* Zero radius on images */
+    }
+
+    tt-image {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transition: transform var(--tt-duration-slow) var(--tt-ease-out);
+    }
+
+    :host(:hover:not([disabled])) tt-image {
+      transform: scale(1.035);
+    }
+
+    @media (pointer: coarse) {
+      :host(:hover) tt-image {
+        transform: none;
+      }
+    }
+
+    .badge {
+      position: absolute;
+      inset-block-start: var(--tt-space-2);
+      inset-inline-start: var(--tt-space-2);
+      z-index: 2;
+      max-width: calc(100% - var(--tt-space-4));
+    }
+
+    .badge ::slotted(*) {
+      box-shadow: var(--tt-elevation-1);
+    }
+
+    /* ---------- body & typography ---------- */
+
+    .body {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-width: 0;
+    }
+
+    h2 {
+      margin: 0;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+
+      font-size: var(--_name);
+      font-weight: var(--tt-weight-semibold);
+      line-height: var(--tt-leading-snug);
+      letter-spacing: -0.012em;
+      color: var(--tt-foreground);
+      overflow-wrap: break-word;
+    }
+
+    .price {
+      display: flex;
+      align-items: baseline;
+      flex-wrap: wrap;
+      gap: var(--tt-space-2);
+      margin-top: var(--_content-gap);
+
+      font-size: var(--_price);
+      font-weight: var(--tt-weight-bold);
+      letter-spacing: -0.025em;
+      color: var(--tt-foreground);
+      font-variant-numeric: tabular-nums;
+    }
+
+    .was {
+      font-size: var(--tt-text-xs);
+      font-weight: var(--tt-weight-regular);
+      text-decoration: line-through;
+      color: var(--tt-muted-foreground);
+    }
+
+    p {
+      margin: var(--_content-gap) 0 0;
+      display: -webkit-box;
+      -webkit-line-clamp: var(--_desc-lines, 2);
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+
+      font-size: var(--tt-text-sm);
+      line-height: var(--tt-leading-snug);
+      color: var(--tt-muted-foreground);
+    }
+
+    .rating {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--tt-space-1);
+      min-width: 0;
+
+      font-size: var(--tt-text-xs);
+      color: var(--tt-muted-foreground);
+      font-variant-numeric: tabular-nums;
+    }
+
+    .rating tt-icon {
+      color: var(--tt-warning);
+      flex: 0 0 auto;
+    }
+
+    /* ---------- vertical / standard ---------- */
+
+    :host([orientation="vertical"]) .media {
+      margin-bottom: var(--tt-space-3);
+      border-radius: 0;
+    }
+
+    :host([orientation="vertical"]) .price,
+    :host([orientation="vertical"]) p {
+      margin-top: var(--tt-space-1);
+    }
+
+    .foot {
+      display: flex;
+      align-items: center;
+      gap: var(--tt-space-2);
+      min-width: 0;
+      margin-top: auto;
+      padding-top: var(--tt-space-3);
+    }
+
+    .foot .rating {
+      margin-top: 0;
+    }
+
+    .foot > tt-button {
+      margin-inline-start: auto;
+    }
+
+    /* ---------- vertical / compact ---------- */
+
+    /* tt-card's padding variables, not padding on its host: host padding
+       lands OUTSIDE the card's border and left a gap around it. */
+    :host([orientation="vertical"][layout="compact"]) tt-card {
+      --tt-card-padding-x: var(--tt-space-2);
+      --tt-card-padding-y: var(--tt-space-2);
+    }
+
+    :host([orientation="vertical"][layout="compact"]) .media {
+      margin-bottom: var(--tt-space-2);
+      border-radius: 0;
+    }
+
+    :host([orientation="vertical"][layout="compact"]) .price,
+    :host([orientation="vertical"][layout="compact"]) p {
+      margin-top: 2px;
+    }
+
+    /* ---------- vertical / overlay ---------- */
+
+    :host([orientation="vertical"][layout="overlay"]) tt-card {
+      position: relative;
+      --tt-card-padding-x: 0px;
+      --tt-card-padding-y: 0px;
+      --tt-card-gap: 0px;
+    }
+
+    :host([orientation="vertical"][layout="overlay"]) .media {
+      margin: 0;
+      height: 100%;
+      border-radius: 0;
+    }
+
+    :host([orientation="vertical"][layout="overlay"]) .body {
+      position: absolute;
+      inset-inline: 0;
+      inset-block-end: 0;
+      z-index: 2;
+      padding: var(--tt-space-4);
+
+      /*
+        Text ON A PHOTO, the one place in the library where colour is
+        deliberately not themed: the scrim below is always dark, whatever
+        the theme, so the text on it is always light. These literals are
+        that decision, written once. (The colour here used to be
+        --tt-card-foreground, which is DARK in the light theme: any text
+        not overridden below came out dark on the dark scrim.)
+      */
+      --_on-image: oklch(1 0 0);
+      --_on-image-muted: oklch(1 0 0 / 0.85);
+      color: var(--_on-image);
+      background: linear-gradient(
+        to top,
+        oklch(0 0 0 / 0.85) 0%,
+        oklch(0 0 0 / 0.45) 60%,
+        transparent 100%
+      );
+    }
+
+    :host([orientation="vertical"][layout="overlay"]) h2,
+    :host([orientation="vertical"][layout="overlay"]) .price {
+      color: var(--_on-image);
+    }
+
+    :host([orientation="vertical"][layout="overlay"]) p,
+    :host([orientation="vertical"][layout="overlay"]) .rating {
+      color: var(--_on-image-muted);
+    }
+
+    /* ---------- horizontal ---------- */
+
+    .row {
+      display: flex;
+      align-items: stretch;
+      min-height: 7rem;
+      width: 100%;
+      overflow: hidden;
+      border-radius: inherit;
+    }
+
+    .row .media {
+      flex: 0 0 34%;
+      max-width: 13.75rem;
+      border-radius: 0;
+    }
+
+    .column {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      min-width: 0;
+      padding: var(--tt-space-4);
+    }
+
+    .actions {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: auto;
+      padding-top: var(--tt-space-3);
+    }
+
+    :host([orientation="horizontal"][layout="compact"]) .row {
+      min-height: 5.5rem;
+    }
+
+    :host([orientation="horizontal"][layout="compact"]) .column {
+      padding: var(--tt-space-3);
+    }
+
+    :host([orientation="horizontal"][variant="minimal"]) .row {
+      border: 1px solid var(--tt-border);
+      background: var(--tt-card);
+    }
+
+    :host([orientation="horizontal"][variant="featured"]) .row {
+      min-height: 8.5rem;
+    }
+
+    /* ---------- disabled ---------- */
+
+    :host([disabled]) {
+      opacity: var(--tt-opacity-disabled);
+      pointer-events: none;
+    }
+
+    @media (max-width: 32.5rem) {
+      :host([orientation="horizontal"]) .row {
+        min-height: 6rem;
+      }
+
+      :host([orientation="horizontal"]) .row .media {
+        flex-basis: 31%;
+      }
+
+      :host([orientation="horizontal"]) .column {
+        padding: var(--tt-space-3);
+      }
+    }
+  `]; }
+    renderMedia(inTile) {
+        return html `
+      <div
+        class="media"
+        part="media"
+        slot=${ifDefined(inTile ? "image" : undefined)}
+      >
+        <div class="badge"><slot name="badge"></slot></div>
+
+        <tt-image
+          part="image"
+          radius="none"
+          ratio=${this.ratio}
+          src=${this.src}
+          alt=${this.heading}
+        ></tt-image>
+      </div>
+    `;
+    }
+    renderRating() {
+        return this.rating
+            ? html `
+          <div class="rating" part="rating">
+            <tt-icon name="star" size="12px"></tt-icon>
+            <span>${this.rating}</span>
+          </div>
+        `
+            : nothing;
+    }
+    renderBody(withRating = false) {
+        const descStyles = styleMap({
+            "--_desc-lines": String(this.descriptionLines),
+        });
+        return html `
+      <div class="body" part="body">
+        <h2 part="heading">${this.heading}</h2>
+
+        ${this.price
+            ? html `
+              <div class="price" part="price">
+                <span>${this.price}</span>${this.wasPrice
+                ? html `<span class="was"
+                      ><span class="sr-only">Was </span>${this.wasPrice}</span
+                    >`
+                : nothing}
+              </div>
+            `
+            : nothing}
+
+        ${this.description
+            ? html `
+              <p part="description" style=${descStyles}>${this.description}
+              </p>
+            `
+            : nothing}
+
+        ${!withRating
+            ? html `
+              <div class="foot" part="foot">
+                ${this.renderRating()}${this.renderQuickAdd()}
+              </div>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+    /*
+      The button's accessible name carries the product: "Add to basket,
+      Linen lamp". A grid of twelve products otherwise reads as twelve
+      identical "Add to basket" buttons, which is what the docs said it did
+      not do. The visible text comes first, so the name still starts with
+      what a sighted user sees (WCAG 2.5.3, label in name).
+    */
+    get actionName() {
+        return this.heading ? `${this.buttonLabel}, ${this.heading}` : this.buttonLabel;
+    }
+    renderQuickAdd() {
+        return html `
+      <tt-button
+        class="quick-add"
+        part="button"
+        pill
+        size="small"
+        label=${this.actionName}
+        ?disabled=${this.disabled}
+        @tt-button-click=${this.handleClick}
+      >
+        <tt-icon name="shopping-bag"></tt-icon>
+      </tt-button>
+    `;
+    }
+    renderButton() {
+        return html `
+      <tt-button
+        part="button"
+        size="small"
+        label=${this.actionName}
+        ?disabled=${this.disabled}
+        @tt-button-click=${this.handleClick}
+      >
+        ${this.buttonLabel}
+      </tt-button>
+    `;
+    }
+    render() {
+        if (this.orientation === "horizontal") {
+            return html `
+        <tt-card part="card" padding="none">
+          <div class="row">
+            ${this.renderMedia(false)}
+            <div class="column">
+              ${this.renderBody(true)}
+              <div class="actions">
+                ${this.renderRating()}
+                ${this.renderButton()}
+              </div>
+            </div>
+          </div>
+        </tt-card>
+      `;
+        }
+        return html `
+      <tt-card part="card" padding="small">
+        ${this.renderMedia(true)}
+        ${this.renderBody()}
+      </tt-card>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TTProduct.prototype, "src", void 0);
+__decorate([
+    property({ type: String })
+], TTProduct.prototype, "ratio", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTProduct.prototype, "orientation", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTProduct.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTProduct.prototype, "layout", void 0);
+__decorate([
+    property({ type: String })
+], TTProduct.prototype, "heading", void 0);
+__decorate([
+    property({ type: String })
+], TTProduct.prototype, "description", void 0);
+__decorate([
+    property({ type: Number, attribute: "description-lines" })
+], TTProduct.prototype, "descriptionLines", void 0);
+__decorate([
+    property({ type: String })
+], TTProduct.prototype, "price", void 0);
+__decorate([
+    property({ type: String, attribute: "was-price" })
+], TTProduct.prototype, "wasPrice", void 0);
+__decorate([
+    property({ type: String })
+], TTProduct.prototype, "rating", void 0);
+__decorate([
+    property({ type: String })
+], TTProduct.prototype, "value", void 0);
+__decorate([
+    property({ type: String, attribute: "button-link" })
+], TTProduct.prototype, "buttonLink", void 0);
+__decorate([
+    property({ type: String, attribute: "button-label" })
+], TTProduct.prototype, "buttonLabel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTProduct.prototype, "disabled", void 0);
+TTProduct = __decorate([
+    customElement("tt-product")
+], TTProduct);
+export { TTProduct };
+//# sourceMappingURL=tt-product.js.map

package/dist/tt-product.js.map

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

package/dist/tt-profile-card.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from "lit";
+import "./tt-card.js";
+import "./tt-image.js";
+import "./tt-button.js";
+export type ProfileCardOrientation = "vertical" | "horizontal";
+export declare class TTProfileCard extends LitElement {
+    name: string;
+    description: string;
+    value: string;
+    image: string;
+    imageAlt: string;
+    buttonLabel: string;
+    orientation: ProfileCardOrientation;
+    static styles: import("lit").CSSResult;
+    private handleAction;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-profile-card": TTProfileCard;
+    }
+}
+//# sourceMappingURL=tt-profile-card.d.ts.map

package/dist/tt-profile-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-profile-card.d.ts","sourceRoot":"","sources":["../src/tt-profile-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;AAExB,MAAM,MAAM,sBAAsB,GAAG,UAAU,GAAG,YAAY,CAAC;AAE/D,qBACa,aAAc,SAAQ,UAAU;IAE3C,IAAI,SAAM;IASV,WAAW,SAAM;IAKjB,KAAK,SAAM;IAGX,KAAK,SAAM;IAGX,QAAQ,SAAM;IAGd,WAAW,SAAkB;IAG7B,WAAW,EAAE,sBAAsB,CAAc;IAEjD,MAAM,CAAC,MAAM,0BA2FX;IAEF,OAAO,CAAC,YAAY;IAapB,MAAM;CA0CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}