@transcodes/ui-components 0.1.0 → 0.3.0

package/dist/ui-components.js

@@ -1,17 +1,16 @@
-import "@transcodes/design-tokens";
-import { css as c, LitElement as d, html as l, unsafeCSS as kt } from "lit";
-import { property as n, customElement as p, state as S } from "lit/decorators.js";
-import { styleMap as m } from "lit/directives/style-map.js";
-import { classMap as B } from "lit/directives/class-map.js";
-import { unsafeStatic as $t, html as _t } from "lit/static-html.js";
-class P {
+import { css as c, LitElement as d, html as l, unsafeCSS as Ot } from "lit";
+import { property as n, customElement as p, state as k } from "lit/decorators.js";
+import { styleMap as f } from "lit/directives/style-map.js";
+import { classMap as b } from "lit/directives/class-map.js";
+import { unsafeStatic as St, html as Pt } from "lit/static-html.js";
+class L {
   constructor(e) {
     this.host = e, this.host.addController(this);
   }
 }
-class j extends P {
-  constructor(e, s = 300) {
-    super(e), this._state = "hidden", typeof s == "number" ? (this.showDuration = s, this.hideDuration = s) : (this.showDuration = s.showDuration ?? 300, this.hideDuration = s.hideDuration ?? 300);
+class M extends L {
+  constructor(e, a = 300) {
+    super(e), this._state = "hidden", typeof a == "number" ? (this.showDuration = a, this.hideDuration = a) : (this.showDuration = a.showDuration ?? 300, this.hideDuration = a.hideDuration ?? 300);
   }
   get state() {
     return this._state;
@@ -32,12 +31,12 @@ class j extends P {
     return this.isVisible ? this.hide() : this.show();
   }
   waitForTransition(e) {
-    return new Promise((s) => {
-      setTimeout(s, e);
+    return new Promise((a) => {
+      setTimeout(a, e);
     });
   }
 }
-class Fe extends P {
+class Ge extends L {
   constructor() {
     super(...arguments), this.errors = /* @__PURE__ */ new Map();
   }
@@ -50,10 +49,10 @@ class Fe extends P {
   getAllErrors() {
     return new Map(this.errors);
   }
-  validate(e, s, i) {
+  validate(e, a, i) {
     this.clearError(e);
     for (const t of i)
-      if (!this.runRule(s, t))
+      if (!this.runRule(a, t))
         return this.errors.set(e, t.message), this.host.requestUpdate(), !1;
     return !0;
   }
@@ -63,26 +62,26 @@ class Fe extends P {
   reset() {
     this.errors.clear(), this.host.requestUpdate();
   }
-  runRule(e, s) {
-    switch (s.type) {
+  runRule(e, a) {
+    switch (a.type) {
       case "required":
         return e.trim().length > 0;
       case "email":
         return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
       case "minLength":
-        return e.length >= s.value;
+        return e.length >= a.value;
       case "maxLength":
-        return e.length <= s.value;
+        return e.length <= a.value;
       case "pattern":
-        return s.value.test(e);
+        return a.value.test(e);
       case "custom":
-        return s.validator ? s.validator(e) : !0;
+        return a.validator ? a.validator(e) : !0;
       default:
         return !0;
     }
   }
 }
-class Ct extends P {
+class jt extends L {
   constructor() {
     super(...arguments), this.hasAddedEntry = !1, this.handlePopState = () => {
       this.hasAddedEntry && (this.hasAddedEntry = !1, this.onPopCallback?.());
@@ -104,7 +103,7 @@ class Ct extends P {
     window.removeEventListener("popstate", this.handlePopState), this.onPopCallback = void 0;
   }
 }
-class zt extends P {
+class Et extends L {
   constructor() {
     super(...arguments), this._isLoading = !1, this._progress = 0;
   }
@@ -127,11 +126,11 @@ class zt extends P {
     this._isLoading = !1, this._progress = 0, this.host.requestUpdate();
   }
 }
-class Dt extends P {
-  constructor(e, s) {
+class Bt extends L {
+  constructor(e, a) {
     super(e), this._matches = !1, this.handleChange = (i) => {
       this._matches = i.matches, this.host.requestUpdate();
-    }, this.mediaQuery = window.matchMedia(s), this._matches = this.mediaQuery.matches;
+    }, this.mediaQuery = window.matchMedia(a), this._matches = this.mediaQuery.matches;
   }
   get matches() {
     return this._matches;
@@ -143,38 +142,38 @@ class Dt extends P {
     this.mediaQuery.removeEventListener("change", this.handleChange);
   }
 }
-class Ot extends P {
+class Lt extends L {
   /**
    * @param host - The reactive controller host
    * @param targetOrigin - The origin to accept messages from and send messages to.
    *   SECURITY NOTE: Using '*' accepts messages from any origin which can be dangerous.
    *   Always specify an explicit origin in production environments.
    */
-  constructor(e, s = "*") {
+  constructor(e, a = "*") {
     super(e), this.handlers = /* @__PURE__ */ new Map(), this.wildcardHandlers = /* @__PURE__ */ new Set(), this.handleMessage = (i) => {
       if (!(this.targetOrigin !== "*" && i.origin !== this.targetOrigin) && i.data && typeof i.data == "object" && typeof i.data.type == "string") {
-        const { type: t, payload: a } = i.data;
-        this.handlers.get(t)?.forEach((ct) => {
-          ct(a);
-        }), this.wildcardHandlers.forEach((ct) => {
-          ct(t, a);
+        const { type: t, payload: s } = i.data;
+        this.handlers.get(t)?.forEach((mt) => {
+          mt(s);
+        }), this.wildcardHandlers.forEach((mt) => {
+          mt(t, s);
         });
       }
-    }, this.targetOrigin = s, s === "*" && typeof window < "u" && window.location.protocol !== "file:" && console.warn(
+    }, this.targetOrigin = a, a === "*" && typeof window < "u" && window.location.protocol !== "file:" && console.warn(
       '[MessageBusController] Using targetOrigin="*" accepts messages from any origin. For security, specify an explicit origin in production.'
     );
   }
-  send(e, s, i = window) {
-    i.postMessage({ type: e, payload: s }, this.targetOrigin);
+  send(e, a, i = window) {
+    i.postMessage({ type: e, payload: a }, this.targetOrigin);
   }
-  sendToFrame(e, s, i) {
-    e.contentWindow?.postMessage({ type: s, payload: i }, this.targetOrigin);
+  sendToFrame(e, a, i) {
+    e.contentWindow?.postMessage({ type: a, payload: i }, this.targetOrigin);
   }
-  onMessage(e, s) {
-    return e === "*" ? (this.wildcardHandlers.add(s), () => {
-      this.wildcardHandlers.delete(s);
-    }) : (this.handlers.has(e) || this.handlers.set(e, /* @__PURE__ */ new Set()), this.handlers.get(e)?.add(s), () => {
-      this.handlers.get(e)?.delete(s);
+  onMessage(e, a) {
+    return e === "*" ? (this.wildcardHandlers.add(a), () => {
+      this.wildcardHandlers.delete(a);
+    }) : (this.handlers.has(e) || this.handlers.set(e, /* @__PURE__ */ new Set()), this.handlers.get(e)?.add(a), () => {
+      this.handlers.get(e)?.delete(a);
     });
   }
   hostConnected() {
@@ -184,11 +183,11 @@ class Ot extends P {
     window.removeEventListener("message", this.handleMessage), this.handlers.clear();
   }
 }
-class bt extends P {
-  constructor(e, s, i = localStorage) {
+class zt extends L {
+  constructor(e, a, i = localStorage) {
     super(e), this._value = null, this.handleStorageChange = (t) => {
       t.key === this.key && t.storageArea === this.storage && (this.load(), this.host.requestUpdate());
-    }, this.key = s, this.storage = i, this.load();
+    }, this.key = a, this.storage = i, this.load();
   }
   get value() {
     return this._value;
@@ -220,24 +219,24 @@ class bt extends P {
     window.removeEventListener("storage", this.handleStorageChange);
   }
 }
-var St = Object.defineProperty, Pt = Object.getOwnPropertyDescriptor, yt = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? Pt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && St(e, s, t), t;
+var Mt = Object.defineProperty, It = Object.getOwnPropertyDescriptor, Ct = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? It(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && Mt(e, a, t), t;
 };
-let it = class extends d {
+let lt = class extends d {
   constructor() {
     super(...arguments), this.sx = {};
   }
   render() {
     return l`
-      <div part="box" class="box" style=${m(this.sx)}>
+      <div part="box" class="box" style=${f(this.sx)}>
         <slot></slot>
       </div>
     `;
   }
 };
-it.styles = c`
+lt.styles = c`
     :host {
       display: contents;
     }
@@ -246,13 +245,13 @@ it.styles = c`
       display: block;
     }
   `;
-yt([
+Ct([
   n({ type: Object })
-], it.prototype, "sx", 2);
-it = yt([
+], lt.prototype, "sx", 2);
+lt = Ct([
   p("tc-box")
-], it);
-const jt = `/**
+], lt);
+const Tt = `/**
  * Do not edit directly, this file was auto-generated.
  */
 
@@ -753,13 +752,13 @@ const jt = `/**
   border: var(--space-fixed-2xs) solid rgba(3, 105, 161, 0.2);
   color: var(--semantic-info);
 }
-`, u = kt(jt);
-var Et = Object.defineProperty, Lt = Object.getOwnPropertyDescriptor, Z = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? Lt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && Et(e, s, t), t;
+`, h = Ot(Tt);
+var At = Object.defineProperty, Ft = Object.getOwnPropertyDescriptor, at = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? Ft(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && At(e, a, t), t;
 };
-let C = class extends d {
+let P = class extends d {
   constructor() {
     super(...arguments), this.disabled = !1, this.loading = !1, this.variant = "primary", this.sx = {};
   }
@@ -775,8 +774,8 @@ let C = class extends d {
     return l`
       <button
         part="button"
-        class=${B(r)}
-        style=${m(this.sx)}
+        class=${b(r)}
+        style=${f(this.sx)}
         ?disabled=${this.disabled || this.loading}
         type="button"
         @click=${this.handleClick}
@@ -798,8 +797,8 @@ let C = class extends d {
     );
   }
 };
-C.styles = [
-  u,
+P.styles = [
+  h,
   c`
       :host {
         display: block;
@@ -898,27 +897,27 @@ C.styles = [
       }
     `
 ];
-Z([
+at([
   n({ type: Boolean })
-], C.prototype, "disabled", 2);
-Z([
+], P.prototype, "disabled", 2);
+at([
   n({ type: Boolean })
-], C.prototype, "loading", 2);
-Z([
+], P.prototype, "loading", 2);
+at([
   n({ type: String })
-], C.prototype, "variant", 2);
-Z([
+], P.prototype, "variant", 2);
+at([
   n({ type: Object })
-], C.prototype, "sx", 2);
-C = Z([
+], P.prototype, "sx", 2);
+P = at([
   p("tc-button")
-], C);
-var Bt = Object.defineProperty, Tt = Object.getOwnPropertyDescriptor, wt = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? Tt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && Bt(e, s, t), t;
+], P);
+var Ht = Object.defineProperty, Vt = Object.getOwnPropertyDescriptor, _t = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? Vt(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && Ht(e, a, t), t;
 };
-let st = class extends d {
+let ct = class extends d {
   constructor() {
     super(...arguments), this.variant = "info";
   }
@@ -931,14 +930,21 @@ let st = class extends d {
       "error-message": r
     };
     return l`
-      <div part="callout" class=${B(e)} role="alert">
-        <slot></slot>
+      <div part="callout" class=${b(e)} role="alert">
+        <div class="callout-inner">
+          <div part="icon" class="callout-icon">
+            <slot name="icon"></slot>
+          </div>
+          <div part="content" class="callout-content">
+            <slot></slot>
+          </div>
+        </div>
       </div>
     `;
   }
 };
-st.styles = [
-  u,
+ct.styles = [
+  h,
   c`
       :host {
         display: block;
@@ -954,20 +960,43 @@ st.styles = [
       .error-message {
         animation: none;
       }
+
+      /* Icon + content layout */
+      .callout-inner {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--space-sm);
+      }
+
+      .callout-icon {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+      }
+
+      /* Hide icon container when empty */
+      .callout-icon:empty {
+        display: none;
+      }
+
+      .callout-content {
+        flex: 1;
+        min-width: 0;
+      }
     `
 ];
-wt([
+_t([
   n({ type: String })
-], st.prototype, "variant", 2);
-st = wt([
+], ct.prototype, "variant", 2);
+ct = _t([
   p("tc-callout")
-], st);
-var At = Object.defineProperty, Mt = Object.getOwnPropertyDescriptor, dt = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? Mt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && At(e, s, t), t;
+], ct);
+var qt = Object.defineProperty, Yt = Object.getOwnPropertyDescriptor, gt = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? Yt(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && qt(e, a, t), t;
 };
-let N = class extends d {
+let G = class extends d {
   constructor() {
     super(...arguments), this.noBorder = !1, this.sx = {};
   }
@@ -977,7 +1006,7 @@ let N = class extends d {
       "card--no-border": this.noBorder
     };
     return l`
-      <div part="card" class=${B(r)} style=${m(this.sx)}>
+      <div part="card" class=${b(r)} style=${f(this.sx)}>
         <div class="card-content">
           <slot></slot>
         </div>
@@ -985,8 +1014,8 @@ let N = class extends d {
     `;
   }
 };
-N.styles = [
-  u,
+G.styles = [
+  h,
   c`
       :host {
         display: block;
@@ -1021,21 +1050,21 @@ N.styles = [
       }
     `
 ];
-dt([
+gt([
   n({ type: Boolean, attribute: "no-border" })
-], N.prototype, "noBorder", 2);
-dt([
+], G.prototype, "noBorder", 2);
+gt([
   n({ type: Object })
-], N.prototype, "sx", 2);
-N = dt([
+], G.prototype, "sx", 2);
+G = gt([
   p("tc-card")
-], N);
-var It = Object.defineProperty, Ft = Object.getOwnPropertyDescriptor, pt = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? Ft(e, s) : e, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && It(e, s, t), t;
+], G);
+var Ut = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, ft = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? Rt(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && Ut(e, a, t), t;
 };
-let K = class extends d {
+let Q = class extends d {
   constructor() {
     super(...arguments), this.variant = "default", this.size = "md";
   }
@@ -1047,8 +1076,8 @@ let K = class extends d {
     `;
   }
 };
-K.styles = [
-  u,
+Q.styles = [
+  h,
   c`
       :host {
         display: inline-flex;
@@ -1094,21 +1123,21 @@ K.styles = [
       }
     `
 ];
-pt([
+ft([
   n({ type: String })
-], K.prototype, "variant", 2);
-pt([
+], Q.prototype, "variant", 2);
+ft([
   n({ type: String })
-], K.prototype, "size", 2);
-K = pt([
+], Q.prototype, "size", 2);
+Q = ft([
   p("tc-chip")
-], K);
-var qt = Object.defineProperty, Yt = Object.getOwnPropertyDescriptor, ht = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? Yt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && qt(e, s, t), t;
+], Q);
+var Nt = Object.defineProperty, Kt = Object.getOwnPropertyDescriptor, bt = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? Kt(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && Nt(e, a, t), t;
 };
-let V = class extends d {
+let J = class extends d {
   constructor() {
     super(...arguments), this.wide = !1, this.sx = {}, this.defaultStyles = {
       display: "flex",
@@ -1126,14 +1155,14 @@ let V = class extends d {
       <div
         part="container"
         class="container ${this.wide ? "container--wide" : ""}"
-        style=${m(r)}
+        style=${f(r)}
       >
         <slot></slot>
       </div>
     `;
   }
 };
-V.styles = c`
+J.styles = c`
     :host {
       display: block;
       width: 100%;
@@ -1150,175 +1179,92 @@ V.styles = c`
       max-width: var(--container-max-width-wide);
     }
   `;
-ht([
+bt([
   n({ type: Boolean })
-], V.prototype, "wide", 2);
-ht([
+], J.prototype, "wide", 2);
+bt([
   n({ type: Object })
-], V.prototype, "sx", 2);
-V = ht([
+], J.prototype, "sx", 2);
+J = bt([
   p("tc-container")
-], V);
-var Ut = Object.defineProperty, Ht = Object.getOwnPropertyDescriptor, ut = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? Ht(e, s) : e, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && Ut(e, s, t), t;
+], J);
+var Wt = Object.defineProperty, Xt = Object.getOwnPropertyDescriptor, pt = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? Xt(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && Wt(e, a, t), t;
 };
-let W = class extends d {
+let F = class extends d {
   constructor() {
-    super(...arguments), this.color = "var(--ink-faint)", this.spacing = "var(--space-md)";
+    super(...arguments), this.color = "var(--ink-faint)", this.spacing = "var(--space-md)", this.text = "";
   }
   render() {
-    return l`
-      <hr
-        part="divider"
-        class="divider"
-        style="--divider-color: ${this.color}; --divider-spacing: ${this.spacing};"
-      />
+    const r = `--divider-color: ${this.color}; --divider-spacing: ${this.spacing};`;
+    return this.text ? l`
+        <div part="container" class="divider-container" style=${r}>
+          <hr part="line" class="divider-line" />
+          <span part="text" class="divider-text">${this.text}</span>
+          <hr part="line" class="divider-line" />
+        </div>
+      ` : l`
+      <hr part="divider" class="divider" style=${r} />
     `;
   }
 };
-W.styles = c`
+F.styles = c`
     :host {
       display: block;
       width: 100%;
     }
 
+    /* Simple divider (no text) */
     .divider {
       border: none;
       height: 1px;
       background-color: var(--divider-color);
       margin: var(--divider-spacing) 0;
     }
-  `;
-ut([
-  n({ type: String })
-], W.prototype, "color", 2);
-ut([
-  n({ type: String })
-], W.prototype, "spacing", 2);
-W = ut([
-  p("tc-divider")
-], W);
-var Rt = Object.defineProperty, Nt = Object.getOwnPropertyDescriptor, I = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? Nt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && Rt(e, s, t), t;
-};
-let b = class extends d {
-  constructor() {
-    super(...arguments), this.title = "", this.subtitle = "", this.notice = "", this.noAnimation = !1, this.sx = {};
-  }
-  render() {
-    const r = !this.noAnimation;
-    return l`
-      <header part="header" class="header" style=${m(this.sx)}>
-        ${this.title ? l`<h1 part="title" class="form-title ${r ? "form-title--animated" : ""}">
-              ${this.title}
-            </h1>` : ""}
-        ${this.subtitle ? l`<p part="subtitle" class="form-subtitle ${r ? "form-subtitle--animated" : ""}">
-              ${this.subtitle}
-            </p>` : ""}
-        ${this.notice ? l`<div part="notice" class="notice ${r ? "notice--animated" : ""}">
-              ${this.notice}
-            </div>` : ""}
-      </header>
-    `;
-  }
-};
-b.styles = [
-  u,
-  c`
-      :host {
-        display: block;
-        text-align: center;
-      }
-
-      .header {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: var(--space-sm);
-      }
-
-      /* Extend design-tokens .form-title */
-      .form-title {
-        margin: 0;
-        line-height: 1.2;
-      }
-
-      .form-title--animated {
-        animation: slideDown var(--duration-fast) var(--easing-ease-in-out) backwards;
-      }
-
-      /* Extend design-tokens .form-subtitle */
-      .form-subtitle {
-        margin: 0;
-        max-width: 28ch;
-      }
-
-      .form-subtitle--animated {
-        animation: slideUp var(--duration-smooth) var(--easing-ease-in-out) 100ms backwards;
-      }
-
-      .notice {
-        margin-top: var(--space-sm);
-        padding: var(--space-sm) var(--space-md);
-        background: var(--paper-warm);
-        border-radius: var(--radius-md);
-        font-size: var(--font-size-sm);
-        color: var(--ink-medium);
-      }
 
-      .notice--animated {
-        animation: noticeReveal 500ms var(--easing-ease-in-out) 200ms backwards;
-      }
+    /* Divider with text */
+    .divider-container {
+      display: flex;
+      align-items: center;
+      gap: var(--space-md);
+      margin: var(--divider-spacing) 0;
+    }
 
-      @keyframes noticeReveal {
-        from {
-          opacity: 0;
-          transform: scale(0.95);
-        }
-        to {
-          opacity: 1;
-          transform: scale(1);
-        }
-      }
+    .divider-line {
+      flex: 1;
+      border: none;
+      height: 1px;
+      background-color: var(--divider-color);
+      margin: 0;
+    }
 
-      /* Reduced motion */
-      @media (prefers-reduced-motion: reduce) {
-        .form-title--animated,
-        .form-subtitle--animated,
-        .notice--animated {
-          animation: none;
-        }
-      }
-    `
-];
-I([
+    .divider-text {
+      flex-shrink: 0;
+      font-size: var(--font-size-sm);
+      color: var(--ink-light);
+      font-family: var(--font-body);
+    }
+  `;
+pt([
   n({ type: String })
-], b.prototype, "title", 2);
-I([
+], F.prototype, "color", 2);
+pt([
   n({ type: String })
-], b.prototype, "subtitle", 2);
-I([
+], F.prototype, "spacing", 2);
+pt([
   n({ type: String })
-], b.prototype, "notice", 2);
-I([
-  n({ type: Boolean, attribute: "no-animation" })
-], b.prototype, "noAnimation", 2);
-I([
-  n({ type: Object })
-], b.prototype, "sx", 2);
-b = I([
-  p("tc-form-header")
-], b);
-var Kt = Object.defineProperty, Vt = Object.getOwnPropertyDescriptor, ot = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? Vt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && Kt(e, s, t), t;
+], F.prototype, "text", 2);
+F = pt([
+  p("tc-divider")
+], F);
+var Gt = Object.defineProperty, Qt = Object.getOwnPropertyDescriptor, ht = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? Qt(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && Gt(e, a, t), t;
 };
-const Wt = {
+const Jt = {
   "arrow-left": l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>`,
   "arrow-right": l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>`,
   check: l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>`,
@@ -1337,14 +1283,30 @@ const Wt = {
   passkey: l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M21 10h-8.35C11.83 7.67 9.61 6 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6c2.61 0 4.83-1.67 5.65-4H13l2 2 2-2 2 2 2-2.93-2-2.07zm-14 2c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></svg>`,
   bell: l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>`,
   download: l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>`,
-  "wifi-off": l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="1" y1="1" x2="23" y2="23"></line><path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55"></path><path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39"></path><path d="M10.71 5.05A16 16 0 0 1 22.58 9"></path><path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88"></path><path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path><line x1="12" y1="20" x2="12.01" y2="20"></line></svg>`
+  "wifi-off": l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="1" y1="1" x2="23" y2="23"></line><path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55"></path><path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39"></path><path d="M10.71 5.05A16 16 0 0 1 22.58 9"></path><path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88"></path><path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path><line x1="12" y1="20" x2="12.01" y2="20"></line></svg>`,
+  // Brand icons
+  apple: l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>`,
+  google: l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>`,
+  windows: l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 12V6.75l6-1.32v6.48L3 12zm17-9v8.75l-10 .15V5.21L20 3zM3 13l6 .09v6.81l-6-1.15V13zm17 .25V22l-10-1.91V13.1l10 .15z"/></svg>`,
+  samsung: l`<svg viewBox="0 0 24 24"><text x="12" y="17" font-size="18" font-weight="700" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" text-anchor="middle" fill="currentColor">S</text></svg>`,
+  // General icons
+  phone: l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>`,
+  success: l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>`,
+  lock: l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>`,
+  person: l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>`,
+  device: l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M15 7v4h1v2h-3V5h2l-3-4-3 4h2v8H8v-2.07c.7-.37 1.2-1.08 1.2-1.93 0-1.21-.99-2.2-2.2-2.2-1.21 0-2.2.99-2.2 2.2 0 .85.5 1.56 1.2 1.93V13c0 1.11.89 2 2 2h3v3.05c-.71.37-1.2 1.1-1.2 1.95 0 1.22.99 2.2 2.2 2.2 1.21 0 2.2-.98 2.2-2.2 0-.85-.49-1.58-1.2-1.95V15h3c1.11 0 2-.89 2-2v-2h1V7h-4z"/></svg>`,
+  // Auth icons
+  totp: l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>`,
+  "email-otp": l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>`,
+  qrcode: l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 11h8V3H3v8zm2-6h4v4H5V5zM3 21h8v-8H3v8zm2-6h4v4H5v-4zM13 3v8h8V3h-8zm6 6h-4V5h4v4zM13 13h2v2h-2zM15 15h2v2h-2zM13 17h2v2h-2zM15 19h2v2h-2zM17 17h2v2h-2zM17 13h2v2h-2zM19 15h2v2h-2zM19 19h2v2h-2z"/><path d="M6 6h2v2H6zM6 16h2v2H6zM16 6h2v2h-2z"/></svg>`,
+  key: l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z"/></svg>`
 };
-let T = class extends d {
+let H = class extends d {
   constructor() {
     super(...arguments), this.name = "info", this.size = "1.5rem", this.color = "currentColor";
   }
   render() {
-    const r = Wt[this.name];
+    const r = Jt[this.name];
     return r ? l`
       <span
         part="icon"
@@ -1356,7 +1318,7 @@ let T = class extends d {
     ` : (console.warn(`Icon "${this.name}" not found`), l``);
   }
 };
-T.styles = c`
+H.styles = c`
     :host {
       display: inline-flex;
       align-items: center;
@@ -1375,101 +1337,440 @@ T.styles = c`
       color: var(--icon-color);
     }
   `;
-ot([
+ht([
   n({ type: String })
-], T.prototype, "name", 2);
-ot([
+], H.prototype, "name", 2);
+ht([
   n({ type: String })
-], T.prototype, "size", 2);
-ot([
+], H.prototype, "size", 2);
+ht([
   n({ type: String })
-], T.prototype, "color", 2);
-T = ot([
+], H.prototype, "color", 2);
+H = ht([
   p("tc-icon")
-], T);
-var Xt = Object.defineProperty, Gt = Object.getOwnPropertyDescriptor, v = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? Gt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && Xt(e, s, t), t;
+], H);
+var Zt = Object.defineProperty, te = Object.getOwnPropertyDescriptor, Y = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? te(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && Zt(e, a, t), t;
 };
-let h = class extends d {
+let $ = class extends d {
   constructor() {
-    super(...arguments), this.label = "", this.type = "text", this.placeholder = "", this.value = "", this.error = "", this.disabled = !1, this.required = !1, this.name = "", this.autocomplete = "", this.inputmode = "", this.maxlength = 0, this.sx = {}, this.inputId = `tc-input-${Math.random().toString(36).slice(2)}`, this.isFocused = !1;
+    super(...arguments), this.tag = "p", this.sx = {};
+  }
+  getColorClass() {
+    return this.color && {
+      primary: "text--primary",
+      secondary: "text--secondary",
+      tertiary: "text--tertiary",
+      muted: "text--muted",
+      accent: "text--accent",
+      success: "text--success",
+      error: "text--error",
+      warning: "text--warning",
+      info: "text--info"
+    }[this.color] || "";
+  }
+  getColorStyle() {
+    if (this.color && (this.color.startsWith("var(") || this.color.startsWith("#") || this.color.startsWith("rgb")))
+      return this.color;
   }
   render() {
-    const r = this.error.length > 0, e = {
-      "field-group": !0,
-      focused: this.isFocused,
-      "has-error": r
-    }, s = {
-      "input-wrapper": !0,
-      focused: this.isFocused,
-      "has-error": r
-    }, i = {
-      input: !0,
-      "has-error": r
+    const r = St(this.tag), e = [
+      "text",
+      this.size ? `text--${this.size}` : "",
+      this.weight ? `text--w${this.weight}` : "",
+      this.getColorClass()
+    ].filter(Boolean).join(" "), a = this.getColorStyle(), i = {
+      ...a ? { color: a } : {},
+      ...this.sx
     };
-    return l`
-      <div class=${B(e)}>
-        ${this.label ? l`<label part="label" class="field-label" for=${this.inputId}>${this.label}</label>` : ""}
-        <div part="wrapper" class=${B(s)}>
-          <input
-            part="input"
-            id=${this.inputId}
-            class=${B(i)}
-            type=${this.type}
-            name=${this.name}
-            placeholder=${this.placeholder}
-            .value=${this.value}
-            ?disabled=${this.disabled}
-            ?required=${this.required}
-            autocomplete=${this.autocomplete || "off"}
-            inputmode=${this.inputmode || ""}
-            maxlength=${this.maxlength || ""}
-            aria-invalid=${r ? "true" : "false"}
-            aria-describedby=${r ? `${this.inputId}-error` : ""}
-            style=${m(this.sx)}
-            @input=${this.handleInput}
-            @focus=${this.handleFocus}
-            @blur=${this.handleBlur}
-          />
-          <div part="ink-line" class="ink-line"></div>
-        </div>
-        ${r ? l`<p part="error" id="${this.inputId}-error" class="input-error-text" role="alert">
-              ${this.error}
-            </p>` : ""}
-      </div>
+    return Pt`
+      <${r} part="text" class=${e} style=${f(i)}>
+        <slot></slot>
+      </${r}>
     `;
   }
-  handleInput(r) {
-    const e = r.target;
-    this.value = e.value, this.dispatchEvent(
-      new CustomEvent("tc-input", {
-        bubbles: !0,
-        composed: !0,
-        detail: { value: e.value }
-      })
-    );
-  }
-  handleFocus() {
-    this.isFocused = !0;
-  }
-  handleBlur(r) {
-    const e = r.target;
-    this.isFocused = !1, this.dispatchEvent(
-      new CustomEvent("tc-blur", {
-        bubbles: !0,
-        composed: !0,
-        detail: { value: e.value }
-      })
-    );
+};
+$.styles = [
+  h,
+  c`
+      :host {
+        display: contents;
+      }
+
+      .text {
+        margin: 0;
+        padding: 0;
+        font-family: var(--font-body);
+        line-height: 1.4;
+        color: var(--ink-black);
+      }
+
+      /* Size variants using design-tokens */
+      .text--sm {
+        font-size: var(--font-size-sm);
+      }
+      .text--base {
+        font-size: var(--font-size-base);
+      }
+      .text--lg {
+        font-size: var(--font-size-lg);
+      }
+      .text--xl {
+        font-size: var(--font-size-xl);
+      }
+      .text--2xl {
+        font-size: var(--font-size-2xl);
+      }
+
+      /* Weight variants */
+      .text--w400 {
+        font-weight: 400;
+      }
+      .text--w500 {
+        font-weight: 500;
+      }
+      .text--w600 {
+        font-weight: 600;
+      }
+      .text--w700 {
+        font-weight: 700;
+      }
+
+      /* Color variants using design-tokens - these will respond to theme changes */
+      .text--primary {
+        color: var(--ink-black);
+      }
+      .text--secondary {
+        color: var(--ink-dark);
+      }
+      .text--tertiary {
+        color: var(--ink-medium);
+      }
+      .text--muted {
+        color: var(--ink-light);
+      }
+      .text--accent {
+        color: var(--accent-primary);
+      }
+      .text--success {
+        color: var(--accent-success);
+      }
+      .text--error {
+        color: var(--error-base);
+      }
+      .text--warning {
+        color: var(--semantic-warning);
+      }
+      .text--info {
+        color: var(--semantic-info);
+      }
+    `
+];
+Y([
+  n({ type: String })
+], $.prototype, "tag", 2);
+Y([
+  n({ type: String })
+], $.prototype, "size", 2);
+Y([
+  n({ type: String })
+], $.prototype, "weight", 2);
+Y([
+  n({ type: String })
+], $.prototype, "color", 2);
+Y([
+  n({ type: Object })
+], $.prototype, "sx", 2);
+$ = Y([
+  p("tc-text")
+], $);
+var ee = Object.defineProperty, re = Object.getOwnPropertyDescriptor, yt = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? re(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && ee(e, a, t), t;
+};
+let Z = class extends d {
+  constructor() {
+    super(...arguments), this.variant = "error", this.message = "";
+  }
+  getIconName() {
+    switch (this.variant) {
+      case "warning":
+        return "alert-triangle";
+      case "info":
+        return "info";
+      default:
+        return "alert-circle";
+    }
+  }
+  getIconColor() {
+    switch (this.variant) {
+      case "warning":
+        return "var(--semantic-warning)";
+      case "info":
+        return "var(--semantic-info)";
+      default:
+        return "var(--error-base)";
+    }
+  }
+  render() {
+    return this.message ? l`
+      <tc-callout part="callout" variant=${this.variant}>
+        <tc-icon
+          slot="icon"
+          part="icon"
+          name=${this.getIconName()}
+          size="1.25rem"
+          color=${this.getIconColor()}
+        ></tc-icon>
+        <tc-text part="message" class="message-text" size="sm">
+          ${this.message}
+        </tc-text>
+      </tc-callout>
+    ` : null;
+  }
+};
+Z.styles = c`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    tc-callout::part(callout) {
+      padding: var(--space-sm) var(--space-md);
+    }
+
+    .message-text {
+      line-height: 1.4;
+    }
+  `;
+yt([
+  n({ type: String })
+], Z.prototype, "variant", 2);
+yt([
+  n({ type: String })
+], Z.prototype, "message", 2);
+Z = yt([
+  p("tc-error-message")
+], Z);
+var ie = Object.defineProperty, ae = Object.getOwnPropertyDescriptor, U = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? ae(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && ie(e, a, t), t;
+};
+let z = class extends d {
+  constructor() {
+    super(...arguments), this.title = "", this.subtitle = "", this.notice = "", this.noAnimation = !1, this.sx = {};
+  }
+  render() {
+    const r = !this.noAnimation;
+    return l`
+      <header part="header" class="header" style=${f(this.sx)}>
+        ${this.title ? l`<h1 part="title" class="form-title ${r ? "form-title--animated" : ""}">
+              ${this.title}
+            </h1>` : ""}
+        ${this.subtitle ? l`<p part="subtitle" class="form-subtitle ${r ? "form-subtitle--animated" : ""}">
+              ${this.subtitle}
+            </p>` : ""}
+        ${this.notice ? l`<div part="notice" class="notice ${r ? "notice--animated" : ""}">
+              ${this.notice}
+            </div>` : ""}
+      </header>
+    `;
+  }
+};
+z.styles = [
+  h,
+  c`
+      :host {
+        display: block;
+        text-align: center;
+      }
+
+      .header {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--space-sm);
+      }
+
+      /* Extend design-tokens .form-title */
+      .form-title {
+        margin: 0;
+        line-height: 1.2;
+      }
+
+      .form-title--animated {
+        animation: slideDown var(--duration-fast) var(--easing-ease-in-out) backwards;
+      }
+
+      /* Extend design-tokens .form-subtitle */
+      .form-subtitle {
+        margin: 0;
+        max-width: 28ch;
+      }
+
+      .form-subtitle--animated {
+        animation: slideUp var(--duration-smooth) var(--easing-ease-in-out) 100ms backwards;
+      }
+
+      .notice {
+        margin-top: var(--space-sm);
+        padding: var(--space-sm) var(--space-md);
+        background: var(--paper-warm);
+        border-radius: var(--radius-md);
+        font-size: var(--font-size-sm);
+        color: var(--ink-medium);
+      }
+
+      .notice--animated {
+        animation: noticeReveal 500ms var(--easing-ease-in-out) 200ms backwards;
+      }
+
+      @keyframes noticeReveal {
+        from {
+          opacity: 0;
+          transform: scale(0.95);
+        }
+        to {
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
+
+      /* Reduced motion */
+      @media (prefers-reduced-motion: reduce) {
+        .form-title--animated,
+        .form-subtitle--animated,
+        .notice--animated {
+          animation: none;
+        }
+      }
+    `
+];
+U([
+  n({ type: String })
+], z.prototype, "title", 2);
+U([
+  n({ type: String })
+], z.prototype, "subtitle", 2);
+U([
+  n({ type: String })
+], z.prototype, "notice", 2);
+U([
+  n({ type: Boolean, attribute: "no-animation" })
+], z.prototype, "noAnimation", 2);
+U([
+  n({ type: Object })
+], z.prototype, "sx", 2);
+z = U([
+  p("tc-form-header")
+], z);
+var se = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, v = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? oe(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && se(e, a, t), t;
+};
+let u = class extends d {
+  constructor() {
+    super(...arguments), this.label = "", this.type = "text", this.placeholder = "", this.value = "", this.error = "", this.disabled = !1, this.required = !1, this.name = "", this.autocomplete = "", this.inputmode = "", this.maxlength = 0, this.sx = {}, this.inputId = `tc-input-${Math.random().toString(36).slice(2)}`, this.isFocused = !1;
+  }
+  render() {
+    const r = this.error.length > 0, e = {
+      "field-group": !0,
+      focused: this.isFocused,
+      "has-error": r
+    }, a = {
+      "input-wrapper": !0,
+      focused: this.isFocused,
+      "has-error": r
+    }, i = {
+      input: !0,
+      "has-error": r
+    };
+    return l`
+      <div class=${b(e)}>
+        ${this.label ? l`<label part="label" class="field-label" for=${this.inputId}>${this.label}</label>` : ""}
+        <div part="wrapper" class=${b(a)}>
+          <input
+            part="input"
+            id=${this.inputId}
+            class=${b(i)}
+            type=${this.type}
+            name=${this.name}
+            placeholder=${this.placeholder}
+            .value=${this.value}
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            autocomplete=${this.autocomplete || "off"}
+            inputmode=${this.inputmode || ""}
+            maxlength=${this.maxlength || ""}
+            aria-invalid=${r ? "true" : "false"}
+            aria-describedby=${r ? `${this.inputId}-error` : ""}
+            style=${f(this.sx)}
+            @input=${this.handleInput}
+            @focus=${this.handleFocus}
+            @blur=${this.handleBlur}
+            @keydown=${this.handleKeydown}
+            @paste=${this.handlePaste}
+          />
+          <div part="ink-line" class="ink-line"></div>
+        </div>
+        ${r ? l`<p part="error" id="${this.inputId}-error" class="input-error-text" role="alert">
+              ${this.error}
+            </p>` : ""}
+      </div>
+    `;
+  }
+  handleInput(r) {
+    const e = r.target;
+    this.value = e.value, this.dispatchEvent(
+      new CustomEvent("tc-input", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: e.value }
+      })
+    );
+  }
+  handleFocus() {
+    this.isFocused = !0;
+  }
+  handleBlur(r) {
+    const e = r.target;
+    this.isFocused = !1, this.dispatchEvent(
+      new CustomEvent("tc-blur", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: e.value }
+      })
+    );
+  }
+  handleKeydown(r) {
+    this.dispatchEvent(
+      new CustomEvent("tc-keydown", {
+        bubbles: !0,
+        composed: !0,
+        detail: { key: r.key, value: this.value, originalEvent: r }
+      })
+    );
+  }
+  handlePaste(r) {
+    this.dispatchEvent(
+      new CustomEvent("tc-paste", {
+        bubbles: !0,
+        composed: !0,
+        detail: { data: r.clipboardData?.getData("text"), originalEvent: r }
+      })
+    );
   }
   focus() {
     this.shadowRoot?.querySelector("input")?.focus();
   }
 };
-h.styles = [
-  u,
+u.styles = [
+  h,
   c`
       :host {
         display: block;
@@ -1505,51 +1806,298 @@ h.styles = [
         cursor: not-allowed;
       }
 
-      /* Ink line animation */
-      .ink-line {
-        position: absolute;
-        bottom: 0;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 0;
-        height: 0.125rem;
-        background: linear-gradient(
-          90deg,
-          var(--accent-primary) 0%,
-          var(--accent-primary-hover) 100%
-        );
-        border-radius: 0.0625rem;
-        transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
-        pointer-events: none;
-      }
-
-      .input-wrapper.focused .ink-line {
-        width: 60%;
-      }
-
-      /* Error states */
-      .input.has-error {
-        border-color: var(--error-base);
-        background: var(--error-bg);
+      /* Ink line animation */
+      .ink-line {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 0;
+        height: 0.125rem;
+        background: linear-gradient(
+          90deg,
+          var(--accent-primary) 0%,
+          var(--accent-primary-hover) 100%
+        );
+        border-radius: 0.0625rem;
+        transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
+        pointer-events: none;
+      }
+
+      .input-wrapper.focused .ink-line {
+        width: 60%;
+      }
+
+      /* Error states */
+      .input.has-error {
+        border-color: var(--error-base);
+        background: var(--error-bg);
+      }
+
+      .input.has-error:focus {
+        border-color: var(--error-base);
+        box-shadow: 0 0 0 0.1875rem var(--error-border);
+      }
+
+      .input-wrapper.has-error .ink-line {
+        background: linear-gradient(
+          90deg,
+          var(--error-base) 0%,
+          var(--error-base) 100%
+        );
+      }
+
+      .input-error-text {
+        font-size: var(--font-size-sm);
+        color: var(--error-base);
+        margin: 0;
+        animation: slideDown 300ms ease backwards;
+      }
+
+      @keyframes slideDown {
+        from {
+          opacity: 0;
+          transform: translateY(-0.25rem);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      /* Reduced motion */
+      @media (prefers-reduced-motion: reduce) {
+        .field-label,
+        .input,
+        .ink-line,
+        .input-error-text {
+          transition-duration: 0.01ms !important;
+          animation-duration: 0.01ms !important;
+        }
+      }
+    `
+];
+v([
+  n({ type: String })
+], u.prototype, "label", 2);
+v([
+  n({ type: String })
+], u.prototype, "type", 2);
+v([
+  n({ type: String })
+], u.prototype, "placeholder", 2);
+v([
+  n({ type: String })
+], u.prototype, "value", 2);
+v([
+  n({ type: String })
+], u.prototype, "error", 2);
+v([
+  n({ type: Boolean })
+], u.prototype, "disabled", 2);
+v([
+  n({ type: Boolean })
+], u.prototype, "required", 2);
+v([
+  n({ type: String })
+], u.prototype, "name", 2);
+v([
+  n({ type: String })
+], u.prototype, "autocomplete", 2);
+v([
+  n({ type: String })
+], u.prototype, "inputmode", 2);
+v([
+  n({ type: Number })
+], u.prototype, "maxlength", 2);
+v([
+  n({ type: Object })
+], u.prototype, "sx", 2);
+v([
+  k()
+], u.prototype, "inputId", 2);
+v([
+  k()
+], u.prototype, "isFocused", 2);
+u = v([
+  p("tc-input")
+], u);
+var ne = Object.defineProperty, le = Object.getOwnPropertyDescriptor, g = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? le(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && ne(e, a, t), t;
+};
+let m = class extends d {
+  constructor() {
+    super(...arguments), this.label = "", this.placeholder = "", this.value = "", this.error = "", this.disabled = !1, this.readonly = !1, this.chipLabel = "", this.chipIcon = "", this.chipVariant = "default", this.inputId = `tc-input-chip-${Math.random().toString(36).slice(2)}`, this.isFocused = !1;
+  }
+  render() {
+    const r = this.error.length > 0, e = {
+      "field-group": !0,
+      focused: this.isFocused,
+      "has-error": r
+    }, a = {
+      "input-container": !0,
+      "has-error": r
+    };
+    return l`
+      <div class=${b(e)}>
+        ${this.label ? l`<label part="label" class="field-label" for=${this.inputId}>${this.label}</label>` : ""}
+        <div part="wrapper" class=${b(a)}>
+          <input
+            part="input"
+            id=${this.inputId}
+            class="input"
+            type="text"
+            placeholder=${this.placeholder}
+            .value=${this.value}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            aria-invalid=${r ? "true" : "false"}
+            aria-describedby=${r ? `${this.inputId}-error` : ""}
+            @input=${this.handleInput}
+            @focus=${this.handleFocus}
+            @blur=${this.handleBlur}
+            @keydown=${this.handleKeydown}
+          />
+          ${this.chipLabel ? l`
+                <div class="chip-container">
+                  <tc-chip part="chip" variant=${this.chipVariant} size="sm">
+                    <span class="chip-content">
+                      ${this.chipIcon ? l`<tc-icon name=${this.chipIcon} size="0.875rem"></tc-icon>` : ""}
+                      ${this.chipLabel}
+                    </span>
+                  </tc-chip>
+                </div>
+              ` : ""}
+        </div>
+        ${r ? l`<p part="error" id="${this.inputId}-error" class="error-text" role="alert">
+              ${this.error}
+            </p>` : ""}
+      </div>
+    `;
+  }
+  handleInput(r) {
+    const e = r.target;
+    this.value = e.value, this.dispatchEvent(
+      new CustomEvent("tc-input", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: e.value }
+      })
+    );
+  }
+  handleFocus() {
+    this.isFocused = !0;
+  }
+  handleBlur(r) {
+    const e = r.target;
+    this.isFocused = !1, this.dispatchEvent(
+      new CustomEvent("tc-blur", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: e.value }
+      })
+    );
+  }
+  handleKeydown(r) {
+    this.dispatchEvent(
+      new CustomEvent("tc-keydown", {
+        bubbles: !0,
+        composed: !0,
+        detail: { key: r.key, value: this.value, originalEvent: r }
+      })
+    );
+  }
+  focus() {
+    this.shadowRoot?.querySelector("input")?.focus();
+  }
+};
+m.styles = [
+  h,
+  c`
+      :host {
+        display: block;
+      }
+
+      .field-group {
+        width: 100%;
+      }
+
+      .field-group.focused .field-label {
+        color: var(--accent-primary);
+      }
+
+      .field-group.has-error .field-label {
+        color: var(--error-base);
+      }
+
+      .input-container {
+        position: relative;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        background: var(--paper-white);
+        border: 1px solid var(--ink-faint);
+        border-radius: var(--form-input-radius);
+        transition: var(--transition-fast);
+      }
+
+      .input-container:focus-within {
+        border-color: var(--accent-primary);
+        box-shadow: 0 0 0 3px var(--alpha-primary10);
+      }
+
+      .input-container.has-error {
+        border-color: var(--error-base);
+        background: var(--error-bg);
+      }
+
+      .input-container.has-error:focus-within {
+        box-shadow: 0 0 0 3px var(--error-border);
+      }
+
+      .input {
+        flex: 1;
+        min-width: 0;
+        padding: var(--form-input-padding-y) var(--form-input-padding-x);
+        font-family: var(--font-body);
+        font-size: var(--form-input-font-size);
+        color: var(--ink-black);
+        background: transparent;
+        border: none;
+        outline: none;
+      }
+
+      .input::placeholder {
+        color: var(--ink-light);
+      }
+
+      .input:disabled {
+        opacity: var(--opacity-disabled);
+        cursor: not-allowed;
+      }
+
+      .input:read-only {
+        cursor: default;
       }
 
-      .input.has-error:focus {
-        border-color: var(--error-base);
-        box-shadow: 0 0 0 0.1875rem var(--error-border);
+      .chip-container {
+        display: flex;
+        align-items: center;
+        padding-right: var(--space-sm);
       }
 
-      .input-wrapper.has-error .ink-line {
-        background: linear-gradient(
-          90deg,
-          var(--error-base) 0%,
-          var(--error-base) 100%
-        );
+      .chip-content {
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
       }
 
-      .input-error-text {
+      .error-text {
         font-size: var(--font-size-sm);
         color: var(--error-base);
-        margin: 0;
+        margin: var(--space-xs) 0 0;
         animation: slideDown 300ms ease backwards;
       }
 
@@ -1564,69 +2112,57 @@ h.styles = [
         }
       }
 
-      /* Reduced motion */
       @media (prefers-reduced-motion: reduce) {
-        .field-label,
-        .input,
-        .ink-line,
-        .input-error-text {
+        .input-container,
+        .error-text {
           transition-duration: 0.01ms !important;
           animation-duration: 0.01ms !important;
         }
       }
     `
 ];
-v([
+g([
   n({ type: String })
-], h.prototype, "label", 2);
-v([
-  n({ type: String })
-], h.prototype, "type", 2);
-v([
+], m.prototype, "label", 2);
+g([
   n({ type: String })
-], h.prototype, "placeholder", 2);
-v([
+], m.prototype, "placeholder", 2);
+g([
   n({ type: String })
-], h.prototype, "value", 2);
-v([
+], m.prototype, "value", 2);
+g([
   n({ type: String })
-], h.prototype, "error", 2);
-v([
+], m.prototype, "error", 2);
+g([
   n({ type: Boolean })
-], h.prototype, "disabled", 2);
-v([
+], m.prototype, "disabled", 2);
+g([
   n({ type: Boolean })
-], h.prototype, "required", 2);
-v([
-  n({ type: String })
-], h.prototype, "name", 2);
-v([
-  n({ type: String })
-], h.prototype, "autocomplete", 2);
-v([
-  n({ type: String })
-], h.prototype, "inputmode", 2);
-v([
-  n({ type: Number })
-], h.prototype, "maxlength", 2);
-v([
-  n({ type: Object })
-], h.prototype, "sx", 2);
-v([
-  S()
-], h.prototype, "inputId", 2);
-v([
-  S()
-], h.prototype, "isFocused", 2);
-h = v([
-  p("tc-input")
-], h);
-var Qt = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, nt = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? Jt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && Qt(e, s, t), t;
+], m.prototype, "readonly", 2);
+g([
+  n({ type: String, attribute: "chip-label" })
+], m.prototype, "chipLabel", 2);
+g([
+  n({ type: String, attribute: "chip-icon" })
+], m.prototype, "chipIcon", 2);
+g([
+  n({ type: String, attribute: "chip-variant" })
+], m.prototype, "chipVariant", 2);
+g([
+  k()
+], m.prototype, "inputId", 2);
+g([
+  k()
+], m.prototype, "isFocused", 2);
+m = g([
+  p("tc-input-with-chip")
+], m);
+var ce = Object.defineProperty, de = Object.getOwnPropertyDescriptor, ut = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? de(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && ce(e, a, t), t;
 };
-let A = class extends d {
+let V = class extends d {
   constructor() {
     super(...arguments), this.gap = "var(--space-md)", this.padding = "var(--space-md)", this.sx = {};
   }
@@ -1637,7 +2173,7 @@ let A = class extends d {
       ...this.sx
     };
     return l`
-      <div part="item" class="item" style=${m(r)}>
+      <div part="item" class="item" style=${f(r)}>
         <div part="prefix" class="prefix">
           <slot name="prefix"></slot>
         </div>
@@ -1651,7 +2187,7 @@ let A = class extends d {
     `;
   }
 };
-A.styles = c`
+V.styles = c`
     :host {
       display: block;
       width: 100%;
@@ -1696,24 +2232,24 @@ A.styles = c`
       display: none;
     }
   `;
-nt([
+ut([
   n({ type: String })
-], A.prototype, "gap", 2);
-nt([
+], V.prototype, "gap", 2);
+ut([
   n({ type: String })
-], A.prototype, "padding", 2);
-nt([
+], V.prototype, "padding", 2);
+ut([
   n({ type: Object })
-], A.prototype, "sx", 2);
-A = nt([
+], V.prototype, "sx", 2);
+V = ut([
   p("tc-item")
-], A);
-var Zt = Object.defineProperty, te = Object.getOwnPropertyDescriptor, F = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? te(e, s) : e, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && Zt(e, s, t), t;
+], V);
+var pe = Object.defineProperty, he = Object.getOwnPropertyDescriptor, R = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? he(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && pe(e, a, t), t;
 };
-let y = class extends d {
+let C = class extends d {
   constructor() {
     super(...arguments), this.gap = "var(--space-md)", this.padding = "var(--space-md)", this.disabled = !1, this.showArrow = !0, this.sx = {};
   }
@@ -1736,7 +2272,7 @@ let y = class extends d {
         part="button"
         class="button"
         ?disabled=${this.disabled}
-        style=${m(r)}
+        style=${f(r)}
         @click=${this.handleClick}
       >
         <div part="prefix" class="prefix">
@@ -1766,7 +2302,7 @@ let y = class extends d {
     `;
   }
 };
-y.styles = c`
+C.styles = c`
     :host {
       display: block;
       width: 100%;
@@ -1852,30 +2388,30 @@ y.styles = c`
       display: none;
     }
   `;
-F([
+R([
   n({ type: String })
-], y.prototype, "gap", 2);
-F([
+], C.prototype, "gap", 2);
+R([
   n({ type: String })
-], y.prototype, "padding", 2);
-F([
+], C.prototype, "padding", 2);
+R([
   n({ type: Boolean })
-], y.prototype, "disabled", 2);
-F([
+], C.prototype, "disabled", 2);
+R([
   n({ type: Boolean, attribute: "show-arrow" })
-], y.prototype, "showArrow", 2);
-F([
+], C.prototype, "showArrow", 2);
+R([
   n({ type: Object })
-], y.prototype, "sx", 2);
-y = F([
+], C.prototype, "sx", 2);
+C = R([
   p("tc-item-button")
-], y);
-var ee = Object.defineProperty, re = Object.getOwnPropertyDescriptor, q = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? re(e, s) : e, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && ee(e, s, t), t;
+], C);
+var ue = Object.defineProperty, ve = Object.getOwnPropertyDescriptor, N = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? ve(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && ue(e, a, t), t;
 };
-let w = class extends d {
+let _ = class extends d {
   constructor() {
     super(...arguments), this.length = 6, this.error = !1, this.disabled = !1, this.showProgress = !0, this.values = [];
   }
@@ -1883,25 +2419,25 @@ let w = class extends d {
     super.connectedCallback(), this.values = new Array(this.length).fill("");
   }
   render() {
-    const e = this.values.filter((s) => s.length > 0).length / this.length * 100;
+    const e = this.values.filter((a) => a.length > 0).length / this.length * 100;
     return l`
       <div class="container">
         <div part="cells" class="cells" role="group" aria-label="OTP input">
-          ${this.values.map((s, i) => {
-      const a = [
+          ${this.values.map((a, i) => {
+      const s = [
         "cell",
-        s.length > 0 ? "cell--filled" : "",
+        a.length > 0 ? "cell--filled" : "",
         this.error ? "cell--error" : ""
       ].filter(Boolean).join(" ");
       return l`
               <input
                 part="cell"
-                class=${a}
+                class=${s}
                 type="text"
                 inputmode="numeric"
                 maxlength="1"
                 pattern="[0-9]"
-                .value=${s}
+                .value=${a}
                 ?disabled=${this.disabled}
                 aria-label="Digit ${i + 1}"
                 @input=${(o) => this.handleInput(o, i)}
@@ -1944,19 +2480,19 @@ let w = class extends d {
   }
   handlePaste(r) {
     r.preventDefault();
-    const s = (r.clipboardData?.getData("text") || "").replace(/\D/g, "").slice(0, this.length);
-    if (s) {
-      this.values = new Array(this.length).fill(""), s.split("").forEach((t, a) => {
-        this.values[a] = t;
+    const a = (r.clipboardData?.getData("text") || "").replace(/\D/g, "").slice(0, this.length);
+    if (a) {
+      this.values = new Array(this.length).fill(""), a.split("").forEach((t, s) => {
+        this.values[s] = t;
       }), this.values = [...this.values];
-      const i = Math.min(s.length, this.length - 1);
+      const i = Math.min(a.length, this.length - 1);
       this.focusCell(i), this.dispatchEvent(
         new CustomEvent("tc-change", {
           bubbles: !0,
           composed: !0,
           detail: { value: this.values.join(""), values: [...this.values] }
         })
-      ), s.length >= this.length && this.dispatchEvent(
+      ), a.length >= this.length && this.dispatchEvent(
         new CustomEvent("tc-complete", {
           bubbles: !0,
           composed: !0,
@@ -1974,7 +2510,7 @@ let w = class extends d {
   }
   /** Focus the first empty cell or the last cell */
   focus() {
-    const r = this.values.findIndex((s) => !s), e = r >= 0 ? r : this.length - 1;
+    const r = this.values.findIndex((a) => !a), e = r >= 0 ? r : this.length - 1;
     this.focusCell(e);
   }
   /** Clear all values */
@@ -1986,8 +2522,8 @@ let w = class extends d {
     return this.values.join("");
   }
 };
-w.styles = [
-  u,
+_.styles = [
+  h,
   c`
       :host {
         display: block;
@@ -2076,30 +2612,30 @@ w.styles = [
       }
     `
 ];
-q([
+N([
   n({ type: Number })
-], w.prototype, "length", 2);
-q([
+], _.prototype, "length", 2);
+N([
   n({ type: Boolean })
-], w.prototype, "error", 2);
-q([
+], _.prototype, "error", 2);
+N([
   n({ type: Boolean })
-], w.prototype, "disabled", 2);
-q([
+], _.prototype, "disabled", 2);
+N([
   n({ type: Boolean, attribute: "show-progress" })
-], w.prototype, "showProgress", 2);
-q([
-  S()
-], w.prototype, "values", 2);
-w = q([
+], _.prototype, "showProgress", 2);
+N([
+  k()
+], _.prototype, "values", 2);
+_ = N([
   p("tc-otp-input")
-], w);
-var ie = Object.defineProperty, se = Object.getOwnPropertyDescriptor, vt = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? se(e, s) : e, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && ie(e, s, t), t;
+], _);
+var me = Object.defineProperty, ge = Object.getOwnPropertyDescriptor, wt = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? ge(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && me(e, a, t), t;
 };
-let X = class extends d {
+let tt = class extends d {
   constructor() {
     super(...arguments), this.gap = "var(--space-md)", this.sx = {};
   }
@@ -2109,13 +2645,13 @@ let X = class extends d {
       ...this.sx
     };
     return l`
-      <section part="section" class="section" style=${m(r)}>
+      <section part="section" class="section" style=${f(r)}>
         <slot></slot>
       </section>
     `;
   }
 };
-X.styles = c`
+tt.styles = c`
     :host {
       display: block;
       width: 100%;
@@ -2127,23 +2663,23 @@ X.styles = c`
       width: 100%;
     }
   `;
-vt([
+wt([
   n({ type: String })
-], X.prototype, "gap", 2);
-vt([
+], tt.prototype, "gap", 2);
+wt([
   n({ type: Object })
-], X.prototype, "sx", 2);
-X = vt([
+], tt.prototype, "sx", 2);
+tt = wt([
   p("tc-section")
-], X);
-var ae = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, mt = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? oe(e, s) : e, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && ae(e, s, t), t;
+], tt);
+var fe = Object.defineProperty, be = Object.getOwnPropertyDescriptor, xt = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? be(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && fe(e, a, t), t;
 };
-let G = class extends d {
+let et = class extends d {
   constructor() {
-    super(...arguments), this.mobile = new Dt(this, "(max-width: 768px)"), this.size = "auto", this.color = "var(--accent-primary)";
+    super(...arguments), this.mobile = new Bt(this, "(max-width: 768px)"), this.size = "auto", this.color = "var(--accent-primary)";
   }
   render() {
     let r;
@@ -2158,8 +2694,8 @@ let G = class extends d {
     `;
   }
 };
-G.styles = [
-  u,
+et.styles = [
+  h,
   c`
       :host {
         display: inline-flex;
@@ -2200,218 +2736,81 @@ G.styles = [
         border-width: var(--size-border-width-heavy);
       }
 
-      .spinner--auto-desktop {
-        width: 5rem;
-        height: 5rem;
-        border-width: var(--size-border-width-bold);
-      }
-    `
-];
-mt([
-  n({ type: String })
-], G.prototype, "size", 2);
-mt([
-  n({ type: String })
-], G.prototype, "color", 2);
-G = mt([
-  p("tc-spinner")
-], G);
-var ne = Object.defineProperty, le = Object.getOwnPropertyDescriptor, lt = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? le(e, s) : e, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && ne(e, s, t), t;
-};
-let M = class extends d {
-  constructor() {
-    super(...arguments), this.size = "3rem", this.background = "var(--paper-cream)", this.color = "var(--ink-dark)";
-  }
-  render() {
-    return l`
-      <div
-        part="symbol"
-        class="symbol"
-        style="--symbol-size: ${this.size}; --symbol-bg: ${this.background}; --symbol-color: ${this.color};"
-      >
-        <slot></slot>
-      </div>
-    `;
-  }
-};
-M.styles = c`
-    :host {
-      display: inline-flex;
-    }
-
-    .symbol {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: var(--radius-full);
-      background: var(--symbol-bg);
-      color: var(--symbol-color);
-      width: var(--symbol-size);
-      height: var(--symbol-size);
-      font-family: var(--font-body);
-      font-weight: 600;
-    }
-  `;
-lt([
-  n({ type: String })
-], M.prototype, "size", 2);
-lt([
-  n({ type: String })
-], M.prototype, "background", 2);
-lt([
-  n({ type: String })
-], M.prototype, "color", 2);
-M = lt([
-  p("tc-symbol")
-], M);
-var ce = Object.defineProperty, de = Object.getOwnPropertyDescriptor, Y = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? de(e, s) : e, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && ce(e, s, t), t;
-};
-let x = class extends d {
-  constructor() {
-    super(...arguments), this.tag = "p", this.sx = {};
-  }
-  getColorClass() {
-    return this.color && {
-      primary: "text--primary",
-      secondary: "text--secondary",
-      tertiary: "text--tertiary",
-      muted: "text--muted",
-      accent: "text--accent",
-      success: "text--success",
-      error: "text--error",
-      warning: "text--warning",
-      info: "text--info"
-    }[this.color] || "";
-  }
-  getColorStyle() {
-    if (this.color && (this.color.startsWith("var(") || this.color.startsWith("#") || this.color.startsWith("rgb")))
-      return this.color;
-  }
-  render() {
-    const r = $t(this.tag), e = [
-      "text",
-      this.size ? `text--${this.size}` : "",
-      this.weight ? `text--w${this.weight}` : "",
-      this.getColorClass()
-    ].filter(Boolean).join(" "), s = this.getColorStyle(), i = {
-      ...s ? { color: s } : {},
-      ...this.sx
-    };
-    return _t`
-      <${r} part="text" class=${e} style=${m(i)}>
-        <slot></slot>
-      </${r}>
-    `;
-  }
-};
-x.styles = [
-  u,
-  c`
-      :host {
-        display: contents;
-      }
-
-      .text {
-        margin: 0;
-        padding: 0;
-        font-family: var(--font-body);
-        line-height: 1.4;
-        color: var(--ink-black);
-      }
-
-      /* Size variants using design-tokens */
-      .text--sm {
-        font-size: var(--font-size-sm);
-      }
-      .text--base {
-        font-size: var(--font-size-base);
-      }
-      .text--lg {
-        font-size: var(--font-size-lg);
-      }
-      .text--xl {
-        font-size: var(--font-size-xl);
-      }
-      .text--2xl {
-        font-size: var(--font-size-2xl);
-      }
-
-      /* Weight variants */
-      .text--w400 {
-        font-weight: 400;
-      }
-      .text--w500 {
-        font-weight: 500;
-      }
-      .text--w600 {
-        font-weight: 600;
-      }
-      .text--w700 {
-        font-weight: 700;
-      }
-
-      /* Color variants using design-tokens - these will respond to theme changes */
-      .text--primary {
-        color: var(--ink-black);
-      }
-      .text--secondary {
-        color: var(--ink-dark);
-      }
-      .text--tertiary {
-        color: var(--ink-medium);
-      }
-      .text--muted {
-        color: var(--ink-light);
-      }
-      .text--accent {
-        color: var(--accent-primary);
-      }
-      .text--success {
-        color: var(--accent-success);
-      }
-      .text--error {
-        color: var(--error-base);
-      }
-      .text--warning {
-        color: var(--semantic-warning);
-      }
-      .text--info {
-        color: var(--semantic-info);
+      .spinner--auto-desktop {
+        width: 5rem;
+        height: 5rem;
+        border-width: var(--size-border-width-bold);
       }
     `
 ];
-Y([
+xt([
   n({ type: String })
-], x.prototype, "tag", 2);
-Y([
+], et.prototype, "size", 2);
+xt([
   n({ type: String })
-], x.prototype, "size", 2);
-Y([
+], et.prototype, "color", 2);
+et = xt([
+  p("tc-spinner")
+], et);
+var ye = Object.defineProperty, we = Object.getOwnPropertyDescriptor, vt = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? we(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && ye(e, a, t), t;
+};
+let q = class extends d {
+  constructor() {
+    super(...arguments), this.size = "3rem", this.background = "var(--paper-cream)", this.color = "var(--ink-dark)";
+  }
+  render() {
+    return l`
+      <div
+        part="symbol"
+        class="symbol"
+        style="--symbol-size: ${this.size}; --symbol-bg: ${this.background}; --symbol-color: ${this.color};"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+q.styles = c`
+    :host {
+      display: inline-flex;
+    }
+
+    .symbol {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--radius-full);
+      background: var(--symbol-bg);
+      color: var(--symbol-color);
+      width: var(--symbol-size);
+      height: var(--symbol-size);
+      font-family: var(--font-body);
+      font-weight: 600;
+    }
+  `;
+vt([
   n({ type: String })
-], x.prototype, "weight", 2);
-Y([
+], q.prototype, "size", 2);
+vt([
   n({ type: String })
-], x.prototype, "color", 2);
-Y([
-  n({ type: Object })
-], x.prototype, "sx", 2);
-x = Y([
-  p("tc-text")
-], x);
-var pe = Object.defineProperty, he = Object.getOwnPropertyDescriptor, tt = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? he(e, s) : e, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && pe(e, s, t), t;
+], q.prototype, "background", 2);
+vt([
+  n({ type: String })
+], q.prototype, "color", 2);
+q = vt([
+  p("tc-symbol")
+], q);
+var xe = Object.defineProperty, ke = Object.getOwnPropertyDescriptor, st = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? ke(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && xe(e, a, t), t;
 };
-let z = class extends d {
+let j = class extends d {
   constructor() {
-    super(...arguments), this.variant = "info", this.duration = 5e3, this.autoDismiss = !0, this.dismissible = !0, this.animation = new j(this, {
+    super(...arguments), this.variant = "info", this.duration = 5e3, this.autoDismiss = !0, this.dismissible = !0, this.animation = new M(this, {
       showDuration: 300,
       hideDuration: 200
     });
@@ -2477,8 +2876,8 @@ let z = class extends d {
     `;
   }
 };
-z.styles = [
-  u,
+j.styles = [
+  h,
   c`
     :host {
       display: block;
@@ -2571,27 +2970,27 @@ z.styles = [
     }
   `
 ];
-tt([
+st([
   n({ type: String })
-], z.prototype, "variant", 2);
-tt([
+], j.prototype, "variant", 2);
+st([
   n({ type: Number })
-], z.prototype, "duration", 2);
-tt([
+], j.prototype, "duration", 2);
+st([
   n({ type: Boolean, attribute: "auto-dismiss" })
-], z.prototype, "autoDismiss", 2);
-tt([
+], j.prototype, "autoDismiss", 2);
+st([
   n({ type: Boolean })
-], z.prototype, "dismissible", 2);
-z = tt([
+], j.prototype, "dismissible", 2);
+j = st([
   p("tc-toast")
-], z);
-var ue = Object.defineProperty, ve = Object.getOwnPropertyDescriptor, et = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? ve(e, s) : e, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && ue(e, s, t), t;
+], j);
+var $e = Object.defineProperty, ze = Object.getOwnPropertyDescriptor, ot = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? ze(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && $e(e, a, t), t;
 };
-let D = class extends d {
+let E = class extends d {
   constructor() {
     super(...arguments), this.title = "Something went wrong", this.message = "An unexpected error occurred. Please try again.", this.retryLabel = "Try Again", this.showRetry = !0;
   }
@@ -2632,12 +3031,13 @@ let D = class extends d {
     `;
   }
 };
-D.styles = c`
+E.styles = c`
     :host {
-      display: block;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       width: 100%;
-      min-height: 100vh;
-      min-height: 100dvh;
+      min-height: inherit;
     }
 
     .screen {
@@ -2645,8 +3045,7 @@ D.styles = c`
       align-items: center;
       justify-content: center;
       width: 100%;
-      min-height: 100vh;
-      min-height: 100dvh;
+      min-height: inherit;
       padding: var(--space-lg);
       box-sizing: border-box;
       background: var(--paper-white);
@@ -2685,29 +3084,29 @@ D.styles = c`
       margin-top: var(--space-md);
     }
   `;
-et([
+ot([
   n({ type: String })
-], D.prototype, "title", 2);
-et([
+], E.prototype, "title", 2);
+ot([
   n({ type: String })
-], D.prototype, "message", 2);
-et([
+], E.prototype, "message", 2);
+ot([
   n({ type: String, attribute: "retry-label" })
-], D.prototype, "retryLabel", 2);
-et([
+], E.prototype, "retryLabel", 2);
+ot([
   n({ type: Boolean, attribute: "show-retry" })
-], D.prototype, "showRetry", 2);
-D = et([
+], E.prototype, "showRetry", 2);
+E = ot([
   p("tc-error-screen")
-], D);
-var me = Object.defineProperty, ge = Object.getOwnPropertyDescriptor, gt = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? ge(e, s) : e, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && me(e, s, t), t;
+], E);
+var Ce = Object.defineProperty, _e = Object.getOwnPropertyDescriptor, kt = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? _e(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && Ce(e, a, t), t;
 };
-let Q = class extends d {
+let rt = class extends d {
   constructor() {
-    super(...arguments), this.message = "", this.spinnerSize = "3rem", this.loading = new zt(this);
+    super(...arguments), this.message = "", this.spinnerSize = "3rem", this.loading = new Et(this);
   }
   connectedCallback() {
     super.connectedCallback(), this.loading.start();
@@ -2729,12 +3128,13 @@ let Q = class extends d {
     `;
   }
 };
-Q.styles = c`
+rt.styles = c`
     :host {
-      display: block;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       width: 100%;
-      min-height: 100vh;
-      min-height: 100dvh;
+      min-height: inherit;
     }
 
     .screen {
@@ -2742,8 +3142,7 @@ Q.styles = c`
       align-items: center;
       justify-content: center;
       width: 100%;
-      min-height: 100vh;
-      min-height: 100dvh;
+      min-height: inherit;
       padding: var(--space-lg);
       box-sizing: border-box;
       background: var(--paper-white);
@@ -2762,23 +3161,23 @@ Q.styles = c`
       max-width: 20rem;
     }
   `;
-gt([
+kt([
   n({ type: String })
-], Q.prototype, "message", 2);
-gt([
+], rt.prototype, "message", 2);
+kt([
   n({ type: String, attribute: "spinner-size" })
-], Q.prototype, "spinnerSize", 2);
-Q = gt([
+], rt.prototype, "spinnerSize", 2);
+rt = kt([
   p("tc-loading-screen")
-], Q);
-var fe = Object.defineProperty, be = Object.getOwnPropertyDescriptor, U = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? be(e, s) : e, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && fe(e, s, t), t;
+], rt);
+var De = Object.defineProperty, Oe = Object.getOwnPropertyDescriptor, K = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? Oe(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && De(e, a, t), t;
 };
-let k = class extends d {
+let D = class extends d {
   constructor() {
-    super(...arguments), this.title = "Success!", this.message = "Your action was completed successfully.", this.actionLabel = "", this.autoAnimate = !0, this.isAnimated = !1, this.animation = new j(this, {
+    super(...arguments), this.title = "Success!", this.message = "Your action was completed successfully.", this.actionLabel = "", this.autoAnimate = !0, this.isAnimated = !1, this.animation = new M(this, {
       showDuration: 600,
       hideDuration: 300
     });
@@ -2839,12 +3238,13 @@ let k = class extends d {
     `;
   }
 };
-k.styles = c`
+D.styles = c`
     :host {
-      display: block;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       width: 100%;
-      min-height: 100vh;
-      min-height: 100dvh;
+      min-height: inherit;
     }
 
     .screen {
@@ -2852,8 +3252,7 @@ k.styles = c`
       align-items: center;
       justify-content: center;
       width: 100%;
-      min-height: 100vh;
-      min-height: 100dvh;
+      min-height: inherit;
       padding: var(--space-lg);
       box-sizing: border-box;
       background: var(--paper-white);
@@ -2939,30 +3338,237 @@ k.styles = c`
       transform: translateY(0);
     }
   `;
-U([
+K([
   n({ type: String })
-], k.prototype, "title", 2);
-U([
+], D.prototype, "title", 2);
+K([
   n({ type: String })
-], k.prototype, "message", 2);
-U([
+], D.prototype, "message", 2);
+K([
   n({ type: String, attribute: "action-label" })
-], k.prototype, "actionLabel", 2);
-U([
+], D.prototype, "actionLabel", 2);
+K([
   n({ type: Boolean, attribute: "auto-animate" })
-], k.prototype, "autoAnimate", 2);
-U([
-  S()
-], k.prototype, "isAnimated", 2);
-k = U([
+], D.prototype, "autoAnimate", 2);
+K([
+  k()
+], D.prototype, "isAnimated", 2);
+D = K([
   p("tc-success-screen")
-], k);
-var ye = Object.defineProperty, we = Object.getOwnPropertyDescriptor, rt = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? we(e, s) : e, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && ye(e, s, t), t;
+], D);
+var Se = Object.defineProperty, Pe = Object.getOwnPropertyDescriptor, I = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? Pe(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && Se(e, a, t), t;
 };
-let O = class extends d {
+let y = class extends d {
+  constructor() {
+    super(...arguments), this.name = "", this.type = "passkey", this.lastUsed = "", this.enabled = !0, this.deletable = !0, this.clickable = !1;
+  }
+  getIconName() {
+    switch (this.type) {
+      case "passkey":
+        return "key";
+      case "totp":
+        return "totp";
+      case "usb":
+        return "device";
+      case "phone":
+        return "phone";
+      case "email":
+        return "email";
+      default:
+        return "key";
+    }
+  }
+  handleCardClick() {
+    this.clickable && this.enabled && this.dispatchEvent(
+      new CustomEvent("tc-click", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  handleDelete(r) {
+    r.stopPropagation(), this.dispatchEvent(
+      new CustomEvent("tc-delete", {
+        bubbles: !0,
+        composed: !0,
+        detail: { name: this.name, type: this.type }
+      })
+    );
+  }
+  render() {
+    const r = {
+      card: !0,
+      clickable: this.clickable && this.enabled,
+      disabled: !this.enabled
+    };
+    return l`
+      <div
+        part="card"
+        class=${b(r)}
+        @click=${this.handleCardClick}
+        role=${this.clickable ? "button" : "article"}
+        tabindex=${this.clickable && this.enabled ? "0" : "-1"}
+      >
+        <div part="icon" class="icon-container">
+          <tc-icon name=${this.getIconName()} size="1.25rem" color="var(--ink-dark)"></tc-icon>
+        </div>
+        <div part="content" class="content">
+          <div part="name" class="name">${this.name}</div>
+          ${this.lastUsed ? l`
+                <div part="meta" class="meta">
+                  <span class="last-used">${this.lastUsed}</span>
+                </div>
+              ` : ""}
+        </div>
+        <div part="actions" class="actions">
+          ${this.enabled ? "" : l`
+                <tc-chip class="status-chip" variant="default" size="sm">Disabled</tc-chip>
+              `}
+          ${this.deletable ? l`
+                <button
+                  part="delete"
+                  class="delete-btn"
+                  @click=${this.handleDelete}
+                  aria-label="Delete ${this.name}"
+                >
+                  <tc-icon name="x" size="1rem"></tc-icon>
+                </button>
+              ` : ""}
+        </div>
+      </div>
+    `;
+  }
+};
+y.styles = c`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    .card {
+      display: flex;
+      align-items: center;
+      gap: var(--space-md);
+      padding: var(--space-md);
+      background: var(--paper-cream);
+      border-radius: var(--radius-md);
+      transition: var(--transition-fast);
+    }
+
+    .card.clickable {
+      cursor: pointer;
+    }
+
+    .card.clickable:hover {
+      background: var(--paper-warm);
+    }
+
+    .card.disabled {
+      opacity: var(--opacity-disabled);
+    }
+
+    .icon-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 2.5rem;
+      height: 2.5rem;
+      background: var(--paper-white);
+      border-radius: var(--radius-md);
+      flex-shrink: 0;
+    }
+
+    .content {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .name {
+      font-weight: 500;
+      color: var(--ink-black);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .meta {
+      display: flex;
+      align-items: center;
+      gap: var(--space-sm);
+      margin-top: var(--space-xs);
+    }
+
+    .last-used {
+      font-size: var(--font-size-sm);
+      color: var(--ink-light);
+    }
+
+    .actions {
+      display: flex;
+      align-items: center;
+      gap: var(--space-sm);
+      flex-shrink: 0;
+    }
+
+    .delete-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 2rem;
+      height: 2rem;
+      padding: 0;
+      background: transparent;
+      border: none;
+      border-radius: var(--radius-sm);
+      color: var(--ink-light);
+      cursor: pointer;
+      transition: var(--transition-fast);
+    }
+
+    .delete-btn:hover {
+      background: var(--alpha-ink04);
+      color: var(--error-base);
+    }
+
+    .delete-btn:focus-visible {
+      outline: 2px solid var(--accent-primary);
+      outline-offset: 2px;
+    }
+
+    .status-chip {
+      flex-shrink: 0;
+    }
+  `;
+I([
+  n({ type: String })
+], y.prototype, "name", 2);
+I([
+  n({ type: String })
+], y.prototype, "type", 2);
+I([
+  n({ type: String, attribute: "last-used" })
+], y.prototype, "lastUsed", 2);
+I([
+  n({ type: Boolean })
+], y.prototype, "enabled", 2);
+I([
+  n({ type: Boolean })
+], y.prototype, "deletable", 2);
+I([
+  n({ type: Boolean })
+], y.prototype, "clickable", 2);
+y = I([
+  p("tc-authenticator-card")
+], y);
+var je = Object.defineProperty, Ee = Object.getOwnPropertyDescriptor, nt = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? Ee(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && je(e, a, t), t;
+};
+let B = class extends d {
   constructor() {
     super(...arguments), this.position = "bottom-right", this.size = "3.5rem", this.disabled = !1, this.sx = {};
   }
@@ -2990,7 +3596,7 @@ let O = class extends d {
         part="button"
         class="button"
         ?disabled=${this.disabled}
-        style=${m(r)}
+        style=${f(r)}
         @click=${this.handleClick}
         aria-label="Floating action"
       >
@@ -2999,8 +3605,8 @@ let O = class extends d {
     `;
   }
 };
-O.styles = [
-  u,
+B.styles = [
+  h,
   c`
     :host {
       display: block;
@@ -3067,32 +3673,32 @@ O.styles = [
     }
   `
 ];
-rt([
+nt([
   n({ type: String })
-], O.prototype, "position", 2);
-rt([
+], B.prototype, "position", 2);
+nt([
   n({ type: String })
-], O.prototype, "size", 2);
-rt([
+], B.prototype, "size", 2);
+nt([
   n({ type: Boolean })
-], O.prototype, "disabled", 2);
-rt([
+], B.prototype, "disabled", 2);
+nt([
   n({ type: Object })
-], O.prototype, "sx", 2);
-O = rt([
+], B.prototype, "sx", 2);
+B = nt([
   p("tc-floating-button")
-], O);
-var xe = Object.defineProperty, ke = Object.getOwnPropertyDescriptor, E = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? ke(e, s) : e, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && xe(e, s, t), t;
+], B);
+var Be = Object.defineProperty, Le = Object.getOwnPropertyDescriptor, T = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? Le(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && Be(e, a, t), t;
 };
-let g = class extends d {
+let w = class extends d {
   constructor() {
-    super(...arguments), this.src = "", this.title = "", this.closeOnEscape = !0, this.closeOnOverlay = !0, this.useHistory = !0, this.isLoading = !0, this.animation = new j(this, {
+    super(...arguments), this.src = "", this.title = "", this.closeOnEscape = !0, this.closeOnOverlay = !0, this.useHistory = !0, this.isLoading = !0, this.animation = new M(this, {
       showDuration: 300,
       hideDuration: 200
-    }), this.history = new Ct(this), this.messageBus = new Ot(this), this.handleKeyDown = (r) => {
+    }), this.history = new jt(this), this.messageBus = new Lt(this), this.handleKeyDown = (r) => {
       r.key === "Escape" && this.animation.state === "visible" && this.close();
     };
   }
@@ -3138,8 +3744,8 @@ let g = class extends d {
     );
   }
   sendMessage(r, e) {
-    const s = this.shadowRoot?.querySelector("iframe");
-    s?.contentWindow && this.messageBus.send(r, e, s.contentWindow);
+    const a = this.shadowRoot?.querySelector("iframe");
+    a?.contentWindow && this.messageBus.send(r, e, a.contentWindow);
   }
   render() {
     return l`
@@ -3185,8 +3791,8 @@ let g = class extends d {
     `;
   }
 };
-g.styles = [
-  u,
+w.styles = [
+  h,
   c`
     :host {
       display: contents;
@@ -3315,38 +3921,38 @@ g.styles = [
     }
   `
 ];
-E([
+T([
   n({ type: String })
-], g.prototype, "src", 2);
-E([
+], w.prototype, "src", 2);
+T([
   n({ type: String })
-], g.prototype, "title", 2);
-E([
+], w.prototype, "title", 2);
+T([
   n({ type: Boolean, attribute: "close-on-escape" })
-], g.prototype, "closeOnEscape", 2);
-E([
+], w.prototype, "closeOnEscape", 2);
+T([
   n({ type: Boolean, attribute: "close-on-overlay" })
-], g.prototype, "closeOnOverlay", 2);
-E([
+], w.prototype, "closeOnOverlay", 2);
+T([
   n({ type: Boolean, attribute: "use-history" })
-], g.prototype, "useHistory", 2);
-E([
-  S()
-], g.prototype, "isLoading", 2);
-g = E([
+], w.prototype, "useHistory", 2);
+T([
+  k()
+], w.prototype, "isLoading", 2);
+w = T([
   p("tc-iframe-modal")
-], g);
-var $e = Object.defineProperty, _e = Object.getOwnPropertyDescriptor, L = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? _e(e, s) : e, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && $e(e, s, t), t;
+], w);
+var Me = Object.defineProperty, Ie = Object.getOwnPropertyDescriptor, A = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? Ie(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && Me(e, a, t), t;
 };
-let f = class extends d {
+let x = class extends d {
   constructor() {
-    super(...arguments), this.title = "Install App", this.description = "Add to your home screen for quick access", this.installLabel = "Install", this.storageKey = "tc-install-banner-dismissed", this.dismissDays = 7, this.isDismissed = !1, this.animation = new j(this, {
+    super(...arguments), this.title = "Install App", this.description = "Add to your home screen for quick access", this.installLabel = "Install", this.storageKey = "tc-install-banner-dismissed", this.dismissDays = 7, this.isDismissed = !1, this.animation = new M(this, {
       showDuration: 400,
       hideDuration: 300
-    }), this.storage = new bt(
+    }), this.storage = new zt(
       this,
       this.storageKey
     );
@@ -3424,8 +4030,8 @@ let f = class extends d {
     `;
   }
 };
-f.styles = [
-  u,
+x.styles = [
+  h,
   c`
     :host {
       display: block;
@@ -3541,39 +4147,39 @@ f.styles = [
     }
   `
 ];
-L([
+A([
   n({ type: String })
-], f.prototype, "title", 2);
-L([
+], x.prototype, "title", 2);
+A([
   n({ type: String })
-], f.prototype, "description", 2);
-L([
+], x.prototype, "description", 2);
+A([
   n({ type: String, attribute: "install-label" })
-], f.prototype, "installLabel", 2);
-L([
+], x.prototype, "installLabel", 2);
+A([
   n({ type: String, attribute: "storage-key" })
-], f.prototype, "storageKey", 2);
-L([
+], x.prototype, "storageKey", 2);
+A([
   n({ type: Number, attribute: "dismiss-days" })
-], f.prototype, "dismissDays", 2);
-L([
-  S()
-], f.prototype, "isDismissed", 2);
-f = L([
+], x.prototype, "dismissDays", 2);
+A([
+  k()
+], x.prototype, "isDismissed", 2);
+x = A([
   p("tc-installation-banner")
-], f);
-var Ce = Object.defineProperty, ze = Object.getOwnPropertyDescriptor, ft = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? ze(e, s) : e, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && Ce(e, s, t), t;
+], x);
+var Te = Object.defineProperty, Ae = Object.getOwnPropertyDescriptor, $t = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? Ae(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && Te(e, a, t), t;
 };
-let J = class extends d {
+let it = class extends d {
   constructor() {
     super(...arguments), this.title = "Install on iOS", this.steps = [
       "Tap the Share button in Safari",
       'Scroll down and tap "Add to Home Screen"',
       'Tap "Add" in the top right corner'
-    ], this.animation = new j(this, {
+    ], this.animation = new M(this, {
       showDuration: 300,
       hideDuration: 200
     });
@@ -3599,11 +4205,11 @@ let J = class extends d {
     r.target === r.currentTarget && this.close();
   }
   renderStep(r, e) {
-    const s = r.split("[share]"), i = s.length > 1 ? l`${s[0]}<svg class="share-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    const a = r.split("[share]"), i = a.length > 1 ? l`${a[0]}<svg class="share-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
               <polyline points="16 6 12 2 8 6"></polyline>
               <line x1="12" y1="2" x2="12" y2="15"></line>
-            </svg>${s[1]}` : r;
+            </svg>${a[1]}` : r;
     return l`
       <div part="step" class="step">
         <span part="step-number" class="step-number">${e + 1}</span>
@@ -3644,8 +4250,8 @@ let J = class extends d {
     `;
   }
 };
-J.styles = [
-  u,
+it.styles = [
+  h,
   c`
     :host {
       display: contents;
@@ -3786,26 +4392,26 @@ J.styles = [
     }
   `
 ];
-ft([
+$t([
   n({ type: String })
-], J.prototype, "title", 2);
-ft([
+], it.prototype, "title", 2);
+$t([
   n({ type: Array })
-], J.prototype, "steps", 2);
-J = ft([
+], it.prototype, "steps", 2);
+it = $t([
   p("tc-ios-installation-guide")
-], J);
-var De = Object.defineProperty, Oe = Object.getOwnPropertyDescriptor, H = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? Oe(e, s) : e, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && De(e, s, t), t;
+], it);
+var Fe = Object.defineProperty, He = Object.getOwnPropertyDescriptor, W = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? He(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && Fe(e, a, t), t;
 };
-let $ = class extends d {
+let O = class extends d {
   constructor() {
-    super(...arguments), this.title = "Enable Notifications", this.description = "Stay updated with important alerts and messages.", this.allowLabel = "Allow", this.denyLabel = "Not Now", this.storageKey = "tc-notification-modal-state", this.animation = new j(this, {
+    super(...arguments), this.title = "Enable Notifications", this.description = "Stay updated with important alerts and messages.", this.allowLabel = "Allow", this.denyLabel = "Not Now", this.storageKey = "tc-notification-modal-state", this.animation = new M(this, {
       showDuration: 300,
       hideDuration: 200
-    }), this.storage = new bt(this, this.storageKey);
+    }), this.storage = new zt(this, this.storageKey);
   }
   connectedCallback() {
     super.connectedCallback(), this.updateDataState();
@@ -3897,8 +4503,8 @@ let $ = class extends d {
     `;
   }
 };
-$.styles = [
-  u,
+O.styles = [
+  h,
   c`
     :host {
       display: contents;
@@ -3999,32 +4605,32 @@ $.styles = [
     }
   `
 ];
-H([
+W([
   n({ type: String })
-], $.prototype, "title", 2);
-H([
+], O.prototype, "title", 2);
+W([
   n({ type: String })
-], $.prototype, "description", 2);
-H([
+], O.prototype, "description", 2);
+W([
   n({ type: String, attribute: "allow-label" })
-], $.prototype, "allowLabel", 2);
-H([
+], O.prototype, "allowLabel", 2);
+W([
   n({ type: String, attribute: "deny-label" })
-], $.prototype, "denyLabel", 2);
-H([
+], O.prototype, "denyLabel", 2);
+W([
   n({ type: String, attribute: "storage-key" })
-], $.prototype, "storageKey", 2);
-$ = H([
+], O.prototype, "storageKey", 2);
+O = W([
   p("tc-notification-modal")
-], $);
-var Se = Object.defineProperty, Pe = Object.getOwnPropertyDescriptor, R = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? Pe(e, s) : e, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && Se(e, s, t), t;
+], O);
+var Ve = Object.defineProperty, qe = Object.getOwnPropertyDescriptor, X = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? qe(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && Ve(e, a, t), t;
 };
-let _ = class extends d {
+let S = class extends d {
   constructor() {
-    super(...arguments), this.title = "No Connection", this.description = "Please check your internet connection and try again.", this.retryLabel = "Try Again", this.autoDetect = !0, this.isOffline = !1, this.animation = new j(this, {
+    super(...arguments), this.title = "No Connection", this.description = "Please check your internet connection and try again.", this.retryLabel = "Try Again", this.autoDetect = !0, this.isOffline = !1, this.animation = new M(this, {
       showDuration: 300,
       hideDuration: 200
     }), this.handleOnline = () => {
@@ -4110,8 +4716,8 @@ let _ = class extends d {
     `;
   }
 };
-_.styles = [
-  u,
+S.styles = [
+  h,
   c`
     :host {
       display: contents;
@@ -4194,30 +4800,30 @@ _.styles = [
     }
   `
 ];
-R([
+X([
   n({ type: String })
-], _.prototype, "title", 2);
-R([
+], S.prototype, "title", 2);
+X([
   n({ type: String })
-], _.prototype, "description", 2);
-R([
+], S.prototype, "description", 2);
+X([
   n({ type: String, attribute: "retry-label" })
-], _.prototype, "retryLabel", 2);
-R([
+], S.prototype, "retryLabel", 2);
+X([
   n({ type: Boolean, attribute: "auto-detect" })
-], _.prototype, "autoDetect", 2);
-R([
-  S()
-], _.prototype, "isOffline", 2);
-_ = R([
+], S.prototype, "autoDetect", 2);
+X([
+  k()
+], S.prototype, "isOffline", 2);
+S = X([
   p("tc-offline-modal")
-], _);
-var je = Object.defineProperty, Ee = Object.getOwnPropertyDescriptor, xt = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? Ee(e, s) : e, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
-  return i && t && je(e, s, t), t;
+], S);
+var Ye = Object.defineProperty, Ue = Object.getOwnPropertyDescriptor, Dt = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? Ue(e, a) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = (i ? o(e, a, t) : o(t)) || t);
+  return i && t && Ye(e, a, t), t;
 };
-let at = class extends d {
+let dt = class extends d {
   constructor() {
     super(...arguments), this.variant = "primary";
   }
@@ -4231,8 +4837,8 @@ let at = class extends d {
     `;
   }
 };
-at.styles = [
-  u,
+dt.styles = [
+  h,
   c`
     :host {
       position: fixed;
@@ -4326,47 +4932,50 @@ at.styles = [
     }
   `
 ];
-xt([
+Dt([
   n({ type: String })
-], at.prototype, "variant", 2);
-at = xt([
+], dt.prototype, "variant", 2);
+dt = Dt([
   p("tc-page-decoration")
-], at);
+], dt);
 export {
-  j as AnimationController,
-  P as BaseController,
-  Fe as FormValidationController,
-  Ct as HistoryController,
-  zt as LoadingController,
-  Dt as MatchMediaController,
-  Ot as MessageBusController,
-  bt as StorageController,
-  it as TcBox,
-  C as TcButton,
-  st as TcCallout,
-  N as TcCard,
-  K as TcChip,
-  V as TcContainer,
-  W as TcDivider,
-  D as TcErrorScreen,
-  O as TcFloatingButton,
-  b as TcFormHeader,
-  T as TcIcon,
-  g as TcIframeModal,
-  h as TcInput,
-  f as TcInstallationBanner,
-  J as TcIosInstallationGuide,
-  A as TcItem,
-  y as TcItemButton,
-  Q as TcLoadingScreen,
-  $ as TcNotificationModal,
-  _ as TcOfflineModal,
-  w as TcOtpInput,
-  at as TcPageDecoration,
-  X as TcSection,
-  G as TcSpinner,
-  k as TcSuccessScreen,
-  M as TcSymbol,
-  x as TcText,
-  z as TcToast
+  M as AnimationController,
+  L as BaseController,
+  Ge as FormValidationController,
+  jt as HistoryController,
+  Et as LoadingController,
+  Bt as MatchMediaController,
+  Lt as MessageBusController,
+  zt as StorageController,
+  y as TcAuthenticatorCard,
+  lt as TcBox,
+  P as TcButton,
+  ct as TcCallout,
+  G as TcCard,
+  Q as TcChip,
+  J as TcContainer,
+  F as TcDivider,
+  Z as TcErrorMessage,
+  E as TcErrorScreen,
+  B as TcFloatingButton,
+  z as TcFormHeader,
+  H as TcIcon,
+  w as TcIframeModal,
+  u as TcInput,
+  m as TcInputWithChip,
+  x as TcInstallationBanner,
+  it as TcIosInstallationGuide,
+  V as TcItem,
+  C as TcItemButton,
+  rt as TcLoadingScreen,
+  O as TcNotificationModal,
+  S as TcOfflineModal,
+  _ as TcOtpInput,
+  dt as TcPageDecoration,
+  tt as TcSection,
+  et as TcSpinner,
+  D as TcSuccessScreen,
+  q as TcSymbol,
+  $ as TcText,
+  j as TcToast
 };