Architecture

Every SalsaFX web component extends FxElement. LitElement is the framework base used only by FxElement — no other class inherits from it directly. Shared behaviour lives on base classes and mixins; concrete controls and subcomponents extend them.

Overview

classDiagram
    direction TB

    class LitElement
    class FxElement {
        +disabled: boolean
    }
    class FxMeasureElement {
        +value: number
        +min: number
        +max: number
        +label: string
        +unit: string
    }
    class FxContainerElement
    class FxContentElement
    class FxScaleElement
    class FxRadialScaleElement
    class FxGaugeNeedleElement
    class FxLinearTrackElement

    LitElement <|-- FxElement
    FxElement <|-- FxMeasureElement
    FxElement <|-- FxContainerElement
    FxContainerElement <|-- FxContentElement
    FxElement <|-- FxScaleElement
    FxScaleElement <|-- FxRadialScaleElement
    FxMeasureElement <|-- FxGaugeNeedleElement
    FxMeasureElement <|-- FxLinearTrackElement : Animatable mixin

Animatable and GlassOverlay are TypeScript mixins applied on top of a base class (for example Animatable(FxMeasureElement)).

---

Common Controls

classDiagram
    direction TB

    class FxElement
    class FxContainerElement
    class FxContentElement
    class FxGroupBox
    class FxCard
    class FxStackPanel
    class FxTabs
    class FxTab
    class FxSeparator

    FxElement <|-- FxContainerElement
    FxContainerElement <|-- FxContentElement
    FxContentElement <|-- FxTabs
    FxContentElement <|-- FxGroupBox
    FxContentElement <|-- FxCard
    FxContentElement <|-- FxStackPanel
    FxContentElement <|-- FxTab
    FxElement <|-- FxSeparator

Class	Tag	Role
FxContentElement	—	Content container base (align-x, align-y, padding)
FxGroupBox	<fx-group-box>	Titled enclosure
FxCard	<fx-card>	Accent header card (icon + badge)
FxStackPanel	<fx-stack-panel>	Linear layout
FxTabs	<fx-tabs>	Tabbed container (defaults for nested tabs)
FxTab	<fx-tab>	Tab page
FxSeparator	<fx-separator>	Divider / groove

---

Measure & indicators

classDiagram
    direction TB

    class FxElement
    class FxMeasureElement
    class FxLinearTrackElement
    class FxLinearBar
    class FxFader
    class FxLinearGauge
    class FxRadialGauge
    class FxPotentiometer
    class FxDisplay
    class FxLedIndicator
    class FxSemaphore
    class FxSwitch
    class FxRadialSwitch
    class FxPushButton
    class FxRotarySelector

    FxElement <|-- FxMeasureElement
    FxMeasureElement <|-- FxLinearTrackElement : Animatable
    FxLinearTrackElement <|-- FxLinearBar
    FxLinearTrackElement <|-- FxFader
    FxMeasureElement <|-- FxLinearGauge : Animatable
    FxMeasureElement <|-- FxRadialGauge : Animatable + GlassOverlay
    FxMeasureElement <|-- FxPotentiometer : Animatable
    FxElement <|-- FxDisplay
    FxElement <|-- FxLedIndicator : Animatable
    FxElement <|-- FxSemaphore : Animatable
    FxElement <|-- FxSwitch : Animatable
    FxElement <|-- FxRadialSwitch : Animatable
    FxElement <|-- FxPushButton : Animatable
    FxElement <|-- FxRotarySelector

---

Scales, needles & subcomponents

classDiagram
    direction TB

    class FxElement
    class FxScaleElement
    class FxRadialScaleElement
    class FxLinearScale
    class FxRadialScale
    class FxRadialSimpleScale
    class FxMeasureElement
    class FxGaugeNeedleElement
    class FxGaugeNeedle
    class FxGaugeNeedleTriangle
    class FxDisplayRegion
    class FxIcon
    class FxSwitchState
    class FxSemaphoreState
    class FxRotarySelectorSector

    FxElement <|-- FxScaleElement
    FxScaleElement <|-- FxLinearScale
    FxScaleElement <|-- FxRadialScaleElement
    FxRadialScaleElement <|-- FxRadialScale
    FxRadialScaleElement <|-- FxRadialSimpleScale
    FxMeasureElement <|-- FxGaugeNeedleElement
    FxGaugeNeedleElement <|-- FxGaugeNeedle
    FxGaugeNeedleElement <|-- FxGaugeNeedleTriangle
    FxElement <|-- FxDisplayRegion
    FxElement <|-- FxIcon
    FxElement <|-- FxSwitchState
    FxElement <|-- FxSemaphoreState
    FxElement <|-- FxRotarySelectorSector