@feezal/feezal-elements-lcars

LCARS (Star Trek: TNG/Voyager/Picard computer interface) element family for feezal — flat black canvas, sweeping rounded "elbow" corners, pill/capsule buttons, and colour-blocked panels.

One npm package, one bundle, seven custom-element tags (feezal's N29 Phase B multi-element family shape — see element-families.md in the core repo). Pair it with the matching @feezal/feezal-theme-lcars theme package for the full look.

Elements

All seven live in the LCARS palette category.

| Tag | What it is | Key attributes | |---|---|---| | feezal-element-lcars-button | Publish-on-tap pill button, with active-state feedback | publish, payload, label, end-cap, color, subscribe, payload-active, payload-inactive | | feezal-element-lcars-bar | Header/section bar — title set into the inner border + a contrasting end-block | label, align, end-cap, color | | feezal-element-lcars-readout | LABEL — value readout cell | subscribe, label, unit, precision, readout-width, end-cap, color | | feezal-element-lcars-toggle | Two-state latching pill | subscribe, publish, payload-on, payload-off, label, end-cap, color | | feezal-element-lcars-slider | Segmented block meter, drag to set | subscribe, publish, min, max, step, segments, label, color | | feezal-element-lcars-gauge | Read-only segmented meter with warn/crit thresholds | subscribe, min, max, segments, label, unit, color, color-warn, color-crit, warn, crit | | feezal-element-lcars-frame | Page-framing container — elbow corners + bars around an embedded view | view, corners, bar-thickness, sidebar-width, elbow-radius, label, color |

Every element that subscribes also takes the standard message-property (and per-topic message-property-*) attributes described in element-spec.md §4.

Install

In a running feezal (≥ 3.3.x, N29 Phase B support): open the Packages sidebar, search lcars → Install. The family shows as one "set" row; all seven tags appear in the LCARS palette category after the reload prompt.

Known core limitation (roadmap N27): packages installed via the Packages sidebar load in the editor but not yet in the live viewer or static export — until that lands, use the workspace drop-in dev loop in AGENT-TASK.md for end-to-end viewer testing.

Palette & theming

Every element exposes a color attribute (colour picker) plus --feezal-lcars-<element>-* CSS custom properties in the Style inspector, falling back through the family's --feezal-lcars-color token to the active theme's --primary-color, so elements stay legible on non-LCARS themes too. Install @feezal/feezal-theme-lcars for the full Classic LCARS palette and the self-hosted Antonio condensed typeface — see that package's README for the other named variants (25th Century, Cardassia, Kronos, Romulan, Red Alert) as CSS override snippets.

Accessibility

LCARS is unapologetically dark-and-colour-block-driven — that's the aesthetic, not an oversight. The low-contrast colour-on-black and ALL-CAPS condensed type fight readability by design; font-size and contrast stay overridable per element via the Style inspector. Any "Red Alert" style flash animation is opt-in and off by default, and every element respects prefers-reduced-motion.

Trademark note

LCARS is a fan-recognised term for the Star Trek franchise's on-screen computer interface. This is an unofficial fan-aesthetic element family — no CBS/Paramount artwork, imagery, or fonts are included. Colour values and corner geometry are treated as uncopyrightable facts; the bundled typeface is Antonio (Google Fonts, SIL OFL 1.1), the same redistributable stand-in for the screen-used Tungsten that the community ha-lcars theme itself uses.

Development

See AGENT-TASK.md for the build plan, TESTING.md for the manual QA checklist, and PUBLISHING.md for release steps.

npm install
npm test