#Ribbon

A Ribbon combines tab navigation with grouped application commands. The pattern is extracted from A3S Office and generalized for editors, topology tools, and operational workbenches.

npm install @a3s-lab/ui@0.4.0

<div class="ribbon tabs" data-accent="blue">
  <div role="tablist" aria-label="Editor commands">...</div>
  <div role="tabpanel">
    <fieldset data-ribbon-group>
      <legend>Clipboard</legend>
      ...
    </fieldset>
  </div>
</div>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Usage

Load the Tabs controller and combine ribbon with tabs.

<div class="ribbon tabs" data-accent="blue">
  <div role="tablist" aria-label="Editor commands">...</div>
  <div role="tabpanel">
    <fieldset data-ribbon-group>
      <legend>Clipboard</legend>
      ...
    </fieldset>
  </div>
</div>

#Parameters

#States and variants

Use blue for current A3S workspaces. Green and orange remain available for legacy document-specific integrations, while the retained purple compatibility value resolves to A3S blue. Disabled tabs and commands use native disabled. The default 36-pixel tab strip and 74-pixel command panel remain compact; narrow viewports keep tabs unshrunk and scroll them horizontally.

#JavaScript API

Ribbon behavior comes from the Tabs controller. window.a3sUI.refresh(ribbon) rescans dynamically added tabs. No Ribbon-specific JavaScript is required.

#Accessibility

Use the complete Tabs keyboard contract. Group commands with <fieldset> and a visible or screen-reader-only <legend>. If a ribbon becomes too dense, allow horizontal scrolling rather than shrinking labels below a readable size.