@transcodes/ui-components 0.1.0

package/dist/ui-components.js

@@ -0,0 +1,4372 @@
+import "@transcodes/design-tokens";
+import { css as c, LitElement as d, html as l, unsafeCSS as kt } from "lit";
+import { property as n, customElement as p, state as S } from "lit/decorators.js";
+import { styleMap as m } from "lit/directives/style-map.js";
+import { classMap as B } from "lit/directives/class-map.js";
+import { unsafeStatic as $t, html as _t } from "lit/static-html.js";
+class P {
+  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 Fe 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 zt 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((ct) => {
+          ct(a);
+        }), this.wildcardHandlers.forEach((ct) => {
+          ct(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, Lt = Object.getOwnPropertyDescriptor, Z = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? Lt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
+  return i && t && Et(e, s, t), t;
+};
+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=${B(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 Bt = Object.defineProperty, Tt = Object.getOwnPropertyDescriptor, wt = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? Tt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
+  return i && t && Bt(e, s, t), t;
+};
+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=${B(e)} role="alert">
+        <slot></slot>
+      </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;
+      }
+    `
+];
+wt([
+  n({ type: String })
+], st.prototype, "variant", 2);
+st = wt([
+  p("tc-callout")
+], st);
+var At = Object.defineProperty, Mt = Object.getOwnPropertyDescriptor, dt = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? Mt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
+  return i && t && At(e, s, t), t;
+};
+let N = 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=${B(r)} style=${m(this.sx)}>
+        <div class="card-content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+N.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;
+      }
+    `
+];
+dt([
+  n({ type: Boolean, attribute: "no-border" })
+], N.prototype, "noBorder", 2);
+dt([
+  n({ type: Object })
+], N.prototype, "sx", 2);
+N = dt([
+  p("tc-card")
+], N);
+var It = Object.defineProperty, Ft = Object.getOwnPropertyDescriptor, pt = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? Ft(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
+  return i && t && It(e, s, t), t;
+};
+let K = 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>
+    `;
+  }
+};
+K.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);
+      }
+    `
+];
+pt([
+  n({ type: String })
+], K.prototype, "variant", 2);
+pt([
+  n({ type: String })
+], K.prototype, "size", 2);
+K = pt([
+  p("tc-chip")
+], K);
+var qt = Object.defineProperty, Yt = Object.getOwnPropertyDescriptor, ht = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? Yt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
+  return i && t && qt(e, s, t), t;
+};
+let V = 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>
+    `;
+  }
+};
+V.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);
+    }
+  `;
+ht([
+  n({ type: Boolean })
+], V.prototype, "wide", 2);
+ht([
+  n({ type: Object })
+], V.prototype, "sx", 2);
+V = ht([
+  p("tc-container")
+], V);
+var Ut = Object.defineProperty, Ht = Object.getOwnPropertyDescriptor, ut = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? Ht(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
+  return i && t && Ut(e, s, t), t;
+};
+let W = class extends d {
+  constructor() {
+    super(...arguments), this.color = "var(--ink-faint)", this.spacing = "var(--space-md)";
+  }
+  render() {
+    return l`
+      <hr
+        part="divider"
+        class="divider"
+        style="--divider-color: ${this.color}; --divider-spacing: ${this.spacing};"
+      />
+    `;
+  }
+};
+W.styles = c`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    .divider {
+      border: none;
+      height: 1px;
+      background-color: var(--divider-color);
+      margin: var(--divider-spacing) 0;
+    }
+  `;
+ut([
+  n({ type: String })
+], W.prototype, "color", 2);
+ut([
+  n({ type: String })
+], W.prototype, "spacing", 2);
+W = ut([
+  p("tc-divider")
+], W);
+var Rt = Object.defineProperty, Nt = Object.getOwnPropertyDescriptor, I = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? Nt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
+  return i && t && Rt(e, s, t), t;
+};
+let b = class extends d {
+  constructor() {
+    super(...arguments), this.title = "", this.subtitle = "", this.notice = "", this.noAnimation = !1, this.sx = {};
+  }
+  render() {
+    const r = !this.noAnimation;
+    return l`
+      <header part="header" class="header" style=${m(this.sx)}>
+        ${this.title ? l`<h1 part="title" class="form-title ${r ? "form-title--animated" : ""}">
+              ${this.title}
+            </h1>` : ""}
+        ${this.subtitle ? l`<p part="subtitle" class="form-subtitle ${r ? "form-subtitle--animated" : ""}">
+              ${this.subtitle}
+            </p>` : ""}
+        ${this.notice ? l`<div part="notice" class="notice ${r ? "notice--animated" : ""}">
+              ${this.notice}
+            </div>` : ""}
+      </header>
+    `;
+  }
+};
+b.styles = [
+  u,
+  c`
+      :host {
+        display: block;
+        text-align: center;
+      }
+
+      .header {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--space-sm);
+      }
+
+      /* Extend design-tokens .form-title */
+      .form-title {
+        margin: 0;
+        line-height: 1.2;
+      }
+
+      .form-title--animated {
+        animation: slideDown var(--duration-fast) var(--easing-ease-in-out) backwards;
+      }
+
+      /* Extend design-tokens .form-subtitle */
+      .form-subtitle {
+        margin: 0;
+        max-width: 28ch;
+      }
+
+      .form-subtitle--animated {
+        animation: slideUp var(--duration-smooth) var(--easing-ease-in-out) 100ms backwards;
+      }
+
+      .notice {
+        margin-top: var(--space-sm);
+        padding: var(--space-sm) var(--space-md);
+        background: var(--paper-warm);
+        border-radius: var(--radius-md);
+        font-size: var(--font-size-sm);
+        color: var(--ink-medium);
+      }
+
+      .notice--animated {
+        animation: noticeReveal 500ms var(--easing-ease-in-out) 200ms backwards;
+      }
+
+      @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;
+        }
+      }
+    `
+];
+I([
+  n({ type: String })
+], b.prototype, "title", 2);
+I([
+  n({ type: String })
+], b.prototype, "subtitle", 2);
+I([
+  n({ type: String })
+], b.prototype, "notice", 2);
+I([
+  n({ type: Boolean, attribute: "no-animation" })
+], b.prototype, "noAnimation", 2);
+I([
+  n({ type: Object })
+], b.prototype, "sx", 2);
+b = I([
+  p("tc-form-header")
+], b);
+var Kt = Object.defineProperty, Vt = Object.getOwnPropertyDescriptor, ot = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? Vt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
+  return i && t && Kt(e, s, t), t;
+};
+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>`
+};
+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);
+    }
+  `;
+ot([
+  n({ type: String })
+], T.prototype, "name", 2);
+ot([
+  n({ type: String })
+], T.prototype, "size", 2);
+ot([
+  n({ type: String })
+], T.prototype, "color", 2);
+T = ot([
+  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=${B(e)}>
+        ${this.label ? l`<label part="label" class="field-label" for=${this.inputId}>${this.label}</label>` : ""}
+        <div part="wrapper" class=${B(s)}>
+          <input
+            part="input"
+            id=${this.inputId}
+            class=${B(i)}
+            type=${this.type}
+            name=${this.name}
+            placeholder=${this.placeholder}
+            .value=${this.value}
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            autocomplete=${this.autocomplete || "off"}
+            inputmode=${this.inputmode || ""}
+            maxlength=${this.maxlength || ""}
+            aria-invalid=${r ? "true" : "false"}
+            aria-describedby=${r ? `${this.inputId}-error` : ""}
+            style=${m(this.sx)}
+            @input=${this.handleInput}
+            @focus=${this.handleFocus}
+            @blur=${this.handleBlur}
+          />
+          <div part="ink-line" class="ink-line"></div>
+        </div>
+        ${r ? l`<p part="error" id="${this.inputId}-error" class="input-error-text" role="alert">
+              ${this.error}
+            </p>` : ""}
+      </div>
+    `;
+  }
+  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 }
+      })
+    );
+  }
+  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, nt = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? Jt(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
+  return i && t && Qt(e, s, t), t;
+};
+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;
+    }
+  `;
+nt([
+  n({ type: String })
+], A.prototype, "gap", 2);
+nt([
+  n({ type: String })
+], A.prototype, "padding", 2);
+nt([
+  n({ type: Object })
+], A.prototype, "sx", 2);
+A = nt([
+  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, q = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? re(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
+  return i && t && ee(e, s, t), t;
+};
+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;
+        }
+      }
+    `
+];
+q([
+  n({ type: Number })
+], w.prototype, "length", 2);
+q([
+  n({ type: Boolean })
+], w.prototype, "error", 2);
+q([
+  n({ type: Boolean })
+], w.prototype, "disabled", 2);
+q([
+  n({ type: Boolean, attribute: "show-progress" })
+], w.prototype, "showProgress", 2);
+q([
+  S()
+], w.prototype, "values", 2);
+w = q([
+  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, lt = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? le(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
+  return i && t && ne(e, s, t), t;
+};
+let M = class extends d {
+  constructor() {
+    super(...arguments), this.size = "3rem", this.background = "var(--paper-cream)", this.color = "var(--ink-dark)";
+  }
+  render() {
+    return l`
+      <div
+        part="symbol"
+        class="symbol"
+        style="--symbol-size: ${this.size}; --symbol-bg: ${this.background}; --symbol-color: ${this.color};"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+M.styles = c`
+    :host {
+      display: inline-flex;
+    }
+
+    .symbol {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--radius-full);
+      background: var(--symbol-bg);
+      color: var(--symbol-color);
+      width: var(--symbol-size);
+      height: var(--symbol-size);
+      font-family: var(--font-body);
+      font-weight: 600;
+    }
+  `;
+lt([
+  n({ type: String })
+], M.prototype, "size", 2);
+lt([
+  n({ type: String })
+], M.prototype, "background", 2);
+lt([
+  n({ type: String })
+], M.prototype, "color", 2);
+M = lt([
+  p("tc-symbol")
+], M);
+var ce = Object.defineProperty, de = Object.getOwnPropertyDescriptor, Y = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? de(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
+  return i && t && ce(e, s, t), t;
+};
+let x = class extends d {
+  constructor() {
+    super(...arguments), this.tag = "p", this.sx = {};
+  }
+  getColorClass() {
+    return this.color && {
+      primary: "text--primary",
+      secondary: "text--secondary",
+      tertiary: "text--tertiary",
+      muted: "text--muted",
+      accent: "text--accent",
+      success: "text--success",
+      error: "text--error",
+      warning: "text--warning",
+      info: "text--info"
+    }[this.color] || "";
+  }
+  getColorStyle() {
+    if (this.color && (this.color.startsWith("var(") || this.color.startsWith("#") || this.color.startsWith("rgb")))
+      return this.color;
+  }
+  render() {
+    const r = $t(this.tag), e = [
+      "text",
+      this.size ? `text--${this.size}` : "",
+      this.weight ? `text--w${this.weight}` : "",
+      this.getColorClass()
+    ].filter(Boolean).join(" "), s = this.getColorStyle(), i = {
+      ...s ? { color: s } : {},
+      ...this.sx
+    };
+    return _t`
+      <${r} part="text" class=${e} style=${m(i)}>
+        <slot></slot>
+      </${r}>
+    `;
+  }
+};
+x.styles = [
+  u,
+  c`
+      :host {
+        display: contents;
+      }
+
+      .text {
+        margin: 0;
+        padding: 0;
+        font-family: var(--font-body);
+        line-height: 1.4;
+        color: var(--ink-black);
+      }
+
+      /* Size variants using design-tokens */
+      .text--sm {
+        font-size: var(--font-size-sm);
+      }
+      .text--base {
+        font-size: var(--font-size-base);
+      }
+      .text--lg {
+        font-size: var(--font-size-lg);
+      }
+      .text--xl {
+        font-size: var(--font-size-xl);
+      }
+      .text--2xl {
+        font-size: var(--font-size-2xl);
+      }
+
+      /* Weight variants */
+      .text--w400 {
+        font-weight: 400;
+      }
+      .text--w500 {
+        font-weight: 500;
+      }
+      .text--w600 {
+        font-weight: 600;
+      }
+      .text--w700 {
+        font-weight: 700;
+      }
+
+      /* Color variants using design-tokens - these will respond to theme changes */
+      .text--primary {
+        color: var(--ink-black);
+      }
+      .text--secondary {
+        color: var(--ink-dark);
+      }
+      .text--tertiary {
+        color: var(--ink-medium);
+      }
+      .text--muted {
+        color: var(--ink-light);
+      }
+      .text--accent {
+        color: var(--accent-primary);
+      }
+      .text--success {
+        color: var(--accent-success);
+      }
+      .text--error {
+        color: var(--error-base);
+      }
+      .text--warning {
+        color: var(--semantic-warning);
+      }
+      .text--info {
+        color: var(--semantic-info);
+      }
+    `
+];
+Y([
+  n({ type: String })
+], x.prototype, "tag", 2);
+Y([
+  n({ type: String })
+], x.prototype, "size", 2);
+Y([
+  n({ type: String })
+], x.prototype, "weight", 2);
+Y([
+  n({ type: String })
+], x.prototype, "color", 2);
+Y([
+  n({ type: Object })
+], x.prototype, "sx", 2);
+x = Y([
+  p("tc-text")
+], x);
+var pe = Object.defineProperty, he = Object.getOwnPropertyDescriptor, tt = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? he(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
+  return i && t && pe(e, s, t), t;
+};
+let z = 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>
+    `;
+  }
+};
+z.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 })
+], z.prototype, "variant", 2);
+tt([
+  n({ type: Number })
+], z.prototype, "duration", 2);
+tt([
+  n({ type: Boolean, attribute: "auto-dismiss" })
+], z.prototype, "autoDismiss", 2);
+tt([
+  n({ type: Boolean })
+], z.prototype, "dismissible", 2);
+z = tt([
+  p("tc-toast")
+], z);
+var ue = Object.defineProperty, ve = Object.getOwnPropertyDescriptor, et = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? ve(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
+  return i && t && ue(e, s, t), t;
+};
+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 zt(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, U = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? be(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
+  return i && t && fe(e, s, t), t;
+};
+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);
+    }
+  `;
+U([
+  n({ type: String })
+], k.prototype, "title", 2);
+U([
+  n({ type: String })
+], k.prototype, "message", 2);
+U([
+  n({ type: String, attribute: "action-label" })
+], k.prototype, "actionLabel", 2);
+U([
+  n({ type: Boolean, attribute: "auto-animate" })
+], k.prototype, "autoAnimate", 2);
+U([
+  S()
+], k.prototype, "isAnimated", 2);
+k = U([
+  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, _e = Object.getOwnPropertyDescriptor, L = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? _e(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
+  return i && t && $e(e, s, t), t;
+};
+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;
+      }
+    }
+  `
+];
+L([
+  n({ type: String })
+], f.prototype, "title", 2);
+L([
+  n({ type: String })
+], f.prototype, "description", 2);
+L([
+  n({ type: String, attribute: "install-label" })
+], f.prototype, "installLabel", 2);
+L([
+  n({ type: String, attribute: "storage-key" })
+], f.prototype, "storageKey", 2);
+L([
+  n({ type: Number, attribute: "dismiss-days" })
+], f.prototype, "dismissDays", 2);
+L([
+  S()
+], f.prototype, "isDismissed", 2);
+f = L([
+  p("tc-installation-banner")
+], f);
+var Ce = Object.defineProperty, ze = Object.getOwnPropertyDescriptor, ft = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? ze(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
+  return i && t && Ce(e, s, t), t;
+};
+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, H = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? Oe(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
+  return i && t && De(e, s, t), t;
+};
+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);
+    }
+  `
+];
+H([
+  n({ type: String })
+], $.prototype, "title", 2);
+H([
+  n({ type: String })
+], $.prototype, "description", 2);
+H([
+  n({ type: String, attribute: "allow-label" })
+], $.prototype, "allowLabel", 2);
+H([
+  n({ type: String, attribute: "deny-label" })
+], $.prototype, "denyLabel", 2);
+H([
+  n({ type: String, attribute: "storage-key" })
+], $.prototype, "storageKey", 2);
+$ = H([
+  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 _ = 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>
+    `;
+  }
+};
+_.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 })
+], _.prototype, "title", 2);
+R([
+  n({ type: String })
+], _.prototype, "description", 2);
+R([
+  n({ type: String, attribute: "retry-label" })
+], _.prototype, "retryLabel", 2);
+R([
+  n({ type: Boolean, attribute: "auto-detect" })
+], _.prototype, "autoDetect", 2);
+R([
+  S()
+], _.prototype, "isOffline", 2);
+_ = R([
+  p("tc-offline-modal")
+], _);
+var je = Object.defineProperty, Ee = Object.getOwnPropertyDescriptor, xt = (r, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? Ee(e, s) : e, a = r.length - 1, o; a >= 0; a--)
+    (o = r[a]) && (t = (i ? o(e, s, t) : o(t)) || t);
+  return i && t && je(e, s, t), t;
+};
+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,
+  Fe as FormValidationController,
+  Ct as HistoryController,
+  zt as LoadingController,
+  Dt as MatchMediaController,
+  Ot as MessageBusController,
+  bt as StorageController,
+  it as TcBox,
+  C as TcButton,
+  st as TcCallout,
+  N as TcCard,
+  K as TcChip,
+  V as TcContainer,
+  W as TcDivider,
+  D as TcErrorScreen,
+  O as TcFloatingButton,
+  b as TcFormHeader,
+  T as TcIcon,
+  g as TcIframeModal,
+  h as TcInput,
+  f as TcInstallationBanner,
+  J as TcIosInstallationGuide,
+  A as TcItem,
+  y as TcItemButton,
+  Q as TcLoadingScreen,
+  $ as TcNotificationModal,
+  _ as TcOfflineModal,
+  w as TcOtpInput,
+  at as TcPageDecoration,
+  X as TcSection,
+  G as TcSpinner,
+  k as TcSuccessScreen,
+  M as TcSymbol,
+  x as TcText,
+  z as TcToast
+};