@onereach/ui-components 4.7.4 → 4.7.5

package/dist/esm/v2/{OrExpansionPanel-d3a2218d.js → OrExpansionPanel-b8411db6.js}

@@ -1,4 +1,8 @@
-import { defineComponent, ref, computed, watch } from 'vue-demi';
+import { defineComponent, ref, computed, toRef } from 'vue-demi';
+import '@vueuse/core';
+import { u as usePopoverState } from './usePopoverState-8a95a300.js';
+import '@onereach/styles/tailwind.config';
+import 'tailwindcss/resolveConfig';
 import { _ as __vue_component__$1 } from './OrIcon-d35a84d8.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
@@ -12,11 +16,17 @@ var ExpansionPanelColor;
   ExpansionPanelColor["Default"] = "default";
   ExpansionPanelColor["Danger"] = "danger";
 })(ExpansionPanelColor || (ExpansionPanelColor = {}));
+var ExpansionPanelBackgroundColor;
+(function (ExpansionPanelBackgroundColor) {
+  ExpansionPanelBackgroundColor["Primary"] = "primary";
+  ExpansionPanelBackgroundColor["Secondary"] = "secondary";
+  ExpansionPanelBackgroundColor["Inherit"] = "inherit";
+})(ExpansionPanelBackgroundColor || (ExpansionPanelBackgroundColor = {}));
 
-const ExpansionPanelRoot = [
+const ExpansionPanel = [
 // Layout
 'layout-column'];
-const ExpansionPanelRootVariants = {
+const ExpansionPanelVariants = {
   'default': [
   // Spacing
   'gap-sm'],
@@ -24,9 +34,21 @@ const ExpansionPanelRootVariants = {
   // Shape
   'rounded-md',
   // Spacing
-  'px-md', 'py-md', 'gap-md',
+  'px-md', 'py-md', 'gap-md']
+};
+const ExpansionPanelBackgroundColors = {
+  'primary-default': [],
+  'primary-card': [
+  // Theme
+  'theme-background-surface-1', 'dark:theme-background-surface-1-dark'],
+  'secondary-default': [],
+  'secondary-card': [
+  // Theme
+  'theme-background-surface-3', 'dark:theme-background-surface-3-dark'],
+  'inherit-default': [],
+  'inherit-card': [
   // Theme
-  'theme-background-surface-1', 'dark:theme-background-surface-1-dark']
+  'theme-background-inherit', 'dark:theme-background-inherit']
 };
 const ExpansionPanelHeader = [
 // Layout
@@ -87,50 +109,40 @@ var script = defineComponent({
       type: String,
       default: ExpansionPanelColor.Default
     },
+    backgroundColor: {
+      type: String,
+      default: ExpansionPanelBackgroundColor.Primary
+    },
     disabled: {
       type: Boolean,
       default: false
     }
   },
-  emits: ['open', 'close'],
-  expose: ['root', 'open', 'close'],
+  emits: ['update:state', 'open', 'close'],
+  expose: ['root', 'state', 'open', 'close', 'toggle'],
   setup(props, context) {
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-expansion-panel-v3', ...ExpansionPanelRoot, ...ExpansionPanelRootVariants[props.variant]]);
+    const rootStyles = computed(() => ['or-expansion-panel-v3', ...ExpansionPanel, ...ExpansionPanelVariants[props.variant], ...ExpansionPanelBackgroundColors[`${props.backgroundColor}-${props.variant}`]]);
     const headerStyles = computed(() => [...ExpansionPanelHeader, ...ExpansionPanelHeaderColors[props.color]]);
     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;
-    }
+    const {
+      state,
+      open,
+      close,
+      toggle
+    } = usePopoverState(toRef(props, 'isOpen'), context);
     return {
       root,
       rootStyles,
       headerStyles,
       addonStyles,
-      expanded,
+      state,
       open,
-      close
+      close,
+      toggle
     };
   }
 });
@@ -160,11 +172,11 @@ var __vue_render__ = function () {
     on: {
       "click": function ($event) {
         $event.stopPropagation();
-        _vm.expanded ? _vm.close() : _vm.open();
+        return _vm.toggle();
       }
     }
   }, [_c('OrIcon', {
-    class: [_vm.expanded ? 'rotate-0' : 'rotate-[-90deg]'],
+    class: [_vm.state === 'open' ? 'rotate-0' : 'rotate-[-90deg]'],
     attrs: {
       "icon": 'expand_more',
       "variant": 'filled-bold'
@@ -177,8 +189,8 @@ var __vue_render__ = function () {
     directives: [{
       name: "show",
       rawName: "v-show",
-      value: _vm.expanded,
-      expression: "expanded"
+      value: _vm.state === 'open',
+      expression: "state === 'open'"
     }]
   }, [_vm._t("default")], 2)]);
 };
@@ -203,4 +215,4 @@ const __vue_component__ = /*#__PURE__*/normalizeComponent({
   staticRenderFns: __vue_staticRenderFns__
 }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
 
-export { ExpansionPanelVariant as E, __vue_component__ as _, ExpansionPanelColor as a };
+export { ExpansionPanelVariant as E, __vue_component__ as _, ExpansionPanelColor as a, ExpansionPanelBackgroundColor as b };

package/dist/esm/v2/{OrSelect-1132c7dc.js → OrSelect-7f2d3a94.js}

@@ -6,7 +6,7 @@ import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import { _ as __vue_component__$1, i as isEmptyValue } from './OrCheckbox-41f2822d.js';
 import { _ as __vue_component__$2 } from './OrError-4ffc1c39.js';
-import { _ as __vue_component__$3 } from './OrExpansionPanel-d3a2218d.js';
+import { _ as __vue_component__$3 } from './OrExpansionPanel-b8411db6.js';
 import { _ as __vue_component__$4 } from './OrHint-aa221198.js';
 import { _ as __vue_component__$5 } from './OrIcon-d35a84d8.js';
 import { _ as __vue_component__$7 } from './OrInputBox-7f3c0ee9.js';

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

@@ -33,7 +33,7 @@ export { E as EmptyStateSize, _ as OrEmptyStateV3 } from '../OrEmptyState-2d3fd6
 export { _ as OrError } from '../OrError-efc74907.js';
 export { _ as OrErrorTagV3 } from '../OrErrorTag-a55ae01a.js';
 export { _ as OrErrorV3 } from '../OrError-4ffc1c39.js';
-export { a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from '../OrExpansionPanel-d3a2218d.js';
+export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from '../OrExpansionPanel-b8411db6.js';
 export { F as FabColor, _ as OrFabV3 } from '../OrFab-f3a590c0.js';
 export { _ as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from '../OrFloating-e7ac7618.js';
 export { F as FormGroupDirection, _ as OrFormGroupV3 } from '../OrFormGroup-29a514db.js';
@@ -78,7 +78,7 @@ export { _ as OrSearch } from '../OrSearch-e2941d35.js';
 export { _ as OrSearchV3 } from '../OrSearch-cbd7fd0b.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-a1ea5b72.js';
 export { _ as OrSelect } from '../OrSelect-49239b74.js';
-export { _ as OrSelectV3 } from '../OrSelect-1132c7dc.js';
+export { _ as OrSelectV3 } from '../OrSelect-7f2d3a94.js';
 export { _ as OrSidebar, O as OrSidebarSide } from '../OrSidebar-c56a9221.js';
 export { _ as OrSidebarV3 } from '../OrSidebar-865f307e.js';
 export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-b3a41f02.js';

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

@@ -1,30 +1,35 @@
 import { PropType } from 'vue-demi';
-import { ExpansionPanelColor, ExpansionPanelVariant } from './props';
+import { ExpansionPanelBackgroundColor, ExpansionPanelColor, ExpansionPanelVariant } from './props';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     headerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     addonStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    expanded: import("@vue/composition-api").Ref<boolean>;
+    state: import("@vue/composition-api").Ref<"open" | "closed">;
     open: () => void;
     close: () => void;
+    toggle: () => void;
 }> & import("@vue/composition-api").Data, {}, {}, {
     label: {
         type: StringConstructor;
         required: true;
     };
     isOpen: {
-        type: PropType<boolean>;
+        type: BooleanConstructor;
         default: boolean;
     };
     variant: {
-        type: PropType<ExpansionPanelVariant>;
+        type: PropType<"default" | "card">;
         default: ExpansionPanelVariant;
     };
     color: {
-        type: PropType<ExpansionPanelColor>;
+        type: PropType<"default" | "danger">;
         default: ExpansionPanelColor;
     };
+    backgroundColor: {
+        type: PropType<"primary" | "secondary" | "inherit">;
+        default: ExpansionPanelBackgroundColor;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -35,17 +40,21 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         required: true;
     };
     isOpen: {
-        type: PropType<boolean>;
+        type: BooleanConstructor;
         default: boolean;
     };
     variant: {
-        type: PropType<ExpansionPanelVariant>;
+        type: PropType<"default" | "card">;
         default: ExpansionPanelVariant;
     };
     color: {
-        type: PropType<ExpansionPanelColor>;
+        type: PropType<"default" | "danger">;
         default: ExpansionPanelColor;
     };
+    backgroundColor: {
+        type: PropType<"primary" | "secondary" | "inherit">;
+        default: ExpansionPanelBackgroundColor;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -53,8 +62,9 @@ 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;
+    variant: "default" | "card";
+    color: "default" | "danger";
+    backgroundColor: "primary" | "secondary" | "inherit";
     disabled: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
@@ -63,21 +73,24 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     headerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     addonStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    expanded: import("@vue/composition-api").Ref<boolean>;
+    state: import("@vue/composition-api").Ref<"open" | "closed">;
     open: () => void;
     close: () => void;
+    toggle: () => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     label: string;
     isOpen: boolean;
-    variant: ExpansionPanelVariant;
-    color: ExpansionPanelColor;
+    variant: "default" | "card";
+    color: "default" | "danger";
+    backgroundColor: "primary" | "secondary" | "inherit";
     disabled: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     isOpen: boolean;
-    variant: ExpansionPanelVariant;
-    color: ExpansionPanelColor;
+    variant: "default" | "card";
+    color: "default" | "danger";
+    backgroundColor: "primary" | "secondary" | "inherit";
     disabled: boolean;
 }, true>);
 export default _default;

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

@@ -1,4 +1,8 @@
-export { a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from '../../OrExpansionPanel-d3a2218d.js';
+export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from '../../OrExpansionPanel-b8411db6.js';
 import 'vue-demi';
+import '@vueuse/core';
+import '../../usePopoverState-8a95a300.js';
+import '@onereach/styles/tailwind.config';
+import 'tailwindcss/resolveConfig';
 import '../../OrIcon-d35a84d8.js';
 import '../../normalize-component-6e8e3d80.js';

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

@@ -6,3 +6,8 @@ export declare enum ExpansionPanelColor {
     Default = "default",
     Danger = "danger"
 }
+export declare enum ExpansionPanelBackgroundColor {
+    Primary = "primary",
+    Secondary = "secondary",
+    Inherit = "inherit"
+}

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

@@ -1,6 +1,7 @@
-import { ExpansionPanelColor, ExpansionPanelVariant } from './props';
-export declare const ExpansionPanelRoot: string[];
-export declare const ExpansionPanelRootVariants: Record<ExpansionPanelVariant, string[]>;
+import { ExpansionPanelBackgroundColor, ExpansionPanelColor, ExpansionPanelVariant } from './props';
+export declare const ExpansionPanel: string[];
+export declare const ExpansionPanelVariants: Record<ExpansionPanelVariant, string[]>;
+export declare const ExpansionPanelBackgroundColors: Record<`${ExpansionPanelBackgroundColor}-${ExpansionPanelVariant}`, string[]>;
 export declare const ExpansionPanelHeader: string[];
 export declare const ExpansionPanelHeaderColors: Record<ExpansionPanelColor, string[]>;
 export declare const ExpansionPanelAddon: string[];

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

@@ -1,4 +1,4 @@
-export { _ as OrSelectV3 } from '../../OrSelect-1132c7dc.js';
+export { _ as OrSelectV3 } from '../../OrSelect-7f2d3a94.js';
 export { I as SelectSize } from '../../OrInputBox.vue_rollup-plugin-vue_script-906b3ef8.js';
 import 'vue-demi';
 import '../../dropdown-open-e1f90e0a.js';
@@ -12,7 +12,8 @@ import '../../OrLabel-63380256.js';
 import '../../normalize-component-6e8e3d80.js';
 import '../../style-inject.es-4c6f2515.js';
 import '../../OrError-4ffc1c39.js';
-import '../../OrExpansionPanel-d3a2218d.js';
+import '../../OrExpansionPanel-b8411db6.js';
+import '../../usePopoverState-8a95a300.js';
 import '../../OrIcon-d35a84d8.js';
 import '../../OrHint-aa221198.js';
 import '../../OrInputBox-7f3c0ee9.js';
@@ -21,7 +22,6 @@ import '../../useResponsive-a02e95b7.js';
 import '../../useValidationAttributes-d1abbe34.js';
 import '../../OrIconButton-ab726d49.js';
 import '../../OrTooltip-bf4c725c.js';
-import '../../usePopoverState-8a95a300.js';
 import '../../OrPopover-ef16a904.js';
 import '@floating-ui/dom';
 import '../../useElevation-a50ec347.js';

package/dist/esm/v2/index.js

@@ -33,7 +33,7 @@ export { E as EmptyStateSize, _ as OrEmptyStateV3 } from './OrEmptyState-2d3fd68
 export { _ as OrError } from './OrError-efc74907.js';
 export { _ as OrErrorTagV3 } from './OrErrorTag-a55ae01a.js';
 export { _ as OrErrorV3 } from './OrError-4ffc1c39.js';
-export { a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from './OrExpansionPanel-d3a2218d.js';
+export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from './OrExpansionPanel-b8411db6.js';
 export { F as FabColor, _ as OrFabV3 } from './OrFab-f3a590c0.js';
 export { _ as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from './OrFloating-e7ac7618.js';
 export { F as FormGroupDirection, _ as OrFormGroupV3 } from './OrFormGroup-29a514db.js';
@@ -78,7 +78,7 @@ export { _ as OrSearch } from './OrSearch-e2941d35.js';
 export { _ as OrSearchV3 } from './OrSearch-cbd7fd0b.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-a1ea5b72.js';
 export { _ as OrSelect } from './OrSelect-49239b74.js';
-export { _ as OrSelectV3 } from './OrSelect-1132c7dc.js';
+export { _ as OrSelectV3 } from './OrSelect-7f2d3a94.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-c56a9221.js';
 export { _ as OrSidebarV3 } from './OrSidebar-865f307e.js';
 export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-b3a41f02.js';

package/dist/esm/v3/{OrExpansionPanel-c016d8fa.js → OrExpansionPanel-df527763.js}

@@ -1,4 +1,8 @@
-import { defineComponent, ref, computed, watch } from 'vue-demi';
+import { defineComponent, ref, computed, toRef } from 'vue-demi';
+import '@vueuse/core';
+import { u as usePopoverState } from './usePopoverState-8a95a300.js';
+import '@onereach/styles/tailwind.config';
+import 'tailwindcss/resolveConfig';
 import { s as script$1 } from './OrIcon-62793572.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, createVNode, toDisplayString, renderSlot, withDirectives, vShow } from 'vue';
 
@@ -12,11 +16,17 @@ var ExpansionPanelColor;
   ExpansionPanelColor["Default"] = "default";
   ExpansionPanelColor["Danger"] = "danger";
 })(ExpansionPanelColor || (ExpansionPanelColor = {}));
+var ExpansionPanelBackgroundColor;
+(function (ExpansionPanelBackgroundColor) {
+  ExpansionPanelBackgroundColor["Primary"] = "primary";
+  ExpansionPanelBackgroundColor["Secondary"] = "secondary";
+  ExpansionPanelBackgroundColor["Inherit"] = "inherit";
+})(ExpansionPanelBackgroundColor || (ExpansionPanelBackgroundColor = {}));
 
-const ExpansionPanelRoot = [
+const ExpansionPanel = [
 // Layout
 'layout-column'];
-const ExpansionPanelRootVariants = {
+const ExpansionPanelVariants = {
   'default': [
   // Spacing
   'gap-sm'],
@@ -24,9 +34,21 @@ const ExpansionPanelRootVariants = {
   // Shape
   'rounded-md',
   // Spacing
-  'px-md', 'py-md', 'gap-md',
+  'px-md', 'py-md', 'gap-md']
+};
+const ExpansionPanelBackgroundColors = {
+  'primary-default': [],
+  'primary-card': [
+  // Theme
+  'theme-background-surface-1', 'dark:theme-background-surface-1-dark'],
+  'secondary-default': [],
+  'secondary-card': [
   // Theme
-  'theme-background-surface-1', 'dark:theme-background-surface-1-dark']
+  'theme-background-surface-3', 'dark:theme-background-surface-3-dark'],
+  'inherit-default': [],
+  'inherit-card': [
+  // Theme
+  'theme-background-inherit', 'dark:theme-background-inherit']
 };
 const ExpansionPanelHeader = [
 // Layout
@@ -87,50 +109,40 @@ var script = defineComponent({
       type: String,
       default: ExpansionPanelColor.Default
     },
+    backgroundColor: {
+      type: String,
+      default: ExpansionPanelBackgroundColor.Primary
+    },
     disabled: {
       type: Boolean,
       default: false
     }
   },
-  emits: ['open', 'close'],
-  expose: ['root', 'open', 'close'],
+  emits: ['update:state', 'open', 'close'],
+  expose: ['root', 'state', 'open', 'close', 'toggle'],
   setup(props, context) {
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-expansion-panel-v3', ...ExpansionPanelRoot, ...ExpansionPanelRootVariants[props.variant]]);
+    const rootStyles = computed(() => ['or-expansion-panel-v3', ...ExpansionPanel, ...ExpansionPanelVariants[props.variant], ...ExpansionPanelBackgroundColors[`${props.backgroundColor}-${props.variant}`]]);
     const headerStyles = computed(() => [...ExpansionPanelHeader, ...ExpansionPanelHeaderColors[props.color]]);
     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;
-    }
+    const {
+      state,
+      open,
+      close,
+      toggle
+    } = usePopoverState(toRef(props, 'isOpen'), context);
     return {
       root,
       rootStyles,
       headerStyles,
       addonStyles,
-      expanded,
+      state,
       open,
-      close
+      close,
+      toggle
     };
   }
 });
@@ -153,17 +165,17 @@ 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.close() : _ctx.open(), ["stop"]))
+    onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.toggle(), ["stop"]))
   }, [createVNode(_component_OrIcon, {
-    class: normalizeClass([_ctx.expanded ? 'rotate-0' : 'rotate-[-90deg]']),
+    class: normalizeClass([_ctx.state === 'open' ? 'rotate-0' : 'rotate-[-90deg]']),
     icon: 'expand_more',
     variant: 'filled-bold'
   }, null, 8 /* PROPS */, ["class"]), createElementVNode("span", _hoisted_4, toDisplayString(_ctx.label), 1 /* TEXT */)], 10 /* CLASS, PROPS */, _hoisted_3), createElementVNode("div", {
     class: normalizeClass(_ctx.addonStyles)
-  }, [renderSlot(_ctx.$slots, "addon")], 2 /* CLASS */)]), withDirectives(createElementVNode("div", null, [renderSlot(_ctx.$slots, "default")], 512 /* NEED_PATCH */), [[vShow, _ctx.expanded]])], 10 /* CLASS, PROPS */, _hoisted_1);
+  }, [renderSlot(_ctx.$slots, "addon")], 2 /* CLASS */)]), withDirectives(createElementVNode("div", null, [renderSlot(_ctx.$slots, "default")], 512 /* NEED_PATCH */), [[vShow, _ctx.state === 'open']])], 10 /* CLASS, PROPS */, _hoisted_1);
 }
 
 script.render = render;
 script.__file = "src/components/or-expansion-panel-v3/OrExpansionPanel.vue";
 
-export { ExpansionPanelVariant as E, ExpansionPanelColor as a, script as s };
+export { ExpansionPanelVariant as E, ExpansionPanelColor as a, ExpansionPanelBackgroundColor as b, script as s };

package/dist/esm/v3/{OrSelect-9432ac4d.js → OrSelect-c931ed6e.js}

@@ -6,7 +6,7 @@ import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import { s as script$1, i as isEmptyValue } from './OrCheckbox-2194e473.js';
 import { s as script$2 } from './OrError-c01d0c29.js';
-import { s as script$3 } from './OrExpansionPanel-c016d8fa.js';
+import { s as script$3 } from './OrExpansionPanel-df527763.js';
 import { s as script$4 } from './OrHint-06ab89d7.js';
 import { s as script$5 } from './OrIcon-62793572.js';
 import { s as script$7, I as InputBoxSize } from './OrInputBox-32814878.js';

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

@@ -31,7 +31,7 @@ export { E as EmptyStateSize, s as OrEmptyStateV3 } from '../OrEmptyState-5349a1
 export { s as OrError } from '../OrError-f90296db.js';
 export { s as OrErrorTagV3 } from '../OrErrorTag-ade9192b.js';
 export { s as OrErrorV3 } from '../OrError-c01d0c29.js';
-export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from '../OrExpansionPanel-c016d8fa.js';
+export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from '../OrExpansionPanel-df527763.js';
 export { F as FabColor, s as OrFabV3 } from '../OrFab-83cd7ed7.js';
 export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from '../OrFloating-1a9ccfe9.js';
 export { F as FormGroupDirection, s as OrFormGroupV3 } from '../OrFormGroup-9f581536.js';
@@ -76,7 +76,7 @@ export { s as OrSearch } from '../OrSearch-d0c8aca7.js';
 export { s as OrSearchV3 } from '../OrSearch-c5ecb005.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-359fbf3a.js';
 export { s as OrSelect } from '../OrSelect-60205145.js';
-export { s as OrSelectV3 } from '../OrSelect-9432ac4d.js';
+export { s as OrSelectV3 } from '../OrSelect-c931ed6e.js';
 export { s as OrSidebar, O as OrSidebarSide } from '../OrSidebar-aaf73310.js';
 export { s as OrSidebarV3 } from '../OrSidebar-7f5795da.js';
 export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-5fb7a6a1.js';

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

@@ -1,22 +1,26 @@
 import { PropType } from 'vue-demi';
-import { ExpansionPanelColor, ExpansionPanelVariant } from './props';
+import { ExpansionPanelBackgroundColor, ExpansionPanelColor, ExpansionPanelVariant } from './props';
 declare const _default: import("vue-demi").DefineComponent<{
     label: {
         type: StringConstructor;
         required: true;
     };
     isOpen: {
-        type: PropType<boolean>;
+        type: BooleanConstructor;
         default: boolean;
     };
     variant: {
-        type: PropType<ExpansionPanelVariant>;
+        type: PropType<"default" | "card">;
         default: ExpansionPanelVariant;
     };
     color: {
-        type: PropType<ExpansionPanelColor>;
+        type: PropType<"default" | "danger">;
         default: ExpansionPanelColor;
     };
+    backgroundColor: {
+        type: PropType<"primary" | "secondary" | "inherit">;
+        default: ExpansionPanelBackgroundColor;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -26,37 +30,44 @@ declare const _default: import("vue-demi").DefineComponent<{
     rootStyles: import("vue-demi").ComputedRef<string[]>;
     headerStyles: import("vue-demi").ComputedRef<string[]>;
     addonStyles: import("vue-demi").ComputedRef<string[]>;
-    expanded: import("vue-demi").Ref<boolean>;
+    state: import("vue-demi").Ref<"open" | "closed">;
     open: () => void;
     close: () => void;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("open" | "close")[], "open" | "close", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    toggle: () => void;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:state" | "open" | "close")[], "update:state" | "open" | "close", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     label: {
         type: StringConstructor;
         required: true;
     };
     isOpen: {
-        type: PropType<boolean>;
+        type: BooleanConstructor;
         default: boolean;
     };
     variant: {
-        type: PropType<ExpansionPanelVariant>;
+        type: PropType<"default" | "card">;
         default: ExpansionPanelVariant;
     };
     color: {
-        type: PropType<ExpansionPanelColor>;
+        type: PropType<"default" | "danger">;
         default: ExpansionPanelColor;
     };
+    backgroundColor: {
+        type: PropType<"primary" | "secondary" | "inherit">;
+        default: ExpansionPanelBackgroundColor;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
 }>> & {
+    "onUpdate:state"?: ((...args: any[]) => any) | undefined;
     onOpen?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
     isOpen: boolean;
-    variant: ExpansionPanelVariant;
-    color: ExpansionPanelColor;
+    variant: "default" | "card";
+    color: "default" | "danger";
+    backgroundColor: "primary" | "secondary" | "inherit";
     disabled: boolean;
 }>;
 export default _default;

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

@@ -1,4 +1,8 @@
-export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from '../../OrExpansionPanel-c016d8fa.js';
+export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from '../../OrExpansionPanel-df527763.js';
 import 'vue-demi';
+import '@vueuse/core';
+import '../../usePopoverState-8a95a300.js';
+import '@onereach/styles/tailwind.config';
+import 'tailwindcss/resolveConfig';
 import '../../OrIcon-62793572.js';
 import 'vue';

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

@@ -6,3 +6,8 @@ export declare enum ExpansionPanelColor {
     Default = "default",
     Danger = "danger"
 }
+export declare enum ExpansionPanelBackgroundColor {
+    Primary = "primary",
+    Secondary = "secondary",
+    Inherit = "inherit"
+}

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

@@ -1,6 +1,7 @@
-import { ExpansionPanelColor, ExpansionPanelVariant } from './props';
-export declare const ExpansionPanelRoot: string[];
-export declare const ExpansionPanelRootVariants: Record<ExpansionPanelVariant, string[]>;
+import { ExpansionPanelBackgroundColor, ExpansionPanelColor, ExpansionPanelVariant } from './props';
+export declare const ExpansionPanel: string[];
+export declare const ExpansionPanelVariants: Record<ExpansionPanelVariant, string[]>;
+export declare const ExpansionPanelBackgroundColors: Record<`${ExpansionPanelBackgroundColor}-${ExpansionPanelVariant}`, string[]>;
 export declare const ExpansionPanelHeader: string[];
 export declare const ExpansionPanelHeaderColors: Record<ExpansionPanelColor, string[]>;
 export declare const ExpansionPanelAddon: string[];