origam 0.3.10 → 2.2.1

package/dist/src/components/Avatar/OrigamAvatar.vue

@@ -15,6 +15,7 @@
 							<origam-img
 									key="image"
 									cover
+									eager
 									v-bind="imageProps"
 							/>
 						</slot>
@@ -48,31 +49,27 @@
 import { OrigamIcon, OrigamImg } from "../../components";
 import {
   useActive,
-  useBorder,
-  useColorEffect,
+  useDefaults,
   useDensity,
-  useElevation,
   useHover,
-  useMargin,
-  usePadding,
   useProps,
-  useRounded,
   useSize,
-  useStatus,
+  useStateEffect,
   useStyle
 } from "../../composables";
 import { isEmpty } from "../../utils";
-import { computed, ref, useSlots } from "vue";
-const props = defineProps({
+import { computed, useSlots } from "vue";
+const _props = defineProps({
   start: { type: Boolean, required: false },
   end: { type: Boolean, required: false },
+  icon: { type: null, required: false },
   image: { type: [String, Object], required: false },
   text: { type: String, required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, 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 },
@@ -81,10 +78,6 @@ const props = defineProps({
   tag: { type: String, required: false, default: "div" },
   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 },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },
@@ -108,27 +101,17 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
-  status: { type: null, required: false },
-  statusIconPosition: { type: null, required: false },
-  icon: { type: null, required: false },
   elevation: { type: [Number, String], required: false },
-  hover: { type: Boolean, required: false },
-  active: { type: Boolean, required: false },
+  hover: { type: [Boolean, Object], required: false },
+  active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false }
 });
+const props = useDefaults(_props);
 defineEmits(["update:active", "update:hover"]);
 const { filterProps } = useProps(props);
-const { densityClasses } = useDensity(props);
-const { roundedClasses, roundedStyles } = useRounded(props);
-const { borderClasses, borderStyles } = useBorder(props);
-const { paddingClasses, paddingStyles } = usePadding(props);
-const { marginClasses, marginStyles } = useMargin(props);
-const { hoverClasses, isHover, onMouseleave: handleMouseleave, onMouseenter: handleMouseenter } = useHover(props);
-const { activeClasses, isActive, onActive: handleClick } = useActive(props);
-const { colorStyles, bgColor } = useColorEffect(props, isHover, isActive);
-const { elevationClasses, elevationStyles } = useElevation(props, ref(false), bgColor);
-const { sizeClasses, sizeStyles } = useSize(props);
-const { statusClasses } = useStatus(props);
+const { hoverClasses, isHover, hoverState, onMouseleave: handleMouseleave, onMouseenter: handleMouseenter } = useHover(props);
+const { activeClasses, isActive, activeState, onActive: handleClick } = useActive(props);
+const { colorClasses, colorStyles, borderClasses, borderStyles, roundedClasses, roundedStyles, elevationClasses, elevationStyles, paddingClasses, paddingStyles, marginClasses, marginStyles } = useStateEffect(props, isHover, isActive, hoverState, activeState);
 const slots = useSlots();
 const hasImage = computed(() => {
   return !isEmpty(props.image) || slots.image;
@@ -151,6 +134,8 @@ const imageProps = computed(() => {
   }
   return imgSrc;
 });
+const { densityClasses } = useDensity(props);
+const { sizeClasses, sizeStyles } = useSize(props);
 const avatarStyles = computed(() => {
   return [
     roundedStyles.value,
@@ -170,13 +155,13 @@ const avatarClasses = computed(() => {
       "origam-avatar--start": props.start,
       "origam-avatar--end": props.end
     },
+    colorClasses.value,
     densityClasses.value,
     roundedClasses.value,
     borderClasses.value,
     paddingClasses.value,
     marginClasses.value,
     sizeClasses.value,
-    statusClasses.value,
     elevationClasses.value,
     hoverClasses.value,
     activeClasses.value,
@@ -218,7 +203,7 @@ defineExpose({
 		border-width: var(--origam-avatar---border-width);
 		border-radius: var(--origam-avatar---border-radius);
 
-		background: var(--origam-avatar---background);
+		background-color: var(--origam-avatar---background-color);
 		box-shadow: var(--origam-avatar---box-shadow);
 		color: var(--origam-avatar---color);
 
@@ -252,15 +237,26 @@ defineExpose({
 		&__image {
 			width: var(--origam-avatar__image---width);
 			height: var(--origam-avatar__image---height);
+			// OrigamImg paints its <img> with `z-index: -1` (so the
+			// optional gradient overlay can sit on top of the picture).
+			// Without a contained stacking context here, the negative
+			// z-index would push the image BEHIND the Avatar's own
+			// background — the user sees only the bg color, not the
+			// photo.
+			position: relative;
+			overflow: hidden;
+			border-radius: inherit;
 
 			&:deep(.origam-img) {
 				--origam-img---height: 100%;
 				--origam-img---width: 100%;
+				--origam-img__picture---z-index: auto;
+				--origam-img__content---z-index: auto;
 			}
 		}
 
 		&--elevated {
-			--origam-avatar---box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
+			--origam-avatar---box-shadow: var(--origam-avatar---box-shadow-elevated, var(--origam-shadow---md));
 		}
 
 		&--border {
@@ -268,10 +264,48 @@ defineExpose({
 		}
 
 		&--rounded {
-			--origam-avatar---border-radius: 50%;
+			--origam-avatar---border-radius: var(--origam-avatar---border-radius-rounded, var(--origam-radius---sm, 4px));
 		}
 
-		&--density-comfortable {
+		&--rounded-x-small {
+			--origam-avatar---border-radius: var(--origam-radius---xs, 2px);
+		}
+
+		&--rounded-small {
+			--origam-avatar---border-radius: var(--origam-radius---sm, 4px);
+		}
+
+		&--rounded-default {
+			--origam-avatar---border-radius: var(--origam-radius---md, 8px);
+		}
+
+		&--rounded-medium {
+			--origam-avatar---border-radius: var(--origam-radius---lg, 12px);
+		}
+
+		&--rounded-large {
+			--origam-avatar---border-radius: var(--origam-radius---xl, 16px);
+		}
+
+		&--rounded-x-large {
+			--origam-avatar---border-radius: var(--origam-radius---2xl, 24px);
+		}
+
+		&--rounded-shaped {
+			border-start-start-radius: var(--origam-avatar---border-radius-rounded, 16px);
+			border-start-end-radius: 0;
+			border-end-start-radius: 0;
+			border-end-end-radius: var(--origam-avatar---border-radius-rounded, 16px);
+		}
+
+		&--rounded-shaped-invert {
+			border-start-start-radius: 0;
+			border-start-end-radius: var(--origam-avatar---border-radius-rounded, 16px);
+			border-end-start-radius: var(--origam-avatar---border-radius-rounded, 16px);
+			border-end-end-radius: 0;
+		}
+
+		&--density-compact {
 			--origam-avatar---density: 8px;
 		}
 
@@ -279,8 +313,8 @@ defineExpose({
 			--origam-avatar---density: 0px;
 		}
 
-		&--density-compact {
-			--origam-avatar---density: 8px;
+		&--density-comfortable {
+			--origam-avatar---density: -8px;
 		}
 
 		&--size-x-small {
@@ -314,82 +348,23 @@ defineExpose({
 		}
 
 		&--warning {
-			--origam-avatar---background-color: var(--origam-status--warning---background-color, rgb(251, 140, 0));
-			--origam-avatar---color: var(--origam-status--warning---color, #ffffff);
+			--origam-avatar---background-color: var(--origam-avatar--warning---background-color, var(--origam-color__feedback--warning---bg));
+			--origam-avatar---color: var(--origam-avatar--warning---color, var(--origam-color__feedback--warning---fg));
 		}
 
 		&--success {
-			--origam-avatar---background-color: var(--origam-status--success---background-color, rgb(76, 175, 80));
-			--origam-avatar---color: var(--origam-status--success---color, #ffffff);
+			--origam-avatar---background-color: var(--origam-avatar--success---background-color, var(--origam-color__feedback--success---bg));
+			--origam-avatar---color: var(--origam-avatar--success---color, var(--origam-color__feedback--success---fg));
 		}
 
 		&--info {
-			--origam-avatar---background-color: var(--origam-status--info---background-color, rgb(33, 150, 243));
-			--origam-avatar---color: var(--origam-status--info---color, #ffffff);
+			--origam-avatar---background-color: var(--origam-avatar--info---background-color, var(--origam-color__feedback--info---bg));
+			--origam-avatar---color: var(--origam-avatar--info---color, var(--origam-color__feedback--info---fg));
 		}
 
 		&--error {
-			--origam-avatar---background-color: var(--origam-status--error---background-color, rgb(207, 102, 121));
-			--origam-avatar---color: var(--origam-status--error---color, #ffffff);
+			--origam-avatar---background-color: var(--origam-avatar--danger---background-color, var(--origam-color__feedback--danger---bg));
+			--origam-avatar---color: var(--origam-avatar--danger---color, var(--origam-color__feedback--danger---fg));
 		}
 	}
 </style>
-
-<style>
-	:root {
-
-		--origam-avatar---text-align: center;
-		--origam-avatar---font-size: 1.5rem;
-		--origam-avatar---font-weight: 400;
-		--origam-avatar---letter-spacing: 0;
-		--origam-avatar---line-height: 1;;
-		--origam-avatar---text-transform: uppercase;
-		--origam-avatar---overflow: hidden;
-		--origam-avatar---position: relative;
-		--origam-avatar---height: 40px;
-		--origam-avatar---width: 40px;
-		--origam-avatar---density: 0px;
-		--origam-avatar---transition-duration: 0.2s;
-		--origam-avatar---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-		--origam-avatar---transition-property: width, height, font-size;
-		--origam-avatar---transition: var(--origam-avatar---transition-property) var(--origam-avatar---transition-duration) var(--origam-avatar---transition-timing-function);
-		--origam-avatar---border-top-width: 0;
-		--origam-avatar---border-left-width: 0;
-		--origam-avatar---border-bottom-width: 0;
-		--origam-avatar---border-right-width: 0;
-		--origam-avatar---border-width: var(--origam-avatar---border-top-width) var(--origam-avatar---border-left-width) var(--origam-avatar---border-bottom-width) var(--origam-avatar---border-right-width);
-		--origam-avatar---border-color: currentColor;
-		--origam-avatar---border-style: solid;
-		--origam-avatar---border-radius: 0px;
-		--origam-avatar---box-shadow: none;
-		--origam-avatar---color: rgba(30, 30, 30, 0.87);
-		--origam-avatar---background: rgb(230, 230, 230);
-		--origam-avatar---margin-inline-start: 0;
-		--origam-avatar---margin-inline-end: 0;
-		--origam-avatar---margin-block-start: 0;
-		--origam-avatar---margin-block-end: 0;
-		--origam-avatar---padding-block-start: 0;
-		--origam-avatar---padding-block-end: 0;
-		--origam-avatar---padding-inline-start: 0;
-		--origam-avatar---padding-inline-end: 0;
-
-		--origam-avatar__wrapper---width: 100%;
-		--origam-avatar__wrapper---height: 100%;
-		--origam-avatar__wrapper---flex: none;
-		--origam-avatar__wrapper---align-items: center;
-		--origam-avatar__wrapper---display: inline-flex;
-		--origam-avatar__wrapper---justify-content: center;
-		--origam-avatar__wrapper---vertical-align: middle;
-		--origam-avatar__wrapper---margin-inline-start: 0;
-		--origam-avatar__wrapper---margin-inline-end: 0;
-		--origam-avatar__wrapper---margin-block-start: 0;
-		--origam-avatar__wrapper---margin-block-end: 0;
-		--origam-avatar__padding---margin-block-start: 0;
-		--origam-avatar__padding---margin-block-end: 0;
-		--origam-avatar__padding---margin-inline-start: 0;
-		--origam-avatar__padding---margin-inline-end: 0;
-
-		--origam-avatar__image---width: 100%;
-		--origam-avatar__image---height: 100%;
-	}
-</style>

package/dist/src/components/Avatar/OrigamAvatarGroup.vue

@@ -8,47 +8,49 @@
 			@mouseenter="handleMouseEnter"
 			@mouseleave="handleMouseLeave"
 	>
-		<template
-				v-for="(item, index) in displayItems"
-				:key="index"
-		>
-			<slot
-					name="avatar"
-					v-bind="{item, index}"
+		<origam-defaults-provider :defaults="slotDefaults">
+			<template
+					v-for="(item, index) in displayItems"
+					:key="index"
 			>
-				<origam-avatar
-						:id="`avatar-${index}`"
-						ref="origamAvatarRef"
-						class="origam-avatar-group__item"
-						v-bind="avatarProps(item)"
-				/>
-			</slot>
-		</template>
+				<slot
+						name="avatar"
+						v-bind="{item, index}"
+				>
+					<origam-avatar
+							:id="`avatar-${index}`"
+							ref="origamAvatarRef"
+							class="origam-avatar-group__item"
+							v-bind="avatarProps(item)"
+					/>
+				</slot>
+			</template>
 
-		<template v-if="restItems.length">
-			<slot
-					name="rest"
-					v-bind="{rest: restItems, length: restItems.length}"
-			>
-				<origam-avatar
-						ref="origamAvatarRef"
-						class="origam-avatar-group__rest"
-						v-bind="avatarProps"
+			<template v-if="restItems.length">
+				<slot
+						name="rest"
+						v-bind="{rest: restItems, length: restItems.length}"
 				>
-					<template #default>
-						<slot name="default">
-							+{{ restItems.length }}
-						</slot>
-					</template>
-				</origam-avatar>
-			</slot>
-		</template>
+					<origam-avatar
+							ref="origamAvatarRef"
+							class="origam-avatar-group__rest"
+							v-bind="avatarProps()"
+					>
+						<template #default>
+							<slot name="default">
+								+{{ restItems.length }}
+							</slot>
+						</template>
+					</origam-avatar>
+				</slot>
+			</template>
+		</origam-defaults-provider>
 	</component>
 </template>
 
 <script setup>
-import { OrigamAvatar } from "../../components";
-import { useActive, useDensity, useHover, useMargin, usePadding, useProps, useRtl, useStyle } from "../../composables";
+import { OrigamAvatar, OrigamDefaultsProvider } from "../../components";
+import { useActive, useDensity, useHover, useProps, useRtl, useStateEffect, useStyle } from "../../composables";
 import { DIRECTION } from "../../enums";
 import { computed, mergeProps, ref } from "vue";
 const props = defineProps({
@@ -61,7 +63,7 @@ const props = defineProps({
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   direction: { type: null, required: false, default: DIRECTION.HORIZONTAL },
   density: { type: null, 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 },
@@ -70,10 +72,6 @@ const props = defineProps({
   tag: { type: String, required: false, default: "div" },
   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 },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },
@@ -98,34 +96,42 @@ const props = defineProps({
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
   elevation: { type: [Number, String], required: false },
-  hover: { type: Boolean, required: false },
-  active: { type: Boolean, required: false },
+  hover: { type: [Boolean, Object], required: false },
+  active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false }
 });
+const slotDefaults = computed(() => ({
+  "origam-avatar": {
+    density: props.density,
+    size: props.size,
+    color: props.color,
+    bgColor: props.bgColor
+  }
+}));
 defineEmits(["update:active", "update:hover"]);
 const { filterProps } = useProps(props);
 const { isRtl } = useRtl();
-const max = ref(props.max);
+const isExpanded = ref(false);
+const effectiveMax = computed(() => {
+  return isExpanded.value ? props.items.length : props.max;
+});
 const restItems = computed(() => {
-  if (props.items.length > max.value) {
-    return props.items.slice(max.value - 1, props.items.length);
+  if (props.items.length > effectiveMax.value) {
+    return props.items.slice(effectiveMax.value - 1, props.items.length);
   }
   return [];
 });
 const displayItems = computed(() => {
-  if (props.items.length > max.value) {
-    return props.items.slice(0, max.value - 1);
+  if (props.items.length > effectiveMax.value) {
+    return props.items.slice(0, effectiveMax.value - 1);
   }
-  if (props.items.length === max.value) {
-    return props.items.slice(0, max.value);
+  if (props.items.length === effectiveMax.value) {
+    return props.items.slice(0, effectiveMax.value);
   }
   return props.items;
 });
-const { hoverClasses, isHover, onMouseleave, onMouseenter } = useHover(props);
-const { activeClasses, isActive, onActive } = useActive(props);
-const { marginClasses, marginStyles } = useMargin(props);
-const { paddingClasses, paddingStyles } = usePadding(props);
-const { densityClasses } = useDensity(props);
+const { hoverClasses, hoverState, isHover, onMouseleave, onMouseenter } = useHover(props);
+const { activeClasses, activeState, isActive, onActive } = useActive(props);
 const origamAvatarRef = ref();
 const avatarProps = (item = {}) => {
   const ignoreProps = ["margin", "marginLeft", "marginTop", "marginRight", "marginBottom", "padding", "paddingLeft", "paddingTop", "paddingRight", "paddingBottom"];
@@ -134,26 +140,29 @@ const avatarProps = (item = {}) => {
 };
 const handleMouseEnter = () => {
   if (props.expandOnHover) {
-    max.value = props.items.length;
+    isExpanded.value = true;
   }
   onMouseenter();
 };
 const handleMouseLeave = () => {
   if (props.expandOnHover) {
-    max.value = props.max;
+    isExpanded.value = false;
   }
   onMouseleave();
 };
 const handleClick = () => {
   if (props.expandOnClick) {
-    if (isActive.value) {
-      max.value = props.max;
-    } else {
-      max.value = props.items.length;
-    }
+    isExpanded.value = !isActive.value;
   }
   onActive();
 };
+const {
+  marginClasses,
+  marginStyles,
+  paddingClasses,
+  paddingStyles
+} = useStateEffect(props, isHover, isActive, hoverState, activeState);
+const { densityClasses } = useDensity(props);
 const avatarGroupStyles = computed(() => {
   return [
     marginStyles.value,
@@ -208,7 +217,7 @@ defineExpose({
 		margin-inline-start: var(--origam-avatar-group---margin-inline-start);
 		margin-inline-end: var(--origam-avatar-group---margin-inline-end);
 
-		&___item {
+		&__item {
 			margin-block-start: var(--origam-avatar-group__item---margin-block-start);
 			margin-block-end: var(--origam-avatar-group__item---margin-block-end);
 			margin-inline-start: var(--origam-avatar-group__item---margin-inline-start);
@@ -217,104 +226,65 @@ defineExpose({
 
 		&--expand-on-hover,
 		&--expand-on-click {
-			#{$this}___item {
-				&:not(:first-child) {
-					transition: var(--origam-avatar-group__avatar---transition);
-				}
+			#{$this}__item:not(:first-child),
+			#{$this}__rest:not(:first-child) {
+				transition-property: var(--origam-avatar-group__avatar---transition-property, margin);
+				transition-duration: var(--origam-avatar-group__avatar---transition-duration, 200ms);
+				transition-timing-function: var(--origam-avatar-group__avatar---transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
 			}
 		}
 
+		&--expand-on-click {
+			cursor: pointer;
+		}
+
 		&--elevated {
-			box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
+			box-shadow: var(--origam-avatar-group---box-shadow-elevated, var(--origam-shadow---md));
 		}
 
-		&--density-comfortable {
-			--origam-avatar-group---density: 8px;
+		&--density-compact {
+			--origam-avatar-group---density: -6px;
 		}
 
 		&--density-default {
 			--origam-avatar-group---density: 0px;
 		}
 
-		&--density-compact {
-			--origam-avatar-group---density: 8px;
+		&--density-comfortable {
+			--origam-avatar-group---density: 10px;
 		}
 
 		&--horizontal {
-			--origam-avatar-group---flex-direction: row;
-
-			#{$this}___item {
-				&:not(:first-child) {
-					--origam-avatar-group---margin-inline-start: calc(-18px + var(--origam-avatar-group---density));
-				}
-			}
+			flex-direction: row;
 
-			&#{$this}--expand-on-hover {
-				&:hover {
-					#{$this}___item {
-						--origam-avatar-group---margin-inline-start: 0;
-					}
-				}
+			#{$this}__item:not(:first-child),
+			#{$this}__rest:not(:first-child) {
+				margin-inline-start: calc(-18px + var(--origam-avatar-group---density, 0px));
 			}
 
-			&#{$this}--expand-on-click {
-				&#{$this}--active {
-					#{$this}___item {
-						--origam-avatar-group---margin-inline-start: 0;
-					}
-				}
+			&#{$this}--expand-on-hover:hover #{$this}__item:not(:first-child),
+			&#{$this}--expand-on-hover:hover #{$this}__rest:not(:first-child),
+			&#{$this}--expand-on-click#{$this}--active #{$this}__item:not(:first-child),
+			&#{$this}--expand-on-click#{$this}--active #{$this}__rest:not(:first-child) {
+				margin-inline-start: 0;
 			}
 		}
 
 		&--vertical {
 			flex-direction: column;
 
-			#{$this}___item {
-				&:not(:first-child) {
-					--origam-avatar-group---margin-block-start: calc(-18px + var(--origam-avatar-group---density));
-				}
+			#{$this}__item:not(:first-child),
+			#{$this}__rest:not(:first-child) {
+				margin-block-start: calc(-18px + var(--origam-avatar-group---density, 0px));
 			}
 
-			&#{$this}--expand-on-hover {
-				&:hover {
-					#{$this}___item {
-						--origam-avatar-group---margin-block-start: 0;
-					}
-				}
-			}
-
-			&#{$this}--expand-on-click {
-				&#{$this}--active {
-					#{$this}___item {
-						--origam-avatar-group---margin-block-start: 0;
-					}
-				}
+			&#{$this}--expand-on-hover:hover #{$this}__item:not(:first-child),
+			&#{$this}--expand-on-hover:hover #{$this}__rest:not(:first-child),
+			&#{$this}--expand-on-click#{$this}--active #{$this}__item:not(:first-child),
+			&#{$this}--expand-on-click#{$this}--active #{$this}__rest:not(:first-child) {
+				margin-block-start: 0;
 			}
 		}
-	}
-</style>
-
-<style>
-	:root {
-		--origam-avatar-group---flex-direction: row;
-		--origam-avatar-group---position: relative;
-		--origam-avatar-group---density: 0;
-		--origam-avatar-group---margin-inline-start: 0;
-		--origam-avatar-group---margin-inline-end: 0;
-		--origam-avatar-group---margin-block-start: 0;
-		--origam-avatar-group---margin-block-end: 0;
-		--origam-avatar-group---padding-block-start: 0;
-		--origam-avatar-group---padding-block-end: 0;
-		--origam-avatar-group---padding-inline-start: 0;
-		--origam-avatar-group---padding-inline-end: 0;
 
-		--origam-avatar-group__avatar---transition-duration: 0.2s;
-		--origam-avatar-group__avatar---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-		--origam-avatar-group__avatar---transition-property: margin;
-		--origam-avatar-group__avatar---transition: var(--origam-avatar-group__avatar---transition-property) var(--origam-avatar-group__avatar---transition-duration) var(--origam-avatar-group__avatar---transition-timing-function);
-		--origam-avatar-group__avatar---margin-inline-start: 0;
-		--origam-avatar-group__avatar---margin-inline-end: 0;
-		--origam-avatar-group__avatar---margin-block-start: 0;
-		--origam-avatar-group__avatar---margin-block-end: 0;
 	}
 </style>