maverick-wave 4.3.0 → 4.4.1

package/src/partials/colors-container.html

@@ -3,9 +3,11 @@
 <!-- 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
+  These thirteen are the only colors you ever set. Everything else - hover
+  tones, translucent backgrounds, borders, muted text, the card and footer
+  surfaces, the ink variant the dark theme needs - is derived from them at
+  runtime with
+  <code>color-mix()</code> and relative color syntax, so overriding a root token
   cascades to all of its variants.
 </p>
 
@@ -135,4 +137,74 @@
       <p class="mw-text-muted">#000000</p>
     </div>
   </div>
+
+  <div class="mw-card mw-card-simple color-card">
+    <div class="mw-text-center">
+      <div
+        class="color-swatch"
+        style="background: var(--mw-form-elements-background)"
+      ></div>
+      <p>Form Elements</p>
+      <p class="mw-text-muted">#000000</p>
+    </div>
+  </div>
 </div>
+
+<h3 class="mw-section-subtitle">Fill or Ink</h3>
+
+<p class="mw-text-muted mw-mb-6">
+  Every brand and status colour comes in two tokens.
+  <code>--mw-primary-color</code> is the exact colour, for anything it
+  <strong>fills</strong> - buttons, badges, bars - with
+  <code>--mw-accent-text-color</code> on top.
+  <code>--mw-primary-text-color</code> is the same colour as ink
+  <strong>on</strong> a theme surface: text, icons, focus rings, accent borders.
+  A colour picked to carry a label is by definition too dark or too light to be
+  read on the page it sits on. The ink token clamps OKLch lightness - at least
+  0.68 on the dark page, at most 0.55 on the light one - and keeps hue and
+  chroma, so it works for any palette: a dark colour gets lifted, a very light
+  one deepened, and a colour already in range passes through untouched. Toggle
+  the theme and watch the second row.
+</p>
+
+<div class="mw-grid-auto-sm mw-mb-6">
+  <div class="mw-card mw-card-simple">
+    <p class="mw-mb-3"><strong>Fill</strong> - <code>--mw-*-color</code></p>
+    <div class="mw-tags">
+      <span class="mw-tag mw-tag-primary">Primary</span>
+      <span class="mw-tag mw-tag-secondary">Secondary</span>
+    </div>
+    <p class="mw-mt-4">
+      <button class="mw-btn mw-btn-primary">Primary</button>
+      <button class="mw-btn mw-btn-secondary">Secondary</button>
+    </p>
+  </div>
+
+  <div class="mw-card mw-card-simple">
+    <p class="mw-mb-3"><strong>Ink</strong> - <code>--mw-*-text-color</code></p>
+    <p class="mw-text-primary">Primary text, links and icons</p>
+    <p class="mw-text-secondary">Secondary accent</p>
+    <p class="mw-text-success">Success</p>
+    <p class="mw-text-warning">Warning</p>
+    <p class="mw-text-danger">Danger</p>
+    <p class="mw-text-info">Info</p>
+  </div>
+</div>
+
+<p class="mw-text-muted">
+  Tinted surfaces follow one rule as well:
+  <code>--mw-*-background</code> is 20% of the colour,
+  <code>--mw-*-background-hover</code> 45%. Both stay close enough to the
+  surface underneath that <code>--mw-text-color</code> keeps working on top -
+  which is what makes an alert, badge or tag readable in either theme.
+</p>
+
+<p class="mw-text-muted">
+  The surfaces work the same way. Card, footer and border scale the page
+  background's OKLch lightness and chroma by one factor and keep the hue, so a
+  tinted page hands its tint down instead of graying out. A card always steps
+  <strong>away from the text colour</strong> - darker than the page in the dark
+  theme, lighter in the light one - so content sits on the cleaner surface. That
+  is also why the dark page background is not near-black: the surfaces below it
+  need somewhere to go.
+</p>

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

@@ -69,16 +69,18 @@
         <pre class="mw-code-block"><code>/* your-custom-styles.css */
 :root {
   /* Brand colors */
-  --mw-primary-color: #e94560;
-  --mw-secondary-color: #f39c12;
+  --mw-primary-color: #0f766e;
+  --mw-secondary-color: #b45309;
 
-  /* Dark theme overrides */
-  --mw-dark-page-background: #1a1a2e;
-  --mw-dark-card-background: #2a2a4a;
+  /* Text on every solid colored surface. The one token that cannot be
+     derived: a light brand color needs a dark label, a dark one a light
+     label - set it opposite your primary. */
+  --mw-accent-text-color: #f2fafa;
 
-  /* Light theme overrides */
-  --mw-light-page-background: #ffffff;
-  --mw-light-card-background: #f0f0f5;
+  /* Page backgrounds. Card, footer and border are derived from them, so
+     these two are usually all you set. */
+  --mw-dark-page-background: #172127;
+  --mw-light-page-background: #f2f6f7;
 
   /* Font */
   --mw-font-family-base: 'Your Custom Font', sans-serif;
@@ -98,7 +100,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 +109,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,20 +121,21 @@
           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
-  $primary-color: #e94560,
-  $secondary-color: #f39c12,
-  $dark-background: #1f1f2e,
-  $light-background: #f8f9fa,
-  $dark-text-color: #ffffff,
-  $light-text-color: #1c1c1c
+  // Root colors - everything else is derived from them at runtime
+  $primary-color: #0f766e,
+  $secondary-color: #b45309,
+  $accent-text-color: #f2fafa,
+  $dark-background: #172127,
+  $light-background: #f2f6f7,
+  $dark-text-color: #e8eef0,
+  $light-text-color: #172127
 );
 
 // Your additional styles
@@ -152,12 +155,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 +172,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 +198,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 +238,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 +266,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 +324,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/tabs-container.html

@@ -168,8 +168,8 @@ href="path/maverick-wave.min.css"&gt;</code></pre>
         </p>
         <pre class="mw-code-block"><code>/* your-custom-styles.css */
 :root {
-  --mw-primary-color: #e94560; 
-  --mw-dark-page-background: #1a1a2e; 
+  --mw-primary-color: #0f766e; 
+  --mw-dark-page-background: #172127; 
   --mw-font-family-base: 'Your Custom Font', sans-serif; 
   /* ... other overrides ... */
 }</code></pre>
@@ -181,14 +181,15 @@ href="path/maverick-wave.min.css"&gt;</code></pre>
         </p>
         <pre class="mw-code-block"><code>// your-styles.scss
 @use 'path/to/maverick-wave/src/scss/main' with (
-  $primary-color: #e94560,
-  $secondary-color: #f39c12
+  $primary-color: #0f766e,
+  $secondary-color: #b45309
   // ... other root colors ...
 );</code></pre>
         <p>
           Both methods end up at the same place: the derived tones (hover
-          colors, translucent backgrounds, borders) are calculated at runtime
-          with <code>color-mix()</code>, so a single root color is enough.
+          colors, translucent backgrounds, borders, the ink variant the dark
+          theme needs) are calculated at runtime with <code>color-mix()</code>
+          and relative color syntax, so a single root color is enough.
         </p>
 
         <h5 class="mw-mt-4 mw-mb-2">Adding Custom Fonts</h5>

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>