tlp-icons 0.4.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -9
- package/dist/core.js +1 -1
- package/dist/core.js.map +1 -1
- package/dist/element.js +1 -1
- package/dist/element.js.map +1 -1
- package/dist/icons/arrows.js +1 -1
- package/dist/icons/brands.js +1 -1
- package/dist/icons/buildings.js +1 -1
- package/dist/icons/charts.js +1 -1
- package/dist/icons/commerce.js +1 -1
- package/dist/icons/communication.js +1 -1
- package/dist/icons/connectivity.js +1 -1
- package/dist/icons/design.js +1 -1
- package/dist/icons/development.js +1 -1
- package/dist/icons/devices.js +1 -1
- package/dist/icons/emoji.js +1 -1
- package/dist/icons/files.js +1 -1
- package/dist/icons/finance.js +1 -1
- package/dist/icons/food.js +1 -1
- package/dist/icons/health.js +1 -1
- package/dist/icons/home.js +1 -1
- package/dist/icons/interface.js +1 -1
- package/dist/icons/layout.js +1 -1
- package/dist/icons/legal.js +1 -1
- package/dist/icons/maps.js +1 -1
- package/dist/icons/math.js +1 -1
- package/dist/icons/media.js +1 -1
- package/dist/icons/nature.js +1 -1
- package/dist/icons/notifications.js +1 -1
- package/dist/icons/people.js +1 -1
- package/dist/icons/photography.js +1 -1
- package/dist/icons/science.js +1 -1
- package/dist/icons/security.js +1 -1
- package/dist/icons/shapes.js +1 -1
- package/dist/icons/sport.js +1 -1
- package/dist/icons/text.js +1 -1
- package/dist/icons/time.js +1 -1
- package/dist/icons/tools.js +1 -1
- package/dist/icons/vehicles.js +1 -1
- package/dist/icons/weather.js +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/jsx.js +1 -1
- package/dist/manifest.js +1 -1
- package/dist/manifest.js.map +1 -1
- package/dist/react.js +1 -1
- package/dist/react.js.map +1 -1
- package/dist/stats.json +1 -1
- package/dist/tlp-icon.js +1 -1
- package/dist/tlp-icon.js.map +1 -1
- package/dist/tlp-icons.css +1 -1
- package/dist/tlp-icons.runtime.js +1 -1
- package/dist/tlp-icons.runtime.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -35,31 +35,44 @@ gears spin on their axle, bells swing from the top, trash lids lift, arrows move
|
|
|
35
35
|
<td align="center"><img src="https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/docs/media/loop.gif" width="420" alt="Loaders with trigger=loop"><br><sub><code>trigger="loop"</code></sub></td>
|
|
36
36
|
</tr>
|
|
37
37
|
<tr>
|
|
38
|
-
<td align="center"><img src="https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/docs/media/
|
|
38
|
+
<td align="center"><img src="https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/docs/media/hold.gif" width="420" alt="trigger=hold: the icon animates, stays while hovered and returns on leave"><br><sub><code>trigger="hold"</code> stays at its peak while hovered</sub></td>
|
|
39
|
+
<td align="center"><img src="https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/docs/media/animations.gif" width="420" alt="New animations: buzz, beat, flicker, sway, flutter, drive, wave, drip"><br><sub><!--s:animations-->66<!--/s--> animations, each picked for what the icon is</sub></td>
|
|
40
|
+
</tr>
|
|
41
|
+
<tr>
|
|
42
|
+
<td align="center"><img src="https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/docs/media/fields.gif" width="420" alt="New health, finance, commerce and maps icons"><br><sub>Deep fields: legal, health, finance, commerce, maps</sub></td>
|
|
39
43
|
<td align="center"><img src="https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/docs/media/duotone.gif" width="420" alt="Icons without and with duotone"><br><sub><code>duotone</code> adds a soft tinted body</sub></td>
|
|
40
44
|
</tr>
|
|
45
|
+
<tr>
|
|
46
|
+
<td align="center"><img src="https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/docs/media/rtl.gif" width="420" alt="The same arrow in LTR and RTL with flip=rtl"><br><sub><code>flip="rtl"</code> mirrors the icon and its motion</sub></td>
|
|
47
|
+
<td></td>
|
|
48
|
+
</tr>
|
|
41
49
|
</table>
|
|
42
50
|
|
|
43
51
|
[](https://tlp-icons.netlify.app)
|
|
44
52
|
|
|
45
53
|
<table><tr>
|
|
46
|
-
<td><a href="https://tlp-icons.netlify.app/categories/
|
|
47
|
-
<td><a href="https://tlp-icons.netlify.app/icons/
|
|
54
|
+
<td><a href="https://tlp-icons.netlify.app/categories/health/"><img src="https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/docs/category.png" alt="Health category page"></a></td>
|
|
55
|
+
<td><a href="https://tlp-icons.netlify.app/icons/ambulance-siren/"><img src="https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/docs/icon-page.png" alt="Icon page with live playground and code"></a></td>
|
|
48
56
|
</tr><tr>
|
|
49
|
-
<td align="center">Category pages (
|
|
57
|
+
<td align="center">Category pages (health: <!--s:cat.health-->1,200<!--/s--> icons)</td>
|
|
50
58
|
<td align="center">One page per icon: playground + code</td>
|
|
51
59
|
</tr></table>
|
|
52
60
|
|
|
53
61
|
<details>
|
|
54
|
-
<summary>Motion frames (each row is one hover animation frozen at
|
|
62
|
+
<summary>Motion frames (each row is one hover animation frozen at 8 points)</summary>
|
|
55
63
|
|
|
56
64
|

|
|
57
65
|
</details>
|
|
58
66
|
|
|
59
67
|
- **<!--s:icons-->11,238<!--/s--> icons**: 24×24 grid, 2px stroke, round caps, `currentColor`. One consistent style.
|
|
60
68
|
- **100% animated**: <!--s:handmade-->5,057<!--/s--> hand-made choreographies, plus a motion engine that reads each icon's geometry.
|
|
61
|
-
- **Deep fields**: we draw our own icons where the free sets stop
|
|
62
|
-
|
|
69
|
+
- **Deep fields**: we draw our own icons where the free sets stop (<!--s:originals-->4,795<!--/s--> tlp originals). Legal
|
|
70
|
+
(<!--s:cat.legal-->1,180<!--/s-->), health (<!--s:cat.health-->1,200<!--/s-->), finance (<!--s:cat.finance-->1,100<!--/s-->), commerce (<!--s:cat.commerce-->999<!--/s-->) and maps (<!--s:cat.maps-->1,000<!--/s-->) are at their
|
|
71
|
+
targets; the [roadmap](https://github.com/Tamer-Mansour/tlp-icons/blob/main/ROADMAP.md) takes the whole library to 26,000.
|
|
72
|
+
- **<!--s:animations-->66<!--/s--> animations**: draw, pop, swing, spin... plus beat for hearts, sway for plants, flutter for flags,
|
|
73
|
+
drive for vehicles, wave for hands, drip for drops: each icon gets the motion that fits what it is.
|
|
74
|
+
- **Hover and hold**: `trigger="hold"` animates to the peak on hover and stays there, then returns when the mouse leaves.
|
|
75
|
+
`animated="false"` (or `config.animated = false`) makes icons static.
|
|
63
76
|
- **Brand logos**: <!--s:brands-->376<!--/s--> brands in the same outline style, animated (trademarks of their owners, see `NOTICE.md`).
|
|
64
77
|
- **Tiny runtime**: one custom element, `<tlp-icon>`. Works in plain HTML, React, Angular, Vue, Svelte...
|
|
65
78
|
- **Lazy**: icons load per category, so a page that uses 10 icons doesn't download all <!--s:icons-->11,238<!--/s-->.
|
|
@@ -79,8 +92,8 @@ Or with no build step, from a CDN:
|
|
|
79
92
|
<tlp-icon name="bell"></tlp-icon>
|
|
80
93
|
```
|
|
81
94
|
|
|
82
|
-
Offline / no modules (for example opened from `file://`): one classic script with every icon inside (about
|
|
83
|
-
|
|
95
|
+
Offline / no modules (for example opened from `file://`): one classic script with every icon inside (about
|
|
96
|
+
<!--s:size.4.raw-->3586.4 KB<!--/s-->, <!--s:size.4.gzip-->665.2 KB<!--/s--> gzip). Since 0.2.0 it ships in the [`tlp-icons-data`](packages/tlp-icons-data) package:
|
|
84
97
|
|
|
85
98
|
```html
|
|
86
99
|
<script src="node_modules/tlp-icons-data/tlp-icons.all.js"></script>
|
package/dist/core.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
/* tlp-icons 0.4.
|
|
1
|
+
/* tlp-icons 0.4.1 - MIT. Icons from Lucide 1.55.0 (ISC), Tabler Icons 3.49.0 (MIT). Generated file, do not edit. */
|
|
2
2
|
const x={speed:.6,trigger:"hover",animated:!0},m="cubic-bezier(.22,1,.36,1)",d="cubic-bezier(.65,0,.35,1)",j="cubic-bezier(.45,.05,.55,.95)",N={draw:"cubic-bezier(.65,.05,.36,1)",fillIn:"ease",popIn:m,fadeIn:"ease",slideIn:m,riseIn:m,dropIn:m,grow:m,growX:m,spin:d,spinBack:d,spinHalf:d,sweep:d,sweepHour:d,orbit:d,launch:"cubic-bezier(.4,.1,.5,.95)",roll:"cubic-bezier(.5,.05,.4,1)"},q={pop:.4,breathe:.5,jelly:.3,swing:.15,wiggle:.2,tilt:.4,nod:.45,strike:.38,hop:.4,lift:.45,sink:.45,nudge:.45,nudgeBack:.45,float:.25,flip:.5,spin:.5,spinBack:.5,spinHalf:1,sweep:.5,sweepHour:.5,blink:1,shake:.18,pulseRing:1,orbit:.5,stretch:.45,buzz:.08,tap:.16,press:.2,beat:.14,flicker:.38,twinkle:.3,sway:.24,flutter:.2,bob:.25,drive:.55,launch:.14,roll:.5,tada:.3,rubber:.3,rattle:.1,spring:.4,knock:.14,wave:.18,pendulum:.2,twirl:.5,flipY:.38,drip:1,fall:1,retrace:1,peek:.28},h="http://www.w3.org/2000/svg",b=()=>typeof document>"u"?null:document,P="path,circle,rect,line,polyline,polygon,ellipse",Y=Object.create(null),$=Object.create(null);let w=null;const p=Object.create(null);function W(t,r){for(const e in t)Y[e]=t[e];if(r)for(const e in r)$[e]=r[e];for(const e in p){const a=k(e);a&&(p[e].forEach(n=>n(a)),delete p[e])}}function G(t){if(w=t,!!t)for(const r in p)Promise.resolve(t(X(r))).then(()=>{const e=p[r];if(!e)return;delete p[r];const a=k(r);e.forEach(n=>n(a))},()=>{})}function X(t){return Y[t]?t:$[t]||t}function k(t){return Y[X(t)]||null}function J(t){const r=k(t);return r?Promise.resolve(r):w?Promise.resolve(w(X(t))).then(()=>k(t)):new Promise(e=>{(p[t]=p[t]||[]).push(e)})}function E(t,r=x.speed){let e=0;return{steps:(t.m||[]).map(([n,s,l,f,o])=>{const c=Math.round(l*r),i=Math.round((f||0)*r);return e=Math.max(e,c+i),{part:n,anim:s,t:c,dl:i,origin:o}}),total:e}}const I=t=>{const r={"--a":`tlp-${t.anim}`,"--t":`${t.t}ms`,"--dl":`${t.dl}ms`,"--e":N[t.anim]||j};return t.origin&&(r["--o"]=t.origin),r},v=t=>`p${t.origin&&/px/.test(t.origin)?" vb":""}${t.anim==="sweepHour"?" hh":""}`,D=(t,r)=>` ${t} `.indexOf(` ${r} `)>=0;function K(t,r=b()){if(!r)return null;const e=r.createElementNS(h,"svg");e.setAttribute("viewBox","0 0 24 24"),e.setAttribute("class","tlp"),e.setAttribute("aria-hidden","true"),e.setAttribute("focusable","false"),e.innerHTML=t.svg;const{steps:a,total:n}=E(t);e.dataset.total=String(n);for(const s of a){let l;if(s.part==="all"){const o=r.createElementNS(h,"g");for(;e.firstChild;)o.appendChild(e.firstChild);e.appendChild(o),l=[o]}else l=Array.prototype.filter.call(e.querySelectorAll("[class]"),o=>D(o.getAttribute("class"),s.part));const f=I(s);for(const o of l){o.setAttribute("class",`${o.getAttribute("class")||""} ${v(s)}`.trim());for(const c in f)o.style.setProperty(c,f[c])}}return e.querySelectorAll(P).forEach(s=>s.setAttribute("pathLength","1")),e}function Q(t,r={}){const e=r.stroke??2,a=r.size??24,n=`<svg xmlns="${h}" width="${a}" height="${a}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${e}" stroke-linecap="round" stroke-linejoin="round"`;if(!r.animated){const o=t.svg.replace(/ class="([^"]*)"/g,(i,u)=>{const y=u.split(/\s+/).filter(g=>g==="d"||g==="f");return y.length?` class="${y.join(" ")}"`:""}),c=r.duotone?"<style>.d{fill:currentColor;fill-opacity:.16}.f{fill:currentColor}</style>":"<style>.f{fill:currentColor}</style>";return`${n}>${o.includes('class="')?c:""}${o}</svg>`}let s=t.svg;const{steps:l,total:f}=E(t);for(const o of l){const c=Object.entries(I(o)).map(([i,u])=>`${i}:${u}`).join(";");if(o.part==="all"){s=`<g class="${v(o)}" style="${c}">${s}</g>`;continue}s=s.replace(new RegExp(`<([a-z]+)([^>]*?) class="([^"]*\\b${o.part}\\b[^"]*)"`,"g"),(i,u,y,g)=>`<${u}${y} class="${g} ${v(o)}" style="${c}"`)}return s=s.replace(/<(path|circle|rect|line|polyline|polygon|ellipse)\b/g,'<$1 pathLength="1"'),`${n} class="tlp" data-tlp-icon data-total="${f}">${s}</svg>`}const S=()=>typeof matchMedia=="function"&&matchMedia("(prefers-reduced-motion: reduce)").matches,C=t=>x.animated===!1||!!t.closest("[animated=false],[data-animated=false]");function H(t,r=0){if(!t||t._tlpBusy||t._tlpHold||S()||C(t))return!1;t._tlpBusy=!0;const e=()=>{t.classList.remove("tlp-run"),t.getBoundingClientRect(),t.classList.add("tlp-run"),setTimeout(()=>{t.querySelectorAll(".hh").forEach(a=>a.style.setProperty("--h0",`${(parseFloat(a.style.getPropertyValue("--h0"))||0)+30}deg`)),t.classList.remove("tlp-run"),t._tlpBusy=!1},(+t.dataset.total||0)+40)};return r?setTimeout(e,r):e(),!0}const F=t=>{const r=t.effect.getTiming();return(+r.delay||0)+(+r.duration||0)};function T(t,r){cancelAnimationFrame(t._tlpRaf);const e=()=>{r()&&(t._tlpRaf=requestAnimationFrame(e))};t._tlpRaf=requestAnimationFrame(e)}function M(t){if(!t||t._tlpBusy||S()||C(t))return!1;if(t._tlpHold==="in")return!0;if(typeof t.getAnimations!="function")return H(t);if(t._tlpHold)for(const r of t._tlpAnims)r._tlpAt<r._tlpEnd&&(r.playbackRate=1,r.play());else{t.classList.remove("tlp-run"),t.getBoundingClientRect(),t.classList.add("tlp-run"),t._tlpAnims=t.getAnimations({subtree:!0});for(const r of t._tlpAnims){const e=q[(r.animationName||"").replace(/^tlp-/,"")],a=r.effect.getTiming();r._tlpEnd=F(r),r._tlpAt=e===void 0?r._tlpEnd:(+a.delay||0)+e*(+a.duration||0),e===void 0&&(r.currentTime=r._tlpEnd,r.pause())}}return t._tlpHold="in",T(t,()=>{let r=!1;for(const e of t._tlpAnims)e.playState!=="running"||e.playbackRate<0||(e._tlpAt<e._tlpEnd&&e.currentTime>=e._tlpAt?(e.currentTime=e._tlpAt,e.pause()):r=!0);return r}),!0}function U(t){if(!t||!t._tlpHold||t._tlpHold==="out")return!1;t._tlpHold="out";const r=t._tlpAnims.filter(e=>e._tlpAt<e._tlpEnd);for(const e of r)e.playbackRate=-1,e.play();return T(t,()=>t._tlpHold!=="out"?!1:r.some(e=>e.playState==="running"&&e.currentTime>0)?!0:(t.classList.remove("tlp-run"),t._tlpHold=null,t._tlpAnims=null,!1)),!0}const z="tlp-icon,svg[data-tlp-icon]",V="button,a,[role=button],[role=menuitem],[role=tab],[role=option],li,tr,td,th,label,summary,input,select,textarea";function _(t){return t.tagName.toLowerCase()==="svg"?t:t.querySelector("svg.tlp")}function L(t){return t.getAttribute("trigger")||t.getAttribute("data-trigger")||x.trigger||"hover"}function A(t){let r=t&&t.nodeType===1?t:t&&t.parentElement;if(!r)return null;const e=r.closest(z);if(e)return e.closest("tlp-icon")||e;for(let a=0;r&&r.nodeType===1&&r!==r.ownerDocument.body&&a<8;a++,r=r.parentElement){const n=r.querySelectorAll(z);let s=0,l=null;for(const f of n)f.tagName.toLowerCase()==="svg"&&f.closest("tlp-icon")||(s++,l=f);if(s>1)return null;if(s===1)return{icon:l,scope:r};if(r.matches(V))return null}return null}let B=!1;function Z(t=b()){B||!t||(B=!0,t.addEventListener("mouseover",r=>{const e=A(r.target);if(!e)return;const a=e.icon||e;if((e.scope||a).contains(r.relatedTarget))return;const s=L(a);s==="hover"?H(_(a)):s==="hold"&&M(_(a))},!0),t.addEventListener("mouseout",r=>{const e=A(r.target);if(!e)return;const a=e.icon||e;if(L(a)!=="hold")return;const n=r.relatedTarget&&A(r.relatedTarget);n&&(n.icon||n)===a||U(_(a))},!0))}let O=!1;const R="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)}}@keyframes tlp-buzz{0%,100%{transform:translate(0,0) rotate(0)}8%{transform:translate(-.9px,.4px) rotate(-3deg)}16%{transform:translate(.9px,-.4px) rotate(3deg)}24%{transform:translate(-.8px,.4px) rotate(-2.6deg)}32%{transform:translate(.8px,-.3px) rotate(2.6deg)}40%{transform:translate(-.6px,.3px) rotate(-2deg)}48%{transform:translate(.6px,-.2px) rotate(2deg)}58%{transform:translate(-.4px,.2px) rotate(-1.2deg)}68%{transform:translate(.3px,-.1px) rotate(1deg)}80%{transform:translate(-.15px,0) rotate(-.4deg)}}@keyframes tlp-tap{0%,100%{transform:translateY(0) scale(1)}16%{transform:translateY(1.8px) scale(.94)}30%{transform:translateY(-.3px) scale(1.02)}44%{transform:translateY(0) scale(1)}60%{transform:translateY(1.8px) scale(.94)}78%{transform:translateY(-.4px) scale(1.02)}90%{transform:translateY(.1px) scale(.995)}}@keyframes tlp-press{0%,100%{transform:scale(1)}20%{transform:scale(.88)}42%{transform:scale(.88)}62%{transform:scale(1.07)}80%{transform:scale(.98)}91%{transform:scale(1.01)}}@keyframes tlp-beat{0%,100%{transform:scale(1)}14%{transform:scale(1.16)}28%{transform:scale(.98)}42%{transform:scale(1.09)}58%{transform:scale(1)}}@keyframes tlp-flicker{0%,100%{opacity:1;transform:scale(1)}8%{opacity:.55;transform:scale(.97)}16%{opacity:.95;transform:scale(1.02)}26%{opacity:.4;transform:scale(.96)}38%{opacity:1;transform:scale(1.03)}50%{opacity:.7;transform:scale(.99)}62%{opacity:1;transform:scale(1.015)}78%{opacity:.85;transform:scale(1)}}@keyframes tlp-twinkle{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(.8) rotate(-14deg)}60%{transform:scale(1.18) rotate(8deg)}80%{transform:scale(.97) rotate(-2deg)}}@keyframes tlp-sway{0%,100%{transform:rotate(0)}24%{transform:rotate(6deg)}48%{transform:rotate(-4.5deg)}70%{transform:rotate(2.5deg)}86%{transform:rotate(-1deg)}}@keyframes tlp-flutter{0%,100%{transform:scale(1,1)}20%{transform:skewY(-7deg) scaleX(.95)}42%{transform:skewY(6deg) scaleX(1.03)}62%{transform:skewY(-3.5deg) scaleX(.98)}82%{transform:skewY(1.5deg) scaleX(1.01)}}@keyframes tlp-bob{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-1.8px) rotate(-5deg)}52%{transform:translateY(1.2px) rotate(4deg)}76%{transform:translateY(-.8px) rotate(-2deg)}}@keyframes tlp-drive{0%,100%{transform:translateX(0) rotate(0)}22%{transform:translateX(-1px) rotate(-3.5deg)}55%{transform:translateX(2.4px) rotate(1.2deg)}78%{transform:translateX(-.3px) rotate(-.4deg)}}@keyframes tlp-launch{0%,100%{opacity:1;transform:translate(0,0)}14%{opacity:1;transform:translate(-.8px,.8px)}42%{opacity:0;transform:translate(5px,-5px)}43%{opacity:0;transform:translate(-5px,5px)}72%{opacity:1;transform:translate(.5px,-.5px)}}@keyframes tlp-roll{0%{transform:rotate(0) translateX(0)}50%{transform:rotate(180deg) translateX(1.2px)}100%{transform:rotate(360deg) translateX(0)}}@keyframes tlp-zoomIn{0%{opacity:0;transform:scale(1.35)}55%{opacity:1;transform:scale(.96)}78%{transform:scale(1.02)}100%{opacity:1;transform:scale(1)}}@keyframes tlp-spiralIn{0%{opacity:0;transform:rotate(-120deg) scale(0)}55%{opacity:1;transform:rotate(7deg) scale(1.1)}78%{transform:rotate(-2deg) scale(.98)}100%{opacity:1;transform:rotate(0) scale(1)}}@keyframes tlp-swingIn{0%{opacity:0;transform:rotate(-25deg)}30%{opacity:1;transform:rotate(9deg)}55%{transform:rotate(-4deg)}78%{transform:rotate(1.5deg)}100%{opacity:1;transform:rotate(0)}}@keyframes tlp-flipIn{0%{opacity:0;transform:scaleX(0)}50%{opacity:1;transform:scaleX(1.1)}75%{transform:scaleX(.96)}100%{opacity:1;transform:scaleX(1)}}@keyframes tlp-focusIn{0%{opacity:.15;filter:blur(1.6px);transform:scale(1.12)}60%{opacity:1;filter:blur(.5px);transform:scale(.98)}100%{opacity:1;filter:blur(0);transform:scale(1)}}@keyframes tlp-bloom{0%{opacity:0;transform:rotate(-45deg) scale(0)}55%{opacity:1;transform:rotate(8deg) scale(1.12)}78%{transform:rotate(-2deg) scale(.98)}100%{opacity:1;transform:rotate(0) scale(1)}}@keyframes tlp-rollIn{0%{opacity:0;transform:translateX(-5px) rotate(-180deg)}70%{opacity:1;transform:translateX(.6px) rotate(8deg)}100%{opacity:1;transform:translateX(0) rotate(0)}}@keyframes tlp-tada{0%,100%{transform:scale(1) rotate(0)}10%,20%{transform:scale(.92) rotate(-3deg)}30%,50%,70%{transform:scale(1.1) rotate(3deg)}40%,60%{transform:scale(1.1) rotate(-3deg)}82%{transform:scale(1.02) rotate(0)}}@keyframes tlp-rubber{0%,100%{transform:scale(1,1)}30%{transform:scale(1.2,.8)}45%{transform:scale(.85,1.15)}62%{transform:scale(1.08,.92)}78%{transform:scale(.97,1.03)}90%{transform:scale(1.01,.99)}}@keyframes tlp-rattle{0%,100%{transform:rotate(0)}10%{transform:rotate(-9deg)}22%{transform:rotate(8deg)}34%{transform:rotate(-7deg)}46%{transform:rotate(6deg)}58%{transform:rotate(-4deg)}70%{transform:rotate(3deg)}82%{transform:rotate(-1.5deg)}92%{transform:rotate(.6deg)}}@keyframes tlp-spring{0%,100%{transform:translateY(0) scale(1,1)}16%{transform:translateY(0) scale(1.08,.82)}40%{transform:translateY(-3px) scale(.94,1.12)}62%{transform:translateY(0) scale(1.05,.94)}80%{transform:translateY(0) scale(.99,1.02)}}@keyframes tlp-knock{0%,100%{transform:translateX(0) scale(1,1)}14%{transform:translateX(1.9px) scale(.96,1)}28%{transform:translateX(0) scale(1,1)}42%{transform:translateX(1.9px) scale(.96,1)}58%{transform:translateX(0) scale(1,1)}72%{transform:translateX(.5px) scale(.99,1)}}@keyframes tlp-wave{0%,100%{transform:rotate(0)}18%{transform:rotate(15deg)}36%{transform:rotate(-13deg)}54%{transform:rotate(10deg)}70%{transform:rotate(-6deg)}85%{transform:rotate(2deg)}}@keyframes tlp-pendulum{0%,100%{transform:rotate(0)}20%{transform:rotate(22deg)}42%{transform:rotate(-16deg)}62%{transform:rotate(9deg)}80%{transform:rotate(-4deg)}92%{transform:rotate(1.5deg)}}@keyframes tlp-twirl{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.82)}100%{transform:rotate(360deg) scale(1)}}@keyframes tlp-flipY{0%,100%{transform:scaleY(1)}38%{transform:scaleY(-1.08)}52%{transform:scaleY(-1)}66%{transform:scaleY(-1.05)}}@keyframes tlp-drip{0%,100%{opacity:1;transform:translateY(0) scale(1)}34%{opacity:0;transform:translateY(3px) scale(.82)}35%{opacity:0;transform:translateY(-3px) scale(.82)}68%{opacity:1;transform:translateY(.6px) scale(1.04)}84%{opacity:1;transform:translateY(-.2px) scale(1)}}@keyframes tlp-fall{0%,100%{opacity:1;transform:translateY(0)}38%{opacity:0;transform:translateY(3.5px)}39%{opacity:0;transform:translateY(-3.5px)}72%{opacity:1;transform:translateY(.7px)}86%{opacity:1;transform:translateY(-.2px)}}@keyframes tlp-retrace{0%,100%{opacity:1;stroke-dasharray:1;stroke-dashoffset:0}30%{opacity:1;stroke-dasharray:1;stroke-dashoffset:.96}33%{opacity:0;stroke-dasharray:1;stroke-dashoffset:1}40%{opacity:0;stroke-dasharray:1;stroke-dashoffset:1}41%{opacity:1;stroke-dasharray:1;stroke-dashoffset:1}}@keyframes tlp-peek{0%,100%{transform:translateY(0)}28%{transform:translateY(2px)}62%{transform:translateY(-1.1px)}82%{transform:translateY(.3px)}}@media (prefers-reduced-motion:reduce){svg.tlp .p{animation:none!important}}";function tt(t=b()){if(O||!t||!t.head||(O=!0,t.getElementById("tlp-icons-style")||R.length<20))return;const r=t.createElement("style");r.id="tlp-icons-style",r.textContent=R,t.head.appendChild(r)}export{R as CSS,N as EASE,q as HOLD,z as ICON_SELECTOR,x as config,K as createSvg,tt as ensureStyles,k as getIcon,M as hold,A as hoverTarget,Z as installHover,J as loadIcon,W as register,U as release,X as resolve,H as run,G as setLoader,E as timings,Q as toSvgString};
|
|
3
3
|
//# sourceMappingURL=core.js.map
|
package/dist/core.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["core.js"],
|
|
4
|
-
"sourcesContent": ["/* tlp-icons 0.4.0 - MIT. Icons from Lucide 1.55.0 (ISC), Tabler Icons 3.49.0 (MIT). Generated file, do not edit. */\n/* tlp-icons runtime core: icon registry, choreography baking, run engine and the hover rule.\n Plain ES module without imports so the build can also wrap it into a classic <script> bundle. */\n\n/** speed: duration multiplier. trigger: page default for icons without one. animated: false makes every icon static. */\nexport const config = { speed: 0.6, trigger: 'hover', animated: true };\n\nconst OUT = 'cubic-bezier(.22,1,.36,1)';\nconst TURN = 'cubic-bezier(.65,0,.35,1)';\nconst SINE = 'cubic-bezier(.45,.05,.55,.95)';\nexport const EASE = {\n draw: 'cubic-bezier(.65,.05,.36,1)', fillIn: 'ease', popIn: OUT, fadeIn: 'ease', slideIn: OUT, riseIn: OUT, dropIn: OUT,\n grow: OUT, growX: OUT, spin: TURN, spinBack: TURN, spinHalf: TURN, sweep: TURN, sweepHour: TURN, orbit: TURN,\n launch: \"cubic-bezier(.4,.1,.5,.95)\", roll: \"cubic-bezier(.5,.05,.4,1)\", \n};\n/** trigger=\"hold\": where each animation pauses while hovered (fraction of its duration; generated from the keyframes).\n Animations not listed (entrances) jump to their end. */\nexport const HOLD = { pop: 0.4, breathe: 0.5, jelly: 0.3, swing: 0.15, wiggle: 0.2, tilt: 0.4, nod: 0.45, strike: 0.38, hop: 0.4, lift: 0.45, sink: 0.45, nudge: 0.45, nudgeBack: 0.45, float: 0.25, flip: 0.5, spin: 0.5, spinBack: 0.5, spinHalf: 1, sweep: 0.5, sweepHour: 0.5, blink: 1, shake: 0.18, pulseRing: 1, orbit: 0.5, stretch: 0.45, buzz: 0.08, tap: 0.16, press: 0.2, beat: 0.14, flicker: 0.38, twinkle: 0.3, sway: 0.24, flutter: 0.2, bob: 0.25, drive: 0.55, launch: 0.14, roll: 0.5, tada: 0.3, rubber: 0.3, rattle: 0.1, spring: 0.4, knock: 0.14, wave: 0.18, pendulum: 0.2, twirl: 0.5, flipY: 0.38, drip: 1, fall: 1, retrace: 1, peek: 0.28 };\n\nconst NS = 'http://www.w3.org/2000/svg';\n// SSR safety: never touch `document` unless it exists (Node, workers).\nconst currentDocument = () => (typeof document === 'undefined' ? null : document);\nconst DRAWABLE = 'path,circle,rect,line,polyline,polygon,ellipse';\nconst registry = Object.create(null);\nconst aliases = Object.create(null);\nlet loader = null;\n\n/** Adds icons: { name: { svg, m } }. */\nconst waiting = Object.create(null);\nexport function register(icons, aliasMap) {\n for (const k in icons) registry[k] = icons[k];\n if (aliasMap) for (const k in aliasMap) aliases[k] = aliasMap[k];\n for (const k in waiting) {\n const icon = getIcon(k);\n if (icon) { waiting[k].forEach(fn => fn(icon)); delete waiting[k]; }\n }\n}\n/**\n * Installs the lazy loader. Icons requested before it existed (elements upgraded while the ES module graph was\n * still evaluating, e.g. tags in the HTML before <script type=\"module\">) are loaded now instead of waiting forever.\n */\nexport function setLoader(fn) {\n loader = fn;\n if (!fn) return;\n for (const name in waiting) {\n Promise.resolve(fn(resolve(name))).then(() => {\n const list = waiting[name];\n if (!list) return;\n delete waiting[name];\n const icon = getIcon(name);\n list.forEach(res => res(icon));\n }, () => {});\n }\n}\nexport function resolve(name) { return registry[name] ? name : aliases[name] || name; }\nexport function getIcon(name) { return registry[resolve(name)] || null; }\n/** Resolves with the icon data. Without a loader it waits for a later register() (classic script bundles). */\nexport function loadIcon(name) {\n const icon = getIcon(name);\n if (icon) return Promise.resolve(icon);\n if (loader) return Promise.resolve(loader(resolve(name))).then(() => getIcon(name));\n return new Promise(res => { (waiting[name] = waiting[name] || []).push(res); });\n}\n\n/** Scaled timing of every step and the total length in ms. */\nexport function timings(icon, speed = config.speed) {\n let total = 0;\n const steps = (icon.m || []).map(([part, anim, dur, delay, origin]) => {\n const t = Math.round(dur * speed), dl = Math.round((delay || 0) * speed);\n total = Math.max(total, t + dl);\n return { part, anim, t, dl, origin };\n });\n return { steps, total };\n}\n\nconst varsOf = s => {\n const v = { '--a': `tlp-${s.anim}`, '--t': `${s.t}ms`, '--dl': `${s.dl}ms`, '--e': EASE[s.anim] || SINE };\n if (s.origin) v['--o'] = s.origin;\n return v;\n};\nconst clsOf = s => `p${s.origin && /px/.test(s.origin) ? ' vb' : ''}${s.anim === 'sweepHour' ? ' hh' : ''}`;\nconst hasClass = (cls, part) => (` ${cls} `).indexOf(` ${part} `) >= 0;\n\n/** Builds a live <svg> element (CSP friendly: CSS variables are set through the CSSOM). */\nexport function createSvg(icon, doc = currentDocument()) {\n if (!doc) return null;\n const svg = doc.createElementNS(NS, 'svg');\n svg.setAttribute('viewBox', '0 0 24 24');\n svg.setAttribute('class', 'tlp');\n svg.setAttribute('aria-hidden', 'true');\n svg.setAttribute('focusable', 'false');\n svg.innerHTML = icon.svg;\n const { steps, total } = timings(icon);\n svg.dataset.total = String(total);\n for (const s of steps) {\n let targets;\n if (s.part === 'all') {\n const g = doc.createElementNS(NS, 'g');\n while (svg.firstChild) g.appendChild(svg.firstChild);\n svg.appendChild(g);\n targets = [g];\n } else {\n targets = Array.prototype.filter.call(svg.querySelectorAll('[class]'), el => hasClass(el.getAttribute('class'), s.part));\n }\n const vars = varsOf(s);\n for (const el of targets) {\n el.setAttribute('class', `${el.getAttribute('class') || ''} ${clsOf(s)}`.trim());\n for (const k in vars) el.style.setProperty(k, vars[k]);\n }\n }\n svg.querySelectorAll(DRAWABLE).forEach(el => el.setAttribute('pathLength', '1'));\n return svg;\n}\n\n/** Static or animated SVG markup string (animated markup uses inline style for the CSS variables). */\nexport function toSvgString(icon, opts = {}) {\n const sw = opts.stroke ?? 2, size = opts.size ?? 24;\n 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\"`;\n if (!opts.animated) {\n const clean = icon.svg.replace(/ class=\"([^\"]*)\"/g, (_, c) => {\n const keep = c.split(/\\s+/).filter(x => x === 'd' || x === 'f');\n return keep.length ? ` class=\"${keep.join(' ')}\"` : '';\n });\n const duo = opts.duotone ? '<style>.d{fill:currentColor;fill-opacity:.16}.f{fill:currentColor}</style>' : '<style>.f{fill:currentColor}</style>';\n return `${head}>${clean.includes('class=\"') ? duo : ''}${clean}</svg>`;\n }\n let inner = icon.svg;\n const { steps, total } = timings(icon);\n for (const s of steps) {\n const style = Object.entries(varsOf(s)).map(([k, v]) => `${k}:${v}`).join(';');\n if (s.part === 'all') { inner = `<g class=\"${clsOf(s)}\" style=\"${style}\">${inner}</g>`; continue; }\n inner = inner.replace(new RegExp(`<([a-z]+)([^>]*?) class=\"([^\"]*\\\\b${s.part}\\\\b[^\"]*)\"`, 'g'), (_, tag, pre, c) => `<${tag}${pre} class=\"${c} ${clsOf(s)}\" style=\"${style}\"`);\n }\n inner = inner.replace(/<(path|circle|rect|line|polyline|polygon|ellipse)\\b/g, '<$1 pathLength=\"1\"');\n return `${head} class=\"tlp\" data-tlp-icon data-total=\"${total}\">${inner}</svg>`;\n}\n\nconst reduced = () => typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;\n/** Static icons never animate: config.animated = false, or animated=\"false\" / data-animated=\"false\" on the icon or an ancestor. */\nconst isStatic = svg => config.animated === false || !!svg.closest('[animated=false],[data-animated=false]');\n\n/** Plays an icon's choreography once. It always finishes, even if the pointer leaves. */\nexport function run(svg, delay = 0) {\n if (!svg || svg._tlpBusy || svg._tlpHold || reduced() || isStatic(svg)) return false;\n svg._tlpBusy = true;\n const go = () => {\n svg.classList.remove('tlp-run');\n void svg.getBoundingClientRect();\n svg.classList.add('tlp-run');\n setTimeout(() => {\n svg.querySelectorAll('.hh').forEach(h => h.style.setProperty('--h0', `${(parseFloat(h.style.getPropertyValue('--h0')) || 0) + 30}deg`));\n svg.classList.remove('tlp-run');\n svg._tlpBusy = false;\n }, (+svg.dataset.total || 0) + 40);\n };\n if (delay) setTimeout(go, delay); else go();\n return true;\n}\n\nconst endOf = a => { const t = a.effect.getTiming(); return (+t.delay || 0) + (+t.duration || 0); };\nfunction track(svg, busy) {\n cancelAnimationFrame(svg._tlpRaf);\n const tick = () => { if (busy()) svg._tlpRaf = requestAnimationFrame(tick); };\n svg._tlpRaf = requestAnimationFrame(tick);\n}\n\n/**\n * trigger=\"hold\": plays forward and pauses each moving part at its hold point (HOLD), entrances jump to their end.\n * release() plays back to rest. Calling hold() while releasing turns around from the current frame.\n */\nexport function hold(svg) {\n if (!svg || svg._tlpBusy || reduced() || isStatic(svg)) return false;\n if (svg._tlpHold === 'in') return true;\n if (typeof svg.getAnimations !== 'function') return run(svg);\n if (!svg._tlpHold) {\n svg.classList.remove('tlp-run');\n void svg.getBoundingClientRect();\n svg.classList.add('tlp-run');\n svg._tlpAnims = svg.getAnimations({ subtree: true });\n for (const a of svg._tlpAnims) {\n const h = HOLD[(a.animationName || '').replace(/^tlp-/, '')];\n const t = a.effect.getTiming();\n a._tlpEnd = endOf(a);\n a._tlpAt = h === undefined ? a._tlpEnd : (+t.delay || 0) + h * (+t.duration || 0);\n if (h === undefined) { a.currentTime = a._tlpEnd; a.pause(); }\n }\n } else {\n for (const a of svg._tlpAnims) if (a._tlpAt < a._tlpEnd) { a.playbackRate = 1; a.play(); }\n }\n svg._tlpHold = 'in';\n track(svg, () => {\n let busy = false;\n for (const a of svg._tlpAnims) {\n if (a.playState !== 'running' || a.playbackRate < 0) continue;\n if (a._tlpAt < a._tlpEnd && a.currentTime >= a._tlpAt) { a.currentTime = a._tlpAt; a.pause(); } else busy = true;\n }\n return busy;\n });\n return true;\n}\n\n/** Ends a hold: held parts play back to rest, then the icon is static again. */\nexport function release(svg) {\n if (!svg || !svg._tlpHold || svg._tlpHold === 'out') return false;\n svg._tlpHold = 'out';\n const back = svg._tlpAnims.filter(a => a._tlpAt < a._tlpEnd);\n for (const a of back) { a.playbackRate = -1; a.play(); }\n track(svg, () => {\n if (svg._tlpHold !== 'out') return false;\n if (back.some(a => a.playState === 'running' && a.currentTime > 0)) return true;\n svg.classList.remove('tlp-run');\n svg._tlpHold = null;\n svg._tlpAnims = null;\n return false;\n });\n return true;\n}\n\nexport const ICON_SELECTOR = 'tlp-icon,svg[data-tlp-icon]';\nconst HOST = 'button,a,[role=button],[role=menuitem],[role=tab],[role=option],li,tr,td,th,label,summary,input,select,textarea';\n\nfunction svgOf(icon) { return icon.tagName.toLowerCase() === 'svg' ? icon : icon.querySelector('svg.tlp'); }\nfunction triggerOf(icon) { return icon.getAttribute('trigger') || icon.getAttribute('data-trigger') || config.trigger || 'hover'; }\n\n/**\n * Hover rule: hovering an icon animates it. Otherwise walk up to the nearest element that contains exactly one\n * icon and animate that one. If an element with several icons is reached first (card, menu, table row), do nothing.\n */\nexport function hoverTarget(target) {\n let el = target && target.nodeType === 1 ? target : target && target.parentElement;\n if (!el) return null;\n const own = el.closest(ICON_SELECTOR);\n if (own) return own.closest('tlp-icon') || own;\n for (let depth = 0; el && el.nodeType === 1 && el !== el.ownerDocument.body && depth < 8; depth++, el = el.parentElement) {\n const list = el.querySelectorAll(ICON_SELECTOR);\n let n = 0, found = null;\n for (const i of list) { if (i.tagName.toLowerCase() === 'svg' && i.closest('tlp-icon')) continue; n++; found = i; }\n if (n > 1) return null;\n if (n === 1) return { icon: found, scope: el };\n if (el.matches(HOST)) return null;\n }\n return null;\n}\n\nlet hoverInstalled = false;\nexport function installHover(doc = currentDocument()) {\n if (hoverInstalled || !doc) return;\n hoverInstalled = true;\n doc.addEventListener('mouseover', e => {\n const hit = hoverTarget(e.target);\n if (!hit) return;\n const icon = hit.icon || hit;\n const scope = hit.scope || icon;\n if (scope.contains(e.relatedTarget)) return;\n const trigger = triggerOf(icon);\n if (trigger === 'hover') run(svgOf(icon));\n else if (trigger === 'hold') hold(svgOf(icon));\n }, true);\n doc.addEventListener('mouseout', e => {\n const hit = hoverTarget(e.target);\n if (!hit) return;\n const icon = hit.icon || hit;\n if (triggerOf(icon) !== 'hold') return;\n // still hovering the same icon by the hover rule (e.g. from the icon onto its card): keep holding\n const next = e.relatedTarget && hoverTarget(e.relatedTarget);\n if (next && (next.icon || next) === icon) return;\n release(svgOf(icon));\n }, true);\n}\n\nlet styleInjected = false;\nexport 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)}}@keyframes tlp-buzz{0%,100%{transform:translate(0,0) rotate(0)}8%{transform:translate(-.9px,.4px) rotate(-3deg)}16%{transform:translate(.9px,-.4px) rotate(3deg)}24%{transform:translate(-.8px,.4px) rotate(-2.6deg)}32%{transform:translate(.8px,-.3px) rotate(2.6deg)}40%{transform:translate(-.6px,.3px) rotate(-2deg)}48%{transform:translate(.6px,-.2px) rotate(2deg)}58%{transform:translate(-.4px,.2px) rotate(-1.2deg)}68%{transform:translate(.3px,-.1px) rotate(1deg)}80%{transform:translate(-.15px,0) rotate(-.4deg)}}@keyframes tlp-tap{0%,100%{transform:translateY(0) scale(1)}16%{transform:translateY(1.8px) scale(.94)}30%{transform:translateY(-.3px) scale(1.02)}44%{transform:translateY(0) scale(1)}60%{transform:translateY(1.8px) scale(.94)}78%{transform:translateY(-.4px) scale(1.02)}90%{transform:translateY(.1px) scale(.995)}}@keyframes tlp-press{0%,100%{transform:scale(1)}20%{transform:scale(.88)}42%{transform:scale(.88)}62%{transform:scale(1.07)}80%{transform:scale(.98)}91%{transform:scale(1.01)}}@keyframes tlp-beat{0%,100%{transform:scale(1)}14%{transform:scale(1.16)}28%{transform:scale(.98)}42%{transform:scale(1.09)}58%{transform:scale(1)}}@keyframes tlp-flicker{0%,100%{opacity:1;transform:scale(1)}8%{opacity:.55;transform:scale(.97)}16%{opacity:.95;transform:scale(1.02)}26%{opacity:.4;transform:scale(.96)}38%{opacity:1;transform:scale(1.03)}50%{opacity:.7;transform:scale(.99)}62%{opacity:1;transform:scale(1.015)}78%{opacity:.85;transform:scale(1)}}@keyframes tlp-twinkle{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(.8) rotate(-14deg)}60%{transform:scale(1.18) rotate(8deg)}80%{transform:scale(.97) rotate(-2deg)}}@keyframes tlp-sway{0%,100%{transform:rotate(0)}24%{transform:rotate(6deg)}48%{transform:rotate(-4.5deg)}70%{transform:rotate(2.5deg)}86%{transform:rotate(-1deg)}}@keyframes tlp-flutter{0%,100%{transform:scale(1,1)}20%{transform:skewY(-7deg) scaleX(.95)}42%{transform:skewY(6deg) scaleX(1.03)}62%{transform:skewY(-3.5deg) scaleX(.98)}82%{transform:skewY(1.5deg) scaleX(1.01)}}@keyframes tlp-bob{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-1.8px) rotate(-5deg)}52%{transform:translateY(1.2px) rotate(4deg)}76%{transform:translateY(-.8px) rotate(-2deg)}}@keyframes tlp-drive{0%,100%{transform:translateX(0) rotate(0)}22%{transform:translateX(-1px) rotate(-3.5deg)}55%{transform:translateX(2.4px) rotate(1.2deg)}78%{transform:translateX(-.3px) rotate(-.4deg)}}@keyframes tlp-launch{0%,100%{opacity:1;transform:translate(0,0)}14%{opacity:1;transform:translate(-.8px,.8px)}42%{opacity:0;transform:translate(5px,-5px)}43%{opacity:0;transform:translate(-5px,5px)}72%{opacity:1;transform:translate(.5px,-.5px)}}@keyframes tlp-roll{0%{transform:rotate(0) translateX(0)}50%{transform:rotate(180deg) translateX(1.2px)}100%{transform:rotate(360deg) translateX(0)}}@keyframes tlp-zoomIn{0%{opacity:0;transform:scale(1.35)}55%{opacity:1;transform:scale(.96)}78%{transform:scale(1.02)}100%{opacity:1;transform:scale(1)}}@keyframes tlp-spiralIn{0%{opacity:0;transform:rotate(-120deg) scale(0)}55%{opacity:1;transform:rotate(7deg) scale(1.1)}78%{transform:rotate(-2deg) scale(.98)}100%{opacity:1;transform:rotate(0) scale(1)}}@keyframes tlp-swingIn{0%{opacity:0;transform:rotate(-25deg)}30%{opacity:1;transform:rotate(9deg)}55%{transform:rotate(-4deg)}78%{transform:rotate(1.5deg)}100%{opacity:1;transform:rotate(0)}}@keyframes tlp-flipIn{0%{opacity:0;transform:scaleX(0)}50%{opacity:1;transform:scaleX(1.1)}75%{transform:scaleX(.96)}100%{opacity:1;transform:scaleX(1)}}@keyframes tlp-focusIn{0%{opacity:.15;filter:blur(1.6px);transform:scale(1.12)}60%{opacity:1;filter:blur(.5px);transform:scale(.98)}100%{opacity:1;filter:blur(0);transform:scale(1)}}@keyframes tlp-bloom{0%{opacity:0;transform:rotate(-45deg) scale(0)}55%{opacity:1;transform:rotate(8deg) scale(1.12)}78%{transform:rotate(-2deg) scale(.98)}100%{opacity:1;transform:rotate(0) scale(1)}}@keyframes tlp-rollIn{0%{opacity:0;transform:translateX(-5px) rotate(-180deg)}70%{opacity:1;transform:translateX(.6px) rotate(8deg)}100%{opacity:1;transform:translateX(0) rotate(0)}}@keyframes tlp-tada{0%,100%{transform:scale(1) rotate(0)}10%,20%{transform:scale(.92) rotate(-3deg)}30%,50%,70%{transform:scale(1.1) rotate(3deg)}40%,60%{transform:scale(1.1) rotate(-3deg)}82%{transform:scale(1.02) rotate(0)}}@keyframes tlp-rubber{0%,100%{transform:scale(1,1)}30%{transform:scale(1.2,.8)}45%{transform:scale(.85,1.15)}62%{transform:scale(1.08,.92)}78%{transform:scale(.97,1.03)}90%{transform:scale(1.01,.99)}}@keyframes tlp-rattle{0%,100%{transform:rotate(0)}10%{transform:rotate(-9deg)}22%{transform:rotate(8deg)}34%{transform:rotate(-7deg)}46%{transform:rotate(6deg)}58%{transform:rotate(-4deg)}70%{transform:rotate(3deg)}82%{transform:rotate(-1.5deg)}92%{transform:rotate(.6deg)}}@keyframes tlp-spring{0%,100%{transform:translateY(0) scale(1,1)}16%{transform:translateY(0) scale(1.08,.82)}40%{transform:translateY(-3px) scale(.94,1.12)}62%{transform:translateY(0) scale(1.05,.94)}80%{transform:translateY(0) scale(.99,1.02)}}@keyframes tlp-knock{0%,100%{transform:translateX(0) scale(1,1)}14%{transform:translateX(1.9px) scale(.96,1)}28%{transform:translateX(0) scale(1,1)}42%{transform:translateX(1.9px) scale(.96,1)}58%{transform:translateX(0) scale(1,1)}72%{transform:translateX(.5px) scale(.99,1)}}@keyframes tlp-wave{0%,100%{transform:rotate(0)}18%{transform:rotate(15deg)}36%{transform:rotate(-13deg)}54%{transform:rotate(10deg)}70%{transform:rotate(-6deg)}85%{transform:rotate(2deg)}}@keyframes tlp-pendulum{0%,100%{transform:rotate(0)}20%{transform:rotate(22deg)}42%{transform:rotate(-16deg)}62%{transform:rotate(9deg)}80%{transform:rotate(-4deg)}92%{transform:rotate(1.5deg)}}@keyframes tlp-twirl{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.82)}100%{transform:rotate(360deg) scale(1)}}@keyframes tlp-flipY{0%,100%{transform:scaleY(1)}38%{transform:scaleY(-1.08)}52%{transform:scaleY(-1)}66%{transform:scaleY(-1.05)}}@keyframes tlp-drip{0%,100%{opacity:1;transform:translateY(0) scale(1)}34%{opacity:0;transform:translateY(3px) scale(.82)}35%{opacity:0;transform:translateY(-3px) scale(.82)}68%{opacity:1;transform:translateY(.6px) scale(1.04)}84%{opacity:1;transform:translateY(-.2px) scale(1)}}@keyframes tlp-fall{0%,100%{opacity:1;transform:translateY(0)}38%{opacity:0;transform:translateY(3.5px)}39%{opacity:0;transform:translateY(-3.5px)}72%{opacity:1;transform:translateY(.7px)}86%{opacity:1;transform:translateY(-.2px)}}@keyframes tlp-retrace{0%,100%{opacity:1;stroke-dasharray:1;stroke-dashoffset:0}30%{opacity:1;stroke-dasharray:1;stroke-dashoffset:.96}33%{opacity:0;stroke-dasharray:1;stroke-dashoffset:1}40%{opacity:0;stroke-dasharray:1;stroke-dashoffset:1}41%{opacity:1;stroke-dasharray:1;stroke-dashoffset:1}}@keyframes tlp-peek{0%,100%{transform:translateY(0)}28%{transform:translateY(2px)}62%{transform:translateY(-1.1px)}82%{transform:translateY(.3px)}}@media (prefers-reduced-motion:reduce){svg.tlp .p{animation:none!important}}\";\nexport function ensureStyles(doc = currentDocument()) {\n if (styleInjected || !doc || !doc.head) return;\n styleInjected = true;\n if (doc.getElementById('tlp-icons-style') || CSS.length < 20) return;\n const style = doc.createElement('style');\n style.id = 'tlp-icons-style';\n style.textContent = CSS;\n doc.head.appendChild(style);\n}\n"],
|
|
4
|
+
"sourcesContent": ["/* tlp-icons 0.4.1 - MIT. Icons from Lucide 1.55.0 (ISC), Tabler Icons 3.49.0 (MIT). Generated file, do not edit. */\n/* tlp-icons runtime core: icon registry, choreography baking, run engine and the hover rule.\n Plain ES module without imports so the build can also wrap it into a classic <script> bundle. */\n\n/** speed: duration multiplier. trigger: page default for icons without one. animated: false makes every icon static. */\nexport const config = { speed: 0.6, trigger: 'hover', animated: true };\n\nconst OUT = 'cubic-bezier(.22,1,.36,1)';\nconst TURN = 'cubic-bezier(.65,0,.35,1)';\nconst SINE = 'cubic-bezier(.45,.05,.55,.95)';\nexport const EASE = {\n draw: 'cubic-bezier(.65,.05,.36,1)', fillIn: 'ease', popIn: OUT, fadeIn: 'ease', slideIn: OUT, riseIn: OUT, dropIn: OUT,\n grow: OUT, growX: OUT, spin: TURN, spinBack: TURN, spinHalf: TURN, sweep: TURN, sweepHour: TURN, orbit: TURN,\n launch: \"cubic-bezier(.4,.1,.5,.95)\", roll: \"cubic-bezier(.5,.05,.4,1)\", \n};\n/** trigger=\"hold\": where each animation pauses while hovered (fraction of its duration; generated from the keyframes).\n Animations not listed (entrances) jump to their end. */\nexport const HOLD = { pop: 0.4, breathe: 0.5, jelly: 0.3, swing: 0.15, wiggle: 0.2, tilt: 0.4, nod: 0.45, strike: 0.38, hop: 0.4, lift: 0.45, sink: 0.45, nudge: 0.45, nudgeBack: 0.45, float: 0.25, flip: 0.5, spin: 0.5, spinBack: 0.5, spinHalf: 1, sweep: 0.5, sweepHour: 0.5, blink: 1, shake: 0.18, pulseRing: 1, orbit: 0.5, stretch: 0.45, buzz: 0.08, tap: 0.16, press: 0.2, beat: 0.14, flicker: 0.38, twinkle: 0.3, sway: 0.24, flutter: 0.2, bob: 0.25, drive: 0.55, launch: 0.14, roll: 0.5, tada: 0.3, rubber: 0.3, rattle: 0.1, spring: 0.4, knock: 0.14, wave: 0.18, pendulum: 0.2, twirl: 0.5, flipY: 0.38, drip: 1, fall: 1, retrace: 1, peek: 0.28 };\n\nconst NS = 'http://www.w3.org/2000/svg';\n// SSR safety: never touch `document` unless it exists (Node, workers).\nconst currentDocument = () => (typeof document === 'undefined' ? null : document);\nconst DRAWABLE = 'path,circle,rect,line,polyline,polygon,ellipse';\nconst registry = Object.create(null);\nconst aliases = Object.create(null);\nlet loader = null;\n\n/** Adds icons: { name: { svg, m } }. */\nconst waiting = Object.create(null);\nexport function register(icons, aliasMap) {\n for (const k in icons) registry[k] = icons[k];\n if (aliasMap) for (const k in aliasMap) aliases[k] = aliasMap[k];\n for (const k in waiting) {\n const icon = getIcon(k);\n if (icon) { waiting[k].forEach(fn => fn(icon)); delete waiting[k]; }\n }\n}\n/**\n * Installs the lazy loader. Icons requested before it existed (elements upgraded while the ES module graph was\n * still evaluating, e.g. tags in the HTML before <script type=\"module\">) are loaded now instead of waiting forever.\n */\nexport function setLoader(fn) {\n loader = fn;\n if (!fn) return;\n for (const name in waiting) {\n Promise.resolve(fn(resolve(name))).then(() => {\n const list = waiting[name];\n if (!list) return;\n delete waiting[name];\n const icon = getIcon(name);\n list.forEach(res => res(icon));\n }, () => {});\n }\n}\nexport function resolve(name) { return registry[name] ? name : aliases[name] || name; }\nexport function getIcon(name) { return registry[resolve(name)] || null; }\n/** Resolves with the icon data. Without a loader it waits for a later register() (classic script bundles). */\nexport function loadIcon(name) {\n const icon = getIcon(name);\n if (icon) return Promise.resolve(icon);\n if (loader) return Promise.resolve(loader(resolve(name))).then(() => getIcon(name));\n return new Promise(res => { (waiting[name] = waiting[name] || []).push(res); });\n}\n\n/** Scaled timing of every step and the total length in ms. */\nexport function timings(icon, speed = config.speed) {\n let total = 0;\n const steps = (icon.m || []).map(([part, anim, dur, delay, origin]) => {\n const t = Math.round(dur * speed), dl = Math.round((delay || 0) * speed);\n total = Math.max(total, t + dl);\n return { part, anim, t, dl, origin };\n });\n return { steps, total };\n}\n\nconst varsOf = s => {\n const v = { '--a': `tlp-${s.anim}`, '--t': `${s.t}ms`, '--dl': `${s.dl}ms`, '--e': EASE[s.anim] || SINE };\n if (s.origin) v['--o'] = s.origin;\n return v;\n};\nconst clsOf = s => `p${s.origin && /px/.test(s.origin) ? ' vb' : ''}${s.anim === 'sweepHour' ? ' hh' : ''}`;\nconst hasClass = (cls, part) => (` ${cls} `).indexOf(` ${part} `) >= 0;\n\n/** Builds a live <svg> element (CSP friendly: CSS variables are set through the CSSOM). */\nexport function createSvg(icon, doc = currentDocument()) {\n if (!doc) return null;\n const svg = doc.createElementNS(NS, 'svg');\n svg.setAttribute('viewBox', '0 0 24 24');\n svg.setAttribute('class', 'tlp');\n svg.setAttribute('aria-hidden', 'true');\n svg.setAttribute('focusable', 'false');\n svg.innerHTML = icon.svg;\n const { steps, total } = timings(icon);\n svg.dataset.total = String(total);\n for (const s of steps) {\n let targets;\n if (s.part === 'all') {\n const g = doc.createElementNS(NS, 'g');\n while (svg.firstChild) g.appendChild(svg.firstChild);\n svg.appendChild(g);\n targets = [g];\n } else {\n targets = Array.prototype.filter.call(svg.querySelectorAll('[class]'), el => hasClass(el.getAttribute('class'), s.part));\n }\n const vars = varsOf(s);\n for (const el of targets) {\n el.setAttribute('class', `${el.getAttribute('class') || ''} ${clsOf(s)}`.trim());\n for (const k in vars) el.style.setProperty(k, vars[k]);\n }\n }\n svg.querySelectorAll(DRAWABLE).forEach(el => el.setAttribute('pathLength', '1'));\n return svg;\n}\n\n/** Static or animated SVG markup string (animated markup uses inline style for the CSS variables). */\nexport function toSvgString(icon, opts = {}) {\n const sw = opts.stroke ?? 2, size = opts.size ?? 24;\n 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\"`;\n if (!opts.animated) {\n const clean = icon.svg.replace(/ class=\"([^\"]*)\"/g, (_, c) => {\n const keep = c.split(/\\s+/).filter(x => x === 'd' || x === 'f');\n return keep.length ? ` class=\"${keep.join(' ')}\"` : '';\n });\n const duo = opts.duotone ? '<style>.d{fill:currentColor;fill-opacity:.16}.f{fill:currentColor}</style>' : '<style>.f{fill:currentColor}</style>';\n return `${head}>${clean.includes('class=\"') ? duo : ''}${clean}</svg>`;\n }\n let inner = icon.svg;\n const { steps, total } = timings(icon);\n for (const s of steps) {\n const style = Object.entries(varsOf(s)).map(([k, v]) => `${k}:${v}`).join(';');\n if (s.part === 'all') { inner = `<g class=\"${clsOf(s)}\" style=\"${style}\">${inner}</g>`; continue; }\n inner = inner.replace(new RegExp(`<([a-z]+)([^>]*?) class=\"([^\"]*\\\\b${s.part}\\\\b[^\"]*)\"`, 'g'), (_, tag, pre, c) => `<${tag}${pre} class=\"${c} ${clsOf(s)}\" style=\"${style}\"`);\n }\n inner = inner.replace(/<(path|circle|rect|line|polyline|polygon|ellipse)\\b/g, '<$1 pathLength=\"1\"');\n return `${head} class=\"tlp\" data-tlp-icon data-total=\"${total}\">${inner}</svg>`;\n}\n\nconst reduced = () => typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;\n/** Static icons never animate: config.animated = false, or animated=\"false\" / data-animated=\"false\" on the icon or an ancestor. */\nconst isStatic = svg => config.animated === false || !!svg.closest('[animated=false],[data-animated=false]');\n\n/** Plays an icon's choreography once. It always finishes, even if the pointer leaves. */\nexport function run(svg, delay = 0) {\n if (!svg || svg._tlpBusy || svg._tlpHold || reduced() || isStatic(svg)) return false;\n svg._tlpBusy = true;\n const go = () => {\n svg.classList.remove('tlp-run');\n void svg.getBoundingClientRect();\n svg.classList.add('tlp-run');\n setTimeout(() => {\n svg.querySelectorAll('.hh').forEach(h => h.style.setProperty('--h0', `${(parseFloat(h.style.getPropertyValue('--h0')) || 0) + 30}deg`));\n svg.classList.remove('tlp-run');\n svg._tlpBusy = false;\n }, (+svg.dataset.total || 0) + 40);\n };\n if (delay) setTimeout(go, delay); else go();\n return true;\n}\n\nconst endOf = a => { const t = a.effect.getTiming(); return (+t.delay || 0) + (+t.duration || 0); };\nfunction track(svg, busy) {\n cancelAnimationFrame(svg._tlpRaf);\n const tick = () => { if (busy()) svg._tlpRaf = requestAnimationFrame(tick); };\n svg._tlpRaf = requestAnimationFrame(tick);\n}\n\n/**\n * trigger=\"hold\": plays forward and pauses each moving part at its hold point (HOLD), entrances jump to their end.\n * release() plays back to rest. Calling hold() while releasing turns around from the current frame.\n */\nexport function hold(svg) {\n if (!svg || svg._tlpBusy || reduced() || isStatic(svg)) return false;\n if (svg._tlpHold === 'in') return true;\n if (typeof svg.getAnimations !== 'function') return run(svg);\n if (!svg._tlpHold) {\n svg.classList.remove('tlp-run');\n void svg.getBoundingClientRect();\n svg.classList.add('tlp-run');\n svg._tlpAnims = svg.getAnimations({ subtree: true });\n for (const a of svg._tlpAnims) {\n const h = HOLD[(a.animationName || '').replace(/^tlp-/, '')];\n const t = a.effect.getTiming();\n a._tlpEnd = endOf(a);\n a._tlpAt = h === undefined ? a._tlpEnd : (+t.delay || 0) + h * (+t.duration || 0);\n if (h === undefined) { a.currentTime = a._tlpEnd; a.pause(); }\n }\n } else {\n for (const a of svg._tlpAnims) if (a._tlpAt < a._tlpEnd) { a.playbackRate = 1; a.play(); }\n }\n svg._tlpHold = 'in';\n track(svg, () => {\n let busy = false;\n for (const a of svg._tlpAnims) {\n if (a.playState !== 'running' || a.playbackRate < 0) continue;\n if (a._tlpAt < a._tlpEnd && a.currentTime >= a._tlpAt) { a.currentTime = a._tlpAt; a.pause(); } else busy = true;\n }\n return busy;\n });\n return true;\n}\n\n/** Ends a hold: held parts play back to rest, then the icon is static again. */\nexport function release(svg) {\n if (!svg || !svg._tlpHold || svg._tlpHold === 'out') return false;\n svg._tlpHold = 'out';\n const back = svg._tlpAnims.filter(a => a._tlpAt < a._tlpEnd);\n for (const a of back) { a.playbackRate = -1; a.play(); }\n track(svg, () => {\n if (svg._tlpHold !== 'out') return false;\n if (back.some(a => a.playState === 'running' && a.currentTime > 0)) return true;\n svg.classList.remove('tlp-run');\n svg._tlpHold = null;\n svg._tlpAnims = null;\n return false;\n });\n return true;\n}\n\nexport const ICON_SELECTOR = 'tlp-icon,svg[data-tlp-icon]';\nconst HOST = 'button,a,[role=button],[role=menuitem],[role=tab],[role=option],li,tr,td,th,label,summary,input,select,textarea';\n\nfunction svgOf(icon) { return icon.tagName.toLowerCase() === 'svg' ? icon : icon.querySelector('svg.tlp'); }\nfunction triggerOf(icon) { return icon.getAttribute('trigger') || icon.getAttribute('data-trigger') || config.trigger || 'hover'; }\n\n/**\n * Hover rule: hovering an icon animates it. Otherwise walk up to the nearest element that contains exactly one\n * icon and animate that one. If an element with several icons is reached first (card, menu, table row), do nothing.\n */\nexport function hoverTarget(target) {\n let el = target && target.nodeType === 1 ? target : target && target.parentElement;\n if (!el) return null;\n const own = el.closest(ICON_SELECTOR);\n if (own) return own.closest('tlp-icon') || own;\n for (let depth = 0; el && el.nodeType === 1 && el !== el.ownerDocument.body && depth < 8; depth++, el = el.parentElement) {\n const list = el.querySelectorAll(ICON_SELECTOR);\n let n = 0, found = null;\n for (const i of list) { if (i.tagName.toLowerCase() === 'svg' && i.closest('tlp-icon')) continue; n++; found = i; }\n if (n > 1) return null;\n if (n === 1) return { icon: found, scope: el };\n if (el.matches(HOST)) return null;\n }\n return null;\n}\n\nlet hoverInstalled = false;\nexport function installHover(doc = currentDocument()) {\n if (hoverInstalled || !doc) return;\n hoverInstalled = true;\n doc.addEventListener('mouseover', e => {\n const hit = hoverTarget(e.target);\n if (!hit) return;\n const icon = hit.icon || hit;\n const scope = hit.scope || icon;\n if (scope.contains(e.relatedTarget)) return;\n const trigger = triggerOf(icon);\n if (trigger === 'hover') run(svgOf(icon));\n else if (trigger === 'hold') hold(svgOf(icon));\n }, true);\n doc.addEventListener('mouseout', e => {\n const hit = hoverTarget(e.target);\n if (!hit) return;\n const icon = hit.icon || hit;\n if (triggerOf(icon) !== 'hold') return;\n // still hovering the same icon by the hover rule (e.g. from the icon onto its card): keep holding\n const next = e.relatedTarget && hoverTarget(e.relatedTarget);\n if (next && (next.icon || next) === icon) return;\n release(svgOf(icon));\n }, true);\n}\n\nlet styleInjected = false;\nexport 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)}}@keyframes tlp-buzz{0%,100%{transform:translate(0,0) rotate(0)}8%{transform:translate(-.9px,.4px) rotate(-3deg)}16%{transform:translate(.9px,-.4px) rotate(3deg)}24%{transform:translate(-.8px,.4px) rotate(-2.6deg)}32%{transform:translate(.8px,-.3px) rotate(2.6deg)}40%{transform:translate(-.6px,.3px) rotate(-2deg)}48%{transform:translate(.6px,-.2px) rotate(2deg)}58%{transform:translate(-.4px,.2px) rotate(-1.2deg)}68%{transform:translate(.3px,-.1px) rotate(1deg)}80%{transform:translate(-.15px,0) rotate(-.4deg)}}@keyframes tlp-tap{0%,100%{transform:translateY(0) scale(1)}16%{transform:translateY(1.8px) scale(.94)}30%{transform:translateY(-.3px) scale(1.02)}44%{transform:translateY(0) scale(1)}60%{transform:translateY(1.8px) scale(.94)}78%{transform:translateY(-.4px) scale(1.02)}90%{transform:translateY(.1px) scale(.995)}}@keyframes tlp-press{0%,100%{transform:scale(1)}20%{transform:scale(.88)}42%{transform:scale(.88)}62%{transform:scale(1.07)}80%{transform:scale(.98)}91%{transform:scale(1.01)}}@keyframes tlp-beat{0%,100%{transform:scale(1)}14%{transform:scale(1.16)}28%{transform:scale(.98)}42%{transform:scale(1.09)}58%{transform:scale(1)}}@keyframes tlp-flicker{0%,100%{opacity:1;transform:scale(1)}8%{opacity:.55;transform:scale(.97)}16%{opacity:.95;transform:scale(1.02)}26%{opacity:.4;transform:scale(.96)}38%{opacity:1;transform:scale(1.03)}50%{opacity:.7;transform:scale(.99)}62%{opacity:1;transform:scale(1.015)}78%{opacity:.85;transform:scale(1)}}@keyframes tlp-twinkle{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(.8) rotate(-14deg)}60%{transform:scale(1.18) rotate(8deg)}80%{transform:scale(.97) rotate(-2deg)}}@keyframes tlp-sway{0%,100%{transform:rotate(0)}24%{transform:rotate(6deg)}48%{transform:rotate(-4.5deg)}70%{transform:rotate(2.5deg)}86%{transform:rotate(-1deg)}}@keyframes tlp-flutter{0%,100%{transform:scale(1,1)}20%{transform:skewY(-7deg) scaleX(.95)}42%{transform:skewY(6deg) scaleX(1.03)}62%{transform:skewY(-3.5deg) scaleX(.98)}82%{transform:skewY(1.5deg) scaleX(1.01)}}@keyframes tlp-bob{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-1.8px) rotate(-5deg)}52%{transform:translateY(1.2px) rotate(4deg)}76%{transform:translateY(-.8px) rotate(-2deg)}}@keyframes tlp-drive{0%,100%{transform:translateX(0) rotate(0)}22%{transform:translateX(-1px) rotate(-3.5deg)}55%{transform:translateX(2.4px) rotate(1.2deg)}78%{transform:translateX(-.3px) rotate(-.4deg)}}@keyframes tlp-launch{0%,100%{opacity:1;transform:translate(0,0)}14%{opacity:1;transform:translate(-.8px,.8px)}42%{opacity:0;transform:translate(5px,-5px)}43%{opacity:0;transform:translate(-5px,5px)}72%{opacity:1;transform:translate(.5px,-.5px)}}@keyframes tlp-roll{0%{transform:rotate(0) translateX(0)}50%{transform:rotate(180deg) translateX(1.2px)}100%{transform:rotate(360deg) translateX(0)}}@keyframes tlp-zoomIn{0%{opacity:0;transform:scale(1.35)}55%{opacity:1;transform:scale(.96)}78%{transform:scale(1.02)}100%{opacity:1;transform:scale(1)}}@keyframes tlp-spiralIn{0%{opacity:0;transform:rotate(-120deg) scale(0)}55%{opacity:1;transform:rotate(7deg) scale(1.1)}78%{transform:rotate(-2deg) scale(.98)}100%{opacity:1;transform:rotate(0) scale(1)}}@keyframes tlp-swingIn{0%{opacity:0;transform:rotate(-25deg)}30%{opacity:1;transform:rotate(9deg)}55%{transform:rotate(-4deg)}78%{transform:rotate(1.5deg)}100%{opacity:1;transform:rotate(0)}}@keyframes tlp-flipIn{0%{opacity:0;transform:scaleX(0)}50%{opacity:1;transform:scaleX(1.1)}75%{transform:scaleX(.96)}100%{opacity:1;transform:scaleX(1)}}@keyframes tlp-focusIn{0%{opacity:.15;filter:blur(1.6px);transform:scale(1.12)}60%{opacity:1;filter:blur(.5px);transform:scale(.98)}100%{opacity:1;filter:blur(0);transform:scale(1)}}@keyframes tlp-bloom{0%{opacity:0;transform:rotate(-45deg) scale(0)}55%{opacity:1;transform:rotate(8deg) scale(1.12)}78%{transform:rotate(-2deg) scale(.98)}100%{opacity:1;transform:rotate(0) scale(1)}}@keyframes tlp-rollIn{0%{opacity:0;transform:translateX(-5px) rotate(-180deg)}70%{opacity:1;transform:translateX(.6px) rotate(8deg)}100%{opacity:1;transform:translateX(0) rotate(0)}}@keyframes tlp-tada{0%,100%{transform:scale(1) rotate(0)}10%,20%{transform:scale(.92) rotate(-3deg)}30%,50%,70%{transform:scale(1.1) rotate(3deg)}40%,60%{transform:scale(1.1) rotate(-3deg)}82%{transform:scale(1.02) rotate(0)}}@keyframes tlp-rubber{0%,100%{transform:scale(1,1)}30%{transform:scale(1.2,.8)}45%{transform:scale(.85,1.15)}62%{transform:scale(1.08,.92)}78%{transform:scale(.97,1.03)}90%{transform:scale(1.01,.99)}}@keyframes tlp-rattle{0%,100%{transform:rotate(0)}10%{transform:rotate(-9deg)}22%{transform:rotate(8deg)}34%{transform:rotate(-7deg)}46%{transform:rotate(6deg)}58%{transform:rotate(-4deg)}70%{transform:rotate(3deg)}82%{transform:rotate(-1.5deg)}92%{transform:rotate(.6deg)}}@keyframes tlp-spring{0%,100%{transform:translateY(0) scale(1,1)}16%{transform:translateY(0) scale(1.08,.82)}40%{transform:translateY(-3px) scale(.94,1.12)}62%{transform:translateY(0) scale(1.05,.94)}80%{transform:translateY(0) scale(.99,1.02)}}@keyframes tlp-knock{0%,100%{transform:translateX(0) scale(1,1)}14%{transform:translateX(1.9px) scale(.96,1)}28%{transform:translateX(0) scale(1,1)}42%{transform:translateX(1.9px) scale(.96,1)}58%{transform:translateX(0) scale(1,1)}72%{transform:translateX(.5px) scale(.99,1)}}@keyframes tlp-wave{0%,100%{transform:rotate(0)}18%{transform:rotate(15deg)}36%{transform:rotate(-13deg)}54%{transform:rotate(10deg)}70%{transform:rotate(-6deg)}85%{transform:rotate(2deg)}}@keyframes tlp-pendulum{0%,100%{transform:rotate(0)}20%{transform:rotate(22deg)}42%{transform:rotate(-16deg)}62%{transform:rotate(9deg)}80%{transform:rotate(-4deg)}92%{transform:rotate(1.5deg)}}@keyframes tlp-twirl{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.82)}100%{transform:rotate(360deg) scale(1)}}@keyframes tlp-flipY{0%,100%{transform:scaleY(1)}38%{transform:scaleY(-1.08)}52%{transform:scaleY(-1)}66%{transform:scaleY(-1.05)}}@keyframes tlp-drip{0%,100%{opacity:1;transform:translateY(0) scale(1)}34%{opacity:0;transform:translateY(3px) scale(.82)}35%{opacity:0;transform:translateY(-3px) scale(.82)}68%{opacity:1;transform:translateY(.6px) scale(1.04)}84%{opacity:1;transform:translateY(-.2px) scale(1)}}@keyframes tlp-fall{0%,100%{opacity:1;transform:translateY(0)}38%{opacity:0;transform:translateY(3.5px)}39%{opacity:0;transform:translateY(-3.5px)}72%{opacity:1;transform:translateY(.7px)}86%{opacity:1;transform:translateY(-.2px)}}@keyframes tlp-retrace{0%,100%{opacity:1;stroke-dasharray:1;stroke-dashoffset:0}30%{opacity:1;stroke-dasharray:1;stroke-dashoffset:.96}33%{opacity:0;stroke-dasharray:1;stroke-dashoffset:1}40%{opacity:0;stroke-dasharray:1;stroke-dashoffset:1}41%{opacity:1;stroke-dasharray:1;stroke-dashoffset:1}}@keyframes tlp-peek{0%,100%{transform:translateY(0)}28%{transform:translateY(2px)}62%{transform:translateY(-1.1px)}82%{transform:translateY(.3px)}}@media (prefers-reduced-motion:reduce){svg.tlp .p{animation:none!important}}\";\nexport function ensureStyles(doc = currentDocument()) {\n if (styleInjected || !doc || !doc.head) return;\n styleInjected = true;\n if (doc.getElementById('tlp-icons-style') || CSS.length < 20) return;\n const style = doc.createElement('style');\n style.id = 'tlp-icons-style';\n style.textContent = CSS;\n doc.head.appendChild(style);\n}\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["config", "OUT", "TURN", "SINE", "EASE", "HOLD", "NS", "currentDocument", "DRAWABLE", "registry", "aliases", "loader", "waiting", "register", "icons", "aliasMap", "k", "icon", "getIcon", "fn", "setLoader", "name", "resolve", "list", "res", "loadIcon", "timings", "speed", "total", "part", "anim", "dur", "delay", "origin", "t", "dl", "varsOf", "s", "v", "clsOf", "hasClass", "cls", "createSvg", "doc", "svg", "steps", "targets", "g", "el", "vars", "toSvgString", "opts", "sw", "size", "head", "clean", "_", "c", "keep", "x", "duo", "inner", "style", "tag", "pre", "reduced", "isStatic", "run", "go", "h", "endOf", "a", "track", "busy", "tick", "hold", "release", "back", "ICON_SELECTOR", "HOST", "svgOf", "triggerOf", "hoverTarget", "target", "own", "depth", "n", "found", "i", "hoverInstalled", "installHover", "e", "hit", "trigger", "next", "styleInjected", "CSS", "ensureStyles"]
|
|
7
7
|
}
|
package/dist/element.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
/* tlp-icons 0.4.
|
|
1
|
+
/* tlp-icons 0.4.1 - MIT. Icons from Lucide 1.55.0 (ISC), Tabler Icons 3.49.0 (MIT). Generated file, do not edit. */
|
|
2
2
|
import{loadIcon as h,createSvg as a,run as r,hold as c,release as d,installHover as p,ensureStyles as f}from"./core.js";const g=1200,l=["name","size","stroke","trigger","duotone","flip","animated"],m=["hover","hold","loop","click","none"],u=new Set,b=()=>typeof process<"u"&&!!process.env&&process.env.NODE_ENV==="production";function A(i){u.has(i)||b()||typeof console>"u"||(u.add(i),console.warn(`[tlp-icons] unknown icon "${i}". Browse names at https://tlp-icons.netlify.app/icons/`))}const n=typeof HTMLElement>"u"?void 0:class extends HTMLElement{static get observedAttributes(){return l}constructor(){super(),this._token=0;for(const t of l)if(Object.prototype.hasOwnProperty.call(this,t)){const e=this[t];delete this[t],this[t]=e}}get name(){return this.getAttribute("name")||""}set name(t){this._reflect("name",t)}get size(){return this.getAttribute("size")||""}set size(t){this._reflect("size",t)}get stroke(){return this.getAttribute("stroke")||""}set stroke(t){this._reflect("stroke",t)}get trigger(){const t=this.getAttribute("trigger");return m.includes(t)?t:"hover"}set trigger(t){this._reflect("trigger",t)}get duotone(){return this.hasAttribute("duotone")&&this.getAttribute("duotone")!=="false"}set duotone(t){t===!0||t===""||t==="true"?this.setAttribute("duotone",""):this.removeAttribute("duotone")}get flip(){const t=this.getAttribute("flip");return t==="rtl"||t==="x"?t:null}set flip(t){this._reflect("flip",t)}get animated(){return this.getAttribute("animated")!=="false"}set animated(t){t===!1||t==="false"?this.setAttribute("animated","false"):this.removeAttribute("animated")}_reflect(t,e){e==null||e===!1?this.removeAttribute(t):this.setAttribute(t,String(e))}connectedCallback(){f(this.ownerDocument),p(this.ownerDocument),this.hasAttribute("role")||this.setAttribute("aria-hidden","true"),this.render(),this.setupTrigger()}disconnectedCallback(){clearTimeout(this._loop),this._loop=null,this._token++}attributeChangedCallback(t,e,s){!this.isConnected||e===s||(t==="size"||t==="stroke"?this.applyVars():t==="name"?this.render():t==="trigger"?this.setupTrigger():t==="duotone"||t==="flip"?this.applyFlags():t==="animated"&&s==="false"&&(this.release(),this.setupTrigger()))}applyVars(){const t=this.getAttribute("size"),e=this.getAttribute("stroke");t?this.style.setProperty("--tlp-size",/^\d+(\.\d+)?$/.test(t)?`${t}px`:t):this.style.removeProperty("--tlp-size"),e?this.style.setProperty("--tlp-stroke",e):this.style.removeProperty("--tlp-stroke")}applyFlags(){const t=this.querySelector("svg.tlp");t&&(t.toggleAttribute("data-duotone",this.duotone),this.flip?t.setAttribute("data-flip",this.flip):t.removeAttribute("data-flip"))}render(){this.applyVars();const t=++this._token,e=this.getAttribute("name");if(!e){this.replaceChildren(),this.removeAttribute("data-missing");return}h(e).then(s=>{if(t!==this._token||!this.isConnected||this.getAttribute("name")!==e)return;if(!s){this.replaceChildren(),this.setAttribute("data-missing",""),A(e);return}this.removeAttribute("data-missing");const o=a(s,this.ownerDocument);o&&(this.replaceChildren(o),s.r?this.dataset.dir="":delete this.dataset.dir,this.applyFlags(),this.dispatchEvent(new CustomEvent("tlp-ready",{bubbles:!0,composed:!0,detail:{name:e}})))},()=>{t===this._token&&this.isConnected&&(this.replaceChildren(),this.setAttribute("data-missing",""))})}setupTrigger(){clearTimeout(this._loop),this._loop=null;const t=this.getAttribute("trigger");if(t==="loop"){const e=()=>{const s=this.querySelector("svg.tlp");s&&r(s),this._loop=setTimeout(e,(s&&+s.dataset.total||900)+g)};this._loop=setTimeout(e,60)}t==="click"&&!this._clickBound&&(this._clickBound=!0,this.addEventListener("click",()=>{this.getAttribute("trigger")==="click"&&r(this.querySelector("svg.tlp"))}))}play(){return r(this.querySelector("svg.tlp"))}hold(){return c(this.querySelector("svg.tlp"))}release(){return d(this.querySelector("svg.tlp"))}};function y(i="tlp-icon"){return!n||typeof customElements>"u"?!1:(customElements.get(i)||customElements.define(i,i==="tlp-icon"?n:class extends n{}),!0)}y();export{n as TlpIcon,y as define};
|
|
3
3
|
//# sourceMappingURL=element.js.map
|
package/dist/element.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["element.js"],
|
|
4
|
-
"sourcesContent": ["/* tlp-icons 0.4.
|
|
4
|
+
"sourcesContent": ["/* tlp-icons 0.4.1 - MIT. Icons from Lucide 1.55.0 (ISC), Tabler Icons 3.49.0 (MIT). Generated file, do not edit. */\n/* <tlp-icon name=\"bell\" size=\"24\" stroke=\"1.75\" trigger=\"hover|hold|loop|click|none\" duotone flip=\"rtl|x\" animated=\"false\"> */\nimport { loadIcon, createSvg, run, hold, release, installHover, ensureStyles } from './core.js';\n\nconst LOOP_PAUSE = 1200;\nconst ATTRS = ['name', 'size', 'stroke', 'trigger', 'duotone', 'flip', 'animated'];\nconst TRIGGERS = ['hover', 'hold', 'loop', 'click', 'none'];\nconst warned = new Set();\nconst isProduction = () => typeof process !== 'undefined' && !!process.env && process.env.NODE_ENV === 'production';\n\nfunction warnMissing(name) {\n if (warned.has(name) || isProduction() || typeof console === 'undefined') return;\n warned.add(name);\n console.warn(`[tlp-icons] unknown icon \"${name}\". Browse names at https://tlp-icons.netlify.app/icons/`);\n}\n\n// SSR safety: nothing below touches HTMLElement / customElements / document at module level outside a guard,\n// so `import 'tlp-icons/element'` works in Node (Next.js, Nuxt, Angular Universal, SvelteKit). On the server\n// TlpIcon is undefined and define() is a no-op.\nexport const TlpIcon = typeof HTMLElement === 'undefined' ? undefined : class TlpIcon extends HTMLElement {\n static get observedAttributes() { return ATTRS; }\n\n constructor() {\n super();\n this._token = 0;\n // Frameworks may set properties before the element is defined; replay them through the setters.\n for (const prop of ATTRS) {\n if (Object.prototype.hasOwnProperty.call(this, prop)) {\n const value = this[prop];\n delete this[prop];\n this[prop] = value;\n }\n }\n }\n\n // ---- properties (reflect to attributes)\n get name() { return this.getAttribute('name') || ''; }\n set name(v) { this._reflect('name', v); }\n get size() { return this.getAttribute('size') || ''; }\n set size(v) { this._reflect('size', v); }\n get stroke() { return this.getAttribute('stroke') || ''; }\n set stroke(v) { this._reflect('stroke', v); }\n get trigger() { const t = this.getAttribute('trigger'); return TRIGGERS.includes(t) ? t : 'hover'; }\n set trigger(v) { this._reflect('trigger', v); }\n get duotone() { return this.hasAttribute('duotone') && this.getAttribute('duotone') !== 'false'; }\n set duotone(v) {\n if (v === true || v === '' || v === 'true') this.setAttribute('duotone', '');\n else this.removeAttribute('duotone');\n }\n get flip() { const f = this.getAttribute('flip'); return f === 'rtl' || f === 'x' ? f : null; }\n set flip(v) { this._reflect('flip', v); }\n /** false = static icon (never animates). Default true. */\n get animated() { return this.getAttribute('animated') !== 'false'; }\n set animated(v) {\n if (v === false || v === 'false') this.setAttribute('animated', 'false');\n else this.removeAttribute('animated');\n }\n\n _reflect(attr, v) {\n if (v === null || v === undefined || v === false) this.removeAttribute(attr);\n else this.setAttribute(attr, String(v));\n }\n\n connectedCallback() {\n ensureStyles(this.ownerDocument);\n installHover(this.ownerDocument);\n if (!this.hasAttribute('role')) this.setAttribute('aria-hidden', 'true');\n this.render();\n this.setupTrigger();\n }\n\n disconnectedCallback() {\n clearTimeout(this._loop);\n this._loop = null;\n this._token++; // abandon any in-flight load so it never renders into a detached node\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n if (!this.isConnected || oldValue === newValue) return;\n if (attr === 'size' || attr === 'stroke') this.applyVars();\n else if (attr === 'name') this.render();\n else if (attr === 'trigger') this.setupTrigger();\n else if (attr === 'duotone' || attr === 'flip') this.applyFlags();\n else if (attr === 'animated' && newValue === 'false') { this.release(); this.setupTrigger(); }\n }\n\n applyVars() {\n const size = this.getAttribute('size');\n const stroke = this.getAttribute('stroke');\n if (size) this.style.setProperty('--tlp-size', /^\\d+(\\.\\d+)?$/.test(size) ? `${size}px` : size);\n else this.style.removeProperty('--tlp-size');\n if (stroke) this.style.setProperty('--tlp-stroke', stroke);\n else this.style.removeProperty('--tlp-stroke');\n }\n\n /** duotone / flip are styled by CSS attribute selectors; the state is mirrored here for JS-driven behaviour. */\n applyFlags() {\n const svg = this.querySelector('svg.tlp');\n if (svg) {\n svg.toggleAttribute('data-duotone', this.duotone);\n if (this.flip) svg.setAttribute('data-flip', this.flip); else svg.removeAttribute('data-flip');\n }\n }\n\n render() {\n this.applyVars();\n const token = ++this._token;\n const name = this.getAttribute('name');\n if (!name) { this.replaceChildren(); this.removeAttribute('data-missing'); return; }\n loadIcon(name).then(icon => {\n if (token !== this._token || !this.isConnected || this.getAttribute('name') !== name) return;\n if (!icon) {\n this.replaceChildren();\n this.setAttribute('data-missing', '');\n warnMissing(name);\n return;\n }\n this.removeAttribute('data-missing');\n const svg = createSvg(icon, this.ownerDocument);\n if (!svg) return;\n this.replaceChildren(svg);\n if (icon.r) this.dataset.dir = ''; else delete this.dataset.dir;\n this.applyFlags();\n this.dispatchEvent(new CustomEvent('tlp-ready', { bubbles: true, composed: true, detail: { name } }));\n }, () => {\n if (token === this._token && this.isConnected) { this.replaceChildren(); this.setAttribute('data-missing', ''); }\n });\n }\n\n setupTrigger() {\n clearTimeout(this._loop);\n this._loop = null;\n const trigger = this.getAttribute('trigger');\n if (trigger === 'loop') {\n const tick = () => {\n const svg = this.querySelector('svg.tlp');\n if (svg) run(svg);\n this._loop = setTimeout(tick, ((svg && +svg.dataset.total) || 900) + LOOP_PAUSE);\n };\n this._loop = setTimeout(tick, 60);\n }\n if (trigger === 'click' && !this._clickBound) {\n this._clickBound = true;\n this.addEventListener('click', () => { if (this.getAttribute('trigger') === 'click') run(this.querySelector('svg.tlp')); });\n }\n }\n\n /** Plays the animation once. */\n play() { return run(this.querySelector('svg.tlp')); }\n /** Plays to the hold point and stays there (what trigger=\"hold\" does on hover). */\n hold() { return hold(this.querySelector('svg.tlp')); }\n /** Returns from a hold to rest. */\n release() { return release(this.querySelector('svg.tlp')); }\n};\n\n/**\n * Registers the custom element (done automatically on import in the browser). Safe to call on the server and\n * safe to call twice. Returns true when the element is (now) defined.\n */\nexport function define(tag = 'tlp-icon') {\n if (!TlpIcon || typeof customElements === 'undefined') return false;\n if (!customElements.get(tag)) customElements.define(tag, tag === 'tlp-icon' ? TlpIcon : class extends TlpIcon {});\n return true;\n}\n\ndefine();\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["loadIcon", "createSvg", "run", "hold", "release", "installHover", "ensureStyles", "LOOP_PAUSE", "ATTRS", "TRIGGERS", "warned", "isProduction", "warnMissing", "name", "TlpIcon", "prop", "value", "v", "f", "attr", "oldValue", "newValue", "size", "stroke", "svg", "token", "icon", "trigger", "tick", "define", "tag"]
|
|
7
7
|
}
|