@db-vincent/components 0.1.0 → 0.1.1

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

@@ -1,5 +1,6 @@
 ---
 import Icon from "./Icon.astro";
+import "../styles/sr-only.css";
 import "../styles/input.css";
 import "../styles/table.css";
 
@@ -133,7 +134,7 @@ const filterId = `table-filter-${Math.random().toString(36).slice(2, 9)}`;
                       {cell.swatch && (
                         <span
                           class="ds-table__swatch"
-                          style={`background:${cell.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>
                       )}
@@ -166,89 +167,102 @@ const filterId = `table-filter-${Math.random().toString(36).slice(2, 9)}`;
 </div>
 
 <script>
-  document.querySelectorAll<HTMLElement>("[data-ds-table]").forEach((root) => {
-    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 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 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 rows = Array.from(
+          tbody.querySelectorAll<HTMLTableRowElement>("tr[data-row]"),
+        );
+        let sortIndex = -1;
+        let direction = 1;
 
-    const apply = () => {
-      const query = filter?.value.trim().toLowerCase() ?? "";
-      let visible = 0;
+        const textFor = (row: HTMLTableRowElement, index: number) =>
+          (row.cells[index]?.textContent || "").trim();
 
-      rows.forEach((row) => {
-        const match = !query || row.textContent.toLowerCase().includes(query);
-        row.hidden = !match;
-        if (match) visible++;
-      });
+        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;
+        };
 
-      if (sortIndex >= 0) {
-        rows.sort(
-          (a, b) =>
-            direction * compare(textFor(a, sortIndex), textFor(b, sortIndex)),
-        );
-        rows.forEach((row) => tbody.append(row));
-      }
+        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);
+        };
 
-      if (empty) empty.hidden = visible !== 0;
-      if (count) {
-        count.textContent = `${visible} ${visible === 1 ? "row" : "rows"}`;
-      }
-    };
+        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));
+          }
 
-    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",
-          );
+          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();
       });
-    });
+  };
 
-    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>

package/src/astro/TextField.astro

@@ -1,5 +1,6 @@
 ---
 import Icon from "./Icon.astro";
+import "../styles/sr-only.css";
 import "../styles/input.css";
 
 /**
@@ -25,6 +26,8 @@ interface Props {
   optional?: boolean;
   multiline?: boolean;
   rows?: number;
+  /** Multiline only. Which way the user can drag the handle. */
+  resize?: "none" | "vertical" | "both";
   maxlength?: number;
   minlength?: number;
   pattern?: string;
@@ -52,6 +55,7 @@ const {
   optional = false,
   multiline = false,
   rows = 3,
+  resize = "vertical",
   maxlength,
   minlength,
   pattern,
@@ -74,6 +78,7 @@ const isPassword = !multiline && type === "password";
 const inputClass = [
   "ds-input",
   size !== "md" && `ds-input--${size}`,
+  multiline && resize !== "vertical" && `ds-input--resize-${resize}`,
   error && "is-invalid",
   valid && !error && "is-valid",
   valid && !error && "ds-input--with-state",
@@ -191,97 +196,110 @@ const inputClass = [
 </div>
 
 <script>
-  const fields = document.querySelectorAll<HTMLElement>("[data-ds-field]");
+  const bind = () => {
+    const fields = document.querySelectorAll<HTMLElement>("[data-ds-field]");
 
-  fields.forEach((field) => {
-    const input = field.querySelector<HTMLInputElement | HTMLTextAreaElement>(
-      ".ds-input",
-    );
-    const count = field.querySelector<HTMLElement>("[data-ds-count]");
-    const countLive = field.querySelector<HTMLElement>("[data-ds-count-live]");
-    const error = field.querySelector<HTMLElement>("[data-ds-error]");
-    const errorText = field.querySelector<HTMLElement>("[data-ds-error-text]");
-    const hint = field.querySelector<HTMLElement>(".ds-field__hint");
-    if (!input) return;
+    fields.forEach((field) => {
+      if (field.dataset.dsBound) return;
+      field.dataset.dsBound = "true";
+      const input = field.querySelector<HTMLInputElement | HTMLTextAreaElement>(
+        ".ds-input",
+      );
+      const count = field.querySelector<HTMLElement>("[data-ds-count]");
+      const countLive = field.querySelector<HTMLElement>(
+        "[data-ds-count-live]",
+      );
+      const error = field.querySelector<HTMLElement>("[data-ds-error]");
+      const errorText = field.querySelector<HTMLElement>(
+        "[data-ds-error-text]",
+      );
+      const hint = field.querySelector<HTMLElement>(".ds-field__hint");
+      if (!input) return;
 
-    if (count && input.maxLength > 0) {
-      // The visible counter updates silently; screen readers only hear it
-      // near the limit, not on every keystroke.
-      const updateCount = () => {
-        count.textContent = `${input.value.length} / ${input.maxLength}`;
-        const left = input.maxLength - input.value.length;
-        if (countLive) {
-          countLive.textContent =
-            left <= 5
-              ? `${left} ${left === 1 ? "character" : "characters"} left`
-              : "";
-        }
-      };
-      input.addEventListener("input", updateCount);
-      updateCount();
-    }
+      if (count && input.maxLength > 0) {
+        // The visible counter updates silently; screen readers only hear it
+        // near the limit, not on every keystroke.
+        const updateCount = () => {
+          count.textContent = `${input.value.length} / ${input.maxLength}`;
+          const left = input.maxLength - input.value.length;
+          if (countLive) {
+            countLive.textContent =
+              left <= 5
+                ? `${left} ${left === 1 ? "character" : "characters"} left`
+                : "";
+          }
+        };
+        input.addEventListener("input", updateCount);
+        updateCount();
+      }
 
-    if (!error || !errorText) return;
+      if (!error || !errorText) return;
 
-    const message = () => {
-      if (input.validity.valueMissing) {
-        return input.dataset.requiredMessage || "This field is required.";
-      }
-      if (input.validity.tooShort) {
-        return `Use at least ${input.minLength} characters.`;
-      }
-      if (input.validity.patternMismatch) {
-        return field.dataset.message || "Use the requested format.";
-      }
-      if (input.validity.typeMismatch) {
-        return "Enter a valid value.";
-      }
-      if (input.validity.tooLong) {
-        return `Use at most ${input.maxLength} characters.`;
-      }
-      return "";
-    };
+      const message = () => {
+        if (input.validity.valueMissing) {
+          return input.dataset.requiredMessage || "This field is required.";
+        }
+        if (input.validity.tooShort) {
+          return `Use at least ${input.minLength} characters.`;
+        }
+        if (input.validity.patternMismatch) {
+          return field.dataset.message || "Use the requested format.";
+        }
+        if (input.validity.typeMismatch) {
+          return "Enter a valid value.";
+        }
+        if (input.validity.tooLong) {
+          return `Use at most ${input.maxLength} characters.`;
+        }
+        return "";
+      };
 
-    const apply = (invalid: boolean, text: string) => {
-      input.classList.toggle("is-invalid", invalid);
-      if (invalid) {
-        input.setAttribute("aria-invalid", "true");
-      } else {
-        input.removeAttribute("aria-invalid");
-      }
-      error.hidden = !invalid;
-      errorText.textContent = text;
-      if (hint) hint.hidden = invalid;
-    };
+      const apply = (invalid: boolean, text: string) => {
+        input.classList.toggle("is-invalid", invalid);
+        if (invalid) {
+          input.setAttribute("aria-invalid", "true");
+        } else {
+          input.removeAttribute("aria-invalid");
+        }
+        error.hidden = !invalid;
+        errorText.textContent = text;
+        if (hint) hint.hidden = invalid;
+      };
 
-    const validate = () => {
-      const text = message();
-      apply(!!text, text);
-    };
+      const validate = () => {
+        const text = message();
+        apply(!!text, text);
+      };
 
-    input.addEventListener("blur", validate);
-    input.addEventListener("input", () => {
-      if (input.getAttribute("aria-invalid") === "true") validate();
+      input.addEventListener("blur", validate);
+      input.addEventListener("input", () => {
+        if (input.getAttribute("aria-invalid") === "true") validate();
+      });
     });
-  });
 
-  document
-    .querySelectorAll<HTMLElement>("[data-ds-reveal]")
-    .forEach((button) => {
-      const field = button.closest("[data-ds-field]");
-      const input = field?.querySelector<HTMLInputElement>(".ds-input");
-      if (!input) return;
-      const show = button.querySelector<HTMLElement>("[data-ds-reveal-show]");
-      const hide = button.querySelector<HTMLElement>("[data-ds-reveal-hide]");
+    document
+      .querySelectorAll<HTMLElement>("[data-ds-reveal]")
+      .forEach((button) => {
+        if (button.dataset.dsBound) return;
+        button.dataset.dsBound = "true";
+        const field = button.closest("[data-ds-field]");
+        const input = field?.querySelector<HTMLInputElement>(".ds-input");
+        if (!input) return;
+        const show = button.querySelector<HTMLElement>("[data-ds-reveal-show]");
+        const hide = button.querySelector<HTMLElement>("[data-ds-reveal-hide]");
 
-      button.addEventListener("click", () => {
-        const revealed = input.type === "text";
-        input.type = revealed ? "password" : "text";
-        // Stable name, state in aria-pressed: "Show password, pressed".
-        button.setAttribute("aria-pressed", revealed ? "false" : "true");
-        if (show) show.hidden = !revealed;
-        if (hide) hide.hidden = revealed;
-        input.focus({ preventScroll: true });
+        button.addEventListener("click", () => {
+          const revealed = input.type === "text";
+          input.type = revealed ? "password" : "text";
+          // Stable name, state in aria-pressed: "Show password, pressed".
+          button.setAttribute("aria-pressed", revealed ? "false" : "true");
+          if (show) show.hidden = !revealed;
+          if (hide) hide.hidden = revealed;
+          input.focus({ preventScroll: true });
+        });
       });
-    });
+  };
+
+  bind();
+  document.addEventListener("astro:page-load", bind);
 </script>

package/src/astro/Toast.astro

@@ -10,7 +10,7 @@ import "../styles/toast.css";
  *
  * With `triggerLabel` the component renders a real button and a template; the
  * button mounts the toast into one shared bottom-end region. For imperative
- * use, import `toast` from `@ds/components/scripts/toast` and call
+ * use, import `toast` from `@db-vincent/components/scripts/toast` and call
  * `toast.add`, `toast.close` or `toast.promise`.
  */
 interface Props {

package/src/astro/Tooltip.astro

@@ -0,0 +1,54 @@
+---
+import "../styles/popover.css";
+import "../styles/tooltip.css";
+
+/**
+ * Tooltip. A short, non-essential label for a control. Wrap one focusable
+ * trigger; the script adds aria-describedby to it. Never put information a
+ * user needs, or anything interactive, in a tooltip: touch and many assistive
+ * technologies cannot reach it. Use Popover for that.
+ *
+ *   <Tooltip text="Copy address"><Button iconOnly icon="copy" ariaLabel="Copy" /></Tooltip>
+ */
+interface Props {
+  text: string;
+  placement?: "top" | "bottom" | "start" | "end";
+  /** Hover delay in milliseconds. Keyboard focus opens at once. */
+  delay?: number;
+  id?: string;
+  class?: string;
+}
+
+const { text, placement = "top", delay, id, class: className } = Astro.props;
+
+const tipId = id ?? `tooltip-${Math.random().toString(36).slice(2, 9)}`;
+---
+
+<span class="ds-anchor" data-ds-tooltip data-delay={delay}>
+  <slot />
+  <span
+    class:list={["ds-tooltip", `ds-tooltip--${placement}`, className]}
+    id={tipId}
+    role="tooltip"
+    popover="manual"
+  >
+    {text}
+  </span>
+</span>
+
+<script>
+  import { mountTooltip } from "../scripts/tooltip";
+
+  const bind = () => {
+    document
+      .querySelectorAll<HTMLElement>("[data-ds-tooltip]")
+      .forEach((root) => {
+        if (root.dataset.dsBound) return;
+        root.dataset.dsBound = "true";
+        mountTooltip(root);
+      });
+  };
+
+  bind();
+  document.addEventListener("astro:page-load", bind);
+</script>