origam 0.3.10 → 2.3.0

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

@@ -1,12 +1,14 @@
 <template>
 	<component
 			:is="link.tag"
-			v-ripple="isClickable && props.ripple"
+			v-ripple="isClickable && ripple"
 			:class="cardClasses"
 			:href="link.href"
 			:style="cardStyles"
-			:tabindex="props.disabled ? -1 : undefined"
-			@click="isClickable && link.navigate"
+			:tabindex="disabled ? -1 : undefined"
+			@click="handleClick"
+			@mouseenter="onMouseenter"
+			@mouseleave="onMouseleave"
 	>
     <span
 		    v-if="isClickable"
@@ -22,127 +24,136 @@
 			<template v-if="hasLoading">
 				<slot name="loader">
 					<div class="origam-card__loader">
+						<origam-skeleton
+								v-if="loaderConfig.kind === 'skeleton'"
+								variant="card"
+								:loading="true"
+								v-bind="loaderConfig.overrides"
+						/>
 						<origam-progress
-								:active="!!props.loading"
-								:color="props.color"
-								:indeterminate="typeof props.loading !== 'number'"
-								:model-value="typeof props.loading === 'number' ? props.loading : undefined"
-								:type="PROGRESS_TYPE.LINEAR"
-								class="origam-card__progress origam-card__progress--linear"
+								v-else
+								:active="true"
+								:color="color"
+								:indeterminate="loaderConfig.indeterminate"
+								:model-value="loaderConfig.modelValue"
+								:type="loaderConfig.kind === 'circular' ? PROGRESS_TYPE.CIRCULAR : PROGRESS_TYPE.LINEAR"
+								:class="cardProgressClasses"
 								thickness="4"
+								v-bind="loaderConfig.overrides"
 						/>
 					</div>
 				</slot>
 			</template>
 
-			<template v-if="hasHeader">
-				<slot name="header">
-					<origam-card-header
-							key="item"
-							:append-avatar="appendAvatar"
-							:append-icon="appendIcon"
-							:density="density"
-							:prepend-avatar="prependAvatar"
-							:prepend-icon="prependIcon"
-							:subtitle="subtitle"
-							:title="title"
-							class="origam-card__header"
-							@click:prepend="handleClickPrepend"
-							@click:append="handleClickAppend"
-					>
-						<template
-								v-if="slots['header.append']"
-								#append
-						>
-							<slot name="header.append"/>
-						</template>
-
-						<template
-								v-if="slots['header.prepend']"
-								#prepend
-						>
-							<slot name="header.prepend"/>
-						</template>
-
-						<template
-								v-if="slots['header.title']"
-								#title
-						>
-							<slot name="header.title"/>
-						</template>
-
-						<template
-								v-if="slots['header.subtitle']"
-								#subtitle
-						>
-							<slot name="header.subtitle"/>
-						</template>
-
-						<template
-								v-if="slots['header.content']"
-								#default
+			<template v-if="!loaderConfig.isActive || loaderConfig.kind !== 'skeleton'">
+				<template v-if="hasHeader">
+					<slot name="header">
+						<origam-card-header
+								key="item"
+								:append-avatar="appendAvatar"
+								:append-icon="appendIcon"
+								:density="density"
+								:prepend-avatar="prependAvatar"
+								:prepend-icon="prependIcon"
+								:subtitle="subtitle"
+								:title="title"
+								class="origam-card__header"
+								@click:prepend="handleClickPrepend"
+								@click:append="handleClickAppend"
 						>
-							<slot name="header.content"/>
-						</template>
-					</origam-card-header>
-				</slot>
-			</template>
-
-			<template v-if="hasAsset">
-				<div
-						key="image"
-						class="origam-card__asset"
-				>
-					<slot name="asset">
-						<origam-img
-								key="image-img"
-								:src="props.image"
-								class="origam-card__image"
-								cover
-						/>
-					</slot>
-				</div>
-			</template>
-
-			<div class="origam-card__content">
-				<template v-if="hasText">
-					<slot name="text">
-						<origam-card-text
-								key="text"
-								:text="props.text"
-								class="origam-card__text"
-						/>
+							<template
+									v-if="slots['header.append']"
+									#append
+							>
+								<slot name="header.append"/>
+							</template>
+
+							<template
+									v-if="slots['header.prepend']"
+									#prepend
+							>
+								<slot name="header.prepend"/>
+							</template>
+
+							<template
+									v-if="slots['header.title']"
+									#title
+							>
+								<slot name="header.title"/>
+							</template>
+
+							<template
+									v-if="slots['header.subtitle']"
+									#subtitle
+							>
+								<slot name="header.subtitle"/>
+							</template>
+
+							<template
+									v-if="slots['header.content']"
+									#default
+							>
+								<slot name="header.content"/>
+							</template>
+						</origam-card-header>
 					</slot>
 				</template>
 
-				<slot name="default"/>
-			</div>
+				<template v-if="hasAsset">
+					<div
+							key="image"
+							class="origam-card__asset"
+					>
+						<slot name="asset">
+							<origam-img
+									key="image-img"
+									:src="image"
+									class="origam-card__image"
+									cover
+							/>
+						</slot>
+					</div>
+				</template>
 
-			<template v-if="hasFooter">
-				<div class="origam-card__footer">
-					<slot name="footer"/>
+				<div class="origam-card__content">
+					<template v-if="hasText">
+						<slot name="text">
+							<origam-card-text
+									key="text"
+									:text="text"
+									class="origam-card__text"
+							/>
+						</slot>
+					</template>
+
+					<slot name="default"/>
 				</div>
+
+				<template v-if="hasFooter">
+					<div class="origam-card__footer">
+						<slot name="footer"/>
+					</div>
+				</template>
 			</template>
 		</slot>
 	</component>
 </template>
 
 <script setup>
-import { OrigamCardHeader, OrigamCardText, OrigamImg, OrigamProgress } from "../../components";
+import { OrigamCardHeader, OrigamCardText, OrigamImg, OrigamProgress, OrigamSkeleton } from "../../components";
 import {
+  useActive,
   useAdjacent,
-  useBorder,
   useDensity,
   useDimension,
-  useElevation,
+  useHover,
   useLink,
   useLoader,
   useLocation,
-  useMargin,
-  usePadding,
   usePosition,
   useProps,
-  useRounded
+  useStateEffect,
+  useStyle
 } from "../../composables";
 import { vRipple } from "../../directives";
 import { DENSITY, PROGRESS_TYPE } from "../../enums";
@@ -170,6 +181,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 },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
@@ -178,21 +191,15 @@ const props = defineProps({
   minWidth: { type: [Number, String], required: false },
   width: { type: [Number, String], required: false },
   elevation: { type: [Number, String], required: false },
-  loading: { type: [Boolean, Number], required: false },
+  loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   location: { type: null, required: false },
   position: { type: null, required: false },
   top: { type: [Number, String], required: false },
   bottom: { type: [Number, String], required: false },
   left: { type: [Number, String], required: false },
   right: { type: [Number, String], required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
@@ -219,22 +226,38 @@ 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 },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false }
 });
-defineEmits(["click:append", "click:prepend"]);
+defineEmits(["click:append", "click:prepend", "update:active", "update:hover"]);
 const { filterProps } = useProps(props);
 const attrs = useAttrs();
 const link = useLink(props, attrs);
-const { borderClasses, borderStyles } = useBorder(props);
-const { densityClasses } = useDensity(props);
-const { dimensionStyles } = useDimension(props);
-const { elevationClasses } = useElevation(props, toRef(props, "flat"));
-const { loaderClasses } = useLoader(props);
-const { locationStyles } = useLocation(props);
-const { positionClasses } = usePosition(props);
-const { roundedClasses, roundedStyles } = useRounded(props);
-const { marginClasses, marginStyles } = useMargin(props);
-const { paddingStyles, paddingClasses } = usePadding(props);
+const { isHover, hoverState, hoverClasses, onMouseenter, onMouseleave } = useHover(props);
+const { isActive, activeState, activeClasses, onActive } = useActive(props);
+const {
+  colorClasses,
+  colorStyles,
+  borderClasses,
+  borderStyles,
+  roundedClasses,
+  roundedStyles,
+  elevationClasses,
+  elevationStyles,
+  paddingClasses,
+  paddingStyles,
+  marginClasses,
+  marginStyles
+} = useStateEffect(
+  props,
+  isHover,
+  isActive,
+  hoverState,
+  activeState,
+  computed(() => !!props.disabled),
+  toRef(props, "flat")
+);
 const {
   onClickPrepend: handleClickPrepend,
   onClickAppend: handleClickAppend,
@@ -244,7 +267,17 @@ const {
 const isClickable = computed(() => {
   return !props.disabled && props.link && (props.link || link.isClickable.value);
 });
+const handleClick = (event) => {
+  onActive(event);
+  if (isClickable.value && link.navigate) {
+    link.navigate(event);
+  }
+};
+const { loaderClasses, loaderConfig } = useLoader(props, "line");
 const slots = useSlots();
+const hasLoading = computed(() => {
+  return slots.loader || loaderConfig.value.isActive;
+});
 const hasTitle = computed(() => {
   return slots["header.title"] || props.title != null;
 });
@@ -263,13 +296,16 @@ const hasHeader = computed(() => {
 const hasText = computed(() => {
   return slots.text || props.text != null;
 });
-const hasLoading = computed(() => {
-  return slots.loader || !!props.loading;
-});
+const { densityClasses } = useDensity(props);
+const { dimensionStyles } = useDimension(props);
+const { locationStyles } = useLocation(props);
+const { positionClasses } = usePosition(props);
 const cardStyles = computed(() => {
   return [
     borderStyles.value,
+    colorStyles.value,
     dimensionStyles.value,
+    elevationStyles.value,
     locationStyles.value,
     roundedStyles.value,
     marginStyles.value,
@@ -277,6 +313,12 @@ const cardStyles = computed(() => {
     props.style
   ];
 });
+const cardProgressClasses = computed(() => {
+  return [
+    "origam-card__progress",
+    `origam-card__progress--${loaderConfig.value.kind === "line" ? "linear" : loaderConfig.value.kind}`
+  ];
+});
 const cardClasses = computed(() => {
   return [
     "origam-card",
@@ -287,8 +329,11 @@ const cardClasses = computed(() => {
       "origam-card--link": isClickable.value
     },
     borderClasses.value,
+    colorClasses.value,
     densityClasses.value,
     elevationClasses.value,
+    hoverClasses.value,
+    activeClasses.value,
     loaderClasses.value,
     positionClasses.value,
     roundedClasses.value,
@@ -297,8 +342,14 @@ const cardClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(cardStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
@@ -321,7 +372,7 @@ defineExpose({
 		user-select: var(--origam-card---user-select);
 		cursor: var(--origam-card---cursor);
 
-		background: var(--origam-card---background);
+		background-color: var(--origam-card---background);
 		box-shadow: var(--origam-card---box-shadow);
 		color: var(--origam-card---color);
 
@@ -337,26 +388,37 @@ defineExpose({
 
 		border-color: var(--origam-card---border-color);
 		border-style: var(--origam-card---border-style);
-		border-width: var(--origam-card---border-width);
-		border-radius: var(--origam-card---border-radius);
+		border-top-width: var(--origam-card---border-top-width, 0);
+		border-right-width: var(--origam-card---border-right-width, 0);
+		border-bottom-width: var(--origam-card---border-bottom-width, 0);
+		border-left-width: var(--origam-card---border-left-width, 0);
+		border-start-start-radius: var(--origam-card---border-start-start-radius, 0);
+		border-start-end-radius: var(--origam-card---border-start-end-radius, 0);
+		border-end-end-radius: var(--origam-card---border-end-end-radius, 0);
+		border-end-start-radius: var(--origam-card---border-end-start-radius, 0);
+
+		&__asset {
+			aspect-ratio: var(--origam-card__asset---aspect-ratio, 16 / 9);
+			overflow: hidden;
+		}
 
 		&__overlay {
-			background-color: var(--origam-card__overlay---background-color);
-			border-radius: var(--origam-card__overlay---border-radius);
-			opacity: var(--origam-card__overlay---opacity);
-			pointer-events: var(--origam-card__overlay---pointer-events);
-			position: var(--origam-card__overlay---position);
-			bottom: var(--origam-card__overlay---position-bottom);
-			left: var(--origam-card__overlay---position-left);
-			right: var(--origam-card__overlay---position-right);
-			top: var(--origam-card__overlay---position-top);
-			transition-property: var(--origam-card__overlay---transition-property);
-			transition-duration: var(--origam-card__overlay---transition-duration);
-			transition-timing-function: var(--origam-card__overlay---transition-timing-function);
+			background-color: var(--origam-card__overlay---background-color, var(--origam-color__overlay---scrim));
+			border-radius: var(--origam-card__overlay---border-radius, inherit);
+			opacity: var(--origam-card__overlay---opacity, var(--origam-card---overlay-opacity, 0));
+			pointer-events: var(--origam-card__overlay---pointer-events, none);
+			position: var(--origam-card__overlay---position, absolute);
+			bottom: var(--origam-card__overlay---position-bottom, var(--origam-card---overlay-position-bottom, 0));
+			left: var(--origam-card__overlay---position-left, var(--origam-card---overlay-position-left, 0));
+			right: var(--origam-card__overlay---position-right, var(--origam-card---overlay-position-right, 0));
+			top: var(--origam-card__overlay---position-top, var(--origam-card---overlay-position-top, 0));
+			transition-property: var(--origam-card__overlay---transition-property, var(--origam-card---overlay-transition-property, opacity));
+			transition-duration: var(--origam-card__overlay---transition-duration, var(--origam-card---overlay-transition-duration, 0.2s));
+			transition-timing-function: var(--origam-card__overlay---transition-timing-function, var(--origam-card---overlay-transition-timing-function, ease-in-out));
 		}
 
 		&__underlay {
-			position: var(--origam-card__underlay---position);
+			position: var(--origam-card__underlay---position, var(--origam-card---underlay-position, absolute));
 		}
 
 		> * {
@@ -364,12 +426,95 @@ defineExpose({
 		}
 
 		&--border {
-			--origam-card---border-width: thin;
-			--origam-card---box-shadow: none;
+			--origam-card---border-top-width: thin;
+			--origam-card---border-right-width: thin;
+			--origam-card---border-bottom-width: thin;
+			--origam-card---border-left-width: thin;
+		}
+
+		&--border-top {
+			--origam-card---border-top-width: thin;
+			--origam-card---border-right-width: 0;
+			--origam-card---border-bottom-width: 0;
+			--origam-card---border-left-width: 0;
+		}
+
+		&--border-right {
+			--origam-card---border-top-width: 0;
+			--origam-card---border-right-width: thin;
+			--origam-card---border-bottom-width: 0;
+			--origam-card---border-left-width: 0;
+		}
+
+		&--border-bottom {
+			--origam-card---border-top-width: 0;
+			--origam-card---border-right-width: 0;
+			--origam-card---border-bottom-width: thin;
+			--origam-card---border-left-width: 0;
+		}
+
+		&--border-left {
+			--origam-card---border-top-width: 0;
+			--origam-card---border-right-width: 0;
+			--origam-card---border-bottom-width: 0;
+			--origam-card---border-left-width: thin;
 		}
 
 		&--rounded {
-			--origam-card---border-radius: 4px;
+			--origam-card---border-start-start-radius: var(--origam-card---border-radius-rounded, 4px);
+			--origam-card---border-start-end-radius: var(--origam-card---border-radius-rounded, 4px);
+			--origam-card---border-end-end-radius: var(--origam-card---border-radius-rounded, 4px);
+			--origam-card---border-end-start-radius: var(--origam-card---border-radius-rounded, 4px);
+		}
+
+		&--loading {
+			min-width: var(--origam-card---loading-min-width, 240px);
+			min-height: var(--origam-card---loading-min-height, 120px);
+		}
+
+		&__loader {
+			position: relative;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 100%;
+			min-height: var(--origam-card__loader---min-height, 4px);
+
+			:deep(.origam-progress--linear) {
+				position: absolute;
+				inset-inline: 0;
+				inset-block-start: 0;
+				width: 100%;
+				height: var(--origam-card__progress---linear-height, 4px);
+			}
+
+			:deep(.origam-progress--circular) {
+				margin: var(--origam-card__progress---circular-margin, 24px auto);
+			}
+
+			:deep(.origam-skeleton-wrapper--card),
+			:deep(.origam-skeleton--rectangular),
+			:deep(.origam-skeleton--text) {
+				width: 100%;
+			}
+
+			:deep(.origam-skeleton-wrapper--card) {
+				min-height: var(--origam-card__loader---min-height-skeleton, 200px);
+			}
+		}
+
+		&--rounded-shaped {
+			border-start-start-radius: var(--origam-card---border-radius-rounded, 16px);
+			border-start-end-radius: 0;
+			border-end-start-radius: 0;
+			border-end-end-radius: var(--origam-card---border-radius-rounded, 16px);
+		}
+
+		&--rounded-shaped-invert {
+			border-start-start-radius: 0;
+			border-start-end-radius: var(--origam-card---border-radius-rounded, 16px);
+			border-end-start-radius: var(--origam-card---border-radius-rounded, 16px);
+			border-end-end-radius: 0;
 		}
 
 		&--absolute {
@@ -392,21 +537,21 @@ defineExpose({
 		&:focus-visible,
 		&:focus {
 			> #{$this}__overlay {
-				--origam-card__overlay---opacity: calc(0.12 * 1);
+				--origam-card__overlay---opacity: var(--origam-card---overlay-opacity-hover, 0.12);
 			}
 		}
 
 		&--active,
 		[aria-haspopup=menu][aria-expanded=true] {
 			> #{$this}__overlay {
-				--origam-card__overlay---opacity: calc(0.12 * 1);
+				--origam-card__overlay---opacity: var(--origam-card---overlay-opacity-hover, 0.12);
 			}
 
 			&:hover,
 			&:focus-visible,
 			&:focus {
 				> #{$this}__overlay {
-					--origam-card__overlay---opacity: calc(0.12 * 1);
+					--origam-card__overlay---opacity: var(--origam-card---overlay-opacity-hover, 0.12);
 				}
 			}
 		}
@@ -416,11 +561,11 @@ defineExpose({
 			--origam-card---user-select: none;
 
 			> * {
-				--origam-card---opacity: 0.6;
+				--origam-card---opacity: var(--origam-card---opacity-disabled, 0.6);
 			}
 		}
 
-		&--flated {
+		&--flat {
 			--origam-card---box-shadow: none;
 		}
 
@@ -432,39 +577,39 @@ defineExpose({
 			--origam-card---cursor: pointer;
 
 			&:before {
-				border-radius: var(--origam-card__before---border-radius);
-				bottom: var(--origam-card__before---bottom);
-				content: var(--origam-card__before---content);
-				display: var(--origam-card__before---display);
-				left: var(--origam-card__before---left);
-				pointer-events: var(--origam-card__before---pointer-events);
-				position: var(--origam-card__before---position);
-				right: var(--origam-card__before---right);
-				top: var(--origam-card__before---top);
-				transition: var(--origam-card__before---transition);
-				opacity: var(--origam-card__before---opacity);
-				z-index: var(--origam-card__before---z-index);
-				box-shadow: var(--origam-card__before---box-shadow);
+				border-radius: var(--origam-card__before---border-radius, var(--origam-card---before-border-radius, inherit));
+				bottom: var(--origam-card__before---bottom, var(--origam-card---before-bottom, 0));
+				content: var(--origam-card__before---content, var(--origam-card---before-content, ""));
+				display: var(--origam-card__before---display, var(--origam-card---before-display, block));
+				left: var(--origam-card__before---left, var(--origam-card---before-left, 0));
+				pointer-events: var(--origam-card__before---pointer-events, var(--origam-card---before-pointer-events, none));
+				position: var(--origam-card__before---position, var(--origam-card---before-position, absolute));
+				right: var(--origam-card__before---right, var(--origam-card---before-right, 0));
+				top: var(--origam-card__before---top, var(--origam-card---before-top, 0));
+				transition: var(--origam-card__before---transition, var(--origam-card---before-transition, inherit));
+				opacity: var(--origam-card__before---opacity, var(--origam-card---before-opacity, 1));
+				z-index: var(--origam-card__before---z-index, var(--origam-card---before-z-index, -1));
+				box-shadow: var(--origam-card__before---box-shadow, var(--origam-card---before-box-shadow));
 			}
 
 			&:after {
-				border-radius: var(--origam-card__after---border-radius);
-				bottom: var(--origam-card__after---bottom);
-				content: var(--origam-card__after---content);
-				display: var(--origam-card__after---display);
-				left: var(--origam-card__after---left);
-				pointer-events: var(--origam-card__after---pointer-events);
-				position: var(--origam-card__after---position);
-				right: var(--origam-card__after---right);
-				top: var(--origam-card__after---top);
-				transition: var(--origam-card__after---transition);
-				z-index: var(--origam-card__after---z-index);
-				opacity: var(--origam-card__after---opacity);
-				box-shadow: var(--origam-card__after---box-shadow);
+				border-radius: var(--origam-card__after---border-radius, var(--origam-card---after-border-radius, inherit));
+				bottom: var(--origam-card__after---bottom, var(--origam-card---after-bottom, 0));
+				content: var(--origam-card__after---content, var(--origam-card---after-content, ""));
+				display: var(--origam-card__after---display, var(--origam-card---after-display, block));
+				left: var(--origam-card__after---left, var(--origam-card---after-left, 0));
+				pointer-events: var(--origam-card__after---pointer-events, var(--origam-card---after-pointer-events, none));
+				position: var(--origam-card__after---position, var(--origam-card---after-position, absolute));
+				right: var(--origam-card__after---right, var(--origam-card---after-right, 0));
+				top: var(--origam-card__after---top, var(--origam-card---after-top, 0));
+				transition: var(--origam-card__after---transition, var(--origam-card---after-transition, inherit));
+				z-index: var(--origam-card__after---z-index, var(--origam-card---after-z-index, 1));
+				opacity: var(--origam-card__after---opacity, var(--origam-card---after-opacity, 0));
+				box-shadow: var(--origam-card__after---box-shadow, var(--origam-card---after-box-shadow));
 			}
 
 			&:hover {
-				--origam-card---box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+				--origam-card---box-shadow: var(--origam-card---box-shadow-hover);
 
 				&:after {
 					--origam-card__after---opacity: 1;
@@ -478,95 +623,9 @@ defineExpose({
 	}
 </style>
 
-<style>
-	:root {
-		--origam-card---overflow: hidden;
-		--origam-card---overflow-wrap: break-word;
-		--origam-card---position: relative;
-		--origam-card---z-index: 0;
-
-		--origam-card---transition-duration: 0.28s;
-		--origam-card---transition-property: box-shadow, opacity, background;
-		--origam-card---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-
-		--origam-card---color: rgba(0, 0, 0, 0.87);
-		--origam-card---box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
-		--origam-card---background: rgb(255, 255, 255);
-
-		--origam-card---display: block;
-
-		--origam-card---pointer-events: auto;
-		--origam-card---user-select: auto;
-		--origam-card---cursor: auto;
-
-		--origam-card---text-decoration: none;
-
-		--origam-card---border-top-width: 0;
-		--origam-card---border-left-width: 0;
-		--origam-card---border-bottom-width: 0;
-		--origam-card---border-right-width: 0;
-		--origam-card---border-width: var(--origam-card---border-top-width) var(--origam-card---border-left-width) var(--origam-card---border-bottom-width) var(--origam-card---border-right-width);
-		--origam-card---border-color: rgba(0, 0, 0, 0.87);
-		--origam-card---border-style: solid;
-		--origam-card---border-start-start-radius: 0;
-		--origam-card---border-start-end-radius: 0;
-		--origam-card---border-end-start-radius: 0;
-		--origam-card---border-end-end-radius: 0;
-		--origam-card---border-radius: var(--origam-card---border-start-start-radius) var(--origam-card---border-start-end-radius) var(--origam-card---border-end-start-radius) var(--origam-card---border-end-end-radius);
-
-		--origam-card---padding-block-start: 0;
-		--origam-card---padding-block-end: 0;
-		--origam-card---padding-inline-start: 0;
-		--origam-card---padding-inline-end: 0;
-
-		--origam-card---margin-block-start: 0;
-		--origam-card---margin-block-end: 0;
-		--origam-card---margin-inline-start: 0;
-		--origam-card---margin-inline-end: 0;
-
-		--origam-card---opacity: 1;
-
-		--origam-card__overlay---background-color: #000;
-		--origam-card__overlay---border-radius: inherit;
-		--origam-card__overlay---opacity: 0;
-		--origam-card__overlay---pointer-events: none;
-		--origam-card__overlay---position: absolute;
-		--origam-card__overlay---position-bottom: 0;
-		--origam-card__overlay---position-left: 0;
-		--origam-card__overlay---position-right: 0;
-		--origam-card__overlay---position-top: 0;
-		--origam-card__overlay---transition-property: opacity;
-		--origam-card__overlay---transition-duration: 0.2s;
-		--origam-card__overlay---transition-timing-function: ease-in-out;
-
-		--origam-card__underlay---position: absolute;
-
-		--origam-card__before---border-radius: inherit;
-		--origam-card__before---bottom: 0;
-		--origam-card__before---content: "";
-		--origam-card__before---display: block;
-		--origam-card__before---left: 0;
-		--origam-card__before---pointer-events: none;
-		--origam-card__before---position: absolute;
-		--origam-card__before---right: 0;
-		--origam-card__before---top: 0;
-		--origam-card__before---transition: inherit;
-		--origam-card__before---opacity: 1;
-		--origam-card__before---z-index: -1;
-		--origam-card__before---box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
-
-		--origam-card__after---border-radius: inherit;
-		--origam-card__after---bottom: 0;
-		--origam-card__after---content: "";
-		--origam-card__after---display: block;
-		--origam-card__after---left: 0;
-		--origam-card__after---pointer-events: none;
-		--origam-card__after---position: absolute;
-		--origam-card__after---right: 0;
-		--origam-card__after---top: 0;
-		--origam-card__after---transition: inherit;
-		--origam-card__after---z-index: 1;
-		--origam-card__after---opacity: 0;
-		--origam-card__after---box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+<style lang="scss" scoped>
+	.origam-card {
+		--origam-card---border-width: var(--origam-card---border-top-width, var(--origam-card---border-top-width, 0px)) var(--origam-card---border-left-width, 0px) var(--origam-card---border-bottom-width, 0px) var(--origam-card---border-right-width, 0px);
+		--origam-card---border-radius: var(--origam-card---border-start-start-radius, 0px) var(--origam-card---border-start-end-radius, 0px) var(--origam-card---border-end-start-radius, 0px) var(--origam-card---border-end-end-radius, 0px);
 	}
 </style>