origam 2.3.0 → 2.6.1

package/dist/src/components/Calendar/index.cjs

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OrigamCalendar", {
+  enumerable: true,
+  get: function () {
+    return _OrigamCalendar.default;
+  }
+});
+var _OrigamCalendar = _interopRequireDefault(require("./OrigamCalendar.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/components/Calendar/index.d.ts

@@ -0,0 +1 @@
+export { default as OrigamCalendar } from './OrigamCalendar.vue';

package/dist/src/components/Calendar/index.js

@@ -0,0 +1 @@
+export { default as OrigamCalendar } from "./OrigamCalendar.vue";

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

@@ -2,6 +2,7 @@
 	<component
 			:is="link.tag"
 			v-ripple="isClickable && ripple"
+			v-contrast
 			:class="cardClasses"
 			:href="link.href"
 			:style="cardStyles"
@@ -120,6 +121,7 @@
 						<slot name="text">
 							<origam-card-text
 									key="text"
+									:density="density"
 									:text="text"
 									class="origam-card__text"
 							/>
@@ -139,7 +141,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamCardHeader, OrigamCardText, OrigamImg, OrigamProgress, OrigamSkeleton } from "../../components";
 import {
   useActive,
@@ -155,7 +157,7 @@ import {
   useStateEffect,
   useStyle
 } from "../../composables";
-import { vRipple } from "../../directives";
+import { vContrast, vRipple } from "../../directives";
 import { DENSITY, PROGRESS_TYPE } from "../../enums";
 import { computed, StyleValue, toRef, useAttrs, useSlots } from "vue";
 const props = defineProps({
@@ -181,8 +183,8 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
@@ -268,7 +270,7 @@ const isClickable = computed(() => {
   return !props.disabled && props.link && (props.link || link.isClickable.value);
 });
 const handleClick = (event) => {
-  onActive(event);
+  onActive();
   if (isClickable.value && link.navigate) {
     link.navigate(event);
   }
@@ -373,6 +375,8 @@ defineExpose({
 		cursor: var(--origam-card---cursor);
 
 		background-color: var(--origam-card---background);
+		backdrop-filter: var(--origam-card---backdrop-filter, none);
+		-webkit-backdrop-filter: var(--origam-card---backdrop-filter, none);
 		box-shadow: var(--origam-card---box-shadow);
 		color: var(--origam-card---color);
 
@@ -503,6 +507,19 @@ defineExpose({
 			}
 		}
 
+		&--loading &__loader:has(.origam-card__progress--circular) {
+			position: absolute;
+			inset: 0;
+			z-index: var(--origam-card__loader---z-index, 3);
+			min-height: 0;
+			border-radius: inherit;
+			background-color: var(--origam-card__loader---overlay-background, color-mix(in srgb, var(--origam-card---background) 62%, transparent));
+
+			:deep(.origam-progress--circular) {
+				margin: 0;
+			}
+		}
+
 		&--rounded-shaped {
 			border-start-start-radius: var(--origam-card---border-radius-rounded, 16px);
 			border-start-end-radius: 0;
@@ -533,6 +550,10 @@ defineExpose({
 			--origam-card---density: -8px;
 		}
 
+		&--density-comfortable {
+			--origam-card---density: 8px;
+		}
+
 		&:hover,
 		&:focus-visible,
 		&:focus {

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

@@ -41,6 +41,7 @@
 						v-if="hasTitle"
 						key="title"
 						class="origam-card-header__title"
+						:style="titleTypographyStyles"
 				>
 					<slot
 							name="title"
@@ -53,6 +54,7 @@
 						v-if="hasSubtitle"
 						key="subtitle"
 						class="origam-card-header__subtitle"
+						:style="subtitleTypographyStyles"
 				>
 					<slot
 							name="subtitle"
@@ -89,13 +91,14 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamAvatar, OrigamIcon } from "../../components";
 import {
   useAdjacent,
   useDensity,
   useProps,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
 import { computed, StyleValue, toRef, useSlots } from "vue";
 const props = defineProps({
@@ -137,12 +140,19 @@ const props = defineProps({
   appendAvatar: { type: String, required: false },
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
-  prependIcon: { type: null, required: false }
+  prependIcon: { type: null, required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false }
 });
-defineEmits(["click:prepend", "click:append"]);
+defineEmits(["click:append", "click:prepend"]);
 const { filterProps } = useProps(props);
 const slots = useSlots();
 const { densityClasses } = useDensity(props);
+const { typographyStyles: titleTypographyStyles } = useTypography(props, "card-header__title");
+const { typographyStyles: subtitleTypographyStyles } = useTypography(props, "card-header__subtitle");
 const {
   onClickPrepend: handleClickPrepend,
   onClickAppend: handleClickAppend,
@@ -266,6 +276,10 @@ defineExpose({
 			--origam-card-header---density: -8px;
 		}
 
+		&--density-comfortable {
+			--origam-card-header---density: 8px;
+		}
+
 		&__underlay {
 			position: var(--origam-card-header__underlay---position);
 		}

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

@@ -10,8 +10,8 @@
 	</component>
 </template>
 
-<script setup>
-import { useProps, useStyle } from "../../composables";
+<script lang="ts" setup>
+import { useDensity, useProps, useStyle, useTypography } from "../../composables";
 import { computed, StyleValue } from "vue";
 const props = defineProps({
   text: { type: [String, Number], required: false },
@@ -46,17 +46,27 @@ const props = defineProps({
   marginBottom: { type: [Boolean, Number, String], required: false },
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
-  marginInline: { type: [Boolean, Number, String], required: false }
+  marginInline: { type: [Boolean, Number, String], required: false },
+  density: { type: null, required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
+const { densityClasses } = useDensity(props);
+const { typographyStyles } = useTypography(props, "card-text");
 const cardTextStyles = computed(() => {
   return [
+    typographyStyles.value,
     props.style
   ];
 });
 const cardTextClasses = computed(() => {
   return [
     "origam-card-text",
+    densityClasses.value,
     props.class
   ];
 });
@@ -79,10 +89,10 @@ defineExpose({
 		letter-spacing: var(--origam-card-text---letter-spacing);
 		text-transform: var(--origam-card-text---text-transform);
 
-		padding-block-start: var(--origam-card-text---padding-block-start);
-		padding-block-end: var(--origam-card-text---padding-block-end);
-		padding-inline-start: var(--origam-card-text---padding-inline-start);
-		padding-inline-end: var(--origam-card-text---padding-inline-end);
+		padding-block-start: calc(var(--origam-card-text---padding-block-start) + var(--origam-card-text---density, 0px));
+		padding-block-end: calc(var(--origam-card-text---padding-block-end) + var(--origam-card-text---density, 0px));
+		padding-inline-start: calc(var(--origam-card-text---padding-inline-start) + var(--origam-card-text---density, 0px));
+		padding-inline-end: calc(var(--origam-card-text---padding-inline-end) + var(--origam-card-text---density, 0px));
 
 		margin-block-start: var(--origam-card-text---margin-block-start);
 		margin-block-end: var(--origam-card-text---margin-block-end);
@@ -93,6 +103,18 @@ defineExpose({
 		border-style: var(--origam-card-text---border-style);
 		border-width: var(--origam-card-text---border-width);
 		border-radius: var(--origam-card-text---border-radius);
+
+		&--density-default {
+			--origam-card-text---density: 0px;
+		}
+
+		&--density-compact {
+			--origam-card-text---density: -8px;
+		}
+
+		&--density-comfortable {
+			--origam-card-text---density: 8px;
+		}
 	}
 </style>
 

package/dist/src/components/Carousel/OrigamCarousel.vue

@@ -35,7 +35,7 @@
 									name="item"
 									v-bind="{props: controlProps(item, index, group), item, index}"
 							>
-								<origam-btn v-bind="controlProps(item, index, group)"/>
+								<origam-btn v-bind="(controlProps(item, index, group) as any)"/>
 							</slot>
 						</slot>
 					</template>
@@ -86,16 +86,17 @@
 	</origam-window>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamBtn, OrigamProgressLinear, OrigamWindow } from "../../components";
 import {
+  useDimension,
   useLocale,
   useProps,
   useStyle,
   useVModel
 } from "../../composables";
 import { DENSITY, MDI_ICONS, SIZES } from "../../enums";
-import { convertToUnit } from "../../utils";
+import { intentBgExpr, isCssColor, isIntent } from "../../utils/Commons/color.util";
 import { computed, onBeforeUnmount, onMounted, ref, StyleValue, useSlots, watch } from "vue";
 const props = defineProps({
   cycle: { type: Boolean, required: false },
@@ -149,7 +150,11 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  hover: { type: [Boolean, Object], required: false },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   height: { type: [Number, String], required: false, default: 500 },
   maxHeight: { type: [Number, String], required: false },
   maxWidth: { type: [Number, String], required: false },
@@ -192,8 +197,13 @@ const startProgress = () => {
   };
   progressRaf = window.requestAnimationFrame(tick);
 };
+const prefersReducedMotion = () => {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+};
 const startTimeout = () => {
   if (!props.cycle || !origamWindowRef.value) return;
+  if (prefersReducedMotion()) return;
   slideTimeout = window.setTimeout(origamWindowRef.value.group.next, +props.interval > 0 ? +props.interval : 6e3);
   startProgress();
 };
@@ -230,21 +240,28 @@ const controlProps = (item, index, group) => {
     {
       id: `carousel-item-${item.id}`,
       "aria-label": t("origam.carousel.ariaLabel.delimiter", index + 1, group.items.value.length),
-      active: group.isSelected(item.id),
+      // The SELECTED dot is active. When the consumer passes an
+      // `active` STATE object, the selected dot wears that surface
+      // (forced); otherwise it just reads as active. Hover applies
+      // to any dot on hover.
+      active: group.isSelected(item.id) ? props.active && typeof props.active === "object" ? { ...props.active, enabled: true } : true : false,
+      hover: props.hover,
       class: [
         "origam-carousel__controls-item"
       ],
       onClick: () => group.select(item.id, true),
       icon: props.delimiterIcon,
+      bgColor: props.bgColor,
       size: SIZES.SMALL,
       density: DENSITY.COMPACT
     }
   );
 };
 const slots = useSlots();
+const { dimensionStyles } = useDimension(props);
 const carouselStyles = computed(() => {
   return [
-    { height: convertToUnit(props.height) },
+    dimensionStyles.value,
     props.style
   ];
 });
@@ -258,11 +275,18 @@ const carouselClasses = computed(() => {
     props.class
   ];
 });
+const dotCenterColor = computed(() => {
+  const bg = props.bgColor;
+  if (bg && isIntent(bg)) return `color-mix(in srgb, ${intentBgExpr(bg, "default")}, #ffffff 55%)`;
+  if (bg && typeof bg === "string" && isCssColor(bg)) return `color-mix(in srgb, ${bg}, #ffffff 55%)`;
+  return void 0;
+});
 const carouselControlsStyles = computed(() => {
   return [
     {
       left: props.verticalDelimiters === "left" && props.verticalDelimiters ? 0 : "auto",
-      right: props.verticalDelimiters === "right" ? 0 : "auto"
+      right: props.verticalDelimiters === "right" ? 0 : "auto",
+      "--origam-carousel__controls-item---center-color": dotCenterColor.value
     },
     props.style
   ];
@@ -306,12 +330,13 @@ defineExpose({
 		&__controls-item {
 			margin-inline: var(--origam-carousel__controls-item---margin-inline, 8px);
 
-			.origam-icon {
+			:deep(.origam-icon) {
 				opacity: var(--origam-carousel__controls-item---opacity, 0.5);
+				color: var(--origam-carousel__controls-item---center-color, currentColor);
 			}
 
 			&--active {
-				.origam-icon {
+				:deep(.origam-icon) {
 					opacity: var(--origam-carousel__controls-item---opacity-active, 1);
 					vertical-align: middle;
 				}
@@ -320,7 +345,7 @@ defineExpose({
 			&:hover {
 				background: none;
 
-				.origam-icon {
+				:deep(.origam-icon) {
 					opacity: var(--origam-carousel__controls-item---opacity-hover, 0.8);
 				}
 			}

package/dist/src/components/Carousel/OrigamCarouselItem.vue

@@ -9,7 +9,7 @@
 			<slot name="default">
 				<origam-img
 						ref="origamImgRef"
-						v-bind="{...attrs , ...imgProps}"
+						v-bind="({...attrs , ...imgProps} as any)"
 				>
 					<template
 							v-if="slots.content"
@@ -37,7 +37,7 @@
 	</origam-window-item>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamImg, OrigamWindowItem } from "../../components";
 import {
   useProps,
@@ -58,8 +58,8 @@ const props = defineProps({
   referrerpolicy: { type: null, required: false },
   srcset: { type: String, required: false },
   position: { type: String, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   aspectRatio: { type: [String, Number], required: false },
   contentClass: { type: String, required: false },
   inline: { type: Boolean, required: false },