@tartaguti/ui-components 0.1.0 → 0.3.0

package/dist/sidebar/tt-sidebar.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, css, nothing } from "lit";
 import { property, state, customElement } from "lit/decorators.js";
+import { afterTransitions } from "../motion.js";
 import "../tt-icon.js";
 /**
  * The navigation column of an app shell.
@@ -37,11 +38,11 @@ import "../tt-icon.js";
  * as --tt-radius-nested in tokens.css.
  *
  * They are declared in the stylesheet under :host([collapsed]) rather
- * than written from JavaScript, and that matters: a media query can
+ * than written from JavaScript, and that matters: a container query can
  * override a stylesheet rule, and cannot override an inline style. It is
  * what lets the block at the bottom of this file switch the whole rail
- * off on a phone, where the sidebar is a drawer and a rail would be an
- * unusable 64px strip sliding over the page.
+ * off in tt-layout's drawer on a phone, where a rail would be an unusable
+ * 64px strip sliding over the page.
  *
  * ---------------------------------------------------------------------
  * WHO OWNS `collapsed`.
@@ -61,6 +62,18 @@ let TTSidebar = class TTSidebar extends LitElement {
         // Shows the collapse control. Without it the sidebar cannot be shrunk.
         this.collapsible = false;
         this.collapsed = false;
+        /*
+          Pinned to the screen, the way an app's sidebar behaves: exactly one
+          screen tall, it stays put while the page scrolls beside it, and its
+          own menu scrolls when it is longer than the screen. So the footer
+          sits at the bottom and the collapse arrow is always in reach.
+      
+          Without it the sidebar is as tall as whatever holds it, and in a row
+          beside a page that is the page: a long page pushed the footer and
+          the arrow below the fold, and a short one ended the column halfway
+          down. Reflected, because the styles match on it.
+        */
+        this.sticky = false;
         /*
           The name of the navigation landmark. A screen reader lists landmarks,
           and "navigation" repeated twice on a page with a navbar tells the
@@ -71,6 +84,13 @@ let TTSidebar = class TTSidebar extends LitElement {
         this.expandLabel = "Expand sidebar";
         this.hasHeader = false;
         this.hasFooter = false;
+        /*
+          True while the panel widens from the rail, and only then. See the pin
+          in the styles: it holds the content at its final width during the
+          slide, and holding it any longer clipped a sidebar with less room
+          than its width.
+        */
+        this.sliding = false;
     }
     /** Flips the rail open or shut, and announces it. */
     toggle() {
@@ -82,6 +102,12 @@ let TTSidebar = class TTSidebar extends LitElement {
         }));
     }
     willUpdate(changed) {
+        // Not on the first render: a sidebar that arrives open has nothing
+        // to slide from.
+        if (changed.has("collapsed") && this.hasUpdated) {
+            this.stopSliding?.();
+            this.sliding = !this.collapsed;
+        }
         if (changed.has("width")) {
             this.style.setProperty("--tt-sidebar-width", `${this.width}px`);
         }
@@ -89,6 +115,24 @@ let TTSidebar = class TTSidebar extends LitElement {
             this.style.setProperty("--tt-sidebar-rail-width", `${this.railWidth}px`);
         }
     }
+    updated(changed) {
+        /*
+          A timer read from the transition's own duration rather than
+          transitionend, which never fires for a slide that never starts (a
+          width capped the same open and shut, or a tab in the background).
+          Reduced motion makes the duration 1ms, so the pin goes at once.
+        */
+        if (changed.has("collapsed") && this.sliding) {
+            this.stopSliding = afterTransitions([this], () => {
+                this.sliding = false;
+            });
+        }
+    }
+    disconnectedCallback() {
+        this.stopSliding?.();
+        this.sliding = false;
+        super.disconnectedCallback();
+    }
     updateSlot(prop, event) {
         const slot = event.target;
         this[prop] = slot
@@ -112,6 +156,13 @@ let TTSidebar = class TTSidebar extends LitElement {
       box-sizing: border-box;
       overflow: hidden;
 
+      /* The width it was given is the width it wants. In a row a flex
+         item shrinks by default, and overflow: hidden lets it shrink to
+         a sliver with every label cut to an ellipsis, so the content
+         beside it gives way instead. max-width still keeps it inside a
+         column narrower than it. */
+      flex-shrink: 0;
+
       font-family: var(--tt-font-sans);
       -webkit-font-smoothing: antialiased;
 
@@ -123,6 +174,47 @@ let TTSidebar = class TTSidebar extends LitElement {
       transition: width var(--tt-duration-normal) var(--tt-ease-out);
     }
 
+    /* ---- sticky ----
+
+       One screen tall and pinned to the top of it. The screen is 100dvh,
+       the height that follows a phone's address bar as it comes and
+       goes, unless --tt-viewport-height says otherwise: a builder canvas
+       draws a screen smaller than its own window, and sets it to that.
+
+       align-self keeps a row from stretching it to the row's height,
+       which is the page's height, so it cannot grow past the screen.
+       Not in tt-layout's sidebar slot: the layout pins its own column,
+       and a second pin inside it would be taller than the column.
+
+       Not on a phone either. There a sidebar that is shown at all sits
+       above the page, and a screen-tall pinned block above the page
+       covers the page. A phone is a window under 768px, or a box under
+       768px around it (a container query, so a builder canvas drawing
+       a phone in a wide window gets it right too). */
+
+    :host([sticky]:not([slot="sidebar"])) {
+      position: sticky;
+      top: 0;
+      align-self: flex-start;
+      height: var(--tt-viewport-height, 100dvh);
+    }
+
+    @media (width < 768px) {
+      :host([sticky]:not([slot="sidebar"])) {
+        position: static;
+        align-self: auto;
+        height: 100%;
+      }
+    }
+
+    @container (width < 768px) {
+      :host([sticky]:not([slot="sidebar"])) {
+        position: static;
+        align-self: auto;
+        height: 100%;
+      }
+    }
+
     /* ---- the collapsed channel ----
 
        See the note at the top of this file. Values here, fallbacks in the
@@ -181,18 +273,27 @@ let TTSidebar = class TTSidebar extends LitElement {
       has to ellipsis its way in: D..., Dash..., Dashboa..., Dashboard.
       Same chewing as before, just at full opacity.
 
-      So while a collapsible sidebar is open, the content is pinned to the
-      width it will end at, and the host's overflow:hidden clips it. The
-      text is laid out ONCE, at its real size, and the panel slides off it
-      rather than squeezing it.
+      So while a collapsible sidebar slides open, the content is pinned to
+      the width it will end at, and the host's overflow:hidden clips it.
+      The text is laid out ONCE, at its real size, and the panel slides
+      off it rather than squeezing it.
 
-      Only on a collapsible sidebar, and only while it is open, so a
-      sidebar in a container narrower than its own width is unaffected.
+      Only DURING the slide (.sliding, set by willUpdate and cleared when
+      the transition has run). It used to stay for as long as the sidebar
+      was open, and wherever the sidebar had less room than its width (a
+      narrow column, a phone, the floating inset) the right-hand side of
+      every row and the collapse arrow were clipped for good.
     */
-    :host([collapsible]:not([collapsed])) nav {
+    :host([collapsible]:not([collapsed])) nav.sliding {
       min-width: var(--tt-sidebar-width, 240px);
     }
 
+    /* The floating panel is inset on both sides, so its final width is
+       the sidebar's less the two margins. */
+    :host([collapsible]:not([collapsed])) nav.floating.sliding {
+      min-width: calc(var(--tt-sidebar-width, 240px) - var(--tt-space-4));
+    }
+
     /* A rail is mostly padding if it keeps the full gutter, and the icons
        stop looking centred. */
     :host([collapsed]) nav {
@@ -259,7 +360,6 @@ let TTSidebar = class TTSidebar extends LitElement {
       scrollbar-color: transparent transparent;
     }
 
-    :host(:hover) .content,
     .content:focus-within {
       scrollbar-color: color-mix(
           in oklab,
@@ -269,6 +369,18 @@ let TTSidebar = class TTSidebar extends LitElement {
         transparent;
     }
 
+    /* Hover only where there is a pointer to hover with. */
+    @media (hover: hover) {
+      :host(:hover) .content {
+        scrollbar-color: color-mix(
+            in oklab,
+            var(--tt-sidebar-foreground) 25%,
+            transparent
+          )
+          transparent;
+      }
+    }
+
     .content::-webkit-scrollbar {
       width: 6px;
     }
@@ -280,7 +392,6 @@ let TTSidebar = class TTSidebar extends LitElement {
       transition: background var(--tt-duration-fast) var(--tt-ease-out);
     }
 
-    :host(:hover) .content::-webkit-scrollbar-thumb,
     .content:focus-within::-webkit-scrollbar-thumb {
       background: color-mix(
         in oklab,
@@ -289,6 +400,16 @@ let TTSidebar = class TTSidebar extends LitElement {
       );
     }
 
+    @media (hover: hover) {
+      :host(:hover) .content::-webkit-scrollbar-thumb {
+        background: color-mix(
+          in oklab,
+          var(--tt-sidebar-foreground) 22%,
+          transparent
+        );
+      }
+    }
+
     .content::-webkit-scrollbar-track {
       background: transparent;
     }
@@ -351,22 +472,33 @@ let TTSidebar = class TTSidebar extends LitElement {
       Collapsed is unconditional: once the labels are gone this button is
       the only route back, so hiding it would be a trap.
     */
-    :host(:hover) .rail,
     :host(:focus-within) .rail,
     :host([collapsed]) .rail {
       opacity: 1;
     }
 
+    @media (hover: hover) {
+      :host(:hover) .rail {
+        opacity: 1;
+      }
+    }
+
     @media (hover: none) {
       .rail {
         opacity: 1;
       }
     }
 
-    .rail:hover {
-      border-color: var(--tt-sidebar-border);
-      background: var(--tt-sidebar-accent);
-      color: var(--tt-sidebar-accent-foreground);
+    /* Only where there is a real pointer. A tap on a touch screen leaves
+       :hover on whatever was tapped until the next tap elsewhere, so the
+       arrow kept its filled circle after it was pressed and looked stuck
+       down. */
+    @media (hover: hover) {
+      .rail:hover {
+        border-color: var(--tt-sidebar-border);
+        background: var(--tt-sidebar-accent);
+        color: var(--tt-sidebar-accent-foreground);
+      }
     }
 
     .rail:focus-visible {
@@ -393,18 +525,39 @@ let TTSidebar = class TTSidebar extends LitElement {
       display: none;
     }
 
-    /* ---- mobile ----
-
-       On a phone this element is not a column beside the page, it is a
-       drawer sliding over it (see tt-layout). A rail there would be a
-       64px strip covering the screen with no labels, so the whole
-       collapsed state is switched off and the drawer is always full
-       width. This works only because the channel above is declared in a
-       stylesheet: an inline style written from JavaScript could not be
-       overridden here. */
+    /* ---- in tt-layout's drawer ----
+
+       tt-layout shows its sidebar slot as a drawer sliding over the page
+       at 768px and below. A rail there would be a 64px strip covering the
+       screen with no labels, so in that drawer the whole collapsed state
+       is switched off and the drawer is always full width. This works
+       only because the channel above is declared in a stylesheet: an
+       inline style written from JavaScript could not be overridden here.
+       The breakpoint is tt-layout's own (below 768px of its width).
+
+       Only in that slot. This block used to apply to every window up to
+       768px, as if every sidebar were a drawer there, and anywhere else
+       (a column beside the content, the component builder, a generated
+       page) a phone lost the arrow and the rail, which is where a rail
+       saves the most room.
+
+       A container query, not a media query, and the container is
+       tt-layout itself: the drawer is the LAYOUT's decision, made on its
+       own width, so the sidebar has to ask the same question or the two
+       disagree. They did, inside the component builder, where a phone is
+       drawn in a window as wide as a desktop's. Below 768px, so a 768px
+       tablet keeps the column. */
+
+    @container (width < 768px) {
+      /* Nothing to animate in a drawer, and Firefox styles a new layout
+         once without the container query and once with it, then slid
+         the width from the rail's to the drawer's as the page loaded. */
+      :host([slot="sidebar"]),
+      :host([slot="sidebar"]) nav {
+        transition: none;
+      }
 
-    @media (max-width: 768px) {
-      :host([collapsed]) {
+      :host([slot="sidebar"][collapsed]) {
         width: var(--tt-sidebar-width, 240px);
 
         --tt-menu-label-cols: 1fr;
@@ -423,28 +576,20 @@ let TTSidebar = class TTSidebar extends LitElement {
         --tt-rail-justify: initial;
       }
 
-      /*
-        The pin above exists to stop the content reflowing DURING a width
-        animation, and on a phone there is no width animation: the drawer
-        is always full width. Left in, it would push the content past a
-        drawer narrower than 240px and clip the right-hand side of every
-        row.
-      */
-      :host([collapsible]:not([collapsed])) nav {
-        min-width: 0;
-      }
-
-      :host([collapsed]) nav {
+      :host([slot="sidebar"][collapsed]) nav {
         padding: var(--tt-space-4);
       }
 
-      :host([collapsed]) .rail tt-icon {
-        transform: none;
+      /* No slide to pin for: the drawer is the same width open or shut,
+         and the pin would push the rows past a drawer narrower than the
+         sidebar's width until the timer ran out. */
+      :host([slot="sidebar"][collapsible]:not([collapsed])) nav.sliding {
+        min-width: 0;
       }
 
       /* The drawer is already the full width it can be, so there is
          nothing for this button to do. */
-      .rail {
+      :host([slot="sidebar"]) .rail-row {
         display: none;
       }
     }
@@ -455,6 +600,7 @@ let TTSidebar = class TTSidebar extends LitElement {
             : this.variant === "floating"
                 ? "floating"
                 : "";
+        const classes = [variant, this.sliding ? "sliding" : ""].join(" ").trim();
         /*
           The name is the whole control now that the text is gone, so it does
           double duty: the accessible name AND the tooltip. An arrow with no
@@ -462,7 +608,7 @@ let TTSidebar = class TTSidebar extends LitElement {
         */
         const railName = this.collapsed ? this.expandLabel : this.collapseLabel;
         return html `
-      <nav class=${variant} aria-label=${this.label}>
+      <nav class=${classes} aria-label=${this.label}>
         <div class="header" ?hidden=${!this.hasHeader}>
           <slot
             name="header"
@@ -517,6 +663,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], TTSidebar.prototype, "collapsed", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTSidebar.prototype, "sticky", void 0);
 __decorate([
     property({ type: String })
 ], TTSidebar.prototype, "label", void 0);
@@ -532,6 +681,9 @@ __decorate([
 __decorate([
     state()
 ], TTSidebar.prototype, "hasFooter", void 0);
+__decorate([
+    state()
+], TTSidebar.prototype, "sliding", void 0);
 TTSidebar = __decorate([
     customElement("tt-sidebar")
 ], TTSidebar);

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

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

package/dist/strings.d.ts

@@ -0,0 +1,64 @@
+import type { ReactiveController, ReactiveControllerHost } from "lit";
+export interface TTStrings {
+    /** tt-company-card's verified mark. */
+    verified: string;
+    /** Close buttons: tt-modal, tt-drawer. */
+    close: string;
+    /** tt-navbar's menu button. */
+    openMenu: string;
+    closeMenu: string;
+    /** tt-pagination's landmark name. */
+    pagination: string;
+    /** tt-combobox's clear button. */
+    clearSelection: string;
+    /** tt-combobox and tt-select with several chosen, "3 selected". */
+    selectedCount: string;
+    /** Removes one chosen value in a multiple tt-combobox. */
+    removeValue: string;
+    /** tt-file-upload. */
+    chosenFiles: string;
+    removeFile: string;
+    uploading: string;
+    uploaded: string;
+    uploadFailed: string;
+    retry: string;
+    /** tt-dropdown-menu's default label, and a data-table row's menu. */
+    actions: string;
+    actionsFor: string;
+    /** tt-contact-list. */
+    primaryContact: string;
+    whatsapp: string;
+    /** tt-inbox, read by screen readers next to an unread message. */
+    unread: string;
+    /** What tt-form puts on a control that fails a check. */
+    required: string;
+    requiredCheck: string;
+    requiredChoice: string;
+    requiredFile: string;
+    invalid: string;
+}
+export declare const DEFAULT_STRINGS: Readonly<TTStrings>;
+/** Replaces some of the library's own text, for every component on the page. */
+export declare function setStrings(overrides: Partial<TTStrings>): void;
+/** Back to the English defaults. */
+export declare function resetStrings(): void;
+export declare function getStrings(): Readonly<TTStrings>;
+/** "Remove {name}" with { name: "a.pdf" } gives "Remove a.pdf". */
+export declare function fillIn(text: string, values: Record<string, string | number>): string;
+/** A component that shows library text, and may override it per instance. */
+export interface StringsHost extends ReactiveControllerHost {
+    strings?: Partial<TTStrings>;
+}
+/**
+ * Gives a component its text: its own `strings` first, then setStrings(),
+ * then English. Re-renders the component when setStrings() is called.
+ */
+export declare class StringsController implements ReactiveController {
+    private host;
+    constructor(host: StringsHost);
+    private changed;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    get(key: keyof TTStrings, values?: Record<string, string | number>): string;
+}
+//# sourceMappingURL=strings.d.ts.map

package/dist/strings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"strings.d.ts","sourceRoot":"","sources":["../src/strings.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAkBtE,MAAM,WAAW,SAAS;IACxB,uCAAuC;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,cAAc,EAAE,MAAM,CAAC;IACvB,mEAAmE;IACnE,aAAa,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,WAAW,EAAE,MAAM,CAAC;IACpB,sBAAsB;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,kEAAkE;IAClE,MAAM,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAC,SAAS,CAyB9C,CAAC;AAOH,gFAAgF;AAChF,wBAAgB,UAAU,CAAC,SAAS,EAAE,OAAO,CAAC,SAAS,CAAC,QAGvD;AAED,oCAAoC;AACpC,wBAAgB,YAAY,SAE3B;AAED,wBAAgB,UAAU,IAAI,QAAQ,CAAC,SAAS,CAAC,CAEhD;AAED,mEAAmE;AACnE,wBAAgB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,GAAG,MAAM,CAIpF;AAED,6EAA6E;AAC7E,MAAM,WAAW,WAAY,SAAQ,sBAAsB;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;GAGG;AACH,qBAAa,iBAAkB,YAAW,kBAAkB;IAC9C,OAAO,CAAC,IAAI;gBAAJ,IAAI,EAAE,WAAW;IAIrC,OAAO,CAAC,OAAO,CAAmC;IAElD,aAAa;IAIb,gBAAgB;IAIhB,GAAG,CAAC,GAAG,EAAE,MAAM,SAAS,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,GAAG,MAAM;CAI5E"}

package/dist/strings.js

@@ -0,0 +1,68 @@
+export const DEFAULT_STRINGS = Object.freeze({
+    verified: "Verified",
+    close: "Close",
+    openMenu: "Open menu",
+    closeMenu: "Close menu",
+    pagination: "Pagination",
+    clearSelection: "Clear selection",
+    selectedCount: "{count} selected",
+    removeValue: "Remove {name}",
+    chosenFiles: "Chosen files",
+    removeFile: "Remove {name}",
+    uploading: "Uploading",
+    uploaded: "Uploaded",
+    uploadFailed: "Upload failed",
+    retry: "Retry",
+    actions: "Actions",
+    actionsFor: "Actions for {name}",
+    primaryContact: "Main contact",
+    whatsapp: "WhatsApp",
+    unread: "Unread",
+    required: "Please fill in this field.",
+    requiredCheck: "Please tick this box.",
+    requiredChoice: "Please choose an option.",
+    requiredFile: "Please choose a file.",
+    invalid: "Please check this field.",
+});
+let current = { ...DEFAULT_STRINGS };
+// One per connected component that shows library text: told to re-render.
+const listeners = new Set();
+/** Replaces some of the library's own text, for every component on the page. */
+export function setStrings(overrides) {
+    current = { ...current, ...overrides };
+    for (const listener of listeners)
+        listener();
+}
+/** Back to the English defaults. */
+export function resetStrings() {
+    setStrings(DEFAULT_STRINGS);
+}
+export function getStrings() {
+    return current;
+}
+/** "Remove {name}" with { name: "a.pdf" } gives "Remove a.pdf". */
+export function fillIn(text, values) {
+    return text.replace(/\{(\w+)\}/g, (whole, key) => key in values ? String(values[key]) : whole);
+}
+/**
+ * Gives a component its text: its own `strings` first, then setStrings(),
+ * then English. Re-renders the component when setStrings() is called.
+ */
+export class StringsController {
+    constructor(host) {
+        this.host = host;
+        this.changed = () => this.host.requestUpdate();
+        host.addController(this);
+    }
+    hostConnected() {
+        listeners.add(this.changed);
+    }
+    hostDisconnected() {
+        listeners.delete(this.changed);
+    }
+    get(key, values) {
+        const text = this.host.strings?.[key] ?? current[key];
+        return values ? fillIn(text, values) : text;
+    }
+}
+//# sourceMappingURL=strings.js.map

package/dist/strings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"strings.js","sourceRoot":"","sources":["../src/strings.ts"],"names":[],"mappings":"AAyDA,MAAM,CAAC,MAAM,eAAe,GAAwB,MAAM,CAAC,MAAM,CAAC;IAChE,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,WAAW;IACrB,SAAS,EAAE,YAAY;IACvB,UAAU,EAAE,YAAY;IACxB,cAAc,EAAE,iBAAiB;IACjC,aAAa,EAAE,kBAAkB;IACjC,WAAW,EAAE,eAAe;IAC5B,WAAW,EAAE,cAAc;IAC3B,UAAU,EAAE,eAAe;IAC3B,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE,UAAU;IACpB,YAAY,EAAE,eAAe;IAC7B,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,SAAS;IAClB,UAAU,EAAE,oBAAoB;IAChC,cAAc,EAAE,cAAc;IAC9B,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,QAAQ;IAChB,QAAQ,EAAE,4BAA4B;IACtC,aAAa,EAAE,uBAAuB;IACtC,cAAc,EAAE,0BAA0B;IAC1C,YAAY,EAAE,uBAAuB;IACrC,OAAO,EAAE,0BAA0B;CACpC,CAAC,CAAC;AAEH,IAAI,OAAO,GAAc,EAAE,GAAG,eAAe,EAAE,CAAC;AAEhD,0EAA0E;AAC1E,MAAM,SAAS,GAAG,IAAI,GAAG,EAAc,CAAC;AAExC,gFAAgF;AAChF,MAAM,UAAU,UAAU,CAAC,SAA6B;IACtD,OAAO,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,SAAS,EAAE,CAAC;IACvC,KAAK,MAAM,QAAQ,IAAI,SAAS;QAAE,QAAQ,EAAE,CAAC;AAC/C,CAAC;AAED,oCAAoC;AACpC,MAAM,UAAU,YAAY;IAC1B,UAAU,CAAC,eAAe,CAAC,CAAC;AAC9B,CAAC;AAED,MAAM,UAAU,UAAU;IACxB,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,mEAAmE;AACnE,MAAM,UAAU,MAAM,CAAC,IAAY,EAAE,MAAuC;IAC1E,OAAO,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC,KAAK,EAAE,GAAW,EAAE,EAAE,CACvD,GAAG,IAAI,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAC5C,CAAC;AACJ,CAAC;AAOD;;;GAGG;AACH,MAAM,OAAO,iBAAiB;IAC5B,YAAoB,IAAiB;QAAjB,SAAI,GAAJ,IAAI,CAAa;QAI7B,YAAO,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;QAHhD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAID,aAAa;QACX,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAED,gBAAgB;QACd,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACjC,CAAC;IAED,GAAG,CAAC,GAAoB,EAAE,MAAwC;QAChE,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,CAAC;QACtD,OAAO,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC9C,CAAC;CACF"}

package/dist/tokens.css

@@ -169,12 +169,28 @@
   --tt-sidebar-border: oklch(0.922 0 0);
   --tt-sidebar-ring: var(--tt-brand);
 
-  /* ---- Charts ---- */
-  --tt-chart-1: oklch(0.87 0 0);
-  --tt-chart-2: oklch(0.556 0 0);
-  --tt-chart-3: oklch(0.439 0 0);
-  --tt-chart-4: oklch(0.371 0 0);
-  --tt-chart-5: oklch(0.269 0 0);
+  /* ---- Charts ----
+     The series colours tt-chart draws with, in order (a pie's slices
+     too). Colourful by default: five greys, as before, were hard to tell
+     apart in a pie, and the lightest one failed 3:1 on a white card.
+
+     They are the content hues plus amber, so a teal series is the same
+     teal as a teal badge. Neighbours are far apart round the colour
+     wheel, so a pie's touching slices differ most: blue, amber, purple,
+     teal, pink. Every one passes 4.5:1 on the card in both themes (3:1
+     is what a chart mark needs), and styles.test.ts recomputes it.
+
+     Aliases, so they follow their hue into dark mode. .dark declares
+     them again, because a var() resolves where it is declared: without
+     that, a .dark subtree inside a light page would keep the light ones.
+
+     To change them for one chart or a subtree, re-point them there. The
+     builder's chart Palette does exactly that (styles.ts). */
+  --tt-chart-1: var(--tt-blue);
+  --tt-chart-2: var(--tt-warning);
+  --tt-chart-3: var(--tt-purple);
+  --tt-chart-4: var(--tt-teal);
+  --tt-chart-5: var(--tt-pink);
 
   /* ---- Radius ----
 
@@ -734,6 +750,14 @@
   --tt-pink: oklch(0.76 0.13 350);
   --tt-pink-foreground: oklch(0.145 0 0);
   --tt-pink-subtle: oklch(0.3 0.045 350);
+
+  /* The same aliases as on :root, declared again so they resolve to the
+     dark hues on any .dark element, not only on <html>. */
+  --tt-chart-1: var(--tt-blue);
+  --tt-chart-2: var(--tt-warning);
+  --tt-chart-3: var(--tt-purple);
+  --tt-chart-4: var(--tt-teal);
+  --tt-chart-5: var(--tt-pink);
 }
 
 /* =========================================

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

@@ -1 +1 @@
-{"version":3,"file":"tt-alert.d.ts","sourceRoot":"","sources":["../src/tt-alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,cAAc,CAAC;AAEtB,2DAA2D;AAC3D,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEjF;;;;;;;GAOG;AACH,qBACa,OAAQ,SAAQ,UAAU;IAIrC,OAAO,EAAE,YAAY,CAAa;IAEN,OAAO,SAAM;IAEZ,QAAQ,UAAS;IAE9C,OAAO,CAAC,KAAK;IAMb,MAAM,CAAC,MAAM,0BA2FX;IAEF,MAAM;CA6BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"tt-alert.d.ts","sourceRoot":"","sources":["../src/tt-alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,cAAc,CAAC;AAEtB,2DAA2D;AAC3D,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEjF;;;;;;;GAOG;AACH,qBACa,OAAQ,SAAQ,UAAU;IAIrC,OAAO,EAAE,YAAY,CAAa;IAEN,OAAO,SAAM;IAEZ,QAAQ,UAAS;IAE9C,OAAO,CAAC,KAAK;IAMb,MAAM,CAAC,MAAM,0BA8FX;IAEF,MAAM;CA6BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/tt-alert.js

@@ -110,8 +110,11 @@ let TTAlert = class TTAlert extends LitElement {
       border-radius: var(--tt-radius-sm);
     }
 
-    .close:hover {
-      color: var(--tt-foreground);
+    /* Only where a pointer can hover: a tap would leave this on. */
+    @media (hover: hover) {
+      .close:hover {
+        color: var(--tt-foreground);
+      }
     }
 
     .close:focus-visible {

package/dist/tt-alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"tt-alert.js","sourceRoot":"","sources":["../src/tt-alert.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,cAAc,CAAC;AAKtB;;;;;;;GAOG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QACL,mEAAmE;QACnE,mEAAmE;QAEnE,YAAO,GAAiB,SAAS,CAAC;QAEN,YAAO,GAAG,EAAE,CAAC;QAEZ,aAAQ,GAAG,KAAK,CAAC;IAkIhD,CAAC;IAhIS,KAAK;QACX,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAC/D,CAAC;IACJ,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2FlB,AA3FY,CA2FX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;eAQA,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ;;;YAGjD,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA,uCAAuC,IAAI,CAAC,OAAO,QAAQ;YACjE,CAAC,CAAC,EAAE;;;;;UAKN,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA;+EAC+D,IAAI,CAAC,KAAK;;;aAG5E;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;;AArID;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACR;AAEN;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAc;AAEZ;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCAAkB;AARnC,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA0InB"}
+{"version":3,"file":"tt-alert.js","sourceRoot":"","sources":["../src/tt-alert.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,cAAc,CAAC;AAKtB;;;;;;;GAOG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QACL,mEAAmE;QACnE,mEAAmE;QAEnE,YAAO,GAAiB,SAAS,CAAC;QAEN,YAAO,GAAG,EAAE,CAAC;QAEZ,aAAQ,GAAG,KAAK,CAAC;IAqIhD,CAAC;IAnIS,KAAK;QACX,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAC/D,CAAC;IACJ,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8FlB,AA9FY,CA8FX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;eAQA,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ;;;YAGjD,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA,uCAAuC,IAAI,CAAC,OAAO,QAAQ;YACjE,CAAC,CAAC,EAAE;;;;;UAKN,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA;+EAC+D,IAAI,CAAC,KAAK;;;aAG5E;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;;AAxID;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACR;AAEN;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAc;AAEZ;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCAAkB;AARnC,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA6InB"}