@eos-ui/vue 0.5.1 → 0.5.3

package/dist/style.css

@@ -18,7 +18,7 @@
   --e-background: #ffffff;
   --e-surface: #ffffff;
   --e-surface-tint: #eaf4f8;
-  --e-surface-hover: color-mix(in srgb, var(--e-surface-tint), var(--e-ink) 3%);
+  --e-surface-hover: color-mix(in srgb, var(--e-surface), var(--e-ink) 9%);
   --e-ink: #000000;
   --e-print-ink: #000000;
   --e-print-paper: #ffffff;
@@ -402,6 +402,7 @@
 @layer e.page {
 .e-shell {
     position: relative;
+    overflow-x: clip;
     display: grid;
     grid-template-rows: auto 1fr auto;
     min-height: 100%;
@@ -417,20 +418,19 @@
     padding: var(--e-space-6) var(--e-space-4);
 }
 
-  /* Hairlines down both edges of the page column, drawn over the header and footer. */
-@media (min-width: 64rem) {
+  /* Hairlines just outside both edges of the page column, drawn over the header and footer. When the column fills the screen they fall off it and nothing shows. */
 .e-shell::after {
-      content: "";
-      position: absolute;
-      inset-block: 0;
-      inset-inline: 0;
-      z-index: var(--e-z-sticky);
-      box-sizing: border-box;
-      width: min(100%, var(--e-shell-width, 72rem));
-      margin-inline: auto;
-      border-inline: var(--e-stroke-hair) solid var(--e-shell-rail, var(--e-border));
-      pointer-events: none;
-}
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline: 0;
+    z-index: var(--e-z-sticky);
+    width: min(100%, var(--e-shell-width, 72rem));
+    margin-inline: auto;
+    box-shadow:
+      calc(-1 * var(--e-stroke-hair)) 0 0 0 var(--e-shell-rail, var(--e-border)),
+      var(--e-stroke-hair) 0 0 0 var(--e-shell-rail, var(--e-border));
+    pointer-events: none;
 }
 @media (min-width: 48rem) {
 .e-shell--side .e-shell-body {
@@ -476,23 +476,14 @@
     width: var(--e-tap, 44px);
     height: var(--e-tap, 44px);
     overflow: hidden;
-    border: 0;
+    border: var(--e-stroke-edge) solid var(--e-ring);
     border-radius: var(--e-radius-md);
     background: var(--e-surface-tint);
+    background-clip: padding-box;
     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);
+    transition: border-color var(--e-duration-tap) var(--e-easing-out);
 }
 .e-avatar--button {
     position: relative;
@@ -623,9 +614,8 @@
     --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. */
+    /* One border, one control height tall. The slab is the bottom edge made thicker by the lift; the radius tapers it up the corners. 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;
@@ -634,13 +624,15 @@
     justify-content: center;
     gap: var(--e-space-2);
     height: var(--e-control-height);
-    padding: 0 var(--e-space-4) var(--e-lift);
-    border: 0;
+    padding: 0 calc(var(--e-space-4) - var(--e-stroke-edge));
+    box-sizing: border-box;
+    border: var(--e-stroke-edge) solid var(--e-ring);
+    border-bottom-width: calc(var(--e-stroke-edge) + var(--e-lift));
     border-radius: var(--e-radius-md);
     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);
+
+    /* A solid face runs under its border so no page colour shows between them. */
+    background-clip: border-box;
     color: var(--e-on-fill);
     font: 500 var(--e-text-md) / 1 var(--e-font-sans);
     letter-spacing: 0.01em;
@@ -648,7 +640,7 @@
     text-decoration: none;
     cursor: pointer;
     transition:
-      box-shadow var(--e-duration-tap) var(--e-easing-out),
+      border-color var(--e-duration-tap) var(--e-easing-out),
       background-color var(--e-duration-tap) var(--e-easing-out);
 }
 .e-btn:hover {
@@ -660,7 +652,6 @@
     --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);
@@ -674,6 +665,8 @@
     --e-fill: var(--e-surface);
     --e-on-fill: var(--e-ink);
     --e-slab: var(--e-border-strong);
+
+    background-clip: padding-box;
 }
 .e-btn--outline:hover {
     --e-ring: var(--e-ink);
@@ -693,8 +686,7 @@
 
     background: transparent;
     color: var(--e-ink);
-    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-ring);
-    padding-inline: var(--e-space-3);
+    padding-inline: calc(var(--e-space-3) - var(--e-stroke-edge));
     text-decoration: underline;
     text-underline-offset: 5px;
     text-decoration-thickness: var(--e-stroke-edge);
@@ -728,7 +720,7 @@
     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. */
+  /* 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 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);
@@ -743,7 +735,8 @@
     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;
+    background-clip: padding-box;
+    border-color: transparent;
     color: var(--e-busy);
     transform: none;
     cursor: not-allowed;
@@ -752,7 +745,7 @@
 .e-btn--loading::before {
     content: "";
     position: absolute;
-    inset: 0;
+    inset: calc(-1 * var(--e-stroke-edge));
     border: var(--e-stroke-edge) dashed var(--e-busy);
     border-radius: inherit;
     pointer-events: none;
@@ -790,7 +783,7 @@ to {
     color: var(--e-muted);
     outline: var(--e-stroke-edge) dashed var(--e-border-strong);
     outline-offset: calc(-1 * var(--e-stroke-edge));
-    box-shadow: none;
+    border-color: transparent;
     transform: none;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -1179,14 +1172,15 @@ to {
 
     --e-ring: var(--e-border-strong);
 
-    border: 0;
+
+    box-sizing: border-box;
+    border: var(--e-stroke-edge) solid var(--e-ring);
     background: var(--e-surface);
-    box-shadow:
-      inset 0 0 0 var(--e-stroke-edge) var(--e-ring),
-      var(--e-well);
+    background-clip: padding-box;
+    box-shadow: var(--e-well);
     cursor: inherit;
     transition:
-      box-shadow var(--e-duration-tap) var(--e-easing-out),
+      border-color var(--e-duration-tap) var(--e-easing-out),
       background-color var(--e-duration-tap) var(--e-easing-out);
   }
 
@@ -1205,8 +1199,11 @@ to {
     background-color: var(--e-surface-hover);
   }
 
-  .e-check:checked {
+  .e-check:checked,
+  .e-radio:checked {
+    border-color: var(--e-primary);
     background-color: var(--e-primary);
+    background-clip: border-box;
     box-shadow: none;
   }
 
@@ -1224,8 +1221,6 @@ to {
   }
 
   .e-radio:checked {
-    background-color: var(--e-primary);
-    box-shadow: none;
     background-image: radial-gradient(circle, var(--e-on-primary) 0 4px, transparent 5px);
   }
 
@@ -1245,6 +1240,7 @@ to {
   .e-radio:disabled {
     outline: var(--e-stroke-edge) dashed var(--e-border-strong);
     outline-offset: calc(-1 * var(--e-stroke-edge));
+    border-color: transparent;
     background-color: var(--e-surface-tint);
     box-shadow: none;
   }
@@ -1252,8 +1248,9 @@ to {
   .e-check:checked:disabled,
   .e-radio:checked:disabled {
     outline: 0;
+    border-color: var(--e-border-strong);
     background-color: var(--e-surface-tint);
-    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-border-strong);
+    box-shadow: none;
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -1401,17 +1398,19 @@ to {
     width: 100%;
     min-width: 0;
     height: var(--e-control-height);
-    padding: 0 var(--e-space-4);
-    border: 0;
+    padding: 0 calc(var(--e-space-4) - var(--e-stroke-edge));
+
+    /* The edge is a border and the fill stops inside it: a fill under an inset-shadow edge leaks into the antialiased corner. */
+    box-sizing: border-box;
+    border: var(--e-stroke-edge) solid var(--e-ring);
     border-radius: var(--e-radius-md);
     background-color: var(--e-surface);
-    box-shadow:
-      inset 0 0 0 var(--e-stroke-edge) var(--e-ring),
-      var(--e-well);
+    background-clip: padding-box;
+    box-shadow: var(--e-well);
     color: var(--e-ink);
     font: 400 var(--e-text-md)/1 var(--e-font-sans);
     transition:
-      box-shadow var(--e-duration-tap) var(--e-easing-out),
+      border-color var(--e-duration-tap) var(--e-easing-out),
       background-color var(--e-duration-tap) var(--e-easing-out);
   }
 
@@ -1419,14 +1418,18 @@ to {
     color: var(--e-muted);
   }
 
-  .e-input:hover {
-    background-color: var(--e-surface-hover);
+  /* The hover fill is laid over the well, so it runs unbroken to the top edge. */
+  .e-input:hover,
+  .e-input-wrap:hover,
+  .e-search:hover {
+    box-shadow: inset 0 0 0 100vmax var(--e-over, var(--e-surface-hover));
   }
 
   .e-input:focus {
     --e-ring: var(--e-focus-field);
 
     background-color: var(--e-surface);
+    box-shadow: var(--e-well);
   }
 
   /* 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. */
@@ -1442,12 +1445,14 @@ to {
     background-color: var(--e-surface);
   }
 
-  .e-input[aria-invalid="true"]:hover {
-    background-color: var(--e-danger-soft);
+  .e-input[aria-invalid="true"]:hover,
+  .e-input-wrap[data-invalid]:hover {
+    --e-over: var(--e-danger-soft);
   }
 
   .e-input[aria-invalid="true"]:focus {
     background-color: var(--e-surface);
+    box-shadow: var(--e-well);
   }
 
   .e-input[aria-invalid="true"]:focus-visible {
@@ -1458,6 +1463,7 @@ to {
     cursor: not-allowed;
     outline: var(--e-stroke-edge) dashed var(--e-border-strong);
     outline-offset: calc(-1 * var(--e-stroke-edge));
+    border-color: transparent;
     background-color: var(--e-surface-tint);
     box-shadow: none;
     color: var(--e-muted);
@@ -1465,6 +1471,7 @@ to {
 
   .e-input[readonly]:not(:disabled) {
     background-color: var(--e-surface-tint);
+    box-shadow: none;
   }
 
   .e-input-wrap {
@@ -1474,24 +1481,22 @@ to {
     align-items: stretch;
     min-width: 0;
     min-height: var(--e-control-height);
+    box-sizing: border-box;
+    border: var(--e-stroke-edge) solid var(--e-ring);
     border-radius: var(--e-radius-md);
     background: var(--e-surface);
-    box-shadow:
-      inset 0 0 0 var(--e-stroke-edge) var(--e-ring),
-      var(--e-well);
+    background-clip: padding-box;
+    box-shadow: var(--e-well);
     transition:
-      box-shadow var(--e-duration-tap) var(--e-easing-out),
+      border-color var(--e-duration-tap) var(--e-easing-out),
       background-color var(--e-duration-tap) var(--e-easing-out);
   }
 
-  .e-input-wrap:hover {
-    background: var(--e-surface-hover);
-  }
-
   .e-input-wrap:focus-within {
     --e-ring: var(--e-focus-field);
 
     background: var(--e-surface);
+    box-shadow: var(--e-well);
     outline: max(var(--e-stroke-focus), calc(2 * var(--e-stroke-edge))) solid var(--e-focus-field);
     outline-offset: var(--e-focus-gap-field);
   }
@@ -1502,18 +1507,16 @@ to {
     background: var(--e-surface);
   }
 
-  .e-input-wrap[data-invalid]:hover {
-    background: var(--e-danger-soft);
-  }
-
   .e-input-wrap[data-invalid]:focus-within {
     background: var(--e-surface);
+    box-shadow: var(--e-well);
     outline-color: var(--e-danger);
   }
 
   .e-input-wrap[data-disabled] {
     outline: var(--e-stroke-edge) dashed var(--e-border-strong);
     outline-offset: calc(-1 * var(--e-stroke-edge));
+    border-color: transparent;
     background: var(--e-surface-tint);
     box-shadow: none;
     color: var(--e-muted);
@@ -1522,6 +1525,7 @@ to {
   .e-input-wrap .e-input {
     flex: 1;
     outline: 0;
+    border: 0;
     background: transparent;
     box-shadow: none;
     height: auto;
@@ -1532,6 +1536,7 @@ to {
   .e-input-wrap .e-input:hover,
   .e-input-wrap .e-input:focus {
     background: transparent;
+    box-shadow: none;
   }
 
   .e-input-wrap .e-input:focus-visible {
@@ -1817,7 +1822,7 @@ to {
     flex-wrap: nowrap;
     align-items: center;
     min-height: var(--e-control-height);
-    padding-inline-end: var(--e-space-1);
+    padding-inline-end: calc(var(--e-space-1) - var(--e-stroke-edge));
   }
 
   .e-combo:not(.e-combo--multi) .e-input {
@@ -1825,7 +1830,7 @@ to {
     min-width: 4rem;
     height: auto;
     align-self: stretch;
-    padding-inline: var(--e-space-4) var(--e-space-2);
+    padding-inline: calc(var(--e-space-4) - var(--e-stroke-edge)) calc(var(--e-space-2) - var(--e-stroke-edge));
   }
 
   .e-combo-btn {
@@ -1899,7 +1904,7 @@ to {
     align-self: center;
 }
 .e-combo--multi {
-    padding: 3px var(--e-space-1) 3px var(--e-space-2);
+    padding: calc(3px - var(--e-stroke-edge)) calc(var(--e-space-1) - var(--e-stroke-edge)) calc(3px - var(--e-stroke-edge)) calc(var(--e-space-2) - var(--e-stroke-edge));
     gap: var(--e-space-1);
 }
 .e-combo--multi .e-input {
@@ -2192,14 +2197,23 @@ to {
     align-items: center;
     justify-content: space-between;
     gap: var(--e-space-2);
-    padding-inline-end: var(--e-space-3);
+    padding-inline-end: calc(var(--e-space-3) - var(--e-stroke-edge));
     text-align: start;
     cursor: pointer;
 }
+
+  /* Open, the trigger looks focused: focus moves into the list, so the field's own :focus no longer applies. */
 .e-sel-trigger[aria-expanded="true"] {
-    --e-ring: var(--e-ink);
+    --e-ring: var(--e-focus-field);
 
     background-color: 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);
+}
+.e-sel-trigger[aria-expanded="true"][aria-invalid="true"] {
+    --e-ring: var(--e-danger);
+
+    outline-color: var(--e-danger);
 }
 .e-sel-value {
     display: inline-flex;
@@ -2508,11 +2522,11 @@ to {
 .e-filterrow .e-input {
     height: var(--e-control-height);
     font-size: var(--e-text-md);
-    padding-inline: var(--e-space-3);
+    padding-inline: calc(var(--e-space-3) - var(--e-stroke-edge));
 }
 .e-filterrow .e-sel-trigger {
     height: var(--e-control-height);
-    padding-inline-end: var(--e-space-2);
+    padding-inline-end: calc(var(--e-space-2) - var(--e-stroke-edge));
 }
 .e-filter-range {
     display: grid;
@@ -3733,18 +3747,20 @@ 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) var(--e-lift);
+    padding: 0 calc(var(--e-space-3) - var(--e-stroke-edge));
 
     --e-lift: 0px;
 
-    border: 0;
+    /* The current page is outlined with a border and its fill stops inside it, so the corner carries the edge colour alone; the other items have no edge and fill to the box. */
+    border: var(--e-stroke-edge) solid transparent;
+    border-bottom-width: calc(var(--e-stroke-edge) + var(--e-lift));
     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),
-      box-shadow var(--e-duration-tap) var(--e-easing-out);
+      border-color var(--e-duration-tap) var(--e-easing-out);
 }
 .e-nav-item:hover {
     background-color: var(--e-surface-hover);
@@ -3760,9 +3776,9 @@ a:any-link > .e-highlight {
     --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);
+    border-color: var(--e-primary);
+    border-bottom-color: var(--e-slab);
+    background-clip: padding-box;
 }
 .e-nav-item[aria-current="page"]:hover {
     --e-slab: color-mix(in srgb, var(--e-primary), var(--e-shade-slab));
@@ -3885,14 +3901,14 @@ a:any-link > .e-highlight {
     --e-bg: var(--e-surface-tint);
 
     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: 0;
+    padding: calc(var(--e-space-3) - var(--e-stroke-edge)) calc(var(--e-space-4) - var(--e-stroke-edge));
+    padding-left: calc(var(--e-space-4) - var(--e-stroke-edge) + 2 * var(--e-depth));
+    border: var(--e-stroke-edge) solid var(--e-tone);
     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-image: linear-gradient(to right, var(--e-tone) calc(2 * var(--e-depth)), transparent calc(2 * var(--e-depth)));
     background-repeat: no-repeat;
+    background-clip: padding-box;
     color: var(--e-ink);
 }
 .e-notice--success {
@@ -4056,21 +4072,32 @@ a:any-link > .e-highlight {
 .e-progress-track {
     position: relative;
     height: 10px;
+    box-sizing: border-box;
+    padding: calc(var(--e-stroke-card) / 2);
     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);
+    background-clip: content-box;
     overflow: hidden;
 }
+
+  /* The outline lies over the track and bar, which stop half a stroke inside its outer edge: nothing shows outside the curve or in a gap inside it. */
+.e-progress-track::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border: var(--e-stroke-card) solid var(--e-border-strong);
+    border-radius: inherit;
+    pointer-events: none;
+}
 .e-progress-fill {
     height: 100%;
     border-radius: var(--e-radius-pill);
     background: var(--e-primary);
-    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-primary);
     transition: width var(--e-duration-move) var(--e-easing-out);
 }
 .e-progress--indeterminate .e-progress-fill {
     position: absolute;
-    inset: 0 auto 0 0;
+    inset: calc(var(--e-stroke-card) / 2) auto calc(var(--e-stroke-card) / 2) calc(var(--e-stroke-card) / 2);
     width: 40%;
     transition: none;
     animation: e-progress-slide 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
@@ -4098,8 +4125,8 @@ to {
 }
 }
 @media (forced-colors: active) {
-.e-progress-track {
-      border: var(--e-stroke-card) solid CanvasText;
+.e-progress-track::after {
+      border-color: CanvasText;
 }
 .e-progress-fill {
       forced-color-adjust: none;
@@ -4163,21 +4190,19 @@ to {
     align-items: center;
     gap: var(--e-space-1);
     height: var(--e-control-height);
-    padding: 0 var(--e-space-1) 0 var(--e-space-2);
+    padding: 0 calc(var(--e-space-1) - var(--e-stroke-edge)) 0 calc(var(--e-space-2) - var(--e-stroke-edge));
+    box-sizing: border-box;
+    border: var(--e-stroke-edge) solid var(--e-ring);
     border-radius: var(--e-radius-md);
     background: var(--e-surface);
-    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 {
-    background: var(--e-surface-hover);
+    background-clip: padding-box;
+    box-shadow: var(--e-well);
+    transition: border-color var(--e-duration-tap) var(--e-easing-out);
 }
 .e-search .e-btn {
     position: relative;
     height: calc(var(--e-control-height) - 6px);
-    padding: 0 var(--e-space-3) var(--e-lift);
+    padding: 0 calc(var(--e-space-3) - var(--e-stroke-edge));
     font-size: var(--e-text-md);
 }
 .e-search .e-btn::after {
@@ -4239,6 +4264,7 @@ to {
   .e-search .e-input:focus {
     border: 0;
     background: transparent;
+    box-shadow: none;
 }
 .e-search .e-input:focus-visible {
     outline: none;
@@ -4372,7 +4398,8 @@ to {
   .e-seg-opt:has(:disabled:checked):hover .e-seg-text {
     background-color: var(--e-surface);
     background-image: none;
-    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-border-strong);
+    outline: var(--e-stroke-edge) solid var(--e-border-strong);
+    outline-offset: calc(-1 * var(--e-stroke-edge));
     color: var(--e-ink);
 }
 .e-seg-field {
@@ -4401,11 +4428,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:
-      inset 0 0 0 var(--e-stroke-edge) var(--e-border-strong),
-      var(--e-well);
+    background-clip: padding-box;
+    box-shadow: var(--e-well);
 }
 .e-pad-surface::after {
     content: "";
@@ -4596,23 +4623,28 @@ to {
     place-items: center;
     width: var(--e-dot);
     height: var(--e-dot);
+    box-sizing: border-box;
+    border: var(--e-stroke-edge) solid transparent;
     border-radius: 50%;
     outline: var(--e-stroke-edge) dashed var(--e-border-strong);
     outline-offset: calc(-1 * var(--e-stroke-edge));
     background: var(--e-surface);
+    background-clip: padding-box;
     color: var(--e-muted);
     font: 600 var(--e-text-xs) / 1 var(--e-font-mono);
 }
 .e-step[data-state="done"] .e-step-dot {
     outline: 0;
+    border-color: var(--e-primary);
     background: var(--e-primary);
     color: var(--e-on-primary);
 }
 .e-step[data-state="current"] .e-step-dot {
     outline: 0;
-    box-shadow: inset 0 0 0 var(--e-stroke-focus) var(--e-primary);
+    border: var(--e-stroke-focus) solid var(--e-primary);
     color: var(--e-primary);
     background: var(--e-surface);
+    background-clip: padding-box;
 }
 .e-step-label {
     font: 400 var(--e-text-sm) / 1.3 var(--e-font-sans);
@@ -4738,18 +4770,20 @@ to {
     flex: none;
     width: var(--e-switch-w);
     height: 24px;
+    box-sizing: border-box;
+    border: var(--e-stroke-edge) solid var(--e-ring);
     border-radius: var(--e-radius-pill);
     background: var(--e-surface-tint);
-    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-ring);
+    background-clip: padding-box;
     transition:
       background-color var(--e-duration-tap) var(--e-easing-out),
-      box-shadow var(--e-duration-tap) var(--e-easing-out);
+      border-color var(--e-duration-tap) var(--e-easing-out);
 }
 .e-switch-track::after {
     content: "";
     position: absolute;
     top: 50%;
-    inset-inline-start: var(--e-thumb-inset);
+    inset-inline-start: calc(var(--e-thumb-inset) - var(--e-stroke-edge));
     width: var(--e-thumb);
     height: var(--e-thumb);
     margin-top: calc(var(--e-thumb) / -2);
@@ -4763,17 +4797,18 @@ to {
 .e-switch-input:checked + .e-switch-track {
     --e-ring: var(--e-primary);
 
-    background: var(--e-primary);
+    background-color: var(--e-primary);
+    background-clip: border-box;
 }
 .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 {
-    box-shadow: none;
+    border-color: transparent;
     outline: var(--e-stroke-edge) dashed var(--e-border-strong);
     outline-offset: calc(-1 * var(--e-stroke-edge));
-    background: var(--e-surface-tint);
+    background-color: var(--e-surface-tint);
 }
 .e-switch-input:disabled + .e-switch-track::after {
     background: var(--e-muted);
@@ -4888,7 +4923,6 @@ to {
 
     /* 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;
@@ -4897,18 +4931,19 @@ to {
     gap: var(--e-space-2);
     flex: none;
     height: var(--e-control-height);
-    padding: 0 var(--e-space-4) var(--e-lift);
-    border: 0;
+    padding: 0 calc(var(--e-space-4) - var(--e-stroke-edge));
+    border: var(--e-stroke-edge) solid var(--e-bc);
+    border-bottom-width: calc(var(--e-stroke-edge) + var(--e-lift));
     border-radius: 0;
     background: transparent;
-    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-bc);
+    background-clip: padding-box;
     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),
-      box-shadow var(--e-duration-tap) var(--e-easing-out);
+      border-color var(--e-duration-tap) var(--e-easing-out);
 }
 
   /* Only the outer ends of the row are rounded. */
@@ -4935,10 +4970,8 @@ to {
     --e-lift: var(--e-depth);
 
     z-index: var(--e-z-sticky);
+    border-bottom-color: var(--e-slab);
     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;
 }
@@ -4959,10 +4992,10 @@ to {
     flex: 1 1 0;
     min-width: 0;
     justify-content: center;
-    padding-inline: var(--e-space-1);
+    padding-inline: max(0px, calc(var(--e-space-1) - var(--e-stroke-edge)));
 }
 
-  /* 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. */
+  /* Vertical: the tabs stack beside the panel, flush and sharing edges. The selected tab's slab is a band down the inline-start side, and only the column's ends are rounded. */
 .e-tabs--vertical {
     display: flex;
     align-items: flex-start;
@@ -4977,7 +5010,6 @@ to {
     --e-lift: 0px;
 
     height: var(--e-control-height);
-    padding-block-end: 0;
     justify-content: flex-start;
     border-radius: 0;
 }
@@ -4996,23 +5028,18 @@ to {
 .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);
+    border-bottom-width: var(--e-stroke-edge);
+    border-bottom-color: var(--e-bc);
+    border-inline-start-width: calc(var(--e-stroke-edge) + var(--e-lift));
+    border-inline-start-color: 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. */
+  /* 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. Only the card's outer corner at the first tab is rounded. The row leaves a corner's width of open edge past the last tab, so the panel's curve never meets a tab's straight edge. */
 .e-tabs--framed > .e-tablist {
     position: relative;
     z-index: var(--e-z-raised);
@@ -5043,19 +5070,19 @@ to {
     --e-bc: var(--e-primary);
     --e-lift: var(--e-depth);
 
-    padding-block: var(--e-lift) 0;
+    padding-block-end: var(--e-stroke-edge);
+    border-bottom-width: 0;
+    border-top-width: calc(var(--e-stroke-edge) + var(--e-lift));
+    border-top-color: var(--e-slab);
     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);
+    padding: calc(var(--e-space-4) - var(--e-stroke-edge));
+    border: var(--e-stroke-edge) solid var(--e-border-strong);
     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);
+    background-clip: padding-box;
 }
 .e-tabs--framed.e-tabs--fill > .e-tabpanel {
     border-start-end-radius: 0;
@@ -5078,23 +5105,19 @@ to {
 .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);
+    border-block-start-width: var(--e-stroke-edge);
+    border-block-start-color: var(--e-bc);
+    border-block-end-width: var(--e-stroke-edge);
+    border-block-end-color: var(--e-bc);
+    border-inline-start-width: calc(var(--e-stroke-edge) + var(--e-lift));
+    border-inline-start-color: var(--e-slab);
+    border-inline-end-width: 0;
 }
 .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);
+    padding: calc(var(--e-space-4) - var(--e-stroke-edge));
 }
 .e-tab-count {
     min-width: var(--e-space-6);
@@ -5148,7 +5171,7 @@ to {
 .e-textarea {
     height: auto;
     min-height: 6.5rem;
-    padding: var(--e-space-3) var(--e-space-4);
+    padding: calc(var(--e-space-3) - var(--e-stroke-edge)) calc(var(--e-space-4) - var(--e-stroke-edge));
     line-height: 1.5;
     resize: vertical;
 }