origam 2.5.0 → 2.6.1

package/dist/src/components/Alert/OrigamAlert.vue

@@ -2,9 +2,10 @@
 	<component
 			:is="tag"
 			:id="id"
+			v-contrast
 			:class="alertClasses"
-			:role="props.status === 'warning' || props.status === 'error' ? 'alert' : 'status'"
-			:aria-live="props.status === 'warning' || props.status === 'error' ? 'assertive' : 'polite'"
+			:role="status === 'warning' || status === 'error' ? 'alert' : 'status'"
+			:aria-live="status === 'warning' || status === 'error' ? 'assertive' : 'polite'"
 			@mouseenter="handleMouseenter"
 			@mouseleave="handleMouseleave"
 	>
@@ -52,7 +53,7 @@
 						/>
 					</template>
 					<template v-if="hasTitle">
-						<span class="origam-alert__title">
+						<span class="origam-alert__title" :style="typographyStyles">
 							<slot name="title">{{ title }}</slot>
 						</span>
 					</template>
@@ -110,9 +111,10 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, useSlots } from "vue";
 import { OrigamAvatar, OrigamBtn, OrigamIcon } from "../../components";
+import { vContrast } from "../../directives";
 import {
   useActive,
   useAdjacent,
@@ -125,7 +127,8 @@ import {
   useProps,
   useStateEffect,
   useStatus,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
 import { DENSITY, MDI_ICONS } from "../../enums";
 const props = defineProps({
@@ -133,7 +136,6 @@ const props = defineProps({
   closeIcon: { type: null, required: false, default: MDI_ICONS.CLOSE },
   closeLabel: { type: String, required: false, default: "origam.close" },
   modelValue: { type: Boolean, required: false, default: true },
-  prominent: { type: Boolean, required: false },
   title: { type: String, required: false },
   text: { type: String, required: false },
   id: { type: String, required: false },
@@ -191,11 +193,17 @@ 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 }
 });
 const emits = defineEmits(["update:modelValue", "click:close", "update:hover"]);
 const { filterProps } = useProps(props);
 const { t } = useLocale();
+const { typographyStyles } = useTypography(props, "alert__title");
 const slots = useSlots();
 const { activeClasses, isActive, activeState, onActive } = useActive(props, "modelValue");
 const { isHover, hoverState, onMouseenter: handleMouseenter, onMouseleave: handleMouseleave, hoverClasses } = useHover(props);
@@ -211,9 +219,7 @@ const handleClose = (e) => {
   onActive();
   emits("click:close", e);
 };
-const size = computed(() => {
-  return props.prominent ? 44 : 28;
-});
+const size = 28;
 const hasIcon = computed(() => {
   return !!icon.value;
 });
@@ -247,9 +253,6 @@ const alertStyles = computed(() => {
 const alertClasses = computed(() => {
   return [
     "origam-alert",
-    {
-      "origam-alert--prominent": props.prominent
-    },
     hoverClasses.value,
     activeClasses.value,
     statusClasses.value,
@@ -424,14 +427,6 @@ defineExpose({
 			--origam-alert---position: relative;
 		}
 
-		&--prominent {
-			grid-template-areas: "prepend content append close" "prepend content . .";
-
-			#{$this}__prepend {
-				--origam-alert__prepend---align-self: center;
-			}
-		}
-
 		&__close {
 			align-self: flex-start;
 			flex: 0 1 auto;

package/dist/src/components/App/OrigamApp.vue

@@ -4,6 +4,10 @@
 			ref="origamAppRef"
 			:class="appClasses"
 			:style="appStyles"
+			:color="color"
+			:bg-color="bgColor"
+			:full-height="fullHeight"
+			:overlaps="overlaps"
 	>
 		<template #default>
 			<slot name="default"/>
@@ -11,53 +15,18 @@
 	</origam-layout>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamLayout } from "../../components";
 import { useProps, useRtl, useStyle } from "../../composables";
 import { computed, ref, StyleValue } from "vue";
 const props = defineProps({
-  overlaps: { type: Array, required: false },
   fullHeight: { type: Boolean, required: false, default: true },
+  overlaps: { type: Array, 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 },
-  height: { type: [Number, String], required: false },
-  maxHeight: { type: [Number, String], required: false },
-  maxWidth: { type: [Number, String], required: false },
-  minHeight: { type: [Number, String], required: false },
-  minWidth: { type: [Number, String], required: false },
-  width: { type: [Number, String], required: false },
-  margin: { type: [Boolean, Number, String], required: false },
-  marginTop: { type: [Boolean, Number, String], required: false },
-  marginLeft: { type: [Boolean, Number, String], required: false },
-  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 },
-  padding: { type: [Boolean, Number, String], required: false },
-  paddingTop: { type: [Boolean, Number, String], required: false },
-  paddingLeft: { type: [Boolean, Number, String], required: false },
-  paddingBottom: { type: [Boolean, Number, String], required: false },
-  paddingRight: { type: [Boolean, Number, String], required: false },
-  paddingBlock: { type: [Boolean, Number, String], required: false },
-  paddingInline: { type: [Boolean, Number, String], required: false },
-  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 },
-  roundedBottomRight: { type: [Boolean, Number, String], required: false },
-  elevation: { type: [Number, String], required: false },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
-  borderTop: { type: [Boolean, Number, String], required: false },
-  borderLeft: { type: [Boolean, Number, String], required: false },
-  borderBottom: { type: [Boolean, Number, String], required: false },
-  borderRight: { type: [Boolean, Number, String], required: false },
-  borderBlock: { type: [Boolean, Number, String], required: false },
-  borderInline: { type: [Boolean, Number, String], required: false },
-  borderColor: { type: String, required: false },
-  borderStyle: { type: String, required: false }
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
 const { filterProps } = useProps(props);
 const { rtlClasses } = useRtl();

package/dist/src/components/App/OrigamAppBar.vue

@@ -4,6 +4,7 @@
 			:class="appBarClasses"
 			:collapse="isCollapsed"
 			:flat="isFlat"
+			:active="toolbarActive"
 			:style="appBarStyles"
 			v-bind="toolbarProps"
 	>
@@ -45,16 +46,16 @@
 	</origam-toolbar>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamImg, OrigamToolbar } from "../../components";
 import {
-  useActive,
   useLayoutItem,
   useProps,
   useScroll,
   useSsrBoot,
   useStyle,
-  useToggleScope
+  useToggleScope,
+  useVModel
 } from "../../composables";
 import { BLOCK, DENSITY } from "../../enums";
 import { forwardRefs, int } from "../../utils";
@@ -64,7 +65,6 @@ const props = defineProps({
   image: { type: Object, required: false },
   collapse: { type: Boolean, required: false },
   flat: { type: Boolean, required: false },
-  floating: { type: Boolean, required: false },
   title: { type: String, required: false },
   modelValue: { type: Boolean, required: false, default: true },
   tag: { type: String, required: false, default: "header" },
@@ -110,16 +110,17 @@ const props = defineProps({
   right: { type: [Number, String], required: false },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
-  maxWidth: { type: [Number, String], required: false },
   minHeight: { type: [Number, String], required: false },
-  minWidth: { type: [Number, String], required: false },
-  width: { type: [Number, String], required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], 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 },
   name: { type: String, required: false },
   order: { type: [String, Number], required: false },
-  absolute: { type: Boolean, required: false },
   scrollBehavior: { type: null, required: false },
   scrollTarget: { type: String, required: false },
   scrollThreshold: { type: [String, Number], required: false, default: 300 }
@@ -130,7 +131,7 @@ const { ssrBootStyles } = useSsrBoot();
 const slots = useSlots();
 const origamToolbarRef = ref();
 const toolbarProps = computed(() => {
-  return origamToolbarRef.value?.filterProps(props, ["class", "style", "collapse", "flat"]);
+  return origamToolbarRef.value?.filterProps(props, ["class", "style", "collapse", "flat", "floating", "active", "width", "minWidth", "maxWidth"]);
 });
 const hasImage = computed(() => {
   return !!(props.image || slots.img);
@@ -144,7 +145,7 @@ const hasContent = computed(() => {
 const hasAppend = computed(() => {
   return slots.append;
 });
-const { isActive, activeClasses } = useActive(props, "modelValue");
+const visible = useVModel(props, "modelValue");
 const scrollBehavior = computed(() => {
   const behavior = new Set(props.scrollBehavior?.split(" ") ?? []);
   return {
@@ -153,13 +154,17 @@ const scrollBehavior = computed(() => {
     inverted: behavior.has("inverted"),
     collapse: behavior.has("collapse"),
     elevate: behavior.has("elevate"),
+    // Engage the bar's `active` design-state once the page is scrolled
+    // (transparent at the top → painted/`--active` on scroll). Opt-in,
+    // like every other behaviour token.
+    active: behavior.has("active"),
     fadeImage: behavior.has("fade-image")
     // shrink: behavior.has('shrink'),
   };
 });
 const canScroll = computed(() => {
   const behavior = scrollBehavior.value;
-  return behavior.hide || behavior.inverted || behavior.collapse || behavior.elevate || behavior.fadeImage || !isActive.value;
+  return behavior.hide || behavior.inverted || behavior.collapse || behavior.elevate || behavior.active || behavior.fadeImage || !visible.value;
 });
 const {
   currentScroll,
@@ -171,15 +176,25 @@ useToggleScope(computed(() => !!props.scrollBehavior), () => {
   watchEffect(() => {
     if (scrollBehavior.value.hide) {
       if (scrollBehavior.value.inverted) {
-        isActive.value = currentScroll.value > scrollThreshold.value;
+        visible.value = currentScroll.value > scrollThreshold.value;
       } else {
-        isActive.value = isScrollingUp.value || currentScroll.value < scrollThreshold.value;
+        visible.value = isScrollingUp.value || currentScroll.value < scrollThreshold.value;
       }
     } else {
-      isActive.value = true;
+      visible.value = true;
     }
   });
 });
+const isScrolled = computed(() => currentScroll.value > 0);
+const isScrollActive = computed(() => scrollBehavior.value.active && isScrolled.value);
+const barActiveClasses = computed(() => {
+  return isScrollActive.value ? ["origam-app-bar--active"] : [];
+});
+const toolbarActive = computed(() => {
+  const override = props.active && typeof props.active === "object" ? props.active : void 0;
+  if (!scrollBehavior.value.active || !override) return props.active;
+  return isScrollActive.value ? { ...override, enabled: true } : false;
+});
 const isCollapsed = computed(() => props.collapse || scrollBehavior.value.collapse && (scrollBehavior.value.inverted ? scrollRatio.value > 0 : scrollRatio.value === 0));
 const isFlat = computed(() => props.flat || scrollBehavior.value.elevate && (scrollBehavior.value.inverted ? currentScroll.value > 0 : currentScroll.value === 0));
 const height = computed(() => {
@@ -202,8 +217,11 @@ const { layoutItemStyles } = useLayoutItem({
   position: toRef(props, "location"),
   layoutSize: height,
   elementSize: shallowRef(void 0),
-  active: isActive,
-  absolute: toRef(props, "absolute")
+  active: visible,
+  // `absolute` is not part of the AppBar surface (it only toggles
+  // absolute↔fixed and never scrolls the bar away). The layout defaults
+  // to fixed for the root bar.
+  absolute: shallowRef(void 0)
 });
 const appBarStyles = computed(() => {
   return [
@@ -216,7 +234,7 @@ const appBarClasses = computed(() => {
   return [
     "origam-app-bar",
     `origam-app-bar--${props.location}`,
-    activeClasses.value,
+    barActiveClasses.value,
     props.class
   ];
 });

package/dist/src/components/Audio/OrigamAudio.vue

@@ -99,11 +99,13 @@
 											v-if="resolvedTitle"
 											class="origam-audio__title"
 											data-cy="origam-audio-title"
+											:style="typographyTitleStyles"
 									>{{ resolvedTitle }}</strong>
 								</slot>
 								<span
 										v-if="hasMetaLine"
 										class="origam-audio__meta"
+										:style="typographyMetaStyles"
 								>
 									<span
 											v-if="resolvedArtist"
@@ -196,6 +198,7 @@
 				role="status"
 				:aria-label="loadingLabel"
 				data-cy="origam-audio-loading"
+				:style="typographyLoadingStyles"
 		>
 			<slot name="loading">
 				<origam-icon
@@ -211,6 +214,7 @@
 				class="origam-audio__error"
 				role="alert"
 				data-cy="origam-audio-error"
+				:style="typographyErrorStyles"
 		>
 			<slot
 					name="error"
@@ -227,7 +231,7 @@
 	</article>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   nextTick,
@@ -241,12 +245,14 @@ import { OrigamSliderField } from "../SliderField";
 import {
   useBorder,
   useColorEffect,
+  useDimension,
   useElevation,
   useLocale,
   useMargin,
   usePadding,
   usePosition,
-  useRounded
+  useRounded,
+  useTypography
 } from "../../composables";
 import { useAudioPlayer } from "../../composables/Audio/use-audio-player.composable";
 import { useWaveform } from "../../composables/Audio/use-waveform.composable";
@@ -298,6 +304,12 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
+  height: { type: [Number, String], required: false },
+  maxHeight: { type: [Number, String], required: false },
+  maxWidth: { type: [Number, String], required: false },
+  minHeight: { type: [Number, String], required: false },
+  minWidth: { type: [Number, String], required: false },
+  width: { type: [Number, String], required: false },
   margin: { type: [Boolean, Number, String], required: false },
   marginTop: { type: [Boolean, Number, String], required: false },
   marginLeft: { type: [Boolean, Number, String], required: false },
@@ -319,7 +331,12 @@ const props = defineProps({
   left: { type: [Number, String], required: false, default: void 0 },
   right: { type: [Number, String], required: false, default: void 0 },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true, default: void 0 },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true, default: void 0 }
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true, default: void 0 },
+  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 emit = defineEmits(["play", "pause", "ended", "timeupdate", "volumechange", "loadedmetadata", "error", "update:playbackRate", "download", "waveform", "previous", "next", "update:currentTrackIndex", "update:loopMode", "update:shuffle", "track-change"]);
 const ICONS = {
@@ -438,7 +455,7 @@ const { audioRef, state, methods } = useAudioPlayer({
   loop: props.loop,
   preload: props.preload
 });
-watch(audioRef, (el, prev, onCleanup) => {
+watch(audioRef, (el, _prev, onCleanup) => {
   if (!el) return;
   const onLoadedData = () => {
     if (!pendingResumeOnLoad.value) return;
@@ -448,6 +465,9 @@ watch(audioRef, (el, prev, onCleanup) => {
   el.addEventListener("loadeddata", onLoadedData);
   onCleanup(() => el.removeEventListener("loadeddata", onLoadedData));
 }, { immediate: true });
+watch(resolvedAutoplay, (on) => {
+  if (on) void methods.play();
+});
 function onTimeUpdate(event) {
   emit("timeupdate", event);
 }
@@ -623,6 +643,11 @@ const { paddingClasses, paddingStyles } = usePadding(props);
 const { marginClasses, marginStyles } = useMargin(props);
 const { elevationClasses, elevationStyles } = useElevation(props);
 const { positionClasses, positionStyles } = usePosition(props);
+const { dimensionStyles } = useDimension(props);
+const { typographyStyles: typographyTitleStyles } = useTypography(props, "audio__title");
+const { typographyStyles: typographyMetaStyles } = useTypography(props, "audio__meta");
+const { typographyStyles: typographyLoadingStyles } = useTypography(props, "audio__loading");
+const { typographyStyles: typographyErrorStyles } = useTypography(props, "audio--error");
 const variantClassName = computed(() => `origam-audio--${isCompactVariant.value ? "compact" : "expanded"}`);
 const rootClasses = computed(() => [
   variantClassName.value,
@@ -659,6 +684,7 @@ const rootStyles = computed(() => [
   paddingStyles.value,
   marginStyles.value,
   elevationStyles.value,
+  dimensionStyles.value,
   props.style
 ]);
 defineExpose({
@@ -681,7 +707,8 @@ defineExpose({
 	.origam-audio {
 		$this: &;
 
-		display: block;
+		display: flex;
+		flex-direction: column;
 		position: var(--origam-audio---position, static);
 		padding: var(--origam-audio---padding, 16px);
 		border-radius: var(--origam-audio---border-radius, var(--origam-radius---lg, 12px));
@@ -691,6 +718,36 @@ defineExpose({
 		border: var(--origam-audio---border-width, 1px) solid var(--origam-audio---border-color, var(--origam-color__border---subtle));
 		box-shadow: var(--origam-audio---box-shadow, 0px 1px 3px 0px rgba(0, 0, 0, 0.06), 0px 1px 2px -1px rgba(0, 0, 0, 0.06));
 
+		&--rounded-shaped {
+			border-start-start-radius: var(--origam-audio---border-radius, var(--origam-radius---lg, 12px));
+			border-start-end-radius: 0;
+			border-end-start-radius: 0;
+			border-end-end-radius: var(--origam-audio---border-radius, var(--origam-radius---lg, 12px));
+		}
+
+		&--rounded-shaped-invert {
+			border-start-start-radius: 0;
+			border-start-end-radius: var(--origam-audio---border-radius, var(--origam-radius---lg, 12px));
+			border-end-start-radius: var(--origam-audio---border-radius, var(--origam-radius---lg, 12px));
+			border-end-end-radius: 0;
+		}
+
+		&__controller {
+			flex: 1 1 auto;
+			min-height: 0;
+
+			:deep(.origam-media-controller__progress-row) {
+				flex: 1 1 auto;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+			}
+
+			:deep(.origam-media-controller__buttons-row) {
+				margin-block-start: auto;
+			}
+		}
+
 		:deep(.origam-slider-field--bare) {
 			color: inherit !important;
 		}
@@ -727,6 +784,13 @@ defineExpose({
 				0 4px 12px rgba(0, 0, 0, 0.28),
 				inset 0 0 0 1px rgba(0, 0, 0, 0.4);
 
+			/*
+			 * Vinyl body fallback — a fixed dark disc behind the album art so a
+			 * transparent / not-yet-loaded image never lets the surface colour
+			 * bleed through the record.
+			 */
+			background: var(--origam-audio__cover---background, #18181b);
+
 			/*
 			 * Spindle hole — a real transparent dot punched THROUGH the
 			 * whole disc (image + grooves + label) so the audio shell
@@ -1275,7 +1339,14 @@ defineExpose({
 			--origam-audio---position: relative;
 			overflow: hidden;
 
-			#{$this}__cover-img {
+			/*
+			 * Size the DISC (not the inner image) for compact. Sizing only
+			 * `__cover-img` left the disc at its base 96px with a 48px image
+			 * centred inside, so the exposed outer ring rendered as a large
+			 * "floating grooves" disc (and bled the surface colour through).
+			 * The image fills the disc via its base `width/height: 100%`.
+			 */
+			#{$this}__cover {
 				width: var(--origam-audio--compact__cover---size, 48px);
 				height: var(--origam-audio--compact__cover---size, 48px);
 			}

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

@@ -45,7 +45,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamIcon, OrigamImg } from "../../components";
 import {
   useActive,
@@ -55,13 +55,12 @@ import {
   useProps,
   useSize,
   useStateEffect,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
 import { isEmpty } from "../../utils";
 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 },
@@ -104,7 +103,12 @@ const _props = defineProps({
   elevation: { type: [Number, String], required: false },
   hover: { type: [Boolean, Object], required: false },
   active: { type: [Boolean, Object], required: false },
-  activeClass: { type: String, required: false }
+  activeClass: { type: String, 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 props = useDefaults(_props);
 defineEmits(["update:active", "update:hover"]);
@@ -112,6 +116,7 @@ const { filterProps } = useProps(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 { typographyStyles } = useTypography(props, "avatar");
 const slots = useSlots();
 const hasImage = computed(() => {
   return !isEmpty(props.image) || slots.image;
@@ -145,16 +150,13 @@ const avatarStyles = computed(() => {
     sizeStyles.value,
     colorStyles.value,
     elevationStyles.value,
+    typographyStyles.value,
     props.style
   ];
 });
 const avatarClasses = computed(() => {
   return [
     "origam-avatar",
-    {
-      "origam-avatar--start": props.start,
-      "origam-avatar--end": props.end
-    },
     colorClasses.value,
     densityClasses.value,
     roundedClasses.value,

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

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			v-click-outside="clickOutsideArgs"
 			:class="avatarGroupClasses"
 			:style="avatarGroupStyles"
 			role="group"
@@ -19,7 +20,6 @@
 				>
 					<origam-avatar
 							:id="`avatar-${index}`"
-							ref="origamAvatarRef"
 							class="origam-avatar-group__item"
 							v-bind="avatarProps(item)"
 					/>
@@ -32,7 +32,6 @@
 						v-bind="{rest: restItems, length: restItems.length}"
 				>
 					<origam-avatar
-							ref="origamAvatarRef"
 							class="origam-avatar-group__rest"
 							v-bind="avatarProps()"
 					>
@@ -48,9 +47,10 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamAvatar, OrigamDefaultsProvider } from "../../components";
 import { useActive, useDensity, useHover, useProps, useRtl, useStateEffect, useStyle } from "../../composables";
+import { vClickOutside } from "../../directives";
 import { DIRECTION } from "../../enums";
 import { computed, mergeProps, ref } from "vue";
 const props = defineProps({
@@ -105,7 +105,12 @@ const slotDefaults = computed(() => ({
     density: props.density,
     size: props.size,
     color: props.color,
-    bgColor: props.bgColor
+    bgColor: props.bgColor,
+    rounded: props.rounded,
+    elevation: props.elevation,
+    border: props.border,
+    borderColor: props.borderColor,
+    borderStyle: props.borderStyle
   }
 }));
 defineEmits(["update:active", "update:hover"]);
@@ -132,11 +137,14 @@ const displayItems = computed(() => {
 });
 const { hoverClasses, hoverState, isHover, onMouseleave, onMouseenter } = useHover(props);
 const { activeClasses, activeState, isActive, onActive } = useActive(props);
-const origamAvatarRef = ref();
+const forwardState = (state, isOn) => {
+  return state && typeof state === "object" ? { ...state, enabled: isOn } : isOn;
+};
 const avatarProps = (item = {}) => {
-  const ignoreProps = ["margin", "marginLeft", "marginTop", "marginRight", "marginBottom", "padding", "paddingLeft", "paddingTop", "paddingRight", "paddingBottom"];
-  const avatarDefaultProps = origamAvatarRef.value?.[0]?.filterProps(props, ignoreProps) || origamAvatarRef.value?.filterProps(props, ignoreProps);
-  return mergeProps(item, avatarDefaultProps, { hover: isHover.value, active: isActive.value });
+  return mergeProps(item, {
+    hover: forwardState(props.hover, isHover.value),
+    active: forwardState(props.active, isActive.value)
+  });
 };
 const handleMouseEnter = () => {
   if (props.expandOnHover) {
@@ -156,6 +164,16 @@ const handleClick = () => {
   }
   onActive();
 };
+const handleClickOutside = () => {
+  isExpanded.value = false;
+  if (isActive.value) {
+    onActive();
+  }
+};
+const clickOutsideArgs = {
+  handler: handleClickOutside,
+  closeConditional: () => Boolean(props.expandOnClick) && isActive.value
+};
 const {
   marginClasses,
   marginStyles,