@oscarpalmer/oui 0.13.0 → 0.14.0

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;

package/dist/css/value.css

@@ -0,0 +1 @@
+

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

@@ -2,144 +2,120 @@
 const is = require("@oscarpalmer/atoms/is");
 const event = require("@oscarpalmer/toretto/event");
 const attributable = require("./attributable.cjs");
+const floatable = require("./floatable.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;
+  attributes;
+  floatable;
+  constructor(anchor, content) {
+    this.attributes = content.attributes;
+    this.floatable = new floatable.Floatable(anchor, content.element);
+    initialize(this);
+  }
   destroy() {
-    deactivate(this);
+    floatable.deactivate(this.floatable, active);
+    reset(this.floatable.anchor, this.attributes);
     this.abortController.abort();
+    this.floatable.content.remove();
+    this.floatable.destroy();
     this.abortController = void 0;
-    this.activate = void 0;
-    this.deactivate = void 0;
-    this.element = void 0;
-    this.frame = void 0;
-    this.parent = void 0;
+    this.attributes = void 0;
+    this.floatable = void 0;
   }
 }
-function activate(tooltip) {
-  stop(tooltip);
-  if (tooltip.active) {
+function addTooltip(anchor) {
+  if (tooltips.has(anchor)) {
     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));
+  const content = getContent(anchor);
+  if (content != null) {
+    tooltips.set(anchor, new Tooltip(anchor, content));
   }
 }
-function deactivate(tooltip, time) {
-  stop(tooltip);
-  if (!tooltip.active) {
-    return;
+function getContent(anchor) {
+  const attributes = {
+    ariaDescribedby: anchor.getAttribute("aria-describedby"),
+    ariaLabelledBy: anchor.getAttribute("aria-labelledby")
+  };
+  const wrapper = getWrapper(anchor);
+  const labelledElements = getElements(attributes.ariaLabelledBy);
+  if (labelledElements.length > 0) {
+    anchor.setAttribute("aria-labelledby", wrapper.id);
+    for (const element of labelledElements) {
+      wrapper.append(element);
+    }
+    return {
+      attributes,
+      element: wrapper
+    };
   }
-  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;
+  const describedElements = getElements(attributes.ariaDescribedby);
+  if (describedElements.length > 0) {
+    anchor.setAttribute("aria-describedby", wrapper.id);
+    for (const element of describedElements) {
       wrapper.append(element);
     }
-    return wrapper;
+    return {
+      attributes,
+      element: wrapper
+    };
   }
-  let content = parent.getAttribute("aria-description");
+  let content = anchor.getAttribute("aria-label");
   if (is.isNullableOrWhitespace(content)) {
-    content = parent.getAttribute("aria-label");
-    if (is.isNullableOrWhitespace(content)) {
-      return;
-    }
+    content = anchor.getAttribute("aria-description");
+  }
+  if (is.isNullableOrWhitespace(content)) {
+    return;
   }
   const paragraph = document.createElement("p");
   paragraph.textContent = content;
   wrapper.append(paragraph);
-  return wrapper;
+  return {
+    attributes,
+    element: 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;
+function getElements(attribute) {
+  const ids = attribute?.split(/\s+/) ?? [];
+  const elements = [];
+  for (const id of ids) {
+    if (is.isNullableOrWhitespace(id)) {
+      continue;
+    }
+    const element = document.querySelector(`#${id}`);
+    if (element instanceof HTMLElement) {
+      const cloned = element.cloneNode(true);
+      cloned.hidden = false;
+      elements.push(cloned);
+    }
   }
-  return parent.top + (parent.height - content.height) / 2;
+  return elements;
 }
-function getWrapper(parent) {
+function getWrapper(anchor) {
   const wrapper = document.createElement("div");
   wrapper.setAttribute(`${selector}-content`, "");
-  wrapper.className = parent.getAttribute(`${selector}-class`) ?? "";
+  wrapper.className = anchor.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];
+  const { abortController, floatable: floatable$1 } = tooltip;
+  const { anchor, content } = floatable$1;
+  anchor.insertAdjacentElement("afterend", content);
+  const elements = [anchor, content];
   for (const element of elements) {
     for (const event$1 of activateEvents) {
       event.on(
         element,
         event$1,
         () => {
-          activate(tooltip);
+          floatable.activate(floatable$1, active, 250);
         },
         {
-          signal: tooltip.abortController.signal
+          signal: abortController.signal
         }
       );
     }
@@ -148,10 +124,10 @@ function initialize(tooltip) {
         element,
         event$1,
         () => {
-          deactivate(tooltip);
+          floatable.deactivate(floatable$1, active, 250);
         },
         {
-          signal: tooltip.abortController.signal
+          signal: abortController.signal
         }
       );
     }
@@ -161,43 +137,25 @@ 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);
+function reset(anchor, attributes) {
+  console.log("reset", anchor, attributes);
+  if (attributes.ariaDescribedby == null) {
+    anchor.removeAttribute("aria-describedby");
+  } else {
+    anchor.setAttribute("aria-describedby", attributes.ariaDescribedby);
   }
-  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);
+    for (const floatable$1 of active) {
+      floatable.deactivate(floatable$1, active);
     }
   }
 });