@oscarpalmer/oui 0.12.0 → 0.13.0

package/dist/css/badge.css

@@ -1,5 +1,8 @@
 /*! https://github.com/oscarpalmer/oui */
 
+.oui {
+  /* Colors*/
+}
 :where(.oui-pill, .oui-tag) {
   --oui-shadow-mixed: color-mix(
   	in oklab,
@@ -28,9 +31,12 @@
 :where(.oui-pill-tiny, .oui-tag-tiny) {
   color: color-mix(in oklab, var(--oui-foreground, var(--oui-gray-8)), transparent 12.5%);
   font-size: 0.75em;
-  font-weight: bold;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
+}
+:where(.oui-pill-tiny) {
+  padding: 0.25em 0.75em;
+}
+:where(.oui-tag-tiny) {
+  padding: 0.25em 0.5em;
 }
 :where(.oui-pill-blue, .oui-tag-blue) {
   --oui-background: var(--oui-blue-0);

package/dist/css/tooltip.css

@@ -0,0 +1,14 @@
+
+: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;
+  padding: 0.75em 1em;
+  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/attributable.cjs

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function attributable(attribute, add, remove) {
+  const observer = new MutationObserver((entries) => {
+    const { length } = entries;
+    for (let index = 0; index < length; index += 1) {
+      const entry = entries[index];
+      if (entry.type === "attributes" && entry.target instanceof HTMLElement) {
+        if (entry.target.hasAttribute(attribute)) {
+          handleAdded(attribute, [entry.target], add);
+        } else {
+          handleRemoved([entry.target], remove);
+        }
+      } else if (entry.type === "childList") {
+        handleAdded(attribute, entry.addedNodes, add);
+        handleRemoved(entry.removedNodes, remove);
+      }
+    }
+  });
+  observer.observe(document, {
+    attributeFilter: [attribute],
+    attributes: true,
+    childList: true,
+    subtree: true
+  });
+  requestAnimationFrame(() => {
+    handleAdded(attribute, document.querySelectorAll(`[${attribute}]`), add);
+  });
+}
+function handleAdded(attribute, nodes, add) {
+  const elements = [...nodes].filter(
+    (node) => node instanceof HTMLElement
+  );
+  const { length } = elements;
+  for (let index = 0; index < length; index += 1) {
+    const element = elements[index];
+    if (element.hasAttribute(attribute)) {
+      add(element);
+    }
+  }
+}
+function handleRemoved(nodes, remove) {
+  const elements = [...nodes].filter(
+    (node) => node instanceof HTMLElement
+  );
+  const { length } = elements;
+  for (let index = 0; index < length; index += 1) {
+    remove(elements[index]);
+  }
+}
+exports.attributable = attributable;

package/dist/js/attributable.js

@@ -0,0 +1,51 @@
+function attributable(attribute, add, remove) {
+  const observer = new MutationObserver((entries) => {
+    const { length } = entries;
+    for (let index = 0; index < length; index += 1) {
+      const entry = entries[index];
+      if (entry.type === "attributes" && entry.target instanceof HTMLElement) {
+        if (entry.target.hasAttribute(attribute)) {
+          handleAdded(attribute, [entry.target], add);
+        } else {
+          handleRemoved([entry.target], remove);
+        }
+      } else if (entry.type === "childList") {
+        handleAdded(attribute, entry.addedNodes, add);
+        handleRemoved(entry.removedNodes, remove);
+      }
+    }
+  });
+  observer.observe(document, {
+    attributeFilter: [attribute],
+    attributes: true,
+    childList: true,
+    subtree: true
+  });
+  requestAnimationFrame(() => {
+    handleAdded(attribute, document.querySelectorAll(`[${attribute}]`), add);
+  });
+}
+function handleAdded(attribute, nodes, add) {
+  const elements = [...nodes].filter(
+    (node) => node instanceof HTMLElement
+  );
+  const { length } = elements;
+  for (let index = 0; index < length; index += 1) {
+    const element = elements[index];
+    if (element.hasAttribute(attribute)) {
+      add(element);
+    }
+  }
+}
+function handleRemoved(nodes, remove) {
+  const elements = [...nodes].filter(
+    (node) => node instanceof HTMLElement
+  );
+  const { length } = elements;
+  for (let index = 0; index < length; index += 1) {
+    remove(elements[index]);
+  }
+}
+export {
+  attributable
+};

package/dist/js/focus-trap.cjs

@@ -1,18 +1,16 @@
 "use strict";
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 const number = require("@oscarpalmer/atoms/number");
 const event = require("@oscarpalmer/toretto/event");
 const find = require("@oscarpalmer/toretto/find");
 const focusable = require("@oscarpalmer/toretto/focusable");
+const attributable = require("./attributable.cjs");
 class FocusTrap {
   constructor(element) {
-    __publicField(this, "active", true);
     this.element = element;
     element.setAttribute("aria-modal", "true");
     element.setAttribute("tabindex", "-1");
   }
+  active = true;
   activate() {
     this.element.setAttribute("aria-modal", "true");
     this.active = true;
@@ -27,20 +25,12 @@ class FocusTrap {
     inactive.add(this);
   }
 }
-function addFocusTraps(nodes) {
-  const elements = [...nodes].filter(
-    (node) => node instanceof HTMLElement
-  );
-  const { length } = elements;
-  for (let index = 0; index < length; index += 1) {
-    const element = elements[index];
-    if (element.hasAttribute(selector)) {
-      focusTraps.set(element, new FocusTrap(element));
-    }
+function addFocusTrap(element) {
+  if (!focusTraps.has(element)) {
+    focusTraps.set(element, new FocusTrap(element));
   }
 }
 function onEscape(event2) {
-  var _a;
   if (event2.key !== "Escape") {
     return;
   }
@@ -48,7 +38,7 @@ function onEscape(event2) {
     document.activeElement,
     `[${selector}]`
   );
-  (_a = focusTraps.get(element)) == null ? void 0 : _a.inactivate();
+  focusTraps.get(element)?.inactivate();
 }
 function onFocusOut() {
   if (inactive.size === 0) {
@@ -67,7 +57,6 @@ function onFocusOut() {
   });
 }
 function onTab(event2) {
-  var _a;
   if (event2.key !== "Tab") {
     return;
   }
@@ -75,7 +64,7 @@ function onTab(event2) {
     event2.target,
     `[${selector}]`
   );
-  if (!(((_a = focusTraps.get(element)) == null ? void 0 : _a.active) ?? false)) {
+  if (!(focusTraps.get(element)?.active ?? false)) {
     return;
   }
   event2.preventDefault();
@@ -95,53 +84,21 @@ function onTab(event2) {
     elements[next].focus();
   }
 }
-function removeFocusTraps(nodes) {
-  var _a;
-  const elements = [...nodes].filter(
-    (node) => node instanceof HTMLElement
-  );
-  const { length } = elements;
-  for (let index = 0; index < length; index += 1) {
-    const element = elements[index];
-    (_a = focusTraps.get(element)) == null ? void 0 : _a.destroy();
-    focusTraps.delete(element);
-  }
+function removeFocusTraps(element) {
+  focusTraps.get(element)?.destroy();
+  focusTraps.delete(element);
 }
 const focusTraps = /* @__PURE__ */ new WeakMap();
 const inactive = /* @__PURE__ */ new Set();
-const observer = new MutationObserver((entries) => {
-  const { length } = entries;
-  for (let index = 0; index < length; index += 1) {
-    const entry = entries[index];
-    if (entry.type === "attributes" && entry.target instanceof HTMLElement) {
-      if (entry.target.hasAttribute(selector)) {
-        addFocusTraps([entry.target]);
-      } else {
-        removeFocusTraps([entry.target]);
-      }
-    } else if (entry.type === "childList") {
-      addFocusTraps(entry.addedNodes);
-      removeFocusTraps(entry.removedNodes);
-    }
-  }
-});
 const selector = "oui-focus-trap";
-observer.observe(document, {
-  attributeFilter: [selector],
-  attributes: true,
-  childList: true,
-  subtree: true
+attributable.attributable(selector, addFocusTrap, removeFocusTraps);
+event.on(document, "focusout", onFocusOut, {
+  capture: true
 });
-requestAnimationFrame(() => {
-  addFocusTraps(document.querySelectorAll(`[${selector}]`));
-  event.on(document, "focusout", onFocusOut, {
-    capture: true
-  });
-  event.on(document, "keydown", onTab, {
-    capture: true,
-    passive: false
-  });
-  event.on(document, "keydown", onEscape, {
-    passive: false
-  });
+event.on(document, "keydown", onTab, {
+  capture: true,
+  passive: false
+});
+event.on(document, "keydown", onEscape, {
+  passive: false
 });

package/dist/js/focus-trap.js

@@ -1,17 +1,15 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { clamp } from "@oscarpalmer/atoms/number";
 import { on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
 import { getFocusable } from "@oscarpalmer/toretto/focusable";
+import { attributable } from "./attributable.js";
 class FocusTrap {
   constructor(element) {
-    __publicField(this, "active", true);
     this.element = element;
     element.setAttribute("aria-modal", "true");
     element.setAttribute("tabindex", "-1");
   }
+  active = true;
   activate() {
     this.element.setAttribute("aria-modal", "true");
     this.active = true;
@@ -26,20 +24,12 @@ class FocusTrap {
     inactive.add(this);
   }
 }
-function addFocusTraps(nodes) {
-  const elements = [...nodes].filter(
-    (node) => node instanceof HTMLElement
-  );
-  const { length } = elements;
-  for (let index = 0; index < length; index += 1) {
-    const element = elements[index];
-    if (element.hasAttribute(selector)) {
-      focusTraps.set(element, new FocusTrap(element));
-    }
+function addFocusTrap(element) {
+  if (!focusTraps.has(element)) {
+    focusTraps.set(element, new FocusTrap(element));
   }
 }
 function onEscape(event) {
-  var _a;
   if (event.key !== "Escape") {
     return;
   }
@@ -47,7 +37,7 @@ function onEscape(event) {
     document.activeElement,
     `[${selector}]`
   );
-  (_a = focusTraps.get(element)) == null ? void 0 : _a.inactivate();
+  focusTraps.get(element)?.inactivate();
 }
 function onFocusOut() {
   if (inactive.size === 0) {
@@ -66,7 +56,6 @@ function onFocusOut() {
   });
 }
 function onTab(event) {
-  var _a;
   if (event.key !== "Tab") {
     return;
   }
@@ -74,7 +63,7 @@ function onTab(event) {
     event.target,
     `[${selector}]`
   );
-  if (!(((_a = focusTraps.get(element)) == null ? void 0 : _a.active) ?? false)) {
+  if (!(focusTraps.get(element)?.active ?? false)) {
     return;
   }
   event.preventDefault();
@@ -94,53 +83,21 @@ function onTab(event) {
     elements[next].focus();
   }
 }
-function removeFocusTraps(nodes) {
-  var _a;
-  const elements = [...nodes].filter(
-    (node) => node instanceof HTMLElement
-  );
-  const { length } = elements;
-  for (let index = 0; index < length; index += 1) {
-    const element = elements[index];
-    (_a = focusTraps.get(element)) == null ? void 0 : _a.destroy();
-    focusTraps.delete(element);
-  }
+function removeFocusTraps(element) {
+  focusTraps.get(element)?.destroy();
+  focusTraps.delete(element);
 }
 const focusTraps = /* @__PURE__ */ new WeakMap();
 const inactive = /* @__PURE__ */ new Set();
-const observer = new MutationObserver((entries) => {
-  const { length } = entries;
-  for (let index = 0; index < length; index += 1) {
-    const entry = entries[index];
-    if (entry.type === "attributes" && entry.target instanceof HTMLElement) {
-      if (entry.target.hasAttribute(selector)) {
-        addFocusTraps([entry.target]);
-      } else {
-        removeFocusTraps([entry.target]);
-      }
-    } else if (entry.type === "childList") {
-      addFocusTraps(entry.addedNodes);
-      removeFocusTraps(entry.removedNodes);
-    }
-  }
-});
 const selector = "oui-focus-trap";
-observer.observe(document, {
-  attributeFilter: [selector],
-  attributes: true,
-  childList: true,
-  subtree: true
+attributable(selector, addFocusTrap, removeFocusTraps);
+on(document, "focusout", onFocusOut, {
+  capture: true
 });
-requestAnimationFrame(() => {
-  addFocusTraps(document.querySelectorAll(`[${selector}]`));
-  on(document, "focusout", onFocusOut, {
-    capture: true
-  });
-  on(document, "keydown", onTab, {
-    capture: true,
-    passive: false
-  });
-  on(document, "keydown", onEscape, {
-    passive: false
-  });
+on(document, "keydown", onTab, {
+  capture: true,
+  passive: false
+});
+on(document, "keydown", onEscape, {
+  passive: false
 });

package/dist/js/tooltip.cjs

@@ -0,0 +1,203 @@
+"use strict";
+const is = require("@oscarpalmer/atoms/is");
+const event = require("@oscarpalmer/toretto/event");
+const attributable = require("./attributable.cjs");
+class Tooltip {
+  constructor(parent) {
+    this.parent = parent;
+    this.element = getContent(parent);
+    if (this.element != null) {
+      parent.insertAdjacentElement("afterend", this.element);
+      initialize(this);
+    }
+  }
+  abortController = new AbortController();
+  activate;
+  active = false;
+  deactivate;
+  element;
+  frame;
+  destroy() {
+    deactivate(this);
+    this.abortController.abort();
+    this.abortController = void 0;
+    this.activate = void 0;
+    this.deactivate = void 0;
+    this.element = void 0;
+    this.frame = void 0;
+    this.parent = void 0;
+  }
+}
+function activate(tooltip) {
+  stop(tooltip);
+  if (tooltip.active) {
+    return;
+  }
+  tooltip.activate = +setTimeout(() => {
+    tooltip.active = true;
+    active.add(tooltip);
+    document.body.append(tooltip.element);
+    tooltip.element.hidden = false;
+    update(tooltip);
+  }, 250);
+}
+function addTooltip(element) {
+  if (!tooltips.has(element)) {
+    tooltips.set(element, new Tooltip(element));
+  }
+}
+function deactivate(tooltip, time) {
+  stop(tooltip);
+  if (!tooltip.active) {
+    return;
+  }
+  tooltip.deactivate = +setTimeout(() => {
+    tooltip.active = false;
+    active.delete(tooltip);
+    tooltip.element.hidden = true;
+    tooltip.parent.insertAdjacentElement("afterend", tooltip.element);
+  }, time ?? 250);
+}
+function getContent(parent) {
+  const wrapper = getWrapper(parent);
+  const ids = (parent.getAttribute("aria-describedby") ?? "").split(/\s+/);
+  parent.setAttribute("aria-describedby", wrapper.id);
+  const elements = ids.map(
+    (id) => is.isNullableOrWhitespace(id) ? void 0 : document.querySelector(`#${id}`)
+  ).filter((element) => element instanceof HTMLElement);
+  if (elements.length > 0) {
+    for (const element of elements) {
+      element.hidden = false;
+      wrapper.append(element);
+    }
+    return wrapper;
+  }
+  let content = parent.getAttribute("aria-description");
+  if (is.isNullableOrWhitespace(content)) {
+    content = parent.getAttribute("aria-label");
+    if (is.isNullableOrWhitespace(content)) {
+      return;
+    }
+  }
+  const paragraph = document.createElement("p");
+  paragraph.textContent = content;
+  wrapper.append(paragraph);
+  return wrapper;
+}
+function getTop(parent, content) {
+  let top = parent.top - content.height - margin;
+  if (top - margin >= 0) {
+    return top;
+  }
+  top = parent.bottom + margin;
+  if (top + content.height + margin <= window.innerHeight) {
+    return top;
+  }
+  return parent.top + (parent.height - content.height) / 2;
+}
+function getWrapper(parent) {
+  const wrapper = document.createElement("div");
+  wrapper.setAttribute(`${selector}-content`, "");
+  wrapper.className = parent.getAttribute(`${selector}-class`) ?? "";
+  wrapper.hidden = true;
+  wrapper.id = `${selector}-${++index}`;
+  wrapper.role = "tooltip";
+  wrapper.tabIndex = -1;
+  return wrapper;
+}
+function getX(parent, content) {
+  if (content.width + 2 * margin >= window.innerWidth) {
+    return {
+      left: margin,
+      right: margin
+    };
+  }
+  const left = parent.left + (parent.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 initialize(tooltip) {
+  const elements = [tooltip.parent, tooltip.element];
+  for (const element of elements) {
+    for (const event$1 of activateEvents) {
+      event.on(
+        element,
+        event$1,
+        () => {
+          activate(tooltip);
+        },
+        {
+          signal: tooltip.abortController.signal
+        }
+      );
+    }
+    for (const event$1 of deactivateEvents) {
+      event.on(
+        element,
+        event$1,
+        () => {
+          deactivate(tooltip);
+        },
+        {
+          signal: tooltip.abortController.signal
+        }
+      );
+    }
+  }
+}
+function removeTooltip(element) {
+  tooltips.get(element)?.destroy();
+  tooltips.delete(element);
+}
+function stop(tooltip) {
+  if (tooltip.frame != null) {
+    cancelAnimationFrame(tooltip.frame);
+    tooltip.frame = void 0;
+  }
+  if (tooltip.activate != null) {
+    clearTimeout(tooltip.activate);
+    tooltip.activate = void 0;
+  }
+  if (tooltip.deactivate != null) {
+    clearTimeout(tooltip.deactivate);
+    tooltip.deactivate = void 0;
+  }
+}
+function update(tooltip) {
+  function run() {
+    const parentRect = tooltip.parent.getBoundingClientRect();
+    const contentRect = tooltip.element.getBoundingClientRect();
+    const top = getTop(parentRect, contentRect);
+    const { left, right } = getX(parentRect, contentRect);
+    tooltip.element.style.inset = `${top}px ${right == null ? "auto" : `${right}px`} auto ${left == null ? "auto" : `${left}px`}`;
+    tooltip.frame = requestAnimationFrame(run);
+  }
+  tooltip.frame = requestAnimationFrame(run);
+}
+const active = /* @__PURE__ */ new Set();
+const activateEvents = ["focus", "mouseenter", "touchstart"];
+const deactivateEvents = ["blur", "mouseleave"];
+const margin = Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10) / 4;
+const selector = "oui-tooltip";
+const tooltips = /* @__PURE__ */ new WeakMap();
+let index = 0;
+attributable.attributable(selector, addTooltip, removeTooltip);
+event.on(document, "keydown", (event2) => {
+  if (event2.key === "Escape") {
+    for (const tooltip of active) {
+      deactivate(tooltip, 0);
+    }
+  }
+});