ropav 0.13.0 → 0.15.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 (118) hide show
  1. package/dist/components/accordion/index.d.ts +1 -0
  2. package/dist/components/alert-dialog/alert-dialog-backdrop.js +3 -1
  3. package/dist/components/autocomplete/index.d.ts +1 -0
  4. package/dist/components/calendar/index.d.ts +1 -0
  5. package/dist/components/checkbox-group/index.d.ts +1 -0
  6. package/dist/components/color-slider/index.d.ts +1 -0
  7. package/dist/components/combo-box/index.d.ts +2 -0
  8. package/dist/components/date-field/index.d.ts +1 -0
  9. package/dist/components/date-picker/index.d.ts +2 -0
  10. package/dist/components/date-range-picker/index.d.ts +2 -0
  11. package/dist/components/date-range-picker/use-date-range-picker.js +1 -1
  12. package/dist/components/disclosure-group/index.d.ts +1 -0
  13. package/dist/components/drawer/drawer-backdrop.js +3 -1
  14. package/dist/components/dropdown/dropdown-menu.js +7 -3
  15. package/dist/components/dropdown/dropdown-root.js +1 -1
  16. package/dist/components/dropdown/dropdown-submenu-trigger.js +1 -1
  17. package/dist/components/dropdown/dropdown.context.d.ts +1 -1
  18. package/dist/components/dropdown/index.d.ts +1 -0
  19. package/dist/components/field-error/field-error-root.js +1 -1
  20. package/dist/components/form/form-root.js +1 -1
  21. package/dist/components/index.d.ts +1 -0
  22. package/dist/components/meter/meter-root.js +1 -1
  23. package/dist/components/modal/modal-backdrop.js +3 -1
  24. package/dist/components/number-field/index.d.ts +1 -0
  25. package/dist/components/overlay/overlay-popover.js +15 -6
  26. package/dist/components/portal-provider/index.d.ts +3 -0
  27. package/dist/components/portal-provider/index.js +2 -0
  28. package/dist/components/portal-provider/portal-provider.d.ts +21 -0
  29. package/dist/components/portal-provider/portal-provider.js +20 -0
  30. package/dist/components/portal-provider/portal-provider.types.d.ts +22 -0
  31. package/dist/components/radio-group/index.d.ts +1 -0
  32. package/dist/components/range-calendar/index.d.ts +1 -0
  33. package/dist/components/segmented-control/index.d.ts +1 -0
  34. package/dist/components/select/index.d.ts +1 -0
  35. package/dist/components/slider/index.d.ts +1 -0
  36. package/dist/components/table/table-drag-handle.js +1 -1
  37. package/dist/components/tabs/index.d.ts +1 -0
  38. package/dist/components/tabs/tabs-root.js +5 -0
  39. package/dist/components/tabs/tabs.types.d.ts +8 -0
  40. package/dist/components/time-field/index.d.ts +2 -0
  41. package/dist/components/toast/toast-provider.js +3 -1
  42. package/dist/components/toggle-button/index.d.ts +1 -0
  43. package/dist/components/toggle-button-group/index.d.ts +1 -0
  44. package/dist/components/tooltip/index.d.ts +1 -0
  45. package/dist/components/tooltip/tooltip-content.js +4 -1
  46. package/dist/composables/drag-manager.js +1 -1
  47. package/dist/composables/drag-modality.js +2 -1
  48. package/dist/composables/focus-scope-registry.d.ts +27 -0
  49. package/dist/composables/focus-scope-registry.js +45 -0
  50. package/dist/composables/form-context.d.ts +25 -0
  51. package/dist/composables/form-context.js +17 -0
  52. package/dist/composables/index.d.ts +1 -24
  53. package/dist/composables/interaction-modality.d.ts +42 -0
  54. package/dist/composables/interaction-modality.js +91 -0
  55. package/dist/composables/use-calendar-cell.js +1 -1
  56. package/dist/composables/use-checkbox-group-state.js +2 -1
  57. package/dist/composables/use-combo-box-state.d.ts +2 -1
  58. package/dist/composables/use-combo-box-state.js +3 -2
  59. package/dist/composables/use-combo-box.js +6 -3
  60. package/dist/composables/use-css-variable.js +1 -5
  61. package/dist/composables/use-default-locale.d.ts +9 -0
  62. package/dist/composables/use-default-locale.js +39 -0
  63. package/dist/composables/use-dismissable.d.ts +6 -0
  64. package/dist/composables/use-dismissable.js +9 -11
  65. package/dist/composables/use-display-names.js +1 -1
  66. package/dist/composables/use-drag.js +1 -1
  67. package/dist/composables/use-droppable-collection.js +1 -1
  68. package/dist/composables/use-focus-scope.d.ts +6 -12
  69. package/dist/composables/use-focus-scope.js +14 -33
  70. package/dist/composables/use-form-validation-state.d.ts +1 -60
  71. package/dist/composables/use-form-validation-state.js +3 -134
  72. package/dist/composables/use-form-validation.d.ts +2 -1
  73. package/dist/composables/use-form-validation.js +2 -2
  74. package/dist/composables/use-interaction-states.d.ts +0 -36
  75. package/dist/composables/use-interaction-states.js +8 -91
  76. package/dist/composables/use-locale.d.ts +0 -14
  77. package/dist/composables/use-locale.js +4 -37
  78. package/dist/composables/use-localized-string-dictionary.d.ts +10 -0
  79. package/dist/composables/use-localized-string-dictionary.js +26 -0
  80. package/dist/composables/use-localized-string-formatter.d.ts +0 -9
  81. package/dist/composables/use-localized-string-formatter.js +3 -24
  82. package/dist/composables/use-long-press.d.ts +0 -2
  83. package/dist/composables/use-long-press.js +2 -2
  84. package/dist/composables/use-menu-trigger-state.d.ts +64 -0
  85. package/dist/composables/use-menu-trigger-state.js +90 -0
  86. package/dist/composables/use-menu-trigger.d.ts +2 -1
  87. package/dist/composables/use-modal-overlay.d.ts +2 -1
  88. package/dist/composables/use-modal-overlay.js +17 -4
  89. package/dist/composables/use-overlay-trigger-state.d.ts +0 -62
  90. package/dist/composables/use-overlay-trigger-state.js +2 -87
  91. package/dist/composables/use-page-size.d.ts +14 -0
  92. package/dist/composables/use-page-size.js +42 -0
  93. package/dist/composables/use-portal.d.ts +35 -0
  94. package/dist/composables/use-portal.js +47 -0
  95. package/dist/composables/use-press.d.ts +0 -20
  96. package/dist/composables/use-press.js +3 -26
  97. package/dist/composables/use-range-calendar.js +1 -1
  98. package/dist/composables/use-select-state.d.ts +1 -1
  99. package/dist/composables/use-select-state.js +1 -1
  100. package/dist/composables/use-slider.js +1 -1
  101. package/dist/composables/use-toast-region.js +2 -1
  102. package/dist/composables/use-tooltip-trigger-state.js +1 -15
  103. package/dist/composables/use-tooltip-trigger.js +1 -1
  104. package/dist/composables/use-viewport-size.d.ts +0 -13
  105. package/dist/composables/use-viewport-size.js +1 -38
  106. package/dist/composables/validation-result.d.ts +37 -0
  107. package/dist/composables/validation-result.js +122 -0
  108. package/dist/composables/virtual-event.d.ts +20 -0
  109. package/dist/composables/virtual-event.js +28 -0
  110. package/dist/index.js +13 -35
  111. package/dist/ropav.min.css +1 -1
  112. package/dist/utils/aria-hide-outside.d.ts +4 -1
  113. package/dist/utils/aria-hide-outside.js +17 -5
  114. package/dist/utils/date-validation.js +1 -1
  115. package/dist/utils/region.d.ts +10 -0
  116. package/dist/utils/region.js +13 -0
  117. package/dist/version.js +1 -1
  118. package/package.json +6 -2
@@ -7,5 +7,6 @@ import AccordionRoot from "./accordion-root.js";
7
7
  import AccordionTrigger from "./accordion-trigger.js";
8
8
  export { AccordionRoot as Accordion, AccordionItem, AccordionHeading, AccordionTrigger, AccordionPanel, AccordionIndicator, AccordionBody, };
9
9
  export type { AccordionRootProps as AccordionProps, AccordionItemProps, AccordionHeadingProps, AccordionTriggerProps, AccordionPanelProps, AccordionIndicatorProps, AccordionBodyProps, } from "./accordion.types.js";
10
+ export type { DisclosureKey } from "../../composables/use-disclosure-group.js";
10
11
  export { accordionVariants } from "@ropav/styles";
11
12
  export type { AccordionVariants } from "@ropav/styles";
@@ -1,6 +1,7 @@
1
1
  import { dataAttr } from "../../utils/assertion.js";
2
2
  import { provideFocusResponder } from "../../composables/focus-responder.js";
3
3
  import { providePressResponder } from "../../composables/press-responder.js";
4
+ import { usePortal } from "../../composables/use-portal.js";
4
5
  import { useModalOverlay } from "../../composables/use-modal-overlay.js";
5
6
  import { useModalTransition } from "../../composables/use-modal-transition.js";
6
7
  import { provideAlertDialogContext, provideAlertDialogOverlayContext, useAlertDialogContext } from "./alert-dialog.context.js";
@@ -101,7 +102,8 @@ var alert_dialog_backdrop_vue_vue_type_script_setup_true_vapor_true_lang_default
101
102
  }
102
103
  });
103
104
  const styles = computed(() => slots.value.backdrop({ class: props.class }));
104
- const target = computed(() => props.portalContainer ?? "body");
105
+ const portal = usePortal();
106
+ const target = computed(() => props.portalContainer ?? portal.container.value);
105
107
  const setElement = (next) => {
106
108
  backdropElement.value = next ?? null;
107
109
  };
@@ -10,5 +10,6 @@ export type { AutocompleteClearButtonProps, AutocompleteFilterEmits, Autocomplet
10
10
  export { useAutocompleteContext } from "./autocomplete.context.js";
11
11
  export type { AutocompleteContext } from "./autocomplete.context.js";
12
12
  export type { UseSelectReturn } from "../../composables/use-select.js";
13
+ export type { SelectedItem, SelectedValue, UseSelectStateReturn, } from "../../composables/use-select-state.js";
13
14
  export { autocompleteVariants } from "@ropav/styles";
14
15
  export type { AutocompleteVariants } from "@ropav/styles";
@@ -14,5 +14,6 @@ export { provideCalendarOwnerContext, provideCalendarStateContext, useCalendarOw
14
14
  export type { CalendarOwnedProps, CalendarOwnerContext, CalendarStateContext, } from "./calendar.context.js";
15
15
  export type { AnyCalendarState, UseCalendarReturn } from "../../composables/use-calendar.js";
16
16
  export type { CalendarHeadingFormatOptions } from "../../composables/use-calendar-heading.js";
17
+ export type { CalendarSelectionMode, CalendarValue, PageBehavior, SelectionAlignment, } from "../../composables/use-calendar-state.js";
17
18
  export { calendarVariants } from "@ropav/styles";
18
19
  export type { CalendarVariants } from "@ropav/styles";
@@ -3,5 +3,6 @@ export { CheckboxGroupRoot as CheckboxGroup };
3
3
  export type { CheckboxGroupRootProps as CheckboxGroupProps, CheckboxGroupSlotProps, } from "./checkbox-group.types.js";
4
4
  export { useCheckboxGroupContext, provideCheckboxGroupContext } from "./checkbox-group.context.js";
5
5
  export type { CheckboxGroupContext } from "./checkbox-group.context.js";
6
+ export type { CheckboxGroupState } from "../../composables/use-checkbox-group-state.js";
6
7
  export { checkboxGroupVariants } from "@ropav/styles";
7
8
  export type { CheckboxGroupVariants } from "@ropav/styles";
@@ -4,5 +4,6 @@ import ColorSliderThumb from "./color-slider-thumb.js";
4
4
  import ColorSliderTrack from "./color-slider-track.js";
5
5
  export { ColorSliderRoot as ColorSlider, ColorSliderOutput, ColorSliderTrack, ColorSliderThumb };
6
6
  export type { ColorSliderRootProps as ColorSliderProps, ColorSliderOutputProps, ColorSliderTrackProps, ColorSliderThumbProps, ColorSliderSlotProps, ColorSliderThumbSlotProps, } from "./color-slider.types.js";
7
+ export type { SliderOrientation } from "../../composables/use-slider-state.js";
7
8
  export { colorSliderVariants } from "@ropav/styles";
8
9
  export type { ColorSliderVariants } from "@ropav/styles";
@@ -8,5 +8,7 @@ export type { ComboBoxInputGroupProps, ComboBoxInputGroupSlotProps, ComboBoxPopo
8
8
  export { useComboBoxContext } from "./combo-box.context.js";
9
9
  export type { ComboBoxContext } from "./combo-box.context.js";
10
10
  export type { UseComboBoxReturn } from "../../composables/use-combo-box.js";
11
+ export type { ComboBoxFilter, ComboBoxMenuTrigger, ComboBoxValidationValue, UseComboBoxStateReturn, } from "../../composables/use-combo-box-state.js";
12
+ export type { SelectSelectionMode, SelectedItem, SelectedValue, } from "../../composables/use-select-state.js";
11
13
  export { comboBoxVariants } from "@ropav/styles";
12
14
  export type { ComboBoxVariants } from "@ropav/styles";
@@ -4,5 +4,6 @@ export { DateInputGroupInput as DateFieldInput, DateInputGroupInputContainer as
4
4
  export { DateFieldRoot as DateField };
5
5
  export type { DateFieldRootProps as DateFieldProps, DateFieldRootSlotProps as DateFieldSlotProps, } from "./date-field.types.js";
6
6
  export type { DateInputGroupInputContainerProps as DateFieldInputContainerProps, DateInputGroupInputProps as DateFieldInputProps, DateInputGroupInputSlotProps as DateFieldInputSlotProps, DateInputGroupPrefixProps as DateFieldPrefixProps, DateInputGroupRootProps as DateFieldGroupProps, DateInputGroupRootSlotProps as DateFieldGroupSlotProps, DateInputGroupSegmentProps as DateFieldSegmentProps, DateInputGroupSuffixProps as DateFieldSuffixProps, } from "../date-input-group/index.js";
7
+ export type { DateSegment } from "../../composables/use-date-field-state.js";
7
8
  export { dateFieldVariants, dateInputGroupVariants } from "@ropav/styles";
8
9
  export type { DateFieldVariants, DateInputGroupVariants } from "@ropav/styles";
@@ -9,5 +9,7 @@ export type { DatePickerPopoverProps, DatePickerRootProps as DatePickerProps, Da
9
9
  export type { DateInputGroupInputContainerProps as DatePickerInputContainerProps, DateInputGroupInputProps as DatePickerInputProps, DateInputGroupInputSlotProps as DatePickerInputSlotProps, DateInputGroupPrefixProps as DatePickerPrefixProps, DateInputGroupRootProps as DatePickerGroupProps, DateInputGroupRootSlotProps as DatePickerGroupSlotProps, DateInputGroupSegmentProps as DatePickerSegmentProps, DateInputGroupSuffixProps as DatePickerSuffixProps, } from "../date-input-group/index.js";
10
10
  export { provideDatePickerContext, useDatePickerContext } from "./date-picker.context.js";
11
11
  export type { DatePickerContext } from "./date-picker.context.js";
12
+ export type { PageBehavior } from "../../composables/use-calendar-state.js";
13
+ export type { DateSegment } from "../../composables/use-date-field-state.js";
12
14
  export { dateInputGroupVariants, datePickerVariants } from "@ropav/styles";
13
15
  export type { DateInputGroupVariants, DatePickerVariants } from "@ropav/styles";
@@ -11,5 +11,7 @@ export type { DateInputGroupInputContainerProps as DateRangePickerInputContainer
11
11
  export { provideDateRangePickerContext, useDateRangePickerContext, } from "./date-range-picker.context.js";
12
12
  export type { DateRangePickerContext } from "./date-range-picker.context.js";
13
13
  export type { DateRange } from "../../composables/use-calendar.js";
14
+ export type { PageBehavior } from "../../composables/use-calendar-state.js";
15
+ export type { DateSegment } from "../../composables/use-date-field-state.js";
14
16
  export { dateInputGroupVariants, dateRangePickerVariants } from "@ropav/styles";
15
17
  export type { DateInputGroupVariants, DateRangePickerVariants } from "@ropav/styles";
@@ -1,7 +1,7 @@
1
1
  import { useId as useId$1 } from "../../composables/use-id.js";
2
2
  import { createFocusManager } from "../../utils/focus.js";
3
3
  import { useFieldIds } from "../../composables/use-field-ids.js";
4
- import { DEFAULT_VALIDATION_RESULT, mergeValidation } from "../../composables/use-form-validation-state.js";
4
+ import { DEFAULT_VALIDATION_RESULT, mergeValidation } from "../../composables/validation-result.js";
5
5
  import { useLocale } from "../../composables/use-locale.js";
6
6
  import { useLocalizedStringFormatter } from "../../composables/use-localized-string-formatter.js";
7
7
  import { useDescription } from "../../composables/use-description.js";
@@ -3,6 +3,7 @@ export { DisclosureGroupRoot as DisclosureGroup };
3
3
  export type { DisclosureGroupRootProps as DisclosureGroupProps } from "./disclosure-group.types.js";
4
4
  export { useDisclosureGroupContext } from "./disclosure-group.context.js";
5
5
  export type { DisclosureGroupContext } from "./disclosure-group.context.js";
6
+ export type { DisclosureKey, UseDisclosureGroupReturn, } from "../../composables/use-disclosure-group.js";
6
7
  export { useDisclosureGroupNavigation } from "../../composables/use-disclosure-group-navigation.js";
7
8
  export type { UseDisclosureGroupNavigationOptions, UseDisclosureGroupNavigationReturn, } from "../../composables/use-disclosure-group-navigation.js";
8
9
  export { disclosureGroupVariants } from "@ropav/styles";
@@ -1,6 +1,7 @@
1
1
  import { dataAttr } from "../../utils/assertion.js";
2
2
  import { provideFocusResponder } from "../../composables/focus-responder.js";
3
3
  import { providePressResponder } from "../../composables/press-responder.js";
4
+ import { usePortal } from "../../composables/use-portal.js";
4
5
  import { useModalOverlay } from "../../composables/use-modal-overlay.js";
5
6
  import { useModalTransition } from "../../composables/use-modal-transition.js";
6
7
  import { provideDrawerContext, provideDrawerOverlayContext, useDrawerContext } from "./drawer.context.js";
@@ -98,7 +99,8 @@ var drawer_backdrop_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
98
99
  }
99
100
  });
100
101
  const styles = computed(() => slots.value.backdrop({ class: props.class }));
101
- const target = computed(() => props.portalContainer ?? "body");
102
+ const portal = usePortal();
103
+ const target = computed(() => props.portalContainer ?? portal.container.value);
102
104
  const setElement = (next) => {
103
105
  backdropElement.value = next ?? null;
104
106
  };
@@ -2,6 +2,7 @@ import { provideSeparatorContext } from "../separator/separator.context.js";
2
2
  import { useMenu } from "../../composables/use-menu.js";
3
3
  import { useDropdownPopoverTarget } from "./dropdown.context.js";
4
4
  import { computed, createIf, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref, useSlots } from "vue";
5
+ import { menuVariants } from "@ropav/styles";
5
6
  //#region src/components/dropdown/dropdown-menu.vue?vue&type=script&setup=true&vapor=true&lang.ts
6
7
  var t0 = template("<div>");
7
8
  var t1 = template("<div>", 1);
@@ -36,6 +37,10 @@ var dropdown_menu_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
36
37
  const emit = __emit;
37
38
  const callerSlots = useSlots();
38
39
  const target = useDropdownPopoverTarget();
40
+ const styles = computed(() => menuVariants({
41
+ class: ["rp-dropdown__menu", props.class],
42
+ size: props.size
43
+ }));
39
44
  provideSeparatorContext({ elementType: "div" });
40
45
  const menu = useMenu({
41
46
  autoFocus: target.autoFocus,
@@ -62,12 +67,11 @@ var dropdown_menu_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
62
67
  const hasEmptySlot = computed(() => Boolean(callerSlots["empty"]));
63
68
  const n5 = t1();
64
69
  renderEffect(() => {
65
- const _props = props;
66
70
  const _menu = unref(menu);
67
71
  setDynamicProps(n5, [
68
72
  {
69
- class: ["rp-menu rp-dropdown__menu", _props.class],
70
- "data-selection-mode": _props.selectionMode,
73
+ class: styles.value,
74
+ "data-selection-mode": props.selectionMode,
71
75
  "data-slot": "dropdown-menu"
72
76
  },
73
77
  _menu.menuAttributes.value,
@@ -1,5 +1,5 @@
1
1
  import { providePressResponder } from "../../composables/press-responder.js";
2
- import { useMenuTriggerState } from "../../composables/use-overlay-trigger-state.js";
2
+ import { useMenuTriggerState } from "../../composables/use-menu-trigger-state.js";
3
3
  import { useMenuTrigger } from "../../composables/use-menu-trigger.js";
4
4
  import { provideDropdownContext, provideDropdownPopoverTarget } from "./dropdown.context.js";
5
5
  import { computed, createSlot, defineVaporComponent } from "vue";
@@ -1,5 +1,5 @@
1
1
  import { useId as useId$1 } from "../../composables/use-id.js";
2
- import { useSubmenuTriggerState } from "../../composables/use-overlay-trigger-state.js";
2
+ import { useSubmenuTriggerState } from "../../composables/use-menu-trigger-state.js";
3
3
  import { provideMenuItemPopupContext } from "../menu-item/menu-item.context.js";
4
4
  import { useMenuContext } from "../menu/menu.context.js";
5
5
  import { provideDropdownPopoverTarget, useDropdownContext } from "./dropdown.context.js";
@@ -1,4 +1,4 @@
1
- import type { RootMenuTriggerState } from "../../composables/use-overlay-trigger-state.js";
1
+ import type { RootMenuTriggerState } from "../../composables/use-menu-trigger-state.js";
2
2
  import type { OverlayTargetContext } from "../overlay/index.js";
3
3
  import type { dropdownVariants } from "@ropav/styles";
4
4
  import type { ComputedRef } from "vue";
@@ -8,5 +8,6 @@ export type { DropdownMenuProps, DropdownPopoverProps, DropdownRootEmits as Drop
8
8
  export { useDropdownContext, useDropdownPopoverTarget } from "./dropdown.context.js";
9
9
  export type { DropdownContext, DropdownPopoverTarget } from "./dropdown.context.js";
10
10
  export type { MenuTriggerType } from "../../composables/use-menu-trigger.js";
11
+ export type { RootMenuTriggerState } from "../../composables/use-menu-trigger-state.js";
11
12
  export { dropdownVariants } from "@ropav/styles";
12
13
  export type { DropdownVariants } from "@ropav/styles";
@@ -1,4 +1,4 @@
1
- import { DEFAULT_VALIDATION_RESULT } from "../../composables/use-form-validation-state.js";
1
+ import { DEFAULT_VALIDATION_RESULT } from "../../composables/validation-result.js";
2
2
  import field_error_content_default from "./field-error-content.js";
3
3
  import { useFieldErrorContext } from "./field-error.context.js";
4
4
  import { computed, createComponent, createIf, createSlot, defineVaporComponent, extend, renderEffect, setText, template, toDisplayString } from "vue";
@@ -1,4 +1,4 @@
1
- import { provideFormContext } from "../../composables/use-form-validation-state.js";
1
+ import { provideFormContext } from "../../composables/form-context.js";
2
2
  import { computed, createSlot, defineVaporComponent, on, renderEffect, setClass, setInsertionState, setProp, shallowRef, template } from "vue";
3
3
  //#region src/components/form/form-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
4
4
  var t0 = template("<form>", 1);
@@ -58,6 +58,7 @@ export * from "./modal/index.js";
58
58
  export * from "./number-field/index.js";
59
59
  export * from "./pagination/index.js";
60
60
  export * from "./popover/index.js";
61
+ export * from "./portal-provider/index.js";
61
62
  export * from "./progress-bar/index.js";
62
63
  export * from "./progress-circle/index.js";
63
64
  export * from "./radio/index.js";
@@ -5,7 +5,7 @@ import { useProgressValue } from "../../composables/use-progress-value.js";
5
5
  import { computed, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setProp, template, unref } from "vue";
6
6
  import { meterVariants } from "@ropav/styles";
7
7
  //#region src/components/meter/meter-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
8
- var t0 = template("<div data-slot=meter role=\"meter progressbar\">", 1);
8
+ var t0 = template("<div data-slot=meter role=meter>", 1);
9
9
  var meter_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
10
10
  __name: "meter-root",
11
11
  props: {
@@ -1,6 +1,7 @@
1
1
  import { dataAttr } from "../../utils/assertion.js";
2
2
  import { provideFocusResponder } from "../../composables/focus-responder.js";
3
3
  import { providePressResponder } from "../../composables/press-responder.js";
4
+ import { usePortal } from "../../composables/use-portal.js";
4
5
  import { useModalOverlay } from "../../composables/use-modal-overlay.js";
5
6
  import { useModalTransition } from "../../composables/use-modal-transition.js";
6
7
  import { provideModalContext, provideModalOverlayContext, useModalContext } from "./modal.context.js";
@@ -95,7 +96,8 @@ var modal_backdrop_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@_
95
96
  }
96
97
  });
97
98
  const styles = computed(() => slots.value.backdrop({ class: props.class }));
98
- const target = computed(() => props.portalContainer ?? "body");
99
+ const portal = usePortal();
100
+ const target = computed(() => props.portalContainer ?? portal.container.value);
99
101
  const setElement = (next) => {
100
102
  backdropElement.value = next ?? null;
101
103
  };
@@ -8,5 +8,6 @@ export type { NumberFieldRootProps as NumberFieldProps, NumberFieldRootSlotProps
8
8
  export { provideNumberFieldContext, useNumberFieldContext } from "./number-field.context.js";
9
9
  export type { NumberFieldContext } from "./number-field.context.js";
10
10
  export type { NumberFieldStepper, UseNumberFieldReturn } from "../../composables/use-number-field.js";
11
+ export type { NumberFieldCommitBehavior } from "../../composables/use-number-field-state.js";
11
12
  export { numberFieldVariants } from "@ropav/styles";
12
13
  export type { NumberFieldVariants } from "@ropav/styles";
@@ -1,8 +1,9 @@
1
1
  import { dataAttr } from "../../utils/assertion.js";
2
2
  import { provideSurfaceContext } from "../surface/surface.context.js";
3
3
  import { ariaHideOutside, keepVisible } from "../../utils/aria-hide-outside.js";
4
- import { useFocusScope } from "../../composables/use-focus-scope.js";
5
4
  import { useDismissable } from "../../composables/use-dismissable.js";
5
+ import { useFocusScope } from "../../composables/use-focus-scope.js";
6
+ import { usePortal } from "../../composables/use-portal.js";
6
7
  import { usePreventScroll } from "../../composables/use-prevent-scroll.js";
7
8
  import { useEnterExit } from "../../composables/use-enter-exit.js";
8
9
  import { provideOverlayGroupContext, useOverlayGroupContext, useOverlayTargetContext } from "./overlay.context.js";
@@ -54,6 +55,7 @@ var overlay_popover_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
54
55
  const props = __props;
55
56
  const target = useOverlayTargetContext();
56
57
  const group = useOverlayGroupContext();
58
+ const portal = usePortal();
57
59
  /**
58
60
  * Modality belongs to the overlay, not to the thing that opened it.
59
61
  *
@@ -88,6 +90,7 @@ var overlay_popover_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
88
90
  const { arrowStyle, overlayStyle, placement } = useOverlayPosition({
89
91
  arrowBoundaryOffset: () => props.arrowBoundaryOffset,
90
92
  arrowRef: arrow,
93
+ boundaryElement: () => portal.root.value,
91
94
  containerPadding: () => props.containerPadding,
92
95
  crossOffset: () => props.crossOffset,
93
96
  isOpen: () => target.state.isOpen.value,
@@ -138,6 +141,7 @@ var overlay_popover_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
138
141
  isOpen: () => target.state.isOpen.value,
139
142
  onClose: target.state.close,
140
143
  overlayRef: element,
144
+ region: () => portal.root.value,
141
145
  shouldCloseOnBlur: true,
142
146
  shouldCloseOnInteractOutside
143
147
  });
@@ -157,14 +161,18 @@ var overlay_popover_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
157
161
  () => target.state.isOpen.value,
158
162
  element,
159
163
  ownContainer,
160
- isNonModal
161
- ], ([isOpen, popover, container], _previous, onCleanup) => {
164
+ isNonModal,
165
+ () => portal.root.value
166
+ ], ([isOpen, popover, container, nonModal, root], _previous, onCleanup) => {
162
167
  if (!isOpen || !popover) return;
163
- if (isNonModal.value) {
168
+ if (nonModal) {
164
169
  onCleanup(keepVisible(popover) ?? (() => {}));
165
170
  return;
166
171
  }
167
- onCleanup(ariaHideOutside([container ?? popover], { shouldUseInert: true }));
172
+ onCleanup(ariaHideOutside([container ?? popover], {
173
+ root: root ?? void 0,
174
+ shouldUseInert: true
175
+ }));
168
176
  }, {
169
177
  flush: "post",
170
178
  immediate: true
@@ -172,6 +180,7 @@ var overlay_popover_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
172
180
  useFocusScope({
173
181
  contain: () => isDialog.value || focusContainRequests.value > 0,
174
182
  isActive: () => target.state.isOpen.value,
183
+ region: () => portal.root.value,
175
184
  restoreFocus: true,
176
185
  scopeRef: element
177
186
  });
@@ -215,7 +224,7 @@ var overlay_popover_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
215
224
  ownContainer.value = next ?? null;
216
225
  };
217
226
  return [createIf(() => !unref(isSubOverlay) && isPresent.value, () => {
218
- return createComponent(VaporTeleport, { to: "body" }, () => {
227
+ return createComponent(VaporTeleport, { to: () => unref(portal).container.value }, () => {
219
228
  const n2 = t0();
220
229
  setStyle(n2, CONTAINER_STYLE);
221
230
  setTemplateRefBinding(n2, () => setContainer);
@@ -0,0 +1,3 @@
1
+ import PortalProviderRoot from "./portal-provider.js";
2
+ export { PortalProviderRoot as PortalProvider };
3
+ export type { PortalProviderRootProps as PortalProviderProps } from "./portal-provider.types.js";
@@ -0,0 +1,2 @@
1
+ import portal_provider_default from "./portal-provider.js";
2
+ export { portal_provider_default as PortalProvider };
@@ -0,0 +1,21 @@
1
+ import type { PortalProviderRootProps } from "./portal-provider.types.js";
2
+ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
3
+ props: import('vue').PublicProps & __VLS_PrettifyLocal<PortalProviderRootProps> & (typeof globalThis extends {
4
+ __VLS_PROPS_FALLBACK: infer P;
5
+ } ? P : {});
6
+ expose: (exposed: {}) => void;
7
+ attrs: any;
8
+ slots: {
9
+ default?: () => unknown;
10
+ };
11
+ emit: {};
12
+ }>) => import('vue').VNode & {
13
+ __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
14
+ };
15
+ declare const _default: typeof __VLS_export;
16
+ export default _default;
17
+ type __VLS_PrettifyLocal<T> = (T extends any ? {
18
+ [K in keyof T]: T[K];
19
+ } : {
20
+ [K in keyof T as K]: T[K];
21
+ }) & {};
@@ -0,0 +1,20 @@
1
+ import { providePortal } from "../../composables/use-portal.js";
2
+ import { createSlot, defineVaporComponent } from "vue";
3
+ //#region src/components/portal-provider/portal-provider.vue?vue&type=script&setup=true&vapor=true&lang.ts
4
+ var portal_provider_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
5
+ __name: "portal-provider",
6
+ props: {
7
+ container: {},
8
+ root: {}
9
+ },
10
+ setup(__props) {
11
+ const props = __props;
12
+ providePortal({
13
+ container: () => props.container,
14
+ root: () => props.root
15
+ });
16
+ return createSlot();
17
+ }
18
+ });
19
+ //#endregion
20
+ export { portal_provider_vue_vue_type_script_setup_true_vapor_true_lang_default as default };
@@ -0,0 +1,22 @@
1
+ export interface PortalProviderRootProps {
2
+ /**
3
+ * Where every overlay below renders: modals, alert dialogs, drawers, popovers, menus, the
4
+ * listboxes of pickers, tooltips and toast regions. A component's own `portalContainer` still
5
+ * wins.
6
+ *
7
+ * Omitted, it inherits the enclosing provider's container; `null` goes back to the document's
8
+ * body. An element other than the body has to be a containing block for `position: fixed` (a
9
+ * `transform`, or `contain: layout` or `paint`) sized to the area the overlays cover: backdrops
10
+ * fill it, and modals size to it rather than to the visual viewport.
11
+ */
12
+ container?: HTMLElement | string | null;
13
+ /**
14
+ * The part of the page the overlays below belong to, usually an element holding both the content
15
+ * and the `container`. A modal makes only this element `inert` and holds focus and outside
16
+ * presses only within it, and a placed overlay flips and shifts to stay inside it — so an app
17
+ * rendered in a window of a larger page leaves the rest of that page alone.
18
+ *
19
+ * Omitted, it inherits the enclosing provider's root; `null` goes back to the whole document.
20
+ */
21
+ root?: HTMLElement | null;
22
+ }
@@ -3,5 +3,6 @@ export { RadioGroupRoot as RadioGroup };
3
3
  export type { RadioGroupRootProps as RadioGroupProps, RadioGroupSlotProps, } from "./radio-group.types.js";
4
4
  export { useRadioGroupContext, provideRadioGroupContext } from "./radio-group.context.js";
5
5
  export type { RadioGroupContext } from "./radio-group.context.js";
6
+ export type { RadioGroupState } from "../../composables/use-radio-group-state.js";
6
7
  export { radioGroupVariants } from "@ropav/styles";
7
8
  export type { RadioGroupVariants } from "@ropav/styles";
@@ -14,6 +14,7 @@ export { provideRangeCalendarContext, provideRangeCalendarOwnerContext, useRange
14
14
  export type { RangeCalendarContext, RangeCalendarOwnedProps, RangeCalendarOwnerContext, } from "./range-calendar.context.js";
15
15
  export type { AnyCalendarState, DateRange } from "../../composables/use-calendar.js";
16
16
  export type { CalendarHeadingFormatOptions } from "../../composables/use-calendar-heading.js";
17
+ export type { PageBehavior, SelectionAlignment } from "../../composables/use-calendar-state.js";
17
18
  export type { RangeCalendarCommitBehavior } from "../../composables/use-range-calendar.js";
18
19
  export { rangeCalendarVariants } from "@ropav/styles";
19
20
  export type { RangeCalendarVariants } from "@ropav/styles";
@@ -6,5 +6,6 @@ export { SegmentedControlRoot as SegmentedControl, SegmentedControlItem, Segment
6
6
  export type { SegmentedControlRootProps as SegmentedControlProps, SegmentedControlRootSlotProps as SegmentedControlSlotProps, SegmentedControlItemProps, SegmentedControlItemSlotProps, SegmentedControlIndicatorProps, SegmentedControlSeparatorProps, SegmentedControlOrientation, } from "./segmented-control.types.js";
7
7
  export { useSegmentedControlContext, useSegmentedControlItemContext, } from "./segmented-control.context.js";
8
8
  export type { SegmentedControlContext, SegmentedControlItemContext, } from "./segmented-control.context.js";
9
+ export type { UseSingleSelectListStateReturn } from "../../composables/use-single-select-list-state.js";
9
10
  export { segmentedControlVariants } from "@ropav/styles";
10
11
  export type { SegmentedControlVariants } from "@ropav/styles";
@@ -9,5 +9,6 @@ export type { SelectClearButtonProps, SelectIndicatorProps, SelectPopoverProps,
9
9
  export { useSelectContext } from "./select.context.js";
10
10
  export type { SelectContext } from "./select.context.js";
11
11
  export type { UseSelectReturn } from "../../composables/use-select.js";
12
+ export type { SelectSelectionMode, SelectedItem, SelectedValue, UseSelectStateReturn, } from "../../composables/use-select-state.js";
12
13
  export { selectVariants } from "@ropav/styles";
13
14
  export type { SelectVariants } from "@ropav/styles";
@@ -6,5 +6,6 @@ import SliderThumb from "./slider-thumb.js";
6
6
  import SliderTrack from "./slider-track.js";
7
7
  export { SliderRoot as Slider, SliderOutput, SliderTrack, SliderFill, SliderThumb, SliderMarks };
8
8
  export type { SliderRootProps as SliderProps, SliderOutputProps, SliderTrackProps, SliderFillProps, SliderThumbProps, SliderMarksProps, SliderSlotProps, SliderThumbSlotProps, } from "./slider.types.js";
9
+ export type { SliderOrientation } from "../../composables/use-slider-state.js";
9
10
  export { sliderVariants } from "@ropav/styles";
10
11
  export type { SliderVariants } from "@ropav/styles";
@@ -1,5 +1,5 @@
1
1
  import { providePressResponder } from "../../composables/press-responder.js";
2
- import { isVirtualClick, isVirtualPointerEvent } from "../../composables/use-press.js";
2
+ import { isVirtualClick, isVirtualPointerEvent } from "../../composables/virtual-event.js";
3
3
  import { useTableRowContext } from "./table.context.js";
4
4
  import { computed, createSlot, defineVaporComponent, shallowRef } from "vue";
5
5
  //#region src/components/table/table-drag-handle.vue?vue&type=script&setup=true&vapor=true&lang.ts
@@ -9,5 +9,6 @@ export { TabsRoot as Tabs, TabsListContainer, TabsList, TabsTab, TabsIndicator,
9
9
  export type { TabsRootProps as TabsProps, TabsRootSlotProps as TabsSlotProps, TabsListContainerProps, TabsListProps, TabsTabProps, TabsTabSlotProps, TabsIndicatorProps, TabsSeparatorProps, TabsPanelProps, TabsPanelSlotProps, TabsKeyboardActivation, TabsOrientation, } from "./tabs.types.js";
10
10
  export { useTabsContext, useTabsTabContext } from "./tabs.context.js";
11
11
  export type { TabsContext, TabsTabContext } from "./tabs.context.js";
12
+ export type { UseTabListStateReturn } from "../../composables/use-tab-list-state.js";
12
13
  export { tabsVariants } from "@ropav/styles";
13
14
  export type { TabsVariants } from "@ropav/styles";
@@ -13,6 +13,10 @@ var tabs_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
13
13
  props: {
14
14
  class: {},
15
15
  align: { default: void 0 },
16
+ fullWidth: {
17
+ type: Boolean,
18
+ default: void 0
19
+ },
16
20
  selectedKey: {},
17
21
  defaultSelectedKey: {},
18
22
  disabledKeys: {},
@@ -34,6 +38,7 @@ var tabs_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
34
38
  const isDisabled = computed(() => Boolean(props.isDisabled));
35
39
  const slots = computed(() => tabsVariants({
36
40
  align: props.align,
41
+ fullWidth: props.fullWidth,
37
42
  variant: props.variant
38
43
  }));
39
44
  const state = useTabListState({
@@ -14,6 +14,14 @@ export interface TabsRootProps {
14
14
  * @default "center"
15
15
  */
16
16
  align?: TabsVariants["align"];
17
+ /**
18
+ * Whether the tabs share the row between them. `false` sizes each tab to its label and starts
19
+ * the row at the inline start, which is the header-bar layout; the primary track then hugs the
20
+ * tabs too. A vertical list is unaffected — its tabs always take the widest one's width.
21
+ *
22
+ * @default true
23
+ */
24
+ fullWidth?: boolean;
17
25
  /** The selected tab, when the caller drives it. */
18
26
  selectedKey?: CollectionKey;
19
27
  /** The initially selected tab. Falls back to the first tab that is not disabled. */
@@ -4,5 +4,7 @@ export { DateInputGroupInput as TimeFieldInput, DateInputGroupInputContainer as
4
4
  export { TimeFieldRoot as TimeField };
5
5
  export type { TimeFieldRootProps as TimeFieldProps, TimeFieldRootSlotProps as TimeFieldSlotProps, } from "./time-field.types.js";
6
6
  export type { DateInputGroupInputContainerProps as TimeFieldInputContainerProps, DateInputGroupInputProps as TimeFieldInputProps, DateInputGroupInputSlotProps as TimeFieldInputSlotProps, DateInputGroupPrefixProps as TimeFieldPrefixProps, DateInputGroupRootProps as TimeFieldGroupProps, DateInputGroupRootSlotProps as TimeFieldGroupSlotProps, DateInputGroupSegmentProps as TimeFieldSegmentProps, DateInputGroupSuffixProps as TimeFieldSuffixProps, } from "../date-input-group/index.js";
7
+ export type { DateSegment } from "../../composables/use-date-field-state.js";
8
+ export type { TimeGranularity } from "../../composables/use-time-field-state.js";
7
9
  export { dateInputGroupVariants, timeFieldVariants } from "@ropav/styles";
8
10
  export type { DateInputGroupVariants, TimeFieldVariants } from "@ropav/styles";
@@ -1,5 +1,6 @@
1
1
  import { dataAttr } from "../../utils/assertion.js";
2
2
  import { composeSlotClassName } from "../../utils/compose.js";
3
+ import { usePortal } from "../../composables/use-portal.js";
3
4
  import { useLocale } from "../../composables/use-locale.js";
4
5
  import { provideToastRegionContext } from "./toast.context.js";
5
6
  import { DEFAULT_SCALE_FACTOR, EXIT_FALLBACK } from "./toast.constants.js";
@@ -115,7 +116,8 @@ var toast_provider_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@_
115
116
  slots,
116
117
  visibleToasts
117
118
  });
118
- const target = computed(() => props.portalContainer ?? "body");
119
+ const portal = usePortal();
120
+ const target = computed(() => props.portalContainer ?? portal.container.value);
119
121
  const styles = computed(() => composeSlotClassName(slots.value.region, props.class));
120
122
  const regionStyle = computed(() => ({
121
123
  "--gap": `${props.gap}px`,
@@ -1,5 +1,6 @@
1
1
  import ToggleButtonRoot from "./toggle-button-root.js";
2
2
  export { ToggleButtonRoot as ToggleButton };
3
3
  export type { ToggleButtonRootProps as ToggleButtonProps, ToggleButtonSlotProps, } from "./toggle-button.types.js";
4
+ export type { ToggleGroupKey } from "../../composables/use-toggle-group-state.js";
4
5
  export { toggleButtonVariants } from "@ropav/styles";
5
6
  export type { ToggleButtonVariants } from "@ropav/styles";
@@ -4,5 +4,6 @@ export { ToggleButtonGroupRoot as ToggleButtonGroup, ToggleButtonGroupSeparator
4
4
  export type { ToggleButtonGroupRootProps as ToggleButtonGroupProps, ToggleButtonGroupSeparatorProps, } from "./toggle-button-group.types.js";
5
5
  export { useToggleButtonGroupContext } from "./toggle-button-group.context.js";
6
6
  export type { ToggleButtonGroupContext } from "./toggle-button-group.context.js";
7
+ export type { ToggleGroupKey, ToggleGroupSelectionMode, UseToggleGroupStateReturn, } from "../../composables/use-toggle-group-state.js";
7
8
  export { toggleButtonGroupVariants } from "@ropav/styles";
8
9
  export type { ToggleButtonGroupVariants } from "@ropav/styles";
@@ -6,5 +6,6 @@ export { TooltipArrow, TooltipContent, TooltipRoot as Tooltip, TooltipTrigger };
6
6
  export type { TooltipArrowProps, TooltipContentProps, TooltipRootEmits as TooltipEmits, TooltipRootProps as TooltipProps, TooltipTriggerProps, } from "./tooltip.types.js";
7
7
  export { useTooltipContext } from "./tooltip.context.js";
8
8
  export type { TooltipContext } from "./tooltip.context.js";
9
+ export type { TooltipTriggerState } from "../../composables/use-tooltip-trigger-state.js";
9
10
  export { tooltipVariants } from "@ropav/styles";
10
11
  export type { TooltipVariants } from "@ropav/styles";
@@ -1,4 +1,5 @@
1
1
  import { dataAttr } from "../../utils/assertion.js";
2
+ import { usePortal } from "../../composables/use-portal.js";
2
3
  import { useEnterExit } from "../../composables/use-enter-exit.js";
3
4
  import { provideOverlayArrowContext } from "../overlay/overlay.context.js";
4
5
  import { useOverlayPosition } from "../../composables/use-overlay-position.js";
@@ -38,6 +39,7 @@ var tooltip_content_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
38
39
  const { shouldSkipAnimation, slots, state, tooltipId, triggerElement } = useTooltipContext();
39
40
  const element = shallowRef(null);
40
41
  const arrow = shallowRef(null);
42
+ const portal = usePortal();
41
43
  /**
42
44
  * Built straight on the positioner rather than on the shared overlay primitive.
43
45
  *
@@ -50,6 +52,7 @@ var tooltip_content_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
50
52
  const { arrowStyle, overlayStyle, placement } = useOverlayPosition({
51
53
  arrowBoundaryOffset: () => props.arrowBoundaryOffset,
52
54
  arrowRef: arrow,
55
+ boundaryElement: () => portal.root.value,
53
56
  containerPadding: () => props.containerPadding,
54
57
  crossOffset: () => props.crossOffset,
55
58
  isOpen: () => state.isOpen.value,
@@ -76,7 +79,7 @@ var tooltip_content_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
76
79
  const isExiting = computed(() => props.isExiting ?? (!shouldSkipAnimation.value && enterExit.isExiting.value));
77
80
  const isPresent = computed(() => state.isOpen.value || enterExit.isExiting.value || props.isExiting === true);
78
81
  const styles = computed(() => slots.value.base({ class: props.class }));
79
- const target = computed(() => props.portalContainer ?? "body");
82
+ const target = computed(() => props.portalContainer ?? portal.container.value);
80
83
  const setElement = (next) => {
81
84
  element.value = next ?? null;
82
85
  };
@@ -1,5 +1,5 @@
1
1
  import { ariaHideOutside } from "../utils/aria-hide-outside.js";
2
- import { isVirtualClick, isVirtualPointerEvent } from "./use-press.js";
2
+ import { isVirtualClick, isVirtualPointerEvent } from "./virtual-event.js";
3
3
  import { announce } from "../utils/live-announcer.js";
4
4
  import { getTypes } from "../utils/dnd-data-transfer.js";
5
5
  import { getDragModality } from "./drag-modality.js";