@eos-ui/vue 0.4.0 → 0.5.1

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,21 +476,31 @@
     width: var(--e-tap, 44px);
     height: var(--e-tap, 44px);
     overflow: hidden;
-    border: var(--e-stroke-edge) solid var(--e-border-strong);
+    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-ring: var(--e-ink);
 }
 .e-avatar--button:focus-visible {
     outline: var(--e-stroke-focus) solid var(--e-focus-ring);
@@ -608,21 +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));
 
-    /* The face is a whole rounded box and the slab is an offset copy of it showing underneath, in the colour of the face's own edge. The margin gives back the room the slab takes, so the button is still one control height tall, and pressing sinks the face onto the slab. */
+    /* 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: calc(var(--e-control-height) - var(--e-lift));
-    margin-block-end: var(--e-lift);
-    padding: 0 var(--e-space-4);
-    border: var(--e-stroke-edge) solid var(--e-slab);
+    height: var(--e-control-height);
+    padding: 0 var(--e-space-4) var(--e-lift);
+    border: 0;
     border-radius: var(--e-radius-md);
-    background: var(--e-fill);
-    box-shadow: 0 var(--e-lift) 0 0 var(--e-slab);
+    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;
@@ -630,17 +648,19 @@
     text-decoration: none;
     cursor: pointer;
     transition:
-      transform 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-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);
-    box-shadow: 0 0 0 0 var(--e-slab);
-    transform: translateY(var(--e-lift));
+    --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);
@@ -656,21 +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);
+
+    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-ring: var(--e-ink);
+    --e-slab: var(--e-ink);
+
+    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;
 
     background: transparent;
     color: var(--e-ink);
-    box-shadow: none;
+    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;
@@ -678,18 +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-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-ring: var(--e-ink);
+
     background: var(--e-wash-press);
     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%;
 }
@@ -699,9 +776,9 @@
   .e-btn[aria-pressed="true"]:hover,
   .e-btn[aria-pressed="true"]:active {
     --e-slab: 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],
@@ -711,8 +788,8 @@
     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;
     transform: none;
 }
@@ -720,6 +797,12 @@
 .e-btn {
       transition: none;
 }
+.e-btn-spinner {
+      animation-duration: 3s;
+}
+.e-btn--loading {
+      animation: none;
+}
 }
 @media print {
 .e-btn {
@@ -737,7 +820,7 @@
 }
 .e-btn[disabled],
     .e-btn[aria-disabled="true"] {
-      border-color: GrayText;
+      outline-color: GrayText;
       color: GrayText;
 }
 }
@@ -767,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;
 }
@@ -788,7 +872,7 @@
       outline-offset: calc(-1 * var(--e-stroke-edge));
 }
 .e-icon-btn:disabled {
-      border-color: GrayText;
+      outline-color: GrayText;
       color: GrayText;
 }
 }
@@ -826,7 +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;
+    border: 0;
     border-radius: var(--e-radius-md);
     background: transparent;
     color: var(--e-ink);
@@ -836,7 +920,7 @@
 }
 .e-cal-pick:hover {
     background: var(--e-surface-hover);
-    border-color: 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);
@@ -889,7 +973,7 @@
     width: 100%;
     height: var(--e-tap);
     padding: 0;
-    border: var(--e-stroke-edge) solid transparent;
+    border: 0;
     border-radius: var(--e-radius-md);
     background: transparent;
     color: var(--e-ink);
@@ -902,7 +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);
+    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);
@@ -917,7 +1001,7 @@
 }
 .e-day--sel {
     background: var(--e-primary);
-    border-color: var(--e-primary);
+    box-shadow: none;
     font-weight: 700;
     color: var(--e-on-primary);
 }
@@ -960,7 +1044,7 @@
     height: 100%;
     min-height: var(--e-tap);
     padding: 0;
-    border: var(--e-stroke-edge) solid transparent;
+    border: 0;
     border-radius: var(--e-radius-md);
     background: transparent;
     color: var(--e-ink);
@@ -976,7 +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);
+    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);
@@ -989,7 +1073,7 @@
 }
 .e-cal-cell.e-day--sel {
     background: var(--e-primary);
-    border-color: var(--e-primary);
+    box-shadow: none;
     font-weight: 700;
     color: var(--e-on-primary);
 }
@@ -1092,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);
   }
 
@@ -1111,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;
   }
@@ -1135,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);
@@ -1155,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) {
@@ -1307,18 +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);
+    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);
   }
 
@@ -1327,25 +1420,34 @@
   }
 
   .e-input:hover {
-    border-color: var(--e-ink);
     background-color: var(--e-surface-hover);
   }
 
   .e-input:focus {
-    border-color: 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);
+
+    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 {
@@ -1354,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);
@@ -1366,46 +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);
     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);
     background: var(--e-surface-hover);
   }
 
   .e-input-wrap:focus-within {
-    border-color: 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);
-    box-shadow:
-      var(--e-well), inset 0 0 0 var(--e-stroke-hair) var(--e-danger);
+    --e-ring: var(--e-danger);
+
     background: var(--e-surface);
   }
 
+  .e-input-wrap[data-invalid]:hover {
+    background: var(--e-danger-soft);
+  }
+
   .e-input-wrap[data-invalid]:focus-within {
-    border-color: var(--e-danger);
+    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);
@@ -1413,7 +1521,6 @@
 
   .e-input-wrap .e-input {
     flex: 1;
-    border: 0;
     outline: 0;
     background: transparent;
     box-shadow: none;
@@ -1465,7 +1572,7 @@
 
     .e-input:disabled,
     .e-input-wrap[data-disabled] {
-      border-color: GrayText;
+      outline-color: GrayText;
     }
 
     .e-input:focus-visible,
@@ -1800,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;
@@ -1954,27 +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);
+    color: var(--e-primary);
 }
 .e-empty-icon .e-icon {
-    width: 26px;
-    height: 26px;
+    width: 40px;
+    height: 40px;
 }
 .e-empty-title {
     margin: 0;
@@ -1987,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;
@@ -2016,7 +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;
+    border: 0;
     border-radius: var(--e-radius-md);
     background: transparent;
     color: var(--e-ink);
@@ -2025,11 +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);
+    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);
@@ -2037,7 +2145,7 @@ to {
 }
 .e-page[aria-current="page"] {
     background: var(--e-primary);
-    border-color: var(--e-primary);
+    box-shadow: none;
     color: var(--e-on-primary);
     font-weight: 600;
     cursor: default;
@@ -2089,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 {
@@ -2173,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;
@@ -2189,30 +2303,52 @@ 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;
@@ -2363,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);
@@ -2635,15 +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);
     cursor: default;
     justify-self: start;
 }
@@ -2866,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 {
@@ -2984,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);
@@ -3056,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);
@@ -3445,9 +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);
+    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;
@@ -3458,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));
 }
 }
 }
@@ -3597,19 +3731,20 @@ a:any-link > .e-highlight {
     display: flex;
     align-items: center;
     gap: var(--e-space-3);
-    height: calc(var(--e-control-height) - var(--e-lift));
-    margin-block-end: var(--e-lift);
+    height: var(--e-control-height);
     box-sizing: border-box;
-    padding: 0 var(--e-space-3);
+    padding: 0 var(--e-space-3) var(--e-lift);
 
     --e-lift: 0px;
 
-    border: var(--e-stroke-edge) solid transparent;
+    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-color: var(--e-surface-hover);
@@ -3621,11 +3756,16 @@ a:any-link > .e-highlight {
 .e-nav-item[aria-current="page"] {
     background-color: color-mix(in srgb, var(--e-surface-tint), var(--e-ink) 3%);
     font-weight: 600;
-    border-color: var(--e-primary);
 
     --e-lift: var(--e-depth);
+    --e-slab: var(--e-primary);
 
-    box-shadow: 0 var(--e-lift) 0 0 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;
@@ -3747,11 +3887,11 @@ a:any-link > .e-highlight {
     container-type: inline-size;
     padding: var(--e-space-3) var(--e-space-4);
     padding-left: calc(var(--e-space-4) + 2 * var(--e-depth));
-    border: var(--e-stroke-edge) solid var(--e-tone);
+    border: 0;
     border-radius: var(--e-radius-md);
     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-origin: border-box;
     background-repeat: no-repeat;
     color: var(--e-ink);
 }
@@ -3809,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;
@@ -3852,9 +3992,6 @@ a:any-link > .e-highlight {
     align-items: center;
     gap: var(--e-space-2) var(--e-space-4);
 }
-.e-pagehead-titlerow > :not(.e-pagehead-title) {
-    margin-top: var(--e-space-1);
-}
 }
 @layer e.reset, e.tokens, e.base, e.primitives, e.blocks, e.controls, e.composites, e.containers, e.page;
 @layer e.composites {
@@ -3886,8 +4023,8 @@ a:any-link > .e-highlight {
     flex: none;
     width: 14px;
     height: 14px;
-    border: var(--e-stroke-edge) solid var(--e-border-strong);
     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;
@@ -4020,24 +4157,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);
     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);
+    background: var(--e-surface-hover);
 }
 .e-search .e-btn {
     position: relative;
-    height: calc(var(--e-control-height) - 6px - var(--e-lift));
-    padding: 0 var(--e-space-3);
+    height: calc(var(--e-control-height) - 6px);
+    padding: 0 var(--e-space-3) var(--e-lift);
     font-size: var(--e-text-md);
 }
 .e-search .e-btn::after {
@@ -4104,8 +4244,10 @@ to {
     outline: none;
 }
 .e-search:focus-within {
-    border-color: var(--e-focus-field);
-    outline: var(--e-stroke-focus) solid var(--e-focus-field);
+    --e-ring: 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) {
@@ -4160,12 +4302,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);
+    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;
@@ -4175,9 +4322,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;
@@ -4190,18 +4334,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);
+.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;
 }
@@ -4216,9 +4366,13 @@ 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);
 }
 .e-seg-field {
@@ -4247,10 +4401,11 @@ to {
 .e-pad-surface {
     position: relative;
     overflow: hidden;
-    border: var(--e-stroke-edge) solid var(--e-border-strong);
     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: "";
@@ -4442,18 +4597,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);
 }
@@ -4508,7 +4665,6 @@ to {
 .e-step[data-state="done"] .e-step-dot {
       forced-color-adjust: none;
       background: Highlight;
-      border-color: Highlight;
       color: HighlightText;
 }
 }
@@ -4574,19 +4730,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);
     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: "";
@@ -4601,19 +4758,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-ring: var(--e-ink);
 }
 .e-switch-input:checked + .e-switch-track {
+    --e-ring: var(--e-primary);
+
     background: var(--e-primary);
-    border-color: 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 {
@@ -4640,8 +4799,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;
@@ -4652,30 +4882,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: its face is a whole rounded box with an offset copy in the primary colour showing underneath. The margin gives back the room that copy takes, so every tab row is one control height tall. */
+    /* 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: calc(var(--e-control-height) - var(--e-lift));
-    margin-block-end: var(--e-lift);
-    padding: 0 var(--e-space-4);
-    border: var(--e-stroke-edge) solid var(--e-bc);
+    height: var(--e-control-height);
+    padding: 0 var(--e-space-4) var(--e-lift);
+    border: 0;
     border-radius: 0;
     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. */
@@ -4703,24 +4936,166 @@ to {
 
     z-index: var(--e-z-sticky);
     background-color: color-mix(in srgb, var(--e-surface-tint), var(--e-ink) 3%);
-    box-shadow: 0 var(--e-lift) 0 0 var(--e-primary);
+    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);
     outline-offset: var(--e-focus-gap);
 }
-.e-tabs--fill .e-tablist {
+.e-tabs--fill > .e-tablist {
     overflow-x: hidden;
 }
-.e-tabs--fill .e-tab {
+.e-tabs--fill > .e-tablist > .e-tab {
     flex: 1 1 0;
     min-width: 0;
     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-tablist > .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-tablist > .e-tab:first-child {
+    border-start-start-radius: var(--e-radius-md);
+    border-start-end-radius: var(--e-radius-md);
+}
+.e-tabs--vertical > .e-tablist > .e-tab:last-child {
+    border-end-start-radius: var(--e-radius-md);
+    border-end-end-radius: var(--e-radius-md);
+}
+.e-tabs--vertical > .e-tablist > .e-tab + .e-tab {
+    margin-inline-start: 0;
+    margin-block-start: calc(-1 * var(--e-stroke-edge));
+}
+.e-tabs--vertical > .e-tablist > .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-tablist > .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-tablist > .e-tab {
+    --e-bc: var(--e-border-strong);
+    --e-lift: 0px;
+
+    border-radius: 0;
+    background-color: var(--e-surface-tint);
+}
+.e-tabs--framed > .e-tablist > .e-tab:first-child {
+    border-start-start-radius: var(--e-radius-md);
+}
+.e-tabs--framed.e-tabs--fill > .e-tablist > .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-tablist > .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-tablist > .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-tablist > .e-tab {
+    border-radius: 0;
+}
+.e-tabs--framed.e-tabs--vertical > .e-tablist > .e-tab:first-child {
+    border-start-start-radius: var(--e-radius-md);
+}
+.e-tabs--framed.e-tabs--vertical > .e-tablist > .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-tablist > .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-tablist > .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);
@@ -4858,22 +5233,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);
@@ -4897,7 +5273,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 {
@@ -4932,8 +5308,8 @@ to {
 @media (forced-colors: active) {
 .e-drop:hover,
     .e-drop--over {
-      border-style: solid;
-      border-color: Highlight;
+      outline-style: solid;
+      outline-color: Highlight;
 }
 }
 }