@getvitops/astro 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,73 @@
 # @getvitops/astro
 
+## 0.9.0
+
+### Minor Changes
+
+- **Fixed: `Subgrid` and `Cards` rendered as unstyled lists, in every format.**
+
+  `Subgrid.astro` drew its geometry with Tailwind utilities — `grid-rows-subgrid` and
+  `row-span-(--row-span)`, the latter Tailwind v4's arbitrary-CSS-variable syntax. No framework CSS
+  layer defines those, so under `css.format: 'css'` or `'bricks'` the component had no layout at all.
+
+  It failed under `'tailwind'` too, which is the part worth internalising: **Tailwind v4 is JIT and
+  does not scan `node_modules`**, so a class that only a shipped component references is never
+  generated. A consumer had to add the package to Tailwind's `@source` by hand to get a subgrid;
+  without that, cards silently laid out at `grid-row: auto` — visually plausible, quietly wrong. The
+  same trap applied to `grid` in `Subgrid` and `sr-only` / `not-sr-only` in `Popover` / `Drawer`:
+  those are in the generator's `TW_CLASH` list, so the framework strips its own rules for them from
+  the tailwind bundle and defers to Tailwind — meaning they resolved only when the consumer's own
+  templates happened to use the same class.
+
+  The components now emit framework classes only, and the `subgrid` pattern owns the layout:
+  - `Subgrid` renders `<ul class="subgrid"><li>…` and ships no `<style>` block of its own.
+  - `Popover` / `Drawer` use a component-scoped `visually-hidden` instead of `sr-only`. The
+    `not-sr-only` on their icons was a no-op and is gone.
+  - The `subgrid` pattern absorbed the wrapped-row margin the component used to carry, so
+    hand-written `.subgrid` markup gets it too, and resets list markers on `ul`/`ol`.
+
+  **Also fixed: `Cards` discarded the `card` class and every class you put on a child.** It wrote
+  `card` onto the slotted element and then serialised that element's _inner_ HTML, dropping the
+  attribute it had just set. Child `class` and `style` now reach the rendered `<li>`.
+
+  **Breaking — the subgrid custom properties are renamed.** One `--subgrid-*` vocabulary now covers
+  both the pattern and the component; the old names are removed, not aliased:
+
+  | removed                         | use                  |
+  | ------------------------------- | -------------------- |
+  | `--items-per-row`, `--cols`     | `--subgrid-cols`     |
+  | `--rows-per-item`, `--row-span` | `--subgrid-row-span` |
+  | `--row-margin`                  | `--subgrid-row-gap`  |
+
+  `--subgrid-gap` (the grid gap) is unchanged, as are the `.subgrid-cols-*` / `.subgrid-rows-*` /
+  `.subgrid-responsive` modifiers. Anything still setting an old name falls back to the pattern
+  defaults — 3 columns, span 2 — so grep for them when you upgrade.
+
+- **`tailwindcss` and `@tailwindcss/vite` are now optional peer dependencies, not dependencies.**
+
+  Only `css.format: 'tailwind'` ever used them, but every consumer installed them — including
+  `'css'` and `'bricks'` projects that never touch Tailwind. The integration now loads
+  `@tailwindcss/vite` lazily inside that branch and throws a directive error if it is missing.
+
+  **Migration:** if you use `css.format: 'tailwind'` (the default), add both to your
+  `devDependencies` — `pnpm add -D tailwindcss @tailwindcss/vite`. Most Tailwind projects already
+  have them. Everyone else can drop them.
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies [c949cae]
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+  - @getvitops/generator@0.9.0
+  - @getvitops/core@0.9.0
+  - @getvitops/vite@0.9.0
+  - @getvitops/utils@0.9.0
+
 ## 0.8.0
 
 ### Minor Changes

package/dist/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../src/integration.ts"],"mappings":";;;;;UAuBiB,uBAAA;;EAEf,MAAA;EACA,YAAA;EAHe;EAKf,IAAA;;EAEA,UAAA;EACA,eAAA;AAAA;AAAA,UAGe,mBAAA;EAJf;EAMA,KAAA;EALe;EAOf,MAAA,GAAS,MAAM;EAJA;EAMf,GAAA;;;;;;;;EAQA,MAAA;AAAA;AAAA,UAGe,gBAAA;EACf,OAAA,GAAU,uBAAA;;EAEV,aAAA;EAFA;EAIA,GAAA,GAAM,mBAAmB;EAFzB;;;;;AAcM;AACP;;;;;EADC,MAAA;AAAA;AAAA,iBA2BsB,SAAA,CAAU,IAAA,GAAM,gBAAA,GAAwB,gBAAgB"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/integration.ts"],"mappings":";;;;;UAsBiB,uBAAA;;EAEf,MAAA;EACA,YAAA;EAHe;EAKf,IAAA;;EAEA,UAAA;EACA,eAAA;AAAA;AAAA,UAGe,mBAAA;EAJf;EAMA,KAAA;EALe;EAOf,MAAA,GAAS,MAAM;EAJA;EAMf,GAAA;;;;;;;;EAQA,MAAA;AAAA;AAAA,UAGe,gBAAA;EACf,OAAA,GAAU,uBAAA;;EAEV,aAAA;EAFA;EAIA,GAAA,GAAM,mBAAmB;EAFzB;;;;;AAcM;AACP;;;;;EADC,MAAA;AAAA;AAAA,iBA2BsB,SAAA,CAAU,IAAA,GAAM,gBAAA,GAAwB,gBAAgB"}

package/dist/index.mjs

@@ -3,7 +3,6 @@ import { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import { faviconLinks, generateFavicons, writeFaviconManifest } from "@getvitops/utils";
 import vitops from "@getvitops/vite";
-import tailwindcss from "@tailwindcss/vite";
 
 export * from "@getvitops/utils"
 
@@ -94,7 +93,15 @@ function getvitops(opts = {}) {
 					out,
 					...editor ? { editorManifestDir: publicDir } : {}
 				})];
-				if (format === "tailwind") plugins.push(...tailwindcss());
+				if (format === "tailwind") {
+					let tailwindcss;
+					try {
+						({default: tailwindcss} = await import("@tailwindcss/vite"));
+					} catch {
+						throw new Error("[getvitops] css.format: 'tailwind' requires `tailwindcss` and `@tailwindcss/vite` in your devDependencies — install them, or switch to css.format: 'css' for the standalone bundle.");
+					}
+					plugins.push(...tailwindcss());
+				}
 				updateConfig({ vite: { plugins } });
 				const cssFile = format === "tailwind" ? "tailwind.css" : "styles.css";
 				if (opts.css.inject !== false) {

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../src/integration.ts"],"sourcesContent":["/**\n * @getvitops/astro — the Astro integration. One entry wires the design system's\n * `<head>` contributions into a consumer site:\n *   - favicons + PWA manifest (generated into public/),\n *   - the web-component runtime bundles (copied into public/vitops/),\n *   - (opt-in) the design-system CSS, generated + auto-injected (no manual import).\n * The `<Head />` component (shipped alongside) renders the tags, reading resolved\n * config from the `virtual:getvitops/head` module this integration provides.\n */\nimport { cpSync, existsSync } from 'node:fs';\nimport { dirname, join, resolve } from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport type { Format } from '@getvitops/generator';\nimport {\n  type FaviconLink,\n  faviconLinks,\n  generateFavicons,\n  writeFaviconManifest,\n} from '@getvitops/utils';\nimport vitops from '@getvitops/vite';\nimport tailwindcss from '@tailwindcss/vite';\nimport type { AstroIntegration } from 'astro';\n\nexport interface GetvitopsFaviconOptions {\n  /** Source SVG or PNG. */\n  source: string;\n  lowResSource?: string;\n  /** App name → enables `site.webmanifest`. */\n  name?: string;\n  /** PWA theme color (also `<meta name=\"theme-color\">`). */\n  themeColor?: string;\n  backgroundColor?: string;\n}\n\nexport interface GetvitopsCssOptions {\n  /** Path to design-system.json (default 'design-system.json'). */\n  input?: string;\n  /** Output format (default 'tailwind'). */\n  format?: Format;\n  /** Directory the generated CSS is written to (default 'src/styles'). */\n  out?: string;\n  /**\n   * Auto-inject the generated stylesheet into every SSR page (default true).\n   * Set false when other integrations add routes that must not inherit the\n   * design system (e.g. EmDash's `/_emdash/admin`) — then import the generated\n   * file (`<out>/tailwind.css` or `<out>/styles.css`) from your site layout so\n   * only your own pages (and previews rendered through them) are styled.\n   */\n  inject?: boolean;\n}\n\nexport interface GetvitopsOptions {\n  favicon?: GetvitopsFaviconOptions;\n  /** Copy + link the web-component bundles (default true). */\n  webComponents?: boolean;\n  /** Generate + auto-inject the design-system CSS. Off unless provided. */\n  css?: GetvitopsCssOptions;\n  /**\n   * Ship the live theme editor (default false).\n   *\n   * Copies `editor.js` into `public/vitops/`, loads it from `<Head />`, and mirrors\n   * the generated `design-manifest.json` next to it so `<wc-theme-editor>` resolves\n   * its default `/vitops/design-manifest.json`. Requires `css` (the manifest is a\n   * `css`-format output) — place the `<wc-theme-editor>` tag in your layout yourself.\n   *\n   * Editing is live on any deploy; **saving back** to `design-system.json` needs the\n   * dev server, so on a static build that button simply isn't rendered.\n   */\n  editor?: boolean;\n}\n\ninterface HeadData {\n  favicons: boolean;\n  faviconLinks: FaviconLink[];\n  themeColor: string | null;\n  webComponents: boolean;\n  wcBase: string;\n  editor: boolean;\n}\n\nconst VIRTUAL_ID = 'virtual:getvitops/head';\nconst RESOLVED_ID = `\\0${VIRTUAL_ID}`;\n\nfunction virtualHeadPlugin(data: HeadData) {\n  return {\n    name: '@getvitops/astro:virtual-head',\n    resolveId(id: string) {\n      return id === VIRTUAL_ID ? RESOLVED_ID : null;\n    },\n    load(id: string) {\n      return id === RESOLVED_ID ? `export default ${JSON.stringify(data)};` : null;\n    },\n  };\n}\n\nexport default function getvitops(opts: GetvitopsOptions = {}): AstroIntegration {\n  return {\n    name: '@getvitops/astro',\n    hooks: {\n      'astro:config:setup': async ({ config, updateConfig, injectScript, logger }) => {\n        const root = fileURLToPath(config.root);\n        const publicDir = fileURLToPath(config.publicDir);\n        const webComponents = opts.webComponents !== false;\n        const editor = opts.editor === true;\n        if (editor && !opts.css)\n          logger.warn('editor: true needs a `css` config — it reads design-manifest.json.');\n        const hasManifest = !!(opts.favicon?.name && opts.favicon?.themeColor);\n        let hasSvg = false;\n\n        // 1. Favicons + manifest → public/\n        if (opts.favicon) {\n          const source = resolve(root, opts.favicon.source);\n          hasSvg = source.endsWith('.svg');\n          await generateFavicons({\n            source,\n            outputDir: publicDir,\n            ...(opts.favicon.lowResSource\n              ? { lowResSource: resolve(root, opts.favicon.lowResSource) }\n              : {}),\n          });\n          if (opts.favicon.name && opts.favicon.themeColor) {\n            await writeFaviconManifest(publicDir, {\n              name: opts.favicon.name,\n              themeColor: opts.favicon.themeColor,\n              ...(opts.favicon.backgroundColor\n                ? { backgroundColor: opts.favicon.backgroundColor }\n                : {}),\n            });\n          }\n          logger.info('generated favicons + manifest → public/');\n        }\n\n        // 2. Web-component bundles → public/vitops/\n        if (webComponents) {\n          const corePkg = fileURLToPath(import.meta.resolve('@getvitops/core/package.json'));\n          const coreDist = join(dirname(corePkg), 'dist');\n          const dest = join(publicDir, 'vitops');\n          if (existsSync(coreDist)) {\n            const bundles = ['polyfills.js', 'deferred.js', 'elements.js', 'polyfills'];\n            if (editor) bundles.push('editor.js');\n            for (const f of bundles) {\n              const src = join(coreDist, f);\n              if (existsSync(src)) cpSync(src, join(dest, f), { recursive: true });\n            }\n            logger.info('copied web-component bundles → public/vitops/');\n          } else {\n            logger.warn(\n              `@getvitops/core dist not found (${coreDist}); run build:core. Skipping WC copy.`,\n            );\n          }\n        }\n\n        // 3. Virtual head module for <Head/>\n        updateConfig({\n          vite: {\n            plugins: [\n              virtualHeadPlugin({\n                favicons: !!opts.favicon,\n                faviconLinks: opts.favicon ? faviconLinks({ hasSvg, manifest: hasManifest }) : [],\n                themeColor: opts.favicon?.themeColor ?? null,\n                webComponents,\n                wcBase: '/vitops',\n                editor,\n              }),\n            ],\n          },\n        });\n\n        // 4. CSS — generate + compile + auto-inject (consumer imports nothing).\n        if (opts.css) {\n          const format: Format = opts.css.format ?? 'tailwind';\n          const out = opts.css.out ?? 'src/styles';\n          const plugins = [\n            vitops({\n              input: opts.css.input ?? 'design-system.json',\n              format,\n              out,\n              // Mirrored inside the generate pass so the served copy can never be\n              // missing on a cold start or stale after a config edit.\n              ...(editor ? { editorManifestDir: publicDir } : {}),\n            }),\n          ];\n          // tailwindcss() is typed against a newer vite than @getvitops/vite's\n          // peer; the Plugin shapes are structurally compatible at runtime\n          // (Astro forwards them verbatim), so bridge the two type identities.\n          if (format === 'tailwind') plugins.push(...(tailwindcss() as unknown as typeof plugins));\n          updateConfig({ vite: { plugins } });\n          const cssFile = format === 'tailwind' ? 'tailwind.css' : 'styles.css';\n          if (opts.css.inject !== false) {\n            const cssPath = resolve(root, out, cssFile);\n            injectScript('page-ssr', `import ${JSON.stringify(cssPath)};`);\n            logger.info(`design-system CSS (${format}) auto-injected from ${out}/${cssFile}`);\n          } else {\n            logger.info(\n              `design-system CSS (${format}) generated at ${out}/${cssFile} (inject: false — import it from your layout)`,\n            );\n          }\n        }\n      },\n    },\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/integration.ts"],"sourcesContent":["/**\n * @getvitops/astro — the Astro integration. One entry wires the design system's\n * `<head>` contributions into a consumer site:\n *   - favicons + PWA manifest (generated into public/),\n *   - the web-component runtime bundles (copied into public/vitops/),\n *   - (opt-in) the design-system CSS, generated + auto-injected (no manual import).\n * The `<Head />` component (shipped alongside) renders the tags, reading resolved\n * config from the `virtual:getvitops/head` module this integration provides.\n */\nimport { cpSync, existsSync } from 'node:fs';\nimport { dirname, join, resolve } from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport type { Format } from '@getvitops/generator';\nimport {\n  type FaviconLink,\n  faviconLinks,\n  generateFavicons,\n  writeFaviconManifest,\n} from '@getvitops/utils';\nimport vitops from '@getvitops/vite';\nimport type { AstroIntegration } from 'astro';\n\nexport interface GetvitopsFaviconOptions {\n  /** Source SVG or PNG. */\n  source: string;\n  lowResSource?: string;\n  /** App name → enables `site.webmanifest`. */\n  name?: string;\n  /** PWA theme color (also `<meta name=\"theme-color\">`). */\n  themeColor?: string;\n  backgroundColor?: string;\n}\n\nexport interface GetvitopsCssOptions {\n  /** Path to design-system.json (default 'design-system.json'). */\n  input?: string;\n  /** Output format (default 'tailwind'). */\n  format?: Format;\n  /** Directory the generated CSS is written to (default 'src/styles'). */\n  out?: string;\n  /**\n   * Auto-inject the generated stylesheet into every SSR page (default true).\n   * Set false when other integrations add routes that must not inherit the\n   * design system (e.g. EmDash's `/_emdash/admin`) — then import the generated\n   * file (`<out>/tailwind.css` or `<out>/styles.css`) from your site layout so\n   * only your own pages (and previews rendered through them) are styled.\n   */\n  inject?: boolean;\n}\n\nexport interface GetvitopsOptions {\n  favicon?: GetvitopsFaviconOptions;\n  /** Copy + link the web-component bundles (default true). */\n  webComponents?: boolean;\n  /** Generate + auto-inject the design-system CSS. Off unless provided. */\n  css?: GetvitopsCssOptions;\n  /**\n   * Ship the live theme editor (default false).\n   *\n   * Copies `editor.js` into `public/vitops/`, loads it from `<Head />`, and mirrors\n   * the generated `design-manifest.json` next to it so `<wc-theme-editor>` resolves\n   * its default `/vitops/design-manifest.json`. Requires `css` (the manifest is a\n   * `css`-format output) — place the `<wc-theme-editor>` tag in your layout yourself.\n   *\n   * Editing is live on any deploy; **saving back** to `design-system.json` needs the\n   * dev server, so on a static build that button simply isn't rendered.\n   */\n  editor?: boolean;\n}\n\ninterface HeadData {\n  favicons: boolean;\n  faviconLinks: FaviconLink[];\n  themeColor: string | null;\n  webComponents: boolean;\n  wcBase: string;\n  editor: boolean;\n}\n\nconst VIRTUAL_ID = 'virtual:getvitops/head';\nconst RESOLVED_ID = `\\0${VIRTUAL_ID}`;\n\nfunction virtualHeadPlugin(data: HeadData) {\n  return {\n    name: '@getvitops/astro:virtual-head',\n    resolveId(id: string) {\n      return id === VIRTUAL_ID ? RESOLVED_ID : null;\n    },\n    load(id: string) {\n      return id === RESOLVED_ID ? `export default ${JSON.stringify(data)};` : null;\n    },\n  };\n}\n\nexport default function getvitops(opts: GetvitopsOptions = {}): AstroIntegration {\n  return {\n    name: '@getvitops/astro',\n    hooks: {\n      'astro:config:setup': async ({ config, updateConfig, injectScript, logger }) => {\n        const root = fileURLToPath(config.root);\n        const publicDir = fileURLToPath(config.publicDir);\n        const webComponents = opts.webComponents !== false;\n        const editor = opts.editor === true;\n        if (editor && !opts.css)\n          logger.warn('editor: true needs a `css` config — it reads design-manifest.json.');\n        const hasManifest = !!(opts.favicon?.name && opts.favicon?.themeColor);\n        let hasSvg = false;\n\n        // 1. Favicons + manifest → public/\n        if (opts.favicon) {\n          const source = resolve(root, opts.favicon.source);\n          hasSvg = source.endsWith('.svg');\n          await generateFavicons({\n            source,\n            outputDir: publicDir,\n            ...(opts.favicon.lowResSource\n              ? { lowResSource: resolve(root, opts.favicon.lowResSource) }\n              : {}),\n          });\n          if (opts.favicon.name && opts.favicon.themeColor) {\n            await writeFaviconManifest(publicDir, {\n              name: opts.favicon.name,\n              themeColor: opts.favicon.themeColor,\n              ...(opts.favicon.backgroundColor\n                ? { backgroundColor: opts.favicon.backgroundColor }\n                : {}),\n            });\n          }\n          logger.info('generated favicons + manifest → public/');\n        }\n\n        // 2. Web-component bundles → public/vitops/\n        if (webComponents) {\n          const corePkg = fileURLToPath(import.meta.resolve('@getvitops/core/package.json'));\n          const coreDist = join(dirname(corePkg), 'dist');\n          const dest = join(publicDir, 'vitops');\n          if (existsSync(coreDist)) {\n            const bundles = ['polyfills.js', 'deferred.js', 'elements.js', 'polyfills'];\n            if (editor) bundles.push('editor.js');\n            for (const f of bundles) {\n              const src = join(coreDist, f);\n              if (existsSync(src)) cpSync(src, join(dest, f), { recursive: true });\n            }\n            logger.info('copied web-component bundles → public/vitops/');\n          } else {\n            logger.warn(\n              `@getvitops/core dist not found (${coreDist}); run build:core. Skipping WC copy.`,\n            );\n          }\n        }\n\n        // 3. Virtual head module for <Head/>\n        updateConfig({\n          vite: {\n            plugins: [\n              virtualHeadPlugin({\n                favicons: !!opts.favicon,\n                faviconLinks: opts.favicon ? faviconLinks({ hasSvg, manifest: hasManifest }) : [],\n                themeColor: opts.favicon?.themeColor ?? null,\n                webComponents,\n                wcBase: '/vitops',\n                editor,\n              }),\n            ],\n          },\n        });\n\n        // 4. CSS — generate + compile + auto-inject (consumer imports nothing).\n        if (opts.css) {\n          const format: Format = opts.css.format ?? 'tailwind';\n          const out = opts.css.out ?? 'src/styles';\n          const plugins = [\n            vitops({\n              input: opts.css.input ?? 'design-system.json',\n              format,\n              out,\n              // Mirrored inside the generate pass so the served copy can never be\n              // missing on a cold start or stale after a config edit.\n              ...(editor ? { editorManifestDir: publicDir } : {}),\n            }),\n          ];\n          // Tailwind is an optional peer — only the `tailwind` format needs it,\n          // so it's loaded here rather than imported at module scope. (The\n          // plugin is typed against a newer vite than @getvitops/vite's peer;\n          // the Plugin shapes are structurally compatible at runtime — Astro\n          // forwards them verbatim — so bridge the two type identities.)\n          if (format === 'tailwind') {\n            let tailwindcss: () => unknown[];\n            try {\n              ({ default: tailwindcss } = await import('@tailwindcss/vite'));\n            } catch {\n              throw new Error(\n                \"[getvitops] css.format: 'tailwind' requires `tailwindcss` and `@tailwindcss/vite` \" +\n                  'in your devDependencies — install them, or switch to css.format: ' +\n                  \"'css' for the standalone bundle.\",\n              );\n            }\n            plugins.push(...(tailwindcss() as unknown as typeof plugins));\n          }\n          updateConfig({ vite: { plugins } });\n          const cssFile = format === 'tailwind' ? 'tailwind.css' : 'styles.css';\n          if (opts.css.inject !== false) {\n            const cssPath = resolve(root, out, cssFile);\n            injectScript('page-ssr', `import ${JSON.stringify(cssPath)};`);\n            logger.info(`design-system CSS (${format}) auto-injected from ${out}/${cssFile}`);\n          } else {\n            logger.info(\n              `design-system CSS (${format}) generated at ${out}/${cssFile} (inject: false — import it from your layout)`,\n            );\n          }\n        }\n      },\n    },\n  };\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getvitops/astro",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Astro integration for the Vitops design system — favicons/PWA, web-component scripts, and CSS, via a getvitops() integration + <Head /> component.",
   "license": "MIT",
   "files": [
@@ -39,24 +39,32 @@
     "access": "public"
   },
   "dependencies": {
-    "@tailwindcss/vite": "^4.3.3",
-    "tailwindcss": "^4.3.3",
-    "@getvitops/core": "0.8.0",
-    "@getvitops/vite": "0.8.0",
-    "@getvitops/generator": "0.8.0",
-    "@getvitops/utils": "0.8.0"
+    "@getvitops/core": "0.9.0",
+    "@getvitops/vite": "0.9.0",
+    "@getvitops/generator": "0.9.0",
+    "@getvitops/utils": "0.9.0"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.3.3",
     "astro": "^7.1.2",
+    "tailwindcss": "^4.3.3",
     "vitest": "^4.1.9"
   },
   "peerDependencies": {
+    "@tailwindcss/vite": ">=4",
     "astro": ">=7",
-    "astro-icon": ">=1"
+    "astro-icon": ">=1",
+    "tailwindcss": ">=4"
   },
   "peerDependenciesMeta": {
+    "@tailwindcss/vite": {
+      "optional": true
+    },
     "astro-icon": {
       "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
     }
   }
 }

package/src/components/Cards.astro

@@ -1,32 +1,34 @@
 ---
+/**
+ * Cards — a `Subgrid` whose items are `card`s. The child's own class and style
+ * ride along, so `<article class="bg-surface">` becomes `<li class="card bg-surface">`.
+ *
+ * The class has to be put on the `<li>` we hand to Subgrid rather than written
+ * into the slotted element: `serialize()` returns a node's *inner* HTML, so the
+ * element carrying the attribute is discarded on the way through.
+ */
 import type { HTMLAttributes } from 'astro/types';
 import Subgrid from './Subgrid.astro';
-import { parseRenderedSlots, serialize } from '@getvitops/utils';
+import { parseRenderedSlots, getAttribute, serialize } from '@getvitops/utils';
 
 export interface Props extends HTMLAttributes<'ul'> {}
 
 const { class: className, ...rest } = Astro.props;
 
 const nodes = parseRenderedSlots(await Astro.slots.render('default'));
-const slots = nodes.filter(node => 'tagName' in node).map(node => {
-  const cls = node.attrs?.find(attr => attr.name === 'class');
-  const value = `card${cls ? ' ' + cls.value : ''}`;
-  if (cls) {
-    cls.value = value;
-  } else {
-    node.attrs.push({ name: 'class', value });
-  }
-  
-  return { html: serialize(node), attrs: node.attrs };
-});
+const slots = nodes.filter(node => 'tagName' in node).map(node => ({
+  html: serialize(node),
+  class: getAttribute(node, 'class'),
+  style: getAttribute(node, 'style'),
+}));
 ---
 
 <Subgrid
   role="list"
-  class:list={["no-list-markers", className]}
+  class={className}
   {...rest}
 >
   {slots.map((slot) => (
-    <li class="card-wrapper" style={slot.attrs?.find(attr => attr.name === 'style')?.value} set:html={slot.html}></li>
+    <li class:list={["card", slot.class]} style={slot.style} set:html={slot.html}></li>
   ))}
 </Subgrid>

package/src/components/Drawer.astro

@@ -49,8 +49,8 @@ const { class: dialogAttrClass, style: dialogAttrStyle, ...dialogRestAttrs } = a
     aria-label={trigger?.label || 'Open drawer'}
     {...triggerRestAttrs}
   >
-    <span class={trigger?.icon ? 'sr-only' : ''}>{trigger?.label || 'Open'}</span>
-    {trigger?.icon && <Icon name={iconResolver(trigger.icon)} class="not-sr-only" />}
+    <span class:list={[trigger?.icon && 'visually-hidden']}>{trigger?.label || 'Open'}</span>
+    {trigger?.icon && <Icon name={iconResolver(trigger.icon)} />}
   </button>
 </slot>
 
@@ -63,3 +63,20 @@ const { class: dialogAttrClass, style: dialogAttrStyle, ...dialogRestAttrs } = a
 >
   <slot />
 </dialog>
+
+<style>
+  /* Icon-only triggers keep their label for screen readers. Component-scoped
+     rather than the framework's `sr-only`: that one is in the generator's
+     TW_CLASH list, so the tailwind format ships no rule for it. */
+  .visually-hidden {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+</style>

package/src/components/Popover.astro

@@ -48,8 +48,8 @@ const { class: triggerAttrClass, ...triggerRestAttrs } = trigger?.attrs ?? {};
     aria-label={trigger?.label || 'Open'}
     {...triggerRestAttrs}
   >
-  <span class={trigger?.icon ? 'sr-only' : ''}>{trigger?.label || 'Open'}</span>
-    {trigger?.icon && <Icon name={iconResolver(trigger.icon)} class="not-sr-only" />}
+  <span class:list={[trigger?.icon && 'visually-hidden']}>{trigger?.label || 'Open'}</span>
+    {trigger?.icon && <Icon name={iconResolver(trigger.icon)} />}
   </button>
 </slot>
 
@@ -87,4 +87,19 @@ const { class: triggerAttrClass, ...triggerRestAttrs } = trigger?.attrs ?? {};
     font-family: inherit;
     color: inherit;
   }
+
+  /* Icon-only triggers keep their label for screen readers. Component-scoped
+     rather than the framework's `sr-only`: that one is in the generator's
+     TW_CLASH list, so the tailwind format ships no rule for it. */
+  .visually-hidden {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
 </style>

package/src/components/Subgrid.astro

@@ -1,4 +1,19 @@
 ---
+/**
+ * Subgrid — re-emits slotted children as `<li>` items of a `.subgrid` grid, so
+ * the tranches inside each one align on shared row lines. Every declaration
+ * lives in the framework's `subgrid` pattern (patterns/subgrid.css), which is
+ * emitted in all three output formats; this file is markup only.
+ *
+ * Nothing here may reach for a Tailwind utility: Tailwind doesn't scan
+ * node_modules, so a class only it can emit is silently never generated — and
+ * classes in the generator's TW_CLASH list are stripped from the framework's
+ * own tailwind bundle by design.
+ *
+ * Size it from the consumer's own CSS, which keeps media-query overrides
+ * working: `--subgrid-cols`, `--subgrid-row-span`, `--subgrid-gap`,
+ * `--subgrid-row-gap`. `--num-items` is set here for nth-child-style maths.
+ */
 import type { HTMLAttributes } from 'astro/types';
 import { parseRenderedSlots, getAttribute, serialize, styleList } from '@getvitops/utils';
 
@@ -10,23 +25,8 @@ const nodes = parseRenderedSlots(await Astro.slots.render('default'));
 const slots = nodes.filter(node => 'tagName' in node).map(node  => ({ html: serialize(node), attrs: node.attrs }));
 ---
 
-<style>
-  ul {
-    grid-template-columns: repeat(var(--cols, var(--_cols, 1)), minmax(0, 1fr));
-  }
-
-  li {
-    --current-row: round(down, calc((sibling-index() - 1) / var(--cols)), 1);
-      
-      /* Apply the extra gap ONLY if the row index is > 0.
-         We use clamp to ensure the multiplier is either 0 or 1.
-      */
-      --row-gap-multiplier: clamp(0, var(--current-row), 1);
-      margin-block-start: calc(var(--row-gap-multiplier) * var(--row-margin));
-  }
-</style>
-<ul class:list={["grid", className]} style={styleList({'--num-items': slots.length}, style)}>
+<ul class:list={["subgrid", className]} style={styleList({'--num-items': slots.length}, style)}>
   {slots.map((slot) => (
-    <li class:list={["grid grid-rows-subgrid row-span-(--row-span)", getAttribute(slot, 'class')]} style={styleList(getAttribute(slot, 'style'))} set:html={slot.html}></li>
+    <li class:list={[getAttribute(slot, 'class')]} style={styleList(getAttribute(slot, 'style'))} set:html={slot.html}></li>
   ))}
-</ul>
+</ul>