@transcodes/ui-components 0.1.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +92 -3
- package/dist/ui-components.css +1 -1
- package/dist/ui-components.js +1579 -970
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -138,7 +138,7 @@ export declare class HistoryController extends BaseController {
|
|
|
138
138
|
hostDisconnected(): void;
|
|
139
139
|
}
|
|
140
140
|
|
|
141
|
-
export declare type IconName = 'arrow-left' | 'arrow-right' | 'check' | 'x' | 'close' | 'chevron-right' | 'chevron-left' | 'error' | 'alert-circle' | 'info' | 'warning' | 'loading' | 'loader' | 'biometric' | 'email' | 'passkey' | 'bell' | 'download' | 'wifi-off';
|
|
141
|
+
export declare type IconName = 'arrow-left' | 'arrow-right' | 'check' | 'x' | 'close' | 'chevron-right' | 'chevron-left' | 'error' | 'alert-circle' | 'info' | 'warning' | 'loading' | 'loader' | 'biometric' | 'email' | 'passkey' | 'bell' | 'download' | 'wifi-off' | 'apple' | 'google' | 'windows' | 'samsung' | 'phone' | 'success' | 'lock' | 'person' | 'device' | 'totp' | 'email-otp' | 'qrcode' | 'key';
|
|
142
142
|
|
|
143
143
|
/**
|
|
144
144
|
* Controller for managing loading states and progress.
|
|
@@ -286,6 +286,35 @@ export declare class StorageController<T = unknown> extends BaseController {
|
|
|
286
286
|
hostDisconnected(): void;
|
|
287
287
|
}
|
|
288
288
|
|
|
289
|
+
/**
|
|
290
|
+
* A card component for displaying authenticator information.
|
|
291
|
+
* Commonly used for passkeys, TOTP, USB security keys, etc.
|
|
292
|
+
*
|
|
293
|
+
* @fires tc-delete - Fired when the delete button is clicked
|
|
294
|
+
* @fires tc-toggle - Fired when the enable/disable toggle is clicked
|
|
295
|
+
* @fires tc-click - Fired when the card is clicked
|
|
296
|
+
* @csspart card - The card container
|
|
297
|
+
* @csspart icon - The authenticator type icon container
|
|
298
|
+
* @csspart content - The main content area
|
|
299
|
+
* @csspart name - The authenticator name
|
|
300
|
+
* @csspart meta - The metadata area (last used, etc.)
|
|
301
|
+
* @csspart actions - The actions area
|
|
302
|
+
* @csspart delete - The delete button
|
|
303
|
+
*/
|
|
304
|
+
export declare class TcAuthenticatorCard extends LitElement {
|
|
305
|
+
name: string;
|
|
306
|
+
type: 'passkey' | 'totp' | 'usb' | 'phone' | 'email';
|
|
307
|
+
lastUsed: string;
|
|
308
|
+
enabled: boolean;
|
|
309
|
+
deletable: boolean;
|
|
310
|
+
clickable: boolean;
|
|
311
|
+
static styles: CSSResult;
|
|
312
|
+
private getIconName;
|
|
313
|
+
private handleCardClick;
|
|
314
|
+
private handleDelete;
|
|
315
|
+
render(): TemplateResult<1>;
|
|
316
|
+
}
|
|
317
|
+
|
|
289
318
|
/**
|
|
290
319
|
* A simple container component without default flex layout.
|
|
291
320
|
* Use for wrapping content with custom styles.
|
|
@@ -323,7 +352,10 @@ export declare class TcButton extends LitElement {
|
|
|
323
352
|
* Uses design-tokens notice classes (.notice, .notice-info, .notice-success, etc.)
|
|
324
353
|
*
|
|
325
354
|
* @slot - Callout content
|
|
355
|
+
* @slot icon - Optional icon slot
|
|
326
356
|
* @csspart callout - The callout container
|
|
357
|
+
* @csspart icon - The icon container
|
|
358
|
+
* @csspart content - The content container
|
|
327
359
|
*/
|
|
328
360
|
export declare class TcCallout extends LitElement {
|
|
329
361
|
variant: 'info' | 'success' | 'warning' | 'error';
|
|
@@ -373,17 +405,38 @@ export declare class TcContainer extends LitElement {
|
|
|
373
405
|
}
|
|
374
406
|
|
|
375
407
|
/**
|
|
376
|
-
* A horizontal divider line.
|
|
408
|
+
* A horizontal divider line with optional text.
|
|
377
409
|
*
|
|
378
|
-
* @csspart divider - The divider element
|
|
410
|
+
* @csspart divider - The divider element (simple mode)
|
|
411
|
+
* @csspart container - The container element (text mode)
|
|
412
|
+
* @csspart line - The line elements (text mode)
|
|
413
|
+
* @csspart text - The text element (text mode)
|
|
379
414
|
*/
|
|
380
415
|
export declare class TcDivider extends LitElement {
|
|
381
416
|
color: string;
|
|
382
417
|
spacing: string;
|
|
418
|
+
text: string;
|
|
383
419
|
static styles: CSSResult;
|
|
384
420
|
render(): TemplateResult<1>;
|
|
385
421
|
}
|
|
386
422
|
|
|
423
|
+
/**
|
|
424
|
+
* A simplified error/warning/info message component.
|
|
425
|
+
* Wraps tc-callout with appropriate icon and text styling.
|
|
426
|
+
*
|
|
427
|
+
* @csspart callout - The underlying callout container
|
|
428
|
+
* @csspart icon - The icon element
|
|
429
|
+
* @csspart message - The message text
|
|
430
|
+
*/
|
|
431
|
+
export declare class TcErrorMessage extends LitElement {
|
|
432
|
+
variant: 'warning' | 'info' | 'error';
|
|
433
|
+
message: string;
|
|
434
|
+
static styles: CSSResult;
|
|
435
|
+
private getIconName;
|
|
436
|
+
private getIconColor;
|
|
437
|
+
render(): TemplateResult<1> | null;
|
|
438
|
+
}
|
|
439
|
+
|
|
387
440
|
/**
|
|
388
441
|
* A full-screen error state with icon, message, and retry action.
|
|
389
442
|
*
|
|
@@ -499,6 +552,8 @@ export declare class TcIframeModal extends LitElement {
|
|
|
499
552
|
*
|
|
500
553
|
* @fires tc-input - Fired when input value changes
|
|
501
554
|
* @fires tc-blur - Fired when input loses focus
|
|
555
|
+
* @fires tc-keydown - Fired when a key is pressed
|
|
556
|
+
* @fires tc-paste - Fired when content is pasted
|
|
502
557
|
* @csspart wrapper - The input wrapper element
|
|
503
558
|
* @csspart input - The input element
|
|
504
559
|
* @csspart label - The label element
|
|
@@ -525,6 +580,40 @@ export declare class TcInput extends LitElement {
|
|
|
525
580
|
private handleInput;
|
|
526
581
|
private handleFocus;
|
|
527
582
|
private handleBlur;
|
|
583
|
+
private handleKeydown;
|
|
584
|
+
private handlePaste;
|
|
585
|
+
focus(): void;
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
/**
|
|
589
|
+
* An input field with an attached chip indicator.
|
|
590
|
+
* Useful for showing authentication method alongside email/username input.
|
|
591
|
+
*
|
|
592
|
+
* @fires tc-input - Fired when input value changes
|
|
593
|
+
* @fires tc-blur - Fired when input loses focus
|
|
594
|
+
* @fires tc-keydown - Fired on keydown
|
|
595
|
+
* @csspart wrapper - The input wrapper container
|
|
596
|
+
* @csspart input - The input element
|
|
597
|
+
* @csspart chip - The chip element
|
|
598
|
+
*/
|
|
599
|
+
export declare class TcInputWithChip extends LitElement {
|
|
600
|
+
label: string;
|
|
601
|
+
placeholder: string;
|
|
602
|
+
value: string;
|
|
603
|
+
error: string;
|
|
604
|
+
disabled: boolean;
|
|
605
|
+
readonly: boolean;
|
|
606
|
+
chipLabel: string;
|
|
607
|
+
chipIcon: string;
|
|
608
|
+
chipVariant: 'default' | 'success' | 'error' | 'info';
|
|
609
|
+
private inputId;
|
|
610
|
+
private isFocused;
|
|
611
|
+
static styles: CSSResult[];
|
|
612
|
+
render(): TemplateResult<1>;
|
|
613
|
+
private handleInput;
|
|
614
|
+
private handleFocus;
|
|
615
|
+
private handleBlur;
|
|
616
|
+
private handleKeydown;
|
|
528
617
|
focus(): void;
|
|
529
618
|
}
|
|
530
619
|
|
package/dist/ui-components.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
[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)}
|
|
1
|
+
: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)}
|