@oscarpalmer/oui 0.13.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

@@ -1,4 +1,13 @@
 
+:where([oui-tooltip]:is(abbr, b, cite, dfn, code, em, i, kbd, mark, q, samp, small, span, strong, sub, sup, time, var)) {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+  -webkit-text-decoration-skip: ink;
+  text-decoration-skip-ink: auto;
+  text-underline-offset: 0.25em;
+  cursor: help;
+}
+
 :where([oui-tooltip-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);
   max-width: 48ch;
@@ -6,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/css/value.css

@@ -0,0 +1 @@
+

package/dist/js/floatable.cjs

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+class Floatable {
+  constructor(anchor, content) {
+    this.anchor = anchor;
+    this.content = content;
+    setStyles(content);
+  }
+  activate;
+  active = false;
+  deactivate;
+  frame;
+  destroy() {
+    this.activate = void 0;
+    this.deactivate = void 0;
+    this.frame = void 0;
+    this.anchor = void 0;
+    this.content = void 0;
+  }
+}
+function activate(floatable, active, order, time) {
+  stop(floatable);
+  if (floatable.active) {
+    return;
+  }
+  if (time == null || time === 0) {
+    onActivate(floatable, active, order);
+  } else {
+    floatable.activate = +setTimeout(() => {
+      onActivate(floatable, active, order);
+    }, time);
+  }
+}
+function deactivate(floatable, active, order, time) {
+  stop(floatable);
+  if (!floatable.active) {
+    return;
+  }
+  if (time == null || time === 0) {
+    onDeactivate(floatable, active, order);
+  } else {
+    floatable.deactivate = +setTimeout(() => {
+      onDeactivate(floatable, active, order);
+    }, time);
+  }
+}
+function getX(anchor, content) {
+  if (content.width + 2 * margin >= window.innerWidth) {
+    return {
+      left: margin,
+      right: margin
+    };
+  }
+  const left = anchor.left + (anchor.width - content.width) / 2;
+  const right = window.innerWidth - margin;
+  if (left < margin) {
+    return {
+      left: margin
+    };
+  }
+  if (left + content.width > right) {
+    return {
+      right: margin
+    };
+  }
+  return {
+    left
+  };
+}
+function getY(anchor, content) {
+  let top = anchor.top - content.height - margin;
+  if (top - margin >= 0) {
+    return top;
+  }
+  top = anchor.bottom + margin;
+  if (top + content.height + margin <= window.innerHeight) {
+    return top;
+  }
+  return anchor.top + (anchor.height - content.height) / 2;
+}
+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, 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);
+}
+function update(floatable) {
+  function run() {
+    const anchor = floatable.anchor.getBoundingClientRect();
+    const content = floatable.content.getBoundingClientRect();
+    const { left, right } = getX(anchor, content);
+    const top = getY(anchor, content);
+    floatable.content.style.inset = `${top}px ${right == null ? "auto" : `${right}px`} auto ${left == null ? "auto" : `${left}px`}`;
+    floatable.frame = requestAnimationFrame(run);
+  }
+  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);
+  }
+  if (floatable.activate != null) {
+    clearTimeout(floatable.activate);
+  }
+  if (floatable.deactivate != null) {
+    clearTimeout(floatable.deactivate);
+  }
+  floatable.activate = void 0;
+  floatable.deactivate = void 0;
+  floatable.frame = void 0;
+}
+const margin = Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10) / 4;
+exports.Floatable = Floatable;
+exports.activate = activate;
+exports.deactivate = deactivate;

package/dist/js/floatable.js

@@ -0,0 +1,134 @@
+class Floatable {
+  constructor(anchor, content) {
+    this.anchor = anchor;
+    this.content = content;
+    setStyles(content);
+  }
+  activate;
+  active = false;
+  deactivate;
+  frame;
+  destroy() {
+    this.activate = void 0;
+    this.deactivate = void 0;
+    this.frame = void 0;
+    this.anchor = void 0;
+    this.content = void 0;
+  }
+}
+function activate(floatable, active, order, time) {
+  stop(floatable);
+  if (floatable.active) {
+    return;
+  }
+  if (time == null || time === 0) {
+    onActivate(floatable, active, order);
+  } else {
+    floatable.activate = +setTimeout(() => {
+      onActivate(floatable, active, order);
+    }, time);
+  }
+}
+function deactivate(floatable, active, order, time) {
+  stop(floatable);
+  if (!floatable.active) {
+    return;
+  }
+  if (time == null || time === 0) {
+    onDeactivate(floatable, active, order);
+  } else {
+    floatable.deactivate = +setTimeout(() => {
+      onDeactivate(floatable, active, order);
+    }, time);
+  }
+}
+function getX(anchor, content) {
+  if (content.width + 2 * margin >= window.innerWidth) {
+    return {
+      left: margin,
+      right: margin
+    };
+  }
+  const left = anchor.left + (anchor.width - content.width) / 2;
+  const right = window.innerWidth - margin;
+  if (left < margin) {
+    return {
+      left: margin
+    };
+  }
+  if (left + content.width > right) {
+    return {
+      right: margin
+    };
+  }
+  return {
+    left
+  };
+}
+function getY(anchor, content) {
+  let top = anchor.top - content.height - margin;
+  if (top - margin >= 0) {
+    return top;
+  }
+  top = anchor.bottom + margin;
+  if (top + content.height + margin <= window.innerHeight) {
+    return top;
+  }
+  return anchor.top + (anchor.height - content.height) / 2;
+}
+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, 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);
+}
+function update(floatable) {
+  function run() {
+    const anchor = floatable.anchor.getBoundingClientRect();
+    const content = floatable.content.getBoundingClientRect();
+    const { left, right } = getX(anchor, content);
+    const top = getY(anchor, content);
+    floatable.content.style.inset = `${top}px ${right == null ? "auto" : `${right}px`} auto ${left == null ? "auto" : `${left}px`}`;
+    floatable.frame = requestAnimationFrame(run);
+  }
+  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);
+  }
+  if (floatable.activate != null) {
+    clearTimeout(floatable.activate);
+  }
+  if (floatable.deactivate != null) {
+    clearTimeout(floatable.deactivate);
+  }
+  floatable.activate = void 0;
+  floatable.deactivate = void 0;
+  floatable.frame = void 0;
+}
+const margin = Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10) / 4;
+export {
+  Floatable,
+  activate,
+  deactivate
+};

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
+};