origam 2.5.0 → 2.6.2

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

@@ -10,6 +10,7 @@
 		<h3
 				v-if="showRoundTitle"
 				:id="titleId"
+				:style="typographyStyles"
 				class="origam-bracket-round__title"
 		>
 			<slot
@@ -33,6 +34,7 @@
 						:key="match.id"
 						:color="color"
 						:data-cy="`origam-bracket-match-${match.id}`"
+						:data-match-id="match.id"
 						:interactive="interactive"
 						:is-final="isFinalRound && matchIndex === 0 && round.matches.length === 1"
 						:match="match"
@@ -48,10 +50,10 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue } from "vue";
 import OrigamBracketMatch from "./OrigamBracketMatch.vue";
-import { useProps } from "../../composables";
+import { useProps, useTypography } from "../../composables";
 import { DIRECTION } from "../../enums";
 const props = defineProps({
   round: { type: Object, required: true },
@@ -66,10 +68,16 @@ const props = defineProps({
   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" },
-  direction: { type: null, required: false, default: DIRECTION.HORIZONTAL }
+  direction: { type: null, required: false, default: DIRECTION.HORIZONTAL },
+  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(["match-click", "competitor-click", "winner-click"]);
 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 isFinalRound = computed(() => props.index === props.totalRounds - 1);

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

@@ -2,6 +2,7 @@
 	<component
 			:is="tag"
 			:id="id"
+			v-contrast
 			:aria-label="t('origam.breadcrumb.ariaLabel', 'Breadcrumb')"
 			:class="breadcrumbClasses"
 	>
@@ -10,7 +11,7 @@
 				<template v-if="hasItems">
 					<ol class="origam-breadcrumb__items">
 						<template
-								v-for="(item, index) in items"
+								v-for="(item, index) in normalizedItems"
 								:key="index"
 						>
 							<li class="origam-breadcrumb__item">
@@ -50,7 +51,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamBreadcrumbDivider, OrigamBreadcrumbItem, OrigamDefaultsProvider } from "../../components";
 import {
   useDensity,
@@ -59,10 +60,10 @@ import {
   useStateEffect,
   useStyle
 } from "../../composables";
+import { vContrast } from "../../directives";
 import { DENSITY } from "../../enums";
 import { computed, StyleValue, useSlots } from "vue";
 const props = defineProps({
-  activeClass: { type: String, required: false },
   disabled: { type: Boolean, required: false },
   divider: { type: null, required: false, default: "/" },
   items: { type: Array, required: false, default: () => [] },
@@ -101,7 +102,10 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
-  elevation: { type: [Number, String], required: false }
+  elevation: { type: [Number, String], required: false },
+  hover: { type: [Boolean, Object], required: false },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
 const { t } = useLocale();
@@ -110,20 +114,18 @@ const slotDefaults = computed(() => ({
     density: props.density,
     color: props.color,
     bgColor: props.bgColor,
-    hoverColor: props.hoverColor,
-    hoverBgColor: props.hoverBgColor,
-    activeColor: props.activeColor,
-    activeBgColor: props.activeBgColor,
+    hover: props.hover,
+    active: props.active,
     disabled: props.disabled
   }
 }));
 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 items = computed(() => {
+const normalizedItems = computed(() => {
   return props.items.map((item, index) => {
-    return typeof item === "string" ? { title: item, disabled: isLastItem(index) } : {
+    return typeof item === "string" ? { title: item, disabled: isLastItem(index), active: isLastItem(index) } : {
       ...item,
       disabled: isLastItem(index) || item.disabled,
-      isActive: isLastItem(index)
+      active: isLastItem(index)
     };
   });
 });
@@ -132,7 +134,7 @@ const isLastItem = (index) => {
 };
 const slots = useSlots();
 const hasItems = computed(() => {
-  return slots.default || items.value;
+  return slots.default || normalizedItems.value;
 });
 const { densityClasses } = useDensity(props);
 const breadcrumbStyles = computed(() => {

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

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			v-contrast
 			:class="breadcrumbDividerClasses"
 			:style="breadcrumbDividerStyles"
 	>
@@ -15,9 +16,10 @@
 	</component>
 </template>
 
-<script setup>
+<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 { computed, StyleValue, toRef } from "vue";
 const props = defineProps({
@@ -42,6 +44,7 @@ const props = defineProps({
   marginInline: { type: [Boolean, Number, String], required: false },
   density: { type: null, required: false },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   size: { type: null, required: false }
 });
 const { filterProps } = useProps(props);

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

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="link.tag"
+			v-contrast
 			:aria-current="isActive ? 'page' : undefined"
 			:class="breadcrumbItemClasses"
 			:href="link.href"
@@ -61,8 +62,9 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamAvatar, OrigamIcon } from "../../components";
+import { vContrast } from "../../directives";
 import {
   useActive,
   useAdjacent,
@@ -244,10 +246,6 @@ defineExpose({
 			pointer-events: none;
 		}
 
-		&--link {
-
-		}
-
 		&--density-comfortable {
 			--origam-breadcrumb-item---density: -8px;
 		}

package/dist/src/components/Btn/OrigamBtn.vue

@@ -3,6 +3,8 @@
 			:is="link.tag"
 			:id="id"
 			v-ripple="isRipple"
+			v-contrast
+			:data-origam-color-locked="colorLocked"
 			:class="btnClasses"
 			:disabled="isDisabled || undefined"
 			:aria-disabled="link.tag === 'a' && isDisabled ? 'true' : undefined"
@@ -22,13 +24,6 @@
 				class="origam-btn__underlay"
 		/>
 
-		<!--
-			Overlay loaders (line / circular) — rendered as direct children
-			of the btn root so they can be absolutely positioned relative
-			to the btn box. Putting them INSIDE the OrigamLoader's
-			default-slot grid would make them claim a `prepend`-slot cell
-			and shove the label off-centre.
-		-->
 		<origam-progress
 				v-if="isOverlayLoading"
 				ref="origamProgressRef"
@@ -128,7 +123,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, StyleValue, toRef, useAttrs, useSlots } from "vue";
 import { OrigamAvatar, OrigamIcon, OrigamLoader, OrigamProgress, OrigamSkeleton } from "../../components";
 import {
@@ -149,20 +144,23 @@ import {
   useStateEffect,
   useStatus,
   useStyle,
+  useTypography,
   useVariant
 } from "../../composables";
 import { ORIGAM_BTN_TOGGLE_KEY } from "../../consts";
-import { vRipple } from "../../directives";
+import { vContrast, vRipple } from "../../directives";
 import { DENSITY, PROGRESS_TYPE, SIZES } from "../../enums";
 const attrs = useAttrs();
 const _props = defineProps({
-  active: { type: Boolean, required: false, default: void 0 },
+  active: { type: [Boolean, Object], required: false, default: void 0 },
   flat: { type: Boolean, required: false },
   icon: { type: [Boolean, String, Array], required: false, skipCheck: true },
   block: { type: Boolean, required: false },
   slim: { type: Boolean, required: false },
   stacked: { type: Boolean, required: false },
   text: { type: String, required: false },
+  status: { type: null, required: false },
+  statusIconPosition: { type: null, 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 },
@@ -226,12 +224,16 @@ const _props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
-  status: { type: null, required: false },
-  statusIconPosition: { type: null, required: false },
   hover: { type: [Boolean, Object], required: false },
-  variant: { type: null, required: false }
+  variant: { 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 props = useDefaults(_props);
+const colorLocked = computed(() => props.color ? "true" : void 0);
 defineEmits(["click:append", "click:prepend", "group:selected"]);
 const { filterProps } = useProps(props);
 const origamProgressRef = ref();
@@ -242,13 +244,18 @@ useSelectLink(link, group?.select);
 const { isHover, hoverState, onMouseenter: handleMouseenter, onMouseleave: handleMouseleave } = useHover(props);
 const { isActive: active, activeState } = useActive(props);
 const isActive = computed(() => {
-  if (active.value !== void 0) {
-    return active.value;
+  const a = props.active;
+  const forcedActive = a === true || !!a && typeof a === "object" && a.enabled === true;
+  if (forcedActive) {
+    return true;
+  }
+  if (group) {
+    return group.isSelected.value;
   }
   if (link.isLink.value) {
     return link.isActive?.value;
   }
-  return group?.isSelected.value;
+  return active.value;
 });
 const isDisabled = computed(() => group?.disabled.value || props.disabled);
 const valueAttr = computed(() => {
@@ -268,6 +275,7 @@ const { loaderClasses, loaderConfig } = useLoader(props, "circular");
 const { locationStyles } = useLocation(props);
 const { positionClasses } = usePosition(props);
 const { sizeClasses, sizeStyles } = useSize(props);
+const { typographyStyles } = useTypography(props, "btn");
 const { icon, prependIcon, appendIcon, statusClasses } = useStatus(props);
 const {
   colorClasses,
@@ -316,7 +324,7 @@ const progressProps = computed(() => {
       modelValue: cfg.modelValue,
       type: cfg.kind === "line" ? PROGRESS_TYPE.LINEAR : PROGRESS_TYPE.CIRCULAR
     },
-    origamProgressRef.value?.filterProps(props, ["class", "style", "id", "tag", "size", "type"]),
+    origamProgressRef.value?.filterProps(props, ["class", "style", "id", "tag", "size", "type"]) ?? {},
     cfg.overrides
   );
 });
@@ -331,6 +339,7 @@ const btnStyles = computed(() => {
     roundedStyles.value,
     sizeStyles.value,
     elevationStyles.value,
+    typographyStyles.value,
     props.style
   ];
 });
@@ -404,10 +413,6 @@ defineExpose({
 		transition-duration: var(--origam-btn---transition-duration, 0.28s);
 		transition-timing-function: var(--origam-btn---transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
 
-		@media (prefers-reduced-motion: reduce) {
-			transition: none;
-		}
-
 		padding: 0 calc(16px + var(--origam-btn---density-padding-x, 0px));
 
 		width: var(--origam-btn---width, auto);
@@ -423,10 +428,6 @@ defineExpose({
 		outline: none;
 		cursor: pointer;
 
-		&:focus-visible {
-			outline: var(--origam-border__width---2, 2px) solid var(--origam-color__border---focus, currentColor);
-			outline-offset: var(--origam-space---1, 2px);
-		}
 		user-select: none;
 		opacity: var(--origam-btn---opacity, 1);
 
@@ -438,6 +439,15 @@ defineExpose({
 			var(--origam-btn-group---border-radius, 4px)
 		);
 
+		@media (prefers-reduced-motion: reduce) {
+			transition: none;
+		}
+
+		&:focus-visible {
+			outline: var(--origam-border__width---2, 2px) solid var(--origam-color__border---focus, currentColor);
+			outline-offset: var(--origam-space---1, 2px);
+		}
+
 		#{$this}__loader {
 			align-items: center;
 			justify-content: center;
@@ -536,8 +546,7 @@ defineExpose({
 		}
 
 		&:hover,
-		&:focus-visible,
-		&:focus {
+		&:focus-visible {
 			> #{$this}__overlay {
 				--origam-btn__overlay---opacity: var(--origam-btn---overlay-opacity-hover, 0.12);
 			}
@@ -550,8 +559,7 @@ defineExpose({
 			}
 
 			&:hover,
-			&:focus-visible,
-			&:focus {
+			&:focus-visible {
 				> #{$this}__overlay {
 					--origam-btn__overlay---opacity: var(--origam-btn---overlay-opacity-active-hover, 0.28);
 				}
@@ -603,14 +611,45 @@ defineExpose({
 				var(--origam-color__surface---overlay)
 			) !important;
 			box-shadow: none;
+
+			// Active / selected state (e.g. inside an OrigamBtnToggle):
+			// lift the surface to the "raised" rung so the selected
+			// button is clearly distinct from the resting siblings.
+			// Three axes change on selection:
+			//   1. background → raised surface (white in light / elevated in dark)
+			//   2. box-shadow → xs shadow (segmented-control "pill" lift)
+			//   3. font-weight → semibold (label emphasis)
+			// All three are driven by theme-overridable tokens.
+			&#{$this}--active {
+				background-color: var(
+					--origam-btn---background-color-tonal-active,
+					var(--origam-color__surface---raised, var(--origam-color__surface---overlay))
+				) !important;
+				box-shadow: var(
+					--origam-btn---box-shadow-tonal-active,
+					var(--origam-shadow---xs)
+				);
+				font-weight: 600;
+			}
 		}
 
 		&--variant-outlined {
 			background-color: transparent !important;
 			border-width: var(--origam-btn---border-width-outlined, var(--origam-border__width---thin));
 			border-style: solid;
-			border-color: currentColor;
+			border-color: var(--origam-btn---border-color, currentColor);
 			box-shadow: none;
+
+			// Selected state inside an OrigamBtnToggle: the active option
+			// FILLS like a real default button (using the btn's own bg/fg
+			// tokens, so it follows color/intent and theme), while the resting
+			// siblings stay outlined. This is what makes a btn-toggle read as
+			// a row of real buttons rather than a flat segmented strip.
+			&#{$this}--active {
+				background-color: var(--origam-btn---background-color) !important;
+				color: var(--origam-btn---color);
+				border-color: var(--origam-btn---background-color);
+			}
 		}
 
 		&--variant-plain {

package/dist/src/components/Btn/OrigamBtnGroup.vue

@@ -25,7 +25,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamBtn, OrigamDefaultsProvider } from "../../components";
 import {
   useDensity,
@@ -73,7 +73,10 @@ const props = defineProps({
   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 }
+  paddingInline: { type: [Boolean, Number, String], required: false },
+  hover: { type: [Boolean, Object], required: false },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
 const slotDefaults = computed(() => ({
@@ -148,6 +151,7 @@ defineExpose({
 	.origam-btn-group {
 		display: inline-flex;
 		flex-wrap: nowrap;
+		align-items: center;
 		overflow: hidden;
 		vertical-align: middle;
 
@@ -208,7 +212,6 @@ defineExpose({
 		}
 
 		:deep(.origam-btn) {
-			border-radius: 0;
 			border-color: inherit;
 
 			&:not(:last-child) {
@@ -220,6 +223,18 @@ defineExpose({
 			}
 		}
 
+		// The GROUP owns the rounding (outer corners, via its own
+		// border-radius + overflow:hidden) and the elevation (a single
+		// shadow around the whole group). Child buttons are forced flat
+		// and shadowless so a per-child `rounded` / `elevation` (own prop
+		// or active/hover state) can't break the unified segmented look —
+		// e.g. rounded pills with the group surface bleeding through the
+		// gaps. `!important` is intentional: the group's design wins.
+		:deep(.origam-btn) {
+			border-radius: 0 !important;
+			box-shadow: none !important;
+		}
+
 		&--divided {
 			:deep(.origam-btn) {
 				&:not(:last-child) {
@@ -236,10 +251,21 @@ defineExpose({
 	:root {
 		--origam-btn-group---density: 0;
 
-		--origam-btn-group---border-radius: 4px;
-		--origam-btn-group---border-width: 0;
-		--origam-btn-group---border-style: solid;
-		--origam-btn-group---border-color: currentColor;
+		/*
+		 * Border-radius, border-width and border-color deliberately fall back to
+		 * the matching --origam-btn---* variables so that any theme that overrides
+		 * the btn tokens (radius, border) is automatically reflected on the group
+		 * container — no per-theme duplication required.
+		 *
+		 * Token resolution chain:
+		 *   theme override of --origam-btn---border-radius
+		 *     → picked up here as --origam-btn-group---border-radius
+		 *       → used in .origam-btn-group { border-radius: … }
+		 */
+		--origam-btn-group---border-radius: var(--origam-btn---border-radius, 4px);
+		--origam-btn-group---border-width: var(--origam-btn---border-width, 0);
+		--origam-btn-group---border-style: var(--origam-btn---border-style, solid);
+		--origam-btn-group---border-color: var(--origam-btn---border-color, currentColor);
 
 	}
 </style>

package/dist/src/components/Btn/OrigamBtnToggle.vue

@@ -27,7 +27,7 @@
 	</origam-btn-group>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamBtnGroup } from "../../components";
 import {
   useGroup,
@@ -76,6 +76,9 @@ const props = defineProps({
   paddingRight: { type: [Boolean, Number, String], required: false },
   paddingBlock: { type: [Boolean, Number, String], required: false },
   paddingInline: { type: [Boolean, Number, String], required: false },
+  hover: { type: [Boolean, Object], required: false },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false },
   disabled: { type: Boolean, required: false },
   modelValue: { type: null, required: false },
   multiple: { type: Boolean, required: false },
@@ -115,9 +118,3 @@ defineExpose({
   isLoaded
 });
 </script>
-
-<style>
-	:root {
-
-	}
-</style>