@incursa/ui-kit 1.5.0 → 1.7.0

package/dist/web-components/components/collections.js

@@ -0,0 +1,272 @@
+import { IncElement } from "../base-element.js";
+import {
+    addClass,
+    ensureNode,
+    normalizeToken,
+    removeMatchingClasses,
+} from "./dom-helpers.js";
+
+const FALSE_TOKENS = new Set(["false", "0", "off", "no"]);
+
+function toBoolean(value, fallback = false) {
+    if (value == null) {
+        return fallback;
+    }
+
+    return !FALSE_TOKENS.has(String(value).toLowerCase());
+}
+
+export class IncListGroupElement extends IncElement {
+    static get observedAttributes() {
+        return ["flush", "numbered", "dense", "interactive", "label"];
+    }
+
+    connectedCallback() {
+        addClass(this, "inc-list-group");
+        this.sync();
+    }
+
+    attributeChangedCallback() {
+        if (this.isConnected) {
+            this.sync();
+        }
+    }
+
+    sync() {
+        addClass(this, "inc-list-group");
+        this.setAttribute("part", "list-group");
+        removeMatchingClasses(this, (token) => token.startsWith("inc-list-group--"));
+
+        if (toBoolean(this.getAttribute("flush"))) {
+            this.classList.add("inc-list-group--flush");
+        }
+        if (toBoolean(this.getAttribute("numbered"))) {
+            this.classList.add("inc-list-group--numbered");
+        }
+        if (toBoolean(this.getAttribute("dense"))) {
+            this.classList.add("inc-list-group--dense");
+        }
+        if (toBoolean(this.getAttribute("interactive"))) {
+            this.classList.add("inc-list-group--interactive");
+        }
+
+        this.setAttribute("role", "list");
+        const label = this.getAttribute("label") || this.getAttribute("aria-label") || "";
+        if (label) {
+            this.setAttribute("aria-label", label);
+        } else {
+            this.removeAttribute("aria-label");
+        }
+
+        Array.from(this.children).forEach((node) => {
+            if (!(node instanceof Element)) {
+                return;
+            }
+
+            if (node.getAttribute("slot") === "item") {
+                node.removeAttribute("slot");
+            }
+
+            node.classList.add("inc-list-group__item");
+            if (toBoolean(this.getAttribute("interactive")) || node.matches("a[href], button:not([disabled])")) {
+                node.classList.add("inc-list-group__item--action");
+            }
+            if (!node.hasAttribute("role") && !node.matches("a[href], button")) {
+                node.setAttribute("role", "listitem");
+            }
+        });
+    }
+}
+
+export class IncKeyValueGridElement extends IncElement {
+    static get observedAttributes() {
+        return ["columns", "dense"];
+    }
+
+    connectedCallback() {
+        addClass(this, "inc-key-value-grid");
+        this.sync();
+    }
+
+    attributeChangedCallback() {
+        if (this.isConnected) {
+            this.sync();
+        }
+    }
+
+    sync() {
+        addClass(this, "inc-key-value-grid");
+        this.setAttribute("part", "grid");
+        const columns = Number.parseInt(this.getAttribute("columns") || "", 10);
+        if (Number.isFinite(columns) && columns > 0) {
+            this.style.gridTemplateColumns = `repeat(${columns}, minmax(0, 1fr))`;
+        } else {
+            this.style.removeProperty("grid-template-columns");
+        }
+
+        if (toBoolean(this.getAttribute("dense"))) {
+            this.style.rowGap = "0.5rem";
+            this.style.columnGap = "1rem";
+        } else {
+            this.style.removeProperty("row-gap");
+            this.style.removeProperty("column-gap");
+        }
+    }
+}
+
+export class IncKeyValueElement extends IncElement {
+    static get observedAttributes() {
+        return ["label", "value", "meta", "inline", "dense", "card", "variant"];
+    }
+
+    connectedCallback() {
+        addClass(this, "inc-key-value");
+        this.sync();
+    }
+
+    attributeChangedCallback() {
+        if (this.isConnected) {
+            this.sync();
+        }
+    }
+
+    sync() {
+        addClass(this, "inc-key-value");
+        this.setAttribute("part", "key-value");
+        removeMatchingClasses(this, (token) => token.startsWith("inc-key-value--"));
+
+        const variant = normalizeToken(this.getAttribute("variant"));
+        const card = toBoolean(this.getAttribute("card")) || variant === "card";
+        if (card) {
+            this.classList.add("inc-key-value--card");
+        }
+        if (toBoolean(this.getAttribute("inline"))) {
+            this.classList.add("inc-key-value--inline");
+        }
+        if (toBoolean(this.getAttribute("dense"))) {
+            this.classList.add("inc-key-value--dense");
+        }
+
+        const definition = ensureNode(this, ".inc-key-value__definition", () => {
+            const node = document.createElement("dl");
+            node.className = "inc-key-value__definition";
+            node.innerHTML = [
+                '<dt class="inc-key-value__label" part="label"></dt>',
+                '<dd class="inc-key-value__value" part="value"></dd>',
+                '<div class="inc-key-value__meta" part="meta"></div>',
+            ].join("");
+            return node;
+        });
+        const label = ensureNode(definition, ".inc-key-value__label", () => {
+            const node = document.createElement("dt");
+            node.className = "inc-key-value__label";
+            node.setAttribute("part", "label");
+            return node;
+        });
+        const value = ensureNode(definition, ".inc-key-value__value", () => {
+            const node = document.createElement("dd");
+            node.className = "inc-key-value__value";
+            node.setAttribute("part", "value");
+            return node;
+        });
+        const meta = ensureNode(definition, ".inc-key-value__meta", () => {
+            const node = document.createElement("div");
+            node.className = "inc-key-value__meta";
+            node.setAttribute("part", "meta");
+            return node;
+        });
+
+        Array.from(this.childNodes).forEach((node) => {
+            if (node === definition) {
+                return;
+            }
+
+            if (node.nodeType === Node.ELEMENT_NODE && node.getAttribute("slot") === "label") {
+                node.removeAttribute("slot");
+                label.append(node);
+                return;
+            }
+
+            if (node.nodeType === Node.ELEMENT_NODE && node.getAttribute("slot") === "value") {
+                node.removeAttribute("slot");
+                value.append(node);
+                return;
+            }
+
+            if (node.nodeType === Node.ELEMENT_NODE && node.getAttribute("slot") === "meta") {
+                node.removeAttribute("slot");
+                meta.append(node);
+                return;
+            }
+
+            if (value.childNodes.length === 0 || node.nodeType === Node.TEXT_NODE) {
+                value.append(node);
+                return;
+            }
+
+            meta.append(node);
+        });
+
+        const labelText = this.getAttribute("label") || "";
+        const valueText = this.getAttribute("value") || "";
+        const metaText = this.getAttribute("meta") || "";
+
+        if (!label.childNodes.length) {
+            label.textContent = labelText;
+        }
+        if (!value.childNodes.length) {
+            value.textContent = valueText;
+        }
+        if (!meta.childNodes.length) {
+            meta.textContent = metaText;
+        }
+    }
+}
+
+export const collectionDefinitions = [
+    ["inc-list-group", IncListGroupElement],
+    ["inc-key-value-grid", IncKeyValueGridElement],
+    ["inc-key-value", IncKeyValueElement],
+];
+
+export const collectionComponents = {
+    IncListGroupElement,
+    IncKeyValueGridElement,
+    IncKeyValueElement,
+};
+
+function defineCollectionComponents(registry = globalThis.customElements) {
+    if (!registry || typeof registry.define !== "function" || typeof registry.get !== "function") {
+        return [];
+    }
+
+    const defined = [];
+    for (const [tagName, ctor] of collectionDefinitions) {
+        if (!registry.get(tagName)) {
+            registry.define(tagName, ctor);
+            defined.push(tagName);
+        }
+    }
+
+    return defined;
+}
+
+if (typeof module !== "undefined" && module.exports) {
+    module.exports = {
+        defineCollectionComponents,
+        collectionDefinitions,
+        collectionComponents,
+        IncListGroupElement,
+        IncKeyValueGridElement,
+        IncKeyValueElement,
+    };
+}
+
+if (typeof globalThis !== "undefined") {
+    const namespace = globalThis.IncWebComponents || (globalThis.IncWebComponents = {});
+    namespace.collections = Object.assign({}, namespace.collections, {
+        defineCollectionComponents,
+        collectionDefinitions,
+        components: collectionComponents,
+    });
+}

package/dist/web-components/components/dom-helpers.js

@@ -0,0 +1,46 @@
+const ElementRef = typeof Element === "undefined" ? null : Element;
+
+function normalizeToken(value) {
+    return String(value ?? "").trim().toLowerCase();
+}
+
+function addClass(node, className) {
+    if (ElementRef && node instanceof ElementRef && className) {
+        node.classList.add(className);
+    }
+}
+
+function removeMatchingClasses(node, predicate) {
+    if (!ElementRef || !(node instanceof ElementRef)) {
+        return;
+    }
+
+    Array.from(node.classList)
+        .filter((token) => predicate(token))
+        .forEach((token) => node.classList.remove(token));
+}
+
+function moveChildNodes(source, target, predicate = () => true) {
+    Array.from(source.childNodes)
+        .filter((node) => predicate(node))
+        .forEach((node) => target.append(node));
+}
+
+function ensureNode(parent, selector, build) {
+    const existing = parent.querySelector(`:scope > ${selector}`);
+    if (existing) {
+        return existing;
+    }
+
+    const node = build();
+    parent.append(node);
+    return node;
+}
+
+export {
+    addClass,
+    ensureNode,
+    moveChildNodes,
+    normalizeToken,
+    removeMatchingClasses,
+};

package/dist/web-components/components/feedback.js

@@ -1,5 +1,15 @@
 const THEME_MODES = ["light", "dark", "system"];
 const DEFAULT_THEME_STORAGE_KEY = "inc-theme-mode";
+const BADGE_TONES = new Set(["primary", "secondary", "success", "danger", "warning", "info"]);
+const SPINNER_VARIANTS = new Set(["border", "grow"]);
+const AUTO_REFRESH_PAUSE_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+  <path d="M4 3h3v10H4zM9 3h3v10H9z"></path>
+</svg>`.trim();
+const AUTO_REFRESH_PLAY_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+  <path d="M4 3.5v9l8-4.5-8-4.5z"></path>
+</svg>`.trim();
 const HostElement = typeof HTMLElement === "undefined" ? class {} : HTMLElement;
 const themeSubscribers = new Set();
 
@@ -32,6 +42,10 @@ function toPositiveInt(value) {
     return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
 }
 
+function normalizeToken(value) {
+    return String(value ?? "").trim().toLowerCase();
+}
+
 function getSystemTheme() {
     if (!window.matchMedia) {
         return "light";
@@ -281,6 +295,59 @@ export class IncStatePanel extends HostElement {
     }
 }
 
+export class IncBadgeElement extends HostElement {
+    static observedAttributes = ["tone", "variant", "pill"];
+
+    connectedCallback() {
+        this.classList.add("inc-badge");
+        this.#sync();
+    }
+
+    attributeChangedCallback() {
+        this.#sync();
+    }
+
+    get tone() {
+        return this.getAttribute("tone") || this.getAttribute("variant") || "";
+    }
+
+    set tone(value) {
+        if (value == null || value === "") {
+            this.removeAttribute("tone");
+            return;
+        }
+
+        this.setAttribute("tone", String(value));
+    }
+
+    get pill() {
+        return this.hasAttribute("pill");
+    }
+
+    set pill(value) {
+        if (value) {
+            this.setAttribute("pill", "");
+        } else {
+            this.removeAttribute("pill");
+        }
+    }
+
+    #sync() {
+        this.classList.add("inc-badge");
+        BADGE_TONES.forEach((tone) => this.classList.remove(`inc-badge--${tone}`));
+        this.classList.remove("inc-badge--pill");
+
+        const tone = normalizeToken(this.tone);
+        if (BADGE_TONES.has(tone)) {
+            this.classList.add(`inc-badge--${tone}`);
+        }
+
+        if (this.pill) {
+            this.classList.add("inc-badge--pill");
+        }
+    }
+}
+
 export class IncLiveRegion extends HostElement {
     static observedAttributes = ["politeness", "atomic", "busy"];
 
@@ -356,6 +423,107 @@ export class IncLiveRegion extends HostElement {
     }
 }
 
+export class IncSpinnerElement extends HostElement {
+    static observedAttributes = ["variant", "tone", "size", "label"];
+
+    connectedCallback() {
+        this.#sync();
+    }
+
+    attributeChangedCallback() {
+        this.#sync();
+    }
+
+    get variant() {
+        return this.getAttribute("variant") || "";
+    }
+
+    set variant(value) {
+        if (value == null || value === "") {
+            this.removeAttribute("variant");
+            return;
+        }
+
+        this.setAttribute("variant", String(value));
+    }
+
+    get tone() {
+        return this.getAttribute("tone") || "";
+    }
+
+    set tone(value) {
+        if (value == null || value === "") {
+            this.removeAttribute("tone");
+            return;
+        }
+
+        this.setAttribute("tone", String(value));
+    }
+
+    get size() {
+        return this.getAttribute("size") || "";
+    }
+
+    set size(value) {
+        if (value == null || value === "") {
+            this.removeAttribute("size");
+            return;
+        }
+
+        this.setAttribute("size", String(value));
+    }
+
+    get label() {
+        return this.getAttribute("label") || "";
+    }
+
+    set label(value) {
+        if (value == null || value === "") {
+            this.removeAttribute("label");
+            return;
+        }
+
+        this.setAttribute("label", String(value));
+    }
+
+    #sync() {
+        this.classList.add("inc-spinner");
+
+        SPINNER_VARIANTS.forEach((variant) => {
+            this.classList.remove(`inc-spinner--${variant}`);
+            this.classList.remove(`inc-spinner--${variant}--sm`);
+            BADGE_TONES.forEach((tone) => this.classList.remove(`inc-spinner--${variant}--${tone}`));
+        });
+
+        const variant = normalizeToken(this.variant) || "border";
+        const resolvedVariant = SPINNER_VARIANTS.has(variant) ? variant : "border";
+        this.classList.add(`inc-spinner--${resolvedVariant}`);
+
+        if (normalizeToken(this.size) === "sm") {
+            this.classList.add(`inc-spinner--${resolvedVariant}--sm`);
+        }
+
+        const tone = normalizeToken(this.tone);
+        if (BADGE_TONES.has(tone)) {
+            this.classList.add(`inc-spinner--${resolvedVariant}--${tone}`);
+        }
+
+        const label = this.label.trim();
+        if (label) {
+            this.removeAttribute("aria-hidden");
+            this.setAttribute("role", "status");
+            this.setAttribute("aria-live", "polite");
+            this.setAttribute("aria-label", label);
+            return;
+        }
+
+        this.setAttribute("aria-hidden", "true");
+        this.removeAttribute("role");
+        this.removeAttribute("aria-live");
+        this.removeAttribute("aria-label");
+    }
+}
+
 export class IncAutoRefresh extends HostElement {
     static observedAttributes = [
         "seconds",
@@ -517,6 +685,10 @@ export class IncAutoRefresh extends HostElement {
         }
 
         this.innerHTML = `
+<button type="button" class="inc-auto-refresh__toggle inc-btn inc-btn--outline-secondary inc-btn--micro" part="toggle">
+  <span class="inc-auto-refresh__toggle-icon" aria-hidden="true"></span>
+  <span class="inc-auto-refresh__toggle-text"></span>
+</button>
 <span class="inc-auto-refresh__countdown" part="countdown">
   <span class="inc-auto-refresh__label" part="label"></span>
   <span class="inc-auto-refresh__value" part="value"></span>
@@ -524,9 +696,6 @@ export class IncAutoRefresh extends HostElement {
 <span class="inc-auto-refresh__status" part="status" hidden>
   <span class="inc-auto-refresh__status-text"></span>
 </span>
-<button type="button" class="inc-auto-refresh__toggle inc-btn inc-btn--outline-secondary inc-btn--micro" part="toggle">
-  <span class="inc-auto-refresh__toggle-text"></span>
-</button>
         `.trim();
 
         this.#parts = this.#getParts();
@@ -540,6 +709,7 @@ export class IncAutoRefresh extends HostElement {
             status: this.querySelector(".inc-auto-refresh__status"),
             statusText: this.querySelector(".inc-auto-refresh__status-text"),
             toggle: this.querySelector(".inc-auto-refresh__toggle"),
+            toggleIcon: this.querySelector(".inc-auto-refresh__toggle-icon"),
             toggleText: this.querySelector(".inc-auto-refresh__toggle-text"),
         };
     }
@@ -700,6 +870,10 @@ export class IncAutoRefresh extends HostElement {
         if (this.#parts.toggleText) {
             this.#parts.toggleText.textContent = actionLabel;
         }
+
+        if (this.#parts.toggleIcon instanceof HTMLElement) {
+            this.#parts.toggleIcon.innerHTML = this.#isPaused ? AUTO_REFRESH_PLAY_ICON : AUTO_REFRESH_PAUSE_ICON;
+        }
     }
 
     #stop() {
@@ -1041,8 +1215,10 @@ export class IncThemeSwitcher extends HostElement {
 }
 
 export const feedbackDefinitions = [
+    ["inc-badge", IncBadgeElement],
     ["inc-state-panel", IncStatePanel],
     ["inc-live-region", IncLiveRegion],
+    ["inc-spinner", IncSpinnerElement],
     ["inc-auto-refresh", IncAutoRefresh],
     ["inc-theme-switcher", IncThemeSwitcher],
 ];
@@ -1065,6 +1241,8 @@ if (typeof globalThis !== "undefined") {
         defineFeedbackComponents,
         feedbackDefinitions,
         components: {
+            IncBadgeElement,
+            IncSpinnerElement,
             IncStatePanel,
             IncLiveRegion,
             IncAutoRefresh,