basecoat-cli 0.1.0 → 0.2.0-beta.1

package/dist/assets/js/select.js

@@ -1,150 +1,199 @@
-window.basecoat = window.basecoat || {};
-window.basecoat.registerSelect = function(Alpine) {
-  if (Alpine.components && Alpine.components.select) return;
-  
-  Alpine.data('select', (name = null, initialValue = null) => ({
-    open: false,
-    name: null,
-    options: [],
-    disabledOptions: [],
-    focusedIndex: null,
-    selectedLabel: null,
-    selectedValue: null,
-    query: '',
+(() => {
+  const initSelect = (selectComponent) => {
+    const trigger = selectComponent.querySelector(':scope > [popovertarget]');
+    const selectedValue = trigger.querySelector(':scope > span');
+    const popover = selectComponent.querySelector(':scope > [popover]');
+    const listbox = popover.querySelector('[role="listbox"]');
+    const input = selectComponent.querySelector(':scope > input[type="hidden"]');
+    const filter = selectComponent.querySelector('header input[type="text"]');
+    if (!trigger || !popover || !listbox || !input) return;
     
-    init() {
-      this.$nextTick(() => {
-        if (name) this.name = name;
-        this.options = Array.from(this.$el.querySelectorAll('[role=option]:not([aria-disabled])'));
-        this.disabledOptions = Array.from(this.$el.querySelectorAll('[role=option][aria-disabled=true]'));
-        if (this.options.length === 0) return;
-        if (initialValue) {
-          const option = this.options.find(opt => opt.getAttribute('data-value') === initialValue);
-          this.selectOption(option, false);
-          this.focusedIndex = this.options.indexOf(option);
-        } else {
-          this.selectOption(this.options[0], false);
-        }
-      });
-    },
-    focusOption() {
-      if (this.options.length === 0) return;
-
-      if (this.focusedIndex >= this.options.length) {
-        this.focusedIndex = this.options.length - 1;
-      } else if (this.focusedIndex < 0 || this.focusedIndex === null) {
-        this.focusedIndex = 0;
+    const options = Array.from(listbox.querySelectorAll('[role="option"]'));
+    let visibleOptions = [...options];
+    let activeIndex = -1;
+
+    const updateValue = (option) => {
+      if (option) {
+        selectedValue.innerHTML = option.dataset.label || option.innerHTML;
+        input.value = option.dataset.value;
+        listbox.querySelector('[role="option"][aria-selected="true"]')?.removeAttribute('aria-selected');
+        option.setAttribute('aria-selected', 'true');
       }
-      this.options.forEach(opt => opt.removeAttribute('data-focus'));
-      const option = this.options[this.focusedIndex];
-      option.setAttribute('data-focus', '');
-      option.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-    },
-    focusOnSelectedOption() {
-      if (this.options.length === 0 || this.selectedValue === null) return;
-      const option = this.options.find(opt => opt.getAttribute('data-value') === this.selectedValue);
+    };
+
+    const selectOption = (option) => {
       if (!option) return;
-      this.focusedIndex = this.options.indexOf(option);
-      this.focusOption();
-    },
-    moveOptionFocus(delta) {
-      if (this.options.length === 0) return;
-
-      if (!this.open) { 
-        this.open = true;
-        this.focusOnSelectedOption();
-      } else {
-        this.focusedIndex = this.focusedIndex === null
-          ? 0
-          : this.focusedIndex + delta;
-      }
-      this.focusOption();
-    },
-    handleOptionClick(event) {
-      const option = event.target.closest('[role=option]');
-      if (option && option.getAttribute('aria-disabled') !== 'true') {
-        this.selectOption(option);
-        this.open = false;
-        this.$nextTick(() => this.$refs.trigger.focus());
+      
+      updateValue(option);
+      
+      trigger.removeAttribute('aria-activedescendant');
+      options.forEach(opt => opt.classList.remove('active'));
+      activeIndex = -1;
+      popover.hidePopover();
+    };
+
+    if (filter) {
+      const filterOptions = () => {
+        const searchTerm = filter.value.trim().toLowerCase();
+        
+        if (activeIndex > -1) {
+          options[activeIndex].classList.remove('active');
+          trigger.removeAttribute('aria-activedescendant');
+          activeIndex = -1;
+        }
+
+        visibleOptions = [];
+        options.forEach(option => {
+          const optionText = (option.dataset.label || option.textContent).trim().toLowerCase();
+          const matches = optionText.includes(searchTerm);
+          option.setAttribute('aria-hidden', String(!matches));
+          if (matches) {
+            visibleOptions.push(option);
+          }
+        });
+      };
+  
+      filter.addEventListener('input', filterOptions);
+    }
+
+    let initialOption = options.find(opt => input.value && opt.dataset.value === input.value);
+    if (!initialOption && options.length > 0) initialOption = options[0];
+
+    updateValue(initialOption);
+
+    const handleKeyNavigation = (e) => {
+      if (!['ArrowDown', 'ArrowUp', 'Enter', 'Home', 'End'].includes(e.key)) {
+        return;
       }
-    },
-    handleOptionMousemove(event) {
-      const option = event.target.closest('[role=option]');
-      if (option && option.getAttribute('aria-disabled') !== 'true') {
-        this.focusedIndex = this.options.indexOf(option);
-        this.focusOption();
+
+      if (!popover.matches(':popover-open')) {
+        if (e.currentTarget === trigger && e.key !== 'Enter') {
+          e.preventDefault();
+          trigger.click();
+        }
+        return;
       }
-    },
-    handleOptionEnter(event) {
-      this.selectOption(this.options[this.focusedIndex]);
-      this.open = !this.open;
-    },
-    selectOption(option, dispatch = true) {
-      if (this.options.length === 0 || !option || option.disabled || option.getAttribute('data-value') == null) {
+      
+      e.preventDefault();
+
+      if (e.key === 'Enter') {
+        if (activeIndex > -1) {
+          selectOption(options[activeIndex]);
+        }
         return;
       }
 
-      this.options.forEach(opt => {
-        opt.setAttribute('aria-selected', opt === option);
-      });
-      this.selectedLabel = option.innerHTML;
-      this.selectedValue = option.getAttribute('data-value');
-      if (dispatch) {
-        this.$dispatch('select:change', {
-          value: this.selectedValue,
-          label: this.selectedLabel
-        });
-        this.$dispatch('change'); 
+      if (visibleOptions.length === 0) return;
+
+      const currentVisibleIndex = activeIndex > -1 ? visibleOptions.indexOf(options[activeIndex]) : -1;
+      let nextVisibleIndex = currentVisibleIndex;
+
+      switch (e.key) {
+        case 'ArrowDown':
+          if (currentVisibleIndex < visibleOptions.length - 1) {
+            nextVisibleIndex = currentVisibleIndex + 1;
+          }
+          break;
+        case 'ArrowUp':
+          if (currentVisibleIndex > 0) {
+            nextVisibleIndex = currentVisibleIndex - 1;
+          } else if (currentVisibleIndex === -1) {
+            nextVisibleIndex = 0; // Start from top if nothing is active
+          }
+          break;
+        case 'Home':
+          nextVisibleIndex = 0;
+          break;
+        case 'End':
+          nextVisibleIndex = visibleOptions.length - 1;
+          break;
+      }
+
+      if (nextVisibleIndex !== currentVisibleIndex) {
+        if (currentVisibleIndex > -1) {
+          visibleOptions[currentVisibleIndex].classList.remove('active');
+        }
+        
+        const newActiveOption = visibleOptions[nextVisibleIndex];
+        newActiveOption.classList.add('active');
+        activeIndex = options.indexOf(newActiveOption);
+        
+        if (newActiveOption.id) {
+          trigger.setAttribute('aria-activedescendant', newActiveOption.id);
+        }
+        newActiveOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+      }
+    };
+
+    trigger.addEventListener('keydown', handleKeyNavigation);
+    if (filter) {
+      filter.addEventListener('keydown', handleKeyNavigation);
+    }
+
+    listbox.addEventListener('click', (e) => {
+      const clickedOption = e.target.closest('[role="option"]');
+      if (clickedOption) {
+        selectOption(clickedOption);
       }
-    },
-    filterOptions(query) {
-      if (query.length > 0) {
-        this.disabledOptions.forEach(opt => { opt.setAttribute('aria-hidden', 'true'); });
-      } else {
-        this.disabledOptions.forEach(opt => { opt.removeAttribute('aria-hidden'); });
+    });
+
+    popover.addEventListener('toggle', (e) => {
+      trigger.setAttribute('aria-expanded', e.newState === 'open');
+
+      if (e.newState === 'open') {
+        if (filter) filter.focus();
+        
+        const selectedOption = listbox.querySelector('[role="option"][aria-selected="true"]');
+        let startingOption = null;
+
+        if (selectedOption && visibleOptions.includes(selectedOption)) {
+          startingOption = selectedOption;
+        } else if (visibleOptions.length > 0) {
+          startingOption = visibleOptions[0];
+        }
+
+        if (activeIndex > -1) options[activeIndex]?.classList.remove('active');
+
+        if (startingOption) {
+          activeIndex = options.indexOf(startingOption);
+          startingOption.classList.add('active');
+          if (startingOption.id) {
+            trigger.setAttribute('aria-activedescendant', startingOption.id);
+          }
+          startingOption.scrollIntoView({ block: 'nearest' });
+        } else {
+          activeIndex = -1;
+        }
+      } else if (e.newState === 'closed') {
+        if (filter) {
+          filter.value = '';
+          visibleOptions = [...options];
+          options.forEach(opt => opt.setAttribute('aria-hidden', 'false'));
+        }
+
+        trigger.removeAttribute('aria-activedescendant');
+        if (activeIndex > -1) options[activeIndex]?.classList.remove('active');
+        activeIndex = -1;
       }
-      this.options.forEach(opt => {
-        opt.removeAttribute('aria-hidden');
-        if (opt.getAttribute('data-value') != null && !opt.innerHTML.toLowerCase().includes(query.toLowerCase())) {
-          opt.setAttribute('aria-hidden', 'true');
+    });
+
+    selectComponent.dataset.selectInitialized = true;
+  };
+
+  document.querySelectorAll('div.select:not([data-select-initialized])').forEach(initSelect);
+
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      mutation.addedNodes.forEach((node) => {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          if (node.matches('div.select:not([data-select-initialized])')) {
+            initSelect(node);
+          }
+          node.querySelectorAll('div.select:not([data-select-initialized])').forEach(initSelect);
         }
       });
-    },
-
-    $trigger: {
-      '@click'() { this.open = !this.open; this.focusOnSelectedOption(); },
-      '@keydown.escape.prevent'() {
-        this.open = false;
-        this.$refs.trigger.focus();
-      },
-      '@keydown.down.prevent'() { this.moveOptionFocus(+1); },
-      '@keydown.up.prevent'() { this.moveOptionFocus(-1); },
-      '@keydown.home.prevent'() { this.focusOption(0) },
-      '@keydown.end.prevent'() { this.focusOption(this.options.length - 1) },
-      '@keydown.enter.prevent'() {
-        if (this.open) this.handleOptionEnter();
-        else this.open = true;
-      },
-      ':aria-expanded'() { return this.open },
-      'x-ref': 'trigger'
-    },
-    $content: {
-      '@click'(e) { this.handleOptionClick(e) },
-      '@mouseover'(e) { this.handleOptionMousemove(e) },
-      ':aria-hidden'() { return !this.open },
-      'x-cloak': ''
-    },
-    $filter: {
-      '@input'(e) { this.filterOptions(e.target.value) },
-      '@keydown.escape.prevent'() {
-        this.open = false;
-        this.$refs.trigger.focus();
-      },
-      '@keydown.down.prevent'() { this.moveOptionFocus(+1); },
-      '@keydown.up.prevent'() { this.moveOptionFocus(-1); },
-      '@keydown.home.prevent'() { this.focusOption(0) },
-      '@keydown.end.prevent'() { this.focusOption(this.options.length - 1) },
-      '@keydown.enter.prevent'() { this.handleOptionEnter() },
-    }
-  }));
-};
+    });
+  });
+  
+  observer.observe(document.body, { childList: true, subtree: true });
+})();

package/dist/assets/js/select.min.js

@@ -0,0 +1 @@
+(()=>{const e=e=>{const t=e.querySelector(":scope > [popovertarget]"),r=t.querySelector(":scope > span"),a=e.querySelector(":scope > [popover]"),i=a.querySelector('[role="listbox"]'),o=e.querySelector(':scope > input[type="hidden"]'),n=e.querySelector('header input[type="text"]');if(!(t&&a&&i&&o))return;const s=Array.from(i.querySelectorAll('[role="option"]'));let c=[...s],l=-1;const d=e=>{e&&(r.innerHTML=e.dataset.label||e.innerHTML,o.value=e.dataset.value,i.querySelector('[role="option"][aria-selected="true"]')?.removeAttribute("aria-selected"),e.setAttribute("aria-selected","true"))},u=e=>{e&&(d(e),t.removeAttribute("aria-activedescendant"),s.forEach((e=>e.classList.remove("active"))),l=-1,a.hidePopover())};if(n){const e=()=>{const e=n.value.trim().toLowerCase();l>-1&&(s[l].classList.remove("active"),t.removeAttribute("aria-activedescendant"),l=-1),c=[],s.forEach((t=>{const r=(t.dataset.label||t.textContent).trim().toLowerCase().includes(e);t.setAttribute("aria-hidden",String(!r)),r&&c.push(t)}))};n.addEventListener("input",e)}let v=s.find((e=>o.value&&e.dataset.value===o.value));!v&&s.length>0&&(v=s[0]),d(v);const p=e=>{if(!["ArrowDown","ArrowUp","Enter","Home","End"].includes(e.key))return;if(!a.matches(":popover-open"))return void(e.currentTarget===t&&"Enter"!==e.key&&(e.preventDefault(),t.click()));if(e.preventDefault(),"Enter"===e.key)return void(l>-1&&u(s[l]));if(0===c.length)return;const r=l>-1?c.indexOf(s[l]):-1;let i=r;switch(e.key){case"ArrowDown":r<c.length-1&&(i=r+1);break;case"ArrowUp":r>0?i=r-1:-1===r&&(i=0);break;case"Home":i=0;break;case"End":i=c.length-1}if(i!==r){r>-1&&c[r].classList.remove("active");const e=c[i];e.classList.add("active"),l=s.indexOf(e),e.id&&t.setAttribute("aria-activedescendant",e.id),e.scrollIntoView({block:"nearest",behavior:"smooth"})}};t.addEventListener("keydown",p),n&&n.addEventListener("keydown",p),i.addEventListener("click",(e=>{const t=e.target.closest('[role="option"]');t&&u(t)})),a.addEventListener("toggle",(e=>{if(t.setAttribute("aria-expanded","open"===e.newState),"open"===e.newState){n&&n.focus();const e=i.querySelector('[role="option"][aria-selected="true"]');let r=null;e&&c.includes(e)?r=e:c.length>0&&(r=c[0]),l>-1&&s[l]?.classList.remove("active"),r?(l=s.indexOf(r),r.classList.add("active"),r.id&&t.setAttribute("aria-activedescendant",r.id),r.scrollIntoView({block:"nearest"})):l=-1}else"closed"===e.newState&&(n&&(n.value="",c=[...s],s.forEach((e=>e.setAttribute("aria-hidden","false")))),t.removeAttribute("aria-activedescendant"),l>-1&&s[l]?.classList.remove("active"),l=-1)})),e.dataset.selectInitialized=!0};document.querySelectorAll("div.select:not([data-select-initialized])").forEach(e);new MutationObserver((t=>{t.forEach((t=>{t.addedNodes.forEach((t=>{t.nodeType===Node.ELEMENT_NODE&&(t.matches("div.select:not([data-select-initialized])")&&e(t),t.querySelectorAll("div.select:not([data-select-initialized])").forEach(e))}))}))})).observe(document.body,{childList:!0,subtree:!0})})();

package/dist/assets/js/sidebar.js

@@ -1,25 +1,110 @@
-window.basecoat = window.basecoat || {};
-window.basecoat.registerSidebar= function(Alpine) {
-  if (Alpine.components && Alpine.components.sidebar) return;
-
-  Alpine.data('sidebar', (initialOpen = true, initialMobileOpen = false) => ({
-    open: window.innerWidth >= 768
-      ? initialOpen
-      : initialMobileOpen,
-
-    init() {
-      this.$nextTick(() => {
-        this.$el.removeAttribute('data-uninitialized');
+(() => {
+  // Monkey patching the history API to detect client-side navigation
+  if (!window.history.__basecoatPatched) {
+    const originalPushState = window.history.pushState;
+    window.history.pushState = function(...args) {
+      originalPushState.apply(this, args);
+      window.dispatchEvent(new Event('basecoat:locationchange'));
+    };
+    
+    const originalReplaceState = window.history.replaceState;
+    window.history.replaceState = function(...args) {
+      originalReplaceState.apply(this, args);
+      window.dispatchEvent(new Event('basecoat:locationchange'));
+    };
+
+    window.history.__basecoatPatched = true;
+  }
+
+  const initSidebar = (sidebarComponent) => {
+    const initialOpen = sidebarComponent.dataset.initialOpen !== 'false';
+    const initialMobileOpen = sidebarComponent.dataset.initialMobileOpen === 'true';
+    const breakpoint = parseInt(sidebarComponent.dataset.breakpoint) || 768;
+    
+    let open = breakpoint > 0 
+      ? (window.innerWidth >= breakpoint ? initialOpen : initialMobileOpen)
+      : initialOpen;
+    
+    const updateCurrentPageLinks = () => {
+      const currentPath = window.location.pathname.replace(/\/$/, '');
+      sidebarComponent.querySelectorAll('a').forEach(link => {
+        if (link.hasAttribute('data-ignore-current')) return;
+        
+        const linkPath = new URL(link.href).pathname.replace(/\/$/, '');
+        if (linkPath === currentPath) {
+          link.setAttribute('aria-current', 'page');
+        } else {
+          link.removeAttribute('aria-current');
+        }
       });
-    },
-
-    $main: {
-      '@sidebar:open.window'(e) { this.open = true },
-      '@sidebar:close.window'(e) { this.open = false },
-      '@sidebar:toggle.window'(e) { this.open = !this.open },
-      '@click'(e) { if (e.target === this.$el) this.open = false },
-      ':aria-hidden'() { return !this.open },
-      ':inert'() { return !this.open }
-    },
-  }));
-};
+    };
+    
+    const updateState = () => {
+      sidebarComponent.setAttribute('aria-hidden', !open);
+      if (open) {
+        sidebarComponent.removeAttribute('inert');
+      } else {
+        sidebarComponent.setAttribute('inert', '');
+      }
+    };
+
+    const setState = (state) => {
+      open = state;
+      updateState();
+    };
+
+    const sidebarId = sidebarComponent.id;
+
+    window.addEventListener('sidebar:open', (e) => {
+      if (!e.detail?.id || e.detail.id === sidebarId) setState(true);
+    });
+    window.addEventListener('sidebar:close', (e) => {
+      if (!e.detail?.id || e.detail.id === sidebarId) setState(false);
+    });
+    window.addEventListener('sidebar:toggle', (e) => {
+      if (!e.detail?.id || e.detail.id === sidebarId) setState(!open);
+    });
+    
+    sidebarComponent.addEventListener('click', (e) => {
+      const target = e.target;
+      const nav = sidebarComponent.querySelector('nav');
+      
+      const isMobile = window.innerWidth < breakpoint;
+      
+      if (isMobile && (target.closest('a, button') && !target.closest('[data-keep-mobile-sidebar-open]'))) {
+        if (document.activeElement) document.activeElement.blur();
+        setState(false);
+        return;
+      }
+      
+      if (target === sidebarComponent || (nav && !nav.contains(target))) {
+        if (document.activeElement) document.activeElement.blur();
+        setState(false);
+      }
+    });
+
+    window.addEventListener('popstate', updateCurrentPageLinks);
+    window.addEventListener('basecoat:locationchange', updateCurrentPageLinks);
+
+    updateState();
+    updateCurrentPageLinks();
+    sidebarComponent.dataset.sidebarInitialized = true;
+  };
+
+  document.querySelectorAll('.sidebar:not([data-sidebar-initialized])').forEach(initSidebar);
+
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      mutation.addedNodes.forEach((node) => {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          if (node.matches('.sidebar:not([data-sidebar-initialized])')) {
+            initSidebar(node);
+          }
+          node.querySelectorAll('.sidebar:not([data-sidebar-initialized])').forEach(initSidebar);
+        }
+      });
+    });
+  });
+
+  observer.observe(document.body, { childList: true, subtree: true });
+})();

package/dist/assets/js/sidebar.min.js

@@ -0,0 +1 @@
+(()=>{if(!window.history.__basecoatPatched){const e=window.history.pushState;window.history.pushState=function(...t){e.apply(this,t),window.dispatchEvent(new Event("basecoat:locationchange"))};const t=window.history.replaceState;window.history.replaceState=function(...e){t.apply(this,e),window.dispatchEvent(new Event("basecoat:locationchange"))},window.history.__basecoatPatched=!0}const e=e=>{const t="false"!==e.dataset.initialOpen,i="true"===e.dataset.initialMobileOpen,a=parseInt(e.dataset.breakpoint)||768;let n=a>0?window.innerWidth>=a?t:i:t;const d=()=>{const t=window.location.pathname.replace(/\/$/,"");e.querySelectorAll("a").forEach((e=>{if(e.hasAttribute("data-ignore-current"))return;new URL(e.href).pathname.replace(/\/$/,"")===t?e.setAttribute("aria-current","page"):e.removeAttribute("aria-current")}))},o=()=>{e.setAttribute("aria-hidden",!n),n?e.removeAttribute("inert"):e.setAttribute("inert","")},r=e=>{n=e,o()},s=e.id;window.addEventListener("sidebar:open",(e=>{e.detail?.id&&e.detail.id!==s||r(!0)})),window.addEventListener("sidebar:close",(e=>{e.detail?.id&&e.detail.id!==s||r(!1)})),window.addEventListener("sidebar:toggle",(e=>{e.detail?.id&&e.detail.id!==s||r(!n)})),e.addEventListener("click",(t=>{const i=t.target,n=e.querySelector("nav");if(window.innerWidth<a&&i.closest("a, button")&&!i.closest("[data-keep-mobile-sidebar-open]"))return document.activeElement&&document.activeElement.blur(),void r(!1);(i===e||n&&!n.contains(i))&&(document.activeElement&&document.activeElement.blur(),r(!1))})),window.addEventListener("popstate",d),window.addEventListener("basecoat:locationchange",d),o(),d(),e.dataset.sidebarInitialized=!0};document.querySelectorAll(".sidebar:not([data-sidebar-initialized])").forEach(e);new MutationObserver((t=>{t.forEach((t=>{t.addedNodes.forEach((t=>{t.nodeType===Node.ELEMENT_NODE&&(t.matches(".sidebar:not([data-sidebar-initialized])")&&e(t),t.querySelectorAll(".sidebar:not([data-sidebar-initialized])").forEach(e))}))}))})).observe(document.body,{childList:!0,subtree:!0})})();

package/dist/assets/js/tabs.js

@@ -1,64 +1,75 @@
-window.basecoat = window.basecoat || {};
-window.basecoat.registerTabs = function(Alpine) {
-  if (Alpine.components && Alpine.components.tabs) return;
-  
-  Alpine.data('tabs', (initialTabIndex = 0) => ({
-    activeTabIndex: initialTabIndex,
-    tabs: [],
-    panels: [],
+(() => {
+  const initTabs = (tabsComponent) => {
+    const tablist = tabsComponent.querySelector('[role="tablist"]');
+    if (!tablist) return;
 
-    init() {
-      this.$nextTick(() => {
-        this.tabs = Array.from(this.$el.querySelectorAll(':scope > [role=tablist] [role=tab]:not([disabled])'));
-        this.panels = Array.from(this.$el.querySelectorAll(':scope > [role=tabpanel]'));
-        if (this.tabs.length > 0) {
-          this.selectTab(this.tabs[initialTabIndex], false);
-        }
-      });
-    },
-    nextTab() {
-      if (this.tabs.length === 0) return;
-      let newIndex = (this.activeTabIndex + 1) % this.tabs.length;
-      this.selectTab(this.tabs[newIndex]);
-    },
-    prevTab() {
-      if (this.tabs.length === 0) return;
-      let newIndex = (this.activeTabIndex - 1 + this.tabs.length) % this.tabs.length;
-      this.selectTab(this.tabs[newIndex]);
-    },
-    selectTab(tab, focus = true) {
-      if (!tab || this.tabs.length === 0) return;
+    const tabs = Array.from(tablist.querySelectorAll('[role="tab"]'));
+    const panels = tabs.map(tab => document.getElementById(tab.getAttribute('aria-controls'))).filter(Boolean);
 
-      this.tabs.forEach((t, index) => {
-        const isSelected = t === tab;
-        t.setAttribute('aria-selected', isSelected);
-        t.setAttribute('tabindex', isSelected ? '0' : '-1');
-        if (isSelected) {
-          this.activeTabIndex = index;
-          this.activeTab = t;
-          if (focus) {
-            t.focus();
-          }
-        }
+    const selectTab = (tabToSelect) => {
+      tabs.forEach((tab, index) => {
+        tab.setAttribute('aria-selected', 'false');
+        tab.setAttribute('tabindex', '-1');
+        if (panels[index]) panels[index].hidden = true;
       });
 
-      const panelId = tab.getAttribute('aria-controls');
-      if (!panelId) return;
+      tabToSelect.setAttribute('aria-selected', 'true');
+      tabToSelect.setAttribute('tabindex', '0');
+      const activePanel = document.getElementById(tabToSelect.getAttribute('aria-controls'));
+      if (activePanel) activePanel.hidden = false;
+    };
 
-      this.panels.forEach(panel => {
-          panel.hidden = (panel.getAttribute('id') !== panelId);
-      });
-    },
+    tablist.addEventListener('click', (e) => {
+      const clickedTab = e.target.closest('[role="tab"]');
+      if (clickedTab) selectTab(clickedTab);
+    });
+
+    tablist.addEventListener('keydown', (e) => {
+      const currentTab = e.target;
+      if (!tabs.includes(currentTab)) return;
+
+      let nextTab;
+      const currentIndex = tabs.indexOf(currentTab);
 
-    $tablist: {
-      ['@click'](event) {
-          const clickedTab = event.target.closest('[role=tab]');
-          if (clickedTab) {
-              this.selectTab(clickedTab);
+      switch (e.key) {
+        case 'ArrowRight':
+          nextTab = tabs[(currentIndex + 1) % tabs.length];
+          break;
+        case 'ArrowLeft':
+          nextTab = tabs[(currentIndex - 1 + tabs.length) % tabs.length];
+          break;
+        case 'Home':
+          nextTab = tabs[0];
+          break;
+        case 'End':
+          nextTab = tabs[tabs.length - 1];
+          break;
+        default:
+          return;
+      }
+
+      e.preventDefault();
+      selectTab(nextTab);
+      nextTab.focus();
+    });
+    
+    tabsComponent.dataset.tabsInitialized = true;
+  };
+
+  document.querySelectorAll('.tabs:not([data-tabs-initialized])').forEach(initTabs);
+
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      mutation.addedNodes.forEach((node) => {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          if (node.matches('.tabs:not([data-tabs-initialized])')) {
+            initTabs(node);
           }
-      },
-      ['@keydown.arrow-right.prevent']() { this.nextTab() },
-      ['@keydown.arrow-left.prevent']() { this.prevTab() },
-    },
-  }));
-};
+          node.querySelectorAll('.tabs:not([data-tabs-initialized])').forEach(initTabs);
+        }
+      });
+    });
+  });
+
+  observer.observe(document.body, { childList: true, subtree: true });
+})();

package/dist/assets/js/tabs.min.js

@@ -0,0 +1 @@
+(()=>{const e=e=>{const t=e.querySelector('[role="tablist"]');if(!t)return;const a=Array.from(t.querySelectorAll('[role="tab"]')),r=a.map((e=>document.getElementById(e.getAttribute("aria-controls")))).filter(Boolean),n=e=>{a.forEach(((e,t)=>{e.setAttribute("aria-selected","false"),e.setAttribute("tabindex","-1"),r[t]&&(r[t].hidden=!0)})),e.setAttribute("aria-selected","true"),e.setAttribute("tabindex","0");const t=document.getElementById(e.getAttribute("aria-controls"));t&&(t.hidden=!1)};t.addEventListener("click",(e=>{const t=e.target.closest('[role="tab"]');t&&n(t)})),t.addEventListener("keydown",(e=>{const t=e.target;if(!a.includes(t))return;let r;const o=a.indexOf(t);switch(e.key){case"ArrowRight":r=a[(o+1)%a.length];break;case"ArrowLeft":r=a[(o-1+a.length)%a.length];break;case"Home":r=a[0];break;case"End":r=a[a.length-1];break;default:return}e.preventDefault(),n(r),r.focus()})),e.dataset.tabsInitialized=!0};document.querySelectorAll(".tabs:not([data-tabs-initialized])").forEach(e);new MutationObserver((t=>{t.forEach((t=>{t.addedNodes.forEach((t=>{t.nodeType===Node.ELEMENT_NODE&&(t.matches(".tabs:not([data-tabs-initialized])")&&e(t),t.querySelectorAll(".tabs:not([data-tabs-initialized])").forEach(e))}))}))})).observe(document.body,{childList:!0,subtree:!0})})();