@onereach/ui-components 15.2.0 → 15.2.2

package/dist/esm/v2/{OrCard-42359715.js → OrCard-4f970f6a.js}

@@ -28,9 +28,7 @@ const CardInteractive = [
 // Hover
 'hover:shadow-contextual hover:dark:shadow-contextual-dark',
 // Selected
-'selected:bg-surface-1 dark:selected:bg-surface-1-dark', 'selected:shadow-card selected:dark:shadow-card-dark',
-// Active
-'active:bg-surface-1 dark:active:bg-surface-1-dark', 'active:shadow-card active:dark:shadow-card-dark'];
+'selected:bg-primary-opacity-0-08 dark:selected:bg-primary-opacity-0-08-dark', 'selected:shadow-card selected:dark:shadow-card-dark'];
 
 var script = defineComponent({
   name: 'OrCard',

package/dist/esm/v2/{OrCardCollection-1c7a0fe2.js → OrCardCollection-75ccfd98.js}

@@ -45,14 +45,18 @@ const CardCollectionContent = [
 // Overflow
 'overflow-auto',
 // Spacing
-'-mx-sm', '-my-sm', '-mr-[calc(theme(spacing.sm) * 2)]', 'px-sm', 'py-sm', 'gap-sm'];
+'-mx-sm', '-my-sm', '-mr-[calc(theme(spacing.sm) * 2)]', 'px-sm', 'py-sm'];
 const CardCollectionContentViews = {
   [CardCollectionView.Grid]: [
   // Layout
-  'grid-cols-1 md:grid-cols-5'],
+  'grid-cols-1 md:grid-cols-5',
+  // Spacing
+  'gap-sm md:gap-md'],
   [CardCollectionView.List]: [
   // Layout
-  'grid-cols-1']
+  'grid-cols-1',
+  // Spacing
+  'gap-sm']
 };
 const CardCollectionEmptyContentItem = [
 // Layout

package/dist/esm/v2/{OrFilter-6d2f2b95.js → OrFilter-fceea8b9.js}

@@ -6,7 +6,7 @@ import { u as usePopoverState } from './usePopoverState-7267fa91.js';
 import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
 import { _ as __vue_component__$1 } from './OrFilterPopover-b505f5c4.js';
-import { _ as __vue_component__$2 } from './OrFilterTrigger-6d5a3b7f.js';
+import { _ as __vue_component__$2 } from './OrFilterTrigger-949f7f18.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 const Filter = [];

package/dist/esm/v2/{OrFilterTrigger-6d5a3b7f.js → OrFilterTrigger-949f7f18.js}

@@ -65,7 +65,7 @@ var script = defineComponent({
       default: 'Filters'
     }
   },
-  emits: ['reset'],
+  emits: ['reset', 'click'],
   expose: ['root'],
   setup(props, context) {
     // Refs & Styles
@@ -101,6 +101,11 @@ var __vue_render__ = function () {
     attrs: {
       "selected": _vm.isOpen,
       "activated": !!_vm.value
+    },
+    on: {
+      "click": function (e) {
+        return _vm.$emit('click', e);
+      }
     }
   }, [_c('div', {
     class: _vm.labelStyles

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

@@ -11,8 +11,8 @@ export { _ as OrButtonV3 } from '../OrButton-3a743a90.js';
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant } from '../OrButton.vue_rollup-plugin-vue_script-e8900483.js';
 export { _ as OrCard } from '../OrCard-c44d9783.js';
 export { C as CARD_COLLECTION_LAYOUT, _ as OrCardCollection } from '../OrCardCollection-5c35e100.js';
-export { C as CardCollectionView, _ as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../OrCardCollection-1c7a0fe2.js';
-export { C as CardPadding, _ as OrCardV3 } from '../OrCard-42359715.js';
+export { C as CardCollectionView, _ as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../OrCardCollection-75ccfd98.js';
+export { C as CardPadding, _ as OrCardV3 } from '../OrCard-4f970f6a.js';
 export { _ as OrCheckbox } from '../OrCheckbox-a91ae887.js';
 export { _ as OrCheckboxGroupV3 } from '../OrCheckboxGroup-9b5928f0.js';
 export { _ as OrCheckboxTreeV3 } from '../OrCheckboxTree-577fdb91.js';
@@ -57,8 +57,8 @@ export { _ as OrErrorV3 } from '../OrError-b25d782d.js';
 export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from '../OrExpansionPanel-51ed2e47.js';
 export { F as FabColor, _ as OrFabV3 } from '../OrFab-26e22be7.js';
 export { _ as OrFilterPopoverV3 } from '../OrFilterPopover-b505f5c4.js';
-export { _ as OrFilterTriggerV3 } from '../OrFilterTrigger-6d5a3b7f.js';
-export { _ as OrFilterV3 } from '../OrFilter-6d2f2b95.js';
+export { _ as OrFilterTriggerV3 } from '../OrFilterTrigger-949f7f18.js';
+export { _ as OrFilterV3 } from '../OrFilter-fceea8b9.js';
 export { _ as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from '../OrFloating-517737ad.js';
 export { F as FormGroupDirection, _ as OrFormGroupV3 } from '../OrFormGroup-a814b820.js';
 export { _ as OrHint } from '../OrHint-7eadc91e.js';

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

@@ -1,4 +1,4 @@
-export { C as CardCollectionView, _ as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../../OrCardCollection-1c7a0fe2.js';
+export { C as CardCollectionView, _ as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../../OrCardCollection-75ccfd98.js';
 import 'vue-demi';
 import '../../OrIconButton-efaf73f5.js';
 import '../../OrIcon-0a14dafc.js';

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

@@ -1,3 +1,3 @@
-export { C as CardPadding, _ as OrCardV3 } from '../../OrCard-42359715.js';
+export { C as CardPadding, _ as OrCardV3 } from '../../OrCard-4f970f6a.js';
 import 'vue-demi';
 import '../../normalize-component-6e8e3d80.js';

package/dist/esm/v2/components/or-filter-trigger-v3/OrFilterTrigger.vue.d.ts

@@ -17,7 +17,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     labelStyles: import("vue-demi").ComputedRef<string[]>;
     tagStyles: import("vue-demi").ComputedRef<string[]>;
     reset: () => void;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "reset"[], "reset", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("reset" | "click")[], "reset" | "click", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     isOpen: {
         type: BooleanConstructor;
         default: boolean;
@@ -32,6 +32,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }>> & {
     onReset?: ((...args: any[]) => any) | undefined;
+    onClick?: ((...args: any[]) => any) | undefined;
 }, {
     isOpen: boolean;
     value: number;

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

@@ -1,4 +1,4 @@
-export { _ as OrFilterTriggerV3 } from '../../OrFilterTrigger-6d5a3b7f.js';
+export { _ as OrFilterTriggerV3 } from '../../OrFilterTrigger-949f7f18.js';
 import 'vue-demi';
 import '../../OrIconButton-efaf73f5.js';
 import '../../OrIcon-0a14dafc.js';

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

@@ -1,4 +1,4 @@
-export { _ as OrFilterV3 } from '../../OrFilter-6d2f2b95.js';
+export { _ as OrFilterV3 } from '../../OrFilter-fceea8b9.js';
 import 'vue-demi';
 import '../../TimeFormat-a7f5565b.js';
 import '../../dom-53c9635b.js';
@@ -29,4 +29,4 @@ import '../../OrBottomSheet-3bb9d8e9.js';
 import '../../useTheme-dc76b423.js';
 import '../../isPrevented-b1764210.js';
 import '../../isAncestor-2973d4f4.js';
-import '../../OrFilterTrigger-6d5a3b7f.js';
+import '../../OrFilterTrigger-949f7f18.js';

package/dist/esm/v2/index.js

@@ -11,8 +11,8 @@ export { _ as OrButtonV3 } from './OrButton-3a743a90.js';
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant } from './OrButton.vue_rollup-plugin-vue_script-e8900483.js';
 export { _ as OrCard } from './OrCard-c44d9783.js';
 export { C as CARD_COLLECTION_LAYOUT, _ as OrCardCollection } from './OrCardCollection-5c35e100.js';
-export { C as CardCollectionView, _ as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-1c7a0fe2.js';
-export { C as CardPadding, _ as OrCardV3 } from './OrCard-42359715.js';
+export { C as CardCollectionView, _ as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-75ccfd98.js';
+export { C as CardPadding, _ as OrCardV3 } from './OrCard-4f970f6a.js';
 export { _ as OrCheckbox } from './OrCheckbox-a91ae887.js';
 export { _ as OrCheckboxGroupV3 } from './OrCheckboxGroup-9b5928f0.js';
 export { _ as OrCheckboxTreeV3 } from './OrCheckboxTree-577fdb91.js';
@@ -57,8 +57,8 @@ export { _ as OrErrorV3 } from './OrError-b25d782d.js';
 export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from './OrExpansionPanel-51ed2e47.js';
 export { F as FabColor, _ as OrFabV3 } from './OrFab-26e22be7.js';
 export { _ as OrFilterPopoverV3 } from './OrFilterPopover-b505f5c4.js';
-export { _ as OrFilterTriggerV3 } from './OrFilterTrigger-6d5a3b7f.js';
-export { _ as OrFilterV3 } from './OrFilter-6d2f2b95.js';
+export { _ as OrFilterTriggerV3 } from './OrFilterTrigger-949f7f18.js';
+export { _ as OrFilterV3 } from './OrFilter-fceea8b9.js';
 export { _ as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from './OrFloating-517737ad.js';
 export { F as FormGroupDirection, _ as OrFormGroupV3 } from './OrFormGroup-a814b820.js';
 export { _ as OrHint } from './OrHint-7eadc91e.js';

package/dist/esm/v3/{OrCard-c2ef331b.js → OrCard-999571e5.js}

@@ -28,9 +28,7 @@ const CardInteractive = [
 // Hover
 'hover:shadow-contextual hover:dark:shadow-contextual-dark',
 // Selected
-'selected:bg-surface-1 dark:selected:bg-surface-1-dark', 'selected:shadow-card selected:dark:shadow-card-dark',
-// Active
-'active:bg-surface-1 dark:active:bg-surface-1-dark', 'active:shadow-card active:dark:shadow-card-dark'];
+'selected:bg-primary-opacity-0-08 dark:selected:bg-primary-opacity-0-08-dark', 'selected:shadow-card selected:dark:shadow-card-dark'];
 
 var script = defineComponent({
   name: 'OrCard',

package/dist/esm/v3/{OrCardCollection-cd534916.js → OrCardCollection-b4a2eaae.js}

@@ -45,14 +45,18 @@ const CardCollectionContent = [
 // Overflow
 'overflow-auto',
 // Spacing
-'-mx-sm', '-my-sm', '-mr-[calc(theme(spacing.sm) * 2)]', 'px-sm', 'py-sm', 'gap-sm'];
+'-mx-sm', '-my-sm', '-mr-[calc(theme(spacing.sm) * 2)]', 'px-sm', 'py-sm'];
 const CardCollectionContentViews = {
   [CardCollectionView.Grid]: [
   // Layout
-  'grid-cols-1 md:grid-cols-5'],
+  'grid-cols-1 md:grid-cols-5',
+  // Spacing
+  'gap-sm md:gap-md'],
   [CardCollectionView.List]: [
   // Layout
-  'grid-cols-1']
+  'grid-cols-1',
+  // Spacing
+  'gap-sm']
 };
 const CardCollectionEmptyContentItem = [
 // Layout

package/dist/esm/v3/{OrFilter-d170c8c3.js → OrFilter-a9256999.js}

@@ -6,7 +6,7 @@ import { u as usePopoverState } from './usePopoverState-7267fa91.js';
 import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
 import { s as script$1 } from './OrFilterPopover-2832fbc3.js';
-import { s as script$2 } from './OrFilterTrigger-ede24045.js';
+import { s as script$2 } from './OrFilterTrigger-1d5c6704.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, mergeProps, withCtx, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
 
 const Filter = [];

package/dist/esm/v3/{OrFilterTrigger-ede24045.js → OrFilterTrigger-1d5c6704.js}

@@ -65,7 +65,7 @@ var script = defineComponent({
       default: 'Filters'
     }
   },
-  emits: ['reset'],
+  emits: ['reset', 'click'],
   expose: ['root'],
   setup(props, context) {
     // Refs & Styles
@@ -102,7 +102,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles),
     selected: _ctx.isOpen,
-    activated: !!_ctx.value
+    activated: !!_ctx.value,
+    onClick: _cache[1] || (_cache[1] = e => _ctx.$emit('click', e))
   }, [createElementVNode("div", {
     class: normalizeClass(_ctx.labelStyles)
   }, [createVNode(_component_OrIcon, {

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

@@ -9,8 +9,8 @@ export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTT
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from '../OrButton-31bcb511.js';
 export { s as OrCard } from '../OrCard-e3a5aea4.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from '../OrCardCollection-6559e6fa.js';
-export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../OrCardCollection-cd534916.js';
-export { C as CardPadding, s as OrCardV3 } from '../OrCard-c2ef331b.js';
+export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../OrCardCollection-b4a2eaae.js';
+export { C as CardPadding, s as OrCardV3 } from '../OrCard-999571e5.js';
 export { s as OrCheckbox } from '../OrCheckbox-9d30d1d2.js';
 export { s as OrCheckboxGroupV3 } from '../OrCheckboxGroup-3864819c.js';
 export { s as OrCheckboxTreeV3 } from '../OrCheckboxTree-66494405.js';
@@ -55,8 +55,8 @@ export { s as OrErrorV3 } from '../OrError-331220bc.js';
 export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from '../OrExpansionPanel-84445327.js';
 export { F as FabColor, s as OrFabV3 } from '../OrFab-f949bf4f.js';
 export { s as OrFilterPopoverV3 } from '../OrFilterPopover-2832fbc3.js';
-export { s as OrFilterTriggerV3 } from '../OrFilterTrigger-ede24045.js';
-export { s as OrFilterV3 } from '../OrFilter-d170c8c3.js';
+export { s as OrFilterTriggerV3 } from '../OrFilterTrigger-1d5c6704.js';
+export { s as OrFilterV3 } from '../OrFilter-a9256999.js';
 export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from '../OrFloating-00617713.js';
 export { F as FormGroupDirection, s as OrFormGroupV3 } from '../OrFormGroup-893719a1.js';
 export { s as OrHint } from '../OrHint-8822005b.js';

package/dist/esm/v3/components/or-card-collection-v3/index.js

@@ -1,4 +1,4 @@
-export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../../OrCardCollection-cd534916.js';
+export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../../OrCardCollection-b4a2eaae.js';
 import 'vue-demi';
 import '../../OrIconButton-5a508869.js';
 import '../../OrIcon-9aff520e.js';

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

@@ -1,3 +1,3 @@
-export { C as CardPadding, s as OrCardV3 } from '../../OrCard-c2ef331b.js';
+export { C as CardPadding, s as OrCardV3 } from '../../OrCard-999571e5.js';
 import 'vue-demi';
 import 'vue';

package/dist/esm/v3/components/or-filter-trigger-v3/OrFilterTrigger.vue.d.ts

@@ -17,7 +17,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     labelStyles: import("vue-demi").ComputedRef<string[]>;
     tagStyles: import("vue-demi").ComputedRef<string[]>;
     reset: () => void;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "reset"[], "reset", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("reset" | "click")[], "reset" | "click", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     isOpen: {
         type: BooleanConstructor;
         default: boolean;
@@ -32,6 +32,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }>> & {
     onReset?: ((...args: any[]) => any) | undefined;
+    onClick?: ((...args: any[]) => any) | undefined;
 }, {
     isOpen: boolean;
     value: number;

package/dist/esm/v3/components/or-filter-trigger-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrFilterTriggerV3 } from '../../OrFilterTrigger-ede24045.js';
+export { s as OrFilterTriggerV3 } from '../../OrFilterTrigger-1d5c6704.js';
 import 'vue-demi';
 import '../../OrIconButton-5a508869.js';
 import '../../OrIcon-9aff520e.js';

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

@@ -1,4 +1,4 @@
-export { s as OrFilterV3 } from '../../OrFilter-d170c8c3.js';
+export { s as OrFilterV3 } from '../../OrFilter-a9256999.js';
 import 'vue-demi';
 import '../../TimeFormat-a7f5565b.js';
 import '../../dom-53c9635b.js';
@@ -27,4 +27,4 @@ import '../../OrBottomSheet-a7a06f7f.js';
 import '../../useTheme-dc76b423.js';
 import '../../isPrevented-b1764210.js';
 import '../../isAncestor-2973d4f4.js';
-import '../../OrFilterTrigger-ede24045.js';
+import '../../OrFilterTrigger-1d5c6704.js';

package/dist/esm/v3/index.js

@@ -9,8 +9,8 @@ export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTT
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-31bcb511.js';
 export { s as OrCard } from './OrCard-e3a5aea4.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from './OrCardCollection-6559e6fa.js';
-export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-cd534916.js';
-export { C as CardPadding, s as OrCardV3 } from './OrCard-c2ef331b.js';
+export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-b4a2eaae.js';
+export { C as CardPadding, s as OrCardV3 } from './OrCard-999571e5.js';
 export { s as OrCheckbox } from './OrCheckbox-9d30d1d2.js';
 export { s as OrCheckboxGroupV3 } from './OrCheckboxGroup-3864819c.js';
 export { s as OrCheckboxTreeV3 } from './OrCheckboxTree-66494405.js';
@@ -55,8 +55,8 @@ export { s as OrErrorV3 } from './OrError-331220bc.js';
 export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel-84445327.js';
 export { F as FabColor, s as OrFabV3 } from './OrFab-f949bf4f.js';
 export { s as OrFilterPopoverV3 } from './OrFilterPopover-2832fbc3.js';
-export { s as OrFilterTriggerV3 } from './OrFilterTrigger-ede24045.js';
-export { s as OrFilterV3 } from './OrFilter-d170c8c3.js';
+export { s as OrFilterTriggerV3 } from './OrFilterTrigger-1d5c6704.js';
+export { s as OrFilterV3 } from './OrFilter-a9256999.js';
 export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from './OrFloating-00617713.js';
 export { F as FormGroupDirection, s as OrFormGroupV3 } from './OrFormGroup-893719a1.js';
 export { s as OrHint } from './OrHint-8822005b.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "15.2.0",
+  "version": "15.2.2",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -40,7 +40,7 @@
     "@codemirror/lang-json": "6.0.1",
     "@codemirror/lang-markdown": "6.1.1",
     "@floating-ui/dom": "1.5.3",
-    "@onereach/styles": "^15.2.0",
+    "@onereach/styles": "^15.2.2",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
@@ -180,5 +180,5 @@
     },
     "./package.json": "./package.json"
   },
-  "gitHead": "080a0e9b2cbcec5ebb59fe80086e86af2ad87e78"
+  "gitHead": "93daef0030a9dbf66a0b1d519ae28a2e7e42de84"
 }

package/src/components/or-card-collection-v3/styles.ts

@@ -46,19 +46,23 @@ export const CardCollectionContent: string[] = [
 
   'px-sm',
   'py-sm',
-
-  'gap-sm',
 ];
 
 export const CardCollectionContentViews: Record<CardCollectionView, string[]> = {
   [CardCollectionView.Grid]: [
     // Layout
     'grid-cols-1 md:grid-cols-5',
+
+    // Spacing
+    'gap-sm md:gap-md',
   ],
 
   [CardCollectionView.List]: [
     // Layout
     'grid-cols-1',
+
+    // Spacing
+    'gap-sm',
   ],
 };
 

package/src/components/or-card-v3/styles.ts

@@ -33,10 +33,6 @@ export const CardInteractive: string[] = [
   'hover:shadow-contextual hover:dark:shadow-contextual-dark',
 
   // Selected
-  'selected:bg-surface-1 dark:selected:bg-surface-1-dark',
+  'selected:bg-primary-opacity-0-08 dark:selected:bg-primary-opacity-0-08-dark',
   'selected:shadow-card selected:dark:shadow-card-dark',
-
-  // Active
-  'active:bg-surface-1 dark:active:bg-surface-1-dark',
-  'active:shadow-card active:dark:shadow-card-dark',
 ];

package/src/components/or-filter-trigger-v3/OrFilterTrigger.vue

@@ -4,6 +4,7 @@
     :class="rootStyles"
     :selected="isOpen"
     :activated="!!value"
+    @click="(e) => $emit('click', e)"
   >
     <div :class="labelStyles">
       <OrIcon
@@ -64,6 +65,7 @@ export default defineComponent({
 
   emits: [
     'reset',
+    'click',
   ],
 
   expose: [