origam 2.3.0 → 2.6.1

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

@@ -9,9 +9,12 @@
 			:tabindex="interactive ? 0 : undefined"
 			@click="handleClick"
 			@keydown="handleKeydown"
+			@mouseenter="onMouseenter"
+			@mouseleave="onMouseleave"
 	>
 		<span
 				v-if="showSeed && competitor?.seed != null"
+				:style="seedTypographyStyles"
 				class="origam-bracket-competitor__seed"
 		>
 			{{ competitor.seed }}
@@ -28,8 +31,26 @@
 			{{ displayName }}
 		</span>
 
+		<span
+				v-if="forfeit"
+				class="origam-bracket-competitor__forfeit"
+		>
+			{{ forfeitLabel }}
+		</span>
+
+		<span
+				v-if="hasAdvantage"
+				:aria-label="advantageAriaLabel"
+				:style="advantageTypographyStyles"
+				:title="advantageAriaLabel"
+				class="origam-bracket-competitor__advantage"
+		>
+			{{ advantageLabel }}
+		</span>
+
 		<span
 				v-if="showScore"
+				:style="scoreTypographyStyles"
 				class="origam-bracket-competitor__score"
 		>
 			{{ displayScore }}
@@ -37,9 +58,18 @@
 	</component>
 </template>
 
-<script setup>
-import { computed, StyleValue } from "vue";
-import { useProps } from "../../composables";
+<script lang="ts" setup>
+import { computed, ComputedRef, StyleValue } from "vue";
+import {
+  useActive,
+  useDensity,
+  useDimension,
+  useHover,
+  useProps,
+  useStateEffect,
+  useTypography
+} from "../../composables";
+import { isIntent, tokenForegroundForIntent } from "../../utils/Commons/color.util";
 const props = defineProps({
   competitor: { type: [Object, null], required: true },
   score: { type: [Number, String], required: false },
@@ -48,14 +78,65 @@ const props = defineProps({
   showScore: { type: Boolean, required: false, default: true },
   showSeed: { type: Boolean, required: false, default: false },
   interactive: { type: Boolean, required: false, default: true },
-  color: { type: String, required: false, default: "primary" },
+  advantageRounds: { type: Number, required: false },
+  forfeit: { type: Boolean, 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 },
-  tag: { type: String, required: false, default: "div" }
+  tag: { type: String, required: false, default: "div" },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  hover: { type: [Boolean, Object], required: false },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: 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 },
+  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 },
+  density: { type: null, 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 },
+  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 },
+  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 },
+  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(["click"]);
 const { filterProps } = useProps(props);
+const { typographyStyles: competitorTypographyStyles } = useTypography(props, "bracket-competitor");
+const { typographyStyles: seedTypographyStyles } = useTypography(props, "bracket-seed");
+const { typographyStyles: scoreTypographyStyles } = useTypography(props, "bracket-score");
+const { typographyStyles: advantageTypographyStyles } = useTypography(props, "bracket-advantage");
 const isTbd = computed(() => props.competitor === null);
 const displayName = computed(() => {
   if (isTbd.value) return "TBD";
@@ -66,6 +147,13 @@ const displayScore = computed(() => {
   if (typeof props.score === "number") return String(props.score);
   return props.score;
 });
+const forfeitLabel = "forfeit";
+const hasAdvantage = computed(() => (props.advantageRounds ?? 0) > 0);
+const advantageLabel = computed(() => `+${props.advantageRounds ?? 0}`);
+const advantageAriaLabel = computed(() => {
+  const rounds = props.advantageRounds ?? 0;
+  return `${rounds}-round head start`;
+});
 const ariaLabel = computed(() => {
   if (isTbd.value) return "To be determined";
   const base = props.competitor.name;
@@ -75,6 +163,7 @@ const ariaLabel = computed(() => {
 });
 const handleClick = (event) => {
   if (!props.interactive) return;
+  onActive();
   emit("click", event);
 };
 const handleKeydown = (event) => {
@@ -83,19 +172,62 @@ const handleKeydown = (event) => {
   event.preventDefault();
   emit("click", event);
 };
+const { hoverClasses, isHover, hoverState, onMouseenter, onMouseleave } = useHover(props);
+const { activeClasses, isActive, activeState, onActive } = useActive(props);
+const activeNotHover = computed(() => Boolean(isActive.value) && !isHover.value);
+const {
+  colorClasses,
+  colorStyles,
+  borderClasses,
+  borderStyles,
+  roundedClasses,
+  roundedStyles,
+  elevationClasses,
+  elevationStyles,
+  paddingClasses,
+  paddingStyles,
+  marginClasses,
+  marginStyles
+} = useStateEffect(props, isHover, activeNotHover, hoverState, activeState);
+const { dimensionStyles } = useDimension(props);
+const { densityClasses } = useDensity(props, "origam-bracket-competitor");
+const borderColorStyle = computed(() => {
+  const value = props.borderColor;
+  return value && isIntent(value) ? [`border-color: ${tokenForegroundForIntent(value)}`] : [];
+});
 const rowStyles = computed(() => {
-  return [props.style];
+  return [
+    colorStyles.value,
+    borderStyles.value,
+    borderColorStyle.value,
+    roundedStyles.value,
+    elevationStyles.value,
+    paddingStyles.value,
+    marginStyles.value,
+    dimensionStyles.value,
+    competitorTypographyStyles.value,
+    props.style
+  ];
 });
 const rowClasses = computed(() => {
   return [
     "origam-bracket-competitor",
-    `origam-bracket-competitor--color-${props.color}`,
     {
       "origam-bracket-competitor--winner": props.isWinner,
       "origam-bracket-competitor--loser": props.isLoser,
       "origam-bracket-competitor--tbd": isTbd.value,
+      "origam-bracket-competitor--forfeit": props.forfeit,
       "origam-bracket-competitor--interactive": props.interactive
     },
+    colorClasses.value,
+    hoverClasses.value,
+    activeClasses.value,
+    borderClasses.value,
+    roundedClasses.value,
+    elevationClasses.value,
+    paddingClasses.value,
+    marginClasses.value,
+    densityClasses.value,
     props.class
   ];
 });
@@ -117,7 +249,7 @@ defineExpose({
 		font-weight: var(--origam-bracket-competitor---font-weight, 400);
 		color: var(--origam-bracket-competitor---color, currentColor);
 		background-color: var(--origam-bracket-competitor---background-color, transparent);
-		border: 0;
+		appearance: none;
 		transition: background-color 120ms ease, color 120ms ease;
 		user-select: none;
 
@@ -125,7 +257,8 @@ defineExpose({
 			min-width: var(--origam-bracket-seed---min-width, 20px);
 			font-size: var(--origam-bracket-seed---font-size, 0.75rem);
 			font-weight: var(--origam-bracket-seed---font-weight, 500);
-			color: var(--origam-bracket-seed---color, var(--origam-color__text---tertiary, rgba(0, 0, 0, 0.5)));
+			color: var(--origam-bracket-seed---color, currentColor);
+			opacity: var(--origam-bracket-seed---opacity, 0.7);
 			text-align: end;
 			flex: 0 0 auto;
 		}
@@ -146,6 +279,38 @@ defineExpose({
 			white-space: nowrap;
 		}
 
+		&__advantage {
+			flex: 0 0 auto;
+			padding-block: var(--origam-bracket-advantage---padding-block, 1px);
+			padding-inline: var(--origam-bracket-advantage---padding-inline, 6px);
+			font-size: var(--origam-bracket-advantage---font-size, 0.6875rem);
+			font-weight: var(--origam-bracket-advantage---font-weight, 700);
+			line-height: 1.4;
+			color: var(--origam-bracket-advantage---color, var(--origam-color__action--primary---fg, #fff));
+			background-color: var(--origam-bracket-advantage---background-color, var(--origam-color__action--primary---bg, #1976d2));
+			border-radius: var(--origam-bracket-advantage---border-radius, 9999px);
+		}
+
+		&__forfeit {
+			flex: 0 0 auto;
+			padding-block: 1px;
+			padding-inline: 6px;
+			font-size: 0.625rem;
+			font-weight: 700;
+			text-transform: uppercase;
+			letter-spacing: 0.04em;
+			color: var(--origam-color__feedback--warning---bg, #ed6c02);
+			border: 1px solid currentColor;
+			border-radius: 4px;
+		}
+
+		&--forfeit {
+			.origam-bracket-competitor__name {
+				text-decoration: line-through;
+				opacity: 0.7;
+			}
+		}
+
 		&__score {
 			min-width: var(--origam-bracket-score---min-width, 28px);
 			text-align: end;
@@ -174,19 +339,31 @@ defineExpose({
 			font-weight: var(--origam-bracket-competitor--winner---font-weight, 600);
 
 			.origam-bracket-competitor__score {
-				color: var(--origam-bracket-competitor--winner---color, var(--origam-color__action--primary---bg, #1976d2));
+				color: var(--origam-bracket-competitor--winner---color, currentColor);
 			}
 		}
 
 		&--loser {
-			color: var(--origam-bracket-competitor--loser---color, var(--origam-color__text---tertiary, rgba(0, 0, 0, 0.5)));
-			opacity: var(--origam-bracket-competitor--loser---opacity, 0.75);
+			color: var(--origam-bracket-competitor--loser---color, currentColor);
+			opacity: var(--origam-bracket-competitor--loser---opacity, 0.85);
 		}
 
 		&--tbd {
-			color: var(--origam-bracket-competitor--pending---color, var(--origam-color__text---tertiary, rgba(0, 0, 0, 0.5)));
+			color: var(--origam-bracket-competitor--pending---color, currentColor);
+			opacity: var(--origam-bracket-competitor--pending---opacity, 0.7);
 			font-style: var(--origam-bracket-competitor--pending---font-style, italic);
 		}
+
+		&--density-compact {
+			--origam-bracket-competitor---height: 28px;
+			--origam-bracket-competitor---padding-block: 2px;
+			--origam-bracket-competitor---font-size: 0.8125rem;
+		}
+
+		&--density-comfortable {
+			--origam-bracket-competitor---height: 44px;
+			--origam-bracket-competitor---padding-block: 8px;
+		}
 	}
 </style>
 

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

@@ -2,11 +2,14 @@
 	<component
 			:is="tag"
 			:id="id"
+			ref="matchRef"
 			:aria-label="ariaLabel"
 			:class="matchClasses"
 			:style="matchStyles"
 			role="group"
 			@click="handleMatchClick"
+			@mouseenter="onMouseenter"
+			@mouseleave="onMouseleave"
 	>
 		<div
 				v-if="match.scheduledAt || resolvedStatus"
@@ -18,6 +21,15 @@
 			>
 				{{ statusLabel }}
 			</span>
+			<a
+					v-if="isLive && to"
+					:href="to"
+					class="origam-bracket-match__watch"
+					rel="noopener noreferrer"
+					target="_blank"
+			>
+				{{ watchLabel }}
+			</a>
 			<span
 					v-if="match.scheduledAt"
 					class="origam-bracket-match__schedule"
@@ -35,7 +47,8 @@
 					:side="'A'"
 			>
 				<origam-bracket-competitor
-						:color="color"
+						:advantage-rounds="advantageA"
+						:forfeit="isForfeitA"
 						:competitor="match.competitorA"
 						:interactive="interactive"
 						:is-loser="isLoserA"
@@ -48,7 +61,7 @@
 				/>
 			</slot>
 
-			<div class="origam-bracket-match__divider"/>
+			<origam-divider class="origam-bracket-match__divider"/>
 
 			<slot
 					name="competitor"
@@ -58,7 +71,8 @@
 					:side="'B'"
 			>
 				<origam-bracket-competitor
-						:color="color"
+						:advantage-rounds="advantageB"
+						:forfeit="isForfeitB"
 						:competitor="match.competitorB"
 						:interactive="interactive"
 						:is-loser="isLoserB"
@@ -74,22 +88,65 @@
 	</component>
 </template>
 
-<script setup>
-import { computed, StyleValue } from "vue";
+<script lang="ts" setup>
+import { computed, onBeforeUnmount, onMounted, ref, StyleValue, watch } from "vue";
 import OrigamBracketCompetitor from "./OrigamBracketCompetitor.vue";
-import { useProps } from "../../composables";
+import OrigamDivider from "../Divider/OrigamDivider.vue";
+import { useActive, useDensity, useDimension, useHover, useMargin, usePadding, useProps } from "../../composables";
+import { bracketSurfaceVars, resolveBracketForeground } from "../../utils/Bracket/bracket-surface.util";
 const props = defineProps({
   match: { type: Object, required: true },
   status: { type: null, required: false },
+  to: { type: String, required: false },
   isFinal: { type: Boolean, required: false, default: false },
   showScores: { type: Boolean, required: false, default: true },
   showSeed: { type: Boolean, required: false, default: false },
   interactive: { type: Boolean, required: false, default: true },
-  color: { type: String, required: false, default: "primary" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  tag: { type: String, required: false, default: "div" }
+  tag: { type: String, required: false, default: "div" },
+  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 },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: 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 },
+  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 },
+  density: { type: null, 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 },
+  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 },
+  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 }
 });
 const emit = defineEmits(["click", "competitor-click", "winner-click"]);
 const { filterProps } = useProps(props);
@@ -104,6 +161,7 @@ const statusLabel = computed(() => {
   if (!resolvedStatus.value) return "";
   return STATUS_LABELS[resolvedStatus.value] ?? resolvedStatus.value;
 });
+const watchLabel = "Watch live";
 const statusClasses = computed(() => {
   return [
     "origam-bracket-match__status",
@@ -130,12 +188,23 @@ const isLoserB = computed(() => {
   if (!props.match.competitorB) return false;
   return props.match.competitorB.id !== props.match.winnerId;
 });
+const isForfeitA = computed(() => resolvedStatus.value === "forfeited" && isLoserA.value);
+const isForfeitB = computed(() => resolvedStatus.value === "forfeited" && isLoserB.value);
+const advantageFor = (competitor) => {
+  const advantage = props.match.advantage;
+  if (!advantage || !competitor) return void 0;
+  if (advantage.competitorId !== competitor.id) return void 0;
+  return advantage.rounds ?? 1;
+};
+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 handleMatchClick = (event) => {
+  onActive();
   const target = event.target;
   if (target?.closest(".origam-bracket-competitor")) return;
   emit("click", props.match, event);
@@ -147,18 +216,75 @@ const handleCompetitorClick = (event, competitor, side) => {
     emit("winner-click", competitor, props.match, event);
   }
 };
+const matchRef = ref(null);
+const { hoverClasses, isHover, hoverState, onMouseenter, onMouseleave } = useHover(props);
+const { activeClasses, isActive, activeState, onActive } = useActive(props);
+const isLive = computed(() => resolvedStatus.value === "live");
+const isActiveOrLive = computed(() => isActive.value || isLive.value);
+const surfaceInput = computed(() => {
+  if (isHover.value && hoverState.value) return { ...props, ...hoverState.value };
+  if (isActiveOrLive.value && activeState.value) return { ...props, ...activeState.value };
+  return props;
+});
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const { dimensionStyles } = useDimension(props);
+const { densityClasses } = useDensity(props, "origam-bracket-match");
+const autoTextColor = ref(null);
+const measureContrast = () => {
+  const el = matchRef.value;
+  if (!props.bgColor || !el) {
+    autoTextColor.value = null;
+    return;
+  }
+  const channels = getComputedStyle(el).backgroundColor.match(/\d+(?:\.\d+)?/g);
+  if (!channels || channels.length < 3) {
+    autoTextColor.value = null;
+    return;
+  }
+  const linear = (channel) => {
+    const c = channel / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  };
+  const luminance = 0.2126 * linear(+channels[0]) + 0.7152 * linear(+channels[1]) + 0.0722 * linear(+channels[2]);
+  autoTextColor.value = luminance < 0.179 ? "#ffffff" : "#000000";
+};
+let contrastTimer = null;
+const scheduleContrast = () => {
+  if (typeof window === "undefined") return;
+  if (contrastTimer) clearTimeout(contrastTimer);
+  contrastTimer = setTimeout(measureContrast, 200);
+};
+watch([() => props.bgColor, () => props.match, isHover, isActiveOrLive], scheduleContrast, { flush: "post" });
+onMounted(scheduleContrast);
+onBeforeUnmount(() => {
+  if (contrastTimer) clearTimeout(contrastTimer);
+  contrastTimer = null;
+});
 const matchStyles = computed(() => {
-  return [props.style];
+  const textColor = autoTextColor.value ?? resolveBracketForeground(props.color);
+  return [
+    bracketSurfaceVars(surfaceInput.value),
+    textColor ? { "--origam-bracket---color": textColor, color: textColor } : {},
+    paddingStyles.value,
+    marginStyles.value,
+    dimensionStyles.value,
+    props.style
+  ];
 });
 const matchClasses = computed(() => {
   return [
     "origam-bracket-match",
-    `origam-bracket-match--color-${props.color}`,
     {
       "origam-bracket-match--final": props.isFinal,
       "origam-bracket-match--interactive": props.interactive,
       [`origam-bracket-match--status-${resolvedStatus.value}`]: !!resolvedStatus.value
     },
+    hoverClasses.value,
+    activeClasses.value,
+    densityClasses.value,
+    paddingClasses.value,
+    marginClasses.value,
     props.class
   ];
 });
@@ -194,32 +320,58 @@ defineExpose({
 		}
 
 		&__status {
+			display: inline-flex;
+			align-items: center;
+			gap: 5px;
 			text-transform: uppercase;
 			font-weight: 600;
 			letter-spacing: 0.04em;
 
+			&::before {
+				content: '';
+				width: 7px;
+				height: 7px;
+				border-radius: 50%;
+				background: currentColor;
+				flex: 0 0 auto;
+			}
+
+			&--pending {
+				color: var(--origam-color__text---tertiary, rgba(0, 0, 0, 0.5));
+			}
+
 			&--live {
-				color: var(--origam-color__feedback--danger---fg, #d32f2f);
-				display: inline-flex;
-				align-items: center;
-				gap: 4px;
+				color: var(--origam-color__feedback--danger---bg, #d32f2f);
 
 				&::before {
-					content: '';
-					width: 6px;
-					height: 6px;
-					border-radius: 50%;
-					background: currentColor;
-					animation: origam-bracket-pulse 1.2s infinite;
+					box-shadow: 0 0 0 0 currentColor;
+					animation: origam-bracket-blink 1s steps(1, end) infinite, origam-bracket-ping 1.4s ease-out infinite;
 				}
 			}
 
 			&--completed {
-				color: var(--origam-color__text---tertiary, rgba(0, 0, 0, 0.5));
+				color: var(--origam-color__feedback--success---bg, #2e7d32);
 			}
 
 			&--forfeited {
-				color: var(--origam-color__feedback--warning---fg, #ed6c02);
+				color: var(--origam-color__feedback--warning---bg, #ed6c02);
+			}
+		}
+
+		&__watch {
+			display: inline-flex;
+			align-items: center;
+			gap: 2px;
+			color: var(--origam-color__feedback--danger---bg, #d32f2f);
+			font-weight: 600;
+			text-decoration: none;
+
+			&::after {
+				content: '↗';
+			}
+
+			&:hover {
+				text-decoration: underline;
 			}
 		}
 
@@ -233,11 +385,6 @@ defineExpose({
 			flex: 1 1 auto;
 		}
 
-		&__divider {
-			height: 1px;
-			background: var(--origam-color__border---subtle, rgba(0, 0, 0, 0.08));
-		}
-
 		&--interactive {
 			cursor: pointer;
 
@@ -247,32 +394,40 @@ defineExpose({
 			}
 		}
 
-		&--final {
-			background-color: var(--origam-bracket-match--final---background-color, var(--origam-color__surface---elevated, #fafafa));
-			border-color: var(--origam-bracket-match--final---border-color, var(--origam-color__action--primary---bg, #1976d2));
-			box-shadow: var(--origam-bracket-match--final---box-shadow, 0 4px 12px rgba(0, 0, 0, 0.12));
-		}
-
 		&--status-completed {
 			opacity: 0.95;
 		}
-	}
 
-	@keyframes origam-bracket-pulse {
-		0%, 100% {
-			opacity: 1;
-			transform: scale(1);
+		&--density-compact {
+			--origam-bracket-match---min-height: 56px;
+			--origam-bracket-competitor---height: 28px;
+			--origam-bracket-competitor---padding-block: 2px;
 		}
-		50% {
-			opacity: 0.5;
-			transform: scale(1.4);
+
+		&--density-comfortable {
+			--origam-bracket-match---min-height: 88px;
+			--origam-bracket-competitor---height: 44px;
+			--origam-bracket-competitor---padding-block: 8px;
 		}
 	}
 
+	@keyframes origam-bracket-blink {
+		0%, 50% { opacity: 1; }
+		51%, 100% { opacity: 0.2; }
+	}
+
+	@keyframes origam-bracket-ping {
+		0% { box-shadow: 0 0 0 0 currentColor; }
+		70%, 100% { box-shadow: 0 0 0 5px transparent; }
+	}
+
 	@media (prefers-reduced-motion: reduce) {
-		@keyframes origam-bracket-pulse {
+		@keyframes origam-bracket-blink {
 			0%, 100% { opacity: 1; }
 		}
+		@keyframes origam-bracket-ping {
+			0%, 100% { box-shadow: none; }
+		}
 	}
 </style>