sliderpro-agentic-skills-etch 0.1.0

package/README.md

@@ -0,0 +1,60 @@
+# sliderpro-agentic-skills-etch
+
+Installs the Slider Pro for Etch AI Connector skills files and component prop docs into any
+project, so users do not have to clone or download the docs repo by hand.
+
+```
+npx sliderpro-agentic-skills-etch
+```
+
+Installs into the current directory:
+
+```
+slider-skills/slider-pro-skills.md
+slider-skills/slider-pro-skills-reference.md
+components/*.md
+```
+
+Options: `--force` / `-f` to overwrite an existing install, a path argument to install elsewhere
+(e.g. `npx sliderpro-agentic-skills-etch ./my-site-project`), `--help` / `-h`.
+
+## Maintaining this package
+
+`skills-package/` is a **generated copy**, not a source of truth. The real files live at:
+
+- `../slider-skills/slider-pro-skills.md`
+- `../slider-skills/slider-pro-skills-reference.md`
+- `../../components/*.md`
+
+Whenever those change, regenerate the bundle before publishing:
+
+```
+npm run build
+```
+
+This also runs automatically via `prepublishOnly` before `npm publish`.
+
+The build rewrites the links that only make sense inside the docs repo. `../../components/`
+becomes `../components/`, because the installed layout is one folder shallower. Links to sibling
+doc pages that do **not** ship in the package (`../../card-stack-templates.md` and friends) are
+rewritten to the public GitBook URLs. The build fails if any `../../` link survives, so a broken
+link cannot reach npm.
+
+The prop tables inside the reference file are themselves generated, from the Etch component export
+in the plugin repo:
+
+```
+node tools/gen-prop-tables.mjs --splice "<docs>/ai-connector/slider-skills/slider-pro-skills-reference.md"
+```
+
+Re-run that after any component change, then `npm run build` here.
+
+## Publishing a new version
+
+```
+npm version patch   # or minor/major
+npm run build
+npm publish
+```
+
+(Requires `npm adduser` / `npm login` first.)

package/bin/cli.js

@@ -0,0 +1,107 @@
+#!/usr/bin/env node
+
+import { cpSync, existsSync, mkdirSync, readdirSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const packageRoot = join(__dirname, "..");
+const sourceRoot = join(packageRoot, "skills-package");
+
+const DIRS = ["slider-skills", "components"];
+
+function printHelp() {
+  console.log(`
+sliderpro-agentic-skills-etch - install the Slider Pro AI Connector skills files into a project
+
+Usage:
+  npx sliderpro-agentic-skills-etch [directory] [options]
+
+Options:
+  --force, -f    Overwrite existing slider-skills/ or components/
+  --help, -h     Show this help message
+
+Examples:
+  npx sliderpro-agentic-skills-etch
+  npx sliderpro-agentic-skills-etch ./my-site-project
+  npx sliderpro-agentic-skills-etch --force
+`);
+}
+
+function parseArgs(argv) {
+  const options = { force: false, help: false, target: process.cwd() };
+
+  for (const arg of argv) {
+    if (arg === "--help" || arg === "-h") {
+      options.help = true;
+    } else if (arg === "--force" || arg === "-f") {
+      options.force = true;
+    } else if (!arg.startsWith("-")) {
+      options.target = resolve(arg);
+    } else {
+      console.error(`Unknown option: ${arg}`);
+      printHelp();
+      process.exit(1);
+    }
+  }
+
+  return options;
+}
+
+function listConflicts(target) {
+  return DIRS.filter((dir) => existsSync(join(target, dir))).map((dir) => `${dir}/`);
+}
+
+function copyPackageFiles(target, force) {
+  mkdirSync(target, { recursive: true });
+
+  for (const dir of DIRS) {
+    const source = join(sourceRoot, dir);
+    const dest = join(target, dir);
+
+    if (existsSync(dest) && !force) {
+      continue;
+    }
+
+    cpSync(source, dest, { recursive: true });
+  }
+}
+
+function countComponents() {
+  try {
+    return readdirSync(join(sourceRoot, "components")).filter((f) => f.endsWith(".md")).length;
+  } catch {
+    return 0;
+  }
+}
+
+function main() {
+  const { force, help, target } = parseArgs(process.argv.slice(2));
+
+  if (help) {
+    printHelp();
+    return;
+  }
+
+  const conflicts = listConflicts(target);
+
+  if (conflicts.length > 0 && !force) {
+    console.error("Installation blocked, the following already exist:");
+    for (const conflict of conflicts) {
+      console.error(`  ${conflict}`);
+    }
+    console.error("\nRe-run with --force to overwrite.");
+    process.exit(1);
+  }
+
+  copyPackageFiles(target, force);
+
+  console.log(`Installed Slider Pro AI Connector skills to ${target}`);
+  console.log(`  slider-skills/slider-pro-skills.md`);
+  console.log(`  slider-skills/slider-pro-skills-reference.md`);
+  console.log(`  components/ (${countComponents()} component prop docs)`);
+  console.log("\nPoint your AI coding agent at slider-skills/slider-pro-skills.md to load it.");
+  console.log('Then tell the agent: "npx @digital-gravy/etch-connector serve"');
+}
+
+main();

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "sliderpro-agentic-skills-etch",
+  "version": "0.1.0",
+  "description": "Installs the Slider Pro for Etch AI Connector skills files and component docs into any project",
+  "type": "module",
+  "bin": {
+    "sliderpro-agentic-skills-etch": "bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "skills-package"
+  ],
+  "scripts": {
+    "build": "node scripts/build.js",
+    "prepublishOnly": "node scripts/build.js"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "keywords": [
+    "agents",
+    "ai",
+    "wordpress",
+    "etch",
+    "slider-pro",
+    "sliderpro",
+    "splide"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/udoro/SliderPro-Etch-Docs.git",
+    "directory": "ai-connector/slider-skills-installer"
+  }
+}

package/skills-package/components/dwc-slide.md

@@ -0,0 +1,35 @@
+---
+icon: square
+---
+
+# DWC Slide
+
+A single slide, placed inside the **DWC Slider**'s `Slides` slot. It's a plain layout wrapper around whatever content you put inside it.
+
+***
+
+## Settings
+
+| Setting   | Renders to                    | Default | Description                                             |
+| --------- | ------------------------------- | ------- | --------------------------------------------------------- |
+| **Class** | `class` (on the slide's inner wrap) | `[]`    | Add your own CSS class in this **Class** field to style the slide. |
+
+***
+
+## Slots
+
+| Slot      | Description                          |
+| --------- | --------------------------------------- |
+| `Content` (`default`) | The slide's content: div, image, text, anything. |
+
+***
+
+## Slide title
+
+A slide can have a **title** that other features can read, most notably [Nav Buttons](dwc-slider-nav-button.md) that show the next/previous slide's name. The title is resolved in this order:
+
+1. A `data-slide-title="…"` attribute on the slide (an explicit title).
+2. The text of any element inside the slide marked `data-slide-title` (point it at a heading you already have, so nothing is retyped).
+3. Otherwise, the slide's first heading (`h1`–`h6`).
+
+If none of these exist, the slide simply has no title. Titles inside a nested slider or a nav button on the slide are ignored, so they can't leak up.

package/skills-package/components/dwc-slider-nav-button.md

@@ -0,0 +1,56 @@
+---
+icon: arrow-right
+---
+
+# DWC Slider Nav Button
+
+A clickable prev/next/first/last/jump-to-slide control. Drop it anywhere inside the Wrapper (the main slider, at wrapper level, or even inside a **thumbnail** slider) and it always drives the main slider. Use as many as you like: a prev button, a next button, and a row of "jump to slide" buttons can all coexist.
+
+***
+
+## Settings
+
+| Setting                | Renders to                                | Default | Options |
+| --------------------------- | ---------------------------------------------- | ------- | --------- |
+| **Navigation Type**          | `data-go-to`                                     | `next`  | `Next Slide` / `Previous Slide` / `First Slide` / `Last Slide` / `Go to Slide` |
+| **Custom Slide**             | `data-go-to` (used instead, when type is `custom`) | `1`   | Any slide number. Slide numbers are **1-based**, so the first slide is `1`, not `0`. |
+| **Button Class**             | `class` (on the button) | `[]` | Add your own CSS class in this **Button Class** field to style the button. |
+| **Button Wrapper Class**     | `class` (on the outer wrapper) | `[]` | Add a class to the button's outer wrapper, handy for positioning styles such as flex `order` when placing several nav buttons. |
+| **Use Custom Arrow**         | –                                                 | `false` | Shown only when Navigation Type is Next or Previous. Allows you to use a custom SVG instead of the default arrow icon. |
+| **Custom SVG**                | –                                                 | –       | Shown only when Use Custom Arrow is on. Paste SVG markup here. **Note:** to use custom SVG, enable "Allow \"unsafe\" HTML" in Etch Settings. |
+
+If Use Custom Arrow is off, Next and Previous buttons show a default chevron icon; First and Last always use their own default icons. Each button also gets an accessible label automatically (like "go to next slide") for screen readers.
+
+***
+
+## Slots
+
+| Slot                | Description                                                        |
+| ---------------------- | ----------------------------------------------------------------------- |
+| `content` (`Nav_Btn_Content`) | Optional. If left empty, the default icon (or custom SVG) is used. Fill it to replace the button's contents entirely. |
+
+***
+
+## Show the next / previous slide's title
+
+A **Next** or **Previous** button can display the title of the slide it will move to (for example a "Next: Apple Watch →" button). Put an element with the `data-slide-title` attribute inside the button's `content` slot (an empty `<span data-slide-title></span>` is enough) and the plugin keeps its text in step with the slider:
+
+- It shows the title of the slide that button navigates to, updating every time the slider moves.
+- On a **looping** slider it wraps (Next on the last slide shows the first slide's title). On a non-looping slider it's blank at the end where the button is disabled.
+- The title itself comes from each slide. See [DWC Slide → Slide title](dwc-slide.md#slide-title) for how it's sourced.
+
+This applies to **Next** and **Previous** buttons only; other navigation types ignore it.
+
+### Animating the button (`--title-width`)
+
+Alongside the text, the plugin sets a **`--title-width`** custom property on the button's outer wrapper (`.dwc-slider-nav-button-wrapper`) equal to the title's width, updated every time the title changes (and `0px` at a non-looping end, where it collapses). Use it to animate the wrapper's width as the text changes, to reveal the title only on hover:
+
+```css
+.dwc-slider-nav-button-wrapper { overflow: hidden; transition: width .25s ease; }
+.dwc-slider-nav-button-wrapper [data-slide-title] { white-space: nowrap; } /* measure the full single-line title */
+.dwc-slider-nav-button-wrapper:hover { width: calc(var(--btn-base, 3rem) + var(--title-width)); }
+```
+
+Give the title element `white-space: nowrap` so `--title-width` reflects the full title, and keep it in the flow: clip it with the wrapper's `overflow: hidden` rather than `display: none`, or its width can't be measured.
+
+**Sync the text swap with the animation.** `--title-width` updates the instant the slider moves, but the *visible* text is held back briefly so the wrapper can finish resizing before the new (often longer) title appears. That delay is set on the **slider** with **Slide Title Delay** (`data-slide-title-delay`, milliseconds, default `200`; `0` swaps instantly). See [DWC Slider → Settings](dwc-slider.md#settings). Set it to roughly match your `width` transition duration.

package/skills-package/components/dwc-slider-pagination.md

@@ -0,0 +1,60 @@
+---
+icon: ellipsis
+---
+
+# DWC Slider Pagination
+
+A standalone pagination component for full control over how each dot looks, as an alternative to the Slider's built-in **Pagination Dots** toggle (see [DWC Slider](dwc-slider.md#navigation)).
+
+Drop it anywhere inside the Wrapper (the main slider, at wrapper level, or even inside a **thumbnail** slider) and it always drives the main slider. Use as many as you like: put one above the slider and one below, and they'll stay in step. Each one keeps its own **Custom Pagination Mode**, so a `Template` pagination and a `Default` one can sit on the same slider.
+
+***
+
+## Settings
+
+| Setting                     | Renders to                                  | Default   | Options |
+| -------------------------------- | ---------------------------------------------- | --------- | --------- |
+| **Custom Pagination Mode**        | `data-custom-pagination` (lowercased)            | `Default` | `Default` / `Template` |
+
+### WRAPPER (shown when mode is Default)
+
+| Setting               | CSS variable    | Default              |
+| -------------------------- | ------------------ | --------------------------- |
+| **Background Color**        | `--bg`               | `rgba(0 0 0 / 40%)`          |
+| **Filter Blur**             | `--blur`             | `5px`                        |
+| **Padding**                 | `--padding`          | `0.5em 1em`                  |
+| **Border Radius**           | `--radius`           | –                             |
+
+### DOT (shown when mode is Default)
+
+| Setting               | CSS variable          | Default                                        |
+| -------------------------- | ------------------------- | -------------------------------------------------- |
+| **Size**                    | `--dot-size`               | `calc(var(--font-size) * 2)`                        |
+| **Background**              | `--dot-bg`                 | `color-mix(in oklch, white 20%, transparent)`       |
+| **Active Background**       | `--dot-bg-active`          | `#ff4d6a`                                           |
+| **Border Radius**           | `--dot-radius`             | `50%`                                               |
+| **Font Size**               | `--font-size`              | `1rem`                                              |
+| **Text Color**              | `--dot-color`              | –                                                     |
+| **Active Text Color**       | `--active-dot-color`       | –                                                     |
+
+### LAYOUT (always shown)
+
+| Setting        | CSS variable      | Default   | Options |
+| ------------------ | -------------------- | --------- | --------- |
+| **Position**         | `--position` (lowercased) | `Relative` | `Relative` / `Absolute` / `Static` / `Fixed` |
+| **Z-index**          | `--z-index`           | `initial`  | |
+| **Direction**        | `--direction` (lowercased) | `Row`  | `Row` / `Column` |
+| **Gap**              | `--gap`               | `1rem`     | |
+
+| Setting  | Description |
+| ------------ | -------------- |
+| **Class**     | Add your own CSS class in this **Class** field to style this component. |
+
+***
+
+## Template mode
+
+Set **Custom Pagination Mode** to `Template` and design the *first* item as your template: it gets cloned once per slide automatically. Inside your template, put a number, letter, or roman numeral placeholder as its own word: any digits (`1`, `007`, `2003`), or `a`, `A`, `i`, `I`. It's automatically replaced with that slide's number in the matching format.
+
+- **Numbers** count up starting from whatever number you type, so `1` produces `1, 2, 3, ...` while `2003` produces `2003, 2004, 2005, ...`. Leading zeros are preserved as the number grows (`007` → `007, 008, ..., 010, 011, ...`).
+- **Letters and roman numerals** (`a`, `A`, `i`, `I`) always start at the beginning of their sequence (a/b/c…, i/ii/iii…). Only numbers support a custom starting point.

package/skills-package/components/dwc-slider-play-pause.md

@@ -0,0 +1,25 @@
+---
+icon: circle-play
+---
+
+# DWC Slider Play-Pause
+
+A standalone play/pause button for autoplay, with its own style controls. Drop it anywhere inside the Wrapper (the main slider, at wrapper level, or inside a **thumbnail** slider) and it always controls the main slider's autoplay. It only does anything when the tracked Slider's **Auto Play** setting is on. This is the richer alternative to the Slider's own built-in Play/Pause Button flag (see [DWC Slider](dwc-slider.md#autoplay)).
+
+***
+
+## Settings
+
+These style the button. It connects to the main Slider on its own, so you don't need to switch anything on for it to be found. It works whenever the Slider's **Auto Play** is on, and stays active even if you turn the Slider's own built-in **Play/Pause Button** off. (With Auto Play off there's nothing to play or pause, so the button does nothing.)
+
+| Setting                      | CSS variable                   | Default                            |
+| --------------------------------- | ------------------------------------ | ---------------------------------------- |
+| **Size**                           | `--play-pause-size`                   | `40px`                                    |
+| **Border Radius**                  | `--play-pause-radius`                  | `50vw`                                    |
+| **Border**                         | `--play-pause-border`                  | `1px solid rgba(255, 255, 255, 0.1)`      |
+| **Color**                          | `--play-pause-clr`                     | `#fff`                                    |
+| **Hover/Active Border Color**      | `--play-pause-hover-border-clr`        | `#ff4d6a`                                 |
+| **Background**                     | `--play-pause-bg`                      | `rgba(0, 0, 0, 0.4)`                      |
+| **Hover/Active Background**        | `--play-pause-hover-bg`                | `rgba(255, 77, 106, 0.1)`                 |
+| **Background Blur**                | `--play-pause-bg-blur`                 | `8px`                                     |
+| **Class**                          | Add your own CSS class in this **Class** field to style the button. | `[]` |

package/skills-package/components/dwc-slider-progress.md

@@ -0,0 +1,70 @@
+---
+icon: gauge-circle-bolt
+---
+
+# DWC Slider Progress
+
+A standalone progress indicator (circular, bar, or counter) with its own full set of style controls. Drop it anywhere inside a Wrapper or Slider; it always tracks the **main** (or role-less) Slider, never a `thumbnails` Slider. This is the richer alternative to the Slider's own built-in Bar Progress / Circular Progress / Counter Progress flags (see [DWC Slider](dwc-slider.md#progress)).
+
+***
+
+## Settings
+
+| Setting            | Renders to           | Default    | Options |
+| ---------------------- | ------------------------ | ---------- | --------- |
+| **Progress type**       | `data-progress-type`      | `circular` | `Circular` / `Bar` / `Counter` |
+
+### Circular options (shown when Progress type is Circular)
+
+| Setting                 | Renders to             | Default | Description |
+| --------------------------- | -------------------------- | ------- | -------------- |
+| **-- Circular Size (px)**    | `data-circular-size`         | `52`    | Must be more than twice the Circular Radius. |
+| **-- Circular radius (px)**  | `data-circular-radius`       | `25`    | Must be less than half the Circular Size. |
+| **-- Circular Stroke (px)**  | `data-circular-stroke`       | `3`     | Ring thickness. |
+| **-- Circular Counter**      | `data-circular-counter`      | `true`  | Shows/hides the number inside the ring. |
+| **--- Counter Font Size (rem)** | `data-circular-font`      | `0.6`   | Shown only when Circular Counter is on. |
+
+### Mode (shown unless Progress type is Counter)
+
+| Setting            | Renders to        | Default  | Options |
+| ---------------------- | -------------------- | -------- | --------- |
+| **Progress Mode**       | `data-progress-mode`  | `slides` | `Slides` / `Timer`. Timer mode fills based on time remaining until the next autoplay advance (requires Auto Play to be on for the tracked Slider) |
+
+| Setting  | Description |
+| ------------ | -------------- |
+| **Class**     | Add your own CSS class in this **Class** field to style this component. |
+
+***
+
+## STYLE
+
+These control the colors, spacing, and look of the progress indicator.
+
+Shown when Progress type is Counter, or when it's Circular with Circular Counter on:
+
+| Setting               | CSS variable            | Default                       |
+| -------------------------- | ---------------------------- | ---------------------------------- |
+| **Visibility**              | –                              | `Default`. Options: `Default` / `Hide Total` / `Hide Current` |
+| **Total Color**             | `--total-clr`                 | `#8888a0`                          |
+| **Active Color**            | `--progress-clr-active`       | `#ff4d6a`                          |
+| **Font Size**               | `--progress-font-size`        | `0.8rem`                           |
+| **Active Font Size**        | `--progress-font-size-active` | `var(--progress-font-size)`        |
+| **Padding**                 | `--progress-padding`          | `4px 12px`                         |
+| **Background Blur**         | `--progress-bg-blur`          | `8px`                              |
+| **Separator Color**         | `--separator-clr`             | `var(--total-clr)`                 |
+| **Separator Gap**           | `--separator-gap`             | `-0.08em`                          |
+
+Shown when Progress type is Bar or Circular:
+
+| Setting                | CSS variable            | Default                        |
+| --------------------------- | ---------------------------- | ------------------------------------ |
+| **Progress Fill Color**      | `--progress-fill-clr`         | `#ff4d6a`                            |
+| **Progress Track Color**     | `--progress-track-clr`        | `rgba(255, 255, 255, 0.1)`           |
+
+Always shown:
+
+| Setting            | CSS variable          | Default                              |
+| ---------------------- | --------------------------- | ------------------------------------------ |
+| **Background Color**    | `--progress-bg`              | `rgba(0, 0, 0, 0.4)`                       |
+| **Border Radius**       | `--progress-border-radius`   | `20px`                                     |
+| **Border**              | `--progress-border`          | `1px solid rgba(255, 255, 255, 0.08)`      |

package/skills-package/components/dwc-slider-wrapper.md

@@ -0,0 +1,69 @@
+---
+icon: rectangle
+---
+
+# DWC Slider Wrapper
+
+The outer container. It holds one Slider (or a main Slider plus a thumbnail Slider) and any extra pieces like a counter or progress component.
+
+***
+
+## Settings
+
+| Setting                | Renders to   | Default | Description                                                                 |
+| ----------------------- | ------ | ------- | ----------------------------------------------------------------------------- |
+| **Wrapper Height**      | `--slider-wrapper-height` | `auto`  | Sets a minimum height for the wrapper.       |
+| **Space Between Sliders** | `--sliders-gap` | –       | The space between a main Slider and its thumbnail Slider (or any other items placed directly in the wrapper). |
+| **Custom Class**        | `class`  | `[]`    | Add your own CSS class in this **Custom Class** field to style the wrapper.     |
+| **Lazy Load Sliders**   | `data-lazy-init` | `false` | Waits to build **every** slider in this wrapper until it's about to scroll into view, as one group. Good for wrappers below the fold. |
+| **Lazy Preload Distance** | `data-lazy-preload` | `200` | Shown once Lazy Load Sliders is on. How many pixels before the wrapper reaches the screen it should start (e.g. `200` or `300px`). |
+| **Pause Sliders on Hover** | `data-group-pause-on-hover` | `false` | When on, hovering or keyboard-focusing **any** slider in this wrapper pauses **all** of them together (both Infinite Scroll marquees and autoplay carousels); they resume once the pointer and focus have both left. See the note below. |
+| **Edge Fade**           | `data-edge-fade` | `false` | Fades the left and right edges of the whole wrapper into transparency. |
+| **Fade Distance**       | `--fade-width` | `15%` | Shown once Edge Fade is on. How far the fade reaches in from each edge (any CSS length/percentage). |
+| **Fade Softness**       | `--fade-softness` | `0.8` | Shown once Edge Fade is on. How gradual the fade is on a `0`–`1` scale, where `1` is softest, `0` a sharp edge. |
+| **Fade Opacity**        | `--fade-opacity` | `0%` | Shown once Edge Fade is on. How visible the very edge stays. `0%` fades it fully out (default), up to `100%` for no fade at the edge. |
+| **Sliderless Sync → Custom Element** | `data-sync-custom-el` | – | A CSS selector for your own elements to cycle **without a slider**, in the **Sliderless Sync** group. In this mode the selector matches only elements **inside this wrapper**, so two decks that share a class stay independent. Filling it on a wrapper that has no slider inside turns on [Sync Without Slider](#sync-without-slider); the group's other fields (**Custom Element Nav**, **Loop**, **Leading Zeros**, **Title Delay**, **Arrow Keys**, **Auto Play**, **Interval**, **Pause on Hover**) appear once a selector is entered. Empty = off. |
+
+> To lazy-load a **single** slider rather than the whole wrapper, use the **PERFORMANCE** panel on the [DWC Slider](dwc-slider.md#performance) instead. Full details, including the thumbnail-sync safety rule, are in [Lazy loading below-the-fold sliders](../styling-and-responsive.md#lazy-loading-below-the-fold-sliders).
+
+> **Pause Sliders on Hover** makes the wrapper the single pause controller for its sliders, so it overrides each slider's own **Pause On Hover**, so moving the pointer from one row to the next won't restart the row you just left. Ideal for stacked logo-marquee rows that should behave as one unit. Nested sliders aren't affected.
+
+> **Edge Fade** is also available per-slider on the [DWC Slider → EDGE FADE](dwc-slider.md#edge-fade) panel; enabling it on the wrapper fades a whole stack of sliders at once.
+
+***
+
+## Sync Without Slider
+
+Normally [Sync Custom Element](dwc-slider.md#sync-custom-element) needs a real slider to follow: the slider moves, and the plugin mirrors its position onto your elements as `is-active` / `is-prev` / `is-next` classes. **Sync Without Slider** drops that requirement: the wrapper drives your elements directly, with no slider inside at all. It's built for designs that react purely to those three classes (a card stack, a step indicator, a set of tabs) where you never wanted a scrolling track in the first place.
+
+**How it works**
+
+1. On the **wrapper**, open the **Sliderless Sync** group and fill in **Custom Element** (`data-sync-custom-el`), a CSS selector pointing at the elements you want to cycle. In sliderless mode the selector matches only elements **inside this wrapper**, so each wrapper drives its own elements and two decks that share a class never affect each other. That's the only switch: a wrapper with this selector and **no slider inside** runs in Sync Without Slider mode automatically. The **first** selector in the list sets both the count and the order, so those elements act as the "slides". (Extra comma-separated selectors still cycle on their own count, exactly as with a real slider.)
+2. Add your controls inside the wrapper: custom **Nav Buttons** (arrows), a **counter**, **progress**, and **custom pagination** all work, and if you turn on **Custom Element Nav** (in the Sliderless Sync group) the elements themselves become clickable go-to controls.
+
+That's it, with no DWC Slider component required. The plugin puts `is-active` on the current element and `is-prev` / `is-next` on its neighbours, and your CSS does the rest.
+
+**What works, and what doesn't**
+
+- **Works:** custom arrows (including the next/previous [adjacent-slide title](dwc-slider-nav-button.md#show-the-next-previous-slides-title)), counter, bar and circular progress (in slides mode), custom pagination, and clickable synced elements via **Custom Element Nav**. Formatting fields in the **Sliderless Sync** group, **Leading Zeros** (counter) and **Title Delay** (nav-button title), are read from the wrapper.
+- **Controls show up only when you place them:** each control appears simply because you put its component inside the wrapper. There are no separate on/off toggles for it in this mode, and nothing is ever added for you. Drop in a Nav Button, a Counter, a Progress, or a Pagination and it works; leave it out and it's not there.
+- **Looping:** turn on **Loop** for the wrapper (`data-loop="true"`) to make the arrows wrap around; leave it off and the arrows dead-end and disable at the first and last element, just like a non-looping slider.
+- **Arrow keys:** turn on **Arrow Keys** (`data-arrow-keys="true"`) and the Left and Right arrow keys move between elements **while the component has focus**: that is, when the wrapper itself or one of its controls (a Nav Button, or a clickable synced element) is focused. It's deliberately scoped to focus rather than the whole page, so several sliderless wrappers don't all respond to the same keypress and normal page scrolling is left alone. The wrapper is made focusable automatically. Off by default.
+- **Overlapping elements (card stacks):** this mode is built for designs that react to the three classes, and those often stack their elements on top of each other, which makes **Custom Element Nav** clicks land on whichever element the browser decides received them, not the one that looks front-most. Before blaming the nav, read the overlap note under [DWC Slider → Sync Custom Element](dwc-slider.md#sync-custom-element): `opacity: 0` elements still take clicks, and depth applied to a *child* leaves the synced elements flat, so source order decides. It's fixed with `pointer-events` and `z-index` in your own CSS.
+- **Autoplay:** turn on **Auto Play** (`data-autoplay="true"`) and set an **Interval** (`data-interval`, milliseconds, default `4000`) to advance on a timer. It pauses while you hover or keyboard-focus the wrapper (turn that off with **Pause on Hover** = `false`), pauses while the browser tab is in the background, and won't run at all for visitors who prefer reduced motion. On a non-looping wrapper it stops at the last element; turn on **Loop** to keep cycling. There's no play/pause button or timer progress bar in this mode, just the auto-advance.
+
+> Leave the wrapper's **Sliderless Sync → Custom Element** empty (the default) and it behaves like a normal wrapper, looking for DWC Slider components inside it as usual. If the wrapper *does* contain a slider, this wrapper-level selector is ignored. Set **Sync Custom Element** on the [slider](dwc-slider.md#sync-custom-element) instead.
+
+***
+
+## Empty state
+
+If the wrapper's default slot has no content, it shows a placeholder message in the Etch canvas ("Add **DWC Slider** components here") instead of an empty box. This is builder-only and has no effect on the live site.
+
+***
+
+## Slots
+
+| Slot      | Description                                                                                   |
+| --------- | ----------------------------------------------------------------------------------------------- |
+| `default` (`Sliders_and_Controls`) | Everything inside the wrapper: one or more DWC Slider components, plus any navigation, pagination, progress, or play/pause components. |