@lilydesignsystem/svelte-headless 0.1.0

package/dist/components/QrCodeImage/QrCodeImage.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    // QrCodeImage component
+    //
+    // A headless container for displaying a QR code (two-dimensional barcode) that
+    // encodes data such as URLs, text, contact information, or other machine-readable
+    // content. It renders a <div> with role="img" and a required aria-label so screen
+    // reader users understand what the QR code represents. The consumer provides the
+    // actual QR code rendering (SVG, canvas, or third-party library output) as
+    // children. Commonly used for sharing links, mobile payments, event check-ins,
+    // and authentication workflows.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible description of the QR code content via aria-label.
+    //   children — Snippet, required. QR code rendering (SVG, canvas, or other visual output).
+    //   ...restProps — additional HTML attributes spread onto the <div>.
+    //
+    // Syntax:
+    //   <QrCodeImage label="Scan to visit example.com">{qrSvg}</QrCodeImage>
+    //
+    // Examples:
+    //   <!-- QR code with SVG rendering -->
+    //   <QrCodeImage label="Scan to visit example.com">
+    //     <svg><!-- QR code SVG paths --></svg>
+    //   </QrCodeImage>
+    //
+    //   <!-- QR code with canvas rendering -->
+    //   <QrCodeImage label="Scan to download the app">
+    //     <canvas bind:this={qrCanvas}></canvas>
+    //   </QrCodeImage>
+    //
+    // Keyboard:
+    //   None — this is a passive display container with no interactive behavior.
+    //
+    // Accessibility:
+    //   - role="img" identifies the container as an image for assistive technologies
+    //   - aria-label provides an accessible description of the encoded content
+    //   - Screen reader users hear the label instead of seeing the visual barcode
+    //
+    // Internationalization:
+    //   - The label prop is the only user-facing text; no hardcoded strings
+    //   - Label should describe the encoded content, not "QR code" generically
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Do not generate QR code data — consumer provides the rendered QR content
+    //   - The label should describe what scanning the code does, not just "QR code"
+    //
+    // References:
+    //   - WAI-ARIA img Role: https://www.w3.org/TR/wai-aria-1.2/#img
+
+    import type { Snippet } from "svelte";
+    let {
+        class: className = "",
+        label,
+        children,
+        ...restProps
+    }: { label: string; children: Snippet; [key: string]: unknown } = $props();
+</script>
+
+<!-- QrCodeImage.svelte -->
+<div
+    class={`qr-code-image ${className}`}
+    role="img"
+    aria-label={label}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

package/dist/components/QrCodeImage/QrCodeImage.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    label: string;
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const QrCodeImage: import("svelte").Component<$$ComponentProps, {}, "">;
+type QrCodeImage = ReturnType<typeof QrCodeImage>;
+export default QrCodeImage;

package/dist/components/Question/Question.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    let {
+        class: className = "",
+        label = undefined,
+        children,
+        ...restProps
+    }: {
+        label?: string;
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- Question.svelte -->
+<div class={`question ${className}`} aria-label={label} {...restProps}>
+    {@render children?.()}
+</div>

package/dist/components/Question/Question.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    label?: string;
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const Question: import("svelte").Component<$$ComponentProps, {}, "">;
+type Question = ReturnType<typeof Question>;
+export default Question;

package/dist/components/RadioGroup/RadioGroup.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+    // RadioGroup component
+    //
+    // A headless fieldset container that groups related radio buttons under the ARIA
+    // radiogroup role. It renders a <fieldset> with role="radiogroup" and an accessible
+    // label, enabling screen readers to communicate the relationship between individual
+    // radio options. Used when a set of mutually exclusive options is needed, such as
+    // selecting a size, choosing a shipping method, or picking a preference.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for the radio group via aria-label.
+    //   children — Snippet, required. Radio button elements to render inside the fieldset.
+    //   ...restProps — additional HTML attributes spread onto the <fieldset>.
+    //
+    // Syntax:
+    //   <RadioGroup label="Size">{children}</RadioGroup>
+    //
+    // Examples:
+    //   <!-- Radio group with labeled options -->
+    //   <RadioGroup label="Size">
+    //     <label><input type="radio" name="size" value="s" /> Small</label>
+    //     <label><input type="radio" name="size" value="m" /> Medium</label>
+    //     <label><input type="radio" name="size" value="l" /> Large</label>
+    //   </RadioGroup>
+    //
+    // Keyboard:
+    //   - Tab: moves focus into the radio group (to selected or first option)
+    //   - Arrow Up / Arrow Down: moves selection between radio buttons (native behavior)
+    //   - Space: selects the focused radio button (native behavior)
+    //
+    // Accessibility:
+    //   - role="radiogroup" identifies the fieldset as a group of radio buttons
+    //   - aria-label provides an accessible name so screen readers announce the group purpose
+    //   - Native <fieldset> provides semantic grouping
+    //
+    // Internationalization:
+    //   - The label prop is the only text; all option labels come through children
+    //   - No hardcoded user-facing strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - No internal state management; radio selection handled by native radio behavior
+    //   - Consumer provides radio inputs as children, typically wrapped in <label> elements
+    //
+    // References:
+    //   - WAI-ARIA Radio Group Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/
+    //   - WAI-ARIA Authoring Practices - Radio Group: https://www.w3.org/WAI/ARIA/apg/patterns/radio/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        children,
+        ...restProps
+    }: {
+        /** Accessible label for the group. */
+        label: string;
+        /** Radio button elements. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- RadioGroup.svelte -->
+<fieldset
+    class={`radio-group ${className}`}
+    role="radiogroup"
+    aria-label={label}
+    {...restProps}
+>
+    {@render children?.()}
+</fieldset>

package/dist/components/RadioGroup/RadioGroup.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Accessible label for the group. */
+    label: string;
+    /** Radio button elements. */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const RadioGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

package/dist/components/RadioInput/RadioInput.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+    // RadioInput component
+    //
+    // A headless bare <input type="radio"> element without a wrapping label, designed
+    // for custom radio group layouts where labels are provided separately or by a
+    // parent component. It uses aria-label for accessible naming. Useful in custom
+    // card selection interfaces, segmented controls, and layouts where the radio
+    // button and its label need independent positioning or styling.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name via aria-label.
+    //   name — string, optional. Radio group name for mutual exclusion.
+    //   value — string, optional. The value representing this radio option.
+    //   checked — boolean, default false. Whether this radio button is selected.
+    //   disabled — boolean, default false. Whether the radio button is disabled.
+    //   ...restProps — additional HTML attributes spread onto the <input>.
+    //
+    // Syntax:
+    //   <RadioInput label="Option A" name="choice" value="a" />
+    //
+    // Examples:
+    //   <!-- Single radio input -->
+    //   <RadioInput label="Option A" name="choice" value="a" />
+    //
+    //   <!-- Radio group with pre-selected option -->
+    //   <RadioInput label="Small" name="size" value="small" checked />
+    //   <RadioInput label="Medium" name="size" value="medium" />
+    //   <RadioInput label="Large" name="size" value="large" />
+    //
+    // Keyboard:
+    //   - Tab: moves focus to the selected radio in the group (or first if none selected)
+    //   - Arrow Up / Arrow Left: moves selection to the previous radio in the group
+    //   - Arrow Down / Arrow Right: moves selection to the next radio in the group
+    //   - Space: selects the focused radio button if not already selected
+    //
+    // Accessibility:
+    //   - aria-label provides an accessible name since no visible <label> is included
+    //   - Native radio input provides built-in role="radio" semantics
+    //
+    // Internationalization:
+    //   - The label prop is the only user-facing text; no hardcoded strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Do not wrap in a <div> or <label> — renders a bare <input> element
+    //   - Does not use $bindable() for checked; consumers use event handlers or bind directly
+    //
+    // References:
+    //   - WAI-ARIA Radio Group Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/
+    //   - MDN input type="radio": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
+
+    let {
+        class: className = "",
+        label,
+        name = undefined,
+        value = undefined,
+        checked = false,
+        disabled = false,
+        ...restProps
+    }: {
+        /** Accessible label. */
+        label: string;
+        /** Radio group name. */
+        name?: string;
+        /** Value for this option. */
+        value?: string;
+        /** Whether checked. */
+        checked?: boolean;
+        /** Whether disabled. */
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- RadioInput.svelte -->
+<input
+    class={`radio-input ${className}`}
+    type="radio"
+    aria-label={label}
+    {name}
+    {value}
+    {checked}
+    {disabled}
+    {...restProps}
+/>

package/dist/components/RadioInput/RadioInput.svelte.d.ts

@@ -0,0 +1,16 @@
+type $$ComponentProps = {
+    /** Accessible label. */
+    label: string;
+    /** Radio group name. */
+    name?: string;
+    /** Value for this option. */
+    value?: string;
+    /** Whether checked. */
+    checked?: boolean;
+    /** Whether disabled. */
+    disabled?: boolean;
+    [key: string]: unknown;
+};
+declare const RadioInput: import("svelte").Component<$$ComponentProps, {}, "">;
+type RadioInput = ReturnType<typeof RadioInput>;
+export default RadioInput;

package/dist/components/RangeInput/RangeInput.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+    // RangeInput component
+    //
+    // A headless slider control using the native <input type="range"> element for
+    // selecting a numeric value within a defined range. It renders a draggable track
+    // and handle with configurable minimum, maximum, and step values, and provides a
+    // bindable value prop for two-way data binding. Commonly used for volume controls,
+    // brightness settings, price filters, and continuous numeric spectrum selections.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name via aria-label.
+    //   value — number, default 50. Current numeric value; bindable with bind:value.
+    //   min — number, default 0. Minimum allowed value.
+    //   max — number, default 100. Maximum allowed value.
+    //   step — number, default 1. Increment between selectable values.
+    //   disabled — boolean, default false. Whether the input is disabled.
+    //   ...restProps — additional HTML attributes spread onto the <input>.
+    //
+    // Syntax:
+    //   <RangeInput label="Volume" bind:value />
+    //
+    // Examples:
+    //   <!-- Volume slider -->
+    //   <RangeInput label="Volume" bind:value min={0} max={100} />
+    //
+    //   <!-- Price range with step -->
+    //   <RangeInput label="Price range" bind:value={price} min={10} max={500} step={10} />
+    //
+    // Keyboard:
+    //   - Left Arrow / Down Arrow: decrease value by one step
+    //   - Right Arrow / Up Arrow: increase value by one step
+    //   - Home: set to minimum value
+    //   - End: set to maximum value
+    //   - Page Down: decrease by a larger step (browser-defined)
+    //   - Page Up: increase by a larger step (browser-defined)
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name since no visible <label> is associated
+    //   - Native <input type="range"> provides implicit slider role and value announcements
+    //
+    // Internationalization:
+    //   - The label prop is the only user-facing text; no hardcoded strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Default value is 50, centered in the default 0-100 range
+    //   - Do not wrap in a <div> — renders a bare <input> element
+    //   - Keyboard interactions are provided natively by <input type="range">
+    //
+    // References:
+    //   - WAI-ARIA Slider Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/slider/
+    //   - MDN input type="range": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(50),
+        min = 0,
+        max = 100,
+        step = 1,
+        disabled = false,
+        ...restProps
+    }: {
+        /** Accessible label. */
+        label: string;
+        /** Current value. Bindable. */
+        value?: number;
+        /** Minimum value. */
+        min?: number;
+        /** Maximum value. */
+        max?: number;
+        /** Step increment. */
+        step?: number;
+        /** Whether disabled. */
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- RangeInput.svelte -->
+<input
+    class={`range-input ${className}`}
+    type="range"
+    aria-label={label}
+    bind:value
+    {min}
+    {max}
+    {step}
+    {disabled}
+    {...restProps}
+/>

package/dist/components/RangeInput/RangeInput.svelte.d.ts

@@ -0,0 +1,18 @@
+type $$ComponentProps = {
+    /** Accessible label. */
+    label: string;
+    /** Current value. Bindable. */
+    value?: number;
+    /** Minimum value. */
+    min?: number;
+    /** Maximum value. */
+    max?: number;
+    /** Step increment. */
+    step?: number;
+    /** Whether disabled. */
+    disabled?: boolean;
+    [key: string]: unknown;
+};
+declare const RangeInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type RangeInput = ReturnType<typeof RangeInput>;
+export default RangeInput;

package/dist/components/RedAmberGreenPicker/RedAmberGreenPicker.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+    // RedAmberGreenPicker component
+    //
+    // A headless RAG (Red/Amber/Green) status input that renders a native
+    // <select> element with three traffic-light options: red, amber, and green.
+    // RAG status is widely used in project management dashboards, risk registers,
+    // and reporting tools to communicate health at a glance.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for the select element.
+    //   value — string, default "". Currently selected status value; bindable.
+    //   ...restProps — additional HTML attributes spread onto the <select>.
+    //
+    // Syntax:
+    //   <RedAmberGreenPicker label="Project status" bind:value={status} />
+    //
+    // Examples:
+    //   <!-- Pre-selected value -->
+    //   <RedAmberGreenPicker label="Health check" value="green" />
+    //
+    //   <!-- Two-way binding with state -->
+    //   <RedAmberGreenPicker label="Sprint status" bind:value={status} data-project="alpha" />
+    //
+    // Keyboard:
+    //   - Arrow Up/Down: navigate options (native select behavior)
+    //   - Enter/Space: open the dropdown (native select behavior)
+    //   - Escape: close the dropdown (native select behavior)
+    //
+    // Accessibility:
+    //   - aria-label on the <select> for screen reader context
+    //   - Native <select> provides implicit combobox/listbox role
+    //   - WCAG 2.2 AAA: properly labeled for assistive technology
+    //
+    // Internationalization:
+    //   - The label prop externalizes the accessible label string
+    //   - Option display text ("Red", "Amber", "Green") is hardcoded; wrap or fork to localize
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Value uses $bindable() for two-way binding with bind:value
+    //   - Options are fixed to the three RAG values: red, amber, green
+    //
+    // References:
+    //   - Traffic Light Rating System: https://en.wikipedia.org/wiki/Traffic_light_rating_system
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        ...restProps
+    }: {
+        /** Accessible label for the select element */
+        label: string;
+        /** Currently selected RAG status value, bindable */
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- RedAmberGreenPicker.svelte -->
+<select
+    class={`red-amber-green-picker ${className}`}
+    aria-label={label}
+    bind:value
+    {...restProps}
+>
+    <option value="red">Red</option>
+    <option value="amber">Amber</option>
+    <option value="green">Green</option>
+</select>

package/dist/components/RedAmberGreenPicker/RedAmberGreenPicker.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    /** Accessible label for the select element */
+    label: string;
+    /** Currently selected RAG status value, bindable */
+    value?: string;
+    [key: string]: unknown;
+};
+declare const RedAmberGreenPicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type RedAmberGreenPicker = ReturnType<typeof RedAmberGreenPicker>;
+export default RedAmberGreenPicker;

package/dist/components/RedAmberGreenPickerButton/RedAmberGreenPickerButton.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+    // RedAmberGreenPickerButton component
+    //
+    // A headless button representing one Red/Amber/Green status choice within a
+    // RAG status picker. Renders a <button> with aria-pressed to indicate the
+    // selected state and data-value for consumer CSS targeting. Commonly used in
+    // project dashboards, risk registers, and reporting tools where clicking a
+    // status button selects that status level.
+    //
+    // Props:
+    //   value — string, required. The status value (e.g. "red", "amber", "green").
+    //   label — string, required. Accessible name for the button via aria-label.
+    //   selected — boolean, default false. Whether this status is currently selected.
+    //   disabled — boolean, default false. Whether the button is disabled.
+    //   onclick — (event: MouseEvent) => void, optional. Click handler.
+    //   ...restProps — additional HTML attributes spread onto the <button>.
+    //
+    // Syntax:
+    //   <RedAmberGreenPickerButton value="green" label="Green" onclick={handleSelect} />
+    //
+    // Examples:
+    //   <!-- Selected status button -->
+    //   <RedAmberGreenPickerButton value="red" label="Red" selected={true} onclick={handleSelect} />
+    //   <!-- Disabled status button -->
+    //   <RedAmberGreenPickerButton value="amber" label="Amber" disabled={true} />
+    //
+    // Keyboard:
+    //   - Tab: Move focus to the button
+    //   - Enter: Activate the button (native button behavior)
+    //   - Space: Activate the button (native button behavior)
+    //
+    // Accessibility:
+    //   - aria-label provides an accessible name for the button
+    //   - aria-pressed indicates whether the status is currently selected
+    //   - data-value exposes the status value for consumer CSS selectors
+    //
+    // Internationalization:
+    //   - The label prop provides the accessible name; no hardcoded strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Compound component: used as a child within RedAmberGreenPicker
+    //   - Consumer can use [data-value] CSS selectors for status-based styling
+    //
+    // References:
+    //   - WAI-ARIA Button Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/button/
+    //   - Traffic Light Rating System: https://en.wikipedia.org/wiki/Traffic_light_rating_system
+
+    let {
+        class: className = "",
+        value,
+        label,
+        selected = false,
+        disabled = false,
+        onclick = undefined,
+        ...restProps
+    }: {
+        /** The status value (e.g. "red", "amber", "green"). */
+        value: string;
+        /** Accessible name for the button. */
+        label: string;
+        /** Whether this status is currently selected. */
+        selected?: boolean;
+        /** Whether the button is disabled. */
+        disabled?: boolean;
+        /** Click handler. */
+        onclick?: (event: MouseEvent) => void;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- RedAmberGreenPickerButton.svelte -->
+<button
+    class={`red-amber-green-picker-button ${className}`}
+    type="button"
+    aria-label={label}
+    aria-pressed={selected}
+    {disabled}
+    data-value={value}
+    {onclick}
+    {...restProps}
+>{label}</button>

package/dist/components/RedAmberGreenPickerButton/RedAmberGreenPickerButton.svelte.d.ts

@@ -0,0 +1,16 @@
+type $$ComponentProps = {
+    /** The status value (e.g. "red", "amber", "green"). */
+    value: string;
+    /** Accessible name for the button. */
+    label: string;
+    /** Whether this status is currently selected. */
+    selected?: boolean;
+    /** Whether the button is disabled. */
+    disabled?: boolean;
+    /** Click handler. */
+    onclick?: (event: MouseEvent) => void;
+    [key: string]: unknown;
+};
+declare const RedAmberGreenPickerButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type RedAmberGreenPickerButton = ReturnType<typeof RedAmberGreenPickerButton>;
+export default RedAmberGreenPickerButton;

package/dist/components/RedAmberGreenView/RedAmberGreenView.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+    // RedAmberGreenView component
+    //
+    // A headless RAG (Red/Amber/Green) status view that displays a traffic-light
+    // status value as read-only text inside a <span> element. Used to present
+    // previously captured RAG status data in dashboards, reports, and detail views
+    // where the status is informational rather than editable.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for screen readers via aria-label.
+    //   value — string, default "". The RAG status value to display (e.g. "red", "amber", "green").
+    //   ...restProps — additional HTML attributes spread onto the <span>.
+    //
+    // Syntax:
+    //   <RedAmberGreenView label="Project status" value="green" />
+    //
+    // Examples:
+    //   <!-- Display a dynamic status -->
+    //   <RedAmberGreenView label="Health check" value={status} />
+    //
+    //   <!-- With extra attributes -->
+    //   <RedAmberGreenView label="Risk level" value="amber" data-testid="risk" />
+    //
+    // Keyboard:
+    //   - None — this is a passive informational display, not an interactive element.
+    //
+    // Accessibility:
+    //   - aria-label on the <span> for screen reader context
+    //   - Screen readers announce the label and displayed status value
+    //   - WCAG 2.2 AAA: properly labeled for assistive technology
+    //
+    // Internationalization:
+    //   - The label prop externalizes the accessible label string
+    //   - The value is displayed as-is, allowing localized status names
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Read-only display component — not interactive, no $bindable()
+    //   - Consumer can apply color-coded backgrounds or text colors via restProps
+    //
+    // References:
+    //   - WAI-ARIA status role: https://www.w3.org/TR/wai-aria-1.2/#status
+    //   - Traffic Light Rating System: https://en.wikipedia.org/wiki/Traffic_light_rating_system
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        /** Accessible label for screen readers */
+        label: string;
+        /** The RAG status value to display (e.g. "red", "amber", "green") */
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- RedAmberGreenView.svelte -->
+<span
+    class={`red-amber-green-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>