@eos-ui/vue 0.3.0 → 0.4.0

package/dist/style.css

@@ -472,11 +472,6 @@
     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-radius: var(--e-radius-md);
     background: var(--e-surface-tint);
     color: var(--e-primary);
@@ -491,8 +486,6 @@
 }
 .e-avatar--button:hover {
     border-color: var(--e-ink);
-
-    --e-bc: var(--e-ink);
 }
 .e-avatar--button:focus-visible {
     outline: var(--e-stroke-focus) solid var(--e-focus-ring);
@@ -615,22 +608,21 @@
     --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. */
+    --e-lift: var(--e-depth);
+
     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;
+    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);
-
-    --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));
     border-radius: var(--e-radius-md);
     background: var(--e-fill);
+    box-shadow: 0 var(--e-lift) 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;
@@ -638,6 +630,7 @@
     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);
 }
@@ -646,8 +639,8 @@
 }
 .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));
+    box-shadow: 0 0 0 0 var(--e-slab);
+    transform: translateY(var(--e-lift));
 }
 .e-btn--secondary {
     --e-fill: var(--e-secondary);
@@ -665,28 +658,19 @@
 .e-btn--outline:hover {
     background: color-mix(in srgb, var(--e-surface), var(--e-shade-hover));
     border-color: var(--e-ink);
-
-    --e-bc: var(--e-ink);
 }
 .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);
-
-    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-btn--quiet {
     border-color: transparent;
 
-    --e-bc: transparent;
+    --e-lift: 0px;
 
-    border-bottom-width: var(--e-stroke-edge);
     background: transparent;
     color: var(--e-ink);
     box-shadow: none;
-    padding-top: 0;
     padding-inline: var(--e-space-3);
     text-decoration: underline;
     text-underline-offset: 5px;
@@ -695,20 +679,13 @@
 }
 .e-btn--quiet:not([disabled], [aria-disabled="true"]):hover {
     border-color: var(--e-wash-ring);
-
-    --e-bc: 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);
-
     background: var(--e-wash-press);
-    box-shadow: none;
-    padding-top: 0;
+    transform: none;
 }
 .e-btn .e-icon {
     margin-inline-start: calc(-0.5 * var(--e-space-1));
@@ -722,7 +699,6 @@
   .e-btn[aria-pressed="true"]:hover,
   .e-btn[aria-pressed="true"]:active {
     --e-slab: var(--e-primary);
-    --e-bc: var(--e-primary);
 
     border-color: var(--e-primary);
     background: var(--e-surface-hover);
@@ -730,13 +706,15 @@
 }
 .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;
     box-shadow: none;
-    padding-top: 0;
+    transform: none;
 }
 @media (prefers-reduced-motion: reduce) {
 .e-btn {
@@ -849,11 +827,6 @@
     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-radius: var(--e-radius-md);
     background: transparent;
     color: var(--e-ink);
@@ -864,8 +837,6 @@
 .e-cal-pick:hover {
     background: var(--e-surface-hover);
     border-color: var(--e-border-strong);
-
-    --e-bc: var(--e-border-strong);
 }
 .e-cal-pick:focus-visible {
     outline: var(--e-stroke-focus) solid var(--e-focus-ring);
@@ -919,11 +890,6 @@
     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-radius: var(--e-radius-md);
     background: transparent;
     color: var(--e-ink);
@@ -937,8 +903,6 @@
 .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);
 }
 .e-day:focus-visible {
     outline: var(--e-stroke-focus) solid var(--e-focus-ring);
@@ -954,9 +918,6 @@
 .e-day--sel {
     background: var(--e-primary);
     border-color: var(--e-primary);
-
-    --e-bc: var(--e-primary);
-
     font-weight: 700;
     color: var(--e-on-primary);
 }
@@ -1000,11 +961,6 @@
     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-radius: var(--e-radius-md);
     background: transparent;
     color: var(--e-ink);
@@ -1021,8 +977,6 @@
 .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);
 }
 .e-cal-cell:focus-visible {
     outline: var(--e-stroke-focus) solid var(--e-focus-ring);
@@ -1036,9 +990,6 @@
 .e-cal-cell.e-day--sel {
     background: var(--e-primary);
     border-color: var(--e-primary);
-
-    --e-bc: var(--e-primary);
-
     font-weight: 700;
     color: var(--e-on-primary);
 }
@@ -1278,8 +1229,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. */
@@ -1363,11 +1312,6 @@
     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-radius: var(--e-radius-md);
     background-color: var(--e-surface);
     box-shadow: var(--e-well);
@@ -1384,17 +1328,11 @@
 
   .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);
-
     background-color: var(--e-surface);
   }
 
@@ -1405,9 +1343,6 @@
 
   .e-input[aria-invalid="true"] {
     border-color: var(--e-danger);
-
-    --e-bc: var(--e-danger);
-
     background-color: var(--e-surface);
     box-shadow:
       var(--e-well), inset 0 0 0 var(--e-stroke-hair) var(--e-danger);
@@ -1436,11 +1371,6 @@
     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);
@@ -1451,17 +1381,11 @@
 
   .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);
-
     background: var(--e-surface);
     outline: var(--e-stroke-focus) solid var(--e-focus-field);
     outline-offset: var(--e-focus-gap-field);
@@ -1469,9 +1393,6 @@
 
   .e-input-wrap[data-invalid] {
     border-color: var(--e-danger);
-
-    --e-bc: var(--e-danger);
-
     box-shadow:
       var(--e-well), inset 0 0 0 var(--e-stroke-hair) var(--e-danger);
     background: var(--e-surface);
@@ -1479,9 +1400,6 @@
 
   .e-input-wrap[data-invalid]:focus-within {
     border-color: var(--e-danger);
-
-    --e-bc: var(--e-danger);
-
     outline-color: var(--e-danger);
   }
 
@@ -1649,8 +1567,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 +1613,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 +1676,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 {
@@ -2059,11 +1971,6 @@ to {
     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));
 }
 .e-empty-icon .e-icon {
     width: 26px;
@@ -2110,11 +2017,6 @@ to {
     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-radius: var(--e-radius-md);
     background: transparent;
     color: var(--e-ink);
@@ -2128,8 +2030,6 @@ to {
 .e-page:hover {
     background: var(--e-surface-hover);
     border-color: var(--e-border-strong);
-
-    --e-bc: var(--e-border-strong);
 }
 .e-page:focus-visible {
     outline: var(--e-stroke-focus) solid var(--e-focus-ring);
@@ -2138,9 +2038,6 @@ to {
 .e-page[aria-current="page"] {
     background: var(--e-primary);
     border-color: var(--e-primary);
-
-    --e-bc: var(--e-primary);
-
     color: var(--e-on-primary);
     font-weight: 600;
     cursor: default;
@@ -2322,8 +2219,6 @@ to {
     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 +2245,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 {
@@ -2645,8 +2538,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 +2620,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);
   }
 }
@@ -2755,8 +2644,6 @@ to {
     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 +2811,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);
   }
 
@@ -3187,34 +3072,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);
@@ -3562,11 +3446,6 @@ a:any-link > .e-highlight {
     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-radius: var(--e-radius-sm);
     background: var(--e-surface-tint);
     color: var(--e-muted);
@@ -3646,8 +3525,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);
@@ -3720,9 +3597,13 @@ a:any-link > .e-highlight {
     display: flex;
     align-items: center;
     gap: var(--e-space-3);
-    height: var(--e-control-height);
+    height: calc(var(--e-control-height) - var(--e-lift));
+    margin-block-end: var(--e-lift);
     box-sizing: border-box;
     padding: 0 var(--e-space-3);
+
+    --e-lift: 0px;
+
     border: var(--e-stroke-edge) solid transparent;
     border-radius: var(--e-radius-md);
     color: var(--e-ink);
@@ -3731,17 +3612,20 @@ a:any-link > .e-highlight {
     transition: background-color 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);
+
+    box-shadow: 0 var(--e-lift) 0 0 var(--e-primary);
 }
 .e-nav-label {
     flex: 1;
@@ -3781,8 +3665,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 +3746,13 @@ 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);
-
-    --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));
     border-radius: var(--e-radius-md);
-    background: var(--e-bg);
+    background-color: var(--e-bg);
+    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);
 }
 .e-notice--success {
@@ -4007,11 +3887,6 @@ a:any-link > .e-highlight {
     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%;
 }
 }
@@ -4047,8 +3922,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 +3929,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 {
@@ -4155,11 +4026,6 @@ to {
     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);
@@ -4167,12 +4033,10 @@ to {
 }
 .e-search:hover {
     border-color: var(--e-ink);
-
-    --e-bc: var(--e-ink);
 }
 .e-search .e-btn {
     position: relative;
-    height: calc(var(--e-control-height) - 6px);
+    height: calc(var(--e-control-height) - 6px - var(--e-lift));
     padding: 0 var(--e-space-3);
     font-size: var(--e-text-md);
 }
@@ -4241,9 +4105,6 @@ to {
 }
 .e-search:focus-within {
     border-color: var(--e-focus-field);
-
-    --e-bc: var(--e-focus-field);
-
     outline: var(--e-stroke-focus) solid var(--e-focus-field);
     outline-offset: var(--e-focus-gap-field);
 }
@@ -4267,8 +4128,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 +4144,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);
@@ -4307,11 +4164,6 @@ to {
     display: inline-flex;
     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-border-strong);
     overflow: hidden;
@@ -4350,7 +4202,6 @@ to {
 }
 .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));
     color: var(--e-on-primary);
     font-weight: 600;
 }
@@ -4369,7 +4220,6 @@ to {
   .e-seg-opt:has(:disabled:checked):hover .e-seg-text {
     background: var(--e-surface-hover);
     color: var(--e-ink);
-    box-shadow: inset 0 calc(-1 * var(--e-depth)) 0 0 var(--e-border-strong);
 }
 .e-seg-field {
     display: grid;
@@ -4398,11 +4248,6 @@ to {
     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);
@@ -4499,8 +4344,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 +4352,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 {
@@ -4679,8 +4520,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 +4539,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);
@@ -4745,11 +4582,6 @@ to {
     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);
     transition:
@@ -4770,14 +4602,10 @@ to {
 }
 .e-switch:hover .e-switch-track {
     border-color: var(--e-ink);
-
-    --e-bc: var(--e-ink);
 }
 .e-switch-input:checked + .e-switch-track {
     background: var(--e-primary);
     border-color: var(--e-primary);
-
-    --e-bc: var(--e-primary);
 }
 .e-switch-input:checked + .e-switch-track::after {
     background: var(--e-on-primary);
@@ -4828,17 +4656,19 @@ to {
 .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. */
+    --e-lift: 0px;
+
     position: relative;
     display: inline-flex;
     align-items: center;
     gap: var(--e-space-2);
     flex: none;
-    height: var(--e-control-height);
+    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);
     border-radius: 0;
-    outline: var(--e-stroke-edge) solid var(--e-bc);
-    outline-offset: calc(-1 * var(--e-stroke-edge));
     background: transparent;
     color: var(--e-muted);
     font: 500 var(--e-text-md) / 1 var(--e-font-sans);
@@ -4869,10 +4699,11 @@ 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: 0 var(--e-lift) 0 0 var(--e-primary);
     color: var(--e-ink);
     font-weight: 600;
 }
@@ -4896,8 +4727,6 @@ to {
     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);