origam 2.18.11 → 2.18.13

package/dist/src/assets/css/tokens/dark.css

@@ -448,6 +448,8 @@
   --origam-chip__close---max-width: 18px;
   --origam-chip__close---user-select: none;
   --origam-chip__close---flex: 0 1 auto;
+  --origam-chip__prepend---margin-inline-end: 6px;
+  --origam-chip__append---margin-inline-start: 6px;
   --origam-chip__filter---transition-property: transform, opacity;
   --origam-chip__filter---transition-duration: var(--origam-motion__duration---normal);
   --origam-chip__filter---transition-timing-function: var(--origam-motion__easing---standard);
@@ -3190,6 +3192,8 @@
     --origam-chip__close---max-width: 18px;
     --origam-chip__close---user-select: none;
     --origam-chip__close---flex: 0 1 auto;
+    --origam-chip__prepend---margin-inline-end: 6px;
+    --origam-chip__append---margin-inline-start: 6px;
     --origam-chip__filter---transition-property: transform, opacity;
     --origam-chip__filter---transition-duration: var(--origam-motion__duration---normal);
     --origam-chip__filter---transition-timing-function: var(--origam-motion__easing---standard);

package/dist/src/assets/css/tokens/light.css

@@ -350,6 +350,8 @@
   --origam-chip__close---max-width: 18px;
   --origam-chip__close---user-select: none;
   --origam-chip__close---flex: 0 1 auto;
+  --origam-chip__prepend---margin-inline-end: 6px;
+  --origam-chip__append---margin-inline-start: 6px;
   --origam-chip__filter---transition-property: transform, opacity;
   --origam-chip__filter---transition-duration: var(--origam-motion__duration---normal);
   --origam-chip__filter---transition-timing-function: var(--origam-motion__easing---standard);

package/dist/src/assets/scss/tokens/_dark.scss

@@ -448,6 +448,8 @@
   --origam-chip__close---max-width: 18px;
   --origam-chip__close---user-select: none;
   --origam-chip__close---flex: 0 1 auto;
+  --origam-chip__prepend---margin-inline-end: 6px;
+  --origam-chip__append---margin-inline-start: 6px;
   --origam-chip__filter---transition-property: transform, opacity;
   --origam-chip__filter---transition-duration: var(--origam-motion__duration---normal);
   --origam-chip__filter---transition-timing-function: var(--origam-motion__easing---standard);
@@ -3190,6 +3192,8 @@
     --origam-chip__close---max-width: 18px;
     --origam-chip__close---user-select: none;
     --origam-chip__close---flex: 0 1 auto;
+    --origam-chip__prepend---margin-inline-end: 6px;
+    --origam-chip__append---margin-inline-start: 6px;
     --origam-chip__filter---transition-property: transform, opacity;
     --origam-chip__filter---transition-duration: var(--origam-motion__duration---normal);
     --origam-chip__filter---transition-timing-function: var(--origam-motion__easing---standard);

package/dist/src/assets/scss/tokens/_light.scss

@@ -350,6 +350,8 @@
   --origam-chip__close---max-width: 18px;
   --origam-chip__close---user-select: none;
   --origam-chip__close---flex: 0 1 auto;
+  --origam-chip__prepend---margin-inline-end: 6px;
+  --origam-chip__append---margin-inline-start: 6px;
   --origam-chip__filter---transition-property: transform, opacity;
   --origam-chip__filter---transition-duration: var(--origam-motion__duration---normal);
   --origam-chip__filter---transition-timing-function: var(--origam-motion__easing---standard);

package/dist/src/components/Chart/OrigamChartAxis.vue

@@ -85,7 +85,8 @@
 
 <script lang="ts" setup>
 defineOptions({
-  name: "OrigamChartAxis"
+  name: "OrigamChartAxis",
+  inheritAttrs: false
 });
 const props = defineProps({
   plot: { type: Object, required: true },

package/dist/src/components/Chip/OrigamChip.vue

@@ -435,6 +435,44 @@ defineExpose({
 			display: inline-flex;
 		}
 
+		// #957 — `__close` owned both of its margin channels since forever;
+		// `__prepend` / `__append` owned NEITHER, so a chip with an icon
+		// rendered it glued to its label (measured: 0px, `margin-inline-end:
+		// 0px`, `gap: normal`, on all 8 identities) and no theme could fix it
+		// — the channel had never been opened. Default 6px is not a new design
+		// value: it is `--origam-chip__close---margin-inline-start`'s, i.e.
+		// the component's own precedent for "gutter between an affix and the
+		// label".
+		//
+		// ⛔ The gutter is CONDITIONAL on the label being non-empty, and that
+		// is the whole difficulty. `__content` has NO `v-if`: an icon-only
+		// chip (`<origam-chip prepend-icon="…"/>`, no text, no default slot)
+		// still renders `<div class="origam-chip__content">` holding the
+		// empty text node Vue emits for `{{ text }}`. An unconditional margin
+		// would therefore hang a 6px PHANTOM gutter off the trailing edge of
+		// every icon-only chip, in 217 places. Measured in Chromium, which is
+		// what makes `:empty` the right discriminator here:
+		//
+		//   content = "text"                  → :empty false → gutter 6px
+		//   content = <div></div>             → :empty true  → gutter 0px
+		//   content = empty text node (Vue!)  → :empty true  → gutter 0px
+		//   content = " " (one space)         → :empty false → gutter 6px
+		//
+		// `__prepend` needs `:has(+ …)` because the element it depends on is
+		// its FOLLOWING sibling; `__append` reads its PRECEDING sibling, so a
+		// plain `+` combinator suffices. Both keep the declaration on the
+		// element the token NAMES, so `--origam-chip__prepend---*` stays
+		// readable as "the prepend zone's own margin". Where `:has()` is
+		// unsupported the prepend gutter is simply absent — today's rendering,
+		// not a regression.
+		&__prepend:has(+ #{$this}__content:not(:empty)) {
+			margin-inline-end: var(--origam-chip__prepend---margin-inline-end, 6px);
+		}
+
+		&__content:not(:empty) + &__append {
+			margin-inline-start: var(--origam-chip__append---margin-inline-start, 6px);
+		}
+
 		&__close {
 			cursor: var(--origam-chip__close---cursor, pointer);
 			flex: var(--origam-chip__close---flex, 0 1 auto);

package/dist/src/components/ClientOnly/OrigamClientOnly.vue

@@ -16,7 +16,7 @@
 
 <script lang="ts" setup>
 import { onMounted, ref } from "vue";
-defineOptions({ name: "OrigamClientOnly" });
+defineOptions({ name: "OrigamClientOnly", inheritAttrs: false });
 defineProps({
   placeholderTag: { type: String, required: false },
   placeholderClass: { type: String, required: false }

package/dist/src/components/CommandPalette/OrigamCommandPalette.vue

@@ -8,6 +8,7 @@
 					:class="rootClasses"
 					:style="rootStyles"
 					:data-cy="dataCy"
+					v-bind="{ ...$attrs }"
 					@click.self="handleBackdropClick"
 					@keydown="handleKeydown"
 			>
@@ -178,6 +179,7 @@ import { IN_BROWSER } from "../../consts/Commons/commons.const";
 import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
 import { getUid } from "../../utils/Commons/getCurrentInstance.util";
 import { fuzzyMatch } from "../../utils/CommandPalette/fuzzy-match.util";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   modelValue: { type: Boolean, required: false, default: false },
   hotkey: { type: [Array, null], required: false, default: () => COMMAND_PALETTE_DEFAULT_HOTKEY },

package/dist/src/components/DataTable/OrigamDataTableHeaders.vue

@@ -80,6 +80,7 @@ import { LOADER_KIND } from "../../enums/Commons/loader.enum";
 import { PROGRESS_TYPE } from "../../enums/Progress/progress.enum";
 import { pickDataTableHeaderColumnSlotNames } from "../../utils/DataTable/slot-name.util";
 import { computed, ref, StyleValue, useSlots } from "vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },

package/dist/src/components/DataTable/OrigamDataTableHeadersCell.vue

@@ -42,6 +42,7 @@ import { useProps } from "../../composables/Commons/props.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
 import { pickDataTableHeaderColumnSlotNames } from "../../utils/DataTable/slot-name.util";
 import { computed, ref, StyleValue, useSlots } from "vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   headers: { type: Array, required: true },
   id: { type: String, required: false },

package/dist/src/components/DataTable/OrigamDataTableRows.vue

@@ -41,6 +41,7 @@
 				class="origam-data-table-rows origam-data-table-rows--no-data"
 				:class="textColorClasses"
 				:style="textColorStyles"
+				v-bind="{ ...$attrs }"
 		>
 			<td :colspan="columns.length">
 				<slot name="no-data">
@@ -153,6 +154,7 @@ import {
 } from "../../utils/DataTable/slot-name.util";
 import { computed, mergeProps, useAttrs, useSlots } from "vue";
 const attrs = useAttrs();
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   hideNoData: { type: Boolean, required: false },
   items: { type: Array, required: false },
@@ -248,7 +250,7 @@ const itemSlotProps = (item, index) => {
          * read by the row at all. Both fell through
          * `<OrigamDataTableRow>`'s undeclared-key path
          * straight into `$attrs`, which its
-         * `v-bind="$attrs"` root then serialised as literal
+         * `v-bind="{ ...$attrs }"` root then serialised as literal
          * DOM attributes on every rendered `<tr>`:
          * `index="0" mobile="false"`.
          *

package/dist/src/components/DefaultsProvider/OrigamDefaultsProvider.vue

@@ -6,6 +6,7 @@
 import { computed } from "vue";
 import { provideDefaults } from "../../composables/Commons/defaults.composable";
 import { useProps } from "../../composables/Commons/props.composable";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   defaults: { type: Object, required: false },
   disabled: { type: Boolean, required: false },

package/dist/src/components/Drawer/OrigamDrawer.vue

@@ -88,6 +88,7 @@ import { useTouch } from "../../composables/Commons/touch.composable";
 import { useVModel } from "../../composables/Commons/vModel.composable";
 import { INLINE } from "../../enums/Commons/anchor.enum";
 import { int } from "../../utils/Commons/commons.util";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   disableResizeWatcher: { type: Boolean, required: false },
   disableRouteWatcher: { type: Boolean, required: false },

package/dist/src/components/Skeleton/OrigamSkeleton.vue

@@ -11,6 +11,7 @@
 			:aria-label="skeletonAriaLabel"
 			aria-busy="true"
 			role="status"
+			v-bind="{ ...$attrs }"
 	>
 		<div
 				:class="skeletonCircularClasses"
@@ -30,6 +31,7 @@
 			:aria-label="skeletonAriaLabel"
 			aria-busy="true"
 			role="status"
+			v-bind="{ ...$attrs }"
 	>
 		<div :class="skeletonRectangularClasses"/>
 		<div :class="skeletonTextClasses"/>
@@ -45,6 +47,7 @@
 			:aria-label="skeletonAriaLabel"
 			aria-busy="true"
 			role="status"
+			v-bind="{ ...$attrs }"
 	/>
 </template>
 
@@ -57,6 +60,7 @@ import { useSize } from "../../composables/Commons/size.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
 import { convertToUnit } from "../../utils/Commons/commons.util";
 import { computed, toRef } from "vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   variant: { type: null, required: false, default: "rectangular" },
   width: { type: [String, Number], required: false },

package/dist/src/components/Snackbar/OrigamSnackbarGroup.vue

@@ -8,6 +8,7 @@
       :class="stackClasses"
       :style="stackStyles"
       role="region"
+      v-bind="{ ...$attrs }"
     >
       <transition-group
         :name="transitionName"
@@ -44,6 +45,7 @@ import { useSnackbarGroupInternal } from "../../composables/Snackbar/snackbarGro
 import { INTENT } from "../../enums/Commons/intent.enum";
 import { SNACKBAR_GROUP_DIRECTION } from "../../enums/Snackbar/snackbar-group.enum";
 import { SNACKBAR_GROUP_DEFAULT_DURATION, SNACKBAR_GROUP_DEFAULT_ID, SNACKBAR_GROUP_DEFAULT_MAX, SNACKBAR_GROUP_DEFAULT_SPACING } from "../../consts/Snackbar/snackbar-group.const";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   id: { type: String, required: false, default: SNACKBAR_GROUP_DEFAULT_ID },
   location: { type: null, required: false, default: "bottom-right" },

package/dist/src/components/VirtualScroll/OrigamVirtualScroll.vue

@@ -40,6 +40,7 @@
 				ref="containerRef"
 				:class="virtualScrollClasses"
 				:style="virtualScrollStyles"
+				v-bind="{ ...$attrs }"
 				@scrollend="handleScrollend"
 				@scroll-passive="handleScroll"
 		>
@@ -89,6 +90,7 @@ import { useVirtual } from "../../composables/Commons/virtual.composable";
 import { convertToUnit } from "../../utils/Commons/commons.util";
 import { getCurrentInstance } from "../../utils/Commons/getCurrentInstance.util";
 import { getScrollParent } from "../../utils/Commons/scroll.util";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   items: { type: Array, required: false, default: () => [] },
   renderless: { type: Boolean, required: false },

package/dist/src/components/VirtualScroll/OrigamVirtualScrollItem.vue

@@ -23,6 +23,7 @@ import { computed, StyleValue, useAttrs, watch } from "vue";
 import { useProps } from "../../composables/Commons/props.composable";
 import { useResizeObserver } from "../../composables/Commons/resizeObserver.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   renderless: { type: Boolean, required: false },
   id: { type: String, required: false },