@u-elements/u-tabs 0.0.2 → 0.0.4

package/dist/u-tabs.cjs

@@ -20,10 +20,8 @@ var attachStyle = (element, css) => element.attachShadow({ mode: "closed" }).app
 );
 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();
+  if (isClick) event.preventDefault();
+  if (isClick && event.target instanceof HTMLElement) event.target.click();
   return isClick;
 };
 var getRoot = (node) => node.getRootNode();
@@ -45,10 +43,10 @@ var UHTMLTabsElement = class extends UHTMLElement {
     return queryWithoutNested("u-tablist", this)[0] || null;
   }
   get selectedIndex() {
-    return [...this.tabs].findIndex((tab) => tab.ariaSelected === "true");
+    return getSelectedIndex(this.tabs);
   }
   set selectedIndex(index) {
-    this.tabs[index].ariaSelected = "true";
+    if (this.tabs[index]) this.tabs[index].ariaSelected = "true";
   }
   get tabs() {
     return queryWithoutNested("u-tab", this);
@@ -72,31 +70,42 @@ var UHTMLTabListElement = class extends UHTMLElement {
   handleEvent(event) {
     const { key } = event;
     const tabs = [...this.getElementsByTagName("u-tab")];
-    let index = tabs.findIndex((tab) => tab.contains(event.target));
-    if (event.defaultPrevented || index === -1)
-      return;
-    if (event.type === "click")
-      tabs[index].selected = true;
+    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 === "keydown" && !asButton(event)) {
       if (key === "ArrowDown" || key === "ArrowRight")
-        index = ++index % tabs.length;
+        next = (prev + 1) % tabs.length;
       else if (key === "ArrowUp" || key === "ArrowLeft")
-        index = (index || tabs.length) - 1;
-      else if (key === "End")
-        index = tabs.length - 1;
-      else if (key === "Home")
-        index = 0;
-      else
-        return;
-      event.preventDefault();
-      tabs[index].focus();
+        next = (prev || tabs.length) - 1;
+      else if (key === "End") next = tabs.length - 1;
+      else if (key === "Home") next = 0;
+      else if (key === "Tab") next = getSelectedIndex(tabs);
+      else return;
+      setTimeout(() => {
+        tabs[prev].tabIndex = -1;
+        tabs[next].tabIndex = 0;
+      });
+      if (key !== "Tab") {
+        event.preventDefault();
+        tabs[next].focus();
+      }
     }
   }
   get tabsElement() {
     return this.closest("u-tabs");
   }
+  get tabs() {
+    return queryWithoutNested("u-tab", this);
+  }
+  get selectedIndex() {
+    return getSelectedIndex(this.tabs);
+  }
+  set selectedIndex(index) {
+    if (this.tabs[index]) this.tabs[index].ariaSelected = "true";
+  }
 };
-var SKIP_ATTR_CHANGE = false;
 var UHTMLTabElement = class extends UHTMLElement {
   constructor() {
     super();
@@ -106,33 +115,33 @@ var UHTMLTabElement = class extends UHTMLElement {
     );
   }
   connectedCallback() {
-    this.selected = !!this.selected;
-  }
-  attributeChangedCallback(_name, prev, next) {
-    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) => {
-        panel.removeAttribute(SAFE_LABELLEDBY);
-        panel.hidden = true;
-      });
-      tabs.forEach((tab, index) => {
-        const panel = getPanel(tab) || panels[index] || null;
-        if (selected === tab && panel)
-          selectedPanel = panel;
-        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)
-        );
+    const selected = this.selected || [...queryWithoutNested("u-tab", this.tabList || this)].every(
+      (tab) => tab.ariaSelected !== "true"
+    );
+    this.role = "tab";
+    this.tabIndex = selected ? 0 : -1;
+    this.ariaSelected = `${selected}`;
+  }
+  attributeChangedCallback(name, prev) {
+    if (!this.selected) return;
+    const nextPanel = getPanel(this);
+    const nextPanelId = useId(nextPanel);
+    if (this.tabList)
+      queryWithoutNested("u-tab", this.tabList).forEach((tab) => {
+        const isUnselect = tab !== this && tab.ariaSelected === "true";
+        const prevPanel = isUnselect && getPanel(tab);
+        if (prevPanel && prevPanel !== nextPanel) prevPanel.hidden = true;
+        if (isUnselect) {
+          tab.ariaSelected = "false";
+          tab.tabIndex = -1;
+        }
       });
-      SKIP_ATTR_CHANGE = false;
-    }
+    if (name === ARIA_CONTROLS) getPanel(this, prev)?.setAttribute("hidden", "");
+    if (this.getAttribute(ARIA_CONTROLS) !== nextPanelId)
+      this.setAttribute(ARIA_CONTROLS, nextPanelId);
+    this.tabIndex = 0;
+    nextPanel?.setAttribute(SAFE_LABELLEDBY, useId(this));
+    nextPanel?.removeAttribute("hidden");
   }
   get tabsElement() {
     return this.closest("u-tabs");
@@ -144,11 +153,12 @@ var UHTMLTabElement = class extends UHTMLElement {
     return this.ariaSelected === "true";
   }
   set selected(value) {
-    this.ariaSelected = `${value}`;
+    this.ariaSelected = `${!!value}`;
   }
   /** Retrieves the ordinal position of an tab in a tablist. */
   get index() {
-    return Array.from(this.tabsElement?.tabs || []).indexOf(this);
+    const tabList = this.tabList;
+    return tabList ? [...queryWithoutNested("u-tab", tabList)].indexOf(this) : 0;
   }
   get panel() {
     return getPanel(this);
@@ -161,33 +171,27 @@ var UHTMLTabPanelElement = class extends UHTMLElement {
     attachStyle(this, DISPLAY_BLOCK);
   }
   connectedCallback() {
+    this.hidden = [...this.tabs].every((tab) => tab.ariaSelected !== "true");
     this.role = "tabpanel";
-    this.hidden = Array.from(this.tabs).every((tab) => !tab.selected);
-  }
-  attributeChangedCallback(_name, prev, 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");
   }
   get tabs() {
-    return getTabs(this, this.id);
+    const css = `u-tab[${ARIA_CONTROLS}="${this.id}"]`;
+    const root = getRoot(this).querySelectorAll(css);
+    return root.length ? root : document.querySelectorAll(css);
   }
 };
-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="${self.getAttribute(ARIA_CONTROLS)}"]`;
-  return getRoot(self).querySelector(css) || document.querySelector(css);
+  const css = `${tag}:not(:scope ${self.nodeName}:not(:scope) ${tag})`;
+  return self.querySelectorAll(css);
 };
-var getTabs = (self, id2) => {
-  const css = `u-tab[${ARIA_CONTROLS}="${id2}"]`;
-  return getRoot(self).querySelectorAll(css);
+var getSelectedIndex = (tabs) => [...tabs].findIndex((tab) => tab.ariaSelected === "true");
+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;
 };
 customElements.define("u-tabs", UHTMLTabsElement);
 customElements.define("u-tablist", UHTMLTabListElement);

package/dist/u-tabs.d.cts

@@ -33,6 +33,9 @@ declare class UHTMLTabListElement extends UHTMLElement {
     disconnectedCallback(): 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>`.
@@ -42,7 +45,7 @@ declare class UHTMLTabElement extends UHTMLElement {
     static observedAttributes: string[];
     constructor();
     connectedCallback(): void;
-    attributeChangedCallback(_name: string, prev: string, next: string): void;
+    attributeChangedCallback(name: string, prev: string): void;
     get tabsElement(): UHTMLTabsElement | null;
     get tabList(): UHTMLTabListElement | null;
     get selected(): boolean;
@@ -56,66 +59,95 @@ 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 observedAttributes: string[];
     constructor();
     connectedCallback(): void;
-    attributeChangedCallback(_name: string, prev: string, next: string): void;
     get tabsElement(): UHTMLTabsElement | null;
     get tabs(): NodeListOf<UHTMLTabElement>;
 }
 
 export { UHTMLTabElement, UHTMLTabListElement, UHTMLTabPanelElement, UHTMLTabsElement };
+
+import type * as PreactTypes from 'preact'
+import type * as ReactTypes from 'react'
+import type * as SvelteTypes from 'svelte/elements'
 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'] & { class?: string }
-export type SolidJSTabs = SolidJSX.HTMLElementTags['div']
-export type SvelteTabs = SvelteHTMLElements['div']
+
+export type PreactUtabs = PreactTypes.JSX.HTMLAttributes<UHTMLTagsElement> & {  }
+export type ReactUtabs = ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<UHTMLTabsElement>, UHTMLTabsElement> & { class?: string }
+export type QwikUtabs = QwikJSX.IntrinsicElements['div']
+export type VueUtabs = VueJSX.HTMLAttributes
+export type SvelteUtabs = SvelteTypes.HTMLAttributes<UHTMLTabsElement> & {  }
+export type SolidUtabs = SolidJSX.HTMLAttributes<UHTMLTabsElement>
 
 // Augmenting @vue/runtime-dom instead of vue directly to avoid interfering with React JSX
-declare module '@vue/runtime-dom' { export interface GlobalComponents { 'u-tabs': VueTabs } }
-declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'u-tabs': QwikTabs } } }
-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'] & { class?: string }
-export type SolidJSTablist = SolidJSX.HTMLElementTags['div']
-export type SvelteTablist = SvelteHTMLElements['div']
+declare global { namespace React.JSX { interface IntrinsicElements { 'u-tabs': ReactUtabs } } }
+declare global { namespace preact.JSX { interface IntrinsicElements { 'u-tabs': PreactUtabs } } }
+declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'u-tabs': QwikUtabs } } }
+declare module '@vue/runtime-dom' { export interface GlobalComponents { 'u-tabs': VueUtabs } }
+declare module 'svelte/elements' { interface SvelteHTMLElements { 'u-tabs': SvelteUtabs } }
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements { 'u-tabs': SolidUtabs }
+    interface CustomEvents {  }
+  }
+}
+export type PreactUtablist = PreactTypes.JSX.HTMLAttributes<UHTMLTagsElement> & {  }
+export type ReactUtablist = ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<UHTMLTabListElement>, UHTMLTabListElement> & { class?: string }
+export type QwikUtablist = QwikJSX.IntrinsicElements['div']
+export type VueUtablist = VueJSX.HTMLAttributes
+export type SvelteUtablist = SvelteTypes.HTMLAttributes<UHTMLTabListElement> & {  }
+export type SolidUtablist = SolidJSX.HTMLAttributes<UHTMLTabListElement>
 
 // Augmenting @vue/runtime-dom instead of vue directly to avoid interfering with React JSX
-declare module '@vue/runtime-dom' { export interface GlobalComponents { 'u-tablist': VueTablist } }
-declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'u-tablist': QwikTablist } } }
-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'] & { class?: string }
-export type SolidJSTab = SolidJSX.HTMLElementTags['div']
-export type SvelteTab = SvelteHTMLElements['div']
+declare global { namespace React.JSX { interface IntrinsicElements { 'u-tablist': ReactUtablist } } }
+declare global { namespace preact.JSX { interface IntrinsicElements { 'u-tablist': PreactUtablist } } }
+declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'u-tablist': QwikUtablist } } }
+declare module '@vue/runtime-dom' { export interface GlobalComponents { 'u-tablist': VueUtablist } }
+declare module 'svelte/elements' { interface SvelteHTMLElements { 'u-tablist': SvelteUtablist } }
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements { 'u-tablist': SolidUtablist }
+    interface CustomEvents {  }
+  }
+}
+export type PreactUtab = PreactTypes.JSX.HTMLAttributes<UHTMLTagsElement> & {  }
+export type ReactUtab = ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<UHTMLTabElement>, UHTMLTabElement> & { class?: string }
+export type QwikUtab = QwikJSX.IntrinsicElements['div']
+export type VueUtab = VueJSX.HTMLAttributes
+export type SvelteUtab = SvelteTypes.HTMLAttributes<UHTMLTabElement> & {  }
+export type SolidUtab = SolidJSX.HTMLAttributes<UHTMLTabElement>
 
 // Augmenting @vue/runtime-dom instead of vue directly to avoid interfering with React JSX
-declare module '@vue/runtime-dom' { export interface GlobalComponents { 'u-tab': VueTab } }
-declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'u-tab': QwikTab } } }
-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'] & { class?: string }
-export type SolidJSTabpanel = SolidJSX.HTMLElementTags['div']
-export type SvelteTabpanel = SvelteHTMLElements['div']
+declare global { namespace React.JSX { interface IntrinsicElements { 'u-tab': ReactUtab } } }
+declare global { namespace preact.JSX { interface IntrinsicElements { 'u-tab': PreactUtab } } }
+declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'u-tab': QwikUtab } } }
+declare module '@vue/runtime-dom' { export interface GlobalComponents { 'u-tab': VueUtab } }
+declare module 'svelte/elements' { interface SvelteHTMLElements { 'u-tab': SvelteUtab } }
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements { 'u-tab': SolidUtab }
+    interface CustomEvents {  }
+  }
+}
+export type PreactUtabpanel = PreactTypes.JSX.HTMLAttributes<UHTMLTagsElement> & {  }
+export type ReactUtabpanel = ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<UHTMLTabPanelElement>, UHTMLTabPanelElement> & { class?: string }
+export type QwikUtabpanel = QwikJSX.IntrinsicElements['div']
+export type VueUtabpanel = VueJSX.HTMLAttributes
+export type SvelteUtabpanel = SvelteTypes.HTMLAttributes<UHTMLTabPanelElement> & {  }
+export type SolidUtabpanel = SolidJSX.HTMLAttributes<UHTMLTabPanelElement>
 
 // Augmenting @vue/runtime-dom instead of vue directly to avoid interfering with React JSX
-declare module '@vue/runtime-dom' { export interface GlobalComponents { 'u-tabpanel': VueTabpanel } }
-declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'u-tabpanel': QwikTabpanel } } }
-declare global { namespace React.JSX { interface IntrinsicElements { 'u-tabpanel': ReactTabpanel } } }
-declare module 'solid-js' { namespace JSX { interface IntrinsicElements { 'u-tabpanel': SolidJSTabpanel } } }
-declare module 'svelte/elements' { interface SvelteHTMLElements { 'u-tabpanel': SvelteTabpanel } }
+declare global { namespace React.JSX { interface IntrinsicElements { 'u-tabpanel': ReactUtabpanel } } }
+declare global { namespace preact.JSX { interface IntrinsicElements { 'u-tabpanel': PreactUtabpanel } } }
+declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'u-tabpanel': QwikUtabpanel } } }
+declare module '@vue/runtime-dom' { export interface GlobalComponents { 'u-tabpanel': VueUtabpanel } }
+declare module 'svelte/elements' { interface SvelteHTMLElements { 'u-tabpanel': SvelteUtabpanel } }
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements { 'u-tabpanel': SolidUtabpanel }
+    interface CustomEvents {  }
+  }
+}

package/dist/u-tabs.d.ts

@@ -33,6 +33,9 @@ declare class UHTMLTabListElement extends UHTMLElement {
     disconnectedCallback(): 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>`.
@@ -42,7 +45,7 @@ declare class UHTMLTabElement extends UHTMLElement {
     static observedAttributes: string[];
     constructor();
     connectedCallback(): void;
-    attributeChangedCallback(_name: string, prev: string, next: string): void;
+    attributeChangedCallback(name: string, prev: string): void;
     get tabsElement(): UHTMLTabsElement | null;
     get tabList(): UHTMLTabListElement | null;
     get selected(): boolean;
@@ -56,66 +59,95 @@ 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 observedAttributes: string[];
     constructor();
     connectedCallback(): void;
-    attributeChangedCallback(_name: string, prev: string, next: string): void;
     get tabsElement(): UHTMLTabsElement | null;
     get tabs(): NodeListOf<UHTMLTabElement>;
 }
 
 export { UHTMLTabElement, UHTMLTabListElement, UHTMLTabPanelElement, UHTMLTabsElement };
+
+import type * as PreactTypes from 'preact'
+import type * as ReactTypes from 'react'
+import type * as SvelteTypes from 'svelte/elements'
 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'] & { class?: string }
-export type SolidJSTabs = SolidJSX.HTMLElementTags['div']
-export type SvelteTabs = SvelteHTMLElements['div']
+
+export type PreactUtabs = PreactTypes.JSX.HTMLAttributes<UHTMLTagsElement> & {  }
+export type ReactUtabs = ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<UHTMLTabsElement>, UHTMLTabsElement> & { class?: string }
+export type QwikUtabs = QwikJSX.IntrinsicElements['div']
+export type VueUtabs = VueJSX.HTMLAttributes
+export type SvelteUtabs = SvelteTypes.HTMLAttributes<UHTMLTabsElement> & {  }
+export type SolidUtabs = SolidJSX.HTMLAttributes<UHTMLTabsElement>
 
 // Augmenting @vue/runtime-dom instead of vue directly to avoid interfering with React JSX
-declare module '@vue/runtime-dom' { export interface GlobalComponents { 'u-tabs': VueTabs } }
-declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'u-tabs': QwikTabs } } }
-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'] & { class?: string }
-export type SolidJSTablist = SolidJSX.HTMLElementTags['div']
-export type SvelteTablist = SvelteHTMLElements['div']
+declare global { namespace React.JSX { interface IntrinsicElements { 'u-tabs': ReactUtabs } } }
+declare global { namespace preact.JSX { interface IntrinsicElements { 'u-tabs': PreactUtabs } } }
+declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'u-tabs': QwikUtabs } } }
+declare module '@vue/runtime-dom' { export interface GlobalComponents { 'u-tabs': VueUtabs } }
+declare module 'svelte/elements' { interface SvelteHTMLElements { 'u-tabs': SvelteUtabs } }
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements { 'u-tabs': SolidUtabs }
+    interface CustomEvents {  }
+  }
+}
+export type PreactUtablist = PreactTypes.JSX.HTMLAttributes<UHTMLTagsElement> & {  }
+export type ReactUtablist = ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<UHTMLTabListElement>, UHTMLTabListElement> & { class?: string }
+export type QwikUtablist = QwikJSX.IntrinsicElements['div']
+export type VueUtablist = VueJSX.HTMLAttributes
+export type SvelteUtablist = SvelteTypes.HTMLAttributes<UHTMLTabListElement> & {  }
+export type SolidUtablist = SolidJSX.HTMLAttributes<UHTMLTabListElement>
 
 // Augmenting @vue/runtime-dom instead of vue directly to avoid interfering with React JSX
-declare module '@vue/runtime-dom' { export interface GlobalComponents { 'u-tablist': VueTablist } }
-declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'u-tablist': QwikTablist } } }
-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'] & { class?: string }
-export type SolidJSTab = SolidJSX.HTMLElementTags['div']
-export type SvelteTab = SvelteHTMLElements['div']
+declare global { namespace React.JSX { interface IntrinsicElements { 'u-tablist': ReactUtablist } } }
+declare global { namespace preact.JSX { interface IntrinsicElements { 'u-tablist': PreactUtablist } } }
+declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'u-tablist': QwikUtablist } } }
+declare module '@vue/runtime-dom' { export interface GlobalComponents { 'u-tablist': VueUtablist } }
+declare module 'svelte/elements' { interface SvelteHTMLElements { 'u-tablist': SvelteUtablist } }
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements { 'u-tablist': SolidUtablist }
+    interface CustomEvents {  }
+  }
+}
+export type PreactUtab = PreactTypes.JSX.HTMLAttributes<UHTMLTagsElement> & {  }
+export type ReactUtab = ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<UHTMLTabElement>, UHTMLTabElement> & { class?: string }
+export type QwikUtab = QwikJSX.IntrinsicElements['div']
+export type VueUtab = VueJSX.HTMLAttributes
+export type SvelteUtab = SvelteTypes.HTMLAttributes<UHTMLTabElement> & {  }
+export type SolidUtab = SolidJSX.HTMLAttributes<UHTMLTabElement>
 
 // Augmenting @vue/runtime-dom instead of vue directly to avoid interfering with React JSX
-declare module '@vue/runtime-dom' { export interface GlobalComponents { 'u-tab': VueTab } }
-declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'u-tab': QwikTab } } }
-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'] & { class?: string }
-export type SolidJSTabpanel = SolidJSX.HTMLElementTags['div']
-export type SvelteTabpanel = SvelteHTMLElements['div']
+declare global { namespace React.JSX { interface IntrinsicElements { 'u-tab': ReactUtab } } }
+declare global { namespace preact.JSX { interface IntrinsicElements { 'u-tab': PreactUtab } } }
+declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'u-tab': QwikUtab } } }
+declare module '@vue/runtime-dom' { export interface GlobalComponents { 'u-tab': VueUtab } }
+declare module 'svelte/elements' { interface SvelteHTMLElements { 'u-tab': SvelteUtab } }
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements { 'u-tab': SolidUtab }
+    interface CustomEvents {  }
+  }
+}
+export type PreactUtabpanel = PreactTypes.JSX.HTMLAttributes<UHTMLTagsElement> & {  }
+export type ReactUtabpanel = ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<UHTMLTabPanelElement>, UHTMLTabPanelElement> & { class?: string }
+export type QwikUtabpanel = QwikJSX.IntrinsicElements['div']
+export type VueUtabpanel = VueJSX.HTMLAttributes
+export type SvelteUtabpanel = SvelteTypes.HTMLAttributes<UHTMLTabPanelElement> & {  }
+export type SolidUtabpanel = SolidJSX.HTMLAttributes<UHTMLTabPanelElement>
 
 // Augmenting @vue/runtime-dom instead of vue directly to avoid interfering with React JSX
-declare module '@vue/runtime-dom' { export interface GlobalComponents { 'u-tabpanel': VueTabpanel } }
-declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'u-tabpanel': QwikTabpanel } } }
-declare global { namespace React.JSX { interface IntrinsicElements { 'u-tabpanel': ReactTabpanel } } }
-declare module 'solid-js' { namespace JSX { interface IntrinsicElements { 'u-tabpanel': SolidJSTabpanel } } }
-declare module 'svelte/elements' { interface SvelteHTMLElements { 'u-tabpanel': SvelteTabpanel } }
+declare global { namespace React.JSX { interface IntrinsicElements { 'u-tabpanel': ReactUtabpanel } } }
+declare global { namespace preact.JSX { interface IntrinsicElements { 'u-tabpanel': PreactUtabpanel } } }
+declare module '@builder.io/qwik/jsx-runtime' { export namespace JSX { export interface IntrinsicElements { 'u-tabpanel': QwikUtabpanel } } }
+declare module '@vue/runtime-dom' { export interface GlobalComponents { 'u-tabpanel': VueUtabpanel } }
+declare module 'svelte/elements' { interface SvelteHTMLElements { 'u-tabpanel': SvelteUtabpanel } }
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements { 'u-tabpanel': SolidUtabpanel }
+    interface CustomEvents {  }
+  }
+}

package/dist/u-tabs.js

@@ -18,10 +18,8 @@ var attachStyle = (element, css) => element.attachShadow({ mode: "closed" }).app
 );
 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();
+  if (isClick) event.preventDefault();
+  if (isClick && event.target instanceof HTMLElement) event.target.click();
   return isClick;
 };
 var getRoot = (node) => node.getRootNode();
@@ -43,10 +41,10 @@ var UHTMLTabsElement = class extends UHTMLElement {
     return queryWithoutNested("u-tablist", this)[0] || null;
   }
   get selectedIndex() {
-    return [...this.tabs].findIndex((tab) => tab.ariaSelected === "true");
+    return getSelectedIndex(this.tabs);
   }
   set selectedIndex(index) {
-    this.tabs[index].ariaSelected = "true";
+    if (this.tabs[index]) this.tabs[index].ariaSelected = "true";
   }
   get tabs() {
     return queryWithoutNested("u-tab", this);
@@ -70,31 +68,42 @@ var UHTMLTabListElement = class extends UHTMLElement {
   handleEvent(event) {
     const { key } = event;
     const tabs = [...this.getElementsByTagName("u-tab")];
-    let index = tabs.findIndex((tab) => tab.contains(event.target));
-    if (event.defaultPrevented || index === -1)
-      return;
-    if (event.type === "click")
-      tabs[index].selected = true;
+    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 === "keydown" && !asButton(event)) {
       if (key === "ArrowDown" || key === "ArrowRight")
-        index = ++index % tabs.length;
+        next = (prev + 1) % tabs.length;
       else if (key === "ArrowUp" || key === "ArrowLeft")
-        index = (index || tabs.length) - 1;
-      else if (key === "End")
-        index = tabs.length - 1;
-      else if (key === "Home")
-        index = 0;
-      else
-        return;
-      event.preventDefault();
-      tabs[index].focus();
+        next = (prev || tabs.length) - 1;
+      else if (key === "End") next = tabs.length - 1;
+      else if (key === "Home") next = 0;
+      else if (key === "Tab") next = getSelectedIndex(tabs);
+      else return;
+      setTimeout(() => {
+        tabs[prev].tabIndex = -1;
+        tabs[next].tabIndex = 0;
+      });
+      if (key !== "Tab") {
+        event.preventDefault();
+        tabs[next].focus();
+      }
     }
   }
   get tabsElement() {
     return this.closest("u-tabs");
   }
+  get tabs() {
+    return queryWithoutNested("u-tab", this);
+  }
+  get selectedIndex() {
+    return getSelectedIndex(this.tabs);
+  }
+  set selectedIndex(index) {
+    if (this.tabs[index]) this.tabs[index].ariaSelected = "true";
+  }
 };
-var SKIP_ATTR_CHANGE = false;
 var UHTMLTabElement = class extends UHTMLElement {
   constructor() {
     super();
@@ -104,33 +113,33 @@ var UHTMLTabElement = class extends UHTMLElement {
     );
   }
   connectedCallback() {
-    this.selected = !!this.selected;
-  }
-  attributeChangedCallback(_name, prev, next) {
-    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) => {
-        panel.removeAttribute(SAFE_LABELLEDBY);
-        panel.hidden = true;
-      });
-      tabs.forEach((tab, index) => {
-        const panel = getPanel(tab) || panels[index] || null;
-        if (selected === tab && panel)
-          selectedPanel = panel;
-        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)
-        );
+    const selected = this.selected || [...queryWithoutNested("u-tab", this.tabList || this)].every(
+      (tab) => tab.ariaSelected !== "true"
+    );
+    this.role = "tab";
+    this.tabIndex = selected ? 0 : -1;
+    this.ariaSelected = `${selected}`;
+  }
+  attributeChangedCallback(name, prev) {
+    if (!this.selected) return;
+    const nextPanel = getPanel(this);
+    const nextPanelId = useId(nextPanel);
+    if (this.tabList)
+      queryWithoutNested("u-tab", this.tabList).forEach((tab) => {
+        const isUnselect = tab !== this && tab.ariaSelected === "true";
+        const prevPanel = isUnselect && getPanel(tab);
+        if (prevPanel && prevPanel !== nextPanel) prevPanel.hidden = true;
+        if (isUnselect) {
+          tab.ariaSelected = "false";
+          tab.tabIndex = -1;
+        }
       });
-      SKIP_ATTR_CHANGE = false;
-    }
+    if (name === ARIA_CONTROLS) getPanel(this, prev)?.setAttribute("hidden", "");
+    if (this.getAttribute(ARIA_CONTROLS) !== nextPanelId)
+      this.setAttribute(ARIA_CONTROLS, nextPanelId);
+    this.tabIndex = 0;
+    nextPanel?.setAttribute(SAFE_LABELLEDBY, useId(this));
+    nextPanel?.removeAttribute("hidden");
   }
   get tabsElement() {
     return this.closest("u-tabs");
@@ -142,11 +151,12 @@ var UHTMLTabElement = class extends UHTMLElement {
     return this.ariaSelected === "true";
   }
   set selected(value) {
-    this.ariaSelected = `${value}`;
+    this.ariaSelected = `${!!value}`;
   }
   /** Retrieves the ordinal position of an tab in a tablist. */
   get index() {
-    return Array.from(this.tabsElement?.tabs || []).indexOf(this);
+    const tabList = this.tabList;
+    return tabList ? [...queryWithoutNested("u-tab", tabList)].indexOf(this) : 0;
   }
   get panel() {
     return getPanel(this);
@@ -159,33 +169,27 @@ var UHTMLTabPanelElement = class extends UHTMLElement {
     attachStyle(this, DISPLAY_BLOCK);
   }
   connectedCallback() {
+    this.hidden = [...this.tabs].every((tab) => tab.ariaSelected !== "true");
     this.role = "tabpanel";
-    this.hidden = Array.from(this.tabs).every((tab) => !tab.selected);
-  }
-  attributeChangedCallback(_name, prev, 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");
   }
   get tabs() {
-    return getTabs(this, this.id);
+    const css = `u-tab[${ARIA_CONTROLS}="${this.id}"]`;
+    const root = getRoot(this).querySelectorAll(css);
+    return root.length ? root : document.querySelectorAll(css);
   }
 };
-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="${self.getAttribute(ARIA_CONTROLS)}"]`;
-  return getRoot(self).querySelector(css) || document.querySelector(css);
+  const css = `${tag}:not(:scope ${self.nodeName}:not(:scope) ${tag})`;
+  return self.querySelectorAll(css);
 };
-var getTabs = (self, id2) => {
-  const css = `u-tab[${ARIA_CONTROLS}="${id2}"]`;
-  return getRoot(self).querySelectorAll(css);
+var getSelectedIndex = (tabs) => [...tabs].findIndex((tab) => tab.ariaSelected === "true");
+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;
 };
 customElements.define("u-tabs", UHTMLTabsElement);
 customElements.define("u-tablist", UHTMLTabListElement);

package/dist/u-tabs.manifest.json

@@ -74,6 +74,21 @@
         "text": "UHTMLTabsElement | null"
        },
        "readonly": true
+      },
+      {
+       "kind": "field",
+       "name": "tabs",
+       "type": {
+        "text": "NodeListOf<UHTMLTabElement>"
+       },
+       "readonly": true
+      },
+      {
+       "kind": "field",
+       "name": "selectedIndex",
+       "type": {
+        "text": "number"
+       }
       }
      ],
      "superclass": {
@@ -166,11 +181,6 @@
        "readonly": true
       }
      ],
-     "attributes": [
-      {
-       "name": "id"
-      }
-     ],
      "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": [{ "name": "id", "values": [] }],
+      "attributes": [],
       "references": []
     }
   ]

package/package.json

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