@oscarpalmer/oui 0.14.0 → 0.16.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/button.css

@@ -67,9 +67,6 @@
 :where(.oui-button-tiny) {
   --oui-foreground-percentage: 12.5%;
   font-size: 0.75em;
-  font-weight: bold;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
 }
 :where(.oui-button:focus-visible) {
   --oui-outline-percentage: 75%;

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/splitter.css

@@ -0,0 +1,78 @@
+
+:where(oui-splitter) {
+  display: flex;
+  flex-flow: row nowrap;
+  flex: 1;
+}
+:where(oui-splitter > :first-child) {
+  flex: var(--oui-splitter-size, 0.5);
+}
+:where(oui-splitter > :last-child) {
+  flex: calc(1 - var(--oui-splitter-size, 0.5));
+}
+
+:where([oui-splitter-separator]) {
+  width: 0.25rem;
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 0.25rem;
+  position: relative;
+  transition: background 0.125s ease-in-out;
+}
+
+:where([oui-splitter-separator]:has([oui-splitter-handle]:focus)),
+:where([oui-splitter-separator]:has([oui-splitter-handle]:hover)),
+:where([oui-splitter-separator][oui-splitter-active]) {
+  background-color: rgba(0, 0, 255, 0.1);
+}
+
+:where([oui-splitter-handle]) {
+  width: 2rem;
+  height: 4rem;
+  padding: 0.875rem;
+  position: absolute;
+  inset: 50% auto auto 50%;
+  transform: translate3d(-50%, -50%, 0);
+  cursor: ew-resize;
+}
+:where([oui-splitter-handle]):focus {
+  outline: none;
+}
+:where([oui-splitter-handle])::after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  display: block;
+  background-color: rgba(0, 0, 0, 0.25);
+  outline: 0.25rem solid transparent;
+  outline-offset: 0.25rem;
+  border-radius: 0.25rem;
+  transition: background 0.125s ease-in-out, outline 0.125s ease-in-out;
+}
+
+:where([oui-splitter-handle]:focus)::after,
+:where([oui-splitter-handle]:hover)::after,
+:where([oui-splitter-handle][oui-splitter-active])::after {
+  background-color: rgba(0, 0, 255, 0.25);
+}
+
+:where([oui-splitter-handle]:focus-visible)::after {
+  outline-color: rgba(0, 0, 255, 0.25);
+}
+
+:where(oui-splitter[type=horizontal i],
+oui-splitter[oui-splitter-horizontal]) {
+  flex-flow: column nowrap;
+}
+:where(oui-splitter[type=horizontal i] [oui-splitter-separator],
+oui-splitter[oui-splitter-horizontal] [oui-splitter-separator]) {
+  width: 100%;
+  height: 0.25rem;
+}
+:where(oui-splitter[type=horizontal i] [oui-splitter-handle],
+oui-splitter[oui-splitter-horizontal] [oui-splitter-handle]) {
+  width: 4rem;
+  height: 2rem;
+  cursor: ns-resize;
+}
+
+

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);
@@ -115,7 +128,7 @@ function stop(floatable) {
   floatable.deactivate = void 0;
   floatable.frame = void 0;
 }
-const margin = Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10) / 4;
+const margin = Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10) / 2;
 exports.Floatable = Floatable;
 exports.activate = activate;
 exports.deactivate = deactivate;

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);
@@ -113,7 +126,7 @@ function stop(floatable) {
   floatable.deactivate = void 0;
   floatable.frame = void 0;
 }
-const margin = Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10) / 4;
+const margin = Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10) / 2;
 export {
   Floatable,
   activate,

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