@glimstone/core 4.1.0 → 4.1.2

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;
 }
 
@@ -1935,6 +1946,24 @@ 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); }
+/* A button wider than the whole foot, as on a phone, runs its words onto a
+   second line and grows with them instead of ending in an ellipsis. */
+:is(.glim-modal-foot, .glim-modal-foot > .glim-tip-wrap) > .glim-btn {
+  height: auto;
+  min-height: var(--btn-h);
+  padding-block: 0.375rem;
+}
+:is(.glim-modal-foot, .glim-modal-foot > .glim-tip-wrap) > .glim-btn-key { min-height: var(--btn-h-key); }
+:is(.glim-modal-foot, .glim-modal-foot > .glim-tip-wrap) > .glim-btn > .glim-btn-label {
+  white-space: normal;
+  text-wrap: balance;
+  text-align: center;
+}
+.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
@@ -1956,7 +1985,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;
 }
 
@@ -2291,14 +2320,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
@@ -2588,6 +2620,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; }
@@ -2756,6 +2795,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);
@@ -2795,6 +2865,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;
@@ -2813,7 +2884,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, .glim-menu-item, .glim-menu-head-edit, .glim-menubar-item, .glim-checkbox, .glim-input, .glim-secret-eye) {
+  :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;
@@ -2905,11 +2976,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
@@ -2957,7 +3037,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); }
@@ -3328,7 +3408,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);
@@ -3345,14 +3425,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;
@@ -3527,7 +3625,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 {
@@ -3635,6 +3738,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
@@ -3650,7 +3754,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);
   }
 
@@ -3780,6 +3885,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;
@@ -3929,8 +4074,12 @@ body {
     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 {
-    margin-inline-end: auto;
+    flex: 1 1 0;
+    min-width: min(4rem, 100%);
+    overflow-wrap: anywhere;
     font-size: var(--text-meta);
     color: var(--carbon-text-muted);
   }
@@ -4147,6 +4296,11 @@ body {
   /* 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;
@@ -4154,15 +4308,15 @@ body {
     height: 1.35rem;
     padding-inline: 0.55rem;
     border-radius: var(--radius-pill);
-    background-color: var(--carbon-surface2);
+    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(--carbon-surface3); color: var(--carbon-text); }
-  .glim-pill--ok { background-color: color-mix(in srgb, var(--carbon-surface2), var(--status-ok-solid) 30%); color: var(--carbon-text); }
-  .glim-pill--warn { background-color: color-mix(in srgb, var(--carbon-surface2), var(--status-warn-solid) 35%); color: var(--carbon-text); }
-  .glim-pill--fail { background-color: color-mix(in srgb, var(--carbon-surface2), var(--status-fail-solid) 35%); color: var(--carbon-text); }
+  .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.
@@ -4179,8 +4333,12 @@ body {
     line-height: 1.25rem;
   }
   .glim-input:focus,
-  .glim-well .glim-input { background-color: var(--carbon-surface3); }
-  .glim-well .glim-input:focus { background-color: var(--carbon-hover-raised); }
+  .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;
@@ -4192,6 +4350,364 @@ body {
     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
@@ -4234,6 +4750,28 @@ body {
   }
   .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 {
@@ -4339,9 +4877,36 @@ body {
 /* 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 { outline-offset: -2px; }
+.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 { transition: background-color var(--motion-control-dur) ease; }
+  .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; }
 }