@eos-ui/vue 0.3.0 → 0.5.0

package/dist/style.css

@@ -178,6 +178,8 @@
     .e-radio,
     .e-sel-trigger,
     .e-combo,
+    .e-search,
+    .e-seg,
     .e-avatar {
       border: 1px solid ButtonText;
     }
@@ -464,6 +466,9 @@
 @layer e.reset, e.tokens, e.base, e.primitives, e.blocks, e.controls, e.composites, e.containers, e.page;
 @layer e.primitives {
 .e-avatar {
+    --e-ring: var(--e-border-strong);
+
+    position: relative;
     display: inline-grid;
     place-items: center;
     flex: none;
@@ -471,28 +476,31 @@
     width: var(--e-tap, 44px);
     height: var(--e-tap, 44px);
     overflow: hidden;
-    border: var(--e-stroke-edge) solid var(--e-border-strong);
-
-    --e-bc: var(--e-border-strong);
-
-    outline: var(--e-stroke-edge) solid var(--e-bc);
-    outline-offset: calc(-1 * var(--e-stroke-edge));
+    border: 0;
     border-radius: var(--e-radius-md);
     background: var(--e-surface-tint);
     color: var(--e-primary);
     font: 600 var(--e-text-sm) / 1 var(--e-font-mono);
     letter-spacing: 0.02em;
 }
+
+  /* The ring sits over the picture so an image never covers it. */
+.e-avatar::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-ring);
+    pointer-events: none;
+    transition: box-shadow var(--e-duration-tap) var(--e-easing-out);
+}
 .e-avatar--button {
     position: relative;
     padding: 0;
     cursor: pointer;
-    transition: border-color var(--e-duration-tap) var(--e-easing-out);
 }
 .e-avatar--button:hover {
-    border-color: var(--e-ink);
-
-    --e-bc: var(--e-ink);
+    --e-ring: var(--e-ink);
 }
 .e-avatar--button:focus-visible {
     outline: var(--e-stroke-focus) solid var(--e-focus-ring);
@@ -615,22 +623,24 @@
     --e-hover: color-mix(in srgb, var(--e-fill), var(--e-shade-hover));
     --e-press: color-mix(in srgb, var(--e-fill), var(--e-shade-press));
 
+    /* One rounded box, one control height tall. The slab is an inset shadow shifted up by the lift: the part of the box left uncovered along its bottom, which follows the corners up the sides, in the colour of the box's own edge. It is cut by the box's one outline, so nothing sits behind the curve. Pressing sinks the face over it. */
+    --e-lift: var(--e-depth);
+    --e-band: calc(var(--e-lift) + var(--e-stroke-edge));
+    --e-ring: var(--e-slab);
+
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: var(--e-space-2);
     height: var(--e-control-height);
-    padding: var(--e-depth) var(--e-space-4) 0;
-    border: var(--e-stroke-edge) solid var(--e-slab);
-
-    --e-bc: var(--e-slab);
-
-    outline: var(--e-stroke-edge) solid var(--e-bc);
-    outline-offset: calc(-1 * var(--e-stroke-edge));
-    border-bottom-width: calc(var(--e-stroke-edge) + var(--e-depth));
+    padding: 0 var(--e-space-4) var(--e-lift);
+    border: 0;
     border-radius: var(--e-radius-md);
-    background: var(--e-fill);
+    background-color: var(--e-fill);
+    box-shadow:
+      inset 0 0 0 var(--e-stroke-edge) var(--e-ring),
+      inset 0 calc(-1 * var(--e-band)) 0 0 var(--e-slab);
     color: var(--e-on-fill);
     font: 500 var(--e-text-md) / 1 var(--e-font-sans);
     letter-spacing: 0.01em;
@@ -642,12 +652,15 @@
       background-color var(--e-duration-tap) var(--e-easing-out);
 }
 .e-btn:hover {
-    background: var(--e-hover);
+    --e-slab: color-mix(in srgb, var(--e-hover), var(--e-shade-slab));
+
+    background-color: var(--e-hover);
 }
 .e-btn:active {
-    background: var(--e-press);
-    border-bottom-width: var(--e-stroke-edge);
-    box-shadow: inset 0 var(--e-depth) 0 0 color-mix(in srgb, transparent, var(--e-shade-press));
+    --e-lift: 0px;
+
+    background-color: var(--e-press);
+    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-ring);
 }
 .e-btn--secondary {
     --e-fill: var(--e-secondary);
@@ -663,30 +676,24 @@
     --e-slab: var(--e-border-strong);
 }
 .e-btn--outline:hover {
-    background: color-mix(in srgb, var(--e-surface), var(--e-shade-hover));
-    border-color: var(--e-ink);
+    --e-ring: var(--e-ink);
+    --e-slab: var(--e-ink);
 
-    --e-bc: var(--e-ink);
+    background-color: color-mix(in srgb, var(--e-surface), var(--e-shade-hover));
 }
 .e-btn--outline:active {
-    background: color-mix(in srgb, var(--e-surface), var(--e-shade-press));
-    border-color: var(--e-ink);
-
-    --e-bc: var(--e-ink);
+    --e-ring: var(--e-ink);
+    --e-slab: var(--e-ink);
 
-    border-bottom-width: var(--e-stroke-edge);
-    box-shadow: inset 0 var(--e-depth) 0 0 color-mix(in srgb, transparent, var(--e-shade-press));
+    background-color: color-mix(in srgb, var(--e-surface), var(--e-shade-press));
 }
 .e-btn--quiet {
-    border-color: transparent;
+    --e-ring: transparent;
+    --e-lift: 0px;
 
-    --e-bc: transparent;
-
-    border-bottom-width: var(--e-stroke-edge);
     background: transparent;
     color: var(--e-ink);
-    box-shadow: none;
-    padding-top: 0;
+    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-ring);
     padding-inline: var(--e-space-3);
     text-decoration: underline;
     text-underline-offset: 5px;
@@ -694,25 +701,72 @@
     text-decoration-color: var(--e-border-strong);
 }
 .e-btn--quiet:not([disabled], [aria-disabled="true"]):hover {
-    border-color: var(--e-wash-ring);
-
-    --e-bc: var(--e-wash-ring);
+    --e-ring: var(--e-wash-ring);
 
     background: var(--e-wash-hover);
     text-decoration-color: currentcolor;
 }
 .e-btn--quiet:not([disabled], [aria-disabled="true"]):active {
-    border-color: var(--e-ink);
-
-    --e-bc: var(--e-ink);
+    --e-ring: var(--e-ink);
 
     background: var(--e-wash-press);
-    box-shadow: none;
-    padding-top: 0;
+    transform: none;
 }
-.e-btn .e-icon {
+.e-btn .e-icon,
+  .e-btn-spinner {
     margin-inline-start: calc(-0.5 * var(--e-space-1));
 }
+.e-btn-spinner {
+    flex: none;
+    width: 1.125em;
+    height: 1.125em;
+    fill: none;
+    stroke: currentcolor;
+    stroke-width: 3;
+    stroke-linecap: round;
+    stroke-dasharray: 36 56;
+    animation: e-btn-spin 0.9s linear infinite;
+}
+
+  /* Busy reads as unavailable and in progress: a soft tint of the button's colour with a dashed edge like a disabled button, and stripes that move. The face grows over its slab, so the button stays one control height tall. The edge is a pseudo-element, so a page's focus reset cannot remove it. */
+.e-btn--loading {
+    --e-lift: 0px;
+    --e-tint: var(--e-fill);
+    --e-busy: color-mix(in srgb, var(--e-tint) 80%, var(--e-ink));
+}
+.e-btn--outline.e-btn--loading {
+    --e-tint: var(--e-border-strong);
+}
+.e-btn--loading,
+  .e-btn--loading:hover,
+  .e-btn--loading:active {
+    background-color: color-mix(in srgb, var(--e-tint) 14%, var(--e-surface));
+    background-image: repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in srgb, var(--e-tint) 20%, transparent) 8px 16px);
+    background-size: 22.63px 22.63px;
+    box-shadow: none;
+    color: var(--e-busy);
+    transform: none;
+    cursor: not-allowed;
+    animation: e-btn-stripes 0.8s linear infinite;
+}
+.e-btn--loading::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border: var(--e-stroke-edge) dashed var(--e-busy);
+    border-radius: inherit;
+    pointer-events: none;
+}
+@keyframes e-btn-stripes {
+to {
+      background-position-x: 22.63px;
+}
+}
+@keyframes e-btn-spin {
+to {
+      transform: rotate(360deg);
+}
+}
 .e-btn--block {
     width: 100%;
 }
@@ -722,26 +776,33 @@
   .e-btn[aria-pressed="true"]:hover,
   .e-btn[aria-pressed="true"]:active {
     --e-slab: var(--e-primary);
-    --e-bc: var(--e-primary);
+    --e-ring: var(--e-primary);
 
-    border-color: var(--e-primary);
-    background: var(--e-surface-hover);
+    background-color: var(--e-surface-hover);
     color: var(--e-primary);
 }
 .e-btn[disabled],
   .e-btn[aria-disabled="true"] {
+    --e-lift: 0px;
+
     cursor: not-allowed;
     background: transparent;
     color: var(--e-muted);
-    border: var(--e-stroke-edge) dashed var(--e-border-strong);
-    outline: 0;
+    outline: var(--e-stroke-edge) dashed var(--e-border-strong);
+    outline-offset: calc(-1 * var(--e-stroke-edge));
     box-shadow: none;
-    padding-top: 0;
+    transform: none;
 }
 @media (prefers-reduced-motion: reduce) {
 .e-btn {
       transition: none;
 }
+.e-btn-spinner {
+      animation-duration: 3s;
+}
+.e-btn--loading {
+      animation: none;
+}
 }
 @media print {
 .e-btn {
@@ -759,7 +820,7 @@
 }
 .e-btn[disabled],
     .e-btn[aria-disabled="true"] {
-      border-color: GrayText;
+      outline-color: GrayText;
       color: GrayText;
 }
 }
@@ -789,7 +850,8 @@
     box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-ink);
 }
 .e-icon-btn:disabled {
-    border: var(--e-stroke-edge) dashed var(--e-border-strong);
+    outline: var(--e-stroke-edge) dashed var(--e-border-strong);
+    outline-offset: calc(-1 * var(--e-stroke-edge));
     color: var(--e-muted);
     cursor: not-allowed;
 }
@@ -810,7 +872,7 @@
       outline-offset: calc(-1 * var(--e-stroke-edge));
 }
 .e-icon-btn:disabled {
-      border-color: GrayText;
+      outline-color: GrayText;
       color: GrayText;
 }
 }
@@ -848,12 +910,7 @@
     gap: var(--e-space-1);
     height: var(--e-control-height);
     padding: 0 var(--e-space-2);
-    border: var(--e-stroke-edge) solid transparent;
-
-    --e-bc: transparent;
-
-    outline: var(--e-stroke-edge) solid var(--e-bc);
-    outline-offset: calc(-1 * var(--e-stroke-edge));
+    border: 0;
     border-radius: var(--e-radius-md);
     background: transparent;
     color: var(--e-ink);
@@ -863,9 +920,7 @@
 }
 .e-cal-pick:hover {
     background: var(--e-surface-hover);
-    border-color: var(--e-border-strong);
-
-    --e-bc: var(--e-border-strong);
+    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-border-strong);
 }
 .e-cal-pick:focus-visible {
     outline: var(--e-stroke-focus) solid var(--e-focus-ring);
@@ -918,12 +973,7 @@
     width: 100%;
     height: var(--e-tap);
     padding: 0;
-    border: var(--e-stroke-edge) solid transparent;
-
-    --e-bc: transparent;
-
-    outline: var(--e-stroke-edge) solid var(--e-bc);
-    outline-offset: calc(-1 * var(--e-stroke-edge));
+    border: 0;
     border-radius: var(--e-radius-md);
     background: transparent;
     color: var(--e-ink);
@@ -936,9 +986,7 @@
   /* stylelint-disable-next-line selector-not-notation -- the selector stays in this form */
 .e-day:hover:not(:disabled):not(.e-day--sel) {
     background: var(--e-surface-hover);
-    border-color: var(--e-border-strong);
-
-    --e-bc: var(--e-border-strong);
+    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-border-strong);
 }
 .e-day:focus-visible {
     outline: var(--e-stroke-focus) solid var(--e-focus-ring);
@@ -953,10 +1001,7 @@
 }
 .e-day--sel {
     background: var(--e-primary);
-    border-color: var(--e-primary);
-
-    --e-bc: var(--e-primary);
-
+    box-shadow: none;
     font-weight: 700;
     color: var(--e-on-primary);
 }
@@ -999,12 +1044,7 @@
     height: 100%;
     min-height: var(--e-tap);
     padding: 0;
-    border: var(--e-stroke-edge) solid transparent;
-
-    --e-bc: transparent;
-
-    outline: var(--e-stroke-edge) solid var(--e-bc);
-    outline-offset: calc(-1 * var(--e-stroke-edge));
+    border: 0;
     border-radius: var(--e-radius-md);
     background: transparent;
     color: var(--e-ink);
@@ -1020,9 +1060,7 @@
   /* stylelint-disable-next-line selector-not-notation -- the selector stays in this form */
 .e-cal-cell:hover:not(:disabled):not(.e-day--sel) {
     background: var(--e-surface-hover);
-    border-color: var(--e-border-strong);
-
-    --e-bc: var(--e-border-strong);
+    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-border-strong);
 }
 .e-cal-cell:focus-visible {
     outline: var(--e-stroke-focus) solid var(--e-focus-ring);
@@ -1035,10 +1073,7 @@
 }
 .e-cal-cell.e-day--sel {
     background: var(--e-primary);
-    border-color: var(--e-primary);
-
-    --e-bc: var(--e-primary);
-
+    box-shadow: none;
     font-weight: 700;
     color: var(--e-on-primary);
 }
@@ -1141,12 +1176,17 @@
     width: 24px;
     height: 24px;
     margin: 0;
-    border: var(--e-stroke-edge) solid var(--e-border-strong);
+
+    --e-ring: var(--e-border-strong);
+
+    border: 0;
     background: var(--e-surface);
-    box-shadow: var(--e-well);
+    box-shadow:
+      inset 0 0 0 var(--e-stroke-edge) var(--e-ring),
+      var(--e-well);
     cursor: inherit;
     transition:
-      border-color var(--e-duration-tap) var(--e-easing-out),
+      box-shadow var(--e-duration-tap) var(--e-easing-out),
       background-color var(--e-duration-tap) var(--e-easing-out);
   }
 
@@ -1160,12 +1200,12 @@
 
   .e-check:hover,
   .e-radio:hover {
-    border-color: var(--e-ink);
+    --e-ring: var(--e-ink);
+
     background-color: var(--e-surface-hover);
   }
 
   .e-check:checked {
-    border-color: var(--e-primary);
     background-color: var(--e-primary);
     box-shadow: none;
   }
@@ -1184,7 +1224,6 @@
   }
 
   .e-radio:checked {
-    border-color: var(--e-primary);
     background-color: var(--e-primary);
     box-shadow: none;
     background-image: radial-gradient(circle, var(--e-on-primary) 0 4px, transparent 5px);
@@ -1204,16 +1243,17 @@
 
   .e-check:disabled,
   .e-radio:disabled {
-    border-style: dashed;
+    outline: var(--e-stroke-edge) dashed var(--e-border-strong);
+    outline-offset: calc(-1 * var(--e-stroke-edge));
     background-color: var(--e-surface-tint);
     box-shadow: none;
   }
 
   .e-check:checked:disabled,
   .e-radio:checked:disabled {
-    border-style: solid;
+    outline: 0;
     background-color: var(--e-surface-tint);
-    border-color: var(--e-border-strong);
+    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-border-strong);
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -1278,8 +1318,6 @@
     border-radius: var(--e-radius-md);
     background: var(--e-surface);
     box-shadow: var(--e-edge);
-    outline: var(--e-stroke-card) solid var(--e-border);
-    outline-offset: 0;
 }
 
   /* Code blocks stacked back to back share one seam: the rings overlap into a single line. */
@@ -1358,23 +1396,22 @@
 @layer e.reset, e.tokens, e.base, e.primitives, e.blocks, e.controls, e.composites, e.containers, e.page;
 @layer e.controls {
   .e-input {
+    --e-ring: var(--e-border-strong);
+
     width: 100%;
     min-width: 0;
     height: var(--e-control-height);
     padding: 0 var(--e-space-4);
-    border: var(--e-stroke-edge) solid var(--e-border-strong);
-
-    --e-bc: var(--e-border-strong);
-
-    outline: var(--e-stroke-edge) solid var(--e-bc);
-    outline-offset: calc(-1 * var(--e-stroke-edge));
+    border: 0;
     border-radius: var(--e-radius-md);
     background-color: var(--e-surface);
-    box-shadow: var(--e-well);
+    box-shadow:
+      inset 0 0 0 var(--e-stroke-edge) var(--e-ring),
+      var(--e-well);
     color: var(--e-ink);
     font: 400 var(--e-text-md)/1 var(--e-font-sans);
     transition:
-      border-color var(--e-duration-tap) var(--e-easing-out),
+      box-shadow var(--e-duration-tap) var(--e-easing-out),
       background-color var(--e-duration-tap) var(--e-easing-out);
   }
 
@@ -1383,34 +1420,34 @@
   }
 
   .e-input:hover {
-    border-color: var(--e-ink);
-
-    --e-bc: var(--e-ink);
-
     background-color: var(--e-surface-hover);
   }
 
   .e-input:focus {
-    border-color: var(--e-focus-field);
-
-    --e-bc: var(--e-focus-field);
+    --e-ring: var(--e-focus-field);
 
     background-color: var(--e-surface);
   }
 
+  /* A field's focus outline lies over its border and then reaches at least as far outside it again, so the field looks thicker on every stroke preset. */
   .e-input:focus-visible {
+    outline-width: max(var(--e-stroke-focus), calc(2 * var(--e-stroke-edge)));
     outline-color: var(--e-focus-field);
     outline-offset: var(--e-focus-gap-field);
   }
 
   .e-input[aria-invalid="true"] {
-    border-color: var(--e-danger);
+    --e-ring: var(--e-danger);
 
-    --e-bc: var(--e-danger);
+    background-color: var(--e-surface);
+  }
+
+  .e-input[aria-invalid="true"]:hover {
+    background-color: var(--e-danger-soft);
+  }
 
+  .e-input[aria-invalid="true"]:focus {
     background-color: var(--e-surface);
-    box-shadow:
-      var(--e-well), inset 0 0 0 var(--e-stroke-hair) var(--e-danger);
   }
 
   .e-input[aria-invalid="true"]:focus-visible {
@@ -1419,8 +1456,8 @@
 
   .e-input:disabled {
     cursor: not-allowed;
-    border-style: dashed;
-    outline: 0;
+    outline: var(--e-stroke-edge) dashed var(--e-border-strong);
+    outline-offset: calc(-1 * var(--e-stroke-edge));
     background-color: var(--e-surface-tint);
     box-shadow: none;
     color: var(--e-muted);
@@ -1431,63 +1468,52 @@
   }
 
   .e-input-wrap {
+    --e-ring: var(--e-border-strong);
+
     display: flex;
     align-items: stretch;
     min-width: 0;
     min-height: var(--e-control-height);
-    border: var(--e-stroke-edge) solid var(--e-border-strong);
-
-    --e-bc: var(--e-border-strong);
-
-    outline: var(--e-stroke-edge) solid var(--e-bc);
-    outline-offset: calc(-1 * var(--e-stroke-edge));
     border-radius: var(--e-radius-md);
     background: var(--e-surface);
-    box-shadow: var(--e-well);
+    box-shadow:
+      inset 0 0 0 var(--e-stroke-edge) var(--e-ring),
+      var(--e-well);
     transition:
-      border-color var(--e-duration-tap) var(--e-easing-out),
+      box-shadow var(--e-duration-tap) var(--e-easing-out),
       background-color var(--e-duration-tap) var(--e-easing-out);
   }
 
   .e-input-wrap:hover {
-    border-color: var(--e-ink);
-
-    --e-bc: var(--e-ink);
-
     background: var(--e-surface-hover);
   }
 
   .e-input-wrap:focus-within {
-    border-color: var(--e-focus-field);
-
-    --e-bc: var(--e-focus-field);
+    --e-ring: var(--e-focus-field);
 
     background: var(--e-surface);
-    outline: var(--e-stroke-focus) solid var(--e-focus-field);
+    outline: max(var(--e-stroke-focus), calc(2 * var(--e-stroke-edge))) solid var(--e-focus-field);
     outline-offset: var(--e-focus-gap-field);
   }
 
   .e-input-wrap[data-invalid] {
-    border-color: var(--e-danger);
-
-    --e-bc: var(--e-danger);
+    --e-ring: var(--e-danger);
 
-    box-shadow:
-      var(--e-well), inset 0 0 0 var(--e-stroke-hair) var(--e-danger);
     background: var(--e-surface);
   }
 
-  .e-input-wrap[data-invalid]:focus-within {
-    border-color: var(--e-danger);
-
-    --e-bc: var(--e-danger);
+  .e-input-wrap[data-invalid]:hover {
+    background: var(--e-danger-soft);
+  }
 
+  .e-input-wrap[data-invalid]:focus-within {
+    background: var(--e-surface);
     outline-color: var(--e-danger);
   }
 
   .e-input-wrap[data-disabled] {
-    border-style: dashed;
-    outline: 0;
+    outline: var(--e-stroke-edge) dashed var(--e-border-strong);
+    outline-offset: calc(-1 * var(--e-stroke-edge));
     background: var(--e-surface-tint);
     box-shadow: none;
     color: var(--e-muted);
@@ -1495,7 +1521,6 @@
 
   .e-input-wrap .e-input {
     flex: 1;
-    border: 0;
     outline: 0;
     background: transparent;
     box-shadow: none;
@@ -1547,7 +1572,7 @@
 
     .e-input:disabled,
     .e-input-wrap[data-disabled] {
-      border-color: GrayText;
+      outline-color: GrayText;
     }
 
     .e-input:focus-visible,
@@ -1649,8 +1674,6 @@ to {
     background: var(--e-surface);
     color: var(--e-ink);
     box-shadow: var(--e-float);
-    outline: var(--e-stroke-card) solid var(--e-border-strong);
-    outline-offset: 0;
     font-family: var(--e-font-sans);
   }
 
@@ -1697,8 +1720,6 @@ to {
   .e-opt--active {
     background: var(--e-surface-tint);
     box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-border-strong);
-    outline: var(--e-stroke-hair) solid var(--e-border-strong);
-    outline-offset: calc(-1 * var(--e-stroke-hair));
   }
 
   .e-opt--selected .e-opt-label {
@@ -1762,8 +1783,6 @@ to {
   .e-opt[data-highlighted]:not(.e-opt--disabled) {
     background: var(--e-surface-tint);
     box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-border-strong);
-    outline: var(--e-stroke-hair) solid var(--e-border-strong);
-    outline-offset: calc(-1 * var(--e-stroke-hair));
   }
 
   .e-opt-set {
@@ -1888,6 +1907,9 @@ to {
     align-self: center;
     padding-inline: var(--e-space-2);
 }
+.e-combo-main .e-tag:not(:has(.e-tag-x)) {
+    padding-inline-end: var(--e-space-3);
+}
 .e-tag {
     display: inline-flex;
     align-items: center;
@@ -2042,32 +2064,23 @@ to {
     justify-items: center;
     gap: var(--e-space-2);
     padding: var(--e-space-8) var(--e-space-4);
-    border: var(--e-stroke-edge) dashed var(--e-border-strong);
+    outline: var(--e-stroke-edge) dashed var(--e-border-strong);
+    outline-offset: calc(-1 * var(--e-stroke-edge));
     border-radius: var(--e-radius-md);
     text-align: center;
 }
 .e-empty--bare {
-    border: 0;
+    outline: 0;
 }
 .e-empty-icon {
     display: grid;
     place-items: center;
-    box-sizing: border-box;
-    width: 56px;
-    height: 56px;
     margin-bottom: var(--e-space-1);
-    border-radius: 50%;
-    background: var(--e-secondary-soft);
-    border: var(--e-stroke-hair) solid var(--e-secondary);
-
-    --e-bc: var(--e-secondary);
-
-    outline: var(--e-stroke-hair) solid var(--e-bc);
-    outline-offset: calc(-1 * var(--e-stroke-hair));
+    color: var(--e-primary);
 }
 .e-empty-icon .e-icon {
-    width: 26px;
-    height: 26px;
+    width: 40px;
+    height: 40px;
 }
 .e-empty-title {
     margin: 0;
@@ -2080,10 +2093,12 @@ to {
     color: var(--e-muted);
 }
 @media (forced-colors: active) {
-.e-empty-icon {
-      border-color: CanvasText;
+.e-empty {
       outline-color: CanvasText;
 }
+.e-empty-icon {
+      color: CanvasText;
+}
 }
 }
 @layer e.reset, e.tokens, e.base, e.primitives, e.blocks, e.controls, e.composites, e.containers, e.page;
@@ -2109,12 +2124,7 @@ to {
     min-width: var(--e-control-height);
     height: var(--e-control-height);
     padding: 0 var(--e-space-2);
-    border: var(--e-stroke-edge) solid transparent;
-
-    --e-bc: transparent;
-
-    outline: var(--e-stroke-edge) solid var(--e-bc);
-    outline-offset: calc(-1 * var(--e-stroke-edge));
+    border: 0;
     border-radius: var(--e-radius-md);
     background: transparent;
     color: var(--e-ink);
@@ -2123,13 +2133,11 @@ to {
     cursor: pointer;
     transition:
       background-color var(--e-duration-tap) var(--e-easing-out),
-      border-color var(--e-duration-tap) var(--e-easing-out);
+      box-shadow var(--e-duration-tap) var(--e-easing-out);
 }
 .e-page:hover {
     background: var(--e-surface-hover);
-    border-color: var(--e-border-strong);
-
-    --e-bc: var(--e-border-strong);
+    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-border-strong);
 }
 .e-page:focus-visible {
     outline: var(--e-stroke-focus) solid var(--e-focus-ring);
@@ -2137,10 +2145,7 @@ to {
 }
 .e-page[aria-current="page"] {
     background: var(--e-primary);
-    border-color: var(--e-primary);
-
-    --e-bc: var(--e-primary);
-
+    box-shadow: none;
     color: var(--e-on-primary);
     font-weight: 600;
     cursor: default;
@@ -2192,7 +2197,8 @@ to {
     cursor: pointer;
 }
 .e-sel-trigger[aria-expanded="true"] {
-    border-color: var(--e-ink);
+    --e-ring: var(--e-ink);
+
     background-color: var(--e-surface);
 }
 .e-sel-value {
@@ -2276,15 +2282,20 @@ to {
 }
 }
 @layer e.reset, e.tokens, e.base, e.primitives, e.blocks, e.controls, e.composites, e.containers, e.page;
+/* The table look shared by ETable and EDataGrid: tinted mono headings, hairline rows, a hover row and numeric columns. */
 @layer e.containers {
-.e-table {
+  .e-table {
     width: 100%;
     border-collapse: collapse;
     font: 400 var(--e-text-md) / 1.4 var(--e-font-sans);
-}
-.e-table th {
+  }
+
+  .e-table th {
     padding: var(--e-space-3) var(--e-space-4);
-    border-bottom: var(--e-stroke-card) solid var(--e-border-strong);
+    border-bottom: 0;
+
+    /* The rule under a heading is a shadow, not a border: a sticky cell in a collapsed table drops its border when the table scrolls. */
+    box-shadow: inset 0 calc(-1 * var(--e-stroke-card)) 0 var(--e-border-strong);
     background: var(--e-surface-tint);
     text-align: start;
     white-space: nowrap;
@@ -2292,38 +2303,58 @@ to {
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: var(--e-muted);
-}
-.e-table td {
+  }
+
+  /* A heading at the start of a row names the row: it reads as a label, not as a column heading. */
+  .e-table tbody th {
+    padding: var(--e-space-3) var(--e-space-4);
+    border-top: var(--e-stroke-hair) solid var(--e-border);
+    border-bottom: 0;
+    box-shadow: none;
+    background: transparent;
+    font: 600 var(--e-text-md) / 1.4 var(--e-font-sans);
+    letter-spacing: normal;
+    text-transform: none;
+    color: var(--e-ink);
+  }
+
+  .e-table td {
     padding: var(--e-space-3) var(--e-space-4);
     border-top: var(--e-stroke-hair) solid var(--e-border);
     vertical-align: middle;
-}
-.e-table tbody tr:first-child td {
+  }
+
+  .e-table tbody tr:first-child :is(td, th) {
     border-top: 0;
-}
-.e-table tbody tr:hover td {
+  }
+
+  .e-table tbody tr:hover :is(td, th) {
     background: var(--e-surface-hover);
-}
-.e-table .e-num {
+  }
+
+  .e-table .e-num {
     text-align: end;
     font-family: var(--e-font-mono);
     font-variant-numeric: tabular-nums;
     white-space: nowrap;
-}
-.e-table th.e-num {
+  }
+
+  .e-table th.e-num {
     font-family: var(--e-font-mono);
-}
-.e-table .e-center {
+  }
+
+  .e-table .e-center {
     text-align: center;
+  }
 }
+@layer e.reset, e.tokens, e.base, e.primitives, e.blocks, e.controls, e.composites, e.containers, e.page;
+@layer e.containers {
 .e-skel {
     display: block;
     height: 14px;
     border-radius: var(--e-radius-sm);
     background: var(--e-surface-tint);
     box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-border);
-    outline: var(--e-stroke-hair) solid var(--e-border);
-    outline-offset: calc(-1 * var(--e-stroke-hair));
     animation: e-pulse 1.4s ease-in-out infinite;
 }
 @keyframes e-pulse {
@@ -2350,8 +2381,6 @@ to {
     z-index: var(--e-z-sticky);
     border-radius: inherit;
     box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-border-strong);
-    outline: var(--e-stroke-card) solid var(--e-border-strong);
-    outline-offset: calc(-1 * var(--e-stroke-card));
     pointer-events: none;
 }
 .e-grid-frame {
@@ -2470,7 +2499,7 @@ to {
 .e-filterrow td {
     padding: var(--e-space-1) var(--e-space-3);
     background: var(--e-surface);
-    border-bottom: var(--e-stroke-card) solid var(--e-border-strong);
+    box-shadow: inset 0 calc(-1 * var(--e-stroke-card)) 0 var(--e-border-strong);
     border-top: 0;
     position: sticky;
     top: var(--e-grid-head-h);
@@ -2645,8 +2674,6 @@ to {
       border-radius: var(--e-radius-md);
       background: var(--e-surface);
       box-shadow: var(--e-edge);
-      outline: var(--e-stroke-card) solid var(--e-border-strong);
-      outline-offset: 0;
 }
 .e-grid--cards .e-gridtable tbody tr:hover td {
       background: transparent;
@@ -2729,8 +2756,6 @@ to {
     background: var(--e-surface);
     color: var(--e-ink);
     box-shadow: var(--e-float);
-    outline: var(--e-stroke-card) solid var(--e-border-strong);
-    outline-offset: 0;
     font-family: var(--e-font-sans);
   }
 }
@@ -2746,17 +2771,11 @@ to {
     white-space: nowrap;
     align-items: center;
     gap: var(--e-space-2);
-
-    --e-bc: var(--e-strong);
-
     min-height: calc(var(--e-chip-height) + var(--e-space-1));
     padding: 0 var(--e-space-3);
     border-radius: var(--e-radius-sm);
     background: var(--e-strong);
     color: var(--e-on);
-    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-bc);
-    outline: var(--e-stroke-card) solid var(--e-bc);
-    outline-offset: calc(-1 * var(--e-stroke-card));
     cursor: default;
     justify-self: start;
 }
@@ -2924,8 +2943,6 @@ to {
     background: var(--e-surface);
     color: var(--e-ink);
     box-shadow: var(--e-float);
-    outline: var(--e-stroke-card) solid var(--e-border);
-    outline-offset: 0;
     font-family: var(--e-font-sans);
   }
 
@@ -2981,7 +2998,7 @@ to {
     height: fit-content;
     max-height: calc(100dvh - var(--e-space-8));
     margin: auto;
-    border-radius: var(--e-radius-lg);
+    border-radius: var(--e-radius-md);
     overflow: auto;
 }
 .e-dialog--inline {
@@ -3099,7 +3116,7 @@ to {
     height: auto;
     max-height: min(32rem, 85dvh);
     margin: 0;
-    border-radius: var(--e-radius-lg) var(--e-radius-lg) 0 0;
+    border-radius: var(--e-radius-md) var(--e-radius-md) 0 0;
 }
 .e-drawer[data-state="open"] {
     animation: e-drawer-in 220ms var(--e-easing-out);
@@ -3171,7 +3188,7 @@ to {
     max-width: 28rem;
     height: auto;
     max-height: 18rem;
-    border-radius: var(--e-radius-lg);
+    border-radius: var(--e-radius-md);
 }
 .e-drawer-body:focus-visible {
     outline: var(--e-stroke-focus) solid var(--e-focus-ring);
@@ -3187,34 +3204,33 @@ to {
 @layer e.reset, e.tokens, e.base, e.primitives, e.blocks, e.controls, e.composites, e.containers, e.page;
 @layer e.containers {
 .e-xrow {
-    border-bottom: var(--e-depth) solid var(--e-border);
+    --e-band-c: var(--e-border);
+
+    border-bottom: var(--e-depth) solid transparent;
     border-radius: var(--e-radius-md);
-    background: var(--e-surface);
+    background-color: var(--e-surface);
+    background-image: linear-gradient(to top, var(--e-band-c) var(--e-depth), transparent var(--e-depth));
+    background-origin: border-box;
+    background-repeat: no-repeat;
     box-shadow: var(--e-edge);
-    outline: var(--e-stroke-card) solid var(--e-border);
-    outline-offset: 0;
     transition:
       background-color var(--e-duration-tap) var(--e-easing-out),
       box-shadow var(--e-duration-tap) var(--e-easing-out);
 }
 .e-xrow:not([open]):hover {
-    border-bottom-color: var(--e-border-strong);
-    background: var(--e-surface-hover);
+    --e-band-c: var(--e-border-strong);
+
+    background-color: var(--e-surface-hover);
     box-shadow: 0 0 0 var(--e-stroke-card) var(--e-border-strong);
-    outline: var(--e-stroke-card) solid var(--e-border-strong);
-    outline-offset: 0;
 }
 .e-xrow[open] {
     border-bottom-width: 0;
+    background-image: none;
     box-shadow: var(--e-edge);
-    outline: var(--e-stroke-card) solid var(--e-border);
-    outline-offset: 0;
 }
 .e-xrow[open]:has(> summary:hover) {
     background-color: var(--e-surface-hover);
     box-shadow: 0 0 0 var(--e-stroke-card) var(--e-border-strong);
-    outline: var(--e-stroke-card) solid var(--e-border-strong);
-    outline-offset: 0;
 }
 .e-xrow[open] > summary:hover {
     border-bottom-color: var(--e-border-strong);
@@ -3561,14 +3577,10 @@ a:any-link > .e-highlight {
     display: inline-block;
     min-width: 1.5em;
     padding: 0 var(--e-space-1);
-    border: var(--e-stroke-hair) solid var(--e-border-strong);
-
-    --e-bc: var(--e-border-strong);
-
-    outline: var(--e-stroke-hair) solid var(--e-bc);
-    outline-offset: calc(-1 * var(--e-stroke-hair));
+    border: 0;
     border-radius: var(--e-radius-sm);
     background: var(--e-surface-tint);
+    box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-border-strong);
     color: var(--e-muted);
     font: 500 var(--e-text-sm) / 1.5 var(--e-font-mono);
     text-align: center;
@@ -3579,7 +3591,8 @@ a:any-link > .e-highlight {
 }
 @media (forced-colors: active) {
 .e-kbd {
-      border-color: ButtonText;
+      outline: var(--e-stroke-hair) solid ButtonText;
+      outline-offset: calc(-1 * var(--e-stroke-hair));
 }
 }
 }
@@ -3646,8 +3659,6 @@ a:any-link > .e-highlight {
   .e-menu-item[data-highlighted] {
     background: var(--e-surface-hover);
     box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-border-strong);
-    outline: var(--e-stroke-card) solid var(--e-border-strong);
-    outline-offset: calc(-1 * var(--e-stroke-card));
 }
 .e-menu-item--danger {
     color: var(--e-danger);
@@ -3722,26 +3733,39 @@ a:any-link > .e-highlight {
     gap: var(--e-space-3);
     height: var(--e-control-height);
     box-sizing: border-box;
-    padding: 0 var(--e-space-3);
-    border: var(--e-stroke-edge) solid transparent;
+    padding: 0 var(--e-space-3) var(--e-lift);
+
+    --e-lift: 0px;
+
+    border: 0;
     border-radius: var(--e-radius-md);
     color: var(--e-ink);
     font: 400 var(--e-text-md) / 1 var(--e-font-sans);
     text-decoration: none;
-    transition: background-color var(--e-duration-tap) var(--e-easing-out);
+    transition:
+      background-color var(--e-duration-tap) var(--e-easing-out),
+      box-shadow var(--e-duration-tap) var(--e-easing-out);
 }
 .e-nav-item:hover {
-    background: var(--e-surface-hover);
+    background-color: var(--e-surface-hover);
 }
 .e-nav-item:focus-visible {
     outline: var(--e-stroke-focus) solid var(--e-focus-ring);
     outline-offset: var(--e-focus-gap);
 }
 .e-nav-item[aria-current="page"] {
-    background: color-mix(in srgb, var(--e-surface-tint), var(--e-ink) 3%);
+    background-color: color-mix(in srgb, var(--e-surface-tint), var(--e-ink) 3%);
     font-weight: 600;
-    border-color: var(--e-primary);
-    border-bottom-width: calc(var(--e-stroke-edge) + var(--e-depth));
+
+    --e-lift: var(--e-depth);
+    --e-slab: var(--e-primary);
+
+    box-shadow:
+      inset 0 0 0 var(--e-stroke-edge) var(--e-primary),
+      inset 0 calc(-1 * (var(--e-lift) + var(--e-stroke-edge))) 0 0 var(--e-slab);
+}
+.e-nav-item[aria-current="page"]:hover {
+    --e-slab: color-mix(in srgb, var(--e-primary), var(--e-shade-slab));
 }
 .e-nav-label {
     flex: 1;
@@ -3781,8 +3805,6 @@ a:any-link > .e-highlight {
     border-radius: var(--e-radius-pill);
     background: color-mix(in srgb, var(--e-primary) 12%, var(--e-surface));
     box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-primary);
-    outline: var(--e-stroke-hair) solid var(--e-primary);
-    outline-offset: calc(-1 * var(--e-stroke-hair));
     font: 600 var(--e-text-xs) / 20px var(--e-font-mono);
     text-align: center;
 }
@@ -3864,15 +3886,13 @@ a:any-link > .e-highlight {
 
     container-type: inline-size;
     padding: var(--e-space-3) var(--e-space-4);
-    border: var(--e-stroke-edge) solid var(--e-tone);
-
-    --e-bc: var(--e-tone);
-
-    outline: var(--e-stroke-edge) solid var(--e-bc);
-    outline-offset: calc(-1 * var(--e-stroke-edge));
-    border-left-width: calc(var(--e-stroke-edge) + 2 * var(--e-depth));
+    padding-left: calc(var(--e-space-4) + 2 * var(--e-depth));
+    border: 0;
     border-radius: var(--e-radius-md);
-    background: var(--e-bg);
+    background-color: var(--e-bg);
+    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-tone);
+    background-image: linear-gradient(to right, var(--e-tone) calc(var(--e-stroke-edge) + 2 * var(--e-depth)), transparent calc(var(--e-stroke-edge) + 2 * var(--e-depth)));
+    background-repeat: no-repeat;
     color: var(--e-ink);
 }
 .e-notice--success {
@@ -3929,7 +3949,7 @@ a:any-link > .e-highlight {
 
   /* stylelint-disable-next-line selector-not-notation */
 .e-otp .e-otp-box[data-filled]:not(:focus):not([aria-invalid="true"]) {
-    border-color: var(--e-ink);
+    --e-ring: var(--e-ink);
 }
 }
 @layer e.reset, e.tokens, e.base, e.primitives, e.blocks, e.controls, e.composites, e.containers, e.page;
@@ -4006,13 +4026,8 @@ a:any-link > .e-highlight {
     flex: none;
     width: 14px;
     height: 14px;
-    border: var(--e-stroke-edge) solid var(--e-border-strong);
-
-    --e-bc: var(--e-border-strong);
-
-    outline: var(--e-stroke-edge) solid var(--e-bc);
-    outline-offset: calc(-1 * var(--e-stroke-edge));
     border-radius: 50%;
+    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-border-strong);
 }
 }
 @layer e.reset, e.tokens, e.base, e.primitives, e.blocks, e.controls, e.composites, e.containers, e.page;
@@ -4047,8 +4062,6 @@ a:any-link > .e-highlight {
     border-radius: var(--e-radius-pill);
     background: var(--e-surface-tint);
     box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-border-strong);
-    outline: var(--e-stroke-card) solid var(--e-border-strong);
-    outline-offset: calc(-1 * var(--e-stroke-card));
     overflow: hidden;
 }
 .e-progress-fill {
@@ -4056,8 +4069,6 @@ a:any-link > .e-highlight {
     border-radius: var(--e-radius-pill);
     background: var(--e-primary);
     box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-primary);
-    outline: var(--e-stroke-card) solid var(--e-primary);
-    outline-offset: calc(-1 * var(--e-stroke-card));
     transition: width var(--e-duration-move) var(--e-easing-out);
 }
 .e-progress--indeterminate .e-progress-fill {
@@ -4149,31 +4160,27 @@ to {
 @layer e.reset, e.tokens, e.base, e.primitives, e.blocks, e.controls, e.composites, e.containers, e.page;
 @layer e.controls {
 .e-search {
+    --e-ring: var(--e-border-strong);
+
     display: flex;
     align-items: center;
     gap: var(--e-space-1);
     height: var(--e-control-height);
     padding: 0 var(--e-space-1) 0 var(--e-space-2);
-    border: var(--e-stroke-edge) solid var(--e-border-strong);
-
-    --e-bc: var(--e-border-strong);
-
-    outline: var(--e-stroke-edge) solid var(--e-bc);
-    outline-offset: calc(-1 * var(--e-stroke-edge));
     border-radius: var(--e-radius-md);
     background: var(--e-surface);
-    box-shadow: var(--e-well);
-    transition: border-color var(--e-duration-tap) var(--e-easing-out);
+    box-shadow:
+      inset 0 0 0 var(--e-stroke-edge) var(--e-ring),
+      var(--e-well);
+    transition: box-shadow var(--e-duration-tap) var(--e-easing-out);
 }
 .e-search:hover {
-    border-color: var(--e-ink);
-
-    --e-bc: var(--e-ink);
+    background: var(--e-surface-hover);
 }
 .e-search .e-btn {
     position: relative;
     height: calc(var(--e-control-height) - 6px);
-    padding: 0 var(--e-space-3);
+    padding: 0 var(--e-space-3) var(--e-lift);
     font-size: var(--e-text-md);
 }
 .e-search .e-btn::after {
@@ -4240,11 +4247,10 @@ to {
     outline: none;
 }
 .e-search:focus-within {
-    border-color: var(--e-focus-field);
+    --e-ring: var(--e-focus-field);
 
-    --e-bc: var(--e-focus-field);
-
-    outline: var(--e-stroke-focus) solid var(--e-focus-field);
+    background: var(--e-surface);
+    outline: max(var(--e-stroke-focus), calc(2 * var(--e-stroke-edge))) solid var(--e-focus-field);
     outline-offset: var(--e-focus-gap-field);
 }
 @media (prefers-reduced-motion: reduce) {
@@ -4267,8 +4273,6 @@ to {
     padding: var(--e-space-1);
     border-radius: var(--e-radius-md);
     box-shadow: var(--e-edge);
-    outline: var(--e-stroke-card) solid var(--e-border-strong);
-    outline-offset: 0;
     color: var(--e-ink);
 }
 .e-results-list {
@@ -4285,8 +4289,6 @@ to {
   .e-results .e-opt:focus-visible {
     background: var(--e-surface-hover);
     box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-border-strong);
-    outline: var(--e-stroke-hair) solid var(--e-border-strong);
-    outline-offset: calc(-1 * var(--e-stroke-hair));
 }
 .e-results .e-opt:focus-visible {
     outline: var(--e-stroke-focus) solid var(--e-focus-ring);
@@ -4303,17 +4305,17 @@ to {
 }
 @layer e.reset, e.tokens, e.base, e.primitives, e.blocks, e.controls, e.composites, e.containers, e.page;
 @layer e.controls {
+  /* A pressed-in track. The chosen option fills its cell edge to edge in the primary colour, covering the track's outline there so the outline turns primary where it is chosen, and the track clips it, so only the pieces at either end take the track's rounded corners: a value you set, not a place you go (that is Tabs). */
 .e-seg {
     display: inline-flex;
+    box-sizing: border-box;
     height: var(--e-control-height);
-    border: var(--e-stroke-edge) solid var(--e-border-strong);
-
-    --e-bc: var(--e-border-strong);
-
-    outline: var(--e-stroke-edge) solid var(--e-bc);
-    outline-offset: calc(-1 * var(--e-stroke-edge));
+    position: relative;
     border-radius: var(--e-radius-md);
-    background: var(--e-border-strong);
+    background: var(--e-surface-tint);
+    box-shadow:
+      inset 0 0 0 var(--e-stroke-edge) var(--e-border-strong),
+      var(--e-well);
     overflow: hidden;
     max-width: 100%;
     width: fit-content;
@@ -4323,9 +4325,6 @@ to {
     display: inline-flex;
     cursor: pointer;
 }
-.e-seg-opt + .e-seg-opt {
-    border-inline-start: var(--e-stroke-hair) solid var(--e-border-strong);
-}
 .e-seg-input {
     position: absolute;
     inset: 0;
@@ -4338,19 +4337,24 @@ to {
     align-items: center;
     justify-content: center;
     gap: var(--e-space-2);
+    box-sizing: border-box;
     min-width: 4rem;
     padding: 0 var(--e-space-4);
-    background: var(--e-surface);
+    background: transparent;
+    color: var(--e-ink);
     font: 500 var(--e-text-md)/1 var(--e-font-sans);
     white-space: nowrap;
     transition: background-color var(--e-duration-tap) var(--e-easing-out);
 }
 .e-seg-opt:hover .e-seg-text {
-    background: var(--e-surface-hover);
+    background: var(--e-wash-hover);
 }
-.e-seg-input:checked + .e-seg-text {
-    background: var(--e-primary);
-    box-shadow: inset 0 var(--e-depth) 0 0 color-mix(in srgb, var(--e-primary), var(--e-shade-slab));
+.e-seg-input:checked + .e-seg-text,
+  .e-seg-opt:hover .e-seg-input:checked + .e-seg-text {
+    background-color: var(--e-primary);
+
+    /* The darker band along the bottom is the slab, drawn inside the piece and the track clips it to the corners. */
+    background-image: linear-gradient(to top, color-mix(in srgb, var(--e-primary), var(--e-shade-slab)) var(--e-depth), transparent var(--e-depth));
     color: var(--e-on-primary);
     font-weight: 600;
 }
@@ -4365,11 +4369,14 @@ to {
 .e-seg-opt:has(:disabled):hover .e-seg-text {
     background: transparent;
 }
+
+  /* Chosen but unavailable: a flat piece with ink text, so it stays readable. */
 .e-seg-input:disabled:checked + .e-seg-text,
   .e-seg-opt:has(:disabled:checked):hover .e-seg-text {
-    background: var(--e-surface-hover);
+    background-color: var(--e-surface);
+    background-image: none;
+    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-border-strong);
     color: var(--e-ink);
-    box-shadow: inset 0 calc(-1 * var(--e-depth)) 0 0 var(--e-border-strong);
 }
 .e-seg-field {
     display: grid;
@@ -4397,15 +4404,11 @@ to {
 .e-pad-surface {
     position: relative;
     overflow: hidden;
-    border: var(--e-stroke-edge) solid var(--e-border-strong);
-
-    --e-bc: var(--e-border-strong);
-
-    outline: var(--e-stroke-edge) solid var(--e-bc);
-    outline-offset: calc(-1 * var(--e-stroke-edge));
     border-radius: var(--e-radius-md);
     background: var(--e-surface);
-    box-shadow: var(--e-well);
+    box-shadow:
+      inset 0 0 0 var(--e-stroke-edge) var(--e-border-strong),
+      var(--e-well);
 }
 .e-pad-surface::after {
     content: "";
@@ -4499,8 +4502,6 @@ to {
     border-radius: var(--e-radius-md);
     background: var(--e-surface-tint);
     box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-border-strong);
-    outline: var(--e-stroke-card) solid var(--e-border-strong);
-    outline-offset: calc(-1 * var(--e-stroke-card));
     animation: e-pulse 1.4s ease-in-out infinite;
 }
 .e-skel {
@@ -4509,8 +4510,6 @@ to {
     border-radius: var(--e-radius-sm);
     background: var(--e-surface-tint);
     box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-border-strong);
-    outline: var(--e-stroke-card) solid var(--e-border-strong);
-    outline-offset: calc(-1 * var(--e-stroke-card));
     animation: e-pulse 1.4s ease-in-out infinite;
 }
 .e-skeleton--circle {
@@ -4601,18 +4600,20 @@ to {
     width: var(--e-dot);
     height: var(--e-dot);
     border-radius: 50%;
-    border: var(--e-stroke-edge) dashed var(--e-border-strong);
+    outline: var(--e-stroke-edge) dashed var(--e-border-strong);
+    outline-offset: calc(-1 * var(--e-stroke-edge));
     background: var(--e-surface);
     color: var(--e-muted);
     font: 600 var(--e-text-xs) / 1 var(--e-font-mono);
 }
 .e-step[data-state="done"] .e-step-dot {
-    border: var(--e-stroke-edge) solid var(--e-primary);
+    outline: 0;
     background: var(--e-primary);
     color: var(--e-on-primary);
 }
 .e-step[data-state="current"] .e-step-dot {
-    border: var(--e-stroke-focus) solid var(--e-primary);
+    outline: 0;
+    box-shadow: inset 0 0 0 var(--e-stroke-focus) var(--e-primary);
     color: var(--e-primary);
     background: var(--e-surface);
 }
@@ -4667,7 +4668,6 @@ to {
 .e-step[data-state="done"] .e-step-dot {
       forced-color-adjust: none;
       background: Highlight;
-      border-color: Highlight;
       color: HighlightText;
 }
 }
@@ -4679,8 +4679,6 @@ to {
     border-radius: var(--e-radius-md);
     background: var(--e-surface);
     box-shadow: var(--e-edge);
-    outline: var(--e-stroke-card) solid var(--e-border);
-    outline-offset: 0;
 }
 .e-surface--clip {
     overflow: hidden;
@@ -4700,8 +4698,6 @@ to {
 }
 .e-surface--raised {
     box-shadow: var(--e-float);
-    outline: var(--e-stroke-card) solid var(--e-border);
-    outline-offset: 0;
 }
 .e-surface--pad-sm {
     padding: var(--e-space-3) var(--e-space-4);
@@ -4737,24 +4733,20 @@ to {
 .e-switch-track {
     --e-switch-w: 44px;
     --e-thumb: 14px;
-    --e-thumb-inset: calc(var(--e-space-1) - var(--e-stroke-card));
-    --e-thumb-travel: calc(var(--e-switch-w) - 2 * var(--e-stroke-edge) - var(--e-thumb) - 2 * var(--e-thumb-inset));
+    --e-thumb-inset: var(--e-space-1);
+    --e-thumb-travel: calc(var(--e-switch-w) - var(--e-thumb) - 2 * var(--e-thumb-inset));
+    --e-ring: var(--e-border-strong);
 
     position: relative;
     flex: none;
     width: var(--e-switch-w);
     height: 24px;
-    border: var(--e-stroke-edge) solid var(--e-border-strong);
-
-    --e-bc: var(--e-border-strong);
-
-    outline: var(--e-stroke-edge) solid var(--e-bc);
-    outline-offset: calc(-1 * var(--e-stroke-edge));
     border-radius: var(--e-radius-pill);
     background: var(--e-surface-tint);
+    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-ring);
     transition:
       background-color var(--e-duration-tap) var(--e-easing-out),
-      border-color var(--e-duration-tap) var(--e-easing-out);
+      box-shadow var(--e-duration-tap) var(--e-easing-out);
 }
 .e-switch-track::after {
     content: "";
@@ -4769,23 +4761,21 @@ to {
     transition: transform var(--e-duration-move, 160ms) var(--e-easing-out);
 }
 .e-switch:hover .e-switch-track {
-    border-color: var(--e-ink);
-
-    --e-bc: var(--e-ink);
+    --e-ring: var(--e-ink);
 }
 .e-switch-input:checked + .e-switch-track {
-    background: var(--e-primary);
-    border-color: var(--e-primary);
+    --e-ring: var(--e-primary);
 
-    --e-bc: var(--e-primary);
+    background: var(--e-primary);
 }
 .e-switch-input:checked + .e-switch-track::after {
     background: var(--e-on-primary);
     transform: translateX(var(--e-thumb-travel));
 }
 .e-switch-input:disabled + .e-switch-track {
-    border-style: dashed;
-    outline: 0;
+    box-shadow: none;
+    outline: var(--e-stroke-edge) dashed var(--e-border-strong);
+    outline-offset: calc(-1 * var(--e-stroke-edge));
     background: var(--e-surface-tint);
 }
 .e-switch-input:disabled + .e-switch-track::after {
@@ -4812,8 +4802,79 @@ to {
 }
 @layer e.reset, e.tokens, e.base, e.primitives, e.blocks, e.controls, e.composites, e.containers, e.page;
 @layer e.containers {
+.e-table-wrap {
+    position: relative;
+    min-width: 0;
+    border-radius: var(--e-radius-md);
+    background: var(--e-surface);
+}
+
+  /* The outline is drawn once, above the scroller and its sticky headings, so nothing covers it. */
+.e-table-wrap::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    z-index: var(--e-z-sticky);
+    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-border);
+    pointer-events: none;
+}
+.e-table-scroll {
+    overflow: auto;
+    max-height: var(--e-table-max-h, none);
+    border-radius: inherit;
+}
+.e-table-scroll:focus-visible {
+    outline: var(--e-stroke-focus) solid var(--e-focus-ring);
+    outline-offset: calc(-1 * var(--e-stroke-focus));
+}
+.e-table-wrap .e-table {
+    background: var(--e-surface);
+}
+.e-table-caption {
+    padding: var(--e-space-3) var(--e-space-4);
+    border-bottom: var(--e-stroke-hair) solid var(--e-border);
+    text-align: start;
+    font: 600 var(--e-text-md) / 1.3 var(--e-font-sans);
+    color: var(--e-ink);
+}
+.e-table-wrap thead th {
+    position: sticky;
+    top: 0;
+    z-index: var(--e-z-raised);
+}
+.e-table-wrap--striped tbody tr:nth-child(even) :is(td, th) {
+    background: var(--e-surface-tint);
+}
+.e-table-wrap--striped tbody tr:hover :is(td, th) {
+    background: var(--e-surface-hover);
+}
+.e-table-wrap--dense .e-table {
+    font-size: var(--e-text-sm);
+}
+.e-table-wrap--dense .e-table :is(th, td, tbody th) {
+    padding: var(--e-space-2) var(--e-space-3);
+}
+@media print {
+.e-table-scroll {
+      overflow: visible;
+      max-height: none;
+}
+.e-table-wrap::after {
+      display: none;
+}
+}
+@media (forced-colors: active) {
+.e-table-wrap {
+      outline: 1px solid CanvasText;
+}
+}
+}
+@layer e.reset, e.tokens, e.base, e.primitives, e.blocks, e.controls, e.composites, e.containers, e.page;
+@layer e.containers {
 .e-tablist {
     display: flex;
+    flex: none;
     gap: 0;
     /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties -- the two axes are set apart */
     overflow-x: auto;
@@ -4824,28 +4885,33 @@ to {
     display: none;
 }
 
-  /* Tabs are button-like: every tab is ringed and neighbours sit flush and share an edge, so only the outer ends of the row are rounded. The selected tab is outlined in the primary colour with a thick slab underneath. */
+  /* Tabs are button-like: every tab is ringed and neighbours sit flush and share an edge, so only the outer ends of the row are rounded. The selected tab is outlined in the primary colour with a thick slab along its bottom. */
 .e-tab {
     --e-bc: var(--e-border-strong);
 
+    /* A selected tab rises: the slab is a band the tab paints along one edge itself, so there is no second shape behind the corners. Every tab is one control height tall either way. */
+    --e-lift: 0px;
+    --e-band: calc(var(--e-lift) + var(--e-stroke-edge));
+    --e-slab: var(--e-primary);
+
     position: relative;
     display: inline-flex;
     align-items: center;
     gap: var(--e-space-2);
     flex: none;
     height: var(--e-control-height);
-    padding: 0 var(--e-space-4);
-    border: var(--e-stroke-edge) solid var(--e-bc);
+    padding: 0 var(--e-space-4) var(--e-lift);
+    border: 0;
     border-radius: 0;
-    outline: var(--e-stroke-edge) solid var(--e-bc);
-    outline-offset: calc(-1 * var(--e-stroke-edge));
     background: transparent;
+    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-bc);
     color: var(--e-muted);
     font: 500 var(--e-text-md) / 1 var(--e-font-sans);
     cursor: pointer;
     transition:
       color var(--e-duration-tap) var(--e-easing-out),
-      background-color var(--e-duration-tap) var(--e-easing-out);
+      background-color var(--e-duration-tap) var(--e-easing-out),
+      box-shadow var(--e-duration-tap) var(--e-easing-out);
 }
 
   /* Only the outer ends of the row are rounded. */
@@ -4869,13 +4935,21 @@ to {
 }
 .e-tab[aria-selected="true"] {
     --e-bc: var(--e-primary);
+    --e-lift: var(--e-depth);
 
     z-index: var(--e-z-sticky);
-    border-bottom-width: calc(var(--e-stroke-edge) + var(--e-depth));
     background-color: color-mix(in srgb, var(--e-surface-tint), var(--e-ink) 3%);
+    box-shadow:
+      inset 0 0 0 var(--e-stroke-edge) var(--e-bc),
+      inset 0 calc(-1 * var(--e-band)) 0 0 var(--e-slab);
     color: var(--e-ink);
     font-weight: 600;
 }
+
+  /* The slab answers the pointer too: it darkens under the cursor, in step with the face. */
+.e-tab[aria-selected="true"]:hover {
+    --e-slab: color-mix(in srgb, var(--e-primary), var(--e-shade-slab));
+}
 .e-tab:focus-visible {
     z-index: var(--e-z-focus);
     outline: var(--e-stroke-focus) solid var(--e-focus-ring);
@@ -4890,14 +4964,147 @@ to {
     justify-content: center;
     padding-inline: var(--e-space-1);
 }
+
+  /* Vertical: the tabs stack beside the panel, flush and sharing edges. The selected tab rises towards the panel, so its slab is a band down the inline-start side, away from the panel, instead of along the bottom, and only the top and bottom ends of the column are rounded. */
+.e-tabs--vertical {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--e-space-4);
+}
+.e-tabs--vertical .e-tablist {
+    flex-direction: column;
+    flex: none;
+    overflow: visible;
+}
+.e-tabs--vertical .e-tab {
+    --e-lift: 0px;
+
+    height: var(--e-control-height);
+    padding-block-end: 0;
+    justify-content: flex-start;
+    border-radius: 0;
+}
+.e-tabs--vertical .e-tab:first-child {
+    border-start-start-radius: var(--e-radius-md);
+    border-start-end-radius: var(--e-radius-md);
+}
+.e-tabs--vertical .e-tab:last-child {
+    border-end-start-radius: var(--e-radius-md);
+    border-end-end-radius: var(--e-radius-md);
+}
+.e-tabs--vertical .e-tab + .e-tab {
+    margin-inline-start: 0;
+    margin-block-start: calc(-1 * var(--e-stroke-edge));
+}
+.e-tabs--vertical .e-tab[aria-selected="true"] {
+    --e-lift: var(--e-depth);
+
+    padding-inline-start: calc(var(--e-space-4) + var(--e-lift));
+    box-shadow:
+      inset 0 0 0 var(--e-stroke-edge) var(--e-bc),
+      inset var(--e-band) 0 0 0 var(--e-slab);
+}
+.e-tabs--vertical .e-tabpanel {
+    flex: 1 1 0;
+    min-width: 0;
+    padding-top: 0;
+}
+:dir(rtl) .e-tabs--vertical .e-tab[aria-selected="true"] {
+    box-shadow:
+      inset 0 0 0 var(--e-stroke-edge) var(--e-bc),
+      inset calc(-1 * var(--e-band)) 0 0 0 var(--e-slab);
+}
+
+  /* Framed: tabs and panel are one outlined card. The tab row sits over the panel's edge by one stroke, so a tab's lower edge and the panel's upper edge are the same line; the chosen tab has no edge on that side and its fill covers the panel's, opening into it. Tabs sit flush with their neighbours, square where they meet; only the card's outer corner at the first tab is rounded, and the panel's own corner beside it is square. The row always leaves a corner's width of open edge past the last tab, so the panel's curve never lands against a tab's straight edge. */
+.e-tabs--framed .e-tablist {
+    position: relative;
+    z-index: var(--e-z-raised);
+    margin-block-end: calc(-1 * var(--e-stroke-edge));
+}
+.e-tabs--framed .e-tab {
+    --e-bc: var(--e-border-strong);
+    --e-lift: 0px;
+
+    border-radius: 0;
+    background-color: var(--e-surface-tint);
+}
+.e-tabs--framed .e-tab:first-child {
+    border-start-start-radius: var(--e-radius-md);
+}
+.e-tabs--framed.e-tabs--fill .e-tab:last-child {
+    border-start-end-radius: var(--e-radius-md);
+}
+.e-tabs:not(.e-tabs--fill, .e-tabs--vertical).e-tabs--framed .e-tablist {
+    padding-inline-end: var(--e-radius-md);
+}
+.e-tabs--framed .e-tab:hover {
+    background-color: var(--e-surface-hover);
+}
+
+  /* The chosen tab rises like a button does, with its primary slab as a band on the edge away from the panel, and its open sides outlined in the primary colour. */
+.e-tabs--framed .e-tab[aria-selected="true"] {
+    --e-bc: var(--e-primary);
+    --e-lift: var(--e-depth);
+
+    padding-block: var(--e-lift) 0;
+    background-color: var(--e-surface);
+    box-shadow:
+      inset var(--e-stroke-edge) 0 0 0 var(--e-bc),
+      inset calc(-1 * var(--e-stroke-edge)) 0 0 0 var(--e-bc),
+      inset 0 var(--e-band) 0 0 var(--e-slab);
+}
+.e-tabs--framed .e-tabpanel {
+    padding: var(--e-space-4);
+    border-radius: var(--e-radius-md);
+    border-start-start-radius: 0;
+    background: var(--e-surface);
+    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-border-strong);
+}
+.e-tabs--framed.e-tabs--fill .e-tabpanel {
+    border-start-end-radius: 0;
+}
+.e-tabs--framed.e-tabs--vertical {
+    gap: 0;
+    align-items: stretch;
+}
+.e-tabs--framed.e-tabs--vertical .e-tablist {
+    align-self: flex-start;
+    margin-block-end: var(--e-radius-md);
+    margin-inline-end: calc(-1 * var(--e-stroke-edge));
+}
+.e-tabs--framed.e-tabs--vertical .e-tab {
+    border-radius: 0;
+}
+.e-tabs--framed.e-tabs--vertical .e-tab:first-child {
+    border-start-start-radius: var(--e-radius-md);
+}
+.e-tabs--framed.e-tabs--vertical .e-tab[aria-selected="true"] {
+    margin-block: calc(-1 * var(--e-stroke-edge)) 0;
+    padding-block: 0;
+    padding-inline-start: calc(var(--e-space-4) + var(--e-lift));
+    box-shadow:
+      inset 0 var(--e-stroke-edge) 0 0 var(--e-bc),
+      inset 0 calc(-1 * var(--e-stroke-edge)) 0 0 var(--e-bc),
+      inset var(--e-band) 0 0 0 var(--e-slab);
+}
+:dir(rtl) .e-tabs--framed.e-tabs--vertical .e-tab[aria-selected="true"] {
+    box-shadow:
+      inset 0 var(--e-stroke-edge) 0 0 var(--e-bc),
+      inset 0 calc(-1 * var(--e-stroke-edge)) 0 0 var(--e-bc),
+      inset calc(-1 * var(--e-band)) 0 0 0 var(--e-slab);
+}
+.e-tabs--framed.e-tabs--vertical .e-tab[aria-selected="true"]:first-child {
+    margin-block-start: 0;
+}
+.e-tabs--framed.e-tabs--vertical .e-tabpanel {
+    padding: var(--e-space-4);
+}
 .e-tab-count {
     min-width: var(--e-space-6);
     padding: 0 var(--e-space-2);
     border-radius: var(--e-radius-pill);
     background: color-mix(in srgb, var(--e-primary) 12%, var(--e-surface));
     box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-primary);
-    outline: var(--e-stroke-hair) solid var(--e-primary);
-    outline-offset: calc(-1 * var(--e-stroke-hair));
     font: 600 var(--e-text-xs) / 20px var(--e-font-mono);
     text-align: center;
     color: var(--e-ink);
@@ -5029,22 +5236,23 @@ to {
     justify-items: center;
     gap: var(--e-space-1);
     padding: var(--e-space-6) var(--e-space-4);
-    border: var(--e-stroke-edge) dashed var(--e-border-strong);
+    outline: var(--e-stroke-edge) dashed var(--e-border-strong);
+    outline-offset: calc(-1 * var(--e-stroke-edge));
     border-radius: var(--e-radius-md);
     background: var(--e-surface);
     text-align: center;
     cursor: pointer;
     transition:
       background-color var(--e-duration-tap) var(--e-easing-out),
-      border-color var(--e-duration-tap) var(--e-easing-out);
+      outline-color var(--e-duration-tap) var(--e-easing-out);
 }
 .e-drop:hover {
     background: var(--e-surface-hover);
-    border-color: var(--e-ink);
+    outline-color: var(--e-ink);
 }
 .e-drop--over {
     background: var(--e-secondary-soft);
-    border-color: var(--e-secondary);
+    outline-color: var(--e-secondary);
 }
 .e-drop-main {
     font: 400 var(--e-text-md)/1.4 var(--e-font-sans);
@@ -5068,7 +5276,7 @@ to {
 }
 .e-drop-input:focus-visible + .e-files,
   .e-field:focus-within .e-drop {
-    outline: var(--e-stroke-focus) solid var(--e-focus-field);
+    outline: max(var(--e-stroke-focus), calc(2 * var(--e-stroke-edge))) solid var(--e-focus-field);
     outline-offset: var(--e-focus-gap-field);
 }
 .e-files {
@@ -5103,8 +5311,8 @@ to {
 @media (forced-colors: active) {
 .e-drop:hover,
     .e-drop--over {
-      border-style: solid;
-      border-color: Highlight;
+      outline-style: solid;
+      outline-color: Highlight;
 }
 }
 }