@db-vincent/components 0.0.0-stage → 0.1.0

package/src/astro/PageHeader.astro

@@ -0,0 +1,34 @@
+---
+import "../styles/page-header.css";
+
+/**
+ * Page header. One h1, an optional lede, metadata and actions. There is no
+ * eyebrow: the breadcrumb in the navbar already says where the page sits.
+ * `display` is for the single landing page per site, not for every route.
+ */
+interface Props {
+  title?: string;
+  lede?: string;
+  display?: boolean;
+  class?: string;
+}
+
+const { title, lede, display = false, class: className } = Astro.props;
+---
+
+<header
+  class:list={[
+    "ds-page-header",
+    display && "ds-page-header--display",
+    className,
+  ]}
+>
+  <h1 class="ds-page-header__title">{title ?? <slot name="title" />}</h1>
+  <p class="ds-page-header__lede">{lede ?? <slot name="lede" />}</p>
+  <div class="ds-page-header__meta">
+    <slot name="meta" />
+  </div>
+  <div class="ds-page-header__actions">
+    <slot name="actions" />
+  </div>
+</header>

package/src/astro/Pagination.astro

@@ -0,0 +1,162 @@
+---
+import Icon from "./Icon.astro";
+import "../styles/pagination.css";
+
+interface Props {
+  current: number;
+  total: number;
+  href?: string;
+  label?: string;
+  interactive?: boolean;
+  class?: string;
+}
+
+const {
+  current,
+  total,
+  href = "?page={page}",
+  label = "Pagination",
+  interactive = false,
+  class: className,
+} = Astro.props;
+
+const urlFor = (page: number) => href.replace("{page}", String(page));
+
+type PageToken = number | "ellipsis-start" | "ellipsis-end";
+const tokens: PageToken[] = [];
+if (total <= 7) {
+  for (let page = 1; page <= total; page++) tokens.push(page);
+} else {
+  tokens.push(1);
+  if (current > 4) tokens.push("ellipsis-start");
+  const start = Math.max(2, current - 1);
+  const end = Math.min(total - 1, current + 1);
+  for (let page = start; page <= end; page++) tokens.push(page);
+  if (current < total - 3) tokens.push("ellipsis-end");
+  tokens.push(total);
+}
+
+const Tag = interactive ? "button" : "a";
+const pageProps = (page: number) =>
+  interactive
+    ? { type: "button" as const, "data-page": page }
+    : { href: urlFor(page), "data-page": page };
+---
+
+<nav
+  class:list={[
+    "ds-pagination",
+    interactive && "ds-pagination--interactive",
+    className,
+  ]}
+  aria-label={label}
+  data-pagination-interactive={interactive ? "true" : undefined}
+  data-total={total}
+>
+  <ul class="ds-pagination__list">
+    <li>
+      <Tag
+        class="ds-pagination__link ds-pagination__link--direction"
+        {...pageProps(current - 1)}
+        aria-disabled={current <= 1 ? "true" : undefined}
+        disabled={interactive && current <= 1 ? true : undefined}
+        data-direction="prev"
+        rel={interactive ? undefined : "prev"}
+      >
+        <Icon name="chevron-left" size={14} />
+        <span class="ds-pagination__label">Previous</span>
+      </Tag>
+    </li>
+    {tokens.map((token) =>
+      typeof token === "number" ? (
+        <li>
+          <Tag
+            class="ds-pagination__link"
+            {...pageProps(token)}
+            aria-current={token === current ? "page" : undefined}
+            aria-label={`Page ${token}`}
+          >
+            {token}
+          </Tag>
+        </li>
+      ) : (
+        <li>
+          <span class="ds-pagination__ellipsis" aria-hidden="true">
+            …
+          </span>
+        </li>
+      ),
+    )}
+    <li>
+      <Tag
+        class="ds-pagination__link ds-pagination__link--direction"
+        {...pageProps(current + 1)}
+        aria-disabled={current >= total ? "true" : undefined}
+        disabled={interactive && current >= total ? true : undefined}
+        data-direction="next"
+        rel={interactive ? undefined : "next"}
+      >
+        <span class="ds-pagination__label">Next</span>
+        <Icon name="chevron-right" size={14} />
+      </Tag>
+    </li>
+  </ul>
+</nav>
+
+<script>
+  const bind = () => {
+    document
+      .querySelectorAll<HTMLElement>("[data-pagination-interactive]")
+      .forEach((nav) => {
+        if (nav.dataset.bound) return;
+        nav.dataset.bound = "true";
+        nav.addEventListener("click", (event) => {
+          const control = (event.target as HTMLElement).closest<HTMLElement>(
+            "[data-page]",
+          );
+          if (!control || control.hasAttribute("disabled")) return;
+          event.preventDefault();
+          const page = Number(control.dataset.page);
+          const total = Number(nav.dataset.total);
+          nav.querySelectorAll<HTMLElement>("[data-page]").forEach((item) => {
+            if (Number(item.dataset.page) === page) {
+              item.setAttribute("aria-current", "page");
+            } else {
+              item.removeAttribute("aria-current");
+            }
+          });
+          const previous = nav.querySelector<HTMLButtonElement>(
+            '[data-direction="prev"]',
+          );
+          const next = nav.querySelector<HTMLButtonElement>(
+            '[data-direction="next"]',
+          );
+          if (previous) {
+            previous.dataset.page = String(Math.max(1, page - 1));
+            previous.disabled = page <= 1;
+            previous.setAttribute(
+              "aria-disabled",
+              page <= 1 ? "true" : "false",
+            );
+          }
+          if (next) {
+            next.dataset.page = String(Math.min(total, page + 1));
+            next.disabled = page >= total;
+            next.setAttribute(
+              "aria-disabled",
+              page >= total ? "true" : "false",
+            );
+          }
+          nav.dispatchEvent(
+            new CustomEvent("page-change", {
+              bubbles: true,
+              detail: { page },
+            }),
+          );
+        });
+      });
+  };
+
+  bind();
+  document.addEventListener("astro:page-load", bind);
+</script>

package/src/astro/Radio.astro

@@ -0,0 +1,58 @@
+---
+import "../styles/choice.css";
+
+/** Radio. Wrap a set in RadioGroup for a native fieldset and legend. */
+interface Props {
+  label: string;
+  description?: string;
+  id?: string;
+  name: string;
+  value: string;
+  checked?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  class?: string;
+}
+
+const {
+  label,
+  description,
+  id,
+  name,
+  value,
+  checked = false,
+  disabled = false,
+  required = false,
+  class: className,
+} = Astro.props;
+
+const inputId = id ?? `radio-${Math.random().toString(36).slice(2, 9)}`;
+const descriptionId = description ? `${inputId}-description` : undefined;
+// The name comes from the label text only; the description is announced
+// once, as a description, instead of twice (name + description).
+const labelId = `${inputId}-label`;
+---
+
+<label class:list={["ds-choice", "ds-choice--radio", className]}>
+  <input
+    class="ds-choice__input"
+    id={inputId}
+    type="radio"
+    name={name}
+    value={value}
+    checked={checked}
+    disabled={disabled}
+    required={required}
+    aria-labelledby={description ? labelId : undefined}
+    aria-describedby={descriptionId}
+  />
+  <span class="ds-choice__box" aria-hidden="true"></span>
+  <span class="ds-choice__label">
+    <span id={labelId}>{label}</span>
+    {description && (
+      <span class="ds-choice__description" id={descriptionId}>
+        {description}
+      </span>
+    )}
+  </span>
+</label>

package/src/astro/RadioGroup.astro

@@ -0,0 +1,25 @@
+---
+import "../styles/choice.css";
+
+/** Native fieldset/legend grouping for radios or checkboxes. */
+interface Props {
+  legend: string;
+  hint?: string;
+  class?: string;
+}
+
+const { legend, hint, class: className } = Astro.props;
+const hintId = hint
+  ? `group-${Math.random().toString(36).slice(2, 9)}-hint`
+  : undefined;
+---
+
+<fieldset class:list={["ds-choice-group", className]} aria-describedby={hintId}>
+  <legend class="ds-choice-group__legend">{legend}</legend>
+  {hint && (
+    <p class="ds-choice-group__hint" id={hintId}>
+      {hint}
+    </p>
+  )}
+  <slot />
+</fieldset>

package/src/astro/Section.astro

@@ -0,0 +1,25 @@
+---
+import "../styles/section.css";
+
+/** Numbered documentation section: heading, mono index and optional intro. */
+interface Props {
+  title: string;
+  id: string;
+  index?: string;
+  intro?: string;
+  class?: string;
+}
+
+const { title, id, index, intro, class: className } = Astro.props;
+---
+
+<section class:list={["ds-section", className]} aria-labelledby={id}>
+  <div class="ds-section__head">
+    <h2 class="ds-section__title" id={id}>
+      {title}
+    </h2>
+    {index && <span class="ds-section__index">{index}</span>}
+  </div>
+  {intro && <p class="ds-section__intro">{intro}</p>}
+  <slot />
+</section>

package/src/astro/Select.astro

@@ -0,0 +1,403 @@
+---
+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>
+  document.querySelectorAll<HTMLElement>("[data-ds-select]").forEach((root) => {
+    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();
+  });
+</script>