@oscarpalmer/oui 0.12.0 → 0.14.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,23 @@
+
+: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;
+  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/css/value.css

@@ -0,0 +1 @@
+

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/floatable.cjs

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+class Floatable {
+  constructor(anchor, content) {
+    this.anchor = anchor;
+    this.content = 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, time) {
+  stop(floatable);
+  if (floatable.active) {
+    return;
+  }
+  if (time == null || time === 0) {
+    onActivate(floatable, active);
+  } else {
+    floatable.activate = +setTimeout(() => {
+      onActivate(floatable, active);
+    }, time);
+  }
+}
+function deactivate(floatable, active, time) {
+  stop(floatable);
+  if (!floatable.active) {
+    return;
+  }
+  if (time == null || time === 0) {
+    onDeactivate(floatable, active);
+  } else {
+    floatable.deactivate = +setTimeout(() => {
+      onDeactivate(floatable, active);
+    }, 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) {
+  floatable.active = true;
+  active.add(floatable);
+  document.body.append(floatable.content);
+  floatable.content.hidden = false;
+  update(floatable);
+}
+function onDeactivate(floatable, active) {
+  floatable.active = false;
+  active.delete(floatable);
+  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 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,121 @@
+class Floatable {
+  constructor(anchor, content) {
+    this.anchor = anchor;
+    this.content = 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, time) {
+  stop(floatable);
+  if (floatable.active) {
+    return;
+  }
+  if (time == null || time === 0) {
+    onActivate(floatable, active);
+  } else {
+    floatable.activate = +setTimeout(() => {
+      onActivate(floatable, active);
+    }, time);
+  }
+}
+function deactivate(floatable, active, time) {
+  stop(floatable);
+  if (!floatable.active) {
+    return;
+  }
+  if (time == null || time === 0) {
+    onDeactivate(floatable, active);
+  } else {
+    floatable.deactivate = +setTimeout(() => {
+      onDeactivate(floatable, active);
+    }, 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) {
+  floatable.active = true;
+  active.add(floatable);
+  document.body.append(floatable.content);
+  floatable.content.hidden = false;
+  update(floatable);
+}
+function onDeactivate(floatable, active) {
+  floatable.active = false;
+  active.delete(floatable);
+  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 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.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
 });