@motionstudies/web 0.1.0-alpha.0 → 0.1.0-alpha.10

package/components/DotMatrixBoard.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import { matrixPath } from './dot-matrix-font.js';
+function bounded(value, fallback, min, max) {
+    return Number.isFinite(value) ? Math.max(min, Math.min(max, Math.floor(value))) : fallback;
+}
+function MatrixText({ value, characters, align = 'left', preserveCase = false }) {
+    const patternId = useId();
+    const letters = Array.from(preserveCase ? value : value.toLocaleUpperCase());
+    const visible = letters.length > characters ? [...letters.slice(0, characters - 1), '…'] : letters;
+    const text = visible.join('');
+    const path = matrixPath(text);
+    const offset = align === 'right' ? (characters - visible.length) * 6 : 0;
+    return _jsxs("span", { className: "ms-matrix-text", title: value, children: [_jsx("span", { className: "ms-matrix-sr-only", children: value }), _jsxs("svg", { "aria-hidden": "true", viewBox: `0 0 ${characters * 6} 7`, preserveAspectRatio: align === 'right' ? 'xMaxYMid meet' : 'xMinYMid meet', children: [_jsx("defs", { children: _jsx("pattern", { id: patternId, width: "1", height: "1", patternUnits: "userSpaceOnUse", children: _jsx("circle", { cx: ".5", cy: ".5", r: ".36" }) }) }), _jsx("rect", { width: "100%", height: "7", fill: `url(#${patternId})`, className: "ms-matrix-text__unlit" }), path === undefined
+                        ? _jsx("text", { x: align === 'right' ? characters * 6 : 0, y: "6.2", textAnchor: align === 'right' ? 'end' : 'start', fontSize: "7", fontFamily: "ui-monospace, monospace", textLength: Math.max(1, visible.length * 6 - 1), lengthAdjust: "spacingAndGlyphs", fill: "currentColor", children: text })
+                        : _jsx("path", { transform: `translate(${offset},0)`, d: path, fill: "currentColor" })] })] });
+}
+/** The consumer owns row order, arrival estimates and freshness, as with SplitFlapBoard. */
+export function DotMatrixBoard({ label, columns, rows, lineCount = 6, minRowHeight = 34, loading = false, loadingMessage = 'Loading departures…', emptyMessage = 'No departures.', onSelectRow, selectedRowId, selectionColumn, className = '', style, variant = 'bus', heading, headingColumnSpan = 1, footerLabel, clockLabel }) {
+    const screen = useRef(null);
+    const boardId = useId();
+    const [size, setSize] = useState({ width: 640, height: 244 });
+    useEffect(() => {
+        const element = screen.current;
+        if (!element)
+            return;
+        const observer = new ResizeObserver(([entry]) => {
+            const width = Math.floor(entry.contentRect.width);
+            const height = Math.floor(entry.contentRect.height);
+            setSize((previous) => previous.width === width && previous.height === height ? previous : { width, height });
+        });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    const count = lineCount === 'auto'
+        ? bounded(size.height / bounded(minRowHeight, 34, 20, 120), 6, 1, 30)
+        : bounded(lineCount, 6, 1, 30);
+    const rowHeight = size.height / count;
+    const weights = columns.map((column) => bounded(column.characters, 12, 1, 80));
+    const totalWeight = weights.reduce((sum, weight) => sum + weight, 0);
+    const characterWidth = Math.min(15, Math.max(7, rowHeight * .45), Math.max(9, (size.width - columns.length * 16) / Math.max(1, totalWeight)));
+    const minimums = columns.map((column) => bounded(column.minCharacters ?? 3, 3, 1, 40) * characterWidth + 16);
+    const totalMinimum = minimums.reduce((sum, width) => sum + width, 0);
+    const widths = columns.map((_, index) => size.width < totalMinimum
+        ? size.width * minimums[index] / totalMinimum
+        : minimums[index] + (size.width - totalMinimum) * weights[index] / totalWeight);
+    const empty = !loading && rows.length === 0;
+    const message = loading ? loadingMessage : empty ? emptyMessage : '';
+    const rail = variant === 'uk-rail';
+    const span = bounded(headingColumnSpan, 1, 1, Math.max(1, columns.length));
+    const capacity = (width) => bounded((width - 16) / characterWidth, 1, 1, 80);
+    const slots = [];
+    if (!loading && !empty) {
+        for (const row of rows) {
+            if (slots.length >= count)
+                break;
+            // Keep a departure and its detail together unless the board has only one slot.
+            if (row.note && count > 1 && slots.length === count - 1)
+                break;
+            slots.push({ row });
+            if (row.note && slots.length < count)
+                slots.push({ row, detail: true });
+        }
+    }
+    while (slots.length < count)
+        slots.push({});
+    return _jsxs("div", { className: `ms-dot-matrix-board ${className}`, style: { ...style, '--matrix-text-height': `${Math.max(0, Math.min(26, rowHeight - 8))}px` }, "data-variant": variant, "data-lines": count, "data-loading": loading || undefined, children: [_jsx("div", { className: "ms-dot-matrix-board__head", "aria-hidden": "true", children: columns.map((column, index) => {
+                    if (heading && index > 0 && index < span)
+                        return null;
+                    const width = heading && index === 0 ? widths.slice(0, span).reduce((sum, value) => sum + value, 0) : widths[index];
+                    const value = heading && index === 0 ? heading : column.label;
+                    return _jsx("span", { className: heading && index === 0 ? 'ms-dot-matrix-board__heading' : undefined, style: { width: `${size.width ? width / size.width * 100 : 0}%`, textAlign: column.align }, children: rail ? _jsx(MatrixText, { value: value, characters: capacity(width), align: column.align, preserveCase: true }) : value }, column.key);
+                }) }), _jsxs("div", { className: "ms-dot-matrix-board__screen", ref: screen, children: [_jsxs("table", { "aria-busy": loading, children: [_jsx("caption", { className: "ms-matrix-sr-only", children: label }), _jsx("colgroup", { children: columns.map((column, index) => _jsx("col", { style: { width: `${size.width ? widths[index] / size.width * 100 : 0}%` } }, column.key)) }), _jsx("thead", { className: "ms-matrix-sr-only", children: _jsx("tr", { children: columns.map((column) => _jsx("th", { scope: "col", children: column.label }, column.key)) }) }), _jsx("tbody", { children: slots.map(({ row, detail }, index) => {
+                                    const noteId = `${boardId}-note-${index}`;
+                                    if (detail && row)
+                                        return _jsx("tr", { className: "ms-dot-matrix-board__detail", "aria-hidden": "true", style: { height: `${100 / count}%` }, children: _jsx("td", { colSpan: columns.length, children: _jsx(MatrixText, { value: row.note, characters: capacity(size.width), preserveCase: rail }) }) }, `${row.id}-detail`);
+                                    return _jsx("tr", { "aria-hidden": !row || undefined, "data-tone": row?.tone, "data-selected": row && row.id === selectedRowId || undefined, style: { height: `${100 / count}%` }, children: columns.map((column, columnIndex) => {
+                                            const text = _jsx(MatrixText, { value: row ? row.cells[column.key] || '—' : '', characters: capacity(widths[columnIndex]), align: column.align, preserveCase: rail });
+                                            const selection = selectionColumn ? column.key === selectionColumn : columnIndex === 0;
+                                            return _jsxs("td", { children: [row && onSelectRow && selection
+                                                        ? _jsx("button", { type: "button", "aria-pressed": row.id === selectedRowId, "aria-describedby": row.note ? noteId : undefined, onClick: () => onSelectRow(row.id), children: text }) : text, row?.note && selection && _jsx("span", { className: "ms-matrix-sr-only", id: noteId, children: row.note })] }, column.key);
+                                        }) }, row?.id ?? `blank-${index}`);
+                                }) })] }), message && _jsx("div", { className: "ms-dot-matrix-board__message", role: "status", children: message })] }), (footerLabel || clockLabel) && _jsxs("div", { className: "ms-dot-matrix-board__footer", children: [footerLabel && _jsx(MatrixText, { value: footerLabel, characters: capacity(size.width * .6), preserveCase: rail }), clockLabel && _jsx("div", { className: "ms-dot-matrix-board__clock", children: _jsx(MatrixText, { value: clockLabel, characters: Math.max(1, Array.from(clockLabel).length), align: "right", preserveCase: rail }) })] })] });
+}

package/components/RailStationHeroCard.d.ts

@@ -0,0 +1,46 @@
+import type { DotMatrixRow } from './DotMatrixBoard.tsx';
+import { type TransportHeroOptions } from './TransportHeroBoard.tsx';
+export interface RailDeparture {
+    readonly id: string;
+    /** Consumer-formatted scheduled departure time. */
+    readonly time?: string;
+    readonly destination: string;
+    readonly platform?: string;
+    readonly platformSector?: string;
+    readonly service?: string;
+    readonly serviceCategory?: 'intercity' | 'international' | 'regional' | 'suburban';
+    /** Consumer-formatted expected time or status, e.g. "17:08" or "Cancelled". */
+    readonly expected?: string;
+    readonly via?: string;
+    readonly serviceNote?: string;
+    readonly tone?: DotMatrixRow['tone'];
+}
+declare const defaultLabels: {
+    station: string;
+    departures: string;
+    service: string;
+    time: string;
+    destination: string;
+    platform: string;
+    expected: string;
+    via: string;
+    loading: string;
+    empty: string;
+    retry: string;
+    detail: string;
+};
+export interface RailStationHeroCardProps extends Omit<TransportHeroOptions, 'presentation'> {
+    readonly presentation?: TransportHeroOptions['presentation'] | 'sbb';
+    readonly station: {
+        readonly name: string;
+        readonly code?: string;
+        readonly locality?: string;
+    };
+    readonly departures: readonly RailDeparture[];
+    readonly labels?: Partial<typeof defaultLabels>;
+    readonly onSelectDeparture?: (id: string) => void;
+    readonly selectedDepartureId?: string;
+}
+/** Station identity with time, destination, platform, expected status and service details. */
+export declare function RailStationHeroCard({ station, departures, labels, presentation, lineCount, boardHeight, minRowHeight, clockLabel, footerLabel, note, loading, error, onRetry, onSelectDeparture, selectedDepartureId, className }: RailStationHeroCardProps): import("react").JSX.Element;
+export {};

package/components/RailStationHeroCard.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { TransportHeroBoard } from './TransportHeroBoard.js';
+import { SbbDepartureBoard } from './SbbDepartureBoard.js';
+const defaultLabels = { station: 'Rail station', departures: 'Departures', service: 'Train', time: 'Time', destination: 'Destination', platform: 'Plat', expected: 'Expt',
+    via: 'via', loading: 'Loading rail departures…', empty: 'No trains expected.', retry: 'Retry', detail: 'Information' };
+/** Station identity with time, destination, platform, expected status and service details. */
+export function RailStationHeroCard({ station, departures, labels, presentation = 'uk-rail', lineCount = 8, boardHeight = 400, minRowHeight, clockLabel, footerLabel, note, loading, error, onRetry, onSelectDeparture, selectedDepartureId, className = '' }) {
+    const titleId = useId();
+    const sbb = presentation === 'sbb';
+    const copy = { ...defaultLabels, ...(sbb ? { platform: 'Platform' } : {}), ...labels };
+    return _jsxs("section", { className: `ms-rail-station-hero ${className}`, "data-presentation": presentation, "aria-labelledby": titleId, children: [_jsxs("div", { className: "ms-rail-station-hero__masthead", children: [_jsxs("span", { children: [copy.station, station.locality ? ` / ${station.locality}` : ''] }), station.code && _jsx("strong", { children: station.code })] }), _jsxs("div", { className: "ms-rail-station-hero__identity", children: [_jsx("span", { "aria-hidden": "true", children: sbb ? _jsxs("svg", { viewBox: "0 0 40 32", children: [_jsx("rect", { x: "10", y: "3", width: "20", height: "22", rx: "4" }), _jsx("path", { d: "M10 15h20M15 25l-4 5m14-5 4 5" }), _jsx("circle", { cx: "15", cy: "20", r: "1" }), _jsx("circle", { cx: "25", cy: "20", r: "1" })] }) : _jsx("svg", { viewBox: "0 0 40 32", children: _jsx("path", { d: "M3 10h31L23 3M37 22H6l11 7M10 16h20" }) }) }), _jsx("h2", { id: titleId, children: station.name })] }), sbb ? error ? _jsxs("div", { className: "ms-transport-hero__error", role: "status", children: [error, onRetry && _jsx("button", { type: "button", onClick: onRetry, children: copy.retry })] })
+                : _jsx(SbbDepartureBoard, { label: `${station.name} ${copy.departures}`, departures: departures, labels: copy, lineCount: lineCount, height: boardHeight, minRowHeight: minRowHeight, loading: loading, clockLabel: clockLabel, footerLabel: footerLabel, onSelectDeparture: onSelectDeparture, selectedDepartureId: selectedDepartureId })
+                : _jsx(TransportHeroBoard, { label: `${station.name} ${copy.departures}`, presentation: presentation, boardHeight: boardHeight, heading: copy.departures, headingColumnSpan: 2, columns: [{ key: 'time', label: copy.time, characters: 5, minCharacters: 5 },
+                        { key: 'destination', label: copy.destination, characters: 24, minCharacters: 5 },
+                        { key: 'platform', label: copy.platform, characters: 3, minCharacters: 2, align: 'right' },
+                        { key: 'expected', label: copy.expected, characters: 9, minCharacters: 9, align: 'right' }], rows: departures.map((entry) => ({ id: entry.id, tone: entry.tone,
+                        note: [entry.via ? `${copy.via} ${entry.via}` : '', entry.serviceNote].filter(Boolean).join(' · ') || undefined,
+                        cells: { time: entry.time, destination: entry.destination, platform: entry.platform, expected: entry.expected } })), lineCount: lineCount, minRowHeight: minRowHeight, clockLabel: clockLabel, footerLabel: footerLabel, loading: loading, loadingMessage: copy.loading, emptyMessage: copy.empty, error: error, onRetry: onRetry, retryLabel: copy.retry, detailLabel: copy.detail, onSelectRow: onSelectDeparture, selectedRowId: selectedDepartureId, selectionColumn: "destination" }), _jsx("div", { className: "ms-transport-hero__note", children: note })] });
+}

package/components/SbbDepartureBoard.d.ts

@@ -0,0 +1,26 @@
+import type { RailDeparture } from './RailStationHeroCard.tsx';
+interface SbbDepartureBoardProps {
+    readonly label: string;
+    readonly departures: readonly RailDeparture[];
+    readonly labels: {
+        departures: string;
+        service: string;
+        time: string;
+        destination: string;
+        platform: string;
+        via: string;
+        loading: string;
+        empty: string;
+    };
+    readonly lineCount: number | 'auto';
+    readonly height: number;
+    readonly minRowHeight?: number;
+    readonly loading?: boolean;
+    readonly clockLabel?: string;
+    readonly footerLabel?: string;
+    readonly onSelectDeparture?: (id: string) => void;
+    readonly selectedDepartureId?: string;
+}
+/** A typographic station board; the surrounding rail hero owns identity and errors. */
+export declare function SbbDepartureBoard({ label, departures, labels, lineCount, height, minRowHeight, loading, clockLabel, footerLabel, onSelectDeparture, selectedDepartureId }: SbbDepartureBoardProps): import("react").JSX.Element;
+export {};

package/components/SbbDepartureBoard.js

@@ -0,0 +1,29 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+/** A typographic station board; the surrounding rail hero owns identity and errors. */
+export function SbbDepartureBoard({ label, departures, labels, lineCount, height, minRowHeight = 64, loading, clockLabel, footerLabel, onSelectDeparture, selectedDepartureId }) {
+    const body = useRef(null);
+    const [availableHeight, setAvailableHeight] = useState(300);
+    useEffect(() => {
+        const element = body.current;
+        if (!element)
+            return;
+        const observer = new ResizeObserver(([entry]) => setAvailableHeight(Math.floor(entry.contentRect.height)));
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    const targetHeight = Number.isFinite(minRowHeight) ? Math.max(32, Math.min(120, minRowHeight)) : 64;
+    const requested = lineCount === 'auto' ? Math.floor(availableHeight / targetHeight) : lineCount;
+    const count = Number.isFinite(requested) ? Math.max(1, Math.min(30, Math.floor(requested))) : 6;
+    const rowHeight = availableHeight / count;
+    const message = loading ? labels.loading : departures.length === 0 ? labels.empty : undefined;
+    return _jsxs("div", { className: "ms-sbb-board", "data-lines": count, style: { height: Number.isFinite(height) ? Math.max(140, height) : 400,
+            '--sbb-row-count': count, '--sbb-font-size': `${Math.max(8, Math.min(24, rowHeight * .38))}px`,
+            '--sbb-detail-size': `${Math.max(7, Math.min(13, rowHeight * .22))}px` }, children: [_jsxs("div", { className: "ms-sbb-board__title", children: [_jsx("strong", { children: labels.departures }), clockLabel && _jsx("span", { className: "ms-sbb-board__clock", children: clockLabel })] }), _jsxs("div", { className: "ms-sbb-board__table", role: "table", "aria-label": label, "aria-busy": loading || false, children: [_jsx("div", { role: "rowgroup", children: _jsx("div", { className: "ms-sbb-board__columns", role: "row", children: [labels.service, labels.time, labels.destination, labels.platform].map((text, index) => _jsx("div", { role: "columnheader", children: text }, index)) }) }), _jsxs("div", { className: "ms-sbb-board__body", ref: body, children: [_jsx("div", { className: "ms-sbb-board__rows", role: "rowgroup", children: Array.from({ length: count }, (_, index) => {
+                                    const entry = message ? undefined : departures[index];
+                                    const details = entry ? [entry.via ? `${labels.via} ${entry.via}` : '', entry.serviceNote].filter(Boolean).join(' · ') : '';
+                                    return _jsxs("div", { className: "ms-sbb-board__row", role: "row", "aria-hidden": !entry || undefined, "data-tone": entry?.tone, "data-selected": entry && selectedDepartureId === entry.id || undefined, children: [_jsx("div", { role: "cell", children: _jsx("span", { className: "ms-sbb-board__service", "data-category": entry?.serviceCategory, title: entry?.service, children: entry ? entry.service || '—' : '' }) }), _jsxs("div", { role: "cell", children: [_jsx("span", { className: "ms-sbb-board__time", children: entry ? entry.time || '—' : '' }), entry?.expected && _jsx("span", { className: "ms-sbb-board__expected", title: entry.expected, children: entry.expected })] }), _jsx("div", { role: "cell", children: entry && onSelectDeparture
+                                                    ? _jsxs("button", { type: "button", "aria-pressed": selectedDepartureId === entry.id, onClick: () => onSelectDeparture(entry.id), title: entry.destination, children: [_jsx("span", { className: "ms-sbb-board__destination", children: entry.destination }), details && _jsx("span", { className: "ms-sbb-board__details", title: details, children: details })] })
+                                                    : _jsxs(_Fragment, { children: [_jsx("span", { className: "ms-sbb-board__destination", title: entry?.destination, children: entry?.destination }), details && _jsx("span", { className: "ms-sbb-board__details", title: details, children: details })] }) }), _jsxs("div", { role: "cell", children: [_jsx("strong", { className: "ms-sbb-board__platform", title: entry?.platform, children: entry ? entry.platform || '—' : '' }), entry?.platformSector && _jsx("span", { className: "ms-sbb-board__sector", title: entry.platformSector, children: entry.platformSector })] })] }, entry?.id ?? `blank-${index}`);
+                                }) }), message && _jsx("div", { className: "ms-sbb-board__message", role: "status", children: message })] })] }), footerLabel && _jsx("div", { className: "ms-sbb-board__footer", children: footerLabel })] });
+}

package/components/SplitFlapBoard.d.ts

@@ -0,0 +1,25 @@
+export interface SplitFlapColumn {
+    readonly key: string;
+    readonly label: string;
+    /** Fixed number of flaps. Full values remain available to assistive technology. */
+    readonly characters: number;
+}
+export interface SplitFlapRow {
+    readonly id: string;
+    readonly cells: Readonly<Record<string, string | undefined>>;
+    readonly tone?: 'neutral' | 'accent' | 'warning';
+}
+export interface SplitFlapBoardProps {
+    readonly label: string;
+    readonly columns: readonly SplitFlapColumn[];
+    readonly rows: readonly SplitFlapRow[];
+    readonly emptyMessage?: string;
+    readonly loading?: boolean;
+    readonly loadingMessage?: string;
+    readonly loadingRows?: number;
+    readonly onSelectRow?: (id: string) => void;
+    readonly selectedRowId?: string;
+    readonly selectionColumn?: string;
+}
+/** Transport-neutral display: consumers own ordering, time formatting and data provenance. */
+export declare function SplitFlapBoard({ label, columns, rows, emptyMessage, loading, loadingMessage, loadingRows, onSelectRow, selectedRowId, selectionColumn }: SplitFlapBoardProps): import("react").JSX.Element;

package/components/SplitFlapBoard.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+function flapCount(characters) {
+    return Math.max(1, Math.min(40, Math.floor(characters) || 1));
+}
+/** Keep the message in the widest display column, wrapping without losing localized text. */
+function emptyBoardRows(message, columns) {
+    const column = columns.reduce((widest, next) => !widest || flapCount(next.characters) > flapCount(widest.characters) ? next : widest, undefined);
+    if (!column)
+        return [];
+    const width = flapCount(column.characters);
+    const lines = [];
+    let line = [];
+    for (const word of message.toLocaleUpperCase().trim().split(/\s+/u)) {
+        const letters = Array.from(word);
+        if (line.length && line.length + 1 + letters.length > width) {
+            lines.push(line.join(''));
+            line = [];
+        }
+        while (letters.length > width)
+            lines.push(letters.splice(0, width).join(''));
+        if (line.length && letters.length)
+            line.push(' ');
+        line.push(...letters);
+    }
+    if (line.length)
+        lines.push(line.join(''));
+    return lines.map((text, index) => ({ id: `empty-${index}`, cells: { [column.key]: text } }));
+}
+function FlapText({ value, characters, offset = 0 }) {
+    const count = flapCount(characters);
+    const letters = Array.from(value.toLocaleUpperCase());
+    const visible = letters.length > count ? [...letters.slice(0, count - 1), '…'] : letters;
+    return _jsxs("span", { className: "ms-flap-text", title: value, children: [_jsx("span", { className: "ms-board-sr-only", children: value }), _jsx("span", { className: "ms-flap-text__tiles", "aria-hidden": "true", children: Array.from({ length: count }, (_, index) => {
+                    const character = visible[index] ?? ' ';
+                    const phase = index + offset;
+                    return _jsx("span", { className: "ms-flap", style: {
+                            '--flap-delay': `${Math.min(phase * 18, 360)}ms`,
+                            '--flap-phase': `${-(phase % 8) * 240}ms`,
+                            '--flap-motion-phase': `${-((phase * 37) % 240)}ms`,
+                        }, children: _jsxs("span", { className: "ms-flap__face", children: [character === ' ' ? '\u00a0' : character, _jsx("span", { className: "ms-flap__drum" })] }) }, `${index}:${character}`);
+                }) })] });
+}
+/** Transport-neutral display: consumers own ordering, time formatting and data provenance. */
+export function SplitFlapBoard({ label, columns, rows, emptyMessage = 'No movements in this window.', loading = false, loadingMessage = 'Loading movements…', loadingRows = 5, onSelectRow, selectedRowId, selectionColumn }) {
+    const hintId = useId();
+    const empty = !loading && rows.length === 0;
+    const displayedRows = loading
+        ? Array.from({ length: Number.isFinite(loadingRows) ? Math.max(1, Math.min(20, Math.floor(loadingRows))) : 5 }, (_, index) => ({ id: `loading-${index}`, cells: {} }))
+        : empty ? emptyBoardRows(emptyMessage, columns) : rows;
+    return _jsxs("div", { className: "ms-split-flap-board", "data-loading": loading || undefined, "data-empty": empty || undefined, children: [_jsx("span", { className: "ms-board-sr-only", id: hintId, children: "Scroll horizontally to read all columns." }), _jsx("div", { className: "ms-split-flap-board__scroll", role: "region", "aria-label": label, "aria-describedby": hintId, "aria-busy": loading, tabIndex: 0, children: _jsxs("table", { className: "ms-split-flap-board__table", children: [_jsx("caption", { className: "ms-board-sr-only", children: label }), _jsx("thead", { children: _jsx("tr", { children: columns.map((column) => _jsx("th", { scope: "col", children: column.label }, column.key)) }) }), _jsx("tbody", { "aria-hidden": loading || empty || undefined, children: displayedRows.map((row, rowIndex) => _jsx("tr", { "data-tone": row.tone ?? 'neutral', "data-selected": !loading && !empty && row.id === selectedRowId || undefined, children: columns.map((column, index) => {
+                                    const text = _jsx(FlapText, { value: loading ? ' ' : row.cells[column.key] || (empty ? ' ' : '—'), characters: column.characters, offset: rowIndex * 3 + index * 2 });
+                                    return _jsx("td", { children: !loading && !empty && onSelectRow && (selectionColumn ? column.key === selectionColumn : index === 0)
+                                            ? _jsx("button", { className: "ms-split-flap-board__select", type: "button", "aria-pressed": row.id === selectedRowId, onClick: () => onSelectRow(row.id), children: text })
+                                            : text }, column.key);
+                                }) }, row.id)) })] }) }), loading ? _jsx("p", { className: "ms-split-flap-board__loading", role: "status", children: loadingMessage })
+                : empty && _jsx("span", { className: "ms-board-sr-only", role: "status", children: emptyMessage })] });
+}

package/components/TransportHeroBoard.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import { type DotMatrixBoardProps } from './DotMatrixBoard.tsx';
+/** Shared display options; each transport card supplies its own identity and columns. */
+export interface TransportHeroOptions {
+    readonly presentation?: 'dot-matrix' | 'uk-rail' | 'split-flap';
+    readonly lineCount?: number | 'auto';
+    readonly boardHeight?: number;
+    readonly minRowHeight?: number;
+    readonly clockLabel?: string;
+    readonly footerLabel?: string;
+    /** Source/freshness explanation owned by the consumer. */
+    readonly note: ReactNode;
+    readonly loading?: boolean;
+    readonly error?: string;
+    readonly onRetry?: () => void;
+    readonly className?: string;
+}
+interface TransportHeroBoardProps extends Omit<DotMatrixBoardProps, 'style' | 'className'> {
+    readonly presentation: NonNullable<TransportHeroOptions['presentation']>;
+    readonly boardHeight: number;
+    readonly error?: string;
+    readonly onRetry?: () => void;
+    readonly retryLabel: string;
+    readonly detailLabel: string;
+}
+/** Internal adapter: error handling and presentation switching shared by rail and bus. */
+export declare function TransportHeroBoard({ presentation, boardHeight, error, onRetry, retryLabel, detailLabel, ...board }: TransportHeroBoardProps): import("react").JSX.Element;
+export {};

package/components/TransportHeroBoard.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DotMatrixBoard } from './DotMatrixBoard.js';
+import { SplitFlapBoard } from './SplitFlapBoard.js';
+/** Internal adapter: error handling and presentation switching shared by rail and bus. */
+export function TransportHeroBoard({ presentation, boardHeight, error, onRetry, retryLabel, detailLabel, ...board }) {
+    const height = Number.isFinite(boardHeight) ? Math.max(140, boardHeight) : 360;
+    if (error)
+        return _jsxs("div", { className: "ms-transport-hero__error", role: "status", children: [error, onRetry && _jsx("button", { type: "button", onClick: onRetry, children: retryLabel })] });
+    if (presentation !== 'split-flap')
+        return _jsx(DotMatrixBoard, { ...board, variant: presentation === 'uk-rail' ? 'uk-rail' : 'bus', style: { height } });
+    const count = board.lineCount === 'auto' ? Math.floor((height - 60) / (board.minRowHeight ?? 34)) : board.lineCount ?? 6;
+    const limit = Number.isFinite(count) ? Math.max(1, Math.min(30, Math.floor(count))) : 6;
+    const hasDetails = board.rows.some((row) => row.note);
+    return _jsxs("div", { className: "ms-transport-hero__flap", style: { height }, children: [_jsx(SplitFlapBoard, { ...board, columns: hasDetails ? [...board.columns, { key: '__detail', label: detailLabel, characters: 32 }] : board.columns, rows: board.rows.slice(0, limit).map((row) => ({ ...row, cells: { ...row.cells, __detail: row.note } })), loadingRows: limit }), (board.footerLabel || board.clockLabel) && _jsxs("div", { className: "ms-transport-hero__flap-footer", children: [_jsx("span", { children: board.footerLabel }), _jsx("span", { children: board.clockLabel })] })] });
+}

package/components/airport-hero-card.css

@@ -0,0 +1,42 @@
+@import './split-flap-board.css';
+
+.ms-airport-hero { --airport-accent: #edc96b; container-type: inline-size; color: #f0ecdd; background: linear-gradient(125deg, #292d27, #191d19 65%); border: 1px solid #4b4d40; border-radius: 12px; padding: clamp(16px, 3vw, 30px); box-shadow: 0 20px 60px #0003; font-family: ui-sans-serif, system-ui, sans-serif; min-width: 0; }
+.ms-airport-hero__masthead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
+.ms-airport-hero__eyebrow { color: var(--airport-accent); text-transform: uppercase; font-size: 10px; letter-spacing: .18em; }
+.ms-airport-hero__eyebrow > span { font-size: 18px; margin-right: 6px; }
+.ms-airport-hero__date { color: #bebfac; font: 11px/1.5 ui-monospace, monospace; letter-spacing: .06em; }
+.ms-airport-hero__identity { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px 24px; padding: 18px 0 20px; }
+.ms-airport-hero__code { color: var(--airport-accent); font-size: clamp(54px, 10cqi, 82px); font-weight: 650; line-height: .95; letter-spacing: -.065em; }
+.ms-airport-hero__identity h2 { max-width: 300px; color: #f0ecdd; font: 400 clamp(20px, 3.3cqi, 27px)/1.15 ui-sans-serif, system-ui, sans-serif; letter-spacing: -.025em; margin: 0; overflow-wrap: anywhere; }
+.ms-airport-hero__clock { padding-left: 24px; border-left: 1px solid #797c6155; text-align: right; }
+.ms-airport-hero__clock-label { display: block; color: #bebfac; font-size: 10px; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; }
+.ms-airport-hero__clock-value { display: block; margin-top: 4px; color: #f0ecdd; font: 400 42px/1.1 ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: -.06em; white-space: nowrap; }
+.ms-airport-hero__board-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 20px; border-bottom: 1px solid #4b4d40; margin-bottom: 14px; }
+.ms-airport-hero__directions { display: flex; gap: 22px; }
+.ms-airport-hero__directions button { min-height: 44px; padding: 10px 0 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: #b8baaa; font: 500 13px/1.4 ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
+.ms-airport-hero__directions button[aria-pressed='true'] { color: var(--airport-accent); border-bottom-color: var(--airport-accent); }
+.ms-airport-hero__directions button:hover { color: #f0ecdd; }
+.ms-airport-hero__window { color: #bebfac; font: 11px/1.5 ui-monospace, monospace; font-variant-numeric: tabular-nums; margin: 8px 0; }
+.ms-airport-hero button:focus-visible { outline: 2px solid var(--airport-accent); outline-offset: 4px; }
+.ms-airport-hero .ms-flap { font-size: 17px; }
+.ms-airport-hero .ms-split-flap-board__table th { color: #c4c3b0; font-size: 11px; letter-spacing: .12em; padding-bottom: 5px; }
+.ms-airport-hero__message { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 30px 0; margin: 0; font-size: 14px; color: #c5c7b6; }
+.ms-airport-hero__message button { background: #30352a; border: 1px solid #666b50; border-radius: 4px; color: var(--airport-accent); padding: 6px 12px; font: inherit; cursor: pointer; }
+.ms-airport-hero__note { color: #b8baaa; font-size: 11px; line-height: 1.6; margin-top: 14px; }
+@container (max-width: 600px) {
+  .ms-airport-hero__identity { grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
+  .ms-airport-hero__clock { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0 0; border-left: 0; border-top: 1px solid #797c6155; text-align: left; }
+  .ms-airport-hero__clock-value { margin-top: 0; font-size: 32px; }
+}
+@container (max-width: 440px) {
+  .ms-airport-hero__board-header { gap: 4px; }
+  .ms-airport-hero__directions { width: 100%; gap: 20px; }
+  .ms-airport-hero__window { margin: 6px 0 10px; }
+}
+.ms-airport-board__modes { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; color: #b8baaa; font: 12px/1.5 ui-sans-serif, system-ui, sans-serif; }
+.ms-airport-board__modes button, .ms-airport-board__unavailable button { min-height: 44px; padding: 8px 16px; border: 1px solid #4b4d40; border-radius: 6px; color: #f0ecdd; background: #1d211c; font: inherit; cursor: pointer; }
+.ms-airport-board__modes button[aria-pressed='true'] { border-color: #edc96b; color: #edc96b; }
+.ms-airport-board__modes button:disabled { opacity: .5; cursor: default; }
+.ms-airport-board__modes button:focus-visible, .ms-airport-board__unavailable button:focus-visible { outline: 2px solid #edc96b; outline-offset: 3px; }
+.ms-airport-board__unavailable { padding: 28px; border: 1px solid #4b4d40; border-radius: 12px; color: #f0ecdd; background: #1d211c; font: 14px/1.6 ui-sans-serif, system-ui, sans-serif; }
+.ms-airport-board__detail { color: #b8baaa; font: 13px/1.6 ui-sans-serif, system-ui, sans-serif; overflow-wrap: anywhere; }

package/components/dot-matrix-board.css

@@ -0,0 +1,49 @@
+.ms-dot-matrix-board {
+  --matrix-ink: #ffb340;
+  --matrix-unlit: #3c2b1260;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 320px;
+  min-width: 0;
+  min-height: 0;
+  padding: 16px;
+  color: var(--matrix-ink);
+  background: linear-gradient(115deg, #222523, #111412 60%);
+  border: 1px solid #3c403b;
+  border-radius: 5px;
+  box-shadow: inset 0 1px #ffffff12, 0 8px 24px #0003;
+}
+.ms-dot-matrix-board * { box-sizing: border-box; }
+.ms-dot-matrix-board__head { display: flex; flex: 0 0 28px; color: #c7c9c1; font: 500 12px/20px ui-sans-serif, system-ui, sans-serif; }
+.ms-dot-matrix-board__head > span { padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ms-dot-matrix-board__screen { flex: 1; position: relative; min-height: 0; min-width: 0; background: #080b09; box-shadow: inset 0 2px 8px #000; overflow: hidden; }
+.ms-dot-matrix-board table { table-layout: fixed; width: 100%; height: 100%; border-collapse: collapse; text-align: left; }
+.ms-dot-matrix-board td { padding: 0 8px; border-bottom: 1px solid #b4ad7d12; overflow: hidden; }
+.ms-dot-matrix-board tr:last-child td { border-bottom: 0; }
+.ms-matrix-text { display: block; position: relative; width: 100%; }
+.ms-matrix-text svg { display: block; width: 100%; height: var(--matrix-text-height); filter: drop-shadow(0 0 2px #ff9e292e); }
+.ms-matrix-text__unlit { color: var(--matrix-unlit); }
+.ms-matrix-text pattern circle { fill: var(--matrix-unlit); }
+.ms-dot-matrix-board [data-tone='accent'] td:last-child { color: #ffd895; }
+.ms-dot-matrix-board [data-tone='warning'] td:last-child { color: #ff8060; }
+.ms-dot-matrix-board [data-selected] { background: #ffb34016; box-shadow: inset 2px 0 var(--matrix-ink); }
+.ms-dot-matrix-board button { display: block; width: 100%; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; cursor: pointer; font: inherit; }
+.ms-dot-matrix-board button:hover { color: #ffe2ac; }
+.ms-dot-matrix-board button:focus-visible { outline: 2px solid var(--matrix-ink); outline-offset: 3px; }
+.ms-dot-matrix-board__message { position: absolute; inset: 0; display: grid; place-content: center; padding: 16px; overflow: auto; text-align: center; color: var(--matrix-ink); font: 15px/1.6 ui-monospace, monospace; background: #080b09e8; }
+.ms-dot-matrix-board__footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex: 0 0 38px; min-width: 0; padding: 8px; }
+.ms-dot-matrix-board__footer > .ms-matrix-text { width: 60%; min-width: 0; }
+.ms-dot-matrix-board__footer svg { height: 18px; }
+.ms-dot-matrix-board__clock { width: 34%; max-width: 160px; margin-left: auto; min-width: 0; }
+.ms-dot-matrix-board__clock svg { height: 22px; }
+.ms-dot-matrix-board__detail td { padding-left: 20px; }
+.ms-dot-matrix-board[data-variant='uk-rail'] { --matrix-ink: #f6cd46; --matrix-unlit: #51400c60; border-radius: 2px; border: 1px solid #333431; background: #10120f; box-shadow: inset 0 0 0 5px #191b18, 0 12px 32px #0004; padding: 20px; }
+.ms-dot-matrix-board[data-variant='uk-rail'] .ms-dot-matrix-board__head { flex-basis: 42px; align-items: center; color: var(--matrix-ink); background: #0a0c08; border-bottom: 5px solid #10120f; }
+.ms-dot-matrix-board[data-variant='uk-rail'] .ms-dot-matrix-board__head svg { height: 18px; }
+.ms-dot-matrix-board[data-variant='uk-rail'] .ms-dot-matrix-board__heading svg { height: 24px; }
+.ms-dot-matrix-board[data-variant='uk-rail'] td { border-color: #10120f; border-bottom-width: 3px; background: #c7a53208; }
+.ms-dot-matrix-board[data-variant='uk-rail'] [data-tone] td:last-child { color: var(--matrix-ink); }
+.ms-dot-matrix-board[data-variant='uk-rail'] .ms-dot-matrix-board__footer { color: var(--matrix-ink); background: #0a0c08; border-top: 5px solid #10120f; }
+.ms-matrix-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

package/components/dot-matrix-font.d.ts

@@ -0,0 +1,2 @@
+/** Unsupported scripts retain their original text through the SVG text fallback. */
+export declare function matrixPath(value: string): string | undefined;

package/components/dot-matrix-font.js

@@ -0,0 +1,61 @@
+// Original 5 × 7 bitmap alphabet. Each integer is one row, most significant bit first.
+const glyphs = {
+    a: [0, 0, 14, 1, 15, 17, 15], b: [16, 16, 30, 17, 17, 17, 30],
+    c: [0, 0, 14, 16, 16, 17, 14], d: [1, 1, 15, 17, 17, 17, 15],
+    e: [0, 0, 14, 17, 31, 16, 14], f: [6, 9, 8, 28, 8, 8, 8],
+    g: [0, 15, 17, 17, 15, 1, 14], h: [16, 16, 30, 17, 17, 17, 17],
+    i: [4, 0, 12, 4, 4, 4, 14], j: [2, 0, 6, 2, 2, 18, 12],
+    k: [16, 16, 18, 20, 24, 20, 18], l: [12, 4, 4, 4, 4, 4, 14],
+    m: [0, 0, 26, 21, 21, 21, 21], n: [0, 0, 30, 17, 17, 17, 17],
+    o: [0, 0, 14, 17, 17, 17, 14], p: [0, 0, 30, 17, 30, 16, 16],
+    q: [0, 0, 15, 17, 15, 1, 1], r: [0, 0, 22, 25, 16, 16, 16],
+    s: [0, 0, 15, 16, 14, 1, 30], t: [8, 8, 28, 8, 8, 9, 6],
+    u: [0, 0, 17, 17, 17, 19, 13], v: [0, 0, 17, 17, 17, 10, 4],
+    w: [0, 0, 17, 17, 21, 21, 10], x: [0, 0, 17, 10, 4, 10, 17],
+    y: [0, 0, 17, 17, 15, 1, 14], z: [0, 0, 31, 2, 4, 8, 31],
+    '·': [0, 0, 0, 4, 0, 0, 0],
+    ' ': [0, 0, 0, 0, 0, 0, 0],
+    A: [14, 17, 17, 31, 17, 17, 17], B: [30, 17, 17, 30, 17, 17, 30],
+    C: [14, 17, 16, 16, 16, 17, 14], D: [30, 17, 17, 17, 17, 17, 30],
+    E: [31, 16, 16, 30, 16, 16, 31], F: [31, 16, 16, 30, 16, 16, 16],
+    G: [14, 17, 16, 23, 17, 17, 15], H: [17, 17, 17, 31, 17, 17, 17],
+    I: [14, 4, 4, 4, 4, 4, 14], J: [7, 2, 2, 2, 2, 18, 12],
+    K: [17, 18, 20, 24, 20, 18, 17], L: [16, 16, 16, 16, 16, 16, 31],
+    M: [17, 27, 21, 21, 17, 17, 17], N: [17, 25, 21, 19, 17, 17, 17],
+    O: [14, 17, 17, 17, 17, 17, 14], P: [30, 17, 17, 30, 16, 16, 16],
+    Q: [14, 17, 17, 17, 21, 18, 13], R: [30, 17, 17, 30, 20, 18, 17],
+    S: [15, 16, 16, 14, 1, 1, 30], T: [31, 4, 4, 4, 4, 4, 4],
+    U: [17, 17, 17, 17, 17, 17, 14], V: [17, 17, 17, 17, 17, 10, 4],
+    W: [17, 17, 17, 21, 21, 21, 10], X: [17, 17, 10, 4, 10, 17, 17],
+    Y: [17, 17, 10, 4, 4, 4, 4], Z: [31, 1, 2, 4, 8, 16, 31],
+    '0': [14, 17, 19, 21, 25, 17, 14], '1': [4, 12, 4, 4, 4, 4, 14],
+    '2': [14, 17, 1, 2, 4, 8, 31], '3': [30, 1, 1, 14, 1, 1, 30],
+    '4': [2, 6, 10, 18, 31, 2, 2], '5': [31, 16, 16, 30, 1, 1, 30],
+    '6': [14, 16, 16, 30, 17, 17, 14], '7': [31, 1, 2, 4, 8, 8, 8],
+    '8': [14, 17, 17, 14, 17, 17, 14], '9': [14, 17, 17, 15, 1, 1, 14],
+    '-': [0, 0, 0, 31, 0, 0, 0], '—': [0, 0, 0, 31, 0, 0, 0],
+    '.': [0, 0, 0, 0, 0, 12, 12], '…': [0, 0, 0, 0, 0, 0, 21],
+    ':': [0, 12, 12, 0, 12, 12, 0], '/': [1, 1, 2, 4, 8, 16, 16],
+    '+': [0, 4, 4, 31, 4, 4, 0], '&': [12, 18, 20, 8, 21, 18, 13],
+    "'": [4, 4, 8, 0, 0, 0, 0], '’': [4, 4, 8, 0, 0, 0, 0],
+    '(': [2, 4, 8, 8, 8, 4, 2], ')': [8, 4, 2, 2, 2, 4, 8],
+    '!': [4, 4, 4, 4, 4, 0, 4], '?': [14, 17, 1, 2, 4, 0, 4],
+};
+/** Unsupported scripts retain their original text through the SVG text fallback. */
+export function matrixPath(value) {
+    let path = '';
+    for (const [index, character] of Array.from(value).entries()) {
+        const glyph = glyphs[character];
+        if (!glyph)
+            return undefined;
+        glyph.forEach((bits, y) => {
+            for (let x = 0; x < 5; x++) {
+                if (bits & (1 << (4 - x))) {
+                    const cx = index * 6 + x + .5;
+                    path += `M${cx - .36},${y + .5}a.36,.36 0 1,0 .72,0a.36,.36 0 1,0 -.72,0`;
+                }
+            }
+        });
+    }
+    return path;
+}

package/components/sbb-departure-board.css

@@ -0,0 +1,49 @@
+.ms-sbb-board { --sbb-blue: #122b65; display: flex; flex-direction: column; min-width: 0; min-height: 0; width: 100%; background: var(--sbb-blue); color: #fff; border: 1px solid #5873a1; border-radius: 2px; font-family: Arial, Helvetica, sans-serif; container-type: inline-size; }
+.ms-sbb-board__title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px 12px; flex-shrink: 0; }
+.ms-sbb-board__title strong { font-size: clamp(20px, 4cqi, 30px); font-weight: 500; }
+.ms-sbb-board__clock { font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.ms-sbb-board__table { display: flex; flex-direction: column; flex: 1; min-height: 0; }
+.ms-sbb-board__columns, .ms-sbb-board__row { display: grid; grid-template-columns: minmax(58px, .9fr) minmax(62px, .9fr) minmax(0, 4fr) minmax(48px, .6fr); column-gap: 14px; padding: 0 20px; }
+.ms-sbb-board__columns { padding-bottom: 8px; font-size: 11px; color: #ccd8ef; border-bottom: 1px solid #7790b8; }
+.ms-sbb-board__columns > :last-child { text-align: right; }
+.ms-sbb-board__columns > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ms-sbb-board__body { flex: 1; min-height: 0; position: relative; }
+.ms-sbb-board__rows { display: grid; grid-template-rows: repeat(var(--sbb-row-count), minmax(0, 1fr)); height: 100%; }
+.ms-sbb-board__row { border-bottom: 1px solid #637fa655; align-items: center; font-size: var(--sbb-font-size); line-height: 1.15; min-height: 0; }
+.ms-sbb-board__row:nth-child(even) { background: #ffffff05; }
+.ms-sbb-board__row > [role='cell'] { min-width: 0; max-height: 100%; overflow: hidden; }
+.ms-sbb-board__row > [role='cell']:last-child { text-align: right; }
+.ms-sbb-board__service { display: inline-block; max-width: 100%; padding: .12em .25em; font-size: .78em; font-weight: 700; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
+.ms-sbb-board__service[data-category='intercity'], .ms-sbb-board__service[data-category='international'] { background: #fff; color: #c90016; font-style: italic; }
+.ms-sbb-board__service[data-category='regional'] { border: 1px solid #fff; }
+.ms-sbb-board__service[data-category='suburban'] { background: #fff; color: #122b65; }
+.ms-sbb-board__time { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
+.ms-sbb-board__destination, .ms-sbb-board__details, .ms-sbb-board__expected, .ms-sbb-board__sector, .ms-sbb-board__platform { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ms-sbb-board__destination { font-weight: 600; }
+.ms-sbb-board__details { margin-top: .2em; color: #d6e0f4; font-size: var(--sbb-detail-size); font-weight: 400; }
+.ms-sbb-board__expected, .ms-sbb-board__sector { margin-top: .2em; font-size: var(--sbb-detail-size); font-weight: 400; }
+.ms-sbb-board__row[data-tone='warning'] .ms-sbb-board__expected { color: #ffdc69; font-weight: 700; }
+.ms-sbb-board__platform { font-size: 1.2em; font-weight: 600; }
+.ms-sbb-board button { display: block; width: 100%; text-align: left; border: 0; border-radius: 0; padding: 0; color: inherit; background: none; font: inherit; cursor: pointer; }
+.ms-sbb-board button:hover .ms-sbb-board__destination { text-decoration: underline; }
+.ms-sbb-board button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
+.ms-sbb-board__row[data-selected] { background: #ffffff20; box-shadow: inset 3px 0 #fff; }
+.ms-sbb-board__message { position: absolute; inset: 0; display: grid; place-content: center; padding: 16px; overflow: auto; background: var(--sbb-blue); font-size: 14px; line-height: 1.5; text-align: center; }
+.ms-sbb-board__footer { padding: 10px 20px; font-size: 11px; color: #d6e0f4; flex-shrink: 0; }
+@container (max-width: 480px) {
+  .ms-sbb-board__columns, .ms-sbb-board__row { grid-template-columns: 44px 46px minmax(0, 1fr) 36px; column-gap: 8px; padding-left: 10px; padding-right: 10px; }
+  .ms-sbb-board__title { padding: 12px 10px; }
+  .ms-sbb-board__clock { font-size: 14px; }
+  .ms-sbb-board__row { font-size: min(var(--sbb-font-size), 15px); }
+}
+@container (max-width: 360px) {
+  .ms-sbb-board__columns, .ms-sbb-board__row { grid-template-columns: 46px minmax(0, 1fr) 32px; grid-template-rows: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 8px; }
+  .ms-sbb-board__columns > :nth-child(1), .ms-sbb-board__row > :nth-child(1) { grid-column: 1; grid-row: 2; align-self: start; }
+  .ms-sbb-board__columns > :nth-child(2), .ms-sbb-board__row > :nth-child(2) { grid-column: 1; grid-row: 1; align-self: end; }
+  .ms-sbb-board__columns > :nth-child(3), .ms-sbb-board__row > :nth-child(3) { grid-column: 2; grid-row: 1 / 3; }
+  .ms-sbb-board__columns > :nth-child(4), .ms-sbb-board__row > :nth-child(4) { grid-column: 3; grid-row: 1 / 3; }
+  .ms-sbb-board__columns { align-items: center; font-size: 10px; line-height: 1.2; }
+  .ms-sbb-board__service { font-size: .7em; }
+  .ms-sbb-board__expected { font-size: min(var(--sbb-detail-size), 10px); margin-top: 0; }
+  .ms-sbb-board__title { flex-wrap: wrap; gap: 4px 12px; }
+}