Browser

A browser window around whatever the slot holds: a page, a screenshot, a live embed.

Preview

Code

The three render the same class names, the same ARIA and the same data attributes. That is checked when this site builds: a class in any of these samples that neither the markup contract nor the shipped stylesheet defines fails the build.

<div class="wsu-browser" style="max-inline-size:26rem">
  <div class="wsu-browser__bar" aria-hidden="true">
    <span class="wsu-browser__dots"></span>
    <span class="wsu-browser__url">reg.wayne.edu/schedule/share/9f2a1c</span>
  </div>
  <div class="wsu-browser__content">
    <div style="inline-size:100%;box-sizing:border-box;padding:var(--wsu-space-6) var(--wsu-space-4)">
      <p style="margin:0 0 var(--wsu-space-3);font-weight:var(--wsu-font-weight-bold);font-size:var(--wsu-font-size-lg)">Winter 2027 registration</p>
      <p class="wsu-prose" style="margin:0 0 var(--wsu-space-3)">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p class="wsu-prose">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
</div>

Why it works this way

• This is chrome around someone else's content, the same relationship a Card has to what it wraps. It does not constrain the slot: a full-bleed screenshot and a padded paragraph are both reasonable things to put inside it, so nothing here adds its own padding. The content area does center a caller's own capped-width text by default (the same default Phone's screen already uses), which costs a full-bleed screenshot nothing: something already given its own width fills the area before centering is asked to do anything.
• The whole toolbar is aria-hidden. A real browser toolbar names something, a site, a security state; this one only draws the shape of one, and the address text is illustration rather than a place anybody is going. Hiding it costs nothing, because the slot content is what a reader came for and is never touched by this.
• `bordered` swaps the frame's own edge for a single accent color, border.brand, proven at 3:1 (WCAG 1.4.11) against the page in both themes. `variant` recolors the toolbar strip only, its fill and its dots, never the content slot: this component cannot see the foreground color of a caller's own markup, so it never paints a background behind text it does not control. Both are the fixed set drawn from the semantic layer that wsu-badge and wsu-alert already use (brand, accent, success, danger), each already proven at 7:1 against its own text in both themes, rather than a free color a caller could pair with the wrong foreground.

Accessibility

• The toolbar, dots and address text carry no information of their own and are aria-hidden as a group (1.1.1: nothing to alt, nothing to hide selectively).
• The slot content is a plain child of the frame, not wrapped in anything that would remove it from the accessibility tree, so whatever the caller puts inside stays exactly as reachable as it would be anywhere else on the page.

Success criteria in brackets refer to WCAG 2.2. Every one of them is checked by axe-core in both themes at three viewport widths before this page can be published. See Accessibility for what the gates are.

Props

Blade

Attribute	Default	What it does
url	''	Decorative address bar text. Omit for a bare bar.
bordered	false	Swaps the frame's own edge for the accent border color.
variant	''	'' | 'brand' | 'accent' | 'success' | 'danger'. Recolors the toolbar strip only, never the content slot.

Vue

Prop	Type and default	What it does
url	String, ''	Decorative address bar text. Omit for a bare bar.
bordered	Boolean, false	Swaps the frame's own edge for the accent border color.
variant	String, ''	'' | 'brand' | 'accent' | 'success' | 'danger'. Recolors the toolbar strip only, never the content slot.

In the markup contract

contract/markup-contract.json is extracted from the two static templates and every package tests against it. This is what it records for .wsu-browser.

Template	Elements	Accessibility attributes	Uses
internal apps/examples/static-html/index.html	div	none recorded	1
public apps/examples/static-html/public-app.html	div	none recorded	1