@ktfth/stickjs 3.0.0

package/stick-ui/components/data-table.html

@@ -0,0 +1,191 @@
+<!-- Stick UI: Data Table
+     Requires: stick.js + stick-ui/plugins/data-table.js
+     Optional: stick-ui.css (provides .stk-table-* styles)
+     Features: sort (click headers), filter (type in search), pagination (prev/next)
+-->
+<div class="stk-table-wrapper">
+
+  <!-- Toolbar: filter + page size selector -->
+  <div class="stk-table-toolbar">
+    <input
+      class="stk-table-filter"
+      type="text"
+      placeholder="Filter rows..."
+      aria-label="Filter table"
+      data-stick="input:table-filter:.stk-table"
+    >
+    <label style="margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:var(--stk-text-sm); color:var(--stk-muted);">
+      Rows
+      <select
+        class="stk-table-page-size"
+        data-stick="change:table-page-size:.stk-table"
+      >
+        <option value="5" selected>5</option>
+        <option value="10">10</option>
+        <option value="20">20</option>
+      </select>
+    </label>
+  </div>
+
+  <!-- Table -->
+  <table class="stk-table" data-stk-paginate>
+    <thead>
+      <tr>
+        <th data-stk-sortable data-stick="click:table-sort:0">Name</th>
+        <th>Email</th>
+        <th data-stk-sortable data-stick="click:table-sort:2">Role</th>
+        <th>Status</th>
+        <th data-stk-sortable data-stick="click:table-sort:4">Joined</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Alice Johnson</td>
+        <td>alice@example.com</td>
+        <td>Admin</td>
+        <td>Active</td>
+        <td data-sort-value="2023-01-15">Jan 15, 2023</td>
+      </tr>
+      <tr>
+        <td>Bob Smith</td>
+        <td>bob@example.com</td>
+        <td>Editor</td>
+        <td>Active</td>
+        <td data-sort-value="2023-02-20">Feb 20, 2023</td>
+      </tr>
+      <tr>
+        <td>Carol Williams</td>
+        <td>carol@example.com</td>
+        <td>Viewer</td>
+        <td>Inactive</td>
+        <td data-sort-value="2023-03-10">Mar 10, 2023</td>
+      </tr>
+      <tr>
+        <td>Dave Brown</td>
+        <td>dave@example.com</td>
+        <td>Editor</td>
+        <td>Active</td>
+        <td data-sort-value="2023-04-05">Apr 5, 2023</td>
+      </tr>
+      <tr>
+        <td>Eve Davis</td>
+        <td>eve@example.com</td>
+        <td>Admin</td>
+        <td>Active</td>
+        <td data-sort-value="2023-05-18">May 18, 2023</td>
+      </tr>
+      <tr>
+        <td>Frank Miller</td>
+        <td>frank@example.com</td>
+        <td>Viewer</td>
+        <td>Inactive</td>
+        <td data-sort-value="2023-06-22">Jun 22, 2023</td>
+      </tr>
+      <tr>
+        <td>Grace Wilson</td>
+        <td>grace@example.com</td>
+        <td>Editor</td>
+        <td>Active</td>
+        <td data-sort-value="2023-07-01">Jul 1, 2023</td>
+      </tr>
+      <tr>
+        <td>Hank Moore</td>
+        <td>hank@example.com</td>
+        <td>Viewer</td>
+        <td>Active</td>
+        <td data-sort-value="2023-08-14">Aug 14, 2023</td>
+      </tr>
+      <tr>
+        <td>Ivy Taylor</td>
+        <td>ivy@example.com</td>
+        <td>Admin</td>
+        <td>Active</td>
+        <td data-sort-value="2023-09-30">Sep 30, 2023</td>
+      </tr>
+      <tr>
+        <td>Jack Anderson</td>
+        <td>jack@example.com</td>
+        <td>Editor</td>
+        <td>Inactive</td>
+        <td data-sort-value="2023-10-12">Oct 12, 2023</td>
+      </tr>
+      <tr>
+        <td>Karen Thomas</td>
+        <td>karen@example.com</td>
+        <td>Viewer</td>
+        <td>Active</td>
+        <td data-sort-value="2023-11-08">Nov 8, 2023</td>
+      </tr>
+      <tr>
+        <td>Leo Martinez</td>
+        <td>leo@example.com</td>
+        <td>Editor</td>
+        <td>Active</td>
+        <td data-sort-value="2023-12-01">Dec 1, 2023</td>
+      </tr>
+      <tr>
+        <td>Mia Jackson</td>
+        <td>mia@example.com</td>
+        <td>Admin</td>
+        <td>Inactive</td>
+        <td data-sort-value="2024-01-20">Jan 20, 2024</td>
+      </tr>
+      <tr>
+        <td>Noah White</td>
+        <td>noah@example.com</td>
+        <td>Viewer</td>
+        <td>Active</td>
+        <td data-sort-value="2024-02-14">Feb 14, 2024</td>
+      </tr>
+      <tr>
+        <td>Olivia Harris</td>
+        <td>olivia@example.com</td>
+        <td>Editor</td>
+        <td>Active</td>
+        <td data-sort-value="2024-03-05">Mar 5, 2024</td>
+      </tr>
+      <tr>
+        <td>Paul Clark</td>
+        <td>paul@example.com</td>
+        <td>Viewer</td>
+        <td>Active</td>
+        <td data-sort-value="2024-04-11">Apr 11, 2024</td>
+      </tr>
+      <tr>
+        <td>Quinn Lewis</td>
+        <td>quinn@example.com</td>
+        <td>Admin</td>
+        <td>Inactive</td>
+        <td data-sort-value="2024-05-28">May 28, 2024</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <!-- Pagination (auto-managed by the plugin, but you can also place manually) -->
+  <div class="stk-table-pagination">
+    <span class="stk-table-page-info" aria-live="polite" role="status"></span>
+    <span class="stk-table-page-nav">
+      <button
+        class="stk-table-page-btn"
+        type="button"
+        data-stk-page="prev"
+        data-stick="click:table-paginate:prev"
+      >&lsaquo; Prev</button>
+      <span class="stk-table-page-num"></span>
+      <button
+        class="stk-table-page-btn"
+        type="button"
+        data-stk-page="next"
+        data-stick="click:table-paginate:next"
+      >Next &rsaquo;</button>
+    </span>
+  </div>
+
+</div>
+
+<script>
+  // Initialise after DOM is ready
+  document.addEventListener('DOMContentLoaded', function () {
+    stkDataTable.init(document.querySelector('.stk-table'), { pageSize: 5 });
+  });
+</script>

package/stick-ui/components/dialog.html

@@ -0,0 +1,23 @@
+<!-- Stick UI: Dialog (Modal)
+     Requires: stick.js
+     Optional: stick-ui.css
+     Uses native <dialog> — no plugin needed.
+-->
+<button class="stk-btn" data-stick="click:show-modal:" data-stick-target="#my-dialog">
+  Open dialog
+</button>
+<dialog id="my-dialog" class="stk-dialog">
+  <div class="stk-dialog-header">
+    <h3 class="stk-dialog-title">Dialog title</h3>
+    <button class="stk-dialog-close"
+            data-stick="click:close-modal:" data-stick-target="closest:dialog"
+            aria-label="Close">&times;</button>
+  </div>
+  <div class="stk-dialog-body">
+    <p>Dialog content goes here.</p>
+  </div>
+  <div class="stk-dialog-footer">
+    <button class="stk-btn" data-stick="click:close-modal:" data-stick-target="closest:dialog">Cancel</button>
+    <button class="stk-btn stk-btn-primary" data-stick="click:close-modal:confirmed" data-stick-target="closest:dialog">Confirm</button>
+  </div>
+</dialog>

package/stick-ui/components/dropdown.html

@@ -0,0 +1,16 @@
+<!-- Stick UI: Dropdown
+     Requires: stick.js + stick-ui/plugins/dropdown.js
+     Optional: stick-ui.css
+-->
+<div class="stk-dropdown">
+  <button class="stk-btn stk-dropdown-trigger" aria-expanded="false" aria-haspopup="true"
+          data-stick="click:dropdown" data-stick-target="next">
+    Options
+  </button>
+  <div class="stk-dropdown-menu" role="menu" hidden>
+    <button class="stk-dropdown-item" role="menuitem">Edit</button>
+    <button class="stk-dropdown-item" role="menuitem">Duplicate</button>
+    <div class="stk-dropdown-separator"></div>
+    <button class="stk-dropdown-item stk-dropdown-item-danger" role="menuitem">Delete</button>
+  </div>
+</div>

package/stick-ui/components/notification.html

@@ -0,0 +1,11 @@
+<!-- Stick UI: Notification Banner
+     Requires: stick.js
+     Optional: stick-ui.css
+     Variants: stk-notification-info / success / warning / error
+-->
+<div class="stk-notification stk-notification-info" data-stick-transition="fade">
+  <span class="stk-notification-content">This is an informational message.</span>
+  <button class="stk-notification-dismiss"
+          data-stick="click:hide:" data-stick-target="parent"
+          aria-label="Dismiss">&times;</button>
+</div>

package/stick-ui/components/skeleton.html

@@ -0,0 +1,11 @@
+<!-- Stick UI: Loading Skeleton
+     Requires: stick-ui.css (CSS only — no stick.js needed)
+     Use hidden attribute to hide when content loads.
+     Combine with data-stick="ready:hide:" or fetch loading states.
+-->
+<div>
+  <div class="stk-skeleton stk-skeleton-heading"></div>
+  <div class="stk-skeleton stk-skeleton-text" style="width:90%"></div>
+  <div class="stk-skeleton stk-skeleton-text" style="width:75%"></div>
+  <div class="stk-skeleton stk-skeleton-text" style="width:85%"></div>
+</div>

package/stick-ui/components/stepper.html

@@ -0,0 +1,102 @@
+<!-- Stick UI: Stepper / Wizard
+     Requires: stick.js + stick-ui/plugins/stepper.js
+     Optional: stick-ui/stick-ui.css
+-->
+<div id="signup-wizard" class="stk-stepper" data-stk-stepper
+     role="group" aria-label="Sign-up wizard">
+
+  <!-- ── Step indicators ─────────────────────────── -->
+  <div class="stk-stepper-header">
+    <div class="stk-stepper-indicator" data-stk-step-indicator aria-current="step">
+      1
+      <span class="stk-stepper-indicator-label">Personal Info</span>
+    </div>
+    <div class="stk-stepper-connector"></div>
+    <div class="stk-stepper-indicator" data-stk-step-indicator>
+      2
+      <span class="stk-stepper-indicator-label">Preferences</span>
+    </div>
+    <div class="stk-stepper-connector"></div>
+    <div class="stk-stepper-indicator" data-stk-step-indicator>
+      3
+      <span class="stk-stepper-indicator-label">Review</span>
+    </div>
+  </div>
+
+  <!-- ── Step panels ─────────────────────────────── -->
+  <div class="stk-stepper-body">
+
+    <!-- Step 1: Personal Info -->
+    <div class="stk-stepper-step" data-stk-step aria-label="Step 1 — Personal Info">
+      <div style="display:flex; flex-direction:column; gap:var(--stk-space-4); max-width:400px;">
+        <div>
+          <label class="stk-label" for="wiz-name">Full Name</label>
+          <input id="wiz-name" class="stk-input" type="text"
+                 placeholder="Jane Doe" required>
+        </div>
+        <div>
+          <label class="stk-label" for="wiz-email">Email</label>
+          <input id="wiz-email" class="stk-input" type="email"
+                 placeholder="jane@example.com" required>
+        </div>
+      </div>
+    </div>
+
+    <!-- Step 2: Preferences -->
+    <div class="stk-stepper-step" data-stk-step hidden aria-label="Step 2 — Preferences">
+      <div style="display:flex; flex-direction:column; gap:var(--stk-space-3); max-width:400px;">
+        <p style="margin:0; font-size:var(--stk-text-sm); color:var(--stk-fg); font-weight:500;">
+          How would you like to be contacted?
+        </p>
+        <label style="display:flex; align-items:center; gap:var(--stk-space-2); font-size:var(--stk-text-sm); color:var(--stk-fg);">
+          <input type="checkbox" name="contact" value="email"> Email updates
+        </label>
+        <label style="display:flex; align-items:center; gap:var(--stk-space-2); font-size:var(--stk-text-sm); color:var(--stk-fg);">
+          <input type="checkbox" name="contact" value="sms"> SMS notifications
+        </label>
+        <p style="margin:var(--stk-space-3) 0 0; font-size:var(--stk-text-sm); color:var(--stk-fg); font-weight:500;">
+          Preferred theme
+        </p>
+        <label style="display:flex; align-items:center; gap:var(--stk-space-2); font-size:var(--stk-text-sm); color:var(--stk-fg);">
+          <input type="radio" name="theme" value="light" checked> Light
+        </label>
+        <label style="display:flex; align-items:center; gap:var(--stk-space-2); font-size:var(--stk-text-sm); color:var(--stk-fg);">
+          <input type="radio" name="theme" value="dark"> Dark
+        </label>
+        <label style="display:flex; align-items:center; gap:var(--stk-space-2); font-size:var(--stk-text-sm); color:var(--stk-fg);">
+          <input type="radio" name="theme" value="system"> System
+        </label>
+      </div>
+    </div>
+
+    <!-- Step 3: Review -->
+    <div class="stk-stepper-step" data-stk-step hidden aria-label="Step 3 — Review">
+      <div style="max-width:400px;">
+        <p style="margin:0 0 var(--stk-space-3); font-size:var(--stk-text-sm); color:var(--stk-fg); font-weight:500;">
+          Review your information
+        </p>
+        <p style="margin:0 0 var(--stk-space-2); font-size:var(--stk-text-sm); color:var(--stk-muted);">
+          Please verify that everything looks correct before submitting.
+          You can go back to previous steps to make changes.
+        </p>
+        <p style="margin:0; font-size:var(--stk-text-sm); color:var(--stk-fg);">
+          Click <strong>Submit</strong> to complete sign-up.
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <!-- ── Footer with navigation buttons ──────────── -->
+  <div class="stk-stepper-footer">
+    <button class="stk-btn"
+            data-stick="click:step-prev"
+            data-stick-target="#signup-wizard">
+      &larr; Previous
+    </button>
+    <button class="stk-btn stk-btn-primary"
+            data-stick="click:step-next"
+            data-stick-target="#signup-wizard">
+      Next &rarr;
+    </button>
+  </div>
+</div>

package/stick-ui/components/tabs.html

@@ -0,0 +1,26 @@
+<!-- Stick UI: Tabs
+     Requires: stick.js + set-aria handler
+     Optional: stick-ui.css
+-->
+<div class="stk-tabs">
+  <div class="stk-tab-list" role="tablist">
+    <button class="stk-tab" role="tab" aria-selected="true"
+            data-stick="click:set-aria:selected:true"
+            data-stick-2="click:set-aria:selected:false" data-stick-target-2="siblings"
+            data-stick-3="click:hide:" data-stick-target-3="all:.stk-tab-panel"
+            data-stick-4="click:show:" data-stick-target-4="#tab-1">Tab 1</button>
+    <button class="stk-tab" role="tab" aria-selected="false"
+            data-stick="click:set-aria:selected:true"
+            data-stick-2="click:set-aria:selected:false" data-stick-target-2="siblings"
+            data-stick-3="click:hide:" data-stick-target-3="all:.stk-tab-panel"
+            data-stick-4="click:show:" data-stick-target-4="#tab-2">Tab 2</button>
+    <button class="stk-tab" role="tab" aria-selected="false"
+            data-stick="click:set-aria:selected:true"
+            data-stick-2="click:set-aria:selected:false" data-stick-target-2="siblings"
+            data-stick-3="click:hide:" data-stick-target-3="all:.stk-tab-panel"
+            data-stick-4="click:show:" data-stick-target-4="#tab-3">Tab 3</button>
+  </div>
+  <div id="tab-1" class="stk-tab-panel" role="tabpanel">Content for Tab 1.</div>
+  <div id="tab-2" class="stk-tab-panel" role="tabpanel" hidden>Content for Tab 2.</div>
+  <div id="tab-3" class="stk-tab-panel" role="tabpanel" hidden>Content for Tab 3.</div>
+</div>

package/stick-ui/components/toast.html

@@ -0,0 +1,10 @@
+<!-- Stick UI: Toast
+     Requires: stick.js + stick-ui/plugins/toast.js
+     Optional: stick-ui.css
+     Variants in param: "success:Saved!" / "error:Failed!" / "warning:Careful!" / "info:Note"
+     Container auto-creates. Add <div id="stk-toast-zone"></div> to customize position.
+-->
+<button class="stk-btn" data-stick="click:toast:Item saved!">Default toast</button>
+<button class="stk-btn" data-stick="click:toast:success:Changes saved!">Success</button>
+<button class="stk-btn" data-stick="click:toast:error:Something went wrong.">Error</button>
+<button class="stk-btn" data-stick="click:toast:warning:Check your input.">Warning</button>

package/stick-ui/components/toggle-group.html

@@ -0,0 +1,16 @@
+<!-- Stick UI: Toggle Group
+     Requires: stick.js + set-aria handler
+     Optional: stick-ui.css
+     Radio behavior: clicking one deselects siblings.
+-->
+<div class="stk-toggle-group" role="group" aria-label="View mode">
+  <button class="stk-toggle-group-item" role="radio" aria-pressed="true"
+          data-stick="click:set-aria:pressed:true"
+          data-stick-2="click:set-aria:pressed:false" data-stick-target-2="siblings">Grid</button>
+  <button class="stk-toggle-group-item" role="radio" aria-pressed="false"
+          data-stick="click:set-aria:pressed:true"
+          data-stick-2="click:set-aria:pressed:false" data-stick-target-2="siblings">List</button>
+  <button class="stk-toggle-group-item" role="radio" aria-pressed="false"
+          data-stick="click:set-aria:pressed:true"
+          data-stick-2="click:set-aria:pressed:false" data-stick-target-2="siblings">Table</button>
+</div>

package/stick-ui/components/toggle.html

@@ -0,0 +1,9 @@
+<!-- Stick UI: Toggle / Switch
+     Requires: stick.js + toggle-aria handler
+     Optional: stick-ui.css
+-->
+<button class="stk-toggle" role="switch" aria-checked="false"
+        data-stick="click:toggle-aria:checked">
+  <span class="stk-toggle-track"></span>
+  <span class="stk-toggle-label">Feature toggle</span>
+</button>

package/stick-ui/components/tooltip.html

@@ -0,0 +1,12 @@
+<!-- Stick UI: Tooltip
+     Requires: stick.js + stick-ui/plugins/tooltip.js
+     Optional: stick-ui.css
+     Position: data-stk-tooltip-pos="top|bottom|left|right" (default: top)
+-->
+<button class="stk-btn"
+        data-stick="mouseenter:tooltip:This is a tooltip"
+        data-stick-2="mouseleave:tooltip-hide:"
+        data-stick-3="focus:tooltip:This is a tooltip"
+        data-stick-4="blur:tooltip-hide:">
+  Hover me
+</button>