@reddb-io/ui-kit 0.3.4 → 0.3.6

package/vendor/ds/kits/base/src/Navbar.svelte

@@ -0,0 +1,176 @@
+<script module lang="ts">
+  import { arrangements } from "./core/navbar";
+  import type { NavbarLink, NavbarCollapse, NavbarAlign } from "./core/navbar";
+  export { arrangements, NAVBAR_ALIGNMENTS, NAVBAR_COLLAPSE, type NavbarLink, type NavbarCollapse, type NavbarAlign, type NavbarArrangements } from "./core/navbar";
+</script>
+
+<script lang="ts">
+  import type { NavbarContract } from "./core/contracts/navbar";
+  import { onDestroy, untrack, type Snippet } from "svelte";
+  import { navigationDisclosure } from "./navigation";
+  import Button from "./Button.svelte";
+  import Icon from "./Icon.svelte";
+  import Link from "./Link.svelte";
+  import { navbar } from "./navbar.variants";
+  import { quietControl } from "./quiet-control.variants";
+
+  interface Props extends NavbarContract {
+    /** Called with the next open state (ADR 0026's open dialect). */
+    onopenchange?: (open: boolean) => void;
+    /** Leading identity slot, rendered in both arrangements: typically a Logo or product name. */
+    brand?: Snippet;
+    /**
+     * Trailing slot for controls such as a search field or account menu, rendered in the rail and
+     * in the compact panel.
+     */
+    actions?: Snippet;
+    /** Extra classes, merged over the root slot's own. */
+    class?: string;
+  }
+
+  let {
+    links = [],
+    collapse = "responsive",
+    align = "start",
+    open = $bindable(false),
+    onopenchange,
+    label = "Main",
+    menuLabel = "Menu",
+    brand,
+    actions,
+    class: className,
+  }: Props = $props();
+
+  const uid = $props.id();
+  const panelId = `${uid}-menu`;
+  let root: HTMLElement | undefined = $state();
+  const styles = $derived(navbar({ collapse, align, open }));
+  const shown = $derived(arrangements(collapse));
+
+  const disclosure = navigationDisclosure(() => setOpen(false));
+  onDestroy(() => disclosure?.destroy());
+  $effect(() => { if (open) untrack(() => disclosure?.open()); });
+
+  function currentValue(link: NavbarLink): NavbarLink["current"] | undefined {
+    if (link.current === true || link.active) return "page";
+    return link.current || undefined;
+  }
+
+  function setOpen(next: boolean): void {
+    if (open === next) return;
+    open = next;
+    onopenchange?.(next);
+  }
+
+  function dismiss(): void {
+    if (!open) return;
+    setOpen(false);
+    root?.querySelector<HTMLButtonElement>("[data-navbar-toggle]")?.focus();
+  }
+
+  $effect(() => {
+    const element = root;
+    if (!open || element === undefined) return;
+    const onkeydown = (event: KeyboardEvent): void => {
+      if (event.key === "Escape") dismiss();
+    };
+    element.addEventListener("keydown", onkeydown);
+    return () => element.removeEventListener("keydown", onkeydown);
+  });
+</script>
+
+<nav
+  bind:this={root}
+  aria-label={label}
+  data-navbar
+  data-navbar-align={align}
+  data-navbar-collapse={collapse}
+  class={styles.root({ class: className })}
+>
+  {#if shown.rail}
+    <div data-navbar-arrangement="rail" class={styles.rail()}>
+      <div data-navbar-region="brand" class={styles.brand()}>{@render brand?.()}</div>
+      {#if links.length > 0}
+        <ul data-navbar-region="links" class={styles.links()}>
+          {#each links as link (link.id)}
+            <li class={styles.item()}>
+              {#if link.disabled && link.href !== undefined}
+                <a aria-disabled="true" data-navbar-link={link.id} class={quietControl({ class: styles.link() })}>{link.label}</a>
+              {:else if link.href !== undefined}
+                <Link
+                  href={link.href}
+                  aria-current={currentValue(link)}
+                  data-navbar-link={link.id}
+                  class={quietControl({ class: styles.link() })}
+                  onclick={link.onselect}
+                >{link.label}</Link>
+              {:else}
+                <Button
+                  variant="ghost"
+                  disabled={link.disabled}
+                  aria-current={currentValue(link)}
+                  data-navbar-link={link.id}
+                  class={styles.link()}
+                  onclick={link.onselect}
+                >{link.label}</Button>
+              {/if}
+            </li>
+          {/each}
+        </ul>
+      {/if}
+      <div data-navbar-region="actions" class={styles.actions()}>{@render actions?.()}</div>
+    </div>
+  {/if}
+
+  {#if shown.compact}
+    <div data-navbar-arrangement="compact" class={styles.compact()}>
+      <div data-navbar-region="brand" class={styles.brand()}>{@render brand?.()}</div>
+      <Button
+        variant="ghost"
+        class={styles.toggle()}
+        data-navbar-toggle
+        aria-label={menuLabel}
+        aria-expanded={open}
+        aria-controls={panelId}
+        onclick={() => setOpen(!open)}
+      ><Icon icon="menu" size="sm" aria-hidden="true" />{menuLabel}</Button>
+    </div>
+    <div id={panelId} data-navbar-panel hidden={!open} class={styles.panel()}>
+      {#if links.length > 0}
+        <ul data-navbar-region="links" class={styles.panelLinks()}>
+          {#each links as link (link.id)}
+            <li>
+              {#if link.disabled && link.href !== undefined}
+                <a aria-disabled="true" data-navbar-link={link.id} class={quietControl({ class: styles.panelLink() })}>{link.label}</a>
+              {:else if link.href !== undefined}
+                <Link
+                  href={link.href}
+                  aria-current={currentValue(link)}
+                  data-navbar-link={link.id}
+                  class={quietControl({ class: styles.panelLink() })}
+                  onclick={() => {
+                    link.onselect?.();
+                    setOpen(false);
+                  }}
+                >{link.label}</Link>
+              {:else}
+                <Button
+                  variant="ghost"
+                  disabled={link.disabled}
+                  aria-current={currentValue(link)}
+                  data-navbar-link={link.id}
+                  class={styles.panelLink()}
+                  onclick={() => {
+                    link.onselect?.();
+                    setOpen(false);
+                  }}
+                >{link.label}</Button>
+              {/if}
+            </li>
+          {/each}
+        </ul>
+      {/if}
+      <div data-navbar-region="actions" class={styles.actions()}>{@render actions?.()}</div>
+    </div>
+  {/if}
+</nav>

package/vendor/ds/kits/base/src/NavigationMenu.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+  import type { NavigationMenuContract } from "./core/contracts/navigationmenu";
+  import { NavigationMenu as Bits } from "bits-ui";
+  import Button from "./Button.svelte";
+  import {
+    isNavigationMenuSection,
+    type NavigationMenuEntry,
+    type NavigationMenuLink,
+  } from "./navigation-menu.behavior";
+  import {
+    navigationMenu,
+    type NavigationMenuOrientation,
+    type NavigationMenuSize,
+  } from "./navigation-menu.variants";
+  import { popover as popoverAppearance } from "./popover.variants";
+  import { quietControl } from "./quiet-control.variants";
+
+  interface Props extends NavigationMenuContract {
+    /** Called with the open item's id ("" when none) after it changes (ADR 0026's value dialect). */
+    onvaluechange?: (value: string) => void;
+    /** Extra classes, merged onto each section's anchored surface, not the landmark. */
+    class?: string;
+  }
+
+  let {
+    label,
+    items = [],
+    value = $bindable(""),
+    onvaluechange,
+    orientation = "horizontal",
+    size = "md",
+    delayDuration = 200,
+    skipDelayDuration = 300,
+    class: className,
+  }: Props = $props();
+
+  const slots = $derived(navigationMenu({ orientation, size }));
+
+  function choose(link: NavigationMenuLink): void {
+    link.onselect?.();
+  }
+</script>
+
+<Bits.Root bind:value onValueChange={onvaluechange} {orientation} {delayDuration} {skipDelayDuration}>
+  {#snippet child({ props: rootProps })}
+    <nav
+      {...rootProps}
+      aria-label={label}
+      data-navigation-menu-root
+      class={slots.root()}
+    >
+      <Bits.List class={slots.list()}>
+        {#each items as item (item.id)}
+          <Bits.Item value={item.id} openOnHover={false}>
+            {#if isNavigationMenuSection(item)}
+              <Bits.Trigger>
+                {#snippet child({ props })}
+                  <Button
+                    {...props}
+                    data-navigation-menu-control
+                    data-navigation-menu-trigger
+                    variant="ghost"
+                    {size}
+                    class={slots.control()}
+                  >{item.label}</Button>
+                {/snippet}
+              </Bits.Trigger>
+              <Bits.Content
+                data-navigation-menu-surface
+                aria-label={item.label}
+                class={popoverAppearance({ class: slots.content({ class: className }) })}
+              >
+                <ul class={slots.links()}>
+                  {#each item.links as link (link.id)}
+                    <li>
+                      <Bits.Link active={link.active} onSelect={() => choose(link)}>
+                        {#snippet child({ props })}
+                          <a {...props} href={link.href} class={quietControl({ ink: "foreground", class: slots.link() })}>
+                            <span>{link.label}</span>
+                            {#if link.description !== undefined}
+                              <span class={slots.description()}>{link.description}</span>
+                            {/if}
+                          </a>
+                        {/snippet}
+                      </Bits.Link>
+                    </li>
+                  {/each}
+                </ul>
+              </Bits.Content>
+              {#if value !== item.id}
+                <!-- Bits UI mounts a section's surface only while it is open, so a closed
+                     section's destinations would exist only after a click. They stay in the
+                     served document as a `hidden` list: crawlers and no-script readers find every
+                     link, while `hidden` keeps them out of the tab order and the accessibility
+                     tree until the real surface takes over on open. -->
+                <ul hidden data-navigation-menu-closed-links={item.id}>
+                  {#each item.links as link (link.id)}
+                    <li>
+                      <a href={link.href} aria-current={link.active ? "page" : undefined}>
+                        {link.label}{#if link.description !== undefined}<span> — {link.description}</span>{/if}
+                      </a>
+                    </li>
+                  {/each}
+                </ul>
+              {/if}
+            {:else}
+              <Bits.Link active={item.active} onSelect={() => choose(item)}>
+                {#snippet child({ props })}
+                  <a
+                    {...props}
+                    href={item.href}
+                    data-navigation-menu-control
+                    aria-current={item.active ? "page" : undefined}
+                    class={quietControl({ ink: "foreground", class: slots.control() })}
+                  >{item.label}</a>
+                {/snippet}
+              </Bits.Link>
+            {/if}
+          </Bits.Item>
+        {/each}
+      </Bits.List>
+    </nav>
+  {/snippet}
+</Bits.Root>

package/vendor/ds/kits/base/src/NavigationScope.svelte

@@ -0,0 +1,57 @@
+<!--
+  NavigationScope — the injectable navigation seam (issue 483).
+
+  Every in-app link inside it, whichever component rendered it, is activated
+  through `navigate` instead of being followed by the browser. It renders no
+  box of its own (`display: contents`), so it never changes layout. Without a
+  scope, links stay native anchors.
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { ownsSameOrigin, routableAnchor, setNavigation } from "./navigation";
+
+  import type { NavigationSeam } from "./core/navigation";
+
+  interface Props extends NavigationSeam {
+    /**
+     * Content whose in-app links the scope routes through `navigate`; the scope adds no box of
+     * its own.
+     */
+    children?: Snippet;
+  }
+
+  const { navigate, resolve, owns, children }: Props = $props();
+  let scope = $state<HTMLElement>();
+  // Interception needs the client: until hydration the browser follows links
+  // natively. The attribute says when the seam is live (tests, diagnostics).
+  let active = $state(false);
+  $effect(() => {
+    active = true;
+  });
+
+  setNavigation({
+    navigate: (href, event) => navigate(href, event),
+    resolve: (to) => (resolve ? resolve(to) : to),
+    owns: (href, anchor) => (owns ?? ownsSameOrigin)(href, anchor),
+  });
+
+  function activate(event: MouseEvent): void {
+    if (!scope) return;
+    const anchor = routableAnchor(event, scope, owns ?? ownsSameOrigin);
+    if (!anchor) return;
+    event.preventDefault();
+    navigate(anchor.getAttribute("href")!, event);
+  }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+<!-- Delegation only: the anchors keep their own keyboard activation, which the browser reports as this same click. -->
+<div
+  bind:this={scope}
+  data-navigation-scope
+  data-navigation-active={active ? "" : undefined}
+  class="contents"
+  onclick={activate}
+>
+  {@render children?.()}
+</div>

package/vendor/ds/kits/base/src/Notification.svelte

@@ -0,0 +1,74 @@
+<!--
+  Notification — transient feedback composed from the canonical Alert and
+  Button contracts. The consumer owns placement and when to create it; this
+  component owns the announcement and an explicit keyboard dismissal path.
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import Alert from "./Alert.svelte";
+  import Button from "./Button.svelte";
+  import type { AlertFeedbackRole } from "./alert.variants";
+  import { warnDeprecated } from "./deprecation";
+  import { notification } from "./notification.variants";
+  import { feedbackTone } from "./core/feedback";
+  import type { Tone } from "./tone";
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class" | "title"> {
+    /** What the notification means, announced with Alert's canonical urgency. Defaults to `neutral`. */
+    tone?: Tone;
+    /** @deprecated Renamed `tone` (ADR 0026); removed next release. */
+    feedback?: AlertFeedbackRole;
+    /** Required announcement text. */
+    title: string;
+    /** Optional caller-owned detail. */
+    children?: Snippet;
+    /** Accessible and visible label for the dismissal control. */
+    dismissLabel?: string;
+    /** Called after the notification removes itself. */
+    ondismiss?: () => void;
+    /** Extra classes merged over the notification root. */
+    class?: string;
+  }
+
+  const {
+    tone,
+    feedback,
+    title,
+    children,
+    dismissLabel = "Dismiss",
+    ondismiss,
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  let visible = $state(true);
+  const slots = $derived(notification());
+  const resolvedTone = $derived<Tone>(feedbackTone(tone, feedback));
+
+  $effect(() => {
+    if (feedback !== undefined) warnDeprecated("Notification", `feedback="${feedback}"`, `tone="${feedback}"`);
+  });
+
+  function dismiss(): void {
+    visible = false;
+    ondismiss?.();
+  }
+</script>
+
+{#if visible}
+  <div
+    {...(rest as Record<string, unknown>)}
+    data-notification
+    class={slots.root({ class: className })}
+  >
+    <Alert tone={resolvedTone} {title} {children} class={slots.announcement()} />
+    <Button
+      variant="ghost"
+      size="sm"
+      class={slots.dismiss()}
+      aria-label={dismissLabel}
+      onclick={dismiss}
+    >{dismissLabel}</Button>
+  </div>
+{/if}

package/vendor/ds/kits/base/src/NumberField.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import Button from "./Button.svelte";
+  import Field from "./Field.svelte";
+  import Input from "./Input.svelte";
+  import type { InputSize } from "./input.variants";
+  import { numberField } from "./number-field.variants";
+  import { numberConstraints } from "./core/number-field";
+  import { afterFormReset, associatedForm } from "./core/native-controls";
+
+  interface Props extends Omit<HTMLInputAttributes, "type" | "value" | "min" | "max" | "step" | "class" | "children" | "size" | "defaultValue"> {
+    /** Visible label, also used to name both stepping actions. */
+    label: string;
+    /** Current number; null represents an empty field. Bindable. Values outside the constraints retain native validation errors. */
+    value?: number | null;
+    /** Initial uncontrolled value, restored by native form reset. */
+    defaultValue?: number | null;
+    /** Called once for each user edit or step, and after a native form reset. */
+    onvaluechange?: (value: number | null) => void;
+    /** Finite inclusive lower bound, if any. */
+    min?: number;
+    /** Finite inclusive upper bound, if any; must not be below min. */
+    max?: number;
+    /** Positive finite native step, based on min or the initial value. Defaults to 1. */
+    step?: number;
+    /** Supporting text associated with the native input. */
+    help?: string;
+    /** Application validation message associated with the native input. */
+    error?: string;
+    /** Shared control height for the input and both buttons. Defaults to md. */
+    controlSize?: InputSize;
+    /** Accessible decrement action name; defaults to Decrease followed by label. */
+    decrementLabel?: string;
+    /** Accessible increment action name; defaults to Increase followed by label. */
+    incrementLabel?: string;
+    /** Extra classes on the Field root. */
+    class?: string;
+  }
+
+  let {
+    label, value = $bindable(), defaultValue = null, onvaluechange, min, max, step = 1,
+    help, error, controlSize = "md", decrementLabel, incrementLabel,
+    id, required = false, disabled = false, readonly = false,
+    class: className, ...rest
+  }: Props = $props();
+  let input = $state<HTMLInputElement>();
+  const initialValue = untrack(() => value === undefined ? defaultValue : value);
+  let local = $state(initialValue);
+  const current = $derived(value === undefined ? local : value);
+  const constraints = $derived(numberConstraints(min, max, step));
+  const slots = numberField();
+  const atMinimum = $derived(current !== null && min !== undefined && current <= min);
+  const atMaximum = $derived(current !== null && max !== undefined && current >= max);
+
+  $effect(() => {
+    // Input preserves uncontrolled fields. Here null is an explicit controlled empty value.
+    if (input && current === null && input.value !== "") input.value = "";
+  });
+
+  function update(next: HTMLInputAttributes["value"]): void {
+    const normalized = typeof next === "number" && Number.isFinite(next) ? next : null;
+    local = normalized; value = normalized;
+    onvaluechange?.(normalized);
+  }
+
+  function move(direction: -1 | 1): void {
+    if (!input || input.disabled || input.matches(":disabled") || readonly) return;
+    const before = input.value;
+    // The platform owns step alignment and decimal arithmetic, just as with arrow keys.
+    if (direction === 1) input.stepUp(); else input.stepDown();
+    if (before === input.value) return;
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    input.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+
+  $effect(() => {
+    const element = input;
+    if (!element) return;
+    // Svelte removes SSR defaults during hydration. Restore the initial native
+    // step base after that cleanup, preserving decimal offsets and validity.
+    queueMicrotask(() => {
+      if (element?.isConnected) element.defaultValue = initialValue === null ? "" : String(initialValue);
+    });
+    return afterFormReset(associatedForm(element, rest.form), () => {
+      if (!element.isConnected) return;
+      element.value = initialValue === null ? "" : String(initialValue);
+      update(initialValue);
+    });
+  });
+</script>
+
+<Field {label} {help} {error} required={!!required} id={id ?? undefined} class={className}>
+  {#snippet children(control)}
+    <div data-number-field class={slots.root()}>
+      <Button size={controlSize} variant="secondary" class={slots.step()} aria-label={decrementLabel ?? `Decrease ${label}`}
+        disabled={disabled || readonly || atMinimum} onclick={() => move(-1)}>−</Button>
+      <Input {...rest} {...control} type="number" value={current} {...constraints} {disabled} {readonly} {controlSize}
+        bind:ref={input} onvaluechange={update} class={slots.input()}/>
+      <Button size={controlSize} variant="secondary" class={slots.step()} aria-label={incrementLabel ?? `Increase ${label}`}
+        disabled={disabled || readonly || atMaximum} onclick={() => move(1)}>+</Button>
+    </div>
+  {/snippet}
+</Field>