@tartaguti/ui-components 0.0.0-stage → 0.2.0

package/dist/tt-social-links.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from "lit";
+export type SocialPlatform = "website" | "linkedin" | "facebook" | "instagram" | "x" | "youtube" | "email" | "phone";
+export interface SocialLink {
+    platform: SocialPlatform;
+    url: string;
+    label?: string;
+}
+/**
+ * A row of platform links. Trivial to write once and endlessly repeated,
+ * which is exactly what earns a component.
+ *
+ * `email` and `phone` are in the set on purpose. They are not social
+ * networks, but on a business profile they sit in the same row and behave
+ * the same way, and splitting them into a second component would mean two
+ * rows that have to be styled to look like one.
+ *
+ * Every href goes through safeUrl, because these come from user-entered
+ * profile data. A company that types `javascript:...` into its website
+ * field would otherwise get it rendered as a live link on its own page.
+ */
+export declare class TTSocialLinks extends LitElement {
+    links: SocialLink[];
+    size: "small" | "medium";
+    labelled: boolean;
+    private hrefFor;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-social-links": TTSocialLinks;
+    }
+}
+//# sourceMappingURL=tt-social-links.d.ts.map

package/dist/tt-social-links.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-social-links.d.ts","sourceRoot":"","sources":["../src/tt-social-links.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAMjD,MAAM,MAAM,cAAc,GACtB,SAAS,GACT,UAAU,GACV,UAAU,GACV,WAAW,GACX,GAAG,GACH,SAAS,GACT,OAAO,GACP,OAAO,CAAC;AAEZ,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,cAAc,CAAC;IAEzB,GAAG,EAAE,MAAM,CAAC;IAEZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA2ED;;;;;;;;;;;;GAYG;AACH,qBACa,aAAc,SAAQ,UAAU;IAChB,KAAK,EAAE,UAAU,EAAE,CAAM;IAET,IAAI,EAAE,OAAO,GAAG,QAAQ,CACxD;IAIkB,QAAQ,UAAS;IAE9C,OAAO,CAAC,OAAO;IAmBf,MAAM,CAAC,MAAM,0BAqFX;IAEF,MAAM;CAoCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/tt-social-links.js

@@ -0,0 +1,242 @@
+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, svg, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { safeUrl } from "./safe-url.js";
+/*
+  Brand marks live here rather than in tt-icon, deliberately.
+
+  tt-icon is one set on one grid: 24x24, stroked, 2px, round caps. Brand
+  logos are filled shapes at fixed proportions that cannot be redrawn to
+  that spec without ceasing to be the logo. Mixing them into the set would
+  mean the set no longer has a spec. They are also the one category that
+  belongs to someone else, so they change when the owner changes them.
+*/
+const MARKS = {
+    website: svg `
+    <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2" />
+    <path d="M3 12h18" fill="none" stroke="currentColor" stroke-width="2" />
+    <path d="M12 3a15 15 0 0 1 0 18a15 15 0 0 1 0-18Z" fill="none" stroke="currentColor" stroke-width="2" />
+  `,
+    linkedin: svg `
+    <path
+      d="M4.98 3.5A2.5 2.5 0 1 1 5 8.5a2.5 2.5 0 0 1 0-5ZM3 9h4v12H3V9Zm7 0h3.8v1.7h.05c.53-.95 1.83-1.95 3.75-1.95C21.4 8.75 22 11 22 14v7h-4v-6.2c0-1.5 0-3.4-2.1-3.4s-2.4 1.6-2.4 3.3V21h-4V9Z"
+    />
+  `,
+    facebook: svg `
+    <path
+      d="M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0 0 22 12Z"
+    />
+  `,
+    instagram: svg `
+    <rect x="3" y="3" width="18" height="18" rx="5" fill="none" stroke="currentColor" stroke-width="2" />
+    <circle cx="12" cy="12" r="4" fill="none" stroke="currentColor" stroke-width="2" />
+    <circle cx="17.5" cy="6.5" r="1.2" />
+  `,
+    x: svg `
+    <path
+      d="M17.5 3h3.2l-7 8 8.2 10h-6.4l-5-6.1L4.7 21H1.5l7.5-8.6L1.2 3h6.6l4.5 5.6L17.5 3Zm-1.1 16.1h1.8L7.7 4.8H5.8l10.6 14.3Z"
+    />
+  `,
+    youtube: svg `
+    <path
+      d="M22.5 7.2a2.7 2.7 0 0 0-1.9-1.9C18.9 4.8 12 4.8 12 4.8s-6.9 0-8.6.5A2.7 2.7 0 0 0 1.5 7.2 28 28 0 0 0 1 12a28 28 0 0 0 .5 4.8 2.7 2.7 0 0 0 1.9 1.9c1.7.5 8.6.5 8.6.5s6.9 0 8.6-.5a2.7 2.7 0 0 0 1.9-1.9A28 28 0 0 0 23 12a28 28 0 0 0-.5-4.8ZM9.8 15.3V8.7l5.7 3.3-5.7 3.3Z"
+    />
+  `,
+    email: svg `
+    <rect x="2" y="4" width="20" height="16" rx="2" fill="none" stroke="currentColor" stroke-width="2" />
+    <path d="m2 7 10 6 10-6" fill="none" stroke="currentColor" stroke-width="2" />
+  `,
+    phone: svg `
+    <path
+      d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.1a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linejoin="round"
+    />
+  `,
+};
+const NAMES = {
+    website: "Website",
+    linkedin: "LinkedIn",
+    facebook: "Facebook",
+    instagram: "Instagram",
+    x: "X",
+    youtube: "YouTube",
+    email: "Email",
+    phone: "Phone",
+};
+/**
+ * A row of platform links. Trivial to write once and endlessly repeated,
+ * which is exactly what earns a component.
+ *
+ * `email` and `phone` are in the set on purpose. They are not social
+ * networks, but on a business profile they sit in the same row and behave
+ * the same way, and splitting them into a second component would mean two
+ * rows that have to be styled to look like one.
+ *
+ * Every href goes through safeUrl, because these come from user-entered
+ * profile data. A company that types `javascript:...` into its website
+ * field would otherwise get it rendered as a live link on its own page.
+ */
+let TTSocialLinks = class TTSocialLinks extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.links = [];
+        this.size = "medium";
+        // Show the platform name beside the mark, for a contact block rather
+        // than a compact row of icons.
+        this.labelled = false;
+    }
+    hrefFor(link) {
+        if (link.platform === "email") {
+            // mailto: is on safeUrl's allowlist, so this survives the check.
+            return safeUrl(link.url.startsWith("mailto:") ? link.url : `mailto:${link.url}`);
+        }
+        if (link.platform === "phone") {
+            return safeUrl(link.url.startsWith("tel:")
+                ? link.url
+                : `tel:${link.url.replace(/[^\d+]/g, "")}`);
+        }
+        return safeUrl(link.url);
+    }
+    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);
+    }
+
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--tt-space-2);
+
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    /* Real anchors, so middle-click and cmd-click open a new tab and the
+       browser shows the destination on hover. A button pretending to be a
+       link takes all of that away. */
+    a {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--tt-space-2);
+
+      width: var(--tt-control-sm);
+      height: var(--tt-control-sm);
+
+      border: 1px solid var(--tt-border);
+      border-radius: var(--tt-radius-full);
+
+      color: var(--tt-muted-foreground);
+      text-decoration: none;
+
+      transition:
+        color var(--tt-duration-fast) var(--tt-ease),
+        border-color var(--tt-duration-fast) var(--tt-ease),
+        background var(--tt-duration-fast) var(--tt-ease);
+    }
+
+    :host([size="small"]) a {
+      width: 28px;
+      height: 28px;
+    }
+
+    /* Labelled turns the circle into a pill, so the name has room. */
+    :host(:not([size="small"])) .labelled a,
+    .labelled a {
+      width: auto;
+      padding: 0 var(--tt-space-3);
+      border-radius: var(--tt-radius-full);
+      font-size: var(--tt-text-sm);
+    }
+
+    a:hover {
+      color: var(--tt-foreground);
+      border-color: var(--tt-border-strong);
+      background: var(--tt-accent);
+    }
+
+    a:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+    }
+
+    svg {
+      display: block;
+      width: 16px;
+      height: 16px;
+      flex: 0 0 auto;
+      fill: currentColor;
+    }
+
+    :host([size="small"]) svg {
+      width: 14px;
+      height: 14px;
+    }
+
+  `; }
+    render() {
+        return html `
+      <ul class=${this.labelled ? "labelled" : ""} part="list">
+        ${this.links.map((link) => {
+            const href = this.hrefFor(link);
+            // A rejected URL renders nothing at all. Showing a dead link is
+            // worse than showing no link.
+            if (!href)
+                return "";
+            const name = link.label ?? NAMES[link.platform];
+            return html `
+            <li>
+              <a
+                part="link"
+                href=${href}
+                target=${link.platform === "email" || link.platform === "phone"
+                ? "_self"
+                : "_blank"}
+                rel="noopener noreferrer"
+                title=${name}
+                aria-label=${name}
+              >
+                <svg viewBox="0 0 24 24" aria-hidden="true">
+                  ${MARKS[link.platform]}
+                </svg>
+
+                ${this.labelled ? html `<span>${name}</span>` : ""}
+              </a>
+            </li>
+          `;
+        })}
+      </ul>
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], TTSocialLinks.prototype, "links", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTSocialLinks.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTSocialLinks.prototype, "labelled", void 0);
+TTSocialLinks = __decorate([
+    customElement("tt-social-links")
+], TTSocialLinks);
+export { TTSocialLinks };
+//# sourceMappingURL=tt-social-links.js.map

package/dist/tt-social-links.js.map

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

package/dist/tt-sparkline.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from "lit";
+export type SparklineTrend = "positive" | "negative" | "neutral";
+export declare class TTSparkline extends LitElement {
+    points: number[];
+    area: boolean;
+    trend: SparklineTrend;
+    label: string;
+    private get coordinates();
+    private get linePath();
+    private get areaPath();
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-sparkline": TTSparkline;
+    }
+}
+//# sourceMappingURL=tt-sparkline.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-sparkline.d.ts","sourceRoot":"","sources":["../src/tt-sparkline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAIjD,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AAEjE,qBACa,WAAY,SAAQ,UAAU;IACd,MAAM,EAAE,MAAM,EAAE,CAAM;IAGpB,IAAI,UAAS;IAMC,KAAK,EAAE,cAAc,CAAa;IAIjD,KAAK,SAAM;IAcvC,OAAO,KAAK,WAAW,GAgBtB;IAED,OAAO,KAAK,QAAQ,GAInB;IAGD,OAAO,KAAK,QAAQ,GAInB;IAED,MAAM,CAAC,MAAM,0BAsEX;IAEF,MAAM;CAyCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/dist/tt-sparkline.js

@@ -0,0 +1,191 @@
+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, svg } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+let TTSparkline = class TTSparkline extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.points = [];
+        // Fill the area under the line. Reads as volume rather than rate.
+        this.area = false;
+        // Same vocabulary as tt-stat: sentiment, not direction. A falling
+        // refund rate is positive. Reflected because the colour comes from
+        // :host([trend]) selectors, which only see attributes: set as a
+        // property without reflect, the line stayed grey.
+        this.trend = "neutral";
+        // Accessible summary. Without one the chart is invisible to a screen
+        // reader, since an SVG of a path means nothing on its own.
+        this.label = "";
+    }
+    /*
+      The maths, all of it.
+  
+      The viewBox is a fixed 0..100 box and preserveAspectRatio="none" lets
+      it stretch to whatever size the host is. So the only job here is
+      turning values into percentages:
+  
+        x  =  index / (count - 1) * 100
+        y  =  100 - (value - min) / (max - min) * 100
+  
+      y is inverted because SVG counts downward from the top.
+    */
+    get coordinates() {
+        const values = this.points;
+        if (values.length < 2)
+            return [];
+        const min = Math.min(...values);
+        const max = Math.max(...values);
+        // All values equal: no range to scale against, so draw it flat.
+        const range = max - min || 1;
+        const flat = max === min;
+        return values.map((value, index) => {
+            const x = (index / (values.length - 1)) * 100;
+            const y = flat ? 50 : 100 - ((value - min) / range) * 100;
+            return [x, y];
+        });
+    }
+    get linePath() {
+        return this.coordinates
+            .map(([x, y], i) => `${i === 0 ? "M" : "L"}${x.toFixed(2)} ${y.toFixed(2)}`)
+            .join(" ");
+    }
+    // The line, then down to the baseline and back, closing the shape.
+    get areaPath() {
+        const line = this.linePath;
+        if (!line)
+            return "";
+        return `${line} L100 100 L0 100 Z`;
+    }
+    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 {
+      /* Positioning context for the end dot. */
+      position: relative;
+
+      display: block;
+      width: 100%;
+      height: 40px;
+
+      /* One variable drives stroke and fill, so a trend overrides one
+         value rather than several rules. */
+      --_color: var(--tt-muted-foreground);
+    }
+
+    :host([trend="positive"]) {
+      --_color: var(--tt-success);
+    }
+
+    :host([trend="negative"]) {
+      --_color: var(--tt-destructive);
+    }
+
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      overflow: visible;
+    }
+
+    .line {
+      fill: none;
+      stroke: var(--_color);
+      stroke-width: 1.5;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    .area {
+      fill: var(--_color);
+      opacity: 0.12;
+      stroke: none;
+    }
+
+    /*
+      The end dot is HTML, not an SVG circle. preserveAspectRatio="none"
+      stretches everything inside the SVG, a circle included, so at
+      300x40 the old r="2" circle drew as an oval 6px wide and under 1px
+      tall. A span placed by percentage keeps the same coordinates and
+      stays round at any size.
+    */
+    .dot {
+      --_size: 5px;
+
+      position: absolute;
+      width: var(--_size);
+      height: var(--_size);
+
+      border-radius: var(--tt-radius-full);
+      background: var(--_color);
+
+      /* left/top place the CENTRE on the last point, not the corner. */
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+    }
+  `; }
+    render() {
+        const coords = this.coordinates;
+        // Fewer than two points is not a trend. Render nothing rather than
+        // a misleading dot or an empty box with a stray line.
+        if (coords.length === 0)
+            return html ``;
+        const last = coords[coords.length - 1];
+        return html `
+      <svg
+        part="chart"
+        viewBox="0 0 100 100"
+        preserveAspectRatio="none"
+        role="img"
+        aria-label=${this.label || "Trend"}
+      >
+        ${this.area
+            ? svg `<path class="area" d=${this.areaPath} />`
+            : ""}
+
+        <!--
+          vector-effect keeps the stroke an even width. Without it,
+          preserveAspectRatio="none" stretches the line thickness along
+          with the geometry and it looks wrong at wide sizes.
+        -->
+        ${svg `<path
+          class="line"
+          d=${this.linePath}
+          vector-effect="non-scaling-stroke"
+        />`}
+      </svg>
+
+      <span
+        class="dot"
+        part="dot"
+        aria-hidden="true"
+        style=${styleMap({ left: `${last[0]}%`, top: `${last[1]}%` })}
+      ></span>
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], TTSparkline.prototype, "points", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTSparkline.prototype, "area", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTSparkline.prototype, "trend", void 0);
+__decorate([
+    property({ type: String })
+], TTSparkline.prototype, "label", void 0);
+TTSparkline = __decorate([
+    customElement("tt-sparkline")
+], TTSparkline);
+export { TTSparkline };
+//# sourceMappingURL=tt-sparkline.js.map

package/dist/tt-sparkline.js.map

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

package/dist/tt-spinner.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from "lit";
+/**
+ * Indeterminate loading indicator, for when you cannot say how long
+ * something will take. Prefer tt-skeleton when you know the shape of what
+ * is coming: a skeleton tells the user what to expect, a spinner only
+ * tells them to wait.
+ */
+export declare class TTSpinner extends LitElement {
+    size: string;
+    label: string;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-spinner": TTSpinner;
+    }
+}
+//# sourceMappingURL=tt-spinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-spinner.d.ts","sourceRoot":"","sources":["../src/tt-spinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C;;;;;GAKG;AACH,qBACa,SAAU,SAAQ,UAAU;IAEX,IAAI,SAAU;IAEd,KAAK,SAAa;IAE9C,MAAM,CAAC,MAAM,4BAiCV;IAEH,MAAM;CAwBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/tt-spinner.js

@@ -0,0 +1,93 @@
+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 { styleMap } from "lit/directives/style-map.js";
+import { srOnly } from "./sr-only.js";
+/**
+ * Indeterminate loading indicator, for when you cannot say how long
+ * something will take. Prefer tt-skeleton when you know the shape of what
+ * is coming: a skeleton tells the user what to expect, a spinner only
+ * tells them to wait.
+ */
+let TTSpinner = class TTSpinner extends LitElement {
+    constructor() {
+        super(...arguments);
+        // Any CSS length. Inherits currentColor, so it matches its surroundings.
+        this.size = "20px";
+        this.label = "Loading";
+    }
+    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: inline-flex;
+      flex: 0 0 auto;
+      color: currentColor;
+    }
+
+    .spinner {
+      /* The fallback is the default size, for a size that was dropped. */
+      width: var(--_size, 20px);
+      height: var(--_size, 20px);
+
+      border: 2px solid currentColor;
+      border-top-color: transparent;
+      border-radius: var(--tt-radius-full);
+
+      opacity: 0.85;
+
+      animation: spin var(--tt-duration-spin) linear infinite;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+  `]; }
+    render() {
+        return html `
+      <!--
+        The label as TEXT inside the status, not as aria-label on it. A
+        live region announces its content, and aria-label is not content,
+        so "Loading" was never spoken.
+
+        A size of "20px; position: fixed" used to add a second
+        declaration. styleMap sets one property per key, but joins them on
+        its first render, so the size must also be one valid length; see
+        the same guard in tt-skeleton.
+      -->
+      <div
+        class="spinner"
+        part="spinner"
+        style=${styleMap({
+            "--_size": CSS.supports("width", this.size) ? this.size : undefined,
+        })}
+        role="status"
+      >
+        <span class="sr-only">${this.label}</span>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TTSpinner.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], TTSpinner.prototype, "label", void 0);
+TTSpinner = __decorate([
+    customElement("tt-spinner")
+], TTSpinner);
+export { TTSpinner };
+//# sourceMappingURL=tt-spinner.js.map

package/dist/tt-spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-spinner.js","sourceRoot":"","sources":["../src/tt-spinner.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;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAEtC;;;;;GAKG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QACL,yEAAyE;QAC7C,SAAI,GAAG,MAAM,CAAC;QAEd,UAAK,GAAG,SAAS,CAAC;IA6DhD,CAAC;aA3DQ,WAAM,GAAG,CAAC,MAAM,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiC3B,CAAC,AAjCW,CAiCV;IAEH,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;gBAcC,QAAQ,CAAC;YACf,SAAS,EAAE,GAAG,CAAC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;SACpE,CAAC;;;gCAGsB,IAAI,CAAC,KAAK;;KAErC,CAAC;IACJ,CAAC;;AA9D2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAe;AAEd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAmB;AAJnC,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAiErB"}

package/dist/tt-stack.d.ts

@@ -0,0 +1,42 @@
+import { LitElement } from "lit";
+export type StackOrientation = "vertical" | "horizontal";
+export type StackGap = "none" | "small" | "medium" | "large";
+export type StackAlign = "start" | "center" | "end" | "stretch";
+export type StackJustify = "start" | "center" | "end" | "between";
+/**
+ * Lays its children out in a column or a row, with a gap from the
+ * spacing scale.
+ *
+ * The layout every screen repeats, and the library had no general one:
+ * tt-grid is a responsive grid, tt-toolbar a row with two sides,
+ * tt-button-group joins controls into one unit. So the apps wrote their
+ * own `display: flex; gap: ...` in some 26 files, with the same gap
+ * spelled 0.75rem in one and 12px in the next. A stack can only take a
+ * step of the scale, and because the steps are tokens, a stack also
+ * follows the density modes, which a hand-written 12px never will.
+ *
+ * THE HOST IS THE FLEX CONTAINER. The shadow root holds only a slot, and
+ * a slot is display: contents, so the slotted children become flex items
+ * of the host itself. With no inner wrapper there is nothing to reach
+ * through: a consumer's own `gap` or `flex-wrap` on the element simply
+ * wins, because a rule from outside beats :host.
+ *
+ * No reverse option, on purpose. A row drawn in the opposite order to
+ * its markup is read and tabbed through backwards by keyboard and screen
+ * reader users. Reorder the markup instead.
+ */
+export declare class TTStack extends LitElement {
+    orientation: StackOrientation;
+    gap: StackGap;
+    align: StackAlign;
+    justify: StackJustify;
+    wrap: boolean;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-stack": TTStack;
+    }
+}
+//# sourceMappingURL=tt-stack.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-stack.d.ts","sourceRoot":"","sources":["../src/tt-stack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,YAAY,CAAC;AACzD,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC7D,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAChE,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAElE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,OAAQ,SAAQ,UAAU;IAOrC,WAAW,EAAE,gBAAgB,CAAc;IAEA,GAAG,EAAE,QAAQ,CAAY;IAGzB,KAAK,EAAE,UAAU,CAAa;IAI9B,OAAO,EAAE,YAAY,CAAW;IAG/B,IAAI,UAAS;IAEzD,MAAM,CAAC,MAAM,0BAqFX;IAEF,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}