maverick-wave 5.30.0 → 5.32.0

package/src/partials/palette-container.html

@@ -1,480 +0,0 @@
-<div class="palette-panel" id="palette-panel" hidden>
-  <h3 class="palette-heading">Palette</h3>
-  <p class="palette-hint">
-    Two colors. Everything else - bar, ink, borders, tints - is derived from
-    them at runtime.
-  </p>
-
-  <div class="palette-grid">
-    <button
-      type="button"
-      class="palette-item mw-active"
-      data-primary="#1031bb"
-      data-secondary="#bb5710"
-      data-dark="#171f30"
-      data-light="#e7e7f0"
-    >
-      MaverickWave
-    </button>
-    <button
-      type="button"
-      class="palette-item"
-      data-primary="#0f6f8c"
-      data-secondary="#e8862a"
-      data-dark="#0f1f26"
-      data-light="#e2edf1"
-    >
-      Deep Sea
-    </button>
-    <button
-      type="button"
-      class="palette-item"
-      data-primary="#c2321f"
-      data-secondary="#256f83"
-      data-dark="#13161a"
-      data-light="#f4e9e6"
-    >
-      Ember
-    </button>
-    <button
-      type="button"
-      class="palette-item"
-      data-primary="#2f7a3f"
-      data-secondary="#7f4dbd"
-      data-dark="#141f16"
-      data-light="#e6eee7"
-    >
-      Moss
-    </button>
-    <button
-      type="button"
-      class="palette-item"
-      data-primary="#8e3bd4"
-      data-secondary="#2fa38a"
-      data-dark="#1d1530"
-      data-light="#ece8f5"
-    >
-      Orchid
-    </button>
-    <button
-      type="button"
-      class="palette-item"
-      data-primary="#46617f"
-      data-secondary="#c08a2e"
-      data-dark="#1a1f26"
-      data-light="#e8ebef"
-    >
-      Slate
-    </button>
-    <button
-      type="button"
-      class="palette-item"
-      data-primary="#00b3ff"
-      data-secondary="#ff2d95"
-      data-dark="#0d1117"
-      data-light="#e6f3fb"
-    >
-      Neon
-    </button>
-    <button
-      type="button"
-      class="palette-item"
-      data-primary="#9a5f23"
-      data-secondary="#3b6ea5"
-      data-dark="#241c15"
-      data-light="#f2eadd"
-    >
-      Sand
-    </button>
-    <button
-      type="button"
-      class="palette-item"
-      data-primary="#12a37a"
-      data-secondary="#e2699b"
-      data-dark="#101f1b"
-      data-light="#e2f1ec"
-    >
-      Mint
-    </button>
-    <button
-      type="button"
-      class="palette-item"
-      data-primary="#4b2fc4"
-      data-secondary="#d9a72e"
-      data-dark="#171331"
-      data-light="#eae8f7"
-    >
-      Royal
-    </button>
-    <button
-      type="button"
-      class="palette-item"
-      data-primary="#9b1b4a"
-      data-secondary="#23a08d"
-      data-dark="#1e1220"
-      data-light="#f3e7ec"
-    >
-      Wine
-    </button>
-    <button
-      type="button"
-      class="palette-item"
-      data-primary="#cc8a04"
-      data-secondary="#2b5f9e"
-      data-dark="#231c0f"
-      data-light="#f3ecdc"
-    >
-      Amber
-    </button>
-    <button
-      type="button"
-      class="palette-item"
-      data-primary="#6da31c"
-      data-secondary="#a3319b"
-      data-dark="#171e10"
-      data-light="#ecf1e1"
-    >
-      Lime
-    </button>
-    <button
-      type="button"
-      class="palette-item"
-      data-primary="#5e2c6e"
-      data-secondary="#c9853a"
-      data-dark="#1c1221"
-      data-light="#ece5f0"
-    >
-      Aubergine
-    </button>
-    <button
-      type="button"
-      class="palette-item"
-      data-primary="#b0543a"
-      data-secondary="#3d7160"
-      data-dark="#231613"
-      data-light="#f3e8e4"
-    >
-      Clay
-    </button>
-  </div>
-
-  <div class="palette-custom">
-    <label class="palette-field">
-      <span>Primary</span>
-      <input type="color" id="palette-primary" value="#1031bb" />
-    </label>
-    <label class="palette-field">
-      <span>Secondary</span>
-      <input type="color" id="palette-secondary" value="#bb5710" />
-    </label>
-  </div>
-
-  <h3 class="palette-heading palette-heading-split">Variants</h3>
-  <p class="palette-hint">
-    Every switch is one class on &lt;html&gt; or one custom property - no build,
-    no rebuild. The box at the bottom is what a project would carry, and it
-    reads back: paste someone else's setup in to see it. The link does the same
-    - Copy link hands someone this page exactly as it stands.
-  </p>
-
-  <div id="variant-list">
-    <p class="variant-group">Shown in the preview</p>
-    <p class="variant-group-hint">
-      Surfaces, controls and type - the section at the bottom of this page.
-    </p>
-
-    <label class="variant-row">
-      <span class="variant-label">
-        Distinctive card corners
-        <small
-          >The arc across two corners that gives every surface its shape. Off
-          leaves an evenly rounded box.</small
-        >
-      </span>
-      <input
-        type="checkbox"
-        checked
-        data-variant-class="mw-corners-even"
-        data-variant-invert
-      />
-    </label>
-
-    <label class="variant-row">
-      <span class="variant-label">
-        Corner radius
-        <small
-          >How round every box is drawn, from hard edges to fully
-          rounded.</small
-        >
-      </span>
-      <select
-        class="mw-select mw-select-sm"
-        data-variant-prop="--mw-radius-scale"
-      >
-        <option value="0">Square</option>
-        <option value="" selected>Default</option>
-        <option value="1.7">Round</option>
-      </select>
-    </label>
-
-    <label class="variant-row">
-      <span class="variant-label">
-        Button shape
-        <small
-          >From cut corners to fully rounded. Form fields keep their own
-          shape.</small
-        >
-      </span>
-      <select class="mw-select mw-select-sm" data-variant-classes>
-        <option value="mw-btn-square">Square</option>
-        <option value="" selected>Default</option>
-        <option value="mw-btn-pill">Pill</option>
-      </select>
-    </label>
-
-    <label class="variant-row">
-      <span class="variant-label">
-        Button style
-        <small
-          >How a filled button is painted. Outline, ghost and link buttons keep
-          their own treatment.</small
-        >
-      </span>
-      <select class="mw-select mw-select-sm" data-variant-classes>
-        <option value="" selected>Default</option>
-        <option value="mw-btn-glass">Glass</option>
-        <option value="mw-btn-tactile">Tactile</option>
-      </select>
-    </label>
-
-    <label class="variant-row">
-      <span class="variant-label">
-        Single accent color
-        <small
-          >Drop the second brand colour - hovers, tints and borders all come
-          from the first one.</small
-        >
-      </span>
-      <input type="checkbox" data-variant-class="mw-accent-single" />
-    </label>
-
-    <label class="variant-row">
-      <span class="variant-label">
-        Flat surfaces
-        <small
-          >Cards and panels lose their shadow and sit flat on the page.
-          Dropdowns and dialogs still float.</small
-        >
-      </span>
-      <input type="checkbox" data-variant-class="mw-shadows-flat" />
-    </label>
-
-    <label class="variant-row">
-      <span class="variant-label">
-        Flush surfaces
-        <small
-          >Cards, panels and the footer drop their own tone and sit on the page
-          colour, separated by their border alone.</small
-        >
-      </span>
-      <input type="checkbox" data-variant-class="mw-surfaces-flush" />
-    </label>
-
-    <label class="variant-row">
-      <span class="variant-label">
-        Uppercase headings
-        <small>Headlines set in capitals with wider letter spacing.</small>
-      </span>
-      <input type="checkbox" data-variant-class="mw-headings-caps" />
-    </label>
-
-    <label class="variant-row">
-      <span class="variant-label">
-        Underlined links
-        <small
-          >Links in running text carry their underline at rest instead of only
-          under the pointer.</small
-        >
-      </span>
-      <input type="checkbox" data-variant-class="mw-links-underline" />
-    </label>
-
-    <label class="variant-row">
-      <span class="variant-label">
-        Density
-        <small
-          >How much padding sits inside cards, panels and controls. Type stays
-          the size it is - use Text size to scale everything together.</small
-        >
-      </span>
-      <select class="mw-select mw-select-sm" data-variant-classes>
-        <option value="mw-density-compact">Compact</option>
-        <option value="" selected>Default</option>
-        <option value="mw-density-roomy">Roomy</option>
-      </select>
-    </label>
-
-    <label class="variant-row">
-      <span class="variant-label">
-        Text size
-        <small
-          >The base the whole scale is built on - type, padding and control
-          heights move together.</small
-        >
-      </span>
-      <select
-        class="mw-select mw-select-sm"
-        data-variant-prop="--mw-root-font-size"
-      >
-        <option value="93.75%">Compact</option>
-        <option value="" selected>Default</option>
-        <option value="106.25%">Large</option>
-      </select>
-    </label>
-
-    <label class="variant-row">
-      <span class="variant-label">
-        Page width
-        <small
-          >How wide the content runs before it stops growing on a large
-          screen.</small
-        >
-      </span>
-      <select
-        class="mw-select mw-select-sm"
-        data-variant-prop="--mw-container-width"
-      >
-        <option value="min(800px, calc(100% - 2 * var(--mw-container-gutter)))">
-          800
-        </option>
-        <option value="min(960px, calc(100% - 2 * var(--mw-container-gutter)))">
-          960
-        </option>
-        <option value="" selected>1200 (default)</option>
-        <option
-          value="min(1440px, calc(100% - 2 * var(--mw-container-gutter)))"
-        >
-          1440
-        </option>
-        <option value="calc(100% - 2 * var(--mw-container-gutter))">
-          Full
-        </option>
-      </select>
-    </label>
-
-    <label class="variant-row">
-      <span class="variant-label">
-        Static on hover
-        <small
-          >Nothing lifts or zooms under the pointer. Colours and borders still
-          respond.</small
-        >
-      </span>
-      <input type="checkbox" data-variant-class="mw-hover-static" />
-    </label>
-
-    <label class="variant-row">
-      <span class="variant-label">
-        Motion tempo
-        <small
-          >How fast every transition and animation runs. Reduced-motion settings
-          still win over this.</small
-        >
-      </span>
-      <select
-        class="mw-select mw-select-sm"
-        data-variant-prop="--mw-motion-scale"
-      >
-        <option value="0.6">Brisk</option>
-        <option value="" selected>Default</option>
-        <option value="1.6">Relaxed</option>
-      </select>
-    </label>
-
-    <p class="variant-group">Elsewhere on the page</p>
-    <p class="variant-group-hint">The frame around it. Scroll to see these.</p>
-
-    <label class="variant-row">
-      <span class="variant-label">
-        Sticky header
-        <small
-          >The bar stays put from the top instead of sliding in over the first
-          screen.</small
-        >
-      </span>
-      <input
-        type="checkbox"
-        data-variant-class="mw-header-reveal"
-        data-variant-target=".mw-header"
-        data-variant-invert
-      />
-    </label>
-
-    <label class="variant-row">
-      <span class="variant-label">
-        Alternating sections
-        <small>The fine diagonal hatch behind every second section.</small>
-      </span>
-      <input
-        type="checkbox"
-        checked
-        data-variant-class="mw-sections-plain"
-        data-variant-invert
-      />
-    </label>
-
-    <label class="variant-row">
-      <span class="variant-label">
-        Scroll reveal
-        <small
-          >Cards and sections rise into place as they scroll in. Off has
-          everything sit where it lands.</small
-        >
-      </span>
-      <input
-        type="checkbox"
-        checked
-        data-variant-class="mw-scroll-static"
-        data-variant-invert
-      />
-    </label>
-
-    <label class="variant-row">
-      <span class="variant-label">
-        Section spacing
-        <small
-          >How much air sits above and below each section of the page.</small
-        >
-      </span>
-      <select
-        class="mw-select mw-select-sm"
-        data-variant-prop="--mw-section-padding-block"
-      >
-        <option value="var(--mw-section-padding-compact)">Compact</option>
-        <option value="" selected>Default</option>
-        <option value="var(--mw-section-padding-airy)">Airy</option>
-        <option value="var(--mw-section-padding-fluid)">
-          Fluid - grows with the screen
-        </option>
-      </select>
-    </label>
-  </div>
-
-  <div class="variant-setup-head">
-    <label class="variant-setup-label" for="variant-setup">
-      Setup - editable, paste one in to load it
-    </label>
-    <button type="button" class="variant-share" id="variant-share">
-      <i class="fas fa-link"></i>
-      <span id="variant-share-label">Copy link</span>
-    </button>
-  </div>
-  <textarea
-    class="variant-setup"
-    id="variant-setup"
-    rows="4"
-    spellcheck="false"
-    autocapitalize="off"
-    autocorrect="off"
-  ></textarea>
-</div>

package/src/partials/panels-container.html

@@ -1,126 +0,0 @@
-<h3 class="mw-section-subtitle">Panels</h3>
-<p class="mw-text-muted mw-text-measure">
-  A card whose header and footer are part of the frame rather than the content.
-  <code>mw-panel-primary</code> and <code>mw-panel-secondary</code> fill the
-  header. The body scrolls on its own, which is what the max-height variants are
-  for: <code>mw-panel-max-height-sm</code>, <code>-md</code> and
-  <code>-lg</code> cap the panel at 300, 500 and 700px.
-  <code>mw-panel-scrollable</code> is the older name for md.
-</p>
-
-<div class="mw-grid-2-lg mw-mb-6">
-  <div>
-    <div class="mw-segmented mw-mb-4" data-modifier-demo="panel-color-demo">
-      <button
-        type="button"
-        class="mw-segmented-item mw-active"
-        data-modifier=""
-      >
-        Default
-      </button>
-      <button
-        type="button"
-        class="mw-segmented-item"
-        data-modifier="mw-panel-primary"
-      >
-        Primary
-      </button>
-      <button
-        type="button"
-        class="mw-segmented-item"
-        data-modifier="mw-panel-secondary"
-      >
-        Secondary
-      </button>
-    </div>
-    <div class="mw-panel" id="panel-color-demo">
-      <h4 class="mw-panel-header">Panel</h4>
-      <div class="mw-panel-body">
-        <p>
-          This is a panel with header, body, and footer sections. Panels are
-          useful for grouping related content, including forms, tables, or other
-          components.
-        </p>
-      </div>
-      <div class="mw-panel-footer">
-        <button type="button" class="mw-btn mw-btn-outline">Cancel</button>
-        <button type="button" class="mw-btn mw-btn-primary">Save</button>
-      </div>
-    </div>
-  </div>
-
-  <div>
-    <div class="mw-segmented mw-mb-4" data-modifier-demo="panel-height-demo">
-      <button
-        type="button"
-        class="mw-segmented-item"
-        data-modifier="mw-panel-max-height-sm"
-      >
-        300px
-      </button>
-      <button
-        type="button"
-        class="mw-segmented-item mw-active"
-        data-modifier="mw-panel-max-height-md"
-      >
-        500px
-      </button>
-      <button
-        type="button"
-        class="mw-segmented-item"
-        data-modifier="mw-panel-max-height-lg"
-      >
-        700px
-      </button>
-    </div>
-    <div class="mw-panel mw-panel-max-height-md" id="panel-height-demo">
-      <h4 class="mw-panel-header">Scrollable Panel</h4>
-      <div class="mw-panel-body">
-        <p>
-          The body scrolls once the content outgrows the cap. Header and footer
-          stay where they are.
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui
-          mauris.
-        </p>
-        <p>
-          Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu
-          tellus.
-        </p>
-        <p>
-          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
-          posuere cubilia Curae.
-        </p>
-        <p>
-          Pellentesque habitant morbi tristique senectus et netus et malesuada
-          fames ac turpis egestas.
-        </p>
-        <p>
-          Ut aliquam sollicitudin iaculis. Praesent ac semper ante. Interdum et
-          malesuada fames ac ante ipsum primis in faucibus.
-        </p>
-        <p>
-          Mauris egestas elit vel nunc maximus, in aliquam magna vehicula. Cras
-          vitae sapien a erat facilisis faucibus.
-        </p>
-        <p>
-          Donec dignissim, odio ac imperdiet luctus, elit lorem eleifend massa,
-          sed efficitur turpis velit vel odio.
-        </p>
-        <p>
-          Suspendisse potenti. Nullam gravida fermentum turpis eu ultrices.
-          Curabitur imperdiet imperdiet lacus.
-        </p>
-        <p>
-          Praesent ac semper ante. Interdum et malesuada fames ac ante ipsum
-          primis in faucibus.
-        </p>
-      </div>
-      <div class="mw-panel-footer">
-        <button type="button" class="mw-btn mw-btn-outline">Cancel</button>
-        <button type="button" class="mw-btn mw-btn-primary">Save</button>
-      </div>
-    </div>
-  </div>
-</div>