@lmfaole/basics 0.2.1 → 0.3.0

package/README.md

@@ -224,7 +224,6 @@ The element upgrades existing markup into an accessible tab interface without ad
 ### Attributes
 
 - `data-label`: sets the generated tablist's accessible name when the tablist does not already have `aria-label` or `aria-labelledby`. Defaults to `Faner`.
-- `data-orientation`: sets arrow-key behavior and mirrors `aria-orientation` on the tablist. Supported values are `horizontal` and `vertical`.
 - `data-activation`: chooses whether arrow-key focus changes also activate the panel. Supported values are `automatic` and `manual`.
 - `data-selected-index`: sets the initially selected tab by zero-based index. Defaults to the first enabled tab.
 
@@ -232,7 +231,7 @@ The element upgrades existing markup into an accessible tab interface without ad
 
 - Missing tab and panel ids are generated automatically.
 - `aria-selected`, `aria-controls`, `aria-labelledby`, `hidden`, and `data-selected` stay in sync with the active tab.
-- Click, `Home`, `End`, and orientation-aware arrow keys move between tabs.
+- Click, `ArrowLeft`, `ArrowRight`, `Home`, and `End` move between tabs.
 - Disabled tabs are skipped during keyboard navigation.
 - In `manual` mode, arrow keys move focus and `Enter` or `Space` activates the focused tab.
 
@@ -243,6 +242,142 @@ The element upgrades existing markup into an accessible tab interface without ad
 - Prefer `<button>` elements for tabs so click and keyboard activation stay native.
 - Keep layout and styling outside the package; the component only manages semantics, state, and keyboard behavior.
 
+## Basic Table
+
+```html
+<basic-table
+  data-caption="Bemanning per sprint"
+  data-description="Viser team, lokasjon og ledig kapasitet per sprint."
+  data-row-headers
+  data-row-header-column="2"
+>
+  <table>
+    <thead>
+      <tr>
+        <th>Statuskode</th>
+        <th>Team</th>
+        <th>Lokasjon</th>
+        <th>Ledige timer</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>A1</td>
+        <td>Plattform</td>
+        <td>Oslo</td>
+        <td>18</td>
+      </tr>
+      <tr>
+        <td>B4</td>
+        <td>Designsystem</td>
+        <td>Trondheim</td>
+        <td>10</td>
+      </tr>
+    </tbody>
+  </table>
+</basic-table>
+
+<script type="module">
+  import "@lmfaole/basics/components/basic-table/register";
+</script>
+```
+
+The element upgrades a regular table with stronger accessible naming and header associations without imposing any styles.
+
+### Attributes
+
+- `data-caption`: generates a visible `<caption>` when the wrapped table does not already define one.
+- `data-column-headers`: promotes the first row to column headers when the author provides a plain table without a header row.
+- `data-description`: generates a hidden description and connects it with `aria-describedby`.
+- `data-label`: sets a fallback accessible name when the table has no caption, `aria-label`, or `aria-labelledby`. Defaults to `Tabell`.
+- `data-row-header-column`: sets which one-based body column should become the generated row header. Defaults to `1`.
+- `data-row-headers`: enables generated row headers in body rows. If `data-row-header-column` is present, row-header mode is enabled automatically.
+
+### Behavior
+
+- Preserves author-provided captions and only generates one when needed.
+- Can generate hidden helper text for extra context without requiring a separate authored description element.
+- Can promote a plain first row to column headers when consumers start from simple body-only markup.
+- Infers common `scope` values for header cells and assigns missing header ids.
+- Populates each data cell's `headers` attribute from the matching row and column headers.
+- Re-runs automatically when the wrapped table changes.
+
+### Markup Contract
+
+- Provide one descendant `<table>` inside the custom element.
+- Use real table sections and header cells where possible; the component strengthens semantics but does not replace the HTML table model.
+- Add `data-row-headers` when one body column identifies each row, and use `data-row-header-column` when that column is not the first one.
+- Add `data-column-headers` when you want the component to promote a plain first row instead of authoring a header row yourself.
+- Keep layout and styling outside the package; the component only manages semantics and accessibility metadata.
+
+## Basic Summary Table
+
+```html
+<basic-summary-table
+  data-caption="Prosjektsammendrag"
+  data-description="Viser timer og total kostnad for prosjektets leveranser."
+  data-row-headers
+  data-summary-columns="2,4"
+  data-total-label="Totalt"
+>
+  <table>
+    <thead>
+      <tr>
+        <th>Post</th>
+        <th>Timer</th>
+        <th>Sats</th>
+        <th>Kostnad</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Analyse</td>
+        <td>8</td>
+        <td>100</td>
+        <td>800</td>
+      </tr>
+      <tr>
+        <td>Implementasjon</td>
+        <td>12</td>
+        <td>120</td>
+        <td>1440</td>
+      </tr>
+    </tbody>
+  </table>
+</basic-summary-table>
+
+<script type="module">
+  import "@lmfaole/basics/components/basic-summary-table/register";
+</script>
+```
+
+The element upgrades a calculation-heavy table with an automatically maintained totals row in `<tfoot>`.
+
+### Attributes
+
+- `data-caption`: generates a visible `<caption>` when the wrapped table does not already define one.
+- `data-description`: generates hidden helper text and connects it with `aria-describedby`.
+- `data-label`: sets a fallback accessible name when the table has no caption, `aria-label`, or `aria-labelledby`. Defaults to `Tabell`.
+- `data-row-headers`: enables generated row headers in body rows.
+- `data-row-header-column`: sets which one-based body column should become the generated row header. Defaults to `1`.
+- `data-summary-columns`: chooses which one-based columns should be totalled in the generated footer row. If omitted, numeric body columns are inferred automatically.
+- `data-total-label`: sets the footer row label. Defaults to `Totalt`.
+- `data-locale`: passes a locale through to `Intl.NumberFormat` for generated footer totals.
+
+### Behavior
+
+- Inherits caption, description, row-header, and `headers` association behavior from `basic-table`.
+- Parses numbers from cell text and supports raw calculation values through `data-value` on individual body cells.
+- Generates or updates a totals row in `<tfoot>` without requiring consumers to author the footer manually.
+- Recalculates totals automatically when body rows or `data-value` attributes change.
+
+### Markup Contract
+
+- Provide one descendant `<table>` with line items in `<tbody>`.
+- Prefer a label column such as `Post` or `Kategori` and enable `data-row-headers` so each line item remains easy to navigate.
+- Use `data-value` on cells when the displayed text is formatted differently from the numeric value you want summed.
+- Keep layout and styling outside the package; the component only manages semantics, totals, and footer structure.
+
 ## Basic Toc
 
 ```html

package/components/basic-dialog/index.js

@@ -38,6 +38,25 @@ export function normalizeDialogLabel(value) {
     return value?.trim() || DEFAULT_LABEL;
 }
 
+function isDialogBackdropClick(event, dialog) {
+    if (event.target !== dialog) {
+        return false;
+    }
+
+    const { clientX, clientY } = event;
+
+    if (!Number.isFinite(clientX) || !Number.isFinite(clientY)) {
+        return false;
+    }
+
+    const bounds = dialog.getBoundingClientRect();
+
+    return clientX < bounds.left
+        || clientX > bounds.right
+        || clientY < bounds.top
+        || clientY > bounds.bottom;
+}
+
 export class DialogElement extends HTMLElementBase {
     static observedAttributes = ["data-backdrop-close", "data-label"];
 
@@ -142,8 +161,9 @@ export class DialogElement extends HTMLElementBase {
         }
 
         if (
-            event.target === this.#panel
+            this.#panel instanceof HTMLDialogElementBase
             && normalizeDialogBackdropClose(this.getAttribute("data-backdrop-close"))
+            && isDialogBackdropClick(event, this.#panel)
         ) {
             this.close();
         }

package/components/basic-summary-table/index.d.ts

@@ -0,0 +1,69 @@
+import type { TableElement } from "../basic-table";
+
+export const SUMMARY_TABLE_TAG_NAME: "basic-summary-table";
+
+/**
+ * Normalizes configured summary columns from a comma-separated one-based list.
+ */
+export function normalizeSummaryColumns(
+    value?: string | null,
+): number[];
+
+/**
+ * Normalizes the generated footer row label back to `"Totalt"`.
+ */
+export function normalizeSummaryTotalLabel(
+    value?: string | null,
+): string;
+
+/**
+ * Normalizes the optional `Intl.NumberFormat` locale.
+ */
+export function normalizeSummaryLocale(
+    value?: string | null,
+): string | undefined;
+
+/**
+ * Parses common formatted number strings such as `1,200.50` or `1 200,50`.
+ */
+export function parseSummaryNumber(
+    value?: string | number | null,
+): number | null;
+
+/**
+ * Formats a summary value for footer display.
+ */
+export function formatSummaryNumber(
+    value: number,
+    options?: {
+        locale?: string;
+        fractionDigits?: number;
+    },
+): string;
+
+/**
+ * Custom element that upgrades a regular summary table with generated footer
+ * totals.
+ *
+ * Attributes:
+ * - `data-caption`: optional generated `<caption>` text when the table has none
+ * - `data-description`: optional generated description wired through `aria-describedby`
+ * - `data-label`: fallback accessible name when the table has neither a caption
+ *   nor its own label
+ * - `data-row-headers`: enables generated row headers in tbody rows
+ * - `data-row-header-column`: one-based body column used for row headers
+ * - `data-summary-columns`: optional comma-separated one-based columns to total
+ * - `data-total-label`: label text used for the generated footer row
+ * - `data-locale`: optional locale used to format footer totals
+ */
+export class SummaryTableElement extends TableElement {
+    static observedAttributes: string[];
+    refresh(): void;
+}
+
+/**
+ * Registers the `basic-summary-table` custom element if it is not already defined.
+ */
+export function defineSummaryTable(
+    registry?: CustomElementRegistry,
+): typeof SummaryTableElement;

package/components/basic-summary-table/index.js

@@ -0,0 +1,390 @@
+import {
+    TableElement,
+    normalizeTableCellSpan,
+    normalizeTableRowHeaderColumn,
+} from "../basic-table/index.js";
+
+const HTMLTableElementBase = globalThis.HTMLTableElement ?? class {};
+
+export const SUMMARY_TABLE_TAG_NAME = "basic-summary-table";
+
+const DEFAULT_TOTAL_LABEL = "Totalt";
+const GENERATED_SUMMARY_ROW_ATTRIBUTE = "data-basic-summary-table-generated-row";
+const GENERATED_SUMMARY_CELL_ATTRIBUTE = "data-basic-summary-table-generated-cell";
+const GENERATED_SUMMARY_LABEL_ATTRIBUTE = "data-basic-summary-table-generated-label";
+
+export function normalizeSummaryColumns(value) {
+    if (!value?.trim()) {
+        return [];
+    }
+
+    return Array.from(
+        new Set(
+            value
+                .split(",")
+                .map((part) => Number.parseInt(part.trim(), 10))
+                .filter((column) => Number.isInteger(column) && column > 0),
+        ),
+    ).sort((left, right) => left - right);
+}
+
+export function normalizeSummaryTotalLabel(value) {
+    return value?.trim() || DEFAULT_TOTAL_LABEL;
+}
+
+export function normalizeSummaryLocale(value) {
+    return value?.trim() || undefined;
+}
+
+function getDecimalSeparator(value) {
+    const text = value.trim();
+    const lastComma = text.lastIndexOf(",");
+    const lastDot = text.lastIndexOf(".");
+
+    if (lastComma !== -1 && lastDot !== -1) {
+        return lastComma > lastDot ? "," : ".";
+    }
+
+    if (lastComma !== -1) {
+        const digitsAfter = text.length - lastComma - 1;
+        return digitsAfter > 0 && digitsAfter <= 2 ? "," : null;
+    }
+
+    if (lastDot !== -1) {
+        const digitsAfter = text.length - lastDot - 1;
+        return digitsAfter > 0 && digitsAfter <= 2 ? "." : null;
+    }
+
+    return null;
+}
+
+function countFractionDigits(value) {
+    const text = String(value ?? "").trim();
+
+    if (!text) {
+        return 0;
+    }
+
+    const decimalSeparator = getDecimalSeparator(text);
+
+    if (!decimalSeparator) {
+        return 0;
+    }
+
+    return text.length - text.lastIndexOf(decimalSeparator) - 1;
+}
+
+export function parseSummaryNumber(value) {
+    const text = String(value ?? "").trim();
+
+    if (!text) {
+        return null;
+    }
+
+    const decimalSeparator = getDecimalSeparator(text);
+    let normalized = text.replace(/[^\d,.\-]/g, "");
+
+    if (!normalized || normalized === "-") {
+        return null;
+    }
+
+    if (decimalSeparator === ",") {
+        normalized = normalized.replace(/\./g, "").replace(",", ".");
+    } else if (decimalSeparator === ".") {
+        normalized = normalized.replace(/,/g, "");
+    } else {
+        normalized = normalized.replace(/[.,]/g, "");
+    }
+
+    const parsed = Number.parseFloat(normalized);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+
+export function formatSummaryNumber(value, { locale, fractionDigits = 0 } = {}) {
+    return new Intl.NumberFormat(locale, {
+        minimumFractionDigits: fractionDigits,
+        maximumFractionDigits: fractionDigits,
+    }).format(value);
+}
+
+function findCellAtColumnIndex(row, targetColumnIndex) {
+    let columnIndex = 0;
+
+    for (const cell of Array.from(row.cells)) {
+        const colSpan = normalizeTableCellSpan(cell.getAttribute("colspan"));
+
+        if (targetColumnIndex >= columnIndex && targetColumnIndex < columnIndex + colSpan) {
+            return cell;
+        }
+
+        columnIndex += colSpan;
+    }
+
+    return null;
+}
+
+function getTable(root) {
+    const table = root.querySelector("table");
+    return table instanceof HTMLTableElementBase && table.closest(root.tagName.toLowerCase()) === root
+        ? table
+        : null;
+}
+
+function getLogicalColumnCount(table) {
+    let maxColumns = 0;
+
+    for (const row of Array.from(table.rows)) {
+        let columnCount = 0;
+
+        for (const cell of Array.from(row.cells)) {
+            columnCount += normalizeTableCellSpan(cell.getAttribute("colspan"));
+        }
+
+        maxColumns = Math.max(maxColumns, columnCount);
+    }
+
+    return maxColumns;
+}
+
+function getBodyRows(table) {
+    if (table.tBodies.length > 0) {
+        return Array.from(table.tBodies).flatMap((section) => Array.from(section.rows));
+    }
+
+    return Array.from(table.rows).filter(
+        (row) => row.parentElement?.tagName !== "THEAD" && row.parentElement?.tagName !== "TFOOT",
+    );
+}
+
+function collectSummaryColumns(table, configuredColumns, labelColumnIndex) {
+    if (configuredColumns.length > 0) {
+        return configuredColumns
+            .map((column) => column - 1)
+            .filter((column) => column >= 0 && column !== labelColumnIndex);
+    }
+
+    const inferredColumns = new Set();
+
+    for (const row of getBodyRows(table)) {
+        const logicalColumnCount = getLogicalColumnCount(table);
+
+        for (let columnIndex = 0; columnIndex < logicalColumnCount; columnIndex += 1) {
+            if (columnIndex === labelColumnIndex) {
+                continue;
+            }
+
+            const cell = findCellAtColumnIndex(row, columnIndex);
+            const rawValue = cell?.getAttribute("data-value") ?? cell?.textContent ?? "";
+
+            if (parseSummaryNumber(rawValue) !== null) {
+                inferredColumns.add(columnIndex);
+            }
+        }
+    }
+
+    return Array.from(inferredColumns).sort((left, right) => left - right);
+}
+
+function calculateSummaryTotals(table, summaryColumns) {
+    const totals = new Map();
+
+    for (const columnIndex of summaryColumns) {
+        totals.set(columnIndex, {
+            total: 0,
+            fractionDigits: 0,
+        });
+    }
+
+    for (const row of getBodyRows(table)) {
+        for (const columnIndex of summaryColumns) {
+            const cell = findCellAtColumnIndex(row, columnIndex);
+            const rawValue = cell?.getAttribute("data-value") ?? cell?.textContent ?? "";
+            const parsedValue = parseSummaryNumber(rawValue);
+
+            if (parsedValue === null) {
+                continue;
+            }
+
+            const current = totals.get(columnIndex);
+
+            if (!current) {
+                continue;
+            }
+
+            current.total += parsedValue;
+            current.fractionDigits = Math.max(current.fractionDigits, countFractionDigits(rawValue));
+        }
+    }
+
+    return totals;
+}
+
+function ensureGeneratedSummaryRow(table) {
+    let tfoot = table.tFoot;
+
+    if (!tfoot) {
+        tfoot = document.createElement("tfoot");
+        table.append(tfoot);
+    }
+
+    let row = tfoot.querySelector(`tr[${GENERATED_SUMMARY_ROW_ATTRIBUTE}]`);
+
+    if (!row) {
+        row = document.createElement("tr");
+        row.setAttribute(GENERATED_SUMMARY_ROW_ATTRIBUTE, "");
+        tfoot.append(row);
+    }
+
+    return row;
+}
+
+function removeGeneratedSummaryRow(table) {
+    table.querySelector(`tr[${GENERATED_SUMMARY_ROW_ATTRIBUTE}]`)?.remove();
+}
+
+function syncSummaryFooter(table, {
+    labelColumnIndex,
+    locale,
+    summaryColumns,
+    totalLabel,
+    totals,
+}) {
+    if (summaryColumns.length === 0) {
+        removeGeneratedSummaryRow(table);
+        return false;
+    }
+
+    const logicalColumnCount = getLogicalColumnCount(table);
+    const effectiveLabelColumnIndex = Math.min(labelColumnIndex, Math.max(logicalColumnCount - 1, 0));
+    const summaryColumnSet = new Set(summaryColumns.filter((column) => column < logicalColumnCount));
+    const row = ensureGeneratedSummaryRow(table);
+
+    row.replaceChildren();
+
+    for (let columnIndex = 0; columnIndex < logicalColumnCount; columnIndex += 1) {
+        if (columnIndex === effectiveLabelColumnIndex) {
+            const labelCell = document.createElement("th");
+            labelCell.scope = "row";
+            labelCell.textContent = totalLabel;
+            labelCell.setAttribute(GENERATED_SUMMARY_LABEL_ATTRIBUTE, "");
+            row.append(labelCell);
+            continue;
+        }
+
+        const valueCell = document.createElement("td");
+        valueCell.setAttribute(GENERATED_SUMMARY_CELL_ATTRIBUTE, "");
+
+        if (summaryColumnSet.has(columnIndex)) {
+            const summary = totals.get(columnIndex) ?? { total: 0, fractionDigits: 0 };
+            valueCell.textContent = formatSummaryNumber(summary.total, {
+                locale,
+                fractionDigits: summary.fractionDigits,
+            });
+            valueCell.dataset.value = String(summary.total);
+            valueCell.dataset.summaryTotal = "";
+        } else {
+            valueCell.dataset.summaryEmpty = "";
+        }
+
+        row.append(valueCell);
+    }
+
+    return true;
+}
+
+export class SummaryTableElement extends TableElement {
+    static observedAttributes = [
+        ...TableElement.observedAttributes,
+        "data-locale",
+        "data-summary-columns",
+        "data-total-label",
+    ];
+
+    #summaryObserver = null;
+    #scheduledFrame = 0;
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.#syncSummaryObserver();
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#summaryObserver?.disconnect();
+        this.#summaryObserver = null;
+
+        if (this.#scheduledFrame !== 0 && typeof window !== "undefined") {
+            window.cancelAnimationFrame(this.#scheduledFrame);
+            this.#scheduledFrame = 0;
+        }
+    }
+
+    refresh() {
+        super.refresh();
+
+        const table = getTable(this);
+
+        if (!(table instanceof HTMLTableElementBase)) {
+            return;
+        }
+
+        const labelColumnIndex = normalizeTableRowHeaderColumn(
+            this.getAttribute("data-row-header-column"),
+        ) - 1;
+        const summaryColumns = collectSummaryColumns(
+            table,
+            normalizeSummaryColumns(this.getAttribute("data-summary-columns")),
+            labelColumnIndex,
+        );
+        const totals = calculateSummaryTotals(table, summaryColumns);
+
+        syncSummaryFooter(table, {
+            labelColumnIndex,
+            locale: normalizeSummaryLocale(this.getAttribute("data-locale")),
+            summaryColumns,
+            totalLabel: normalizeSummaryTotalLabel(this.getAttribute("data-total-label")),
+            totals,
+        });
+
+        super.refresh();
+    }
+
+    #scheduleRefresh() {
+        if (this.#scheduledFrame !== 0 || typeof window === "undefined") {
+            return;
+        }
+
+        this.#scheduledFrame = window.requestAnimationFrame(() => {
+            this.#scheduledFrame = 0;
+            this.refresh();
+        });
+    }
+
+    #syncSummaryObserver() {
+        if (this.#summaryObserver || typeof MutationObserver === "undefined") {
+            return;
+        }
+
+        this.#summaryObserver = new MutationObserver(() => {
+            this.#scheduleRefresh();
+        });
+
+        this.#summaryObserver.observe(this, {
+            subtree: true,
+            attributes: true,
+            attributeFilter: ["data-value"],
+        });
+    }
+}
+
+export function defineSummaryTable(registry = globalThis.customElements) {
+    if (!registry?.get || !registry?.define) {
+        return SummaryTableElement;
+    }
+
+    if (!registry.get(SUMMARY_TABLE_TAG_NAME)) {
+        registry.define(SUMMARY_TABLE_TAG_NAME, SummaryTableElement);
+    }
+
+    return SummaryTableElement;
+}

package/components/basic-summary-table/register.d.ts

@@ -0,0 +1 @@
+export {};

package/components/basic-summary-table/register.js

@@ -0,0 +1,3 @@
+import { defineSummaryTable } from "./index.js";
+
+defineSummaryTable();