@cargosense/cargo-design-system 1.0.1 → 1.0.4

package/dist/molecules/index.es.js

@@ -1,46 +1,11 @@
-var C = Object.defineProperty;
-var _ = (i, t, e) => t in i ? C(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
-var r = (i, t, e) => _(i, typeof t != "symbol" ? t + "" : t, e);
-import { r as c, i as a, c as n, f as s, d as l, o as h, x as o, a as q, b as B } from "../assets/Counter.es.js";
+import { r as s, i as r, c as o, f as i, d as a, o as c, x as e, a as p, b as h } from "../assets/Counter.es.js";
 import "../fonts/index.es.js";
-c();
-class b extends a {
-  firstUpdated() {
-    const t = document.getElementById(this.form);
-    this.shadowRoot.querySelector("button").addEventListener("click", () => {
-      t instanceof HTMLFormElement && (console.log("Form found, submitting..."), t.requestSubmit());
-    });
-  }
-  constructor() {
-    super(), this.link = void 0, this.target = void 0, this.disabled = !1, this.size = "md", this.expand = "", this._variant = "primary", this.name = void 0, this.button = "button", this.form = void 0, this.square = "";
-  }
-  render() {
-    return o`
-    <a href='${h(this.link)}' target="${h(this.target)}" tabindex="-1" class="${this.expand}">
-      <button form="${this.form}" type="${this.button}" class="button ${this.square} ${this.variant} ${this.size} ${this.expand} ${this.disabled ? "disabled" : ""}" .name="${this.name}" tabindex="${this.disabled ? "-1" : 0}" @click='${this.handleClick}'>
-       <slot name='start'></slot> <slot></slot> <slot name='end'></slot>
-      </button>
-      </a> `;
-  }
-  handleClick(t) {
-    if (this.disabled) {
-      t.preventDefault(), t.stopPropagation();
-      return;
-    }
-    this.dispatchEvent(new CustomEvent("button-click", {
-      detail: {
-        value: this.value,
-        name: this.name
-      },
-      bubbles: !0,
-      composed: !0
-    }));
-  }
-}
-r(b, "styles", l`
+s();
+class v extends r {
+  static styles = a`
    @font-face {
       font-family: 'Geist';
-      src: url(${n(s)}) format('woff');
+      src: url(${o(i)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -153,90 +118,106 @@ r(b, "styles", l`
       outline: none;
     }
 
-    `), r(b, "properties", {
-  variant: {
-    type: String,
-    reflect: !0,
-    converter: (t) => ["classic", "secondary", "primary"].includes(t) ? t : "classic"
-  },
-  size: {
-    type: String,
-    reflect: !0,
-    attribute: "size",
-    converter: (t) => ["sm", "md", "lg"].includes(t) ? t : "md"
-  },
-  disabled: {
-    type: Boolean,
-    reflect: !0,
-    attribute: "disabled"
-  },
-  link: {
-    type: String,
-    reflect: !0,
-    attribute: "link"
-  },
-  target: {
-    type: String,
-    reflect: !0,
-    attribute: "target",
-    converter: (t) => ["_blank", "_self", "_parent", "_top"].includes(t) ? t : "_self"
-  },
-  expand: {
-    type: Boolean,
-    reflect: !0,
-    attribute: "full-width",
-    converter: (t) => t == "" ? "expand" : ""
-  },
-  value: {
-    type: String,
-    reflect: !0,
-    attribute: "value",
-    defaultValue: ""
-  },
-  type: {
-    type: String,
-    reflect: !0,
-    attribute: "type",
-    converter: (t) => ["button", "submit", "reset"].includes(t) ? t : "button"
-  },
-  square: {
-    type: Boolean,
-    reflect: !0,
-    attribute: "square",
-    converter: (t) => t === "" ? "square" : ""
-  },
-  form: {
-    type: String,
-    reflect: !0,
-    attribute: "form"
+    `;
+  static properties = {
+    variant: {
+      type: String,
+      reflect: !0,
+      converter: (t) => ["classic", "secondary", "primary"].includes(t) ? t : "classic"
+    },
+    size: {
+      type: String,
+      reflect: !0,
+      attribute: "size",
+      converter: (t) => ["sm", "md", "lg"].includes(t) ? t : "md"
+    },
+    disabled: {
+      type: Boolean,
+      reflect: !0,
+      attribute: "disabled"
+    },
+    link: {
+      type: String,
+      reflect: !0,
+      attribute: "link"
+    },
+    target: {
+      type: String,
+      reflect: !0,
+      attribute: "target",
+      converter: (t) => ["_blank", "_self", "_parent", "_top"].includes(t) ? t : "_self"
+    },
+    expand: {
+      type: Boolean,
+      reflect: !0,
+      attribute: "full-width",
+      converter: (t) => t == "" ? "expand" : ""
+    },
+    value: {
+      type: String,
+      reflect: !0,
+      attribute: "value",
+      defaultValue: ""
+    },
+    type: {
+      type: String,
+      reflect: !0,
+      attribute: "type",
+      converter: (t) => ["button", "submit", "reset"].includes(t) ? t : "button"
+    },
+    square: {
+      type: Boolean,
+      reflect: !0,
+      attribute: "square",
+      converter: (t) => t === "" ? "square" : ""
+    },
+    form: {
+      type: String,
+      reflect: !0,
+      attribute: "form"
+    }
+  };
+  firstUpdated() {
+    const t = document.getElementById(this.form);
+    this.shadowRoot.querySelector("button").addEventListener("click", () => {
+      t instanceof HTMLFormElement && (console.log("Form found, submitting..."), t.requestSubmit());
+    });
   }
-});
-function A() {
-  typeof window < "u" && !customElements.get("cd-button") && customElements.define("cd-button", b);
-}
-c();
-class f extends a {
   constructor() {
-    super(), this.icon = "", this.title = "";
+    super(), this.link = void 0, this.target = void 0, this.disabled = !1, this.size = "md", this.expand = "", this._variant = "primary", this.name = void 0, this.button = "button", this.form = void 0, this.square = "";
   }
   render() {
-    return o`
-      <header class="header">
-        <div class='left'>
-          <cd-icon name="${this.icon}" size="md"></cd-icon>
-          <span class="title">${this.title}</span>
-        </div>
-        <div class='right'>
-          <slot></slot>
-        </div>
-      </header>
-    `;
+    return e`
+    <a href='${c(this.link)}' target="${c(this.target)}" tabindex="-1" class="${this.expand}">
+      <button form="${this.form}" type="${this.button}" class="button ${this.square} ${this.variant} ${this.size} ${this.expand} ${this.disabled ? "disabled" : ""}" .name="${this.name}" tabindex="${this.disabled ? "-1" : 0}" @click='${this.handleClick}'>
+       <slot name='start'></slot> <slot></slot> <slot name='end'></slot>
+      </button>
+      </a> `;
+  }
+  handleClick(t) {
+    if (this.disabled) {
+      t.preventDefault(), t.stopPropagation();
+      return;
+    }
+    this.dispatchEvent(new CustomEvent("button-click", {
+      detail: {
+        value: this.value,
+        name: this.name
+      },
+      bubbles: !0,
+      composed: !0
+    }));
   }
 }
-r(f, "styles", l`
+function d() {
+  typeof window < "u" && !customElements.get("cd-button") && customElements.define("cd-button", v);
+}
+s();
+class b extends r {
+  static styles = a`
     @font-face {
       font-family: 'Geist';
-      src: url(${n(s)}) format('woff');
+      src: url(${o(i)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -273,87 +254,46 @@ r(f, "styles", l`
       padding: 0 16px;
 
     }
-  `), r(f, "properties", {
-  icon: {
-    type: String,
-    reflect: !0,
-    attribute: "icon"
-  },
-  title: {
-    type: String,
-    reflect: !0,
-    attribute: "title"
-  }
-});
-function D() {
-  !customElements.get("cd-header") && typeof window < "u" && customElements.define("cd-header", f);
-}
-c();
-class v extends a {
-  handleKeyPress(t) {
-    return this.dispatchEvent(new CustomEvent("keypress", {
-      detail: {
-        value: t.target.value,
-        key: t.keyCode
-      }
-    })), t.key === "Enter" && this.dispatchEvent(new CustomEvent("onenter", {
-      detail: {
-        value: t.target.value
-      }
-    })), this.dispatchEvent(new CustomEvent("onkeyup", {
-      detail: {
-        value: t.target.value,
-        key: t.keyCode
-      }
-    })), this._internals.setFormValue(t.target.value), this.value = t.target.value, t.target.value;
-  }
-  handleInput(t) {
-    return this.dispatchEvent(new CustomEvent("input", {
-      detail: {
-        value: t.target.value
-      }
-    })), this._internals.setFormValue(t.target.value), this.value = t.target.value, t.target.value;
-  }
-  handleChange(t) {
-    return this.dispatchEvent(new CustomEvent("onchange", {
-      detail: {
-        value: t.target.value
-      }
-    })), this._internals.setFormValue(t.target.value), this.value = t.target.value, t.target.value;
-  }
-  handleFocus(t) {
-    return this.dispatchEvent(new CustomEvent("onblur", {
-      detail: {
-        value: t.target.value
-      }
-    })), this._internals.setFormValue(t.target.value), this.value = t.target.value, t.target;
-  }
+  `;
+  static properties = {
+    icon: {
+      type: String,
+      reflect: !0,
+      attribute: "icon"
+    },
+    title: {
+      type: String,
+      reflect: !0,
+      attribute: "title"
+    }
+  };
   constructor() {
-    super(), this.value = "", this.placeholder = "", this.pattern = "", this.variant = "solid", this.size = "md", this._internals = this.attachInternals();
+    super(), this.icon = "", this.title = "";
   }
   render() {
-    return o`
-      ${this.iconLeft ? o`<span class="icon-left-container"><cd-icon name="${this.iconLeft}" size="sm" class="icon-left"></cd-icon></span>` : ""}
-      <input id='${this.name}' class="${this.iconLeft ? "icon-spacing-left" : ""} ${this.iconRight ? " icon-spacing-right" : ""}  ${this.disabled ? " disabled" : ""} ${this.error ? " input-error" : ""} ${this.fullWidth ? " full-width" : ""} ${this.variant === "dashed" ? " dashed" : this.variant == "dotted" ? " dotted" : ""} ${this.size}" type="${this.type}" placeholder="${this.placeholder}" ?required=${this.required} .value="${this.value}"  ?readonly=${this.readOnly} ?disabled=${this.disabled} .pattern="${this.pattern}" @input="${this.handleInput}" @change="${this.handleChange}" @blur="${this.handleFocus}" @keypress=${this.handleKeyPress}/>
-      ${this.iconRight ? o`<span class="icon-right-container"><cd-icon name="${this.iconRight}" size="sm" class="icon-right"></cd-icon></span>` : ""}
-      `;
-  }
-  focus() {
-    if (!this.shadowRoot) {
-      console.warn("Input element is not yet connected to the DOM.");
-      return;
-    }
-    if (!this.shadowRoot.querySelector("input")) {
-      console.warn("Input element is not found in the shadow DOM.");
-      return;
-    }
-    this.shadowRoot.querySelector("input").focus();
+    return e`
+      <header class="header">
+        <div class='left'>
+          <cd-icon name="${this.icon}" size="md"></cd-icon>
+          <span class="title">${this.title}</span>
+        </div>
+        <div class='right'>
+          <slot></slot>
+        </div>
+      </header>
+    `;
   }
 }
-r(v, "formAssociated", !0), r(v, "styles", l`
+function T() {
+  !customElements.get("cd-header") && typeof window < "u" && customElements.define("cd-header", b);
+}
+s();
+class f extends r {
+  static formAssociated = !0;
+  static styles = a`
     @font-face {
       font-family: 'Geist';
-      src: url(${n(s)}) format('woff');
+      src: url(${o(i)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -472,97 +412,139 @@ r(v, "formAssociated", !0), r(v, "styles", l`
 
 
 
-    `), r(v, "properties", {
-  name: {
-    type: String,
-    reflect: !0
-  },
-  type: {
-    type: String,
-    reflect: !0,
-    converter: (t) => ["text", "date", "time", "number", "tel", "url", "phone", "email", "password"].includes(t) ? t : "text"
-  },
-  disabled: {
-    type: Boolean,
-    reflect: !0
-  },
-  placeholder: {
-    type: String,
-    reflect: !0
-  },
-  readOnly: {
-    type: Boolean,
-    reflect: !0,
-    attribute: "read-only"
-  },
-  required: {
-    type: Boolean,
-    reflect: !0
-  },
-  pattern: {
-    type: String
-  },
-  error: {
-    type: Boolean,
-    reflect: !0
-  },
-  value: {
-    type: String,
-    reflect: !0
-  },
-  fullWidth: {
-    type: Boolean,
-    reflect: !0,
-    attribute: "full-width"
-  },
-  variant: {
-    type: String,
-    reflect: !0
-  },
-  size: {
-    type: String,
-    reflect: !0,
-    converter: (t) => ["sm", "md", "lg"].includes(t) ? t : "md"
-  },
-  iconLeft: {
-    type: String,
-    reflect: !0,
-    attribute: "icon-left"
-  },
-  iconRight: {
-    type: String,
-    reflect: !0,
-    attribute: "icon-right"
+    `;
+  static properties = {
+    name: {
+      type: String,
+      reflect: !0
+    },
+    type: {
+      type: String,
+      reflect: !0,
+      converter: (t) => ["text", "date", "time", "number", "tel", "url", "phone", "email", "password"].includes(t) ? t : "text"
+    },
+    disabled: {
+      type: Boolean,
+      reflect: !0
+    },
+    placeholder: {
+      type: String,
+      reflect: !0
+    },
+    readOnly: {
+      type: Boolean,
+      reflect: !0,
+      attribute: "read-only"
+    },
+    required: {
+      type: Boolean,
+      reflect: !0
+    },
+    pattern: {
+      type: String
+    },
+    error: {
+      type: Boolean,
+      reflect: !0
+    },
+    value: {
+      type: String,
+      reflect: !0
+    },
+    fullWidth: {
+      type: Boolean,
+      reflect: !0,
+      attribute: "full-width"
+    },
+    variant: {
+      type: String,
+      reflect: !0
+    },
+    size: {
+      type: String,
+      reflect: !0,
+      converter: (t) => ["sm", "md", "lg"].includes(t) ? t : "md"
+    },
+    iconLeft: {
+      type: String,
+      reflect: !0,
+      attribute: "icon-left"
+    },
+    iconRight: {
+      type: String,
+      reflect: !0,
+      attribute: "icon-right"
+    }
+  };
+  handleKeyPress(t) {
+    return this.dispatchEvent(new CustomEvent("keypress", {
+      detail: {
+        value: t.target.value,
+        key: t.keyCode
+      }
+    })), t.key === "Enter" && this.dispatchEvent(new CustomEvent("onenter", {
+      detail: {
+        value: t.target.value
+      }
+    })), this.dispatchEvent(new CustomEvent("onkeyup", {
+      detail: {
+        value: t.target.value,
+        key: t.keyCode
+      }
+    })), this._internals.setFormValue(t.target.value), this.value = t.target.value, t.target.value;
+  }
+  handleInput(t) {
+    return this.dispatchEvent(new CustomEvent("input", {
+      detail: {
+        value: t.target.value
+      }
+    })), this._internals.setFormValue(t.target.value), this.value = t.target.value, t.target.value;
+  }
+  handleChange(t) {
+    return this.dispatchEvent(new CustomEvent("onchange", {
+      detail: {
+        value: t.target.value
+      }
+    })), this._internals.setFormValue(t.target.value), this.value = t.target.value, t.target.value;
+  }
+  handleFocus(t) {
+    return this.dispatchEvent(new CustomEvent("onblur", {
+      detail: {
+        value: t.target.value
+      }
+    })), this._internals.setFormValue(t.target.value), this.value = t.target.value, t.target;
   }
-});
-function T() {
-  typeof window < "u" && !customElements.get("cd-input") && customElements.define("cd-input", v);
-}
-q();
-class g extends a {
   constructor() {
-    super(), this.image = "", this.name = "";
+    super(), this.value = "", this.placeholder = "", this.pattern = "", this.variant = "solid", this.size = "md", this._internals = this.attachInternals();
   }
   render() {
-    return o`
-      <nav class="navbar ${this.small ? "small" : ""}">
-       ${this.image != "" && this.name != "" ? o` <div class="image">
-       <cd-nav-image src="${this.image}" alt="Logo" name="${this.name}"></cd-nav-image>
-     </div>` : ""}
-
-        <div class="items">
-          <slot name="start"></slot>
-          <slot></slot>
-          <slot name="end"></slot>
-        </div>
-      </nav>
-    `;
+    return e`
+      ${this.iconLeft ? e`<span class="icon-left-container"><cd-icon name="${this.iconLeft}" size="sm" class="icon-left"></cd-icon></span>` : ""}
+      <input id='${this.name}' class="${this.iconLeft ? "icon-spacing-left" : ""} ${this.iconRight ? " icon-spacing-right" : ""}  ${this.disabled ? " disabled" : ""} ${this.error ? " input-error" : ""} ${this.fullWidth ? " full-width" : ""} ${this.variant === "dashed" ? " dashed" : this.variant == "dotted" ? " dotted" : ""} ${this.size}" type="${this.type}" placeholder="${this.placeholder}" ?required=${this.required} .value="${this.value}"  ?readonly=${this.readOnly} ?disabled=${this.disabled} .pattern="${this.pattern}" @input="${this.handleInput}" @change="${this.handleChange}" @blur="${this.handleFocus}" @keypress=${this.handleKeyPress}/>
+      ${this.iconRight ? e`<span class="icon-right-container"><cd-icon name="${this.iconRight}" size="sm" class="icon-right"></cd-icon></span>` : ""}
+      `;
   }
+  focus() {
+    if (!this.shadowRoot) {
+      console.warn("Input element is not yet connected to the DOM.");
+      return;
+    }
+    if (!this.shadowRoot.querySelector("input")) {
+      console.warn("Input element is not found in the shadow DOM.");
+      return;
+    }
+    this.shadowRoot.querySelector("input").focus();
+  }
+}
+function q() {
+  typeof window < "u" && !customElements.get("cd-input") && customElements.define("cd-input", f);
 }
-r(g, "styles", l`
+p();
+class g extends r {
+  static styles = a`
     @font-face {
       font-family: 'Geist';
-      src: url(${n(s)}) format('woff');
+      src: url(${o(i)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -616,70 +598,56 @@ r(g, "styles", l`
       flex-direction: column;
       gap: 8px;
     }
-  `), r(g, "properties", {
-  image: {
-    type: String,
-    reflect: !0,
-    attribute: "image",
-    defaultValue: ""
-  },
-  name: {
-    type: String,
-    reflect: !0,
-    attribute: "name",
-    defaultValue: ""
-  },
-  small: {
-    type: Boolean,
-    reflect: !0,
-    attribute: "sidebar",
-    defaultValue: !1
-  }
-});
-function P() {
-  typeof window < "u" && !customElements.get("cd-nav-bar") && customElements.define("cd-nav-bar", g);
-}
-B();
-c();
-class m extends a {
+  `;
+  static properties = {
+    image: {
+      type: String,
+      reflect: !0,
+      attribute: "image",
+      defaultValue: ""
+    },
+    name: {
+      type: String,
+      reflect: !0,
+      attribute: "name",
+      defaultValue: ""
+    },
+    small: {
+      type: Boolean,
+      reflect: !0,
+      attribute: "sidebar",
+      defaultValue: !1
+    }
+  };
   constructor() {
-    super(), this.icon = "", this.name = "", this.variant = "none", this.amount = 0, this.maxCount = 99, this.important = !1, this.dropdown = !1, this.active = !1, this.selected = !1, this.link = void 0;
+    super(), this.image = "", this.name = "";
   }
   render() {
-    return o`
-      <a href="${h(this.link)}" class="nav-item ${this.active ? "active" : ""} ${this.select ? "selected" : ""}" tabindex="0">
-        <slot name="before" class="${this.amount > 0 && !this.select ? "standout" : ""} ${this.select ? "selected" : ""}"></slot>
-        <p>${this.name}</p>
-        ${this.variant == "dropdown" ? o`<cd-icon class='caret' name='caret-down' size='sm'></cd-icon>` : ""}
-        ${this.variant == "link" ? o`<cd-icon name='external' size='sm'></cd-icon>` : ""}
-        ${this.variant == "number" ? o`<cd-counter count='${this.amount}' max-count='${this.maxCount}' important='${this.important}'></cd-notification-counter>` : ""}
-      </a>
-      <div class="children ${this.active ? "children-active" : ""}">
-        <slot></slot>
-      </div>
+    return e`
+      <nav class="navbar ${this.small ? "small" : ""}">
+       ${this.image != "" && this.name != "" ? e` <div class="image">
+       <cd-nav-image src="${this.image}" alt="Logo" name="${this.name}"></cd-nav-image>
+     </div>` : ""}
+
+        <div class="items">
+          <slot name="start"></slot>
+          <slot></slot>
+          <slot name="end"></slot>
+        </div>
+      </nav>
     `;
   }
-  setSelectState(t) {
-    if (typeof t != "boolean")
-      throw new Error("Select must be a boolean value");
-    this.select !== t && (this.select = t, this.requestUpdate());
-  }
-  setActiveState(t) {
-    if (typeof t != "boolean")
-      throw new Error("Active must be a boolean value");
-    this.active !== t && (this.active = t, this.requestUpdate());
-  }
-  toggleSelect() {
-    this.select = !this.select, this.requestUpdate();
-  }
-  toggleActive() {
-    this.active = !this.active, this.requestUpdate();
-  }
 }
-r(m, "styles", l`
+function V() {
+  typeof window < "u" && !customElements.get("cd-nav-bar") && customElements.define("cd-nav-bar", g);
+}
+h();
+s();
+class m extends r {
+  static styles = a`
     @font-face {
       font-family: 'Geist';
-      src: url('${n(s)}') format('woff');
+      src: url('${o(i)}') format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -770,73 +738,99 @@ r(m, "styles", l`
       --icon-stroke: var(--base-color-teal-900);
       --icon-background-primary: var(--base-color-teal-300);
     }
-    `), r(m, "properties", {
-  name: {
-    type: String,
-    reflect: !0,
-    attribute: "name"
-  },
-  variant: {
-    type: String,
-    reflect: !0,
-    attribute: "variant",
-    converter: (t) => ["dropdown", "link", "number"].includes(t) ? t : "none"
-  },
-  amount: {
-    type: Number,
-    reflect: !0,
-    attribute: "amount",
-    converter: (t) => isNaN(t) ? 0 : t
-  },
-  maxCount: {
-    type: Number,
-    reflect: !0,
-    attribute: "max-count",
-    converter: (t) => isNaN(t) ? 99 : t
-  },
-  important: {
-    type: Boolean,
-    reflect: !0,
-    attribute: "important"
-  },
-  link: {
-    type: String,
-    reflect: !0,
-    attribute: "link"
-  },
-  icon: {
-    type: String,
-    reflect: !0,
-    attribute: "icon"
-  },
-  active: {
-    type: Boolean,
-    reflect: !0,
-    attribute: "active"
-  },
-  select: {
-    type: Boolean,
-    reflect: !0,
-    attribute: "selected"
-  }
-});
-function G() {
-  typeof window < "u" && !customElements.get("cd-nav-item") && customElements.define("cd-nav-item", m);
-}
-class y extends a {
+    `;
+  static properties = {
+    name: {
+      type: String,
+      reflect: !0,
+      attribute: "name"
+    },
+    variant: {
+      type: String,
+      reflect: !0,
+      attribute: "variant",
+      converter: (t) => ["dropdown", "link", "number"].includes(t) ? t : "none"
+    },
+    amount: {
+      type: Number,
+      reflect: !0,
+      attribute: "amount",
+      converter: (t) => isNaN(t) ? 0 : t
+    },
+    maxCount: {
+      type: Number,
+      reflect: !0,
+      attribute: "max-count",
+      converter: (t) => isNaN(t) ? 99 : t
+    },
+    important: {
+      type: Boolean,
+      reflect: !0,
+      attribute: "important"
+    },
+    link: {
+      type: String,
+      reflect: !0,
+      attribute: "link"
+    },
+    icon: {
+      type: String,
+      reflect: !0,
+      attribute: "icon"
+    },
+    active: {
+      type: Boolean,
+      reflect: !0,
+      attribute: "active"
+    },
+    select: {
+      type: Boolean,
+      reflect: !0,
+      attribute: "selected"
+    }
+  };
   constructor() {
-    super();
+    super(), this.icon = "", this.name = "", this.variant = "none", this.amount = 0, this.maxCount = 99, this.important = !1, this.dropdown = !1, this.active = !1, this.selected = !1, this.link = void 0;
   }
   render() {
-    return o`
+    return e`
+      <a href="${c(this.link)}" class="nav-item ${this.active ? "active" : ""} ${this.select ? "selected" : ""}" tabindex="0">
+        <slot name="before" class="${this.amount > 0 && !this.select ? "standout" : ""} ${this.select ? "selected" : ""}"></slot>
+        <p>${this.name}</p>
+        ${this.variant == "dropdown" ? e`<cd-icon class='caret' name='caret-down' size='sm'></cd-icon>` : ""}
+        ${this.variant == "link" ? e`<cd-icon name='external' size='sm'></cd-icon>` : ""}
+        ${this.variant == "number" ? e`<cd-counter count='${this.amount}' max-count='${this.maxCount}' important='${this.important}'></cd-notification-counter>` : ""}
+      </a>
+      <div class="children ${this.active ? "children-active" : ""}">
         <slot></slot>
+      </div>
     `;
   }
+  setSelectState(t) {
+    if (typeof t != "boolean")
+      throw new Error("Select must be a boolean value");
+    this.select !== t && (this.select = t, this.requestUpdate());
+  }
+  setActiveState(t) {
+    if (typeof t != "boolean")
+      throw new Error("Active must be a boolean value");
+    this.active !== t && (this.active = t, this.requestUpdate());
+  }
+  toggleSelect() {
+    this.select = !this.select, this.requestUpdate();
+  }
+  toggleActive() {
+    this.active = !this.active, this.requestUpdate();
+  }
+}
+function I() {
+  typeof window < "u" && !customElements.get("cd-nav-item") && customElements.define("cd-nav-item", m);
 }
-r(y, "styles", l`
+class y extends r {
+  static styles = a`
     @font-face {
       font-family: 'Geist';
-      src: url(${n(s)}) format('woff');
+      src: url(${o(i)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -845,33 +839,25 @@ r(y, "styles", l`
       width: 100%;
     }
 
-  `), r(y, "properties", {});
-function F() {
-  typeof window < "u" && !customElements.get("cd-table") && customElements.define("cd-table", y);
-}
-class x extends a {
+  `;
+  static properties = {};
   constructor() {
-    super(), this.text = "", this.content = !1, this.position = "top";
+    super();
   }
   render() {
-    return o`
-    <div class="tooltip-container">
-      <div class="tooltip ${this.position}">
-        <div class="${this.content ? "tooltip-content" : "none"} ${this.text ? "" : "no-border"}">
-         <slot></slot>
-        </div>
-        <div class="${this.text ? "tooltip-text" : "none"}">
-          ${this.text}
-        </div>
-      </div>
-    </div>
+    return e`
+        <slot></slot>
     `;
   }
 }
-r(x, "styles", l`
+function D() {
+  typeof window < "u" && !customElements.get("cd-table") && customElements.define("cd-table", y);
+}
+class x extends r {
+  static styles = a`
     @font-face {
       font-family: 'Geist';
-      src: url(${n(s)}) format('woff');
+      src: url(${o(i)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -933,47 +919,50 @@ r(x, "styles", l`
     .no-border {
       border-bottom: none;
     }
-  `), r(x, "properties", {
-  text: {
-    type: String,
-    reflect: !0
-  },
-  position: {
-    type: String,
-    reflect: !0,
-    attribute: "position",
-    converter: (t) => ["top", "right", "bottom", "left"].includes(t) ? t : "top"
-  },
-  content: {
-    type: Boolean,
-    reflect: !0
-  }
-});
-function N() {
-  typeof window < "u" && !customElements.get("cd-tool-tip") && customElements.define("cd-tool-tip", x);
-}
-c();
-class w extends a {
+  `;
+  static properties = {
+    text: {
+      type: String,
+      reflect: !0
+    },
+    position: {
+      type: String,
+      reflect: !0,
+      attribute: "position",
+      converter: (t) => ["top", "right", "bottom", "left"].includes(t) ? t : "top"
+    },
+    content: {
+      type: Boolean,
+      reflect: !0
+    }
+  };
   constructor() {
-    super(), this.primaryText = "", this.secondaryText = "", this.icon = "hart";
+    super(), this.text = "", this.content = !1, this.position = "top";
   }
   render() {
-    return o`
-    <div class="profile-stack">
-      <div class="text-stack">
-        <span class="name">${this.primaryText}</span>
-        ${this.secondaryText != "" ? o`<span class="org"><cd-icon name="${this.icon}" size="sm"></cd-icon>${this.secondaryText}</span>` : ""}
+    return e`
+    <div class="tooltip-container">
+      <div class="tooltip ${this.position}">
+        <div class="${this.content ? "tooltip-content" : "none"} ${this.text ? "" : "no-border"}">
+         <slot></slot>
+        </div>
+        <div class="${this.text ? "tooltip-text" : "none"}">
+          ${this.text}
+        </div>
       </div>
-      <cd-icon name="caret-down" size="sm"></cd-icon>
     </div>
-
     `;
   }
 }
-r(w, "styles", l`
+function R() {
+  typeof window < "u" && !customElements.get("cd-tool-tip") && customElements.define("cd-tool-tip", x);
+}
+s();
+class w extends r {
+  static styles = a`
     @font-face {
       font-family: 'Geist';
-      src: url(${n(s)}) format('woff');
+      src: url(${o(i)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -1012,46 +1001,52 @@ r(w, "styles", l`
       gap: 6px;
       align-items: center;
     }
-  `), r(w, "properties", {
-  primaryText: {
-    type: String,
-    reflect: !0,
-    attribute: "name",
-    defaultValue: ""
-  },
-  secondaryText: {
-    type: String,
-    reflect: !0,
-    attribute: "org",
-    defaultValue: ""
-  },
-  icon: {
-    type: String,
-    reflect: !0,
-    attribute: "icon",
-    defaultValue: ""
-  }
-});
-function U() {
-  typeof window < "u" && !customElements.get("cd-nav-profile") && customElements.define("cd-nav-profile", w);
-}
-c();
-class k extends a {
+  `;
+  static properties = {
+    primaryText: {
+      type: String,
+      reflect: !0,
+      attribute: "name",
+      defaultValue: ""
+    },
+    secondaryText: {
+      type: String,
+      reflect: !0,
+      attribute: "org",
+      defaultValue: ""
+    },
+    icon: {
+      type: String,
+      reflect: !0,
+      attribute: "icon",
+      defaultValue: ""
+    }
+  };
   constructor() {
-    super(), this.variant = "default", this.link = void 0;
+    super(), this.primaryText = "", this.secondaryText = "", this.icon = "hart";
   }
   render() {
-    return o`
-      ${this.variant === "default" ? o`<a href="${h(this.link)}" class="value"><slot></slot></a>` : ""}
-      ${this.variant === "dropdown" ? o`<span class="dropdown-value"><slot></slot></span>` : ""}
-      ${this.variant === "arrow" ? o`<a href="${h(this.link)}" class="arrow-value"><slot></slot><cd-icon name="arrow" size="sm"></cd-icon></a>` : ""}
+    return e`
+    <div class="profile-stack">
+      <div class="text-stack">
+        <span class="name">${this.primaryText}</span>
+        ${this.secondaryText != "" ? e`<span class="org"><cd-icon name="${this.icon}" size="sm"></cd-icon>${this.secondaryText}</span>` : ""}
+      </div>
+      <cd-icon name="caret-down" size="sm"></cd-icon>
+    </div>
+
     `;
   }
 }
-r(k, "styles", l`
+function L() {
+  typeof window < "u" && !customElements.get("cd-nav-profile") && customElements.define("cd-nav-profile", w);
+}
+s();
+class k extends r {
+  static styles = a`
     @font-face {
       font-family: 'Geist';
-      src: url(${n(s)}) format('woff');
+      src: url(${o(i)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -1125,128 +1120,40 @@ r(k, "styles", l`
       outline: 2px solid var(--input-border-color-focus);
       border-radius: 4px;
     }
-  `), r(k, "properties", {
-  variant: {
-    type: String,
-    reflect: !0,
-    attribute: "variant",
-    converter: (t) => ["default", "dropdown", "arrow"].includes(t) ? t : "default"
-  },
-  link: {
-    type: String,
-    reflect: !0,
-    attribute: "link"
-  }
-});
-function K() {
-  typeof window < "u" && !customElements.get("cd-value") && customElements.define("cd-value", k);
-}
-c();
-class $ extends a {
-  handleBlur(t) {
-    return this.dispatchEvent(new CustomEvent("blur", {
-      detail: {
-        value: t.target.value
-      },
-      bubbles: !0,
-      composed: !0
-    })), this.value = t.target.value, t.target.value;
-  }
-  handleFocus(t) {
-    return this.expandInput(), this.dispatchEvent(new CustomEvent("focus", {
-      detail: {
-        value: t.target.value
-      },
-      bubbles: !0,
-      composed: !0
-    })), this.value = t.target.value, t.target.value;
-  }
-  handleKeyPress(t) {
-    return this.dispatchEvent(new CustomEvent("keypress", {
-      detail: {
-        value: t.target.value,
-        key: t.target.keyCode
-      },
-      bubbles: !0,
-      composed: !0
-    })), this.value = t.target.value, t.target.value;
-  }
-  handleInput(t) {
-    return this.dispatchEvent(new CustomEvent("input", {
-      detail: {
-        value: t.target.value
-      },
-      bubbles: !0,
-      composed: !0
-    })), this.value = t.target.value, t.target.value;
-  }
+  `;
+  static properties = {
+    variant: {
+      type: String,
+      reflect: !0,
+      attribute: "variant",
+      converter: (t) => ["default", "dropdown", "arrow"].includes(t) ? t : "default"
+    },
+    link: {
+      type: String,
+      reflect: !0,
+      attribute: "link"
+    }
+  };
   constructor() {
-    super(), this.placeholder = "Search", this.value = "", this.disabled = !1, this.collapsed = !1, this.iconLeft = !1, this.iconRight = !1, this.size = "md", this.closeIcon = !1, this.label = "", this.labelPosition = "left", this.name = "", this.fullWidth = !1, this._internals = this.attachInternals();
+    super(), this.variant = "default", this.link = void 0;
   }
   render() {
-    return o`
-      <div class="search-container ${this.labelPosition}">
-        ${this.label ? o`<label for="search-input">${this.label}</label>` : ""}
-        ${this.iconLeft && !this.collapsed ? o`<span class="icon-left-container"><cd-icon name="search" class="icon-left" variant="light-slate"></cd-icon></span>` : ""}
-
-        <input
-          id="search-input"
-          type="text"
-          class="search-input ${this.collapsed ? "collapsed" : "expanded"} ${this.iconLeft ? "icon-spacing-left" : ""} ${this.iconRight ? "icon-spacing-right" : ""} ${this.size} ${this.fullWidth && !this.collapsed ? "full-width" : ""}"
-          placeholder="${this.placeholder}"
-          .value="${this.value}"
-          ?disabled="${this.disabled}"
-          @input="${this.handleInput}"
-          @focus="${this.handleFocus}"
-          @blur="${this.handleBlur}"
-          @keypress="${this.handleKeyPress}"
-          @click="${this.expandInput}"
-          name="${this.name}"
-        >
-        ${this.iconRight || this.collapsed ? o`<span @click="${this.expandInput}" class="${this.collapsed ? "icon-collapsed-container" : "icon-right-container"}"><cd-icon name="search" class="${this.collapsed ? "icon-collapsed " + this.size : "icon-right"}" variant="light-slate"></cd-icon></span>` : ""}
-        ${this.closeIcon ? o`<span class="${this.collapsed ? "hidden" : "active"}" id='closeIcon' tabindex='0'><cd-icon name="exit" id="close-icon" class="icon close ${this.collapsed ? "hidden-icon" : "active-icon"}" @click="${this.collapseInput}"></cd-icon></span>` : ""}
-      </div>
+    return e`
+      ${this.variant === "default" ? e`<a href="${c(this.link)}" class="value"><slot></slot></a>` : ""}
+      ${this.variant === "dropdown" ? e`<span class="dropdown-value"><slot></slot></span>` : ""}
+      ${this.variant === "arrow" ? e`<a href="${c(this.link)}" class="arrow-value"><slot></slot><cd-icon name="arrow" size="sm"></cd-icon></a>` : ""}
     `;
   }
-  firstUpdated() {
-    if (!this.shadowRoot) {
-      console.warn("Shadow DOM is not available.");
-      return;
-    }
-    this.shadowRoot.querySelector(".active") && (console.log("Adding event listener to active element"), this.shadowRoot.querySelector(".active").addEventListener("keydown", (t) => {
-      console.log("test"), t.keyCode === 13 && this.collapseInput();
-    }));
-  }
-  focus() {
-    if (!this.shadowRoot) {
-      console.warn("Input element is not yet connected to the DOM.");
-      return;
-    }
-    if (!this.shadowRoot.querySelector("input")) {
-      console.warn("Input element is not found in the shadow DOM.");
-      return;
-    }
-    this.shadowRoot.querySelector("#search-input").focus();
-  }
-  expandInput() {
-    this.collapsed && (this.collapsed = !1, this.shadowRoot.querySelector("#search-input").focus(), this.shadowRoot.querySelector("#close-icon").classList.remove("hidden-icon"), this.shadowRoot.querySelector("#close-icon").classList.remove("hidden"), this.shadowRoot.querySelector("#close-icon").classList.add("active-icon"), this.shadowRoot.querySelector("#close-icon").classList.add("active"), this.requestUpdate(), this.shadowRoot.querySelector("#closeIcon").addEventListener("keydown", (t) => {
-      t.key === "Enter" && this.collapseInput();
-    }));
-  }
-  collapseInput() {
-    this.collapsed || (this.collapsed = !0, this.value = "", this.shadowRoot.querySelector("#close-icon").classList.add("hidden-icon"), this.shadowRoot.querySelector("#close-icon").classList.add("hidden"), this.shadowRoot.querySelector("#close-icon").classList.remove("active"), this.shadowRoot.querySelector("#close-icon").classList.remove("active-icon"), this.dispatchEvent(new CustomEvent("collapsed", {
-      detail: {
-        closed: !0
-      },
-      bubbles: !0,
-      composed: !0
-    })), this.requestUpdate());
-  }
 }
-r($, "styles", l`
+function P() {
+  typeof window < "u" && !customElements.get("cd-value") && customElements.define("cd-value", k);
+}
+s();
+class $ extends r {
+  static styles = a`
     @font-face {
       font-family: 'Geist';
-      src: url(${n(s)}) format('woff');
+      src: url(${o(i)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -1427,102 +1334,171 @@ r($, "styles", l`
       opacity: 0;
       transition: opacity 0.5s ease-in-out;
     }
-  `), r($, "properties", {
-  placeholder: {
-    type: String,
-    reflect: !0
-  },
-  value: {
-    type: String,
-    reflect: !0
-  },
-  disabled: {
-    type: Boolean,
-    reflect: !0
-  },
-  collapsed: {
-    type: Boolean,
-    reflect: !0
-  },
-  iconLeft: {
-    type: Boolean,
-    reflect: !0,
-    attribute: "icon-left"
-  },
-  iconRight: {
-    type: Boolean,
-    reflect: !0,
-    attribute: "icon-right"
-  },
-  size: {
-    type: String,
-    reflect: !0
-  },
-  closeIcon: {
-    type: Boolean,
-    reflect: !0,
-    attribute: "close-icon"
-  },
-  label: {
-    type: String,
-    reflect: !0
-  },
-  labelPosition: {
-    type: String,
-    reflect: !0,
-    attribute: "label-position"
-  },
-  name: {
-    type: String,
-    reflect: !0
-  },
-  fullWidth: {
-    type: Boolean,
-    reflect: !0,
-    attribute: "full-width"
+  `;
+  static properties = {
+    placeholder: {
+      type: String,
+      reflect: !0
+    },
+    value: {
+      type: String,
+      reflect: !0
+    },
+    disabled: {
+      type: Boolean,
+      reflect: !0
+    },
+    collapsed: {
+      type: Boolean,
+      reflect: !0
+    },
+    iconLeft: {
+      type: Boolean,
+      reflect: !0,
+      attribute: "icon-left"
+    },
+    iconRight: {
+      type: Boolean,
+      reflect: !0,
+      attribute: "icon-right"
+    },
+    size: {
+      type: String,
+      reflect: !0
+    },
+    closeIcon: {
+      type: Boolean,
+      reflect: !0,
+      attribute: "close-icon"
+    },
+    label: {
+      type: String,
+      reflect: !0
+    },
+    labelPosition: {
+      type: String,
+      reflect: !0,
+      attribute: "label-position"
+    },
+    name: {
+      type: String,
+      reflect: !0
+    },
+    fullWidth: {
+      type: Boolean,
+      reflect: !0,
+      attribute: "full-width"
+    }
+  };
+  handleBlur(t) {
+    return this.dispatchEvent(new CustomEvent("blur", {
+      detail: {
+        value: t.target.value
+      },
+      bubbles: !0,
+      composed: !0
+    })), this.value = t.target.value, t.target.value;
+  }
+  handleFocus(t) {
+    return this.expandInput(), this.dispatchEvent(new CustomEvent("focus", {
+      detail: {
+        value: t.target.value
+      },
+      bubbles: !0,
+      composed: !0
+    })), this.value = t.target.value, t.target.value;
+  }
+  handleKeyPress(t) {
+    return this.dispatchEvent(new CustomEvent("keypress", {
+      detail: {
+        value: t.target.value,
+        key: t.target.keyCode
+      },
+      bubbles: !0,
+      composed: !0
+    })), this.value = t.target.value, t.target.value;
+  }
+  handleInput(t) {
+    return this.dispatchEvent(new CustomEvent("input", {
+      detail: {
+        value: t.target.value
+      },
+      bubbles: !0,
+      composed: !0
+    })), this.value = t.target.value, t.target.value;
   }
-});
-function M() {
-  typeof window < "u" && !customElements.get("cd-search") && customElements.define("cd-search", $);
-}
-c();
-class E extends a {
   constructor() {
-    super(), this.label = "", this.active = !1, this.disabled = !1, this.variant = "default", this.size = "md";
+    super(), this.placeholder = "Search", this.value = "", this.disabled = !1, this.collapsed = !1, this.iconLeft = !1, this.iconRight = !1, this.size = "md", this.closeIcon = !1, this.label = "", this.labelPosition = "left", this.name = "", this.fullWidth = !1, this._internals = this.attachInternals();
   }
   render() {
-    return o`
-    <div class="tab-outer ${this.variant} ${this.active ? "active" : ""}" >
-      <div class='tab ${this.variant} ${this.size} ${this.disabled ? "disabled" : ""} ${this.active ? "active" : ""}' tabindex="${this.disabled ? -1 : 0}">
-        <slot name="start"></slot>
-        <span class="label">${this.label}</span>
-        <slot name="end"></slot>
+    return e`
+      <div class="search-container ${this.labelPosition}">
+        ${this.label ? e`<label for="search-input">${this.label}</label>` : ""}
+        ${this.iconLeft && !this.collapsed ? e`<span class="icon-left-container"><cd-icon name="search" class="icon-left" variant="light-slate"></cd-icon></span>` : ""}
+
+        <input
+          id="search-input"
+          type="text"
+          class="search-input ${this.collapsed ? "collapsed" : "expanded"} ${this.iconLeft ? "icon-spacing-left" : ""} ${this.iconRight ? "icon-spacing-right" : ""} ${this.size} ${this.fullWidth && !this.collapsed ? "full-width" : ""}"
+          placeholder="${this.placeholder}"
+          .value="${this.value}"
+          ?disabled="${this.disabled}"
+          @input="${this.handleInput}"
+          @focus="${this.handleFocus}"
+          @blur="${this.handleBlur}"
+          @keypress="${this.handleKeyPress}"
+          @click="${this.expandInput}"
+          name="${this.name}"
+        >
+        ${this.iconRight || this.collapsed ? e`<span @click="${this.expandInput}" class="${this.collapsed ? "icon-collapsed-container" : "icon-right-container"}"><cd-icon name="search" class="${this.collapsed ? "icon-collapsed " + this.size : "icon-right"}" variant="light-slate"></cd-icon></span>` : ""}
+        ${this.closeIcon ? e`<span class="${this.collapsed ? "hidden" : "active"}" id='closeIcon' tabindex='0'><cd-icon name="exit" id="close-icon" class="icon close ${this.collapsed ? "hidden-icon" : "active-icon"}" @click="${this.collapseInput}"></cd-icon></span>` : ""}
       </div>
-    </div>
     `;
   }
-  toggleActive() {
-    this.active = !this.active;
+  firstUpdated() {
+    if (!this.shadowRoot) {
+      console.warn("Shadow DOM is not available.");
+      return;
+    }
+    this.shadowRoot.querySelector(".active") && (console.log("Adding event listener to active element"), this.shadowRoot.querySelector(".active").addEventListener("keydown", (t) => {
+      console.log("test"), t.keyCode === 13 && this.collapseInput();
+    }));
   }
-  setActive(t) {
-    if (typeof t != "boolean")
-      throw new TypeError("Active must be a boolean");
-    if (this.disabled)
-      throw new Error("Cannot set active state when the tab is disabled");
-    this.active = t;
+  focus() {
+    if (!this.shadowRoot) {
+      console.warn("Input element is not yet connected to the DOM.");
+      return;
+    }
+    if (!this.shadowRoot.querySelector("input")) {
+      console.warn("Input element is not found in the shadow DOM.");
+      return;
+    }
+    this.shadowRoot.querySelector("#search-input").focus();
   }
-  setDisabled(t) {
-    if (typeof t != "boolean")
-      throw new TypeError("Disabled must be a boolean");
-    if (this.active && t)
-      throw new Error("Cannot disable an active tab");
-    this.disabled = t;
+  expandInput() {
+    this.collapsed && (this.collapsed = !1, this.shadowRoot.querySelector("#search-input").focus(), this.shadowRoot.querySelector("#close-icon").classList.remove("hidden-icon"), this.shadowRoot.querySelector("#close-icon").classList.remove("hidden"), this.shadowRoot.querySelector("#close-icon").classList.add("active-icon"), this.shadowRoot.querySelector("#close-icon").classList.add("active"), this.requestUpdate(), this.shadowRoot.querySelector("#closeIcon").addEventListener("keydown", (t) => {
+      t.key === "Enter" && this.collapseInput();
+    }));
+  }
+  collapseInput() {
+    this.collapsed || (this.collapsed = !0, this.value = "", this.shadowRoot.querySelector("#close-icon").classList.add("hidden-icon"), this.shadowRoot.querySelector("#close-icon").classList.add("hidden"), this.shadowRoot.querySelector("#close-icon").classList.remove("active"), this.shadowRoot.querySelector("#close-icon").classList.remove("active-icon"), this.dispatchEvent(new CustomEvent("collapsed", {
+      detail: {
+        closed: !0
+      },
+      bubbles: !0,
+      composed: !0
+    })), this.requestUpdate());
   }
 }
-r(E, "styles", l`
+function N() {
+  typeof window < "u" && !customElements.get("cd-search") && customElements.define("cd-search", $);
+}
+s();
+class E extends r {
+  static styles = a`
     @font-face {
       font-family: 'Geist';
-      src: url(${n(s)}) format('woff');
+      src: url(${o(i)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -1624,46 +1600,71 @@ r(E, "styles", l`
     .tab:focus {
       outline: 2px solid var(--input-border-color-focus);
     }
-  `), r(E, "properties", {
-  label: {
-    type: String,
-    reflect: !0
-  },
-  active: {
-    type: Boolean,
-    reflect: !0
-  },
-  disabled: {
-    type: Boolean,
-    reflect: !0
-  },
-  variant: {
-    type: String,
-    reflect: !0,
-    attribute: "variant",
-    converter: (t) => ["default", "pill", "outline"].includes(t) ? t : "default"
-  },
-  size: {
-    type: String,
-    reflect: !0
+  `;
+  static properties = {
+    label: {
+      type: String,
+      reflect: !0
+    },
+    active: {
+      type: Boolean,
+      reflect: !0
+    },
+    disabled: {
+      type: Boolean,
+      reflect: !0
+    },
+    variant: {
+      type: String,
+      reflect: !0,
+      attribute: "variant",
+      converter: (t) => ["default", "pill", "outline"].includes(t) ? t : "default"
+    },
+    size: {
+      type: String,
+      reflect: !0
+    }
+  };
+  constructor() {
+    super(), this.label = "", this.active = !1, this.disabled = !1, this.variant = "default", this.size = "md";
   }
-});
-function W() {
-  typeof window < "u" && !customElements.get("cd-tab") && customElements.define("cd-tab", E);
-}
-class z extends a {
   render() {
-    return o`
-    <div class='container ${this.variant}'>
-      <slot></slot>
+    return e`
+    <div class="tab-outer ${this.variant} ${this.active ? "active" : ""}" >
+      <div class='tab ${this.variant} ${this.size} ${this.disabled ? "disabled" : ""} ${this.active ? "active" : ""}' tabindex="${this.disabled ? -1 : 0}">
+        <slot name="start"></slot>
+        <span class="label">${this.label}</span>
+        <slot name="end"></slot>
+      </div>
     </div>
     `;
   }
+  toggleActive() {
+    this.active = !this.active;
+  }
+  setActive(t) {
+    if (typeof t != "boolean")
+      throw new TypeError("Active must be a boolean");
+    if (this.disabled)
+      throw new Error("Cannot set active state when the tab is disabled");
+    this.active = t;
+  }
+  setDisabled(t) {
+    if (typeof t != "boolean")
+      throw new TypeError("Disabled must be a boolean");
+    if (this.active && t)
+      throw new Error("Cannot disable an active tab");
+    this.disabled = t;
+  }
+}
+function G() {
+  typeof window < "u" && !customElements.get("cd-tab") && customElements.define("cd-tab", E);
 }
-r(z, "styles", l`
+class z extends r {
+  static styles = a`
     @font-face {
       font-family: 'Geist';
-      src: url(${n(s)}) format('woff');
+      src: url(${o(i)}) format('woff');
       font-weight: normal;
       font-style: normal;
     }
@@ -1683,143 +1684,72 @@ r(z, "styles", l`
 
 
 
-  `), r(z, "properties", {
-  variant: {
-    type: String,
-    reflect: !0,
-    attribute: "variant",
-    converter: (t) => ["default", "pill", "outline"].includes(t) ? t : "default",
-    defaultValue: "default"
-  }
-});
-function Y() {
-  typeof window < "u" && !customElements.get("cd-tab-container") && customElements.define("cd-tab-container", z);
-}
-A();
-class u extends a {
-  constructor() {
-    super();
-    r(this, "handleChange", (e) => (this.value = e.target.value, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("change", {
-      detail: {
-        value: this.value
-      },
-      bubbles: !0,
-      composed: !0
-    })), this.value));
-    r(this, "handleInput", (e) => (this.value = e.target.value, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("input", {
-      detail: {
-        value: this.value
-      },
-      bubbles: !0,
-      composed: !0
-    })), this.value));
-    r(this, "handleFocus", (e) => (this.value = e.target.value, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("focus", {
-      detail: {
-        value: this.value
-      },
-      bubbles: !0,
-      composed: !0
-    })), this.value));
-    r(this, "handleBlur", (e) => (this.value = e.target.value, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("blur", {
-      detail: {
-        value: this.value
-      },
-      bubbles: !0,
-      composed: !0
-    })), this.value));
-    this.value = "", this.shortcut = void 0, this.disabled = void 0, this.form = void 0, this.size = "md", this.fullWidth = !1, this.variant = "default", this.timezone = "America/New_York", this._internals = this.attachInternals(), this._internals.setValidity({
-      customError: this.errorText && this.errorText.length > 0 || !1
-    });
-  }
+  `;
+  static properties = {
+    variant: {
+      type: String,
+      reflect: !0,
+      attribute: "variant",
+      converter: (t) => ["default", "pill", "outline"].includes(t) ? t : "default",
+      defaultValue: "default"
+    }
+  };
   render() {
-    return o`
-    <div class='container'>
-      <input class='${this.error ? "input-error" : ""} ${this.disabled ? "disabled" : ""} ${this.fullWidth ? "full-width" : ""} ${this.variant} ${this.size}' type='date' id='${this.name | "date"}' name='${this.name | "date"}' .value='${this.value}' @change='${this.handleChange}' @focus='${this.handleFocus}' @blur='${this.handleBlur}' @input='${this.handleInput}' ?disabled='${this.disabled}' />
-      ${this.shortcut ? o`<cd-button variant='primary' ?disabled='${this.disabled}'>${this.shortcut}</cd-button>` : ""}
+    return e`
+    <div class='container ${this.variant}'>
+      <slot></slot>
     </div>
-
     `;
   }
-  firstUpdated() {
-    if (!this.shadowRoot) {
-      console.warn("Shadow DOM not available, DateComponent may not render correctly.");
-      return;
-    }
-    this.shadowRoot.querySelector("cd-button") && this.shadowRoot.querySelector("cd-button").addEventListener("button-click", () => {
-      this.setValue(this.dateNow()), this.dispatchEvent(new CustomEvent("change", {
-        detail: {
-          value: this.value
-        },
-        bubbles: !0,
-        composed: !0
-      }));
-    });
-  }
-  dateNow() {
-    let e = (/* @__PURE__ */ new Date()).toLocaleString("en-US", {
-      timeZone: this.timezone
-    });
-    return new Date(e).toISOString().slice(0, 10);
-  }
-  setValue(e) {
-    this.value = e, this._internals.setFormValue(e), this.requestUpdate();
-  }
-  setError(e) {
-    if (typeof e != "error") {
-      console.warn("Error text must be a string");
-      return;
-    }
-    this.error = e, this._internals.setValidity({
-      customError: e
-    }), this.requestUpdate();
-  }
-  setDisabled(e) {
-    this.disabled = e, this._internals.setValidity({
-      customError: e
-    }), this.requestUpdate();
-  }
 }
-r(u, "formAssociated", !0), r(u, "distinctTimezones", [
-  "Etc/GMT+12",
-  "Pacific/Pago_Pago",
-  "Pacific/Honolulu",
-  "America/Anchorage",
-  "America/Los_Angeles",
-  "America/Denver",
-  "America/Chicago",
-  "America/New_York",
-  "America/Halifax",
-  "America/Argentina/Buenos_Aires",
-  "America/Noronha",
-  "Atlantic/Azores",
-  "Europe/London",
-  "Europe/Paris",
-  "Europe/Bucharest",
-  "Europe/Moscow",
-  "Asia/Tehran",
-  "Asia/Dubai",
-  "Asia/Kabul",
-  "Asia/Karachi",
-  "Asia/Kolkata",
-  "Asia/Kathmandu",
-  "Asia/Dhaka",
-  "Asia/Yangon",
-  "Asia/Bangkok",
-  "Asia/Shanghai",
-  "Australia/Eucla",
-  "Asia/Tokyo",
-  "Australia/Darwin",
-  "Australia/Sydney",
-  "Australia/Lord_Howe",
-  "Pacific/Noumea",
-  "Pacific/Auckland",
-  "Pacific/Chatham",
-  "Pacific/Tongatapu",
-  "Pacific/Kiritimati"
-]), r(u, "styles", l`
+function F() {
+  typeof window < "u" && !customElements.get("cd-tab-container") && customElements.define("cd-tab-container", z);
+}
+d();
+class S extends r {
+  static formAssociated = !0;
+  static distinctTimezones = [
+    "Etc/GMT+12",
+    "Pacific/Pago_Pago",
+    "Pacific/Honolulu",
+    "America/Anchorage",
+    "America/Los_Angeles",
+    "America/Denver",
+    "America/Chicago",
+    "America/New_York",
+    "America/Halifax",
+    "America/Argentina/Buenos_Aires",
+    "America/Noronha",
+    "Atlantic/Azores",
+    "Europe/London",
+    "Europe/Paris",
+    "Europe/Bucharest",
+    "Europe/Moscow",
+    "Asia/Tehran",
+    "Asia/Dubai",
+    "Asia/Kabul",
+    "Asia/Karachi",
+    "Asia/Kolkata",
+    "Asia/Kathmandu",
+    "Asia/Dhaka",
+    "Asia/Yangon",
+    "Asia/Bangkok",
+    "Asia/Shanghai",
+    "Australia/Eucla",
+    "Asia/Tokyo",
+    "Australia/Darwin",
+    "Australia/Sydney",
+    "Australia/Lord_Howe",
+    "Pacific/Noumea",
+    "Pacific/Auckland",
+    "Pacific/Chatham",
+    "Pacific/Tongatapu",
+    "Pacific/Kiritimati"
+  ];
+  static styles = a`
     @font-face {
       font-family: 'Geist';
-      src: url(${n(s)}) format('woff');
+      src: url(${o(i)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -1908,105 +1838,103 @@ r(u, "formAssociated", !0), r(u, "distinctTimezones", [
       flex-direction: row;
       align-items: center;
     }
-  `), r(u, "properties", {
-  value: {
-    type: String,
-    reflect: !0
-  },
-  shortcut: {
-    type: String,
-    reflect: !0
-  },
-  error: {
-    type: Boolean,
-    reflect: !0,
-    attribute: "error"
-  },
-  disabled: {
-    type: Boolean,
-    reflect: !0
-  },
-  form: {
-    type: String,
-    reflect: !0,
-    attribute: "form"
-  },
-  size: {
-    type: String,
-    reflect: !0,
-    attribute: "size",
-    converter: (e) => ["sm", "md", "lg"].includes(e) ? e : "md"
-  },
-  fullWidth: {
-    type: Boolean,
-    reflect: !0,
-    attribute: "full-width"
-  },
-  variant: {
-    type: String,
-    reflect: !0,
-    attribute: "variant",
-    converter: (e) => ["dashed", "dotted"].includes(e) ? e : "default"
-  },
-  timezone: {
-    type: String,
-    reflect: !0,
-    attribute: "timezone",
-    converter: (e) => distinctTimezones.includes(e) ? e : "America/New_York"
-  }
-});
-function O() {
-  typeof window < "u" && !customElements.get("cd-date") && customElements.define("cd-date", u);
-}
-A();
-class p extends a {
+  `;
+  static properties = {
+    value: {
+      type: String,
+      reflect: !0
+    },
+    shortcut: {
+      type: String,
+      reflect: !0
+    },
+    error: {
+      type: Boolean,
+      reflect: !0,
+      attribute: "error"
+    },
+    disabled: {
+      type: Boolean,
+      reflect: !0
+    },
+    form: {
+      type: String,
+      reflect: !0,
+      attribute: "form"
+    },
+    size: {
+      type: String,
+      reflect: !0,
+      attribute: "size",
+      converter: (t) => ["sm", "md", "lg"].includes(t) ? t : "md"
+    },
+    fullWidth: {
+      type: Boolean,
+      reflect: !0,
+      attribute: "full-width"
+    },
+    variant: {
+      type: String,
+      reflect: !0,
+      attribute: "variant",
+      converter: (t) => ["dashed", "dotted"].includes(t) ? t : "default"
+    },
+    timezone: {
+      type: String,
+      reflect: !0,
+      attribute: "timezone",
+      converter: (t) => distinctTimezones.includes(t) ? t : "America/New_York"
+    }
+  };
   constructor() {
-    super();
-    r(this, "handleChange", (e) => (this.value = e.target.value, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("change", {
-      detail: {
-        value: this.value
-      },
-      bubbles: !0,
-      composed: !0
-    })), this.value));
-    r(this, "handleInput", (e) => (this.value = e.target.value, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("input", {
-      detail: {
-        value: this.value
-      },
-      bubbles: !0,
-      composed: !0
-    })), this.value));
-    r(this, "handleFocus", (e) => (this.value = e.target.value, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("focus", {
-      detail: {
-        value: this.value
-      },
-      bubbles: !0,
-      composed: !0
-    })), this.value));
-    r(this, "handleBlur", (e) => (this.value = e.target.value, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("blur", {
-      detail: {
-        value: this.value
-      },
-      bubbles: !0,
-      composed: !0
-    })), this.value));
-    this.value = "", this.shortcut = void 0, this.error = !1, this.disabled = void 0, this.form = void 0, this.size = "md", this.fullWidth = !1, this.variant = "default", this.timezone = "America/New_York", this._internals = this.attachInternals(), this._internals.setValidity({
+    super(), this.value = "", this.shortcut = void 0, this.disabled = void 0, this.form = void 0, this.size = "md", this.fullWidth = !1, this.variant = "default", this.timezone = "America/New_York", this._internals = this.attachInternals(), this._internals.setValidity({
       customError: this.errorText && this.errorText.length > 0 || !1
     });
   }
+  handleChange = (t) => (this.value = t.target.value, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("change", {
+    detail: {
+      value: this.value
+    },
+    bubbles: !0,
+    composed: !0
+  })), this.value);
+  handleInput = (t) => (this.value = t.target.value, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("input", {
+    detail: {
+      value: this.value
+    },
+    bubbles: !0,
+    composed: !0
+  })), this.value);
+  handleFocus = (t) => (this.value = t.target.value, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("focus", {
+    detail: {
+      value: this.value
+    },
+    bubbles: !0,
+    composed: !0
+  })), this.value);
+  handleBlur = (t) => (this.value = t.target.value, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("blur", {
+    detail: {
+      value: this.value
+    },
+    bubbles: !0,
+    composed: !0
+  })), this.value);
   render() {
-    return o`
-    <input class='${this.error ? "input-error" : ""} ${this.disabled ? "disabled" : ""} ${this.fullWidth ? "full-width" : ""} ${this.variant} ${this.size}' type='time' id='${this.name | "time"}' name='${this.name | "time"}' .value='${this.value}' @change='${this.handleChange}' @focus='${this.handleFocus}' @blur='${this.handleBlur}' @input='${this.handleInput}' ?disabled='${this.disabled}' />
-    ${this.shortcut ? o`<cd-button variant='primary' ?disabled='${this.disabled}'>${this.shortcut}</cd-button>` : ""}
+    return e`
+    <div class='container'>
+      <input class='${this.error ? "input-error" : ""} ${this.disabled ? "disabled" : ""} ${this.fullWidth ? "full-width" : ""} ${this.variant} ${this.size}' type='date' id='${this.name | "date"}' name='${this.name | "date"}' .value='${this.value}' @change='${this.handleChange}' @focus='${this.handleFocus}' @blur='${this.handleBlur}' @input='${this.handleInput}' ?disabled='${this.disabled}' />
+      ${this.shortcut ? e`<cd-button variant='primary' ?disabled='${this.disabled}'>${this.shortcut}</cd-button>` : ""}
+    </div>
+
     `;
   }
   firstUpdated() {
     if (!this.shadowRoot) {
-      console.warn("Shadow DOM not available, TimeComponent may not render correctly.");
+      console.warn("Shadow DOM not available, DateComponent may not render correctly.");
       return;
     }
     this.shadowRoot.querySelector("cd-button") && this.shadowRoot.querySelector("cd-button").addEventListener("button-click", () => {
-      this.setValue(this.timeNow()), this.dispatchEvent(new CustomEvent("change", {
+      this.setValue(this.dateNow()), this.dispatchEvent(new CustomEvent("change", {
         detail: {
           value: this.value
         },
@@ -2015,77 +1943,78 @@ class p extends a {
       }));
     });
   }
-  timeNow() {
-    console.log(this.timezone);
-    let e = (/* @__PURE__ */ new Date()).toLocaleString("en-US", {
-      timeZone: this.timezone || "America/New_York"
+  dateNow() {
+    let t = (/* @__PURE__ */ new Date()).toLocaleString("en-US", {
+      timeZone: this.timezone
     });
-    if (console.log(e), console.log(e.split(" ")[2]), e.split(" ")[2] === "PM") {
-      let d = e.split(" ");
-      console.log(d), e = Number(d[1].split(":")[0]) + 12 + ":" + d[1].split(":")[1] + ":" + d[1].split(":")[2];
-    } else
-      e = e.split(" ")[1];
-    return e;
+    return new Date(t).toISOString().slice(0, 10);
   }
-  setValue(e) {
-    this.value = e, this._internals.setFormValue(e), this.requestUpdate();
+  setValue(t) {
+    this.value = t, this._internals.setFormValue(t), this.requestUpdate();
   }
-  setError(e) {
-    if (typeof e != "error") {
+  setError(t) {
+    if (typeof t != "error") {
       console.warn("Error text must be a string");
       return;
     }
-    this.error = e, this._internals.setValidity({
-      customError: e
+    this.error = t, this._internals.setValidity({
+      customError: t
     }), this.requestUpdate();
   }
-  setDisabled(e) {
-    this.disabled = e, this._internals.setValidity({
-      customError: e
+  setDisabled(t) {
+    this.disabled = t, this._internals.setValidity({
+      customError: t
     }), this.requestUpdate();
   }
 }
-r(p, "formAssociated", !0), r(p, "distinctTimezones", [
-  "Etc/GMT+12",
-  "Pacific/Pago_Pago",
-  "Pacific/Honolulu",
-  "America/Anchorage",
-  "America/Los_Angeles",
-  "America/Denver",
-  "America/Chicago",
-  "America/New_York",
-  "America/Halifax",
-  "America/Argentina/Buenos_Aires",
-  "America/Noronha",
-  "Atlantic/Azores",
-  "Europe/London",
-  "Europe/Paris",
-  "Europe/Bucharest",
-  "Europe/Moscow",
-  "Asia/Tehran",
-  "Asia/Dubai",
-  "Asia/Kabul",
-  "Asia/Karachi",
-  "Asia/Kolkata",
-  "Asia/Kathmandu",
-  "Asia/Dhaka",
-  "Asia/Yangon",
-  "Asia/Bangkok",
-  "Asia/Shanghai",
-  "Australia/Eucla",
-  "Asia/Tokyo",
-  "Australia/Darwin",
-  "Australia/Sydney",
-  "Australia/Lord_Howe",
-  "Pacific/Noumea",
-  "Pacific/Auckland",
-  "Pacific/Chatham",
-  "Pacific/Tongatapu",
-  "Pacific/Kiritimati"
-]), r(p, "styles", l`
+function U() {
+  typeof window < "u" && !customElements.get("cd-date") && customElements.define("cd-date", S);
+}
+d();
+class A extends r {
+  static formAssociated = !0;
+  static distinctTimezones = [
+    "Etc/GMT+12",
+    "Pacific/Pago_Pago",
+    "Pacific/Honolulu",
+    "America/Anchorage",
+    "America/Los_Angeles",
+    "America/Denver",
+    "America/Chicago",
+    "America/New_York",
+    "America/Halifax",
+    "America/Argentina/Buenos_Aires",
+    "America/Noronha",
+    "Atlantic/Azores",
+    "Europe/London",
+    "Europe/Paris",
+    "Europe/Bucharest",
+    "Europe/Moscow",
+    "Asia/Tehran",
+    "Asia/Dubai",
+    "Asia/Kabul",
+    "Asia/Karachi",
+    "Asia/Kolkata",
+    "Asia/Kathmandu",
+    "Asia/Dhaka",
+    "Asia/Yangon",
+    "Asia/Bangkok",
+    "Asia/Shanghai",
+    "Australia/Eucla",
+    "Asia/Tokyo",
+    "Australia/Darwin",
+    "Australia/Sydney",
+    "Australia/Lord_Howe",
+    "Pacific/Noumea",
+    "Pacific/Auckland",
+    "Pacific/Chatham",
+    "Pacific/Tongatapu",
+    "Pacific/Kiritimati"
+  ];
+  static styles = a`
     @font-face {
       font-family: 'Geist';
-      src: url(${n(s)}) format('woff');
+      src: url(${o(i)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -2167,61 +2096,146 @@ r(p, "formAssociated", !0), r(p, "distinctTimezones", [
       height: 36px;
       padding: 0 var(--input-horizontal-inline-padding-sm, 12px);
     }
-  `), r(p, "properties", {
-  value: {
-    type: String,
-    reflect: !0
-  },
-  shortcut: {
-    type: String,
-    reflect: !0
-  },
-  error: {
-    type: Boolean,
-    reflect: !0,
-    attribute: "error"
-  },
-  disabled: {
-    type: Boolean,
-    reflect: !0
-  },
-  form: {
-    type: String,
-    reflect: !0,
-    attribute: "form"
-  },
-  size: {
-    type: String,
-    reflect: !0,
-    attribute: "size",
-    converter: (e) => ["sm", "md", "lg"].includes(e) ? e : "md"
-  },
-  fullWidth: {
-    type: Boolean,
-    reflect: !0,
-    attribute: "full-width"
-  },
-  variant: {
-    type: String,
-    reflect: !0,
-    attribute: "variant",
-    converter: (e) => ["dashed", "dotted"].includes(e) ? e : "default"
-  },
-  timezone: {
-    type: String,
-    reflect: !0,
-    attribute: "timezone",
-    converter: (e) => distinctTimezones.includes(e) ? e : "America/New_York"
+  `;
+  static properties = {
+    value: {
+      type: String,
+      reflect: !0
+    },
+    shortcut: {
+      type: String,
+      reflect: !0
+    },
+    error: {
+      type: Boolean,
+      reflect: !0,
+      attribute: "error"
+    },
+    disabled: {
+      type: Boolean,
+      reflect: !0
+    },
+    form: {
+      type: String,
+      reflect: !0,
+      attribute: "form"
+    },
+    size: {
+      type: String,
+      reflect: !0,
+      attribute: "size",
+      converter: (t) => ["sm", "md", "lg"].includes(t) ? t : "md"
+    },
+    fullWidth: {
+      type: Boolean,
+      reflect: !0,
+      attribute: "full-width"
+    },
+    variant: {
+      type: String,
+      reflect: !0,
+      attribute: "variant",
+      converter: (t) => ["dashed", "dotted"].includes(t) ? t : "default"
+    },
+    timezone: {
+      type: String,
+      reflect: !0,
+      attribute: "timezone",
+      converter: (t) => distinctTimezones.includes(t) ? t : "America/New_York"
+    }
+  };
+  constructor() {
+    super(), this.value = "", this.shortcut = void 0, this.error = !1, this.disabled = void 0, this.form = void 0, this.size = "md", this.fullWidth = !1, this.variant = "default", this.timezone = "America/New_York", this._internals = this.attachInternals(), this._internals.setValidity({
+      customError: this.errorText && this.errorText.length > 0 || !1
+    });
+  }
+  handleChange = (t) => (this.value = t.target.value, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("change", {
+    detail: {
+      value: this.value
+    },
+    bubbles: !0,
+    composed: !0
+  })), this.value);
+  handleInput = (t) => (this.value = t.target.value, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("input", {
+    detail: {
+      value: this.value
+    },
+    bubbles: !0,
+    composed: !0
+  })), this.value);
+  handleFocus = (t) => (this.value = t.target.value, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("focus", {
+    detail: {
+      value: this.value
+    },
+    bubbles: !0,
+    composed: !0
+  })), this.value);
+  handleBlur = (t) => (this.value = t.target.value, this._internals.setFormValue(this.value), this.dispatchEvent(new CustomEvent("blur", {
+    detail: {
+      value: this.value
+    },
+    bubbles: !0,
+    composed: !0
+  })), this.value);
+  render() {
+    return e`
+    <input class='${this.error ? "input-error" : ""} ${this.disabled ? "disabled" : ""} ${this.fullWidth ? "full-width" : ""} ${this.variant} ${this.size}' type='time' id='${this.name | "time"}' name='${this.name | "time"}' .value='${this.value}' @change='${this.handleChange}' @focus='${this.handleFocus}' @blur='${this.handleBlur}' @input='${this.handleInput}' ?disabled='${this.disabled}' />
+    ${this.shortcut ? e`<cd-button variant='primary' ?disabled='${this.disabled}'>${this.shortcut}</cd-button>` : ""}
+    `;
+  }
+  firstUpdated() {
+    if (!this.shadowRoot) {
+      console.warn("Shadow DOM not available, TimeComponent may not render correctly.");
+      return;
+    }
+    this.shadowRoot.querySelector("cd-button") && this.shadowRoot.querySelector("cd-button").addEventListener("button-click", () => {
+      this.setValue(this.timeNow()), this.dispatchEvent(new CustomEvent("change", {
+        detail: {
+          value: this.value
+        },
+        bubbles: !0,
+        composed: !0
+      }));
+    });
+  }
+  timeNow() {
+    console.log(this.timezone);
+    let t = (/* @__PURE__ */ new Date()).toLocaleString("en-US", {
+      timeZone: this.timezone || "America/New_York"
+    });
+    if (console.log(t), console.log(t.split(" ")[2]), t.split(" ")[2] === "PM") {
+      let l = t.split(" ");
+      console.log(l), t = Number(l[1].split(":")[0]) + 12 + ":" + l[1].split(":")[1] + ":" + l[1].split(":")[2];
+    } else
+      t = t.split(" ")[1];
+    return t;
+  }
+  setValue(t) {
+    this.value = t, this._internals.setFormValue(t), this.requestUpdate();
+  }
+  setError(t) {
+    if (typeof t != "error") {
+      console.warn("Error text must be a string");
+      return;
+    }
+    this.error = t, this._internals.setValidity({
+      customError: t
+    }), this.requestUpdate();
   }
-});
-function H() {
-  typeof window < "u" && !customElements.get("cd-time") && customElements.define("cd-time", p);
+  setDisabled(t) {
+    this.disabled = t, this._internals.setValidity({
+      customError: t
+    }), this.requestUpdate();
+  }
+}
+function K() {
+  typeof window < "u" && !customElements.get("cd-time") && customElements.define("cd-time", A);
 }
 export {
-  b as Button,
-  u as DateComponent,
-  f as Header,
-  v as Input,
+  v as Button,
+  S as DateComponent,
+  b as Header,
+  f as Input,
   g as NavBar,
   m as NavItem,
   w as NavProfile,
@@ -2229,22 +2243,22 @@ export {
   E as Tab,
   z as TabContainer,
   y as Table,
-  p as TimeComponent,
+  A as TimeComponent,
   x as ToolTip,
   k as Value,
-  A as registerButton,
-  O as registerDate,
-  D as registerHeader,
-  T as registerInput,
-  P as registerNavBar,
-  G as registerNavItem,
-  U as registerNavProfile,
-  M as registerSearch,
-  W as registerTab,
-  Y as registerTabContainer,
-  F as registerTable,
-  H as registerTime,
-  N as registerToolTip,
-  K as registerValue
+  d as registerButton,
+  U as registerDate,
+  T as registerHeader,
+  q as registerInput,
+  V as registerNavBar,
+  I as registerNavItem,
+  L as registerNavProfile,
+  N as registerSearch,
+  G as registerTab,
+  F as registerTabContainer,
+  D as registerTable,
+  K as registerTime,
+  R as registerToolTip,
+  P as registerValue
 };
 //# sourceMappingURL=index.es.js.map