eidotter 0.3.4 → 0.3.5

package/dist/components/Icon/components/index.d.ts

@@ -1 +1,2 @@
 export { Icon } from './Icon';
+export type { IconProps } from './Icon';

package/dist/components/Stat/components/Stat.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import './Stat.css';
+export interface StatProps {
+    /**
+     * The label describing the metric
+     */
+    label: string;
+    /**
+     * The metric value to display
+     */
+    value: string | number;
+    /**
+     * Optional trend direction
+     */
+    trend?: 'up' | 'down' | 'neutral';
+    /**
+     * Optional trend value (e.g., "+5%", "-12")
+     */
+    trendValue?: string;
+    /**
+     * Size variant
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Optional CSS class name
+     */
+    className?: string;
+}
+/**
+ * DOS-styled Stat component for displaying metrics with optional trends
+ *
+ * Features:
+ * - Label and value display
+ * - Optional trend indicator (up/down/neutral)
+ * - Three sizes (small, medium, large)
+ * - DOS-authentic styling with CGA colors
+ * - WCAG 2.1 AA compliant
+ */
+export declare const Stat: React.FC<StatProps>;

package/dist/components/Stat/components/index.d.ts

@@ -0,0 +1,2 @@
+export { Stat } from './Stat';
+export type { StatProps } from './Stat';

package/dist/components/Stat/index.d.ts

@@ -0,0 +1,2 @@
+export { Stat } from './components';
+export type { StatProps } from './components';

package/dist/eidotter.css

@@ -1 +1 @@
-.alert{width:100%;position:relative;overflow:hidden;text-align:left;font-size:16px;font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);border:none}.alert--info{background-color:var(--color-semantic-alert-info);color:var(--color-cga-amber)}.alert--success{background-color:var(--color-semantic-alert-success);color:var(--color-cga-brightGreen)}.alert--warning{background-color:var(--color-semantic-alert-warning);color:var(--color-cga-amber)}.alert--error{background-color:var(--color-semantic-alert-error);color:var(--color-cga-brightRed)}.alert--l{width:1020px;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:16px;box-sizing:border-box;gap:4px}.alert--s{width:350px;height:40px;overflow:hidden;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:0 8px;box-sizing:border-box;gap:8px}.alert__header{align-self:stretch;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;width:100%}.alert__icon{display:flex;align-items:center;justify-content:center;align-self:flex-start;width:24px;height:24px;flex-shrink:0;margin-top:2px}.alert--s .alert__icon{width:20px;height:20px}.alert--s .alert__icon svg{width:20px!important;height:20px!important}.alert__title{flex:1;position:relative;line-height:140%}.alert__close{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;background:none;border:none;padding:0;cursor:pointer;color:inherit}.alert__close svg{width:20px!important;height:20px!important}.alert--s .alert__content{display:none}.alert__content{align-self:stretch;display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;padding:0 0 0 32px;font-size:14px}.alert__message{flex:1;position:relative;line-height:140%;color:var(--color-cga-amberDim)}.alert__link{background:none;border:none;padding:0;cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;text-decoration:none}.icon{display:inline-block;vertical-align:middle;fill:currentColor;color:var(--color-system-foreground)}.icon--l{width:56px;height:56px}.icon--s{width:24px;height:24px}.icon[role=button]{cursor:pointer}.icon[role=button]:hover{color:var(--color-system-link-hover)}.section{width:100%;border:1px solid var(--color-semantic-border-default);background-color:var(--color-semantic-background-primary);color:var(--color-semantic-text-primary);font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback)}.section__header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:none;border:none;color:inherit;font-family:inherit;cursor:pointer;text-align:left}.section__title{flex:1;font-size:16px;line-height:24px}.section__icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-left:8px;color:inherit}.section__content{padding:16px;border-top:1px solid var(--color-semantic-border-default);font-size:14px;line-height:20px;color:var(--color-semantic-text-secondary)}.section--hover .section__header,.section__header:hover{background-color:var(--color-semantic-background-accent);color:var(--color-semantic-text-secondary)}.section--active .section__header,.section__header:active{background-color:var(--color-semantic-background-secondary);color:var(--color-cga-amber);text-shadow:0 0 8px var(--color-cga-amberGlow)}.section--expanded{border-color:var(--color-semantic-text-secondary)}.section--expanded .section__header{background-color:var(--color-semantic-background-accent);color:var(--color-semantic-text-secondary)}.section__header:focus{outline:none;box-shadow:0 0 0 2px var(--color-semantic-border-focus)}.section__icon{transition:transform .2s ease-in-out}.section--expanded .section__icon{transform:rotate(180deg)}.accordion-fill{width:100%;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:var(--spacing-2);text-align:left;font-size:var(--typography-font-size-base);font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);color:var(--color-semantic-text-secondary)}.accordion-fill>.section{margin-bottom:4px}.accordion-fill>.section:last-child{margin-bottom:0}.button{display:inline-flex;align-items:center;justify-content:center;position:relative;border:none;outline:none;cursor:pointer;text-decoration:none;font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);font-weight:var(--typography-font-weight-regular);line-height:1;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:all .1s ease;box-sizing:border-box;border:2px solid;background-clip:padding-box}.button--primary{background-color:var(--color-semantic-background-accent);color:var(--color-semantic-text-secondary);border-color:var(--color-semantic-border-default)}.button--primary:hover:not(:disabled){background-color:var(--color-semantic-border-focus);border-color:var(--color-semantic-text-secondary);box-shadow:var(--shadow-glow-sm)}.button--primary:active:not(:disabled){background-color:var(--color-semantic-background-accent);border-color:var(--color-semantic-text-disabled)}.button--secondary{background-color:var(--color-semantic-background-secondary);color:var(--color-semantic-text-primary);border-color:var(--color-semantic-border-default)}.button--secondary:hover:not(:disabled){background-color:var(--color-semantic-text-primary);color:var(--color-semantic-background-primary);border-color:var(--color-semantic-text-secondary);box-shadow:var(--shadow-glow-sm)}.button--secondary:active:not(:disabled){background-color:var(--color-semantic-background-secondary);border-color:var(--color-semantic-text-disabled)}.button--ghost{background-color:transparent;color:var(--color-semantic-text-primary);border-color:var(--color-semantic-border-default)}.button--ghost:hover:not(:disabled){background-color:var(--color-semantic-text-primary);color:var(--color-semantic-background-primary);border-color:var(--color-semantic-text-secondary);box-shadow:var(--shadow-glow-sm)}.button--ghost:active:not(:disabled){background-color:var(--color-semantic-background-secondary);color:var(--color-semantic-text-primary)}.button--link{background-color:transparent;color:var(--color-semantic-text-accent);border-color:transparent;text-decoration:underline}.button--link:hover:not(:disabled){color:var(--color-cga-amber-bright);background-color:transparent;border-color:transparent}.button--link:active:not(:disabled){color:var(--color-semantic-text-disabled)}.button--small{font-size:12px;padding:4px 8px;min-height:24px;gap:4px}.button--medium{font-size:14px;padding:8px 16px;min-height:32px;gap:6px}.button--large{font-size:16px;padding:12px 20px;min-height:40px;gap:8px}.button--disabled,.button:disabled{cursor:not-allowed;opacity:.6;background-color:var(--color-semantic-background-secondary)!important;color:var(--color-semantic-text-disabled)!important;border-color:var(--color-semantic-text-disabled)!important}.button--loading{cursor:wait}.button--full-width{width:100%;justify-content:center}.button__loading-indicator{animation:blink 1s infinite;margin-right:4px}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.button__content{display:inline-flex;align-items:center;justify-content:center}.button__content--loading{opacity:.7}.button:focus-visible{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}@media(prefers-contrast:high){.button{border-width:3px}}@media(prefers-reduced-motion:reduce){.button{transition:none}.button__loading-indicator{animation:none}}.card{background-color:var(--color-semantic-background-primary);border:var(--border-width-medium) solid var(--color-semantic-border-default);font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);color:var(--color-semantic-text-primary)}.card--default{border-color:var(--color-semantic-border-default)}.card--elevated{border-color:var(--color-semantic-text-secondary);box-shadow:4px 4px 0 0 var(--color-semantic-text-disabled)}.card--glow{border-color:var(--color-cga-amber);box-shadow:var(--shadow-glow-md)}.card--bordered{border-color:var(--color-semantic-text-accent);border-width:var(--border-width-medium)}.card__header{padding:var(--spacing-2) var(--spacing-3);border-bottom:var(--border-width-thin) solid var(--color-semantic-text-disabled);background-color:var(--color-cga-amber-dim)}.card__title{color:var(--color-semantic-text-secondary);font-size:var(--typography-font-size-base);font-weight:var(--typography-font-weight-bold);text-transform:uppercase}.card__body{padding:var(--spacing-3)}.card__footer{padding:var(--spacing-2) var(--spacing-3);border-top:var(--border-width-thin) solid var(--color-semantic-text-disabled);background-color:var(--color-semantic-background-secondary)}.card:focus-visible{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}@media(prefers-reduced-motion:reduce){.card{transition:none}}.checkbox{display:inline-flex;align-items:center;gap:var(--spacing-2);font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);font-size:var(--typography-font-size-base);color:var(--color-semantic-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox--disabled{cursor:not-allowed;opacity:.6}.checkbox__input{position:absolute;opacity:0;width:0;height:0}.checkbox__box{display:inline-block;white-space:nowrap;text-align:center;color:var(--color-semantic-text-primary)}.checkbox__box:before{content:"[ ]"}.checkbox__input:checked+.checkbox__box:before{content:"[X]";color:var(--color-semantic-text-accent)}.checkbox__input:focus-visible+.checkbox__box{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}.checkbox:hover:not(.checkbox--disabled) .checkbox__box{color:var(--color-semantic-text-secondary)}.checkbox:hover:not(.checkbox--disabled) .checkbox__input:checked+.checkbox__box:before{color:var(--color-semantic-text-secondary)}.checkbox--disabled .checkbox__box{color:var(--color-semantic-text-disabled)}.checkbox--disabled .checkbox__input:checked+.checkbox__box:before{color:var(--color-semantic-text-disabled)}.checkbox__label{color:inherit}@media(prefers-reduced-motion:reduce){.checkbox{transition:none}}.command-prompt{display:flex;align-items:center;font-family:var(--typography-font-family-primary);font-size:var(--typography-font-size-base);background:var(--color-semantic-background-primary);color:var(--color-semantic-text-accent);padding:var(--spacing-2);cursor:text}.command-prompt__prompt{color:var(--color-semantic-text-primary);margin-right:var(--spacing-2);white-space:nowrap;-webkit-user-select:none;user-select:none}.command-prompt__input{flex:1;background:transparent;border:none;color:var(--color-semantic-text-primary);font-family:inherit;font-size:inherit;outline:none;padding:0;margin:0;min-width:0}.command-prompt__input::placeholder{color:var(--color-semantic-text-disabled)}.command-prompt__cursor{color:var(--color-semantic-text-primary);animation:blink 1s step-end infinite;-webkit-user-select:none;user-select:none}.command-prompt--disabled{opacity:.5;cursor:not-allowed}.command-prompt--disabled .command-prompt__cursor{animation:none}.command-prompt__input:focus+.command-prompt__cursor{display:none}.progress{display:inline-flex;align-items:center;gap:var(--spacing-2);font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback)}.progress--small{font-size:var(--typography-font-size-xs)}.progress--medium{font-size:var(--typography-font-size-base)}.progress--large{font-size:var(--typography-font-size-lg)}.progress__bar{display:inline-block;letter-spacing:0;line-height:1}.progress__fill{color:var(--color-semantic-text-primary)}.progress--success .progress__fill{color:var(--color-semantic-status-success)}.progress--warning .progress__fill{color:var(--color-semantic-status-warning)}.progress--error .progress__fill{color:var(--color-semantic-status-error)}.progress__empty{color:var(--color-semantic-text-disabled)}.progress__label{color:var(--color-semantic-text-primary);min-width:4ch;text-align:right}@media(prefers-reduced-motion:reduce){.progress{transition:none}}.input{background:var(--color-semantic-background-primary);color:var(--color-semantic-text-primary);border:var(--border-width-medium) solid var(--color-semantic-border-default);font-family:var(--typography-font-family-primary);font-size:var(--typography-font-size-base);padding:var(--spacing-2);outline:none;width:100%;box-sizing:border-box}.input::placeholder{color:var(--color-semantic-text-disabled)}.input:focus{border-color:var(--color-semantic-border-focus);box-shadow:var(--shadow-glow-sm)}.input--error{border-color:var(--color-semantic-status-error)}.input--error:focus{border-color:var(--color-semantic-status-error)}.input--disabled,.input:disabled{opacity:.5;cursor:not-allowed;background:var(--color-semantic-background-primary)}:root{--terminal-bg: var(--color-semantic-background-primary);--terminal-border: var(--color-semantic-text-disabled);--terminal-border-active: var(--color-semantic-text-secondary);--terminal-title-bg: var(--color-semantic-background-secondary);--terminal-title-text: var(--color-semantic-text-secondary);--terminal-title-bg-inactive: var(--color-semantic-background-secondary);--terminal-title-text-inactive: var(--color-semantic-text-primary);--terminal-text: var(--color-semantic-text-primary);--terminal-control-bg: var(--color-semantic-text-primary);--terminal-control-symbol: var(--color-semantic-background-primary)}.terminal{background-color:var(--terminal-bg);border:2px solid var(--terminal-border);color:var(--terminal-text);font-family:Perfect DOS VGA,monospace;display:flex;flex-direction:column;box-shadow:5px 5px #00000080;min-width:320px;min-height:200px}.terminal:focus,.terminal--active{border-color:var(--terminal-border-active);outline:none}.terminal--active .terminal__title-bar{background-color:var(--color-semantic-background-accent)}.terminal--inactive{border-color:var(--terminal-border)}.terminal--inactive .terminal__title-bar{background-color:var(--terminal-title-bg-inactive);color:var(--terminal-title-text-inactive)}.terminal--small{width:480px;height:320px}.terminal--medium{width:640px;height:480px}.terminal--large{width:800px;height:600px}.terminal--maximized{width:100vw;height:100vh;position:fixed;top:0;left:0;border:none;box-shadow:none;z-index:1000}.terminal__title-bar{background-color:var(--terminal-title-bg);color:var(--terminal-title-text);padding:2px 4px;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;cursor:default;height:24px}.terminal__title{display:flex;align-items:center;gap:4px}.terminal__controls{display:flex}.terminal__control{background-color:var(--terminal-control-bg);border:1px solid var(--terminal-control-symbol);width:20px;height:20px;margin-left:2px;cursor:default;display:flex;align-items:center;justify-content:center;color:var(--terminal-control-symbol)}.terminal__control:active{filter:invert(1)}.terminal__content{flex-grow:1;padding:8px;overflow-y:auto}.terminal__default-content{display:flex;flex-direction:column}.terminal__prompt{display:flex}.terminal__path{margin-right:4px}.terminal__cursor{background-color:var(--terminal-text);width:8px;height:16px;animation:blink 1s step-end infinite}@keyframes blink{50%{opacity:0}}.terminal__resize-handle{position:absolute;bottom:0;right:0;width:16px;height:16px;cursor:nwse-resize}.terminal--minimized{display:none}.terminal__taskbar-item{display:inline-flex;align-items:center;background-color:var(--terminal-control-bg);border:1px solid var(--color-semantic-background-primary);padding:2px 8px;cursor:default;-webkit-user-select:none;user-select:none}.terminal__taskbar-title{margin-left:4px;color:var(--color-semantic-background-primary)}.tabs{display:inline-flex;align-items:center;gap:0;font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);box-sizing:border-box}.tabs__tab{position:relative;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;font-family:inherit;font-weight:var(--typography-font-weight-regular);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;transition:all .15s ease;color:var(--color-semantic-text-primary);opacity:.7}.tabs__tab:hover:not(:disabled){opacity:1}.tabs__tab--active{opacity:1}.tabs__tab--disabled{cursor:not-allowed;opacity:.3}.tabs--underline{gap:4px}.tabs--underline .tabs__tab{padding:8px 16px;border-bottom:2px solid transparent}.tabs--underline .tabs__tab--active{border-bottom-color:var(--color-semantic-text-accent);color:var(--color-semantic-text-accent)}.tabs--underline .tabs__tab:hover:not(:disabled):not(.tabs__tab--active){border-bottom-color:var(--color-semantic-border-default)}.tabs--pills{gap:4px;padding:4px;background-color:var(--color-semantic-background-secondary);border:1px solid var(--color-semantic-border-default);border-radius:2px}.tabs--pills .tabs__tab{padding:6px 12px;border-radius:2px}.tabs--pills .tabs__tab--active{background-color:var(--color-semantic-background-accent);color:var(--color-semantic-text-secondary)}.tabs--pills .tabs__tab:hover:not(:disabled):not(.tabs__tab--active){background-color:var(--color-semantic-background-primary)}.tabs--small .tabs__tab{font-size:10px;padding:4px 8px}.tabs--small.tabs--underline .tabs__tab{padding:4px 10px}.tabs--medium .tabs__tab{font-size:12px}.tabs--large .tabs__tab{font-size:14px;padding:10px 20px}.tabs--large.tabs--underline .tabs__tab{padding:10px 20px}.tabs--large.tabs--pills .tabs__tab{padding:8px 16px}.tabs__tab:focus-visible{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}@media(prefers-contrast:high){.tabs--underline .tabs__tab{border-bottom-width:3px}.tabs--pills{border-width:2px}}@media(prefers-reduced-motion:reduce){.tabs__tab{transition:none}}.badge{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);font-weight:var(--typography-font-weight-regular);line-height:1;white-space:nowrap;-webkit-user-select:none;user-select:none;border-radius:2px;text-transform:uppercase;letter-spacing:.05em;box-sizing:border-box}.badge--small{font-size:10px;padding:2px 6px;min-height:18px;gap:4px}.badge--medium{font-size:12px;padding:4px 8px;min-height:22px;gap:6px}.badge--default{background-color:var(--color-semantic-background-secondary);color:var(--color-semantic-text-primary);border:1px solid var(--color-semantic-border-default)}.badge--success{background-color:transparent;color:var(--color-cga-brightGreen);border:1px solid var(--color-cga-brightGreen)}.badge--warning{background-color:transparent;color:var(--color-cga-yellow);border:1px solid var(--color-cga-yellow)}.badge--error{background-color:transparent;color:var(--color-cga-brightRed);border:1px solid var(--color-cga-brightRed)}.badge--info{background-color:transparent;color:var(--color-cga-brightCyan);border:1px solid var(--color-cga-brightCyan)}.badge--accent{background-color:var(--color-semantic-background-accent);color:var(--color-semantic-text-secondary);border:1px solid var(--color-semantic-border-default)}.badge__dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.badge--default .badge__dot{background-color:var(--color-semantic-text-primary)}.badge--success .badge__dot{background-color:var(--color-cga-brightGreen)}.badge--warning .badge__dot{background-color:var(--color-cga-yellow)}.badge--error .badge__dot{background-color:var(--color-cga-brightRed)}.badge--info .badge__dot{background-color:var(--color-cga-brightCyan)}.badge--accent .badge__dot{background-color:var(--color-semantic-text-secondary)}.badge__content{display:inline-flex;align-items:center}@media(prefers-contrast:high){.badge{border-width:2px}}@media(prefers-reduced-motion:reduce){.badge{transition:none}}.switch{display:inline-flex;align-items:center;justify-content:flex-start;padding:0;border:none;background:transparent;cursor:pointer;outline:none;font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback)}.switch__track{position:relative;display:inline-flex;align-items:center;width:40px;height:20px;background-color:var(--color-semantic-background-secondary);border:2px solid var(--color-semantic-border-default);border-radius:2px;transition:all .15s ease}.switch__thumb{position:absolute;left:2px;width:12px;height:12px;background-color:var(--color-semantic-text-primary);border-radius:1px;transition:transform .15s ease,background-color .15s ease}.switch--checked .switch__track{background-color:var(--color-semantic-background-accent);border-color:var(--color-semantic-border-focus)}.switch--checked .switch__thumb{transform:translate(20px);background-color:var(--color-semantic-text-secondary)}.switch:hover:not(.switch--disabled) .switch__track{border-color:var(--color-semantic-border-hover)}.switch:hover:not(.switch--disabled):not(.switch--checked) .switch__thumb{background-color:var(--color-semantic-text-accent)}.switch:focus-visible .switch__track{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}.switch--disabled{cursor:not-allowed;opacity:.5}.switch--disabled .switch__track{background-color:var(--color-semantic-background-secondary);border-color:var(--color-semantic-border-disabled)}.switch--disabled .switch__thumb{background-color:var(--color-semantic-text-disabled)}@media(prefers-contrast:high){.switch__track{border-width:3px}}@media(prefers-reduced-motion:reduce){.switch__track,.switch__thumb{transition:none}}.breadcrumb{font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);font-size:var(--typography-font-size-xs);text-transform:uppercase;letter-spacing:.35em}.breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0;padding:0}.breadcrumb__item{display:flex;align-items:center;gap:8px}.breadcrumb__link{display:inline-flex;align-items:center;gap:4px;color:var(--color-semantic-text-disabled);text-decoration:none;transition:color .15s ease}.breadcrumb__link:hover{color:var(--color-semantic-text-primary)}.breadcrumb__link:focus-visible{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}.breadcrumb__back-arrow{font-size:1em;line-height:1}.breadcrumb__separator{color:var(--color-semantic-text-disabled);opacity:.6;-webkit-user-select:none;user-select:none}.breadcrumb__current{color:var(--color-semantic-text-primary)}@media(min-width:768px){.breadcrumb{font-size:var(--typography-font-size-sm)}}@media(prefers-contrast:high){.breadcrumb__link:focus-visible{outline-width:3px}}@media(prefers-reduced-motion:reduce){.breadcrumb__link{transition:none}}.retro-effects{--retro-intensity: 1;pointer-events:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999}.retro-effects__scanlines{position:absolute;top:0;right:0;bottom:0;left:0;opacity:calc(.6 * var(--retro-intensity));mix-blend-mode:screen;background:repeating-linear-gradient(to bottom,rgba(255,176,0,.05) 0px,rgba(255,176,0,.02) 1px,transparent 2px,transparent 4px);animation:retro-scanline 9s linear infinite}.retro-effects__glow{position:absolute;top:0;right:0;bottom:0;left:0;opacity:var(--retro-intensity);box-shadow:inset 0 0 200px #ffb0001f;background:radial-gradient(ellipse 120% 100% at center,transparent 0%,transparent 50%,rgba(0,0,0,.3) 80%,rgba(0,0,0,.5) 100%)}.retro-effects__flicker{position:absolute;top:0;right:0;bottom:0;left:0;opacity:calc(.04 * var(--retro-intensity));background-color:#ffb0001a;animation:retro-flicker .18s steps(2) infinite}@keyframes retro-scanline{0%{transform:translateY(0)}to{transform:translateY(12px)}}@keyframes retro-flicker{0%{opacity:calc(.02 * var(--retro-intensity))}50%{opacity:calc(.06 * var(--retro-intensity))}to{opacity:calc(.02 * var(--retro-intensity))}}@media(prefers-reduced-motion:reduce){.retro-effects__scanlines,.retro-effects__flicker{animation:none}}.timeline-node{display:inline-flex;align-items:center;gap:var(--spacing-2);font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback)}.timeline-node__marker{display:block;background:var(--color-cga-amber-dim);border:2px solid var(--color-cga-amber-dim);transition:all .15s ease;flex-shrink:0}.timeline-node--small .timeline-node__marker{width:8px;height:8px}.timeline-node--medium .timeline-node__marker{width:12px;height:12px}.timeline-node--large .timeline-node__marker{width:16px;height:16px}.timeline-node--circle .timeline-node__marker{border-radius:50%}.timeline-node--square .timeline-node__marker{border-radius:2px}.timeline-node--diamond .timeline-node__marker{transform:rotate(45deg)}.timeline-node--diamond.timeline-node--small .timeline-node__marker{width:7px;height:7px}.timeline-node--diamond.timeline-node--medium .timeline-node__marker{width:10px;height:10px}.timeline-node--diamond.timeline-node--large .timeline-node__marker{width:14px;height:14px}.timeline-node--default .timeline-node__marker{background:var(--color-cga-amber-dim);border-color:var(--color-cga-amber-dim)}.timeline-node--primary .timeline-node__marker{background:var(--color-cga-amber);border-color:var(--color-cga-amber)}.timeline-node--secondary .timeline-node__marker{background:var(--color-semantic-text-primary);border-color:var(--color-semantic-text-primary)}.timeline-node--accent .timeline-node__marker{background:var(--color-semantic-text-accent);border-color:var(--color-semantic-text-accent)}.timeline-node--interactive{cursor:pointer}.timeline-node--interactive:hover .timeline-node__marker{background:var(--color-cga-amber);border-color:var(--color-cga-amber);box-shadow:var(--shadow-glow-sm)}.timeline-node--active .timeline-node__marker{background:var(--color-cga-amber-bright);border-color:var(--color-cga-amber-bright);box-shadow:var(--shadow-glow-sm)}.timeline-node--active.timeline-node--interactive:hover .timeline-node__marker{box-shadow:var(--shadow-glow-md)}.timeline-node--interactive:focus-visible{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}.timeline-node__label{color:var(--color-cga-amber);font-size:var(--typography-font-size-xs);white-space:nowrap}.timeline-node--small .timeline-node__label{font-size:10px}.timeline-node--large .timeline-node__label{font-size:var(--typography-font-size-sm)}.timeline-node--label-left,.timeline-node--label-right{flex-direction:row}.timeline-node--label-top,.timeline-node--label-bottom{flex-direction:column}.timeline-node__label--left,.timeline-node__label--top{order:-1}@media(prefers-reduced-motion:reduce){.timeline-node__marker{transition:none}}@media(prefers-contrast:high){.timeline-node__marker{border-width:3px}.timeline-node--interactive:focus-visible{outline-width:3px}}.modal{padding:0;border:none;background:transparent;max-width:100vw;max-height:100vh}.modal::backdrop{background-color:#000c}.modal__container{background-color:var(--color-semantic-background-primary);border:2px solid var(--color-cga-yellow);box-shadow:var(--shadow-drop);width:480px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);display:flex;flex-direction:column;font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback)}.modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-4);border-bottom:1px solid var(--color-cga-darkGray)}.modal__title{margin:0;font-size:16px;font-weight:400;color:var(--color-cga-yellow);line-height:1.4}.modal__close{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:4px;cursor:pointer;color:var(--color-cga-lightGray)}.modal__close:hover{color:var(--color-cga-yellow)}.modal__close:focus-visible{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}.modal__body{padding:var(--spacing-4);color:var(--color-cga-lightGray);font-size:14px;line-height:1.5;overflow-y:auto;flex:1}.modal__footer{display:flex;gap:var(--spacing-2);justify-content:flex-end;padding:var(--spacing-4);border-top:1px solid var(--color-cga-darkGray)}.modal[open]{animation:modal-open .15s ease-out}.modal[open]::backdrop{animation:backdrop-open .15s ease-out}@keyframes modal-open{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes backdrop-open{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.modal[open],.modal[open]::backdrop{animation:none}}@media(prefers-contrast:high){.modal__container{border-width:3px}}
+.alert{width:100%;position:relative;overflow:hidden;text-align:left;font-size:16px;font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);border:none}.alert--info{background-color:var(--color-semantic-alert-info);color:var(--color-cga-amber)}.alert--success{background-color:var(--color-semantic-alert-success);color:var(--color-cga-brightGreen)}.alert--warning{background-color:var(--color-semantic-alert-warning);color:var(--color-cga-amber)}.alert--error{background-color:var(--color-semantic-alert-error);color:var(--color-cga-brightRed)}.alert--l{width:1020px;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:16px;box-sizing:border-box;gap:4px}.alert--s{width:350px;height:40px;overflow:hidden;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:0 8px;box-sizing:border-box;gap:8px}.alert__header{align-self:stretch;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;width:100%}.alert__icon{display:flex;align-items:center;justify-content:center;align-self:flex-start;width:24px;height:24px;flex-shrink:0;margin-top:2px}.alert--s .alert__icon{width:20px;height:20px}.alert--s .alert__icon svg{width:20px!important;height:20px!important}.alert__title{flex:1;position:relative;line-height:140%}.alert__close{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;background:none;border:none;padding:0;cursor:pointer;color:inherit}.alert__close svg{width:20px!important;height:20px!important}.alert--s .alert__content{display:none}.alert__content{align-self:stretch;display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;padding:0 0 0 32px;font-size:14px}.alert__message{flex:1;position:relative;line-height:140%;color:var(--color-cga-amberDim)}.alert__link{background:none;border:none;padding:0;cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;text-decoration:none}.icon{display:inline-block;vertical-align:middle;fill:currentColor;color:var(--color-system-foreground)}.icon--l{width:56px;height:56px}.icon--s{width:24px;height:24px}.icon[role=button]{cursor:pointer}.icon[role=button]:hover{color:var(--color-system-link-hover)}.section{width:100%;border:1px solid var(--color-semantic-border-default);background-color:var(--color-semantic-background-primary);color:var(--color-semantic-text-primary);font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback)}.section__header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:none;border:none;color:inherit;font-family:inherit;cursor:pointer;text-align:left}.section__title{flex:1;font-size:16px;line-height:24px}.section__icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-left:8px;color:inherit}.section__content{padding:16px;border-top:1px solid var(--color-semantic-border-default);font-size:14px;line-height:20px;color:var(--color-semantic-text-secondary)}.section--hover .section__header,.section__header:hover{background-color:var(--color-semantic-background-accent);color:var(--color-semantic-text-secondary)}.section--active .section__header,.section__header:active{background-color:var(--color-semantic-background-secondary);color:var(--color-cga-amber);text-shadow:0 0 8px var(--color-cga-amberGlow)}.section--expanded{border-color:var(--color-semantic-text-secondary)}.section--expanded .section__header{background-color:var(--color-semantic-background-accent);color:var(--color-semantic-text-secondary)}.section__header:focus{outline:none;box-shadow:0 0 0 2px var(--color-semantic-border-focus)}.section__icon{transition:transform .2s ease-in-out}.section--expanded .section__icon{transform:rotate(180deg)}.accordion-fill{width:100%;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:var(--spacing-2);text-align:left;font-size:var(--typography-font-size-base);font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);color:var(--color-semantic-text-secondary)}.accordion-fill>.section{margin-bottom:4px}.accordion-fill>.section:last-child{margin-bottom:0}.button{display:inline-flex;align-items:center;justify-content:center;position:relative;border:none;outline:none;cursor:pointer;text-decoration:none;font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);font-weight:var(--typography-font-weight-regular);line-height:1;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:all .1s ease;box-sizing:border-box;border:2px solid;background-clip:padding-box}.button--primary{background-color:var(--color-semantic-background-accent);color:var(--color-semantic-text-secondary);border-color:var(--color-semantic-border-default)}.button--primary:hover:not(:disabled){background-color:var(--color-semantic-border-focus);border-color:var(--color-semantic-text-secondary);box-shadow:var(--shadow-glow-sm)}.button--primary:active:not(:disabled){background-color:var(--color-semantic-background-accent);border-color:var(--color-semantic-text-disabled)}.button--secondary{background-color:var(--color-semantic-background-secondary);color:var(--color-semantic-text-primary);border-color:var(--color-semantic-border-default)}.button--secondary:hover:not(:disabled){background-color:var(--color-semantic-text-primary);color:var(--color-semantic-background-primary);border-color:var(--color-semantic-text-secondary);box-shadow:var(--shadow-glow-sm)}.button--secondary:active:not(:disabled){background-color:var(--color-semantic-background-secondary);border-color:var(--color-semantic-text-disabled)}.button--ghost{background-color:transparent;color:var(--color-semantic-text-primary);border-color:var(--color-semantic-border-default)}.button--ghost:hover:not(:disabled){background-color:var(--color-semantic-text-primary);color:var(--color-semantic-background-primary);border-color:var(--color-semantic-text-secondary);box-shadow:var(--shadow-glow-sm)}.button--ghost:active:not(:disabled){background-color:var(--color-semantic-background-secondary);color:var(--color-semantic-text-primary)}.button--link{background-color:transparent;color:var(--color-semantic-text-accent);border-color:transparent;text-decoration:underline}.button--link:hover:not(:disabled){color:var(--color-cga-amber-bright);background-color:transparent;border-color:transparent}.button--link:active:not(:disabled){color:var(--color-semantic-text-disabled)}.button--small{font-size:12px;padding:4px 8px;min-height:24px;gap:4px}.button--medium{font-size:14px;padding:8px 16px;min-height:32px;gap:6px}.button--large{font-size:16px;padding:12px 20px;min-height:40px;gap:8px}.button--disabled,.button:disabled{cursor:not-allowed;opacity:.6;background-color:var(--color-semantic-background-secondary)!important;color:var(--color-semantic-text-disabled)!important;border-color:var(--color-semantic-text-disabled)!important}.button--loading{cursor:wait}.button--full-width{width:100%;justify-content:center}.button__loading-indicator{animation:blink 1s infinite;margin-right:4px}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.button__content{display:inline-flex;align-items:center;justify-content:center}.button__content--loading{opacity:.7}.button:focus-visible{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}@media(prefers-contrast:high){.button{border-width:3px}}@media(prefers-reduced-motion:reduce){.button{transition:none}.button__loading-indicator{animation:none}}.card{background-color:var(--color-semantic-background-primary);border:var(--border-width-medium) solid var(--color-semantic-border-default);font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);color:var(--color-semantic-text-primary)}.card--default{border-color:var(--color-semantic-border-default)}.card--elevated{border-color:var(--color-semantic-text-secondary);box-shadow:4px 4px 0 0 var(--color-semantic-text-disabled)}.card--glow{border-color:var(--color-cga-amber);box-shadow:var(--shadow-glow-md)}.card--bordered{border-color:var(--color-semantic-text-accent);border-width:var(--border-width-medium)}.card__header{padding:var(--spacing-2) var(--spacing-3);border-bottom:var(--border-width-thin) solid var(--color-semantic-text-disabled);background-color:var(--color-cga-amber-dim)}.card__title{color:var(--color-semantic-text-secondary);font-size:var(--typography-font-size-base);font-weight:var(--typography-font-weight-bold);text-transform:uppercase}.card__body{padding:var(--spacing-3)}.card__footer{padding:var(--spacing-2) var(--spacing-3);border-top:var(--border-width-thin) solid var(--color-semantic-text-disabled);background-color:var(--color-semantic-background-secondary)}.card:focus-visible{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}@media(prefers-reduced-motion:reduce){.card{transition:none}}.checkbox{display:inline-flex;align-items:center;gap:var(--spacing-2);font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);font-size:var(--typography-font-size-base);color:var(--color-semantic-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox--disabled{cursor:not-allowed;opacity:.6}.checkbox__input{position:absolute;opacity:0;width:0;height:0}.checkbox__box{display:inline-block;white-space:nowrap;text-align:center;color:var(--color-semantic-text-primary)}.checkbox__box:before{content:"[ ]"}.checkbox__input:checked+.checkbox__box:before{content:"[X]";color:var(--color-semantic-text-accent)}.checkbox__input:focus-visible+.checkbox__box{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}.checkbox:hover:not(.checkbox--disabled) .checkbox__box{color:var(--color-semantic-text-secondary)}.checkbox:hover:not(.checkbox--disabled) .checkbox__input:checked+.checkbox__box:before{color:var(--color-semantic-text-secondary)}.checkbox--disabled .checkbox__box{color:var(--color-semantic-text-disabled)}.checkbox--disabled .checkbox__input:checked+.checkbox__box:before{color:var(--color-semantic-text-disabled)}.checkbox__label{color:inherit}@media(prefers-reduced-motion:reduce){.checkbox{transition:none}}.command-prompt{display:flex;align-items:center;font-family:var(--typography-font-family-primary);font-size:var(--typography-font-size-base);background:var(--color-semantic-background-primary);color:var(--color-semantic-text-accent);padding:var(--spacing-2);cursor:text}.command-prompt__prompt{color:var(--color-semantic-text-primary);margin-right:var(--spacing-2);white-space:nowrap;-webkit-user-select:none;user-select:none}.command-prompt__input{flex:1;background:transparent;border:none;color:var(--color-semantic-text-primary);font-family:inherit;font-size:inherit;outline:none;padding:0;margin:0;min-width:0}.command-prompt__input::placeholder{color:var(--color-semantic-text-disabled)}.command-prompt__cursor{color:var(--color-semantic-text-primary);animation:blink 1s step-end infinite;-webkit-user-select:none;user-select:none}.command-prompt--disabled{opacity:.5;cursor:not-allowed}.command-prompt--disabled .command-prompt__cursor{animation:none}.command-prompt__input:focus+.command-prompt__cursor{display:none}.progress{display:inline-flex;align-items:center;gap:var(--spacing-2);font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback)}.progress--small{font-size:var(--typography-font-size-xs)}.progress--medium{font-size:var(--typography-font-size-base)}.progress--large{font-size:var(--typography-font-size-lg)}.progress__bar{display:inline-block;letter-spacing:0;line-height:1}.progress__fill{color:var(--color-semantic-text-primary)}.progress--success .progress__fill{color:var(--color-semantic-status-success)}.progress--warning .progress__fill{color:var(--color-semantic-status-warning)}.progress--error .progress__fill{color:var(--color-semantic-status-error)}.progress__empty{color:var(--color-semantic-text-disabled)}.progress__label{color:var(--color-semantic-text-primary);min-width:4ch;text-align:right}@media(prefers-reduced-motion:reduce){.progress{transition:none}}.input{background:var(--color-semantic-background-primary);color:var(--color-semantic-text-primary);border:var(--border-width-medium) solid var(--color-semantic-border-default);font-family:var(--typography-font-family-primary);font-size:var(--typography-font-size-base);padding:var(--spacing-2);outline:none;width:100%;box-sizing:border-box}.input::placeholder{color:var(--color-semantic-text-disabled)}.input:focus{border-color:var(--color-semantic-border-focus);box-shadow:var(--shadow-glow-sm)}.input--error{border-color:var(--color-semantic-status-error)}.input--error:focus{border-color:var(--color-semantic-status-error)}.input--disabled,.input:disabled{opacity:.5;cursor:not-allowed;background:var(--color-semantic-background-primary)}:root{--terminal-bg: var(--color-semantic-background-primary);--terminal-border: var(--color-semantic-text-disabled);--terminal-border-active: var(--color-semantic-text-secondary);--terminal-title-bg: var(--color-semantic-background-secondary);--terminal-title-text: var(--color-semantic-text-secondary);--terminal-title-bg-inactive: var(--color-semantic-background-secondary);--terminal-title-text-inactive: var(--color-semantic-text-primary);--terminal-text: var(--color-semantic-text-primary);--terminal-control-bg: var(--color-semantic-text-primary);--terminal-control-symbol: var(--color-semantic-background-primary)}.terminal{background-color:var(--terminal-bg);border:2px solid var(--terminal-border);color:var(--terminal-text);font-family:Perfect DOS VGA,monospace;display:flex;flex-direction:column;box-shadow:5px 5px #00000080;min-width:320px;min-height:200px}.terminal:focus,.terminal--active{border-color:var(--terminal-border-active);outline:none}.terminal--active .terminal__title-bar{background-color:var(--color-semantic-background-accent)}.terminal--inactive{border-color:var(--terminal-border)}.terminal--inactive .terminal__title-bar{background-color:var(--terminal-title-bg-inactive);color:var(--terminal-title-text-inactive)}.terminal--small{width:480px;height:320px}.terminal--medium{width:640px;height:480px}.terminal--large{width:800px;height:600px}.terminal--maximized{width:100vw;height:100vh;position:fixed;top:0;left:0;border:none;box-shadow:none;z-index:1000}.terminal__title-bar{background-color:var(--terminal-title-bg);color:var(--terminal-title-text);padding:2px 4px;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;cursor:default;height:24px}.terminal__title{display:flex;align-items:center;gap:4px}.terminal__controls{display:flex}.terminal__control{background-color:var(--terminal-control-bg);border:1px solid var(--terminal-control-symbol);width:20px;height:20px;margin-left:2px;cursor:default;display:flex;align-items:center;justify-content:center;color:var(--terminal-control-symbol)}.terminal__control:active{filter:invert(1)}.terminal__content{flex-grow:1;padding:8px;overflow-y:auto}.terminal__default-content{display:flex;flex-direction:column}.terminal__prompt{display:flex}.terminal__path{margin-right:4px}.terminal__cursor{background-color:var(--terminal-text);width:8px;height:16px;animation:blink 1s step-end infinite}@keyframes blink{50%{opacity:0}}.terminal__resize-handle{position:absolute;bottom:0;right:0;width:16px;height:16px;cursor:nwse-resize}.terminal--minimized{display:none}.terminal__taskbar-item{display:inline-flex;align-items:center;background-color:var(--terminal-control-bg);border:1px solid var(--color-semantic-background-primary);padding:2px 8px;cursor:default;-webkit-user-select:none;user-select:none}.terminal__taskbar-title{margin-left:4px;color:var(--color-semantic-background-primary)}.tabs{display:inline-flex;align-items:center;gap:0;font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);box-sizing:border-box}.tabs__tab{position:relative;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;font-family:inherit;font-weight:var(--typography-font-weight-regular);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;transition:all .15s ease;color:var(--color-semantic-text-primary);opacity:.7}.tabs__tab:hover:not(:disabled){opacity:1}.tabs__tab--active{opacity:1}.tabs__tab--disabled{cursor:not-allowed;opacity:.3}.tabs--underline{gap:4px}.tabs--underline .tabs__tab{padding:8px 16px;border-bottom:2px solid transparent}.tabs--underline .tabs__tab--active{border-bottom-color:var(--color-semantic-text-accent);color:var(--color-semantic-text-accent)}.tabs--underline .tabs__tab:hover:not(:disabled):not(.tabs__tab--active){border-bottom-color:var(--color-semantic-border-default)}.tabs--pills{gap:4px;padding:4px;background-color:var(--color-semantic-background-secondary);border:1px solid var(--color-semantic-border-default);border-radius:2px}.tabs--pills .tabs__tab{padding:6px 12px;border-radius:2px}.tabs--pills .tabs__tab--active{background-color:var(--color-semantic-background-accent);color:var(--color-semantic-text-secondary)}.tabs--pills .tabs__tab:hover:not(:disabled):not(.tabs__tab--active){background-color:var(--color-semantic-background-primary)}.tabs--small .tabs__tab{font-size:10px;padding:4px 8px}.tabs--small.tabs--underline .tabs__tab{padding:4px 10px}.tabs--medium .tabs__tab{font-size:12px}.tabs--large .tabs__tab{font-size:14px;padding:10px 20px}.tabs--large.tabs--underline .tabs__tab{padding:10px 20px}.tabs--large.tabs--pills .tabs__tab{padding:8px 16px}.tabs__tab:focus-visible{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}@media(prefers-contrast:high){.tabs--underline .tabs__tab{border-bottom-width:3px}.tabs--pills{border-width:2px}}@media(prefers-reduced-motion:reduce){.tabs__tab{transition:none}}.badge{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);font-weight:var(--typography-font-weight-regular);line-height:1;white-space:nowrap;-webkit-user-select:none;user-select:none;border-radius:2px;text-transform:uppercase;letter-spacing:.05em;box-sizing:border-box}.badge--small{font-size:10px;padding:2px 6px;min-height:18px;gap:4px}.badge--medium{font-size:12px;padding:4px 8px;min-height:22px;gap:6px}.badge--default{background-color:var(--color-semantic-background-secondary);color:var(--color-semantic-text-primary);border:1px solid var(--color-semantic-border-default)}.badge--success{background-color:transparent;color:var(--color-cga-brightGreen);border:1px solid var(--color-cga-brightGreen)}.badge--warning{background-color:transparent;color:var(--color-cga-yellow);border:1px solid var(--color-cga-yellow)}.badge--error{background-color:transparent;color:var(--color-cga-brightRed);border:1px solid var(--color-cga-brightRed)}.badge--info{background-color:transparent;color:var(--color-cga-brightCyan);border:1px solid var(--color-cga-brightCyan)}.badge--accent{background-color:var(--color-semantic-background-accent);color:var(--color-semantic-text-secondary);border:1px solid var(--color-semantic-border-default)}.badge__dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.badge--default .badge__dot{background-color:var(--color-semantic-text-primary)}.badge--success .badge__dot{background-color:var(--color-cga-brightGreen)}.badge--warning .badge__dot{background-color:var(--color-cga-yellow)}.badge--error .badge__dot{background-color:var(--color-cga-brightRed)}.badge--info .badge__dot{background-color:var(--color-cga-brightCyan)}.badge--accent .badge__dot{background-color:var(--color-semantic-text-secondary)}.badge__content{display:inline-flex;align-items:center}@media(prefers-contrast:high){.badge{border-width:2px}}@media(prefers-reduced-motion:reduce){.badge{transition:none}}.switch{display:inline-flex;align-items:center;justify-content:flex-start;padding:0;border:none;background:transparent;cursor:pointer;outline:none;font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback)}.switch__track{position:relative;display:inline-flex;align-items:center;width:40px;height:20px;background-color:var(--color-semantic-background-secondary);border:2px solid var(--color-semantic-border-default);border-radius:2px;transition:all .15s ease}.switch__thumb{position:absolute;left:2px;width:12px;height:12px;background-color:var(--color-semantic-text-primary);border-radius:1px;transition:transform .15s ease,background-color .15s ease}.switch--checked .switch__track{background-color:var(--color-semantic-background-accent);border-color:var(--color-semantic-border-focus)}.switch--checked .switch__thumb{transform:translate(20px);background-color:var(--color-semantic-text-secondary)}.switch:hover:not(.switch--disabled) .switch__track{border-color:var(--color-semantic-border-hover)}.switch:hover:not(.switch--disabled):not(.switch--checked) .switch__thumb{background-color:var(--color-semantic-text-accent)}.switch:focus-visible .switch__track{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}.switch--disabled{cursor:not-allowed;opacity:.5}.switch--disabled .switch__track{background-color:var(--color-semantic-background-secondary);border-color:var(--color-semantic-border-disabled)}.switch--disabled .switch__thumb{background-color:var(--color-semantic-text-disabled)}@media(prefers-contrast:high){.switch__track{border-width:3px}}@media(prefers-reduced-motion:reduce){.switch__track,.switch__thumb{transition:none}}.breadcrumb{font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);font-size:var(--typography-font-size-xs);text-transform:uppercase;letter-spacing:.35em}.breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0;padding:0}.breadcrumb__item{display:flex;align-items:center;gap:8px}.breadcrumb__link{display:inline-flex;align-items:center;gap:4px;color:var(--color-semantic-text-disabled);text-decoration:none;transition:color .15s ease}.breadcrumb__link:hover{color:var(--color-semantic-text-primary)}.breadcrumb__link:focus-visible{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}.breadcrumb__back-arrow{font-size:1em;line-height:1}.breadcrumb__separator{color:var(--color-semantic-text-disabled);opacity:.6;-webkit-user-select:none;user-select:none}.breadcrumb__current{color:var(--color-semantic-text-primary)}@media(min-width:768px){.breadcrumb{font-size:var(--typography-font-size-sm)}}@media(prefers-contrast:high){.breadcrumb__link:focus-visible{outline-width:3px}}@media(prefers-reduced-motion:reduce){.breadcrumb__link{transition:none}}.retro-effects{--retro-intensity: 1;pointer-events:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999}.retro-effects__scanlines{position:absolute;top:0;right:0;bottom:0;left:0;opacity:calc(.6 * var(--retro-intensity));mix-blend-mode:screen;background:repeating-linear-gradient(to bottom,rgba(255,176,0,.05) 0px,rgba(255,176,0,.02) 1px,transparent 2px,transparent 4px);animation:retro-scanline 9s linear infinite}.retro-effects__glow{position:absolute;top:0;right:0;bottom:0;left:0;opacity:var(--retro-intensity);box-shadow:inset 0 0 200px #ffb0001f;background:radial-gradient(ellipse 120% 100% at center,transparent 0%,transparent 50%,rgba(0,0,0,.3) 80%,rgba(0,0,0,.5) 100%)}.retro-effects__flicker{position:absolute;top:0;right:0;bottom:0;left:0;opacity:calc(.04 * var(--retro-intensity));background-color:#ffb0001a;animation:retro-flicker .18s steps(2) infinite}@keyframes retro-scanline{0%{transform:translateY(0)}to{transform:translateY(12px)}}@keyframes retro-flicker{0%{opacity:calc(.02 * var(--retro-intensity))}50%{opacity:calc(.06 * var(--retro-intensity))}to{opacity:calc(.02 * var(--retro-intensity))}}@media(prefers-reduced-motion:reduce){.retro-effects__scanlines,.retro-effects__flicker{animation:none}}.timeline-node{display:inline-flex;align-items:center;gap:var(--spacing-2);font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback)}.timeline-node__marker{display:block;background:var(--color-cga-amber-dim);border:2px solid var(--color-cga-amber-dim);transition:all .15s ease;flex-shrink:0}.timeline-node--small .timeline-node__marker{width:8px;height:8px}.timeline-node--medium .timeline-node__marker{width:12px;height:12px}.timeline-node--large .timeline-node__marker{width:16px;height:16px}.timeline-node--circle .timeline-node__marker{border-radius:50%}.timeline-node--square .timeline-node__marker{border-radius:2px}.timeline-node--diamond .timeline-node__marker{transform:rotate(45deg)}.timeline-node--diamond.timeline-node--small .timeline-node__marker{width:7px;height:7px}.timeline-node--diamond.timeline-node--medium .timeline-node__marker{width:10px;height:10px}.timeline-node--diamond.timeline-node--large .timeline-node__marker{width:14px;height:14px}.timeline-node--default .timeline-node__marker{background:var(--color-cga-amber-dim);border-color:var(--color-cga-amber-dim)}.timeline-node--primary .timeline-node__marker{background:var(--color-cga-amber);border-color:var(--color-cga-amber)}.timeline-node--secondary .timeline-node__marker{background:var(--color-semantic-text-primary);border-color:var(--color-semantic-text-primary)}.timeline-node--accent .timeline-node__marker{background:var(--color-semantic-text-accent);border-color:var(--color-semantic-text-accent)}.timeline-node--interactive{cursor:pointer}.timeline-node--interactive:hover .timeline-node__marker{background:var(--color-cga-amber);border-color:var(--color-cga-amber);box-shadow:var(--shadow-glow-sm)}.timeline-node--active .timeline-node__marker{background:var(--color-cga-amber-bright);border-color:var(--color-cga-amber-bright);box-shadow:var(--shadow-glow-sm)}.timeline-node--active.timeline-node--interactive:hover .timeline-node__marker{box-shadow:var(--shadow-glow-md)}.timeline-node--interactive:focus-visible{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}.timeline-node__label{color:var(--color-cga-amber);font-size:var(--typography-font-size-xs);white-space:nowrap}.timeline-node--small .timeline-node__label{font-size:10px}.timeline-node--large .timeline-node__label{font-size:var(--typography-font-size-sm)}.timeline-node--label-left,.timeline-node--label-right{flex-direction:row}.timeline-node--label-top,.timeline-node--label-bottom{flex-direction:column}.timeline-node__label--left,.timeline-node__label--top{order:-1}@media(prefers-reduced-motion:reduce){.timeline-node__marker{transition:none}}@media(prefers-contrast:high){.timeline-node__marker{border-width:3px}.timeline-node--interactive:focus-visible{outline-width:3px}}.modal{padding:0;border:none;background:transparent;max-width:100vw;max-height:100vh}.modal::backdrop{background-color:#000c}.modal__container{background-color:var(--color-semantic-background-primary);border:2px solid var(--color-cga-yellow);box-shadow:var(--shadow-drop);width:480px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);display:flex;flex-direction:column;font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback)}.modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-4);border-bottom:1px solid var(--color-cga-darkGray)}.modal__title{margin:0;font-size:16px;font-weight:400;color:var(--color-cga-yellow);line-height:1.4}.modal__close{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:4px;cursor:pointer;color:var(--color-cga-lightGray)}.modal__close:hover{color:var(--color-cga-yellow)}.modal__close:focus-visible{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}.modal__body{padding:var(--spacing-4);color:var(--color-cga-lightGray);font-size:14px;line-height:1.5;overflow-y:auto;flex:1}.modal__footer{display:flex;gap:var(--spacing-2);justify-content:flex-end;padding:var(--spacing-4);border-top:1px solid var(--color-cga-darkGray)}.modal[open]{animation:modal-open .15s ease-out}.modal[open]::backdrop{animation:backdrop-open .15s ease-out}@keyframes modal-open{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes backdrop-open{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.modal[open],.modal[open]::backdrop{animation:none}}@media(prefers-contrast:high){.modal__container{border-width:3px}}.stat{display:flex;flex-direction:column;gap:4px;font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);box-sizing:border-box}.stat--small{gap:2px}.stat--small .stat__label{font-size:10px}.stat--small .stat__value{font-size:18px}.stat--small .stat__trend{font-size:10px}.stat--medium{gap:4px}.stat--medium .stat__label{font-size:11px}.stat--medium .stat__value{font-size:24px}.stat--medium .stat__trend{font-size:11px}.stat--large{gap:6px}.stat--large .stat__label{font-size:12px}.stat--large .stat__value{font-size:32px}.stat--large .stat__trend{font-size:12px}.stat__label{color:var(--color-semantic-text-primary);text-transform:uppercase;letter-spacing:.05em;line-height:1.2}.stat__value{color:var(--color-semantic-text-accent);font-weight:var(--typography-font-weight-bold);line-height:1;font-variant-numeric:tabular-nums}.stat__trend{display:inline-flex;align-items:center;gap:4px;line-height:1}.stat__trend--up{color:var(--color-cga-brightGreen)}.stat__trend--down{color:var(--color-cga-brightRed)}.stat__trend--neutral{color:var(--color-semantic-text-primary)}.stat__trend-icon{font-size:.8em}.stat__trend-value{font-variant-numeric:tabular-nums}@media(prefers-contrast:high){.stat__value,.stat__trend{font-weight:700}.stat__trend-icon{font-size:1em}}@media(prefers-reduced-motion:reduce){.stat{transition:none}}

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export { Breadcrumb } from './components/Breadcrumb';
 export { RetroEffects } from './components/RetroEffects';
 export { TimelineNode } from './components/TimelineNode';
 export { Modal } from './components/Modal';
+export { Stat } from './components/Stat';
 export type { AlertProps } from './components/Alert';
 export type { SectionProps, AccordionFillProps } from './components/Accordion';
 export type { ButtonProps } from './components/Button';
@@ -22,6 +23,7 @@ export type { CardProps } from './components/Card';
 export type { CheckboxProps } from './components/Checkbox';
 export type { CommandPromptProps } from './components/CommandPrompt';
 export type { ProgressProps } from './components/Progress';
+export type { IconProps } from './components/Icon';
 export type { InputProps } from './components/Input';
 export type { TerminalProps } from './components/Terminal';
 export type { TabsProps, TabItem } from './components/Tabs';
@@ -31,4 +33,5 @@ export type { BreadcrumbProps, BreadcrumbItem } from './components/Breadcrumb';
 export type { RetroEffectsProps } from './components/RetroEffects';
 export type { TimelineNodeProps, TimelineNodeShape, TimelineNodeVariant } from './components/TimelineNode';
 export type { ModalProps } from './components/Modal';
-export declare const version = "0.3.0";
+export type { StatProps } from './components/Stat';
+export declare const version = "0.3.5";

package/dist/index.es.js

@@ -1,24 +1,24 @@
-import { jsx as e, jsxs as _, Fragment as j } from "react/jsx-runtime";
-import A, { useState as C, useEffect as B, useRef as S, forwardRef as E, useCallback as I, useId as K } from "react";
+import { jsx as e, jsxs as u, Fragment as j } from "react/jsx-runtime";
+import A, { useState as g, useEffect as D, useRef as S, forwardRef as E, useCallback as I, useId as K } from "react";
 import { createPortal as R } from "react-dom";
 const k = ({
-  name: t,
+  name: r,
   size: i = "L",
-  className: s = "",
+  className: t = "",
   onClick: a,
   color: n,
-  role: r
+  role: s
 }) => {
   const l = process.env.NODE_ENV === "production" ? "/eiDotter" : "";
   return /* @__PURE__ */ e(
     "svg",
     {
-      className: `icon ${i === "L" ? "icon--l" : "icon--s"} ${s} ${r ? `icon--${r}` : ""}`.trim(),
+      className: `icon ${i === "L" ? "icon--l" : "icon--s"} ${t} ${s ? `icon--${s}` : ""}`.trim(),
       onClick: a,
-      role: r,
-      "aria-label": `${t} icon`,
+      role: s,
+      "aria-label": `${r} icon`,
       style: n ? { color: n } : void 0,
-      children: /* @__PURE__ */ e("use", { href: `${l}/icons/sprites.svg#${t}` })
+      children: /* @__PURE__ */ e("use", { href: `${l}/icons/sprites.svg#${r}` })
     }
   );
 }, L = {
@@ -26,16 +26,16 @@ const k = ({
   success: "Done",
   warning: "Warning",
   error: "Error"
-}, W = ({
-  size: t = "L",
+}, O = ({
+  size: r = "L",
   type: i = "info",
-  title: s = "Notification Title",
+  title: t = "Notification Title",
   children: a = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit amet diam neque bibendum. Quisque in praesent sit erat...",
   onClose: n,
-  onClickHere: r,
+  onClickHere: s,
   className: l = ""
-}) => /* @__PURE__ */ _("div", { className: `alert alert--${t.toLowerCase()} alert--${i} ${l}`.trim(), children: [
-  /* @__PURE__ */ _("div", { className: "alert__header", children: [
+}) => /* @__PURE__ */ u("div", { className: `alert alert--${r.toLowerCase()} alert--${i} ${l}`.trim(), children: [
+  /* @__PURE__ */ u("div", { className: "alert__header", children: [
     /* @__PURE__ */ e("div", { className: "alert__icon", children: /* @__PURE__ */ e(
       k,
       {
@@ -44,7 +44,7 @@ const k = ({
         "aria-label": `${i} alert`
       }
     ) }),
-    /* @__PURE__ */ e("div", { className: "alert__title", children: s }),
+    /* @__PURE__ */ e("div", { className: "alert__title", children: t }),
     n && /* @__PURE__ */ e(
       "button",
       {
@@ -61,35 +61,35 @@ const k = ({
       }
     )
   ] }),
-  /* @__PURE__ */ e("div", { className: "alert__content", children: /* @__PURE__ */ _("div", { className: "alert__message", children: [
+  /* @__PURE__ */ e("div", { className: "alert__content", children: /* @__PURE__ */ u("div", { className: "alert__message", children: [
     /* @__PURE__ */ e("span", { children: a }),
-    r && /* @__PURE__ */ e(
+    s && /* @__PURE__ */ e(
       "button",
       {
         className: "alert__link",
-        onClick: r,
+        onClick: s,
         "aria-label": "Click for more information",
         children: "Click here"
       }
     )
   ] }) })
 ] }), M = ({
-  title: t,
+  title: r,
   children: i,
-  defaultExpanded: s = !1,
+  defaultExpanded: t = !1,
   isHovered: a = !1,
   isActive: n = !1,
-  onToggle: r
+  onToggle: s
 }) => {
-  const [l, o] = C(s);
-  B(() => {
-    o(s);
-  }, [s]);
+  const [l, o] = g(t);
+  D(() => {
+    o(t);
+  }, [t]);
   const c = () => {
     const m = !l;
-    o(m), r == null || r(m);
+    o(m), s == null || s(m);
   };
-  return /* @__PURE__ */ _(
+  return /* @__PURE__ */ u(
     "div",
     {
       className: `
@@ -99,14 +99,14 @@ const k = ({
         ${n ? "section--active" : ""}
       `.trim(),
       children: [
-        /* @__PURE__ */ _(
+        /* @__PURE__ */ u(
           "button",
           {
             className: "section__header",
             onClick: c,
             "aria-expanded": l,
             children: [
-              /* @__PURE__ */ e("div", { className: "section__title", children: t }),
+              /* @__PURE__ */ e("div", { className: "section__title", children: r }),
               /* @__PURE__ */ e("div", { className: "section__icon", children: /* @__PURE__ */ e(
                 k,
                 {
@@ -121,50 +121,50 @@ const k = ({
       ]
     }
   );
-}, O = ({
-  sections: t,
+}, Q = ({
+  sections: r,
   defaultExpandedIndex: i = -1
 }) => {
-  const [s, a] = C(i), n = (r, l) => {
-    a(l ? r : -1);
+  const [t, a] = g(i), n = (s, l) => {
+    a(l ? s : -1);
   };
-  return /* @__PURE__ */ e("div", { className: "accordion-fill", children: t.map((r, l) => /* @__PURE__ */ e(
+  return /* @__PURE__ */ e("div", { className: "accordion-fill", children: r.map((s, l) => /* @__PURE__ */ e(
     M,
     {
-      title: r.title,
+      title: s.title,
       defaultExpanded: l === i,
       onToggle: (o) => n(l, o),
-      children: r.content
+      children: s.content
     },
     l
   )) });
-}, Q = ({
-  variant: t = "primary",
+}, G = ({
+  variant: r = "primary",
   size: i = "medium",
-  type: s = "button",
+  type: t = "button",
   disabled: a = !1,
   loading: n = !1,
-  children: r,
+  children: s,
   onClick: l,
   className: o = "",
   fullWidth: c = !1,
   ...m
 }) => {
-  const d = (b) => {
-    a || n || l == null || l(b);
+  const d = (p) => {
+    a || n || l == null || l(p);
   }, h = [
     "button",
-    `button--${t}`,
+    `button--${r}`,
     `button--${i}`,
     a && "button--disabled",
     n && "button--loading",
     c && "button--full-width",
     o
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _(
+  return /* @__PURE__ */ u(
     "button",
     {
-      type: s,
+      type: t,
       className: h,
       onClick: d,
       disabled: a || n,
@@ -172,58 +172,58 @@ const k = ({
       ...m,
       children: [
         n && /* @__PURE__ */ e("span", { className: "button__loading-indicator", "aria-hidden": "true", children: "█" }),
-        /* @__PURE__ */ e("span", { className: `button__content ${n ? "button__content--loading" : ""}`, children: r })
+        /* @__PURE__ */ e("span", { className: `button__content ${n ? "button__content--loading" : ""}`, children: s })
       ]
     }
   );
-}, G = ({
-  title: t,
+}, H = ({
+  title: r,
   children: i,
-  footer: s,
+  footer: t,
   variant: a = "default",
   className: n = "",
-  ...r
+  ...s
 }) => {
   const l = [
     "card",
     `card--${a}`,
     n
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("div", { className: l, ...r, children: [
-    t && /* @__PURE__ */ e("div", { className: "card__header", children: /* @__PURE__ */ e("span", { className: "card__title", children: t }) }),
+  return /* @__PURE__ */ u("div", { className: l, ...s, children: [
+    r && /* @__PURE__ */ e("div", { className: "card__header", children: /* @__PURE__ */ e("span", { className: "card__title", children: r }) }),
     /* @__PURE__ */ e("div", { className: "card__body", children: i }),
-    s && /* @__PURE__ */ e("div", { className: "card__footer", children: s })
+    t && /* @__PURE__ */ e("div", { className: "card__footer", children: t })
   ] });
-}, H = ({
-  checked: t,
+}, J = ({
+  checked: r,
   defaultChecked: i,
-  onChange: s,
+  onChange: t,
   label: a,
   disabled: n = !1,
-  name: r,
+  name: s,
   value: l,
   className: o = "",
   "aria-label": c,
   ...m
 }) => {
-  const d = (b) => {
-    n || s == null || s(b.target.checked);
+  const d = (p) => {
+    n || t == null || t(p.target.checked);
   }, h = [
     "checkbox",
     n && "checkbox--disabled",
     o
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("label", { className: h, children: [
+  return /* @__PURE__ */ u("label", { className: h, children: [
     /* @__PURE__ */ e(
       "input",
       {
         type: "checkbox",
         className: "checkbox__input",
-        checked: t,
+        checked: r,
         defaultChecked: i,
         onChange: d,
         disabled: n,
-        name: r,
+        name: s,
         value: l,
         "aria-label": c || a,
         ...m
@@ -232,32 +232,32 @@ const k = ({
     /* @__PURE__ */ e("span", { className: "checkbox__box", "aria-hidden": "true" }),
     a && /* @__PURE__ */ e("span", { className: "checkbox__label", children: a })
   ] });
-}, J = ({
-  prompt: t = "C:\\>",
+}, P = ({
+  prompt: r = "C:\\>",
   onCommand: i,
-  autoFocus: s = !1,
+  autoFocus: t = !1,
   className: a = "",
   placeholder: n,
-  disabled: r = !1
+  disabled: s = !1
 }) => {
-  const [l, o] = C(""), c = S(null);
-  B(() => {
-    s && c.current && c.current.focus();
-  }, [s]);
+  const [l, o] = g(""), c = S(null);
+  D(() => {
+    t && c.current && c.current.focus();
+  }, [t]);
   const m = (h) => {
-    h.key === "Enter" && l.trim() && !r && (i(l.trim()), o(""));
+    h.key === "Enter" && l.trim() && !s && (i(l.trim()), o(""));
   }, d = () => {
-    !r && c.current && c.current.focus();
+    !s && c.current && c.current.focus();
   };
-  return /* @__PURE__ */ _(
+  return /* @__PURE__ */ u(
     "div",
     {
-      className: `command-prompt ${r ? "command-prompt--disabled" : ""} ${a}`.trim(),
+      className: `command-prompt ${s ? "command-prompt--disabled" : ""} ${a}`.trim(),
       onClick: d,
       role: "textbox",
       "aria-label": "Command prompt",
       children: [
-        /* @__PURE__ */ e("span", { className: "command-prompt__prompt", "aria-hidden": "true", children: t }),
+        /* @__PURE__ */ e("span", { className: "command-prompt__prompt", "aria-hidden": "true", children: r }),
         /* @__PURE__ */ e(
           "input",
           {
@@ -266,13 +266,13 @@ const k = ({
             value: l,
             onChange: (h) => o(h.target.value),
             onKeyDown: m,
-            autoFocus: s,
+            autoFocus: t,
             spellCheck: !1,
             autoComplete: "off",
             autoCapitalize: "off",
             autoCorrect: "off",
             placeholder: n,
-            disabled: r,
+            disabled: s,
             "aria-label": "Command input"
           }
         ),
@@ -280,38 +280,38 @@ const k = ({
       ]
     }
   );
-}, P = ({
-  value: t,
+}, V = ({
+  value: r,
   max: i = 100,
-  variant: s = "default",
+  variant: t = "default",
   size: a = "medium",
   showLabel: n = !1,
-  className: r = "",
+  className: s = "",
   "aria-label": l,
   ...o
 }) => {
-  const c = Math.min(100, Math.max(0, t / i * 100)), m = Math.round(c / 5), d = 20 - m, h = [
+  const c = Math.min(100, Math.max(0, r / i * 100)), m = Math.round(c / 5), d = 20 - m, h = [
     "progress",
-    `progress--${s}`,
+    `progress--${t}`,
     `progress--${a}`,
-    r
+    s
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _(
+  return /* @__PURE__ */ u(
     "div",
     {
       className: h,
       role: "progressbar",
-      "aria-valuenow": t,
+      "aria-valuenow": r,
       "aria-valuemin": 0,
       "aria-valuemax": i,
       "aria-label": l || `Progress: ${Math.round(c)}%`,
       ...o,
       children: [
-        /* @__PURE__ */ _("span", { className: "progress__bar", children: [
+        /* @__PURE__ */ u("span", { className: "progress__bar", children: [
           /* @__PURE__ */ e("span", { className: "progress__fill", children: "█".repeat(m) }),
           /* @__PURE__ */ e("span", { className: "progress__empty", children: "░".repeat(d) })
         ] }),
-        n && /* @__PURE__ */ _("span", { className: "progress__label", children: [
+        n && /* @__PURE__ */ u("span", { className: "progress__label", children: [
           Math.round(c),
           "%"
         ] })
@@ -319,91 +319,91 @@ const k = ({
     }
   );
 }, T = E(({
-  variant: t = "default",
+  variant: r = "default",
   className: i = "",
-  disabled: s,
+  disabled: t,
   ...a
 }, n) => {
-  const r = [
+  const s = [
     "input",
-    `input--${t}`,
-    s && "input--disabled",
+    `input--${r}`,
+    t && "input--disabled",
     i
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ e(
     "input",
     {
       ref: n,
-      className: r,
-      disabled: s,
-      "aria-invalid": t === "error",
+      className: s,
+      disabled: t,
+      "aria-invalid": r === "error",
       ...a
     }
   );
 });
 T.displayName = "Input";
 const X = ({
-  size: t = "medium",
+  size: r = "medium",
   title: i = "MS-DOS Terminal",
-  state: s = "active",
+  state: t = "active",
   resizable: a = !0,
   minimizable: n = !0,
-  maximizable: r = !0,
+  maximizable: s = !0,
   closeable: l = !0,
   children: o,
   onMinimize: c,
   onMaximize: m,
   onClose: d,
   onFocus: h,
-  className: b = "",
+  className: p = "",
   autoFocus: y = !1
 }) => {
-  const [$, u] = C(s), [p, f] = C(!1), v = S(null);
-  B(() => {
+  const [$, _] = g(t), [b, f] = g(!1), v = S(null);
+  D(() => {
     y && v.current && v.current.focus();
   }, [y]);
   const N = () => {
-    u("minimized"), c == null || c();
+    _("minimized"), c == null || c();
   }, x = () => {
-    f(!p), m == null || m();
+    f(!b), m == null || m();
   }, w = () => {
     d == null || d();
-  }, D = () => {
-    u("active"), h == null || h();
-  }, z = (g) => {
-    g.altKey && g.key === "F4" && l && (g.preventDefault(), w());
+  }, B = () => {
+    _("active"), h == null || h();
+  }, z = (C) => {
+    C.altKey && C.key === "F4" && l && (C.preventDefault(), w());
   };
   return $ === "minimized" ? /* @__PURE__ */ e(
     "div",
     {
-      className: `terminal terminal--minimized ${b}`.trim(),
-      onClick: D,
+      className: `terminal terminal--minimized ${p}`.trim(),
+      onClick: B,
       role: "button",
       tabIndex: 0,
       "aria-label": `Restore ${i} window`,
-      onKeyDown: (g) => g.key === "Enter" && D(),
-      children: /* @__PURE__ */ _("div", { className: "terminal__taskbar-item", children: [
+      onKeyDown: (C) => C.key === "Enter" && B(),
+      children: /* @__PURE__ */ u("div", { className: "terminal__taskbar-item", children: [
         /* @__PURE__ */ e(k, { name: "App", size: "S" }),
         /* @__PURE__ */ e("span", { className: "terminal__taskbar-title", children: i })
       ] })
     }
-  ) : /* @__PURE__ */ _(
+  ) : /* @__PURE__ */ u(
     "div",
     {
       ref: v,
-      className: `terminal terminal--${t} terminal--${$} ${p ? "terminal--maximized" : ""} ${b}`.trim(),
+      className: `terminal terminal--${r} terminal--${$} ${b ? "terminal--maximized" : ""} ${p}`.trim(),
       tabIndex: 0,
       role: "dialog",
       "aria-label": `${i} terminal window`,
-      onFocus: D,
+      onFocus: B,
       onKeyDown: z,
       children: [
-        /* @__PURE__ */ _("div", { className: "terminal__title-bar", children: [
-          /* @__PURE__ */ _("div", { className: "terminal__title", children: [
+        /* @__PURE__ */ u("div", { className: "terminal__title-bar", children: [
+          /* @__PURE__ */ u("div", { className: "terminal__title", children: [
             /* @__PURE__ */ e(k, { name: "App", size: "S", "aria-hidden": "true" }),
             /* @__PURE__ */ e("span", { className: "terminal__title-text", children: i })
           ] }),
-          /* @__PURE__ */ _("div", { className: "terminal__controls", children: [
+          /* @__PURE__ */ u("div", { className: "terminal__controls", children: [
             n && /* @__PURE__ */ e(
               "button",
               {
@@ -414,14 +414,14 @@ const X = ({
                 children: /* @__PURE__ */ e(k, { name: "Cancel", size: "S" })
               }
             ),
-            r && /* @__PURE__ */ e(
+            s && /* @__PURE__ */ e(
               "button",
               {
                 className: "terminal__control terminal__control--maximize",
                 onClick: x,
-                "aria-label": p ? "Restore window" : "Maximize window",
-                title: p ? "Restore" : "Maximize",
-                children: /* @__PURE__ */ e(k, { name: p ? "Fullscreen" : "Add", size: "S" })
+                "aria-label": b ? "Restore window" : "Maximize window",
+                title: b ? "Restore" : "Maximize",
+                children: /* @__PURE__ */ e(k, { name: b ? "Fullscreen" : "Add", size: "S" })
               }
             ),
             l && /* @__PURE__ */ e(
@@ -436,7 +436,7 @@ const X = ({
             )
           ] })
         ] }),
-        /* @__PURE__ */ e("div", { className: "terminal__content", role: "main", children: o || /* @__PURE__ */ e("div", { className: "terminal__default-content", children: /* @__PURE__ */ _("div", { className: "terminal__prompt", children: [
+        /* @__PURE__ */ e("div", { className: "terminal__content", role: "main", children: o || /* @__PURE__ */ e("div", { className: "terminal__default-content", children: /* @__PURE__ */ u("div", { className: "terminal__prompt", children: [
           /* @__PURE__ */ e("span", { className: "terminal__path", children: "C:\\\\>" }),
           /* @__PURE__ */ e("span", { className: "terminal__cursor", children: "█" })
         ] }) }) }),
@@ -445,114 +445,114 @@ const X = ({
     }
   );
 }, Y = ({
-  tabs: t,
+  tabs: r,
   variant: i = "underline",
-  size: s = "medium",
+  size: t = "medium",
   activeTab: a,
   defaultActiveTab: n,
-  onTabChange: r,
+  onTabChange: s,
   className: l = "",
   ...o
 }) => {
   var $;
-  const [c, m] = C(
-    n || (($ = t[0]) == null ? void 0 : $.id) || ""
-  ), d = a !== void 0 ? a : c, h = I((u, p) => {
-    p || (a === void 0 && m(u), r == null || r(u));
-  }, [a, r]), b = I((u, p) => {
+  const [c, m] = g(
+    n || (($ = r[0]) == null ? void 0 : $.id) || ""
+  ), d = a !== void 0 ? a : c, h = I((_, b) => {
+    b || (a === void 0 && m(_), s == null || s(_));
+  }, [a, s]), p = I((_, b) => {
     var x;
-    const f = t.filter((w) => !w.disabled), v = f.findIndex((w) => w.id === t[p].id);
+    const f = r.filter((w) => !w.disabled), v = f.findIndex((w) => w.id === r[b].id);
     let N = null;
-    switch (u.key) {
+    switch (_.key) {
       case "ArrowLeft":
       case "ArrowUp":
-        u.preventDefault(), N = v > 0 ? v - 1 : f.length - 1;
+        _.preventDefault(), N = v > 0 ? v - 1 : f.length - 1;
         break;
       case "ArrowRight":
       case "ArrowDown":
-        u.preventDefault(), N = v < f.length - 1 ? v + 1 : 0;
+        _.preventDefault(), N = v < f.length - 1 ? v + 1 : 0;
         break;
       case "Home":
-        u.preventDefault(), N = 0;
+        _.preventDefault(), N = 0;
         break;
       case "End":
-        u.preventDefault(), N = f.length - 1;
+        _.preventDefault(), N = f.length - 1;
         break;
     }
     if (N !== null) {
       const w = f[N];
       h(w.id, w.disabled), (x = document.querySelectorAll('[role="tab"]:not([disabled])')[N]) == null || x.focus();
     }
-  }, [t, h]), y = [
+  }, [r, h]), y = [
     "tabs",
     `tabs--${i}`,
-    `tabs--${s}`,
+    `tabs--${t}`,
     l
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e("div", { className: y, role: "tablist", ...o, children: t.map((u, p) => {
-    const f = d === u.id, v = [
+  return /* @__PURE__ */ e("div", { className: y, role: "tablist", ...o, children: r.map((_, b) => {
+    const f = d === _.id, v = [
       "tabs__tab",
       f && "tabs__tab--active",
-      u.disabled && "tabs__tab--disabled"
+      _.disabled && "tabs__tab--disabled"
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ e(
       "button",
       {
         role: "tab",
-        id: `tab-${u.id}`,
+        id: `tab-${_.id}`,
         "aria-selected": f,
         tabIndex: f ? 0 : -1,
-        disabled: u.disabled,
+        disabled: _.disabled,
         className: v,
-        onClick: () => h(u.id, u.disabled),
-        onKeyDown: (N) => b(N, p),
-        children: u.label
+        onClick: () => h(_.id, _.disabled),
+        onKeyDown: (N) => p(N, b),
+        children: _.label
       },
-      u.id
+      _.id
     );
   }) });
 }, Z = ({
-  variant: t = "default",
+  variant: r = "default",
   size: i = "medium",
-  dot: s = !1,
+  dot: t = !1,
   children: a,
   className: n = "",
-  ...r
+  ...s
 }) => {
   const l = [
     "badge",
-    `badge--${t}`,
+    `badge--${r}`,
     `badge--${i}`,
-    s && "badge--with-dot",
+    t && "badge--with-dot",
     n
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("span", { className: l, ...r, children: [
-    s && /* @__PURE__ */ e("span", { className: "badge__dot", "aria-hidden": "true" }),
+  return /* @__PURE__ */ u("span", { className: l, ...s, children: [
+    t && /* @__PURE__ */ e("span", { className: "badge__dot", "aria-hidden": "true" }),
     /* @__PURE__ */ e("span", { className: "badge__content", children: a })
   ] });
 }, F = ({
-  checked: t,
+  checked: r,
   defaultChecked: i = !1,
-  onCheckedChange: s,
+  onCheckedChange: t,
   disabled: a = !1,
   name: n,
-  value: r,
+  value: s,
   className: l = "",
   ...o
 }) => {
-  const [c, m] = A.useState(i), d = t !== void 0, h = d ? t : c, b = () => {
+  const [c, m] = A.useState(i), d = r !== void 0, h = d ? r : c, p = () => {
     if (a) return;
-    const u = !h;
-    d || m(u), s == null || s(u);
-  }, y = (u) => {
-    (u.key === " " || u.key === "Enter") && (u.preventDefault(), b());
+    const _ = !h;
+    d || m(_), t == null || t(_);
+  }, y = (_) => {
+    (_.key === " " || _.key === "Enter") && (_.preventDefault(), p());
   }, $ = [
     "switch",
     h && "switch--checked",
     a && "switch--disabled",
     l
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _(
+  return /* @__PURE__ */ u(
     "button",
     {
       type: "button",
@@ -560,7 +560,7 @@ const X = ({
       "aria-checked": h,
       "aria-disabled": a,
       className: $,
-      onClick: b,
+      onClick: p,
       onKeyDown: y,
       disabled: a,
       ...o,
@@ -571,91 +571,91 @@ const X = ({
           {
             type: "hidden",
             name: n,
-            value: h ? r || "on" : ""
+            value: h ? s || "on" : ""
           }
         )
       ]
     }
   );
 }, ee = ({
-  trail: t = [],
+  trail: r = [],
   currentLabel: i,
-  showBackArrow: s = !0,
+  showBackArrow: t = !0,
   separator: a = "/",
   linkComponent: n,
-  className: r = ""
+  className: s = ""
 }) => {
   const l = [
     "breadcrumb",
-    r
+    s
   ].filter(Boolean).join(" "), o = (c, m) => {
-    const d = /* @__PURE__ */ _(j, { children: [
-      s && m && /* @__PURE__ */ e("span", { className: "breadcrumb__back-arrow", "aria-hidden": "true", children: "<" }),
+    const d = /* @__PURE__ */ u(j, { children: [
+      t && m && /* @__PURE__ */ e("span", { className: "breadcrumb__back-arrow", "aria-hidden": "true", children: "<" }),
       /* @__PURE__ */ e("span", { children: c.label })
     ] });
     return n ? /* @__PURE__ */ e(n, { href: c.href, className: "breadcrumb__link", children: d }) : /* @__PURE__ */ e("a", { href: c.href, className: "breadcrumb__link", children: d });
   };
-  return /* @__PURE__ */ e("nav", { "aria-label": "Breadcrumb", className: l, children: /* @__PURE__ */ _("ol", { className: "breadcrumb__list", children: [
-    t.map((c, m) => {
-      const d = m === t.length - 1, h = m < t.length - 1;
-      return /* @__PURE__ */ _("li", { className: "breadcrumb__item", children: [
+  return /* @__PURE__ */ e("nav", { "aria-label": "Breadcrumb", className: l, children: /* @__PURE__ */ u("ol", { className: "breadcrumb__list", children: [
+    r.map((c, m) => {
+      const d = m === r.length - 1, h = m < r.length - 1;
+      return /* @__PURE__ */ u("li", { className: "breadcrumb__item", children: [
         o(c, d),
         h && /* @__PURE__ */ e("span", { className: "breadcrumb__separator", "aria-hidden": "true", children: a })
       ] }, `${c.href}-${c.label}`);
     }),
-    t.length > 0 && /* @__PURE__ */ e("li", { className: "breadcrumb__item", children: /* @__PURE__ */ e("span", { className: "breadcrumb__separator", "aria-hidden": "true", children: a }) }),
+    r.length > 0 && /* @__PURE__ */ e("li", { className: "breadcrumb__item", children: /* @__PURE__ */ e("span", { className: "breadcrumb__separator", "aria-hidden": "true", children: a }) }),
     /* @__PURE__ */ e("li", { className: "breadcrumb__item breadcrumb__item--current", "aria-current": "page", children: /* @__PURE__ */ e("span", { className: "breadcrumb__current", children: i }) })
   ] }) });
 }, ae = ({
-  scanlines: t = !0,
+  scanlines: r = !0,
   glow: i = !0,
-  flicker: s = !0,
+  flicker: t = !0,
   intensity: a = 1,
   className: n = ""
 }) => {
-  const r = [
+  const s = [
     "retro-effects",
     n
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("div", { className: r, style: { "--retro-intensity": a }, "aria-hidden": "true", children: [
-    t && /* @__PURE__ */ e("div", { className: "retro-effects__scanlines" }),
+  return /* @__PURE__ */ u("div", { className: s, style: { "--retro-intensity": a }, "aria-hidden": "true", children: [
+    r && /* @__PURE__ */ e("div", { className: "retro-effects__scanlines" }),
     i && /* @__PURE__ */ e("div", { className: "retro-effects__glow" }),
-    s && /* @__PURE__ */ e("div", { className: "retro-effects__flicker" })
+    t && /* @__PURE__ */ e("div", { className: "retro-effects__flicker" })
   ] });
 }, ne = ({
-  shape: t = "circle",
+  shape: r = "circle",
   variant: i = "default",
-  isActive: s = !1,
+  isActive: t = !1,
   label: a,
   labelPosition: n = "left",
-  size: r = "medium",
+  size: s = "medium",
   className: l = "",
   onClick: o,
   ...c
 }) => {
   const m = [
     "timeline-node",
-    `timeline-node--${t}`,
-    `timeline-node--${i}`,
     `timeline-node--${r}`,
+    `timeline-node--${i}`,
+    `timeline-node--${s}`,
     `timeline-node--label-${n}`,
-    s && "timeline-node--active",
+    t && "timeline-node--active",
     o && "timeline-node--interactive",
     l
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _(
+  return /* @__PURE__ */ u(
     "div",
     {
       className: m,
       onClick: () => {
         o && o();
       },
-      onKeyDown: (b) => {
-        o && (b.key === "Enter" || b.key === " ") && (b.preventDefault(), o());
+      onKeyDown: (p) => {
+        o && (p.key === "Enter" || p.key === " ") && (p.preventDefault(), o());
       },
       role: o ? "button" : void 0,
       tabIndex: o ? 0 : void 0,
-      "aria-pressed": o ? s : void 0,
+      "aria-pressed": o ? t : void 0,
       ...c,
       children: [
         a && n === "left" && /* @__PURE__ */ e("span", { className: "timeline-node__label timeline-node__label--left", children: a }),
@@ -667,18 +667,18 @@ const X = ({
     }
   );
 }, te = ({
-  isOpen: t,
+  isOpen: r,
   onClose: i,
-  title: s,
+  title: t,
   children: a,
   footer: n,
-  className: r = ""
+  className: s = ""
 }) => {
   const l = S(null), o = K();
-  B(() => {
+  D(() => {
     const d = l.current;
-    d && (t && !d.open ? d.showModal() : !t && d.open && d.close());
-  }, [t]);
+    d && (r && !d.open ? d.showModal() : !r && d.open && d.close());
+  }, [r]);
   const c = () => {
     i();
   }, m = (d) => {
@@ -689,13 +689,13 @@ const X = ({
       "dialog",
       {
         ref: l,
-        className: `modal ${r}`.trim(),
+        className: `modal ${s}`.trim(),
         "aria-labelledby": o,
         onClose: c,
         onClick: m,
-        children: /* @__PURE__ */ _("div", { className: "modal__container", children: [
-          /* @__PURE__ */ _("header", { className: "modal__header", children: [
-            /* @__PURE__ */ e("h2", { id: o, className: "modal__title", children: s }),
+        children: /* @__PURE__ */ u("div", { className: "modal__container", children: [
+          /* @__PURE__ */ u("header", { className: "modal__header", children: [
+            /* @__PURE__ */ e("h2", { id: o, className: "modal__title", children: t }),
             /* @__PURE__ */ e(
               "button",
               {
@@ -714,25 +714,80 @@ const X = ({
     ),
     document.body
   );
-}, re = "0.3.0";
+}, re = ({
+  label: r,
+  value: i,
+  trend: t,
+  trendValue: a,
+  size: n = "medium",
+  className: s = "",
+  ...l
+}) => {
+  const o = [
+    "stat",
+    `stat--${n}`,
+    s
+  ].filter(Boolean).join(" "), c = [
+    "stat__trend",
+    t && `stat__trend--${t}`
+  ].filter(Boolean).join(" "), m = () => {
+    switch (t) {
+      case "up":
+        return "▲";
+      case "down":
+        return "▼";
+      case "neutral":
+        return "►";
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ u("div", { className: o, ...l, children: [
+    /* @__PURE__ */ e("span", { className: "stat__label", children: r }),
+    /* @__PURE__ */ e("span", { className: "stat__value", children: i }),
+    t && /* @__PURE__ */ u(
+      "span",
+      {
+        className: c,
+        "aria-label": `Trend: ${(() => {
+          switch (t) {
+            case "up":
+              return "increasing";
+            case "down":
+              return "decreasing";
+            case "neutral":
+              return "unchanged";
+            default:
+              return "";
+          }
+        })()}${a ? `, ${a}` : ""}`,
+        children: [
+          /* @__PURE__ */ e("span", { className: "stat__trend-icon", "aria-hidden": "true", children: m() }),
+          a && /* @__PURE__ */ e("span", { className: "stat__trend-value", children: a })
+        ]
+      }
+    )
+  ] });
+}, se = "0.3.5";
 export {
-  O as AccordionFill,
-  W as Alert,
+  Q as AccordionFill,
+  O as Alert,
   Z as Badge,
   ee as Breadcrumb,
-  Q as Button,
-  G as Card,
-  H as Checkbox,
-  J as CommandPrompt,
+  G as Button,
+  H as Card,
+  J as Checkbox,
+  P as CommandPrompt,
   k as Icon,
   T as Input,
   te as Modal,
-  P as Progress,
+  V as Progress,
   ae as RetroEffects,
   M as Section,
+  re as Stat,
   F as Switch,
   Y as Tabs,
   X as Terminal,
   ne as TimelineNode,
-  re as version
+  se as version
 };

package/dist/index.umd.js

@@ -1,6 +1,6 @@
-(function(m,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","react-dom"],e):(m=typeof globalThis<"u"?globalThis:m||self,e(m.eidotter={},m.jsxRuntime,m.React,m.ReactDOM))})(this,(function(m,e,b,E){"use strict";const w=({name:r,size:c="L",className:t="",onClick:a,color:s,role:l})=>{const n=process.env.NODE_ENV==="production"?"/eiDotter":"";return e.jsx("svg",{className:`icon ${c==="L"?"icon--l":"icon--s"} ${t} ${l?`icon--${l}`:""}`.trim(),onClick:a,role:l,"aria-label":`${r} icon`,style:s?{color:s}:void 0,children:e.jsx("use",{href:`${n}/icons/sprites.svg#${r}`})})},j={info:"Info",success:"Done",warning:"Warning",error:"Error"},z=({size:r="L",type:c="info",title:t="Notification Title",children:a="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit amet diam neque bibendum. Quisque in praesent sit erat...",onClose:s,onClickHere:l,className:n=""})=>e.jsxs("div",{className:`alert alert--${r.toLowerCase()} alert--${c} ${n}`.trim(),children:[e.jsxs("div",{className:"alert__header",children:[e.jsx("div",{className:"alert__icon",children:e.jsx(w,{name:j[c],size:"L","aria-label":`${c} alert`})}),e.jsx("div",{className:"alert__title",children:t}),s&&e.jsx("button",{className:"alert__close",onClick:s,"aria-label":"Close alert",children:e.jsx(w,{name:"Close",size:"S"})})]}),e.jsx("div",{className:"alert__content",children:e.jsxs("div",{className:"alert__message",children:[e.jsx("span",{children:a}),l&&e.jsx("button",{className:"alert__link",onClick:l,"aria-label":"Click for more information",children:"Click here"})]})})]}),D=({title:r,children:c,defaultExpanded:t=!1,isHovered:a=!1,isActive:s=!1,onToggle:l})=>{const[n,o]=b.useState(t);b.useEffect(()=>{o(t)},[t]);const i=()=>{const _=!n;o(_),l==null||l(_)};return e.jsxs("div",{className:`
+(function(h,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","react-dom"],e):(h=typeof globalThis<"u"?globalThis:h||self,e(h.eidotter={},h.jsxRuntime,h.React,h.ReactDOM))})(this,(function(h,e,b,j){"use strict";const w=({name:l,size:c="L",className:r="",onClick:a,color:s,role:n})=>{const t=process.env.NODE_ENV==="production"?"/eiDotter":"";return e.jsx("svg",{className:`icon ${c==="L"?"icon--l":"icon--s"} ${r} ${n?`icon--${n}`:""}`.trim(),onClick:a,role:n,"aria-label":`${l} icon`,style:s?{color:s}:void 0,children:e.jsx("use",{href:`${t}/icons/sprites.svg#${l}`})})},E={info:"Info",success:"Done",warning:"Warning",error:"Error"},z=({size:l="L",type:c="info",title:r="Notification Title",children:a="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit amet diam neque bibendum. Quisque in praesent sit erat...",onClose:s,onClickHere:n,className:t=""})=>e.jsxs("div",{className:`alert alert--${l.toLowerCase()} alert--${c} ${t}`.trim(),children:[e.jsxs("div",{className:"alert__header",children:[e.jsx("div",{className:"alert__icon",children:e.jsx(w,{name:E[c],size:"L","aria-label":`${c} alert`})}),e.jsx("div",{className:"alert__title",children:r}),s&&e.jsx("button",{className:"alert__close",onClick:s,"aria-label":"Close alert",children:e.jsx(w,{name:"Close",size:"S"})})]}),e.jsx("div",{className:"alert__content",children:e.jsxs("div",{className:"alert__message",children:[e.jsx("span",{children:a}),n&&e.jsx("button",{className:"alert__link",onClick:n,"aria-label":"Click for more information",children:"Click here"})]})})]}),D=({title:l,children:c,defaultExpanded:r=!1,isHovered:a=!1,isActive:s=!1,onToggle:n})=>{const[t,o]=b.useState(r);b.useEffect(()=>{o(r)},[r]);const i=()=>{const _=!t;o(_),n==null||n(_)};return e.jsxs("div",{className:`
         section
-        ${n?"section--expanded":""}
+        ${t?"section--expanded":""}
         ${a?"section--hover":""}
         ${s?"section--active":""}
-      `.trim(),children:[e.jsxs("button",{className:"section__header",onClick:i,"aria-expanded":n,children:[e.jsx("div",{className:"section__title",children:r}),e.jsx("div",{className:"section__icon",children:e.jsx(w,{name:n?"Chevron Up":"Chevron Down",size:"S"})})]}),n&&e.jsx("div",{className:"section__content",children:c})]})},A=({sections:r,defaultExpandedIndex:c=-1})=>{const[t,a]=b.useState(c),s=(l,n)=>{a(n?l:-1)};return e.jsx("div",{className:"accordion-fill",children:r.map((l,n)=>e.jsx(D,{title:l.title,defaultExpanded:n===c,onToggle:o=>s(n,o),children:l.content},n))})},x=({variant:r="primary",size:c="medium",type:t="button",disabled:a=!1,loading:s=!1,children:l,onClick:n,className:o="",fullWidth:i=!1,..._})=>{const d=p=>{a||s||n==null||n(p)},f=["button",`button--${r}`,`button--${c}`,a&&"button--disabled",s&&"button--loading",i&&"button--full-width",o].filter(Boolean).join(" ");return e.jsxs("button",{type:t,className:f,onClick:d,disabled:a||s,"aria-disabled":a||s,..._,children:[s&&e.jsx("span",{className:"button__loading-indicator","aria-hidden":"true",children:"█"}),e.jsx("span",{className:`button__content ${s?"button__content--loading":""}`,children:l})]})},K=({title:r,children:c,footer:t,variant:a="default",className:s="",...l})=>{const n=["card",`card--${a}`,s].filter(Boolean).join(" ");return e.jsxs("div",{className:n,...l,children:[r&&e.jsx("div",{className:"card__header",children:e.jsx("span",{className:"card__title",children:r})}),e.jsx("div",{className:"card__body",children:c}),t&&e.jsx("div",{className:"card__footer",children:t})]})},M=({checked:r,defaultChecked:c,onChange:t,label:a,disabled:s=!1,name:l,value:n,className:o="","aria-label":i,..._})=>{const d=p=>{s||t==null||t(p.target.checked)},f=["checkbox",s&&"checkbox--disabled",o].filter(Boolean).join(" ");return e.jsxs("label",{className:f,children:[e.jsx("input",{type:"checkbox",className:"checkbox__input",checked:r,defaultChecked:c,onChange:d,disabled:s,name:l,value:n,"aria-label":i||a,..._}),e.jsx("span",{className:"checkbox__box","aria-hidden":"true"}),a&&e.jsx("span",{className:"checkbox__label",children:a})]})},T=({prompt:r="C:\\>",onCommand:c,autoFocus:t=!1,className:a="",placeholder:s,disabled:l=!1})=>{const[n,o]=b.useState(""),i=b.useRef(null);b.useEffect(()=>{t&&i.current&&i.current.focus()},[t]);const _=f=>{f.key==="Enter"&&n.trim()&&!l&&(c(n.trim()),o(""))},d=()=>{!l&&i.current&&i.current.focus()};return e.jsxs("div",{className:`command-prompt ${l?"command-prompt--disabled":""} ${a}`.trim(),onClick:d,role:"textbox","aria-label":"Command prompt",children:[e.jsx("span",{className:"command-prompt__prompt","aria-hidden":"true",children:r}),e.jsx("input",{ref:i,className:"command-prompt__input",value:n,onChange:f=>o(f.target.value),onKeyDown:_,autoFocus:t,spellCheck:!1,autoComplete:"off",autoCapitalize:"off",autoCorrect:"off",placeholder:s,disabled:l,"aria-label":"Command input"}),e.jsx("span",{className:"command-prompt__cursor","aria-hidden":"true",children:"█"})]})},L=({value:r,max:c=100,variant:t="default",size:a="medium",showLabel:s=!1,className:l="","aria-label":n,...o})=>{const i=Math.min(100,Math.max(0,r/c*100)),_=Math.round(i/5),d=20-_,f=["progress",`progress--${t}`,`progress--${a}`,l].filter(Boolean).join(" ");return e.jsxs("div",{className:f,role:"progressbar","aria-valuenow":r,"aria-valuemin":0,"aria-valuemax":c,"aria-label":n||`Progress: ${Math.round(i)}%`,...o,children:[e.jsxs("span",{className:"progress__bar",children:[e.jsx("span",{className:"progress__fill",children:"█".repeat(_)}),e.jsx("span",{className:"progress__empty",children:"░".repeat(d)})]}),s&&e.jsxs("span",{className:"progress__label",children:[Math.round(i),"%"]})]})},I=b.forwardRef(({variant:r="default",className:c="",disabled:t,...a},s)=>{const l=["input",`input--${r}`,t&&"input--disabled",c].filter(Boolean).join(" ");return e.jsx("input",{ref:s,className:l,disabled:t,"aria-invalid":r==="error",...a})});I.displayName="Input";const q=({size:r="medium",title:c="MS-DOS Terminal",state:t="active",resizable:a=!0,minimizable:s=!0,maximizable:l=!0,closeable:n=!0,children:o,onMinimize:i,onMaximize:_,onClose:d,onFocus:f,className:p="",autoFocus:C=!1})=>{const[y,h]=b.useState(t),[u,N]=b.useState(!1),k=b.useRef(null);b.useEffect(()=>{C&&k.current&&k.current.focus()},[C]);const v=()=>{h("minimized"),i==null||i()},S=()=>{N(!u),_==null||_()},$=()=>{d==null||d()},B=()=>{h("active"),f==null||f()},H=g=>{g.altKey&&g.key==="F4"&&n&&(g.preventDefault(),$())};return y==="minimized"?e.jsx("div",{className:`terminal terminal--minimized ${p}`.trim(),onClick:B,role:"button",tabIndex:0,"aria-label":`Restore ${c} window`,onKeyDown:g=>g.key==="Enter"&&B(),children:e.jsxs("div",{className:"terminal__taskbar-item",children:[e.jsx(w,{name:"App",size:"S"}),e.jsx("span",{className:"terminal__taskbar-title",children:c})]})}):e.jsxs("div",{ref:k,className:`terminal terminal--${r} terminal--${y} ${u?"terminal--maximized":""} ${p}`.trim(),tabIndex:0,role:"dialog","aria-label":`${c} terminal window`,onFocus:B,onKeyDown:H,children:[e.jsxs("div",{className:"terminal__title-bar",children:[e.jsxs("div",{className:"terminal__title",children:[e.jsx(w,{name:"App",size:"S","aria-hidden":"true"}),e.jsx("span",{className:"terminal__title-text",children:c})]}),e.jsxs("div",{className:"terminal__controls",children:[s&&e.jsx("button",{className:"terminal__control terminal__control--minimize",onClick:v,"aria-label":"Minimize window",title:"Minimize",children:e.jsx(w,{name:"Cancel",size:"S"})}),l&&e.jsx("button",{className:"terminal__control terminal__control--maximize",onClick:S,"aria-label":u?"Restore window":"Maximize window",title:u?"Restore":"Maximize",children:e.jsx(w,{name:u?"Fullscreen":"Add",size:"S"})}),n&&e.jsx("button",{className:"terminal__control terminal__control--close",onClick:$,"aria-label":"Close window",title:"Close",children:e.jsx(w,{name:"Close",size:"S"})})]})]}),e.jsx("div",{className:"terminal__content",role:"main",children:o||e.jsx("div",{className:"terminal__default-content",children:e.jsxs("div",{className:"terminal__prompt",children:[e.jsx("span",{className:"terminal__path",children:"C:\\\\>"}),e.jsx("span",{className:"terminal__cursor",children:"█"})]})})}),a&&e.jsx("div",{className:"terminal__resize-handle","aria-hidden":"true"})]})},O=({tabs:r,variant:c="underline",size:t="medium",activeTab:a,defaultActiveTab:s,onTabChange:l,className:n="",...o})=>{var y;const[i,_]=b.useState(s||((y=r[0])==null?void 0:y.id)||""),d=a!==void 0?a:i,f=b.useCallback((h,u)=>{u||(a===void 0&&_(h),l==null||l(h))},[a,l]),p=b.useCallback((h,u)=>{var S;const N=r.filter($=>!$.disabled),k=N.findIndex($=>$.id===r[u].id);let v=null;switch(h.key){case"ArrowLeft":case"ArrowUp":h.preventDefault(),v=k>0?k-1:N.length-1;break;case"ArrowRight":case"ArrowDown":h.preventDefault(),v=k<N.length-1?k+1:0;break;case"Home":h.preventDefault(),v=0;break;case"End":h.preventDefault(),v=N.length-1;break}if(v!==null){const $=N[v];f($.id,$.disabled),(S=document.querySelectorAll('[role="tab"]:not([disabled])')[v])==null||S.focus()}},[r,f]),C=["tabs",`tabs--${c}`,`tabs--${t}`,n].filter(Boolean).join(" ");return e.jsx("div",{className:C,role:"tablist",...o,children:r.map((h,u)=>{const N=d===h.id,k=["tabs__tab",N&&"tabs__tab--active",h.disabled&&"tabs__tab--disabled"].filter(Boolean).join(" ");return e.jsx("button",{role:"tab",id:`tab-${h.id}`,"aria-selected":N,tabIndex:N?0:-1,disabled:h.disabled,className:k,onClick:()=>f(h.id,h.disabled),onKeyDown:v=>p(v,u),children:h.label},h.id)})})},P=({variant:r="default",size:c="medium",dot:t=!1,children:a,className:s="",...l})=>{const n=["badge",`badge--${r}`,`badge--${c}`,t&&"badge--with-dot",s].filter(Boolean).join(" ");return e.jsxs("span",{className:n,...l,children:[t&&e.jsx("span",{className:"badge__dot","aria-hidden":"true"}),e.jsx("span",{className:"badge__content",children:a})]})},U=({checked:r,defaultChecked:c=!1,onCheckedChange:t,disabled:a=!1,name:s,value:l,className:n="",...o})=>{const[i,_]=b.useState(c),d=r!==void 0,f=d?r:i,p=()=>{if(a)return;const h=!f;d||_(h),t==null||t(h)},C=h=>{(h.key===" "||h.key==="Enter")&&(h.preventDefault(),p())},y=["switch",f&&"switch--checked",a&&"switch--disabled",n].filter(Boolean).join(" ");return e.jsxs("button",{type:"button",role:"switch","aria-checked":f,"aria-disabled":a,className:y,onClick:p,onKeyDown:C,disabled:a,...o,children:[e.jsx("span",{className:"switch__track",children:e.jsx("span",{className:"switch__thumb"})}),s&&e.jsx("input",{type:"hidden",name:s,value:f?l||"on":""})]})},V=({trail:r=[],currentLabel:c,showBackArrow:t=!0,separator:a="/",linkComponent:s,className:l=""})=>{const n=["breadcrumb",l].filter(Boolean).join(" "),o=(i,_)=>{const d=e.jsxs(e.Fragment,{children:[t&&_&&e.jsx("span",{className:"breadcrumb__back-arrow","aria-hidden":"true",children:"<"}),e.jsx("span",{children:i.label})]});return s?e.jsx(s,{href:i.href,className:"breadcrumb__link",children:d}):e.jsx("a",{href:i.href,className:"breadcrumb__link",children:d})};return e.jsx("nav",{"aria-label":"Breadcrumb",className:n,children:e.jsxs("ol",{className:"breadcrumb__list",children:[r.map((i,_)=>{const d=_===r.length-1,f=_<r.length-1;return e.jsxs("li",{className:"breadcrumb__item",children:[o(i,d),f&&e.jsx("span",{className:"breadcrumb__separator","aria-hidden":"true",children:a})]},`${i.href}-${i.label}`)}),r.length>0&&e.jsx("li",{className:"breadcrumb__item",children:e.jsx("span",{className:"breadcrumb__separator","aria-hidden":"true",children:a})}),e.jsx("li",{className:"breadcrumb__item breadcrumb__item--current","aria-current":"page",children:e.jsx("span",{className:"breadcrumb__current",children:c})})]})})},W=({scanlines:r=!0,glow:c=!0,flicker:t=!0,intensity:a=1,className:s=""})=>{const l=["retro-effects",s].filter(Boolean).join(" "),n={"--retro-intensity":a};return e.jsxs("div",{className:l,style:n,"aria-hidden":"true",children:[r&&e.jsx("div",{className:"retro-effects__scanlines"}),c&&e.jsx("div",{className:"retro-effects__glow"}),t&&e.jsx("div",{className:"retro-effects__flicker"})]})},Q=({shape:r="circle",variant:c="default",isActive:t=!1,label:a,labelPosition:s="left",size:l="medium",className:n="",onClick:o,...i})=>{const _=["timeline-node",`timeline-node--${r}`,`timeline-node--${c}`,`timeline-node--${l}`,`timeline-node--label-${s}`,t&&"timeline-node--active",o&&"timeline-node--interactive",n].filter(Boolean).join(" "),d=()=>{o&&o()},f=p=>{o&&(p.key==="Enter"||p.key===" ")&&(p.preventDefault(),o())};return e.jsxs("div",{className:_,onClick:d,onKeyDown:f,role:o?"button":void 0,tabIndex:o?0:void 0,"aria-pressed":o?t:void 0,...i,children:[a&&s==="left"&&e.jsx("span",{className:"timeline-node__label timeline-node__label--left",children:a}),a&&s==="top"&&e.jsx("span",{className:"timeline-node__label timeline-node__label--top",children:a}),e.jsx("span",{className:"timeline-node__marker","aria-hidden":"true"}),a&&s==="right"&&e.jsx("span",{className:"timeline-node__label timeline-node__label--right",children:a}),a&&s==="bottom"&&e.jsx("span",{className:"timeline-node__label timeline-node__label--bottom",children:a})]})},F=({isOpen:r,onClose:c,title:t,children:a,footer:s,className:l=""})=>{const n=b.useRef(null),o=b.useId();b.useEffect(()=>{const d=n.current;d&&(r&&!d.open?d.showModal():!r&&d.open&&d.close())},[r]);const i=()=>{c()},_=d=>{d.target===n.current&&c()};return E.createPortal(e.jsx("dialog",{ref:n,className:`modal ${l}`.trim(),"aria-labelledby":o,onClose:i,onClick:_,children:e.jsxs("div",{className:"modal__container",children:[e.jsxs("header",{className:"modal__header",children:[e.jsx("h2",{id:o,className:"modal__title",children:t}),e.jsx("button",{type:"button",className:"modal__close",onClick:c,"aria-label":"Close modal",children:e.jsx(w,{name:"Close",size:"S"})})]}),e.jsx("div",{className:"modal__body",children:a}),s&&e.jsx("footer",{className:"modal__footer",children:s})]})}),document.body)},G="0.3.0";m.AccordionFill=A,m.Alert=z,m.Badge=P,m.Breadcrumb=V,m.Button=x,m.Card=K,m.Checkbox=M,m.CommandPrompt=T,m.Icon=w,m.Input=I,m.Modal=F,m.Progress=L,m.RetroEffects=W,m.Section=D,m.Switch=U,m.Tabs=O,m.Terminal=q,m.TimelineNode=Q,m.version=G,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));
+      `.trim(),children:[e.jsxs("button",{className:"section__header",onClick:i,"aria-expanded":t,children:[e.jsx("div",{className:"section__title",children:l}),e.jsx("div",{className:"section__icon",children:e.jsx(w,{name:t?"Chevron Up":"Chevron Down",size:"S"})})]}),t&&e.jsx("div",{className:"section__content",children:c})]})},A=({sections:l,defaultExpandedIndex:c=-1})=>{const[r,a]=b.useState(c),s=(n,t)=>{a(t?n:-1)};return e.jsx("div",{className:"accordion-fill",children:l.map((n,t)=>e.jsx(D,{title:n.title,defaultExpanded:t===c,onToggle:o=>s(t,o),children:n.content},t))})},x=({variant:l="primary",size:c="medium",type:r="button",disabled:a=!1,loading:s=!1,children:n,onClick:t,className:o="",fullWidth:i=!1,..._})=>{const d=p=>{a||s||t==null||t(p)},f=["button",`button--${l}`,`button--${c}`,a&&"button--disabled",s&&"button--loading",i&&"button--full-width",o].filter(Boolean).join(" ");return e.jsxs("button",{type:r,className:f,onClick:d,disabled:a||s,"aria-disabled":a||s,..._,children:[s&&e.jsx("span",{className:"button__loading-indicator","aria-hidden":"true",children:"█"}),e.jsx("span",{className:`button__content ${s?"button__content--loading":""}`,children:n})]})},T=({title:l,children:c,footer:r,variant:a="default",className:s="",...n})=>{const t=["card",`card--${a}`,s].filter(Boolean).join(" ");return e.jsxs("div",{className:t,...n,children:[l&&e.jsx("div",{className:"card__header",children:e.jsx("span",{className:"card__title",children:l})}),e.jsx("div",{className:"card__body",children:c}),r&&e.jsx("div",{className:"card__footer",children:r})]})},K=({checked:l,defaultChecked:c,onChange:r,label:a,disabled:s=!1,name:n,value:t,className:o="","aria-label":i,..._})=>{const d=p=>{s||r==null||r(p.target.checked)},f=["checkbox",s&&"checkbox--disabled",o].filter(Boolean).join(" ");return e.jsxs("label",{className:f,children:[e.jsx("input",{type:"checkbox",className:"checkbox__input",checked:l,defaultChecked:c,onChange:d,disabled:s,name:n,value:t,"aria-label":i||a,..._}),e.jsx("span",{className:"checkbox__box","aria-hidden":"true"}),a&&e.jsx("span",{className:"checkbox__label",children:a})]})},M=({prompt:l="C:\\>",onCommand:c,autoFocus:r=!1,className:a="",placeholder:s,disabled:n=!1})=>{const[t,o]=b.useState(""),i=b.useRef(null);b.useEffect(()=>{r&&i.current&&i.current.focus()},[r]);const _=f=>{f.key==="Enter"&&t.trim()&&!n&&(c(t.trim()),o(""))},d=()=>{!n&&i.current&&i.current.focus()};return e.jsxs("div",{className:`command-prompt ${n?"command-prompt--disabled":""} ${a}`.trim(),onClick:d,role:"textbox","aria-label":"Command prompt",children:[e.jsx("span",{className:"command-prompt__prompt","aria-hidden":"true",children:l}),e.jsx("input",{ref:i,className:"command-prompt__input",value:t,onChange:f=>o(f.target.value),onKeyDown:_,autoFocus:r,spellCheck:!1,autoComplete:"off",autoCapitalize:"off",autoCorrect:"off",placeholder:s,disabled:n,"aria-label":"Command input"}),e.jsx("span",{className:"command-prompt__cursor","aria-hidden":"true",children:"█"})]})},L=({value:l,max:c=100,variant:r="default",size:a="medium",showLabel:s=!1,className:n="","aria-label":t,...o})=>{const i=Math.min(100,Math.max(0,l/c*100)),_=Math.round(i/5),d=20-_,f=["progress",`progress--${r}`,`progress--${a}`,n].filter(Boolean).join(" ");return e.jsxs("div",{className:f,role:"progressbar","aria-valuenow":l,"aria-valuemin":0,"aria-valuemax":c,"aria-label":t||`Progress: ${Math.round(i)}%`,...o,children:[e.jsxs("span",{className:"progress__bar",children:[e.jsx("span",{className:"progress__fill",children:"█".repeat(_)}),e.jsx("span",{className:"progress__empty",children:"░".repeat(d)})]}),s&&e.jsxs("span",{className:"progress__label",children:[Math.round(i),"%"]})]})},I=b.forwardRef(({variant:l="default",className:c="",disabled:r,...a},s)=>{const n=["input",`input--${l}`,r&&"input--disabled",c].filter(Boolean).join(" ");return e.jsx("input",{ref:s,className:n,disabled:r,"aria-invalid":l==="error",...a})});I.displayName="Input";const q=({size:l="medium",title:c="MS-DOS Terminal",state:r="active",resizable:a=!0,minimizable:s=!0,maximizable:n=!0,closeable:t=!0,children:o,onMinimize:i,onMaximize:_,onClose:d,onFocus:f,className:p="",autoFocus:C=!1})=>{const[y,m]=b.useState(r),[u,N]=b.useState(!1),k=b.useRef(null);b.useEffect(()=>{C&&k.current&&k.current.focus()},[C]);const v=()=>{m("minimized"),i==null||i()},S=()=>{N(!u),_==null||_()},$=()=>{d==null||d()},B=()=>{m("active"),f==null||f()},V=g=>{g.altKey&&g.key==="F4"&&t&&(g.preventDefault(),$())};return y==="minimized"?e.jsx("div",{className:`terminal terminal--minimized ${p}`.trim(),onClick:B,role:"button",tabIndex:0,"aria-label":`Restore ${c} window`,onKeyDown:g=>g.key==="Enter"&&B(),children:e.jsxs("div",{className:"terminal__taskbar-item",children:[e.jsx(w,{name:"App",size:"S"}),e.jsx("span",{className:"terminal__taskbar-title",children:c})]})}):e.jsxs("div",{ref:k,className:`terminal terminal--${l} terminal--${y} ${u?"terminal--maximized":""} ${p}`.trim(),tabIndex:0,role:"dialog","aria-label":`${c} terminal window`,onFocus:B,onKeyDown:V,children:[e.jsxs("div",{className:"terminal__title-bar",children:[e.jsxs("div",{className:"terminal__title",children:[e.jsx(w,{name:"App",size:"S","aria-hidden":"true"}),e.jsx("span",{className:"terminal__title-text",children:c})]}),e.jsxs("div",{className:"terminal__controls",children:[s&&e.jsx("button",{className:"terminal__control terminal__control--minimize",onClick:v,"aria-label":"Minimize window",title:"Minimize",children:e.jsx(w,{name:"Cancel",size:"S"})}),n&&e.jsx("button",{className:"terminal__control terminal__control--maximize",onClick:S,"aria-label":u?"Restore window":"Maximize window",title:u?"Restore":"Maximize",children:e.jsx(w,{name:u?"Fullscreen":"Add",size:"S"})}),t&&e.jsx("button",{className:"terminal__control terminal__control--close",onClick:$,"aria-label":"Close window",title:"Close",children:e.jsx(w,{name:"Close",size:"S"})})]})]}),e.jsx("div",{className:"terminal__content",role:"main",children:o||e.jsx("div",{className:"terminal__default-content",children:e.jsxs("div",{className:"terminal__prompt",children:[e.jsx("span",{className:"terminal__path",children:"C:\\\\>"}),e.jsx("span",{className:"terminal__cursor",children:"█"})]})})}),a&&e.jsx("div",{className:"terminal__resize-handle","aria-hidden":"true"})]})},O=({tabs:l,variant:c="underline",size:r="medium",activeTab:a,defaultActiveTab:s,onTabChange:n,className:t="",...o})=>{var y;const[i,_]=b.useState(s||((y=l[0])==null?void 0:y.id)||""),d=a!==void 0?a:i,f=b.useCallback((m,u)=>{u||(a===void 0&&_(m),n==null||n(m))},[a,n]),p=b.useCallback((m,u)=>{var S;const N=l.filter($=>!$.disabled),k=N.findIndex($=>$.id===l[u].id);let v=null;switch(m.key){case"ArrowLeft":case"ArrowUp":m.preventDefault(),v=k>0?k-1:N.length-1;break;case"ArrowRight":case"ArrowDown":m.preventDefault(),v=k<N.length-1?k+1:0;break;case"Home":m.preventDefault(),v=0;break;case"End":m.preventDefault(),v=N.length-1;break}if(v!==null){const $=N[v];f($.id,$.disabled),(S=document.querySelectorAll('[role="tab"]:not([disabled])')[v])==null||S.focus()}},[l,f]),C=["tabs",`tabs--${c}`,`tabs--${r}`,t].filter(Boolean).join(" ");return e.jsx("div",{className:C,role:"tablist",...o,children:l.map((m,u)=>{const N=d===m.id,k=["tabs__tab",N&&"tabs__tab--active",m.disabled&&"tabs__tab--disabled"].filter(Boolean).join(" ");return e.jsx("button",{role:"tab",id:`tab-${m.id}`,"aria-selected":N,tabIndex:N?0:-1,disabled:m.disabled,className:k,onClick:()=>f(m.id,m.disabled),onKeyDown:v=>p(v,u),children:m.label},m.id)})})},P=({variant:l="default",size:c="medium",dot:r=!1,children:a,className:s="",...n})=>{const t=["badge",`badge--${l}`,`badge--${c}`,r&&"badge--with-dot",s].filter(Boolean).join(" ");return e.jsxs("span",{className:t,...n,children:[r&&e.jsx("span",{className:"badge__dot","aria-hidden":"true"}),e.jsx("span",{className:"badge__content",children:a})]})},U=({checked:l,defaultChecked:c=!1,onCheckedChange:r,disabled:a=!1,name:s,value:n,className:t="",...o})=>{const[i,_]=b.useState(c),d=l!==void 0,f=d?l:i,p=()=>{if(a)return;const m=!f;d||_(m),r==null||r(m)},C=m=>{(m.key===" "||m.key==="Enter")&&(m.preventDefault(),p())},y=["switch",f&&"switch--checked",a&&"switch--disabled",t].filter(Boolean).join(" ");return e.jsxs("button",{type:"button",role:"switch","aria-checked":f,"aria-disabled":a,className:y,onClick:p,onKeyDown:C,disabled:a,...o,children:[e.jsx("span",{className:"switch__track",children:e.jsx("span",{className:"switch__thumb"})}),s&&e.jsx("input",{type:"hidden",name:s,value:f?n||"on":""})]})},W=({trail:l=[],currentLabel:c,showBackArrow:r=!0,separator:a="/",linkComponent:s,className:n=""})=>{const t=["breadcrumb",n].filter(Boolean).join(" "),o=(i,_)=>{const d=e.jsxs(e.Fragment,{children:[r&&_&&e.jsx("span",{className:"breadcrumb__back-arrow","aria-hidden":"true",children:"<"}),e.jsx("span",{children:i.label})]});return s?e.jsx(s,{href:i.href,className:"breadcrumb__link",children:d}):e.jsx("a",{href:i.href,className:"breadcrumb__link",children:d})};return e.jsx("nav",{"aria-label":"Breadcrumb",className:t,children:e.jsxs("ol",{className:"breadcrumb__list",children:[l.map((i,_)=>{const d=_===l.length-1,f=_<l.length-1;return e.jsxs("li",{className:"breadcrumb__item",children:[o(i,d),f&&e.jsx("span",{className:"breadcrumb__separator","aria-hidden":"true",children:a})]},`${i.href}-${i.label}`)}),l.length>0&&e.jsx("li",{className:"breadcrumb__item",children:e.jsx("span",{className:"breadcrumb__separator","aria-hidden":"true",children:a})}),e.jsx("li",{className:"breadcrumb__item breadcrumb__item--current","aria-current":"page",children:e.jsx("span",{className:"breadcrumb__current",children:c})})]})})},Q=({scanlines:l=!0,glow:c=!0,flicker:r=!0,intensity:a=1,className:s=""})=>{const n=["retro-effects",s].filter(Boolean).join(" "),t={"--retro-intensity":a};return e.jsxs("div",{className:n,style:t,"aria-hidden":"true",children:[l&&e.jsx("div",{className:"retro-effects__scanlines"}),c&&e.jsx("div",{className:"retro-effects__glow"}),r&&e.jsx("div",{className:"retro-effects__flicker"})]})},F=({shape:l="circle",variant:c="default",isActive:r=!1,label:a,labelPosition:s="left",size:n="medium",className:t="",onClick:o,...i})=>{const _=["timeline-node",`timeline-node--${l}`,`timeline-node--${c}`,`timeline-node--${n}`,`timeline-node--label-${s}`,r&&"timeline-node--active",o&&"timeline-node--interactive",t].filter(Boolean).join(" "),d=()=>{o&&o()},f=p=>{o&&(p.key==="Enter"||p.key===" ")&&(p.preventDefault(),o())};return e.jsxs("div",{className:_,onClick:d,onKeyDown:f,role:o?"button":void 0,tabIndex:o?0:void 0,"aria-pressed":o?r:void 0,...i,children:[a&&s==="left"&&e.jsx("span",{className:"timeline-node__label timeline-node__label--left",children:a}),a&&s==="top"&&e.jsx("span",{className:"timeline-node__label timeline-node__label--top",children:a}),e.jsx("span",{className:"timeline-node__marker","aria-hidden":"true"}),a&&s==="right"&&e.jsx("span",{className:"timeline-node__label timeline-node__label--right",children:a}),a&&s==="bottom"&&e.jsx("span",{className:"timeline-node__label timeline-node__label--bottom",children:a})]})},G=({isOpen:l,onClose:c,title:r,children:a,footer:s,className:n=""})=>{const t=b.useRef(null),o=b.useId();b.useEffect(()=>{const d=t.current;d&&(l&&!d.open?d.showModal():!l&&d.open&&d.close())},[l]);const i=()=>{c()},_=d=>{d.target===t.current&&c()};return j.createPortal(e.jsx("dialog",{ref:t,className:`modal ${n}`.trim(),"aria-labelledby":o,onClose:i,onClick:_,children:e.jsxs("div",{className:"modal__container",children:[e.jsxs("header",{className:"modal__header",children:[e.jsx("h2",{id:o,className:"modal__title",children:r}),e.jsx("button",{type:"button",className:"modal__close",onClick:c,"aria-label":"Close modal",children:e.jsx(w,{name:"Close",size:"S"})})]}),e.jsx("div",{className:"modal__body",children:a}),s&&e.jsx("footer",{className:"modal__footer",children:s})]})}),document.body)},H=({label:l,value:c,trend:r,trendValue:a,size:s="medium",className:n="",...t})=>{const o=["stat",`stat--${s}`,n].filter(Boolean).join(" "),i=["stat__trend",r&&`stat__trend--${r}`].filter(Boolean).join(" "),_=()=>{switch(r){case"up":return"▲";case"down":return"▼";case"neutral":return"►";default:return null}},d=()=>{switch(r){case"up":return"increasing";case"down":return"decreasing";case"neutral":return"unchanged";default:return""}};return e.jsxs("div",{className:o,...t,children:[e.jsx("span",{className:"stat__label",children:l}),e.jsx("span",{className:"stat__value",children:c}),r&&e.jsxs("span",{className:i,"aria-label":`Trend: ${d()}${a?`, ${a}`:""}`,children:[e.jsx("span",{className:"stat__trend-icon","aria-hidden":"true",children:_()}),a&&e.jsx("span",{className:"stat__trend-value",children:a})]})]})},J="0.3.5";h.AccordionFill=A,h.Alert=z,h.Badge=P,h.Breadcrumb=W,h.Button=x,h.Card=T,h.Checkbox=K,h.CommandPrompt=M,h.Icon=w,h.Input=I,h.Modal=G,h.Progress=L,h.RetroEffects=Q,h.Section=D,h.Stat=H,h.Switch=U,h.Tabs=O,h.Terminal=q,h.TimelineNode=F,h.version=J,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eidotter",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "type": "module",
   "description": "A DOS Themed Design System",
   "main": "./dist/index.umd.js",