@oscarpalmer/oui 0.41.0 → 0.42.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 (34) hide show
  1. package/dist/js/color-picker/color-picker.event.mjs +2 -2
  2. package/dist/js/combobox/combobox.dom.d.mts +2 -1
  3. package/dist/js/combobox/combobox.event.mjs +1 -2
  4. package/dist/js/combobox/combobox.misc.mjs +1 -2
  5. package/dist/js/combobox/combobox.state.mjs +1 -2
  6. package/dist/js/dialog/dialog.model.d.mts +1 -1
  7. package/dist/js/dialog/index.d.mts +1 -1
  8. package/dist/js/{dialog.model-HVzYWoDo.d.mts → dialog.model-Dv_h9Kns.d.mts} +1 -1
  9. package/dist/js/floatable/floatable.standalone.mjs +1 -2
  10. package/dist/js/focus-trap/focus-trap.standalone.mjs +1 -2
  11. package/dist/js/index.d.mts +3 -3
  12. package/dist/js/internal/option-list/option-list.data.d.mts +2 -1
  13. package/dist/js/internal/option-list/option-list.data.mjs +1 -2
  14. package/dist/js/internal/option-list/option-list.dom.mjs +1 -2
  15. package/dist/js/internal/option-list/option-list.misc.mjs +1 -2
  16. package/dist/js/l10n/index.mjs +1 -2
  17. package/dist/js/listbox/listbox.dom.mjs +1 -2
  18. package/dist/js/listbox/listbox.event.mjs +1 -2
  19. package/dist/js/listbox/listbox.misc.mjs +1 -2
  20. package/dist/js/listbox/listbox.state.mjs +1 -2
  21. package/dist/js/menu/index.mjs +3 -3
  22. package/dist/js/movable/movable.standalone.mjs +1 -2
  23. package/dist/js/resizable/resizable.embedded.d.mts +1 -1
  24. package/dist/js/resizable/resizable.embedded.mjs +16 -7
  25. package/dist/js/resizable/resizable.model.d.mts +2 -2
  26. package/dist/js/resizable/resizable.model.mjs +4 -1
  27. package/dist/js/resizable/resizable.standalone.d.mts +2 -2
  28. package/dist/js/resizable/resizable.standalone.mjs +1 -2
  29. package/dist/js/{resizable.embedded-BemH-7Re.d.mts → resizable.embedded-D9mb-Wm_.d.mts} +1 -1
  30. package/dist/js/{resizable.model-YEtcC9li.d.mts → resizable.model-vCxaFdOA.d.mts} +7 -1
  31. package/dist/js/sortable/sortable.standalone.mjs +1 -2
  32. package/dist/js/splitter/index.mjs +1 -1
  33. package/dist/js/tooltip/index.mjs +1 -1
  34. package/package.json +3 -3
@@ -1,4 +1,4 @@
1
- import { COLOR_PICKER_ATTRIBUTE_COPY_ERROR, COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS, COLOR_PICKER_EXPRESSION_HEX_PREFIX, COLOR_PICKER_KEYS, COLOR_PICKER_SELECTOR_COPY, COLOR_PICKER_SELECTOR_INPUT, COLOR_PICKER_SELECTOR_OUTPUT_INPUT, COLOR_PICKER_SELECTOR_WELL, COLOR_PICKER_SELECTOR_WELL_KNOB, COLOR_PICKER_SYMBOL, COLOR_PICKER_TAGNAME } from "./color-picker.constants.mjs";
1
+ import { COLOR_PICKER_ATTRIBUTE_COPY_ERROR, COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS, COLOR_PICKER_EXPRESSION_HEX_PREFIX, COLOR_PICKER_KEYS, COLOR_PICKER_SELECTOR_COPY, COLOR_PICKER_SELECTOR_OUTPUT_INPUT, COLOR_PICKER_SELECTOR_WELL, COLOR_PICKER_SELECTOR_WELL_KNOB, COLOR_PICKER_SYMBOL, COLOR_PICKER_TAGNAME } from "./color-picker.constants.mjs";
2
2
  import { copyValue } from "../internal/misc.mjs";
3
3
  import { OuiColorPickerEvent } from "./color-picker.model.mjs";
4
4
  import { getColorPickerOutputFormat, updateColorPickerOutputCopyLabel } from "./color-picker.output.mjs";
@@ -122,7 +122,7 @@ function onKeydown(event) {
122
122
  return;
123
123
  }
124
124
  const knob = findAncestor(event, COLOR_PICKER_SELECTOR_WELL_KNOB);
125
- if (!(event.key === "Enter" && findAncestor(event, COLOR_PICKER_SELECTOR_INPUT) != null || COLOR_PICKER_KEYS.has(event.key) && knob != null)) return;
125
+ if (!(event.key === "Enter" && findAncestor(event, "[oui-color-picker-input]") != null || COLOR_PICKER_KEYS.has(event.key) && knob != null)) return;
126
126
  const state = findAncestor(event, COLOR_PICKER_TAGNAME)?.[COLOR_PICKER_SYMBOL];
127
127
  if (state == null || state.component.disabled || state.component.readonly) return;
128
128
  event.preventDefault();
@@ -22,4 +22,5 @@ export declare function updateComboboxTabindices(state: OuiComboboxState, active
22
22
  export declare function updateComboboxAutocomplete(preview: OptionListPreview, state: OuiComboboxState, active?: Element): void;
23
23
  export declare function updateComboboxSelection(state: OuiComboboxState, active: Element | undefined, added: boolean, selected?: Element[]): void;
24
24
  export declare function updateComboboxSelectionItems(state: OuiComboboxState): void;
25
- //#endregion
25
+ //#endregion
26
+ export {};
@@ -1,2 +1 @@
1
- import { C as skipComboboxNavigation, S as preventComboboxActivation, _ as onComboboxPreview, b as onComboboxTab, c as onComboboxClickContent, d as onComboboxFilter, f as onComboboxFocusout, g as onComboboxNavigation, h as onComboboxKeydownSelection, l as onComboboxEnter, m as onComboboxKeydown, o as onComboboxActivation, p as onComboboxInput, s as onComboboxApply, u as onComboboxEscape, v as onComboboxRemoveSelection, x as onComboboxToggle, y as onComboboxSelection } from "../combobox.state-AstCICiH.mjs";
2
- export { onComboboxActivation, onComboboxApply, onComboboxClickContent, onComboboxEnter, onComboboxEscape, onComboboxFilter, onComboboxFocusout, onComboboxInput, onComboboxKeydown, onComboboxKeydownSelection, onComboboxNavigation, onComboboxPreview, onComboboxRemoveSelection, onComboboxSelection, onComboboxTab, onComboboxToggle, preventComboboxActivation, skipComboboxNavigation };
1
+ export { o as onComboboxActivation, s as onComboboxApply, c as onComboboxClickContent, l as onComboboxEnter, u as onComboboxEscape, d as onComboboxFilter, f as onComboboxFocusout, p as onComboboxInput, m as onComboboxKeydown, h as onComboboxKeydownSelection, g as onComboboxNavigation, _ as onComboboxPreview, v as onComboboxRemoveSelection, y as onComboboxSelection, b as onComboboxTab, x as onComboboxToggle, S as preventComboboxActivation, C as skipComboboxNavigation } from "../combobox.state-AstCICiH.mjs";
@@ -1,2 +1 @@
1
- import { D as setComboboxLocalizations, E as hasTextSelection, T as getComboboxId, w as getComboboxAutoComplete } from "../combobox.state-AstCICiH.mjs";
2
- export { getComboboxAutoComplete, getComboboxId, hasTextSelection, setComboboxLocalizations };
1
+ export { w as getComboboxAutoComplete, T as getComboboxId, E as hasTextSelection, D as setComboboxLocalizations } from "../combobox.state-AstCICiH.mjs";
@@ -1,2 +1 @@
1
- import { a as onDetachCombobox, i as onAttachCombobox, n as comboboxes, r as initializeCombobox, t as comboboxLocalizations } from "../combobox.state-AstCICiH.mjs";
2
- export { comboboxLocalizations, comboboxes, initializeCombobox, onAttachCombobox, onDetachCombobox };
1
+ export { t as comboboxLocalizations, n as comboboxes, r as initializeCombobox, i as onAttachCombobox, a as onDetachCombobox } from "../combobox.state-AstCICiH.mjs";
@@ -1,2 +1,2 @@
1
- import { a as DIALOG_SELECTOR_MOVER, c as OuiDialog, i as DIALOG_MESSAGE, l as OuiDialogState, n as DIALOG_ATTRIBUTE_CONTAINER, o as DIALOG_SELECTOR_RESIZER, r as DIALOG_ATTRIBUTE_OPEN, s as DIALOG_SYMBOL, t as DIALOG_ATTRIBUTE, u as dialogs } from "../dialog.model-HVzYWoDo.mjs";
1
+ import { a as DIALOG_SELECTOR_MOVER, c as OuiDialog, i as DIALOG_MESSAGE, l as OuiDialogState, n as DIALOG_ATTRIBUTE_CONTAINER, o as DIALOG_SELECTOR_RESIZER, r as DIALOG_ATTRIBUTE_OPEN, s as DIALOG_SYMBOL, t as DIALOG_ATTRIBUTE, u as dialogs } from "../dialog.model-Dv_h9Kns.mjs";
2
2
  export { DIALOG_ATTRIBUTE, DIALOG_ATTRIBUTE_CONTAINER, DIALOG_ATTRIBUTE_OPEN, DIALOG_MESSAGE, DIALOG_SELECTOR_MOVER, DIALOG_SELECTOR_RESIZER, DIALOG_SYMBOL, OuiDialog, OuiDialogState, dialogs };
@@ -1,4 +1,4 @@
1
- import { c as OuiDialog, l as OuiDialogState } from "../dialog.model-HVzYWoDo.mjs";
1
+ import { c as OuiDialog, l as OuiDialogState } from "../dialog.model-Dv_h9Kns.mjs";
2
2
  //#region src/js/dialog/index.d.ts
3
3
  declare function OuiDialog(this: OuiDialog, state: OuiDialogState): void;
4
4
  /**
@@ -1,5 +1,5 @@
1
1
  import { u as OuiMovable } from "./movable.model-D9nnPWKk.mjs";
2
- import { n as OuiResizable } from "./resizable.model-YEtcC9li.mjs";
2
+ import { n as OuiResizable } from "./resizable.model-vCxaFdOA.mjs";
3
3
  import { RemovableEventListener } from "@oscarpalmer/toretto/models";
4
4
  //#region src/js/dialog/dialog.model.d.ts
5
5
  type OuiDialog = {
@@ -1,2 +1 @@
1
- import { createFloatable } from "./floatable.embedded.mjs";
2
- export { createFloatable };
1
+ export { createFloatable } from "./floatable.embedded.mjs";
@@ -1,2 +1 @@
1
- import { createFocusTrap } from "./focus-trap.embedded.mjs";
2
- export { createFocusTrap };
1
+ export { createFocusTrap } from "./focus-trap.embedded.mjs";
@@ -5,8 +5,8 @@ import { OuiColorPickerElement } from "./color-picker/index.mjs";
5
5
  import { i as setComboboxLocalizations } from "./combobox.misc-DRDFk6X8.mjs";
6
6
  import { OuiComboboxElement } from "./combobox/index.mjs";
7
7
  import { $ as OuiSortable, p as CreateOuiDraggableOptions, u as OuiMovable } from "./movable.model-D9nnPWKk.mjs";
8
- import { n as OuiResizable, t as CreateOuiResizableOptions } from "./resizable.model-YEtcC9li.mjs";
9
- import { c as OuiDialog } from "./dialog.model-HVzYWoDo.mjs";
8
+ import { n as OuiResizable, t as CreateOuiResizableOptions } from "./resizable.model-vCxaFdOA.mjs";
9
+ import { c as OuiDialog } from "./dialog.model-Dv_h9Kns.mjs";
10
10
  import { getDialog } from "./dialog/index.mjs";
11
11
  import { n as createFloatable } from "./floatable.embedded-ncshL3Sa.mjs";
12
12
  import "./floatable/floatable.standalone.mjs";
@@ -14,7 +14,7 @@ import { c as OuiFocusTrap, l as OuiFocusTrapOptions } from "./focus-trap.model-
14
14
  import { t as createFocusTrap } from "./focus-trap.embedded-DpcPkP7c.mjs";
15
15
  import { t as createMovable } from "./movable.embedded-C1bDTLGs.mjs";
16
16
  import "./movable/movable.standalone.mjs";
17
- import { t as createResizable } from "./resizable.embedded-BemH-7Re.mjs";
17
+ import { t as createResizable } from "./resizable.embedded-D9mb-Wm_.mjs";
18
18
  import "./resizable/resizable.standalone.mjs";
19
19
  import { t as createSortable } from "./sortable.embedded-CrEGff9k.mjs";
20
20
  import "./sortable/sortable.standalone.mjs";
@@ -18,4 +18,5 @@ export declare function filterOptionListOptions<State extends PlainObject, Local
18
18
  export declare function setOptionListValue<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>, value: unknown, emit?: boolean): void;
19
19
  export declare function setOptionListValues<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>, value: unknown[], emit?: boolean): void;
20
20
  export declare function toggleOptionListOption<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>, option?: HTMLElement): void;
21
- //#endregion
21
+ //#endregion
22
+ export {};
@@ -1,2 +1 @@
1
- import { a as setOptionListValue, i as filterOptionListOptions, n as filterOptionList, o as setOptionListValues, r as filterOptionListOption, s as toggleOptionListOption, t as applyOptionListSelection } from "../../option-list.data-CgMyUwPc.mjs";
2
- export { applyOptionListSelection, filterOptionList, filterOptionListOption, filterOptionListOptions, setOptionListValue, setOptionListValues, toggleOptionListOption };
1
+ export { t as applyOptionListSelection, n as filterOptionList, r as filterOptionListOption, i as filterOptionListOptions, a as setOptionListValue, o as setOptionListValues, s as toggleOptionListOption } from "../../option-list.data-CgMyUwPc.mjs";
@@ -1,2 +1 @@
1
- import { _ as createOptionListValueLabel, b as updateOptionListValueLabel, c as createOptionListContent, d as createOptionListHeader, f as createOptionListInput, g as createOptionListOptions, h as createOptionListOption, l as createOptionListFilter, m as createOptionListMessage, p as createOptionListList, u as createOptionListGroup, v as updateOptionListMessage, y as updateOptionListPreview } from "../../option-list.data-CgMyUwPc.mjs";
2
- export { createOptionListContent, createOptionListFilter, createOptionListGroup, createOptionListHeader, createOptionListInput, createOptionListList, createOptionListMessage, createOptionListOption, createOptionListOptions, createOptionListValueLabel, updateOptionListMessage, updateOptionListPreview, updateOptionListValueLabel };
1
+ export { c as createOptionListContent, l as createOptionListFilter, u as createOptionListGroup, d as createOptionListHeader, f as createOptionListInput, p as createOptionListList, m as createOptionListMessage, h as createOptionListOption, g as createOptionListOptions, _ as createOptionListValueLabel, v as updateOptionListMessage, y as updateOptionListPreview, b as updateOptionListValueLabel } from "../../option-list.data-CgMyUwPc.mjs";
@@ -1,2 +1 @@
1
- import { C as setOptionListDisabled, D as setOptionListReadonly, E as setOptionListMultiple, O as setOptionListRequired, S as getOptionListVisibleOptions, T as setOptionListLimit, w as setOptionListFilter, x as generateOptionListIds } from "../../option-list.data-CgMyUwPc.mjs";
2
- export { generateOptionListIds, getOptionListVisibleOptions, setOptionListDisabled, setOptionListFilter, setOptionListLimit, setOptionListMultiple, setOptionListReadonly, setOptionListRequired };
1
+ export { x as generateOptionListIds, S as getOptionListVisibleOptions, C as setOptionListDisabled, w as setOptionListFilter, T as setOptionListLimit, E as setOptionListMultiple, D as setOptionListReadonly, O as setOptionListRequired } from "../../option-list.data-CgMyUwPc.mjs";
@@ -1,2 +1 @@
1
- import { createDefaultLocalizations, createLocalizations } from "../internal/l10n/index.mjs";
2
- export { createDefaultLocalizations, createLocalizations };
1
+ export { createDefaultLocalizations, createLocalizations } from "../internal/l10n/index.mjs";
@@ -1,2 +1 @@
1
- import { m as updateListboxFooter, p as createListboxFooter } from "../listbox.state-BrN296BM.mjs";
2
- export { createListboxFooter, updateListboxFooter };
1
+ export { p as createListboxFooter, m as updateListboxFooter } from "../listbox.state-BrN296BM.mjs";
@@ -1,2 +1 @@
1
- import { c as onListboxApply, d as onListboxNavigation, f as onListboxToggle, l as onListboxEnter, u as onListboxFilter } from "../listbox.state-BrN296BM.mjs";
2
- export { onListboxApply, onListboxEnter, onListboxFilter, onListboxNavigation, onListboxToggle };
1
+ export { c as onListboxApply, l as onListboxEnter, u as onListboxFilter, d as onListboxNavigation, f as onListboxToggle } from "../listbox.state-BrN296BM.mjs";
@@ -1,2 +1 @@
1
- import { o as getListboxId, s as setListboxLocalizations } from "../listbox.state-BrN296BM.mjs";
2
- export { getListboxId, setListboxLocalizations };
1
+ export { o as getListboxId, s as setListboxLocalizations } from "../listbox.state-BrN296BM.mjs";
@@ -1,2 +1 @@
1
- import { a as onDetachListbox, i as onAttachListbox, n as listboxLocalizations, r as listboxes, t as initializeListbox } from "../listbox.state-BrN296BM.mjs";
2
- export { initializeListbox, listboxLocalizations, listboxes, onAttachListbox, onDetachListbox };
1
+ export { t as initializeListbox, n as listboxLocalizations, r as listboxes, i as onAttachListbox, a as onDetachListbox } from "../listbox.state-BrN296BM.mjs";
@@ -16,12 +16,12 @@ function OuiMenu(element, navigable) {
16
16
  this.toggle = element.querySelector(MENU_SELECTOR_TOGGLE);
17
17
  this.floatable = createEmbeddedFloatable(this.toggle, this.content, {
18
18
  attribute: MENU_ATTRIBUTE_POSITION,
19
- position: findAncestor(element.parentElement, MENU_SELECTOR_CONTENT) == null ? "below-start" : "end-top",
19
+ position: findAncestor(element.parentElement, "[oui-menu-content]") == null ? "below-start" : "end-top",
20
20
  reusable: false
21
21
  });
22
22
  state.listeners.push(getOnBeforeToggleListener(this.content), on(this.content, "click", (event) => {
23
23
  event.stopPropagation();
24
- if (findAncestor(event, MENU_SELECTOR_TOGGLE) != null) return;
24
+ if (findAncestor(event, "[oui-menu-toggle]") != null) return;
25
25
  const elements = document.querySelectorAll(MENU_SELECTOR_CONTENT);
26
26
  let firstElement;
27
27
  for (const element of elements) {
@@ -137,7 +137,7 @@ function onShouldActivate(event, navigable) {
137
137
  if (menubars.has(element)) activate = state.orientation === "horizontal" ? NAVIGABLE_KEYS_VERTICAL.has(event.key) : NAVIGABLE_KEYS_HORIZONTAL.has(event.key);
138
138
  else if (menus.has(element)) activate = state.orientation === "horizontal" ? NAVIGABLE_KEYS_VERTICAL.has(event.key) : event.key === "ArrowRight";
139
139
  if (activate) {
140
- const target = event.target instanceof HTMLElement && event.target.matches(MENU_SELECTOR_TOGGLE) ? event.target : void 0;
140
+ const target = event.target instanceof HTMLElement && event.target.matches("[oui-menu-toggle]") ? event.target : void 0;
141
141
  if (target == null) activate = false;
142
142
  else target.click();
143
143
  }
@@ -1,2 +1 @@
1
- import { createMovable } from "./movable.embedded.mjs";
2
- export { createMovable };
1
+ export { createMovable } from "./movable.embedded.mjs";
@@ -1,2 +1,2 @@
1
- import { t as createResizable } from "../resizable.embedded-BemH-7Re.mjs";
1
+ import { t as createResizable } from "../resizable.embedded-D9mb-Wm_.mjs";
2
2
  export { createResizable };
@@ -1,5 +1,5 @@
1
1
  import { attributable } from "../internal/attributable.mjs";
2
- import { RESIZABLE_ATTRIBUTE, RESIZABLE_ATTRIBUTE_MAXIMUM, RESIZABLE_ATTRIBUTE_MINIMUM, RESIZABLE_MESSAGE_ELEMENT, RESIZABLE_MESSAGE_HANDLE, RESIZABLE_MESSAGE_HEIGHT, RESIZABLE_MESSAGE_WIDTH, RESIZABLE_SELECTOR, RESIZABLE_SELECTOR_HANDLE, RESIZABLE_SELECTOR_HANDLE_SCOPED, RESIZABLE_SYMBOL, resizableItems, resizableStyles } from "./resizable.model.mjs";
2
+ import { RESIZABLE_ATTRIBUTE, RESIZABLE_ATTRIBUTE_DIRECTION, RESIZABLE_MESSAGE_ELEMENT, RESIZABLE_MESSAGE_HANDLE, RESIZABLE_MESSAGE_HEIGHT, RESIZABLE_MESSAGE_WIDTH, RESIZABLE_SELECTOR_HANDLE, RESIZABLE_SELECTOR_HANDLE_SCOPED, RESIZABLE_SYMBOL, resizableHorizontals, resizableItems, resizableStyles, resizableVerticals } from "./resizable.model.mjs";
3
3
  import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
4
4
  import { dispatch, getEventPosition, on } from "@oscarpalmer/toretto/event";
5
5
  import { findAncestor } from "@oscarpalmer/toretto/find";
@@ -46,7 +46,7 @@ function cancelResize(item) {
46
46
  */
47
47
  function createResizable(element, options) {
48
48
  if (!isHTMLOrSVGElement(element)) throw new TypeError(RESIZABLE_MESSAGE_ELEMENT);
49
- if (!isHTMLOrSVGElement(element.querySelector(RESIZABLE_SELECTOR_HANDLE_SCOPED))) throw new Error(RESIZABLE_MESSAGE_HANDLE);
49
+ if (!isHTMLOrSVGElement(element.querySelector(":scope > [oui-resizable-handle]"))) throw new Error(RESIZABLE_MESSAGE_HANDLE);
50
50
  return addResizable(element, options ?? {});
51
51
  }
52
52
  function destroyResizable() {
@@ -68,6 +68,12 @@ function getAndSetDimensions(element, options, input) {
68
68
  });
69
69
  return [width, height];
70
70
  }
71
+ function getDirections(element) {
72
+ const attribute = getAttribute(element, RESIZABLE_ATTRIBUTE_DIRECTION);
73
+ if (resizableHorizontals.has(attribute)) return [true, false];
74
+ if (resizableVerticals.has(attribute)) return [false, true];
75
+ return [true, true];
76
+ }
71
77
  function getProperties(element, widthProperty, heightProperty) {
72
78
  const computed = getComputedStyle(element);
73
79
  return [computed[widthProperty], computed[heightProperty]];
@@ -88,18 +94,21 @@ function getState(element, handle, input) {
88
94
  setAttribute(element, RESIZABLE_ATTRIBUTE, "");
89
95
  const options = getValidOptions(element, input);
90
96
  const [width, height] = getAndSetDimensions(element, options);
97
+ const [horizontal, vertical] = getDirections(element);
91
98
  return {
92
99
  element,
93
100
  handle,
94
101
  height,
102
+ horizontal,
95
103
  options,
104
+ vertical,
96
105
  width,
97
106
  styles: toggleStyles(element, resizableStyles)
98
107
  };
99
108
  }
100
109
  function getValidOptions(element, input) {
101
110
  const original = isPlainObject(input) ? input : {};
102
- return { ...getRestrictions(input == null ? getAttribute(element, RESIZABLE_ATTRIBUTE_MAXIMUM) ?? getProperties(element, "maxWidth", "maxHeight") : [original.maximumWidth, original.maximumHeight], input == null ? getAttribute(element, RESIZABLE_ATTRIBUTE_MINIMUM) ?? getProperties(element, "minWidth", "minHeight") : [original.minimumWidth, original.minimumHeight]) };
111
+ return { ...getRestrictions(input == null ? getAttribute(element, "oui-resizable-maximum") ?? getProperties(element, "maxWidth", "maxHeight") : [original.maximumWidth, original.maximumHeight], input == null ? getAttribute(element, "oui-resizable-minimum") ?? getProperties(element, "minWidth", "minHeight") : [original.minimumWidth, original.minimumHeight]) };
103
112
  }
104
113
  function getXAndY(first, second) {
105
114
  const [x, y] = typeof first === "string" && second == null ? first.split(",") : [first, second];
@@ -115,7 +124,7 @@ function onKeydown(event) {
115
124
  function onPointerdown(event) {
116
125
  if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || (supportsTouch.value ? event.type === "mousedown" : event.type === "touchstart" || event.button !== 0)) return;
117
126
  const handle = findAncestor(event, RESIZABLE_SELECTOR_HANDLE);
118
- const element = handle && findAncestor(handle, RESIZABLE_SELECTOR);
127
+ const element = handle && findAncestor(handle, "[oui-resizable]");
119
128
  const stored = element && resizableItems.get(element);
120
129
  const position = getEventPosition(event);
121
130
  if (stored == null || position == null) return;
@@ -130,9 +139,9 @@ function onPointermove(event) {
130
139
  if (current == null) return;
131
140
  const { x, y } = getEventPosition(event) ?? {};
132
141
  if (x == null || y == null) return;
133
- const width = current.state.width + (x - (start?.x ?? 0));
134
- const height = current.state.height + (y - (start?.y ?? 0));
135
- getAndSetDimensions(current.state.element, current.state.options, {
142
+ let width = current.state.horizontal ? current.state.width + (x - (start?.x ?? 0)) : current.state.width;
143
+ let height = current.state.vertical ? current.state.height + (y - (start?.y ?? 0)) : current.state.height;
144
+ [width, height] = getAndSetDimensions(current.state.element, current.state.options, {
136
145
  height,
137
146
  width
138
147
  });
@@ -1,2 +1,2 @@
1
- import { _ as resizableItems, a as RESIZABLE_ATTRIBUTE, c as RESIZABLE_ATTRIBUTE_MINIMUM, d as RESIZABLE_MESSAGE_HEIGHT, f as RESIZABLE_MESSAGE_WIDTH, g as RESIZABLE_SYMBOL, h as RESIZABLE_SELECTOR_HANDLE_SCOPED, i as OuiResizableState, l as RESIZABLE_MESSAGE_ELEMENT, m as RESIZABLE_SELECTOR_HANDLE, n as OuiResizable, o as RESIZABLE_ATTRIBUTE_HANDLE, p as RESIZABLE_SELECTOR, r as OuiResizableItem, s as RESIZABLE_ATTRIBUTE_MAXIMUM, t as CreateOuiResizableOptions, u as RESIZABLE_MESSAGE_HANDLE, v as resizableStyles } from "../resizable.model-YEtcC9li.mjs";
2
- export { CreateOuiResizableOptions, OuiResizable, OuiResizableItem, OuiResizableState, RESIZABLE_ATTRIBUTE, RESIZABLE_ATTRIBUTE_HANDLE, RESIZABLE_ATTRIBUTE_MAXIMUM, RESIZABLE_ATTRIBUTE_MINIMUM, RESIZABLE_MESSAGE_ELEMENT, RESIZABLE_MESSAGE_HANDLE, RESIZABLE_MESSAGE_HEIGHT, RESIZABLE_MESSAGE_WIDTH, RESIZABLE_SELECTOR, RESIZABLE_SELECTOR_HANDLE, RESIZABLE_SELECTOR_HANDLE_SCOPED, RESIZABLE_SYMBOL, resizableItems, resizableStyles };
1
+ import { S as resizableVerticals, _ as RESIZABLE_SELECTOR_HANDLE_SCOPED, a as OuiResizableState, b as resizableItems, c as RESIZABLE_ATTRIBUTE_HANDLE, d as RESIZABLE_MESSAGE_ELEMENT, f as RESIZABLE_MESSAGE_HANDLE, g as RESIZABLE_SELECTOR_HANDLE, h as RESIZABLE_SELECTOR, i as OuiResizableItem, l as RESIZABLE_ATTRIBUTE_MAXIMUM, m as RESIZABLE_MESSAGE_WIDTH, n as OuiResizable, o as RESIZABLE_ATTRIBUTE, p as RESIZABLE_MESSAGE_HEIGHT, r as OuiResizableDirection, s as RESIZABLE_ATTRIBUTE_DIRECTION, t as CreateOuiResizableOptions, u as RESIZABLE_ATTRIBUTE_MINIMUM, v as RESIZABLE_SYMBOL, x as resizableStyles, y as resizableHorizontals } from "../resizable.model-vCxaFdOA.mjs";
2
+ export { CreateOuiResizableOptions, OuiResizable, OuiResizableDirection, OuiResizableItem, OuiResizableState, RESIZABLE_ATTRIBUTE, RESIZABLE_ATTRIBUTE_DIRECTION, RESIZABLE_ATTRIBUTE_HANDLE, RESIZABLE_ATTRIBUTE_MAXIMUM, RESIZABLE_ATTRIBUTE_MINIMUM, RESIZABLE_MESSAGE_ELEMENT, RESIZABLE_MESSAGE_HANDLE, RESIZABLE_MESSAGE_HEIGHT, RESIZABLE_MESSAGE_WIDTH, RESIZABLE_SELECTOR, RESIZABLE_SELECTOR_HANDLE, RESIZABLE_SELECTOR_HANDLE_SCOPED, RESIZABLE_SYMBOL, resizableHorizontals, resizableItems, resizableStyles, resizableVerticals };
@@ -1,5 +1,6 @@
1
1
  //#region src/js/resizable/resizable.model.ts
2
2
  const RESIZABLE_ATTRIBUTE = "oui-resizable";
3
+ const RESIZABLE_ATTRIBUTE_DIRECTION = `${RESIZABLE_ATTRIBUTE}-direction`;
3
4
  const RESIZABLE_ATTRIBUTE_HANDLE = `${RESIZABLE_ATTRIBUTE}-handle`;
4
5
  const RESIZABLE_ATTRIBUTE_MAXIMUM = `${RESIZABLE_ATTRIBUTE}-maximum`;
5
6
  const RESIZABLE_ATTRIBUTE_MINIMUM = `${RESIZABLE_ATTRIBUTE}-minimum`;
@@ -11,11 +12,13 @@ const RESIZABLE_SELECTOR = `[${RESIZABLE_ATTRIBUTE}]`;
11
12
  const RESIZABLE_SELECTOR_HANDLE = `[${RESIZABLE_ATTRIBUTE_HANDLE}]`;
12
13
  const RESIZABLE_SELECTOR_HANDLE_SCOPED = `:scope > ${RESIZABLE_SELECTOR_HANDLE}`;
13
14
  const RESIZABLE_SYMBOL = Symbol(RESIZABLE_ATTRIBUTE);
15
+ const resizableHorizontals = /* @__PURE__ */ new Set(["horizontal", "x"]);
14
16
  const resizableItems = /* @__PURE__ */ new WeakMap();
15
17
  const resizableStyles = {
16
18
  touchAction: "none",
17
19
  userSelect: "none",
18
20
  webkitUserSelect: "none"
19
21
  };
22
+ const resizableVerticals = /* @__PURE__ */ new Set(["vertical", "y"]);
20
23
  //#endregion
21
- export { RESIZABLE_ATTRIBUTE, RESIZABLE_ATTRIBUTE_HANDLE, RESIZABLE_ATTRIBUTE_MAXIMUM, RESIZABLE_ATTRIBUTE_MINIMUM, RESIZABLE_MESSAGE_ELEMENT, RESIZABLE_MESSAGE_HANDLE, RESIZABLE_MESSAGE_HEIGHT, RESIZABLE_MESSAGE_WIDTH, RESIZABLE_SELECTOR, RESIZABLE_SELECTOR_HANDLE, RESIZABLE_SELECTOR_HANDLE_SCOPED, RESIZABLE_SYMBOL, resizableItems, resizableStyles };
24
+ export { RESIZABLE_ATTRIBUTE, RESIZABLE_ATTRIBUTE_DIRECTION, RESIZABLE_ATTRIBUTE_HANDLE, RESIZABLE_ATTRIBUTE_MAXIMUM, RESIZABLE_ATTRIBUTE_MINIMUM, RESIZABLE_MESSAGE_ELEMENT, RESIZABLE_MESSAGE_HANDLE, RESIZABLE_MESSAGE_HEIGHT, RESIZABLE_MESSAGE_WIDTH, RESIZABLE_SELECTOR, RESIZABLE_SELECTOR_HANDLE, RESIZABLE_SELECTOR_HANDLE_SCOPED, RESIZABLE_SYMBOL, resizableHorizontals, resizableItems, resizableStyles, resizableVerticals };
@@ -1,3 +1,3 @@
1
- import { n as OuiResizable, t as CreateOuiResizableOptions } from "../resizable.model-YEtcC9li.mjs";
2
- import { t as createResizable } from "../resizable.embedded-BemH-7Re.mjs";
1
+ import { n as OuiResizable, t as CreateOuiResizableOptions } from "../resizable.model-vCxaFdOA.mjs";
2
+ import { t as createResizable } from "../resizable.embedded-D9mb-Wm_.mjs";
3
3
  export { type CreateOuiResizableOptions, type OuiResizable, createResizable as createOuiResizable };
@@ -1,2 +1 @@
1
- import { createResizable } from "./resizable.embedded.mjs";
2
- export { createResizable as createOuiResizable };
1
+ export { createResizable as createOuiResizable } from "./resizable.embedded.mjs";
@@ -1,4 +1,4 @@
1
- import { n as OuiResizable, t as CreateOuiResizableOptions } from "./resizable.model-YEtcC9li.mjs";
1
+ import { n as OuiResizable, t as CreateOuiResizableOptions } from "./resizable.model-vCxaFdOA.mjs";
2
2
  //#region src/js/resizable/resizable.embedded.d.ts
3
3
  /**
4
4
  * Creates _(or retrieves)_ a _OuiResizable_ instance for an element
@@ -12,6 +12,7 @@ type OuiResizable = {
12
12
  reset(): void;
13
13
  set(): void;
14
14
  };
15
+ type OuiResizableDirection = "horizontal" | "vertical" | "x" | "y";
15
16
  type OuiResizableItem = {
16
17
  instance: OuiResizable;
17
18
  state: OuiResizableState;
@@ -20,11 +21,14 @@ type OuiResizableState = {
20
21
  element: Element;
21
22
  handle: Element;
22
23
  height: number;
24
+ horizontal: boolean;
23
25
  options: Required<CreateOuiResizableOptions>;
24
26
  styles: StyleToggler;
27
+ vertical: boolean;
25
28
  width: number;
26
29
  };
27
30
  declare const RESIZABLE_ATTRIBUTE = "oui-resizable";
31
+ declare const RESIZABLE_ATTRIBUTE_DIRECTION: string;
28
32
  declare const RESIZABLE_ATTRIBUTE_HANDLE: string;
29
33
  declare const RESIZABLE_ATTRIBUTE_MAXIMUM: string;
30
34
  declare const RESIZABLE_ATTRIBUTE_MINIMUM: string;
@@ -36,11 +40,13 @@ declare const RESIZABLE_SELECTOR: string;
36
40
  declare const RESIZABLE_SELECTOR_HANDLE: string;
37
41
  declare const RESIZABLE_SELECTOR_HANDLE_SCOPED: string;
38
42
  declare const RESIZABLE_SYMBOL: unique symbol;
43
+ declare const resizableHorizontals: Set<OuiResizableDirection>;
39
44
  declare const resizableItems: WeakMap<Element, OuiResizableItem>;
40
45
  declare const resizableStyles: {
41
46
  touchAction: string;
42
47
  userSelect: string;
43
48
  webkitUserSelect: string;
44
49
  };
50
+ declare const resizableVerticals: Set<OuiResizableDirection>;
45
51
  //#endregion
46
- export { resizableItems as _, RESIZABLE_ATTRIBUTE as a, RESIZABLE_ATTRIBUTE_MINIMUM as c, RESIZABLE_MESSAGE_HEIGHT as d, RESIZABLE_MESSAGE_WIDTH as f, RESIZABLE_SYMBOL as g, RESIZABLE_SELECTOR_HANDLE_SCOPED as h, OuiResizableState as i, RESIZABLE_MESSAGE_ELEMENT as l, RESIZABLE_SELECTOR_HANDLE as m, OuiResizable as n, RESIZABLE_ATTRIBUTE_HANDLE as o, RESIZABLE_SELECTOR as p, OuiResizableItem as r, RESIZABLE_ATTRIBUTE_MAXIMUM as s, CreateOuiResizableOptions as t, RESIZABLE_MESSAGE_HANDLE as u, resizableStyles as v };
52
+ export { resizableVerticals as S, RESIZABLE_SELECTOR_HANDLE_SCOPED as _, OuiResizableState as a, resizableItems as b, RESIZABLE_ATTRIBUTE_HANDLE as c, RESIZABLE_MESSAGE_ELEMENT as d, RESIZABLE_MESSAGE_HANDLE as f, RESIZABLE_SELECTOR_HANDLE as g, RESIZABLE_SELECTOR as h, OuiResizableItem as i, RESIZABLE_ATTRIBUTE_MAXIMUM as l, RESIZABLE_MESSAGE_WIDTH as m, OuiResizable as n, RESIZABLE_ATTRIBUTE as o, RESIZABLE_MESSAGE_HEIGHT as p, OuiResizableDirection as r, RESIZABLE_ATTRIBUTE_DIRECTION as s, CreateOuiResizableOptions as t, RESIZABLE_ATTRIBUTE_MINIMUM as u, RESIZABLE_SYMBOL as v, resizableStyles as x, resizableHorizontals as y };
@@ -1,2 +1 @@
1
- import { createSortable } from "./sortable.embedded.mjs";
2
- export { createSortable };
1
+ export { createSortable } from "./sortable.embedded.mjs";
@@ -204,7 +204,7 @@ function onObservation(entries) {
204
204
  if (frame != null) cancelAnimationFrame(frame);
205
205
  frame = requestAnimationFrame(() => {
206
206
  for (const entry of entries) {
207
- const splitter = entry.target instanceof OuiSplitterElement || entry.target.hasAttribute(SPLITTER_ATTRIBUTE_HANDLE) || entry.target.hasAttribute(SPLITTER_ATTRIBUTE_SEPARATOR) ? findAncestor(entry.target, SPLITTER_TAGNAME)?.[SPLITTER_SYMBOL] : void 0;
207
+ const splitter = entry.target instanceof OuiSplitterElement || entry.target.hasAttribute("oui-splitter-handle") || entry.target.hasAttribute("oui-splitter-separator") ? findAncestor(entry.target, SPLITTER_TAGNAME)?.[SPLITTER_SYMBOL] : void 0;
208
208
  if (splitter == null) return;
209
209
  splitter.types = getTypes(splitter, entry.contentRect.width, entry.contentRect.height);
210
210
  setAttribute(splitter.element, SPLITTER_ATTRIBUTE_HORIZONTAL, splitter.types.horizontal ? "" : void 0);
@@ -132,7 +132,7 @@ function onFocusout() {
132
132
  if (activeTooltip == null) return;
133
133
  if (focusTimer != null) clearTimeout(focusTimer);
134
134
  focusTimer = setTimeout(() => {
135
- if (activeTooltip == null || document.activeElement == null || findAncestor(document.activeElement, TOOLTIP_SELECTOR) != null) return;
135
+ if (activeTooltip == null || document.activeElement == null || findAncestor(document.activeElement, "[oui-tooltip]") != null) return;
136
136
  closeTooltip(true, activeTooltip);
137
137
  activeTooltip = void 0;
138
138
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oscarpalmer/oui",
3
- "version": "0.41.0",
3
+ "version": "0.42.0",
4
4
  "description": "Styles, components, and utilities for building websites and applications.",
5
5
  "keywords": [
6
6
  "css",
@@ -109,7 +109,7 @@
109
109
  "watch": "concurrently \"cd ./demo/public && php -qS localhost:4567 \" \"vp run postcss:watch\" \"vp run css:watch\" \"vp run tsdown\""
110
110
  },
111
111
  "dependencies": {
112
- "@oscarpalmer/atoms": "^0.216",
112
+ "@oscarpalmer/atoms": "^0.220",
113
113
  "@oscarpalmer/toretto": "^0.56"
114
114
  },
115
115
  "devDependencies": {
@@ -120,7 +120,7 @@
120
120
  "postcss-cli": "^12",
121
121
  "postcss-input-range": "^6",
122
122
  "postcss-scss": "^4",
123
- "sass": "^1.105",
123
+ "sass": "^1.106",
124
124
  "stylelint": "^17.16",
125
125
  "stylelint-config-standard-scss": "^17",
126
126
  "tsdown": "^0.23",