Scope switch

Sqrl custom

sq-scope-switch — workspace or account selector at the top of the sidebar rail. With a scoped work panel, add sq-scope-bar. Markup below; usage → Rules.

Structure

Part	Sqrl class	Notes
Wrapper	sq-scope-switch	Rail inset; sq-scope-switch-on when scoped; sq-scope-switch-open when menu visible (app JS)
Control row	sq-scope-switch-control	Trigger + clear button (siblings, not nested)
Trigger	sq-scope-switch-btn	type="button", aria-haspopup="listbox", aria-expanded
Label	sq-scope-switch-text, sq-scope-switch-name, sq-scope-switch-eyebrow	Eyebrow only when scoped
Trail	sq-scope-switch-chevron / sq-scope-switch-clear	Unscoped chevron; scoped clear (aria-label)
Menu shell	sq-scope-switch-menu	Scroll max-height; search sticky; dropdown-item + text-truncate on label

Unscoped

Preview toggles the menu on click; click outside or pick an option to close.

<div class="sq-scope-switch">
  <button
    type="button"
    class="sq-scope-switch-btn"
    aria-haspopup="listbox"
    aria-expanded="false"
  >
    <span
      class="avatar avatar-sm avatar-square text-bg-light"
      aria-hidden="true"
    >
      <i class="bi bi-grid-fill"></i>
    </span>
    <span class="sq-scope-switch-text">
      <span class="sq-scope-switch-name">All accounts</span>
    </span>
    <i
      class="bi bi-chevron-expand sq-scope-switch-chevron"
      aria-hidden="true"
    ></i>
  </button>
  <div
    class="sq-scope-switch-menu"
    role="listbox"
    aria-label="Choose account"
    hidden
  >
    <div class="p-1 pb-2">
      <input
        type="search"
        class="form-control form-control-sm"
        placeholder="Search accounts…"
        aria-label="Search accounts"
      />
    </div>
    <button
      type="button"
      class="dropdown-item active"
      role="option"
      aria-selected="true"
    >
      <span
        class="avatar avatar-sm avatar-square text-bg-light"
        aria-hidden="true"
      >
        <i class="bi bi-grid-fill"></i>
      </span>
      <span class="text-truncate">All accounts</span>
    </button>
    <button type="button" class="dropdown-item" role="option">
      <span
        class="avatar avatar-sm avatar-square text-bg-info"
        aria-hidden="true"
        >VD</span
      >
      <span class="text-truncate">Van den Berg Logistics</span>
    </button>
    <button type="button" class="dropdown-item" role="option">
      <span
        class="avatar avatar-sm avatar-square text-bg-warning"
        aria-hidden="true"
        >TB</span
      >
      <span class="text-truncate">TechBuild International Systems B.V.</span>
    </button>
  </div>
</div>

Scoped

Add sq-scope-switch-on when a single scope is active. Show sq-scope-switch-eyebrow; swap chevron for sq-scope-switch-clear.

<div class="sq-scope-switch sq-scope-switch-on">
  <div class="sq-scope-switch-control">
    <button
      type="button"
      class="sq-scope-switch-btn"
      aria-haspopup="listbox"
      aria-expanded="false"
    >
      <span
        class="avatar avatar-sm avatar-square text-bg-info"
        aria-hidden="true"
        >VD</span
      >
      <span class="sq-scope-switch-text">
        <span class="sq-scope-switch-eyebrow">Account</span>
        <span class="sq-scope-switch-name">Van den Berg Logistics</span>
      </span>
    </button>
    <button
      type="button"
      class="sq-scope-switch-clear"
      aria-label="Clear account scope"
    >
      <i class="bi bi-x-lg" aria-hidden="true"></i>
    </button>
  </div>
</div>

Rules

Rail placement

Only scope selector in the rail — above the divider and sidenav. Do not duplicate scope pickers in the page header.

Scoped panel

When one account (or similar) filters the whole app, add sq-scope-switch-on on the switch and show sq-scope-bar on the work panel.

Interaction

• sq-scope-switch-clear stops propagation so it does not reopen the menu.
• Menu: focus trap and Escape to close in the app; sq-scope-switch-open + aria-expanded mirror open state. sq-scope-switch-menu-static stacks the menu in docs screenshots only (not production).
• allLabel on the trigger when nothing is selected; hide sq-scope-switch-eyebrow until scoped.