.
* open/close animation via ::details-content + interpolate-size,
* graceful (instant) where unsupported.
* ------------------------------------------------------------------ */
:where(details) {
border-block-end: 1px solid var(--color-border);
}
:where(summary) {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
padding-block: var(--space-md);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
list-style: none;
&:hover {
text-decoration: underline;
}
/* chevron — masked so it rides currentColor-ish tokens */
&::after {
content: "";
inline-size: 1rem;
block-size: 1rem;
flex-shrink: 0;
background: var(--color-text-muted);
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
center / contain no-repeat;
transition: rotate 0.2s;
}
}
:where(summary)::-webkit-details-marker {
display: none;
}
:where(details[open]) > :where(summary)::after {
rotate: 180deg;
}
/* content: everything after the summary */
:where(details) > :where(:not(summary)) {
margin-block: 0 var(--space-md);
font-size: 0.875rem;
}
:where(details)::details-content {
block-size: 0;
overflow-y: clip;
transition:
block-size 0.2s,
content-visibility 0.2s allow-discrete;
}
:where(details[open])::details-content {
block-size: auto;
}
/* --- popover: panels + menus -------------------------------------- *
* toggle/light-dismiss/Esc are the browser's (popovertarget). anchored
* to the invoker where anchor positioning exists; elsewhere the UA's
* centered fallback applies. items close declaratively via
* popovertarget/command — zero JS throughout.
* ------------------------------------------------------------------ */
:where([popover]) {
border: 1px solid color-mix(in oklch, var(--color-text) 12%, transparent);
border-radius: var(--radius-md);
background: var(--color-surface-overlay);
color: var(--color-text);
padding: var(--space-sm);
inline-size: max-content;
max-inline-size: min(18rem, calc(100vw - 2rem));
font-size: 0.75rem;
line-height: 1.6;
box-shadow: 0 8px 24px light-dark(oklch(0 0 0 / 0.15), oklch(0 0 0 / 0.5));
opacity: 1;
scale: 1;
}
/* enter animates; close is instant (house rule for transient layers) */
:where([popover]:popover-open) {
transition:
opacity 0.1s,
scale 0.1s,
overlay 0.1s allow-discrete,
display 0.1s allow-discrete;
}
@starting-style {
:where([popover]:popover-open) {
opacity: 0;
scale: 0.95;
}
}
/* anchor to the invoker where the platform can */
@supports (position-area: block-end) {
:where([popover]) {
position-area: block-end span-inline-end;
position-try-fallbacks: flip-block, flip-inline;
margin: var(--space-2xs);
}
}
/* menu: a popover of buttons/links; separators are plain hrs */
:where([popover].menu) {
padding: var(--space-2xs);
min-inline-size: 8rem;
& > :where(button, a) {
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--space-xs);
inline-size: 100%;
block-size: auto;
padding: var(--space-xs);
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text);
font-size: 0.75rem;
font-weight: 400;
text-align: start;
text-decoration: none;
cursor: default;
/* :not() guards mirror the base button states — an override of
state must match the state's specificity (house rule) */
&:hover:not(:disabled, [aria-disabled="true"]),
&:focus-visible:not(:disabled, [aria-disabled="true"]) {
background: var(--color-accent);
color: var(--color-on-accent);
outline: none; /* the highlight is the focus indicator here */
}
&:active:not(:disabled, [aria-disabled="true"]) {
background: var(--color-accent);
color: var(--color-on-accent);
}
&.danger {
color: var(--color-danger-text);
&:hover:not(:disabled, [aria-disabled="true"]),
&:active:not(:disabled, [aria-disabled="true"]),
&:focus-visible:not(:disabled, [aria-disabled="true"]) {
background: var(--color-danger-surface);
color: var(--color-danger-text);
}
}
&:disabled {
opacity: 0.5;
background: transparent;
color: var(--color-text);
}
}
& > :where(hr) {
margin-block: var(--space-2xs);
margin-inline: calc(-1 * var(--space-2xs));
border-block-start-color: var(--color-border);
}
}
/* --- combobox: m-combobox + combobox.js (Tier 2) ------------------ *
* without the module: a native datalist — functional autocomplete.
* with it: styled listbox, filtering, active-descendant keys.
* positioned within the wrapper (no top layer) so it works everywhere.
* ------------------------------------------------------------------ */
:where(m-combobox) {
display: block;
position: relative;
}
:where(m-combobox) > :where([role="listbox"]) {
position: absolute;
inset-block-start: calc(100% + var(--space-2xs));
inset-inline: 0;
z-index: 50;
max-block-size: 15rem;
overflow-y: auto;
padding: var(--space-2xs);
border: 1px solid color-mix(in oklch, var(--color-text) 12%, transparent);
border-radius: var(--radius-md);
background: var(--color-surface-overlay);
box-shadow: 0 8px 24px light-dark(oklch(0 0 0 / 0.15), oklch(0 0 0 / 0.5));
}
:where(m-combobox) :where([role="option"]) {
padding: var(--space-xs);
border-radius: var(--radius-sm);
font-size: 0.875rem;
cursor: default;
&:hover,
&[aria-selected="true"] {
background: var(--color-accent);
color: var(--color-on-accent);
}
}
/* --- tabs: m-tabs + tabs.js (Tier 2) ------------------------------ *
* without the module: inert nav, all panels visible in order —
* complete content. with it: tablist semantics + roving focus.
* shadcn segmented look: muted track, surface active tab.
* ------------------------------------------------------------------ */
:where(m-tabs) {
display: block;
}
:where(m-tabs) > :where(nav) {
display: inline-flex;
gap: var(--space-2xs);
padding: var(--space-2xs);
background: var(--neutral-3);
border-radius: var(--radius-md);
& > :where(button) {
block-size: var(--control-height-sm);
padding-inline: var(--space-sm);
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-muted);
/* :not() guards mirror the base button states (house rule) */
&:hover:not(:disabled, [aria-disabled="true"]),
&:active:not(:disabled, [aria-disabled="true"]) {
background: transparent;
color: var(--color-text);
}
&[aria-selected="true"] {
background: var(--color-surface);
color: var(--color-text);
box-shadow: 0 1px 2px oklch(0 0 0 / 0.08);
&:hover:not(:disabled, [aria-disabled="true"]),
&:active:not(:disabled, [aria-disabled="true"]) {
background: var(--color-surface);
color: var(--color-text);
}
}
}
}
:where(m-tabs) > :where(section) {
padding-block: var(--space-md);
}
/* --- toast: display only (queueing/auto-dismiss are Tier 2) ------- *
* — manual so it
* survives light dismiss and other popovers; role=status announces.
* ------------------------------------------------------------------ */
:where([popover].toast) {
position-area: none; /* not anchored — pinned to the corner */
/* --m-toast-offset comes from toast.js when stacking; 0 without it */
inset: auto var(--space-lg) calc(var(--space-lg) + var(--m-toast-offset, 0px)) auto;
margin: 0;
inline-size: min(22rem, calc(100vw - 2rem));
max-inline-size: none;
padding: var(--space-md);
padding-inline-end: var(--space-2xl); /* room for the corner X */
translate: 0 0;
& :where(b) {
display: block;
font-weight: 500;
}
& :where(span, p) {
color: var(--color-text-muted);
}
/* status edge variants */
&:where(.success) {
border-inline-start: 2px solid var(--color-success);
}
&:where(.danger) {
border-inline-start: 2px solid var(--color-danger);
}
&:where(.warn) {
border-inline-start: 2px solid var(--color-warn);
}
}
/* arrives from below rather than zooming; reflow (restacking) eases */
:where([popover].toast:popover-open) {
transition:
opacity 0.1s,
translate 0.1s,
inset-block-end 0.15s,
overlay 0.1s allow-discrete,
display 0.1s allow-discrete;
}
@starting-style {
:where([popover].toast:popover-open) {
translate: 0 0.75rem;
}
}
/* --- tooltip: css-only, [data-tip] -------------------------------- *
* inverted chip (primary on on-primary), shows on hover/focus after a
* beat, hides instantly. data-tip is visual — pair it with aria-label
* or visible text for AT.
* ------------------------------------------------------------------ */
:where([data-tip]) {
position: relative;
}
:where([data-tip])::after {
content: attr(data-tip);
position: absolute;
inset-block-end: calc(100% + var(--space-xs));
inset-inline-start: 50%;
translate: -50% 2px;
inline-size: max-content;
max-inline-size: 18rem;
padding: 0.375rem var(--space-sm);
border-radius: var(--radius-sm);
background: var(--color-primary);
color: var(--color-on-primary);
font-size: 0.75rem;
font-weight: 400;
line-height: 1.4;
opacity: 0;
pointer-events: none;
transition:
opacity 0.1s,
translate 0.1s;
z-index: 10;
}
:where([data-tip]:hover, [data-tip]:focus-visible)::after {
opacity: 1;
translate: -50% 0;
transition-delay: 0.3s;
}
/* --- validation errors ------------------------------------------- *
* Tier 1 (no JS): a generic after a field shows when the
* field is :user-invalid. Submit attempts fall back to native bubbles.
* Tier 2 (mica/field.js): suppresses bubbles and activates
* per-cause messages. Rules below are all
* zero-specificity; source order resolves them.
* ------------------------------------------------------------------ */
:where(m-field) {
display: flex;
flex-direction: column;
gap: var(--space-2xs);
}
/* every rule here is zero-specificity: source order alone resolves */
:where(m-error) {
display: none;
font-size: 0.875rem;
color: var(--color-danger-text);
}
/* Tier-1 fallback: generic (matchless) error after user interaction */
:where(input:user-invalid, textarea:user-invalid, select:user-invalid)
~ :where(m-error:not([match])) {
display: block;
}
/* Tier 2: once m-field upgrades, the module owns visibility */
:where(m-field:defined) :where(m-error) {
display: none;
}
:where(m-error[active]) {
display: block;
}
}
/* ------------------------------------------------------------------ *
* Layout primitives (Tier 0)
*
* Mechanism: attributes only set custom properties; rules read custom
* properties. `gap="lg"` and `style="--gap: 2.5rem"` are the same thing.
* ------------------------------------------------------------------ */
@layer mica.layout {
/* Custom elements default to display:inline; give ours a sane base. */
m-vstack,
m-hstack,
m-zstack,
m-center,
m-box,
m-grid,
m-sidecar,
m-switcher,
m-reel {
display: block;
box-sizing: border-box;
}
/* Shared attribute vocabulary -> custom properties */
:is(m-vstack, m-hstack, m-grid, m-sidecar, m-switcher, m-reel) {
&[gap="none"] { --gap: 0; }
&[gap="2xs"] { --gap: var(--space-2xs); }
&[gap="xs"] { --gap: var(--space-xs); }
&[gap="sm"] { --gap: var(--space-sm); }
&[gap="md"] { --gap: var(--space-md); }
&[gap="lg"] { --gap: var(--space-lg); }
&[gap="xl"] { --gap: var(--space-xl); }
&[gap="2xl"] { --gap: var(--space-2xl); }
}
:is(m-vstack, m-hstack) {
&[align="start"] { --align: flex-start; }
&[align="center"] { --align: center; }
&[align="end"] { --align: flex-end; }
&[align="stretch"] { --align: stretch; }
}
/* --- m-vstack: vertical flow with consistent gaps ---------------- */
m-vstack {
display: flex;
flex-direction: column;
align-items: var(--align, stretch);
gap: var(--gap, var(--space-md));
/* the stack owns spacing; preset rhythm yields to gap */
& > * { margin-block: 0; }
}
/* --- m-hstack: one horizontal row; `wrap` to allow wrapping ------ */
m-hstack {
display: flex;
align-items: var(--align, center);
justify-content: var(--justify, flex-start);
gap: var(--gap, var(--space-md));
&[wrap] { flex-wrap: wrap; }
& > * { margin-block: 0; }
&[justify="start"] { --justify: flex-start; }
&[justify="center"] { --justify: center; }
&[justify="end"] { --justify: flex-end; }
&[justify="between"] { --justify: space-between; }
}
/* --- m-zstack: layering; children occupy the same grid cell ------ */
m-zstack {
display: grid;
align-items: var(--align, stretch);
justify-items: var(--justify, stretch);
&[align="start"] { --align: start; }
&[align="center"] { --align: center; }
&[align="end"] { --align: end; }
&[align="stretch"] { --align: stretch; }
&[justify="start"] { --justify: start; }
&[justify="center"] { --justify: center; }
&[justify="end"] { --justify: end; }
&[justify="stretch"] { --justify: stretch; }
/* every layer shares one cell; paint order is DOM order.
per-layer placement is just user CSS: place-self on the child. */
& > * {
grid-area: 1 / 1;
}
}
/* --- m-center: intrinsic horizontal centering with a measure ----- */
m-center {
max-inline-size: var(--max, var(--measure));
margin-inline: auto;
padding-inline: var(--gutter, 0);
&[max="xs"] { --max: var(--size-xs); }
&[max="sm"] { --max: var(--size-sm); }
&[max="md"] { --max: var(--size-md); }
&[max="lg"] { --max: var(--size-lg); }
&[max="xl"] { --max: var(--size-xl); }
&[gutter="sm"] { --gutter: var(--space-sm); }
&[gutter="md"] { --gutter: var(--space-md); }
&[gutter="lg"] { --gutter: var(--space-lg); }
}
/* --- m-box: padding, an inside for content ----------------------- */
m-box {
padding: var(--pad, var(--space-md));
&[pad="none"] { --pad: 0; }
&[pad="xs"] { --pad: var(--space-xs); }
&[pad="sm"] { --pad: var(--space-sm); }
&[pad="md"] { --pad: var(--space-md); }
&[pad="lg"] { --pad: var(--space-lg); }
&[pad="xl"] { --pad: var(--space-xl); }
}
/* --- m-grid: responsive grid, no media queries ------------------- */
m-grid {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(min(var(--min, var(--size-sm)), 100%), 1fr)
);
gap: var(--gap, var(--space-md));
&[min="xs"] { --min: var(--size-xs); }
&[min="sm"] { --min: var(--size-sm); }
&[min="md"] { --min: var(--size-md); }
&[min="lg"] { --min: var(--size-lg); }
}
/* --- m-sidecar: fixed + flexible pair, stacks when narrow -------- */
m-sidecar {
display: flex;
flex-wrap: wrap;
gap: var(--gap, var(--space-md));
/* the sidecar is the first child by default; `side="end"` flips it */
& > :first-child {
flex-basis: var(--side-width, var(--size-xs));
flex-grow: 1;
}
& > :last-child {
flex-basis: 0;
flex-grow: 999;
min-inline-size: var(--content-min, 50%);
}
/* side="end": the *last* child is the sidecar (no visual reordering) */
&[side="end"] > :first-child {
flex-basis: 0;
flex-grow: 999;
min-inline-size: var(--content-min, 50%);
}
&[side="end"] > :last-child {
flex-basis: var(--side-width, var(--size-xs));
flex-grow: 1;
min-inline-size: auto;
}
&[side-width="xs"] { --side-width: var(--size-xs); }
&[side-width="sm"] { --side-width: var(--size-sm); }
&[side-width="md"] { --side-width: var(--size-md); }
}
/* --- m-switcher: row that switches to a column below a threshold - */
m-switcher {
display: flex;
flex-wrap: wrap;
gap: var(--gap, var(--space-md));
& > * {
flex-basis: calc((var(--threshold, var(--size-lg)) - 100%) * 999);
flex-grow: 1;
}
&[threshold="sm"] { --threshold: var(--size-sm); }
&[threshold="md"] { --threshold: var(--size-md); }
&[threshold="lg"] { --threshold: var(--size-lg); }
&[threshold="xl"] { --threshold: var(--size-xl); }
}
/* --- m-reel: horizontal scroll with snap ------------------------- */
m-reel {
display: flex;
gap: var(--gap, var(--space-md));
overflow-x: auto;
scroll-snap-type: inline proximity;
& > * {
flex-shrink: 0;
scroll-snap-align: start;
}
&[snap="none"] { scroll-snap-type: none; }
&[snap="mandatory"] { scroll-snap-type: inline mandatory; }
}
}