@whydrf/nava-icon-web-components 0.1.0

package/dist/chunk-RQN72I7T.js

@@ -0,0 +1,46 @@
+// src/icons/calendar-check.ts
+var NavaIconCalendarCheck = 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 size = this.getAttribute("size") || "24";
+    const color = this.getAttribute("color") || "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") || "0.5";
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const regularPaths = `<path d="M19 4H17V2H15V4H9V2H7V4H5C3.897 4 3 4.897 3 6V20C3 21.103 3.897 22 5 22H19C20.103 22 21 21.103 21 20V6C21 4.897 20.103 4 19 4ZM19.002 20H5V8H19L19.002 20Z" />
+<path d="M11 17.414L16.707 11.707L15.293 10.293L11 14.586L8.707 12.293L7.293 13.707L11 17.414Z" />`;
+    const filledPaths = `<path d="M5 22H19C20.103 22 21 21.103 21 20V6C21 4.897 20.103 4 19 4H17V2H15V4H9V2H7V4H5C3.897 4 3 4.897 3 6V20C3 21.103 3.897 22 5 22ZM11 18.414L7.293 14.707L8.707 13.293L11 15.586L15.293 11.293L16.707 12.707L11 18.414ZM5 7H19V9H5V7Z" />`;
+    const paths = isFilled && filledPaths ? filledPaths : regularPaths;
+    const strokeBased = isFilled ? false : false;
+    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 : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-calendar-check")) {
+  customElements.define("icon-calendar-check", NavaIconCalendarCheck);
+}

package/dist/chunk-RUUPYZJP.js

@@ -0,0 +1,47 @@
+// src/icons/file-md.ts
+var NavaIconFileMd = 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 size = this.getAttribute("size") || "24";
+    const color = this.getAttribute("color") || "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") || "0.5";
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const regularPaths = `<path d="M14.481 14.015C14.243 14.015 14.088 14.036 13.998 14.057V17.146C14.089 17.167 14.235 17.167 14.369 17.167C15.335 17.174 15.966 16.642 15.966 15.514C15.973 14.533 15.398 14.015 14.481 14.015Z" />
+<path d="M14 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 20V8L14 2ZM11.066 17.951L10.996 16.144C10.9702 15.4976 10.9562 14.8509 10.954 14.204H10.933C10.7803 14.8195 10.6052 15.4292 10.408 16.032L9.834 17.874H9L8.496 16.046C8.32699 15.4384 8.18419 14.8239 8.068 14.204H8.055C8.027 14.842 8.006 15.57 7.971 16.158L7.887 17.951H6.899L7.2 13.23H8.622L9.084 14.806C9.231 15.352 9.379 15.941 9.483 16.494H9.504C9.64091 15.9261 9.79027 15.3613 9.952 14.8L10.456 13.231H11.85L12.11 17.952L11.066 17.951ZM16.316 17.391C15.818 17.804 15.063 18 14.138 18C13.7329 18.0032 13.328 17.9798 12.926 17.93V13.294C13.4038 13.2245 13.8862 13.1914 14.369 13.195C15.265 13.195 15.847 13.356 16.302 13.7C16.792 14.064 17.101 14.645 17.101 15.478C17.101 16.382 16.771 17.006 16.316 17.391ZM14 9H13V4L18 9H14Z" />`;
+    const filledPaths = `<path d="M14.481 14.015C14.243 14.015 14.088 14.036 13.998 14.057V17.146C14.089 17.167 14.235 17.167 14.369 17.167C15.335 17.174 15.966 16.642 15.966 15.514C15.973 14.533 15.398 14.015 14.481 14.015Z" />
+<path d="M14 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 20V8L14 2ZM11.066 17.951L10.996 16.144C10.9702 15.4976 10.9562 14.8509 10.954 14.204H10.933C10.7803 14.8195 10.6052 15.4292 10.408 16.032L9.834 17.874H9L8.496 16.046C8.32699 15.4384 8.18419 14.8239 8.068 14.204H8.055C8.027 14.842 8.006 15.57 7.971 16.158L7.887 17.951H6.899L7.2 13.23H8.622L9.084 14.806C9.231 15.352 9.379 15.941 9.483 16.494H9.504C9.64091 15.9261 9.79027 15.3613 9.952 14.8L10.456 13.231H11.85L12.11 17.952L11.066 17.951ZM16.316 17.391C15.818 17.804 15.063 18 14.138 18C13.7329 18.0032 13.328 17.9798 12.926 17.93V13.294C13.4038 13.2245 13.8862 13.1914 14.369 13.195C15.265 13.195 15.847 13.356 16.302 13.7C16.792 14.064 17.101 14.645 17.101 15.478C17.101 16.382 16.771 17.006 16.316 17.391ZM14 9H13V4L18 9H14Z" />`;
+    const paths = isFilled && filledPaths ? filledPaths : regularPaths;
+    const strokeBased = isFilled ? false : false;
+    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 : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-file-md")) {
+  customElements.define("icon-file-md", NavaIconFileMd);
+}

package/dist/chunk-RVG7MSS2.js

@@ -0,0 +1,46 @@
+// src/icons/copyright.ts
+var NavaIconCopyright = 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 size = this.getAttribute("size") || "24";
+    const color = this.getAttribute("color") || "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") || "0.5";
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const regularPaths = `<path d="M12 22C17.421 22 22 17.421 22 12C22 6.579 17.421 2 12 2C6.579 2 2 6.579 2 12C2 17.421 6.579 22 12 22ZM12 4C16.337 4 20 7.663 20 12C20 16.337 16.337 20 12 20C7.663 20 4 16.337 4 12C4 7.663 7.663 4 12 4Z" />
+<path d="M12 17C12.901 17 14.581 16.832 15.707 15.708L14.293 14.292C13.85 14.735 12.992 15 12 15C10.374 15 9 13.626 9 12C9 10.374 10.374 9 12 9C12.993 9 13.851 9.265 14.293 9.707L15.707 8.293C14.582 7.168 12.901 7 12 7C9.243 7 7 9.243 7 12C7 14.757 9.243 17 12 17Z" />`;
+    const filledPaths = `<path d="M12 2C6.579 2 2 6.58 2 12C2 17.42 6.579 22 12 22C17.421 22 22 17.42 22 12C22 6.58 17.421 2 12 2ZM12 15C12.992 15 13.85 14.735 14.293 14.292L15.707 15.707C14.581 16.832 12.901 17 12 17C9.243 17 7 14.757 7 12C7 9.243 9.243 7 12 7C12.901 7 14.582 7.168 15.707 8.293L14.293 9.707C13.851 9.264 12.993 9 12 9C10.374 9 9 10.374 9 12C9 13.626 10.374 15 12 15Z" />`;
+    const paths = isFilled && filledPaths ? filledPaths : regularPaths;
+    const strokeBased = isFilled ? false : false;
+    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 : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-copyright")) {
+  customElements.define("icon-copyright", NavaIconCopyright);
+}

package/dist/chunk-RZJ7SOGW.js

@@ -0,0 +1,45 @@
+// src/icons/cloud.ts
+var NavaIconCloud = 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 size = this.getAttribute("size") || "24";
+    const color = this.getAttribute("color") || "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") || "0.5";
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const regularPaths = `<path d="M18.944 11.112C18.507 7.67 15.56 5 12 5C9.244 5 6.85 6.611 5.757 9.15C3.609 9.792 2 11.82 2 14C2 16.757 4.243 19 7 19H18C20.206 19 22 17.206 22 15C21.9985 14.1036 21.6966 13.2336 21.1427 12.5288C20.5888 11.8241 19.8147 11.3253 18.944 11.112ZM18 17H7C5.346 17 4 15.654 4 14C4 12.596 5.199 11.244 6.673 10.985L7.254 10.883L7.446 10.325C8.149 8.274 9.895 7 12 7C14.757 7 17 9.243 17 12V13H18C19.103 13 20 13.897 20 15C20 16.103 19.103 17 18 17Z" />`;
+    const filledPaths = `<path d="M18.944 11.112C18.507 7.67 15.56 5 12 5C9.244 5 6.85 6.611 5.757 9.15C3.609 9.792 2 11.82 2 14C2 16.757 4.243 19 7 19H18C20.206 19 22 17.206 22 15C21.9985 14.1036 21.6966 13.2336 21.1427 12.5288C20.5888 11.8241 19.8147 11.3253 18.944 11.112Z" />`;
+    const paths = isFilled && filledPaths ? filledPaths : regularPaths;
+    const strokeBased = isFilled ? false : false;
+    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 : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-cloud")) {
+  customElements.define("icon-cloud", NavaIconCloud);
+}

package/dist/chunk-S3RI73RE.js

@@ -0,0 +1,47 @@
+// src/icons/border-outer.ts
+var NavaIconBorderOuter = 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 size = this.getAttribute("size") || "24";
+    const color = this.getAttribute("color") || "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") || "0.5";
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const regularPaths = `<path d="M11 7H13V9H11V7ZM11 15H13V17H11V15ZM7 11H9V13H7V11ZM15 11H17V13H15V11ZM11 11H13V13H11V11Z" />
+<path d="M19 3H3V21H21V3H19ZM19 7V19H5V5H19V7Z" />`;
+    const filledPaths = `<path d="M11 7H13V9H11V7ZM11 15H13V17H11V15ZM7 11H9V13H7V11ZM15 11H17V13H15V11ZM11 11H13V13H11V11Z" />
+<path d="M19 3H3V21H21V3H19ZM19 7V19H5V5H19V7Z" />`;
+    const paths = isFilled && filledPaths ? filledPaths : regularPaths;
+    const strokeBased = isFilled ? false : false;
+    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 : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-border-outer")) {
+  customElements.define("icon-border-outer", NavaIconBorderOuter);
+}

package/dist/chunk-S5UIWV7X.js

@@ -0,0 +1,46 @@
+// src/icons/captions.ts
+var NavaIconCaptions = 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 size = this.getAttribute("size") || "24";
+    const color = this.getAttribute("color") || "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") || "0.5";
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const regularPaths = `<path d="M6 10V14C6 15.103 6.897 16 8 16H11V14H8V10H11V8H8C6.897 8 6 8.897 6 10ZM13 10V14C13 15.103 13.897 16 15 16H18V14H15V10H18V8H15C13.897 8 13 8.897 13 10Z" />
+<path d="M20 4H4C2.897 4 2 4.897 2 6V18C2 19.103 2.897 20 4 20H20C21.103 20 22 19.103 22 18V6C22 4.897 21.103 4 20 4ZM4 18V6H20L20.002 18H4Z" />`;
+    const filledPaths = `<path d="M20 4H4C2.897 4 2 4.897 2 6V18C2 19.103 2.897 20 4 20H20C21.103 20 22 19.103 22 18V6C22 4.897 21.103 4 20 4ZM11 10H8V14H11V16H8C6.897 16 6 15.103 6 14V10C6 8.897 6.897 8 8 8H11V10ZM18 10H15V14H18V16H15C13.897 16 13 15.103 13 14V10C13 8.897 13.897 8 15 8H18V10Z" />`;
+    const paths = isFilled && filledPaths ? filledPaths : regularPaths;
+    const strokeBased = isFilled ? false : false;
+    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 : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-captions")) {
+  customElements.define("icon-captions", NavaIconCaptions);
+}

package/dist/chunk-S6EDYTPC.js

@@ -0,0 +1,45 @@
+// src/icons/search-alt-2.ts
+var NavaIconSearchAlt2 = 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 size = this.getAttribute("size") || "24";
+    const color = this.getAttribute("color") || "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") || "0.5";
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const regularPaths = `<path d="M19.023 16.977C18.5546 16.5284 18.0988 16.0669 17.656 15.593C17.284 15.215 17.06 14.94 17.06 14.94L14.26 13.603C15.381 12.3316 15.9997 10.695 16 9C16 5.141 12.86 2 9 2C5.14 2 2 5.141 2 9C2 12.859 5.14 16 9 16C10.763 16 12.37 15.34 13.603 14.261L14.94 17.061C14.94 17.061 15.215 17.285 15.593 17.657C15.98 18.02 16.489 18.511 16.977 19.024L18.335 20.416L18.939 21.062L21.06 18.941L20.414 18.337C20.035 17.965 19.529 17.471 19.023 16.977ZM9 14C6.243 14 4 11.757 4 9C4 6.243 6.243 4 9 4C11.757 4 14 6.243 14 9C14 11.757 11.757 14 9 14Z" />`;
+    const filledPaths = `<path d="M9 16C10.763 16 12.37 15.34 13.603 14.261L14.94 17.061C14.94 17.061 15.215 17.285 15.593 17.657C15.98 18.02 16.489 18.511 16.977 19.024L18.335 20.416L18.939 21.062L21.06 18.941L20.414 18.337L19.022 16.979C18.5536 16.5304 18.0978 16.0689 17.655 15.595C17.283 15.217 17.059 14.942 17.059 14.942L14.259 13.605C15.3804 12.333 15.9994 10.6957 16 9C16 5.141 12.859 2 9 2C5.141 2 2 5.141 2 9C2 12.859 5.141 16 9 16Z" />`;
+    const paths = isFilled && filledPaths ? filledPaths : regularPaths;
+    const strokeBased = isFilled ? false : false;
+    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 : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-search-alt-2")) {
+  customElements.define("icon-search-alt-2", NavaIconSearchAlt2);
+}

package/dist/chunk-S72WE4SJ.js

@@ -0,0 +1,45 @@
+// src/icons/list-ol.ts
+var NavaIconListOl = 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 size = this.getAttribute("size") || "24";
+    const color = this.getAttribute("color") || "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") || "0.5";
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const regularPaths = `<path d="M5.282 12.064C4.854 12.392 4.562 12.673 4.407 12.915C4.252 13.155 4.158 13.413 4.128 13.683H6.807V12.935H5.413C5.494 12.854 5.565 12.784 5.625 12.734C5.687 12.684 5.807 12.592 5.986 12.464C6.289 12.246 6.497 12.044 6.612 11.86C6.728 11.674 6.785 11.485 6.785 11.282C6.78773 11.1 6.73507 10.9214 6.634 10.77C6.53478 10.6169 6.39098 10.4979 6.222 10.429C6.048 10.353 5.803 10.318 5.489 10.318C5.189 10.318 4.952 10.356 4.783 10.432C4.62023 10.5026 4.48231 10.6203 4.387 10.77C4.293 10.913 4.228 11.116 4.193 11.374L5.087 11.45C5.112 11.262 5.161 11.133 5.234 11.056C5.2706 11.0198 5.31426 10.9916 5.36226 10.973C5.41026 10.9544 5.46157 10.9459 5.513 10.948C5.623 10.948 5.713 10.983 5.785 11.056C5.82007 11.089 5.8478 11.1291 5.8664 11.1735C5.88501 11.218 5.89407 11.2658 5.893 11.314C5.88683 11.4214 5.84928 11.5247 5.785 11.611C5.711 11.713 5.544 11.865 5.282 12.064ZM5.337 18.45C5.23288 18.4533 5.13164 18.4156 5.055 18.345C4.981 18.275 4.927 18.15 4.893 17.967L4 18.085C4.059 18.289 4.142 18.457 4.251 18.591C4.36 18.724 4.499 18.826 4.668 18.897C4.836 18.966 5.067 19 5.36 19C5.66 19 5.901 18.953 6.085 18.86C6.26334 18.7709 6.41099 18.6306 6.509 18.457C6.607 18.282 6.655 18.103 6.655 17.913C6.65867 17.7767 6.62843 17.6417 6.567 17.52C6.50793 17.413 6.42214 17.323 6.318 17.259C6.22878 17.2081 6.13235 17.171 6.032 17.149C6.16975 17.0791 6.28823 16.9764 6.377 16.85C6.45255 16.7367 6.49195 16.6032 6.49 16.467C6.49185 16.3528 6.46748 16.2397 6.41877 16.1363C6.37005 16.033 6.29829 15.9422 6.209 15.871C6.022 15.712 5.719 15.633 5.3 15.633C4.935 15.633 4.652 15.705 4.453 15.852C4.253 15.995 4.119 16.205 4.049 16.478L4.893 16.629C4.916 16.467 4.96 16.355 5.026 16.291C5.092 16.227 5.177 16.193 5.283 16.193C5.32708 16.191 5.37112 16.1978 5.41252 16.2131C5.45391 16.2284 5.49182 16.2518 5.524 16.282C5.583 16.342 5.611 16.421 5.611 16.52C5.611 16.624 5.573 16.713 5.494 16.79C5.415 16.867 5.317 16.902 5.201 16.902C5.16214 16.9008 5.12339 16.8972 5.085 16.891L5.04 17.54C5.13348 17.5088 5.23064 17.49 5.329 17.484C5.461 17.484 5.566 17.525 5.642 17.61C5.719 17.692 5.757 17.809 5.757 17.962C5.757 18.108 5.717 18.228 5.638 18.316C5.60047 18.3587 5.55414 18.3928 5.50218 18.416C5.45022 18.4391 5.39387 18.4507 5.337 18.45ZM6.285 8.367V5H5.546C5.45566 5.20174 5.32098 5.38051 5.152 5.523C4.984 5.665 4.748 5.785 4.444 5.888V6.642C4.78585 6.5477 5.10474 6.38434 5.381 6.162V8.368H6.285V8.367ZM9 6H20V8H9V6ZM9 11H20V13H9V11ZM9 16H20V18H9V16Z" />`;
+    const filledPaths = `<path d="M5.282 12.064C4.854 12.392 4.562 12.673 4.407 12.915C4.252 13.155 4.158 13.413 4.128 13.683H6.807V12.935H5.413C5.494 12.854 5.565 12.784 5.625 12.734C5.687 12.684 5.807 12.592 5.986 12.464C6.289 12.246 6.497 12.044 6.612 11.86C6.728 11.674 6.785 11.485 6.785 11.282C6.78773 11.1 6.73507 10.9214 6.634 10.77C6.53478 10.6169 6.39098 10.4979 6.222 10.429C6.048 10.353 5.803 10.318 5.489 10.318C5.189 10.318 4.952 10.356 4.783 10.432C4.62023 10.5026 4.48231 10.6203 4.387 10.77C4.293 10.913 4.228 11.116 4.193 11.374L5.087 11.45C5.112 11.262 5.161 11.133 5.234 11.056C5.2706 11.0198 5.31426 10.9916 5.36226 10.973C5.41026 10.9544 5.46157 10.9459 5.513 10.948C5.623 10.948 5.713 10.983 5.785 11.056C5.82007 11.089 5.8478 11.1291 5.8664 11.1735C5.88501 11.218 5.89407 11.2658 5.893 11.314C5.88683 11.4214 5.84928 11.5247 5.785 11.611C5.711 11.713 5.544 11.865 5.282 12.064ZM5.337 18.45C5.23288 18.4533 5.13164 18.4156 5.055 18.345C4.981 18.275 4.927 18.15 4.893 17.967L4 18.085C4.059 18.289 4.142 18.457 4.251 18.591C4.36 18.724 4.499 18.826 4.668 18.897C4.836 18.966 5.067 19 5.36 19C5.66 19 5.901 18.953 6.085 18.86C6.26334 18.7709 6.41099 18.6306 6.509 18.457C6.607 18.282 6.655 18.103 6.655 17.913C6.65867 17.7767 6.62843 17.6417 6.567 17.52C6.50793 17.413 6.42214 17.323 6.318 17.259C6.22878 17.2081 6.13235 17.171 6.032 17.149C6.16975 17.0791 6.28823 16.9764 6.377 16.85C6.45255 16.7367 6.49195 16.6032 6.49 16.467C6.49185 16.3528 6.46748 16.2397 6.41877 16.1363C6.37005 16.033 6.29829 15.9422 6.209 15.871C6.022 15.712 5.719 15.633 5.3 15.633C4.935 15.633 4.652 15.705 4.453 15.852C4.253 15.995 4.119 16.205 4.049 16.478L4.893 16.629C4.916 16.467 4.96 16.355 5.026 16.291C5.092 16.227 5.177 16.193 5.283 16.193C5.32708 16.191 5.37112 16.1978 5.41252 16.2131C5.45391 16.2284 5.49182 16.2518 5.524 16.282C5.583 16.342 5.611 16.421 5.611 16.52C5.611 16.624 5.573 16.713 5.494 16.79C5.415 16.867 5.317 16.902 5.201 16.902C5.16214 16.9008 5.12339 16.8972 5.085 16.891L5.04 17.54C5.13348 17.5088 5.23064 17.49 5.329 17.484C5.461 17.484 5.566 17.525 5.642 17.61C5.719 17.692 5.757 17.809 5.757 17.962C5.757 18.108 5.717 18.228 5.638 18.316C5.60047 18.3587 5.55414 18.3928 5.50218 18.416C5.45022 18.4391 5.39387 18.4507 5.337 18.45ZM6.285 8.367V5H5.546C5.45566 5.20174 5.32098 5.38051 5.152 5.523C4.984 5.665 4.748 5.785 4.444 5.888V6.642C4.78585 6.5477 5.10474 6.38434 5.381 6.162V8.368H6.285V8.367ZM9 6H20V8H9V6ZM9 11H20V13H9V11ZM9 16H20V18H9V16Z" />`;
+    const paths = isFilled && filledPaths ? filledPaths : regularPaths;
+    const strokeBased = isFilled ? false : false;
+    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 : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-list-ol")) {
+  customElements.define("icon-list-ol", NavaIconListOl);
+}

package/dist/chunk-S7BB6YF7.js

@@ -0,0 +1,47 @@
+// src/icons/car.ts
+var NavaIconCar = 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 size = this.getAttribute("size") || "24";
+    const color = this.getAttribute("color") || "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") || "0.5";
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const regularPaths = `<path d="M20.772 10.156L19.404 6.051C19.2056 5.45348 18.8238 4.9337 18.3131 4.56551C17.8024 4.19732 17.1886 3.99944 16.559 4H7.441C6.81139 3.99944 6.19761 4.19732 5.68688 4.56551C5.17615 4.9337 4.79445 5.45348 4.596 6.051L3.228 10.156C2.86461 10.3085 2.55428 10.5648 2.33584 10.8928C2.11741 11.2208 2.00059 11.6059 2 12V17C2 17.753 2.423 18.402 3.039 18.743C3.026 18.809 3 18.869 3 18.938V21C3 21.2652 3.10536 21.5196 3.29289 21.7071C3.48043 21.8946 3.73478 22 4 22H5C5.26522 22 5.51957 21.8946 5.70711 21.7071C5.89464 21.5196 6 21.2652 6 21V19H18V21C18 21.2652 18.1054 21.5196 18.2929 21.7071C18.4804 21.8946 18.7348 22 19 22H20C20.2652 22 20.5196 21.8946 20.7071 21.7071C20.8946 21.5196 21 21.2652 21 21V18.938C21 18.869 20.974 18.808 20.961 18.743C21.2744 18.5721 21.5362 18.3202 21.7189 18.0136C21.9017 17.707 21.9988 17.357 22 17V12C22 11.171 21.492 10.459 20.772 10.156ZM4 17V12H20L20.002 17H4ZM7.441 6H16.558C16.989 6 17.371 6.274 17.507 6.684L18.613 10H5.387L6.492 6.684C6.55835 6.4848 6.68572 6.31153 6.85605 6.18876C7.02638 6.06599 7.23104 5.99995 7.441 6Z" />
+<path d="M6.5 16C7.32843 16 8 15.3284 8 14.5C8 13.6716 7.32843 13 6.5 13C5.67157 13 5 13.6716 5 14.5C5 15.3284 5.67157 16 6.5 16Z" />
+<path d="M17.5 16C18.3284 16 19 15.3284 19 14.5C19 13.6716 18.3284 13 17.5 13C16.6716 13 16 13.6716 16 14.5C16 15.3284 16.6716 16 17.5 16Z" />`;
+    const filledPaths = `<path d="M20.772 10.155L19.404 6.051C19.2056 5.45348 18.8238 4.9337 18.3131 4.56551C17.8024 4.19732 17.1886 3.99944 16.559 4H7.441C6.81139 3.99944 6.19761 4.19732 5.68688 4.56551C5.17615 4.9337 4.79445 5.45348 4.596 6.051L3.228 10.155C2.86422 10.3072 2.55356 10.5636 2.33507 10.8918C2.11657 11.2201 2 11.6057 2 12V17C2 17.738 2.404 18.376 3 18.723V21C3 21.2652 3.10536 21.5196 3.29289 21.7071C3.48043 21.8946 3.73478 22 4 22H5C5.26522 22 5.51957 21.8946 5.70711 21.7071C5.89464 21.5196 6 21.2652 6 21V19H18V21C18 21.2652 18.1054 21.5196 18.2929 21.7071C18.4804 21.8946 18.7348 22 19 22H20C20.2652 22 20.5196 21.8946 20.7071 21.7071C20.8946 21.5196 21 21.2652 21 21V18.723C21.3034 18.549 21.5556 18.2981 21.7311 17.9956C21.9067 17.6932 21.9994 17.3497 22 17V12C22 11.6057 21.8834 11.2201 21.6649 10.8918C21.4464 10.5636 21.1358 10.3072 20.772 10.155ZM7.441 6H16.558C16.989 6 17.371 6.274 17.507 6.684L18.613 10H5.387L6.492 6.684C6.55835 6.4848 6.68572 6.31153 6.85605 6.18876C7.02638 6.06599 7.23104 5.99995 7.441 6ZM5.5 16C5.30295 15.9999 5.10785 15.9611 4.92582 15.8856C4.7438 15.8101 4.57842 15.6995 4.43913 15.5602C4.29984 15.4208 4.18937 15.2553 4.11403 15.0733C4.03868 14.8912 3.99993 14.696 4 14.499C4.00007 14.302 4.03894 14.1068 4.11441 13.9248C4.18988 13.7428 4.30046 13.5774 4.43984 13.4381C4.57922 13.2988 4.74467 13.1884 4.92675 13.113C5.10882 13.0377 5.30395 12.9989 5.501 12.999C5.89896 12.9991 6.28056 13.1573 6.56187 13.4388C6.84317 13.7203 7.00113 14.102 7.001 14.5C7.00087 14.898 6.84265 15.2796 6.56116 15.5609C6.27967 15.8422 5.89796 16.0001 5.5 16ZM18.5 16C18.303 15.9999 18.1078 15.9611 17.9258 15.8856C17.7438 15.8101 17.5784 15.6995 17.4391 15.5602C17.2998 15.4208 17.1894 15.2553 17.114 15.0733C17.0387 14.8912 16.9999 14.696 17 14.499C17.0001 14.302 17.0389 14.1068 17.1144 13.9248C17.1899 13.7428 17.3005 13.5774 17.4398 13.4381C17.5792 13.2988 17.7447 13.1884 17.9267 13.113C18.1088 13.0377 18.304 12.9989 18.501 12.999C18.899 12.9991 19.2806 13.1573 19.5619 13.4388C19.8432 13.7203 20.0011 14.102 20.001 14.5C20.0009 14.898 19.8427 15.2796 19.5612 15.5609C19.2797 15.8422 18.898 16.0001 18.5 16Z" />`;
+    const paths = isFilled && filledPaths ? filledPaths : regularPaths;
+    const strokeBased = isFilled ? false : false;
+    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 : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-car")) {
+  customElements.define("icon-car", NavaIconCar);
+}

package/dist/chunk-S7IHGIUC.js

@@ -0,0 +1,47 @@
+// src/icons/task-x.ts
+var NavaIconTaskX = 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 size = this.getAttribute("size") || "24";
+    const color = this.getAttribute("color") || "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") || "0.5";
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const regularPaths = `<path d="M3 20C3 21.103 3.897 22 5 22H19C20.103 22 21 21.103 21 20V5C21 3.897 20.103 3 19 3H17C17 2.73478 16.8946 2.48043 16.7071 2.29289C16.5196 2.10536 16.2652 2 16 2H8C7.73478 2 7.48043 2.10536 7.29289 2.29289C7.10536 2.48043 7 2.73478 7 3H5C3.897 3 3 3.897 3 5V20ZM5 5H7V7H17V5H19V20H5V5Z" />
+<path d="M14.292 10.295L12 12.587L9.70801 10.295L8.29401 11.709L10.586 14.001L8.29401 16.293L9.70801 17.707L12 15.415L14.292 17.707L15.706 16.293L13.414 14.001L15.706 11.709L14.292 10.295Z" />`;
+    const filledPaths = `<path d="M3 20C3 21.103 3.897 22 5 22H19C20.103 22 21 21.103 21 20V5C21 3.897 20.103 3 19 3H17C17 2.73478 16.8946 2.48043 16.7071 2.29289C16.5196 2.10536 16.2652 2 16 2H8C7.73478 2 7.48043 2.10536 7.29289 2.29289C7.10536 2.48043 7 2.73478 7 3H5C3.897 3 3 3.897 3 5V20ZM5 5H7V7H17V5H19V20H5V5Z" />
+<path d="M14.292 10.295L12 12.587L9.70801 10.295L8.29401 11.709L10.586 14.001L8.29401 16.293L9.70801 17.707L12 15.415L14.292 17.707L15.706 16.293L13.414 14.001L15.706 11.709L14.292 10.295Z" />`;
+    const paths = isFilled && filledPaths ? filledPaths : regularPaths;
+    const strokeBased = isFilled ? false : false;
+    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 : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-task-x")) {
+  customElements.define("icon-task-x", NavaIconTaskX);
+}

package/dist/chunk-S7KZDLQY.js

@@ -0,0 +1,47 @@
+// src/icons/slider-alt.ts
+var NavaIconSliderAlt = 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 size = this.getAttribute("size") || "24";
+    const color = this.getAttribute("color") || "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") || "0.5";
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const regularPaths = `<path d="M7.5 14.5C5.92 14.5 4.597 15.56 4.163 17H2V19H4.163C4.597 20.44 5.92 21.5 7.5 21.5C9.08 21.5 10.403 20.44 10.837 19H22V17H10.837C10.403 15.56 9.08 14.5 7.5 14.5ZM7.5 19.5C6.673 19.5 6 18.827 6 18C6 17.173 6.673 16.5 7.5 16.5C8.327 16.5 9 17.173 9 18C9 18.827 8.327 19.5 7.5 19.5ZM16.5 8.5C14.92 8.5 13.597 9.56 13.163 11H2V13H13.163C13.597 14.44 14.92 15.5 16.5 15.5C18.08 15.5 19.403 14.44 19.837 13H22V11H19.837C19.403 9.56 18.08 8.5 16.5 8.5ZM16.5 13.5C15.673 13.5 15 12.827 15 12C15 11.173 15.673 10.5 16.5 10.5C17.327 10.5 18 11.173 18 12C18 12.827 17.327 13.5 16.5 13.5Z" />
+<path d="M12.837 5C12.403 3.56 11.08 2.5 9.5 2.5C7.92 2.5 6.597 3.56 6.163 5H2V7H6.163C6.597 8.44 7.92 9.5 9.5 9.5C11.08 9.5 12.403 8.44 12.837 7H22.125V5H12.837ZM9.5 7.5C8.673 7.5 8 6.827 8 6C8 5.173 8.673 4.5 9.5 4.5C10.327 4.5 11 5.173 11 6C11 6.827 10.327 7.5 9.5 7.5Z" />`;
+    const filledPaths = `<path d="M7.5 14.5C5.92 14.5 4.597 15.56 4.163 17H2V19H4.163C4.597 20.44 5.92 21.5 7.5 21.5C9.08 21.5 10.403 20.44 10.837 19H22V17H10.837C10.403 15.56 9.08 14.5 7.5 14.5ZM7.5 19.5C6.673 19.5 6 18.827 6 18C6 17.173 6.673 16.5 7.5 16.5C8.327 16.5 9 17.173 9 18C9 18.827 8.327 19.5 7.5 19.5ZM16.5 8.5C14.92 8.5 13.597 9.56 13.163 11H2V13H13.163C13.597 14.44 14.92 15.5 16.5 15.5C18.08 15.5 19.403 14.44 19.837 13H22V11H19.837C19.403 9.56 18.08 8.5 16.5 8.5ZM16.5 13.5C15.673 13.5 15 12.827 15 12C15 11.173 15.673 10.5 16.5 10.5C17.327 10.5 18 11.173 18 12C18 12.827 17.327 13.5 16.5 13.5Z" />
+<path d="M12.837 5C12.403 3.56 11.08 2.5 9.5 2.5C7.92 2.5 6.597 3.56 6.163 5H2V7H6.163C6.597 8.44 7.92 9.5 9.5 9.5C11.08 9.5 12.403 8.44 12.837 7H22.125V5H12.837ZM9.5 7.5C8.673 7.5 8 6.827 8 6C8 5.173 8.673 4.5 9.5 4.5C10.327 4.5 11 5.173 11 6C11 6.827 10.327 7.5 9.5 7.5Z" />`;
+    const paths = isFilled && filledPaths ? filledPaths : regularPaths;
+    const strokeBased = isFilled ? false : false;
+    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 : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-slider-alt")) {
+  customElements.define("icon-slider-alt", NavaIconSliderAlt);
+}

package/dist/chunk-SAJ6MCIH.js

@@ -0,0 +1,47 @@
+// src/icons/microphone.ts
+var NavaIconMicrophone = 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 size = this.getAttribute("size") || "24";
+    const color = this.getAttribute("color") || "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") || "0.5";
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const regularPaths = `<path d="M16 12V6C16 3.783 14.215 1.979 12.021 1.979C11.9506 1.97943 11.8805 1.98781 11.812 2.004C10.7853 2.05378 9.81693 2.49636 9.10738 3.24016C8.39783 3.98395 8.00136 4.97205 8 6V12C8 14.206 9.794 16 12 16C14.206 16 16 14.206 16 12ZM10 12V6C10 4.897 10.897 4 12 4C12.0547 4.00002 12.1092 3.995 12.163 3.985C13.188 4.06 14 4.935 14 6V12C14 13.103 13.103 14 12 14C10.897 14 10 13.103 10 12Z" />
+<path d="M6 12H4C4 16.072 7.061 19.436 11 19.931V22H13V19.931C16.939 19.436 20 16.073 20 12H18C18 15.309 15.309 18 12 18C8.691 18 6 15.309 6 12Z" />`;
+    const filledPaths = `<path d="M12 16C14.206 16 16 14.206 16 12V6C16 3.783 14.215 1.979 12.021 1.979C11.9506 1.97943 11.8805 1.98781 11.812 2.004C10.7853 2.05378 9.81693 2.49636 9.10738 3.24016C8.39783 3.98395 8.00136 4.97205 8 6V12C8 14.206 9.794 16 12 16Z" />
+<path d="M11 19.931V22H13V19.931C16.939 19.436 20 16.073 20 12H18C18 15.309 15.309 18 12 18C8.691 18 6 15.309 6 12H4C4 16.072 7.061 19.436 11 19.931Z" />`;
+    const paths = isFilled && filledPaths ? filledPaths : regularPaths;
+    const strokeBased = isFilled ? false : false;
+    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 : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-microphone")) {
+  customElements.define("icon-microphone", NavaIconMicrophone);
+}

package/dist/chunk-SBEMUIK5.js

@@ -0,0 +1,57 @@
+// src/icons/braille.ts
+var NavaIconBraille = 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 size = this.getAttribute("size") || "24";
+    const color = this.getAttribute("color") || "currentColor";
+    const strokeWidth = this.getAttribute("stroke-width") || "0.5";
+    const mode = this.getAttribute("mode") || "regular";
+    const isFilled = mode === "filled";
+    const regularPaths = `<path d="M4 9C5.10457 9 6 8.10457 6 7C6 5.89543 5.10457 5 4 5C2.89543 5 2 5.89543 2 7C2 8.10457 2.89543 9 4 9Z" />
+<path d="M9 14C10.1046 14 11 13.1046 11 12C11 10.8954 10.1046 10 9 10C7.89543 10 7 10.8954 7 12C7 13.1046 7.89543 14 9 14Z" />
+<path d="M15 9C16.1046 9 17 8.10457 17 7C17 5.89543 16.1046 5 15 5C13.8954 5 13 5.89543 13 7C13 8.10457 13.8954 9 15 9Z" />
+<path d="M15 14C16.1046 14 17 13.1046 17 12C17 10.8954 16.1046 10 15 10C13.8954 10 13 10.8954 13 12C13 13.1046 13.8954 14 15 14Z" />
+<path d="M15 19C16.1046 19 17 18.1046 17 17C17 15.8954 16.1046 15 15 15C13.8954 15 13 15.8954 13 17C13 18.1046 13.8954 19 15 19Z" />
+<path d="M20 9C21.1046 9 22 8.10457 22 7C22 5.89543 21.1046 5 20 5C18.8954 5 18 5.89543 18 7C18 8.10457 18.8954 9 20 9Z" />
+<path d="M4 19C5.10457 19 6 18.1046 6 17C6 15.8954 5.10457 15 4 15C2.89543 15 2 15.8954 2 17C2 18.1046 2.89543 19 4 19Z" />`;
+    const filledPaths = `<path d="M4 9C5.10457 9 6 8.10457 6 7C6 5.89543 5.10457 5 4 5C2.89543 5 2 5.89543 2 7C2 8.10457 2.89543 9 4 9Z" />
+<path d="M9 14C10.1046 14 11 13.1046 11 12C11 10.8954 10.1046 10 9 10C7.89543 10 7 10.8954 7 12C7 13.1046 7.89543 14 9 14Z" />
+<path d="M15 9C16.1046 9 17 8.10457 17 7C17 5.89543 16.1046 5 15 5C13.8954 5 13 5.89543 13 7C13 8.10457 13.8954 9 15 9Z" />
+<path d="M15 14C16.1046 14 17 13.1046 17 12C17 10.8954 16.1046 10 15 10C13.8954 10 13 10.8954 13 12C13 13.1046 13.8954 14 15 14Z" />
+<path d="M15 19C16.1046 19 17 18.1046 17 17C17 15.8954 16.1046 15 15 15C13.8954 15 13 15.8954 13 17C13 18.1046 13.8954 19 15 19Z" />
+<path d="M20 9C21.1046 9 22 8.10457 22 7C22 5.89543 21.1046 5 20 5C18.8954 5 18 5.89543 18 7C18 8.10457 18.8954 9 20 9Z" />
+<path d="M4 19C5.10457 19 6 18.1046 6 17C6 15.8954 5.10457 15 4 15C2.89543 15 2 15.8954 2 17C2 18.1046 2.89543 19 4 19Z" />`;
+    const paths = isFilled && filledPaths ? filledPaths : regularPaths;
+    const strokeBased = isFilled ? false : false;
+    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 : "none"}"
+        stroke-width="${strokeBased ? strokeWidth : ""}"
+        ${strokeBased ? 'stroke-linecap="round"' : ""}
+        ${strokeBased ? 'stroke-linejoin="round"' : ""}
+      >
+        ${paths}
+      </svg>
+    `;
+  }
+};
+if (!customElements.get("icon-braille")) {
+  customElements.define("icon-braille", NavaIconBraille);
+}