@ponchia/ui 0.4.0 → 0.5.0

package/dist/css/motion.css

@@ -1 +1 @@
-@layer bronto{@keyframes pulseDot{0%,100%{opacity: 0.35;transform: scale(0.84)}50%{opacity: 1;transform: scale(1)}}@keyframes scan{0%{transform: translateY(-120%)}100%{transform: translateY(320%)}}@keyframes growBar{to{transform: scaleX(1)}}@keyframes drawLine{from{opacity: 0;stroke-dasharray: 0 999}to{opacity: 1;stroke-dasharray: 999 0}}@keyframes pulseNode{0%,100%{transform: scale(1)}50%{transform: scale(1.08)}}@keyframes pulseRing{0%{opacity: 0.7;transform: scale(0.7)}100%{opacity: 0;transform: scale(1.3)}}@keyframes uiFadeIn{from{opacity: 0}to{opacity: 1}}@keyframes uiRise{from{opacity: 0;transform: translateY(10px)}to{opacity: 1;transform: translateY(0)}}@keyframes uiDotIn{0%{opacity: 0;transform: scale(0.2)}60%{opacity: 1;transform: scale(1.15)}100%{opacity: 1;transform: scale(1)}}@keyframes uiSpin{to{transform: rotate(360deg)}}@keyframes uiBlink{0%,45%{opacity: 1}55%,100%{opacity: 0.2}}@keyframes uiShimmer{from{background-position: 200% 0}to{background-position: -200% 0}}@keyframes uiMatrixReveal{from{clip-path: inset(0 100% 0 0)}to{clip-path: inset(0 0 0 0)}}@keyframes uiTrack{0%{inset-inline-start: -45%}100%{inset-inline-start: 100%}}@keyframes uiToastIn{from{opacity: 0;transform: translateY(12px) scale(0.98)}to{opacity: 1;transform: translateY(0) scale(1)}}.ui-animate-in{animation: uiRise var(--duration-slow) var(--ease-spring) both}.ui-animate-fade{animation: uiFadeIn var(--duration-base) var(--ease-standard) both}.ui-animate-dot{animation: uiDotIn var(--duration-base) var(--ease-spring) both}.ui-animate-matrix{animation: uiMatrixReveal var(--duration-slow) var(--ease-out) both}.ui-stagger > *{animation: uiRise var(--duration-slow) var(--ease-spring) both;animation-delay: calc(var(--i,0) * 60ms)}.ui-stagger--auto > *:nth-child(1){animation-delay: 0ms}.ui-stagger--auto > *:nth-child(2){animation-delay: 60ms}.ui-stagger--auto > *:nth-child(3){animation-delay: 120ms}.ui-stagger--auto > *:nth-child(4){animation-delay: 180ms}.ui-stagger--auto > *:nth-child(5){animation-delay: 240ms}.ui-stagger--auto > *:nth-child(6){animation-delay: 300ms}.ui-stagger--auto > *:nth-child(n + 7){animation-delay: 360ms}@media (prefers-reduced-motion: no-preference){.ui-reveal{opacity: 0;transform: translateY(14px);transition: opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out)}.ui-reveal.is-visible{opacity: 1;transform: none}}.ui-skeleton{background: linear-gradient( 90deg,var(--panel-soft) 25%,color-mix(in srgb,var(--panel-soft) 55%,var(--line-strong)) 50%,var(--panel-soft) 75% );background-size: 200% 100%;animation: uiShimmer 1.4s linear infinite;border-radius: var(--radius-sm);color: transparent;min-block-size: 0.8em}.ui-spinner{animation: uiSpin 0.7s linear infinite;border: 2px solid var(--line);border-radius: 50%;border-block-start-color: var(--accent);display: inline-block;block-size: 1.1rem;inline-size: 1.1rem}.ui-caret::after{animation: uiBlink 1.1s steps(1) infinite;content: '▮';margin-inline-start: 0.1em}@media (prefers-reduced-motion: reduce){html{scroll-behavior: auto}*,*::before,*::after{animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important}.ui-reveal{opacity: 1 !important;transform: none !important}}}
+@layer bronto{@keyframes pulseDot{0%,100%{opacity: 0.35;transform: scale(0.84)}50%{opacity: 1;transform: scale(1)}}@keyframes scan{0%{transform: translateY(-120%)}100%{transform: translateY(320%)}}@keyframes growBar{to{transform: scaleX(1)}}@keyframes drawLine{from{opacity: 0;stroke-dasharray: 0 999}to{opacity: 1;stroke-dasharray: 999 0}}@keyframes pulseNode{0%,100%{transform: scale(1)}50%{transform: scale(1.08)}}@keyframes pulseRing{0%{opacity: 0.7;transform: scale(0.7)}100%{opacity: 0;transform: scale(1.3)}}@keyframes uiFadeIn{from{opacity: 0}to{opacity: 1}}@keyframes uiRise{from{opacity: 0;transform: translateY(10px)}to{opacity: 1;transform: translateY(0)}}@keyframes uiDotIn{0%{opacity: 0;transform: scale(0.2)}60%{opacity: 1;transform: scale(1.15)}100%{opacity: 1;transform: scale(1)}}@keyframes uiSpin{to{transform: rotate(360deg)}}@keyframes uiBlink{0%,45%{opacity: 1}55%,100%{opacity: 0.2}}@keyframes uiShimmer{from{background-position: 200% 0}to{background-position: -200% 0}}@keyframes uiMatrixReveal{from{clip-path: inset(0 100% 0 0)}to{clip-path: inset(0 0 0 0)}}@keyframes uiTrack{0%{inset-inline-start: -45%}100%{inset-inline-start: 100%}}@keyframes uiToastIn{from{opacity: 0;transform: translateY(12px) scale(0.98)}to{opacity: 1;transform: translateY(0) scale(1)}}@keyframes uiScrollGrow{to{transform: scaleX(1)}}.ui-animate-in{animation: uiRise var(--duration-slow) var(--ease-spring) both}.ui-animate-fade{animation: uiFadeIn var(--duration-base) var(--ease-standard) both}.ui-animate-dot{animation: uiDotIn var(--duration-base) var(--ease-spring) both}.ui-animate-matrix{animation: uiMatrixReveal var(--duration-slow) var(--ease-out) both}.ui-stagger > *{animation: uiRise var(--duration-slow) var(--ease-spring) both;animation-delay: calc(var(--i,0) * 60ms)}.ui-stagger--auto > *:nth-child(1){animation-delay: 0ms}.ui-stagger--auto > *:nth-child(2){animation-delay: 60ms}.ui-stagger--auto > *:nth-child(3){animation-delay: 120ms}.ui-stagger--auto > *:nth-child(4){animation-delay: 180ms}.ui-stagger--auto > *:nth-child(5){animation-delay: 240ms}.ui-stagger--auto > *:nth-child(6){animation-delay: 300ms}.ui-stagger--auto > *:nth-child(n + 7){animation-delay: 360ms}@media (prefers-reduced-motion: no-preference){.ui-reveal{opacity: 0;transform: translateY(14px);transition: opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out)}.ui-reveal.is-visible{opacity: 1;transform: none}}.ui-skeleton{background: linear-gradient( 90deg,var(--panel-soft) 25%,color-mix(in srgb,var(--panel-soft) 55%,var(--line-strong)) 50%,var(--panel-soft) 75% );background-size: 200% 100%;animation: uiShimmer 1.4s linear infinite;border-radius: var(--radius-sm);color: transparent;min-block-size: 0.8em}.ui-spinner{animation: uiSpin 0.7s linear infinite;border: 2px solid var(--line);border-radius: 50%;border-block-start-color: var(--accent);display: inline-block;block-size: 1.1rem;inline-size: 1.1rem}.ui-caret::after{animation: uiBlink 1.1s steps(1) infinite;content: '▮';margin-inline-start: 0.1em}.ui-scroll-progress{background: var(--accent);block-size: 3px;inset-block-start: 0;inset-inline: 0;position: fixed;transform: scaleX(0);transform-origin: 0 50%;z-index: var(--z-overlay)}[dir='rtl'] .ui-scroll-progress{transform-origin: 100% 50%}@supports (animation-timeline: scroll()){@media (prefers-reduced-motion: no-preference){.ui-scroll-progress{animation: uiScrollGrow linear;animation-timeline: scroll(root block)}}}@supports (animation-timeline: view()){@media (prefers-reduced-motion: no-preference){.ui-scroll-reveal{animation: uiRise linear both;animation-timeline: view();animation-range: entry 0% cover 40%}}}.ui-vt{view-transition-name: var(--ui-vt-name,none)}@media (prefers-reduced-motion: no-preference){::view-transition-old(root),::view-transition-new(root){animation-duration: var(--duration-base);animation-timing-function: var(--ease-standard)}}@media (prefers-reduced-motion: reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation: none !important}}@media (prefers-reduced-motion: reduce){html{scroll-behavior: auto}*,*::before,*::after{animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important}.ui-reveal{opacity: 1 !important;transform: none !important}}}

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-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}}}
+@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]{display: grid;grid-template-rows: auto 1fr auto}dialog.ui-modal{opacity: 0;transform: translateY(6px) scale(0.98);transition: opacity var(--duration-base) var(--ease-spring),transform var(--duration-base) var(--ease-spring),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete}dialog.ui-modal[open]{opacity: 1;transform: none}@starting-style{dialog.ui-modal[open]{opacity: 0;transform: translateY(6px) scale(0.98)}}dialog.ui-modal::backdrop{opacity: 0;transition: opacity var(--duration-base) var(--ease-out),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete}dialog.ui-modal[open]::backdrop{opacity: 1}@starting-style{dialog.ui-modal[open]::backdrop{opacity: 0}}.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}dialog.ui-modal,dialog.ui-modal::backdrop{transition: 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--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}}
+@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-shortcut{align-items: center;display: inline-flex;gap: 0.25rem;vertical-align: middle;white-space: nowrap}.ui-shortcut__sep{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs)}.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/report.css

@@ -0,0 +1 @@
+@layer bronto{.ui-report{--report-gap: var(--space-lg);--report-measure: 74ch;--report-page-margin: 18mm;color: var(--text-soft);display: grid;gap: var(--report-gap);inline-size: min(100%,var(--report-width,72rem));margin-inline: auto;padding: var(--report-padding-block,var(--space-2xl)) var(--space-md)}.ui-report--compact{--report-gap: var(--space-md);--report-padding-block: var(--space-xl)}.ui-report--numbered{counter-reset: report-section}.ui-report__cover{align-content: end;border-block-end: 1px solid var(--line);display: grid;gap: var(--space-md);min-block-size: min(62vh,34rem);padding-block-end: var(--space-xl)}.ui-report__cover--compact{min-block-size: auto;padding-block: var(--space-xl) var(--space-lg)}.ui-report__header{align-items: 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-report__title{color: var(--text);font-family: var(--display);font-size: calc(var(--text-xl) * 1.35);letter-spacing: 0;line-height: 1.05;margin: 0;max-inline-size: var(--report-measure);text-transform: uppercase;text-wrap: balance}.ui-report__subtitle{color: var(--text-dim);font-size: var(--text-lg);line-height: 1.5;margin: 0;max-inline-size: var(--report-measure)}.ui-report__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: 0;list-style: none;margin: 0;padding: 0;text-transform: uppercase}.ui-report__meta > *{align-items: center;display: inline-flex;gap: 0.55rem}.ui-report__meta > :not(:last-child)::after{background: var(--line-strong);border-radius: 50%;block-size: 0.22rem;content: '';inline-size: 0.22rem}.ui-report__toc{border: 1px solid var(--line);border-radius: var(--radius-md);display: grid;gap: var(--space-xs);padding: var(--space-md)}.ui-report__toc ol,.ui-report__toc ul{display: grid;gap: 0.35rem;margin: 0;padding-inline-start: var(--space-md)}.ui-report__toc a{color: var(--text);text-decoration: underline;text-decoration-color: color-mix(in srgb,var(--accent) 45%,transparent);text-underline-offset: 0.2rem}.ui-report__summary,.ui-report__finding,.ui-report__evidence{background: var(--panel);border: 1px solid var(--line);border-radius: var(--radius-md);display: grid;gap: var(--space-sm);padding: var(--space-md)}.ui-report__summary{border-inline-start: 2px solid var(--accent)}.ui-report__finding{border-inline-start: 2px solid var(--line-strong)}.ui-report__evidence{background: var(--panel-soft)}.ui-report__evidence:has(> .ui-table-wrap:only-child){padding: 0}.ui-report__evidence:has(> .ui-table-wrap:only-child) > .ui-table-wrap{border: 0;border-radius: var(--radius-md)}.ui-report__section{display: grid;gap: var(--space-md);scroll-margin-block-start: 6rem}.ui-report__section + .ui-report__section{border-block-start: 1px solid var(--line);padding-block-start: var(--space-xl)}.ui-report__section-head{color: var(--text);font-family: var(--display);font-size: var(--text-xl);letter-spacing: 0;line-height: 1.1;margin: 0;text-transform: uppercase;text-wrap: balance}.ui-report--numbered .ui-report__section-head::before{color: var(--accent-text);content: counter(report-section,decimal-leading-zero) ' / ';counter-increment: report-section}.ui-report--numbered .ui-report__section--unnumbered > .ui-report__section-head::before{content: none;counter-increment: none}.ui-report__figure{display: grid;gap: var(--space-sm);margin: 0}.ui-report__caption,.ui-chart__caption{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: 0;line-height: 1.5;text-transform: uppercase}.ui-report__sources,.ui-report__appendix,.ui-report__footnotes{border-block-start: 1px solid var(--line);color: var(--text-dim);display: grid;font-size: var(--text-sm);gap: var(--space-sm);padding-block-start: var(--space-md)}.ui-chart{border: 1px solid var(--line);border-radius: var(--radius-md);display: grid;gap: var(--space-sm);padding: var(--space-md)}.ui-chart__plot{display: grid;gap: var(--space-xs)}.ui-chart__bar{--chart-value: 0%;display: grid;gap: 0.35rem}.ui-chart__bar[hidden]{display: none}.ui-chart__label{align-items: center;color: var(--text-soft);display: flex;font-family: var(--mono);font-size: var(--text-xs);gap: var(--space-sm);justify-content: space-between}.ui-chart__track{background: var(--panel-soft);border: 1px solid var(--line);block-size: 0.8rem;min-inline-size: 0}.ui-chart__fill{background: var(--chart-color,var(--chart-1,var(--accent)));background-image: var(--chart-pattern,var(--chart-pattern-1,none));background-size: var(--chart-pattern-size,8px);block-size: 100%;inline-size: clamp(0%,var(--chart-value),100%)}.ui-chart__fallback{margin-block-start: var(--space-sm)}.ui-print-only{display: none !important}.ui-print-exact{-webkit-print-color-adjust: exact;print-color-adjust: exact}@media print{@page{margin: var(--report-page-margin)}.ui-report{--report-padding-block: 0;color-scheme: light;--text: #111;--text-soft: #2a2a2a;--text-dim: #555;--panel: #fff;--panel-soft: #f7f7f7;--line: #d9d9d9;--line-strong: #b3b3b3;inline-size: auto;padding: 0}.ui-chart__fill{-webkit-print-color-adjust: exact;print-color-adjust: exact}.ui-report__cover{min-block-size: auto}.ui-report__cover,.ui-report__header,.ui-report__section,.ui-report__summary,.ui-report__finding,.ui-report__evidence,.ui-report__figure,.ui-chart{break-inside: avoid}.ui-report__section-head{break-after: avoid}.ui-print-only{display: var(--print-display,block) !important}.ui-screen-only{display: none !important}.ui-break-before{break-before: page}.ui-break-after{break-after: page}.ui-keep{break-inside: avoid}}}

package/dist/css/selection.css

@@ -0,0 +1 @@
+@layer bronto{.ui-sel{transition: opacity 0.12s ease,outline-color 0.12s ease}@media (prefers-reduced-motion: reduce){.ui-sel{transition: none}}.ui-sel--on{outline: 2px solid var(--accent);outline-offset: 1px}.ui-sel--off{opacity: 0.35}.ui-sel--maybe{outline: 1px dashed var(--accent);outline-offset: 1px}@media (forced-colors: active){.ui-sel--on{outline-color: Highlight}}}

package/dist/css/sources.css

@@ -0,0 +1 @@
+@layer bronto{.ui-citation,.ui-source-card,.ui-provenance{--src-tone: var(--text-dim)}.ui-src--verified{--src-tone: var(--success)}.ui-src--reviewed{--src-tone: var(--accent)}.ui-src--generated{--src-tone: var(--info)}.ui-src--unverified{--src-tone: var(--text-dim)}.ui-src--stale{--src-tone: var(--warning)}.ui-src--conflict{--src-tone: var(--danger)}.ui-citation{color: var(--accent-text);font-family: var(--mono);font-size: 0.72em;font-weight: 600;text-decoration: none;vertical-align: super}.ui-citation:hover{text-decoration: underline}.ui-citation--chip{align-items: center;background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-pill);color: var(--text-soft);display: inline-flex;font-size: var(--text-2xs);gap: 0.35rem;padding: 0.08rem 0.55rem;vertical-align: baseline}.ui-citation--chip::before{background: var(--src-tone);border-radius: 50%;block-size: 0.45rem;content: '';inline-size: 0.45rem;print-color-adjust: exact}.ui-source-list{display: grid;gap: var(--space-sm);list-style: none;margin: 0;padding: 0}.ui-source-list__item{margin: 0}.ui-source-card{background: var(--panel-soft);border: 1px solid var(--line);border-inline-start: 2px solid var(--src-tone);border-radius: var(--radius-md);display: grid;gap: 0.3rem;padding: 0.75rem 0.9rem;print-color-adjust: exact}.ui-source-card__title{color: var(--text);font-size: var(--text-sm);font-weight: 600;margin: 0}.ui-source-card__origin{color: var(--text-soft);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: var(--tracking-wide)}.ui-source-card__time{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs)}.ui-source-card__excerpt{color: var(--text-soft);margin: 0}.ui-source-card__actions{display: flex;flex-wrap: wrap;gap: 0.5rem;margin-block-start: 0.2rem}.ui-provenance{align-items: center;color: var(--text-dim);display: inline-flex;flex-wrap: wrap;font-family: var(--mono);font-size: var(--text-2xs);gap: 0.3rem 0.75rem;letter-spacing: var(--tracking-wide)}.ui-provenance__item{align-items: center;display: inline-flex;gap: 0.35rem}.ui-provenance__item::before{background: var(--src-tone);border-radius: 50%;block-size: 0.45rem;content: '';inline-size: 0.45rem;print-color-adjust: exact}@media (forced-colors: active){.ui-citation--chip::before,.ui-provenance__item::before{background: CanvasText}.ui-source-card{border-inline-start-color: CanvasText}}}

package/dist/css/spotlight.css

@@ -0,0 +1 @@
+@layer bronto{.ui-spotlight{--spot-x: 50%;--spot-y: 50%;--spot-w: 0px;--spot-h: 0px;--spot-pad: 8px;--spot-radius: var(--radius-md);--spot-backdrop: color-mix(in srgb,#000 55%,transparent);inset: 0;pointer-events: none;position: fixed;z-index: var(--z-overlay,1000)}.ui-spotlight__hole{background: transparent;block-size: calc(var(--spot-h) + var(--spot-pad) * 2);border-radius: var(--spot-radius);box-shadow: 0 0 0 100vmax var(--spot-backdrop);inline-size: calc(var(--spot-w) + var(--spot-pad) * 2);inset-block-start: 0;inset-inline-start: 0;position: absolute;transform: translate( calc(var(--spot-x) - var(--spot-pad)),calc(var(--spot-y) - var(--spot-pad)) );transition: transform 0.2s ease,inline-size 0.2s ease,block-size 0.2s ease}@media (prefers-reduced-motion: reduce){.ui-spotlight__hole{transition: none}}.ui-spotlight--ring .ui-spotlight__hole{outline: 2px solid var(--accent);outline-offset: 0}.ui-tour-note{background: var(--panel);border: 1px solid var(--line);border-radius: var(--radius-md);box-shadow: var(--shadow-raised);color: var(--text);display: grid;gap: var(--space-sm);max-inline-size: 22rem;padding: var(--space-md);pointer-events: auto}.ui-tour-note__step{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: 0;text-transform: uppercase}.ui-tour-note__title{color: var(--text);font-size: var(--text-lg);font-weight: 600;margin: 0}.ui-tour-note__body{color: var(--text-soft);margin: 0}.ui-tour-note__actions{display: flex;gap: var(--space-sm);justify-content: flex-end}@media (forced-colors: active){.ui-spotlight__hole{outline: 2px solid CanvasText}}}

package/dist/css/state.css

@@ -0,0 +1 @@
+@layer bronto{.ui-state{--state-tone: var(--text-dim);align-items: center;display: inline-flex;font-size: var(--text-sm);gap: 0.4rem}.ui-state::before{background: var(--state-tone);border-radius: 50%;block-size: 0.5rem;content: '';flex: none;inline-size: 0.5rem;print-color-adjust: exact}.ui-state__label{color: var(--text)}.ui-state__detail{color: var(--text-dim);font-size: var(--text-2xs)}.ui-state--busy::before{animation: uiStatePulse 1.1s ease-in-out infinite}@keyframes uiStatePulse{50%{opacity: 0.3}}@media (prefers-reduced-motion: reduce){.ui-state--busy::before{animation: none}}.ui-state--saving{--state-tone: var(--accent)}.ui-state--saved{--state-tone: var(--success)}.ui-state--queued{--state-tone: var(--text-dim)}.ui-state--offline{--state-tone: var(--warning)}.ui-state--stale{--state-tone: var(--warning)}.ui-state--conflict{--state-tone: var(--danger)}.ui-state--error{--state-tone: var(--danger)}.ui-state--locked{--state-tone: var(--text-dim)}.ui-state--reviewed{--state-tone: var(--success)}.ui-state--needs-review{--state-tone: var(--warning)}.ui-syncbar{align-items: center;border-block-end: 1px solid var(--line);display: flex;flex-wrap: wrap;gap: var(--space-sm) var(--space-md);justify-content: space-between;padding-block: var(--space-xs)}@media (forced-colors: active){.ui-state::before{background: CanvasText}}}

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;--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 oklch,var(--accent) 8%,var(--bg));--accent-2: color-mix(in oklch,var(--accent) 16%,var(--bg));--accent-3: color-mix(in oklch,var(--accent) 32%,var(--bg));--accent-4: color-mix(in oklch,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);--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);--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);--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)}}}
+@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 oklch,var(--accent) 8%,var(--accent-ramp-end));--accent-2: color-mix(in oklch,var(--accent) 16%,var(--accent-ramp-end));--accent-3: color-mix(in oklch,var(--accent) 32%,var(--accent-ramp-end));--accent-4: color-mix(in oklch,var(--accent) 60%,var(--accent-ramp-end));--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-ramp-end: #ffffff;--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);--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: #121212;--bg-elevated: #181818;--bg-accent: color-mix(in srgb,var(--accent) 8%,transparent);--panel: #1c1c1c;--panel-strong: #222222;--panel-soft: #242424;--line: #383838;--line-strong: #555555;--text: #e6e6e6;--text-soft: #c8c8c8;--text-dim: #a0a0a0;--accent: #ff3b41;--accent-ramp-end: #000000;--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);--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: #121212;--bg-elevated: #181818;--bg-accent: color-mix(in srgb,var(--accent) 8%,transparent);--panel: #1c1c1c;--panel-strong: #222222;--panel-soft: #242424;--line: #383838;--line-strong: #555555;--text: #e6e6e6;--text-soft: #c8c8c8;--text-dim: #a0a0a0;--accent: #ff3b41;--accent-ramp-end: #000000;--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);--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)}}:root[data-theme='dark'][data-surface='oled']{--bg: #000000;--bg-elevated: #0a0a0a;--panel: #101010;--panel-strong: #161616;--panel-soft: #1a1a1a}@media (prefers-color-scheme: dark){:root:not([data-theme='light'])[data-surface='oled']{--bg: #000000;--bg-elevated: #0a0a0a;--panel: #101010;--panel-strong: #161616;--panel-soft: #1a1a1a}}}

package/dist/css/workbench.css

@@ -0,0 +1 @@
+@layer bronto{.ui-inspector{background: var(--panel);border: 1px solid var(--line);border-radius: var(--radius-md);display: grid;gap: var(--space-sm);padding: var(--space-md)}.ui-inspector__header{align-items: baseline;border-block-end: 1px solid var(--line);display: flex;gap: var(--space-sm);justify-content: space-between;padding-block-end: var(--space-xs)}.ui-inspector__body{display: grid;gap: var(--space-2xs)}.ui-property{align-items: baseline;display: grid;gap: var(--space-sm);grid-template-columns: minmax(6rem,38%) 1fr}.ui-property__label{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-property__value{color: var(--text);font-size: var(--text-sm);min-inline-size: 0}.ui-selectionbar{align-items: center;background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);box-shadow: var(--shadow-raised);display: flex;flex-wrap: wrap;gap: var(--space-sm) var(--space-md);justify-content: space-between;padding: 0.5rem 0.85rem}.ui-selectionbar__count{color: var(--text);font-family: var(--mono);font-size: var(--text-sm)}.ui-selectionbar__actions{display: flex;flex-wrap: wrap;gap: var(--space-xs)}}

package/docs/adr/0001-color-system.md

@@ -48,7 +48,7 @@ one accent *mean* something.
 
 | Practice | Who | Relevance to us |
 | --- | --- | --- |
-| **Perceptual color space** (equal numeric step = equal perceived step) | Tailwind v4 (OKLCH+P3), Radix 3 (P3), Material 3 (HCT) | We derive `--accent-1..6` via `color-mix(in srgb,…)`; OKLCH is the modern substrate and is **CSS-native** — no dependency cost |
+| **Perceptual color space** (equal numeric step = equal perceived step) | Tailwind v4 (OKLCH+P3), Radix 3 (P3), Material 3 (HCT) | `--accent-1..6` now derives via `color-mix(in oklch,…)`; OKLCH is the modern substrate and is **CSS-native** — no dependency cost |
 | **Relative color syntax** `oklch(from var(--base) calc(l-.1) c h)` | CSS Color 5 | ~90% support, Baseline in 2026 — lets a single hue derive a whole tonal ramp natively |
 | **WCAG 2.2 to pass, APCA to design** | Radix text steps spec'd in APCA Lc | WCAG 2.2 AA stays the legal/hard gate; APCA (Lc, accounts for size/weight, WCAG 3 candidate) as an **advisory** track |
 | **Role-bound scale steps** (1–2 bg, 3–5 component, 6–8 border, 9–10 solid, 11–12 text) | Radix 12-step | Our tiers are coarser; the role-bound scale is where depth lives if we ever need it |
@@ -136,15 +136,13 @@ Hard acceptance criteria for every step below:
   said "dist bytes unchanged" — the precise invariant is *rendered output*.)
 - Token **names** are not renamed/repurposed (removals of provably-unreferenced
   tokens follow the CONTRIBUTING.md deprecation-policy exception).
-- The existing `--accent-1..6` **sRGB `color-mix` derivation is not silently
-  changed.** `scripts/gen-resolved.mjs` only evaluates `color-mix(in srgb,…)`;
-  for any other space it returns `null`, and a `null` token is **dropped
-  entirely** from `resolved.json` (not defaulted) — so a consumer doing
-  `resolved.dark['--accent-3']` would get `undefined` and may throw. Combined
-  with the rendered-pixel change, switching the ramp to OKLCH is a breaking
-  change twice over. Stable names alone do not make it non-breaking. Any OKLCH
-  migration of the **existing** ramp is a documented **minor/RC** decision
-  after tooling + visual review, never a silent patch.
+- The existing `--accent-1..6` **token names and roles are stable; exact
+  values are visual tuning before 1.0.** The ramp migrated from sRGB to OKLCH in
+  `0.4.0` only after `scripts/gen-resolved.mjs` learned
+  `color-mix(in oklch, …)` and visual review confirmed no component-rendering
+  baseline moved. Future changes to the ramp algorithm require the same
+  treatment: resolver support first, computed-style checks, changelog callout,
+  and release-note visibility.
 
 ## Roadmap (ordered, backward-compatible)
 
@@ -176,12 +174,10 @@ Hard acceptance criteria for every step below:
    `css/forms.css` (they touch only the accent, never the canvas).
 5. **OKLCH for new work first.** *(done for colorways — accents authored in
    OKLCH in `tokens/skins.js`; the contrast tooling now parses `oklch()` →
-   sRGB, so skin accents are gated, not eyeballed.)* The **core** `--accent-1..6`
-   ramp stays sRGB (decision below). For any future OKLCH in contractual token
-   files (the core ramp), still upgrade `gen-resolved` first and add a
-   gamut-aware fallback (`@supports`, sRGB-first), and consider `light-dark()`
-   to collapse the twice-written dark palette — both are in the same CSS
-   Color 5 / Baseline-2026 bracket.
+   sRGB, so skin accents are gated, not eyeballed.)* The core ramp followed in
+   step 8 only after resolver and visual checks were in place. For future CSS
+   Color 5 work, still upgrade generators/checks first and consider
+   `light-dark()` only when it is inside the declared browser floor.
 6. **APCA advisory reporting.** *(done — `scripts/gen-contrast.mjs`)* APCA-W3
    0.1.9 `Lc` is computed beside the WCAG ratio for every pairing (core + skins)
    in `docs/contrast.md`. **Advisory only** — WCAG 2.1 AA stays the hard gate.
@@ -199,9 +195,10 @@ Hard acceptance criteria for every step below:
    ratio vs the background is reported **advisory** (a fill is not body text;
    the pattern + ΔE gate carry distinguishability).
 8. **OKLCH `--accent-1..6` ramp migration.** *(done in 0.4.0)* Steps 1–4 mix
-   the accent toward `--bg` `in oklch` (perceptually even). `gen-resolved` was
-   upgraded first to resolve `color-mix(in oklch,…)` → hex (bit-for-bit matching
-   the browser, incl. powerless-hue for near-neutral endpoints), so the
+   the accent toward `--accent-ramp-end` (white in light, black in dark)
+   `in oklch` (perceptually even). The explicit endpoint avoids low-chroma
+   background-hue differences between browser engines. `gen-resolved` was
+   upgraded first to resolve `color-mix(in oklch,…)` → hex, so the
    contractual `resolved.json`/DTCG never drop the tokens. Verified no rendered
    change: `--accent-1..6` is consumed by **no** component (only JS/chart
    consumers + the theme playground), so no visual baseline moved — the feared
@@ -213,8 +210,8 @@ Hard acceptance criteria for every step below:
 | Risk | Mitigation |
 | --- | --- |
 | **Brand dilution** (secondary accents, decorative hues creep in) | Rule 4/5; `check:color-policy`; off-by-default |
-| **Compat break** from OKLCH ramp swap | Freeze above; OKLCH for *new* work first; minor/RC only, never silent |
-| **Tooling drift** (resolver/DTCG/contrast/baseline assume sRGB) | Upgrade tooling *before* OKLCH enters token files; add computed-style tests |
+| **Compat break** from future ramp tuning | Freeze above; resolver + computed-style checks first; release notes always call out value changes |
+| **Tooling drift** (resolver/DTCG/contrast/baseline assume one color space) | Upgrade tooling *before* new colour syntax enters token files; keep computed-style tests |
 | **Chart color leakage** into UI chrome | `check:color-policy` forbids chart tokens in core CSS; docs forbid it |
 | **Motion/status misuse** carrying sole meaning | Rule 6; reduced-motion equivalence; status stays locked, never skin-derived |
 | **APCA overreach** | Advisory only; WCAG 2.2 AA stays the hard gate while WCAG 3 is draft |
@@ -240,9 +237,10 @@ Hard acceptance criteria for every step below:
 Resolved while implementing steps 3–6 (the open questions the earlier draft
 flagged):
 
-- **`--accent-1..6` is semver-stable and stays sRGB.** No silent ramp change.
-  → step 8 (default-ramp OKLCH migration) **deferred** — visual-diff review
-  cost outweighs the gain; reconsider as an opt-in engine / explicit minor.
+- **`--accent-1..6` migrated to OKLCH in 0.4.0.** Token names and roles are
+  stable; exact values remain visual tuning before 1.0. The migration shipped
+  only after resolver support and visual review confirmed no component baseline
+  consumed the changed values.
 - **Colorways ship as a supported package export** (`./css/skins.css`),
   opt-in, excluded from the default bundle. Not docs-only recipes.
 - **Colorways are root-level** (`data-bronto-skin` on `:root`, like
@@ -266,7 +264,8 @@ WCAG; Radix 12-step; Material 3 HCT; Adobe Leonardo; colorblind-safe
 categorical limits) and a 14-leg AgentMix `deep` multi-POV pass
 (Pi/MiniMax, Aider, OpenCode, Crush, Codex + architecture / implementation-risk
 / testing / security / operations / contrarian legs). Key reconciled dissent:
-several legs wanted an immediate OKLCH ramp swap — rejected as a silent break
-(see freeze); the claim that `--accent-1..6` already serves as a categorical
-scale was rejected (a same-hue ramp encodes sequence/intensity, not independent
+several legs warned that an OKLCH ramp swap would be a silent break if tooling
+lagged — accepted as a process constraint, then resolved before 0.4.0 shipped;
+the claim that `--accent-1..6` already serves as a categorical scale was
+rejected (a same-hue ramp encodes sequence/intensity, not independent
 categories); deriving status from skins was rejected (status stays locked).

package/docs/adr/0002-scope-and-2026-baseline.md

@@ -0,0 +1,104 @@
+# ADR-0002 — Scope, and the 2026 baseline: what `@ponchia/ui` is and isn't
+
+Status: accepted · 2026-06-01 · sets the project's category, browser floor, and
+the line between "ours" and "the consumer's framework"
+
+## Context
+
+The 2026 "UI framework" bar is often framed around **application/runtime**
+concerns: signals vs VDOM, resumable/granular hydration, server-driven UI
+streaming, local-first + CRDT state sync, cross-target native compilation
+(SwiftUI/Compose/WebGPU), physics-based interruptible motion, and "neural
+expressive" tactile/haptic, dimensional UI.
+
+`@ponchia/ui` is a different species: a **CSS-first design layer** — semantic
+`ui-*` classes in one `@layer`, design tokens as data, and *thin optional*
+behaviors/bindings — that sits **on top of** whatever app framework the
+consumer chooses (ADR-0001 / architecture.md). Conflating the two is a category
+error. This ADR records, against that 2026 bar, what the project deliberately
+provides, pursues, and refuses. Second lens that governs every call: the project
+is currently single-maintainer / single-consumer — **restraint is both the
+brand and the correct strategy**; complexity with no payoff for one user is pure
+cost.
+
+## Decision
+
+### What we ARE (and lean into)
+- **A CSS-first, zero-runtime-dependency design system.** The CSS renders
+  server-side with nothing to hydrate; behaviors are optional, SSR-safe,
+  delegated progressive enhancement. (This already satisfies the "zero JS until
+  interaction" goal for our scope — there is nothing to hydrate.)
+- **AI-/agent-legible by construction.** Plain `ui-*` classes (no component API
+  to learn) + `llms.txt` + drift-checked `reference.md` + typed `cls` + DTCG /
+  `resolved.json`. An LLM can read and emit our markup today — the "semantic
+  rendering" pillar, had, without an SDUI engine.
+- **Accessibility as a gate, and system-signal-adaptive.** CI-enforced WCAG +
+  APCA, CVD-gated charts, and live adaptation to `prefers-reduced-motion` /
+  `prefers-contrast` / `forced-colors` + `data-density`/`data-contrast`.
+- **Cross-target via tokens, not components.** `resolved.json` / DTCG feed
+  canvas/SVG/MapLibre and Figma/Style-Dictionary; the design *language* travels
+  even though components don't.
+- **Framework-agnostic, with optional thin React/Solid/Qwik bindings.**
+
+### What we PURSUE (the 2026 leap that fits: CSS-native motion)
+"Motion as a first-class citizen / interruptible / layout morphing" is the one
+manifesto pillar that converges with a CSS-first, zero-dependency identity —
+because the modern platform makes it declarative:
+- **Shipped (0.4.1):** native `<dialog>` (modal/drawer) + backdrop **enter *and*
+  exit** transitions via `@starting-style` + `transition-behavior: allow-discrete`
+  — zero JS, reduced-motion-aware. (Previously the overlay only animated in.)
+  Extended, same approach, to **popover** (both the native `[popover]` top-layer
+  and the `.is-open` fallback), **toast** (CSS fade-out on dismiss — the
+  behavior adds `.is-leaving` and removes on `transitionend`, falling back to
+  instant removal under reduced-motion), and **accordion** auto-height open/close
+  via `::details-content` + `interpolate-size: allow-keywords` (gated on
+  `@supports selector(::details-content)`; engines without it snap).
+- **Shipped (0.4.1), progressive enhancement:** **scroll-driven** primitives
+  (`.ui-scroll-progress`, `.ui-scroll-reveal`) on `scroll()` / `view()`
+  timelines, gated on `@supports (animation-timeline: …)` so they degrade to a
+  static end-state, and **View Transitions** — a `.ui-vt` `view-transition-name`
+  helper, an on-brand `::view-transition-*(root)` cross-fade, and a
+  reduced-motion kill-switch for the VT pseudo-tree (which does *not* honour
+  reduced-motion on its own). The document-global cross-document opt-in
+  (`@view-transition { navigation: auto }`) is documented rather than shipped —
+  it can't be layered or scoped, so it stays the consumer's one-liner. No JS
+  animation runtime — the platform is the engine.
+- **Next:** track the not-yet-cross-engine features to general availability
+  (scroll-driven + `interpolate-size` are Chromium-led today) and continue the
+  OKLCH / `light-dark()` / P3 work flagged in ADR-0001.
+
+### Browser floor — deliberately modern
+Floor raised to **Chrome/Edge 125+, Safari 18+, Firefox 129+** (early–mid 2025)
+to build on `@starting-style`, `allow-discrete`, `oklch()`/relative color, and
+`light-dark()` natively. Greenfield stance: **no fallbacks below the floor**;
+not-yet-cross-engine features are enhancement-only. (Acceptable precisely because
+this is new and not yet in production for real products.)
+
+### What is OUT OF SCOPE (permanently — the consumer's framework, or counter-brand)
+- **Reactivity runtime** (signals vs VDOM), **granular/resumable hydration**,
+  **server-driven-UI streaming engine** — the consumer's framework (React, Solid,
+  Qwik, …). We *compose* with them; we don't compete.
+- **Local-first / CRDTs / IndexedDB / sync** — a data layer, not a design layer.
+  Zero payoff for a solo consumer.
+- **Cross-target native compilation** (SwiftUI / Jetpack Compose / WebGPU) — a
+  Flutter/RN-class ambition; the token layer already covers the modest
+  cross-target need.
+- **Haptics + "vibrant dimensional layering / adaptive lighting / liquid
+  glass"** — not merely out of scope but **counter to the thesis** (flat,
+  monochrome, anti-skeuomorphic). Our on-brand "dimensional" expression is the
+  dot-matrix glow / luminance work (ADR-0001 Tier 3), not Apple-glass.
+- **"Cognitive-load-adaptive" dynamic a11y** — speculative, app-level.
+
+## Consequences
+- New work is judged against this map: if a request belongs to the runtime/data/
+  native-compile layer, it's the consumer's, and we document the composition
+  instead of building it.
+- The headline forward investment is **CSS-native motion**, progressively
+  enhanced — making fluid, interruptible, exit-animated UI the *default* with no
+  JS, which is the project's ethos rather than a departure from it.
+- The modern floor is a feature, not a liability, for a greenfield design system.
+
+## Method
+Prompted by a review of the 2026 UI-framework baseline against the actual repo
+(no reactivity/hydration/state code exists — by design) and the single-consumer
+reality. Grounded in ADR-0001 (color) and architecture.md (CSS-is-the-framework).

package/docs/adr/0003-theme-model.md

@@ -0,0 +1,97 @@
+# ADR-0003 — The theme model: a binary base axis, not a named-theme catalog
+
+Status: accepted · 2026-06-01 · records why theming is light/dark + derivation +
+orthogonal axes, and the readability re-tune of the dark base. Builds on
+[ADR-0001](0001-color-system.md) (the color tier model) and
+[ADR-0002](0002-scope-and-2026-baseline.md) (scope + restraint).
+
+## Context
+
+Recurring question: "isn't a simple dark/light theme outdated — should we ship
+*named themes* instead?" And a real complaint: the dark theme was **hard to
+read**.
+
+Two things had to be separated: the **theme architecture** (is binary
+dark/light the right model?) and the **dark palette tuning** (is our dark
+actually good?). They have different answers.
+
+## Decision
+
+### The theme model is a binary base axis + derivation + orthogonal axes — and that is the modern shape, not the dated one
+
+`@ponchia/ui` themes along **one binary base axis** (light/dark, honouring
+`prefers-color-scheme`, overridable with `[data-theme]`), with everything else
+*derived* or carried on *orthogonal axes*:
+
+- **Base:** light / dark (`css/tokens.css`).
+- **Brand (derivation):** one `--accent` knob → the whole accent family via
+  OKLCH `color-mix()` (ADR-0001). Material-3-style single-seed derivation, in
+  CSS, with zero runtime.
+- **Colorway:** `data-bronto-skin` (amber-crt / phosphor-green / e-ink) —
+  re-points the one accent; opt-in `skins.css`.
+- **Surface:** `data-surface="oled"` — true-black variant of the dark base
+  (see below).
+- **Contrast:** `data-contrast="high"` + `prefers-contrast`.
+- **Density:** `data-density="compact|comfortable"`.
+
+This is the pattern the leaders converged on (Material 3 tonal + contrast axis;
+GitHub Primer's base × {dimmed, high-contrast, colorblind}; Radix light/dark
+pairs; Tailwind v4 CSS-var tokens; Apple appearance × Increase-Contrast × accent).
+A **flat named-theme catalog** (IBM Carbon's white/g10/g90/g100) is the *older*
+model — and for a single-consumer project (ADR-0002) every named theme is another
+contrast matrix to gate, more DTCG surface, more baselines, for one user who
+picks one look. **We reject the named-theme catalog**: composable axes are more
+powerful and cheaper. A new base palette is added only when a concrete need
+appears (the bar ADR-0001 used for the data-viz module).
+
+### The dark base is re-tuned for readability (and pure black becomes opt-in)
+
+The old dark base was **pure `#000` + `--text #f2f2f2`**. By WCAG 2.1 every
+pairing "passed" (18:1), but WCAG 2.x **over-rates dark-mode contrast** (its
+symmetric ratio saturates near black). The APCA column we already compute
+(advisory) told the truth:
+
+- `--text` on `--bg`: WCAG 18.76:1 but **APCA Lc 99** — over-driven → *halation*
+  on pure black.
+- `--text-dim` on dark surfaces: WCAG 4.7–5.7:1 ("pass") but **APCA Lc 36–37** —
+  below the perceptual floor for readable meta text. **This was the "hard to
+  read."**
+- Surfaces `#000→#0c0c0c`: an imperceptible elevation step → cards melted into
+  the page.
+
+Re-tuned dark neutral ramp: base lifted to an elevated near-black
+(`--bg #121212`, panels `#1c1c1c`/`#222`/`#242424`, lines `#383838`/`#555`),
+body text eased to `#e6e6e6` (Lc 99 → ~91, halation gone), and **`--text-dim`
+raised to `#a0a0a0` (Lc 36 → ~48–50)** — the change users feel. Everything still
+clears WCAG AA 4.5:1; accent/status are unchanged. The true-black "Nothing" look
+is preserved as the opt-in **`data-surface="oled"`** (OLED power-saving + brand),
+a CSS-only preset like `data-density`/`data-contrast`.
+
+APCA is promoted from purely advisory to a **tracked, non-failing warning** on
+dark text in `check-contrast.mjs` (WCAG stays the hard gate; a hard APCA gate
+remains an open ADR-0001 decision while WCAG 3 is a Working Draft). This is the
+early-warning that the Lc 36 regression would have tripped.
+
+## Consequences
+
+- Re-tuning dark token *values* changes the default rendered output in dark mode
+  → the dark Playwright visual baselines must be regenerated in the pinned Linux
+  container (`visual-baselines.yml`). Kept in 0.4.1 per the maintainer's call.
+- The dark palette was originally written in three places (the `@media` block,
+  the `[data-theme]` block, and the `cssVars.dark` JS mirror). **Resolved in
+  0.4.2:** `tokens/index.js` (`cssVars`) is now the single source, and the four
+  `:root` palette blocks of `css/tokens.css` are generated from it
+  (`scripts/gen-tokens-css.mjs`); the two dark blocks are identical by
+  construction, so a dark edit is a one-place edit, still guarded by
+  `check:tokens`.
+- `data-surface` joins `data-theme`/`data-bronto-skin`/`data-density`/
+  `data-contrast` as a documented root-level attribute (theming.md). The kitchen
+  sink ships a unified picker (theme × colorway × surface) so the full axis set
+  is selectable and visible.
+
+## Method
+
+Prompted by the maintainer's question and the "dark is hard to read" report,
+analysed with the project's own APCA data plus a design-systems landscape review
+(Material 3 / Primer / Radix / Tailwind v4 / Apple / Carbon). The fix is palette
+tuning + recording the axis decision, not a re-architecture.