@oscarpalmer/oui 0.14.0 → 0.15.0

package/README.md

@@ -1,5 +1,7 @@
 # Oui
 
+[![npm](https://badge.fury.io/js/@oscarpalmer%2Foui.svg)](https://www.npmjs.com/package/@oscarpalmer/oui)
+
 _Oui_ _(Oscar UI)_ is a collection of styles, components, and related thingamjigs for designing websites and applications, which I often use to build prototypes and proof-of-concepts for myself and at work.
 
 ## License

package/dist/css/popover.css

@@ -0,0 +1,9 @@
+
+:where([oui-popover-content]) {
+  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.05), 0 4px 8px -2px rgba(0, 0, 0, 0.05), 0 8px 16px -4px rgba(0, 0, 0, 0.05), 0 16px 32px -8px rgba(0, 0, 0, 0.05), 0 32px 64px -16px rgba(0, 0, 0, 0.05), 0 64px 128px -32px rgba(0, 0, 0, 0.05);
+  padding: 1rem;
+  background-color: var(--oui-absolute);
+  border-radius: 0.5rem;
+}
+
+

package/dist/css/tooltip.css

@@ -15,9 +15,6 @@
   background-color: var(--oui-absolute);
   border-radius: 0.25rem;
   font-size: 0.875rem;
-  position: fixed;
-  inset: 0 auto auto 0;
-  z-index: 10;
 }
 
 

package/dist/js/floatable.cjs

@@ -4,6 +4,7 @@ class Floatable {
   constructor(anchor, content) {
     this.anchor = anchor;
     this.content = content;
+    setStyles(content);
   }
   activate;
   active = false;
@@ -17,29 +18,29 @@ class Floatable {
     this.content = void 0;
   }
 }
-function activate(floatable, active, time) {
+function activate(floatable, active, order, time) {
   stop(floatable);
   if (floatable.active) {
     return;
   }
   if (time == null || time === 0) {
-    onActivate(floatable, active);
+    onActivate(floatable, active, order);
   } else {
     floatable.activate = +setTimeout(() => {
-      onActivate(floatable, active);
+      onActivate(floatable, active, order);
     }, time);
   }
 }
-function deactivate(floatable, active, time) {
+function deactivate(floatable, active, order, time) {
   stop(floatable);
   if (!floatable.active) {
     return;
   }
   if (time == null || time === 0) {
-    onDeactivate(floatable, active);
+    onDeactivate(floatable, active, order);
   } else {
     floatable.deactivate = +setTimeout(() => {
-      onDeactivate(floatable, active);
+      onDeactivate(floatable, active, order);
     }, time);
   }
 }
@@ -77,16 +78,23 @@ function getY(anchor, content) {
   }
   return anchor.top + (anchor.height - content.height) / 2;
 }
-function onActivate(floatable, active) {
+function onActivate(floatable, active, order) {
   floatable.active = true;
   active.add(floatable);
+  if (order != null) {
+    order.push(floatable);
+  }
   document.body.append(floatable.content);
   floatable.content.hidden = false;
   update(floatable);
 }
-function onDeactivate(floatable, active) {
+function onDeactivate(floatable, active, order) {
   floatable.active = false;
   active.delete(floatable);
+  const index = order?.indexOf(floatable) ?? -1;
+  if (index > -1) {
+    order?.splice(index, 1);
+  }
   floatable.content.hidden = true;
   floatable.anchor.insertAdjacentElement("afterend", floatable.content);
 }
@@ -101,6 +109,11 @@ function update(floatable) {
   }
   floatable.frame = requestAnimationFrame(run);
 }
+function setStyles(content) {
+  content.style.position = "fixed";
+  content.style.inset = "0 auto auto 0";
+  content.style.zIndex = "10";
+}
 function stop(floatable) {
   if (floatable.frame != null) {
     cancelAnimationFrame(floatable.frame);

package/dist/js/floatable.js

@@ -2,6 +2,7 @@ class Floatable {
   constructor(anchor, content) {
     this.anchor = anchor;
     this.content = content;
+    setStyles(content);
   }
   activate;
   active = false;
@@ -15,29 +16,29 @@ class Floatable {
     this.content = void 0;
   }
 }
-function activate(floatable, active, time) {
+function activate(floatable, active, order, time) {
   stop(floatable);
   if (floatable.active) {
     return;
   }
   if (time == null || time === 0) {
-    onActivate(floatable, active);
+    onActivate(floatable, active, order);
   } else {
     floatable.activate = +setTimeout(() => {
-      onActivate(floatable, active);
+      onActivate(floatable, active, order);
     }, time);
   }
 }
-function deactivate(floatable, active, time) {
+function deactivate(floatable, active, order, time) {
   stop(floatable);
   if (!floatable.active) {
     return;
   }
   if (time == null || time === 0) {
-    onDeactivate(floatable, active);
+    onDeactivate(floatable, active, order);
   } else {
     floatable.deactivate = +setTimeout(() => {
-      onDeactivate(floatable, active);
+      onDeactivate(floatable, active, order);
     }, time);
   }
 }
@@ -75,16 +76,23 @@ function getY(anchor, content) {
   }
   return anchor.top + (anchor.height - content.height) / 2;
 }
-function onActivate(floatable, active) {
+function onActivate(floatable, active, order) {
   floatable.active = true;
   active.add(floatable);
+  if (order != null) {
+    order.push(floatable);
+  }
   document.body.append(floatable.content);
   floatable.content.hidden = false;
   update(floatable);
 }
-function onDeactivate(floatable, active) {
+function onDeactivate(floatable, active, order) {
   floatable.active = false;
   active.delete(floatable);
+  const index = order?.indexOf(floatable) ?? -1;
+  if (index > -1) {
+    order?.splice(index, 1);
+  }
   floatable.content.hidden = true;
   floatable.anchor.insertAdjacentElement("afterend", floatable.content);
 }
@@ -99,6 +107,11 @@ function update(floatable) {
   }
   floatable.frame = requestAnimationFrame(run);
 }
+function setStyles(content) {
+  content.style.position = "fixed";
+  content.style.inset = "0 auto auto 0";
+  content.style.zIndex = "10";
+}
 function stop(floatable) {
   if (floatable.frame != null) {
     cancelAnimationFrame(floatable.frame);

package/dist/js/focus-trap/embedded.cjs

@@ -0,0 +1,150 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const number = require("@oscarpalmer/atoms/number");
+const event = require("@oscarpalmer/toretto/event");
+const find = require("@oscarpalmer/toretto/find");
+const focusable = require("@oscarpalmer/toretto/focusable");
+class FocusTrap {
+  constructor(element) {
+    this.element = element;
+    element.setAttribute("aria-modal", "true");
+    element.setAttribute("tabindex", "-1");
+  }
+  active = true;
+  destroy() {
+    this.element = void 0;
+  }
+  disable() {
+    if (this.active && !this.element.hasAttribute(`${selector}-noescape`)) {
+      setDisabled(this, true);
+    }
+  }
+  enable() {
+    if (!this.active) {
+      setDisabled(this, false);
+    }
+  }
+}
+function createFocusTrap(element) {
+  let focusTrap = focusTraps.get(element);
+  if (focusTrap == null) {
+    focusTrap = new FocusTrap(element);
+    focusTraps.set(element, focusTrap);
+  }
+  return focusTrap;
+}
+function onEscape(event2) {
+  focusTraps.get(
+    find.findAncestor(event2.target, `[${selector}]`)
+  )?.disable();
+}
+function onFocusIn(event2) {
+  lastTarget = find.findAncestor(event2.target, `[${selector}]`) == null ? void 0 : event2.target;
+}
+function onKeydown(event2) {
+  switch (event2.key) {
+    case "Escape":
+      onEscape(event2);
+      break;
+    case "Tab":
+      onTab(event2);
+      break;
+    default:
+      return;
+  }
+}
+function onPointerdown(event2) {
+  const lastFocusTrap = find.findAncestor(
+    lastTarget,
+    `[${selector}]`
+  );
+  const nextFocusTrap = find.findAncestor(
+    event2.target,
+    `[${selector}]`
+  );
+  if (lastFocusTrap != null && nextFocusTrap !== lastFocusTrap) {
+    event2.preventDefault();
+    lastTarget?.focus();
+  }
+  if (disabled.size === 0) {
+    return;
+  }
+  for (const focusTrap of disabled) {
+    if (focusTrap.element !== nextFocusTrap) {
+      focusTrap.enable();
+      return;
+    }
+  }
+}
+function onTab(event2) {
+  const element = find.findAncestor(
+    event2.target,
+    `[${selector}]`
+  );
+  const focusTrap = focusTraps.get(element);
+  if (focusTrap == null) {
+    return;
+  }
+  if (focusTrap.active) {
+    event2.preventDefault();
+  }
+  const elements = focusable.getFocusable(element);
+  const index = elements.indexOf(event2.target);
+  if (index === -1 || elements.length === 0) {
+    tabToTrap(focusTrap, elements, element);
+  } else {
+    tabToElement(event2, focusTrap, elements, index);
+  }
+}
+function setDisabled(focusTrap, value) {
+  focusTrap.element.setAttribute("aria-modal", String(!value));
+  focusTrap.active = !value;
+  if (value) {
+    disabled.add(focusTrap);
+  } else {
+    disabled.delete(focusTrap);
+  }
+}
+function tabToElement(event2, focusTrap, elements, index) {
+  const next = number.clamp(
+    index + (event2.shiftKey ? -1 : 1),
+    0,
+    elements.length - 1,
+    true
+  );
+  if (!focusTrap.active) {
+    if (index === length - 1 && next === 0 || index === 0 && next === length - 1) {
+      lastTarget = void 0;
+      focusTrap.enable();
+    }
+    return;
+  }
+  elements[next].focus();
+  lastTarget = elements[next];
+}
+function tabToTrap(focusTrap, elements, element) {
+  if (focusTrap.active) {
+    const next = length === 0 ? element : elements[0];
+    next.focus();
+    lastTarget = next;
+  } else {
+    lastTarget = void 0;
+    focusTrap.enable();
+  }
+}
+const disabled = /* @__PURE__ */ new Set();
+const eventOptions = {
+  capture: true,
+  passive: false
+};
+const focusTraps = /* @__PURE__ */ new WeakMap();
+let lastTarget;
+const selector = "oui-focus-trap";
+event.on(document, "focusin", onFocusIn, eventOptions);
+event.on(document, "keydown", onKeydown, eventOptions);
+event.on(document, "mousedown", onPointerdown, eventOptions);
+event.on(document, "touchstart", onPointerdown, eventOptions);
+exports.FocusTrap = FocusTrap;
+exports.createFocusTrap = createFocusTrap;
+exports.focusTraps = focusTraps;
+exports.selector = selector;

package/dist/js/focus-trap/embedded.js

@@ -0,0 +1,150 @@
+import { clamp } from "@oscarpalmer/atoms/number";
+import { on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+import { getFocusable } from "@oscarpalmer/toretto/focusable";
+class FocusTrap {
+  constructor(element) {
+    this.element = element;
+    element.setAttribute("aria-modal", "true");
+    element.setAttribute("tabindex", "-1");
+  }
+  active = true;
+  destroy() {
+    this.element = void 0;
+  }
+  disable() {
+    if (this.active && !this.element.hasAttribute(`${selector}-noescape`)) {
+      setDisabled(this, true);
+    }
+  }
+  enable() {
+    if (!this.active) {
+      setDisabled(this, false);
+    }
+  }
+}
+function createFocusTrap(element) {
+  let focusTrap = focusTraps.get(element);
+  if (focusTrap == null) {
+    focusTrap = new FocusTrap(element);
+    focusTraps.set(element, focusTrap);
+  }
+  return focusTrap;
+}
+function onEscape(event) {
+  focusTraps.get(
+    findAncestor(event.target, `[${selector}]`)
+  )?.disable();
+}
+function onFocusIn(event) {
+  lastTarget = findAncestor(event.target, `[${selector}]`) == null ? void 0 : event.target;
+}
+function onKeydown(event) {
+  switch (event.key) {
+    case "Escape":
+      onEscape(event);
+      break;
+    case "Tab":
+      onTab(event);
+      break;
+    default:
+      return;
+  }
+}
+function onPointerdown(event) {
+  const lastFocusTrap = findAncestor(
+    lastTarget,
+    `[${selector}]`
+  );
+  const nextFocusTrap = findAncestor(
+    event.target,
+    `[${selector}]`
+  );
+  if (lastFocusTrap != null && nextFocusTrap !== lastFocusTrap) {
+    event.preventDefault();
+    lastTarget?.focus();
+  }
+  if (disabled.size === 0) {
+    return;
+  }
+  for (const focusTrap of disabled) {
+    if (focusTrap.element !== nextFocusTrap) {
+      focusTrap.enable();
+      return;
+    }
+  }
+}
+function onTab(event) {
+  const element = findAncestor(
+    event.target,
+    `[${selector}]`
+  );
+  const focusTrap = focusTraps.get(element);
+  if (focusTrap == null) {
+    return;
+  }
+  if (focusTrap.active) {
+    event.preventDefault();
+  }
+  const elements = getFocusable(element);
+  const index = elements.indexOf(event.target);
+  if (index === -1 || elements.length === 0) {
+    tabToTrap(focusTrap, elements, element);
+  } else {
+    tabToElement(event, focusTrap, elements, index);
+  }
+}
+function setDisabled(focusTrap, value) {
+  focusTrap.element.setAttribute("aria-modal", String(!value));
+  focusTrap.active = !value;
+  if (value) {
+    disabled.add(focusTrap);
+  } else {
+    disabled.delete(focusTrap);
+  }
+}
+function tabToElement(event, focusTrap, elements, index) {
+  const next = clamp(
+    index + (event.shiftKey ? -1 : 1),
+    0,
+    elements.length - 1,
+    true
+  );
+  if (!focusTrap.active) {
+    if (index === length - 1 && next === 0 || index === 0 && next === length - 1) {
+      lastTarget = void 0;
+      focusTrap.enable();
+    }
+    return;
+  }
+  elements[next].focus();
+  lastTarget = elements[next];
+}
+function tabToTrap(focusTrap, elements, element) {
+  if (focusTrap.active) {
+    const next = length === 0 ? element : elements[0];
+    next.focus();
+    lastTarget = next;
+  } else {
+    lastTarget = void 0;
+    focusTrap.enable();
+  }
+}
+const disabled = /* @__PURE__ */ new Set();
+const eventOptions = {
+  capture: true,
+  passive: false
+};
+const focusTraps = /* @__PURE__ */ new WeakMap();
+let lastTarget;
+const selector = "oui-focus-trap";
+on(document, "focusin", onFocusIn, eventOptions);
+on(document, "keydown", onKeydown, eventOptions);
+on(document, "mousedown", onPointerdown, eventOptions);
+on(document, "touchstart", onPointerdown, eventOptions);
+export {
+  FocusTrap,
+  createFocusTrap,
+  focusTraps,
+  selector
+};

package/dist/js/focus-trap/standalone.cjs

@@ -0,0 +1,8 @@
+"use strict";
+const attributable = require("../attributable.cjs");
+const focusTrap_embedded = require("./embedded.cjs");
+function removeFocusTraps(element) {
+  focusTrap_embedded.focusTraps.get(element)?.destroy();
+  focusTrap_embedded.focusTraps.delete(element);
+}
+attributable.attributable(focusTrap_embedded.selector, focusTrap_embedded.createFocusTrap, removeFocusTraps);

package/dist/js/focus-trap/standalone.js

@@ -0,0 +1,7 @@
+import { attributable } from "../attributable.js";
+import { createFocusTrap, selector, focusTraps } from "./embedded.js";
+function removeFocusTraps(element) {
+  focusTraps.get(element)?.destroy();
+  focusTraps.delete(element);
+}
+attributable(selector, createFocusTrap, removeFocusTraps);

package/dist/js/index.cjs

@@ -1,2 +1,6 @@
 "use strict";
-require("./focus-trap.cjs");
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("./focus-trap/standalone.cjs");
+const popover = require("./popover.cjs");
+require("./tooltip.cjs");
+exports.OuiPopoverElement = popover.OuiPopoverElement;

package/dist/js/index.js

@@ -1 +1,6 @@
-import "./focus-trap.js";
+import "./focus-trap/standalone.js";
+import { OuiPopoverElement } from "./popover.js";
+import "./tooltip.js";
+export {
+  OuiPopoverElement
+};

package/dist/js/popover.cjs

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const is = require("@oscarpalmer/atoms/is");
+const event = require("@oscarpalmer/toretto/event");
+const find = require("@oscarpalmer/toretto/find");
+const focusable = require("@oscarpalmer/toretto/focusable");
+const floatable = require("./floatable.cjs");
+const focusTrap_embedded = require("./focus-trap/embedded.cjs");
+const mapped = /* @__PURE__ */ new Map();
+let index = 0;
+class OuiPopoverElement extends HTMLElement {
+  #floatable;
+  #focusTrap;
+  constructor() {
+    super();
+    const content = this.querySelector(":scope > [oui-popover-content]");
+    const toggle2 = this.querySelector(":scope > [oui-popover-toggle]");
+    if (!(content instanceof HTMLElement)) {
+      throw new Error(
+        "A oui-popover must have a direct child element with the [oui-popover-content]-attribute"
+      );
+    }
+    if (!(toggle2 instanceof HTMLButtonElement)) {
+      throw new Error(
+        "A oui-popover must have a direct child element with the [oui-popover-toggle]-attribute and be a button"
+      );
+    }
+    content.hidden = true;
+    content.setAttribute("role", "dialog");
+    content.setAttribute("oui-focus-trap", "");
+    content.setAttribute("oui-focus-trap-noescape", "");
+    if (is.isNullableOrWhitespace(content.id)) {
+      content.setAttribute("id", `oui-popover-content-${++index}`);
+    }
+    toggle2.setAttribute("aria-controls", content.id);
+    toggle2.setAttribute("aria-haspopup", "dialog");
+    this.#floatable = new floatable.Floatable(toggle2, content);
+    this.#focusTrap = focusTrap_embedded.createFocusTrap(content);
+    mapped.set(toggle2, this.#floatable);
+    mapped.set(content, this.#floatable);
+  }
+  close() {
+    this.hidePopover();
+  }
+  hidePopover() {
+    if (this.#floatable.active) {
+      closeAbove(this.#floatable.content);
+      floatable.deactivate(this.#floatable, active, order);
+      this.#floatable.anchor.focus();
+    }
+  }
+  open() {
+    this.showPopover();
+  }
+  showPopover() {
+    if (!this.#floatable.active) {
+      toggle(this.#floatable.anchor);
+    }
+  }
+  toggle() {
+    this.togglePopover();
+  }
+  togglePopover(options) {
+    if (typeof options === "boolean") {
+      if (options === true) {
+        this.showPopover();
+      } else {
+        this.hidePopover();
+      }
+      return options;
+    }
+    if (this.#floatable.active) {
+      this.hidePopover();
+      return false;
+    }
+    this.showPopover();
+    return true;
+  }
+}
+function closeAll() {
+  for (const floatable$1 of active) {
+    floatable.deactivate(floatable$1, active, order);
+  }
+}
+function closeAbove(element) {
+  const index2 = order.findIndex(
+    (floatable2) => floatable2.anchor === element || floatable2.content === element
+  );
+  if (index2 === -1 || index2 === order.length - 1) {
+    return;
+  }
+  while (index2 < order.length - 1) {
+    const floatable$1 = order.pop();
+    if (floatable$1 != null) {
+      floatable.deactivate(floatable$1, active, order);
+    }
+  }
+  order[index2].content.focus();
+}
+function focus(content) {
+  let target = focusable.getFocusable(content)[0];
+  if (!(target instanceof HTMLElement)) {
+    target = content;
+  }
+  requestAnimationFrame(() => {
+    target.focus();
+  });
+}
+function onClick(event2) {
+  const related = find.findAncestor(
+    event2.target,
+    "[oui-popover-toggle], [oui-popover-content]"
+  );
+  if (!(related instanceof HTMLElement)) {
+    closeAll();
+  } else if (related.hasAttribute("oui-popover-content")) {
+    closeAbove(related);
+  } else {
+    toggle(related);
+  }
+}
+function onKeydown(event2) {
+  if (event2.key !== "Escape" || order.length === 0) {
+    return;
+  }
+  const related = find.findAncestor(event2.target, "[oui-popover-content]");
+  if (!(related instanceof HTMLElement)) {
+    return;
+  }
+  closeAbove(related);
+  const floatable$1 = mapped.get(related);
+  if (floatable$1 != null) {
+    floatable.deactivate(floatable$1, active, order);
+    floatable$1.anchor.focus();
+  }
+}
+function toggle(anchor) {
+  const content = find.findAncestor(anchor, "[oui-popover-content]");
+  if (content instanceof HTMLElement) {
+    closeAbove(content);
+  } else {
+    closeAll();
+  }
+  const floatable$1 = mapped.get(anchor);
+  if (floatable$1 == null) {
+    return;
+  }
+  if (floatable$1.active) {
+    floatable.deactivate(floatable$1, active, order);
+  } else {
+    floatable.activate(floatable$1, active, order);
+    focus(floatable$1.content);
+  }
+}
+customElements.define("oui-popover", OuiPopoverElement);
+event.on(document, "click", onClick);
+event.on(document, "keydown", onKeydown);
+const active = /* @__PURE__ */ new Set();
+const order = [];
+exports.OuiPopoverElement = OuiPopoverElement;