@transcodes/ui-components 0.2.0 → 0.3.1

package/dist/ui-components.js

@@ -1,4468 +0,0 @@
-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 M } from "lit/directives/class-map.js";
-import { unsafeStatic as $t, html as zt } from "lit/static-html.js";
-class P {
-  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);
-  }
-  get state() {
-    return this._state;
-  }
-  get isVisible() {
-    return this._state === "visible" || this._state === "showing";
-  }
-  get isHidden() {
-    return this._state === "hidden";
-  }
-  async show() {
-    this._state === "visible" || this._state === "showing" || (this._state = "showing", this.host.requestUpdate(), await this.waitForTransition(this.showDuration), this._state = "visible", this.host.requestUpdate());
-  }
-  async hide() {
-    this._state === "hidden" || this._state === "hiding" || (this._state = "hiding", this.host.requestUpdate(), await this.waitForTransition(this.hideDuration), this._state = "hidden", this.host.requestUpdate());
-  }
-  toggle() {
-    return this.isVisible ? this.hide() : this.show();
-  }
-  waitForTransition(e) {
-    return new Promise((s) => {
-      setTimeout(s, e);
-    });
-  }
-}
-class He extends P {
-  constructor() {
-    super(...arguments), this.errors = /* @__PURE__ */ new Map();
-  }
-  get isValid() {
-    return this.errors.size === 0;
-  }
-  getError(e) {
-    return this.errors.get(e);
-  }
-  getAllErrors() {
-    return new Map(this.errors);
-  }
-  validate(e, s, i) {
-    this.clearError(e);
-    for (const t of i)
-      if (!this.runRule(s, t))
-        return this.errors.set(e, t.message), this.host.requestUpdate(), !1;
-    return !0;
-  }
-  clearError(e) {
-    this.errors.has(e) && (this.errors.delete(e), this.host.requestUpdate());
-  }
-  reset() {
-    this.errors.clear(), this.host.requestUpdate();
-  }
-  runRule(e, s) {
-    switch (s.type) {
-      case "required":
-        return e.trim().length > 0;
-      case "email":
-        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
-      case "minLength":
-        return e.length >= s.value;
-      case "maxLength":
-        return e.length <= s.value;
-      case "pattern":
-        return s.value.test(e);
-      case "custom":
-        return s.validator ? s.validator(e) : !0;
-      default:
-        return !0;
-    }
-  }
-}
-class Ct extends P {
-  constructor() {
-    super(...arguments), this.hasAddedEntry = !1, this.handlePopState = () => {
-      this.hasAddedEntry && (this.hasAddedEntry = !1, this.onPopCallback?.());
-    };
-  }
-  push(e = { modal: !0 }) {
-    this.hasAddedEntry || (history.pushState(e, ""), this.hasAddedEntry = !0);
-  }
-  pop() {
-    this.hasAddedEntry && (this.hasAddedEntry = !1);
-  }
-  onPopState(e) {
-    this.onPopCallback = e;
-  }
-  hostConnected() {
-    window.addEventListener("popstate", this.handlePopState);
-  }
-  hostDisconnected() {
-    window.removeEventListener("popstate", this.handlePopState), this.onPopCallback = void 0;
-  }
-}
-class _t extends P {
-  constructor() {
-    super(...arguments), this._isLoading = !1, this._progress = 0;
-  }
-  get isLoading() {
-    return this._isLoading;
-  }
-  get progress() {
-    return this._progress;
-  }
-  start() {
-    this._isLoading = !0, this._progress = 0, this.host.requestUpdate();
-  }
-  setProgress(e) {
-    this._progress = Math.max(0, Math.min(100, e)), this.host.requestUpdate();
-  }
-  complete() {
-    this._progress = 100, this._isLoading = !1, this.host.requestUpdate();
-  }
-  reset() {
-    this._isLoading = !1, this._progress = 0, this.host.requestUpdate();
-  }
-}
-class Dt extends P {
-  constructor(e, s) {
-    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;
-  }
-  get matches() {
-    return this._matches;
-  }
-  hostConnected() {
-    this.mediaQuery.addEventListener("change", this.handleChange);
-  }
-  hostDisconnected() {
-    this.mediaQuery.removeEventListener("change", this.handleChange);
-  }
-}
-class Ot extends P {
-  /**
-   * @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 = "*") {
-    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((dt) => {
-          dt(a);
-        }), this.wildcardHandlers.forEach((dt) => {
-          dt(t, a);
-        });
-      }
-    }, this.targetOrigin = s, s === "*" && 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);
-  }
-  sendToFrame(e, s, i) {
-    e.contentWindow?.postMessage({ type: s, 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);
-    });
-  }
-  hostConnected() {
-    window.addEventListener("message", this.handleMessage);
-  }
-  hostDisconnected() {
-    window.removeEventListener("message", this.handleMessage), this.handlers.clear();
-  }
-}
-class bt extends P {
-  constructor(e, s, 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();
-  }
-  get value() {
-    return this._value;
-  }
-  set(e) {
-    this._value = e;
-    try {
-      this.storage.setItem(this.key, JSON.stringify(e));
-    } catch {
-      console.warn(`Failed to save to storage: ${this.key}`);
-    }
-    this.host.requestUpdate();
-  }
-  remove() {
-    this._value = null, this.storage.removeItem(this.key), this.host.requestUpdate();
-  }
-  load() {
-    try {
-      const e = this.storage.getItem(this.key);
-      e !== null && (this._value = JSON.parse(e));
-    } catch {
-      this._value = null;
-    }
-  }
-  hostConnected() {
-    window.addEventListener("storage", this.handleStorageChange);
-  }
-  hostDisconnected() {
-    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;
-};
-let it = class extends d {
-  constructor() {
-    super(...arguments), this.sx = {};
-  }
-  render() {
-    return l`
-      <div part="box" class="box" style=${m(this.sx)}>
-        <slot></slot>
-      </div>
-    `;
-  }
-};
-it.styles = c`
-    :host {
-      display: contents;
-    }
-
-    .box {
-      display: block;
-    }
-  `;
-yt([
-  n({ type: Object })
-], it.prototype, "sx", 2);
-it = yt([
-  p("tc-box")
-], it);
-const jt = `/**
- * Do not edit directly, this file was auto-generated.
- */
-
-/* Animations */
-@keyframes fadeInUp {
-  0% {
-    opacity: 0;
-    transform: translateY(1rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideDown {
-  0% {
-    opacity: 0;
-    transform: translateY(-0.5rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideUp {
-  0% {
-    opacity: 0;
-    transform: translateY(0.5rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes shake {
-  0%, 100% {
-    transform: translateX(0);
-  }
-  25% {
-    transform: translateX(-0.25rem);
-  }
-  75% {
-    transform: translateX(0.25rem);
-  }
-}
-
-@keyframes inkFloat {
-  0%, 100% {
-    transform: translate(0, 0) scale(1);
-    opacity: 0.5;
-  }
-  50% {
-    transform: translate(0.625rem, -0.625rem) scale(1.1);
-    opacity: 0.7;
-  }
-}
-
-@keyframes inkDrift {
-  0%, 100% {
-    transform: translate(0, 0) rotate(0deg);
-    opacity: 0.4;
-  }
-  33% {
-    transform: translate(-0.5rem, 0.5rem) rotate(-5deg);
-    opacity: 0.6;
-  }
-  66% {
-    transform: translate(0.375rem, -0.375rem) rotate(3deg);
-    opacity: 0.5;
-  }
-}
-
-@keyframes inkSpread {
-  0% {
-    transform: scale(0);
-    opacity: 0.4;
-  }
-  100% {
-    transform: scale(var(--ink-effect-spread-scale, 2.5));
-    opacity: 0;
-  }
-}
-
-/* Page Layout */
-.page-container {
-  position: relative;
-  width: 100%;
-  max-width: var(--page-container-max-width);
-  margin: 0 auto;
-  padding: 0 var(--page-container-padding);
-  animation: fadeInUp 600ms var(--transition-smooth) both;
-}
-
-.page-container--wide {
-  max-width: var(--page-container-max-width-wide);
-}
-
-.page-card {
-  background: var(--paper-white);
-  padding: var(--page-card-padding);
-  border-radius: var(--page-card-radius);
-  box-shadow: var(--shadow-card);
-  position: relative;
-  overflow: hidden;
-}
-
-.page-card::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  padding: var(--space-fixed-2xs);
-  background: linear-gradient(135deg, var(--alpha-primary08) 0%, transparent 50%, var(--alpha-primary04) 100%);
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  mask-composite: exclude;
-  pointer-events: none;
-}
-
-.page-card--centered {
-  text-align: center;
-}
-
-/* Page Decoration - Ink effect backgrounds */
-.page-decoration {
-  position: absolute;
-  border-radius: 50%;
-  filter: blur(3.75rem);
-  pointer-events: none;
-  z-index: 0;
-}
-
-.page-decoration--primary {
-  background: var(--alpha-primary15);
-}
-
-.page-decoration--success {
-  background: var(--alpha-success15);
-}
-
-.page-decoration--float {
-  animation: inkFloat 4s ease-in-out infinite;
-}
-
-.page-decoration--drift {
-  animation: inkDrift 5s ease-in-out infinite;
-}
-
-/* Buttons */
-.button {
-  height: var(--button-height);
-  padding: 0 var(--space-lg);
-  font-family: var(--font-body);
-  font-size: var(--button-font-size);
-  font-weight: var(--button-font-weight);
-  letter-spacing: var(--button-letter-spacing);
-  border: var(--space-fixed-2xs) solid transparent;
-  border-radius: var(--button-radius);
-  cursor: pointer;
-  transition: background var(--transition-fast), transform var(--transition-fast);
-}
-
-.button-primary {
-  background: var(--accent-primary);
-  color: var(--paper-white);
-}
-
-.button-primary:hover:not(:disabled) {
-  background: var(--accent-primary-hover);
-  box-shadow: var(--shadow-button-hover-primary);
-  transform: translateY(calc(-1 * var(--space-fixed-2xs)));
-}
-
-.button-success {
-  background: var(--accent-success);
-  color: var(--paper-white);
-}
-
-.button-success:hover:not(:disabled) {
-  background: var(--accent-success-hover);
-  box-shadow: var(--shadow-button-hover-success);
-  transform: translateY(calc(-1 * var(--space-fixed-2xs)));
-}
-
-.button-secondary {
-  height: var(--button-height-secondary);
-  background: transparent;
-  color: var(--ink-dark);
-  border: var(--space-fixed-2xs) solid var(--ink-faint);
-}
-
-.button-secondary:hover:not(:disabled) {
-  color: var(--accent-primary);
-  border-color: var(--accent-primary);
-  background: var(--alpha-primary04);
-}
-
-.button:disabled {
-  cursor: not-allowed;
-  opacity: 0.7;
-}
-
-/* Text Button */
-.text-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: var(--button-text-height);
-  padding: var(--space-sm) var(--space-md);
-  font-family: var(--font-body);
-  font-size: var(--button-text-font-size);
-  font-weight: 500;
-  color: var(--ink-dark);
-  background: transparent;
-  border: none;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: background var(--transition-fast), color var(--transition-fast);
-}
-
-.text-button:hover {
-  background: var(--paper-cream);
-  color: var(--accent-primary);
-}
-
-.text-button-sm {
-  height: auto;
-  padding: var(--space-xs) var(--space-sm);
-  font-size: 0.8125rem;
-}
-
-.text-button-md {
-  height: auto;
-  padding: var(--space-sm) var(--space-md);
-}
-
-/* Button Content Layout */
-.button-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--button-content-gap);
-}
-
-.button-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.button-text {
-  flex: 1;
-  text-align: center;
-}
-
-/* Button Spinner */
-.button-spinner {
-  width: var(--button-spinner-size);
-  height: var(--button-spinner-size);
-  border: var(--button-spinner-border-width) solid currentColor;
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: spin 600ms linear infinite;
-}
-
-/* Button Ink Ripple Effect */
-.button-ink {
-  position: relative;
-  overflow: hidden;
-}
-
-.button-ink::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 21.875rem;
-  height: 21.875rem;
-  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, transparent 70%);
-  transform: translate(-50%, -50%) scale(0);
-  border-radius: 50%;
-  pointer-events: none;
-  transition: transform var(--ink-effect-ripple-duration, 600ms) var(--ink-effect-ripple-easing, cubic-bezier(0.4, 0, 0.2, 1)),
-              opacity var(--ink-effect-fade-duration, 300ms) ease;
-  opacity: 0;
-}
-
-.button-ink:hover::after {
-  transform: translate(-50%, -50%) scale(1);
-  opacity: 1;
-}
-
-.button-ink:active::after {
-  transform: translate(-50%, -50%) scale(0.8);
-  opacity: 0.8;
-}
-
-/* Card */
-.card {
-  background: var(--paper-white);
-  padding: var(--card-padding);
-  border-radius: var(--card-radius);
-  box-shadow: var(--shadow-card);
-  position: relative;
-  overflow: hidden;
-}
-
-/* Container */
-.container {
-  position: relative;
-  width: 100%;
-  max-width: var(--container-max-width);
-}
-
-.container-wide {
-  max-width: var(--container-max-width-wide);
-}
-
-/* Form Layout */
-.form-header {
-  text-align: center;
-  margin-bottom: var(--form-header-margin-bottom);
-}
-
-.form-title {
-  font-family: var(--font-body);
-  font-size: var(--title-font-size);
-  font-weight: var(--title-font-weight);
-  color: var(--ink-black);
-  letter-spacing: var(--title-letter-spacing);
-  animation: slideDown 400ms var(--transition-smooth) 200ms both;
-}
-
-.form-subtitle {
-  font-size: var(--form-subtitle-font-size);
-  color: var(--ink-medium);
-  margin-top: var(--space-sm);
-  animation: fadeInUp 400ms var(--transition-smooth) 400ms both;
-}
-
-.form-fields {
-  display: flex;
-  flex-direction: column;
-  gap: var(--form-fields-gap);
-}
-
-.form-footer {
-  margin-top: var(--form-footer-margin-top);
-  text-align: center;
-  animation: fadeInUp 400ms var(--transition-smooth) 600ms both;
-}
-
-/* Field Group */
-.field-group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--field-group-gap);
-}
-
-.field-label {
-  display: block;
-  font-size: var(--label-font-size);
-  font-weight: var(--label-font-weight);
-  text-transform: uppercase;
-  letter-spacing: var(--label-letter-spacing);
-  color: var(--ink-medium);
-  transition: color var(--transition-fast);
-}
-
-.field-group.focused .field-label {
-  color: var(--accent-primary);
-}
-
-.required-mark {
-  color: var(--accent-primary);
-  margin-left: var(--space-2xs);
-}
-
-/* Input */
-.input {
-  width: 100%;
-  padding: var(--input-padding-y) var(--input-padding-x);
-  font-family: var(--font-body);
-  font-size: var(--input-font-size);
-  color: var(--ink-black);
-  background: var(--paper-cream);
-  border: var(--space-fixed-2xs) solid transparent;
-  border-radius: var(--input-radius);
-  transition: background var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);
-}
-
-.input::placeholder {
-  color: var(--ink-faint);
-}
-
-.input:hover {
-  background: var(--paper-warm);
-}
-
-.input:focus {
-  outline: none;
-  background: var(--paper-white);
-  border-color: var(--ink-faint);
-  box-shadow: var(--shadow-input-focus);
-}
-
-/* Label */
-.label {
-  display: block;
-  font-size: var(--label-font-size);
-  font-weight: var(--label-font-weight);
-  text-transform: uppercase;
-  letter-spacing: var(--label-letter-spacing);
-  color: var(--ink-medium);
-  margin-bottom: var(--space-sm);
-  transition: color var(--transition-fast);
-}
-
-/* Title */
-.title {
-  font-family: var(--font-body);
-  font-size: var(--title-font-size);
-  font-weight: var(--title-font-weight);
-  color: var(--ink-black);
-  letter-spacing: var(--title-letter-spacing);
-}
-
-/* Feedback */
-.error-message {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--feedback-error-gap);
-  padding: var(--feedback-error-padding);
-  background: var(--error-bg);
-  border: var(--space-fixed-2xs) solid var(--error-border);
-  border-radius: var(--feedback-error-radius);
-  color: var(--error-base);
-  animation: slideDown 300ms var(--transition-smooth) both;
-}
-
-.error-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: var(--feedback-error-icon-size);
-  height: var(--feedback-error-icon-size);
-  color: var(--error-base);
-}
-
-.error-message.shake {
-  animation: shake 400ms var(--transition-smooth);
-}
-
-/* Notice */
-.notice {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--feedback-notice-gap);
-  padding: var(--feedback-notice-padding);
-  border-radius: var(--feedback-notice-radius);
-  animation: slideUp 400ms var(--transition-smooth) both;
-}
-
-.notice-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: var(--feedback-notice-icon-size);
-  height: var(--feedback-notice-icon-size);
-}
-
-.notice-success {
-  background: rgba(53, 122, 70, 0.08);
-  border: var(--space-fixed-2xs) solid rgba(53, 122, 70, 0.2);
-  color: var(--accent-success);
-}
-
-.notice-warning {
-  background: rgba(180, 83, 9, 0.08);
-  border: var(--space-fixed-2xs) solid rgba(180, 83, 9, 0.2);
-  color: var(--semantic-warning);
-}
-
-.notice-info {
-  background: rgba(3, 105, 161, 0.08);
-  border: var(--space-fixed-2xs) solid rgba(3, 105, 161, 0.2);
-  color: var(--semantic-info);
-}
-`, u = kt(jt);
-var Et = Object.defineProperty, Bt = Object.getOwnPropertyDescriptor, Z = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? Bt(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;
-};
-let C = class extends d {
-  constructor() {
-    super(...arguments), this.disabled = !1, this.loading = !1, this.variant = "primary", this.sx = {};
-  }
-  render() {
-    const r = {
-      button: !0,
-      "button-ink": this.variant !== "secondary",
-      "button-primary": this.variant === "primary",
-      "button-secondary": this.variant === "secondary",
-      "button-success": this.variant === "success",
-      "button--loading": this.loading
-    };
-    return l`
-      <button
-        part="button"
-        class=${M(r)}
-        style=${m(this.sx)}
-        ?disabled=${this.disabled || this.loading}
-        type="button"
-        @click=${this.handleClick}
-      >
-        <span class="button-content">
-          ${this.loading ? l`<div part="spinner" class="button-spinner"></div>` : ""}
-          <slot></slot>
-        </span>
-      </button>
-    `;
-  }
-  handleClick(r) {
-    this.disabled || this.loading || this.dispatchEvent(
-      new CustomEvent("tc-click", {
-        bubbles: !0,
-        composed: !0,
-        detail: { originalEvent: r }
-      })
-    );
-  }
-};
-C.styles = [
-  u,
-  c`
-      :host {
-        display: block;
-        width: 100%;
-      }
-
-      /* Extend base .button from design-tokens */
-      .button {
-        position: relative;
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: var(--space-sm);
-        overflow: hidden;
-      }
-
-      /* Radial gradient glow overlay for primary/success */
-      .button-ink::before {
-        content: '';
-        position: absolute;
-        inset: 0;
-        border-radius: inherit;
-        background: radial-gradient(
-          circle at center,
-          transparent 0%,
-          var(--overlay-glow-white) 100%
-        );
-        opacity: var(--opacity-hidden);
-        transition: opacity 600ms ease;
-        pointer-events: none;
-      }
-
-      .button-ink:hover:not(:disabled)::before {
-        opacity: 1;
-      }
-
-      /* Loading pulse animation */
-      .button--loading {
-        animation: pulse 1s ease-in-out infinite;
-      }
-
-      @keyframes pulse {
-        0%,
-        100% {
-          opacity: var(--opacity-visible);
-        }
-        50% {
-          opacity: var(--opacity-loading);
-        }
-      }
-
-      /* Active states - design-tokens doesn't include these */
-      .button-primary:active:not(:disabled) {
-        background: var(--accent-primary-pressed);
-        transform: translateY(0);
-        box-shadow: none;
-      }
-
-      .button-success:active:not(:disabled) {
-        background: var(--accent-success-pressed);
-        transform: translateY(0);
-        box-shadow: none;
-      }
-
-      .button-secondary:active:not(:disabled) {
-        background: var(--alpha-primary08);
-      }
-
-      /* Secondary spinner override */
-      .button-secondary .button-spinner {
-        border-color: var(--alpha-primary30);
-        border-top-color: var(--accent-primary);
-      }
-
-      /* Focus visible state */
-      .button:focus-visible {
-        outline: var(--size-border-width-thick) solid var(--accent-primary);
-        outline-offset: var(--size-border-width-thick);
-      }
-
-      /* Reduced motion */
-      @media (prefers-reduced-motion: reduce) {
-        .button,
-        .button-ink::before {
-          transition-duration: 0.01ms !important;
-        }
-
-        .button--loading {
-          animation: none;
-        }
-
-        .button-spinner {
-          animation-duration: 1.5s;
-        }
-      }
-    `
-];
-Z([
-  n({ type: Boolean })
-], C.prototype, "disabled", 2);
-Z([
-  n({ type: Boolean })
-], C.prototype, "loading", 2);
-Z([
-  n({ type: String })
-], C.prototype, "variant", 2);
-Z([
-  n({ type: Object })
-], C.prototype, "sx", 2);
-C = Z([
-  p("tc-button")
-], C);
-var Mt = Object.defineProperty, Lt = Object.getOwnPropertyDescriptor, wt = (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 && Mt(e, s, t), t;
-};
-let st = class extends d {
-  constructor() {
-    super(...arguments), this.variant = "info";
-  }
-  render() {
-    const r = this.variant === "error", e = {
-      notice: !r,
-      "notice-info": this.variant === "info",
-      "notice-success": this.variant === "success",
-      "notice-warning": this.variant === "warning",
-      "error-message": r
-    };
-    return l`
-      <div part="callout" class=${M(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,
-  c`
-      :host {
-        display: block;
-        width: 100%;
-      }
-
-      /* Override animation from design-tokens for immediate display */
-      .notice {
-        animation: none;
-      }
-
-      /* Error variant uses error-message class from design-tokens */
-      .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([
-  n({ type: String })
-], st.prototype, "variant", 2);
-st = wt([
-  p("tc-callout")
-], st);
-var Tt = Object.defineProperty, At = Object.getOwnPropertyDescriptor, pt = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? At(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 && Tt(e, s, t), t;
-};
-let K = class extends d {
-  constructor() {
-    super(...arguments), this.noBorder = !1, this.sx = {};
-  }
-  render() {
-    const r = {
-      card: !0,
-      "card--no-border": this.noBorder
-    };
-    return l`
-      <div part="card" class=${M(r)} style=${m(this.sx)}>
-        <div class="card-content">
-          <slot></slot>
-        </div>
-      </div>
-    `;
-  }
-};
-K.styles = [
-  u,
-  c`
-      :host {
-        display: block;
-      }
-
-      /* Inner border effect using mask - extends design-tokens .card */
-      .card::before {
-        content: '';
-        position: absolute;
-        inset: 0;
-        border-radius: inherit;
-        padding: 0.0625rem;
-        background: linear-gradient(
-          180deg,
-          var(--alpha-white90) 0%,
-          var(--alpha-white30) 100%
-        );
-        mask:
-          linear-gradient(#fff 0 0) content-box,
-          linear-gradient(#fff 0 0);
-        mask-composite: exclude;
-        pointer-events: none;
-      }
-
-      .card--no-border::before {
-        display: none;
-      }
-
-      .card-content {
-        position: relative;
-        z-index: 1;
-      }
-    `
-];
-pt([
-  n({ type: Boolean, attribute: "no-border" })
-], K.prototype, "noBorder", 2);
-pt([
-  n({ type: Object })
-], K.prototype, "sx", 2);
-K = pt([
-  p("tc-card")
-], K);
-var It = Object.defineProperty, Ht = Object.getOwnPropertyDescriptor, ht = (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 && It(e, s, t), t;
-};
-let N = class extends d {
-  constructor() {
-    super(...arguments), this.variant = "default", this.size = "md";
-  }
-  render() {
-    return l`
-      <span part="chip" class="chip chip--${this.variant} chip--${this.size}">
-        <slot></slot>
-      </span>
-    `;
-  }
-};
-N.styles = [
-  u,
-  c`
-      :host {
-        display: inline-flex;
-      }
-
-      .chip {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: var(--radius-full);
-        font-family: var(--font-body);
-        font-weight: 500;
-      }
-
-      .chip--sm {
-        padding: var(--size-chip-padding-sm);
-        font-size: var(--font-size-xs);
-      }
-
-      .chip--md {
-        padding: var(--size-chip-padding-md);
-        font-size: var(--font-size-sm);
-      }
-
-      .chip--default {
-        background: var(--paper-cream);
-        color: var(--ink-dark);
-      }
-
-      .chip--success {
-        background: var(--alpha-success15);
-        color: var(--accent-success);
-      }
-
-      .chip--error {
-        background: var(--error-bg);
-        color: var(--error-base);
-      }
-
-      .chip--info {
-        background: var(--alpha-primary10);
-        color: var(--accent-primary);
-      }
-    `
-];
-ht([
-  n({ type: String })
-], N.prototype, "variant", 2);
-ht([
-  n({ type: String })
-], N.prototype, "size", 2);
-N = ht([
-  p("tc-chip")
-], N);
-var Ft = Object.defineProperty, Vt = Object.getOwnPropertyDescriptor, ut = (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 && Ft(e, s, t), t;
-};
-let W = class extends d {
-  constructor() {
-    super(...arguments), this.wide = !1, this.sx = {}, this.defaultStyles = {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      justifyContent: "flex-start"
-    };
-  }
-  render() {
-    const r = {
-      ...this.defaultStyles,
-      ...this.sx
-    };
-    return l`
-      <div
-        part="container"
-        class="container ${this.wide ? "container--wide" : ""}"
-        style=${m(r)}
-      >
-        <slot></slot>
-      </div>
-    `;
-  }
-};
-W.styles = c`
-    :host {
-      display: block;
-      width: 100%;
-    }
-
-    .container {
-      position: relative;
-      width: 100%;
-      max-width: var(--container-max-width);
-      margin: 0 auto;
-    }
-
-    .container--wide {
-      max-width: var(--container-max-width-wide);
-    }
-  `;
-ut([
-  n({ type: Boolean })
-], W.prototype, "wide", 2);
-ut([
-  n({ type: Object })
-], W.prototype, "sx", 2);
-W = ut([
-  p("tc-container")
-], W);
-var qt = Object.defineProperty, Yt = Object.getOwnPropertyDescriptor, ot = (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;
-};
-let L = class extends d {
-  constructor() {
-    super(...arguments), this.color = "var(--ink-faint)", this.spacing = "var(--space-md)", this.text = "";
-  }
-  render() {
-    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} />
-    `;
-  }
-};
-L.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;
-    }
-
-    /* Divider with text */
-    .divider-container {
-      display: flex;
-      align-items: center;
-      gap: var(--space-md);
-      margin: var(--divider-spacing) 0;
-    }
-
-    .divider-line {
-      flex: 1;
-      border: none;
-      height: 1px;
-      background-color: var(--divider-color);
-      margin: 0;
-    }
-
-    .divider-text {
-      flex-shrink: 0;
-      font-size: var(--font-size-sm);
-      color: var(--ink-light);
-      font-family: var(--font-body);
-    }
-  `;
-ot([
-  n({ type: String })
-], L.prototype, "color", 2);
-ot([
-  n({ type: String })
-], L.prototype, "spacing", 2);
-ot([
-  n({ type: String })
-], L.prototype, "text", 2);
-L = ot([
-  p("tc-divider")
-], L);
-var Ut = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, H = (r, e, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? Rt(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;
-};
-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;
-      }
-
-      @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;
-        }
-      }
-    `
-];
-H([
-  n({ type: String })
-], b.prototype, "title", 2);
-H([
-  n({ type: String })
-], b.prototype, "subtitle", 2);
-H([
-  n({ type: String })
-], b.prototype, "notice", 2);
-H([
-  n({ type: Boolean, attribute: "no-animation" })
-], b.prototype, "noAnimation", 2);
-H([
-  n({ type: Object })
-], b.prototype, "sx", 2);
-b = H([
-  p("tc-form-header")
-], b);
-var Kt = Object.defineProperty, Nt = Object.getOwnPropertyDescriptor, nt = (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 && Kt(e, s, t), t;
-};
-const Wt = {
-  "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>`,
-  x: l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`,
-  close: l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>`,
-  "chevron-right": l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>`,
-  "chevron-left": l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>`,
-  error: 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 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>`,
-  "alert-circle": l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>`,
-  info: 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 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>`,
-  warning: l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>`,
-  loading: l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg>`,
-  loader: l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line></svg>`,
-  biometric: l`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.81 4.47c-.08 0-.16-.02-.23-.06C15.66 3.42 14 3 12.01 3c-1.98 0-3.86.47-5.57 1.41-.24.13-.54.04-.68-.2-.13-.24-.04-.55.2-.68C7.82 2.52 9.86 2 12.01 2c2.13 0 3.99.47 6.03 1.52.25.13.34.43.21.67-.09.18-.26.28-.44.28zM3.5 9.72c-.1 0-.2-.03-.29-.09-.23-.16-.28-.47-.12-.7.99-1.4 2.25-2.5 3.75-3.27C9.98 4.04 14 4.03 17.15 5.65c1.5.77 2.76 1.86 3.75 3.25.16.22.11.54-.12.7-.23.16-.54.11-.7-.12-.9-1.26-2.04-2.25-3.39-2.94-2.87-1.47-6.54-1.47-9.4.01-1.36.7-2.5 1.7-3.4 2.96-.08.14-.23.21-.39.21zm6.25 12.07c-.13 0-.26-.05-.35-.15-.87-.87-1.34-1.43-2.01-2.64-.69-1.23-1.05-2.73-1.05-4.34 0-2.97 2.54-5.39 5.66-5.39s5.66 2.42 5.66 5.39c0 .28-.22.5-.5.5s-.5-.22-.5-.5c0-2.42-2.09-4.39-4.66-4.39-2.57 0-4.66 1.97-4.66 4.39 0 1.44.32 2.77.93 3.85.64 1.15 1.08 1.64 1.85 2.42.19.2.19.51 0 .71-.11.1-.24.15-.37.15zm7.17-1.85c-1.19 0-2.24-.3-3.1-.89-1.49-1.01-2.38-2.65-2.38-4.39 0-.28.22-.5.5-.5s.5.22.5.5c0 1.41.72 2.74 1.94 3.56.71.48 1.54.71 2.54.71.24 0 .64-.03 1.04-.1.27-.05.53.13.58.41.05.27-.13.53-.41.58-.57.11-1.07.12-1.21.12zM14.91 22c-.04 0-.09-.01-.13-.02-1.59-.44-2.63-1.03-3.72-2.1-1.4-1.39-2.17-3.24-2.17-5.22 0-1.62 1.38-2.94 3.08-2.94 1.7 0 3.08 1.32 3.08 2.94 0 1.07.93 1.94 2.08 1.94s2.08-.87 2.08-1.94c0-3.77-3.25-6.83-7.25-6.83-2.84 0-5.44 1.58-6.61 4.03-.39.81-.59 1.76-.59 2.8 0 .78.07 2.01.67 3.61.1.26-.03.55-.29.64-.26.1-.55-.04-.64-.29-.49-1.31-.73-2.61-.73-3.96 0-1.2.23-2.29.68-3.24 1.33-2.79 4.28-4.6 7.51-4.6 4.55 0 8.25 3.51 8.25 7.83 0 1.62-1.38 2.94-3.08 2.94s-3.08-1.32-3.08-2.94c0-1.07-.93-1.94-2.08-1.94s-2.08.87-2.08 1.94c0 1.71.66 3.31 1.87 4.51.95.94 1.86 1.46 3.27 1.85.27.07.42.35.35.61-.05.23-.26.38-.47.38z"/></svg>`,
-  email: 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>`,
-  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>`,
-  // 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 {
-  constructor() {
-    super(...arguments), this.name = "info", this.size = "1.5rem", this.color = "currentColor";
-  }
-  render() {
-    const r = Wt[this.name];
-    return r ? l`
-      <span
-        part="icon"
-        class="icon"
-        style="--icon-size: ${this.size}; --icon-color: ${this.color};"
-      >
-        ${r}
-      </span>
-    ` : (console.warn(`Icon "${this.name}" not found`), l``);
-  }
-};
-T.styles = c`
-    :host {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    svg {
-      width: var(--icon-size);
-      height: var(--icon-size);
-      color: var(--icon-color);
-    }
-  `;
-nt([
-  n({ type: String })
-], T.prototype, "name", 2);
-nt([
-  n({ type: String })
-], T.prototype, "size", 2);
-nt([
-  n({ type: String })
-], T.prototype, "color", 2);
-T = nt([
-  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;
-};
-let h = 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
-    }, s = {
-      "input-wrapper": !0,
-      focused: this.isFocused,
-      "has-error": r
-    }, i = {
-      input: !0,
-      "has-error": r
-    };
-    return l`
-      <div class=${M(e)}>
-        ${this.label ? l`<label part="label" class="field-label" for=${this.inputId}>${this.label}</label>` : ""}
-        <div part="wrapper" class=${M(s)}>
-          <input
-            part="input"
-            id=${this.inputId}
-            class=${M(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}
-            @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,
-  c`
-      :host {
-        display: block;
-      }
-
-      /* Extend design-tokens .field-group */
-      .field-group {
-        width: 100%;
-      }
-
-      /* Label color change on focus - extends design-tokens .field-label */
-      .field-group.focused .field-label {
-        color: var(--accent-primary);
-      }
-
-      .field-group.has-error .field-label {
-        color: var(--error-base);
-      }
-
-      .input-wrapper {
-        position: relative;
-        width: 100%;
-      }
-
-      /* Extend design-tokens .input */
-      .input {
-        width: 100%;
-        box-sizing: border-box;
-      }
-
-      .input:disabled {
-        opacity: var(--opacity-disabled);
-        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);
-      }
-
-      .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 })
-], h.prototype, "label", 2);
-v([
-  n({ type: String })
-], h.prototype, "type", 2);
-v([
-  n({ type: String })
-], h.prototype, "placeholder", 2);
-v([
-  n({ type: String })
-], h.prototype, "value", 2);
-v([
-  n({ type: String })
-], h.prototype, "error", 2);
-v([
-  n({ type: Boolean })
-], h.prototype, "disabled", 2);
-v([
-  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, lt = (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;
-};
-let A = class extends d {
-  constructor() {
-    super(...arguments), this.gap = "var(--space-md)", this.padding = "var(--space-md)", this.sx = {};
-  }
-  render() {
-    const r = {
-      "--item-padding": this.padding,
-      "--item-gap": this.gap,
-      ...this.sx
-    };
-    return l`
-      <div part="item" class="item" style=${m(r)}>
-        <div part="prefix" class="prefix">
-          <slot name="prefix"></slot>
-        </div>
-        <div part="content" class="content">
-          <slot></slot>
-        </div>
-        <div part="suffix" class="suffix">
-          <slot name="suffix"></slot>
-        </div>
-      </div>
-    `;
-  }
-};
-A.styles = c`
-    :host {
-      display: block;
-      width: 100%;
-    }
-
-    .item {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      padding: var(--item-padding);
-      gap: var(--item-gap);
-      background: var(--paper-cream);
-      border-radius: var(--radius-md);
-      box-sizing: border-box;
-    }
-
-    .prefix {
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .content {
-      flex: 1;
-      min-width: 0;
-      font-family: var(--font-body);
-      font-size: var(--font-size-base);
-      color: var(--ink-dark);
-    }
-
-    .suffix {
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    /* Hide empty slots */
-    .prefix:not(:has(*)),
-    .suffix:not(:has(*)) {
-      display: none;
-    }
-  `;
-lt([
-  n({ type: String })
-], A.prototype, "gap", 2);
-lt([
-  n({ type: String })
-], A.prototype, "padding", 2);
-lt([
-  n({ type: Object })
-], A.prototype, "sx", 2);
-A = lt([
-  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;
-};
-let y = class extends d {
-  constructor() {
-    super(...arguments), this.gap = "var(--space-md)", this.padding = "var(--space-md)", this.disabled = !1, this.showArrow = !0, this.sx = {};
-  }
-  handleClick() {
-    this.disabled || this.dispatchEvent(
-      new CustomEvent("tc-click", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  render() {
-    const r = {
-      "--item-padding": this.padding,
-      "--item-gap": this.gap,
-      ...this.sx
-    };
-    return l`
-      <button
-        part="button"
-        class="button"
-        ?disabled=${this.disabled}
-        style=${m(r)}
-        @click=${this.handleClick}
-      >
-        <div part="prefix" class="prefix">
-          <slot name="prefix"></slot>
-        </div>
-        <div part="content" class="content">
-          <slot></slot>
-        </div>
-        <div part="suffix" class="suffix">
-          <slot name="suffix"></slot>
-        </div>
-        ${this.showArrow ? l`
-              <svg
-                part="arrow"
-                class="arrow"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <polyline points="9 18 15 12 9 6"></polyline>
-              </svg>
-            ` : ""}
-      </button>
-    `;
-  }
-};
-y.styles = c`
-    :host {
-      display: block;
-      width: 100%;
-    }
-
-    .button {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      padding: var(--item-padding);
-      gap: var(--item-gap);
-      background: var(--paper-cream);
-      border: none;
-      border-radius: var(--radius-md);
-      box-sizing: border-box;
-      cursor: pointer;
-      font-family: inherit;
-      text-align: left;
-      transition: var(--transition-fast);
-    }
-
-    .button:hover:not(:disabled) {
-      background: var(--paper-warm);
-    }
-
-    .button:active:not(:disabled) {
-      transform: scale(0.995);
-    }
-
-    .button:focus-visible {
-      outline: 2px solid var(--accent-primary);
-      outline-offset: 2px;
-    }
-
-    .button:disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
-    }
-
-    .prefix {
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .content {
-      flex: 1;
-      min-width: 0;
-      font-family: var(--font-body);
-      font-size: var(--font-size-base);
-      color: var(--ink-dark);
-    }
-
-    .suffix {
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .arrow {
-      flex-shrink: 0;
-      width: 1.25rem;
-      height: 1.25rem;
-      color: var(--ink-light);
-      transition: var(--transition-fast);
-    }
-
-    .button:hover:not(:disabled) .arrow {
-      color: var(--ink-medium);
-      transform: translateX(2px);
-    }
-
-    /* Hide empty slots */
-    .prefix:not(:has(*)),
-    .suffix:not(:has(*)) {
-      display: none;
-    }
-
-    /* Hide arrow when suffix has content */
-    .suffix:has(*) + .arrow {
-      display: none;
-    }
-  `;
-F([
-  n({ type: String })
-], y.prototype, "gap", 2);
-F([
-  n({ type: String })
-], y.prototype, "padding", 2);
-F([
-  n({ type: Boolean })
-], y.prototype, "disabled", 2);
-F([
-  n({ type: Boolean, attribute: "show-arrow" })
-], y.prototype, "showArrow", 2);
-F([
-  n({ type: Object })
-], y.prototype, "sx", 2);
-y = F([
-  p("tc-item-button")
-], y);
-var ee = Object.defineProperty, re = Object.getOwnPropertyDescriptor, V = (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;
-};
-let w = class extends d {
-  constructor() {
-    super(...arguments), this.length = 6, this.error = !1, this.disabled = !1, this.showProgress = !0, this.values = [];
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.values = new Array(this.length).fill("");
-  }
-  render() {
-    const e = this.values.filter((s) => s.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 = [
-        "cell",
-        s.length > 0 ? "cell--filled" : "",
-        this.error ? "cell--error" : ""
-      ].filter(Boolean).join(" ");
-      return l`
-              <input
-                part="cell"
-                class=${a}
-                type="text"
-                inputmode="numeric"
-                maxlength="1"
-                pattern="[0-9]"
-                .value=${s}
-                ?disabled=${this.disabled}
-                aria-label="Digit ${i + 1}"
-                @input=${(o) => this.handleInput(o, i)}
-                @keydown=${(o) => this.handleKeydown(o, i)}
-                @paste=${(o) => this.handlePaste(o)}
-              />
-            `;
-    })}
-        </div>
-        ${this.showProgress ? l`
-              <div part="progress" class="progress">
-                <div
-                  part="progress-bar"
-                  class="progress-bar"
-                  style="width: ${e}%"
-                ></div>
-              </div>
-            ` : ""}
-      </div>
-    `;
-  }
-  handleInput(r, e) {
-    const i = r.target.value.replace(/\D/g, "").slice(0, 1);
-    this.values = [...this.values], this.values[e] = i, this.dispatchEvent(
-      new CustomEvent("tc-change", {
-        bubbles: !0,
-        composed: !0,
-        detail: { value: this.values.join(""), values: [...this.values] }
-      })
-    ), i && e < this.length - 1 && this.focusCell(e + 1), this.values.every((t) => t.length > 0) && this.dispatchEvent(
-      new CustomEvent("tc-complete", {
-        bubbles: !0,
-        composed: !0,
-        detail: { value: this.values.join("") }
-      })
-    );
-  }
-  handleKeydown(r, e) {
-    r.key === "Backspace" && !this.values[e] && e > 0 ? (r.preventDefault(), this.values = [...this.values], this.values[e - 1] = "", this.focusCell(e - 1)) : r.key === "ArrowLeft" && e > 0 ? (r.preventDefault(), this.focusCell(e - 1)) : r.key === "ArrowRight" && e < this.length - 1 && (r.preventDefault(), this.focusCell(e + 1));
-  }
-  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;
-      }), this.values = [...this.values];
-      const i = Math.min(s.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(
-        new CustomEvent("tc-complete", {
-          bubbles: !0,
-          composed: !0,
-          detail: { value: this.values.join("") }
-        })
-      );
-    }
-  }
-  focusCell(r) {
-    requestAnimationFrame(() => {
-      this.shadowRoot?.querySelectorAll(
-        ".cell"
-      )?.[r]?.focus();
-    });
-  }
-  /** Focus the first empty cell or the last cell */
-  focus() {
-    const r = this.values.findIndex((s) => !s), e = r >= 0 ? r : this.length - 1;
-    this.focusCell(e);
-  }
-  /** Clear all values */
-  clear() {
-    this.values = new Array(this.length).fill(""), this.focusCell(0);
-  }
-  /** Get the current OTP value */
-  getValue() {
-    return this.values.join("");
-  }
-};
-w.styles = [
-  u,
-  c`
-      :host {
-        display: block;
-      }
-
-      .container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: var(--space-md);
-      }
-
-      .cells {
-        display: flex;
-        gap: var(--space-sm);
-        justify-content: center;
-      }
-
-      .cell {
-        width: clamp(2.625rem, 2.35rem + 1.36vw, 3rem);
-        height: clamp(3.125rem, 2.78rem + 1.74vw, 3.5rem);
-        border: var(--size-border-width-thick) solid transparent;
-        border-radius: var(--radius-md);
-        background: var(--paper-cream);
-        font-family: var(--font-body);
-        font-size: clamp(1.25rem, 1.14rem + 0.54vw, 1.5rem);
-        font-weight: 600;
-        text-align: center;
-        color: var(--ink-black);
-        transition: all var(--duration-instant) ease;
-        caret-color: var(--accent-primary);
-      }
-
-      .cell:focus {
-        outline: none;
-        background: var(--paper-white);
-        border-color: var(--accent-primary);
-        box-shadow: var(--shadow-otp-cell-focus);
-      }
-
-      .cell--filled {
-        background: var(--paper-white);
-        border-color: var(--ink-faint);
-      }
-
-      .cell--error {
-        border-color: var(--error-base) !important;
-        animation: shake var(--duration-smooth) ease;
-      }
-
-      .cell:disabled {
-        opacity: var(--opacity-disabled);
-        cursor: not-allowed;
-      }
-
-      /* Progress bar */
-      .progress {
-        width: 100%;
-        max-width: 12rem;
-        height: var(--size-border-width-heavy);
-        background: var(--paper-warm);
-        border-radius: var(--radius-full);
-        overflow: hidden;
-      }
-
-      .progress-bar {
-        height: 100%;
-        background: linear-gradient(
-          90deg,
-          var(--accent-primary) 0%,
-          var(--accent-primary-hover) 100%
-        );
-        transition: width var(--duration-instant) ease;
-      }
-
-      /* Reduced motion */
-      @media (prefers-reduced-motion: reduce) {
-        .cell,
-        .progress-bar {
-          transition-duration: 0.01ms !important;
-        }
-
-        .cell--error {
-          animation: none;
-        }
-      }
-    `
-];
-V([
-  n({ type: Number })
-], w.prototype, "length", 2);
-V([
-  n({ type: Boolean })
-], w.prototype, "error", 2);
-V([
-  n({ type: Boolean })
-], w.prototype, "disabled", 2);
-V([
-  n({ type: Boolean, attribute: "show-progress" })
-], w.prototype, "showProgress", 2);
-V([
-  S()
-], w.prototype, "values", 2);
-w = V([
-  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;
-};
-let X = class extends d {
-  constructor() {
-    super(...arguments), this.gap = "var(--space-md)", this.sx = {};
-  }
-  render() {
-    const r = {
-      gap: this.gap,
-      ...this.sx
-    };
-    return l`
-      <section part="section" class="section" style=${m(r)}>
-        <slot></slot>
-      </section>
-    `;
-  }
-};
-X.styles = c`
-    :host {
-      display: block;
-      width: 100%;
-    }
-
-    .section {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-    }
-  `;
-vt([
-  n({ type: String })
-], X.prototype, "gap", 2);
-vt([
-  n({ type: Object })
-], X.prototype, "sx", 2);
-X = vt([
-  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;
-};
-let G = class extends d {
-  constructor() {
-    super(...arguments), this.mobile = new Dt(this, "(max-width: 768px)"), this.size = "auto", this.color = "var(--accent-primary)";
-  }
-  render() {
-    let r;
-    return this.size === "auto" ? r = this.mobile.matches ? "spinner--auto-mobile" : "spinner--auto-desktop" : r = `spinner--${this.size}`, l`
-      <div
-        part="spinner"
-        class="spinner ${r}"
-        style="--spinner-color: ${this.color};"
-        role="progressbar"
-        aria-label="Loading"
-      ></div>
-    `;
-  }
-};
-G.styles = [
-  u,
-  c`
-      :host {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .spinner {
-        display: block;
-        border-radius: 50%;
-        border-style: solid;
-        border-color: var(--paper-cream);
-        border-top-color: var(--spinner-color);
-        animation: spin var(--duration-slow) linear infinite;
-      }
-
-      .spinner--sm {
-        width: var(--size-spinner-sm);
-        height: var(--size-spinner-sm);
-        border-width: var(--size-border-width-thick);
-      }
-
-      .spinner--md {
-        width: var(--size-spinner-md);
-        height: var(--size-spinner-md);
-        border-width: var(--size-border-width-heavy);
-      }
-
-      .spinner--lg {
-        width: var(--size-spinner-lg);
-        height: var(--size-spinner-lg);
-        border-width: var(--size-border-width-bold);
-      }
-
-      .spinner--auto-mobile {
-        width: var(--size-spinner-lg);
-        height: var(--size-spinner-lg);
-        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, ct = (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 I = 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>
-    `;
-  }
-};
-I.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;
-    }
-  `;
-ct([
-  n({ type: String })
-], I.prototype, "size", 2);
-ct([
-  n({ type: String })
-], I.prototype, "background", 2);
-ct([
-  n({ type: String })
-], I.prototype, "color", 2);
-I = ct([
-  p("tc-symbol")
-], I);
-var ce = Object.defineProperty, de = Object.getOwnPropertyDescriptor, q = (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 zt`
-      <${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);
-      }
-    `
-];
-q([
-  n({ type: String })
-], x.prototype, "tag", 2);
-q([
-  n({ type: String })
-], x.prototype, "size", 2);
-q([
-  n({ type: String })
-], x.prototype, "weight", 2);
-q([
-  n({ type: String })
-], x.prototype, "color", 2);
-q([
-  n({ type: Object })
-], x.prototype, "sx", 2);
-x = q([
-  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;
-};
-let _ = class extends d {
-  constructor() {
-    super(...arguments), this.variant = "info", this.duration = 5e3, this.autoDismiss = !0, this.dismissible = !0, this.animation = new j(this, {
-      showDuration: 300,
-      hideDuration: 200
-    });
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.updateDataState();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.clearDismissTimer();
-  }
-  updateDataState() {
-    this.dataset.state = this.animation.state;
-  }
-  clearDismissTimer() {
-    this.dismissTimer && (clearTimeout(this.dismissTimer), this.dismissTimer = void 0);
-  }
-  startDismissTimer() {
-    this.autoDismiss && this.duration > 0 && (this.clearDismissTimer(), this.dismissTimer = setTimeout(() => {
-      this.hide();
-    }, this.duration));
-  }
-  async show() {
-    this.clearDismissTimer(), await this.animation.show(), this.updateDataState(), this.startDismissTimer();
-  }
-  async hide() {
-    this.clearDismissTimer(), await this.animation.hide(), this.updateDataState(), this.dispatchEvent(
-      new CustomEvent("tc-dismiss", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  handleClose() {
-    this.hide();
-  }
-  render() {
-    return l`
-      <div part="toast" class="toast toast--${this.variant}" role="alert" aria-live="polite">
-        <div part="content" class="content">
-          <slot></slot>
-        </div>
-        ${this.dismissible ? l`
-              <button
-                part="close"
-                class="close"
-                @click=${this.handleClose}
-                aria-label="Dismiss"
-              >
-                <svg
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                >
-                  <line x1="18" y1="6" x2="6" y2="18"></line>
-                  <line x1="6" y1="6" x2="18" y2="18"></line>
-                </svg>
-              </button>
-            ` : ""}
-      </div>
-    `;
-  }
-};
-_.styles = [
-  u,
-  c`
-    :host {
-      display: block;
-      position: fixed;
-      bottom: var(--space-lg);
-      left: 50%;
-      transform: translateX(-50%);
-      z-index: 1000;
-      pointer-events: none;
-    }
-
-    .toast {
-      display: flex;
-      align-items: center;
-      gap: var(--space-sm);
-      padding: var(--space-md) var(--space-lg);
-      border-radius: var(--radius-md);
-      font-family: var(--font-body);
-      font-size: var(--font-size-sm);
-      box-shadow: 0 4px 12px var(--overlay-shadow-subtle);
-      pointer-events: auto;
-      opacity: 0;
-      transform: translateY(100%);
-      transition: opacity var(--transition-smooth), transform var(--transition-smooth);
-    }
-
-    :host([data-state='showing']) .toast,
-    :host([data-state='visible']) .toast {
-      opacity: 1;
-      transform: translateY(0);
-    }
-
-    :host([data-state='hiding']) .toast {
-      opacity: 0;
-      transform: translateY(100%);
-    }
-
-    :host([data-state='hidden']) {
-      display: none;
-    }
-
-    .toast--info {
-      background: var(--ink-dark);
-      color: var(--paper-white);
-    }
-
-    .toast--success {
-      background: var(--accent-success);
-      color: white;
-    }
-
-    .toast--warning {
-      background: var(--semantic-warning);
-      color: white;
-    }
-
-    .toast--error {
-      background: var(--error-base);
-      color: white;
-    }
-
-    .content {
-      flex: 1;
-      line-height: 1.4;
-    }
-
-    .close {
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: var(--size-icon-md);
-      height: var(--size-icon-md);
-      padding: 0;
-      border: none;
-      background: transparent;
-      color: inherit;
-      opacity: var(--opacity-hover);
-      cursor: pointer;
-      transition: opacity var(--transition-fast);
-    }
-
-    .close:hover {
-      opacity: 1;
-    }
-
-    .close svg {
-      width: var(--size-icon-sm);
-      height: var(--size-icon-sm);
-    }
-  `
-];
-tt([
-  n({ type: String })
-], _.prototype, "variant", 2);
-tt([
-  n({ type: Number })
-], _.prototype, "duration", 2);
-tt([
-  n({ type: Boolean, attribute: "auto-dismiss" })
-], _.prototype, "autoDismiss", 2);
-tt([
-  n({ type: Boolean })
-], _.prototype, "dismissible", 2);
-_ = tt([
-  p("tc-toast")
-], _);
-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;
-};
-let D = 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;
-  }
-  handleRetry() {
-    this.dispatchEvent(
-      new CustomEvent("tc-retry", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  render() {
-    return l`
-      <div part="screen" class="screen">
-        <tc-container>
-          <div part="content" class="content">
-            <div part="icon" class="icon-container">
-              <tc-icon name="alert-circle" size="2rem"></tc-icon>
-            </div>
-            <tc-section gap="var(--space-sm)">
-              <tc-text part="title" tag="h1" size="xl" weight="600" class="title">
-                ${this.title}
-              </tc-text>
-              <tc-text part="message" size="base" color="tertiary" class="message">
-                ${this.message}
-              </tc-text>
-            </tc-section>
-            ${this.showRetry ? l`
-                  <div part="action" class="action">
-                    <tc-button variant="primary" @tc-click=${this.handleRetry}>
-                      ${this.retryLabel}
-                    </tc-button>
-                  </div>
-                ` : ""}
-          </div>
-        </tc-container>
-      </div>
-    `;
-  }
-};
-D.styles = c`
-    :host {
-      display: block;
-      width: 100%;
-      min-height: 100vh;
-      min-height: 100dvh;
-    }
-
-    .screen {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      min-height: 100vh;
-      min-height: 100dvh;
-      padding: var(--space-lg);
-      box-sizing: border-box;
-      background: var(--paper-white);
-    }
-
-    .content {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: var(--space-lg);
-      text-align: center;
-      max-width: 20rem;
-    }
-
-    .icon-container {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 4rem;
-      height: 4rem;
-      background: var(--error-bg);
-      border-radius: var(--radius-full);
-      color: var(--error-base);
-    }
-
-    .title {
-      margin: 0;
-    }
-
-    .message {
-      color: var(--ink-medium);
-    }
-
-    .action {
-      width: 100%;
-      margin-top: var(--space-md);
-    }
-  `;
-et([
-  n({ type: String })
-], D.prototype, "title", 2);
-et([
-  n({ type: String })
-], D.prototype, "message", 2);
-et([
-  n({ type: String, attribute: "retry-label" })
-], D.prototype, "retryLabel", 2);
-et([
-  n({ type: Boolean, attribute: "show-retry" })
-], D.prototype, "showRetry", 2);
-D = et([
-  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;
-};
-let Q = class extends d {
-  constructor() {
-    super(...arguments), this.message = "", this.spinnerSize = "3rem", this.loading = new _t(this);
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.loading.start();
-  }
-  render() {
-    return l`
-      <div part="screen" class="screen">
-        <tc-container>
-          <div part="content" class="content">
-            <tc-spinner part="spinner" size=${this.spinnerSize}></tc-spinner>
-            ${this.message ? l`
-                  <tc-text part="message" class="message" size="base" color="tertiary">
-                    ${this.message}
-                  </tc-text>
-                ` : ""}
-          </div>
-        </tc-container>
-      </div>
-    `;
-  }
-};
-Q.styles = c`
-    :host {
-      display: block;
-      width: 100%;
-      min-height: 100vh;
-      min-height: 100dvh;
-    }
-
-    .screen {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      min-height: 100vh;
-      min-height: 100dvh;
-      padding: var(--space-lg);
-      box-sizing: border-box;
-      background: var(--paper-white);
-    }
-
-    .content {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: var(--space-lg);
-      text-align: center;
-    }
-
-    .message {
-      color: var(--ink-medium);
-      max-width: 20rem;
-    }
-  `;
-gt([
-  n({ type: String })
-], Q.prototype, "message", 2);
-gt([
-  n({ type: String, attribute: "spinner-size" })
-], Q.prototype, "spinnerSize", 2);
-Q = gt([
-  p("tc-loading-screen")
-], Q);
-var fe = Object.defineProperty, be = Object.getOwnPropertyDescriptor, Y = (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;
-};
-let k = 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, {
-      showDuration: 600,
-      hideDuration: 300
-    });
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.autoAnimate && requestAnimationFrame(() => {
-      this.playAnimation();
-    });
-  }
-  async playAnimation() {
-    await this.animation.show(), this.isAnimated = !0;
-  }
-  handleAction() {
-    this.dispatchEvent(
-      new CustomEvent("tc-action", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  render() {
-    const r = this.isAnimated ? "animated" : "";
-    return l`
-      <div part="screen" class="screen">
-        <tc-container>
-          <div part="content" class="content">
-            <div part="icon" class="icon-container ${r}">
-              <svg
-                class="checkmark"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="3"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <polyline points="20 6 9 17 4 12"></polyline>
-              </svg>
-            </div>
-            <tc-section gap="var(--space-sm)" class="text-content ${r}">
-              <tc-text part="title" tag="h1" size="xl" weight="600" class="title">
-                ${this.title}
-              </tc-text>
-              <tc-text part="message" size="base" color="tertiary" class="message">
-                ${this.message}
-              </tc-text>
-            </tc-section>
-            ${this.actionLabel ? l`
-                  <div part="action" class="action ${r}">
-                    <tc-button variant="success" @tc-click=${this.handleAction}>
-                      ${this.actionLabel}
-                    </tc-button>
-                  </div>
-                ` : ""}
-          </div>
-        </tc-container>
-      </div>
-    `;
-  }
-};
-k.styles = c`
-    :host {
-      display: block;
-      width: 100%;
-      min-height: 100vh;
-      min-height: 100dvh;
-    }
-
-    .screen {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      min-height: 100vh;
-      min-height: 100dvh;
-      padding: var(--space-lg);
-      box-sizing: border-box;
-      background: var(--paper-white);
-    }
-
-    .content {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: var(--space-lg);
-      text-align: center;
-      max-width: 20rem;
-    }
-
-    .icon-container {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 5rem;
-      height: 5rem;
-      background: var(--alpha-success10);
-      border-radius: var(--radius-full);
-      color: var(--accent-success);
-      transform: scale(0);
-      opacity: 0;
-      transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
-        opacity 0.3s ease;
-    }
-
-    .icon-container.animated {
-      transform: scale(1);
-      opacity: 1;
-    }
-
-    .checkmark {
-      width: 2.5rem;
-      height: 2.5rem;
-      stroke-dasharray: 50;
-      stroke-dashoffset: 50;
-    }
-
-    .icon-container.animated .checkmark {
-      animation: draw-check 0.5s ease-out 0.3s forwards;
-    }
-
-    @keyframes draw-check {
-      to {
-        stroke-dashoffset: 0;
-      }
-    }
-
-    .title {
-      margin: 0;
-    }
-
-    .message {
-      color: var(--ink-medium);
-    }
-
-    .text-content {
-      opacity: 0;
-      transform: translateY(10px);
-      transition: opacity 0.4s ease, transform 0.4s ease;
-      transition-delay: 0.4s;
-    }
-
-    .text-content.animated {
-      opacity: 1;
-      transform: translateY(0);
-    }
-
-    .action {
-      width: 100%;
-      margin-top: var(--space-md);
-      opacity: 0;
-      transform: translateY(10px);
-      transition: opacity 0.4s ease, transform 0.4s ease;
-      transition-delay: 0.6s;
-    }
-
-    .action.animated {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  `;
-Y([
-  n({ type: String })
-], k.prototype, "title", 2);
-Y([
-  n({ type: String })
-], k.prototype, "message", 2);
-Y([
-  n({ type: String, attribute: "action-label" })
-], k.prototype, "actionLabel", 2);
-Y([
-  n({ type: Boolean, attribute: "auto-animate" })
-], k.prototype, "autoAnimate", 2);
-Y([
-  S()
-], k.prototype, "isAnimated", 2);
-k = Y([
-  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;
-};
-let O = class extends d {
-  constructor() {
-    super(...arguments), this.position = "bottom-right", this.size = "3.5rem", this.disabled = !1, this.sx = {};
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.setAttribute("position", this.position);
-  }
-  updated(r) {
-    r.has("position") && this.setAttribute("position", this.position);
-  }
-  handleClick() {
-    this.disabled || this.dispatchEvent(
-      new CustomEvent("tc-click", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  render() {
-    const r = {
-      "--fab-size": this.size,
-      ...this.sx
-    };
-    return l`
-      <button
-        part="button"
-        class="button"
-        ?disabled=${this.disabled}
-        style=${m(r)}
-        @click=${this.handleClick}
-        aria-label="Floating action"
-      >
-        <slot></slot>
-      </button>
-    `;
-  }
-};
-O.styles = [
-  u,
-  c`
-    :host {
-      display: block;
-      position: fixed;
-      z-index: 100;
-    }
-
-    :host([position='bottom-right']) {
-      bottom: var(--space-lg);
-      right: var(--space-lg);
-    }
-
-    :host([position='bottom-left']) {
-      bottom: var(--space-lg);
-      left: var(--space-lg);
-    }
-
-    :host([position='top-right']) {
-      top: var(--space-lg);
-      right: var(--space-lg);
-    }
-
-    :host([position='top-left']) {
-      top: var(--space-lg);
-      left: var(--space-lg);
-    }
-
-    .button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: var(--fab-size);
-      height: var(--fab-size);
-      padding: 0;
-      border: none;
-      border-radius: var(--radius-full);
-      background: var(--accent-primary);
-      color: white;
-      cursor: pointer;
-      box-shadow: 0 4px 12px var(--alpha-primary40);
-      transition: var(--transition-smooth);
-    }
-
-    .button:hover:not(:disabled) {
-      background: var(--accent-primary-hover);
-      transform: scale(1.05);
-      box-shadow: 0 6px 16px var(--alpha-primary50);
-    }
-
-    .button:active:not(:disabled) {
-      background: var(--accent-primary-pressed);
-      transform: scale(0.98);
-    }
-
-    .button:focus-visible {
-      outline: 2px solid var(--accent-primary);
-      outline-offset: 3px;
-    }
-
-    .button:disabled {
-      opacity: var(--opacity-disabled);
-      cursor: not-allowed;
-      box-shadow: none;
-    }
-  `
-];
-rt([
-  n({ type: String })
-], O.prototype, "position", 2);
-rt([
-  n({ type: String })
-], O.prototype, "size", 2);
-rt([
-  n({ type: Boolean })
-], O.prototype, "disabled", 2);
-rt([
-  n({ type: Object })
-], O.prototype, "sx", 2);
-O = rt([
-  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;
-};
-let g = 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, {
-      showDuration: 300,
-      hideDuration: 200
-    }), this.history = new Ct(this), this.messageBus = new Ot(this), this.handleKeyDown = (r) => {
-      r.key === "Escape" && this.animation.state === "visible" && this.close();
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.updateDataState(), this.closeOnEscape && document.addEventListener("keydown", this.handleKeyDown), this.messageBus.onMessage("*", (r, e) => {
-      this.dispatchEvent(
-        new CustomEvent("tc-message", {
-          bubbles: !0,
-          composed: !0,
-          detail: { type: r, payload: e }
-        })
-      );
-    }), this.useHistory && this.history.onPopState(() => {
-      this.animation.state === "visible" && this.close();
-    });
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), document.removeEventListener("keydown", this.handleKeyDown);
-  }
-  updateDataState() {
-    this.dataset.state = this.animation.state;
-  }
-  async open() {
-    this.useHistory && this.history.push({ modal: "iframe" }), this.isLoading = !0, await this.animation.show(), this.updateDataState();
-  }
-  async close() {
-    this.useHistory && this.history.pop(), await this.animation.hide(), this.updateDataState(), this.dispatchEvent(
-      new CustomEvent("tc-close", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  handleOverlayClick(r) {
-    this.closeOnOverlay && r.target === r.currentTarget && this.close();
-  }
-  handleIframeLoad() {
-    this.isLoading = !1, this.dispatchEvent(
-      new CustomEvent("tc-load", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  sendMessage(r, e) {
-    const s = this.shadowRoot?.querySelector("iframe");
-    s?.contentWindow && this.messageBus.send(r, e, s.contentWindow);
-  }
-  render() {
-    return l`
-      <div part="overlay" class="overlay" @click=${this.handleOverlayClick}>
-        <div part="modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
-          ${this.title ? l`
-                <div part="header" class="header">
-                  <h2 id="modal-title" class="title">${this.title}</h2>
-                  <button
-                    part="close"
-                    class="close"
-                    @click=${this.close}
-                    aria-label="Close modal"
-                  >
-                    <svg
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    >
-                      <line x1="18" y1="6" x2="6" y2="18"></line>
-                      <line x1="6" y1="6" x2="18" y2="18"></line>
-                    </svg>
-                  </button>
-                </div>
-              ` : ""}
-          <div part="content" class="content">
-            <iframe
-              part="iframe"
-              class="iframe"
-              src=${this.src}
-              @load=${this.handleIframeLoad}
-              title=${this.title || "Modal content"}
-            ></iframe>
-            <div part="loader" class="loader ${this.isLoading ? "" : "hidden"}">
-              <tc-spinner size="2rem"></tc-spinner>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-};
-g.styles = [
-  u,
-  c`
-    :host {
-      display: contents;
-    }
-
-    .overlay {
-      position: fixed;
-      inset: 0;
-      z-index: 1000;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: var(--space-lg);
-      background: var(--overlay-dim);
-      opacity: 0;
-      visibility: hidden;
-      transition: opacity var(--transition-smooth), visibility var(--transition-smooth);
-    }
-
-    :host([data-state='showing']) .overlay,
-    :host([data-state='visible']) .overlay {
-      opacity: 1;
-      visibility: visible;
-    }
-
-    :host([data-state='hiding']) .overlay {
-      opacity: 0;
-    }
-
-    :host([data-state='hidden']) .overlay {
-      visibility: hidden;
-    }
-
-    .modal {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      max-width: 600px;
-      max-height: 90vh;
-      max-height: 90dvh;
-      background: var(--paper-white);
-      border-radius: var(--radius-lg);
-      box-shadow: 0 20px 60px var(--overlay-shadow-strong);
-      overflow: hidden;
-      transform: scale(0.95) translateY(20px);
-      transition: transform var(--transition-smooth);
-    }
-
-    :host([data-state='showing']) .modal,
-    :host([data-state='visible']) .modal {
-      transform: scale(1) translateY(0);
-    }
-
-    :host([data-state='hiding']) .modal {
-      transform: scale(0.95) translateY(20px);
-    }
-
-    .header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: var(--space-md) var(--space-lg);
-      border-bottom: 1px solid var(--paper-warm);
-    }
-
-    .title {
-      font-family: var(--font-body);
-      font-size: var(--font-size-lg);
-      font-weight: 600;
-      color: var(--ink-dark);
-      margin: 0;
-    }
-
-    .close {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: var(--size-close-button);
-      height: var(--size-close-button);
-      padding: 0;
-      border: none;
-      background: transparent;
-      color: var(--ink-medium);
-      cursor: pointer;
-      border-radius: var(--radius-sm);
-      transition: var(--transition-fast);
-    }
-
-    .close:hover {
-      background: var(--paper-warm);
-      color: var(--ink-dark);
-    }
-
-    .close svg {
-      width: 1.25rem;
-      height: 1.25rem;
-    }
-
-    .content {
-      position: relative;
-      flex: 1;
-      overflow: hidden;
-    }
-
-    .iframe {
-      width: 100%;
-      height: 100%;
-      min-height: 400px;
-      border: none;
-    }
-
-    .loader {
-      position: absolute;
-      inset: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: var(--paper-white);
-      opacity: 1;
-      transition: opacity var(--transition-smooth);
-    }
-
-    .loader.hidden {
-      opacity: 0;
-      pointer-events: none;
-    }
-  `
-];
-E([
-  n({ type: String })
-], g.prototype, "src", 2);
-E([
-  n({ type: String })
-], g.prototype, "title", 2);
-E([
-  n({ type: Boolean, attribute: "close-on-escape" })
-], g.prototype, "closeOnEscape", 2);
-E([
-  n({ type: Boolean, attribute: "close-on-overlay" })
-], g.prototype, "closeOnOverlay", 2);
-E([
-  n({ type: Boolean, attribute: "use-history" })
-], g.prototype, "useHistory", 2);
-E([
-  S()
-], g.prototype, "isLoading", 2);
-g = E([
-  p("tc-iframe-modal")
-], g);
-var $e = Object.defineProperty, ze = Object.getOwnPropertyDescriptor, B = (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 && $e(e, s, t), t;
-};
-let f = 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, {
-      showDuration: 400,
-      hideDuration: 300
-    }), this.storage = new bt(
-      this,
-      this.storageKey
-    );
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.updateDataState(), this.checkDismissState();
-  }
-  checkDismissState() {
-    const r = this.storage.value;
-    r?.dismissedAt && ((Date.now() - r.dismissedAt) / 864e5 < this.dismissDays ? this.isDismissed = !0 : this.storage.remove());
-  }
-  updateDataState() {
-    this.dataset.state = this.animation.state;
-  }
-  async show() {
-    this.isDismissed || (await this.animation.show(), this.updateDataState());
-  }
-  async dismiss() {
-    this.storage.set({ dismissedAt: Date.now() }), await this.animation.hide(), this.updateDataState(), this.dispatchEvent(
-      new CustomEvent("tc-dismiss", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  handleInstall() {
-    this.dispatchEvent(
-      new CustomEvent("tc-install", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  handleClose() {
-    this.dismiss();
-  }
-  render() {
-    return l`
-      <div part="banner" class="banner" role="banner">
-        <div part="icon" class="icon">
-          <tc-icon name="download" size="1.5rem"></tc-icon>
-        </div>
-        <div part="content" class="content">
-          <tc-text part="title" class="title" size="base" weight="600">
-            ${this.title}
-          </tc-text>
-          <tc-text part="description" class="description" size="sm" color="tertiary">
-            ${this.description}
-          </tc-text>
-        </div>
-        <div part="actions" class="actions">
-          <tc-button
-            part="install"
-            variant="primary"
-            size="small"
-            @tc-click=${this.handleInstall}
-          >
-            ${this.installLabel}
-          </tc-button>
-          <button part="close" class="close" @click=${this.handleClose} aria-label="Dismiss">
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <line x1="18" y1="6" x2="6" y2="18"></line>
-              <line x1="6" y1="6" x2="18" y2="18"></line>
-            </svg>
-          </button>
-        </div>
-      </div>
-    `;
-  }
-};
-f.styles = [
-  u,
-  c`
-    :host {
-      display: block;
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      z-index: 100;
-      padding: var(--space-md);
-      pointer-events: none;
-    }
-
-    .banner {
-      display: flex;
-      align-items: center;
-      gap: var(--space-md);
-      padding: var(--space-md) var(--space-lg);
-      background: var(--paper-white);
-      border-radius: var(--radius-lg);
-      box-shadow: 0 -4px 20px var(--overlay-shadow-light);
-      pointer-events: auto;
-      opacity: 0;
-      transform: translateY(100%);
-      transition: opacity var(--transition-smooth), transform var(--transition-smooth);
-    }
-
-    :host([data-state='showing']) .banner,
-    :host([data-state='visible']) .banner {
-      opacity: 1;
-      transform: translateY(0);
-    }
-
-    :host([data-state='hiding']) .banner {
-      opacity: 0;
-      transform: translateY(100%);
-    }
-
-    :host([data-state='hidden']) {
-      display: none;
-    }
-
-    .icon {
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 3rem;
-      height: 3rem;
-      background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-hover));
-      border-radius: var(--radius-md);
-      color: white;
-    }
-
-    .content {
-      flex: 1;
-      min-width: 0;
-    }
-
-    .title {
-      font-weight: 600;
-      color: var(--ink-dark);
-    }
-
-    .description {
-      color: var(--ink-medium);
-      margin-top: 2px;
-    }
-
-    .actions {
-      display: flex;
-      align-items: center;
-      gap: var(--space-sm);
-    }
-
-    .close {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: var(--size-close-button);
-      height: var(--size-close-button);
-      padding: 0;
-      border: none;
-      background: transparent;
-      color: var(--ink-light);
-      cursor: pointer;
-      border-radius: var(--radius-sm);
-      transition: var(--transition-fast);
-    }
-
-    .close:hover {
-      background: var(--paper-warm);
-      color: var(--ink-medium);
-    }
-
-    .close svg {
-      width: 1.25rem;
-      height: 1.25rem;
-    }
-
-    @media (max-width: 480px) {
-      .banner {
-        flex-wrap: wrap;
-      }
-
-      .content {
-        flex-basis: calc(100% - 4rem);
-      }
-
-      .actions {
-        flex-basis: 100%;
-        justify-content: flex-end;
-      }
-    }
-  `
-];
-B([
-  n({ type: String })
-], f.prototype, "title", 2);
-B([
-  n({ type: String })
-], f.prototype, "description", 2);
-B([
-  n({ type: String, attribute: "install-label" })
-], f.prototype, "installLabel", 2);
-B([
-  n({ type: String, attribute: "storage-key" })
-], f.prototype, "storageKey", 2);
-B([
-  n({ type: Number, attribute: "dismiss-days" })
-], f.prototype, "dismissDays", 2);
-B([
-  S()
-], f.prototype, "isDismissed", 2);
-f = B([
-  p("tc-installation-banner")
-], f);
-var Ce = Object.defineProperty, _e = Object.getOwnPropertyDescriptor, ft = (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 && Ce(e, s, t), t;
-};
-let J = 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, {
-      showDuration: 300,
-      hideDuration: 200
-    });
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.updateDataState();
-  }
-  updateDataState() {
-    this.dataset.state = this.animation.state;
-  }
-  async show() {
-    await this.animation.show(), this.updateDataState();
-  }
-  async close() {
-    await this.animation.hide(), this.updateDataState(), this.dispatchEvent(
-      new CustomEvent("tc-close", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  handleOverlayClick(r) {
-    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">
-              <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;
-    return l`
-      <div part="step" class="step">
-        <span part="step-number" class="step-number">${e + 1}</span>
-        <tc-text part="step-text" class="step-text" size="base">${i}</tc-text>
-      </div>
-    `;
-  }
-  render() {
-    return l`
-      <div part="overlay" class="overlay" @click=${this.handleOverlayClick}>
-        <div part="modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="guide-title">
-          <div part="header" class="header">
-            <h2 id="guide-title" class="title">${this.title}</h2>
-            <button part="close" class="close" @click=${this.close} aria-label="Close">
-              <svg
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <line x1="18" y1="6" x2="6" y2="18"></line>
-                <line x1="6" y1="6" x2="18" y2="18"></line>
-              </svg>
-            </button>
-          </div>
-          <div part="content" class="content">
-            <div part="steps" class="steps">
-              ${this.steps.map((r, e) => this.renderStep(r, e))}
-            </div>
-          </div>
-          <div part="action" class="action">
-            <tc-button variant="primary" @tc-click=${this.close}>Got it</tc-button>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-};
-J.styles = [
-  u,
-  c`
-    :host {
-      display: contents;
-    }
-
-    .overlay {
-      position: fixed;
-      inset: 0;
-      z-index: 1000;
-      display: flex;
-      align-items: flex-end;
-      justify-content: center;
-      background: var(--overlay-dim);
-      opacity: 0;
-      visibility: hidden;
-      transition: opacity var(--transition-smooth), visibility var(--transition-smooth);
-    }
-
-    :host([data-state='showing']) .overlay,
-    :host([data-state='visible']) .overlay {
-      opacity: 1;
-      visibility: visible;
-    }
-
-    :host([data-state='hiding']) .overlay {
-      opacity: 0;
-    }
-
-    :host([data-state='hidden']) .overlay {
-      visibility: hidden;
-    }
-
-    .modal {
-      width: 100%;
-      max-width: 400px;
-      margin: var(--space-md);
-      padding: var(--space-lg);
-      background: var(--paper-white);
-      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
-      transform: translateY(100%);
-      transition: transform var(--transition-smooth);
-    }
-
-    :host([data-state='showing']) .modal,
-    :host([data-state='visible']) .modal {
-      transform: translateY(0);
-    }
-
-    :host([data-state='hiding']) .modal {
-      transform: translateY(100%);
-    }
-
-    .header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: var(--space-lg);
-    }
-
-    .title {
-      font-family: var(--font-body);
-      font-size: var(--font-size-lg);
-      font-weight: 600;
-      color: var(--ink-dark);
-      margin: 0;
-    }
-
-    .close {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: var(--size-close-button);
-      height: var(--size-close-button);
-      padding: 0;
-      border: none;
-      background: transparent;
-      color: var(--ink-medium);
-      cursor: pointer;
-      border-radius: var(--radius-sm);
-      transition: var(--transition-fast);
-    }
-
-    .close:hover {
-      background: var(--paper-warm);
-      color: var(--ink-dark);
-    }
-
-    .close svg {
-      width: 1.25rem;
-      height: 1.25rem;
-    }
-
-    .steps {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-md);
-    }
-
-    .step {
-      display: flex;
-      align-items: flex-start;
-      gap: var(--space-md);
-    }
-
-    .step-number {
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 1.75rem;
-      height: 1.75rem;
-      background: var(--accent-primary);
-      color: white;
-      font-family: var(--font-body);
-      font-size: var(--font-size-sm);
-      font-weight: 600;
-      border-radius: var(--radius-full);
-    }
-
-    .step-text {
-      flex: 1;
-      padding-top: 2px;
-      color: var(--ink-dark);
-      line-height: 1.5;
-    }
-
-    .share-icon {
-      display: inline-flex;
-      vertical-align: middle;
-      width: 1.25rem;
-      height: 1.25rem;
-      margin: 0 2px;
-      color: var(--accent-primary);
-    }
-
-    .action {
-      margin-top: var(--space-xl);
-    }
-  `
-];
-ft([
-  n({ type: String })
-], J.prototype, "title", 2);
-ft([
-  n({ type: Array })
-], J.prototype, "steps", 2);
-J = ft([
-  p("tc-ios-installation-guide")
-], J);
-var De = Object.defineProperty, Oe = Object.getOwnPropertyDescriptor, U = (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;
-};
-let $ = 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, {
-      showDuration: 300,
-      hideDuration: 200
-    }), this.storage = new bt(this, this.storageKey);
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.updateDataState();
-  }
-  updateDataState() {
-    this.dataset.state = this.animation.state;
-  }
-  /**
-   * Check if the modal should be shown based on stored state.
-   */
-  shouldShow() {
-    const r = this.storage.value;
-    return !(r?.dismissed || r?.permission === "granted");
-  }
-  async show() {
-    this.shouldShow() && (await this.animation.show(), this.updateDataState());
-  }
-  async close() {
-    await this.animation.hide(), this.updateDataState(), this.dispatchEvent(
-      new CustomEvent("tc-close", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  handleOverlayClick(r) {
-    r.target === r.currentTarget && this.handleDeny();
-  }
-  handleAllow() {
-    this.storage.set({ dismissed: !0, permission: "granted" }), this.close(), this.dispatchEvent(
-      new CustomEvent("tc-allow", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  handleDeny() {
-    this.storage.set({ dismissed: !0, permission: "denied" }), this.close(), this.dispatchEvent(
-      new CustomEvent("tc-deny", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  render() {
-    return l`
-      <div part="overlay" class="overlay" @click=${this.handleOverlayClick}>
-        <div
-          part="modal"
-          class="modal"
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby="notification-title"
-          aria-describedby="notification-description"
-        >
-          <div part="icon" class="icon-container">
-            <tc-icon name="bell" size="2rem"></tc-icon>
-          </div>
-          <tc-section part="content" class="content" gap="var(--space-sm)">
-            <tc-text
-              id="notification-title"
-              part="title"
-              class="title"
-              tag="h2"
-              size="lg"
-              weight="600"
-            >
-              ${this.title}
-            </tc-text>
-            <tc-text
-              id="notification-description"
-              part="description"
-              size="base"
-              color="tertiary"
-            >
-              ${this.description}
-            </tc-text>
-          </tc-section>
-          <div part="actions" class="actions">
-            <tc-button variant="primary" @tc-click=${this.handleAllow}>
-              ${this.allowLabel}
-            </tc-button>
-            <button class="deny-button" @click=${this.handleDeny}>
-              ${this.denyLabel}
-            </button>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-};
-$.styles = [
-  u,
-  c`
-    :host {
-      display: contents;
-    }
-
-    .overlay {
-      position: fixed;
-      inset: 0;
-      z-index: 1000;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: var(--space-lg);
-      background: var(--overlay-dim);
-      opacity: 0;
-      visibility: hidden;
-      transition: opacity var(--transition-smooth), visibility var(--transition-smooth);
-    }
-
-    :host([data-state='showing']) .overlay,
-    :host([data-state='visible']) .overlay {
-      opacity: 1;
-      visibility: visible;
-    }
-
-    :host([data-state='hiding']) .overlay {
-      opacity: 0;
-    }
-
-    :host([data-state='hidden']) .overlay {
-      visibility: hidden;
-    }
-
-    .modal {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      width: 100%;
-      max-width: 320px;
-      padding: var(--space-xl);
-      background: var(--paper-white);
-      border-radius: var(--radius-lg);
-      box-shadow: 0 20px 60px var(--overlay-shadow-strong);
-      text-align: center;
-      transform: scale(0.95);
-      transition: transform var(--transition-smooth);
-    }
-
-    :host([data-state='showing']) .modal,
-    :host([data-state='visible']) .modal {
-      transform: scale(1);
-    }
-
-    :host([data-state='hiding']) .modal {
-      transform: scale(0.95);
-    }
-
-    .icon-container {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 4rem;
-      height: 4rem;
-      margin-bottom: var(--space-lg);
-      background: var(--alpha-primary10);
-      border-radius: var(--radius-full);
-      color: var(--accent-primary);
-    }
-
-    .content {
-      margin-bottom: var(--space-xl);
-    }
-
-    .title {
-      margin-bottom: var(--space-sm);
-    }
-
-    .actions {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-sm);
-      width: 100%;
-    }
-
-    .deny-button {
-      background: transparent;
-      border: none;
-      padding: var(--space-sm);
-      font-family: var(--font-body);
-      font-size: var(--font-size-sm);
-      color: var(--ink-medium);
-      cursor: pointer;
-      transition: color var(--transition-fast);
-    }
-
-    .deny-button:hover {
-      color: var(--ink-dark);
-    }
-  `
-];
-U([
-  n({ type: String })
-], $.prototype, "title", 2);
-U([
-  n({ type: String })
-], $.prototype, "description", 2);
-U([
-  n({ type: String, attribute: "allow-label" })
-], $.prototype, "allowLabel", 2);
-U([
-  n({ type: String, attribute: "deny-label" })
-], $.prototype, "denyLabel", 2);
-U([
-  n({ type: String, attribute: "storage-key" })
-], $.prototype, "storageKey", 2);
-$ = U([
-  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;
-};
-let z = 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, {
-      showDuration: 300,
-      hideDuration: 200
-    }), this.handleOnline = () => {
-      this.isOffline = !1, this.hide(), this.dispatchEvent(
-        new CustomEvent("tc-online", {
-          bubbles: !0,
-          composed: !0
-        })
-      );
-    }, this.handleOffline = () => {
-      this.isOffline = !0, this.show(), this.dispatchEvent(
-        new CustomEvent("tc-offline", {
-          bubbles: !0,
-          composed: !0
-        })
-      );
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.updateDataState(), this.autoDetect && (this.isOffline = !navigator.onLine, this.isOffline && this.show(), window.addEventListener("online", this.handleOnline), window.addEventListener("offline", this.handleOffline));
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), window.removeEventListener("online", this.handleOnline), window.removeEventListener("offline", this.handleOffline);
-  }
-  updateDataState() {
-    this.dataset.state = this.animation.state;
-  }
-  async show() {
-    await this.animation.show(), this.updateDataState();
-  }
-  async hide() {
-    await this.animation.hide(), this.updateDataState();
-  }
-  handleRetry() {
-    this.dispatchEvent(
-      new CustomEvent("tc-retry", {
-        bubbles: !0,
-        composed: !0
-      })
-    ), navigator.onLine && this.handleOnline();
-  }
-  render() {
-    return l`
-      <div part="overlay" class="overlay">
-        <div
-          part="modal"
-          class="modal"
-          role="alertdialog"
-          aria-modal="true"
-          aria-labelledby="offline-title"
-          aria-describedby="offline-description"
-        >
-          <div part="icon" class="icon-container">
-            <tc-icon name="wifi-off" size="2rem"></tc-icon>
-          </div>
-          <tc-section part="content" class="content" gap="var(--space-sm)">
-            <tc-text
-              id="offline-title"
-              part="title"
-              class="title"
-              tag="h2"
-              size="lg"
-              weight="600"
-            >
-              ${this.title}
-            </tc-text>
-            <tc-text
-              id="offline-description"
-              part="description"
-              size="base"
-              color="tertiary"
-            >
-              ${this.description}
-            </tc-text>
-          </tc-section>
-          <div part="action" class="action">
-            <tc-button variant="primary" @tc-click=${this.handleRetry}>
-              ${this.retryLabel}
-            </tc-button>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-};
-z.styles = [
-  u,
-  c`
-    :host {
-      display: contents;
-    }
-
-    .overlay {
-      position: fixed;
-      inset: 0;
-      z-index: 1001;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: var(--space-lg);
-      background: var(--overlay-dark);
-      opacity: 0;
-      visibility: hidden;
-      transition: opacity var(--transition-smooth), visibility var(--transition-smooth);
-    }
-
-    :host([data-state='showing']) .overlay,
-    :host([data-state='visible']) .overlay {
-      opacity: 1;
-      visibility: visible;
-    }
-
-    :host([data-state='hiding']) .overlay {
-      opacity: 0;
-    }
-
-    :host([data-state='hidden']) .overlay {
-      visibility: hidden;
-    }
-
-    .modal {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      width: 100%;
-      max-width: 320px;
-      padding: var(--space-xl);
-      background: var(--paper-white);
-      border-radius: var(--radius-lg);
-      box-shadow: 0 20px 60px var(--overlay-shadow-heavy);
-      text-align: center;
-      transform: scale(0.95);
-      transition: transform var(--transition-smooth);
-    }
-
-    :host([data-state='showing']) .modal,
-    :host([data-state='visible']) .modal {
-      transform: scale(1);
-    }
-
-    :host([data-state='hiding']) .modal {
-      transform: scale(0.95);
-    }
-
-    .icon-container {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 4rem;
-      height: 4rem;
-      margin-bottom: var(--space-lg);
-      background: var(--error-bg);
-      border-radius: var(--radius-full);
-      color: var(--error-base);
-    }
-
-    .content {
-      margin-bottom: var(--space-xl);
-    }
-
-    .title {
-      margin-bottom: var(--space-sm);
-    }
-
-    .action {
-      width: 100%;
-    }
-  `
-];
-R([
-  n({ type: String })
-], z.prototype, "title", 2);
-R([
-  n({ type: String })
-], z.prototype, "description", 2);
-R([
-  n({ type: String, attribute: "retry-label" })
-], z.prototype, "retryLabel", 2);
-R([
-  n({ type: Boolean, attribute: "auto-detect" })
-], z.prototype, "autoDetect", 2);
-R([
-  S()
-], z.prototype, "isOffline", 2);
-z = R([
-  p("tc-offline-modal")
-], z);
-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;
-};
-let at = class extends d {
-  constructor() {
-    super(...arguments), this.variant = "primary";
-  }
-  render() {
-    return l`
-      <div part="decoration" class="decoration">
-        <div part="blob" class="blob blob-1"></div>
-        <div part="blob" class="blob blob-2"></div>
-        <div part="blob" class="blob blob-3"></div>
-      </div>
-    `;
-  }
-};
-at.styles = [
-  u,
-  c`
-    :host {
-      position: fixed;
-      inset: 0;
-      pointer-events: none;
-      z-index: 0;
-      overflow: hidden;
-    }
-
-    .decoration {
-      position: absolute;
-      inset: 0;
-    }
-
-    .blob {
-      position: absolute;
-      border-radius: 50%;
-      opacity: 0.35;
-      filter: blur(0.0625rem);
-    }
-
-    /* Primary (purple) variant */
-    :host([variant='primary']) .blob {
-      background: radial-gradient(
-        circle,
-        var(--accent-primary) 0%,
-        transparent 70%
-      );
-    }
-
-    /* Success (green) variant */
-    :host([variant='success']) .blob {
-      background: radial-gradient(
-        circle,
-        var(--accent-success) 0%,
-        transparent 70%
-      );
-    }
-
-    /* Error (red) variant */
-    :host([variant='error']) .blob {
-      background: radial-gradient(
-        circle,
-        var(--error-base) 0%,
-        transparent 70%
-      );
-    }
-
-    .blob-1 {
-      width: 18rem;
-      height: 18rem;
-      top: -6rem;
-      left: -5rem;
-      animation: decorFloat 12s ease-in-out infinite;
-    }
-
-    .blob-2 {
-      width: 14rem;
-      height: 14rem;
-      top: 30%;
-      right: -6rem;
-      animation: decorFloat 10s ease-in-out infinite reverse;
-    }
-
-    .blob-3 {
-      width: 20rem;
-      height: 20rem;
-      bottom: -8rem;
-      left: 20%;
-      animation: decorFloat 14s ease-in-out infinite 2s;
-    }
-
-    @keyframes decorFloat {
-      0%,
-      100% {
-        transform: translate(0, 0) scale(1);
-      }
-      33% {
-        transform: translate(0.375rem, -0.5rem) scale(1.08);
-      }
-      66% {
-        transform: translate(-0.25rem, -0.25rem) scale(1.15);
-      }
-    }
-
-    /* Reduced motion */
-    @media (prefers-reduced-motion: reduce) {
-      .blob {
-        animation: none;
-      }
-    }
-  `
-];
-xt([
-  n({ type: String })
-], at.prototype, "variant", 2);
-at = xt([
-  p("tc-page-decoration")
-], at);
-export {
-  j as AnimationController,
-  P as BaseController,
-  He as FormValidationController,
-  Ct as HistoryController,
-  _t as LoadingController,
-  Dt as MatchMediaController,
-  Ot as MessageBusController,
-  bt as StorageController,
-  it as TcBox,
-  C as TcButton,
-  st as TcCallout,
-  K as TcCard,
-  N as TcChip,
-  W as TcContainer,
-  L 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,
-  z as TcOfflineModal,
-  w as TcOtpInput,
-  at as TcPageDecoration,
-  X as TcSection,
-  G as TcSpinner,
-  k as TcSuccessScreen,
-  I as TcSymbol,
-  x as TcText,
-  _ as TcToast
-};