@reddb-io/ui-kit 0.3.3 → 0.3.5

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

@@ -0,0 +1,21 @@
+<!-- Native control naming; content and the target id remain caller-owned. -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLLabelAttributes } from "svelte/elements";
+  import { label } from "./label.variants";
+
+  interface Props extends Omit<HTMLLabelAttributes, "children" | "class"> {
+    /** The native label element for rare imperative access. */
+    ref?: HTMLLabelElement;
+    /** Extra classes merged onto the canonical label appearance. */
+    class?: string;
+    /** The label's content, usually the text naming the control it targets. */
+    children?: Snippet;
+  }
+
+  let { ref = $bindable(), class: className, children, ...rest }: Props = $props();
+</script>
+
+<label {...rest} bind:this={ref} class={label({ class: className })}>
+  {@render children?.()}
+</label>

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

@@ -0,0 +1,21 @@
+<!-- A native link whose underline keeps it distinguishable without colour. -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+  import { link } from "./link.variants";
+
+  interface Props extends Omit<HTMLAnchorAttributes, "children" | "class" | "href"> {
+    /** Destination of the link. Required: the element is always a native anchor. */
+    href: string;
+    /** Extra classes merged onto the canonical link appearance. */
+    class?: string;
+    /** The link text or content. */
+    children?: Snippet;
+  }
+
+  const { href, class: className, children, ...rest }: Props = $props();
+</script>
+
+<a {...rest} {href} data-link class={link({ class: className })}>
+  {@render children?.()}
+</a>

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

@@ -0,0 +1,95 @@
+<!-- A native link with a collision-aware, non-focusable preview surface. -->
+<script lang="ts">
+  import { portalAppearance } from "./portal-appearance.svelte";
+  import type { LinkPreviewContract } from "./core/contracts/linkpreview";
+  import type { Snippet } from "svelte";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+  import { LinkPreview as Bits } from "bits-ui";
+  import { link } from "./link.variants";
+  import { linkPreview as linkPreviewAppearance } from "./link-preview.variants";
+
+  interface Props
+    extends LinkPreviewContract, Omit<
+      HTMLAnchorAttributes,
+      "aria-controls" | "aria-expanded" | "aria-haspopup" | "children" | "class" | "href" | "role"
+    > {
+    /** Called with the next open state (ADR 0026's open dialect). */
+    onopenchange?: (open: boolean) => void;
+    /** Optional custom link content. */
+    trigger?: Snippet;
+    /** Caller-owned preview content. */
+    children?: Snippet;
+    /** Extra classes merged onto the preview surface. */
+    class?: string;
+  }
+
+  let {
+    href,
+    label,
+    previewLabel,
+    open = $bindable(false),
+    onopenchange,
+    openDelay = 700,
+    closeDelay = 300,
+    side = "top",
+    align = "center",
+    sideOffset = 8,
+    collisionPadding = 8,
+    trigger,
+    children,
+    class: className,
+    triggerClass,
+    ...rest
+  }: Props = $props();
+
+  const uid = $props.id();
+  const contentId = `${uid}-content`;
+  const portal = portalAppearance(() => open);
+</script>
+
+<Bits.Root bind:open onOpenChange={onopenchange} {openDelay} {closeDelay}>
+  <Bits.Trigger>
+    {#snippet child({ props })}
+      <!-- svelte-ignore a11y_no_redundant_roles (Bits assigns role=button; the override preserves native link semantics.) -->
+      <a
+        {...portal.anchor}
+        {...(rest as Record<string, unknown>)}
+        {...props}
+        {href}
+        data-link-preview-trigger
+        role="link"
+        class={link({ class: triggerClass })}
+      >
+        {#if trigger}{@render trigger()}{:else}{label}{/if}
+      </a>
+    {/snippet}
+  </Bits.Trigger>
+
+  <Bits.Portal to={portal.container}>
+    <Bits.Content
+      id={contentId}
+      {side}
+      {align}
+      {sideOffset}
+      avoidCollisions={true}
+      {collisionPadding}
+    >
+      {#snippet child({ props, wrapperProps })}
+        <div {...wrapperProps} {...portal.attributes}>
+          <div
+            {...props}
+            id={contentId}
+            data-link-preview-surface
+            data-avoid-collisions="true"
+            data-collision-padding={collisionPadding}
+            role="dialog"
+            aria-label={previewLabel}
+            class={linkPreviewAppearance({ class: className })}
+          >
+            {@render children?.()}
+          </div>
+        </div>
+      {/snippet}
+    </Bits.Content>
+  </Bits.Portal>
+</Bits.Root>

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { list, type ListGap } from "./list.variants";
+
+  interface Props extends Omit<HTMLAttributes<HTMLUListElement>, "class"> {
+    /** Render an ordered list instead of the default unordered list. */
+    ordered?: boolean;
+    /** Density-owned space between items. */
+    gap?: ListGap;
+    /** Extra classes merged onto the semantic collection. */
+    class?: string;
+    /** The list items, usually `li` elements. */
+    children?: Snippet;
+  }
+
+  let { ordered = false, gap = "md", class: className, children, ...rest }: Props = $props();
+</script>
+
+{#if ordered}
+  <ol {...(rest as Record<string, unknown>)} data-list class={list({ gap, class: className })}>
+    {@render children?.()}
+  </ol>
+{:else}
+  <ul {...(rest as Record<string, unknown>)} data-list class={list({ gap, class: className })}>
+    {@render children?.()}
+  </ul>
+{/if}

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

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import Card from "./Card.svelte";
+  import type { CardPadding, CardVariant } from "./card.variants";
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class" | "title"> {
+    /** Edge treatment of the underlying Card: `outline` (the default) or `plain`. */
+    variant?: CardVariant;
+    /** Density-owned inset applied to every Card section. Defaults to `md`. */
+    padding?: CardPadding;
+    /** Header title, rendered when no `header` snippet is given. */
+    title?: string;
+    /** Supporting line under the title. */
+    description?: string;
+    /** Full control over the header. Replaces `title` and `description`. */
+    header?: Snippet;
+    /** Caller-owned actions or content rendered after the list. */
+    footer?: Snippet;
+    /** Extra classes merged onto the underlying Card surface. */
+    class?: string;
+    /** The list itself, rendered in the Card body. */
+    children?: Snippet;
+  }
+
+  let {
+    variant = "outline",
+    padding = "md",
+    title,
+    description,
+    header,
+    footer,
+    class: className,
+    children,
+    ...rest
+  }: Props = $props();
+</script>
+
+<Card
+  {...rest}
+  data-list-container
+  {variant}
+  {padding}
+  {title}
+  {description}
+  {header}
+  {footer}
+  class={className}
+>
+  {@render children?.()}
+</Card>

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

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import {
+    loadingIndicator,
+    type LoadingIndicatorSize,
+  } from "./loading-indicator.variants";
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class"> {
+    /** What is being waited for. */
+    label?: string;
+    /** Spinner and label size: `sm`, `md` (the default) or `lg`. */
+    size?: LoadingIndicatorSize;
+    /** Keep the announcement while visually hiding its sentence. */
+    labelHidden?: boolean;
+    /** Extra classes merged onto the indicator root. */
+    class?: string;
+  }
+
+  const {
+    label = "Loading…",
+    size = "md",
+    labelHidden = false,
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  const slots = $derived(loadingIndicator({ size, labelHidden }));
+</script>
+
+<div
+  {...(rest as Record<string, unknown>)}
+  data-loading-indicator
+  class={slots.root({ class: className })}
+  role="status"
+  aria-live="polite"
+  aria-busy="true"
+>
+  <svg class={slots.spinner()} viewBox="0 0 24 24" aria-hidden="true">
+    <circle class={slots.track()} cx="12" cy="12" r="9" stroke-width="3" />
+    <path
+      class={slots.head()}
+      d="M21 12a9 9 0 0 0-9-9"
+      stroke-width="3"
+      stroke-linecap="round"
+    />
+  </svg>
+  <span class={slots.label()}>{label}</span>
+</div>

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

@@ -0,0 +1,183 @@
+<!--
+  Logo — the Base Kit's first component, and a Primitive: it imports no other
+  Kit component.
+
+  The Brand owns the Mark; the DS owns the Logo that places it (ADR 0004). So
+  this component does exactly four things, and refuses rather than improvising
+  at each of them:
+
+    * it SELECTS a Mark, by layout and by the surface behind it — `on` names
+      the local background, not the global Theme, and defaults from the active
+      Theme when the caller does not say (logo.surface.ts);
+    * it REFUSES, loudly and by name, when the pinned Assets release ships no
+      such Mark (today: the icon on dark). It never falls back to the other
+      surface's drawing and never recolors one — both are licence violations,
+      so neither has a code path (logo.marks.ts);
+    * it holds the CLEARSPACE — 25% of the symbol's height — inside its own
+      box, so a caller laying the Logo out cannot place anything in it, and
+      cannot ask for the Mark without it. Below the minimum size is an error,
+      not a smaller Logo (logo.box.ts);
+    * given an `href` it becomes the accessible home link: a real <a>, an
+      aria-label saying where it goes, and a focus ring on the box — which
+      already includes the clearspace, so the ring falls outside it.
+
+  When `on` is omitted, one small observer follows root Color Scheme changes so
+  a persistent Logo swaps Mark as the document changes contrast.
+-->
+<script lang="ts">
+  import type { HTMLAnchorAttributes, HTMLAttributes } from "svelte/elements";
+  import { DEFAULT_SYMBOL_PX, logoBox, px } from "./logo.box";
+  import { selectMark, type LogoLayout, type LogoSurface } from "./logo.marks";
+  import { activeSurface, observeActiveSurface } from "./logo.surface";
+  import { logo, logoMark } from "./logo.variants";
+
+  interface Common {
+    /** How the Mark is laid out. Defaults to `horizontal`. */
+    layout?: LogoLayout;
+    /**
+     * The surface behind the Mark — the LOCAL background, not the Theme. A
+     * dark hero on a light marketing page is `on="dark"`. Defaults from the
+     * active Color Scheme.
+     */
+    on?: LogoSurface;
+    /**
+     * The symbol's height in CSS pixels — the red glyph, which is the same
+     * drawing in every layout, so one number means the same thing across
+     * layouts. The rendered box is larger by the clearspace on every side.
+     */
+    size?: number;
+    /**
+     * When the browser should fetch the Mark. `eager` by default, because the
+     * Logo's commonest home is a masthead above the fold, where lazy would
+     * defer the one image the page is identified by. A footer Logo is the case
+     * for `lazy` — and it is the caller's to make, because the component
+     * cannot see where it was placed.
+     */
+    loading?: "eager" | "lazy";
+    /**
+     * How the Mark's fetch is prioritised against the rest of the page. Left
+     * to the browser by default; `high` is for the masthead Logo that should
+     * not queue behind content below it.
+     */
+    fetchpriority?: "high" | "low" | "auto";
+    /** Extra classes, merged over the component's own. */
+    class?: string;
+  }
+
+  /** Without an `href`: the pure Mark — a footer, a chatbot avatar. */
+  interface MarkMode extends Common, Omit<HTMLAttributes<HTMLSpanElement>, "class"> {
+    href?: never;
+    label?: never;
+  }
+
+  /** With an `href`: the accessible home link, as a navbar wears it. */
+  interface LinkMode extends Common, Omit<HTMLAnchorAttributes, "class"> {
+    /** Where it goes. Its presence is what makes this an <a>. */
+    href: string;
+    /**
+     * What the link says it does, for anyone who cannot see the Mark. A
+     * drawing has no text to fall back on, so the label is not optional — it
+     * only has a default.
+     */
+    label?: string;
+  }
+
+  type Props = MarkMode | LinkMode;
+
+  const {
+    layout = "horizontal",
+    on,
+    size = DEFAULT_SYMBOL_PX,
+    loading = "eager",
+    fetchpriority,
+    href,
+    label = "reddb.io home",
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  // Both of these throw on a Logo that cannot be placed honestly: a Mark the
+  // release does not ship, and a size below the minimum. Deliberately at
+  // render, and deliberately not caught — a Logo missing from a page is a bug
+  // somebody files, and a wrong one is not.
+  let observedSurface = $state(activeSurface());
+  let markImageElement: HTMLImageElement | undefined = $state();
+  $effect(() => {
+    if (on !== undefined) return;
+    return observeActiveSurface((next) => {
+      observedSurface = next;
+    });
+  });
+
+  const surface = $derived(on ?? observedSurface);
+  const mark = $derived(selectMark(layout, surface));
+  const box = $derived(logoBox(mark, size));
+
+  // An SSR render has no document and therefore begins on the light technical
+  // fallback. Keep the opaque image URL synchronized explicitly when hydration
+  // discovers that the real document is dark; metadata changing without the
+  // decoded image changing would display the wrong licensed Mark.
+  $effect(() => {
+    if (markImageElement && markImageElement.src !== mark.src) {
+      markImageElement.src = mark.src;
+    }
+  });
+
+  const tag = $derived(href !== undefined ? "a" : "span");
+</script>
+
+<!--
+  `rest` is spread as a plain record for the reason Button's is: its type is
+  the remainder of a two-armed union of platform props, and re-deriving that
+  against what <span> and <a> each accept is a computation TypeScript gives up
+  on. Callers are still typed where they write, at `Props`.
+
+  The clearspace is padding on this box, so the Mark's own size and the box's
+  size stay separately true: the <img> is the drawing, the padding is the space
+  the licence keeps around it, and there is no prop that removes it.
+-->
+<svelte:element
+  this={tag}
+  {...rest as Record<string, unknown>}
+  {href}
+  class={logo({ interactive: href !== undefined, class: className })}
+  style="padding:{px(box.clearspace)}"
+  aria-label={href !== undefined ? label : undefined}
+  data-logo-layout={layout}
+  data-logo-on={surface}
+  data-logo-mark={mark.file}
+>
+  <!--
+    In link mode the <a> already says where it goes, so the Mark is decorative
+    and an alt would say the same thing twice. On its own the Mark IS the
+    content, and carries the Brand's name.
+
+    The fetch hints below are named props rather than part of `rest`, and that
+    is the whole reason they exist here: `rest` is spread on the BOX, so an
+    image attribute travelling in it would land on a <span> or an <a>, which
+    have no use for one — dropped without a word, leaving the caller believing
+    it took. `decoding` is fixed instead of a prop because no Logo's
+    correctness depends on the decode landing in the same frame as the markup
+    around it, which is all `sync` buys; `loading` and `fetchpriority` are the
+    caller's, because their right answer is the one fact this component cannot
+    know — where on the page it was placed.
+  -->
+  {#key mark.file}
+    <!-- The key replaces the opaque image node when the active surface changes.
+         The Brand bytes stay untouched; the browser receives the newly selected
+         asset rather than retaining the previously decoded data URL. -->
+    <img
+      bind:this={markImageElement}
+      src={mark.src}
+      alt={href !== undefined ? "" : "RedDB"}
+      width={Math.round(box.markWidth)}
+      height={Math.round(box.markHeight)}
+      style="width:{px(box.markWidth)};height:{px(box.markHeight)}"
+      class={logoMark()}
+      {loading}
+      {fetchpriority}
+      decoding="async"
+      aria-hidden={href !== undefined ? "true" : undefined}
+    />
+  {/key}
+</svelte:element>

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

@@ -0,0 +1,46 @@
+<!-- A generic media/content relationship with no page or business vocabulary. -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import {
+    mediaObject,
+    type MediaObjectAlign,
+    type MediaObjectGap,
+  } from "./media-object.variants";
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "class"> {
+    /** Caller-owned leading media, commonly an Avatar or image. */
+    media: Snippet;
+    /** Caller-owned heading, metadata, actions, and body. */
+    children: Snippet;
+    /** Cross-axis alignment of media and content. */
+    align?: MediaObjectAlign;
+    /** Density-owned separation between media and content. */
+    gap?: MediaObjectGap;
+    /** Extra classes merged onto the relationship root. */
+    class?: string;
+    /** Extra classes merged onto the wrapper around the `media` snippet, over its own. */
+    mediaClass?: string;
+    /** Extra classes merged onto the wrapper around `children`, over its own. */
+    contentClass?: string;
+  }
+
+  const {
+    media,
+    children,
+    align = "start",
+    gap = "md",
+    class: className,
+    mediaClass,
+    contentClass,
+    ...rest
+  }: Props = $props();
+  const styles = $derived(mediaObject({ align, gap }));
+</script>
+
+<div {...rest} data-media-object class={styles.root({ class: className })}>
+  <div data-media-object-media class={styles.media({ class: mediaClass })}>{@render media()}</div>
+  <div data-media-object-content class={styles.content({ class: contentClass })}>
+    {@render children()}
+  </div>
+</div>

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

@@ -0,0 +1,130 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { warnDeprecated } from "./deprecation";
+  import {
+    meter,
+    type DeprecatedMeterTone,
+    type MeterTone,
+  } from "./meter.variants";
+  import { formatPercent, normalizeRange } from "./progress.behavior";
+
+  import { segmentGeometry } from "./core/segments";
+  import { segments as segmentStyles } from "./segments.variants";
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class"> {
+    /**
+     * The measured reading, clamped into `min` through `max`; becomes `aria-valuenow` and drives
+     * the fill width.
+     */
+    value: number;
+    /** Lower bound of the scale, exposed as `aria-valuemin`; defaults to `0`. */
+    min?: number;
+    /**
+     * Upper bound of the scale, exposed as `aria-valuemax`; defaults to `100`. A `max` not above
+     * `min` is widened to one unit.
+     */
+    max?: number;
+    /** Accessible name of the meter, also shown beside the reading; defaults to `Meter`. */
+    label?: string;
+    /**
+     * Formats the clamped value for the visible reading and `aria-valuetext`; defaults to a
+     * rounded percentage.
+     */
+    formatValue?: (value: number) => string;
+    /**
+     * What the fill means: the shared tone vocabulary (ADR 0026), ink when
+     * `neutral` (the default). `primary` is deprecated for one release.
+     */
+    tone?: MeterTone | DeprecatedMeterTone;
+    /** Arrange the track beside the reading (`inline`) or below its summary (`stacked`, the default). */
+    layout?: "stacked" | "inline";
+    /** Hide the visible label when a table column or surrounding heading supplies it. The meter retains its accessible name. */
+    labelHidden?: boolean;
+    /** Decorative divisions, bounded to 128; omitted, uses the continuous track. The exact value remains accessible. */
+    segments?: number;
+    /** Maximum segments per row; omitted, keeps one row. */
+    segmentColumns?: number;
+    /** Extra classes, merged over the root slot's own. */
+    class?: string;
+  }
+
+  const {
+    value,
+    min = 0,
+    max = 100,
+    label = "Meter",
+    formatValue,
+    tone = "neutral",
+    layout = "stacked",
+    labelHidden = false,
+    segments,
+    segmentColumns,
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  const range = $derived(normalizeRange(value, min, max));
+  const valueText = $derived(
+    formatValue?.(range.value) ?? formatPercent(range),
+  );
+  const slots = $derived(meter({ tone, layout, labelHidden }));
+
+  $effect(() => {
+    if (tone === "primary") {
+      warnDeprecated(
+        "Meter",
+        'tone="primary"',
+        'tone="neutral" (ink) or the Feedback Role the reading means',
+      );
+    }
+  });
+  const discrete = $derived(
+    segments === undefined
+      ? undefined
+      : segmentGeometry(segments, range.percent, segmentColumns),
+  );
+  const discreteSlots = segmentStyles();
+</script>
+
+<div
+  {...rest as Record<string, unknown>}
+  data-meter
+  data-tone={tone}
+  class={slots.root({ class: className })}
+  role="meter"
+  aria-label={label}
+  aria-valuemin={range.min}
+  aria-valuemax={range.max}
+  aria-valuenow={range.value}
+  aria-valuetext={valueText}
+>
+  <div data-meter-summary class={slots.summary()} aria-hidden="true">
+    <span class={slots.label()}>{label}</span>
+    <span class={slots.value()}>{valueText}</span>
+  </div>
+  {#if discrete}
+    <div
+      data-meter-track
+      data-segmented
+      data-aggregated={discrete.aggregated || undefined}
+      class={discreteSlots.track()}
+      style:grid-template-columns={`repeat(${discrete.columns}, minmax(0, 1fr))`}
+      aria-hidden="true"
+    >
+      {#each discrete.fills as fill, i (i)}<div class={discreteSlots.cell()}>
+          <div
+            data-segment-fill
+            class={slots.indicator({ class: discreteSlots.fill() })}
+            style:width={`${fill}%`}
+          ></div>
+        </div>{/each}
+    </div>
+  {:else}
+    <div data-meter-track class={slots.track()} aria-hidden="true">
+      <div
+        data-meter-indicator
+        class={slots.indicator()}
+        style:width={`${range.percent}%`}
+      ></div>
+    </div>
+  {/if}
+</div>