@u-elements/u-tabs 0.0.12 → 0.1.1

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,15 @@ 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);
   }
   get tabList() {
-    return queryWithoutNested("u-tablist", this)[0] || null;
+    return queryWithoutNested("tablist", this)[0] || null;
   }
   get selectedIndex() {
     return getSelectedIndex(this.tabs);
@@ -98,10 +102,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 +117,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 +145,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);
@@ -162,7 +167,7 @@ var UHTMLTabListElement = class extends UHTMLElement {
     setSelected(this.tabs[index]);
   }
 };
-var SKIP_ATTR_CHANGE = false;
+var SKIP_ATTR_CHANGE_TAB = false;
 var UHTMLTabElement = class extends UHTMLElement {
   // Using ES2015 syntax for backwards compatibility
   static get observedAttributes() {
@@ -174,31 +179,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)]);
+    if (!SKIP_ATTR_CHANGE_TAB && this.selected && this.tabList) {
+      SKIP_ATTR_CHANGE_TAB = true;
+      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;
+      }
+      SKIP_ATTR_CHANGE_TAB = 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,47 +214,54 @@ 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);
   }
 };
+var SKIP_ATTR_CHANGE_PANEL = false;
 var UHTMLTabPanelElement = class extends UHTMLElement {
   // Using ES2015 syntax for backwards compatibility
   static get observedAttributes() {
-    return ["hidden"];
+    return ["id", "hidden"];
   }
   constructor() {
     super();
     attachStyle(this, UHTMLTabPanelStyle);
   }
   connectedCallback() {
+    var _a2, _b;
     attr(this, "role", "tabpanel");
-    this.hidden = getSelectedIndex(this.tabs) === -1;
+    (_b = (_a2 = this.tabsElement) == null ? void 0 : _a2.tabList) == null ? void 0 : _b.handleEvent();
     this.attributeChangedCallback();
   }
   attributeChangedCallback() {
-    const hidden = this.hidden;
-    attr(this, "aria-hidden", `${hidden}`);
-    attr(this, "tabindex", hidden || isFocusable(this.firstChild) ? null : "0");
+    if (SKIP_ATTR_CHANGE_PANEL) return;
+    SKIP_ATTR_CHANGE_PANEL = true;
+    const hasFocusable = isFocusable(this.firstChild);
+    this.hidden = getSelectedIndex(this.tabs) === -1;
+    attr(this, "aria-hidden", `${this.hidden}`);
+    attr(this, "tabindex", this.hidden || hasFocusable ? null : "0");
+    SKIP_ATTR_CHANGE_PANEL = false;
   }
   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

@@ -40,7 +40,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,12 +56,8 @@ 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>`.
- * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tabpanel_role)
- */
 declare class UHTMLTabPanelElement extends UHTMLElement {
     static get observedAttributes(): string[];
     constructor();

package/dist/u-tabs.d.ts

@@ -40,7 +40,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,12 +56,8 @@ 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>`.
- * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tabpanel_role)
- */
 declare class UHTMLTabPanelElement extends UHTMLElement {
     static get observedAttributes(): string[];
     constructor();

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,15 @@ 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);
   }
   get tabList() {
-    return queryWithoutNested("u-tablist", this)[0] || null;
+    return queryWithoutNested("tablist", this)[0] || null;
   }
   get selectedIndex() {
     return getSelectedIndex(this.tabs);
@@ -96,10 +100,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 +115,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 +143,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);
@@ -160,7 +165,7 @@ var UHTMLTabListElement = class extends UHTMLElement {
     setSelected(this.tabs[index]);
   }
 };
-var SKIP_ATTR_CHANGE = false;
+var SKIP_ATTR_CHANGE_TAB = false;
 var UHTMLTabElement = class extends UHTMLElement {
   // Using ES2015 syntax for backwards compatibility
   static get observedAttributes() {
@@ -172,31 +177,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)]);
+    if (!SKIP_ATTR_CHANGE_TAB && this.selected && this.tabList) {
+      SKIP_ATTR_CHANGE_TAB = true;
+      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;
+      }
+      SKIP_ATTR_CHANGE_TAB = 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,47 +212,54 @@ 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);
   }
 };
+var SKIP_ATTR_CHANGE_PANEL = false;
 var UHTMLTabPanelElement = class extends UHTMLElement {
   // Using ES2015 syntax for backwards compatibility
   static get observedAttributes() {
-    return ["hidden"];
+    return ["id", "hidden"];
   }
   constructor() {
     super();
     attachStyle(this, UHTMLTabPanelStyle);
   }
   connectedCallback() {
+    var _a2, _b;
     attr(this, "role", "tabpanel");
-    this.hidden = getSelectedIndex(this.tabs) === -1;
+    (_b = (_a2 = this.tabsElement) == null ? void 0 : _a2.tabList) == null ? void 0 : _b.handleEvent();
     this.attributeChangedCallback();
   }
   attributeChangedCallback() {
-    const hidden = this.hidden;
-    attr(this, "aria-hidden", `${hidden}`);
-    attr(this, "tabindex", hidden || isFocusable(this.firstChild) ? null : "0");
+    if (SKIP_ATTR_CHANGE_PANEL) return;
+    SKIP_ATTR_CHANGE_PANEL = true;
+    const hasFocusable = isFocusable(this.firstChild);
+    this.hidden = getSelectedIndex(this.tabs) === -1;
+    attr(this, "aria-hidden", `${this.hidden}`);
+    attr(this, "tabindex", this.hidden || hasFocusable ? null : "0");
+    SKIP_ATTR_CHANGE_PANEL = false;
   }
   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

@@ -111,7 +111,7 @@
        "kind": "field",
        "name": "tabsElement",
        "type": {
-        "text": "UHTMLTabsElement | null"
+        "text": "HTMLElement | null"
        },
        "readonly": true
       },
@@ -179,7 +179,7 @@
        "kind": "field",
        "name": "panel",
        "type": {
-        "text": "UHTMLTabPanelElement | null"
+        "text": "HTMLElement | null"
        },
        "readonly": true
       }
@@ -198,7 +198,7 @@
     },
     {
      "kind": "class",
-     "description": "The `<u-tabpanel>` HTML element is a container for the resources of layered content associated with a `<u-tab>`.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tabpanel_role)",
+     "description": "",
      "name": "UHTMLTabPanelElement",
      "members": [
       {
@@ -219,6 +219,9 @@
       }
      ],
      "attributes": [
+      {
+       "name": "id"
+      },
       {
        "name": "hidden"
       }

package/dist/u-tabs.vscode.json

@@ -22,8 +22,11 @@
     },
     {
       "name": "u-tabpanel",
-      "description": "The `<u-tabpanel>` HTML element is a container for the resources of layered content associated with a `<u-tab>`.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tabpanel_role)\n---\n",
-      "attributes": [{ "name": "hidden", "values": [] }],
+      "description": "\n---\n",
+      "attributes": [
+        { "name": "id", "values": [] },
+        { "name": "hidden", "values": [] }
+      ],
       "references": []
     }
   ]

package/package.json

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