@u-elements/u-tabs 0.0.5 → 0.0.7

package/dist/u-tabs.cjs

@@ -3,20 +3,30 @@
 // ../utils.ts
 var IS_BROWSER = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.navigator !== "undefined";
 var IS_ANDROID = IS_BROWSER && /android/i.test(navigator.userAgent);
+IS_BROWSER && // @ts-expect-error Typescript has not implemented userAgentData yet https://stackoverflow.com/a/71392474
+/^Mac/i.test(navigator.userAgentData?.platform || navigator.platform);
 var SAFE_LABELLEDBY = `${IS_ANDROID ? "data" : "aria"}-labelledby`;
 var DISPLAY_BLOCK = ":host(:not([hidden])) { display: block }";
 var UHTMLElement = typeof HTMLElement === "undefined" ? class {
 } : HTMLElement;
-var events = (action, element, rest) => rest[0].split(",").forEach((type) => {
-  rest[0] = type;
-  Element.prototype[`${action}EventListener`].apply(element, rest);
-});
+function attr(el, name, value) {
+  if (value === void 0) return el?.getAttribute(name) ?? null;
+  if (value === null) el?.removeAttribute(name);
+  else if (el?.getAttribute(name) !== value) el?.setAttribute(name, value);
+  return null;
+}
+var events = (action, element, rest) => {
+  for (const type of rest[0].split(",")) {
+    rest[0] = type;
+    Element.prototype[`${action}EventListener`].apply(element, rest);
+  }
+};
 var on = (element, ...rest) => events("add", element, rest);
 var off = (element, ...rest) => events("remove", element, rest);
-var attachStyle = (element, css) => element.attachShadow({ mode: "closed" }).append(
+var attachStyle = (element, css) => element.attachShadow({ mode: "open" }).append(
   createElement("slot"),
   // Unnamed slot does automatically render all top element nodes
-  createElement("style", { textContent: css })
+  createElement("style", css)
 );
 var asButton = (event) => {
   const isClick = "key" in event && (event.key === " " || event.key === "Enter");
@@ -24,10 +34,21 @@ var asButton = (event) => {
   if (isClick && event.target instanceof HTMLElement) event.target.click();
   return isClick;
 };
-var getRoot = (node) => node.getRootNode();
+var getRoot = (node) => {
+  const root = node.getRootNode?.() || node.ownerDocument;
+  return root instanceof Document || root instanceof ShadowRoot ? root : document;
+};
 var id = 0;
-var useId = (el) => el ? el.id || (el.id = `:${el.nodeName.toLowerCase()}${(++id).toString(32)}`) : "";
-var createElement = (tagName, props) => Object.assign(document.createElement(tagName), props);
+var useId = (el) => {
+  if (!el) return "";
+  if (!el.id) el.id = `:${el.nodeName.toLowerCase()}${(++id).toString(32)}`;
+  return el.id;
+};
+var createElement = (tagName, text, attrs) => {
+  const el = document.createElement(tagName);
+  if (text) el.textContent = text;
+  return el;
+};
 var customElements = {
   define: (name, instance) => !IS_BROWSER || window.customElements.get(name) || window.customElements.define(name, instance)
 };
@@ -46,7 +67,7 @@ var UHTMLTabsElement = class extends UHTMLElement {
     return getSelectedIndex(this.tabs);
   }
   set selectedIndex(index) {
-    if (this.tabs[index]) this.tabs[index].ariaSelected = "true";
+    if (this.tabs[index]) attr(this.tabs[index], "aria-selected", "true");
   }
   get tabs() {
     return queryWithoutNested("u-tab", this);
@@ -61,7 +82,7 @@ var UHTMLTabListElement = class extends UHTMLElement {
     attachStyle(this, DISPLAY_BLOCK);
   }
   connectedCallback() {
-    this.role = "tablist";
+    attr(this, "role", "tablist");
     on(this, "click,keydown", this);
   }
   disconnectedCallback() {
@@ -103,44 +124,49 @@ var UHTMLTabListElement = class extends UHTMLElement {
     return getSelectedIndex(this.tabs);
   }
   set selectedIndex(index) {
-    if (this.tabs[index]) this.tabs[index].ariaSelected = "true";
+    if (this.tabs[index]) attr(this.tabs[index], "aria-selected", "true");
   }
 };
 var UHTMLTabElement = class extends UHTMLElement {
+  // Using ES2015 syntax for backwards compatibility
+  static get observedAttributes() {
+    return ["id", "aria-selected", ARIA_CONTROLS];
+  }
   constructor() {
     super();
     attachStyle(
       this,
-      `:host(:not([hidden])) { cursor: pointer; display: inline-block }`
+      ":host(:not([hidden])) { cursor: pointer; display: inline-block }"
     );
   }
   connectedCallback() {
+    const panelId = !attr(this, ARIA_CONTROLS) && useId(getPanel(this));
     const selected = this.selected || ![...queryWithoutNested("u-tab", this.tabList || this)].some(isSelected);
-    this.role = "tab";
+    attr(this, "aria-selected", `${selected}`);
+    attr(this, "role", "tab");
     this.tabIndex = selected ? 0 : -1;
-    this.ariaSelected = `${selected}`;
-    if (!this.hasAttribute(ARIA_CONTROLS))
-      this.setAttribute(ARIA_CONTROLS, useId(getPanel(this)));
+    if (panelId) attr(this, ARIA_CONTROLS, panelId);
   }
   attributeChangedCallback(name, prev) {
     if (!this.selected) return;
     const nextPanel = getPanel(this);
     const nextPanelId = useId(nextPanel);
     if (name === "aria-selected" && this.tabList)
-      queryWithoutNested("u-tab", this.tabList).forEach((tab) => {
+      for (const tab of queryWithoutNested("u-tab", this.tabList)) {
         if (tab !== this && isSelected(tab)) {
-          getPanel(tab)?.setAttribute("hidden", "");
-          tab.ariaSelected = "false";
+          const panel = getPanel(tab);
+          if (panel) panel.hidden = true;
+          attr(tab, "aria-selected", "false");
           tab.tabIndex = -1;
         }
-      });
-    if (name === ARIA_CONTROLS && prev)
-      getPanel(this, prev)?.setAttribute("hidden", "");
-    if (this.getAttribute(ARIA_CONTROLS) !== nextPanelId)
-      this.setAttribute(ARIA_CONTROLS, nextPanelId);
+      }
+    const prevPanel = name === ARIA_CONTROLS && prev && getPanel(this, prev);
+    if (prevPanel) prevPanel.hidden = true;
+    if (nextPanelId && attr(this, ARIA_CONTROLS) !== nextPanelId)
+      attr(this, ARIA_CONTROLS, nextPanelId);
     this.tabIndex = 0;
-    nextPanel?.setAttribute(SAFE_LABELLEDBY, useId(this));
-    nextPanel?.removeAttribute("hidden");
+    if (nextPanel) attr(nextPanel, SAFE_LABELLEDBY, useId(this));
+    if (nextPanel) nextPanel.hidden = false;
   }
   get tabsElement() {
     return this.closest("u-tabs");
@@ -152,7 +178,7 @@ var UHTMLTabElement = class extends UHTMLElement {
     return isSelected(this);
   }
   set selected(value) {
-    this.ariaSelected = `${!!value}`;
+    attr(this, "aria-selected", `${!!value}`);
   }
   /** Retrieves the ordinal position of an tab in a tablist. */
   get index() {
@@ -163,15 +189,24 @@ var UHTMLTabElement = class extends UHTMLElement {
     return getPanel(this);
   }
 };
-UHTMLTabElement.observedAttributes = ["id", "aria-selected", ARIA_CONTROLS];
 var UHTMLTabPanelElement = class extends UHTMLElement {
+  // Using ES2015 syntax for backwards compatibility
+  static get observedAttributes() {
+    return ["hidden"];
+  }
   constructor() {
     super();
     attachStyle(this, DISPLAY_BLOCK);
   }
   connectedCallback() {
+    attr(this, "role", "tabpanel");
     this.hidden = getSelectedIndex(this.tabs) === -1;
-    this.role = "tabpanel";
+    this.attributeChangedCallback();
+  }
+  attributeChangedCallback() {
+    if (this.hidden || isFocusable(this.firstChild))
+      attr(this, "tabindex", null);
+    else this.tabIndex = 0;
   }
   get tabsElement() {
     return this.closest("u-tabs");
@@ -182,16 +217,19 @@ var UHTMLTabPanelElement = class extends UHTMLElement {
     return root.length ? root : document.querySelectorAll(css);
   }
 };
-var queryWithoutNested = (tag, self) => {
-  const css = `${tag}:not(:scope ${self.nodeName}:not(:scope) ${tag})`;
-  return self.querySelectorAll(css);
-};
-var isSelected = (tab) => tab.ariaSelected === "true";
+var queryWithoutNested = (tag, self) => self.querySelectorAll(
+  `${tag}:not(:scope ${self.nodeName}:not(:scope) ${tag})`
+);
+var isSelected = (tab) => attr(tab, "aria-selected") === "true";
 var getSelectedIndex = (tabs) => [...tabs].findIndex(isSelected);
-var getPanel = (self, id2) => {
-  const css = `u-tabpanel[id="${id2 || self.getAttribute(ARIA_CONTROLS)}"]`;
-  const tabsElement = self.closest("u-tabs");
-  return getRoot(self).querySelector(css) || document.querySelector(css) || tabsElement && queryWithoutNested("u-tabpanel", tabsElement)[[...queryWithoutNested("u-tab", tabsElement)].indexOf(self)] || null;
+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`
+);
+var getPanel = (tab, id2) => {
+  const panelId = id2 || attr(tab, ARIA_CONTROLS);
+  const panelSelector = `u-tabpanel[id="${panelId}"]`;
+  const tabsElement = tab.closest("u-tabs");
+  return panelId && getRoot(tab).querySelector(panelSelector) || panelId && getRoot(tab).querySelector(panelSelector) || tabsElement && queryWithoutNested("u-tabpanel", tabsElement)[[...queryWithoutNested("u-tab", tabsElement)].indexOf(tab)] || null;
 };
 customElements.define("u-tabs", UHTMLTabsElement);
 customElements.define("u-tablist", UHTMLTabListElement);

package/dist/u-tabs.d.cts

@@ -5,10 +5,10 @@ declare const UHTMLElement: {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'u-tabs': UHTMLTabsElement;
-        'u-tablist': UHTMLTabListElement;
-        'u-tab': UHTMLTabElement;
-        'u-tabpanel': UHTMLTabPanelElement;
+        "u-tabs": UHTMLTabsElement;
+        "u-tablist": UHTMLTabListElement;
+        "u-tab": UHTMLTabElement;
+        "u-tabpanel": UHTMLTabPanelElement;
     }
 }
 /**
@@ -42,7 +42,7 @@ declare class UHTMLTabListElement extends UHTMLElement {
  * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role)
  */
 declare class UHTMLTabElement extends UHTMLElement {
-    static observedAttributes: string[];
+    static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;
     attributeChangedCallback(name: string, prev: string): void;
@@ -59,8 +59,10 @@ declare class UHTMLTabElement extends UHTMLElement {
  * [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();
     connectedCallback(): void;
+    attributeChangedCallback(): void;
     get tabsElement(): UHTMLTabsElement | null;
     get tabs(): NodeListOf<UHTMLTabElement>;
 }

package/dist/u-tabs.d.ts

@@ -5,10 +5,10 @@ declare const UHTMLElement: {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'u-tabs': UHTMLTabsElement;
-        'u-tablist': UHTMLTabListElement;
-        'u-tab': UHTMLTabElement;
-        'u-tabpanel': UHTMLTabPanelElement;
+        "u-tabs": UHTMLTabsElement;
+        "u-tablist": UHTMLTabListElement;
+        "u-tab": UHTMLTabElement;
+        "u-tabpanel": UHTMLTabPanelElement;
     }
 }
 /**
@@ -42,7 +42,7 @@ declare class UHTMLTabListElement extends UHTMLElement {
  * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role)
  */
 declare class UHTMLTabElement extends UHTMLElement {
-    static observedAttributes: string[];
+    static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;
     attributeChangedCallback(name: string, prev: string): void;
@@ -59,8 +59,10 @@ declare class UHTMLTabElement extends UHTMLElement {
  * [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();
     connectedCallback(): void;
+    attributeChangedCallback(): void;
     get tabsElement(): UHTMLTabsElement | null;
     get tabs(): NodeListOf<UHTMLTabElement>;
 }

package/dist/u-tabs.js

@@ -1,20 +1,30 @@
 // ../utils.ts
 var IS_BROWSER = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.navigator !== "undefined";
 var IS_ANDROID = IS_BROWSER && /android/i.test(navigator.userAgent);
+IS_BROWSER && // @ts-expect-error Typescript has not implemented userAgentData yet https://stackoverflow.com/a/71392474
+/^Mac/i.test(navigator.userAgentData?.platform || navigator.platform);
 var SAFE_LABELLEDBY = `${IS_ANDROID ? "data" : "aria"}-labelledby`;
 var DISPLAY_BLOCK = ":host(:not([hidden])) { display: block }";
 var UHTMLElement = typeof HTMLElement === "undefined" ? class {
 } : HTMLElement;
-var events = (action, element, rest) => rest[0].split(",").forEach((type) => {
-  rest[0] = type;
-  Element.prototype[`${action}EventListener`].apply(element, rest);
-});
+function attr(el, name, value) {
+  if (value === void 0) return el?.getAttribute(name) ?? null;
+  if (value === null) el?.removeAttribute(name);
+  else if (el?.getAttribute(name) !== value) el?.setAttribute(name, value);
+  return null;
+}
+var events = (action, element, rest) => {
+  for (const type of rest[0].split(",")) {
+    rest[0] = type;
+    Element.prototype[`${action}EventListener`].apply(element, rest);
+  }
+};
 var on = (element, ...rest) => events("add", element, rest);
 var off = (element, ...rest) => events("remove", element, rest);
-var attachStyle = (element, css) => element.attachShadow({ mode: "closed" }).append(
+var attachStyle = (element, css) => element.attachShadow({ mode: "open" }).append(
   createElement("slot"),
   // Unnamed slot does automatically render all top element nodes
-  createElement("style", { textContent: css })
+  createElement("style", css)
 );
 var asButton = (event) => {
   const isClick = "key" in event && (event.key === " " || event.key === "Enter");
@@ -22,10 +32,21 @@ var asButton = (event) => {
   if (isClick && event.target instanceof HTMLElement) event.target.click();
   return isClick;
 };
-var getRoot = (node) => node.getRootNode();
+var getRoot = (node) => {
+  const root = node.getRootNode?.() || node.ownerDocument;
+  return root instanceof Document || root instanceof ShadowRoot ? root : document;
+};
 var id = 0;
-var useId = (el) => el ? el.id || (el.id = `:${el.nodeName.toLowerCase()}${(++id).toString(32)}`) : "";
-var createElement = (tagName, props) => Object.assign(document.createElement(tagName), props);
+var useId = (el) => {
+  if (!el) return "";
+  if (!el.id) el.id = `:${el.nodeName.toLowerCase()}${(++id).toString(32)}`;
+  return el.id;
+};
+var createElement = (tagName, text, attrs) => {
+  const el = document.createElement(tagName);
+  if (text) el.textContent = text;
+  return el;
+};
 var customElements = {
   define: (name, instance) => !IS_BROWSER || window.customElements.get(name) || window.customElements.define(name, instance)
 };
@@ -44,7 +65,7 @@ var UHTMLTabsElement = class extends UHTMLElement {
     return getSelectedIndex(this.tabs);
   }
   set selectedIndex(index) {
-    if (this.tabs[index]) this.tabs[index].ariaSelected = "true";
+    if (this.tabs[index]) attr(this.tabs[index], "aria-selected", "true");
   }
   get tabs() {
     return queryWithoutNested("u-tab", this);
@@ -59,7 +80,7 @@ var UHTMLTabListElement = class extends UHTMLElement {
     attachStyle(this, DISPLAY_BLOCK);
   }
   connectedCallback() {
-    this.role = "tablist";
+    attr(this, "role", "tablist");
     on(this, "click,keydown", this);
   }
   disconnectedCallback() {
@@ -101,44 +122,49 @@ var UHTMLTabListElement = class extends UHTMLElement {
     return getSelectedIndex(this.tabs);
   }
   set selectedIndex(index) {
-    if (this.tabs[index]) this.tabs[index].ariaSelected = "true";
+    if (this.tabs[index]) attr(this.tabs[index], "aria-selected", "true");
   }
 };
 var UHTMLTabElement = class extends UHTMLElement {
+  // Using ES2015 syntax for backwards compatibility
+  static get observedAttributes() {
+    return ["id", "aria-selected", ARIA_CONTROLS];
+  }
   constructor() {
     super();
     attachStyle(
       this,
-      `:host(:not([hidden])) { cursor: pointer; display: inline-block }`
+      ":host(:not([hidden])) { cursor: pointer; display: inline-block }"
     );
   }
   connectedCallback() {
+    const panelId = !attr(this, ARIA_CONTROLS) && useId(getPanel(this));
     const selected = this.selected || ![...queryWithoutNested("u-tab", this.tabList || this)].some(isSelected);
-    this.role = "tab";
+    attr(this, "aria-selected", `${selected}`);
+    attr(this, "role", "tab");
     this.tabIndex = selected ? 0 : -1;
-    this.ariaSelected = `${selected}`;
-    if (!this.hasAttribute(ARIA_CONTROLS))
-      this.setAttribute(ARIA_CONTROLS, useId(getPanel(this)));
+    if (panelId) attr(this, ARIA_CONTROLS, panelId);
   }
   attributeChangedCallback(name, prev) {
     if (!this.selected) return;
     const nextPanel = getPanel(this);
     const nextPanelId = useId(nextPanel);
     if (name === "aria-selected" && this.tabList)
-      queryWithoutNested("u-tab", this.tabList).forEach((tab) => {
+      for (const tab of queryWithoutNested("u-tab", this.tabList)) {
         if (tab !== this && isSelected(tab)) {
-          getPanel(tab)?.setAttribute("hidden", "");
-          tab.ariaSelected = "false";
+          const panel = getPanel(tab);
+          if (panel) panel.hidden = true;
+          attr(tab, "aria-selected", "false");
           tab.tabIndex = -1;
         }
-      });
-    if (name === ARIA_CONTROLS && prev)
-      getPanel(this, prev)?.setAttribute("hidden", "");
-    if (this.getAttribute(ARIA_CONTROLS) !== nextPanelId)
-      this.setAttribute(ARIA_CONTROLS, nextPanelId);
+      }
+    const prevPanel = name === ARIA_CONTROLS && prev && getPanel(this, prev);
+    if (prevPanel) prevPanel.hidden = true;
+    if (nextPanelId && attr(this, ARIA_CONTROLS) !== nextPanelId)
+      attr(this, ARIA_CONTROLS, nextPanelId);
     this.tabIndex = 0;
-    nextPanel?.setAttribute(SAFE_LABELLEDBY, useId(this));
-    nextPanel?.removeAttribute("hidden");
+    if (nextPanel) attr(nextPanel, SAFE_LABELLEDBY, useId(this));
+    if (nextPanel) nextPanel.hidden = false;
   }
   get tabsElement() {
     return this.closest("u-tabs");
@@ -150,7 +176,7 @@ var UHTMLTabElement = class extends UHTMLElement {
     return isSelected(this);
   }
   set selected(value) {
-    this.ariaSelected = `${!!value}`;
+    attr(this, "aria-selected", `${!!value}`);
   }
   /** Retrieves the ordinal position of an tab in a tablist. */
   get index() {
@@ -161,15 +187,24 @@ var UHTMLTabElement = class extends UHTMLElement {
     return getPanel(this);
   }
 };
-UHTMLTabElement.observedAttributes = ["id", "aria-selected", ARIA_CONTROLS];
 var UHTMLTabPanelElement = class extends UHTMLElement {
+  // Using ES2015 syntax for backwards compatibility
+  static get observedAttributes() {
+    return ["hidden"];
+  }
   constructor() {
     super();
     attachStyle(this, DISPLAY_BLOCK);
   }
   connectedCallback() {
+    attr(this, "role", "tabpanel");
     this.hidden = getSelectedIndex(this.tabs) === -1;
-    this.role = "tabpanel";
+    this.attributeChangedCallback();
+  }
+  attributeChangedCallback() {
+    if (this.hidden || isFocusable(this.firstChild))
+      attr(this, "tabindex", null);
+    else this.tabIndex = 0;
   }
   get tabsElement() {
     return this.closest("u-tabs");
@@ -180,16 +215,19 @@ var UHTMLTabPanelElement = class extends UHTMLElement {
     return root.length ? root : document.querySelectorAll(css);
   }
 };
-var queryWithoutNested = (tag, self) => {
-  const css = `${tag}:not(:scope ${self.nodeName}:not(:scope) ${tag})`;
-  return self.querySelectorAll(css);
-};
-var isSelected = (tab) => tab.ariaSelected === "true";
+var queryWithoutNested = (tag, self) => self.querySelectorAll(
+  `${tag}:not(:scope ${self.nodeName}:not(:scope) ${tag})`
+);
+var isSelected = (tab) => attr(tab, "aria-selected") === "true";
 var getSelectedIndex = (tabs) => [...tabs].findIndex(isSelected);
-var getPanel = (self, id2) => {
-  const css = `u-tabpanel[id="${id2 || self.getAttribute(ARIA_CONTROLS)}"]`;
-  const tabsElement = self.closest("u-tabs");
-  return getRoot(self).querySelector(css) || document.querySelector(css) || tabsElement && queryWithoutNested("u-tabpanel", tabsElement)[[...queryWithoutNested("u-tab", tabsElement)].indexOf(self)] || null;
+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`
+);
+var getPanel = (tab, id2) => {
+  const panelId = id2 || attr(tab, ARIA_CONTROLS);
+  const panelSelector = `u-tabpanel[id="${panelId}"]`;
+  const tabsElement = tab.closest("u-tabs");
+  return panelId && getRoot(tab).querySelector(panelSelector) || panelId && getRoot(tab).querySelector(panelSelector) || tabsElement && queryWithoutNested("u-tabpanel", tabsElement)[[...queryWithoutNested("u-tab", tabsElement)].indexOf(tab)] || null;
 };
 customElements.define("u-tabs", UHTMLTabsElement);
 customElements.define("u-tablist", UHTMLTabListElement);

package/dist/u-tabs.manifest.json

@@ -181,6 +181,11 @@
        "readonly": true
       }
      ],
+     "attributes": [
+      {
+       "name": "hidden"
+      }
+     ],
      "superclass": {
       "name": "UHTMLElement",
       "module": "//Users/eirikbacker/Library/Mobile%20Documents/com~apple~CloudDocs/5-capra/u-elements/packages/utils"

package/dist/u-tabs.vscode.json

@@ -26,7 +26,7 @@
     {
       "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": [],
+      "attributes": [{ "name": "hidden", "values": [] }],
       "references": []
     }
   ]

package/package.json

@@ -1,25 +1,25 @@
 {
-  "name": "@u-elements/u-tabs",
-  "version": "0.0.5",
-  "license": "MIT",
-  "description": "HTML tags, just truly accessible",
-  "homepage": "https://u-elements.github.io/u-elements/",
-  "type": "module",
-  "main": "dist/u-tabs.cjs",
-  "module": "dist/u-tabs.js",
-  "types": "dist/u-tabs.d.ts",
-  "customElements": "dist/u-tabs.manifest.json",
-  "files": [
-    "dist"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/u-elements/u-elements.git"
-  },
-  "bugs": {
-    "url": "https://github.com/u-elements/u-elements/issues"
-  },
-  "scripts": {
-    "build": "tsup --config ../../tsup.config.ts"
-  }
+	"name": "@u-elements/u-tabs",
+	"version": "0.0.7",
+	"license": "MIT",
+	"description": "HTML tags, just truly accessible",
+	"homepage": "https://u-elements.github.io/u-elements/",
+	"type": "module",
+	"main": "dist/u-tabs.cjs",
+	"module": "dist/u-tabs.js",
+	"types": "dist/u-tabs.d.ts",
+	"customElements": "dist/u-tabs.manifest.json",
+	"files": [
+		"dist"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/u-elements/u-elements.git"
+	},
+	"bugs": {
+		"url": "https://github.com/u-elements/u-elements/issues"
+	},
+	"scripts": {
+		"build": "tsup --config ../../tsup.config.ts"
+	}
 }