@loidolt/theme-styles 0.6.0 → 0.8.0

package/src/components/maps.css

@@ -0,0 +1,327 @@
+/* @loidolt/theme-maps. The map itself is painted by MapLibre from the same tokens (read at
+   runtime through `createTokenColors`); this file dresses MapLibre's controls, popups and
+   attribution, and the loidolt pieces placed on the map. It sits in `loidolt.components`, after
+   the `loidolt.vendor` layer MapLibre's own stylesheet goes in, so it wins without `!important`. */
+.ldt-map {
+  position: relative;
+  min-width: 0;
+  height: var(--ldt-map-height, 25rem);
+  overflow: hidden;
+  border: var(--loidolt-border-width) solid var(--loidolt-border);
+  border-radius: var(--loidolt-radius-surface);
+  background: var(--loidolt-map-land);
+}
+.ldt-map__canvas {
+  position: absolute;
+  inset: 0;
+}
+.ldt-map__canvas[hidden],
+.ldt-map__children[hidden] {
+  display: none;
+}
+.ldt-map__alert {
+  margin: 0.75rem;
+}
+.ldt-map :where(.maplibregl-map) {
+  color: var(--loidolt-text);
+  font: var(--loidolt-font-size-sm) / var(--loidolt-font-line-height-normal)
+    var(--loidolt-font-utility);
+}
+
+/* Controls stay above markers, which can be placed anywhere — including under a corner. */
+.ldt-map
+  :where(
+    .maplibregl-ctrl-top-left,
+    .maplibregl-ctrl-top-right,
+    .maplibregl-ctrl-bottom-left,
+    .maplibregl-ctrl-bottom-right
+  ) {
+  z-index: var(--loidolt-z-raised);
+}
+
+/* Control groups: square, hairline-bordered, on the surface — the toolbar look. */
+.ldt-map .maplibregl-ctrl-group {
+  border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
+  border-radius: 0;
+  background: var(--loidolt-surface);
+  box-shadow: none;
+}
+.ldt-map .maplibregl-ctrl-group button {
+  width: 2rem;
+  height: 2rem;
+  color: var(--loidolt-text);
+}
+.ldt-map .maplibregl-ctrl-group button + button {
+  border-top: var(--loidolt-border-width) solid var(--loidolt-border);
+}
+.ldt-map .maplibregl-ctrl-group button:not(:disabled):hover {
+  background: var(--loidolt-surface-alt);
+}
+.ldt-map .maplibregl-ctrl-group button:focus-visible {
+  box-shadow: none;
+}
+/* MapLibre's icons are dark images, invisible on a dark surface. Masks of our own glyphs, filled
+   with the text colour, follow every theme. */
+.ldt-map .maplibregl-ctrl button .maplibregl-ctrl-icon {
+  background-image: none;
+  background-color: currentColor;
+  mask: var(--ldt-map-icon) center / 1rem 1rem no-repeat;
+}
+.ldt-map .maplibregl-ctrl-zoom-in {
+  --ldt-map-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
+}
+.ldt-map .maplibregl-ctrl-zoom-out {
+  --ldt-map-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
+}
+.ldt-map .maplibregl-ctrl-compass {
+  --ldt-map-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2 11 8H5z'/%3E%3Cpath d='M5 8h6L8 14z' fill-opacity='.35'/%3E%3C/svg%3E");
+}
+.ldt-map .maplibregl-ctrl-fullscreen,
+.ldt-map .maplibregl-ctrl-shrink {
+  --ldt-map-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M2 6V2h4M10 2h4v4M14 10v4h-4M6 14H2v-4'/%3E%3C/svg%3E");
+}
+.ldt-map .maplibregl-ctrl-geolocate {
+  --ldt-map-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M8 1v3M8 12v3M1 8h3M12 8h3'/%3E%3Crect x='4.5' y='4.5' width='7' height='7'/%3E%3C/svg%3E");
+}
+.ldt-map .maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active {
+  color: var(--loidolt-accent);
+}
+.ldt-map .maplibregl-ctrl-attrib-button {
+  --ldt-map-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 7h2v6H7zM7 3h2v2H7z'/%3E%3C/svg%3E");
+}
+
+/* Attribution: required by the tile licence, so readable — just quiet. */
+.ldt-map .maplibregl-ctrl-attrib,
+.ldt-map .maplibregl-ctrl-attrib.maplibregl-compact {
+  border-radius: 0;
+  color: var(--loidolt-text-muted);
+  background: var(--loidolt-surface);
+  font-size: var(--loidolt-font-size-xs);
+}
+.ldt-map .maplibregl-ctrl-attrib a {
+  display: inline-block;
+  padding-block: 0.35rem; /* @literal attribution link target */
+  color: var(--loidolt-text);
+  line-height: 1.5;
+}
+.ldt-map .maplibregl-ctrl-attrib-button {
+  border-radius: 0;
+  background-color: transparent;
+}
+.ldt-map .maplibregl-ctrl-scale {
+  border-color: var(--loidolt-text-muted);
+  color: var(--loidolt-text);
+  background: var(--loidolt-surface);
+  font-size: var(--loidolt-font-size-xs);
+}
+
+/* Controls of our own: legends, coordinates, the basemap switcher. */
+.ldt-map-control {
+  padding: var(--loidolt-space-2) var(--loidolt-pad-control-x-sm);
+  border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
+  border-radius: var(--loidolt-radius-surface);
+  color: var(--loidolt-text);
+  background: var(--loidolt-surface);
+}
+.ldt-map-control.ldt-basemap-switcher {
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+.ldt-map-legend {
+  display: grid;
+  gap: 0.4rem; /* @literal swatch-to-label spacing */
+  min-width: 9rem;
+  max-width: 16rem;
+  font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
+}
+.ldt-map-legend__title,
+.ldt-map-legend__summary {
+  margin: 0;
+  color: var(--loidolt-text-muted);
+  font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
+  font-weight: var(--loidolt-label-weight);
+  letter-spacing: var(--loidolt-label-tracking);
+  text-transform: var(--loidolt-label-transform);
+}
+.ldt-map-legend__summary {
+  cursor: pointer;
+}
+.ldt-map-legend__section {
+  display: grid;
+  gap: 0.35rem; /* @literal legend rhythm */
+}
+.ldt-map-legend__items {
+  display: grid;
+  gap: var(--loidolt-space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.ldt-map-legend__item {
+  display: flex;
+  gap: var(--loidolt-space-2);
+  align-items: center;
+}
+.ldt-map-legend__key {
+  flex: none;
+  width: 0.75rem;
+  height: 0.75rem;
+  background: var(--ldt-legend-color);
+}
+.ldt-map-legend__key--line {
+  height: 0.2rem;
+}
+.ldt-map-legend__key--dot {
+  border-radius: var(--loidolt-border-radius-pill);
+}
+.ldt-map-legend__ramp {
+  height: 0.6rem;
+}
+.ldt-map-legend__ends {
+  display: flex;
+  justify-content: space-between;
+  margin: 0;
+  color: var(--loidolt-text-muted);
+  font-size: var(--loidolt-font-size-xs);
+}
+.ldt-map-coordinates {
+  display: flex;
+  gap: var(--loidolt-space-3);
+  margin: 0;
+  font: var(--loidolt-font-size-xs) var(--loidolt-font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+/* The layer manager: a titled list of switches, sliders and move buttons. */
+.ldt-layer-manager {
+  min-width: 13rem;
+  max-width: min(18rem, calc(100vw - 4rem));
+  /* Never taller than the map, so it cannot run into the controls in the corner below it. */
+  max-height: calc(var(--ldt-map-height, 25rem) - 4.5rem);
+  overflow-y: auto;
+}
+.ldt-layer-manager__title {
+  margin: 0;
+}
+.ldt-layer-manager__toggle {
+  width: 100%;
+  padding: 0.15rem 0; /* @literal toggle hit area */
+  border: 0;
+  color: var(--loidolt-text-muted);
+  background: none;
+  font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
+  font-weight: var(--loidolt-label-weight);
+  letter-spacing: var(--loidolt-label-tracking);
+  text-align: start;
+  text-transform: var(--loidolt-label-transform);
+  cursor: pointer;
+}
+.ldt-layer-manager__list {
+  display: grid;
+  gap: var(--loidolt-space-2);
+  margin: 0.4rem 0 0;
+  padding: 0;
+  list-style: none;
+}
+.ldt-layer-manager__list[hidden] {
+  display: none;
+}
+.ldt-layer-manager__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.35rem 0.5rem; /* @literal separator rhythm */
+  align-items: center;
+  padding-top: var(--loidolt-space-2);
+  border-top: var(--loidolt-border-width) solid var(--loidolt-border-soft);
+}
+.ldt-layer-manager__row:first-child {
+  padding-top: 0;
+  border-top: 0;
+}
+.ldt-layer-manager__move {
+  display: flex;
+  gap: 0.15rem; /* @literal icon pair */
+}
+.ldt-layer-manager__opacity {
+  grid-column: 1 / -1;
+}
+
+/* Markers: the loidolt pin or dot, in a button that takes focus. */
+.ldt-map-marker {
+  display: block;
+  padding: 0;
+  border: 0;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+}
+span.ldt-map-marker {
+  cursor: default;
+}
+
+/* Popups: square, on the surface, no tip — the same frame as a popover. */
+.ldt-map-popup .maplibregl-popup-content {
+  padding: 0;
+  border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
+  border-radius: 0;
+  color: var(--loidolt-text);
+  background: var(--loidolt-surface);
+  box-shadow: var(--loidolt-shadow-popover);
+}
+.ldt-map-popup .maplibregl-popup-tip {
+  display: none;
+}
+.ldt-map-popup__content {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: var(--loidolt-space-1);
+  max-width: min(18rem, 80vw);
+  padding: 0.5rem 0.35rem 0.6rem 0.75rem; /* @literal popup inset clears the close button */
+}
+.ldt-map-popup__body > :first-child {
+  margin-top: 0.3rem;
+}
+.ldt-map-popup__body > :last-child {
+  margin-bottom: 0;
+}
+
+/* The feature list: every place on the map, as rows. */
+.ldt-map-features__list {
+  margin: 0;
+  padding: 0;
+  border-top: var(--loidolt-border-width) solid var(--loidolt-border-soft);
+  list-style: none;
+}
+.ldt-map-features__item {
+  display: grid;
+  gap: 0.1rem; /* @literal hairline between lines */
+  width: 100%;
+  padding: 0.55rem 0.75rem; /* @literal feature list metrics */
+  border: 0;
+  border-bottom: var(--loidolt-border-width) solid var(--loidolt-border-soft);
+  border-left: var(--loidolt-stroke-accent) solid transparent;
+  color: var(--loidolt-text);
+  background: none;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+.ldt-map-features__item:hover {
+  background: var(--loidolt-surface-alt);
+}
+.ldt-map-features__item[aria-current='true'] {
+  border-left-color: var(--loidolt-accent);
+  background: var(--loidolt-surface-alt);
+}
+.ldt-map-features__description {
+  color: var(--loidolt-text-muted);
+  font-size: var(--loidolt-font-size-sm);
+}
+
+@media (forced-colors: active) {
+  .ldt-map .maplibregl-ctrl button .maplibregl-ctrl-icon {
+    background-color: ButtonText;
+  }
+}

package/src/components/media.css

@@ -84,7 +84,7 @@
 }
 .ldt-media-player__meta {
   display: grid;
-  gap: 0.1rem;
+  gap: 0.1rem; /* @literal hairline between lines */
   min-width: 0;
 }
 .ldt-media-player--audio .ldt-media-player__meta:first-child {
@@ -125,7 +125,7 @@
   color: var(--loidolt-accent);
 }
 .ldt-media-controls__text {
-  letter-spacing: var(--loidolt-font-tracking-utility);
+  letter-spacing: var(--loidolt-label-tracking);
 }
 /* Focus rings on the dark bar follow the ink so they stay visible in both themes. */
 .ldt-media-controls :focus-visible {
@@ -169,7 +169,8 @@
 .ldt-media-controls__speed {
   min-height: 1.5rem;
   border: var(--loidolt-border-width) solid currentColor;
-  padding: 0 0.3rem;
+  border-radius: var(--loidolt-radius-control);
+  padding: 0 0.3rem; /* @literal compact readout */
   color: inherit;
   background: transparent;
   font: inherit;
@@ -191,6 +192,7 @@
   aspect-ratio: var(--ldt-aspect-ratio, 16 / 9);
   overflow: hidden;
   border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
+  border-radius: var(--loidolt-radius-surface);
   background: var(--loidolt-surface-inverse);
 }
 .ldt-media-embed__frame {
@@ -225,12 +227,13 @@
 }
 .ldt-media-embed__title {
   max-width: 32rem;
-  padding: 0.2rem 0.5rem;
+  padding: 0.2rem 0.5rem; /* @literal caption chip */
   color: var(--loidolt-text-inverse);
   background: var(--loidolt-surface-inverse);
   font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
-  letter-spacing: var(--loidolt-font-tracking-utility);
-  text-transform: uppercase;
+  font-weight: var(--loidolt-label-weight);
+  letter-spacing: var(--loidolt-label-tracking);
+  text-transform: var(--loidolt-label-transform);
 }
 .ldt-media-embed__unsupported {
   display: grid;
@@ -310,12 +313,13 @@
   border-color: var(--loidolt-accent);
 }
 .ldt-media-tile__kind {
-  padding: 0.1rem 0.4rem;
+  padding: 0.1rem 0.4rem; /* @literal kind chip */
   color: var(--loidolt-text-inverse);
   background: var(--loidolt-surface-inverse);
   font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
-  letter-spacing: var(--loidolt-font-tracking-utility);
-  text-transform: uppercase;
+  font-weight: var(--loidolt-label-weight);
+  letter-spacing: var(--loidolt-label-tracking);
+  text-transform: var(--loidolt-label-transform);
 }
 .ldt-media-tile__caption {
   color: var(--loidolt-text-muted);
@@ -347,7 +351,7 @@
 .ldt-lightbox__counter {
   font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
   font-variant-numeric: tabular-nums;
-  letter-spacing: var(--loidolt-font-tracking-utility);
+  letter-spacing: var(--loidolt-label-tracking);
 }
 .ldt-lightbox__tools {
   display: flex;
@@ -360,7 +364,8 @@
   min-height: var(--loidolt-size-control-sm);
   place-items: center;
   border: var(--loidolt-border-width) solid currentColor;
-  padding: 0 0.5rem;
+  border-radius: var(--loidolt-radius-control);
+  padding: 0 var(--loidolt-space-2);
   color: inherit;
   background: var(--loidolt-surface-inverse);
   font: var(--loidolt-font-size-base) var(--loidolt-font-utility);
@@ -402,7 +407,7 @@
   width: 0.55rem;
   height: 0.55rem;
   border: solid currentColor;
-  border-width: 0 0 2px 2px;
+  border-width: 0 0 2px 2px; /* @literal chevron glyph */
   transform: translateX(0.1rem) rotate(45deg);
 }
 .ldt-lightbox__nav--next .ldt-lightbox__chevron,
@@ -437,6 +442,7 @@
   min-height: var(--loidolt-size-control-sm);
   place-items: center;
   border: var(--loidolt-border-width) solid var(--loidolt-border-control);
+  border-radius: var(--loidolt-radius-control);
   padding: 0;
   color: var(--loidolt-text);
   background: var(--loidolt-surface);

package/src/components/overlays.css

@@ -14,6 +14,7 @@
   max-height: min(48rem, calc(100dvh - 2rem));
   overflow: hidden;
   border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
+  border-radius: var(--loidolt-radius-overlay);
   color: var(--loidolt-text);
   background: var(--loidolt-surface);
   box-shadow: var(--loidolt-shadow-modal);
@@ -41,18 +42,18 @@
   display: flex;
   flex: none;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--loidolt-space-1);
 }
 .ldt-dialog__header,
 .ldt-dialog__body,
 .ldt-dialog__footer {
-  padding: 1rem 1.25rem;
+  padding: var(--loidolt-pad-overlay);
 }
 .ldt-dialog__header {
   display: flex;
   align-items: start;
   justify-content: space-between;
-  gap: 1rem;
+  gap: var(--loidolt-space-4);
   border-bottom: var(--loidolt-border-width) solid var(--loidolt-border);
 }
 .ldt-dialog__header > :first-child,
@@ -66,7 +67,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
-  gap: 0.5rem;
+  gap: var(--loidolt-gap-actions);
   border-top: var(--loidolt-border-width) solid var(--loidolt-border);
 }
 .ldt-dialog__footer .ldt-button,
@@ -154,13 +155,13 @@
 .ldt-drawer__header,
 .ldt-drawer__body,
 .ldt-drawer__footer {
-  padding: 1rem 1.25rem;
+  padding: var(--loidolt-pad-overlay);
 }
 .ldt-drawer__header {
   display: flex;
   align-items: start;
   justify-content: space-between;
-  gap: 1rem;
+  gap: var(--loidolt-space-4);
   border-bottom: var(--loidolt-border-width) solid var(--loidolt-border);
 }
 .ldt-drawer__body {
@@ -170,7 +171,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
-  gap: 0.5rem;
+  gap: var(--loidolt-gap-actions);
   border-top: var(--loidolt-border-width) solid var(--loidolt-border);
 }
 .ldt-drawer__title {
@@ -188,31 +189,34 @@
   z-index: var(--loidolt-z-menu);
   min-width: 13rem;
   max-width: min(22rem, calc(100vw - 2rem));
-  padding: 0.45rem;
+  padding: var(--loidolt-pad-popover);
   border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
+  border-radius: var(--loidolt-radius-overlay);
   color: var(--loidolt-text);
   background: var(--loidolt-surface);
   box-shadow: var(--loidolt-shadow-popover);
 }
 .ldt-menu {
   display: grid;
-  gap: 0.1rem;
+  gap: 0.1rem; /* @literal hairline between items */
 }
 .ldt-menu__label {
-  padding: 0.45rem 0.55rem 0.3rem;
+  padding: 0.45rem 0.55rem 0.3rem; /* @literal optical alignment with item text */
   color: var(--loidolt-text-accent);
   font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
+  font-weight: var(--loidolt-label-weight);
+  letter-spacing: calc(var(--loidolt-label-tracking) * 0.9);
+  text-transform: var(--loidolt-label-transform);
 }
 .ldt-menu__item {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 1rem;
+  gap: var(--loidolt-space-4);
   border: 0;
-  padding: 0.65rem 0.55rem;
+  border-radius: var(--loidolt-radius-inner);
+  padding: var(--loidolt-pad-item);
   color: var(--loidolt-text);
   background: transparent;
   text-align: left;
@@ -228,7 +232,7 @@
 .ldt-menu__hint {
   color: var(--loidolt-text-muted);
   font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
-  letter-spacing: 0.08em;
+  letter-spacing: var(--loidolt-control-tracking);
 }
 .ldt-menu__item:hover:not(:disabled, [data-disabled]) .ldt-menu__hint,
 .ldt-menu__item[data-highlighted] .ldt-menu__hint {
@@ -250,13 +254,13 @@
 }
 .ldt-menu__group {
   display: grid;
-  gap: 0.1rem;
+  gap: 0.1rem; /* @literal hairline between items */
 }
 /* Checkbox and radio rows lead with a drawn indicator, so state never rests on colour alone. */
 .ldt-menu__item--check,
 .ldt-menu__item--radio {
   justify-content: flex-start;
-  gap: 0.6rem;
+  gap: 0.6rem; /* @literal glyph-to-label spacing, not density */
 }
 .ldt-menu__item--check .ldt-menu__hint,
 .ldt-menu__item--radio .ldt-menu__hint {
@@ -274,7 +278,7 @@
   position: absolute;
   inset: 0.05rem 0.22rem 0.18rem;
   border: solid currentColor;
-  border-width: 0 2px 2px 0;
+  border-width: 0 2px 2px 0; /* @literal checkmark glyph */
   transform: rotate(45deg);
 }
 .ldt-menu__item--radio[data-state='checked'] .ldt-menu__indicator::after {
@@ -288,7 +292,7 @@
   height: 0.4rem;
   flex: none;
   border: solid currentColor;
-  border-width: 0 1.5px 1.5px 0;
+  border-width: 0 1.5px 1.5px 0; /* @literal chevron glyph */
   transform: rotate(-45deg);
 }
 .ldt-menu__item--sub[data-state='open'] {
@@ -304,7 +308,8 @@
 .ldt-tooltip {
   z-index: var(--loidolt-z-tooltip);
   max-width: 18rem;
-  padding: 0.4rem 0.55rem;
+  padding: 0.4rem 0.55rem; /* @literal compact by nature; not a density surface */
+  border-radius: var(--loidolt-radius-control);
   color: var(--loidolt-text-inverse);
   background: var(--loidolt-surface-inverse);
   font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
@@ -329,7 +334,7 @@
 .ldt-tabs__list {
   max-width: 100%;
   display: flex;
-  gap: 2px;
+  gap: 2px; /* @literal hairline seam between tabs */
   overflow-x: auto;
   border-bottom: var(--loidolt-border-width) solid var(--loidolt-border);
   overscroll-behavior-inline: contain;
@@ -345,18 +350,19 @@
 .ldt-tabs__trigger {
   min-height: var(--loidolt-size-control);
   border: 0;
-  border-bottom: 2px solid transparent;
-  padding: 0 0.85rem;
+  border-bottom: var(--loidolt-stroke-indicator) solid transparent;
+  padding: 0 var(--loidolt-pad-control-x);
   color: var(--loidolt-text-muted);
   background: transparent;
   font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  font-weight: var(--loidolt-control-weight);
+  letter-spacing: var(--loidolt-control-tracking);
+  text-transform: var(--loidolt-control-transform);
 }
 .ldt-tabs__trigger[data-orientation='vertical'] {
   border-bottom: 0;
-  border-right: 2px solid transparent;
-  padding: 0 0.85rem;
+  border-right: var(--loidolt-stroke-indicator) solid transparent;
+  padding: 0 var(--loidolt-pad-control-x);
   text-align: left;
 }
 .ldt-tabs__trigger[data-state='active'],
@@ -368,7 +374,7 @@
   padding-block: 0;
 }
 .ldt-tabs__content {
-  padding-block: 1rem;
+  padding-block: var(--loidolt-space-4);
 }
 
 @media (max-width: 760px) {
@@ -380,7 +386,7 @@
     border-bottom: var(--loidolt-border-width) solid var(--loidolt-border);
   }
   .ldt-tabs__content[data-orientation='vertical'] {
-    padding-block: 1rem;
+    padding-block: var(--loidolt-space-4);
   }
 }
 /* The option list of Combobox and MultiSelect: the menu surface, sized to its field. */
@@ -390,38 +396,40 @@
   max-width: min(28rem, calc(100vw - 2rem));
   max-height: min(20rem, var(--bits-floating-available-height, 20rem));
   display: grid;
-  gap: 0.1rem;
+  gap: 0.1rem; /* @literal hairline between items */
   overflow-y: auto;
-  padding: 0.35rem;
+  padding: 0.35rem; /* @literal listbox inset */
   border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
+  border-radius: var(--loidolt-radius-overlay);
   color: var(--loidolt-text);
   background: var(--loidolt-surface);
   box-shadow: var(--loidolt-shadow-popover);
 }
 .ldt-listbox__group {
   display: grid;
-  gap: 0.1rem;
+  gap: 0.1rem; /* @literal hairline between items */
 }
 .ldt-listbox__group + .ldt-listbox__group,
 .ldt-listbox__item + .ldt-listbox__group {
   margin-top: 0.25rem;
   border-top: var(--loidolt-border-width) solid var(--loidolt-border-soft);
-  padding-top: 0.25rem;
+  padding-top: var(--loidolt-space-1);
 }
 .ldt-listbox__heading {
-  padding: 0.4rem 0.55rem 0.25rem;
+  padding: 0.4rem 0.55rem 0.25rem; /* @literal optical alignment with item text */
   color: var(--loidolt-text-accent);
   font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
+  font-weight: var(--loidolt-label-weight);
+  letter-spacing: calc(var(--loidolt-label-tracking) * 0.9);
+  text-transform: var(--loidolt-label-transform);
 }
 .ldt-listbox__item {
   min-height: 1.5rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 1rem;
-  padding: 0.55rem;
+  gap: var(--loidolt-space-4);
+  padding: 0.55rem; /* @literal listbox option metrics */
   cursor: default;
 }
 .ldt-listbox__item[data-highlighted] {
@@ -438,14 +446,14 @@
   height: 0.65rem;
   flex: none;
   border: solid transparent;
-  border-width: 0 2px 2px 0;
+  border-width: 0 2px 2px 0; /* @literal checkmark glyph */
   transform: rotate(45deg) translate(-0.1rem, -0.1rem);
 }
 .ldt-listbox__item[data-selected] .ldt-listbox__check {
   border-color: currentColor;
 }
 .ldt-listbox__empty {
-  padding: 0.55rem;
+  padding: 0.55rem; /* @literal matches the option metrics */
   color: var(--loidolt-text-muted);
   font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
 }