@reddb-io/ui-kit 0.3.3 → 0.3.5

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

@@ -0,0 +1,85 @@
+<!-- One expandable region, composed from Bits UI Collapsible and the canonical Button. -->
+<script lang="ts">
+  import type { DisclosureContract } from "./core/contracts/disclosure";
+  import type { Snippet } from "svelte";
+  import { Collapsible as Bits } from "bits-ui";
+  import Button from "./Button.svelte";
+  import { warnDeprecated } from "./deprecation";
+  import { sanitizeCollapsibleStyle } from "./collapsible.style";
+  import { disclosure } from "./disclosure.variants";
+
+  interface Props extends DisclosureContract {
+    /** Called with the next open state (ADR 0026's open dialect). */
+    onopenchange?: (open: boolean) => void;
+    /** @deprecated Renamed `onopenchange` (ADR 0026); removed next release. */
+    onchange?: (open: boolean) => void;
+    /** Content of the expandable region, rendered only while it is open. */
+    children?: Snippet;
+    /** Extra classes merged onto the disclosure root. */
+    class?: string;
+  }
+
+  let {
+    label,
+    open = $bindable(false),
+    disabled = false,
+    onopenchange,
+    onchange,
+    children,
+    class: className,
+    triggerClass,
+    contentClass,
+  }: Props = $props();
+
+  const uid = $props.id();
+  const triggerId = `${uid}-trigger`;
+  const styles = disclosure();
+
+  function update(next: boolean): void {
+    open = next;
+    onopenchange?.(next);
+    onchange?.(next);
+  }
+
+  $effect(() => {
+    if (onchange) warnDeprecated("Disclosure", "onchange", "onopenchange");
+  });
+</script>
+
+<Bits.Root
+  {open}
+  onOpenChange={update}
+  {disabled}
+  data-disclosure
+  class={styles.root({ class: className })}
+>
+  <Bits.Trigger>
+    {#snippet child({ props })}
+      <Button
+        {...props}
+        id={triggerId}
+        variant="secondary"
+        size="sm"
+        class={styles.trigger({ class: triggerClass })}
+      >
+        {label}
+        <span aria-hidden="true" class={styles.indicator()}>⌄</span>
+      </Button>
+    {/snippet}
+  </Bits.Trigger>
+  <Bits.Content forceMount={true}>
+    {#snippet child({ props, open: contentOpen })}
+      {#if contentOpen}
+        <div
+          {...props}
+          style={sanitizeCollapsibleStyle(props.style)}
+          role="region"
+          aria-labelledby={triggerId}
+          class={styles.content({ class: contentClass })}
+        >
+          {@render children?.()}
+        </div>
+      {/if}
+    {/snippet}
+  </Bits.Content>
+</Bits.Root>

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

@@ -0,0 +1,22 @@
+<!-- A perceivable separator whose direction is semantic as well as visual. -->
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { divider, type DividerOrientation } from "./divider.variants";
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class" | "role"> {
+    /** Direction of both the separator semantics and its painted rule. */
+    orientation?: DividerOrientation;
+    /** Extra classes merged onto the canonical rule. */
+    class?: string;
+  }
+
+  const { orientation = "horizontal", class: className, ...rest }: Props = $props();
+</script>
+
+<div
+  {...(rest as Record<string, unknown>)}
+  data-divider
+  role="separator"
+  aria-orientation={orientation}
+  class={divider({ orientation, class: className })}
+></div>

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

@@ -0,0 +1,17 @@
+<!-- An edge overlay that inherits the canonical Dialog lifecycle. -->
+<script lang="ts">
+  import type { ComponentProps } from "svelte";
+  import Dialog from "./Dialog.svelte";
+  import { drawer, type DrawerSide } from "./drawer.variants";
+
+  type Props = Omit<ComponentProps<typeof Dialog>, "class"> & {
+    /** Edge that owns the Drawer. Defaults to `right`. */
+    side?: DrawerSide;
+    /** Extra classes merged onto the edge surface. */
+    class?: string;
+  };
+
+  let { side = "right", open = $bindable(false), class: className, ...dialogProps }: Props = $props();
+</script>
+
+<Dialog {...dialogProps} bind:open data-drawer="" class={drawer({ side, class: className })} />

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

@@ -0,0 +1,192 @@
+<script lang="ts">
+  import { portalAppearance } from "./portal-appearance.svelte";
+  import type { Snippet } from "svelte";
+  import { DropdownMenu as Bits } from "bits-ui";
+  import Button from "./Button.svelte";
+  import Icon from "./Icon.svelte";
+  import Kbd from "./Kbd.svelte";
+  import type { ButtonVariant } from "./button.variants";
+  import {
+    dropdownMenuGroups,
+    dropdownMenuItems,
+    type DropdownMenuEntry,
+    type DropdownMenuItem,
+  } from "./dropdown-menu.behavior";
+  import { dropdownMenu, type DropdownMenuSize } from "./dropdown-menu.variants";
+  import { popover as popoverAppearance } from "./popover.variants";
+
+  type Side = "top" | "right" | "bottom" | "left";
+  type Align = "start" | "center" | "end";
+
+  interface Props {
+    /**
+     * Accessible name for the Button that opens the menu, and its visible text when no `trigger` is
+     * given.
+     */
+    triggerLabel: string;
+    /** Accessible name for the opened menu surface. */
+    contentLabel: string;
+    /**
+     * The menu entries, in order: single items, or groups with an optional heading. A separator
+     * divides groups.
+     */
+    items?: readonly DropdownMenuEntry[];
+    /** Whether the menu is open, bindable. Defaults to closed. */
+    open?: boolean;
+    /** Called with the next open state (ADR 0026's open dialect). */
+    onopenchange?: (open: boolean) => void;
+    /** Button emphasis for the trigger. Defaults to `secondary`. */
+    variant?: ButtonVariant;
+    /** Size step for the trigger Button and the menu rows: `sm`, `md` (the default) or `lg`. */
+    size?: DropdownMenuSize;
+    /**
+     * Preferred side of the trigger for the menu; collision handling may flip it. Defaults to
+     * `bottom`.
+     */
+    side?: Side;
+    /** Preferred alignment of the menu along the selected side. Defaults to `start`. */
+    align?: Align;
+    /** Distance in pixels between the trigger and the menu. Defaults to `8`. */
+    sideOffset?: number;
+    /** Safe distance in pixels kept between the menu and the viewport edges. Defaults to `8`. */
+    collisionPadding?: number;
+    /**
+     * Custom content inside the trigger Button, replacing the `triggerLabel` text; `triggerLabel`
+     * stays its accessible name, so words it shows must appear, in order, in `triggerLabel`,
+     * ideally first (WCAG 2.5.3, Label in Name).
+     */
+    trigger?: Snippet;
+    /** Extra classes merged onto the menu surface, not the trigger Button. */
+    class?: string;
+  }
+
+  let {
+    triggerLabel,
+    contentLabel,
+    items = [],
+    open = $bindable(false),
+    onopenchange,
+    variant = "secondary",
+    size = "md",
+    side = "bottom",
+    align = "start",
+    sideOffset = 8,
+    collisionPadding = 8,
+    trigger,
+    class: className,
+  }: Props = $props();
+
+  const uid = $props.id();
+  const contentId = `${uid}-menu`;
+  const groups = $derived(dropdownMenuGroups(items));
+  const hasIcons = $derived(dropdownMenuItems(items).some((item) => item.icon !== undefined));
+  const slots = $derived(dropdownMenu({ size }));
+
+  function choose(item: DropdownMenuItem): void {
+    item.onselect?.();
+  }
+  const portal = portalAppearance(() => open);
+</script>
+
+{#snippet row(item: DropdownMenuItem)}
+  {#if hasIcons}
+    <span data-menu-item-icon aria-hidden="true" class={slots.icon()}>
+      {#if item.icon !== undefined}<Icon icon={item.icon} {size} aria-hidden="true" />{/if}
+    </span>
+  {/if}
+  <span class={slots.label()}>{item.label}</span>
+  {#if item.shortcut !== undefined}
+    <span class={slots.shortcut()}><Kbd keys={item.shortcut} size="sm" /></span>
+  {/if}
+{/snippet}
+
+<Bits.Root bind:open onOpenChange={onopenchange}>
+  <Bits.Trigger>
+    {#snippet child({ props })}
+      <Button
+        {...props}
+        {...portal.anchor}
+        data-dropdown-menu-trigger
+        aria-label={triggerLabel}
+        {variant}
+        {size}
+      >
+        {#if trigger}{@render trigger()}{:else}{triggerLabel}{/if}
+      </Button>
+    {/snippet}
+  </Bits.Trigger>
+
+  <Bits.Portal to={portal.container}>
+    <Bits.Content
+      id={contentId}
+      {side}
+      {align}
+      {sideOffset}
+      avoidCollisions={true}
+      {collisionPadding}
+      loop={true}
+    >
+      {#snippet child({ props, wrapperProps })}
+        <div {...wrapperProps} {...portal.attributes}>
+          <div
+            {...props}
+            id={contentId}
+            data-dropdown-menu-surface
+            data-collision-padding={collisionPadding}
+            aria-label={contentLabel}
+            class={popoverAppearance({ class: slots.content({ class: className }) })}
+          >
+            {#each groups as group, index (index)}
+              {#if index > 0}
+                <Bits.Separator>
+                  {#snippet child({ props: separatorProps })}
+                    <div
+                      {...separatorProps}
+                      role="separator"
+                      aria-orientation="horizontal"
+                      class={slots.separator()}
+                      data-dropdown-menu-separator
+                    ></div>
+                  {/snippet}
+                </Bits.Separator>
+              {/if}
+              {@const headingId = `${contentId}-group-${index}`}
+              <Bits.Group
+                class={slots.group()}
+                aria-labelledby={group.heading === undefined ? undefined : headingId}
+              >
+                {#if group.heading !== undefined}
+                  <Bits.GroupHeading>
+                    {#snippet child({ props: headingProps })}
+                      <div
+                        {...headingProps}
+                        id={headingId}
+                        role="presentation"
+                        class={slots.heading()}
+                        data-dropdown-menu-group-heading
+                      >{group.heading}</div>
+                    {/snippet}
+                  </Bits.GroupHeading>
+                {/if}
+                {#each group.items as item (item.id)}
+                  <Bits.Item
+                    disabled={item.disabled}
+                    onSelect={() => choose(item)}
+                  >
+                    {#snippet child({ props: itemProps })}
+                      {#if item.href !== undefined}
+                        <a {...itemProps} href={item.href} class={slots.item()}>{@render row(item)}</a>
+                      {:else}
+                        <div {...itemProps} class={slots.item()}>{@render row(item)}</div>
+                      {/if}
+                    {/snippet}
+                  </Bits.Item>
+                {/each}
+              </Bits.Group>
+            {/each}
+          </div>
+        </div>
+      {/snippet}
+    </Bits.Content>
+  </Bits.Portal>
+</Bits.Root>

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

@@ -0,0 +1,54 @@
+<!--
+  EmptyState — the universal zero-data surface. Its sentence is required, but
+  its media, supporting content, and way out remain caller-owned. In
+  particular it does not choose which canonical control an application needs.
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { emptyState, type EmptyStateSize } from "./empty-state.variants";
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class" | "title"> {
+    /** What is empty, in a few words. */
+    title: string;
+    /** Why it is empty, or what would fill it. */
+    description?: string;
+    /** A literal command, path, or key that would fill it. */
+    hint?: string;
+    /** Defaults to `md`. */
+    size?: EmptyStateSize;
+    /** Draw the dashed outline around the region. Defaults to true. */
+    bordered?: boolean;
+    /** An icon or illustration, rendered decoratively above the title. */
+    media?: Snippet;
+    /** Caller-owned controls rendered after the explanation. */
+    actions?: Snippet;
+    /** Extra classes merged over the root slot. */
+    class?: string;
+  }
+
+  const {
+    title,
+    description,
+    hint,
+    size = "md",
+    bordered = true,
+    media,
+    actions,
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  const slots = $derived(emptyState({ size, bordered }));
+</script>
+
+<div {...(rest as Record<string, unknown>)} class={slots.root({ class: className })}>
+  {#if media}
+    <div class={slots.media()} aria-hidden="true">{@render media()}</div>
+  {/if}
+
+  <p class={slots.title()}>{title}</p>
+  {#if description}<p class={slots.description()}>{description}</p>{/if}
+  {#if hint}<code class={slots.hint()}>{hint}</code>{/if}
+  {#if actions}<div class={slots.actions()}>{@render actions()}</div>{/if}
+</div>

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

@@ -0,0 +1,21 @@
+<!-- The uppercase micro-label above a heading, in the Theme's eyebrow role (ADR 0025). -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { eyebrow, type EyebrowElement } from "./eyebrow.variants";
+
+  interface Props extends Omit<HTMLAttributes<HTMLElement>, "class"> {
+    /** The element rendered: `p` (default), `span` or `div` — never a heading. */
+    as?: EyebrowElement;
+    /** Extra classes merged onto the rendered element. */
+    class?: string;
+    /** The micro-label text, usually a short phrase naming the section that follows. */
+    children: Snippet;
+  }
+
+  const { as = "p", class: className, children, ...rest }: Props = $props();
+</script>
+
+<svelte:element this={as} {...rest} data-eyebrow data-type-role="eyebrow" class={eyebrow({ class: className })}
+  >{@render children()}</svelte:element
+>

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

@@ -0,0 +1,75 @@
+<!--
+  Field — the accessible contract around one form control.
+
+  Field owns the relationships: its label targets the control id, help and
+  error text describe it, an error marks it invalid, and required reaches both
+  the visible label and the native control. The child snippet receives that
+  complete contract, which keeps Input native and lets a consumer substitute a
+  local control without reconstructing accessibility ids.
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { field, type FieldControlProps } from "./field.variants";
+  import { fieldAssociation, type FieldContractProps } from "./core/field";
+  import Label from "./Label.svelte";
+  import { setFieldContext, warnA11y } from "./a11y";
+
+  interface Props extends FieldContractProps {
+    /** Extra classes on the Field root. */
+    class?: string;
+    /** The canonical Input or a consumer-owned control. */
+    children: Snippet<[FieldControlProps]>;
+  }
+
+  const generatedId = $props.id();
+  const {
+    label,
+    help,
+    error,
+    required = false,
+    id,
+    layout = "stacked",
+    class: className,
+    children,
+  }: Props = $props();
+
+  const controlId = $derived(id ?? `${generatedId}-control`);
+  const association = $derived(fieldAssociation({ id: controlId, help, error, required }));
+  const helpId = $derived(association.helpId);
+  const errorId = $derived(association.errorId);
+  const control = $derived(association.control);
+  const styles = $derived(field({ layout }));
+
+  // The control inside reads this to know its name is owned here, through the
+  // label's `for` (wave 5A's accessible-name contract).
+  setFieldContext({
+    get label() {
+      return label;
+    },
+  });
+  $effect(() => {
+    if (!label?.trim()) warnA11y("Field", "has an empty `label`, so its control has no accessible name", "Give the Field a visible `label`.");
+  });
+</script>
+
+<div
+  class={styles.root({ class: className })}
+  data-field-layout={layout}
+  data-field-invalid={error ? "true" : undefined}
+>
+  {#if layout === "inline"}{@render children(control)}{/if}
+
+  <Label class={styles.label()} for={controlId}>
+    {label}{#if required}<span class={styles.required()} aria-hidden="true">*</span><span class="sr-only"> (required)</span>{/if}
+  </Label>
+
+  {#if layout !== "inline"}{@render children(control)}{/if}
+
+  {#if help}
+    <p class={styles.help()} id={helpId}>{help}</p>
+  {/if}
+
+  {#if error}
+    <p class={styles.error()} id={errorId} role="alert">{error}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,70 @@
+<!--
+  Native related-control grouping with a required visible legend.
+
+  A group can carry help and an error of its own — a radio group nobody has
+  answered, a rating that is required. Like Field, Fieldset owns those
+  relationships: the child snippet receives the association every control in
+  the group spreads onto itself, so each one is described by the help, marked
+  invalid and pointed at the error while the error stands.
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLFieldsetAttributes } from "svelte/elements";
+  import { fieldsetAssociation } from "./core/fieldset";
+  import { fieldset, type FieldsetControlProps } from "./fieldset.variants";
+
+  interface Props extends Omit<HTMLFieldsetAttributes, "children" | "class"> {
+    /** The accessible name rendered by the fieldset's native legend. */
+    legend: string;
+    /** Supporting text announced with every control that takes the group's contract. */
+    help?: string;
+    /** Current validation error for the group, announced and associated with its controls. */
+    error?: string;
+    /** The native fieldset element for rare imperative access. */
+    ref?: HTMLFieldSetElement;
+    /** Extra classes merged onto the group. */
+    class?: string;
+    /** Extra classes merged onto the legend. */
+    legendClass?: string;
+    /** The grouped controls; spread the received contract onto each one. */
+    children?: Snippet<[FieldsetControlProps]>;
+  }
+
+  const generatedId = $props.id();
+  let {
+    legend,
+    help,
+    error,
+    ref = $bindable(),
+    class: className,
+    legendClass,
+    children,
+    ...rest
+  }: Props = $props();
+  const styles = fieldset();
+
+  const baseId = $derived(rest.id ?? `${generatedId}-group`);
+  const association = $derived(fieldsetAssociation({ id: baseId, help, error }));
+  const helpId = $derived(association.helpId);
+  const errorId = $derived(association.errorId);
+  const control = $derived<FieldsetControlProps>(association.control);
+
+</script>
+
+<fieldset
+  {...rest}
+  bind:this={ref}
+  class={styles.root({ class: className })}
+  data-fieldset-invalid={error ? "true" : undefined}
+>
+  <legend class={styles.legend({ class: legendClass })}>{legend}</legend>
+  {@render children?.(control)}
+
+  {#if help}
+    <p class={styles.help()} id={helpId}>{help}</p>
+  {/if}
+
+  {#if error}
+    <p class={styles.error()} id={errorId} role="alert">{error}</p>
+  {/if}
+</fieldset>

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

@@ -0,0 +1,70 @@
+<!--
+  A titled slide whose remaining height holds one caller-owned figure — a chart,
+  a diagram, an image or a table (ADR 0027). Charts live in the Data Kit, so
+  the figure arrives as a snippet and Base imports no chart engine.
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import Eyebrow from "./Eyebrow.svelte";
+  import Heading from "./Heading.svelte";
+  import SlideFrame from "./SlideFrame.svelte";
+  import Text from "./Text.svelte";
+  import type { HeadingLevel } from "./heading.variants";
+  import type { SlideSurface } from "./slide-frame.variants";
+  import { slideLayout } from "./slide-layout.variants";
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class" | "role" | "title"> {
+    /** The slide's title, set in the title role: say what the figure shows. */
+    title: string;
+    /** A micro-label above the title. */
+    eyebrow?: string;
+    /** The figure itself. It fills the height left under the title, so a chart should size to its parent. */
+    figure: Snippet;
+    /** A caption under the figure: its source, unit or period. */
+    caption?: string;
+    /** The title's outline level. Defaults to 2. */
+    level?: HeadingLevel;
+    /** The slide's accessible name. Defaults to `title`. */
+    label?: string;
+    /** The slide's position in its deck, shown in the bottom margin when given. */
+    number?: number;
+    /** How many slides the deck has; shown after `number` when both are given. */
+    total?: number;
+    /** The ground the slide is set on: the page `background` (default) or the `raised` elevation. */
+    surface?: SlideSurface;
+    /** Extra classes merged onto the frame. */
+    class?: string;
+  }
+
+  const {
+    title,
+    eyebrow,
+    figure,
+    caption,
+    level = 2,
+    label,
+    number,
+    total,
+    surface = "background",
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  const slots = slideLayout();
+</script>
+
+<SlideFrame {...rest} label={label ?? title} {number} {total} {surface} class={className} data-figure-slide>
+  <div class={slots.body()}>
+    <div class={slots.header()}>
+      {#if eyebrow}<Eyebrow>{eyebrow}</Eyebrow>{/if}
+      <Heading {level} role="title">{title}</Heading>
+    </div>
+    <figure data-slide-figure class={slots.figure()}>
+      <div data-slide-figure-body class={slots.figureBody()}>{@render figure()}</div>
+      {#if caption}
+        <figcaption><Text role="caption">{caption}</Text></figcaption>
+      {/if}
+    </figure>
+  </div>
+</SlideFrame>