@oscarpalmer/oui 0.25.0 → 0.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/dist/js/embedded-CHK82Uh5.d.mts +76 -0
  2. package/dist/js/{embedded-84gxpReS.d.mts → embedded-ai6cqURc.d.mts} +21 -17
  3. package/dist/js/floatable/embedded.d.mts +2 -2
  4. package/dist/js/floatable/embedded.mjs +27 -16
  5. package/dist/js/floatable/standalone.d.mts +2 -2
  6. package/dist/js/floatable/standalone.mjs +2 -2
  7. package/dist/js/focus-trap/embedded.d.mts +2 -2
  8. package/dist/js/focus-trap/embedded.mjs +157 -79
  9. package/dist/js/focus-trap/standalone.d.mts +2 -1
  10. package/dist/js/focus-trap/standalone.mjs +3 -3
  11. package/dist/js/index.d.mts +3 -2
  12. package/dist/js/index.mjs +4 -2
  13. package/dist/js/internal/draggable.d.mts +2 -2
  14. package/dist/js/internal/draggable.mjs +2 -2
  15. package/dist/js/{movable-BKFgoaOl.d.mts → movable-dNqBctx3.d.mts} +16 -16
  16. package/dist/js/movable.d.mts +2 -2
  17. package/dist/js/movable.mjs +4 -4
  18. package/dist/js/popover.d.mts +3 -3
  19. package/dist/js/popover.mjs +9 -9
  20. package/dist/js/sortable.d.mts +2 -2
  21. package/dist/js/sortable.mjs +4 -4
  22. package/dist/js/splitter.mjs +48 -47
  23. package/dist/js/toolbar.d.mts +1 -0
  24. package/dist/js/toolbar.mjs +107 -0
  25. package/dist/js/tooltip.d.mts +1 -1
  26. package/dist/js/tooltip.mjs +7 -7
  27. package/package.json +13 -1
  28. package/src/js/floatable/embedded.ts +65 -44
  29. package/src/js/floatable/standalone.ts +1 -1
  30. package/src/js/focus-trap/embedded.ts +219 -93
  31. package/src/js/focus-trap/standalone.ts +4 -2
  32. package/src/js/index.ts +1 -0
  33. package/src/js/internal/draggable.ts +20 -20
  34. package/src/js/movable.ts +17 -17
  35. package/src/js/popover.ts +18 -18
  36. package/src/js/sortable.ts +26 -26
  37. package/src/js/splitter.ts +98 -96
  38. package/src/js/toolbar.ts +214 -0
  39. package/src/js/tooltip.ts +14 -10
  40. package/dist/js/embedded-BpwzMSEF.d.mts +0 -26
@@ -1,7 +1,7 @@
1
1
  import { EventPosition, PlainObject } from "@oscarpalmer/atoms/models";
2
2
 
3
3
  //#region src/js/sortable.d.ts
4
- declare class Sortable extends Draggable {
4
+ declare class OuiSortable extends OuiDraggable {
5
5
  connections: string | null;
6
6
  origin: HTMLElement | undefined;
7
7
  get dragged(): HTMLElement;
@@ -9,7 +9,7 @@ declare class Sortable extends Draggable {
9
9
  }
10
10
  //#endregion
11
11
  //#region src/js/internal/draggable.d.ts
12
- declare abstract class Draggable {
12
+ declare abstract class OuiDraggable {
13
13
  prefix: string;
14
14
  element: HTMLElement;
15
15
  options: DraggableOptions;
@@ -22,10 +22,10 @@ declare abstract class Draggable {
22
22
  constructor(prefix: string, element: HTMLElement, options: DraggableOptions);
23
23
  destroy(): void;
24
24
  }
25
- type DragBegin = (event: MouseEvent | TouchEvent, state: DraggableState, draggable: Draggable, element: HTMLElement, handle: HTMLElement, position: EventPosition) => void;
26
- type DragCancel = (state: DraggableState, draggable: Draggable) => void;
27
- type DragEnd = (event: MouseEvent | TouchEvent, state: DraggableState, draggable: Draggable, reset: () => void) => void;
28
- type DragMove = (event: MouseEvent | TouchEvent, state: DraggableState, draggable: Draggable, position: DragMovePosition) => PlainObject | undefined;
25
+ type DragBegin = (event: MouseEvent | TouchEvent, state: DraggableState, draggable: OuiDraggable, element: HTMLElement, handle: HTMLElement, position: EventPosition) => void;
26
+ type DragCancel = (state: DraggableState, draggable: OuiDraggable) => void;
27
+ type DragEnd = (event: MouseEvent | TouchEvent, state: DraggableState, draggable: OuiDraggable, reset: () => void) => void;
28
+ type DragMove = (event: MouseEvent | TouchEvent, state: DraggableState, draggable: OuiDraggable, position: DragMovePosition) => PlainObject | undefined;
29
29
  type DragMovePosition = {
30
30
  calculated: EventPosition;
31
31
  original: EventPosition;
@@ -35,8 +35,8 @@ type DraggableBound<Property extends keyof DraggableInstances = keyof DraggableI
35
35
  property: Property;
36
36
  };
37
37
  type DraggableInstances = {
38
- movable?: Movable;
39
- sortable?: Sortable;
38
+ movable?: OuiMovable;
39
+ sortable?: OuiSortable;
40
40
  };
41
41
  type DraggableOptions = {
42
42
  container: DraggableOptionsContainer;
@@ -46,17 +46,17 @@ type DraggableOptions = {
46
46
  };
47
47
  type DraggableOptionsContainer = {
48
48
  attribute: string;
49
- map: Map<HTMLElement, Set<Draggable>>;
49
+ map: Map<HTMLElement, Set<OuiDraggable>>;
50
50
  onDestroy?: DraggableOptionsContainerOnDestroy;
51
51
  onInitialize?: DraggableOptionsContainerOnInitialize;
52
52
  };
53
- type DraggableOptionsContainerOnDestroy = (draggable: Draggable, container: HTMLElement, empty: boolean) => void;
54
- type DraggableOptionsContainerOnInitialize = (draggable: Draggable) => void;
53
+ type DraggableOptionsContainerOnDestroy = (draggable: OuiDraggable, container: HTMLElement, empty: boolean) => void;
54
+ type DraggableOptionsContainerOnInitialize = (draggable: OuiDraggable) => void;
55
55
  type DraggableOptionsDirection = {
56
56
  attribute: string;
57
57
  onAfter?: DraggableOptionsDirectionOnAfter;
58
58
  };
59
- type DraggableOptionsDirectionOnAfter = (draggable: Draggable) => void;
59
+ type DraggableOptionsDirectionOnAfter = (draggable: OuiDraggable) => void;
60
60
  type DraggableOptionsDrag = {
61
61
  onBegin: DragBegin;
62
62
  onCancel: DragCancel;
@@ -67,8 +67,8 @@ type DraggableOptionsPosition = {
67
67
  getOffset: DraggableOptionsPositionGetOffset;
68
68
  getOriginal: DraggableOptionsPositionGetOriginal;
69
69
  };
70
- type DraggableOptionsPositionGetOffset = (state: DraggableState, draggable: Draggable, element: HTMLElement, position: EventPosition) => EventPosition;
71
- type DraggableOptionsPositionGetOriginal = (state: DraggableState, draggable: Draggable, position: EventPosition) => EventPosition;
70
+ type DraggableOptionsPositionGetOffset = (state: DraggableState, draggable: OuiDraggable, element: HTMLElement, position: EventPosition) => EventPosition;
71
+ type DraggableOptionsPositionGetOriginal = (state: DraggableState, draggable: OuiDraggable, position: EventPosition) => EventPosition;
72
72
  type DraggableState = {
73
73
  container: DOMRect | undefined;
74
74
  element: DraggableStateElement | undefined;
@@ -87,7 +87,7 @@ declare function removeDraggable<Property extends keyof DraggableInstances, Inst
87
87
  }, element: HTMLElement): void;
88
88
  //#endregion
89
89
  //#region src/js/movable.d.ts
90
- declare class Movable extends Draggable {
90
+ declare class OuiMovable extends OuiDraggable {
91
91
  inset: string;
92
92
  moved: boolean;
93
93
  offset: Partial<EventPosition> | undefined;
@@ -98,4 +98,4 @@ declare class Movable extends Draggable {
98
98
  destroy(): void;
99
99
  }
100
100
  //#endregion
101
- export { DraggableState as a, Sortable as c, DraggableBound as i, DragMovePosition as n, addDraggable as o, Draggable as r, removeDraggable as s, Movable as t };
101
+ export { OuiDraggable as a, OuiSortable as c, DraggableState as i, DragMovePosition as n, addDraggable as o, DraggableBound as r, removeDraggable as s, OuiMovable as t };
@@ -1,2 +1,2 @@
1
- import { t as Movable } from "./movable-BKFgoaOl.mjs";
2
- export { Movable };
1
+ import { t as OuiMovable } from "./movable-dNqBctx3.mjs";
2
+ export { OuiMovable };
@@ -1,8 +1,8 @@
1
1
  import { attributable } from "./internal/attributable.mjs";
2
- import { Draggable, addDraggable, removeDraggable } from "./internal/draggable.mjs";
2
+ import { OuiDraggable, addDraggable, removeDraggable } from "./internal/draggable.mjs";
3
3
  import { getPosition, on } from "@oscarpalmer/toretto/event";
4
4
  //#region src/js/movable.ts
5
- var Movable = class extends Draggable {
5
+ var OuiMovable = class extends OuiDraggable {
6
6
  inset;
7
7
  moved = false;
8
8
  offset;
@@ -142,11 +142,11 @@ const EVENT_END = "move:end";
142
142
  const MOVED = /* @__PURE__ */ new Set();
143
143
  const SELECTOR_HANDLE = `[${ATTRIBUTE}-handle]`;
144
144
  const bound = {
145
- constructor: Movable,
145
+ constructor: OuiMovable,
146
146
  property: "movable"
147
147
  };
148
148
  const resizer = new ResizeObserver(onResize);
149
149
  attributable(ATTRIBUTE, addDraggable.bind(bound), removeDraggable.bind(bound));
150
150
  on(document, "scroll", onScroll);
151
151
  //#endregion
152
- export { Movable };
152
+ export { OuiMovable };
@@ -1,5 +1,5 @@
1
- import { n as OuiFloatable } from "./embedded-84gxpReS.mjs";
2
- import { i as FocusTrap } from "./embedded-BpwzMSEF.mjs";
1
+ import { n as OuiFloatable } from "./embedded-ai6cqURc.mjs";
2
+ import { i as OuiFocusTrap } from "./embedded-CHK82Uh5.mjs";
3
3
  import { RemovableEventListener } from "@oscarpalmer/toretto/models";
4
4
 
5
5
  //#region src/js/popover.d.ts
@@ -23,7 +23,7 @@ type OuiPopoverState = {
23
23
  anchor: HTMLElement;
24
24
  content: HTMLElement;
25
25
  floatable: OuiFloatable;
26
- focusTrap?: FocusTrap;
26
+ focusTrap?: OuiFocusTrap;
27
27
  listeners: RemovableEventListener[];
28
28
  popover: OuiPopover;
29
29
  };
@@ -1,4 +1,4 @@
1
- import { createFloatable, getOnBeforeToggleListener } from "./floatable/embedded.mjs";
1
+ import { createEmbeddedFloatable, getOnBeforeToggleListener } from "./floatable/embedded.mjs";
2
2
  import { attributable } from "./internal/attributable.mjs";
3
3
  import { createFocusTrap } from "./focus-trap/embedded.mjs";
4
4
  import { on } from "@oscarpalmer/toretto/event";
@@ -29,6 +29,11 @@ var OuiPopover = class {
29
29
  this.#state.floatable.show();
30
30
  }
31
31
  };
32
+ function addPopover(element) {
33
+ if (states.has(element) || element.hasAttribute("oui-floatable")) return;
34
+ const anchor = element.ownerDocument.querySelector(`[popovertarget="${element.id}"]`);
35
+ if (isHTMLOrSVGElement(anchor)) states.set(element, getState(anchor, element));
36
+ }
32
37
  function destroyPopover(state) {
33
38
  state.floatable.destroy();
34
39
  state.focusTrap?.destroy();
@@ -53,7 +58,7 @@ function getState(anchor, content) {
53
58
  const state = {
54
59
  anchor,
55
60
  content,
56
- floatable: createFloatable(anchor, content, options, false),
61
+ floatable: createEmbeddedFloatable(anchor, content, options),
57
62
  focusTrap: content.getAttribute(ARIA_MODAL) === TRUE ? createFocusTrap(content, { noescape: true }) : void 0,
58
63
  listeners: [getOnBeforeToggleListener(content), on(content, EVENT_TOGGLE, (event) => {
59
64
  if (event.newState === STATE_OPEN) {
@@ -71,15 +76,10 @@ function getState(anchor, content) {
71
76
  state.popover = new OuiPopover(state);
72
77
  return state;
73
78
  }
74
- function onAdd(element) {
75
- if (states.has(element) || element.hasAttribute("oui-floatable")) return;
76
- const anchor = element.ownerDocument.querySelector(`[popovertarget="${element.id}"]`);
77
- if (isHTMLOrSVGElement(anchor)) states.set(element, getState(anchor, element));
78
- }
79
79
  function onPointerdown() {
80
80
  ignoreFocus = true;
81
81
  }
82
- function onRemove(element) {
82
+ function removePopover(element) {
83
83
  const state = states.get(element);
84
84
  if (state == null) return;
85
85
  destroyPopover(state);
@@ -98,6 +98,6 @@ const options = {
98
98
  const states = /* @__PURE__ */ new WeakMap();
99
99
  let ignoreFocus = false;
100
100
  on(document, "pointerdown", onPointerdown, { capture: true });
101
- attributable(ATTRIBUTE, onAdd, onRemove);
101
+ attributable(ATTRIBUTE, addPopover, removePopover);
102
102
  //#endregion
103
103
  export { getPopover };
@@ -1,2 +1,2 @@
1
- import { c as Sortable } from "./movable-BKFgoaOl.mjs";
2
- export { Sortable };
1
+ import { c as OuiSortable } from "./movable-dNqBctx3.mjs";
2
+ export { OuiSortable };
@@ -1,11 +1,11 @@
1
1
  import { attributable } from "./internal/attributable.mjs";
2
- import { Draggable, addDraggable, removeDraggable } from "./internal/draggable.mjs";
2
+ import { OuiDraggable, addDraggable, removeDraggable } from "./internal/draggable.mjs";
3
3
  import { getPosition } from "@oscarpalmer/toretto/event";
4
4
  import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
5
5
  import { findAncestor, getElementFromPosition } from "@oscarpalmer/toretto/find";
6
6
  import { createElement } from "@oscarpalmer/toretto/create";
7
7
  //#region src/js/sortable.ts
8
- var Sortable = class extends Draggable {
8
+ var OuiSortable = class extends OuiDraggable {
9
9
  connections;
10
10
  origin;
11
11
  get dragged() {
@@ -230,7 +230,7 @@ const INSERT_BEFORE = "beforebegin";
230
230
  const SELECTOR = `[${ATTRIBUTE}]`;
231
231
  const SELECTOR_ITEM = `[${ATTRIBUTE}] > *`;
232
232
  const bound = {
233
- constructor: Sortable,
233
+ constructor: OuiSortable,
234
234
  property: "sortable"
235
235
  };
236
236
  const placeholder = {
@@ -242,4 +242,4 @@ const placeholder = {
242
242
  };
243
243
  attributable(ATTRIBUTE, addDraggable.bind(bound), removeDraggable.bind(bound));
244
244
  //#endregion
245
- export { Sortable };
245
+ export { OuiSortable };
@@ -10,6 +10,50 @@ const ATTRIBUTE_MAX = "max";
10
10
  const ATTRIBUTE_MIN = "min";
11
11
  const ATTRIBUTE_SIZE = "size";
12
12
  const ATTRIBUTE_TYPE = "type";
13
+ var OuiSplitter = class {
14
+ element;
15
+ handle;
16
+ panels;
17
+ rectangle;
18
+ separator;
19
+ types;
20
+ values;
21
+ constructor(element, panels) {
22
+ this.element = element;
23
+ this.panels = panels;
24
+ if (isNullableOrWhitespace(element.id)) element.id = `oui_splitter_${++index}`;
25
+ this.values = getValues(element);
26
+ this.handle = createHandle();
27
+ this.rectangle = element.getBoundingClientRect();
28
+ this.separator = createSeparator(this);
29
+ this.separator.append(this.handle);
30
+ panels[0].insertAdjacentElement("afterend", this.separator);
31
+ this.updateOrientation();
32
+ this.updateValues();
33
+ }
34
+ updateConnections(add) {
35
+ const method = METHODS_CONNECT[add];
36
+ MAPPED_ELEMENTS[method](this.element, this);
37
+ MAPPED_ELEMENTS[method](this.handle, this);
38
+ MAPPED_ELEMENTS[method](this.separator, this);
39
+ if (this.types.auto) RESIZE_OBSERVER[METHODS_OBSERVE[add]](this.element);
40
+ }
41
+ updateOrientation() {
42
+ this.types = getTypes(this);
43
+ if (this.types.auto) RESIZE_OBSERVER.observe(this.element);
44
+ else RESIZE_OBSERVER.unobserve(this.element);
45
+ if (this.types.horizontal) this.element.setAttribute(ATTRIBUTE_HORIZONTAL, "");
46
+ else this.element.removeAttribute(ATTRIBUTE_HORIZONTAL);
47
+ setAriaOrientation(this);
48
+ }
49
+ updateValues() {
50
+ this.values = getValues(this.element);
51
+ requestAnimationFrame(() => {
52
+ setSize(this, this.values.now.current);
53
+ setAriaValue(this);
54
+ });
55
+ }
56
+ };
13
57
  var OuiSplitterElement = class extends HTMLElement {
14
58
  static observedAttributes = [
15
59
  ATTRIBUTE_MAX,
@@ -45,8 +89,8 @@ var OuiSplitterElement = class extends HTMLElement {
45
89
  constructor() {
46
90
  super();
47
91
  const panels = [...this.children].filter((child) => child instanceof HTMLElement);
48
- if (panels.length !== 2) throw new Error(`${SELECTOR} must have exactly two panels.`);
49
- this.#splitter = new Splitter(this, panels);
92
+ if (panels.length !== 2) throw new Error(MESSAGE);
93
+ this.#splitter = new OuiSplitter(this, panels);
50
94
  }
51
95
  connectedCallback() {
52
96
  this.#splitter.updateConnections(1);
@@ -68,51 +112,6 @@ var OuiSplitterElement = class extends HTMLElement {
68
112
  }
69
113
  }
70
114
  };
71
- let index = 0;
72
- var Splitter = class {
73
- element;
74
- handle;
75
- panels;
76
- rectangle;
77
- separator;
78
- types;
79
- values;
80
- constructor(element, panels) {
81
- this.element = element;
82
- this.panels = panels;
83
- if (isNullableOrWhitespace(element.id)) element.id = `oui_splitter_${++index}`;
84
- this.values = getValues(element);
85
- this.handle = createHandle();
86
- this.rectangle = element.getBoundingClientRect();
87
- this.separator = createSeparator(this);
88
- this.separator.append(this.handle);
89
- panels[0].insertAdjacentElement("afterend", this.separator);
90
- this.updateOrientation();
91
- this.updateValues();
92
- }
93
- updateConnections(add) {
94
- const method = METHODS_CONNECT[add];
95
- MAPPED_ELEMENTS[method](this.element, this);
96
- MAPPED_ELEMENTS[method](this.handle, this);
97
- MAPPED_ELEMENTS[method](this.separator, this);
98
- if (this.types.auto) RESIZE_OBSERVER[METHODS_OBSERVE[add]](this.element);
99
- }
100
- updateOrientation() {
101
- this.types = getTypes(this);
102
- if (this.types.auto) RESIZE_OBSERVER.observe(this.element);
103
- else RESIZE_OBSERVER.unobserve(this.element);
104
- if (this.types.horizontal) this.element.setAttribute(ATTRIBUTE_HORIZONTAL, "");
105
- else this.element.removeAttribute(ATTRIBUTE_HORIZONTAL);
106
- setAriaOrientation(this);
107
- }
108
- updateValues() {
109
- this.values = getValues(this.element);
110
- requestAnimationFrame(() => {
111
- setSize(this, this.values.now.current);
112
- setAriaValue(this);
113
- });
114
- }
115
- };
116
115
  function createHandle() {
117
116
  const handle = document.createElement("span");
118
117
  handle.setAttribute("aria-hidden", "true");
@@ -269,6 +268,7 @@ const KEYS_ALL = new Set([
269
268
  ...KEYS_VERTICAL
270
269
  ]);
271
270
  const MAPPED_ELEMENTS = /* @__PURE__ */ new WeakMap();
271
+ const MESSAGE = `<${SELECTOR}> must have exactly two panels.`;
272
272
  const METHODS_CONNECT = ["delete", "set"];
273
273
  const METHODS_OBSERVE = ["unobserve", "observe"];
274
274
  const NAVIGATION_MAXIMUM_PERCENTAGE = .9;
@@ -283,6 +283,7 @@ const STYLING_TOGGLER = toggleStyles(document.body, {
283
283
  webkitUserSelect: "none"
284
284
  });
285
285
  const VALUE_DECIMALS = 6;
286
+ let index = 0;
286
287
  let frame;
287
288
  let splitter;
288
289
  customElements.define(SELECTOR, OuiSplitterElement);
@@ -0,0 +1 @@
1
+ export { };
@@ -0,0 +1,107 @@
1
+ import { attributable } from "./internal/attributable.mjs";
2
+ import { on } from "@oscarpalmer/toretto/event";
3
+ import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
4
+ import { clamp } from "@oscarpalmer/atoms/number";
5
+ import { findAncestor } from "@oscarpalmer/toretto/find";
6
+ //#region src/js/toolbar.ts
7
+ var OuiToolbar = class {
8
+ #state;
9
+ constructor(state) {
10
+ this.#state = state;
11
+ updateFocus(this.#state, false);
12
+ }
13
+ destroy() {
14
+ for (const listener of this.#state.listeners) listener();
15
+ this.#state.active = void 0;
16
+ this.#state.element = void 0;
17
+ this.#state.listeners = void 0;
18
+ }
19
+ };
20
+ function addToolbar(element) {
21
+ if (!instances.has(element)) instances.set(element, new OuiToolbar(getState(element)));
22
+ }
23
+ function getItems(element) {
24
+ return [...element.querySelectorAll(SELECTOR)].filter(isValidItem);
25
+ }
26
+ function getOrientation(element) {
27
+ const attribute = element.getAttribute(ARIA_ORIENTATION);
28
+ return ORIENTATIONS.has(attribute) ? attribute : ORIENTATION_HORIZONTAL;
29
+ }
30
+ function getState(element) {
31
+ const state = {
32
+ element,
33
+ active: { index: 0 },
34
+ listeners: [on(element, EVENT_FOCUSIN, (event) => {
35
+ onFocusin(state, event);
36
+ }), on(element, EVENT_KEYDOWN, (event) => {
37
+ onKeydown(state, event);
38
+ }, { passive: false })],
39
+ orientation: getOrientation(element)
40
+ };
41
+ return state;
42
+ }
43
+ function isValidItem(element) {
44
+ return PROPERTY_DISABLED in element ? element.disabled !== true : true;
45
+ }
46
+ function onKeydown(state, event) {
47
+ if (!KEYS_ALL.has(event.key)) return;
48
+ const items = getItems(state.element);
49
+ if (items.length === 0) return;
50
+ let index;
51
+ if (KEYS_ABSOLUTE.has(event.key)) index = event.key === KEY_HOME ? 0 : items.length - 1;
52
+ else if (state.orientation === ORIENTATION_HORIZONTAL ? KEYS_HORIZONTAL.has(event.key) : KEYS_VERTICAL.has(event.key)) {
53
+ if (state.active.element instanceof HTMLSelectElement) event.preventDefault();
54
+ index = clamp(state.active.index + (KEYS_NEXT.has(event.key) ? 1 : -1), 0, items.length - 1, true);
55
+ }
56
+ if (index == null || index === state.active.index) return;
57
+ state.active.element = items[index];
58
+ state.active.index = index;
59
+ updateFocus(state, true, items);
60
+ }
61
+ function onFocusin(state, event) {
62
+ const item = findAncestor(event, SELECTOR);
63
+ if (!isHTMLOrSVGElement(item) || !isValidItem(item)) return;
64
+ const items = getItems(state.element);
65
+ const index = items.indexOf(item);
66
+ if (index === -1) return;
67
+ state.active.element = item;
68
+ state.active.index = index;
69
+ updateFocus(state, false, items);
70
+ }
71
+ function removeToolbar(element) {
72
+ instances.get(element)?.destroy();
73
+ instances.delete(element);
74
+ }
75
+ function updateFocus(state, focus, items) {
76
+ const updated = items ?? getItems(state.element);
77
+ const { length } = updated;
78
+ if (length === 0) return;
79
+ for (let index = 0; index < length; index += 1) updated[index].tabIndex = index === state.active.index ? 0 : -1;
80
+ state.active.element ??= updated[state.active.index];
81
+ if (focus) state.active.element?.focus();
82
+ }
83
+ const ARIA_ORIENTATION = "aria-orientation";
84
+ const ATTRIBUTE = "oui-toolbar";
85
+ const EVENT_KEYDOWN = "keydown";
86
+ const EVENT_FOCUSIN = "focusin";
87
+ const KEY_ARROW_DOWN = "ArrowDown";
88
+ const KEY_ARROW_RIGHT = "ArrowRight";
89
+ const KEY_END = "End";
90
+ const KEY_HOME = "Home";
91
+ const KEYS_ABSOLUTE = new Set([KEY_END, KEY_HOME]);
92
+ const KEYS_HORIZONTAL = new Set([KEY_ARROW_RIGHT, "ArrowLeft"]);
93
+ const KEYS_VERTICAL = new Set([KEY_ARROW_DOWN, "ArrowUp"]);
94
+ const KEYS_ALL = new Set([
95
+ ...KEYS_ABSOLUTE,
96
+ ...KEYS_HORIZONTAL,
97
+ ...KEYS_VERTICAL
98
+ ]);
99
+ const KEYS_NEXT = new Set([KEY_ARROW_DOWN, KEY_ARROW_RIGHT]);
100
+ const ORIENTATION_HORIZONTAL = "horizontal";
101
+ const ORIENTATIONS = new Set([ORIENTATION_HORIZONTAL, "vertical"]);
102
+ const PROPERTY_DISABLED = "disabled";
103
+ const SELECTOR = `[${ATTRIBUTE}-item]`;
104
+ const instances = /* @__PURE__ */ new WeakMap();
105
+ attributable(ATTRIBUTE, addToolbar, removeToolbar);
106
+ //#endregion
107
+ export {};
@@ -1,4 +1,4 @@
1
- import { n as OuiFloatable } from "./embedded-84gxpReS.mjs";
1
+ import { n as OuiFloatable } from "./embedded-ai6cqURc.mjs";
2
2
 
3
3
  //#region src/js/tooltip.d.ts
4
4
  declare class OuiTooltip {
@@ -1,4 +1,4 @@
1
- import { createFloatable } from "./floatable/embedded.mjs";
1
+ import { createEmbeddedFloatable } from "./floatable/embedded.mjs";
2
2
  import { attributable } from "./internal/attributable.mjs";
3
3
  import { on } from "@oscarpalmer/toretto/event";
4
4
  import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
@@ -57,6 +57,9 @@ function activate(event, focus) {
57
57
  });
58
58
  }, shouldDelay ? delay : 0);
59
59
  }
60
+ function addTooltip(element) {
61
+ if (!states.has(element)) createTooltip(element);
62
+ }
60
63
  function closeTooltip(state) {
61
64
  if (state == null) return;
62
65
  if (state.timer != null) clearTimeout(state.timer);
@@ -120,7 +123,7 @@ function getState(anchor, content) {
120
123
  const state = {
121
124
  anchor,
122
125
  content,
123
- floatable: createFloatable(anchor, content, options, false),
126
+ floatable: createEmbeddedFloatable(anchor, content, options),
124
127
  tooltip: null
125
128
  };
126
129
  state.tooltip = new OuiTooltip(state);
@@ -129,9 +132,6 @@ function getState(anchor, content) {
129
132
  function getTooltip(element) {
130
133
  return states.get(element)?.tooltip;
131
134
  }
132
- function onAdd(element) {
133
- if (!states.has(element)) createTooltip(element);
134
- }
135
135
  function onFocusin(event) {
136
136
  activate(event, true);
137
137
  }
@@ -148,7 +148,7 @@ function onFocusout() {
148
148
  function onPointermove(event) {
149
149
  activate(event, false);
150
150
  }
151
- function onRemove(element) {
151
+ function removeTooltip(element) {
152
152
  const state = states.get(element);
153
153
  if (state == null) return;
154
154
  destroyTooltip(state);
@@ -187,6 +187,6 @@ let focusTimer;
187
187
  on(document, "focusin", onFocusin);
188
188
  on(document, "focusout", onFocusout);
189
189
  on(document, "pointermove", onPointermove);
190
- attributable(ATTRIBUTE, onAdd, onRemove);
190
+ attributable(ATTRIBUTE, addTooltip, removeTooltip);
191
191
  //#endregion
192
192
  export { getTooltip, setTooltipDelay };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oscarpalmer/oui",
3
- "version": "0.25.0",
3
+ "version": "0.26.0",
4
4
  "description": "Styles, components, and utilities for building websites and applications.",
5
5
  "keywords": [
6
6
  "css",
@@ -33,6 +33,14 @@
33
33
  "types": "./dist/js/index.d.mts",
34
34
  "default": "./dist/js/index.mjs"
35
35
  },
36
+ "./dialog": {
37
+ "types": "./dist/js/dialog.d.mts",
38
+ "default": "./dist/js/dialog.mjs"
39
+ },
40
+ "./floatable": {
41
+ "types": "./dist/js/floatable/standalone.d.mts",
42
+ "default": "./dist/js/floatable/standalone.mjs"
43
+ },
36
44
  "./focus-trap": {
37
45
  "types": "./dist/js/focus-trap/standalone.d.mts",
38
46
  "default": "./dist/js/focus-trap/standalone.mjs"
@@ -53,6 +61,10 @@
53
61
  "types": "./dist/js/splitter.d.mts",
54
62
  "default": "./dist/js/splitter.mjs"
55
63
  },
64
+ "./toolbar": {
65
+ "types": "./dist/js/toolbar.d.mts",
66
+ "default": "./dist/js/toolbar.mjs"
67
+ },
56
68
  "./tooltip": {
57
69
  "types": "./dist/js/tooltip.d.mts",
58
70
  "default": "./dist/js/tooltip.mjs"