@db-vincent/components 0.0.0-stage → 0.1.1

package/src/astro/Stepper.astro

@@ -0,0 +1,82 @@
+---
+import Icon from "./Icon.astro";
+import "../styles/stepper.css";
+import "../styles/sr-only.css";
+
+/**
+ * Progress through an ordered process. Presentational: an <ol> where the
+ * current step carries aria-current="step". State is shown by marker shape
+ * (number, check, cross) and read out as visually hidden text, never by
+ * colour alone.
+ */
+interface Step {
+  label: string;
+  description?: string;
+  state?: "complete" | "current" | "upcoming" | "error";
+}
+
+interface Props {
+  steps: Step[];
+  orientation?: "horizontal" | "vertical";
+  /** Accessible name for the list, e.g. "Setup progress". */
+  label?: string;
+  class?: string;
+}
+
+const {
+  steps,
+  orientation = "horizontal",
+  label,
+  class: className,
+} = Astro.props;
+
+const STATE_TEXT = {
+  complete: "Completed",
+  error: "Error",
+  upcoming: "Not started",
+  current: "",
+};
+---
+
+<ol
+  class:list={[
+    "ds-stepper",
+    orientation === "vertical" && "ds-stepper--vertical",
+    className,
+  ]}
+  aria-label={label}
+>
+  {steps.map((step, index) => {
+    const state = step.state ?? "upcoming";
+    return (
+      <li
+        class="ds-stepper__item"
+        data-state={state}
+        aria-current={state === "current" ? "step" : undefined}
+      >
+        <span class="ds-stepper__marker" aria-hidden="true">
+          {state === "complete" ? (
+            <Icon name="check" size={16} />
+          ) : state === "error" ? (
+            <Icon name="x" size={16} />
+          ) : (
+            index + 1
+          )}
+        </span>
+        <span class="ds-stepper__body">
+          <span class="ds-stepper__label">
+            {step.label}
+            {STATE_TEXT[state] && (
+              <span class="ds-sr-only">
+                , {STATE_TEXT[state].toLowerCase()}
+              </span>
+            )}
+          </span>
+          {step.description && (
+            <span class="ds-stepper__description">{step.description}</span>
+          )}
+        </span>
+      </li>
+    );
+  })}
+</ol>

package/src/astro/Switch.astro

@@ -0,0 +1,78 @@
+---
+import Icon from "./Icon.astro";
+import "../styles/switch.css";
+
+/**
+ * On/off setting that applies immediately. Native checkbox with
+ * role="switch"; the label names it, hint and error describe it.
+ */
+interface Props {
+  label: string;
+  hint?: string;
+  error?: string;
+  id?: string;
+  name?: string;
+  value?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  size?: "sm" | "md";
+  class?: string;
+}
+
+const {
+  label,
+  hint,
+  error,
+  id,
+  name,
+  value,
+  checked = false,
+  disabled = false,
+  required = false,
+  size = "md",
+  class: className,
+} = Astro.props;
+
+const inputId = id ?? `switch-${Math.random().toString(36).slice(2, 9)}`;
+const labelId = `${inputId}-label`;
+const hintId = hint ? `${inputId}-hint` : undefined;
+const errorId = error ? `${inputId}-error` : undefined;
+const describedby = [hintId, errorId].filter(Boolean).join(" ") || undefined;
+---
+
+<label
+  class:list={["ds-switch", size !== "md" && `ds-switch--${size}`, className]}
+>
+  <input
+    class="ds-switch__input"
+    id={inputId}
+    type="checkbox"
+    role="switch"
+    name={name}
+    value={value}
+    checked={checked}
+    disabled={disabled}
+    required={required}
+    aria-invalid={error ? "true" : undefined}
+    aria-labelledby={describedby ? labelId : undefined}
+    aria-describedby={describedby}
+  />
+  <span class="ds-switch__track" aria-hidden="true">
+    <span class="ds-switch__thumb"></span>
+  </span>
+  <span class="ds-switch__label">
+    <span id={labelId}>{label}</span>
+    {hint && (
+      <span class="ds-switch__hint" id={hintId}>
+        {hint}
+      </span>
+    )}
+    {error && (
+      <span class="ds-switch__error" id={errorId}>
+        <Icon name="alert-circle" size={14} />
+        {error}
+      </span>
+    )}
+  </span>
+</label>

package/src/astro/Table.astro

@@ -0,0 +1,268 @@
+---
+import Icon from "./Icon.astro";
+import "../styles/sr-only.css";
+import "../styles/input.css";
+import "../styles/table.css";
+
+type Cell =
+  | string
+  | number
+  | {
+      text: string | number;
+      mono?: boolean;
+      kbd?: boolean;
+      swatch?: string;
+    };
+
+interface Column {
+  key: string;
+  label: string;
+  align?: "start" | "end";
+  numeric?: boolean;
+}
+
+interface Props {
+  columns: Column[];
+  rows: Record<string, Cell>[];
+  caption: string;
+  hideCaption?: boolean;
+  empty?: string;
+  sortable?: boolean;
+  filterable?: boolean;
+  filterLabel?: string;
+  filterPlaceholder?: string;
+  class?: string;
+}
+
+const {
+  columns,
+  rows,
+  caption,
+  hideCaption = false,
+  empty = "No records yet.",
+  sortable = false,
+  filterable = false,
+  filterLabel = "Filter rows",
+  filterPlaceholder = "Filter…",
+  class: className,
+} = Astro.props;
+
+const filterId = `table-filter-${Math.random().toString(36).slice(2, 9)}`;
+---
+
+<div class:list={["ds-table-wrap", className]} data-ds-table>
+  {filterable && (
+    <div class="ds-table__toolbar">
+      <label class="ds-sr-only" for={filterId}>
+        {filterLabel}
+      </label>
+      <input
+        class="ds-input ds-input--sm ds-table__filter"
+        id={filterId}
+        type="search"
+        placeholder={filterPlaceholder}
+        data-table-filter
+      />
+      <span class="ds-table__count" aria-live="polite" data-table-count>
+        {rows.length} {rows.length === 1 ? "row" : "rows"}
+      </span>
+    </div>
+  )}
+  <table class:list={["ds-table", columns.length >= 4 && "ds-table--wide"]}>
+    <caption class:list={["ds-table__caption", hideCaption && "ds-sr-only"]}>
+      {caption}
+    </caption>
+    <thead>
+      <tr>
+        {columns.map((column, index) => (
+          <th
+            scope="col"
+            class:list={[
+              column.numeric && "is-numeric",
+              column.align === "end" && "is-end",
+            ]}
+            aria-sort={sortable ? "none" : undefined}
+          >
+            {sortable ? (
+              <button
+                class="ds-table__sort-button"
+                type="button"
+                data-sort-index={index}
+              >
+                {column.label}
+                <span class="ds-table__sort" aria-hidden="true">
+                  <Icon
+                    name="chevrons-up-down"
+                    size={14}
+                    class="ds-table__sort-idle"
+                  />
+                  <Icon
+                    name="chevron-down"
+                    size={14}
+                    class="ds-table__sort-dir"
+                  />
+                </span>
+              </button>
+            ) : (
+              column.label
+            )}
+          </th>
+        ))}
+      </tr>
+    </thead>
+    <tbody>
+      {rows.length === 0 ? (
+        <tr>
+          <td class="ds-table__empty" colspan={columns.length}>
+            {empty}
+          </td>
+        </tr>
+      ) : (
+        rows.map((row) => (
+          <tr data-row>
+            {columns.map((column) => {
+              const cell = row[column.key];
+              return (
+                <td
+                  class:list={[
+                    column.numeric && "is-numeric",
+                    column.align === "end" && "is-end",
+                  ]}
+                >
+                  {typeof cell === "object" ? (
+                    <>
+                      {cell.swatch && (
+                        <span
+                          class="ds-table__swatch"
+                          style={`background:${/^(#[0-9a-f]{3,8}|var\(--[a-z0-9-]+\)|[a-z]+)$/i.test(cell.swatch) ? cell.swatch : "transparent"}`}
+                          aria-hidden="true"
+                        ></span>
+                      )}
+                      {cell.kbd ? (
+                        <kbd>{cell.text}</kbd>
+                      ) : (
+                        <span class:list={[cell.mono && "ds-table__mono"]}>
+                          {cell.text}
+                        </span>
+                      )}
+                    </>
+                  ) : (
+                    cell
+                  )}
+                </td>
+              );
+            })}
+          </tr>
+        ))
+      )}
+      {filterable && rows.length > 0 && (
+        <tr data-table-empty hidden>
+          <td class="ds-table__empty" colspan={columns.length}>
+            No matching rows.
+          </td>
+        </tr>
+      )}
+    </tbody>
+  </table>
+</div>
+
+<script>
+  const bind = () => {
+    document
+      .querySelectorAll<HTMLElement>("[data-ds-table]")
+      .forEach((root) => {
+        if (root.dataset.dsBound) return;
+        root.dataset.dsBound = "true";
+        const tbody = root.querySelector<HTMLElement>("tbody");
+        const filter = root.querySelector<HTMLInputElement>(
+          "[data-table-filter]",
+        );
+        const count = root.querySelector<HTMLElement>("[data-table-count]");
+        const empty = root.querySelector<HTMLElement>("[data-table-empty]");
+        const sortButtons = Array.from(
+          root.querySelectorAll<HTMLButtonElement>("[data-sort-index]"),
+        );
+        if (!tbody) return;
+
+        const rows = Array.from(
+          tbody.querySelectorAll<HTMLTableRowElement>("tr[data-row]"),
+        );
+        let sortIndex = -1;
+        let direction = 1;
+
+        const textFor = (row: HTMLTableRowElement, index: number) =>
+          (row.cells[index]?.textContent || "").trim();
+
+        const numberFor = (value: string) => {
+          if (!/[0-9]/.test(value)) return null;
+          const parsed = Number(value.replace(/[^0-9.-]/g, ""));
+          return Number.isFinite(parsed) ? parsed : null;
+        };
+
+        const compare = (a: string, b: string) => {
+          const first = numberFor(a);
+          const second = numberFor(b);
+          if (first !== null && second !== null) return first - second;
+          return a.localeCompare(b);
+        };
+
+        const apply = () => {
+          const query = filter?.value.trim().toLowerCase() ?? "";
+          let visible = 0;
+
+          rows.forEach((row) => {
+            const match =
+              !query || row.textContent.toLowerCase().includes(query);
+            row.hidden = !match;
+            if (match) visible++;
+          });
+
+          if (sortIndex >= 0) {
+            rows.sort(
+              (a, b) =>
+                direction *
+                compare(textFor(a, sortIndex), textFor(b, sortIndex)),
+            );
+            rows.forEach((row) => tbody.append(row));
+          }
+
+          if (empty) empty.hidden = visible !== 0;
+          if (count) {
+            count.textContent = `${visible} ${visible === 1 ? "row" : "rows"}`;
+          }
+        };
+
+        sortButtons.forEach((button) => {
+          button.addEventListener("click", () => {
+            const header = button.closest("th");
+            const index = Number(button.dataset.sortIndex);
+            direction =
+              sortIndex === index &&
+              header?.getAttribute("aria-sort") === "ascending"
+                ? -1
+                : 1;
+            sortIndex = index;
+            sortButtons.forEach((other) => {
+              const otherHeader = other.closest("th");
+              if (!otherHeader) return;
+              otherHeader.setAttribute(
+                "aria-sort",
+                other === button
+                  ? direction === 1
+                    ? "ascending"
+                    : "descending"
+                  : "none",
+              );
+            });
+            apply();
+          });
+        });
+
+        filter?.addEventListener("input", apply);
+        apply();
+      });
+  };
+
+  bind();
+  document.addEventListener("astro:page-load", bind);
+</script>

package/src/astro/Tabs.astro

@@ -0,0 +1,83 @@
+---
+import "../styles/tabs.css";
+
+/**
+ * Tabs with automatic activation. Each item names a panel slot:
+ *
+ *   <Tabs label="Service" items={[{ id: "logs", label: "Logs" }]}>
+ *     <p slot="logs">…</p>
+ *   </Tabs>
+ *
+ * Arrow keys, Home and End move between tabs; only the selected tab is in the
+ * tab order. The indicator slides with a transform. Fires `ds-tabs-change`.
+ */
+interface TabItem {
+  id: string;
+  label: string;
+  disabled?: boolean;
+}
+
+interface Props {
+  items: TabItem[];
+  /** Accessible name for the tab list. */
+  label: string;
+  /** Id of the initially selected tab. Defaults to the first enabled tab. */
+  selected?: string;
+  id?: string;
+  class?: string;
+}
+
+const { items, label, selected, id, class: className } = Astro.props;
+
+const rootId = id ?? `tabs-${Math.random().toString(36).slice(2, 9)}`;
+const current =
+  items.find((item) => item.id === selected && !item.disabled) ??
+  items.find((item) => !item.disabled);
+---
+
+<div class:list={["ds-tabs", className]} id={rootId} data-ds-tabs>
+  <div class="ds-tabs__list" role="tablist" aria-label={label}>
+    {items.map((item) => (
+      <button
+        class="ds-tabs__tab"
+        type="button"
+        role="tab"
+        id={`${rootId}-tab-${item.id}`}
+        aria-selected={item === current ? "true" : "false"}
+        aria-controls={`${rootId}-panel-${item.id}`}
+        tabindex={item === current ? 0 : -1}
+        disabled={item.disabled}
+      >
+        {item.label}
+      </button>
+    ))}
+    <span class="ds-tabs__indicator" aria-hidden="true"></span>
+  </div>
+  {items.map((item) => (
+    <div
+      class="ds-tabs__panel"
+      role="tabpanel"
+      id={`${rootId}-panel-${item.id}`}
+      aria-labelledby={`${rootId}-tab-${item.id}`}
+      tabindex="0"
+      hidden={item !== current}
+    >
+      <slot name={item.id} />
+    </div>
+  ))}
+</div>
+
+<script>
+  import { mountTabs } from "../scripts/tabs";
+
+  const bind = () => {
+    document.querySelectorAll<HTMLElement>("[data-ds-tabs]").forEach((root) => {
+      if (root.dataset.dsBound) return;
+      root.dataset.dsBound = "true";
+      mountTabs(root);
+    });
+  };
+
+  bind();
+  document.addEventListener("astro:page-load", bind);
+</script>