Component API

<window-chrome>

Open live example

Sticky editor/terminal-style chrome bar for the top edge of a page or panel:
three decorative traffic-light dots, a filename-style label, and a
right-aligned actions slot for controls such as a theme toggle.

The text property is named label rather than title, matching
page-header's text-property precedent and avoiding confusion with the
global HTML title tooltip attribute. The dots are purely decorative, are
hidden from assistive technology, and reuse the semantic --ui-danger,
--ui-warning, and --ui-success tokens rather than introducing
chrome-only colors.

It sticks with position: sticky; top: 0, so callers must place it at the
top of the element that actually scrolls. Its z-index: 1 is a deliberate
plain literal: just enough to keep the bar above in-flow content as it
sticks, while staying far below the shared overlay stack (dialogs/popovers
start at 100), so it does not participate in utils/layer-stack.ts.

Install

import "@f-ewald/components/window-chrome.js";

Usage

<window-chrome label="~/product — README.md">
  <icon-button slot="actions" label="Toggle theme"></icon-button>
</window-chrome>

Attributes / properties

PropertyAttributeTypeDefaultDescription
labellabelstring""Filename-style text shown beside the decorative dots.

Events

None.

Slots

None.

CSS custom properties

Custom property
--ui-border
--ui-border-width
--ui-danger
--ui-font
--ui-font-mono
--ui-font-size-sm
--ui-font-weight-regular
--ui-line-height-tight
--ui-radius-circle
--ui-success
--ui-surface-muted
--ui-text-muted
--ui-warning