@ktfth/stickjs 3.0.0 → 3.0.1

package/bin/registry.json

@@ -1,20 +1,20 @@
 {
   "components": {
-    "accordion":        { "html": "components/accordion.html", "plugin": null },
-    "tabs":             { "html": "components/tabs.html", "plugin": null },
-    "toggle":           { "html": "components/toggle.html", "plugin": null },
-    "notification":     { "html": "components/notification.html", "plugin": null },
-    "copy-button":      { "html": "components/copy-button.html", "plugin": null },
-    "skeleton":         { "html": "components/skeleton.html", "plugin": null },
-    "dialog":           { "html": "components/dialog.html", "plugin": null },
-    "toast":            { "html": "components/toast.html", "plugin": "plugins/toast.js" },
-    "dropdown":         { "html": "components/dropdown.html", "plugin": "plugins/dropdown.js" },
-    "tooltip":          { "html": "components/tooltip.html", "plugin": "plugins/tooltip.js" },
-    "toggle-group":     { "html": "components/toggle-group.html", "plugin": null },
-    "command-palette":  { "html": "components/command-palette.html", "plugin": "plugins/command-palette.js" },
-    "data-table":       { "html": "components/data-table.html", "plugin": "plugins/data-table.js" },
-    "stepper":          { "html": "components/stepper.html", "plugin": "plugins/stepper.js" },
-    "autocomplete":     { "html": "components/autocomplete.html", "plugin": "plugins/autocomplete.js" }
+    "accordion":        { "html": "components/accordion.html", "plugin": null, "template": "templates/accordion.html" },
+    "tabs":             { "html": "components/tabs.html", "plugin": null, "template": "templates/tabs.html" },
+    "toggle":           { "html": "components/toggle.html", "plugin": null, "template": "templates/toggle.html" },
+    "notification":     { "html": "components/notification.html", "plugin": null, "template": "templates/notification.html" },
+    "copy-button":      { "html": "components/copy-button.html", "plugin": null, "template": "templates/copy-button.html" },
+    "skeleton":         { "html": "components/skeleton.html", "plugin": null, "template": "templates/skeleton.html" },
+    "dialog":           { "html": "components/dialog.html", "plugin": null, "template": "templates/dialog.html" },
+    "toast":            { "html": "components/toast.html", "plugin": "plugins/toast.js", "template": "templates/toast.html" },
+    "dropdown":         { "html": "components/dropdown.html", "plugin": "plugins/dropdown.js", "template": "templates/dropdown.html" },
+    "tooltip":          { "html": "components/tooltip.html", "plugin": "plugins/tooltip.js", "template": "templates/tooltip.html" },
+    "toggle-group":     { "html": "components/toggle-group.html", "plugin": null, "template": "templates/toggle-group.html" },
+    "command-palette":  { "html": "components/command-palette.html", "plugin": "plugins/command-palette.js", "template": "templates/command-palette.html" },
+    "data-table":       { "html": "components/data-table.html", "plugin": "plugins/data-table.js", "template": "templates/data-table.html" },
+    "stepper":          { "html": "components/stepper.html", "plugin": "plugins/stepper.js", "template": "templates/stepper.html" },
+    "autocomplete":     { "html": "components/autocomplete.html", "plugin": "plugins/autocomplete.js", "template": "templates/autocomplete.html" }
   },
   "css": "stick-ui.css"
 }

package/bin/stickjs.js

@@ -50,15 +50,19 @@ ${bold('Usage:')}
   npx stickjs ${cyan('add')} <name> [name...]        Add component(s) to ./stick-ui/
   npx stickjs ${cyan('add')} ${dim('--all')}                   Add all components
   npx stickjs ${cyan('add')} <name> ${dim('--force')}           Overwrite existing files
+  npx stickjs ${cyan('add')} <name> ${dim('--template')}        Add full-page template instead of snippet
 
 ${bold('Options:')}
   ${dim('--help, -h')}    Show this help message
   ${dim('--all')}         Add every component
   ${dim('--force')}       Overwrite existing files without warning
+  ${dim('--template')}    Copy full-page HTML template (ready to open in browser)
 
 ${bold('Examples:')}
   npx stickjs add dialog toast
+  npx stickjs add dialog --template
   npx stickjs add --all --force
+  npx stickjs add --all --template
 `);
 }
 
@@ -67,15 +71,17 @@ function listComponents() {
   const maxLen = Math.max(...NAMES.map(n => n.length));
   for (const name of NAMES) {
     const entry = COMPONENTS[name];
-    const plugin = entry.plugin ? yellow(' + plugin') : '';
-    console.log(`  ${cyan(name.padEnd(maxLen))}  ${dim(entry.html)}${plugin}`);
+    const plugin   = entry.plugin   ? yellow(' + plugin')   : '';
+    const tmpl     = entry.template ? green(' + template')  : '';
+    console.log(`  ${cyan(name.padEnd(maxLen))}  ${dim(entry.html)}${plugin}${tmpl}`);
   }
   console.log();
 }
 
 function addComponents(args) {
-  const force = args.includes('--force');
-  const all   = args.includes('--all');
+  const force    = args.includes('--force');
+  const all      = args.includes('--all');
+  const template = args.includes('--template');
   const names = all
     ? NAMES
     : args.filter(a => !a.startsWith('--'));
@@ -97,6 +103,38 @@ function addComponents(args) {
   let added = 0;
   let skipped = 0;
 
+  if (template) {
+    // --template mode: copy full-page HTML templates
+    const templateDest = path.resolve(process.cwd(), 'stick-ui', 'templates');
+
+    for (const name of names) {
+      const entry = COMPONENTS[name];
+
+      if (!entry.template) {
+        console.log(yellow('  ~ ') + name + dim(' (no template available)'));
+        skipped++;
+        continue;
+      }
+
+      const src  = path.join(PKG_ROOT, entry.template);
+      const dest = path.join(templateDest, name + '.html');
+
+      if (fs.existsSync(dest) && !force) {
+        console.log(yellow('  ~ ') + 'templates/' + name + '.html' + dim(' (exists, use --force to overwrite)'));
+        skipped++;
+        continue;
+      }
+
+      copyFile(src, dest);
+      console.log(green('  + ') + 'templates/' + name + '.html');
+      added++;
+    }
+
+    console.log(`\n${bold('Done:')} ${green(added + ' template(s) added')}, ${yellow(skipped + ' skipped')}\n`);
+    return;
+  }
+
+  // Default mode: copy component snippets
   // Copy CSS on first add (if not present)
   const cssSrc  = path.join(PKG_ROOT, registry.css);
   const cssDest = path.join(DEST, registry.css);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktfth/stickjs",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Declarative behavior for HTML elements. Zero dependencies.",
   "main": "stick.js",
   "types": "stick.d.ts",
@@ -28,11 +28,22 @@
     "test": "echo 'Open test/stick.test.html in a browser to run tests'",
     "release": "npm run minify && npm publish --access=public && vercel --prod ./docs"
   },
-  "keywords": ["declarative", "html", "behavior", "htmx", "vanilla", "framework", "no-js", "components", "ui", "cli"],
+  "keywords": [
+    "declarative",
+    "html",
+    "behavior",
+    "htmx",
+    "vanilla",
+    "framework",
+    "no-js",
+    "components",
+    "ui",
+    "cli"
+  ],
   "author": "Kaique Silva <kaique.developer@gmail.com>",
   "license": "GPL-3.0",
   "repository": {
     "type": "git",
-    "url": "https://github.com/kaiquekandykoga/Stickjs"
+    "url": "https://github.com/ktfth/Stickjs"
   }
 }

package/stick-ui/stick-ui.css

@@ -1,6 +1,6 @@
 /*!
  * Stick UI — design tokens + component styles
- * https://github.com/kaiquekandykoga/Stickjs
+ * https://github.com/ktfth/Stickjs
  *
  * This file is OPTIONAL. Without it, data-stick behavior works identically.
  * Import for styled components. Customize by overriding --stk-* variables on :root.

package/stick-ui/templates/accordion.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Accordion — Stick.js Template</title>
+  <link rel="stylesheet" href="https://unpkg.com/@ktfth/stickjs/stick-ui/stick-ui.css">
+  <script src="https://unpkg.com/@ktfth/stickjs/stick.js"></script>
+</head>
+<body style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+
+  <h1>Accordion</h1>
+  <p>Click a section to expand or collapse it.</p>
+
+  <div class="stk-accordion">
+    <div class="stk-accordion-item">
+      <button class="stk-accordion-trigger" aria-expanded="false"
+              data-stick="click:toggle" data-stick-target="next">
+        What is Stick.js?
+      </button>
+      <div class="stk-accordion-content" hidden>
+        <p>Stick.js is a declarative behavior framework for HTML elements.
+           Zero dependencies, zero build step — just add data attributes.</p>
+      </div>
+    </div>
+    <div class="stk-accordion-item">
+      <button class="stk-accordion-trigger" aria-expanded="false"
+              data-stick="click:toggle" data-stick-target="next">
+        How do I install it?
+      </button>
+      <div class="stk-accordion-content" hidden>
+        <p>Include the script tag:
+           <code>&lt;script src="https://unpkg.com/@ktfth/stickjs/stick.js"&gt;&lt;/script&gt;</code>
+           or install via npm: <code>npm install @ktfth/stickjs</code></p>
+      </div>
+    </div>
+    <div class="stk-accordion-item">
+      <button class="stk-accordion-trigger" aria-expanded="false"
+              data-stick="click:toggle" data-stick-target="next">
+        Does it require a build step?
+      </button>
+      <div class="stk-accordion-content" hidden>
+        <p>No. Stick.js works directly in the browser with zero configuration.</p>
+      </div>
+    </div>
+  </div>
+
+</body>
+</html>

package/stick-ui/templates/autocomplete.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Autocomplete — Stick.js Template</title>
+  <link rel="stylesheet" href="https://unpkg.com/@ktfth/stickjs/stick-ui/stick-ui.css">
+  <script src="https://unpkg.com/@ktfth/stickjs/stick.js"></script>
+  <script src="https://unpkg.com/@ktfth/stickjs/stick-ui/plugins/autocomplete.js"></script>
+</head>
+<body style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+
+  <h1>Autocomplete</h1>
+  <p>Type to search and select from suggestions.</p>
+
+  <!-- Static options (from a hidden list) -->
+  <h3>Programming Language</h3>
+  <div class="stk-autocomplete" style="width: 300px;">
+    <label class="stk-label" for="lang-input">Choose a language</label>
+    <input id="lang-input"
+           class="stk-autocomplete-input"
+           type="text"
+           placeholder="Search languages..."
+           data-stick="input:autocomplete:#language-list"
+           data-stk-autocomplete-min="1">
+    <ul id="language-list" hidden>
+      <li data-value="javascript">JavaScript</li>
+      <li data-value="typescript">TypeScript</li>
+      <li data-value="python">Python</li>
+      <li data-value="rust">Rust</li>
+      <li data-value="go">Go</li>
+      <li data-value="java">Java</li>
+      <li data-value="csharp">C#</li>
+      <li data-value="cpp">C++</li>
+      <li data-value="ruby">Ruby</li>
+      <li data-value="swift">Swift</li>
+      <li data-value="kotlin">Kotlin</li>
+      <li data-value="php">PHP</li>
+    </ul>
+  </div>
+
+  <!-- Programmatic options -->
+  <h3 style="margin-top: 2rem;">City</h3>
+  <div class="stk-autocomplete" style="width: 300px;">
+    <label class="stk-label" for="city-input">Choose a city</label>
+    <input id="city-input"
+           class="stk-autocomplete-input"
+           type="text"
+           placeholder="Type a city name..."
+           data-stick="input:autocomplete"
+           data-stk-autocomplete-min="1">
+  </div>
+
+  <script>
+    stkAutocomplete.setOptions(document.getElementById('city-input'), [
+      'New York', 'Los Angeles', 'Chicago', 'Houston', 'Phoenix',
+      'San Francisco', 'Seattle', 'Denver', 'Boston', 'Miami',
+      'Austin', 'Portland'
+    ]);
+  </script>
+
+</body>
+</html>

package/stick-ui/templates/command-palette.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Command Palette — Stick.js Template</title>
+  <link rel="stylesheet" href="https://unpkg.com/@ktfth/stickjs/stick-ui/stick-ui.css">
+  <script src="https://unpkg.com/@ktfth/stickjs/stick.js"></script>
+  <script src="https://unpkg.com/@ktfth/stickjs/stick-ui/plugins/command-palette.js"></script>
+</head>
+<body style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+
+  <h1>Command Palette</h1>
+  <p>Press <kbd>Ctrl+K</kbd> (or <kbd>Cmd+K</kbd> on Mac) to open, or click the button below.</p>
+
+  <button class="stk-btn stk-btn-primary" data-stick="click:command-palette">
+    Open Command Palette
+    <span class="stk-command-palette-shortcut" style="margin-left: 8px;">Ctrl+K</span>
+  </button>
+
+  <script>
+    stkCommandPalette.register([
+      // Navigation
+      { id: 'nav-home',     label: 'Go to Home',         group: 'Navigation', shortcut: 'G H', action: function() { alert('Navigate: Home'); } },
+      { id: 'nav-settings', label: 'Go to Settings',     group: 'Navigation', shortcut: 'G S', action: function() { alert('Navigate: Settings'); } },
+      { id: 'nav-profile',  label: 'Go to Profile',      group: 'Navigation', shortcut: 'G P', action: function() { alert('Navigate: Profile'); } },
+      { id: 'nav-docs',     label: 'Open Documentation', group: 'Navigation',                   action: function() { alert('Navigate: Docs'); } },
+
+      // Actions
+      { id: 'act-theme',  label: 'Toggle Dark Mode', group: 'Actions', shortcut: 'Ctrl+D', action: function() { document.documentElement.toggleAttribute('data-theme'); } },
+      { id: 'act-copy',   label: 'Copy Current URL', group: 'Actions', shortcut: 'Ctrl+C', action: function() { navigator.clipboard.writeText(location.href); } },
+      { id: 'act-reload', label: 'Reload Page',      group: 'Actions', shortcut: 'Ctrl+R', action: function() { location.reload(); } },
+      { id: 'act-print',  label: 'Print Page',       group: 'Actions', shortcut: 'Ctrl+P', action: function() { window.print(); } }
+    ]);
+  </script>
+
+</body>
+</html>

package/stick-ui/templates/copy-button.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Copy Button — Stick.js Template</title>
+  <link rel="stylesheet" href="https://unpkg.com/@ktfth/stickjs/stick-ui/stick-ui.css">
+  <script src="https://unpkg.com/@ktfth/stickjs/stick.js"></script>
+</head>
+<body style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+
+  <h1>Copy Button</h1>
+  <p>Click to copy text to clipboard with visual feedback.</p>
+
+  <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
+    <button class="stk-btn stk-btn-sm"
+            data-stick="click:copy:npm install @ktfth/stickjs"
+            data-stick-2="click:set-text:Copied!"
+            data-stick-3="click:wait:1500"
+            data-stick-4="click:set-text:Copy install command">
+      Copy install command
+    </button>
+
+    <button class="stk-btn stk-btn-sm"
+            data-stick="click:copy:https://github.com/ktfth/Stickjs"
+            data-stick-2="click:set-text:Copied!"
+            data-stick-3="click:wait:1500"
+            data-stick-4="click:set-text:Copy repo URL">
+      Copy repo URL
+    </button>
+
+    <button class="stk-btn stk-btn-sm"
+            data-stick='click:copy:&lt;script src="https://unpkg.com/@ktfth/stickjs/stick.js"&gt;&lt;/script&gt;'
+            data-stick-2="click:set-text:Copied!"
+            data-stick-3="click:wait:1500"
+            data-stick-4="click:set-text:Copy script tag">
+      Copy script tag
+    </button>
+  </div>
+
+</body>
+</html>

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

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Data Table — Stick.js Template</title>
+  <link rel="stylesheet" href="https://unpkg.com/@ktfth/stickjs/stick-ui/stick-ui.css">
+  <script src="https://unpkg.com/@ktfth/stickjs/stick.js"></script>
+  <script src="https://unpkg.com/@ktfth/stickjs/stick-ui/plugins/data-table.js"></script>
+</head>
+<body style="padding: 2rem; max-width: 900px; margin: 0 auto;">
+
+  <h1>Data Table</h1>
+  <p>Sortable columns, search filter, and pagination — all declarative.</p>
+
+  <div class="stk-table-wrapper">
+
+    <!-- Toolbar -->
+    <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>
+      </tbody>
+    </table>
+
+    <!-- Pagination -->
+    <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>
+    document.addEventListener('DOMContentLoaded', function () {
+      stkDataTable.init(document.querySelector('.stk-table'), { pageSize: 5 });
+    });
+  </script>
+
+</body>
+</html>

package/stick-ui/templates/dialog.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Dialog — Stick.js Template</title>
+  <link rel="stylesheet" href="https://unpkg.com/@ktfth/stickjs/stick-ui/stick-ui.css">
+  <script src="https://unpkg.com/@ktfth/stickjs/stick.js"></script>
+</head>
+<body style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+
+  <h1>Dialog (Modal)</h1>
+  <p>Uses the native <code>&lt;dialog&gt;</code> element. No plugin needed.</p>
+
+  <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
+    <button class="stk-btn stk-btn-primary"
+            data-stick="click:show-modal:" data-stick-target="#confirm-dialog">
+      Confirmation dialog
+    </button>
+
+    <button class="stk-btn"
+            data-stick="click:show-modal:" data-stick-target="#info-dialog">
+      Info dialog
+    </button>
+  </div>
+
+  <!-- Confirmation dialog -->
+  <dialog id="confirm-dialog" class="stk-dialog">
+    <div class="stk-dialog-header">
+      <h3 class="stk-dialog-title">Delete item?</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>This action cannot be undone. Are you sure you want to continue?</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">Delete</button>
+    </div>
+  </dialog>
+
+  <!-- Info dialog -->
+  <dialog id="info-dialog" class="stk-dialog">
+    <div class="stk-dialog-header">
+      <h3 class="stk-dialog-title">About Stick.js</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>Stick.js is a declarative behavior framework for HTML. Add interactivity
+         with data attributes — no build step, no dependencies.</p>
+    </div>
+    <div class="stk-dialog-footer">
+      <button class="stk-btn stk-btn-primary"
+              data-stick="click:close-modal:" data-stick-target="closest:dialog">Got it</button>
+    </div>
+  </dialog>
+
+</body>
+</html>

package/stick-ui/templates/dropdown.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Dropdown — Stick.js Template</title>
+  <link rel="stylesheet" href="https://unpkg.com/@ktfth/stickjs/stick-ui/stick-ui.css">
+  <script src="https://unpkg.com/@ktfth/stickjs/stick.js"></script>
+  <script src="https://unpkg.com/@ktfth/stickjs/stick-ui/plugins/dropdown.js"></script>
+</head>
+<body style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+
+  <h1>Dropdown Menu</h1>
+  <p>Click the button to toggle a dropdown menu.</p>
+
+  <div style="display: flex; gap: 2rem; flex-wrap: wrap;">
+    <!-- Actions dropdown -->
+    <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">
+        Actions
+      </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>
+        <button class="stk-dropdown-item" role="menuitem">Archive</button>
+        <div class="stk-dropdown-separator"></div>
+        <button class="stk-dropdown-item stk-dropdown-item-danger" role="menuitem">Delete</button>
+      </div>
+    </div>
+
+    <!-- Account dropdown -->
+    <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">
+        Account
+      </button>
+      <div class="stk-dropdown-menu" role="menu" hidden>
+        <button class="stk-dropdown-item" role="menuitem">Profile</button>
+        <button class="stk-dropdown-item" role="menuitem">Settings</button>
+        <button class="stk-dropdown-item" role="menuitem">Billing</button>
+        <div class="stk-dropdown-separator"></div>
+        <button class="stk-dropdown-item" role="menuitem">Sign out</button>
+      </div>
+    </div>
+  </div>
+
+</body>
+</html>

package/stick-ui/templates/notification.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Notification — Stick.js Template</title>
+  <link rel="stylesheet" href="https://unpkg.com/@ktfth/stickjs/stick-ui/stick-ui.css">
+  <script src="https://unpkg.com/@ktfth/stickjs/stick.js"></script>
+</head>
+<body style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+
+  <h1>Notification Banners</h1>
+  <p>Dismissible notification banners in four variants.</p>
+
+  <div style="display: flex; flex-direction: column; gap: 1rem;">
+    <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>
+
+    <div class="stk-notification stk-notification-success" data-stick-transition="fade">
+      <span class="stk-notification-content">Changes saved successfully!</span>
+      <button class="stk-notification-dismiss"
+              data-stick="click:hide:" data-stick-target="parent"
+              aria-label="Dismiss">&times;</button>
+    </div>
+
+    <div class="stk-notification stk-notification-warning" data-stick-transition="fade">
+      <span class="stk-notification-content">Please review your input before proceeding.</span>
+      <button class="stk-notification-dismiss"
+              data-stick="click:hide:" data-stick-target="parent"
+              aria-label="Dismiss">&times;</button>
+    </div>
+
+    <div class="stk-notification stk-notification-error" data-stick-transition="fade">
+      <span class="stk-notification-content">An error occurred. Please try again.</span>
+      <button class="stk-notification-dismiss"
+              data-stick="click:hide:" data-stick-target="parent"
+              aria-label="Dismiss">&times;</button>
+    </div>
+  </div>
+
+</body>
+</html>

package/stick-ui/templates/skeleton.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Skeleton — Stick.js Template</title>
+  <link rel="stylesheet" href="https://unpkg.com/@ktfth/stickjs/stick-ui/stick-ui.css">
+  <script src="https://unpkg.com/@ktfth/stickjs/stick.js"></script>
+</head>
+<body style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+
+  <h1>Loading Skeleton</h1>
+  <p>Placeholder loading states. Click the button to simulate loading.</p>
+
+  <button class="stk-btn stk-btn-primary"
+          data-stick="click:show:#skeleton-demo"
+          data-stick-2="click:hide:#content-demo"
+          data-stick-3="click:wait:2000"
+          data-stick-4="click:hide:#skeleton-demo"
+          data-stick-5="click:show:#content-demo">
+    Simulate loading
+  </button>
+
+  <div id="skeleton-demo" hidden style="margin-top: 1.5rem;">
+    <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>
+
+  <div id="content-demo" style="margin-top: 1.5rem;">
+    <h3>Content loaded</h3>
+    <p>This content appears after the skeleton loading animation completes.</p>
+    <p>Skeletons are CSS-only — no JavaScript needed for the animation.</p>
+  </div>
+
+</body>
+</html>

package/stick-ui/templates/stepper.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Stepper — Stick.js Template</title>
+  <link rel="stylesheet" href="https://unpkg.com/@ktfth/stickjs/stick-ui/stick-ui.css">
+  <script src="https://unpkg.com/@ktfth/stickjs/stick.js"></script>
+  <script src="https://unpkg.com/@ktfth/stickjs/stick-ui/plugins/stepper.js"></script>
+</head>
+<body style="padding: 2rem; max-width: 700px; margin: 0 auto;">
+
+  <h1>Stepper / Wizard</h1>
+  <p>Multi-step form with Previous/Next navigation.</p>
+
+  <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 -->
+      <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 -->
+      <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-weight:500;">How would you like to be contacted?</p>
+          <label style="display:flex; align-items:center; gap:var(--stk-space-2);">
+            <input type="checkbox" name="contact" value="email"> Email updates
+          </label>
+          <label style="display:flex; align-items:center; gap:var(--stk-space-2);">
+            <input type="checkbox" name="contact" value="sms"> SMS notifications
+          </label>
+          <p style="margin:var(--stk-space-3) 0 0; font-weight:500;">Preferred theme</p>
+          <label style="display:flex; align-items:center; gap:var(--stk-space-2);">
+            <input type="radio" name="theme" value="light" checked> Light
+          </label>
+          <label style="display:flex; align-items:center; gap:var(--stk-space-2);">
+            <input type="radio" name="theme" value="dark"> Dark
+          </label>
+        </div>
+      </div>
+
+      <!-- Step 3 -->
+      <div class="stk-stepper-step" data-stk-step hidden aria-label="Step 3 — Review">
+        <div style="max-width:400px;">
+          <p style="font-weight:500;">Review your information</p>
+          <p>Please verify everything looks correct before submitting.
+             You can go back to previous steps to make changes.</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Navigation -->
+    <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>
+
+</body>
+</html>

package/stick-ui/templates/tabs.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Tabs — Stick.js Template</title>
+  <link rel="stylesheet" href="https://unpkg.com/@ktfth/stickjs/stick-ui/stick-ui.css">
+  <script src="https://unpkg.com/@ktfth/stickjs/stick.js"></script>
+</head>
+<body style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+
+  <h1>Tabs</h1>
+  <p>Click a tab to switch content panels.</p>
+
+  <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-overview">Overview</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-features">Features</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-usage">Usage</button>
+    </div>
+    <div id="tab-overview" class="stk-tab-panel" role="tabpanel">
+      <h3>Overview</h3>
+      <p>Stick.js lets you add interactive behavior to HTML elements using data attributes alone.</p>
+    </div>
+    <div id="tab-features" class="stk-tab-panel" role="tabpanel" hidden>
+      <h3>Features</h3>
+      <ul>
+        <li>27 built-in handlers</li>
+        <li>Event modifiers (debounce, throttle, once)</li>
+        <li>Fetch support with swap modes</li>
+        <li>Stacked behaviors (up to 5 per element)</li>
+      </ul>
+    </div>
+    <div id="tab-usage" class="stk-tab-panel" role="tabpanel" hidden>
+      <h3>Usage</h3>
+      <p>Add <code>data-stick="event:handler:param"</code> to any element. That's it.</p>
+    </div>
+  </div>
+
+</body>
+</html>

package/stick-ui/templates/toast.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Toast — Stick.js Template</title>
+  <link rel="stylesheet" href="https://unpkg.com/@ktfth/stickjs/stick-ui/stick-ui.css">
+  <script src="https://unpkg.com/@ktfth/stickjs/stick.js"></script>
+  <script src="https://unpkg.com/@ktfth/stickjs/stick-ui/plugins/toast.js"></script>
+</head>
+<body style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+
+  <h1>Toast Notifications</h1>
+  <p>Click a button to trigger a toast message.</p>
+
+  <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
+    <button class="stk-btn" data-stick="click:toast:This is a default toast.">
+      Default
+    </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>
+    <button class="stk-btn" data-stick="click:toast:info:New version available.">
+      Info
+    </button>
+  </div>
+
+</body>
+</html>

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

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Toggle Group — Stick.js Template</title>
+  <link rel="stylesheet" href="https://unpkg.com/@ktfth/stickjs/stick-ui/stick-ui.css">
+  <script src="https://unpkg.com/@ktfth/stickjs/stick.js"></script>
+</head>
+<body style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+
+  <h1>Toggle Group</h1>
+  <p>Radio-style button groups — clicking one deselects the others.</p>
+
+  <h3>View mode</h3>
+  <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>
+
+  <h3 style="margin-top: 2rem;">Text alignment</h3>
+  <div class="stk-toggle-group" role="group" aria-label="Text alignment">
+    <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">Left</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">Center</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">Right</button>
+  </div>
+
+</body>
+</html>

package/stick-ui/templates/toggle.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Toggle — Stick.js Template</title>
+  <link rel="stylesheet" href="https://unpkg.com/@ktfth/stickjs/stick-ui/stick-ui.css">
+  <script src="https://unpkg.com/@ktfth/stickjs/stick.js"></script>
+</head>
+<body style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+
+  <h1>Toggle / Switch</h1>
+  <p>Accessible toggle switches with ARIA attributes.</p>
+
+  <div style="display: flex; flex-direction: column; gap: 1rem;">
+    <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">Notifications</span>
+    </button>
+
+    <button class="stk-toggle" role="switch" aria-checked="true"
+            data-stick="click:toggle-aria:checked">
+      <span class="stk-toggle-track"></span>
+      <span class="stk-toggle-label">Dark mode</span>
+    </button>
+
+    <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">Auto-save</span>
+    </button>
+  </div>
+
+</body>
+</html>

package/stick-ui/templates/tooltip.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Tooltip — Stick.js Template</title>
+  <link rel="stylesheet" href="https://unpkg.com/@ktfth/stickjs/stick-ui/stick-ui.css">
+  <script src="https://unpkg.com/@ktfth/stickjs/stick.js"></script>
+  <script src="https://unpkg.com/@ktfth/stickjs/stick-ui/plugins/tooltip.js"></script>
+</head>
+<body style="padding: 4rem 2rem; max-width: 600px; margin: 0 auto;">
+
+  <h1>Tooltip</h1>
+  <p>Hover or focus buttons to see tooltips in different positions.</p>
+
+  <div style="display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 2rem;">
+    <button class="stk-btn"
+            data-stick="mouseenter:tooltip:Tooltip on top"
+            data-stick-2="mouseleave:tooltip-hide:"
+            data-stick-3="focus:tooltip:Tooltip on top"
+            data-stick-4="blur:tooltip-hide:"
+            data-stk-tooltip-pos="top">
+      Top
+    </button>
+
+    <button class="stk-btn"
+            data-stick="mouseenter:tooltip:Tooltip on bottom"
+            data-stick-2="mouseleave:tooltip-hide:"
+            data-stick-3="focus:tooltip:Tooltip on bottom"
+            data-stick-4="blur:tooltip-hide:"
+            data-stk-tooltip-pos="bottom">
+      Bottom
+    </button>
+
+    <button class="stk-btn"
+            data-stick="mouseenter:tooltip:Tooltip on left"
+            data-stick-2="mouseleave:tooltip-hide:"
+            data-stick-3="focus:tooltip:Tooltip on left"
+            data-stick-4="blur:tooltip-hide:"
+            data-stk-tooltip-pos="left">
+      Left
+    </button>
+
+    <button class="stk-btn"
+            data-stick="mouseenter:tooltip:Tooltip on right"
+            data-stick-2="mouseleave:tooltip-hide:"
+            data-stick-3="focus:tooltip:Tooltip on right"
+            data-stick-4="blur:tooltip-hide:"
+            data-stk-tooltip-pos="right">
+      Right
+    </button>
+  </div>
+
+</body>
+</html>

package/stick.d.ts

@@ -1,6 +1,6 @@
 /**
  * Stick.js — declarative behavior for HTML elements
- * https://github.com/kaiquekandykoga/Stickjs
+ * https://github.com/ktfth/Stickjs
  */
 
 /**

package/stick.js

@@ -1,6 +1,6 @@
 /*!
  * Stick.js — declarative behavior for HTML elements
- * https://github.com/kaiquekandykoga/Stickjs
+ * https://github.com/ktfth/Stickjs
  *
  * Syntax:
  *   data-stick="event:handler:param"