@onereach/ui-components 2.76.5 → 2.76.6-beta.2434.0

package/dist/esm/v2/{OrExpansionPanel-0a12d957.js → OrExpansionPanel-e36e23a1.js}

@@ -29,6 +29,8 @@ const ExpansionPanelRootVariants = {
 const ExpansionPanelHeader = [
 // Layout
 'layout-row',
+// Box
+'min-w-[16px]',
 // Spacing
 'gap-sm',
 // Interactivity
@@ -165,7 +167,9 @@ var __vue_render__ = function () {
       "icon": 'expand_more',
       "variant": 'filled-bold'
     }
-  }), _vm._v("\n\n      " + _vm._s(_vm.label) + "\n    ")], 1), _vm._v(" "), _c('div', {
+  }), _vm._v(" "), _c('span', {
+    staticClass: "truncate"
+  }, [_vm._v("\n        " + _vm._s(_vm.label) + "\n      ")])], 1), _vm._v(" "), _c('div', {
     class: _vm.addonStyles
   }, [_vm._t("addon")], 2)]), _vm._v(" "), _c('div', {
     directives: [{

package/dist/esm/v2/{OrSelect-090de47b.js → OrSelect-de0ad257.js}

@@ -4,7 +4,7 @@ import { u as useOverflow } from './useOverflow-af6161c8.js';
 import '@vueuse/core';
 import { _ as __vue_component__$1 } from './OrCheckbox-ac3cc642.js';
 import { _ as __vue_component__$2 } from './OrError-9e7976ef.js';
-import { _ as __vue_component__$3 } from './OrExpansionPanel-0a12d957.js';
+import { _ as __vue_component__$3 } from './OrExpansionPanel-e36e23a1.js';
 import { _ as __vue_component__$4 } from './OrHint-272790e7.js';
 import { _ as __vue_component__$5 } from './OrIcon-c434985a.js';
 import { _ as __vue_component__$7 } from './OrInputBox-5c4b3104.js';

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

@@ -25,7 +25,7 @@ export { _ as OrError } from '../OrError-efc74907.js';
 export { _ as OrErrorTagV3 } from '../OrErrorTag-32ba5c0c.js';
 export { _ as OrErrorV3 } from '../OrError-9e7976ef.js';
 export { E as EmptyStateSize, _ as OrEmptyStateV3 } from '../OrEmptyState-ab1a044d.js';
-export { a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from '../OrExpansionPanel-0a12d957.js';
+export { a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from '../OrExpansionPanel-e36e23a1.js';
 export { F as FabColor, _ as OrFabV3 } from '../OrFab-f71daa4f.js';
 export { _ as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from '../OrFloating-67b6592e.js';
 export { _ as OrHint } from '../OrHint-fe65fbe6.js';
@@ -70,7 +70,7 @@ export { _ as OrSearch } from '../OrSearch-5913c0dc.js';
 export { _ as OrSearchV3 } from '../OrSearch-429d7386.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-7486115b.js';
 export { _ as OrSelect } from '../OrSelect-03e79c4b.js';
-export { _ as OrSelectV3 } from '../OrSelect-090de47b.js';
+export { _ as OrSelectV3 } from '../OrSelect-de0ad257.js';
 export { _ as OrSidebar, O as OrSidebarSide } from '../OrSidebar-feacf13a.js';
 export { _ as OrSidebarV3 } from '../OrSidebar-41e8d230.js';
 export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-911009ff.js';

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-0a12d957.js';
+export { a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from '../../OrExpansionPanel-e36e23a1.js';
 import 'vue-demi';
 import '../../OrIcon-c434985a.js';
 import '../../normalize-component-6e8e3d80.js';

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

@@ -1,4 +1,4 @@
-export { _ as OrSelectV3 } from '../../OrSelect-090de47b.js';
+export { _ as OrSelectV3 } from '../../OrSelect-de0ad257.js';
 export { a as SelectSize } from '../../OrInputBox.vue_rollup-plugin-vue_script-4ba46db4.js';
 import 'vue-demi';
 import '../../dropdown-open-0d314aa4.js';
@@ -10,7 +10,7 @@ import '../../OrLabel-49398089.js';
 import '../../normalize-component-6e8e3d80.js';
 import '../../style-inject.es-4c6f2515.js';
 import '../../OrError-9e7976ef.js';
-import '../../OrExpansionPanel-0a12d957.js';
+import '../../OrExpansionPanel-e36e23a1.js';
 import '../../OrIcon-c434985a.js';
 import '../../OrHint-272790e7.js';
 import '../../OrInputBox-5c4b3104.js';

package/dist/esm/v2/index.js

@@ -25,7 +25,7 @@ export { _ as OrError } from './OrError-efc74907.js';
 export { _ as OrErrorTagV3 } from './OrErrorTag-32ba5c0c.js';
 export { _ as OrErrorV3 } from './OrError-9e7976ef.js';
 export { E as EmptyStateSize, _ as OrEmptyStateV3 } from './OrEmptyState-ab1a044d.js';
-export { a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from './OrExpansionPanel-0a12d957.js';
+export { a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from './OrExpansionPanel-e36e23a1.js';
 export { F as FabColor, _ as OrFabV3 } from './OrFab-f71daa4f.js';
 export { _ as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from './OrFloating-67b6592e.js';
 export { _ as OrHint } from './OrHint-fe65fbe6.js';
@@ -70,7 +70,7 @@ export { _ as OrSearch } from './OrSearch-5913c0dc.js';
 export { _ as OrSearchV3 } from './OrSearch-429d7386.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-7486115b.js';
 export { _ as OrSelect } from './OrSelect-03e79c4b.js';
-export { _ as OrSelectV3 } from './OrSelect-090de47b.js';
+export { _ as OrSelectV3 } from './OrSelect-de0ad257.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-feacf13a.js';
 export { _ as OrSidebarV3 } from './OrSidebar-41e8d230.js';
 export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-911009ff.js';

package/dist/esm/v3/{OrExpansionPanel-541cc4c1.js → OrExpansionPanel-244a52f4.js}

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { s as script$1 } from './OrIcon-ea40e58c.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, createVNode, createTextVNode, toDisplayString, renderSlot, withDirectives, vShow } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, createVNode, toDisplayString, renderSlot, withDirectives, vShow } from 'vue';
 
 var ExpansionPanelVariant;
 (function (ExpansionPanelVariant) {
@@ -29,6 +29,8 @@ const ExpansionPanelRootVariants = {
 const ExpansionPanelHeader = [
 // Layout
 'layout-row',
+// Box
+'min-w-[16px]',
 // Spacing
 'gap-sm',
 // Interactivity
@@ -136,6 +138,9 @@ const _hoisted_2 = {
   class: /*#__PURE__*/normalizeClass(['layout-row', 'justify-between'])
 };
 const _hoisted_3 = ["tabindex", "disabled"];
+const _hoisted_4 = {
+  class: "truncate"
+};
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrIcon = resolveComponent("OrIcon");
   return openBlock(), createElementBlock("div", {
@@ -151,7 +156,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass([_ctx.expanded ? 'rotate-0' : 'rotate-[-90deg]']),
     icon: 'expand_more',
     variant: 'filled-bold'
-  }, null, 8 /* PROPS */, ["class"]), createTextVNode(" " + toDisplayString(_ctx.label), 1 /* TEXT */)], 10 /* CLASS, PROPS */, _hoisted_3), createElementVNode("div", {
+  }, 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);
 }

package/dist/esm/v3/{OrSelect-52d67a76.js → OrSelect-2e683ddd.js}

@@ -4,7 +4,7 @@ import { u as useOverflow } from './useOverflow-af6161c8.js';
 import '@vueuse/core';
 import { s as script$1 } from './OrCheckbox-78b08b59.js';
 import { s as script$2 } from './OrError-5e926d62.js';
-import { s as script$3 } from './OrExpansionPanel-541cc4c1.js';
+import { s as script$3 } from './OrExpansionPanel-244a52f4.js';
 import { s as script$4 } from './OrHint-031f9265.js';
 import { s as script$5 } from './OrIcon-ea40e58c.js';
 import { s as script$7, a as InputBoxSize } from './OrInputBox-2467d7e4.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-71fe44c2.js';
 export { s as OrErrorV3 } from '../OrError-5e926d62.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from '../OrEmptyState-cd3a4026.js';
-export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from '../OrExpansionPanel-541cc4c1.js';
+export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from '../OrExpansionPanel-244a52f4.js';
 export { F as FabColor, s as OrFabV3 } from '../OrFab-6266b4de.js';
 export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from '../OrFloating-291c7653.js';
 export { s as OrHint } from '../OrHint-1414c530.js';
@@ -66,7 +66,7 @@ export { s as OrSearch } from '../OrSearch-7a01bb20.js';
 export { s as OrSearchV3 } from '../OrSearch-4568eb9d.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-880b4911.js';
 export { s as OrSelect } from '../OrSelect-88e5dfaf.js';
-export { s as OrSelectV3 } from '../OrSelect-52d67a76.js';
+export { s as OrSelectV3 } from '../OrSelect-2e683ddd.js';
 export { s as OrSidebar, O as OrSidebarSide } from '../OrSidebar-375c85a3.js';
 export { s as OrSidebarV3 } from '../OrSidebar-4fb216c3.js';
 export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-d659d078.js';

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-541cc4c1.js';
+export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from '../../OrExpansionPanel-244a52f4.js';
 import 'vue-demi';
 import '../../OrIcon-ea40e58c.js';
 import 'vue';

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

@@ -1,4 +1,4 @@
-export { s as OrSelectV3 } from '../../OrSelect-52d67a76.js';
+export { s as OrSelectV3 } from '../../OrSelect-2e683ddd.js';
 export { a as SelectSize } from '../../OrInputBox-2467d7e4.js';
 import 'vue-demi';
 import '../../dropdown-open-0d314aa4.js';
@@ -10,7 +10,7 @@ import '../../OrLabel-5a2f55fd.js';
 import 'vue';
 import '../../style-inject.es-4c6f2515.js';
 import '../../OrError-5e926d62.js';
-import '../../OrExpansionPanel-541cc4c1.js';
+import '../../OrExpansionPanel-244a52f4.js';
 import '../../OrIcon-ea40e58c.js';
 import '../../OrHint-031f9265.js';
 import '../../OrInput-d16b7930.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-71fe44c2.js';
 export { s as OrErrorV3 } from './OrError-5e926d62.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from './OrEmptyState-cd3a4026.js';
-export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel-541cc4c1.js';
+export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel-244a52f4.js';
 export { F as FabColor, s as OrFabV3 } from './OrFab-6266b4de.js';
 export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from './OrFloating-291c7653.js';
 export { s as OrHint } from './OrHint-1414c530.js';
@@ -66,7 +66,7 @@ export { s as OrSearch } from './OrSearch-7a01bb20.js';
 export { s as OrSearchV3 } from './OrSearch-4568eb9d.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-880b4911.js';
 export { s as OrSelect } from './OrSelect-88e5dfaf.js';
-export { s as OrSelectV3 } from './OrSelect-52d67a76.js';
+export { s as OrSelectV3 } from './OrSelect-2e683ddd.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-375c85a3.js';
 export { s as OrSidebarV3 } from './OrSidebar-4fb216c3.js';
 export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-d659d078.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.76.5",
+  "version": "2.76.6-beta.2434.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": "678b8d080c63276f34c116b85e8b7cf800ff5a96"
+  }
 }

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

@@ -2,9 +2,12 @@ import { Meta, StoryFn } from '@storybook/vue3';
 import { action } from '@storybook/addon-actions';
 
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
+import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
+import { OrTagV3 as OrTag } from '../or-tag-v3';
 import OrExpansionPanelDocs from './OrExpansionPanel.docs.mdx';
 import OrExpansionPanel from './OrExpansionPanel.vue';
 import { ExpansionPanelColor, ExpansionPanelVariant } from './props';
+import * as Faker from 'faker';
 
 export default {
   title: 'Components/Expansion Panel',
@@ -66,6 +69,8 @@ const Template: StoryFn<typeof OrExpansionPanel> = (args) => ({
   components: {
     OrExpansionPanel,
     OrIcon,
+    OrIconButton,
+    OrTag,
   },
 
   setup() {
@@ -91,13 +96,42 @@ const Template: StoryFn<typeof OrExpansionPanel> = (args) => ({
   `,
 });
 
-export const ExpansionPanel = Template.bind({});
+export const Default = Template.bind({});
 
-ExpansionPanel.args = {
+Default.args = {
   // Slots
-  default: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+  default: Faker.lorem.paragraphs(3),
   addon: '<OrIcon icon="drag_indicator" />',
 
   // Props
   label: 'Expansion Panel',
 };
+
+export const CardVariant = Template.bind({});
+
+CardVariant.args = {
+  // Slots
+  default: Faker.lorem.paragraphs(3),
+  addon: '<OrIconButton icon="delete" />',
+
+  // Props
+  label: 'Card Expansion Panel',
+  variant: ExpansionPanelVariant.Card,
+};
+
+export const WithLongLabelAndTags = Template.bind({});
+
+WithLongLabelAndTags.args = {
+  // Slots
+  default: Faker.lorem.paragraphs(3),
+  addon: `
+    <div class="flex flex-row gap-sm">
+      <OrTag>${Faker.lorem.word()}</OrTag>
+      <OrTag>${Faker.lorem.word()}</OrTag>
+      <OrTag>${Faker.lorem.word()}</OrTag>
+    </div>
+  `,
+
+  // Props
+  label: Faker.lorem.sentence(35),
+};

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

@@ -16,8 +16,9 @@
           :icon="'expand_more'"
           :variant="'filled-bold'"
         />
-
-        {{ label }}
+        <span class="truncate">
+          {{ label }}
+        </span>
       </div>
 
       <div :class="addonStyles">

package/src/components/or-expansion-panel-v3/styles.ts

@@ -28,6 +28,9 @@ export const ExpansionPanelHeader: string[] = [
   // Layout
   'layout-row',
 
+  // Box
+  'min-w-[16px]',
+
   // Spacing
   'gap-sm',