@relements/core 0.1.3 → 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.
Files changed (24) hide show
  1. package/README.md +8 -0
  2. package/dist/components/accordion.css +1 -0
  3. package/dist/components/alert.css +1 -0
  4. package/dist/components/avatar.css +1 -0
  5. package/dist/components/badge.css +1 -0
  6. package/dist/components/breadcrumb.css +1 -0
  7. package/dist/components/card.css +1 -0
  8. package/dist/components/switch.css +1 -0
  9. package/dist/components/tag.css +1 -0
  10. package/dist/index.css +1 -1
  11. package/dist/themes/renascent.css +1 -1
  12. package/dist/tokens.css +1 -1
  13. package/package.json +9 -1
  14. package/src/components/accordion.css +38 -0
  15. package/src/components/alert.css +89 -0
  16. package/src/components/avatar.css +48 -0
  17. package/src/components/badge.css +44 -0
  18. package/src/components/breadcrumb.css +62 -0
  19. package/src/components/card.css +65 -0
  20. package/src/components/switch.css +66 -0
  21. package/src/components/tag.css +80 -0
  22. package/src/index.css +8 -0
  23. package/src/themes/renascent.css +160 -5
  24. package/src/tokens.css +64 -0
package/README.md CHANGED
@@ -68,6 +68,14 @@ All styled with CSS classes and `data-*` attributes. No JavaScript needed for st
68
68
  | `.re-toast-region` | live region host | — |
69
69
  | `.re-progress` | `<progress>` | `data-size`: sm, md, lg |
70
70
  | `.re-meter` | `<meter>` | `data-size`: sm, md, lg |
71
+ | `.re-alert` | `<div>` + `role` | `data-variant`: info, success, warning, danger; dismissible |
72
+ | `.re-badge` | `<span>` | `data-variant`: neutral, info, success, warning, danger |
73
+ | `.re-card` | `<article>` | `__header` / `__body` / `__footer`; `data-interactive` |
74
+ | `.re-tag` | `<span>` | `data-variant`: neutral, info, success, warning, danger; removable |
75
+ | `.re-avatar` | `<span>` | `data-size`: sm, md, lg; `<img>` or initials |
76
+ | `.re-breadcrumb` | `<nav>` / `<ol>` | `aria-current="page"` on current |
77
+ | `.re-accordion` | `<details name>` group | native single-open; wraps `.re-disclosure` |
78
+ | `.re-switch` | `<input type="checkbox">` | `role="switch"`; `:checked`, `:disabled` |
71
79
 
72
80
  ## JavaScript behaviors
73
81
 
package/dist/components/accordion.css ADDED
@@ -0,0 +1 @@
1
+ @layer re.components{.re-accordion{border:var(--re-border-default);border-radius:var(--re-radius-md);flex-direction:column;display:flex;overflow:hidden}.re-accordion>.re-disclosure{border-width:0;border-radius:0}.re-accordion>.re-disclosure+.re-disclosure{border-block-start:var(--re-border-default)}}
package/dist/components/alert.css ADDED
@@ -0,0 +1 @@
1
+ @layer re.components{.re-alert{align-items:flex-start;gap:var(--re-space-3);padding:var(--re-space-3) var(--re-space-4);border:var(--re-border-width) solid var(--re-color-info-border);border-radius:var(--re-radius-md);background-color:var(--re-color-info-surface);color:var(--re-color-text);line-height:var(--re-line-height-normal);display:flex}.re-alert__content{flex:auto;min-inline-size:0}.re-alert__title{margin:0 0 var(--re-space-1);font-weight:var(--re-font-weight-semibold);color:var(--re-color-info-text)}.re-alert__dismiss{appearance:none;cursor:pointer;padding:var(--re-space-1) var(--re-space-2);border-radius:var(--re-radius-sm);font-size:var(--re-size-text-lg);color:var(--re-color-text-muted);background:0 0;border:0;flex-shrink:0;line-height:1}.re-alert__dismiss:hover{color:var(--re-color-text);background:color-mix(in oklab, var(--re-color-text) 10%, transparent)}.re-alert__dismiss:focus-visible{box-shadow:var(--re-shadow-focus);outline:none}.re-alert[data-variant=success]{border-color:var(--re-color-success-border);background-color:var(--re-color-success-surface)}.re-alert[data-variant=success] .re-alert__title{color:var(--re-color-success-text)}.re-alert[data-variant=warning]{border-color:var(--re-color-warning-border);background-color:var(--re-color-warning-surface)}.re-alert[data-variant=warning] .re-alert__title{color:var(--re-color-warning-text)}.re-alert[data-variant=danger]{border-color:var(--re-color-danger-border);background-color:var(--re-color-danger-surface)}.re-alert[data-variant=danger] .re-alert__title{color:var(--re-color-danger-text)}}
package/dist/components/avatar.css ADDED
@@ -0,0 +1 @@
1
+ @layer re.components{.re-avatar{inline-size:var(--re-control-height-md);block-size:var(--re-control-height-md);border-radius:var(--re-radius-pill);background-color:var(--re-color-bg-muted);color:var(--re-color-text-muted);font-size:var(--re-size-text-sm);font-weight:var(--re-font-weight-medium);text-transform:uppercase;-webkit-user-select:none;user-select:none;flex-shrink:0;justify-content:center;align-items:center;line-height:1;display:inline-flex;overflow:hidden}.re-avatar>img{object-fit:cover;block-size:100%;inline-size:100%}.re-avatar[data-size=sm]{inline-size:var(--re-control-height-sm);block-size:var(--re-control-height-sm);font-size:var(--re-size-text-xs)}.re-avatar[data-size=lg]{inline-size:var(--re-control-height-lg);block-size:var(--re-control-height-lg);font-size:var(--re-size-text-md)}}
package/dist/components/badge.css ADDED
@@ -0,0 +1 @@
1
+ @layer re.components{.re-badge{align-items:center;gap:var(--re-space-1);padding-inline:var(--re-space-2);padding-block:calc(var(--re-space-1) / 2);font-size:var(--re-size-text-xs);font-weight:var(--re-font-weight-medium);white-space:nowrap;border-radius:var(--re-radius-pill);background-color:var(--re-color-bg-muted);color:var(--re-color-text-muted);line-height:1.4;display:inline-flex}.re-badge[data-variant=info]{background-color:var(--re-color-info-surface);color:var(--re-color-info-text)}.re-badge[data-variant=success]{background-color:var(--re-color-success-surface);color:var(--re-color-success-text)}.re-badge[data-variant=warning]{background-color:var(--re-color-warning-surface);color:var(--re-color-warning-text)}.re-badge[data-variant=danger]{background-color:var(--re-color-danger-surface);color:var(--re-color-danger-text)}}
package/dist/components/breadcrumb.css ADDED
@@ -0,0 +1 @@
1
+ @layer re.components{.re-breadcrumb>ol{align-items:center;gap:var(--re-space-2);font-size:var(--re-size-text-sm);color:var(--re-color-text-muted);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.re-breadcrumb li{align-items:center;gap:var(--re-space-2);display:inline-flex}.re-breadcrumb li+li:before{content:"/";color:var(--re-color-text-subtle);-webkit-user-select:none;user-select:none}.re-breadcrumb a{color:var(--re-color-link);border-radius:var(--re-radius-sm);text-decoration:none}.re-breadcrumb a:hover{text-decoration:underline}.re-breadcrumb a:focus-visible{box-shadow:var(--re-shadow-focus);outline:none}.re-breadcrumb [aria-current=page]{color:var(--re-color-text);font-weight:var(--re-font-weight-medium);pointer-events:none;text-decoration:none}}
package/dist/components/card.css ADDED
@@ -0,0 +1 @@
1
+ @layer re.components{.re-card{background-color:var(--re-color-surface);border:var(--re-border-default);border-radius:var(--re-radius-lg);box-shadow:var(--re-shadow-sm);color:var(--re-color-text);flex-direction:column;display:flex;overflow:hidden}a.re-card{text-decoration:none}.re-card__header{padding:var(--re-space-4);font-weight:var(--re-font-weight-semibold);border-block-end:var(--re-border-default)}.re-card__body{padding:var(--re-space-4);line-height:var(--re-line-height-normal)}.re-card__footer{padding:var(--re-space-3) var(--re-space-4);border-block-start:var(--re-border-default);background-color:var(--re-color-bg-subtle)}.re-card[data-interactive]{cursor:pointer;transition:box-shadow var(--re-duration-fast) var(--re-easing-standard), border-color var(--re-duration-fast) var(--re-easing-standard)}.re-card[data-interactive]:hover{box-shadow:var(--re-shadow-md);border-color:var(--re-color-border-strong)}.re-card[data-interactive]:focus-within{box-shadow:var(--re-shadow-focus);outline:none}}
package/dist/components/switch.css ADDED
@@ -0,0 +1 @@
1
+ @layer re.components{.re-switch{appearance:none;box-sizing:border-box;border:var(--re-border-width) solid var(--re-color-border-strong);border-radius:var(--re-radius-pill);background-color:var(--re-color-bg-muted);cursor:pointer;vertical-align:middle;block-size:1.25rem;inline-size:2.25rem;transition:background-color var(--re-duration-fast) var(--re-easing-standard), border-color var(--re-duration-fast) var(--re-easing-standard);flex-shrink:0;margin:0;position:relative}.re-switch:before{content:"";border-radius:var(--re-radius-pill);background-color:var(--re-color-surface);block-size:.875rem;inline-size:.875rem;box-shadow:var(--re-shadow-sm);transition:transform var(--re-duration-fast) var(--re-easing-standard);position:absolute;inset-block-start:2px;inset-inline-start:2px}.re-switch:checked{background-color:var(--re-color-accent-600);border-color:var(--re-color-accent-600)}.re-switch:checked:before{transform:translate(1rem)}.re-switch:focus-visible{box-shadow:var(--re-shadow-focus);outline:none}.re-switch:disabled{cursor:not-allowed;opacity:.55}}
package/dist/components/tag.css ADDED
@@ -0,0 +1 @@
1
+ @layer re.components{.re-tag{align-items:center;gap:var(--re-space-1);padding-inline:var(--re-space-2);padding-block:calc(var(--re-space-1) / 2);font-size:var(--re-size-text-xs);white-space:nowrap;border:var(--re-border-width) solid var(--re-color-border);border-radius:var(--re-radius-pill);background-color:var(--re-color-bg-subtle);color:var(--re-color-text);line-height:1.4;display:inline-flex}.re-tag__remove{appearance:none;border-radius:var(--re-radius-pill);block-size:1rem;inline-size:1rem;color:var(--re-color-text-muted);font-size:var(--re-size-text-sm);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;padding:0;line-height:1;display:inline-flex}.re-tag__remove:hover{color:var(--re-color-text);background:color-mix(in oklab, var(--re-color-text) 12%, transparent)}.re-tag__remove:focus-visible{box-shadow:var(--re-shadow-focus);outline:none}.re-tag[data-variant=info]{border-color:var(--re-color-info-border);background-color:var(--re-color-info-surface);color:var(--re-color-info-text)}.re-tag[data-variant=success]{border-color:var(--re-color-success-border);background-color:var(--re-color-success-surface);color:var(--re-color-success-text)}.re-tag[data-variant=warning]{border-color:var(--re-color-warning-border);background-color:var(--re-color-warning-surface);color:var(--re-color-warning-text)}.re-tag[data-variant=danger]{border-color:var(--re-color-danger-border);background-color:var(--re-color-danger-surface);color:var(--re-color-danger-text)}}
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- @layer re.tokens{@layer re.tokens{:root{--re-color-neutral-0:#fff;--re-color-neutral-50:#f8fafc;--re-color-neutral-100:#f1f5f9;--re-color-neutral-200:#e2e8f0;--re-color-neutral-300:#cbd5e1;--re-color-neutral-400:#94a3b8;--re-color-neutral-500:#64748b;--re-color-neutral-600:#475569;--re-color-neutral-700:#334155;--re-color-neutral-800:#1e293b;--re-color-neutral-900:#0f172a;--re-color-neutral-950:#020617;--re-color-accent-50:#eff6ff;--re-color-accent-100:#dbeafe;--re-color-accent-200:#bfdbfe;--re-color-accent-300:#93c5fd;--re-color-accent-400:#60a5fa;--re-color-accent-500:#3b82f6;--re-color-accent-600:#2563eb;--re-color-accent-700:#1d4ed8;--re-color-accent-800:#1e40af;--re-color-accent-900:#1e3a8a;--re-color-danger-500:#ef4444;--re-color-danger-600:#dc2626;--re-color-danger-700:#b91c1c;--re-color-success-500:#10b981;--re-color-success-600:#059669;--re-color-success-700:#047857;--re-color-warning-500:#f59e0b;--re-color-warning-600:#d97706;--re-color-warning-700:#b45309;--re-color-bg:var(--re-color-neutral-0);--re-color-bg-subtle:var(--re-color-neutral-50);--re-color-bg-muted:var(--re-color-neutral-100);--re-color-surface:var(--re-color-neutral-0);--re-color-text:var(--re-color-neutral-900);--re-color-text-muted:var(--re-color-neutral-600);--re-color-text-subtle:var(--re-color-neutral-500);--re-color-text-on-accent:var(--re-color-neutral-0);--re-color-text-danger:var(--re-color-danger-700);--re-color-border:var(--re-color-neutral-200);--re-color-border-strong:var(--re-color-neutral-300);--re-color-border-danger:var(--re-color-danger-500);--re-color-link:var(--re-color-accent-700);--re-color-link-hover:var(--re-color-accent-800);--re-color-link-visited:var(--re-color-accent-800);--re-color-focus-ring:var(--re-color-accent-500);--re-color-selection-bg:var(--re-color-accent-100);--re-color-selection-text:var(--re-color-neutral-900);--re-font-sans:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;--re-font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--re-size-text-xs:.75rem;--re-size-text-sm:.875rem;--re-size-text-md:1rem;--re-size-text-lg:1.125rem;--re-size-text-xl:1.25rem;--re-size-text-2xl:1.5rem;--re-size-text-3xl:1.875rem;--re-size-text-4xl:2.25rem;--re-line-height-tight:1.2;--re-line-height-snug:1.35;--re-line-height-normal:1.5;--re-line-height-relaxed:1.65;--re-font-weight-regular:400;--re-font-weight-medium:500;--re-font-weight-semibold:600;--re-font-weight-bold:700;--re-space-0:0;--re-space-1:.25rem;--re-space-2:.5rem;--re-space-3:.75rem;--re-space-4:1rem;--re-space-5:1.25rem;--re-space-6:1.5rem;--re-space-8:2rem;--re-space-10:2.5rem;--re-space-12:3rem;--re-space-16:4rem;--re-radius-none:0;--re-radius-sm:.25rem;--re-radius-md:.375rem;--re-radius-lg:.5rem;--re-radius-xl:.75rem;--re-radius-pill:9999px;--re-border-width:1px;--re-border-width-strong:2px;--re-border-default:var(--re-border-width) solid var(--re-color-border);--re-border-strong:var(--re-border-width-strong) solid var(--re-color-border-strong);--re-border-danger:var(--re-border-width) solid var(--re-color-border-danger);--re-focus-ring-width:2px;--re-focus-ring-offset:2px;--re-focus-ring-color:var(--re-color-focus-ring);--re-shadow-focus:0 0 0 var(--re-focus-ring-offset) var(--re-color-bg), 0 0 0 calc(var(--re-focus-ring-offset) + var(--re-focus-ring-width)) var(--re-color-focus-ring);--re-shadow-sm:0 1px 2px #0000000f;--re-shadow-md:0 4px 12px #00000014;--re-shadow-lg:0 12px 32px #0000001f;--re-duration-instant:0s;--re-duration-fast:.12s;--re-duration-normal:.2s;--re-duration-slow:.32s;--re-easing-standard:cubic-bezier(.2, 0, 0, 1);--re-easing-emphasized:cubic-bezier(.3, 0, 0, 1);--re-z-base:0;--re-z-overlay:100;--re-z-popover:200;--re-z-dialog:300;--re-z-toast:400;--re-control-height-sm:1.75rem;--re-control-height-md:2.25rem;--re-control-height-lg:2.75rem;--re-control-padding-x:var(--re-space-3);--re-control-padding-y:var(--re-space-2)}@media (prefers-color-scheme:dark){:root{--re-color-bg:var(--re-color-neutral-950);--re-color-bg-subtle:var(--re-color-neutral-900);--re-color-bg-muted:var(--re-color-neutral-800);--re-color-surface:var(--re-color-neutral-900);--re-color-text:var(--re-color-neutral-50);--re-color-text-muted:var(--re-color-neutral-300);--re-color-text-subtle:var(--re-color-neutral-400);--re-color-text-on-accent:var(--re-color-neutral-0);--re-color-text-danger:var(--re-color-danger-500);--re-color-border:var(--re-color-neutral-700);--re-color-border-strong:var(--re-color-neutral-600);--re-color-link:var(--re-color-accent-300);--re-color-link-hover:var(--re-color-accent-200);--re-color-link-visited:var(--re-color-accent-200);--re-color-focus-ring:var(--re-color-accent-400);--re-color-selection-bg:var(--re-color-accent-900);--re-color-selection-text:var(--re-color-neutral-50);--re-focus-ring-offset:0px;--re-shadow-focus:0 0 0 2px var(--re-color-focus-ring)}}}}@layer re.reset{@layer re.reset{*,:before,:after{box-sizing:border-box}html{-moz-text-size-adjust:100%;text-size-adjust:100%;tab-size:4}body{min-height:100dvh;line-height:var(--re-line-height-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{margin:0;padding:0;list-style:none}img,picture,video,canvas,svg{max-width:100%;height:auto;display:block}input,button,textarea,select{font:inherit;color:inherit}textarea{resize:vertical}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}[hidden]{display:none!important}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}}}@layer re.base{@layer re.base{:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}html{font-family:var(--re-font-sans);font-size:var(--re-size-text-md);line-height:var(--re-line-height-normal);color:var(--re-color-text);background-color:var(--re-color-bg)}::selection{background-color:var(--re-color-selection-bg);color:var(--re-color-selection-text)}h1,h2,h3,h4,h5,h6{line-height:var(--re-line-height-tight);font-weight:var(--re-font-weight-semibold);color:var(--re-color-text)}h1{font-size:var(--re-size-text-4xl)}h2{font-size:var(--re-size-text-3xl)}h3{font-size:var(--re-size-text-2xl)}h4{font-size:var(--re-size-text-xl)}h5{font-size:var(--re-size-text-lg)}h6{font-size:var(--re-size-text-md)}p{line-height:var(--re-line-height-normal);color:var(--re-color-text)}small{font-size:var(--re-size-text-sm);color:var(--re-color-text-muted)}code,kbd,samp,pre{font-family:var(--re-font-mono);font-size:.95em}pre{padding:var(--re-space-3) var(--re-space-4);background-color:var(--re-color-bg-muted);border-radius:var(--re-radius-md);overflow:auto}code{background-color:var(--re-color-bg-muted);border-radius:var(--re-radius-sm);padding:.1em .3em}pre code{background:0 0;border-radius:0;padding:0}hr{border:0;border-top:var(--re-border-default);margin-block:var(--re-space-6)}a{color:var(--re-color-link);text-underline-offset:.2em;text-decoration-thickness:.08em}a:hover{color:var(--re-color-link-hover)}a:visited{color:var(--re-color-link-visited)}:focus-visible{box-shadow:var(--re-shadow-focus);border-radius:var(--re-radius-sm);outline:none}input,textarea,select{color:var(--re-color-text);background-color:var(--re-color-bg)}}}@layer re.components{.re-button{justify-content:center;align-items:center;gap:var(--re-space-2);box-sizing:border-box;block-size:var(--re-control-height-md);padding-inline:var(--re-space-4);font:inherit;font-weight:var(--re-font-weight-medium);font-size:var(--re-size-text-md);text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;color:var(--re-color-text-on-accent);background-color:var(--re-color-accent-600);border:var(--re-border-width) solid transparent;border-radius:var(--re-radius-md);cursor:pointer;transition:background-color var(--re-duration-fast) var(--re-easing-standard), color var(--re-duration-fast) var(--re-easing-standard), border-color var(--re-duration-fast) var(--re-easing-standard), box-shadow var(--re-duration-fast) var(--re-easing-standard);padding-block:0;line-height:1;text-decoration:none;display:inline-flex}a.re-button{-webkit-tap-highlight-color:transparent}.re-button:hover{background-color:var(--re-color-accent-700)}.re-button:active{background-color:var(--re-color-accent-800)}.re-button:focus-visible{box-shadow:var(--re-shadow-focus);outline:none}.re-button:disabled,.re-button[aria-disabled=true]{cursor:not-allowed;opacity:.55;pointer-events:none}a.re-button[aria-disabled=true]{pointer-events:none}.re-button[data-variant=secondary]{color:var(--re-color-text);background-color:var(--re-color-bg);border-color:var(--re-color-border-strong)}.re-button[data-variant=secondary]:hover{background-color:var(--re-color-bg-subtle)}.re-button[data-variant=secondary]:active{background-color:var(--re-color-bg-muted)}.re-button[data-variant=ghost]{color:var(--re-color-text);background-color:#0000;border-color:#0000}.re-button[data-variant=ghost]:hover{background-color:var(--re-color-bg-subtle)}.re-button[data-variant=ghost]:active{background-color:var(--re-color-bg-muted)}.re-button[data-variant=danger]{color:var(--re-color-text-on-accent);background-color:var(--re-color-danger-600)}.re-button[data-variant=danger]:hover{background-color:var(--re-color-danger-700)}.re-button[data-variant=danger]:active{background-color:var(--re-color-danger-700);filter:brightness(.95)}.re-button[data-size=sm]{block-size:var(--re-control-height-sm);padding-inline:var(--re-space-3);font-size:var(--re-size-text-sm)}.re-button[data-size=lg]{block-size:var(--re-control-height-lg);padding-inline:var(--re-space-5);font-size:var(--re-size-text-lg)}.re-button[data-full-width]{inline-size:100%}.re-link{color:var(--re-color-link);text-underline-offset:.18em;border-radius:var(--re-radius-sm);transition:color var(--re-duration-fast) var(--re-easing-standard), text-decoration-color var(--re-duration-fast) var(--re-easing-standard);text-decoration-line:underline;text-decoration-color:currentColor;text-decoration-thickness:.08em}.re-link:hover{color:var(--re-color-link-hover)}.re-link:visited{color:var(--re-color-link-visited)}.re-link:focus-visible{box-shadow:var(--re-shadow-focus);outline:none}.re-link[data-variant=muted]{color:var(--re-color-text-muted);-webkit-text-decoration-color:var(--re-color-border-strong);text-decoration-color:var(--re-color-border-strong)}.re-link[data-variant=muted]:hover{color:var(--re-color-text);text-decoration-color:currentColor}.re-link[data-variant=subtle]{text-decoration-line:none}.re-link[data-variant=subtle]:hover{text-decoration-line:underline}.re-link[data-variant=external]:after{content:" ↗";speak:none}.re-input,.re-textarea,.re-select{box-sizing:border-box;inline-size:100%;min-block-size:var(--re-control-height-md);padding-inline:var(--re-control-padding-x);padding-block:var(--re-control-padding-y);font:inherit;font-size:var(--re-size-text-md);line-height:var(--re-line-height-normal);color:var(--re-color-text);background-color:var(--re-color-bg);border:var(--re-border-default);border-radius:var(--re-radius-md);appearance:none;transition:border-color var(--re-duration-fast) var(--re-easing-standard), box-shadow var(--re-duration-fast) var(--re-easing-standard), background-color var(--re-duration-fast) var(--re-easing-standard);display:block}.re-input::placeholder,.re-textarea::placeholder{color:var(--re-color-text-subtle);opacity:1}.re-input:hover,.re-textarea:hover,.re-select:hover{border-color:var(--re-color-border-strong)}.re-input:focus-visible,.re-textarea:focus-visible,.re-select:focus-visible{border-color:var(--re-color-focus-ring);box-shadow:var(--re-shadow-focus);outline:none}:is(.re-input[aria-invalid=true],.re-textarea[aria-invalid=true],.re-select[aria-invalid=true],.re-input:user-invalid,.re-textarea:user-invalid,.re-select:user-invalid){border-color:var(--re-color-border-danger)}:is(.re-input[aria-invalid=true]:focus-visible,.re-textarea[aria-invalid=true]:focus-visible,.re-select[aria-invalid=true]:focus-visible,.re-input:user-invalid:focus-visible,.re-textarea:user-invalid:focus-visible,.re-select:user-invalid:focus-visible){box-shadow:0 0 0 var(--re-focus-ring-offset) var(--re-color-bg), 0 0 0 calc(var(--re-focus-ring-offset) + var(--re-focus-ring-width)) var(--re-color-danger-500)}.re-input:disabled,.re-textarea:disabled,.re-select:disabled,.re-checkbox:disabled,.re-radio:disabled{cursor:not-allowed;background-color:var(--re-color-bg-muted);color:var(--re-color-text-subtle);opacity:.7}.re-input[data-size=sm],.re-textarea[data-size=sm],.re-select[data-size=sm]{min-block-size:var(--re-control-height-sm);font-size:var(--re-size-text-sm);padding-inline:var(--re-space-2)}.re-input[data-size=lg],.re-textarea[data-size=lg],.re-select[data-size=lg]{min-block-size:var(--re-control-height-lg);font-size:var(--re-size-text-lg);padding-inline:var(--re-space-4)}.re-textarea{min-block-size:calc(var(--re-control-height-md) * 2);resize:vertical;line-height:var(--re-line-height-relaxed)}.re-select{background-image:linear-gradient(45deg,#0000 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,#0000 50%);background-position:right var(--re-space-4) top 55%, right calc(var(--re-space-4) - 5px) top 55%;color:var(--re-color-text);background-repeat:no-repeat;background-size:5px 5px,5px 5px;padding-inline-end:var(--re-space-8)}.re-select[multiple]{min-block-size:calc(var(--re-control-height-md) * 3);background-image:none;padding-inline-end:var(--re-control-padding-x)}.re-select[multiple] option{padding-block:var(--re-space-1)}.re-checkbox,.re-radio{appearance:none;background-color:var(--re-color-bg);border:var(--re-border-width-strong) solid var(--re-color-border-strong);cursor:pointer;block-size:1.125rem;inline-size:1.125rem;color:var(--re-color-text-on-accent);transition:background-color var(--re-duration-fast) var(--re-easing-standard), border-color var(--re-duration-fast) var(--re-easing-standard), box-shadow var(--re-duration-fast) var(--re-easing-standard);flex-shrink:0;place-content:center;margin:0;padding:0;display:inline-grid}.re-checkbox{border-radius:var(--re-radius-sm)}.re-radio{border-radius:var(--re-radius-pill)}.re-checkbox:hover,.re-radio:hover{border-color:var(--re-color-accent-600)}.re-checkbox:focus-visible,.re-radio:focus-visible{box-shadow:var(--re-shadow-focus);border-color:var(--re-color-focus-ring);outline:none}.re-checkbox:checked,.re-radio:checked{background-color:var(--re-color-accent-600);border-color:var(--re-color-accent-600)}.re-checkbox:checked:before{content:"";clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);background-color:currentColor;block-size:.65rem;inline-size:.65rem}.re-radio:checked:before{content:"";border-radius:var(--re-radius-pill);background-color:currentColor;block-size:.55rem;inline-size:.55rem}.re-checkbox:indeterminate{background-color:var(--re-color-accent-600);border-color:var(--re-color-accent-600)}.re-checkbox:indeterminate:before{content:"";border-radius:var(--re-radius-sm);background-color:currentColor;block-size:.18rem;inline-size:.7rem}.re-checkbox[aria-invalid=true],.re-radio[aria-invalid=true]{border-color:var(--re-color-border-danger)}.re-field{gap:var(--re-space-2);color:var(--re-color-text);flex-direction:column;display:flex}.re-field__label{font-size:var(--re-size-text-sm);font-weight:var(--re-font-weight-medium);color:var(--re-color-text);line-height:1.2}.re-field__label[data-required]:after{content:" *";color:var(--re-color-text-danger);margin-inline-start:.1em}.re-field__hint{font-size:var(--re-size-text-sm);color:var(--re-color-text-muted);line-height:var(--re-line-height-normal)}.re-field--inline{align-items:center;gap:var(--re-space-3);flex-direction:row}.re-field-group{gap:var(--re-space-2);border:0;flex-direction:column;margin:0;padding:0;display:flex}.re-field-group__legend{font-size:var(--re-size-text-sm);font-weight:var(--re-font-weight-medium);color:var(--re-color-text);padding:0;line-height:1.2}.re-field-group[data-orientation=horizontal]>.re-field-group__items{gap:var(--re-space-4);flex-flow:wrap}.re-field-group__items{gap:var(--re-space-2);flex-direction:column;display:flex}.re-validation-message{font-size:var(--re-size-text-sm);line-height:var(--re-line-height-normal);color:var(--re-color-text-danger);display:block}.re-validation-message[data-tone=success]{color:var(--re-color-success-700)}.re-validation-message[data-tone=hint]{color:var(--re-color-text-muted)}.re-validation-message[data-tone=warning]{color:var(--re-color-warning-700)}.re-disclosure{border:var(--re-border-default);border-radius:var(--re-radius-md);background-color:var(--re-color-surface);overflow:hidden}.re-disclosure__summary{cursor:pointer;padding:var(--re-space-3) var(--re-space-4);font-weight:var(--re-font-weight-medium);color:var(--re-color-text);align-items:center;gap:var(--re-space-3);-webkit-user-select:none;user-select:none;transition:background-color var(--re-duration-fast) var(--re-easing-standard);list-style:none;display:flex}.re-disclosure__summary::-webkit-details-marker{display:none}.re-disclosure__summary:before{content:"";block-size:.6rem;inline-size:.6rem;transition:transform var(--re-duration-fast) var(--re-easing-standard);border-block-end:2px solid;border-inline-end:2px solid;flex-shrink:0;margin-inline-end:var(--re-space-1);transform:rotate(-45deg)}.re-disclosure[open]>.re-disclosure__summary:before{transform:rotate(45deg)}.re-disclosure__summary:hover{background-color:var(--re-color-bg-subtle)}.re-disclosure__summary:focus-visible{box-shadow:var(--re-shadow-focus);outline:none}.re-disclosure__body{padding:var(--re-space-3) var(--re-space-4) var(--re-space-4);border-block-start:var(--re-border-default);color:var(--re-color-text);line-height:var(--re-line-height-normal)}.re-disclosure[data-variant=plain]{background:0 0;border:0}.re-disclosure[data-variant=plain]>.re-disclosure__body{border-block-start:0;padding-block-start:var(--re-space-2)}.re-dialog:not([open]){display:none}.re-dialog{box-sizing:border-box;border:var(--re-border-default);border-radius:var(--re-radius-lg);background-color:var(--re-color-surface);color:var(--re-color-text);max-block-size:min(85vh,40rem);inline-size:min(90vw,32rem);box-shadow:var(--re-shadow-lg);flex-direction:column;padding:0;display:flex;overflow:hidden}.re-dialog::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:#0006}.re-dialog:focus-visible{outline:none}.re-dialog__header{justify-content:space-between;align-items:center;gap:var(--re-space-3);padding:var(--re-space-4);border-block-end:var(--re-border-default);display:flex}.re-dialog__title{font-size:var(--re-size-text-lg);font-weight:var(--re-font-weight-semibold);line-height:var(--re-line-height-tight);color:var(--re-color-text);margin:0}.re-dialog__close{appearance:none;cursor:pointer;padding:var(--re-space-1) var(--re-space-2);border-radius:var(--re-radius-md);color:var(--re-color-text-muted);font:inherit;font-size:var(--re-size-text-xl);transition:background-color var(--re-duration-fast) var(--re-easing-standard);background:0 0;border:0;line-height:1}.re-dialog__close:hover{background-color:var(--re-color-bg-subtle);color:var(--re-color-text)}.re-dialog__close:focus-visible{box-shadow:var(--re-shadow-focus);outline:none}.re-dialog__body{padding:var(--re-space-4);line-height:var(--re-line-height-normal);overflow-y:auto}.re-dialog__footer{justify-content:flex-end;gap:var(--re-space-3);padding:var(--re-space-4);border-block-start:var(--re-border-default);background-color:var(--re-color-bg-subtle);display:flex}.re-progress,.re-meter{appearance:none;border-radius:var(--re-radius-pill);background-color:var(--re-color-bg-muted);block-size:.5rem;inline-size:100%;color:var(--re-color-accent-600);border:0;overflow:hidden}.re-progress::-webkit-progress-bar{background-color:var(--re-color-bg-muted);border-radius:var(--re-radius-pill)}.re-progress::-webkit-progress-value{background-color:var(--re-color-accent-600);border-radius:var(--re-radius-pill);transition:inline-size var(--re-duration-normal) var(--re-easing-standard)}.re-progress::-moz-progress-bar{background-color:var(--re-color-accent-600);border-radius:var(--re-radius-pill)}.re-progress:indeterminate{background:linear-gradient(90deg, transparent 0%, var(--re-color-accent-300) 50%, transparent 100%) no-repeat, var(--re-color-bg-muted);background-size:40% 100%,100% 100%;animation:1.2s linear infinite re-progress-indeterminate}@keyframes re-progress-indeterminate{0%{background-position:-40% 0,0 0}to{background-position:140% 0,0 0}}@media (prefers-reduced-motion:reduce){.re-progress:indeterminate{animation-duration:.01ms}}.re-meter::-webkit-meter-bar{background-color:var(--re-color-bg-muted);border-radius:var(--re-radius-pill);border:0}.re-meter::-webkit-meter-optimum-value{background-color:var(--re-color-success-600);border-radius:var(--re-radius-pill)}.re-meter::-webkit-meter-suboptimum-value{background-color:var(--re-color-warning-600);border-radius:var(--re-radius-pill)}.re-meter::-webkit-meter-even-less-good-value{background-color:var(--re-color-danger-600);border-radius:var(--re-radius-pill)}.re-meter::-moz-meter-bar{background-color:var(--re-color-success-600);border-radius:var(--re-radius-pill)}.re-meter:-moz-meter-sub-optimum::-moz-meter-bar{background-color:var(--re-color-warning-600)}.re-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background-color:var(--re-color-danger-600)}.re-progress[data-size=sm],.re-meter[data-size=sm]{block-size:.25rem}.re-progress[data-size=lg],.re-meter[data-size=lg]{block-size:.75rem}.re-tabs{gap:var(--re-space-4);flex-direction:column;display:flex}.re-tabs__list{gap:var(--re-space-1);border-block-end:var(--re-border-default);flex-wrap:wrap;padding-block-end:0;display:flex}.re-tab{appearance:none;cursor:pointer;font:inherit;color:var(--re-color-text-muted);padding:var(--re-space-2) var(--re-space-4);border-radius:var(--re-radius-md) var(--re-radius-md) 0 0;line-height:1.4;font-weight:var(--re-font-weight-medium);transition:color var(--re-duration-fast) var(--re-easing-standard), background-color var(--re-duration-fast) var(--re-easing-standard);background:0 0;border:0;position:relative}.re-tab:hover{color:var(--re-color-text);background-color:var(--re-color-bg-subtle)}.re-tab:focus-visible{box-shadow:var(--re-shadow-focus);outline:none}.re-tab[aria-selected=true]{color:var(--re-color-text);background-color:var(--re-color-bg)}.re-tab[aria-selected=true]:after{content:"";inset-inline:var(--re-space-2);background-color:var(--re-color-accent-600);border-radius:var(--re-radius-sm);block-size:2px;position:absolute;inset-block-end:calc(var(--re-border-width) * -1)}.re-tabpanel{color:var(--re-color-text);line-height:var(--re-line-height-normal)}.re-tabpanel:focus-visible{box-shadow:var(--re-shadow-focus);border-radius:var(--re-radius-md);outline:none}.re-menu{display:inline-block;position:relative}.re-menu__panel{background-color:var(--re-color-surface);border:var(--re-border-default);border-radius:var(--re-radius-md);min-inline-size:12rem;box-shadow:var(--re-shadow-md);padding:var(--re-space-1);z-index:var(--re-z-popover);flex-direction:column;gap:1px;display:flex;position:absolute;inset-block-start:calc(100% + var(--re-space-1));inset-inline-start:0}.re-menu__item{appearance:none;cursor:pointer;font:inherit;text-align:start;padding:var(--re-space-2) var(--re-space-3);border-radius:var(--re-radius-sm);color:var(--re-color-text);line-height:var(--re-line-height-normal);background:0 0;border:0}.re-menu__item:hover{background-color:var(--re-color-bg-muted);outline:none}.re-menu__item:focus-visible{background-color:var(--re-color-bg-muted);box-shadow:inset 0 0 0 2px var(--re-color-focus-ring);outline:none}.re-menu__item[aria-disabled=true],.re-menu__item:disabled{color:var(--re-color-text-subtle);cursor:not-allowed}.re-menu__separator{background-color:var(--re-color-border);block-size:1px;margin-block:var(--re-space-1)}.re-popover{border:var(--re-border-default);border-radius:var(--re-radius-md);background-color:var(--re-color-surface);color:var(--re-color-text);padding:var(--re-space-3) var(--re-space-4);box-shadow:var(--re-shadow-md);max-inline-size:22rem;line-height:var(--re-line-height-normal);margin:0;inset:auto}.re-popover:popover-open{margin:0}.re-popover[data-tone=info]{background-color:color-mix(in srgb, var(--re-color-accent-500) 12%, var(--re-color-surface));border-color:var(--re-color-accent-500)}.re-popover[data-tone=warning]{background-color:color-mix(in srgb, var(--re-color-warning-500) 12%, var(--re-color-surface));border-color:var(--re-color-warning-500)}.re-popover[data-tone=danger]{background-color:color-mix(in srgb, var(--re-color-danger-500) 12%, var(--re-color-surface));border-color:var(--re-color-danger-500)}.re-toast-region{z-index:var(--re-z-toast);pointer-events:none;position:fixed;inset-block-end:var(--re-space-6);inset-inline-end:var(--re-space-6)}.re-toast-list{gap:var(--re-space-2);flex-direction:column-reverse;min-inline-size:16rem;max-inline-size:24rem;margin:0;padding:0;display:flex}.re-toast{pointer-events:auto;gap:var(--re-space-3);padding:var(--re-space-3) var(--re-space-4);background-color:var(--re-color-surface);color:var(--re-color-text);border:var(--re-border-default);border-radius:var(--re-radius-md);box-shadow:var(--re-shadow-md);line-height:var(--re-line-height-normal);align-items:flex-start;display:flex}.re-toast__body{flex:auto}.re-toast__dismiss{appearance:none;cursor:pointer;color:var(--re-color-text-muted);font:inherit;font-size:var(--re-size-text-lg);padding:0 var(--re-space-1);border-radius:var(--re-radius-sm);background:0 0;border:0;line-height:1}.re-toast__dismiss:hover{color:var(--re-color-text);background:var(--re-color-bg-subtle)}.re-toast__dismiss:focus-visible{box-shadow:var(--re-shadow-focus);outline:none}.re-toast[data-tone=success]{background-color:color-mix(in srgb, var(--re-color-success-600) 12%, var(--re-color-surface));border-color:var(--re-color-success-600);color:var(--re-color-text)}.re-toast[data-tone=danger]{background-color:color-mix(in srgb, var(--re-color-danger-600) 12%, var(--re-color-surface));border-color:var(--re-color-danger-600);color:var(--re-color-text)}.re-toast[data-tone=warning]{background-color:color-mix(in srgb, var(--re-color-warning-600) 12%, var(--re-color-surface));border-color:var(--re-color-warning-600);color:var(--re-color-text)}}
1
+ @layer re.tokens{@layer re.tokens{:root{--re-color-neutral-0:#fff;--re-color-neutral-50:#f8fafc;--re-color-neutral-100:#f1f5f9;--re-color-neutral-200:#e2e8f0;--re-color-neutral-300:#cbd5e1;--re-color-neutral-400:#94a3b8;--re-color-neutral-500:#64748b;--re-color-neutral-600:#475569;--re-color-neutral-700:#334155;--re-color-neutral-800:#1e293b;--re-color-neutral-900:#0f172a;--re-color-neutral-950:#020617;--re-color-accent-50:#eff6ff;--re-color-accent-100:#dbeafe;--re-color-accent-200:#bfdbfe;--re-color-accent-300:#93c5fd;--re-color-accent-400:#60a5fa;--re-color-accent-500:#3b82f6;--re-color-accent-600:#2563eb;--re-color-accent-700:#1d4ed8;--re-color-accent-800:#1e40af;--re-color-accent-900:#1e3a8a;--re-color-danger-500:#ef4444;--re-color-danger-600:#dc2626;--re-color-danger-700:#b91c1c;--re-color-success-500:#10b981;--re-color-success-600:#059669;--re-color-success-700:#047857;--re-color-warning-500:#f59e0b;--re-color-warning-600:#d97706;--re-color-warning-700:#b45309;--re-color-bg:var(--re-color-neutral-0);--re-color-bg-subtle:var(--re-color-neutral-50);--re-color-bg-muted:var(--re-color-neutral-100);--re-color-surface:var(--re-color-neutral-0);--re-color-text:var(--re-color-neutral-900);--re-color-text-muted:var(--re-color-neutral-600);--re-color-text-subtle:var(--re-color-neutral-500);--re-color-text-on-accent:var(--re-color-neutral-0);--re-color-text-danger:var(--re-color-danger-700);--re-color-border:var(--re-color-neutral-200);--re-color-border-strong:var(--re-color-neutral-300);--re-color-border-danger:var(--re-color-danger-500);--re-color-link:var(--re-color-accent-700);--re-color-link-hover:var(--re-color-accent-800);--re-color-link-visited:var(--re-color-accent-800);--re-color-focus-ring:var(--re-color-accent-500);--re-color-selection-bg:var(--re-color-accent-100);--re-color-selection-text:var(--re-color-neutral-900);--re-color-info-surface:color-mix(in oklab, var(--re-color-accent-500) 12%, var(--re-color-bg));--re-color-info-border:var(--re-color-accent-500);--re-color-info-text:var(--re-color-accent-700);--re-color-success-surface:color-mix(in oklab, var(--re-color-success-500) 12%, var(--re-color-bg));--re-color-success-border:var(--re-color-success-500);--re-color-success-text:var(--re-color-success-700);--re-color-warning-surface:color-mix(in oklab, var(--re-color-warning-500) 12%, var(--re-color-bg));--re-color-warning-border:var(--re-color-warning-500);--re-color-warning-text:var(--re-color-warning-700);--re-color-danger-surface:color-mix(in oklab, var(--re-color-danger-500) 12%, var(--re-color-bg));--re-color-danger-border:var(--re-color-danger-500);--re-color-danger-text:var(--re-color-danger-700);--re-font-sans:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;--re-font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--re-size-text-xs:.75rem;--re-size-text-sm:.875rem;--re-size-text-md:1rem;--re-size-text-lg:1.125rem;--re-size-text-xl:1.25rem;--re-size-text-2xl:1.5rem;--re-size-text-3xl:1.875rem;--re-size-text-4xl:2.25rem;--re-line-height-tight:1.2;--re-line-height-snug:1.35;--re-line-height-normal:1.5;--re-line-height-relaxed:1.65;--re-font-weight-regular:400;--re-font-weight-medium:500;--re-font-weight-semibold:600;--re-font-weight-bold:700;--re-space-0:0;--re-space-1:.25rem;--re-space-2:.5rem;--re-space-3:.75rem;--re-space-4:1rem;--re-space-5:1.25rem;--re-space-6:1.5rem;--re-space-8:2rem;--re-space-10:2.5rem;--re-space-12:3rem;--re-space-16:4rem;--re-radius-none:0;--re-radius-sm:.25rem;--re-radius-md:.375rem;--re-radius-lg:.5rem;--re-radius-xl:.75rem;--re-radius-pill:9999px;--re-border-width:1px;--re-border-width-strong:2px;--re-border-default:var(--re-border-width) solid var(--re-color-border);--re-border-strong:var(--re-border-width-strong) solid var(--re-color-border-strong);--re-border-danger:var(--re-border-width) solid var(--re-color-border-danger);--re-focus-ring-width:2px;--re-focus-ring-offset:2px;--re-focus-ring-color:var(--re-color-focus-ring);--re-shadow-focus:0 0 0 var(--re-focus-ring-offset) var(--re-color-bg), 0 0 0 calc(var(--re-focus-ring-offset) + var(--re-focus-ring-width)) var(--re-color-focus-ring);--re-shadow-sm:0 1px 2px #0000000f;--re-shadow-md:0 4px 12px #00000014;--re-shadow-lg:0 12px 32px #0000001f;--re-duration-instant:0s;--re-duration-fast:.12s;--re-duration-normal:.2s;--re-duration-slow:.32s;--re-easing-standard:cubic-bezier(.2, 0, 0, 1);--re-easing-emphasized:cubic-bezier(.3, 0, 0, 1);--re-z-base:0;--re-z-overlay:100;--re-z-popover:200;--re-z-dialog:300;--re-z-toast:400;--re-control-height-sm:1.75rem;--re-control-height-md:2.25rem;--re-control-height-lg:2.75rem;--re-control-padding-x:var(--re-space-3);--re-control-padding-y:var(--re-space-2)}@media (prefers-color-scheme:dark){:root{--re-color-bg:var(--re-color-neutral-950);--re-color-bg-subtle:var(--re-color-neutral-900);--re-color-bg-muted:var(--re-color-neutral-800);--re-color-surface:var(--re-color-neutral-900);--re-color-text:var(--re-color-neutral-50);--re-color-text-muted:var(--re-color-neutral-300);--re-color-text-subtle:var(--re-color-neutral-400);--re-color-text-on-accent:var(--re-color-neutral-0);--re-color-text-danger:var(--re-color-danger-500);--re-color-border:var(--re-color-neutral-700);--re-color-border-strong:var(--re-color-neutral-600);--re-color-link:var(--re-color-accent-300);--re-color-link-hover:var(--re-color-accent-200);--re-color-link-visited:var(--re-color-accent-200);--re-color-focus-ring:var(--re-color-accent-400);--re-color-selection-bg:var(--re-color-accent-900);--re-color-selection-text:var(--re-color-neutral-50);--re-color-info-surface:color-mix(in oklab, var(--re-color-accent-500) 20%, var(--re-color-bg));--re-color-info-border:var(--re-color-accent-400);--re-color-info-text:var(--re-color-accent-200);--re-color-success-surface:color-mix(in oklab, var(--re-color-success-500) 20%, var(--re-color-bg));--re-color-success-border:var(--re-color-success-500);--re-color-success-text:var(--re-color-success-500);--re-color-warning-surface:color-mix(in oklab, var(--re-color-warning-500) 20%, var(--re-color-bg));--re-color-warning-border:var(--re-color-warning-500);--re-color-warning-text:var(--re-color-warning-500);--re-color-danger-surface:color-mix(in oklab, var(--re-color-danger-500) 20%, var(--re-color-bg));--re-color-danger-border:var(--re-color-danger-500);--re-color-danger-text:var(--re-color-danger-500);--re-focus-ring-offset:0px;--re-shadow-focus:0 0 0 2px var(--re-color-focus-ring)}}}}@layer re.reset{@layer re.reset{*,:before,:after{box-sizing:border-box}html{-moz-text-size-adjust:100%;text-size-adjust:100%;tab-size:4}body{min-height:100dvh;line-height:var(--re-line-height-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{margin:0;padding:0;list-style:none}img,picture,video,canvas,svg{max-width:100%;height:auto;display:block}input,button,textarea,select{font:inherit;color:inherit}textarea{resize:vertical}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}[hidden]{display:none!important}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}}}@layer re.base{@layer re.base{:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}html{font-family:var(--re-font-sans);font-size:var(--re-size-text-md);line-height:var(--re-line-height-normal);color:var(--re-color-text);background-color:var(--re-color-bg)}::selection{background-color:var(--re-color-selection-bg);color:var(--re-color-selection-text)}h1,h2,h3,h4,h5,h6{line-height:var(--re-line-height-tight);font-weight:var(--re-font-weight-semibold);color:var(--re-color-text)}h1{font-size:var(--re-size-text-4xl)}h2{font-size:var(--re-size-text-3xl)}h3{font-size:var(--re-size-text-2xl)}h4{font-size:var(--re-size-text-xl)}h5{font-size:var(--re-size-text-lg)}h6{font-size:var(--re-size-text-md)}p{line-height:var(--re-line-height-normal);color:var(--re-color-text)}small{font-size:var(--re-size-text-sm);color:var(--re-color-text-muted)}code,kbd,samp,pre{font-family:var(--re-font-mono);font-size:.95em}pre{padding:var(--re-space-3) var(--re-space-4);background-color:var(--re-color-bg-muted);border-radius:var(--re-radius-md);overflow:auto}code{background-color:var(--re-color-bg-muted);border-radius:var(--re-radius-sm);padding:.1em .3em}pre code{background:0 0;border-radius:0;padding:0}hr{border:0;border-top:var(--re-border-default);margin-block:var(--re-space-6)}a{color:var(--re-color-link);text-underline-offset:.2em;text-decoration-thickness:.08em}a:hover{color:var(--re-color-link-hover)}a:visited{color:var(--re-color-link-visited)}:focus-visible{box-shadow:var(--re-shadow-focus);border-radius:var(--re-radius-sm);outline:none}input,textarea,select{color:var(--re-color-text);background-color:var(--re-color-bg)}}}@layer re.components{.re-button{justify-content:center;align-items:center;gap:var(--re-space-2);box-sizing:border-box;block-size:var(--re-control-height-md);padding-inline:var(--re-space-4);font:inherit;font-weight:var(--re-font-weight-medium);font-size:var(--re-size-text-md);text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;color:var(--re-color-text-on-accent);background-color:var(--re-color-accent-600);border:var(--re-border-width) solid transparent;border-radius:var(--re-radius-md);cursor:pointer;transition:background-color var(--re-duration-fast) var(--re-easing-standard), color var(--re-duration-fast) var(--re-easing-standard), border-color var(--re-duration-fast) var(--re-easing-standard), box-shadow var(--re-duration-fast) var(--re-easing-standard);padding-block:0;line-height:1;text-decoration:none;display:inline-flex}a.re-button{-webkit-tap-highlight-color:transparent}.re-button:hover{background-color:var(--re-color-accent-700)}.re-button:active{background-color:var(--re-color-accent-800)}.re-button:focus-visible{box-shadow:var(--re-shadow-focus);outline:none}.re-button:disabled,.re-button[aria-disabled=true]{cursor:not-allowed;opacity:.55;pointer-events:none}a.re-button[aria-disabled=true]{pointer-events:none}.re-button[data-variant=secondary]{color:var(--re-color-text);background-color:var(--re-color-bg);border-color:var(--re-color-border-strong)}.re-button[data-variant=secondary]:hover{background-color:var(--re-color-bg-subtle)}.re-button[data-variant=secondary]:active{background-color:var(--re-color-bg-muted)}.re-button[data-variant=ghost]{color:var(--re-color-text);background-color:#0000;border-color:#0000}.re-button[data-variant=ghost]:hover{background-color:var(--re-color-bg-subtle)}.re-button[data-variant=ghost]:active{background-color:var(--re-color-bg-muted)}.re-button[data-variant=danger]{color:var(--re-color-text-on-accent);background-color:var(--re-color-danger-600)}.re-button[data-variant=danger]:hover{background-color:var(--re-color-danger-700)}.re-button[data-variant=danger]:active{background-color:var(--re-color-danger-700);filter:brightness(.95)}.re-button[data-size=sm]{block-size:var(--re-control-height-sm);padding-inline:var(--re-space-3);font-size:var(--re-size-text-sm)}.re-button[data-size=lg]{block-size:var(--re-control-height-lg);padding-inline:var(--re-space-5);font-size:var(--re-size-text-lg)}.re-button[data-full-width]{inline-size:100%}.re-link{color:var(--re-color-link);text-underline-offset:.18em;border-radius:var(--re-radius-sm);transition:color var(--re-duration-fast) var(--re-easing-standard), text-decoration-color var(--re-duration-fast) var(--re-easing-standard);text-decoration-line:underline;text-decoration-color:currentColor;text-decoration-thickness:.08em}.re-link:hover{color:var(--re-color-link-hover)}.re-link:visited{color:var(--re-color-link-visited)}.re-link:focus-visible{box-shadow:var(--re-shadow-focus);outline:none}.re-link[data-variant=muted]{color:var(--re-color-text-muted);-webkit-text-decoration-color:var(--re-color-border-strong);text-decoration-color:var(--re-color-border-strong)}.re-link[data-variant=muted]:hover{color:var(--re-color-text);text-decoration-color:currentColor}.re-link[data-variant=subtle]{text-decoration-line:none}.re-link[data-variant=subtle]:hover{text-decoration-line:underline}.re-link[data-variant=external]:after{content:" ↗";speak:none}.re-input,.re-textarea,.re-select{box-sizing:border-box;inline-size:100%;min-block-size:var(--re-control-height-md);padding-inline:var(--re-control-padding-x);padding-block:var(--re-control-padding-y);font:inherit;font-size:var(--re-size-text-md);line-height:var(--re-line-height-normal);color:var(--re-color-text);background-color:var(--re-color-bg);border:var(--re-border-default);border-radius:var(--re-radius-md);appearance:none;transition:border-color var(--re-duration-fast) var(--re-easing-standard), box-shadow var(--re-duration-fast) var(--re-easing-standard), background-color var(--re-duration-fast) var(--re-easing-standard);display:block}.re-input::placeholder,.re-textarea::placeholder{color:var(--re-color-text-subtle);opacity:1}.re-input:hover,.re-textarea:hover,.re-select:hover{border-color:var(--re-color-border-strong)}.re-input:focus-visible,.re-textarea:focus-visible,.re-select:focus-visible{border-color:var(--re-color-focus-ring);box-shadow:var(--re-shadow-focus);outline:none}:is(.re-input[aria-invalid=true],.re-textarea[aria-invalid=true],.re-select[aria-invalid=true],.re-input:user-invalid,.re-textarea:user-invalid,.re-select:user-invalid){border-color:var(--re-color-border-danger)}:is(.re-input[aria-invalid=true]:focus-visible,.re-textarea[aria-invalid=true]:focus-visible,.re-select[aria-invalid=true]:focus-visible,.re-input:user-invalid:focus-visible,.re-textarea:user-invalid:focus-visible,.re-select:user-invalid:focus-visible){box-shadow:0 0 0 var(--re-focus-ring-offset) var(--re-color-bg), 0 0 0 calc(var(--re-focus-ring-offset) + var(--re-focus-ring-width)) var(--re-color-danger-500)}.re-input:disabled,.re-textarea:disabled,.re-select:disabled,.re-checkbox:disabled,.re-radio:disabled{cursor:not-allowed;background-color:var(--re-color-bg-muted);color:var(--re-color-text-subtle);opacity:.7}.re-input[data-size=sm],.re-textarea[data-size=sm],.re-select[data-size=sm]{min-block-size:var(--re-control-height-sm);font-size:var(--re-size-text-sm);padding-inline:var(--re-space-2)}.re-input[data-size=lg],.re-textarea[data-size=lg],.re-select[data-size=lg]{min-block-size:var(--re-control-height-lg);font-size:var(--re-size-text-lg);padding-inline:var(--re-space-4)}.re-textarea{min-block-size:calc(var(--re-control-height-md) * 2);resize:vertical;line-height:var(--re-line-height-relaxed)}.re-select{background-image:linear-gradient(45deg,#0000 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,#0000 50%);background-position:right var(--re-space-4) top 55%, right calc(var(--re-space-4) - 5px) top 55%;color:var(--re-color-text);background-repeat:no-repeat;background-size:5px 5px,5px 5px;padding-inline-end:var(--re-space-8)}.re-select[multiple]{min-block-size:calc(var(--re-control-height-md) * 3);background-image:none;padding-inline-end:var(--re-control-padding-x)}.re-select[multiple] option{padding-block:var(--re-space-1)}.re-checkbox,.re-radio{appearance:none;background-color:var(--re-color-bg);border:var(--re-border-width-strong) solid var(--re-color-border-strong);cursor:pointer;block-size:1.125rem;inline-size:1.125rem;color:var(--re-color-text-on-accent);transition:background-color var(--re-duration-fast) var(--re-easing-standard), border-color var(--re-duration-fast) var(--re-easing-standard), box-shadow var(--re-duration-fast) var(--re-easing-standard);flex-shrink:0;place-content:center;margin:0;padding:0;display:inline-grid}.re-checkbox{border-radius:var(--re-radius-sm)}.re-radio{border-radius:var(--re-radius-pill)}.re-checkbox:hover,.re-radio:hover{border-color:var(--re-color-accent-600)}.re-checkbox:focus-visible,.re-radio:focus-visible{box-shadow:var(--re-shadow-focus);border-color:var(--re-color-focus-ring);outline:none}.re-checkbox:checked,.re-radio:checked{background-color:var(--re-color-accent-600);border-color:var(--re-color-accent-600)}.re-checkbox:checked:before{content:"";clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);background-color:currentColor;block-size:.65rem;inline-size:.65rem}.re-radio:checked:before{content:"";border-radius:var(--re-radius-pill);background-color:currentColor;block-size:.55rem;inline-size:.55rem}.re-checkbox:indeterminate{background-color:var(--re-color-accent-600);border-color:var(--re-color-accent-600)}.re-checkbox:indeterminate:before{content:"";border-radius:var(--re-radius-sm);background-color:currentColor;block-size:.18rem;inline-size:.7rem}.re-checkbox[aria-invalid=true],.re-radio[aria-invalid=true]{border-color:var(--re-color-border-danger)}.re-field{gap:var(--re-space-2);color:var(--re-color-text);flex-direction:column;display:flex}.re-field__label{font-size:var(--re-size-text-sm);font-weight:var(--re-font-weight-medium);color:var(--re-color-text);line-height:1.2}.re-field__label[data-required]:after{content:" *";color:var(--re-color-text-danger);margin-inline-start:.1em}.re-field__hint{font-size:var(--re-size-text-sm);color:var(--re-color-text-muted);line-height:var(--re-line-height-normal)}.re-field--inline{align-items:center;gap:var(--re-space-3);flex-direction:row}.re-field-group{gap:var(--re-space-2);border:0;flex-direction:column;margin:0;padding:0;display:flex}.re-field-group__legend{font-size:var(--re-size-text-sm);font-weight:var(--re-font-weight-medium);color:var(--re-color-text);padding:0;line-height:1.2}.re-field-group[data-orientation=horizontal]>.re-field-group__items{gap:var(--re-space-4);flex-flow:wrap}.re-field-group__items{gap:var(--re-space-2);flex-direction:column;display:flex}.re-validation-message{font-size:var(--re-size-text-sm);line-height:var(--re-line-height-normal);color:var(--re-color-text-danger);display:block}.re-validation-message[data-tone=success]{color:var(--re-color-success-700)}.re-validation-message[data-tone=hint]{color:var(--re-color-text-muted)}.re-validation-message[data-tone=warning]{color:var(--re-color-warning-700)}.re-disclosure{border:var(--re-border-default);border-radius:var(--re-radius-md);background-color:var(--re-color-surface);overflow:hidden}.re-disclosure__summary{cursor:pointer;padding:var(--re-space-3) var(--re-space-4);font-weight:var(--re-font-weight-medium);color:var(--re-color-text);align-items:center;gap:var(--re-space-3);-webkit-user-select:none;user-select:none;transition:background-color var(--re-duration-fast) var(--re-easing-standard);list-style:none;display:flex}.re-disclosure__summary::-webkit-details-marker{display:none}.re-disclosure__summary:before{content:"";block-size:.6rem;inline-size:.6rem;transition:transform var(--re-duration-fast) var(--re-easing-standard);border-block-end:2px solid;border-inline-end:2px solid;flex-shrink:0;margin-inline-end:var(--re-space-1);transform:rotate(-45deg)}.re-disclosure[open]>.re-disclosure__summary:before{transform:rotate(45deg)}.re-disclosure__summary:hover{background-color:var(--re-color-bg-subtle)}.re-disclosure__summary:focus-visible{box-shadow:var(--re-shadow-focus);outline:none}.re-disclosure__body{padding:var(--re-space-3) var(--re-space-4) var(--re-space-4);border-block-start:var(--re-border-default);color:var(--re-color-text);line-height:var(--re-line-height-normal)}.re-disclosure[data-variant=plain]{background:0 0;border:0}.re-disclosure[data-variant=plain]>.re-disclosure__body{border-block-start:0;padding-block-start:var(--re-space-2)}.re-dialog:not([open]){display:none}.re-dialog{box-sizing:border-box;border:var(--re-border-default);border-radius:var(--re-radius-lg);background-color:var(--re-color-surface);color:var(--re-color-text);max-block-size:min(85vh,40rem);inline-size:min(90vw,32rem);box-shadow:var(--re-shadow-lg);flex-direction:column;padding:0;display:flex;overflow:hidden}.re-dialog::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:#0006}.re-dialog:focus-visible{outline:none}.re-dialog__header{justify-content:space-between;align-items:center;gap:var(--re-space-3);padding:var(--re-space-4);border-block-end:var(--re-border-default);display:flex}.re-dialog__title{font-size:var(--re-size-text-lg);font-weight:var(--re-font-weight-semibold);line-height:var(--re-line-height-tight);color:var(--re-color-text);margin:0}.re-dialog__close{appearance:none;cursor:pointer;padding:var(--re-space-1) var(--re-space-2);border-radius:var(--re-radius-md);color:var(--re-color-text-muted);font:inherit;font-size:var(--re-size-text-xl);transition:background-color var(--re-duration-fast) var(--re-easing-standard);background:0 0;border:0;line-height:1}.re-dialog__close:hover{background-color:var(--re-color-bg-subtle);color:var(--re-color-text)}.re-dialog__close:focus-visible{box-shadow:var(--re-shadow-focus);outline:none}.re-dialog__body{padding:var(--re-space-4);line-height:var(--re-line-height-normal);overflow-y:auto}.re-dialog__footer{justify-content:flex-end;gap:var(--re-space-3);padding:var(--re-space-4);border-block-start:var(--re-border-default);background-color:var(--re-color-bg-subtle);display:flex}.re-progress,.re-meter{appearance:none;border-radius:var(--re-radius-pill);background-color:var(--re-color-bg-muted);block-size:.5rem;inline-size:100%;color:var(--re-color-accent-600);border:0;overflow:hidden}.re-progress::-webkit-progress-bar{background-color:var(--re-color-bg-muted);border-radius:var(--re-radius-pill)}.re-progress::-webkit-progress-value{background-color:var(--re-color-accent-600);border-radius:var(--re-radius-pill);transition:inline-size var(--re-duration-normal) var(--re-easing-standard)}.re-progress::-moz-progress-bar{background-color:var(--re-color-accent-600);border-radius:var(--re-radius-pill)}.re-progress:indeterminate{background:linear-gradient(90deg, transparent 0%, var(--re-color-accent-300) 50%, transparent 100%) no-repeat, var(--re-color-bg-muted);background-size:40% 100%,100% 100%;animation:1.2s linear infinite re-progress-indeterminate}@keyframes re-progress-indeterminate{0%{background-position:-40% 0,0 0}to{background-position:140% 0,0 0}}@media (prefers-reduced-motion:reduce){.re-progress:indeterminate{animation-duration:.01ms}}.re-meter::-webkit-meter-bar{background-color:var(--re-color-bg-muted);border-radius:var(--re-radius-pill);border:0}.re-meter::-webkit-meter-optimum-value{background-color:var(--re-color-success-600);border-radius:var(--re-radius-pill)}.re-meter::-webkit-meter-suboptimum-value{background-color:var(--re-color-warning-600);border-radius:var(--re-radius-pill)}.re-meter::-webkit-meter-even-less-good-value{background-color:var(--re-color-danger-600);border-radius:var(--re-radius-pill)}.re-meter::-moz-meter-bar{background-color:var(--re-color-success-600);border-radius:var(--re-radius-pill)}.re-meter:-moz-meter-sub-optimum::-moz-meter-bar{background-color:var(--re-color-warning-600)}.re-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background-color:var(--re-color-danger-600)}.re-progress[data-size=sm],.re-meter[data-size=sm]{block-size:.25rem}.re-progress[data-size=lg],.re-meter[data-size=lg]{block-size:.75rem}.re-tabs{gap:var(--re-space-4);flex-direction:column;display:flex}.re-tabs__list{gap:var(--re-space-1);border-block-end:var(--re-border-default);flex-wrap:wrap;padding-block-end:0;display:flex}.re-tab{appearance:none;cursor:pointer;font:inherit;color:var(--re-color-text-muted);padding:var(--re-space-2) var(--re-space-4);border-radius:var(--re-radius-md) var(--re-radius-md) 0 0;line-height:1.4;font-weight:var(--re-font-weight-medium);transition:color var(--re-duration-fast) var(--re-easing-standard), background-color var(--re-duration-fast) var(--re-easing-standard);background:0 0;border:0;position:relative}.re-tab:hover{color:var(--re-color-text);background-color:var(--re-color-bg-subtle)}.re-tab:focus-visible{box-shadow:var(--re-shadow-focus);outline:none}.re-tab[aria-selected=true]{color:var(--re-color-text);background-color:var(--re-color-bg)}.re-tab[aria-selected=true]:after{content:"";inset-inline:var(--re-space-2);background-color:var(--re-color-accent-600);border-radius:var(--re-radius-sm);block-size:2px;position:absolute;inset-block-end:calc(var(--re-border-width) * -1)}.re-tabpanel{color:var(--re-color-text);line-height:var(--re-line-height-normal)}.re-tabpanel:focus-visible{box-shadow:var(--re-shadow-focus);border-radius:var(--re-radius-md);outline:none}.re-menu{display:inline-block;position:relative}.re-menu__panel{background-color:var(--re-color-surface);border:var(--re-border-default);border-radius:var(--re-radius-md);min-inline-size:12rem;box-shadow:var(--re-shadow-md);padding:var(--re-space-1);z-index:var(--re-z-popover);flex-direction:column;gap:1px;display:flex;position:absolute;inset-block-start:calc(100% + var(--re-space-1));inset-inline-start:0}.re-menu__item{appearance:none;cursor:pointer;font:inherit;text-align:start;padding:var(--re-space-2) var(--re-space-3);border-radius:var(--re-radius-sm);color:var(--re-color-text);line-height:var(--re-line-height-normal);background:0 0;border:0}.re-menu__item:hover{background-color:var(--re-color-bg-muted);outline:none}.re-menu__item:focus-visible{background-color:var(--re-color-bg-muted);box-shadow:inset 0 0 0 2px var(--re-color-focus-ring);outline:none}.re-menu__item[aria-disabled=true],.re-menu__item:disabled{color:var(--re-color-text-subtle);cursor:not-allowed}.re-menu__separator{background-color:var(--re-color-border);block-size:1px;margin-block:var(--re-space-1)}.re-popover{border:var(--re-border-default);border-radius:var(--re-radius-md);background-color:var(--re-color-surface);color:var(--re-color-text);padding:var(--re-space-3) var(--re-space-4);box-shadow:var(--re-shadow-md);max-inline-size:22rem;line-height:var(--re-line-height-normal);margin:0;inset:auto}.re-popover:popover-open{margin:0}.re-popover[data-tone=info]{background-color:color-mix(in srgb, var(--re-color-accent-500) 12%, var(--re-color-surface));border-color:var(--re-color-accent-500)}.re-popover[data-tone=warning]{background-color:color-mix(in srgb, var(--re-color-warning-500) 12%, var(--re-color-surface));border-color:var(--re-color-warning-500)}.re-popover[data-tone=danger]{background-color:color-mix(in srgb, var(--re-color-danger-500) 12%, var(--re-color-surface));border-color:var(--re-color-danger-500)}.re-toast-region{z-index:var(--re-z-toast);pointer-events:none;position:fixed;inset-block-end:var(--re-space-6);inset-inline-end:var(--re-space-6)}.re-toast-list{gap:var(--re-space-2);flex-direction:column-reverse;min-inline-size:16rem;max-inline-size:24rem;margin:0;padding:0;display:flex}.re-toast{pointer-events:auto;gap:var(--re-space-3);padding:var(--re-space-3) var(--re-space-4);background-color:var(--re-color-surface);color:var(--re-color-text);border:var(--re-border-default);border-radius:var(--re-radius-md);box-shadow:var(--re-shadow-md);line-height:var(--re-line-height-normal);align-items:flex-start;display:flex}.re-toast__body{flex:auto}.re-toast__dismiss{appearance:none;cursor:pointer;color:var(--re-color-text-muted);font:inherit;font-size:var(--re-size-text-lg);padding:0 var(--re-space-1);border-radius:var(--re-radius-sm);background:0 0;border:0;line-height:1}.re-toast__dismiss:hover{color:var(--re-color-text);background:var(--re-color-bg-subtle)}.re-toast__dismiss:focus-visible{box-shadow:var(--re-shadow-focus);outline:none}.re-toast[data-tone=success]{background-color:color-mix(in srgb, var(--re-color-success-600) 12%, var(--re-color-surface));border-color:var(--re-color-success-600);color:var(--re-color-text)}.re-toast[data-tone=danger]{background-color:color-mix(in srgb, var(--re-color-danger-600) 12%, var(--re-color-surface));border-color:var(--re-color-danger-600);color:var(--re-color-text)}.re-toast[data-tone=warning]{background-color:color-mix(in srgb, var(--re-color-warning-600) 12%, var(--re-color-surface));border-color:var(--re-color-warning-600);color:var(--re-color-text)}.re-accordion{border:var(--re-border-default);border-radius:var(--re-radius-md);flex-direction:column;display:flex;overflow:hidden}.re-accordion>.re-disclosure{border-width:0;border-radius:0}.re-accordion>.re-disclosure+.re-disclosure{border-block-start:var(--re-border-default)}.re-alert{align-items:flex-start;gap:var(--re-space-3);padding:var(--re-space-3) var(--re-space-4);border:var(--re-border-width) solid var(--re-color-info-border);border-radius:var(--re-radius-md);background-color:var(--re-color-info-surface);color:var(--re-color-text);line-height:var(--re-line-height-normal);display:flex}.re-alert__content{flex:auto;min-inline-size:0}.re-alert__title{margin:0 0 var(--re-space-1);font-weight:var(--re-font-weight-semibold);color:var(--re-color-info-text)}.re-alert__dismiss{appearance:none;cursor:pointer;padding:var(--re-space-1) var(--re-space-2);border-radius:var(--re-radius-sm);font-size:var(--re-size-text-lg);color:var(--re-color-text-muted);background:0 0;border:0;flex-shrink:0;line-height:1}.re-alert__dismiss:hover{color:var(--re-color-text);background:color-mix(in oklab, var(--re-color-text) 10%, transparent)}.re-alert__dismiss:focus-visible{box-shadow:var(--re-shadow-focus);outline:none}.re-alert[data-variant=success]{border-color:var(--re-color-success-border);background-color:var(--re-color-success-surface)}.re-alert[data-variant=success] .re-alert__title{color:var(--re-color-success-text)}.re-alert[data-variant=warning]{border-color:var(--re-color-warning-border);background-color:var(--re-color-warning-surface)}.re-alert[data-variant=warning] .re-alert__title{color:var(--re-color-warning-text)}.re-alert[data-variant=danger]{border-color:var(--re-color-danger-border);background-color:var(--re-color-danger-surface)}.re-alert[data-variant=danger] .re-alert__title{color:var(--re-color-danger-text)}.re-avatar{inline-size:var(--re-control-height-md);block-size:var(--re-control-height-md);border-radius:var(--re-radius-pill);background-color:var(--re-color-bg-muted);color:var(--re-color-text-muted);font-size:var(--re-size-text-sm);font-weight:var(--re-font-weight-medium);text-transform:uppercase;-webkit-user-select:none;user-select:none;flex-shrink:0;justify-content:center;align-items:center;line-height:1;display:inline-flex;overflow:hidden}.re-avatar>img{object-fit:cover;block-size:100%;inline-size:100%}.re-avatar[data-size=sm]{inline-size:var(--re-control-height-sm);block-size:var(--re-control-height-sm);font-size:var(--re-size-text-xs)}.re-avatar[data-size=lg]{inline-size:var(--re-control-height-lg);block-size:var(--re-control-height-lg);font-size:var(--re-size-text-md)}.re-badge{align-items:center;gap:var(--re-space-1);padding-inline:var(--re-space-2);padding-block:calc(var(--re-space-1) / 2);font-size:var(--re-size-text-xs);font-weight:var(--re-font-weight-medium);white-space:nowrap;border-radius:var(--re-radius-pill);background-color:var(--re-color-bg-muted);color:var(--re-color-text-muted);line-height:1.4;display:inline-flex}.re-badge[data-variant=info]{background-color:var(--re-color-info-surface);color:var(--re-color-info-text)}.re-badge[data-variant=success]{background-color:var(--re-color-success-surface);color:var(--re-color-success-text)}.re-badge[data-variant=warning]{background-color:var(--re-color-warning-surface);color:var(--re-color-warning-text)}.re-badge[data-variant=danger]{background-color:var(--re-color-danger-surface);color:var(--re-color-danger-text)}.re-breadcrumb>ol{align-items:center;gap:var(--re-space-2);font-size:var(--re-size-text-sm);color:var(--re-color-text-muted);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.re-breadcrumb li{align-items:center;gap:var(--re-space-2);display:inline-flex}.re-breadcrumb li+li:before{content:"/";color:var(--re-color-text-subtle);-webkit-user-select:none;user-select:none}.re-breadcrumb a{color:var(--re-color-link);border-radius:var(--re-radius-sm);text-decoration:none}.re-breadcrumb a:hover{text-decoration:underline}.re-breadcrumb a:focus-visible{box-shadow:var(--re-shadow-focus);outline:none}.re-breadcrumb [aria-current=page]{color:var(--re-color-text);font-weight:var(--re-font-weight-medium);pointer-events:none;text-decoration:none}.re-card{background-color:var(--re-color-surface);border:var(--re-border-default);border-radius:var(--re-radius-lg);box-shadow:var(--re-shadow-sm);color:var(--re-color-text);flex-direction:column;display:flex;overflow:hidden}a.re-card{text-decoration:none}.re-card__header{padding:var(--re-space-4);font-weight:var(--re-font-weight-semibold);border-block-end:var(--re-border-default)}.re-card__body{padding:var(--re-space-4);line-height:var(--re-line-height-normal)}.re-card__footer{padding:var(--re-space-3) var(--re-space-4);border-block-start:var(--re-border-default);background-color:var(--re-color-bg-subtle)}.re-card[data-interactive]{cursor:pointer;transition:box-shadow var(--re-duration-fast) var(--re-easing-standard), border-color var(--re-duration-fast) var(--re-easing-standard)}.re-card[data-interactive]:hover{box-shadow:var(--re-shadow-md);border-color:var(--re-color-border-strong)}.re-card[data-interactive]:focus-within{box-shadow:var(--re-shadow-focus);outline:none}.re-switch{appearance:none;box-sizing:border-box;border:var(--re-border-width) solid var(--re-color-border-strong);border-radius:var(--re-radius-pill);background-color:var(--re-color-bg-muted);cursor:pointer;vertical-align:middle;block-size:1.25rem;inline-size:2.25rem;transition:background-color var(--re-duration-fast) var(--re-easing-standard), border-color var(--re-duration-fast) var(--re-easing-standard);flex-shrink:0;margin:0;position:relative}.re-switch:before{content:"";border-radius:var(--re-radius-pill);background-color:var(--re-color-surface);block-size:.875rem;inline-size:.875rem;box-shadow:var(--re-shadow-sm);transition:transform var(--re-duration-fast) var(--re-easing-standard);position:absolute;inset-block-start:2px;inset-inline-start:2px}.re-switch:checked{background-color:var(--re-color-accent-600);border-color:var(--re-color-accent-600)}.re-switch:checked:before{transform:translate(1rem)}.re-switch:focus-visible{box-shadow:var(--re-shadow-focus);outline:none}.re-switch:disabled{cursor:not-allowed;opacity:.55}.re-tag{align-items:center;gap:var(--re-space-1);padding-inline:var(--re-space-2);padding-block:calc(var(--re-space-1) / 2);font-size:var(--re-size-text-xs);white-space:nowrap;border:var(--re-border-width) solid var(--re-color-border);border-radius:var(--re-radius-pill);background-color:var(--re-color-bg-subtle);color:var(--re-color-text);line-height:1.4;display:inline-flex}.re-tag__remove{appearance:none;border-radius:var(--re-radius-pill);block-size:1rem;inline-size:1rem;color:var(--re-color-text-muted);font-size:var(--re-size-text-sm);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;padding:0;line-height:1;display:inline-flex}.re-tag__remove:hover{color:var(--re-color-text);background:color-mix(in oklab, var(--re-color-text) 12%, transparent)}.re-tag__remove:focus-visible{box-shadow:var(--re-shadow-focus);outline:none}.re-tag[data-variant=info]{border-color:var(--re-color-info-border);background-color:var(--re-color-info-surface);color:var(--re-color-info-text)}.re-tag[data-variant=success]{border-color:var(--re-color-success-border);background-color:var(--re-color-success-surface);color:var(--re-color-success-text)}.re-tag[data-variant=warning]{border-color:var(--re-color-warning-border);background-color:var(--re-color-warning-surface);color:var(--re-color-warning-text)}.re-tag[data-variant=danger]{border-color:var(--re-color-danger-border);background-color:var(--re-color-danger-surface);color:var(--re-color-danger-text)}}
package/dist/themes/renascent.css CHANGED
@@ -1 +1 @@
1
- :root{--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--re-color-bg:#0f131a;--re-color-bg-subtle:#171c26;--re-color-bg-muted:#1f2430;--re-color-surface:#171c26;--re-color-text:#f8fafc;--re-color-text-muted:#97a3b4;--re-color-text-subtle:#6b7a90;--re-color-border:#29303d;--re-color-border-strong:#353d4d;--re-color-accent-50:#eff6ff;--re-color-accent-100:#dbeafe;--re-color-accent-200:#bdd6fe;--re-color-accent-300:#93c3fd;--re-color-accent-400:#60a5fa;--re-color-accent-500:#60a5fa;--re-color-accent-600:#3c83f6;--re-color-accent-700:#2563eb;--re-color-accent-800:#1d4ed8;--re-color-accent-900:#1e3a8a;--re-color-link:#3c83f6;--re-color-link-hover:#60a5fa;--re-color-link-visited:#a78bfa;--re-color-focus-ring:#3c83f6;--re-color-text-on-accent:#0f131a;--re-color-success-500:#2fe9d0;--re-color-success-600:#0fd4bb;--re-color-success-700:#0ab8a2;--re-color-warning-500:#f9cf53;--re-color-warning-600:#f0b929;--re-color-warning-700:#d4a020;--re-color-danger-500:#ef4444;--re-color-danger-600:#dc2626;--re-color-danger-700:#b91c1c;--re-focus-ring-offset:0px;--re-shadow-focus:0 0 0 2px var(--re-color-focus-ring);--re-color-selection-bg:#3c83f64d;--re-color-selection-text:#f8fafc;--re-color-text-danger:#f87171;--re-color-border-danger:#ef4444;--re-color-phoenix:#f3753f;--re-color-phoenix-light:#f9a07a;--re-color-phoenix-dark:#d45a26;--re-color-purple:#a855f7;--re-color-purple-light:#c084fc;--re-color-purple-dark:#7c3aed;--re-gradient-brand:linear-gradient(135deg, #3c83f6, #a855f7);--re-gradient-phoenix:linear-gradient(135deg, #f3753f, #f9cf53);--re-gradient-hero:linear-gradient(135deg, #3c83f6 0%, #a855f7 50%, #f3753f 100%)}.theme-renascent{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--re-color-bg:#0f131a;--re-color-bg-subtle:#171c26;--re-color-bg-muted:#1f2430;--re-color-surface:#171c26;--re-color-text:#f8fafc;--re-color-text-muted:#97a3b4;--re-color-text-subtle:#6b7a90;--re-color-border:#29303d;--re-color-border-strong:#353d4d;--re-color-accent-500:#3c83f6;--re-color-accent-600:#2563eb;--re-color-accent-700:#1d4ed8;--re-color-link:#3c83f6;--re-color-link-hover:#60a5fa;--re-color-focus-ring:#3c83f6;--re-color-text-on-accent:#0f131a;--re-color-text-danger:#f87171;--re-color-border-danger:#ef4444;--re-color-success-500:#2fe9d0;--re-color-success-600:#0fd4bb;--re-color-success-700:#0ab8a2;--re-color-warning-500:#f9cf53;--re-color-warning-600:#f0b929;--re-color-warning-700:#d4a020;--re-color-danger-500:#ef4444;--re-color-danger-600:#dc2626;--re-color-danger-700:#b91c1c;--re-focus-ring-offset:0px;--re-shadow-focus:0 0 0 2px var(--re-color-focus-ring);--re-color-selection-bg:#3c83f64d;--re-color-selection-text:#f8fafc;background-color:var(--re-color-bg);color:var(--re-color-text)}.re-button[data-variant=phoenix]{background:var(--re-gradient-phoenix);color:#fff;border-color:#0000}.re-button[data-variant=phoenix]:hover{filter:brightness(1.12);background:var(--re-gradient-phoenix)}.re-button[data-variant=phoenix]:active{filter:brightness(.9)}.re-button[data-variant=phoenix]:focus-visible{border-color:#0000}.re-button[data-variant=phoenix]:disabled,.re-button[data-variant=phoenix][aria-disabled=true]{filter:none;opacity:.55}.re-button[data-variant=brand]{background:var(--re-gradient-brand);color:#fff;border-color:#0000}.re-button[data-variant=brand]:hover{filter:brightness(1.12);background:var(--re-gradient-brand)}.re-button[data-variant=brand]:active{filter:brightness(.9)}.re-button[data-variant=brand]:focus-visible{border-color:#0000}.re-button[data-variant=brand]:disabled,.re-button[data-variant=brand][aria-disabled=true]{filter:none;opacity:.55}
1
+ :root{--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--re-color-bg:#0f131a;--re-color-bg-subtle:#171c26;--re-color-bg-muted:#1f2430;--re-color-surface:#171c26;--re-color-text:#f8fafc;--re-color-text-muted:#97a3b4;--re-color-text-subtle:#6b7a90;--re-color-border:#29303d;--re-color-border-strong:#353d4d;--re-color-accent-50:#eff6ff;--re-color-accent-100:#dbeafe;--re-color-accent-200:#bdd6fe;--re-color-accent-300:#93c3fd;--re-color-accent-400:#60a5fa;--re-color-accent-500:#60a5fa;--re-color-accent-600:#3c83f6;--re-color-accent-700:#2563eb;--re-color-accent-800:#1d4ed8;--re-color-accent-900:#1e3a8a;--re-color-link:#3c83f6;--re-color-link-hover:#60a5fa;--re-color-link-visited:#a78bfa;--re-color-focus-ring:#3c83f6;--re-color-text-on-accent:#fff;--re-color-success-500:#2fe9d0;--re-color-success-600:#0fd4bb;--re-color-success-700:#0ab8a2;--re-color-warning-500:#f9cf53;--re-color-warning-600:#f0b929;--re-color-warning-700:#d4a020;--re-color-danger-500:#ef4444;--re-color-danger-600:#dc2626;--re-color-danger-700:#b91c1c;--re-color-info-surface:color-mix(in oklab, #3c83f6 20%, var(--re-color-bg));--re-color-info-border:#60a5fa;--re-color-info-text:#93c3fd;--re-color-success-surface:color-mix(in oklab, #2fe9d0 20%, var(--re-color-bg));--re-color-success-border:#2fe9d0;--re-color-success-text:#2fe9d0;--re-color-warning-surface:color-mix(in oklab, #f9cf53 20%, var(--re-color-bg));--re-color-warning-border:#f9cf53;--re-color-warning-text:#f9cf53;--re-color-danger-surface:color-mix(in oklab, #ef4444 20%, var(--re-color-bg));--re-color-danger-border:#ef4444;--re-color-danger-text:#f87171;--re-focus-ring-offset:0px;--re-shadow-focus:0 0 0 2px var(--re-color-focus-ring);--re-color-selection-bg:#3c83f64d;--re-color-selection-text:#f8fafc;--re-color-text-danger:#f87171;--re-color-border-danger:#ef4444;--re-color-phoenix:#f3753f;--re-color-phoenix-light:#f9a07a;--re-color-phoenix-dark:#d45a26;--re-color-purple:#a855f7;--re-color-purple-light:#c084fc;--re-color-purple-dark:#7c3aed;--re-gradient-brand:linear-gradient(135deg, #3c83f6, #a855f7);--re-gradient-phoenix:linear-gradient(135deg, #f3753f, #f9cf53);--re-gradient-hero:linear-gradient(135deg, #3c83f6 0%, #a855f7 50%, #f3753f 100%)}.theme-renascent,.theme-renascent-dark{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--re-color-bg:#0f131a;--re-color-bg-subtle:#171c26;--re-color-bg-muted:#1f2430;--re-color-surface:#171c26;--re-color-text:#f8fafc;--re-color-text-muted:#97a3b4;--re-color-text-subtle:#6b7a90;--re-color-border:#29303d;--re-color-border-strong:#353d4d;--re-color-accent-500:#3c83f6;--re-color-accent-600:#2563eb;--re-color-accent-700:#1d4ed8;--re-color-link:#3c83f6;--re-color-link-hover:#60a5fa;--re-color-focus-ring:#3c83f6;--re-color-text-on-accent:#fff;--re-color-text-danger:#f87171;--re-color-border-danger:#ef4444;--re-color-success-500:#2fe9d0;--re-color-success-600:#0fd4bb;--re-color-success-700:#0ab8a2;--re-color-warning-500:#f9cf53;--re-color-warning-600:#f0b929;--re-color-warning-700:#d4a020;--re-color-danger-500:#ef4444;--re-color-danger-600:#dc2626;--re-color-danger-700:#b91c1c;--re-color-info-surface:color-mix(in oklab, #3c83f6 20%, var(--re-color-bg));--re-color-info-border:#60a5fa;--re-color-info-text:#93c3fd;--re-color-success-surface:color-mix(in oklab, #2fe9d0 20%, var(--re-color-bg));--re-color-success-border:#2fe9d0;--re-color-success-text:#2fe9d0;--re-color-warning-surface:color-mix(in oklab, #f9cf53 20%, var(--re-color-bg));--re-color-warning-border:#f9cf53;--re-color-warning-text:#f9cf53;--re-color-danger-surface:color-mix(in oklab, #ef4444 20%, var(--re-color-bg));--re-color-danger-border:#ef4444;--re-color-danger-text:#f87171;--re-focus-ring-offset:0px;--re-shadow-focus:0 0 0 2px var(--re-color-focus-ring);--re-color-selection-bg:#3c83f64d;--re-color-selection-text:#f8fafc;background-color:var(--re-color-bg);color:var(--re-color-text)}@media (prefers-color-scheme:light){:root,.theme-renascent{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--re-color-bg:#f6f8fc;--re-color-bg-subtle:#eef2f8;--re-color-bg-muted:#e3e9f2;--re-color-surface:#fff;--re-color-text:#0f131a;--re-color-text-muted:#475569;--re-color-text-subtle:#64748b;--re-color-text-on-accent:#fff;--re-color-accent-600:#2563eb;--re-color-accent-700:#1d4ed8;--re-color-accent-800:#1e40af;--re-color-text-danger:#b91c1c;--re-color-border:#d7dfea;--re-color-border-strong:#c0cad9;--re-color-border-danger:#dc2626;--re-color-link:#2563eb;--re-color-link-hover:#1d4ed8;--re-color-link-visited:#7c3aed;--re-color-focus-ring:#3c83f6;--re-color-selection-bg:#3c83f62e;--re-color-selection-text:#0f131a;--re-focus-ring-offset:2px;--re-shadow-focus:0 0 0 var(--re-focus-ring-offset) var(--re-color-bg), 0 0 0 calc(var(--re-focus-ring-offset) + var(--re-focus-ring-width)) var(--re-color-focus-ring);--re-color-info-surface:color-mix(in oklab, #3c83f6 12%, var(--re-color-bg));--re-color-info-border:#3c83f6;--re-color-info-text:#2563eb;--re-color-success-surface:color-mix(in oklab, var(--re-color-success-500) 12%, var(--re-color-bg));--re-color-success-border:#0fd4bb;--re-color-success-text:#0f766e;--re-color-warning-surface:color-mix(in oklab, var(--re-color-warning-500) 12%, var(--re-color-bg));--re-color-warning-border:#f0b929;--re-color-warning-text:#b45309;--re-color-danger-surface:color-mix(in oklab, var(--re-color-danger-500) 12%, var(--re-color-bg));--re-color-danger-border:#dc2626;--re-color-danger-text:#b91c1c}}.theme-renascent-light{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--re-color-bg:#f6f8fc;--re-color-bg-subtle:#eef2f8;--re-color-bg-muted:#e3e9f2;--re-color-surface:#fff;--re-color-text:#0f131a;--re-color-text-muted:#475569;--re-color-text-subtle:#64748b;--re-color-text-on-accent:#fff;--re-color-accent-600:#2563eb;--re-color-accent-700:#1d4ed8;--re-color-accent-800:#1e40af;--re-color-text-danger:#b91c1c;--re-color-border:#d7dfea;--re-color-border-strong:#c0cad9;--re-color-border-danger:#dc2626;--re-color-link:#2563eb;--re-color-link-hover:#1d4ed8;--re-color-link-visited:#7c3aed;--re-color-focus-ring:#3c83f6;--re-color-selection-bg:#3c83f62e;--re-color-selection-text:#0f131a;--re-focus-ring-offset:2px;--re-shadow-focus:0 0 0 var(--re-focus-ring-offset) var(--re-color-bg), 0 0 0 calc(var(--re-focus-ring-offset) + var(--re-focus-ring-width)) var(--re-color-focus-ring);--re-color-info-surface:color-mix(in oklab, #3c83f6 12%, var(--re-color-bg));--re-color-info-border:#3c83f6;--re-color-info-text:#2563eb;--re-color-success-surface:color-mix(in oklab, var(--re-color-success-500) 12%, var(--re-color-bg));--re-color-success-border:#0fd4bb;--re-color-success-text:#0f766e;--re-color-warning-surface:color-mix(in oklab, var(--re-color-warning-500) 12%, var(--re-color-bg));--re-color-warning-border:#f0b929;--re-color-warning-text:#b45309;--re-color-danger-surface:color-mix(in oklab, var(--re-color-danger-500) 12%, var(--re-color-bg));--re-color-danger-border:#dc2626;--re-color-danger-text:#b91c1c;background-color:var(--re-color-bg);color:var(--re-color-text)}.re-button[data-variant=phoenix]{background:var(--re-gradient-phoenix);color:#fff;background-origin:border-box;border-color:#0000}.re-button[data-variant=phoenix]:hover{filter:brightness(1.12)}.re-button[data-variant=phoenix]:active{filter:brightness(.9)}.re-button[data-variant=phoenix]:focus-visible{border-color:#0000}.re-button[data-variant=phoenix]:disabled,.re-button[data-variant=phoenix][aria-disabled=true]{filter:none;opacity:.55}.re-button[data-variant=brand]{background:var(--re-gradient-brand);color:#fff;background-origin:border-box;border-color:#0000}.re-button[data-variant=brand]:hover{filter:brightness(1.12)}.re-button[data-variant=brand]:active{filter:brightness(.9)}.re-button[data-variant=brand]:focus-visible{border-color:#0000}.re-button[data-variant=brand]:disabled,.re-button[data-variant=brand][aria-disabled=true]{filter:none;opacity:.55}
package/dist/tokens.css CHANGED
@@ -1 +1 @@
1
- @layer re.tokens{:root{--re-color-neutral-0:#fff;--re-color-neutral-50:#f8fafc;--re-color-neutral-100:#f1f5f9;--re-color-neutral-200:#e2e8f0;--re-color-neutral-300:#cbd5e1;--re-color-neutral-400:#94a3b8;--re-color-neutral-500:#64748b;--re-color-neutral-600:#475569;--re-color-neutral-700:#334155;--re-color-neutral-800:#1e293b;--re-color-neutral-900:#0f172a;--re-color-neutral-950:#020617;--re-color-accent-50:#eff6ff;--re-color-accent-100:#dbeafe;--re-color-accent-200:#bfdbfe;--re-color-accent-300:#93c5fd;--re-color-accent-400:#60a5fa;--re-color-accent-500:#3b82f6;--re-color-accent-600:#2563eb;--re-color-accent-700:#1d4ed8;--re-color-accent-800:#1e40af;--re-color-accent-900:#1e3a8a;--re-color-danger-500:#ef4444;--re-color-danger-600:#dc2626;--re-color-danger-700:#b91c1c;--re-color-success-500:#10b981;--re-color-success-600:#059669;--re-color-success-700:#047857;--re-color-warning-500:#f59e0b;--re-color-warning-600:#d97706;--re-color-warning-700:#b45309;--re-color-bg:var(--re-color-neutral-0);--re-color-bg-subtle:var(--re-color-neutral-50);--re-color-bg-muted:var(--re-color-neutral-100);--re-color-surface:var(--re-color-neutral-0);--re-color-text:var(--re-color-neutral-900);--re-color-text-muted:var(--re-color-neutral-600);--re-color-text-subtle:var(--re-color-neutral-500);--re-color-text-on-accent:var(--re-color-neutral-0);--re-color-text-danger:var(--re-color-danger-700);--re-color-border:var(--re-color-neutral-200);--re-color-border-strong:var(--re-color-neutral-300);--re-color-border-danger:var(--re-color-danger-500);--re-color-link:var(--re-color-accent-700);--re-color-link-hover:var(--re-color-accent-800);--re-color-link-visited:var(--re-color-accent-800);--re-color-focus-ring:var(--re-color-accent-500);--re-color-selection-bg:var(--re-color-accent-100);--re-color-selection-text:var(--re-color-neutral-900);--re-font-sans:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;--re-font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--re-size-text-xs:.75rem;--re-size-text-sm:.875rem;--re-size-text-md:1rem;--re-size-text-lg:1.125rem;--re-size-text-xl:1.25rem;--re-size-text-2xl:1.5rem;--re-size-text-3xl:1.875rem;--re-size-text-4xl:2.25rem;--re-line-height-tight:1.2;--re-line-height-snug:1.35;--re-line-height-normal:1.5;--re-line-height-relaxed:1.65;--re-font-weight-regular:400;--re-font-weight-medium:500;--re-font-weight-semibold:600;--re-font-weight-bold:700;--re-space-0:0;--re-space-1:.25rem;--re-space-2:.5rem;--re-space-3:.75rem;--re-space-4:1rem;--re-space-5:1.25rem;--re-space-6:1.5rem;--re-space-8:2rem;--re-space-10:2.5rem;--re-space-12:3rem;--re-space-16:4rem;--re-radius-none:0;--re-radius-sm:.25rem;--re-radius-md:.375rem;--re-radius-lg:.5rem;--re-radius-xl:.75rem;--re-radius-pill:9999px;--re-border-width:1px;--re-border-width-strong:2px;--re-border-default:var(--re-border-width) solid var(--re-color-border);--re-border-strong:var(--re-border-width-strong) solid var(--re-color-border-strong);--re-border-danger:var(--re-border-width) solid var(--re-color-border-danger);--re-focus-ring-width:2px;--re-focus-ring-offset:2px;--re-focus-ring-color:var(--re-color-focus-ring);--re-shadow-focus:0 0 0 var(--re-focus-ring-offset) var(--re-color-bg), 0 0 0 calc(var(--re-focus-ring-offset) + var(--re-focus-ring-width)) var(--re-color-focus-ring);--re-shadow-sm:0 1px 2px #0000000f;--re-shadow-md:0 4px 12px #00000014;--re-shadow-lg:0 12px 32px #0000001f;--re-duration-instant:0s;--re-duration-fast:.12s;--re-duration-normal:.2s;--re-duration-slow:.32s;--re-easing-standard:cubic-bezier(.2, 0, 0, 1);--re-easing-emphasized:cubic-bezier(.3, 0, 0, 1);--re-z-base:0;--re-z-overlay:100;--re-z-popover:200;--re-z-dialog:300;--re-z-toast:400;--re-control-height-sm:1.75rem;--re-control-height-md:2.25rem;--re-control-height-lg:2.75rem;--re-control-padding-x:var(--re-space-3);--re-control-padding-y:var(--re-space-2)}@media (prefers-color-scheme:dark){:root{--re-color-bg:var(--re-color-neutral-950);--re-color-bg-subtle:var(--re-color-neutral-900);--re-color-bg-muted:var(--re-color-neutral-800);--re-color-surface:var(--re-color-neutral-900);--re-color-text:var(--re-color-neutral-50);--re-color-text-muted:var(--re-color-neutral-300);--re-color-text-subtle:var(--re-color-neutral-400);--re-color-text-on-accent:var(--re-color-neutral-0);--re-color-text-danger:var(--re-color-danger-500);--re-color-border:var(--re-color-neutral-700);--re-color-border-strong:var(--re-color-neutral-600);--re-color-link:var(--re-color-accent-300);--re-color-link-hover:var(--re-color-accent-200);--re-color-link-visited:var(--re-color-accent-200);--re-color-focus-ring:var(--re-color-accent-400);--re-color-selection-bg:var(--re-color-accent-900);--re-color-selection-text:var(--re-color-neutral-50);--re-focus-ring-offset:0px;--re-shadow-focus:0 0 0 2px var(--re-color-focus-ring)}}}
1
+ @layer re.tokens{:root{--re-color-neutral-0:#fff;--re-color-neutral-50:#f8fafc;--re-color-neutral-100:#f1f5f9;--re-color-neutral-200:#e2e8f0;--re-color-neutral-300:#cbd5e1;--re-color-neutral-400:#94a3b8;--re-color-neutral-500:#64748b;--re-color-neutral-600:#475569;--re-color-neutral-700:#334155;--re-color-neutral-800:#1e293b;--re-color-neutral-900:#0f172a;--re-color-neutral-950:#020617;--re-color-accent-50:#eff6ff;--re-color-accent-100:#dbeafe;--re-color-accent-200:#bfdbfe;--re-color-accent-300:#93c5fd;--re-color-accent-400:#60a5fa;--re-color-accent-500:#3b82f6;--re-color-accent-600:#2563eb;--re-color-accent-700:#1d4ed8;--re-color-accent-800:#1e40af;--re-color-accent-900:#1e3a8a;--re-color-danger-500:#ef4444;--re-color-danger-600:#dc2626;--re-color-danger-700:#b91c1c;--re-color-success-500:#10b981;--re-color-success-600:#059669;--re-color-success-700:#047857;--re-color-warning-500:#f59e0b;--re-color-warning-600:#d97706;--re-color-warning-700:#b45309;--re-color-bg:var(--re-color-neutral-0);--re-color-bg-subtle:var(--re-color-neutral-50);--re-color-bg-muted:var(--re-color-neutral-100);--re-color-surface:var(--re-color-neutral-0);--re-color-text:var(--re-color-neutral-900);--re-color-text-muted:var(--re-color-neutral-600);--re-color-text-subtle:var(--re-color-neutral-500);--re-color-text-on-accent:var(--re-color-neutral-0);--re-color-text-danger:var(--re-color-danger-700);--re-color-border:var(--re-color-neutral-200);--re-color-border-strong:var(--re-color-neutral-300);--re-color-border-danger:var(--re-color-danger-500);--re-color-link:var(--re-color-accent-700);--re-color-link-hover:var(--re-color-accent-800);--re-color-link-visited:var(--re-color-accent-800);--re-color-focus-ring:var(--re-color-accent-500);--re-color-selection-bg:var(--re-color-accent-100);--re-color-selection-text:var(--re-color-neutral-900);--re-color-info-surface:color-mix(in oklab, var(--re-color-accent-500) 12%, var(--re-color-bg));--re-color-info-border:var(--re-color-accent-500);--re-color-info-text:var(--re-color-accent-700);--re-color-success-surface:color-mix(in oklab, var(--re-color-success-500) 12%, var(--re-color-bg));--re-color-success-border:var(--re-color-success-500);--re-color-success-text:var(--re-color-success-700);--re-color-warning-surface:color-mix(in oklab, var(--re-color-warning-500) 12%, var(--re-color-bg));--re-color-warning-border:var(--re-color-warning-500);--re-color-warning-text:var(--re-color-warning-700);--re-color-danger-surface:color-mix(in oklab, var(--re-color-danger-500) 12%, var(--re-color-bg));--re-color-danger-border:var(--re-color-danger-500);--re-color-danger-text:var(--re-color-danger-700);--re-font-sans:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;--re-font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--re-size-text-xs:.75rem;--re-size-text-sm:.875rem;--re-size-text-md:1rem;--re-size-text-lg:1.125rem;--re-size-text-xl:1.25rem;--re-size-text-2xl:1.5rem;--re-size-text-3xl:1.875rem;--re-size-text-4xl:2.25rem;--re-line-height-tight:1.2;--re-line-height-snug:1.35;--re-line-height-normal:1.5;--re-line-height-relaxed:1.65;--re-font-weight-regular:400;--re-font-weight-medium:500;--re-font-weight-semibold:600;--re-font-weight-bold:700;--re-space-0:0;--re-space-1:.25rem;--re-space-2:.5rem;--re-space-3:.75rem;--re-space-4:1rem;--re-space-5:1.25rem;--re-space-6:1.5rem;--re-space-8:2rem;--re-space-10:2.5rem;--re-space-12:3rem;--re-space-16:4rem;--re-radius-none:0;--re-radius-sm:.25rem;--re-radius-md:.375rem;--re-radius-lg:.5rem;--re-radius-xl:.75rem;--re-radius-pill:9999px;--re-border-width:1px;--re-border-width-strong:2px;--re-border-default:var(--re-border-width) solid var(--re-color-border);--re-border-strong:var(--re-border-width-strong) solid var(--re-color-border-strong);--re-border-danger:var(--re-border-width) solid var(--re-color-border-danger);--re-focus-ring-width:2px;--re-focus-ring-offset:2px;--re-focus-ring-color:var(--re-color-focus-ring);--re-shadow-focus:0 0 0 var(--re-focus-ring-offset) var(--re-color-bg), 0 0 0 calc(var(--re-focus-ring-offset) + var(--re-focus-ring-width)) var(--re-color-focus-ring);--re-shadow-sm:0 1px 2px #0000000f;--re-shadow-md:0 4px 12px #00000014;--re-shadow-lg:0 12px 32px #0000001f;--re-duration-instant:0s;--re-duration-fast:.12s;--re-duration-normal:.2s;--re-duration-slow:.32s;--re-easing-standard:cubic-bezier(.2, 0, 0, 1);--re-easing-emphasized:cubic-bezier(.3, 0, 0, 1);--re-z-base:0;--re-z-overlay:100;--re-z-popover:200;--re-z-dialog:300;--re-z-toast:400;--re-control-height-sm:1.75rem;--re-control-height-md:2.25rem;--re-control-height-lg:2.75rem;--re-control-padding-x:var(--re-space-3);--re-control-padding-y:var(--re-space-2)}@media (prefers-color-scheme:dark){:root{--re-color-bg:var(--re-color-neutral-950);--re-color-bg-subtle:var(--re-color-neutral-900);--re-color-bg-muted:var(--re-color-neutral-800);--re-color-surface:var(--re-color-neutral-900);--re-color-text:var(--re-color-neutral-50);--re-color-text-muted:var(--re-color-neutral-300);--re-color-text-subtle:var(--re-color-neutral-400);--re-color-text-on-accent:var(--re-color-neutral-0);--re-color-text-danger:var(--re-color-danger-500);--re-color-border:var(--re-color-neutral-700);--re-color-border-strong:var(--re-color-neutral-600);--re-color-link:var(--re-color-accent-300);--re-color-link-hover:var(--re-color-accent-200);--re-color-link-visited:var(--re-color-accent-200);--re-color-focus-ring:var(--re-color-accent-400);--re-color-selection-bg:var(--re-color-accent-900);--re-color-selection-text:var(--re-color-neutral-50);--re-color-info-surface:color-mix(in oklab, var(--re-color-accent-500) 20%, var(--re-color-bg));--re-color-info-border:var(--re-color-accent-400);--re-color-info-text:var(--re-color-accent-200);--re-color-success-surface:color-mix(in oklab, var(--re-color-success-500) 20%, var(--re-color-bg));--re-color-success-border:var(--re-color-success-500);--re-color-success-text:var(--re-color-success-500);--re-color-warning-surface:color-mix(in oklab, var(--re-color-warning-500) 20%, var(--re-color-bg));--re-color-warning-border:var(--re-color-warning-500);--re-color-warning-text:var(--re-color-warning-500);--re-color-danger-surface:color-mix(in oklab, var(--re-color-danger-500) 20%, var(--re-color-bg));--re-color-danger-border:var(--re-color-danger-500);--re-color-danger-text:var(--re-color-danger-500);--re-focus-ring-offset:0px;--re-shadow-focus:0 0 0 2px var(--re-color-focus-ring)}}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@relements/core",
3
- "version": "0.1.3",
3
+ "version": "0.3.0",
4
4
  "description": "HTML-first design system core: tokens, styles, and progressive enhancement.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -52,6 +52,14 @@
52
52
  "./components/menu.css": "./dist/components/menu.css",
53
53
  "./components/popover.css": "./dist/components/popover.css",
54
54
  "./components/toast.css": "./dist/components/toast.css",
55
+ "./components/accordion.css": "./dist/components/accordion.css",
56
+ "./components/alert.css": "./dist/components/alert.css",
57
+ "./components/avatar.css": "./dist/components/avatar.css",
58
+ "./components/badge.css": "./dist/components/badge.css",
59
+ "./components/breadcrumb.css": "./dist/components/breadcrumb.css",
60
+ "./components/card.css": "./dist/components/card.css",
61
+ "./components/switch.css": "./dist/components/switch.css",
62
+ "./components/tag.css": "./dist/components/tag.css",
55
63
  "./themes/renascent.css": "./dist/themes/renascent.css",
56
64
  "./behaviors/dismissible": {
57
65
  "import": "./dist/behaviors/dismissible.js",
package/src/components/accordion.css ADDED
@@ -0,0 +1,38 @@
1
+ /**
2
+ * Relements accordion.
3
+ *
4
+ * A group of <details> disclosures. Give every <details> the same `name`
5
+ * attribute and the browser keeps a single panel open at a time — natively,
6
+ * with no JavaScript.
7
+ *
8
+ * <div class="re-accordion">
9
+ * <details class="re-disclosure" name="faq" open>
10
+ * <summary class="re-disclosure__summary">First</summary>
11
+ * <div class="re-disclosure__body">…</div>
12
+ * </details>
13
+ * <details class="re-disclosure" name="faq">…</details>
14
+ * </div>
15
+ *
16
+ * Progressive enhancement: browsers without exclusive `<details name>`
17
+ * support simply allow multiple panels open — still fully functional.
18
+ * Reuses the disclosure component for each item's summary / chevron / body.
19
+ */
20
+
21
+ @layer re.components {
22
+ .re-accordion {
23
+ display: flex;
24
+ flex-direction: column;
25
+ border: var(--re-border-default);
26
+ border-radius: var(--re-radius-md);
27
+ overflow: hidden; /* clip joined items to the rounded corners */
28
+ }
29
+
30
+ /* Items sit flush; the group owns the outer border + radius. */
31
+ .re-accordion > .re-disclosure {
32
+ border-width: 0;
33
+ border-radius: 0;
34
+ }
35
+ .re-accordion > .re-disclosure + .re-disclosure {
36
+ border-block-start: var(--re-border-default);
37
+ }
38
+ }
package/src/components/alert.css ADDED
@@ -0,0 +1,89 @@
1
+ /**
2
+ * Relements alert / callout.
3
+ *
4
+ * A status message block. Add role="status" (polite) or role="alert"
5
+ * (assertive) on the host element for screen-reader semantics.
6
+ *
7
+ * <div class="re-alert" data-variant="success" role="status">
8
+ * <div class="re-alert__content">
9
+ * <p class="re-alert__title">Saved</p>
10
+ * Your changes are live.
11
+ * </div>
12
+ * </div>
13
+ *
14
+ * Dismissible: mark the host [data-re-dismissible], add a [data-re-dismiss]
15
+ * button, and call enhanceDismissible().
16
+ *
17
+ * Variants (data-variant): info (default), success, warning, danger.
18
+ */
19
+
20
+ @layer re.components {
21
+ .re-alert {
22
+ display: flex;
23
+ align-items: flex-start;
24
+ gap: var(--re-space-3);
25
+ padding: var(--re-space-3) var(--re-space-4);
26
+ border: var(--re-border-width) solid var(--re-color-info-border);
27
+ border-radius: var(--re-radius-md);
28
+ background-color: var(--re-color-info-surface);
29
+ color: var(--re-color-text);
30
+ line-height: var(--re-line-height-normal);
31
+ }
32
+
33
+ .re-alert__content {
34
+ flex: 1 1 auto;
35
+ min-inline-size: 0;
36
+ }
37
+
38
+ .re-alert__title {
39
+ margin: 0 0 var(--re-space-1);
40
+ font-weight: var(--re-font-weight-semibold);
41
+ color: var(--re-color-info-text);
42
+ }
43
+
44
+ .re-alert__dismiss {
45
+ appearance: none;
46
+ flex-shrink: 0;
47
+ background: transparent;
48
+ border: 0;
49
+ cursor: pointer;
50
+ padding: var(--re-space-1) var(--re-space-2);
51
+ border-radius: var(--re-radius-sm);
52
+ font-size: var(--re-size-text-lg);
53
+ line-height: 1;
54
+ color: var(--re-color-text-muted);
55
+ }
56
+ .re-alert__dismiss:hover {
57
+ color: var(--re-color-text);
58
+ background: color-mix(in oklab, var(--re-color-text) 10%, transparent);
59
+ }
60
+ .re-alert__dismiss:focus-visible {
61
+ outline: none;
62
+ box-shadow: var(--re-shadow-focus);
63
+ }
64
+
65
+ /* ---- Variants -------------------------------------------------------- */
66
+ .re-alert[data-variant="success"] {
67
+ border-color: var(--re-color-success-border);
68
+ background-color: var(--re-color-success-surface);
69
+ }
70
+ .re-alert[data-variant="success"] .re-alert__title {
71
+ color: var(--re-color-success-text);
72
+ }
73
+
74
+ .re-alert[data-variant="warning"] {
75
+ border-color: var(--re-color-warning-border);
76
+ background-color: var(--re-color-warning-surface);
77
+ }
78
+ .re-alert[data-variant="warning"] .re-alert__title {
79
+ color: var(--re-color-warning-text);
80
+ }
81
+
82
+ .re-alert[data-variant="danger"] {
83
+ border-color: var(--re-color-danger-border);
84
+ background-color: var(--re-color-danger-surface);
85
+ }
86
+ .re-alert[data-variant="danger"] .re-alert__title {
87
+ color: var(--re-color-danger-text);
88
+ }
89
+ }
package/src/components/avatar.css ADDED
@@ -0,0 +1,48 @@
1
+ /**
2
+ * Relements avatar.
3
+ *
4
+ * Circular user image, or a text-initials fallback.
5
+ *
6
+ * <span class="re-avatar"><img src="…" alt="Ada Lovelace" /></span>
7
+ * <span class="re-avatar" data-size="lg" role="img" aria-label="Ada Lovelace">AL</span>
8
+ *
9
+ * Sizes (data-size): sm, md (default), lg.
10
+ */
11
+
12
+ @layer re.components {
13
+ .re-avatar {
14
+ display: inline-flex;
15
+ align-items: center;
16
+ justify-content: center;
17
+ flex-shrink: 0;
18
+ inline-size: var(--re-control-height-md);
19
+ block-size: var(--re-control-height-md);
20
+ border-radius: var(--re-radius-pill);
21
+ overflow: hidden;
22
+ background-color: var(--re-color-bg-muted);
23
+ color: var(--re-color-text-muted);
24
+ font-size: var(--re-size-text-sm);
25
+ font-weight: var(--re-font-weight-medium);
26
+ line-height: 1;
27
+ text-transform: uppercase;
28
+ user-select: none;
29
+ }
30
+
31
+ .re-avatar > img {
32
+ inline-size: 100%;
33
+ block-size: 100%;
34
+ object-fit: cover;
35
+ }
36
+
37
+ /* ---- Sizes ----------------------------------------------------------- */
38
+ .re-avatar[data-size="sm"] {
39
+ inline-size: var(--re-control-height-sm);
40
+ block-size: var(--re-control-height-sm);
41
+ font-size: var(--re-size-text-xs);
42
+ }
43
+ .re-avatar[data-size="lg"] {
44
+ inline-size: var(--re-control-height-lg);
45
+ block-size: var(--re-control-height-lg);
46
+ font-size: var(--re-size-text-md);
47
+ }
48
+ }
package/src/components/badge.css ADDED
@@ -0,0 +1,44 @@
1
+ /**
2
+ * Relements badge.
3
+ *
4
+ * Small inline label for counts and statuses. Soft tinted per status.
5
+ *
6
+ * <span class="re-badge">New</span>
7
+ * <span class="re-badge" data-variant="success">Active</span>
8
+ *
9
+ * Variants (data-variant): neutral (default), info, success, warning, danger.
10
+ */
11
+
12
+ @layer re.components {
13
+ .re-badge {
14
+ display: inline-flex;
15
+ align-items: center;
16
+ gap: var(--re-space-1);
17
+ padding-inline: var(--re-space-2);
18
+ padding-block: calc(var(--re-space-1) / 2);
19
+ font-size: var(--re-size-text-xs);
20
+ font-weight: var(--re-font-weight-medium);
21
+ line-height: 1.4;
22
+ white-space: nowrap;
23
+ border-radius: var(--re-radius-pill);
24
+ background-color: var(--re-color-bg-muted);
25
+ color: var(--re-color-text-muted);
26
+ }
27
+
28
+ .re-badge[data-variant="info"] {
29
+ background-color: var(--re-color-info-surface);
30
+ color: var(--re-color-info-text);
31
+ }
32
+ .re-badge[data-variant="success"] {
33
+ background-color: var(--re-color-success-surface);
34
+ color: var(--re-color-success-text);
35
+ }
36
+ .re-badge[data-variant="warning"] {
37
+ background-color: var(--re-color-warning-surface);
38
+ color: var(--re-color-warning-text);
39
+ }
40
+ .re-badge[data-variant="danger"] {
41
+ background-color: var(--re-color-danger-surface);
42
+ color: var(--re-color-danger-text);
43
+ }
44
+ }
package/src/components/breadcrumb.css ADDED
@@ -0,0 +1,62 @@
1
+ /**
2
+ * Relements breadcrumb.
3
+ *
4
+ * Navigation trail. Use on a <nav aria-label="Breadcrumb"> wrapping an
5
+ * ordered list; mark the current page with aria-current="page".
6
+ *
7
+ * <nav class="re-breadcrumb" aria-label="Breadcrumb">
8
+ * <ol>
9
+ * <li><a href="/">Home</a></li>
10
+ * <li><a href="/docs">Docs</a></li>
11
+ * <li><a aria-current="page">Breadcrumb</a></li>
12
+ * </ol>
13
+ * </nav>
14
+ */
15
+
16
+ @layer re.components {
17
+ .re-breadcrumb > ol {
18
+ display: flex;
19
+ flex-wrap: wrap;
20
+ align-items: center;
21
+ gap: var(--re-space-2);
22
+ margin: 0;
23
+ padding: 0;
24
+ list-style: none;
25
+ font-size: var(--re-size-text-sm);
26
+ color: var(--re-color-text-muted);
27
+ }
28
+
29
+ .re-breadcrumb li {
30
+ display: inline-flex;
31
+ align-items: center;
32
+ gap: var(--re-space-2);
33
+ }
34
+
35
+ /* Separator before every item except the first (decorative). */
36
+ .re-breadcrumb li + li::before {
37
+ content: "/";
38
+ color: var(--re-color-text-subtle);
39
+ user-select: none;
40
+ }
41
+
42
+ .re-breadcrumb a {
43
+ color: var(--re-color-link);
44
+ text-decoration: none;
45
+ border-radius: var(--re-radius-sm);
46
+ }
47
+ .re-breadcrumb a:hover {
48
+ text-decoration: underline;
49
+ }
50
+ .re-breadcrumb a:focus-visible {
51
+ outline: none;
52
+ box-shadow: var(--re-shadow-focus);
53
+ }
54
+
55
+ /* Current page: styled as plain, emphasised text. */
56
+ .re-breadcrumb [aria-current="page"] {
57
+ color: var(--re-color-text);
58
+ font-weight: var(--re-font-weight-medium);
59
+ pointer-events: none;
60
+ text-decoration: none;
61
+ }
62
+ }
package/src/components/card.css ADDED
@@ -0,0 +1,65 @@
1
+ /**
2
+ * Relements card.
3
+ *
4
+ * A surface container with optional header / body / footer regions.
5
+ *
6
+ * <article class="re-card">
7
+ * <header class="re-card__header">Title</header>
8
+ * <div class="re-card__body">…</div>
9
+ * <footer class="re-card__footer">…</footer>
10
+ * </article>
11
+ *
12
+ * Modifiers:
13
+ * [data-interactive] — hover elevation + focus ring for clickable cards.
14
+ */
15
+
16
+ @layer re.components {
17
+ .re-card {
18
+ display: flex;
19
+ flex-direction: column;
20
+ background-color: var(--re-color-surface);
21
+ border: var(--re-border-default);
22
+ border-radius: var(--re-radius-lg);
23
+ box-shadow: var(--re-shadow-sm);
24
+ overflow: hidden; /* clip children to the rounded corners */
25
+ color: var(--re-color-text);
26
+ }
27
+
28
+ /* Card-as-link: shed the default anchor underline (color already inherits). */
29
+ a.re-card {
30
+ text-decoration: none;
31
+ }
32
+
33
+ .re-card__header {
34
+ padding: var(--re-space-4);
35
+ font-weight: var(--re-font-weight-semibold);
36
+ border-block-end: var(--re-border-default);
37
+ }
38
+
39
+ .re-card__body {
40
+ padding: var(--re-space-4);
41
+ line-height: var(--re-line-height-normal);
42
+ }
43
+
44
+ .re-card__footer {
45
+ padding: var(--re-space-3) var(--re-space-4);
46
+ border-block-start: var(--re-border-default);
47
+ background-color: var(--re-color-bg-subtle);
48
+ }
49
+
50
+ /* ---- Interactive ----------------------------------------------------- */
51
+ .re-card[data-interactive] {
52
+ cursor: pointer;
53
+ transition:
54
+ box-shadow var(--re-duration-fast) var(--re-easing-standard),
55
+ border-color var(--re-duration-fast) var(--re-easing-standard);
56
+ }
57
+ .re-card[data-interactive]:hover {
58
+ box-shadow: var(--re-shadow-md);
59
+ border-color: var(--re-color-border-strong);
60
+ }
61
+ .re-card[data-interactive]:focus-within {
62
+ outline: none;
63
+ box-shadow: var(--re-shadow-focus);
64
+ }
65
+ }
package/src/components/switch.css ADDED
@@ -0,0 +1,66 @@
1
+ /**
2
+ * Relements switch.
3
+ *
4
+ * A styled on/off toggle built on a native checkbox. Add role="switch" so
5
+ * assistive tech announces it as a switch; label it like any checkbox.
6
+ *
7
+ * <label>
8
+ * <input type="checkbox" role="switch" class="re-switch" />
9
+ * Email notifications
10
+ * </label>
11
+ *
12
+ * States: :checked, :focus-visible, :disabled.
13
+ */
14
+
15
+ @layer re.components {
16
+ .re-switch {
17
+ appearance: none;
18
+ -webkit-appearance: none;
19
+ position: relative;
20
+ box-sizing: border-box;
21
+ flex-shrink: 0;
22
+ inline-size: 2.25rem; /* 36 */
23
+ block-size: 1.25rem; /* 20 */
24
+ margin: 0;
25
+ border: var(--re-border-width) solid var(--re-color-border-strong);
26
+ border-radius: var(--re-radius-pill);
27
+ background-color: var(--re-color-bg-muted);
28
+ cursor: pointer;
29
+ vertical-align: middle;
30
+ transition:
31
+ background-color var(--re-duration-fast) var(--re-easing-standard),
32
+ border-color var(--re-duration-fast) var(--re-easing-standard);
33
+ }
34
+
35
+ /* Thumb — absolutely positioned so travel is symmetric. */
36
+ .re-switch::before {
37
+ content: "";
38
+ position: absolute;
39
+ inset-block-start: 2px;
40
+ inset-inline-start: 2px;
41
+ inline-size: 0.875rem; /* 14 */
42
+ block-size: 0.875rem;
43
+ border-radius: var(--re-radius-pill);
44
+ background-color: var(--re-color-surface);
45
+ box-shadow: var(--re-shadow-sm);
46
+ transition: transform var(--re-duration-fast) var(--re-easing-standard);
47
+ }
48
+
49
+ .re-switch:checked {
50
+ background-color: var(--re-color-accent-600);
51
+ border-color: var(--re-color-accent-600);
52
+ }
53
+ .re-switch:checked::before {
54
+ transform: translateX(1rem); /* 16 */
55
+ }
56
+
57
+ .re-switch:focus-visible {
58
+ outline: none;
59
+ box-shadow: var(--re-shadow-focus);
60
+ }
61
+
62
+ .re-switch:disabled {
63
+ cursor: not-allowed;
64
+ opacity: 0.55;
65
+ }
66
+ }
package/src/components/tag.css ADDED
@@ -0,0 +1,80 @@
1
+ /**
2
+ * Relements tag / chip.
3
+ *
4
+ * Compact label, optionally removable. For removable tags, mark the tag
5
+ * [data-re-dismissible], add a [data-re-dismiss] button, and call
6
+ * enhanceDismissible().
7
+ *
8
+ * <span class="re-tag">Design</span>
9
+ * <span class="re-tag" data-re-dismissible>
10
+ * Filter
11
+ * <button class="re-tag__remove" type="button" data-re-dismiss
12
+ * aria-label="Remove Filter">×</button>
13
+ * </span>
14
+ *
15
+ * Variants (data-variant): neutral (default), info, success, warning, danger.
16
+ */
17
+
18
+ @layer re.components {
19
+ .re-tag {
20
+ display: inline-flex;
21
+ align-items: center;
22
+ gap: var(--re-space-1);
23
+ padding-inline: var(--re-space-2);
24
+ padding-block: calc(var(--re-space-1) / 2);
25
+ font-size: var(--re-size-text-xs);
26
+ line-height: 1.4;
27
+ white-space: nowrap;
28
+ border: var(--re-border-width) solid var(--re-color-border);
29
+ border-radius: var(--re-radius-pill);
30
+ background-color: var(--re-color-bg-subtle);
31
+ color: var(--re-color-text);
32
+ }
33
+
34
+ .re-tag__remove {
35
+ appearance: none;
36
+ display: inline-flex;
37
+ align-items: center;
38
+ justify-content: center;
39
+ inline-size: 1rem;
40
+ block-size: 1rem;
41
+ padding: 0;
42
+ border: 0;
43
+ border-radius: var(--re-radius-pill);
44
+ background: transparent;
45
+ color: var(--re-color-text-muted);
46
+ font-size: var(--re-size-text-sm);
47
+ line-height: 1;
48
+ cursor: pointer;
49
+ }
50
+ .re-tag__remove:hover {
51
+ color: var(--re-color-text);
52
+ background: color-mix(in oklab, var(--re-color-text) 12%, transparent);
53
+ }
54
+ .re-tag__remove:focus-visible {
55
+ outline: none;
56
+ box-shadow: var(--re-shadow-focus);
57
+ }
58
+
59
+ /* ---- Variants -------------------------------------------------------- */
60
+ .re-tag[data-variant="info"] {
61
+ border-color: var(--re-color-info-border);
62
+ background-color: var(--re-color-info-surface);
63
+ color: var(--re-color-info-text);
64
+ }
65
+ .re-tag[data-variant="success"] {
66
+ border-color: var(--re-color-success-border);
67
+ background-color: var(--re-color-success-surface);
68
+ color: var(--re-color-success-text);
69
+ }
70
+ .re-tag[data-variant="warning"] {
71
+ border-color: var(--re-color-warning-border);
72
+ background-color: var(--re-color-warning-surface);
73
+ color: var(--re-color-warning-text);
74
+ }
75
+ .re-tag[data-variant="danger"] {
76
+ border-color: var(--re-color-danger-border);
77
+ background-color: var(--re-color-danger-surface);
78
+ color: var(--re-color-danger-text);
79
+ }
80
+ }
package/src/index.css CHANGED
@@ -28,3 +28,11 @@
28
28
  @import "./components/menu.css";
29
29
  @import "./components/popover.css";
30
30
  @import "./components/toast.css";
31
+ @import "./components/accordion.css";
32
+ @import "./components/alert.css";
33
+ @import "./components/avatar.css";
34
+ @import "./components/badge.css";
35
+ @import "./components/breadcrumb.css";
36
+ @import "./components/card.css";
37
+ @import "./components/switch.css";
38
+ @import "./components/tag.css";
package/src/themes/renascent.css CHANGED
@@ -54,7 +54,9 @@
54
54
  --re-color-link-hover: #60a5fa;
55
55
  --re-color-link-visited: #a78bfa;
56
56
  --re-color-focus-ring: #3c83f6;
57
- --re-color-text-on-accent: #0f131a;
57
+ /* White on accent-600 (#2563eb) = 5.17:1; the dark navy used elsewhere
58
+ only reaches 3.6:1 on the blue/red button fills, below WCAG AA. */
59
+ --re-color-text-on-accent: #ffffff;
58
60
 
59
61
  /* ----- Semantic feedback ---------------------------------- */
60
62
  /* Success: teal (hsl(172 81% 55%) — their --success) */
@@ -72,6 +74,25 @@
72
74
  --re-color-danger-600: #dc2626;
73
75
  --re-color-danger-700: #b91c1c;
74
76
 
77
+ /* ----- Status surfaces (dark) -----------------------------
78
+ Defined explicitly so they mix against this theme's dark bg.
79
+ Without these they inherit the un-themed :root tokens, whose
80
+ color-mix captured the light-mode bg → light alert surfaces
81
+ under dark-section body text (≈1.05:1). White body text on
82
+ these 20%/dark mixes clears AA (≥4.5:1). */
83
+ --re-color-info-surface: color-mix(in oklab, #3c83f6 20%, var(--re-color-bg));
84
+ --re-color-info-border: #60a5fa;
85
+ --re-color-info-text: #93c3fd;
86
+ --re-color-success-surface: color-mix(in oklab, #2fe9d0 20%, var(--re-color-bg));
87
+ --re-color-success-border: #2fe9d0;
88
+ --re-color-success-text: #2fe9d0;
89
+ --re-color-warning-surface: color-mix(in oklab, #f9cf53 20%, var(--re-color-bg));
90
+ --re-color-warning-border: #f9cf53;
91
+ --re-color-warning-text: #f9cf53;
92
+ --re-color-danger-surface: color-mix(in oklab, #ef4444 20%, var(--re-color-bg));
93
+ --re-color-danger-border: #ef4444;
94
+ --re-color-danger-text: #f87171;
95
+
75
96
  /* ----- Focus ring on dark background ----------------------
76
97
  Remove the offset gap: the "white gap" trick is for light
77
98
  themes. On dark bg, offset + border = double blue line. */
@@ -111,7 +132,8 @@
111
132
  /* ============================================================
112
133
  Scoped class — apply on any container instead of :root
113
134
  ============================================================ */
114
- .theme-renascent {
135
+ .theme-renascent,
136
+ .theme-renascent-dark {
115
137
  color-scheme: dark;
116
138
 
117
139
  --re-color-bg: #0f131a;
@@ -129,7 +151,7 @@
129
151
  --re-color-link: #3c83f6;
130
152
  --re-color-link-hover: #60a5fa;
131
153
  --re-color-focus-ring: #3c83f6;
132
- --re-color-text-on-accent: #0f131a;
154
+ --re-color-text-on-accent: #ffffff;
133
155
  --re-color-text-danger: #f87171;
134
156
  --re-color-border-danger: #ef4444;
135
157
  --re-color-success-500: #2fe9d0;
@@ -141,6 +163,18 @@
141
163
  --re-color-danger-500: #ef4444;
142
164
  --re-color-danger-600: #dc2626;
143
165
  --re-color-danger-700: #b91c1c;
166
+ --re-color-info-surface: color-mix(in oklab, #3c83f6 20%, var(--re-color-bg));
167
+ --re-color-info-border: #60a5fa;
168
+ --re-color-info-text: #93c3fd;
169
+ --re-color-success-surface: color-mix(in oklab, #2fe9d0 20%, var(--re-color-bg));
170
+ --re-color-success-border: #2fe9d0;
171
+ --re-color-success-text: #2fe9d0;
172
+ --re-color-warning-surface: color-mix(in oklab, #f9cf53 20%, var(--re-color-bg));
173
+ --re-color-warning-border: #f9cf53;
174
+ --re-color-warning-text: #f9cf53;
175
+ --re-color-danger-surface: color-mix(in oklab, #ef4444 20%, var(--re-color-bg));
176
+ --re-color-danger-border: #ef4444;
177
+ --re-color-danger-text: #f87171;
144
178
  --re-focus-ring-offset: 0px;
145
179
  --re-shadow-focus: 0 0 0 2px var(--re-color-focus-ring);
146
180
  --re-color-selection-bg: rgba(60, 131, 246, 0.3);
@@ -150,6 +184,125 @@
150
184
  color: var(--re-color-text);
151
185
  }
152
186
 
187
+ /* LIGHT — when the OS prefers light (global import + the auto .theme-renascent). */
188
+ @media (prefers-color-scheme: light) {
189
+ :root,
190
+ .theme-renascent {
191
+ color-scheme: light;
192
+ --re-color-bg: #f6f8fc;
193
+ --re-color-bg-subtle: #eef2f8;
194
+ --re-color-bg-muted: #e3e9f2;
195
+ --re-color-surface: #ffffff;
196
+ --re-color-text: #0f131a;
197
+ --re-color-text-muted: #475569;
198
+ --re-color-text-subtle: #64748b;
199
+ --re-color-text-on-accent: #ffffff;
200
+ /* On light bg, white-on-accent buttons need accent-600 = #2563eb
201
+ (white 5.17:1). The global #3c83f6 only reaches 3.64:1. */
202
+ --re-color-accent-600: #2563eb;
203
+ --re-color-accent-700: #1d4ed8;
204
+ --re-color-accent-800: #1e40af;
205
+ --re-color-text-danger: #b91c1c;
206
+ --re-color-border: #d7dfea;
207
+ --re-color-border-strong: #c0cad9;
208
+ --re-color-border-danger: #dc2626;
209
+ --re-color-link: #2563eb;
210
+ --re-color-link-hover: #1d4ed8;
211
+ --re-color-link-visited: #7c3aed;
212
+ --re-color-focus-ring: #3c83f6;
213
+ --re-color-selection-bg: rgba(60, 131, 246, 0.18);
214
+ --re-color-selection-text: #0f131a;
215
+ --re-focus-ring-offset: 2px;
216
+ --re-shadow-focus:
217
+ 0 0 0 var(--re-focus-ring-offset) var(--re-color-bg),
218
+ 0 0 0 calc(var(--re-focus-ring-offset) + var(--re-focus-ring-width))
219
+ var(--re-color-focus-ring);
220
+ --re-color-info-surface: color-mix(in oklab, #3c83f6 12%, var(--re-color-bg));
221
+ --re-color-info-border: #3c83f6;
222
+ --re-color-info-text: #2563eb;
223
+ --re-color-success-surface: color-mix(
224
+ in oklab,
225
+ var(--re-color-success-500) 12%,
226
+ var(--re-color-bg)
227
+ );
228
+ --re-color-success-border: #0fd4bb;
229
+ --re-color-success-text: #0f766e;
230
+ --re-color-warning-surface: color-mix(
231
+ in oklab,
232
+ var(--re-color-warning-500) 12%,
233
+ var(--re-color-bg)
234
+ );
235
+ --re-color-warning-border: #f0b929;
236
+ --re-color-warning-text: #b45309;
237
+ --re-color-danger-surface: color-mix(
238
+ in oklab,
239
+ var(--re-color-danger-500) 12%,
240
+ var(--re-color-bg)
241
+ );
242
+ --re-color-danger-border: #dc2626;
243
+ --re-color-danger-text: #b91c1c;
244
+ }
245
+ }
246
+
247
+ /* LIGHT — forced regardless of OS. */
248
+ .theme-renascent-light {
249
+ color-scheme: light;
250
+ --re-color-bg: #f6f8fc;
251
+ --re-color-bg-subtle: #eef2f8;
252
+ --re-color-bg-muted: #e3e9f2;
253
+ --re-color-surface: #ffffff;
254
+ --re-color-text: #0f131a;
255
+ --re-color-text-muted: #475569;
256
+ --re-color-text-subtle: #64748b;
257
+ --re-color-text-on-accent: #ffffff;
258
+ /* On light bg, white-on-accent buttons need accent-600 = #2563eb
259
+ (white 5.17:1). The global #3c83f6 only reaches 3.64:1. */
260
+ --re-color-accent-600: #2563eb;
261
+ --re-color-accent-700: #1d4ed8;
262
+ --re-color-accent-800: #1e40af;
263
+ --re-color-text-danger: #b91c1c;
264
+ --re-color-border: #d7dfea;
265
+ --re-color-border-strong: #c0cad9;
266
+ --re-color-border-danger: #dc2626;
267
+ --re-color-link: #2563eb;
268
+ --re-color-link-hover: #1d4ed8;
269
+ --re-color-link-visited: #7c3aed;
270
+ --re-color-focus-ring: #3c83f6;
271
+ --re-color-selection-bg: rgba(60, 131, 246, 0.18);
272
+ --re-color-selection-text: #0f131a;
273
+ --re-focus-ring-offset: 2px;
274
+ --re-shadow-focus:
275
+ 0 0 0 var(--re-focus-ring-offset) var(--re-color-bg),
276
+ 0 0 0 calc(var(--re-focus-ring-offset) + var(--re-focus-ring-width)) var(--re-color-focus-ring);
277
+ --re-color-info-surface: color-mix(in oklab, #3c83f6 12%, var(--re-color-bg));
278
+ --re-color-info-border: #3c83f6;
279
+ --re-color-info-text: #2563eb;
280
+ --re-color-success-surface: color-mix(
281
+ in oklab,
282
+ var(--re-color-success-500) 12%,
283
+ var(--re-color-bg)
284
+ );
285
+ --re-color-success-border: #0fd4bb;
286
+ --re-color-success-text: #0f766e;
287
+ --re-color-warning-surface: color-mix(
288
+ in oklab,
289
+ var(--re-color-warning-500) 12%,
290
+ var(--re-color-bg)
291
+ );
292
+ --re-color-warning-border: #f0b929;
293
+ --re-color-warning-text: #b45309;
294
+ --re-color-danger-surface: color-mix(
295
+ in oklab,
296
+ var(--re-color-danger-500) 12%,
297
+ var(--re-color-bg)
298
+ );
299
+ --re-color-danger-border: #dc2626;
300
+ --re-color-danger-text: #b91c1c;
301
+
302
+ background-color: var(--re-color-bg);
303
+ color: var(--re-color-text);
304
+ }
305
+
153
306
  /* ============================================================
154
307
  Gradient button variants
155
308
  Use data-variant="phoenix" or data-variant="brand" on .re-button.
@@ -157,12 +310,14 @@
157
310
  ============================================================ */
158
311
  .re-button[data-variant="phoenix"] {
159
312
  background: var(--re-gradient-phoenix);
313
+ /* Paint the gradient from the border box so the 1px (transparent) border
314
+ doesn't show a seam where the padding-box gradient is clipped. */
315
+ background-origin: border-box;
160
316
  color: #fff;
161
317
  border-color: transparent;
162
318
  }
163
319
  .re-button[data-variant="phoenix"]:hover {
164
320
  filter: brightness(1.12);
165
- background: var(--re-gradient-phoenix);
166
321
  }
167
322
  .re-button[data-variant="phoenix"]:active {
168
323
  filter: brightness(0.9);
@@ -178,12 +333,12 @@
178
333
 
179
334
  .re-button[data-variant="brand"] {
180
335
  background: var(--re-gradient-brand);
336
+ background-origin: border-box;
181
337
  color: #fff;
182
338
  border-color: transparent;
183
339
  }
184
340
  .re-button[data-variant="brand"]:hover {
185
341
  filter: brightness(1.12);
186
- background: var(--re-gradient-brand);
187
342
  }
188
343
  .re-button[data-variant="brand"]:active {
189
344
  filter: brightness(0.9);
package/src/tokens.css CHANGED
@@ -75,6 +75,39 @@
75
75
  --re-color-selection-bg: var(--re-color-accent-100);
76
76
  --re-color-selection-text: var(--re-color-neutral-900);
77
77
 
78
+ /* ----- Color: status surfaces -------------------------------------- */
79
+ /* Soft tinted background + border + readable text per status, for
80
+ alerts, badges, and tags. `info` maps to the accent (brand) scale.
81
+ Surfaces are derived from the 500 step so subtree theming follows. */
82
+ --re-color-info-surface: color-mix(
83
+ in oklab,
84
+ var(--re-color-accent-500) 12%,
85
+ var(--re-color-bg)
86
+ );
87
+ --re-color-info-border: var(--re-color-accent-500);
88
+ --re-color-info-text: var(--re-color-accent-700);
89
+ --re-color-success-surface: color-mix(
90
+ in oklab,
91
+ var(--re-color-success-500) 12%,
92
+ var(--re-color-bg)
93
+ );
94
+ --re-color-success-border: var(--re-color-success-500);
95
+ --re-color-success-text: var(--re-color-success-700);
96
+ --re-color-warning-surface: color-mix(
97
+ in oklab,
98
+ var(--re-color-warning-500) 12%,
99
+ var(--re-color-bg)
100
+ );
101
+ --re-color-warning-border: var(--re-color-warning-500);
102
+ --re-color-warning-text: var(--re-color-warning-700);
103
+ --re-color-danger-surface: color-mix(
104
+ in oklab,
105
+ var(--re-color-danger-500) 12%,
106
+ var(--re-color-bg)
107
+ );
108
+ --re-color-danger-border: var(--re-color-danger-500);
109
+ --re-color-danger-text: var(--re-color-danger-700);
110
+
78
111
  /* ----- Typography -------------------------------------------------- */
79
112
  --re-font-sans:
80
113
  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
@@ -187,6 +220,37 @@
187
220
  --re-color-selection-bg: var(--re-color-accent-900);
188
221
  --re-color-selection-text: var(--re-color-neutral-50);
189
222
 
223
+ /* Status surfaces: mix harder toward the near-black bg so the tint
224
+ reads, and lift border/text to brighter steps for contrast. */
225
+ --re-color-info-surface: color-mix(
226
+ in oklab,
227
+ var(--re-color-accent-500) 20%,
228
+ var(--re-color-bg)
229
+ );
230
+ --re-color-info-border: var(--re-color-accent-400);
231
+ --re-color-info-text: var(--re-color-accent-200);
232
+ --re-color-success-surface: color-mix(
233
+ in oklab,
234
+ var(--re-color-success-500) 20%,
235
+ var(--re-color-bg)
236
+ );
237
+ --re-color-success-border: var(--re-color-success-500);
238
+ --re-color-success-text: var(--re-color-success-500);
239
+ --re-color-warning-surface: color-mix(
240
+ in oklab,
241
+ var(--re-color-warning-500) 20%,
242
+ var(--re-color-bg)
243
+ );
244
+ --re-color-warning-border: var(--re-color-warning-500);
245
+ --re-color-warning-text: var(--re-color-warning-500);
246
+ --re-color-danger-surface: color-mix(
247
+ in oklab,
248
+ var(--re-color-danger-500) 20%,
249
+ var(--re-color-bg)
250
+ );
251
+ --re-color-danger-border: var(--re-color-danger-500);
252
+ --re-color-danger-text: var(--re-color-danger-500);
253
+
190
254
  /* On dark backgrounds the offset gap is invisible, so the border and
191
255
  the outer ring appear as two separate blue lines. Remove the gap. */
192
256
  --re-focus-ring-offset: 0px;