From c63f0a2cbe6e4debd2cb05cef3b237655d514115 Mon Sep 17 00:00:00 2001 From: Virgil Date: Tue, 31 Mar 2026 19:44:30 +0000 Subject: [PATCH] feat(html): add responsive variant selector helper Co-Authored-By: Virgil --- docs/architecture.md | 2 ++ docs/history.md | 3 ++- docs/index.md | 4 ++-- responsive.go | 43 +++++++++++++++++++++++++++++++++++++++++++ responsive_test.go | 16 ++++++++++++++++ 5 files changed, 65 insertions(+), 3 deletions(-) diff --git a/docs/architecture.md b/docs/architecture.md index a5ff7e7..2fd2751 100644 --- a/docs/architecture.md +++ b/docs/architecture.md @@ -165,6 +165,8 @@ html.NewResponsive(). Each variant renders inside a `
` container. Variants render in insertion order. CSS media queries or JavaScript can target these containers for show/hide logic. +`VariantSelector(name)` returns a CSS attribute selector for a specific responsive variant, making stylesheet targeting less error-prone than hand-writing the attribute selector repeatedly. + `Responsive` implements `Node`, so it can be passed to `Render()` or `Imprint()`. The `Variant()` method accepts `*Layout` specifically, not arbitrary `Node` values. Each variant maintains independent block ID namespaces -- nesting a layout inside a responsive variant does not conflict with the same layout structure in another variant. diff --git a/docs/history.md b/docs/history.md index d28b437..24e284a 100644 --- a/docs/history.md +++ b/docs/history.md @@ -105,7 +105,7 @@ These are not regressions; they are design choices or deferred work recorded for 5. **TypeScript definitions not generated.** `codegen.GenerateBundle()` produces JS only. A `.d.ts` companion would benefit TypeScript consumers of the generated Web Components. -6. **No CSS scoping helper.** Responsive variants are identified by `data-variant` attributes. Targeting them from CSS requires knowledge of the attribute name. An optional utility for generating scoped CSS selectors is deferred. +6. **CSS scoping helper added.** `VariantSelector(name)` returns a reusable `data-variant` attribute selector for stylesheet targeting. The `Responsive` rendering model remains unchanged. 7. **Browser polyfill matrix not documented.** Closed Shadow DOM is well-supported but older browsers require polyfills. The support matrix is not documented. @@ -115,5 +115,6 @@ These items were captured during the WASM size reduction work and expert review - **TypeScript type definitions** alongside `GenerateBundle()` for typed Web Component consumers. - **Accessibility helpers** — `aria-label` builder, `alt` text helpers, and focus management helpers (`TabIndex`, `AutoFocus`). The layout has semantic HTML and ARIA roles but no API for fine-grained accessibility attributes beyond `Attr()`. +- **Responsive CSS helpers** — `VariantSelector(name)` makes `data-variant` targeting explicit and reusable in stylesheets. - **Layout variant validation** — return a warning or sentinel error from `NewLayout` when the variant string contains unrecognised slot characters. - **Daemon mode for codegen** — watch mode for regenerating the JS bundle when slot config changes, for development workflows. diff --git a/docs/index.md b/docs/index.md index 6f1fd69..24e8a67 100644 --- a/docs/index.md +++ b/docs/index.md @@ -41,7 +41,7 @@ This builds a Header-Content-Footer layout with semantic HTML elements (`
` (H), `