origam 2.16.0 → 2.17.1

package/dist/src/components/Bracket/OrigamBracketMatch.vue

@@ -92,9 +92,15 @@
 import { computed, onBeforeUnmount, onMounted, ref, StyleValue, watch } from "vue";
 import OrigamBracketCompetitor from "./OrigamBracketCompetitor.vue";
 import OrigamDivider from "../Divider/OrigamDivider.vue";
-import { useActive, useDensity, useDimension, useHover, useMargin, usePadding, useProps } from "../../composables";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
 import { bracketSurfaceVars, resolveBracketForeground } from "../../utils/Bracket/bracket-surface.util";
-import { BRACKET_MATCH_STATUS } from "../../enums";
+import { BRACKET_MATCH_STATUS } from "../../enums/Bracket/bracket-match.enum";
 const props = defineProps({
   match: { type: Object, required: true },
   status: { type: null, required: false },
@@ -110,6 +116,7 @@ const props = defineProps({
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true, default: "primary" },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
@@ -157,17 +164,18 @@ const emit = defineEmits(["click", "competitor-click", "winner-click", "update:a
 defineSlots();
 const { filterProps } = useProps(props);
 const resolvedStatus = computed(() => props.status ?? props.match.status);
-const STATUS_LABELS = {
-  [BRACKET_MATCH_STATUS.PENDING]: "TBD",
-  [BRACKET_MATCH_STATUS.LIVE]: "LIVE",
-  [BRACKET_MATCH_STATUS.COMPLETED]: "Completed",
-  [BRACKET_MATCH_STATUS.FORFEITED]: "Forfeit"
-};
+const { t } = useLocale();
+const statusLabels = computed(() => ({
+  [BRACKET_MATCH_STATUS.PENDING]: t("origam.bracket.status.pending"),
+  [BRACKET_MATCH_STATUS.LIVE]: t("origam.bracket.status.live"),
+  [BRACKET_MATCH_STATUS.COMPLETED]: t("origam.bracket.status.completed"),
+  [BRACKET_MATCH_STATUS.FORFEITED]: t("origam.bracket.status.forfeited")
+}));
 const statusLabel = computed(() => {
   if (!resolvedStatus.value) return "";
-  return STATUS_LABELS[resolvedStatus.value] ?? resolvedStatus.value;
+  return statusLabels.value[resolvedStatus.value] ?? resolvedStatus.value;
 });
-const watchLabel = "Watch live";
+const watchLabel = computed(() => t("origam.bracket.watch_live"));
 const statusClasses = computed(() => {
   return [
     "origam-bracket-match__status",
@@ -205,9 +213,9 @@ const advantageFor = (competitor) => {
 const advantageA = computed(() => advantageFor(props.match.competitorA));
 const advantageB = computed(() => advantageFor(props.match.competitorB));
 const ariaLabel = computed(() => {
-  const a = props.match.competitorA?.name ?? "TBD";
-  const b = props.match.competitorB?.name ?? "TBD";
-  return `Match: ${a} versus ${b}`;
+  const a = props.match.competitorA?.name ?? t("origam.bracket.tbd");
+  const b = props.match.competitorB?.name ?? t("origam.bracket.tbd");
+  return t("origam.bracket.match_aria_label", a, b);
 });
 const handleMatchClick = (event) => {
   onActive();
@@ -223,8 +231,8 @@ const handleCompetitorClick = (event, competitor, side) => {
   }
 };
 const matchRef = ref(null);
-const { hoverClasses, isHover, hoverState, onMouseenter, onMouseleave } = useHover(props);
-const { activeClasses, isActive, activeState, onActive } = useActive(props);
+const { classes: hoverClasses, isOn: isHover, config: hoverState, set: onMouseenter, unset: onMouseleave } = useStateFlag(props, { state: "hover" });
+const { classes: activeClasses, isOn: isActive, config: activeState, toggle: onActive } = useStateFlag(props, { state: "active" });
 const isLive = computed(() => resolvedStatus.value === BRACKET_MATCH_STATUS.LIVE);
 const isActiveOrLive = computed(() => isActive.value || isLive.value);
 const surfaceInput = computed(() => {
@@ -361,11 +369,11 @@ defineExpose({
 			}
 
 			&--pending {
-				color: var(--origam-color__text---tertiary, rgba(0, 0, 0, 0.5));
+				color: var(--origam-color__text---tertiary, var(--origam-color__text---secondary));
 			}
 
 			&--live {
-				color: var(--origam-color__feedback--danger---bg, #d32f2f);
+				color: var(--origam-color__feedback--danger---fgSubtle, #d32f2f);
 
 				&::before {
 					box-shadow: 0 0 0 0 currentColor;
@@ -374,11 +382,11 @@ defineExpose({
 			}
 
 			&--completed {
-				color: var(--origam-color__feedback--success---bg, #2e7d32);
+				color: var(--origam-color__feedback--success---fgSubtle, #2e7d32);
 			}
 
 			&--forfeited {
-				color: var(--origam-color__feedback--warning---bg, #ed6c02);
+				color: var(--origam-color__feedback--warning---fgSubtle, #b45309);
 			}
 		}
 
@@ -386,7 +394,7 @@ defineExpose({
 			display: inline-flex;
 			align-items: center;
 			gap: 2px;
-			color: var(--origam-color__feedback--danger---bg, #d32f2f);
+			color: var(--origam-color__feedback--danger---fgSubtle, #d32f2f);
 			font-weight: 600;
 			text-decoration: none;
 
@@ -400,7 +408,7 @@ defineExpose({
 		}
 
 		&__schedule {
-			color: var(--origam-color__text---tertiary, rgba(0, 0, 0, 0.5));
+			color: var(--origam-color__text---tertiary, var(--origam-color__text---secondary));
 		}
 
 		&__body {
@@ -422,6 +430,20 @@ defineExpose({
 			opacity: 0.95;
 		}
 
+		// #511 — `origam-bracket-match--final` was posed on `is-final` matches
+		// (OrigamBracketRound.vue wires it for the last match of the last
+		// round) with NO matching rule: a final rendered pixel-identical to
+		// any other match. Follows the same `--{state}---{prop}` var grammar
+		// as `&--hover` above; the fallback chain matches the token #436
+		// proposed (`color.surface.raised`) plus a primary-accent border/
+		// shadow so a final is visually distinguishable even before that
+		// component-token file exists.
+		&--final {
+			background-color: var(--origam-bracket-match--final---background-color, var(--origam-color__surface---raised, #fff));
+			border-color: var(--origam-bracket-match--final---border-color, var(--origam-color__action--primary---bg, #7c3aed));
+			box-shadow: var(--origam-bracket-match--final---box-shadow, 0 2px 8px rgba(124, 58, 237, 0.24));
+		}
+
 		&--density-compact {
 			--origam-bracket-match---min-height: 56px;
 			--origam-bracket-competitor---height: 28px;

package/dist/src/components/Bracket/OrigamBracketRound.vue

@@ -32,7 +32,7 @@
 			>
 				<origam-bracket-match
 						:key="match.id"
-						:color="color"
+						:color="matchColor"
 						:data-cy="`origam-bracket-match-${match.id}`"
 						:data-match-id="match.id"
 						:interactive="interactive"
@@ -44,7 +44,17 @@
 						@click="onMatchClick"
 						@competitor-click="onCompetitorClick"
 						@winner-click="onWinnerClick"
-				/>
+				>
+					<template
+							v-if="$slots.competitor"
+							#competitor="scope"
+					>
+						<slot
+								name="competitor"
+								v-bind="scope"
+						/>
+					</template>
+				</origam-bracket-match>
 			</slot>
 		</div>
 	</component>
@@ -53,8 +63,10 @@
 <script lang="ts" setup>
 import { computed, StyleValue } from "vue";
 import OrigamBracketMatch from "./OrigamBracketMatch.vue";
-import { useProps, useTypography } from "../../composables";
-import { DIRECTION } from "../../enums";
+import { usePassedProps } from "../../composables/Commons/passedProps.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
+import { DIRECTION } from "../../enums/Commons/direction.enum";
 const props = defineProps({
   round: { type: Object, required: true },
   index: { type: Number, required: true },
@@ -69,10 +81,8 @@ const props = defineProps({
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   tag: { type: String, required: false, default: "div" },
   direction: { type: null, required: false, default: DIRECTION.HORIZONTAL },
-  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 }
 });
 const emit = defineEmits(["match-click", "competitor-click", "winner-click"]);
@@ -81,6 +91,8 @@ const { filterProps } = useProps(props);
 const { typographyStyles } = useTypography(props, "bracket-round-title");
 const resolvedId = computed(() => props.id ?? `origam-bracket-round-${props.round.id}`);
 const titleId = computed(() => `${resolvedId.value}-title`);
+const wasPropPassed = usePassedProps(props);
+const matchColor = computed(() => wasPropPassed("color") ? props.color : void 0);
 const isFinalRound = computed(() => props.index === props.totalRounds - 1);
 const onMatchClick = (match, event) => {
   emit("match-click", match, event);

package/dist/src/components/Breadcrumb/OrigamBreadcrumb.vue

@@ -3,7 +3,7 @@
 			:is="tag"
 			:id="id"
 			v-contrast
-			:aria-label="t('origam.breadcrumb.aria_label', 'Breadcrumb')"
+			:aria-label="t('origam.breadcrumb.aria_label')"
 			:class="breadcrumbClasses"
 	>
 		<origam-defaults-provider :defaults="slotDefaults">
@@ -52,18 +52,18 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamBreadcrumbDivider, OrigamBreadcrumbItem, OrigamDefaultsProvider } from "../../components";
-import {
-  useDensity,
-  useLocale,
-  usePassedProps,
-  useProps,
-  useStateEffect,
-  useStyle
-} from "../../composables";
-import { vContrast } from "../../directives";
-import { omitUndefined } from "../../utils";
-import { DENSITY } from "../../enums";
+import OrigamBreadcrumbDivider from "./OrigamBreadcrumbDivider.vue";
+import OrigamBreadcrumbItem from "./OrigamBreadcrumbItem.vue";
+import OrigamDefaultsProvider from "../DefaultsProvider/OrigamDefaultsProvider.vue";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { usePassedProps } from "../../composables/Commons/passedProps.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import vContrast from "../../directives/Contrast/contrast.directive";
+import { omitUndefined } from "../../utils/Commons/commons.util";
+import { DENSITY } from "../../enums/Commons/density.enum";
 import { computed, StyleValue, useSlots } from "vue";
 const props = defineProps({
   disabled: { type: Boolean, required: false },
@@ -110,10 +110,12 @@ const props = defineProps({
   borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   elevation: { type: [Number, String], required: false },
   hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
+defineEmits([]);
 defineSlots();
 const { t } = useLocale();
 const wasPropPassed = usePassedProps(props);
@@ -124,16 +126,24 @@ const slotDefaults = computed(() => ({
     bgColor: wasPropPassed("bgColor") ? props.bgColor : void 0,
     hover: wasPropPassed("hover") ? props.hover : void 0,
     active: wasPropPassed("active") ? props.active : void 0,
+    hoverClass: wasPropPassed("hoverClass") ? props.hoverClass : void 0,
+    activeClass: wasPropPassed("activeClass") ? props.activeClass : void 0,
     disabled: wasPropPassed("disabled") ? props.disabled : void 0
   })
 }));
 const { colorClasses, colorStyles, borderClasses, borderStyles, roundedClasses, roundedStyles, elevationClasses, elevationStyles, paddingClasses, paddingStyles, marginClasses, marginStyles } = useStateEffect(props, void 0, void 0, void 0, void 0, computed(() => !!props.disabled));
+const resolveActive = (item, index) => {
+  if (!isLastItem(index)) return false;
+  const ownConfig = typeof item === "string" ? void 0 : item.active;
+  const config = ownConfig !== void 0 ? ownConfig : wasPropPassed("active") ? props.active : void 0;
+  return config && typeof config === "object" ? { ...config, enabled: true } : true;
+};
 const normalizedItems = computed(() => {
   return props.items.map((item, index) => {
-    return typeof item === "string" ? { title: item, disabled: isLastItem(index), active: isLastItem(index) } : {
+    return typeof item === "string" ? { title: item, disabled: isLastItem(index), active: resolveActive(item, index) } : {
       ...item,
       disabled: isLastItem(index) || item.disabled,
-      active: isLastItem(index)
+      active: resolveActive(item, index)
     };
   });
 });
@@ -169,7 +179,7 @@ const breadcrumbClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(breadcrumbStyles);
+const { id, css, load, isLoaded, unload } = useStyle(breadcrumbStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -187,25 +197,18 @@ defineExpose({
 		--origam-breadcrumb---border-bottom-width: 0px;
 		--origam-breadcrumb---border-right-width: 0px;
 		--origam-breadcrumb---border-width: var(--origam-breadcrumb---border-top-width) var(--origam-breadcrumb---border-left-width) var(--origam-breadcrumb---border-bottom-width) var(--origam-breadcrumb---border-right-width);
-		--origam-breadcrumb---border-color: currentColor;
-		--origam-breadcrumb---border-style: solid;
-		--origam-breadcrumb---border-radius: var(--origam-breadcrumb---border-radius-token, 0px);
 		--origam-breadcrumb---density: 0px;
-		--origam-breadcrumb---box-shadow: var(--origam-shadow---none, none);
-		--origam-breadcrumb---color: var(--origam-breadcrumb---color-token, var(--origam-color__text---primary));
-		--origam-breadcrumb---background: var(--origam-breadcrumb---background-token, transparent);
 		--origam-breadcrumb---margin-inline-start: 0px;
 		--origam-breadcrumb---margin-inline-end: 0px;
 		--origam-breadcrumb---margin-block-start: 0px;
 		--origam-breadcrumb---margin-block-end: 0px;
-		--origam-breadcrumb---padding-block-start: 8px;
-		--origam-breadcrumb---padding-block-end: 8px;
-		--origam-breadcrumb---padding-inline-start: 8px;
-		--origam-breadcrumb---padding-inline-end: 8px;
-		--origam-breadcrumb---transition-duration: 0.2s, 0.1s;
-		--origam-breadcrumb---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-		--origam-breadcrumb---transition-property: transform, color;
-		--origam-breadcrumb---transition: var(--origam-breadcrumb---transition-property) var(--origam-breadcrumb---transition-duration) var(--origam-breadcrumb---transition-timing-function);
+		--origam-breadcrumb---padding-block-start: var(--origam-breadcrumb---padding-block, 8px);
+		--origam-breadcrumb---padding-block-end: var(--origam-breadcrumb---padding-block, 8px);
+		--origam-breadcrumb---padding-inline-start: var(--origam-breadcrumb---padding-inline, 8px);
+		--origam-breadcrumb---padding-inline-end: var(--origam-breadcrumb---padding-inline, 8px);
+		--origam-breadcrumb---transition:
+			transform var(--origam-breadcrumb---transition-duration-transform) var(--origam-breadcrumb---transition-timing-function),
+			color var(--origam-breadcrumb---transition-duration-color) var(--origam-breadcrumb---transition-timing-function);
 
 		transition: var(--origam-breadcrumb---transition);
 
@@ -231,6 +234,7 @@ defineExpose({
 		&__items {
 			display: flex;
 			align-items: center;
+			gap: var(--origam-breadcrumb---gap);
 			line-height: 1.6;
 			list-style: none;
 			margin-block: 0;
@@ -243,7 +247,7 @@ defineExpose({
 		}
 
 		&--elevated {
-			--origam-breadcrumb---box-shadow: var(--origam-shadow---md, 0px 6px 24px 0px rgba(0,0,0,0.05), 0px 0px 0px 1px rgba(0,0,0,0.08));
+			--origam-breadcrumb---box-shadow: var(--origam-breadcrumb---box-shadow-elevated, var(--origam-shadow---md, 0px 6px 24px 0px rgba(0,0,0,0.05), 0px 0px 0px 1px rgba(0,0,0,0.08)));
 		}
 
 		&--border {
@@ -251,7 +255,7 @@ defineExpose({
 		}
 
 		&--rounded {
-			border-radius: var(--origam-radius---2xl, 24px);
+			border-radius: var(--origam-breadcrumb---border-radius-rounded, var(--origam-radius---2xl, 24px));
 		}
 
 		&--rounded-x-small {

package/dist/src/components/Breadcrumb/OrigamBreadcrumbDivider.vue

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			v-contrast
 			:class="breadcrumbDividerClasses"
 			:style="breadcrumbDividerStyles"
@@ -17,10 +18,16 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamIcon } from "../../components";
-import { useBothColor, useDensity, useMargin, usePadding, useProps, useSize, useStyle } from "../../composables";
-import { vContrast } from "../../directives";
-import { MDI_ICONS } from "../../enums";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useSize } from "../../composables/Commons/size.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import vContrast from "../../directives/Contrast/contrast.directive";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
 import { computed, StyleValue, toRef } from "vue";
 const props = defineProps({
   divider: { type: null, required: true, default: "/" },
@@ -48,6 +55,7 @@ const props = defineProps({
   size: { type: null, required: false }
 });
 const { filterProps } = useProps(props);
+defineEmits([]);
 defineSlots();
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const isIcon = computed(() => {
@@ -77,7 +85,7 @@ const breadcrumbDividerClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(breadcrumbDividerStyles);
+const { id, css, load, isLoaded, unload } = useStyle(breadcrumbDividerStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -95,14 +103,7 @@ defineExpose({
 		--origam-breadcrumb-divider---border-bottom-width: 0px;
 		--origam-breadcrumb-divider---border-right-width: 0px;
 		--origam-breadcrumb-divider---border-width: var(--origam-breadcrumb-divider---border-top-width) var(--origam-breadcrumb-divider---border-left-width) var(--origam-breadcrumb-divider---border-bottom-width) var(--origam-breadcrumb-divider---border-right-width);
-		--origam-breadcrumb-divider---border-color: currentColor;
-		--origam-breadcrumb-divider---border-style: solid;
-		--origam-breadcrumb-divider---border-radius: 0px;
 		--origam-breadcrumb-divider---density: 0px;
-		--origam-breadcrumb-divider---box-shadow: var(--origam-shadow---none, none);
-		--origam-breadcrumb-divider---color: var(--origam-breadcrumb-divider---color-token, inherit);
-		--origam-breadcrumb-divider---opacity: 1;
-		--origam-breadcrumb-divider---background: transparent;
 		--origam-breadcrumb-divider---margin-inline-start: 0px;
 		--origam-breadcrumb-divider---margin-inline-end: 0px;
 		--origam-breadcrumb-divider---margin-block-start: 0px;
@@ -111,10 +112,9 @@ defineExpose({
 		--origam-breadcrumb-divider---padding-block-end: 0px;
 		--origam-breadcrumb-divider---padding-inline-start: var(--origam-breadcrumb-divider---padding-inline, 8px);
 		--origam-breadcrumb-divider---padding-inline-end: var(--origam-breadcrumb-divider---padding-inline, 8px);
-		--origam-breadcrumb-divider---transition-duration: 0.2s, 0.1s;
-		--origam-breadcrumb-divider---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-		--origam-breadcrumb-divider---transition-property: transform, color;
-		--origam-breadcrumb-divider---transition: var(--origam-breadcrumb-divider---transition-property) var(--origam-breadcrumb-divider---transition-duration) var(--origam-breadcrumb-divider---transition-timing-function);
+		--origam-breadcrumb-divider---transition:
+			transform var(--origam-breadcrumb-divider---transition-duration-transform) var(--origam-breadcrumb-divider---transition-timing-function),
+			color var(--origam-breadcrumb-divider---transition-duration-color) var(--origam-breadcrumb-divider---transition-timing-function);
 
 		display: inline-block;
 		vertical-align: middle;

package/dist/src/components/Breadcrumb/OrigamBreadcrumbItem.vue

@@ -1,6 +1,7 @@
 <template>
 	<component
-			:is="link.tag"
+			:is="link.tag.value"
+			:id="id"
 			v-contrast
 			:aria-current="isActive ? 'page' : undefined"
 			:class="breadcrumbItemClasses"
@@ -14,7 +15,10 @@
       <span
 		      key="prepend"
 		      class="origam-breadcrumb-item__prepend"
+		      :role="isPrependZoneFocusable ? 'button' : undefined"
+		      :tabindex="isPrependZoneFocusable ? 0 : undefined"
 		      @click="handleClickPrepend"
+		      @keydown="handleKeydownPrepend"
       >
         <slot name="prepend">
           <origam-avatar
@@ -41,7 +45,10 @@
       <span
 		      key="append"
 		      class="origam-breadcrumb-item__append"
+		      :role="isAppendZoneFocusable ? 'button' : undefined"
+		      :tabindex="isAppendZoneFocusable ? 0 : undefined"
 		      @click="handleClickAppend"
+		      @keydown="handleKeydownAppend"
       >
        <slot name="append">
          <origam-avatar
@@ -63,22 +70,19 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamAvatar, OrigamIcon } from "../../components";
-import { vContrast } from "../../directives";
-import {
-  useActive,
-  useAdjacent,
-  useDefaults,
-  useDensity,
-  useHover,
-  useLink,
-  useProps,
-  useStateEffect,
-  useStyle
-} from "../../composables";
-import { DENSITY } from "../../enums";
+import OrigamAvatar from "../Avatar/OrigamAvatar.vue";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import vContrast from "../../directives/Contrast/contrast.directive";
+import { useAdjacent } from "../../composables/Commons/adjacent.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useLink } from "../../composables/Commons/link.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 { DENSITY } from "../../enums/Commons/density.enum";
 import { computed, ComputedRef, StyleValue, toRef, useAttrs } from "vue";
-const _props = defineProps({
+const props = defineProps({
   title: { type: String, required: true },
   disabled: { type: Boolean, required: false },
   id: { type: String, required: false },
@@ -129,17 +133,17 @@ const _props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
   hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false }
 });
-const props = useDefaults(_props);
 defineEmits(["click:append", "click:prepend"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const attrs = useAttrs();
 const link = useLink(props, attrs);
-const { isHover, hoverState, onMouseenter: handleMouseenter, onMouseleave: handleMouseleave } = useHover(props);
-const { isActive: active, activeState, activeClasses } = useActive(props);
+const { isOn: isHover, config: hoverState, set: handleMouseenter, unset: handleMouseleave } = useStateFlag(props, { state: "hover" });
+const { isOn: active, config: activeState, classes: activeClasses } = useStateFlag(props, { state: "active" });
 const isActive = computed(() => {
   return active.value || link.isActive?.value;
 });
@@ -148,8 +152,14 @@ const {
   hasAppend,
   hasPrepend,
   onClickPrepend: handleClickPrepend,
-  onClickAppend: handleClickAppend
+  onClickAppend: handleClickAppend,
+  onKeydownPrepend: handleKeydownPrepend,
+  onKeydownAppend: handleKeydownAppend,
+  isPrependClickable,
+  isAppendClickable
 } = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));
+const isPrependZoneFocusable = computed(() => isPrependClickable.value && !link.isLink?.value);
+const isAppendZoneFocusable = computed(() => isAppendClickable.value && !link.isLink?.value);
 const { densityClasses } = useDensity(props);
 const breadcrumbItemStyles = computed(() => {
   return [
@@ -178,7 +188,7 @@ const breadcrumbItemClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(breadcrumbItemStyles);
+const { id, css, load, isLoaded, unload } = useStyle(breadcrumbItemStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -191,20 +201,12 @@ defineExpose({
 
 <style lang="scss" scoped>
 	.origam-breadcrumb-item {
-		--origam-breadcrumb-item---text-decoration: none;
 		--origam-breadcrumb-item---border-top-width: 0px;
 		--origam-breadcrumb-item---border-left-width: 0px;
 		--origam-breadcrumb-item---border-bottom-width: 0px;
 		--origam-breadcrumb-item---border-right-width: 0px;
 		--origam-breadcrumb-item---border-width: var(--origam-breadcrumb-item---border-top-width) var(--origam-breadcrumb-item---border-left-width) var(--origam-breadcrumb-item---border-bottom-width) var(--origam-breadcrumb-item---border-right-width);
-		--origam-breadcrumb-item---border-color: currentColor;
-		--origam-breadcrumb-item---border-style: solid;
-		--origam-breadcrumb-item---border-radius: 0px;
 		--origam-breadcrumb-item---density: 0px;
-		--origam-breadcrumb-item---box-shadow: var(--origam-shadow---none, none);
-		--origam-breadcrumb-item---color: var(--origam-breadcrumb-item---color-token, inherit);
-		--origam-breadcrumb-item---opacity: 1;
-		--origam-breadcrumb-item---background: transparent;
 		--origam-breadcrumb-item---margin-inline-start: 0px;
 		--origam-breadcrumb-item---margin-inline-end: 0px;
 		--origam-breadcrumb-item---margin-block-start: 0px;
@@ -213,10 +215,9 @@ defineExpose({
 		--origam-breadcrumb-item---padding-block-end: 8px;
 		--origam-breadcrumb-item---padding-inline-start: 8px;
 		--origam-breadcrumb-item---padding-inline-end: 8px;
-		--origam-breadcrumb-item---transition-duration: 0.2s, 0.1s;
-		--origam-breadcrumb-item---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-		--origam-breadcrumb-item---transition-property: transform, color;
-		--origam-breadcrumb-item---transition: var(--origam-breadcrumb-item---transition-property) var(--origam-breadcrumb-item---transition-duration) var(--origam-breadcrumb-item---transition-timing-function);
+		--origam-breadcrumb-item---transition:
+			transform var(--origam-breadcrumb-item---transition-duration-transform) var(--origam-breadcrumb-item---transition-timing-function),
+			color var(--origam-breadcrumb-item---transition-duration-color) var(--origam-breadcrumb-item---transition-timing-function);
 
 		align-items: center;
 		display: inline-flex;