@u-elements/u-tabs 0.0.12 → 0.1.0

package/dist/u-tabs.cjs

@@ -46,9 +46,11 @@ var mutationObserver = (element, options) => {
   }
 };
 var asButton = (event) => {
-  const isClick = "key" in event && (event.key === " " || event.key === "Enter");
-  if (isClick) event.preventDefault();
-  if (isClick && event.target instanceof HTMLElement) event.target.click();
+  var _a2;
+  const isClick = event.key === " " || event.key === "Enter";
+  if (isClick) (_a2 = event.preventDefault) == null ? void 0 : _a2.call(event);
+  if (isClick && event.target instanceof HTMLElement)
+    event.target.dispatchEvent(new MouseEvent("click", event));
   return isClick;
 };
 var getRoot = (node) => {
@@ -62,9 +64,9 @@ var useId = (el) => {
   if (!el.id) el.id = `:${el.nodeName.toLowerCase()}${(++id).toString(32)}`;
   return el.id;
 };
-var createElement = (tagName, text, attrs) => {
+var createElement = (tagName, content, attrs) => {
   const el = document.createElement(tagName);
-  if (text) el.textContent = text;
+  if (content) el[tagName === "style" ? "textContent" : "innerHTML"] = content;
   return el;
 };
 var customElements = {
@@ -83,13 +85,30 @@ var UHTMLTabShadowRoot = declarativeShadowRoot(UHTMLTabStyle);
 var UHTMLTabPanelShadowRoot = declarativeShadowRoot(UHTMLTabPanelStyle);
 var ARIA_CONTROLS = "aria-controls";
 var ARIA_SELECTED = "aria-selected";
+var ATTR_TABS = "data-utabs";
 var UHTMLTabsElement = class extends UHTMLElement {
   constructor() {
     super();
+    attr(this, ATTR_TABS, "");
     attachStyle(this, UHTMLTabsStyle);
   }
+  connectedCallback() {
+    mutationObserver(this, {
+      attributeFilter: ["role"],
+      attributes: true,
+      childList: true,
+      subtree: true
+    });
+  }
+  handleEvent() {
+    var _a2;
+    (_a2 = this.tabList) == null ? void 0 : _a2.handleEvent();
+  }
+  disconnectedCallback() {
+    mutationObserver(this, false);
+  }
   get tabList() {
-    return queryWithoutNested("u-tablist", this)[0] || null;
+    return queryWithoutNested("tablist", this)[0] || null;
   }
   get selectedIndex() {
     return getSelectedIndex(this.tabs);
@@ -98,10 +117,10 @@ var UHTMLTabsElement = class extends UHTMLElement {
     setSelected(this.tabs[index]);
   }
   get tabs() {
-    return queryWithoutNested("u-tab", this);
+    return queryWithoutNested("tab", this);
   }
   get panels() {
-    return queryWithoutNested("u-tabpanel", this);
+    return queryWithoutNested("tabpanel", this);
   }
 };
 var UHTMLTabListElement = class extends UHTMLElement {
@@ -113,13 +132,14 @@ var UHTMLTabListElement = class extends UHTMLElement {
     attr(this, "role", "tablist");
     on(this, "click,keydown", this);
     mutationObserver(this, { childList: true });
-    if (this.tabs.length) this.handleEvent();
+    requestAnimationFrame(() => this.handleEvent());
   }
   disconnectedCallback() {
     off(this, "click,keydown", this);
     mutationObserver(this, false);
   }
   handleEvent(event) {
+    var _a2, _b;
     if (!event || event.type === "mutation") {
       const tab = this.tabs[Math.max(this.selectedIndex, 0)];
       return tab == null ? void 0 : tab.setAttribute(ARIA_SELECTED, "true");
@@ -140,20 +160,20 @@ var UHTMLTabListElement = class extends UHTMLElement {
       else if (key === "Tab") next = getSelectedIndex(tabs);
       else return;
       setTimeout(() => {
-        tabs[prev].tabIndex = -1;
-        tabs[next].tabIndex = 0;
+        attr(tabs[prev], "tabindex", "-1");
+        attr(tabs[next], "tabindex", "0");
       });
       if (key !== "Tab") {
         event.preventDefault();
-        tabs[next].focus();
+        (_b = (_a2 = tabs[next]).focus) == null ? void 0 : _b.call(_a2);
       }
     }
   }
   get tabsElement() {
-    return this.closest("u-tabs");
+    return getTabsElement(this);
   }
   get tabs() {
-    return this.querySelectorAll("u-tab");
+    return getTabs(this);
   }
   get selectedIndex() {
     return getSelectedIndex(this.tabs);
@@ -174,31 +194,32 @@ var UHTMLTabElement = class extends UHTMLElement {
   }
   connectedCallback() {
     attr(this, "role", "tab");
-    this.tabIndex = this.selected ? 0 : -1;
+    attr(this, "tabindex", this.selected ? "0" : "-1");
   }
   attributeChangedCallback() {
     if (!SKIP_ATTR_CHANGE && this.selected && this.tabList) {
       SKIP_ATTR_CHANGE = true;
-      const tabs = [...this.tabList.querySelectorAll("u-tab")];
-      const panels = queryWithoutNested("u-tabpanel", this.tabsElement || this);
-      const nextPanel = getPanel(this, panels[tabs.indexOf(this)]);
+      const tabs = this.tabList ? getTabs(this.tabList) : [];
+      const panels = queryWithoutNested("tabpanel", this.tabsElement || this);
+      const nextPanel = getPanel(this, panels[[...tabs].indexOf(this)]);
       if (nextPanel) attr(nextPanel, SAFE_LABELLEDBY, useId(this));
-      tabs.forEach((tab, index) => {
-        const panel = getPanel(tab, panels[index]);
-        tab.tabIndex = tab === this ? 0 : -1;
+      let i = 0;
+      for (const tab of tabs) {
+        const panel = getPanel(tab, panels[i++]);
+        attr(tab, "tabindex", tab === this ? "0" : "-1");
         attr(tab, ARIA_SELECTED, `${tab === this}`);
-        attr(tab, ARIA_CONTROLS, (panel == null ? void 0 : panel.id) || null);
+        if (panel == null ? void 0 : panel.id) attr(tab, ARIA_CONTROLS, panel.id);
         if (panel) panel.hidden = panel !== nextPanel;
-      });
+      }
       SKIP_ATTR_CHANGE = false;
     }
   }
   get tabsElement() {
-    return this.closest("u-tabs");
+    return getTabsElement(this);
   }
   get tabList() {
     const tablist = this.parentElement;
-    return (tablist == null ? void 0 : tablist.nodeName) === "U-TABLIST" ? tablist : null;
+    return (tablist == null ? void 0 : tablist.getAttribute("role")) === "tablist" ? tablist : null;
   }
   get selected() {
     return attr(this, ARIA_SELECTED) === "true";
@@ -208,8 +229,8 @@ var UHTMLTabElement = class extends UHTMLElement {
   }
   /** Retrieves the ordinal position of an tab in a tablist. */
   get index() {
-    const tabList = this.tabList;
-    return tabList ? [...tabList.querySelectorAll("u-tab")].indexOf(this) : 0;
+    const tablist = this.tabList;
+    return tablist ? [...getTabs(tablist)].indexOf(this) : 0;
   }
   get panel() {
     return getPanel(this);
@@ -235,20 +256,21 @@ var UHTMLTabPanelElement = class extends UHTMLElement {
     attr(this, "tabindex", hidden || isFocusable(this.firstChild) ? null : "0");
   }
   get tabsElement() {
-    return this.closest("u-tabs");
+    return getTabsElement(this);
   }
   get tabs() {
-    const css = `u-tab[${ARIA_CONTROLS}="${this.id}"]`;
-    return getRoot(this).querySelectorAll(css);
+    return getRoot(this).querySelectorAll(
+      `[role="tab"][${ARIA_CONTROLS}="${this.id}"]`
+    );
   }
 };
-var queryWithoutNested = (tag, self) => self.querySelectorAll(`${tag}:not(:scope u-tabpanel ${tag})`);
-var getPanel = (tab, panel) => {
-  const id2 = attr(tab, ARIA_CONTROLS) || useId(panel);
-  const el = getRoot(tab).getElementById(id2);
-  return (el == null ? void 0 : el.nodeName) === "U-TABPANEL" ? el : null;
-};
+var queryWithoutNested = (role, self) => self.querySelectorAll(
+  `[role="${role}"]:not(:scope [role="tabpanel"] [role="${role}"])`
+);
+var getPanel = (tab, panel) => getRoot(tab).getElementById(attr(tab, ARIA_CONTROLS) || useId(panel));
 var getSelectedIndex = (tabs) => [...tabs].findIndex((tab) => attr(tab, ARIA_SELECTED) === "true");
+var getTabsElement = (self) => self.closest(`[${ATTR_TABS}]`);
+var getTabs = (self) => self.querySelectorAll(`:scope > [role="tab"]`);
 var setSelected = (tab) => tab && attr(tab, "aria-disabled") !== "true" && attr(tab, "aria-selected", "true");
 var isFocusable = (el) => el instanceof Element && !el.matches(':disabled,[tabindex^="-"]') && el.matches(
   `[contenteditable],[controls],[href],[tabindex],input:not([type="hidden"]),select,textarea,button,summary,iframe`

package/dist/u-tabs.d.cts

@@ -25,6 +25,9 @@ declare const UHTMLTabPanelShadowRoot: string;
  */
 declare class UHTMLTabsElement extends UHTMLElement {
     constructor();
+    connectedCallback(): void;
+    handleEvent(): void;
+    disconnectedCallback(): void;
     get tabList(): UHTMLTabListElement | null;
     get selectedIndex(): number;
     set selectedIndex(index: number);
@@ -40,7 +43,7 @@ declare class UHTMLTabListElement extends UHTMLElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     handleEvent(event?: Event): void;
-    get tabsElement(): UHTMLTabsElement | null;
+    get tabsElement(): HTMLElement | null;
     get tabs(): NodeListOf<UHTMLTabElement>;
     get selectedIndex(): number;
     set selectedIndex(index: number);
@@ -56,7 +59,7 @@ declare class UHTMLTabElement extends UHTMLElement {
     set selected(value: boolean);
     /** Retrieves the ordinal position of an tab in a tablist. */
     get index(): number;
-    get panel(): UHTMLTabPanelElement | null;
+    get panel(): HTMLElement | null;
 }
 /**
  * The `<u-tabpanel>` HTML element is a container for the resources of layered content associated with a `<u-tab>`.

package/dist/u-tabs.d.ts

@@ -25,6 +25,9 @@ declare const UHTMLTabPanelShadowRoot: string;
  */
 declare class UHTMLTabsElement extends UHTMLElement {
     constructor();
+    connectedCallback(): void;
+    handleEvent(): void;
+    disconnectedCallback(): void;
     get tabList(): UHTMLTabListElement | null;
     get selectedIndex(): number;
     set selectedIndex(index: number);
@@ -40,7 +43,7 @@ declare class UHTMLTabListElement extends UHTMLElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     handleEvent(event?: Event): void;
-    get tabsElement(): UHTMLTabsElement | null;
+    get tabsElement(): HTMLElement | null;
     get tabs(): NodeListOf<UHTMLTabElement>;
     get selectedIndex(): number;
     set selectedIndex(index: number);
@@ -56,7 +59,7 @@ declare class UHTMLTabElement extends UHTMLElement {
     set selected(value: boolean);
     /** Retrieves the ordinal position of an tab in a tablist. */
     get index(): number;
-    get panel(): UHTMLTabPanelElement | null;
+    get panel(): HTMLElement | null;
 }
 /**
  * The `<u-tabpanel>` HTML element is a container for the resources of layered content associated with a `<u-tab>`.

package/dist/u-tabs.js

@@ -44,9 +44,11 @@ var mutationObserver = (element, options) => {
   }
 };
 var asButton = (event) => {
-  const isClick = "key" in event && (event.key === " " || event.key === "Enter");
-  if (isClick) event.preventDefault();
-  if (isClick && event.target instanceof HTMLElement) event.target.click();
+  var _a2;
+  const isClick = event.key === " " || event.key === "Enter";
+  if (isClick) (_a2 = event.preventDefault) == null ? void 0 : _a2.call(event);
+  if (isClick && event.target instanceof HTMLElement)
+    event.target.dispatchEvent(new MouseEvent("click", event));
   return isClick;
 };
 var getRoot = (node) => {
@@ -60,9 +62,9 @@ var useId = (el) => {
   if (!el.id) el.id = `:${el.nodeName.toLowerCase()}${(++id).toString(32)}`;
   return el.id;
 };
-var createElement = (tagName, text, attrs) => {
+var createElement = (tagName, content, attrs) => {
   const el = document.createElement(tagName);
-  if (text) el.textContent = text;
+  if (content) el[tagName === "style" ? "textContent" : "innerHTML"] = content;
   return el;
 };
 var customElements = {
@@ -81,13 +83,30 @@ var UHTMLTabShadowRoot = declarativeShadowRoot(UHTMLTabStyle);
 var UHTMLTabPanelShadowRoot = declarativeShadowRoot(UHTMLTabPanelStyle);
 var ARIA_CONTROLS = "aria-controls";
 var ARIA_SELECTED = "aria-selected";
+var ATTR_TABS = "data-utabs";
 var UHTMLTabsElement = class extends UHTMLElement {
   constructor() {
     super();
+    attr(this, ATTR_TABS, "");
     attachStyle(this, UHTMLTabsStyle);
   }
+  connectedCallback() {
+    mutationObserver(this, {
+      attributeFilter: ["role"],
+      attributes: true,
+      childList: true,
+      subtree: true
+    });
+  }
+  handleEvent() {
+    var _a2;
+    (_a2 = this.tabList) == null ? void 0 : _a2.handleEvent();
+  }
+  disconnectedCallback() {
+    mutationObserver(this, false);
+  }
   get tabList() {
-    return queryWithoutNested("u-tablist", this)[0] || null;
+    return queryWithoutNested("tablist", this)[0] || null;
   }
   get selectedIndex() {
     return getSelectedIndex(this.tabs);
@@ -96,10 +115,10 @@ var UHTMLTabsElement = class extends UHTMLElement {
     setSelected(this.tabs[index]);
   }
   get tabs() {
-    return queryWithoutNested("u-tab", this);
+    return queryWithoutNested("tab", this);
   }
   get panels() {
-    return queryWithoutNested("u-tabpanel", this);
+    return queryWithoutNested("tabpanel", this);
   }
 };
 var UHTMLTabListElement = class extends UHTMLElement {
@@ -111,13 +130,14 @@ var UHTMLTabListElement = class extends UHTMLElement {
     attr(this, "role", "tablist");
     on(this, "click,keydown", this);
     mutationObserver(this, { childList: true });
-    if (this.tabs.length) this.handleEvent();
+    requestAnimationFrame(() => this.handleEvent());
   }
   disconnectedCallback() {
     off(this, "click,keydown", this);
     mutationObserver(this, false);
   }
   handleEvent(event) {
+    var _a2, _b;
     if (!event || event.type === "mutation") {
       const tab = this.tabs[Math.max(this.selectedIndex, 0)];
       return tab == null ? void 0 : tab.setAttribute(ARIA_SELECTED, "true");
@@ -138,20 +158,20 @@ var UHTMLTabListElement = class extends UHTMLElement {
       else if (key === "Tab") next = getSelectedIndex(tabs);
       else return;
       setTimeout(() => {
-        tabs[prev].tabIndex = -1;
-        tabs[next].tabIndex = 0;
+        attr(tabs[prev], "tabindex", "-1");
+        attr(tabs[next], "tabindex", "0");
       });
       if (key !== "Tab") {
         event.preventDefault();
-        tabs[next].focus();
+        (_b = (_a2 = tabs[next]).focus) == null ? void 0 : _b.call(_a2);
       }
     }
   }
   get tabsElement() {
-    return this.closest("u-tabs");
+    return getTabsElement(this);
   }
   get tabs() {
-    return this.querySelectorAll("u-tab");
+    return getTabs(this);
   }
   get selectedIndex() {
     return getSelectedIndex(this.tabs);
@@ -172,31 +192,32 @@ var UHTMLTabElement = class extends UHTMLElement {
   }
   connectedCallback() {
     attr(this, "role", "tab");
-    this.tabIndex = this.selected ? 0 : -1;
+    attr(this, "tabindex", this.selected ? "0" : "-1");
   }
   attributeChangedCallback() {
     if (!SKIP_ATTR_CHANGE && this.selected && this.tabList) {
       SKIP_ATTR_CHANGE = true;
-      const tabs = [...this.tabList.querySelectorAll("u-tab")];
-      const panels = queryWithoutNested("u-tabpanel", this.tabsElement || this);
-      const nextPanel = getPanel(this, panels[tabs.indexOf(this)]);
+      const tabs = this.tabList ? getTabs(this.tabList) : [];
+      const panels = queryWithoutNested("tabpanel", this.tabsElement || this);
+      const nextPanel = getPanel(this, panels[[...tabs].indexOf(this)]);
       if (nextPanel) attr(nextPanel, SAFE_LABELLEDBY, useId(this));
-      tabs.forEach((tab, index) => {
-        const panel = getPanel(tab, panels[index]);
-        tab.tabIndex = tab === this ? 0 : -1;
+      let i = 0;
+      for (const tab of tabs) {
+        const panel = getPanel(tab, panels[i++]);
+        attr(tab, "tabindex", tab === this ? "0" : "-1");
         attr(tab, ARIA_SELECTED, `${tab === this}`);
-        attr(tab, ARIA_CONTROLS, (panel == null ? void 0 : panel.id) || null);
+        if (panel == null ? void 0 : panel.id) attr(tab, ARIA_CONTROLS, panel.id);
         if (panel) panel.hidden = panel !== nextPanel;
-      });
+      }
       SKIP_ATTR_CHANGE = false;
     }
   }
   get tabsElement() {
-    return this.closest("u-tabs");
+    return getTabsElement(this);
   }
   get tabList() {
     const tablist = this.parentElement;
-    return (tablist == null ? void 0 : tablist.nodeName) === "U-TABLIST" ? tablist : null;
+    return (tablist == null ? void 0 : tablist.getAttribute("role")) === "tablist" ? tablist : null;
   }
   get selected() {
     return attr(this, ARIA_SELECTED) === "true";
@@ -206,8 +227,8 @@ var UHTMLTabElement = class extends UHTMLElement {
   }
   /** Retrieves the ordinal position of an tab in a tablist. */
   get index() {
-    const tabList = this.tabList;
-    return tabList ? [...tabList.querySelectorAll("u-tab")].indexOf(this) : 0;
+    const tablist = this.tabList;
+    return tablist ? [...getTabs(tablist)].indexOf(this) : 0;
   }
   get panel() {
     return getPanel(this);
@@ -233,20 +254,21 @@ var UHTMLTabPanelElement = class extends UHTMLElement {
     attr(this, "tabindex", hidden || isFocusable(this.firstChild) ? null : "0");
   }
   get tabsElement() {
-    return this.closest("u-tabs");
+    return getTabsElement(this);
   }
   get tabs() {
-    const css = `u-tab[${ARIA_CONTROLS}="${this.id}"]`;
-    return getRoot(this).querySelectorAll(css);
+    return getRoot(this).querySelectorAll(
+      `[role="tab"][${ARIA_CONTROLS}="${this.id}"]`
+    );
   }
 };
-var queryWithoutNested = (tag, self) => self.querySelectorAll(`${tag}:not(:scope u-tabpanel ${tag})`);
-var getPanel = (tab, panel) => {
-  const id2 = attr(tab, ARIA_CONTROLS) || useId(panel);
-  const el = getRoot(tab).getElementById(id2);
-  return (el == null ? void 0 : el.nodeName) === "U-TABPANEL" ? el : null;
-};
+var queryWithoutNested = (role, self) => self.querySelectorAll(
+  `[role="${role}"]:not(:scope [role="tabpanel"] [role="${role}"])`
+);
+var getPanel = (tab, panel) => getRoot(tab).getElementById(attr(tab, ARIA_CONTROLS) || useId(panel));
 var getSelectedIndex = (tabs) => [...tabs].findIndex((tab) => attr(tab, ARIA_SELECTED) === "true");
+var getTabsElement = (self) => self.closest(`[${ATTR_TABS}]`);
+var getTabs = (self) => self.querySelectorAll(`:scope > [role="tab"]`);
 var setSelected = (tab) => tab && attr(tab, "aria-disabled") !== "true" && attr(tab, "aria-selected", "true");
 var isFocusable = (el) => el instanceof Element && !el.matches(':disabled,[tabindex^="-"]') && el.matches(
   `[contenteditable],[controls],[href],[tabindex],input:not([type="hidden"]),select,textarea,button,summary,iframe`

package/dist/u-tabs.manifest.json

@@ -50,6 +50,10 @@
      "description": "The `<u-tabs>` HTML element is used to group a `<u-tablist>` and several `<u-tabpanel>` elements.\nNo MDN reference available.",
      "name": "UHTMLTabsElement",
      "members": [
+      {
+       "kind": "method",
+       "name": "handleEvent"
+      },
       {
        "kind": "field",
        "name": "tabList",
@@ -111,7 +115,7 @@
        "kind": "field",
        "name": "tabsElement",
        "type": {
-        "text": "UHTMLTabsElement | null"
+        "text": "HTMLElement | null"
        },
        "readonly": true
       },
@@ -179,7 +183,7 @@
        "kind": "field",
        "name": "panel",
        "type": {
-        "text": "UHTMLTabPanelElement | null"
+        "text": "HTMLElement | null"
        },
        "readonly": true
       }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@u-elements/u-tabs",
-	"version": "0.0.12",
+	"version": "0.1.0",
 	"license": "MIT",
 	"description": "HTML tags, just truly accessible",
 	"homepage": "https://u-elements.github.io/u-elements/",