@oscarpalmer/oui 0.22.0 → 0.23.0

package/dist/css/popover.css

@@ -1,34 +1,30 @@
 
 :where([oui-popover-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);
-  --margin-left: 0;
-  --margin-top: 0;
-  margin: var(--margin-top, 0) 0 0 var(--margin-left, 0);
-  pointer-events: all !important;
+  --margin-bottom: 0.5em;
+  --margin-left: 0.5em;
+  --margin-right: 0.5em;
+  --margin-top: 0.5em;
+  inset-block: var(--margin-top) var(--margin-bottom);
+  inset-inline: var(--margin-left) var(--margin-right);
 }
-:where([oui-popover-content])[oui-position^=above] {
-  margin: 0 0 0.5em;
+:where([oui-popover-content])[oui-position$=bottom] {
+  --margin-bottom: 0;
 }
-:where([oui-popover-content])[oui-position^=below] {
-  margin: 0.5em 0 0;
+:where([oui-popover-content])[oui-position$=end] {
+  --margin-right: 0;
 }
-:where([oui-popover-content])[oui-position^=end] {
-  margin: 0 0 0 0.5em;
+:where([oui-popover-content])[oui-position$=start] {
+  --margin-left: 0;
 }
-:where([oui-popover-content])[oui-position^=start] {
-  margin: 0 0.5em 0 0;
+:where([oui-popover-content])[oui-position$=top] {
+  --margin-top: 0;
 }
 :where([oui-popover-content]) {
   padding: 1rem;
-  overscroll-behavior: contain;
   background-color: var(--oui-absolute);
+  border: none;
   border-radius: 0.25rem;
 }
-:where([oui-popover-content]):focus {
-  outline: none;
-}
-:where([oui-popover-content]) * {
-  overscroll-behavior: contain;
-}
 
 

package/dist/css/reset.css

@@ -367,6 +367,14 @@ summary) {
 /**
  * Attributes
  */
+:where([aria-busy=true i]) {
+  cursor: progress;
+}
+
+:where([aria-controls]) {
+  cursor: pointer;
+}
+
 :where([disabled], [aria-disabled=true i]) {
   cursor: default;
 }
@@ -375,12 +383,16 @@ summary) {
   display: none !important;
 }
 
-:where([aria-busy=true i]) {
-  cursor: progress;
+:where([popover]) {
+  display: none !important;
+  overflow: visible;
+  overscroll-behavior: contain;
+  border: none;
+  color: currentcolor;
 }
 
-:where([aria-controls]) {
-  cursor: pointer;
+:where([popover]:popover-open) {
+  display: inherit !important;
 }
 
 /**

package/dist/css/tooltip.css

@@ -27,62 +27,66 @@ var)) {
 
 :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);
-  --margin-left: 0;
-  --margin-top: 0;
-  margin: var(--margin-top, 0) 0 0 var(--margin-left, 0);
-  pointer-events: all !important;
+  --margin-bottom: 0.5em;
+  --margin-left: 0.5em;
+  --margin-right: 0.5em;
+  --margin-top: 0.5em;
+  inset-block: var(--margin-top) var(--margin-bottom);
+  inset-inline: var(--margin-left) var(--margin-right);
 }
-:where([oui-tooltip-content])[oui-position^=above] {
-  margin: 0 0 0.5em;
+:where([oui-tooltip-content])[oui-position$=bottom] {
+  --margin-bottom: 0;
 }
-:where([oui-tooltip-content])[oui-position^=below] {
-  margin: 0.5em 0 0;
+:where([oui-tooltip-content])[oui-position$=end] {
+  --margin-right: 0;
 }
-:where([oui-tooltip-content])[oui-position^=end] {
-  margin: 0 0 0 0.5em;
+:where([oui-tooltip-content])[oui-position$=start] {
+  --margin-left: 0;
 }
-:where([oui-tooltip-content])[oui-position^=start] {
-  margin: 0 0.5em 0 0;
+:where([oui-tooltip-content])[oui-position$=top] {
+  --margin-top: 0;
 }
 :where([oui-tooltip-content]) {
   max-width: 48ch;
   padding: 0.75em 1em;
+  overflow: visible;
   opacity: 0;
   background-color: var(--oui-absolute);
   border-radius: 0.25rem;
   font-size: 0.875rem;
   pointer-events: none;
-  transition: opacity 0.125s ease-in-out;
+  transition: opacity 0.125s ease-in-out 0s;
+  transition-behavior: allow-discrete;
 }
 :where([oui-tooltip-content])::after {
   content: "";
-  opacity: 0;
+  display: block;
   position: absolute;
 }
 :where([oui-tooltip-content])[oui-position^=above]::after, :where([oui-tooltip-content])[oui-position^=below]::after, :where([oui-tooltip-content])[oui-position^=bottom]::after, :where([oui-tooltip-content])[oui-position^=top]::after {
   width: 100%;
-  height: 0.5em;
+  height: 1em;
 }
 :where([oui-tooltip-content])[oui-position^=above]::after, :where([oui-tooltip-content])[oui-position^=top]::after {
-  inset: 100% 0 0;
+  inset: calc(100% - 0.5em) 0 0;
 }
 :where([oui-tooltip-content])[oui-position^=below]::after, :where([oui-tooltip-content])[oui-position^=bottom]::after {
   inset: -0.5em 0 0;
 }
 :where([oui-tooltip-content])[oui-position^=end]::after, :where([oui-tooltip-content])[oui-position^=left]::after, :where([oui-tooltip-content])[oui-position^=right]::after, :where([oui-tooltip-content])[oui-position^=start]::after {
-  width: 0.5em;
+  width: 1em;
   height: 100%;
 }
 :where([oui-tooltip-content])[oui-position^=end]::after, :where([oui-tooltip-content])[oui-position^=right]::after {
   inset: 0 0 0 -0.5em;
 }
 :where([oui-tooltip-content])[oui-position^=left]::after, :where([oui-tooltip-content])[oui-position^=start]::after {
-  inset: 0 0 0 100%;
+  inset: 0 0 0 calc(100% - 0.5em);
 }
 
 :where([oui-tooltip-content][oui-tooltip-content-active]) {
   opacity: 1;
-  pointer-events: auto;
+  pointer-events: all;
 }
 
 

package/dist/js/focus-trap/embedded.d.mts

@@ -18,9 +18,9 @@ type Options = {
   noescape: boolean;
 };
 declare function createFocusTrap(element: HTMLElement, options?: Options): FocusTrap;
+declare function removeFocusTrap(element: HTMLElement): void;
 declare const FOCUS_TRAP_SELECTOR = "oui-focus-trap";
 declare const FOCUS_TRAP_CONTAIN = "oui-focus-trap-contain";
 declare const FOCUS_TRAP_NOESCAPE = "oui-focus-trap-noescape";
-declare const FOCUSTRAPS_ALL: WeakMap<HTMLElement, FocusTrap>;
 //#endregion
-export { FOCUSTRAPS_ALL, FOCUS_TRAP_CONTAIN, FOCUS_TRAP_NOESCAPE, FOCUS_TRAP_SELECTOR, FocusTrap, createFocusTrap };
+export { FOCUS_TRAP_CONTAIN, FOCUS_TRAP_NOESCAPE, FOCUS_TRAP_SELECTOR, FocusTrap, createFocusTrap, removeFocusTrap };

package/dist/js/focus-trap/embedded.mjs

@@ -96,6 +96,10 @@ function onTab(event) {
 	if (index === -1 || elements.length === 0) tabToTrap(focusTrap, elements, element);
 	else tabToElement(focusTrap, elements, index, event.shiftKey ? -1 : 1);
 }
+function removeFocusTrap(element) {
+	FOCUSTRAPS_ALL.get(element)?.destroy();
+	FOCUSTRAPS_ALL.delete(element);
+}
 function setConnected(focusTrap, value) {
 	if (!focusTrap.embedded || focusTrap.connected === value) return;
 	focusTrap.connected = value;
@@ -149,4 +153,4 @@ on(document, "keydown", onKeydown, EVENT_OPTIONS);
 on(document, "mousedown", onPointerdown, EVENT_OPTIONS);
 on(document, "touchstart", onPointerdown, EVENT_OPTIONS);
 //#endregion
-export { FOCUSTRAPS_ALL, FOCUS_TRAP_CONTAIN, FOCUS_TRAP_NOESCAPE, FOCUS_TRAP_SELECTOR, FocusTrap, createFocusTrap };
+export { FOCUS_TRAP_CONTAIN, FOCUS_TRAP_NOESCAPE, FOCUS_TRAP_SELECTOR, FocusTrap, createFocusTrap, removeFocusTrap };

package/dist/js/focus-trap/standalone.mjs

@@ -1,10 +1,6 @@
 import { attributable } from "../internal/attributable.mjs";
-import { FOCUSTRAPS_ALL, FOCUS_TRAP_SELECTOR, createFocusTrap } from "./embedded.mjs";
+import { FOCUS_TRAP_SELECTOR, createFocusTrap, removeFocusTrap } from "./embedded.mjs";
 //#region src/js/focus-trap/standalone.ts
-function removeFocusTraps(element) {
-	FOCUSTRAPS_ALL.get(element)?.destroy();
-	FOCUSTRAPS_ALL.delete(element);
-}
-attributable(FOCUS_TRAP_SELECTOR, createFocusTrap, removeFocusTraps);
+attributable(FOCUS_TRAP_SELECTOR, createFocusTrap, removeFocusTrap);
 //#endregion
 export {};

package/dist/js/index.d.mts

@@ -1,47 +1,3 @@
-//#region src/js/popover.d.ts
-declare global {
-  interface HTMLElementTagNameMap {
-    'oui-popover': OuiPopoverElement;
-  }
-}
-declare class OuiPopoverElement extends HTMLElement {
-  #private;
-  constructor();
-  close(): void;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  hidePopover(): void;
-  open(): void;
-  showPopover(): void;
-  toggle(): void;
-  togglePopover(options?: boolean): boolean;
-}
-//#endregion
-//#region src/js/splitter.d.ts
-declare global {
-  interface HTMLElementTagNameMap {
-    [SELECTOR]: OuiSplitterElement;
-  }
-}
-declare class OuiSplitterElement extends HTMLElement {
-  #private;
-  static readonly observedAttributes: string[];
-  get max(): number;
-  set max(value: number);
-  get min(): number;
-  set min(value: number);
-  get size(): number;
-  set size(value: number);
-  get type(): string;
-  set type(value: string);
-  constructor();
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  attributeChangedCallback(name: string): void;
-}
-declare const SELECTOR = "oui-splitter";
-//#endregion
-//#region src/js/tooltip.d.ts
-declare function setTooltipDelay(open?: number, close?: number): void;
-//#endregion
-export { OuiPopoverElement, OuiSplitterElement, setTooltipDelay };
+import { OuiSplitterElement } from "./splitter.mjs";
+import { setTooltipDelay } from "./tooltip.mjs";
+export { OuiSplitterElement, setTooltipDelay };