@eos-ui/vue 0.5.0 → 0.5.2

package/dist/style.css

@@ -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);
@@ -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);
   }
 
@@ -1458,6 +1457,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);
@@ -1474,13 +1474,14 @@ 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);
   }
 
@@ -1514,6 +1515,7 @@ to {
   .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 +1524,7 @@ to {
   .e-input-wrap .e-input {
     flex: 1;
     outline: 0;
+    border: 0;
     background: transparent;
     box-shadow: none;
     height: auto;
@@ -1817,7 +1820,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 +1828,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 +1902,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 +2195,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 +2520,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 +3745,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 +3774,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 +3899,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 {
@@ -3992,9 +4006,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 {
@@ -4059,21 +4070,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;
@@ -4101,8 +4123,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;
@@ -4166,13 +4188,14 @@ 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);
+    background-clip: padding-box;
+    box-shadow: var(--e-well);
+    transition: border-color var(--e-duration-tap) var(--e-easing-out);
 }
 .e-search:hover {
     background: var(--e-surface-hover);
@@ -4180,7 +4203,7 @@ to {
 .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 {
@@ -4375,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 {
@@ -4404,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: "";
@@ -4599,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);
@@ -4741,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);
@@ -4766,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);
@@ -4891,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;
@@ -4900,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. */
@@ -4938,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;
 }
@@ -4955,14 +4985,14 @@ to {
     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);
+    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. */
@@ -4971,133 +5001,123 @@ to {
     align-items: flex-start;
     gap: var(--e-space-4);
 }
-.e-tabs--vertical .e-tablist {
+.e-tabs--vertical > .e-tablist {
     flex-direction: column;
     flex: none;
     overflow: visible;
 }
-.e-tabs--vertical .e-tab {
+.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-tab:first-child {
+.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-tab:last-child {
+.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-tab + .e-tab {
+.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-tab[aria-selected="true"] {
+.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 {
+.e-tabs--vertical > .e-tabpanel {
     flex: 1 1 0;
     min-width: 0;
     padding-top: 0;
 }
-:dir(rtl) .e-tabs--vertical .e-tab[aria-selected="true"] {
-    box-shadow:
-      inset 0 0 0 var(--e-stroke-edge) var(--e-bc),
-      inset calc(-1 * var(--e-band)) 0 0 0 var(--e-slab);
-}
 
   /* Framed: tabs and panel are one outlined card. The tab row sits over the panel's edge by one stroke, so a tab's lower edge and the panel's upper edge are the same line; the chosen tab has no edge on that side and its fill covers the panel's, opening into it. Tabs sit flush with their neighbours, square where they meet; only the card's outer corner at the first tab is rounded, and the panel's own corner beside it is square. The row always leaves a corner's width of open edge past the last tab, so the panel's curve never lands against a tab's straight edge. */
-.e-tabs--framed .e-tablist {
+.e-tabs--framed > .e-tablist {
     position: relative;
     z-index: var(--e-z-raised);
     margin-block-end: calc(-1 * var(--e-stroke-edge));
 }
-.e-tabs--framed .e-tab {
+.e-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-tab:first-child {
+.e-tabs--framed > .e-tablist > .e-tab:first-child {
     border-start-start-radius: var(--e-radius-md);
 }
-.e-tabs--framed.e-tabs--fill .e-tab:last-child {
+.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 {
+.e-tabs:not(.e-tabs--fill, .e-tabs--vertical).e-tabs--framed > .e-tablist {
     padding-inline-end: var(--e-radius-md);
 }
-.e-tabs--framed .e-tab:hover {
+.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-tab[aria-selected="true"] {
+.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;
+    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);
+.e-tabs--framed > .e-tabpanel {
+    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 {
+.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 {
+.e-tabs--framed.e-tabs--vertical > .e-tablist {
     align-self: flex-start;
     margin-block-end: var(--e-radius-md);
     margin-inline-end: calc(-1 * var(--e-stroke-edge));
 }
-.e-tabs--framed.e-tabs--vertical .e-tab {
+.e-tabs--framed.e-tabs--vertical > .e-tablist > .e-tab {
     border-radius: 0;
 }
-.e-tabs--framed.e-tabs--vertical .e-tab:first-child {
+.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-tab[aria-selected="true"] {
+.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-tab[aria-selected="true"] {
-    box-shadow:
-      inset 0 var(--e-stroke-edge) 0 0 var(--e-bc),
-      inset 0 calc(-1 * var(--e-stroke-edge)) 0 0 var(--e-bc),
-      inset calc(-1 * var(--e-band)) 0 0 0 var(--e-slab);
-}
-.e-tabs--framed.e-tabs--vertical .e-tab[aria-selected="true"]:first-child {
+    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);
+.e-tabs--framed.e-tabs--vertical > .e-tabpanel {
+    padding: calc(var(--e-space-4) - var(--e-stroke-edge));
 }
 .e-tab-count {
     min-width: var(--e-space-6);
@@ -5151,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;
 }