@onereach/ui-components 4.2.5 → 4.2.6-beta.2604.0

package/dist/esm/v3/OrDateTimePickerTimeSelect-9309c434.js

@@ -0,0 +1,250 @@
+import { defineComponent, ref, computed } from 'vue-demi';
+import { openBlock, createElementBlock, normalizeClass, Fragment, createTextVNode, toDisplayString, resolveComponent, createElementVNode, renderList, createBlock, withModifiers, withCtx } from 'vue';
+import { s as script$2 } from './OrButton-c2b6aa9e.js';
+
+function useTimePlaceholder() {
+  const sample = new Date(Date.UTC(1, 1, 3, 4, 5)).toLocaleString(navigator.language, {
+    timeStyle: 'short',
+    timeZone: 'UTC'
+  });
+  return sample.replace(/04/, 'HH').replace(/4/, 'H').replace(/05/, 'MM').replace(/5/, 'M').replace(/AM|PM/, 'A');
+}
+
+const DateTimePickerTimeControl = [
+// Layout
+'layout-inline-row',
+// Interactivity
+'interactivity-auto',
+// Theme (focus)
+'focus:theme-border-2-inherit', 'dark:focus:theme-border-2-inherit-dark', 'focus:theme-border-underline'];
+const DateTimePickerTimeControlPlaceholder = [
+// Theme
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
+
+var script$1 = defineComponent({
+  name: 'OrDateTimePickerTimeControl',
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: Date,
+      default: undefined
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  expose: ['root'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-date-time-picker-time-control', ...DateTimePickerTimeControl]);
+    const placeholderStyles = computed(() => [...DateTimePickerTimeControlPlaceholder]);
+    // State
+    const proxyModelValue = computed({
+      get: () => props.modelValue,
+      set: value => {
+        context.emit('update:modelValue', value);
+      }
+    });
+    const placeholder = useTimePlaceholder();
+    // Methods
+    function formatModelValue(value) {
+      return value.toLocaleString(navigator.language, {
+        timeStyle: 'short',
+        timeZone: 'UTC'
+      });
+    }
+    return {
+      root,
+      rootStyles,
+      placeholderStyles,
+      proxyModelValue,
+      placeholder,
+      formatModelValue
+    };
+  }
+});
+
+const _hoisted_1 = ["required", "readonly", "disabled"];
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles),
+    contenteditable: '',
+    required: _ctx.required ? '' : null,
+    readonly: _ctx.readonly ? '' : null,
+    disabled: _ctx.disabled ? '' : null
+  }, [_ctx.proxyModelValue ? (openBlock(), createElementBlock(Fragment, {
+    key: 0
+  }, [createTextVNode(toDisplayString(_ctx.formatModelValue(_ctx.proxyModelValue)), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock("span", {
+    key: 1,
+    class: normalizeClass(_ctx.placeholderStyles)
+  }, toDisplayString(_ctx.placeholder), 3 /* TEXT, CLASS */))], 10 /* CLASS, PROPS */, _hoisted_1);
+}
+
+script$1.render = render$1;
+script$1.__file = "src/components/or-date-time-picker-v3/partials/or-date-time-picker-time-control/OrDateTimePickerTimeControl.vue";
+
+const DateTimePickerTimeSelect = [
+// Layout
+'layout-row justify-center',
+// Spacing
+'px-md', 'py-md', 'gap-sm',
+// Typography
+'typography-body-2-regular',
+// Theme
+'theme-foreground-default', 'dark:theme-foreground-default-dark'];
+const DateTimePickerTimeSelectButtonGroup = [
+// Layout
+'layout-column',
+// Box
+'h-[294px] md:h-[238px]',
+// Overflow
+'overflow-x-hidden', 'overflow-y-auto'];
+const DateTimePickerTimeSelectButtonGroupItem = [
+// Box
+'!min-w-fit',
+// Typography
+'typography-caption-regular'];
+
+var script = defineComponent({
+  name: 'OrDateTimePickerTimeSelect',
+  components: {
+    OrButton: script$2
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: Date,
+      default: undefined
+    },
+    initialValue: {
+      type: Date,
+      required: true
+    },
+    hoursFilter: {
+      type: Function,
+      default: undefined
+    },
+    minutesFilter: {
+      type: Function,
+      default: undefined
+    }
+  },
+  emits: ['update:modelValue'],
+  expose: ['root'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-date-time-picker-time-select', ...DateTimePickerTimeSelect]);
+    const buttonGroupStyles = computed(() => [...DateTimePickerTimeSelectButtonGroup]);
+    const buttonGroupItemStyles = computed(() => [...DateTimePickerTimeSelectButtonGroupItem]);
+    // State
+    const proxyModelValue = computed({
+      get: () => {
+        var _a;
+        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.initialValue;
+      },
+      set: value => {
+        context.emit('update:modelValue', value);
+      }
+    });
+    const hoursOptions = computed(() => {
+      return Array.from({
+        length: 24
+      }, (_value, index) => {
+        const value = index;
+        return new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth(), proxyModelValue.value.getUTCDate(), value, proxyModelValue.value.getUTCMinutes()));
+      });
+    });
+    const minutesOptions = computed(() => {
+      return Array.from({
+        length: 60
+      }, (_value, index) => {
+        const value = index;
+        return new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth(), proxyModelValue.value.getUTCDate(), proxyModelValue.value.getUTCHours(), value));
+      });
+    });
+    // Methods
+    function formatHours(value) {
+      return value.toLocaleString(navigator.language, {
+        hour: 'numeric',
+        timeZone: 'UTC'
+      });
+    }
+    function formatMinutes(value) {
+      return String(value.getUTCMinutes()).padStart(2, '0');
+    }
+    return {
+      root,
+      rootStyles,
+      buttonGroupStyles,
+      buttonGroupItemStyles,
+      proxyModelValue,
+      hoursOptions,
+      minutesOptions,
+      formatHours,
+      formatMinutes
+    };
+  }
+});
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrButton = resolveComponent("OrButton");
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles)
+  }, [createElementVNode("div", {
+    class: normalizeClass(_ctx.buttonGroupStyles)
+  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.hoursOptions, value => {
+    return openBlock(), createBlock(_component_OrButton, {
+      key: Number(value),
+      class: normalizeClass(_ctx.buttonGroupItemStyles),
+      variant: Number(value) === Number(_ctx.proxyModelValue) ? 'contained' : 'text',
+      color: Number(value) === Number(_ctx.proxyModelValue) ? 'primary' : 'inherit',
+      disabled: _ctx.hoursFilter && !_ctx.hoursFilter(value),
+      onClick: withModifiers($event => _ctx.proxyModelValue = value, ["stop"])
+    }, {
+      default: withCtx(() => [createTextVNode(toDisplayString(_ctx.formatHours(value)), 1 /* TEXT */)]),
+
+      _: 2 /* DYNAMIC */
+    }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "variant", "color", "disabled", "onClick"]);
+  }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */), createTextVNode(" : "), createElementVNode("div", {
+    class: normalizeClass(_ctx.buttonGroupStyles)
+  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.minutesOptions, value => {
+    return openBlock(), createBlock(_component_OrButton, {
+      key: Number(value),
+      class: normalizeClass(_ctx.buttonGroupItemStyles),
+      variant: Number(value) === Number(_ctx.proxyModelValue) ? 'contained' : 'text',
+      color: Number(value) === Number(_ctx.proxyModelValue) ? 'primary' : 'inherit',
+      disabled: _ctx.minutesFilter && !_ctx.minutesFilter(value),
+      onClick: withModifiers($event => _ctx.proxyModelValue = value, ["stop"])
+    }, {
+      default: withCtx(() => [createTextVNode(toDisplayString(_ctx.formatMinutes(value)), 1 /* TEXT */)]),
+
+      _: 2 /* DYNAMIC */
+    }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "variant", "color", "disabled", "onClick"]);
+  }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */)], 2 /* CLASS */);
+}
+
+script.render = render;
+script.__file = "src/components/or-date-time-picker-v3/partials/or-date-time-picker-time-select/OrDateTimePickerTimeSelect.vue";
+
+export { script as a, script$1 as s };

package/dist/esm/v3/{OrIconButton-786b9346.js → OrIconButton-46b3c1e2.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, isVue3 } from 'vue-demi';
 import { s as script$1, I as IconSize } from './OrIcon-62793572.js';
-import { s as script$2 } from './OrTooltip-56ed42c7.js';
-import './OrPopover-d6d82a06.js';
+import { s as script$2 } from './OrTooltip-e3c85390.js';
+import './OrPopover-e34e8f6c.js';
 import { resolveComponent, openBlock, createBlock, normalizeProps, guardReactiveProps, withCtx, createElementVNode, mergeProps, toHandlers, createVNode } from 'vue';
 
 var IconButtonColor;

package/dist/esm/v3/{OrInlineInput-ca82ccc3.js → OrInlineInput-63b1d245.js}

@@ -4,7 +4,7 @@ import '@vueuse/core';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { s as script$1 } from './OrError-c01d0c29.js';
 import { s as script$2 } from './OrHint-06ab89d7.js';
-import { s as script$3 } from './OrIconButton-786b9346.js';
+import { s as script$3 } from './OrIconButton-46b3c1e2.js';
 import { s as script$4, I as InlineInputBoxSize } from './OrInlineInputBox-01fb2cb2.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withCtx, withDirectives, mergeProps, vModelDynamic, withModifiers, createCommentVNode, createBlock, createSlots, createTextVNode, toDisplayString, vShow } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';

package/dist/esm/v3/{OrInlineTextarea-864f1099.js → OrInlineTextarea-d03f81c4.js}

@@ -4,7 +4,7 @@ import '@vueuse/core';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { s as script$1 } from './OrError-c01d0c29.js';
 import { s as script$2 } from './OrHint-06ab89d7.js';
-import { s as script$3 } from './OrIconButton-786b9346.js';
+import { s as script$3 } from './OrIconButton-46b3c1e2.js';
 import { s as script$4 } from './OrInlineInputBox-01fb2cb2.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withCtx, withDirectives, mergeProps, vModelText, withModifiers, createCommentVNode, createBlock, createSlots, createTextVNode, toDisplayString, vShow } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';

package/dist/esm/v3/{OrInput-a43b53d2.js → OrInput-cc1991ff.js}

@@ -5,9 +5,9 @@ import { u as useResponsive } from './useResponsive-a02e95b7.js';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { s as script$1 } from './OrError-c01d0c29.js';
 import { s as script$2 } from './OrHint-06ab89d7.js';
-import { s as script$4 } from './OrIconButton-786b9346.js';
+import { s as script$4 } from './OrIconButton-46b3c1e2.js';
 import { s as script$3 } from './OrIcon-62793572.js';
-import { s as script$5, a as InputBoxSize } from './OrInputBox-11389afd.js';
+import { s as script$5, I as InputBoxSize } from './OrInputBox-ba40bbdf.js';
 import { s as script$6 } from './OrLabel-4da56db0.js';
 import { s as script$7 } from './OrLoader-b79022da.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, withDirectives, createElementVNode, mergeProps, vModelDynamic, Fragment, withModifiers, createSlots, vShow } from 'vue';

package/dist/esm/v3/{OrInputBox-11389afd.js → OrInputBox-ba40bbdf.js}

@@ -24,15 +24,15 @@ const InputBoxRoot = [
 const InputBoxRootVariants = {
   'styled': [
   // Theme
-  'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark', 'theme-border-1-outline', 'dark:theme-border-1-outline-dark', 'theme-outline-transparent', 'dark:theme-outline-transparent',
+  'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark', 'theme-border-1-outline', 'dark:theme-border-1-outline-dark', 'theme-outline-2-transparent', 'dark:theme-outline-2-transparent',
   // Theme (focus)
-  'focus-within:theme-background-primary-opacity', 'dark:focus-within:theme-background-primary-opacity-dark', 'focus-within:theme-border-1-primary', 'dark:focus-within:theme-border-1-primary-dark', 'focus-within:theme-outline-primary', 'dark:focus-within:theme-outline-primary-dark',
+  'focus-within:theme-background-primary-translucent', 'dark:focus-within:theme-background-primary-translucent-dark', 'focus-within:theme-border-1-primary', 'dark:focus-within:theme-border-1-primary-dark', 'focus-within:theme-outline-2-primary', 'dark:focus-within:theme-outline-2-primary-dark',
   // Theme (read-only)
-  'read-only:bg-primary-opacity-0-08', 'dark:read-only:bg-primary-opacity-0-08-dark', 'read-only:!border-transparent', 'dark:read-only:!border-transparent',
+  'read-only:theme-background-primary-translucent', 'dark:read-only:theme-background-primary-translucent-dark', 'read-only:!border-transparent', 'dark:read-only:!border-transparent',
   // Theme (invalid)
-  'invalid:theme-preset-3-error', 'dark:invalid:theme-preset-3-error-dark', 'invalid:theme-background-error-opacity', 'dark:invalid:theme-background-error-opacity-dark', 'invalid:theme-foreground-default', 'dark:invalid:theme-foreground-default-dark', 'invalid:theme-border-1-error', 'dark:invalid:theme-border-1-error-dark', 'invalid:theme-outline-transparent', 'dark:invalid:theme-outline-transparent',
+  'invalid:theme-preset-3-error', 'dark:invalid:theme-preset-3-error-dark', 'invalid:theme-background-error-translucent', 'dark:invalid:theme-background-error-translucent-dark', 'invalid:theme-foreground-default', 'dark:invalid:theme-foreground-default-dark', 'invalid:theme-border-1-error', 'dark:invalid:theme-border-1-error-dark', 'invalid:theme-outline-2-transparent', 'dark:invalid:theme-outline-2-transparent',
   // Theme (invalid, focus)
-  'invalid:focus-within:theme-background-error-opacity', 'dark:invalid:focus-within:theme-background-error-opacity-dark', 'invalid:focus-within:theme-border-1-error', 'dark:invalid:focus-within:theme-border-1-error-dark', 'invalid:focus-within:theme-outline-error', 'dark:invalid:focus-within:theme-outline-error-dark',
+  'invalid:focus-within:theme-background-error-translucent', 'dark:invalid:focus-within:theme-background-error-translucent-dark', 'invalid:focus-within:theme-border-1-error', 'dark:invalid:focus-within:theme-border-1-error-dark', 'invalid:focus-within:theme-outline-2-error', 'dark:invalid:focus-within:theme-outline-2-error-dark',
   // Theme (invalid, read-only)
   'invalid:read-only:bg-error-opacity-0-08', 'dark:invalid:read-only:bg-error-opacity-0-08-dark', 'invalid:read-only:!border-transparent', 'dark:invalid:read-only:!border-transparent'],
   'unstyled': [
@@ -44,14 +44,14 @@ const InputBoxRootSizes = {
   // Box
   'children:min-h-[46px] children:md:min-h-[34px]',
   // Spacing
-  'first-child:pl-md first-child:md:pl-sm+', 'last-child:pr-md last-child:md:pr-sm+', 'gap-sm+ md:gap-sm',
+  'first-child:ml-md first-child:md:ml-sm+', 'last-child:mr-md last-child:md:mr-sm+', 'gap-sm+ md:gap-sm',
   // Typography
   'typography-body-2-regular'],
   's': [
   // Box
   'children:min-h-[30px]',
   // Spacing
-  'first-child:pl-md first-child:md:pl-sm+', 'last-child:pr-md last-child:md:pr-sm+', 'gap-[6px]',
+  'first-child:ml-md first-child:md:ml-sm+', 'last-child:mr-md last-child:md:mr-sm+', 'gap-[6px]',
   // Typography
   'typography-caption-regular']
 };
@@ -107,4 +107,4 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 script.render = render;
 script.__file = "src/components/or-input-box-v3/OrInputBox.vue";
 
-export { InputBoxVariant as I, InputBoxSize as a, script as s };
+export { InputBoxSize as I, InputBoxVariant as a, script as s };

package/dist/esm/v3/{OrMenu-f8132f3e.js → OrMenu-03a8a492.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { s as script$1, P as PopoverPlacement } from './OrPopover-d6d82a06.js';
+import { s as script$1, P as PopoverPlacement } from './OrPopover-e34e8f6c.js';
 import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode, mergeProps, withModifiers, renderSlot } from 'vue';
 
 const MenuRoot = [
@@ -25,7 +25,7 @@ var script = defineComponent({
     }
   },
   emits: ['update:state'],
-  expose: ['root', 'isOpen', 'open', 'close', 'toggle'],
+  expose: ['root', 'state', 'isOpen', 'open', 'close', 'toggle'],
   setup() {
     // Refs
     const root = ref();
@@ -34,6 +34,10 @@ var script = defineComponent({
       var _a;
       return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.root;
     });
+    const popoverState = computed(() => {
+      var _a;
+      return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
+    });
     // Styles
     const rootStyles = computed(() => ['or-menu-v3', ...MenuRoot]);
     // State
@@ -73,6 +77,7 @@ var script = defineComponent({
       root,
       popover,
       popoverRoot,
+      state: popoverState,
       rootStyles,
       isOpen,
       open,

package/dist/esm/v3/{OrModal-cb236842.js → OrModal-28d273a8.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, watch } from 'vue-demi';
-import { s as script$2 } from './OrIconButton-786b9346.js';
+import { s as script$2 } from './OrIconButton-46b3c1e2.js';
 import { s as script$1 } from './OrOverlay-d63d39c3.js';
 import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode, mergeProps, normalizeClass, renderSlot, createVNode, withModifiers, createCommentVNode } from 'vue';
 

package/dist/esm/v3/{OrNotification-45b47899.js → OrNotification-16190cf5.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { s as script$2 } from './OrIconButton-786b9346.js';
+import { s as script$2 } from './OrIconButton-46b3c1e2.js';
 import { s as script$1 } from './OrIcon-62793572.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, renderSlot, createBlock, withModifiers, createCommentVNode } from 'vue';
 

package/dist/esm/v3/{OrPagination-1e334ccd.js → OrPagination-6bf44eec.js}

@@ -1,11 +1,11 @@
 import { defineComponent, ref, computed } from 'vue-demi';
 import '@vueuse/core';
 import { u as useResponsive } from './useResponsive-a02e95b7.js';
-import { s as script$1 } from './OrButton-8558588c.js';
+import { s as script$1 } from './OrButton-c2b6aa9e.js';
 import { s as script$2 } from './OrIcon-62793572.js';
 import { s as script$4 } from './OrMenuItem-dbee450f.js';
-import { s as script$3 } from './OrMenu-f8132f3e.js';
-import './OrPopover-d6d82a06.js';
+import { s as script$3 } from './OrMenu-03a8a492.js';
+import './OrPopover-e34e8f6c.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withModifiers, withCtx, Fragment, renderList, createBlock, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
 
 const PaginationRoot = [

package/dist/esm/v3/{OrPopover-d6d82a06.js → OrPopover-e34e8f6c.js}

@@ -3,7 +3,7 @@ import { onClickOutside } from '@vueuse/core';
 import { defineComponent, ref, computed, watch, watchPostEffect, unref, toRef, nextTick } from 'vue-demi';
 import { u as useElevation } from './useElevation-df91fa50.js';
 import { u as useResponsive } from './useResponsive-a02e95b7.js';
-import { s as script$1 } from './OrBottomSheet-95bc694e.js';
+import { s as script$1 } from './OrBottomSheet-6538d9c3.js';
 import { s as script$2 } from './OrTeleport.vue3-8099178c.js';
 import { resolveComponent, openBlock, createBlock, withCtx, withDirectives, createElementVNode, createElementBlock, mergeProps, renderSlot, normalizeClass, createCommentVNode, vShow } from 'vue';
 
@@ -105,8 +105,8 @@ var script = defineComponent({
       default: false
     }
   },
-  emits: ['update:state'],
-  expose: ['root', 'state', 'isOpen', 'open', 'close'],
+  emits: ['update:state', 'update:state:open', 'update:state:fullscreen', 'update:state:closed', 'update:state:closed-automatically'],
+  expose: ['root', 'state', 'isOpen', 'isFullscreen', 'isClosed', 'open', 'close'],
   setup(props, context) {
     const {
       isDesktop,
@@ -125,9 +125,22 @@ var script = defineComponent({
     // State
     const state = ref('closed');
     const isOpen = computed(() => state.value === 'open');
+    const isFullscreen = computed(() => state.value === 'fullscreen');
+    const isClosed = computed(() => state.value === 'closed');
     // Events
     watch(state, value => {
       context.emit('update:state', value);
+      switch (value) {
+        case 'open':
+          context.emit('update:state:open');
+          break;
+        case 'fullscreen':
+          context.emit('update:state:fullscreen');
+          break;
+        case 'closed':
+          context.emit('update:state:closed');
+          break;
+      }
     });
     // Methods
     function open() {
@@ -155,7 +168,7 @@ var script = defineComponent({
           break;
       }
     }
-    function close() {
+    function close(auto = false) {
       state.value = 'closed';
       switch (props.variant) {
         case PopoverVariant.Auto:
@@ -179,6 +192,9 @@ var script = defineComponent({
           });
           break;
       }
+      if (auto) {
+        context.emit('update:state:closed-automatically');
+      }
     }
     // Handlers
     function handleBottomSheetState(bottomSheetState) {
@@ -223,7 +239,7 @@ var script = defineComponent({
       if (!path.some(({
         classList
       }) => (classList === null || classList === void 0 ? void 0 : classList.contains('or-popover-v3')) || (classList === null || classList === void 0 ? void 0 : classList.contains('or-bottom-sheet-v3')))) {
-        close();
+        close(true);
       }
     }, {
       ignore: [trigger]
@@ -243,6 +259,8 @@ var script = defineComponent({
       bodyStyles,
       state,
       isOpen,
+      isFullscreen,
+      isClosed,
       open,
       close
     };
@@ -269,11 +287,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */))], 16 /* FULL_PROPS */)) : createCommentVNode("v-if", true), _ctx.isMobile && _ctx.variant === 'auto' || _ctx.variant === 'bottom-sheet' ? (openBlock(), createBlock(_component_OrBottomSheet, {
       key: 1,
       ref: "bottomSheet",
-      "onUpdate:state": _ctx.handleBottomSheetState
+      "onUpdate:state": _cache[0] || (_cache[0] = $event => _ctx.state = $event),
+      "onUpdate:state:closedAutomatically": _cache[1] || (_cache[1] = $event => _ctx.$emit('update:state:closed-automatically'))
     }, {
       default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
       _: 3 /* FORWARDED */
-    }, 8 /* PROPS */, ["onUpdate:state"])) : createCommentVNode("v-if", true)], 512 /* NEED_PATCH */), [[vShow, _ctx.isOpen]])]),
+    }, 512 /* NEED_PATCH */)) : createCommentVNode("v-if", true)], 512 /* NEED_PATCH */), [[vShow, _ctx.isOpen]])]),
     _: 3 /* FORWARDED */
   });
 }

package/dist/esm/v3/{OrRadio-a890ee7c.js → OrRadio-a6c88f29.js}

@@ -22,7 +22,7 @@ const RadioControl = [
 // Theme
 'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-background-default', 'dark:theme-background-default-dark', 'theme-border-1-outline', 'dark:theme-border-1-outline-dark',
 // Theme (focus)
-'focus:theme-outline-primary', 'dark:focus:theme-outline-primary-dark',
+'focus:theme-outline-2-primary', 'dark:focus:theme-outline-2-primary-dark',
 // Theme (checked)
 'checked:theme-preset-1-primary', 'dark:checked:theme-preset-1-primary-dark'];
 const RadioControlHandle = [

package/dist/esm/v3/{OrSearch-d5d46937.js → OrSearch-7277ebfd.js}

@@ -1,7 +1,7 @@
 import { debouncedWatch } from '@vueuse/core';
 import { defineComponent, ref, computed, watch } from 'vue-demi';
-import { s as script$1 } from './OrInput-a43b53d2.js';
-import { a as InputBoxSize } from './OrInputBox-11389afd.js';
+import { s as script$1 } from './OrInput-cc1991ff.js';
+import { I as InputBoxSize } from './OrInputBox-ba40bbdf.js';
 import { resolveComponent, openBlock, createBlock, normalizeClass } from 'vue';
 
 var script = defineComponent({

package/dist/esm/v3/{OrSelect-35b41c3f.js → OrSelect-9c7044f8.js}

@@ -1,18 +1,18 @@
 import { defineComponent, getCurrentInstance, ref, computed, onMounted, watch } from 'vue-demi';
-import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-0d314aa4.js';
+import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e1f90e0a.js';
 import { u as useOverflow } from './useOverflow-af6161c8.js';
 import '@vueuse/core';
-import { s as script$1 } from './OrCheckbox-488b6915.js';
+import { s as script$1 } from './OrCheckbox-247ce27b.js';
 import { s as script$2 } from './OrError-c01d0c29.js';
 import { s as script$3 } from './OrExpansionPanel-99ca7ed7.js';
 import { s as script$4 } from './OrHint-06ab89d7.js';
 import { s as script$5 } from './OrIcon-62793572.js';
-import { s as script$7, a as InputBoxSize } from './OrInputBox-11389afd.js';
-import { s as script$6 } from './OrInput-a43b53d2.js';
+import { s as script$7, I as InputBoxSize } from './OrInputBox-ba40bbdf.js';
+import { s as script$6 } from './OrInput-cc1991ff.js';
 import { s as script$8 } from './OrLabel-4da56db0.js';
 import { s as script$9 } from './OrMenuItem-dbee450f.js';
-import { s as script$a } from './OrPopover-d6d82a06.js';
-import { s as script$b } from './OrTag-dc1b8628.js';
+import { s as script$a } from './OrPopover-e34e8f6c.js';
+import { s as script$b } from './OrTag-b508f25f.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, Fragment, renderList, createVNode, withModifiers, vShow } from 'vue';
 
 const SelectRoot = [

package/dist/esm/v3/{OrSidebar-0d715029.js → OrSidebar-0f4629bf.js}

@@ -1,7 +1,7 @@
 import { useDraggable, useElementBounding } from '@vueuse/core';
 import _ from 'lodash';
 import { defineComponent, ref, computed, useSlots, watch } from 'vue-demi';
-import { O as OrSidebarPlacement, s as script$1 } from './OrSidebarCollapseButton-4d7497ec.js';
+import { O as OrSidebarPlacement, s as script$1 } from './OrSidebarCollapseButton-a384cd37.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createElementVNode, normalizeStyle, createBlock, withDirectives, vShow } from 'vue';
 
 const SidebarRoot = [

package/dist/esm/v3/{OrSidebarCollapseButton-4d7497ec.js → OrSidebarCollapseButton-a384cd37.js}

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import { defineComponent, ref, computed } from 'vue-demi';
-import { s as script$1 } from './OrIconButton-786b9346.js';
+import { s as script$1 } from './OrIconButton-46b3c1e2.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode } from 'vue';
 
 var OrSidebarPlacement;

package/dist/esm/v3/{OrSwitch-97096491.js → OrSwitch-594f5a63.js}

@@ -27,7 +27,7 @@ const SwitchControl = [
 // Theme
 'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-background-default', 'dark:theme-background-default-dark', 'theme-border-1-outline', 'dark:theme-border-1-outline-dark',
 // Theme (focus)
-'focus:theme-outline-primary', 'dark:focus:theme-outline-primary-dark',
+'focus:theme-outline-2-primary', 'dark:focus:theme-outline-2-primary-dark',
 // Theme (checked)
 'checked:theme-preset-1-primary', 'dark:checked:theme-preset-1-primary-dark'];
 const SwitchControlHandle = [

package/dist/esm/v3/{OrTab-c11d94f6.js → OrTab-f7e51ffb.js}

@@ -11,13 +11,13 @@ const TabRoot = [
 // Typography
 'typography-body-2-bold',
 // Theme
-'theme-foreground-secondary', 'dark:theme-foreground-secondary-dark', 'theme-border-2-transparent', 'dark:theme-border-2-transparent', 'theme-border-underline', 'dark:theme-border-underline',
+'theme-foreground-secondary', 'dark:theme-foreground-secondary-dark', 'theme-border-2-transparent', 'dark:theme-border-2-transparent', 'theme-border-underline',
 // Theme (hover)
 'hover:theme-foreground-default', 'dark:hover:theme-foreground-default-dark',
 // Theme (active)
-'active:theme-foreground-default', 'dark:active:theme-foreground-default-dark', 'active:theme-border-2-current', 'dark:active:theme-border-2-current', 'active:theme-border-underline', 'dark:active:theme-border-underline',
+'active:theme-foreground-default', 'dark:active:theme-foreground-default-dark', 'active:theme-border-2-current', 'dark:active:theme-border-2-current', 'active:theme-border-underline',
 // Theme (selected)
-'selected:theme-foreground-default', 'dark:selected:theme-foreground-default-dark', 'selected:theme-border-2-current', 'dark:selected:theme-border-2-current', 'selected:theme-border-underline', 'dark:selected:theme-border-underline'];
+'selected:theme-foreground-default', 'dark:selected:theme-foreground-default-dark', 'selected:theme-border-2-current', 'dark:selected:theme-border-2-current', 'selected:theme-border-underline'];
 
 var script = defineComponent({
   name: 'OrTab',

package/dist/esm/v3/{OrTabs-f667cf9f.js → OrTabs-9e29eeec.js}

@@ -2,9 +2,9 @@ import { useResizeObserver } from '@vueuse/core';
 import { defineComponent, ref, computed, reactive, watch, nextTick, onMounted } from 'vue-demi';
 import { s as script$1 } from './OrIcon-62793572.js';
 import { s as script$3 } from './OrMenuItem-dbee450f.js';
-import { s as script$2 } from './OrMenu-f8132f3e.js';
-import './OrPopover-d6d82a06.js';
-import { s as script$4 } from './OrTab-c11d94f6.js';
+import { s as script$2 } from './OrMenu-03a8a492.js';
+import './OrPopover-e34e8f6c.js';
+import { s as script$4 } from './OrTab-f7e51ffb.js';
 import { resolveComponent, openBlock, createElementBlock, createElementVNode, mergeProps, Fragment, renderList, createBlock, withModifiers, withCtx, createTextVNode, toDisplayString, createVNode, createCommentVNode, renderSlot } from 'vue';
 
 var TabsVariant;
@@ -21,7 +21,7 @@ const TabsRoot = [
 // Spacing
 'gap-md',
 // Theme
-'theme-border-1-outline', 'dark:theme-border-1-outline', 'theme-border-underline', 'dark:theme-border-underline'];
+'theme-border-1-outline', 'dark:theme-border-1-outline', 'theme-border-underline'];
 const TabsRootVariants = {
   'default': [
   // Layout

package/dist/esm/v3/{OrTag-dc1b8628.js → OrTag-b508f25f.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, watchPostEffect, unref } from 'vue-demi';
-import { s as script$1 } from './OrIconButton-786b9346.js';
+import { s as script$1 } from './OrIconButton-46b3c1e2.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createVNode, withModifiers, createCommentVNode } from 'vue';
 
 var TagVariant;

package/dist/esm/v3/{OrTextarea-08b22d36.js → OrTextarea-fa1454e3.js}

@@ -4,7 +4,7 @@ import '@vueuse/core';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { s as script$1 } from './OrError-c01d0c29.js';
 import { s as script$2 } from './OrHint-06ab89d7.js';
-import { s as script$3, a as InputBoxSize } from './OrInputBox-11389afd.js';
+import { s as script$3, I as InputBoxSize } from './OrInputBox-ba40bbdf.js';
 import { s as script$4 } from './OrLabel-4da56db0.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, withDirectives, createElementVNode, mergeProps, vModelText, createSlots, vShow } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';