/*! @mogos/starkit — aggregated component styles.
* Single self-contained stylesheet for server-rendered / non-Solid consumers.
* Theme it by loading @starplane/tokens/tokens.css FIRST, then this file:
*
*
* Every value resolves through var(--starplane-*) / var(--star-*); no literal
* palette is applied. Generated by scripts/build-css.ts — do not edit by hand.
*/
/* ===== controls/styles.css ===== */
/* @starplane/controls — control primitive styles.
*
* TOKENS: every value reads the canonical `--star-*` token, falling back to the
* legacy `--starplane-*` alias, then to an inline literal — so a control renders
* complete under starstyle, under the old token sheet, or under nothing at all:
* var(--star-accent, var(--starplane-accent, #3b6ef0))
* The only raw hex/rgba in this file is the LAST link of such a chain — there is
* no value applied directly as a literal. (grep '#' → all survivors are fallbacks.)
*
* SPECIFICITY: every selector is :where(...) → zero specificity, so a product's
* own class always wins without !important.
*
* MOTION: GPU-safe only (transform + opacity). Durations + easing come from
* tokens; the `--star-ease` fallback is an emphasized snap, not a flat `ease`.
* Everything is frozen under prefers-reduced-motion.
*
* STATES: every interactive control ships rest / hover / active(press) /
* focus-visible(ring) / disabled — none are left to the browser default.
*/
/* ============================================================
BUTTON
============================================================ */
:where([data-starplane-control-button]) {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--star-space-2, var(--starplane-space-2, 8px));
border: 1px solid transparent;
border-radius: var(--star-radius-control, var(--starplane-radius-sm, 8px));
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-weight: 600;
line-height: 1;
white-space: nowrap;
cursor: pointer;
user-select: none;
/* will-change-free GPU transform for press; box-shadow for elevation lift */
transition:
background var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease)),
border-color var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease)),
color var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease)),
box-shadow var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease)),
transform var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease)),
opacity var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-control-button][data-size="md"]) {
height: 36px;
padding: 0 var(--star-space-4, var(--starplane-space-4, 16px));
font-size: var(--star-text-sm, 14px);
}
:where([data-starplane-control-button][data-size="sm"]) {
height: 28px;
padding: 0 var(--star-space-3, var(--starplane-space-3, 12px));
font-size: var(--star-text-xs, 13px);
}
/* Primary is a SOLID CTA fill carrying on-accent (white) text at small caps,
* so it fills with `--star-accent-cta` — the ramp point measured to hold white
* at AA (5.30), not the brighter `--star-accent` (white was only 2.87 on the
* dark accent / 3.26 on the light accent). Falls back to `--star-accent` for
* themes that don't define a CTA fill. Hover darkens (never lightens) so the
* white text stays above the AA floor. */
:where([data-starplane-control-button][data-variant="primary"]) {
background: var(--star-accent-cta, var(--star-accent, var(--starplane-accent, #3b6ef0)));
color: var(--star-accent-on, var(--starplane-accent-on, #ffffff));
box-shadow: var(--star-shadow-1, var(--starplane-shadow-sm, 0 1px 2px rgba(28, 25, 20, 0.10)));
}
:where([data-starplane-control-button][data-variant="primary"]:hover:not(:disabled)) {
background: color-mix(in srgb, var(--star-accent-cta, var(--star-accent, #3b6ef0)) 88%, #000);
box-shadow: var(--star-shadow-2, 0 4px 12px -4px rgba(28, 25, 20, 0.22));
}
:where([data-starplane-control-button][data-variant="ghost"]) {
background: transparent;
border-color: var(--star-border, var(--starplane-border, rgba(28, 25, 20, 0.16)));
color: var(--star-text, var(--starplane-text-primary, #1c1914));
}
:where([data-starplane-control-button][data-variant="ghost"]:hover:not(:disabled)) {
background: color-mix(in srgb, var(--star-text, var(--starplane-text-primary, #1c1914)) 6%, transparent);
border-color: var(--star-border-strong, var(--starplane-border-strong, rgba(28, 25, 20, 0.28)));
}
:where([data-starplane-control-button][data-variant="danger"]) {
background: var(--star-danger, var(--starplane-danger, #b3261e));
color: var(--star-accent-on, var(--starplane-accent-on, #ffffff));
box-shadow: var(--star-shadow-1, var(--starplane-shadow-sm, 0 1px 2px rgba(28, 25, 20, 0.10)));
}
:where([data-starplane-control-button][data-variant="danger"]:hover:not(:disabled)) {
background: color-mix(in srgb, var(--star-danger, var(--starplane-danger, #b3261e)) 88%, #000);
box-shadow: var(--star-shadow-2, 0 4px 12px -4px rgba(179, 38, 30, 0.30));
}
/* press: a real 0.5px GPU drop — the control yields under the finger */
:where([data-starplane-control-button]:active:not(:disabled)) {
transform: translateY(0.5px);
box-shadow: var(--star-shadow-1, 0 1px 1px rgba(28, 25, 20, 0.10));
}
:where([data-starplane-control-button]:disabled) {
cursor: not-allowed;
opacity: 0.5;
box-shadow: none;
}
:where([data-starplane-control-button][data-loading="true"]) {
cursor: progress;
}
:where([data-starplane-control-button-icon]) {
display: inline-flex;
align-items: center;
justify-content: center;
}
:where([data-starplane-control-spinner]) {
width: 14px;
height: 14px;
border-radius: 999px;
border: 2px solid currentColor;
border-top-color: transparent;
opacity: 0.9;
animation: starplane-control-spin 0.7s linear infinite;
}
@keyframes starplane-control-spin {
to {
transform: rotate(360deg);
}
}
/* ============================================================
INPUT / TEXTAREA
============================================================ */
:where([data-starplane-control-input]) {
box-sizing: border-box;
display: flex;
align-items: center;
gap: var(--star-space-2, var(--starplane-space-2, 8px));
width: 100%;
border: 1px solid var(--star-border, var(--starplane-border, rgba(28, 25, 20, 0.16)));
border-radius: var(--star-radius-control, var(--starplane-radius-sm, 8px));
background: var(--star-surface-raised, var(--starplane-bg-elevated, #fbfaf7));
color: var(--star-text, var(--starplane-text-primary, #1c1914));
transition:
border-color var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease)),
box-shadow var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-control-input][data-size="md"]) {
padding: 0 var(--star-space-3, var(--starplane-space-3, 12px));
min-height: 36px;
}
:where([data-starplane-control-input][data-size="sm"]) {
padding: 0 var(--star-space-2, var(--starplane-space-2, 8px));
min-height: 28px;
}
/* focus: border tightens to accent + a soft focus-ring glow (the shadcn tell) */
:where([data-starplane-control-input]:focus-within) {
border-color: var(--star-accent, var(--starplane-accent, #3b6ef0));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--star-focus-ring, var(--starplane-accent, #3b6ef0)) 30%, transparent);
}
:where([data-starplane-control-input][data-invalid="true"]) {
border-color: var(--star-danger, var(--starplane-danger, #b3261e));
}
:where([data-starplane-control-input][data-invalid="true"]:focus-within) {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--star-danger, var(--starplane-danger, #b3261e)) 26%, transparent);
}
:where([data-starplane-control-input][data-disabled="true"]) {
opacity: 0.6;
cursor: not-allowed;
}
:where([data-starplane-control-input-icon]) {
display: inline-flex;
align-items: center;
color: var(--star-text-muted, var(--starplane-text-tertiary, #9a9080));
flex: none;
}
:where([data-starplane-control-input-field]) {
flex: 1;
min-width: 0;
border: none;
outline: none;
background: transparent;
color: inherit;
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-sm, 14px);
line-height: 1.4;
}
:where([data-starplane-control-input][data-size="sm"]) [data-starplane-control-input-field] {
font-size: var(--star-text-xs, 13px);
}
:where([data-starplane-control-input-field]::placeholder) {
color: var(--star-text-muted, var(--starplane-text-tertiary, #9a9080));
}
:where([data-starplane-control-textarea]) {
box-sizing: border-box;
display: block;
width: 100%;
padding: var(--star-space-2, var(--starplane-space-2, 8px)) var(--star-space-3, var(--starplane-space-3, 12px));
border: 1px solid var(--star-border, var(--starplane-border, rgba(28, 25, 20, 0.16)));
border-radius: var(--star-radius-control, var(--starplane-radius-sm, 8px));
background: var(--star-surface-raised, var(--starplane-bg-elevated, #fbfaf7));
color: var(--star-text, var(--starplane-text-primary, #1c1914));
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-sm, 14px);
line-height: 1.5;
resize: vertical;
transition:
border-color var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease)),
box-shadow var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-control-textarea][data-size="sm"]) {
font-size: var(--star-text-xs, 13px);
}
:where([data-starplane-control-textarea]:focus-visible) {
outline: none;
border-color: var(--star-accent, var(--starplane-accent, #3b6ef0));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--star-focus-ring, var(--starplane-accent, #3b6ef0)) 30%, transparent);
}
:where([data-starplane-control-textarea][data-invalid="true"]) {
border-color: var(--star-danger, var(--starplane-danger, #b3261e));
}
:where([data-starplane-control-textarea]::placeholder) {
color: var(--star-text-muted, var(--starplane-text-tertiary, #9a9080));
}
/* ============================================================
CHECKBOX / RADIO
============================================================ */
:where([data-starplane-control-checkbox]),
:where([data-starplane-control-radio]) {
display: inline-flex;
align-items: center;
gap: var(--star-space-2, var(--starplane-space-2, 8px));
cursor: pointer;
color: var(--star-text, var(--starplane-text-primary, #1c1914));
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-sm, 14px);
line-height: 1.3;
user-select: none;
}
:where([data-starplane-control-checkbox][data-disabled="true"]),
:where([data-starplane-control-radio][data-disabled="true"]) {
opacity: 0.55;
cursor: not-allowed;
}
/* visually-hidden native inputs keep keyboard + form semantics */
:where([data-starplane-control-checkbox-input]),
:where([data-starplane-control-radio-input]) {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
:where([data-starplane-control-checkbox-box]) {
flex: none;
display: grid;
place-items: center;
width: 18px;
height: 18px;
border: 1px solid var(--star-border-strong, var(--starplane-border-strong, rgba(28, 25, 20, 0.28)));
border-radius: var(--star-radius-sm, var(--starplane-radius-sm, 5px));
background: var(--star-surface-raised, var(--starplane-bg-elevated, #fbfaf7));
color: var(--star-accent-on, var(--starplane-accent-on, #ffffff));
transition:
background var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease)),
border-color var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-control-checkbox-tick]) {
width: 14px;
height: 14px;
opacity: 0;
transform: scale(0.7);
transition:
opacity var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease)),
transform var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-control-checkbox-input]:checked) ~ [data-starplane-control-checkbox-box] {
background: var(--star-accent, var(--starplane-accent, #3b6ef0));
border-color: var(--star-accent, var(--starplane-accent, #3b6ef0));
}
:where([data-starplane-control-checkbox-input]:checked) ~ [data-starplane-control-checkbox-box] [data-starplane-control-checkbox-tick] {
opacity: 1;
transform: scale(1);
}
:where([data-starplane-control-checkbox-input]:focus-visible) ~ [data-starplane-control-checkbox-box],
:where([data-starplane-control-radio-input]:focus-visible) ~ [data-starplane-control-radio-dot] {
outline: 2px solid var(--star-focus-ring, var(--starplane-accent, #3b6ef0));
outline-offset: 2px;
}
:where([data-starplane-control-radio-dot]) {
flex: none;
position: relative;
width: 18px;
height: 18px;
border: 1px solid var(--star-border-strong, var(--starplane-border-strong, rgba(28, 25, 20, 0.28)));
border-radius: 999px;
background: var(--star-surface-raised, var(--starplane-bg-elevated, #fbfaf7));
transition: border-color var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-control-radio-dot])::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 9px;
height: 9px;
border-radius: 999px;
background: var(--star-accent, var(--starplane-accent, #3b6ef0));
transform: scale(0);
transition: transform var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-control-radio-input]:checked) ~ [data-starplane-control-radio-dot] {
border-color: var(--star-accent, var(--starplane-accent, #3b6ef0));
}
:where([data-starplane-control-radio-input]:checked) ~ [data-starplane-control-radio-dot]::after {
transform: scale(1);
}
/* ============================================================
SWITCH
============================================================ */
:where([data-starplane-control-switch]) {
display: inline-flex;
align-items: center;
gap: var(--star-space-2, var(--starplane-space-2, 8px));
cursor: pointer;
color: var(--star-text, var(--starplane-text-primary, #1c1914));
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-sm, 14px);
user-select: none;
}
:where([data-starplane-control-switch][data-disabled="true"]) {
opacity: 0.55;
cursor: not-allowed;
}
:where([data-starplane-control-switch-track]) {
flex: none;
position: relative;
width: 38px;
height: 22px;
padding: 0;
border: none;
border-radius: 999px;
cursor: inherit;
background: var(--star-border-strong, var(--starplane-border-strong, rgba(28, 25, 20, 0.28)));
transition: background var(--star-dur-base, var(--starplane-dur, 0.18s)) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-control-switch-track][data-on="true"]) {
background: var(--star-accent, var(--starplane-accent, #3b6ef0));
}
:where([data-starplane-control-switch-thumb]) {
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
border-radius: 999px;
background: var(--star-accent-on, var(--starplane-accent-on, #ffffff));
box-shadow: var(--star-shadow-1, var(--starplane-shadow-sm, 0 1px 2px rgba(28, 25, 20, 0.18)));
transition: transform var(--star-dur-base, var(--starplane-dur, 0.18s)) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-control-switch-track][data-on="true"]) [data-starplane-control-switch-thumb] {
transform: translateX(16px);
}
/* ============================================================
TABS
============================================================ */
:where([data-starplane-control-tablist]) {
display: inline-flex;
align-items: stretch;
gap: var(--star-space-1, var(--starplane-space-1, 4px));
border-bottom: 1px solid var(--star-border, var(--starplane-border-subtle, rgba(28, 25, 20, 0.10)));
}
:where([data-starplane-control-tab]) {
appearance: none;
border: none;
background: transparent;
padding: var(--star-space-2, var(--starplane-space-2, 8px)) var(--star-space-3, var(--starplane-space-3, 12px));
margin-bottom: -1px;
border-bottom: 2px solid transparent;
color: var(--star-text-muted, var(--starplane-text-muted, #6a6155));
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-sm, 14px);
font-weight: 600;
cursor: pointer;
transition:
color var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease)),
border-color var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-control-tab]:hover:not([data-disabled="true"])) {
color: var(--star-text, var(--starplane-text-primary, #1c1914));
}
:where([data-starplane-control-tab][data-selected="true"]) {
/* accentInk (=accentStrong) for the label — the bright accent failed AA as
* text on cream; the accent underline still carries the selection colour.
* The selected tab lifts onto the raised surface so accentInk clears AA on
* the cream face (it held only 4.19 on the sunken tab-row ground). */
color: var(--star-accent-strong, var(--starplane-accent-strong, #2f57c2));
background: var(--star-surface-raised, var(--starplane-bg-elevated, #fbf8f1));
border-bottom-color: var(--star-accent, var(--starplane-accent, #3b6ef0));
}
:where([data-starplane-control-tab][data-disabled="true"]) {
opacity: 0.5;
cursor: not-allowed;
}
:where([data-starplane-control-tabpanel]) {
padding: var(--star-space-3, var(--starplane-space-3, 12px)) 0;
outline: none;
}
/* ============================================================
BADGE
============================================================ */
:where([data-starplane-control-badge]) {
display: inline-flex;
align-items: center;
gap: var(--star-space-1, var(--starplane-space-1, 4px));
padding: 2px var(--star-space-2, var(--starplane-space-2, 8px));
border-radius: 999px;
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-xs, 11px);
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.4;
background: color-mix(in srgb, var(--star-text, var(--starplane-text-primary, #1c1914)) 6%, transparent);
color: var(--star-text, var(--starplane-text-secondary, #433d33));
}
:where([data-starplane-control-badge][data-tone="ok"]) {
/* Lighter wash mixed into the surface so the FROZEN okInk clears AA on the
* cream face (16%-over-transparent held only ~4.4). */
background: color-mix(in srgb, var(--star-ok, var(--starplane-ok, #2c6e4e)) 9%, var(--star-surface, var(--starplane-bg-surface, #fbf8f1)));
color: var(--star-ok-ink, var(--starplane-ok-ink, #1f6442));
}
:where([data-starplane-control-badge][data-tone="warn"]) {
background: color-mix(in srgb, var(--star-warn, var(--starplane-warn, #c0791a)) 9%, var(--star-surface, var(--starplane-bg-surface, #fbf8f1)));
color: var(--star-warn-ink, var(--starplane-warn-ink, #8a5a14));
}
:where([data-starplane-control-badge][data-tone="danger"]) {
background: color-mix(in srgb, var(--star-danger, var(--starplane-danger, #b3261e)) 16%, transparent);
/* Legible ink for the danger wash — saturated danger held only 4.12 on the
* dark ground; dangerInk (the token paired with the wash) clears AA. */
color: var(--star-danger-ink, var(--starplane-danger-ink, #8f231b));
}
/* ============================================================
AVATAR
============================================================ */
:where([data-starplane-control-avatar]) {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
overflow: hidden;
border-radius: 999px;
background: color-mix(in srgb, var(--star-text, var(--starplane-text-primary, #1c1914)) 6%, transparent);
color: var(--star-text, var(--starplane-text-secondary, #433d33));
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-weight: 600;
text-transform: uppercase;
user-select: none;
}
:where([data-starplane-control-avatar][data-size="sm"]) {
width: 24px;
height: 24px;
font-size: var(--star-text-xs, 10px);
}
:where([data-starplane-control-avatar][data-size="md"]) {
width: 32px;
height: 32px;
font-size: var(--star-text-xs, 13px);
}
:where([data-starplane-control-avatar][data-size="lg"]) {
width: 44px;
height: 44px;
font-size: var(--star-text-base, 16px);
}
:where([data-starplane-control-avatar-img]) {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ============================================================
CHIP
============================================================ */
:where([data-starplane-control-chip]) {
display: inline-flex;
align-items: center;
gap: var(--star-space-1, var(--starplane-space-1, 4px));
padding: 3px 3px 3px var(--star-space-2, var(--starplane-space-2, 8px));
border-radius: 999px;
border: 1px solid var(--star-border, var(--starplane-border-subtle, rgba(28, 25, 20, 0.10)));
background: var(--star-surface, var(--starplane-bg-surface, #f1efe9));
color: var(--star-text, var(--starplane-text-secondary, #433d33));
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-xs, 13px);
line-height: 1.3;
}
:where([data-starplane-control-chip]:not(:has([data-starplane-control-chip-remove]))) {
padding-right: var(--star-space-2, var(--starplane-space-2, 8px));
}
:where([data-starplane-control-chip-icon]) {
display: inline-flex;
align-items: center;
}
:where([data-starplane-control-chip-remove]) {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
padding: 0;
border: none;
border-radius: 999px;
background: transparent;
color: var(--star-text-muted, var(--starplane-text-tertiary, #9a9080));
cursor: pointer;
transition:
background var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease)),
color var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-control-chip-remove]:hover) {
background: color-mix(in srgb, var(--star-text, var(--starplane-text-primary, #1c1914)) 8%, transparent);
color: var(--star-text, var(--starplane-text-primary, #1c1914));
}
:where([data-starplane-control-chip-remove] svg) {
width: 11px;
height: 11px;
}
/* ============================================================
PROGRESS
============================================================ */
:where([data-starplane-control-progress]) {
position: relative;
width: 100%;
height: 6px;
border-radius: 999px;
overflow: hidden;
background: color-mix(in srgb, var(--star-text, var(--starplane-text-primary, #1c1914)) 10%, transparent);
}
:where([data-starplane-control-progress-bar]) {
height: 100%;
border-radius: inherit;
background: var(--star-accent, var(--starplane-accent, #3b6ef0));
transition: width var(--star-dur-base, var(--starplane-dur, 0.18s)) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-control-progress][data-indeterminate="true"] [data-starplane-control-progress-bar]) {
width: 40%;
animation: starplane-control-progress-slide 1.1s var(--star-ease, var(--starplane-ease-out, ease)) infinite;
}
@keyframes starplane-control-progress-slide {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(280%);
}
}
/* ============================================================
SKELETON
============================================================ */
:where([data-starplane-control-skeleton]) {
display: block;
width: 100%;
height: 1em;
border-radius: var(--star-radius-sm, var(--starplane-radius-sm, 6px));
background: linear-gradient(
90deg,
color-mix(in srgb, var(--star-text, var(--starplane-text-primary, #1c1914)) 5%, transparent) 25%,
color-mix(in srgb, var(--star-text, var(--starplane-text-primary, #1c1914)) 10%, transparent) 37%,
color-mix(in srgb, var(--star-text, var(--starplane-text-primary, #1c1914)) 5%, transparent) 63%
);
background-size: 400% 100%;
animation: starplane-control-shimmer 1.4s ease infinite;
}
@keyframes starplane-control-shimmer {
0% {
background-position: 100% 0;
}
100% {
background-position: 0 0;
}
}
/* ============================================================
EMPTY STATE
============================================================ */
:where([data-starplane-control-empty]) {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--star-space-2, var(--starplane-space-2, 8px));
padding: var(--star-space-5, var(--starplane-space-6, 24px));
text-align: center;
color: var(--star-text-muted, var(--starplane-text-muted, #6a6155));
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
}
:where([data-starplane-control-empty-icon]) {
display: inline-flex;
color: var(--star-text-muted, var(--starplane-text-tertiary, #9a9080));
font-size: var(--star-text-xl, 28px);
margin-bottom: var(--star-space-1, var(--starplane-space-1, 4px));
}
:where([data-starplane-control-empty-title]) {
color: var(--star-text, var(--starplane-text-primary, #1c1914));
font-size: var(--star-text-base, 15px);
font-weight: 600;
}
:where([data-starplane-control-empty-sub]) {
max-width: 38ch;
font-size: var(--star-text-xs, 13px);
line-height: 1.5;
}
:where([data-starplane-control-empty-action]) {
margin-top: var(--star-space-2, var(--starplane-space-2, 8px));
}
/* ============================================================
EXPANDED DEGREES OF FREEDOM — additive size / variant / tone /
shape / placement options. Every value is a `--star-*`→`--starplane-*`
→literal fallback chain or a color-mix over a token; defaults are
unchanged (an option only paints when its data-attr is present).
============================================================ */
/* ── Button: lg size, soft variant, shape, fullWidth ─────────────────────── */
:where([data-starplane-control-button][data-size="lg"]) {
height: 44px;
padding: 0 var(--star-space-5, var(--starplane-space-5, 20px));
font-size: var(--star-text-base, 15px);
}
:where([data-starplane-control-button][data-variant="soft"]) {
background: color-mix(in srgb, var(--star-accent, var(--starplane-accent, #3b6ef0)) 14%, transparent);
color: var(--star-accent-strong, var(--starplane-accent-strong, #2f57c2));
}
:where([data-starplane-control-button][data-variant="soft"]:hover:not(:disabled)) {
background: color-mix(in srgb, var(--star-accent, var(--starplane-accent, #3b6ef0)) 22%, transparent);
}
:where([data-starplane-control-button][data-shape="pill"]) {
border-radius: 999px;
}
:where([data-starplane-control-button][data-shape="square"]) {
border-radius: 0;
}
:where([data-starplane-control-button][data-fullwidth="true"]) {
display: flex;
width: 100%;
}
/* ── Input / Textarea: lg size, filled/flush variants, resize ────────────── */
:where([data-starplane-control-input][data-size="lg"]) {
padding: 0 var(--star-space-4, var(--starplane-space-4, 16px));
min-height: 44px;
}
:where([data-starplane-control-textarea][data-size="lg"]) {
font-size: var(--star-text-base, 15px);
}
:where([data-starplane-control-input][data-variant="filled"]),
:where([data-starplane-control-textarea][data-variant="filled"]) {
border-color: transparent;
background: color-mix(in srgb, var(--star-text, var(--starplane-text-primary, #1c1914)) 6%, transparent);
}
:where([data-starplane-control-input][data-variant="flush"]),
:where([data-starplane-control-textarea][data-variant="flush"]) {
border-width: 0 0 1px 0;
border-radius: 0;
background: transparent;
}
:where([data-starplane-control-textarea][data-resize="none"]) {
resize: none;
}
:where([data-starplane-control-textarea][data-resize="horizontal"]) {
resize: horizontal;
}
:where([data-starplane-control-textarea][data-resize="both"]) {
resize: both;
}
/* ── Checkbox / Radio: size, tone, label placement ───────────────────────── */
:where([data-starplane-control-checkbox][data-placement="start"]),
:where([data-starplane-control-radio][data-placement="start"]),
:where([data-starplane-control-switch][data-placement="start"]) {
flex-direction: row-reverse;
}
:where([data-starplane-control-checkbox][data-size="sm"] [data-starplane-control-checkbox-box]) {
width: 15px;
height: 15px;
}
:where([data-starplane-control-checkbox][data-size="lg"] [data-starplane-control-checkbox-box]) {
width: 22px;
height: 22px;
}
:where([data-starplane-control-radio][data-size="sm"] [data-starplane-control-radio-dot]) {
width: 15px;
height: 15px;
}
:where([data-starplane-control-radio][data-size="lg"] [data-starplane-control-radio-dot]) {
width: 22px;
height: 22px;
}
:where([data-starplane-control-checkbox][data-tone="ok"] [data-starplane-control-checkbox-input]:checked ~ [data-starplane-control-checkbox-box]),
:where([data-starplane-control-radio][data-tone="ok"] [data-starplane-control-radio-input]:checked ~ [data-starplane-control-radio-dot]) {
background: var(--star-ok, var(--starplane-ok, #2c6e4e));
border-color: var(--star-ok, var(--starplane-ok, #2c6e4e));
}
:where([data-starplane-control-radio][data-tone="ok"] [data-starplane-control-radio-input]:checked ~ [data-starplane-control-radio-dot])::after {
background: var(--star-accent-on, var(--starplane-accent-on, #ffffff));
}
:where([data-starplane-control-checkbox][data-tone="warn"] [data-starplane-control-checkbox-input]:checked ~ [data-starplane-control-checkbox-box]),
:where([data-starplane-control-radio][data-tone="warn"] [data-starplane-control-radio-input]:checked ~ [data-starplane-control-radio-dot]) {
background: var(--star-warn, var(--starplane-warn, #c0791a));
border-color: var(--star-warn, var(--starplane-warn, #c0791a));
}
:where([data-starplane-control-checkbox][data-tone="danger"] [data-starplane-control-checkbox-input]:checked ~ [data-starplane-control-checkbox-box]),
:where([data-starplane-control-radio][data-tone="danger"] [data-starplane-control-radio-input]:checked ~ [data-starplane-control-radio-dot]) {
background: var(--star-danger, var(--starplane-danger, #b3261e));
border-color: var(--star-danger, var(--starplane-danger, #b3261e));
}
/* ── Switch: size, tone ──────────────────────────────────────────────────── */
:where([data-starplane-control-switch][data-size="sm"] [data-starplane-control-switch-track]) {
width: 30px;
height: 18px;
}
:where([data-starplane-control-switch][data-size="sm"] [data-starplane-control-switch-thumb]) {
width: 14px;
height: 14px;
}
:where([data-starplane-control-switch][data-size="sm"] [data-starplane-control-switch-track][data-on="true"] [data-starplane-control-switch-thumb]) {
transform: translateX(12px);
}
:where([data-starplane-control-switch][data-size="lg"] [data-starplane-control-switch-track]) {
width: 46px;
height: 26px;
}
:where([data-starplane-control-switch][data-size="lg"] [data-starplane-control-switch-thumb]) {
width: 22px;
height: 22px;
}
:where([data-starplane-control-switch][data-size="lg"] [data-starplane-control-switch-track][data-on="true"] [data-starplane-control-switch-thumb]) {
transform: translateX(20px);
}
:where([data-starplane-control-switch][data-tone="ok"] [data-starplane-control-switch-track][data-on="true"]) {
background: var(--star-ok, var(--starplane-ok, #2c6e4e));
}
:where([data-starplane-control-switch][data-tone="warn"] [data-starplane-control-switch-track][data-on="true"]) {
background: var(--star-warn, var(--starplane-warn, #c0791a));
}
:where([data-starplane-control-switch][data-tone="danger"] [data-starplane-control-switch-track][data-on="true"]) {
background: var(--star-danger, var(--starplane-danger, #b3261e));
}
/* ── Tabs: variant (pills / enclosed), size, fullWidth ───────────────────── */
:where([data-starplane-control-tablist][data-size="sm"] [data-starplane-control-tab]) {
padding: var(--star-space-1, var(--starplane-space-1, 4px)) var(--star-space-2, var(--starplane-space-2, 8px));
font-size: var(--star-text-xs, 13px);
}
:where([data-starplane-control-tablist][data-size="lg"] [data-starplane-control-tab]) {
padding: var(--star-space-3, var(--starplane-space-3, 12px)) var(--star-space-4, var(--starplane-space-4, 16px));
font-size: var(--star-text-base, 15px);
}
:where([data-starplane-control-tablist][data-fullwidth="true"]) {
display: flex;
width: 100%;
}
:where([data-starplane-control-tablist][data-fullwidth="true"] [data-starplane-control-tab]) {
flex: 1;
justify-content: center;
}
:where([data-starplane-control-tablist][data-variant="pills"]) {
border-bottom: none;
gap: var(--star-space-1, var(--starplane-space-1, 4px));
}
:where([data-starplane-control-tablist][data-variant="pills"] [data-starplane-control-tab]) {
margin-bottom: 0;
border-bottom: none;
border-radius: 999px;
}
:where([data-starplane-control-tablist][data-variant="pills"] [data-starplane-control-tab][data-selected="true"]) {
background: color-mix(in srgb, var(--star-accent, var(--starplane-accent, #3b6ef0)) 14%, transparent);
color: var(--star-accent-strong, var(--starplane-accent-strong, #2f57c2));
}
:where([data-starplane-control-tablist][data-variant="enclosed"] [data-starplane-control-tab]) {
margin-bottom: -1px;
border: 1px solid transparent;
border-radius: var(--star-radius-control, var(--starplane-radius-sm, 8px)) var(--star-radius-control, var(--starplane-radius-sm, 8px)) 0 0;
}
:where([data-starplane-control-tablist][data-variant="enclosed"] [data-starplane-control-tab][data-selected="true"]) {
border-color: var(--star-border, var(--starplane-border, rgba(28, 25, 20, 0.16)));
border-bottom-color: var(--star-surface-raised, var(--starplane-bg-elevated, #fbf8f1));
background: var(--star-surface-raised, var(--starplane-bg-elevated, #fbf8f1));
}
/* ── Badge: variant (solid / outline), size, leading dot ─────────────────── */
:where([data-starplane-control-badge][data-size="sm"]) {
padding: 1px var(--star-space-1, var(--starplane-space-1, 6px));
font-size: 10px;
}
:where([data-starplane-control-badge][data-size="lg"]) {
padding: 3px var(--star-space-3, var(--starplane-space-3, 12px));
font-size: var(--star-text-sm, 13px);
}
:where([data-starplane-control-badge][data-variant="solid"]) {
background: var(--star-text, var(--starplane-text-primary, #1c1914));
color: var(--star-surface-raised, var(--starplane-bg-elevated, #fbfaf7));
}
:where([data-starplane-control-badge][data-variant="solid"][data-tone="ok"]) {
background: var(--star-ok, var(--starplane-ok, #2c6e4e));
color: var(--star-accent-on, var(--starplane-accent-on, #ffffff));
}
:where([data-starplane-control-badge][data-variant="solid"][data-tone="warn"]) {
background: var(--star-warn, var(--starplane-warn, #c0791a));
color: var(--star-accent-on, var(--starplane-accent-on, #ffffff));
}
:where([data-starplane-control-badge][data-variant="solid"][data-tone="danger"]) {
background: var(--star-danger, var(--starplane-danger, #b3261e));
color: var(--star-accent-on, var(--starplane-accent-on, #ffffff));
}
:where([data-starplane-control-badge][data-variant="outline"]) {
background: transparent;
border: 1px solid var(--star-border-strong, var(--starplane-border-strong, rgba(28, 25, 20, 0.28)));
}
:where([data-starplane-control-badge][data-variant="outline"][data-tone="ok"]) {
border-color: var(--star-ok, var(--starplane-ok, #2c6e4e));
color: var(--star-ok-ink, var(--starplane-ok-ink, #1f6442));
}
:where([data-starplane-control-badge][data-variant="outline"][data-tone="warn"]) {
border-color: var(--star-warn, var(--starplane-warn, #c0791a));
color: var(--star-warn-ink, var(--starplane-warn-ink, #8a5a14));
}
:where([data-starplane-control-badge][data-variant="outline"][data-tone="danger"]) {
border-color: var(--star-danger, var(--starplane-danger, #b3261e));
color: var(--star-danger-ink, var(--starplane-danger-ink, #8f231b));
}
:where([data-starplane-control-badge-dot]) {
width: 6px;
height: 6px;
border-radius: 999px;
background: currentColor;
flex: none;
}
/* ── Avatar: xs/xl size, square shape, status dot, ring ──────────────────── */
:where([data-starplane-control-avatar][data-size="xs"]) {
width: 20px;
height: 20px;
font-size: 9px;
}
:where([data-starplane-control-avatar][data-size="xl"]) {
width: 56px;
height: 56px;
font-size: var(--star-text-lg, 20px);
}
:where([data-starplane-control-avatar][data-shape="square"]) {
border-radius: var(--star-radius-control, var(--starplane-radius-sm, 8px));
}
:where([data-starplane-control-avatar][data-ring="true"]) {
box-shadow: 0 0 0 2px var(--star-surface, var(--starplane-bg-surface, #fbf8f1)),
0 0 0 4px var(--star-accent, var(--starplane-accent, #3b6ef0));
}
:where([data-starplane-control-avatar]) {
position: relative;
}
:where([data-starplane-control-avatar-status]) {
position: absolute;
right: 0;
bottom: 0;
width: 28%;
height: 28%;
min-width: 6px;
min-height: 6px;
border-radius: 999px;
box-shadow: 0 0 0 2px var(--star-surface, var(--starplane-bg-surface, #fbf8f1));
background: var(--star-text-muted, var(--starplane-text-tertiary, #9a9080));
}
:where([data-starplane-control-avatar-status][data-status="online"]) {
background: var(--star-ok, var(--starplane-ok, #2c6e4e));
}
:where([data-starplane-control-avatar-status][data-status="busy"]) {
background: var(--star-danger, var(--starplane-danger, #b3261e));
}
:where([data-starplane-control-avatar-status][data-status="away"]) {
background: var(--star-warn, var(--starplane-warn, #c0791a));
}
/* ── Chip: variant (solid / outline), size, selected ─────────────────────── */
:where([data-starplane-control-chip][data-size="sm"]) {
font-size: 11px;
padding: 2px 2px 2px var(--star-space-1, var(--starplane-space-1, 6px));
}
:where([data-starplane-control-chip][data-size="lg"]) {
font-size: var(--star-text-sm, 14px);
padding: 4px 4px 4px var(--star-space-3, var(--starplane-space-3, 12px));
}
:where([data-starplane-control-chip][data-variant="solid"]) {
background: var(--star-text, var(--starplane-text-primary, #1c1914));
border-color: transparent;
color: var(--star-surface-raised, var(--starplane-bg-elevated, #fbfaf7));
}
:where([data-starplane-control-chip][data-variant="outline"]) {
background: transparent;
border-color: var(--star-border-strong, var(--starplane-border-strong, rgba(28, 25, 20, 0.28)));
}
:where([data-starplane-control-chip][data-selected="true"]) {
background: color-mix(in srgb, var(--star-accent, var(--starplane-accent, #3b6ef0)) 16%, transparent);
border-color: var(--star-accent, var(--starplane-accent, #3b6ef0));
color: var(--star-accent-strong, var(--starplane-accent-strong, #2f57c2));
}
/* ── Progress: size, tone, value label ───────────────────────────────────── */
:where([data-starplane-control-progress][data-size="sm"]) {
height: 4px;
}
:where([data-starplane-control-progress][data-size="lg"]) {
height: 10px;
}
:where([data-starplane-control-progress][data-tone="ok"] [data-starplane-control-progress-bar]) {
background: var(--star-ok, var(--starplane-ok, #2c6e4e));
}
:where([data-starplane-control-progress][data-tone="warn"] [data-starplane-control-progress-bar]) {
background: var(--star-warn, var(--starplane-warn, #c0791a));
}
:where([data-starplane-control-progress][data-tone="danger"] [data-starplane-control-progress-bar]) {
background: var(--star-danger, var(--starplane-danger, #b3261e));
}
:where([data-starplane-control-progress-row]) {
display: flex;
align-items: center;
gap: var(--star-space-2, var(--starplane-space-2, 8px));
width: 100%;
}
:where([data-starplane-control-progress-value]) {
flex: none;
min-width: 3ch;
text-align: right;
color: var(--star-text-muted, var(--starplane-text-muted, #6a6155));
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-xs, 12px);
font-variant-numeric: tabular-nums;
}
/* ── Skeleton: variant (circle / rect), animation, multi-line ────────────── */
:where([data-starplane-control-skeleton][data-variant="circle"]) {
border-radius: 999px;
aspect-ratio: 1 / 1;
}
:where([data-starplane-control-skeleton][data-variant="rect"]) {
border-radius: var(--star-radius-sm, var(--starplane-radius-sm, 6px));
}
:where([data-starplane-control-skeleton][data-animation="pulse"]) {
background: color-mix(in srgb, var(--star-text, var(--starplane-text-primary, #1c1914)) 8%, transparent);
animation: starplane-control-pulse 1.4s ease-in-out infinite;
}
:where([data-starplane-control-skeleton][data-animation="none"]) {
background: color-mix(in srgb, var(--star-text, var(--starplane-text-primary, #1c1914)) 8%, transparent);
animation: none;
}
@keyframes starplane-control-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.45;
}
}
:where([data-starplane-control-skeleton-lines]) {
display: flex;
flex-direction: column;
gap: var(--star-space-2, var(--starplane-space-2, 8px));
width: 100%;
}
/* ── EmptyState: size, align, action row ─────────────────────────────────── */
:where([data-starplane-control-empty][data-size="sm"]) {
padding: var(--star-space-4, var(--starplane-space-4, 16px));
gap: var(--star-space-1, var(--starplane-space-1, 4px));
}
:where([data-starplane-control-empty][data-size="lg"]) {
padding: var(--star-space-6, var(--starplane-space-7, 40px));
gap: var(--star-space-3, var(--starplane-space-3, 12px));
}
:where([data-starplane-control-empty][data-align="start"]) {
align-items: flex-start;
text-align: left;
}
:where([data-starplane-control-empty-action]) {
display: flex;
flex-wrap: wrap;
gap: var(--star-space-2, var(--starplane-space-2, 8px));
}
/* ============================================================
FOCUS — visible keyboard ring on every interactive control
(mouse users never see it; keyboard users always do).
Ring color is the dedicated --star-focus-ring, not the raw accent.
============================================================ */
:where(
[data-starplane-control-button],
[data-starplane-control-tab],
[data-starplane-control-switch-track],
[data-starplane-control-chip-remove]
):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--starplane-accent, #3b6ef0));
outline-offset: 2px;
}
/* ============================================================
REDUCED MOTION — freeze every decorative animation/transition
============================================================ */
@media (prefers-reduced-motion: reduce) {
:where(
[data-starplane-control-button],
[data-starplane-control-spinner],
[data-starplane-control-input],
[data-starplane-control-textarea],
[data-starplane-control-checkbox-box],
[data-starplane-control-checkbox-tick],
[data-starplane-control-radio-dot],
[data-starplane-control-radio-dot]::after,
[data-starplane-control-switch-track],
[data-starplane-control-switch-thumb],
[data-starplane-control-tab],
[data-starplane-control-progress-bar],
[data-starplane-control-skeleton],
[data-starplane-control-chip-remove]
) {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
/* a pressed button must not visibly travel under reduced motion */
:where([data-starplane-control-button]:active:not(:disabled)) {
transform: none;
}
}
/* ===== overlays/styles.css ===== */
/* @starplane/overlays — host-neutral overlay primitives.
*
* TOKENS: every value reads canonical `--star-*`, then legacy `--starplane-*`,
* then an inline literal — the only raw hex/rgba here is the last link of such a
* chain. SPECIFICITY: every selector is :where(...) → zero, so a product class
* always wins. MOTION: GPU-safe (transform + opacity) on token easing; frozen
* under prefers-reduced-motion. Floating surfaces enter FROM where they belong
* (a small lift, never a flat fade) and read elevation from --star-shadow-3.
*/
/* ============================================================
POPOVER — the positioned floating panel primitive
============================================================ */
:where([data-starplane-overlay-popover]) {
position: fixed;
top: 0;
left: 0;
z-index: var(--starplane-overlay-z, 2147483000);
box-sizing: border-box;
min-width: 180px;
max-width: min(92vw, 360px);
padding: var(--star-space-1, var(--starplane-space-2, 6px));
border: 1px solid var(--star-border, var(--starplane-border, rgba(27, 23, 20, 0.14)));
border-radius: var(--star-radius-window, var(--starplane-radius, 10px));
background: var(--star-surface-raised, var(--starplane-bg-elevated, #ffffff));
color: var(--star-text, var(--starplane-text-primary, #1b1714));
box-shadow: var(--star-shadow-3, var(--starplane-shadow-lg, 0 16px 40px -12px rgba(27, 23, 20, 0.30), 0 4px 10px -6px rgba(27, 23, 20, 0.20)));
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-xs, 13px);
animation: starplane-overlay-in var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease)) both;
}
@keyframes starplane-overlay-in {
from {
opacity: 0;
transform: translateY(-4px) scale(0.985);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* ============================================================
MENU — role=menu list of menuitems
============================================================ */
:where([data-starplane-overlay-menu]) {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
:where([data-starplane-overlay-menu-trigger]) {
display: inline-flex;
align-items: center;
gap: var(--star-space-2, var(--starplane-space-2, 6px));
border: 1px solid var(--star-border, var(--starplane-border, rgba(27, 23, 20, 0.14)));
border-radius: var(--star-radius-control, var(--starplane-radius-sm, 7px));
background: var(--star-surface-raised, var(--starplane-bg-elevated, #ffffff));
color: var(--star-text, var(--starplane-text-primary, #1b1714));
padding: 7px var(--star-space-3, var(--starplane-space-3, 10px));
cursor: pointer;
font: inherit;
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-xs, 13px);
transition:
background var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease)),
border-color var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-overlay-menu-trigger]:hover) {
border-color: var(--star-border-strong, var(--starplane-border-strong, rgba(27, 23, 20, 0.24)));
}
:where([data-starplane-overlay-menu-item]) {
display: flex;
align-items: center;
gap: var(--star-space-3, var(--starplane-space-3, 10px));
width: 100%;
text-align: left;
border: none;
background: transparent;
border-radius: var(--star-radius-sm, var(--starplane-radius-sm, 7px));
padding: 7px var(--star-space-3, var(--starplane-space-3, 10px));
cursor: pointer;
font: inherit;
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-xs, 13px);
color: var(--star-text, var(--starplane-text-primary, #1b1714));
transition: background var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-overlay-menu-item]:hover),
:where([data-starplane-overlay-menu-item]:focus-visible) {
background: color-mix(in srgb, var(--star-text, var(--starplane-text-primary, #1b1714)) 6%, transparent);
}
:where([data-starplane-overlay-menu-item][disabled]) {
color: var(--star-text-muted, var(--starplane-text-muted, #9c938a));
cursor: not-allowed;
}
:where([data-starplane-overlay-menu-item][data-danger="true"]) {
color: var(--star-danger, var(--starplane-accent, #e8442c));
}
:where([data-starplane-overlay-menu-item][data-danger="true"]:hover),
:where([data-starplane-overlay-menu-item][data-danger="true"]:focus-visible) {
background: color-mix(in srgb, var(--star-danger, var(--starplane-accent, #e8442c)) 12%, transparent);
}
:where([data-starplane-overlay-menu-icon]) {
flex: none;
display: inline-grid;
place-items: center;
width: 18px;
color: var(--star-text-muted, var(--starplane-text-secondary, #6a625a));
}
:where([data-starplane-overlay-menu-label]) {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ============================================================
SELECT — trigger + role=listbox of options
============================================================ */
:where([data-starplane-overlay-select-trigger]) {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: var(--star-space-2, var(--starplane-space-2, 6px));
min-width: 160px;
border: 1px solid var(--star-border, var(--starplane-border, rgba(27, 23, 20, 0.14)));
border-radius: var(--star-radius-control, var(--starplane-radius-sm, 7px));
background: var(--star-surface-raised, var(--starplane-bg-elevated, #ffffff));
color: var(--star-text, var(--starplane-text-primary, #1b1714));
padding: 7px var(--star-space-3, var(--starplane-space-3, 10px));
cursor: pointer;
font: inherit;
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-xs, 13px);
transition:
border-color var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease)),
box-shadow var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-overlay-select-trigger]:hover:not([disabled])) {
border-color: var(--star-border-strong, var(--starplane-border-strong, rgba(27, 23, 20, 0.24)));
}
:where([data-starplane-overlay-select-trigger][disabled]) {
color: var(--star-text-muted, var(--starplane-text-muted, #9c938a));
cursor: not-allowed;
opacity: 0.7;
}
:where([data-starplane-overlay-select-trigger][data-placeholder="true"] [data-starplane-overlay-select-value]) {
color: var(--star-text-muted, var(--starplane-text-muted, #9c938a));
}
:where([data-starplane-overlay-select-value]) {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
:where([data-starplane-overlay-select-arrow]) {
flex: none;
color: var(--star-text-muted, var(--starplane-text-secondary, #6a625a));
font-size: var(--star-text-xs, 11px);
}
:where([data-starplane-overlay-listbox]) {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
:where([data-starplane-overlay-option]) {
display: flex;
align-items: center;
gap: var(--star-space-3, var(--starplane-space-3, 10px));
border-radius: var(--star-radius-sm, var(--starplane-radius-sm, 7px));
padding: 7px var(--star-space-3, var(--starplane-space-3, 10px));
cursor: pointer;
color: var(--star-text, var(--starplane-text-primary, #1b1714));
transition: background var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-overlay-option]:hover),
:where([data-starplane-overlay-option]:focus-visible) {
background: color-mix(in srgb, var(--star-text, var(--starplane-text-primary, #1b1714)) 6%, transparent);
}
:where([data-starplane-overlay-option][aria-disabled="true"]) {
color: var(--star-text-muted, var(--starplane-text-muted, #9c938a));
cursor: not-allowed;
}
:where([data-starplane-overlay-option][data-selected="true"]) {
background: color-mix(in srgb, var(--star-accent, var(--starplane-accent, #e8442c)) 12%, transparent);
color: var(--star-accent, var(--starplane-accent, #e8442c));
}
:where([data-starplane-overlay-option-label]) {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
:where([data-starplane-overlay-option-check]) {
flex: none;
opacity: 0;
color: var(--star-accent, var(--starplane-accent, #e8442c));
}
:where([data-starplane-overlay-option][data-selected="true"] [data-starplane-overlay-option-check]) {
opacity: 1;
}
/* ============================================================
SHEET — scrim + edge-anchored panel
============================================================ */
:where([data-starplane-overlay-sheet-root]) {
position: fixed;
inset: 0;
z-index: var(--starplane-overlay-z, 2147483000);
display: flex;
}
:where([data-starplane-overlay-sheet-root][data-side="bottom"]) {
align-items: flex-end;
}
:where([data-starplane-overlay-sheet-root][data-side="top"]) {
align-items: flex-start;
}
:where([data-starplane-overlay-sheet-root][data-side="left"]) {
justify-content: flex-start;
}
:where([data-starplane-overlay-sheet-root][data-side="right"]) {
justify-content: flex-end;
}
:where([data-starplane-overlay-sheet-scrim]) {
position: absolute;
inset: 0;
background: var(--star-overlay, var(--starplane-scrim, rgba(27, 23, 20, 0.42)));
animation: starplane-overlay-fade var(--star-dur-base, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease)) both;
}
:where([data-starplane-overlay-sheet]) {
position: relative;
box-sizing: border-box;
display: flex;
flex-direction: column;
overflow: auto;
padding: var(--star-space-4, var(--starplane-space-4, 16px));
background: var(--star-surface-raised, var(--starplane-bg-elevated, #ffffff));
color: var(--star-text, var(--starplane-text-primary, #1b1714));
border: 1px solid var(--star-border, var(--starplane-border-subtle, rgba(27, 23, 20, 0.08)));
box-shadow: var(--star-shadow-3, var(--starplane-shadow-panel, 0 -8px 40px -12px rgba(27, 23, 20, 0.40)));
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
animation: starplane-overlay-sheet-in var(--star-dur-base, var(--starplane-dur, 0.18s)) var(--star-ease, var(--starplane-ease-out, ease)) both;
}
:where([data-starplane-overlay-sheet][data-side="bottom"]),
:where([data-starplane-overlay-sheet][data-side="top"]) {
width: 100%;
max-height: 86vh;
}
:where([data-starplane-overlay-sheet][data-side="bottom"]) {
border-radius: var(--star-radius-window, var(--starplane-radius, 10px)) var(--star-radius-window, var(--starplane-radius, 10px)) 0 0;
}
:where([data-starplane-overlay-sheet][data-side="top"]) {
border-radius: 0 0 var(--star-radius-window, var(--starplane-radius, 10px)) var(--star-radius-window, var(--starplane-radius, 10px));
}
:where([data-starplane-overlay-sheet][data-side="left"]),
:where([data-starplane-overlay-sheet][data-side="right"]) {
height: 100%;
width: min(420px, 92vw);
}
:where([data-starplane-overlay-sheet][data-side="left"]) {
border-radius: 0 var(--star-radius-window, var(--starplane-radius, 10px)) var(--star-radius-window, var(--starplane-radius, 10px)) 0;
}
:where([data-starplane-overlay-sheet][data-side="right"]) {
border-radius: var(--star-radius-window, var(--starplane-radius, 10px)) 0 0 var(--star-radius-window, var(--starplane-radius, 10px));
}
@keyframes starplane-overlay-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* the panel slides from the edge it is anchored to — direction = origin */
:where([data-starplane-overlay-sheet][data-side="bottom"]) {
animation-name: starplane-overlay-sheet-up;
}
:where([data-starplane-overlay-sheet][data-side="top"]) {
animation-name: starplane-overlay-sheet-down;
}
:where([data-starplane-overlay-sheet][data-side="left"]) {
animation-name: starplane-overlay-sheet-right;
}
:where([data-starplane-overlay-sheet][data-side="right"]) {
animation-name: starplane-overlay-sheet-left;
}
@keyframes starplane-overlay-sheet-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes starplane-overlay-sheet-up {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes starplane-overlay-sheet-down {
from { opacity: 0; transform: translateY(-16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes starplane-overlay-sheet-right {
from { opacity: 0; transform: translateX(-16px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes starplane-overlay-sheet-left {
from { opacity: 0; transform: translateX(16px); }
to { opacity: 1; transform: translateX(0); }
}
/* ============================================================
FOCUS — visible keyboard ring on every interactive surface
============================================================ */
:where([data-starplane-overlay-menu-trigger]):focus-visible,
:where([data-starplane-overlay-select-trigger]):focus-visible,
:where([data-starplane-overlay-menu-item]):focus-visible,
:where([data-starplane-overlay-option]):focus-visible,
:where([data-starplane-overlay-sheet]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--starplane-accent, #e8442c));
outline-offset: 2px;
}
/* ============================================================
DEGREES OF FREEDOM — additive size / arrow / inset / state / scrim
opts. Every rule is :where(...) (zero specificity) and keyed on a
data-attr that is ABSENT by default, so the base look is unchanged
unless a prop opts in.
============================================================ */
/* Popover density */
:where([data-starplane-overlay-popover][data-size="sm"]) {
min-width: 140px;
padding: var(--star-space-1, 4px);
font-size: var(--star-text-2xs, 12px);
}
:where([data-starplane-overlay-popover][data-size="lg"]) {
min-width: 240px;
max-width: min(94vw, 440px);
padding: var(--star-space-2, 8px);
font-size: var(--star-text-sm, 14px);
}
/* Popover arrow tab — a rotated square borrowed from the panel's own
border + surface, placed at the edge nearest the anchor. */
:where([data-starplane-overlay-popover][data-arrow="true"])::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: var(--star-surface-raised, var(--starplane-bg-elevated, #ffffff));
border: 1px solid var(--star-border, var(--starplane-border, rgba(27, 23, 20, 0.14)));
transform: rotate(45deg);
pointer-events: none;
}
:where([data-starplane-overlay-popover][data-arrow="true"][data-placement^="bottom"])::after {
top: -5px;
left: 16px;
border-right: none;
border-bottom: none;
}
:where([data-starplane-overlay-popover][data-arrow="true"][data-placement^="top"])::after {
bottom: -5px;
left: 16px;
border-left: none;
border-top: none;
}
/* Menu density */
:where([data-starplane-overlay-menu][data-size="sm"] [data-starplane-overlay-menu-item]) {
padding: 4px var(--star-space-2, 8px);
font-size: var(--star-text-2xs, 12px);
}
:where([data-starplane-overlay-menu][data-size="lg"] [data-starplane-overlay-menu-item]) {
padding: 10px var(--star-space-4, 14px);
font-size: var(--star-text-sm, 14px);
}
/* Menu inset — reserve a leading icon gutter so labels align across
items with and without icons. */
:where([data-starplane-overlay-menu][data-inset="true"] [data-starplane-overlay-menu-item]) {
padding-left: calc(18px + var(--star-space-3, 10px) + var(--star-space-3, 10px));
}
:where([data-starplane-overlay-menu][data-inset="true"] [data-starplane-overlay-menu-item] [data-starplane-overlay-menu-icon]) {
margin-left: calc(-1 * (18px + var(--star-space-3, 10px)));
}
/* Select density */
:where([data-starplane-overlay-select-trigger][data-size="sm"]) {
min-width: 120px;
padding: 4px var(--star-space-2, 8px);
font-size: var(--star-text-2xs, 12px);
}
:where([data-starplane-overlay-select-trigger][data-size="lg"]) {
min-width: 200px;
padding: 10px var(--star-space-4, 14px);
font-size: var(--star-text-sm, 14px);
}
:where([data-starplane-overlay-listbox][data-size="sm"] [data-starplane-overlay-option]) {
padding: 4px var(--star-space-2, 8px);
}
:where([data-starplane-overlay-listbox][data-size="lg"] [data-starplane-overlay-option]) {
padding: 10px var(--star-space-4, 14px);
font-size: var(--star-text-sm, 14px);
}
/* Select invalid — an error ring driven from the danger token. */
:where([data-starplane-overlay-select-trigger][data-invalid="true"]) {
border-color: var(--star-danger, var(--starplane-accent, #e8442c));
}
:where([data-starplane-overlay-select-trigger][data-invalid="true"]:focus-visible) {
outline-color: var(--star-danger, var(--starplane-accent, #e8442c));
}
/* Select clear affordance. */
:where([data-starplane-overlay-select-clear]) {
flex: none;
display: inline-grid;
place-items: center;
width: 16px;
height: 16px;
border-radius: 50%;
cursor: pointer;
color: var(--star-text-muted, var(--starplane-text-secondary, #6a625a));
font-size: var(--star-text-xs, 13px);
line-height: 1;
transition: background var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-overlay-select-clear]:hover) {
background: color-mix(in srgb, var(--star-text, var(--starplane-text-primary, #1b1714)) 10%, transparent);
color: var(--star-text, var(--starplane-text-primary, #1b1714));
}
/* Sheet extent along the slide axis. */
:where([data-starplane-overlay-sheet][data-side="left"][data-size="sm"]),
:where([data-starplane-overlay-sheet][data-side="right"][data-size="sm"]) {
width: min(300px, 92vw);
}
:where([data-starplane-overlay-sheet][data-side="left"][data-size="lg"]),
:where([data-starplane-overlay-sheet][data-side="right"][data-size="lg"]) {
width: min(560px, 96vw);
}
:where([data-starplane-overlay-sheet][data-side="left"][data-size="full"]),
:where([data-starplane-overlay-sheet][data-side="right"][data-size="full"]) {
width: 100vw;
}
:where([data-starplane-overlay-sheet][data-side="top"][data-size="sm"]),
:where([data-starplane-overlay-sheet][data-side="bottom"][data-size="sm"]) {
max-height: 40vh;
}
:where([data-starplane-overlay-sheet][data-side="top"][data-size="lg"]),
:where([data-starplane-overlay-sheet][data-side="bottom"][data-size="lg"]) {
max-height: 94vh;
}
:where([data-starplane-overlay-sheet][data-side="top"][data-size="full"]),
:where([data-starplane-overlay-sheet][data-side="bottom"][data-size="full"]) {
height: 100vh;
max-height: 100vh;
}
/* Sheet scrim toggle — keep the click-catch element, drop the dimming. */
:where([data-starplane-overlay-sheet-root][data-scrim="off"] [data-starplane-overlay-sheet-scrim]) {
background: transparent;
}
/* ============================================================
REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
:where([data-starplane-overlay-popover]),
:where([data-starplane-overlay-sheet]),
:where([data-starplane-overlay-sheet-scrim]),
:where([data-starplane-overlay-menu-trigger]),
:where([data-starplane-overlay-select-trigger]),
:where([data-starplane-overlay-menu-item]),
:where([data-starplane-overlay-option]) {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* ===== dataview/styles.css ===== */
/* @starplane/data-view — structural styles.
*
* TOKENS: every value reads canonical `--star-*`, then legacy `--starplane-*`,
* then an inline literal — the only raw hex/rgba here is the last link of such a
* chain. SPECIFICITY: every selector is :where(...) → zero, so a product class
* always wins. Primitives: DataTable · VirtualList · Tree.
*/
/* ============================================================
DATATABLE
============================================================ */
:where([data-starplane-dv-table-scroll]) {
box-sizing: border-box;
max-height: 100%;
overflow: auto;
border-radius: var(--star-radius-window, var(--starplane-radius, 10px));
background: var(--star-surface, var(--starplane-bg-surface, #ffffff));
color: var(--star-text, var(--starplane-text-primary, #1b1714));
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
}
:where([data-starplane-dv-table-scroll]) *,
:where([data-starplane-dv-table-scroll]) *::before,
:where([data-starplane-dv-table-scroll]) *::after {
box-sizing: border-box;
}
:where([data-starplane-dv-table]) {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: var(--star-text-sm, 14px);
}
:where([data-starplane-dv-thead] [data-starplane-dv-th]) {
position: sticky;
top: 0;
z-index: 1;
text-align: start;
font-weight: 600;
white-space: nowrap;
padding: var(--star-space-2, var(--starplane-space-2, 8px)) var(--star-space-3, var(--starplane-space-3, 12px));
color: var(--star-text-muted, var(--starplane-text-secondary, #5b5650));
background: var(--star-surface-raised, var(--starplane-bg-elevated, #f6f4ef));
border-bottom: 1px solid var(--star-border, var(--starplane-border, #d9d3c7));
}
:where([data-starplane-dv-th][data-align="center"]),
:where([data-starplane-dv-cell][data-align="center"]) {
text-align: center;
}
:where([data-starplane-dv-th][data-align="end"]),
:where([data-starplane-dv-cell][data-align="end"]) {
text-align: end;
}
:where([data-starplane-dv-th][data-select]),
:where([data-starplane-dv-cell][data-select]) {
width: 1%;
white-space: nowrap;
text-align: center;
}
:where([data-starplane-dv-sortbtn]) {
display: inline-flex;
align-items: center;
gap: var(--star-space-2, var(--starplane-space-2, 8px));
width: 100%;
margin: 0;
padding: 0;
border: none;
background: transparent;
color: inherit;
font: inherit;
font-weight: 600;
cursor: pointer;
text-align: inherit;
}
:where([data-starplane-dv-sort]) {
font-size: var(--star-text-xs, 10px);
line-height: 1;
color: var(--star-text-muted, var(--starplane-text-muted, #908a80));
}
:where([data-starplane-dv-sort][data-dir="ascending"]),
:where([data-starplane-dv-sort][data-dir="descending"]) {
color: var(--star-accent, var(--starplane-accent, #e8442c));
}
:where([data-starplane-dv-cell]) {
padding: var(--star-space-2, var(--starplane-space-2, 8px)) var(--star-space-3, var(--starplane-space-3, 12px));
text-align: start;
border-bottom: 1px solid var(--star-border, var(--starplane-border-subtle, #ece7dc));
color: var(--star-text, var(--starplane-text-primary, #1b1714));
}
:where([data-starplane-dv-row][data-clickable="true"]) {
cursor: pointer;
}
:where([data-starplane-dv-tbody] [data-starplane-dv-row]) {
transition: background var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-dv-tbody] [data-starplane-dv-row]:hover) {
background: color-mix(in srgb, var(--star-text, var(--starplane-text-primary, #1b1714)) 4%, transparent);
}
:where([data-starplane-dv-row][data-selected="true"]) {
background: color-mix(in srgb, var(--star-accent, var(--starplane-accent, #e8442c)) 10%, transparent);
}
:where([data-starplane-dv-empty]),
:where([data-starplane-dv-loading]) {
padding: var(--star-space-4, var(--starplane-space-4, 20px));
text-align: center;
color: var(--star-text-muted, var(--starplane-text-muted, #908a80));
}
/* ── DENSITY: compact tightens the cell/header vertical padding ── */
:where([data-starplane-dv-table-scroll][data-density="compact"] [data-starplane-dv-cell]),
:where([data-starplane-dv-table-scroll][data-density="compact"] [data-starplane-dv-thead] [data-starplane-dv-th]) {
padding-top: var(--star-space-1, var(--starplane-space-1, 4px));
padding-bottom: var(--star-space-1, var(--starplane-space-1, 4px));
}
/* ── STRIPED: alternate body rows carry a subtle zebra fill ── */
:where([data-starplane-dv-table-scroll][data-striped="true"] [data-starplane-dv-tbody] [data-starplane-dv-row]:nth-child(even)) {
background: color-mix(in srgb, var(--star-text, var(--starplane-text-primary, #1b1714)) 3%, transparent);
}
/* ── STICKY HEADER opt-out: let the header scroll away ── */
:where([data-starplane-dv-table-scroll][data-sticky-header="false"] [data-starplane-dv-thead] [data-starplane-dv-th]) {
position: static;
}
/* ── SIZE: text scale for the whole grid ── */
:where([data-starplane-dv-table-scroll][data-size="sm"] [data-starplane-dv-table]) {
font-size: var(--star-text-xs, 12px);
}
:where([data-starplane-dv-table-scroll][data-size="lg"] [data-starplane-dv-table]) {
font-size: var(--star-text-md, 16px);
}
/* ============================================================
VIRTUALLIST
============================================================ */
:where([data-starplane-dv-vlist]) {
box-sizing: border-box;
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
color: var(--star-text, var(--starplane-text-primary, #1b1714));
}
:where([data-starplane-dv-vlist]) * {
box-sizing: border-box;
}
:where([data-starplane-dv-vlist-scroll]) {
overflow: auto;
border-radius: var(--star-radius-window, var(--starplane-radius, 10px));
background: var(--star-surface, var(--starplane-bg-surface, #ffffff));
}
:where([data-starplane-dv-vlist-sizer]) {
position: relative;
width: 100%;
}
:where([data-starplane-dv-vlist-item]) {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
padding: 0 var(--star-space-3, var(--starplane-space-3, 12px));
border-bottom: 1px solid var(--star-border, var(--starplane-border-subtle, #ece7dc));
}
/* ============================================================
TREE
============================================================ */
:where([data-starplane-dv-tree]),
:where([data-starplane-dv-tree-group]) {
list-style: none;
margin: 0;
padding: 0;
}
:where([data-starplane-dv-tree]) {
box-sizing: border-box;
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-sm, 14px);
color: var(--star-text, var(--starplane-text-primary, #1b1714));
background: var(--star-surface, var(--starplane-bg-surface, #ffffff));
border-radius: var(--star-radius-window, var(--starplane-radius, 10px));
padding: var(--star-space-2, var(--starplane-space-2, 8px));
}
:where([data-starplane-dv-tree]) * {
box-sizing: border-box;
}
:where([data-starplane-dv-tree-row]) {
display: flex;
align-items: center;
gap: var(--star-space-2, var(--starplane-space-2, 8px));
padding: var(--star-space-2, var(--starplane-space-2, 8px)) var(--star-space-2, var(--starplane-space-2, 8px));
border-radius: var(--star-radius-control, var(--starplane-radius, 8px));
cursor: pointer;
transition: background var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-dv-tree-row]:hover) {
background: color-mix(in srgb, var(--star-text, var(--starplane-text-primary, #1b1714)) 4%, transparent);
}
:where([data-starplane-dv-tree-item][data-selected="true"] > [data-starplane-dv-tree-row]) {
background: color-mix(in srgb, var(--star-accent, var(--starplane-accent, #e8442c)) 10%, transparent);
color: var(--star-accent, var(--starplane-accent, #e8442c));
}
:where([data-starplane-dv-tree-twisty]) {
flex: none;
display: inline-grid;
place-items: center;
width: 18px;
height: 18px;
margin: 0;
padding: 0;
border: none;
border-radius: var(--star-radius-sm, 4px);
background: transparent;
color: var(--star-text-muted, var(--starplane-text-muted, #908a80));
cursor: pointer;
font-size: var(--star-text-xs, 11px);
line-height: 1;
transition: transform var(--star-dur-fast, var(--starplane-dur, 0.14s)) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-dv-tree-twisty][data-open="true"]) {
transform: rotate(90deg);
}
:where([data-starplane-dv-tree-twisty][data-leaf]) {
visibility: hidden;
cursor: default;
}
/* ── GUIDES: vertical indent-guide lines on nested groups ── */
:where([data-starplane-dv-tree][data-guides="true"] [data-starplane-dv-tree-group]) {
border-inline-start: 1px solid var(--star-border, var(--starplane-border-subtle, #ece7dc));
margin-inline-start: var(--star-space-3, var(--starplane-space-3, 12px));
}
/* ── DENSITY: compact tightens the row padding ── */
:where([data-starplane-dv-tree][data-density="compact"] [data-starplane-dv-tree-row]) {
padding-top: var(--star-space-1, var(--starplane-space-1, 4px));
padding-bottom: var(--star-space-1, var(--starplane-space-1, 4px));
}
:where([data-starplane-dv-tree-icon]) {
flex: none;
display: inline-flex;
align-items: center;
color: var(--star-text-muted, var(--starplane-text-secondary, #5b5650));
}
:where([data-starplane-dv-tree-label]) {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ============================================================
FOCUS — visible keyboard ring on every interactive element
============================================================ */
:where([data-starplane-dv-table-scroll], [data-starplane-dv-vlist], [data-starplane-dv-tree])
:where(button, input, [tabindex]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--starplane-accent, #e8442c));
outline-offset: -2px;
border-radius: var(--star-radius-sm, 6px);
}
:where([data-starplane-dv-tree-item]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--starplane-accent, #e8442c));
outline-offset: -2px;
border-radius: var(--star-radius-control, var(--starplane-radius, 8px));
}
/* ============================================================
REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
:where([data-starplane-dv-table-scroll], [data-starplane-dv-vlist], [data-starplane-dv-tree]) *,
:where([data-starplane-dv-table-scroll], [data-starplane-dv-vlist], [data-starplane-dv-tree]) *::before,
:where([data-starplane-dv-table-scroll], [data-starplane-dv-vlist], [data-starplane-dv-tree]) *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
/* ===== forms/styles.css ===== */
/* @starplane/forms — structural styles for the styled field wrappers.
*
* TOKENS: every value reads canonical `--star-*`, then legacy `--starplane-*`,
* then an inline literal — the only raw hex/rgba here is the last link of such a
* chain. SPECIFICITY: every selector is :where(...) → zero, so a product class
* always wins. These wrappers are bring-your-own-control: the rules reach into
* the native input/textarea/select you pass as children so a bare control
* inherits the field's frame, focus ring, and invalid state.
*/
/* ============================================================
FIELD — label + hint + control + error, stacked
============================================================ */
:where([data-starplane-field]) {
display: flex;
flex-direction: column;
gap: var(--star-space-1, var(--starplane-space-1, 4px));
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
color: var(--star-text, var(--starplane-text-primary, #1b1714));
}
:where([data-starplane-field-label]) {
display: inline-flex;
align-items: center;
gap: var(--star-space-1, var(--starplane-space-1, 4px));
font-size: var(--star-text-xs, 13px);
font-weight: 600;
color: var(--star-text, var(--starplane-text-secondary, #433c34));
}
:where([data-starplane-field-required]) {
color: var(--star-danger, var(--starplane-danger, #c0392b));
font-weight: 600;
line-height: 1;
}
:where([data-starplane-field-hint]) {
font-size: var(--star-text-xs, 12px);
color: var(--star-text-muted, var(--starplane-text-muted, #6a625a));
}
:where([data-starplane-field-control]) {
display: flex;
flex-direction: column;
}
/* style a bring-your-own native control so a bare field looks complete */
:where([data-starplane-field-control]) :where(input, textarea, select) {
width: 100%;
font: inherit;
color: var(--star-text, var(--starplane-text-primary, #1b1714));
background: var(--star-surface-raised, var(--starplane-bg-elevated, transparent));
border: 1px solid var(--star-border, var(--starplane-border, #cfc7b5));
border-radius: var(--star-radius-control, var(--starplane-radius-sm, 6px));
padding: var(--star-space-2, var(--starplane-space-2, 8px)) var(--star-space-3, var(--starplane-space-3, 12px));
outline: none;
transition:
border-color var(--star-dur-fast, 0.14s) var(--star-ease, ease),
box-shadow var(--star-dur-fast, 0.14s) var(--star-ease, ease);
}
:where([data-starplane-field-control]) :where(input::placeholder, textarea::placeholder) {
color: var(--star-text-muted, var(--starplane-text-muted, #6a625a));
}
:where([data-starplane-field-control]) :where(input:focus, textarea:focus, select:focus) {
border-color: var(--star-accent, var(--starplane-accent, #e8442c));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--star-focus-ring, var(--starplane-accent, #e8442c)) 30%, transparent);
}
:where([data-starplane-field-control]) :where(input:disabled, textarea:disabled, select:disabled) {
border-color: var(--star-border, var(--starplane-border-subtle, rgba(106, 98, 90, 0.22)));
opacity: 0.6;
cursor: not-allowed;
}
/* invalid state — driven by Field's data-invalid="true" */
:where([data-starplane-field][data-invalid="true"]) :where(input, textarea, select) {
border-color: var(--star-danger, var(--starplane-danger, #c0392b));
}
:where([data-starplane-field][data-invalid="true"]) :where(input:focus, textarea:focus, select:focus) {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--star-danger, var(--starplane-danger, #c0392b)) 26%, transparent);
}
:where([data-starplane-field-error]) {
font-size: var(--star-text-xs, 12px);
color: var(--star-danger, var(--starplane-danger, #c0392b));
}
/* ============================================================
FORM ROW — fields laid out side-by-side
============================================================ */
:where([data-starplane-field-row]) {
display: flex;
gap: var(--star-space-3, var(--starplane-space-3, 12px));
align-items: flex-start;
}
:where([data-starplane-field-row]) > :where([data-starplane-field]) {
flex: 1 1 0;
min-width: 0;
}
/* ============================================================
EXPANDED DEGREES OF FREEDOM — additive size / orientation / tone /
marker / gap options. Token chains only; defaults unchanged.
============================================================ */
/* ── Field: horizontal orientation + size scale ──────────────────────────── */
:where([data-starplane-field][data-orientation="horizontal"]) {
flex-direction: row;
align-items: baseline;
gap: var(--star-space-3, var(--starplane-space-3, 12px));
}
:where([data-starplane-field][data-orientation="horizontal"]) > :where([data-starplane-field-label]) {
flex: 0 0 auto;
min-width: 8rem;
padding-top: var(--star-space-2, var(--starplane-space-2, 8px));
}
:where([data-starplane-field][data-orientation="horizontal"]) > :where([data-starplane-field-control]) {
flex: 1 1 auto;
min-width: 0;
}
:where([data-starplane-field][data-size="sm"]) :where([data-starplane-field-control]) :where(input, textarea, select) {
padding: var(--star-space-1, var(--starplane-space-1, 4px)) var(--star-space-2, var(--starplane-space-2, 8px));
font-size: var(--star-text-xs, 13px);
}
:where([data-starplane-field][data-size="lg"]) :where([data-starplane-field-control]) :where(input, textarea, select) {
padding: var(--star-space-3, var(--starplane-space-3, 12px)) var(--star-space-4, var(--starplane-space-4, 16px));
font-size: var(--star-text-base, 15px);
}
/* ── FieldLabel: size, optional marker, visually-hidden ──────────────────── */
:where([data-starplane-field-label][data-size="sm"]) {
font-size: 11px;
}
:where([data-starplane-field-label][data-size="lg"]) {
font-size: var(--star-text-sm, 14px);
}
:where([data-starplane-field-optional]) {
color: var(--star-text-muted, var(--starplane-text-muted, #6a625a));
font-weight: 400;
font-size: 0.9em;
}
:where([data-starplane-field-label][data-visually-hidden="true"]) {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
/* ── FieldError: tone, size, leading icon ────────────────────────────────── */
:where([data-starplane-field-error][data-tone="warn"]) {
color: var(--star-warn-ink, var(--starplane-warn-ink, #8a5a14));
}
:where([data-starplane-field-error][data-size="sm"]) {
font-size: 11px;
}
:where([data-starplane-field-error]) {
display: flex;
align-items: center;
gap: var(--star-space-1, var(--starplane-space-1, 4px));
}
:where([data-starplane-field-error-icon]) {
display: inline-flex;
align-items: center;
flex: none;
}
/* ── FormRow: stacked orientation, alignment, gap ────────────────────────── */
:where([data-starplane-field-row][data-orientation="stacked"]) {
flex-direction: column;
align-items: stretch;
}
:where([data-starplane-field-row][data-align="center"]) {
align-items: center;
}
:where([data-starplane-field-row][data-align="end"]) {
align-items: flex-end;
}
:where([data-starplane-field-row][data-align="stretch"]) {
align-items: stretch;
}
:where([data-starplane-field-row][data-gap="sm"]) {
gap: var(--star-space-2, var(--starplane-space-2, 8px));
}
:where([data-starplane-field-row][data-gap="lg"]) {
gap: var(--star-space-4, var(--starplane-space-4, 16px));
}
/* ============================================================
REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
:where([data-starplane-field-control]) :where(input, textarea, select) {
transition-duration: 0.01ms;
}
}
/* ===== primitives/controls/controls.css ===== */
/* controls.css — STATES for the controls primitives.
*
* WHY THIS FILE EXISTS (see STARKIT-AUTHORING.md §states): the public starstyle
* API (`layout.*`, `recipes.recipe`, `ss`) is a FLAT token-decl surface — it can
* express a property→token mapping but exposes NO condition nesting, so :hover /
* :focus-visible / :disabled (and the range track/thumb pseudo-elements) cannot
* be emitted through it. So states use the SAME co-located CSS-var fallback the
* extracted overlays/controls/forms use: every selector is :where([data-starkit-*])
* (ZERO specificity, caller class always wins).
*
* ZERO RAW HEX: every colour reads its `--starplane-*` alias and falls back to a
* canonical `--star-*` contract token (accent / text / border / surface), and
* focus rings resolve through the dedicated `--star-focus-ring` token — so the
* whole control set reskins under all 7 themes by token swap alone. Tinted fills
* derive from a token via `color-mix`. Only durations/lengths remain literal.
*
* This file is a co-located ASSET — it is NOT imported from any `.tsx` (there is
* no ambient `.css` module declaration in this package's tsconfig). The host
* includes it, exactly like overlays/styles.css.
*/
/* ── IconButton / ToggleButton — interactive button shells ───────────────── */
:where([data-starkit-icon-button], [data-starkit-toggle-button]) {
cursor: pointer;
border: 1px solid transparent;
font: inherit;
font-family: var(--starplane-font, var(--star-font-ui, system-ui, sans-serif));
line-height: 1;
transition:
transform var(--starplane-dur, var(--star-dur-fast, 0.12s))
var(--starplane-ease-out, var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1))),
filter var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease)),
background var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-icon-button][data-variant="secondary"]),
:where([data-starkit-icon-button][data-variant="ghost"]),
:where([data-starkit-toggle-button][data-pressed="false"]) {
border-color: var(--starplane-border-subtle, var(--star-border));
}
:where([data-starkit-icon-button]:hover:not([aria-disabled="true"])),
:where([data-starkit-toggle-button]:hover:not([aria-disabled="true"])) {
filter: brightness(1.06);
}
:where([data-starkit-icon-button]:active:not([aria-disabled="true"])),
:where([data-starkit-toggle-button]:active:not([aria-disabled="true"])) {
transform: translateY(1px);
filter: brightness(0.96);
}
:where([data-starkit-icon-button]):focus-visible,
:where([data-starkit-toggle-button]):focus-visible {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
outline-offset: 2px;
}
:where([data-starkit-icon-button][aria-disabled="true"]),
:where([data-starkit-toggle-button][aria-disabled="true"]) {
cursor: not-allowed;
opacity: 0.55;
pointer-events: none;
}
/* Optional corner treatments (opt-in via `shape`; absent = inherited radius). */
:where([data-starkit-icon-button][data-shape="rounded"]) {
border-radius: var(--starplane-radius-base, var(--star-radius-control, 0.375rem));
}
:where([data-starkit-icon-button][data-shape="circle"]) {
border-radius: var(--starplane-radius-full, 999px);
}
:where([data-starkit-icon-button][data-shape="square"]) {
border-radius: 0;
}
:where([data-starkit-toggle-button][data-shape="rounded"]) {
border-radius: var(--starplane-radius-base, var(--star-radius-control, 0.375rem));
}
:where([data-starkit-toggle-button][data-shape="pill"]) {
border-radius: var(--starplane-radius-full, 999px);
}
/* Full-width stretch. */
:where([data-starkit-icon-button][data-fullwidth="true"]),
:where([data-starkit-toggle-button][data-fullwidth="true"]) {
width: 100%;
}
/* Loading: non-interactive while busy; a token-coloured spinner replaces content. */
:where([data-starkit-icon-button][data-loading="true"]),
:where([data-starkit-toggle-button][data-loading="true"]) {
cursor: progress;
pointer-events: none;
}
:where([data-starkit-icon-button-spinner], [data-starkit-toggle-button-spinner]) {
display: inline-block;
inline-size: 1em;
block-size: 1em;
border-radius: var(--starplane-radius-full, 999px);
border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
border-top-color: currentColor;
animation: starkit-control-spin 0.6s linear infinite;
}
@keyframes starkit-control-spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-icon-button-spinner], [data-starkit-toggle-button-spinner]) {
animation-duration: 1.2s;
}
}
/* ── Chip ─────────────────────────────────────────────────────────────────── */
:where([data-starkit-chip]) {
border: 1px solid var(--starplane-border-subtle, var(--star-border));
font: inherit;
line-height: 1;
}
:where([data-starkit-chip][data-selectable="true"]) {
cursor: pointer;
transition: filter var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-chip][data-selectable="true"]:hover:not([aria-disabled="true"])) {
filter: brightness(1.06);
}
:where([data-starkit-chip][data-selectable="true"]):focus-visible {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
outline-offset: 2px;
}
:where([data-starkit-chip][aria-disabled="true"]) {
cursor: not-allowed;
opacity: 0.55;
pointer-events: none;
}
:where([data-starkit-chip-dismiss]) {
cursor: pointer;
background: transparent;
border: 0;
color: inherit;
font: inherit;
line-height: 1;
padding: 0;
}
:where([data-starkit-chip-dismiss]:hover) {
filter: brightness(1.2);
}
:where([data-starkit-chip-dismiss]):focus-visible {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
outline-offset: 1px;
}
/* ── SegmentedControl ─────────────────────────────────────────────────────── */
:where([data-starkit-segmented]) {
display: inline-flex;
gap: var(--starplane-space-1, var(--star-space-1, 0.25rem));
}
:where([data-starkit-segment]) {
cursor: pointer;
border: 1px solid transparent;
border-radius: var(--starplane-radius-base, var(--star-radius-control, 0.375rem));
font: inherit;
line-height: 1;
transition:
transform var(--starplane-dur, var(--star-dur-fast, 0.12s))
var(--starplane-ease-out, var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1))),
filter var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease)),
background var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-segment]:hover:not([aria-disabled="true"])) {
filter: brightness(1.06);
}
:where([data-starkit-segment]:active:not([aria-disabled="true"])) {
transform: translateY(1px);
}
/* NOTE: the SELECTED segment's accent fill comes from `segmentRecipe({ selected })`
* applied inline by SegmentedControl.tsx (color.accent / color.accentOn tokens) —
* the idiomatic token path. No CSS override here, by design. */
:where([data-starkit-segment]):focus-visible {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
outline-offset: 2px;
}
:where([data-starkit-segment][aria-disabled="true"]) {
cursor: not-allowed;
opacity: 0.55;
}
/* ── Textarea ─────────────────────────────────────────────────────────────── */
:where([data-starkit-textarea]) {
border: 1px solid var(--starplane-border, var(--star-border));
font: inherit;
font-family: var(--starplane-font, var(--star-font-ui, system-ui, sans-serif));
min-height: 4lh;
resize: vertical;
transition: border-color var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-textarea]):focus-visible {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
outline-offset: 1px;
border-color: var(--starplane-accent, var(--star-accent));
}
:where([data-starkit-textarea][data-invalid="true"]) {
border-color: var(--starplane-danger, var(--star-danger));
}
:where([data-starkit-textarea][data-invalid="true"]):focus-visible {
outline-color: var(--starplane-danger, var(--star-danger));
}
:where([data-starkit-textarea][aria-disabled="true"]) {
cursor: not-allowed;
opacity: 0.55;
}
/* ── SearchInput ──────────────────────────────────────────────────────────── */
:where([data-starkit-search]) {
border: 1px solid var(--starplane-border, var(--star-border));
transition: border-color var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-search]:hover:not([data-disabled="true"])) {
border-color: color-mix(in srgb, var(--star-accent) 40%, var(--star-border));
}
:where([data-starkit-search]:active:not([data-disabled="true"])) {
border-color: var(--starplane-accent, var(--star-accent));
}
:where([data-starkit-search]):focus-within {
border-color: var(--starplane-accent, var(--star-accent));
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
outline-offset: 1px;
}
:where([data-starkit-search][data-disabled="true"]) {
cursor: not-allowed;
opacity: 0.55;
}
:where([data-starkit-search-icon]) {
/* Muted (not tertiary) so the affordance clears AA on the dark ground. */
color: var(--starplane-text-muted, var(--star-text-muted));
flex: 0 0 auto;
}
:where([data-starkit-search-input]) {
flex: 1 1 auto;
min-width: 0;
background: transparent;
border: 0;
outline: 0;
color: inherit;
font: inherit;
}
:where([data-starkit-search-input])::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
}
:where([data-starkit-search-clear]) {
cursor: pointer;
flex: 0 0 auto;
background: transparent;
border: 0;
color: var(--starplane-text-tertiary, var(--star-text-muted));
font: inherit;
line-height: 1;
padding: 0;
}
:where([data-starkit-search-clear]:hover) {
color: var(--starplane-text-primary, var(--star-text));
}
:where([data-starkit-search-clear]):focus-visible {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
outline-offset: 1px;
}
/* ── Stepper ──────────────────────────────────────────────────────────────── */
:where([data-starkit-stepper-input]) {
width: 3ch;
text-align: center;
background: var(--starplane-surface-base, var(--star-surface));
border: 1px solid var(--starplane-border, var(--star-border));
border-radius: var(--starplane-radius-base, var(--star-radius-control, 0.375rem));
color: var(--starplane-text-primary, var(--star-text));
font: inherit;
-moz-appearance: textfield;
appearance: textfield;
transition: border-color var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-stepper-input])::-webkit-outer-spin-button,
:where([data-starkit-stepper-input])::-webkit-inner-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
:where([data-starkit-stepper-input]:hover:not(:disabled)) {
border-color: color-mix(in srgb, var(--star-accent) 40%, var(--star-border));
}
:where([data-starkit-stepper-input]:active:not(:disabled)) {
border-color: var(--starplane-accent, var(--star-accent));
}
:where([data-starkit-stepper-input]):focus-visible {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
outline-offset: 1px;
}
:where([data-starkit-stepper-input]:disabled) {
cursor: not-allowed;
opacity: 0.55;
}
/* ── Slider ───────────────────────────────────────────────────────────────── */
:where([data-starkit-slider]) {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: var(--starplane-space-2, var(--star-space-2, 0.5rem));
background: color-mix(in srgb, var(--star-text) 12%, transparent);
border-radius: var(--starplane-radius-full, 999px);
cursor: pointer;
}
:where([data-starkit-slider][data-disabled="true"]) {
cursor: not-allowed;
opacity: 0.55;
}
/* Thumb: an accent puck on a token ring, lifting on grab — a real grab affordance. */
:where([data-starkit-slider])::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 1rem;
height: 1rem;
border-radius: var(--starplane-radius-full, 999px);
background: var(--starplane-accent, var(--star-accent));
box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--star-accent) 18%, transparent);
cursor: grab;
transition: box-shadow var(--starplane-dur, var(--star-dur-fast, 0.12s))
var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-slider]:active)::-webkit-slider-thumb {
cursor: grabbing;
box-shadow: 0 0 0 0.4rem color-mix(in srgb, var(--star-accent) 26%, transparent);
}
:where([data-starkit-slider])::-moz-range-thumb {
width: 1rem;
height: 1rem;
border: 0;
border-radius: var(--starplane-radius-full, 999px);
background: var(--starplane-accent, var(--star-accent));
box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--star-accent) 18%, transparent);
cursor: grab;
}
:where([data-starkit-slider]:active)::-moz-range-thumb {
cursor: grabbing;
box-shadow: 0 0 0 0.4rem color-mix(in srgb, var(--star-accent) 26%, transparent);
}
:where([data-starkit-slider]:hover:not([data-disabled="true"]))::-webkit-slider-thumb {
box-shadow: 0 0 0 0.33rem color-mix(in srgb, var(--star-accent) 22%, transparent);
}
:where([data-starkit-slider]:hover:not([data-disabled="true"]))::-moz-range-thumb {
box-shadow: 0 0 0 0.33rem color-mix(in srgb, var(--star-accent) 22%, transparent);
}
:where([data-starkit-slider]):focus-visible {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
:where(
[data-starkit-icon-button],
[data-starkit-toggle-button],
[data-starkit-chip],
[data-starkit-segment],
[data-starkit-textarea],
[data-starkit-search],
[data-starkit-stepper-input]
) {
transition-duration: 0.01ms;
}
:where([data-starkit-slider])::-webkit-slider-thumb {
transition-duration: 0.01ms;
}
:where(
[data-starkit-icon-button]:active,
[data-starkit-toggle-button]:active,
[data-starkit-segment]:active
) {
transform: none;
}
}
/* ── SegmentedControl — Pixelflame thumb pattern (GENE 5) ─────────────────
* The selection is the sliding WHITE thumb on the sunken track; segments
* stay transparent and only flip ink. Thumb motion rides the SNAP curve
* (the one overshoot in the system — spec v1.1); segments wear the
* engraved-legend treatment. */
:where([data-starkit-segmented]) {
position: relative;
display: inline-flex;
align-items: stretch;
}
:where([data-starkit-segmented-thumb]) {
position: absolute;
top: 4px;
bottom: 4px;
left: 0;
width: 0;
border-radius: 999px;
background: var(--starplane-surface, var(--star-surface));
box-shadow: 0 1px 3px color-mix(in srgb, var(--star-text) 12%, transparent);
/* Motion floor: transform/opacity only — width updates are DISCRETE (set
imperatively, untransitioned) so the thumb never forces layout mid-spring;
the translateX travel carries the motion. */
transition: transform 240ms var(--star-ease-snap, cubic-bezier(0.34, 1.4, 0.4, 1));
will-change: transform;
}
:where([data-starkit-segment]) {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
white-space: nowrap;
gap: 7px;
border: 0;
background: transparent;
cursor: pointer;
border-radius: 999px;
font-family: var(--star-legend-font, ui-monospace, monospace);
font-size: var(--star-text-xs, 11px);
font-weight: var(--star-legend-weight, 500);
letter-spacing: var(--star-legend-tracking, 0.08em);
text-transform: uppercase;
transition: color var(--star-dur-fast, 120ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
:where([data-starkit-segment]:focus-visible) {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring));
outline-offset: -2px;
}
:where([data-starkit-segment-dot]) {
width: 7px;
height: 7px;
border-radius: 999px;
flex: none;
background: var(--starplane-border, var(--star-border));
}
:where([data-starkit-segment-dot="ok"]) {
background: var(--starplane-ok, var(--star-ok));
}
:where([data-starkit-segment-dot="danger"]) {
background: var(--starplane-danger, var(--star-danger));
}
:where([data-starkit-segment-count]) {
font-variant-numeric: tabular-nums;
background: var(--starplane-surface-sunken, var(--star-surface-sunken));
border-radius: 7px;
padding: 1px 6px;
color: var(--starplane-text-muted, var(--star-text-muted));
}
/* ── RadioCard — plan-selector cards (GENE 5) ────────────────────────────
* Hairline rest → 2px accent ring selected (box-shadow, no layout shift);
* the radio circle fills accent with an inset check; the detail region
* expands 0fr→1fr + fade on the settle curve. */
:where([data-starkit-radiocard]) {
background: var(--starplane-surface, var(--star-surface));
border-radius: var(--star-radius-control, 12px);
box-shadow: inset 0 0 0 1px var(--starplane-border, var(--star-border));
padding: 16px;
cursor: pointer;
transition: box-shadow var(--star-dur-fast, 120ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
:where([data-starkit-radiocard][data-selected="true"]) {
box-shadow: inset 0 0 0 2px var(--starplane-accent, var(--star-accent));
}
:where([data-starkit-radiocard]:focus-visible) {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring));
outline-offset: 2px;
}
:where([data-starkit-radiocard-row]) {
display: flex;
align-items: flex-start;
gap: 12px;
}
:where([data-starkit-radiocard-main]) { flex: 1; min-width: 0; }
:where([data-starkit-radiocard-titlerow]) {
display: flex;
align-items: center;
gap: 8px;
}
:where([data-starkit-radiocard-title]) {
font-family: var(--star-font-ui, system-ui, sans-serif);
font-size: var(--star-text-lg, 17px);
font-weight: var(--star-weight-semibold, 600);
color: var(--starplane-text, var(--star-text));
}
:where([data-starkit-radiocard-description]) {
display: block;
margin-top: 2px;
font-size: var(--star-text-sm, 13px);
color: var(--starplane-text-muted, var(--star-text-muted));
}
:where([data-starkit-radiocard-trailing]) { text-align: right; }
:where([data-starkit-radiocard-radio]) {
flex: none;
width: 20px;
height: 20px;
margin-top: 2px;
border-radius: 999px;
box-shadow: inset 0 0 0 1.5px var(--starplane-border, var(--star-border));
background: transparent;
transition:
background-color var(--star-dur-fast, 120ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)),
box-shadow var(--star-dur-fast, 120ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
:where([data-starkit-radiocard][data-selected="true"]) :where([data-starkit-radiocard-radio]) {
background: var(--starplane-accent, var(--star-accent));
box-shadow: none;
}
:where([data-starkit-radiocard][data-selected="true"]) :where([data-starkit-radiocard-radio])::after {
content: "";
display: block;
width: 6px;
height: 10px;
margin: 3px auto 0;
border: solid var(--starplane-accent-on, var(--star-accent-on));
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* Expand: grid-rows trick — no measurement, settle curve, fade with it. */
:where([data-starkit-radiocard-detail]) {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition:
grid-template-rows 300ms var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)),
opacity 300ms var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
:where([data-starkit-radiocard][data-selected="true"]) :where([data-starkit-radiocard-detail]) {
grid-template-rows: 1fr;
opacity: 1;
}
:where([data-starkit-radiocard-detailinner]) { overflow: hidden; min-height: 0; }
:where([data-starkit-featurechecklist]) {
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed var(--starplane-border, var(--star-border));
}
:where([data-starkit-featurechecklist-heading]) {
display: block;
margin-bottom: 8px;
font-family: var(--star-legend-font, ui-monospace, monospace);
font-size: var(--star-text-xs, 11px);
font-weight: var(--star-legend-weight, 500);
letter-spacing: var(--star-legend-tracking, 0.08em);
text-transform: uppercase;
color: var(--starplane-text-muted, var(--star-text-muted));
}
:where([data-starkit-featurechecklist-list]) {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
:where([data-starkit-featurechecklist-item]) {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--star-text-sm, 13px);
color: var(--starplane-text, var(--star-text));
}
:where([data-starkit-featurechecklist-check]) {
/* okInk (legible tone ink), not the bright ok fill which failed AA on cream. */
color: var(--starplane-ok-ink, var(--star-ok-ink));
font-weight: var(--star-weight-bold, 700);
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-segmented-thumb]),
:where([data-starkit-segment]),
:where([data-starkit-radiocard]),
:where([data-starkit-radiocard-radio]),
:where([data-starkit-radiocard-detail]) {
transition: none;
}
}
/* ── SwitchLamp — the glow toggle (GENE 5) ───────────────────────────────
* Off: neutral sunken track. On: --star-ok track; the outer glow lives on a
* dedicated pseudo-layer whose OPACITY fades (GPU-safe — never tween the
* box-shadow itself). Thumb slides on the snap curve, same personality as
* the Segmented thumb. Zero raw palette values (state-matrix fence). */
:where([data-starkit-switchlamp]) {
position: relative;
display: inline-flex;
align-items: center;
width: 44px;
height: 24px;
padding: 0;
border: 0;
border-radius: 999px;
background: var(--starplane-border, var(--star-border));
cursor: pointer;
transition: background-color 240ms var(--star-ease, ease);
}
:where([data-starkit-switchlamp][data-checked="true"]) {
background: var(--starplane-ok, var(--star-ok));
}
:where([data-starkit-switchlamp][disabled]) {
opacity: 0.5;
cursor: not-allowed;
}
:where([data-starkit-switchlamp]:focus-visible) {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring));
outline-offset: 2px;
}
:where([data-starkit-switchlamp-glow]) {
position: absolute;
inset: -3px;
border-radius: 999px;
box-shadow: 0 0 12px 2px color-mix(in srgb, var(--star-ok) 45%, transparent);
opacity: 0;
transition: opacity 240ms var(--star-ease, ease);
pointer-events: none;
}
:where([data-starkit-switchlamp][data-checked="true"]) :where([data-starkit-switchlamp-glow]) {
opacity: 1;
}
:where([data-starkit-switchlamp-thumb]) {
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 999px;
background: var(--starplane-surface, var(--star-surface));
box-shadow: 0 1px 2px color-mix(in srgb, var(--star-text) 18%, transparent);
transition: transform 240ms var(--star-ease-snap, var(--star-ease, ease));
will-change: transform;
}
:where([data-starkit-switchlamp][data-checked="true"]) :where([data-starkit-switchlamp-thumb]) {
transform: translateX(20px);
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-switchlamp]),
:where([data-starkit-switchlamp-glow]),
:where([data-starkit-switchlamp-thumb]) {
transition: none;
}
}
/* ------------------------------------------------------------------ */
/* PaginationPills — the reference footer pager (GENE 4). */
/* One tinted accent pill on the current page; chevrons mute at the */
/* bounds. Full state matrix below; zero raw color anywhere. */
/* ------------------------------------------------------------------ */
:where([data-starkit-pagination]) {
display: inline-flex;
align-items: center;
gap: 4px;
}
:where([data-starkit-page]),
:where([data-starkit-page-nav]) {
appearance: none;
border: none;
margin: 0;
display: inline-grid;
place-items: center;
min-width: 36px;
height: 36px;
padding: 0 6px;
border-radius: var(--starplane-radius-base, var(--star-radius-control, 0.375rem));
background: transparent;
color: color-mix(in srgb, var(--starplane-text, var(--star-text)) 78%, transparent);
font: inherit;
font-variant-numeric: tabular-nums;
cursor: pointer;
transition:
background-color 160ms var(--starplane-ease-out, var(--star-ease, ease)),
color 160ms var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-page]:hover),
:where([data-starkit-page-nav]:hover) {
background: color-mix(in srgb, var(--starplane-text, var(--star-text)) 6%, transparent);
}
:where([data-starkit-page]:active),
:where([data-starkit-page-nav]:active) {
transform: translateY(1px);
}
:where([data-starkit-page]:focus-visible),
:where([data-starkit-page-nav]:focus-visible) {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
outline-offset: 2px;
}
:where([data-starkit-page]:disabled),
:where([data-starkit-page-nav]:disabled) {
opacity: 0.38;
cursor: default;
background: transparent;
}
:where([data-starkit-page][data-current="true"]) {
/* Lighter tint (6%) so accentInk clears AA on the cream face (8% held 4.43). */
background: color-mix(in srgb, var(--starplane-accent, var(--star-accent)) 6%, var(--star-surface));
color: var(--starplane-accent-strong, var(--star-accent-strong));
}
:where([data-starkit-page-ellipsis]) {
min-width: 24px;
text-align: center;
/* 62% (was 45%) so the overflow marker clears AA on the dark ground. */
color: color-mix(in srgb, var(--starplane-text, var(--star-text)) 62%, transparent);
user-select: none;
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-page]),
:where([data-starkit-page-nav]) {
transition: none;
}
}
/* ── ButtonGroup — seam treatment for a joined button bar ─────────────────── */
:where([data-starkit-button-group]) {
display: inline-flex;
align-items: stretch;
}
:where([data-starkit-button-group][data-orientation="vertical"]) {
flex-direction: column;
align-items: stretch;
}
/* Horizontal: collapse inner radii + share the vertical seam so the cluster
* reads as one control. Direct children only, so nested groups are untouched.
* The seam is suppressed when detached (`data-attached="false"`) so each member
* keeps its own radius and a token gap separates them instead. */
:where([data-starkit-button-group][data-orientation="horizontal"]:not([data-attached="false"])) > :not(:first-child) {
border-start-start-radius: 0;
border-end-start-radius: 0;
margin-inline-start: -1px;
}
:where([data-starkit-button-group][data-orientation="horizontal"]:not([data-attached="false"])) > :not(:last-child) {
border-start-end-radius: 0;
border-end-end-radius: 0;
}
:where([data-starkit-button-group][data-orientation="vertical"]:not([data-attached="false"])) > :not(:first-child) {
border-start-start-radius: 0;
border-start-end-radius: 0;
margin-block-start: -1px;
}
:where([data-starkit-button-group][data-orientation="vertical"]:not([data-attached="false"])) > :not(:last-child) {
border-end-start-radius: 0;
border-end-end-radius: 0;
}
/* Detached: a token gap between members, scaled by data-size. */
:where([data-starkit-button-group][data-attached="false"]) {
gap: var(--starplane-space-2, var(--star-space-2, 0.5rem));
}
:where([data-starkit-button-group][data-attached="false"][data-size="sm"]) {
gap: var(--starplane-space-1, var(--star-space-1, 0.25rem));
}
:where([data-starkit-button-group][data-attached="false"][data-size="lg"]) {
gap: var(--starplane-space-3, var(--star-space-3, 0.75rem));
}
/* Full-width: fill the container and share the axis equally between members. */
:where([data-starkit-button-group][data-fullwidth="true"]) {
display: flex;
width: 100%;
}
:where([data-starkit-button-group][data-fullwidth="true"]) > * {
flex: 1 1 0;
}
/* the focused/hovered button lifts above its neighbours so its full border shows */
:where([data-starkit-button-group]) > :focus-visible,
:where([data-starkit-button-group]) > :hover {
position: relative;
z-index: 1;
}
:where([data-starkit-button-group-text]) {
display: inline-flex;
align-items: center;
gap: var(--starplane-space-2, var(--star-space-2, 0.5rem));
padding-inline: var(--starplane-space-3, var(--star-space-3, 0.75rem));
font-family: var(--starplane-font, var(--star-font-ui, system-ui, sans-serif));
font-size: 0.875rem;
color: var(--starplane-text-secondary, var(--star-text-muted));
background: var(--starplane-surface-raised, var(--star-surface-raised, transparent));
border: 1px solid var(--starplane-border, var(--star-border));
user-select: none;
}
:where([data-starkit-button-group-separator]) {
flex: 0 0 auto;
align-self: stretch;
background: var(--starplane-border, var(--star-border));
}
:where([data-starkit-button-group-separator][data-orientation="vertical"]) {
inline-size: 1px;
}
:where([data-starkit-button-group-separator][data-orientation="horizontal"]) {
block-size: 1px;
inline-size: auto;
}
/* ============================================================================
* Degrees-of-freedom expansions (additive; every default reproduces the prior
* render). Data-attr driven, zero-specificity :where(), token var() chains only.
* ==========================================================================*/
/* ── ToggleGroup — orientation / fullWidth / shape ────────────────────────── */
:where([data-starkit-toggle-group][data-fullwidth="true"]) {
display: flex;
width: 100%;
}
:where([data-starkit-toggle-group][data-fullwidth="true"]) > :where([data-starkit-toggle-group-item]) {
flex: 1 1 0;
}
:where([data-starkit-toggle-group][data-shape="rounded"]) > :where([data-starkit-toggle-group-item]) {
border-radius: var(--starplane-radius-base, var(--star-radius-control, 0.375rem));
}
:where([data-starkit-toggle-group][data-shape="pill"]) > :where([data-starkit-toggle-group-item]) {
border-radius: var(--starplane-radius-full, 999px);
}
:where([data-starkit-toggle-group][data-shape="square"]) > :where([data-starkit-toggle-group-item]) {
border-radius: 0;
}
/* ── SegmentedControl — fullWidth / square shape ──────────────────────────── */
:where([data-starkit-segmented][data-fullwidth="true"]) {
display: flex;
width: 100%;
}
:where([data-starkit-segmented][data-fullwidth="true"]) > :where([data-starkit-segment]) {
flex: 1 1 0;
justify-content: center;
}
:where([data-starkit-segmented][data-shape="square"]) > :where([data-starkit-segment]),
:where([data-starkit-segmented][data-shape="square"]) > :where([data-starkit-segmented-thumb]) {
border-radius: var(--starplane-radius-base, var(--star-radius-control, 0.375rem));
}
/* ── SearchInput — invalid ring ───────────────────────────────────────────── */
:where([data-starkit-search][data-invalid="true"]) {
border-color: var(--starplane-danger, var(--star-danger));
}
:where([data-starkit-search][data-invalid="true"]):focus-within {
border-color: var(--starplane-danger, var(--star-danger));
outline-color: var(--starplane-danger, var(--star-danger));
}
/* ── Slider — size / tone / inline ────────────────────────────────────────── */
:where([data-starkit-slider][data-inline="true"]) {
width: auto;
}
:where([data-starkit-slider][data-size="sm"]) {
height: var(--starplane-space-1, var(--star-space-1, 0.25rem));
}
:where([data-starkit-slider][data-size="lg"]) {
height: var(--starplane-space-3, var(--star-space-3, 0.75rem));
}
:where([data-starkit-slider][data-size="sm"])::-webkit-slider-thumb {
width: 0.75rem;
height: 0.75rem;
}
:where([data-starkit-slider][data-size="lg"])::-webkit-slider-thumb {
width: 1.25rem;
height: 1.25rem;
}
:where([data-starkit-slider][data-size="sm"])::-moz-range-thumb {
width: 0.75rem;
height: 0.75rem;
}
:where([data-starkit-slider][data-size="lg"])::-moz-range-thumb {
width: 1.25rem;
height: 1.25rem;
}
:where([data-starkit-slider][data-tone="ok"])::-webkit-slider-thumb {
background: var(--starplane-ok, var(--star-ok));
box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--star-ok) 18%, transparent);
}
:where([data-starkit-slider][data-tone="ok"])::-moz-range-thumb {
background: var(--starplane-ok, var(--star-ok));
box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--star-ok) 18%, transparent);
}
:where([data-starkit-slider][data-tone="danger"])::-webkit-slider-thumb {
background: var(--starplane-danger, var(--star-danger));
box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--star-danger) 18%, transparent);
}
:where([data-starkit-slider][data-tone="danger"])::-moz-range-thumb {
background: var(--starplane-danger, var(--star-danger));
box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--star-danger) 18%, transparent);
}
/* ── Stepper — size / fullWidth / align ───────────────────────────────────── */
:where([data-starkit-stepper][data-fullwidth="true"]) {
display: inline-flex;
width: 100%;
}
:where([data-starkit-stepper][data-fullwidth="true"]) > :where([data-starkit-stepper-input]) {
flex: 1 1 auto;
width: auto;
}
:where([data-starkit-stepper][data-size="sm"]) > :where([data-starkit-stepper-input]) {
width: 2.5ch;
font-size: var(--star-text-sm, 0.8125rem);
}
:where([data-starkit-stepper][data-size="lg"]) > :where([data-starkit-stepper-input]) {
width: 4ch;
font-size: var(--star-text-lg, 1.0625rem);
}
:where([data-starkit-stepper-input][data-align="start"]) {
text-align: start;
}
:where([data-starkit-stepper-input][data-align="end"]) {
text-align: end;
}
:where([data-starkit-stepper-input][data-align="center"]) {
text-align: center;
}
/* ── SwitchLamp — size / tone / glow ──────────────────────────────────────── */
:where([data-starkit-switchlamp][data-size="sm"]) {
width: 36px;
height: 20px;
}
:where([data-starkit-switchlamp][data-size="lg"]) {
width: 52px;
height: 28px;
}
:where([data-starkit-switchlamp][data-size="sm"]) :where([data-starkit-switchlamp-thumb]) {
width: 14px;
height: 14px;
}
:where([data-starkit-switchlamp][data-size="lg"]) :where([data-starkit-switchlamp-thumb]) {
width: 22px;
height: 22px;
}
:where([data-starkit-switchlamp][data-size="sm"][data-checked="true"]) :where([data-starkit-switchlamp-thumb]) {
transform: translateX(16px);
}
:where([data-starkit-switchlamp][data-size="lg"][data-checked="true"]) :where([data-starkit-switchlamp-thumb]) {
transform: translateX(24px);
}
:where([data-starkit-switchlamp][data-tone="accent"][data-checked="true"]) {
background: var(--starplane-accent, var(--star-accent));
}
:where([data-starkit-switchlamp][data-tone="danger"][data-checked="true"]) {
background: var(--starplane-danger, var(--star-danger));
}
:where([data-starkit-switchlamp][data-tone="accent"][data-checked="true"]) :where([data-starkit-switchlamp-glow]) {
box-shadow: 0 0 12px 2px color-mix(in srgb, var(--star-accent) 45%, transparent);
}
:where([data-starkit-switchlamp][data-tone="danger"][data-checked="true"]) :where([data-starkit-switchlamp-glow]) {
box-shadow: 0 0 12px 2px color-mix(in srgb, var(--star-danger) 45%, transparent);
}
:where([data-starkit-switchlamp][data-glow="false"]) :where([data-starkit-switchlamp-glow]) {
display: none;
}
/* ── RadioCardGroup — size / orientation / tone ───────────────────────────── */
:where([data-starkit-radiocardgroup][data-size="sm"]) :where([data-starkit-radiocard]) {
padding: 12px;
}
:where([data-starkit-radiocardgroup][data-size="lg"]) :where([data-starkit-radiocard]) {
padding: 20px;
}
:where([data-starkit-radiocardgroup][data-orientation="horizontal"]) {
flex-wrap: wrap;
}
:where([data-starkit-radiocardgroup][data-orientation="horizontal"]) > :where([data-starkit-radiocard]) {
flex: 1 1 240px;
}
:where([data-starkit-radiocardgroup][data-tone="ok"]) :where([data-starkit-radiocard][data-selected="true"]) {
box-shadow: inset 0 0 0 2px var(--starplane-ok, var(--star-ok));
}
:where([data-starkit-radiocardgroup][data-tone="danger"]) :where([data-starkit-radiocard][data-selected="true"]) {
box-shadow: inset 0 0 0 2px var(--starplane-danger, var(--star-danger));
}
:where([data-starkit-radiocardgroup][data-tone="ok"]) :where([data-starkit-radiocard][data-selected="true"]) :where([data-starkit-radiocard-radio]) {
background: var(--starplane-ok, var(--star-ok));
}
:where([data-starkit-radiocardgroup][data-tone="danger"]) :where([data-starkit-radiocard][data-selected="true"]) :where([data-starkit-radiocard-radio]) {
background: var(--starplane-danger, var(--star-danger));
}
/* ── PaginationPills — size / tone / shape ────────────────────────────────── */
:where([data-starkit-pagination][data-size="sm"]) :where([data-starkit-page], [data-starkit-page-nav]) {
min-width: 28px;
height: 28px;
}
:where([data-starkit-pagination][data-size="lg"]) :where([data-starkit-page], [data-starkit-page-nav]) {
min-width: 44px;
height: 44px;
}
:where([data-starkit-pagination][data-shape="pill"]) :where([data-starkit-page], [data-starkit-page-nav]) {
border-radius: var(--starplane-radius-full, 999px);
}
:where([data-starkit-pagination][data-shape="square"]) :where([data-starkit-page], [data-starkit-page-nav]) {
border-radius: 0;
}
:where([data-starkit-pagination][data-tone="neutral"]) :where([data-starkit-page][data-current="true"]) {
background: color-mix(in srgb, var(--starplane-text, var(--star-text)) 10%, transparent);
color: var(--starplane-text, var(--star-text));
}
/* ===== primitives/display/display.css ===== */
/* display.css — the parts of the display primitives the closed token API can't
* emit: per-side borders, separators, the small interactive deltas, and the
* StatDelta entrance.
*
* WHY THIS FILE EXISTS (same rationale as the reference Button's reference.css):
* the public starstyle API (`layout.*`, `recipes.recipe`) is a FLAT token-decl
* surface — it expresses property→token mappings but cannot emit a single
* per-side border (`border-left`), `:hover`/`:focus-visible` conditions, a
* keyframe, or separator coloring as a longhand. Those live here.
*
* EVERY selector is `:where([data-starkit-*])` → ZERO specificity, so a caller's
* own class always wins without `!important`. ZERO RAW HEX: every colour reads
* its `--starplane-*` alias and falls back to the canonical `--star-*` contract
* token (feedback tones, text, border, accent) — so a tone is the THEME's tone
* under all 7 themes, never a baked-in colour. Soft/tinted fills derive from a
* token via `color-mix`, so they track the accent on theme swap. The base look
* (bg/fg/padding) still comes from the starstyle output applied inline by .tsx.
*
* This file is a co-located ASSET, NOT a TS import (there is no ambient .css
* module declaration in this package's tsconfig) — the host includes it, exactly
* like controls/styles.css and overlays/styles.css.
*/
/* ── Callout ─────────────────────────────────────────────────────────────── */
/* Warm raised surface; each tone tints the fill by mixing a sliver of its own
* token into the surface (so the tint tracks the theme on swap) and keys the
* left accent border to the tone. Neutral keeps the plain raised surface. */
:where([data-starkit-callout]) {
background: var(--starplane-surface, var(--star-surface, var(--star-bg)));
border: 1px solid var(--starplane-border-subtle, var(--star-border));
border-left-width: 3px;
border-left-color: var(--starplane-border, var(--star-border-strong));
}
:where([data-starkit-callout][data-tone="info"]) {
border-left-color: var(--starplane-info, var(--star-info));
background: color-mix(in oklab, var(--starplane-info, var(--star-info)) 7%,
var(--starplane-surface, var(--star-surface, var(--star-bg))));
}
:where([data-starkit-callout][data-tone="ok"]) {
border-left-color: var(--starplane-ok, var(--star-ok));
background: color-mix(in oklab, var(--starplane-ok, var(--star-ok)) 7%,
var(--starplane-surface, var(--star-surface, var(--star-bg))));
}
:where([data-starkit-callout][data-tone="warn"]) {
border-left-color: var(--starplane-warn, var(--star-warn));
background: color-mix(in oklab, var(--starplane-warn, var(--star-warn)) 7%,
var(--starplane-surface, var(--star-surface, var(--star-bg))));
}
:where([data-starkit-callout][data-tone="danger"]) {
border-left-color: var(--starplane-danger, var(--star-danger));
background: color-mix(in oklab, var(--starplane-danger, var(--star-danger)) 7%,
var(--starplane-surface, var(--star-surface, var(--star-bg))));
}
:where([data-starkit-callout-icon]) {
flex: 0 0 auto;
line-height: 1;
}
/* Body owns the vertical rhythm so heading/actions stack under the text. */
:where([data-starkit-callout-body]) {
flex: 1 1 auto;
min-width: 0;
}
:where([data-starkit-callout-heading]) {
font-weight: 600;
margin-bottom: var(--starplane-space-1, var(--star-space-1, 0.25rem));
color: var(--starplane-text-primary, var(--star-text));
}
:where([data-starkit-callout-actions]) {
display: flex;
gap: var(--starplane-space-2, var(--star-space-2, 0.5rem));
margin-top: var(--starplane-space-3, var(--star-space-3, 0.75rem));
}
:where([data-starkit-callout-dismiss]) {
flex: 0 0 auto;
cursor: pointer;
border: 0;
background: transparent;
color: inherit;
line-height: 1;
padding: 0;
opacity: 0.6;
transition: opacity var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-callout-dismiss]:hover) { opacity: 1; }
:where([data-starkit-callout-dismiss]):focus-visible {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
outline-offset: 1px;
}
/* Size — padding + type scale. `md` is the default (unchanged) look. */
:where([data-starkit-callout][data-size="sm"]) {
padding: var(--starplane-space-2, var(--star-space-2, 0.5rem));
font-size: 0.875em;
}
:where([data-starkit-callout][data-size="lg"]) {
padding: var(--starplane-space-5, var(--star-space-5, 1.25rem));
font-size: 1.0625em;
}
/* Variant — `soft` is the default tinted wash. `outline` drops the fill;
* `solid` fills the whole box with the tone and lifts the ink to on-tone. */
:where([data-starkit-callout][data-variant="outline"]) {
background: var(--starplane-surface, var(--star-surface, var(--star-bg)));
border-color: var(--starplane-border, var(--star-border-strong));
}
:where([data-starkit-callout][data-variant="solid"][data-tone="info"]) {
background: color-mix(in oklab, var(--starplane-info, var(--star-info)) 18%,
var(--starplane-surface, var(--star-surface, var(--star-bg))));
}
:where([data-starkit-callout][data-variant="solid"][data-tone="ok"]) {
background: color-mix(in oklab, var(--starplane-ok, var(--star-ok)) 18%,
var(--starplane-surface, var(--star-surface, var(--star-bg))));
}
:where([data-starkit-callout][data-variant="solid"][data-tone="warn"]) {
background: color-mix(in oklab, var(--starplane-warn, var(--star-warn)) 18%,
var(--starplane-surface, var(--star-surface, var(--star-bg))));
}
:where([data-starkit-callout][data-variant="solid"][data-tone="danger"]) {
background: color-mix(in oklab, var(--starplane-danger, var(--star-danger)) 18%,
var(--starplane-surface, var(--star-surface, var(--star-bg))));
}
/* ── Blockquote ──────────────────────────────────────────────────────────── */
:where([data-starkit-blockquote]) {
margin: 0;
border-left: 3px solid var(--starplane-accent, var(--star-accent));
}
/* Tone — accent-border color. `accent` is the default (unchanged). */
:where([data-starkit-blockquote][data-tone="info"]) { border-left-color: var(--starplane-info, var(--star-info)); }
:where([data-starkit-blockquote][data-tone="ok"]) { border-left-color: var(--starplane-ok, var(--star-ok)); }
:where([data-starkit-blockquote][data-tone="warn"]) { border-left-color: var(--starplane-warn, var(--star-warn)); }
:where([data-starkit-blockquote][data-tone="danger"]) { border-left-color: var(--starplane-danger, var(--star-danger)); }
/* Size — type scale. `md` is the default (unchanged). */
:where([data-starkit-blockquote][data-size="sm"]) { font-size: 0.875em; }
:where([data-starkit-blockquote][data-size="lg"]) { font-size: 1.125em; }
/* Align — `start` is the default. */
:where([data-starkit-blockquote][data-align="center"]) { text-align: center; }
:where([data-starkit-blockquote][data-align="end"]) { text-align: right; }
:where([data-starkit-blockquote-cite]) {
margin-top: var(--starplane-space-2, var(--star-space-2, 0.5rem));
/* Attribution is real content, so it rides the MUTED ink tier, not the
* faintest tertiary tier (tertiary was only 3.14 on the dark ground; the
* muted tier clears AA at 4.7-5.4 across the dark surfaces). */
color: var(--starplane-text-muted, var(--star-text-muted));
font-size: 0.875em;
}
/* ── Divider ─────────────────────────────────────────────────────────────── */
:where([data-starkit-divider]) {
border: 0;
background: var(--starplane-divider, var(--star-border));
flex: 0 0 auto;
}
:where([data-starkit-divider][data-orientation="horizontal"]) {
width: 100%;
height: 1px;
}
:where([data-starkit-divider][data-orientation="vertical"]) {
width: 1px;
height: 100%;
min-height: 1em;
align-self: stretch;
}
/* Tone — line color tier. `subtle` is the default rule color (unchanged). */
:where([data-starkit-divider][data-tone="strong"]) {
background: var(--starplane-border-strong, var(--star-border-strong, var(--star-border)));
}
:where([data-starkit-divider][data-tone="accent"]) {
background: var(--starplane-accent, var(--star-accent));
}
/* Variant — dashed/dotted swap the solid fill for a border-drawn rule. */
:where([data-starkit-divider][data-variant="dashed"]),
:where([data-starkit-divider][data-variant="dotted"]) {
background: transparent;
}
:where([data-starkit-divider][data-orientation="horizontal"][data-variant="dashed"]) {
height: 0;
border-top: 1px dashed var(--starplane-divider, var(--star-border));
}
:where([data-starkit-divider][data-orientation="horizontal"][data-variant="dotted"]) {
height: 0;
border-top: 1px dotted var(--starplane-divider, var(--star-border));
}
:where([data-starkit-divider][data-orientation="vertical"][data-variant="dashed"]) {
width: 0;
border-left: 1px dashed var(--starplane-divider, var(--star-border));
}
:where([data-starkit-divider][data-orientation="vertical"][data-variant="dotted"]) {
width: 0;
border-left: 1px dotted var(--starplane-divider, var(--star-border));
}
:where([data-starkit-divider][data-tone="strong"][data-variant="dashed"]),
:where([data-starkit-divider][data-tone="strong"][data-variant="dotted"]) {
border-color: var(--starplane-border-strong, var(--star-border-strong, var(--star-border)));
}
:where([data-starkit-divider][data-tone="accent"][data-variant="dashed"]),
:where([data-starkit-divider][data-tone="accent"][data-variant="dotted"]) {
border-color: var(--starplane-accent, var(--star-accent));
}
/* Labelled — a flex row with the rule drawn on both sides of the label. */
:where([data-starkit-divider][data-labelled]) {
display: flex;
align-items: center;
gap: var(--starplane-space-3, var(--star-space-3, 0.75rem));
height: auto;
background: transparent;
border: 0;
}
:where([data-starkit-divider][data-labelled])::before,
:where([data-starkit-divider][data-labelled])::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: var(--starplane-divider, var(--star-border));
}
:where([data-starkit-divider][data-labelled][data-tone="strong"])::before,
:where([data-starkit-divider][data-labelled][data-tone="strong"])::after {
background: var(--starplane-border-strong, var(--star-border-strong, var(--star-border)));
}
:where([data-starkit-divider][data-labelled][data-tone="accent"])::before,
:where([data-starkit-divider][data-labelled][data-tone="accent"])::after {
background: var(--starplane-accent, var(--star-accent));
}
:where([data-starkit-divider-label]) {
flex: 0 0 auto;
color: var(--starplane-text-muted, var(--star-text-muted));
font-size: 0.8125em;
white-space: nowrap;
}
/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
:where([data-starkit-breadcrumb-group]) {
display: inline-flex;
align-items: center;
gap: var(--starplane-space-2, var(--star-space-2, 0.5rem));
}
:where([data-starkit-breadcrumb-sep]) {
/* Muted (not tertiary) so the separator clears AA on the dark ground. */
color: var(--starplane-text-muted, var(--star-text-muted));
user-select: none;
}
:where([data-starkit-breadcrumb] a[data-starkit-breadcrumb-item]) {
color: var(--starplane-text-secondary, var(--star-text-muted));
text-decoration: none;
transition: color var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-breadcrumb] a[data-starkit-breadcrumb-item]:hover) {
color: var(--starplane-accent, var(--star-accent));
}
:where([data-starkit-breadcrumb-item][aria-current="page"]) {
color: var(--starplane-text-primary, var(--star-text));
}
:where([data-starkit-breadcrumb-ellipsis]) {
color: var(--starplane-text-muted, var(--star-text-muted));
user-select: none;
}
/* Breadcrumb size — `md` is the default (unchanged). */
:where([data-starkit-breadcrumb][data-size="sm"]) { font-size: 0.8125em; }
/* ── Tag ─────────────────────────────────────────────────────────────────── */
:where([data-starkit-tag-remove]) {
cursor: pointer;
border: 0;
background: transparent;
color: inherit;
line-height: 1;
padding: 0;
opacity: 0.7;
transition: opacity var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-tag-remove]:hover) {
opacity: 1;
}
:where([data-starkit-tag-remove]):focus-visible {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
outline-offset: 1px;
}
/* accent/ok/warn tone wells — a LIGHTER color-mix wash than the 16–18% soft so
* the FROZEN accent/ok/warn inks clear AA on the cream face (the soft washes
* held only ~3.6–4.4). The recipe supplies the tone INK; the background lives
* here because the recipe's BackgroundToken type can't hold a color-mix. */
:where([data-starkit-tag][data-tone="accent"]) {
background: color-mix(in srgb, var(--starplane-accent, var(--star-accent)) 7%, var(--star-surface));
}
:where([data-starkit-tag][data-tone="ok"]) {
background: color-mix(in srgb, var(--starplane-ok, var(--star-ok)) 9%, var(--star-surface));
}
:where([data-starkit-tag][data-tone="warn"]) {
background: color-mix(in srgb, var(--starplane-warn, var(--star-warn)) 9%, var(--star-surface));
}
:where([data-starkit-tag-icon]) {
display: inline-flex;
align-items: center;
line-height: 1;
}
/* Tag size — `md` is the default (unchanged). */
:where([data-starkit-tag][data-size="sm"]) { font-size: 0.75em; }
/* Tag variant — `outline` drops the tone well for a bordered chip. */
:where([data-starkit-tag][data-variant="outline"]) {
background: transparent;
border: 1px solid var(--starplane-border, var(--star-border));
}
:where([data-starkit-tag][data-variant="outline"][data-tone="accent"]) { border-color: var(--starplane-accent, var(--star-accent)); }
:where([data-starkit-tag][data-variant="outline"][data-tone="ok"]) { border-color: var(--starplane-ok, var(--star-ok)); }
:where([data-starkit-tag][data-variant="outline"][data-tone="warn"]) { border-color: var(--starplane-warn, var(--star-warn)); }
:where([data-starkit-tag][data-variant="outline"][data-tone="danger"]) { border-color: var(--starplane-danger, var(--star-danger)); }
:where([data-starkit-tag][data-variant="outline"][data-tone="info"]) { border-color: var(--starplane-info, var(--star-info)); }
/* StatDelta ok well — same reasoning (lighter than accentSoft so okInk clears). */
:where([data-starkit-stat-delta][data-tone="ok"]) {
background: color-mix(in srgb, var(--starplane-ok, var(--star-ok)) 9%, var(--star-surface));
}
/* StatDelta size — `md` is the default (unchanged). */
:where([data-starkit-stat-delta][data-size="sm"]) { font-size: 0.8125em; }
/* StatusChip accent/ok/warn wells — the starstyle chip() recipe omits these
* tones' background (their light inks can't clear on the 16-18% soft), so the
* AA-safe lighter wash is supplied here, keyed on data-tone. danger/info/neutral
* keep their recipe soft (dark-enough ink). */
:where([data-starkit-statuschip][data-tone="accent"]) {
background: color-mix(in srgb, var(--starplane-accent, var(--star-accent)) 7%, var(--star-surface));
}
:where([data-starkit-statuschip][data-tone="ok"]) {
background: color-mix(in srgb, var(--starplane-ok, var(--star-ok)) 9%, var(--star-surface));
}
:where([data-starkit-statuschip][data-tone="warn"]) {
background: color-mix(in srgb, var(--starplane-warn, var(--star-warn)) 9%, var(--star-surface));
}
/* ── Stat ────────────────────────────────────────────────────────────────── */
/* Warm raised tile: token surface (inline from layout.box) + a 1px token border
* the closed API can't emit. The label is a quiet caption; the value reads big.
* `interactive` adds a GPU-safe hover/focus lift for clickable KPI cards. */
:where([data-starkit-stat]) {
border: 1px solid var(--starplane-border-subtle, var(--star-border));
}
:where([data-starkit-stat-label]) {
color: var(--starplane-text-secondary, var(--star-text-muted));
font-size: 0.8125em;
letter-spacing: 0.01em;
}
:where([data-starkit-stat-value]) {
font-size: 1.5em;
font-weight: 650;
line-height: 1.1;
letter-spacing: -0.01em;
}
:where([data-starkit-stat-icon]) {
display: inline-flex;
align-items: center;
margin-right: var(--starplane-space-2, var(--star-space-2, 0.5rem));
line-height: 1;
}
/* Size — value type scale. `md` is the default (unchanged). */
:where([data-starkit-stat][data-size="sm"]) > :where([data-starkit-stat-value]) { font-size: 1.125em; }
:where([data-starkit-stat][data-size="lg"]) > :where([data-starkit-stat-value]) { font-size: 2em; }
/* Align — `start` is the default. */
:where([data-starkit-stat][data-align="center"]) { text-align: center; align-items: center; }
:where([data-starkit-stat][data-align="end"]) { text-align: right; align-items: flex-end; }
/* Tone — accent the big value with a feedback token. */
:where([data-starkit-stat][data-tone="accent"]) > :where([data-starkit-stat-value]) {
color: var(--starplane-accent, var(--star-accent));
}
:where([data-starkit-stat][data-tone="ok"]) > :where([data-starkit-stat-value]) {
color: var(--starplane-ok-ink, var(--starplane-ok, var(--star-ok)));
}
:where([data-starkit-stat][data-tone="warn"]) > :where([data-starkit-stat-value]) {
color: var(--starplane-warn-ink, var(--starplane-warn, var(--star-warn)));
}
:where([data-starkit-stat][data-tone="danger"]) > :where([data-starkit-stat-value]) {
color: var(--starplane-danger-ink, var(--starplane-danger, var(--star-danger)));
}
:where([data-starkit-stat-trailing]) {
margin-top: var(--starplane-space-1, var(--star-space-1, 0.25rem));
}
:where([data-starkit-stat][data-interactive]) {
cursor: pointer;
transition: transform var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease)),
border-color var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-stat][data-interactive]:hover) {
transform: translateY(-1px);
border-color: var(--starplane-border-strong, var(--star-border-strong, var(--star-border)));
}
:where([data-starkit-stat][data-interactive]:focus-visible) {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
outline-offset: 2px;
}
/* ── Avatar ──────────────────────────────────────────────────────────────── */
/* Neutral fill so the RING (not the disc) carries identity — grayscale-safe.
* The fill/size come from the starstyle recipe applied inline; the ring, badge
* shapes, status dot, and group overlap are the positioned/per-side geometry the
* closed token API can't emit. (Mirrors starwall examples/staros/serve.ts.) */
:where([data-starkit-avatar]) {
position: relative;
box-sizing: border-box;
display: inline-grid;
place-items: center;
flex: none;
overflow: visible;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1;
border-style: solid;
border-width: var(--starkit-av-ring, 2px);
border-color: var(--starplane-border-subtle, var(--star-border));
}
:where([data-starkit-avatar][data-size="sm"]) {
--starkit-av-ring: 2px;
font-size: 0.6875rem;
}
:where([data-starkit-avatar][data-size="md"]) {
--starkit-av-ring: 2.5px;
font-size: 0.8125rem;
}
:where([data-starkit-avatar][data-size="lg"]) {
--starkit-av-ring: 3px;
font-size: 1rem;
}
/* Ring hue by identity (redundant with the badge shape below). */
:where([data-starkit-avatar][data-kind="human"]) {
border-color: var(--starplane-info, var(--star-info));
}
:where([data-starkit-avatar][data-kind="agent"]) {
border-color: var(--starplane-accent, var(--star-accent));
}
:where([data-starkit-avatar][data-kind="system"]) {
border-color: var(--starplane-border-strong, var(--star-border-strong, var(--star-border)));
color: var(--starplane-text-tertiary, var(--star-text-muted));
}
/* Initials are the base layer (grid-centred by the root); the image overlays
* them so a load error just needs to HIDE the image to reveal the initials. */
:where([data-starkit-avatar-initials]) {
grid-area: 1 / 1;
user-select: none;
}
:where([data-starkit-avatar-img]) {
grid-area: 1 / 1;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
display: block;
background: var(--starplane-surface, var(--star-surface, var(--star-bg)));
}
:where([data-starkit-avatar-img][data-failed]) {
display: none;
}
/* Identity badge — bottom-right. The SHAPE (disc=human, diamond=agent), not the
* hue, is the tell, so it survives grayscale + colourblindness. A surface-toned
* ring ("punch-out") detaches it from the disc edge. */
:where([data-starkit-avatar-badge]) {
position: absolute;
right: -2px;
bottom: -2px;
width: 38%;
height: 38%;
min-width: 8px;
min-height: 8px;
box-shadow: 0 0 0 2px var(--starplane-surface, var(--star-surface, var(--star-bg)));
}
:where([data-starkit-avatar-badge][data-shape="disc"]) {
border-radius: 50%;
background: var(--starplane-info, var(--star-info));
}
:where([data-starkit-avatar-badge][data-shape="diamond"]) {
border-radius: 2px;
transform: rotate(45deg);
background: var(--starplane-accent, var(--star-accent));
}
/* Status dot — top-right, distinct corner from the kind badge. Colour AND a
* visually-hidden text label carry presence (never colour alone). */
:where([data-starkit-avatar-status]) {
position: absolute;
top: -1px;
right: -1px;
width: 30%;
height: 30%;
min-width: 7px;
min-height: 7px;
border-radius: 50%;
box-shadow: 0 0 0 2px var(--starplane-surface, var(--star-surface, var(--star-bg)));
background: var(--starplane-text-tertiary, var(--star-text-muted));
}
:where([data-starkit-avatar-status][data-status="online"]) {
background: var(--starplane-ok, var(--star-ok));
}
:where([data-starkit-avatar-status][data-status="busy"]) {
background: var(--starplane-danger, var(--star-danger));
}
:where([data-starkit-avatar-status][data-status="away"]) {
background: var(--starplane-warn, var(--star-warn));
}
:where([data-starkit-avatar-status][data-status="offline"]) {
background: var(--starplane-text-tertiary, var(--star-text-muted));
}
/* A single GPU-safe pulse ring for the live state (transform + opacity only). */
:where([data-starkit-avatar-status][data-status="online"])::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: inherit;
animation: starkit-av-pulse var(--starplane-dur-slow, var(--star-dur-slow, 2s))
var(--starplane-ease-out, var(--star-ease, ease-out)) infinite;
}
@keyframes starkit-av-pulse {
0% {
opacity: 0.45;
transform: scale(1);
}
70%,
100% {
opacity: 0;
transform: scale(2.4);
}
}
:where([data-starkit-visually-hidden]) {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* AvatarGroup — overlapped stack; a surface-toned ring on each child keeps the
* overlap legible. Earlier avatars sit on top (DOM order) so the overflow token
* trails cleanly. */
:where([data-starkit-avatar-group]) [data-starkit-avatar],
:where([data-starkit-avatar-group]) [data-starkit-avatar-overflow] {
box-shadow: 0 0 0 2px var(--starplane-surface, var(--star-surface, var(--star-bg)));
}
:where([data-starkit-avatar-group]) > * + * {
margin-left: -0.6em;
}
:where([data-starkit-avatar-overflow]) {
box-sizing: border-box;
display: inline-grid;
place-items: center;
flex: none;
font-weight: 700;
font-size: 0.75em;
line-height: 1;
border: 1px solid var(--starplane-border-subtle, var(--star-border));
color: var(--starplane-text-secondary, var(--star-text-muted));
user-select: none;
}
:where([data-starkit-avatar-overflow][data-size="sm"]) {
font-size: 0.625rem;
}
:where([data-starkit-avatar-overflow][data-size="lg"]) {
font-size: 0.8125rem;
}
/* Shape — `circle` is the default (root radius comes from the recipe / inline).
* `square` re-radiuses the OVERLAY img + badge/status corners to match the box. */
:where([data-starkit-avatar][data-shape="square"]) > :where([data-starkit-avatar-img]) {
border-radius: var(--starplane-radius, var(--star-radius-base, 0.5rem));
}
/* Ring — default shows the identity ring; `false` drops the border colour so the
* disc reads flat (kind hue no longer painted). */
:where([data-starkit-avatar][data-ring="false"]) {
border-color: transparent;
}
/* Interactive — GPU-safe lift + focus ring for a clickable avatar (mirrors Stat). */
:where([data-starkit-avatar][data-interactive]) {
cursor: pointer;
transition: transform var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-avatar][data-interactive]:hover) {
transform: translateY(-1px);
}
:where([data-starkit-avatar][data-interactive]:focus-visible) {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
outline-offset: 2px;
}
/* ── StatDelta ───────────────────────────────────────────────────────────── */
/* Signature detail: the trend glyph RISES in the direction of the trend on
* mount — up-deltas lift, down-deltas drop — so the change is felt, not just
* read. GPU-safe (transform + opacity); each glyph animates independently of
* the value text. Silenced under reduced-motion. */
:where([data-starkit-stat-delta-glyph]) {
line-height: 1;
font-size: 0.75em;
display: inline-block;
animation: starkit-delta-rise var(--starplane-dur, var(--star-dur-base, 0.32s))
var(--starplane-ease-out, var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1))) both;
}
:where([data-starkit-stat-delta][data-trend="down"] [data-starkit-stat-delta-glyph]) {
animation-name: starkit-delta-drop;
}
@keyframes starkit-delta-rise {
from {
opacity: 0;
transform: translateY(0.4em);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes starkit-delta-drop {
from {
opacity: 0;
transform: translateY(-0.4em);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-breadcrumb] a[data-starkit-breadcrumb-item]),
:where([data-starkit-tag-remove]) {
transition-duration: 0.01ms;
}
:where([data-starkit-stat-delta-glyph]) {
animation: none;
}
:where([data-starkit-avatar-status][data-status="online"])::after {
animation: none;
display: none;
}
:where([data-starkit-avatar][data-interactive]) {
transition-duration: 0.01ms;
}
:where([data-starkit-stat][data-interactive]) {
transition-duration: 0.01ms;
}
}
/* ── Gauge — the calibrated tick gauge (GENE 2, THE Pixelflame signature) ──
* Geometry is the measured v1.1 spec: pitch 5px = 2px tick + 3px gap, 1px
* tick radius; hero 28px / inline 16px / mini 10px. Colors are tokens ONLY
* (accent fill, border rest, ok/danger semantic) so a theme swap re-skins
* every gauge. Motion is opacity-only (GPU-safe): ticks stagger in via a
* per-tick --starkit-gauge-delay set inline by the component, and a `live`
* gauge breathes its last lit tick. Everything silenced under
* prefers-reduced-motion. */
:where([data-starkit-gauge]) {
display: flex;
align-items: stretch;
gap: 3px;
height: 16px;
min-width: 0;
}
:where([data-starkit-gauge][data-size="hero"]) { height: 28px; }
:where([data-starkit-gauge][data-size="mini"]) { height: 10px; }
:where([data-starkit-gauge]) > :where([data-tick]) {
flex: 0 0 2px;
width: 2px;
height: 100%;
border-radius: 1px;
background: var(--starplane-border, var(--star-border, #d7dade));
animation: starkit-gauge-in 180ms var(--starplane-ease, var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1))) backwards;
animation-delay: var(--starkit-gauge-delay, 0ms);
}
:where([data-starkit-gauge]) > :where([data-tick="fill"]) {
background: var(--starplane-accent, var(--star-accent, #f5641e));
}
:where([data-starkit-gauge]) > :where([data-tick="ok"]) {
background: var(--starplane-ok, var(--star-ok, #16a34a));
}
:where([data-starkit-gauge]) > :where([data-tick="danger"]) {
background: var(--starplane-danger, var(--star-danger, #dc2626));
}
:where([data-starkit-gauge]) > :where([data-tick="threshold"]) {
background: var(--starplane-text, var(--star-text, #0b0d0f));
}
:where([data-starkit-gauge]) > :where([data-tick="untested"]) {
background: var(--starplane-border, var(--star-border, #d7dade));
}
/* Tone: re-key the LIT (fill) ticks to a feedback token so a gauge can read
* health, not just progress. The default (no data-tone) keeps the accent fill. */
:where([data-starkit-gauge][data-tone="ok"]) > :where([data-tick="fill"]) {
background: var(--starplane-ok, var(--star-ok, #16a34a));
}
:where([data-starkit-gauge][data-tone="warn"]) > :where([data-tick="fill"]) {
background: var(--starplane-warn, var(--star-warn, #d97706));
}
:where([data-starkit-gauge][data-tone="danger"]) > :where([data-tick="fill"]) {
background: var(--starplane-danger, var(--star-danger, #dc2626));
}
/* Rounded: full-pill tick caps instead of the 1px spec radius. */
:where([data-starkit-gauge][data-rounded]) > :where([data-tick]) {
border-radius: 999px;
}
/* Disabled: dimmed + inert (the effect also strips data-live). */
:where([data-starkit-gauge][data-disabled]) { opacity: 0.45; }
/* Empty state: the reference "0 assets" row — muted ticks at 60% height. */
:where([data-starkit-gauge][data-empty]) { align-items: flex-end; }
:where([data-starkit-gauge][data-empty]) > :where([data-tick]) { height: 60%; }
/* Live: the last lit tick breathes (2.4s, opacity only — spec v1.1). */
:where([data-starkit-gauge][data-live]) > :where([data-tick-last]) {
animation:
starkit-gauge-in 180ms var(--starplane-ease, var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1))) backwards,
starkit-gauge-pulse 2.4s ease-in-out infinite;
animation-delay: var(--starkit-gauge-delay, 0ms), 0ms;
}
@keyframes starkit-gauge-in {
from { opacity: 0; }
}
@keyframes starkit-gauge-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-gauge]) > :where([data-tick]),
:where([data-starkit-gauge][data-live]) > :where([data-tick-last]) {
animation: none;
}
}
/* ── GaugeStat legend row — dual mono captions under the gauge ── */
:where([data-starkit-gaugestat-legend]) { width: 100%; }
/* Align — the column's cross-axis + text alignment. `start` is the default. */
:where([data-starkit-gaugestat][data-align="center"]) { align-items: center; text-align: center; }
:where([data-starkit-gaugestat][data-align="end"]) { align-items: flex-end; text-align: right; }
/* ── Chip & pill family (GENE 4) ─────────────────────────────────────────
* Tones come inline from the starstyle chip() recipe (one semantic ramp);
* this layer adds only what the closed API can't emit: layout of the dot,
* hover/press deltas, and the focus ring. Zero raw palette values outside
* var() fallbacks. */
:where([data-starkit-statuschip]) {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
line-height: 1.6;
}
:where([data-starkit-chip-dot]) {
width: 7px;
height: 7px;
border-radius: 999px;
background: currentColor;
flex: none;
}
/* Size — `md` is the default (the recipe's inherited scale). */
:where([data-starkit-statuschip][data-size="sm"]) { font-size: 0.6875rem; gap: 4px; }
:where([data-starkit-statuschip][data-size="lg"]) { font-size: 0.8125rem; gap: 8px; }
/* Variant — `soft` is the default tinted well. `outline` drops the well for a
* hairline border in the tone (ink stays from the recipe). */
:where([data-starkit-statuschip][data-variant="outline"]) {
background: transparent;
border: 1px solid var(--starplane-border, var(--star-border));
}
:where([data-starkit-statuschip][data-variant="outline"][data-tone="accent"]) { border-color: var(--starplane-accent, var(--star-accent)); }
:where([data-starkit-statuschip][data-variant="outline"][data-tone="ok"]) { border-color: var(--starplane-ok, var(--star-ok)); }
:where([data-starkit-statuschip][data-variant="outline"][data-tone="warn"]) { border-color: var(--starplane-warn, var(--star-warn)); }
:where([data-starkit-statuschip][data-variant="outline"][data-tone="danger"]) { border-color: var(--starplane-danger, var(--star-danger)); }
:where([data-starkit-statuschip][data-variant="outline"][data-tone="info"]) { border-color: var(--starplane-info, var(--star-info)); }
/* Remove affordance — quiet × that brightens on hover, tokenised focus ring. */
:where([data-starkit-chip-remove]) {
cursor: pointer;
border: 0;
background: transparent;
color: inherit;
line-height: 1;
padding: 0;
margin-left: 2px;
opacity: 0.7;
transition: opacity var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-chip-remove]:hover) { opacity: 1; }
:where([data-starkit-chip-remove]):focus-visible {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
outline-offset: 1px;
}
:where([data-starkit-accentpill]),
:where([data-starkit-ghostpill]) {
display: inline-flex;
align-items: center;
white-space: nowrap;
gap: 6px;
cursor: pointer;
border: 0;
line-height: 1.6;
transition:
transform var(--star-dur-fast, 120ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)),
background-color var(--star-dur-fast, 120ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
:where([data-starkit-accentpill]:hover) {
background-color: var(--starplane-accent-hover, var(--star-accent-hover, #e2530f));
}
:where([data-starkit-accentpill]:active),
:where([data-starkit-ghostpill]:active) {
transform: scale(0.97);
}
:where([data-starkit-ghostpill]) {
border: 1px solid var(--starplane-border, var(--star-border, #d7dade));
}
:where([data-starkit-ghostpill]:hover) {
background-color: var(--starplane-surface-sunken, var(--star-surface-sunken, #f7f8f9));
}
:where([data-starkit-accentpill]:focus-visible),
:where([data-starkit-ghostpill]:focus-visible) {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, #f5641e));
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-accentpill]),
:where([data-starkit-ghostpill]) {
transition: none;
}
}
/* ── Detail elements (GENE 6) — the 9-vs-7 density ─────────────────────── */
:where([data-starkit-logotile]) {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--starplane-surface, var(--star-surface, #fff));
box-shadow: inset 0 0 0 1px var(--starplane-border, var(--star-border, #d7dade));
flex: none;
overflow: hidden;
}
/* Size — `md` (44px) is the default reference. */
:where([data-starkit-logotile][data-size="sm"]) { width: 32px; height: 32px; border-radius: 9px; }
:where([data-starkit-logotile][data-size="lg"]) { width: 56px; height: 56px; border-radius: 15px; }
:where([data-starkit-logotile-initial]) {
font-family: var(--star-font-ui, system-ui, sans-serif);
font-weight: var(--star-weight-semibold, 600);
font-size: var(--star-text-lg, 17px);
color: var(--starplane-text-muted, var(--star-text-muted, #6b7177));
}
:where([data-starkit-stattile]) {
display: grid;
gap: 4px;
padding: 10px 12px;
border-radius: var(--star-radius-control, 12px);
background: var(--starplane-surface-sunken, var(--star-surface-sunken, #f7f8f9));
box-shadow: inset 0 0 0 1px var(--starplane-border, var(--star-border, #d7dade));
}
/* Align — `start` is the default. center/end shift the head + value line. */
:where([data-starkit-stattile][data-align="center"]) { justify-items: center; text-align: center; }
:where([data-starkit-stattile][data-align="end"]) { justify-items: end; text-align: right; }
:where([data-starkit-stattile-head]) {
display: inline-flex;
align-items: center;
gap: 6px;
}
:where([data-starkit-stattile-icon]) { color: var(--starplane-text-muted, var(--star-text-muted, #6b7177)); }
:where([data-starkit-stattile-label]) {
font-family: var(--star-legend-font, ui-monospace, monospace);
font-size: var(--star-text-xs, 11px);
font-weight: var(--star-legend-weight, 500);
letter-spacing: var(--star-legend-tracking, 0.08em);
text-transform: uppercase;
color: var(--starplane-text-muted, var(--star-text-muted, #6b7177));
}
:where([data-starkit-stattile-value]) {
font-family: var(--star-font-ui, system-ui, sans-serif);
font-size: var(--star-text-base, 15px);
font-weight: var(--star-weight-semibold, 600);
font-variant-numeric: tabular-nums;
color: var(--starplane-text, var(--star-text, #0b0d0f));
}
:where([data-starkit-datalink]) {
font-family: var(--star-legend-font, ui-monospace, monospace);
font-size: var(--star-text-xs, 11px);
font-weight: var(--star-legend-weight, 500);
letter-spacing: var(--star-legend-tracking, 0.08em);
text-transform: uppercase;
font-variant-numeric: tabular-nums;
color: var(--starplane-text-muted, var(--star-text-muted, #6b7177));
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
transition: color var(--star-dur-fast, 120ms) var(--star-ease, ease);
}
:where([data-starkit-datalink]:hover) {
color: var(--starplane-accent, var(--star-accent, #f5641e));
}
:where([data-starkit-datalink]:focus-visible) {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, #f5641e));
outline-offset: 2px;
}
:where([data-starkit-kbdhint]) {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px 7px;
border-radius: 6px;
background: var(--starplane-surface, var(--star-surface, #fff));
box-shadow:
inset 0 0 0 1px var(--starplane-border, var(--star-border, #d7dade)),
0 1px 0 var(--starplane-border, var(--star-border, #d7dade));
font-family: var(--star-legend-font, ui-monospace, monospace);
font-size: var(--star-text-xs, 11px);
color: var(--starplane-text-muted, var(--star-text-muted, #6b7177));
}
:where([data-starkit-livedot]) {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--starplane-ok, var(--star-ok, #16a34a));
flex: none;
}
:where([data-starkit-livedot][data-tone="danger"]) { background: var(--starplane-danger, var(--star-danger, #dc2626)); }
:where([data-starkit-livedot][data-tone="accent"]) { background: var(--starplane-accent, var(--star-accent, #f5641e)); }
:where([data-starkit-livedot][data-tone="neutral"]) { background: var(--starplane-border, var(--star-border, #d7dade)); }
:where([data-starkit-livedot][data-pulse="true"]) {
animation: starkit-livedot-pulse 2.4s ease-in-out infinite;
}
@keyframes starkit-livedot-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-livedot][data-pulse="true"]) { animation: none; }
}
/* ── Surfaces (GENE 1 — the depth ladder as kit parts) ─────────────────── */
:where([data-starkit-shell]) {
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0; /* surface() padding moves to head/body so the rail can fuse */
}
:where([data-starkit-shell][data-enter="true"]) {
animation: starkit-shell-in 320ms var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)) backwards;
}
@keyframes starkit-shell-in {
from { opacity: 0; transform: translateY(8px); }
}
:where([data-starkit-shell-head]) {
padding: 20px 24px 0;
display: grid;
gap: 2px;
}
:where([data-starkit-shell-kicker]) {
font-family: var(--star-legend-font, ui-monospace, monospace);
font-size: var(--star-text-xs, 11px);
font-weight: var(--star-legend-weight, 500);
letter-spacing: var(--star-legend-tracking, 0.08em);
text-transform: uppercase;
color: var(--starplane-text-muted, var(--star-text-muted, #6b7177));
}
:where([data-starkit-shell-title]) {
margin: 0;
font-family: var(--star-font-ui, system-ui, sans-serif);
font-size: var(--star-text-xl, 21px);
font-weight: var(--star-weight-semibold, 600);
letter-spacing: -0.01em;
color: var(--starplane-text, var(--star-text, #0b0d0f));
}
:where([data-starkit-shell-body]) {
padding: 16px 24px 24px;
display: grid;
gap: 20px;
}
:where([data-starkit-footerrail]) {
background: var(--starplane-surface-sunken, var(--star-surface-sunken, #f7f8f9));
border-top: 1px solid var(--starplane-border, var(--star-border, #d7dade));
padding: 14px 24px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
:where([data-starkit-hatchcanvas]) {
min-height: 100%;
background-color: var(--starplane-bg, var(--star-bg, #f4f5f7));
background-image: repeating-linear-gradient(
93.5deg,
color-mix(in srgb, var(--star-text, #0b0d0f) 2%, transparent) 0 1px,
transparent 1px 9px
);
}
/* Hatch intensity — default (no attr) is the faint 2% ink above. */
:where([data-starkit-hatchcanvas][data-hatch="none"]) {
background-image: none;
}
:where([data-starkit-hatchcanvas][data-hatch="bold"]) {
background-image: repeating-linear-gradient(
93.5deg,
color-mix(in srgb, var(--star-text, #0b0d0f) 4.5%, transparent) 0 1px,
transparent 1px 9px
);
}
/* Shell interior density — default (no attr) is the comfortable padding above. */
:where([data-starkit-shell][data-padding="compact"]) > :where([data-starkit-shell-head]) {
padding: 14px 16px 0;
}
:where([data-starkit-shell][data-padding="compact"]) > :where([data-starkit-shell-body]) {
padding: 12px 16px 16px;
gap: 14px;
}
:where([data-starkit-shell][data-padding="compact"]) > :where([data-starkit-footerrail]) {
padding: 10px 16px;
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-shell][data-enter="true"]) { animation: none; }
}
/* ------------------------------------------------------------------ */
/* TimelineSlider — the Routemind stream track (GENE 6). */
/* Accent-following rail + ringed node. Position changes JUMP by */
/* design: animating left/width is layout work, and the motion floor */
/* is transform/opacity only — a positional tween would break it. */
/* ------------------------------------------------------------------ */
:where([data-starkit-timeline]) {
display: block;
/* The rail/fill/node hue rides ONE re-keyable var; `tone` swaps it below so the
* whole track tracks the feedback token, defaulting to the accent. */
--starkit-tl-hue: var(--starplane-accent, var(--star-accent));
}
/* Tone — re-key the single hue var (default = accent, unchanged). */
:where([data-starkit-timeline][data-tone="ok"]) { --starkit-tl-hue: var(--starplane-ok, var(--star-ok)); }
:where([data-starkit-timeline][data-tone="warn"]) { --starkit-tl-hue: var(--starplane-warn, var(--star-warn)); }
:where([data-starkit-timeline][data-tone="danger"]) { --starkit-tl-hue: var(--starplane-danger, var(--star-danger)); }
:where([data-starkit-timeline-legends]) {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 10px;
}
:where([data-starkit-timeline-track]) {
position: relative;
height: 6px;
margin: 16px 0;
border-radius: var(--starplane-radius-full, 999px);
background: color-mix(in srgb, var(--starkit-tl-hue, var(--starplane-accent, var(--star-accent))) 16%, transparent);
}
:where([data-starkit-timeline-fill]) {
position: absolute;
inset: 0 auto 0 0;
width: 0;
border-radius: inherit;
background: color-mix(in srgb, var(--starkit-tl-hue, var(--starplane-accent, var(--star-accent))) 38%, transparent);
}
:where([data-starkit-timeline-node]) {
position: absolute;
top: 50%;
left: 0;
width: 34px;
height: 34px;
transform: translate(-50%, -50%);
display: grid;
place-items: center;
border-radius: var(--starplane-radius-full, 999px);
background: var(--starplane-surface, var(--star-surface));
border: 2px solid color-mix(in srgb, var(--starkit-tl-hue, var(--starplane-accent, var(--star-accent))) 55%, transparent);
color: var(--starkit-tl-hue, var(--starplane-accent, var(--star-accent)));
box-shadow: 0 1px 3px color-mix(in srgb, var(--star-text) 15%, transparent);
}
/* Size — track height + node diameter. `md` is the default (unchanged). */
:where([data-starkit-timeline][data-size="sm"]) > :where([data-starkit-timeline-track]) { height: 4px; }
:where([data-starkit-timeline][data-size="sm"]) :where([data-starkit-timeline-node]) { width: 26px; height: 26px; }
:where([data-starkit-timeline][data-size="lg"]) > :where([data-starkit-timeline-track]) { height: 8px; }
:where([data-starkit-timeline][data-size="lg"]) :where([data-starkit-timeline-node]) { width: 42px; height: 42px; }
:where([data-starkit-timeline-values]) {
display: flex;
justify-content: space-between;
align-items: baseline;
}
:where([data-starkit-timeline-value]) {
font-family: var(--star-legend-font, ui-monospace, monospace);
font-size: 13px;
font-variant-numeric: tabular-nums;
color: var(--starplane-text, var(--star-text));
}
/* ── Chart ───────────────────────────────────────────────────────────────── */
/* The token-driven inline-SVG dataviz primitive. Geometry + series colour come
* from the .tsx (fills set via element.style from the chart ramp with an accent
* fallback); this file adds only the axis-label treatment, the empty state, and
* the GPU-safe, reduced-motion-aware draw-in the closed API can't emit. */
:where([data-starkit-chart]) {
display: block;
width: 100%;
font-family: var(--starplane-font, var(--star-font-ui, system-ui, sans-serif));
}
:where([data-starkit-chart] svg) {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
:where([data-starkit-chart-axis]) {
font-family: var(--star-legend-font, var(--star-font-mono, ui-monospace, monospace));
font-size: 10px;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
fill: var(--starplane-text-secondary, var(--star-text-muted));
}
:where([data-starkit-chart-empty]) {
font-size: 12px;
fill: var(--starplane-text-tertiary, var(--star-text-muted));
}
/* Gridlines — faint token rules behind the plot (opt-in via `gridlines`). */
:where([data-starkit-chart-gridline]) {
opacity: 0.5;
}
/* Value labels — the per-datum readout above each mark (opt-in via `showValues`),
* on the telemetry gene (tabular-nums) so a value never reflows its own width. */
:where([data-starkit-chart-value]) {
font-family: var(--star-legend-font, var(--star-font-mono, ui-monospace, monospace));
font-size: 10px;
font-variant-numeric: tabular-nums;
fill: var(--starplane-text-secondary, var(--star-text-muted));
}
/* Draw-in: opacity only (GPU-safe), staggered by --starkit-chart-delay. */
:where([data-starkit-chart-bar]),
:where([data-starkit-chart-dot]) {
animation: starkit-chart-in var(--star-dur-base, 0.16s) var(--star-ease, ease) both;
animation-delay: var(--starkit-chart-delay, 0ms);
}
@keyframes starkit-chart-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-chart-bar]),
:where([data-starkit-chart-dot]) {
animation: none !important;
}
}
/* ─── AspectRatio (LAYOUT port) ───────────────────────────────────────── */
:where([data-starkit-aspectratio]) {
position: relative;
width: 100%;
aspect-ratio: var(--starkit-aspect, 1.7777);
overflow: hidden;
}
/* Children fill the ratio box (common case: a single media/content child). */
:where([data-starkit-aspectratio]) > * {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* Rounded — token radius on the clipped box. */
:where([data-starkit-aspectratio][data-rounded]) {
border-radius: var(--starplane-radius, var(--star-radius-base, 0.5rem));
}
/* Fit — pass object-fit to a child media element. */
:where([data-starkit-aspectratio][data-fit="cover"]) > * { object-fit: cover; }
:where([data-starkit-aspectratio][data-fit="contain"]) > * { object-fit: contain; }
:where([data-starkit-aspectratio][data-fit="fill"]) > * { object-fit: fill; }
:where([data-starkit-aspectratio][data-fit="none"]) > * { object-fit: none; }
/* ─── ScrollArea (LAYOUT port) ────────────────────────────────────────── */
:where([data-starkit-scrollarea]) {
position: relative;
overflow: auto;
/* Firefox: thin, token-tinted scrollbar. */
scrollbar-width: thin;
scrollbar-color: var(--starplane-border-strong, var(--star-border)) transparent;
}
:where([data-starkit-scrollarea][data-orientation="vertical"]) {
overflow-x: hidden;
overflow-y: auto;
}
:where([data-starkit-scrollarea][data-orientation="horizontal"]) {
overflow-x: auto;
overflow-y: hidden;
}
:where([data-starkit-scrollarea][data-orientation="both"]) {
overflow: auto;
}
:where([data-starkit-scrollarea]):focus-visible {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
outline-offset: 2px;
}
/* WebKit/Blink: styled scrollbars reading the border/surface tokens. */
:where([data-starkit-scrollarea])::-webkit-scrollbar {
width: 0.625rem;
height: 0.625rem;
}
:where([data-starkit-scrollarea])::-webkit-scrollbar-track {
background: transparent;
}
:where([data-starkit-scrollarea])::-webkit-scrollbar-thumb {
border-radius: 9999px;
border: 2px solid transparent;
background-clip: padding-box;
background-color: var(--starplane-border-strong, var(--star-border));
}
:where([data-starkit-scrollarea])::-webkit-scrollbar-thumb:hover {
background-color: var(--starplane-text-muted, var(--star-text-muted));
}
:where([data-starkit-scrollarea-content]) {
min-width: 0;
min-height: 0;
}
/* Scrollbar thickness — `md` is the default (0.625rem, set above). */
:where([data-starkit-scrollarea][data-size="sm"]) { scrollbar-width: thin; }
:where([data-starkit-scrollarea][data-size="sm"])::-webkit-scrollbar {
width: 0.375rem;
height: 0.375rem;
}
:where([data-starkit-scrollarea][data-size="lg"]) { scrollbar-width: auto; }
:where([data-starkit-scrollarea][data-size="lg"])::-webkit-scrollbar {
width: 0.875rem;
height: 0.875rem;
}
/* Fade — a mask dissolving the scroll edges (opt-in). The mask axis follows the
* scroll orientation; both fades apply on `both`. No colour → token-free. */
:where([data-starkit-scrollarea][data-fade][data-orientation="vertical"]) {
mask-image: linear-gradient(to bottom, transparent 0, black 1.25rem, black calc(100% - 1.25rem), transparent 100%);
}
:where([data-starkit-scrollarea][data-fade][data-orientation="horizontal"]) {
mask-image: linear-gradient(to right, transparent 0, black 1.25rem, black calc(100% - 1.25rem), transparent 100%);
}
:where([data-starkit-scrollarea][data-fade][data-orientation="both"]) {
mask-image:
linear-gradient(to bottom, transparent 0, black 1.25rem, black calc(100% - 1.25rem), transparent 100%),
linear-gradient(to right, transparent 0, black 1.25rem, black calc(100% - 1.25rem), transparent 100%);
mask-composite: intersect;
}
/* ─── Carousel (LAYOUT port — native scroll-snap, no engine) ───────────── */
:where([data-starkit-carousel]) {
position: relative;
display: flex;
flex-direction: column;
gap: var(--starplane-space-2, var(--star-space-2, 0.5rem));
}
:where([data-starkit-carousel-viewport]) {
overflow: hidden;
scroll-behavior: smooth;
}
:where([data-starkit-carousel][data-orientation="horizontal"] [data-starkit-carousel-viewport]) {
overflow-x: auto;
scroll-snap-type: x mandatory;
}
:where([data-starkit-carousel][data-orientation="vertical"] [data-starkit-carousel-viewport]) {
overflow-y: auto;
max-height: 20rem;
scroll-snap-type: y mandatory;
}
:where([data-starkit-carousel-viewport]):focus-visible {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
outline-offset: 2px;
}
/* hide the native scrollbar on the snapping strip */
:where([data-starkit-carousel-viewport])::-webkit-scrollbar {
display: none;
}
:where([data-starkit-carousel-track]) {
display: flex;
gap: var(--starplane-space-3, var(--star-space-3, 0.75rem));
}
:where([data-starkit-carousel][data-orientation="vertical"] [data-starkit-carousel-track]) {
flex-direction: column;
}
:where([data-starkit-carousel-slide]) {
flex: 0 0 100%;
min-width: 0;
scroll-snap-align: start;
}
:where([data-starkit-carousel-controls]) {
display: flex;
gap: var(--starplane-space-2, var(--star-space-2, 0.5rem));
justify-content: flex-end;
}
:where([data-starkit-carousel-prev]),
:where([data-starkit-carousel-next]) {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 9999px;
border: 1px solid var(--starplane-border-subtle, var(--star-border));
background: var(--starplane-surface-raised, var(--star-surface-raised));
color: var(--starplane-text, var(--star-text));
font-size: 1.125rem;
line-height: 1;
cursor: pointer;
transition: filter var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-carousel-prev]:hover),
:where([data-starkit-carousel-next]:hover) {
filter: brightness(1.06);
}
:where([data-starkit-carousel-prev]):focus-visible,
:where([data-starkit-carousel-next]):focus-visible {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
outline-offset: 2px;
}
:where([data-starkit-carousel-prev]):disabled,
:where([data-starkit-carousel-next]):disabled {
opacity: 0.4;
cursor: not-allowed;
}
:where([data-starkit-carousel-dots]) {
display: flex;
gap: var(--starplane-space-1, var(--star-space-1, 0.25rem));
justify-content: center;
}
:where([data-starkit-carousel-dot]) {
width: 0.5rem;
height: 0.5rem;
padding: 0;
border-radius: 9999px;
border: none;
background: var(--starplane-border-strong, var(--star-border));
opacity: 0.5;
cursor: pointer;
transition:
opacity var(--starplane-dur, var(--star-dur-base, 0.14s)) var(--starplane-ease-out, var(--star-ease, ease)),
background var(--starplane-dur, var(--star-dur-base, 0.14s)) var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-carousel-dot][data-active="true"]) {
opacity: 1;
background: var(--starplane-accent, var(--star-accent));
}
:where([data-starkit-carousel-dot]):focus-visible {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
outline-offset: 2px;
}
/* the polite live-region announcer is visually hidden */
:where([data-starkit-carousel-live]) {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* ─── ResizablePanelGroup (LAYOUT port — no engine) ───────────────────── */
:where([data-starkit-resizable]) {
display: flex;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
}
:where([data-starkit-resizable][data-direction="horizontal"]) {
flex-direction: row;
}
:where([data-starkit-resizable][data-direction="vertical"]) {
flex-direction: column;
}
:where([data-starkit-resizable-panel]) {
overflow: auto;
min-width: 0;
min-height: 0;
}
:where([data-starkit-resizable-handle]) {
position: relative;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
background: var(--starplane-border-subtle, var(--star-border));
touch-action: none;
user-select: none;
}
:where([data-starkit-resizable][data-direction="horizontal"] [data-starkit-resizable-handle]) {
width: 1px;
cursor: col-resize;
/* wider invisible hit-area for pointer grabs */
padding-inline: 3px;
margin-inline: -3px;
background-clip: content-box;
}
:where([data-starkit-resizable][data-direction="vertical"] [data-starkit-resizable-handle]) {
height: 1px;
cursor: row-resize;
padding-block: 3px;
margin-block: -3px;
background-clip: content-box;
}
:where([data-starkit-resizable-handle]):focus-visible {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
outline-offset: 1px;
}
:where([data-starkit-resizable-grip]) {
position: absolute;
border-radius: 9999px;
background: var(--starplane-border-strong, var(--star-border));
}
:where([data-starkit-resizable][data-direction="horizontal"] [data-starkit-resizable-grip]) {
width: 3px;
height: 1.5rem;
}
:where([data-starkit-resizable][data-direction="vertical"] [data-starkit-resizable-grip]) {
width: 1.5rem;
height: 3px;
}
/* Disabled — the splitter is locked: handles read inert and lose the resize
* cursor; the grip dims so the lock is visible (not colour-only — the cursor
* changes too). */
:where([data-starkit-resizable][data-disabled] [data-starkit-resizable-handle]) {
cursor: default;
}
:where([data-starkit-resizable][data-disabled] [data-starkit-resizable-grip]) {
opacity: 0.4;
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-carousel-viewport]) {
scroll-behavior: auto;
}
}
/* ===== primitives/overlays/overlays.css ===== */
/* overlays.css — STATES for the starkit overlay primitives.
*
* WHY THIS FILE EXISTS: the public starstyle API (`layout.*`, `recipes.recipe`)
* is a FLAT token-decl surface — it expresses prop→token mappings but exposes NO
* condition nesting, so :hover / :focus-visible / open/active transitions cannot
* be emitted through it (see STARKIT-AUTHORING.md §states). So states use the
* SAME co-located CSS-var fallback the extracted overlays/controls/forms use:
* every selector is :where([data-starkit-*]) (ZERO specificity, caller class
* always wins).
*
* ZERO RAW HEX / ZERO RAW SHADOW: every colour reads its `--starplane-*` alias
* and falls back to a canonical `--star-*` contract token; ELEVATION reads the
* theme's `--star-shadow-*` token and the modal SCRIM reads `--star-overlay`, so
* a dialog floats with win11's soft drop, macOS's vibrancy, or win98's flat
* frame purely by which theme is loaded — the renderer never changes. Tints
* derive from a token via `color-mix`. Only non-colour literals (durations,
* the spring curve, z-index, sizes) remain as package-default final fallbacks.
*
* This file is a co-located ASSET, NOT a TS import (no ambient .css module in
* this package's tsconfig) — the host includes it alongside the components.
*
* The base look (background / color / padding / radius / layout) comes from the
* starstyle layout output applied inline by the .tsx files — this adds ONLY the
* positioning surfaces, transitions, focus rings, scrims, and slide transforms
* the closed API can't express.
*/
/* ─── Tooltip ─────────────────────────────────────────────────────────── */
:where([data-starkit-tooltip-trigger]) {
display: inline-flex;
}
:where([data-starkit-tooltip]) {
position: relative;
z-index: var(--starplane-z-overlay, 1000);
max-width: 18rem;
border: 1px solid var(--starplane-border-subtle, var(--star-border));
box-shadow: var(--starplane-shadow-2, var(--star-shadow-2));
font: inherit;
font-size: 0.8125rem;
line-height: 1.3;
pointer-events: none;
transform-origin: var(--starkit-tooltip-origin, center bottom);
animation: starkit-overlay-pop-in var(--starplane-dur, var(--star-dur-fast, 0.14s))
var(--starplane-ease-out, var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)));
}
/* ─── Dropdown ────────────────────────────────────────────────────────── */
:where([data-starkit-dropdown-trigger]) {
display: inline-flex;
align-items: center;
gap: var(--starplane-space-1, var(--star-space-1, 0.25rem));
cursor: pointer;
border: 1px solid var(--starplane-border-subtle, var(--star-border));
transition: filter var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-dropdown-trigger]:hover) {
filter: brightness(1.06);
}
:where([data-starkit-dropdown-trigger]):focus-visible {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
outline-offset: 2px;
}
:where([data-starkit-dropdown]) {
display: inline-block;
}
/* ─── Combobox ────────────────────────────────────────────────────────── */
:where([data-starkit-combobox-input]) {
border: 1px solid var(--starplane-border-subtle, var(--star-border));
font: inherit;
min-width: 12rem;
}
:where([data-starkit-combobox-input]):focus-visible {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
outline-offset: 1px;
}
:where([data-starkit-combobox-list]) {
z-index: var(--starplane-z-overlay, 1000);
min-width: 12rem;
max-height: 16rem;
overflow-y: auto;
border: 1px solid var(--starplane-border-subtle, var(--star-border));
border-radius: var(--starplane-radius-base, var(--star-radius-control, 0.375rem));
background: var(--starplane-surface-raised, var(--star-surface-raised));
box-shadow: var(--starplane-shadow-3, var(--star-shadow-3));
animation: starkit-overlay-pop-in var(--starplane-dur, var(--star-dur-fast, 0.14s))
var(--starplane-ease-out, var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)));
}
:where([data-starkit-combobox-option]) {
padding: var(--starplane-space-2, var(--star-space-2, 0.5rem));
border-radius: var(--starplane-radius-sm, var(--star-radius-sm, 0.25rem));
cursor: pointer;
}
:where([data-starkit-combobox-option][data-active="true"]) {
background: color-mix(in srgb, var(--star-accent) 16%, transparent);
}
:where([data-starkit-combobox-option][data-selected="true"]) {
font-weight: 600;
}
:where([data-starkit-combobox-option][aria-disabled="true"]) {
opacity: 0.5;
cursor: not-allowed;
}
:where([data-starkit-combobox-empty]) {
padding: var(--starplane-space-2, var(--star-space-2, 0.5rem));
color: var(--starplane-text-muted, var(--star-text-muted));
font-size: 0.8125rem;
}
/* ─── Command / CommandPalette ────────────────────────────────────────── */
:where([data-starkit-command-root]) {
position: fixed;
inset: 0;
z-index: var(--starplane-z-overlay, 1000);
display: grid;
grid-template-rows: auto;
align-items: start;
justify-items: center;
padding: clamp(2rem, 12vh, 9rem) var(--starplane-space-4, var(--star-space-4, 1rem)) var(--starplane-space-4, var(--star-space-4, 1rem));
}
:where([data-starkit-command-backdrop]) {
position: fixed;
inset: 0;
background: var(--starplane-overlay, var(--star-overlay));
animation: starkit-overlay-fade-in var(--starplane-dur, var(--star-dur-base, 0.18s))
var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-command]) {
position: relative;
display: flex;
flex-direction: column;
width: min(40rem, 92vw);
max-height: min(28rem, 70vh);
overflow: hidden;
border: 1px solid var(--starplane-border-subtle, var(--star-border));
box-shadow: var(--starplane-shadow-3, var(--star-shadow-3));
/* rises + settles with a spring on the theme's slow tempo (GPU-safe) */
transform-origin: center top;
animation: starkit-overlay-pop-in var(--starplane-dur-slow, var(--star-dur-slow, 0.26s))
var(--starplane-ease-out, var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)));
}
:where([data-starkit-command]):focus-visible {
outline: none;
}
:where([data-starkit-command-input]) {
width: 100%;
border: none;
border-bottom: 1px solid var(--starplane-border-subtle, var(--star-border));
font: inherit;
font-size: 0.9375rem;
}
:where([data-starkit-command-input]):focus-visible {
outline: none;
}
:where([data-starkit-command-list]) {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: var(--starplane-space-1, var(--star-space-1, 0.25rem));
}
:where([data-starkit-command-option]) {
display: flex;
align-items: center;
gap: var(--starplane-space-2, var(--star-space-2, 0.5rem));
padding: var(--starplane-space-2, var(--star-space-2, 0.5rem));
border-radius: var(--starplane-radius-sm, var(--star-radius-sm, 0.25rem));
cursor: pointer;
transition: background var(--starplane-dur, var(--star-dur-fast, 0.12s))
var(--starplane-ease-out, var(--star-ease, ease));
}
/* keyboard focus IS the active descendant — highlight the focused option */
:where([data-starkit-command-option]:hover),
:where([data-starkit-command-option]):focus,
:where([data-starkit-command-option]):focus-visible {
background: color-mix(in srgb, var(--star-accent) 16%, transparent);
outline: none;
}
:where([data-starkit-command-option][data-danger="true"]) {
color: var(--starplane-danger, var(--star-danger));
}
:where([data-starkit-command-option][aria-disabled="true"]) {
opacity: 0.5;
cursor: not-allowed;
}
:where([data-starkit-command-label]) {
flex: 1 1 auto;
min-width: 0;
}
:where([data-starkit-command-hint]) {
flex: 0 0 auto;
margin-left: auto;
color: var(--starplane-text-muted, var(--star-text-muted));
font-size: 0.75rem;
letter-spacing: 0.02em;
}
:where([data-starkit-command-empty]) {
padding: var(--starplane-space-3, var(--star-space-3, 0.75rem));
color: var(--starplane-text-muted, var(--star-text-muted));
font-size: 0.8125rem;
text-align: center;
}
/* ─── ContextMenu (point-anchored, over the a11y substrate) ───────────── */
:where([data-starkit-contextmenu-menu]) {
/* position: fixed + left/top are applied inline at the pointer */
z-index: var(--starplane-z-overlay, 1000);
min-width: 11rem;
max-width: min(20rem, 92vw);
padding: var(--starplane-space-1, var(--star-space-1, 0.25rem));
border: 1px solid var(--starplane-border-subtle, var(--star-border));
border-radius: var(--starplane-radius-base, var(--star-radius-control, 0.375rem));
background: var(--starplane-surface-raised, var(--star-surface-raised));
box-shadow: var(--starplane-shadow-3, var(--star-shadow-3));
transform-origin: top left;
animation: starkit-overlay-pop-in var(--starplane-dur, var(--star-dur-fast, 0.14s))
var(--starplane-ease-out, var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)));
}
:where([data-starkit-contextmenu-item]) {
display: flex;
align-items: center;
gap: var(--starplane-space-2, var(--star-space-2, 0.5rem));
width: 100%;
padding: var(--starplane-space-2, var(--star-space-2, 0.5rem));
border: none;
border-radius: var(--starplane-radius-sm, var(--star-radius-sm, 0.25rem));
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
transition: background var(--starplane-dur, var(--star-dur-fast, 0.12s))
var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-contextmenu-item]:hover),
:where([data-starkit-contextmenu-item]):focus,
:where([data-starkit-contextmenu-item]):focus-visible {
background: color-mix(in srgb, var(--star-accent) 16%, transparent);
outline: none;
}
:where([data-starkit-contextmenu-item][data-danger="true"]) {
color: var(--starplane-danger, var(--star-danger));
}
:where([data-starkit-contextmenu-item]):disabled {
opacity: 0.5;
cursor: not-allowed;
}
:where([data-starkit-contextmenu-icon]) {
display: inline-flex;
flex: 0 0 auto;
}
:where([data-starkit-contextmenu-label]) {
flex: 1 1 auto;
min-width: 0;
}
/* ─── HoverCard (over the extracted Popover) ──────────────────────────── */
:where([data-starkit-hovercard-trigger]) {
display: inline-flex;
}
:where([data-starkit-hovercard]) {
z-index: var(--starplane-z-overlay, 1000);
max-width: 20rem;
border: 1px solid var(--starplane-border-subtle, var(--star-border));
box-shadow: var(--starplane-shadow-2, var(--star-shadow-2));
font: inherit;
/* interactive content (links/buttons) stays clickable — unlike Tooltip */
pointer-events: auto;
transform-origin: var(--starkit-hovercard-origin, center top);
animation: starkit-overlay-pop-in var(--starplane-dur, var(--star-dur-fast, 0.14s))
var(--starplane-ease-out, var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)));
}
/* ─── Drawer (over the extracted Sheet) ───────────────────────────────── */
:where([data-starkit-drawer]) {
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
}
/* Side-specific sizing hints; the slide animation + scrim are owned by Sheet's
* own styles.css (data-starplane-overlay-sheet). */
:where([data-starkit-drawer][data-side="left"]),
:where([data-starkit-drawer][data-side="right"]) {
width: min(22rem, 90vw);
height: 100%;
}
:where([data-starkit-drawer][data-side="top"]),
:where([data-starkit-drawer][data-side="bottom"]) {
width: 100%;
max-height: 80vh;
}
/* ─── Dialog ──────────────────────────────────────────────────────────── */
:where([data-starkit-dialog-root]) {
position: fixed;
inset: 0;
z-index: var(--starplane-z-overlay, 1000);
display: grid;
place-items: center;
padding: var(--starplane-space-4, var(--star-space-4, 1rem));
}
:where([data-starkit-dialog-backdrop]) {
position: fixed;
inset: 0;
/* the modal scrim is a theme token — vibrancy/acrylic/opaque per theme */
background: var(--starplane-overlay, var(--star-overlay));
animation: starkit-overlay-fade-in var(--starplane-dur, var(--star-dur-base, 0.18s))
var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-dialog]) {
position: relative;
width: min(32rem, 92vw);
max-height: 86vh;
overflow-y: auto;
border: 1px solid var(--starplane-border-subtle, var(--star-border));
box-shadow: var(--starplane-shadow-3, var(--star-shadow-3));
/* a real entrance: rises + settles with a spring, on the theme's slow tempo */
transform-origin: center;
animation: starkit-overlay-pop-in var(--starplane-dur-slow, var(--star-dur-slow, 0.26s))
var(--starplane-ease-out, var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)));
}
:where([data-starkit-dialog]):focus-visible {
outline: none;
}
:where([data-starkit-dialog-title]) {
margin: 0 0 var(--starplane-space-2, var(--star-space-2, 0.5rem));
font-size: 1.125rem;
font-weight: 600;
}
:where([data-starkit-dialog-description]) {
margin: 0 0 var(--starplane-space-3, var(--star-space-3, 0.75rem));
color: var(--starplane-text-secondary, var(--star-text-muted));
}
/* ─── Toast ───────────────────────────────────────────────────────────── */
:where([data-starkit-toast-host]) {
position: fixed;
bottom: var(--starplane-space-4, var(--star-space-4, 1rem));
right: var(--starplane-space-4, var(--star-space-4, 1rem));
z-index: var(--starplane-z-hud, 1100);
width: min(24rem, calc(100vw - 2rem));
pointer-events: none;
}
:where([data-starkit-toast]) {
display: flex;
align-items: flex-start;
gap: var(--starplane-space-3, var(--star-space-3, 0.75rem));
border: 1px solid var(--starplane-border-subtle, var(--star-border));
box-shadow: var(--starplane-shadow-2, var(--star-shadow-2));
pointer-events: auto;
/* a real entrance: slides in from the edge + settles with a spring overshoot */
transform-origin: right center;
animation: starkit-toast-in var(--starplane-dur-slow, var(--star-dur-slow, 0.26s))
var(--starplane-ease-out, var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)));
transition: transform var(--starplane-dur, var(--star-dur-fast, 0.12s))
var(--starplane-ease-out, var(--star-ease, ease));
}
/* nudge toward the pointer on hover — a small "I'm interactive" tell */
:where([data-starkit-toast]:hover) {
transform: translateX(-2px);
}
:where([data-starkit-toast][data-tone="ok"]) {
border-left: 3px solid var(--starplane-ok, var(--star-ok));
}
:where([data-starkit-toast][data-tone="warn"]) {
border-left: 3px solid var(--starplane-warn, var(--star-warn));
}
:where([data-starkit-toast][data-tone="danger"]) {
border-left: 3px solid var(--starplane-danger, var(--star-danger));
}
:where([data-starkit-toast][data-tone="info"]) {
border-left: 3px solid var(--starplane-info, var(--star-info));
}
:where([data-starkit-toast-message]) {
flex: 1 1 auto;
min-width: 0;
}
:where([data-starkit-toast-close]) {
flex: 0 0 auto;
cursor: pointer;
border: none;
background: transparent;
color: inherit;
font-size: 1.125rem;
line-height: 1;
opacity: 0.6;
transition: opacity var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-toast-close]:hover) {
opacity: 1;
}
:where([data-starkit-toast-close]):focus-visible {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
outline-offset: 1px;
}
/* ═══════════════════════════════════════════════════════════════════════
DEGREES OF FREEDOM — additive size / arrow / invalid / placement / position
options. Every selector is :where(...) (zero specificity) and keyed on a
data-attr that is ABSENT by default, so the base look is unchanged unless a
prop opts in.
═══════════════════════════════════════════════════════════════════════ */
/* Tooltip density + arrow */
:where([data-starkit-tooltip][data-size="sm"]) {
font-size: 0.75rem;
padding: var(--starplane-space-1, var(--star-space-1, 0.25rem));
}
:where([data-starkit-tooltip][data-arrow="true"]) {
overflow: visible;
}
:where([data-starkit-tooltip][data-arrow="true"])::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
background: inherit;
border: 1px solid var(--starplane-border-subtle, var(--star-border));
transform: rotate(45deg);
pointer-events: none;
}
:where([data-starkit-tooltip][data-arrow="true"][data-placement^="top"])::after {
bottom: -4px;
left: 14px;
border-left: none;
border-top: none;
}
:where([data-starkit-tooltip][data-arrow="true"][data-placement^="bottom"])::after {
top: -4px;
left: 14px;
border-right: none;
border-bottom: none;
}
/* Combobox density + invalid */
:where([data-starkit-combobox-input][data-size="sm"]) {
min-width: 9rem;
padding: var(--starplane-space-1, var(--star-space-1, 0.25rem));
font-size: 0.8125rem;
}
:where([data-starkit-combobox-input][data-size="lg"]) {
min-width: 16rem;
padding: var(--starplane-space-3, var(--star-space-3, 0.75rem));
font-size: 0.9375rem;
}
:where([data-starkit-combobox-list][data-size="sm"]) {
min-width: 9rem;
}
:where([data-starkit-combobox-list][data-size="lg"]) {
min-width: 16rem;
}
:where([data-starkit-combobox-input][data-invalid="true"]) {
border-color: var(--starplane-danger, var(--star-danger));
}
:where([data-starkit-combobox-input][data-invalid="true"]):focus-visible {
outline-color: var(--starplane-danger, var(--star-danger));
}
/* Dialog width + vertical placement */
:where([data-starkit-dialog][data-size="sm"]) {
width: min(24rem, 92vw);
}
:where([data-starkit-dialog][data-size="lg"]) {
width: min(48rem, 94vw);
}
:where([data-starkit-dialog][data-size="full"]) {
width: min(72rem, 96vw);
max-height: 94vh;
}
:where([data-starkit-dialog-root][data-placement="top"]) {
align-items: start;
padding-top: clamp(2rem, 10vh, 8rem);
}
/* Command width + vertical placement */
:where([data-starkit-command][data-size="sm"]) {
width: min(32rem, 92vw);
}
:where([data-starkit-command][data-size="lg"]) {
width: min(48rem, 94vw);
}
:where([data-starkit-command-root][data-placement="center"]) {
align-items: center;
padding-top: var(--starplane-space-4, var(--star-space-4, 1rem));
}
/* ContextMenu density + inset */
:where([data-starkit-contextmenu-menu][data-size="sm"] [data-starkit-contextmenu-item]) {
padding: var(--starplane-space-1, var(--star-space-1, 0.25rem)) var(--starplane-space-2, var(--star-space-2, 0.5rem));
font-size: 0.8125rem;
}
:where([data-starkit-contextmenu-menu][data-size="lg"] [data-starkit-contextmenu-item]) {
padding: var(--starplane-space-3, var(--star-space-3, 0.75rem));
font-size: 0.9375rem;
}
:where([data-starkit-contextmenu-menu][data-inset="true"] [data-starkit-contextmenu-item]) {
padding-left: calc(1.25rem + var(--starplane-space-2, var(--star-space-2, 0.5rem)) + var(--starplane-space-2, var(--star-space-2, 0.5rem)));
}
:where([data-starkit-contextmenu-menu][data-inset="true"] [data-starkit-contextmenu-item] [data-starkit-contextmenu-icon]) {
margin-left: calc(-1 * (1.25rem + var(--starplane-space-2, var(--star-space-2, 0.5rem))));
}
/* HoverCard density + arrow */
:where([data-starkit-hovercard][data-size="sm"]) {
max-width: 14rem;
}
:where([data-starkit-hovercard][data-size="lg"]) {
max-width: 28rem;
}
:where([data-starkit-hovercard][data-arrow="true"]) {
overflow: visible;
}
:where([data-starkit-hovercard][data-arrow="true"])::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
background: inherit;
border: 1px solid var(--starplane-border-subtle, var(--star-border));
transform: rotate(45deg);
pointer-events: none;
}
:where([data-starkit-hovercard][data-arrow="true"][data-placement^="bottom"])::after {
top: -4px;
left: 16px;
border-right: none;
border-bottom: none;
}
:where([data-starkit-hovercard][data-arrow="true"][data-placement^="top"])::after {
bottom: -4px;
left: 16px;
border-left: none;
border-top: none;
}
/* Toast density */
:where([data-starkit-toast][data-size="sm"]) {
gap: var(--starplane-space-2, var(--star-space-2, 0.5rem));
font-size: 0.8125rem;
}
/* Toast host corner/edge — override the default bottom-right pin. */
:where([data-starkit-toast-host][data-position="top-right"]) {
top: var(--starplane-space-4, var(--star-space-4, 1rem));
bottom: auto;
transform-origin: right top;
}
:where([data-starkit-toast-host][data-position="top-left"]) {
top: var(--starplane-space-4, var(--star-space-4, 1rem));
bottom: auto;
left: var(--starplane-space-4, var(--star-space-4, 1rem));
right: auto;
transform-origin: left top;
}
:where([data-starkit-toast-host][data-position="bottom-left"]) {
left: var(--starplane-space-4, var(--star-space-4, 1rem));
right: auto;
transform-origin: left bottom;
}
:where([data-starkit-toast-host][data-position="top-center"]) {
top: var(--starplane-space-4, var(--star-space-4, 1rem));
bottom: auto;
left: 50%;
right: auto;
transform: translateX(-50%);
}
:where([data-starkit-toast-host][data-position="bottom-center"]) {
left: 50%;
right: auto;
transform: translateX(-50%);
}
/* ─── Shared keyframes ────────────────────────────────────────────────── */
@keyframes starkit-overlay-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes starkit-overlay-pop-in {
from {
opacity: 0;
transform: translateY(6px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes starkit-toast-in {
from {
opacity: 0;
transform: translateX(110%) scale(0.98);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-tooltip]),
:where([data-starkit-dialog]),
:where([data-starkit-dialog-backdrop]),
:where([data-starkit-combobox-list]),
:where([data-starkit-command]),
:where([data-starkit-command-backdrop]),
:where([data-starkit-contextmenu-menu]),
:where([data-starkit-hovercard]),
:where([data-starkit-toast]) {
animation-duration: 0.01ms;
}
:where([data-starkit-toast]:hover) {
transform: none;
}
}
/* ─── AlertDialog (destructive-confirm variant of Dialog) ─────────────── */
:where([data-starkit-alertdialog-body]) {
display: flex;
flex-direction: column;
gap: var(--starplane-space-3, var(--star-space-3, 0.75rem));
}
:where([data-starkit-alertdialog-consequence]) {
margin: 0;
color: var(--starplane-text-secondary, var(--star-text-muted));
font-size: 0.875rem;
}
:where([data-starkit-alertdialog-actions]) {
display: flex;
justify-content: flex-end;
gap: var(--starplane-space-2, var(--star-space-2, 0.5rem));
margin-top: var(--starplane-space-2, var(--star-space-2, 0.5rem));
}
:where([data-starkit-alertdialog-cancel]),
:where([data-starkit-alertdialog-confirm]) {
padding: var(--starplane-space-2, var(--star-space-2, 0.5rem))
var(--starplane-space-4, var(--star-space-4, 1rem));
border-radius: var(--starplane-radius-base, var(--star-radius-control, 0.375rem));
border: 1px solid var(--starplane-border-subtle, var(--star-border));
font: inherit;
font-weight: 600;
cursor: pointer;
transition: filter var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-alertdialog-cancel]) {
background: var(--starplane-surface-raised, var(--star-surface-raised));
color: var(--starplane-text, var(--star-text));
}
:where([data-starkit-alertdialog-confirm][data-tone="danger"]) {
background: var(--starplane-danger, var(--star-danger));
border-color: var(--starplane-danger, var(--star-danger));
color: var(--starplane-danger-on, var(--star-text-on-accent, var(--star-surface)));
}
:where([data-starkit-alertdialog-confirm][data-tone="default"]) {
background: var(--starplane-accent, var(--star-accent));
border-color: var(--starplane-accent, var(--star-accent));
color: var(--starplane-text-on-accent, var(--star-text-on-accent, var(--star-surface)));
}
:where([data-starkit-alertdialog-cancel]:hover),
:where([data-starkit-alertdialog-confirm]:hover) {
filter: brightness(1.06);
}
:where([data-starkit-alertdialog-cancel]):focus-visible,
:where([data-starkit-alertdialog-confirm]):focus-visible {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
outline-offset: 2px;
}
/* ===== primitives/forms/forms.css ===== */
/* forms.css — STATES + chrome for the starkit forms primitives.
*
* WHY THIS FILE EXISTS: the public starstyle API (`layout.*`, `recipes.recipe`,
* `ss`) is a FLAT token-decl surface — it can map a property→token but exposes
* NO condition nesting, so :hover / :focus-visible / :disabled (and the native
* date/time picker chrome) cannot be emitted through it. So interactive state
* uses the SAME co-located CSS-var fallback the extracted controls/forms/overlays
* use: every selector is :where([data-starkit-*]) (ZERO specificity, a caller's
* own class always wins without !important).
*
* ZERO RAW HEX: every colour reads its `--starplane-*` alias and falls back to a
* canonical `--star-*` contract token; focus rings resolve through the dedicated
* `--star-focus-ring` token — so the form chrome reskins under all 7 themes by
* token swap alone. Only durations/lengths remain as literal final fallbacks.
*
* The base look (layout / token padding / radius / colors) comes from the
* starstyle layout+recipe output applied inline by each component — this file
* adds ONLY what the closed API can't: transitions, focus rings, hover/disabled
* deltas, and the native date/time control chrome.
*
* This file is a co-located ASSET, not a TS import (no ambient `.css` module
* declaration in this package's tsconfig). The host includes it, exactly like
* controls/styles.css and forms/styles.css.
*/
/* ── FormField ─────────────────────────────────────────────────────────── */
:where([data-starkit-form-field]) {
display: flex;
flex-direction: column;
}
/* ── FormGroup ─────────────────────────────────────────────────────────── */
:where([data-starkit-form-group]) {
display: flex;
flex-direction: column;
}
:where([data-starkit-form-group-title]) {
margin: 0;
font-family: var(--starplane-font-display, var(--starplane-font, var(--star-font-ui, system-ui, sans-serif)));
font-weight: 600;
color: var(--starplane-text-primary, var(--star-text));
}
:where([data-starkit-form-group-description]) {
margin: 0;
color: var(--starplane-text-secondary, var(--star-text-muted));
}
/* ── Fieldset / Legend ─────────────────────────────────────────────────── */
:where([data-starkit-fieldset]) {
min-inline-size: 0; /* fieldsets default to min-content; reset so flex children shrink */
border: 1px solid var(--starplane-border-subtle, var(--star-border));
}
:where([data-starkit-fieldset][data-disabled="true"]) {
opacity: 0.55;
}
:where([data-starkit-legend]) {
font-family: var(--starplane-font-display, var(--starplane-font, var(--star-font-ui, system-ui, sans-serif)));
font-weight: 600;
color: var(--starplane-text-primary, var(--star-text));
}
/* ── FormActions ───────────────────────────────────────────────────────── */
:where([data-starkit-form-actions]) {
flex-wrap: wrap;
}
/* ── DateInput / TimeInput ─────────────────────────────────────────────── */
:where([data-starkit-date-input], [data-starkit-time-input]) {
font: inherit;
font-family: var(--starplane-font, var(--star-font-ui, system-ui, sans-serif));
color: var(--starplane-text-primary, var(--star-text));
border: 1px solid var(--starplane-border, var(--star-border));
width: 100%;
box-sizing: border-box;
transition:
border-color var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease)),
box-shadow var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-date-input]:hover:not(:disabled)),
:where([data-starkit-time-input]:hover:not(:disabled)) {
border-color: var(--starplane-border-strong, var(--star-border-strong));
}
:where([data-starkit-date-input]):focus-visible,
:where([data-starkit-time-input]):focus-visible {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
outline-offset: 1px;
border-color: var(--starplane-accent, var(--star-accent));
}
:where([data-starkit-date-input][aria-invalid="true"]),
:where([data-starkit-time-input][aria-invalid="true"]) {
border-color: var(--starplane-danger, var(--star-danger));
}
:where([data-starkit-date-input]:disabled),
:where([data-starkit-time-input]:disabled) {
cursor: not-allowed;
opacity: 0.55;
}
/* native picker indicator tint */
:where([data-starkit-date-input])::-webkit-calendar-picker-indicator,
:where([data-starkit-time-input])::-webkit-calendar-picker-indicator {
cursor: pointer;
filter: var(--starplane-picker-filter, none);
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-date-input]),
:where([data-starkit-time-input]) {
transition-duration: 0.01ms;
}
}
/* ── InputOTP ──────────────────────────────────────────────────────────── */
:where([data-starkit-input-otp]) {
position: relative;
display: inline-flex;
}
:where([data-starkit-input-otp][aria-disabled="true"]) {
opacity: 0.55;
}
/* the hidden input owns the caret + keyboard; it overlays the slots so a click
* or tap anywhere focuses it, but is otherwise invisible. */
:where([data-starkit-input-otp-hidden]) {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: transparent;
caret-color: transparent;
outline: none;
opacity: 0;
cursor: text;
z-index: 1;
}
:where([data-starkit-input-otp-hidden]:disabled) {
cursor: not-allowed;
}
:where([data-starkit-input-otp-slots]) {
display: inline-flex;
align-items: center;
gap: var(--starplane-space-1, var(--star-space-1, 0.25rem));
}
:where([data-starkit-input-otp-slot]) {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 2.5rem;
block-size: 2.75rem;
font-family: var(--starplane-font-mono, var(--star-font-mono, ui-monospace, monospace));
font-size: 1.125rem;
color: var(--starplane-text-primary, var(--star-text));
background: var(--starplane-surface-sunken, var(--star-surface-sunken, transparent));
border: 1px solid var(--starplane-border, var(--star-border));
box-sizing: border-box;
transition:
border-color var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease)),
box-shadow var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-input-otp-slot]:first-child) {
border-start-start-radius: var(--starplane-radius-base, var(--star-radius-base, 0));
border-end-start-radius: var(--starplane-radius-base, var(--star-radius-base, 0));
}
:where([data-starkit-input-otp-slot]:last-child) {
border-start-end-radius: var(--starplane-radius-base, var(--star-radius-base, 0));
border-end-end-radius: var(--starplane-radius-base, var(--star-radius-base, 0));
}
:where([data-starkit-input-otp-slot][data-active="true"]) {
border-color: var(--starplane-accent, var(--star-accent));
box-shadow: 0 0 0 2px var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
z-index: 1;
}
:where([data-starkit-input-otp-slot][data-filled="true"]) {
border-color: var(--starplane-border-strong, var(--star-border-strong));
}
/* ── InputGroup ────────────────────────────────────────────────────────── */
:where([data-starkit-input-group]) {
display: flex;
align-items: center;
inline-size: 100%;
min-inline-size: 0;
box-sizing: border-box;
border: 1px solid var(--starplane-border, var(--star-border));
border-radius: var(--starplane-radius-base, var(--star-radius-base, 0));
background: var(--starplane-surface-sunken, var(--star-surface-sunken, transparent));
transition:
border-color var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease)),
box-shadow var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-input-group]:has([data-align="block-start"])),
:where([data-starkit-input-group]:has([data-align="block-end"])) {
flex-direction: column;
align-items: stretch;
block-size: auto;
}
:where([data-starkit-input-group]:hover) {
border-color: var(--starplane-border-strong, var(--star-border-strong));
}
:where([data-starkit-input-group]:focus-within) {
border-color: var(--starplane-accent, var(--star-accent));
box-shadow: 0 0 0 2px var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
}
:where([data-starkit-input-group][data-invalid="true"]) {
border-color: var(--starplane-danger, var(--star-danger));
}
:where([data-starkit-input-group][data-disabled="true"]) {
opacity: 0.55;
cursor: not-allowed;
}
:where([data-starkit-input-group-control]) {
flex: 1 1 auto;
min-inline-size: 0;
font: inherit;
font-family: var(--starplane-font, var(--star-font-ui, system-ui, sans-serif));
color: var(--starplane-text-primary, var(--star-text));
background: transparent;
border: 0;
outline: none;
padding: var(--starplane-space-2, var(--star-space-2, 0.5rem));
}
:where([data-starkit-input-group-addon]) {
display: inline-flex;
align-items: center;
gap: var(--starplane-space-2, var(--star-space-2, 0.5rem));
color: var(--starplane-text-secondary, var(--star-text-muted));
padding-inline: var(--starplane-space-3, var(--star-space-3, 0.75rem));
user-select: none;
}
:where([data-starkit-input-group-addon][data-align="inline-start"]) { order: 0; }
:where([data-starkit-input-group-addon][data-align="inline-end"]) { order: 9; }
:where([data-starkit-input-group-addon][data-align="block-start"]),
:where([data-starkit-input-group-addon][data-align="block-end"]) {
inline-size: 100%;
justify-content: flex-start;
padding-block: var(--starplane-space-2, var(--star-space-2, 0.5rem));
}
:where([data-starkit-input-group-text]) {
display: inline-flex;
align-items: center;
gap: var(--starplane-space-2, var(--star-space-2, 0.5rem));
color: var(--starplane-text-secondary, var(--star-text-muted));
}
:where([data-starkit-input-group-button]) {
display: inline-flex;
align-items: center;
gap: var(--starplane-space-1, var(--star-space-1, 0.25rem));
font: inherit;
cursor: pointer;
color: var(--starplane-text-primary, var(--star-text));
background: transparent;
border: 1px solid transparent;
border-radius: var(--starplane-radius-sm, var(--star-radius-sm, 0));
padding: var(--starplane-space-1, var(--star-space-1, 0.25rem)) var(--starplane-space-2, var(--star-space-2, 0.5rem));
}
:where([data-starkit-input-group-button]:hover:not(:disabled)) {
background: var(--starplane-surface-raised, var(--star-surface-raised, transparent));
}
:where([data-starkit-input-group-button]:disabled) {
cursor: not-allowed;
opacity: 0.55;
}
/* ── Calendar ──────────────────────────────────────────────────────────── */
:where([data-starkit-calendar]) {
display: inline-flex;
flex-direction: column;
gap: var(--starplane-space-2, var(--star-space-2, 0.5rem));
inline-size: max-content;
font-family: var(--starplane-font, var(--star-font-ui, system-ui, sans-serif));
color: var(--starplane-text-primary, var(--star-text));
}
:where([data-starkit-calendar-header]) {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--starplane-space-2, var(--star-space-2, 0.5rem));
}
:where([data-starkit-calendar-caption]) {
font-weight: 600;
color: var(--starplane-text-primary, var(--star-text));
}
:where([data-starkit-calendar-nav]) {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 2rem;
block-size: 2rem;
cursor: pointer;
color: var(--starplane-text-secondary, var(--star-text-muted));
background: transparent;
border: 1px solid var(--starplane-border, var(--star-border));
border-radius: var(--starplane-radius-base, var(--star-radius-base, 0));
}
:where([data-starkit-calendar-nav]:hover:not(:disabled)) {
color: var(--starplane-text-primary, var(--star-text));
border-color: var(--starplane-border-strong, var(--star-border-strong));
}
:where([data-starkit-calendar-nav]:disabled) {
cursor: not-allowed;
opacity: 0.45;
}
:where([data-starkit-calendar-weekdays]),
:where([data-starkit-calendar-week]) {
display: grid;
grid-template-columns: repeat(7, 2.25rem);
}
:where([data-starkit-calendar-weekday]) {
display: inline-flex;
align-items: center;
justify-content: center;
block-size: 2rem;
font-size: 0.75rem;
color: var(--starplane-text-secondary, var(--star-text-muted));
user-select: none;
}
:where([data-starkit-calendar-cell]) {
display: inline-flex;
align-items: center;
justify-content: center;
}
:where([data-starkit-calendar-day]) {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 2.25rem;
block-size: 2.25rem;
font: inherit;
cursor: pointer;
color: var(--starplane-text-primary, var(--star-text));
background: transparent;
border: 1px solid transparent;
border-radius: var(--starplane-radius-base, var(--star-radius-base, 0));
transition:
background var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease)),
color var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-calendar-day]:hover:not(:disabled)) {
background: var(--starplane-surface-raised, var(--star-surface-raised, transparent));
}
:where([data-starkit-calendar-day]):focus-visible {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
outline-offset: 1px;
}
:where([data-starkit-calendar-day][data-outside="true"]) {
color: var(--starplane-text-secondary, var(--star-text-muted));
opacity: 0.6;
}
:where([data-starkit-calendar-day][data-today="true"]) {
border-color: var(--starplane-accent, var(--star-accent));
}
/* selected day: the SOLID accent fill takes the AA-paired CTA ramp point
* (--star-accent-cta), NOT plain --star-accent — the latter failed on-accent AA
* on the dark face (measured 2.87:1). Text = --star-accent-on, the token MEASURED
* to pair with the CTA fill (white on dark → 5.3:1). Identical fill+ink pairing
* to Button primary (src/controls/styles.css) from the dark-face sweep. */
:where([data-starkit-calendar-day][data-selected="true"]) {
background: var(--starplane-accent-cta, var(--star-accent-cta, var(--star-accent)));
color: var(--starplane-accent-on, var(--star-accent-on, #ffffff));
border-color: var(--starplane-accent-cta, var(--star-accent-cta, var(--star-accent)));
}
:where([data-starkit-calendar-day]:disabled) {
cursor: not-allowed;
opacity: 0.4;
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-input-otp-slot]),
:where([data-starkit-input-group]),
:where([data-starkit-calendar-day]) {
transition-duration: 0.01ms;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
DEGREES OF FREEDOM — additive per-component options (data-attr driven).
Every colour reads a --starplane-*/--star-* chain; only lengths are literal.
All selectors are :where(...) (zero specificity — a caller class still wins).
Layout axes handled through the starstyle structure (direction/gap/padding)
are NOT re-declared here; this block adds only what the closed API can't.
═══════════════════════════════════════════════════════════════════════════ */
/* ── FormActions: fullWidth (equal actions) + sticky footer ──────────────── */
:where([data-starkit-form-actions][data-fullwidth="true"]) > * {
flex: 1 1 0;
}
:where([data-starkit-form-actions][data-sticky="true"]) {
position: sticky;
bottom: 0;
z-index: 1;
background: var(--starplane-surface-base, var(--star-surface, var(--star-surface-raised, transparent)));
padding-block: var(--starplane-space-2, var(--star-space-2, 0.5rem));
}
/* ── FormGroup: heading divider + horizontal (label-beside-fields) split ─── */
:where([data-starkit-form-group][data-divider="true"]) :where([data-starkit-form-group-heading]) {
border-block-end: 1px solid var(--starplane-border-subtle, var(--star-border));
padding-block-end: var(--starplane-space-2, var(--star-space-2, 0.5rem));
}
:where([data-starkit-form-group][data-orientation="horizontal"]) :where([data-starkit-form-group-heading]) {
flex: 0 0 auto;
min-inline-size: 12rem;
}
/* ── Fieldset: border tone ───────────────────────────────────────────────── */
:where([data-starkit-fieldset][data-tone="accent"]) {
border-color: var(--starplane-accent, var(--star-accent));
}
:where([data-starkit-fieldset][data-tone="warn"]) {
border-color: var(--starplane-warn, var(--star-warn, var(--star-accent)));
}
:where([data-starkit-fieldset][data-tone="danger"]) {
border-color: var(--starplane-danger, var(--star-danger));
}
/* ── Legend: size + tone + required marker ───────────────────────────────── */
:where([data-starkit-legend][data-size="sm"]) {
font-size: 0.8125rem;
}
:where([data-starkit-legend][data-size="lg"]) {
font-size: 1.125rem;
}
:where([data-starkit-legend][data-tone="muted"]) {
color: var(--starplane-text-secondary, var(--star-text-muted));
}
:where([data-starkit-legend][data-tone="accent"]) {
color: var(--starplane-accent, var(--star-accent));
}
:where([data-starkit-legend][data-tone="danger"]) {
color: var(--starplane-danger, var(--star-danger));
}
:where([data-starkit-legend-required]) {
margin-inline-start: 0.125rem;
color: var(--starplane-danger, var(--star-danger));
}
/* ── FormField: type-scale cascade + inset card ──────────────────────────── */
:where([data-starkit-form-field][data-size="sm"]) {
font-size: 0.8125rem;
}
:where([data-starkit-form-field][data-size="lg"]) {
font-size: 1.0625rem;
}
:where([data-starkit-form-field][data-inset="true"]) {
padding: var(--starplane-space-3, var(--star-space-3, 0.75rem));
border: 1px solid var(--starplane-border-subtle, var(--star-border));
border-radius: var(--starplane-radius-base, var(--star-radius-base, 0));
}
/* ── DateInput / TimeInput: size + fullWidth override ─────────────────────── */
:where([data-starkit-date-input][data-size="sm"]),
:where([data-starkit-time-input][data-size="sm"]) {
font-size: 0.8125rem;
}
:where([data-starkit-date-input][data-size="lg"]),
:where([data-starkit-time-input][data-size="lg"]) {
font-size: 1.0625rem;
}
:where([data-starkit-date-input][data-fullwidth="false"]),
:where([data-starkit-time-input][data-fullwidth="false"]) {
width: auto;
}
/* ── InputOTP: size + separator ──────────────────────────────────────────── */
:where([data-starkit-input-otp][data-size="sm"]) :where([data-starkit-input-otp-slot]) {
inline-size: 2rem;
block-size: 2.25rem;
font-size: 0.9375rem;
}
:where([data-starkit-input-otp][data-size="lg"]) :where([data-starkit-input-otp-slot]) {
inline-size: 3rem;
block-size: 3.25rem;
font-size: 1.375rem;
}
:where([data-starkit-input-otp-separator]) {
display: inline-flex;
align-items: center;
user-select: none;
padding-inline: var(--starplane-space-1, var(--star-space-1, 0.25rem));
color: var(--starplane-text-secondary, var(--star-text-muted));
}
/* ── InputGroup: size + radius + fullWidth override ──────────────────────── */
:where([data-starkit-input-group][data-size="sm"]) :where([data-starkit-input-group-control]) {
padding: var(--starplane-space-1, var(--star-space-1, 0.25rem)) var(--starplane-space-2, var(--star-space-2, 0.5rem));
font-size: 0.8125rem;
}
:where([data-starkit-input-group][data-size="lg"]) :where([data-starkit-input-group-control]) {
padding: var(--starplane-space-3, var(--star-space-3, 0.75rem));
font-size: 1.0625rem;
}
:where([data-starkit-input-group][data-radius="sm"]) {
border-radius: var(--starplane-radius-sm, var(--star-radius-sm, 0));
}
:where([data-starkit-input-group][data-radius="lg"]) {
border-radius: var(--starplane-radius-lg, var(--star-radius-lg, 0.5rem));
}
:where([data-starkit-input-group][data-radius="full"]) {
border-radius: var(--starplane-radius-full, var(--star-radius-full, 9999px));
}
:where([data-starkit-input-group][data-fullwidth="false"]) {
inline-size: auto;
}
/* ── Calendar: size + fullWidth (fractional columns) ─────────────────────── */
:where([data-starkit-calendar][data-size="sm"]) :where([data-starkit-calendar-weekdays]),
:where([data-starkit-calendar][data-size="sm"]) :where([data-starkit-calendar-week]) {
grid-template-columns: repeat(7, 1.875rem);
}
:where([data-starkit-calendar][data-size="sm"]) :where([data-starkit-calendar-day]) {
inline-size: 1.875rem;
block-size: 1.875rem;
font-size: 0.8125rem;
}
:where([data-starkit-calendar][data-size="lg"]) :where([data-starkit-calendar-weekdays]),
:where([data-starkit-calendar][data-size="lg"]) :where([data-starkit-calendar-week]) {
grid-template-columns: repeat(7, 2.75rem);
}
:where([data-starkit-calendar][data-size="lg"]) :where([data-starkit-calendar-day]) {
inline-size: 2.75rem;
block-size: 2.75rem;
font-size: 1.0625rem;
}
:where([data-starkit-calendar][data-fullwidth="true"]) {
inline-size: 100%;
}
:where([data-starkit-calendar][data-fullwidth="true"]) :where([data-starkit-calendar-weekdays]),
:where([data-starkit-calendar][data-fullwidth="true"]) :where([data-starkit-calendar-week]) {
grid-template-columns: repeat(7, 1fr);
}
:where([data-starkit-calendar][data-fullwidth="true"]) :where([data-starkit-calendar-day]) {
inline-size: 100%;
}
/* ===== primitives/navigation/navigation.css ===== */
/* navigation.css — STATES for the starkit navigation primitives.
*
* WHY THIS FILE EXISTS: the public starstyle API (`layout.*`, `recipes.recipe`,
* `ss`) is a FLAT token-decl surface — it can map property→token but exposes NO
* condition nesting, so :hover / :focus-visible / :disabled / state deltas
* cannot be emitted through it. So states use the SAME co-located CSS-var
* fallback the reference Button + extracted controls/overlays use:
* - every selector is :where([data-starkit-*]) → ZERO specificity, so a
* caller's own class always wins without !important;
* - ZERO RAW HEX: every colour reads its `--starplane-*` alias and falls back
* to a canonical `--star-*` contract token; focus rings resolve through
* `--star-focus-ring`; tinted hover/active fills derive from a token via
* `color-mix`, so they track the THEME's accent on swap.
* The base look (layout / token padding / token colors) comes from the starstyle
* layout output applied inline by each .tsx — this file adds ONLY what the
* closed API can't: transitions, the focus ring, hover/active/disabled deltas,
* the current/done/active state styling, and the collapsed-rail visual.
*
* This CSS is a co-located ASSET, NOT a TS import (there is no ambient `.css`
* module declaration in this package's tsconfig), exactly like
* `_reference/reference.css` and `controls/styles.css`.
*/
/* ---- shared interactive affordance for nav buttons ---- */
:where(
[data-starkit-disclosure-trigger],
[data-starkit-accordion-trigger],
[data-starkit-sidebar-item],
[data-starkit-pagination-prev],
[data-starkit-pagination-next],
[data-starkit-pagination-page]
) {
cursor: pointer;
border: 1px solid transparent;
background: transparent;
color: var(--starplane-text-primary, var(--star-text, inherit));
font: inherit;
border-radius: var(--starplane-radius-base, var(--star-radius-control, 6px));
padding: var(--starplane-space-2, var(--star-space-2, 0.5rem))
var(--starplane-space-3, var(--star-space-3, 0.75rem));
transition:
background var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease)),
filter var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease));
}
:where(
[data-starkit-disclosure-trigger]:hover:not([aria-disabled="true"]),
[data-starkit-accordion-trigger]:hover:not([aria-disabled="true"]),
[data-starkit-sidebar-item]:hover:not([data-disabled="true"]),
[data-starkit-pagination-prev]:hover:not([aria-disabled="true"]),
[data-starkit-pagination-next]:hover:not([aria-disabled="true"]),
[data-starkit-pagination-page]:hover:not([aria-disabled="true"])
) {
background: color-mix(in srgb, var(--star-text) 7%, transparent);
}
:where(
[data-starkit-disclosure-trigger],
[data-starkit-accordion-trigger],
[data-starkit-sidebar-item],
[data-starkit-pagination-prev],
[data-starkit-pagination-next],
[data-starkit-pagination-page]
):focus-visible {
outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
outline-offset: 2px;
}
:where(
[data-starkit-disclosure-trigger][aria-disabled="true"],
[data-starkit-accordion-trigger][aria-disabled="true"],
[data-starkit-sidebar-item][data-disabled="true"],
[data-starkit-pagination-prev][aria-disabled="true"],
[data-starkit-pagination-next][aria-disabled="true"]
) {
cursor: not-allowed;
opacity: 0.5;
pointer-events: none;
}
/* ---- Disclosure / Accordion ---- */
:where([data-starkit-disclosure-trigger], [data-starkit-accordion-trigger]) {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
text-align: left;
}
:where([data-starkit-disclosure-region][data-open="false"]),
:where([data-starkit-accordion-region][data-open="false"]) {
display: none;
}
/* ---- Navbar ---- */
:where([data-starkit-navbar]) {
border-bottom: 1px solid var(--starplane-border-subtle, var(--star-border));
}
/* ---- Sidebar ---- */
:where([data-starkit-sidebar-item]) {
display: block;
width: 100%;
text-align: left;
}
/* Active item: an accent-tinted fill + an accent rail on the leading edge so the
* current location reads at a glance without a heavy block of colour. */
:where([data-starkit-sidebar-item][data-active="true"]) {
/* Lighter tint (6%) so accentInk clears AA on the cream face (8% held 4.43);
* the accent rail still carries the active colour. */
background: color-mix(in srgb, var(--star-accent) 6%, var(--star-surface));
color: var(--starplane-accent-strong, var(--star-accent-strong));
font-weight: 600;
box-shadow: inset 2px 0 0 0 var(--starplane-accent, var(--star-accent));
}
:where([data-starkit-sidebar][data-collapsed="true"]) {
width: var(--starplane-sidebar-collapsed-w, 0);
overflow: hidden;
}
/* ---- Pagination ---- */
/* Current page is a solid CTA-class fill under on-accent (white) text, so it
* uses the AA-safe CTA fill, not the brighter accent (white was 2.87 on the
* dark accent). */
:where([data-starkit-pagination-page][data-current="true"]) {
background: var(--star-accent-cta, var(--starplane-accent, var(--star-accent)));
color: var(--starplane-accent-on, var(--star-accent-on));
font-weight: 600;
}
/* ---- StepperNav ---- */
:where([data-starkit-stepper-list]) {
display: flex;
align-items: center;
gap: var(--starplane-space-3, var(--star-space-3, 0.75rem));
margin: 0;
padding: 0;
list-style: none;
}
:where([data-starkit-stepper-step]) {
display: inline-flex;
align-items: center;
gap: var(--starplane-space-2, var(--star-space-2, 0.5rem));
}
:where([data-starkit-stepper-marker]) {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 1.5rem;
block-size: 1.5rem;
border-radius: var(--starplane-radius-full, 999px);
border: 1px solid var(--starplane-border, var(--star-border));
font-size: 0.8125rem;
line-height: 1;
transition: background var(--starplane-dur, var(--star-dur-base, 0.14s))
var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-stepper-step][data-state="done"] [data-starkit-stepper-marker]) {
background: var(--starplane-ok, var(--star-ok));
color: var(--starplane-accent-on, var(--star-accent-on));
border-color: transparent;
}
:where([data-starkit-stepper-step][data-state="current"] [data-starkit-stepper-marker]) {
/* CTA-class fill under white marker text — AA-safe fill, not bright accent. */
background: var(--star-accent-cta, var(--starplane-accent, var(--star-accent)));
color: var(--starplane-accent-on, var(--star-accent-on));
border-color: transparent;
/* the active step pulses a token-tinted halo so the eye lands on it */
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--star-accent) 22%, transparent);
}
:where([data-starkit-stepper-step][data-state="upcoming"]) {
color: var(--starplane-text-muted, var(--star-text-muted));
}
/* ---- Menubar ----
* The Menubar primitive renders bare