@oscarpalmer/oui 0.15.0 → 0.17.0

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

@@ -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

@@ -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: color-mix(in oklab, var(--oui-blue-6), transparent 82.5%);
+}
+
+: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: color-mix(in oklab, var(--oui-blue-6), transparent 50%);
+}
+
+:where([oui-splitter-handle]:focus-visible)::after {
+  outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 50%);
+}
+
+: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/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);
@@ -128,7 +150,27 @@ 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;
+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);
@@ -126,7 +148,27 @@ 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;
+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);
@@ -95,7 +101,7 @@ function closeAbove(element) {
       floatable.deactivate(floatable$1, active, order);
     }
   }
-  order[index2].content.focus();
+  focus(order[index2].content);
 }
 function focus(content) {
   let target = focusable.getFocusable(content)[0];

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);
@@ -93,7 +99,7 @@ function closeAbove(element) {
       deactivate(floatable, active, order);
     }
   }
-  order[index2].content.focus();
+  focus(order[index2].content);
 }
 function focus(content) {
   let target = getFocusable(content)[0];