You wrap sem-view children and name each one. Readers switch by click, keyboard, or link. The content is never moved or rewritten — only which view shows changes.
Shows one subject several ways, with a tab bar to switch.
You wrap sem-view children and name each one. Readers switch by click, keyboard, or link. The content is never moved or rewritten — only which view shows changes.
required, unique within the container, human label.boolean marker on the initially-visible view; **if no view carries it, the first view is active**. The shown view is tracked at runtime in `data-active` (the component mirrors an authored `active` there, then moves it on every switch); the authored attribute is never rewritten.required **for enhancement, not only for deep links** — the handler selects `.sem-views[id]`, so a container without an id never upgrades and stays stacked (the JS-off form) even with script running. Also the deep-link head (`#deploy/argocd`); `kind`, `tags` global.
Example
sem-views.html
source
1<sem-views id="deploy">
2<sem-view name="Helm" active>content…</sem-view>
3<sem-view name="ArgoCD">content…</sem-view>
4</sem-views>
render
Live render boots with JavaScript — the authored source is alongside.
variant: no authored active — the first view shows
No view carries `active`: the runtime activates the first and mirrors that into `data-active`, exactly as if it were authored there. Switching moves only the `data-active` mirror — view content is never rewritten, so switching a hundred times loses nothing. JS-off every view renders stacked under its `name`.
variant: no authored active — the first view shows
Live render boots with JavaScript — the authored source is alongside.
variant: views with ids — deep links and sem-navigate
A view may carry its own `id`: the deep link `#shipping/helm` (container id / view id, or the lowercased `name` when the view has none) activates that view on load and on every hashchange, so a view is citable like any anchor. Every activation — click, arrow key or hash — dispatches `sem-navigate {id, name, index}` for readers that want to follow along.
variant: views with ids — deep links and sem-navigate
Live render boots with JavaScript — the authored source is alongside.
variant: any content inside a view
A view is a container, not a paragraph: any content is legal inside it, including other SemText elements. This one carries a `sem-note`, which enhances (collapse toggle and all) whether or not its parent view is the active one — the pane keeps the whole family alive so a switch is instant and content-preserving.