@birdapi/velinstyle 0.6.1 → 0.7.0

package/dist/velinstyle-components.iife.js

@@ -10,10 +10,15 @@
     "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;
@@ -69,6 +74,23 @@
       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;" };
@@ -221,6 +243,7 @@
     }
     _open() {
       this._previouslyFocused = saveFocus();
+      setBackgroundInert(this);
       document.addEventListener("keydown", this._onKeydown);
       document.body.style.overflow = "hidden";
       requestAnimationFrame(() => {
@@ -231,6 +254,7 @@
     _close() {
       document.removeEventListener("keydown", this._onKeydown);
       document.body.style.overflow = "";
+      clearBackgroundInert();
       restoreFocus(this._previouslyFocused);
     }
     _onKeydown(event) {
@@ -309,6 +333,8 @@
       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";
@@ -320,16 +346,29 @@
       </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();
@@ -373,9 +412,24 @@
         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);
@@ -423,12 +477,25 @@
     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;
@@ -886,12 +953,13 @@
     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>
@@ -912,6 +980,7 @@
     }
     _open() {
       this._prev = saveFocus();
+      setBackgroundInert(this);
       document.addEventListener("keydown", this._onKey);
       document.body.style.overflow = "hidden";
       requestAnimationFrame(() => {
@@ -922,6 +991,7 @@
     _close() {
       document.removeEventListener("keydown", this._onKey);
       document.body.style.overflow = "";
+      clearBackgroundInert();
       restoreFocus(this._prev);
     }
     _onKey(e) {
@@ -1039,7 +1109,6 @@
     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%); }
@@ -1052,6 +1121,7 @@
   }
   @media (prefers-reduced-motion: reduce) { .popover { transition: none; } }
 `;
+  var popoverId = 0;
   var VelinPopover = class extends HTMLElement {
     static get observedAttributes() {
       return ["open"];
@@ -1059,42 +1129,52 @@
     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", "");
@@ -1102,6 +1182,14 @@
       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");
@@ -1109,6 +1197,10 @@
       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();
@@ -1117,7 +1209,15 @@
       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);
@@ -1281,9 +1381,15 @@
   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;
@@ -1310,6 +1416,7 @@
       this._index = 0;
       this._timer = null;
       this._startX = 0;
+      this._autoplayPaused = false;
     }
     connectedCallback() {
       this.shadowRoot.innerHTML = `
@@ -1323,7 +1430,7 @@
           <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());
@@ -1402,12 +1509,37 @@
       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 } }));
@@ -1423,7 +1555,7 @@
       }
     }
     _resume() {
-      if (this.hasAttribute("autoplay") && !this._timer) this._startAutoplay();
+      if (this.hasAttribute("autoplay") && !this._timer && !this._autoplayPaused) this._startAutoplay();
     }
     disconnectedCallback() {
       this._pause();
@@ -1445,6 +1577,11 @@
   .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"];
@@ -1452,28 +1589,41 @@
     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() {
@@ -1561,6 +1711,7 @@
   .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"];
@@ -1568,13 +1719,15 @@
     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());
@@ -1583,13 +1736,29 @@
       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");