@transcodes/ui-components 0.3.0 → 0.3.1

package/dist/widgets/tc-offline-modal.js

@@ -0,0 +1,202 @@
+import { LitElement as c, html as h, css as p } from "lit";
+import { property as o, state as f, customElement as v } from "lit/decorators.js";
+import { AnimationController as m } from "../controllers/animation.controller.js";
+import { sharedStyles as y } from "../styles/shared.js";
+var u = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (d, a, s, n) => {
+  for (var e = n > 1 ? void 0 : n ? b(a, s) : a, r = d.length - 1, l; r >= 0; r--)
+    (l = d[r]) && (e = (n ? l(a, s, e) : l(e)) || e);
+  return n && e && u(a, s, e), e;
+};
+let t = class extends c {
+  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 m(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 h`
+      <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>
+    `;
+  }
+};
+t.styles = [
+  y,
+  p`
+    :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%;
+    }
+  `
+];
+i([
+  o({ type: String })
+], t.prototype, "title", 2);
+i([
+  o({ type: String })
+], t.prototype, "description", 2);
+i([
+  o({ type: String, attribute: "retry-label" })
+], t.prototype, "retryLabel", 2);
+i([
+  o({ type: Boolean, attribute: "auto-detect" })
+], t.prototype, "autoDetect", 2);
+i([
+  f()
+], t.prototype, "isOffline", 2);
+t = i([
+  v("tc-offline-modal")
+], t);
+export {
+  t as TcOfflineModal
+};

package/dist/widgets/tc-page-decoration.js

@@ -0,0 +1,126 @@
+import { LitElement as c, html as b, css as d } from "lit";
+import { property as m, customElement as p } from "lit/decorators.js";
+import { sharedStyles as v } from "../styles/shared.js";
+var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, l = (s, e, o, t) => {
+  for (var r = t > 1 ? void 0 : t ? f(e, o) : e, i = s.length - 1, n; i >= 0; i--)
+    (n = s[i]) && (r = (t ? n(e, o, r) : n(r)) || r);
+  return t && r && u(e, o, r), r;
+};
+let a = class extends c {
+  constructor() {
+    super(...arguments), this.variant = "primary";
+  }
+  render() {
+    return b`
+      <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>
+    `;
+  }
+};
+a.styles = [
+  v,
+  d`
+    :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;
+      }
+    }
+  `
+];
+l([
+  m({ type: String })
+], a.prototype, "variant", 2);
+a = l([
+  p("tc-page-decoration")
+], a);
+export {
+  a as TcPageDecoration
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transcodes/ui-components",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "private": false,
   "description": "Lit 3.x component library with Reactive Controllers",
   "keywords": [
@@ -28,19 +28,37 @@
     "access": "public"
   },
   "type": "module",
-  "main": "./dist/ui-components.js",
-  "module": "./dist/ui-components.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "sideEffects": false,
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/ui-components.js"
+      "import": "./dist/index.js"
     },
-    "./styles.css": "./dist/ui-components.css"
+    "./primitives": {
+      "types": "./dist/primitives/index.d.ts",
+      "import": "./dist/primitives/index.js"
+    },
+    "./widgets": {
+      "types": "./dist/widgets/index.d.ts",
+      "import": "./dist/widgets/index.js"
+    },
+    "./screens": {
+      "types": "./dist/screens/index.d.ts",
+      "import": "./dist/screens/index.js"
+    },
+    "./controllers": {
+      "types": "./dist/controllers/index.d.ts",
+      "import": "./dist/controllers/index.js"
+    }
   },
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
   ],
   "scripts": {
     "build": "tsc && vite build",
@@ -54,7 +72,7 @@
     "lit": "^3.0.0"
   },
   "dependencies": {
-    "@transcodes/design-tokens": "^0.3.0"
+    "@transcodes/design-tokens": "^0.3.1"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.1.5",

package/dist/ui-components.css

@@ -1 +0,0 @@
-:root,[data-theme=light]{--duration-instant: .15s;--duration-fast: .3s;--duration-smooth: .4s;--duration-slow: .6s;--duration-slower: .8s;--easing-ease: ease;--easing-ease-in-out: cubic-bezier(.4, 0, .2, 1);--easing-bounce: cubic-bezier(.34, 1.56, .64, 1);--ink-effect-ripple-duration: .6s;--ink-effect-ripple-easing: cubic-bezier(.4, 0, .2, 1);--ink-effect-spread-scale: 2.5;--ink-effect-fade-duration: .3s;--transition-fast: .15s ease;--transition-smooth: .3s cubic-bezier(.4, 0, .2, 1);--transition-bounce: .4s cubic-bezier(.34, 1.56, .64, 1);--opacity-disabled: .6;--opacity-hover: .7;--opacity-loading: .6;--opacity-hidden: 0;--opacity-visible: 1;--brand-primary: #7c5cff;--brand-primary-hover: #6a4ae8;--brand-logo-text: #1a1a1a;--accent-primary: #6b4fd9;--accent-primary-hover: #5a3fc8;--accent-primary-pressed: #4a32b0;--accent-success: #357a46;--accent-success-hover: #2d6a3c;--accent-success-pressed: #255a32;--alpha-primary04: rgba(124, 92, 255, .04);--alpha-primary08: rgba(124, 92, 255, .08);--alpha-primary10: rgba(124, 92, 255, .1);--alpha-primary12: rgba(124, 92, 255, .12);--alpha-primary15: rgba(124, 92, 255, .15);--alpha-primary20: rgba(124, 92, 255, .2);--alpha-primary30: rgba(124, 92, 255, .3);--alpha-primary40: rgba(124, 92, 255, .4);--alpha-primary50: rgba(124, 92, 255, .5);--alpha-success10: rgba(61, 138, 80, .1);--alpha-success15: rgba(61, 138, 80, .15);--alpha-success20: rgba(61, 138, 80, .2);--alpha-success30: rgba(61, 138, 80, .3);--alpha-warning08: rgba(180, 83, 9, .08);--alpha-warning15: rgba(180, 83, 9, .15);--alpha-warning20: rgba(180, 83, 9, .2);--alpha-info08: rgba(3, 105, 161, .08);--alpha-info15: rgba(3, 105, 161, .15);--alpha-info20: rgba(3, 105, 161, .2);--alpha-ink04: rgba(26, 26, 26, .04);--alpha-ink06: rgba(26, 26, 26, .06);--alpha-ink10: rgba(26, 26, 26, .1);--alpha-white15: rgba(255, 255, 255, .15);--alpha-white30: rgba(255, 255, 255, .3);--alpha-white90: rgba(255, 255, 255, .9);--error-base: #c0392b;--error-bg: rgba(231, 76, 60, .08);--error-border: rgba(231, 76, 60, .2);--ink-black: #1a1a1a;--ink-dark: #2d2d2d;--ink-medium: #5c5c5c;--ink-light: #8a8a8a;--ink-faint: #c4c4c4;--overlay-dim: rgba(0, 0, 0, .5);--overlay-dark: rgba(0, 0, 0, .7);--overlay-shadow-light: rgba(0, 0, 0, .1);--overlay-shadow-subtle: rgba(0, 0, 0, .15);--overlay-shadow-medium: rgba(0, 0, 0, .2);--overlay-shadow-strong: rgba(0, 0, 0, .3);--overlay-shadow-heavy: rgba(0, 0, 0, .4);--overlay-glow-white: rgba(255, 255, 255, .15);--overlay-spinner-track: rgba(255, 255, 255, .3);--paper-white: #faf9fc;--paper-cream: #f5f4f8;--paper-warm: #ebe9f0;--semantic-warning: #b45309;--semantic-warning-hover: #92400e;--semantic-warning-bg: #fff8e1;--semantic-warning-light: #fef3c7;--semantic-success-bg: #d1fae5;--semantic-info: #0369a1;--semantic-info-hover: #075985;--semantic-info-bg: #e0f2fe;--button-height: 3.25rem;--button-height-secondary: 3rem;--button-radius: .625rem;--button-font-size: .9375rem;--button-font-weight: 500;--button-letter-spacing: .02em;--button-dark-hover: #2a2a2a;--button-text-height: 2.5rem;--button-text-font-size: .875rem;--button-spinner-size: 1rem;--button-spinner-border-width: 2px;--container-max-width: 25rem;--container-max-width-wide: 26.25rem;--feedback-error-icon-size: 1rem;--feedback-notice-icon-size: 1.25rem;--input-padding-y: .875rem;--input-padding-x: 1rem;--input-radius: .625rem;--input-font-size: 1rem;--label-font-size: .75rem;--label-font-weight: 500;--label-letter-spacing: .08em;--title-font-size: clamp(1.375rem, 1.27rem + .54vw, 1.75rem);--title-font-weight: 600;--title-letter-spacing: -.02em;--form-subtitle-font-size: .9375rem;--page-container-max-width: 25rem;--page-container-max-width-wide: 26.25rem;--radius-sm: .5rem;--radius-md: .625rem;--radius-lg: .75rem;--radius-full: 9999px;--radius-card: clamp(.75rem, .59rem + .78vw, 1rem);--shadow-card: 0 .0625rem .1875rem rgba(26, 26, 26, .04), 0 .375rem 1rem rgba(26, 26, 26, .06), 0 1.5rem 3rem rgba(26, 26, 26, .06);--shadow-button-hover-primary: 0 .25rem .75rem rgba(124, 92, 255, .3), 0 .125rem .25rem rgba(124, 92, 255, .2);--shadow-button-hover-success: 0 .25rem .75rem rgba(61, 138, 80, .3), 0 .125rem .25rem rgba(61, 138, 80, .2);--shadow-input-focus: 0 0 0 .1875rem rgba(124, 92, 255, .12), inset 0 .0625rem .125rem rgba(26, 26, 26, .04);--shadow-overlay: 0 .25rem .5rem rgba(0, 0, 0, .1);--shadow-modal: 0 1.5rem 3rem rgba(0, 0, 0, .15);--shadow-otp-cell-focus: 0 0 0 .25rem rgba(124, 92, 255, .1);--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--z-index-dropdown: 1000;--z-index-sticky: 1020;--z-index-fixed: 1030;--z-index-modal-backdrop: 1040;--z-index-modal: 1050;--z-index-popover: 1060;--z-index-tooltip: 1070;--size-icon-sm: 1rem;--size-icon-md: 1.5rem;--size-icon-lg: 2rem;--size-icon-xl: 2.5rem;--size-spinner-sm: 1rem;--size-spinner-md: 2rem;--size-spinner-lg: 4rem;--size-spinner-button: 1.125rem;--size-border-width-thin: .0625rem;--size-border-width-base: .09375rem;--size-border-width-thick: .125rem;--size-border-width-heavy: .1875rem;--size-border-width-bold: .25rem;--size-chip-padding-sm: .125rem .5rem;--size-chip-padding-md: .25rem .75rem;--size-close-button: 2rem;--space-fixed-2xs: .0625rem;--space-fixed-xs: .125rem;--space-fixed-sm: .25rem;--space-fixed-md: .5rem;--space-xs: clamp(.25rem, .23rem + .11vw, .3125rem);--space-sm: clamp(.5rem, .46rem + .22vw, .625rem);--space-md: clamp(.875rem, .77rem + .54vw, 1.25rem);--space-lg: clamp(1.25rem, 1.03rem + 1.09vw, 2rem);--space-xl: clamp(1.5rem, 1.15rem + 1.74vw, 2.75rem);--space-2xl: clamp(2rem, 1.35rem + 3.26vw, 4.5rem);--font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-size-sm: clamp(.8125rem, .78rem + .16vw, .9375rem);--font-size-base: clamp(.875rem, .83rem + .22vw, 1rem);--font-size-lg: clamp(1rem, .93rem + .33vw, 1.25rem);--font-size-xl: clamp(1.25rem, 1.14rem + .54vw, 1.5rem);--font-size-2xl: clamp(1.5rem, 1.35rem + .76vw, 1.875rem);--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--button-dark: var(--ink-black);--button-light: var(--paper-cream);--button-light-hover: var(--paper-warm);--button-text-padding-sm: var(--space-xs) var(--space-sm);--button-text-padding-md: var(--space-sm) var(--space-md);--button-content-gap: var(--space-sm);--card-padding: var(--space-lg);--card-radius: var(--radius-card);--feedback-error-padding: var(--space-md);--feedback-error-radius: var(--radius-md);--feedback-error-gap: var(--space-sm);--feedback-notice-padding: var(--space-md);--feedback-notice-radius: var(--radius-md);--feedback-notice-gap: var(--space-sm);--form-header-margin-bottom: var(--space-xl);--form-fields-gap: var(--space-lg);--form-footer-margin-top: var(--space-lg);--field-group-gap: var(--space-sm);--page-container-padding: var(--space-lg);--page-card-padding: var(--space-xl);--page-card-radius: var(--radius-lg)}[data-theme=dark]{--ink-black: #ffffff;--ink-dark: #e5e5e5;--ink-medium: #a3a3a3;--ink-light: #737373;--ink-faint: #525252;--paper-white: #1a1a1a;--paper-cream: #2d2d2d;--paper-warm: #404040;--accent-primary: #a78bfa;--accent-primary-hover: #c4b5fd;--accent-primary-pressed: #8b5cf6;--accent-success: #4ade80;--accent-success-hover: #86efac;--accent-success-pressed: #22c55e;--semantic-warning: #fbbf24;--semantic-warning-hover: #fcd34d;--semantic-info: #38bdf8;--semantic-info-hover: #7dd3fc;--error-base: #f87171;--error-bg: rgba(248, 113, 113, .12);--error-border: rgba(248, 113, 113, .3)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-.25rem)}75%{transform:translate(.25rem)}}@keyframes inkFloat{0%,to{transform:translate(0) scale(1);opacity:.5}50%{transform:translate(.625rem,-.625rem) scale(1.1);opacity:.7}}@keyframes inkDrift{0%,to{transform:translate(0) rotate(0);opacity:.4}33%{transform:translate(-.5rem,.5rem) rotate(-5deg);opacity:.6}66%{transform:translate(.375rem,-.375rem) rotate(3deg);opacity:.5}}@keyframes inkSpread{0%{transform:scale(0);opacity:.4}to{transform:scale(var(--ink-effect-spread-scale, 2.5));opacity:0}}.page-container{position:relative;width:100%;max-width:var(--page-container-max-width);margin:0 auto;padding:0 var(--page-container-padding);animation:fadeInUp .6s 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{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}.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:.7}.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:.8125rem}.text-button-md{height:auto;padding:var(--space-sm) var(--space-md)}.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{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 .6s linear infinite}.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,.5) 0%,transparent 70%);transform:translate(-50%,-50%) scale(0);border-radius:50%;pointer-events:none;transition:transform var(--ink-effect-ripple-duration, .6s) var(--ink-effect-ripple-easing, cubic-bezier(.4, 0, .2, 1)),opacity var(--ink-effect-fade-duration, .3s) ease;opacity:0}.button-ink:hover:after{transform:translate(-50%,-50%) scale(1);opacity:1}.button-ink:active:after{transform:translate(-50%,-50%) scale(.8);opacity:.8}.card{background:var(--paper-white);padding:var(--card-padding);border-radius:var(--card-radius);box-shadow:var(--shadow-card);position:relative;overflow:hidden}.container{position:relative;width:100%;max-width:var(--container-max-width)}.container-wide{max-width:var(--container-max-width-wide)}.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 .4s var(--transition-smooth) .2s both}.form-subtitle{font-size:var(--form-subtitle-font-size);color:var(--ink-medium);margin-top:var(--space-sm);animation:fadeInUp .4s var(--transition-smooth) .4s 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 .4s var(--transition-smooth) .6s both}.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{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{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{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)}.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 .3s 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 .4s var(--transition-smooth)}.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 .4s 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:#357a4614;border:var(--space-fixed-2xs) solid rgba(53,122,70,.2);color:var(--accent-success)}.notice-warning{background:#b4530914;border:var(--space-fixed-2xs) solid rgba(180,83,9,.2);color:var(--semantic-warning)}.notice-info{background:#0369a114;border:var(--space-fixed-2xs) solid rgba(3,105,161,.2);color:var(--semantic-info)}