@glimstone/core 4.0.0 → 4.1.1

package/tokens.css

@@ -107,6 +107,9 @@
   --carbon-surface3:   #525252;
   --carbon-hover:      #353535;
   --carbon-hover-raised: #6f6f6f;
+  /* A switch that is off. On the light ramp surface3 stands too close to a card
+     and to the knob to see, so the track goes down to 3:1 against both. */
+  --toggle-off: #525252;
   --carbon-border:     #393939;
 
   /* The About card's brand marks at rest, adjusted from the published brand
@@ -213,6 +216,7 @@
     --carbon-surface3:   #d1d1d1;
     --carbon-hover:      #e0e0e0;
     --carbon-hover-raised: #c6c6c6;
+    --toggle-off: #8d8d8d;
     --carbon-border:     #d1d1d1;
 
     /* Warm brands deepened, dark ones left dark (see the dark block). */
@@ -278,6 +282,7 @@
   --carbon-surface3:   #d1d1d1;
   --carbon-hover:      #e0e0e0;
   --carbon-hover-raised: #c6c6c6;
+  --toggle-off: #8d8d8d;
   --carbon-border:     #d1d1d1;
 
   /* The same brand values as the media block, for an explicit light choice. */
@@ -389,14 +394,20 @@ body {
    row is a bigger target, and in glyph mode the symbol is the whole row.
    `flex: none` because a flex line squeezes the glyph beside a long label
    first. */
-.glim-nav-row > svg {
+:is(.glim-nav-row, .glim-nav-row-main) > svg {
   width: 1.25rem;
   height: 1.25rem;
   flex: none;
 }
+/* A tree's row keeps a deep name its room with a smaller glyph. */
+:is(.glim-nav-row--tree, .glim-nav-row--tree > .glim-nav-row-main) > svg {
+  width: 1.05rem;
+  height: 1.05rem;
+}
 
 /* A closed reactive row must not reserve a gap beside a zero-width label. */
-.glim-nav-row.glim-reactive {
+.glim-nav-row.glim-reactive:not(.glim-nav-row--slots),
+.glim-nav-row--slots.glim-reactive > .glim-nav-row-main {
   gap: 0;
 }
 
@@ -594,6 +605,70 @@ body {
   background-color: var(--carbon-hover);
 }
 
+/* A drag on the square or the bar is the picker's, never a scroll of the
+   page. The handle shows the colour it stands on. */
+.glim-picker-sv,
+.glim-picker-hue { touch-action: none; }
+.glim-picker-dot { background-color: var(--glim-picker-colour, transparent); }
+
+/* The ColorPicker components: the widget, the preview with the name it
+   proposes and the hex field, and Apply. Without an anchor the panel sits in
+   the page on whatever surface holds it; with one it floats on the body, above
+   windows and below toasts, like a menu. */
+.glim-picker-panel {
+  --glim-picker-colour: transparent;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 18.5rem;
+  max-width: 100%;
+}
+.glim-picker-panel .glim-picker-sv { height: 10rem; }
+.glim-picker-panel .glim-picker-dot {
+  width: 1.1rem;
+  height: 1.1rem;
+  margin: -0.55rem 0 0 -0.55rem;
+}
+.glim-picker-panel--float {
+  position: fixed;
+  z-index: 60;
+  padding: 0.8rem;
+  border-radius: var(--radius-card);
+  background-color: var(--carbon-surface);
+  box-shadow: var(--elevation), var(--hairline);
+}
+.glim-picker-foot {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+}
+.glim-picker-swatch {
+  width: 1.6rem;
+  height: 1.6rem;
+  flex: none;
+  border-radius: var(--radius-pill);
+  background-color: var(--glim-picker-colour);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--glim-picker-colour) 30%, transparent), inset 0 0 0 1px var(--carbon-border);
+}
+.glim-picker-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.glim-picker-foot .glim-picker-hex {
+  width: 6.2rem;
+  height: var(--btn-h);
+  flex: none;
+  margin-inline-start: auto;
+}
+.glim-picker-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
 /* Rainbow, the accent in its plural form (docs/design-language.md; the JS side
    is hueVars and applyRainbow in packages/core/src/appearance.ts). An element that owns
    a palette position sets --item-hue and carries .glim-hue, and these rules
@@ -721,6 +796,9 @@ body {
   0%   { left: -35%; }
   100% { left: 100%; }
 }
+@keyframes glim-progress-sheen {
+  to { translate: 100% 0; }
+}
 /* Translation only. This runs on the route wrapper while the cards inside it
    animate their own transforms, and a scale or rotation on an ancestor makes
    the engine resample the whole subtree, so the page trembles before it
@@ -906,6 +984,10 @@ body {
     --motion-slosh-splash-tilt: 7deg;
     --motion-slosh-splash-run: 3.4;
     --motion-slosh-splash-ripple: 1.5;
+    /* A progress bar without a value: one sweep of its light across the
+       track. Its sheen: one pass over the filled part. */
+    --motion-indeterminate-dur: 1.4s;
+    --motion-progress-sheen-dur: 1.6s;
   }
   :root[data-motion='subtle'] {
     --motion-control-dur: 80ms;
@@ -950,6 +1032,8 @@ body {
     --motion-slosh-splash-tilt: 4deg;
     --motion-slosh-splash-run: 2.2;
     --motion-slosh-splash-ripple: 1;
+    --motion-indeterminate-dur: 2.2s;
+    --motion-progress-sheen-dur: 2.6s;
   }
   :root[data-motion='off'] {
     --motion-control-dur: 0s;
@@ -998,7 +1082,27 @@ body {
     --motion-slosh-splash-tilt: 0deg;
     --motion-slosh-splash-run: 0;
     --motion-slosh-splash-ripple: 0;
+    /* Long rather than 0; both stop outright at this level, below. */
+    --motion-indeterminate-dur: 60s;
+    --motion-progress-sheen-dur: 60s;
+  }
+  /* A progress bar without a value sends a short light across its track, and
+     a running one a sheen over its fill. A meter never moves: it shows a level
+     that stands, and a light on it would say something is under way. Both
+     stop at "off", where a bar without a value keeps its stripes, and under
+     reduced motion even for storm: wanting more movement is not wanting
+     something that never stops. */
+  :root:not([data-motion='off']) .glim-progress--busy > .glim-progress-fill {
+    width: 35%;
+    background: var(--accent);
+    opacity: 1;
+    animation: glim-indeterminate var(--motion-indeterminate-dur) ease-in-out infinite;
+  }
+  :root:not([data-motion='off']) .glim-progress:not(.glim-progress--busy, .glim-progress--paused, .glim-progress--done, .glim-progress--failed) .glim-progress-fill::after {
+    animation: glim-progress-sheen var(--motion-progress-sheen-dur) ease-in-out infinite;
   }
+  .glim-progress-fill { transition: width var(--motion-control-dur) linear; }
+
   :root[data-motion='off'] * { transition-duration: 0s !important; }
   :root[data-motion='subtle'] .transition,
   :root[data-motion='subtle'] .transition-colors,
@@ -1071,6 +1175,8 @@ body {
   --motion-slosh-splash-tilt: 10deg;
   --motion-slosh-splash-run: 4.8;
   --motion-slosh-splash-ripple: 2;
+  --motion-indeterminate-dur: 0.9s;
+  --motion-progress-sheen-dur: 1.1s;
 }
 :root[data-motion='storm'][dir="rtl"] { --glim-toast-slide: -44px; }
 
@@ -1840,6 +1946,11 @@ body {
 .glim-btn-sm { min-width: var(--btn-w-sm); }
 .glim-btn-md { min-width: var(--btn-w-md); }
 .glim-btn-lg { min-width: var(--btn-w-lg); }
+/* A foot holds several answers in one row, so they hug their words down to the
+   smallest floor. An explicit stage is a width of its own and stays. */
+.glim-modal-foot > :is(.glim-btn-sm, .glim-btn-md, .glim-btn-lg),
+.glim-modal-foot > .glim-tip-wrap > :is(.glim-btn-sm, .glim-btn-md, .glim-btn-lg) { min-width: var(--btn-w-xs); }
+.glim-path > .glim-btn:not(.glim-btn-icon) { min-width: 0; }
 
 /* Rule 40. A surface-filled button's hovered ground takes 22% of the tint and
    its glyph all of it; its words keep the text colour, which the accent on a
@@ -1861,7 +1972,7 @@ body {
 .glim-btn-bare:not(:disabled):is(:hover, :focus-visible) {
   color: var(--btn-tint);
 }
-.glim-btn-bare:is(:hover, :focus-visible) {
+.glim-btn-bare:not([aria-pressed="true"]):is(:hover, :focus-visible) {
   background-color: transparent;
 }
 
@@ -2196,14 +2307,17 @@ body {
    height, sized by its glyph. In a mode that shows words it is an ordinary
    button with its label (see `ButtonVariant` in packages/react/src/Button.tsx). */
 .glim-btn-icon {
-  width: var(--btn-h);
-  min-width: 0;
+  min-width: var(--btn-h);
   padding-inline: 0;
 }
+/* A square that holds more than its glyph, such as a count, grows to hold it. */
+.glim-btn-icon:has(> :not(.glim-btn-glyph, .glim-sr-only)) {
+  padding-inline: var(--btn-pad-x);
+}
 
 /* A row action promoted to a key control stays square at the other height. */
 .glim-btn-icon.glim-btn-key {
-  width: var(--btn-h-key);
+  min-width: var(--btn-h-key);
 }
 
 /* A glyph alone in a square fills half its box, as on a 32px icon badge with a
@@ -2493,6 +2607,13 @@ body {
   outline: 2px solid var(--focus-ring);
   outline-offset: 1px;
 }
+/* In a well or a sub-card the trigger stands among fields, so it takes their
+   ground and hovers up the ramp (rule 21). */
+:is(.glim-well, .glim-subcard) :is(.glim-select-trigger:not(.glim-select-trigger--inset), .glim-combobox-control) {
+  border-color: transparent;
+  background: var(--carbon-surface3);
+}
+:is(.glim-well, .glim-subcard) .glim-select-trigger:not(.glim-select-trigger--inset):hover { background: var(--carbon-hover-raised); }
 .glim-select-trigger[data-disabled] { opacity: 0.5; cursor: default; }
 /* Busy: the trigger keeps its focus and takes no input until the answer is back. */
 .glim-select-trigger[data-readonly] { opacity: 0.5; cursor: progress; }
@@ -2661,6 +2782,37 @@ body {
 @media (pointer: coarse) {
   .glim-select-item { min-height: 2.75rem; }
 }
+/* The box a closed list hangs from stays on the body for the machine, out of
+   the way. */
+.glim-select-positioner:has(> [hidden]) { display: none; }
+/* A list that draws a context menu's rows (Select with rows="menu"): the menu's
+   panel, and the states the machine marks with attributes instead of the focus.
+   The wash comes before the highlight, which covers it, as a hover does in the
+   menu. */
+.glim-select-content--menu {
+  min-width: max(var(--reference-width, 0px), 16rem);
+  padding: 0.35rem;
+  box-shadow: var(--elevation), var(--hairline);
+}
+.glim-select-content--menu .glim-menu-item[data-state="checked"] { background-color: var(--accent-soft); }
+.glim-select-content--menu .glim-menu-item[data-highlighted] { background-color: var(--carbon-hover); }
+.glim-select-content--menu .glim-menu-item[data-disabled] {
+  opacity: 0.45;
+  background-color: transparent;
+  cursor: default;
+}
+.glim-select-content--menu .glim-menu-tick:not([data-state="checked"]) { visibility: hidden; }
+.glim-select-content--menu .glim-select-group + .glim-select-group {
+  margin-top: 0.3rem;
+  padding-top: 0.3rem;
+  border-top-color: color-mix(in srgb, var(--carbon-text) 9%, transparent);
+}
+@media (pointer: coarse) {
+  .glim-select-content--menu .glim-menu-item {
+    height: auto;
+    min-height: 2.75rem;
+  }
+}
 .glim-select-empty {
   padding: 0.5rem 0.75rem;
   color: var(--carbon-text-muted);
@@ -2700,6 +2852,7 @@ body {
 .glim-slider-thumb[data-dragging] { cursor: grabbing; }
 .glim-slider-thumb[data-disabled] { opacity: 0.5; cursor: default; }
 .glim-slider-value {
+  margin-inline-start: auto;
   color: var(--carbon-text);
   font-size: var(--text-body);
   font-variant-numeric: tabular-nums;
@@ -2718,7 +2871,7 @@ body {
   :where([class*="glim-"]) :where(*, ::before, ::after) {
     box-sizing: border-box;
   }
-  :where(.glim-btn, .glim-badge, .glim-readme-btn, .glim-toggle-track, .glim-toast-dismiss, .glim-window-button, .glim-give-network, .glim-give-coin, .glim-give-amount, .glim-sel-seg, .glim-num-field) {
+  :where(.glim-btn, .glim-badge, .glim-readme-btn, .glim-toggle-track, .glim-toast-dismiss, .glim-window-button, .glim-give-network, .glim-give-coin, .glim-give-amount, .glim-sel-seg, .glim-num-field, .glim-menu-item, .glim-menu-head-edit, .glim-menubar-item, .glim-checkbox, .glim-input, .glim-secret-eye, .glim-icon-btn, .glim-glyph-field-input, .glim-nav-row-main, button.glim-nav-row) {
     margin: 0;
     padding: 0;
     border: 0 solid;
@@ -2810,11 +2963,20 @@ body {
   }
   .glim-modal-foot {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     justify-content: flex-end;
     gap: 0.75rem;
     padding: 1rem 1.25rem;
   }
+  /* A button keeps its words: in a flex row what stands beside it gives way, and
+     in a foot it moves to the next line. In the layer, so an app's own flex
+     rule for a button still wins. */
+  .glim-btn {
+    flex-shrink: 0;
+    max-width: 100%;
+  }
+  .glim-modal-foot > .glim-tip-wrap { flex: none; }
 
   /* The fills a button can take (ButtonTone). `ok`, `danger` and `warn` put the
      solid status tokens under the ground's ink: in both themes the solid values
@@ -2862,7 +3024,7 @@ body {
     width: 2.25rem;
     height: 1.25rem;
     border-radius: var(--radius-pill);
-    background-color: var(--carbon-surface3);
+    background-color: var(--toggle-off);
     transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
   }
   .glim-toggle-track[aria-checked="true"] { background-color: var(--accent); }
@@ -3233,7 +3395,7 @@ body {
     display: flex;
     align-items: flex-start;
     gap: 0.625rem;
-    width: 20rem;
+    width: 24rem;
     max-width: calc(100vw - 2rem);
     padding: 0.75rem 0.875rem;
     border-radius: var(--radius-card);
@@ -3250,14 +3412,32 @@ body {
   .glim-toast-glyph--success { color: var(--status-ok-solid); }
   .glim-toast-glyph--warn { color: var(--status-warn-solid); }
   .glim-toast-glyph--fail { color: var(--status-fail-solid); }
-  .glim-toast-message {
+  .glim-toast-body {
+    display: flex;
     flex: 1 1 0%;
+    flex-direction: column;
+    gap: 0.5rem;
     min-width: 0;
+  }
+  .glim-toast-message {
     margin: 0;
+    text-wrap: pretty;
     font-size: 0.875rem;
     line-height: 1.375;
     overflow-wrap: break-word;
   }
+  /* A phone keeps the window in view: the newest two across its width. */
+  @media (max-width: 600px) {
+    .glim-toast-stack {
+      inset-inline-start: 0;
+      padding: 0.5rem;
+    }
+    .glim-toast-stack > :nth-last-child(n + 3) { display: none; }
+    .glim-toast-card {
+      width: 100%;
+      max-width: none;
+    }
+  }
   .glim-toast-dismiss {
     flex-shrink: 0;
     margin: -0.25rem;
@@ -3432,7 +3612,12 @@ body {
      so two always fit a row. */
   .glim-sel--pairs { align-items: stretch; }
   @media (max-width: 600px) {
-    .glim-sel--pairs { --seg-basis: calc(50% - 0.25rem); }
+    .glim-sel--pairs {
+      --seg-basis: calc(50% - 0.25rem);
+      width: 100%;
+    }
+    /* A pill around several rows bulges at its ends. */
+    .glim-sel--pairs.glim-sel--well { border-radius: var(--radius-card); }
   }
 
   .glim-sel-seg {
@@ -3540,6 +3725,7 @@ body {
   .glim-sel-label--wrap {
     white-space: normal;
     text-wrap: balance;
+    overflow-wrap: break-word;
   }
 
   /* Under a finger a 20px pill is too small to hit. A well is a row of
@@ -3555,7 +3741,8 @@ body {
      its glyph reads the fill's ink. */
   .glim-sel-seg.glim-hue-icon:not(.glim-active) > svg,
   .glim-sel-tile.glim-hue-icon:not(.glim-active) > svg,
-  .glim-nav-row:not(.glim-active) > svg {
+  .glim-nav-row:not(.glim-active) > svg,
+  .glim-nav-row:not(.glim-active) > .glim-nav-row-main > svg {
     color: var(--accent-glyph);
   }
 
@@ -3685,6 +3872,46 @@ body {
     .glim-nav-row:not(.glim-active):hover:dir(rtl) { translate: -2px 0; }
   }
   .glim-nav-row--centred { justify-content: center; }
+  button.glim-nav-row {
+    width: 100%;
+    text-align: start;
+    cursor: pointer;
+  }
+  /* A row with something beside its link. The link's press covers the row, and
+     what stands in a slot lies above that press. The narrow rail has no room for
+     a slot. */
+  .glim-nav-row--slots { gap: 0.5rem; }
+  /* A tree's row: each level steps in by the chevron's width, and the smaller
+     glyph and gap leave a deep name its room. */
+  .glim-nav-row--tree {
+    gap: 0.5rem;
+    padding-inline-start: calc(0.5rem + var(--nav-depth, 0) * 0.85rem);
+  }
+  .glim-nav-row--tree > .glim-nav-row-main { gap: 0.5rem; }
+  .glim-nav-row-main {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: 0.75rem;
+    min-width: 0;
+    text-align: start;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .glim-nav-row-main::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+  }
+  .glim-nav-row-slot {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    gap: 0.25rem;
+  }
   .glim-nav-label {
     min-width: 0;
     overflow: hidden;
@@ -3815,4 +4042,858 @@ body {
   .glim-subcard .glim-sel--chip .glim-sel-seg:not(.glim-active):not(:disabled):hover {
     background-color: var(--carbon-hover-raised);
   }
+
+  /* The general window (Window): the confirm surface's frame, grown to hold a
+     form, a list or a whole tool at three widths. Its notch sits in the card's
+     padding, so the body starts far enough down to clear it, and the start of
+     the foot holds one quiet line, such as where the work carries on. */
+  .glim-window { max-width: 40rem; }
+  .glim-window--wide { max-width: 58rem; }
+  .glim-window--full {
+    max-width: 80rem;
+    height: calc(100vh - 2rem - var(--window-bar));
+    max-height: none;
+  }
+  .glim-window-title { margin: 0; }
+  .glim-window-body {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding-top: 1.75rem;
+  }
+  /* The start text gives way first and wraps, so a button does not drop to the
+     next line for a few pixels. */
+  .glim-window-start {
+    flex: 1 1 0;
+    min-width: min(4rem, 100%);
+    overflow-wrap: anywhere;
+    font-size: var(--text-meta);
+    color: var(--carbon-text-muted);
+  }
+
+  /* The context menu and the menus of the bar (ContextMenu, MenuBar). Both sit
+     on the body, so no card or scroll box clips them, and a submenu is a menu
+     of its own beside its row: inside the first one, that menu's scrolling
+     would cut it off. Above windows, below toasts and bubbles. */
+  .glim-menu {
+    position: fixed;
+    z-index: 60;
+    display: flex;
+    flex-direction: column;
+    min-width: 16rem;
+    max-height: calc(100vh - 2rem);
+    overflow: auto;
+    padding: 0.35rem;
+    border-radius: var(--radius-card);
+    background-color: var(--carbon-surface);
+    box-shadow: var(--elevation), var(--hairline);
+  }
+  .glim-menu-item {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: 0.6rem;
+    height: 2rem;
+    padding-inline: 0.6rem;
+    border-radius: var(--radius-control);
+    font-size: var(--text-body);
+    text-align: start;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+  /* A menu the pointer opened carries data-pointer until a key is pressed in
+     it, so the first row it focused stays unlit (focusFirstMenuRow). */
+  .glim-menu-item:hover,
+  .glim-menu:not([data-pointer]) .glim-menu-item:focus-visible,
+  .glim-menu-item[aria-expanded="true"] { background-color: var(--carbon-hover); }
+  .glim-menu-item:disabled {
+    opacity: 0.45;
+    cursor: default;
+  }
+  .glim-menu-item:disabled:hover { background-color: transparent; }
+  /* The current choice of a radio group, washed rather than filled, since the
+     tick at its end already says which. */
+  .glim-menu-item--current { background-color: var(--accent-soft); }
+  /* Also the empty room of a row without a glyph, so every label starts at one edge. */
+  .glim-menu-glyph {
+    display: inline-grid;
+    flex: none;
+    width: 0.95rem;
+    height: 0.95rem;
+    color: var(--accent-glyph);
+  }
+  .glim-menu-glyph > svg {
+    width: 100%;
+    height: 100%;
+  }
+  .glim-menu-dot {
+    flex: none;
+    width: 0.95rem;
+    height: 0.95rem;
+    border-radius: var(--radius-pill);
+  }
+  .glim-menu-label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .glim-menu-end {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    margin-inline-start: auto;
+  }
+  .glim-menu-tick { color: var(--accent-glyph); }
+  .glim-menu-count {
+    padding-inline-start: 1.2rem;
+    font-size: var(--text-meta);
+    color: var(--carbon-text-muted);
+  }
+  .glim-menu-caret { color: var(--carbon-text-muted); }
+  .glim-menu-caret svg {
+    width: 0.7rem;
+    height: 0.7rem;
+    rotate: -90deg;
+  }
+  .glim-menu-caret:dir(rtl) svg { rotate: 90deg; }
+  .glim-menu-sep {
+    flex: none;
+    height: 1px;
+    margin: 0.3rem 0.4rem;
+    background-color: color-mix(in srgb, var(--carbon-text) 9%, transparent);
+  }
+  .glim-menu-head {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-height: 1.6rem;
+    padding-block: 0.35rem 0.2rem;
+    padding-inline: 0.6rem 0.3rem;
+    font-size: var(--text-meta);
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--carbon-text-muted);
+  }
+  .glim-menu-head-edit {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: 1.6rem;
+    height: 1.6rem;
+    margin-inline-start: auto;
+    border-radius: var(--radius-control);
+    color: var(--accent-glyph);
+    cursor: pointer;
+  }
+  .glim-menu-head-edit:hover,
+  .glim-menu:not([data-pointer]) .glim-menu-head-edit:focus-visible { background-color: var(--carbon-hover); }
+  .glim-menu-head-edit svg {
+    width: 0.85rem;
+    height: 0.85rem;
+  }
+
+  /* The menu bar of a desktop-style app's head row: bare words that take the
+     second surface under the pointer and while their menu is open. */
+  .glim-menubar {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: 2px;
+  }
+  .glim-menubar-item {
+    height: 2.2rem;
+    padding-inline: 0.7rem;
+    border-radius: var(--radius-pill);
+    font-weight: 500;
+    color: var(--carbon-text-sub);
+    cursor: pointer;
+  }
+  .glim-menubar-item:hover,
+  .glim-menubar-item[aria-expanded="true"] {
+    background-color: var(--carbon-surface2);
+    color: var(--carbon-text);
+  }
+
+  /* The checkbox (Checkbox, and the box of a menu's checkbox item): the one
+     place a box stands instead of a switch (rule 39). Drawn rather than the
+     system's, at the control radius held small enough to stay a box, and when
+     ticked the accent with the tick in its contrast ink. */
+  .glim-checkbox {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.6rem;
+    min-height: 2rem;
+    padding-inline: 0.4rem;
+    border-radius: var(--radius-control);
+    text-align: start;
+    cursor: pointer;
+  }
+  .glim-checkbox:hover { background-color: var(--carbon-hover); }
+  .glim-checkbox:disabled {
+    opacity: 0.55;
+    cursor: default;
+  }
+  .glim-checkbox:disabled:hover { background-color: transparent; }
+  .glim-checkbox-box {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: 1.125rem;
+    height: 1.125rem;
+    border-radius: min(var(--radius-control), 5px);
+    background-color: color-mix(in srgb, var(--carbon-surface3) 60%, transparent);
+    color: transparent;
+  }
+  .glim-checkbox-box > svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  [aria-checked="true"] > .glim-checkbox-box {
+    background-color: var(--accent);
+    color: var(--accent-contrast);
+  }
+  /* The slim checkbox: the box alone, for a row or a cell of a dense list,
+     where the frame's padding and hover ground would crowd the row. The row
+     around it gives the hover, and the box only firms up. */
+  .glim-checkbox--slim {
+    min-height: 0;
+    padding: 0;
+    border-radius: min(var(--radius-control), 5px);
+  }
+  .glim-checkbox--slim:hover { background-color: transparent; }
+  .glim-checkbox--slim[aria-checked="false"]:not(:disabled):hover > .glim-checkbox-box {
+    background-color: var(--carbon-surface3);
+  }
+
+  /* A key cap (Kbd), in the app's own type rather than the browser's monospace. */
+  .glim-kbd {
+    display: inline-grid;
+    place-items: center;
+    height: 1.2rem;
+    padding-inline: 0.4rem;
+    border-radius: var(--radius-control);
+    background-color: var(--carbon-surface3);
+    font-family: inherit;
+    font-size: var(--text-meta);
+    color: var(--carbon-text-sub);
+    white-space: nowrap;
+  }
+
+  /* The data pill (Pill): one value of a row, quiet at rest. A state takes a
+     wash of its solid colour over the second surface, so the text keeps the
+     body ink and a column of pills still reads as one column. */
+  .glim-well,
+  .glim-subcard {
+    --pill-ground: var(--carbon-surface3);
+    --pill-state: var(--carbon-hover-raised);
+  }
+  .glim-pill {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    height: 1.35rem;
+    padding-inline: 0.55rem;
+    border-radius: var(--radius-pill);
+    background-color: var(--pill-ground, var(--carbon-surface2));
+    font-size: var(--text-meta);
+    color: var(--carbon-text-sub);
+    white-space: nowrap;
+  }
+  .glim-pill--state { background-color: var(--pill-state, var(--carbon-surface3)); color: var(--carbon-text); }
+  .glim-pill--ok { background-color: color-mix(in srgb, var(--pill-ground, var(--carbon-surface2)), var(--status-ok-solid) 30%); color: var(--carbon-text); }
+  .glim-pill--warn { background-color: color-mix(in srgb, var(--pill-ground, var(--carbon-surface2)), var(--status-warn-solid) 35%); color: var(--carbon-text); }
+  .glim-pill--fail { background-color: color-mix(in srgb, var(--pill-ground, var(--carbon-surface2)), var(--status-fail-solid) 35%); color: var(--carbon-text); }
+
+  /* A text field (PasswordField, CopyField): borderless and filled (rule 14),
+     a step up the ramp on focus and inside a sub-card, like the number field.
+     It fills its column; a width belongs to the wrapper around it. */
+  .glim-input {
+    width: 100%;
+    min-width: 0;
+    height: var(--btn-h);
+    padding-inline: 0.75rem;
+    border-radius: var(--radius-control);
+    background-color: var(--carbon-surface2);
+    color: var(--carbon-text);
+    font-size: var(--text-body);
+    line-height: 1.25rem;
+  }
+  .glim-input:focus,
+  .glim-well .glim-input,
+  .glim-subcard .glim-input { background-color: var(--carbon-surface3); }
+  .glim-well .glim-num-field { background-color: var(--carbon-surface3); }
+  .glim-well .glim-num-field:focus { background-color: var(--carbon-hover-raised); }
+  .glim-well .glim-input:focus,
+  .glim-subcard .glim-input:focus { background-color: var(--carbon-hover-raised); }
+  .glim-input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .glim-input::placeholder { color: var(--carbon-text-muted); }
+  .glim-input--mono {
+    font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
+    font-size: var(--text-subline);
+    text-overflow: ellipsis;
+  }
+
+  /* A few lines of text (TextArea): the field's look, grown by its corner. */
+  .glim-input--area {
+    display: block;
+    height: auto;
+    min-height: calc(var(--btn-h) * 2);
+    padding-block: 0.4rem;
+    resize: vertical;
+  }
+
+  /* One labelled row (FieldRow, rule 35): the name at the start and its controls
+     together at the end. The name's margin takes the free room, so a growing
+     control gets all of it, and a control that drops under the name keeps the
+     row's end through the justify. */
+  .glim-field-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.35rem 0.75rem;
+    min-height: var(--btn-h);
+  }
+  .glim-field-row-name {
+    display: flex;
+    flex: 0 1 auto;
+    align-items: center;
+    gap: 0.35rem;
+    min-width: 0;
+    margin-inline-end: auto;
+  }
+  .glim-field-row-label small {
+    font-size: var(--text-meta);
+    color: var(--carbon-text-muted);
+  }
+  .glim-field-row > :not(.glim-field-row-name) { max-width: 100%; }
+
+  .glim-field-row > .glim-slider {
+    flex: 1 1 13rem;
+    min-width: 0;
+  }
+  .glim-field-row > .glim-combobox {
+    flex: 0 1 16rem;
+    min-width: 0;
+  }
+
+  /* Rows that share a column for their names (FieldRowGroup): a grid as wide as
+     the longest name, handed down to each row. Their controls sit in one cell,
+     and on a phone the rows go back to wrapping on their own. */
+  .glim-field-row-group {
+    display: grid;
+    grid-template-columns: repeat(var(--field-columns, 1), max-content minmax(0, 1fr));
+    gap: 0.5rem 1.5rem;
+  }
+  .glim-field-row-group > .glim-field-row {
+    display: grid;
+    grid-column: span 2;
+    grid-template-columns: subgrid;
+    column-gap: 0.75rem;
+  }
+  .glim-field-row-group > .glim-field-row--wide { grid-column: 1 / -1; }
+  .glim-field-row--wide > .glim-field-row-controls { grid-column: 2 / -1; }
+  .glim-field-row-controls {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.35rem 0.75rem;
+    min-width: 0;
+  }
+  @media (max-width: 600px) {
+    .glim-field-row-group {
+      display: flex;
+      flex-direction: column;
+    }
+    .glim-field-row-group > .glim-field-row { display: flex; }
+    .glim-field-row-controls { flex: 1 1 13rem; }
+  }
+
+  /* A field with a glyph inside (GlyphField). The box is the field, so it takes
+     the input's focus step, and what stands after the input sits in its room. */
+  .glim-glyph-field {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding-inline: 0.65rem 0.15rem;
+    cursor: text;
+  }
+  .glim-glyph-field:focus-within { background-color: var(--carbon-surface3); }
+  :is(.glim-well, .glim-subcard) .glim-glyph-field:focus-within { background-color: var(--carbon-hover-raised); }
+  .glim-glyph-field-glyph {
+    display: inline-grid;
+    flex: none;
+    width: 0.95rem;
+    height: 0.95rem;
+    color: var(--carbon-text-sub);
+  }
+  .glim-glyph-field-glyph > svg {
+    width: 100%;
+    height: 100%;
+  }
+  .glim-glyph-field-input {
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+    text-overflow: ellipsis;
+  }
+  .glim-glyph-field-input::placeholder { color: var(--carbon-text-muted); }
+  .glim-glyph-field > .glim-icon-btn {
+    width: 1.6rem;
+    height: 1.6rem;
+  }
+
+  /* A small holder for a glyph (GlyphTile). It fills with the accent while the
+     row, button or link around it is reached ("Lists"). */
+  .glim-tile {
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: var(--radius-control);
+    color: var(--accent-glyph);
+  }
+  .glim-tile > svg {
+    width: 1rem;
+    height: 1rem;
+  }
+  .glim-tile--quiet { color: var(--carbon-text-sub); }
+  .glim-tile--ground { background-color: var(--carbon-surface3); }
+  .glim-tile--active,
+  :is(button, a, .glim-list-row, .glim-nav-row):is(:hover, :focus-visible, :focus-within) > .glim-tile {
+    background-color: var(--accent);
+    color: var(--accent-contrast);
+  }
+
+  /* A short list of facts in columns (Table). Hairlines at low opacity part the
+     rows, and there is no box around them (rule 5). */
+  .glim-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--text-subline);
+  }
+  .glim-table :is(th, td) {
+    padding: 0.4rem 0.5rem;
+    text-align: start;
+    white-space: nowrap;
+  }
+  .glim-table th {
+    font-size: var(--text-meta);
+    font-weight: 500;
+    color: var(--carbon-text-muted);
+  }
+  .glim-table tr + tr td,
+  .glim-table thead + tbody tr:first-child td {
+    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--carbon-text) 7%, transparent);
+  }
+  .glim-table :is(th, td).glim-table-end { text-align: end; }
+  .glim-table td.glim-table-muted { color: var(--carbon-text-muted); }
+  .glim-table td.glim-table-accent { color: var(--accent-ink); }
+
+  /* A path and its picker's button (PathField). */
+  .glim-path {
+    display: flex;
+    flex: 1 1 13rem;
+    align-items: center;
+    gap: 0.4rem;
+    min-width: 0;
+    max-width: 30rem;
+  }
+  .glim-path > .glim-input { flex: 1; }
+
+  /* A hierarchy to walk through (Tree). Each level steps in by the chevron's
+     width, and the chosen row is filled as a selection is (rule 3). */
+  .glim-tree {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+    overflow: auto;
+  }
+  .glim-tree-row {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: 0.3rem;
+    height: var(--btn-h);
+    padding-inline: calc(0.3rem + var(--tree-level, 0) * 0.85rem) 0.55rem;
+    border-radius: var(--radius-control);
+    font-size: var(--text-body);
+    cursor: pointer;
+    user-select: none;
+  }
+  .glim-tree-row:not([aria-selected="true"]):hover { background-color: var(--carbon-hover); }
+  .glim-well .glim-tree-row:not([aria-selected="true"]):hover { background-color: var(--carbon-surface3); }
+  .glim-tree-row[aria-selected="true"] {
+    background-color: var(--accent);
+    color: var(--accent-contrast);
+  }
+  .glim-tree-toggle {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: 1.1rem;
+    height: 1.1rem;
+    border-radius: var(--radius-control);
+    color: var(--carbon-text-muted);
+  }
+  .glim-tree-toggle:hover {
+    background-color: color-mix(in srgb, currentColor 18%, transparent);
+    color: var(--carbon-text);
+  }
+  .glim-tree-toggle > svg {
+    width: 0.7rem;
+    height: 0.7rem;
+    rotate: -90deg;
+  }
+  .glim-tree-toggle:dir(rtl) > svg { rotate: 90deg; }
+  [aria-expanded="true"] > .glim-tree-toggle > svg { rotate: none; }
+  .glim-tree-glyph {
+    display: inline-grid;
+    flex: none;
+    width: 1.05rem;
+    height: 1.05rem;
+    color: var(--accent-glyph);
+  }
+  .glim-tree-glyph > svg {
+    width: 100%;
+    height: 100%;
+  }
+  [aria-selected="true"] > :is(.glim-tree-toggle, .glim-tree-glyph) { color: var(--accent-contrast); }
+  .glim-tree-label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* The round mark on a row picked for an action on many (RowMark, rule 39).
+     The fill reads --accent, so a row with a rainbow position hands it its hue. */
+  .glim-rowmark {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: 1.125rem;
+    height: 1.125rem;
+    border-radius: var(--radius-pill);
+    background-color: color-mix(in srgb, var(--carbon-surface3) 60%, transparent);
+    color: transparent;
+  }
+  .glim-rowmark > svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .glim-rowmark--on {
+    background-color: var(--accent);
+    color: var(--accent-contrast);
+  }
+
+  /* One row of a list (ListRow). The buttons stand at their place while out of
+     sight, so a hover moves nothing, and a row without hover shows them (rule 6). */
+  .glim-list-row {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    min-width: 0;
+    min-height: 2.6rem;
+    padding-inline: 0.5rem;
+    border-radius: var(--radius-control);
+  }
+  .glim-list-row:is(:hover, :focus-within) { background-color: var(--carbon-hover); }
+  .glim-list-row--opens { cursor: pointer; }
+  .glim-list-row-tile {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: var(--radius-control);
+    color: var(--accent-glyph);
+  }
+  .glim-list-row-tile > svg {
+    width: 1.05rem;
+    height: 1.05rem;
+  }
+  .glim-list-row:is(:hover, :focus-within) > .glim-list-row-tile {
+    background-color: var(--accent);
+    color: var(--accent-contrast);
+  }
+  .glim-list-row-name {
+    display: flex;
+    flex: 1 1 0;
+    align-items: center;
+    gap: 0.4rem;
+    min-width: 0;
+    white-space: nowrap;
+  }
+  .glim-list-row-name--mono {
+    font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
+    font-size: var(--text-subline);
+  }
+  .glim-list-row-title {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .glim-list-row-tip { display: contents; }
+  .glim-list-row-badges {
+    display: flex;
+    flex: none;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.35rem;
+  }
+  .glim-list-row-actions {
+    display: flex;
+    flex: none;
+    gap: 0.15rem;
+    opacity: 0;
+  }
+  .glim-list-row:is(:hover, :focus-within) > .glim-list-row-actions { opacity: 1; }
+  @media (hover: none) {
+    .glim-list-row-actions { opacity: 1; }
+  }
+  @media (max-width: 600px) {
+    .glim-list-row-badges { display: none; }
+  }
+
+  /* A glyph in a square in every label mode (IconButton), half its box as any
+     glyph alone (rule 13). It has no ground, so .glim-btn-bare turns the glyph
+     to the tint when it is reached (rule 40). The gap holds the place of a
+     button a row does not have. */
+  .glim-icon-btn {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: var(--btn-h);
+    height: var(--btn-h);
+    border-radius: var(--radius-control);
+    color: var(--carbon-text-sub);
+    cursor: pointer;
+  }
+  .glim-icon-btn > svg {
+    width: 1rem;
+    height: 1rem;
+  }
+  .glim-icon-btn:disabled {
+    opacity: 0.45;
+    cursor: default;
+  }
+  .glim-icon-btn[aria-pressed="true"] {
+    background-color: var(--accent-soft);
+    color: var(--accent-glyph);
+  }
+  .glim-icon-btn-gap {
+    flex: none;
+    width: var(--btn-h);
+    height: var(--btn-h);
+  }
+
+  /* The reveal eye ("The reveal eye" in the design language): a bare glyph in
+     the field's trailing padding, neutral, and the wrapper as wide as a plain
+     field. Edge draws an eye of its own into every password field, which
+     would stand beside this one. */
+  .glim-secret {
+    position: relative;
+    display: block;
+    width: 100%;
+    min-width: 0;
+  }
+  .glim-secret > .glim-input { padding-inline-end: 2.4rem; }
+  .glim-secret > .glim-input::-ms-reveal { display: none; }
+  .glim-secret-eye {
+    position: absolute;
+    inset-inline-end: 0.35rem;
+    top: 50%;
+    translate: 0 -50%;
+    display: grid;
+    place-items: center;
+    width: 1.6rem;
+    height: 1.6rem;
+    border-radius: var(--radius-control);
+    color: var(--carbon-text-muted);
+    cursor: pointer;
+  }
+  .glim-secret-eye:hover { color: var(--carbon-text); }
+  .glim-secret-eye > svg {
+    width: 0.95rem;
+    height: 0.95rem;
+  }
+
+  /* A value to copy (CopyField): the value in monospace, read-only so it can
+     still be selected and scrolled, and its button beside it. */
+  .glim-copy {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    width: 100%;
+    min-width: 0;
+  }
+  .glim-copy > .glim-input { flex: 1; }
+
+  /* A field's width (FieldWidth), on the input or on the wrapper that holds it.
+     After the wrappers, whose own width it replaces. */
+  .glim-field--short {
+    flex: none;
+    width: 5.5rem;
+  }
+  .glim-field--medium {
+    flex: none;
+    width: 12rem;
+    max-width: 100%;
+  }
+  .glim-field--wide {
+    flex: none;
+    width: 22rem;
+    max-width: 100%;
+  }
+  .glim-field--grow {
+    flex: 1 1 13rem;
+    width: auto;
+    min-width: 0;
+  }
+
+  /* Words for a screen reader alone, such as the "Copied" a copy button
+     announces. */
+  .glim-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  /* The meter (Meter): a level on the third surface, thin beside a row's name
+     or as wide as its column. At its threshold the fill turns to the fault
+     colour. In the active row of a rail it takes the row's contrast ink, as
+     the row's count does. */
+  .glim-meter-track {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    border-radius: var(--radius-pill);
+    background-color: var(--carbon-surface3);
+  }
+  .glim-meter-track--small {
+    display: inline-block;
+    flex: none;
+    width: 2.6rem;
+    height: 0.35rem;
+    vertical-align: middle;
+  }
+  .glim-meter-track--medium {
+    width: 100%;
+    height: 0.55rem;
+  }
+  .glim-meter-fill {
+    display: block;
+    height: 100%;
+    border-radius: inherit;
+    background-color: var(--accent);
+  }
+  /* The quiet meter: slim and grey, for a footer line or a dense list, where
+     an accent bar on every row would outshout the names beside it. Inside a
+     button it takes the accent when the button is reached, as the button's
+     own glyph does (rule 40). The threshold still turns it red. */
+  .glim-meter-track--quiet {
+    height: 0.35rem;
+    background-color: var(--carbon-surface2);
+  }
+  .glim-meter-track--quiet > .glim-meter-fill { background-color: var(--carbon-text-muted); }
+  :is(button, a):is(:hover, :focus-visible) .glim-meter-track--quiet:not(.glim-meter-track--full) > .glim-meter-fill {
+    background-color: var(--accent);
+  }
+  .glim-meter-track--full .glim-meter-fill { background-color: var(--status-fail-solid); }
+  .glim-active .glim-meter-track { background-color: color-mix(in srgb, var(--accent-contrast) 22%, transparent); }
+  .glim-active .glim-meter-fill { background-color: var(--accent-contrast); }
+
+  /* The progress bar (ProgressBar): a thicker track whose fill carries a
+     sheen while the work runs. Paused takes the waiting tone and a failure
+     the fault colour (rule 4). */
+  .glim-progress {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 0.6rem;
+    overflow: hidden;
+    border-radius: var(--radius-pill);
+    background-color: var(--carbon-surface3);
+  }
+  .glim-progress-fill {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    overflow: hidden;
+    border-radius: inherit;
+    background-color: var(--accent);
+  }
+  .glim-progress-fill::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 0.45) 50%, transparent 80%);
+    translate: -100% 0;
+  }
+  .glim-progress--paused .glim-progress-fill { background-color: var(--status-neutral-solid); }
+  .glim-progress--failed .glim-progress-fill { background-color: var(--status-fail-solid); }
+
+  /* Without a value the track shows stripes, which no value could be
+     mistaken for. A progress bar swaps them for a light that crosses the
+     track, set up in the motion gate. */
+  :is(.glim-meter-track--busy, .glim-progress--busy) > :is(.glim-meter-fill, .glim-progress-fill) {
+    position: absolute;
+    inset-block: 0;
+    left: 0;
+    width: 100%;
+    background: repeating-linear-gradient(-45deg, var(--accent) 0 4px, transparent 4px 8px);
+    opacity: 0.5;
+  }
+  .glim-meter-track--quiet.glim-meter-track--busy > .glim-meter-fill {
+    background: repeating-linear-gradient(-45deg, var(--carbon-text-muted) 0 4px, transparent 4px 8px);
+  }
+}
+
+/* Outside the layer, or the house ring's offset would win: inside a menu the
+   ring is drawn on the row, where the menu's edge cannot clip it. */
+.glim-menu-item:focus-visible,
+.glim-menu-head-edit:focus-visible,
+.glim-tree-row:focus-visible,
+.glim-list-row:focus-visible { outline-offset: -2px; }
+.glim-menu[data-pointer] :focus-visible { outline: none; }
+/* Also outside the layer: a field says it has the focus with its fill and its
+   caret, not with a ring (rule 14). */
+.glim-input:focus-visible,
+.glim-num-field:focus-visible,
+.glim-glyph-field-input:focus-visible { outline: none; }
+/* The ring of a row with slots goes around the row, not around its link alone. */
+.glim-nav-row-main:focus-visible { outline: none; }
+.glim-nav-row--slots:has(> .glim-nav-row-main:focus-visible) {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+/* An app's own rule for links outranks the layer, so a link with a button's look
+   takes its colour back from there. */
+a:is(.glim-btn, .glim-icon-btn) {
+  color: revert-layer;
+  text-decoration: none;
+}
+/* Under the message, at its end. The stage's floor is for a row of buttons. */
+.glim-toast-action {
+  align-self: flex-end;
+  min-width: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .glim-checkbox-box,
+  .glim-rowmark { transition: background-color var(--motion-control-dur) ease; }
+  .glim-list-row-actions { transition: opacity var(--motion-control-dur) ease; }
+  .glim-tree-toggle > svg { transition: rotate var(--motion-control-dur) ease; }
 }