comparison design_system/src/components/icon.js @ 258:60a876c4587a

[ui] Add semantic primitive ownership Build a layered Zenbu token and sizing system, make authored controls use native-underneath primitives, migrate mrjunejune without imposing visual surfaces, and document/enforce HTML ownership in the catalog and wiki. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Wed, 05 Aug 2026 05:25:40 -0700
parents 2b6e732087ff
children 41a49c29a28f
comparison
equal deleted inserted replaced
257:609d3c6aff4e 258:60a876c4587a
26 history: ["M4 5v5h5", "M5 9a8 8 0 1 0 2-4", "M12 7v5l3 2"], 26 history: ["M4 5v5h5", "M5 9a8 8 0 1 0 2-4", "M12 7v5l3 2"],
27 info: ["M12 11v6", "M12 7h.01", "M3 12a9 9 0 1 0 18 0 9 9 0 1 0-18 0"], 27 info: ["M12 11v6", "M12 7h.01", "M3 12a9 9 0 1 0 18 0 9 9 0 1 0-18 0"],
28 menu: ["M4 6h16", "M4 12h16", "M4 18h16"], 28 menu: ["M4 6h16", "M4 12h16", "M4 18h16"],
29 moon: ["M20 15a8 8 0 0 1-11-11 9 9 0 1 0 11 11Z"], 29 moon: ["M20 15a8 8 0 0 1-11-11 9 9 0 1 0 11 11Z"],
30 more: ["M5 12h.01", "M12 12h.01", "M19 12h.01"], 30 more: ["M5 12h.01", "M12 12h.01", "M19 12h.01"],
31 offline: [
32 "M5 12a7 7 0 0 1 10.5-6",
33 "M19 12a7 7 0 0 0-.7-3",
34 "M8.5 15.5a5 5 0 0 1 7 0",
35 "M11.5 19h1",
36 "M3 3l18 18",
37 ],
31 pause: ["M8 5v14", "M16 5v14"], 38 pause: ["M8 5v14", "M16 5v14"],
39 paw: [
40 "M8 11c-1.7 0-3-1.5-3-3.3S6 4.5 7.7 4.5s2.5 1.5 2.5 3.3S9.7 11 8 11Z",
41 "M16 11c-1.7 0-2.2-1.5-2.2-3.2s.8-3.3 2.5-3.3S19 6 19 7.7 17.7 11 16 11Z",
42 "M5.3 15c-1.5 0-2.8-1.2-2.8-2.7s1.2-2.8 2.7-2.8S8 10.7 8 12.2 6.8 15 5.3 15Z",
43 "M18.7 15c-1.5 0-2.7-1.2-2.7-2.8s1.2-2.7 2.8-2.7 2.7 1.2 2.7 2.8-1.3 2.7-2.8 2.7Z",
44 "M7 18.5c0-3 2.2-5.5 5-5.5s5 2.5 5 5.5c0 1.5-1.2 2.5-2.7 2.5-.8 0-1.5-.4-2.3-.4s-1.5.4-2.3.4C8.2 21 7 20 7 18.5Z",
45 ],
32 play: ["m8 5 11 7-11 7Z"], 46 play: ["m8 5 11 7-11 7Z"],
33 repository: ["M4 4h13a3 3 0 0 1 3 3v13H7a3 3 0 0 1-3-3Z", "M8 4v16"], 47 repository: ["M4 4h13a3 3 0 0 1 3 3v13H7a3 3 0 0 1-3-3Z", "M8 4v16"],
34 retry: ["M4 4v6h6", "M5 9a8 8 0 1 1 2 8"], 48 retry: ["M4 4v6h6", "M5 9a8 8 0 1 1 2 8"],
35 search: ["M4 11a7 7 0 1 0 14 0 7 7 0 1 0-14 0", "m16 16 4 4"], 49 search: ["M4 11a7 7 0 1 0 14 0 7 7 0 1 0-14 0", "m16 16 4 4"],
36 settings: [ 50 settings: [
97 this.removeAttribute("role"); 111 this.removeAttribute("role");
98 this.removeAttribute("aria-label"); 112 this.removeAttribute("aria-label");
99 this.setAttribute("aria-hidden", "true"); 113 this.setAttribute("aria-hidden", "true");
100 } 114 }
101 this.dataset.zenIcon = known ? requested : "alert"; 115 this.dataset.zenIcon = known ? requested : "alert";
102 this.style.setProperty("--zen-icon-size", safeSize(this.getAttribute("size"))); 116 this.style.setProperty(
117 "--zenbu-icon-size",
118 safeSize(this.getAttribute("size")),
119 );
103 this.replaceChildren(svg); 120 this.replaceChildren(svg);
104 } 121 }
105 } 122 }
106 123
107 if (!customElements.get("zen-icon")) { 124 if (!customElements.get("zen-icon")) {