origam 2.16.0 → 2.17.0

package/dist/src/components/Drawer/OrigamDrawer.vue

@@ -8,8 +8,9 @@
 			<component
 					:is="tag"
 					v-if="isActive"
+					:id="id"
 					:ref="rootEl"
-					:aria-label="props.name || 'Navigation'"
+					:aria-label="drawerAriaLabel"
 					:class="drawerClasses"
 					:style="drawerStyles"
 					v-bind="{...scopeId, ...$attrs}"
@@ -68,26 +69,25 @@ import {
   useSlots,
   watch
 } from "vue";
-import { OrigamOverlayScrim, OrigamTransition } from "../../components";
-import {
-  useActive,
-  useBackgroundColor,
-  useDensity,
-  useHover,
-  useLayoutItem,
-  useProps,
-  useRouter,
-  useScopeId,
-  useSsrBoot,
-  useStateEffect,
-  useSticky,
-  useStyle,
-  useToggleScope,
-  useTouch,
-  useVModel
-} from "../../composables";
-import { INLINE } from "../../enums";
-import { int } from "../../utils";
+import OrigamOverlayScrim from "../Overlay/OrigamOverlayScrim.vue";
+import OrigamTransition from "../Transition/OrigamTransition.vue";
+import { useBackgroundColor } from "../../composables/Commons/backgroundColor.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useLayoutItem } from "../../composables/Commons/layoutItem.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRouter } from "../../composables/Commons/router.composable";
+import { useScopeId } from "../../composables/Commons/scopeId.composable";
+import { useSsrBoot } from "../../composables/Commons/ssrBoot.composable";
+import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
+import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
+import { useSticky } from "../../composables/Commons/sticky.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useToggleScope } from "../../composables/Commons/toggleScope.composable";
+import { useTouch } from "../../composables/Commons/touch.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { INLINE } from "../../enums/Commons/anchor.enum";
+import { int } from "../../utils/Commons/commons.util";
 const props = defineProps({
   disableResizeWatcher: { type: Boolean, required: false },
   disableRouteWatcher: { type: Boolean, required: false },
@@ -148,19 +148,19 @@ const props = defineProps({
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
   transition: { type: [Boolean, String, Object], required: false, default: "origam-transition--drawer" },
-  disabled: { type: Boolean, required: false },
   scrim: { type: [Boolean, String], required: false, default: true },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
-  hover: { type: [Boolean, Object], required: false }
+  hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, required: false }
 });
-const emits = defineEmits(["update:rail"]);
+const emits = defineEmits(["update:rail", "update:modelValue"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, "bgColor"));
 const { densityClasses } = useDensity(props);
-const { isHover, hoverState } = useHover(props);
-const { activeState } = useActive(props);
+const { isOn: isHover, config: hoverState } = useStateFlag(props, { state: "hover" });
+const { config: activeState } = useStateFlag(props, { state: "active" });
 const isActive = useVModel(props, "modelValue", false, (v) => !!v);
 const {
   borderClasses,
@@ -177,10 +177,11 @@ const slots = useSlots();
 const router = useRouter();
 const { ssrBootStyles } = useSsrBoot();
 const { scopeId } = useScopeId();
+const { t } = useLocale();
 const rootEl = ref();
 const isHovering = shallowRef(false);
 const width = computed(() => {
-  return props.rail && props.expandOnHover && isHovering.value ? Number(props.width) : Number(props.rail ? props.railWidth : props.width);
+  return props.rail && props.expandOnHover && isHovering.value ? int(props.width) : int(props.rail ? props.railWidth : props.width);
 });
 const location = computed(() => {
   return props.location;
@@ -214,7 +215,7 @@ const { isDragging, dragProgress, dragStyles } = useTouch({
 });
 const layoutSize = computed(() => {
   if (!isPushing.value) return 0;
-  const size = isTemporary.value ? 0 : props.rail && props.expandOnHover ? Number(props.railWidth) : width.value;
+  const size = isTemporary.value ? 0 : props.rail && props.expandOnHover ? int(props.railWidth) : width.value;
   return isDragging.value ? size * dragProgress.value : size;
 });
 const isPushing = computed(() => {
@@ -280,6 +281,7 @@ const hasContent = computed(() => {
 const hasAppend = computed(() => {
   return slots.append;
 });
+const drawerAriaLabel = computed(() => props.name || t("origam.drawer.aria_label"));
 const drawerStyles = computed(() => {
   return [
     backgroundColorStyles.value,
@@ -317,7 +319,7 @@ const drawerClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(drawerStyles);
+const { id, css, load, isLoaded, unload } = useStyle(drawerStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -347,7 +349,7 @@ defineExpose({
 		transition-timing-function: var(--origam-drawer---transition-timing-function);
 
 		position: var(--origam-layout---position, var(--origam-drawer---position));
-		z-index: var(--origam-layout---zIndex, 1000);
+		z-index: var(--origam-layout---zIndex, var(--origam-drawer---z-index, 1000));
 
 		border-color: var(--origam-drawer---border-color);
 		border-style: var(--origam-drawer---border-style);
@@ -365,34 +367,35 @@ defineExpose({
 		color: var(--origam-drawer---color);
 
 		&--border {
-			--origam-drawer---border-top-width: thin;
-			--origam-drawer---border-right-width: thin;
-			--origam-drawer---border-bottom-width: thin;
-			--origam-drawer---border-left-width: thin;
+			--origam-drawer---border-top-width: var(--origam-drawer__border---border-width, thin);
+			--origam-drawer---border-right-width: var(--origam-drawer__border---border-width, thin);
+			--origam-drawer---border-bottom-width: var(--origam-drawer__border---border-width, thin);
+			--origam-drawer---border-left-width: var(--origam-drawer__border---border-width, thin);
+			--origam-drawer---box-shadow: var(--origam-drawer__border---box-shadow, var(--origam-shadow---none));
 		}
 
 		&--top {
 			top: 0;
-			--origam-drawer---border-bottom-width: thin;
+			--origam-drawer---border-bottom-width: var(--origam-drawer__top---border-bottom-width, thin);
 		}
 
 		&--bottom {
 			left: 0;
-			--origam-drawer---border-top-width: thin;
+			--origam-drawer---border-top-width: var(--origam-drawer__bottom---border-top-width, thin);
 		}
 
 		&--left {
 			top: 0;
 			left: 0;
 			right: auto;
-			--origam-drawer---border-right-width: thin;
+			--origam-drawer---border-right-width: var(--origam-drawer__left---border-right-width, thin);
 		}
 
 		&--right {
 			top: 0;
 			left: auto;
 			right: 0;
-			--origam-drawer---border-left-width: thin;
+			--origam-drawer---border-left-width: var(--origam-drawer__right---border-left-width, thin);
 		}
 
 		&--floating {
@@ -400,12 +403,12 @@ defineExpose({
 		}
 
 		&--temporary {
-			--origam-drawer---box-shadow: var(--origam-shadow---lg);
+			--origam-drawer---box-shadow: var(--origam-drawer__temporary---box-shadow, var(--origam-shadow---lg));
 		}
 
 		&--sticky {
-			--origam-drawer---height: auto;
-			--origam-drawer---transition-property: box-shadow, transform, visibility, width, height, left, right;
+			--origam-drawer---height: var(--origam-drawer__sticky---height, auto);
+			--origam-drawer---transition-property: var(--origam-drawer__sticky---transition-property, box-shadow, transform, visibility, width, height, left, right);
 		}
 
 		&:deep(.origam-list) {
@@ -413,20 +416,20 @@ defineExpose({
 		}
 
 		&__content {
-			flex: 0 1 auto;
-			height: 100%;
-			max-width: 100%;
-			overflow-x: hidden;
-			overflow-y: auto;
+			flex: var(--origam-drawer__content---flex, 0 1 auto);
+			height: var(--origam-drawer__content---height, 100%);
+			max-width: var(--origam-drawer__content---max-width, 100%);
+			overflow-x: var(--origam-drawer__content---overflow-x, hidden);
+			overflow-y: var(--origam-drawer__content---overflow-y, auto);
 		}
 
 		&__img {
-			height: 100%;
+			height: var(--origam-drawer__img---height, 100%);
 			left: 0;
-			position: absolute;
+			position: var(--origam-drawer__img---position, absolute);
 			top: 0;
-			width: 100%;
-			z-index: -1;
+			width: var(--origam-drawer__img---width, 100%);
+			z-index: var(--origam-drawer__img---z-index, -1);
 
 			img {
 				height: inherit;
@@ -446,7 +449,7 @@ defineExpose({
 			transition-property: var(--origam-drawer__scrim---transition-property, opacity);
 			transition-duration: var(--origam-drawer__scrim---transition-duration, var(--origam-motion__duration---medium));
 			transition-timing-function: var(--origam-drawer__scrim---transition-timing-function, var(--origam-motion__easing---standard));
-			z-index: var(--origam-drawer__scrim---z-index, var(--origam-z-index-raised));
+			z-index: var(--origam-drawer__scrim---z-index, var(--origam-zIndex---raised));
 		}
 
 		&__prepend,

package/dist/src/components/EmptyState/OrigamEmptyState.vue

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			:class="emptyStateClasses"
 			:style="emptyStateStyles"
 			role="status"
@@ -54,7 +55,7 @@ import {
   useSlots
 } from "vue";
 import { OrigamIcon } from "../Icon";
-import { useTypography } from "../../composables";
+import { useTypography } from "../../composables/Commons/typography.composable";
 import { EMPTY_STATE_PRESET_CONFIG } from "../../consts/EmptyState/empty-state.const";
 const props = defineProps({
   preset: { type: null, required: false, default: "no-data" },
@@ -71,9 +72,9 @@ const props = defineProps({
   fontFamily: { type: null, required: false },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
-  lineHeight: { type: null, required: false },
-  letterSpacing: { type: null, required: false }
+  lineHeight: { type: null, required: false }
 });
+defineEmits([]);
 defineSlots();
 const slots = useSlots();
 const presetConfig = computed(() => EMPTY_STATE_PRESET_CONFIG[props.preset]);
@@ -137,6 +138,7 @@ defineExpose({
 		color: var(--origam-empty-state---resolved-icon-color);
 		font-size: var(--origam-empty-state---resolved-icon-size);
 		line-height: 1;
+		margin-bottom: var(--origam-empty-state__icon---margin-bottom, 0);
 	}
 
 	.origam-empty-state__icon-glyph {

package/dist/src/components/ExpansionPanel/OrigamExpansionPanel.vue

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			v-contrast
 			:class="expansionPanelClasses"
 			:style="expansionPanelStyles"
@@ -20,6 +21,7 @@
 							:model-value="loaderConfig.modelValue"
 							:type="loaderConfig.kind === 'circular' ? PROGRESS_TYPE.CIRCULAR : PROGRESS_TYPE.LINEAR"
 							:class="expansionPanelProgressClasses"
+							:label="loadingText"
 							thickness="4"
 							v-bind="loaderConfig.overrides"
 					/>
@@ -103,23 +105,22 @@
 
 <script lang="ts" setup>
 import { computed, provide, ref, StyleValue, toRef, useSlots } from "vue";
-import { OrigamExpansionPanelContent, OrigamExpansionPanelHeader, OrigamProgress } from "../../components";
-import {
-  useActive,
-  useBothColor,
-  useDefaults,
-  useDensity,
-  useGroupItem,
-  useHover,
-  useLoader,
-  useProps,
-  useStateEffect,
-  useStyle
-} from "../../composables";
-import { vContrast } from "../../directives";
-import { ORIGAM_EXPANSION_PANEL_KEY } from "../../consts";
-import { LOADER_KIND, PROGRESS_TYPE } from "../../enums";
-const _props = defineProps({
+import OrigamExpansionPanelContent from "./OrigamExpansionPanelContent.vue";
+import OrigamExpansionPanelHeader from "./OrigamExpansionPanelHeader.vue";
+import OrigamProgress from "../Progress/OrigamProgress.vue";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useGroupItem } from "../../composables/Commons/groupItem.composable";
+import { useLoader } from "../../composables/Commons/loader.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
+import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import vContrast from "../../directives/Contrast/contrast.directive";
+import { ORIGAM_EXPANSION_PANEL_KEY } from "../../consts/ExpansionPanel/expansion-panel.const";
+import { LOADER_KIND } from "../../enums/Commons/loader.enum";
+import { PROGRESS_TYPE } from "../../enums/Progress/progress.enum";
+const props = defineProps({
   tag: { type: String, required: false, default: "div" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -178,17 +179,14 @@ const _props = defineProps({
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
-  fontFamily: { type: null, required: false },
+  hoverClass: { type: String, required: false },
   fontSize: { type: null, required: false },
-  fontWeight: { type: null, required: false },
   lineHeight: { type: null, required: false },
-  letterSpacing: { type: null, required: false },
   content: { type: null, required: false },
   eager: { type: Boolean, required: false },
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false }
 });
-const props = useDefaults(_props);
 defineEmits(["group:selected"]);
 defineSlots();
 const { filterProps } = useProps(props);
@@ -223,15 +221,17 @@ const isAfterSelected = computed(() => {
     return selectedIndex - index === -1;
   });
 });
+const headerId = ref();
+const contentId = ref();
 if (groupItem !== null) {
-  provide(ORIGAM_EXPANSION_PANEL_KEY, groupItem);
+  provide(ORIGAM_EXPANSION_PANEL_KEY, { ...groupItem, headerId, contentId });
 }
 const { loaderClasses, loaderConfig } = useLoader(props, LOADER_KIND.LINE);
 const hasLoading = computed(() => {
   return slots.loader || loaderConfig.value.isActive;
 });
 const hasContent = computed(() => {
-  return slots.content || !!props.content;
+  return slots.default || !!props.content;
 });
 const hasHeader = computed(() => {
   return slots.header || slots.title || slots.prepend || slots.append || !!props.title;
@@ -243,8 +243,8 @@ const expansionPanelContentProps = computed(() => {
   return origamExpansionPanelContentRef.value?.filterProps(props, ["class", "id", "style", "tag"]);
 });
 const { densityClasses } = useDensity(props);
-const { isHover, hoverState } = useHover(props);
-const { isActive, activeState } = useActive(props);
+const { isOn: isHover, config: hoverState } = useStateFlag(props, { state: "hover" });
+const { isOn: isActive, config: activeState } = useStateFlag(props, { state: "active" });
 const {
   borderClasses,
   borderStyles,
@@ -293,7 +293,7 @@ const expansionPanelClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(expansionPanelStyles);
+const { id, css, load, isLoaded, unload } = useStyle(expansionPanelStyles, () => props.id);
 defineExpose({
   filterProps,
   css,

package/dist/src/components/ExpansionPanel/OrigamExpansionPanelContent.vue

@@ -3,9 +3,9 @@
 		<component
 				:is="tag"
 				v-show="isSelected"
-				:id="`expansion-panel-content-${expansionPanel.id}`"
+				:id="contentDomId"
 				v-contrast
-				:aria-labelledby="`expansion-panel-header-${expansionPanel.id}`"
+				:aria-labelledby="expansionPanel.headerId.value"
 				:class="expansionPanelContentClasses"
 				:style="expansionPanelContentStyles"
 				role="region"
@@ -13,9 +13,9 @@
 			<div class="origam-expansion-panel-content__wrapper">
 				<template v-if="loaderConfig.isActive && loaderConfig.kind === 'skeleton'">
 					<slot name="loader">
-						<origam-skeleton variant="text" :loading="true" v-bind="loaderConfig.overrides"/>
-						<origam-skeleton variant="text" :loading="true" v-bind="loaderConfig.overrides"/>
-						<origam-skeleton variant="text" :loading="true" v-bind="loaderConfig.overrides"/>
+						<origam-skeleton variant="text" :loading="true" :label="loadingText" v-bind="loaderConfig.overrides"/>
+						<origam-skeleton variant="text" :loading="true" :label="loadingText" v-bind="loaderConfig.overrides"/>
+						<origam-skeleton variant="text" :loading="true" :label="loadingText" v-bind="loaderConfig.overrides"/>
 					</slot>
 				</template>
 
@@ -27,6 +27,7 @@
 								:model-value="loaderConfig.modelValue"
 								:type="loaderConfig.kind === 'circular' ? PROGRESS_TYPE.CIRCULAR : PROGRESS_TYPE.LINEAR"
 								:class="expansionPanelContentProgressClasses"
+								:label="loadingText"
 								thickness="4"
 								v-bind="loaderConfig.overrides"
 						/>
@@ -52,23 +53,24 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, StyleValue, toRef } from "vue";
-import { OrigamExpandY, OrigamProgress, OrigamSkeleton } from "../../components";
-import { vContrast } from "../../directives";
-import {
-  useBorder,
-  useBothColor,
-  useDensity,
-  useLazy,
-  useLoader,
-  useMargin,
-  usePadding,
-  useProps,
-  useRounded,
-  useStyle
-} from "../../composables";
-import { LOADER_KIND, PROGRESS_TYPE } from "../../enums";
-import { ORIGAM_EXPANSION_PANEL_KEY } from "../../consts";
+import { computed, inject, StyleValue, toRef, watchEffect } from "vue";
+import OrigamExpandY from "../Transition/OrigamExpandY.vue";
+import OrigamProgress from "../Progress/OrigamProgress.vue";
+import OrigamSkeleton from "../Skeleton/OrigamSkeleton.vue";
+import vContrast from "../../directives/Contrast/contrast.directive";
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useLazy } from "../../composables/Commons/lazy.composable";
+import { useLoader } from "../../composables/Commons/loader.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { LOADER_KIND } from "../../enums/Commons/loader.enum";
+import { PROGRESS_TYPE } from "../../enums/Progress/progress.enum";
+import { ORIGAM_EXPANSION_PANEL_KEY } from "../../consts/ExpansionPanel/expansion-panel.const";
 const props = defineProps({
   content: { type: null, required: false },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
@@ -114,10 +116,15 @@ const props = defineProps({
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false }
 });
+defineEmits([]);
 defineSlots();
 const { filterProps } = useProps(props);
 const expansionPanel = inject(ORIGAM_EXPANSION_PANEL_KEY);
 if (!expansionPanel) throw new Error("[Origam] expansion-panel-content needs to be placed inside expansion-panel");
+const contentDomId = computed(() => props.id || `expansion-panel-content-${expansionPanel.id}`);
+watchEffect(() => {
+  expansionPanel.contentId.value = contentDomId.value;
+});
 const { hasContent, onAfterLeave: handleAfterLeave } = useLazy(props, expansionPanel.isSelected);
 const isSelected = computed(() => {
   return expansionPanel.isSelected.value;

package/dist/src/components/ExpansionPanel/OrigamExpansionPanelHeader.vue

@@ -1,10 +1,10 @@
 <template>
 	<component
 			:is="tag"
-			:id="`expansion-panel-header-${expansionPanel.id}`"
+			:id="headerDomId"
 			v-ripple="ripple"
 			v-contrast
-			:aria-controls="`expansion-panel-content-${expansionPanel.id}`"
+			:aria-controls="expansionPanel.contentId.value"
 			:aria-expanded="isSelected"
 			:class="expansionPanelHeaderClasses"
 			:disabled="isDisabled"
@@ -20,7 +20,10 @@
 		      v-if="hasPrepend"
 		      key="prepend"
 		      class="origam-expansion-panel-header__prepend"
+		      :role="isPrependClickable ? 'button' : undefined"
+		      :tabindex="isPrependClickable ? 0 : undefined"
 		      @click="handleClickPrepend"
+		      @keydown="handleKeydownPrepend"
       >
         <slot
 		        name="prepend"
@@ -62,7 +65,10 @@
 					v-if="hasAppend || !hideActions"
 					key="append"
 					class="origam-expansion-panel-header__append"
+					:role="isAppendClickable ? 'button' : undefined"
+					:tabindex="isAppendClickable ? 0 : undefined"
 					@click="handleClickAppend"
+					@keydown="handleKeydownAppend"
 			>
         <slot
 		        name="append"
@@ -91,22 +97,21 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, StyleValue, toRef, useSlots } from "vue";
-import { OrigamAvatar, OrigamIcon } from "../../components";
-import {
-  useActive,
-  useAdjacent,
-  useBothColor,
-  useDensity,
-  useHover,
-  useProps,
-  useStateEffect,
-  useStyle,
-  useTypography
-} from "../../composables";
-import { ORIGAM_EXPANSION_PANEL_KEY } from "../../consts";
-import { vContrast, vRipple } from "../../directives";
-import { MDI_ICONS } from "../../enums";
+import { computed, inject, StyleValue, toRef, useSlots, watchEffect } from "vue";
+import OrigamAvatar from "../Avatar/OrigamAvatar.vue";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import { useAdjacent } from "../../composables/Commons/adjacent.composable";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
+import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
+import { ORIGAM_EXPANSION_PANEL_KEY } from "../../consts/ExpansionPanel/expansion-panel.const";
+import vContrast from "../../directives/Contrast/contrast.directive";
+import vRipple from "../../directives/Ripple/ripple.directive";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
 const props = defineProps({
   expandIcon: { type: null, required: false, default: MDI_ICONS.CHEVRON_DOWN },
   collapseIcon: { type: null, required: false, default: MDI_ICONS.CHEVRON_UP },
@@ -162,11 +167,9 @@ const props = defineProps({
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
-  fontFamily: { type: null, required: false },
+  hoverClass: { type: String, required: false },
   fontSize: { type: null, required: false },
-  fontWeight: { type: null, required: false },
-  lineHeight: { type: null, required: false },
-  letterSpacing: { type: null, required: false }
+  lineHeight: { type: null, required: false }
 });
 defineEmits(["click:append", "click:prepend"]);
 defineSlots();
@@ -174,6 +177,10 @@ const { filterProps } = useProps(props);
 const expansionPanel = inject(ORIGAM_EXPANSION_PANEL_KEY);
 if (!expansionPanel) throw new Error("[Origam] expansion-panel-content needs to be placed inside expansion-panel");
 const slots = useSlots();
+const headerDomId = computed(() => props.id || `expansion-panel-header-${expansionPanel.id}`);
+watchEffect(() => {
+  expansionPanel.headerId.value = headerDomId.value;
+});
 const handleExpand = () => {
   if (!props.readonly) {
     expansionPanel.toggle();
@@ -200,12 +207,16 @@ const hasTitle = computed(() => {
 const {
   hasAppend,
   hasPrepend,
+  isPrependClickable,
+  isAppendClickable,
   onClickPrepend: handleClickPrepend,
-  onClickAppend: handleClickAppend
+  onClickAppend: handleClickAppend,
+  onKeydownPrepend: handleKeydownPrepend,
+  onKeydownAppend: handleKeydownAppend
 } = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));
 const { densityClasses } = useDensity(props);
-const { isHover, hoverState } = useHover(props);
-const { isActive, activeState } = useActive(props);
+const { isOn: isHover, config: hoverState } = useStateFlag(props, { state: "hover" });
+const { isOn: isActive, config: activeState } = useStateFlag(props, { state: "active" });
 const {
   borderClasses,
   borderStyles,
@@ -286,8 +297,8 @@ defineExpose({
 			position: var(--origam-expansion-panel__header__overlay---position, absolute);
 			top: var(--origam-expansion-panel__header__overlay---top, 0);
 			left: var(--origam-expansion-panel__header__overlay---left, 0);
-			width: 100%;
-			height: 100%;
+			width: var(--origam-expansion-panel__header__overlay---width, 100%);
+			height: var(--origam-expansion-panel__header__overlay---height, 100%);
 			background-color: currentColor;
 			border-radius: var(--origam-expansion-panel__header__overlay---border-radius, inherit);
 			opacity: var(--origam-expansion-panel__header__overlay---opacity, 0);
@@ -306,6 +317,8 @@ defineExpose({
 		}
 
 		&__prepend {
+			margin-bottom: var(--origam-expansion-panel__header__prepend---margin-block, -4px);
+			margin-top: var(--origam-expansion-panel__header__prepend---margin-block, -4px);
 			margin-inline-end: var(--origam-expansion-panel__header__prepend---margin-inline-end, 8px);
 		}