@lmfaole/basics 0.1.1 → 0.3.0

package/components/basic-table/index.js

@@ -0,0 +1,554 @@
+const HTMLElementBase = globalThis.HTMLElement ?? class {};
+const HTMLTableElementBase = globalThis.HTMLTableElement ?? class {};
+const HTMLTableSectionElementBase = globalThis.HTMLTableSectionElement ?? class {};
+const HTMLTableCellElementBase = globalThis.HTMLTableCellElement ?? class {};
+
+export const TABLE_TAG_NAME = "basic-table";
+
+const DEFAULT_LABEL = "Tabell";
+const GENERATED_CAPTION_ATTRIBUTE = "data-basic-table-generated-caption";
+const GENERATED_COLUMN_HEADER_ATTRIBUTE = "data-basic-table-generated-column-header";
+const GENERATED_ROW_HEADER_ATTRIBUTE = "data-basic-table-generated-row-header";
+const GENERATED_DESCRIPTION_ATTRIBUTE = "data-basic-table-generated-description";
+const MANAGED_HEADERS_ATTRIBUTE = "data-basic-table-managed-headers";
+const MANAGED_LABEL_ATTRIBUTE = "data-basic-table-managed-label";
+
+let nextTableInstanceId = 1;
+
+export function normalizeTableLabel(value) {
+    return value?.trim() || DEFAULT_LABEL;
+}
+
+export function normalizeTableCaption(value) {
+    return value?.trim() || "";
+}
+
+export function normalizeTableDescription(value) {
+    return value?.trim() || "";
+}
+
+export function normalizeTableRowHeaders(value) {
+    if (typeof value === "string") {
+        const normalized = value.trim().toLowerCase();
+        return normalized !== "false" && normalized !== "0";
+    }
+
+    return Boolean(value);
+}
+
+export function normalizeTableColumnHeaders(value) {
+    return normalizeTableRowHeaders(value);
+}
+
+export function normalizeTableRowHeaderColumn(value) {
+    const parsed = Number.parseInt(value ?? "", 10);
+    return Number.isInteger(parsed) && parsed > 0 ? parsed : 1;
+}
+
+export function normalizeTableCellSpan(value) {
+    const parsed = Number.parseInt(value ?? "", 10);
+    return Number.isInteger(parsed) && parsed > 0 ? parsed : 1;
+}
+
+function collectOwnedTables(root) {
+    return Array.from(root.querySelectorAll("table")).filter(
+        (table) => table instanceof HTMLTableElementBase && table.closest(root.tagName.toLowerCase()) === root,
+    );
+}
+
+function inferHeaderScope(
+    cell,
+    placement,
+    { columnHeadersEnabled = false, rowHeadersEnabled = false, rowHeaderColumnIndex = 0 } = {},
+) {
+    const explicitScope = cell.getAttribute("scope")?.trim().toLowerCase();
+
+    if (explicitScope) {
+        return explicitScope;
+    }
+
+    if (cell.hasAttribute(GENERATED_COLUMN_HEADER_ATTRIBUTE)) {
+        return "col";
+    }
+
+    if (placement.sectionTag === "thead") {
+        return "col";
+    }
+
+    if (columnHeadersEnabled && placement.rowIndex === 0) {
+        return "col";
+    }
+
+    if (
+        rowHeadersEnabled
+        && placement.sectionTag === "tbody"
+        && placement.columnIndex <= rowHeaderColumnIndex
+        && placement.columnIndex + placement.colSpan > rowHeaderColumnIndex
+    ) {
+        return "row";
+    }
+
+    return "";
+}
+
+function ensureHeaderId(cell, baseId, nextHeaderIndex) {
+    if (!cell.id) {
+        cell.id = `${baseId}-header-${nextHeaderIndex}`;
+    }
+
+    return cell.id;
+}
+
+function sortPlacementsInDocumentOrder(left, right) {
+    if (left.rowIndex !== right.rowIndex) {
+        return left.rowIndex - right.rowIndex;
+    }
+
+    return left.columnIndex - right.columnIndex;
+}
+
+function buildTablePlacements(table) {
+    const rows = Array.from(table.rows);
+    const grid = [];
+    const placements = [];
+
+    for (let rowIndex = 0; rowIndex < rows.length; rowIndex += 1) {
+        const row = rows[rowIndex];
+        let columnIndex = 0;
+
+        grid[rowIndex] ??= [];
+
+        for (const cell of Array.from(row.cells)) {
+            if (!(cell instanceof HTMLTableCellElementBase)) {
+                continue;
+            }
+
+            while (grid[rowIndex][columnIndex]) {
+                columnIndex += 1;
+            }
+
+            const rowSpan = normalizeTableCellSpan(cell.getAttribute("rowspan"));
+            const colSpan = normalizeTableCellSpan(cell.getAttribute("colspan"));
+            const section = row.parentElement;
+            const sectionTag = section instanceof HTMLTableSectionElementBase
+                ? section.tagName.toLowerCase()
+                : "table";
+
+            const placement = {
+                cell,
+                rowIndex,
+                columnIndex,
+                rowSpan,
+                colSpan,
+                sectionTag,
+            };
+
+            placements.push(placement);
+
+            for (let rowOffset = 0; rowOffset < rowSpan; rowOffset += 1) {
+                grid[rowIndex + rowOffset] ??= [];
+
+                for (let columnOffset = 0; columnOffset < colSpan; columnOffset += 1) {
+                    grid[rowIndex + rowOffset][columnIndex + columnOffset] = placement;
+                }
+            }
+
+            columnIndex += colSpan;
+        }
+    }
+
+    return placements;
+}
+
+function findCellAtColumnIndex(row, targetColumnIndex) {
+    let columnIndex = 0;
+
+    for (const cell of Array.from(row.cells)) {
+        if (!(cell instanceof HTMLTableCellElementBase)) {
+            continue;
+        }
+
+        const colSpan = normalizeTableCellSpan(cell.getAttribute("colspan"));
+
+        if (targetColumnIndex >= columnIndex && targetColumnIndex < columnIndex + colSpan) {
+            return cell;
+        }
+
+        columnIndex += colSpan;
+    }
+
+    return null;
+}
+
+function replaceCellTag(cell, tagName, generatedAttributeName) {
+    const replacement = document.createElement(tagName);
+
+    for (const attribute of Array.from(cell.attributes)) {
+        if (attribute.name === "headers" || attribute.name === MANAGED_HEADERS_ATTRIBUTE) {
+            continue;
+        }
+
+        replacement.setAttribute(attribute.name, attribute.value);
+    }
+
+    replacement.setAttribute(generatedAttributeName, "");
+    replacement.replaceChildren(...Array.from(cell.childNodes));
+    cell.parentElement?.replaceChild(replacement, cell);
+
+    return replacement;
+}
+
+function promoteFirstRowCellsToHeaders(table) {
+    const firstRow = table.rows[0];
+
+    if (!firstRow) {
+        return;
+    }
+
+    for (const cell of Array.from(firstRow.cells)) {
+        if (!(cell instanceof HTMLTableCellElementBase) || cell.tagName === "TH") {
+            continue;
+        }
+
+        replaceCellTag(cell, "th", GENERATED_COLUMN_HEADER_ATTRIBUTE);
+    }
+}
+
+function promoteBodyCellsToRowHeaders(table, rowHeaderColumnIndex) {
+    for (const section of Array.from(table.tBodies)) {
+        for (const row of Array.from(section.rows)) {
+            const targetCell = findCellAtColumnIndex(row, rowHeaderColumnIndex);
+
+            if (!(targetCell instanceof HTMLTableCellElementBase) || targetCell.tagName === "TH") {
+                continue;
+            }
+
+            replaceCellTag(targetCell, "th", GENERATED_ROW_HEADER_ATTRIBUTE);
+        }
+    }
+}
+
+function demoteManagedHeaders(table, generatedAttributeName) {
+    for (const cell of Array.from(table.querySelectorAll(`th[${generatedAttributeName}]`))) {
+        if (!(cell instanceof HTMLTableCellElementBase)) {
+            continue;
+        }
+
+        const replacement = document.createElement("td");
+
+        for (const attribute of Array.from(cell.attributes)) {
+            if (attribute.name === generatedAttributeName || attribute.name === "scope") {
+                continue;
+            }
+
+            replacement.setAttribute(attribute.name, attribute.value);
+        }
+
+        replacement.replaceChildren(...Array.from(cell.childNodes));
+        cell.parentElement?.replaceChild(replacement, cell);
+    }
+}
+
+function createGeneratedCaption(table) {
+    const caption = document.createElement("caption");
+    caption.setAttribute(GENERATED_CAPTION_ATTRIBUTE, "");
+    table.insertBefore(caption, table.firstChild);
+    return caption;
+}
+
+function syncTableCaption(table, captionText) {
+    const existingCaption = table.caption;
+    const generatedCaption = existingCaption?.hasAttribute(GENERATED_CAPTION_ATTRIBUTE)
+        ? existingCaption
+        : null;
+
+    if (!captionText) {
+        generatedCaption?.remove();
+        return;
+    }
+
+    if (existingCaption && !generatedCaption) {
+        return;
+    }
+
+    const caption = generatedCaption ?? createGeneratedCaption(table);
+    caption.textContent = captionText;
+}
+
+function syncFallbackAccessibleName(table, label) {
+    const hasCaption = Boolean(table.caption);
+    let hasManagedLabel = table.hasAttribute(MANAGED_LABEL_ATTRIBUTE);
+
+    if (hasManagedLabel && table.getAttribute("aria-label") !== label) {
+        table.removeAttribute(MANAGED_LABEL_ATTRIBUTE);
+        hasManagedLabel = false;
+    }
+
+    const hasOwnAriaLabel = table.hasAttribute("aria-label") && !hasManagedLabel;
+    const hasOwnLabelledBy = table.hasAttribute("aria-labelledby");
+
+    if (hasCaption || hasOwnAriaLabel || hasOwnLabelledBy) {
+        if (hasManagedLabel) {
+            table.removeAttribute("aria-label");
+            table.removeAttribute(MANAGED_LABEL_ATTRIBUTE);
+        }
+
+        return;
+    }
+
+    table.setAttribute("aria-label", label);
+    table.setAttribute(MANAGED_LABEL_ATTRIBUTE, "");
+}
+
+function getGeneratedDescription(root) {
+    const description = root.querySelector(`[${GENERATED_DESCRIPTION_ATTRIBUTE}]`);
+    return description instanceof HTMLElementBase && description.closest(root.tagName.toLowerCase()) === root
+        ? description
+        : null;
+}
+
+function getAriaReferenceTokens(value) {
+    return value?.trim() ? value.trim().split(/\s+/) : [];
+}
+
+function syncTableDescription(root, table, descriptionText, baseId) {
+    const existingDescription = getGeneratedDescription(root);
+
+    if (!descriptionText) {
+        if (existingDescription?.id) {
+            const tokens = getAriaReferenceTokens(table.getAttribute("aria-describedby")).filter(
+                (token) => token !== existingDescription.id,
+            );
+
+            if (tokens.length > 0) {
+                table.setAttribute("aria-describedby", tokens.join(" "));
+            } else {
+                table.removeAttribute("aria-describedby");
+            }
+        }
+
+        existingDescription?.remove();
+        return;
+    }
+
+    const description = existingDescription ?? document.createElement("p");
+
+    if (!existingDescription) {
+        description.setAttribute(GENERATED_DESCRIPTION_ATTRIBUTE, "");
+        description.hidden = true;
+        root.append(description);
+    }
+
+    if (!description.id) {
+        description.id = `${baseId}-description`;
+    }
+
+    description.textContent = descriptionText;
+
+    const tokens = getAriaReferenceTokens(table.getAttribute("aria-describedby")).filter(
+        (token) => token !== description.id,
+    );
+    tokens.push(description.id);
+    table.setAttribute("aria-describedby", tokens.join(" "));
+}
+
+export class TableElement extends HTMLElementBase {
+    static observedAttributes = [
+        "data-caption",
+        "data-column-headers",
+        "data-description",
+        "data-label",
+        "data-row-header-column",
+        "data-row-headers",
+    ];
+
+    #instanceId = `${TABLE_TAG_NAME}-${nextTableInstanceId++}`;
+    #observer = null;
+    #scheduledFrame = 0;
+
+    connectedCallback() {
+        this.#syncObserver();
+        this.refresh();
+    }
+
+    disconnectedCallback() {
+        this.#observer?.disconnect();
+        this.#observer = null;
+
+        if (this.#scheduledFrame !== 0 && typeof window !== "undefined") {
+            window.cancelAnimationFrame(this.#scheduledFrame);
+            this.#scheduledFrame = 0;
+        }
+    }
+
+    attributeChangedCallback() {
+        this.#scheduleRefresh();
+    }
+
+    refresh() {
+        const table = collectOwnedTables(this)[0] ?? null;
+
+        if (!(table instanceof HTMLTableElementBase)) {
+            return;
+        }
+
+        const label = normalizeTableLabel(this.getAttribute("data-label"));
+        const caption = normalizeTableCaption(this.getAttribute("data-caption"));
+        const description = normalizeTableDescription(this.getAttribute("data-description"));
+        const columnHeadersEnabled = normalizeTableColumnHeaders(
+            this.getAttribute("data-column-headers") ?? this.hasAttribute("data-column-headers"),
+        );
+        const rowHeaderColumnIndex = normalizeTableRowHeaderColumn(
+            this.getAttribute("data-row-header-column"),
+        ) - 1;
+        const rowHeadersEnabled = normalizeTableRowHeaders(
+            this.getAttribute("data-row-headers") ?? this.hasAttribute("data-row-header-column"),
+        );
+        const baseId = this.id || this.#instanceId;
+
+        syncTableCaption(table, caption);
+        syncFallbackAccessibleName(table, label);
+        syncTableDescription(this, table, description, baseId);
+
+        if (columnHeadersEnabled) {
+            promoteFirstRowCellsToHeaders(table);
+        } else {
+            demoteManagedHeaders(table, GENERATED_COLUMN_HEADER_ATTRIBUTE);
+        }
+
+        if (rowHeadersEnabled) {
+            demoteManagedHeaders(table, GENERATED_ROW_HEADER_ATTRIBUTE);
+            promoteBodyCellsToRowHeaders(table, rowHeaderColumnIndex);
+        } else {
+            demoteManagedHeaders(table, GENERATED_ROW_HEADER_ATTRIBUTE);
+        }
+
+        const placements = buildTablePlacements(table);
+        const headerPlacements = [];
+        let nextHeaderIndex = 1;
+
+        for (const placement of placements) {
+            if (placement.cell.tagName !== "TH") {
+                continue;
+            }
+
+            const scope = inferHeaderScope(placement.cell, placement, {
+                columnHeadersEnabled,
+                rowHeadersEnabled,
+                rowHeaderColumnIndex,
+            });
+
+            if (scope) {
+                placement.cell.setAttribute("scope", scope);
+            }
+
+            headerPlacements.push({
+                ...placement,
+                scope,
+                id: ensureHeaderId(placement.cell, this.id || this.#instanceId, nextHeaderIndex),
+            });
+            nextHeaderIndex += 1;
+        }
+
+        headerPlacements.sort(sortPlacementsInDocumentOrder);
+
+        for (const placement of placements) {
+            if (placement.cell.tagName !== "TD") {
+                continue;
+            }
+
+            const associatedHeaders = headerPlacements.filter((header) => {
+                switch (header.scope) {
+                    case "col":
+                    case "colgroup":
+                        return (
+                            header.rowIndex < placement.rowIndex
+                            && header.columnIndex < placement.columnIndex + placement.colSpan
+                            && header.columnIndex + header.colSpan > placement.columnIndex
+                        );
+                    case "row":
+                    case "rowgroup":
+                        return (
+                            header.columnIndex < placement.columnIndex
+                            && header.rowIndex < placement.rowIndex + placement.rowSpan
+                            && header.rowIndex + header.rowSpan > placement.rowIndex
+                        );
+                    default:
+                        return false;
+                }
+            });
+
+            if (associatedHeaders.length === 0) {
+                if (placement.cell.hasAttribute(MANAGED_HEADERS_ATTRIBUTE)) {
+                    placement.cell.removeAttribute("headers");
+                    placement.cell.removeAttribute(MANAGED_HEADERS_ATTRIBUTE);
+                }
+
+                continue;
+            }
+
+            if (
+                placement.cell.hasAttribute("headers")
+                && !placement.cell.hasAttribute(MANAGED_HEADERS_ATTRIBUTE)
+            ) {
+                continue;
+            }
+
+            placement.cell.setAttribute(
+                "headers",
+                associatedHeaders.map((header) => header.id).join(" "),
+            );
+            placement.cell.setAttribute(MANAGED_HEADERS_ATTRIBUTE, "");
+        }
+    }
+
+    #scheduleRefresh() {
+        if (this.#scheduledFrame !== 0 || typeof window === "undefined") {
+            return;
+        }
+
+        this.#scheduledFrame = window.requestAnimationFrame(() => {
+            this.#scheduledFrame = 0;
+            this.refresh();
+        });
+    }
+
+    #syncObserver() {
+        if (this.#observer || typeof MutationObserver === "undefined") {
+            return;
+        }
+
+        this.#observer = new MutationObserver(() => {
+            this.#scheduleRefresh();
+        });
+
+        this.#observer.observe(this, {
+            childList: true,
+            subtree: true,
+            characterData: true,
+            attributes: true,
+            attributeFilter: [
+                "aria-describedby",
+                "aria-label",
+                "aria-labelledby",
+                "colspan",
+                "headers",
+                "id",
+                "rowspan",
+                "scope",
+            ],
+        });
+    }
+}
+
+export function defineTable(registry = globalThis.customElements) {
+    if (!registry?.get || !registry?.define) {
+        return TableElement;
+    }
+
+    if (!registry.get(TABLE_TAG_NAME)) {
+        registry.define(TABLE_TAG_NAME, TableElement);
+    }
+
+    return TableElement;
+}

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

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

package/components/basic-table/register.js

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

package/components/basic-tabs/index.d.ts

@@ -4,7 +4,7 @@ export interface TabsTabState {
 }
 
 export type TabsActivation = "automatic" | "manual";
-export type TabsOrientation = "horizontal" | "vertical";
+export type TabsOrientation = "horizontal";
 
 /**
  * Public tag name registered by `defineTabs`.
@@ -12,7 +12,7 @@ export type TabsOrientation = "horizontal" | "vertical";
 export const TABS_TAG_NAME: "basic-tabs";
 
 /**
- * Normalizes unsupported orientation values back to `"horizontal"`.
+ * Normalizes orientation values back to `"horizontal"`.
  */
 export function normalizeTabsOrientation(
     value?: string | null,
@@ -48,7 +48,6 @@ export function findNextEnabledTabIndex(
  *
  * Attributes:
  * - `data-label`: fallback accessible name when the tablist has no own label
- * - `data-orientation`: sets the keyboard orientation and `aria-orientation`
  * - `data-activation`: `automatic` or `manual`
  * - `data-selected-index`: zero-based initially selected tab index
  */

package/components/basic-tabs/index.js

@@ -8,7 +8,6 @@ const DEFAULT_LABEL = "Faner";
 const DEFAULT_ACTIVATION = "automatic";
 const DEFAULT_ORIENTATION = "horizontal";
 const MANUAL_ACTIVATION = "manual";
-const VERTICAL_ORIENTATION = "vertical";
 const TABLIST_SELECTOR = "[data-tabs-list]";
 const TAB_SELECTOR = "[data-tab]";
 const PANEL_SELECTOR = "[data-tab-panel]";
@@ -16,9 +15,7 @@ const PANEL_SELECTOR = "[data-tab-panel]";
 let nextTabsInstanceId = 1;
 
 export function normalizeTabsOrientation(value) {
-    return value?.trim().toLowerCase() === VERTICAL_ORIENTATION
-        ? VERTICAL_ORIENTATION
-        : DEFAULT_ORIENTATION;
+    return DEFAULT_ORIENTATION;
 }
 
 export function normalizeTabsActivation(value) {
@@ -36,13 +33,7 @@ export function getInitialSelectedTabIndex(tabStates) {
         }
     }
 
-    for (let index = 0; index < tabStates.length; index += 1) {
-        if (!tabStates[index]?.disabled) {
-            return index;
-        }
-    }
-
-    return -1;
+    return findFirstEnabledTabIndex(tabStates);
 }
 
 export function findNextEnabledTabIndex(tabStates, startIndex, direction) {
@@ -80,6 +71,16 @@ function isTabDisabled(tab) {
     return tab.hasAttribute("disabled") || tab.getAttribute("aria-disabled") === "true";
 }
 
+function findFirstEnabledTabIndex(tabStates) {
+    for (let index = 0; index < tabStates.length; index += 1) {
+        if (!tabStates[index]?.disabled) {
+            return index;
+        }
+    }
+
+    return -1;
+}
+
 function findLastEnabledTabIndex(tabStates) {
     for (let index = tabStates.length - 1; index >= 0; index -= 1) {
         if (!tabStates[index]?.disabled) {
@@ -94,7 +95,6 @@ export class TabsElement extends HTMLElementBase {
     static observedAttributes = [
         "data-activation",
         "data-label",
-        "data-orientation",
         "data-selected-index",
     ];
 
@@ -164,7 +164,6 @@ export class TabsElement extends HTMLElementBase {
         const tabStates = this.#getTabStates();
         const currentIndex = this.#tabs.indexOf(currentTab);
         const activation = this.#getActivation();
-        const orientation = this.#getOrientation();
         let nextIndex = -1;
 
         if (currentIndex === -1 || currentIndex >= tabStates.length) {
@@ -173,27 +172,13 @@ export class TabsElement extends HTMLElementBase {
 
         switch (event.key) {
             case "ArrowRight":
-                if (orientation === DEFAULT_ORIENTATION) {
-                    nextIndex = findNextEnabledTabIndex(tabStates, currentIndex, 1);
-                }
+                nextIndex = findNextEnabledTabIndex(tabStates, currentIndex, 1);
                 break;
             case "ArrowLeft":
-                if (orientation === DEFAULT_ORIENTATION) {
-                    nextIndex = findNextEnabledTabIndex(tabStates, currentIndex, -1);
-                }
-                break;
-            case "ArrowDown":
-                if (orientation === VERTICAL_ORIENTATION) {
-                    nextIndex = findNextEnabledTabIndex(tabStates, currentIndex, 1);
-                }
-                break;
-            case "ArrowUp":
-                if (orientation === VERTICAL_ORIENTATION) {
-                    nextIndex = findNextEnabledTabIndex(tabStates, currentIndex, -1);
-                }
+                nextIndex = findNextEnabledTabIndex(tabStates, currentIndex, -1);
                 break;
             case "Home":
-                nextIndex = getInitialSelectedTabIndex(tabStates);
+                nextIndex = findFirstEnabledTabIndex(tabStates);
                 break;
             case "End":
                 nextIndex = findLastEnabledTabIndex(tabStates);
@@ -248,12 +233,6 @@ export class TabsElement extends HTMLElementBase {
         return this.getAttribute("data-label")?.trim() || DEFAULT_LABEL;
     }
 
-    #getOrientation() {
-        return normalizeTabsOrientation(
-            this.getAttribute("data-orientation") ?? this.#tabList?.getAttribute("aria-orientation"),
-        );
-    }
-
     #getTabStates(configuredSelectedIndex = null) {
         const pairCount = Math.min(this.#tabs.length, this.#panels.length);
 
@@ -292,7 +271,6 @@ export class TabsElement extends HTMLElementBase {
             return;
         }
 
-        const orientation = this.#getOrientation();
         const pairCount = Math.min(this.#tabs.length, this.#panels.length);
         const baseId = this.id || this.#instanceId;
 
@@ -301,7 +279,7 @@ export class TabsElement extends HTMLElementBase {
         }
 
         this.#tabList.setAttribute("role", "tablist");
-        this.#tabList.setAttribute("aria-orientation", orientation);
+        this.#tabList.setAttribute("aria-orientation", DEFAULT_ORIENTATION);
 
         for (let index = 0; index < this.#tabs.length; index += 1) {
             const tab = this.#tabs[index];