@cal.macconnachie/web-components 1.0.4 → 1.1.0

package/dist/index.d.ts

@@ -354,18 +354,23 @@ export declare class BaseTabs extends BaseElement {
     variant: TabVariant;
     private tabs;
     private isExpanded;
+    private isMobile;
     private tabsNav?;
     private boundHashChangeHandler;
+    private boundResizeHandler;
+    private hasInitialized;
     static styles: CSSResult;
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): void;
     private queryAndRegisterTabs;
+    willUpdate(changedProperties: Map<string, unknown>): void;
     updated(changedProperties: Map<string, unknown>): void;
     private handleTabRegister;
     private handleTabBadgeUpdate;
     private updateChildTabs;
     private handleHashChange;
+    private handleResize;
     private selectTab;
     private handleTabClick;
     private handleKeyDown;

package/dist/index.js

@@ -247,7 +247,7 @@ let Ae = class extends HTMLElement {
   }
 };
 Ae.elementStyles = [], Ae.shadowRootOptions = { mode: "open" }, Ae[He("elementProperties")] = /* @__PURE__ */ new Map(), Ae[He("finalized")] = /* @__PURE__ */ new Map(), ho?.({ ReactiveElement: Ae }), (st.reactiveElementVersions ??= []).push("2.1.1");
-const _t = globalThis, ot = _t.trustedTypes, Gt = ot ? ot.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, kr = "$lit$", ce = `lit$${Math.random().toFixed(9).slice(2)}$`, Sr = "?" + ce, po = `<${Sr}>`, $e = document, Le = () => $e.createComment(""), qe = (e) => e === null || typeof e != "object" && typeof e != "function", Ot = Array.isArray, uo = (e) => Ot(e) || typeof e?.[Symbol.iterator] == "function", bt = `[ 	
+const _t = globalThis, ot = _t.trustedTypes, Gt = ot ? ot.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, kr = "$lit$", de = `lit$${Math.random().toFixed(9).slice(2)}$`, Sr = "?" + de, po = `<${Sr}>`, $e = document, Le = () => $e.createComment(""), qe = (e) => e === null || typeof e != "object" && typeof e != "function", Ot = Array.isArray, uo = (e) => Ot(e) || typeof e?.[Symbol.iterator] == "function", bt = `[ 	
 \f\r]`, Ne = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Qt = /-->/g, Xt = />/g, me = RegExp(`>|${bt}(?:([^\\s"'>=/]+)(${bt}*=${bt}*(?:[^ 	
 \f\r"'\`<>=]|("|')|))|$)`, "g"), Zt = /'/g, er = /"/g, Ar = /^(?:script|style|textarea|title)$/i, fo = (e) => (t, ...r) => ({ _$litType$: e, strings: t, values: r }), f = fo(1), ae = Symbol.for("lit-noChange"), S = Symbol.for("lit-nothing"), tr = /* @__PURE__ */ new WeakMap(), ye = $e.createTreeWalker($e, 129);
 function Er(e, t) {
@@ -262,7 +262,7 @@ const bo = (e, t) => {
     let d, c, p = -1, g = 0;
     for (; g < l.length && (a.lastIndex = g, c = a.exec(l), c !== null); ) g = a.lastIndex, a === Ne ? c[1] === "!--" ? a = Qt : c[1] !== void 0 ? a = Xt : c[2] !== void 0 ? (Ar.test(c[2]) && (i = RegExp("</" + c[2], "g")), a = me) : c[3] !== void 0 && (a = me) : a === me ? c[0] === ">" ? (a = i ?? Ne, p = -1) : c[1] === void 0 ? p = -2 : (p = a.lastIndex - c[2].length, d = c[1], a = c[3] === void 0 ? me : c[3] === '"' ? er : Zt) : a === er || a === Zt ? a = me : a === Qt || a === Xt ? a = Ne : (a = me, i = void 0);
     const y = a === me && e[n + 1].startsWith("/>") ? " " : "";
-    s += a === Ne ? l + po : p >= 0 ? (o.push(d), l.slice(0, p) + kr + l.slice(p) + ce + y) : l + ce + (p === -2 ? n : y);
+    s += a === Ne ? l + po : p >= 0 ? (o.push(d), l.slice(0, p) + kr + l.slice(p) + de + y) : l + de + (p === -2 ? n : y);
   }
   return [Er(e, s + (e[r] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), o];
 };
@@ -279,11 +279,11 @@ class Fe {
     for (; (i = ye.nextNode()) !== null && l.length < n; ) {
       if (i.nodeType === 1) {
         if (i.hasAttributes()) for (const p of i.getAttributeNames()) if (p.endsWith(kr)) {
-          const g = c[a++], y = i.getAttribute(p).split(ce), u = /([.?@])?(.*)/.exec(g);
+          const g = c[a++], y = i.getAttribute(p).split(de), u = /([.?@])?(.*)/.exec(g);
           l.push({ type: 1, index: s, name: u[2], strings: y, ctor: u[1] === "." ? mo : u[1] === "?" ? vo : u[1] === "@" ? yo : at }), i.removeAttribute(p);
-        } else p.startsWith(ce) && (l.push({ type: 6, index: s }), i.removeAttribute(p));
+        } else p.startsWith(de) && (l.push({ type: 6, index: s }), i.removeAttribute(p));
         if (Ar.test(i.tagName)) {
-          const p = i.textContent.split(ce), g = p.length - 1;
+          const p = i.textContent.split(de), g = p.length - 1;
           if (g > 0) {
             i.textContent = ot ? ot.emptyScript : "";
             for (let y = 0; y < g; y++) i.append(p[y], Le()), ye.nextNode(), l.push({ type: 2, index: ++s });
@@ -293,7 +293,7 @@ class Fe {
       } else if (i.nodeType === 8) if (i.data === Sr) l.push({ type: 2, index: s });
       else {
         let p = -1;
-        for (; (p = i.data.indexOf(ce, p + 1)) !== -1; ) l.push({ type: 7, index: s }), p += ce.length - 1;
+        for (; (p = i.data.indexOf(de, p + 1)) !== -1; ) l.push({ type: 7, index: s }), p += de.length - 1;
       }
       s++;
     }
@@ -2196,6 +2196,7 @@ let A = class extends B {
           full-width
           ?loading=${this.isLoading}
           ?disabled=${this.isLoading}
+          @click=${(e) => this.handleSubmit(e)}
         >
           ${this.isLoading ? "Sending..." : "Send Reset Code"}
         </base-button>
@@ -2208,6 +2209,7 @@ let A = class extends B {
             full-width
             ?loading=${this.isLoading}
             ?disabled=${this.isLoading}
+            @click=${(t) => this.handleSubmit(t)}
           >
             ${this.isLoading ? "Resetting..." : "Reset Password"}
           </base-button>
@@ -2221,6 +2223,7 @@ let A = class extends B {
           full-width
           ?loading=${this.isLoading}
           ?disabled=${!e || this.isLoading}
+          @click=${(t) => this.handleSubmit(t)}
         >
           ${this.isLoading ? "Completing..." : "Complete Registration"}
         </base-button>
@@ -2233,6 +2236,7 @@ let A = class extends B {
         full-width
         ?loading=${this.isLoading}
         ?disabled=${this.isLoading}
+        @click=${(e) => this.handleSubmit(e)}
       >
         ${this.isLoading ? "Loading..." : this.mode === "signup" ? "Continue" : "Sign In"}
       </base-button>
@@ -2453,12 +2457,12 @@ const $ = Rt(class extends zt {
     return ae;
   }
 });
-var Bo = Object.defineProperty, Lo = Object.getOwnPropertyDescriptor, ue = (e, t, r, o) => {
+var Bo = Object.defineProperty, Lo = Object.getOwnPropertyDescriptor, fe = (e, t, r, o) => {
   for (var i = o > 1 ? void 0 : o ? Lo(t, r) : t, s = e.length - 1, a; s >= 0; s--)
     (a = e[s]) && (i = (o ? a(t, r, i) : a(i)) || i);
   return o && i && Bo(t, r, i), i;
 };
-let ie = class extends B {
+let se = class extends B {
   constructor() {
     super(...arguments), this.size = "md", this.variant = "primary", this.hover = void 0, this.disabled = !1, this.fullWidth = !1, this.loading = !1, this.type = "button";
   }
@@ -2508,7 +2512,7 @@ let ie = class extends B {
     `;
   }
 };
-ie.styles = J`
+se.styles = J`
     :host {
       display: inline-block;
     }
@@ -2928,36 +2932,36 @@ ie.styles = J`
       }
     }
   `;
-ue([
+fe([
   b({ type: String, attribute: "size" })
-], ie.prototype, "size", 2);
-ue([
+], se.prototype, "size", 2);
+fe([
   b({ type: String, attribute: "variant" })
-], ie.prototype, "variant", 2);
-ue([
+], se.prototype, "variant", 2);
+fe([
   b({ type: String, attribute: "hover" })
-], ie.prototype, "hover", 2);
-ue([
+], se.prototype, "hover", 2);
+fe([
   b({ type: Boolean, reflect: !0 })
-], ie.prototype, "disabled", 2);
-ue([
+], se.prototype, "disabled", 2);
+fe([
   b({ type: Boolean, reflect: !0, attribute: "full-width" })
-], ie.prototype, "fullWidth", 2);
-ue([
+], se.prototype, "fullWidth", 2);
+fe([
   b({ type: Boolean, reflect: !0, attribute: "loading" })
-], ie.prototype, "loading", 2);
-ue([
+], se.prototype, "loading", 2);
+fe([
   b({ type: String, attribute: "type" })
-], ie.prototype, "type", 2);
-ie = ue([
+], se.prototype, "type", 2);
+se = fe([
   W("base-button")
-], ie);
+], se);
 var qo = Object.defineProperty, Fo = Object.getOwnPropertyDescriptor, Oe = (e, t, r, o) => {
   for (var i = o > 1 ? void 0 : o ? Fo(t, r) : t, s = e.length - 1, a; s >= 0; s--)
     (a = e[s]) && (i = (o ? a(t, r, i) : a(i)) || i);
   return o && i && qo(t, r, i), i;
 };
-let de = class extends B {
+let he = class extends B {
   constructor() {
     super(...arguments), this.variant = "default", this.padding = "none", this.hoverable = !1, this.expandable = !1, this.isExpanded = !1;
   }
@@ -3015,9 +3019,11 @@ let de = class extends B {
       ` : t;
   }
 };
-de.styles = J`
+he.styles = J`
     :host {
       display: block;
+      min-width: 0;
+      margin: var(--space-4);
     }
 
     .base-card {
@@ -3028,7 +3034,9 @@ de.styles = J`
       display: flex;
       flex-direction: column;
       box-sizing: border-box;
+      width: 100%;
       max-width: 100%;
+      min-width: 0;
     }
 
     /* Variants */
@@ -3200,22 +3208,22 @@ de.styles = J`
   `;
 Oe([
   b({ type: String, attribute: "variant" })
-], de.prototype, "variant", 2);
+], he.prototype, "variant", 2);
 Oe([
   b({ type: String, attribute: "padding" })
-], de.prototype, "padding", 2);
+], he.prototype, "padding", 2);
 Oe([
   b({ type: Boolean, reflect: !0, attribute: "hoverable" })
-], de.prototype, "hoverable", 2);
+], he.prototype, "hoverable", 2);
 Oe([
   b({ type: Boolean, reflect: !0, attribute: "expandable" })
-], de.prototype, "expandable", 2);
+], he.prototype, "expandable", 2);
 Oe([
   w()
-], de.prototype, "isExpanded", 2);
-de = Oe([
+], he.prototype, "isExpanded", 2);
+he = Oe([
   W("base-card")
-], de);
+], he);
 const ee = (e) => e ?? S;
 var jo = Object.defineProperty, Yo = Object.getOwnPropertyDescriptor, M = (e, t, r, o) => {
   for (var i = o > 1 ? void 0 : o ? Yo(t, r) : t, s = e.length - 1, a; s >= 0; s--)
@@ -5308,6 +5316,7 @@ let K = class extends B {
     super(...arguments), this.value = "", this.type = "text", this.required = !1, this.disabled = !1, this.size = "md", this.inputId = `input-${Math.random().toString(36).substr(2, 9)}`;
   }
   handleInput(e) {
+    e.stopPropagation();
     const t = e.target;
     this.value = t.value, this.dispatchEvent(
       new CustomEvent("input", {
@@ -6015,7 +6024,7 @@ var ei = Object.defineProperty, ti = Object.getOwnPropertyDescriptor, De = (e, t
     (a = e[s]) && (i = (o ? a(t, r, i) : a(i)) || i);
   return o && i && ei(t, r, i), i;
 };
-let he = class extends B {
+let pe = class extends B {
   constructor() {
     super(...arguments), this.id = "", this.label = "", this.active = !1;
   }
@@ -6058,10 +6067,9 @@ let he = class extends B {
     `;
   }
 };
-he.styles = J`
+pe.styles = J`
     :host {
       display: none;
-      width: 100%;
     }
 
     :host([active]) {
@@ -6074,22 +6082,22 @@ he.styles = J`
   `;
 De([
   b({ type: String, reflect: !0 })
-], he.prototype, "id", 2);
+], pe.prototype, "id", 2);
 De([
   b({ type: String })
-], he.prototype, "label", 2);
+], pe.prototype, "label", 2);
 De([
   b({ type: Number })
-], he.prototype, "badge", 2);
+], pe.prototype, "badge", 2);
 De([
   b({ type: String })
-], he.prototype, "icon", 2);
+], pe.prototype, "icon", 2);
 De([
   b({ type: Boolean, reflect: !0 })
-], he.prototype, "active", 2);
-he = De([
+], pe.prototype, "active", 2);
+pe = De([
   W("base-tab")
-], he);
+], pe);
 class xt extends zt {
   constructor(t) {
     if (super(t), this.it = S, t.type !== Pt.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
@@ -6106,43 +6114,45 @@ class xt extends zt {
 }
 xt.directiveName = "unsafeHTML", xt.resultType = 1;
 const ri = Rt(xt);
-var oi = Object.defineProperty, ii = Object.getOwnPropertyDescriptor, fe = (e, t, r, o) => {
+var oi = Object.defineProperty, ii = Object.getOwnPropertyDescriptor, ne = (e, t, r, o) => {
   for (var i = o > 1 ? void 0 : o ? ii(t, r) : t, s = e.length - 1, a; s >= 0; s--)
     (a = e[s]) && (i = (o ? a(t, r, i) : a(i)) || i);
   return o && i && oi(t, r, i), i;
 };
-let se = class extends B {
+let te = class extends B {
   constructor() {
-    super(...arguments), this.activeTab = "", this.ariaLabel = "Dashboard navigation", this.syncWithHash = !0, this.variant = "sidebar", this.tabs = [], this.isExpanded = !1, this.boundHashChangeHandler = this.handleHashChange.bind(this);
+    super(...arguments), this.activeTab = "", this.ariaLabel = "Dashboard navigation", this.syncWithHash = !0, this.variant = "sidebar", this.tabs = [], this.isExpanded = !1, this.isMobile = !1, this.boundHashChangeHandler = this.handleHashChange.bind(this), this.boundResizeHandler = this.handleResize.bind(this), this.hasInitialized = !1;
   }
   connectedCallback() {
-    super.connectedCallback(), window.addEventListener("hashchange", this.boundHashChangeHandler), this.addEventListener("tab-register", this.handleTabRegister), this.addEventListener("tab-badge-update", this.handleTabBadgeUpdate);
+    super.connectedCallback(), window.addEventListener("hashchange", this.boundHashChangeHandler), window.addEventListener("resize", this.boundResizeHandler), this.handleResize(), this.addEventListener("tab-register", this.handleTabRegister), this.addEventListener("tab-badge-update", this.handleTabBadgeUpdate);
   }
   disconnectedCallback() {
-    window.removeEventListener("hashchange", this.boundHashChangeHandler), this.removeEventListener("tab-register", this.handleTabRegister), this.removeEventListener("tab-badge-update", this.handleTabBadgeUpdate), super.disconnectedCallback();
+    window.removeEventListener("hashchange", this.boundHashChangeHandler), window.removeEventListener("resize", this.boundResizeHandler), this.removeEventListener("tab-register", this.handleTabRegister), this.removeEventListener("tab-badge-update", this.handleTabBadgeUpdate), super.disconnectedCallback();
   }
   firstUpdated() {
-    this.queryAndRegisterTabs(), setTimeout(() => {
-      if (this.syncWithHash && window.location.hash) {
-        const e = window.location.hash.replace("#", "");
-        if (this.tabs.find((r) => r.id === e)) {
-          this.selectTab(e);
-          return;
-        }
-      }
-      !this.activeTab && this.tabs.length > 0 && this.selectTab(this.tabs[0].id);
-    }, 0);
+    this.queryAndRegisterTabs();
   }
   queryAndRegisterTabs() {
-    this.querySelectorAll("base-tab").forEach((t) => {
-      const r = {
-        id: t.id,
-        label: t.getAttribute("label") || "",
-        badge: t.hasAttribute("badge") ? Number(t.getAttribute("badge")) : void 0,
-        icon: t.getAttribute("icon") || void 0
+    const e = this.querySelectorAll("base-tab"), t = [];
+    e.forEach((r) => {
+      const o = {
+        id: r.id,
+        label: r.getAttribute("label") || "",
+        badge: r.hasAttribute("badge") ? Number(r.getAttribute("badge")) : void 0,
+        icon: r.getAttribute("icon") || void 0
       };
-      r.id && !this.tabs.find((o) => o.id === r.id) && (this.tabs = [...this.tabs, r]);
-    });
+      o.id && !this.tabs.find((i) => i.id === o.id) && t.push(o);
+    }), t.length > 0 && (this.tabs = [...this.tabs, ...t]);
+  }
+  willUpdate(e) {
+    if (super.willUpdate(e), e.has("tabs") && this.tabs.length > 0 && !this.activeTab && !this.hasInitialized) {
+      if (this.hasInitialized = !0, this.syncWithHash && window.location.hash) {
+        const t = window.location.hash.replace("#", "");
+        this.tabs.find((o) => o.id === t) ? this.activeTab = t : this.activeTab = this.tabs[0].id;
+      } else
+        this.activeTab = this.tabs[0].id;
+      this.syncWithHash && this.activeTab && history.replaceState(null, "", `#${this.activeTab}`);
+    }
   }
   updated(e) {
     super.updated(e), e.has("activeTab") && this.updateChildTabs();
@@ -6150,9 +6160,7 @@ let se = class extends B {
   handleTabRegister(e) {
     e.stopPropagation();
     const t = e.detail;
-    this.tabs.find((r) => r.id === t.id) || (this.tabs = [...this.tabs, t], this.tabs.length === 1 && !this.activeTab && setTimeout(() => {
-      this.selectTab(t.id);
-    }, 0));
+    this.tabs.find((r) => r.id === t.id) || (this.tabs = [...this.tabs, t]);
   }
   handleTabBadgeUpdate(e) {
     e.stopPropagation();
@@ -6171,6 +6179,9 @@ let se = class extends B {
     const e = window.location.hash.replace("#", "");
     this.tabs.find((r) => r.id === e) && e !== this.activeTab && this.selectTab(e);
   }
+  handleResize() {
+    this.isMobile = window.innerWidth <= 768;
+  }
   selectTab(e) {
     this.activeTab = e, this.syncWithHash && history.replaceState(null, "", `#${e}`), this.dispatchEvent(
       new CustomEvent("tab-change", {
@@ -6226,8 +6237,8 @@ let se = class extends B {
         @keydown=${(i) => this.handleKeyDown(i, t)}
       >
         ${e.icon && this.variant === "sidebar" ? f`<span class="tab-icon">${ri(e.icon)}</span>` : S}
-        ${this.isExpanded || this.variant !== "sidebar" ? f`<span class="tab-label">${e.label}</span>` : S}
-        ${e.badge !== void 0 && e.badge > 0 && (this.isExpanded || this.variant !== "sidebar") ? f`<span class="tab-badge">${e.badge}</span>` : S}
+        ${this.isExpanded || this.variant !== "sidebar" || this.isMobile ? f`<span class="tab-label">${e.label}</span>` : S}
+        ${e.badge !== void 0 && e.badge > 0 && (this.isExpanded || this.variant !== "sidebar" || this.isMobile) ? f`<span class="tab-badge">${e.badge}</span>` : S}
       </button>
     `;
   }
@@ -6285,14 +6296,16 @@ let se = class extends B {
     `;
   }
 };
-se.styles = J`
+te.styles = J`
     :host {
       display: block;
-      width: 100%;
+      min-width: 0;
     }
 
     .base-tabs {
       width: 100%;
+      min-width: 0;
+      overflow-x: hidden;
     }
 
     .base-tabs--vertical {
@@ -6300,6 +6313,8 @@ se.styles = J`
       gap: var(--space-6, 1.5rem);
       align-items: flex-start;
       padding: var(--space-4, 1rem);
+      min-width: 0;
+      overflow-x: hidden;
     }
 
     /* Sidebar Layout */
@@ -6558,27 +6573,38 @@ se.styles = J`
 
     /* Mobile responsive */
     @media (max-width: 768px) {
+      :host {
+        overflow-x: hidden;
+      }
+
+      .base-tabs {
+        overflow-x: hidden;
+      }
+
       .base-tabs--vertical {
         flex-direction: column;
         padding: 0;
+        overflow-x: hidden;
       }
 
       .tabs-sidebar {
-        position: sticky;
-        top: 0;
+        position: relative;
         width: 100%;
         max-height: none;
-        border-radius: 0;
-        border-left: none;
-        border-right: none;
-        padding: var(--space-3, 0.75rem);
+        border-radius: var(--radius-lg);
+        border-left: 1px solid var(--color-border, #e2e8f0);
+        border-right: 1px solid var(--color-border, #e2e8f0);
+        padding: var(--space-3);
+        padding-left: 0;
+        padding-right: 0;
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         z-index: 10;
         display: grid;
-        grid-template-columns: 1fr auto;
+        grid-template-columns: minmax(0, 1fr) auto;
         grid-template-rows: auto auto;
         gap: var(--space-3, 0.75rem);
         align-items: center;
+        box-sizing: border-box;
       }
 
       .tabs-sidebar--expanded {
@@ -6625,6 +6651,7 @@ se.styles = J`
         scrollbar-width: none;
         -ms-overflow-style: none;
         padding: 0;
+        min-width: 0;
       }
 
       .tabs-nav::-webkit-scrollbar {
@@ -6638,8 +6665,13 @@ se.styles = J`
         gap: var(--space-1, 0.25rem);
         padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
         min-width: 70px;
+        width: auto;
         min-height: auto;
         position: relative;
+        flex-shrink: 0;
+        margin-left: var(--space-2);
+        margin-right: var(--space-2);
+        margin-bottom: var(--space-2);
       }
 
       .tabs-sidebar .tab-button .tab-label {
@@ -6652,6 +6684,7 @@ se.styles = J`
       .tabs-sidebar .tab-icon {
         width: 20px;
         height: 20px;
+        margin-left: 0;
       }
 
       .tabs-sidebar .tab-badge {
@@ -6666,6 +6699,7 @@ se.styles = J`
       .base-tabs--vertical .tabs-content {
         width: 100%;
         padding: var(--space-4, 1rem) var(--space-3, 0.75rem);
+        box-sizing: border-box;
       }
     }
 
@@ -6688,30 +6722,33 @@ se.styles = J`
       }
     }
   `;
-fe([
+ne([
   b({ type: String, attribute: "active-tab" })
-], se.prototype, "activeTab", 2);
-fe([
+], te.prototype, "activeTab", 2);
+ne([
   b({ type: String, attribute: "aria-label" })
-], se.prototype, "ariaLabel", 2);
-fe([
+], te.prototype, "ariaLabel", 2);
+ne([
   b({ type: Boolean, attribute: "sync-with-hash" })
-], se.prototype, "syncWithHash", 2);
-fe([
+], te.prototype, "syncWithHash", 2);
+ne([
   b({ type: String })
-], se.prototype, "variant", 2);
-fe([
+], te.prototype, "variant", 2);
+ne([
   w()
-], se.prototype, "tabs", 2);
-fe([
+], te.prototype, "tabs", 2);
+ne([
   w()
-], se.prototype, "isExpanded", 2);
-fe([
+], te.prototype, "isExpanded", 2);
+ne([
+  w()
+], te.prototype, "isMobile", 2);
+ne([
   q(".tabs-nav")
-], se.prototype, "tabsNav", 2);
-se = fe([
+], te.prototype, "tabsNav", 2);
+te = ne([
   W("base-tabs")
-], se);
+], te);
 var si = Object.defineProperty, ai = Object.getOwnPropertyDescriptor, G = (e, t, r, o) => {
   for (var i = o > 1 ? void 0 : o ? ai(t, r) : t, s = e.length - 1, a; s >= 0; s--)
     (a = e[s]) && (i = (o ? a(t, r, i) : a(i)) || i);
@@ -7532,7 +7569,7 @@ var ci = Object.defineProperty, di = Object.getOwnPropertyDescriptor, Pe = (e, t
     (a = e[s]) && (i = (o ? a(t, r, i) : a(i)) || i);
   return o && i && ci(t, r, i), i;
 };
-let pe = class extends B {
+let ue = class extends B {
   constructor() {
     super(...arguments), this.value = 0, this.min = 0, this.max = 99, this.size = "md", this.allowInput = !0;
   }
@@ -7610,7 +7647,7 @@ let pe = class extends B {
     `;
   }
 };
-pe.styles = J`
+ue.styles = J`
     :host {
       display: inline-block;
     }
@@ -7758,22 +7795,22 @@ pe.styles = J`
   `;
 Pe([
   b({ type: Number })
-], pe.prototype, "value", 2);
+], ue.prototype, "value", 2);
 Pe([
   b({ type: Number })
-], pe.prototype, "min", 2);
+], ue.prototype, "min", 2);
 Pe([
   b({ type: Number })
-], pe.prototype, "max", 2);
+], ue.prototype, "max", 2);
 Pe([
   b({ type: String })
-], pe.prototype, "size", 2);
+], ue.prototype, "size", 2);
 Pe([
   b({ type: Boolean, attribute: "allow-input" })
-], pe.prototype, "allowInput", 2);
-pe = Pe([
+], ue.prototype, "allowInput", 2);
+ue = Pe([
   W("quantity-select")
-], pe);
+], ue);
 var hi = Object.defineProperty, pi = Object.getOwnPropertyDescriptor, nt = (e, t, r, o) => {
   for (var i = o > 1 ? void 0 : o ? pi(t, r) : t, s = e.length - 1, a; s >= 0; s--)
     (a = e[s]) && (i = (o ? a(t, r, i) : a(i)) || i);
@@ -8013,11 +8050,11 @@ function Dr(e, t) {
 const { toString: ui } = Object.prototype, { getPrototypeOf: Mt } = Object, { iterator: lt, toStringTag: Pr } = Symbol, ct = /* @__PURE__ */ ((e) => (t) => {
   const r = ui.call(t);
   return e[r] || (e[r] = r.slice(8, -1).toLowerCase());
-})(/* @__PURE__ */ Object.create(null)), te = (e) => (e = e.toLowerCase(), (t) => ct(t) === e), dt = (e) => (t) => typeof t === e, { isArray: Re } = Array, Ce = dt("undefined");
+})(/* @__PURE__ */ Object.create(null)), re = (e) => (e = e.toLowerCase(), (t) => ct(t) === e), dt = (e) => (t) => typeof t === e, { isArray: Re } = Array, Ce = dt("undefined");
 function je(e) {
   return e !== null && !Ce(e) && e.constructor !== null && !Ce(e.constructor) && j(e.constructor.isBuffer) && e.constructor.isBuffer(e);
 }
-const Rr = te("ArrayBuffer");
+const Rr = re("ArrayBuffer");
 function fi(e) {
   let t;
   return typeof ArrayBuffer < "u" && ArrayBuffer.isView ? t = ArrayBuffer.isView(e) : t = e && e.buffer && Rr(e.buffer), t;
@@ -8035,11 +8072,11 @@ const bi = dt("string"), j = dt("function"), zr = dt("number"), Ye = (e) => e !=
   } catch {
     return !1;
   }
-}, vi = te("Date"), yi = te("File"), wi = te("Blob"), xi = te("FileList"), $i = (e) => Ye(e) && j(e.pipe), ki = (e) => {
+}, vi = re("Date"), yi = re("File"), wi = re("Blob"), xi = re("FileList"), $i = (e) => Ye(e) && j(e.pipe), ki = (e) => {
   let t;
   return e && (typeof FormData == "function" && e instanceof FormData || j(e.append) && ((t = ct(e)) === "formdata" || // detect form-data instance
   t === "object" && j(e.toString) && e.toString() === "[object FormData]"));
-}, Si = te("URLSearchParams"), [Ai, Ei, Ti, Ci] = ["ReadableStream", "Request", "Response", "Headers"].map(te), _i = (e) => e.trim ? e.trim() : e.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, "");
+}, Si = re("URLSearchParams"), [Ai, Ei, Ti, Ci] = ["ReadableStream", "Request", "Response", "Headers"].map(re), _i = (e) => e.trim ? e.trim() : e.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, "");
 function Ve(e, t, { allOwnKeys: r = !1 } = {}) {
   if (e === null || typeof e > "u")
     return;
@@ -8119,12 +8156,12 @@ const Oi = (e, t, r, { allOwnKeys: o } = {}) => (Ve(t, (i, s) => {
   for (; (r = e.exec(t)) !== null; )
     o.push(r);
   return o;
-}, Hi = te("HTMLFormElement"), Bi = (e) => e.toLowerCase().replace(
+}, Hi = re("HTMLFormElement"), Bi = (e) => e.toLowerCase().replace(
   /[-_\s]([a-z\d])(\w*)/g,
   function(r, o, i) {
     return o.toUpperCase() + i;
   }
-), sr = (({ hasOwnProperty: e }) => (t, r) => e.call(t, r))(Object.prototype), Li = te("RegExp"), Ir = (e, t) => {
+), sr = (({ hasOwnProperty: e }) => (t, r) => e.call(t, r))(Object.prototype), Li = re("RegExp"), Ir = (e, t) => {
   const r = Object.getOwnPropertyDescriptors(e), o = {};
   Ve(r, (i, s) => {
     let a;
@@ -8176,7 +8213,7 @@ const Ki = (e) => {
     return o;
   };
   return r(e, 0);
-}, Wi = te("AsyncFunction"), Ji = (e) => e && (Ye(e) || j(e)) && j(e.then) && j(e.catch), Ur = ((e, t) => e ? setImmediate : t ? ((r, o) => (we.addEventListener("message", ({ source: i, data: s }) => {
+}, Wi = re("AsyncFunction"), Ji = (e) => e && (Ye(e) || j(e)) && j(e.then) && j(e.catch), Ur = ((e, t) => e ? setImmediate : t ? ((r, o) => (we.addEventListener("message", ({ source: i, data: s }) => {
   i === we && s === r && o.length && o.shift()();
 }, !1), (i) => {
   o.push(i), we.postMessage(r, "*");
@@ -8217,7 +8254,7 @@ const Ki = (e) => {
   inherits: Pi,
   toFlatObject: Ri,
   kindOf: ct,
-  kindOfTest: te,
+  kindOfTest: re,
   endsWith: zi,
   toArray: Mi,
   forEachEntry: Ii,
@@ -9247,67 +9284,67 @@ const Jr = (e) => {
     let qt;
     try {
       if (be && d && m !== "get" && m !== "head" && (qt = await y(ut, x)) !== 0) {
-        let le = new r(v, {
+        let ce = new r(v, {
           method: "POST",
           body: x,
           duplex: "half"
         }), Se;
-        if (h.isFormData(x) && (Se = le.headers.get("content-type")) && ut.setContentType(Se), le.body) {
+        if (h.isFormData(x) && (Se = ce.headers.get("content-type")) && ut.setContentType(Se), ce.body) {
           const [ft, Ge] = dr(
             qt,
             it(hr(be))
           );
-          x = ur(le.body, fr, ft, Ge);
+          x = ur(ce.body, fr, ft, Ge);
         }
       }
       h.isString(We) || (We = We ? "include" : "omit");
-      const re = s && "credentials" in r.prototype, Ft = {
+      const oe = s && "credentials" in r.prototype, Ft = {
         ...Bt,
         signal: Je,
         method: m.toUpperCase(),
         headers: ut.normalize().toJSON(),
         body: x,
         duplex: "half",
-        credentials: re ? We : void 0
+        credentials: oe ? We : void 0
       };
       Me = s && new r(v, Ft);
-      let ne = await (s ? Lt(Me, Bt) : Lt(v, Ft));
+      let le = await (s ? Lt(Me, Bt) : Lt(v, Ft));
       const jt = c && (Q === "stream" || Q === "response");
       if (c && (F || jt && ge)) {
-        const le = {};
+        const ce = {};
         ["status", "statusText", "headers"].forEach((Yt) => {
-          le[Yt] = ne[Yt];
+          ce[Yt] = le[Yt];
         });
-        const Se = h.toFiniteNumber(ne.headers.get("content-length")), [ft, Ge] = F && dr(
+        const Se = h.toFiniteNumber(le.headers.get("content-length")), [ft, Ge] = F && dr(
           Se,
           it(hr(F), !0)
         ) || [];
-        ne = new o(
-          ur(ne.body, fr, ft, () => {
+        le = new o(
+          ur(le.body, fr, ft, () => {
             Ge && Ge(), ge && ge();
           }),
-          le
+          ce
         );
       }
       Q = Q || "text";
-      let eo = await p[h.findKey(p, Q) || "text"](ne, u);
-      return !jt && ge && ge(), await new Promise((le, Se) => {
-        Kr(le, Se, {
+      let eo = await p[h.findKey(p, Q) || "text"](le, u);
+      return !jt && ge && ge(), await new Promise((ce, Se) => {
+        Kr(ce, Se, {
           data: eo,
-          headers: Y.from(ne.headers),
-          status: ne.status,
-          statusText: ne.statusText,
+          headers: Y.from(le.headers),
+          status: le.status,
+          statusText: le.statusText,
           config: u,
           request: Me
         });
       });
-    } catch (re) {
-      throw ge && ge(), re && re.name === "TypeError" && /Load failed|fetch/i.test(re.message) ? Object.assign(
+    } catch (oe) {
+      throw ge && ge(), oe && oe.name === "TypeError" && /Load failed|fetch/i.test(oe.message) ? Object.assign(
         new k("Network Error", k.ERR_NETWORK, u, Me),
         {
-          cause: re.cause || re
+          cause: oe.cause || oe
         }
-      ) : k.from(re, re && re.code, u, Me);
+      ) : k.from(oe, oe && oe.code, u, Me);
     }
   };
 }, Ms = /* @__PURE__ */ new Map(), Gr = (e) => {
@@ -9445,7 +9482,7 @@ function Us(e, t, r) {
 const tt = {
   assertOptions: Us,
   validators: pt
-}, oe = tt.validators;
+}, ie = tt.validators;
 class xe {
   constructor(t) {
     this.defaults = t || {}, this.interceptors = {
@@ -9482,17 +9519,17 @@ class xe {
     typeof t == "string" ? (r = r || {}, r.url = t) : r = t || {}, r = ke(this.defaults, r);
     const { transitional: o, paramsSerializer: i, headers: s } = r;
     o !== void 0 && tt.assertOptions(o, {
-      silentJSONParsing: oe.transitional(oe.boolean),
-      forcedJSONParsing: oe.transitional(oe.boolean),
-      clarifyTimeoutError: oe.transitional(oe.boolean)
+      silentJSONParsing: ie.transitional(ie.boolean),
+      forcedJSONParsing: ie.transitional(ie.boolean),
+      clarifyTimeoutError: ie.transitional(ie.boolean)
     }, !1), i != null && (h.isFunction(i) ? r.paramsSerializer = {
       serialize: i
     } : tt.assertOptions(i, {
-      encode: oe.function,
-      serialize: oe.function
+      encode: ie.function,
+      serialize: ie.function
     }, !0)), r.allowAbsoluteUrls !== void 0 || (this.defaults.allowAbsoluteUrls !== void 0 ? r.allowAbsoluteUrls = this.defaults.allowAbsoluteUrls : r.allowAbsoluteUrls = !0), tt.assertOptions(r, {
-      baseUrl: oe.spelling("baseURL"),
-      withXsrfToken: oe.spelling("withXSRFToken")
+      baseUrl: ie.spelling("baseURL"),
+      withXsrfToken: ie.spelling("withXSRFToken")
     }, !0), r.method = (r.method || this.defaults.method || "get").toLowerCase();
     let a = s && h.merge(
       s.common,
@@ -9821,18 +9858,18 @@ const Ls = ({ baseUrl: e, apiBaseUrl: t }) => {
 export {
   A as AuthForm,
   xr as AuthRefreshError,
-  ie as BaseButton,
-  de as BaseCard,
+  se as BaseButton,
+  he as BaseCard,
   P as BaseDatePicker,
   T as BaseDateTimePicker,
   V as BaseDrawer,
   K as BaseInput,
   R as BaseSelect,
-  he as BaseTab,
-  se as BaseTabs,
+  pe as BaseTab,
+  te as BaseTabs,
   L as BaseTextarea,
   N as BaseTimePicker,
-  pe as QuantitySelect,
+  ue as QuantitySelect,
   Te as ThemeToggle,
   Vs as apiClient,
   Ls as createApiClient

package/package.json

@@ -1,14 +1,12 @@
 {
   "name": "@cal.macconnachie/web-components",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "Web components hosted on a CDN",
   "keywords": [
-    "lit",
     "web-components",
-    "auth",
-    "lit"
+    "auth"
   ],
-  "homepage": "https://github.com/cal-macconnachie/web-components#readme",
+  "homepage": "https://cdn.cals-api.com/",
   "bugs": {
     "url": "https://github.com/cal-macconnachie/web-components/issues"
   },