maverick-wave 4.9.4 → 4.11.0

package/src/partials/dropdown-container.html

@@ -0,0 +1,119 @@
+<h3 class="mw-section-subtitle">Dropdown</h3>
+
+<p class="mw-text-muted mw-mb-6 mw-text-measure">
+  Built on <code>&lt;details&gt;</code> and <code>&lt;summary&gt;</code> rather
+  than a <code>div</code> and a click handler. That buys the whole keyboard
+  contract for free: the trigger is focusable, Enter and Space toggle it, the
+  open state lives in the DOM where a screen reader can see it, and the menu
+  still opens with JavaScript switched off. The framework script only adds what
+  markup cannot express - closing on <kbd>Esc</kbd> and on a click elsewhere.
+</p>
+
+<div class="mw-grid-2 mw-gap-6">
+  <div>
+    <h3 class="mw-card-title mw-mb-4">Actions menu</h3>
+    <div class="mw-card mw-card-simple mw-grid-1 mw-gap-6">
+      <div>
+        <h5 class="mw-text-medium mw-mb-2">Default</h5>
+        <details class="mw-dropdown">
+          <summary class="mw-btn mw-btn-primary">
+            Actions <i class="fas fa-chevron-down mw-dropdown-caret"></i>
+          </summary>
+          <div class="mw-dropdown-menu">
+            <div class="mw-dropdown-label">Manage</div>
+            <button class="mw-dropdown-item">
+              <i class="fas fa-pen"></i> Edit
+            </button>
+            <button class="mw-dropdown-item">
+              <i class="fas fa-copy"></i> Duplicate
+            </button>
+            <button class="mw-dropdown-item" disabled>
+              <i class="fas fa-arrow-right"></i> Move
+            </button>
+            <hr class="mw-dropdown-divider" />
+            <button class="mw-dropdown-item mw-dropdown-item-danger">
+              <i class="fas fa-trash"></i> Delete
+            </button>
+          </div>
+        </details>
+      </div>
+
+      <div>
+        <h5 class="mw-text-medium mw-mb-2">As a picker</h5>
+        <details class="mw-dropdown">
+          <summary class="mw-btn mw-btn-outline">
+            Sort by: Newest
+            <i class="fas fa-chevron-down mw-dropdown-caret"></i>
+          </summary>
+          <div class="mw-dropdown-menu">
+            <button class="mw-dropdown-item mw-active" aria-checked="true">
+              Newest first
+            </button>
+            <button class="mw-dropdown-item">Oldest first</button>
+            <button class="mw-dropdown-item">Name A - Z</button>
+            <button class="mw-dropdown-item">Name Z - A</button>
+          </div>
+        </details>
+        <p class="mw-text-muted mw-text-sm mw-mt-3 mw-mb-0">
+          <code>mw-active</code> marks the current choice, for a menu that picks
+          rather than acts.
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="mw-card-title mw-mb-4">Alignment</h3>
+    <div class="mw-card mw-card-simple mw-grid-1 mw-gap-6">
+      <div class="mw-row-split mw-row-split-center">
+        <span class="mw-text-muted mw-text-sm">Start (default)</span>
+        <details class="mw-dropdown">
+          <summary class="mw-btn mw-btn-sm mw-btn-outline">
+            Menu <i class="fas fa-chevron-down mw-dropdown-caret"></i>
+          </summary>
+          <div class="mw-dropdown-menu">
+            <button class="mw-dropdown-item">One</button>
+            <button class="mw-dropdown-item">Two</button>
+          </div>
+        </details>
+      </div>
+
+      <div class="mw-row-split mw-row-split-center">
+        <span class="mw-text-muted mw-text-sm"
+          ><code>mw-dropdown-end</code></span
+        >
+        <details class="mw-dropdown mw-dropdown-end">
+          <summary class="mw-btn mw-btn-sm mw-btn-outline">
+            Menu <i class="fas fa-chevron-down mw-dropdown-caret"></i>
+          </summary>
+          <div class="mw-dropdown-menu">
+            <button class="mw-dropdown-item">One</button>
+            <button class="mw-dropdown-item">Two</button>
+          </div>
+        </details>
+      </div>
+
+      <div class="mw-row-split mw-row-split-center">
+        <span class="mw-text-muted mw-text-sm"
+          ><code>mw-dropdown-up</code></span
+        >
+        <details class="mw-dropdown mw-dropdown-up mw-dropdown-end">
+          <summary class="mw-btn mw-btn-sm mw-btn-outline">
+            Menu <i class="fas fa-chevron-down mw-dropdown-caret"></i>
+          </summary>
+          <div class="mw-dropdown-menu">
+            <button class="mw-dropdown-item">One</button>
+            <button class="mw-dropdown-item">Two</button>
+          </div>
+        </details>
+      </div>
+
+      <p class="mw-text-muted mw-text-sm mw-mb-0">
+        The menu is absolutely positioned, so an ancestor that hides its
+        overflow clips it. The framework's own containers lift that clip while a
+        menu is open; on your own, one line does the same:
+        <code>:has(.mw-dropdown[open]) { overflow: visible }</code>.
+      </p>
+    </div>
+  </div>
+</div>

package/src/partials/empty-state-container.html

@@ -1,4 +1,9 @@
 <h3 class="mw-section-subtitle">Empty State</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  What a list shows when it holds nothing. An icon, a line saying what is
+  missing and, ideally, the action that fills it. The parts are
+  <code>-icon</code>, <code>-title</code> and <code>-desc</code>.
+</p>
 
 <div class="mw-grid-2-lg">
   <div>

package/src/partials/form-container.html

@@ -1,4 +1,9 @@
 <h3 class="mw-section-subtitle">Form</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  The layout around the fields: a flex column with a single gap, so no field
+  needs a margin of its own. <code>mw-form</code> carries no padding, which is
+  what lets it sit straight inside a modal body or a panel.
+</p>
 
 <div class="mw-card mw-card-simple">
   <h3 class="mw-card-title">Example - User Profile Settings</h3>

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

@@ -1,4 +1,9 @@
 <h3 class="mw-section-subtitle">Form Elements</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  Every control the framework styles. They stay light in both themes on purpose,
+  and they share one height per size step - a field, a select and the button
+  beside them line up by construction.
+</p>
 
 <div class="mw-grid-1">
   <div class="mw-card mw-card-simple">

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

@@ -1,4 +1,9 @@
 <h3 class="mw-section-subtitle">Form Field Pattern</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  Label, field, hint and error as one unit, so the spacing between them is not
+  re-invented per form. Written with Angular reactive forms in mind; the markup
+  is plain HTML.
+</p>
 
 <div class="mw-grid-2 mw-gap-6">
   <!-- LEFT: mw-field wrapper -->

package/src/partials/gallery-container.html

@@ -1,4 +1,9 @@
 <h3 class="mw-section-subtitle">Image Gallery</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  A slider for photos: swipe, arrows, dots and a caption read off the slide
+  itself. The dots are real buttons, so the fourth picture is reachable without
+  a mouse.
+</p>
 
 <div class="mw-gallery-container">
   <div class="mw-gallery">

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

@@ -23,10 +23,22 @@
 
 <div class="mw-tabs mw-mb-6">
   <div class="mw-tabs-nav">
-    <div class="mw-tabs-nav-item mw-active" data-tab="html-css">HTML/CSS</div>
-    <div class="mw-tabs-nav-item" data-tab="scss">SCSS Projects</div>
-    <div class="mw-tabs-nav-item" data-tab="angular">Angular</div>
-    <div class="mw-tabs-nav-item" data-tab="react">React</div>
+    <button
+      type="button"
+      class="mw-tabs-nav-item mw-active"
+      data-tab="html-css"
+    >
+      HTML/CSS
+    </button>
+    <button type="button" class="mw-tabs-nav-item" data-tab="scss">
+      SCSS Projects
+    </button>
+    <button type="button" class="mw-tabs-nav-item" data-tab="angular">
+      Angular
+    </button>
+    <button type="button" class="mw-tabs-nav-item" data-tab="react">
+      React
+    </button>
   </div>
 
   <div class="mw-tabs-content">

package/src/partials/header-container.html

@@ -29,13 +29,17 @@
   </nav>
 
   <!-- Theme Toggle -->
-  <div class="mw-theme-toggle mw-ml-5">
+  <button
+    type="button"
+    class="mw-theme-toggle mw-ml-5"
+    aria-label="Toggle light and dark theme"
+  >
     <div class="mw-theme-toggle-slider">
       <div class="mw-theme-toggle-icon">
         <i class="fas fa-moon"></i>
       </div>
     </div>
-  </div>
+  </button>
 
   <!-- Login Button -->
   <button class="mw-login-btn" id="login-button">

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

@@ -1,10 +1,16 @@
 <h3 class="mw-section-subtitle">Header Utilities</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  The two controls that live in the bar itself rather than on the page: the
+  theme switch and the login button. Both are real buttons, so they are
+  reachable by keyboard - the switch in particular is the first thing someone
+  with a light-sensitivity need goes looking for.
+</p>
 
 <div class="mw-mt-6">
   <h3 class="mw-mb-2">Color Switcher (on a fake header here)</h3>
   <p class="mw-text-muted">
-    This is not clickable here - because the real color switcher is on top
-    whtihin the header
+    This one is not clickable - the real switcher sits in the header at the top
+    of the page.
   </p>
   <!-- Fake header -->
   <div class="mw-mb-4" style="position: relative; overflow: hidden">

package/src/partials/html-lists-container.html

@@ -1,4 +1,9 @@
 <h3 class="mw-section-subtitle">HTML Lists</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  The plain <code>ul</code> and <code>ol</code> the framework styles, for prose.
+  Anything meant to be used rather than read - selectable rows, menus - belongs
+  in the item lists instead.
+</p>
 
 <div class="mw-grid-2-lg">
   <div class="mw-card mw-card-simple">

package/src/partials/info-container.html

@@ -1,4 +1,8 @@
 <h3 class="mw-section-subtitle">Info Badges & Counters</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  A small solid marker for a status, a label or a count, down to a mini form
+  that fits inside a table cell. A tag names something; this one flags it.
+</p>
 
 <h4 class="mw-mb-2">Pill Badges</h4>
 <div class="mw-card mw-card-simple">

package/src/partials/input-group-container.html

@@ -1,4 +1,9 @@
 <h3 class="mw-section-subtitle">Input Group</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  A field with something welded to its edge - a unit, an icon, a button. Put the
+  size modifier on the group and it reaches the field inside, and the whole
+  group takes one focus ring rather than three.
+</p>
 
 <div class="mw-grid-2 mw-gap-6">
   <!-- LEFT: Prefix & Suffix examples -->

package/src/partials/item-lists-container.html

@@ -1,4 +1,9 @@
 <h3 class="mw-section-subtitle">Item Lists</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  Rows that are meant to be used, not just read: selectable, clickable, with a
+  sliding accent or a checkbox. For a plain bulleted list use the HTML lists
+  above.
+</p>
 
 <div class="mw-grid-2-lg">
   <div>

package/src/partials/kanban-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Kanban</h3>
-<p class="mw-text-muted">
+<p class="mw-text-muted mw-text-measure mw-mb-6">
   A board is a <code>mw-kanban</code> with one <code>mw-kanban-column</code> per
   status, a ticket a plain <code>mw-card</code> with
   <code>mw-kanban-card</code> on top. The priority is the regular

package/src/partials/kbd-container.html

@@ -0,0 +1,63 @@
+<h3 class="mw-section-subtitle">Keyboard Keys</h3>
+
+<p class="mw-text-muted mw-mb-6 mw-text-measure">
+  Anything that tells someone which key to press should look like the key.
+  <code>&lt;kbd&gt;</code> is styled directly, so a shortcut in prose needs no
+  class at all; <code>mw-kbd</code> is there for a <code>span</code> when the
+  markup is not yours to change.
+</p>
+
+<div class="mw-grid-2 mw-gap-6">
+  <div>
+    <h3 class="mw-card-title mw-mb-4">In prose</h3>
+    <div class="mw-card mw-card-simple mw-grid-1 mw-gap-6">
+      <p class="mw-mb-0">
+        Press
+        <span class="mw-kbd-group"
+          ><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd></span
+        >
+        to open the command palette, <kbd>Esc</kbd> to close it and
+        <kbd>Enter</kbd> to run the selection.
+      </p>
+      <p class="mw-mb-0">
+        On a Mac that is
+        <span class="mw-kbd-group"
+          ><kbd>&#8984;</kbd>+<kbd>&#8679;</kbd>+<kbd>P</kbd></span
+        >.
+      </p>
+      <div>
+        <h5 class="mw-text-medium mw-mb-2">Held down</h5>
+        <p class="mw-mb-0">
+          <kbd class="mw-kbd-pressed">Space</kbd> shown mid-press - the raised
+          edge drops and the key sits 1px lower, for a hint that demonstrates
+          rather than lists.
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="mw-card-title mw-mb-4">As a shortcut list</h3>
+    <div class="mw-card mw-card-simple">
+      <div class="mw-row-split mw-row-split-center">
+        <span>Save</span>
+        <span class="mw-kbd-group"><kbd>Ctrl</kbd>+<kbd>S</kbd></span>
+      </div>
+      <hr class="mw-divider" />
+      <div class="mw-row-split mw-row-split-center">
+        <span>Find in page</span>
+        <span class="mw-kbd-group"><kbd>Ctrl</kbd>+<kbd>F</kbd></span>
+      </div>
+      <hr class="mw-divider" />
+      <div class="mw-row-split mw-row-split-center">
+        <span>Close tab</span>
+        <span class="mw-kbd-group"><kbd>Ctrl</kbd>+<kbd>W</kbd></span>
+      </div>
+      <hr class="mw-divider" />
+      <div class="mw-row-split mw-row-split-center">
+        <span>Help</span>
+        <span class="mw-kbd-group"><kbd>?</kbd></span>
+      </div>
+    </div>
+  </div>
+</div>

package/src/partials/meta-info-container.html

@@ -1,4 +1,9 @@
 <h3 class="mw-section-subtitle">Meta Info</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  The line of small facts that sits with a heading - author, date, reading time,
+  status. One wrapping row, with the separators drawn by CSS rather than typed
+  into the markup.
+</p>
 
 <div class="mw-meta-header">
   <div class="mw-meta-item">

package/src/partials/pagination-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Simple Pagination</h3>
-<p class="mw-text-muted">
+<p class="mw-text-muted mw-text-measure mw-mb-6">
   The same frame as a calendar - an arrow on each side of the title, content
   below - but the body is yours. Not a page-number list; the paging itself is
   your job, <code>mw-pagination-loading</code> dims the body while the next page

package/src/partials/panels-container.html

@@ -1,4 +1,8 @@
 <h3 class="mw-section-subtitle">Panels</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  A card whose header and footer are part of the frame rather than the content.
+  The body scrolls on its own, which is what the max-height variants are for.
+</p>
 
 <div class="mw-grid-1 mw-my-6">
   <div class="mw-panel">

package/src/partials/progress-container.html

@@ -1,4 +1,8 @@
 <h3 class="mw-section-subtitle">Progress Bars</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  A bar with an optional label and scale. The fill runs up from zero when it
+  scrolls into view, so the number gets read rather than just seen.
+</p>
 
 <div class="mw-grid-2">
   <div>

package/src/partials/ratings-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Ratings</h3>
-<p class="mw-text-muted">
+<p class="mw-text-muted mw-text-measure mw-mb-6">
   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/skeleton-container.html

@@ -1,4 +1,9 @@
 <h3 class="mw-section-subtitle">Skeleton Loader</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  The shape of the content before the content arrives. Match it to what is
+  actually loading - a skeleton in the wrong shape is worse than a spinner,
+  because the page then moves twice.
+</p>
 
 <div class="mw-grid-3 mw-gap-6">
   <!-- COLUMN 1: Text skeleton -->

package/src/partials/spinners-container.html

@@ -1,4 +1,8 @@
-<h3 class="mw-section-subtitle">Loding Spinners</h3>
+<h3 class="mw-section-subtitle">Loading Spinners</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  Three shapes for the same job. Each one needs its shape class:
+  <code>mw-spinner-primary</code> on its own renders nothing at all.
+</p>
 
 <h3 class="mw-mt-4">Basic Spinners</h3>
 <div class="mw-grid-3 mw-mt-4">

package/src/partials/stepper-container.html

@@ -1,4 +1,8 @@
 <h3 class="mw-section-subtitle">Stepper</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  A process with a known number of steps and a current one. Horizontal where
+  there is width for it, vertical where the labels need the room.
+</p>
 
 <div class="mw-grid-2 mw-gap-6">
   <!-- LEFT: Horizontal steppers -->

package/src/partials/tables-container.html

@@ -1,4 +1,11 @@
 <h3 class="mw-section-subtitle">Tables</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  Rows for data that has columns. On a phone a wide table either scrolls inside
+  its own frame or turns each row into a card -
+  <code>mw-table-responsive</code> for the first,
+  <code>mw-table-cards</code> for the second. The compact variant is for the
+  tables that hold a screenful at a time.
+</p>
 
 <div class="mw-grid-1">
   <div class="mw-card mw-card-simple mw-mb-6">

package/src/partials/tabs-container.html

@@ -11,10 +11,18 @@
 <h3 class="mw-mb-4">Default Tabs</h3>
 <div class="mw-tabs mw-mb-6">
   <div class="mw-tabs-nav">
-    <div class="mw-tabs-nav-item mw-active" data-tab="tab1">Features</div>
-    <div class="mw-tabs-nav-item" data-tab="tab2">Specifications</div>
-    <div class="mw-tabs-nav-item" data-tab="tab3">Reviews</div>
-    <div class="mw-tabs-nav-item" data-tab="tab4">Support</div>
+    <button type="button" class="mw-tabs-nav-item mw-active" data-tab="tab1">
+      Features
+    </button>
+    <button type="button" class="mw-tabs-nav-item" data-tab="tab2">
+      Specifications
+    </button>
+    <button type="button" class="mw-tabs-nav-item" data-tab="tab3">
+      Reviews
+    </button>
+    <button type="button" class="mw-tabs-nav-item" data-tab="tab4">
+      Support
+    </button>
   </div>
   <div class="mw-tabs-content">
     <div class="mw-tabs-panel mw-active" id="tab1">
@@ -89,12 +97,18 @@
 <h3 class="mw-mb-4">Vertical Tabs</h3>
 <div class="mw-tabs mw-tabs-vertical mw-mb-6">
   <div class="mw-tabs-nav">
-    <div class="mw-tabs-nav-item mw-active" data-tab="vtab1">
+    <button type="button" class="mw-tabs-nav-item mw-active" data-tab="vtab1">
       Getting Started
-    </div>
-    <div class="mw-tabs-nav-item" data-tab="vtab2">Configuration</div>
-    <div class="mw-tabs-nav-item" data-tab="vtab3">Customization</div>
-    <div class="mw-tabs-nav-item" data-tab="vtab4">Best Practices</div>
+    </button>
+    <button type="button" class="mw-tabs-nav-item" data-tab="vtab2">
+      Configuration
+    </button>
+    <button type="button" class="mw-tabs-nav-item" data-tab="vtab3">
+      Customization
+    </button>
+    <button type="button" class="mw-tabs-nav-item" data-tab="vtab4">
+      Best Practices
+    </button>
   </div>
   <div class="mw-tabs-content">
     <div class="mw-tabs-panel mw-active" id="vtab1">
@@ -232,10 +246,18 @@ href="path/maverick-wave.min.css"&gt;</code></pre>
 <h3 class="mw-mb-4">Pills Style Tabs</h3>
 <div class="mw-tabs mw-tabs-pills">
   <div class="mw-tabs-nav">
-    <div class="mw-tabs-nav-item mw-active" data-tab="ptab1">Dashboard</div>
-    <div class="mw-tabs-nav-item" data-tab="ptab2">Profile</div>
-    <div class="mw-tabs-nav-item" data-tab="ptab3">Messages</div>
-    <div class="mw-tabs-nav-item" data-tab="ptab4">Settings</div>
+    <button type="button" class="mw-tabs-nav-item mw-active" data-tab="ptab1">
+      Dashboard
+    </button>
+    <button type="button" class="mw-tabs-nav-item" data-tab="ptab2">
+      Profile
+    </button>
+    <button type="button" class="mw-tabs-nav-item" data-tab="ptab3">
+      Messages
+    </button>
+    <button type="button" class="mw-tabs-nav-item" data-tab="ptab4">
+      Settings
+    </button>
   </div>
   <div class="mw-tabs-content">
     <div class="mw-tabs-panel mw-active" id="ptab1">

package/src/partials/tags-container.html

@@ -1,4 +1,9 @@
 <h3 class="mw-section-subtitle">Tags</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  A label with a soft surface that names something - a topic, a state, a
+  category - and sits in a row of its own kind. For a count or a status marker
+  reach for a badge instead.
+</p>
 
 <div class="mw-grid-2-lg mw-gap-6">
   <!-- COLUMN 1: Basic & Status -->

package/src/partials/tiles-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Tiles</h3>
-<p class="mw-text-muted">
+<p class="mw-text-muted mw-text-measure mw-mb-6">
   Here you can create clickable tiles with header, information and a possible
   image.
 </p>

package/src/partials/typography-container.html

@@ -1,4 +1,9 @@
 <h3 class="mw-section-subtitle">Typography</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  The heading scale, the body text and everything the framework sets on bare
+  elements. Headings carry <code>text-wrap: balance</code> and a touch of
+  negative tracking, paragraphs <code>text-wrap: pretty</code>.
+</p>
 
 <div class="mw-grid-2-lg">
   <div>