@u-elements/u-tabs 0.0.0

package/dist/u-tabs.cjs

@@ -0,0 +1,202 @@
+'use strict';
+
+// ../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 DISPLAY_BLOCK = ":host(:not([hidden])) { display: block }";
+var UHTMLElement = typeof HTMLElement === "undefined" ? class {
+} : HTMLElement;
+var bind = (element, rest, action) => 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 style = (element, css) => {
+  const shadow = element.attachShadow({ mode: "open" });
+  shadow.appendChild(document.createElement("style")).textContent = css;
+  shadow.appendChild(document.createElement("slot"));
+};
+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)
+    event.preventDefault();
+  if (isClick && event.target instanceof HTMLElement)
+    event.target.click();
+  return isClick;
+};
+var getRoot = (node) => node.getRootNode();
+var id = Date.now();
+var useId = (el) => el ? el.id || (el.id = `:${el.nodeName.toLowerCase()}${(++id).toString(32)}`) : void 0;
+var customElements = {
+  define: (name, instance) => !IS_BROWSER || window.customElements.get(name) || window.customElements.define(name, instance)
+};
+
+// u-tabs.ts
+var UHTMLTabsElement = class extends UHTMLElement {
+  connectedCallback() {
+    style(this, DISPLAY_BLOCK);
+  }
+  get tabList() {
+    return queryWithoutNested("u-tablist", this)[0] || null;
+  }
+  get selectedIndex() {
+    return [...this.tabs].findIndex((tab) => attr(tab, ARIA_SELECTED) === "true");
+  }
+  set selectedIndex(index) {
+    attr(this.tabs[index], ARIA_SELECTED, true);
+  }
+  get tabs() {
+    return queryWithoutNested("u-tab", this);
+  }
+  get panels() {
+    return queryWithoutNested("u-tabpanel", this);
+  }
+};
+var UHTMLTabListElement = class extends UHTMLElement {
+  connectedCallback() {
+    style(this, ":host(:not([hidden])) { display: flex; flex-wrap: wrap }");
+    attr(this, "role", "tablist");
+    on(this, "click,keydown", this);
+  }
+  disconnectedCallback() {
+    off(this, "click,keydown", this);
+  }
+  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;
+    if (event.type === "keydown" && !asButton(event)) {
+      if (key === "ArrowDown" || key === "ArrowRight")
+        index = ++index % 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();
+    }
+  }
+  get tabsElement() {
+    return this.closest("u-tabs");
+  }
+};
+var skipAttrChange = false;
+var UHTMLTabElement = class extends UHTMLElement {
+  static get observedAttributes() {
+    return ["id", ARIA_SELECTED, ARIA_CONTROLS];
+  }
+  connectedCallback() {
+    style(this, `${DISPLAY_BLOCK}:host { cursor: pointer }`);
+    this.selected = !!this.selected;
+  }
+  attributeChangedCallback(_name, prev, next) {
+    if (!skipAttrChange && prev !== next && (skipAttrChange = 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: "" }));
+      tabs.forEach((tab, index) => {
+        const tabindex = selected === tab ? 0 : -1;
+        const panel = getPanel(tab) || panels[index] || null;
+        if (!tabindex && 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 : ""
+        });
+      });
+      skipAttrChange = false;
+    }
+  }
+  get tabsElement() {
+    return this.closest("u-tabs");
+  }
+  get tabList() {
+    return this.closest("u-tablist");
+  }
+  get selected() {
+    return attr(this, ARIA_SELECTED) === "true";
+  }
+  set selected(value) {
+    attr(this, ARIA_SELECTED, !!value);
+  }
+  /** Retrieves the ordinal position of an tab in a tablist. */
+  get index() {
+    return Array.from(this.tabsElement?.tabs || []).indexOf(this);
+  }
+  get panel() {
+    return getPanel(this);
+  }
+};
+var UHTMLTabPanelElement = class extends UHTMLElement {
+  static get observedAttributes() {
+    return ["id"];
+  }
+  connectedCallback() {
+    style(this, DISPLAY_BLOCK);
+    attr(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));
+    }
+  }
+  get tabsElement() {
+    return this.closest("u-tabs");
+  }
+  get tabs() {
+    return getTabs(this, this.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)}"]`;
+  return getRoot(self).querySelector(css) || document.querySelector(css);
+};
+var getTabs = (self, id2) => {
+  const css = `u-tab[${ARIA_CONTROLS}="${id2}"]`;
+  return getRoot(self).querySelectorAll(css);
+};
+customElements.define("u-tabs", UHTMLTabsElement);
+customElements.define("u-tablist", UHTMLTabListElement);
+customElements.define("u-tab", UHTMLTabElement);
+customElements.define("u-tabpanel", UHTMLTabPanelElement);
+
+exports.UHTMLTabElement = UHTMLTabElement;
+exports.UHTMLTabListElement = UHTMLTabListElement;
+exports.UHTMLTabPanelElement = UHTMLTabPanelElement;
+exports.UHTMLTabsElement = UHTMLTabsElement;

package/dist/u-tabs.d.cts

@@ -0,0 +1,121 @@
+declare const UHTMLElement: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+};
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-tabs': UHTMLTabsElement;
+        'u-tablist': UHTMLTabListElement;
+        'u-tab': UHTMLTabElement;
+        'u-tabpanel': UHTMLTabPanelElement;
+    }
+}
+/**
+ * The `<u-tabs>` HTML element is used to group a `<u-tablist>` and several `<u-tabpanel>` elements.
+ * No MDN reference available.
+ */
+declare class UHTMLTabsElement extends UHTMLElement {
+    connectedCallback(): void;
+    get tabList(): UHTMLTabListElement | null;
+    get selectedIndex(): number;
+    set selectedIndex(index: number);
+    get tabs(): NodeListOf<UHTMLTabElement>;
+    get panels(): NodeListOf<UHTMLTabPanelElement>;
+}
+/**
+ * The `<u-tablist>` HTML element serves as the container for a set of `<u-tab>` elements. The `<u-tab>` content are referred to as `<u-tabpanel>` elements.
+ * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tablist_role)
+ */
+declare class UHTMLTabListElement extends UHTMLElement {
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleEvent(event: Event): void;
+    get tabsElement(): UHTMLTabsElement | null;
+}
+/**
+ * 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[];
+    connectedCallback(): void;
+    attributeChangedCallback(_name: string, prev: string, next: string): void;
+    get tabsElement(): UHTMLTabsElement | null;
+    get tabList(): UHTMLTabListElement | null;
+    get selected(): boolean;
+    set selected(value: boolean);
+    /** Retrieves the ordinal position of an tab in a tablist. */
+    get index(): number;
+    get panel(): UHTMLTabPanelElement | null;
+}
+/**
+ * The `<u-tabpanel>` HTML element is a container for the resources of layered content associated with a `<u-tab>`.
+ * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tabpanel_role)
+ */
+declare class UHTMLTabPanelElement extends UHTMLElement {
+    static get observedAttributes(): string[];
+    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 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 SolidJSTabs = SolidJSX.HTMLElementTags['div']
+export type SvelteTabs = SvelteHTMLElements['div']
+
+// 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']
+export type SolidJSTablist = SolidJSX.HTMLElementTags['div']
+export type SvelteTablist = SvelteHTMLElements['div']
+
+// 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']
+export type SolidJSTab = SolidJSX.HTMLElementTags['div']
+export type SvelteTab = SvelteHTMLElements['div']
+
+// 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']
+export type SolidJSTabpanel = SolidJSX.HTMLElementTags['div']
+export type SvelteTabpanel = SvelteHTMLElements['div']
+
+// 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 } }

package/dist/u-tabs.d.ts

@@ -0,0 +1,121 @@
+declare const UHTMLElement: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+};
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-tabs': UHTMLTabsElement;
+        'u-tablist': UHTMLTabListElement;
+        'u-tab': UHTMLTabElement;
+        'u-tabpanel': UHTMLTabPanelElement;
+    }
+}
+/**
+ * The `<u-tabs>` HTML element is used to group a `<u-tablist>` and several `<u-tabpanel>` elements.
+ * No MDN reference available.
+ */
+declare class UHTMLTabsElement extends UHTMLElement {
+    connectedCallback(): void;
+    get tabList(): UHTMLTabListElement | null;
+    get selectedIndex(): number;
+    set selectedIndex(index: number);
+    get tabs(): NodeListOf<UHTMLTabElement>;
+    get panels(): NodeListOf<UHTMLTabPanelElement>;
+}
+/**
+ * The `<u-tablist>` HTML element serves as the container for a set of `<u-tab>` elements. The `<u-tab>` content are referred to as `<u-tabpanel>` elements.
+ * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tablist_role)
+ */
+declare class UHTMLTabListElement extends UHTMLElement {
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleEvent(event: Event): void;
+    get tabsElement(): UHTMLTabsElement | null;
+}
+/**
+ * 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[];
+    connectedCallback(): void;
+    attributeChangedCallback(_name: string, prev: string, next: string): void;
+    get tabsElement(): UHTMLTabsElement | null;
+    get tabList(): UHTMLTabListElement | null;
+    get selected(): boolean;
+    set selected(value: boolean);
+    /** Retrieves the ordinal position of an tab in a tablist. */
+    get index(): number;
+    get panel(): UHTMLTabPanelElement | null;
+}
+/**
+ * The `<u-tabpanel>` HTML element is a container for the resources of layered content associated with a `<u-tab>`.
+ * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tabpanel_role)
+ */
+declare class UHTMLTabPanelElement extends UHTMLElement {
+    static get observedAttributes(): string[];
+    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 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 SolidJSTabs = SolidJSX.HTMLElementTags['div']
+export type SvelteTabs = SvelteHTMLElements['div']
+
+// 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']
+export type SolidJSTablist = SolidJSX.HTMLElementTags['div']
+export type SvelteTablist = SvelteHTMLElements['div']
+
+// 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']
+export type SolidJSTab = SolidJSX.HTMLElementTags['div']
+export type SvelteTab = SvelteHTMLElements['div']
+
+// 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']
+export type SolidJSTabpanel = SolidJSX.HTMLElementTags['div']
+export type SvelteTabpanel = SvelteHTMLElements['div']
+
+// 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 } }

package/dist/u-tabs.js

@@ -0,0 +1,197 @@
+// ../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 DISPLAY_BLOCK = ":host(:not([hidden])) { display: block }";
+var UHTMLElement = typeof HTMLElement === "undefined" ? class {
+} : HTMLElement;
+var bind = (element, rest, action) => 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 style = (element, css) => {
+  const shadow = element.attachShadow({ mode: "open" });
+  shadow.appendChild(document.createElement("style")).textContent = css;
+  shadow.appendChild(document.createElement("slot"));
+};
+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)
+    event.preventDefault();
+  if (isClick && event.target instanceof HTMLElement)
+    event.target.click();
+  return isClick;
+};
+var getRoot = (node) => node.getRootNode();
+var id = Date.now();
+var useId = (el) => el ? el.id || (el.id = `:${el.nodeName.toLowerCase()}${(++id).toString(32)}`) : void 0;
+var customElements = {
+  define: (name, instance) => !IS_BROWSER || window.customElements.get(name) || window.customElements.define(name, instance)
+};
+
+// u-tabs.ts
+var UHTMLTabsElement = class extends UHTMLElement {
+  connectedCallback() {
+    style(this, DISPLAY_BLOCK);
+  }
+  get tabList() {
+    return queryWithoutNested("u-tablist", this)[0] || null;
+  }
+  get selectedIndex() {
+    return [...this.tabs].findIndex((tab) => attr(tab, ARIA_SELECTED) === "true");
+  }
+  set selectedIndex(index) {
+    attr(this.tabs[index], ARIA_SELECTED, true);
+  }
+  get tabs() {
+    return queryWithoutNested("u-tab", this);
+  }
+  get panels() {
+    return queryWithoutNested("u-tabpanel", this);
+  }
+};
+var UHTMLTabListElement = class extends UHTMLElement {
+  connectedCallback() {
+    style(this, ":host(:not([hidden])) { display: flex; flex-wrap: wrap }");
+    attr(this, "role", "tablist");
+    on(this, "click,keydown", this);
+  }
+  disconnectedCallback() {
+    off(this, "click,keydown", this);
+  }
+  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;
+    if (event.type === "keydown" && !asButton(event)) {
+      if (key === "ArrowDown" || key === "ArrowRight")
+        index = ++index % 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();
+    }
+  }
+  get tabsElement() {
+    return this.closest("u-tabs");
+  }
+};
+var skipAttrChange = false;
+var UHTMLTabElement = class extends UHTMLElement {
+  static get observedAttributes() {
+    return ["id", ARIA_SELECTED, ARIA_CONTROLS];
+  }
+  connectedCallback() {
+    style(this, `${DISPLAY_BLOCK}:host { cursor: pointer }`);
+    this.selected = !!this.selected;
+  }
+  attributeChangedCallback(_name, prev, next) {
+    if (!skipAttrChange && prev !== next && (skipAttrChange = 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: "" }));
+      tabs.forEach((tab, index) => {
+        const tabindex = selected === tab ? 0 : -1;
+        const panel = getPanel(tab) || panels[index] || null;
+        if (!tabindex && 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 : ""
+        });
+      });
+      skipAttrChange = false;
+    }
+  }
+  get tabsElement() {
+    return this.closest("u-tabs");
+  }
+  get tabList() {
+    return this.closest("u-tablist");
+  }
+  get selected() {
+    return attr(this, ARIA_SELECTED) === "true";
+  }
+  set selected(value) {
+    attr(this, ARIA_SELECTED, !!value);
+  }
+  /** Retrieves the ordinal position of an tab in a tablist. */
+  get index() {
+    return Array.from(this.tabsElement?.tabs || []).indexOf(this);
+  }
+  get panel() {
+    return getPanel(this);
+  }
+};
+var UHTMLTabPanelElement = class extends UHTMLElement {
+  static get observedAttributes() {
+    return ["id"];
+  }
+  connectedCallback() {
+    style(this, DISPLAY_BLOCK);
+    attr(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));
+    }
+  }
+  get tabsElement() {
+    return this.closest("u-tabs");
+  }
+  get tabs() {
+    return getTabs(this, this.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)}"]`;
+  return getRoot(self).querySelector(css) || document.querySelector(css);
+};
+var getTabs = (self, id2) => {
+  const css = `u-tab[${ARIA_CONTROLS}="${id2}"]`;
+  return getRoot(self).querySelectorAll(css);
+};
+customElements.define("u-tabs", UHTMLTabsElement);
+customElements.define("u-tablist", UHTMLTabListElement);
+customElements.define("u-tab", UHTMLTabElement);
+customElements.define("u-tabpanel", UHTMLTabPanelElement);
+
+export { UHTMLTabElement, UHTMLTabListElement, UHTMLTabPanelElement, UHTMLTabsElement };

package/dist/u-tabs.manifest.json

@@ -0,0 +1,247 @@
+{
+ "schemaVersion": "1.0.0",
+ "readme": "",
+ "modules": [
+  {
+   "kind": "javascript-module",
+   "path": "u-tabs.ts",
+   "declarations": [
+    {
+     "kind": "class",
+     "description": "The `<u-tabs>` HTML element is used to group a `<u-tablist>` and several `<u-tabpanel>` elements.\nNo MDN reference available.",
+     "name": "UHTMLTabsElement",
+     "members": [
+      {
+       "kind": "field",
+       "name": "tabList",
+       "type": {
+        "text": "UHTMLTabListElement | null"
+       },
+       "readonly": true
+      },
+      {
+       "kind": "field",
+       "name": "selectedIndex",
+       "type": {
+        "text": "number"
+       }
+      },
+      {
+       "kind": "field",
+       "name": "tabs",
+       "type": {
+        "text": "NodeListOf<UHTMLTabElement>"
+       },
+       "readonly": true
+      },
+      {
+       "kind": "field",
+       "name": "panels",
+       "type": {
+        "text": "NodeListOf<UHTMLTabPanelElement>"
+       },
+       "readonly": true
+      }
+     ],
+     "superclass": {
+      "name": "UHTMLElement",
+      "module": "/utils"
+     },
+     "tagName": "u-tabs",
+     "customElement": true
+    },
+    {
+     "kind": "class",
+     "description": "The `<u-tablist>` HTML element serves as the container for a set of `<u-tab>` elements. The `<u-tab>` content are referred to as `<u-tabpanel>` elements.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tablist_role)",
+     "name": "UHTMLTabListElement",
+     "members": [
+      {
+       "kind": "method",
+       "name": "handleEvent",
+       "parameters": [
+        {
+         "name": "event",
+         "type": {
+          "text": "Event"
+         }
+        }
+       ]
+      },
+      {
+       "kind": "field",
+       "name": "tabsElement",
+       "type": {
+        "text": "UHTMLTabsElement | null"
+       },
+       "readonly": true
+      }
+     ],
+     "superclass": {
+      "name": "UHTMLElement",
+      "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)",
+     "name": "UHTMLTabElement",
+     "members": [
+      {
+       "kind": "field",
+       "name": "tabsElement",
+       "type": {
+        "text": "UHTMLTabsElement | null"
+       },
+       "readonly": true
+      },
+      {
+       "kind": "field",
+       "name": "tabList",
+       "type": {
+        "text": "UHTMLTabListElement | null"
+       },
+       "readonly": true
+      },
+      {
+       "kind": "field",
+       "name": "selected",
+       "type": {
+        "text": "boolean"
+       }
+      },
+      {
+       "kind": "field",
+       "name": "index",
+       "type": {
+        "text": "number"
+       },
+       "description": "Retrieves the ordinal position of an tab in a tablist.",
+       "readonly": true
+      },
+      {
+       "kind": "field",
+       "name": "panel",
+       "type": {
+        "text": "UHTMLTabPanelElement | null"
+       },
+       "readonly": true
+      }
+     ],
+     "attributes": [
+      {
+       "name": "id"
+      }
+     ],
+     "superclass": {
+      "name": "UHTMLElement",
+      "module": "/utils"
+     },
+     "tagName": "u-tab",
+     "customElement": true
+    },
+    {
+     "kind": "class",
+     "description": "The `<u-tabpanel>` HTML element is a container for the resources of layered content associated with a `<u-tab>`.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tabpanel_role)",
+     "name": "UHTMLTabPanelElement",
+     "members": [
+      {
+       "kind": "field",
+       "name": "tabsElement",
+       "type": {
+        "text": "UHTMLTabsElement | null"
+       },
+       "readonly": true
+      },
+      {
+       "kind": "field",
+       "name": "tabs",
+       "type": {
+        "text": "NodeListOf<UHTMLTabElement>"
+       },
+       "readonly": true
+      }
+     ],
+     "attributes": [
+      {
+       "name": "id"
+      }
+     ],
+     "superclass": {
+      "name": "UHTMLElement",
+      "module": "/utils"
+     },
+     "tagName": "u-tabpanel",
+     "customElement": true
+    }
+   ],
+   "exports": [
+    {
+     "kind": "js",
+     "name": "UHTMLTabsElement",
+     "declaration": {
+      "name": "UHTMLTabsElement",
+      "module": "u-tabs.ts"
+     }
+    },
+    {
+     "kind": "js",
+     "name": "UHTMLTabListElement",
+     "declaration": {
+      "name": "UHTMLTabListElement",
+      "module": "u-tabs.ts"
+     }
+    },
+    {
+     "kind": "js",
+     "name": "UHTMLTabElement",
+     "declaration": {
+      "name": "UHTMLTabElement",
+      "module": "u-tabs.ts"
+     }
+    },
+    {
+     "kind": "js",
+     "name": "UHTMLTabPanelElement",
+     "declaration": {
+      "name": "UHTMLTabPanelElement",
+      "module": "u-tabs.ts"
+     }
+    },
+    {
+     "kind": "custom-element-definition",
+     "name": "u-tabs",
+     "declaration": {
+      "name": "UHTMLTabsElement",
+      "module": "u-tabs.ts"
+     }
+    },
+    {
+     "kind": "custom-element-definition",
+     "name": "u-tablist",
+     "declaration": {
+      "name": "UHTMLTabListElement",
+      "module": "u-tabs.ts"
+     }
+    },
+    {
+     "kind": "custom-element-definition",
+     "name": "u-tab",
+     "declaration": {
+      "name": "UHTMLTabElement",
+      "module": "u-tabs.ts"
+     }
+    },
+    {
+     "kind": "custom-element-definition",
+     "name": "u-tabpanel",
+     "declaration": {
+      "name": "UHTMLTabPanelElement",
+      "module": "u-tabs.ts"
+     }
+    }
+   ]
+  }
+ ]
+}

package/dist/u-tabs.vscode.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
+  "version": 1.1,
+  "tags": [
+    {
+      "name": "u-tabs",
+      "description": "The `<u-tabs>` HTML element is used to group a `<u-tablist>` and several `<u-tabpanel>` elements.\nNo MDN reference available.\n---\n",
+      "attributes": [],
+      "references": []
+    },
+    {
+      "name": "u-tablist",
+      "description": "The `<u-tablist>` HTML element serves as the container for a set of `<u-tab>` elements. The `<u-tab>` content are referred to as `<u-tabpanel>` elements.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tablist_role)\n---\n",
+      "attributes": [],
+      "references": []
+    },
+    {
+      "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": [] }],
+      "references": []
+    },
+    {
+      "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": [] }],
+      "references": []
+    }
+  ]
+}

package/package.json

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

package/readme.md

@@ -0,0 +1,4 @@
+# <u-tabs>
+`<u-tabs>` is not a native HTML element, but follows [ARIA best practice for tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/). It lets you navigate between groups of information that appear in the same context.
+
+[See more about accessible u-elements](https://u-elements.github.io/u-elements/)