@db-vincent/components 0.0.0-stage → 0.1.1

package/src/astro/Select.astro

@@ -0,0 +1,420 @@
+---
+import Icon from "./Icon.astro";
+import "../styles/input.css";
+import "../styles/select.css";
+
+/**
+ * Select. A custom listbox so the popup follows the system: rounded surface,
+ * selected indicators and a proper scroll area. Supports single and multiple
+ * selection; the selection is mirrored into hidden inputs for form posts.
+ */
+interface Option {
+  value: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+}
+
+interface Props {
+  label?: string;
+  id?: string;
+  name?: string;
+  options: Option[];
+  value?: string;
+  values?: string[];
+  multiple?: boolean;
+  placeholder?: string;
+  hint?: string;
+  error?: string;
+  disabled?: boolean;
+  required?: boolean;
+  optional?: boolean;
+  size?: "sm" | "md" | "lg";
+  class?: string;
+}
+
+const {
+  label,
+  id,
+  name,
+  options,
+  value,
+  values,
+  multiple = false,
+  placeholder,
+  hint,
+  error,
+  disabled = false,
+  required = false,
+  optional = false,
+  size = "md",
+  class: className,
+} = Astro.props;
+
+const selectId = id ?? `select-${Math.random().toString(36).slice(2, 9)}`;
+const listId = `${selectId}-listbox`;
+const hintId = `${selectId}-hint`;
+const errorId = `${selectId}-error`;
+const describedby =
+  [hint && hintId, error && errorId].filter(Boolean).join(" ") || undefined;
+
+const selectedValues = new Set(
+  multiple ? (values ?? (value ? [value] : [])) : value ? [value] : [],
+);
+const chosen = options.filter((option) => selectedValues.has(option.value));
+const display =
+  chosen.length === 0
+    ? (placeholder ?? "Select an option")
+    : chosen.length === 1
+      ? chosen[0].label
+      : `${chosen.length} selected`;
+---
+
+<div
+  class:list={[
+    "ds-field",
+    "ds-select",
+    multiple && "ds-select--multiple",
+    size !== "md" && `ds-select--${size}`,
+    className,
+  ]}
+  data-ds-select
+  data-multiple={multiple ? "true" : "false"}
+  data-name={name}
+  data-placeholder={placeholder ?? "Select an option"}
+>
+  {label && (
+    <label class="ds-field__label" for={selectId}>
+      {label}
+      {optional && <span class="ds-field__optional"> (optional)</span>}
+      {required && (
+        <span class="ds-field__required" aria-hidden="true">
+          {" "}
+          *
+        </span>
+      )}
+    </label>
+  )}
+  <div class="ds-select__anchor">
+    <button
+      class:list={[
+        "ds-select__control",
+        "ds-select__trigger",
+        error && "is-invalid",
+        chosen.length === 0 && "is-placeholder",
+      ]}
+      id={selectId}
+      type="button"
+      role="combobox"
+      aria-haspopup="listbox"
+      aria-expanded="false"
+      aria-controls={listId}
+      aria-required={required ? "true" : undefined}
+      aria-invalid={error ? "true" : undefined}
+      aria-describedby={describedby}
+      disabled={disabled}
+      data-ds-select-trigger
+    >
+      <span class="ds-select__value" data-ds-value>
+        {display}
+      </span>
+      <span class="ds-select__chevron" aria-hidden="true">
+        <Icon name="chevron-down" size={16} />
+      </span>
+    </button>
+
+    <div class="ds-select__popup" data-ds-popup hidden>
+      <ul
+        class="ds-select__list"
+        id={listId}
+        role="listbox"
+        aria-label={label ?? "Options"}
+        aria-multiselectable={multiple ? "true" : undefined}
+      >
+        {options.map((option, index) => (
+          <li
+            class="ds-select__option"
+            id={`${selectId}-option-${index}`}
+            role="option"
+            tabindex="-1"
+            data-value={option.value}
+            data-label={option.label}
+            aria-selected={selectedValues.has(option.value) ? "true" : "false"}
+            aria-disabled={option.disabled ? "true" : undefined}
+          >
+            <span class="ds-select__option-text">
+              <span class="ds-select__option-label">{option.label}</span>
+              {option.description && (
+                <span class="ds-select__option-description">
+                  {option.description}
+                </span>
+              )}
+            </span>
+            <span class="ds-select__indicator" aria-hidden="true">
+              <Icon name="check" size={14} />
+            </span>
+          </li>
+        ))}
+      </ul>
+      {multiple && (
+        <div class="ds-select__footer">
+          <button class="ds-select__done" type="button" data-ds-done>
+            Done
+          </button>
+        </div>
+      )}
+    </div>
+  </div>
+
+  <div data-ds-values>
+    {chosen.map((option) => (
+      <input type="hidden" name={name} value={option.value} />
+    ))}
+  </div>
+
+  {hint && (
+    <div class="ds-field__hint" id={hintId}>
+      {hint}
+    </div>
+  )}
+  {error && (
+    <div class="ds-field__error" id={errorId}>
+      <Icon name="alert-circle" size={14} />
+      {error}
+    </div>
+  )}
+</div>
+
+<script>
+  const bind = () => {
+    document
+      .querySelectorAll<HTMLElement>("[data-ds-select]")
+      .forEach((root) => {
+        if (root.dataset.dsBound) return;
+        root.dataset.dsBound = "true";
+        const trigger = root.querySelector<HTMLButtonElement>(
+          "[data-ds-select-trigger]",
+        );
+        const popup = root.querySelector<HTMLElement>("[data-ds-popup]");
+        const list = root.querySelector<HTMLElement>('[role="listbox"]');
+        const values = root.querySelector<HTMLElement>("[data-ds-values]");
+        const valueLabel = root.querySelector<HTMLElement>("[data-ds-value]");
+        const done = root.querySelector<HTMLButtonElement>("[data-ds-done]");
+        if (!trigger || !popup || !list || !valueLabel) return;
+
+        const multiple = root.dataset.multiple === "true";
+        const name = root.dataset.name || "";
+        const placeholder = root.dataset.placeholder || "Select an option";
+        const options = Array.from(
+          list.querySelectorAll<HTMLElement>('[role="option"]'),
+        );
+        let active = -1;
+
+        const selected = () =>
+          options.filter(
+            (option) => option.getAttribute("aria-selected") === "true",
+          );
+
+        const updateLabel = () => {
+          const chosen = selected();
+          valueLabel.textContent =
+            chosen.length === 0
+              ? placeholder
+              : chosen.length === 1
+                ? chosen[0].dataset.label || ""
+                : `${chosen.length} selected`;
+          trigger.classList.toggle("is-placeholder", chosen.length === 0);
+          trigger.title = chosen
+            .map((option) => option.dataset.label)
+            .join(", ");
+        };
+
+        const syncValues = () => {
+          if (!values) return;
+          values.replaceChildren();
+          selected().forEach((option) => {
+            const input = document.createElement("input");
+            input.type = "hidden";
+            input.name = name;
+            input.value = option.dataset.value || "";
+            values.append(input);
+          });
+        };
+
+        const enabled = (index: number) =>
+          options[index]?.getAttribute("aria-disabled") !== "true";
+
+        // Move from `from` in `direction`, skipping disabled options; stays put
+        // at either end.
+        const step = (from: number, direction: 1 | -1) => {
+          for (
+            let index = from + direction;
+            index >= 0 && index < options.length;
+            index += direction
+          ) {
+            if (enabled(index)) return index;
+          }
+          return active;
+        };
+
+        const setActive = (index: number, focus = false) => {
+          if (!options.length) return;
+          active = Math.max(0, Math.min(options.length - 1, index));
+          options.forEach((option, position) =>
+            option.classList.toggle("is-active", position === active),
+          );
+          if (focus) options[active]?.focus();
+        };
+
+        const close = (focusTrigger = false) => {
+          popup.hidden = true;
+          trigger.setAttribute("aria-expanded", "false");
+          root.classList.remove("is-open");
+          if (focusTrigger) trigger.focus();
+        };
+
+        const open = () => {
+          if (trigger.disabled) return;
+          popup.hidden = false;
+          trigger.setAttribute("aria-expanded", "true");
+          root.classList.add("is-open");
+          const current = options.findIndex(
+            (option) => option.getAttribute("aria-selected") === "true",
+          );
+          setActive(current >= 0 ? current : step(-1, 1), true);
+        };
+
+        const choose = (option: HTMLElement) => {
+          if (option.getAttribute("aria-disabled") === "true") return;
+          if (multiple) {
+            option.setAttribute(
+              "aria-selected",
+              option.getAttribute("aria-selected") === "true"
+                ? "false"
+                : "true",
+            );
+          } else {
+            options.forEach((entry) =>
+              entry.setAttribute(
+                "aria-selected",
+                entry === option ? "true" : "false",
+              ),
+            );
+          }
+          syncValues();
+          updateLabel();
+          root.dispatchEvent(
+            new CustomEvent("change", {
+              bubbles: true,
+              detail: {
+                values: selected().map((entry) => entry.dataset.value),
+              },
+            }),
+          );
+          if (multiple) {
+            option.focus();
+          } else {
+            close(true);
+          }
+        };
+
+        trigger.addEventListener("click", () => {
+          if (popup.hidden) open();
+          else close();
+        });
+
+        trigger.addEventListener("keydown", (event) => {
+          if (["ArrowDown", "ArrowUp", "Enter", " "].includes(event.key)) {
+            event.preventDefault();
+            if (popup.hidden) open();
+          }
+        });
+
+        list.addEventListener("click", (event) => {
+          const option = (event.target as HTMLElement).closest<HTMLElement>(
+            '[role="option"]',
+          );
+          if (option) choose(option);
+        });
+
+        list.addEventListener("keydown", (event) => {
+          switch (event.key) {
+            case "ArrowDown":
+              event.preventDefault();
+              setActive(step(active, 1), true);
+              break;
+            case "ArrowUp":
+              event.preventDefault();
+              setActive(step(active, -1), true);
+              break;
+            case "Home":
+              event.preventDefault();
+              setActive(step(-1, 1), true);
+              break;
+            case "End":
+              event.preventDefault();
+              setActive(step(options.length, -1), true);
+              break;
+            case "Enter":
+            case " ":
+              event.preventDefault();
+              if (active >= 0) choose(options[active]);
+              break;
+            case "Escape":
+              event.preventDefault();
+              close(true);
+              break;
+            case "Tab":
+              // In multiple mode Tab reaches the Done button before leaving.
+              if (multiple && done && !event.shiftKey) {
+                event.preventDefault();
+                done.focus();
+                break;
+              }
+              close();
+              trigger.focus();
+              break;
+            default:
+              if (event.key.length === 1) {
+                const letter = event.key.toLowerCase();
+                // Wrap-search from the option after the active one; no match
+                // keeps the current option.
+                for (let offset = 1; offset <= options.length; offset += 1) {
+                  const index = (active + offset) % options.length;
+                  const label = (
+                    options[index].dataset.label || ""
+                  ).toLowerCase();
+                  if (enabled(index) && label.startsWith(letter)) {
+                    setActive(index, true);
+                    break;
+                  }
+                }
+              }
+          }
+        });
+
+        done?.addEventListener("click", () => close(true));
+        done?.addEventListener("keydown", (event) => {
+          if (event.key === "Escape") {
+            event.preventDefault();
+            close(true);
+          } else if (event.key === "Tab" && event.shiftKey) {
+            event.preventDefault();
+            setActive(active, true);
+          } else if (event.key === "Tab") {
+            close();
+          }
+        });
+
+        document.addEventListener("pointerdown", (event) => {
+          if (!popup.hidden && !root.contains(event.target as Node)) close();
+        });
+
+        syncValues();
+        updateLabel();
+      });
+  };
+
+  bind();
+  document.addEventListener("astro:page-load", bind);
+</script>

package/src/astro/Sidebar.astro

@@ -0,0 +1,215 @@
+---
+import Icon from "./Icon.astro";
+import Badge from "./Badge.astro";
+import "../styles/nav.css";
+
+interface NavItem {
+  label: string;
+  href: string;
+  icon?: string;
+  active?: boolean;
+  badge?: string;
+  open?: boolean;
+  children?: { label: string; href: string; active?: boolean }[];
+}
+
+interface NavGroup {
+  label?: string;
+  items: NavItem[];
+}
+
+interface Props {
+  brand: string;
+  brandHref?: string;
+  groups: NavGroup[];
+  label?: string;
+  id?: string;
+  class?: string;
+}
+
+const {
+  brand,
+  brandHref = "/",
+  groups,
+  label = "Primary",
+  id = "ds-sidebar",
+  class: className,
+} = Astro.props;
+---
+
+<header class="ds-nav__mobilebar">
+  <a class="ds-nav__brand" href={brandHref}>
+    <span class="ds-nav__brand-mark" aria-hidden="true">
+      <Icon name="terminal" size={16} />
+    </span>
+    {brand}
+  </a>
+  <button
+    class="ds-nav__toggle"
+    type="button"
+    aria-controls={id}
+    aria-expanded="false"
+    data-nav-toggle
+  >
+    <Icon name="menu" size={20} label="Open navigation" />
+  </button>
+</header>
+
+<aside class:list={["ds-nav", className]} id={id} data-nav data-open="false">
+  <a class="ds-nav__brand" href={brandHref}>
+    <span class="ds-nav__brand-mark" aria-hidden="true">
+      <Icon name="terminal" size={16} />
+    </span>
+    {brand}
+  </a>
+
+  <div class="ds-nav__scroll">
+    <nav aria-label={label}>
+      {groups.map((group) => (
+        <div class="ds-nav__group">
+          {group.label && <div class="ds-nav__group-label">{group.label}</div>}
+          <ul class="ds-nav__list">
+            {group.items.map((item) =>
+              item.children?.length ? (
+                <li>
+                  <details
+                    class="ds-nav__submenu"
+                    open={
+                      item.open || item.children.some((child) => child.active)
+                    }
+                  >
+                    <summary
+                      class="ds-nav__summary"
+                      data-active={
+                        item.children.some((child) => child.active)
+                          ? "true"
+                          : undefined
+                      }
+                    >
+                      {item.icon && (
+                        <Icon name={item.icon} size={16} class="ds-nav__icon" />
+                      )}
+                      <span>{item.label}</span>
+                      <Icon
+                        name="chevron-right"
+                        size={14}
+                        class="ds-nav__chevron"
+                      />
+                    </summary>
+                    <ul class="ds-nav__list">
+                      {item.children.map((child) => (
+                        <li>
+                          <a
+                            class="ds-nav__link"
+                            href={child.href}
+                            aria-current={child.active ? "page" : undefined}
+                          >
+                            <span>{child.label}</span>
+                          </a>
+                        </li>
+                      ))}
+                    </ul>
+                  </details>
+                </li>
+              ) : (
+                <li>
+                  <a
+                    class="ds-nav__link"
+                    href={item.href}
+                    aria-current={item.active ? "page" : undefined}
+                  >
+                    {item.icon && (
+                      <Icon name={item.icon} size={16} class="ds-nav__icon" />
+                    )}
+                    <span>{item.label}</span>
+                    {item.badge && (
+                      <span class="ds-nav__badge">
+                        <Badge>{item.badge}</Badge>
+                      </span>
+                    )}
+                  </a>
+                </li>
+              ),
+            )}
+          </ul>
+        </div>
+      ))}
+    </nav>
+  </div>
+
+  <div class="ds-nav__footer">
+    <slot />
+  </div>
+</aside>
+<div class="ds-nav__backdrop" data-nav-close hidden></div>
+
+<script>
+  const setup = () => {
+    document
+      .querySelectorAll<HTMLElement>("[data-nav-toggle]")
+      .forEach((toggle) => {
+        if (toggle.dataset.bound) return;
+        toggle.dataset.bound = "true";
+        const id = toggle.getAttribute("aria-controls");
+        const nav = id ? document.getElementById(id) : null;
+        if (!nav) return;
+        const backdrop = nav.nextElementSibling as HTMLElement | null;
+
+        const setOpen = (open: boolean) => {
+          nav.dataset.open = String(open);
+          toggle.setAttribute("aria-expanded", String(open));
+          toggle.setAttribute(
+            "aria-label",
+            open ? "Close navigation" : "Open navigation",
+          );
+          if (backdrop) backdrop.hidden = !open;
+          document.body.style.overflow = open ? "hidden" : "";
+          if (open) {
+            const first = nav.querySelector<HTMLElement>("a, button, summary");
+            first?.focus();
+          } else {
+            toggle.focus();
+          }
+        };
+
+        toggle.addEventListener("click", () =>
+          setOpen(nav.dataset.open !== "true"),
+        );
+        backdrop?.addEventListener("click", () => setOpen(false));
+        nav.addEventListener("keydown", (event) => {
+          if (event.key === "Escape" && nav.dataset.open === "true") {
+            setOpen(false);
+            return;
+          }
+          if (event.key !== "Tab" || nav.dataset.open !== "true") return;
+          const focusable = Array.from(
+            nav.querySelectorAll<HTMLElement>(
+              'a[href], button:not([disabled]), summary, [tabindex]:not([tabindex="-1"])',
+            ),
+          ).filter((element) =>
+            // Links inside a closed <details> are not reachable; skip them.
+            typeof element.checkVisibility === "function"
+              ? element.checkVisibility()
+              : element.offsetParent !== null,
+          );
+          if (!focusable.length) return;
+          const first = focusable[0];
+          const last = focusable[focusable.length - 1];
+          if (event.shiftKey && document.activeElement === first) {
+            event.preventDefault();
+            last.focus();
+          } else if (!event.shiftKey && document.activeElement === last) {
+            event.preventDefault();
+            first.focus();
+          }
+        });
+        window.addEventListener("resize", () => {
+          if (window.innerWidth > 900 && nav.dataset.open === "true")
+            setOpen(false);
+        });
+      });
+  };
+
+  setup();
+  document.addEventListener("astro:page-load", setup);
+</script>

package/src/astro/Skeleton.astro

@@ -0,0 +1,41 @@
+---
+import "../styles/skeleton.css";
+
+/**
+ * Skeleton. Decorative by definition: aria-hidden, so a loading region must
+ * expose its own status ("Loading invoices…") and set aria-busy on the region.
+ */
+interface Props {
+  variant?: "image" | "heading" | "paragraph";
+  lines?: number;
+  width?: string;
+  class?: string;
+}
+
+const {
+  variant = "paragraph",
+  lines = 3,
+  width,
+  class: className,
+} = Astro.props;
+const safeWidth =
+  width && /^\d+(\.\d+)?(rem|em|px|%|ch|vw)$/.test(width) ? width : undefined;
+---
+
+{variant === "paragraph" ? (
+  <div
+    class:list={["ds-skeleton-stack", className]}
+    aria-hidden="true"
+    style={safeWidth ? `width:${safeWidth}` : undefined}
+  >
+    {Array.from({ length: lines }).map(() => (
+      <span class="ds-skeleton ds-skeleton--text"></span>
+    ))}
+  </div>
+) : (
+  <span
+    class:list={["ds-skeleton", `ds-skeleton--${variant}`, className]}
+    aria-hidden="true"
+    style={safeWidth ? `width:${safeWidth}` : undefined}
+  ></span>
+)}

package/src/astro/Spinner.astro

@@ -0,0 +1,20 @@
+---
+import "../styles/sr-only.css";
+import "../styles/spinner.css";
+
+/** Loading spinner. Announces through a visually hidden status, not motion. */
+interface Props {
+  size?: "sm" | "md" | "lg";
+  label?: string;
+  class?: string;
+}
+
+const { size = "md", label = "Loading", class: className } = Astro.props;
+---
+
+<span
+  class:list={["ds-spinner", size !== "md" && `ds-spinner--${size}`, className]}
+  role="status"
+>
+  <span class="ds-sr-only">{label}…</span>
+</span>