maverick-wave 4.13.0 → 4.14.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "maverick-wave",
-  "version": "4.13.0",
+  "version": "4.14.0",
   "config": {
-    "version_short": "4.13"
+    "version_short": "4.14"
   },
   "description": "A lightweight, modern CSS framework for building responsive websites with elegance and speed.",
   "main": "src/js/main.js",

package/src/partials/grid-container.html

@@ -10,37 +10,37 @@
 
 <h3 class="mw-mb-4">Grid with 1 Column</h3>
 <div class="mw-grid-1 mw-mb-6">
-  <div class="mw-card mw-card-simple">Column 1</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 1</div>
 </div>
 
 <h3 class="mw-mb-4">Grid with 2 Columns</h3>
 <div class="mw-grid-2 mw-mb-6">
-  <div class="mw-card mw-card-simple">Column 1</div>
-  <div class="mw-card mw-card-simple">Column 2</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 1</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 2</div>
 </div>
 
 <h3 class="mw-mb-4">Grid with 3 Columns</h3>
 <div class="mw-grid-3 mw-mb-6">
-  <div class="mw-card mw-card-simple">Column 1</div>
-  <div class="mw-card mw-card-simple">Column 2</div>
-  <div class="mw-card mw-card-simple">Column 3</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 1</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 2</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 3</div>
 </div>
 
 <h3 class="mw-mb-4">Grid with 4 Columns</h3>
 <div class="mw-grid-4 mw-mb-6">
-  <div class="mw-card mw-card-simple">Column 1</div>
-  <div class="mw-card mw-card-simple">Column 2</div>
-  <div class="mw-card mw-card-simple">Column 3</div>
-  <div class="mw-card mw-card-simple">Column 4</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 1</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 2</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 3</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 4</div>
 </div>
 
 <h3 class="mw-mb-4">Grid with 5 Columns</h3>
 <div class="mw-grid-5 mw-mb-6">
-  <div class="mw-card mw-card-simple">Column 1</div>
-  <div class="mw-card mw-card-simple">Column 2</div>
-  <div class="mw-card mw-card-simple">Column 3</div>
-  <div class="mw-card mw-card-simple">Column 4</div>
-  <div class="mw-card mw-card-simple">Column 5</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 1</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 2</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 3</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 4</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 5</div>
 </div>
 
 <h3 class="mw-mb-3">Flexible Grid with Column Spans</h3>
@@ -48,9 +48,13 @@
   12-column grid with custom spans: 2 columns + 4 columns + 1 column
 </p>
 <div class="mw-grid-flex mw-mb-6">
-  <div class="mw-col-span-2 mw-card mw-card-simple">Span 2 Columns</div>
-  <div class="mw-col-span-4 mw-card mw-card-simple">Span 4 Columns</div>
-  <div class="mw-col-span-1 mw-card mw-card-simple">1 col</div>
+  <div class="mw-col-span-2 mw-card mw-card-simple mw-corner-plain">
+    Span 2 Columns
+  </div>
+  <div class="mw-col-span-4 mw-card mw-card-simple mw-corner-plain">
+    Span 4 Columns
+  </div>
+  <div class="mw-col-span-1 mw-card mw-card-simple mw-corner-plain">1 col</div>
 </div>
 
 <h3 class="mw-mb-3">Mixed Column Spans</h3>
@@ -58,11 +62,15 @@
   Various column combinations: 3 + 6 + 3 columns
 </p>
 <div class="mw-grid-flex mw-mb-6">
-  <div class="mw-col-span-3 mw-card mw-card-simple">Span 3 Columns</div>
-  <div class="mw-col-span-6 mw-card mw-card-simple">
+  <div class="mw-col-span-3 mw-card mw-card-simple mw-corner-plain">
+    Span 3 Columns
+  </div>
+  <div class="mw-col-span-6 mw-card mw-card-simple mw-corner-plain">
     Span 6 Columns (Main Content)
   </div>
-  <div class="mw-col-span-3 mw-card mw-card-simple">Span 3 Columns</div>
+  <div class="mw-col-span-3 mw-card mw-card-simple mw-corner-plain">
+    Span 3 Columns
+  </div>
 </div>
 
 <h3 class="mw-mb-3">Asymmetric Layout</h3>
@@ -70,8 +78,10 @@
   Sidebar + content layout: 4 + 8 columns
 </p>
 <div class="mw-grid-flex mw-mb-6">
-  <div class="mw-col-span-4 mw-card mw-card-simple">Sidebar (4 cols)</div>
-  <div class="mw-col-span-8 mw-card mw-card-simple">
+  <div class="mw-col-span-4 mw-card mw-card-simple mw-corner-plain">
+    Sidebar (4 cols)
+  </div>
+  <div class="mw-col-span-8 mw-card mw-card-simple mw-corner-plain">
     Main Content Area (8 cols)
   </div>
 </div>
@@ -83,46 +93,54 @@
   dynamic content.
 </p>
 <div class="mw-grid-auto-sm mw-mb-6">
-  <div class="mw-card mw-card-simple">Product Card</div>
-  <div class="mw-card mw-card-simple">Service Card</div>
-  <div class="mw-card mw-card-simple">Team Member</div>
-  <div class="mw-card mw-card-simple">Portfolio Item</div>
-  <div class="mw-card mw-card-simple">Blog Post</div>
-  <div class="mw-card mw-card-simple">Feature</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Product Card</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Service Card</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Team Member</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Portfolio Item</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Blog Post</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Feature</div>
 </div>
 
 <h3 class="mw-mb-4">Grid with 3 Columns - Default Spacing</h3>
 <div class="mw-grid-3 mw-mb-6">
-  <div class="mw-card mw-card-simple">Column 1</div>
-  <div class="mw-card mw-card-simple">Column 2</div>
-  <div class="mw-card mw-card-simple">Column 3</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 1</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 2</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 3</div>
 </div>
 
 <h3 class="mw-mb-4">Grid with 3 Columns - Large Spacing</h3>
 <div class="mw-grid-3-lg mw-mb-6">
-  <div class="mw-card mw-card-simple">Column 1</div>
-  <div class="mw-card mw-card-simple">Column 2</div>
-  <div class="mw-card mw-card-simple">Column 3</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 1</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 2</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Column 3</div>
 </div>
 
 <h3 class="mw-mb-4">Flexible Grid - Default Spacing</h3>
 <div class="mw-grid-flex mw-mb-6">
-  <div class="mw-col-span-4 mw-card mw-card-simple">4 Columns</div>
-  <div class="mw-col-span-8 mw-card mw-card-simple">8 Columns</div>
+  <div class="mw-col-span-4 mw-card mw-card-simple mw-corner-plain">
+    4 Columns
+  </div>
+  <div class="mw-col-span-8 mw-card mw-card-simple mw-corner-plain">
+    8 Columns
+  </div>
 </div>
 
 <h3 class="mw-mb-4">Flexible Grid - Large Spacing</h3>
 <div class="mw-grid-flex-lg mw-mb-6">
-  <div class="mw-col-span-4 mw-card mw-card-simple">4 Columns</div>
-  <div class="mw-col-span-8 mw-card mw-card-simple">8 Columns</div>
+  <div class="mw-col-span-4 mw-card mw-card-simple mw-corner-plain">
+    4 Columns
+  </div>
+  <div class="mw-col-span-8 mw-card mw-card-simple mw-corner-plain">
+    8 Columns
+  </div>
 </div>
 
 <h3 class="mw-mb-4">Auto Grid - Large Spacing</h3>
 <div class="mw-grid-auto-lg mw-mb-6">
-  <div class="mw-card mw-card-simple">Auto 1</div>
-  <div class="mw-card mw-card-simple">Auto 2</div>
-  <div class="mw-card mw-card-simple">Auto 3</div>
-  <div class="mw-card mw-card-simple">Auto 4</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Auto 1</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Auto 2</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Auto 3</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Auto 4</div>
 </div>
 
 <h3 class="mw-mb-4">Grid Stack - Natural Width (Left Aligned)</h3>
@@ -130,7 +148,7 @@
   <button class="mw-btn mw-btn-primary">Small Button</button>
   <button class="mw-btn mw-btn-secondary">Medium Length Button</button>
   <button class="mw-btn mw-btn-outline">Very Long Button Text Here</button>
-  <div class="mw-card mw-card-simple" style="width: 200px">
+  <div class="mw-card mw-card-simple mw-corner-plain" style="width: 200px">
     Fixed Width Card
   </div>
 </div>
@@ -140,7 +158,7 @@
   <button class="mw-btn mw-btn-primary">Small Button</button>
   <button class="mw-btn mw-btn-secondary">Medium Length Button</button>
   <button class="mw-btn mw-btn-outline">Very Long Button Text Here</button>
-  <div class="mw-card mw-card-simple" style="width: 200px">
+  <div class="mw-card mw-card-simple mw-corner-plain" style="width: 200px">
     Fixed Width Card
   </div>
 </div>
@@ -150,7 +168,7 @@
   <button class="mw-btn mw-btn-primary">Small Button</button>
   <button class="mw-btn mw-btn-secondary">Medium Length Button</button>
   <button class="mw-btn mw-btn-outline">Very Long Button Text Here</button>
-  <div class="mw-card mw-card-simple" style="width: 200px">
+  <div class="mw-card mw-card-simple mw-corner-plain" style="width: 200px">
     Fixed Width Card
   </div>
 </div>
@@ -160,12 +178,14 @@
   <button class="mw-btn mw-btn-primary">Small Button</button>
   <button class="mw-btn mw-btn-secondary">Medium Length Button</button>
   <button class="mw-btn mw-btn-outline">Very Long Button Text Here</button>
-  <div class="mw-card mw-card-simple">Full Width Card</div>
+  <div class="mw-card mw-card-simple mw-corner-plain">Full Width Card</div>
 </div>
 
 <h3 class="mw-mb-4">Grid Stack - Large Spacing & Centered</h3>
 <div class="mw-grid-stack-center-lg mw-mb-6">
   <button class="mw-btn mw-btn-primary">Button 1</button>
   <button class="mw-btn mw-btn-secondary">Button 2</button>
-  <div class="mw-card mw-card-simple" style="width: 300px">Centered Card</div>
+  <div class="mw-card mw-card-simple mw-corner-plain" style="width: 300px">
+    Centered Card
+  </div>
 </div>

package/src/partials/utilities-container.html

@@ -26,12 +26,17 @@
     </p>
 
     <div class="mw-card mw-card-simple mw-mb-4">
-      <div class="mw-card mw-card-simple mw-mx-auto" style="width: 60%">
+      <div
+        class="mw-card mw-card-simple mw-corner-plain mw-mx-auto"
+        style="width: 60%"
+      >
         mw-mx-auto
       </div>
     </div>
 
-    <div class="mw-card mw-card-simple mw-d-flex mw-items-center mw-gap-3">
+    <div
+      class="mw-card mw-card-simple mw-corner-plain mw-d-flex mw-items-center mw-gap-3"
+    >
       <span>Left</span>
       <span class="mw-tag mw-tag-primary mw-ml-auto">mw-ml-auto</span>
     </div>
@@ -43,18 +48,18 @@
     <div class="mw-card mw-card-simple mw-mb-4">
       <h4 class="mw-mb-2">Flex Row</h4>
       <div class="mw-d-flex mw-justify-between mw-gap-3">
-        <div class="mw-card mw-card-simple mw-p-2">Item 1</div>
-        <div class="mw-card mw-card-simple mw-p-2">Item 2</div>
-        <div class="mw-card mw-card-simple mw-p-2">Item 3</div>
+        <div class="mw-card mw-card-simple mw-p-2 mw-corner-plain">Item 1</div>
+        <div class="mw-card mw-card-simple mw-p-2 mw-corner-plain">Item 2</div>
+        <div class="mw-card mw-card-simple mw-p-2 mw-corner-plain">Item 3</div>
       </div>
     </div>
 
     <div class="mw-card mw-card-simple mw-mb-4">
       <h4 class="mw-mb-2">Flex Column</h4>
       <div class="mw-d-flex mw-flex-column mw-gap-3">
-        <div class="mw-card mw-card-simple mw-p-2">Item 1</div>
-        <div class="mw-card mw-card-simple mw-p-2">Item 2</div>
-        <div class="mw-card mw-card-simple mw-p-2">Item 3</div>
+        <div class="mw-card mw-card-simple mw-p-2 mw-corner-plain">Item 1</div>
+        <div class="mw-card mw-card-simple mw-p-2 mw-corner-plain">Item 2</div>
+        <div class="mw-card mw-card-simple mw-p-2 mw-corner-plain">Item 3</div>
       </div>
     </div>
 
@@ -64,8 +69,12 @@
         class="mw-d-flex mw-justify-center mw-items-center mw-gap-3"
         style="height: 90px"
       >
-        <div class="mw-card mw-card-simple mw-p-2">Centered</div>
-        <div class="mw-card mw-card-simple mw-p-2">Centered</div>
+        <div class="mw-card mw-card-simple mw-p-2 mw-corner-plain">
+          Centered
+        </div>
+        <div class="mw-card mw-card-simple mw-p-2 mw-corner-plain">
+          Centered
+        </div>
       </div>
     </div>
 
@@ -76,10 +85,20 @@
         <code>mw-self-*</code> lets a single child break out of it.
       </p>
       <div class="mw-d-flex mw-items-stretch mw-gap-3" style="height: 130px">
-        <div class="mw-card mw-card-simple mw-p-2">stretch</div>
-        <div class="mw-card mw-card-simple mw-p-2 mw-self-start">start</div>
-        <div class="mw-card mw-card-simple mw-p-2 mw-self-center">center</div>
-        <div class="mw-card mw-card-simple mw-p-2 mw-self-end">end</div>
+        <div class="mw-card mw-card-simple mw-p-2 mw-corner-plain">stretch</div>
+        <div
+          class="mw-card mw-card-simple mw-p-2 mw-self-start mw-corner-plain"
+        >
+          start
+        </div>
+        <div
+          class="mw-card mw-card-simple mw-p-2 mw-self-center mw-corner-plain"
+        >
+          center
+        </div>
+        <div class="mw-card mw-card-simple mw-p-2 mw-self-end mw-corner-plain">
+          end
+        </div>
       </div>
     </div>
   </div>
@@ -92,30 +111,30 @@
       <div class="mw-mb-4">
         <p class="mw-mb-2">Small gap (gap-2)</p>
         <div class="mw-d-flex mw-gap-2 mw-flex-wrap">
-          <div class="mw-card mw-card-simple">Item</div>
-          <div class="mw-card mw-card-simple">Item</div>
-          <div class="mw-card mw-card-simple">Item</div>
-          <div class="mw-card mw-card-simple">Item</div>
+          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
+          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
+          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
+          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
         </div>
       </div>
 
       <div class="mw-mb-4">
         <p class="mw-mb-2">Medium gap (gap-4)</p>
         <div class="mw-d-flex mw-gap-4 mw-flex-wrap">
-          <div class="mw-card mw-card-simple">Item</div>
-          <div class="mw-card mw-card-simple">Item</div>
-          <div class="mw-card mw-card-simple">Item</div>
-          <div class="mw-card mw-card-simple">Item</div>
+          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
+          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
+          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
+          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
         </div>
       </div>
 
       <div>
         <p class="mw-mb-2">Large gap (gap-7)</p>
         <div class="mw-d-flex mw-gap-7 mw-flex-wrap">
-          <div class="mw-card mw-card-simple">Item</div>
-          <div class="mw-card mw-card-simple">Item</div>
-          <div class="mw-card mw-card-simple">Item</div>
-          <div class="mw-card mw-card-simple">Item</div>
+          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
+          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
+          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
+          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
         </div>
       </div>
     </div>

package/src/scss/abstracts/_mixins.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use 'variables' as v;
+@use 'functions' as *;
 
 // Media query mixins
 @mixin media-up($breakpoint) {
@@ -270,3 +271,72 @@
     text-decoration: underline;
   }
 }
+
+// ---------------------------------------------------------------------------
+// Surface
+//
+// The MaverickWave silhouette: sharp corners on the top-left/bottom-right
+// diagonal, round ones on the other. Nine components repeated those four radii
+// by hand - this is the only place the shape is defined now.
+//
+// On top of the radii, an accent arc on the two round corners. The asymmetry
+// alone reads as an accident; a coloured bow sitting exactly on it does not.
+// Point-symmetric like the radii themselves, so it holds up on a tall card, a
+// wide panel and a square tile alike.
+//
+// The ring is drawn inside the padding box rather than on the border, because
+// four of the callers clip with `overflow: hidden` and would swallow a ring
+// sitting on the border edge. Hence $border-width: `inset: 0` already lands on
+// the padding box, but the corner radius there is the outer one minus the
+// border, and a ring drawn at the outer radius would visibly miss the curve.
+//
+// $corners drops the top arc for a surface whose top-right corner is already
+// taken by a fill of its own - see the coloured panel headers.
+// ---------------------------------------------------------------------------
+@mixin surface($border-width: 1px, $corners: 'both') {
+  position: relative;
+  border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
+
+  &::after {
+    @include corner-accent($border-width, $corners);
+  }
+}
+
+// The arc on its own, for a variant that has to redraw it without restating the
+// shape - it is already on the element by then.
+@mixin corner-accent($border-width: 1px, $corners: 'both') {
+  $sharp: radius('sm') - $border-width;
+  $round: radius('xl') - $border-width;
+  // Opaque out to where the curve ends, fading from there - so the arc runs a
+  // little way into the straight edge instead of being cut off at the tangent.
+  //
+  // The 1.8 is the one number worth retuning here, and it is bounded by the
+  // shortest surface rather than by the nicest-looking card: the fade reaches
+  // from a corner, so on a 50px-high box - `mw-card-simple` with one line in it
+  // - anything past about 2 lets the two arcs meet in the middle and the pair
+  // stops reading as two corners and starts reading as a frame. Higher is
+  // softer on a tall card, lower is more defined on a short one.
+  $reach: $round * 1.8;
+  $top: radial-gradient(circle $reach at 100% 0, #000 $round, transparent 100%);
+  $bottom: radial-gradient(
+    circle $reach at 0 100%,
+    #000 $round,
+    transparent 100%
+  );
+
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  // 2px rather than 1px: in the dark theme --mw-border sits at OKLch lightness
+  // 0.32 and the arc tone at 0.41, so a hairline is separated from the plain
+  // border by little more than its saturation and vanishes at reading distance.
+  border: 2px solid var(--mw-corner-accent);
+  border-radius: $sharp $round $sharp $round;
+
+  @if $corners == 'bottom' {
+    mask-image: $bottom;
+  } @else {
+    mask-image: $top, $bottom;
+  }
+}

package/src/scss/abstracts/_variables.scss

@@ -505,6 +505,9 @@ $dark-theme-colors: (
   // Translucent accent line used for dividers, rules and outlines. Built from
   // the ink tone, not the fill tone, or the line disappears into the page.
   'border-accent': fade('dark-primary-text-color', 70%),
+  // The accent arc on the two round corners of every mw-surface. Full strength
+  // here: against a dark card the ink tone is the faintest it gets.
+  'corner-accent': token('dark-primary-text-color'),
 );
 
 // Light theme colors. Emitted as --mw-light-<key>.
@@ -537,6 +540,10 @@ $light-theme-colors: (
   'danger-text-color': ink-on-light('danger-color'),
   'info-text-color': ink-on-light('info-color'),
   'border-accent': fade('light-primary-text-color', 70%),
+  // Held back a little against the dark theme: the same blue on a near-white
+  // card carries far more contrast than it does on a dark one, and at full
+  // strength the arc stops being a detail and starts being a frame.
+  'corner-accent': fade('light-primary-text-color', 80%),
 );
 
 // Header/navbar colors. The bar is dark in both themes, so every tone here is

package/src/scss/components/_accordions.scss

@@ -2,7 +2,7 @@
 
 .mw-accordion {
   border: 1px solid var(--mw-border);
-  border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
+  @include surface;
   overflow: hidden;
   margin: spacing('2');
 

package/src/scss/components/_calendar.scss

@@ -24,7 +24,7 @@ $_mw-calendar-dot-tones: (
   padding: spacing('5');
   background: var(--mw-card-background);
   border: 1px solid var(--mw-border);
-  border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
+  @include surface;
   box-shadow: var(--mw-elevation-2);
 }
 

package/src/scss/components/_cards.scss

@@ -47,11 +47,10 @@ $_mw-card-addon-colors: (
   display: flex;
   flex-direction: column;
   background: var(--mw-card-background);
-  border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
+  @include surface;
   box-shadow: var(--mw-elevation-2);
   border: 1px solid var(--mw-border);
   transition: var(--mw-transition);
-  position: relative;
   // deliberately not `overflow: hidden` - that would also cut off anything a
   // child wants to show outside the card, a tooltip above a button being the
   // common case. Images round their own corners below, and only the ribbon

package/src/scss/components/_kanban.scss

@@ -288,7 +288,7 @@ $_mw-kanban-ribbon-clearance-compact: 58px;
   background: var(--mw-card-background);
   border: 1px dashed var(--mw-primary-text-color);
   // Same silhouette as a ticket, so it reads as one being written
-  border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
+  @include surface;
 
   &.mw-active {
     display: flex;

package/src/scss/components/_modals.scss

@@ -27,7 +27,7 @@
 // Modal container
 .mw-modal {
   background: var(--mw-card-background);
-  border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
+  @include surface(0);
   box-shadow: var(--mw-elevation-5);
   max-width: 520px;
   width: 100%;

package/src/scss/components/_pagination.scss

@@ -7,7 +7,7 @@
   padding: spacing('5');
   background: var(--mw-card-background);
   border: 1px solid var(--mw-border);
-  border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
+  @include surface;
   box-shadow: var(--mw-elevation-2);
 }
 

package/src/scss/components/_panels.scss

@@ -2,7 +2,7 @@
 
 .mw-panel {
   background: var(--mw-card-background);
-  border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
+  @include surface(2px);
   border: 2px solid var(--mw-border);
   overflow: hidden;
   display: flex;
@@ -62,6 +62,15 @@
     }
   }
 
+  // The coloured header already owns the top-right corner. An arc drawn over it
+  // either disappears into the primary fill or fights the secondary one - a
+  // blue bow on an orange header reads as a rendering fault, not as a mark. The
+  // bottom corner carries it alone on these two.
+  &-primary::after,
+  &-secondary::after {
+    @include corner-accent(2px, 'bottom');
+  }
+
   // Scrollable variant for fixed height
   &-scrollable {
     max-height: 500px;

package/src/scss/components/_tiles.scss

@@ -62,12 +62,11 @@
 // Base tile
 .mw-tile {
   background: var(--mw-card-background);
-  border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
+  @include surface;
   padding: spacing('5');
   box-shadow: var(--mw-elevation-2);
   transition: var(--mw-transition);
   border: 1px solid var(--mw-border);
-  position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;

package/src/scss/form-elements/_login.scss

@@ -2,11 +2,10 @@
 
 .mw-login {
   background: var(--mw-card-background);
-  border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
+  @include surface;
   box-shadow: var(--mw-elevation-2);
   transition: var(--mw-transition);
   border: 1px solid var(--mw-border);
-  position: relative;
   overflow: hidden;
   width: min(340px, 85%);
   margin: spacing('2') auto;

package/src/scss/utilities/_corner.scss

@@ -0,0 +1,8 @@
+@use '../abstracts' as *;
+
+// Opt-out from the corner accent - the arc on the two round corners that every
+// surface in the framework carries, see the surface() mixin. Everything else
+// stays: the radii, the border, the shadow, the hover.
+.mw-corner-plain::after {
+  content: none;
+}

package/src/scss/utilities/_index.scss

@@ -1,5 +1,6 @@
 @forward 'accessibility';
 @forward 'aspect';
+@forward 'corner';
 @forward 'display';
 @forward 'elevation';
 @forward 'flex';