@whydrf/nava-icon-web-components 1.4.0 → 1.4.2

package/README.md

@@ -12,7 +12,7 @@
 
 <p align="center">
   <a href="https://www.npmjs.com/package/@whydrf/nava-icon-web-components"><img src="https://img.shields.io/npm/v/@whydrf/nava-icon-web-components?style=flat-square&color=purple" alt="npm version"></a>
-  <a href="https://github.com/vahidGhadiri/nava-icon/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@whydrf/nava-icon-web-components?style=flat-square" alt="license"></a>
+  <a href="https://github.com/whydrf/nava-icon/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@whydrf/nava-icon-web-components?style=flat-square" alt="license"></a>
   <a href="https://www.npmjs.com/package/@whydrf/nava-icon-web-components"><img src="https://img.shields.io/npm/dm/@whydrf/nava-icon-web-components?style=flat-square&color=purple" alt="npm downloads"></a>
 </p>
 
@@ -20,7 +20,7 @@
 
 ## What is this?
 
-`@whydrf/nava-icon-web-components` is the framework-agnostic binding for [Nava Icons](https://vahidghadiri.github.io/Nava-icon/) — a collection of 950+ handcrafted SVG icons. Each icon is a native Web Component using the Custom Elements API, so it works everywhere: vanilla HTML, React, Vue, Angular, Svelte, Solid, Lit — any framework that can render HTML.
+`@whydrf/nava-icon-web-components` is the framework-agnostic binding for [Nava Icons](https://github.com/whydrf/nava-icon) — a collection of 950+ handcrafted SVG icons. Each icon is a native Web Component using the Custom Elements API, so it works everywhere: vanilla HTML, React, Vue, Angular, Svelte, Solid, Lit — any framework that can render HTML.
 
 Unlike icon fonts or SVG sprites, every icon here is a proper Custom Element with Shadow DOM encapsulation. You use it in your markup exactly like any native HTML element — no framework, no build step, no configuration.
 
@@ -88,7 +88,7 @@ When you import the package in a `<script type="module">`, only the icons actual
 **Important:** Tree shaking only works with **static imports** in a module context. If you dynamically add icon elements at runtime (via `document.createElement`), all icons will be included because the bundler can't trace them.
 
 ```html
-<!-- ✓ Tree-shakeable — only home and search are bundled -->
+<!-- ✅ Tree-shakeable — only home and search are bundled -->
 <script type="module">
   import '@whydrf/nava-icon-web-components'
 </script>
@@ -193,7 +193,7 @@ You can theme icons using CSS custom properties that inherit through the Shadow
 | **Weather** | `sun`, `moon`, `cloud`, `droplet`, `wind`, `umbrella` |
 | **Shopping** | `cart`, `credit-card`, `bag`, `tag`, `badge`, `diamond` |
 
-Browse all 950+ icons with live preview at **[https://vahidghadiri.github.io/Nava-icon/](https://vahidghadiri.github.io/Nava-icon/)**.
+Browse all 950+ icons with live preview at [**nava-icons.dev**](https://nava-icons.dev).
 
 ## Accessibility
 
@@ -335,4 +335,4 @@ Each icon is registered as a custom element with the prefix `nava-icon-` followe
 
 ## License
 
-[MIT](https://github.com/vahidGhadiri/nava-icon/blob/main/LICENSE) &copy; [whydrf](https://github.com/whydrf)
+[MIT](https://github.com/whydrf/nava-icon/blob/main/LICENSE) &copy; [whydrf](https://github.com/whydrf)

package/dist/chunk-22DZSCMS.js

@@ -0,0 +1,51 @@
+import {
+  getNavaIconConfig
+} from "./chunk-6PLL5KGQ.js";
+
+// src/icons/message-x.ts
+var NavaIconMessageX = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width", "mode"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const config = getNavaIconConfig();
+    const size = this.getAttribute("size") ?? config.size ?? 24;
+    const color = this.getAttribute("color") ?? config.color ?? "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") ?? config.strokeWidth ?? 0.5;
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const paths = isFilled ? `<path d="M20 2H4C2.897 2 2 2.894 2 3.992V16.008C2 17.106 2.897 18 4 18H7V22L13.351 18H20C21.103 18 22 17.106 22 16.008V3.992C21.9984 3.46279 21.7869 2.95583 21.412 2.58237C21.037 2.20891 20.5292 1.99947 20 2ZM16.707 13.293L15.293 14.707L12 11.414L8.707 14.707L7.293 13.293L10.586 10L7.293 6.707L8.707 5.293L12 8.586L15.293 5.293L16.707 6.707L13.414 10L16.707 13.293Z" />` : `<path d="M20 2H4C2.897 2 2 2.897 2 4V16C2 17.103 2.897 18 4 18H7V21.767L13.277 18H20C21.103 18 22 17.103 22 16V4C22 2.897 21.103 2 20 2ZM20 16H12.723L9 18.233V16H4V4H20V16Z" />
+<path d="M9.70703 13.707L12 11.414L14.293 13.707L15.707 12.293L13.414 10L15.707 7.707L14.293 6.293L12 8.586L9.70703 6.293L8.29303 7.707L10.586 10L8.29303 12.293L9.70703 13.707Z" />`;
+    const strokeBased = isFilled ? false : false;
+    const hasStrokeWidth = strokeWidth != null;
+    this.shadowRoot.innerHTML = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="${size}"
+        height="${size}"
+        fill="${strokeBased ? "none" : color}"
+        stroke="${strokeBased ? color : hasStrokeWidth ? color : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : hasStrokeWidth ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+        ${hasStrokeWidth && !strokeBased ? 'style="paint-order: stroke fill"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-message-x")) {
+  customElements.define("icon-message-x", NavaIconMessageX);
+}

package/dist/chunk-25PSX5DC.js

@@ -0,0 +1,50 @@
+import {
+  getNavaIconConfig
+} from "./chunk-6PLL5KGQ.js";
+
+// src/icons/file-import.ts
+var NavaIconFileImport = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width", "mode"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const config = getNavaIconConfig();
+    const size = this.getAttribute("size") ?? config.size ?? 24;
+    const color = this.getAttribute("color") ?? config.color ?? "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") ?? config.strokeWidth ?? 0.5;
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const paths = isFilled ? `<path d="M20 14V8L14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V16H13V19L8 15L13 11V14H20ZM13 4L18 9H13V4Z" />` : `<path d="M20 14V8L14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V16H13V19L8 15L13 11V14H20ZM13 4L18 9H13V4Z" />`;
+    const strokeBased = isFilled ? false : false;
+    const hasStrokeWidth = strokeWidth != null;
+    this.shadowRoot.innerHTML = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="${size}"
+        height="${size}"
+        fill="${strokeBased ? "none" : color}"
+        stroke="${strokeBased ? color : hasStrokeWidth ? color : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : hasStrokeWidth ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+        ${hasStrokeWidth && !strokeBased ? 'style="paint-order: stroke fill"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-file-import")) {
+  customElements.define("icon-file-import", NavaIconFileImport);
+}

package/dist/chunk-27DYXQ7Q.js

@@ -0,0 +1,51 @@
+import {
+  getNavaIconConfig
+} from "./chunk-6PLL5KGQ.js";
+
+// src/icons/shield-minus.ts
+var NavaIconShieldMinus = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width", "mode"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const config = getNavaIconConfig();
+    const size = this.getAttribute("size") ?? config.size ?? 24;
+    const color = this.getAttribute("color") ?? config.color ?? "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") ?? config.strokeWidth ?? 0.5;
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const paths = isFilled ? `<path d="M20.43 5.76001L12.43 2.20001C12.3011 2.14205 12.1614 2.11209 12.02 2.11209C11.8787 2.11209 11.7389 2.14205 11.61 2.20001L3.61002 5.76001C3.43611 5.83817 3.28817 5.96442 3.18363 6.12387C3.0791 6.28333 3.02233 6.46935 3.02002 6.66001C3.02002 9.03001 3.46002 17.46 11.53 21.77C11.682 21.8578 11.8545 21.904 12.03 21.904C12.2056 21.904 12.378 21.8578 12.53 21.77C20.53 17.47 21.11 9.06001 21.1 6.67001C21.0931 6.46845 21.0255 6.27369 20.9059 6.11129C20.7863 5.94889 20.6204 5.82644 20.43 5.76001ZM16 12.76H8.00002V10.76H16V12.76Z" />` : `<path d="M20.41 6.10999L12.41 2.10999C12.2732 2.03647 12.1203 1.99799 11.965 1.99799C11.8097 1.99799 11.6568 2.03647 11.52 2.10999L3.51999 6.10999C3.37486 6.18854 3.25143 6.30179 3.16069 6.43963C3.06996 6.57747 3.01475 6.73563 2.99999 6.89999C2.99999 7.00999 1.99999 17.67 11.59 21.9C11.718 21.9621 11.8578 21.9962 12 22C12.1384 22.0001 12.275 21.9694 12.4 21.91C21.92 17.67 21 6.99999 21 6.89999C20.9783 6.72856 20.9125 6.56567 20.8091 6.42722C20.7057 6.28877 20.5682 6.17947 20.41 6.10999ZM12 19.9C5.19999 16.63 4.87999 9.63999 4.92999 7.62999L11.93 4.11999L18.93 7.62999C19.06 9.63999 18.74 16.63 12 19.9Z" />
+<path d="M8 11H16V13H8V11Z" />`;
+    const strokeBased = isFilled ? false : false;
+    const hasStrokeWidth = strokeWidth != null;
+    this.shadowRoot.innerHTML = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="${size}"
+        height="${size}"
+        fill="${strokeBased ? "none" : color}"
+        stroke="${strokeBased ? color : hasStrokeWidth ? color : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : hasStrokeWidth ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+        ${hasStrokeWidth && !strokeBased ? 'style="paint-order: stroke fill"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-shield-minus")) {
+  customElements.define("icon-shield-minus", NavaIconShieldMinus);
+}

package/dist/chunk-2AJ4AR4A.js

@@ -0,0 +1,51 @@
+import {
+  getNavaIconConfig
+} from "./chunk-6PLL5KGQ.js";
+
+// src/icons/brightness.ts
+var NavaIconBrightness = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width", "mode"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const config = getNavaIconConfig();
+    const size = this.getAttribute("size") ?? config.size ?? 24;
+    const color = this.getAttribute("color") ?? config.color ?? "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") ?? config.strokeWidth ?? 0.5;
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const paths = isFilled ? `<path d="M21.546 11.646L19 9.10101V5.50001C19 5.3674 18.9473 5.24023 18.8536 5.14646C18.7598 5.05269 18.6326 5.00001 18.5 5.00001H14.899L12.353 2.45401C12.2592 2.36027 12.1321 2.30762 11.9995 2.30762C11.8669 2.30762 11.7398 2.36027 11.646 2.45401L9.10101 5.00001H5.50001C5.3674 5.00001 5.24023 5.05269 5.14646 5.14646C5.05269 5.24023 5.00001 5.3674 5.00001 5.50001V9.10101L2.45401 11.647C2.36027 11.7408 2.30762 11.8679 2.30762 12.0005C2.30762 12.1331 2.36027 12.2602 2.45401 12.354L5.00001 14.899V18.5C5.00001 18.6326 5.05269 18.7598 5.14646 18.8536C5.24023 18.9473 5.3674 19 5.50001 19H9.10101L11.647 21.546C11.7408 21.6397 11.8679 21.6924 12.0005 21.6924C12.1331 21.6924 12.2602 21.6397 12.354 21.546L14.899 19H18.5C18.6326 19 18.7598 18.9473 18.8536 18.8536C18.9473 18.7598 19 18.6326 19 18.5V14.899L21.546 12.353C21.6397 12.2592 21.6924 12.1321 21.6924 11.9995C21.6924 11.8669 21.6397 11.7398 21.546 11.646ZM12 16C10.9391 16 9.92173 15.5786 9.17158 14.8284C8.42144 14.0783 8.00001 13.0609 8.00001 12C8.00001 10.9391 8.42144 9.92173 9.17158 9.17158C9.92173 8.42144 10.9391 8.00001 12 8.00001C13.0609 8.00001 14.0783 8.42144 14.8284 9.17158C15.5786 9.92173 16 10.9391 16 12C16 13.0609 15.5786 14.0783 14.8284 14.8284C14.0783 15.5786 13.0609 16 12 16Z" />` : `<path d="M19.707 9.29302L19 8.58602V6.00002C19 5.7348 18.8946 5.48045 18.7071 5.29291C18.5196 5.10538 18.2652 5.00002 18 5.00002H15.414L14.707 4.29302L12.707 2.29302C12.6142 2.20007 12.504 2.12633 12.3827 2.07602C12.2614 2.02571 12.1313 1.99982 12 1.99982C11.8687 1.99982 11.7386 2.02571 11.6173 2.07602C11.496 2.12633 11.3858 2.20007 11.293 2.29302L9.29299 4.29302L8.58599 5.00002H5.99999C5.73477 5.00002 5.48042 5.10538 5.29288 5.29291C5.10534 5.48045 4.99999 5.7348 4.99999 6.00002V8.58602L4.29299 9.29302L2.29299 11.293C2.20004 11.3858 2.1263 11.496 2.07599 11.6173C2.02568 11.7386 1.99979 11.8687 1.99979 12C1.99979 12.1314 2.02568 12.2614 2.07599 12.3827C2.1263 12.504 2.20004 12.6142 2.29299 12.707L4.29299 14.707L4.99999 15.414V18C4.99999 18.2652 5.10534 18.5196 5.29288 18.7071C5.48042 18.8947 5.73477 19 5.99999 19H8.58599L9.29299 19.707L11.293 21.707C11.3856 21.8002 11.4958 21.8742 11.6171 21.9246C11.7385 21.9751 11.8686 22.0011 12 22.0011C12.1314 22.0011 12.2615 21.9751 12.3828 21.9246C12.5042 21.8742 12.6143 21.8002 12.707 21.707L14.707 19.707L15.414 19H18C18.2652 19 18.5196 18.8947 18.7071 18.7071C18.8946 18.5196 19 18.2652 19 18V15.414L19.707 14.707L21.707 12.707C21.7999 12.6142 21.8737 12.504 21.924 12.3827C21.9743 12.2614 22.0002 12.1314 22.0002 12C22.0002 11.8687 21.9743 11.7386 21.924 11.6173C21.8737 11.496 21.7999 11.3858 21.707 11.293L19.707 9.29302ZM17.293 14.293L17 14.586V17H14.586L14.293 17.293L13.293 18.293L12 19.586L10.707 18.293L9.70699 17.293L9.41399 17H6.99999V14.586L6.70699 14.293L5.70699 13.293L4.41399 12L5.70699 10.707L6.70699 9.70702L6.99999 9.41402V7.00002H9.41399L9.70699 6.70702L10.707 5.70702L12 4.41402L13.293 5.70702L14.293 6.70702L14.586 7.00002H17V9.41402L17.293 9.70702L18.293 10.707L19.586 12L18.293 13.293L17.293 14.293Z" />
+<path d="M12 8C9.794 8 8 9.794 8 12C8 14.206 9.794 16 12 16C14.206 16 16 14.206 16 12C16 9.794 14.206 8 12 8Z" />`;
+    const strokeBased = isFilled ? false : false;
+    const hasStrokeWidth = strokeWidth != null;
+    this.shadowRoot.innerHTML = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="${size}"
+        height="${size}"
+        fill="${strokeBased ? "none" : color}"
+        stroke="${strokeBased ? color : hasStrokeWidth ? color : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : hasStrokeWidth ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+        ${hasStrokeWidth && !strokeBased ? 'style="paint-order: stroke fill"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-brightness")) {
+  customElements.define("icon-brightness", NavaIconBrightness);
+}

package/dist/chunk-2BVGFSFL.js

@@ -0,0 +1,53 @@
+import {
+  getNavaIconConfig
+} from "./chunk-6PLL5KGQ.js";
+
+// src/icons/bullseye.ts
+var NavaIconBullseye = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width", "mode"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const config = getNavaIconConfig();
+    const size = this.getAttribute("size") ?? config.size ?? 24;
+    const color = this.getAttribute("color") ?? config.color ?? "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") ?? config.strokeWidth ?? 0.5;
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const paths = isFilled ? `<path d="M12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.514 2 12 2ZM12 19C8.141 19 5 15.86 5 12C5 8.14 8.141 5 12 5C15.859 5 19 8.14 19 12C19 15.86 15.859 19 12 19Z" />
+<path d="M12 7C9.243 7 7 9.243 7 12C7 14.757 9.243 17 12 17C14.757 17 17 14.757 17 12C17 9.243 14.757 7 12 7ZM12 14C10.897 14 10 13.103 10 12C10 10.897 10.897 10 12 10C13.103 10 14 10.897 14 12C14 13.103 13.103 14 12 14Z" />` : `<path d="M12 6C8.691 6 6 8.691 6 12C6 15.309 8.691 18 12 18C15.309 18 18 15.309 18 12C18 8.691 15.309 6 12 6ZM12 16C9.794 16 8 14.206 8 12C8 9.794 9.794 8 12 8C14.206 8 16 9.794 16 12C16 14.206 14.206 16 12 16Z" />
+<path d="M12 2C6.579 2 2 6.579 2 12C2 17.421 6.579 22 12 22C17.421 22 22 17.421 22 12C22 6.579 17.421 2 12 2ZM12 20C7.663 20 4 16.337 4 12C4 7.663 7.663 4 12 4C16.337 4 20 7.663 20 12C20 16.337 16.337 20 12 20Z" />
+<path d="M12 10C10.919 10 10 10.919 10 12C10 13.081 10.919 14 12 14C13.081 14 14 13.081 14 12C14 10.919 13.081 10 12 10Z" />`;
+    const strokeBased = isFilled ? false : false;
+    const hasStrokeWidth = strokeWidth != null;
+    this.shadowRoot.innerHTML = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="${size}"
+        height="${size}"
+        fill="${strokeBased ? "none" : color}"
+        stroke="${strokeBased ? color : hasStrokeWidth ? color : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : hasStrokeWidth ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+        ${hasStrokeWidth && !strokeBased ? 'style="paint-order: stroke fill"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-bullseye")) {
+  customElements.define("icon-bullseye", NavaIconBullseye);
+}

package/dist/chunk-2DU2XUGI.js

@@ -0,0 +1,50 @@
+import {
+  getNavaIconConfig
+} from "./chunk-6PLL5KGQ.js";
+
+// src/icons/business.ts
+var NavaIconBusiness = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width", "mode"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const config = getNavaIconConfig();
+    const size = this.getAttribute("size") ?? config.size ?? 24;
+    const color = this.getAttribute("color") ?? config.color ?? "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") ?? config.strokeWidth ?? 0.5;
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const paths = isFilled ? `<path d="M21 7H15C14.7348 7 14.4804 7.10536 14.2929 7.29289C14.1054 7.48043 14 7.73478 14 8V11H12V4C12 3.73478 11.8946 3.48043 11.7071 3.29289C11.5196 3.10536 11.2652 3 11 3H3C2.73478 3 2.48043 3.10536 2.29289 3.29289C2.10536 3.48043 2 3.73478 2 4V20C2 20.2652 2.10536 20.5196 2.29289 20.7071C2.48043 20.8946 2.73478 21 3 21H21C21.2652 21 21.5196 20.8946 21.7071 20.7071C21.8946 20.5196 22 20.2652 22 20V8C22 7.73478 21.8946 7.48043 21.7071 7.29289C21.5196 7.10536 21.2652 7 21 7ZM8 6H10V8H8V6ZM6 16H4V14H6V16ZM6 12H4V10H6V12ZM6 8H4V6H6V8ZM10 16H8V14H10V16ZM10 12H8V10H10V12ZM19 16H17V14H19V16ZM19 12H17V10H19V12Z" />` : `<path d="M21 7H15C14.7348 7 14.4804 7.10536 14.2929 7.29289C14.1054 7.48043 14 7.73478 14 8V11H12V4C12 3.73478 11.8946 3.48043 11.7071 3.29289C11.5196 3.10536 11.2652 3 11 3H3C2.73478 3 2.48043 3.10536 2.29289 3.29289C2.10536 3.48043 2 3.73478 2 4V20C2 20.2652 2.10536 20.5196 2.29289 20.7071C2.48043 20.8946 2.73478 21 3 21H21C21.2652 21 21.5196 20.8946 21.7071 20.7071C21.8946 20.5196 22 20.2652 22 20V8C22 7.73478 21.8946 7.48043 21.7071 7.29289C21.5196 7.10536 21.2652 7 21 7ZM8 6H10V8H8V6ZM6 16H4V14H6V16ZM6 12H4V10H6V12ZM6 8H4V6H6V8ZM10 16H8V14H10V16ZM10 12H8V10H10V12ZM19 16H17V14H19V16ZM19 12H17V10H19V12Z" />`;
+    const strokeBased = isFilled ? false : false;
+    const hasStrokeWidth = strokeWidth != null;
+    this.shadowRoot.innerHTML = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="${size}"
+        height="${size}"
+        fill="${strokeBased ? "none" : color}"
+        stroke="${strokeBased ? color : hasStrokeWidth ? color : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : hasStrokeWidth ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+        ${hasStrokeWidth && !strokeBased ? 'style="paint-order: stroke fill"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-business")) {
+  customElements.define("icon-business", NavaIconBusiness);
+}

package/dist/chunk-2G7IVVDT.js

@@ -0,0 +1,50 @@
+import {
+  getNavaIconConfig
+} from "./chunk-6PLL5KGQ.js";
+
+// src/icons/edit-location.ts
+var NavaIconEditLocation = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width", "mode"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const config = getNavaIconConfig();
+    const size = this.getAttribute("size") ?? config.size ?? 24;
+    const color = this.getAttribute("color") ?? config.color ?? "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") ?? config.strokeWidth ?? 0.5;
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const paths = isFilled ? `<path d="M12.0001 2C7.58908 2 4.00008 5.589 4.00008 9.995C3.97108 16.44 11.6961 21.784 12.0001 22C12.0001 22 20.0291 16.44 20.0001 10C20.0001 5.589 16.4111 2 12.0001 2ZM9.79908 14.987H8.00008V13.188L12.9771 8.218L14.7761 10.017L9.79908 14.987ZM15.6231 9.17L13.8241 7.371L15.1961 6L16.9951 7.799L15.6231 9.17Z" />` : `<path d="M12.0001 2C7.58908 2 4.00008 5.589 4.00008 9.995C3.97108 16.44 11.6961 21.784 12.0001 22C12.0001 22 20.0291 16.44 20.0001 10C20.0001 5.589 16.4111 2 12.0001 2ZM9.79908 14.987H8.00008V13.188L12.9771 8.218L14.7761 10.017L9.79908 14.987ZM15.6231 9.17L13.8241 7.371L15.1961 6L16.9951 7.799L15.6231 9.17Z" />`;
+    const strokeBased = isFilled ? false : false;
+    const hasStrokeWidth = strokeWidth != null;
+    this.shadowRoot.innerHTML = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="${size}"
+        height="${size}"
+        fill="${strokeBased ? "none" : color}"
+        stroke="${strokeBased ? color : hasStrokeWidth ? color : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : hasStrokeWidth ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+        ${hasStrokeWidth && !strokeBased ? 'style="paint-order: stroke fill"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-edit-location")) {
+  customElements.define("icon-edit-location", NavaIconEditLocation);
+}

package/dist/chunk-2HBWN73E.js

@@ -0,0 +1,50 @@
+import {
+  getNavaIconConfig
+} from "./chunk-6PLL5KGQ.js";
+
+// src/icons/label.ts
+var NavaIconLabel = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width", "mode"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const config = getNavaIconConfig();
+    const size = this.getAttribute("size") ?? config.size ?? 24;
+    const color = this.getAttribute("color") ?? config.color ?? "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") ?? config.strokeWidth ?? 0.5;
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const paths = isFilled ? `<path d="M16.8131 4.419C16.7209 4.28935 16.5989 4.18367 16.4575 4.11077C16.316 4.03788 16.1592 3.9999 16.0001 4H3.0001C2.81646 4.00017 2.63642 4.05089 2.47971 4.14662C2.323 4.24235 2.19567 4.37938 2.11169 4.54269C2.02771 4.706 1.99033 4.88928 2.00363 5.07243C2.01693 5.25558 2.0804 5.43154 2.1871 5.581L6.7711 12L2.1861 18.419C2.07936 18.5685 2.01587 18.7446 2.00261 18.9278C1.98935 19.1111 2.02682 19.2944 2.11092 19.4578C2.19502 19.6211 2.32249 19.7581 2.47935 19.8538C2.6362 19.9494 2.81638 20 3.0001 20H16.0001C16.1592 20.0001 16.316 19.9621 16.4575 19.8892C16.5989 19.8163 16.7209 19.7106 16.8131 19.581L21.8131 12.581C21.9346 12.4116 21.9999 12.2084 21.9999 12C21.9999 11.7916 21.9346 11.5884 21.8131 11.419L16.8131 4.419Z" />` : `<path d="M16.813 4.419C16.7208 4.28935 16.5988 4.18367 16.4574 4.11077C16.316 4.03788 16.1591 3.9999 16 4H3.00001C2.81637 4.00017 2.63633 4.05089 2.47962 4.14662C2.3229 4.24235 2.19558 4.37938 2.1116 4.54269C2.02762 4.706 1.99023 4.88928 2.00354 5.07243C2.01684 5.25558 2.08031 5.43154 2.18701 5.581L6.77101 12L2.18601 18.419C2.07926 18.5685 2.01578 18.7446 2.00252 18.9278C1.98926 19.1111 2.02673 19.2944 2.11083 19.4578C2.19493 19.6211 2.3224 19.7581 2.47926 19.8538C2.63611 19.9494 2.81628 20 3.00001 20H16C16.1591 20.0001 16.316 19.9621 16.4574 19.8892C16.5988 19.8163 16.7208 19.7106 16.813 19.581L21.813 12.581C21.9345 12.4116 21.9998 12.2084 21.9998 12C21.9998 11.7916 21.9345 11.5884 21.813 11.419L16.813 4.419ZM15.485 18H4.94301L8.813 12.581C8.93447 12.4116 8.99979 12.2084 8.99979 12C8.99979 11.7916 8.93447 11.5884 8.813 11.419L4.94301 6H15.485L19.771 12L15.485 18Z" />`;
+    const strokeBased = isFilled ? false : false;
+    const hasStrokeWidth = strokeWidth != null;
+    this.shadowRoot.innerHTML = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="${size}"
+        height="${size}"
+        fill="${strokeBased ? "none" : color}"
+        stroke="${strokeBased ? color : hasStrokeWidth ? color : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : hasStrokeWidth ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+        ${hasStrokeWidth && !strokeBased ? 'style="paint-order: stroke fill"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-label")) {
+  customElements.define("icon-label", NavaIconLabel);
+}

package/dist/chunk-2HTFFRCX.js

@@ -0,0 +1,50 @@
+import {
+  getNavaIconConfig
+} from "./chunk-6PLL5KGQ.js";
+
+// src/icons/factory.ts
+var NavaIconFactory = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width", "mode"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const config = getNavaIconConfig();
+    const size = this.getAttribute("size") ?? config.size ?? 24;
+    const color = this.getAttribute("color") ?? config.color ?? "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") ?? config.strokeWidth ?? 0.5;
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const paths = isFilled ? `<path d="M17 10V6L12 10V6L7 10V4H2V20H22V6L17 10ZM9 17H7V14H9V17ZM14 17H12V14H14V17ZM19 17H17V14H19V17Z" />` : `<path d="M17 10V6L12 10V6L7 10V4H2V20H22V6L17 10ZM9 17H7V14H9V17ZM14 17H12V14H14V17ZM19 17H17V14H19V17Z" />`;
+    const strokeBased = isFilled ? false : false;
+    const hasStrokeWidth = strokeWidth != null;
+    this.shadowRoot.innerHTML = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="${size}"
+        height="${size}"
+        fill="${strokeBased ? "none" : color}"
+        stroke="${strokeBased ? color : hasStrokeWidth ? color : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : hasStrokeWidth ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+        ${hasStrokeWidth && !strokeBased ? 'style="paint-order: stroke fill"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-factory")) {
+  customElements.define("icon-factory", NavaIconFactory);
+}

package/dist/chunk-2IMCUXNP.js

@@ -0,0 +1,50 @@
+import {
+  getNavaIconConfig
+} from "./chunk-6PLL5KGQ.js";
+
+// src/icons/leaf.ts
+var NavaIconLeaf = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width", "mode"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const config = getNavaIconConfig();
+    const size = this.getAttribute("size") ?? config.size ?? 24;
+    const color = this.getAttribute("color") ?? config.color ?? "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") ?? config.strokeWidth ?? 0.5;
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const paths = isFilled ? `<path d="M22.0001 3.41L21.8801 2.15L20.6801 2.55C18.6235 3.26454 16.4273 3.48382 14.2701 3.19C12.0032 2.83821 9.68298 3.15082 7.59006 4.09C6.48054 4.56245 5.50681 5.30491 4.75754 6.24981C4.00826 7.1947 3.50723 8.31201 3.30006 9.5C3.03144 11.0347 3.16582 12.6128 3.69006 14.08C4.02761 13.3181 4.42206 12.5827 4.87006 11.88C5.88626 10.3848 7.29434 9.19818 8.94006 8.45C10.5255 7.72613 12.2584 7.38365 14.0001 7.45C12.3421 7.7035 10.7551 8.29948 9.34006 9.2C8.65753 9.62885 8.03249 10.143 7.48006 10.73C6.95172 11.3167 6.48588 11.9568 6.09006 12.64C5.34659 14.068 4.81758 15.5978 4.52006 17.18C4.19937 18.7673 4.02531 20.3808 4.00006 22H6.00006C6.09406 20.5478 6.29122 19.1042 6.59006 17.68C7.97749 18.4292 9.53341 18.8113 11.1101 18.79C12.5805 18.789 14.0359 18.4932 15.3901 17.92C23.0001 14.67 22.0001 3.86 22.0001 3.41Z" />` : `<path d="M21.88 2.15L20.68 2.55C18.6234 3.26454 16.4273 3.48382 14.27 3.19C12.0031 2.83821 9.68292 3.15082 7.59 4.09C6.48048 4.56245 5.50675 5.30491 4.75747 6.24981C4.00819 7.1947 3.50716 8.31201 3.3 9.5C3.08926 10.6425 3.11082 11.8156 3.36338 12.9496C3.61594 14.0835 4.09433 15.155 4.77 16.1C4.71 16.31 4.65 16.52 4.6 16.73C4.19384 18.457 3.99245 20.2259 4 22H6C6.094 20.5478 6.29116 19.1042 6.59 17.68C7.97743 18.4292 9.53335 18.8113 11.11 18.79C12.5805 18.789 14.0358 18.4932 15.39 17.92C23 14.67 22 3.86 22 3.41L21.88 2.15ZM14.61 16.08C12 17.19 8.88 17 7.13 15.63C7.42576 14.641 7.83164 13.6884 8.34 12.79C8.73519 12.1434 9.20142 11.543 9.73 11C10.2701 10.4512 10.8784 9.97396 11.54 9.58C12.9071 8.76255 14.4232 8.22545 16 8V7C14.1858 6.9372 12.3827 7.30741 10.74 8.08C9.06042 8.89955 7.63602 10.1615 6.62 11.73C6.24317 12.3291 5.90901 12.954 5.62 13.6C5.15652 12.4144 5.02514 11.1248 5.24 9.87C5.38077 8.99153 5.7429 8.16337 6.29225 7.46357C6.8416 6.76376 7.56008 6.21534 8.38 5.87C9.57561 5.31116 10.8802 5.02428 12.2 5.03C12.82 5.03 13.43 5.09 14.07 5.14C16.0743 5.3986 18.1093 5.27989 20.07 4.79C20 7.55 19.5 14 14.61 16.08Z" />`;
+    const strokeBased = isFilled ? false : false;
+    const hasStrokeWidth = strokeWidth != null;
+    this.shadowRoot.innerHTML = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="${size}"
+        height="${size}"
+        fill="${strokeBased ? "none" : color}"
+        stroke="${strokeBased ? color : hasStrokeWidth ? color : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : hasStrokeWidth ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+        ${hasStrokeWidth && !strokeBased ? 'style="paint-order: stroke fill"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-leaf")) {
+  customElements.define("icon-leaf", NavaIconLeaf);
+}

package/dist/chunk-2M2YR7BK.js

@@ -0,0 +1,54 @@
+import {
+  getNavaIconConfig
+} from "./chunk-6PLL5KGQ.js";
+
+// src/icons/layer.ts
+var NavaIconLayer = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width", "mode"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const config = getNavaIconConfig();
+    const size = this.getAttribute("size") ?? config.size ?? 24;
+    const color = this.getAttribute("color") ?? config.color ?? "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") ?? config.strokeWidth ?? 0.5;
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const paths = isFilled ? `<path d="M21.4841 7.125L12.4621 2.125C12.3138 2.04333 12.1473 2.00049 11.9781 2.00049C11.8088 2.00049 11.6423 2.04333 11.4941 2.125L2.51607 7.085C2.3601 7.17136 2.23006 7.29785 2.13941 7.45137C2.04876 7.60488 2.0008 7.77984 2.00049 7.95812C2.00018 8.1364 2.04754 8.31152 2.13767 8.46534C2.22779 8.61917 2.3574 8.7461 2.51307 8.833L11.5351 13.873C11.6836 13.9565 11.8511 14.0004 12.0214 14.0005C12.1918 14.0007 12.3594 13.9571 12.5081 13.874L21.4861 8.874C21.642 8.78727 21.7719 8.66038 21.8623 8.5065C21.9527 8.35262 22.0002 8.17737 22 7.99891C21.9998 7.82046 21.9519 7.64531 21.8612 7.49164C21.7704 7.33797 21.6402 7.21138 21.4841 7.125Z" />
+<path d="M11.9999 15.856L3.48492 11.126L2.51392 12.874L11.5139 17.874C11.6624 17.9565 11.8295 17.9998 11.9994 17.9998C12.1693 17.9998 12.3364 17.9565 12.4849 17.874L21.4849 12.874L20.5139 11.126L11.9999 15.856Z" />
+<path d="M11.9999 19.856L3.48492 15.126L2.51392 16.874L11.5139 21.874C11.6624 21.9565 11.8295 21.9998 11.9994 21.9998C12.1693 21.9998 12.3364 21.9565 12.4849 21.874L21.4849 16.874L20.5139 15.126L11.9999 19.856Z" />` : `<path d="M22 7.999C21.9998 7.82053 21.9519 7.64536 21.8611 7.49167C21.7704 7.33798 21.6402 7.21138 21.484 7.125L12.462 2.125C12.3138 2.04333 12.1473 2.00049 11.978 2.00049C11.8088 2.00049 11.6422 2.04333 11.494 2.125L2.516 7.085C2.36004 7.17136 2.23 7.29785 2.13935 7.45137C2.0487 7.60488 2.00073 7.77984 2.00043 7.95812C2.00012 8.1364 2.04748 8.31152 2.13761 8.46534C2.22773 8.61917 2.35734 8.7461 2.513 8.833L11.535 13.873C11.6835 13.9565 11.851 14.0004 12.0214 14.0005C12.1917 14.0007 12.3593 13.9571 12.508 13.874L21.486 8.874C21.642 8.78728 21.7719 8.6604 21.8622 8.50654C21.9526 8.35268 22.0002 8.17744 22 7.999ZM12.023 11.854L5.06 7.965L11.977 4.143L18.941 8.002L12.023 11.854Z" />
+<path d="M20.515 11.126L12 15.856L3.48498 11.126L2.51398 12.874L11.514 17.874C11.6625 17.9565 11.8296 17.9998 11.9995 17.9998C12.1694 17.9998 12.3365 17.9565 12.485 17.874L21.485 12.874L20.515 11.126Z" />
+<path d="M20.515 15.126L12 19.856L3.48498 15.126L2.51398 16.874L11.514 21.874C11.6625 21.9565 11.8296 21.9998 11.9995 21.9998C12.1694 21.9998 12.3365 21.9565 12.485 21.874L21.485 16.874L20.515 15.126Z" />`;
+    const strokeBased = isFilled ? false : false;
+    const hasStrokeWidth = strokeWidth != null;
+    this.shadowRoot.innerHTML = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="${size}"
+        height="${size}"
+        fill="${strokeBased ? "none" : color}"
+        stroke="${strokeBased ? color : hasStrokeWidth ? color : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : hasStrokeWidth ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+        ${hasStrokeWidth && !strokeBased ? 'style="paint-order: stroke fill"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-layer")) {
+  customElements.define("icon-layer", NavaIconLayer);
+}