@ktfth/stickjs 3.0.0 → 3.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/bin/registry.json +15 -15
  2. package/bin/stickjs.js +42 -4
  3. package/package.json +14 -3
  4. package/stick-ui/stick-ui.css +276 -41
  5. package/stick-ui/templates/accordion.html +49 -0
  6. package/stick-ui/templates/autocomplete.html +63 -0
  7. package/stick-ui/templates/command-palette.html +38 -0
  8. package/stick-ui/templates/copy-button.html +42 -0
  9. package/stick-ui/templates/data-table.html +84 -0
  10. package/stick-ui/templates/dialog.html +65 -0
  11. package/stick-ui/templates/dropdown.html +49 -0
  12. package/stick-ui/templates/notification.html +46 -0
  13. package/stick-ui/templates/skeleton.html +38 -0
  14. package/stick-ui/templates/stepper.html +95 -0
  15. package/stick-ui/templates/tabs.html +53 -0
  16. package/stick-ui/templates/toast.html +35 -0
  17. package/stick-ui/templates/toggle-group.html +42 -0
  18. package/stick-ui/templates/toggle.html +36 -0
  19. package/stick-ui/templates/tooltip.html +55 -0
  20. package/stick.d.ts +1 -1
  21. package/stick.js +169 -16
package/stick-ui/templates/command-palette.html ADDED
@@ -0,0 +1,38 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Command Palette — Stick.js Template</title>
7
+ <link rel="stylesheet" href="https://unpkg.com/@ktfth/stickjs/stick-ui/stick-ui.css">
8
+ <script src="https://unpkg.com/@ktfth/stickjs/stick.js"></script>
9
+ <script src="https://unpkg.com/@ktfth/stickjs/stick-ui/plugins/command-palette.js"></script>
10
+ </head>
11
+ <body style="padding: 2rem; max-width: 600px; margin: 0 auto;">
12
+
13
+ <h1>Command Palette</h1>
14
+ <p>Press <kbd>Ctrl+K</kbd> (or <kbd>Cmd+K</kbd> on Mac) to open, or click the button below.</p>
15
+
16
+ <button class="stk-btn stk-btn-primary" data-stick="click:command-palette">
17
+ Open Command Palette
18
+ <span class="stk-command-palette-shortcut" style="margin-left: 8px;">Ctrl+K</span>
19
+ </button>
20
+
21
+ <script>
22
+ stkCommandPalette.register([
23
+ // Navigation
24
+ { id: 'nav-home', label: 'Go to Home', group: 'Navigation', shortcut: 'G H', action: function() { alert('Navigate: Home'); } },
25
+ { id: 'nav-settings', label: 'Go to Settings', group: 'Navigation', shortcut: 'G S', action: function() { alert('Navigate: Settings'); } },
26
+ { id: 'nav-profile', label: 'Go to Profile', group: 'Navigation', shortcut: 'G P', action: function() { alert('Navigate: Profile'); } },
27
+ { id: 'nav-docs', label: 'Open Documentation', group: 'Navigation', action: function() { alert('Navigate: Docs'); } },
28
+
29
+ // Actions
30
+ { id: 'act-theme', label: 'Toggle Dark Mode', group: 'Actions', shortcut: 'Ctrl+D', action: function() { document.documentElement.toggleAttribute('data-theme'); } },
31
+ { id: 'act-copy', label: 'Copy Current URL', group: 'Actions', shortcut: 'Ctrl+C', action: function() { navigator.clipboard.writeText(location.href); } },
32
+ { id: 'act-reload', label: 'Reload Page', group: 'Actions', shortcut: 'Ctrl+R', action: function() { location.reload(); } },
33
+ { id: 'act-print', label: 'Print Page', group: 'Actions', shortcut: 'Ctrl+P', action: function() { window.print(); } }
34
+ ]);
35
+ </script>
36
+
37
+ </body>
38
+ </html>
package/stick-ui/templates/copy-button.html ADDED
@@ -0,0 +1,42 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Copy Button — Stick.js Template</title>
7
+ <link rel="stylesheet" href="https://unpkg.com/@ktfth/stickjs/stick-ui/stick-ui.css">
8
+ <script src="https://unpkg.com/@ktfth/stickjs/stick.js"></script>
9
+ </head>
10
+ <body style="padding: 2rem; max-width: 600px; margin: 0 auto;">
11
+
12
+ <h1>Copy Button</h1>
13
+ <p>Click to copy text to clipboard with visual feedback.</p>
14
+
15
+ <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
16
+ <button class="stk-btn stk-btn-sm"
17
+ data-stick="click:copy:npm install @ktfth/stickjs"
18
+ data-stick-2="click:set-text:Copied!"
19
+ data-stick-3="click:wait:1500"
20
+ data-stick-4="click:set-text:Copy install command">
21
+ Copy install command
22
+ </button>
23
+
24
+ <button class="stk-btn stk-btn-sm"
25
+ data-stick="click:copy:https://github.com/ktfth/Stickjs"
26
+ data-stick-2="click:set-text:Copied!"
27
+ data-stick-3="click:wait:1500"
28
+ data-stick-4="click:set-text:Copy repo URL">
29
+ Copy repo URL
30
+ </button>
31
+
32
+ <button class="stk-btn stk-btn-sm"
33
+ data-stick='click:copy:&lt;script src="https://unpkg.com/@ktfth/stickjs/stick.js"&gt;&lt;/script&gt;'
34
+ data-stick-2="click:set-text:Copied!"
35
+ data-stick-3="click:wait:1500"
36
+ data-stick-4="click:set-text:Copy script tag">
37
+ Copy script tag
38
+ </button>
39
+ </div>
40
+
41
+ </body>
42
+ </html>
package/stick-ui/templates/data-table.html ADDED
@@ -0,0 +1,84 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Data Table — Stick.js Template</title>
7
+ <link rel="stylesheet" href="https://unpkg.com/@ktfth/stickjs/stick-ui/stick-ui.css">
8
+ <script src="https://unpkg.com/@ktfth/stickjs/stick.js"></script>
9
+ <script src="https://unpkg.com/@ktfth/stickjs/stick-ui/plugins/data-table.js"></script>
10
+ </head>
11
+ <body style="padding: 2rem; max-width: 900px; margin: 0 auto;">
12
+
13
+ <h1>Data Table</h1>
14
+ <p>Sortable columns, search filter, and pagination — all declarative.</p>
15
+
16
+ <div class="stk-table-wrapper">
17
+
18
+ <!-- Toolbar -->
19
+ <div class="stk-table-toolbar">
20
+ <input class="stk-table-filter" type="text"
21
+ placeholder="Filter rows..."
22
+ aria-label="Filter table"
23
+ data-stick="input:table-filter:.stk-table">
24
+ <label style="margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:var(--stk-text-sm); color:var(--stk-muted);">
25
+ Rows
26
+ <select class="stk-table-page-size"
27
+ data-stick="change:table-page-size:.stk-table">
28
+ <option value="5" selected>5</option>
29
+ <option value="10">10</option>
30
+ <option value="20">20</option>
31
+ </select>
32
+ </label>
33
+ </div>
34
+
35
+ <!-- Table -->
36
+ <table class="stk-table" data-stk-paginate>
37
+ <thead>
38
+ <tr>
39
+ <th data-stk-sortable data-stick="click:table-sort:0">Name</th>
40
+ <th>Email</th>
41
+ <th data-stk-sortable data-stick="click:table-sort:2">Role</th>
42
+ <th>Status</th>
43
+ <th data-stk-sortable data-stick="click:table-sort:4">Joined</th>
44
+ </tr>
45
+ </thead>
46
+ <tbody>
47
+ <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>
48
+ <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>
49
+ <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>
50
+ <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>
51
+ <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>
52
+ <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>
53
+ <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>
54
+ <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>
55
+ <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>
56
+ <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>
57
+ <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>
58
+ <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>
59
+ </tbody>
60
+ </table>
61
+
62
+ <!-- Pagination -->
63
+ <div class="stk-table-pagination">
64
+ <span class="stk-table-page-info" aria-live="polite" role="status"></span>
65
+ <span class="stk-table-page-nav">
66
+ <button class="stk-table-page-btn" type="button"
67
+ data-stk-page="prev"
68
+ data-stick="click:table-paginate:prev">&lsaquo; Prev</button>
69
+ <span class="stk-table-page-num"></span>
70
+ <button class="stk-table-page-btn" type="button"
71
+ data-stk-page="next"
72
+ data-stick="click:table-paginate:next">Next &rsaquo;</button>
73
+ </span>
74
+ </div>
75
+ </div>
76
+
77
+ <script>
78
+ document.addEventListener('DOMContentLoaded', function () {
79
+ stkDataTable.init(document.querySelector('.stk-table'), { pageSize: 5 });
80
+ });
81
+ </script>
82
+
83
+ </body>
84
+ </html>
package/stick-ui/templates/dialog.html ADDED
@@ -0,0 +1,65 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Dialog — Stick.js Template</title>
7
+ <link rel="stylesheet" href="https://unpkg.com/@ktfth/stickjs/stick-ui/stick-ui.css">
8
+ <script src="https://unpkg.com/@ktfth/stickjs/stick.js"></script>
9
+ </head>
10
+ <body style="padding: 2rem; max-width: 600px; margin: 0 auto;">
11
+
12
+ <h1>Dialog (Modal)</h1>
13
+ <p>Uses the native <code>&lt;dialog&gt;</code> element. No plugin needed.</p>
14
+
15
+ <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
16
+ <button class="stk-btn stk-btn-primary"
17
+ data-stick="click:show-modal:" data-stick-target="#confirm-dialog">
18
+ Confirmation dialog
19
+ </button>
20
+
21
+ <button class="stk-btn"
22
+ data-stick="click:show-modal:" data-stick-target="#info-dialog">
23
+ Info dialog
24
+ </button>
25
+ </div>
26
+
27
+ <!-- Confirmation dialog -->
28
+ <dialog id="confirm-dialog" class="stk-dialog">
29
+ <div class="stk-dialog-header">
30
+ <h3 class="stk-dialog-title">Delete item?</h3>
31
+ <button class="stk-dialog-close"
32
+ data-stick="click:close-modal:" data-stick-target="closest:dialog"
33
+ aria-label="Close">&times;</button>
34
+ </div>
35
+ <div class="stk-dialog-body">
36
+ <p>This action cannot be undone. Are you sure you want to continue?</p>
37
+ </div>
38
+ <div class="stk-dialog-footer">
39
+ <button class="stk-btn"
40
+ data-stick="click:close-modal:" data-stick-target="closest:dialog">Cancel</button>
41
+ <button class="stk-btn stk-btn-primary"
42
+ data-stick="click:close-modal:confirmed" data-stick-target="closest:dialog">Delete</button>
43
+ </div>
44
+ </dialog>
45
+
46
+ <!-- Info dialog -->
47
+ <dialog id="info-dialog" class="stk-dialog">
48
+ <div class="stk-dialog-header">
49
+ <h3 class="stk-dialog-title">About Stick.js</h3>
50
+ <button class="stk-dialog-close"
51
+ data-stick="click:close-modal:" data-stick-target="closest:dialog"
52
+ aria-label="Close">&times;</button>
53
+ </div>
54
+ <div class="stk-dialog-body">
55
+ <p>Stick.js is a declarative behavior framework for HTML. Add interactivity
56
+ with data attributes — no build step, no dependencies.</p>
57
+ </div>
58
+ <div class="stk-dialog-footer">
59
+ <button class="stk-btn stk-btn-primary"
60
+ data-stick="click:close-modal:" data-stick-target="closest:dialog">Got it</button>
61
+ </div>
62
+ </dialog>
63
+
64
+ </body>
65
+ </html>
package/stick-ui/templates/dropdown.html ADDED
@@ -0,0 +1,49 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Dropdown — Stick.js Template</title>
7
+ <link rel="stylesheet" href="https://unpkg.com/@ktfth/stickjs/stick-ui/stick-ui.css">
8
+ <script src="https://unpkg.com/@ktfth/stickjs/stick.js"></script>
9
+ <script src="https://unpkg.com/@ktfth/stickjs/stick-ui/plugins/dropdown.js"></script>
10
+ </head>
11
+ <body style="padding: 2rem; max-width: 600px; margin: 0 auto;">
12
+
13
+ <h1>Dropdown Menu</h1>
14
+ <p>Click the button to toggle a dropdown menu.</p>
15
+
16
+ <div style="display: flex; gap: 2rem; flex-wrap: wrap;">
17
+ <!-- Actions dropdown -->
18
+ <div class="stk-dropdown">
19
+ <button class="stk-btn stk-dropdown-trigger" aria-expanded="false" aria-haspopup="true"
20
+ data-stick="click:dropdown" data-stick-target="next">
21
+ Actions
22
+ </button>
23
+ <div class="stk-dropdown-menu" role="menu" hidden>
24
+ <button class="stk-dropdown-item" role="menuitem">Edit</button>
25
+ <button class="stk-dropdown-item" role="menuitem">Duplicate</button>
26
+ <button class="stk-dropdown-item" role="menuitem">Archive</button>
27
+ <div class="stk-dropdown-separator"></div>
28
+ <button class="stk-dropdown-item stk-dropdown-item-danger" role="menuitem">Delete</button>
29
+ </div>
30
+ </div>
31
+
32
+ <!-- Account dropdown -->
33
+ <div class="stk-dropdown">
34
+ <button class="stk-btn stk-dropdown-trigger" aria-expanded="false" aria-haspopup="true"
35
+ data-stick="click:dropdown" data-stick-target="next">
36
+ Account
37
+ </button>
38
+ <div class="stk-dropdown-menu" role="menu" hidden>
39
+ <button class="stk-dropdown-item" role="menuitem">Profile</button>
40
+ <button class="stk-dropdown-item" role="menuitem">Settings</button>
41
+ <button class="stk-dropdown-item" role="menuitem">Billing</button>
42
+ <div class="stk-dropdown-separator"></div>
43
+ <button class="stk-dropdown-item" role="menuitem">Sign out</button>
44
+ </div>
45
+ </div>
46
+ </div>
47
+
48
+ </body>
49
+ </html>
package/stick-ui/templates/notification.html ADDED
@@ -0,0 +1,46 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Notification — Stick.js Template</title>
7
+ <link rel="stylesheet" href="https://unpkg.com/@ktfth/stickjs/stick-ui/stick-ui.css">
8
+ <script src="https://unpkg.com/@ktfth/stickjs/stick.js"></script>
9
+ </head>
10
+ <body style="padding: 2rem; max-width: 600px; margin: 0 auto;">
11
+
12
+ <h1>Notification Banners</h1>
13
+ <p>Dismissible notification banners in four variants.</p>
14
+
15
+ <div style="display: flex; flex-direction: column; gap: 1rem;">
16
+ <div class="stk-notification stk-notification-info" data-stick-transition="fade">
17
+ <span class="stk-notification-content">This is an informational message.</span>
18
+ <button class="stk-notification-dismiss"
19
+ data-stick="click:hide:" data-stick-target="parent"
20
+ aria-label="Dismiss">&times;</button>
21
+ </div>
22
+
23
+ <div class="stk-notification stk-notification-success" data-stick-transition="fade">
24
+ <span class="stk-notification-content">Changes saved successfully!</span>
25
+ <button class="stk-notification-dismiss"
26
+ data-stick="click:hide:" data-stick-target="parent"
27
+ aria-label="Dismiss">&times;</button>
28
+ </div>
29
+
30
+ <div class="stk-notification stk-notification-warning" data-stick-transition="fade">
31
+ <span class="stk-notification-content">Please review your input before proceeding.</span>
32
+ <button class="stk-notification-dismiss"
33
+ data-stick="click:hide:" data-stick-target="parent"
34
+ aria-label="Dismiss">&times;</button>
35
+ </div>
36
+
37
+ <div class="stk-notification stk-notification-error" data-stick-transition="fade">
38
+ <span class="stk-notification-content">An error occurred. Please try again.</span>
39
+ <button class="stk-notification-dismiss"
40
+ data-stick="click:hide:" data-stick-target="parent"
41
+ aria-label="Dismiss">&times;</button>
42
+ </div>
43
+ </div>
44
+
45
+ </body>
46
+ </html>
package/stick-ui/templates/skeleton.html ADDED
@@ -0,0 +1,38 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Skeleton — Stick.js Template</title>
7
+ <link rel="stylesheet" href="https://unpkg.com/@ktfth/stickjs/stick-ui/stick-ui.css">
8
+ <script src="https://unpkg.com/@ktfth/stickjs/stick.js"></script>
9
+ </head>
10
+ <body style="padding: 2rem; max-width: 600px; margin: 0 auto;">
11
+
12
+ <h1>Loading Skeleton</h1>
13
+ <p>Placeholder loading states. Click the button to simulate loading.</p>
14
+
15
+ <button class="stk-btn stk-btn-primary"
16
+ data-stick="click:show:#skeleton-demo"
17
+ data-stick-2="click:hide:#content-demo"
18
+ data-stick-3="click:wait:2000"
19
+ data-stick-4="click:hide:#skeleton-demo"
20
+ data-stick-5="click:show:#content-demo">
21
+ Simulate loading
22
+ </button>
23
+
24
+ <div id="skeleton-demo" hidden style="margin-top: 1.5rem;">
25
+ <div class="stk-skeleton stk-skeleton-heading"></div>
26
+ <div class="stk-skeleton stk-skeleton-text" style="width:90%"></div>
27
+ <div class="stk-skeleton stk-skeleton-text" style="width:75%"></div>
28
+ <div class="stk-skeleton stk-skeleton-text" style="width:85%"></div>
29
+ </div>
30
+
31
+ <div id="content-demo" style="margin-top: 1.5rem;">
32
+ <h3>Content loaded</h3>
33
+ <p>This content appears after the skeleton loading animation completes.</p>
34
+ <p>Skeletons are CSS-only — no JavaScript needed for the animation.</p>
35
+ </div>
36
+
37
+ </body>
38
+ </html>
package/stick-ui/templates/stepper.html ADDED
@@ -0,0 +1,95 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Stepper — Stick.js Template</title>
7
+ <link rel="stylesheet" href="https://unpkg.com/@ktfth/stickjs/stick-ui/stick-ui.css">
8
+ <script src="https://unpkg.com/@ktfth/stickjs/stick.js"></script>
9
+ <script src="https://unpkg.com/@ktfth/stickjs/stick-ui/plugins/stepper.js"></script>
10
+ </head>
11
+ <body style="padding: 2rem; max-width: 700px; margin: 0 auto;">
12
+
13
+ <h1>Stepper / Wizard</h1>
14
+ <p>Multi-step form with Previous/Next navigation.</p>
15
+
16
+ <div id="signup-wizard" class="stk-stepper" data-stk-stepper
17
+ role="group" aria-label="Sign-up wizard">
18
+
19
+ <!-- Step indicators -->
20
+ <div class="stk-stepper-header">
21
+ <div class="stk-stepper-indicator" data-stk-step-indicator aria-current="step">
22
+ 1
23
+ <span class="stk-stepper-indicator-label">Personal Info</span>
24
+ </div>
25
+ <div class="stk-stepper-connector"></div>
26
+ <div class="stk-stepper-indicator" data-stk-step-indicator>
27
+ 2
28
+ <span class="stk-stepper-indicator-label">Preferences</span>
29
+ </div>
30
+ <div class="stk-stepper-connector"></div>
31
+ <div class="stk-stepper-indicator" data-stk-step-indicator>
32
+ 3
33
+ <span class="stk-stepper-indicator-label">Review</span>
34
+ </div>
35
+ </div>
36
+
37
+ <!-- Step panels -->
38
+ <div class="stk-stepper-body">
39
+ <!-- Step 1 -->
40
+ <div class="stk-stepper-step" data-stk-step aria-label="Step 1 — Personal Info">
41
+ <div style="display:flex; flex-direction:column; gap:var(--stk-space-4); max-width:400px;">
42
+ <div>
43
+ <label class="stk-label" for="wiz-name">Full Name</label>
44
+ <input id="wiz-name" class="stk-input" type="text" placeholder="Jane Doe" required>
45
+ </div>
46
+ <div>
47
+ <label class="stk-label" for="wiz-email">Email</label>
48
+ <input id="wiz-email" class="stk-input" type="email" placeholder="jane@example.com" required>
49
+ </div>
50
+ </div>
51
+ </div>
52
+
53
+ <!-- Step 2 -->
54
+ <div class="stk-stepper-step" data-stk-step hidden aria-label="Step 2 — Preferences">
55
+ <div style="display:flex; flex-direction:column; gap:var(--stk-space-3); max-width:400px;">
56
+ <p style="margin:0; font-weight:500;">How would you like to be contacted?</p>
57
+ <label style="display:flex; align-items:center; gap:var(--stk-space-2);">
58
+ <input type="checkbox" name="contact" value="email"> Email updates
59
+ </label>
60
+ <label style="display:flex; align-items:center; gap:var(--stk-space-2);">
61
+ <input type="checkbox" name="contact" value="sms"> SMS notifications
62
+ </label>
63
+ <p style="margin:var(--stk-space-3) 0 0; font-weight:500;">Preferred theme</p>
64
+ <label style="display:flex; align-items:center; gap:var(--stk-space-2);">
65
+ <input type="radio" name="theme" value="light" checked> Light
66
+ </label>
67
+ <label style="display:flex; align-items:center; gap:var(--stk-space-2);">
68
+ <input type="radio" name="theme" value="dark"> Dark
69
+ </label>
70
+ </div>
71
+ </div>
72
+
73
+ <!-- Step 3 -->
74
+ <div class="stk-stepper-step" data-stk-step hidden aria-label="Step 3 — Review">
75
+ <div style="max-width:400px;">
76
+ <p style="font-weight:500;">Review your information</p>
77
+ <p>Please verify everything looks correct before submitting.
78
+ You can go back to previous steps to make changes.</p>
79
+ </div>
80
+ </div>
81
+ </div>
82
+
83
+ <!-- Navigation -->
84
+ <div class="stk-stepper-footer">
85
+ <button class="stk-btn"
86
+ data-stick="click:step-prev"
87
+ data-stick-target="#signup-wizard">&larr; Previous</button>
88
+ <button class="stk-btn stk-btn-primary"
89
+ data-stick="click:step-next"
90
+ data-stick-target="#signup-wizard">Next &rarr;</button>
91
+ </div>
92
+ </div>
93
+
94
+ </body>
95
+ </html>
package/stick-ui/templates/tabs.html ADDED
@@ -0,0 +1,53 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Tabs — Stick.js Template</title>
7
+ <link rel="stylesheet" href="https://unpkg.com/@ktfth/stickjs/stick-ui/stick-ui.css">
8
+ <script src="https://unpkg.com/@ktfth/stickjs/stick.js"></script>
9
+ </head>
10
+ <body style="padding: 2rem; max-width: 600px; margin: 0 auto;">
11
+
12
+ <h1>Tabs</h1>
13
+ <p>Click a tab to switch content panels.</p>
14
+
15
+ <div class="stk-tabs">
16
+ <div class="stk-tab-list" role="tablist">
17
+ <button class="stk-tab" role="tab" aria-selected="true"
18
+ data-stick="click:set-aria:selected:true"
19
+ data-stick-2="click:set-aria:selected:false" data-stick-target-2="siblings"
20
+ data-stick-3="click:hide:" data-stick-target-3="all:.stk-tab-panel"
21
+ data-stick-4="click:show:" data-stick-target-4="#tab-overview">Overview</button>
22
+ <button class="stk-tab" role="tab" aria-selected="false"
23
+ data-stick="click:set-aria:selected:true"
24
+ data-stick-2="click:set-aria:selected:false" data-stick-target-2="siblings"
25
+ data-stick-3="click:hide:" data-stick-target-3="all:.stk-tab-panel"
26
+ data-stick-4="click:show:" data-stick-target-4="#tab-features">Features</button>
27
+ <button class="stk-tab" role="tab" aria-selected="false"
28
+ data-stick="click:set-aria:selected:true"
29
+ data-stick-2="click:set-aria:selected:false" data-stick-target-2="siblings"
30
+ data-stick-3="click:hide:" data-stick-target-3="all:.stk-tab-panel"
31
+ data-stick-4="click:show:" data-stick-target-4="#tab-usage">Usage</button>
32
+ </div>
33
+ <div id="tab-overview" class="stk-tab-panel" role="tabpanel">
34
+ <h3>Overview</h3>
35
+ <p>Stick.js lets you add interactive behavior to HTML elements using data attributes alone.</p>
36
+ </div>
37
+ <div id="tab-features" class="stk-tab-panel" role="tabpanel" hidden>
38
+ <h3>Features</h3>
39
+ <ul>
40
+ <li>27 built-in handlers</li>
41
+ <li>Event modifiers (debounce, throttle, once)</li>
42
+ <li>Fetch support with swap modes</li>
43
+ <li>Stacked behaviors (up to 5 per element)</li>
44
+ </ul>
45
+ </div>
46
+ <div id="tab-usage" class="stk-tab-panel" role="tabpanel" hidden>
47
+ <h3>Usage</h3>
48
+ <p>Add <code>data-stick="event:handler:param"</code> to any element. That's it.</p>
49
+ </div>
50
+ </div>
51
+
52
+ </body>
53
+ </html>
package/stick-ui/templates/toast.html ADDED
@@ -0,0 +1,35 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Toast — Stick.js Template</title>
7
+ <link rel="stylesheet" href="https://unpkg.com/@ktfth/stickjs/stick-ui/stick-ui.css">
8
+ <script src="https://unpkg.com/@ktfth/stickjs/stick.js"></script>
9
+ <script src="https://unpkg.com/@ktfth/stickjs/stick-ui/plugins/toast.js"></script>
10
+ </head>
11
+ <body style="padding: 2rem; max-width: 600px; margin: 0 auto;">
12
+
13
+ <h1>Toast Notifications</h1>
14
+ <p>Click a button to trigger a toast message.</p>
15
+
16
+ <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
17
+ <button class="stk-btn" data-stick="click:toast:This is a default toast.">
18
+ Default
19
+ </button>
20
+ <button class="stk-btn" data-stick="click:toast:success:Changes saved!">
21
+ Success
22
+ </button>
23
+ <button class="stk-btn" data-stick="click:toast:error:Something went wrong.">
24
+ Error
25
+ </button>
26
+ <button class="stk-btn" data-stick="click:toast:warning:Check your input.">
27
+ Warning
28
+ </button>
29
+ <button class="stk-btn" data-stick="click:toast:info:New version available.">
30
+ Info
31
+ </button>
32
+ </div>
33
+
34
+ </body>
35
+ </html>
package/stick-ui/templates/toggle-group.html ADDED
@@ -0,0 +1,42 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Toggle Group — Stick.js Template</title>
7
+ <link rel="stylesheet" href="https://unpkg.com/@ktfth/stickjs/stick-ui/stick-ui.css">
8
+ <script src="https://unpkg.com/@ktfth/stickjs/stick.js"></script>
9
+ </head>
10
+ <body style="padding: 2rem; max-width: 600px; margin: 0 auto;">
11
+
12
+ <h1>Toggle Group</h1>
13
+ <p>Radio-style button groups — clicking one deselects the others.</p>
14
+
15
+ <h3>View mode</h3>
16
+ <div class="stk-toggle-group" role="group" aria-label="View mode">
17
+ <button class="stk-toggle-group-item" role="radio" aria-pressed="true"
18
+ data-stick="click:set-aria:pressed:true"
19
+ data-stick-2="click:set-aria:pressed:false" data-stick-target-2="siblings">Grid</button>
20
+ <button class="stk-toggle-group-item" role="radio" aria-pressed="false"
21
+ data-stick="click:set-aria:pressed:true"
22
+ data-stick-2="click:set-aria:pressed:false" data-stick-target-2="siblings">List</button>
23
+ <button class="stk-toggle-group-item" role="radio" aria-pressed="false"
24
+ data-stick="click:set-aria:pressed:true"
25
+ data-stick-2="click:set-aria:pressed:false" data-stick-target-2="siblings">Table</button>
26
+ </div>
27
+
28
+ <h3 style="margin-top: 2rem;">Text alignment</h3>
29
+ <div class="stk-toggle-group" role="group" aria-label="Text alignment">
30
+ <button class="stk-toggle-group-item" role="radio" aria-pressed="true"
31
+ data-stick="click:set-aria:pressed:true"
32
+ data-stick-2="click:set-aria:pressed:false" data-stick-target-2="siblings">Left</button>
33
+ <button class="stk-toggle-group-item" role="radio" aria-pressed="false"
34
+ data-stick="click:set-aria:pressed:true"
35
+ data-stick-2="click:set-aria:pressed:false" data-stick-target-2="siblings">Center</button>
36
+ <button class="stk-toggle-group-item" role="radio" aria-pressed="false"
37
+ data-stick="click:set-aria:pressed:true"
38
+ data-stick-2="click:set-aria:pressed:false" data-stick-target-2="siblings">Right</button>
39
+ </div>
40
+
41
+ </body>
42
+ </html>
package/stick-ui/templates/toggle.html ADDED
@@ -0,0 +1,36 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Toggle — Stick.js Template</title>
7
+ <link rel="stylesheet" href="https://unpkg.com/@ktfth/stickjs/stick-ui/stick-ui.css">
8
+ <script src="https://unpkg.com/@ktfth/stickjs/stick.js"></script>
9
+ </head>
10
+ <body style="padding: 2rem; max-width: 600px; margin: 0 auto;">
11
+
12
+ <h1>Toggle / Switch</h1>
13
+ <p>Accessible toggle switches with ARIA attributes.</p>
14
+
15
+ <div style="display: flex; flex-direction: column; gap: 1rem;">
16
+ <button class="stk-toggle" role="switch" aria-checked="false"
17
+ data-stick="click:toggle-aria:checked">
18
+ <span class="stk-toggle-track"></span>
19
+ <span class="stk-toggle-label">Notifications</span>
20
+ </button>
21
+
22
+ <button class="stk-toggle" role="switch" aria-checked="true"
23
+ data-stick="click:toggle-aria:checked">
24
+ <span class="stk-toggle-track"></span>
25
+ <span class="stk-toggle-label">Dark mode</span>
26
+ </button>
27
+
28
+ <button class="stk-toggle" role="switch" aria-checked="false"
29
+ data-stick="click:toggle-aria:checked">
30
+ <span class="stk-toggle-track"></span>
31
+ <span class="stk-toggle-label">Auto-save</span>
32
+ </button>
33
+ </div>
34
+
35
+ </body>
36
+ </html>