digital-garbage
094e056760
55 element groups across text, buttons, choice, input, slider, layout, status, overlays, gallery and the wheel picker. Each lands in a registry-driven catalogue that shows every variant in both themes, so an element that fails to register is visibly absent rather than quietly missing. rule_content_is_data iterates the REGISTRY, not a list: a new element is attacked with markup the moment it calls define(), and one without a demo fails the suite. That is announcement-not-enumeration applied to the tests. Fixes found while building: checkbox silently ignored its label (inverted logic left it with aria-label=toggle), the overlay root set z-index 0 and so became a stacking context that trapped every overlay it was built to free, and raising a window left its peers' z stale because z is derived from position -- claim() now notifies a rung when a peer moves. The wheel highlights the actual sector rather than a box around the label: the lit shape is the region that picks the item, which is what makes it aimable.
48 lines
2.0 KiB
CSS
48 lines
2.0 KiB
CSS
.cx-slider { display: flex; align-items: center; gap: var(--sp-4); width: 100%; }
|
|
|
|
.cx-range {
|
|
appearance: none; -webkit-appearance: none;
|
|
flex: 1; min-width: 80px; height: 18px; background: transparent; cursor: pointer;
|
|
/* --fill is written by the element as the value changes, so the filled part
|
|
* of the track follows the theme's accent without JS naming a colour. */
|
|
--fill: 0%;
|
|
}
|
|
.cx-range::-webkit-slider-runnable-track {
|
|
height: 4px; border-radius: var(--r-pill);
|
|
background: linear-gradient(to right, var(--accent) var(--fill), var(--line) var(--fill));
|
|
}
|
|
.cx-range::-moz-range-track {
|
|
height: 4px; border-radius: var(--r-pill);
|
|
background: linear-gradient(to right, var(--accent) var(--fill), var(--line) var(--fill));
|
|
}
|
|
.cx-range::-webkit-slider-thumb {
|
|
-webkit-appearance: none; appearance: none;
|
|
width: 14px; height: 14px; margin-top: -5px;
|
|
border-radius: var(--r-pill); background: var(--elev-1);
|
|
border: 2px solid var(--accent);
|
|
transition: transform var(--dur-1) var(--ease-standard);
|
|
}
|
|
.cx-range::-moz-range-thumb {
|
|
width: 14px; height: 14px; border-radius: var(--r-pill);
|
|
background: var(--elev-1); border: 2px solid var(--accent);
|
|
}
|
|
.cx-range:hover::-webkit-slider-thumb { transform: scale(1.12); }
|
|
.cx-range:focus-visible { outline: none; }
|
|
.cx-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
|
|
.cx-range:focus-visible::-moz-range-thumb { box-shadow: var(--focus-ring); }
|
|
.cx-range:disabled { opacity: var(--disabled-opacity); cursor: default; }
|
|
|
|
.cx-slider-sm .cx-range { height: 14px; }
|
|
|
|
.cx-readout {
|
|
font-family: var(--font-mono); font-variant-numeric: tabular-nums;
|
|
font-size: var(--fs-6); color: var(--muted);
|
|
min-width: 4ch; text-align: right;
|
|
}
|
|
|
|
.cx-macro { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; }
|
|
.cx-macro-presets { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
|
|
.cx-macro-presets .cx-on { color: var(--accent); background: var(--accent-soft); }
|
|
|
|
.cx-range-pair { display: flex; flex-direction: column; gap: var(--sp-1); width: 100%; }
|