@u-elements/u-tabs 0.0.1 → 0.0.2

package/dist/u-tabs.cjs

@@ -2,36 +2,22 @@
 
 // ../utils.ts
 var IS_BROWSER = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.navigator !== "undefined";
-var IS_ANDROID = IS_BROWSER && /android/i.test(window.navigator.userAgent);
-var ARIA_CONTROLS = "aria-controls";
-var ARIA_LABELLEDBY = IS_ANDROID ? "data-labelledby" : "aria-labelledby";
-var ARIA_SELECTED = "aria-selected";
+var IS_ANDROID = IS_BROWSER && /android/i.test(navigator.userAgent);
+var SAFE_LABELLEDBY = `${IS_ANDROID ? "data" : "aria"}-labelledby`;
 var DISPLAY_BLOCK = ":host(:not([hidden])) { display: block }";
 var UHTMLElement = typeof HTMLElement === "undefined" ? class {
 } : HTMLElement;
-var bind = (element, rest, action) => rest[0].split(",").forEach((type) => {
+var events = (action, element, rest) => rest[0].split(",").forEach((type) => {
   rest[0] = type;
   Element.prototype[`${action}EventListener`].apply(element, rest);
 });
-var on = (element, ...rest) => bind(element, rest, "add");
-var off = (element, ...rest) => bind(element, rest, "remove");
+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(
   createElement("slot"),
   // Unnamed slot does automatically render all top element nodes
   createElement("style", { textContent: css })
 );
-function attr(element, name, value) {
-  if (element instanceof Element) {
-    if (typeof name === "object")
-      Object.entries(name).map(([name2, value2]) => attr(element, name2, value2));
-    else if (value === void 0)
-      return element.getAttribute(name);
-    else if (value === null)
-      element.removeAttribute(name);
-    else if (element.getAttribute(name) !== `${value}`)
-      element.setAttribute(name, `${value}`);
-  }
-}
 var asButton = (event) => {
   const isClick = "key" in event && (event.key === " " || event.key === "Enter");
   if (isClick)
@@ -42,13 +28,14 @@ var asButton = (event) => {
 };
 var getRoot = (node) => node.getRootNode();
 var id = 0;
-var useId = (el) => el ? el.id || (el.id = `:${el.nodeName.toLowerCase()}${(++id).toString(32)}`) : void 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 customElements = {
   define: (name, instance) => !IS_BROWSER || window.customElements.get(name) || window.customElements.define(name, instance)
 };
 
 // u-tabs.ts
+var ARIA_CONTROLS = "aria-controls";
 var UHTMLTabsElement = class extends UHTMLElement {
   constructor() {
     super();
@@ -58,10 +45,10 @@ var UHTMLTabsElement = class extends UHTMLElement {
     return queryWithoutNested("u-tablist", this)[0] || null;
   }
   get selectedIndex() {
-    return [...this.tabs].findIndex((tab) => attr(tab, ARIA_SELECTED) === "true");
+    return [...this.tabs].findIndex((tab) => tab.ariaSelected === "true");
   }
   set selectedIndex(index) {
-    attr(this.tabs[index], ARIA_SELECTED, true);
+    this.tabs[index].ariaSelected = "true";
   }
   get tabs() {
     return queryWithoutNested("u-tab", this);
@@ -76,7 +63,7 @@ var UHTMLTabListElement = class extends UHTMLElement {
     attachStyle(this, DISPLAY_BLOCK);
   }
   connectedCallback() {
-    attr(this, "role", "tablist");
+    this.role = "tablist";
     on(this, "click,keydown", this);
   }
   disconnectedCallback() {
@@ -109,41 +96,42 @@ var UHTMLTabListElement = class extends UHTMLElement {
     return this.closest("u-tabs");
   }
 };
-var skipAttrChange = false;
+var SKIP_ATTR_CHANGE = false;
 var UHTMLTabElement = class extends UHTMLElement {
-  static get observedAttributes() {
-    return ["id", ARIA_SELECTED, ARIA_CONTROLS];
-  }
   constructor() {
     super();
-    attachStyle(this, `:host(:not([hidden])) { cursor: pointer; display: inline-block }`);
+    attachStyle(
+      this,
+      `:host(:not([hidden])) { cursor: pointer; display: inline-block }`
+    );
   }
   connectedCallback() {
     this.selected = !!this.selected;
   }
   attributeChangedCallback(_name, prev, next) {
-    if (!skipAttrChange && prev !== next && (skipAttrChange = true)) {
+    if (!SKIP_ATTR_CHANGE && prev !== next && (SKIP_ATTR_CHANGE = true)) {
       const { tabs = [], panels = [], selectedIndex } = this.tabsElement || {};
       const selected = this.selected ? this : tabs[selectedIndex || 0] || this;
       let selectedPanel;
-      panels.forEach((panel) => attr(panel, { [ARIA_LABELLEDBY]: null, hidden: "" }));
+      panels.forEach((panel) => {
+        panel.removeAttribute(SAFE_LABELLEDBY);
+        panel.hidden = true;
+      });
       tabs.forEach((tab, index) => {
-        const tabindex = selected === tab ? 0 : -1;
         const panel = getPanel(tab) || panels[index] || null;
-        if (!tabindex && panel)
+        if (selected === tab && panel)
           selectedPanel = panel;
-        attr(tab, {
-          [ARIA_SELECTED]: !tabindex,
-          [ARIA_CONTROLS]: useId(panel),
-          role: "tab",
-          tabindex
-        });
-        attr(panel, {
-          [ARIA_LABELLEDBY]: useId(selectedPanel === panel ? selected : tab),
-          hidden: selectedPanel === panel ? null : ""
-        });
+        tab.role = "tab";
+        tab.tabIndex = selected === tab ? 0 : -1;
+        tab.ariaSelected = `${selected === tab}`;
+        tab.setAttribute(ARIA_CONTROLS, useId(panel));
+        panel?.toggleAttribute("hidden", selectedPanel !== panel);
+        panel?.setAttribute(
+          SAFE_LABELLEDBY,
+          useId(selectedPanel === panel ? selected : tab)
+        );
       });
-      skipAttrChange = false;
+      SKIP_ATTR_CHANGE = false;
     }
   }
   get tabsElement() {
@@ -153,10 +141,10 @@ var UHTMLTabElement = class extends UHTMLElement {
     return this.closest("u-tablist");
   }
   get selected() {
-    return attr(this, ARIA_SELECTED) === "true";
+    return this.ariaSelected === "true";
   }
   set selected(value) {
-    attr(this, ARIA_SELECTED, !!value);
+    this.ariaSelected = `${value}`;
   }
   /** Retrieves the ordinal position of an tab in a tablist. */
   get index() {
@@ -166,22 +154,20 @@ var UHTMLTabElement = class extends UHTMLElement {
     return getPanel(this);
   }
 };
+UHTMLTabElement.observedAttributes = ["id", "aria-selected", ARIA_CONTROLS];
 var UHTMLTabPanelElement = class extends UHTMLElement {
-  static get observedAttributes() {
-    return ["id"];
-  }
   constructor() {
     super();
     attachStyle(this, DISPLAY_BLOCK);
   }
   connectedCallback() {
-    attr(this, "role", "tabpanel");
+    this.role = "tabpanel";
     this.hidden = Array.from(this.tabs).every((tab) => !tab.selected);
   }
   attributeChangedCallback(_name, prev, next) {
-    if (!skipAttrChange && prev !== next) {
-      Array.from(getTabs(this, prev), (tab) => attr(tab, ARIA_CONTROLS, next));
-    }
+    if (SKIP_ATTR_CHANGE || prev === next)
+      return;
+    getTabs(this, prev).forEach((tab) => tab.setAttribute(ARIA_CONTROLS, next));
   }
   get tabsElement() {
     return this.closest("u-tabs");
@@ -190,12 +176,13 @@ var UHTMLTabPanelElement = class extends UHTMLElement {
     return getTabs(this, this.id);
   }
 };
+UHTMLTabPanelElement.observedAttributes = ["id"];
 var queryWithoutNested = (tag, self) => {
   const selector = `${tag}:not(:scope ${self.nodeName}:not(:scope) ${tag})`;
   return self.querySelectorAll(selector);
 };
 var getPanel = (self) => {
-  const css = `u-tabpanel[id="${attr(self, ARIA_CONTROLS)}"]`;
+  const css = `u-tabpanel[id="${self.getAttribute(ARIA_CONTROLS)}"]`;
   return getRoot(self).querySelector(css) || document.querySelector(css);
 };
 var getTabs = (self, id2) => {

package/dist/u-tabs.d.cts

@@ -39,7 +39,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 get observedAttributes(): string[];
+    static observedAttributes: string[];
     constructor();
     connectedCallback(): void;
     attributeChangedCallback(_name: string, prev: string, next: string): void;
@@ -56,7 +56,7 @@ 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[];
+    static observedAttributes: string[];
     constructor();
     connectedCallback(): void;
     attributeChangedCallback(_name: string, prev: string, next: string): void;
@@ -65,15 +65,15 @@ declare class UHTMLTabPanelElement extends UHTMLElement {
 }
 
 export { UHTMLTabElement, UHTMLTabListElement, UHTMLTabPanelElement, UHTMLTabsElement };
-
 import type * as VueJSX from '@vue/runtime-dom'
 import type { JSX as QwikJSX } from '@builder.io/qwik/jsx-runtime'
 import type { JSX as ReactJSX } from 'react'
 import type { JSX as SolidJSX } from 'solid-js'
 import type { SvelteHTMLElements } from 'svelte/elements'
+
 export type VueTabs = VueJSX.IntrinsicElementAttributes['div']
 export type QwikTabs = QwikJSX.IntrinsicElements['div']
-export type ReactTabs = ReactJSX.IntrinsicElements['div']
+export type ReactTabs = ReactJSX.IntrinsicElements['div'] & { class?: string }
 export type SolidJSTabs = SolidJSX.HTMLElementTags['div']
 export type SvelteTabs = SvelteHTMLElements['div']
 
@@ -83,10 +83,9 @@ declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export in
 declare global { namespace React.JSX { interface IntrinsicElements { 'u-tabs': ReactTabs } } }
 declare module 'solid-js' { namespace JSX { interface IntrinsicElements { 'u-tabs': SolidJSTabs } } }
 declare module 'svelte/elements' { interface SvelteHTMLElements { 'u-tabs': SvelteTabs } }
-
 export type VueTablist = VueJSX.IntrinsicElementAttributes['div']
 export type QwikTablist = QwikJSX.IntrinsicElements['div']
-export type ReactTablist = ReactJSX.IntrinsicElements['div']
+export type ReactTablist = ReactJSX.IntrinsicElements['div'] & { class?: string }
 export type SolidJSTablist = SolidJSX.HTMLElementTags['div']
 export type SvelteTablist = SvelteHTMLElements['div']
 
@@ -96,10 +95,9 @@ declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export in
 declare global { namespace React.JSX { interface IntrinsicElements { 'u-tablist': ReactTablist } } }
 declare module 'solid-js' { namespace JSX { interface IntrinsicElements { 'u-tablist': SolidJSTablist } } }
 declare module 'svelte/elements' { interface SvelteHTMLElements { 'u-tablist': SvelteTablist } }
-
 export type VueTab = VueJSX.IntrinsicElementAttributes['div']
 export type QwikTab = QwikJSX.IntrinsicElements['div']
-export type ReactTab = ReactJSX.IntrinsicElements['div']
+export type ReactTab = ReactJSX.IntrinsicElements['div'] & { class?: string }
 export type SolidJSTab = SolidJSX.HTMLElementTags['div']
 export type SvelteTab = SvelteHTMLElements['div']
 
@@ -109,10 +107,9 @@ declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export in
 declare global { namespace React.JSX { interface IntrinsicElements { 'u-tab': ReactTab } } }
 declare module 'solid-js' { namespace JSX { interface IntrinsicElements { 'u-tab': SolidJSTab } } }
 declare module 'svelte/elements' { interface SvelteHTMLElements { 'u-tab': SvelteTab } }
-
 export type VueTabpanel = VueJSX.IntrinsicElementAttributes['div']
 export type QwikTabpanel = QwikJSX.IntrinsicElements['div']
-export type ReactTabpanel = ReactJSX.IntrinsicElements['div']
+export type ReactTabpanel = ReactJSX.IntrinsicElements['div'] & { class?: string }
 export type SolidJSTabpanel = SolidJSX.HTMLElementTags['div']
 export type SvelteTabpanel = SvelteHTMLElements['div']
 

package/dist/u-tabs.d.ts

@@ -39,7 +39,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 get observedAttributes(): string[];
+    static observedAttributes: string[];
     constructor();
     connectedCallback(): void;
     attributeChangedCallback(_name: string, prev: string, next: string): void;
@@ -56,7 +56,7 @@ 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[];
+    static observedAttributes: string[];
     constructor();
     connectedCallback(): void;
     attributeChangedCallback(_name: string, prev: string, next: string): void;
@@ -65,15 +65,15 @@ declare class UHTMLTabPanelElement extends UHTMLElement {
 }
 
 export { UHTMLTabElement, UHTMLTabListElement, UHTMLTabPanelElement, UHTMLTabsElement };
-
 import type * as VueJSX from '@vue/runtime-dom'
 import type { JSX as QwikJSX } from '@builder.io/qwik/jsx-runtime'
 import type { JSX as ReactJSX } from 'react'
 import type { JSX as SolidJSX } from 'solid-js'
 import type { SvelteHTMLElements } from 'svelte/elements'
+
 export type VueTabs = VueJSX.IntrinsicElementAttributes['div']
 export type QwikTabs = QwikJSX.IntrinsicElements['div']
-export type ReactTabs = ReactJSX.IntrinsicElements['div']
+export type ReactTabs = ReactJSX.IntrinsicElements['div'] & { class?: string }
 export type SolidJSTabs = SolidJSX.HTMLElementTags['div']
 export type SvelteTabs = SvelteHTMLElements['div']
 
@@ -83,10 +83,9 @@ declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export in
 declare global { namespace React.JSX { interface IntrinsicElements { 'u-tabs': ReactTabs } } }
 declare module 'solid-js' { namespace JSX { interface IntrinsicElements { 'u-tabs': SolidJSTabs } } }
 declare module 'svelte/elements' { interface SvelteHTMLElements { 'u-tabs': SvelteTabs } }
-
 export type VueTablist = VueJSX.IntrinsicElementAttributes['div']
 export type QwikTablist = QwikJSX.IntrinsicElements['div']
-export type ReactTablist = ReactJSX.IntrinsicElements['div']
+export type ReactTablist = ReactJSX.IntrinsicElements['div'] & { class?: string }
 export type SolidJSTablist = SolidJSX.HTMLElementTags['div']
 export type SvelteTablist = SvelteHTMLElements['div']
 
@@ -96,10 +95,9 @@ declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export in
 declare global { namespace React.JSX { interface IntrinsicElements { 'u-tablist': ReactTablist } } }
 declare module 'solid-js' { namespace JSX { interface IntrinsicElements { 'u-tablist': SolidJSTablist } } }
 declare module 'svelte/elements' { interface SvelteHTMLElements { 'u-tablist': SvelteTablist } }
-
 export type VueTab = VueJSX.IntrinsicElementAttributes['div']
 export type QwikTab = QwikJSX.IntrinsicElements['div']
-export type ReactTab = ReactJSX.IntrinsicElements['div']
+export type ReactTab = ReactJSX.IntrinsicElements['div'] & { class?: string }
 export type SolidJSTab = SolidJSX.HTMLElementTags['div']
 export type SvelteTab = SvelteHTMLElements['div']
 
@@ -109,10 +107,9 @@ declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export in
 declare global { namespace React.JSX { interface IntrinsicElements { 'u-tab': ReactTab } } }
 declare module 'solid-js' { namespace JSX { interface IntrinsicElements { 'u-tab': SolidJSTab } } }
 declare module 'svelte/elements' { interface SvelteHTMLElements { 'u-tab': SvelteTab } }
-
 export type VueTabpanel = VueJSX.IntrinsicElementAttributes['div']
 export type QwikTabpanel = QwikJSX.IntrinsicElements['div']
-export type ReactTabpanel = ReactJSX.IntrinsicElements['div']
+export type ReactTabpanel = ReactJSX.IntrinsicElements['div'] & { class?: string }
 export type SolidJSTabpanel = SolidJSX.HTMLElementTags['div']
 export type SvelteTabpanel = SvelteHTMLElements['div']
 

package/dist/u-tabs.js

@@ -1,35 +1,21 @@
 // ../utils.ts
 var IS_BROWSER = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.navigator !== "undefined";
-var IS_ANDROID = IS_BROWSER && /android/i.test(window.navigator.userAgent);
-var ARIA_CONTROLS = "aria-controls";
-var ARIA_LABELLEDBY = IS_ANDROID ? "data-labelledby" : "aria-labelledby";
-var ARIA_SELECTED = "aria-selected";
+var IS_ANDROID = IS_BROWSER && /android/i.test(navigator.userAgent);
+var SAFE_LABELLEDBY = `${IS_ANDROID ? "data" : "aria"}-labelledby`;
 var DISPLAY_BLOCK = ":host(:not([hidden])) { display: block }";
 var UHTMLElement = typeof HTMLElement === "undefined" ? class {
 } : HTMLElement;
-var bind = (element, rest, action) => rest[0].split(",").forEach((type) => {
+var events = (action, element, rest) => rest[0].split(",").forEach((type) => {
   rest[0] = type;
   Element.prototype[`${action}EventListener`].apply(element, rest);
 });
-var on = (element, ...rest) => bind(element, rest, "add");
-var off = (element, ...rest) => bind(element, rest, "remove");
+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(
   createElement("slot"),
   // Unnamed slot does automatically render all top element nodes
   createElement("style", { textContent: css })
 );
-function attr(element, name, value) {
-  if (element instanceof Element) {
-    if (typeof name === "object")
-      Object.entries(name).map(([name2, value2]) => attr(element, name2, value2));
-    else if (value === void 0)
-      return element.getAttribute(name);
-    else if (value === null)
-      element.removeAttribute(name);
-    else if (element.getAttribute(name) !== `${value}`)
-      element.setAttribute(name, `${value}`);
-  }
-}
 var asButton = (event) => {
   const isClick = "key" in event && (event.key === " " || event.key === "Enter");
   if (isClick)
@@ -40,13 +26,14 @@ var asButton = (event) => {
 };
 var getRoot = (node) => node.getRootNode();
 var id = 0;
-var useId = (el) => el ? el.id || (el.id = `:${el.nodeName.toLowerCase()}${(++id).toString(32)}`) : void 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 customElements = {
   define: (name, instance) => !IS_BROWSER || window.customElements.get(name) || window.customElements.define(name, instance)
 };
 
 // u-tabs.ts
+var ARIA_CONTROLS = "aria-controls";
 var UHTMLTabsElement = class extends UHTMLElement {
   constructor() {
     super();
@@ -56,10 +43,10 @@ var UHTMLTabsElement = class extends UHTMLElement {
     return queryWithoutNested("u-tablist", this)[0] || null;
   }
   get selectedIndex() {
-    return [...this.tabs].findIndex((tab) => attr(tab, ARIA_SELECTED) === "true");
+    return [...this.tabs].findIndex((tab) => tab.ariaSelected === "true");
   }
   set selectedIndex(index) {
-    attr(this.tabs[index], ARIA_SELECTED, true);
+    this.tabs[index].ariaSelected = "true";
   }
   get tabs() {
     return queryWithoutNested("u-tab", this);
@@ -74,7 +61,7 @@ var UHTMLTabListElement = class extends UHTMLElement {
     attachStyle(this, DISPLAY_BLOCK);
   }
   connectedCallback() {
-    attr(this, "role", "tablist");
+    this.role = "tablist";
     on(this, "click,keydown", this);
   }
   disconnectedCallback() {
@@ -107,41 +94,42 @@ var UHTMLTabListElement = class extends UHTMLElement {
     return this.closest("u-tabs");
   }
 };
-var skipAttrChange = false;
+var SKIP_ATTR_CHANGE = false;
 var UHTMLTabElement = class extends UHTMLElement {
-  static get observedAttributes() {
-    return ["id", ARIA_SELECTED, ARIA_CONTROLS];
-  }
   constructor() {
     super();
-    attachStyle(this, `:host(:not([hidden])) { cursor: pointer; display: inline-block }`);
+    attachStyle(
+      this,
+      `:host(:not([hidden])) { cursor: pointer; display: inline-block }`
+    );
   }
   connectedCallback() {
     this.selected = !!this.selected;
   }
   attributeChangedCallback(_name, prev, next) {
-    if (!skipAttrChange && prev !== next && (skipAttrChange = true)) {
+    if (!SKIP_ATTR_CHANGE && prev !== next && (SKIP_ATTR_CHANGE = true)) {
       const { tabs = [], panels = [], selectedIndex } = this.tabsElement || {};
       const selected = this.selected ? this : tabs[selectedIndex || 0] || this;
       let selectedPanel;
-      panels.forEach((panel) => attr(panel, { [ARIA_LABELLEDBY]: null, hidden: "" }));
+      panels.forEach((panel) => {
+        panel.removeAttribute(SAFE_LABELLEDBY);
+        panel.hidden = true;
+      });
       tabs.forEach((tab, index) => {
-        const tabindex = selected === tab ? 0 : -1;
         const panel = getPanel(tab) || panels[index] || null;
-        if (!tabindex && panel)
+        if (selected === tab && panel)
           selectedPanel = panel;
-        attr(tab, {
-          [ARIA_SELECTED]: !tabindex,
-          [ARIA_CONTROLS]: useId(panel),
-          role: "tab",
-          tabindex
-        });
-        attr(panel, {
-          [ARIA_LABELLEDBY]: useId(selectedPanel === panel ? selected : tab),
-          hidden: selectedPanel === panel ? null : ""
-        });
+        tab.role = "tab";
+        tab.tabIndex = selected === tab ? 0 : -1;
+        tab.ariaSelected = `${selected === tab}`;
+        tab.setAttribute(ARIA_CONTROLS, useId(panel));
+        panel?.toggleAttribute("hidden", selectedPanel !== panel);
+        panel?.setAttribute(
+          SAFE_LABELLEDBY,
+          useId(selectedPanel === panel ? selected : tab)
+        );
       });
-      skipAttrChange = false;
+      SKIP_ATTR_CHANGE = false;
     }
   }
   get tabsElement() {
@@ -151,10 +139,10 @@ var UHTMLTabElement = class extends UHTMLElement {
     return this.closest("u-tablist");
   }
   get selected() {
-    return attr(this, ARIA_SELECTED) === "true";
+    return this.ariaSelected === "true";
   }
   set selected(value) {
-    attr(this, ARIA_SELECTED, !!value);
+    this.ariaSelected = `${value}`;
   }
   /** Retrieves the ordinal position of an tab in a tablist. */
   get index() {
@@ -164,22 +152,20 @@ var UHTMLTabElement = class extends UHTMLElement {
     return getPanel(this);
   }
 };
+UHTMLTabElement.observedAttributes = ["id", "aria-selected", ARIA_CONTROLS];
 var UHTMLTabPanelElement = class extends UHTMLElement {
-  static get observedAttributes() {
-    return ["id"];
-  }
   constructor() {
     super();
     attachStyle(this, DISPLAY_BLOCK);
   }
   connectedCallback() {
-    attr(this, "role", "tabpanel");
+    this.role = "tabpanel";
     this.hidden = Array.from(this.tabs).every((tab) => !tab.selected);
   }
   attributeChangedCallback(_name, prev, next) {
-    if (!skipAttrChange && prev !== next) {
-      Array.from(getTabs(this, prev), (tab) => attr(tab, ARIA_CONTROLS, next));
-    }
+    if (SKIP_ATTR_CHANGE || prev === next)
+      return;
+    getTabs(this, prev).forEach((tab) => tab.setAttribute(ARIA_CONTROLS, next));
   }
   get tabsElement() {
     return this.closest("u-tabs");
@@ -188,12 +174,13 @@ var UHTMLTabPanelElement = class extends UHTMLElement {
     return getTabs(this, this.id);
   }
 };
+UHTMLTabPanelElement.observedAttributes = ["id"];
 var queryWithoutNested = (tag, self) => {
   const selector = `${tag}:not(:scope ${self.nodeName}:not(:scope) ${tag})`;
   return self.querySelectorAll(selector);
 };
 var getPanel = (self) => {
-  const css = `u-tabpanel[id="${attr(self, ARIA_CONTROLS)}"]`;
+  const css = `u-tabpanel[id="${self.getAttribute(ARIA_CONTROLS)}"]`;
   return getRoot(self).querySelector(css) || document.querySelector(css);
 };
 var getTabs = (self, id2) => {

package/dist/u-tabs.manifest.json

@@ -4,7 +4,7 @@
  "modules": [
   {
    "kind": "javascript-module",
-   "path": "u-tabs.ts",
+   "path": "/Users/eirikbacker/Library/Mobile Documents/com~apple~CloudDocs/5-capra/u-elements/packages/u-tabs/u-tabs.ts",
    "declarations": [
     {
      "kind": "class",
@@ -45,7 +45,7 @@
      ],
      "superclass": {
       "name": "UHTMLElement",
-      "module": "/utils"
+      "module": "//Users/eirikbacker/Library/Mobile%20Documents/com~apple~CloudDocs/5-capra/u-elements/packages/utils"
      },
      "tagName": "u-tabs",
      "customElement": true
@@ -78,7 +78,7 @@
      ],
      "superclass": {
       "name": "UHTMLElement",
-      "module": "/utils"
+      "module": "//Users/eirikbacker/Library/Mobile%20Documents/com~apple~CloudDocs/5-capra/u-elements/packages/utils"
      },
      "tagName": "u-tablist",
      "customElement": true
@@ -132,11 +132,14 @@
      "attributes": [
       {
        "name": "id"
+      },
+      {
+       "name": "aria-selected"
       }
      ],
      "superclass": {
       "name": "UHTMLElement",
-      "module": "/utils"
+      "module": "//Users/eirikbacker/Library/Mobile%20Documents/com~apple~CloudDocs/5-capra/u-elements/packages/utils"
      },
      "tagName": "u-tab",
      "customElement": true
@@ -170,7 +173,7 @@
      ],
      "superclass": {
       "name": "UHTMLElement",
-      "module": "/utils"
+      "module": "//Users/eirikbacker/Library/Mobile%20Documents/com~apple~CloudDocs/5-capra/u-elements/packages/utils"
      },
      "tagName": "u-tabpanel",
      "customElement": true
@@ -182,7 +185,7 @@
      "name": "UHTMLTabsElement",
      "declaration": {
       "name": "UHTMLTabsElement",
-      "module": "u-tabs.ts"
+      "module": "/Users/eirikbacker/Library/Mobile Documents/com~apple~CloudDocs/5-capra/u-elements/packages/u-tabs/u-tabs.ts"
      }
     },
     {
@@ -190,7 +193,7 @@
      "name": "UHTMLTabListElement",
      "declaration": {
       "name": "UHTMLTabListElement",
-      "module": "u-tabs.ts"
+      "module": "/Users/eirikbacker/Library/Mobile Documents/com~apple~CloudDocs/5-capra/u-elements/packages/u-tabs/u-tabs.ts"
      }
     },
     {
@@ -198,7 +201,7 @@
      "name": "UHTMLTabElement",
      "declaration": {
       "name": "UHTMLTabElement",
-      "module": "u-tabs.ts"
+      "module": "/Users/eirikbacker/Library/Mobile Documents/com~apple~CloudDocs/5-capra/u-elements/packages/u-tabs/u-tabs.ts"
      }
     },
     {
@@ -206,7 +209,7 @@
      "name": "UHTMLTabPanelElement",
      "declaration": {
       "name": "UHTMLTabPanelElement",
-      "module": "u-tabs.ts"
+      "module": "/Users/eirikbacker/Library/Mobile Documents/com~apple~CloudDocs/5-capra/u-elements/packages/u-tabs/u-tabs.ts"
      }
     },
     {
@@ -214,7 +217,7 @@
      "name": "u-tabs",
      "declaration": {
       "name": "UHTMLTabsElement",
-      "module": "u-tabs.ts"
+      "module": "/Users/eirikbacker/Library/Mobile Documents/com~apple~CloudDocs/5-capra/u-elements/packages/u-tabs/u-tabs.ts"
      }
     },
     {
@@ -222,7 +225,7 @@
      "name": "u-tablist",
      "declaration": {
       "name": "UHTMLTabListElement",
-      "module": "u-tabs.ts"
+      "module": "/Users/eirikbacker/Library/Mobile Documents/com~apple~CloudDocs/5-capra/u-elements/packages/u-tabs/u-tabs.ts"
      }
     },
     {
@@ -230,7 +233,7 @@
      "name": "u-tab",
      "declaration": {
       "name": "UHTMLTabElement",
-      "module": "u-tabs.ts"
+      "module": "/Users/eirikbacker/Library/Mobile Documents/com~apple~CloudDocs/5-capra/u-elements/packages/u-tabs/u-tabs.ts"
      }
     },
     {
@@ -238,7 +241,7 @@
      "name": "u-tabpanel",
      "declaration": {
       "name": "UHTMLTabPanelElement",
-      "module": "u-tabs.ts"
+      "module": "/Users/eirikbacker/Library/Mobile Documents/com~apple~CloudDocs/5-capra/u-elements/packages/u-tabs/u-tabs.ts"
      }
     }
    ]

package/dist/u-tabs.vscode.json

@@ -17,7 +17,10 @@
     {
       "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": [] }],
+      "attributes": [
+        { "name": "id", "values": [] },
+        { "name": "aria-selected", "values": [] }
+      ],
       "references": []
     },
     {

package/package.json

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