@oscarpalmer/oui 0.20.0 → 0.22.0

package/dist/css/popover.css

@@ -6,23 +6,23 @@
   margin: var(--margin-top, 0) 0 0 var(--margin-left, 0);
   pointer-events: all !important;
 }
-:where([oui-popover-content])[position^=above], :where([oui-popover-content])[position^=top] {
-  --margin-top: -0.5rem;
+:where([oui-popover-content])[oui-position^=above] {
+  margin: 0 0 0.5em;
 }
-:where([oui-popover-content])[position^=below], :where([oui-popover-content])[position^=bottom] {
-  --margin-top: 0.5rem;
+:where([oui-popover-content])[oui-position^=below] {
+  margin: 0.5em 0 0;
 }
-:where([oui-popover-content])[position^=end], :where([oui-popover-content])[position^=right] {
-  --margin-left: 0.5rem;
+:where([oui-popover-content])[oui-position^=end] {
+  margin: 0 0 0 0.5em;
 }
-:where([oui-popover-content])[position^=left], :where([oui-popover-content])[position^=start] {
-  --margin-left: -0.5rem;
+:where([oui-popover-content])[oui-position^=start] {
+  margin: 0 0.5em 0 0;
 }
 :where([oui-popover-content]) {
   padding: 1rem;
   overscroll-behavior: contain;
   background-color: var(--oui-absolute);
-  border-radius: 0.5rem;
+  border-radius: 0.25rem;
 }
 :where([oui-popover-content]):focus {
   outline: none;

package/dist/css/tooltip.css

@@ -32,17 +32,17 @@ var)) {
   margin: var(--margin-top, 0) 0 0 var(--margin-left, 0);
   pointer-events: all !important;
 }
-:where([oui-tooltip-content])[position^=above], :where([oui-tooltip-content])[position^=top] {
-  --margin-top: -0.5rem;
+:where([oui-tooltip-content])[oui-position^=above] {
+  margin: 0 0 0.5em;
 }
-:where([oui-tooltip-content])[position^=below], :where([oui-tooltip-content])[position^=bottom] {
-  --margin-top: 0.5rem;
+:where([oui-tooltip-content])[oui-position^=below] {
+  margin: 0.5em 0 0;
 }
-:where([oui-tooltip-content])[position^=end], :where([oui-tooltip-content])[position^=right] {
-  --margin-left: 0.5rem;
+:where([oui-tooltip-content])[oui-position^=end] {
+  margin: 0 0 0 0.5em;
 }
-:where([oui-tooltip-content])[position^=left], :where([oui-tooltip-content])[position^=start] {
-  --margin-left: -0.5rem;
+:where([oui-tooltip-content])[oui-position^=start] {
+  margin: 0 0.5em 0 0;
 }
 :where([oui-tooltip-content]) {
   max-width: 48ch;
@@ -51,38 +51,38 @@ var)) {
   background-color: var(--oui-absolute);
   border-radius: 0.25rem;
   font-size: 0.875rem;
+  pointer-events: none;
   transition: opacity 0.125s ease-in-out;
-  transition-delay: 0s;
 }
 :where([oui-tooltip-content])::after {
   content: "";
   opacity: 0;
   position: absolute;
 }
-:where([oui-tooltip-content])[position^=above]::after, :where([oui-tooltip-content])[position^=below]::after, :where([oui-tooltip-content])[position^=bottom]::after, :where([oui-tooltip-content])[position^=top]::after {
+: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.5rem;
+  height: 0.5em;
 }
-:where([oui-tooltip-content])[position^=above]::after, :where([oui-tooltip-content])[position^=top]::after {
+:where([oui-tooltip-content])[oui-position^=above]::after, :where([oui-tooltip-content])[oui-position^=top]::after {
   inset: 100% 0 0;
 }
-:where([oui-tooltip-content])[position^=below]::after, :where([oui-tooltip-content])[position^=bottom]::after {
-  inset: -5rem 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])[position^=end]::after, :where([oui-tooltip-content])[position^=left]::after, :where([oui-tooltip-content])[position^=right]::after, :where([oui-tooltip-content])[position^=start]::after {
-  width: 0.5rem;
+: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;
   height: 100%;
 }
-:where([oui-tooltip-content])[position^=end]::after, :where([oui-tooltip-content])[position^=right]::after {
-  inset: 0 0 0 -0.5rem;
+: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])[position^=left]::after, :where([oui-tooltip-content])[position^=start]::after {
+:where([oui-tooltip-content])[oui-position^=left]::after, :where([oui-tooltip-content])[oui-position^=start]::after {
   inset: 0 0 0 100%;
 }
 
 :where([oui-tooltip-content][oui-tooltip-content-active]) {
   opacity: 1;
-  transition-delay: 0.25s;
+  pointer-events: auto;
 }
 
 

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

@@ -1,6 +1,6 @@
+import { clamp } from "@oscarpalmer/atoms/number";
 import { on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
-import { clamp } from "@oscarpalmer/atoms/number";
 import { getFocusable } from "@oscarpalmer/toretto/focusable";
 //#region src/js/focus-trap/embedded.ts
 var FocusTrap = class {

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

@@ -1,4 +1,4 @@
-import { attributable } from "../attributable.mjs";
+import { attributable } from "../internal/attributable.mjs";
 import { FOCUSTRAPS_ALL, FOCUS_TRAP_SELECTOR, createFocusTrap } from "./embedded.mjs";
 //#region src/js/focus-trap/standalone.ts
 function removeFocusTraps(element) {

package/dist/js/index.d.mts

@@ -1,4 +1,47 @@
-import { OuiPopoverElement } from "./popover.mjs";
-import { OuiSplitterElement } from "./splitter.mjs";
-import { setDelay } from "./tooltip.mjs";
-export { OuiPopoverElement, OuiSplitterElement, setDelay };
+//#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 };