@tartaguti/ui-components 0.1.0 → 0.3.0

package/dist/tt-product.js

@@ -5,44 +5,112 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { customElement, property, state } from "lit/decorators.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 { safeUrl } from "./safe-url.js";
 import "./tt-image.js";
 import "./tt-button.js";
 import "./tt-icon.js";
+/** "1", "4 / 3", "16/9": one number, or two with a slash between. */
+const RATIO = /^\s*\d*\.?\d+\s*(\/\s*\d*\.?\d+\s*)?$/;
+/**
+ * A product in a shop: photo, name, price and a button.
+ *
+ * TWO CHOICES, FOUR RESULTS. `orientation` (a tile for a grid, or a row
+ * for a list) and `size` (medium, or small for two across on a phone).
+ * Every pairing of the two is designed, so there is no combination that
+ * breaks. It had four variants and three layouts, twenty-four pairings,
+ * and several of them did: text on a pale photo, a white band under the
+ * photo of a tall row, a layout that did nothing in a row.
+ *
+ * PROPS GIVE THE DEFAULTS, SLOTS ADD TO THEM. `src` draws the photo,
+ * `rating` the star, `button-label` the button. The `media`, `meta` and
+ * `actions` slots add your own beside them (or over the photo), and
+ * clearing the prop drops its default. One rule, so nothing disappears
+ * when something is added.
+ *
+ * ONE TARGET. With `href` the name is a link, or with `clickable` a
+ * button, and either one is stretched over the whole card by a
+ * pseudo-element, so the card is clickable while the accessibility tree
+ * holds ONE link named by the product, not a card-sized link wrapping a
+ * button (interactive content inside a link is invalid and announced
+ * twice). The action row sits above the stretched link, so its buttons
+ * stay separate targets.
+ *
+ * The card draws its own surface with tt-card's tokens rather than
+ * composing tt-card, because the stretched link needs the surface as its
+ * positioned box and the focus ring has to go round the whole card.
+ *
+ * @fires tt-product-action - { value, heading } when the built-in button is pressed.
+ * @fires tt-product-open - { value, heading } when a `clickable` card is opened.
+ *
+ * @slot media - Your own media instead of the photo (a carousel, a video), filling the ratio box. Leave `src` empty.
+ * @slot badge - Over the top-left of the photo: Sale, New, Sold out.
+ * @slot meta - Beside the rating: tags, stock, delivery.
+ * @slot actions - After the built-in button: a wishlist icon, a quantity, your own buttons.
+ */
 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 = "";
+        /** Its place in the page outline, as on tt-card. */
+        this.headingLevel = 3;
         this.description = "";
         this.descriptionLines = 2;
         this.price = "";
         this.wasPrice = "";
         this.rating = "";
+        this.src = "";
+        this.ratio = "1";
+        /** Identifies the product in its events. */
         this.value = "";
-        this.buttonLink = "";
+        /** The product's page. The name becomes a link over the whole card. */
+        this.href = "";
+        /** Without href: the whole card is a button that emits tt-product-open. */
+        this.clickable = false;
+        /** The built-in button's text. Empty for no built-in button. */
         this.buttonLabel = "Add to basket";
+        this.orientation = "vertical";
+        this.size = "medium";
+        /** Cannot be bought (sold out): the button is off and the photo greys. Still a link. */
         this.disabled = false;
-    }
-    handleClick() {
+        // From slotchange: CSS cannot ask whether a slot has anything in it.
+        this.hasMedia = false;
+        this.hasMeta = false;
+        this.hasActions = false;
+        this.onMedia = (event) => (this.hasMedia = this.filled(event));
+        this.onMeta = (event) => (this.hasMeta = this.filled(event));
+        this.onActions = (event) => (this.hasActions = this.filled(event));
+    }
+    filled(event) {
+        const slot = event.target;
+        return slot
+            .assignedNodes({ flatten: true })
+            .some((node) => node.nodeType === Node.ELEMENT_NODE || (node.textContent ?? "").trim() !== "");
+    }
+    get detail() {
+        return { value: this.value, heading: this.heading };
+    }
+    /* The built-in button's own event stays inside: the card reports
+       what happened, once, in its own words. A button you slot into
+       actions is yours, so its events reach you as usual. */
+    handleAction(event) {
+        event.stopPropagation();
         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);
+        this.dispatchEvent(new CustomEvent("tt-product-action", { detail: this.detail, bubbles: true, composed: true }));
+    }
+    handleOpen() {
+        this.dispatchEvent(new CustomEvent("tt-product-open", { detail: this.detail, bubbles: true, composed: true }));
+    }
+    /** The link's address, when it is one a browser may follow. */
+    get url() {
+        return this.href && safeUrl(this.href) ? this.href.trim() : "";
+    }
+    /** A link or a button covers the card: it has a name to carry. */
+    get interactive() {
+        return this.heading !== "" && (this.url !== "" || this.clickable);
     }
     static { this.styles = [srOnly, css `
     /* The browser's own [hidden] rule loses to any :host display, so a
@@ -53,509 +121,498 @@ let TTProduct = class TTProduct extends LitElement {
 
     :host {
       display: block;
-      width: 100%;
+      /* Fills its grid cell, so a row of cards is one height and the
+         prices and buttons line up at the bottom. */
       height: 100%;
-      font-family: var(--tt-font-sans);
+      min-width: 0;
       text-align: start;
+      font-family: var(--tt-font-sans);
+      -webkit-font-smoothing: antialiased;
 
-      --_name: var(--tt-text-sm);
+      --_radius: var(--tt-radius-lg);
+      --_pad: var(--tt-space-4);
+      --_title: 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);
+      --_was: var(--tt-text-sm);
+    }
+
+    /* A step down for two across on a phone, where 52px of the row is the
+       button and its gap: "EUR 89.00" still fits beside it at 160px. */
+    :host([size="small"]) {
+      --_pad: var(--tt-space-3);
+      --_price: var(--tt-text-sm);
+      --_was: var(--tt-text-xs);
     }
 
     :host([orientation="horizontal"]) {
-      --_name: var(--tt-text-md);
+      --_title: var(--tt-text-md);
       --_price: var(--tt-text-lg);
     }
 
-    :host([variant="minimal"]) {
-      --_surface: transparent;
-      --_border: transparent;
-      --_shadow: none;
+    :host([orientation="horizontal"][size="small"]) {
+      --_title: var(--tt-text-sm);
+      --_price: var(--tt-text-md);
+      --_was: var(--tt-text-sm);
     }
 
-    :host([variant="elevated"]) {
-      --_shadow: var(--tt-elevation-1);
+    [hidden] {
+      display: none !important;
     }
 
-    :host([variant="featured"]) {
-      --_card-radius: var(--tt-radius-xl);
-      --_shadow: var(--tt-elevation-1);
-    }
+    /* ---------- the surface: tt-card's tokens ---------- */
 
-    tt-card {
+    .card {
+      /* The stretched link's box. Nothing between it and the link may be
+         positioned, or the link would cover that instead. */
+      position: relative;
+      box-sizing: border-box;
       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);
-    }
+      min-width: 0;
 
-    /*
-      The SURFACE is styled through tt-card's "card" part.
+      background: var(--tt-card);
+      color: var(--tt-card-foreground);
+      border: 1px solid var(--tt-border);
+      border-radius: var(--_radius);
+      box-shadow: var(--tt-elevation-1);
 
-      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 */
+      transition:
+        border-color var(--tt-duration-normal) var(--tt-ease),
+        box-shadow var(--tt-duration-normal) var(--tt-ease);
     }
 
-    :host(:hover:not([disabled])) tt-card {
-      transform: translateY(-2px);
+    :host([orientation="horizontal"]) .card {
+      flex-direction: row;
     }
 
-    :host([variant="minimal"]:hover) tt-card {
-      transform: none;
-    }
+    /* Hover promises a click, so only a card that has one lifts. Only
+       where a pointer can hover: a tap would leave it on. */
+    @media (hover: hover) {
+      .interactive:hover {
+        border-color: var(--tt-border-strong);
+        box-shadow: var(--tt-elevation-2);
+      }
 
-    /* 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);
+      .interactive:hover .image {
+        transform: scale(1.03);
+      }
+
+      .interactive:hover .link {
+        text-decoration: underline;
+        text-underline-offset: 0.2em;
+      }
     }
 
-    /* ---------- media (Square corners) ---------- */
+    /* ---------- media ---------- */
 
     .media {
       position: relative;
+      flex: none;
       overflow: hidden;
       background: var(--tt-muted);
-      border-radius: 0; /* Zero radius on images */
+
+      /* The card's curve less its border, on the corners it shares. */
+      --_inner: max(0px, calc(var(--_radius) - 1px));
+      border-start-start-radius: var(--_inner);
+      border-start-end-radius: var(--_inner);
     }
 
-    tt-image {
+    /* The ratio box: an in-flow spacer sets the height from the width.
+       The photo is laid over it, so in a row whose text is taller the
+       media stretches and the photo still covers it, with no band of
+       card showing under it. */
+    .media::before {
+      content: "";
       display: block;
+      aspect-ratio: var(--_ratio, 1);
+    }
+
+    :host([orientation="horizontal"]) .media {
+      flex: 0 0 clamp(6rem, 34%, 13.75rem);
+      border-start-end-radius: 0;
+      border-end-start-radius: var(--_inner);
+    }
+
+    :host([orientation="horizontal"][size="small"]) .media {
+      flex-basis: clamp(4.5rem, 26%, 8rem);
+    }
+
+    .image,
+    slot[name="media"]::slotted(*) {
+      position: absolute;
+      inset: 0;
       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);
+    .image {
+      transition: transform var(--tt-duration-slow) var(--tt-ease-out);
     }
 
-    @media (pointer: coarse) {
-      :host(:hover) tt-image {
-        transform: none;
-      }
+    :host([disabled]) .image,
+    :host([disabled]) slot[name="media"]::slotted(*) {
+      filter: grayscale(1);
+      opacity: 0.6;
     }
 
-    .badge {
+    /* Badges sit on a photo, where a tinted badge (a 13% wash of its
+       colour) would show the photo through it. Each one gets the card
+       behind it, so it reads exactly as it does on a card. */
+    .badges {
       position: absolute;
+      inset-block-start: var(--tt-space-3);
+      inset-inline: var(--tt-space-3);
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--tt-space-1);
+      pointer-events: none;
+    }
+
+    :host([size="small"]) .badges {
       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));
+      inset-inline: var(--tt-space-2);
     }
 
-    .badge ::slotted(*) {
+    .badges ::slotted(*) {
+      max-width: 100%;
+      background: var(--tt-card);
+      border-radius: var(--tt-radius-full);
       box-shadow: var(--tt-elevation-1);
     }
 
-    /* ---------- body & typography ---------- */
+    /* ---------- body ---------- */
 
     .body {
       display: flex;
-      flex-direction: column;
       flex: 1;
+      flex-direction: column;
+      gap: var(--tt-space-1);
       min-width: 0;
+      padding: var(--_pad);
     }
 
-    h2 {
+    .heading {
       margin: 0;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
 
-      font-size: var(--_name);
+      color: var(--tt-foreground);
+      font-size: var(--_title);
       font-weight: var(--tt-weight-semibold);
       line-height: var(--tt-leading-snug);
-      letter-spacing: -0.012em;
-      color: var(--tt-foreground);
+      letter-spacing: -0.01em;
       overflow-wrap: break-word;
     }
 
-    .price {
-      display: flex;
-      align-items: baseline;
-      flex-wrap: wrap;
-      gap: var(--tt-space-2);
-      margin-top: var(--_content-gap);
+    .link {
+      margin: 0;
+      padding: 0;
+      border: 0;
+      background: none;
+      color: inherit;
+      font: inherit;
+      letter-spacing: inherit;
+      text-align: inherit;
+      text-decoration: none;
+      cursor: pointer;
+    }
+
+    /* The whole card is the link's hit area. The ring goes round the
+       card, on the same corners. */
+    .link::after {
+      content: "";
+      position: absolute;
+      inset: -1px;
+      z-index: 1;
+      border-radius: var(--_radius);
+    }
 
-      font-size: var(--_price);
-      font-weight: var(--tt-weight-bold);
-      letter-spacing: -0.025em;
-      color: var(--tt-foreground);
-      font-variant-numeric: tabular-nums;
+    .link:focus-visible {
+      outline: none;
     }
 
-    .was {
-      font-size: var(--tt-text-xs);
-      font-weight: var(--tt-weight-regular);
-      text-decoration: line-through;
-      color: var(--tt-muted-foreground);
+    .link:focus-visible::after {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
     }
 
-    p {
-      margin: var(--_content-gap) 0 0;
+    .description {
+      margin: 0;
       display: -webkit-box;
-      -webkit-line-clamp: var(--_desc-lines, 2);
+      -webkit-line-clamp: var(--_lines, 2);
       -webkit-box-orient: vertical;
       overflow: hidden;
 
+      color: var(--tt-muted-foreground);
       font-size: var(--tt-text-sm);
       line-height: var(--tt-leading-snug);
+    }
+
+    .meta {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--tt-space-1) var(--tt-space-2);
+      min-width: 0;
+      margin-top: var(--tt-space-1);
+
       color: var(--tt-muted-foreground);
+      font-size: var(--tt-text-xs);
+      line-height: var(--tt-leading-snug);
     }
 
     .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 {
+      --tt-icon-size: 0.875rem;
       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);
-    }
+    /* ---------- price and actions, pinned to the bottom ---------- */
 
     .foot {
       display: flex;
-      align-items: center;
-      gap: var(--tt-space-2);
-      min-width: 0;
+      flex-direction: column;
+      align-items: stretch;
+      gap: var(--tt-space-3);
       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;
+    /* A row: the price, then the action at the end. Small tiles and
+       rows; it wraps under the price when the row is too narrow. */
+    :host([size="small"]) .foot,
+    :host([orientation="horizontal"]) .foot {
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--tt-space-2) var(--tt-space-3);
     }
 
-    :host([orientation="vertical"][layout="compact"]) .price,
-    :host([orientation="vertical"][layout="compact"]) p {
-      margin-top: 2px;
+    /* A small one keeps the icon beside the price: the old price drops
+       under the new one instead of pushing the button onto a line of its
+       own, so every tile in a row ends the same way. Extra actions of
+       your own may need that line, so then it wraps. */
+    :host([size="small"]) .foot {
+      column-gap: var(--tt-space-2);
     }
 
-    /* ---------- 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([size="small"]) .foot:not(.extra) {
+      flex-wrap: nowrap;
     }
 
-    :host([orientation="vertical"][layout="overlay"]) .media {
+    .price {
       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);
+      min-width: 0;
+      color: var(--tt-foreground);
+      font-size: var(--_price);
+      font-weight: var(--tt-weight-bold);
+      line-height: var(--tt-leading-tight);
+      letter-spacing: -0.02em;
+      font-variant-numeric: tabular-nums;
     }
 
-    :host([orientation="vertical"][layout="overlay"]) p,
-    :host([orientation="vertical"][layout="overlay"]) .rating {
-      color: var(--_on-image-muted);
+    /* The old price drops under the new one when there is no room
+       beside it: a line can break between two inline blocks, and with no
+       space between the spans it could not. Only on a tile too narrow
+       for even one price does a price break inside itself, rather than
+       run out of the card. The gap is on the end of the new price, so a
+       wrapped old price starts flush with it. */
+    .now,
+    .was {
+      display: inline-block;
     }
 
-    /* ---------- horizontal ---------- */
-
-    .row {
-      display: flex;
-      align-items: stretch;
-      min-height: 7rem;
-      width: 100%;
-      overflow: hidden;
-      border-radius: inherit;
+    .now {
+      margin-inline-end: var(--tt-space-2);
     }
 
-    .row .media {
-      flex: 0 0 34%;
-      max-width: 13.75rem;
-      border-radius: 0;
+    /* On sale, the price takes the sale colour; the struck-through old
+       price beside it says the same thing without colour. */
+    .now.sale {
+      color: var(--tt-destructive);
     }
 
-    .column {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-      min-width: 0;
-      padding: var(--tt-space-4);
+    .was {
+      color: var(--tt-muted-foreground);
+      font-size: var(--_was);
+      font-weight: var(--tt-weight-regular);
+      letter-spacing: 0;
+      text-decoration-thickness: 1px;
     }
 
+    /* Above the stretched link: its buttons are targets of their own. */
     .actions {
+      position: relative;
+      z-index: 2;
       display: flex;
+      flex-wrap: wrap;
       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);
+      gap: var(--tt-space-2);
+      min-width: 0;
     }
 
-    :host([orientation="horizontal"][variant="minimal"]) .row {
-      border: 1px solid var(--tt-border);
-      background: var(--tt-card);
+    /* A tile's built-in button takes the width; anything added keeps
+       its own size beside it. */
+    .actions > .action {
+      flex: 1 1 auto;
     }
 
-    :host([orientation="horizontal"][variant="featured"]) .row {
-      min-height: 8.5rem;
+    /* At the end of the row. The built-in button alone is never
+       squeezed: the price gives way first, by wrapping. Your own actions
+       get a line of their own when they need it, and wrap inside it
+       rather than run out of the card. */
+    :host([size="small"]) .actions,
+    :host([orientation="horizontal"]) .actions {
+      justify-content: flex-end;
+      margin-inline-start: auto;
     }
 
-    /* ---------- disabled ---------- */
-
-    :host([disabled]) {
-      opacity: var(--tt-opacity-disabled);
-      pointer-events: none;
+    :host([size="small"]) .foot:not(.extra) .actions,
+    :host([orientation="horizontal"]) .foot:not(.extra) .actions {
+      flex-shrink: 0;
     }
 
-    @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);
-      }
+    :host([size="small"]) .actions > .action,
+    :host([orientation="horizontal"]) .actions > .action {
+      flex: none;
     }
   `]; }
-    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).
+      identical "Add to basket" buttons. The visible text comes first, so
+      the name still starts with what a sighted user sees (WCAG 2.5.3).
     */
     get actionName() {
         return this.heading ? `${this.buttonLabel}, ${this.heading}` : this.buttonLabel;
     }
-    renderQuickAdd() {
+    renderAction() {
+        if (!this.buttonLabel)
+            return nothing;
+        // Small: a round bag icon, so the price keeps its line on a 150px tile.
+        if (this.size === "small") {
+            return html `
+        <tt-button
+          class="action"
+          part="button"
+          variant="secondary"
+          pill
+          label=${this.actionName}
+          ?disabled=${this.disabled}
+          @tt-button-click=${this.handleAction}
+        >
+          <tt-icon name="shopping-bag"></tt-icon>
+        </tt-button>
+      `;
+        }
         return html `
       <tt-button
-        class="quick-add"
+        class="action"
         part="button"
-        pill
-        size="small"
+        variant="secondary"
         label=${this.actionName}
         ?disabled=${this.disabled}
-        @tt-button-click=${this.handleClick}
+        @tt-button-click=${this.handleAction}
       >
-        <tt-icon name="shopping-bag"></tt-icon>
+        ${this.buttonLabel}
       </tt-button>
     `;
     }
-    renderButton() {
+    renderHeading() {
+        if (!this.heading)
+            return nothing;
+        const name = this.url
+            ? html `<a class="link" part="link" href=${this.url}>${this.heading}</a>`
+            : this.clickable
+                ? html `<button class="link" part="link" type="button" @click=${this.handleOpen}>
+            ${this.heading}
+          </button>`
+                : this.heading;
         return html `
-      <tt-button
-        part="button"
-        size="small"
-        label=${this.actionName}
-        ?disabled=${this.disabled}
-        @tt-button-click=${this.handleClick}
-      >
-        ${this.buttonLabel}
-      </tt-button>
+      <div class="heading" part="heading" role="heading" aria-level=${this.headingLevel}>
+        ${name}
+      </div>
+    `;
+    }
+    /*
+      Read as "Sale price EUR 89.00, was EUR 109.00". A strike-through is
+      not announced by screen readers, so without the hidden words the two
+      prices were read as one list of numbers.
+    */
+    renderPrice() {
+        if (!this.price)
+            return nothing;
+        const sale = this.wasPrice !== "";
+        return html `
+      <p class="price" part="price">${sale
+            ? html `<span class="sr-only">Sale price </span>`
+            : nothing}<span class="now ${sale ? "sale" : ""}">${this.price}</span>${sale
+            ? html `<span class="sr-only">, was </span><s class="was">${this.wasPrice}</s>`
+            : nothing}</p>
     `;
     }
     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>
+        const ratio = RATIO.test(this.ratio) ? this.ratio : "1";
+        const showMeta = this.rating !== "" || this.hasMeta;
+        const showActions = this.buttonLabel !== "" || this.hasActions;
+        return html `
+      <div class="card ${this.interactive ? "interactive" : ""}" part="card">
+        <div class="media" part="media" style=${styleMap({ "--_ratio": ratio })}>
+          ${this.src !== "" || !this.hasMedia
+            ? html `<tt-image class="image" part="image" radius="none" src=${this.src} alt=""></tt-image>`
+            : nothing}
+          <slot name="media" @slotchange=${this.onMedia}></slot>
+          <div class="badges"><slot name="badge"></slot></div>
+        </div>
+
+        <div class="body" part="body">
+          ${this.renderHeading()}
+          ${this.description
+            ? html `<p
+                class="description"
+                part="description"
+                style=${styleMap({ "--_lines": String(this.descriptionLines) })}
+              >${this.description}</p>`
+            : nothing}
+
+          <div class="meta" part="meta" ?hidden=${!showMeta}>
+            ${this.rating
+            ? html `<span class="rating" part="rating">
+                  <tt-icon name="star"></tt-icon>
+                  <span class="sr-only">Rating </span>${this.rating}
+                </span>`
+            : nothing}
+            <slot name="meta" @slotchange=${this.onMeta}></slot>
+          </div>
+
+          <div class="foot ${this.hasActions ? "extra" : ""}" ?hidden=${!this.price && !showActions}>
+            ${this.renderPrice()}
+            <div class="actions" part="actions" ?hidden=${!showActions}>
+              ${this.renderAction()}
+              <slot name="actions" @slotchange=${this.onActions}></slot>
             </div>
           </div>
-        </tt-card>
-      `;
-        }
-        return html `
-      <tt-card part="card" padding="small">
-        ${this.renderMedia(true)}
-        ${this.renderBody()}
-      </tt-card>
+        </div>
+      </div>
     `;
     }
 };
-__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: Number, attribute: "heading-level" })
+], TTProduct.prototype, "headingLevel", void 0);
 __decorate([
     property({ type: String })
 ], TTProduct.prototype, "description", void 0);
@@ -571,18 +628,42 @@ __decorate([
 __decorate([
     property({ type: String })
 ], TTProduct.prototype, "rating", void 0);
+__decorate([
+    property({ type: String })
+], TTProduct.prototype, "src", void 0);
+__decorate([
+    property({ type: String })
+], TTProduct.prototype, "ratio", void 0);
 __decorate([
     property({ type: String })
 ], TTProduct.prototype, "value", void 0);
 __decorate([
-    property({ type: String, attribute: "button-link" })
-], TTProduct.prototype, "buttonLink", void 0);
+    property({ type: String })
+], TTProduct.prototype, "href", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTProduct.prototype, "clickable", void 0);
 __decorate([
     property({ type: String, attribute: "button-label" })
 ], TTProduct.prototype, "buttonLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTProduct.prototype, "orientation", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTProduct.prototype, "size", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], TTProduct.prototype, "disabled", void 0);
+__decorate([
+    state()
+], TTProduct.prototype, "hasMedia", void 0);
+__decorate([
+    state()
+], TTProduct.prototype, "hasMeta", void 0);
+__decorate([
+    state()
+], TTProduct.prototype, "hasActions", void 0);
 TTProduct = __decorate([
     customElement("tt-product")
 ], TTProduct);