@birdapi/velinstyle 0.9.0 → 1.1.0

package/dist/velinstyle-components.iife.js

@@ -5706,6 +5706,146 @@
     }
   });
 
+  // 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();
@@ -5725,11 +5865,14 @@
       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;
   }
@@ -5785,7 +5928,15 @@
         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);
     }
@@ -6308,6 +6459,589 @@
     }
   });
 
+  // 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, {
@@ -6701,7 +7435,8 @@
   });
   function createSearchWorker(workerUrl) {
     if (typeof Worker === "undefined") return null;
-    const url = workerUrl || new URL("./worker.js", import_meta.url).href;
+    if (!workerUrl) return null;
+    const url = workerUrl;
     let worker;
     try {
       worker = new Worker(url, { type: "module" });
@@ -6740,10 +7475,9 @@
       }
     };
   }
-  var import_meta, _nextId;
+  var _nextId;
   var init_worker_client = __esm({
     "core/search/worker-client.js"() {
-      import_meta = {};
       _nextId = 0;
     }
   });
@@ -7405,10 +8139,12 @@
         "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)),
@@ -8024,6 +8760,8 @@
   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();