@birdapi/velinstyle 1.0.0 → 1.1.0

package/dist/velinstyle-components.js

@@ -5705,6 +5705,146 @@ var init_blade = __esm({
   }
 });
 
+// core/highlight/languages/python.js
+var python_exports = {};
+__export(python_exports, {
+  default: () => lexPython
+});
+function lexPython(code) {
+  return tokenize(code, RULES9);
+}
+var RULES9;
+var init_python = __esm({
+  "core/highlight/languages/python.js"() {
+    init_utils();
+    RULES9 = [
+      { type: "comment", re: /#[^\n]*/y },
+      // Triple-quoted strings first so the single-quote rules cannot split them.
+      { type: "string", re: /[rbfu]{0,2}"""[\s\S]*?"""/y },
+      { type: "string", re: /[rbfu]{0,2}'''[\s\S]*?'''/y },
+      { type: "string", re: /[rbfu]{0,2}"(?:\\.|[^"\\\n])*"/y },
+      { type: "string", re: /[rbfu]{0,2}'(?:\\.|[^'\\\n])*'/y },
+      { type: "number", re: /\b0[xX][\da-fA-F_]+\b|\b\d[\d_]*(?:\.[\d_]+)?(?:[eE][+-]?\d+)?j?\b/y },
+      {
+        type: "keyword",
+        re: /\b(?:and|as|assert|async|await|break|class|continue|def|del|elif|else|except|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|raise|return|try|while|with|yield)\b/y
+      },
+      {
+        type: "builtin",
+        re: /\b(?:None|True|False|self|cls|abs|all|any|bool|bytes|dict|dir|enumerate|filter|float|format|frozenset|getattr|hasattr|int|isinstance|issubclass|iter|len|list|map|max|min|next|object|open|print|range|repr|reversed|round|set|setattr|sorted|str|sum|super|tuple|type|zip)\b/y
+      },
+      // Multi-character operators first so `->` is not split into `-` and `>`.
+      { type: "operator", re: /->|:=|\*\*=?|\/\/=?|<<=?|>>=?|[-+*/%&|^~<>!=]=?/y },
+      { type: "punctuation", re: /[[\]{}(),:;.@]/y },
+      { type: "identifier", re: /\b[A-Za-z_]\w*\b/y }
+    ];
+  }
+});
+
+// core/highlight/languages/yaml.js
+var yaml_exports = {};
+__export(yaml_exports, {
+  default: () => lexYaml
+});
+function lexYaml(code) {
+  return tokenize(code, RULES10);
+}
+var RULES10;
+var init_yaml = __esm({
+  "core/highlight/languages/yaml.js"() {
+    init_utils();
+    RULES10 = [
+      { type: "comment", re: /#[^\n]*/y },
+      // Document markers and block scalar indicators.
+      { type: "punctuation", re: /^(?:---|\.\.\.)$/my },
+      { type: "string", re: /"(?:\\.|[^"\\])*"/y },
+      { type: "string", re: /'(?:''|[^'])*'/y },
+      // Keys are the primary structure in YAML, so they get the attr-name colour.
+      { type: "attr-name", re: /^[ \t]*-?[ \t]*[\w.$-]+(?=[ \t]*:(?:[ \t]|$))/my },
+      { type: "punctuation", re: /^[ \t]*-(?=[ \t]|$)/my },
+      { type: "keyword", re: /\b(?:true|false|null|yes|no|on|off|~)\b/yi },
+      { type: "number", re: /\b-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b/y },
+      // Anchors, aliases, tags and block scalar headers.
+      { type: "operator", re: /[&*]\w+|![\w/!-]*|[|>][+-]?\d*(?=\s*$)/my },
+      { type: "punctuation", re: /[:,[\]{}]/y }
+    ];
+  }
+});
+
+// core/highlight/languages/go.js
+var go_exports = {};
+__export(go_exports, {
+  default: () => lexGo
+});
+function lexGo(code) {
+  return tokenize(code, RULES11);
+}
+var RULES11;
+var init_go = __esm({
+  "core/highlight/languages/go.js"() {
+    init_utils();
+    RULES11 = [
+      { type: "comment", re: /\/\/[^\n]*/y },
+      { type: "comment", re: /\/\*[\s\S]*?\*\//y },
+      // Raw strings may span lines.
+      { type: "string", re: /`[^`]*`/y },
+      { type: "string", re: /"(?:\\.|[^"\\\n])*"/y },
+      { type: "string", re: /'(?:\\.|[^'\\\n])*'/y },
+      { type: "number", re: /\b0[xX][\da-fA-F_]+\b|\b\d[\d_]*(?:\.[\d_]*)?(?:[eE][+-]?\d+)?i?\b/y },
+      {
+        type: "keyword",
+        re: /\b(?:break|case|chan|const|continue|default|defer|else|fallthrough|for|func|go|goto|if|import|interface|map|package|range|return|select|struct|switch|type|var)\b/y
+      },
+      {
+        type: "builtin",
+        re: /\b(?:append|bool|byte|cap|clear|close|complex|complex64|complex128|copy|delete|error|float32|float64|imag|int|int8|int16|int32|int64|len|make|max|min|new|nil|panic|print|println|real|recover|rune|string|true|false|iota|uint|uint8|uint16|uint32|uint64|uintptr|any)\b/y
+      },
+      { type: "operator", re: /:=|\.\.\.|&&|\|\||<-|\+\+|--|<<=?|>>=?|&\^=?|[-+*/%&|^<>!=]=?|~/y },
+      { type: "punctuation", re: /[[\]{}(),;:.]/y },
+      { type: "identifier", re: /\b[A-Za-z_]\w*\b/y }
+    ];
+  }
+});
+
+// core/highlight/languages/rust.js
+var rust_exports = {};
+__export(rust_exports, {
+  default: () => lexRust
+});
+function lexRust(code) {
+  return tokenize(code, RULES12);
+}
+var RULES12;
+var init_rust = __esm({
+  "core/highlight/languages/rust.js"() {
+    init_utils();
+    RULES12 = [
+      { type: "comment", re: /\/\/\/?[^\n]*/y },
+      { type: "comment", re: /\/\*[\s\S]*?\*\//y },
+      // Raw strings close on the same number of hashes they opened with.
+      { type: "string", re: /b?r(#*)"[\s\S]*?"\1/y },
+      { type: "string", re: /b?"(?:\\.|[^"\\])*"/y },
+      { type: "string", re: /b?'(?:\\.|[^'\\])'/y },
+      // Attributes such as #[derive(Debug)] read as annotations.
+      { type: "builtin", re: /#!?\[[^\]]*\]/y },
+      { type: "number", re: /\b0[xXbo][\da-fA-F_]+\b|\b\d[\d_]*(?:\.[\d_]+)?(?:[eE][+-]?\d+)?(?:[iuf](?:8|16|32|64|128|size))?\b/y },
+      {
+        type: "keyword",
+        re: /\b(?:as|async|await|break|const|continue|crate|dyn|else|enum|extern|fn|for|if|impl|in|let|loop|match|mod|move|mut|pub|ref|return|self|Self|static|struct|super|trait|type|unsafe|use|where|while)\b/y
+      },
+      {
+        type: "builtin",
+        re: /\b(?:bool|char|f32|f64|i8|i16|i32|i64|i128|isize|str|u8|u16|u32|u64|u128|usize|String|Vec|Option|Result|Some|None|Ok|Err|Box|Rc|Arc|true|false)\b/y
+      },
+      // Lifetimes such as 'a must not be read as an unterminated char literal.
+      { type: "operator", re: /'[a-z_]\w*\b/y },
+      { type: "operator", re: /=>|->|::|\.\.=?|&&|\|\||<<=?|>>=?|[-+*/%&|^<>!=]=?|[?@]/y },
+      { type: "punctuation", re: /[[\]{}(),;:.#]/y },
+      { type: "identifier", re: /\b[A-Za-z_]\w*!?\b/y }
+    ];
+  }
+});
+
 // core/highlight/registry.js
 function normalizeLanguage(name) {
   const n = (name || "").trim().toLowerCase();
@@ -5724,11 +5864,14 @@ function normalizeLanguage(name) {
     md: "markdown",
     plaintext: "text",
     "plain-text": "text",
-    yml: "text",
-    yaml: "text",
+    yml: "yaml",
     toml: "text",
     ini: "text",
-    php8: "php"
+    php8: "php",
+    py: "python",
+    python3: "python",
+    golang: "go",
+    rs: "rust"
   };
   return map[n] || n;
 }
@@ -5784,7 +5927,15 @@ var init_registry = __esm({
       markup: () => Promise.resolve().then(() => (init_html(), html_exports)),
       console: () => Promise.resolve().then(() => (init_plain(), plain_exports)),
       php: () => Promise.resolve().then(() => (init_php(), php_exports)),
-      blade: () => Promise.resolve().then(() => (init_blade(), blade_exports))
+      blade: () => Promise.resolve().then(() => (init_blade(), blade_exports)),
+      python: () => Promise.resolve().then(() => (init_python(), python_exports)),
+      py: () => Promise.resolve().then(() => (init_python(), python_exports)),
+      yaml: () => Promise.resolve().then(() => (init_yaml(), yaml_exports)),
+      yml: () => Promise.resolve().then(() => (init_yaml(), yaml_exports)),
+      go: () => Promise.resolve().then(() => (init_go(), go_exports)),
+      golang: () => Promise.resolve().then(() => (init_go(), go_exports)),
+      rust: () => Promise.resolve().then(() => (init_rust(), rust_exports)),
+      rs: () => Promise.resolve().then(() => (init_rust(), rust_exports))
     };
     registerLanguage("js", lexJs);
   }
@@ -6307,6 +6458,589 @@ var init_velin_counter = __esm({
   }
 });
 
+// components/velin-data-table.js
+var velin_data_table_exports = {};
+__export(velin_data_table_exports, {
+  default: () => velin_data_table_default
+});
+function sortValue(cell, type) {
+  const raw = cell?.dataset?.sortValue ?? cell?.textContent ?? "";
+  const text2 = raw.trim();
+  if (type === "number") {
+    const num = Number.parseFloat(text2.replace(/[^\d.,-]/g, "").replace(",", "."));
+    return Number.isNaN(num) ? Number.NEGATIVE_INFINITY : num;
+  }
+  if (type === "date") {
+    const time = Date.parse(text2);
+    return Number.isNaN(time) ? Number.NEGATIVE_INFINITY : time;
+  }
+  return text2.toLowerCase();
+}
+var SORT_TYPES, warnedMissingName, VelinDataTable, velin_data_table_default;
+var init_velin_data_table = __esm({
+  "components/velin-data-table.js"() {
+    init_a11y_utils();
+    SORT_TYPES = /* @__PURE__ */ new Set(["text", "number", "date"]);
+    warnedMissingName = false;
+    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);
+    velin_data_table_default = VelinDataTable;
+  }
+});
+
+// components/velin-form-summary.js
+var velin_form_summary_exports = {};
+__export(velin_form_summary_exports, {
+  default: () => velin_form_summary_default
+});
+function escapeSelector(value) {
+  const text2 = String(value ?? "");
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") return CSS.escape(text2);
+  return text2.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 text2 = labelledBy.split(/\s+/).map((id) => field.ownerDocument.getElementById(id)?.textContent?.trim() || "").filter(Boolean).join(" ");
+    if (text2) return text2;
+  }
+  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 FIELD_SELECTOR, IGNORED_TYPES, fieldIdCounter, VelinFormSummary, velin_form_summary_default;
+var init_velin_form_summary = __esm({
+  "components/velin-form-summary.js"() {
+    init_a11y_utils();
+    FIELD_SELECTOR = "input, select, textarea";
+    IGNORED_TYPES = /* @__PURE__ */ new Set(["submit", "reset", "button", "image", "hidden"]);
+    fieldIdCounter = 0;
+    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);
+    velin_form_summary_default = VelinFormSummary;
+  }
+});
+
 // components/velin-live-dot.js
 var velin_live_dot_exports = {};
 __export(velin_live_dot_exports, {
@@ -7404,10 +8138,12 @@ var init_component_loaders = __esm({
       "velin-copy": () => Promise.resolve().then(() => (init_velin_copy(), velin_copy_exports)),
       "velin-countdown": () => Promise.resolve().then(() => (init_velin_countdown(), velin_countdown_exports)),
       "velin-counter": () => Promise.resolve().then(() => (init_velin_counter(), velin_counter_exports)),
+      "velin-data-table": () => Promise.resolve().then(() => (init_velin_data_table(), velin_data_table_exports)),
       "velin-dialog": () => Promise.resolve().then(() => (init_velin_dialog(), velin_dialog_exports)),
       "velin-drawer": () => Promise.resolve().then(() => (init_velin_drawer(), velin_drawer_exports)),
       "velin-dropdown": () => Promise.resolve().then(() => (init_velin_dropdown(), velin_dropdown_exports)),
       "velin-email": () => Promise.resolve().then(() => (init_velin_email(), velin_email_exports)),
+      "velin-form-summary": () => Promise.resolve().then(() => (init_velin_form_summary(), velin_form_summary_exports)),
       "velin-icon": () => Promise.resolve().then(() => (init_velin_icon(), velin_icon_exports)),
       "velin-lightbox": () => Promise.resolve().then(() => (init_velin_lightbox(), velin_lightbox_exports)),
       "velin-live-dot": () => Promise.resolve().then(() => (init_velin_live_dot(), velin_live_dot_exports)),
@@ -8023,6 +8759,8 @@ init_velin_sparkline();
 init_velin_counter();
 init_velin_live_dot();
 init_velin_code_block();
+init_velin_data_table();
+init_velin_form_summary();
 init_velin_search();
 init_velin_search();
 
@@ -8254,10 +8992,12 @@ export {
   velin_copy_default as VelinCopy,
   velin_countdown_default as VelinCountdown,
   velin_counter_default as VelinCounter,
+  velin_data_table_default as VelinDataTable,
   velin_dialog_default as VelinDialog,
   velin_drawer_default as VelinDrawer,
   velin_dropdown_default as VelinDropdown,
   velin_email_default as VelinEmail,
+  velin_form_summary_default as VelinFormSummary,
   VelinHapticObserver,
   velin_icon_default as VelinIcon,
   velin_lightbox_default as VelinLightbox,