@onereach/ui-components 2.70.0 → 2.70.1-beta.2191.0

package/dist/bundled/v2/{OrExpansionPanel-995caa85.js → OrExpansionPanel-d9a260e2.js}

@@ -1,7 +1,7 @@
 import './index-fa6eb4ca.js';
 import { O as OrIcon } from './OrIcon-8625385f.js';
 import { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
-import { defineComponent, ref, computed } from '@vue/composition-api/dist/vue-composition-api.mjs';
+import { defineComponent, ref, computed, watch } from '@vue/composition-api/dist/vue-composition-api.mjs';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 var ExpansionPanelVariant;
@@ -74,6 +74,10 @@ var script = defineComponent({
       type: String,
       required: true
     },
+    isOpen: {
+      type: Boolean,
+      default: false
+    },
     variant: {
       type: String,
       default: ExpansionPanelVariant.Default
@@ -87,8 +91,9 @@ var script = defineComponent({
       default: false
     }
   },
-  expose: ['root'],
-  setup(props) {
+  emits: ['open', 'close'],
+  expose: ['root', 'open', 'close'],
+  setup(props, context) {
     // Refs
     const root = ref();
     // Styles
@@ -98,12 +103,34 @@ var script = defineComponent({
     const addonStyles = computed(() => [...ExpansionPanelAddon]);
     // State
     const expanded = ref(false);
+    // Events
+    watch(expanded, value => {
+      context.emit(value ? 'open' : 'close');
+    });
+    watch(() => props.isOpen, newIsOpen => {
+      if (newIsOpen) {
+        open();
+      } else {
+        close();
+      }
+    }, {
+      immediate: true
+    });
+    // Methods
+    function open() {
+      expanded.value = true;
+    }
+    function close() {
+      expanded.value = false;
+    }
     return {
       root,
       rootStyles,
       headerStyles,
       addonStyles,
-      expanded
+      expanded,
+      open,
+      close
     };
   }
 });
@@ -133,7 +160,7 @@ var __vue_render__ = function () {
     on: {
       "click": function ($event) {
         $event.stopPropagation();
-        _vm.expanded = !_vm.expanded;
+        _vm.expanded ? _vm.close() : _vm.open();
       }
     }
   }, [_c('OrIcon', {

package/dist/bundled/v2/{OrSelect-20226912.js → OrSelect-c49e1bcf.js}

@@ -1,7 +1,7 @@
 import './index-fa6eb4ca.js';
 import { O as OrCheckbox } from './OrCheckbox-dbef9f9a.js';
 import { O as OrError } from './OrError-aad17598.js';
-import { O as OrExpansionPanel } from './OrExpansionPanel-995caa85.js';
+import { O as OrExpansionPanel } from './OrExpansionPanel-d9a260e2.js';
 import { O as OrHint } from './OrHint-f38a1940.js';
 import { O as OrIcon } from './OrIcon-8625385f.js';
 import { O as OrInput } from './OrInput-82ccfe00.js';

package/dist/bundled/v2/components/index.js

@@ -25,7 +25,7 @@ export { O as OrError } from '../OrError-31503e4c.js';
 export { _ as OrErrorTagV3 } from '../OrErrorTag-d0c5bcf4.js';
 export { O as OrErrorV3 } from '../OrError-aad17598.js';
 export { E as EmptyStateSize, _ as OrEmptyStateV3 } from '../OrEmptyState-9fb413f9.js';
-export { a as ExpansionPanelColor, E as ExpansionPanelVariant, O as OrExpansionPanelV3 } from '../OrExpansionPanel-995caa85.js';
+export { a as ExpansionPanelColor, E as ExpansionPanelVariant, O as OrExpansionPanelV3 } from '../OrExpansionPanel-d9a260e2.js';
 export { F as FabColor, _ as OrFabV3 } from '../OrFab-7cc75893.js';
 export { O as OrFloating, b as OrFloatingHideStrategy, a as OrFloatingPlacements } from '../OrFloating-554d6f58.js';
 export { O as OrHint } from '../OrHint-fabea4cf.js';
@@ -68,7 +68,7 @@ export { _ as OrRadioV3 } from '../OrRadio-cd39b20b.js';
 export { O as OrSearchV3 } from '../OrSearch-53470b0e.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-21cc914e.js';
 export { _ as OrSelect } from '../OrSelect-a23d4210.js';
-export { _ as OrSelectV3 } from '../OrSelect-20226912.js';
+export { _ as OrSelectV3 } from '../OrSelect-c49e1bcf.js';
 export { _ as OrSidebar, O as OrSidebarSide } from '../OrSidebar-e2b2c9ec.js';
 export { O as OrSidebarPlacement, _ as OrSidebarV3 } from '../OrSidebar-c95ef614.js';
 export { _ as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from '../OrSkeletonText-242d22f3.js';

package/dist/bundled/v2/components/or-expansion-panel-v3/OrExpansionPanel.vue.d.ts

@@ -6,11 +6,17 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     headerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     addonStyles: import("@vue/composition-api").ComputedRef<string[]>;
     expanded: import("@vue/composition-api").Ref<boolean>;
+    open: () => void;
+    close: () => void;
 }> & import("@vue/composition-api").Data, {}, {}, {
     label: {
         type: StringConstructor;
         required: true;
     };
+    isOpen: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
     variant: {
         type: PropType<ExpansionPanelVariant>;
         default: ExpansionPanelVariant;
@@ -28,6 +34,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: StringConstructor;
         required: true;
     };
+    isOpen: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
     variant: {
         type: PropType<ExpansionPanelVariant>;
         default: ExpansionPanelVariant;
@@ -42,21 +52,30 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     label: string;
+    isOpen: boolean;
     variant: ExpansionPanelVariant;
     color: ExpansionPanelColor;
     disabled: boolean;
-} & {}, import("@vue/composition-api").ShallowUnwrapRef<{
+} & {} & {
+    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
+}, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
     headerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     addonStyles: import("@vue/composition-api").ComputedRef<string[]>;
     expanded: import("@vue/composition-api").Ref<boolean>;
-}>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
+    open: () => void;
+    close: () => void;
+}>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     label: string;
+    isOpen: boolean;
     variant: ExpansionPanelVariant;
     color: ExpansionPanelColor;
     disabled: boolean;
-} & {}, {
+} & {} & {
+    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
+}, {
+    isOpen: boolean;
     variant: ExpansionPanelVariant;
     color: ExpansionPanelColor;
     disabled: boolean;

package/dist/bundled/v2/components/or-expansion-panel-v3/index.js

@@ -1,4 +1,4 @@
-export { a as ExpansionPanelColor, E as ExpansionPanelVariant, O as OrExpansionPanelV3 } from '../../OrExpansionPanel-995caa85.js';
+export { a as ExpansionPanelColor, E as ExpansionPanelVariant, O as OrExpansionPanelV3 } from '../../OrExpansionPanel-d9a260e2.js';
 import '../../index-fa6eb4ca.js';
 import 'vue';
 import '@vue/composition-api/dist/vue-composition-api.mjs';

package/dist/bundled/v2/components/or-select-v3/index.js

@@ -1,4 +1,4 @@
-export { _ as OrSelectV3 } from '../../OrSelect-20226912.js';
+export { _ as OrSelectV3 } from '../../OrSelect-c49e1bcf.js';
 export { a as SelectSize } from '../../OrInputBox-79ec54ad.js';
 import '../../index-fa6eb4ca.js';
 import 'vue';
@@ -9,7 +9,7 @@ import '../../useClassAttribute-9bf33346.js';
 import '../../normalize-component-6e8e3d80.js';
 import '../../browser-82dea9ed.js';
 import '../../OrError-aad17598.js';
-import '../../OrExpansionPanel-995caa85.js';
+import '../../OrExpansionPanel-d9a260e2.js';
 import '../../OrIcon-8625385f.js';
 import '../../OrHint-f38a1940.js';
 import '../../OrInput-82ccfe00.js';

package/dist/bundled/v2/index.js

@@ -30,7 +30,7 @@ export { O as OrError } from './OrError-31503e4c.js';
 export { _ as OrErrorTagV3 } from './OrErrorTag-d0c5bcf4.js';
 export { O as OrErrorV3 } from './OrError-aad17598.js';
 export { E as EmptyStateSize, _ as OrEmptyStateV3 } from './OrEmptyState-9fb413f9.js';
-export { a as ExpansionPanelColor, E as ExpansionPanelVariant, O as OrExpansionPanelV3 } from './OrExpansionPanel-995caa85.js';
+export { a as ExpansionPanelColor, E as ExpansionPanelVariant, O as OrExpansionPanelV3 } from './OrExpansionPanel-d9a260e2.js';
 export { F as FabColor, _ as OrFabV3 } from './OrFab-7cc75893.js';
 export { O as OrFloating, b as OrFloatingHideStrategy, a as OrFloatingPlacements } from './OrFloating-554d6f58.js';
 export { O as OrHint } from './OrHint-fabea4cf.js';
@@ -73,7 +73,7 @@ export { _ as OrRadioV3 } from './OrRadio-cd39b20b.js';
 export { O as OrSearchV3 } from './OrSearch-53470b0e.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-21cc914e.js';
 export { _ as OrSelect } from './OrSelect-a23d4210.js';
-export { _ as OrSelectV3 } from './OrSelect-20226912.js';
+export { _ as OrSelectV3 } from './OrSelect-c49e1bcf.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-e2b2c9ec.js';
 export { O as OrSidebarPlacement, _ as OrSidebarV3 } from './OrSidebar-c95ef614.js';
 export { _ as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeletonText-242d22f3.js';

package/dist/bundled/v3/{OrExpansionPanel.vue_vue_type_script_lang-7f9c6721.js → OrExpansionPanel.vue_vue_type_script_lang-5360f580.js}

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed } from 'vue';
+import { defineComponent, ref, computed, watch } from 'vue';
 import './OrIcon-d878b768.js';
 import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
 import { s as script$1 } from './OrIcon.vue_vue_type_script_lang-a119a715.js';
@@ -73,6 +73,10 @@ var script = defineComponent({
       type: String,
       required: true
     },
+    isOpen: {
+      type: Boolean,
+      default: false
+    },
     variant: {
       type: String,
       default: ExpansionPanelVariant.Default
@@ -86,8 +90,9 @@ var script = defineComponent({
       default: false
     }
   },
-  expose: ['root'],
-  setup(props) {
+  emits: ['open', 'close'],
+  expose: ['root', 'open', 'close'],
+  setup(props, context) {
     // Refs
     const root = ref();
     // Styles
@@ -97,12 +102,34 @@ var script = defineComponent({
     const addonStyles = computed(() => [...ExpansionPanelAddon]);
     // State
     const expanded = ref(false);
+    // Events
+    watch(expanded, value => {
+      context.emit(value ? 'open' : 'close');
+    });
+    watch(() => props.isOpen, newIsOpen => {
+      if (newIsOpen) {
+        open();
+      } else {
+        close();
+      }
+    }, {
+      immediate: true
+    });
+    // Methods
+    function open() {
+      expanded.value = true;
+    }
+    function close() {
+      expanded.value = false;
+    }
     return {
       root,
       rootStyles,
       headerStyles,
       addonStyles,
-      expanded
+      expanded,
+      open,
+      close
     };
   }
 });

package/dist/bundled/v3/{OrSelect.vue_vue_type_script_lang-edc5eb2d.js → OrSelect.vue_vue_type_script_lang-58e5a52b.js}

@@ -2,7 +2,7 @@ import { resolveComponent, openBlock, createElementBlock, normalizeClass, withDi
 import { s as script$1 } from './OrCheckbox.vue_vue_type_script_lang-8b36e06c.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import './OrHint-9592499e.js';
-import { s as script$2 } from './OrExpansionPanel.vue_vue_type_script_lang-7f9c6721.js';
+import { s as script$2 } from './OrExpansionPanel.vue_vue_type_script_lang-5360f580.js';
 import './OrIcon-d878b768.js';
 import './OrInput-a4f220ed.js';
 import './OrInputBox-eb54d73d.js';
@@ -76,7 +76,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass(_ctx.headerStyles),
     tabindex: !_ctx.disabled ? 0 : null,
     disabled: _ctx.disabled ? '' : null,
-    onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.expanded = !_ctx.expanded, ["stop"]))
+    onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.expanded ? _ctx.close() : _ctx.open(), ["stop"]))
   }, [createVNode(_component_OrIcon, {
     class: normalizeClass([_ctx.expanded ? 'rotate-0' : 'rotate-[-90deg]']),
     icon: 'expand_more',

package/dist/bundled/v3/components/index.js

@@ -25,7 +25,7 @@ export { s as OrError } from '../OrError.vue_vue_type_script_lang-7c39e012.js';
 export { s as OrErrorTagV3 } from '../OrErrorTag.vue_vue_type_script_lang-4828c387.js';
 export { s as OrErrorV3 } from '../OrError.vue_vue_type_script_lang-cc6c135f.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from '../OrEmptyState.vue_vue_type_script_lang-da7d6c42.js';
-export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from '../OrExpansionPanel.vue_vue_type_script_lang-7f9c6721.js';
+export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from '../OrExpansionPanel.vue_vue_type_script_lang-5360f580.js';
 export { F as FabColor, s as OrFabV3 } from '../OrFab.vue_vue_type_script_lang-2adeaed6.js';
 export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from '../OrFloating.vue_vue_type_script_lang-8bf2b7ae.js';
 export { s as OrHint } from '../OrHint.vue_vue_type_script_lang-78598c8e.js';
@@ -68,7 +68,7 @@ export { s as OrRadioV3 } from '../OrRadio.vue_vue_type_script_lang-2e666a56.js'
 export { s as OrSearchV3 } from '../OrSearch.vue_vue_type_script_lang-06f318ca.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl.vue_vue_type_script_lang-579406f5.js';
 export { s as OrSelect } from '../OrSelect.vue_vue_type_script_lang-26c0a70a.js';
-export { s as OrSelectV3 } from '../OrSelect.vue_vue_type_script_lang-edc5eb2d.js';
+export { s as OrSelectV3 } from '../OrSelect.vue_vue_type_script_lang-58e5a52b.js';
 export { s as OrSidebar, O as OrSidebarSide } from '../OrSidebar.vue_vue_type_script_lang-7c55ac0a.js';
 export { O as OrSidebarPlacement, s as OrSidebarV3 } from '../OrSidebar.vue_vue_type_script_lang-ce0b152c.js';
 export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from '../OrSkeletonText.vue_vue_type_script_lang-f3f989c3.js';

package/dist/bundled/v3/components/or-expansion-panel-v3/OrExpansionPanel.vue.d.ts

@@ -6,11 +6,17 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     headerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     addonStyles: import("@vue/composition-api").ComputedRef<string[]>;
     expanded: import("@vue/composition-api").Ref<boolean>;
+    open: () => void;
+    close: () => void;
 }> & import("@vue/composition-api").Data, {}, {}, {
     label: {
         type: StringConstructor;
         required: true;
     };
+    isOpen: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
     variant: {
         type: PropType<ExpansionPanelVariant>;
         default: ExpansionPanelVariant;
@@ -28,6 +34,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: StringConstructor;
         required: true;
     };
+    isOpen: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
     variant: {
         type: PropType<ExpansionPanelVariant>;
         default: ExpansionPanelVariant;
@@ -42,21 +52,30 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     label: string;
+    isOpen: boolean;
     variant: ExpansionPanelVariant;
     color: ExpansionPanelColor;
     disabled: boolean;
-} & {}, import("@vue/composition-api").ShallowUnwrapRef<{
+} & {} & {
+    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
+}, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
     headerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     addonStyles: import("@vue/composition-api").ComputedRef<string[]>;
     expanded: import("@vue/composition-api").Ref<boolean>;
-}>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
+    open: () => void;
+    close: () => void;
+}>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     label: string;
+    isOpen: boolean;
     variant: ExpansionPanelVariant;
     color: ExpansionPanelColor;
     disabled: boolean;
-} & {}, {
+} & {} & {
+    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
+}, {
+    isOpen: boolean;
     variant: ExpansionPanelVariant;
     color: ExpansionPanelColor;
     disabled: boolean;

package/dist/bundled/v3/components/or-expansion-panel-v3/index.js

@@ -1,4 +1,4 @@
-export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from '../../OrExpansionPanel.vue_vue_type_script_lang-7f9c6721.js';
+export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from '../../OrExpansionPanel.vue_vue_type_script_lang-5360f580.js';
 import 'vue';
 import '../../OrIcon-d878b768.js';
 import '../../OrIcon.vue_vue_type_script_lang-a119a715.js';

package/dist/bundled/v3/components/or-select-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrSelectV3 } from '../../OrSelect.vue_vue_type_script_lang-edc5eb2d.js';
+export { s as OrSelectV3 } from '../../OrSelect.vue_vue_type_script_lang-58e5a52b.js';
 export { a as SelectSize } from '../../OrInputBox.vue_vue_type_script_lang-5ee4ee45.js';
 import 'vue';
 import '../../OrCheckbox.vue_vue_type_script_lang-8b36e06c.js';
@@ -9,7 +9,7 @@ import '../../style-inject.es-4c6f2515.js';
 import '../../OrHint-9592499e.js';
 import '../../OrError.vue_vue_type_script_lang-cc6c135f.js';
 import '../../OrHint.vue_vue_type_script_lang-8e657168.js';
-import '../../OrExpansionPanel.vue_vue_type_script_lang-7f9c6721.js';
+import '../../OrExpansionPanel.vue_vue_type_script_lang-5360f580.js';
 import '../../OrIcon-d878b768.js';
 import '../../OrIcon.vue_vue_type_script_lang-a119a715.js';
 import '../../OrInput-a4f220ed.js';

package/dist/bundled/v3/index.js

@@ -27,8 +27,8 @@ export { a as OrCarousel, s as OrCarouselItem } from './OrCarouselItem.vue_vue_t
 import { s as script$x } from './OrSelect.vue_vue_type_script_lang-26c0a70a.js';
 export { s as OrSelect } from './OrSelect.vue_vue_type_script_lang-26c0a70a.js';
 export { s as OrCheckbox } from './OrCheckbox.vue_vue_type_script_lang-d8a66818.js';
-import { s as script$y } from './OrSelect.vue_vue_type_script_lang-edc5eb2d.js';
-export { s as OrSelectV3 } from './OrSelect.vue_vue_type_script_lang-edc5eb2d.js';
+import { s as script$y } from './OrSelect.vue_vue_type_script_lang-58e5a52b.js';
+export { s as OrSelectV3 } from './OrSelect.vue_vue_type_script_lang-58e5a52b.js';
 export { s as OrCheckboxV3 } from './OrCheckbox.vue_vue_type_script_lang-8b36e06c.js';
 export { s as OrChip } from './OrChip-5d502431.js';
 import { s as script$9 } from './OrChips.vue_vue_type_script_lang-69917e34.js';
@@ -47,7 +47,7 @@ import { s as script$f } from './OrErrorTag.vue_vue_type_script_lang-4828c387.js
 export { s as OrErrorTagV3 } from './OrErrorTag.vue_vue_type_script_lang-4828c387.js';
 import { s as script$g } from './OrEmptyState.vue_vue_type_script_lang-da7d6c42.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from './OrEmptyState.vue_vue_type_script_lang-da7d6c42.js';
-export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel.vue_vue_type_script_lang-7f9c6721.js';
+export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel.vue_vue_type_script_lang-5360f580.js';
 import { s as script$h } from './OrFab.vue_vue_type_script_lang-2adeaed6.js';
 export { F as FabColor, s as OrFabV3 } from './OrFab.vue_vue_type_script_lang-2adeaed6.js';
 import './OrInlineInputBox-9d68ded1.js';

package/dist/esm/v2/{OrExpansionPanel-968ddc61.js → OrExpansionPanel-a123024e.js}

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed } from 'vue-demi';
+import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
 import { _ as __vue_component__$1 } from './OrIcon-5e394c62.js';
@@ -74,6 +74,10 @@ var script = defineComponent({
       type: String,
       required: true
     },
+    isOpen: {
+      type: Boolean,
+      default: false
+    },
     variant: {
       type: String,
       default: ExpansionPanelVariant.Default
@@ -87,8 +91,9 @@ var script = defineComponent({
       default: false
     }
   },
-  expose: ['root'],
-  setup(props) {
+  emits: ['open', 'close'],
+  expose: ['root', 'open', 'close'],
+  setup(props, context) {
     // Refs
     const root = ref();
     // Styles
@@ -98,12 +103,34 @@ var script = defineComponent({
     const addonStyles = computed(() => [...ExpansionPanelAddon]);
     // State
     const expanded = ref(false);
+    // Events
+    watch(expanded, value => {
+      context.emit(value ? 'open' : 'close');
+    });
+    watch(() => props.isOpen, newIsOpen => {
+      if (newIsOpen) {
+        open();
+      } else {
+        close();
+      }
+    }, {
+      immediate: true
+    });
+    // Methods
+    function open() {
+      expanded.value = true;
+    }
+    function close() {
+      expanded.value = false;
+    }
     return {
       root,
       rootStyles,
       headerStyles,
       addonStyles,
-      expanded
+      expanded,
+      open,
+      close
     };
   }
 });
@@ -133,7 +160,7 @@ var __vue_render__ = function () {
     on: {
       "click": function ($event) {
         $event.stopPropagation();
-        _vm.expanded = !_vm.expanded;
+        _vm.expanded ? _vm.close() : _vm.open();
       }
     }
   }, [_c('OrIcon', {

package/dist/esm/v2/{OrSelect-2b198f4f.js → OrSelect-1d705445.js}

@@ -5,7 +5,7 @@ import { u as useOverflow } from './useOverflow-af6161c8.js';
 import '@vueuse/core';
 import { _ as __vue_component__$1 } from './OrCheckbox-567e387c.js';
 import { _ as __vue_component__$2 } from './OrError-d267ee9a.js';
-import { _ as __vue_component__$3 } from './OrExpansionPanel-968ddc61.js';
+import { _ as __vue_component__$3 } from './OrExpansionPanel-a123024e.js';
 import { _ as __vue_component__$4 } from './OrHint-42dc9ebb.js';
 import { _ as __vue_component__$5 } from './OrIcon-5e394c62.js';
 import { _ as __vue_component__$7, a as InputBoxSize } from './OrInputBox-4d5a318d.js';

package/dist/esm/v2/components/index.js

@@ -25,7 +25,7 @@ export { _ as OrError } from '../OrError-081130bb.js';
 export { _ as OrErrorTagV3 } from '../OrErrorTag-782dd714.js';
 export { _ as OrErrorV3 } from '../OrError-d267ee9a.js';
 export { E as EmptyStateSize, _ as OrEmptyStateV3 } from '../OrEmptyState-2481f13f.js';
-export { a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from '../OrExpansionPanel-968ddc61.js';
+export { a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from '../OrExpansionPanel-a123024e.js';
 export { F as FabColor, _ as OrFabV3 } from '../OrFab-26106618.js';
 export { _ as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from '../OrFloating-89d6582a.js';
 export { _ as OrHint } from '../OrHint-c45f1e09.js';
@@ -68,7 +68,7 @@ export { _ as OrRadioV3 } from '../OrRadio-848ce55d.js';
 export { _ as OrSearchV3 } from '../OrSearch-0f08f2f5.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-e8dce8f9.js';
 export { _ as OrSelect } from '../OrSelect-dae2b069.js';
-export { _ as OrSelectV3 } from '../OrSelect-2b198f4f.js';
+export { _ as OrSelectV3 } from '../OrSelect-1d705445.js';
 export { _ as OrSidebar, O as OrSidebarSide } from '../OrSidebar-7d6125bb.js';
 export { O as OrSidebarPlacement, _ as OrSidebarV3 } from '../OrSidebar-fabc7bc9.js';
 export { _ as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from '../OrSkeletonText-cc94bdc9.js';

package/dist/esm/v2/components/or-expansion-panel-v3/OrExpansionPanel.vue.d.ts

@@ -6,11 +6,17 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     headerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     addonStyles: import("@vue/composition-api").ComputedRef<string[]>;
     expanded: import("@vue/composition-api").Ref<boolean>;
+    open: () => void;
+    close: () => void;
 }> & import("@vue/composition-api").Data, {}, {}, {
     label: {
         type: StringConstructor;
         required: true;
     };
+    isOpen: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
     variant: {
         type: PropType<ExpansionPanelVariant>;
         default: ExpansionPanelVariant;
@@ -28,6 +34,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: StringConstructor;
         required: true;
     };
+    isOpen: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
     variant: {
         type: PropType<ExpansionPanelVariant>;
         default: ExpansionPanelVariant;
@@ -42,21 +52,30 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     label: string;
+    isOpen: boolean;
     variant: ExpansionPanelVariant;
     color: ExpansionPanelColor;
     disabled: boolean;
-} & {}, import("@vue/composition-api").ShallowUnwrapRef<{
+} & {} & {
+    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
+}, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
     headerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     addonStyles: import("@vue/composition-api").ComputedRef<string[]>;
     expanded: import("@vue/composition-api").Ref<boolean>;
-}>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
+    open: () => void;
+    close: () => void;
+}>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     label: string;
+    isOpen: boolean;
     variant: ExpansionPanelVariant;
     color: ExpansionPanelColor;
     disabled: boolean;
-} & {}, {
+} & {} & {
+    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
+}, {
+    isOpen: boolean;
     variant: ExpansionPanelVariant;
     color: ExpansionPanelColor;
     disabled: boolean;

package/dist/esm/v2/components/or-expansion-panel-v3/index.js

@@ -1,4 +1,4 @@
-export { a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from '../../OrExpansionPanel-968ddc61.js';
+export { a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from '../../OrExpansionPanel-a123024e.js';
 import 'vue-demi';
 import '../../useClassAttribute-47fdb016.js';
 import '@vueuse/core';

package/dist/esm/v2/components/or-select-v3/index.js

@@ -1,4 +1,4 @@
-export { _ as OrSelectV3 } from '../../OrSelect-2b198f4f.js';
+export { _ as OrSelectV3 } from '../../OrSelect-1d705445.js';
 export { a as SelectSize } from '../../OrInputBox-4d5a318d.js';
 import 'vue-demi';
 import '../../dropdown-open-0d314aa4.js';
@@ -10,7 +10,7 @@ import '../../OrLabel-2a9f1477.js';
 import '../../normalize-component-6e8e3d80.js';
 import '../../browser-82dea9ed.js';
 import '../../OrError-d267ee9a.js';
-import '../../OrExpansionPanel-968ddc61.js';
+import '../../OrExpansionPanel-a123024e.js';
 import '../../OrIcon-5e394c62.js';
 import '../../OrHint-42dc9ebb.js';
 import '../../OrInput-ada3a970.js';

package/dist/esm/v2/index.js

@@ -25,7 +25,7 @@ export { _ as OrError } from './OrError-081130bb.js';
 export { _ as OrErrorTagV3 } from './OrErrorTag-782dd714.js';
 export { _ as OrErrorV3 } from './OrError-d267ee9a.js';
 export { E as EmptyStateSize, _ as OrEmptyStateV3 } from './OrEmptyState-2481f13f.js';
-export { a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from './OrExpansionPanel-968ddc61.js';
+export { a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from './OrExpansionPanel-a123024e.js';
 export { F as FabColor, _ as OrFabV3 } from './OrFab-26106618.js';
 export { _ as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from './OrFloating-89d6582a.js';
 export { _ as OrHint } from './OrHint-c45f1e09.js';
@@ -68,7 +68,7 @@ export { _ as OrRadioV3 } from './OrRadio-848ce55d.js';
 export { _ as OrSearchV3 } from './OrSearch-0f08f2f5.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-e8dce8f9.js';
 export { _ as OrSelect } from './OrSelect-dae2b069.js';
-export { _ as OrSelectV3 } from './OrSelect-2b198f4f.js';
+export { _ as OrSelectV3 } from './OrSelect-1d705445.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-7d6125bb.js';
 export { O as OrSidebarPlacement, _ as OrSidebarV3 } from './OrSidebar-fabc7bc9.js';
 export { _ as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeletonText-cc94bdc9.js';

package/dist/esm/v3/{OrExpansionPanel-311e64cf.js → OrExpansionPanel-f8d7ff8d.js}

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed } from 'vue-demi';
+import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
 import { s as script$1 } from './OrIcon-b195169c.js';
@@ -74,6 +74,10 @@ var script = defineComponent({
       type: String,
       required: true
     },
+    isOpen: {
+      type: Boolean,
+      default: false
+    },
     variant: {
       type: String,
       default: ExpansionPanelVariant.Default
@@ -87,8 +91,9 @@ var script = defineComponent({
       default: false
     }
   },
-  expose: ['root'],
-  setup(props) {
+  emits: ['open', 'close'],
+  expose: ['root', 'open', 'close'],
+  setup(props, context) {
     // Refs
     const root = ref();
     // Styles
@@ -98,12 +103,34 @@ var script = defineComponent({
     const addonStyles = computed(() => [...ExpansionPanelAddon]);
     // State
     const expanded = ref(false);
+    // Events
+    watch(expanded, value => {
+      context.emit(value ? 'open' : 'close');
+    });
+    watch(() => props.isOpen, newIsOpen => {
+      if (newIsOpen) {
+        open();
+      } else {
+        close();
+      }
+    }, {
+      immediate: true
+    });
+    // Methods
+    function open() {
+      expanded.value = true;
+    }
+    function close() {
+      expanded.value = false;
+    }
     return {
       root,
       rootStyles,
       headerStyles,
       addonStyles,
-      expanded
+      expanded,
+      open,
+      close
     };
   }
 });
@@ -124,7 +151,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass(_ctx.headerStyles),
     tabindex: !_ctx.disabled ? 0 : null,
     disabled: _ctx.disabled ? '' : null,
-    onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.expanded = !_ctx.expanded, ["stop"]))
+    onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.expanded ? _ctx.close() : _ctx.open(), ["stop"]))
   }, [createVNode(_component_OrIcon, {
     class: normalizeClass([_ctx.expanded ? 'rotate-0' : 'rotate-[-90deg]']),
     icon: 'expand_more',

package/dist/esm/v3/{OrSelect-f42de9d8.js → OrSelect-dfa4885f.js}

@@ -5,7 +5,7 @@ import { u as useOverflow } from './useOverflow-af6161c8.js';
 import '@vueuse/core';
 import { s as script$1 } from './OrCheckbox-3e139eac.js';
 import { s as script$2 } from './OrError-ec8c709d.js';
-import { s as script$3 } from './OrExpansionPanel-311e64cf.js';
+import { s as script$3 } from './OrExpansionPanel-f8d7ff8d.js';
 import { s as script$4 } from './OrHint-74bb732d.js';
 import { s as script$5 } from './OrIcon-b195169c.js';
 import { s as script$7, a as InputBoxSize } from './OrInputBox-6d1b6059.js';

package/dist/esm/v3/components/index.js

@@ -22,7 +22,7 @@ export { s as OrError } from '../OrError-f90296db.js';
 export { s as OrErrorTagV3 } from '../OrErrorTag-98252eef.js';
 export { s as OrErrorV3 } from '../OrError-ec8c709d.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from '../OrEmptyState-bb8e3145.js';
-export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from '../OrExpansionPanel-311e64cf.js';
+export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from '../OrExpansionPanel-f8d7ff8d.js';
 export { F as FabColor, s as OrFabV3 } from '../OrFab-c8ae6e01.js';
 export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from '../OrFloating-5240e758.js';
 export { s as OrHint } from '../OrHint-1414c530.js';
@@ -63,7 +63,7 @@ export { s as OrRadioV3 } from '../OrRadio-54b6d0de.js';
 export { s as OrSearchV3 } from '../OrSearch-9885d178.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-171cad78.js';
 export { s as OrSelect } from '../OrSelect-0821b907.js';
-export { s as OrSelectV3 } from '../OrSelect-f42de9d8.js';
+export { s as OrSelectV3 } from '../OrSelect-dfa4885f.js';
 export { s as OrSidebar, O as OrSidebarSide } from '../OrSidebar-375c85a3.js';
 export { O as OrSidebarPlacement, s as OrSidebarV3 } from '../OrSidebar-a62972f5.js';
 export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from '../OrSkeletonText-2b1610ce.js';

package/dist/esm/v3/components/or-expansion-panel-v3/OrExpansionPanel.vue.d.ts

@@ -6,11 +6,17 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     headerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     addonStyles: import("@vue/composition-api").ComputedRef<string[]>;
     expanded: import("@vue/composition-api").Ref<boolean>;
+    open: () => void;
+    close: () => void;
 }> & import("@vue/composition-api").Data, {}, {}, {
     label: {
         type: StringConstructor;
         required: true;
     };
+    isOpen: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
     variant: {
         type: PropType<ExpansionPanelVariant>;
         default: ExpansionPanelVariant;
@@ -28,6 +34,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: StringConstructor;
         required: true;
     };
+    isOpen: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
     variant: {
         type: PropType<ExpansionPanelVariant>;
         default: ExpansionPanelVariant;
@@ -42,21 +52,30 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     label: string;
+    isOpen: boolean;
     variant: ExpansionPanelVariant;
     color: ExpansionPanelColor;
     disabled: boolean;
-} & {}, import("@vue/composition-api").ShallowUnwrapRef<{
+} & {} & {
+    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
+}, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
     headerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     addonStyles: import("@vue/composition-api").ComputedRef<string[]>;
     expanded: import("@vue/composition-api").Ref<boolean>;
-}>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
+    open: () => void;
+    close: () => void;
+}>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     label: string;
+    isOpen: boolean;
     variant: ExpansionPanelVariant;
     color: ExpansionPanelColor;
     disabled: boolean;
-} & {}, {
+} & {} & {
+    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
+}, {
+    isOpen: boolean;
     variant: ExpansionPanelVariant;
     color: ExpansionPanelColor;
     disabled: boolean;

package/dist/esm/v3/components/or-expansion-panel-v3/index.js

@@ -1,4 +1,4 @@
-export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from '../../OrExpansionPanel-311e64cf.js';
+export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from '../../OrExpansionPanel-f8d7ff8d.js';
 import 'vue-demi';
 import '../../useClassAttribute-47fdb016.js';
 import '@vueuse/core';

package/dist/esm/v3/components/or-select-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrSelectV3 } from '../../OrSelect-f42de9d8.js';
+export { s as OrSelectV3 } from '../../OrSelect-dfa4885f.js';
 export { a as SelectSize } from '../../OrInputBox-6d1b6059.js';
 import 'vue-demi';
 import '../../dropdown-open-0d314aa4.js';
@@ -10,7 +10,7 @@ import '../../OrLabel-bdaec602.js';
 import 'vue';
 import '../../style-inject.es-4c6f2515.js';
 import '../../OrError-ec8c709d.js';
-import '../../OrExpansionPanel-311e64cf.js';
+import '../../OrExpansionPanel-f8d7ff8d.js';
 import '../../OrIcon-b195169c.js';
 import '../../OrHint-74bb732d.js';
 import '../../OrInput-9c0426b9.js';

package/dist/esm/v3/index.js

@@ -22,7 +22,7 @@ export { s as OrError } from './OrError-f90296db.js';
 export { s as OrErrorTagV3 } from './OrErrorTag-98252eef.js';
 export { s as OrErrorV3 } from './OrError-ec8c709d.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from './OrEmptyState-bb8e3145.js';
-export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel-311e64cf.js';
+export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel-f8d7ff8d.js';
 export { F as FabColor, s as OrFabV3 } from './OrFab-c8ae6e01.js';
 export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from './OrFloating-5240e758.js';
 export { s as OrHint } from './OrHint-1414c530.js';
@@ -63,7 +63,7 @@ export { s as OrRadioV3 } from './OrRadio-54b6d0de.js';
 export { s as OrSearchV3 } from './OrSearch-9885d178.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-171cad78.js';
 export { s as OrSelect } from './OrSelect-0821b907.js';
-export { s as OrSelectV3 } from './OrSelect-f42de9d8.js';
+export { s as OrSelectV3 } from './OrSelect-dfa4885f.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-375c85a3.js';
 export { O as OrSidebarPlacement, s as OrSidebarV3 } from './OrSidebar-a62972f5.js';
 export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeletonText-2b1610ce.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.70.0",
+  "version": "2.70.1-beta.2191.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -124,6 +124,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "89c054e0b6ea769eb49475b447144d8b8786ca33"
+  }
 }

package/src/components/or-expansion-panel-v3/OrExpansionPanel.stories3.ts

@@ -1,4 +1,6 @@
 import { Meta, StoryFn } from '@storybook/vue3';
+import { action } from '@storybook/addon-actions';
+
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import OrExpansionPanelDocs from './OrExpansionPanel.docs.mdx';
 import OrExpansionPanel from './OrExpansionPanel.vue';
@@ -67,11 +69,19 @@ const Template: StoryFn<typeof OrExpansionPanel> = (args) => ({
   },
 
   setup() {
-    return { args };
+    return {
+      args,
+      handleOpen: action('open'),
+      handleClose: action('close'),
+    };
   },
 
   template: `
-    <OrExpansionPanel v-bind="args">
+    <OrExpansionPanel
+      v-bind="args"
+      @open="handleOpen"
+      @close="handleClose"
+    >
       ${args.default}
 
       <template #addon>

package/src/components/or-expansion-panel-v3/OrExpansionPanel.vue

@@ -10,7 +10,7 @@
         :class="headerStyles"
         :tabindex="!disabled ? 0 : null"
         :disabled="disabled ? '' : null"
-        @click.stop="expanded = !expanded"
+        @click.stop="expanded ? close(): open()"
       >
         <OrIcon
           :class="[expanded ? 'rotate-0' : 'rotate-[-90deg]']"
@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
 import { useClassAttribute } from '../../hooks';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { ExpansionPanelColor, ExpansionPanelVariant } from './props';
@@ -54,6 +54,11 @@ export default defineComponent({
       required: true,
     },
 
+    isOpen: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
+
     variant: {
       type: String as PropType<ExpansionPanelVariant>,
       default: ExpansionPanelVariant.Default,
@@ -70,11 +75,18 @@ export default defineComponent({
     },
   },
 
+  emits: [
+    'open',
+    'close',
+  ],
+
   expose: [
     'root',
+    'open',
+    'close',
   ],
 
-  setup(props) {
+  setup(props, context) {
     // Refs
     const root = ref<HTMLElement>();
 
@@ -100,12 +112,36 @@ export default defineComponent({
     // State
     const expanded = ref(false);
 
+    // Events
+    watch(expanded, (value) => {
+      context.emit(value ? 'open' : 'close');
+    });
+
+    watch(() => props.isOpen, (newIsOpen) => {
+      if (newIsOpen) {
+        open();
+      } else {
+        close();
+      }
+    }, { immediate: true });
+
+    // Methods
+    function open(): void {
+      expanded.value = true;
+    }
+
+    function close(): void {
+      expanded.value = false;
+    }
+
     return {
       root,
       rootStyles,
       headerStyles,
       addonStyles,
       expanded,
+      open,
+      close,
     };
   },
 });