origam 2.31.0 → 2.32.0

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

@@ -427,6 +427,7 @@
   --origam-card--loading---min-width: 240px;
   --origam-card--loading---min-height: 120px;
   --origam-card__asset---aspect-ratio: 16 / 9;
+  --origam-card__content---display: block;
   --origam-card__loader---min-height: 4px;
   --origam-card__skeleton---padding: var(--origam-space---4);
   --origam-card__loader---z-index: 3;
@@ -3447,6 +3448,7 @@
     --origam-card--loading---min-width: 240px;
     --origam-card--loading---min-height: 120px;
     --origam-card__asset---aspect-ratio: 16 / 9;
+    --origam-card__content---display: block;
     --origam-card__loader---min-height: 4px;
     --origam-card__skeleton---padding: var(--origam-space---4);
     --origam-card__loader---z-index: 3;

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

@@ -327,6 +327,7 @@
   --origam-card--loading---min-width: 240px;
   --origam-card--loading---min-height: 120px;
   --origam-card__asset---aspect-ratio: 16 / 9;
+  --origam-card__content---display: block;
   --origam-card__loader---min-height: 4px;
   --origam-card__skeleton---padding: var(--origam-space---4);
   --origam-card__loader---z-index: 3;

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

@@ -427,6 +427,7 @@
   --origam-card--loading---min-width: 240px;
   --origam-card--loading---min-height: 120px;
   --origam-card__asset---aspect-ratio: 16 / 9;
+  --origam-card__content---display: block;
   --origam-card__loader---min-height: 4px;
   --origam-card__skeleton---padding: var(--origam-space---4);
   --origam-card__loader---z-index: 3;
@@ -3447,6 +3448,7 @@
     --origam-card--loading---min-width: 240px;
     --origam-card--loading---min-height: 120px;
     --origam-card__asset---aspect-ratio: 16 / 9;
+    --origam-card__content---display: block;
     --origam-card__loader---min-height: 4px;
     --origam-card__skeleton---padding: var(--origam-space---4);
     --origam-card__loader---z-index: 3;

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

@@ -327,6 +327,7 @@
   --origam-card--loading---min-width: 240px;
   --origam-card--loading---min-height: 120px;
   --origam-card__asset---aspect-ratio: 16 / 9;
+  --origam-card__content---display: block;
   --origam-card__loader---min-height: 4px;
   --origam-card__skeleton---padding: var(--origam-space---4);
   --origam-card__loader---z-index: 3;

package/dist/src/components/Card/OrigamCard.vue

@@ -162,7 +162,10 @@
 					</div>
 				</template>
 
-				<div class="origam-card__content">
+				<div
+						class="origam-card__content"
+						:style="contentStyles"
+				>
 					<template v-if="hasText">
 						<slot name="text">
 							<origam-card-text
@@ -214,9 +217,9 @@ import { PROGRESS_TYPE } from "../../enums/Progress/progress.enum";
 import { splitSkeletonOverrides } from "../../utils/Skeleton/skeleton.util";
 import { computed, ref, StyleValue, toRef, useAttrs, useSlots } from "vue";
 const props = defineProps({
+  contentDisplay: { type: null, required: false },
   disabled: { type: Boolean, required: false },
   flat: { type: Boolean, required: false },
-  hover: { type: Boolean, required: false },
   image: { type: String, required: false },
   link: { type: Boolean, required: false },
   subtitle: { type: [String, Number], required: false },
@@ -310,7 +313,9 @@ const props = defineProps({
   prependAriaLabel: { type: String, required: false },
   appendAriaLabel: { type: String, required: false },
   active: { type: [Boolean, Object], required: false },
-  activeClass: { type: String, required: false }
+  activeClass: { type: String, required: false },
+  hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, required: false }
 });
 defineEmits(["click:append", "click:prepend", "update:active", "update:hover"]);
 defineSlots();
@@ -419,6 +424,7 @@ const cardStyles = computed(() => {
     props.style
   ];
 });
+const contentStyles = computed(() => props.contentDisplay ? { display: props.contentDisplay } : void 0);
 const cardProgressClasses = computed(() => {
   return [
     "origam-card__progress",
@@ -516,6 +522,10 @@ defineExpose({
 		border-end-end-radius: var(--origam-card---border-end-end-radius, 0);
 		border-end-start-radius: var(--origam-card---border-end-start-radius, 0);
 
+		&__content {
+			display: var(--origam-card__content---display, block);
+		}
+
 		&__asset {
 			aspect-ratio: var(--origam-card__asset---aspect-ratio, 16 / 9);
 			overflow: hidden;

package/dist/src/components/Dialog/OrigamDialog.vue

@@ -204,8 +204,8 @@ const props = defineProps({
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamTranslateScale }) },
   scrim: { type: [Boolean, String], required: false, default: true },
   attach: { type: [Boolean, String, null], required: false, skipCheck: true },
+  contentDisplay: { type: null, required: false },
   flat: { type: Boolean, required: false },
-  hover: { type: Boolean, required: false },
   image: { type: String, required: false },
   link: { type: Boolean, required: false },
   subtitle: { type: [String, Number], required: false },
@@ -290,6 +290,8 @@ const props = defineProps({
   appendAriaLabel: { type: String, required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
+  hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, required: false },
   status: { type: null, required: false },
   statusIconPosition: { type: null, required: false },
   icon: { type: null, required: false }

package/dist/src/components/Dialog/OrigamDialogConfirmation.vue

@@ -180,8 +180,8 @@ const props = defineProps({
   transition: { type: [Boolean, String, Object], required: false },
   scrim: { type: [Boolean, String], required: false },
   attach: { type: [Boolean, String, null], required: false, skipCheck: true },
+  contentDisplay: { type: null, required: false },
   flat: { type: Boolean, required: false },
-  hover: { type: Boolean, required: false },
   image: { type: String, required: false },
   link: { type: Boolean, required: false },
   subtitle: { type: [String, Number], required: false },
@@ -266,6 +266,8 @@ const props = defineProps({
   appendAriaLabel: { type: String, required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
+  hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, required: false },
   status: { type: null, required: false },
   statusIconPosition: { type: null, required: false },
   icon: { type: null, required: false }

package/dist/src/enums/Card/card.enum.cjs

@@ -3,9 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CARD_TYPE = void 0;
+exports.CARD_TYPE = exports.CARD_CONTENT_DISPLAY = void 0;
 var CARD_TYPE = exports.CARD_TYPE = /* @__PURE__ */(CARD_TYPE2 => {
   CARD_TYPE2["GRID"] = "grid";
   CARD_TYPE2["LIST"] = "list";
   return CARD_TYPE2;
-})(CARD_TYPE || {});
+})(CARD_TYPE || {});
+var CARD_CONTENT_DISPLAY = exports.CARD_CONTENT_DISPLAY = /* @__PURE__ */(CARD_CONTENT_DISPLAY2 => {
+  CARD_CONTENT_DISPLAY2["BLOCK"] = "block";
+  CARD_CONTENT_DISPLAY2["CONTENTS"] = "contents";
+  CARD_CONTENT_DISPLAY2["FLEX"] = "flex";
+  CARD_CONTENT_DISPLAY2["GRID"] = "grid";
+  return CARD_CONTENT_DISPLAY2;
+})(CARD_CONTENT_DISPLAY || {});

package/dist/src/enums/Card/card.enum.d.ts

@@ -2,3 +2,9 @@ export declare enum CARD_TYPE {
     GRID = "grid",
     LIST = "list"
 }
+export declare enum CARD_CONTENT_DISPLAY {
+    BLOCK = "block",
+    CONTENTS = "contents",
+    FLEX = "flex",
+    GRID = "grid"
+}

package/dist/src/enums/Card/card.enum.js

@@ -3,3 +3,10 @@ export var CARD_TYPE = /* @__PURE__ */ ((CARD_TYPE2) => {
   CARD_TYPE2["LIST"] = "list";
   return CARD_TYPE2;
 })(CARD_TYPE || {});
+export var CARD_CONTENT_DISPLAY = /* @__PURE__ */ ((CARD_CONTENT_DISPLAY2) => {
+  CARD_CONTENT_DISPLAY2["BLOCK"] = "block";
+  CARD_CONTENT_DISPLAY2["CONTENTS"] = "contents";
+  CARD_CONTENT_DISPLAY2["FLEX"] = "flex";
+  CARD_CONTENT_DISPLAY2["GRID"] = "grid";
+  return CARD_CONTENT_DISPLAY2;
+})(CARD_CONTENT_DISPLAY || {});

package/dist/src/interfaces/Card/card.interface.d.ts

@@ -6,7 +6,7 @@ import type { ICommonsComponentProps, ITagProps } from '../Commons/commons.inter
 import type { IDensityProps } from '../Commons/density.interface';
 import type { IDimensionProps } from '../Commons/dimension.interface';
 import type { IElevationProps } from '../Commons/elevation.interface';
-import type { IHoverEmits } from '../Commons/hover.interface';
+import type { IHoverEmits, IHoverProps } from '../Commons/hover.interface';
 import type { ILinkProps } from '../Commons/router.interface';
 import type { ILoaderProps } from '../Commons/loader.interface';
 import type { ILocationProps } from '../Commons/location.interface';
@@ -15,11 +15,19 @@ import type { IPaddingProps } from '../Commons/padding.interface';
 import type { IPositionProps } from '../Commons/position.interface';
 import type { IRippleProps } from '../Commons/ripple.interface';
 import type { IRoundedProps } from '../Commons/rounded.interface';
-import type { TCardType } from '../../types/Card/card.type';
-export interface ICardProps extends ICommonsComponentProps, ITagProps, IBorderProps, IColorProps, IBgColorProps, IDensityProps, IDimensionProps, IElevationProps, ILoaderProps, ILocationProps, IPositionProps, IRoundedProps, IMarginProps, IPaddingProps, ILinkProps, IRippleProps, IAdjacentProps, IActiveProps {
+import type { TCardContentDisplay, TCardType } from '../../types/Card/card.type';
+export interface ICardProps extends ICommonsComponentProps, ITagProps, IBorderProps, IColorProps, IBgColorProps, IDensityProps, IDimensionProps, IElevationProps, ILoaderProps, ILocationProps, IPositionProps, IRoundedProps, IMarginProps, IPaddingProps, ILinkProps, IRippleProps, IAdjacentProps, IActiveProps, IHoverProps {
+    /*********************************************************
+     * contentDisplay
+     *
+     * @description
+     * `display` of the `.origam-card__content` wrapper around the default and `text` slots (#1100).
+     * `contents` flattens it so the slotted children become direct items of the card's own grid / flex layout.
+     * Defaults to the `--origam-card__content---display` token (`block`).
+     ********************************************************/
+    contentDisplay?: TCardContentDisplay;
     disabled?: boolean;
     flat?: boolean;
-    hover?: boolean;
     image?: string;
     link?: boolean;
     subtitle?: string | number;

package/dist/src/types/Card/card.type.d.ts

@@ -1,4 +1,5 @@
 import OrigamCard from '../../components/Card/OrigamCard.vue';
-import { CARD_TYPE } from '../../enums/Card/card.enum';
+import { CARD_CONTENT_DISPLAY, CARD_TYPE } from '../../enums/Card/card.enum';
 export type TCardType = `${CARD_TYPE}`;
+export type TCardContentDisplay = `${CARD_CONTENT_DISPLAY}`;
 export type TOrigamCard = InstanceType<typeof OrigamCard>;