@lcars-gui/romulus 0.1.0 → 0.1.1

package/README.md

@@ -1,9 +1,9 @@
 # @lcars-gui/romulus
 
-UI-Komponenten im Stil des Romulanischen Sternenimperiums: leuchtende Linien auf dunklem Grund,
-abgeschrägte Ecken, Krallen-Ecken an Panels, Rauten statt Kreisen.
+UI components in the style of the Romulan Star Empire: glowing lines on dark surfaces,
+chamfered corners, talon-shaped panel corners, diamonds instead of circles.
 
-**[Live-Demo](https://aarondnas.github.io/lcars-gui/romulus.html)**
+**[▶ Live demo & docs](https://aarondnas.github.io/lcars-gui/#romulus)**
 
 ![Romulus](https://raw.githubusercontent.com/aarondnas/lcars-gui/main/docs/romulus.gif)
 
@@ -13,16 +13,16 @@ abgeschrägte Ecken, Krallen-Ecken an Panels, Rauten statt Kreisen.
 npm install @lcars-gui/romulus
 ```
 
-## Verwendung
+## Usage
 
-```ts
+```tsx
 // React
 import "@lcars-gui/romulus/ui.css";
 import { Panel, Button, RomulusRoot, SoundProvider } from "@lcars-gui/romulus/react";
 
 <SoundProvider>
   <RomulusRoot theme="warbird">
-    <Panel code="R-7734" title="Taktisch" sidebar={<Button>Tarnung</Button>}>
+    <Panel code="R-7734" title="Tactical" sidebar={<Button>Cloak</Button>}>
       …
     </Panel>
   </RomulusRoot>
@@ -30,7 +30,7 @@ import { Panel, Button, RomulusRoot, SoundProvider } from "@lcars-gui/romulus/re
 ```
 
 ```html
-<!-- Reines HTML/JS -->
+<!-- Plain HTML/JS -->
 <link rel="stylesheet" href="https://unpkg.com/@lcars-gui/romulus/dist/ui.css">
 <script src="https://unpkg.com/@lcars-gui/romulus/dist/index.global.js"></script>
 <script>const ui = LcarsRomulus.initRomulus({ sound: true });</script>
@@ -38,22 +38,22 @@ import { Panel, Button, RomulusRoot, SoundProvider } from "@lcars-gui/romulus/re
 
 ## Themes
 
-| Theme        | Stil                                    | Extras (`themes/<name>.css`)  |
-|--------------|-----------------------------------------|-------------------------------|
-| `warbird`    | TNG, D'deridex-Klasse (Standard)        | Scanlines auf Panels          |
-| `tal-shiar`  | kühler, blaugrün                        | flackernde Titel und Kennungen |
-| `free-state` | Picard-Ära, mit Goldakzent              | Leuchten auf Schrift/Kontakten |
+| Theme        | Style                                 | Extras (`themes/<name>.css`)   |
+|--------------|---------------------------------------|--------------------------------|
+| `warbird`    | TNG, D'deridex class (default)        | scanlines on panels            |
+| `tal-shiar`  | cooler, blue-green                    | flickering titles and ID codes |
+| `free-state` | Picard era, with a gold accent        | glow on text and contacts      |
 
-## Schrift
+## Font
 
-Es wird keine Schrift mitgeliefert. Gut passt [Michroma](https://fonts.google.com/specimen/Michroma)
-(Google Fonts, frei); ohne sie greifen Eurostile, Bahnschrift oder Arial Narrow.
+No font is bundled. [Michroma](https://fonts.google.com/specimen/Michroma) (Google Fonts, free) fits well;
+without it Eurostile, Bahnschrift or Arial Narrow are used.
 
-## CSS-Variablen
+## CSS variables
 
-Alle Variablen tragen das Präfix `--rom-` (z. B. `--rom-colors-color1`), damit sich Romulus
-und andere Fraktionen auf einer Seite nicht in die Quere kommen.
+All variables use the `--rom-` prefix (e.g. `--rom-colors-color1`), so Romulus and other factions
+can live on the same page without conflicts.
 
-## Lizenz
+## License
 
-MIT. Star Trek ist eine Marke von CBS Studios / Paramount; dies ist ein inoffizielles Fan-Projekt.
+MIT. Star Trek is a trademark of CBS Studios / Paramount; this is an unofficial fan project.

package/dist/index.d.ts

@@ -7,7 +7,7 @@ type RomulusTheme = "warbird" | "tal-shiar" | "free-state";
 type AlertLevel = "red" | "yellow";
 type StatusKind = "ok" | "warn" | "error" | "off";
 type Orientation = "horizontal" | "vertical";
-/** data-color nur setzen, wenn eine Farbe angegeben ist (sonst CSS-Default). */
+/** Sets data-color only when a color is given (otherwise the CSS default applies). */
 declare function colorAttribute(color?: RomulusColor): {
     "data-color": string;
 } | {
@@ -19,8 +19,8 @@ type ButtonShape = "chamfer" | "rect" | "point-left" | "point-right";
 type ButtonVariant = "outline" | "solid";
 type ButtonAlign = "center" | "start";
 /**
- * Plattformneutrale Button-Props (ohne Events/Children,
- * die liefert der jeweilige Renderer).
+ * Platform-neutral button props (without events/children,
+ * those come from the respective renderer).
  */
 interface ButtonProps {
     color?: RomulusColor;
@@ -31,10 +31,10 @@ interface ButtonProps {
     align?: ButtonAlign;
     disabled?: boolean;
 }
-/** CSS-Klasse aus ui.css */
+/** CSS class from ui.css */
 declare const buttonClassName = "rom-btn";
 /**
- * Liefert die data-Attribute, auf die das CSS reagiert.
+ * Returns the data attributes the CSS reacts to.
  */
 declare function buttonDataAttributes({ color, size, length, shape, variant, align }: ButtonProps): {
     "data-align"?: "start" | undefined;
@@ -63,7 +63,7 @@ interface BlockProps {
     color?: RomulusColor;
     fill?: boolean;
 }
-/** CSS-Klassen aus ui.css */
+/** CSS classes from ui.css */
 declare const panelClassNames: {
     readonly panel: "rom-panel";
     readonly header: "rom-panel-header";
@@ -95,7 +95,7 @@ declare function blockDataAttributes({ color, fill }: BlockProps): {
     "data-color"?: undefined;
 };
 
-/** CSS-Klassen aus ui.css */
+/** CSS classes from ui.css */
 declare const displayClassNames: {
     readonly cascade: "rom-cascade";
     readonly cascadeCol: "rom-cascade-col";
@@ -126,25 +126,25 @@ declare const controlClassNames: {
     readonly keypadDisplay: "rom-keypad-display";
 };
 /**
- * Spalten aus Hex-Gruppen wie „3F·A9“, zufällig aber reproduzierbar
- * (gleicher Seed → gleiche Werte, wichtig für Server-Rendering).
+ * Columns of hex groups like "3F·A9", random but reproducible
+ * (same seed → same values, important for server rendering).
  */
 declare function cascadeGlyphs(columns: number, rows: number, seed?: number): string[][];
-/** Welche Segmente einer Pegelanzeige leuchten. */
+/** Which segments of a level bar are lit. */
 declare function levelSegments(value: number, segments?: number, max?: number): boolean[];
-/** Wert auf 0–100 % umrechnen (für die Gauge). */
+/** Converts a value to 0–100 % (for the gauge). */
 declare function toPercent(value: number, max?: number): number;
 
-/** Romulanische Bedien-Töne: tiefer, dreieckige Welle, absteigende Folgen. */
+/** Romulan interface sounds: lower pitch, triangle wave, descending patterns. */
 declare const romulanSound: LcarsSoundOptions;
 
 type InitRomulusOptions = InitBehaviorsOptions;
 /**
- * Macht statisches romulanisches Markup interaktiv.
- * Der zurückgegebene Controller spielt Töne und entfernt die Listener wieder.
+ * Makes static Romulan markup interactive.
+ * The returned controller plays sounds and removes the listeners again.
  */
 declare function initRomulus(options?: InitRomulusOptions): LcarsController;
-/** Füllt leere Data Cascades (data-columns / data-rows / data-seed) mit Hex-Gruppen. */
+/** Fills empty data cascades (data-columns / data-rows / data-seed) with hex groups. */
 declare function fillCascades(root?: Document | HTMLElement): void;
 
 export { barDataAttributes, blockDataAttributes, buttonClassName, buttonDataAttributes, cascadeGlyphs, colorAttribute, controlClassNames, displayClassNames, fillCascades, initRomulus, levelSegments, panelClassNames, romulanSound, toPercent };

package/dist/react/index.d.ts

@@ -17,8 +17,8 @@ type ButtonShape = "chamfer" | "rect" | "point-left" | "point-right";
 type ButtonVariant = "outline" | "solid";
 type ButtonAlign = "center" | "start";
 /**
- * Plattformneutrale Button-Props (ohne Events/Children,
- * die liefert der jeweilige Renderer).
+ * Platform-neutral button props (without events/children,
+ * those come from the respective renderer).
  */
 interface ButtonProps$1 {
     color?: RomulusColor;
@@ -43,40 +43,40 @@ interface BlockProps$1 {
 }
 
 type ButtonProps = ButtonProps$1 & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> & {
-    /** Ton beim Klicken (nur innerhalb eines SoundProvider); false = stumm */
+    /** Sound on click (only inside a SoundProvider); false = silent */
     sound?: LcarsSoundKind | false;
 };
 declare const Button: react.ForwardRefExoticComponent<ButtonProps$1 & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> & {
-    /** Ton beim Klicken (nur innerhalb eines SoundProvider); false = stumm */
+    /** Sound on click (only inside a SoundProvider); false = silent */
     sound?: LcarsSoundKind | false;
 } & react.RefAttributes<HTMLButtonElement>>;
 
 type DivProps$1 = Omit<HTMLAttributes<HTMLDivElement>, "color">;
 type BarProps = BarProps$1 & DivProps$1;
-/** Leuchtlinie, optional mit spitzen Enden oder gestrichelt. */
+/** Glowing line, optionally with pointed ends or dashed. */
 declare function Bar({ color, cap, length, segmented, className, ...rest }: BarProps): react.JSX.Element;
 type BlockProps = BlockProps$1 & DivProps$1;
-/** Gefülltes Segment mit abgeschrägten Ecken; Label sitzt unten links. */
+/** Filled segment with chamfered corners; the label sits bottom left. */
 declare function Block({ color, fill, className, ...rest }: BlockProps): react.JSX.Element;
 type TitleProps = {
     color?: RomulusColor;
 } & Omit<HTMLAttributes<HTMLHeadingElement>, "color">;
-/** Gesperrter Titel in der Kopfzeile. */
+/** Letter-spaced title in the header. */
 declare function Title({ color, className, ...rest }: TitleProps): react.JSX.Element;
-/** Senkrechter Stapel aus Buttons/Blocks mit gleichmäßigen Lücken. */
+/** Vertical stack of buttons/blocks with even gaps. */
 declare function Stack({ className, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
 interface PanelProps extends Omit<DivProps$1, "title"> {
     color?: RomulusColor;
     title?: ReactNode;
-    /** Kennung im gefüllten Trapez vorn im Kopf, z. B. "R-7734" */
+    /** ID code in the filled trapezoid at the start of the header, e.g. "R-7734" */
     code?: ReactNode;
-    /** Inhalt der Seitenleiste (Buttons/Blocks); wird nach unten aufgefüllt */
+    /** Sidebar content (buttons/blocks); filled up to the bottom */
     sidebar?: ReactNode;
-    /** Ersetzt die Standardlinie im Kopf bzw. Fuß; footer={null} blendet den Fuß aus */
+    /** Replaces the default line in the header or footer; footer={null} hides the footer */
     header?: ReactNode;
     footer?: ReactNode;
 }
-/** Romulanische Konsole: abgeschrägte Ecken, Krallen-Ecken, Kopf mit Kennung, optionale Seitenleiste. */
+/** Romulan console: chamfered corners, talon corners, header with ID code, optional sidebar. */
 declare function Panel({ color, title, code, sidebar, header, footer, className, children, ...rest }: PanelProps): react.JSX.Element;
 
 interface ToggleProps extends ButtonProps {
@@ -84,12 +84,12 @@ interface ToggleProps extends ButtonProps {
     defaultPressed?: boolean;
     onPressedChange?: (pressed: boolean) => void;
 }
-/** Button mit Zustand an/aus (aria-pressed). */
+/** Button with an on/off state (aria-pressed). */
 declare function Toggle({ pressed, defaultPressed, onPressedChange, onClick, ...rest }: ToggleProps): react.JSX.Element;
 type SliderProps = {
     color?: RomulusColor;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "color">;
-/** Schieberegler (natives input type="range") mit Rautengriff. */
+/** Slider (native input type="range") with a diamond thumb. */
 declare const Slider: react.ForwardRefExoticComponent<{
     color?: RomulusColor;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "color" | "type"> & react.RefAttributes<HTMLInputElement>>;
@@ -97,7 +97,7 @@ type InputProps = {
     color?: RomulusColor;
     label?: ReactNode;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "color">;
-/** Textfeld mit gefülltem Trapez als Beschriftung. */
+/** Text field with a filled trapezoid label. */
 declare const Input: react.ForwardRefExoticComponent<{
     color?: RomulusColor;
     label?: ReactNode;
@@ -115,18 +115,18 @@ interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "color"> {
     onValueChange?: (id: string) => void;
     color?: RomulusColor;
 }
-/** Registerkarten als Parallelogramme über einer Leuchtlinie. */
+/** Tabs as parallelograms above a glowing line. */
 declare function Tabs({ items, value, defaultValue, onValueChange, color, className, ...rest }: TabsProps): react.JSX.Element;
 interface KeypadProps extends Omit<HTMLAttributes<HTMLDivElement>, "color" | "onSubmit"> {
     color?: RomulusColor;
-    /** Maximale Länge des Codes */
+    /** Maximum code length */
     length?: number;
-    /** Code als Punkte anzeigen */
+    /** Show the code as dots */
     mask?: boolean;
-    /** Wird mit dem Code aufgerufen; true = Code akzeptiert, false = abgelehnt */
+    /** Called with the code; true = accepted, false = denied */
     onSubmit?: (code: string) => boolean | void;
 }
-/** Ziffernfeld mit Anzeige, z. B. für Zugangscodes. */
+/** Number pad with display, e.g. for access codes. */
 declare function Keypad({ color, length, mask, onSubmit, className, ...rest }: KeypadProps): react.JSX.Element;
 
 type DivProps = Omit<HTMLAttributes<HTMLDivElement>, "color">;
@@ -135,7 +135,7 @@ interface DataCascadeProps extends DivProps {
     rows?: number;
     seed?: number;
 }
-/** Spalten aus Hex-Gruppen, die einzeln aufflackern. */
+/** Columns of hex groups that flicker one by one. */
 declare function DataCascade({ columns, rows, seed, className, ...rest }: DataCascadeProps): react.JSX.Element;
 interface ReadoutItem {
     label: ReactNode;
@@ -146,21 +146,21 @@ interface ReadoutProps extends Omit<HTMLAttributes<HTMLDListElement>, "color"> {
     items: ReadoutItem[];
     color?: RomulusColor;
 }
-/** Wertetabelle: Label, gepunktete Führungslinie, Wert. */
+/** Value table: label, dotted leader line, value. */
 declare function Readout({ items, color, className, ...rest }: ReadoutProps): react.JSX.Element;
 type NumberCodeProps = {
     color?: RomulusColor;
 } & Omit<HTMLAttributes<HTMLSpanElement>, "color">;
-/** Kennung wie „R-7734“. */
+/** ID code like "R-7734". */
 declare function NumberCode({ color, className, ...rest }: NumberCodeProps): react.JSX.Element;
-/** Linie mit Skalenstrichen und Raute in der Mitte. */
+/** Line with tick marks and a diamond in the middle. */
 declare function Divider({ color, className, ...rest }: {
     color?: RomulusColor;
 } & DivProps): react.JSX.Element;
 interface ButtonGridProps extends HTMLAttributes<HTMLDivElement> {
     columns?: number;
 }
-/** Raster aus Buttons. */
+/** Grid of buttons. */
 declare function ButtonGrid({ columns, className, style, ...rest }: ButtonGridProps): react.JSX.Element;
 interface LevelBarProps extends DivProps {
     value: number;
@@ -169,7 +169,7 @@ interface LevelBarProps extends DivProps {
     orientation?: Orientation;
     color?: RomulusColor;
 }
-/** Pegelanzeige aus schrägen Segmenten (senkrecht: Winkel). */
+/** Level bar of slanted segments (vertical: chevrons). */
 declare function LevelBar({ value, max, segments, orientation, color, className, ...rest }: LevelBarProps): react.JSX.Element;
 interface GaugeProps extends DivProps {
     value: number;
@@ -178,7 +178,7 @@ interface GaugeProps extends DivProps {
     label?: ReactNode;
     color?: RomulusColor;
 }
-/** Ringanzeige aus Segmenten, Wert in der Mitte. */
+/** Ring gauge made of segments, value in the center. */
 declare function Gauge({ value, max, segments, label, color, className, style, ...rest }: GaugeProps): react.JSX.Element;
 interface Blip {
     x: number;
@@ -187,34 +187,34 @@ interface Blip {
 }
 interface SensorProps extends DivProps {
     blips?: Blip[];
-    /** Radar-Sweep um die Mitte */
+    /** Radar sweep around the center */
     scan?: boolean;
     color?: RomulusColor;
 }
-/** Sensoranzeige mit Dreiecksraster, Fadenkreuz und Kontakten als Rauten. */
+/** Sensor display with a triangular grid, crosshair and diamond contacts. */
 declare function Sensor({ blips, scan, color, className, children, ...rest }: SensorProps): react.JSX.Element;
 interface StatusIndicatorProps extends HTMLAttributes<HTMLSpanElement> {
     status?: StatusKind;
     blink?: boolean;
 }
-/** Rautenlampe mit Beschriftung. */
+/** Diamond indicator light with label. */
 declare function StatusIndicator({ status, blink, className, ...rest }: StatusIndicatorProps): react.JSX.Element;
 interface AlertBannerProps extends Omit<DivProps, "title"> {
     level?: AlertLevel;
     title?: ReactNode;
 }
-/** Sechseckiges, blinkendes Alarm-Banner. */
+/** Hexagonal, blinking alert banner. */
 declare function AlertBanner({ level, title, children, className, ...rest }: AlertBannerProps): react.JSX.Element;
 
 interface RomulusRootProps extends HTMLAttributes<HTMLDivElement> {
     theme?: RomulusTheme;
-    /** Färbt alles darunter rot/gelb und lässt Linien pulsieren */
+    /** Turns everything below red/yellow and makes the lines pulse */
     alert?: AlertLevel | null;
 }
-/** Setzt Farbthema und Alarmzustand für alle Komponenten darunter. */
+/** Sets the color theme and alert state for all components below. */
 declare function RomulusRoot({ theme, alert, ...rest }: RomulusRootProps): react.JSX.Element;
 
-/** Aktiviert die Bedien-Töne (romulanische Tonfolgen) für alle Komponenten darunter. */
+/** Enables interface sounds (Romulan patterns) for all components below. */
 declare function SoundProvider(props: SoundProviderProps): react.JSX.Element;
 
 export { AlertBanner, Bar, Block, Button, ButtonGrid, DataCascade, Divider, Gauge, Input, Keypad, LevelBar, NumberCode, Panel, Readout, RomulusRoot, Sensor, Slider, SoundProvider, Stack, StatusIndicator, Tabs, Title, Toggle };

package/dist/themes/free-state.css

@@ -1,6 +1,6 @@
-/* Theme-Extras: Romulan Free State (Picard-Ära)
-   Wird als @lcars-gui/romulus/themes/free-state.css veröffentlicht.
-   Weiches Leuchten auf Schrift und Kontakten. */
+/* Theme extras: Romulan Free State (Picard era)
+   Published as @lcars-gui/romulus/themes/free-state.css.
+   Soft glow on text and contacts. */
 
 [data-theme="free-state"] :is(.rom-btn, .rom-title, .rom-tab, .rom-number) {
   text-shadow: 0 0 0.6em color-mix(in srgb, currentColor 70%, transparent);

package/dist/themes/tal-shiar.css

@@ -1,6 +1,6 @@
-/* Theme-Extras: Tal Shiar – Geheimdienst
-   Wird als @lcars-gui/romulus/themes/tal-shiar.css veröffentlicht.
-   Titel und Kennungen flackern unregelmäßig, als würde das Signal gestört. */
+/* Theme extras: Tal Shiar – intelligence service
+   Published as @lcars-gui/romulus/themes/tal-shiar.css.
+   Titles and ID codes flicker irregularly, as if the signal were jammed. */
 
 [data-theme="tal-shiar"] :is(.rom-title, .rom-panel-code) {
   animation: rom-flicker 7s infinite;

package/dist/themes/warbird.css

@@ -1,6 +1,6 @@
-/* Theme-Extras: Warbird – D'deridex-Klasse (TNG)
-   Wird als @lcars-gui/romulus/themes/warbird.css veröffentlicht.
-   Feine Scanlines auf den Panels, wie auf den grünen Brückenschirmen. */
+/* Theme extras: Warbird – D'deridex class (TNG)
+   Published as @lcars-gui/romulus/themes/warbird.css.
+   Fine scanlines on the panels, like the green bridge screens. */
 
 [data-theme="warbird"] .rom-panel {
   background-image:

package/dist/ui.css

@@ -135,9 +135,9 @@
 
 /* ==================== 00-base.css ==================== */
 
-/* Romulanisches Design: leuchtende Linien auf dunklem Grund, abgeschrägte Ecken,
-   Rauten statt Kreise. Keine mitgelieferte Schrift – "Michroma" (Google Fonts)
-   passt gut, sonst greifen Eurostile/Bahnschrift/Arial Narrow. */
+/* Romulan design: glowing lines on a dark background, chamfered corners,
+   diamonds instead of circles. No bundled font – "Michroma" (Google Fonts)
+   fits well, otherwise Eurostile/Bahnschrift/Arial Narrow are used. */
 
 [class*="rom-"] {
   box-sizing: border-box;
@@ -152,8 +152,8 @@
   line-height: 1;
 }
 
-/* Abschrägung oben links + unten rechts: --rom-c = Größe der Schräge.
-   Die schrägen Kanten zeichnen zwei Verläufe nach (die geraden Kanten ein inset-Schatten). */
+/* Chamfer top left + bottom right: --rom-c = size of the chamfer.
+   Two gradients trace the slanted edges (an inset shadow draws the straight ones). */
 .rom-btn, .rom-block, .rom-panel, .rom-panel::before, .rom-sensor, .rom-sensor::before,
 .rom-keypad-display {
   clip-path: polygon(
@@ -191,7 +191,7 @@
 
 /* #################### BUTTON #################### */
 
-/* Base style: dunkle Fläche mit leuchtender Kontur (variant "outline") */
+/* Base style: dark fill with a glowing outline (variant "outline") */
 .rom-btn {
   --rom-c: var(--rom-chamfer-m);
   --rom-line: var(--rom-bg, var(--rom-colors-color1));
@@ -233,7 +233,7 @@
   opacity: 0.35;
 }
 
-/* Variant: gefüllt mit dunkler Schrift */
+/* Variant: filled, with dark text */
 .rom-btn[data-variant="solid"] {
   background: var(--rom-line);
   box-shadow: none;
@@ -257,7 +257,7 @@
 /* Shape Variants (default: chamfer) */
 .rom-btn[data-shape="rect"] { --rom-c: 0px; }
 
-/* Pfeilspitzen: immer gefüllt, die schrägen Kanten hätten sonst keine Kontur */
+/* Arrow points: always filled, the slanted edges would otherwise have no outline */
 .rom-btn[data-shape="point-left"],
 .rom-btn[data-shape="point-right"] {
   background: var(--rom-line);
@@ -273,7 +273,7 @@
   padding-right: 1.8em;
 }
 
-/* Label links */
+/* Label on the left */
 .rom-btn[data-align="start"] { justify-content: flex-start; }
 
 /* Toggle: aria-pressed */
@@ -288,8 +288,8 @@
 
 /* #################### PANEL #################### */
 
-/* Konsole mit abgeschrägten Ecken (oben links / unten rechts)
-   und Krallen-Ecken (oben rechts / unten links).
+/* Console with chamfered corners (top left / bottom right)
+   and talon corners (top right / bottom left).
    Order: header, sidebar (optional), content, footer (optional) */
 .rom-panel {
   --rom-c: var(--rom-chamfer-l);
@@ -306,7 +306,7 @@
     var(--rom-colors-surface) 40%);
 }
 
-/* Kontur inkl. schräger Kanten */
+/* Outline including the slanted edges */
 .rom-panel::before {
   content: "";
   position: absolute;
@@ -318,7 +318,7 @@
   box-shadow: inset 0 0 0 var(--rom-line-std) var(--rom-line);
 }
 
-/* Krallen-Ecken */
+/* Talon corners */
 .rom-panel::after {
   content: "";
   position: absolute;
@@ -333,7 +333,7 @@
 
 .rom-panel > * { position: relative; z-index: 1; }
 
-/* Ohne Seitenleiste: Inhalt über die volle Breite */
+/* Without a sidebar: content spans the full width */
 .rom-panel:not(:has(> .rom-panel-sidebar)) {
   grid-template-columns: minmax(0, 1fr);
 }
@@ -350,7 +350,7 @@
 .rom-panel-header > .rom-bar { margin-right: var(--rom-panel-talon-size); }
 .rom-panel-footer > .rom-bar:first-child { margin-left: var(--rom-panel-talon-size); }
 
-/* Kennung als gefülltes Trapez am Anfang des Kopfes */
+/* ID code as a filled trapezoid at the start of the header */
 .rom-panel-code {
   flex: none;
   display: flex;
@@ -384,12 +384,12 @@
 .rom-bar[data-length="l"]  { flex: none; width: var(--rom-width-l); }
 .rom-bar[data-length="xl"] { flex: none; width: var(--rom-width-xl); }
 
-/* Spitz zulaufende Enden */
+/* Pointed ends */
 .rom-bar[data-cap="left"]  { clip-path: polygon(1.2rem 0, 100% 0, 100% 100%, 0 100%); }
 .rom-bar[data-cap="right"] { clip-path: polygon(0 0, calc(100% - 1.2rem) 0, 100% 100%, 0 100%); }
 .rom-bar[data-cap="both"]  { clip-path: polygon(1.2rem 0, calc(100% - 1.2rem) 0, 100% 100%, 0 100%); }
 
-/* Gestrichelt */
+/* Dashed */
 .rom-bar[data-segmented] {
   background: repeating-linear-gradient(90deg, var(--rom-line) 0 1.4rem, transparent 0 1.8rem);
 }
@@ -417,7 +417,7 @@
 
 /* #################### DIVIDER #################### */
 
-/* Linie mit Skalenstrichen und Raute in der Mitte */
+/* Line with tick marks and a diamond in the middle */
 .rom-divider {
   --rom-line: var(--rom-bg, var(--rom-colors-color2));
   position: relative;
@@ -455,7 +455,7 @@
   font-size: var(--rom-panel-label-size);
 }
 
-/* Füllsegment: gedämpft, damit es nicht mit den Buttons konkurriert */
+/* Filler segment: muted so it doesn't compete with the buttons */
 .rom-block[data-fill] {
   flex: 1 1 auto;
   background: color-mix(in srgb, var(--rom-bg, var(--rom-colors-color2)) 22%, var(--rom-colors-surface));
@@ -508,7 +508,7 @@
   gap: 0.2rem;
 }
 
-/* Tabs als Parallelogramme */
+/* Tabs as parallelograms */
 .rom-tab {
   --rom-line: var(--rom-bg, var(--rom-colors-color1));
   min-width: 7rem;
@@ -585,7 +585,7 @@
 
 /* #################### SLIDER (native range) #################### */
 
-/* Dünne Skala, Rautengriff */
+/* Thin scale, diamond thumb */
 .rom-range {
   --rom-line: var(--rom-bg, var(--rom-colors-color1));
   -webkit-appearance: none;
@@ -675,7 +675,7 @@
 
 /* #################### DATA CASCADE #################### */
 
-/* Hex-Gruppen, die einzeln aufflackern */
+/* Hex groups that flicker one by one */
 .rom-cascade {
   display: flex;
   max-width: 100%;
@@ -708,7 +708,7 @@
 
 /* #################### READOUT #################### */
 
-/* Label, gepunktete Führungslinie, Wert */
+/* Label, dotted leader line, value */
 .rom-readout {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
@@ -742,7 +742,7 @@
 
 /* #################### LEVEL BAR #################### */
 
-/* Schräge Segmente */
+/* Slanted segments */
 .rom-level {
   --rom-line: var(--rom-bg, var(--rom-colors-color1));
   display: flex;
@@ -762,7 +762,7 @@
   box-shadow: 0 0 0.4rem color-mix(in srgb, var(--rom-line) 60%, transparent);
 }
 
-/* Senkrecht: Winkel (Chevrons) übereinander */
+/* Vertical: stacked chevrons */
 .rom-level[data-orientation="vertical"] {
   flex-direction: column-reverse;
   width: 1.8rem;
@@ -776,7 +776,7 @@
 
 /* #################### GAUGE (set --value 0–100) #################### */
 
-/* Vollkreis aus Segmenten, Wert in der Mitte */
+/* Full ring of segments, value in the center */
 .rom-gauge {
   --value: 0;
   --segments: 24;
@@ -810,7 +810,7 @@
   mask-composite: intersect;
 }
 
-/* Innerer Ring */
+/* Inner ring */
 .rom-gauge::after {
   content: "";
   position: absolute;
@@ -828,7 +828,7 @@
 
 /* #################### SENSOR / BLIP / SCAN #################### */
 
-/* Dreiecksraster mit Fadenkreuz */
+/* Triangular grid with crosshair */
 .rom-sensor {
   --rom-c: var(--rom-chamfer-l);
   --rom-line: var(--rom-bg, var(--rom-colors-color6));
@@ -857,7 +857,7 @@
   box-shadow: inset 0 0 0 var(--rom-line-std) var(--rom-line);
 }
 
-/* --x / --y: position in percent (0–100) – Kontakte als Rauten */
+/* --x / --y: position in percent (0–100) – contacts as diamonds */
 .rom-blip {
   position: absolute;
   left: calc(var(--x, 50) * 1%);
@@ -873,7 +873,7 @@
 
 .rom-blip:not([data-color]) { --rom-bg: var(--rom-colors-color5); }
 
-/* Radar-Sweep um die Mitte */
+/* Radar sweep around the center */
 .rom-scan::after {
   content: "";
   position: absolute;
@@ -902,7 +902,7 @@
   color: var(--rom-colors-color5);
 }
 
-/* Rautenlampe */
+/* Diamond lamp */
 .rom-status::before {
   content: "";
   width: 0.65em;
@@ -924,7 +924,7 @@
 
 /* #################### ALERT #################### */
 
-/* Sechseckiges Banner mit Winkeln an beiden Seiten */
+/* Hexagonal banner with chevrons on both sides */
 .rom-alert {
   --rom-bg: var(--rom-alert-red);
   display: inline-flex;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lcars-gui/romulus",
-  "version": "0.1.0",
-  "description": "UI-Komponenten im Stil des Romulanischen Sternenimperiums für React und reines HTML/CSS/JS",
+  "version": "0.1.1",
+  "description": "UI components in the style of the Romulan Star Empire for React and plain HTML/CSS/JS",
   "keywords": [
     "lcars",
     "star-trek",
@@ -53,7 +53,7 @@
     "dev": "tsup --watch"
   },
   "dependencies": {
-    "@lcars-gui/core": "^0.1.0"
+    "@lcars-gui/core": "^0.1.1"
   },
   "peerDependencies": {
     "react": ">=18",