@ponchia/ui 0.3.1 → 0.3.3

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__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-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__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-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-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: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{align-items: center;display: inline-flex;gap: 0.4rem;text-decoration: none}.ui-link--arrow::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-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{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{transform: translateX(0.14rem) rotate(45deg)}[dir='rtl'] .ui-link--arrow: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}}}
+@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}}

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-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__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-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}}