maverick-wave 4.3.0 → 4.4.0

package/scripts/verify.js

@@ -52,7 +52,7 @@ const css = read(CSS);
 const html = read(HTML);
 if (!css || !html) {
   console.error(
-    'dist/ is missing or incomplete — run `npm run build` before `npm run verify`.'
+    'dist/ is missing or incomplete - run `npm run build` before `npm run verify`.'
   );
   process.exit(1);
 }
@@ -76,7 +76,7 @@ for (const t of [...tokensUsed].sort()) {
 for (const t of [...tokensDefined].sort()) {
   if (!tokensUsed.has(t) && !TOKEN_ALLOWLIST.has(t)) {
     errors.push(
-      `token defined but never used: ${t} — overriding it would do nothing`
+      `token defined but never used: ${t} - overriding it would do nothing`
     );
   }
 }
@@ -86,7 +86,7 @@ for (const t of [...tokensDefined].sort()) {
 const classesInCss = new Set(all(css, /\.(mw-[a-z0-9-]+)/g));
 
 // Classes the JS adds at runtime, or queries as a hook, count as legitimate
-// targets — including selector strings like '.mw-foo' and '[class~="mw-foo"]'
+// targets - including selector strings like '.mw-foo' and '[class~="mw-foo"]'
 const classesInJs = new Set(all(js, /\.?(mw-[a-z0-9-]+)/g));
 
 const classesInMarkup = new Map(); // class -> where it was seen
@@ -99,7 +99,7 @@ for (const attr of html.matchAll(/class\s*=\s*"([^"]*)"/g)) {
 }
 // The docs name classes as `mw-foo` in prose and code fences. A trailing hyphen
 // means a family was written as a stem (`mw-btn-mini-` + variants), never a real
-// class — skip those instead of reporting them as missing.
+// class - skip those instead of reporting them as missing.
 for (const c of all(docs, /[`."'\s](mw-[a-z0-9-]+)/g)) {
   if (c.endsWith('-')) continue;
   if (!classesInMarkup.has(c)) classesInMarkup.set(c, 'docs');
@@ -130,7 +130,7 @@ for (const w of warnings) console.log(`  warn   ${w}`);
 for (const e of errors) console.error(`  ERROR  ${e}`);
 
 console.log(
-  `\nverify: ${tokensDefined.size} tokens, ${classesInCss.size} classes checked — ` +
+  `\nverify: ${tokensDefined.size} tokens, ${classesInCss.size} classes checked - ` +
     (errors.length ? `${label(errors.length, 'error')}` : 'clean')
 );
 

package/src/js/main.js

@@ -140,7 +140,7 @@
   function initGalleries() {
     document.querySelectorAll('.mw-gallery').forEach((gallery) => {
       // Dots and caption sit next to .mw-gallery, not inside it, so the
-      // container is the scope — with the parent as a fallback, otherwise a
+      // container is the scope - with the parent as a fallback, otherwise a
       // markup without the wrapper would silently stay dead
       const scope =
         gallery.closest('.mw-gallery-container') || gallery.parentElement;
@@ -154,7 +154,7 @@
 
     const slides = track.children;
 
-    // Everything below the track is optional — a gallery may well ship
+    // Everything below the track is optional - a gallery may well ship
     // without arrows, dots or a caption, and a missing one must not throw
     const dotsBox = container.querySelector('.mw-gallery-dots');
     const descBox = container.querySelector('.mw-gallery-desc');
@@ -167,7 +167,7 @@
       const total = slides.length;
       current = (index + total) % total;
 
-      // Percentages refer to the track's own width, which is one slide —
+      // Percentages refer to the track's own width, which is one slide -
       // so no measuring and nothing to recalculate on resize
       track.style.transform = `translateX(-${current * 100}%)`;
 

package/src/partials/accordions-container.html

@@ -40,7 +40,7 @@
         </p>
         <pre class="mw-code-block"><code>/* Your custom-styles.css */
   :root {
-    /* Root colors — hover tones, translucent backgrounds and borders
+    /* Root colors - hover tones, translucent backgrounds and borders
        are derived from them at runtime via color-mix() */
     --mw-primary-color: #e94560;
     --mw-secondary-color: #f39c12;
@@ -60,7 +60,7 @@
         <p>
           If you integrate MaverickWave's SCSS source files into your project,
           pass your overrides through <code>@use ... with (...)</code>. A plain
-          assignment before the <code>@use</code> has no effect &mdash; the root
+          assignment before the <code>@use</code> has no effect - the root
           colors are declared with <code>!default</code>, which only the
           configuration reaches.
         </p>
@@ -73,7 +73,7 @@
         <p>
           This method requires you to have a Sass compiler set up in your
           project. Single components can be imported instead of
-          <code>main</code> &mdash; see the "Get Started" section.
+          <code>main</code> - see the "Get Started" section.
         </p>
         <p class="mw-mt-4">
           <button

package/src/partials/blog-posts-container.html

@@ -55,7 +55,7 @@
     <blockquote>
       "AI hasn't replaced developers; it has elevated them. We now spend more
       time on architecture and problem-solving rather than writing boilerplate
-      code." — Elena Vega, Lead Developer at TechFront
+      code." - Elena Vega, Lead Developer at TechFront
     </blockquote>
 
     <h3>Serverless Architecture: Beyond the Basics</h3>

package/src/partials/buttons-container.html

@@ -143,7 +143,7 @@
     <button type="button" class="mw-btn-plain mw-text-bold">14:30</button>
     on
     <button type="button" class="mw-btn-plain mw-text-bold">19.09.2026</button>
-    &ndash; both are real buttons, reachable by tab.
+    - both are real buttons, reachable by tab.
   </p>
   <div class="mw-d-flex mw-gap-4 mw-flex-wrap">
     <button type="button" class="mw-btn mw-btn-link">mw-btn-link</button>

package/src/partials/colors-container.html

@@ -3,10 +3,10 @@
 <!-- the hex code string is getting updated via javascript! -->
 
 <p class="mw-text-muted mw-mb-6">
-  These twelve are the only colors you ever set. Everything else &mdash; hover
-  tones, translucent backgrounds, borders, muted text &mdash; is derived from
-  them at runtime with <code>color-mix()</code>, so overriding a root token
-  cascades to all of its variants.
+  These twelve are the only colors you ever set. Everything else - hover tones,
+  translucent backgrounds, borders, muted text - is derived from them at runtime
+  with <code>color-mix()</code>, so overriding a root token cascades to all of
+  its variants.
 </p>
 
 <div class="mw-grid-auto-sm">

package/src/partials/footer-container.html

@@ -91,9 +91,9 @@
   MaverickWave is a lightweight, modern CSS framework for building responsive
   websites with elegance and speed. It embodies the spirit of innovation and
   fluidity, just like a maverick wave that charts its own course across the
-  ocean. The framework was named to reflect its bold approach to web
-  design—breaking free from conventional constraints while maintaining a natural
-  flow that adapts seamlessly to any environment. Like the powerful yet graceful
+  ocean. The framework was named to reflect its bold approach to web design -
+  breaking free from conventional constraints while maintaining a natural flow
+  that adapts seamlessly to any environment. Like the powerful yet graceful
   movement of waves, MaverickWave combines strength and flexibility, empowering
   developers to create distinctive digital experiences that stand out in the
   vast sea of the web.

package/src/partials/form-elements-container.html

@@ -433,6 +433,104 @@
     </div>
   </div>
 
+  <div class="mw-card mw-card-simple">
+    <h3 class="mw-card-title">Prefilled Values</h3>
+    <p class="mw-text-muted mw-text-sm mw-mt-3">
+      Add <code>mw-prefilled</code> to any control whose value was not typed in
+      this session - loaded from an existing record, restored from a draft,
+      filled with a default. The corner triangle scales with the control size
+      and stays visible on readonly and disabled controls. It is decoration
+      only, so repeat the information in a <code>mw-field-hint</code> for screen
+      readers.
+    </p>
+    <div class="mw-grid-4 mw-mt-4">
+      <!-- Small -->
+      <label for="prefilled-input-sm">
+        <span>Small</span>
+        <input
+          id="prefilled-input-sm"
+          type="text"
+          class="mw-input mw-input-sm mw-prefilled"
+          value="Max Mustermann"
+        />
+      </label>
+      <!-- Default -->
+      <label for="prefilled-input">
+        <span>Default</span>
+        <input
+          id="prefilled-input"
+          type="text"
+          class="mw-input mw-prefilled"
+          value="Max Mustermann"
+        />
+      </label>
+      <!-- Large -->
+      <label for="prefilled-input-lg">
+        <span>Large</span>
+        <input
+          id="prefilled-input-lg"
+          type="text"
+          class="mw-input mw-input-lg mw-prefilled"
+          value="Max Mustermann"
+        />
+      </label>
+      <!-- Readonly -->
+      <label for="prefilled-input-readonly">
+        <span>Readonly</span>
+        <input
+          id="prefilled-input-readonly"
+          type="text"
+          class="mw-input mw-prefilled"
+          readonly
+          value="USR-00042"
+        />
+      </label>
+    </div>
+    <div class="mw-grid-4 mw-mt-4">
+      <!-- Select small -->
+      <label for="prefilled-select-sm">
+        <span>Select small</span>
+        <select
+          id="prefilled-select-sm"
+          class="mw-select mw-select-sm mw-prefilled"
+        >
+          <option selected>Germany</option>
+          <option>Austria</option>
+        </select>
+      </label>
+      <!-- Select default -->
+      <label for="prefilled-select">
+        <span>Select default</span>
+        <select id="prefilled-select" class="mw-select mw-prefilled">
+          <option selected>Germany</option>
+          <option>Austria</option>
+        </select>
+      </label>
+      <!-- Select large -->
+      <label for="prefilled-select-lg">
+        <span>Select large</span>
+        <select
+          id="prefilled-select-lg"
+          class="mw-select mw-select-lg mw-prefilled"
+        >
+          <option selected>Germany</option>
+          <option>Austria</option>
+        </select>
+      </label>
+      <!-- Textarea -->
+      <label for="prefilled-textarea">
+        <span>Textarea</span>
+        <textarea
+          id="prefilled-textarea"
+          class="mw-textarea mw-prefilled"
+          rows="3"
+        >
+Imported from the previous application.</textarea
+        >
+      </label>
+    </div>
+  </div>
+
   <div class="mw-card mw-card-simple">
     <h3 class="mw-card-title">Toggle Switch</h3>
     <div class="mw-grid-4-lg mw-mt-4">

package/src/partials/form-field-container.html

@@ -7,7 +7,7 @@
     <div class="mw-card mw-card-simple">
       <p class="mw-text-muted mw-text-sm mw-mb-4">
         The <code>mw-field</code> wrapper groups label, input, hint, and error
-        message as a single unit — the recommended pattern for Angular reactive
+        message as a single unit - the recommended pattern for Angular reactive
         forms.
       </p>
 
@@ -80,9 +80,9 @@
         The error look is not automatic: bind
         <code>mw-field-has-error</code> to the control state (in Angular
         <code>[class.mw-field-has-error]="c.invalid &amp;&amp; c.touched"</code
-        >). A control without a field wrapper &mdash; also a
+        >). A control without a field wrapper - also a
         <code>mw-checkbox-group</code>, <code>mw-radio-group</code> or
-        <code>mw-slider-container</code> &mdash; takes
+        <code>mw-slider-container</code> - takes
         <code>mw-form-element-error</code> instead.
       </p>
 
@@ -133,13 +133,29 @@
       </div>
 
       <!-- Disabled -->
-      <div class="mw-field">
+      <div class="mw-field mw-mb-4">
         <label class="mw-field-label" for="ff-plan">Plan (disabled)</label>
         <select id="ff-plan" class="mw-select" disabled>
           <option>Enterprise</option>
         </select>
         <span class="mw-field-hint">Contact support to change your plan.</span>
       </div>
+
+      <!-- Prefilled -->
+      <div class="mw-field">
+        <label class="mw-field-label" for="ff-company">Company</label>
+        <input
+          id="ff-company"
+          type="text"
+          class="mw-input mw-prefilled"
+          value="ACME GmbH"
+          aria-describedby="ff-company-hint"
+        />
+        <span class="mw-field-hint" id="ff-company-hint"
+          >Prefilled from your account - marked with
+          <code>mw-prefilled</code>.</span
+        >
+      </div>
     </div>
   </div>
 </div>

package/src/partials/get-started-container.html

@@ -98,7 +98,7 @@
         <p>
           MaverickWave uses <code>@use</code> / <code>@forward</code> (modern
           Sass module syntax). Pass your overrides through
-          <code>@use ... with (...)</code> &mdash; a plain assignment before the
+          <code>@use ... with (...)</code> - a plain assignment before the
           <code>@use</code> has no effect, because the root colors are declared
           with <code>!default</code>.
         </p>
@@ -107,11 +107,11 @@
         <p>Set <code>$mw-theme-mode</code> to control theme behavior:</p>
         <ul>
           <li>
-            <code>'switchable'</code> (default) — dark base, toggleable to light
+            <code>'switchable'</code> (default) - dark base, toggleable to light
             via <code>.mw-theme-light</code> on <code>&lt;body&gt;</code>
           </li>
-          <li><code>'dark'</code> — compile dark theme only</li>
-          <li><code>'light'</code> — compile light theme only</li>
+          <li><code>'dark'</code> - compile dark theme only</li>
+          <li><code>'light'</code> - compile light theme only</li>
         </ul>
         <p class="mw-text-warning">
           <i class="fas fa-exclamation-triangle mw-mr-1"></i>
@@ -119,14 +119,14 @@
           dark appearance regardless of theme mode.
         </p>
 
-        <h5 class="mw-mt-4">Example — your main SCSS file</h5>
+        <h5 class="mw-mt-4">Example - your main SCSS file</h5>
         <pre class="mw-code-block"><code>// styles.scss
 
 @use 'path/to/maverick-wave/src/scss/main' with (
   // Theme mode (optional, default is 'switchable')
   $mw-theme-mode: 'switchable',
 
-  // Root colors — everything else is derived from them at runtime
+  // Root colors - everything else is derived from them at runtime
   $primary-color: #e94560,
   $secondary-color: #f39c12,
   $dark-background: #1f1f2e,
@@ -152,12 +152,12 @@ body {
         </p>
         <pre
           class="mw-code-block"
-        ><code>// styles.scss — the configuration has to come first
+        ><code>// styles.scss - the configuration has to come first
 @use 'maverick-wave/src/scss/abstracts/variables' with (
   $primary-color: #0f766e
 );
 
-@use 'maverick-wave/src/scss/base'; // required — carries the :root tokens
+@use 'maverick-wave/src/scss/base'; // required - carries the :root tokens
 @use 'maverick-wave/src/scss/layout/grid';
 @use 'maverick-wave/src/scss/layout/page-header';
 @use 'maverick-wave/src/scss/components/buttons';
@@ -169,7 +169,7 @@ body {
 @use 'maverick-wave/src/scss/utilities';</code></pre>
         <p class="mw-text-warning">
           <i class="fas fa-exclamation-triangle mw-mr-1"></i>
-          Without <code>base</code> every component renders without colors — it
+          Without <code>base</code> every component renders without colors - it
           carries the <code>:root</code> custom properties. A subset like the
           one above compiles to roughly 98 kB raw / 15 kB gzipped, against 147
           kB / 22.5 kB for the full build.
@@ -195,9 +195,9 @@ body {
           <i class="fas fa-exclamation-triangle mw-mr-1"></i>
           <strong>No <code>"scripts"</code> entry for the JS file.</strong>
           <code>maverick-wave.min.js</code> wires everything up once on
-          <code>DOMContentLoaded</code> and writes straight into the DOM &mdash;
-          in a SPA everything rendered afterwards stays uninitialized, and the
-          class toggles happen behind change detection. Rebuild the behaviors in
+          <code>DOMContentLoaded</code> and writes straight into the DOM - in a
+          SPA everything rendered afterwards stays uninitialized, and the class
+          toggles happen behind change detection. Rebuild the behaviors in
           components; the state classes (<code>active</code>, <code>open</code>,
           <code>mw-modal-open</code>, <code>mw-selected</code>) are the whole
           contract.
@@ -235,8 +235,8 @@ constructor() {
         <h5 class="mw-mt-4">Reactive Forms</h5>
         <p>
           The <code>mw-field</code> wrapper groups label, control, hint and
-          error. Bind the error state yourself &mdash; the framework does not
-          style Angular's <code>ng-invalid</code> / <code>ng-touched</code>
+          error. Bind the error state yourself - the framework does not style
+          Angular's <code>ng-invalid</code> / <code>ng-touched</code>
           classes:
         </p>
         <pre
@@ -263,10 +263,10 @@ constructor() {
 import './assets/maverick-wave.min.css';</code></pre>
         <p class="mw-text-warning">
           <i class="fas fa-exclamation-triangle mw-mr-1"></i>
-          Do not import <code>maverick-wave.min.js</code> in a SPA &mdash; it
-          binds once on <code>DOMContentLoaded</code> and never sees anything
-          rendered later. Accordion, tabs, modal and theme toggle are class
-          toggles; bind them with <code>className</code> from state.
+          Do not import <code>maverick-wave.min.js</code> in a SPA - it binds
+          once on <code>DOMContentLoaded</code> and never sees anything rendered
+          later. Accordion, tabs, modal and theme toggle are class toggles; bind
+          them with <code>className</code> from state.
         </p>
         <p>Example usage in a React component:</p>
         <pre class="mw-code-block"><code>function App() {
@@ -321,7 +321,7 @@ import './assets/maverick-wave.min.css';</code></pre>
   </p>
   <pre
     class="mw-code-block"
-  ><code>/* your-custom-styles.css — load AFTER maverick-wave.min.css */
+  ><code>/* your-custom-styles.css - load AFTER maverick-wave.min.css */
 :root {
   --mw-font-family-base: 'Your Custom Font', system-ui, sans-serif;
   --mw-font-family-heading: 'Your Custom Font', system-ui, sans-serif;

package/src/partials/header-utilities-container.html

@@ -85,7 +85,7 @@
     Shows who is signed in: an avatar with initials plus the name. Below
     <code>md</code> the name steps aside and only the round avatar remains, so
     it keeps the same height as the login and burger buttons. Works outside a
-    header too &mdash; in a panel header or a toolbar.
+    header too - in a panel header or a toolbar.
   </p>
   <!-- Fake header -->
   <div class="mw-mb-4" style="position: relative; overflow: hidden">

package/src/partials/modals-container.html

@@ -67,7 +67,7 @@
     </div>
     <div class="mw-modal-body">
       <p class="mw-text-muted">
-        Max-width <strong>520px</strong>. The default size — fits most use
+        Max-width <strong>520px</strong>. The default size - fits most use
         cases.
       </p>
     </div>

package/src/partials/ratings-container.html

@@ -1,6 +1,6 @@
 <h3 class="mw-section-subtitle">Ratings</h3>
 <p class="mw-text-muted">
-  Change the <code>data-rating</code> attribute (0–5) to see how many thumbs-up
+  Change the <code>data-rating</code> attribute (0-5) to see how many thumbs-up
   light up. You can also determine the icon flexibly.
 </p>
 

package/src/partials/segmented-container.html

@@ -44,7 +44,7 @@
       </div>
 
       <label class="mw-field-label mw-d-block mw-mb-2">
-        Secondary tone &ndash; <code>mw-segmented-secondary</code>
+        Secondary tone - <code>mw-segmented-secondary</code>
       </label>
       <div class="mw-segmented mw-segmented-secondary mw-mb-6">
         <button type="button" class="mw-segmented-item mw-active">List</button>
@@ -52,7 +52,7 @@
       </div>
 
       <label class="mw-field-label mw-d-block mw-mb-2">
-        Inline &ndash; <code>mw-segmented-auto</code>
+        Inline - <code>mw-segmented-auto</code>
       </label>
       <div class="mw-segmented mw-segmented-auto">
         <button type="button" class="mw-segmented-item mw-active">All</button>

package/src/partials/tables-container.html

@@ -44,9 +44,9 @@
     </table>
     <p class="mw-text-muted mw-mt-3">
       The <strong>Budget</strong> column uses
-      <strong>mw-text-currency</strong> &ndash; right-aligned with tabular,
-      lining digits and no wrapping mid-number. The alignment comes from the
-      right edge, so it works the same for <code>1,204.50</code> and
+      <strong>mw-text-currency</strong> - right-aligned with tabular, lining
+      digits and no wrapping mid-number. The alignment comes from the right
+      edge, so it works the same for <code>1,204.50</code> and
       <code>1.204,50</code>; only the number of decimal places has to be
       consistent per column. If you only want the fixed-width digits without the
       alignment, use <strong>mw-text-numeric</strong>. For the input side there
@@ -102,7 +102,7 @@
       <code>mw-table-responsive-scroll</code> provides. Scroll inside the table
       to see it. Its height comes from
       <code>--mw-table-scroll-height</code> (400px, 260px below <code>sm</code>)
-      &mdash; override it per table with
+      - override it per table with
       <code>style="--mw-table-scroll-height: 250px"</code>.
     </p>
 

package/src/partials/tags-container.html

@@ -196,7 +196,7 @@
     <h3 class="mw-card-title mw-mb-4">Single Tag</h3>
     <div class="mw-card mw-card-simple">
       <p class="mw-text-muted mw-mb-4">
-        For a single status chip &ndash; e.g. in a table cell &ndash; use
+        For a single status chip - e.g. in a table cell - use
         <strong>mw-tag</strong>. It carries the colour itself, so no
         <strong>mw-tags</strong> container is needed.
       </p>

package/src/partials/timelines-container.html

@@ -7,7 +7,7 @@
 <div class="mw-timeline-big mw-my-6">
   <div class="mw-timeline-big-step mw-active">
     <div class="mw-timeline-big-date-container">
-      <div class="mw-timeline-big-date-main">01/2023 – Present</div>
+      <div class="mw-timeline-big-date-main">01/2023 - Present</div>
     </div>
     <div class="mw-timeline-big-content">
       <div class="mw-card">
@@ -29,7 +29,7 @@
       <div class="mw-timeline-big-event">
         <span class="mw-timeline-big-event-date">05/2023</span>
         <span class="mw-timeline-big-event-title">
-          AWS Certified Solutions Architect – Professional
+          AWS Certified Solutions Architect - Professional
         </span>
       </div>
     </div>
@@ -37,7 +37,7 @@
 
   <div class="mw-timeline-big-step">
     <div class="mw-timeline-big-date-container">
-      <div class="mw-timeline-big-date-main">08/2021 – 12/2022</div>
+      <div class="mw-timeline-big-date-main">08/2021 - 12/2022</div>
       <div class="mw-timeline-big-date-sub">(1 year 4 months)</div>
     </div>
     <div class="mw-timeline-big-content">
@@ -74,7 +74,7 @@
 
   <div class="mw-timeline-big-step">
     <div class="mw-timeline-big-date-container">
-      <div class="mw-timeline-big-date-main">06/2020 – 07/2021</div>
+      <div class="mw-timeline-big-date-main">06/2020 - 07/2021</div>
       <div class="mw-timeline-big-date-sub">(1 year 1 month)</div>
     </div>
     <div class="mw-timeline-big-content">
@@ -105,7 +105,7 @@
 
   <div class="mw-timeline-big-step">
     <div class="mw-timeline-big-date-container">
-      <div class="mw-timeline-big-date-main">02/2018 – 05/2020</div>
+      <div class="mw-timeline-big-date-main">02/2018 - 05/2020</div>
       <div class="mw-timeline-big-date-sub">(2 year 3 months)</div>
     </div>
     <div class="mw-timeline-big-content">

package/src/partials/utilities-container.html

@@ -14,7 +14,7 @@
 
     <h4 class="mw-mt-6 mw-mb-2">Auto Margins</h4>
     <p class="mw-text-muted mw-text-sm mw-mb-3">
-      Every margin utility also takes <code>auto</code> &mdash;
+      Every margin utility also takes <code>auto</code> -
       <code>mw-mx-auto</code> centers a block, <code>mw-ml-auto</code> pushes a
       flex item to the far side.
     </p>

package/src/scss/abstracts/_variables.scss

@@ -37,7 +37,7 @@ $accent-text-color: #efefef !default;
 //
 // shade()/tint() mix `in hsl`, which behaves like color.adjust($lightness: ...)
 // and scales proportionally, so a derivation looks the same on every palette.
-// Mixing with black/white also lowers the saturation a little — that is why
+// Mixing with black/white also lowers the saturation a little - that is why
 // hover tones read slightly softer than the base color. Alpha blending uses
 // `srgb` against `transparent`.
 // ---------------------------------------------------------------------------
@@ -86,7 +86,7 @@ $base-colors: (
   'secondary-info-background': fade('secondary-color-hover', 70%),
   // Translucent accent line used for dividers, rules and outlines
   'border-accent': fade('primary-color', 70%),
-  // Text on any solid colored surface — buttons of every variant, table and
+  // Text on any solid colored surface - buttons of every variant, table and
   // panel headers, badges, tooltips, mini close buttons, stepper dots.
   // Deliberately derived from neither a brand color nor a theme text color:
   // it has to stay readable on a dark surface no matter how the palette or the
@@ -276,3 +276,8 @@ $z-index: (
   'tooltip': 700,
   'alert': 900,
 );
+
+// Native select arrow, drawn as a background layer because `appearance: none`
+// removes the OS one. Shared, because any control that adds a second
+// background layer (see `.mw-prefilled`) has to restate the whole list.
+$select-arrow-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23666' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");

package/src/scss/base/_base.scss

@@ -58,7 +58,7 @@ $_active-prefix: 'dark';
   --mw-container-width-sm: calc(100% - #{spacing('5')} * 2);
   --mw-section-padding-block: #{spacing('7')};
 
-  // Active theme — aliases onto the dark or light set above
+  // Active theme - aliases onto the dark or light set above
   @each $name, $value in $_active-theme {
     --mw-#{$name}: var(--mw-#{$_active-prefix}-#{$name});
   }

package/src/scss/components/_avatars.scss

@@ -68,7 +68,7 @@ $_mw-avatar-colors: (
     border-radius: radius('sm');
   }
 
-  // Initials — for users without a picture. Centers its text content and puts
+  // Initials - for users without a picture. Centers its text content and puts
   // the color on the background, so it stays combinable with the color
   // variants below, which keep working on the border.
   &-initials {