@ponchia/ui 0.3.3 → 0.3.5

package/dist/css/dots.css

@@ -1 +1 @@
-@layer bronto{.ui-dotgrid{--_dot: var(--dot-color,var(--field-dot));background-image: radial-gradient(var(--_dot) var(--dot-size),transparent var(--dot-size));background-position: 0 0;background-size: var(--dot-gap) var(--dot-gap)}.ui-dotgrid--accent{--dot-color: var(--field-dot-accent)}.ui-dotgrid--dense{--dot-gap: 8px}.ui-dotfield{--_dot: var(--dot-color,var(--field-dot));background-image: radial-gradient(var(--_dot) var(--dot-size),transparent var(--dot-size));background-size: var(--dot-gap) var(--dot-gap);inset: 0;mask-image: radial-gradient(ellipse at 50% 0%,#000 30%,transparent 78%);pointer-events: none;position: fixed;z-index: var(--z-base)}.ui-dotrule{background-image: radial-gradient(var(--line-strong) 1.4px,transparent 1.4px);background-position: 0 50%;background-size: 9px 9px;border: 0;block-size: 3px;margin: var(--space-md) 0;inline-size: 100%}.ui-dotmatrix{display: grid;gap: var(--dotmatrix-gap,0.5rem);grid-template-columns: repeat(var(--dotmatrix-cols,12),minmax(0,1fr))}.ui-dotmatrix__cell{aspect-ratio: 1;background: var(--field-dot);border-radius: 50%}.ui-dotmatrix__cell--hot{background: var(--field-dot-hot)}.ui-dotmatrix__cell--accent{background: var(--field-dot-accent)}.ui-dot{background: var(--text-dim);border-radius: 50%;display: inline-block;flex: 0 0 auto;block-size: 0.55rem;inline-size: 0.55rem}.ui-dot--accent{background: var(--accent)}.ui-dot--success{background: var(--success)}.ui-dot--warning{background: var(--warning)}.ui-dot--danger{background: var(--danger)}.ui-dot--live{background: var(--success);box-shadow: 0 0 0 0 color-mix(in srgb,var(--success) 70%,transparent);position: relative}.ui-dot--live::after{animation: pulseRing 1.8s var(--ease-out) infinite;border: 1px solid var(--success);border-radius: 50%;content: '';inset: -3px;position: absolute}.ui-status{align-items: center;color: var(--text-soft);display: inline-flex;font-family: var(--mono);font-size: var(--text-xs);gap: 0.45rem;letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-dotloader{align-items: center;display: inline-flex;gap: 0.32rem}.ui-dotloader span{animation: pulseDot 1s var(--ease-standard) infinite;background: var(--accent);border-radius: 50%;block-size: 0.42rem;inline-size: 0.42rem}.ui-dotloader span:nth-child(2){animation-delay: 0.16s}.ui-dotloader span:nth-child(3){animation-delay: 0.32s}.ui-dotspinner{--ds-box: 1.6rem;--ds-dot: 0.26rem;animation: uiSpin 1s steps(8) infinite;display: inline-block;flex: 0 0 auto;block-size: var(--ds-box);position: relative;inline-size: var(--ds-box)}.ui-dotspinner i{background: var(--accent);border-radius: 50%;block-size: var(--ds-dot);inset: 0;margin: auto;position: absolute;inline-size: var(--ds-dot)}.ui-dotspinner i:nth-child(1){opacity: 1;transform: rotate(0deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(2){opacity: 0.85;transform: rotate(45deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(3){opacity: 0.7;transform: rotate(90deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(4){opacity: 0.56;transform: rotate(135deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(5){opacity: 0.44;transform: rotate(180deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(6){opacity: 0.34;transform: rotate(225deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(7){opacity: 0.25;transform: rotate(270deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(8){opacity: 0.16;transform: rotate(315deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner--sm{--ds-box: 1.05rem;--ds-dot: 0.18rem}.ui-dotspinner--lg{--ds-box: 2.6rem;--ds-dot: 0.42rem}.ui-dotbar{display: flex;gap: 3px}.ui-dotbar i{background: var(--field-dot);border-radius: 1px;flex: 1;block-size: 0.5rem}.ui-dotbar i.is-on{background: var(--accent)}.ui-dotbar--indeterminate i{animation: pulseDot 1.1s var(--ease-standard) infinite}.ui-dotbar--indeterminate i:nth-child(2){animation-delay: 0.09s}.ui-dotbar--indeterminate i:nth-child(3){animation-delay: 0.18s}.ui-dotbar--indeterminate i:nth-child(4){animation-delay: 0.27s}.ui-dotbar--indeterminate i:nth-child(5){animation-delay: 0.36s}.ui-dotbar--indeterminate i:nth-child(6){animation-delay: 0.45s}.ui-dotbar--indeterminate i:nth-child(7){animation-delay: 0.54s}.ui-dotbar--indeterminate i:nth-child(n + 8){animation-delay: 0.63s}.ui-matrix{clip-path: inset(0 100% 0 0);transition: clip-path var(--duration-slow) var(--ease-out)}.ui-matrix.is-in{clip-path: inset(0 0 0 0)}@media (prefers-reduced-motion: reduce){.ui-dot--live::after,.ui-dotloader span,.ui-dotspinner,.ui-dotbar--indeterminate i{animation: none}.ui-dotspinner i{opacity: 0.6}.ui-matrix{clip-path: none}}}
+@layer bronto{.ui-dotgrid{--_dot: var(--dot-color,var(--field-dot));background-image: radial-gradient(var(--_dot) var(--dot-size),transparent var(--dot-size));background-position: 0 0;background-size: var(--dot-gap) var(--dot-gap)}.ui-dotgrid--accent{--dot-color: var(--field-dot-accent)}.ui-dotgrid--dense{--dot-gap: 8px}.ui-dotfield{--_dot: var(--dot-color,var(--field-dot));background-image: radial-gradient(var(--_dot) var(--dot-size),transparent var(--dot-size));background-size: var(--dot-gap) var(--dot-gap);inset: 0;mask-image: radial-gradient(ellipse at 50% 0%,#000 30%,transparent 78%);pointer-events: none;position: fixed;z-index: var(--z-base)}.ui-dotrule{background-image: radial-gradient(var(--line-strong) 1.4px,transparent 1.4px);background-position: 0 50%;background-size: 9px 9px;border: 0;block-size: 3px;margin: var(--space-md) 0;inline-size: 100%}.ui-dotmatrix{display: grid;gap: var(--dotmatrix-gap,0.5rem);grid-template-columns: repeat(var(--dotmatrix-cols,12),minmax(0,1fr))}.ui-dotmatrix__cell{aspect-ratio: 1;background: var(--field-dot);border-radius: 50%}.ui-dotmatrix__cell--hot{background: var(--field-dot-hot)}.ui-dotmatrix__cell--accent{background: var(--field-dot-accent)}.ui-dot{background: var(--text-dim);border-radius: 50%;display: inline-block;flex: 0 0 auto;block-size: 0.55rem;inline-size: 0.55rem}.ui-dot--accent{background: var(--accent)}.ui-dot--success{background: var(--success)}.ui-dot--warning{background: var(--warning)}.ui-dot--danger{background: var(--danger)}.ui-dot--info{background: var(--info)}.ui-dot--live{background: var(--success);box-shadow: 0 0 0 0 color-mix(in srgb,var(--success) 70%,transparent);position: relative}.ui-dot--live::after{animation: pulseRing 1.8s var(--ease-out) infinite;border: 1px solid var(--success);border-radius: 50%;content: '';inset: -3px;position: absolute}.ui-status{align-items: center;color: var(--text-soft);display: inline-flex;font-family: var(--mono);font-size: var(--text-xs);gap: 0.45rem;letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-dotloader{align-items: center;display: inline-flex;gap: 0.32rem}.ui-dotloader span{animation: pulseDot 1s var(--ease-standard) infinite;background: var(--accent);border-radius: 50%;block-size: 0.42rem;inline-size: 0.42rem}.ui-dotloader span:nth-child(2){animation-delay: 0.16s}.ui-dotloader span:nth-child(3){animation-delay: 0.32s}.ui-dotspinner{--ds-box: 1.6rem;--ds-dot: 0.26rem;animation: uiSpin 1s steps(8) infinite;display: inline-block;flex: 0 0 auto;block-size: var(--ds-box);position: relative;inline-size: var(--ds-box)}.ui-dotspinner i{background: var(--accent);border-radius: 50%;block-size: var(--ds-dot);inset: 0;margin: auto;position: absolute;inline-size: var(--ds-dot)}.ui-dotspinner i:nth-child(1){opacity: 1;transform: rotate(0deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(2){opacity: 0.85;transform: rotate(45deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(3){opacity: 0.7;transform: rotate(90deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(4){opacity: 0.56;transform: rotate(135deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(5){opacity: 0.44;transform: rotate(180deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(6){opacity: 0.34;transform: rotate(225deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(7){opacity: 0.25;transform: rotate(270deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(8){opacity: 0.16;transform: rotate(315deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner--sm{--ds-box: 1.05rem;--ds-dot: 0.18rem}.ui-dotspinner--lg{--ds-box: 2.6rem;--ds-dot: 0.42rem}.ui-dotbar{display: flex;gap: 3px}.ui-dotbar i{background: var(--field-dot);border-radius: var(--radius-sm);flex: 1;block-size: 0.5rem}.ui-dotbar i.is-on{background: var(--accent)}.ui-dotbar--indeterminate i{animation: pulseDot 1.1s var(--ease-standard) infinite}.ui-dotbar--indeterminate i:nth-child(2){animation-delay: 0.09s}.ui-dotbar--indeterminate i:nth-child(3){animation-delay: 0.18s}.ui-dotbar--indeterminate i:nth-child(4){animation-delay: 0.27s}.ui-dotbar--indeterminate i:nth-child(5){animation-delay: 0.36s}.ui-dotbar--indeterminate i:nth-child(6){animation-delay: 0.45s}.ui-dotbar--indeterminate i:nth-child(7){animation-delay: 0.54s}.ui-dotbar--indeterminate i:nth-child(n + 8){animation-delay: 0.63s}.ui-matrix{clip-path: inset(0 100% 0 0);transition: clip-path var(--duration-slow) var(--ease-out)}.ui-matrix.is-in{clip-path: inset(0 0 0 0)}@media (prefers-reduced-motion: reduce){.ui-dot--live::after,.ui-dotloader span,.ui-dotspinner,.ui-dotbar--indeterminate i{animation: none}.ui-dotspinner i{opacity: 0.6}.ui-matrix{clip-path: none}}}

package/dist/css/feedback.css

@@ -1 +1 @@
-@layer bronto{.ui-alert{background: var(--panel-soft);border: 1px solid var(--line);border-inline-start: 2px solid var(--line-strong);border-radius: var(--radius-md);color: var(--text-soft);display: grid;font-size: var(--text-sm);gap: 0.3rem;grid-template-columns: auto 1fr;padding: 0.8rem 0.9rem}.ui-alert::before{background: var(--text-dim);border-radius: 50%;content: '';block-size: 0.5rem;margin-block-start: 0.32rem;inline-size: 0.5rem}.ui-alert > *{grid-column: 2}.ui-alert__title{color: var(--text);font-family: var(--mono);font-size: var(--text-2xs);font-weight: 700;letter-spacing: var(--tracking-wide);margin: 0;text-transform: uppercase}.ui-alert__body{margin: 0}.ui-alert__dismiss{background: transparent;border: 0;color: var(--text-dim);cursor: pointer;font-family: var(--mono);grid-column: 3;grid-row: 1;line-height: 1;padding: 0.1rem 0.3rem}.ui-alert:has(.ui-alert__dismiss){grid-template-columns: auto 1fr auto}.ui-alert--accent{border-inline-start-color: var(--accent)}.ui-alert--accent::before{background: var(--accent)}.ui-alert--success{border-inline-start-color: var(--success)}.ui-alert--success::before{background: var(--success)}.ui-alert--warning{border-inline-start-color: var(--warning)}.ui-alert--warning::before{background: var(--warning)}.ui-alert--danger{border-inline-start-color: var(--danger)}.ui-alert--danger::before{background: var(--danger)}@media (hover: hover){.ui-alert__dismiss:hover{color: var(--text)}}.ui-toast-stack{display: grid;gap: 0.5rem;inset-block: auto 1.25rem;inset-inline: auto 1.25rem;justify-items: end;max-inline-size: min(22rem,calc(100vw - 2rem));pointer-events: none;position: fixed;z-index: var(--z-toast)}.ui-toast-stack--assertive{inset-block: 1.25rem auto}.ui-toast{align-items: flex-start;animation: uiToastIn var(--duration-base) var(--ease-spring) both;background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);box-shadow: var(--shadow-raised);color: var(--text-soft);display: grid;font-size: var(--text-sm);gap: 0.2rem 0.55rem;grid-template-columns: auto 1fr;padding: 0.7rem 0.85rem;pointer-events: auto;inline-size: 100%}.ui-toast::before{background: var(--text-dim);border-radius: 50%;content: '';grid-row: 1 / -1;block-size: 0.5rem;margin-block-start: 0.3rem;inline-size: 0.5rem}.ui-toast__title{color: var(--text);font-family: var(--mono);font-size: var(--text-2xs);font-weight: 700;letter-spacing: var(--tracking-wide);margin: 0;text-transform: uppercase}.ui-toast__close{align-self: start;background: none;border: 0;block-size: 1.4rem;color: var(--text-dim);cursor: pointer;font: inherit;grid-column: 3;grid-row: 1 / -1;inline-size: 1.4rem;padding: 0}.ui-toast__close::before{content: '\00d7';font-size: 1.1rem;line-height: 1}.ui-toast__close:hover{color: var(--text)}.ui-toast--accent::before{background: var(--accent)}.ui-toast--success::before{background: var(--success)}.ui-toast--warning::before{background: var(--warning)}.ui-toast--danger::before{background: var(--danger)}.ui-tooltip{display: inline-flex;position: relative}.ui-tooltip__bubble{background: var(--text);border-radius: var(--radius-sm);inset-block-end: calc(100% + 0.5rem);color: var(--bg);font-family: var(--mono);font-size: var(--text-2xs);inset-inline-start: 50%;letter-spacing: var(--tracking-wide);opacity: 0;padding: 0.34rem 0.5rem;pointer-events: none;position: absolute;text-transform: uppercase;transform: translate(-50%,4px);transition: opacity var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard);white-space: nowrap;z-index: var(--z-popover)}.ui-tooltip:hover .ui-tooltip__bubble,.ui-tooltip:focus-within .ui-tooltip__bubble{opacity: 1;transform: translate(-50%,0)}@supports (anchor-name: --x){.ui-tooltip{anchor-name: --ui-tooltip}.ui-tooltip__bubble{inset: auto;margin-block-end: 0.5rem;position: fixed;position-anchor: --ui-tooltip;position-area: block-start center;position-try-fallbacks: flip-block;transform: translateY(4px)}.ui-tooltip:hover .ui-tooltip__bubble,.ui-tooltip:focus-within .ui-tooltip__bubble{transform: translateY(0)}}.ui-popover{background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);box-shadow: var(--shadow-raised);color: var(--text-soft);font-size: var(--text-sm);inline-size: max-content;margin: 0;max-inline-size: min(22rem,calc(100vw - 2rem));padding: var(--space-sm) var(--space-md);position: fixed;z-index: var(--z-popover)}.ui-popover:not([popover],.is-open){display: none}.ui-popover[popover]:not(:popover-open){display: none}.ui-progress{background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-pill);block-size: 0.5rem;overflow: hidden;position: relative;inline-size: 100%}.ui-progress__bar{background: var(--accent);block-size: 100%;transition: inline-size var(--duration-base) var(--ease-out);inline-size: calc(clamp(0,var(--value,0),100) * 1%)}.ui-progress--indeterminate .ui-progress__bar{animation: uiTrack 1.1s var(--ease-standard) infinite;position: absolute;inline-size: 45%}@media (prefers-reduced-motion: reduce){.ui-progress--indeterminate .ui-progress__bar{animation-duration: 0.01ms;inset-inline-start: 0;inline-size: 100%}.ui-toast{animation: none}}}
+@layer bronto{.ui-alert{background: var(--panel-soft);border: 1px solid var(--line);border-inline-start: 2px solid var(--line-strong);border-radius: var(--radius-md);color: var(--text-soft);display: grid;font-size: var(--text-sm);gap: 0.3rem;grid-template-columns: auto 1fr;padding: 0.8rem 0.9rem}.ui-alert::before{background: var(--text-dim);border-radius: 50%;content: '';block-size: 0.5rem;margin-block-start: 0.32rem;inline-size: 0.5rem}.ui-alert > *{grid-column: 2}.ui-alert__title{color: var(--text);font-family: var(--mono);font-size: var(--text-2xs);font-weight: 700;letter-spacing: var(--tracking-wide);margin: 0;text-transform: uppercase}.ui-alert__body{margin: 0}.ui-alert__dismiss{background: transparent;border: 0;color: var(--text-dim);cursor: pointer;font-family: var(--mono);grid-column: 3;grid-row: 1;line-height: 1;padding: 0.1rem 0.3rem}.ui-alert:has(.ui-alert__dismiss){grid-template-columns: auto 1fr auto}.ui-alert--accent{border-inline-start-color: var(--accent)}.ui-alert--accent::before{background: var(--accent)}.ui-alert--success{border-inline-start-color: var(--success)}.ui-alert--success::before{background: var(--success)}.ui-alert--warning{border-inline-start-color: var(--warning)}.ui-alert--warning::before{background: var(--warning)}.ui-alert--danger{border-inline-start-color: var(--danger)}.ui-alert--danger::before{background: var(--danger)}.ui-alert--info{border-inline-start-color: var(--info)}.ui-alert--info::before{background: var(--info)}@media (hover: hover){.ui-alert__dismiss:hover{color: var(--text)}}.ui-toast-stack{display: grid;gap: 0.5rem;inset-block: auto 1.25rem;inset-inline: auto 1.25rem;justify-items: end;max-inline-size: min(22rem,calc(100vw - 2rem));pointer-events: none;position: fixed;z-index: var(--z-toast)}.ui-toast-stack--assertive{inset-block: 1.25rem auto}.ui-toast{align-items: flex-start;animation: uiToastIn var(--duration-base) var(--ease-spring) both;background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);box-shadow: var(--shadow-raised);color: var(--text-soft);display: grid;font-size: var(--text-sm);gap: 0.2rem 0.55rem;grid-template-columns: auto 1fr;padding: 0.7rem 0.85rem;pointer-events: auto;inline-size: 100%}.ui-toast::before{background: var(--text-dim);border-radius: 50%;content: '';grid-row: 1 / -1;block-size: 0.5rem;margin-block-start: 0.3rem;inline-size: 0.5rem}.ui-toast__title{color: var(--text);font-family: var(--mono);font-size: var(--text-2xs);font-weight: 700;letter-spacing: var(--tracking-wide);margin: 0;text-transform: uppercase}.ui-toast__close{align-self: start;background: none;border: 0;block-size: 1.4rem;color: var(--text-dim);cursor: pointer;font: inherit;grid-column: 3;grid-row: 1 / -1;inline-size: 1.4rem;padding: 0}.ui-toast__close::before{content: '\00d7';font-size: 1.1rem;line-height: 1}.ui-toast__close:hover{color: var(--text)}.ui-toast--accent::before{background: var(--accent)}.ui-toast--success::before{background: var(--success)}.ui-toast--warning::before{background: var(--warning)}.ui-toast--danger::before{background: var(--danger)}.ui-toast--info::before{background: var(--info)}.ui-tooltip{display: inline-flex;position: relative}.ui-tooltip__bubble{background: var(--text);border-radius: var(--radius-sm);inset-block-end: calc(100% + 0.5rem);color: var(--bg);font-family: var(--mono);font-size: var(--text-2xs);inset-inline-start: 50%;letter-spacing: var(--tracking-wide);opacity: 0;padding: 0.34rem 0.5rem;pointer-events: none;position: absolute;text-transform: uppercase;transform: translate(-50%,4px);transition: opacity var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard);white-space: nowrap;z-index: var(--z-popover)}.ui-tooltip:hover .ui-tooltip__bubble,.ui-tooltip:focus-within .ui-tooltip__bubble{opacity: 1;transform: translate(-50%,0)}@supports (anchor-name: --x){.ui-tooltip{anchor-name: --ui-tooltip}.ui-tooltip__bubble{inset: auto;margin-block-end: 0.5rem;position: fixed;position-anchor: --ui-tooltip;position-area: block-start center;position-try-fallbacks: flip-block;transform: translateY(4px)}.ui-tooltip:hover .ui-tooltip__bubble,.ui-tooltip:focus-within .ui-tooltip__bubble{transform: translateY(0)}}.ui-popover{background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);box-shadow: var(--shadow-raised);color: var(--text-soft);font-size: var(--text-sm);inline-size: max-content;margin: 0;max-inline-size: min(22rem,calc(100vw - 2rem));padding: var(--space-sm) var(--space-md);position: fixed;z-index: var(--z-popover)}.ui-popover:not([popover],.is-open){display: none}.ui-popover[popover]:not(:popover-open){display: none}.ui-progress{background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-pill);block-size: 0.5rem;overflow: hidden;position: relative;inline-size: 100%}.ui-progress__bar{background: var(--accent);block-size: 100%;transition: inline-size var(--duration-base) var(--ease-out);inline-size: calc(clamp(0,var(--value,0),100) * 1%)}.ui-progress--indeterminate .ui-progress__bar{animation: uiTrack 1.1s var(--ease-standard) infinite;position: absolute;inline-size: 45%}@media (prefers-reduced-motion: reduce){.ui-progress--indeterminate .ui-progress__bar{animation-duration: 0.01ms;inset-inline-start: 0;inline-size: 100%}.ui-toast{animation: none}}.ui-meter{background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-pill);block-size: 0.5rem;overflow: hidden;inline-size: 100%}.ui-meter__fill{background: var(--text-dim);block-size: 100%;transition: inline-size var(--duration-base) var(--ease-out);inline-size: calc(clamp(0,var(--value,0),100) * 1%)}.ui-meter--accent .ui-meter__fill{background: var(--accent)}.ui-meter--success .ui-meter__fill{background: var(--success)}.ui-meter--warning .ui-meter__fill{background: var(--warning)}.ui-meter--danger .ui-meter__fill{background: var(--danger)}.ui-steps{counter-reset: ui-step;display: flex;flex-wrap: wrap;gap: var(--space-sm);list-style: none;margin: 0;padding: 0}.ui-steps__item{align-items: center;color: var(--text-dim);counter-increment: ui-step;display: inline-flex;flex: 1 1 auto;font-family: var(--mono);font-size: var(--text-xs);gap: 0.5rem;letter-spacing: var(--tracking-wide);min-inline-size: max-content;text-transform: uppercase}.ui-steps__item::before{align-items: center;border: 1px solid var(--line-strong);border-radius: 50%;color: var(--text-dim);content: counter(ui-step);display: inline-flex;flex: 0 0 auto;block-size: 1.5rem;inline-size: 1.5rem;justify-content: center}.ui-steps__item:not(:last-child)::after{background: var(--line);block-size: 1px;content: '';flex: 1 1 1.5rem;min-inline-size: 1rem}.ui-steps__item[aria-current='step']{color: var(--text)}.ui-steps__item[aria-current='step']::before{border-color: var(--accent);color: var(--accent-text)}.ui-steps__item--done{color: var(--text-soft)}.ui-steps__item--done::before{background: var(--accent);border-color: var(--accent);color: var(--button-text)}}

package/dist/css/forms.css

@@ -1 +1 @@
-@layer bronto{.ui-field{display: grid;gap: 0.35rem}.ui-label{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);font-weight: 700;letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-input,.ui-select,.ui-textarea{background: var(--bg-elevated);border: 1px solid var(--line-strong);border-radius: var(--radius-md);color: var(--text);font-family: var(--mono);font-size: var(--text-sm);padding: 0.6rem 0.7rem;transition: border-color var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard);inline-size: 100%}.ui-input::placeholder,.ui-textarea::placeholder{color: var(--text-dim)}.ui-textarea{min-block-size: 6rem;resize: vertical}.ui-select{appearance: none;background-image: radial-gradient(var(--text-dim) 1.5px,transparent 1.5px);background-position: right 0.75rem center;background-repeat: no-repeat;background-size: 5px 5px;padding-inline-end: 1.8rem}[dir='rtl'] .ui-select{background-position: left 0.75rem center}.ui-input:focus,.ui-select:focus,.ui-textarea:focus{border-color: var(--accent);outline: none}.ui-input:focus-visible,.ui-select:focus-visible,.ui-textarea:focus-visible{outline: 2px solid var(--focus-ring);outline-offset: 1px}.ui-input:disabled,.ui-select:disabled,.ui-textarea:disabled{cursor: not-allowed;opacity: 0.5}.ui-input[aria-invalid='true'],.ui-select[aria-invalid='true'],.ui-textarea[aria-invalid='true']{border-color: var(--danger)}.ui-hint{color: var(--text-dim);font-size: var(--text-2xs)}.ui-hint--error{color: var(--danger)}.ui-input-group{display: flex;isolation: isolate}.ui-input-group > .ui-input,.ui-input-group > .ui-select{border-radius: 0;flex: 1;margin-inline-start: -1px}.ui-input-group > :first-child{border-start-start-radius: var(--radius-md);border-end-start-radius: var(--radius-md);margin-inline-start: 0}.ui-input-group > :last-child{border-start-end-radius: var(--radius-md);border-end-end-radius: var(--radius-md)}.ui-input-group > .ui-input:focus-visible{z-index: 1}.ui-input-group__addon{align-items: center;background: var(--panel-soft);border: 1px solid var(--line);color: var(--text-dim);display: flex;font-size: var(--text-sm);padding-inline: var(--space-sm);white-space: nowrap}.ui-file{color: var(--text-soft);font-size: var(--text-sm)}.ui-file::file-selector-button{background: var(--panel-soft);border: 1px solid var(--line-strong);border-radius: var(--radius-md);color: var(--text);cursor: pointer;font: inherit;margin-inline-end: var(--space-sm);padding: 0.5rem 0.85rem}.ui-file::file-selector-button:hover{border-color: var(--accent)}.ui-range{accent-color: var(--accent);inline-size: 100%}.ui-range:focus-visible{outline: 2px solid var(--focus-ring);outline-offset: 4px}.ui-error-summary{border: 1px solid var(--danger);border-radius: var(--radius-md);color: var(--text);padding: var(--space-md)}.ui-error-summary[hidden]{display: none}.ui-error-summary__title{color: var(--danger);font-family: var(--display);font-size: var(--text-sm);font-weight: 700;letter-spacing: var(--tracking-wide);margin: 0 0 var(--space-xs);text-transform: uppercase}.ui-error-summary__list{margin: 0;padding-inline-start: var(--space-md)}.ui-error-summary__list a{color: var(--danger)}.ui-search{align-items: center;background: var(--bg-elevated);border: 1px solid var(--line-strong);border-radius: var(--radius-md);display: flex;gap: 0.5rem;padding: 0 0.7rem}.ui-search::before{background: var(--text-dim);border-radius: 50%;content: '';flex: 0 0 auto;block-size: 0.42rem;inline-size: 0.42rem}.ui-search:focus-within{border-color: var(--accent)}.ui-search:focus-within::before{background: var(--accent)}.ui-search input{background: transparent;border: 0;color: var(--text);font-family: var(--mono);font-size: var(--text-sm);outline: none;padding: 0.6rem 0;inline-size: 100%}.ui-switch{align-items: center;cursor: pointer;display: inline-flex;gap: 0.6rem}.ui-switch input{position: absolute;opacity: 0;pointer-events: none}.ui-switch__track{background: var(--panel-soft);border: 1px solid var(--line-strong);border-radius: var(--radius-pill);display: inline-flex;block-size: 1.05rem;padding: 2px;transition: background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard);inline-size: 1.95rem}.ui-switch__thumb{background: var(--text-dim);border-radius: 50%;block-size: 100%;transition: transform var(--duration-fast) var(--ease-spring),background-color var(--duration-fast) var(--ease-standard);inline-size: 0.78rem}.ui-switch input:checked + .ui-switch__track{background: var(--accent-soft);border-color: var(--accent)}.ui-switch input:checked + .ui-switch__track .ui-switch__thumb{background: var(--accent);transform: translateX(0.9rem)}[dir='rtl'] .ui-switch input:checked + .ui-switch__track .ui-switch__thumb{transform: translateX(-0.9rem)}.ui-switch input:focus-visible + .ui-switch__track{outline: 2px solid var(--focus-ring);outline-offset: 2px}@media (forced-colors: active){.ui-switch__track{border-color: ButtonBorder}.ui-switch__thumb{background: ButtonText}.ui-switch input:checked + .ui-switch__track{border-color: Highlight}.ui-switch input:checked + .ui-switch__track .ui-switch__thumb{background: Highlight}}.ui-check{align-items: center;cursor: pointer;display: inline-flex;gap: 0.5rem;font-size: var(--text-sm)}.ui-check input{accent-color: var(--accent);block-size: 1rem;inline-size: 1rem}@media (pointer: coarse){.ui-input,.ui-select,.ui-textarea{min-block-size: 2.9rem}.ui-search{min-block-size: 2.9rem}.ui-check input{block-size: 1.15rem;inline-size: 1.15rem}}}
+@layer bronto{.ui-field{display: grid;gap: 0.35rem}.ui-label{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);font-weight: 700;letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-input,.ui-select,.ui-textarea{background: var(--bg-elevated);border: 1px solid var(--line-strong);border-radius: var(--radius-md);color: var(--text);font-family: var(--mono);font-size: var(--text-sm);padding: 0.6rem 0.7rem;transition: border-color var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard);inline-size: 100%}.ui-input::placeholder,.ui-textarea::placeholder{color: var(--text-dim)}.ui-textarea{min-block-size: 6rem;resize: vertical}.ui-select{appearance: none;background-image: radial-gradient(var(--text-dim) 1.5px,transparent 1.5px);background-position: right 0.75rem center;background-repeat: no-repeat;background-size: 5px 5px;padding-inline-end: 1.8rem}[dir='rtl'] .ui-select{background-position: left 0.75rem center}.ui-input:focus,.ui-select:focus,.ui-textarea:focus{border-color: var(--accent);outline: none}.ui-input:focus-visible,.ui-select:focus-visible,.ui-textarea:focus-visible{outline: 2px solid var(--focus-ring);outline-offset: 1px}.ui-input:disabled,.ui-select:disabled,.ui-textarea:disabled{cursor: not-allowed;opacity: 0.5}.ui-input[aria-invalid='true'],.ui-select[aria-invalid='true'],.ui-textarea[aria-invalid='true']{border-color: var(--danger)}.ui-hint{color: var(--text-dim);font-size: var(--text-2xs)}.ui-hint--error{color: var(--danger)}.ui-input-group{display: flex;isolation: isolate}.ui-input-group > .ui-input,.ui-input-group > .ui-select{border-radius: 0;flex: 1;margin-inline-start: -1px}.ui-input-group > :first-child{border-start-start-radius: var(--radius-md);border-end-start-radius: var(--radius-md);margin-inline-start: 0}.ui-input-group > :last-child{border-start-end-radius: var(--radius-md);border-end-end-radius: var(--radius-md)}.ui-input-group > .ui-input:focus-visible{z-index: 1}.ui-input-group__addon{align-items: center;background: var(--panel-soft);border: 1px solid var(--line);color: var(--text-dim);display: flex;font-size: var(--text-sm);padding-inline: var(--space-sm);white-space: nowrap}.ui-input-icon{display: block;position: relative}.ui-input-icon > .ui-input{padding-inline-start: 2.2rem}.ui-input-icon--end > .ui-input{padding-inline: 0.7rem 2.2rem}.ui-input-icon__icon{align-items: center;color: var(--text-dim);display: inline-flex;inset-block-start: 50%;inset-inline-start: 0.7rem;justify-content: center;pointer-events: none;position: absolute;transform: translateY(-50%)}.ui-input-icon--end .ui-input-icon__icon{inset-inline: auto 0.7rem}.ui-input-icon__icon svg{block-size: 1rem;inline-size: 1rem}.ui-input-icon:focus-within .ui-input-icon__icon{color: var(--accent)}.ui-file{color: var(--text-soft);font-size: var(--text-sm)}.ui-file::file-selector-button{background: var(--panel-soft);border: 1px solid var(--line-strong);border-radius: var(--radius-md);color: var(--text);cursor: pointer;font: inherit;margin-inline-end: var(--space-sm);padding: 0.5rem 0.85rem}.ui-file::file-selector-button:hover{border-color: var(--accent)}.ui-range{accent-color: var(--accent);inline-size: 100%}.ui-range:focus-visible{outline: 2px solid var(--focus-ring);outline-offset: 4px}.ui-error-summary{border: 1px solid var(--danger);border-radius: var(--radius-md);color: var(--text);padding: var(--space-md)}.ui-error-summary[hidden]{display: none}.ui-error-summary__title{color: var(--danger);font-family: var(--display);font-size: var(--text-sm);font-weight: 700;letter-spacing: var(--tracking-wide);margin: 0 0 var(--space-xs);text-transform: uppercase}.ui-error-summary__list{margin: 0;padding-inline-start: var(--space-md)}.ui-error-summary__list a{color: var(--danger)}.ui-search{align-items: center;background: var(--bg-elevated);border: 1px solid var(--line-strong);border-radius: var(--radius-md);display: flex;gap: 0.5rem;padding: 0 0.7rem}.ui-search::before{background: var(--text-dim);border-radius: 50%;content: '';flex: 0 0 auto;block-size: 0.42rem;inline-size: 0.42rem}.ui-search:focus-within{border-color: var(--accent)}.ui-search:focus-within::before{background: var(--accent)}.ui-search input{background: transparent;border: 0;color: var(--text);font-family: var(--mono);font-size: var(--text-sm);outline: none;padding: 0.6rem 0;inline-size: 100%}.ui-switch{align-items: center;cursor: pointer;display: inline-flex;gap: 0.6rem}.ui-switch input{position: absolute;opacity: 0;pointer-events: none}.ui-switch__track{background: var(--panel-soft);border: 1px solid var(--line-strong);border-radius: var(--radius-pill);display: inline-flex;block-size: 1.05rem;padding: 2px;transition: background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard);inline-size: 1.95rem}.ui-switch__thumb{background: var(--text-dim);border-radius: 50%;block-size: 100%;transition: transform var(--duration-fast) var(--ease-spring),background-color var(--duration-fast) var(--ease-standard);inline-size: 0.78rem}.ui-switch input:checked + .ui-switch__track{background: var(--accent-soft);border-color: var(--accent)}.ui-switch input:checked + .ui-switch__track .ui-switch__thumb{background: var(--accent);transform: translateX(0.9rem)}[dir='rtl'] .ui-switch input:checked + .ui-switch__track .ui-switch__thumb{transform: translateX(-0.9rem)}.ui-switch input:focus-visible + .ui-switch__track{outline: 2px solid var(--focus-ring);outline-offset: 2px}@media (forced-colors: active){.ui-switch__track{border-color: ButtonBorder}.ui-switch__thumb{background: ButtonText}.ui-switch input:checked + .ui-switch__track{border-color: Highlight}.ui-switch input:checked + .ui-switch__track .ui-switch__thumb{background: Highlight}}.ui-check{align-items: center;cursor: pointer;display: inline-flex;gap: 0.5rem;font-size: var(--text-sm)}.ui-check input{accent-color: var(--accent);block-size: 1rem;inline-size: 1rem}@media (pointer: coarse){.ui-input,.ui-select,.ui-textarea{min-block-size: 2.9rem}.ui-search{min-block-size: 2.9rem}.ui-check input{block-size: 1.15rem;inline-size: 1.15rem}}}

package/dist/css/overlay.css

@@ -1 +1 @@
-@layer bronto{.ui-modal{background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-lg);box-shadow: var(--shadow-raised);color: var(--text);margin: auto;max-block-size: min(85vh,44rem);max-inline-size: min(32rem,calc(100vw - 2rem));overflow: hidden;padding: 0;inline-size: 100%}.ui-modal::backdrop{backdrop-filter: blur(2px);background: color-mix(in srgb,var(--bg) 70%,transparent)}.ui-modal[open]{animation: uiToastIn var(--duration-base) var(--ease-spring) both;display: grid;grid-template-rows: auto 1fr auto}.ui-modal.is-open{animation: uiToastIn var(--duration-base) var(--ease-spring) both;display: grid;grid-template-rows: auto 1fr auto}.ui-modal__head{align-items: flex-start;border-block-end: 1px solid var(--line);display: flex;gap: var(--space-sm);justify-content: space-between;padding: var(--space-md)}.ui-modal__title{color: var(--text);font-family: var(--display);font-size: var(--text-lg);letter-spacing: var(--tracking-wide);margin: 0;text-transform: uppercase}.ui-modal__body{overflow-y: auto;padding: var(--space-md)}.ui-modal__foot{border-block-start: 1px solid var(--line);display: flex;flex-wrap: wrap;gap: var(--space-xs);justify-content: flex-end;padding: var(--space-md)}.ui-modal__close{background: transparent;border: 1px solid var(--line-strong);border-radius: var(--radius-md);color: var(--text);cursor: pointer;flex: 0 0 auto;font-family: var(--mono);line-height: 1;padding: 0.34rem 0.5rem}.ui-modal--drawer{block-size: 100vh;margin: 0;margin-inline-start: auto;max-block-size: 100vh;max-inline-size: min(26rem,100vw);border-radius: 0;border-width: 0;border-inline-start-width: 1px}@media (hover: hover){.ui-modal__close:hover{border-color: var(--accent);color: var(--accent-text)}}.ui-menu-host{display: inline-block;position: relative}.ui-menu{background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);box-shadow: var(--shadow-raised);display: grid;gap: 1px;min-inline-size: 11rem;padding: 0.3rem;position: absolute;inset-inline-end: 0;inset-block-start: calc(100% + 0.4rem);z-index: var(--z-overlay)}.ui-menu__label{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: var(--tracking-wide);padding: 0.45rem 0.55rem 0.2rem;text-transform: uppercase}.ui-menu__item{align-items: center;background: transparent;border: 0;border-radius: var(--radius-sm);color: var(--text-soft);cursor: pointer;display: flex;font-family: var(--mono);font-size: var(--text-sm);gap: 0.5rem;padding: 0.5rem 0.55rem;text-align: start;inline-size: 100%}.ui-menu__item::before{background: currentColor;border-radius: 50%;content: '';block-size: 0.3rem;opacity: 0.4;inline-size: 0.3rem}.ui-menu__sep{background: var(--line);border: 0;block-size: 1px;margin: 0.2rem 0}@media (hover: hover){.ui-menu__item:hover{background: var(--bg-accent);color: var(--text)}.ui-menu__item:hover::before{opacity: 1}}.ui-combobox{display: inline-block;min-inline-size: 14rem;position: relative}.ui-combobox__input{inline-size: 100%}.ui-combobox__list{background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);box-shadow: var(--shadow-raised);display: grid;gap: 1px;list-style: none;margin: 0;max-block-size: 16rem;overflow-y: auto;padding: 0.3rem;position: absolute;inset-block-start: calc(100% + 0.4rem);inset-inline: 0;z-index: var(--z-overlay)}.ui-combobox__list[hidden]{display: none}.ui-combobox__option{border-radius: var(--radius-sm);color: var(--text-soft);cursor: pointer;font-family: var(--mono);font-size: var(--text-sm);padding: 0.5rem 0.55rem}.ui-combobox__option[hidden]{display: none}.ui-combobox__option.is-active,.ui-combobox__option[aria-selected='true']{background: var(--bg-accent);color: var(--text)}.ui-combobox__empty{color: var(--text-dim);font-size: var(--text-2xs);padding: 0.5rem 0.55rem}.ui-combobox__empty[hidden]{display: none}@media (max-width: 560px){.ui-modal{border-radius: var(--radius-lg) var(--radius-lg) 0 0;margin: auto auto 0;max-block-size: 88vh;max-inline-size: 100vw;inline-size: 100vw}.ui-modal--drawer{border-radius: 0;border-width: 1px 0 0;block-size: 88vh;margin: auto 0 0;max-block-size: 88vh;max-inline-size: 100vw;inline-size: 100vw}.ui-menu{inset-inline: 0;min-inline-size: 0}}@media (prefers-reduced-motion: reduce){.ui-modal[open]{animation: none}}}
+@layer bronto{.ui-modal{background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-lg);box-shadow: var(--shadow-raised);color: var(--text);margin: auto;max-block-size: min(85vh,44rem);max-inline-size: min(32rem,calc(100vw - 2rem));overflow: hidden;padding: 0;inline-size: 100%}.ui-modal::backdrop{backdrop-filter: blur(2px);background: color-mix(in srgb,var(--bg) 70%,transparent)}.ui-modal[open]{animation: uiToastIn var(--duration-base) var(--ease-spring) both;display: grid;grid-template-rows: auto 1fr auto}.ui-modal.is-open{animation: uiToastIn var(--duration-base) var(--ease-spring) both;display: grid;grid-template-rows: auto 1fr auto}.ui-modal__head{align-items: flex-start;border-block-end: 1px solid var(--line);display: flex;gap: var(--space-sm);justify-content: space-between;padding: var(--space-md)}.ui-modal__title{color: var(--text);font-family: var(--display);font-size: var(--text-lg);letter-spacing: var(--tracking-wide);margin: 0;text-transform: uppercase}.ui-modal__body{overflow-y: auto;padding: var(--space-md)}.ui-modal__foot{border-block-start: 1px solid var(--line);display: flex;flex-wrap: wrap;gap: var(--space-xs);justify-content: flex-end;padding: var(--space-md)}.ui-modal__close{background: transparent;border: 1px solid var(--line-strong);border-radius: var(--radius-md);color: var(--text);cursor: pointer;flex: 0 0 auto;font-family: var(--mono);line-height: 1;padding: 0.34rem 0.5rem}.ui-modal--drawer{block-size: 100vh;margin: 0;margin-inline-start: auto;max-block-size: 100vh;max-inline-size: min(26rem,100vw);border-radius: 0;border-width: 0;border-inline-start-width: 1px}@media (hover: hover){.ui-modal__close:hover{border-color: var(--accent);color: var(--accent-text)}}.ui-lightbox{background: color-mix(in srgb,var(--bg) 92%,#000);border: 0;block-size: 100vh;color: var(--text);max-block-size: 100vh;max-inline-size: 100vw;padding: 0;inline-size: 100vw}.ui-lightbox::backdrop{background: color-mix(in srgb,#000 80%,transparent)}.ui-lightbox[open]{align-content: center;display: grid}.ui-lightbox .ui-carousel{inline-size: 100%;margin: auto;max-inline-size: min(64rem,100vw)}.ui-lightbox .ui-carousel__slide > img{margin-inline: auto;max-block-size: 80vh;max-inline-size: 100%;inline-size: auto;object-fit: contain}.ui-lightbox__close{inset-block-start: var(--space-sm);inset-inline-end: var(--space-sm);position: fixed;z-index: var(--z-raised)}.ui-menu-host{display: inline-block;position: relative}.ui-menu{background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);box-shadow: var(--shadow-raised);display: grid;gap: 1px;min-inline-size: 11rem;padding: 0.3rem;position: absolute;inset-inline-end: 0;inset-block-start: calc(100% + 0.4rem);z-index: var(--z-overlay)}.ui-menu__label{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: var(--tracking-wide);padding: 0.45rem 0.55rem 0.2rem;text-transform: uppercase}.ui-menu__item{align-items: center;background: transparent;border: 0;border-radius: var(--radius-sm);color: var(--text-soft);cursor: pointer;display: flex;font-family: var(--mono);font-size: var(--text-sm);gap: 0.5rem;padding: 0.5rem 0.55rem;text-align: start;inline-size: 100%}.ui-menu__item::before{background: currentColor;border-radius: 50%;content: '';block-size: 0.3rem;opacity: 0.4;inline-size: 0.3rem}.ui-menu__sep{background: var(--line);border: 0;block-size: 1px;margin: 0.2rem 0}@media (hover: hover){.ui-menu__item:hover{background: var(--bg-accent);color: var(--text)}.ui-menu__item:hover::before{opacity: 1}}.ui-combobox{display: inline-block;min-inline-size: 14rem;position: relative}.ui-combobox__input{inline-size: 100%}.ui-combobox__list{background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);box-shadow: var(--shadow-raised);display: grid;gap: 1px;list-style: none;margin: 0;max-block-size: 16rem;overflow-y: auto;padding: 0.3rem;position: absolute;inset-block-start: calc(100% + 0.4rem);inset-inline: 0;z-index: var(--z-overlay)}.ui-combobox__list[hidden]{display: none}.ui-combobox__option{border-radius: var(--radius-sm);color: var(--text-soft);cursor: pointer;font-family: var(--mono);font-size: var(--text-sm);padding: 0.5rem 0.55rem}.ui-combobox__option[hidden]{display: none}.ui-combobox__option.is-active,.ui-combobox__option[aria-selected='true']{background: var(--bg-accent);color: var(--text)}.ui-combobox__empty{color: var(--text-dim);font-size: var(--text-2xs);padding: 0.5rem 0.55rem}.ui-combobox__empty[hidden]{display: none}@media (max-width: 560px){.ui-modal{border-radius: var(--radius-lg) var(--radius-lg) 0 0;margin: auto auto 0;max-block-size: 88vh;max-inline-size: 100vw;inline-size: 100vw}.ui-modal--drawer{border-radius: 0;border-width: 1px 0 0;block-size: 88vh;margin: auto 0 0;max-block-size: 88vh;max-inline-size: 100vw;inline-size: 100vw}.ui-menu{inset-inline: 0;min-inline-size: 0}}@media (prefers-reduced-motion: reduce){.ui-modal[open]{animation: none}}}

package/dist/css/primitives.css

@@ -1 +1 @@
-@layer bronto{.ui-stack{display: grid;gap: var(--stack-gap,var(--space-md))}.ui-cluster{align-items: center;display: flex;flex-wrap: wrap;gap: var(--cluster-gap,var(--space-xs))}.ui-cluster--between{justify-content: space-between}.ui-grid{display: grid;gap: var(--grid-gap,var(--space-md));grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--grid-min,16rem)),1fr))}.ui-sidebar{display: flex;flex-wrap: wrap;gap: var(--sidebar-gap,var(--space-md))}.ui-sidebar > :first-child{flex-basis: var(--sidebar-width,16rem);flex-grow: 1}.ui-sidebar > :last-child{flex-basis: 0;flex-grow: 999;min-inline-size: var(--sidebar-min,60%)}.ui-switcher{display: flex;flex-wrap: wrap;gap: var(--switcher-gap,var(--space-md))}.ui-switcher > *{flex-basis: calc((var(--switcher-min,24rem) - 100%) * 999);flex-grow: 1}.ui-center{box-sizing: content-box;margin-inline: auto;max-inline-size: var(--center-max,64rem);padding-inline: var(--center-gutter,var(--space-md))}.ui-ratio{aspect-ratio: var(--ratio,16 / 9)}.ui-ratio > *{block-size: 100%;inline-size: 100%;object-fit: cover}.ui-cq{container: var(--cq-name,bronto) / inline-size}@container bronto (max-width: 34rem){.ui-grid{--grid-min: 100%}}.ui-surface,.ui-card,.ui-panel{background: var(--panel);border: 1px solid var(--line)}.ui-card,.ui-panel{border-radius: var(--radius-lg);display: grid;gap: var(--space-sm);padding: var(--space-md)}.ui-card{transition: border-color var(--duration-base) var(--ease-standard),background-color var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard)}.ui-panel{background: var(--panel-strong)}.ui-card--accent{border-color: var(--accent)}.ui-card--interactive:focus-within{border-color: var(--line-strong)}.ui-card__head,.ui-panel__head{align-items: flex-start;display: flex;gap: var(--space-sm);justify-content: space-between}.ui-divider{border: 0;border-block-start: 1px solid var(--line);margin: 0}.ui-statgrid,.ui-app-metrics{display: grid;gap: var(--space-md);grid-template-columns: repeat(auto-fit,minmax(11rem,1fr))}@container bronto (max-width: 30rem){.ui-statgrid,.ui-app-metrics{grid-template-columns: 1fr}}.ui-stat,.ui-app-metric{background: var(--panel);border: 1px solid var(--line);border-radius: var(--radius-md);display: grid;gap: 0.4rem;padding: var(--space-md)}.ui-stat__label,.ui-app-metric__label{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-stat__value,.ui-app-metric__value{color: var(--text);font-family: var(--display);font-size: 1.9rem;font-variant-numeric: tabular-nums;letter-spacing: 0.01em;line-height: 1}.ui-stat__delta,.ui-app-metric__delta{font-family: var(--mono);font-size: var(--text-xs)}.ui-stat__delta.is-pos,.ui-app-metric__delta.is-pos{color: var(--success)}.ui-stat__delta.is-neg,.ui-app-metric__delta.is-neg{color: var(--danger)}.ui-num{font-variant-numeric: tabular-nums;text-align: end}.ui-num--pos{color: var(--success)}.ui-num--neg{color: var(--danger)}.ui-num--muted{color: var(--text-dim)}.ui-eyebrow{color: var(--accent-text);font-family: var(--display);font-size: var(--text-xs);font-weight: 700;letter-spacing: var(--tracking-wide);margin: 0;text-transform: uppercase}.ui-eyebrow--muted{color: var(--text-dim)}.ui-eyebrow--sm{font-size: var(--text-2xs)}.ui-button{align-items: center;background: var(--accent);border: 1px solid var(--accent);border-radius: var(--radius-md);color: var(--button-text);cursor: pointer;display: inline-flex;font-family: var(--mono);font-size: var(--text-sm);font-weight: 600;gap: 0.45rem;justify-content: center;letter-spacing: var(--tracking-wide);line-height: 1;min-block-size: 2.4rem;min-inline-size: 2.4rem;padding: 0.66rem 1rem;text-transform: uppercase;transition: background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard)}.ui-button--ghost{background: transparent;border-color: var(--line-strong);color: var(--text)}.ui-button--subtle{background: var(--panel-soft);border-color: var(--line);color: var(--text)}.ui-button--danger{background: var(--danger);border-color: var(--danger);color: var(--button-text)}.ui-button--icon{aspect-ratio: 1;min-inline-size: 2.4rem;padding: 0}.ui-button--sm{font-size: var(--text-xs);gap: 0.3rem;min-block-size: 1.9rem;min-inline-size: 1.9rem;padding: 0.4rem 0.66rem}.ui-button--lg{font-size: var(--text-base);gap: 0.55rem;min-block-size: 2.9rem;min-inline-size: 2.9rem;padding: 0.85rem 1.4rem}.ui-button:disabled,.ui-button[aria-disabled='true']{cursor: not-allowed;opacity: 0.45}.ui-button:active{transform: translateY(1px)}.ui-button[aria-busy='true']{cursor: progress;pointer-events: none}.ui-button[aria-busy='true']::before{animation: uiSpin 0.6s linear infinite;block-size: 0.9em;border: 2px solid currentcolor;border-block-start-color: transparent;border-radius: var(--radius-pill);content: '';flex: none;inline-size: 0.9em}@media (prefers-reduced-motion: reduce){.ui-button[aria-busy='true']::before{animation-duration: 1.4s}}.ui-link{color: var(--text);text-decoration: underline;text-decoration-color: color-mix(in srgb,var(--accent) 55%,transparent);text-decoration-thickness: 1px;text-underline-offset: 0.22rem;transition: color var(--duration-fast) var(--ease-standard),text-decoration-color var(--duration-fast) var(--ease-standard)}.ui-link--arrow,.ui-link--cta{align-items: center;display: inline-flex;gap: 0.4rem;text-decoration: none}.ui-link--cta{color: var(--accent-text);font-family: var(--display);font-weight: 700;letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-link--arrow::after,.ui-link--cta::after{border-inline-end: 1px solid currentColor;border-block-start: 1px solid currentColor;content: '';block-size: 0.42rem;transform: rotate(45deg);transition: transform var(--duration-fast) var(--ease-standard);inline-size: 0.42rem}.ui-chip{align-items: center;background: transparent;border: 1px solid var(--line-strong);border-radius: var(--radius-sm);color: var(--text-soft);display: inline-flex;font-family: var(--mono);font-size: var(--text-2xs);gap: 0.36rem;letter-spacing: var(--tracking-wide);line-height: 1;min-block-size: 1.7rem;padding: 0.32rem 0.55rem;text-transform: uppercase}.ui-chip--accent{color: var(--accent-text);border-color: var(--accent)}.ui-badge{align-items: center;background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-sm);color: var(--text-soft);display: inline-flex;font-family: var(--mono);font-size: var(--text-2xs);font-weight: 700;gap: 0.34rem;letter-spacing: var(--tracking-wide);line-height: 1;padding: 0.28rem 0.5rem;text-transform: uppercase}.ui-badge--accent{background: var(--accent-soft);border-color: color-mix(in srgb,var(--accent) 45%,var(--line))}.ui-badge--success{background: var(--success-soft);border-color: color-mix(in srgb,var(--success) 40%,var(--line))}.ui-badge--warning{background: var(--warning-soft);border-color: color-mix(in srgb,var(--warning) 40%,var(--line))}.ui-badge--danger{background: var(--danger-soft);border-color: color-mix(in srgb,var(--danger) 40%,var(--line))}.ui-badge--muted{background: transparent;border-color: var(--line);color: var(--text-dim)}.ui-badge--dot::before{background: var(--text-soft);border-radius: 50%;content: '';flex: 0 0 auto;block-size: 0.4rem;inline-size: 0.4rem}.ui-badge--accent.ui-badge--dot::before{background: var(--accent)}.ui-badge--success.ui-badge--dot::before{background: var(--success)}.ui-badge--warning.ui-badge--dot::before{background: var(--warning)}.ui-badge--danger.ui-badge--dot::before{background: var(--danger)}.ui-key-value{display: grid;gap: 0.55rem;margin: 0}.ui-key-value div{border-block-start: 1px solid var(--line);display: grid;gap: 0.16rem;padding-block-start: 0.6rem}.ui-key-value dt{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);font-weight: 700;letter-spacing: var(--tracking-wide);line-height: 1;text-transform: uppercase}.ui-key-value dd{color: var(--text);font-family: var(--mono);margin: 0}@media (hover: hover){.ui-card:hover{border-color: var(--line-strong)}.ui-card--interactive:hover{box-shadow: var(--shadow-raised);transform: translateY(-2px)}.ui-button:hover{background: var(--accent-strong);border-color: var(--accent-strong)}.ui-button--ghost:hover,.ui-button--subtle:hover{background: var(--panel-soft);border-color: var(--accent);color: var(--text)}.ui-button--danger:hover{background: color-mix(in srgb,var(--danger) 84%,#000)}.ui-link:hover{color: var(--accent-text);text-decoration-color: var(--accent)}.ui-link--arrow:hover::after,.ui-link--cta:hover::after{transform: translateX(0.14rem) rotate(45deg)}[dir='rtl'] .ui-link--arrow:hover::after,[dir='rtl'] .ui-link--cta:hover::after{transform: translateX(-0.14rem) rotate(45deg)}.ui-chip--accent:hover{background: var(--accent-soft)}}@media (pointer: coarse){.ui-button{min-block-size: 2.9rem;min-inline-size: 2.9rem}.ui-button--icon{min-inline-size: 2.9rem}}.ui-empty-state,.ui-app-empty-state{border: 1px dashed var(--line-strong);border-radius: var(--radius-md);color: var(--text-dim);padding: var(--space-lg);text-align: center}.ui-empty-state p,.ui-app-empty-state p{color: var(--text-dim);margin: 0.3rem 0 0}}
+@layer bronto{.ui-stack{display: grid;gap: var(--stack-gap,var(--space-md))}.ui-cluster{align-items: center;display: flex;flex-wrap: wrap;gap: var(--cluster-gap,var(--space-xs))}.ui-cluster--between{justify-content: space-between}.ui-grid{display: grid;gap: var(--grid-gap,var(--space-md));grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--grid-min,16rem)),1fr))}.ui-sidebar{display: flex;flex-wrap: wrap;gap: var(--sidebar-gap,var(--space-md))}.ui-sidebar > :first-child{flex-basis: var(--sidebar-width,16rem);flex-grow: 1}.ui-sidebar > :last-child{flex-basis: 0;flex-grow: 999;min-inline-size: var(--sidebar-min,60%)}.ui-switcher{display: flex;flex-wrap: wrap;gap: var(--switcher-gap,var(--space-md))}.ui-switcher > *{flex-basis: calc((var(--switcher-min,24rem) - 100%) * 999);flex-grow: 1}.ui-center{box-sizing: content-box;margin-inline: auto;max-inline-size: var(--center-max,64rem);padding-inline: var(--center-gutter,var(--space-md))}.ui-ratio{aspect-ratio: var(--ratio,16 / 9)}.ui-ratio > *{block-size: 100%;inline-size: 100%;object-fit: cover}.ui-cq{container: var(--cq-name,bronto) / inline-size}@container bronto (max-width: 34rem){.ui-grid{--grid-min: 100%}}.ui-surface,.ui-card,.ui-panel{background: var(--panel);border: 1px solid var(--line)}.ui-card,.ui-panel{border-radius: var(--radius-lg);display: grid;gap: var(--space-sm);padding: var(--space-md)}.ui-card{transition: border-color var(--duration-base) var(--ease-standard),background-color var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard)}.ui-panel{background: var(--panel-strong)}.ui-card--accent{border-color: var(--accent)}.ui-card--interactive:focus-within{border-color: var(--line-strong)}.ui-card__head,.ui-panel__head{align-items: flex-start;display: flex;gap: var(--space-sm);justify-content: space-between}.ui-divider{border: 0;border-block-start: 1px solid var(--line);margin: 0}.ui-statgrid,.ui-app-metrics{display: grid;gap: var(--space-md);grid-template-columns: repeat(auto-fit,minmax(11rem,1fr))}@container bronto (max-width: 30rem){.ui-statgrid,.ui-app-metrics{grid-template-columns: 1fr}}.ui-stat,.ui-app-metric{background: var(--panel);border: 1px solid var(--line);border-radius: var(--radius-md);display: grid;gap: 0.4rem;padding: var(--space-md)}.ui-stat__label,.ui-app-metric__label{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-stat__value,.ui-app-metric__value{color: var(--text);font-family: var(--display);font-size: 1.9rem;font-variant-numeric: tabular-nums;letter-spacing: 0.01em;line-height: 1}.ui-stat__delta,.ui-app-metric__delta{font-family: var(--mono);font-size: var(--text-xs)}.ui-stat__delta.is-pos,.ui-app-metric__delta.is-pos{color: var(--success)}.ui-stat__delta.is-neg,.ui-app-metric__delta.is-neg{color: var(--danger)}.ui-num{font-variant-numeric: tabular-nums;text-align: end}.ui-num--pos{color: var(--success)}.ui-num--neg{color: var(--danger)}.ui-num--muted{color: var(--text-dim)}.ui-eyebrow{color: var(--accent-text);font-family: var(--display);font-size: var(--text-xs);font-weight: 700;letter-spacing: var(--tracking-wide);margin: 0;text-transform: uppercase}.ui-eyebrow--muted{color: var(--text-dim)}.ui-eyebrow--sm{font-size: var(--text-2xs)}.ui-button{align-items: center;background: var(--accent);border: 1px solid var(--accent);border-radius: var(--radius-md);color: var(--button-text);cursor: pointer;display: inline-flex;font-family: var(--mono);font-size: var(--text-sm);font-weight: 600;gap: 0.45rem;justify-content: center;letter-spacing: var(--tracking-wide);line-height: 1;min-block-size: 2.4rem;min-inline-size: 2.4rem;padding: 0.66rem 1rem;text-transform: uppercase;transition: background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard)}.ui-button--ghost{background: transparent;border-color: var(--line-strong);color: var(--text)}.ui-button--subtle{background: var(--panel-soft);border-color: var(--line);color: var(--text)}.ui-button--danger{background: var(--danger);border-color: var(--danger);color: var(--button-text)}.ui-button--icon{aspect-ratio: 1;min-inline-size: 2.4rem;padding: 0}.ui-button--sm{font-size: var(--text-xs);gap: 0.3rem;min-block-size: 1.9rem;min-inline-size: 1.9rem;padding: 0.4rem 0.66rem}.ui-button--lg{font-size: var(--text-base);gap: 0.55rem;min-block-size: 2.9rem;min-inline-size: 2.9rem;padding: 0.85rem 1.4rem}.ui-button:disabled,.ui-button[aria-disabled='true']{cursor: not-allowed;opacity: 0.45}.ui-button:active{transform: translateY(1px)}.ui-button[aria-busy='true']{cursor: progress;pointer-events: none}.ui-button[aria-busy='true']::before{animation: uiSpin 0.6s linear infinite;block-size: 0.9em;border: 2px solid currentcolor;border-block-start-color: transparent;border-radius: var(--radius-pill);content: '';flex: none;inline-size: 0.9em}@media (prefers-reduced-motion: reduce){.ui-button[aria-busy='true']::before{animation-duration: 1.4s}}.ui-link{color: var(--text);text-decoration: underline;text-decoration-color: color-mix(in srgb,var(--accent) 55%,transparent);text-decoration-thickness: 1px;text-underline-offset: 0.22rem;transition: color var(--duration-fast) var(--ease-standard),text-decoration-color var(--duration-fast) var(--ease-standard)}.ui-link--arrow,.ui-link--cta{align-items: center;display: inline-flex;gap: 0.4rem;text-decoration: none}.ui-link--cta{color: var(--accent-text);font-family: var(--display);font-weight: 700;letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-link--arrow::after,.ui-link--cta::after{border-inline-end: 1px solid currentColor;border-block-start: 1px solid currentColor;content: '';block-size: 0.42rem;transform: rotate(45deg);transition: transform var(--duration-fast) var(--ease-standard);inline-size: 0.42rem}.ui-chip{align-items: center;background: transparent;border: 1px solid var(--line-strong);border-radius: var(--radius-sm);color: var(--text-soft);display: inline-flex;font-family: var(--mono);font-size: var(--text-2xs);gap: 0.36rem;letter-spacing: var(--tracking-wide);line-height: 1;min-block-size: 1.7rem;padding: 0.32rem 0.55rem;text-transform: uppercase}.ui-chip--accent{color: var(--accent-text);border-color: var(--accent)}.ui-badge{align-items: center;background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-sm);color: var(--text-soft);display: inline-flex;font-family: var(--mono);font-size: var(--text-2xs);font-weight: 700;gap: 0.34rem;letter-spacing: var(--tracking-wide);line-height: 1;padding: 0.28rem 0.5rem;text-transform: uppercase}.ui-badge--accent{background: var(--accent-soft);border-color: color-mix(in srgb,var(--accent) 45%,var(--line))}.ui-badge--success{background: var(--success-soft);border-color: color-mix(in srgb,var(--success) 40%,var(--line))}.ui-badge--warning{background: var(--warning-soft);border-color: color-mix(in srgb,var(--warning) 40%,var(--line))}.ui-badge--danger{background: var(--danger-soft);border-color: color-mix(in srgb,var(--danger) 40%,var(--line))}.ui-badge--info{background: var(--info-soft);border-color: color-mix(in srgb,var(--info) 40%,var(--line))}.ui-badge--muted{background: transparent;border-color: var(--line);color: var(--text-dim)}.ui-badge--dot::before{background: var(--text-soft);border-radius: 50%;content: '';flex: 0 0 auto;block-size: 0.4rem;inline-size: 0.4rem}.ui-badge--accent.ui-badge--dot::before{background: var(--accent)}.ui-badge--success.ui-badge--dot::before{background: var(--success)}.ui-badge--warning.ui-badge--dot::before{background: var(--warning)}.ui-badge--danger.ui-badge--dot::before{background: var(--danger)}.ui-badge--info.ui-badge--dot::before{background: var(--info)}.ui-key-value{display: grid;gap: 0.55rem;margin: 0}.ui-key-value div{border-block-start: 1px solid var(--line);display: grid;gap: 0.16rem;padding-block-start: 0.6rem}.ui-key-value dt{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);font-weight: 700;letter-spacing: var(--tracking-wide);line-height: 1;text-transform: uppercase}.ui-key-value dd{color: var(--text);font-family: var(--mono);margin: 0}@media (hover: hover){.ui-card:hover{border-color: var(--line-strong)}.ui-card--interactive:hover{box-shadow: var(--shadow-raised);transform: translateY(-2px)}.ui-button:hover{background: var(--accent-strong);border-color: var(--accent-strong)}.ui-button--ghost:hover,.ui-button--subtle:hover{background: var(--panel-soft);border-color: var(--accent);color: var(--text)}.ui-button--danger:hover{background: color-mix(in srgb,var(--danger) 84%,#000)}.ui-link:hover{color: var(--accent-text);text-decoration-color: var(--accent)}.ui-link--arrow:hover::after,.ui-link--cta:hover::after{transform: translateX(0.14rem) rotate(45deg)}[dir='rtl'] .ui-link--arrow:hover::after,[dir='rtl'] .ui-link--cta:hover::after{transform: translateX(-0.14rem) rotate(45deg)}.ui-chip--accent:hover{background: var(--accent-soft)}}@media (pointer: coarse){.ui-button{min-block-size: 2.9rem;min-inline-size: 2.9rem}.ui-button--icon{min-inline-size: 2.9rem}}.ui-empty-state,.ui-app-empty-state{border: 1px dashed var(--line-strong);border-radius: var(--radius-md);color: var(--text-dim);padding: var(--space-lg);text-align: center}.ui-empty-state p,.ui-app-empty-state p{color: var(--text-dim);margin: 0.3rem 0 0}.ui-kbd{align-items: center;background: var(--panel-soft);border: 1px solid var(--line-strong);border-radius: var(--radius-sm);color: var(--text-soft);display: inline-flex;font-family: var(--mono);font-size: var(--text-2xs);justify-content: center;line-height: 1;min-inline-size: 1.4rem;padding: 0.18rem 0.4rem}.ui-timeline{display: grid;gap: var(--space-md);list-style: none;margin: 0;padding: 0}.ui-timeline__item{border-inline-start: 1px solid var(--line);display: grid;gap: 0.2rem;padding-inline-start: var(--space-md);position: relative}.ui-timeline__item::before{background: var(--line-strong);border-radius: 50%;block-size: 0.5rem;content: '';inline-size: 0.5rem;inset-block-start: 0.18rem;inset-inline-start: calc(-0.25rem - 0.5px);position: absolute}.ui-timeline__item[aria-current]::before{background: var(--accent)}.ui-timeline__time{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: var(--tracking-wide);text-transform: uppercase}}

package/dist/css/site.css

@@ -1 +1 @@
-@layer bronto{.ui-container{inline-size: 100%;margin-inline: auto;max-inline-size: var(--container,72rem);padding-inline: var(--space-md)}.ui-container--narrow{max-inline-size: var(--container-narrow,44rem)}.ui-container--wide{max-inline-size: var(--container-wide,82rem)}.ui-skiplink{background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);color: var(--text);inset-block-start: -4rem;inset-inline-start: var(--space-md);padding: 0.7rem 1rem;position: fixed;z-index: var(--z-toast)}.ui-skiplink:focus{inset-block-start: var(--space-md)}.ui-siteheader{align-items: center;border-block-end: 1px solid var(--line);display: flex;flex-wrap: wrap;gap: var(--space-md);justify-content: space-between;padding-block: var(--space-sm)}.ui-siteheader--sticky{position: sticky;inset-block-start: 0;z-index: var(--z-sticky)}.ui-siteheader__brand{align-items: center;color: var(--text);display: inline-flex;font-family: var(--display);font-size: var(--text-lg);gap: 0.5rem;letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-siteheader__brand::before{background: var(--accent);border-radius: 50%;block-size: 0.5rem;content: '';flex: 0 0 auto;inline-size: 0.5rem}.ui-siteheader__actions{align-items: center;display: inline-flex;gap: var(--space-xs)}.ui-sitenav{display: inline-flex;flex-wrap: wrap;gap: 0.15rem}.ui-sitenav a{align-items: center;border: 1px solid transparent;border-radius: var(--radius-md);color: var(--text-soft);display: inline-flex;font-family: var(--mono);font-size: var(--text-xs);gap: 0.45rem;letter-spacing: var(--tracking-wide);padding: 0.4rem 0.6rem;text-transform: uppercase;transition: border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}.ui-sitenav a::before{background: currentColor;border-radius: 50%;block-size: 0.32rem;content: '';inline-size: 0.32rem;opacity: 0;transform: scale(0.5);transition: opacity var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-spring)}.ui-sitenav a[aria-current]{color: var(--accent-text)}.ui-sitenav a[aria-current]::before{opacity: 1;transform: scale(1)}@media (hover: hover){.ui-sitenav a:hover{color: var(--text)}.ui-sitenav a:hover::before{opacity: 1;transform: scale(1)}}.ui-sitemenu{display: none;position: relative}.ui-sitemenu > summary{align-items: center;background: transparent;border: 1px solid var(--line-strong);border-radius: var(--radius-md);color: var(--text);cursor: pointer;display: inline-flex;font-family: var(--mono);font-size: var(--text-xs);font-weight: 600;gap: 0.4rem;letter-spacing: var(--tracking-wide);list-style: none;min-block-size: 2.4rem;padding: 0.42rem 0.7rem;text-transform: uppercase}.ui-sitemenu > summary::-webkit-details-marker{display: none}.ui-sitemenu[open] > summary{border-color: var(--accent);color: var(--accent-text)}.ui-sitemenu__panel{background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);box-shadow: var(--shadow-raised);display: grid;gap: 0.15rem;inset-block-start: calc(100% + 0.4rem);inset-inline-end: 0;min-inline-size: 12rem;padding: 0.4rem;position: absolute;z-index: var(--z-overlay)}@media (max-width: 720px){.ui-siteheader .ui-sitenav{display: none}.ui-sitemenu{display: block}.ui-sitemenu .ui-sitenav{display: grid}}.ui-sitefooter{align-items: center;border-block-start: 1px solid var(--line);color: var(--text-dim);display: flex;flex-wrap: wrap;font-size: var(--text-sm);gap: var(--space-sm);justify-content: space-between;margin-block-start: var(--space-2xl);padding-block: var(--space-md)}.ui-sitefooter__links{display: flex;flex-wrap: wrap;gap: var(--space-md)}.ui-sitefooter__links a{color: var(--text);text-decoration: underline;text-decoration-color: color-mix(in srgb,var(--accent) 45%,transparent);text-underline-offset: 0.2rem;transition: text-decoration-color var(--duration-fast) var(--ease-standard)}@media (hover: hover){.ui-sitefooter__links a:hover{text-decoration-color: var(--accent)}}.ui-tags{display: flex;flex-wrap: wrap;gap: 0.5rem;list-style: none;margin: 0;padding: 0}.ui-tag{background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-md);color: var(--text-soft);display: inline-flex;font-size: var(--text-xs);padding: 0.28rem 0.6rem}.ui-tag--accent{background: var(--accent-soft);border-color: color-mix(in srgb,var(--accent) 42%,var(--line));color: var(--accent-text)}.ui-meta{align-items: center;color: var(--text-dim);display: flex;flex-wrap: wrap;font-family: var(--mono);font-size: var(--text-2xs);gap: 0.55rem;letter-spacing: var(--tracking-wide);list-style: none;margin: 0;padding: 0;text-transform: uppercase}.ui-meta__item{align-items: center;display: inline-flex;gap: 0.55rem}.ui-meta__item:not(:last-child)::after{background: var(--line-strong);border-radius: 50%;block-size: 0.22rem;content: '';inline-size: 0.22rem}}
+@layer bronto{.ui-container{inline-size: 100%;margin-inline: auto;max-inline-size: var(--container,72rem);padding-inline: var(--space-md)}.ui-container--narrow{max-inline-size: var(--container-narrow,44rem)}.ui-container--wide{max-inline-size: var(--container-wide,82rem)}.ui-skiplink{background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);color: var(--text);inset-block-start: -4rem;inset-inline-start: var(--space-md);padding: 0.7rem 1rem;position: fixed;z-index: var(--z-toast)}.ui-skiplink:focus{inset-block-start: var(--space-md)}.ui-siteheader{align-items: center;border-block-end: 1px solid var(--line);display: flex;flex-wrap: wrap;gap: var(--space-md);justify-content: space-between;padding-block: var(--space-sm)}.ui-siteheader--sticky{position: sticky;inset-block-start: 0;z-index: var(--z-sticky)}.ui-siteheader__brand{align-items: center;color: var(--text);display: inline-flex;font-family: var(--display);font-size: var(--text-lg);gap: 0.5rem;letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-siteheader__brand::before{background: var(--accent);border-radius: 50%;block-size: 0.5rem;content: '';flex: 0 0 auto;inline-size: 0.5rem}.ui-siteheader__actions{align-items: center;display: inline-flex;gap: var(--space-xs)}.ui-pagehead{align-items: flex-end;border-block-end: 1px solid var(--line);display: flex;flex-wrap: wrap;gap: var(--space-md);justify-content: space-between;padding-block-end: var(--space-md)}.ui-pagehead__title{color: var(--text);font-family: var(--display);font-size: var(--text-xl);letter-spacing: var(--tracking-wide);line-height: 1.1;margin: 0;text-transform: uppercase;text-wrap: balance}.ui-pagehead__actions{align-items: center;display: inline-flex;flex-wrap: wrap;gap: var(--space-xs)}.ui-sitenav{display: inline-flex;flex-wrap: wrap;gap: 0.15rem}.ui-sitenav a{align-items: center;border: 1px solid transparent;border-radius: var(--radius-md);color: var(--text-soft);display: inline-flex;font-family: var(--mono);font-size: var(--text-xs);gap: 0.45rem;letter-spacing: var(--tracking-wide);padding: 0.4rem 0.6rem;text-transform: uppercase;transition: border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}.ui-sitenav a::before{background: currentColor;border-radius: 50%;block-size: 0.32rem;content: '';inline-size: 0.32rem;opacity: 0;transform: scale(0.5);transition: opacity var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-spring)}.ui-sitenav a[aria-current]{color: var(--accent-text)}.ui-sitenav a[aria-current]::before{opacity: 1;transform: scale(1)}@media (hover: hover){.ui-sitenav a:hover{color: var(--text)}.ui-sitenav a:hover::before{opacity: 1;transform: scale(1)}}.ui-sitemenu{display: none;position: relative}.ui-sitemenu > summary{align-items: center;background: transparent;border: 1px solid var(--line-strong);border-radius: var(--radius-md);color: var(--text);cursor: pointer;display: inline-flex;font-family: var(--mono);font-size: var(--text-xs);font-weight: 600;gap: 0.4rem;letter-spacing: var(--tracking-wide);list-style: none;min-block-size: 2.4rem;padding: 0.42rem 0.7rem;text-transform: uppercase}.ui-sitemenu > summary::-webkit-details-marker{display: none}.ui-sitemenu[open] > summary{border-color: var(--accent);color: var(--accent-text)}.ui-sitemenu__panel{background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);box-shadow: var(--shadow-raised);display: grid;gap: 0.15rem;inset-block-start: calc(100% + 0.4rem);inset-inline-end: 0;min-inline-size: 12rem;padding: 0.4rem;position: absolute;z-index: var(--z-overlay)}@media (max-width: 720px){.ui-siteheader .ui-sitenav{display: none}.ui-sitemenu{display: block}.ui-sitemenu .ui-sitenav{display: grid}}.ui-sitefooter{align-items: center;border-block-start: 1px solid var(--line);color: var(--text-dim);display: flex;flex-wrap: wrap;font-size: var(--text-sm);gap: var(--space-sm);justify-content: space-between;margin-block-start: var(--space-2xl);padding-block: var(--space-md)}.ui-sitefooter__links{display: flex;flex-wrap: wrap;gap: var(--space-md)}.ui-sitefooter__links a{color: var(--text);text-decoration: underline;text-decoration-color: color-mix(in srgb,var(--accent) 45%,transparent);text-underline-offset: 0.2rem;transition: text-decoration-color var(--duration-fast) var(--ease-standard)}@media (hover: hover){.ui-sitefooter__links a:hover{text-decoration-color: var(--accent)}}.ui-tags{display: flex;flex-wrap: wrap;gap: 0.5rem;list-style: none;margin: 0;padding: 0}.ui-tag{background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-md);color: var(--text-soft);display: inline-flex;font-size: var(--text-xs);padding: 0.28rem 0.6rem}.ui-tag--accent{background: var(--accent-soft);border-color: color-mix(in srgb,var(--accent) 42%,var(--line));color: var(--accent-text)}.ui-meta{align-items: center;color: var(--text-dim);display: flex;flex-wrap: wrap;font-family: var(--mono);font-size: var(--text-2xs);gap: 0.55rem;letter-spacing: var(--tracking-wide);list-style: none;margin: 0;padding: 0;text-transform: uppercase}.ui-meta__item{align-items: center;display: inline-flex;gap: 0.55rem}.ui-meta__item:not(:last-child)::after{background: var(--line-strong);border-radius: 50%;block-size: 0.22rem;content: '';inline-size: 0.22rem}}

package/dist/css/tokens.css

@@ -1 +1 @@
-@layer bronto{:root{--radius-xl: 4px;--radius-lg: 3px;--radius-md: 2px;--radius-sm: 1px;--radius-pill: 999px;--space-2xs: 0.25rem;--space-xs: 0.5rem;--space-sm: 0.75rem;--space-md: 1rem;--space-lg: 1.35rem;--space-xl: 1.75rem;--space-2xl: 2.5rem;--mono: 'JetBrains Mono','Fira Code','Cascadia Code','SF Mono',ui-monospace,monospace;--sans: 'Inter','SF Pro Text',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;--display: 'Doto',var(--mono);--dot-font: 'Doto',var(--mono);--text-2xs: 0.68rem;--text-xs: 0.76rem;--text-sm: 0.86rem;--text-base: 0.95rem;--text-lg: 1.15rem;--text-xl: 1.45rem;--tracking-wide: 0.14em;--tracking-wider: 0.22em;--ease-standard: cubic-bezier(0.2,0.8,0.2,1);--ease-spring: cubic-bezier(0.16,1,0.3,1);--ease-out: cubic-bezier(0.33,1,0.68,1);--duration-fast: 130ms;--duration-base: 200ms;--duration-slow: 360ms;--dot-size: 2px;--dot-gap: 14px;--z-base: 0;--z-raised: 10;--z-sticky: 20;--z-overlay: 30;--z-popover: 50;--z-toast: 60;--accent-1: color-mix(in srgb,var(--accent) 8%,var(--bg));--accent-2: color-mix(in srgb,var(--accent) 16%,var(--bg));--accent-3: color-mix(in srgb,var(--accent) 32%,var(--bg));--accent-4: color-mix(in srgb,var(--accent) 60%,var(--bg));--accent-5: var(--accent);--accent-6: var(--accent-strong);--surface-1: var(--bg);--surface-2: var(--bg-elevated);--surface-3: var(--panel);--surface-4: var(--panel-soft);--surface-5: var(--line);--surface-6: var(--line-strong);--bronto-color-bg: var(--bg);--bronto-color-surface: var(--panel);--bronto-color-surface-raised: var(--panel-strong);--bronto-color-border: var(--line);--bronto-color-border-strong: var(--line-strong);--bronto-color-text: var(--text);--bronto-color-text-muted: var(--text-dim);--bronto-color-action: var(--accent);--bronto-color-on-action: var(--button-text);--bronto-color-focus: var(--focus-ring);--bronto-color-success: var(--success);--bronto-color-warning: var(--warning);--bronto-color-danger: var(--danger);--surface: var(--panel);--surface-raised: var(--panel-strong);--surface-muted: var(--panel-soft);--border: var(--line);--border-strong: var(--line-strong)}:root,:root[data-theme='light']{color-scheme: light;--bg: #f4f4f2;--bg-elevated: #fbfbfa;--bg-accent: color-mix(in srgb,var(--accent) 6%,transparent);--panel: #ffffff;--panel-strong: #ffffff;--panel-soft: #ececea;--line: #d8d8d4;--line-strong: #a8a8a2;--text: #0a0a0a;--text-soft: #353533;--text-dim: #686863;--accent: #d71921;--accent-strong: color-mix(in srgb,var(--accent) 83%,#000);--accent-text: var(--accent-strong);--accent-soft: color-mix(in srgb,var(--accent) 10%,transparent);--success: #2f7d4f;--success-soft: rgb(47,125,79,0.12);--warning: #806414;--warning-soft: rgb(128,100,20,0.13);--orange: #a85f32;--orange-soft: rgb(168,95,50,0.13);--danger: #c01622;--danger-soft: rgb(192,22,34,0.1);--code-bg: rgb(10,10,10,0.05);--button-text: #ffffff;--field-dot: rgb(10,10,10,0.16);--field-dot-hot: rgb(10,10,10,0.4);--field-dot-accent: color-mix(in srgb,var(--accent) 78%,transparent);--focus-ring: var(--accent);--shadow: none;--shadow-raised: 0 0 0 1px var(--line-strong)}@media (prefers-color-scheme: dark){:root:not([data-theme='light']){color-scheme: dark;--bg: #000000;--bg-elevated: #0a0a0a;--bg-accent: color-mix(in srgb,var(--accent) 8%,transparent);--panel: #0c0c0c;--panel-strong: #141414;--panel-soft: #1a1a1a;--line: #2a2a2a;--line-strong: #444444;--text: #f2f2f2;--text-soft: #c4c4c4;--text-dim: #858585;--accent: #ff3b41;--accent-strong: color-mix(in srgb,var(--accent) 84%,#fff);--accent-text: var(--accent-strong);--accent-soft: color-mix(in srgb,var(--accent) 14%,transparent);--success: #4ec27e;--success-soft: rgb(78,194,126,0.14);--warning: #d8bd72;--warning-soft: rgb(216,189,114,0.14);--orange: #d08c5b;--orange-soft: rgb(208,140,91,0.15);--danger: #ff4d54;--danger-soft: rgb(255,77,84,0.15);--code-bg: rgb(255,255,255,0.05);--button-text: #000000;--field-dot: rgb(242,242,242,0.14);--field-dot-hot: rgb(242,242,242,0.36);--field-dot-accent: color-mix(in srgb,var(--accent) 82%,transparent);--focus-ring: var(--accent);--shadow: none;--shadow-raised: 0 0 0 1px var(--line-strong)}}:root[data-theme='dark']{color-scheme: dark;--bg: #000000;--bg-elevated: #0a0a0a;--bg-accent: color-mix(in srgb,var(--accent) 8%,transparent);--panel: #0c0c0c;--panel-strong: #141414;--panel-soft: #1a1a1a;--line: #2a2a2a;--line-strong: #444444;--text: #f2f2f2;--text-soft: #c4c4c4;--text-dim: #858585;--accent: #ff3b41;--accent-strong: color-mix(in srgb,var(--accent) 84%,#fff);--accent-text: var(--accent-strong);--accent-soft: color-mix(in srgb,var(--accent) 14%,transparent);--success: #4ec27e;--success-soft: rgb(78,194,126,0.14);--warning: #d8bd72;--warning-soft: rgb(216,189,114,0.14);--orange: #d08c5b;--orange-soft: rgb(208,140,91,0.15);--danger: #ff4d54;--danger-soft: rgb(255,77,84,0.15);--code-bg: rgb(255,255,255,0.05);--button-text: #000000;--field-dot: rgb(242,242,242,0.14);--field-dot-hot: rgb(242,242,242,0.36);--field-dot-accent: color-mix(in srgb,var(--accent) 82%,transparent);--focus-ring: var(--accent);--shadow: none;--shadow-raised: 0 0 0 1px var(--line-strong)}[data-density='compact']{--space-2xs: 0.2rem;--space-xs: 0.4rem;--space-sm: 0.6rem;--space-md: 0.8rem;--space-lg: 1.05rem;--space-xl: 1.35rem;--space-2xl: 1.9rem}[data-density='comfortable']{--space-2xs: 0.3rem;--space-xs: 0.6rem;--space-sm: 0.95rem;--space-md: 1.25rem;--space-lg: 1.7rem;--space-xl: 2.2rem;--space-2xl: 3.1rem}[data-contrast='high']{--line: var(--line-strong);--text-dim: var(--text-soft);--focus-ring: var(--accent);--shadow-raised: 0 0 0 1px var(--text)}@media (prefers-contrast: more){:root{--line: var(--line-strong);--text-dim: var(--text-soft);--focus-ring: var(--accent);--shadow-raised: 0 0 0 1px var(--text)}}}
+@layer bronto{:root{--radius-xl: 4px;--radius-lg: 3px;--radius-md: 2px;--radius-sm: 1px;--radius-pill: 999px;--space-2xs: 0.25rem;--space-xs: 0.5rem;--space-sm: 0.75rem;--space-md: 1rem;--space-lg: 1.35rem;--space-xl: 1.75rem;--space-2xl: 2.5rem;--mono: 'JetBrains Mono','Fira Code','Cascadia Code','SF Mono',ui-monospace,monospace;--sans: 'Inter','SF Pro Text',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;--dot-font: 'Doto',var(--mono);--display: var(--dot-font);--text-2xs: 0.68rem;--text-xs: 0.76rem;--text-sm: 0.86rem;--text-base: 0.95rem;--text-lg: 1.15rem;--text-xl: 1.45rem;--tracking-wide: 0.14em;--tracking-wider: 0.22em;--ease-standard: cubic-bezier(0.2,0.8,0.2,1);--ease-spring: cubic-bezier(0.16,1,0.3,1);--ease-out: cubic-bezier(0.33,1,0.68,1);--duration-fast: 130ms;--duration-base: 200ms;--duration-slow: 360ms;--dot-size: 2px;--dot-gap: 14px;--z-base: 0;--z-raised: 10;--z-sticky: 20;--z-overlay: 30;--z-popover: 50;--z-toast: 60;--accent-1: color-mix(in srgb,var(--accent) 8%,var(--bg));--accent-2: color-mix(in srgb,var(--accent) 16%,var(--bg));--accent-3: color-mix(in srgb,var(--accent) 32%,var(--bg));--accent-4: color-mix(in srgb,var(--accent) 60%,var(--bg));--accent-5: var(--accent);--accent-6: var(--accent-strong);--surface-1: var(--bg);--surface-2: var(--bg-elevated);--surface-3: var(--panel);--surface-4: var(--panel-soft);--surface-5: var(--line);--surface-6: var(--line-strong);--bronto-color-bg: var(--bg);--bronto-color-surface: var(--panel);--bronto-color-surface-raised: var(--panel-strong);--bronto-color-border: var(--line);--bronto-color-border-strong: var(--line-strong);--bronto-color-text: var(--text);--bronto-color-text-muted: var(--text-dim);--bronto-color-action: var(--accent);--bronto-color-on-action: var(--button-text);--bronto-color-focus: var(--focus-ring);--bronto-color-success: var(--success);--bronto-color-warning: var(--warning);--bronto-color-danger: var(--danger);--bronto-color-info: var(--info);--surface: var(--panel);--surface-raised: var(--panel-strong);--surface-muted: var(--panel-soft);--border: var(--line);--border-strong: var(--line-strong)}:root,:root[data-theme='light']{color-scheme: light;--bg: #f4f4f2;--bg-elevated: #fbfbfa;--bg-accent: color-mix(in srgb,var(--accent) 6%,transparent);--panel: #ffffff;--panel-strong: #ffffff;--panel-soft: #ececea;--line: #d8d8d4;--line-strong: #a8a8a2;--text: #0a0a0a;--text-soft: #353533;--text-dim: #686863;--accent: #d71921;--accent-strong: color-mix(in srgb,var(--accent) 83%,#000);--accent-text: var(--accent-strong);--accent-soft: color-mix(in srgb,var(--accent) 10%,transparent);--success: #2f7d4f;--success-soft: rgb(47,125,79,0.12);--warning: #806414;--warning-soft: rgb(128,100,20,0.13);--orange: #a85f32;--orange-soft: rgb(168,95,50,0.13);--danger: #c01622;--danger-soft: rgb(192,22,34,0.1);--info: #1f63c4;--info-soft: rgb(31,99,196,0.12);--code-bg: rgb(10,10,10,0.05);--button-text: #ffffff;--field-dot: rgb(10,10,10,0.16);--field-dot-hot: rgb(10,10,10,0.4);--field-dot-accent: color-mix(in srgb,var(--accent) 78%,transparent);--focus-ring: var(--accent);--shadow: none;--shadow-raised: 0 0 0 1px var(--line-strong)}@media (prefers-color-scheme: dark){:root:not([data-theme='light']){color-scheme: dark;--bg: #000000;--bg-elevated: #0a0a0a;--bg-accent: color-mix(in srgb,var(--accent) 8%,transparent);--panel: #0c0c0c;--panel-strong: #141414;--panel-soft: #1a1a1a;--line: #2a2a2a;--line-strong: #444444;--text: #f2f2f2;--text-soft: #c4c4c4;--text-dim: #858585;--accent: #ff3b41;--accent-strong: color-mix(in srgb,var(--accent) 84%,#fff);--accent-text: var(--accent-strong);--accent-soft: color-mix(in srgb,var(--accent) 14%,transparent);--success: #4ec27e;--success-soft: rgb(78,194,126,0.14);--warning: #d8bd72;--warning-soft: rgb(216,189,114,0.14);--orange: #d08c5b;--orange-soft: rgb(208,140,91,0.15);--danger: #ff4d54;--danger-soft: rgb(255,77,84,0.15);--info: #6fb0e6;--info-soft: rgb(111,176,230,0.14);--code-bg: rgb(255,255,255,0.05);--button-text: #000000;--field-dot: rgb(242,242,242,0.14);--field-dot-hot: rgb(242,242,242,0.36);--field-dot-accent: color-mix(in srgb,var(--accent) 82%,transparent);--focus-ring: var(--accent);--shadow: none;--shadow-raised: 0 0 0 1px var(--line-strong)}}:root[data-theme='dark']{color-scheme: dark;--bg: #000000;--bg-elevated: #0a0a0a;--bg-accent: color-mix(in srgb,var(--accent) 8%,transparent);--panel: #0c0c0c;--panel-strong: #141414;--panel-soft: #1a1a1a;--line: #2a2a2a;--line-strong: #444444;--text: #f2f2f2;--text-soft: #c4c4c4;--text-dim: #858585;--accent: #ff3b41;--accent-strong: color-mix(in srgb,var(--accent) 84%,#fff);--accent-text: var(--accent-strong);--accent-soft: color-mix(in srgb,var(--accent) 14%,transparent);--success: #4ec27e;--success-soft: rgb(78,194,126,0.14);--warning: #d8bd72;--warning-soft: rgb(216,189,114,0.14);--orange: #d08c5b;--orange-soft: rgb(208,140,91,0.15);--danger: #ff4d54;--danger-soft: rgb(255,77,84,0.15);--info: #6fb0e6;--info-soft: rgb(111,176,230,0.14);--code-bg: rgb(255,255,255,0.05);--button-text: #000000;--field-dot: rgb(242,242,242,0.14);--field-dot-hot: rgb(242,242,242,0.36);--field-dot-accent: color-mix(in srgb,var(--accent) 82%,transparent);--focus-ring: var(--accent);--shadow: none;--shadow-raised: 0 0 0 1px var(--line-strong)}[data-density='compact']{--space-2xs: 0.2rem;--space-xs: 0.4rem;--space-sm: 0.6rem;--space-md: 0.8rem;--space-lg: 1.05rem;--space-xl: 1.35rem;--space-2xl: 1.9rem}[data-density='comfortable']{--space-2xs: 0.3rem;--space-xs: 0.6rem;--space-sm: 0.95rem;--space-md: 1.25rem;--space-lg: 1.7rem;--space-xl: 2.2rem;--space-2xl: 3.1rem}[data-contrast='high']{--line: var(--line-strong);--text-dim: var(--text-soft);--focus-ring: var(--accent);--shadow-raised: 0 0 0 1px var(--text)}@media (prefers-contrast: more){:root{--line: var(--line-strong);--text-dim: var(--text-soft);--focus-ring: var(--accent);--shadow-raised: 0 0 0 1px var(--text)}}}

package/docs/contrast.md

@@ -0,0 +1,100 @@
+<!-- @ponchia/ui — GENERATED from the resolved token model by
+     scripts/gen-contrast.mjs. Do not edit by hand; run
+     `npm run contrast:build`. Drift-checked AND gated in CI
+     (scripts/check-contrast.mjs fails the build below the declared
+     floor — so this table is a guarantee, not a snapshot). -->
+
+# Contrast & WCAG conformance
+
+Every contractual token pairing, the WCAG 2.1 level it is **held to**,
+and its measured sRGB ratio per theme. Generated from the resolved token
+model (`tokens/resolved.json`) so it cannot drift from the palette, and
+**gated**: `npm run check` fails if any pairing drops below its floor.
+
+## Guaranteed level
+
+- **Body / UI text** pairings are guaranteed **WCAG 2.1 AA — 4.5:1**
+  (1.4.3). This covers `--text`, `--text-soft`, `--text-dim`,
+  `--accent-text`, and the primary-button label.
+- **Non-text UI** (focus ring, accent fill, status colour) is guaranteed
+  **3:1** (1.4.11 non-text contrast / the large-text bar). These are
+  deliberately *not* held to 4.5:1 — a focus
+  ring is a UI boundary, not body copy, and WCAG agrees.
+- **Hairlines** (`--line`, `--line-strong`) are a deliberate identity
+  choice and are **reported but not gated**: WCAG 1.4.11 exempts
+  decorative borders that are not the sole identifier of a control. Where
+  a boundary must be perceivable, the `forced-colors` /
+  `data-contrast="high"` paths re-assert it (see
+  [theming.md](theming.md)). The low hairline ratio is published here on
+  purpose — hiding it would defeat the point of a gate.
+- AAA (7:1) is **not** guaranteed; the high-contrast preset
+  (`data-contrast="high"` / `prefers-contrast: more`) raises ratios
+  further but is out of scope for this gated baseline.
+
+Translucent foregrounds (soft fills) are alpha-flattened over their
+background before measuring — the ratio the eye actually gets.
+
+Overall: **all contractual pairings meet their floor ✅**.
+
+## Light theme
+
+| Foreground | Background | Role | Held to | Ratio | Verdict |
+| --- | --- | --- | --- | --- | --- |
+| `--text` | `--bg` | Body text on page background | AA text (4.5:1) | 17.98:1 | ✅ pass |
+| `--text` | `--surface` | Body text on a card/panel | AA text (4.5:1) | 19.80:1 | ✅ pass |
+| `--text` | `--surface-muted` | Body text on a muted panel | AA text (4.5:1) | 16.74:1 | ✅ pass |
+| `--text-soft` | `--bg` | Secondary text on page background | AA text (4.5:1) | 11.16:1 | ✅ pass |
+| `--text-soft` | `--surface` | Secondary text on a card | AA text (4.5:1) | 12.29:1 | ✅ pass |
+| `--text-soft` | `--surface-muted` | Secondary text on a muted panel | AA text (4.5:1) | 10.39:1 | ✅ pass |
+| `--text-dim` | `--bg` | Dim/meta text on page background | AA text (4.5:1) | 5.09:1 | ✅ pass |
+| `--text-dim` | `--surface` | Dim/meta text on a card | AA text (4.5:1) | 5.60:1 | ✅ pass |
+| `--text-dim` | `--surface-muted` | Dim/meta text on a muted panel | AA text (4.5:1) | 4.74:1 | ✅ pass |
+| `--accent-text` | `--bg` | Accent text on page background | AA text (4.5:1) | 6.32:1 | ✅ pass |
+| `--accent-text` | `--surface` | Accent text on a card | AA text (4.5:1) | 6.96:1 | ✅ pass |
+| `--button-text` | `--accent` | Label on the primary button | AA text (4.5:1) | 5.18:1 | ✅ pass |
+| `--focus-ring` | `--bg` | Focus ring vs page background | UI / large (3:1) | 4.71:1 | ✅ pass |
+| `--focus-ring` | `--surface` | Focus ring vs a card | UI / large (3:1) | 5.18:1 | ✅ pass |
+| `--accent` | `--bg` | Accent fill vs page background | UI / large (3:1) | 4.71:1 | ✅ pass |
+| `--success` | `--surface` | Success indicator vs a card | UI / large (3:1) | 5.04:1 | ✅ pass |
+| `--warning` | `--surface` | Warning indicator vs a card | UI / large (3:1) | 5.60:1 | ✅ pass |
+| `--danger` | `--surface` | Danger indicator vs a card | UI / large (3:1) | 6.21:1 | ✅ pass |
+| `--info` | `--surface` | Info indicator vs a card | UI / large (3:1) | 5.77:1 | ✅ pass |
+| `--line-strong` | `--surface` | Strong hairline vs a card | Decorative (1.4.11-exempt) | 2.39:1 | ℹ️ not gated |
+
+## Dark theme
+
+| Foreground | Background | Role | Held to | Ratio | Verdict |
+| --- | --- | --- | --- | --- | --- |
+| `--text` | `--bg` | Body text on page background | AA text (4.5:1) | 18.76:1 | ✅ pass |
+| `--text` | `--surface` | Body text on a card/panel | AA text (4.5:1) | 17.47:1 | ✅ pass |
+| `--text` | `--surface-muted` | Body text on a muted panel | AA text (4.5:1) | 15.55:1 | ✅ pass |
+| `--text-soft` | `--bg` | Secondary text on page background | AA text (4.5:1) | 12.04:1 | ✅ pass |
+| `--text-soft` | `--surface` | Secondary text on a card | AA text (4.5:1) | 11.22:1 | ✅ pass |
+| `--text-soft` | `--surface-muted` | Secondary text on a muted panel | AA text (4.5:1) | 9.98:1 | ✅ pass |
+| `--text-dim` | `--bg` | Dim/meta text on page background | AA text (4.5:1) | 5.69:1 | ✅ pass |
+| `--text-dim` | `--surface` | Dim/meta text on a card | AA text (4.5:1) | 5.30:1 | ✅ pass |
+| `--text-dim` | `--surface-muted` | Dim/meta text on a muted panel | AA text (4.5:1) | 4.72:1 | ✅ pass |
+| `--accent-text` | `--bg` | Accent text on page background | AA text (4.5:1) | 6.88:1 | ✅ pass |
+| `--accent-text` | `--surface` | Accent text on a card | AA text (4.5:1) | 6.41:1 | ✅ pass |
+| `--button-text` | `--accent` | Label on the primary button | AA text (4.5:1) | 5.95:1 | ✅ pass |
+| `--focus-ring` | `--bg` | Focus ring vs page background | UI / large (3:1) | 5.95:1 | ✅ pass |
+| `--focus-ring` | `--surface` | Focus ring vs a card | UI / large (3:1) | 5.55:1 | ✅ pass |
+| `--accent` | `--bg` | Accent fill vs page background | UI / large (3:1) | 5.95:1 | ✅ pass |
+| `--success` | `--surface` | Success indicator vs a card | UI / large (3:1) | 8.70:1 | ✅ pass |
+| `--warning` | `--surface` | Warning indicator vs a card | UI / large (3:1) | 10.66:1 | ✅ pass |
+| `--danger` | `--surface` | Danger indicator vs a card | UI / large (3:1) | 6.00:1 | ✅ pass |
+| `--info` | `--surface` | Info indicator vs a card | UI / large (3:1) | 8.41:1 | ✅ pass |
+| `--line-strong` | `--surface` | Strong hairline vs a card | Decorative (1.4.11-exempt) | 2.01:1 | ℹ️ not gated |
+
+## Scope & caveats
+
+- This gates the **framework token contract**, not arbitrary consumer
+  re-brands. Re-accenting via `--accent` is your contrast obligation
+  (see [theming.md](theming.md) → "Re-brand obligations"); this table is
+  the guarantee for the *shipped* palettes only.
+- Status colours (`--success` / `--warning` / `--danger`) are gated
+  as **indicators** (3:1). If you set status text *as body copy* on a
+  surface, verify 4.5:1 yourself or pair it with an icon/label.
+- Ratios are sRGB WCAG 2.1. The newer APCA model is intentionally not
+  used — WCAG 2.1 AA is the testable legal/again-axe baseline the e2e
+  suite already asserts.

package/docs/reference.md

@@ -9,7 +9,7 @@ rendering of every class is the kitchen-sink demo:
 **<https://ponchia.github.io/bronto-ui/>**. Theming knobs and the token
 contract: [docs/theming.md](theming.md).
 
-- 226 classes across 101 component groups
+- 260 classes across 109 component groups
 - Import the typed registry: `import { cls, ui, cx } from '@ponchia/ui/classes'`
 - Tokens as data: `import { cssVars, tokens, themeColor } from '@ponchia/ui/tokens'`
 
@@ -38,6 +38,7 @@ each one matches a real selector in the stylesheet.
 | `cls.alertTitle` | `ui-alert__title` | part |
 | `cls.alertAccent` | `ui-alert--accent` | modifier |
 | `cls.alertDanger` | `ui-alert--danger` | modifier |
+| `cls.alertInfo` | `ui-alert--info` | modifier |
 | `cls.alertSuccess` | `ui-alert--success` | modifier |
 | `cls.alertWarning` | `ui-alert--warning` | modifier |
 
@@ -166,6 +167,7 @@ each one matches a real selector in the stylesheet.
 | `cls.badgeAccent` | `ui-badge--accent` | modifier |
 | `cls.badgeDanger` | `ui-badge--danger` | modifier |
 | `cls.badgeDot` | `ui-badge--dot` | modifier |
+| `cls.badgeInfo` | `ui-badge--info` | modifier |
 | `cls.badgeMuted` | `ui-badge--muted` | modifier |
 | `cls.badgeSuccess` | `ui-badge--success` | modifier |
 | `cls.badgeWarning` | `ui-badge--warning` | modifier |
@@ -204,6 +206,20 @@ each one matches a real selector in the stylesheet.
 | --- | --- | --- |
 | `cls.caret` | `ui-caret` | base |
 
+### `.ui-carousel`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.carousel` | `ui-carousel` | base |
+| `cls.carouselNext` | `ui-carousel__next` | part |
+| `cls.carouselPrev` | `ui-carousel__prev` | part |
+| `cls.carouselSlide` | `ui-carousel__slide` | part |
+| `cls.carouselStage` | `ui-carousel__stage` | part |
+| `cls.carouselStatus` | `ui-carousel__status` | part |
+| `cls.carouselThumb` | `ui-carousel__thumb` | part |
+| `cls.carouselThumbs` | `ui-carousel__thumbs` | part |
+| `cls.carouselViewport` | `ui-carousel__viewport` | part |
+
 ### `.ui-center`
 
 | Registry key | Class | Kind |
@@ -273,6 +289,7 @@ each one matches a real selector in the stylesheet.
 | `cls.dot` | `ui-dot` | base |
 | `cls.dotAccent` | `ui-dot--accent` | modifier |
 | `cls.dotDanger` | `ui-dot--danger` | modifier |
+| `cls.dotInfo` | `ui-dot--info` | modifier |
 | `cls.dotLive` | `ui-dot--live` | modifier |
 | `cls.dotSuccess` | `ui-dot--success` | modifier |
 | `cls.dotWarning` | `ui-dot--warning` | modifier |
@@ -387,6 +404,20 @@ each one matches a real selector in the stylesheet.
 | `cls.inputGroup` | `ui-input-group` | base |
 | `cls.inputGroupAddon` | `ui-input-group__addon` | part |
 
+### `.ui-input-icon`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.inputIcon` | `ui-input-icon` | base |
+| `cls.inputIconSlot` | `ui-input-icon__icon` | part |
+| `cls.inputIconEnd` | `ui-input-icon--end` | modifier |
+
+### `.ui-kbd`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.kbd` | `ui-kbd` | base |
+
 ### `.ui-key-value`
 
 | Registry key | Class | Kind |
@@ -399,6 +430,13 @@ each one matches a real selector in the stylesheet.
 | --- | --- | --- |
 | `cls.label` | `ui-label` | base |
 
+### `.ui-lightbox`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.lightbox` | `ui-lightbox` | base |
+| `cls.lightboxClose` | `ui-lightbox__close` | part |
+
 ### `.ui-link`
 
 | Registry key | Class | Kind |
@@ -435,6 +473,17 @@ each one matches a real selector in the stylesheet.
 | `cls.meta` | `ui-meta` | base |
 | `cls.metaItem` | `ui-meta__item` | part |
 
+### `.ui-meter`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.meter` | `ui-meter` | base |
+| `cls.meterFill` | `ui-meter__fill` | part |
+| `cls.meterAccent` | `ui-meter--accent` | modifier |
+| `cls.meterDanger` | `ui-meter--danger` | modifier |
+| `cls.meterSuccess` | `ui-meter--success` | modifier |
+| `cls.meterWarning` | `ui-meter--warning` | modifier |
+
 ### `.ui-modal`
 
 | Registry key | Class | Kind |
@@ -468,6 +517,14 @@ each one matches a real selector in the stylesheet.
 | `cls.numNeg` | `ui-num--neg` | modifier |
 | `cls.numPos` | `ui-num--pos` | modifier |
 
+### `.ui-pagehead`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.pagehead` | `ui-pagehead` | base |
+| `cls.pageheadActions` | `ui-pagehead__actions` | part |
+| `cls.pageheadTitle` | `ui-pagehead__title` | part |
+
 ### `.ui-pagination`
 
 | Registry key | Class | Kind |
@@ -634,6 +691,14 @@ each one matches a real selector in the stylesheet.
 | --- | --- | --- |
 | `cls.status` | `ui-status` | base |
 
+### `.ui-steps`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.steps` | `ui-steps` | base |
+| `cls.stepsItem` | `ui-steps__item` | part |
+| `cls.stepsItemDone` | `ui-steps__item--done` | modifier |
+
 ### `.ui-surface`
 
 | Registry key | Class | Kind |
@@ -718,6 +783,14 @@ each one matches a real selector in the stylesheet.
 | `cls.themetoggleThumb` | `ui-themetoggle__thumb` | part |
 | `cls.themetoggleTrack` | `ui-themetoggle__track` | part |
 
+### `.ui-timeline`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.timeline` | `ui-timeline` | base |
+| `cls.timelineItem` | `ui-timeline__item` | part |
+| `cls.timelineTime` | `ui-timeline__time` | part |
+
 ### `.ui-toast`
 
 | Registry key | Class | Kind |
@@ -727,6 +800,7 @@ each one matches a real selector in the stylesheet.
 | `cls.toastTitle` | `ui-toast__title` | part |
 | `cls.toastAccent` | `ui-toast--accent` | modifier |
 | `cls.toastDanger` | `ui-toast--danger` | modifier |
+| `cls.toastInfo` | `ui-toast--info` | modifier |
 | `cls.toastSuccess` | `ui-toast--success` | modifier |
 | `cls.toastWarning` | `ui-toast--warning` | modifier |
 
@@ -782,7 +856,7 @@ works in any framework without a binding layer:
   `ui-button`; the leading spinner is injected by CSS with no extra
   markup or class. `ui-button--sm`/`--lg` size it.
 - **Badge tone** — `ui.badge({ tone })` emits the framework tone
-  (`accent|success|warning|danger|muted`). Mapping an app's own variant
+  (`accent|success|warning|danger|info|muted`). Mapping an app's own variant
   vocabulary onto a tone is application logic, not a framework class.
 - **Modal** — native `<dialog>` gets backdrop + top-layer + focus-trap
   free. For a controlled/portal modal, add `is-open`
@@ -813,8 +887,8 @@ Exact mirror of the `:root` blocks in `css/tokens.css`
 | `--space-2xl` | `2.5rem` |
 | `--mono` | `'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', ui-monospace, monospace` |
 | `--sans` | `'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif` |
-| `--display` | `'Doto', var(--mono)` |
 | `--dot-font` | `'Doto', var(--mono)` |
+| `--display` | `var(--dot-font)` |
 | `--text-2xs` | `0.68rem` |
 | `--text-xs` | `0.76rem` |
 | `--text-sm` | `0.86rem` |
@@ -862,6 +936,7 @@ Exact mirror of the `:root` blocks in `css/tokens.css`
 | `--bronto-color-success` | `var(--success)` |
 | `--bronto-color-warning` | `var(--warning)` |
 | `--bronto-color-danger` | `var(--danger)` |
+| `--bronto-color-info` | `var(--info)` |
 | `--surface` | `var(--panel)` |
 | `--surface-raised` | `var(--panel-strong)` |
 | `--surface-muted` | `var(--panel-soft)` |
@@ -895,6 +970,8 @@ Exact mirror of the `:root` blocks in `css/tokens.css`
 | `--orange-soft` | `rgb(168, 95, 50, 0.13)` |
 | `--danger` | `#c01622` |
 | `--danger-soft` | `rgb(192, 22, 34, 0.1)` |
+| `--info` | `#1f63c4` |
+| `--info-soft` | `rgb(31, 99, 196, 0.12)` |
 | `--code-bg` | `rgb(10, 10, 10, 0.05)` |
 | `--button-text` | `#ffffff` |
 | `--field-dot` | `rgb(10, 10, 10, 0.16)` |
@@ -931,6 +1008,8 @@ Exact mirror of the `:root` blocks in `css/tokens.css`
 | `--orange-soft` | `rgb(208, 140, 91, 0.15)` |
 | `--danger` | `#ff4d54` |
 | `--danger-soft` | `rgb(255, 77, 84, 0.15)` |
+| `--info` | `#6fb0e6` |
+| `--info-soft` | `rgb(111, 176, 230, 0.14)` |
 | `--code-bg` | `rgb(255, 255, 255, 0.05)` |
 | `--button-text` | `#000000` |
 | `--field-dot` | `rgb(242, 242, 242, 0.14)` |

package/docs/theming.md

@@ -66,6 +66,55 @@ fills — follows automatically, in both light and dark.
   set `accent-color` yourself on them — this is the one accent surface
   the framework can't tune for you.
 
+## Beyond accent: a full re-skin (the knob really works)
+
+The "Nothing" look is the **default skin, not the architecture**. It is
+a handful of token declarations deep — no selector hardcodes the
+identity. An audit of `css/` found radius (every rounded element goes
+through `var(--radius-*)`), the display face, dot density, motion easings
+and the colour scale are *all* token-driven; the only hardcoded geometry
+is the deliberate `border-radius: 0` on a few sharp elements and `50%` on
+dots/avatars (correct to hardcode — they are circles, not skin).
+
+The framework derives its accent **per theme** (the shipped red is
+`#d71921` light / `#ff3b41` dark) precisely so each side stays
+contrast-safe. A serious re-skin does the same — one override block,
+no fork:
+
+```css
+/* "Warm" — softer, rounder, no dot-matrix. Per-theme so the primary
+   button label stays AA on both sides (measured: see below). */
+:root,
+:root[data-theme='light'] {
+  --accent: #a8431a;            /* terracotta — #fff label = 6.03:1 */
+  --radius-md: 10px;            /* the system rounds everywhere at once */
+  --radius-lg: 14px;
+  --radius-xl: 20px;
+  --display: var(--sans);       /* retire the Doto dot-matrix face */
+  --dot-size: 0;                /* mute the decorative dot-grid motif */
+}
+:root[data-theme='dark'] {
+  --accent: #e8a06a;            /* lighter warm — #000 label = 9.67:1 */
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) { --accent: #e8a06a; }
+}
+```
+
+That changes buttons, cards, inputs, badges, focus rings, the display
+type and the dot motif together, because every component consumes those
+tokens — not because there is a per-component theme file. This is the
+difference between a *system* and a *skin*: the skin is swappable, the
+system (rationed colour, density, classless prose, minimal JS) is what
+you are actually adopting.
+
+Caveat, restated: a custom `--accent` is **your** contrast obligation —
+the shipped palettes are CI-gated ([contrast.md](contrast.md)), a re-skin
+is not. The values above are *measured* (white label on `#a8431a` =
+6.03:1, black on `#e8a06a` = 9.67:1, both ≥ 4.5:1 AA); pick your own with
+the same check. Don't set one global `--accent` and hope — that is why
+this example is split per theme.
+
 ## Token tiers (0.3.1)
 
 Three additive, non-breaking tiers sit on top of the primitives. The