@oscarpalmer/oui 0.16.0 → 0.17.0

package/dist/css/popover.css

@@ -5,5 +5,8 @@
   background-color: var(--oui-absolute);
   border-radius: 0.5rem;
 }
+:where([oui-popover-content]):focus {
+  outline: none;
+}
 
 

package/dist/css/splitter.css

@@ -22,7 +22,7 @@
 :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);
+  background-color: color-mix(in oklab, var(--oui-blue-6), transparent 82.5%);
 }
 
 :where([oui-splitter-handle]) {
@@ -52,11 +52,11 @@
 :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);
+  background-color: color-mix(in oklab, var(--oui-blue-6), transparent 50%);
 }
 
 :where([oui-splitter-handle]:focus-visible)::after {
-  outline-color: rgba(0, 0, 255, 0.25);
+  outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 50%);
 }
 
 :where(oui-splitter[type=horizontal i],

package/dist/js/floatable.cjs

@@ -1,9 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 class Floatable {
-  constructor(anchor, content) {
+  constructor(anchor, content, attribute, position, preferAbove) {
     this.anchor = anchor;
     this.content = content;
+    this.attribute = attribute;
+    this.position = position;
+    this.preferAbove = preferAbove;
     setStyles(content);
   }
   activate;
@@ -44,37 +47,52 @@ function deactivate(floatable, active, order, time) {
     }, 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;
+function getX(anchor, content, position) {
+  if (position.endsWith("-end")) {
+    const end = anchor.right - content.width;
+    return end - margin < 0 ? margin : end;
+  }
+  if (position.endsWith("-start")) {
+    const start = anchor.left;
+    return start + content.width + margin > window.innerWidth ? window.innerWidth - content.width - margin : start;
+  }
+  if (position.startsWith("end")) {
+    return anchor.right + margin;
+  }
+  if (position.startsWith("start")) {
+    return anchor.left - content.width - margin;
   }
-  top = anchor.bottom + margin;
-  if (top + content.height + margin <= window.innerHeight) {
-    return top;
+  if (position.startsWith("horizontal")) {
+    if (anchor.right + content.width + margin <= window.innerWidth) {
+      return anchor.right + margin;
+    }
+    return anchor.left - content.width - margin;
+  }
+  return anchor.left + (anchor.width - content.width) / 2;
+}
+function getY(anchor, content, position, preferAbove) {
+  if (position.startsWith("above")) {
+    return anchor.top - content.height - margin;
+  }
+  if (position.startsWith("below")) {
+    return anchor.bottom + margin;
+  }
+  if (position.endsWith("bottom")) {
+    const bottom = anchor.bottom - content.height;
+    return bottom + margin < 0 ? margin : bottom;
+  }
+  if (position.endsWith("top")) {
+    const top = anchor.top;
+    return top + content.height + margin > window.innerHeight ? window.innerHeight - content.height - margin : top;
+  }
+  if (position.startsWith("vertical")) {
+    if (preferAbove && anchor.top - content.height - margin >= 0) {
+      return anchor.top - content.height - margin;
+    }
+    if (anchor.bottom + content.height + margin <= document.body.clientHeight) {
+      return anchor.bottom + margin;
+    }
+    return anchor.top - content.height - margin;
   }
   return anchor.top + (anchor.height - content.height) / 2;
 }
@@ -99,12 +117,16 @@ function onDeactivate(floatable, active, order) {
   floatable.anchor.insertAdjacentElement("afterend", floatable.content);
 }
 function update(floatable) {
+  let position = floatable.anchor.getAttribute(floatable.attribute)?.trim() ?? floatable.position;
+  if (!positions.has(position)) {
+    position = floatable.position;
+  }
   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`}`;
+    const left = getX(anchor, content, position);
+    const top = getY(anchor, content, position, floatable.preferAbove);
+    floatable.content.style.inset = `${top}px auto auto ${left}px`;
     floatable.frame = requestAnimationFrame(run);
   }
   floatable.frame = requestAnimationFrame(run);
@@ -129,6 +151,26 @@ function stop(floatable) {
   floatable.frame = void 0;
 }
 const margin = Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10) / 2;
+const positions = /* @__PURE__ */ new Set([
+  "above",
+  "above-end",
+  "above-start",
+  "below",
+  "below-end",
+  "below-start",
+  "end",
+  "end-bottom",
+  "end-top",
+  "horizontal",
+  "horizontal-bottom",
+  "horizontal-top",
+  "start",
+  "start-bottom",
+  "start-top",
+  "vertical",
+  "vertical-end",
+  "vertical-start"
+]);
 exports.Floatable = Floatable;
 exports.activate = activate;
 exports.deactivate = deactivate;

package/dist/js/floatable.js

@@ -1,7 +1,10 @@
 class Floatable {
-  constructor(anchor, content) {
+  constructor(anchor, content, attribute, position, preferAbove) {
     this.anchor = anchor;
     this.content = content;
+    this.attribute = attribute;
+    this.position = position;
+    this.preferAbove = preferAbove;
     setStyles(content);
   }
   activate;
@@ -42,37 +45,52 @@ function deactivate(floatable, active, order, time) {
     }, 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;
+function getX(anchor, content, position) {
+  if (position.endsWith("-end")) {
+    const end = anchor.right - content.width;
+    return end - margin < 0 ? margin : end;
+  }
+  if (position.endsWith("-start")) {
+    const start = anchor.left;
+    return start + content.width + margin > window.innerWidth ? window.innerWidth - content.width - margin : start;
+  }
+  if (position.startsWith("end")) {
+    return anchor.right + margin;
+  }
+  if (position.startsWith("start")) {
+    return anchor.left - content.width - margin;
   }
-  top = anchor.bottom + margin;
-  if (top + content.height + margin <= window.innerHeight) {
-    return top;
+  if (position.startsWith("horizontal")) {
+    if (anchor.right + content.width + margin <= window.innerWidth) {
+      return anchor.right + margin;
+    }
+    return anchor.left - content.width - margin;
+  }
+  return anchor.left + (anchor.width - content.width) / 2;
+}
+function getY(anchor, content, position, preferAbove) {
+  if (position.startsWith("above")) {
+    return anchor.top - content.height - margin;
+  }
+  if (position.startsWith("below")) {
+    return anchor.bottom + margin;
+  }
+  if (position.endsWith("bottom")) {
+    const bottom = anchor.bottom - content.height;
+    return bottom + margin < 0 ? margin : bottom;
+  }
+  if (position.endsWith("top")) {
+    const top = anchor.top;
+    return top + content.height + margin > window.innerHeight ? window.innerHeight - content.height - margin : top;
+  }
+  if (position.startsWith("vertical")) {
+    if (preferAbove && anchor.top - content.height - margin >= 0) {
+      return anchor.top - content.height - margin;
+    }
+    if (anchor.bottom + content.height + margin <= document.body.clientHeight) {
+      return anchor.bottom + margin;
+    }
+    return anchor.top - content.height - margin;
   }
   return anchor.top + (anchor.height - content.height) / 2;
 }
@@ -97,12 +115,16 @@ function onDeactivate(floatable, active, order) {
   floatable.anchor.insertAdjacentElement("afterend", floatable.content);
 }
 function update(floatable) {
+  let position = floatable.anchor.getAttribute(floatable.attribute)?.trim() ?? floatable.position;
+  if (!positions.has(position)) {
+    position = floatable.position;
+  }
   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`}`;
+    const left = getX(anchor, content, position);
+    const top = getY(anchor, content, position, floatable.preferAbove);
+    floatable.content.style.inset = `${top}px auto auto ${left}px`;
     floatable.frame = requestAnimationFrame(run);
   }
   floatable.frame = requestAnimationFrame(run);
@@ -127,6 +149,26 @@ function stop(floatable) {
   floatable.frame = void 0;
 }
 const margin = Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10) / 2;
+const positions = /* @__PURE__ */ new Set([
+  "above",
+  "above-end",
+  "above-start",
+  "below",
+  "below-end",
+  "below-start",
+  "end",
+  "end-bottom",
+  "end-top",
+  "horizontal",
+  "horizontal-bottom",
+  "horizontal-top",
+  "start",
+  "start-bottom",
+  "start-top",
+  "vertical",
+  "vertical-end",
+  "vertical-start"
+]);
 export {
   Floatable,
   activate,

package/dist/js/popover.cjs

@@ -34,7 +34,13 @@ class OuiPopoverElement extends HTMLElement {
     }
     toggle2.setAttribute("aria-controls", content.id);
     toggle2.setAttribute("aria-haspopup", "dialog");
-    this.#floatable = new floatable.Floatable(toggle2, content);
+    this.#floatable = new floatable.Floatable(
+      toggle2,
+      content,
+      "position",
+      "below-start",
+      false
+    );
     this.#focusTrap = focusTrap_embedded.createFocusTrap(content);
     mapped.set(toggle2, this.#floatable);
     mapped.set(content, this.#floatable);

package/dist/js/popover.js

@@ -32,7 +32,13 @@ class OuiPopoverElement extends HTMLElement {
     }
     toggle2.setAttribute("aria-controls", content.id);
     toggle2.setAttribute("aria-haspopup", "dialog");
-    this.#floatable = new Floatable(toggle2, content);
+    this.#floatable = new Floatable(
+      toggle2,
+      content,
+      "position",
+      "below-start",
+      false
+    );
     this.#focusTrap = createFocusTrap(content);
     mapped.set(toggle2, this.#floatable);
     mapped.set(content, this.#floatable);

package/dist/js/splitter.cjs

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const is = require("@oscarpalmer/atoms/is");
+const math = require("@oscarpalmer/atoms/math");
 const number = require("@oscarpalmer/atoms/number");
 const event = require("@oscarpalmer/toretto/event");
 const find = require("@oscarpalmer/toretto/find");
@@ -26,49 +28,59 @@ class OuiSplitterElement extends HTMLElement {
     }
   }
 }
+let index = 0;
 class Splitter {
   constructor(element, panels) {
     this.element = element;
     this.panels = panels;
+    if (is.isNullableOrWhitespace(element.id)) {
+      element.id = `oui_splitter_${++index}`;
+    }
+    this.values = getValues(element);
     this.handle = createHandle();
     this.rectangle = element.getBoundingClientRect();
-    this.separator = createSeparator();
+    this.separator = createSeparator(this);
     this.separator.append(this.handle);
     panels[0].insertAdjacentElement("afterend", this.separator);
     mapped.set(element, this);
     mapped.set(this.handle, this);
-    setSize(this, this.flex.value);
+    setSize(this, this.values.now.current);
     this.types = getTypes(this);
     if (this.types.horizontal) {
       this.element.setAttribute("oui-splitter-horizontal", "");
     }
+    setAriaOrientation(this);
+    setAriaValue(this);
   }
-  flex = {
-    previous: 0.5,
-    value: 0.5
-  };
   handle;
   rectangle;
   separator;
   types;
+  values;
 }
 function createHandle() {
   const handle = document.createElement("span");
-  handle.tabIndex = 0;
-  handle.setAttribute("aria-label", "Resize panels");
+  handle.setAttribute("aria-hidden", "true");
   handle.setAttribute("oui-splitter-handle", "");
   return handle;
 }
-function createSeparator() {
+function createSeparator(splitter2) {
   const separator = document.createElement("div");
+  separator.role = "separator";
+  separator.tabIndex = 0;
+  separator.setAttribute("aria-controls", splitter2.element.id);
+  separator.setAttribute("aria-label", "Resize panels");
   separator.setAttribute("oui-splitter-separator", "");
   return separator;
 }
-function getFlex(splitter2, value) {
+function getContained(min, value, max) {
+  return math.round(number.clamp(value, min, max), 6);
+}
+function getSize(splitter2, value) {
   const { height, left, top, width } = splitter2.rectangle;
   const offset = value - (splitter2.types.horizontal ? top : left);
   const fraction = offset / (splitter2.types.horizontal ? height : width);
-  return number.clamp(fraction, 0.1, 0.9);
+  return getContained(splitter2.values.min, fraction, splitter2.values.max);
 }
 function getTypes(splitter2, width, height) {
   const type = splitter2.element.getAttribute("type")?.trim() ?? "";
@@ -89,14 +101,43 @@ function getTypes(splitter2, width, height) {
     horizontal: false
   };
 }
+function getValue(element, name, defaultValue) {
+  const value = element.getAttribute(name);
+  if (is.isNullableOrWhitespace(value)) {
+    return defaultValue;
+  }
+  const parsed = Number.parseFloat(value);
+  if (Number.isNaN(parsed)) {
+    return defaultValue;
+  }
+  return parsed < 0 ? defaultValue : parsed > 1 ? parsed / 100 : parsed;
+}
+function getValues(element) {
+  const values = {
+    max: getValue(element, "max", 0.9),
+    min: getValue(element, "min", 0.1),
+    now: {
+      current: 0.5,
+      previous: 0.5
+    }
+  };
+  const value = getContained(
+    values.min,
+    getValue(element, "size", values.now.current),
+    values.max
+  );
+  values.now.current = value;
+  values.now.previous = value;
+  return values;
+}
 function onEnd(reset) {
   if (splitter != null) {
     splitter.handle.removeAttribute("oui-splitter-active");
     splitter.separator.removeAttribute("oui-splitter-active");
     if (reset) {
-      setSize(splitter, splitter.flex.previous);
+      setSize(splitter, splitter.values.now.previous);
     } else {
-      splitter.flex.previous = splitter.flex.value;
+      splitter.values.now.previous = splitter.values.now.current;
     }
   }
   splitter = void 0;
@@ -131,11 +172,11 @@ function onMousemove(event$1) {
   }
   const position = event.getPosition(event$1);
   if (position != null) {
-    splitter.flex.value = getFlex(
+    splitter.values.now.current = getSize(
       splitter,
       splitter.types.horizontal ? position.y : position.x
     );
-    setSize(splitter, splitter.flex.value);
+    setSize(splitter, splitter.values.now.current);
   }
 }
 function onMouseup() {
@@ -154,14 +195,18 @@ function onNavigate(event2) {
     return;
   }
   if (absoluteKeys.has(event2.key)) {
-    setSize(splitter2, event2.key === "End" ? 0.9 : 0.1, true);
+    setSize(
+      splitter2,
+      event2.key === "End" ? splitter2.values.max : splitter2.values.min,
+      true
+    );
     return;
   }
   if (splitter2.types.horizontal && !horizontalKeys.has(event2.key) || !splitter2.types.horizontal && !verticalKeys.has(event2.key)) {
     return;
   }
   const modifier = negativeKeys.has(event2.key) ? -1 : 1;
-  setSize(splitter2, splitter2.flex.value + modifier * 0.05, true);
+  setSize(splitter2, splitter2.values.now.current + modifier * 0.05, true);
 }
 function onObservation(entries) {
   if (frame != null) {
@@ -183,16 +228,32 @@ function onObservation(entries) {
       } else {
         splitter2.element.removeAttribute("oui-splitter-horizontal");
       }
+      setAriaOrientation(splitter2);
     }
     frame = void 0;
   });
 }
+function setAriaOrientation(splitter2) {
+  splitter2.separator.setAttribute(
+    "aria-orientation",
+    splitter2.types.horizontal ? "horizontal" : "vertical"
+  );
+}
+function setAriaValue(splitter2) {
+  splitter2.separator.setAttribute("aria-valuemax", String(splitter2.values.max));
+  splitter2.separator.setAttribute("aria-valuemin", String(splitter2.values.min));
+  splitter2.separator.setAttribute(
+    "aria-valuenow",
+    String(splitter2.values.now.current)
+  );
+}
 function setSize(splitter2, size, previous) {
-  splitter2.flex.value = size;
+  splitter2.values.now.current = size;
   if (previous) {
-    splitter2.flex.previous = size;
+    splitter2.values.now.previous = size;
   }
   splitter2.element.style.setProperty("--oui-splitter-size", `${size}`);
+  setAriaValue(splitter2);
 }
 const absoluteKeys = /* @__PURE__ */ new Set(["End", "Home"]);
 const horizontalKeys = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp"]);