origam 2.3.0 → 2.5.0

package/dist/src/components/Audio/index.cjs

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OrigamAudio", {
+  enumerable: true,
+  get: function () {
+    return _OrigamAudio.default;
+  }
+});
+var _OrigamAudio = _interopRequireDefault(require("./OrigamAudio.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/components/Audio/index.d.ts

@@ -0,0 +1 @@
+export { default as OrigamAudio } from './OrigamAudio.vue';

package/dist/src/components/Audio/index.js

@@ -0,0 +1 @@
+export { default as OrigamAudio } from "./OrigamAudio.vue";

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

@@ -76,8 +76,8 @@ const _props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   size: { type: null, required: false, default: "default" },
   tag: { type: String, required: false, default: "div" },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },
@@ -124,7 +124,7 @@ const hasText = computed(() => {
 });
 const imageProps = computed(() => {
   const imgSrc = {
-    alt: "avatar",
+    alt: typeof props.image === "object" && props.image && "alt" in props.image ? props.image.alt ?? "" : "",
     aspectRatio: 1
   };
   if (typeof props.image === "string") {

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

@@ -70,8 +70,8 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   size: { type: null, required: false },
   tag: { type: String, required: false, default: "div" },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },

package/dist/src/components/Badge/OrigamBadge.vue

@@ -97,8 +97,8 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   location: { type: null, required: false, default: "top right" },
   rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },

package/dist/src/components/Blockquote/OrigamBlockquote.vue

@@ -0,0 +1,291 @@
+<template>
+	<component
+			:is="tag"
+			:cite="cite"
+			:class="blockquoteClasses"
+			:style="blockquoteStyles"
+	>
+		<span
+				v-if="showQuoteMark"
+				class="origam-blockquote__mark origam-blockquote__mark--bg"
+				aria-hidden="true"
+		>{{ openMark }}</span>
+
+		<div class="origam-blockquote__body">
+			<slot/>
+		</div>
+
+		<footer
+				v-if="hasAttribution"
+				class="origam-blockquote__attribution"
+		>
+			<span class="origam-blockquote__dash" aria-hidden="true">— </span>
+
+			<span class="origam-blockquote__author">
+				<slot name="author">{{ author }}</slot>
+			</span>
+
+			<span
+					v-if="hasSource"
+					class="origam-blockquote__separator"
+					aria-hidden="true"
+			>, </span>
+
+			<cite
+					v-if="hasSource"
+					class="origam-blockquote__source"
+			>
+				<slot name="source">{{ source }}</slot>
+			</cite>
+		</footer>
+	</component>
+</template>
+
+<script setup>
+import {
+  computed,
+  onMounted,
+  ref,
+  StyleValue,
+  useSlots
+} from "vue";
+import { QUOTE_MARKS_BY_LANG } from "../../consts/Blockquote/blockquote.const";
+const props = defineProps({
+  variant: { type: String, required: false, default: "default" },
+  author: { type: String, required: false },
+  source: { type: String, required: false },
+  cite: { type: String, required: false },
+  lang: { type: String, required: false, default: "auto" },
+  align: { type: String, required: false },
+  color: { type: String, 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: "blockquote" }
+});
+const slots = useSlots();
+const resolvedLang = ref("en");
+const lookupLangFromDOM = () => {
+  if (typeof document === "undefined") return "en";
+  const raw = (document.documentElement.lang || "").toLowerCase().trim();
+  const head = raw.split("-")[0];
+  if (head === "fr" || head === "en" || head === "es" || head === "de") return head;
+  return "en";
+};
+onMounted(() => {
+  if (props.lang === "auto") {
+    resolvedLang.value = lookupLangFromDOM();
+  } else {
+    resolvedLang.value = props.lang;
+  }
+});
+const effectiveLang = computed(() => {
+  if (props.lang === "auto") return resolvedLang.value;
+  return props.lang;
+});
+const openMark = computed(() => QUOTE_MARKS_BY_LANG[effectiveLang.value].open);
+const closeMark = computed(() => QUOTE_MARKS_BY_LANG[effectiveLang.value].close);
+const showQuoteMark = computed(() => props.variant === "quoted");
+const hasAuthor = computed(() => Boolean(slots.author) || (props.author?.length ?? 0) > 0);
+const hasSource = computed(() => Boolean(slots.source) || (props.source?.length ?? 0) > 0);
+const hasAttribution = computed(() => hasAuthor.value || hasSource.value);
+const effectiveAlign = computed(() => {
+  if (props.align) return props.align;
+  return props.variant === "pull" ? "center" : "left";
+});
+const blockquoteClasses = computed(() => {
+  return [
+    "origam-blockquote",
+    `origam-blockquote--variant-${props.variant}`,
+    `origam-blockquote--align-${effectiveAlign.value}`,
+    {
+      [`origam-blockquote--color-${props.color}`]: !!props.color,
+      "origam-blockquote--has-attribution": hasAttribution.value
+    },
+    props.class
+  ];
+});
+const blockquoteStyles = computed(() => {
+  return [props.style];
+});
+defineExpose({
+  effectiveLang,
+  effectiveAlign,
+  openMark,
+  closeMark,
+  showQuoteMark,
+  hasAttribution
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-blockquote {
+		--origam-blockquote---resolved-padding-block: var(--origam-blockquote---padding-block, 16px);
+		--origam-blockquote---resolved-padding-inline: var(--origam-blockquote---padding-inline, 24px);
+		--origam-blockquote---resolved-font-family: var(--origam-blockquote---font-family, Inter, system-ui, sans-serif);
+		--origam-blockquote---resolved-font-size: var(--origam-blockquote---font-size, 1rem);
+		--origam-blockquote---resolved-font-style: var(--origam-blockquote---font-style, normal);
+		--origam-blockquote---resolved-font-weight: var(--origam-blockquote---font-weight, 400);
+		--origam-blockquote---resolved-line-height: var(--origam-blockquote---line-height, 1.625);
+		--origam-blockquote---resolved-accent-color: var(--origam-blockquote__accent---color, var(--origam-color__action--primary---bg, #7c3aed));
+		--origam-blockquote---resolved-quote-mark-color: var(--origam-blockquote---quote-mark-color, var(--origam-color__action--primary---bg, #7c3aed));
+		--origam-blockquote---resolved-author-color: var(--origam-blockquote__author---color, var(--origam-color__text---secondary, #525252));
+
+		position: relative;
+		margin: 0;
+		padding-block: var(--origam-blockquote---resolved-padding-block);
+		padding-inline: var(--origam-blockquote---resolved-padding-inline);
+		font-family: var(--origam-blockquote---resolved-font-family);
+		font-size: var(--origam-blockquote---resolved-font-size);
+		font-style: var(--origam-blockquote---resolved-font-style);
+		font-weight: var(--origam-blockquote---resolved-font-weight);
+		line-height: var(--origam-blockquote---resolved-line-height);
+		color: var(--origam-blockquote---color, var(--origam-color__text---primary, #171717));
+		box-sizing: border-box;
+	}
+
+	.origam-blockquote__body {
+		display: block;
+	}
+
+	.origam-blockquote__attribution {
+		display: block;
+		margin-top: var(--origam-blockquote__author---margin-top, 12px);
+		font-size: var(--origam-blockquote__author---font-size, 0.875rem);
+		font-style: var(--origam-blockquote__author---font-style, normal);
+		font-weight: var(--origam-blockquote__author---font-weight, 500);
+		color: var(--origam-blockquote---resolved-author-color);
+	}
+
+	.origam-blockquote__author {
+		font-style: inherit;
+	}
+
+	.origam-blockquote__source {
+		color: var(--origam-blockquote__source---color, var(--origam-color__text---secondary, #525252));
+		font-size: var(--origam-blockquote__source---font-size, 0.875rem);
+		font-style: var(--origam-blockquote__source---font-style, italic);
+	}
+
+	.origam-blockquote__mark {
+		font-family: serif;
+		user-select: none;
+		color: var(--origam-blockquote---resolved-quote-mark-color);
+	}
+
+	.origam-blockquote__mark--bg {
+		position: absolute;
+		top: var(--origam-blockquote--quoted---glyph-offset-top, -0.1em);
+		left: var(--origam-blockquote--quoted---glyph-offset-left, -0.05em);
+		z-index: 0;
+		font-size: var(--origam-blockquote--quoted---glyph-size, 8rem);
+		line-height: 1;
+		opacity: var(--origam-blockquote--quoted---glyph-opacity, 0.08);
+		pointer-events: none;
+	}
+
+	.origam-blockquote--align-left {
+		text-align: left;
+	}
+
+	.origam-blockquote--align-center {
+		text-align: center;
+	}
+
+	.origam-blockquote--align-right {
+		text-align: right;
+	}
+
+	.origam-blockquote--variant-default {
+		border-inline-start: var(--origam-blockquote__accent---width, 4px) solid var(--origam-blockquote---resolved-accent-color);
+		padding-inline-start: calc(var(--origam-blockquote---resolved-padding-inline) + var(--origam-blockquote__accent---width, 4px));
+	}
+
+	.origam-blockquote--variant-elegant {
+		font-family: var(--origam-blockquote__elegant---font-family, Georgia, 'Times New Roman', serif);
+		font-size: var(--origam-blockquote__elegant---font-size, 1.125rem);
+		font-style: var(--origam-blockquote__elegant---font-style, italic);
+		line-height: var(--origam-blockquote__elegant---line-height, 2);
+		padding-block: var(--origam-blockquote__elegant---padding-block, 24px);
+	}
+
+	.origam-blockquote--variant-quoted {
+		padding-top: calc(var(--origam-blockquote---resolved-padding-block) + var(--origam-blockquote--quoted---glyph-padding-extra, 1rem));
+
+		.origam-blockquote__body {
+			position: relative;
+			z-index: 1;
+		}
+
+		.origam-blockquote__attribution {
+			position: relative;
+			z-index: 1;
+		}
+	}
+
+	.origam-blockquote--variant-minimal {
+		font-size: var(--origam-blockquote__minimal---font-size, 0.875rem);
+		font-style: var(--origam-blockquote__minimal---font-style, italic);
+		padding-inline: var(--origam-blockquote__minimal---padding-inline, 12px);
+		padding-block: 0;
+	}
+
+	.origam-blockquote--variant-pull {
+		font-family: var(--origam-blockquote__pull---font-family, Georgia, 'Times New Roman', serif);
+		font-size: var(--origam-blockquote__pull---font-size, 1.5rem);
+		font-weight: var(--origam-blockquote__pull---font-weight, 500);
+		line-height: var(--origam-blockquote__pull---line-height, 1.375);
+		padding-block: var(--origam-blockquote__pull---padding-block, 24px);
+		padding-inline: var(--origam-blockquote---resolved-padding-inline);
+		border-block-start: var(--origam-blockquote__pull---rule-width, 2px) solid var(--origam-blockquote---resolved-accent-color);
+		border-block-end: var(--origam-blockquote__pull---rule-width, 2px) solid var(--origam-blockquote---resolved-accent-color);
+	}
+
+	.origam-blockquote--color-primary {
+		--origam-blockquote---resolved-accent-color: var(--origam-color__action--primary---bg);
+		--origam-blockquote---resolved-quote-mark-color: var(--origam-color__action--primary---bg);
+		--origam-blockquote---resolved-author-color: var(--origam-color__action--primary---fgSubtle);
+	}
+
+	.origam-blockquote--color-secondary {
+		--origam-blockquote---resolved-accent-color: var(--origam-color__action--secondary---bg);
+		--origam-blockquote---resolved-quote-mark-color: var(--origam-color__action--secondary---bg);
+		--origam-blockquote---resolved-author-color: var(--origam-color__action--secondary---fgSubtle);
+	}
+
+	.origam-blockquote--color-success {
+		--origam-blockquote---resolved-accent-color: var(--origam-color__feedback--success---bg);
+		--origam-blockquote---resolved-quote-mark-color: var(--origam-color__feedback--success---bg);
+		--origam-blockquote---resolved-author-color: var(--origam-color__feedback--success---fgSubtle);
+	}
+
+	.origam-blockquote--color-warning {
+		--origam-blockquote---resolved-accent-color: var(--origam-color__feedback--warning---bg);
+		--origam-blockquote---resolved-quote-mark-color: var(--origam-color__feedback--warning---bg);
+		--origam-blockquote---resolved-author-color: var(--origam-color__feedback--warning---fgSubtle);
+	}
+
+	.origam-blockquote--color-danger {
+		--origam-blockquote---resolved-accent-color: var(--origam-color__feedback--danger---bg);
+		--origam-blockquote---resolved-quote-mark-color: var(--origam-color__feedback--danger---bg);
+		--origam-blockquote---resolved-author-color: var(--origam-color__feedback--danger---fgSubtle);
+	}
+
+	.origam-blockquote--color-info {
+		--origam-blockquote---resolved-accent-color: var(--origam-color__feedback--info---bg);
+		--origam-blockquote---resolved-quote-mark-color: var(--origam-color__feedback--info---bg);
+		--origam-blockquote---resolved-author-color: var(--origam-color__feedback--info---fgSubtle);
+	}
+
+	.origam-blockquote--color-neutral {
+		--origam-blockquote---resolved-accent-color: var(--origam-color__text---primary);
+		--origam-blockquote---resolved-quote-mark-color: var(--origam-color__text---primary);
+		--origam-blockquote---resolved-author-color: var(--origam-color__text---secondary);
+	}
+
+	.origam-blockquote--color-ghost {
+		--origam-blockquote---resolved-accent-color: var(--origam-color__border---subtle);
+		--origam-blockquote---resolved-quote-mark-color: var(--origam-color__text---secondary);
+		--origam-blockquote---resolved-author-color: var(--origam-color__text---secondary);
+	}
+</style>

package/dist/src/components/Blockquote/index.cjs

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OrigamBlockquote", {
+  enumerable: true,
+  get: function () {
+    return _OrigamBlockquote.default;
+  }
+});
+var _OrigamBlockquote = _interopRequireDefault(require("./OrigamBlockquote.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/components/Blockquote/index.d.ts

@@ -0,0 +1 @@
+export { default as OrigamBlockquote } from './OrigamBlockquote.vue';

package/dist/src/components/Blockquote/index.js

@@ -0,0 +1 @@
+export { default as OrigamBlockquote } from "./OrigamBlockquote.vue";

package/dist/src/components/BottomNav/OrigamBottomNav.vue

@@ -5,6 +5,7 @@
 				v-if="isActive"
 				:id="id"
 				:class="bottomNavClasses"
+				aria-label="Bottom navigation"
 				@mouseenter="handleMouseenter"
 				@mouseleave="handleMouseleave"
 		>
@@ -63,8 +64,8 @@ const props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },

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

@@ -148,7 +148,16 @@
 <script setup>
 import { computed, StyleValue } from "vue";
 import OrigamBracketRound from "./OrigamBracketRound.vue";
-import { useProps, useRounded } from "../../composables";
+import {
+  useBackgroundColor,
+  useDimension,
+  useElevation,
+  useMargin,
+  usePadding,
+  useProps,
+  useRounded,
+  useTextColor
+} from "../../composables";
 import {
   BRACKET_DEFAULT_MATCH_GAP,
   BRACKET_DEFAULT_MATCH_HEIGHT,
@@ -163,7 +172,6 @@ const props = defineProps({
   showRoundTitles: { type: Boolean, required: false, default: true },
   showScores: { type: Boolean, required: false, default: true },
   showSeed: { type: Boolean, required: false, default: false },
-  color: { type: String, required: false, default: "primary" },
   interactive: { type: Boolean, required: false, default: true },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -174,7 +182,30 @@ const props = defineProps({
   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 }
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true, default: "primary" },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  height: { type: [Number, String], required: false },
+  maxHeight: { type: [Number, String], required: false },
+  maxWidth: { type: [Number, String], required: false },
+  minHeight: { type: [Number, String], required: false },
+  minWidth: { type: [Number, String], required: false },
+  width: { type: [Number, String], required: false },
+  elevation: { type: [Number, String], required: false },
+  margin: { type: [Boolean, Number, String], required: false },
+  marginTop: { type: [Boolean, Number, String], required: false },
+  marginLeft: { type: [Boolean, Number, String], required: false },
+  marginBottom: { type: [Boolean, Number, String], required: false },
+  marginRight: { type: [Boolean, Number, String], required: false },
+  marginBlock: { type: [Boolean, Number, String], required: false },
+  marginInline: { type: [Boolean, Number, String], required: false },
+  padding: { type: [Boolean, Number, String], required: false },
+  paddingTop: { type: [Boolean, Number, String], required: false },
+  paddingLeft: { type: [Boolean, Number, String], required: false },
+  paddingBottom: { type: [Boolean, Number, String], required: false },
+  paddingRight: { type: [Boolean, Number, String], required: false },
+  paddingBlock: { type: [Boolean, Number, String], required: false },
+  paddingInline: { type: [Boolean, Number, String], required: false }
 });
 const emit = defineEmits(["match-click", "winner-click", "competitor-click"]);
 const { filterProps } = useProps(props);
@@ -258,6 +289,8 @@ const matchHeight = BRACKET_DEFAULT_MATCH_HEIGHT;
 const baseGap = BRACKET_DEFAULT_MATCH_GAP;
 const roundGap = BRACKET_DEFAULT_ROUND_GAP;
 const isHorizontal = computed(() => props.direction === DIRECTION.HORIZONTAL);
+const verticalRoundThickness = 120;
+const roundThickness = computed(() => isHorizontal.value ? matchWidth : verticalRoundThickness);
 const showConnectors = computed(() => {
   if (props.variant === BRACKET_VARIANT.ROUND_ROBIN) return false;
   return displayRounds.value.length > 1;
@@ -274,7 +307,7 @@ const totalHeight = computed(() => {
 });
 const totalWidth = computed(() => {
   const n = displayRounds.value.length;
-  return n * matchWidth + (n - 1) * roundGap;
+  return n * roundThickness.value + (n - 1) * roundGap;
 });
 const connectorViewBox = computed(() => {
   if (isHorizontal.value) {
@@ -287,7 +320,8 @@ const matchYCenter = (_roundIndex, matchIndex, roundMatchCount) => {
   return slot * matchIndex + slot / 2;
 };
 const matchXCenter = (roundIndex) => {
-  return roundIndex * (matchWidth + roundGap) + matchWidth / 2;
+  const t = roundThickness.value;
+  return roundIndex * (t + roundGap) + t / 2;
 };
 const connectorPaths = computed(() => {
   if (!showConnectors.value) return [];
@@ -310,8 +344,8 @@ const connectorPaths = computed(() => {
       if (!nextMatch) continue;
       const fromXCenter = matchXCenter(r);
       const toXCenter = matchXCenter(r + 1);
-      const fromX = fromXCenter + matchWidth / 2;
-      const toX = toXCenter - matchWidth / 2;
+      const fromX = fromXCenter + roundThickness.value / 2;
+      const toX = toXCenter - roundThickness.value / 2;
       const fromY = matchYCenter(r, i, round.matches.length);
       const toY = matchYCenter(r + 1, nextIndex, nextRound.matches.length);
       const midX = (fromX + toX) / 2;
@@ -340,7 +374,7 @@ const roundStyleFor = (_index) => {
   }
   return {
     minWidth: `${totalHeight.value}px`,
-    height: `${matchWidth}px`,
+    height: `${verticalRoundThickness}px`,
     flex: "0 0 auto"
   };
 };
@@ -356,9 +390,21 @@ const onCompetitorClick = (competitor, match, _side, event) => {
   emit("competitor-click", competitor, match, event);
 };
 const { roundedClasses, roundedStyles } = useRounded(props);
+const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
+const { textColorClasses, textColorStyles } = useTextColor(props, "color");
+const { dimensionStyles } = useDimension(props);
+const { elevationClasses, elevationStyles } = useElevation(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
 const rootStyles = computed(() => {
   return [
     roundedStyles.value,
+    backgroundColorStyles.value,
+    textColorStyles.value,
+    dimensionStyles.value,
+    elevationStyles.value,
+    marginStyles.value,
+    paddingStyles.value,
     {
       "--origam-bracket---round-gap": `${roundGap}px`,
       "--origam-bracket---match-gap": `${baseGap}px`
@@ -374,6 +420,11 @@ const rootClasses = computed(() => {
     `origam-bracket--density-${props.density ?? "default"}`,
     `origam-bracket--color-${props.color}`,
     roundedClasses.value,
+    backgroundColorClasses.value,
+    textColorClasses.value,
+    elevationClasses.value,
+    marginClasses.value,
+    paddingClasses.value,
     props.class
   ];
 });
@@ -405,7 +456,11 @@ defineExpose({
 			display: flex;
 			position: relative;
 			gap: var(--origam-bracket---round-gap, 48px);
-			min-width: max-content;
+			/* Pin to natural size — otherwise a wider parent stretches
+			 * the tree, the connectors SVG stretches with it (via
+			 * preserveAspectRatio="none"), but the round columns keep
+			 * their fixed width → connectors land outside the cards. */
+			width: max-content;
 
 			&--direction-horizontal {
 				flex-direction: row;

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

@@ -132,8 +132,10 @@ defineExpose({
 			flex-direction: column;
 
 			.origam-bracket-round__matches {
+				flex: 0 0 auto;
 				flex-direction: row;
 				justify-content: space-around;
+				align-items: flex-start;
 			}
 		}
 	}

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

@@ -2,8 +2,8 @@
 	<component
 			:is="tag"
 			:id="id"
+			:aria-label="t('origam.breadcrumb.ariaLabel', 'Breadcrumb')"
 			:class="breadcrumbClasses"
-			aria-label="Breadcrumb"
 	>
 		<origam-defaults-provider :defaults="slotDefaults">
 			<slot name="default">
@@ -54,6 +54,7 @@
 import { OrigamBreadcrumbDivider, OrigamBreadcrumbItem, OrigamDefaultsProvider } from "../../components";
 import {
   useDensity,
+  useLocale,
   useProps,
   useStateEffect,
   useStyle
@@ -65,8 +66,8 @@ const props = defineProps({
   disabled: { type: Boolean, required: false },
   divider: { type: null, required: false, default: "/" },
   items: { type: Array, required: false, default: () => [] },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   tag: { type: String, required: false, default: "nav" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -103,6 +104,7 @@ const props = defineProps({
   elevation: { type: [Number, String], required: false }
 });
 const { filterProps } = useProps(props);
+const { t } = useLocale();
 const slotDefaults = computed(() => ({
   "origam-breadcrumb-item": {
     density: props.density,

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

@@ -41,7 +41,7 @@ const props = defineProps({
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
   density: { type: null, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { 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

@@ -115,8 +115,8 @@ const _props = defineProps({
   replace: { type: Boolean, required: false },
   to: { type: null, required: false },
   exact: { type: Boolean, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   appendAvatar: { type: String, required: false },
   appendIcon: { type: null, required: false },
@@ -127,7 +127,7 @@ const _props = defineProps({
   activeClass: { type: String, required: false }
 });
 const props = useDefaults(_props);
-defineEmits(["click:append", "click:prepend", "click:append"]);
+defineEmits(["click:append", "click:prepend"]);
 const { filterProps } = useProps(props);
 const attrs = useAttrs();
 const link = useLink(props, attrs);