@ktfth/stickjs 3.0.0 → 3.0.2

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.2",
   "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.
@@ -9,21 +9,40 @@
 
 /* ── Tokens ─────────────────────────────────────────── */
 :root {
-  /* Colors */
-  --stk-bg: #ffffff;
-  --stk-fg: #09090b;
-  --stk-muted: #71717a;
-  --stk-muted-fg: #f4f4f5;
-  --stk-border: #e4e4e7;
-  --stk-ring: #18181b;
-  --stk-primary: #18181b;
-  --stk-primary-fg: #fafafa;
-  --stk-destructive: #ef4444;
-  --stk-destructive-fg: #fafafa;
-  --stk-success: #22c55e;
-  --stk-success-fg: #fafafa;
-  --stk-warning: #f59e0b;
-  --stk-warning-fg: #09090b;
+  /* DARK FIX — semantic tokens (override --sui-* to theme your app) */
+  --sui-bg: #ffffff;
+  --sui-surface: #f4f4f5;
+  --sui-border: #e4e4e7;
+  --sui-text: #09090b;
+  --sui-text-muted: #71717a;
+  --sui-accent: #18181b;
+  --sui-accent-fg: #fafafa;
+  --sui-success: #22c55e;
+  --sui-success-fg: #fafafa;
+  --sui-warning: #f59e0b;
+  --sui-warning-fg: #09090b;
+  --sui-danger: #ef4444;
+  --sui-danger-fg: #fafafa;
+  --sui-info: #3b82f6;
+  --sui-info-fg: #fafafa;
+  --sui-ring: #18181b;
+  --sui-ring-shadow: rgba(24,24,27,0.1);
+
+  /* DARK FIX — backward-compatible aliases (--stk-* now reference --sui-*) */
+  --stk-bg: var(--sui-bg);
+  --stk-fg: var(--sui-text);
+  --stk-muted: var(--sui-text-muted);
+  --stk-muted-fg: var(--sui-surface);
+  --stk-border: var(--sui-border);
+  --stk-ring: var(--sui-ring);
+  --stk-primary: var(--sui-accent);
+  --stk-primary-fg: var(--sui-accent-fg);
+  --stk-destructive: var(--sui-danger);
+  --stk-destructive-fg: var(--sui-danger-fg);
+  --stk-success: var(--sui-success);
+  --stk-success-fg: var(--sui-success-fg);
+  --stk-warning: var(--sui-warning);
+  --stk-warning-fg: var(--sui-warning-fg);
 
   /* Radius */
   --stk-radius-sm: 4px;
@@ -67,31 +86,35 @@
   --stk-z-tooltip: 400;
 }
 
-/* ── Dark mode ──────────────────────────────────────── */
+/* DARK FIX — dark mode tokens ──────────────────────── */
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
-    --stk-bg: #09090b;
-    --stk-fg: #fafafa;
-    --stk-muted: #a1a1aa;
-    --stk-muted-fg: #27272a;
-    --stk-border: #27272a;
-    --stk-ring: #d4d4d8;
-    --stk-primary: #fafafa;
-    --stk-primary-fg: #18181b;
+    --sui-bg: #09090b;
+    --sui-surface: #27272a;
+    --sui-border: #27272a;
+    --sui-text: #fafafa;
+    --sui-text-muted: #a1a1aa;
+    --sui-accent: #fafafa;
+    --sui-accent-fg: #18181b;
+    --sui-ring: #d4d4d8;
+    --sui-ring-shadow: rgba(212,212,216,0.2);
+    --sui-info: #60a5fa;
     --stk-shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
     --stk-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4);
     --stk-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5);
   }
 }
 [data-theme="dark"] {
-  --stk-bg: #09090b;
-  --stk-fg: #fafafa;
-  --stk-muted: #a1a1aa;
-  --stk-muted-fg: #27272a;
-  --stk-border: #27272a;
-  --stk-ring: #d4d4d8;
-  --stk-primary: #fafafa;
-  --stk-primary-fg: #18181b;
+  --sui-bg: #09090b;
+  --sui-surface: #27272a;
+  --sui-border: #27272a;
+  --sui-text: #fafafa;
+  --sui-text-muted: #a1a1aa;
+  --sui-accent: #fafafa;
+  --sui-accent-fg: #18181b;
+  --sui-ring: #d4d4d8;
+  --sui-ring-shadow: rgba(212,212,216,0.2);
+  --sui-info: #60a5fa;
   --stk-shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
   --stk-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4);
   --stk-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5);
@@ -145,14 +168,15 @@
   border: 1px solid var(--stk-border); background: var(--stk-bg); color: var(--stk-fg);
   text-decoration: none;
 }
-.stk-btn:hover { background: var(--stk-muted-fg); }
+/* DARK FIX — explicit color on every :hover prevents dark-on-dark */
+.stk-btn:hover { background: var(--stk-muted-fg); color: var(--stk-fg); }
 .stk-btn:focus-visible { outline: 2px solid var(--stk-ring); outline-offset: 2px; }
 .stk-btn-primary { background: var(--stk-primary); color: var(--stk-primary-fg); border-color: var(--stk-primary); }
-.stk-btn-primary:hover { background: var(--stk-primary); opacity: 0.9; }
+.stk-btn-primary:hover { background: var(--stk-primary); color: var(--stk-primary-fg); opacity: 0.9; }
 .stk-btn-destructive { background: var(--stk-destructive); color: var(--stk-destructive-fg); border-color: var(--stk-destructive); }
-.stk-btn-destructive:hover { background: var(--stk-destructive); opacity: 0.9; }
+.stk-btn-destructive:hover { background: var(--stk-destructive); color: var(--stk-destructive-fg); opacity: 0.9; }
 .stk-btn-ghost { background: transparent; border-color: transparent; }
-.stk-btn-ghost:hover { background: var(--stk-muted-fg); }
+.stk-btn-ghost:hover { background: var(--stk-muted-fg); color: var(--stk-fg); }
 .stk-btn-sm { padding: var(--stk-space-1) var(--stk-space-2); font-size: var(--stk-text-xs); }
 .stk-btn-lg { padding: var(--stk-space-3) var(--stk-space-6); font-size: var(--stk-text-base); }
 
@@ -482,9 +506,11 @@
 
 .stk-table tbody tr:last-child td { border-bottom: none; }
 
+/* DARK FIX — explicit color prevents dark text on dark hover bg */
 .stk-table tbody tr:hover {
   background: var(--stk-muted-fg);
-  transition: background var(--stk-duration) var(--stk-easing);
+  color: var(--stk-fg);
+  transition: background var(--stk-duration) var(--stk-easing), color var(--stk-duration) var(--stk-easing);
 }
 
 /* Sortable headers */
@@ -539,7 +565,7 @@
 .stk-table-filter:focus {
   outline: none;
   border-color: var(--stk-ring);
-  box-shadow: 0 0 0 2px rgba(24,24,27,0.1);
+  box-shadow: 0 0 0 2px var(--sui-ring-shadow); /* DARK FIX */
 }
 
 /* Pagination bar */
@@ -716,7 +742,7 @@
 .stk-stepper .stk-input:focus {
   outline: none;
   border-color: var(--stk-ring);
-  box-shadow: 0 0 0 2px rgba(24,24,27,0.1);
+  box-shadow: 0 0 0 2px var(--sui-ring-shadow); /* DARK FIX */
 }
 
 .stk-stepper .stk-label {
@@ -750,7 +776,7 @@
 .stk-autocomplete-input:focus {
   outline: none;
   border-color: var(--stk-ring);
-  box-shadow: 0 0 0 2px rgba(24,24,27,0.1);
+  box-shadow: 0 0 0 2px var(--sui-ring-shadow); /* DARK FIX */
 }
 
 .stk-autocomplete-dropdown {
@@ -795,6 +821,215 @@
   font-weight: 700;
 }
 
+/* ══════════════════════════════════════════════════════
+   DARK FIX — Generic element styles & missing components
+   ══════════════════════════════════════════════════════ */
+
+/* ── DARK FIX: Generic dialog base (BUG 4) ─────────── */
+dialog {
+  margin: auto;
+  position: fixed;
+  inset: 0;
+  height: fit-content;
+  width: min(90%, 420px);
+  border: none;
+  border-radius: var(--stk-radius-lg, 12px);
+  padding: 0;
+  background: var(--sui-bg);
+  color: var(--sui-text);
+  box-shadow: var(--stk-shadow-lg);
+  z-index: var(--stk-z-modal, 200);
+}
+dialog::backdrop {
+  background: rgba(0,0,0,0.6);
+}
+dialog[open] {
+  animation: stk-dialog-in var(--stk-duration-slow, 300ms) var(--stk-easing);
+}
+
+/* ── DARK FIX: Generic form hover/focus (BUG 5) ────── */
+input:hover,
+select:hover,
+textarea:hover {
+  color: var(--sui-text);
+  background-color: var(--sui-surface);
+}
+input:focus,
+select:focus,
+textarea:focus {
+  color: var(--sui-text);
+  outline: none;
+  border-color: var(--sui-ring);
+  box-shadow: 0 0 0 2px var(--sui-ring-shadow); /* DARK FIX */
+}
+
+/* ── DARK FIX: Generic .btn aliases (BUG 2 / BUG 3) ─ */
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--stk-space-2, 8px);
+  padding: var(--stk-space-2, 8px) var(--stk-space-4, 16px);
+  border-radius: var(--stk-radius-md, 8px);
+  font-size: var(--stk-text-sm, 0.875rem); font-weight: 500;
+  cursor: pointer;
+  transition: all var(--stk-duration, 150ms) var(--stk-easing);
+  border: 1px solid var(--sui-border);
+  background: var(--sui-bg);
+  color: var(--sui-text);
+  text-decoration: none;
+  font-family: var(--stk-font);
+}
+.btn:hover {
+  background: var(--sui-surface);
+  color: var(--sui-text);
+}
+.btn:focus-visible {
+  outline: 2px solid var(--sui-ring);
+  outline-offset: 2px;
+}
+
+.btn-primary {
+  background: var(--sui-accent);
+  color: var(--sui-accent-fg);
+  border-color: var(--sui-accent);
+}
+.btn-primary:hover {
+  background: var(--sui-accent);
+  color: var(--sui-accent-fg);
+  opacity: 0.9;
+}
+
+.btn-danger {
+  background: var(--sui-danger);
+  color: var(--sui-danger-fg);
+  border-color: var(--sui-danger);
+}
+.btn-danger:hover {
+  background: var(--sui-danger);
+  color: var(--sui-danger-fg);
+  opacity: 0.9;
+}
+
+.btn-ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--sui-text);
+}
+.btn-ghost:hover {
+  background: var(--sui-surface);
+  color: var(--sui-text);
+}
+
+.btn-sm { padding: var(--stk-space-1, 4px) var(--stk-space-2, 8px); font-size: var(--stk-text-xs, 0.75rem); }
+.btn-lg { padding: var(--stk-space-3, 12px) var(--stk-space-6, 24px); font-size: var(--stk-text-base, 1rem); }
+
+/* ── DARK FIX: Generic table row hover (BUG 1) ─────── */
+table:not(.stk-table) tbody tr:hover td {
+  color: var(--sui-text);
+}
+
+/* ── DARK FIX: Badge component (BUG 6) ─────────────── */
+.badge, .stk-badge {
+  display: inline-flex; align-items: center;
+  padding: var(--stk-space-1, 4px) var(--stk-space-2, 8px);
+  font-size: var(--stk-text-xs, 0.75rem); font-weight: 500;
+  border-radius: var(--stk-radius-full, 9999px);
+  line-height: 1.4;
+  background: var(--sui-surface);
+  color: var(--sui-text);
+}
+.badge-info, .stk-badge-info {
+  background: var(--sui-info);
+  color: var(--sui-info-fg);
+}
+.badge-success, .stk-badge-success {
+  background: var(--sui-success);
+  color: var(--sui-success-fg);
+}
+.badge-warning, .stk-badge-warning {
+  background: var(--sui-warning);
+  color: var(--sui-warning-fg);
+}
+.badge-danger, .stk-badge-danger {
+  background: var(--sui-danger);
+  color: var(--sui-danger-fg);
+}
+
+/* ── DARK FIX: Alert component (BUG 6) ─────────────── */
+.alert, .stk-alert {
+  display: flex; align-items: flex-start; gap: var(--stk-space-3, 12px);
+  padding: var(--stk-space-3, 12px) var(--stk-space-4, 16px);
+  border-radius: var(--stk-radius-md, 8px);
+  font-size: var(--stk-text-sm, 0.875rem);
+  border: 1px solid var(--sui-border);
+  background: var(--sui-bg);
+  color: var(--sui-text);
+}
+.alert-success, .stk-alert-success {
+  border-left: 3px solid var(--sui-success);
+}
+.alert-danger, .stk-alert-danger {
+  border-left: 3px solid var(--sui-danger);
+}
+.alert-warning, .stk-alert-warning {
+  border-left: 3px solid var(--sui-warning);
+}
+.alert-info, .stk-alert-info {
+  border-left: 3px solid var(--sui-info);
+}
+
+/* ── DARK FIX: Form group component (BUG 6) ────────── */
+.form-group, .stk-form-group {
+  display: flex; flex-direction: column;
+  gap: var(--stk-space-1, 4px);
+  margin-bottom: var(--stk-space-4, 16px);
+}
+.form-group label, .stk-form-group label {
+  font-size: var(--stk-text-sm, 0.875rem); font-weight: 500;
+  color: var(--sui-text);
+}
+.form-group input,
+.form-group select,
+.form-group textarea,
+.stk-form-group input,
+.stk-form-group select,
+.stk-form-group textarea {
+  display: block; width: 100%;
+  padding: var(--stk-space-2, 8px) var(--stk-space-3, 12px);
+  border: 1px solid var(--sui-border);
+  border-radius: var(--stk-radius-md, 8px);
+  font-size: var(--stk-text-sm, 0.875rem);
+  font-family: var(--stk-font);
+  color: var(--sui-text);
+  background: var(--sui-bg);
+  transition: border-color var(--stk-duration, 150ms) var(--stk-easing),
+              box-shadow var(--stk-duration, 150ms) var(--stk-easing);
+}
+.form-group input::placeholder,
+.form-group textarea::placeholder,
+.stk-form-group input::placeholder,
+.stk-form-group textarea::placeholder {
+  color: var(--sui-text-muted);
+}
+
+/* ── DARK FIX: Section header component (BUG 6) ────── */
+.section-header, .stk-section-header {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: var(--stk-space-4, 16px);
+  margin-bottom: var(--stk-space-4, 16px);
+  padding-bottom: var(--stk-space-3, 12px);
+  border-bottom: 1px solid var(--sui-border);
+}
+.section-header h1, .section-header h2, .section-header h3,
+.stk-section-header h1, .stk-section-header h2, .stk-section-header h3 {
+  margin: 0;
+  font-size: var(--stk-text-lg, 1.125rem); font-weight: 600;
+  color: var(--sui-text);
+}
+.section-header p, .stk-section-header p {
+  margin: 0;
+  font-size: var(--stk-text-sm, 0.875rem);
+  color: var(--sui-text-muted);
+}
+
 .stk-autocomplete-empty {
   padding: var(--stk-space-4) var(--stk-space-3);
   text-align: center;

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>