maverick-wave 5.28.0 → 5.29.0

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

@@ -28,7 +28,23 @@
 
   <div>
     <h4 class="mw-mb-3">Sliding Border List</h4>
-    <div class="mw-item-list-slide mw-mb-6">
+    <div class="mw-segmented mw-mb-3" data-modifier-demo="slide-list-demo">
+      <button
+        type="button"
+        class="mw-segmented-item mw-active"
+        data-modifier=""
+      >
+        Primary
+      </button>
+      <button
+        type="button"
+        class="mw-segmented-item"
+        data-modifier="mw-item-list-slide-secondary"
+      >
+        Secondary
+      </button>
+    </div>
+    <div class="mw-item-list-slide mw-mb-6" id="slide-list-demo">
       <div>
         <strong>Dashboard Overview</strong>
         <p class="mw-text-sm mw-text-muted mw-mb-0">
@@ -50,24 +66,6 @@
     </div>
   </div>
 
-  <div>
-    <h4 class="mw-mb-3">Sliding Border List - Secondary</h4>
-    <div class="mw-item-list-slide mw-item-list-slide-secondary mw-mb-6">
-      <div>
-        <strong>Dashboard Overview</strong>
-        <p class="mw-text-sm mw-text-muted mw-mb-0">
-          Monitor your key metrics and performance indicators.
-        </p>
-      </div>
-      <div>
-        <strong>Analytics Reports</strong>
-        <p class="mw-text-sm mw-text-muted mw-mb-0">
-          Detailed insights into your data and user behavior.
-        </p>
-      </div>
-    </div>
-  </div>
-
   <div>
     <h4 class="mw-mb-3">Compact List</h4>
     <div class="mw-item-list-compact mw-mb-6">
@@ -97,10 +95,33 @@
 </div>
 
 <!-- New Checkbox Lists Section -->
-<div class="mw-grid-3-lg">
+<div class="mw-grid-2-lg">
   <div>
-    <h4 class="mw-mb-3">Basic Checkbox List</h4>
-    <ul class="mw-item-list-checkbox">
+    <h4 class="mw-mb-3">Checkbox List</h4>
+    <div class="mw-segmented mw-mb-3" data-modifier-demo="checkbox-list-demo">
+      <button
+        type="button"
+        class="mw-segmented-item"
+        data-modifier="mw-item-list-checkbox-compact"
+      >
+        Compact
+      </button>
+      <button
+        type="button"
+        class="mw-segmented-item mw-active"
+        data-modifier=""
+      >
+        Default
+      </button>
+      <button
+        type="button"
+        class="mw-segmented-item"
+        data-modifier="mw-item-list-checkbox-large"
+      >
+        Large
+      </button>
+    </div>
+    <ul class="mw-item-list-checkbox" id="checkbox-list-demo">
       <li>
         <label class="mw-checkbox">
           <input type="checkbox" />
@@ -137,40 +158,6 @@
     </ul>
   </div>
 
-  <div>
-    <h4 class="mw-mb-3">Large Checkbox List</h4>
-    <ul class="mw-item-list-checkbox mw-item-list-checkbox-large mw-mb-6">
-      <li>
-        <label class="mw-checkbox mw-checkbox-lg">
-          <input type="checkbox" />
-          <span class="mw-checkbox-box"></span>
-          <span class="mw-checkbox-label">🎯 Project Alpha</span>
-        </label>
-      </li>
-      <li>
-        <label class="mw-checkbox mw-checkbox-lg">
-          <input type="checkbox" checked />
-          <span class="mw-checkbox-box"></span>
-          <span class="mw-checkbox-label">🚀 Project Beta</span>
-        </label>
-      </li>
-      <li class="mw-selected">
-        <label class="mw-checkbox mw-checkbox-lg">
-          <input type="checkbox" checked />
-          <span class="mw-checkbox-box"></span>
-          <span class="mw-checkbox-label">⭐ Project Gamma</span>
-        </label>
-      </li>
-      <li>
-        <label class="mw-checkbox mw-checkbox-lg">
-          <input type="checkbox" />
-          <span class="mw-checkbox-box"></span>
-          <span class="mw-checkbox-label">🔥 Project Delta</span>
-        </label>
-      </li>
-    </ul>
-  </div>
-
   <div>
     <h4 class="mw-mb-3">Secondary Checkbox List</h4>
     <ul class="mw-item-list-checkbox mw-item-list-checkbox-secondary mw-mb-6">
@@ -321,8 +308,43 @@
 
 <div class="mw-grid-1 mw-mb-4">
   <div>
-    <h4 class="mw-mb-3">Basic Scrollable List</h4>
-    <div class="mw-item-list-scroll mw-mb-4">
+    <h4 class="mw-mb-3">Scrollable List</h4>
+    <p class="mw-text-muted">
+      <code>mw-item-list-scroll-sm</code>, <code>-lg</code> and
+      <code>-xl</code> change the height. Any other height is a
+      <code>style="max-height: 160px"</code> on the list.
+    </p>
+    <div class="mw-segmented mw-mb-3" data-modifier-demo="scroll-list-demo">
+      <button
+        type="button"
+        class="mw-segmented-item"
+        data-modifier="mw-item-list-scroll-sm"
+      >
+        200px
+      </button>
+      <button
+        type="button"
+        class="mw-segmented-item mw-active"
+        data-modifier=""
+      >
+        300px
+      </button>
+      <button
+        type="button"
+        class="mw-segmented-item"
+        data-modifier="mw-item-list-scroll-lg"
+      >
+        400px
+      </button>
+      <button
+        type="button"
+        class="mw-segmented-item"
+        data-modifier="mw-item-list-scroll-xl"
+      >
+        500px
+      </button>
+    </div>
+    <div class="mw-item-list-scroll mw-mb-4" id="scroll-list-demo">
       <div>Dashboard Overview</div>
       <div>User Management</div>
       <div>Analytics & Reports</div>
@@ -344,75 +366,3 @@
     </div>
   </div>
 </div>
-
-<div class="mw-grid-4-lg">
-  <div>
-    <h4 class="mw-mb-3">Small Height</h4>
-    <div class="mw-item-list-scroll mw-item-list-scroll-sm mw-mb-4">
-      <div>Quick Action 1</div>
-      <div>Quick Action 2</div>
-      <div>Quick Action 3</div>
-      <div>Quick Action 4</div>
-      <div>Quick Action 5</div>
-      <div>Quick Action 6</div>
-      <div>Quick Action 7</div>
-      <div>Quick Action 8</div>
-      <div>Quick Action 9</div>
-      <div>Quick Action 10</div>
-    </div>
-  </div>
-  <div>
-    <h4 class="mw-mb-3">Custom Height (160px)</h4>
-    <div class="mw-item-list-scroll mw-mb-6" style="max-height: 160px">
-      <div>Custom sized container</div>
-      <div>Flexible height control</div>
-      <div>Adaptable to needs</div>
-      <div>Perfect for any use case</div>
-      <div>Responsive design</div>
-      <div>Scalable solution</div>
-      <div>Versatile component</div>
-    </div>
-  </div>
-  <div>
-    <h4 class="mw-mb-3">Large Height</h4>
-    <div class="mw-item-list-scroll mw-item-list-scroll-lg mw-mb-4">
-      <div>Quick Action 1</div>
-      <div>Quick Action 2</div>
-      <div>Quick Action 3</div>
-      <div>Quick Action 4</div>
-      <div>Quick Action 5</div>
-      <div>Quick Action 6</div>
-      <div>Quick Action 7</div>
-      <div>Quick Action 8</div>
-      <div>Quick Action 9</div>
-      <div>Quick Action 10</div>
-      <div>Quick Action 11</div>
-      <div>Quick Action 12</div>
-      <div>Quick Action 13</div>
-      <div>Quick Action 14</div>
-    </div>
-  </div>
-  <div>
-    <h4 class="mw-mb-3">Xtra Large Height</h4>
-    <div class="mw-item-list-scroll mw-item-list-scroll-xl mw-mb-4">
-      <div>Quick Action 1</div>
-      <div>Quick Action 2</div>
-      <div>Quick Action 3</div>
-      <div>Quick Action 4</div>
-      <div>Quick Action 5</div>
-      <div>Quick Action 6</div>
-      <div>Quick Action 7</div>
-      <div>Quick Action 8</div>
-      <div>Quick Action 9</div>
-      <div>Quick Action 10</div>
-      <div>Quick Action 11</div>
-      <div>Quick Action 12</div>
-      <div>Quick Action 13</div>
-      <div>Quick Action 14</div>
-      <div>Quick Action 15</div>
-      <div>Quick Action 16</div>
-      <div>Quick Action 17</div>
-      <div>Quick Action 18</div>
-    </div>
-  </div>
-</div>

package/src/partials/kanban-container.html

@@ -4,14 +4,25 @@
   status, a ticket a plain <code>mw-card</code> with
   <code>mw-kanban-card</code> on top. The priority is the regular
   <code>mw-card-ribbon</code> and brings its colour along on its own.
+  <code>mw-kanban-compact</code> tightens the padding and clamps the description
+  to two lines instead of four - for boards with many lanes or a sidebar next to
+  them.
 </p>
 
-<h4 class="mw-mb-2">Default Board</h4>
-<div
-  class="mw-kanban"
-  data-kanban-prefix="MW"
-  style="--mw-kanban-column-min-height: 390px"
->
+<div class="mw-segmented mw-mb-5" data-modifier-demo="kanban-demo">
+  <button type="button" class="mw-segmented-item mw-active" data-modifier="">
+    Default
+  </button>
+  <button
+    type="button"
+    class="mw-segmented-item"
+    data-modifier="mw-kanban-compact"
+  >
+    Compact
+  </button>
+</div>
+
+<div class="mw-kanban" id="kanban-demo" data-kanban-prefix="MW">
   <div class="mw-kanban-column">
     <div class="mw-kanban-column-header">
       <h5 class="mw-kanban-title">Backlog</h5>
@@ -446,291 +457,3 @@
     </article>
   </template>
 </div>
-
-<h4 class="mw-mb-2 mw-mt-8">Compact Board</h4>
-<p class="mw-text-muted">
-  <code>mw-kanban-compact</code> tightens the padding and clamps the description
-  to two lines instead of four - for boards with many lanes or a sidebar next to
-  them. Same markup otherwise.
-</p>
-
-<div
-  class="mw-kanban mw-kanban-compact"
-  data-kanban-prefix="OPS"
-  style="--mw-kanban-column-min-height: 210px"
->
-  <div class="mw-kanban-column">
-    <div class="mw-kanban-column-header">
-      <h5 class="mw-kanban-title">Triage</h5>
-      <span class="mw-kanban-count">0</span>
-      <button
-        type="button"
-        class="mw-btn mw-btn-secondary mw-btn-sm mw-kanban-add"
-        aria-label="Add ticket to Triage"
-      >
-        <i class="fas fa-plus"></i>
-      </button>
-    </div>
-
-    <div class="mw-kanban-column-body">
-      <article class="mw-card mw-kanban-card">
-        <div class="mw-card-ribbon mw-card-addon-danger">High</div>
-        <p class="mw-kanban-card-title">Certificate expires in four days</p>
-        <p class="mw-kanban-card-text">
-          Renewal is automated on staging only, production still needs a manual
-          run.
-        </p>
-        <div class="mw-kanban-card-footer">
-          <span class="mw-kanban-card-id">OPS-42</span>
-          <div class="mw-kanban-card-actions">
-            <div class="mw-avatar mw-avatar-xs mw-avatar-initials">ops</div>
-            <button
-              type="button"
-              class="mw-kanban-action"
-              data-kanban-move="-1"
-              aria-label="Move OPS-42 one lane left"
-            >
-              <i class="fas fa-chevron-left"></i>
-            </button>
-            <button
-              type="button"
-              class="mw-kanban-action"
-              data-kanban-move="1"
-              aria-label="Move OPS-42 one lane right"
-            >
-              <i class="fas fa-chevron-right"></i>
-            </button>
-            <button
-              type="button"
-              class="mw-kanban-action mw-kanban-edit"
-              aria-label="Edit OPS-42"
-            >
-              <i class="fas fa-pen"></i>
-            </button>
-            <button
-              type="button"
-              class="mw-kanban-action mw-kanban-action-danger mw-kanban-delete"
-              aria-label="Delete OPS-42"
-            >
-              <i class="fas fa-trash"></i>
-            </button>
-          </div>
-        </div>
-      </article>
-
-      <div class="mw-kanban-empty">No tickets</div>
-    </div>
-  </div>
-
-  <div class="mw-kanban-column">
-    <div class="mw-kanban-column-header">
-      <h5 class="mw-kanban-title">Scheduled</h5>
-      <span class="mw-kanban-count">0</span>
-      <button
-        type="button"
-        class="mw-btn mw-btn-secondary mw-btn-sm mw-kanban-add"
-        aria-label="Add ticket to Scheduled"
-      >
-        <i class="fas fa-plus"></i>
-      </button>
-    </div>
-
-    <div class="mw-kanban-column-body">
-      <article class="mw-card mw-kanban-card">
-        <div class="mw-card-ribbon mw-card-addon-warning">Medium</div>
-        <p class="mw-kanban-card-title">Rotate database credentials</p>
-        <p class="mw-kanban-card-text">
-          Window is Friday evening, the rollout script is already prepared.
-        </p>
-        <div class="mw-kanban-card-footer">
-          <span class="mw-kanban-card-id">OPS-41</span>
-          <div class="mw-kanban-card-actions">
-            <div class="mw-avatar mw-avatar-xs mw-avatar-initials">mw</div>
-            <button
-              type="button"
-              class="mw-kanban-action"
-              data-kanban-move="-1"
-              aria-label="Move OPS-41 one lane left"
-            >
-              <i class="fas fa-chevron-left"></i>
-            </button>
-            <button
-              type="button"
-              class="mw-kanban-action"
-              data-kanban-move="1"
-              aria-label="Move OPS-41 one lane right"
-            >
-              <i class="fas fa-chevron-right"></i>
-            </button>
-            <button
-              type="button"
-              class="mw-kanban-action mw-kanban-edit"
-              aria-label="Edit OPS-41"
-            >
-              <i class="fas fa-pen"></i>
-            </button>
-            <button
-              type="button"
-              class="mw-kanban-action mw-kanban-action-danger mw-kanban-delete"
-              aria-label="Delete OPS-41"
-            >
-              <i class="fas fa-trash"></i>
-            </button>
-          </div>
-        </div>
-      </article>
-
-      <div class="mw-kanban-empty">No tickets</div>
-    </div>
-  </div>
-
-  <div class="mw-kanban-column">
-    <div class="mw-kanban-column-header">
-      <h5 class="mw-kanban-title">Resolved</h5>
-      <span class="mw-kanban-count">0</span>
-      <button
-        type="button"
-        class="mw-btn mw-btn-secondary mw-btn-sm mw-kanban-add"
-        aria-label="Add ticket to Resolved"
-      >
-        <i class="fas fa-plus"></i>
-      </button>
-    </div>
-
-    <div class="mw-kanban-column-body">
-      <article class="mw-card mw-kanban-card">
-        <div class="mw-card-ribbon mw-card-addon-info">Low</div>
-        <p class="mw-kanban-card-title">Log shipping backlog drained</p>
-        <p class="mw-kanban-card-text">
-          Buffer size was the bottleneck, not the network.
-        </p>
-        <div class="mw-kanban-card-footer">
-          <span class="mw-kanban-card-id">OPS-40</span>
-          <div class="mw-kanban-card-actions">
-            <div class="mw-avatar mw-avatar-xs mw-avatar-initials">ops</div>
-            <button
-              type="button"
-              class="mw-kanban-action"
-              data-kanban-move="-1"
-              aria-label="Move OPS-40 one lane left"
-            >
-              <i class="fas fa-chevron-left"></i>
-            </button>
-            <button
-              type="button"
-              class="mw-kanban-action"
-              data-kanban-move="1"
-              aria-label="Move OPS-40 one lane right"
-            >
-              <i class="fas fa-chevron-right"></i>
-            </button>
-            <button
-              type="button"
-              class="mw-kanban-action mw-kanban-edit"
-              aria-label="Edit OPS-40"
-            >
-              <i class="fas fa-pen"></i>
-            </button>
-            <button
-              type="button"
-              class="mw-kanban-action mw-kanban-action-danger mw-kanban-delete"
-              aria-label="Delete OPS-40"
-            >
-              <i class="fas fa-trash"></i>
-            </button>
-          </div>
-        </div>
-      </article>
-
-      <div class="mw-kanban-empty">No tickets</div>
-    </div>
-  </div>
-
-  <form class="mw-kanban-composer">
-    <input
-      type="text"
-      class="mw-input mw-input-sm mw-kanban-composer-title"
-      placeholder="What needs to be done?"
-      aria-label="Ticket title"
-    />
-    <textarea
-      class="mw-textarea mw-kanban-composer-text"
-      rows="2"
-      placeholder="Details (optional)"
-      aria-label="Ticket description"
-    ></textarea>
-    <div class="mw-kanban-composer-row">
-      <select
-        class="mw-select mw-select-sm mw-kanban-composer-priority"
-        aria-label="Priority"
-      >
-        <option value="danger">High</option>
-        <option value="warning">Medium</option>
-        <option value="info">Low</option>
-        <option value="" selected>No priority</option>
-      </select>
-      <select
-        class="mw-select mw-select-sm mw-kanban-composer-assignee"
-        aria-label="Assignee"
-      >
-        <option value="" selected>Unassigned</option>
-        <option value="ops">OPS</option>
-        <option value="mw">MW</option>
-      </select>
-    </div>
-    <div class="mw-kanban-composer-actions">
-      <button
-        type="button"
-        class="mw-btn mw-btn-outline mw-btn-sm mw-kanban-composer-cancel"
-      >
-        Cancel
-      </button>
-      <button type="submit" class="mw-btn mw-btn-primary mw-btn-sm">
-        Save
-      </button>
-    </div>
-  </form>
-
-  <template class="mw-kanban-card-template">
-    <article class="mw-card mw-kanban-card">
-      <p class="mw-kanban-card-title">Title</p>
-      <p class="mw-kanban-card-text">Text</p>
-      <div class="mw-kanban-card-footer">
-        <span class="mw-kanban-card-id">OPS-0</span>
-        <div class="mw-kanban-card-actions">
-          <div class="mw-avatar mw-avatar-xs mw-avatar-initials">me</div>
-          <button
-            type="button"
-            class="mw-kanban-action"
-            data-kanban-move="-1"
-            aria-label="Move OPS-0 one lane left"
-          >
-            <i class="fas fa-chevron-left"></i>
-          </button>
-          <button
-            type="button"
-            class="mw-kanban-action"
-            data-kanban-move="1"
-            aria-label="Move OPS-0 one lane right"
-          >
-            <i class="fas fa-chevron-right"></i>
-          </button>
-          <button
-            type="button"
-            class="mw-kanban-action mw-kanban-edit"
-            aria-label="Edit OPS-0"
-          >
-            <i class="fas fa-pen"></i>
-          </button>
-          <button
-            type="button"
-            class="mw-kanban-action mw-kanban-action-danger mw-kanban-delete"
-            aria-label="Delete OPS-0"
-          >
-            <i class="fas fa-trash"></i>
-          </button>
-        </div>
-      </div>
-    </article>
-  </template>
-</div>