eidotter 0.3.2 → 0.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/eidotter.css +1 -0
  2. package/dist/index.es.js +157 -173
  3. package/dist/index.umd.js +2 -2
  4. package/package.json +29 -23
  5. package/dist/style.css +0 -1
package/dist/eidotter.css ADDED
@@ -0,0 +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}}
package/dist/index.es.js CHANGED
@@ -1,50 +1,50 @@
1
- import { jsx as e, jsxs as _, Fragment as A } from "react/jsx-runtime";
2
- import E, { useState as C, useEffect as D, useRef as S, forwardRef as j, useCallback as I, useId as K } from "react";
1
+ import { jsx as e, jsxs as _, Fragment as j } from "react/jsx-runtime";
2
+ import A, { useState as C, useEffect as B, useRef as S, forwardRef as E, useCallback as I, useId as K } from "react";
3
3
  import { createPortal as R } from "react-dom";
4
- const w = ({
4
+ const k = ({
5
5
  name: t,
6
6
  size: i = "L",
7
- className: l = "",
7
+ className: s = "",
8
8
  onClick: a,
9
9
  color: n,
10
10
  role: r
11
11
  }) => {
12
- const s = process.env.NODE_ENV === "production" ? "/eiDotter" : "";
12
+ const l = process.env.NODE_ENV === "production" ? "/eiDotter" : "";
13
13
  return /* @__PURE__ */ e(
14
14
  "svg",
15
15
  {
16
- className: `icon ${i === "L" ? "icon--l" : "icon--s"} ${l} ${r ? `icon--${r}` : ""}`.trim(),
16
+ className: `icon ${i === "L" ? "icon--l" : "icon--s"} ${s} ${r ? `icon--${r}` : ""}`.trim(),
17
17
  onClick: a,
18
18
  role: r,
19
19
  "aria-label": `${t} icon`,
20
20
  style: n ? { color: n } : void 0,
21
- children: /* @__PURE__ */ e("use", { href: `${s}/icons/sprites.svg#${t}` })
21
+ children: /* @__PURE__ */ e("use", { href: `${l}/icons/sprites.svg#${t}` })
22
22
  }
23
23
  );
24
- }, M = {
24
+ }, L = {
25
25
  info: "Info",
26
26
  success: "Done",
27
27
  warning: "Warning",
28
28
  error: "Error"
29
- }, P = ({
29
+ }, W = ({
30
30
  size: t = "L",
31
31
  type: i = "info",
32
- title: l = "Notification Title",
32
+ title: s = "Notification Title",
33
33
  children: a = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit amet diam neque bibendum. Quisque in praesent sit erat...",
34
34
  onClose: n,
35
35
  onClickHere: r,
36
- className: s = ""
37
- }) => /* @__PURE__ */ _("div", { className: `alert alert--${t.toLowerCase()} alert--${i} ${s}`.trim(), children: [
36
+ className: l = ""
37
+ }) => /* @__PURE__ */ _("div", { className: `alert alert--${t.toLowerCase()} alert--${i} ${l}`.trim(), children: [
38
38
  /* @__PURE__ */ _("div", { className: "alert__header", children: [
39
39
  /* @__PURE__ */ e("div", { className: "alert__icon", children: /* @__PURE__ */ e(
40
- w,
40
+ k,
41
41
  {
42
- name: M[i],
42
+ name: L[i],
43
43
  size: "L",
44
44
  "aria-label": `${i} alert`
45
45
  }
46
46
  ) }),
47
- /* @__PURE__ */ e("div", { className: "alert__title", children: l }),
47
+ /* @__PURE__ */ e("div", { className: "alert__title", children: s }),
48
48
  n && /* @__PURE__ */ e(
49
49
  "button",
50
50
  {
@@ -52,7 +52,7 @@ const w = ({
52
52
  onClick: n,
53
53
  "aria-label": "Close alert",
54
54
  children: /* @__PURE__ */ e(
55
- w,
55
+ k,
56
56
  {
57
57
  name: "Close",
58
58
  size: "S"
@@ -73,21 +73,20 @@ const w = ({
73
73
  }
74
74
  )
75
75
  ] }) })
76
- ] });
77
- const L = ({
76
+ ] }), M = ({
78
77
  title: t,
79
78
  children: i,
80
- defaultExpanded: l = !1,
79
+ defaultExpanded: s = !1,
81
80
  isHovered: a = !1,
82
81
  isActive: n = !1,
83
82
  onToggle: r
84
83
  }) => {
85
- const [s, o] = C(l);
86
- D(() => {
87
- o(l);
88
- }, [l]);
84
+ const [l, o] = C(s);
85
+ B(() => {
86
+ o(s);
87
+ }, [s]);
89
88
  const c = () => {
90
- const m = !s;
89
+ const m = !l;
91
90
  o(m), r == null || r(m);
92
91
  };
93
92
  return /* @__PURE__ */ _(
@@ -95,7 +94,7 @@ const L = ({
95
94
  {
96
95
  className: `
97
96
  section
98
- ${s ? "section--expanded" : ""}
97
+ ${l ? "section--expanded" : ""}
99
98
  ${a ? "section--hover" : ""}
100
99
  ${n ? "section--active" : ""}
101
100
  `.trim(),
@@ -105,56 +104,54 @@ const L = ({
105
104
  {
106
105
  className: "section__header",
107
106
  onClick: c,
108
- "aria-expanded": s,
107
+ "aria-expanded": l,
109
108
  children: [
110
109
  /* @__PURE__ */ e("div", { className: "section__title", children: t }),
111
110
  /* @__PURE__ */ e("div", { className: "section__icon", children: /* @__PURE__ */ e(
112
- w,
111
+ k,
113
112
  {
114
- name: s ? "Chevron Up" : "Chevron Down",
113
+ name: l ? "Chevron Up" : "Chevron Down",
115
114
  size: "S"
116
115
  }
117
116
  ) })
118
117
  ]
119
118
  }
120
119
  ),
121
- s && /* @__PURE__ */ e("div", { className: "section__content", children: i })
120
+ l && /* @__PURE__ */ e("div", { className: "section__content", children: i })
122
121
  ]
123
122
  }
124
123
  );
125
- };
126
- const W = ({
124
+ }, O = ({
127
125
  sections: t,
128
126
  defaultExpandedIndex: i = -1
129
127
  }) => {
130
- const [l, a] = C(i), n = (r, s) => {
131
- a(s ? r : -1);
128
+ const [s, a] = C(i), n = (r, l) => {
129
+ a(l ? r : -1);
132
130
  };
133
- return /* @__PURE__ */ e("div", { className: "accordion-fill", children: t.map((r, s) => /* @__PURE__ */ e(
134
- L,
131
+ return /* @__PURE__ */ e("div", { className: "accordion-fill", children: t.map((r, l) => /* @__PURE__ */ e(
132
+ M,
135
133
  {
136
134
  title: r.title,
137
- defaultExpanded: s === i,
138
- onToggle: (o) => n(s, o),
135
+ defaultExpanded: l === i,
136
+ onToggle: (o) => n(l, o),
139
137
  children: r.content
140
138
  },
141
- s
139
+ l
142
140
  )) });
143
- };
144
- const O = ({
141
+ }, Q = ({
145
142
  variant: t = "primary",
146
143
  size: i = "medium",
147
- type: l = "button",
144
+ type: s = "button",
148
145
  disabled: a = !1,
149
146
  loading: n = !1,
150
147
  children: r,
151
- onClick: s,
148
+ onClick: l,
152
149
  className: o = "",
153
150
  fullWidth: c = !1,
154
151
  ...m
155
152
  }) => {
156
153
  const d = (b) => {
157
- a || n || s == null || s(b);
154
+ a || n || l == null || l(b);
158
155
  }, h = [
159
156
  "button",
160
157
  `button--${t}`,
@@ -167,7 +164,7 @@ const O = ({
167
164
  return /* @__PURE__ */ _(
168
165
  "button",
169
166
  {
170
- type: l,
167
+ type: s,
171
168
  className: h,
172
169
  onClick: d,
173
170
  disabled: a || n,
@@ -179,40 +176,38 @@ const O = ({
179
176
  ]
180
177
  }
181
178
  );
182
- };
183
- const Q = ({
179
+ }, G = ({
184
180
  title: t,
185
181
  children: i,
186
- footer: l,
182
+ footer: s,
187
183
  variant: a = "default",
188
184
  className: n = "",
189
185
  ...r
190
186
  }) => {
191
- const s = [
187
+ const l = [
192
188
  "card",
193
189
  `card--${a}`,
194
190
  n
195
191
  ].filter(Boolean).join(" ");
196
- return /* @__PURE__ */ _("div", { className: s, ...r, children: [
192
+ return /* @__PURE__ */ _("div", { className: l, ...r, children: [
197
193
  t && /* @__PURE__ */ e("div", { className: "card__header", children: /* @__PURE__ */ e("span", { className: "card__title", children: t }) }),
198
194
  /* @__PURE__ */ e("div", { className: "card__body", children: i }),
199
- l && /* @__PURE__ */ e("div", { className: "card__footer", children: l })
195
+ s && /* @__PURE__ */ e("div", { className: "card__footer", children: s })
200
196
  ] });
201
- };
202
- const F = ({
197
+ }, H = ({
203
198
  checked: t,
204
199
  defaultChecked: i,
205
- onChange: l,
200
+ onChange: s,
206
201
  label: a,
207
202
  disabled: n = !1,
208
203
  name: r,
209
- value: s,
204
+ value: l,
210
205
  className: o = "",
211
206
  "aria-label": c,
212
207
  ...m
213
208
  }) => {
214
209
  const d = (b) => {
215
- n || l == null || l(b.target.checked);
210
+ n || s == null || s(b.target.checked);
216
211
  }, h = [
217
212
  "checkbox",
218
213
  n && "checkbox--disabled",
@@ -229,7 +224,7 @@ const F = ({
229
224
  onChange: d,
230
225
  disabled: n,
231
226
  name: r,
232
- value: s,
227
+ value: l,
233
228
  "aria-label": c || a,
234
229
  ...m
235
230
  }
@@ -237,21 +232,20 @@ const F = ({
237
232
  /* @__PURE__ */ e("span", { className: "checkbox__box", "aria-hidden": "true" }),
238
233
  a && /* @__PURE__ */ e("span", { className: "checkbox__label", children: a })
239
234
  ] });
240
- };
241
- const G = ({
235
+ }, J = ({
242
236
  prompt: t = "C:\\>",
243
237
  onCommand: i,
244
- autoFocus: l = !1,
238
+ autoFocus: s = !1,
245
239
  className: a = "",
246
240
  placeholder: n,
247
241
  disabled: r = !1
248
242
  }) => {
249
- const [s, o] = C(""), c = S(null);
250
- D(() => {
251
- l && c.current && c.current.focus();
252
- }, [l]);
243
+ const [l, o] = C(""), c = S(null);
244
+ B(() => {
245
+ s && c.current && c.current.focus();
246
+ }, [s]);
253
247
  const m = (h) => {
254
- h.key === "Enter" && s.trim() && !r && (i(s.trim()), o(""));
248
+ h.key === "Enter" && l.trim() && !r && (i(l.trim()), o(""));
255
249
  }, d = () => {
256
250
  !r && c.current && c.current.focus();
257
251
  };
@@ -269,10 +263,10 @@ const G = ({
269
263
  {
270
264
  ref: c,
271
265
  className: "command-prompt__input",
272
- value: s,
266
+ value: l,
273
267
  onChange: (h) => o(h.target.value),
274
268
  onKeyDown: m,
275
- autoFocus: l,
269
+ autoFocus: s,
276
270
  spellCheck: !1,
277
271
  autoComplete: "off",
278
272
  autoCapitalize: "off",
@@ -286,20 +280,19 @@ const G = ({
286
280
  ]
287
281
  }
288
282
  );
289
- };
290
- const H = ({
283
+ }, P = ({
291
284
  value: t,
292
285
  max: i = 100,
293
- variant: l = "default",
286
+ variant: s = "default",
294
287
  size: a = "medium",
295
288
  showLabel: n = !1,
296
289
  className: r = "",
297
- "aria-label": s,
290
+ "aria-label": l,
298
291
  ...o
299
292
  }) => {
300
293
  const c = Math.min(100, Math.max(0, t / i * 100)), m = Math.round(c / 5), d = 20 - m, h = [
301
294
  "progress",
302
- `progress--${l}`,
295
+ `progress--${s}`,
303
296
  `progress--${a}`,
304
297
  r
305
298
  ].filter(Boolean).join(" ");
@@ -311,7 +304,7 @@ const H = ({
311
304
  "aria-valuenow": t,
312
305
  "aria-valuemin": 0,
313
306
  "aria-valuemax": i,
314
- "aria-label": s || `Progress: ${Math.round(c)}%`,
307
+ "aria-label": l || `Progress: ${Math.round(c)}%`,
315
308
  ...o,
316
309
  children: [
317
310
  /* @__PURE__ */ _("span", { className: "progress__bar", children: [
@@ -325,17 +318,16 @@ const H = ({
325
318
  ]
326
319
  }
327
320
  );
328
- };
329
- const T = j(({
321
+ }, T = E(({
330
322
  variant: t = "default",
331
323
  className: i = "",
332
- disabled: l,
324
+ disabled: s,
333
325
  ...a
334
326
  }, n) => {
335
327
  const r = [
336
328
  "input",
337
329
  `input--${t}`,
338
- l && "input--disabled",
330
+ s && "input--disabled",
339
331
  i
340
332
  ].filter(Boolean).join(" ");
341
333
  return /* @__PURE__ */ e(
@@ -343,21 +335,21 @@ const T = j(({
343
335
  {
344
336
  ref: n,
345
337
  className: r,
346
- disabled: l,
338
+ disabled: s,
347
339
  "aria-invalid": t === "error",
348
340
  ...a
349
341
  }
350
342
  );
351
343
  });
352
344
  T.displayName = "Input";
353
- const J = ({
345
+ const X = ({
354
346
  size: t = "medium",
355
347
  title: i = "MS-DOS Terminal",
356
- state: l = "active",
348
+ state: s = "active",
357
349
  resizable: a = !0,
358
350
  minimizable: n = !0,
359
351
  maximizable: r = !0,
360
- closeable: s = !0,
352
+ closeable: l = !0,
361
353
  children: o,
362
354
  onMinimize: c,
363
355
  onMaximize: m,
@@ -366,49 +358,49 @@ const J = ({
366
358
  className: b = "",
367
359
  autoFocus: y = !1
368
360
  }) => {
369
- const [k, u] = C(l), [p, f] = C(!1), $ = S(null);
370
- D(() => {
371
- y && $.current && $.current.focus();
361
+ const [$, u] = C(s), [p, f] = C(!1), v = S(null);
362
+ B(() => {
363
+ y && v.current && v.current.focus();
372
364
  }, [y]);
373
365
  const N = () => {
374
366
  u("minimized"), c == null || c();
375
367
  }, x = () => {
376
368
  f(!p), m == null || m();
377
- }, v = () => {
369
+ }, w = () => {
378
370
  d == null || d();
379
- }, B = () => {
371
+ }, D = () => {
380
372
  u("active"), h == null || h();
381
373
  }, z = (g) => {
382
- g.altKey && g.key === "F4" && s && (g.preventDefault(), v());
374
+ g.altKey && g.key === "F4" && l && (g.preventDefault(), w());
383
375
  };
384
- return k === "minimized" ? /* @__PURE__ */ e(
376
+ return $ === "minimized" ? /* @__PURE__ */ e(
385
377
  "div",
386
378
  {
387
379
  className: `terminal terminal--minimized ${b}`.trim(),
388
- onClick: B,
380
+ onClick: D,
389
381
  role: "button",
390
382
  tabIndex: 0,
391
383
  "aria-label": `Restore ${i} window`,
392
- onKeyDown: (g) => g.key === "Enter" && B(),
384
+ onKeyDown: (g) => g.key === "Enter" && D(),
393
385
  children: /* @__PURE__ */ _("div", { className: "terminal__taskbar-item", children: [
394
- /* @__PURE__ */ e(w, { name: "App", size: "S" }),
386
+ /* @__PURE__ */ e(k, { name: "App", size: "S" }),
395
387
  /* @__PURE__ */ e("span", { className: "terminal__taskbar-title", children: i })
396
388
  ] })
397
389
  }
398
390
  ) : /* @__PURE__ */ _(
399
391
  "div",
400
392
  {
401
- ref: $,
402
- className: `terminal terminal--${t} terminal--${k} ${p ? "terminal--maximized" : ""} ${b}`.trim(),
393
+ ref: v,
394
+ className: `terminal terminal--${t} terminal--${$} ${p ? "terminal--maximized" : ""} ${b}`.trim(),
403
395
  tabIndex: 0,
404
396
  role: "dialog",
405
397
  "aria-label": `${i} terminal window`,
406
- onFocus: B,
398
+ onFocus: D,
407
399
  onKeyDown: z,
408
400
  children: [
409
401
  /* @__PURE__ */ _("div", { className: "terminal__title-bar", children: [
410
402
  /* @__PURE__ */ _("div", { className: "terminal__title", children: [
411
- /* @__PURE__ */ e(w, { name: "App", size: "S", "aria-hidden": "true" }),
403
+ /* @__PURE__ */ e(k, { name: "App", size: "S", "aria-hidden": "true" }),
412
404
  /* @__PURE__ */ e("span", { className: "terminal__title-text", children: i })
413
405
  ] }),
414
406
  /* @__PURE__ */ _("div", { className: "terminal__controls", children: [
@@ -419,7 +411,7 @@ const J = ({
419
411
  onClick: N,
420
412
  "aria-label": "Minimize window",
421
413
  title: "Minimize",
422
- children: /* @__PURE__ */ e(w, { name: "Cancel", size: "S" })
414
+ children: /* @__PURE__ */ e(k, { name: "Cancel", size: "S" })
423
415
  }
424
416
  ),
425
417
  r && /* @__PURE__ */ e(
@@ -429,17 +421,17 @@ const J = ({
429
421
  onClick: x,
430
422
  "aria-label": p ? "Restore window" : "Maximize window",
431
423
  title: p ? "Restore" : "Maximize",
432
- children: /* @__PURE__ */ e(w, { name: p ? "Fullscreen" : "Add", size: "S" })
424
+ children: /* @__PURE__ */ e(k, { name: p ? "Fullscreen" : "Add", size: "S" })
433
425
  }
434
426
  ),
435
- s && /* @__PURE__ */ e(
427
+ l && /* @__PURE__ */ e(
436
428
  "button",
437
429
  {
438
430
  className: "terminal__control terminal__control--close",
439
- onClick: v,
431
+ onClick: w,
440
432
  "aria-label": "Close window",
441
433
  title: "Close",
442
- children: /* @__PURE__ */ e(w, { name: "Close", size: "S" })
434
+ children: /* @__PURE__ */ e(k, { name: "Close", size: "S" })
443
435
  }
444
436
  )
445
437
  ] })
@@ -452,34 +444,33 @@ const J = ({
452
444
  ]
453
445
  }
454
446
  );
455
- };
456
- const X = ({
447
+ }, Y = ({
457
448
  tabs: t,
458
449
  variant: i = "underline",
459
- size: l = "medium",
450
+ size: s = "medium",
460
451
  activeTab: a,
461
452
  defaultActiveTab: n,
462
453
  onTabChange: r,
463
- className: s = "",
454
+ className: l = "",
464
455
  ...o
465
456
  }) => {
466
- var k;
457
+ var $;
467
458
  const [c, m] = C(
468
- n || ((k = t[0]) == null ? void 0 : k.id) || ""
459
+ n || (($ = t[0]) == null ? void 0 : $.id) || ""
469
460
  ), d = a !== void 0 ? a : c, h = I((u, p) => {
470
461
  p || (a === void 0 && m(u), r == null || r(u));
471
462
  }, [a, r]), b = I((u, p) => {
472
463
  var x;
473
- const f = t.filter((v) => !v.disabled), $ = f.findIndex((v) => v.id === t[p].id);
464
+ const f = t.filter((w) => !w.disabled), v = f.findIndex((w) => w.id === t[p].id);
474
465
  let N = null;
475
466
  switch (u.key) {
476
467
  case "ArrowLeft":
477
468
  case "ArrowUp":
478
- u.preventDefault(), N = $ > 0 ? $ - 1 : f.length - 1;
469
+ u.preventDefault(), N = v > 0 ? v - 1 : f.length - 1;
479
470
  break;
480
471
  case "ArrowRight":
481
472
  case "ArrowDown":
482
- u.preventDefault(), N = $ < f.length - 1 ? $ + 1 : 0;
473
+ u.preventDefault(), N = v < f.length - 1 ? v + 1 : 0;
483
474
  break;
484
475
  case "Home":
485
476
  u.preventDefault(), N = 0;
@@ -489,17 +480,17 @@ const X = ({
489
480
  break;
490
481
  }
491
482
  if (N !== null) {
492
- const v = f[N];
493
- h(v.id, v.disabled), (x = document.querySelectorAll('[role="tab"]:not([disabled])')[N]) == null || x.focus();
483
+ const w = f[N];
484
+ h(w.id, w.disabled), (x = document.querySelectorAll('[role="tab"]:not([disabled])')[N]) == null || x.focus();
494
485
  }
495
486
  }, [t, h]), y = [
496
487
  "tabs",
497
488
  `tabs--${i}`,
498
- `tabs--${l}`,
499
- s
489
+ `tabs--${s}`,
490
+ l
500
491
  ].filter(Boolean).join(" ");
501
492
  return /* @__PURE__ */ e("div", { className: y, role: "tablist", ...o, children: t.map((u, p) => {
502
- const f = d === u.id, $ = [
493
+ const f = d === u.id, v = [
503
494
  "tabs__tab",
504
495
  f && "tabs__tab--active",
505
496
  u.disabled && "tabs__tab--disabled"
@@ -512,7 +503,7 @@ const X = ({
512
503
  "aria-selected": f,
513
504
  tabIndex: f ? 0 : -1,
514
505
  disabled: u.disabled,
515
- className: $,
506
+ className: v,
516
507
  onClick: () => h(u.id, u.disabled),
517
508
  onKeyDown: (N) => b(N, p),
518
509
  children: u.label
@@ -520,49 +511,46 @@ const X = ({
520
511
  u.id
521
512
  );
522
513
  }) });
523
- };
524
- const Y = ({
514
+ }, Z = ({
525
515
  variant: t = "default",
526
516
  size: i = "medium",
527
- dot: l = !1,
517
+ dot: s = !1,
528
518
  children: a,
529
519
  className: n = "",
530
520
  ...r
531
521
  }) => {
532
- const s = [
522
+ const l = [
533
523
  "badge",
534
524
  `badge--${t}`,
535
525
  `badge--${i}`,
536
- l && "badge--with-dot",
526
+ s && "badge--with-dot",
537
527
  n
538
528
  ].filter(Boolean).join(" ");
539
- return /* @__PURE__ */ _("span", { className: s, ...r, children: [
540
- l && /* @__PURE__ */ e("span", { className: "badge__dot", "aria-hidden": "true" }),
529
+ return /* @__PURE__ */ _("span", { className: l, ...r, children: [
530
+ s && /* @__PURE__ */ e("span", { className: "badge__dot", "aria-hidden": "true" }),
541
531
  /* @__PURE__ */ e("span", { className: "badge__content", children: a })
542
532
  ] });
543
- };
544
- const Z = ({
533
+ }, F = ({
545
534
  checked: t,
546
535
  defaultChecked: i = !1,
547
- onCheckedChange: l,
536
+ onCheckedChange: s,
548
537
  disabled: a = !1,
549
538
  name: n,
550
539
  value: r,
551
- className: s = "",
540
+ className: l = "",
552
541
  ...o
553
542
  }) => {
554
- const [c, m] = E.useState(i), d = t !== void 0, h = d ? t : c, b = () => {
555
- if (a)
556
- return;
543
+ const [c, m] = A.useState(i), d = t !== void 0, h = d ? t : c, b = () => {
544
+ if (a) return;
557
545
  const u = !h;
558
- d || m(u), l == null || l(u);
546
+ d || m(u), s == null || s(u);
559
547
  }, y = (u) => {
560
548
  (u.key === " " || u.key === "Enter") && (u.preventDefault(), b());
561
- }, k = [
549
+ }, $ = [
562
550
  "switch",
563
551
  h && "switch--checked",
564
552
  a && "switch--disabled",
565
- s
553
+ l
566
554
  ].filter(Boolean).join(" ");
567
555
  return /* @__PURE__ */ _(
568
556
  "button",
@@ -571,7 +559,7 @@ const Z = ({
571
559
  role: "switch",
572
560
  "aria-checked": h,
573
561
  "aria-disabled": a,
574
- className: k,
562
+ className: $,
575
563
  onClick: b,
576
564
  onKeyDown: y,
577
565
  disabled: a,
@@ -589,26 +577,25 @@ const Z = ({
589
577
  ]
590
578
  }
591
579
  );
592
- };
593
- const ee = ({
580
+ }, ee = ({
594
581
  trail: t = [],
595
582
  currentLabel: i,
596
- showBackArrow: l = !0,
583
+ showBackArrow: s = !0,
597
584
  separator: a = "/",
598
585
  linkComponent: n,
599
586
  className: r = ""
600
587
  }) => {
601
- const s = [
588
+ const l = [
602
589
  "breadcrumb",
603
590
  r
604
591
  ].filter(Boolean).join(" "), o = (c, m) => {
605
- const d = /* @__PURE__ */ _(A, { children: [
606
- l && m && /* @__PURE__ */ e("span", { className: "breadcrumb__back-arrow", "aria-hidden": "true", children: "<" }),
592
+ const d = /* @__PURE__ */ _(j, { children: [
593
+ s && m && /* @__PURE__ */ e("span", { className: "breadcrumb__back-arrow", "aria-hidden": "true", children: "<" }),
607
594
  /* @__PURE__ */ e("span", { children: c.label })
608
595
  ] });
609
596
  return n ? /* @__PURE__ */ e(n, { href: c.href, className: "breadcrumb__link", children: d }) : /* @__PURE__ */ e("a", { href: c.href, className: "breadcrumb__link", children: d });
610
597
  };
611
- return /* @__PURE__ */ e("nav", { "aria-label": "Breadcrumb", className: s, children: /* @__PURE__ */ _("ol", { className: "breadcrumb__list", children: [
598
+ return /* @__PURE__ */ e("nav", { "aria-label": "Breadcrumb", className: l, children: /* @__PURE__ */ _("ol", { className: "breadcrumb__list", children: [
612
599
  t.map((c, m) => {
613
600
  const d = m === t.length - 1, h = m < t.length - 1;
614
601
  return /* @__PURE__ */ _("li", { className: "breadcrumb__item", children: [
@@ -619,11 +606,10 @@ const ee = ({
619
606
  t.length > 0 && /* @__PURE__ */ e("li", { className: "breadcrumb__item", children: /* @__PURE__ */ e("span", { className: "breadcrumb__separator", "aria-hidden": "true", children: a }) }),
620
607
  /* @__PURE__ */ e("li", { className: "breadcrumb__item breadcrumb__item--current", "aria-current": "page", children: /* @__PURE__ */ e("span", { className: "breadcrumb__current", children: i }) })
621
608
  ] }) });
622
- };
623
- const ae = ({
609
+ }, ae = ({
624
610
  scanlines: t = !0,
625
611
  glow: i = !0,
626
- flicker: l = !0,
612
+ flicker: s = !0,
627
613
  intensity: a = 1,
628
614
  className: n = ""
629
615
  }) => {
@@ -634,17 +620,16 @@ const ae = ({
634
620
  return /* @__PURE__ */ _("div", { className: r, style: { "--retro-intensity": a }, "aria-hidden": "true", children: [
635
621
  t && /* @__PURE__ */ e("div", { className: "retro-effects__scanlines" }),
636
622
  i && /* @__PURE__ */ e("div", { className: "retro-effects__glow" }),
637
- l && /* @__PURE__ */ e("div", { className: "retro-effects__flicker" })
623
+ s && /* @__PURE__ */ e("div", { className: "retro-effects__flicker" })
638
624
  ] });
639
- };
640
- const ne = ({
625
+ }, ne = ({
641
626
  shape: t = "circle",
642
627
  variant: i = "default",
643
- isActive: l = !1,
628
+ isActive: s = !1,
644
629
  label: a,
645
630
  labelPosition: n = "left",
646
631
  size: r = "medium",
647
- className: s = "",
632
+ className: l = "",
648
633
  onClick: o,
649
634
  ...c
650
635
  }) => {
@@ -654,9 +639,9 @@ const ne = ({
654
639
  `timeline-node--${i}`,
655
640
  `timeline-node--${r}`,
656
641
  `timeline-node--label-${n}`,
657
- l && "timeline-node--active",
642
+ s && "timeline-node--active",
658
643
  o && "timeline-node--interactive",
659
- s
644
+ l
660
645
  ].filter(Boolean).join(" ");
661
646
  return /* @__PURE__ */ _(
662
647
  "div",
@@ -670,7 +655,7 @@ const ne = ({
670
655
  },
671
656
  role: o ? "button" : void 0,
672
657
  tabIndex: o ? 0 : void 0,
673
- "aria-pressed": o ? l : void 0,
658
+ "aria-pressed": o ? s : void 0,
674
659
  ...c,
675
660
  children: [
676
661
  a && n === "left" && /* @__PURE__ */ e("span", { className: "timeline-node__label timeline-node__label--left", children: a }),
@@ -681,37 +666,36 @@ const ne = ({
681
666
  ]
682
667
  }
683
668
  );
684
- };
685
- const te = ({
669
+ }, te = ({
686
670
  isOpen: t,
687
671
  onClose: i,
688
- title: l,
672
+ title: s,
689
673
  children: a,
690
674
  footer: n,
691
675
  className: r = ""
692
676
  }) => {
693
- const s = S(null), o = K();
694
- D(() => {
695
- const d = s.current;
677
+ const l = S(null), o = K();
678
+ B(() => {
679
+ const d = l.current;
696
680
  d && (t && !d.open ? d.showModal() : !t && d.open && d.close());
697
681
  }, [t]);
698
682
  const c = () => {
699
683
  i();
700
684
  }, m = (d) => {
701
- d.target === s.current && i();
685
+ d.target === l.current && i();
702
686
  };
703
687
  return R(
704
688
  /* @__PURE__ */ e(
705
689
  "dialog",
706
690
  {
707
- ref: s,
691
+ ref: l,
708
692
  className: `modal ${r}`.trim(),
709
693
  "aria-labelledby": o,
710
694
  onClose: c,
711
695
  onClick: m,
712
696
  children: /* @__PURE__ */ _("div", { className: "modal__container", children: [
713
697
  /* @__PURE__ */ _("header", { className: "modal__header", children: [
714
- /* @__PURE__ */ e("h2", { id: o, className: "modal__title", children: l }),
698
+ /* @__PURE__ */ e("h2", { id: o, className: "modal__title", children: s }),
715
699
  /* @__PURE__ */ e(
716
700
  "button",
717
701
  {
@@ -719,7 +703,7 @@ const te = ({
719
703
  className: "modal__close",
720
704
  onClick: i,
721
705
  "aria-label": "Close modal",
722
- children: /* @__PURE__ */ e(w, { name: "Close", size: "S" })
706
+ children: /* @__PURE__ */ e(k, { name: "Close", size: "S" })
723
707
  }
724
708
  )
725
709
  ] }),
@@ -732,23 +716,23 @@ const te = ({
732
716
  );
733
717
  }, re = "0.3.0";
734
718
  export {
735
- W as AccordionFill,
736
- P as Alert,
737
- Y as Badge,
719
+ O as AccordionFill,
720
+ W as Alert,
721
+ Z as Badge,
738
722
  ee as Breadcrumb,
739
- O as Button,
740
- Q as Card,
741
- F as Checkbox,
742
- G as CommandPrompt,
743
- w as Icon,
723
+ Q as Button,
724
+ G as Card,
725
+ H as Checkbox,
726
+ J as CommandPrompt,
727
+ k as Icon,
744
728
  T as Input,
745
729
  te as Modal,
746
- H as Progress,
730
+ P as Progress,
747
731
  ae as RetroEffects,
748
- L as Section,
749
- Z as Switch,
750
- X as Tabs,
751
- J as Terminal,
732
+ M as Section,
733
+ F as Switch,
734
+ Y as Tabs,
735
+ X as Terminal,
752
736
  ne as TimelineNode,
753
737
  re as version
754
738
  };
package/dist/index.umd.js CHANGED
@@ -1,6 +1,6 @@
1
- (function(_,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):(_=typeof globalThis<"u"?globalThis:_||self,e(_.eidotter={},_.jsxRuntime,_.React,_.ReactDOM))})(this,function(_,e,b,E){"use strict";const J="",X="",$=({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}`})})},A={info:"Info",success:"Done",warning:"Warning",error:"Error"},j=({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($,{name:A[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($,{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"})]})})]}),Y="",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 m=!n;o(m),l==null||l(m)};return e.jsxs("div",{className:`
1
+ (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:`
2
2
  section
3
3
  ${n?"section--expanded":""}
4
4
  ${a?"section--hover":""}
5
5
  ${s?"section--active":""}
6
- `.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($,{name:n?"Chevron Up":"Chevron Down",size:"S"})})]}),n&&e.jsx("div",{className:"section__content",children:c})]})},Z="",z=({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))})},R="",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,...m})=>{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,...m,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})]})},ee="",T=({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})]})},ae="",K=({checked:r,defaultChecked:c,onChange:t,label:a,disabled:s=!1,name:l,value:n,className:o="","aria-label":i,...m})=>{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,...m}),e.jsx("span",{className:"checkbox__box","aria-hidden":"true"}),a&&e.jsx("span",{className:"checkbox__label",children:a})]})},se="",M=({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 m=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:m,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:"█"})]})},re="",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)),m=Math.round(i/5),d=20-m,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(m)}),e.jsx("span",{className:"progress__empty",children:"░".repeat(d)})]}),s&&e.jsxs("span",{className:"progress__label",children:[Math.round(i),"%"]})]})},le="",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 ne="",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:m,onClose:d,onFocus:f,className:p="",autoFocus:C=!1})=>{const[y,h]=b.useState(t),[u,N]=b.useState(!1),w=b.useRef(null);b.useEffect(()=>{C&&w.current&&w.current.focus()},[C]);const v=()=>{h("minimized"),i==null||i()},S=()=>{N(!u),m==null||m()},k=()=>{d==null||d()},B=()=>{h("active"),f==null||f()},H=g=>{g.altKey&&g.key==="F4"&&n&&(g.preventDefault(),k())};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($,{name:"App",size:"S"}),e.jsx("span",{className:"terminal__taskbar-title",children:c})]})}):e.jsxs("div",{ref:w,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($,{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($,{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($,{name:u?"Fullscreen":"Add",size:"S"})}),n&&e.jsx("button",{className:"terminal__control terminal__control--close",onClick:k,"aria-label":"Close window",title:"Close",children:e.jsx($,{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"})]})},te="",P=({tabs:r,variant:c="underline",size:t="medium",activeTab:a,defaultActiveTab:s,onTabChange:l,className:n="",...o})=>{var y;const[i,m]=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&&m(h),l==null||l(h))},[a,l]),p=b.useCallback((h,u)=>{var S;const N=r.filter(k=>!k.disabled),w=N.findIndex(k=>k.id===r[u].id);let v=null;switch(h.key){case"ArrowLeft":case"ArrowUp":h.preventDefault(),v=w>0?w-1:N.length-1;break;case"ArrowRight":case"ArrowDown":h.preventDefault(),v=w<N.length-1?w+1:0;break;case"Home":h.preventDefault(),v=0;break;case"End":h.preventDefault(),v=N.length-1;break}if(v!==null){const k=N[v];f(k.id,k.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,w=["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:w,onClick:()=>f(h.id,h.disabled),onKeyDown:v=>p(v,u),children:h.label},h.id)})})},ce="",O=({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})]})},ie="",U=({checked:r,defaultChecked:c=!1,onCheckedChange:t,disabled:a=!1,name:s,value:l,className:n="",...o})=>{const[i,m]=b.useState(c),d=r!==void 0,f=d?r:i,p=()=>{if(a)return;const h=!f;d||m(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":""})]})},oe="",V=({trail:r=[],currentLabel:c,showBackArrow:t=!0,separator:a="/",linkComponent:s,className:l=""})=>{const n=["breadcrumb",l].filter(Boolean).join(" "),o=(i,m)=>{const d=e.jsxs(e.Fragment,{children:[t&&m&&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,m)=>{const d=m===r.length-1,f=m<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})})]})})},de="",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"})]})},me="",F=({shape:r="circle",variant:c="default",isActive:t=!1,label:a,labelPosition:s="left",size:l="medium",className:n="",onClick:o,...i})=>{const m=["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:m,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})]})},_e="",Q=({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()},m=d=>{d.target===n.current&&c()};return E.createPortal(e.jsx("dialog",{ref:n,className:`modal ${l}`.trim(),"aria-labelledby":o,onClose:i,onClick:m,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($,{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";_.AccordionFill=z,_.Alert=j,_.Badge=O,_.Breadcrumb=V,_.Button=x,_.Card=T,_.Checkbox=K,_.CommandPrompt=M,_.Icon=$,_.Input=I,_.Modal=Q,_.Progress=L,_.RetroEffects=W,_.Section=D,_.Switch=U,_.Tabs=P,_.Terminal=q,_.TimelineNode=F,_.version=G,Object.defineProperty(_,Symbol.toStringTag,{value:"Module"})});
6
+ `.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"})}));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "eidotter",
3
- "version": "0.3.2",
3
+ "version": "0.3.4",
4
4
  "type": "module",
5
5
  "description": "A DOS Themed Design System",
6
6
  "main": "./dist/index.umd.js",
@@ -12,7 +12,7 @@
12
12
  "import": "./dist/index.es.js",
13
13
  "require": "./dist/index.umd.js"
14
14
  },
15
- "./styles": "./dist/style.css",
15
+ "./styles": "./dist/eidotter.css",
16
16
  "./tailwind.preset": "./tailwind.preset.cjs",
17
17
  "./tokens.css": "./src/styles/tokens.css"
18
18
  },
@@ -20,7 +20,7 @@
20
20
  "dist/index.d.ts",
21
21
  "dist/index.es.js",
22
22
  "dist/index.umd.js",
23
- "dist/style.css",
23
+ "dist/eidotter.css",
24
24
  "dist/components",
25
25
  "tailwind.preset.cjs",
26
26
  "src/styles/tokens.css"
@@ -45,9 +45,15 @@
45
45
  "keywords": [
46
46
  "design-system",
47
47
  "react",
48
+ "components",
49
+ "ui",
50
+ "typescript",
48
51
  "dos",
49
52
  "retro",
50
- "ui"
53
+ "terminal",
54
+ "cga",
55
+ "tailwindcss",
56
+ "accessibility"
51
57
  ],
52
58
  "author": "CinimoDY",
53
59
  "license": "CC-BY-NC-4.0",
@@ -67,40 +73,40 @@
67
73
  },
68
74
  "devDependencies": {
69
75
  "@figma/plugin-typings": "^1.107.0-beta.2",
70
- "@figma/rest-api-spec": "^0.23.0",
71
- "@storybook/addon-a11y": "^8.6.14",
76
+ "@figma/rest-api-spec": "^0.35.0",
77
+ "@storybook/addon-a11y": "^8.6.15",
72
78
  "@storybook/addon-designs": "^8.0.4",
73
- "@storybook/addon-essentials": "^8.5.2",
74
- "@storybook/addon-interactions": "^8.5.2",
75
- "@storybook/addon-links": "^8.5.2",
76
- "@storybook/blocks": "^8.5.2",
77
- "@storybook/react": "^8.5.2",
78
- "@storybook/react-vite": "^8.5.2",
79
- "@storybook/test": "^8.5.2",
79
+ "@storybook/addon-essentials": "^8.6.15",
80
+ "@storybook/addon-interactions": "^8.6.15",
81
+ "@storybook/addon-links": "^8.6.15",
82
+ "@storybook/blocks": "^8.6.15",
83
+ "@storybook/react": "^8.6.15",
84
+ "@storybook/react-vite": "^8.6.15",
85
+ "@storybook/test": "^8.6.15",
80
86
  "@storybook/testing-library": "^0.2.0",
81
87
  "@testing-library/jest-dom": "^6.6.3",
82
88
  "@testing-library/react": "^16.3.0",
83
89
  "@testing-library/user-event": "^14.6.1",
84
90
  "@types/glob": "^8.1.0",
85
91
  "@types/jest": "^30.0.0",
86
- "@types/node": "^22.10.10",
87
- "@types/react": "^18.0.0",
88
- "@types/react-dom": "^18.0.0",
89
- "@vitejs/plugin-react": "^4.3.4",
92
+ "@types/node": "^25.0.3",
93
+ "@types/react": "^19.2.7",
94
+ "@types/react-dom": "^19.0.0",
95
+ "@vitejs/plugin-react": "^5.1.2",
90
96
  "chromatic": "^11.25.1",
91
- "cross-env": "^7.0.3",
97
+ "cross-env": "^10.1.0",
92
98
  "dotenv": "^16.4.7",
93
99
  "figma-js": "^1.16.1-0",
94
100
  "gh-pages": "^6.3.0",
95
- "glob": "^10.3.10",
101
+ "glob": "^13.0.0",
96
102
  "identity-obj-proxy": "^3.0.0",
97
- "jest": "^29.7.0",
103
+ "jest": "^30.2.0",
98
104
  "jest-environment-jsdom": "^30.0.2",
99
- "storybook": "^8.5.2",
100
- "style-dictionary": "^4.4.0",
105
+ "storybook": "^8.6.15",
106
+ "style-dictionary": "^5.1.1",
101
107
  "ts-jest": "^29.4.0",
102
108
  "ts-node": "^10.9.2",
103
109
  "typescript": "^5.7.3",
104
- "vite": "^4.0.0"
110
+ "vite": "^6.2.0"
105
111
  }
106
112
  }
package/dist/style.css DELETED
@@ -1 +0,0 @@
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;width:24px;height:24px;flex-shrink:0}.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}}