@rimelight/ui 0.0.57 → 0.0.58

package/src/components/tabs/RLATabs.astro

@@ -1,385 +1,352 @@
----
-import type { TabsProps } from "./tabs"
-import { tabsTheme } from "./tabs.theme"
-import RLABadge from "../badge/RLABadge.astro"
-import RLAIcon from "../icon/RLAIcon.astro"
-
-
-const {
-  items = [],
-  value = "",
-  defaultValue = "",
-  variant = "pill",
-  orientation = "horizontal",
-  size = "md",
-  color = "primary",
-  content = true,
-  valueKey = "value",
-  labelKey = "label",
-  maxTabs,
-  estimatedTabWidth = 100,
-  ...rest
-} = Astro.props as TabsProps
-
-// Normalize variant names
-const normalizedVariant = (variant === "solid" || variant === "pills") ? "pill" : (variant === "link" ? "underline" : variant);
-
-const classes = tabsTheme({
-  ...Astro.props,
-  variant: normalizedVariant
-});
-
-const initialValue = value || defaultValue || (items.length > 0 ? (items[0]?.[valueKey] ?? items[0]?.value ?? "0") : "")
-
-// ─── Responsive CSS Item Counter + Native Popover Overflow ───────────────────
-const uid = Math.random().toString(36).substring(2, 9)
-const cName = `rla-tb-${uid}`
-const popoverId = `rla-tb-pop-${uid}`
-
-const effectiveMaxTabs = maxTabs !== undefined ? Math.max(1, maxTabs) : items.length
-const renderedListItems = items.slice(0, effectiveMaxTabs)
-const overflowItems = items.slice(effectiveMaxTabs)
-const baseHiddenCount = overflowItems.length
-const needsOverflow = items.length > 1 && orientation === "horizontal"
-
-// Generate per-instance container-query CSS for horizontal layout
-let instanceCss = ""
-if (needsOverflow && renderedListItems.length > 1) {
-  const maxBreaks = renderedListItems.length - 1
-  for (let i = 0; i < maxBreaks; i++) {
-    const hiddenItems = i + 1
-    const visibleCount = renderedListItems.length - hiddenItems
-    const maxWidth = visibleCount * estimatedTabWidth + 90
-    const hideNthChild = renderedListItems.length - i
-
-    instanceCss += `\n@container ${cName} (max-width: ${maxWidth}px) {`
-    instanceCss += `\n  [data-tb="${uid}"] { --hidden-items: ${hiddenItems}; }`
-    instanceCss += `\n  [data-tb="${uid}"] [data-slot=list] > button.hidable:nth-child(${hideNthChild + 1}) { display: none !important; }`
-    if (baseHiddenCount === 0) {
-      instanceCss += `\n  [data-tb="${uid}"] .rla-tb-overflow-hidden { display: inline-flex !important; }`
-    }
-    instanceCss += `\n}`
-  }
-}
----
-<rla-tabs {...rest} data-orientation={orientation} data-variant={normalizedVariant}>
-  <div
-    class:list={[classes.root, orientation === "horizontal" && "rla-tb-host"]}
-    data-slot="root"
-    data-tabs-container
-    data-value={initialValue}
-    data-tb={uid}
-    style={orientation === "horizontal" ? `container-type: inline-size; container-name: ${cName}; --base-hidden: ${baseHiddenCount}; --hidden-items: 0;` : undefined}
-  >
-    <div class={classes.list} data-slot="list" role="tablist">
-      <div class={classes.indicator} data-slot="indicator" style="display: none;"></div>
-      {renderedListItems.map((item, index) => {
-        const itemVal = item[valueKey] ?? item.value ?? String(index)
-        const itemLabel = item[labelKey] ?? item.label
-        const active = itemVal === initialValue
-        const isHidable = needsOverflow && index > 0
-        return (
-          <button
-            type="button"
-            class:list={[classes.trigger, isHidable && "hidable"]}
-            data-slot="trigger"
-            role="tab"
-            data-value={itemVal}
-            data-state={active ? "active" : "inactive"}
-            disabled={item.disabled}
-          >
-            {item.icon && <span class={item.icon + " " + classes.leadingIcon} data-slot="leadingIcon" />}
-            {itemLabel && <span class={classes.label} data-slot="label">{itemLabel}</span>}
-            {item.badge !== undefined && item.badge !== null && (
-              <RLABadge
-                size="sm"
-                variant="subtle"
-                color="neutral"
-                class={classes.trailingBadge}
-                data-slot="trailingBadge"
-              >
-                {typeof item.badge === "object" ? item.badge.label : item.badge}
-              </RLABadge>
-            )}
-          </button>
-        )
-      })}
-
-      {needsOverflow && (
-        <div class="relative inline-flex items-center ml-auto">
-          <button
-            type="button"
-            class:list={[
-              classes.trigger,
-              "rla-tb-overflow-btn",
-              baseHiddenCount === 0 && "rla-tb-overflow-hidden"
-            ]}
-            popovertarget={popoverId}
-            data-slot="overflow-trigger"
-            aria-label="More tabs"
-          >
-            <span class="rla-tb-label">
-              +<span class="rla-tb-count"></span> more
-            </span>
-            <RLAIcon name="chevronDown" class="ml-1 size-3.5 opacity-70" />
-          </button>
-
-          <div
-            id={popoverId}
-            popover="auto"
-            class="rla-tb-popover rounded-lg border border-default bg-default p-1 shadow-lg backdrop-blur-sm"
-          >
-            <div class="flex flex-col gap-0.5 min-w-[10rem]">
-              {items.map((item, index) => {
-                const itemVal = item[valueKey] ?? item.value ?? String(index)
-                const itemLabel = item[labelKey] ?? item.label
-                const isExtra = index >= effectiveMaxTabs
-                return (
-                  <button
-                    type="button"
-                    class:list={[
-                      "w-full text-left px-3 py-1.5 text-sm rounded-md transition-colors flex items-center justify-between",
-                      "hover:bg-muted focus-visible:outline-none cursor-pointer",
-                      !isExtra && "rla-tb-pop-rendered"
-                    ]}
-                    data-tab-overflow-value={itemVal}
-                    data-popover-item
-                  >
-                    <span class="truncate">{itemLabel}</span>
-                    <RLAIcon name="check" class="size-4 opacity-0 data-[active=true]:opacity-100" />
-                  </button>
-                )
-              })}
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-
-    {content && (
-      <div class="flex-1">
-        <slot>
-          {items.map((item, index) => {
-            const itemVal = item[valueKey] ?? item.value ?? String(index)
-            const active = itemVal === initialValue
-            return (
-              <div
-                class={classes.content}
-                data-slot="content"
-                role="tabpanel"
-                data-value={itemVal}
-                hidden={active ? undefined : "until-found"}
-              >
-                {item.content}
-              </div>
-            )
-          })}
-        </slot>
-      </div>
-    )}
-  </div>
-</rla-tabs>
-
-<style is:inline set:html={instanceCss} />
-
-<style>
-  .rla-tb-host {
-    width: 100%;
-  }
-  .rla-tb-overflow-hidden {
-    display: none !important;
-  }
-  .rla-tb-count::after {
-    counter-reset: rla-tb-cnt calc(var(--base-hidden, 0) + var(--hidden-items, 0));
-    content: counter(rla-tb-cnt);
-  }
-  .rla-tb-popover {
-    margin: 0;
-    inset: auto;
-    position: absolute;
-  }
-  .rla-tb-popover:popover-open {
-    display: block;
-  }
-  /* Show items in popover if they are hidden in list or extra */
-  .rla-tb-pop-rendered {
-    display: none;
-  }
-  @supports not (content-visibility: hidden) {
-    [hidden="until-found"] {
-      display: none !important;
-    }
-  }
-</style>
-
-<script>
-  if (typeof HTMLElement !== 'undefined') {
-    class RLATabs extends HTMLElement {
-      private tabsCleanup: (() => void) | null = null;
-      private resizeObserver: ResizeObserver | null = null;
-
-      connectedCallback() {
-        this.style.display = 'contents';
-        const container = this.querySelector("[data-tabs-container]") as HTMLElement | null;
-        if (!container) return;
-
-        const list = container.querySelector("[data-slot=list]") as HTMLElement | null;
-        const indicator = container.querySelector("[data-slot=indicator]") as HTMLElement | null;
-        const orientation = this.dataset["orientation"] || "horizontal";
-        const isVertical = orientation === "vertical";
-
-        const updateIndicator = (activeTrigger: HTMLElement | null) => {
-          if (!indicator || !list || !activeTrigger) {
-            if (indicator) indicator.style.display = 'none';
-            return;
-          }
-
-          // If active trigger is hidden due to container queries, position near overflow button
-          if (getComputedStyle(activeTrigger).display === 'none') {
-            const overflowBtn = list.querySelector('.rla-tb-overflow-btn') as HTMLElement | null;
-            if (overflowBtn) activeTrigger = overflowBtn;
-          }
-
-          const listRect = list.getBoundingClientRect();
-          const triggerRect = activeTrigger.getBoundingClientRect();
-
-          if (triggerRect.width === 0 && triggerRect.height === 0) {
-            indicator.style.display = 'none';
-            return;
-          }
-
-          indicator.style.display = 'block';
-
-          if (isVertical) {
-            const top = triggerRect.top - listRect.top + list.scrollTop;
-            const height = triggerRect.height;
-            indicator.style.transform = `translateY(${top}px)`;
-            indicator.style.height = `${height}px`;
-          } else {
-            const left = triggerRect.left - listRect.left + list.scrollLeft;
-            const width = triggerRect.width;
-            indicator.style.transform = `translateX(${left}px)`;
-            indicator.style.width = `${width}px`;
-          }
-        };
-
-        const containerValue = container.dataset["value"];
-        const triggers = container.querySelectorAll("[role=tab]");
-        const panels = container.querySelectorAll("[role=tabpanel]");
-        const popoverItems = container.querySelectorAll("[data-popover-item]");
-
-        let activeTrigger: HTMLElement | null = null;
-
-        const syncState = (targetValue: string | undefined) => {
-          triggers.forEach(trigger => {
-            const el = trigger as HTMLElement;
-            const val = el.dataset["value"];
-            const isActive = val === targetValue;
-            el.setAttribute("data-state", isActive ? "active" : "inactive");
-            if (isActive) activeTrigger = el;
-          });
-
-          popoverItems.forEach(item => {
-            const el = item as HTMLElement;
-            const val = el.dataset["tabOverflowValue"];
-            if (val === targetValue) {
-              el.setAttribute("data-active", "true");
-              el.classList.add("bg-muted/80", "font-medium");
-            } else {
-              el.removeAttribute("data-active");
-              el.classList.remove("bg-muted/80", "font-medium");
-            }
-          });
-
-          panels.forEach(panel => {
-            const val = (panel as HTMLElement).dataset["value"];
-            if (val === targetValue) {
-              panel.removeAttribute("hidden");
-            } else {
-              panel.setAttribute("hidden", "until-found");
-            }
-          });
-        };
-
-        syncState(containerValue);
-
-        requestAnimationFrame(() => updateIndicator(activeTrigger));
-
-        if (window.ResizeObserver && list) {
-          this.resizeObserver = new ResizeObserver(() => {
-            const currentActive = list.querySelector("[role=tab][data-state=active]") as HTMLElement | null;
-            updateIndicator(currentActive);
-          });
-          this.resizeObserver.observe(list);
-        }
-
-        const clickCleanups: (() => void)[] = [];
-        const beforeMatchCleanups: (() => void)[] = [];
-
-        // Watch for browser Find-in-Page auto-expands
-        panels.forEach(panel => {
-          const onBeforeMatch = () => {
-            const targetValue = (panel as HTMLElement).dataset["value"];
-            const trigger = container.querySelector(`[role=tab][data-value="${targetValue}"]`) as HTMLButtonElement | null;
-            if (trigger) {
-              trigger.click();
-            } else {
-              syncState(targetValue);
-            }
-          };
-          panel.addEventListener("beforematch", onBeforeMatch);
-          beforeMatchCleanups.push(() => panel.removeEventListener("beforematch", onBeforeMatch));
-        });
-
-        triggers.forEach(triggerNode => {
-          const trigger = triggerNode as HTMLButtonElement;
-          const onClick = () => {
-            if (trigger.disabled) return;
-            const targetValue = trigger.dataset["value"];
-            syncState(targetValue);
-            updateIndicator(trigger);
-          };
-          trigger.addEventListener("click", onClick);
-          clickCleanups.push(() => trigger.removeEventListener("click", onClick));
-        });
-
-        popoverItems.forEach(itemNode => {
-          const item = itemNode as HTMLButtonElement;
-          const onClick = () => {
-            const targetValue = item.dataset["tabOverflowValue"];
-            syncState(targetValue);
-            const activeTrig = container.querySelector(`[role=tab][data-value="${targetValue}"]`) as HTMLElement | null;
-            updateIndicator(activeTrig);
-            // Hide popover after selection
-            const popover = item.closest('[popover]') as HTMLElement | null;
-            if (popover && 'hidePopover' in popover) {
-              (popover as any).hidePopover();
-            }
-          };
-          item.addEventListener("click", onClick);
-          clickCleanups.push(() => item.removeEventListener("click", onClick));
-        });
-
-        this.tabsCleanup = () => {
-          clickCleanups.forEach(fn => fn());
-          beforeMatchCleanups.forEach(fn => fn());
-          if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-            this.resizeObserver = null;
-          }
-        };
-      }
-
-      disconnectedCallback() {
-        if (this.tabsCleanup) {
-          this.tabsCleanup();
-          this.tabsCleanup = null;
-        }
-      }
-    }
-
-    if (!customElements.get('rla-tabs')) {
-      customElements.define('rla-tabs', RLATabs);
-    }
-  }
-</script>
+---
+import type { TabsProps } from "./tabs"
+import { tabsTheme } from "./tabs.theme"
+import RLABadge from "../badge/RLABadge.astro"
+import RLAIcon from "../icon/RLAIcon.astro"
+
+
+const {
+  items = [],
+  value = "",
+  defaultValue = "",
+  variant = "pill",
+  orientation = "horizontal",
+  size = "md",
+  color = "primary",
+  content = true,
+  valueKey = "value",
+  labelKey = "label",
+  maxTabs,
+  estimatedTabWidth = 100,
+  ...rest
+} = Astro.props as TabsProps
+
+// Normalize variant names
+const normalizedVariant = (variant === "solid" || variant === "pills") ? "pill" : (variant === "link" ? "underline" : variant);
+
+const classes = tabsTheme({
+  ...Astro.props,
+  variant: normalizedVariant
+});
+
+const initialValue = value || defaultValue || (items.length > 0 ? (items[0]?.[valueKey] ?? items[0]?.value ?? "0") : "")
+
+// ─── Native Popover Overflow ───────────────────
+const uid = Math.random().toString(36).substring(2, 9)
+const popoverId = `rla-tb-pop-${uid}`
+
+const effectiveMaxTabs = maxTabs !== undefined ? Math.max(1, maxTabs) : items.length
+const renderedListItems = items.slice(0, effectiveMaxTabs)
+const overflowItems = items.slice(effectiveMaxTabs)
+const baseHiddenCount = overflowItems.length
+const needsOverflow = items.length > 1 && orientation === "horizontal" && baseHiddenCount > 0
+---
+<rla-tabs {...rest} data-orientation={orientation} data-variant={normalizedVariant}>
+  <div
+    class:list={[classes.root, orientation === "horizontal" && "rla-tb-host"]}
+    data-slot="root"
+    data-tabs-container
+    data-value={initialValue}
+    data-tb={uid}
+  >
+    <div class={classes.list} data-slot="list" role="tablist">
+      <div class:list={[classes.indicator, "hidden"]} data-slot="indicator"></div>
+      {renderedListItems.map((item, index) => {
+        const itemVal = item[valueKey] ?? item.value ?? String(index)
+        const itemLabel = item[labelKey] ?? item.label
+        const active = itemVal === initialValue
+        return (
+          <button
+            type="button"
+            class:list={[classes.trigger]}
+            data-slot="trigger"
+            role="tab"
+            data-value={itemVal}
+            data-state={active ? "active" : "inactive"}
+            disabled={item.disabled}
+          >
+            {item.icon && <span class={item.icon + " " + classes.leadingIcon} data-slot="leadingIcon" />}
+            {itemLabel && <span class={classes.label} data-slot="label">{itemLabel}</span>}
+            {item.badge !== undefined && item.badge !== null && (
+              <RLABadge
+                size="sm"
+                variant="subtle"
+                color="neutral"
+                class={classes.trailingBadge}
+                data-slot="trailingBadge"
+              >
+                {typeof item.badge === "object" ? item.badge.label : item.badge}
+              </RLABadge>
+            )}
+          </button>
+        )
+      })}
+
+      {needsOverflow && (
+        <div class="relative inline-flex items-center ml-auto">
+          <button
+            type="button"
+            class:list={[
+              classes.trigger,
+              "rla-tb-overflow-btn",
+              baseHiddenCount === 0 && "rla-tb-overflow-hidden"
+            ]}
+            popovertarget={popoverId}
+            data-slot="overflow-trigger"
+            aria-label="More tabs"
+          >
+            <span class="rla-tb-label">
+              +{baseHiddenCount} more
+            </span>
+            <RLAIcon name="chevronDown" class="ml-1 size-3.5 opacity-70" />
+          </button>
+
+          <div
+            id={popoverId}
+            popover="auto"
+            class="rla-tb-popover rounded-lg border border-default bg-default p-1 shadow-lg backdrop-blur-sm"
+          >
+            <div class="flex flex-col gap-0.5 min-w-[10rem]">
+              {items.map((item, index) => {
+                const itemVal = item[valueKey] ?? item.value ?? String(index)
+                const itemLabel = item[labelKey] ?? item.label
+                const isExtra = index >= effectiveMaxTabs
+                return (
+                  <button
+                    type="button"
+                    class:list={[
+                      "w-full text-left px-3 py-1.5 text-sm rounded-md transition-colors flex items-center justify-between",
+                      "hover:bg-muted focus-visible:outline-none cursor-pointer",
+                      !isExtra && "rla-tb-pop-rendered"
+                    ]}
+                    data-tab-overflow-value={itemVal}
+                    data-popover-item
+                  >
+                    <span class="truncate">{itemLabel}</span>
+                    <RLAIcon name="check" class="size-4 opacity-0 data-[active=true]:opacity-100" />
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+
+    {content && (
+      <div class="flex-1">
+        <slot>
+          {items.map((item, index) => {
+            const itemVal = item[valueKey] ?? item.value ?? String(index)
+            const active = itemVal === initialValue
+            return (
+              <div
+                class={classes.content}
+                data-slot="content"
+                role="tabpanel"
+                data-value={itemVal}
+                hidden={active ? undefined : "until-found"}
+              >
+                {item.content}
+              </div>
+            )
+          })}
+        </slot>
+      </div>
+    )}
+  </div>
+</rla-tabs>
+
+<style>
+  .rla-tb-host {
+    width: 100%;
+  }
+  .rla-tb-popover {
+    margin: 0;
+    inset: auto;
+    position: absolute;
+  }
+  .rla-tb-popover:popover-open {
+    display: block;
+  }
+  .rla-tb-pop-rendered {
+    display: none;
+  }
+  @supports not (content-visibility: hidden) {
+    [hidden="until-found"] {
+      display: none !important;
+    }
+  }
+</style>
+
+<script>
+  if (typeof HTMLElement !== 'undefined') {
+    class RLATabs extends HTMLElement {
+      private tabsCleanup: (() => void) | null = null;
+      private resizeObserver: ResizeObserver | null = null;
+
+      connectedCallback() {
+        this.style.display = 'contents';
+        const container = this.querySelector("[data-tabs-container]") as HTMLElement | null;
+        if (!container) return;
+
+        const list = container.querySelector("[data-slot=list]") as HTMLElement | null;
+        const indicator = container.querySelector("[data-slot=indicator]") as HTMLElement | null;
+        const orientation = this.dataset["orientation"] || "horizontal";
+        const isVertical = orientation === "vertical";
+
+        const updateIndicator = (activeTrigger: HTMLElement | null) => {
+          if (!indicator || !list || !activeTrigger) {
+            if (indicator) indicator.style.display = 'none';
+            return;
+          }
+
+          // If active trigger is hidden due to container queries, position near overflow button
+          if (getComputedStyle(activeTrigger).display === 'none') {
+            const overflowBtn = list.querySelector('.rla-tb-overflow-btn') as HTMLElement | null;
+            if (overflowBtn) activeTrigger = overflowBtn;
+          }
+
+          const listRect = list.getBoundingClientRect();
+          const triggerRect = activeTrigger.getBoundingClientRect();
+
+          if (triggerRect.width === 0 && triggerRect.height === 0) {
+            indicator.style.display = 'none';
+            return;
+          }
+
+          indicator.style.display = 'block';
+
+          if (isVertical) {
+            const top = triggerRect.top - listRect.top + list.scrollTop;
+            const height = triggerRect.height;
+            indicator.style.transform = `translateY(${top}px)`;
+            indicator.style.height = `${height}px`;
+          } else {
+            const left = triggerRect.left - listRect.left + list.scrollLeft;
+            const width = triggerRect.width;
+            indicator.style.transform = `translateX(${left}px)`;
+            indicator.style.width = `${width}px`;
+          }
+        };
+
+        const containerValue = container.dataset["value"];
+        const triggers = container.querySelectorAll("[role=tab]");
+        const panels = container.querySelectorAll("[role=tabpanel]");
+        const popoverItems = container.querySelectorAll("[data-popover-item]");
+
+        let activeTrigger: HTMLElement | null = null;
+
+        const syncState = (targetValue: string | undefined) => {
+          triggers.forEach(trigger => {
+            const el = trigger as HTMLElement;
+            const val = el.dataset["value"];
+            const isActive = val === targetValue;
+            el.setAttribute("data-state", isActive ? "active" : "inactive");
+            if (isActive) activeTrigger = el;
+          });
+
+          popoverItems.forEach(item => {
+            const el = item as HTMLElement;
+            const val = el.dataset["tabOverflowValue"];
+            if (val === targetValue) {
+              el.setAttribute("data-active", "true");
+              el.classList.add("bg-muted/80", "font-medium");
+            } else {
+              el.removeAttribute("data-active");
+              el.classList.remove("bg-muted/80", "font-medium");
+            }
+          });
+
+          panels.forEach(panel => {
+            const val = (panel as HTMLElement).dataset["value"];
+            if (val === targetValue) {
+              panel.removeAttribute("hidden");
+            } else {
+              panel.setAttribute("hidden", "until-found");
+            }
+          });
+        };
+
+        syncState(containerValue);
+
+        requestAnimationFrame(() => updateIndicator(activeTrigger));
+
+        if (window.ResizeObserver && list) {
+          this.resizeObserver = new ResizeObserver(() => {
+            const currentActive = list.querySelector("[role=tab][data-state=active]") as HTMLElement | null;
+            updateIndicator(currentActive);
+          });
+          this.resizeObserver.observe(list);
+        }
+
+        const clickCleanups: (() => void)[] = [];
+        const beforeMatchCleanups: (() => void)[] = [];
+
+        // Watch for browser Find-in-Page auto-expands
+        panels.forEach(panel => {
+          const onBeforeMatch = () => {
+            const targetValue = (panel as HTMLElement).dataset["value"];
+            const trigger = container.querySelector(`[role=tab][data-value="${targetValue}"]`) as HTMLButtonElement | null;
+            if (trigger) {
+              trigger.click();
+            } else {
+              syncState(targetValue);
+            }
+          };
+          panel.addEventListener("beforematch", onBeforeMatch);
+          beforeMatchCleanups.push(() => panel.removeEventListener("beforematch", onBeforeMatch));
+        });
+
+        triggers.forEach(triggerNode => {
+          const trigger = triggerNode as HTMLButtonElement;
+          const onClick = () => {
+            if (trigger.disabled) return;
+            const targetValue = trigger.dataset["value"];
+            syncState(targetValue);
+            updateIndicator(trigger);
+          };
+          trigger.addEventListener("click", onClick);
+          clickCleanups.push(() => trigger.removeEventListener("click", onClick));
+        });
+
+        popoverItems.forEach(itemNode => {
+          const item = itemNode as HTMLButtonElement;
+          const onClick = () => {
+            const targetValue = item.dataset["tabOverflowValue"];
+            syncState(targetValue);
+            const activeTrig = container.querySelector(`[role=tab][data-value="${targetValue}"]`) as HTMLElement | null;
+            updateIndicator(activeTrig);
+            // Hide popover after selection
+            const popover = item.closest('[popover]') as HTMLElement | null;
+            if (popover && 'hidePopover' in popover) {
+              (popover as any).hidePopover();
+            }
+          };
+          item.addEventListener("click", onClick);
+          clickCleanups.push(() => item.removeEventListener("click", onClick));
+        });
+
+        this.tabsCleanup = () => {
+          clickCleanups.forEach(fn => fn());
+          beforeMatchCleanups.forEach(fn => fn());
+          if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+          }
+        };
+      }
+
+      disconnectedCallback() {
+        if (this.tabsCleanup) {
+          this.tabsCleanup();
+          this.tabsCleanup = null;
+        }
+      }
+    }
+
+    if (!customElements.get('rla-tabs')) {
+      customElements.define('rla-tabs', RLATabs);
+    }
+  }
+</script>