Semaphore

Class: FxSemaphore · Tag: <fx-semaphore> · Mixins: Animatable

The <fx-semaphore> component renders a multi-lamp indicator panel (traffic-light style) with round LEDs in a vertical or horizontal layout. By default, it functions as a stop/warn/go indicator, but can be fully customized with nested <fx-semaphore-state> elements. Each lamp supports custom colors, labels, and icons for clear, high-visibility status monitoring.

---

Installation

import '@salsafx/ui';

Interactive preview of the main variants:

Vertical

Icons + Labels

Large · No Shell · Blink

---

Basic Usage

Default traffic light

With no state children, <fx-semaphore> uses FxSemaphore.defaultStates — stop (red), warn (amber), and go (green):

<fx-semaphore value="go" label="RUN"></fx-semaphore>

Per-lamp labels

Pass <fx-semaphore-state> children with optional label text above each LED:

<fx-semaphore value="indigo" label="BUS A" orientation="vertical">
    <fx-semaphore-state value="cyan" color="#06b6d4" label="CH1"></fx-semaphore-state>
    <fx-semaphore-state value="indigo" color="#6366f1" label="CH2"></fx-semaphore-state>
    <fx-semaphore-state value="violet" color="#a855f7" label="CH3"></fx-semaphore-state>
    <fx-semaphore-state value="orange" color="#f97316" label="CH4"></fx-semaphore-state>
</fx-semaphore>

Icons

Set icon to an icon-font class list or a .svg path (same managed-slot pattern as Switch / PushButton), or nest custom markup with slot="icon". Lamps may be icon-only, label-only, or both:

<!-- icon only -->
<fx-semaphore value="indigo" label="ICONS" orientation="vertical">
    <fx-semaphore-state value="cyan" color="#06b6d4" icon="fa-solid fa-droplet"></fx-semaphore-state>
    <fx-semaphore-state value="indigo" color="#6366f1" icon="fa-solid fa-bolt"></fx-semaphore-state>
    <fx-semaphore-state value="violet" color="#a855f7" icon="fa-solid fa-atom"></fx-semaphore-state>
    <fx-semaphore-state value="orange" color="#f97316" icon="fa-solid fa-fire"></fx-semaphore-state>
</fx-semaphore>

<!-- icon + label via attribute -->
<fx-semaphore value="violet" label="BOTH" orientation="horizontal">
    <fx-semaphore-state value="cyan" color="#06b6d4" label="CH1" icon="fa-solid fa-droplet"></fx-semaphore-state>
    <fx-semaphore-state value="indigo" color="#6366f1" label="CH2" icon="fa-solid fa-bolt"></fx-semaphore-state>
    <fx-semaphore-state value="violet" color="#a855f7" label="CH3" icon="fa-solid fa-atom"></fx-semaphore-state>
    <fx-semaphore-state value="orange" color="#f97316" label="CH4" icon="fa-solid fa-fire"></fx-semaphore-state>
</fx-semaphore>

<!-- icon via slot -->
<fx-semaphore value="orange" label="SLOT" orientation="horizontal">
    <fx-semaphore-state value="cyan" color="#06b6d4" label="CH1">
        <i slot="icon" class="fa-solid fa-droplet"></i>
    </fx-semaphore-state>
    <fx-semaphore-state value="indigo" color="#6366f1" label="CH2">
        <i slot="icon" class="fa-solid fa-bolt"></i>
    </fx-semaphore-state>
    <fx-semaphore-state value="violet" color="#a855f7" label="CH3">
        <i slot="icon" class="fa-solid fa-atom"></i>
    </fx-semaphore-state>
    <fx-semaphore-state value="orange" color="#f97316" label="CH4">
        <i slot="icon" class="fa-solid fa-fire"></i>
    </fx-semaphore-state>
</fx-semaphore>

Orientation

Use orientation="vertical" (default) or orientation="horizontal":

<fx-semaphore value="stop" label="VERTICAL" orientation="vertical"></fx-semaphore>
<fx-semaphore value="go" label="HORIZONTAL" orientation="horizontal"></fx-semaphore>

Without shell

Set hasShell = false (or .hasShell=${false} in Lit templates) to render only the LED row/column:

<fx-semaphore id="caution" value="warn" label="CAUTION" orientation="horizontal" size="large">
    <fx-semaphore-state value="stop" color="#ef4444"></fx-semaphore-state>
    <fx-semaphore-state value="warn" color="#fbbf24" is-blinking></fx-semaphore-state>
    <fx-semaphore-state value="go" color="#22c55e"></fx-semaphore-state>
</fx-semaphore>
<script>
    document.getElementById('caution').hasShell = false;
</script>

If value matches no state, every LED stays off.

Blinking

Set is-blinking on a <fx-semaphore-state> to blink that LED while it is active (host is-animated must stay on, which is the default):

Blinking

<fx-semaphore value="alarm" label="ALARM" orientation="horizontal">
    <fx-semaphore-state value="ok" color="#22c55e" label="OK"></fx-semaphore-state>
    <fx-semaphore-state value="warn" color="#fbbf24" label="WARN" is-blinking></fx-semaphore-state>
    <fx-semaphore-state value="alarm" color="#ef4444" label="ALARM" is-blinking></fx-semaphore-state>
</fx-semaphore>

Size variants

Built-in sizes via the size attribute: small, medium (default), large, and x-large.

<fx-semaphore value="stop" label="S" size="small"></fx-semaphore>
<fx-semaphore value="warn" label="M" size="medium"></fx-semaphore>
<fx-semaphore value="go" label="L" size="large"></fx-semaphore>
<fx-semaphore value="go" label="XL" size="x-large"></fx-semaphore>

---

API Reference

<fx-semaphore> Properties & Attributes

Property	Attribute	Type	Default	Description
value	value	String	""	Active state value.
label	label	String	""	Optional caption label displayed below the housing.
hasShell	has-shell	Boolean	true	Shows the outer housing around the LEDs.
size	size	String	"medium"	Size of the LEDs (“small”, “medium”, “large”, or “x-large”).
orientation	orientation	String	"vertical"	Orientation of the LED strip (“vertical” or “horizontal”).
disabled	disabled	Boolean	false	Disables interaction and dims the control.
isAnimated	is-animated	Boolean	true	Enables fluid, hardware-accelerated state transitions.

Static

Member	Type	Description
FxSemaphore.defaultStates	ReadonlyArray<FxSemaphoreStateData>	Built-in stop / warn / go configuration used when no state children are provided.

<fx-semaphore-state> Properties & Attributes

Property	Attribute	Type	Default	Description
value	value	String	""	State id matched against the host value.
color	color	String	""	Active LED color.
label	label	String	""	Optional label text displayed above the LED.
icon	icon	String	""	Optional Font Awesome icon class name.
isBlinking	is-blinking	Boolean	false	Enables blinking when the state is active.

Declarative only (display: none); not rendered as visible children. Icons are placed on the host so page-level stylesheets apply.

Slots

Name	Description
— (default)	Optional <fx-semaphore-state> children. When empty, uses FxSemaphore.defaultStates.
icon-{value}	Per-lamp icon slot (managed from icon attribute or from nested slot="icon" on the state).

CSS Custom Properties

Property	Default	Description
--fx-semaphore-icon-size	0.85rem	Font Awesome icon size above each LED.

---

Object Hierarchy

classDiagram
    direction TB
    class FxElement
    class FxSemaphore

    FxElement <|-- FxSemaphore : Animatable

See also Architecture.