Reference · SemText · Disclosure & views

`<sem-view>`

SemText element

The name attribute labels the tab; the content inside is that view of the subject. With JavaScript off every view shows, each under its name.

Shares its schema with <sem-views> — the option bullets below belong to that element's contract.

One named perspective inside a sem-views tab set. The name attribute labels the tab; the content inside is that view of the subject. With JavaScript off every view shows, each under its name.

No options beyond the global attribute catalog are stated for this tag.

Example

sem-view.html

source

              
              <sem-views id="deploy">
            
                <sem-view name="Helm" active>content…</sem-view>
            
                <sem-view name="ArgoCD">content…</sem-view>
            
              </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

sem-view-default-active.html

source

              
              <sem-views id="incident">
            
                <sem-view name="Summary">Replica lag breached its alert threshold at 02:14; one node fell behind and was re-seeded.</sem-view>
            
                <sem-view name="Timeline">02:12 lag rises · 02:14 alert pages the operator · 02:31 replica re-seeded · 02:40 lag back to zero.</sem-view>
            
              </sem-views>

render

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

sem-view-deep-link.html

source

              
              <sem-views id="shipping">
            
                <sem-view id="helm" name="Helm">The chart bump is committed by CI; ArgoCD is not in the loop.</sem-view>
            
                <sem-view id="argocd" name="ArgoCD">Auto-sync pulls the chart repo; a drifted tag means a red sync.</sem-view>
            
              </sem-views>

render

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.

variant: any content inside a view

sem-view-rich-content.html

source

              
              <sem-views id="runbook">
            
                <sem-view name="Plan">
            
                  <p>Rotate the pair, then verify a live session before closing the ticket.</p>
            
                  <sem-note variant="warning">Dry-run first: the rotation is not reversible past the first use.</sem-note>
            
                </sem-view>
            
                <sem-view name="Checklist">
            
                  <p>Dry run · Rotate · Verify · Close the ticket.</p>
            
                </sem-view>
            
              </sem-views>

render

Live render boots with JavaScript — the authored source is alongside.

Source: spec/schema/sem-views.md