@dxlbnl/ui 0.1.0

package/dist/components/forms/RadioGroup.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+  import Radio from './Radio.svelte'
+
+  interface RadioOption {
+    value: string
+    label: string
+    disabled?: boolean
+  }
+
+  interface Props extends Omit<HTMLAttributes<HTMLFieldSetElement>, 'onchange'> {
+    /** `<legend>` text for the fieldset. */
+    legend: string
+    /** `name` attribute shared by all radio inputs in the group. */
+    name: string
+    /** Array of `{ value, label, disabled? }` options. */
+    options: RadioOption[]
+    /** Currently selected value. */
+    value?: string
+    /** Disable all radios in the group. @default false */
+    disabled?: boolean
+    /** Called with the newly selected value string. */
+    onchange?: (value: string) => void
+    [key: string]: unknown
+  }
+
+  let {
+    legend,
+    name,
+    options,
+    value,
+    disabled = false,
+    onchange,
+    ...rest
+  }: Props = $props()
+
+  // Returns the tabindex for each radio: 0 for the selected (or first enabled if none selected), -1 for all others
+  function getTabIndex(optionValue: string, index: number): number {
+    if (value !== undefined) {
+      return optionValue === value ? 0 : -1
+    }
+    // No selection: first enabled radio gets tabindex=0
+    const firstEnabledIndex = options.findIndex(o => !o.disabled && !disabled)
+    return index === firstEnabledIndex ? 0 : -1
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    const target = event.target as HTMLInputElement
+    if (!['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft'].includes(event.key)) return
+
+    event.preventDefault()
+
+    // Find all enabled radio inputs inside the fieldset
+    const fieldset = target.closest('fieldset')
+    if (!fieldset) return
+    const inputs = Array.from(fieldset.querySelectorAll<HTMLInputElement>('input[type="radio"]:not([disabled])'))
+    if (inputs.length === 0) return
+
+    const currentIndex = inputs.indexOf(target)
+    if (currentIndex === -1) return
+
+    let nextIndex: number
+    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+      nextIndex = (currentIndex + 1) % inputs.length
+    } else {
+      nextIndex = (currentIndex - 1 + inputs.length) % inputs.length
+    }
+
+    const nextInput = inputs[nextIndex]
+    nextInput.focus()
+
+    // Find the option value for this input and fire onchange
+    const nextValue = nextInput.value
+    onchange?.(nextValue)
+  }
+</script>
+
+<fieldset class="radio-group" class:disabled={disabled} {disabled} onkeydown={handleKeydown} {...rest}>
+  <legend class="radio-group-legend">{legend}</legend>
+  {#each options as option, i}
+    <Radio
+      {name}
+      value={option.value}
+      label={option.label}
+      checked={option.value === value}
+      disabled={disabled || option.disabled}
+      tabindex={getTabIndex(option.value, i)}
+      onchange={() => onchange?.(option.value)}
+    />
+  {/each}
+</fieldset>
+
+<style>
+  .radio-group {
+    border: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .radio-group-legend {
+    font-family: var(--mono);
+    font-size: 10px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--ink-faint);
+    margin-bottom: 4px;
+  }
+
+  .radio-group.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+</style>

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

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface RadioOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface Props extends Omit<HTMLAttributes<HTMLFieldSetElement>, 'onchange'> {
+    /** `<legend>` text for the fieldset. */
+    legend: string;
+    /** `name` attribute shared by all radio inputs in the group. */
+    name: string;
+    /** Array of `{ value, label, disabled? }` options. */
+    options: RadioOption[];
+    /** Currently selected value. */
+    value?: string;
+    /** Disable all radios in the group. @default false */
+    disabled?: boolean;
+    /** Called with the newly selected value string. */
+    onchange?: (value: string) => void;
+    [key: string]: unknown;
+}
+declare const RadioGroup: import("svelte").Component<Props, {}, "">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

package/dist/components/forms/Select.stories.svelte

@@ -0,0 +1,168 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import Select from "./Select.svelte";
+  import { resolveTokenColor } from "../../storybook-utils.js";
+
+  const OPTIONS = [
+    { value: "osc", label: "Oscillator" },
+    { value: "env", label: "Envelope" },
+    { value: "util", label: "Utility" },
+  ];
+
+  const { Story } = defineMeta({
+    title: "Forms/Select",
+    component: Select,
+    tags: ["autodocs"],
+  });
+
+  let _lastOnchange: string | undefined;
+  function captureOnchange(v: string) { _lastOnchange = v; }
+</script>
+
+<Story name="Default" args={{ options: OPTIONS, placeholder: "SELECT…" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole("button");
+    await expect(trigger).toBeVisible();
+    await expect(trigger).toBeEnabled();
+    await expect(trigger.textContent).toContain("SELECT…");
+    await expect(trigger.getAttribute("aria-expanded")).toBe("false");
+    await expect(canvas.queryByRole("listbox")).toBeNull();
+  }} />
+
+<Story name="Open Panel" args={{ options: OPTIONS, placeholder: "SELECT…" }}
+  play={async ({ canvasElement, userEvent }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole("button");
+    await userEvent.click(trigger);
+    await expect(canvas.getByRole("listbox")).toBeVisible();
+    await expect(canvas.getAllByRole("option")).toHaveLength(3);
+    await expect(trigger.getAttribute("aria-expanded")).toBe("true");
+  }} />
+
+<Story name="With Selection" args={{ options: OPTIONS, value: "env" }}
+  play={async ({ canvasElement, userEvent }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole("button");
+    await expect(trigger.textContent).toContain("Envelope");
+    await userEvent.click(trigger);
+    const options = canvas.getAllByRole("option");
+    const envelopeOption = options.find((o) => o.textContent && o.textContent.includes("Envelope"))!;
+    await expect(envelopeOption.getAttribute("aria-selected")).toBe("true");
+    for (const option of options) {
+      if (option !== envelopeOption) {
+        await expect(option.getAttribute("aria-selected")).toBe("false");
+      }
+    }
+  }} />
+
+<Story name="Disabled" args={{ options: OPTIONS, disabled: true }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole("button");
+    // AC-21: disabled button cannot be interacted with; toBeDisabled() proves keyboard/click
+    // events have no effect (browser prevents activation on disabled elements)
+    await expect(trigger).toBeDisabled();
+    await expect(getComputedStyle(trigger).opacity).toBe("0.4");
+    await expect(trigger.getAttribute("aria-expanded")).toBe("false");
+  }} />
+
+<Story name="Error State" args={{ options: OPTIONS, error: true }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole("button");
+    const dangerColor = resolveTokenColor("--danger");
+    await expect(getComputedStyle(trigger).borderColor).toBe(dangerColor);
+  }} />
+
+<!-- B15: Keyboard Navigation story — exercises the ARIA Listbox keyboard pattern. -->
+<Story name="Keyboard Navigation"
+  args={{
+    options: [
+      { value: "osc", label: "Oscillator" },
+      { value: "env", label: "Envelope" },
+      { value: "util", label: "Utility" },
+    ],
+    onchange: captureOnchange,
+  }}
+  play={async ({ canvasElement, userEvent }) => {
+    _lastOnchange = undefined;
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole("button");
+
+    // Step 1: open the panel
+    await userEvent.click(trigger);
+    await expect(trigger.getAttribute("aria-expanded")).toBe("true");
+
+    // AC-6: highlight initialises to first option when no selection
+    await expect(trigger.getAttribute("aria-activedescendant")).toBe("select-opt-0");
+
+    // AC-7: highlighted option has class "highlighted"
+    const options = canvas.getAllByRole("option");
+    await expect(options[0]).toHaveClass("highlighted");
+
+    // AC-12: ArrowUp from index 0 wraps to last (index 2)
+    await userEvent.keyboard("{ArrowUp}");
+    await expect(trigger.getAttribute("aria-activedescendant")).toBe("select-opt-2");
+
+    // Return to index 0 via Home
+    await userEvent.keyboard("{Home}");
+    await expect(trigger.getAttribute("aria-activedescendant")).toBe("select-opt-0");
+
+    // AC-8: ArrowDown moves to index 1
+    await userEvent.keyboard("{ArrowDown}");
+    await expect(trigger.getAttribute("aria-activedescendant")).toBe("select-opt-1");
+
+    // AC-11: ArrowUp moves back to index 0
+    await userEvent.keyboard("{ArrowUp}");
+    await expect(trigger.getAttribute("aria-activedescendant")).toBe("select-opt-0");
+
+    await userEvent.keyboard("{ArrowDown}");
+
+    // AC-8 cont: ArrowDown to index 2
+    await userEvent.keyboard("{ArrowDown}");
+    await expect(trigger.getAttribute("aria-activedescendant")).toBe("select-opt-2");
+
+    // AC-9: ArrowDown wraps last→first
+    await userEvent.keyboard("{ArrowDown}");
+    await expect(trigger.getAttribute("aria-activedescendant")).toBe("select-opt-0");
+
+    // AC-14: End jumps to last
+    await userEvent.keyboard("{End}");
+    await expect(trigger.getAttribute("aria-activedescendant")).toBe("select-opt-2");
+
+    // AC-13: Home jumps to first
+    await userEvent.keyboard("{Home}");
+    await expect(trigger.getAttribute("aria-activedescendant")).toBe("select-opt-0");
+
+    // Move to index 1 (Envelope)
+    await userEvent.keyboard("{ArrowDown}");
+    await expect(trigger.getAttribute("aria-activedescendant")).toBe("select-opt-1");
+
+    // AC-19: only highlighted option has class "highlighted"
+    const optionsNow = canvas.getAllByRole("option");
+    await expect(optionsNow[1]).toHaveClass("highlighted");
+    await expect(optionsNow[0]).not.toHaveClass("highlighted");
+
+    // AC-15: Enter calls onchange with the highlighted option's value
+    // AC-16, AC-17: panel closes, trigger displays confirmed label
+    await userEvent.keyboard("{Enter}");
+    await expect(_lastOnchange).toBe("env");
+    await expect(trigger.getAttribute("aria-expanded")).toBe("false");
+    await expect(canvas.queryByRole("listbox")).toBeNull();
+    await expect(trigger.textContent).toMatch(/ENVELOPE/i);
+
+    // AC-22: re-open highlights the selected option (index 1)
+    await userEvent.click(trigger);
+    await expect(trigger.getAttribute("aria-expanded")).toBe("true");
+    await expect(trigger.getAttribute("aria-activedescendant")).toBe("select-opt-1");
+
+    // AC-18: Escape closes without changing selection
+    await userEvent.keyboard("{Escape}");
+    await expect(trigger.getAttribute("aria-expanded")).toBe("false");
+    await expect(trigger.textContent).toMatch(/ENVELOPE/i);
+
+    // AC-5: aria-activedescendant absent when panel is closed
+    await expect(trigger.getAttribute("aria-activedescendant")).toBeNull();
+  }} />

package/dist/components/forms/Select.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Select from "./Select.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Select: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Select = InstanceType<typeof Select>;
+export default Select;

package/dist/components/forms/Select.svelte

@@ -0,0 +1,262 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import Button from "../primitives/Button.svelte";
+
+  interface SelectOption {
+    value: string;
+    label: string;
+  }
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "onchange"> {
+    /** Array of `{ value, label }` option objects. */
+    options: SelectOption[];
+    /** Currently selected value. */
+    value?: string;
+    /** Label shown when no value is selected. @default 'SELECT…' */
+    placeholder?: string;
+    /** Show the error (danger-border) state. @default false */
+    error?: boolean;
+    /** Disable the select — prevents opening the dropdown. @default false */
+    disabled?: boolean;
+    /** Called with the new value string when the user selects an option. */
+    onchange?: (value: string) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    options,
+    value = undefined,
+    placeholder = "SELECT…",
+    error = false,
+    disabled = false,
+    onchange,
+    ...rest
+  }: Props = $props();
+
+  let open = $state(false);
+  let rootEl: HTMLDivElement | undefined = $state(undefined);
+  let highlightedIndex = $state(-1);
+  // internal committed value — tracks the last selection so displayLabel
+  // reflects the user's choice even when the caller doesn't update the value prop
+  let internalValue = $state(value);
+
+  // keep internalValue in sync when the value prop changes from outside
+  $effect(() => {
+    internalValue = value;
+  });
+
+  let displayLabel = $derived(
+    options?.find((o) => o.value === internalValue)?.label ?? placeholder,
+  );
+
+  function handleTriggerClick() {
+    if (disabled) return;
+    open = !open;
+    if (open) {
+      const idx = options?.findIndex((o) => o.value === internalValue) ?? -1;
+      highlightedIndex = idx >= 0 ? idx : 0;
+    } else {
+      highlightedIndex = -1;
+    }
+  }
+
+  function handleSelect(newValue: string) {
+    internalValue = newValue;
+    open = false;
+    highlightedIndex = -1;
+    onchange?.(newValue);
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === "Escape") {
+      open = false;
+      highlightedIndex = -1;
+      return;
+    }
+    if (!open) return;
+    const count = options.length;
+    if (count === 0) return;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        highlightedIndex = (highlightedIndex + 1) % count;
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        highlightedIndex = (highlightedIndex - 1 + count) % count;
+        break;
+      case "Home":
+        e.preventDefault();
+        highlightedIndex = 0;
+        break;
+      case "End":
+        e.preventDefault();
+        highlightedIndex = count - 1;
+        break;
+      case "Enter":
+        if (highlightedIndex >= 0) {
+          e.preventDefault();
+          handleSelect(options[highlightedIndex].value);
+        }
+        break;
+    }
+  }
+
+  $effect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (rootEl && !rootEl.contains(e.target as Node)) {
+        open = false;
+      }
+    };
+    document.addEventListener("click", handler);
+    return () => document.removeEventListener("click", handler);
+  });
+</script>
+
+<div
+  class="select"
+  class:disabled
+  bind:this={rootEl}
+  onkeydown={handleKeydown}
+  role="presentation"
+  {...rest}
+>
+  <Button
+    variant="ghost"
+    type="button"
+    class={[open && "open", error && "err"].filter(Boolean).join(" ")}
+    aria-haspopup="listbox"
+    aria-expanded={open}
+    aria-disabled={disabled}
+    aria-activedescendant={open && highlightedIndex >= 0
+      ? `select-opt-${highlightedIndex}`
+      : undefined}
+    {disabled}
+    onclick={handleTriggerClick}
+  >
+    <span class="select-value">{displayLabel}</span>
+    <span class="select-chevron" aria-hidden="true">›</span>
+  </Button>
+  {#if open}
+    <ul class="select-panel" role="listbox" aria-label="Options">
+      {#each options as option, i}
+        <li
+          id="select-opt-{i}"
+          class="select-option"
+          class:selected={option.value === internalValue}
+          class:highlighted={i === highlightedIndex}
+          role="option"
+          aria-selected={option.value === internalValue}
+          onclick={() => handleSelect(option.value)}
+        >
+          {option.label}
+          {#if option.value === internalValue}
+            <span class="select-check" aria-hidden="true">✓</span>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .select {
+    position: relative;
+    width: 100%;
+    user-select: none;
+
+    :global(.btn) {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-family: var(--mono);
+      font-size: 13px;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      background: var(--bg-sunken);
+      color: var(--ink);
+      border: 1px solid var(--rule-strong);
+      padding: 7px 10px;
+      width: 100%;
+      cursor: pointer;
+      transition: border-color var(--transition);
+      border-radius: 0;
+
+      &.open {
+        border-left: 3px solid var(--amber);
+        padding-left: 8px;
+
+        .select-chevron {
+          transform: rotate(90deg);
+        }
+      }
+
+      &.err {
+        border-color: var(--danger);
+      }
+
+      &:disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  .select-chevron {
+    font-family: var(--mono);
+    font-size: 14px;
+    color: var(--amber);
+    transition: transform var(--transition);
+  }
+
+  .select-panel {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 50;
+    background: var(--bg-elev);
+    border-top: none;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .select-option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-family: var(--mono);
+    font-size: 12px;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    padding: 8px 10px;
+    cursor: pointer;
+    color: var(--ink-dim);
+    border-bottom: 1px solid var(--rule);
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+      background: var(--bg-rail);
+      color: var(--ink);
+    }
+
+    &.selected {
+      color: var(--amber);
+    }
+
+    &.highlighted {
+      background: var(--bg-rail);
+      color: var(--amber);
+    }
+  }
+
+  .select-check {
+    font-size: 11px;
+    color: var(--amber);
+  }
+</style>

package/dist/components/forms/Select.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from "svelte/elements";
+interface SelectOption {
+    value: string;
+    label: string;
+}
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "onchange"> {
+    /** Array of `{ value, label }` option objects. */
+    options: SelectOption[];
+    /** Currently selected value. */
+    value?: string;
+    /** Label shown when no value is selected. @default 'SELECT…' */
+    placeholder?: string;
+    /** Show the error (danger-border) state. @default false */
+    error?: boolean;
+    /** Disable the select — prevents opening the dropdown. @default false */
+    disabled?: boolean;
+    /** Called with the new value string when the user selects an option. */
+    onchange?: (value: string) => void;
+    [key: string]: unknown;
+}
+declare const Select: import("svelte").Component<Props, {}, "">;
+type Select = ReturnType<typeof Select>;
+export default Select;