@auvyx/ui 0.0.0-stage → 0.1.0

package/dist/auvyx.js

@@ -0,0 +1,3222 @@
+/*! @auvyx/ui v0.1.0 | MIT | based on Basecoat (MIT) */
+(() => {
+  const componentRegistry = {};
+  let observer = null;
+
+  const registerComponent = (name, selectorOrOptions, initFunction) => {
+    const options = typeof selectorOrOptions === 'object'
+      ? selectorOrOptions
+      : { selector: selectorOrOptions, init: initFunction };
+
+    componentRegistry[name] = {
+      selector: options.selector,
+      init: options.init,
+      refresh: options.refresh,
+    };
+  };
+
+  const initComponent = (element, componentName) => {
+    const component = componentRegistry[componentName];
+    if (!component) return;
+
+    try {
+      component.init(element);
+      if (element.hasAttribute(`data-${componentName}-initialized`)) {
+        element.dataset.basecoatComponent = componentName;
+      }
+    } catch (error) {
+      console.error(`Failed to initialize ${componentName}:`, error);
+      if (typeof element._destroy === 'function') {
+        try {
+          element._destroy();
+        } catch (destroyError) {
+          console.error(`Failed to clean up ${componentName} after initialization error:`, destroyError);
+        }
+      }
+      delete element._destroy;
+      element.removeAttribute(`data-${componentName}-initialized`);
+      delete element.dataset.basecoatComponent;
+    }
+  };
+
+  const destroyComponent = (element) => {
+    if (!element || element.nodeType !== Node.ELEMENT_NODE) return;
+    const componentName = element.dataset?.basecoatComponent;
+
+    if (typeof element._destroy === 'function') {
+      try {
+        element._destroy();
+      } catch (error) {
+        console.error('Failed to destroy Basecoat component:', error);
+      }
+    }
+
+    delete element._destroy;
+    if (componentName) element.removeAttribute(`data-${componentName}-initialized`);
+    delete element.dataset.basecoatComponent;
+  };
+
+  const destroyRemovedComponents = (node) => {
+    if (node.nodeType !== Node.ELEMENT_NODE) return;
+    if (node.isConnected) return;
+
+    if (node.dataset?.basecoatComponent) destroyComponent(node);
+    node.querySelectorAll('[data-basecoat-component]').forEach(destroyComponent);
+  };
+
+  const uniqueElements = (elements) => Array.from(new Set(elements));
+
+  const getComponentElements = (componentName, selector, force = false) => {
+    const elements = Array.from(document.querySelectorAll(selector));
+    if (force) {
+      elements.push(...document.querySelectorAll(`[data-basecoat-component="${componentName}"]`));
+    }
+    return uniqueElements(elements);
+  };
+
+  const initAllComponents = (options = {}) => {
+    const force = options.force === true;
+    Object.entries(componentRegistry).forEach(([name, { selector }]) => {
+      getComponentElements(name, selector, force).forEach((element) => {
+        const wasComponent = element.dataset?.basecoatComponent === name;
+        if (force) destroyComponent(element);
+        if (wasComponent || element.matches(selector)) initComponent(element, name);
+      });
+    });
+  };
+
+  const initNewComponents = (node) => {
+    if (node.nodeType !== Node.ELEMENT_NODE) return;
+
+    Object.entries(componentRegistry).forEach(([name, { selector }]) => {
+      if (node.matches(selector)) initComponent(node, name);
+      node.querySelectorAll(selector).forEach(element => initComponent(element, name));
+    });
+  };
+
+  const refreshComponent = (element) => {
+    if (!element) return;
+    if (typeof element.refresh === 'function') {
+      element.refresh();
+      return;
+    }
+
+    const componentName = element.dataset?.basecoatComponent;
+    const component = componentName ? componentRegistry[componentName] : null;
+    if (component?.refresh) {
+      component.refresh(element);
+    }
+  };
+
+  const startObserver = () => {
+    if (observer) return;
+
+    observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach(initNewComponents);
+        mutation.removedNodes.forEach(destroyRemovedComponents);
+      });
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
+  };
+
+  const stopObserver = () => {
+    if (!observer) return;
+    observer.disconnect();
+    observer = null;
+  };
+
+  const initRegisteredComponent = (componentName, options = {}) => {
+    const component = componentRegistry[componentName];
+    if (!component) {
+      console.warn(`Component '${componentName}' not found in registry`);
+      return;
+    }
+
+    const force = options.force === true;
+    getComponentElements(componentName, component.selector, force).forEach((element) => {
+      const wasComponent = element.dataset?.basecoatComponent === componentName;
+      if (force) destroyComponent(element);
+      if (wasComponent || element.matches(component.selector)) initComponent(element, componentName);
+    });
+  };
+
+  const initAllRegisteredComponents = (options = {}) => {
+    initAllComponents(options);
+  };
+
+  const setTheme = (mode) => {
+    const dark = mode === 'dark';
+    document.documentElement.classList.toggle('dark', dark);
+    try { localStorage.setItem('themeMode', dark ? 'dark' : 'light'); } catch (_) {}
+    document.dispatchEvent(new CustomEvent('basecoat:themechange', { detail: { mode: dark ? 'dark' : 'light' } }));
+  };
+
+  const getTheme = () => document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+
+  window.basecoat = {
+    register: registerComponent,
+    init: initRegisteredComponent,
+    initAll: initAllRegisteredComponents,
+    refresh: refreshComponent,
+    start: startObserver,
+    stop: stopObserver,
+    theme: {
+      get: getTheme,
+      set: setTheme,
+      toggle: () => setTheme(getTheme() === 'dark' ? 'light' : 'dark'),
+    },
+  };
+
+  document.addEventListener('DOMContentLoaded', () => {
+    initAllComponents();
+    startObserver();
+  });
+})();
+
+(() => {
+  const states = new WeakMap();
+
+  const isDisabled = (details) => {
+    const summary = details.querySelector(':scope > summary');
+    return details.getAttribute('aria-disabled') === 'true'
+      || details.dataset.disabled === 'true'
+      || summary?.getAttribute('aria-disabled') === 'true';
+  };
+
+  const isMultiple = (root) => root.hasAttribute('data-multiple');
+
+  const closeSiblings = (root, activeDetails) => {
+    if (isMultiple(root) || !activeDetails.open) return;
+    root.querySelectorAll(':scope > details[open]').forEach((details) => {
+      if (details !== activeDetails) details.open = false;
+    });
+  };
+
+  const initAccordion = (root) => {
+    if (root.dataset.accordionInitialized) return;
+
+    const handleClick = (event) => {
+      const summary = event.target.closest('summary');
+      const details = summary?.closest('details');
+      if (!details || details.parentElement !== root || !isDisabled(details)) return;
+      event.preventDefault();
+    };
+
+    const handleKeydown = (event) => {
+      if (event.key !== 'Enter' && event.key !== ' ') return;
+      const summary = event.target.closest('summary');
+      const details = summary?.closest('details');
+      if (!details || details.parentElement !== root || !isDisabled(details)) return;
+      event.preventDefault();
+    };
+
+    const handleToggle = (event) => {
+      const details = event.target;
+      if (details.parentElement !== root) return;
+      if (isDisabled(details)) {
+        details.open = false;
+        return;
+      }
+      closeSiblings(root, details);
+    };
+
+    root.addEventListener('click', handleClick);
+    root.addEventListener('keydown', handleKeydown);
+    root.addEventListener('toggle', handleToggle, true);
+    root.querySelectorAll(':scope > details[open]').forEach((details) => closeSiblings(root, details));
+
+    states.set(root, { handleClick, handleToggle });
+    root._destroy = () => {
+      root.removeEventListener('click', handleClick);
+      root.removeEventListener('keydown', handleKeydown);
+      root.removeEventListener('toggle', handleToggle, true);
+      states.delete(root);
+    };
+
+    root.dataset.accordionInitialized = 'true';
+    root.dispatchEvent(new CustomEvent('basecoat:initialized'));
+  };
+
+  if (window.basecoat) {
+    window.basecoat.register('accordion', '.accordion:not([data-accordion-initialized])', initAccordion);
+  }
+})();
+
+(() => {
+  const states = new WeakMap();
+
+  const getElements = (root) => {
+    const popover = root.querySelector(':scope > [data-popover]');
+    const input = root.querySelector(':scope > input[role="combobox"], :scope > .input-group input[role="combobox"], :scope > .combobox-chips input[role="combobox"]')
+      || popover?.querySelector('input[role="combobox"]');
+    const chips = root.querySelector(':scope > .combobox-chips');
+    const popupTrigger = root.querySelector(':scope > button[aria-haspopup="listbox"]');
+    const trigger = popupTrigger || root.querySelector(':scope > .input-group button[aria-haspopup="listbox"]');
+    const clearButton = root.querySelector('[data-clear]');
+    const valueTarget = popupTrigger?.querySelector('[data-value]') || (popupTrigger?.matches('[data-value]') ? popupTrigger : null);
+    const listbox = popover ? popover.querySelector('[role="listbox"]') : null;
+    const hiddenInput = root.querySelector(':scope > input[type="hidden"]');
+    return { input, chips, trigger, clearButton, valueTarget, popover, listbox, hiddenInput };
+  };
+
+  const ensureMultipleInputSurface = (root, elements) => {
+    if (elements.listbox?.getAttribute('aria-multiselectable') !== 'true' || elements.chips || !elements.input) return elements;
+    if (elements.input.parentElement !== root) return elements;
+
+    const chips = document.createElement('div');
+    chips.className = 'combobox-chips';
+    root.insertBefore(chips, elements.input);
+    chips.appendChild(elements.input);
+
+    return getElements(root);
+  };
+
+  const getValue = option => option.dataset.value ?? option.textContent.trim();
+  const getLabel = option => option.dataset.label || option.textContent.trim();
+  const getFormat = root => root.dataset.format === 'object' ? 'object' : 'value';
+  const isDisabled = option => option.getAttribute('aria-disabled') === 'true';
+  const toSelected = option => ({ value: getValue(option), label: getLabel(option) });
+  const normalizeEntry = entry => {
+    if (entry && typeof entry === 'object') {
+      const value = entry.value == null ? '' : String(entry.value);
+      return value ? { value, label: String(entry.label ?? entry.value) } : null;
+    }
+    const value = entry == null ? '' : String(entry);
+    return value ? { value, label: value } : null;
+  };
+
+  const getOptions = (listbox) => {
+    const allOptions = Array.from(listbox.querySelectorAll('[role="option"]'));
+    return {
+      allOptions,
+      options: allOptions.filter(option => !isDisabled(option)),
+    };
+  };
+
+  const getSelection = (state) => Array.from(state.selected.values());
+  const getCanonicalValue = (state) => state.isMultiple ? getSelection(state).map(item => item.value) : (getSelection(state)[0]?.value || '');
+  const getSelectedDetail = (state) => state.isMultiple ? getSelection(state) : (getSelection(state)[0] || null);
+
+  const serializeSelection = (state) => {
+    const selected = getSelection(state);
+    if (state.format === 'object') {
+      return JSON.stringify(state.isMultiple ? selected : (selected[0] || null));
+    }
+    const value = selected.map(item => item.value);
+    return state.isMultiple ? JSON.stringify(value) : (value[0] || '');
+  };
+
+  const parseStoredSelection = (storedValue, inputValue, state) => {
+    if (state.isMultiple) {
+      let parsed = [];
+      try {
+        parsed = JSON.parse(storedValue || '[]');
+      } catch (_) {
+        parsed = [];
+      }
+      if (!Array.isArray(parsed)) return [];
+      return parsed.map(item => {
+        const entry = normalizeEntry(state.format === 'object' ? item : { value: item, label: state.selected.get(String(item))?.label ?? item });
+        if (!entry) return null;
+        const option = state.options.find(opt => getValue(opt) === entry.value);
+        return option ? toSelected(option) : entry;
+      }).filter(Boolean);
+    }
+
+    if (state.format === 'object') {
+      try {
+        const entry = normalizeEntry(JSON.parse(storedValue || 'null'));
+        if (!entry) return [];
+        const option = state.options.find(opt => getValue(opt) === entry.value);
+        return [option ? toSelected(option) : entry];
+      } catch (_) {
+        return [];
+      }
+    }
+
+    const value = storedValue || '';
+    if (!value) return [];
+    const option = state.options.find(opt => getValue(opt) === value);
+    return [option ? toSelected(option) : { value, label: state.selected.get(value)?.label || inputValue || value }];
+  };
+
+  const scrollOptionIntoListbox = (state, option) => {
+    const optionRect = option.getBoundingClientRect();
+    const listboxRect = state.listbox.getBoundingClientRect();
+
+    if (optionRect.top < listboxRect.top) {
+      state.listbox.scrollTop -= listboxRect.top - optionRect.top;
+    } else if (optionRect.bottom > listboxRect.bottom) {
+      state.listbox.scrollTop += optionRect.bottom - listboxRect.bottom;
+    }
+  };
+
+  const setActiveOption = (state, index) => {
+    if (state.activeIndex > -1 && state.options[state.activeIndex]) {
+      state.options[state.activeIndex].classList.remove('active');
+    }
+
+    state.activeIndex = index;
+
+    if (state.activeIndex > -1) {
+      const activeOption = state.options[state.activeIndex];
+      activeOption.classList.add('active');
+      if (!activeOption.id) activeOption.id = `${state.listbox.id || state.root.id || 'combobox'}-option-${state.activeIndex}`;
+      state.input.setAttribute('aria-activedescendant', activeOption.id);
+    } else {
+      state.input.removeAttribute('aria-activedescendant');
+    }
+  };
+
+  const syncEmptyState = (state) => {
+    state.popover.dataset.empty = String(state.visibleOptions.length === 0);
+  };
+
+  const filterOptions = (state, { preserveActive = false, search: forcedSearch } = {}) => {
+    const previousActive = state.activeIndex > -1 ? state.options[state.activeIndex] : null;
+    state.visibleOptions = [];
+
+    if (state.manualFilter) {
+      state.visibleOptions = state.options.filter(option => option.getAttribute('aria-hidden') !== 'true');
+
+      if (preserveActive && previousActive && state.visibleOptions.includes(previousActive)) {
+        setActiveOption(state, state.options.indexOf(previousActive));
+      } else {
+        setActiveOption(state, state.autoHighlight && state.visibleOptions.length > 0 ? state.options.indexOf(state.visibleOptions[0]) : -1);
+      }
+      syncEmptyState(state);
+      return;
+    }
+
+    const search = (forcedSearch ?? state.input.value).trim().toLowerCase();
+
+    state.allOptions.forEach(option => {
+      if (option.hasAttribute('data-force')) {
+        option.setAttribute('aria-hidden', 'false');
+        if (state.options.includes(option)) state.visibleOptions.push(option);
+        return;
+      }
+
+      const optionText = (option.dataset.filter || option.dataset.label || option.textContent).trim().toLowerCase();
+      const keywords = (option.dataset.keywords || '').toLowerCase().split(/[\s,]+/).filter(Boolean);
+      const matches = !search || optionText.includes(search) || keywords.some(keyword => keyword.includes(search));
+      option.setAttribute('aria-hidden', String(!matches));
+      if (matches && state.options.includes(option)) state.visibleOptions.push(option);
+    });
+
+    if (preserveActive && previousActive && state.visibleOptions.includes(previousActive)) {
+      setActiveOption(state, state.options.indexOf(previousActive));
+    } else {
+      setActiveOption(state, state.autoHighlight && state.visibleOptions.length > 0 ? state.options.indexOf(state.visibleOptions[0]) : -1);
+    }
+    syncEmptyState(state);
+  };
+
+  const renderChips = (root) => {
+    const state = states.get(root);
+    if (!state.chips) return;
+
+    state.chips.querySelectorAll('.combobox-chip').forEach(chip => chip.remove());
+
+    getSelection(state).forEach(entry => {
+      const chip = document.createElement('span');
+      chip.className = 'combobox-chip';
+      chip.dataset.value = entry.value;
+
+      const label = document.createElement('span');
+      label.textContent = entry.label;
+
+      const remove = document.createElement('button');
+      remove.type = 'button';
+      remove.className = 'combobox-chip-remove btn';
+      remove.dataset.variant = 'ghost';
+      remove.dataset.size = 'icon-xs';
+      remove.setAttribute('aria-label', `Remove ${entry.label}`);
+      remove.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>';
+      remove.addEventListener('click', (event) => {
+        event.stopPropagation();
+        root.deselect(entry.value);
+        state.input.focus();
+      });
+
+      chip.appendChild(label);
+      chip.appendChild(remove);
+      state.chips.insertBefore(chip, state.input);
+    });
+  };
+
+  const syncTriggerValue = (state) => {
+    if (!state.valueTarget) return;
+    const selected = getSelection(state);
+    state.valueTarget.textContent = state.isMultiple
+      ? selected.map(entry => entry.label).join(', ')
+      : (selected[0]?.label || state.valueTarget.dataset.placeholder || '');
+  };
+
+  const syncClearButton = (state) => {
+    if (!state.clearButton) return;
+    state.clearButton.hidden = getSelection(state).length === 0 && state.input.value === '';
+  };
+
+  const syncSelectedOptions = (state) => {
+    state.options.forEach(option => {
+      if (state.selected.has(getValue(option))) {
+        option.setAttribute('aria-selected', 'true');
+      } else {
+        option.removeAttribute('aria-selected');
+      }
+    });
+  };
+
+  const setSelected = (root, entries, triggerEvent = true) => {
+    const state = states.get(root);
+    const normalized = (Array.isArray(entries) ? entries : [entries]).map(normalizeEntry).filter(Boolean);
+
+    state.selected.clear();
+    if (state.isMultiple) {
+      normalized.forEach(entry => state.selected.set(entry.value, entry));
+      state.input.value = '';
+    } else if (normalized[0]) {
+      state.selected.set(normalized[0].value, normalized[0]);
+      state.input.value = state.valueTarget ? '' : normalized[0].label;
+    } else {
+      state.input.value = '';
+    }
+
+    state.hiddenInput.value = serializeSelection(state);
+    syncSelectedOptions(state);
+    if (state.isMultiple) {
+      renderChips(root);
+      filterOptions(state, { preserveActive: true });
+    }
+    syncTriggerValue(state);
+    syncClearButton(state);
+
+    if (triggerEvent) {
+      root.dispatchEvent(new CustomEvent('change', {
+        detail: { value: getCanonicalValue(state), selected: getSelectedDetail(state) },
+        bubbles: true,
+      }));
+    }
+  };
+
+  const closePopover = (state, focusInput = false) => {
+    if (state.popover.getAttribute('aria-hidden') === 'true') return;
+    state.popover.setAttribute('aria-hidden', 'true');
+    state.input.setAttribute('aria-expanded', 'false');
+    state.trigger?.setAttribute('aria-expanded', 'false');
+    setActiveOption(state, -1);
+    if (focusInput) {
+      state.skipOpenOnFocus = true;
+      state.input.focus();
+      requestAnimationFrame(() => { state.skipOpenOnFocus = false; });
+    }
+  };
+
+  const openPopover = (state) => {
+    const { root } = state;
+    if (state.popover.getAttribute('aria-hidden') === 'false') return;
+    document.dispatchEvent(new CustomEvent('basecoat:popover', { detail: { source: root } }));
+    root.refresh();
+    const selected = getSelection(state)[0];
+    if (state.valueTarget) state.input.value = '';
+    const search = !state.isMultiple && selected && state.input.value === selected.label ? '' : undefined;
+    filterOptions(state, { search });
+    state.popover.setAttribute('aria-hidden', 'false');
+    state.input.setAttribute('aria-expanded', 'true');
+    state.trigger?.setAttribute('aria-expanded', 'true');
+    if (state.trigger) state.input.focus();
+  };
+
+  const refreshCombobox = (root) => {
+    const state = states.get(root);
+    if (!state) return;
+
+    let elements = getElements(root);
+    if (!elements.input || !elements.popover || !elements.listbox || !elements.hiddenInput) {
+      const missing = [];
+      if (!elements.input) missing.push('input');
+      if (!elements.popover) missing.push('popover');
+      if (!elements.listbox) missing.push('listbox');
+      if (!elements.hiddenInput) missing.push('hidden input');
+      console.error(`Combobox refresh failed. Missing element(s): ${missing.join(', ')}`, root);
+      return;
+    }
+
+    elements = ensureMultipleInputSurface(root, elements);
+    const previousValue = elements.hiddenInput.value;
+    const previousInputValue = elements.input.value;
+    Object.assign(state, elements, getOptions(elements.listbox));
+    state.isMultiple = state.listbox.getAttribute('aria-multiselectable') === 'true';
+    state.closeOnSelect = root.dataset.closeOnSelect === 'true';
+    state.autoHighlight = root.dataset.autoHighlight === 'true';
+    state.manualFilter = root.dataset.filter === 'manual';
+    state.format = getFormat(root);
+
+    const stored = parseStoredSelection(previousValue, previousInputValue, state);
+    if (stored.length > 0) {
+      setSelected(root, stored, false);
+    } else {
+      const selectedOptions = state.options.filter(option => option.getAttribute('aria-selected') === 'true').map(toSelected);
+      if (selectedOptions.length > 0) {
+        setSelected(root, state.isMultiple ? selectedOptions : selectedOptions[0], false);
+      } else if (state.isMultiple) {
+        setSelected(root, [], false);
+      } else {
+        state.input.value = previousInputValue;
+        state.selected.clear();
+        state.hiddenInput.value = '';
+        syncSelectedOptions(state);
+        filterOptions(state, { preserveActive: true });
+      }
+    }
+    syncTriggerValue(state);
+    syncClearButton(state);
+  };
+
+  const resolveEntry = (state, value) => {
+    if (value && typeof value === 'object') {
+      const entry = normalizeEntry(value);
+      if (!entry) return null;
+      const option = state.options.find(opt => getValue(opt) === entry.value);
+      return option ? toSelected(option) : entry;
+    }
+
+    const option = state.options.find(opt => getValue(opt) === value);
+    if (option) return toSelected(option);
+    const existing = state.selected.get(String(value));
+    return existing || null;
+  };
+
+  const selectValue = (root, value) => {
+    const state = states.get(root);
+    const entry = resolveEntry(state, value);
+    if (!entry) return;
+
+    if (state.isMultiple) {
+      setSelected(root, [...getSelection(state).filter(item => item.value !== entry.value), entry]);
+      if (state.closeOnSelect) root.close(true);
+    } else {
+      setSelected(root, entry);
+      root.close(state.trigger ? false : true);
+      state.trigger?.focus();
+    }
+  };
+
+  const deselectValue = (root, value) => {
+    const state = states.get(root);
+    if (!state.isMultiple) return;
+    const normalized = String(value);
+    if (!state.selected.has(normalized)) return;
+    setSelected(root, getSelection(state).filter(item => item.value !== normalized));
+  };
+
+  const clearValue = (root) => {
+    const state = states.get(root);
+    setSelected(root, [], true);
+    state.input.value = '';
+    filterOptions(state);
+    syncClearButton(state);
+    if (state.popover.getAttribute('aria-hidden') === 'false') state.input.focus();
+  };
+
+  const handleKeydown = (event, root) => {
+    const state = states.get(root);
+    if (!['ArrowDown', 'ArrowUp', 'Enter', 'Home', 'End', 'Escape', 'Backspace'].includes(event.key)) return;
+
+    const isOpen = state.popover.getAttribute('aria-hidden') === 'false';
+
+    if (event.key === 'Backspace' && state.isMultiple && state.input.value === '') {
+      const selected = getSelection(state);
+      const last = selected[selected.length - 1];
+      if (last) root.deselect(last.value);
+      return;
+    }
+
+    if (event.key === 'Escape') {
+      if (isOpen) {
+        event.preventDefault();
+        event.stopPropagation();
+        root.close(true);
+      }
+      return;
+    }
+
+    if (!isOpen && ['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+      event.preventDefault();
+      openPopover(state);
+    }
+
+    if (state.popover.getAttribute('aria-hidden') === 'true') return;
+
+    if (event.key === 'Enter') {
+      if (state.activeIndex > -1) {
+        event.preventDefault();
+        const option = state.options[state.activeIndex];
+        state.isMultiple ? root.toggle(getValue(option)) : root.select(getValue(option));
+      }
+      return;
+    }
+
+    if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key) || state.visibleOptions.length === 0) return;
+    event.preventDefault();
+
+    const currentVisibleIndex = state.activeIndex > -1 ? state.visibleOptions.indexOf(state.options[state.activeIndex]) : -1;
+    let nextVisibleIndex = currentVisibleIndex;
+
+    if (event.key === 'ArrowDown') nextVisibleIndex = Math.min(currentVisibleIndex + 1, state.visibleOptions.length - 1);
+    if (event.key === 'ArrowUp') nextVisibleIndex = currentVisibleIndex <= 0 ? 0 : currentVisibleIndex - 1;
+    if (event.key === 'Home') nextVisibleIndex = 0;
+    if (event.key === 'End') nextVisibleIndex = state.visibleOptions.length - 1;
+
+    const nextOption = state.visibleOptions[nextVisibleIndex];
+    setActiveOption(state, state.options.indexOf(nextOption));
+    scrollOptionIntoListbox(state, nextOption);
+  };
+
+  const initCombobox = (root) => {
+    if (root.dataset.comboboxInitialized) return;
+
+    const state = { root, activeIndex: -1, allOptions: [], options: [], visibleOptions: [], selected: new Map(), format: 'value', manualFilter: false, skipOpenOnFocus: false };
+    states.set(root, state);
+    root.refresh = () => refreshCombobox(root);
+
+    refreshCombobox(root);
+    if (!state.input || !state.popover || !state.listbox || !state.hiddenInput) {
+      states.delete(root);
+      delete root.refresh;
+      return;
+    }
+
+    root.close = (focusInput = false) => closePopover(state, focusInput);
+
+    root.select = (value) => selectValue(root, value);
+    root.selectByValue = root.select;
+    root.setValue = (value) => {
+      const entries = state.isMultiple ? (Array.isArray(value) ? value : (value == null ? [] : [value])) : [value];
+      const resolved = entries.map(entry => resolveEntry(state, entry) || normalizeEntry(entry)).filter(Boolean);
+      setSelected(root, state.isMultiple ? resolved : resolved[0]);
+    };
+    if (state.isMultiple) {
+      root.deselect = (value) => deselectValue(root, value);
+      root.toggle = (value) => {
+        const entry = resolveEntry(state, value);
+        if (!entry) return;
+        state.selected.has(entry.value) ? root.deselect(entry.value) : root.select(entry);
+      };
+      root.selectAll = () => setSelected(root, state.options.map(toSelected));
+      root.selectNone = () => setSelected(root, []);
+    }
+
+    const handleInputFocus = () => {
+      if (state.skipOpenOnFocus) return;
+      openPopover(state);
+    };
+    const handleInputClick = () => openPopover(state);
+    const handleInput = () => {
+      openPopover(state);
+      filterOptions(state);
+      if (!state.isMultiple) {
+        state.hiddenInput.value = '';
+        state.selected.clear();
+        syncSelectedOptions(state);
+        syncTriggerValue(state);
+        syncClearButton(state);
+      }
+    };
+    const handleTriggerClick = () => {
+      if (state.popover.getAttribute('aria-hidden') === 'false') {
+        root.close(false);
+      } else {
+        openPopover(state);
+      }
+    };
+    const handleClearClick = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      clearValue(root);
+    };
+    const handleInputKeydown = (event) => handleKeydown(event, root);
+    const handleListboxMousemove = (event) => {
+      const option = event.target.closest('[role="option"]');
+      if (option && state.visibleOptions.includes(option)) setActiveOption(state, state.options.indexOf(option));
+    };
+    const handleListboxClick = (event) => {
+      const option = event.target.closest('[role="option"]');
+      if (!option || !state.options.includes(option)) return;
+      state.isMultiple ? root.toggle(getValue(option)) : root.select(getValue(option));
+      if (state.isMultiple && !state.closeOnSelect) state.input.focus();
+    };
+    const handleDocumentClick = (event) => {
+      if (!root.contains(event.target)) root.close(false);
+    };
+    const handleDocumentPopover = (event) => {
+      if (!root.contains(event.detail.source)) root.close(false);
+    };
+
+    state.input.addEventListener('focus', handleInputFocus);
+    state.input.addEventListener('click', handleInputClick);
+    state.input.addEventListener('input', handleInput);
+    state.input.addEventListener('keydown', handleInputKeydown);
+    state.trigger?.addEventListener('click', handleTriggerClick);
+    state.clearButton?.addEventListener('click', handleClearClick);
+    state.listbox.addEventListener('mousemove', handleListboxMousemove);
+    state.listbox.addEventListener('click', handleListboxClick);
+    document.addEventListener('click', handleDocumentClick);
+    document.addEventListener('basecoat:popover', handleDocumentPopover);
+
+    root._destroy = () => {
+      state.input.removeEventListener('focus', handleInputFocus);
+      state.input.removeEventListener('click', handleInputClick);
+      state.input.removeEventListener('input', handleInput);
+      state.input.removeEventListener('keydown', handleInputKeydown);
+      state.trigger?.removeEventListener('click', handleTriggerClick);
+      state.clearButton?.removeEventListener('click', handleClearClick);
+      state.listbox.removeEventListener('mousemove', handleListboxMousemove);
+      state.listbox.removeEventListener('click', handleListboxClick);
+      document.removeEventListener('click', handleDocumentClick);
+      document.removeEventListener('basecoat:popover', handleDocumentPopover);
+      state.chips?.querySelectorAll('.combobox-chip').forEach(chip => chip.remove());
+      states.delete(root);
+      delete root.refresh;
+      delete root.close;
+      delete root.select;
+      delete root.selectByValue;
+      delete root.setValue;
+      delete root.clear;
+      delete root.deselect;
+      delete root.toggle;
+      delete root.selectAll;
+      delete root.selectNone;
+    };
+
+    state.popover.setAttribute('aria-hidden', 'true');
+    state.input.setAttribute('aria-expanded', 'false');
+    state.trigger?.setAttribute('aria-expanded', 'false');
+    root.clear = () => clearValue(root);
+
+    Object.defineProperty(root, 'value', {
+      configurable: true,
+      get: () => getCanonicalValue(state),
+      set: (value) => root.setValue(value),
+    });
+
+    Object.defineProperty(root, 'selected', {
+      configurable: true,
+      get: () => getSelectedDetail(state),
+    });
+
+    root.dataset.comboboxInitialized = 'true';
+    root.dispatchEvent(new CustomEvent('basecoat:initialized'));
+  };
+
+  if (window.basecoat) {
+    window.basecoat.register('combobox', {
+      selector: '.combobox:not([data-combobox-initialized])',
+      init: initCombobox,
+      refresh: refreshCombobox,
+    });
+  }
+})();
+
+(() => {
+  const states = new WeakMap();
+
+  const isDisabled = (item) =>
+    item.hasAttribute('disabled') ||
+    item.getAttribute('aria-disabled') === 'true' ||
+    item.getAttribute('data-disabled') === 'true';
+
+  const getElements = (container) => ({
+    input: container.querySelector('header input'),
+    menu: container.querySelector('[role="menu"]'),
+  });
+
+  const getItems = (menu) => {
+    const allItems = Array.from(menu.querySelectorAll('[role="menuitem"]'));
+    return {
+      allItems,
+      items: allItems.filter(item => !isDisabled(item)),
+    };
+  };
+
+  const scrollItemIntoMenu = (state, item) => {
+    const itemRect = item.getBoundingClientRect();
+    const menuRect = state.menu.getBoundingClientRect();
+
+    if (itemRect.top < menuRect.top) {
+      state.menu.scrollTop -= menuRect.top - itemRect.top;
+    } else if (itemRect.bottom > menuRect.bottom) {
+      state.menu.scrollTop += itemRect.bottom - menuRect.bottom;
+    }
+  };
+
+  const setActiveItem = (state, index) => {
+    if (state.activeIndex > -1 && state.items[state.activeIndex]) {
+      state.items[state.activeIndex].classList.remove('active');
+    }
+
+    state.activeIndex = index;
+
+    if (state.activeIndex > -1) {
+      const activeItem = state.items[state.activeIndex];
+      activeItem.classList.add('active');
+      if (activeItem.id) {
+        state.input.setAttribute('aria-activedescendant', activeItem.id);
+      } else {
+        state.input.removeAttribute('aria-activedescendant');
+      }
+    } else {
+      state.input.removeAttribute('aria-activedescendant');
+    }
+  };
+
+  const filterItems = (state) => {
+    if (state.manualFilter) {
+      setActiveItem(state, -1);
+      state.visibleItems = state.items.filter(item => item.getAttribute('aria-hidden') !== 'true');
+      if (state.visibleItems.length > 0) {
+        setActiveItem(state, state.items.indexOf(state.visibleItems[0]));
+      }
+      return;
+    }
+
+    const searchTerm = state.input.value.trim().toLowerCase();
+
+    setActiveItem(state, -1);
+    state.visibleItems = [];
+
+    state.allItems.forEach(item => {
+      if (item.hasAttribute('data-force')) {
+        item.setAttribute('aria-hidden', 'false');
+        if (state.items.includes(item)) state.visibleItems.push(item);
+        return;
+      }
+
+      const itemText = (item.dataset.filter || item.textContent).trim().toLowerCase();
+      const keywordList = (item.dataset.keywords || '')
+        .toLowerCase()
+        .split(/[\s,]+/)
+        .filter(Boolean);
+      const matchesKeyword = keywordList.some(keyword => keyword.includes(searchTerm));
+      const matches = itemText.includes(searchTerm) || matchesKeyword;
+      item.setAttribute('aria-hidden', String(!matches));
+      if (matches && state.items.includes(item)) state.visibleItems.push(item);
+    });
+
+    if (state.visibleItems.length > 0) {
+      setActiveItem(state, state.items.indexOf(state.visibleItems[0]));
+      scrollItemIntoMenu(state, state.visibleItems[0]);
+    }
+  };
+
+  const refreshCommand = (container) => {
+    const state = states.get(container);
+    if (!state) return;
+
+    const elements = getElements(container);
+    if (!elements.input || !elements.menu) {
+      const missing = [];
+      if (!elements.input) missing.push('input');
+      if (!elements.menu) missing.push('menu');
+      console.error(`Command component refresh failed. Missing element(s): ${missing.join(', ')}`, container);
+      return;
+    }
+
+    Object.assign(state, elements, getItems(elements.menu));
+    state.manualFilter = container.dataset.filter === 'manual';
+    filterItems(state);
+  };
+
+  const handleKeyNavigation = (event, state) => {
+    if (!['ArrowDown', 'ArrowUp', 'Enter', 'Home', 'End'].includes(event.key)) return;
+
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      if (state.activeIndex > -1) state.items[state.activeIndex]?.click();
+      return;
+    }
+
+    if (state.visibleItems.length === 0) return;
+
+    event.preventDefault();
+
+    const currentVisibleIndex = state.activeIndex > -1 ? state.visibleItems.indexOf(state.items[state.activeIndex]) : -1;
+    let nextVisibleIndex = currentVisibleIndex;
+
+    if (event.key === 'ArrowDown' && currentVisibleIndex < state.visibleItems.length - 1) nextVisibleIndex = currentVisibleIndex + 1;
+    if (event.key === 'ArrowUp') nextVisibleIndex = currentVisibleIndex > 0 ? currentVisibleIndex - 1 : 0;
+    if (event.key === 'Home') nextVisibleIndex = 0;
+    if (event.key === 'End') nextVisibleIndex = state.visibleItems.length - 1;
+
+    if (nextVisibleIndex !== currentVisibleIndex) {
+      const newActiveItem = state.visibleItems[nextVisibleIndex];
+      setActiveItem(state, state.items.indexOf(newActiveItem));
+      scrollItemIntoMenu(state, newActiveItem);
+    }
+  };
+
+  const initCommand = (container) => {
+    if (container.dataset.commandInitialized) return;
+
+    const state = { activeIndex: -1, allItems: [], items: [], visibleItems: [], manualFilter: false };
+    states.set(container, state);
+
+    container.refresh = () => refreshCommand(container);
+
+    const elements = getElements(container);
+    if (!elements.input || !elements.menu) {
+      const missing = [];
+      if (!elements.input) missing.push('input');
+      if (!elements.menu) missing.push('menu');
+      console.error(`Command component initialization failed. Missing element(s): ${missing.join(', ')}`, container);
+      states.delete(container);
+      delete container.refresh;
+      return;
+    }
+    Object.assign(state, elements);
+
+    const handleInput = () => filterItems(state);
+    const handleInputKeydown = (event) => handleKeyNavigation(event, state);
+    const handleMenuMousemove = (event) => {
+      const menuItem = event.target.closest('[role="menuitem"]');
+      if (menuItem && state.visibleItems.includes(menuItem)) {
+        const index = state.items.indexOf(menuItem);
+        if (index !== state.activeIndex) setActiveItem(state, index);
+      }
+    };
+    const handleMenuClick = (event) => {
+      const clickedItem = event.target.closest('[role="menuitem"]');
+      if (clickedItem && state.visibleItems.includes(clickedItem)) {
+        const dialog = container.closest('dialog.command-dialog');
+        if (dialog && !clickedItem.hasAttribute('data-keep-command-open')) dialog.close();
+      }
+    };
+
+    state.input.addEventListener('input', handleInput);
+    state.input.addEventListener('keydown', handleInputKeydown);
+    state.menu.addEventListener('mousemove', handleMenuMousemove);
+    state.menu.addEventListener('click', handleMenuClick);
+
+    container._destroy = () => {
+      state.input.removeEventListener('input', handleInput);
+      state.input.removeEventListener('keydown', handleInputKeydown);
+      state.menu.removeEventListener('mousemove', handleMenuMousemove);
+      state.menu.removeEventListener('click', handleMenuClick);
+      states.delete(container);
+      delete container.refresh;
+    };
+
+    refreshCommand(container);
+    container.dataset.commandInitialized = 'true';
+    container.dispatchEvent(new CustomEvent('basecoat:initialized'));
+  };
+
+  if (window.basecoat) {
+    window.basecoat.register('command', {
+      selector: '.command:not([data-command-initialized])',
+      init: initCommand,
+      refresh: refreshCommand,
+    });
+  }
+})();
+
+// Copy to clipboard (fork addition).
+//
+// Any element with [data-copy] copies text on click:
+//   data-copy=""           → the <pre> of the closest .code-block
+//   data-copy="#selector"  → the textContent of that element
+//   data-copy-text="…"     → this literal text
+// While copied, the button gets [data-copied] for 2s and its aria-label
+// becomes the value of data-copied-label (default "Copied").
+// One delegated listener, so it also works for content added later.
+(() => {
+  if (window.__basecoatCopy) return;
+  window.__basecoatCopy = true;
+
+  const sourceText = (button) => {
+    if (button.hasAttribute('data-copy-text')) return button.getAttribute('data-copy-text');
+    const target = button.getAttribute('data-copy');
+    const el = target ? document.querySelector(target) : button.closest('.code-block')?.querySelector(':scope > pre');
+    return el ? el.textContent : null;
+  };
+
+  const selectFallback = (button) => {
+    const target = button.getAttribute('data-copy');
+    const el = target ? document.querySelector(target) : button.closest('.code-block')?.querySelector(':scope > pre');
+    if (!el) return;
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    const selection = window.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(range);
+  };
+
+  document.addEventListener('click', async (event) => {
+    const button = event.target.closest('[data-copy], [data-copy-text]');
+    if (!button || button.disabled) return;
+    const text = sourceText(button);
+    if (text == null) return;
+
+    try {
+      await navigator.clipboard.writeText(text.replace(/\n$/, ''));
+    } catch {
+      selectFallback(button);
+      return;
+    }
+
+    const label = button.getAttribute('aria-label');
+    if (!button.hasAttribute('data-copied')) button.dataset.copyLabel = label ?? '';
+    button.setAttribute('data-copied', '');
+    button.setAttribute('aria-label', button.getAttribute('data-copied-label') || 'Copied');
+    clearTimeout(button._copyTimer);
+    button._copyTimer = setTimeout(() => {
+      button.removeAttribute('data-copied');
+      if (button.dataset.copyLabel) button.setAttribute('aria-label', button.dataset.copyLabel);
+    }, 2000);
+  });
+})();
+
+(() => {
+  const toMs = (value) => {
+    if (!value) return 0;
+    const trimmed = value.trim();
+    if (trimmed.endsWith('ms')) return parseFloat(trimmed) || 0;
+    if (trimmed.endsWith('s')) return (parseFloat(trimmed) || 0) * 1000;
+    return parseFloat(trimmed) || 0;
+  };
+
+  const maxTransitionMs = (element) => {
+    if (!element) return 0;
+    const styles = getComputedStyle(element);
+    const durations = styles.transitionDuration.split(',').map(toMs);
+    const delays = styles.transitionDelay.split(',').map(toMs);
+    return Math.max(0, ...durations.map((duration, index) => duration + (delays[index] || delays[0] || 0)));
+  };
+
+  const initDrawer = (drawer) => {
+    if (drawer.dataset.drawerInitialized) return;
+
+    const nativeClose = drawer.close.bind(drawer);
+    let pointerStartedOnBackdrop = false;
+    let closeTimer = null;
+
+    const finishClose = (returnValue) => {
+      window.clearTimeout(closeTimer);
+      closeTimer = null;
+      drawer.removeAttribute('data-closing');
+      nativeClose(returnValue);
+    };
+
+    drawer.close = (returnValue = '') => {
+      if (!drawer.open) return;
+      if (drawer.dataset.closing) return;
+
+      const content = drawer.firstElementChild;
+      const duration = maxTransitionMs(content);
+
+      if (duration === 0 || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+        finishClose(returnValue);
+        return;
+      }
+
+      drawer.dataset.closing = 'true';
+      closeTimer = window.setTimeout(() => finishClose(returnValue), duration + 50);
+    };
+
+    const handleCancel = (event) => {
+      event.preventDefault();
+      drawer.close();
+    };
+
+    const handlePointerDown = (event) => {
+      pointerStartedOnBackdrop = event.target === drawer;
+    };
+
+    const handlePointerUp = (event) => {
+      if (pointerStartedOnBackdrop && event.target === drawer) {
+        drawer.close();
+      }
+      pointerStartedOnBackdrop = false;
+    };
+
+    drawer.addEventListener('cancel', handleCancel);
+    drawer.addEventListener('pointerdown', handlePointerDown);
+    drawer.addEventListener('pointerup', handlePointerUp);
+
+    drawer._destroy = () => {
+      window.clearTimeout(closeTimer);
+      drawer.removeEventListener('cancel', handleCancel);
+      drawer.removeEventListener('pointerdown', handlePointerDown);
+      drawer.removeEventListener('pointerup', handlePointerUp);
+      drawer.close = nativeClose;
+      delete drawer._destroy;
+    };
+
+    drawer.dataset.drawerInitialized = 'true';
+    drawer.dispatchEvent(new CustomEvent('basecoat:initialized'));
+  };
+
+  if (window.basecoat) {
+    window.basecoat.register('drawer', '.drawer:not([data-drawer-initialized])', initDrawer);
+  }
+})();
+
+(() => {
+  const states = new WeakMap();
+
+  const isDisabled = (item) =>
+    item.hasAttribute('disabled') || item.getAttribute('aria-disabled') === 'true';
+
+  const getElements = (root) => {
+    const trigger = root.querySelector(':scope > button');
+    const popover = root.querySelector(':scope > [data-popover]');
+    const menu = popover ? popover.querySelector('[role="menu"]') : null;
+    return { trigger, popover, menu };
+  };
+
+  const getItems = (menu) => Array.from(menu.querySelectorAll('[role^="menuitem"]')).filter(item => !isDisabled(item));
+
+  const setActiveItem = (state, index) => {
+    if (state.activeIndex > -1 && state.items[state.activeIndex]) {
+      state.items[state.activeIndex].classList.remove('active');
+    }
+    state.activeIndex = index;
+    if (state.activeIndex > -1 && state.items[state.activeIndex]) {
+      const activeItem = state.items[state.activeIndex];
+      activeItem.classList.add('active');
+      if (activeItem.id) state.trigger.setAttribute('aria-activedescendant', activeItem.id);
+    } else {
+      state.trigger.removeAttribute('aria-activedescendant');
+    }
+  };
+
+  const refreshDropdownMenu = (root) => {
+    const state = states.get(root);
+    if (!state) return;
+
+    const elements = getElements(root);
+    if (!elements.trigger || !elements.popover || !elements.menu) {
+      const missing = [];
+      if (!elements.trigger) missing.push('trigger');
+      if (!elements.popover) missing.push('popover');
+      if (!elements.menu) missing.push('menu');
+      console.error(`Dropdown menu refresh failed. Missing element(s): ${missing.join(', ')}`, root);
+      return;
+    }
+
+    Object.assign(state, elements);
+    state.items = getItems(state.menu);
+    if (state.activeIndex > -1 && !state.items[state.activeIndex]) setActiveItem(state, -1);
+  };
+
+  const closePopover = (state, focusOnTrigger = true) => {
+    if (state.trigger.getAttribute('aria-expanded') === 'false') return;
+    state.trigger.setAttribute('aria-expanded', 'false');
+    state.trigger.removeAttribute('aria-activedescendant');
+    state.popover.setAttribute('aria-hidden', 'true');
+    if (focusOnTrigger) state.trigger.focus();
+    setActiveItem(state, -1);
+  };
+
+  const openPopover = (root, state, initialSelection = false) => {
+    document.dispatchEvent(new CustomEvent('basecoat:popover', { detail: { source: root } }));
+    root.refresh();
+    state.trigger.setAttribute('aria-expanded', 'true');
+    state.popover.setAttribute('aria-hidden', 'false');
+
+    if (state.items.length > 0 && initialSelection) {
+      setActiveItem(state, initialSelection === 'last' ? state.items.length - 1 : 0);
+    }
+  };
+
+  const initDropdownMenu = (root) => {
+    if (root.dataset.dropdownMenuInitialized) return;
+
+    const state = { activeIndex: -1, items: [] };
+    states.set(root, state);
+    root.refresh = () => refreshDropdownMenu(root);
+
+    refreshDropdownMenu(root);
+    if (!state.trigger || !state.popover || !state.menu) {
+      states.delete(root);
+      delete root.refresh;
+      return;
+    }
+
+    root.open = (initialSelection = false) => openPopover(root, state, initialSelection);
+    root.close = (focusOnTrigger = true) => closePopover(state, focusOnTrigger);
+    root.toggle = () => state.trigger.getAttribute('aria-expanded') === 'true' ? root.close() : root.open(false);
+
+    const handleTriggerClick = root.toggle;
+
+    const handleKeydown = (event) => {
+      const isExpanded = state.trigger.getAttribute('aria-expanded') === 'true';
+
+      if (event.key === 'Escape') {
+        if (isExpanded) root.close();
+        return;
+      }
+
+      if (!isExpanded) {
+        if (['Enter', ' '].includes(event.key)) {
+          event.preventDefault();
+          root.open(false);
+        } else if (event.key === 'ArrowDown') {
+          event.preventDefault();
+          root.open('first');
+        } else if (event.key === 'ArrowUp') {
+          event.preventDefault();
+          root.open('last');
+        }
+        return;
+      }
+
+      if (state.items.length === 0) return;
+
+      let nextIndex = state.activeIndex;
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        nextIndex = state.activeIndex === -1 ? 0 : Math.min(state.activeIndex + 1, state.items.length - 1);
+      } else if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        nextIndex = state.activeIndex === -1 ? state.items.length - 1 : Math.max(state.activeIndex - 1, 0);
+      } else if (event.key === 'Home') {
+        event.preventDefault();
+        nextIndex = 0;
+      } else if (event.key === 'End') {
+        event.preventDefault();
+        nextIndex = state.items.length - 1;
+      } else if (['Enter', ' '].includes(event.key)) {
+        event.preventDefault();
+        state.items[state.activeIndex]?.click();
+        root.close();
+        return;
+      } else {
+        return;
+      }
+
+      if (nextIndex !== state.activeIndex) setActiveItem(state, nextIndex);
+    };
+
+    const handleMenuMousemove = (event) => {
+      const menuItem = event.target.closest('[role^="menuitem"]');
+      if (menuItem && !isDisabled(menuItem) && state.items.includes(menuItem)) {
+        const index = state.items.indexOf(menuItem);
+        if (index !== state.activeIndex) setActiveItem(state, index);
+      }
+    };
+
+    const handleMenuMouseleave = () => setActiveItem(state, -1);
+    const handleMenuClick = (event) => {
+      const menuItem = event.target.closest('[role^="menuitem"]');
+      if (!menuItem || isDisabled(menuItem)) return;
+
+      if (menuItem.getAttribute('role') === 'menuitemcheckbox') {
+        menuItem.setAttribute('aria-checked', menuItem.getAttribute('aria-checked') !== 'true');
+      } else if (menuItem.getAttribute('role') === 'menuitemradio') {
+        const group = menuItem.closest('[role="group"], [role="menu"]');
+        group?.querySelectorAll('[role="menuitemradio"]').forEach((item) => {
+          if (!isDisabled(item)) item.setAttribute('aria-checked', item === menuItem ? 'true' : 'false');
+        });
+      }
+
+      root.close();
+    };
+
+    const handleDocumentClick = (event) => {
+      if (!root.contains(event.target)) root.close(false);
+    };
+
+    const handleDocumentPopover = (event) => {
+      if (!root.contains(event.detail.source)) root.close(false);
+    };
+
+    state.trigger.addEventListener('click', handleTriggerClick);
+    root.addEventListener('keydown', handleKeydown);
+    state.menu.addEventListener('mousemove', handleMenuMousemove);
+    state.menu.addEventListener('mouseleave', handleMenuMouseleave);
+    state.menu.addEventListener('click', handleMenuClick);
+    document.addEventListener('click', handleDocumentClick);
+    document.addEventListener('basecoat:popover', handleDocumentPopover);
+
+    root._destroy = () => {
+      state.trigger.removeEventListener('click', handleTriggerClick);
+      root.removeEventListener('keydown', handleKeydown);
+      state.menu.removeEventListener('mousemove', handleMenuMousemove);
+      state.menu.removeEventListener('mouseleave', handleMenuMouseleave);
+      state.menu.removeEventListener('click', handleMenuClick);
+      document.removeEventListener('click', handleDocumentClick);
+      document.removeEventListener('basecoat:popover', handleDocumentPopover);
+      states.delete(root);
+      delete root.refresh;
+      delete root.open;
+      delete root.close;
+      delete root.toggle;
+    };
+
+    state.trigger.setAttribute('aria-expanded', 'false');
+    state.popover.setAttribute('aria-hidden', 'true');
+    root.dataset.dropdownMenuInitialized = 'true';
+    root.dispatchEvent(new CustomEvent('basecoat:initialized'));
+  };
+
+  if (window.basecoat) {
+    window.basecoat.register('dropdown-menu', {
+      selector: '.dropdown-menu:not([data-dropdown-menu-initialized]):not(:has(> [data-popover][popover]))',
+      init: initDropdownMenu,
+      refresh: refreshDropdownMenu,
+    });
+  }
+})();
+
+(() => {
+  const initPopover = (popoverComponent) => {
+    if (popoverComponent.dataset.popoverInitialized) return;
+
+    const trigger = popoverComponent.querySelector(':scope > button');
+    const content = popoverComponent.querySelector(':scope > [data-popover]');
+
+    if (!trigger || !content) {
+      const missing = [];
+      if (!trigger) missing.push('trigger');
+      if (!content) missing.push('content');
+      console.error(`Popover initialisation failed. Missing element(s): ${missing.join(', ')}`, popoverComponent);
+      return;
+    }
+
+    const closePopover = (focusOnTrigger = true) => {
+      if (trigger.getAttribute('aria-expanded') === 'false') return;
+      trigger.setAttribute('aria-expanded', 'false');
+      content.setAttribute('aria-hidden', 'true');
+      if (focusOnTrigger) {
+        trigger.focus();
+      }
+    };
+
+    const openPopover = () => {
+      document.dispatchEvent(new CustomEvent('basecoat:popover', {
+        detail: { source: popoverComponent }
+      }));
+      
+      const elementToFocus = content.querySelector('[autofocus]');
+      if (elementToFocus) {
+        content.addEventListener('transitionend', () => {
+          elementToFocus.focus();
+        }, { once: true });
+      }
+
+      trigger.setAttribute('aria-expanded', 'true');
+      content.setAttribute('aria-hidden', 'false');
+    };
+
+    const handleTriggerClick = () => {
+      const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
+      if (isExpanded) {
+        closePopover();
+      } else {
+        openPopover();
+      }
+    };
+
+    const handleKeydown = (event) => {
+      if (event.key === 'Escape') {
+        closePopover();
+      }
+    };
+
+    const handleDocumentClick = (event) => {
+      if (!popoverComponent.contains(event.target)) {
+        closePopover();
+      }
+    };
+
+    const handleDocumentPopover = (event) => {
+      if (!popoverComponent.contains(event.detail.source)) {
+        closePopover(false);
+      }
+    };
+
+    trigger.addEventListener('click', handleTriggerClick);
+    popoverComponent.addEventListener('keydown', handleKeydown);
+    document.addEventListener('click', handleDocumentClick);
+    document.addEventListener('basecoat:popover', handleDocumentPopover);
+
+    popoverComponent._destroy = () => {
+      trigger.removeEventListener('click', handleTriggerClick);
+      popoverComponent.removeEventListener('keydown', handleKeydown);
+      document.removeEventListener('click', handleDocumentClick);
+      document.removeEventListener('basecoat:popover', handleDocumentPopover);
+    };
+
+    popoverComponent.dataset.popoverInitialized = true;
+    popoverComponent.dispatchEvent(new CustomEvent('basecoat:initialized'));
+  };
+
+  if (window.basecoat) {
+    window.basecoat.register('popover', '.popover:not([data-popover-initialized]):not(:has(> [data-popover][popover]))', initPopover);
+  }
+})();
+
+(() => {
+  function updateRange(element) {
+    const min = parseFloat(element.min || '0');
+    const max = parseFloat(element.max || '100');
+    const value = parseFloat(element.value || '0');
+    const percent = max === min ? 0 : ((value - min) / (max - min)) * 100;
+    element.style.setProperty('--slider-value', `${percent}%`);
+  }
+
+  function initRange(element) {
+    if (element.dataset.rangeInitialized) return;
+
+    updateRange(element);
+    const handleInput = () => updateRange(element);
+    element.addEventListener('input', handleInput);
+    element._destroy = () => {
+      element.removeEventListener('input', handleInput);
+    };
+    element.dataset.rangeInitialized = 'true';
+  }
+
+  if (window.basecoat) {
+    window.basecoat.register('range', 'input[type="range"]:not([data-range-initialized])', initRange);
+  }
+})();
+
+(() => {
+  const states = new WeakMap();
+
+  const getElements = (root) => {
+    const trigger = root.querySelector(':scope > button');
+    const selectedLabel = trigger?.querySelector(':scope > span') || null;
+    const popover = root.querySelector(':scope > [data-popover]');
+    const listbox = popover ? popover.querySelector('[role="listbox"]') : null;
+    const input = root.querySelector(':scope > input[type="hidden"]');
+    return { trigger, selectedLabel, popover, listbox, input };
+  };
+
+  const getValue = (option) => option.dataset.value ?? option.textContent.trim();
+  const getLabel = (option) => option.dataset.label || option.textContent.trim();
+  const getFormat = (root) => root.dataset.format === 'object' ? 'object' : 'value';
+  const isDisabled = (option) => option.getAttribute('aria-disabled') === 'true';
+  const toSelected = (option) => ({ value: getValue(option), label: getLabel(option) });
+
+  const getOptions = (listbox) => {
+    const allOptions = Array.from(listbox.querySelectorAll('[role="option"]'));
+    return {
+      allOptions,
+      options: allOptions.filter(option => !isDisabled(option)),
+    };
+  };
+
+  const parseStoredValues = (storedValue, { isMultiple, format }) => {
+    if (isMultiple) {
+      try {
+        const parsed = JSON.parse(storedValue || '[]');
+        if (!Array.isArray(parsed)) return [];
+        return parsed
+          .map(item => format === 'object' && item && typeof item === 'object' ? item.value : item)
+          .filter(value => value != null)
+          .map(String);
+      } catch (_) {
+        return [];
+      }
+    }
+
+    if (format === 'object') {
+      try {
+        const parsed = JSON.parse(storedValue || 'null');
+        return parsed && typeof parsed === 'object' && parsed.value != null ? String(parsed.value) : '';
+      } catch (_) {
+        return '';
+      }
+    }
+
+    return storedValue || '';
+  };
+
+  const serializeSelection = (state, selected) => {
+    if (state.format === 'object') {
+      return JSON.stringify(state.isMultiple ? selected : (selected[0] || null));
+    }
+
+    const value = selected.map(item => item.value);
+    return state.isMultiple ? JSON.stringify(value) : (value[0] || '');
+  };
+
+  const showPlaceholder = (state) => {
+    state.selectedLabel.textContent = state.placeholder || '';
+    state.selectedLabel.classList.toggle('text-muted-foreground', Boolean(state.placeholder));
+    state.input.value = state.isMultiple ? serializeSelection(state, []) : '';
+  };
+
+  const scrollOptionIntoListbox = (state, option) => {
+    const optionRect = option.getBoundingClientRect();
+    const listboxRect = state.listbox.getBoundingClientRect();
+
+    if (optionRect.top < listboxRect.top) {
+      state.listbox.scrollTop -= listboxRect.top - optionRect.top;
+    } else if (optionRect.bottom > listboxRect.bottom) {
+      state.listbox.scrollTop += optionRect.bottom - listboxRect.bottom;
+    }
+  };
+
+  const setActiveOption = (state, index) => {
+    if (state.activeIndex > -1 && state.options[state.activeIndex]) {
+      state.options[state.activeIndex].classList.remove('active');
+    }
+
+    state.activeIndex = index;
+
+    if (state.activeIndex > -1) {
+      const activeOption = state.options[state.activeIndex];
+      activeOption.classList.add('active');
+      if (activeOption.id) {
+        state.trigger.setAttribute('aria-activedescendant', activeOption.id);
+      } else {
+        state.trigger.removeAttribute('aria-activedescendant');
+      }
+    } else {
+      state.trigger.removeAttribute('aria-activedescendant');
+    }
+  };
+
+  const updateValue = (root, optionOrOptions, triggerEvent = true) => {
+    const state = states.get(root);
+    let value;
+    let selectedDetail;
+
+    if (state.isMultiple) {
+      const selected = Array.isArray(optionOrOptions) ? optionOrOptions : [];
+      state.selectedOptions.clear();
+      selected.forEach(option => state.selectedOptions.add(option));
+
+      const selectedInOrder = state.options.filter(option => state.selectedOptions.has(option));
+      selectedDetail = selectedInOrder.map(toSelected);
+      if (selectedInOrder.length === 0) {
+        state.selectedLabel.textContent = state.placeholder;
+        state.selectedLabel.classList.add('text-muted-foreground');
+      } else {
+        state.selectedLabel.textContent = selectedDetail.map(item => item.label).join(', ');
+        state.selectedLabel.classList.remove('text-muted-foreground');
+      }
+
+      value = selectedDetail.map(item => item.value);
+      state.input.value = serializeSelection(state, selectedDetail);
+    } else {
+      const option = optionOrOptions;
+      if (!option) {
+        state.options.forEach(option => option.removeAttribute('aria-selected'));
+        showPlaceholder(state);
+        selectedDetail = null;
+        value = '';
+      } else {
+        if (option.dataset.label) {
+          state.selectedLabel.textContent = option.dataset.label;
+        } else {
+          state.selectedLabel.innerHTML = option.innerHTML;
+        }
+        state.selectedLabel.classList.remove('text-muted-foreground');
+        selectedDetail = toSelected(option);
+        value = selectedDetail.value;
+        state.input.value = serializeSelection(state, [selectedDetail]);
+      }
+    }
+
+    state.options.forEach(option => {
+      const isSelected = state.isMultiple ? state.selectedOptions.has(option) : optionOrOptions && option === optionOrOptions;
+      if (isSelected) {
+        option.setAttribute('aria-selected', 'true');
+      } else {
+        option.removeAttribute('aria-selected');
+      }
+    });
+
+    if (triggerEvent) {
+      root.dispatchEvent(new CustomEvent('change', {
+        detail: { value, selected: selectedDetail },
+        bubbles: true,
+      }));
+    }
+  };
+
+  const closePopover = (state, focusOnTrigger = true) => {
+    if (state.popover.getAttribute('aria-hidden') === 'true') return;
+    if (focusOnTrigger) state.trigger.focus();
+    state.popover.setAttribute('aria-hidden', 'true');
+    state.trigger.setAttribute('aria-expanded', 'false');
+    setActiveOption(state, -1);
+  };
+
+  const refreshSelect = (root) => {
+    const state = states.get(root);
+    if (!state) return;
+
+    const elements = getElements(root);
+    if (!elements.trigger || !elements.selectedLabel || !elements.popover || !elements.listbox || !elements.input) {
+      const missing = [];
+      if (!elements.trigger) missing.push('trigger');
+      if (!elements.selectedLabel) missing.push('selected label');
+      if (!elements.popover) missing.push('popover');
+      if (!elements.listbox) missing.push('listbox');
+      if (!elements.input) missing.push('input');
+      console.error(`Select component refresh failed. Missing element(s): ${missing.join(', ')}`, root);
+      return;
+    }
+
+    const previousValue = elements.input.value;
+    Object.assign(state, elements, getOptions(elements.listbox));
+    state.visibleOptions = [...state.options];
+    state.isMultiple = state.listbox.getAttribute('aria-multiselectable') === 'true';
+    state.format = getFormat(root);
+    state.placeholder = root.dataset.placeholder || '';
+    state.closeOnSelect = root.dataset.closeOnSelect === 'true';
+
+    if (state.isMultiple) {
+      if (!state.selectedOptions) state.selectedOptions = new Set();
+      const values = parseStoredValues(previousValue, state);
+      const selected = values.length
+        ? values.map(value => state.options.find(option => getValue(option) === value)).filter(Boolean)
+        : state.options.filter(option => option.getAttribute('aria-selected') === 'true');
+      updateValue(root, selected, false);
+    } else {
+      const value = parseStoredValues(previousValue, state);
+      const selected = value === '' && state.placeholder
+        ? null
+        : state.options.find(option => getValue(option) === value)
+        || state.options.find(option => option.getAttribute('aria-selected') === 'true');
+      state.options.forEach(option => option.removeAttribute('aria-selected'));
+      updateValue(root, selected || null, false);
+    }
+
+    const selectedOption = state.listbox.querySelector('[role="option"][aria-selected="true"]');
+    setActiveOption(state, selectedOption ? state.options.indexOf(selectedOption) : -1);
+  };
+
+  const toggleMultipleValue = (root, option) => {
+    const state = states.get(root);
+    if (state.selectedOptions.has(option)) {
+      state.selectedOptions.delete(option);
+    } else {
+      state.selectedOptions.add(option);
+    }
+    updateValue(root, state.options.filter(opt => state.selectedOptions.has(opt)));
+  };
+
+  const selectValue = (root, value) => {
+    const state = states.get(root);
+    if (state.isMultiple) {
+      const option = state.options.find(opt => getValue(opt) === value && !state.selectedOptions.has(opt));
+      if (!option) return;
+      state.selectedOptions.add(option);
+      updateValue(root, state.options.filter(opt => state.selectedOptions.has(opt)));
+    } else {
+      const option = state.options.find(opt => getValue(opt) === value);
+      if (!option) return;
+      if (state.placeholder && getValue(option) === '') {
+        updateValue(root, null);
+        closePopover(state);
+        return;
+      }
+      if (root.value !== value) updateValue(root, option);
+      closePopover(state);
+    }
+  };
+
+  const deselectValue = (root, value) => {
+    const state = states.get(root);
+    if (!state.isMultiple) return;
+    const option = state.options.find(opt => getValue(opt) === value && state.selectedOptions.has(opt));
+    if (!option) return;
+    state.selectedOptions.delete(option);
+    updateValue(root, state.options.filter(opt => state.selectedOptions.has(opt)));
+  };
+
+  const handleKeyNavigation = (event, root) => {
+    const state = states.get(root);
+    const isPopoverOpen = state.popover.getAttribute('aria-hidden') === 'false';
+
+    if (!['ArrowDown', 'ArrowUp', 'Enter', 'Home', 'End', 'Escape'].includes(event.key)) return;
+
+    if (!isPopoverOpen) {
+      if (event.key !== 'Enter' && event.key !== 'Escape') {
+        event.preventDefault();
+        root.open();
+      }
+      return;
+    }
+
+    event.preventDefault();
+
+    if (event.key === 'Escape') {
+      root.close();
+      return;
+    }
+
+    if (event.key === 'Enter') {
+      if (state.activeIndex > -1) {
+        const option = state.options[state.activeIndex];
+        if (state.isMultiple) {
+          toggleMultipleValue(root, option);
+          if (state.closeOnSelect) root.close();
+        } else {
+          if (state.placeholder && getValue(option) === '') {
+            updateValue(root, null);
+          } else if (root.value !== getValue(option)) {
+            updateValue(root, option);
+          }
+          root.close();
+        }
+      }
+      return;
+    }
+
+    if (state.visibleOptions.length === 0) return;
+
+    const currentVisibleIndex = state.activeIndex > -1 ? state.visibleOptions.indexOf(state.options[state.activeIndex]) : -1;
+    let nextVisibleIndex = currentVisibleIndex;
+
+    if (event.key === 'ArrowDown' && currentVisibleIndex < state.visibleOptions.length - 1) nextVisibleIndex = currentVisibleIndex + 1;
+    if (event.key === 'ArrowUp') nextVisibleIndex = currentVisibleIndex > 0 ? currentVisibleIndex - 1 : 0;
+    if (event.key === 'Home') nextVisibleIndex = 0;
+    if (event.key === 'End') nextVisibleIndex = state.visibleOptions.length - 1;
+
+    if (nextVisibleIndex !== currentVisibleIndex) {
+      const newActiveOption = state.visibleOptions[nextVisibleIndex];
+      setActiveOption(state, state.options.indexOf(newActiveOption));
+      scrollOptionIntoListbox(state, newActiveOption);
+    }
+  };
+
+  const initSelect = (root) => {
+    if (root.dataset.selectInitialized) return;
+
+    const state = { activeIndex: -1, selectedOptions: null, options: [], allOptions: [], visibleOptions: [], format: 'value' };
+    states.set(root, state);
+    root.refresh = () => refreshSelect(root);
+
+    refreshSelect(root);
+    if (!state.trigger || !state.selectedLabel || !state.popover || !state.listbox || !state.input) {
+      states.delete(root);
+      delete root.refresh;
+      return;
+    }
+
+    root.open = () => {
+      document.dispatchEvent(new CustomEvent('basecoat:popover', { detail: { source: root } }));
+      root.refresh();
+      state.popover.setAttribute('aria-hidden', 'false');
+      state.trigger.setAttribute('aria-expanded', 'true');
+
+      const selectedOption = state.listbox.querySelector('[role="option"][aria-selected="true"]');
+      if (selectedOption) {
+        setActiveOption(state, state.options.indexOf(selectedOption));
+        scrollOptionIntoListbox(state, selectedOption);
+      }
+    };
+    root.close = (focusOnTrigger = true) => closePopover(state, focusOnTrigger);
+    root.togglePopover = () => state.trigger.getAttribute('aria-expanded') === 'true' ? root.close() : root.open();
+
+    const handleTriggerKeydown = (event) => handleKeyNavigation(event, root);
+    const handleTriggerClick = root.togglePopover;
+    const handleListboxMousemove = (event) => {
+      const option = event.target.closest('[role="option"]');
+      if (option && state.visibleOptions.includes(option)) {
+        const index = state.options.indexOf(option);
+        if (index !== state.activeIndex) setActiveOption(state, index);
+      }
+    };
+    const handleListboxMouseleave = () => {
+      const selectedOption = state.listbox.querySelector('[role="option"][aria-selected="true"]');
+      setActiveOption(state, selectedOption ? state.options.indexOf(selectedOption) : -1);
+    };
+    const handleListboxClick = (event) => {
+      const clickedOption = event.target.closest('[role="option"]');
+      if (!clickedOption) return;
+
+      const option = state.options.find(opt => opt === clickedOption);
+      if (!option) return;
+
+      if (state.isMultiple) {
+        toggleMultipleValue(root, option);
+        if (state.closeOnSelect) {
+          root.close();
+        } else {
+          setActiveOption(state, state.options.indexOf(option));
+          state.trigger.focus();
+        }
+      } else {
+        if (state.placeholder && getValue(option) === '') {
+          updateValue(root, null);
+        } else if (root.value !== getValue(option)) {
+          updateValue(root, option);
+        }
+        root.close();
+      }
+    };
+    const handleDocumentClick = (event) => {
+      if (!root.contains(event.target)) root.close(false);
+    };
+    const handleDocumentPopover = (event) => {
+      if (!root.contains(event.detail.source)) root.close(false);
+    };
+
+    state.trigger.addEventListener('keydown', handleTriggerKeydown);
+    state.trigger.addEventListener('click', handleTriggerClick);
+    state.listbox.addEventListener('mousemove', handleListboxMousemove);
+    state.listbox.addEventListener('mouseleave', handleListboxMouseleave);
+    state.listbox.addEventListener('click', handleListboxClick);
+    document.addEventListener('click', handleDocumentClick);
+    document.addEventListener('basecoat:popover', handleDocumentPopover);
+
+    root._destroy = () => {
+      state.trigger.removeEventListener('keydown', handleTriggerKeydown);
+      state.trigger.removeEventListener('click', handleTriggerClick);
+      state.listbox.removeEventListener('mousemove', handleListboxMousemove);
+      state.listbox.removeEventListener('mouseleave', handleListboxMouseleave);
+      state.listbox.removeEventListener('click', handleListboxClick);
+      document.removeEventListener('click', handleDocumentClick);
+      document.removeEventListener('basecoat:popover', handleDocumentPopover);
+      states.delete(root);
+      delete root.refresh;
+      delete root.open;
+      delete root.close;
+      delete root.togglePopover;
+      delete root.select;
+      delete root.selectByValue;
+      delete root.deselect;
+      delete root.toggle;
+      delete root.selectAll;
+      delete root.selectNone;
+    };
+
+    Object.defineProperty(root, 'value', {
+      configurable: true,
+      get: () => state.isMultiple ? state.options.filter(option => state.selectedOptions.has(option)).map(getValue) : parseStoredValues(state.input.value, state),
+      set: (value) => {
+        if (state.isMultiple) {
+          const values = Array.isArray(value) ? value : (value != null ? [value] : []);
+          updateValue(root, values.map(v => state.options.find(option => getValue(option) === v)).filter(Boolean));
+        } else {
+          if (value == null || value === '') {
+            updateValue(root, null);
+            root.close();
+            return;
+          }
+          const option = state.options.find(opt => getValue(opt) === value);
+          if (option) {
+            updateValue(root, option);
+            root.close();
+          }
+        }
+      },
+    });
+
+    Object.defineProperty(root, 'selected', {
+      configurable: true,
+      get: () => {
+        if (state.isMultiple) return state.options.filter(option => state.selectedOptions.has(option)).map(toSelected);
+        const value = root.value;
+        const option = state.options.find(opt => getValue(opt) === value);
+        return option ? toSelected(option) : null;
+      },
+    });
+
+    root.select = (value) => selectValue(root, value);
+    root.selectByValue = root.select;
+    if (state.isMultiple) {
+      root.deselect = (value) => deselectValue(root, value);
+      root.toggle = (value) => {
+        const option = state.options.find(opt => getValue(opt) === value);
+        if (option) toggleMultipleValue(root, option);
+      };
+      root.selectAll = () => updateValue(root, state.options);
+      root.selectNone = () => updateValue(root, []);
+    }
+
+    state.popover.setAttribute('aria-hidden', 'true');
+    state.trigger.setAttribute('aria-expanded', 'false');
+    root.dataset.selectInitialized = 'true';
+    root.dispatchEvent(new CustomEvent('basecoat:initialized'));
+  };
+
+  if (window.basecoat) {
+    window.basecoat.register('select', {
+      selector: 'div.select:not([data-select-initialized])',
+      init: initSelect,
+      refresh: refreshSelect,
+    });
+  }
+})();
+
+(() => {
+  const initSidebar = (sidebarComponent) => {
+    if (sidebarComponent.dataset.sidebarInitialized && typeof sidebarComponent.toggle === 'function') return;
+
+    // In-flow sidebars (inside a dialog, popover or layout cell) have no open state.
+    if (sidebarComponent.dataset.position === 'static') {
+      sidebarComponent.dataset.sidebarInitialized = 'true';
+      return;
+    }
+
+    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;
+
+    // Collapsing to an icon rail keeps the sidebar usable on desktop.
+    const isIconRail = () => sidebarComponent.dataset.collapsible === 'icon' && (breakpoint <= 0 || window.innerWidth >= breakpoint);
+
+    const updateState = () => {
+      const rail = isIconRail();
+      // An icon rail stays visible to assistive tech; only a fully hidden sidebar is aria-hidden.
+      sidebarComponent.setAttribute('aria-hidden', String(!open && !rail));
+      sidebarComponent.dataset.state = open ? 'open' : 'collapsed';
+      if (open || rail) {
+        sidebarComponent.removeAttribute('inert');
+      } else {
+        sidebarComponent.setAttribute('inert', '');
+      }
+      if (sidebarComponent.id) {
+        document.querySelectorAll(`[data-sidebar-toggle="${CSS.escape(sidebarComponent.id)}"]`).forEach((btn) => btn.setAttribute('aria-expanded', String(open)));
+      }
+      sidebarComponent.dispatchEvent(new CustomEvent('basecoat:sidebar', { detail: { open } }));
+    };
+
+    const setState = (state) => {
+      open = Boolean(state);
+      updateState();
+    };
+
+    sidebarComponent.open = () => setState(true);
+    sidebarComponent.close = () => setState(false);
+    sidebarComponent.toggle = () => setState(!open);
+
+    const handleClick = (event) => {
+      const target = event.target;
+      const nav = sidebarComponent.querySelector(':scope > 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();
+        sidebarComponent.close();
+        return;
+      }
+
+      // Collapsed icon rail: opening a submenu expands the sidebar first.
+      if (!open && isIconRail() && target.closest('summary')) {
+        event.preventDefault();
+        sidebarComponent.open();
+        target.closest('details').open = true;
+        return;
+      }
+
+      if (target === sidebarComponent || (nav && !nav.contains(target))) {
+        if (document.activeElement) document.activeElement.blur();
+        sidebarComponent.close();
+      }
+    };
+
+    sidebarComponent.addEventListener('click', handleClick);
+
+    sidebarComponent._destroy = () => {
+      sidebarComponent.removeEventListener('click', handleClick);
+      delete sidebarComponent.open;
+      delete sidebarComponent.close;
+      delete sidebarComponent.toggle;
+    };
+
+    updateState();
+    sidebarComponent.dataset.sidebarInitialized = 'true';
+    sidebarComponent.dispatchEvent(new CustomEvent('basecoat:initialized'));
+  };
+
+  // Declarative toggles: <button data-sidebar-toggle="sidebar-id"> (empty value = first sidebar).
+  const sidebarFor = (id) => (id ? document.getElementById(id) : document.querySelector('.sidebar:not([data-position="static"])'));
+  document.addEventListener('click', (event) => {
+    const button = event.target.closest('[data-sidebar-toggle]');
+    if (!button) return;
+    sidebarFor(button.getAttribute('data-sidebar-toggle'))?.toggle?.();
+  });
+  // Ctrl/Cmd+B toggles the first sidebar (opt out with data-shortcut="none").
+  document.addEventListener('keydown', (event) => {
+    if (event.key.toLowerCase() !== 'b' || !(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) return;
+    if (event.target.closest('input, textarea, select, [contenteditable]')) return;
+    const sidebar = sidebarFor('');
+    if (!sidebar || sidebar.dataset.shortcut === 'none' || typeof sidebar.toggle !== 'function') return;
+    event.preventDefault();
+    sidebar.toggle();
+  });
+
+  if (window.basecoat) {
+    window.basecoat.register('sidebar', '.sidebar', initSidebar);
+  }
+})();
+
+(() => {
+  const states = new WeakMap();
+
+  const isDisabled = (tab) => tab.disabled || tab.getAttribute('aria-disabled') === 'true';
+
+  const getElements = (root) => {
+    const tablist = root.querySelector('[role="tablist"]');
+    const tabs = tablist ? Array.from(tablist.querySelectorAll('[role="tab"]')) : [];
+    const panels = tabs.map(tab => document.getElementById(tab.getAttribute('aria-controls'))).filter(Boolean);
+    return { tablist, tabs, panels };
+  };
+
+  const refreshTabs = (root) => {
+    const state = states.get(root);
+    if (!state) return;
+
+    Object.assign(state, getElements(root));
+    if (!state.tablist) return;
+
+    const selected = state.tabs.find(tab => tab.getAttribute('aria-selected') === 'true' && !isDisabled(tab))
+      || state.tabs.find(tab => !isDisabled(tab));
+    if (selected) root.select(selected, false);
+  };
+
+  const initTabs = (root) => {
+    if (root.dataset.tabsInitialized) return;
+
+    const state = {};
+    states.set(root, state);
+    root.refresh = () => refreshTabs(root);
+
+    const selectTab = (tabToSelect, focus = false) => {
+      if (!tabToSelect || isDisabled(tabToSelect)) return;
+
+      state.tabs.forEach((tab) => {
+        tab.setAttribute('aria-selected', 'false');
+        tab.setAttribute('tabindex', '-1');
+        const panel = document.getElementById(tab.getAttribute('aria-controls'));
+        if (panel) panel.hidden = true;
+      });
+
+      tabToSelect.setAttribute('aria-selected', 'true');
+      tabToSelect.setAttribute('tabindex', '0');
+      const activePanel = document.getElementById(tabToSelect.getAttribute('aria-controls'));
+      if (activePanel) activePanel.hidden = false;
+      if (focus) tabToSelect.focus();
+    };
+
+    root.select = selectTab;
+    refreshTabs(root);
+    if (!state.tablist) {
+      states.delete(root);
+      delete root.refresh;
+      delete root.select;
+      return;
+    }
+
+    const handleClick = (event) => {
+      const clickedTab = event.target.closest('[role="tab"]');
+      if (clickedTab) root.select(clickedTab);
+    };
+
+    const handleKeydown = (event) => {
+      const currentTab = event.target;
+      if (!state.tabs.includes(currentTab)) return;
+
+      const enabledTabs = state.tabs.filter(tab => !isDisabled(tab));
+      const currentIndex = enabledTabs.indexOf(currentTab);
+      const orientation = state.tablist.getAttribute('aria-orientation') || 'horizontal';
+      if (currentIndex === -1) return;
+
+      let nextTab;
+      if (event.key === 'ArrowRight' && orientation === 'horizontal') nextTab = enabledTabs[(currentIndex + 1) % enabledTabs.length];
+      if (event.key === 'ArrowLeft' && orientation === 'horizontal') nextTab = enabledTabs[(currentIndex - 1 + enabledTabs.length) % enabledTabs.length];
+      if (event.key === 'ArrowDown' && orientation === 'vertical') nextTab = enabledTabs[(currentIndex + 1) % enabledTabs.length];
+      if (event.key === 'ArrowUp' && orientation === 'vertical') nextTab = enabledTabs[(currentIndex - 1 + enabledTabs.length) % enabledTabs.length];
+      if (event.key === 'Home') nextTab = enabledTabs[0];
+      if (event.key === 'End') nextTab = enabledTabs[enabledTabs.length - 1];
+      if (!nextTab) return;
+
+      event.preventDefault();
+      root.select(nextTab, true);
+    };
+
+    state.tablist.addEventListener('click', handleClick);
+    state.tablist.addEventListener('keydown', handleKeydown);
+
+    root._destroy = () => {
+      state.tablist.removeEventListener('click', handleClick);
+      state.tablist.removeEventListener('keydown', handleKeydown);
+      states.delete(root);
+      delete root.refresh;
+      delete root.select;
+    };
+
+    root.dataset.tabsInitialized = 'true';
+    root.dispatchEvent(new CustomEvent('basecoat:initialized'));
+  };
+
+  if (window.basecoat) {
+    window.basecoat.register('tabs', {
+      selector: '.tabs:not([data-tabs-initialized])',
+      init: initTabs,
+      refresh: refreshTabs,
+    });
+  }
+})();
+
+(() => {
+  let toaster;
+  const toasts = new WeakMap();
+  let isPaused = false;
+  const ICONS = {
+    success: '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>',
+    error: '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>',
+    info: '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>',
+    warning: '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>'
+  };
+
+  function initToaster(toasterElement) {
+    if (toasterElement.dataset.toasterInitialized) return;
+    toaster = toasterElement;
+
+    const handleClick = (event) => {
+      const actionLink = event.target.closest('.toast footer a');
+      const actionButton = event.target.closest('.toast footer button');
+      if (actionLink || actionButton) {
+        closeToast(event.target.closest('.toast'));
+      }
+    };
+
+    toaster.addEventListener('mouseenter', pauseAllTimeouts);
+    toaster.addEventListener('mouseleave', resumeAllTimeouts);
+    toaster.addEventListener('click', handleClick);
+
+    toasterElement.toast = (config = {}) => {
+      const toastElement = createToast(config);
+      toasterElement.appendChild(toastElement);
+      initToast(toastElement);
+      return toastElement;
+    };
+    toasterElement.closeAll = () => {
+      toasterElement.querySelectorAll('.toast:not([aria-hidden="true"])').forEach(closeToast);
+    };
+
+    toaster.querySelectorAll('.toast:not([data-toast-initialized])').forEach(initToast);
+    toaster._destroy = () => {
+      toaster.removeEventListener('mouseenter', pauseAllTimeouts);
+      toaster.removeEventListener('mouseleave', resumeAllTimeouts);
+      toaster.removeEventListener('click', handleClick);
+      toaster.querySelectorAll('.toast[data-toast-initialized]').forEach(toast => toast._destroy?.());
+      delete toaster.toast;
+      delete toaster.closeAll;
+      if (toaster === toasterElement) toaster = null;
+    };
+    toaster.dataset.toasterInitialized = 'true';
+    toaster.dispatchEvent(new CustomEvent('basecoat:initialized'));
+  }
+
+  function initToast(element) {
+    if (element.dataset.toastInitialized) return;
+
+    const duration = parseInt(element.dataset.duration);
+    const timeoutDuration = duration !== -1
+      ? duration || (element.dataset.category === 'error' ? 5000 : 3000)
+      : -1;
+
+    const state = {
+      remainingTime: timeoutDuration,
+      timeoutId: null,
+      startTime: null,
+    };
+
+    if (timeoutDuration !== -1) {
+      if (isPaused) {
+        state.timeoutId = null;
+      } else {
+        state.startTime = Date.now();
+        state.timeoutId = setTimeout(() => closeToast(element), timeoutDuration);
+      }
+    }
+    toasts.set(element, state);
+
+    element.close = () => closeToast(element);
+    element._destroy = () => {
+      clearTimeout(state.timeoutId);
+      toasts.delete(element);
+      delete element.close;
+    };
+    element.dataset.toastInitialized = 'true';
+  }
+
+  function pauseAllTimeouts() {
+    if (isPaused || !toaster) return;
+
+    isPaused = true;
+
+    toaster.querySelectorAll('.toast:not([aria-hidden="true"])').forEach(element => {
+      if (!toasts.has(element)) return;
+
+      const state = toasts.get(element);
+      if (state.timeoutId) {
+        clearTimeout(state.timeoutId);
+        state.timeoutId = null;
+        state.remainingTime -= Date.now() - state.startTime;
+      }
+    });
+  }
+
+  function resumeAllTimeouts() {
+    if (!isPaused || !toaster) return;
+
+    isPaused = false;
+
+    toaster.querySelectorAll('.toast:not([aria-hidden="true"])').forEach(element => {
+      if (!toasts.has(element)) return;
+
+      const state = toasts.get(element);
+      if (state.remainingTime !== -1 && !state.timeoutId) {
+        if (state.remainingTime > 0) {
+          state.startTime = Date.now();
+          state.timeoutId = setTimeout(() => closeToast(element), state.remainingTime);
+        } else {
+          closeToast(element);
+        }
+      }
+    });
+  }
+
+  function closeToast(element) {
+    if (!element || !toasts.has(element)) return;
+
+    const state = toasts.get(element);
+    clearTimeout(state.timeoutId);
+    toasts.delete(element);
+
+    if (element.contains(document.activeElement)) document.activeElement.blur();
+    element.setAttribute('aria-hidden', 'true');
+    element.addEventListener('transitionend', () => element.remove(), { once: true });
+  }
+
+  const escapeHtml = (value) => String(value)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+
+  function createToast(config) {
+    const {
+      category = 'info',
+      title,
+      description,
+      action,
+      cancel,
+      duration,
+      icon,
+      html: allowHtml = false,
+    } = config;
+
+    // Text is escaped unless `html: true`. `icon` is always raw markup (SVG).
+    const text = (value) => (allowHtml ? String(value) : escapeHtml(value));
+
+    const iconHtml = icon || (category && ICONS[category]) || '';
+    const titleHtml = title ? `<h2>${text(title)}</h2>` : '';
+    const descriptionHtml = description ? `<p>${text(description)}</p>` : '';
+    const actionHtml = action?.href
+      ? `<a href="${escapeHtml(action.href)}" class="btn" data-toast-action>${text(action.label)}</a>`
+      : action?.onclick
+        ? `<button type="button" class="btn" data-toast-action onclick="${escapeHtml(action.onclick)}">${text(action.label)}</button>`
+        : '';
+    const cancelHtml = cancel
+      ? `<button type="button" class="btn h-6 text-xs px-2.5 rounded-sm" data-variant="outline" data-toast-cancel onclick="${escapeHtml(cancel?.onclick || '')}">${text(cancel.label)}</button>`
+      : '';
+
+    const footerHtml = actionHtml || cancelHtml ? `<footer>${actionHtml}${cancelHtml}</footer>` : '';
+
+    const html = `
+      <div
+        class="toast"
+        role="${category === 'error' ? 'alert' : 'status'}"
+        aria-atomic="true"
+        ${category ? `data-category="${escapeHtml(category)}"` : ''}
+        ${duration !== undefined ? `data-duration="${escapeHtml(duration)}"` : ''}
+      >
+        <div class="toast-content">
+          ${iconHtml}
+          <section>
+            ${titleHtml}
+            ${descriptionHtml}
+          </section>
+          ${footerHtml}
+        </div>
+      </div>
+    `;
+    const template = document.createElement('template');
+    template.innerHTML = html.trim();
+    return template.content.firstChild;
+  }
+
+  if (window.basecoat) {
+    window.basecoat.register('toaster', '#toaster:not([data-toaster-initialized])', initToaster);
+    window.basecoat.register('toast', '.toast:not([data-toast-initialized])', initToast);
+  }
+})();
+
+(() => {
+  // ../elements/src/menu.js
+  (() => {
+    if (window.__auvyxMenu) return;
+    window.__auvyxMenu = true;
+    const ITEM = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]';
+    const MENU_POPOVER = "[data-popover][popover]";
+    const isUsable = (el) => !el.disabled && el.getAttribute("aria-disabled") !== "true" && !el.closest("[hidden]");
+    const itemsOf = (popover) => [...popover.querySelectorAll(ITEM)].filter(isUsable);
+    const triggerOf = (popover) => popover.id ? document.querySelector(`[popovertarget="${CSS.escape(popover.id)}"]`) : null;
+    const popoverOf = (trigger) => {
+      const id = trigger?.getAttribute("popovertarget");
+      return id ? document.getElementById(id) : null;
+    };
+    const isMenuPopover = (el) => el instanceof HTMLElement && el.matches(MENU_POPOVER) && el.querySelector('[role="menu"]');
+    const menubarOf = (el) => el?.closest(".menubar");
+    const menubarTriggers = (bar) => [...bar.querySelectorAll(":scope > .dropdown-menu > [popovertarget]")];
+    const focusItem = (item) => item?.focus({ preventScroll: true });
+    const open = (trigger, focus = "first") => {
+      const popover = popoverOf(trigger);
+      if (!popover) return;
+      popover.dataset.focusOnOpen = focus;
+      if (!popover.matches(":popover-open")) popover.showPopover({ source: trigger });
+      else focusItem(focus === "last" ? itemsOf(popover).at(-1) : itemsOf(popover)[0]);
+    };
+    document.addEventListener("toggle", (event) => {
+      const popover = event.target;
+      if (!(popover instanceof HTMLElement) || !popover.matches(MENU_POPOVER)) return;
+      const trigger = triggerOf(popover);
+      if (trigger && trigger.hasAttribute("aria-haspopup")) trigger.setAttribute("aria-expanded", String(event.newState === "open"));
+      if (event.newState !== "open" || !isMenuPopover(popover)) return;
+      const where = popover.dataset.focusOnOpen || "first";
+      delete popover.dataset.focusOnOpen;
+      if (where === "none") return;
+      requestAnimationFrame(() => {
+        const items = itemsOf(popover);
+        focusItem(where === "last" ? items.at(-1) : items[0]);
+      });
+    }, true);
+    document.addEventListener("keydown", (event) => {
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+      const popover = target.closest(MENU_POPOVER);
+      if (popover && isMenuPopover(popover) && target.matches(ITEM)) {
+        const items = itemsOf(popover);
+        const index = items.indexOf(target);
+        const move = { ArrowDown: index + 1, ArrowUp: index - 1, Home: 0, End: items.length - 1 }[event.key];
+        if (move !== void 0) {
+          event.preventDefault();
+          focusItem(items[(move + items.length) % items.length]);
+          return;
+        }
+        if (event.key === "Tab") {
+          popover.hidePopover();
+          return;
+        }
+        if (event.key === "Escape") {
+          event.preventDefault();
+          popover.hidePopover();
+          triggerOf(popover)?.focus({ preventScroll: true });
+          return;
+        }
+        const bar = menubarOf(triggerOf(popover));
+        if (bar && (event.key === "ArrowRight" || event.key === "ArrowLeft")) {
+          event.preventDefault();
+          const triggers = menubarTriggers(bar);
+          const at = triggers.indexOf(triggerOf(popover));
+          const rtl = getComputedStyle(bar).direction === "rtl";
+          const step = event.key === "ArrowRight" !== rtl ? 1 : -1;
+          const next = triggers[(at + step + triggers.length) % triggers.length];
+          popover.hidePopover();
+          open(next);
+          return;
+        }
+        return;
+      }
+      if (target.matches("[popovertarget]")) {
+        const menu = popoverOf(target);
+        const bar = menubarOf(target);
+        if (menu && isMenuPopover(menu) && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+          event.preventDefault();
+          open(target, event.key === "ArrowUp" ? "last" : "first");
+          return;
+        }
+        if (bar && (event.key === "ArrowRight" || event.key === "ArrowLeft" || event.key === "Home" || event.key === "End")) {
+          event.preventDefault();
+          const triggers = menubarTriggers(bar);
+          const at = triggers.indexOf(target);
+          const rtl = getComputedStyle(bar).direction === "rtl";
+          const step = event.key === "ArrowRight" !== rtl ? 1 : -1;
+          const next = event.key === "Home" ? triggers[0] : event.key === "End" ? triggers.at(-1) : triggers[(at + step + triggers.length) % triggers.length];
+          next.focus();
+        }
+      }
+    });
+    document.addEventListener("click", (event) => {
+      const item = event.target instanceof Element && event.target.closest(ITEM);
+      if (!item || !isUsable(item)) return;
+      const popover = item.closest(MENU_POPOVER);
+      if (!popover) return;
+      const role = item.getAttribute("role");
+      if (role === "menuitemcheckbox") {
+        item.setAttribute("aria-checked", String(item.getAttribute("aria-checked") !== "true"));
+      } else if (role === "menuitemradio") {
+        const group = item.closest('[role="group"]') || popover;
+        group.querySelectorAll('[role="menuitemradio"]').forEach((radio) => radio.setAttribute("aria-checked", String(radio === item)));
+      }
+      if (item.hasAttribute("popovertarget") || item.hasAttribute("data-keep-open")) return;
+      if (role !== "menuitem" && !item.hasAttribute("data-close")) return;
+      popover.hidePopover();
+      triggerOf(popover)?.focus({ preventScroll: true });
+    });
+    document.addEventListener("pointerover", (event) => {
+      const trigger = event.target instanceof Element && event.target.closest(".menubar > .dropdown-menu > [popovertarget]");
+      if (!trigger) return;
+      const bar = menubarOf(trigger);
+      const openMenu = menubarTriggers(bar).map(popoverOf).find((p) => p?.matches(":popover-open"));
+      if (!openMenu || openMenu === popoverOf(trigger)) return;
+      openMenu.hidePopover();
+      open(trigger, "none");
+    });
+    const navTimers = /* @__PURE__ */ new WeakMap();
+    const clearNav = (li) => clearTimeout(navTimers.get(li));
+    document.addEventListener("pointerover", (event) => {
+      if (event.pointerType !== "mouse") return;
+      const li = event.target instanceof Element && event.target.closest(".navigation-menu > ul > li");
+      if (!li) return;
+      clearNav(li);
+      const trigger = li.querySelector(":scope > [popovertarget]");
+      const panel = popoverOf(trigger);
+      if (!panel || panel.matches(":popover-open")) return;
+      navTimers.set(li, setTimeout(() => {
+        panel.dataset.openedByHover = String(Date.now());
+        panel.showPopover({ source: trigger });
+      }, 120));
+    });
+    document.addEventListener("pointerout", (event) => {
+      if (event.pointerType !== "mouse") return;
+      const li = event.target instanceof Element && event.target.closest(".navigation-menu > ul > li");
+      if (!li || li.contains(event.relatedTarget)) return;
+      clearNav(li);
+      const panel = popoverOf(li.querySelector(":scope > [popovertarget]"));
+      if (!panel || !panel.dataset.openedByHover) return;
+      navTimers.set(li, setTimeout(() => {
+        if (panel.matches(":popover-open") && !li.matches(":hover")) panel.hidePopover();
+        delete panel.dataset.openedByHover;
+      }, 200));
+    });
+    document.addEventListener("click", (event) => {
+      const trigger = event.target instanceof Element && event.target.closest(".navigation-menu > ul > li > [popovertarget]");
+      const panel = popoverOf(trigger);
+      if (!panel?.dataset.openedByHover) return;
+      if (Date.now() - Number(panel.dataset.openedByHover) < 600 && panel.matches(":popover-open")) {
+        event.preventDefault();
+        return;
+      }
+      delete panel.dataset.openedByHover;
+    }, true);
+  })();
+
+  // ../elements/src/context-menu.js
+  var AuvyxContextMenu = class extends HTMLElement {
+    connectedCallback() {
+      if (this._init) return;
+      this._init = true;
+      this.menu = this.querySelector("[data-popover][popover]");
+      if (!this.menu) return;
+      let pressed = false;
+      this.addEventListener("pointerdown", (e) => {
+        if (e.button === 2) pressed = true;
+      });
+      this.addEventListener("contextmenu", (event) => {
+        if (this.menu.contains(event.target)) return;
+        event.preventDefault();
+        const { clientX: x, clientY: y } = event;
+        if (!pressed) return this.openAt(x, y);
+        window.addEventListener("pointerup", () => {
+          pressed = false;
+          setTimeout(() => this.openAt(x, y));
+        }, { once: true, capture: true });
+      });
+      this.addEventListener("keydown", (event) => {
+        if (this.menu.contains(event.target)) return;
+        if (event.key === "ContextMenu" || event.shiftKey && event.key === "F10") {
+          event.preventDefault();
+          const r = event.target.getBoundingClientRect();
+          this.openAt(r.left, r.bottom);
+        }
+      });
+    }
+    openAt(x, y) {
+      const menu = this.menu;
+      if (menu.matches(":popover-open")) menu.hidePopover();
+      Object.assign(menu.style, {
+        position: "fixed",
+        inset: "auto",
+        margin: "0",
+        positionArea: "none",
+        positionTryFallbacks: "none",
+        left: `${x}px`,
+        top: `${y}px`
+      });
+      menu.showPopover();
+      const r = menu.getBoundingClientRect();
+      if (r.right > innerWidth - 4) menu.style.left = `${Math.max(4, x - r.width)}px`;
+      if (r.bottom > innerHeight - 4) menu.style.top = `${Math.max(4, y - r.height)}px`;
+    }
+  };
+  if (!customElements.get("auvyx-context-menu")) customElements.define("auvyx-context-menu", AuvyxContextMenu);
+
+  // ../elements/src/resizable.js
+  var AuvyxResizable = class extends HTMLElement {
+    connectedCallback() {
+      if (this._init) return;
+      this._init = true;
+      this.vertical = this.dataset.orientation === "vertical";
+      this.panels = [...this.children].filter((el) => el.getAttribute("role") !== "separator");
+      this.handles = [...this.children].filter((el) => el.getAttribute("role") === "separator");
+      if (this.panels.length < 2) return;
+      const given = this.panels.map((p) => parseFloat(getComputedStyle(p).getPropertyValue("--size")) || 0);
+      const missing = given.filter((v) => !v).length;
+      const rest = Math.max(0, 100 - given.reduce((a, b) => a + b, 0));
+      this.sizes = given.map((v) => v || (missing ? rest / missing : 0));
+      const sum = this.sizes.reduce((a, b) => a + b, 0) || 1;
+      this.sizes = this.sizes.map((v) => v / sum * 100);
+      this.apply();
+      this.handles.forEach((handle, i) => {
+        handle.setAttribute("aria-orientation", this.vertical ? "horizontal" : "vertical");
+        handle.setAttribute("aria-valuemin", "0");
+        handle.setAttribute("aria-valuemax", "100");
+        if (this.panels[i].id) handle.setAttribute("aria-controls", this.panels[i].id);
+        if (!handle.hasAttribute("tabindex")) handle.tabIndex = 0;
+        handle.addEventListener("pointerdown", (e) => this.startDrag(e, i));
+        handle.addEventListener("keydown", (e) => this.onKey(e, i));
+        handle.addEventListener("dblclick", () => this.resetPair(i));
+      });
+    }
+    minOf(i) {
+      const v = parseFloat(this.panels[i].dataset.min);
+      return Number.isFinite(v) ? v : 10;
+    }
+    maxOf(i) {
+      const v = parseFloat(this.panels[i].dataset.max);
+      return Number.isFinite(v) ? v : 100;
+    }
+    // Move the boundary after panel i so panel i gets `target` percent.
+    setPair(i, target) {
+      const pair = this.sizes[i] + this.sizes[i + 1];
+      const lo = Math.max(this.minOf(i), pair - this.maxOf(i + 1));
+      const hi = Math.min(this.maxOf(i), pair - this.minOf(i + 1));
+      const next = Math.min(hi, Math.max(lo, target));
+      this.sizes[i] = next;
+      this.sizes[i + 1] = pair - next;
+      this.apply();
+    }
+    resetPair(i) {
+      const pair = this.sizes[i] + this.sizes[i + 1];
+      this.setPair(i, pair / 2);
+    }
+    apply() {
+      this.panels.forEach((p, i) => p.style.setProperty("--size", this.sizes[i].toFixed(3)));
+      this.handles?.forEach((h, i) => h.setAttribute("aria-valuenow", String(Math.round(this.sizes[i]))));
+      this.dispatchEvent(new CustomEvent("resize", { detail: { sizes: [...this.sizes] } }));
+    }
+    startDrag(event, i) {
+      if (event.button !== 0) return;
+      event.preventDefault();
+      const handle = event.currentTarget;
+      handle.setPointerCapture(event.pointerId);
+      handle.setAttribute("data-active", "");
+      this.setAttribute("data-dragging", "");
+      const rect = this.getBoundingClientRect();
+      const total = this.vertical ? rect.height : rect.width;
+      const rtl = !this.vertical && getComputedStyle(this).direction === "rtl";
+      const start = this.vertical ? event.clientY : event.clientX;
+      const initial = this.sizes[i];
+      const move = (e) => {
+        const delta = ((this.vertical ? e.clientY : e.clientX) - start) / total * 100;
+        this.setPair(i, initial + (rtl ? -delta : delta));
+      };
+      const end = () => {
+        handle.removeEventListener("pointermove", move);
+        handle.removeAttribute("data-active");
+        this.removeAttribute("data-dragging");
+      };
+      handle.addEventListener("pointermove", move);
+      handle.addEventListener("pointerup", end, { once: true });
+      handle.addEventListener("pointercancel", end, { once: true });
+    }
+    onKey(event, i) {
+      const step = event.shiftKey ? 10 : 5;
+      const rtl = !this.vertical && getComputedStyle(this).direction === "rtl";
+      const grow = this.vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight";
+      const shrink = this.vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+      const map = { [grow]: this.sizes[i] + step, [shrink]: this.sizes[i] - step, Home: 0, End: 100, Enter: null };
+      if (!(event.key in map)) return;
+      event.preventDefault();
+      if (event.key === "Enter") this.resetPair(i);
+      else this.setPair(i, map[event.key]);
+    }
+  };
+  if (!customElements.get("auvyx-resizable")) customElements.define("auvyx-resizable", AuvyxResizable);
+
+  // ../elements/src/data-table.js
+  var AuvyxDataTable = class extends HTMLElement {
+    connectedCallback() {
+      if (this._init) return;
+      this._init = true;
+      this.table = this.querySelector("table");
+      this.tbody = this.table?.tBodies[0];
+      if (!this.tbody) return;
+      this.rows = [...this.tbody.rows].filter((r) => !r.hasAttribute("data-empty"));
+      this.empty = this.tbody.querySelector("tr[data-empty]");
+      this.pageSize = parseInt(this.dataset.pageSize, 10) || 0;
+      this.page = 0;
+      this.query = "";
+      this.sort = { col: -1, dir: "ascending" };
+      this.collator = new Intl.Collator(this.closest("[lang]")?.lang || void 0, { numeric: true, sensitivity: "base" });
+      this.headers = [...this.table.tHead.rows[0].cells];
+      this.headers.forEach((th, col) => {
+        const button = th.hasAttribute("aria-sort") ? th.querySelector(":scope > button") : null;
+        button?.addEventListener("click", () => this.toggleSort(col));
+      });
+      this.filterInput = this.querySelector("input[data-filter]");
+      this.filterInput?.addEventListener("input", () => {
+        this.query = this.filterInput.value.trim().toLocaleLowerCase();
+        this.page = 0;
+        this.render();
+      });
+      this.selectAll = this.querySelector("input[data-select-all]");
+      this.selectAll?.addEventListener("change", () => {
+        this.visible().forEach((row) => this.setSelected(row, this.selectAll.checked));
+        this.updateSelection();
+      });
+      this.tbody.addEventListener("change", (e) => {
+        if (!e.target.matches("input[data-select]")) return;
+        this.setSelected(e.target.closest("tr"), e.target.checked);
+        this.updateSelection();
+      });
+      this.querySelectorAll("input[data-column]").forEach((toggle) => {
+        toggle.addEventListener("change", () => this.setColumn(parseInt(toggle.dataset.column, 10), toggle.checked));
+        if (!toggle.checked) this.setColumn(parseInt(toggle.dataset.column, 10), false);
+      });
+      this.querySelector('[data-page="prev"]')?.addEventListener("click", () => {
+        this.page--;
+        this.render();
+      });
+      this.querySelector('[data-page="next"]')?.addEventListener("click", () => {
+        this.page++;
+        this.render();
+      });
+      this.rows.forEach((row) => {
+        const box = row.querySelector("input[data-select]");
+        if (box?.checked) row.setAttribute("aria-selected", "true");
+      });
+      this.render();
+    }
+    cellValue(row, col) {
+      const cell = row.cells[col];
+      return cell ? cell.dataset.value ?? cell.textContent.trim() : "";
+    }
+    matches(row) {
+      if (!this.query) return true;
+      const only = this.filterInput?.dataset.filter;
+      const cols = only ? only.split(",").map(Number) : null;
+      return [...row.cells].some((cell, i) => (!cols || cols.includes(i)) && cell.textContent.toLocaleLowerCase().includes(this.query));
+    }
+    toggleSort(col) {
+      this.sort = this.sort.col === col ? { col, dir: this.sort.dir === "ascending" ? "descending" : "ascending" } : { col, dir: "ascending" };
+      this.headers.forEach((th, i) => th.hasAttribute("aria-sort") && th.setAttribute("aria-sort", i === col ? this.sort.dir : "none"));
+      this.render();
+    }
+    ordered() {
+      const list = this.rows.filter((r) => this.matches(r));
+      const { col, dir } = this.sort;
+      if (col < 0) return list;
+      const numeric = this.headers[col]?.dataset.type === "number";
+      const sign = dir === "descending" ? -1 : 1;
+      return list.sort((a, b) => {
+        const x = this.cellValue(a, col);
+        const y = this.cellValue(b, col);
+        return sign * (numeric ? (parseFloat(x) || 0) - (parseFloat(y) || 0) : this.collator.compare(x, y));
+      });
+    }
+    visible() {
+      return this.rows.filter((r) => !r.hidden);
+    }
+    setSelected(row, on) {
+      const box = row.querySelector("input[data-select]");
+      if (box) box.checked = on;
+      if (on) row.setAttribute("aria-selected", "true");
+      else row.removeAttribute("aria-selected");
+    }
+    setColumn(col, show) {
+      [this.table.tHead, ...this.table.tBodies, this.table.tFoot].filter(Boolean).forEach((section) => {
+        [...section.rows].forEach((row) => {
+          if (row.cells[col] && !row.hasAttribute("data-empty")) row.cells[col].hidden = !show;
+        });
+      });
+    }
+    updateSelection() {
+      const shown = this.visible();
+      const selected = this.rows.filter((r) => r.getAttribute("aria-selected") === "true").length;
+      const shownSelected = shown.filter((r) => r.getAttribute("aria-selected") === "true").length;
+      if (this.selectAll) {
+        this.selectAll.checked = shown.length > 0 && shownSelected === shown.length;
+        this.selectAll.indeterminate = shownSelected > 0 && shownSelected < shown.length;
+      }
+      const count = this.querySelector("[data-selected-count]");
+      if (count) {
+        const tpl = count.dataset.template || "{selected} of {total} row(s) selected.";
+        count.textContent = tpl.replace("{selected}", selected).replace("{total}", this.rows.length);
+      }
+      this.dispatchEvent(new CustomEvent("selectionchange", { detail: { rows: this.rows.filter((r) => r.getAttribute("aria-selected") === "true") } }));
+    }
+    render() {
+      const list = this.ordered();
+      const pages = this.pageSize ? Math.max(1, Math.ceil(list.length / this.pageSize)) : 1;
+      this.page = Math.min(Math.max(0, this.page), pages - 1);
+      const from = this.pageSize ? this.page * this.pageSize : 0;
+      const to = this.pageSize ? from + this.pageSize : list.length;
+      const shown = new Set(list.slice(from, to));
+      list.forEach((row) => this.tbody.insertBefore(row, this.empty));
+      this.rows.forEach((row) => {
+        row.hidden = !shown.has(row);
+      });
+      if (this.empty) this.empty.hidden = list.length > 0;
+      const status = this.querySelector("[data-page-status]");
+      if (status) {
+        const tpl = status.dataset.template || "Page {page} of {pages}";
+        status.textContent = tpl.replace("{page}", this.page + 1).replace("{pages}", pages);
+      }
+      const prev = this.querySelector('[data-page="prev"]');
+      const next = this.querySelector('[data-page="next"]');
+      if (prev) prev.disabled = this.page <= 0;
+      if (next) next.disabled = this.page >= pages - 1;
+      this.updateSelection();
+    }
+  };
+  if (!customElements.get("auvyx-data-table")) customElements.define("auvyx-data-table", AuvyxDataTable);
+
+  // ../elements/src/calendar.js
+  var pad = (n) => String(n).padStart(2, "0");
+  var toISO = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+  var fromISO = (s) => {
+    const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec((s || "").trim());
+    return m ? new Date(+m[1], +m[2] - 1, +m[3]) : null;
+  };
+  var dayKey = (d) => d.getFullYear() * 1e4 + d.getMonth() * 100 + d.getDate();
+  var sameDay = (a, b) => !!a && !!b && dayKey(a) === dayKey(b);
+  var addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+  var addMonths = (d, n) => {
+    const last = new Date(d.getFullYear(), d.getMonth() + n + 1, 0).getDate();
+    return new Date(d.getFullYear(), d.getMonth() + n, Math.min(d.getDate(), last));
+  };
+  var monthStart = (d) => new Date(d.getFullYear(), d.getMonth(), 1);
+  var daysBetween = (a, b) => Math.round((new Date(b.getFullYear(), b.getMonth(), b.getDate()) - new Date(a.getFullYear(), a.getMonth(), a.getDate())) / 864e5);
+  var isoWeek = (d) => {
+    const t = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
+    t.setUTCDate(t.getUTCDate() + 4 - (t.getUTCDay() || 7));
+    return Math.ceil(((t - Date.UTC(t.getUTCFullYear(), 0, 1)) / 864e5 + 1) / 7);
+  };
+  var parseList = (s) => (s || "").split(",").map((x) => x.trim()).filter(Boolean).map((x) => {
+    const [a, b] = x.split("/");
+    const from = fromISO(a);
+    return from ? [from, fromISO(b) || from] : null;
+  }).filter(Boolean);
+  var inList = (list, d) => list.some(([a, b]) => d >= a && d <= b);
+  var chevron = (path) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="${path}"/></svg>`;
+  var esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+  var AuvyxCalendar = class extends HTMLElement {
+    static observedAttributes = ["value", "min", "max", "mode", "months", "month", "disabled-dates", "disabled-days", "booked", "min-days", "max-days", "caption", "week-numbers", "lang"];
+    connectedCallback() {
+      this.readAll();
+      const first = this.selected[0] || this.start || /* @__PURE__ */ new Date();
+      this.focused ||= this.clamp(first);
+      const m = /^(\d{4})-(\d{2})$/.exec(this.getAttribute("month") || "");
+      this.view ||= m ? new Date(+m[1], +m[2] - 1, 1) : monthStart(this.focused);
+      if (!this._init) {
+        this._init = true;
+        this.addEventListener("click", (e) => this.onClick(e));
+        this.addEventListener("keydown", (e) => this.onKey(e));
+        this.addEventListener("change", (e) => this.onSelectChange(e));
+      }
+      this.render();
+    }
+    attributeChangedCallback(name, oldValue, value) {
+      if (!this._init || oldValue === value || this._writing) return;
+      this.readAll();
+      if (name === "value") {
+        const first = this.selected[0] || this.start;
+        if (first) {
+          this.focused = first;
+          this.view = monthStart(first);
+        }
+      }
+      if (name === "month") {
+        const m = /^(\d{4})-(\d{2})$/.exec(value || "");
+        if (m) this.view = new Date(+m[1], +m[2] - 1, 1);
+      }
+      this.render();
+    }
+    // ---- state
+    readAll() {
+      const mode = this.getAttribute("mode");
+      this.mode = mode === "range" || mode === "multiple" ? mode : "single";
+      this.monthsShown = Math.max(1, Math.min(12, parseInt(this.getAttribute("months"), 10) || 1));
+      this.min = fromISO(this.getAttribute("min"));
+      this.max = fromISO(this.getAttribute("max"));
+      this.disabledDates = parseList(this.getAttribute("disabled-dates"));
+      this.bookedDates = parseList(this.getAttribute("booked"));
+      this.disabledDays = (this.getAttribute("disabled-days") || "").split(",").map((x) => parseInt(x, 10)).filter((x) => x >= 0 && x <= 6);
+      this.minDays = parseInt(this.getAttribute("min-days"), 10) || 0;
+      this.maxDays = parseInt(this.getAttribute("max-days"), 10) || 0;
+      const raw = this.getAttribute("value") || "";
+      this.start = this.end = null;
+      this.selected = [];
+      if (this.mode === "range") {
+        const [a, b] = raw.split("/");
+        this.start = fromISO(a);
+        this.end = fromISO(b);
+      } else if (this.mode === "multiple") {
+        this.selected = raw.split(",").map(fromISO).filter(Boolean);
+      } else {
+        this.start = fromISO(raw);
+        if (this.start) this.selected = [this.start];
+      }
+    }
+    get value() {
+      if (this.mode === "range") return this.start ? `${toISO(this.start)}/${this.end ? toISO(this.end) : ""}` : "";
+      if (this.mode === "multiple") return this.selected.map(toISO).join(",");
+      return this.start ? toISO(this.start) : "";
+    }
+    set value(v) {
+      this.setAttribute("value", v ?? "");
+    }
+    get dates() {
+      if (this.mode === "range") return [this.start, this.end].filter(Boolean);
+      return [...this.selected];
+    }
+    set renderDay(fn) {
+      this._renderDay = fn;
+      if (this._init) this.render();
+    }
+    get renderDay() {
+      return this._renderDay;
+    }
+    locale() {
+      return this.getAttribute("lang") || this.closest("[lang]")?.getAttribute("lang") || navigator.language;
+    }
+    weekStart() {
+      const n = parseInt(this.dataset.weekStart, 10);
+      return Number.isFinite(n) ? (n % 7 + 7) % 7 : 1;
+    }
+    clamp(d) {
+      if (this.min && d < this.min) return this.min;
+      if (this.max && d > this.max) return this.max;
+      return d;
+    }
+    isDisabled(d) {
+      if (this.min && d < this.min || this.max && d > this.max) return true;
+      if (this.disabledDays.includes(d.getDay())) return true;
+      if (inList(this.disabledDates, d) || inList(this.bookedDates, d)) return true;
+      if (this.mode === "range" && this.start && !this.end && d > this.start) {
+        const len = daysBetween(this.start, d) + 1;
+        if (this.minDays && len < this.minDays) return true;
+        if (this.maxDays && len > this.maxDays) return true;
+        for (let x = addDays(this.start, 1); x < d; x = addDays(x, 1)) {
+          if (this.disabledDays.includes(x.getDay()) || inList(this.disabledDates, x) || inList(this.bookedDates, x)) return true;
+        }
+      }
+      return false;
+    }
+    // ---- rendering
+    render() {
+      const locale = this.locale();
+      const fmtMonth = new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" });
+      const fmtMonthOnly = new Intl.DateTimeFormat(locale, { month: "short" });
+      const fmtWeekday = new Intl.DateTimeFormat(locale, { weekday: "short" });
+      const fmtWeekdayLong = new Intl.DateTimeFormat(locale, { weekday: "long" });
+      const fmtDay = new Intl.DateTimeFormat(locale, { dateStyle: "full" });
+      const today = /* @__PURE__ */ new Date();
+      const ws = this.weekStart();
+      const id = this.id || (this._uid ||= `cal-${Math.random().toString(36).slice(2, 8)}`);
+      const weekNums = this.hasAttribute("week-numbers");
+      const dropdown = this.getAttribute("caption") === "dropdown";
+      const prevDisabled = this.min && addMonths(this.view, -1) < monthStart(this.min);
+      const nextDisabled = this.max && addMonths(this.view, this.monthsShown) > this.max;
+      const hadFocus = this.contains(document.activeElement) && document.activeElement.matches("td > button");
+      let html = "";
+      for (let m = 0; m < this.monthsShown; m++) {
+        const first = addMonths(this.view, m);
+        const lead = (first.getDay() - ws + 7) % 7;
+        const gridStart = addDays(first, -lead);
+        const dim = new Date(first.getFullYear(), first.getMonth() + 1, 0).getDate();
+        const weeks = Math.ceil((lead + dim) / 7);
+        const titleId = `${id}-title-${m}`;
+        let caption = `<h2 id="${titleId}" aria-live="polite">${esc(fmtMonth.format(first))}</h2>`;
+        if (dropdown && m === 0) {
+          const y0 = (this.min || addMonths(today, -12 * 10)).getFullYear();
+          const y1 = (this.max || addMonths(today, 12 * 10)).getFullYear();
+          let months = "";
+          for (let i = 0; i < 12; i++) {
+            const d = new Date(first.getFullYear(), i, 1);
+            const off = this.min && new Date(first.getFullYear(), i + 1, 0) < this.min || this.max && d > this.max;
+            months += `<option value="${i}"${i === first.getMonth() ? " selected" : ""}${off ? " disabled" : ""}>${esc(fmtMonthOnly.format(d))}</option>`;
+          }
+          let years = "";
+          for (let y = y0; y <= y1; y++) years += `<option value="${y}"${y === first.getFullYear() ? " selected" : ""}>${y}</option>`;
+          caption = `<div class="calendar-caption" id="${titleId}" aria-label="${esc(fmtMonth.format(first))}" role="group"><select class="select" data-calendar-month aria-label="${esc(this.dataset.labelMonth || "Month")}">${months}</select><select class="select" data-calendar-year aria-label="${esc(this.dataset.labelYear || "Year")}">${years}</select></div>`;
+        }
+        const prev = m === 0 ? `<button type="button" data-nav="-1" aria-label="${esc(this.dataset.labelPrev || "Previous month")}"${prevDisabled ? " disabled" : ""}>${chevron("m15 18-6-6 6-6")}</button>` : "<span></span>";
+        const next = m === this.monthsShown - 1 ? `<button type="button" data-nav="1" aria-label="${esc(this.dataset.labelNext || "Next month")}"${nextDisabled ? " disabled" : ""}>${chevron("m9 18 6-6-6-6")}</button>` : "<span></span>";
+        let head = weekNums ? `<th scope="col" data-week-number><span class="sr-only">${esc(this.dataset.labelWeek || "Week")}</span></th>` : "";
+        for (let i = 0; i < 7; i++) {
+          const d = addDays(gridStart, i);
+          head += `<th scope="col" abbr="${esc(fmtWeekdayLong.format(d))}">${esc(fmtWeekday.format(d))}</th>`;
+        }
+        let body = "";
+        for (let w = 0; w < weeks; w++) {
+          body += "<tr>";
+          if (weekNums) body += `<th scope="row" data-week-number>${isoWeek(addDays(gridStart, w * 7 + (8 - ws) % 7))}</th>`;
+          for (let i = 0; i < 7; i++) {
+            const d = addDays(gridStart, w * 7 + i);
+            const outside = d.getMonth() !== first.getMonth();
+            const hideOutside = outside && this.monthsShown > 1;
+            const attrs = [];
+            if (outside) attrs.push("data-outside");
+            if (inList(this.bookedDates, d)) attrs.push("data-booked");
+            if (!hideOutside) {
+              if (this.mode !== "range" && this.selected.some((s) => sameDay(s, d))) attrs.push('aria-selected="true"');
+              if (this.mode === "range" && this.start) {
+                const end = this.end || this.start;
+                if (sameDay(d, this.start)) attrs.push("data-range-start");
+                if (sameDay(d, end)) attrs.push("data-range-end");
+                if (d > this.start && d < end) attrs.push("data-range-middle");
+                if (d >= this.start && d <= end) attrs.push('aria-selected="true"');
+              }
+            }
+            if (hideOutside) {
+              body += `<td ${attrs.join(" ")} aria-hidden="true"></td>`;
+              continue;
+            }
+            const tab = sameDay(d, this.focused) && !outside ? "0" : "-1";
+            const extra = this._renderDay ? this._renderDay(d) : null;
+            body += `<td ${attrs.join(" ")}><button type="button" data-date="${toISO(d)}" tabindex="${tab}" aria-label="${esc(fmtDay.format(d))}"${sameDay(d, today) ? ' aria-current="date"' : ""}${this.isDisabled(d) ? " disabled" : ""}><span>${d.getDate()}</span>${extra ? `<small>${extra}</small>` : ""}</button></td>`;
+          }
+          body += "</tr>";
+        }
+        html += `<section class="calendar-month"><header>${prev}${caption}${next}</header><table role="grid" aria-labelledby="${titleId}"${weekNums ? " data-week-numbers" : ""}><thead><tr>${head}</tr></thead><tbody>${body}</tbody></table></section>`;
+      }
+      const hidden = this.getAttribute("name") ? `<input type="hidden" name="${esc(this.getAttribute("name"))}" value="${esc(this.value)}">` : "";
+      this.innerHTML = `<div class="calendar-months">${html}</div>${hidden}`;
+      if (!this.querySelector('td > button[tabindex="0"]')) {
+        const b = this.querySelector("td:not([data-outside]) > button:not(:disabled)") || this.querySelector("td > button");
+        if (b) b.tabIndex = 0;
+      }
+      if (hadFocus) this.focusDate();
+    }
+    focusDate() {
+      const b = this.querySelector(`td:not([data-outside]) > button[data-date="${toISO(this.focused)}"]`) || this.querySelector('td > button[tabindex="0"]');
+      b?.focus({ preventScroll: true });
+    }
+    goTo(date) {
+      const d = typeof date === "string" ? fromISO(date) : date;
+      if (!d) return;
+      this.view = monthStart(d);
+      this.focused = d;
+      this.render();
+    }
+    visible(d) {
+      const last = addMonths(this.view, this.monthsShown - 1);
+      return d >= this.view && d < addMonths(last, 1);
+    }
+    moveFocus(d) {
+      if (this.min && d < this.min || this.max && d > this.max) return;
+      this.focused = d;
+      if (!this.visible(d)) {
+        this.view = d < this.view ? monthStart(d) : monthStart(addMonths(d, -(this.monthsShown - 1)));
+        this.render();
+      } else {
+        this.querySelectorAll("td > button").forEach((b) => {
+          b.tabIndex = b.dataset.date === toISO(d) && !b.closest("[data-outside]") ? 0 : -1;
+        });
+      }
+      this.focusDate();
+    }
+    select(d) {
+      if (this.mode === "range") {
+        if (!this.start || this.end || d < this.start) {
+          this.start = d;
+          this.end = null;
+        } else this.end = d;
+      } else if (this.mode === "multiple") {
+        const i = this.selected.findIndex((s) => sameDay(s, d));
+        if (i >= 0) this.selected.splice(i, 1);
+        else this.selected.push(d);
+        this.selected.sort((a, b) => a - b);
+      } else {
+        this.start = d;
+        this.selected = [d];
+      }
+      this.focused = d;
+      this._writing = true;
+      this.setAttribute("value", this.value);
+      this._writing = false;
+      this.render();
+      this.focusDate();
+      this.dispatchEvent(new CustomEvent("change", { bubbles: true, detail: { value: this.value, dates: this.dates, complete: this.mode !== "range" || !!this.end } }));
+    }
+    // ---- events
+    onClick(event) {
+      const nav = event.target.closest("button[data-nav]");
+      if (nav && !nav.disabled) {
+        this.view = addMonths(this.view, +nav.dataset.nav);
+        const dim = new Date(this.view.getFullYear(), this.view.getMonth() + 1, 0).getDate();
+        this.focused = this.clamp(new Date(this.view.getFullYear(), this.view.getMonth(), Math.min(this.focused.getDate(), dim)));
+        this.render();
+        return;
+      }
+      const day = event.target.closest("button[data-date]");
+      if (day && !day.disabled) this.select(fromISO(day.dataset.date));
+    }
+    onSelectChange(event) {
+      const t = event.target;
+      if (!(t instanceof HTMLSelectElement) || !t.closest(".calendar-caption")) return;
+      event.stopPropagation();
+      const month = +this.querySelector("[data-calendar-month]").value;
+      const year = +this.querySelector("[data-calendar-year]").value;
+      this.view = new Date(year, month, 1);
+      this.focused = this.clamp(new Date(year, month, Math.min(this.focused.getDate(), new Date(year, month + 1, 0).getDate())));
+      this.render();
+      this.querySelector(t.hasAttribute("data-calendar-month") ? "[data-calendar-month]" : "[data-calendar-year]")?.focus();
+    }
+    onKey(event) {
+      if (!event.target.matches("td > button")) return;
+      const rtl = getComputedStyle(this).direction === "rtl";
+      const d = this.focused;
+      const offset = (d.getDay() - this.weekStart() + 7) % 7;
+      const moves = {
+        ArrowLeft: addDays(d, rtl ? 1 : -1),
+        ArrowRight: addDays(d, rtl ? -1 : 1),
+        ArrowUp: addDays(d, -7),
+        ArrowDown: addDays(d, 7),
+        Home: addDays(d, -offset),
+        End: addDays(d, 6 - offset),
+        PageUp: addMonths(d, event.shiftKey ? -12 : -1),
+        PageDown: addMonths(d, event.shiftKey ? 12 : 1)
+      };
+      if (!(event.key in moves)) return;
+      event.preventDefault();
+      this.moveFocus(moves[event.key]);
+    }
+  };
+  if (!customElements.get("auvyx-calendar")) customElements.define("auvyx-calendar", AuvyxCalendar);
+
+  // ../elements/src/date-picker.js
+  var calendarIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>';
+  var PASS = ["months", "caption", "week-numbers", "disabled-days", "disabled-dates", "booked", "min-days", "max-days"];
+  var asDate = (v) => v ? /* @__PURE__ */ new Date(`${v}T00:00:00`) : null;
+  var AuvyxDatePicker = class extends HTMLElement {
+    connectedCallback() {
+      if (this._init) return;
+      this.inputs = [...this.querySelectorAll(':scope > input[type="date"]')];
+      if (!this.inputs.length) return;
+      this._init = true;
+      this.range = this.getAttribute("mode") === "range" && this.inputs.length >= 2;
+      const first = this.inputs[0];
+      const uid = first.id || `dp-${Math.random().toString(36).slice(2, 8)}`;
+      const locale = this.closest("[lang]")?.getAttribute("lang") || navigator.language;
+      this.format = new Intl.DateTimeFormat(locale, { dateStyle: "medium" });
+      this.button = document.createElement("button");
+      this.button.type = "button";
+      this.button.className = "btn";
+      this.button.dataset.variant = this.dataset.variant || "outline";
+      this.button.setAttribute("popovertarget", `${uid}-popover`);
+      this.button.setAttribute("aria-haspopup", "dialog");
+      const label = first.labels?.[0];
+      if (label) {
+        label.id ||= `${uid}-label`;
+        this.button.setAttribute("aria-labelledby", `${label.id} ${uid}-value`);
+        label.htmlFor = "";
+        label.addEventListener("click", () => this.button.focus());
+      }
+      this.button.innerHTML = `${calendarIcon}<span id="${uid}-value"></span>`;
+      this.panel = document.createElement("div");
+      this.panel.id = `${uid}-popover`;
+      this.panel.setAttribute("data-popover", "");
+      this.panel.setAttribute("popover", "");
+      this.panel.setAttribute("role", "dialog");
+      this.panel.setAttribute("aria-label", this.dataset.dialogLabel || (this.range ? "Choose dates" : "Choose date"));
+      this.panel.dataset.side = this.dataset.side || "bottom";
+      this.panel.dataset.align = this.dataset.align || "start";
+      this.calendar = document.createElement("auvyx-calendar");
+      this.calendar.className = "calendar";
+      if (this.range) this.calendar.setAttribute("mode", "range");
+      for (const attr of ["min", "max"]) if (first[attr]) this.calendar.setAttribute(attr, first[attr]);
+      for (const attr of PASS) if (this.hasAttribute(attr)) this.calendar.setAttribute(attr, this.getAttribute(attr));
+      if (this.dataset.weekStart) this.calendar.dataset.weekStart = this.dataset.weekStart;
+      const v = this.range ? this.inputs[0].value ? `${this.inputs[0].value}/${this.inputs[1].value}` : "" : first.value;
+      if (v) this.calendar.setAttribute("value", v);
+      this.panel.append(this.calendar);
+      for (const input of this.inputs) {
+        input.hidden = true;
+        input.tabIndex = -1;
+        input.addEventListener("invalid", (e) => {
+          e.preventDefault();
+          this.button.setAttribute("aria-invalid", "true");
+          this.button.focus();
+        });
+      }
+      this.prepend(this.button);
+      this.append(this.panel);
+      this.update();
+      this.calendar.addEventListener("change", (e) => {
+        e.stopPropagation();
+        const [a, b] = e.detail.value.split("/");
+        this.setInput(this.inputs[0], a || "");
+        if (this.range) this.setInput(this.inputs[1], b || "");
+        this.button.removeAttribute("aria-invalid");
+        this.update();
+        if (e.detail.complete) {
+          this.panel.hidePopover();
+          this.button.focus();
+        }
+        this.dispatchEvent(new CustomEvent("change", { bubbles: true, detail: { value: e.detail.value, complete: e.detail.complete } }));
+      });
+      this.panel.addEventListener("toggle", (e) => {
+        if (e.newState === "open") requestAnimationFrame(() => this.calendar.focusDate?.());
+      });
+    }
+    setInput(input, value) {
+      if (input.value === value) return;
+      input.value = value;
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+    get value() {
+      return this.range ? `${this.inputs[0].value}/${this.inputs[1].value}` : this.inputs[0].value;
+    }
+    update() {
+      const text = this.button.querySelector("span");
+      const a = asDate(this.inputs[0].value);
+      const b = this.range ? asDate(this.inputs[1].value) : null;
+      let label;
+      if (this.range && a && b) label = this.format.formatRange(a, b);
+      else if (a) label = this.format.format(a) + (this.range ? " \u2013" : "");
+      else label = this.dataset.placeholder || this.inputs[0].placeholder || (this.range ? "Pick a date range" : "Pick a date");
+      text.textContent = label;
+      if (a) this.button.dataset.value = this.value;
+      else delete this.button.dataset.value;
+    }
+  };
+  if (!customElements.get("auvyx-date-picker")) customElements.define("auvyx-date-picker", AuvyxDatePicker);
+})();