@nordwerk/scroll-carousel 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/AGENTS.md +13 -1
  2. package/CHANGELOG.md +7 -0
  3. package/README.md +29 -0
  4. package/dist/react.js +1 -0
  5. package/package.json +3 -1
package/AGENTS.md CHANGED
@@ -39,6 +39,12 @@ JavaScript, never move slides with transforms, never clone slides.
39
39
  9. Text: pass `labels` for dots and the live region in the page's language, and give the arrow
40
40
  buttons their own `aria-label`s ("Previous products", "Next products").
41
41
  10. Do not add `disabled` to the arrows yourself; the script manages `aria-disabled`.
42
+ 11. Tailwind CSS: `@import "@nordwerk/scroll-carousel/carousel.css" layer(components);`, layout as
43
+ arbitrary properties (`[--sc-per-view:2]`, `@3xl:[--sc-per-view:4]` on `.sc-track`), own
44
+ controls styled from the state attributes (`group-data-[sc-overflow]/row:grid`,
45
+ `aria-disabled:opacity-30`). Copyable example: the `#tailwind` section of the docs site.
46
+ 12. Next.js App Router: import `<Carousel>` from `@nordwerk/scroll-carousel/react` in a Server
47
+ Component as is; the entry carries `'use client'`.
42
48
 
43
49
  ### Recipes (CSS on the root or track, options in attach)
44
50
 
@@ -81,7 +87,13 @@ JavaScript, never move slides with transforms, never clone slides.
81
87
  - `site/`: the documentation site (`generate.mjs` writes `_site/`), including the wireframe
82
88
  patterns in `wireframes.mjs`. Content there is fictional. CI publishes it to GitHub Pages;
83
89
  www.nordwerk.studio/oss/scroll-carousel serves the same files through a proxy that rewrites
84
- `<base href>`, so every link in the site must stay relative to `<base>`.
90
+ `<base href>`, so every link in the site must stay relative to `<base>`. The proxy also puts the
91
+ studio site's own header and footer in place of `<!--nw:header-->` (first child of `.sheet`)
92
+ and `<!--nw:footer-->` (right after `.sheet`); keep both, keep `<html lang="en">` and `<body>`
93
+ free of other attributes, keep `data-hero` on the introduction, and never style the studio's
94
+ class names (band, pill, brand, brand-mark, links, link, cta, foot, grid, brand-col, tag, label,
95
+ base) or set `--wrap` in the site CSS. Locally and on GitHub Pages the site has no header or
96
+ footer.
85
97
  - `test/unit/`: node's test runner on the TypeScript sources.
86
98
  - `test/e2e/`: Playwright against `_site/` and the adapter fixtures from `scripts/fixtures.mjs`.
87
99
 
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.1.2 (2026-09-22)
4
+
5
+ - React entry marked `'use client'`: `<Carousel>` now works in Next.js App Router Server
6
+ Components (it failed to prerender before, as the hooks are not available on the server).
7
+ - Documentation: a copy-and-paste Tailwind CSS v4 example with a live preview compiled by
8
+ Tailwind, and notes for Tailwind and Next.js.
9
+
3
10
  ## 0.1.1 (2026-09-21)
4
11
 
5
12
  - Astro and `templateLabels`: `statusSingle` template for when only one slide is visible, so a
package/README.md CHANGED
@@ -102,6 +102,35 @@ import Carousel from '@nordwerk/scroll-carousel/astro';
102
102
  Slides go in the default slot, one element each. Drag and autoplay are loaded only on pages that
103
103
  use them. Labels take templates: `labels={{ page: 'Slide {n} of {count}' }}`.
104
104
 
105
+ ### Tailwind CSS
106
+
107
+ Import the stylesheet into the components layer, so utilities on your markup can override it, and
108
+ set the layout with arbitrary properties and container-query variants:
109
+
110
+ ```css
111
+ @import "tailwindcss";
112
+ @import "@nordwerk/scroll-carousel/carousel.css" layer(components);
113
+ ```
114
+
115
+ ```html
116
+ <div class="sc group/row relative [--sc-gap:1rem]">
117
+ <ul data-sc-track tabindex="0" aria-label="New arrivals"
118
+ class="sc-track [--sc-group:page] [--sc-per-view:1.3] @md:[--sc-per-view:2] @3xl:[--sc-per-view:4]">
119
+ <li>…</li>
120
+ </ul>
121
+ <button data-sc-next aria-label="Next products"
122
+ class="absolute end-3 top-1/3 hidden group-data-[sc-overflow]/row:grid aria-disabled:opacity-30">›</button>
123
+ </div>
124
+ ```
125
+
126
+ The complete example to copy, with a live preview compiled by Tailwind, is on the
127
+ [documentation site](https://www.nordwerk.studio/oss/scroll-carousel#tailwind).
128
+
129
+ ### Next.js
130
+
131
+ The React entry is marked `'use client'`, so `<Carousel>` can be used directly in Server
132
+ Components of the App Router; it renders on the server and attaches in the browser.
133
+
105
134
  ## Markup
106
135
 
107
136
  | Element | Required | Purpose |
package/dist/react.js CHANGED
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  import {
2
3
  createAdapter
3
4
  } from "./shared/chunk-I3QEUR7L.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nordwerk/scroll-carousel",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "description": "A dependency-free carousel on native scrolling: CSS scroll snap first, arrows, dots, paging and an API as progressive enhancement.",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -89,6 +89,7 @@
89
89
  "@axe-core/playwright": "4.13.0",
90
90
  "@fontsource-variable/geist": "^5.3.0",
91
91
  "@playwright/test": "1.61.1",
92
+ "@tailwindcss/cli": "4.3.3",
92
93
  "@types/node": "^24.0.0",
93
94
  "@types/react": "^19.3.0",
94
95
  "@types/react-dom": "^19.3.0",
@@ -98,6 +99,7 @@
98
99
  "preact-render-to-string": "6.7.0",
99
100
  "react": "^19.3.0",
100
101
  "react-dom": "^19.3.0",
102
+ "tailwindcss": "4.3.3",
101
103
  "typescript": "^7.0.2"
102
104
  },
103
105
  "engines": {