@birdapi/velinstyle 1.0.0 → 1.1.0

package/dist/chunks/velin-data-table-KK7IDGTP.js

@@ -0,0 +1,302 @@
+import {
+  announce
+} from "./chunk-Z4JYQ2XX.js";
+
+// components/velin-data-table.js
+var SORT_TYPES = /* @__PURE__ */ new Set(["text", "number", "date"]);
+var warnedMissingName = false;
+function sortValue(cell, type) {
+  const raw = cell?.dataset?.sortValue ?? cell?.textContent ?? "";
+  const text = raw.trim();
+  if (type === "number") {
+    const num = Number.parseFloat(text.replace(/[^\d.,-]/g, "").replace(",", "."));
+    return Number.isNaN(num) ? Number.NEGATIVE_INFINITY : num;
+  }
+  if (type === "date") {
+    const time = Date.parse(text);
+    return Number.isNaN(time) ? Number.NEGATIVE_INFINITY : time;
+  }
+  return text.toLowerCase();
+}
+var VelinDataTable = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["page-size", "filter-input", "empty-text", "label"];
+  }
+  constructor() {
+    super();
+    this._table = null;
+    this._page = 1;
+    this._query = "";
+    this._sortIndex = -1;
+    this._sortDirection = "ascending";
+    this._filterEl = null;
+    this._pagination = null;
+    this._emptyRow = null;
+    this._filterTimer = null;
+    this._onFilterInput = this._onFilterInput.bind(this);
+  }
+  connectedCallback() {
+    this.classList.add("velin-data-table");
+    requestAnimationFrame(() => this._init());
+  }
+  disconnectedCallback() {
+    if (this._filterEl) this._filterEl.removeEventListener("input", this._onFilterInput);
+    if (this._filterTimer) clearTimeout(this._filterTimer);
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this._table) return;
+    if (name === "page-size") {
+      this._page = 1;
+      this._render();
+    } else if (name === "filter-input") {
+      this._bindFilterInput();
+    } else if (name === "label") {
+      this._ensureAccessibleName();
+    }
+  }
+  // ── Public API ─────────────────────────────────────────────────────────────
+  /** @returns {HTMLTableRowElement[]} */
+  get rows() {
+    const body = this._table?.tBodies?.[0];
+    return body ? [...body.rows].filter((row) => row !== this._emptyRow) : [];
+  }
+  /** Rows matching the current filter, across all pages. */
+  get matchingRows() {
+    return this.rows.filter((row) => !row.dataset.velinFiltered);
+  }
+  /** Rows visible on the current page. */
+  get visibleRows() {
+    return this.matchingRows.filter((row) => !row.hidden);
+  }
+  get page() {
+    return this._page;
+  }
+  get pageSize() {
+    const size = Number.parseInt(this.getAttribute("page-size") || "", 10);
+    return Number.isFinite(size) && size > 0 ? size : 0;
+  }
+  get pageCount() {
+    const size = this.pageSize;
+    if (!size) return 1;
+    return Math.max(1, Math.ceil(this.matchingRows.length / size));
+  }
+  /**
+   * @param {number} index Column index
+   * @param {'ascending' | 'descending'} [direction]
+   */
+  sort(index, direction) {
+    const headers = this._headers();
+    const header = headers[index];
+    if (!header) return;
+    const type = this._sortType(header);
+    if (type === "none") return;
+    this._sortDirection = direction || (this._sortIndex === index && this._sortDirection === "ascending" ? "descending" : "ascending");
+    this._sortIndex = index;
+    const factor = this._sortDirection === "ascending" ? 1 : -1;
+    const body = this._table.tBodies[0];
+    const sorted = this.rows.slice().sort((a, b) => {
+      const av = sortValue(a.cells[index], type);
+      const bv = sortValue(b.cells[index], type);
+      if (av < bv) return -1 * factor;
+      if (av > bv) return 1 * factor;
+      return 0;
+    });
+    for (const row of sorted) body.appendChild(row);
+    this._syncSortState();
+    this._page = 1;
+    this._render();
+    const label = header.dataset.sortLabel || header.textContent.trim();
+    announce(`${label} sorted ${this._sortDirection}`);
+    this.dispatchEvent(new CustomEvent("velin-data-table-sort", {
+      bubbles: true,
+      detail: { index, direction: this._sortDirection, column: label }
+    }));
+  }
+  /** @param {string} query */
+  filter(query) {
+    this._query = String(query || "").trim().toLowerCase();
+    for (const row of this.rows) {
+      const match = !this._query || this._rowText(row).includes(this._query);
+      if (match) delete row.dataset.velinFiltered;
+      else row.dataset.velinFiltered = "true";
+    }
+    this._page = 1;
+    this._render();
+    const count = this.matchingRows.length;
+    announce(count === 1 ? "1 row matches" : `${count} rows match`);
+    this.dispatchEvent(new CustomEvent("velin-data-table-filter", {
+      bubbles: true,
+      detail: { query: this._query, count }
+    }));
+  }
+  /** @param {number} page */
+  goToPage(page) {
+    const target = Math.min(Math.max(1, Math.trunc(page) || 1), this.pageCount);
+    if (target === this._page) return;
+    this._page = target;
+    this._render();
+    announce(`Page ${this._page} of ${this.pageCount}`);
+    this.dispatchEvent(new CustomEvent("velin-data-table-page", {
+      bubbles: true,
+      detail: { page: this._page, pageCount: this.pageCount }
+    }));
+  }
+  // ── Setup ──────────────────────────────────────────────────────────────────
+  _init() {
+    this._table = this.querySelector("table");
+    if (!this._table || !this._table.tBodies.length) return;
+    this._ensureAccessibleName();
+    this._setupSorting();
+    this._bindFilterInput();
+    this._render();
+  }
+  _headers() {
+    const headRow = this._table.tHead?.rows?.[0];
+    return headRow ? [...headRow.cells] : [];
+  }
+  /** @param {HTMLTableCellElement} header */
+  _sortType(header) {
+    const declared = (header.dataset.sort || "").toLowerCase();
+    if (declared === "none") return "none";
+    if (SORT_TYPES.has(declared)) return declared;
+    return this.hasAttribute("sortable") ? "text" : "none";
+  }
+  /**
+   * A table without a name is unusable with a screen reader, so surface it
+   * instead of failing silently (WCAG 1.3.1 / 2.4.6).
+   */
+  _ensureAccessibleName() {
+    const table = this._table;
+    if (!table) return;
+    const label = this.getAttribute("label");
+    const hasName = table.caption?.textContent.trim() || table.getAttribute("aria-label")?.trim() || table.getAttribute("aria-labelledby")?.trim();
+    if (!hasName && label) {
+      table.setAttribute("aria-label", label);
+      return;
+    }
+    if (!hasName && !warnedMissingName) {
+      warnedMissingName = true;
+      console.warn("[velinstyle] <velin-data-table> needs a <caption>, aria-label, or a label attribute.");
+    }
+  }
+  /** Sortable headers get a real button so keyboard and AT support come for free. */
+  _setupSorting() {
+    this._headers().forEach((header, index) => {
+      if (this._sortType(header) === "none") return;
+      if (header.querySelector(".velin-data-table__sort")) return;
+      const label = header.textContent.trim();
+      header.dataset.sortLabel = label;
+      header.setAttribute("aria-sort", "none");
+      header.classList.add("velin-data-table__th");
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "velin-data-table__sort";
+      button.textContent = label;
+      const icon = document.createElement("span");
+      icon.className = "velin-data-table__sort-icon";
+      icon.setAttribute("aria-hidden", "true");
+      button.appendChild(icon);
+      button.addEventListener("click", () => this.sort(index));
+      header.textContent = "";
+      header.appendChild(button);
+    });
+  }
+  _syncSortState() {
+    this._headers().forEach((header, index) => {
+      if (this._sortType(header) === "none") return;
+      const active = index === this._sortIndex;
+      header.setAttribute("aria-sort", active ? this._sortDirection : "none");
+      header.querySelector(".velin-data-table__sort")?.classList.toggle("velin-data-table__sort--active", active);
+    });
+  }
+  _bindFilterInput() {
+    if (this._filterEl) this._filterEl.removeEventListener("input", this._onFilterInput);
+    const selector = this.getAttribute("filter-input");
+    this._filterEl = selector ? document.querySelector(selector) : null;
+    if (this._filterEl) this._filterEl.addEventListener("input", this._onFilterInput);
+  }
+  _onFilterInput(event) {
+    if (this._filterTimer) clearTimeout(this._filterTimer);
+    const value = event.target.value;
+    this._filterTimer = setTimeout(() => this.filter(value), 150);
+  }
+  /** @param {HTMLTableRowElement} row */
+  _rowText(row) {
+    const scoped = [...row.cells].filter((cell) => cell.hasAttribute("data-filter"));
+    const cells = scoped.length ? scoped : [...row.cells];
+    return cells.map((cell) => cell.textContent || "").join(" ").toLowerCase();
+  }
+  // ── Rendering ──────────────────────────────────────────────────────────────
+  _render() {
+    const size = this.pageSize;
+    this._page = Math.min(this._page, this.pageCount);
+    const matching = this.matchingRows;
+    const start = size ? (this._page - 1) * size : 0;
+    const end = size ? start + size : matching.length;
+    for (const row of this.rows) {
+      const index = matching.indexOf(row);
+      row.hidden = index === -1 || index < start || index >= end;
+    }
+    this._renderEmptyState(matching.length === 0);
+    this._renderPagination();
+  }
+  /** @param {boolean} isEmpty */
+  _renderEmptyState(isEmpty) {
+    if (!isEmpty) {
+      this._emptyRow?.remove();
+      this._emptyRow = null;
+      return;
+    }
+    if (this._emptyRow?.isConnected) return;
+    const columns = this._headers().length || 1;
+    const row = document.createElement("tr");
+    row.className = "velin-data-table__empty";
+    const cell = document.createElement("td");
+    cell.colSpan = columns;
+    cell.textContent = this.getAttribute("empty-text") || "No matching rows";
+    row.appendChild(cell);
+    this._table.tBodies[0].appendChild(row);
+    this._emptyRow = row;
+  }
+  _renderPagination() {
+    if (!this.pageSize || this.pageCount <= 1) {
+      this._pagination?.remove();
+      this._pagination = null;
+      return;
+    }
+    if (!this._pagination?.isConnected) {
+      const nav = document.createElement("nav");
+      nav.className = "velin-data-table__pagination";
+      nav.setAttribute("aria-label", this.getAttribute("pagination-label") || "Table pagination");
+      const previous2 = document.createElement("button");
+      previous2.type = "button";
+      previous2.className = "velin-btn velin-btn--outline velin-btn--sm";
+      previous2.dataset.velinPage = "previous";
+      previous2.textContent = this.getAttribute("previous-text") || "Previous";
+      previous2.addEventListener("click", () => this.goToPage(this._page - 1));
+      const status2 = document.createElement("p");
+      status2.className = "velin-data-table__page-status";
+      status2.dataset.velinPage = "status";
+      const next2 = document.createElement("button");
+      next2.type = "button";
+      next2.className = "velin-btn velin-btn--outline velin-btn--sm";
+      next2.dataset.velinPage = "next";
+      next2.textContent = this.getAttribute("next-text") || "Next";
+      next2.addEventListener("click", () => this.goToPage(this._page + 1));
+      nav.append(previous2, status2, next2);
+      this.appendChild(nav);
+      this._pagination = nav;
+    }
+    const status = this._pagination.querySelector('[data-velin-page="status"]');
+    if (status) status.textContent = `Page ${this._page} of ${this.pageCount}`;
+    const previous = this._pagination.querySelector('[data-velin-page="previous"]');
+    const next = this._pagination.querySelector('[data-velin-page="next"]');
+    if (previous) previous.disabled = this._page <= 1;
+    if (next) next.disabled = this._page >= this.pageCount;
+  }
+};
+customElements.define("velin-data-table", VelinDataTable);
+var velin_data_table_default = VelinDataTable;
+export {
+  velin_data_table_default as default
+};

package/dist/chunks/velin-form-summary-XRQ7COQH.js

@@ -0,0 +1,273 @@
+import {
+  announce
+} from "./chunk-Z4JYQ2XX.js";
+
+// components/velin-form-summary.js
+var FIELD_SELECTOR = "input, select, textarea";
+var IGNORED_TYPES = /* @__PURE__ */ new Set(["submit", "reset", "button", "image", "hidden"]);
+var fieldIdCounter = 0;
+function escapeSelector(value) {
+  const text = String(value ?? "");
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") return CSS.escape(text);
+  return text.replace(/[^\w-]/g, (char) => `\\${char}`);
+}
+function fieldLabel(field) {
+  const explicit = field.getAttribute("data-error-label");
+  if (explicit) return explicit;
+  const ariaLabel = field.getAttribute("aria-label");
+  if (ariaLabel?.trim()) return ariaLabel.trim();
+  const labelledBy = field.getAttribute("aria-labelledby");
+  if (labelledBy) {
+    const text = labelledBy.split(/\s+/).map((id) => field.ownerDocument.getElementById(id)?.textContent?.trim() || "").filter(Boolean).join(" ");
+    if (text) return text;
+  }
+  if (field.id) {
+    const label = field.ownerDocument.querySelector(`label[for="${escapeSelector(field.id)}"]`);
+    if (label?.textContent.trim()) return label.textContent.trim();
+  }
+  const wrapping = field.closest("label");
+  if (wrapping?.textContent.trim()) return wrapping.textContent.trim();
+  return field.name || "This field";
+}
+function fieldMessage(field) {
+  return field.getAttribute("data-error-message")?.trim() || field.validationMessage || "Invalid value";
+}
+function addDescribedBy(field, id) {
+  const ids = (field.getAttribute("aria-describedby") || "").split(/\s+/).filter(Boolean);
+  if (!ids.includes(id)) {
+    ids.push(id);
+    field.setAttribute("aria-describedby", ids.join(" "));
+  }
+}
+function removeDescribedBy(field, id) {
+  const ids = (field.getAttribute("aria-describedby") || "").split(/\s+/).filter(Boolean);
+  const next = ids.filter((value) => value !== id);
+  if (next.length) field.setAttribute("aria-describedby", next.join(" "));
+  else field.removeAttribute("aria-describedby");
+}
+var VelinFormSummary = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["for", "heading"];
+  }
+  constructor() {
+    super();
+    this._form = null;
+    this._panel = null;
+    this._errors = [];
+    this._onSubmit = this._onSubmit.bind(this);
+    this._onFieldChange = this._onFieldChange.bind(this);
+    this._onReset = this._onReset.bind(this);
+  }
+  connectedCallback() {
+    this.classList.add("velin-form-summary");
+    requestAnimationFrame(() => this._bindForm());
+  }
+  disconnectedCallback() {
+    this._unbindForm();
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next) return;
+    if (name === "for" && this.isConnected) {
+      this._unbindForm();
+      this._bindForm();
+    } else if (name === "heading" && this._panel) {
+      const heading = this._panel.querySelector(".velin-form-summary__heading");
+      if (heading) heading.textContent = this.headingText;
+    }
+  }
+  // ── Public API ─────────────────────────────────────────────────────────────
+  get form() {
+    return this._form;
+  }
+  /** @returns {{ field: HTMLElement, label: string, message: string }[]} */
+  get errors() {
+    return this._errors.slice();
+  }
+  get headingText() {
+    return this.getAttribute("heading") || "There is a problem";
+  }
+  /** Validate the form and render the summary. @returns {boolean} valid */
+  validate() {
+    if (!this._form) return true;
+    const errors = [];
+    for (const field of this._fields()) {
+      if (field.checkValidity()) {
+        this._clearFieldError(field);
+        continue;
+      }
+      const error = { field, label: fieldLabel(field), message: fieldMessage(field) };
+      this._markFieldError(field, error.message);
+      errors.push(error);
+    }
+    this._errors = errors;
+    this._render();
+    return errors.length === 0;
+  }
+  /** Remove the summary and all field error state. */
+  clear() {
+    for (const field of this._fields()) this._clearFieldError(field);
+    this._errors = [];
+    this._render();
+  }
+  /** Move focus to the first field with an error. */
+  focusFirstError() {
+    const first = this._errors[0];
+    if (first) this._focusField(first.field);
+  }
+  // ── Form wiring ────────────────────────────────────────────────────────────
+  _bindForm() {
+    const id = this.getAttribute("for");
+    this._form = id ? this.ownerDocument.getElementById(id) : this.closest("form");
+    if (!this._form) return;
+    if (!this.hasAttribute("native-validation")) this._form.noValidate = true;
+    this._form.addEventListener("submit", this._onSubmit);
+    this._form.addEventListener("reset", this._onReset);
+    this._form.addEventListener("input", this._onFieldChange);
+    this._form.addEventListener("change", this._onFieldChange);
+  }
+  _unbindForm() {
+    if (!this._form) return;
+    this._form.removeEventListener("submit", this._onSubmit);
+    this._form.removeEventListener("reset", this._onReset);
+    this._form.removeEventListener("input", this._onFieldChange);
+    this._form.removeEventListener("change", this._onFieldChange);
+    this._form = null;
+  }
+  /** @returns {HTMLElement[]} */
+  _fields() {
+    if (!this._form) return [];
+    const seenRadioNames = /* @__PURE__ */ new Set();
+    return [...this._form.querySelectorAll(FIELD_SELECTOR)].filter((field) => {
+      if (IGNORED_TYPES.has(field.type)) return false;
+      if (field.disabled || field.hasAttribute("data-error-ignore")) return false;
+      if (typeof field.checkValidity !== "function") return false;
+      if (field.type === "radio" && field.name) {
+        if (seenRadioNames.has(field.name)) return false;
+        seenRadioNames.add(field.name);
+      }
+      return true;
+    });
+  }
+  _onSubmit(event) {
+    if (this.validate()) return;
+    event.preventDefault();
+    this._announceErrors();
+    this._focusPanel();
+    this.dispatchEvent(new CustomEvent("velin-form-invalid", {
+      bubbles: true,
+      detail: { errors: this.errors.map(({ label, message }) => ({ label, message })) }
+    }));
+  }
+  _onReset() {
+    requestAnimationFrame(() => this.clear());
+  }
+  /** Re-validate a single field once it already had an error, never before. */
+  _onFieldChange(event) {
+    const field = event.target;
+    if (!field || !this._errors.some((error) => error.field === field)) return;
+    if (!field.checkValidity()) return;
+    this._clearFieldError(field);
+    this._errors = this._errors.filter((error) => error.field !== field);
+    this._render();
+    if (this._errors.length === 0) {
+      this.dispatchEvent(new CustomEvent("velin-form-valid", { bubbles: true }));
+    }
+  }
+  // ── Field state ────────────────────────────────────────────────────────────
+  /** @param {HTMLElement} field */
+  _errorId(field) {
+    if (!field.id) field.id = `velin-field-${++fieldIdCounter}`;
+    return `${field.id}-error`;
+  }
+  /**
+   * @param {HTMLElement} field
+   * @param {string} message
+   */
+  _markFieldError(field, message) {
+    const errorId = this._errorId(field);
+    field.setAttribute("aria-invalid", "true");
+    let holder = this.ownerDocument.getElementById(errorId);
+    if (!holder) {
+      holder = this._form.querySelector(`[data-velin-error-for="${escapeSelector(field.name || field.id)}"]`);
+    }
+    if (!holder) {
+      holder = this.ownerDocument.createElement("p");
+      holder.dataset.velinErrorGenerated = "true";
+      field.insertAdjacentElement("afterend", holder);
+    }
+    holder.id = errorId;
+    holder.classList.add("velin-field-error");
+    holder.textContent = message;
+    addDescribedBy(field, errorId);
+  }
+  /** @param {HTMLElement} field */
+  _clearFieldError(field) {
+    if (!field.id) return;
+    const errorId = `${field.id}-error`;
+    field.removeAttribute("aria-invalid");
+    removeDescribedBy(field, errorId);
+    const holder = this.ownerDocument.getElementById(errorId);
+    if (!holder) return;
+    if (holder.dataset.velinErrorGenerated) holder.remove();
+    else holder.textContent = "";
+  }
+  /** @param {HTMLElement} field */
+  _focusField(field) {
+    const target = field.type === "radio" && field.name ? this._form.querySelector(`input[type="radio"][name="${escapeSelector(field.name)}"]`) || field : field;
+    target.focus();
+    this.dispatchEvent(new CustomEvent("velin-form-error-focus", {
+      bubbles: true,
+      detail: { name: target.name || target.id }
+    }));
+  }
+  // ── Summary panel ──────────────────────────────────────────────────────────
+  _render() {
+    if (!this._errors.length) {
+      this._panel?.remove();
+      this._panel = null;
+      this.hidden = true;
+      return;
+    }
+    this.hidden = false;
+    if (!this._panel?.isConnected) {
+      const panel = this.ownerDocument.createElement("div");
+      panel.className = "velin-form-summary__panel velin-alert velin-alert--danger";
+      panel.setAttribute("role", "alert");
+      panel.tabIndex = -1;
+      const heading = this.ownerDocument.createElement("p");
+      heading.className = "velin-form-summary__heading";
+      heading.textContent = this.headingText;
+      const list2 = this.ownerDocument.createElement("ul");
+      list2.className = "velin-form-summary__list";
+      panel.append(heading, list2);
+      this.appendChild(panel);
+      this._panel = panel;
+    }
+    const list = this._panel.querySelector(".velin-form-summary__list");
+    list.textContent = "";
+    for (const error of this._errors) {
+      const item = this.ownerDocument.createElement("li");
+      const link = this.ownerDocument.createElement("a");
+      link.href = `#${this._errorId(error.field).replace(/-error$/, "")}`;
+      link.textContent = `${error.label}: ${error.message}`;
+      link.addEventListener("click", (event) => {
+        event.preventDefault();
+        this._focusField(error.field);
+      });
+      item.appendChild(link);
+      list.appendChild(item);
+    }
+  }
+  _focusPanel() {
+    this._panel?.focus();
+  }
+  _announceErrors() {
+    const count = this._errors.length;
+    announce(count === 1 ? "1 field needs attention" : `${count} fields need attention`, "assertive");
+  }
+};
+customElements.define("velin-form-summary", VelinFormSummary);
+var velin_form_summary_default = VelinFormSummary;
+export {
+  velin_form_summary_default as default
+};