tlp-icons 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tamer and tlp-icons contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/NOTICE.md

@@ -0,0 +1,21 @@
+# Notice
+
+tlp-icons is released under the MIT License (see `LICENSE`). It contains icon geometry from the following
+open-source projects. Their license texts are kept in `licenses/`.
+
+| Source | License | Copyright | Website |
+| --- | --- | --- | --- |
+| Lucide | ISC | Copyright (c) 2026 Lucide Icons and Contributors | https://lucide.dev |
+| Tabler Icons | MIT | Copyright (c) 2020-2026 Paweł Kuna | https://tabler.io/icons |
+| tlp-icons originals | MIT | Copyright (c) 2026 tlp-icons contributors | https://github.com/Tamer-Mansour/tlp-icons |
+
+What tlp-icons adds on top of the upstream geometry: the curated category taxonomy, the motion choreographies
+(hand-made overrides and the rule engine output), part tagging of the SVG elements, the runtime, and the
+"tlp-icons originals" (icons drawn for this project, in `originals/`).
+
+## Trademarks
+
+The **Brands** category (icons named `brand-*`, from Tabler Icons) shows logos that are trademarks of their
+respective owners (for example Facebook, Instagram and WhatsApp are trademarks of Meta Platforms, Inc.).
+They are included only to identify those products and services. Their inclusion does not imply any
+affiliation with or endorsement by the trademark owners. Follow each owner's brand guidelines when you use them.

package/README.md

@@ -1,3 +1,231 @@
-# Temporary Holding Version
+<p align="center">
+  <a href="https://tlp-icons.netlify.app"><img src="https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/web/public/favicon.svg" width="88" height="88" alt="tlp-icons logo"></a>
+</p>
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+<h1 align="center">tlp-icons</h1>
+
+<p align="center">
+  <b>Every icon, animated.</b><br>
+  <a href="https://tlp-icons.netlify.app/icons/"><b>Browse the icons</b></a> ·
+  <a href="https://tlp-icons.netlify.app/docs/"><b>Documentation</b></a> ·
+  <a href="https://tlp-icons.netlify.app/categories/brands/">Brands</a> ·
+  <a href="https://github.com/Tamer-Mansour/tlp-icons/blob/main/ROADMAP.md">Roadmap</a> ·
+  <a href="https://github.com/Tamer-Mansour/tlp-icons">GitHub</a>
+</p>
+
+<p align="center">
+  <img alt="icons" src="https://img.shields.io/badge/icons-6%2C489-4f46e5">
+  <img alt="animated" src="https://img.shields.io/badge/animated-100%25-4f46e5">
+  <img alt="license" src="https://img.shields.io/badge/license-MIT-16a34a">
+  <img alt="dependencies" src="https://img.shields.io/badge/dependencies-0-0ea5e9">
+</p>
+
+A free, open-source (MIT) library of 6,489 stroke icons, built from the best free sets (Lucide and Tabler) plus
+our own **tlp originals**, sorted into 35 hand-curated categories, including **376 brand logos** (Facebook,
+Instagram, WhatsApp, X, TikTok, YouTube...). Every single one moves on hover: clock hands sweep around the face,
+gears spin on their axle, bells swing from the top, trash lids lift, arrows move the way they point.
+
+[![Gallery](https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/docs/gallery.png)](https://tlp-icons.netlify.app)
+
+<details>
+<summary>Motion frames (each row is one hover animation frozen at 10 points)</summary>
+
+![Frame strips](https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/docs/frame-strips.png)
+</details>
+
+- **6,489 icons**: 24×24 grid, 2px stroke, round caps, `currentColor`. One consistent style.
+- **100% animated**: 300+ hand-made choreographies, plus a motion engine that reads each icon's geometry.
+- **Deep fields**: we draw our own icons where the free sets stop. Legal went from 18 to 59 first; the
+  [roadmap](https://github.com/Tamer-Mansour/tlp-icons/blob/main/ROADMAP.md) takes it to 1,180 and the whole library to 26,000.
+- **Brand logos**: 376 brands in the same outline style, animated (trademarks of their owners, see `NOTICE.md`).
+- **Tiny runtime**: one custom element, `<tlp-icon>`. Works in plain HTML, React, Angular, Vue, Svelte...
+- **Lazy**: icons load per category, so a page that uses 10 icons doesn't download 6,000.
+- **Polite motion**: plays once to the end, never animates a whole card at once, respects `prefers-reduced-motion`.
+- **Works offline**: the gallery opens straight from disk, and the build never needs the network.
+
+## Install
+
+```bash
+npm install tlp-icons
+```
+
+Or with no build step, from a CDN:
+
+```html
+<script type="module" src="https://unpkg.com/tlp-icons/dist/tlp-icon.js"></script>
+<tlp-icon name="bell"></tlp-icon>
+```
+
+Offline / no modules (for example opened from `file://`): one classic script with every icon inside (about 2.2 MB):
+
+```html
+<script src="node_modules/tlp-icons/dist/tlp-icons.all.js"></script>
+<tlp-icon name="bell"></tlp-icon>
+```
+
+## Usage
+
+```html
+<tlp-icon name="bell"></tlp-icon>
+<tlp-icon name="settings" size="32" stroke="1.5"></tlp-icon>
+<tlp-icon name="loader-circle" trigger="loop"></tlp-icon>
+<tlp-icon name="heart" trigger="click" duotone></tlp-icon>
+<tlp-icon name="arrow-right" flip="rtl"></tlp-icon>
+```
+
+| Attribute | Values | Default |
+| --- | --- | --- |
+| `name` | any icon name (or a Lucide alias) | |
+| `size` | number (px) or any CSS length | `24` (or `--tlp-size`) |
+| `stroke` | stroke width | `2` (or `--tlp-stroke`) |
+| `trigger` | `hover`, `loop`, `click`, `none` | `hover` |
+| `duotone` | boolean, adds a soft tinted body fill | off |
+| `flip` | `rtl` (mirror only in right-to-left pages), `x` (always mirror) | off |
+
+The icon takes its color from `color`, like text. Theme everything with CSS variables:
+
+```css
+tlp-icon { --tlp-size: 20px; --tlp-stroke: 1.75; }
+.card { --tlp-duo: .2; } /* duotone strength */
+```
+
+Play it from code: `document.querySelector('tlp-icon').play()`.
+
+**Hover rule.** Hovering an icon animates it. Hovering anything else walks up to the nearest element that holds
+exactly one icon (a button, a menu item) and animates that icon. If it reaches an element with several icons first
+(a card, a menu, a table row), nothing animates. So hovering a button animates its icon, while a big card never
+lights up all its icons at once.
+
+### React
+
+```jsx
+import 'tlp-icons/element';
+
+export function SaveButton() {
+  return <button><tlp-icon name="save" /> Save</button>;
+}
+```
+
+React 19 supports custom elements directly. For TypeScript JSX, declare `tlp-icon` in `JSX.IntrinsicElements`.
+
+### Angular
+
+```ts
+// main.ts
+import 'tlp-icons/element';
+
+// component
+@Component({ schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `<tlp-icon name="bell"></tlp-icon>` })
+```
+
+### Vue
+
+```ts
+// main.ts
+import 'tlp-icons/element';
+// vite.config.ts -> vue({ template: { compilerOptions: { isCustomElement: tag => tag === 'tlp-icon' } } })
+```
+
+```html
+<tlp-icon name="bell" />
+```
+
+### Raw data and SVG strings (Node / SSR)
+
+```js
+import { icons, categories, getSvg } from 'tlp-icons';
+
+getSvg('bell');                                // static SVG markup
+getSvg('bell', { size: 32, stroke: 1.5 });
+getSvg('bell', { animated: true });            // SVG with the motion baked in (needs dist/tlp-icons.css)
+icons.bell;                                    // { svg, m: [[part, anim, dur, delay, origin?], ...] }
+```
+
+Importing `icons` pulls in the whole set. For pages, use `<tlp-icon>`, which loads one category chunk at a time.
+
+## Website
+
+**https://tlp-icons.netlify.app** is built with **Next.js (React)** in `web/` and uses this package itself
+(`"tlp-icons": "file:.."`). Every page is pre-rendered static HTML for search engines:
+
+| Page | URL |
+| --- | --- |
+| Home | `/` |
+| Icon gallery (search, filters, size / stroke / color / duotone) | `/icons/` |
+| One page per icon: preview, sizes, buttons, code for React / HTML / Angular / Vue / SVG, related icons | `/icons/<name>/` (6,489 pages) |
+| Categories, one page each, including Brands | `/categories/`, `/categories/<id>/` |
+| Documentation with live examples and the animation library | `/docs/` |
+| Roadmap with live progress | `/roadmap/` |
+| `sitemap.xml`, `robots.txt`, Open Graph image | |
+
+```bash
+npm run build                  # the library (repository root)
+cd web && npm install
+npm run dev                    # http://localhost:3000
+npm run build                  # static site in web/out (about 270 MB, 6,700 files)
+node scripts/serve.mjs         # serve web/out on http://localhost:4321
+```
+
+Netlify runs the same steps (see `netlify.toml`) and publishes `web/out` on every push to `main`.
+For a manual deploy, drag the `web/out` folder onto the site's **Deploys** tab in Netlify.
+
+**Offline use:** `dist/tlp-icons.all.js` is a single classic script with every icon; it works from `file://`
+with no server and no internet.
+
+## How it works
+
+```
+npm run sync    online:  latest Lucide + Tabler -> normalised snapshot in upstream/ -> build
+npm run build   offline: upstream/ + config/ + overrides/ + originals/ -> dist/ (library)
+npm test        offline: node:test suite (data, motion, keyframes, build idempotency)
+npm run test:browser   optional Playwright tests + frame strips (npm run setup:browser once)
+```
+
+- `config/sources.json`: upstream versions (written by sync). Brand logos are on (`includeBrands`).
+- `config/categories.json`: the taxonomy, plus explicit mapping tables for every upstream category, name patterns
+  and the featured order.
+- `config/rules.json`: keyword → motion recipe. Data, not code.
+- `overrides/<name>.json`: hand choreographies. These always win over the engine.
+- `originals/<name>.json`: **tlp originals**, icons we draw ourselves (with their category, tags and motion).
+- `config/roadmap.json`: per-category goals and planned icon lists → `ROADMAP.md` (`node scripts/roadmap.mjs`)
+  and the `/roadmap/` page.
+- `scripts/adapters/`: one adapter per icon source (`latest`, `fetch`, `load`). Add a set by adding an adapter.
+- `scripts/engine/`: SVG parsing, geometry, the motion engine and serialisation.
+- `src/runtime/`: `core.js` (registry, baking, run engine, hover rule), `element.js` (`<tlp-icon>`) and
+  `tlp-icons.css` (the 34 `tlp-` keyframes).
+
+**Motion engine.** Every icon is split into atoms (one per element or sub-path) and measured. Then:
+
+1. **Hand override**, if there is one.
+2. **Mechanics detectors.** Clocks: find the face and split the hands at its centre, then sweep the minute hand
+   and advance the hour hand (it keeps its position between hovers). Gears spin on their axle, and several gears
+   turn opposite ways. Arrows: find each arrow head and its shaft, then move them the way they point.
+3. **Composites**: `file-plus`, `user-cog` and `circle-check` animate as base + badge, or container + glyph.
+   `-off` icons draw their slash last.
+4. **Keyword rules** from `config/rules.json`: bells swing, trash lids lift, locks open on their hinge, eyes
+   blink, charts grow, rain falls, vehicles drive...
+5. **Fallback**: a duotone body fills in, the outline draws, details follow, then a soft finishing gesture.
+   The gesture varies so neighbouring icons don't all look the same.
+
+Every motion is small and springy and ends exactly at rest. The default `speed` is 0.6, which averages about
+0.9 s per icon (1.56 s max). Change it with `import { config } from 'tlp-icons/element'; config.speed = 0.8`.
+
+## Contributing
+
+- New icon: add `originals/<name>.json` (24×24, 2px stroke, round caps, parts `p1`..`p4`, `motion` steps).
+  Pick one from the planned lists in [ROADMAP.md](https://github.com/Tamer-Mansour/tlp-icons/blob/main/ROADMAP.md). Check it with
+  `node scripts/sheet.mjs review <name>` and `node scripts/strips.mjs review <name>` (images in `test/browser/shots/`).
+- Better motion for one icon: add `overrides/<name>.json` with the SVG retagged into parts (`class="p1"`...)
+  and its `motion` steps. See any existing override.
+- Better motion for many icons: add or adjust a rule in `config/rules.json`.
+- Wrong category: add a name pattern or an explicit entry in `config/categories.json`.
+- Run `npm run build && npm test` before opening a PR.
+
+The GitHub Actions (CI and upstream sync) are manual: run them from the Actions tab when needed.
+
+## License
+
+MIT © tlp-icons contributors. Icon geometry from [Lucide](https://lucide.dev) (ISC) and
+[Tabler Icons](https://tabler.io/icons) (MIT), plus tlp originals (MIT). See [NOTICE.md](https://github.com/Tamer-Mansour/tlp-icons/blob/main/NOTICE.md) and `licenses/`.
+
+Brand logos are trademarks of their respective owners and are included only to identify their products.

package/dist/core.js

@@ -0,0 +1,185 @@
+/* tlp-icons 0.1.0 - MIT. Icons from Lucide 1.55.0 (ISC), Tabler Icons 3.49.0 (MIT). Generated file, do not edit. */
+/* tlp-icons runtime core: icon registry, choreography baking, run engine and the hover rule.
+   Plain ES module without imports so the build can also wrap it into a classic <script> bundle. */
+
+export const config = { speed: 0.6 };
+
+const OUT = 'cubic-bezier(.22,1,.36,1)';
+const TURN = 'cubic-bezier(.65,0,.35,1)';
+const SINE = 'cubic-bezier(.45,.05,.55,.95)';
+export const EASE = {
+  draw: 'cubic-bezier(.65,.05,.36,1)', fillIn: 'ease', popIn: OUT, fadeIn: 'ease', slideIn: OUT, riseIn: OUT, dropIn: OUT,
+  grow: OUT, growX: OUT, spin: TURN, spinBack: TURN, spinHalf: TURN, sweep: TURN, sweepHour: TURN, orbit: TURN,
+};
+
+const NS = 'http://www.w3.org/2000/svg';
+const DRAWABLE = 'path,circle,rect,line,polyline,polygon,ellipse';
+const registry = Object.create(null);
+const aliases = Object.create(null);
+let loader = null;
+
+/** Adds icons: { name: { svg, m } }. */
+const waiting = Object.create(null);
+export function register(icons, aliasMap) {
+  for (const k in icons) registry[k] = icons[k];
+  if (aliasMap) for (const k in aliasMap) aliases[k] = aliasMap[k];
+  for (const k in waiting) {
+    const icon = getIcon(k);
+    if (icon) { waiting[k].forEach(fn => fn(icon)); delete waiting[k]; }
+  }
+}
+export function setLoader(fn) { loader = fn; }
+export function resolve(name) { return registry[name] ? name : aliases[name] || name; }
+export function getIcon(name) { return registry[resolve(name)] || null; }
+/** Resolves with the icon data. Without a loader it waits for a later register() (classic script bundles). */
+export function loadIcon(name) {
+  const icon = getIcon(name);
+  if (icon) return Promise.resolve(icon);
+  if (loader) return Promise.resolve(loader(resolve(name))).then(() => getIcon(name));
+  return new Promise(res => { (waiting[name] = waiting[name] || []).push(res); });
+}
+
+/** Scaled timing of every step and the total length in ms. */
+export function timings(icon, speed = config.speed) {
+  let total = 0;
+  const steps = (icon.m || []).map(([part, anim, dur, delay, origin]) => {
+    const t = Math.round(dur * speed), dl = Math.round((delay || 0) * speed);
+    total = Math.max(total, t + dl);
+    return { part, anim, t, dl, origin };
+  });
+  return { steps, total };
+}
+
+const varsOf = s => {
+  const v = { '--a': `tlp-${s.anim}`, '--t': `${s.t}ms`, '--dl': `${s.dl}ms`, '--e': EASE[s.anim] || SINE };
+  if (s.origin) v['--o'] = s.origin;
+  return v;
+};
+const clsOf = s => `p${s.origin && /px/.test(s.origin) ? ' vb' : ''}${s.anim === 'sweepHour' ? ' hh' : ''}`;
+const hasClass = (cls, part) => (` ${cls} `).indexOf(` ${part} `) >= 0;
+
+/** Builds a live <svg> element (CSP friendly: CSS variables are set through the CSSOM). */
+export function createSvg(icon, doc = document) {
+  const svg = doc.createElementNS(NS, 'svg');
+  svg.setAttribute('viewBox', '0 0 24 24');
+  svg.setAttribute('class', 'tlp');
+  svg.setAttribute('aria-hidden', 'true');
+  svg.setAttribute('focusable', 'false');
+  svg.innerHTML = icon.svg;
+  const { steps, total } = timings(icon);
+  svg.dataset.total = String(total);
+  for (const s of steps) {
+    let targets;
+    if (s.part === 'all') {
+      const g = doc.createElementNS(NS, 'g');
+      while (svg.firstChild) g.appendChild(svg.firstChild);
+      svg.appendChild(g);
+      targets = [g];
+    } else {
+      targets = Array.prototype.filter.call(svg.querySelectorAll('[class]'), el => hasClass(el.getAttribute('class'), s.part));
+    }
+    const vars = varsOf(s);
+    for (const el of targets) {
+      el.setAttribute('class', `${el.getAttribute('class') || ''} ${clsOf(s)}`.trim());
+      for (const k in vars) el.style.setProperty(k, vars[k]);
+    }
+  }
+  svg.querySelectorAll(DRAWABLE).forEach(el => el.setAttribute('pathLength', '1'));
+  return svg;
+}
+
+/** Static or animated SVG markup string (animated markup uses inline style for the CSS variables). */
+export function toSvgString(icon, opts = {}) {
+  const sw = opts.stroke ?? 2, size = opts.size ?? 24;
+  const head = `<svg xmlns="${NS}" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${sw}" stroke-linecap="round" stroke-linejoin="round"`;
+  if (!opts.animated) {
+    const clean = icon.svg.replace(/ class="([^"]*)"/g, (_, c) => {
+      const keep = c.split(/\s+/).filter(x => x === 'd' || x === 'f');
+      return keep.length ? ` class="${keep.join(' ')}"` : '';
+    });
+    const duo = opts.duotone ? '<style>.d{fill:currentColor;fill-opacity:.16}.f{fill:currentColor}</style>' : '<style>.f{fill:currentColor}</style>';
+    return `${head}>${clean.includes('class="') ? duo : ''}${clean}</svg>`;
+  }
+  let inner = icon.svg;
+  const { steps, total } = timings(icon);
+  for (const s of steps) {
+    const style = Object.entries(varsOf(s)).map(([k, v]) => `${k}:${v}`).join(';');
+    if (s.part === 'all') { inner = `<g class="${clsOf(s)}" style="${style}">${inner}</g>`; continue; }
+    inner = inner.replace(new RegExp(`<([a-z]+)([^>]*?) class="([^"]*\\b${s.part}\\b[^"]*)"`, 'g'), (_, tag, pre, c) => `<${tag}${pre} class="${c} ${clsOf(s)}" style="${style}"`);
+  }
+  inner = inner.replace(/<(path|circle|rect|line|polyline|polygon|ellipse)\b/g, '<$1 pathLength="1"');
+  return `${head} class="tlp" data-tlp-icon data-total="${total}">${inner}</svg>`;
+}
+
+const reduced = () => typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+/** Plays an icon's choreography once. It always finishes, even if the pointer leaves. */
+export function run(svg, delay = 0) {
+  if (!svg || svg._tlpBusy || reduced()) return false;
+  svg._tlpBusy = true;
+  const go = () => {
+    svg.classList.remove('tlp-run');
+    void svg.getBoundingClientRect();
+    svg.classList.add('tlp-run');
+    setTimeout(() => {
+      svg.querySelectorAll('.hh').forEach(h => h.style.setProperty('--h0', `${(parseFloat(h.style.getPropertyValue('--h0')) || 0) + 30}deg`));
+      svg.classList.remove('tlp-run');
+      svg._tlpBusy = false;
+    }, (+svg.dataset.total || 0) + 40);
+  };
+  if (delay) setTimeout(go, delay); else go();
+  return true;
+}
+
+export const ICON_SELECTOR = 'tlp-icon,svg[data-tlp-icon]';
+const HOST = 'button,a,[role=button],[role=menuitem],[role=tab],[role=option],li,tr,td,th,label,summary,input,select,textarea';
+
+function svgOf(icon) { return icon.tagName.toLowerCase() === 'svg' ? icon : icon.querySelector('svg.tlp'); }
+function triggerOf(icon) { return icon.getAttribute('trigger') || icon.getAttribute('data-trigger') || 'hover'; }
+
+/**
+ * Hover rule: hovering an icon animates it. Otherwise walk up to the nearest element that contains exactly one
+ * icon and animate that one. If an element with several icons is reached first (card, menu, table row), do nothing.
+ */
+export function hoverTarget(target) {
+  let el = target && target.nodeType === 1 ? target : target && target.parentElement;
+  if (!el) return null;
+  const own = el.closest(ICON_SELECTOR);
+  if (own) return own.closest('tlp-icon') || own;
+  for (let depth = 0; el && el.nodeType === 1 && el !== el.ownerDocument.body && depth < 8; depth++, el = el.parentElement) {
+    const list = el.querySelectorAll(ICON_SELECTOR);
+    let n = 0, found = null;
+    for (const i of list) { if (i.tagName.toLowerCase() === 'svg' && i.closest('tlp-icon')) continue; n++; found = i; }
+    if (n > 1) return null;
+    if (n === 1) return { icon: found, scope: el };
+    if (el.matches(HOST)) return null;
+  }
+  return null;
+}
+
+let hoverInstalled = false;
+export function installHover(doc = document) {
+  if (hoverInstalled) return;
+  hoverInstalled = true;
+  doc.addEventListener('mouseover', e => {
+    const hit = hoverTarget(e.target);
+    if (!hit) return;
+    const icon = hit.icon || hit;
+    const scope = hit.scope || icon;
+    if (scope.contains(e.relatedTarget)) return;
+    if (triggerOf(icon) !== 'hover') return;
+    run(svgOf(icon));
+  }, true);
+}
+
+let styleInjected = false;
+export const CSS = "tlp-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--tlp-size,24px);height:var(--tlp-size,24px);line-height:0;vertical-align:middle;color:inherit}tlp-icon>svg,svg.tlp{width:100%;height:100%}svg.tlp{fill:none;stroke:currentColor;stroke-width:var(--tlp-stroke,2);stroke-linecap:round;stroke-linejoin:round;overflow:visible}svg.tlp .d{fill:currentColor;fill-opacity:var(--tlp-duo,0)}tlp-icon[duotone],.tlp-duotone{--tlp-duo:.16}tlp-icon[duotone=false]{--tlp-duo:0}svg.tlp .f{fill:currentColor}svg.tlp .p{transform-box:fill-box;transform-origin:var(--o,center)}svg.tlp .p.vb{transform-box:view-box}svg.tlp .p.hh{transform:rotate(var(--h0,0deg))}svg.tlp.tlp-run .p{animation:var(--a) var(--t,1000ms) var(--e,cubic-bezier(.45,.05,.55,.95)) var(--dl,0ms) 1 both}tlp-icon[flip=x]>svg,[dir=rtl] tlp-icon[flip=rtl]>svg{transform:scaleX(-1)}@keyframes tlp-draw{0%{stroke-dasharray:1;stroke-dashoffset:1}100%{stroke-dasharray:1;stroke-dashoffset:0}}@keyframes tlp-fillIn{0%{fill-opacity:0}100%{fill-opacity:var(--tlp-duo,0)}}@keyframes tlp-popIn{0%{opacity:0;transform:scale(.4)}55%{opacity:1;transform:scale(1.08)}78%{transform:scale(.98)}100%{opacity:1;transform:scale(1)}}@keyframes tlp-fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes tlp-slideIn{0%{opacity:0;transform:translateX(-4px)}100%{opacity:1;transform:translateX(0)}}@keyframes tlp-riseIn{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:translateY(0)}}@keyframes tlp-dropIn{0%{opacity:0;transform:translateY(-5px)}60%{opacity:1;transform:translateY(.8px)}80%{transform:translateY(-.3px)}100%{opacity:1;transform:translateY(0)}}@keyframes tlp-grow{0%{transform:scaleY(0)}70%{transform:scaleY(1.06)}100%{transform:scaleY(1)}}@keyframes tlp-growX{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}@keyframes tlp-pop{0%,100%{transform:scale(1)}40%{transform:scale(1.14)}68%{transform:scale(.97)}86%{transform:scale(1.02)}}@keyframes tlp-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}@keyframes tlp-jelly{0%,100%{transform:scale(1,1)}30%{transform:scale(1.1,.9)}50%{transform:scale(.94,1.06)}70%{transform:scale(1.03,.97)}85%{transform:scale(.99,1.01)}}@keyframes tlp-swing{0%,100%{transform:rotate(0)}15%{transform:rotate(13deg)}32%{transform:rotate(-10deg)}50%{transform:rotate(6deg)}68%{transform:rotate(-3deg)}84%{transform:rotate(1deg)}}@keyframes tlp-wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-8deg)}45%{transform:rotate(6deg)}68%{transform:rotate(-3deg)}86%{transform:rotate(1deg)}}@keyframes tlp-tilt{0%,100%{transform:rotate(0)}40%{transform:rotate(-12deg)}72%{transform:rotate(3deg)}88%{transform:rotate(-1deg)}}@keyframes tlp-nod{0%,100%{transform:rotate(0)}45%{transform:rotate(7deg)}75%{transform:rotate(-1.5deg)}}@keyframes tlp-strike{0%,100%{transform:rotate(0)}38%{transform:rotate(-24deg)}56%{transform:rotate(7deg)}70%{transform:rotate(-2deg)}84%{transform:rotate(.6deg)}}@keyframes tlp-hop{0%,100%{transform:translateY(0) scale(1,1)}10%{transform:translateY(0) scale(1.04,.95)}40%{transform:translateY(-3px) scale(.97,1.04)}68%{transform:translateY(0) scale(1.04,.96)}84%{transform:translateY(0) scale(.99,1.01)}}@keyframes tlp-lift{0%,100%{transform:translateY(0)}45%{transform:translateY(-2.5px)}75%{transform:translateY(.4px)}}@keyframes tlp-sink{0%,100%{transform:translateY(0)}45%{transform:translateY(2.5px)}75%{transform:translateY(-.4px)}}@keyframes tlp-nudge{0%,100%{transform:translateX(0)}45%{transform:translateX(2.6px)}75%{transform:translateX(-.4px)}}@keyframes tlp-nudgeBack{0%,100%{transform:translateX(0)}45%{transform:translateX(-2.6px)}75%{transform:translateX(.4px)}}@keyframes tlp-float{0%,100%{transform:translateY(0)}25%{transform:translateY(-2px)}50%{transform:translateY(0)}75%{transform:translateY(-1.2px)}}@keyframes tlp-flip{0%,100%{transform:scaleX(1)}50%{transform:scaleX(-1)}}@keyframes tlp-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes tlp-spinBack{0%{transform:rotate(0)}100%{transform:rotate(-360deg)}}@keyframes tlp-spinHalf{0%{transform:rotate(0)}80%{transform:rotate(188deg)}100%{transform:rotate(180deg)}}@keyframes tlp-sweep{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes tlp-sweepHour{0%{transform:rotate(var(--h0,0deg))}100%{transform:rotate(calc(var(--h0,0deg) + 30deg))}}@keyframes tlp-blink{0%,100%{transform:scaleY(1)}35%{transform:scaleY(.08)}60%{transform:scaleY(1)}}@keyframes tlp-shake{0%,100%{transform:translateX(0)}18%{transform:translateX(-1.6px)}36%{transform:translateX(1.4px)}54%{transform:translateX(-1px)}72%{transform:translateX(.6px)}88%{transform:translateX(-.2px)}}@keyframes tlp-pulseRing{0%,100%{opacity:1;transform:scale(1)}55%{opacity:0;transform:scale(1.5)}56%{opacity:0;transform:scale(.6)}}@keyframes tlp-orbit{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes tlp-stretch{0%,100%{transform:scaleX(1)}45%{transform:scaleX(1.12)}75%{transform:scaleX(.98)}}@media (prefers-reduced-motion:reduce){svg.tlp .p{animation:none!important}}";
+export function ensureStyles(doc = document) {
+  if (styleInjected || !doc || !doc.head) return;
+  styleInjected = true;
+  if (doc.getElementById('tlp-icons-style') || CSS.length < 20) return;
+  const style = doc.createElement('style');
+  style.id = 'tlp-icons-style';
+  style.textContent = CSS;
+  doc.head.appendChild(style);
+}

package/dist/element.js

@@ -0,0 +1,75 @@
+/* tlp-icons 0.1.0 - MIT. Icons from Lucide 1.55.0 (ISC), Tabler Icons 3.49.0 (MIT). Generated file, do not edit. */
+/* <tlp-icon name="bell" size="24" stroke="1.75" trigger="hover|loop|click|none" duotone flip="rtl|x"> */
+import { loadIcon, createSvg, run, installHover, ensureStyles } from './core.js';
+
+const LOOP_PAUSE = 1200;
+
+export class TlpIcon extends HTMLElement {
+  static get observedAttributes() { return ['name', 'size', 'stroke', 'trigger']; }
+
+  connectedCallback() {
+    ensureStyles(this.ownerDocument);
+    installHover(this.ownerDocument);
+    if (!this.hasAttribute('role')) this.setAttribute('aria-hidden', 'true');
+    this.render();
+    this.setupTrigger();
+  }
+
+  disconnectedCallback() {
+    clearTimeout(this._loop);
+    this._loop = null;
+  }
+
+  attributeChangedCallback(attr) {
+    if (!this.isConnected) return;
+    if (attr === 'size' || attr === 'stroke') this.applyVars();
+    else if (attr === 'name') this.render();
+    else if (attr === 'trigger') this.setupTrigger();
+  }
+
+  applyVars() {
+    const size = this.getAttribute('size');
+    const stroke = this.getAttribute('stroke');
+    if (size) this.style.setProperty('--tlp-size', /^\d+(\.\d+)?$/.test(size) ? `${size}px` : size);
+    else this.style.removeProperty('--tlp-size');
+    if (stroke) this.style.setProperty('--tlp-stroke', stroke);
+    else this.style.removeProperty('--tlp-stroke');
+  }
+
+  render() {
+    this.applyVars();
+    const name = this.getAttribute('name');
+    if (!name) { this.replaceChildren(); return; }
+    loadIcon(name).then(icon => {
+      if (this.getAttribute('name') !== name) return;
+      if (!icon) { this.replaceChildren(); this.dataset.missing = ''; return; }
+      delete this.dataset.missing;
+      this.replaceChildren(createSvg(icon, this.ownerDocument));
+      if (icon.r) this.dataset.dir = ''; else delete this.dataset.dir;
+      this.dispatchEvent(new CustomEvent('tlp-ready', { bubbles: false }));
+    });
+  }
+
+  setupTrigger() {
+    clearTimeout(this._loop);
+    this._loop = null;
+    const trigger = this.getAttribute('trigger');
+    if (trigger === 'loop') {
+      const tick = () => {
+        const svg = this.querySelector('svg.tlp');
+        if (svg) run(svg);
+        this._loop = setTimeout(tick, ((svg && +svg.dataset.total) || 900) + LOOP_PAUSE);
+      };
+      this._loop = setTimeout(tick, 60);
+    }
+    if (trigger === 'click' && !this._clickBound) {
+      this._clickBound = true;
+      this.addEventListener('click', () => { if (this.getAttribute('trigger') === 'click') run(this.querySelector('svg.tlp')); });
+    }
+  }
+
+  /** Plays the animation once. */
+  play() { return run(this.querySelector('svg.tlp')); }
+}
+
+if (typeof customElements !== 'undefined' && !customElements.get('tlp-icon')) customElements.define('tlp-icon', TlpIcon);