@u-elements/u-tabs 0.0.7 → 0.0.9

package/dist/u-tabs.cjs

@@ -3,16 +3,18 @@
 // ../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);
+var _a;
 IS_BROWSER && // @ts-expect-error Typescript has not implemented userAgentData yet https://stackoverflow.com/a/71392474
-/^Mac/i.test(navigator.userAgentData?.platform || navigator.platform);
+/^Mac/i.test(((_a = navigator.userAgentData) == null ? void 0 : _a.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;
 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);
+  var _a2;
+  if (value === void 0) return (_a2 = el.getAttribute(name)) != null ? _a2 : null;
+  if (value === null) el.removeAttribute(name);
+  else if (el.getAttribute(name) !== value) el.setAttribute(name, value);
   return null;
 }
 var events = (action, element, rest) => {
@@ -28,6 +30,22 @@ var attachStyle = (element, css) => element.attachShadow({ mode: "open" }).appen
   // Unnamed slot does automatically render all top element nodes
   createElement("style", css)
 );
+var observers = /* @__PURE__ */ new WeakMap();
+var mutationObserver = (element, options) => {
+  if (options === void 0) return observers.get(element);
+  try {
+    observers.get(element).disconnect();
+    observers.delete(element);
+  } catch (err) {
+  }
+  if (options) {
+    const observer = new MutationObserver(
+      (detail) => element.handleEvent({ type: "mutation", detail })
+    );
+    observer.observe(element, options);
+    observers.set(element, observer);
+  }
+};
 var asButton = (event) => {
   const isClick = "key" in event && (event.key === " " || event.key === "Enter");
   if (isClick) event.preventDefault();
@@ -35,7 +53,8 @@ var asButton = (event) => {
   return isClick;
 };
 var getRoot = (node) => {
-  const root = node.getRootNode?.() || node.ownerDocument;
+  var _a2;
+  const root = ((_a2 = node.getRootNode) == null ? void 0 : _a2.call(node)) || node.ownerDocument;
   return root instanceof Document || root instanceof ShadowRoot ? root : document;
 };
 var id = 0;
@@ -55,6 +74,7 @@ var customElements = {
 
 // u-tabs.ts
 var ARIA_CONTROLS = "aria-controls";
+var ARIA_SELECTED = "aria-selected";
 var UHTMLTabsElement = class extends UHTMLElement {
   constructor() {
     super();
@@ -67,7 +87,7 @@ var UHTMLTabsElement = class extends UHTMLElement {
     return getSelectedIndex(this.tabs);
   }
   set selectedIndex(index) {
-    if (this.tabs[index]) attr(this.tabs[index], "aria-selected", "true");
+    setSelected(this.tabs[index]);
   }
   get tabs() {
     return queryWithoutNested("u-tab", this);
@@ -84,17 +104,24 @@ var UHTMLTabListElement = class extends UHTMLElement {
   connectedCallback() {
     attr(this, "role", "tablist");
     on(this, "click,keydown", this);
+    mutationObserver(this, { childList: true });
+    if (this.tabs.length) this.handleEvent();
   }
   disconnectedCallback() {
     off(this, "click,keydown", this);
+    mutationObserver(this, false);
   }
   handleEvent(event) {
+    if (!event || event.type === "mutation") {
+      const tab = this.tabs[Math.max(this.selectedIndex, 0)];
+      return tab == null ? void 0 : tab.setAttribute(ARIA_SELECTED, "true");
+    }
     const { key } = event;
-    const tabs = [...this.getElementsByTagName("u-tab")];
+    const tabs = [...this.tabs];
     const prev = tabs.findIndex((tab) => tab.contains(event.target));
     let next = prev;
     if (event.defaultPrevented || prev === -1) return;
-    if (event.type === "click") tabs[prev].selected = true;
+    if (event.type === "click") setSelected(tabs[prev]);
     if (event.type === "keydown" && !asButton(event)) {
       if (key === "ArrowDown" || key === "ArrowRight")
         next = (prev + 1) % tabs.length;
@@ -118,19 +145,20 @@ var UHTMLTabListElement = class extends UHTMLElement {
     return this.closest("u-tabs");
   }
   get tabs() {
-    return queryWithoutNested("u-tab", this);
+    return this.querySelectorAll("u-tab");
   }
   get selectedIndex() {
     return getSelectedIndex(this.tabs);
   }
   set selectedIndex(index) {
-    if (this.tabs[index]) attr(this.tabs[index], "aria-selected", "true");
+    setSelected(this.tabs[index]);
   }
 };
+var SKIP_ATTR_CHANGE = false;
 var UHTMLTabElement = class extends UHTMLElement {
   // Using ES2015 syntax for backwards compatibility
   static get observedAttributes() {
-    return ["id", "aria-selected", ARIA_CONTROLS];
+    return ["id", ARIA_SELECTED, ARIA_CONTROLS];
   }
   constructor() {
     super();
@@ -140,50 +168,43 @@ var UHTMLTabElement = class extends UHTMLElement {
     );
   }
   connectedCallback() {
-    const panelId = !attr(this, ARIA_CONTROLS) && useId(getPanel(this));
-    const selected = this.selected || ![...queryWithoutNested("u-tab", this.tabList || this)].some(isSelected);
-    attr(this, "aria-selected", `${selected}`);
     attr(this, "role", "tab");
-    this.tabIndex = selected ? 0 : -1;
-    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)
-      for (const tab of queryWithoutNested("u-tab", this.tabList)) {
-        if (tab !== this && isSelected(tab)) {
-          const panel = getPanel(tab);
-          if (panel) panel.hidden = true;
-          attr(tab, "aria-selected", "false");
-          tab.tabIndex = -1;
-        }
-      }
-    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;
-    if (nextPanel) attr(nextPanel, SAFE_LABELLEDBY, useId(this));
-    if (nextPanel) nextPanel.hidden = false;
+    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 (nextPanel) attr(nextPanel, SAFE_LABELLEDBY, useId(this));
+      tabs.forEach((tab, index) => {
+        const panel = getPanel(tab, panels[index]);
+        tab.tabIndex = tab === this ? 0 : -1;
+        attr(tab, ARIA_SELECTED, `${tab === this}`);
+        if (panel) panel.hidden = panel !== nextPanel;
+        if (panel) attr(tab, ARIA_CONTROLS, panel.id);
+      });
+      SKIP_ATTR_CHANGE = false;
+    }
   }
   get tabsElement() {
     return this.closest("u-tabs");
   }
   get tabList() {
-    return this.closest("u-tablist");
+    const tablist = this.parentElement;
+    return (tablist == null ? void 0 : tablist.nodeName) === "U-TABLIST" ? tablist : null;
   }
   get selected() {
-    return isSelected(this);
+    return attr(this, ARIA_SELECTED) === "true";
   }
   set selected(value) {
-    attr(this, "aria-selected", `${!!value}`);
+    attr(this, ARIA_SELECTED, `${!!value}`);
   }
   /** Retrieves the ordinal position of an tab in a tablist. */
   get index() {
     const tabList = this.tabList;
-    return tabList ? [...queryWithoutNested("u-tab", tabList)].indexOf(this) : 0;
+    return tabList ? [...tabList.querySelectorAll("u-tab")].indexOf(this) : 0;
   }
   get panel() {
     return getPanel(this);
@@ -213,24 +234,20 @@ var UHTMLTabPanelElement = class extends UHTMLElement {
   }
   get tabs() {
     const css = `u-tab[${ARIA_CONTROLS}="${this.id}"]`;
-    const root = getRoot(this).querySelectorAll(css);
-    return root.length ? root : document.querySelectorAll(css);
+    return getRoot(this).querySelectorAll(css);
   }
 };
-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 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 getSelectedIndex = (tabs) => [...tabs].findIndex((tab) => attr(tab, ARIA_SELECTED) === "true");
+var setSelected = (tab) => tab && 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`
 );
-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);
 customElements.define("u-tab", UHTMLTabElement);

package/dist/u-tabs.d.cts

@@ -31,21 +31,17 @@ declare class UHTMLTabListElement extends UHTMLElement {
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    handleEvent(event: Event): void;
+    handleEvent(event?: Event): void;
     get tabsElement(): UHTMLTabsElement | null;
     get tabs(): NodeListOf<UHTMLTabElement>;
     get selectedIndex(): number;
     set selectedIndex(index: number);
 }
-/**
- * The `<u-tab>` HTML element is an interactive element inside a `<u-tablist>` that, when activated, displays its associated `<u-tabpanel>`.
- * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role)
- */
 declare class UHTMLTabElement extends UHTMLElement {
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;
-    attributeChangedCallback(name: string, prev: string): void;
+    attributeChangedCallback(): void;
     get tabsElement(): UHTMLTabsElement | null;
     get tabList(): UHTMLTabListElement | null;
     get selected(): boolean;

package/dist/u-tabs.d.ts

@@ -31,21 +31,17 @@ declare class UHTMLTabListElement extends UHTMLElement {
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    handleEvent(event: Event): void;
+    handleEvent(event?: Event): void;
     get tabsElement(): UHTMLTabsElement | null;
     get tabs(): NodeListOf<UHTMLTabElement>;
     get selectedIndex(): number;
     set selectedIndex(index: number);
 }
-/**
- * The `<u-tab>` HTML element is an interactive element inside a `<u-tablist>` that, when activated, displays its associated `<u-tabpanel>`.
- * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role)
- */
 declare class UHTMLTabElement extends UHTMLElement {
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;
-    attributeChangedCallback(name: string, prev: string): void;
+    attributeChangedCallback(): void;
     get tabsElement(): UHTMLTabsElement | null;
     get tabList(): UHTMLTabListElement | null;
     get selected(): boolean;

package/dist/u-tabs.js

@@ -1,16 +1,18 @@
 // ../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);
+var _a;
 IS_BROWSER && // @ts-expect-error Typescript has not implemented userAgentData yet https://stackoverflow.com/a/71392474
-/^Mac/i.test(navigator.userAgentData?.platform || navigator.platform);
+/^Mac/i.test(((_a = navigator.userAgentData) == null ? void 0 : _a.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;
 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);
+  var _a2;
+  if (value === void 0) return (_a2 = el.getAttribute(name)) != null ? _a2 : null;
+  if (value === null) el.removeAttribute(name);
+  else if (el.getAttribute(name) !== value) el.setAttribute(name, value);
   return null;
 }
 var events = (action, element, rest) => {
@@ -26,6 +28,22 @@ var attachStyle = (element, css) => element.attachShadow({ mode: "open" }).appen
   // Unnamed slot does automatically render all top element nodes
   createElement("style", css)
 );
+var observers = /* @__PURE__ */ new WeakMap();
+var mutationObserver = (element, options) => {
+  if (options === void 0) return observers.get(element);
+  try {
+    observers.get(element).disconnect();
+    observers.delete(element);
+  } catch (err) {
+  }
+  if (options) {
+    const observer = new MutationObserver(
+      (detail) => element.handleEvent({ type: "mutation", detail })
+    );
+    observer.observe(element, options);
+    observers.set(element, observer);
+  }
+};
 var asButton = (event) => {
   const isClick = "key" in event && (event.key === " " || event.key === "Enter");
   if (isClick) event.preventDefault();
@@ -33,7 +51,8 @@ var asButton = (event) => {
   return isClick;
 };
 var getRoot = (node) => {
-  const root = node.getRootNode?.() || node.ownerDocument;
+  var _a2;
+  const root = ((_a2 = node.getRootNode) == null ? void 0 : _a2.call(node)) || node.ownerDocument;
   return root instanceof Document || root instanceof ShadowRoot ? root : document;
 };
 var id = 0;
@@ -53,6 +72,7 @@ var customElements = {
 
 // u-tabs.ts
 var ARIA_CONTROLS = "aria-controls";
+var ARIA_SELECTED = "aria-selected";
 var UHTMLTabsElement = class extends UHTMLElement {
   constructor() {
     super();
@@ -65,7 +85,7 @@ var UHTMLTabsElement = class extends UHTMLElement {
     return getSelectedIndex(this.tabs);
   }
   set selectedIndex(index) {
-    if (this.tabs[index]) attr(this.tabs[index], "aria-selected", "true");
+    setSelected(this.tabs[index]);
   }
   get tabs() {
     return queryWithoutNested("u-tab", this);
@@ -82,17 +102,24 @@ var UHTMLTabListElement = class extends UHTMLElement {
   connectedCallback() {
     attr(this, "role", "tablist");
     on(this, "click,keydown", this);
+    mutationObserver(this, { childList: true });
+    if (this.tabs.length) this.handleEvent();
   }
   disconnectedCallback() {
     off(this, "click,keydown", this);
+    mutationObserver(this, false);
   }
   handleEvent(event) {
+    if (!event || event.type === "mutation") {
+      const tab = this.tabs[Math.max(this.selectedIndex, 0)];
+      return tab == null ? void 0 : tab.setAttribute(ARIA_SELECTED, "true");
+    }
     const { key } = event;
-    const tabs = [...this.getElementsByTagName("u-tab")];
+    const tabs = [...this.tabs];
     const prev = tabs.findIndex((tab) => tab.contains(event.target));
     let next = prev;
     if (event.defaultPrevented || prev === -1) return;
-    if (event.type === "click") tabs[prev].selected = true;
+    if (event.type === "click") setSelected(tabs[prev]);
     if (event.type === "keydown" && !asButton(event)) {
       if (key === "ArrowDown" || key === "ArrowRight")
         next = (prev + 1) % tabs.length;
@@ -116,19 +143,20 @@ var UHTMLTabListElement = class extends UHTMLElement {
     return this.closest("u-tabs");
   }
   get tabs() {
-    return queryWithoutNested("u-tab", this);
+    return this.querySelectorAll("u-tab");
   }
   get selectedIndex() {
     return getSelectedIndex(this.tabs);
   }
   set selectedIndex(index) {
-    if (this.tabs[index]) attr(this.tabs[index], "aria-selected", "true");
+    setSelected(this.tabs[index]);
   }
 };
+var SKIP_ATTR_CHANGE = false;
 var UHTMLTabElement = class extends UHTMLElement {
   // Using ES2015 syntax for backwards compatibility
   static get observedAttributes() {
-    return ["id", "aria-selected", ARIA_CONTROLS];
+    return ["id", ARIA_SELECTED, ARIA_CONTROLS];
   }
   constructor() {
     super();
@@ -138,50 +166,43 @@ var UHTMLTabElement = class extends UHTMLElement {
     );
   }
   connectedCallback() {
-    const panelId = !attr(this, ARIA_CONTROLS) && useId(getPanel(this));
-    const selected = this.selected || ![...queryWithoutNested("u-tab", this.tabList || this)].some(isSelected);
-    attr(this, "aria-selected", `${selected}`);
     attr(this, "role", "tab");
-    this.tabIndex = selected ? 0 : -1;
-    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)
-      for (const tab of queryWithoutNested("u-tab", this.tabList)) {
-        if (tab !== this && isSelected(tab)) {
-          const panel = getPanel(tab);
-          if (panel) panel.hidden = true;
-          attr(tab, "aria-selected", "false");
-          tab.tabIndex = -1;
-        }
-      }
-    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;
-    if (nextPanel) attr(nextPanel, SAFE_LABELLEDBY, useId(this));
-    if (nextPanel) nextPanel.hidden = false;
+    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 (nextPanel) attr(nextPanel, SAFE_LABELLEDBY, useId(this));
+      tabs.forEach((tab, index) => {
+        const panel = getPanel(tab, panels[index]);
+        tab.tabIndex = tab === this ? 0 : -1;
+        attr(tab, ARIA_SELECTED, `${tab === this}`);
+        if (panel) panel.hidden = panel !== nextPanel;
+        if (panel) attr(tab, ARIA_CONTROLS, panel.id);
+      });
+      SKIP_ATTR_CHANGE = false;
+    }
   }
   get tabsElement() {
     return this.closest("u-tabs");
   }
   get tabList() {
-    return this.closest("u-tablist");
+    const tablist = this.parentElement;
+    return (tablist == null ? void 0 : tablist.nodeName) === "U-TABLIST" ? tablist : null;
   }
   get selected() {
-    return isSelected(this);
+    return attr(this, ARIA_SELECTED) === "true";
   }
   set selected(value) {
-    attr(this, "aria-selected", `${!!value}`);
+    attr(this, ARIA_SELECTED, `${!!value}`);
   }
   /** Retrieves the ordinal position of an tab in a tablist. */
   get index() {
     const tabList = this.tabList;
-    return tabList ? [...queryWithoutNested("u-tab", tabList)].indexOf(this) : 0;
+    return tabList ? [...tabList.querySelectorAll("u-tab")].indexOf(this) : 0;
   }
   get panel() {
     return getPanel(this);
@@ -211,24 +232,20 @@ var UHTMLTabPanelElement = class extends UHTMLElement {
   }
   get tabs() {
     const css = `u-tab[${ARIA_CONTROLS}="${this.id}"]`;
-    const root = getRoot(this).querySelectorAll(css);
-    return root.length ? root : document.querySelectorAll(css);
+    return getRoot(this).querySelectorAll(css);
   }
 };
-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 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 getSelectedIndex = (tabs) => [...tabs].findIndex((tab) => attr(tab, ARIA_SELECTED) === "true");
+var setSelected = (tab) => tab && 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`
 );
-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);
 customElements.define("u-tab", UHTMLTabElement);

package/dist/u-tabs.manifest.json

@@ -4,7 +4,7 @@
  "modules": [
   {
    "kind": "javascript-module",
-   "path": "/Users/eirikbacker/Library/Mobile Documents/com~apple~CloudDocs/5-capra/u-elements/packages/u-tabs/u-tabs.ts",
+   "path": "u-tabs.ts",
    "declarations": [
     {
      "kind": "class",
@@ -45,7 +45,7 @@
      ],
      "superclass": {
       "name": "UHTMLElement",
-      "module": "//Users/eirikbacker/Library/Mobile%20Documents/com~apple~CloudDocs/5-capra/u-elements/packages/utils"
+      "module": "/utils"
      },
      "tagName": "u-tabs",
      "customElement": true
@@ -61,6 +61,7 @@
        "parameters": [
         {
          "name": "event",
+         "optional": true,
          "type": {
           "text": "Event"
          }
@@ -93,14 +94,14 @@
      ],
      "superclass": {
       "name": "UHTMLElement",
-      "module": "//Users/eirikbacker/Library/Mobile%20Documents/com~apple~CloudDocs/5-capra/u-elements/packages/utils"
+      "module": "/utils"
      },
      "tagName": "u-tablist",
      "customElement": true
     },
     {
      "kind": "class",
-     "description": "The `<u-tab>` HTML element is an interactive element inside a `<u-tablist>` that, when activated, displays its associated `<u-tabpanel>`.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role)",
+     "description": "",
      "name": "UHTMLTabElement",
      "members": [
       {
@@ -147,14 +148,11 @@
      "attributes": [
       {
        "name": "id"
-      },
-      {
-       "name": "aria-selected"
       }
      ],
      "superclass": {
       "name": "UHTMLElement",
-      "module": "//Users/eirikbacker/Library/Mobile%20Documents/com~apple~CloudDocs/5-capra/u-elements/packages/utils"
+      "module": "/utils"
      },
      "tagName": "u-tab",
      "customElement": true
@@ -188,7 +186,7 @@
      ],
      "superclass": {
       "name": "UHTMLElement",
-      "module": "//Users/eirikbacker/Library/Mobile%20Documents/com~apple~CloudDocs/5-capra/u-elements/packages/utils"
+      "module": "/utils"
      },
      "tagName": "u-tabpanel",
      "customElement": true
@@ -200,7 +198,7 @@
      "name": "UHTMLTabsElement",
      "declaration": {
       "name": "UHTMLTabsElement",
-      "module": "/Users/eirikbacker/Library/Mobile Documents/com~apple~CloudDocs/5-capra/u-elements/packages/u-tabs/u-tabs.ts"
+      "module": "u-tabs.ts"
      }
     },
     {
@@ -208,7 +206,7 @@
      "name": "UHTMLTabListElement",
      "declaration": {
       "name": "UHTMLTabListElement",
-      "module": "/Users/eirikbacker/Library/Mobile Documents/com~apple~CloudDocs/5-capra/u-elements/packages/u-tabs/u-tabs.ts"
+      "module": "u-tabs.ts"
      }
     },
     {
@@ -216,7 +214,7 @@
      "name": "UHTMLTabElement",
      "declaration": {
       "name": "UHTMLTabElement",
-      "module": "/Users/eirikbacker/Library/Mobile Documents/com~apple~CloudDocs/5-capra/u-elements/packages/u-tabs/u-tabs.ts"
+      "module": "u-tabs.ts"
      }
     },
     {
@@ -224,7 +222,7 @@
      "name": "UHTMLTabPanelElement",
      "declaration": {
       "name": "UHTMLTabPanelElement",
-      "module": "/Users/eirikbacker/Library/Mobile Documents/com~apple~CloudDocs/5-capra/u-elements/packages/u-tabs/u-tabs.ts"
+      "module": "u-tabs.ts"
      }
     },
     {
@@ -232,7 +230,7 @@
      "name": "u-tabs",
      "declaration": {
       "name": "UHTMLTabsElement",
-      "module": "/Users/eirikbacker/Library/Mobile Documents/com~apple~CloudDocs/5-capra/u-elements/packages/u-tabs/u-tabs.ts"
+      "module": "u-tabs.ts"
      }
     },
     {
@@ -240,7 +238,7 @@
      "name": "u-tablist",
      "declaration": {
       "name": "UHTMLTabListElement",
-      "module": "/Users/eirikbacker/Library/Mobile Documents/com~apple~CloudDocs/5-capra/u-elements/packages/u-tabs/u-tabs.ts"
+      "module": "u-tabs.ts"
      }
     },
     {
@@ -248,7 +246,7 @@
      "name": "u-tab",
      "declaration": {
       "name": "UHTMLTabElement",
-      "module": "/Users/eirikbacker/Library/Mobile Documents/com~apple~CloudDocs/5-capra/u-elements/packages/u-tabs/u-tabs.ts"
+      "module": "u-tabs.ts"
      }
     },
     {
@@ -256,7 +254,7 @@
      "name": "u-tabpanel",
      "declaration": {
       "name": "UHTMLTabPanelElement",
-      "module": "/Users/eirikbacker/Library/Mobile Documents/com~apple~CloudDocs/5-capra/u-elements/packages/u-tabs/u-tabs.ts"
+      "module": "u-tabs.ts"
      }
     }
    ]

package/dist/u-tabs.vscode.json

@@ -16,11 +16,8 @@
     },
     {
       "name": "u-tab",
-      "description": "The `<u-tab>` HTML element is an interactive element inside a `<u-tablist>` that, when activated, displays its associated `<u-tabpanel>`.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role)\n---\n",
-      "attributes": [
-        { "name": "id", "values": [] },
-        { "name": "aria-selected", "values": [] }
-      ],
+      "description": "\n---\n",
+      "attributes": [{ "name": "id", "values": [] }],
       "references": []
     },
     {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@u-elements/u-tabs",
-	"version": "0.0.7",
+	"version": "0.0.9",
 	"license": "MIT",
 	"description": "HTML tags, just truly accessible",
 	"homepage": "https://u-elements.github.io/u-elements/",
@@ -14,12 +14,15 @@
 	],
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/u-elements/u-elements.git"
+		"url": "git+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"
+		"build": "tsup --config ../../tsup.config.ts",
+		"publish:patch": "npm version patch && git push --tags origin main && npm publish",
+		"publish:minor": "npm version minor && git push --tags origin main && npm publish",
+		"publish:major": "npm version major && git push --tags origin main && npm publish"
 	}
 }