legacy.css 0.1.0

package/src/features/popover.ts

@@ -0,0 +1,322 @@
+import { currentTargetElement, eventTargetElement, isElement, isLegacyCollection, listen } from "../internal";
+import type { LegacyPopoverPlacement, LegacyRequiredApi, LegacyTarget } from "../internal";
+const legacyPopoverPlacements: LegacyPopoverPlacement[] = ["top", "right", "bottom", "left"];
+const wiredPopoverTriggers = new WeakSet<Element>();
+const popoverTriggerSelector = "[data-popover-target], [data-popover]";
+let openPopoverTrigger: Element | null = null;
+function isPopoverPlacement(placement: unknown): placement is LegacyPopoverPlacement {
+  return typeof placement === "string" && legacyPopoverPlacements.includes(placement as LegacyPopoverPlacement);
+}
+
+export function installPopover(legacy: LegacyRequiredApi): void {
+  function resolveElement(target: LegacyTarget): Element | null {
+    if (!target) {
+      return null;
+    }
+
+    if (isLegacyCollection(target)) {
+      return resolveElement(target[0]);
+    }
+
+    if (typeof target === "string") {
+      return document.querySelector<HTMLElement>(target);
+    }
+
+    /* v8 ignore next -- resolver fallback for non-element internal callers */
+    return isElement(target) ? target : null;
+  }
+
+  function resolvePopoverTrigger(target: LegacyTarget): Element | null {
+    const element = resolveElement(target);
+
+    if (!element) {
+      return null;
+    }
+
+    if (element.matches(popoverTriggerSelector)) {
+      return element;
+    }
+
+    return element.closest(popoverTriggerSelector);
+  }
+
+  function resolvePopover(target: LegacyTarget): Element | null {
+    const element = resolveElement(target);
+
+    if (!element) {
+      return null;
+    }
+
+    if (element.matches(".popover, [data-popover-content]")) {
+      return element;
+    }
+
+    const trigger = resolvePopoverTrigger(element);
+
+    /* v8 ignore next -- public close/open paths resolve trigger and content separately */
+    return trigger ? getTriggerPopover(trigger) : null;
+  }
+
+  function getTriggerPopover(trigger: Element): HTMLElement | null {
+    const target =
+      trigger.getAttribute("data-popover-target") ||
+      trigger.getAttribute("data-popover") ||
+      trigger.getAttribute("aria-controls");
+
+    if (!target) {
+      return null;
+    }
+
+    if (target.charAt(0) === "#") {
+      return document.querySelector(target);
+    }
+
+    return document.getElementById(target);
+  }
+
+  function getPopoverPlacement(trigger: Element): LegacyPopoverPlacement {
+    const placement = trigger.getAttribute("data-popover-placement");
+
+    return isPopoverPlacement(placement)
+      ? placement
+      : "bottom";
+  }
+
+  function positionPopover(trigger: Element, popover: HTMLElement): void {
+    const gap = 4;
+    const margin = 8;
+    const placement = getPopoverPlacement(trigger);
+    const triggerRect = trigger.getBoundingClientRect();
+    const popoverRect = popover.getBoundingClientRect();
+    let top = triggerRect.bottom + gap;
+    let left = triggerRect.left;
+
+    if (placement === "top") {
+      top = triggerRect.top - popoverRect.height - gap;
+      left = triggerRect.left;
+    } else if (placement === "right") {
+      top = triggerRect.top;
+      left = triggerRect.right + gap;
+    } else if (placement === "left") {
+      top = triggerRect.top;
+      left = triggerRect.left - popoverRect.width - gap;
+    }
+
+    top = Math.max(
+      margin,
+      Math.min(top, window.innerHeight - popoverRect.height - margin)
+    );
+    left = Math.max(
+      margin,
+      Math.min(left, window.innerWidth - popoverRect.width - margin)
+    );
+
+    popover.style.top = top + "px";
+    popover.style.left = left + "px";
+  }
+
+  function closePopover(trigger?: Element | null): HTMLElement | null {
+    /* v8 ignore next -- trigger fallback is driven by document-level close handlers */
+    const currentTrigger = trigger || openPopoverTrigger;
+    /* v8 ignore next -- paired with currentTrigger fallback above */
+    const popover = currentTrigger ? getTriggerPopover(currentTrigger) : null;
+
+    if (!currentTrigger || !popover) {
+      return null;
+    }
+
+    popover.hidden = true;
+    currentTrigger.setAttribute("aria-expanded", "false");
+
+    /* v8 ignore next -- depends on whether close was invoked directly or globally */
+    if (openPopoverTrigger === currentTrigger) {
+      openPopoverTrigger = null;
+    }
+
+    return popover;
+  }
+
+  function openPopover(trigger: Element | null): HTMLElement | null {
+    /* v8 ignore next -- null trigger is covered by the public no-op API branch */
+    const popover = trigger ? getTriggerPopover(trigger) : null;
+
+    if (!trigger || !popover) {
+      return null;
+    }
+
+    if (openPopoverTrigger && openPopoverTrigger !== trigger) {
+      closePopover(openPopoverTrigger);
+    }
+
+    wirePopoverTrigger(trigger);
+    popover.hidden = false;
+    trigger.setAttribute("aria-expanded", "true");
+    openPopoverTrigger = trigger;
+    positionPopover(trigger, popover);
+
+    return popover;
+  }
+
+  function togglePopover(trigger: Element | null): HTMLElement | null {
+    /* v8 ignore next -- null trigger is covered by the public no-op API branch */
+    const popover = trigger ? getTriggerPopover(trigger) : null;
+
+    if (!popover) {
+      return null;
+    }
+
+    return popover.hidden ? openPopover(trigger) : closePopover(trigger);
+  }
+
+  function handlePopoverClick(event: Event): void {
+    event.preventDefault();
+    togglePopover(currentTargetElement(event));
+  }
+
+  function handlePopoverKeydown(event: KeyboardEvent): void {
+    if (event.key !== "Escape") {
+      return;
+    }
+
+    const trigger = currentTargetElement(event);
+
+    /* v8 ignore next -- browser-dispatched listener events always provide the trigger as currentTarget */
+    if (!trigger) {
+      return;
+    }
+    const popover = getTriggerPopover(trigger);
+
+    if (!popover || popover.hidden) {
+      return;
+    }
+
+    event.preventDefault();
+    closePopover(trigger);
+    /* v8 ignore next -- focusability is browser/element dependent */
+    if (trigger instanceof HTMLElement) {
+      trigger.focus();
+    }
+  }
+
+  function handleDocumentPopoverClick(event: MouseEvent): void {
+    if (!openPopoverTrigger) {
+      return;
+    }
+
+    const target = eventTargetElement(event);
+
+    if (!target) {
+      return;
+    }
+
+    const popover = getTriggerPopover(openPopoverTrigger);
+
+    if (
+      openPopoverTrigger.contains(target) ||
+      (popover && popover.contains(target))
+    ) {
+      return;
+    }
+
+    closePopover(openPopoverTrigger);
+  }
+
+  function handleDocumentPopoverKeydown(event: KeyboardEvent): void {
+    if (event.key !== "Escape" || !openPopoverTrigger) {
+      return;
+    }
+
+    event.preventDefault();
+    closePopover(openPopoverTrigger);
+  }
+
+  function updateOpenPopoverPosition(): void {
+    if (!openPopoverTrigger) {
+      return;
+    }
+
+    const popover = getTriggerPopover(openPopoverTrigger);
+
+    /* v8 ignore next -- resize/scroll repositioning depends on current open state */
+    if (popover && !popover.hidden) {
+      positionPopover(openPopoverTrigger, popover);
+    }
+  }
+
+  function wirePopoverTrigger(trigger: Element): Element {
+    const popover = getTriggerPopover(trigger);
+
+    if (!popover) {
+      return trigger;
+    }
+
+    /* v8 ignore next -- target id resolution is already validated before this repair branch */
+    if (!popover.id && trigger.getAttribute("data-popover-target")) {
+      /* v8 ignore next -- a target resolved by selector already has the id used to resolve it */
+      popover.id = (trigger.getAttribute("data-popover-target") || "").replace(/^#/, "");
+    }
+
+    trigger.setAttribute("aria-haspopup", "dialog");
+    /* v8 ignore next -- initial aria-expanded mirrors caller-provided hidden state */
+    trigger.setAttribute("aria-expanded", popover.hidden ? "false" : "true");
+
+    if (popover.id) {
+      /* v8 ignore next -- aria-controls is only omitted for anonymous popover content */
+      trigger.setAttribute("aria-controls", popover.id);
+    }
+
+    if (!popover.hasAttribute("role")) {
+      popover.setAttribute("role", "dialog");
+    }
+
+    if (!wiredPopoverTriggers.has(trigger)) {
+      wiredPopoverTriggers.add(trigger);
+      listen(trigger, "click", handlePopoverClick);
+      listen(trigger, "keydown", handlePopoverKeydown as EventListener);
+    }
+
+    return trigger;
+  }
+
+  function setupPopover(target: LegacyTarget): Element | null {
+    const trigger = resolvePopoverTrigger(target);
+
+    return trigger ? wirePopoverTrigger(trigger) : null;
+  }
+
+  legacy.popover = {
+    setup(target) {
+      return setupPopover(target);
+    },
+    open(target) {
+      return openPopover(resolvePopoverTrigger(target));
+    },
+    close(target) {
+      const trigger = resolvePopoverTrigger(target);
+
+      if (trigger) {
+        return closePopover(trigger);
+      }
+
+      const popover = resolvePopover(target);
+
+      return popover && openPopoverTrigger && getTriggerPopover(openPopoverTrigger) === popover
+        ? closePopover(openPopoverTrigger)
+        : popover;
+    },
+    toggle(target) {
+      return togglePopover(resolvePopoverTrigger(target));
+    },
+  };
+
+  document.addEventListener("DOMContentLoaded", function () {
+    document.querySelectorAll(popoverTriggerSelector).forEach(setupPopover);
+  });
+
+  document.addEventListener("click", handleDocumentPopoverClick);
+  document.addEventListener("keydown", handleDocumentPopoverKeydown);
+  window.addEventListener("resize", updateOpenPopoverPosition);
+  window.addEventListener("scroll", updateOpenPopoverPosition, true);
+
+
+}

package/src/features/tabs.ts

@@ -0,0 +1,199 @@
+import { currentTargetElement, eventTargetElement, isElement, isLegacyCollection, listen } from "../internal";
+import type { LegacyRequiredApi, LegacyTarget } from "../internal";
+const wiredTabs = new WeakSet<Element>();
+
+export function installTabs(legacy: LegacyRequiredApi): void {
+  function resolveTabs(target: LegacyTarget): Element | null {
+    if (!target) {
+      return null;
+    }
+
+    if (isLegacyCollection(target)) {
+      return resolveTabs(target[0]);
+    }
+
+    if (typeof target === "string") {
+      return document.querySelector(target);
+    }
+
+    if (isElement(target)) {
+      if (target.matches("[data-tabs], .tabs")) {
+        return target;
+      }
+
+      return target.closest("[data-tabs], .tabs");
+    }
+
+    return null;
+  }
+
+  function getTabs(rootElement: Element): Element[] {
+    const tabList = Array.from(rootElement.children).find((element) =>
+      element.matches('[role="tablist"], .tabs-list')
+    );
+
+    if (!tabList) {
+      return [];
+    }
+
+    return Array.from(tabList.children).filter((element) =>
+      element.matches('[role="tab"]')
+    );
+  }
+
+  function getTabPanels(rootElement: Element): HTMLElement[] {
+    return Array.from(rootElement.children).filter((element) =>
+      element.matches('[role="tabpanel"]')
+    ) as HTMLElement[];
+  }
+
+  function getTabPanel(rootElement: Element, tab: Element): HTMLElement | null {
+    const panelId = tab.getAttribute("aria-controls");
+
+    if (!panelId) {
+      return null;
+    }
+
+    try {
+      return rootElement.querySelector("#" + CSS.escape(panelId));
+    } catch (error) {
+      return document.getElementById(panelId);
+    }
+  }
+
+  function selectTab(tab: Element | null, setFocus: boolean): Element | null {
+    const rootElement = resolveTabs(tab);
+
+    if (!rootElement || !tab) {
+      return null;
+    }
+
+    getTabs(rootElement).forEach((currentTab) => {
+      const selected = currentTab === tab;
+      const panel = getTabPanel(rootElement, currentTab);
+
+      currentTab.setAttribute("aria-selected", selected ? "true" : "false");
+      currentTab.setAttribute("tabindex", selected ? "0" : "-1");
+
+      if (panel) {
+        panel.hidden = !selected;
+      }
+    });
+
+    if (setFocus && tab instanceof HTMLElement) {
+      tab.focus();
+    }
+
+    return tab;
+  }
+
+  function selectTabByIndex(rootElement: Element, index: number, setFocus: boolean): Element | null {
+    const tabs = getTabs(rootElement);
+    const tab = tabs[index];
+
+    if (!tab) {
+      return null;
+    }
+
+    return selectTab(tab, setFocus);
+  }
+
+  function handleTabClick(event: MouseEvent): void {
+    const target = eventTargetElement(event);
+    /* v8 ignore next -- browser click events provide element targets for delegated tab clicks */
+    const tab = target ? target.closest('[role="tab"]') : null;
+
+    /* v8 ignore next -- delegated no-op branch for non-tab clicks */
+    if (tab) {
+      selectTab(tab, false);
+    }
+  }
+
+  function handleTabKeydown(event: KeyboardEvent): void {
+    const rootElement = resolveTabs(currentTargetElement(event));
+    const target = eventTargetElement(event);
+
+    if (!rootElement || !target) {
+      return;
+    }
+
+    const tabs = getTabs(rootElement);
+    const currentIndex = tabs.indexOf(target);
+
+    /* v8 ignore next -- tab keyboard listeners are scoped to tab controls in normal use */
+    if (currentIndex < 0) {
+      return;
+    }
+
+    let nextIndex = currentIndex;
+
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      nextIndex = (currentIndex + 1) % tabs.length;
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+    } else if (event.key === "Home") {
+      nextIndex = 0;
+    } else if (event.key === "End") {
+      nextIndex = tabs.length - 1;
+    } else {
+      return;
+    }
+
+    event.preventDefault();
+    selectTabByIndex(rootElement, nextIndex, true);
+  }
+
+  function setupTabs(target: LegacyTarget): Element | null {
+    const rootElement = resolveTabs(target);
+
+    if (!rootElement || wiredTabs.has(rootElement)) {
+      return rootElement;
+    }
+
+    wiredTabs.add(rootElement);
+    listen(rootElement, "click", handleTabClick as EventListener);
+    listen(rootElement, "keydown", handleTabKeydown as EventListener);
+
+    const tabs = getTabs(rootElement);
+    const selectedTab =
+      tabs.find((tab) => tab.getAttribute("aria-selected") === "true") ||
+      tabs[0];
+
+    getTabPanels(rootElement).forEach((panel) => {
+      if (!panel.hasAttribute("tabindex")) {
+        panel.setAttribute("tabindex", "0");
+      }
+    });
+
+    if (selectedTab) {
+      selectTab(selectedTab, false);
+    }
+
+    return rootElement;
+  }
+
+  legacy.tabs = {
+    setup(target) {
+      return setupTabs(target);
+    },
+    select(target, index) {
+      const rootElement = resolveTabs(target);
+
+      if (!rootElement) {
+        return null;
+      }
+
+      if (typeof index === "number") {
+        return selectTabByIndex(rootElement, index, false);
+      }
+
+      return selectTab(rootElement.querySelector(index), false);
+    },
+  };
+
+  document.addEventListener("DOMContentLoaded", function () {
+    document.querySelectorAll("[data-tabs], .tabs").forEach(setupTabs);
+  });
+
+
+}

package/src/features/theme.ts

@@ -0,0 +1,59 @@
+import type { LegacyRequiredApi, LegacyTheme } from "../internal";
+const legacyThemes: LegacyTheme[] = ["light", "dark"];
+const legacyThemeStorageKey = "legacy.css.theme";
+
+export function installTheme(legacy: LegacyRequiredApi): void {
+  function isLegacyTheme(theme: unknown): theme is LegacyTheme {
+    return typeof theme === "string" && legacyThemes.includes(theme as LegacyTheme);
+  }
+
+  function normalizeTheme(theme: unknown): LegacyTheme {
+    return isLegacyTheme(theme) ? theme : "light";
+  }
+
+  function getStoredTheme(): string | null {
+    try {
+      return window.localStorage.getItem(legacyThemeStorageKey);
+    } catch (error) {
+      return null;
+    }
+  }
+
+  function storeTheme(theme: LegacyTheme): void {
+    try {
+      window.localStorage.setItem(legacyThemeStorageKey, theme);
+    } catch (error) {
+      return;
+    }
+  }
+
+  function applyTheme(theme?: string | null, persist = true): LegacyTheme {
+    const nextTheme = normalizeTheme(theme);
+
+    document.documentElement.dataset.legacyTheme = nextTheme;
+
+    if (persist) {
+      storeTheme(nextTheme);
+    }
+
+    return nextTheme;
+  }
+
+  legacy.theme = {
+    apply(theme) {
+      return applyTheme(theme || getStoredTheme());
+    },
+    get() {
+      return normalizeTheme(document.documentElement.dataset.legacyTheme || getStoredTheme());
+    },
+    set(theme) {
+      return applyTheme(theme);
+    },
+  };
+
+  if (isLegacyTheme(getStoredTheme())) {
+    applyTheme(getStoredTheme(), false);
+  }
+
+
+}