@tartaguti/ui-components 0.0.0-stage → 0.2.0

package/dist/tt-icon.js

@@ -0,0 +1,510 @@
+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";
+/*
+  One icon set, drawn on one grid.
+
+  Most shapes come from Lucide (ISC) and through it Feather (MIT); the
+  notices are in THIRD-PARTY-NOTICES.md, which ships with the package.
+
+  Every icon is 24x24, stroked not filled, 2px wide, round caps and joins.
+  That is not decoration: a set drawn to one spec sits at the same optical
+  weight beside any other, which is the whole reason to have a set rather
+  than collecting shapes as you need them.
+
+  Only the SHAPES are stored here. The <svg> wrapper used to be repeated
+  inside every entry, which is fine for four icons and unmaintainable at
+  thirty: the wrapper is now written once in render(), so adding an icon
+  means adding its geometry and nothing else.
+
+  These replaced text glyphs. Components were using characters as icons -
+  the arrows on the data table, the chevrons on select, the crosses on
+  every close button. Glyphs render in the TEXT font, so they change shape
+  with the font stack, sit on the text baseline rather than centred, come
+  in wildly different optical sizes from each other, and simply fail to
+  render where the font lacks them.
+*/
+const shapes = {
+    /* ---- navigation ---- */
+    "chevron-down": svg `<path d="m6 9 6 6 6-6" />`,
+    "chevron-up": svg `<path d="m18 15-6-6-6 6" />`,
+    "chevron-left": svg `<path d="m15 18-6-6 6-6" />`,
+    "chevron-right": svg `<path d="m9 18 6-6-6-6" />`,
+    "arrow-up": svg `<path d="M12 19V5" /><path d="m5 12 7-7 7 7" />`,
+    "arrow-down": svg `<path d="M12 5v14" /><path d="m19 12-7 7-7-7" />`,
+    "arrow-left": svg `<path d="M19 12H5" /><path d="m12 19-7-7 7-7" />`,
+    "arrow-right": svg `<path d="M5 12h14" /><path d="m12 5 7 7-7 7" />`,
+    menu: svg `<path d="M4 6h16" /><path d="M4 12h16" /><path d="M4 18h16" />`,
+    "more-vertical": svg `
+    <circle cx="12" cy="5" r="1" />
+    <circle cx="12" cy="12" r="1" />
+    <circle cx="12" cy="19" r="1" />
+  `,
+    "more-horizontal": svg `
+    <circle cx="5" cy="12" r="1" />
+    <circle cx="12" cy="12" r="1" />
+    <circle cx="19" cy="12" r="1" />
+  `,
+    "external-link": svg `
+    <path d="M15 3h6v6" />
+    <path d="M10 14 21 3" />
+    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+  `,
+    /* ---- actions ---- */
+    x: svg `<path d="M18 6 6 18" /><path d="m6 6 12 12" />`,
+    check: svg `<path d="M20 6 9 17l-5-5" />`,
+    plus: svg `<path d="M12 5v14" /><path d="M5 12h14" />`,
+    minus: svg `<path d="M5 12h14" />`,
+    search: svg `<circle cx="11" cy="11" r="8" /><path d="m21 21-4.34-4.34" />`,
+    filter: svg `<path d="M3 5h18l-7 8v6l-4 2v-8Z" />`,
+    refresh: svg `
+    <path d="M21 12a9 9 0 1 1-3-6.7" />
+    <path d="M21 4v5h-5" />
+  `,
+    trash: svg `
+    <path d="M3 6h18" />
+    <path d="M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2" />
+    <path d="M19 6v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6" />
+    <path d="M10 11v6" />
+    <path d="M14 11v6" />
+  `,
+    edit: svg `
+    <path d="M12 20h9" />
+    <path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z" />
+  `,
+    copy: svg `
+    <rect x="9" y="9" width="12" height="12" rx="2" />
+    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+  `,
+    download: svg `
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+    <path d="m7 10 5 5 5-5" />
+    <path d="M12 15V3" />
+  `,
+    upload: svg `
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+    <path d="m17 8-5-5-5 5" />
+    <path d="M12 3v12" />
+  `,
+    /* A hook rather than a circle: a curved arrow that closes into a loop
+       reads as "refresh", which already has its own icon. */
+    undo: svg `
+    <path d="m9 14-5-5 5-5" />
+    <path d="M4 9h11a5 5 0 0 1 0 10h-4" />
+  `,
+    redo: svg `
+    <path d="m15 14 5-5-5-5" />
+    <path d="M20 9H9a5 5 0 0 0 0 10h4" />
+  `,
+    /* ---- layout and editing ----
+  
+       A shape for each kind of block on a page (rows, columns, a grid, a
+       box, text, a heading, a text field, a checkbox, a switch, a tag),
+       the tools and handles of an editor, and the three widths a layout
+       is previewed at. */
+    rows: svg `
+    <rect x="3" y="3" width="18" height="18" rx="2" />
+    <path d="M3 9h18" />
+    <path d="M3 15h18" />
+  `,
+    /* A box split in two: things joined side by side, a button group. */
+    columns: svg `
+    <rect x="3" y="3" width="18" height="18" rx="2" />
+    <path d="M12 3v18" />
+  `,
+    grid: svg `
+    <rect x="3" y="3" width="7" height="7" rx="1" />
+    <rect x="14" y="3" width="7" height="7" rx="1" />
+    <rect x="14" y="14" width="7" height="7" rx="1" />
+    <rect x="3" y="14" width="7" height="7" rx="1" />
+  `,
+    square: svg `<rect x="3" y="3" width="18" height="18" rx="2" />`,
+    /* ---- more kinds of block (Oct 2026, the builder's second round) ----
+  
+       Tabs, a bento layout, a sidebar layout, a fixed shape, a tooltip, a
+       list of facts, a table, charts, keys, loading states, sharing and a
+       profile. Same grid and stroke as everything above. */
+    "panel-top": svg `
+    <rect x="3" y="3" width="18" height="18" rx="2" />
+    <path d="M3 9h18" />
+    <path d="M9 3v6" />
+  `,
+    "panel-left": svg `
+    <rect x="3" y="3" width="18" height="18" rx="2" />
+    <path d="M9 3v18" />
+  `,
+    "layout-dashboard": svg `
+    <rect x="3" y="3" width="7" height="9" rx="1" />
+    <rect x="14" y="3" width="7" height="5" rx="1" />
+    <rect x="14" y="12" width="7" height="9" rx="1" />
+    <rect x="3" y="16" width="7" height="5" rx="1" />
+  `,
+    /* Two boxes of different shapes over each other: a set proportion. */
+    ratio: svg `
+    <rect x="6" y="2" width="12" height="20" rx="2" />
+    <rect x="2" y="6" width="20" height="12" rx="2" />
+  `,
+    "message-square": svg `<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z" />`,
+    list: svg `
+    <path d="M3 6h.01" />
+    <path d="M3 12h.01" />
+    <path d="M3 18h.01" />
+    <path d="M8 6h13" />
+    <path d="M8 12h13" />
+    <path d="M8 18h13" />
+  `,
+    table: svg `
+    <rect x="3" y="3" width="18" height="18" rx="2" />
+    <path d="M3 9h18" />
+    <path d="M3 15h18" />
+    <path d="M12 3v18" />
+  `,
+    "bar-chart": svg `
+    <path d="M3 3v16a2 2 0 0 0 2 2h16" />
+    <path d="M18 17V9" />
+    <path d="M13 17V5" />
+    <path d="M8 17v-3" />
+  `,
+    "trending-up": svg `
+    <path d="M16 7h6v6" />
+    <path d="m22 7-8.5 8.5-5-5L2 17" />
+  `,
+    keyboard: svg `
+    <rect x="2" y="4" width="20" height="16" rx="2" />
+    <path d="M6 8h.01" />
+    <path d="M10 8h.01" />
+    <path d="M14 8h.01" />
+    <path d="M18 8h.01" />
+    <path d="M8 12h.01" />
+    <path d="M12 12h.01" />
+    <path d="M16 12h.01" />
+    <path d="M7 16h10" />
+  `,
+    /* An open ring: something loading. */
+    loader: svg `<path d="M21 12a9 9 0 1 1-6.22-8.56" />`,
+    /* A dashed outline: a placeholder for content still to come. */
+    "square-dashed": svg `
+    <path d="M5 3a2 2 0 0 0-2 2" />
+    <path d="M19 3a2 2 0 0 1 2 2" />
+    <path d="M21 19a2 2 0 0 1-2 2" />
+    <path d="M5 21a2 2 0 0 1-2-2" />
+    <path d="M9 3h1" />
+    <path d="M9 21h1" />
+    <path d="M14 3h1" />
+    <path d="M14 21h1" />
+    <path d="M3 9v1" />
+    <path d="M21 9v1" />
+    <path d="M3 14v1" />
+    <path d="M21 14v1" />
+  `,
+    share: svg `
+    <circle cx="18" cy="5" r="3" />
+    <circle cx="6" cy="12" r="3" />
+    <circle cx="18" cy="19" r="3" />
+    <path d="m8.59 13.51 6.83 3.98" />
+    <path d="m15.41 6.51-6.82 3.98" />
+  `,
+    hash: svg `
+    <path d="M4 9h16" />
+    <path d="M4 15h16" />
+    <path d="M10 3 8 21" />
+    <path d="M16 3l-2 18" />
+  `,
+    contact: svg `
+    <rect x="3" y="4" width="18" height="18" rx="2" />
+    <path d="M8 2v2" />
+    <path d="M16 2v2" />
+    <circle cx="12" cy="11" r="3" />
+    <path d="M7 22v-2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2" />
+  `,
+    file: svg `
+    <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
+    <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+  `,
+    "eye-off": svg `
+    <path d="M10.73 5.08A10.74 10.74 0 0 1 21.94 11.65a1 1 0 0 1 0 .7 10.75 10.75 0 0 1-1.44 2.49" />
+    <path d="M14.08 14.16a3 3 0 0 1-4.24-4.24" />
+    <path d="M17.48 17.5a10.75 10.75 0 0 1-15.42-5.15 1 1 0 0 1 0-.7 10.75 10.75 0 0 1 4.45-5.14" />
+    <path d="m2 2 20 20" />
+  `,
+    /* Text as such, where heading is a titled block. */
+    type: svg `
+    <path d="M4 7V4h16v3" />
+    <path d="M9 20h6" />
+    <path d="M12 4v16" />
+  `,
+    heading: svg `
+    <path d="M6 4v16" />
+    <path d="M18 4v16" />
+    <path d="M6 12h12" />
+  `,
+    "align-left": svg `
+    <path d="M4 6h16" />
+    <path d="M4 12h10" />
+    <path d="M4 18h13" />
+  `,
+    "text-cursor": svg `
+    <path d="M8 3h1a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H8" />
+    <path d="M16 3h-1a3 3 0 0 0-3 3" />
+    <path d="M16 21h-1a3 3 0 0 1-3-3" />
+  `,
+    "mouse-pointer": svg `
+    <path d="M4 4l6.5 16 2.4-7.1 7.1-2.4Z" />
+    <path d="m13 13 6 6" />
+  `,
+    /* The same tick as check-circle, so the two read as one family. */
+    "check-square": svg `
+    <rect x="3" y="3" width="18" height="18" rx="2" />
+    <path d="m8.5 12.5 2.5 2.5 5-5" />
+  `,
+    "toggle-right": svg `
+    <rect x="2" y="6" width="20" height="12" rx="6" />
+    <circle cx="16" cy="12" r="2" />
+  `,
+    tag: svg `
+    <path d="M3 3h8l10 10-8 8L3 11Z" />
+    <path d="M7.5 7.5h.01" />
+  `,
+    code: svg `
+    <path d="m8 7-5 5 5 5" />
+    <path d="m16 7 5 5-5 5" />
+    <path d="m14 5-4 14" />
+  `,
+    layers: svg `
+    <path d="m12 3 9 5-9 5-9-5Z" />
+    <path d="m3 12 9 5 9-5" />
+    <path d="m3 16 9 5 9-5" />
+  `,
+    /* more-vertical, twice: the same dots on the same rhythm. */
+    "grip-vertical": svg `
+    <circle cx="9" cy="5" r="1" />
+    <circle cx="9" cy="12" r="1" />
+    <circle cx="9" cy="19" r="1" />
+    <circle cx="15" cy="5" r="1" />
+    <circle cx="15" cy="12" r="1" />
+    <circle cx="15" cy="19" r="1" />
+  `,
+    smartphone: svg `
+    <rect x="6" y="2" width="12" height="20" rx="2" />
+    <path d="M12 18h.01" />
+  `,
+    tablet: svg `
+    <rect x="4" y="2" width="16" height="20" rx="2" />
+    <path d="M12 18h.01" />
+  `,
+    monitor: svg `
+    <rect x="2" y="3" width="20" height="14" rx="2" />
+    <path d="M12 17v4" />
+    <path d="M8 21h8" />
+  `,
+    /* ---- status ---- */
+    info: svg `
+    <circle cx="12" cy="12" r="10" />
+    <path d="M12 16v-4" />
+    <path d="M12 8h.01" />
+  `,
+    "alert-triangle": svg `
+    <path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" />
+    <path d="M12 9v4" />
+    <path d="M12 17h.01" />
+  `,
+    "check-circle": svg `
+    <circle cx="12" cy="12" r="10" />
+    <path d="m8.5 12.5 2.5 2.5 5-5" />
+  `,
+    "x-circle": svg `
+    <circle cx="12" cy="12" r="10" />
+    <path d="m15 9-6 6" />
+    <path d="m9 9 6 6" />
+  `,
+    star: svg `
+    <path
+      d="m12 3 2.7 5.5 6.1.9-4.4 4.3 1 6-5.4-2.9-5.4 2.9 1-6L3.2 9.4l6.1-.9Z"
+    />
+  `,
+    /* ---- objects ---- */
+    user: svg `<circle cx="12" cy="8" r="4" /><path d="M4 21c0-4 3.5-7 8-7s8 3 8 7" />`,
+    users: svg `
+    <circle cx="9" cy="8" r="4" />
+    <path d="M2 21c0-3.9 3.1-6 7-6s7 2.1 7 6" />
+    <path d="M16 4.5a4 4 0 0 1 0 7" />
+    <path d="M18 15.5c2.5.8 4 2.7 4 5.5" />
+  `,
+    settings: svg `
+    <circle cx="12" cy="12" r="3" />
+    <path
+      d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-2.9 1.2 2 2 0 1 1-4 0 1.7 1.7 0 0 0-2.9-1.2l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.7 1.7 0 0 0 3 15a2 2 0 1 1 0-4 1.7 1.7 0 0 0 1.2-2.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.7 1.7 0 0 0 10 4.6a2 2 0 1 1 4 0 1.7 1.7 0 0 0 2.9 1.2l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1A1.7 1.7 0 0 0 21 11a2 2 0 1 1 0 4 1.7 1.7 0 0 0-1.6 1Z"
+    />
+  `,
+    mail: svg `
+    <rect x="2" y="4" width="20" height="16" rx="2" />
+    <path d="m2 7 10 6 10-6" />
+  `,
+    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"
+    />
+  `,
+    calendar: svg `
+    <rect x="3" y="5" width="18" height="16" rx="2" />
+    <path d="M16 3v4" />
+    <path d="M8 3v4" />
+    <path d="M3 11h18" />
+  `,
+    building: svg `
+    <rect x="4" y="3" width="16" height="18" rx="1" />
+    <path d="M9 8h.01" /><path d="M15 8h.01" />
+    <path d="M9 12h.01" /><path d="M15 12h.01" />
+    <path d="M10 21v-4h4v4" />
+  `,
+    package: svg `
+    <path d="M21 8v8a2 2 0 0 1-1 1.7l-7 4a2 2 0 0 1-2 0l-7-4A2 2 0 0 1 3 16V8a2 2 0 0 1 1-1.7l7-4a2 2 0 0 1 2 0l7 4A2 2 0 0 1 21 8Z" />
+    <path d="m3.3 7 8.7 5 8.7-5" />
+    <path d="M12 22V12" />
+  `,
+    "shopping-bag": svg `
+    <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z" />
+    <path d="M3 6h18" />
+    <path d="M16 10a4 4 0 0 1-8 0" />
+  `,
+    home: svg `
+    <path d="m3 10 9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" />
+    <path d="M9 21v-7h6v7" />
+  `,
+    eye: svg `
+    <path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z" />
+    <circle cx="12" cy="12" r="3" />
+  `,
+    /* The frame, a sun and a hill. tt-image draws this when there is no
+       source or the source failed, so the empty box still reads as "a
+       picture belongs here" rather than as a broken layout. */
+    image: svg `
+    <rect x="3" y="3" width="18" height="18" rx="2" />
+    <circle cx="8.5" cy="8.5" r="1.5" />
+    <path d="m21 15-4.5-4.5L5 21" />
+  `,
+    lock: svg `
+    <rect x="4" y="10" width="16" height="11" rx="2" />
+    <path d="M8 10V7a4 4 0 0 1 8 0v3" />
+  `,
+    sun: svg `
+    <circle cx="12" cy="12" r="4" />
+    <path d="M12 2v2" /><path d="M12 20v2" />
+    <path d="M4.9 4.9 6.3 6.3" /><path d="M17.7 17.7l1.4 1.4" />
+    <path d="M2 12h2" /><path d="M20 12h2" />
+    <path d="M6.3 17.7 4.9 19.1" /><path d="M19.1 4.9 17.7 6.3" />
+  `,
+    moon: svg `<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z" />`,
+    claude: svg `
+    <path
+      d="M4.7 15.9 9 13.4l.1-.2-.1-.2h-.2l-.7-.1H5.7l-2.1-.1-1.8-.1-1.8-.2-.4-.4.1-.3.3-.2.5.1 1.1.1 1.6.1 1.2.1 1.7.2h.3v-.1l-.1-.1-.2-.1-1.5-1-1.6-1.1-.9-.6-.4-.3-.2-.3-.1-.6.4-.4h.5l.2.1 1.5 1.2 2 1.5.3.2v-.2l-.1-.2-.7-1.3-.8-1.4-.4-.6-.1-.3v-.5l.3-.2.4.1.4.2.6.8 1.3 1.8.2.3.1-.1v-.1L8 6.8l-.5-2.3-.2-1.2v-.9l.2-.3.4-.1.4.2.3.4.5 1.1.8 1.8 1.2 2.4.4.7.2.2h.1V8.5l-.1-1.3-.2-1.6-.1-.7v-1l.2-.3.4-.1.3.1.3.4.2.6.3 1.4.5 2.4.2.7.1.1.1-.1.2-1.4.3-1.7.3-2.2.1-.6.3-.7.7-.2.4.3.1.6-.1.6-.4 2.4-.6 3v.4l.2-.1.7-1 1.2-1.5.5-.6.6-.6.4-.2h.7l.3.5-.1.5-.5.6-.4.5-.6.8-.4.6.1.1.4-.1 2-.4 1.1-.2 1.3-.2.6.3.1.3-.3.6-1.6.4-1.9.4-2.8.6h-.1l.1.1 1.3.1h2l1.6.1.4.3-.2.4-.4.2-.7-.1-2.6-.6-.9-.2h-.1l.5.5 1.6 1.5 2 1.9.1.5-.3.4h-.3l-1-.7-1.8-1.4-1.4-1.1h-.1l.1.2 1 1.5.6 1.9-.1.5-.3.1-.4-.1-.7-1-.8-1.1-.6-1.1-.1.1-.4 3.9-.2.2-.4.2-.4-.3-.2-.5.2-1 .3-1.3.2-1v-.6h-.1l-.6.8-.9 1.2-.7.8-.2.1-.3-.2v-.3l.2-.2.9-1.2.6-.7.4-.4v-.2h-.1l-1.7 1.1-3 1.6-.6.1-.3-.2v-.3l.2-.2 1-.7Z"
+      fill="currentColor"
+      stroke="none"
+    />
+  `,
+};
+/** Every icon name, so a docs page can list them without a second list. */
+export const ICON_NAMES = Object.keys(shapes).sort();
+let TTIcon = class TTIcon extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.name = "";
+        /*
+          Empty by default, NOT "16px".
+      
+          An inline style beats an inherited custom property, so a default of
+          "16px" meant every icon always carried an inline --tt-icon-size and a
+          container could never size the icons inside it. tt-button wants small
+          buttons to get small icons, and that only works if an icon with no
+          explicit size stays open to inheritance. The 16px default now lives in
+          the CSS fallback instead, so nothing that relied on it changes.
+        */
+        this.size = "";
+    }
+    willUpdate(changed) {
+        if (!changed.has("size"))
+            return;
+        if (this.size) {
+            this.style.setProperty("--tt-icon-size", this.size);
+        }
+        else {
+            this.style.removeProperty("--tt-icon-size");
+        }
+    }
+    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: inline-flex;
+
+      width: var(--tt-icon-size, 16px);
+      height: var(--tt-icon-size, 16px);
+
+      flex: 0 0 auto;
+      align-items: center;
+      justify-content: center;
+
+      /* Zero, so an icon beside text does not inherit the line box and
+         push the row taller than the text needs. */
+      line-height: 0;
+      vertical-align: middle;
+
+      color: currentColor;
+
+      contain: layout paint;
+    }
+
+    svg {
+      display: block;
+
+      width: 100%;
+      height: 100%;
+
+      color: currentColor;
+
+      shape-rendering: geometricPrecision;
+    }
+  `; }
+    render() {
+        const shape = shapes[this.name];
+        // Unknown name renders nothing rather than a broken box. An icon is
+        // decoration in almost every case; a missing one should not leave a
+        // hole in the layout.
+        if (!shape)
+            return html ``;
+        return html `
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+        focusable="false"
+      >
+        ${shape}
+      </svg>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TTIcon.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], TTIcon.prototype, "size", void 0);
+TTIcon = __decorate([
+    customElement("tt-icon")
+], TTIcon);
+export { TTIcon };
+//# sourceMappingURL=tt-icon.js.map

package/dist/tt-icon.js.map

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

package/dist/tt-image.d.ts

@@ -0,0 +1,59 @@
+import { LitElement } from "lit";
+import type { PropertyValues } from "lit";
+import "./tt-icon.js";
+export type ImageFit = "cover" | "contain";
+export type ImageRadius = "none" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "full";
+/**
+ * An image in a box the PARENT sizes.
+ *
+ * Six properties, and each one answers a question you actually have when
+ * you place an image: how big is the box (ratio), what happens to a photo
+ * that is not that shape (fit), what are the corners (radius), and is
+ * this the one image worth loading early (priority).
+ *
+ * There is deliberately no size scale. The host is a block that fills its
+ * container, so a card wanting a 34px logo says 34px in its own CSS and
+ * wins, because rules from the tree that owns an element beat that
+ * element's :host. A fixed scale here (icon, profile, small, medium,
+ * large) was five pixel values from one app baked into a library meant
+ * for apps that do not exist yet, and three consumers ended up reaching
+ * through ::part just to undo it.
+ *
+ * The other half of the job is that real images fail, arrive late, or
+ * arrive already cached, so the load is treated as state: a skeleton
+ * while it downloads, a fallback if it never arrives.
+ *
+ * @fires tt-load - When the image has loaded.
+ * @fires tt-error - { src } when it failed and the fallback is showing.
+ * (Declared here because the analyzer does not see dispatches inside
+ * arrow-function fields, so the manifest left both out.)
+ */
+export declare class TTImage extends LitElement {
+    src: string;
+    /** Describe the picture, or pass "" when it is decorative. */
+    alt: string;
+    /** Any CSS aspect-ratio: "16 / 9", "4 / 5", "1". Empty means intrinsic. */
+    ratio: string;
+    fit: ImageFit;
+    radius: ImageRadius;
+    /**
+     * Above the fold. Loads eagerly and asks the browser to prioritise the
+     * fetch, which a hero image needs and a thumbnail never does.
+     */
+    priority: boolean;
+    private status;
+    private img?;
+    private get showFallback();
+    willUpdate(changed: PropertyValues): void;
+    updated(): void;
+    private handleLoad;
+    private handleError;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-image": TTImage;
+    }
+}
+//# sourceMappingURL=tt-image.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-image.d.ts","sourceRoot":"","sources":["../src/tt-image.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1C,OAAO,cAAc,CAAC;AAEtB,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAG3C,MAAM,MAAM,WAAW,GACnB,MAAM,GACN,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,SAAS,GACT,MAAM,CAAC;AAIX;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACT,GAAG,SAAM;IAErC,8DAA8D;IAClC,GAAG,SAAM;IAErC,2EAA2E;IAC/C,KAAK,SAAM;IAEI,GAAG,EAAE,QAAQ,CAAW;IAExB,MAAM,EAAE,WAAW,CAAY;IAE1E;;;OAGG;IAC0B,QAAQ,UAAS;IAErC,OAAO,CAAC,MAAM,CAAqB;IAMhB,OAAO,CAAC,GAAG,CAAC,CAAmB;IAE3D,OAAO,KAAK,YAAY,GAEvB;IAED,UAAU,CAAC,OAAO,EAAE,cAAc;IAmBlC,OAAO;IAkBP,OAAO,CAAC,UAAU,CAKhB;IAEF,OAAO,CAAC,WAAW,CASjB;IAEF,MAAM,CAAC,MAAM,0BA2IX;IAEF,MAAM;CAyCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}