#Floating Panel

Keeps an inspector, helper, or temporary context beside the primary task and naturally becomes a bottom sheet on narrow screens.

npm install @a3s-lab/ui@0.4.0

<aside class="floating-panel" data-position="docked" data-state="open">
  <header><strong>Inspector</strong><button type="button" class="btn" data-size="sm" data-variant="ghost" data-floating-panel-action="close">Close</button></header><section><p>Review the selected resource without leaving the task.</p></section>
</aside>

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

#Usage

<aside class="floating-panel" data-position="docked" data-state="open">
  <header><strong>Inspector</strong><button type="button" class="btn" data-size="sm" data-variant="ghost" data-floating-panel-action="close">Close</button></header><section><p>Review the selected resource without leaving the task.</p></section>
</aside>

#Standalone controller

import "@a3s-lab/ui/runtime";
import "@a3s-lab/ui/floating-panel";

const component = document.querySelector(".floating-panel");
component.getState();

The controller is idempotent; the complete package can instead import @a3s-lab/ui/all once. The host performs permission and business validation through cancelable before-* events.

#Contract

#Product boundary

It is not a generic card or a protected confirmation surface. The host owns persisted position, size, and workspace layout.

The component publishes a reusable interaction boundary only. Data fetching, persistence, permission, trusted content, and business entities remain host-owned.

#Accessibility

Escape can close the panel and restore focus to its opener. Docked, floating, and mobile presentations preserve content order and action meaning.