@ktfth/stickjs 3.0.0

package/stick-ui/stick-ui.css

@@ -0,0 +1,825 @@
+/*!
+ * Stick UI — design tokens + component styles
+ * https://github.com/kaiquekandykoga/Stickjs
+ *
+ * This file is OPTIONAL. Without it, data-stick behavior works identically.
+ * Import for styled components. Customize by overriding --stk-* variables on :root.
+ * Target: < 5KB gzipped.
+ */
+
+/* ── 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;
+
+  /* Radius */
+  --stk-radius-sm: 4px;
+  --stk-radius-md: 8px;
+  --stk-radius-lg: 12px;
+  --stk-radius-full: 9999px;
+
+  /* Spacing */
+  --stk-space-1: 4px;
+  --stk-space-2: 8px;
+  --stk-space-3: 12px;
+  --stk-space-4: 16px;
+  --stk-space-5: 20px;
+  --stk-space-6: 24px;
+  --stk-space-8: 32px;
+
+  /* Typography */
+  --stk-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --stk-font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
+  --stk-text-xs: 0.75rem;
+  --stk-text-sm: 0.875rem;
+  --stk-text-base: 1rem;
+  --stk-text-lg: 1.125rem;
+  --stk-leading: 1.5;
+
+  /* Transitions */
+  --stk-duration: 150ms;
+  --stk-duration-slow: 300ms;
+  --stk-easing: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Shadows */
+  --stk-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+  --stk-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
+  --stk-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
+
+  /* Z-index scale */
+  --stk-z-dropdown: 50;
+  --stk-z-sticky: 100;
+  --stk-z-modal: 200;
+  --stk-z-toast: 300;
+  --stk-z-tooltip: 400;
+}
+
+/* ── Dark mode ──────────────────────────────────────── */
+@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;
+    --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;
+  --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);
+}
+
+/* ── Transition classes (used by data-stick-transition) ── */
+.fade-enter-active {
+  animation: stk-fade-in var(--stk-duration) var(--stk-easing);
+}
+.fade-leave-active {
+  animation: stk-fade-out var(--stk-duration) var(--stk-easing);
+}
+@keyframes stk-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes stk-fade-out {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+
+.slide-enter-active {
+  animation: stk-slide-in var(--stk-duration) var(--stk-easing);
+}
+.slide-leave-active {
+  animation: stk-slide-out var(--stk-duration) var(--stk-easing);
+}
+@keyframes stk-slide-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes stk-slide-out {
+  from { opacity: 1; transform: translateY(0); }
+  to   { opacity: 0; transform: translateY(-4px); }
+}
+
+/* ── Base component reset ───────────────────────────── */
+[class^="stk-"],
+[class*=" stk-"] {
+  box-sizing: border-box;
+  font-family: var(--stk-font);
+  line-height: var(--stk-leading);
+}
+
+/* ── Button base ────────────────────────────────────── */
+.stk-btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--stk-space-2);
+  padding: var(--stk-space-2) var(--stk-space-4);
+  border-radius: var(--stk-radius-md); font-size: var(--stk-text-sm); font-weight: 500;
+  cursor: pointer; transition: all var(--stk-duration) var(--stk-easing);
+  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); }
+.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-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-ghost { background: transparent; border-color: transparent; }
+.stk-btn-ghost:hover { background: var(--stk-muted-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); }
+
+/* ── Accordion ──────────────────────────────────────── */
+.stk-accordion { display: flex; flex-direction: column; }
+.stk-accordion-item { border-bottom: 1px solid var(--stk-border); }
+.stk-accordion-trigger {
+  display: flex; align-items: center; justify-content: space-between;
+  width: 100%; padding: var(--stk-space-4); background: none; border: none;
+  font-size: var(--stk-text-base); font-weight: 500; color: var(--stk-fg);
+  cursor: pointer; text-align: left;
+  transition: background var(--stk-duration) var(--stk-easing);
+}
+.stk-accordion-trigger:hover { background: var(--stk-muted-fg); }
+.stk-accordion-trigger:focus-visible { outline: 2px solid var(--stk-ring); outline-offset: -2px; }
+.stk-accordion-trigger::after {
+  content: ''; width: 10px; height: 10px; flex-shrink: 0;
+  border-right: 2px solid var(--stk-muted); border-bottom: 2px solid var(--stk-muted);
+  transform: rotate(45deg); transition: transform var(--stk-duration) var(--stk-easing);
+  margin-right: var(--stk-space-1);
+}
+.stk-accordion-trigger[aria-expanded="true"]::after { transform: rotate(-135deg); }
+.stk-accordion-content { padding: 0 var(--stk-space-4) var(--stk-space-4); color: var(--stk-muted); font-size: var(--stk-text-sm); }
+
+/* ── Tabs ───────────────────────────────────────────── */
+.stk-tabs { display: flex; flex-direction: column; }
+.stk-tab-list { display: flex; gap: 0; border-bottom: 1px solid var(--stk-border); }
+.stk-tab {
+  padding: var(--stk-space-2) var(--stk-space-4); background: none; border: none;
+  border-bottom: 2px solid transparent; margin-bottom: -1px;
+  font-size: var(--stk-text-sm); font-weight: 500; color: var(--stk-muted);
+  cursor: pointer; transition: all var(--stk-duration) var(--stk-easing);
+}
+.stk-tab:hover { color: var(--stk-fg); }
+.stk-tab:focus-visible { outline: 2px solid var(--stk-ring); outline-offset: -2px; }
+.stk-tab[aria-selected="true"] { color: var(--stk-fg); border-bottom-color: var(--stk-primary); }
+.stk-tab-panel { padding: var(--stk-space-4) 0; font-size: var(--stk-text-sm); color: var(--stk-fg); }
+
+/* ── Toggle / Switch ────────────────────────────────── */
+.stk-toggle {
+  display: inline-flex; align-items: center; gap: var(--stk-space-2);
+  cursor: pointer; user-select: none; background: none; border: none;
+  padding: var(--stk-space-1); color: var(--stk-fg);
+}
+.stk-toggle:focus-visible { outline: 2px solid var(--stk-ring); outline-offset: 2px; border-radius: var(--stk-radius-full); }
+.stk-toggle-track {
+  width: 36px; height: 20px; border-radius: var(--stk-radius-full);
+  background: var(--stk-border); transition: background var(--stk-duration) var(--stk-easing);
+  position: relative; flex-shrink: 0;
+}
+.stk-toggle-track::after {
+  content: ''; position: absolute; top: 2px; left: 2px;
+  width: 16px; height: 16px; border-radius: 50%;
+  background: var(--stk-bg); box-shadow: var(--stk-shadow-sm);
+  transition: transform var(--stk-duration) var(--stk-easing);
+}
+.stk-toggle[aria-checked="true"] .stk-toggle-track { background: var(--stk-primary); }
+.stk-toggle[aria-checked="true"] .stk-toggle-track::after { transform: translateX(16px); }
+.stk-toggle-label { font-size: var(--stk-text-sm); }
+
+/* ── Notification Banner ────────────────────────────── */
+.stk-notification {
+  display: flex; align-items: center; gap: var(--stk-space-3);
+  padding: var(--stk-space-3) var(--stk-space-4);
+  border-radius: var(--stk-radius-md); font-size: var(--stk-text-sm);
+  border: 1px solid var(--stk-border); background: var(--stk-bg); color: var(--stk-fg);
+}
+.stk-notification-info    { border-left: 3px solid var(--stk-primary); }
+.stk-notification-success { border-left: 3px solid var(--stk-success); }
+.stk-notification-warning { border-left: 3px solid var(--stk-warning); }
+.stk-notification-error   { border-left: 3px solid var(--stk-destructive); }
+.stk-notification-content { flex: 1; }
+.stk-notification-dismiss {
+  background: none; border: none; padding: var(--stk-space-1); cursor: pointer;
+  color: var(--stk-muted); font-size: var(--stk-text-lg); line-height: 1;
+  transition: color var(--stk-duration) var(--stk-easing);
+}
+.stk-notification-dismiss:hover { color: var(--stk-fg); }
+.stk-notification[hidden] { display: none; }
+
+/* ── Loading Skeleton ───────────────────────────────── */
+.stk-skeleton {
+  background: linear-gradient(90deg, var(--stk-muted-fg) 25%, var(--stk-border) 50%, var(--stk-muted-fg) 75%);
+  background-size: 200% 100%;
+  animation: stk-shimmer 1.5s infinite;
+  border-radius: var(--stk-radius-md);
+}
+.stk-skeleton-text { height: 1em; margin: var(--stk-space-2) 0; }
+.stk-skeleton-heading { height: 1.5em; width: 60%; margin: var(--stk-space-2) 0; }
+.stk-skeleton-avatar { width: 40px; height: 40px; border-radius: var(--stk-radius-full); }
+.stk-skeleton-card { height: 120px; }
+@keyframes stk-shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* ── Toast ──────────────────────────────────────────── */
+.stk-toast-zone {
+  position: fixed; bottom: var(--stk-space-4); right: var(--stk-space-4);
+  display: flex; flex-direction: column-reverse; gap: var(--stk-space-2);
+  z-index: var(--stk-z-toast); pointer-events: none;
+}
+.stk-toast {
+  display: flex; align-items: center; gap: var(--stk-space-2);
+  padding: var(--stk-space-3) var(--stk-space-4);
+  background: var(--stk-fg); color: var(--stk-bg); border-radius: var(--stk-radius-md);
+  font-size: var(--stk-text-sm); box-shadow: var(--stk-shadow-lg);
+  pointer-events: auto; animation: stk-toast-in var(--stk-duration-slow) var(--stk-easing);
+}
+.stk-toast-exit { animation: stk-toast-out var(--stk-duration) var(--stk-easing) forwards; }
+.stk-toast-success { background: var(--stk-success); color: var(--stk-success-fg); }
+.stk-toast-error   { background: var(--stk-destructive); color: var(--stk-destructive-fg); }
+.stk-toast-warning  { background: var(--stk-warning); color: var(--stk-warning-fg); }
+.stk-toast-info     { background: var(--stk-primary); color: var(--stk-primary-fg); }
+.stk-toast-message { flex: 1; }
+.stk-toast-dismiss {
+  background: none; border: none; color: inherit; cursor: pointer;
+  font-size: var(--stk-text-lg); line-height: 1; opacity: 0.7; pointer-events: auto;
+}
+.stk-toast-dismiss:hover { opacity: 1; }
+@keyframes stk-toast-in {
+  from { opacity: 0; transform: translateY(8px) scale(0.95); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+@keyframes stk-toast-out {
+  from { opacity: 1; transform: translateY(0) scale(1); }
+  to   { opacity: 0; transform: translateY(8px) scale(0.95); }
+}
+
+/* ── Dropdown ───────────────────────────────────────── */
+.stk-dropdown { position: relative; display: inline-block; }
+.stk-dropdown-menu {
+  position: absolute; top: 100%; left: 0; margin-top: var(--stk-space-1);
+  min-width: 160px; padding: var(--stk-space-1) 0;
+  background: var(--stk-bg); border: 1px solid var(--stk-border);
+  border-radius: var(--stk-radius-md); box-shadow: var(--stk-shadow-md);
+  z-index: var(--stk-z-dropdown);
+  animation: stk-slide-in var(--stk-duration) var(--stk-easing);
+}
+.stk-dropdown-item {
+  display: block; width: 100%; padding: var(--stk-space-2) var(--stk-space-3);
+  background: none; border: none; text-align: left; cursor: pointer;
+  font-size: var(--stk-text-sm); color: var(--stk-fg);
+  transition: background var(--stk-duration) var(--stk-easing);
+}
+.stk-dropdown-item:hover,
+.stk-dropdown-item:focus { background: var(--stk-muted-fg); outline: none; }
+.stk-dropdown-item-danger { color: var(--stk-destructive); }
+.stk-dropdown-item-danger:hover { background: var(--stk-destructive); color: var(--stk-destructive-fg); }
+.stk-dropdown-separator { height: 1px; background: var(--stk-border); margin: var(--stk-space-1) 0; }
+
+/* ── Tooltip ────────────────────────────────────────── */
+.stk-tooltip {
+  padding: var(--stk-space-1) var(--stk-space-2);
+  background: var(--stk-fg); color: var(--stk-bg);
+  font-size: var(--stk-text-xs); font-family: var(--stk-font);
+  border-radius: var(--stk-radius-sm);
+  white-space: nowrap; pointer-events: none;
+  animation: stk-fade-in var(--stk-duration) var(--stk-easing);
+  box-shadow: var(--stk-shadow-sm);
+}
+
+/* ── Dialog ─────────────────────────────────────────── */
+.stk-dialog {
+  border: none; border-radius: var(--stk-radius-lg); padding: 0;
+  box-shadow: var(--stk-shadow-lg); max-width: 420px; width: 90%;
+  background: var(--stk-bg); color: var(--stk-fg);
+  animation: stk-dialog-in var(--stk-duration-slow) var(--stk-easing);
+  margin: auto; /* restore centering overridden by CSS resets */
+}
+.stk-dialog::backdrop { background: rgba(0,0,0,0.5); }
+.stk-dialog-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: var(--stk-space-4) var(--stk-space-6);
+  border-bottom: 1px solid var(--stk-border);
+}
+.stk-dialog-title { font-size: var(--stk-text-lg); font-weight: 600; margin: 0; }
+.stk-dialog-close {
+  background: none; border: none; padding: var(--stk-space-1); cursor: pointer;
+  color: var(--stk-muted); font-size: var(--stk-text-lg); line-height: 1;
+  transition: color var(--stk-duration) var(--stk-easing);
+}
+.stk-dialog-close:hover { color: var(--stk-fg); }
+.stk-dialog-body { padding: var(--stk-space-4) var(--stk-space-6); font-size: var(--stk-text-sm); }
+.stk-dialog-footer {
+  display: flex; justify-content: flex-end; gap: var(--stk-space-2);
+  padding: var(--stk-space-4) var(--stk-space-6);
+  border-top: 1px solid var(--stk-border);
+}
+@keyframes stk-dialog-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+/* ── Toggle Group ───────────────────────────────────── */
+.stk-toggle-group {
+  display: inline-flex; border: 1px solid var(--stk-border); border-radius: var(--stk-radius-md);
+  overflow: hidden;
+}
+.stk-toggle-group-item {
+  padding: var(--stk-space-2) var(--stk-space-3); background: var(--stk-bg);
+  border: none; border-right: 1px solid var(--stk-border);
+  font-size: var(--stk-text-sm); color: var(--stk-fg); cursor: pointer;
+  transition: all var(--stk-duration) var(--stk-easing);
+}
+.stk-toggle-group-item:last-child { border-right: none; }
+.stk-toggle-group-item:hover { background: var(--stk-muted-fg); }
+.stk-toggle-group-item:focus-visible { outline: 2px solid var(--stk-ring); outline-offset: -2px; }
+.stk-toggle-group-item[aria-pressed="true"] {
+  background: var(--stk-primary); color: var(--stk-primary-fg);
+}
+
+/* ── Command Palette ───────────────────────────────── */
+.stk-command-palette-overlay {
+  position: fixed; inset: 0;
+  background: rgba(0,0,0,0.5);
+  z-index: calc(var(--stk-z-modal) + 10);
+  display: flex; justify-content: center;
+  padding-top: 20vh;
+  animation: stk-fade-in var(--stk-duration) var(--stk-easing);
+}
+.stk-command-palette-overlay[hidden] { display: none; }
+
+.stk-command-palette {
+  width: 90%; max-width: 520px;
+  max-height: 400px;
+  background: var(--stk-bg);
+  border: 1px solid var(--stk-border);
+  border-radius: var(--stk-radius-lg);
+  box-shadow: var(--stk-shadow-lg);
+  display: flex; flex-direction: column;
+  overflow: hidden;
+  animation: stk-dialog-in var(--stk-duration-slow) var(--stk-easing);
+  align-self: flex-start;
+}
+
+.stk-command-palette-input {
+  width: 100%; padding: var(--stk-space-4) var(--stk-space-5);
+  background: transparent; border: none;
+  border-bottom: 1px solid var(--stk-border);
+  font-family: var(--stk-font); font-size: var(--stk-text-base);
+  color: var(--stk-fg); outline: none;
+}
+.stk-command-palette-input::placeholder { color: var(--stk-muted); }
+
+.stk-command-palette-list {
+  overflow-y: auto; flex: 1;
+  padding: var(--stk-space-2) 0;
+  max-height: 320px;
+}
+
+.stk-command-palette-group {
+  padding: var(--stk-space-2) var(--stk-space-4) var(--stk-space-1);
+  font-size: var(--stk-text-xs); font-weight: 600;
+  color: var(--stk-muted); text-transform: uppercase;
+  letter-spacing: 0.05em;
+  user-select: none;
+}
+
+.stk-command-palette-item {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: var(--stk-space-2) var(--stk-space-4);
+  font-size: var(--stk-text-sm); color: var(--stk-fg);
+  cursor: pointer; border-radius: 0;
+  transition: background var(--stk-duration) var(--stk-easing);
+  margin: 0 var(--stk-space-2);
+  border-radius: var(--stk-radius-sm);
+}
+.stk-command-palette-item:hover,
+.stk-command-palette-item[aria-selected="true"] {
+  background: var(--stk-muted-fg);
+}
+
+.stk-command-palette-label { flex: 1; }
+
+.stk-command-palette-shortcut {
+  font-family: var(--stk-font-mono); font-size: var(--stk-text-xs);
+  color: var(--stk-muted);
+  background: var(--stk-muted-fg);
+  padding: var(--stk-space-1) var(--stk-space-2);
+  border-radius: var(--stk-radius-sm);
+  border: 1px solid var(--stk-border);
+  line-height: 1; white-space: nowrap;
+  margin-left: var(--stk-space-3);
+}
+
+.stk-command-palette-empty {
+  padding: var(--stk-space-6) var(--stk-space-4);
+  text-align: center; color: var(--stk-muted);
+  font-size: var(--stk-text-sm);
+}
+
+/* ── Data Table ────────────────────────────────────── */
+.stk-table-wrapper {
+  overflow-x: auto;
+  border: 1px solid var(--stk-border);
+  border-radius: var(--stk-radius-md);
+  background: var(--stk-bg);
+}
+
+.stk-table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+  font-size: var(--stk-text-sm);
+  color: var(--stk-fg);
+}
+
+.stk-table th {
+  padding: var(--stk-space-3) var(--stk-space-4);
+  font-weight: 500;
+  color: var(--stk-muted);
+  font-size: var(--stk-text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-bottom: 1px solid var(--stk-border);
+  background: var(--stk-bg);
+  white-space: nowrap;
+  user-select: none;
+}
+
+.stk-table td {
+  padding: var(--stk-space-3) var(--stk-space-4);
+  border-bottom: 1px solid var(--stk-border);
+  vertical-align: middle;
+}
+
+.stk-table tbody tr:last-child td { border-bottom: none; }
+
+.stk-table tbody tr:hover {
+  background: var(--stk-muted-fg);
+  transition: background var(--stk-duration) var(--stk-easing);
+}
+
+/* Sortable headers */
+.stk-table th[data-stk-sortable] {
+  cursor: pointer;
+  transition: color var(--stk-duration) var(--stk-easing);
+}
+.stk-table th[data-stk-sortable]:hover { color: var(--stk-fg); }
+
+.stk-table th[data-stk-sortable]::after {
+  content: '\2195';  /* up-down arrow */
+  display: inline-block;
+  margin-left: var(--stk-space-1);
+  opacity: 0.35;
+  font-size: 0.75em;
+  transition: opacity var(--stk-duration) var(--stk-easing);
+}
+.stk-table th[data-stk-sortable]:hover::after { opacity: 0.6; }
+
+.stk-table th[aria-sort="ascending"]::after {
+  content: '\2191';  /* up arrow */
+  opacity: 1;
+}
+.stk-table th[aria-sort="descending"]::after {
+  content: '\2193';  /* down arrow */
+  opacity: 1;
+}
+
+/* Toolbar (filter + controls above table) */
+.stk-table-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--stk-space-3);
+  padding: var(--stk-space-3) var(--stk-space-4);
+  border-bottom: 1px solid var(--stk-border);
+  flex-wrap: wrap;
+}
+
+.stk-table-filter {
+  padding: var(--stk-space-2) var(--stk-space-3);
+  border: 1px solid var(--stk-border);
+  border-radius: var(--stk-radius-md);
+  font-size: var(--stk-text-sm);
+  font-family: var(--stk-font);
+  color: var(--stk-fg);
+  background: var(--stk-bg);
+  min-width: 200px;
+  transition: border-color var(--stk-duration) var(--stk-easing),
+              box-shadow var(--stk-duration) var(--stk-easing);
+}
+.stk-table-filter::placeholder { color: var(--stk-muted); }
+.stk-table-filter:focus {
+  outline: none;
+  border-color: var(--stk-ring);
+  box-shadow: 0 0 0 2px rgba(24,24,27,0.1);
+}
+
+/* Pagination bar */
+.stk-table-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--stk-space-3);
+  padding: var(--stk-space-3) var(--stk-space-4);
+  border-top: 1px solid var(--stk-border);
+  flex-wrap: wrap;
+}
+
+.stk-table-page-info {
+  font-size: var(--stk-text-sm);
+  color: var(--stk-muted);
+}
+
+.stk-table-page-nav {
+  display: flex;
+  align-items: center;
+  gap: var(--stk-space-2);
+}
+
+.stk-table-page-num {
+  font-size: var(--stk-text-sm);
+  color: var(--stk-muted);
+  min-width: 80px;
+  text-align: center;
+}
+
+.stk-table-page-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--stk-space-1) var(--stk-space-3);
+  border: 1px solid var(--stk-border);
+  border-radius: var(--stk-radius-md);
+  background: var(--stk-bg);
+  color: var(--stk-fg);
+  font-size: var(--stk-text-sm);
+  font-family: var(--stk-font);
+  cursor: pointer;
+  transition: all var(--stk-duration) var(--stk-easing);
+}
+.stk-table-page-btn:hover:not(:disabled) { background: var(--stk-muted-fg); }
+.stk-table-page-btn:focus-visible { outline: 2px solid var(--stk-ring); outline-offset: 2px; }
+.stk-table-page-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Page size selector */
+.stk-table-page-size {
+  padding: var(--stk-space-1) var(--stk-space-2);
+  border: 1px solid var(--stk-border);
+  border-radius: var(--stk-radius-md);
+  font-size: var(--stk-text-sm);
+  font-family: var(--stk-font);
+  color: var(--stk-fg);
+  background: var(--stk-bg);
+  cursor: pointer;
+}
+.stk-table-page-size:focus-visible { outline: 2px solid var(--stk-ring); outline-offset: 2px; }
+
+/* ── Stepper / Wizard ─────────────────────────────── */
+.stk-stepper {
+  display: flex; flex-direction: column; gap: var(--stk-space-6);
+  font-family: var(--stk-font);
+}
+
+.stk-stepper-header {
+  display: flex; align-items: center; gap: 0;
+  padding: 0 var(--stk-space-4);
+}
+
+.stk-stepper-indicator {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 32px; height: 32px; flex-shrink: 0;
+  border-radius: var(--stk-radius-full);
+  border: 2px solid var(--stk-border);
+  background: var(--stk-bg); color: var(--stk-muted);
+  font-size: var(--stk-text-sm); font-weight: 600;
+  transition: all var(--stk-duration) var(--stk-easing);
+  position: relative;
+}
+
+.stk-stepper-indicator[aria-current="step"] {
+  border-color: var(--stk-primary);
+  background: var(--stk-primary);
+  color: var(--stk-primary-fg);
+}
+
+.stk-stepper-indicator[data-stk-step-complete] {
+  border-color: var(--stk-primary);
+  background: var(--stk-primary);
+  color: var(--stk-primary-fg);
+}
+
+/* Checkmark for completed steps */
+.stk-stepper-indicator[data-stk-step-complete]::after {
+  content: '';
+  display: block;
+  width: 6px; height: 10px;
+  border: solid var(--stk-primary-fg);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+  margin-top: -2px;
+}
+/* Hide the number text when showing checkmark */
+.stk-stepper-indicator[data-stk-step-complete] { font-size: 0; }
+
+.stk-stepper-indicator-label {
+  position: absolute; top: 100%; left: 50%;
+  transform: translateX(-50%);
+  margin-top: var(--stk-space-2);
+  font-size: var(--stk-text-xs); font-weight: 500;
+  color: var(--stk-muted); white-space: nowrap;
+}
+.stk-stepper-indicator[aria-current="step"] .stk-stepper-indicator-label {
+  color: var(--stk-fg);
+}
+
+.stk-stepper-connector {
+  flex: 1; height: 2px;
+  background: var(--stk-border);
+  transition: background var(--stk-duration) var(--stk-easing);
+}
+.stk-stepper-connector[data-complete] {
+  background: var(--stk-primary);
+}
+
+.stk-stepper-body {
+  padding: 0 var(--stk-space-4);
+}
+
+.stk-stepper-step {
+  animation: stk-fade-in var(--stk-duration-slow) var(--stk-easing);
+}
+
+.stk-stepper-footer {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 0 var(--stk-space-4);
+  gap: var(--stk-space-3);
+}
+
+/* Invalid required field animation */
+.stk-stepper-invalid {
+  outline: 2px solid var(--stk-destructive) !important;
+  outline-offset: 1px;
+  animation: stk-stepper-shake 0.4s var(--stk-easing);
+}
+
+@keyframes stk-stepper-shake {
+  0%, 100% { transform: translateX(0); }
+  20%      { transform: translateX(-4px); }
+  40%      { transform: translateX(4px); }
+  60%      { transform: translateX(-2px); }
+  80%      { transform: translateX(2px); }
+}
+
+/* Input base style (shared by stepper forms) */
+.stk-stepper .stk-input {
+  display: block; width: 100%;
+  padding: var(--stk-space-2) var(--stk-space-3);
+  border: 1px solid var(--stk-border);
+  border-radius: var(--stk-radius-md);
+  font-size: var(--stk-text-sm); font-family: var(--stk-font);
+  color: var(--stk-fg); background: var(--stk-bg);
+  transition: border-color var(--stk-duration) var(--stk-easing),
+              box-shadow var(--stk-duration) var(--stk-easing);
+}
+.stk-stepper .stk-input::placeholder { color: var(--stk-muted); }
+.stk-stepper .stk-input:focus {
+  outline: none;
+  border-color: var(--stk-ring);
+  box-shadow: 0 0 0 2px rgba(24,24,27,0.1);
+}
+
+.stk-stepper .stk-label {
+  display: block;
+  font-size: var(--stk-text-sm); font-weight: 500;
+  color: var(--stk-fg);
+  margin-bottom: var(--stk-space-1);
+}
+
+/* ── Autocomplete ──────────────────────────────────── */
+.stk-autocomplete {
+  position: relative;
+  display: inline-block;
+}
+
+.stk-autocomplete-input {
+  display: block;
+  width: 100%;
+  padding: var(--stk-space-2) var(--stk-space-3);
+  border: 1px solid var(--stk-border);
+  border-radius: var(--stk-radius-md);
+  font-size: var(--stk-text-sm);
+  font-family: var(--stk-font);
+  color: var(--stk-fg);
+  background: var(--stk-bg);
+  min-width: 200px;
+  transition: border-color var(--stk-duration) var(--stk-easing),
+              box-shadow var(--stk-duration) var(--stk-easing);
+}
+.stk-autocomplete-input::placeholder { color: var(--stk-muted); }
+.stk-autocomplete-input:focus {
+  outline: none;
+  border-color: var(--stk-ring);
+  box-shadow: 0 0 0 2px rgba(24,24,27,0.1);
+}
+
+.stk-autocomplete-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: var(--stk-space-1);
+  max-height: 240px;
+  overflow-y: auto;
+  padding: var(--stk-space-1) 0;
+  background: var(--stk-bg);
+  border: 1px solid var(--stk-border);
+  border-radius: var(--stk-radius-md);
+  box-shadow: var(--stk-shadow-md);
+  z-index: var(--stk-z-dropdown);
+  animation: stk-slide-in var(--stk-duration) var(--stk-easing);
+}
+.stk-autocomplete-dropdown[hidden] { display: none; }
+
+.stk-autocomplete-item {
+  display: block;
+  width: 100%;
+  padding: var(--stk-space-2) var(--stk-space-3);
+  font-size: var(--stk-text-sm);
+  color: var(--stk-fg);
+  cursor: pointer;
+  border-radius: 0;
+  margin: 0 var(--stk-space-1);
+  width: calc(100% - var(--stk-space-2));
+  border-radius: var(--stk-radius-sm);
+  transition: background var(--stk-duration) var(--stk-easing);
+}
+.stk-autocomplete-item:hover,
+.stk-autocomplete-item[aria-selected="true"] {
+  background: var(--stk-muted-fg);
+}
+
+.stk-autocomplete-item mark {
+  background: transparent;
+  color: var(--stk-fg);
+  font-weight: 700;
+}
+
+.stk-autocomplete-empty {
+  padding: var(--stk-space-4) var(--stk-space-3);
+  text-align: center;
+  color: var(--stk-muted);
+  font-size: var(--stk-text-sm);
+}
+
+.stk-autocomplete-loading {
+  padding: var(--stk-space-4) var(--stk-space-3);
+  text-align: center;
+  color: var(--stk-muted);
+  font-size: var(--stk-text-sm);
+}
+.stk-autocomplete-loading::before {
+  content: '';
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin-right: var(--stk-space-2);
+  border: 2px solid var(--stk-border);
+  border-top-color: var(--stk-primary);
+  border-radius: 50%;
+  animation: stk-ac-spin 0.6s linear infinite;
+  vertical-align: middle;
+}
+@keyframes stk-ac-spin {
+  to { transform: rotate(360deg); }
+}