maverick-wave 5.30.0 → 5.32.0

package/src/partials/button-bar-container.html

@@ -1,175 +0,0 @@
-<h3 class="mw-section-subtitle">Button Bars</h3>
-<p class="mw-text-muted mw-text-measure">
-  A framed row of actions. Below 576px it stacks and every button takes the full
-  width. The colour variants style whatever is inside them, so a bar of five
-  buttons needs one class rather than five.
-</p>
-
-<div class="mw-grid-stack-stretch">
-  <div>
-    <h3 class="mw-mb-4">Basic Button Bar</h3>
-    <div class="mw-button-bar">
-      <button class="mw-btn mw-btn-primary">Previous Post</button>
-      <button class="mw-btn mw-btn-primary">Back to Main</button>
-      <button class="mw-btn mw-btn-primary">Next Post</button>
-      <button class="mw-btn mw-btn-primary">Next Post</button>
-      <button class="mw-btn mw-btn-primary">Next Post</button>
-      <button class="mw-btn mw-btn-primary">Next Post</button>
-      <button class="mw-btn mw-btn-primary">Next Post</button>
-      <button class="mw-btn mw-btn-primary">Next Post</button>
-      <button class="mw-btn mw-btn-primary">Next Post</button>
-      <button class="mw-btn mw-btn-primary">Next Post</button>
-    </div>
-  </div>
-
-  <div>
-    <h3 class="mw-mb-4">Auto-styled Primary Button Bar</h3>
-    <div class="mw-button-bar mw-button-bar-primary">
-      <button class="mw-btn">Previous Post</button>
-      <button class="mw-btn">Back to Main</button>
-      <button class="mw-btn">Next Post</button>
-    </div>
-  </div>
-
-  <div>
-    <h3 class="mw-mb-4">Auto-styled Secondary Button Bar</h3>
-    <div class="mw-button-bar mw-button-bar-secondary">
-      <button class="mw-btn">Previous Post</button>
-      <button class="mw-btn">Back to Main</button>
-      <button class="mw-btn">Next Post</button>
-    </div>
-  </div>
-
-  <div>
-    <h3 class="mw-mb-4">Outline Button Bar</h3>
-    <div class="mw-button-bar mw-button-bar-outline">
-      <button class="mw-btn">Previous Post</button>
-      <button class="mw-btn">Back to Main</button>
-      <button class="mw-btn">Next Post</button>
-    </div>
-  </div>
-
-  <div>
-    <h3 class="mw-mb-4">Navigation Style (Mixed Buttons)</h3>
-    <div class="mw-button-bar mw-button-bar-nav">
-      <button class="mw-btn"><i class="fas fa-arrow-left"></i>Previous</button>
-      <button class="mw-btn">Back to Main</button>
-      <button class="mw-btn">Next<i class="fas fa-arrow-right"></i></button>
-    </div>
-  </div>
-
-  <div>
-    <h3 class="mw-mb-4">Space Between Layout</h3>
-    <div class="mw-button-bar mw-button-bar-between">
-      <button class="mw-btn mw-btn-outline">
-        <i class="fas fa-arrow-left"></i>Previous
-      </button>
-      <button class="mw-btn mw-btn-primary">Main</button>
-      <button class="mw-btn mw-btn-outline">
-        Next<i class="fas fa-arrow-right"></i>
-      </button>
-    </div>
-  </div>
-
-  <div>
-    <h3 class="mw-mb-4">Button Bar Alignments</h3>
-    <div class="mw-d-flex mw-flex-column mw-gap-4">
-      <div>
-        <p class="mw-mb-2"><strong>Left Aligned:</strong></p>
-        <div class="mw-button-bar mw-button-bar-left mw-button-bar-primary">
-          <button class="mw-btn">Left</button>
-          <button class="mw-btn">Center</button>
-          <button class="mw-btn">Right</button>
-        </div>
-      </div>
-      <div>
-        <p class="mw-mb-2"><strong>Right Aligned:</strong></p>
-        <div class="mw-button-bar mw-button-bar-right mw-button-bar-secondary">
-          <button class="mw-btn">Left</button>
-          <button class="mw-btn">Center</button>
-          <button class="mw-btn">Right</button>
-        </div>
-      </div>
-      <div>
-        <p class="mw-mb-2">
-          <strong>Center Aligned (also the default):</strong>
-        </p>
-        <div class="mw-button-bar mw-button-bar-center mw-button-bar-outline">
-          <button class="mw-btn">Left</button>
-          <button class="mw-btn">Center</button>
-          <button class="mw-btn">Right</button>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div>
-    <h3 class="mw-mb-4">Button Bar Sizes</h3>
-    <div class="mw-d-flex mw-flex-column mw-gap-4">
-      <div>
-        <p class="mw-mb-2"><strong>Small:</strong></p>
-        <div class="mw-button-bar mw-button-bar-sm mw-button-bar-secondary">
-          <button class="mw-btn mw-btn-sm">Prev</button>
-          <button class="mw-btn mw-btn-sm">Main</button>
-          <button class="mw-btn mw-btn-sm">Next</button>
-        </div>
-      </div>
-      <div>
-        <p class="mw-mb-2"><strong>Default:</strong></p>
-        <div class="mw-button-bar mw-button-bar-primary">
-          <button class="mw-btn">Previous</button>
-          <button class="mw-btn">Main</button>
-          <button class="mw-btn">Next</button>
-        </div>
-      </div>
-      <div>
-        <p class="mw-mb-2"><strong>Large:</strong></p>
-        <div class="mw-button-bar mw-button-bar-lg mw-button-bar-primary">
-          <button class="mw-btn">Previous</button>
-          <button class="mw-btn">Main</button>
-          <button class="mw-btn">Next</button>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div>
-    <h3 class="mw-mb-4">Button Bars with Icons</h3>
-    <div class="mw-d-flex mw-flex-column mw-gap-4">
-      <div>
-        <p class="mw-mb-2"><strong>Navigation with Icons:</strong></p>
-        <div class="mw-button-bar mw-button-bar-nav">
-          <button class="mw-btn">
-            <i class="fas fa-arrow-left"></i>
-            Previous Post
-          </button>
-          <button class="mw-btn">
-            <i class="fas fa-home"></i>
-            Back to Main
-          </button>
-          <button class="mw-btn">
-            Next Post
-            <i class="fas fa-arrow-right"></i>
-          </button>
-        </div>
-      </div>
-      <div>
-        <p class="mw-mb-2"><strong>Action Buttons:</strong></p>
-        <div class="mw-button-bar mw-button-bar-primary">
-          <button class="mw-btn">
-            <i class="fas fa-save"></i>
-            Save Draft
-          </button>
-          <button class="mw-btn">
-            <i class="fas fa-eye"></i>
-            Preview
-          </button>
-          <button class="mw-btn">
-            <i class="fas fa-upload"></i>
-            Publish
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

package/src/partials/buttons-container.html

@@ -1,272 +0,0 @@
-<h3 class="mw-section-subtitle">Buttons</h3>
-<p class="mw-text-muted mw-text-measure">
-  Three emphasis levels: primary fills, outline draws a line, ghost does neither
-  until you point at it. Every variant dips a pixel when pressed - on touch that
-  press is the only feedback there is.
-</p>
-
-<div class="mw-grid-1">
-  <div>
-    <h3 class="mw-mb-4">Button Styles</h3>
-    <div class="mw-card mw-card-simple">
-      <div class="mw-d-flex mw-flex-wrap mw-items-center mw-gap-4">
-        <button type="button" class="mw-btn mw-btn-primary">
-          Primary Button
-        </button>
-        <button type="button" class="mw-btn mw-btn-secondary">
-          Secondary Button
-        </button>
-        <button type="button" class="mw-btn mw-btn-danger">
-          Danger Button
-        </button>
-        <button type="button" class="mw-btn mw-btn-success">
-          Success Button
-        </button>
-        <button type="button" class="mw-btn mw-btn-outline">
-          Outline Button
-        </button>
-        <button type="button" class="mw-btn mw-btn-link">Link Button</button>
-        <button type="button" class="mw-btn mw-btn-link-muted">
-          Link Muted
-        </button>
-        <button type="button" class="mw-btn mw-btn-primary" disabled>
-          Primary Button Disabled
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <div>
-    <h3 class="mw-mb-4">Ghost, Icon &amp; Block</h3>
-    <div class="mw-card mw-card-simple mw-grid-1 mw-gap-6">
-      <div>
-        <h4 class="mw-text-medium mw-mb-2">Ghost</h4>
-        <div class="mw-d-flex mw-flex-wrap mw-items-center mw-gap-3">
-          <button type="button" class="mw-btn mw-btn-ghost">Rename</button>
-          <button type="button" class="mw-btn mw-btn-ghost mw-active">
-            Selected
-          </button>
-          <button type="button" class="mw-btn mw-btn-ghost mw-btn-ghost-danger">
-            Remove
-          </button>
-        </div>
-        <p class="mw-text-muted mw-text-sm mw-mt-3 mw-mb-0">
-          The third emphasis level: primary fills, outline draws a line, ghost
-          does neither until you point at it. For a toolbar or a card's own
-          actions, where five outlined boxes would fight the content under them.
-          Not <code>mw-btn-plain</code> - this keeps the shape, the padding and
-          the hit area, it just does not paint them at rest.
-        </p>
-      </div>
-      <div>
-        <h4 class="mw-text-medium mw-mb-2">Icon only</h4>
-        <div class="mw-d-flex mw-flex-wrap mw-items-center mw-gap-3">
-          <button
-            type="button"
-            class="mw-btn mw-btn-ghost mw-btn-icon mw-btn-sm"
-            aria-label="Edit"
-            data-tooltip="Edit"
-          >
-            <i class="fas fa-pen"></i>
-          </button>
-          <button
-            type="button"
-            class="mw-btn mw-btn-ghost mw-btn-icon"
-            aria-label="Duplicate"
-            data-tooltip="Duplicate"
-          >
-            <i class="fas fa-copy"></i>
-          </button>
-          <button
-            type="button"
-            class="mw-btn mw-btn-outline mw-btn-icon"
-            aria-label="Share"
-            data-tooltip="Share"
-          >
-            <i class="fas fa-share"></i>
-          </button>
-          <button
-            type="button"
-            class="mw-btn mw-btn-primary mw-btn-icon mw-btn-lg"
-            aria-label="Add"
-            data-tooltip="Add"
-          >
-            <i class="fas fa-plus"></i>
-          </button>
-        </div>
-        <p class="mw-text-muted mw-text-sm mw-mt-3 mw-mb-0">
-          <code>mw-btn-icon</code> makes the button square. Without it the
-          horizontal padding is the only thing setting the width, so an icon
-          button ends up wider than it is tall and a row of them lines up on
-          nothing. It always needs an <code>aria-label</code> - there is no text
-          to read out.
-        </p>
-      </div>
-      <div>
-        <h4 class="mw-text-medium mw-mb-2">Block</h4>
-        <button type="button" class="mw-btn mw-btn-primary mw-btn-block">
-          Sign in
-        </button>
-        <p class="mw-text-muted mw-text-sm mw-mt-3 mw-mb-0">
-          <code>mw-btn-block</code> takes the full width - the one action on a
-          sheet, a sign-in form, a narrow sidebar.
-        </p>
-      </div>
-    </div>
-  </div>
-
-  <div>
-    <h3 class="mw-mb-4">Button Sizes</h3>
-    <div class="mw-card mw-card-simple">
-      <div class="mw-d-flex mw-flex-wrap mw-items-center mw-gap-4">
-        <button type="button" class="mw-btn mw-btn-primary mw-btn-sm">
-          Small Button
-        </button>
-        <button type="button" class="mw-btn mw-btn-primary">
-          Default Button
-        </button>
-        <button type="button" class="mw-btn mw-btn-primary mw-btn-lg">
-          Large Button
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <div>
-    <h3 class="mw-mb-4">Buttons with Icons</h3>
-    <div class="mw-card mw-card-simple">
-      <div class="mw-d-flex mw-flex-wrap mw-items-center mw-gap-4">
-        <button type="button" class="mw-btn mw-btn-primary">
-          <i class="fas fa-save"></i>
-          Save Changes
-        </button>
-
-        <button type="button" class="mw-btn mw-btn-secondary">
-          <i class="fas fa-plus"></i>
-          Add Item
-        </button>
-
-        <button type="button" href="#" class="mw-btn mw-btn-outline">
-          <i class="fas fa-arrow-left"></i>
-          Go Back
-        </button>
-
-        <button type="button" class="mw-btn mw-btn-primary mw-btn-sm">
-          <i class="fas fa-check"></i>
-          OK
-        </button>
-
-        <button type="button" class="mw-btn mw-btn-outline mw-btn-lg">
-          <i class="fas fa-upload"></i>
-          Upload File
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <div>
-    <h3 class="mw-mb-4">Mini Icon Buttons</h3>
-    <div class="mw-card mw-card-simple">
-      <div class="mw-d-flex mw-flex-wrap mw-items-center mw-gap-4">
-        <button type="button" class="mw-btn-mini" title="Default / Plus">
-          <i class="fas fa-plus"></i>
-        </button>
-        <button
-          type="button"
-          class="mw-btn-mini mw-btn-mini-danger"
-          title="Danger / Minus"
-        >
-          <i class="fas fa-minus"></i>
-        </button>
-        <button
-          type="button"
-          class="mw-btn-mini mw-btn-mini-success"
-          title="Success / Check"
-        >
-          <i class="fas fa-check"></i>
-        </button>
-        <button
-          type="button"
-          class="mw-btn-mini mw-btn-mini-primary"
-          title="Primary / Address Card"
-        >
-          <i class="fas fa-address-card"></i>
-        </button>
-        <a
-          href="#"
-          class="mw-btn-mini mw-btn-mini-primary"
-          title="Als Link (a-Tag)"
-        >
-          <i class="fas fa-external-link-alt"></i>
-        </a>
-        <button
-          type="button"
-          class="mw-btn-mini"
-          disabled
-          title="Disabled Mini"
-        >
-          <i class="fas fa-times"></i>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<h3 class="mw-mb-4 mw-mt-6">Plain Buttons</h3>
-<p class="mw-text-muted">
-  <code>mw-btn-plain</code> is for everywhere a <code>&lt;button&gt;</code> is
-  the right element and a button is the wrong look - a calendar day, a time in a
-  request row, a modal backdrop. It brings nothing but the focus ring and the
-  pointer; everything else it inherits. Not the same as
-  <code>mw-btn-link</code>, which is a button dressed as a link with a colour
-  and a control height of its own, nor the same as <code>mw-link</code>, which
-  is the link inside a sentence.
-</p>
-<div class="mw-card mw-card-simple">
-  <p class="mw-mb-4">
-    Booked for
-    <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>
-    - 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>
-    <button type="button" class="mw-btn-plain">mw-btn-plain</button>
-    <button type="button" class="mw-btn-plain" disabled>disabled</button>
-  </div>
-</div>
-
-<h3 class="mw-mb-4 mw-mt-6">Text Links</h3>
-<p class="mw-text-muted">
-  <code>mw-link</code> is the link inside a sentence,
-  <code>mw-link-muted</code> the quieter one. Same look as
-  <code>mw-btn-link</code>, without the button: <code>mw-btn</code> carries a
-  control height, and in running text that lifts the one line the link sits on
-  above every line around it - glaring in a footer disclaimer, where the text is
-  a size smaller to begin with. So <code>mw-link</code> in a paragraph,
-  <code>mw-btn mw-btn-link</code> where the link really is one of several
-  buttons and has to line up with them. Both work on an
-  <code>&lt;a&gt;</code> and on a <code>&lt;button&gt;</code>.
-</p>
-<div class="mw-card mw-card-simple">
-  <p class="mw-mb-0">
-    Built with
-    <a href="https://astro.build" target="_blank" class="mw-link">Astro</a>
-    and written up in the
-    <a href="#get-started" class="mw-link-muted">Get Started</a> section - both
-    sit on the line, not above it.
-  </p>
-</div>
-
-<h3 class="mw-mb-4 mw-mt-6">Touch Targets</h3>
-<p class="mw-text-muted">
-  On a coarse pointer or below 768px the compact controls grow to a size a thumb
-  can actually hit: <code>mw-btn-sm</code>, <code>mw-input-sm</code> and
-  <code>mw-select-sm</code> to 2.5rem, a tab to 2.75rem, a calendar day to 44px.
-  WCAG 2.5.8 puts the floor at 24px, and that is a floor, not a goal.
-  <code>mw-btn-mini</code> keeps its 18px circle - it sits in tag rows and table
-  cells where a bigger one would shift the layout - and grows its hit area to
-  28px instead, as does a kanban action button on its 32px box. Nothing to
-  switch on; resize this page or open it on a phone.
-</p>

package/src/partials/calendar-container.html

@@ -1,203 +0,0 @@
-<h3 class="mw-section-subtitle">Calendar</h3>
-<p class="mw-text-muted mw-text-measure">
-  Month, compact and week share every class - a week is seven cells instead of
-  forty-two, <code>mw-calendar-compact</code> drops the dots and a third of the
-  height. The status dots come in as
-  <code>data-calendar-markers='{"2026-08-19": ["success", "warning"]}'</code>.
-</p>
-<p class="mw-text-muted">
-  What a dot <em>means</em> belongs to the caller: the same calendar reads
-  &ldquo;request pending / booked / time offered&rdquo; in a scheduling app and
-  something else entirely on a public booking page. So the colour is a property,
-  <code>--mw-calendar-dot</code>, settable per dot or inherited from the cell -
-  <code>mw-calendar-dot-success</code> and friends are named presets for it, not
-  the only way in.
-</p>
-<div class="mw-card mw-card-simple mw-mb-6">
-  <div class="mw-row-split mw-row-split-center">
-    <span>Any colour, set on the dot itself</span>
-    <span class="mw-d-flex mw-items-center mw-gap-3">
-      <span class="mw-calendar-dot" style="--mw-calendar-dot: #7a4fd4"></span>
-      <span class="mw-calendar-dot" style="--mw-calendar-dot: #d47a4f"></span>
-      <span class="mw-calendar-dot mw-calendar-dot-success"></span>
-      <code>--mw-calendar-dot</code>
-    </span>
-  </div>
-</div>
-
-<div class="mw-grid-2 calendar-demos mw-my-6">
-  <div class="calendar-demo">
-    <h4 class="mw-mb-2">Month</h4>
-    <div class="mw-segmented mw-mb-4" data-modifier-demo="calendar-month">
-      <button
-        type="button"
-        class="mw-segmented-item mw-active"
-        data-modifier=""
-      >
-        Default
-      </button>
-      <button
-        type="button"
-        class="mw-segmented-item"
-        data-modifier="mw-calendar-compact"
-      >
-        Compact
-      </button>
-    </div>
-    <div
-      class="mw-calendar"
-      id="calendar-month"
-      data-calendar="month"
-      data-calendar-locale="en-GB"
-    >
-      <div class="mw-calendar-header">
-        <button
-          type="button"
-          class="mw-btn mw-btn-outline mw-btn-sm mw-calendar-nav"
-          data-calendar-nav="-1"
-          aria-label="Previous month"
-        >
-          <i class="fas fa-chevron-left"></i>
-        </button>
-
-        <div class="mw-calendar-title" aria-live="polite"></div>
-
-        <button
-          type="button"
-          class="mw-btn mw-btn-outline mw-btn-sm mw-calendar-nav"
-          data-calendar-nav="1"
-          aria-label="Next month"
-        >
-          <i class="fas fa-chevron-right"></i>
-        </button>
-      </div>
-
-      <div class="mw-calendar-grid"></div>
-
-      <div class="mw-calendar-legend">
-        <span class="mw-calendar-legend-item">
-          <span class="mw-calendar-dot mw-calendar-dot-success"></span>
-          Slots free
-        </span>
-        <span class="mw-calendar-legend-item">
-          <span class="mw-calendar-dot mw-calendar-dot-warning"></span>
-          Almost booked
-        </span>
-        <span class="mw-calendar-legend-item">
-          <span class="mw-calendar-dot mw-calendar-dot-danger"></span>
-          Fully booked
-        </span>
-        <span class="mw-calendar-legend-item">
-          <span class="mw-calendar-dot mw-calendar-dot-info"></span>
-          Public holiday
-        </span>
-      </div>
-    </div>
-  </div>
-
-  <div class="calendar-demo">
-    <h4 class="mw-mb-2">Week</h4>
-    <div class="mw-segmented mw-mb-4" data-modifier-demo="calendar-week">
-      <button
-        type="button"
-        class="mw-segmented-item mw-active"
-        data-modifier=""
-      >
-        Default
-      </button>
-      <button
-        type="button"
-        class="mw-segmented-item"
-        data-modifier="mw-calendar-compact"
-      >
-        Compact
-      </button>
-    </div>
-    <div
-      class="mw-calendar"
-      id="calendar-week"
-      data-calendar="week"
-      data-calendar-locale="en-GB"
-    >
-      <div class="mw-calendar-header">
-        <button
-          type="button"
-          class="mw-btn mw-btn-outline mw-btn-sm mw-calendar-nav"
-          data-calendar-nav="-1"
-          aria-label="Previous week"
-        >
-          <i class="fas fa-chevron-left"></i>
-        </button>
-
-        <div class="mw-calendar-title" aria-live="polite"></div>
-
-        <button
-          type="button"
-          class="mw-btn mw-btn-outline mw-btn-sm mw-calendar-nav"
-          data-calendar-nav="1"
-          aria-label="Next week"
-        >
-          <i class="fas fa-chevron-right"></i>
-        </button>
-      </div>
-
-      <div class="mw-calendar-grid"></div>
-
-      <div class="mw-calendar-legend">
-        <span class="mw-calendar-legend-item">
-          <span class="mw-calendar-dot mw-calendar-dot-success"></span>
-          Slots free
-        </span>
-        <span class="mw-calendar-legend-item">
-          <span class="mw-calendar-dot mw-calendar-dot-warning"></span>
-          Almost booked
-        </span>
-        <span class="mw-calendar-legend-item">
-          <span class="mw-calendar-dot mw-calendar-dot-danger"></span>
-          Fully booked
-        </span>
-        <span class="mw-calendar-legend-item">
-          <span class="mw-calendar-dot mw-calendar-dot-info"></span>
-          Public holiday
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-
-<script>
-  // Showcase only: the demo markers hang off today, so the dots stay in view no
-  // matter when this page is opened. A real page ships them as a literal.
-  (function () {
-    const markers = {};
-
-    const add = (offset, tones) => {
-      const date = new Date();
-      date.setDate(date.getDate() + offset);
-      const key =
-        date.getFullYear() +
-        '-' +
-        String(date.getMonth() + 1).padStart(2, '0') +
-        '-' +
-        String(date.getDate()).padStart(2, '0');
-      markers[key] = tones;
-    };
-
-    add(-6, ['danger']);
-    add(-4, ['success']);
-    add(-1, ['warning', 'info']);
-    add(0, ['success', 'warning']);
-    add(1, ['success']);
-    add(2, ['info']);
-    add(3, ['danger', 'warning', 'success']);
-    add(5, ['secondary']);
-    add(8, ['success']);
-    add(11, ['warning']);
-    add(14, ['danger']);
-
-    const encoded = JSON.stringify(markers);
-    document.querySelectorAll('[data-calendar]').forEach((calendar) => {
-      calendar.dataset.calendarMarkers = encoded;
-    });
-  })();
-</script>