@birdapi/velinstyle 0.6.1 → 0.7.0

package/dist/velinstyle-components.js

@@ -9,10 +9,15 @@ var FOCUSABLE_SELECTOR = [
   "summary",
   "details"
 ].join(", ");
+function isFocusable(el) {
+  if (el.hasAttribute("disabled") || el.getAttribute("aria-hidden") === "true") return false;
+  if (el.closest("[inert]")) return false;
+  const style = el.ownerDocument.defaultView?.getComputedStyle(el);
+  if (style && (style.visibility === "hidden" || style.display === "none")) return false;
+  return el.getClientRects().length > 0;
+}
 function getFocusableElements(root) {
-  return [...root.querySelectorAll(FOCUSABLE_SELECTOR)].filter(
-    (el) => !el.hasAttribute("disabled") && el.offsetParent !== null
-  );
+  return [...root.querySelectorAll(FOCUSABLE_SELECTOR)].filter(isFocusable);
 }
 function trapFocus(root, event) {
   if (event.key !== "Tab") return;
@@ -68,6 +73,23 @@ function restoreFocus(element) {
     element.focus();
   }
 }
+var _inertSiblings = [];
+function setBackgroundInert(except) {
+  _inertSiblings = [];
+  for (const child of document.body.children) {
+    if (child === except || child.contains(except)) continue;
+    if (!child.hasAttribute("inert")) {
+      child.setAttribute("inert", "");
+      _inertSiblings.push(child);
+    }
+  }
+}
+function clearBackgroundInert() {
+  for (const el of _inertSiblings) {
+    el.removeAttribute("inert");
+  }
+  _inertSiblings = [];
+}
 
 // components/sanitize.js
 var ESCAPE_MAP = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };
@@ -220,6 +242,7 @@ var VelinModal = class extends HTMLElement {
   }
   _open() {
     this._previouslyFocused = saveFocus();
+    setBackgroundInert(this);
     document.addEventListener("keydown", this._onKeydown);
     document.body.style.overflow = "hidden";
     requestAnimationFrame(() => {
@@ -230,6 +253,7 @@ var VelinModal = class extends HTMLElement {
   _close() {
     document.removeEventListener("keydown", this._onKeydown);
     document.body.style.overflow = "";
+    clearBackgroundInert();
     restoreFocus(this._previouslyFocused);
   }
   _onKeydown(event) {
@@ -308,6 +332,8 @@ var VelinDropdown = class extends HTMLElement {
     this.attachShadow({ mode: "open", delegatesFocus: true });
     this._onDocClick = this._onDocClick.bind(this);
     this._onKeydown = this._onKeydown.bind(this);
+    this._typeahead = "";
+    this._typeaheadTimer = null;
   }
   connectedCallback() {
     const align = this.getAttribute("align") || "start";
@@ -319,16 +345,29 @@ var VelinDropdown = class extends HTMLElement {
       </div>
     `;
     const triggerSlot = this.shadowRoot.querySelector('slot[name="trigger"]');
+    const menuSlot = this.shadowRoot.querySelector("slot:not([name])");
     triggerSlot.addEventListener("click", () => this.toggle());
     triggerSlot.addEventListener("slotchange", () => {
       const trigger = triggerSlot.assignedElements()[0];
       if (trigger) {
         trigger.setAttribute("aria-haspopup", "menu");
         trigger.setAttribute("aria-expanded", this.hasAttribute("open") ? "true" : "false");
+        const menuId = this._menuId || (this._menuId = `velin-dropdown-menu-${Math.random().toString(36).slice(2, 9)}`);
+        trigger.setAttribute("aria-controls", menuId);
+        this.shadowRoot.querySelector(".menu")?.setAttribute("id", menuId);
       }
     });
+    menuSlot?.addEventListener("slotchange", () => this._normalizeMenuItems());
+    this._normalizeMenuItems();
     this.addEventListener("keydown", this._onKeydown);
   }
+  _normalizeMenuItems() {
+    const items = this._getMenuItems();
+    items.forEach((el, i) => {
+      if (!el.hasAttribute("role")) el.setAttribute("role", "menuitem");
+      el.setAttribute("tabindex", i === 0 ? "0" : "-1");
+    });
+  }
   toggle() {
     if (this.hasAttribute("open")) {
       this.close();
@@ -372,9 +411,24 @@ var VelinDropdown = class extends HTMLElement {
       return;
     }
     const items = this._getMenuItems();
-    if (items.length > 0) {
-      rovingTabindex(this, items, event);
+    if (items.length === 0) return;
+    if (event.key.length === 1 && /[a-z0-9]/i.test(event.key)) {
+      clearTimeout(this._typeaheadTimer);
+      this._typeahead += event.key.toLowerCase();
+      this._typeaheadTimer = setTimeout(() => {
+        this._typeahead = "";
+      }, 500);
+      const match = items.find(
+        (el) => (el.textContent?.trim().toLowerCase() || "").startsWith(this._typeahead)
+      );
+      if (match) {
+        event.preventDefault();
+        items.forEach((item) => item.setAttribute("tabindex", item === match ? "0" : "-1"));
+        match.focus();
+      }
+      return;
     }
+    rovingTabindex(this, items, event);
   }
   disconnectedCallback() {
     document.removeEventListener("click", this._onDocClick, true);
@@ -422,12 +476,25 @@ var VelinAccordion = class extends HTMLElement {
   connectedCallback() {
     this.shadowRoot.innerHTML = `
       <style>${styles3}</style>
-      <div role="region" part="region"><slot></slot></div>
+      <slot></slot>
     `;
     this._exclusive = this.hasAttribute("exclusive");
+    this._wireDetails();
     this.addEventListener("toggle", this._onToggle, true);
     this.addEventListener("keydown", this._onKeydown.bind(this));
   }
+  _wireDetails() {
+    let panelIndex = 0;
+    for (const details of this.querySelectorAll("details")) {
+      const summary = details.querySelector("summary");
+      const panel = details.querySelector(":scope > :not(summary)");
+      const panelId = panel?.id || `velin-accordion-panel-${++panelIndex}`;
+      if (panel && !panel.id) panel.id = panelId;
+      if (summary && panel) {
+        summary.setAttribute("aria-controls", panelId);
+      }
+    }
+  }
   _onToggle(event) {
     if (!this._exclusive) return;
     const openedDetail = event.target;
@@ -885,12 +952,13 @@ var VelinDrawer = class extends HTMLElement {
   connectedCallback() {
     const title = this.getAttribute("title") || "";
     const safeTitle = escapeHTML(title);
+    const titleId = "velin-drawer-title";
     this.shadowRoot.innerHTML = `
       <style>${styles6}</style>
       <div class="overlay" part="overlay"></div>
-      <div class="drawer" role="dialog" aria-modal="true" aria-label="${safeTitle}" part="drawer">
+      <div class="drawer" role="dialog" aria-modal="true" aria-labelledby="${titleId}" part="drawer">
         <div class="header" part="header">
-          <h2 class="title">${safeTitle}</h2>
+          <h2 class="title" id="${titleId}">${safeTitle}</h2>
           <button class="close-btn" aria-label="Close" part="close">&#215;</button>
         </div>
         <div class="body" part="body"><slot></slot></div>
@@ -911,6 +979,7 @@ var VelinDrawer = class extends HTMLElement {
   }
   _open() {
     this._prev = saveFocus();
+    setBackgroundInert(this);
     document.addEventListener("keydown", this._onKey);
     document.body.style.overflow = "hidden";
     requestAnimationFrame(() => {
@@ -921,6 +990,7 @@ var VelinDrawer = class extends HTMLElement {
   _close() {
     document.removeEventListener("keydown", this._onKey);
     document.body.style.overflow = "";
+    clearBackgroundInert();
     restoreFocus(this._prev);
   }
   _onKey(e) {
@@ -1038,7 +1108,6 @@ var styles8 = `
     transition: opacity 150ms ease, visibility 150ms ease;
   }
   :host([open]) .popover { opacity: 1; visibility: visible; }
-  /* Placement */
   .popover--top { inset-block-end: calc(100% + 0.5rem); inset-inline-start: 50%; transform: translateX(-50%); }
   .popover--bottom { inset-block-start: calc(100% + 0.5rem); inset-inline-start: 50%; transform: translateX(-50%); }
   .popover--start { inset-inline-end: calc(100% + 0.5rem); inset-block-start: 50%; transform: translateY(-50%); }
@@ -1051,6 +1120,7 @@ var styles8 = `
   }
   @media (prefers-reduced-motion: reduce) { .popover { transition: none; } }
 `;
+var popoverId = 0;
 var VelinPopover = class extends HTMLElement {
   static get observedAttributes() {
     return ["open"];
@@ -1058,42 +1128,52 @@ var VelinPopover = class extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: "open" });
+    this._popoverId = `velin-popover-${++popoverId}`;
     this._onOutside = this._onOutside.bind(this);
     this._onKey = this._onKey.bind(this);
+    this._prevFocus = null;
+    this._isDialog = false;
   }
   connectedCallback() {
     const placement = this.getAttribute("placement") || "bottom";
     const triggerType = this.getAttribute("trigger") || "click";
     const title = this.getAttribute("title") || "";
     const role = triggerType === "hover" ? "tooltip" : "dialog";
+    this._isDialog = role === "dialog";
     this.shadowRoot.innerHTML = `
       <style>${styles8}</style>
       <slot name="trigger"></slot>
-      <div class="popover popover--${placement}" role="${role}" part="popover">
+      <div class="popover popover--${placement}" id="${this._popoverId}" role="${role}" part="popover">
         ${title ? `<div class="popover__title" part="title">${escapeHTML(title)}</div>` : ""}
         <slot></slot>
       </div>
     `;
     const triggerSlot = this.shadowRoot.querySelector('slot[name="trigger"]');
-    triggerSlot.addEventListener("slotchange", () => {
-      const trigger = triggerSlot.assignedElements()[0];
-      if (!trigger) return;
-      trigger.setAttribute("aria-haspopup", role === "tooltip" ? "true" : "dialog");
-      trigger.setAttribute("aria-expanded", "false");
-      if (triggerType === "click") {
-        trigger.addEventListener("click", () => this.toggle());
-      } else if (triggerType === "hover") {
-        this.addEventListener("mouseenter", () => this.open());
-        this.addEventListener("mouseleave", () => this.close());
-        this.addEventListener("focusin", () => this.open());
-        this.addEventListener("focusout", (e) => {
-          if (!this.contains(e.relatedTarget)) this.close();
-        });
-      } else if (triggerType === "focus") {
-        trigger.addEventListener("focusin", () => this.open());
-        trigger.addEventListener("focusout", () => this.close());
-      }
-    });
+    triggerSlot.addEventListener("slotchange", () => this._wireTrigger(triggerType));
+    this._wireTrigger(triggerType);
+  }
+  _wireTrigger(triggerType) {
+    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
+    if (!trigger) return;
+    const isHover = triggerType === "hover";
+    trigger.setAttribute("aria-haspopup", isHover ? "true" : "dialog");
+    trigger.setAttribute("aria-expanded", this.hasAttribute("open") ? "true" : "false");
+    if (this._isDialog) {
+      trigger.setAttribute("aria-controls", this._popoverId);
+    }
+    if (triggerType === "click") {
+      trigger.onclick = () => this.toggle();
+    } else if (triggerType === "hover") {
+      this.onmouseenter = () => this.open();
+      this.onmouseleave = () => this.close();
+      this.onfocusin = () => this.open();
+      this.onfocusout = (e) => {
+        if (!this.contains(e.relatedTarget)) this.close();
+      };
+    } else if (triggerType === "focus") {
+      trigger.onfocusin = () => this.open();
+      trigger.onfocusout = () => this.close();
+    }
   }
   open() {
     this.setAttribute("open", "");
@@ -1101,6 +1181,14 @@ var VelinPopover = class extends HTMLElement {
     if (trigger) trigger.setAttribute("aria-expanded", "true");
     document.addEventListener("click", this._onOutside, true);
     document.addEventListener("keydown", this._onKey);
+    if (this._isDialog) {
+      this._prevFocus = saveFocus();
+      requestAnimationFrame(() => {
+        const focusable = getFocusableElements(this.shadowRoot.querySelector(".popover"));
+        if (focusable.length) focusable[0].focus();
+        else this.shadowRoot.querySelector(".popover")?.focus();
+      });
+    }
   }
   close() {
     this.removeAttribute("open");
@@ -1108,6 +1196,10 @@ var VelinPopover = class extends HTMLElement {
     if (trigger) trigger.setAttribute("aria-expanded", "false");
     document.removeEventListener("click", this._onOutside, true);
     document.removeEventListener("keydown", this._onKey);
+    if (this._isDialog && this._prevFocus) {
+      restoreFocus(this._prevFocus);
+      this._prevFocus = null;
+    }
   }
   toggle() {
     this.hasAttribute("open") ? this.close() : this.open();
@@ -1116,7 +1208,15 @@ var VelinPopover = class extends HTMLElement {
     if (!this.contains(e.target)) this.close();
   }
   _onKey(e) {
-    if (e.key === "Escape") this.close();
+    if (e.key === "Escape") {
+      this.close();
+      const trigger = this.querySelector('[slot="trigger"]');
+      if (trigger) trigger.focus();
+      return;
+    }
+    if (this._isDialog && this.hasAttribute("open")) {
+      trapFocus(this.shadowRoot.querySelector(".popover"), e);
+    }
   }
   disconnectedCallback() {
     document.removeEventListener("click", this._onOutside, true);
@@ -1280,9 +1380,15 @@ var styles11 = `
   button:disabled { opacity: 0.3; cursor: not-allowed; }
   svg { width: 1.25rem; height: 1.25rem; }
   .indicators {
-    display: flex; justify-content: center; gap: var(--velin-space-2, 0.5rem);
+    display: flex; justify-content: center; align-items: center; gap: var(--velin-space-2, 0.5rem);
     padding-block: var(--velin-space-3, 0.75rem);
   }
+  .pause-btn {
+    font-size: var(--velin-text-xs, 0.75rem);
+    padding-inline: var(--velin-space-3, 0.75rem);
+    min-inline-size: auto;
+    border-radius: var(--velin-radius-md, 0.375rem);
+  }
   .dot {
     display: inline-flex; align-items: center; justify-content: center;
     min-width: 2.75rem; min-height: 2.75rem;
@@ -1309,6 +1415,7 @@ var VelinCarousel = class extends HTMLElement {
     this._index = 0;
     this._timer = null;
     this._startX = 0;
+    this._autoplayPaused = false;
   }
   connectedCallback() {
     this.shadowRoot.innerHTML = `
@@ -1322,7 +1429,7 @@ var VelinCarousel = class extends HTMLElement {
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 6 15 12 9 18"/></svg>
         </button>
       </div>
-      <div class="indicators" role="tablist" aria-label="Slide indicators" part="indicators"></div>
+      <div class="indicators" role="group" aria-label="Slide indicators" part="indicators"></div>
     `;
     this.shadowRoot.querySelector(".prev").addEventListener("click", () => this.prev());
     this.shadowRoot.querySelector(".next").addEventListener("click", () => this.next());
@@ -1401,12 +1508,37 @@ var VelinCarousel = class extends HTMLElement {
     c.innerHTML = "";
     this._slides.forEach((_, i) => {
       const d = document.createElement("button");
+      d.type = "button";
       d.className = "dot";
-      d.setAttribute("role", "tab");
-      d.setAttribute("aria-label", `Slide ${i + 1}`);
+      d.setAttribute("aria-label", `Go to slide ${i + 1}`);
       d.addEventListener("click", () => this.goTo(i));
       c.appendChild(d);
     });
+    if (this.hasAttribute("autoplay")) {
+      const pause = document.createElement("button");
+      pause.type = "button";
+      pause.className = "pause-btn";
+      pause.setAttribute("aria-pressed", "false");
+      pause.setAttribute("aria-label", "Pause automatic slide show");
+      pause.textContent = "Pause";
+      pause.addEventListener("click", () => this._toggleAutoplayPause(pause));
+      c.appendChild(pause);
+    }
+    this._update();
+  }
+  _toggleAutoplayPause(btn) {
+    this._autoplayPaused = !this._autoplayPaused;
+    if (this._autoplayPaused) {
+      this._pause();
+      btn.setAttribute("aria-pressed", "true");
+      btn.setAttribute("aria-label", "Resume automatic slide show");
+      btn.textContent = "Play";
+    } else {
+      this._resume();
+      btn.setAttribute("aria-pressed", "false");
+      btn.setAttribute("aria-label", "Pause automatic slide show");
+      btn.textContent = "Pause";
+    }
   }
   _emit() {
     this.dispatchEvent(new CustomEvent("velin-slide-change", { bubbles: true, detail: { index: this._index } }));
@@ -1422,7 +1554,7 @@ var VelinCarousel = class extends HTMLElement {
     }
   }
   _resume() {
-    if (this.hasAttribute("autoplay") && !this._timer) this._startAutoplay();
+    if (this.hasAttribute("autoplay") && !this._timer && !this._autoplayPaused) this._startAutoplay();
   }
   disconnectedCallback() {
     this._pause();
@@ -1444,6 +1576,11 @@ var styles12 = `
   .inner { min-height: 0; }
   @media (prefers-reduced-motion: reduce) { .content { transition: none; } }
 `;
+var collapseId = 0;
+function isButtonLike(el) {
+  const tag = el.tagName;
+  return tag === "BUTTON" || tag === "A" && el.hasAttribute("href") || el.getAttribute("role") === "button";
+}
 var VelinCollapse = class extends HTMLElement {
   static get observedAttributes() {
     return ["open"];
@@ -1451,28 +1588,41 @@ var VelinCollapse = class extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: "open" });
+    this._contentId = `velin-collapse-panel-${++collapseId}`;
+    this._onTriggerKey = this._onTriggerKey.bind(this);
   }
   connectedCallback() {
-    this.shadowRoot.innerHTML = `
-      <style>${styles12}</style>
-      <slot name="trigger"></slot>
-      <div class="content" role="region" part="content">
-        <div class="inner"><slot></slot></div>
-      </div>
-    `;
+    const panelId = this._contentId;
+    this.shadowRoot.innerHTML = "<style>" + styles12 + '</style><slot name="trigger"></slot><div class="content" id="' + panelId + '" part="content"><div class="inner"><slot></slot></div></div>';
     const triggerSlot = this.shadowRoot.querySelector('slot[name="trigger"]');
-    triggerSlot.addEventListener("slotchange", () => {
-      const trigger = triggerSlot.assignedElements()[0];
-      if (trigger) {
-        trigger.addEventListener("click", () => this.toggle());
-        trigger.setAttribute("aria-expanded", this.hasAttribute("open"));
-      }
-    });
+    triggerSlot.addEventListener("slotchange", () => this._wireTrigger());
+    this._wireTrigger();
+  }
+  _wireTrigger() {
+    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
+    if (!trigger) return;
+    if (!isButtonLike(trigger)) {
+      trigger.setAttribute("role", "button");
+      if (!trigger.hasAttribute("tabindex")) trigger.setAttribute("tabindex", "0");
+    }
+    trigger.setAttribute("aria-controls", this._contentId);
+    trigger.setAttribute("aria-expanded", this.hasAttribute("open") ? "true" : "false");
+    trigger.removeEventListener("click", this._onClick);
+    trigger.removeEventListener("keydown", this._onTriggerKey);
+    this._onClick = () => this.toggle();
+    trigger.addEventListener("click", this._onClick);
+    trigger.addEventListener("keydown", this._onTriggerKey);
+  }
+  _onTriggerKey(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this.toggle();
+    }
   }
   attributeChangedCallback(name) {
     if (name === "open") {
       const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
-      if (trigger) trigger.setAttribute("aria-expanded", this.hasAttribute("open"));
+      if (trigger) trigger.setAttribute("aria-expanded", this.hasAttribute("open") ? "true" : "false");
     }
   }
   toggle() {
@@ -1560,6 +1710,7 @@ var styles13 = `
   .tip[data-placement="end"] { left: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
   @media (prefers-reduced-motion: reduce) { .tip { transition: none; } }
 `;
+var tooltipId = 0;
 var VelinTooltipWC = class extends HTMLElement {
   static get observedAttributes() {
     return ["content", "placement"];
@@ -1567,13 +1718,15 @@ var VelinTooltipWC = class extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: "open" });
+    this._tipId = `velin-tooltip-${++tooltipId}`;
   }
   connectedCallback() {
     const placement = this.getAttribute("placement") || "top";
+    const D = "div";
     this.shadowRoot.innerHTML = `
       <style>${styles13}</style>
       <slot></slot>
-      <div class="tip" role="tooltip" data-placement="${escapeHTML(placement)}" part="tip">${escapeHTML(this.getAttribute("content") || "")}</div>
+      <${D} class="tip" id="${this._tipId}" role="tooltip" data-placement="${escapeHTML(placement)}" part="tip">${escapeHTML(this.getAttribute("content") || "")}</${D}>
     `;
     this.addEventListener("mouseenter", () => this._show());
     this.addEventListener("mouseleave", () => this._hide());
@@ -1582,13 +1735,29 @@ var VelinTooltipWC = class extends HTMLElement {
     this.addEventListener("keydown", (e) => {
       if (e.key === "Escape") this._hide();
     });
+    const slot = this.shadowRoot.querySelector("slot");
+    slot.addEventListener("slotchange", () => this._linkTrigger());
+    this._linkTrigger();
+  }
+  _linkTrigger() {
+    const trigger = this.shadowRoot.querySelector("slot")?.assignedElements()[0];
+    if (!trigger) return;
+    if (this.hasAttribute("visible")) {
+      trigger.setAttribute("aria-describedby", this._tipId);
+    } else {
+      trigger.removeAttribute("aria-describedby");
+    }
   }
   _show() {
     this.setAttribute("visible", "");
+    const trigger = this.shadowRoot.querySelector("slot")?.assignedElements()[0];
+    if (trigger) trigger.setAttribute("aria-describedby", this._tipId);
     this._flip();
   }
   _hide() {
     this.removeAttribute("visible");
+    const trigger = this.shadowRoot.querySelector("slot")?.assignedElements()[0];
+    if (trigger) trigger.removeAttribute("aria-describedby");
   }
   _flip() {
     const tip = this.shadowRoot.querySelector(".tip");
@@ -2342,10 +2511,12 @@ export {
   velin_toast_default as VelinToast,
   velin_tooltip_wc_default as VelinTooltipWC,
   applyHaptic,
+  clearBackgroundInert,
   getFocusableElements,
   restoreFocus,
   rovingTabindex,
   saveFocus,
+  setBackgroundInert,
   trapFocus,
   vibrate
 };