origam 2.16.0 → 2.17.0

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

@@ -1,9 +1,9 @@
 <template>
 	<component
-			:is="props.tag"
+			:is="tag"
 			:id="id"
 			:class="avatarClasses"
-			@click="handleClick"
+			@click="handleClick()"
 			@mouseenter="handleMouseenter"
 			@mouseleave="handleMouseleave"
 	>
@@ -46,21 +46,18 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamIcon, OrigamImg } from "../../components";
-import {
-  useActive,
-  useDefaults,
-  useDensity,
-  useHover,
-  useProps,
-  useSize,
-  useStateEffect,
-  useStyle,
-  useTypography
-} from "../../composables";
-import { isEmpty } from "../../utils";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import OrigamImg from "../Img/OrigamImg.vue";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useSize } from "../../composables/Commons/size.composable";
+import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
+import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
+import { isEmpty } from "../../utils/Commons/commons.util";
 import { computed, useSlots } from "vue";
-const _props = defineProps({
+const props = defineProps({
   icon: { type: null, required: false },
   image: { type: [String, Object], required: false },
   text: { type: String, required: false },
@@ -106,20 +103,19 @@ 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 },
-  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 props = useDefaults(_props);
 defineEmits(["update:active", "update:hover"]);
 defineSlots();
 const { filterProps } = useProps(props);
-const { hoverClasses, isHover, hoverState, onMouseleave: handleMouseleave, onMouseenter: handleMouseenter } = useHover(props);
-const { activeClasses, isActive, activeState, onActive: handleClick } = useActive(props);
+const { classes: hoverClasses, isOn: isHover, config: hoverState, unset: handleMouseleave, set: handleMouseenter } = useStateFlag(props, { state: "hover" });
+const { classes: activeClasses, isOn: isActive, config: activeState, toggle: handleClick } = useStateFlag(props, { state: "active" });
 const { colorClasses, colorStyles, borderClasses, borderStyles, roundedClasses, roundedStyles, elevationClasses, elevationStyles, paddingClasses, paddingStyles, marginClasses, marginStyles } = useStateEffect(props, isHover, isActive, hoverState, activeState);
 const { typographyStyles } = useTypography(props, "avatar");
 const slots = useSlots();
@@ -175,7 +171,7 @@ const avatarClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(avatarStyles);
+const { id, css, load, isLoaded, unload } = useStyle(avatarStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -217,7 +213,7 @@ defineExpose({
 		overflow: var(--origam-avatar---overflow);
 		position: var(--origam-avatar---position);
 
-		transition: var(--origam-avatar---transition);
+		transition: var(--origam-avatar---transition-property) var(--origam-avatar---transition-duration) var(--origam-avatar---transition-timing-function);
 
 		border-color: var(--origam-avatar---border-color);
 		border-style: var(--origam-avatar---border-style);
@@ -228,14 +224,23 @@ defineExpose({
 		box-shadow: var(--origam-avatar---box-shadow);
 		color: var(--origam-avatar---color);
 
-		padding-block-start: var(--origam-avatar---padding-block-start);
-		padding-block-end: var(--origam-avatar---padding-block-end);
-		padding-inline-start: var(--origam-avatar---padding-inline-start);
-		padding-inline-end: var(--origam-avatar---padding-inline-end);
-		margin-block-start: var(--origam-avatar---margin-block-start);
-		margin-block-end: var(--origam-avatar---margin-block-end);
-		margin-inline-start: var(--origam-avatar---margin-inline-start);
-		margin-inline-end: var(--origam-avatar---margin-inline-end);
+		// ⛔ #C2 — zero-specificity defaults so a scale-driven utility
+		// class (`.origam--p-4` from `padding="4"`, `.origam--m-4` from
+		// `margin="4"`) wins the cascade. Without `:where()`, this scoped
+		// rule's [data-v-hash] pushes each longhand to (0,2,0), beating
+		// the utility's (0,1,0) — the utility sets the `padding`/`margin`
+		// SHORTHAND, but specificity is compared per longhand, so these
+		// per-edge declarations always won regardless of load order.
+		:where(&) {
+			padding-block-start: var(--origam-avatar---padding-block-start);
+			padding-block-end: var(--origam-avatar---padding-block-end);
+			padding-inline-start: var(--origam-avatar---padding-inline-start);
+			padding-inline-end: var(--origam-avatar---padding-inline-end);
+			margin-block-start: var(--origam-avatar---margin-block-start);
+			margin-block-end: var(--origam-avatar---margin-block-end);
+			margin-inline-start: var(--origam-avatar---margin-inline-start);
+			margin-inline-end: var(--origam-avatar---margin-inline-end);
+		}
 
 		&__wrapper {
 			flex: var(--origam-avatar__wrapper---flex);
@@ -339,20 +344,20 @@ defineExpose({
 		}
 
 		&--size-x-small {
-			--origam-avatar---height: 24px;
-			--origam-avatar---width: 24px;
+			--origam-avatar---height: var(--origam-avatar---size-xs, 24px);
+			--origam-avatar---width: var(--origam-avatar---size-xs, 24px);
 			--origam-avatar---font-size: 1rem;
 		}
 
 		&--size-small {
-			--origam-avatar---height: 32px;
-			--origam-avatar---width: 32px;
+			--origam-avatar---height: var(--origam-avatar---size-sm, 32px);
+			--origam-avatar---width: var(--origam-avatar---size-sm, 32px);
 			--origam-avatar---font-size: 1.25rem;
 		}
 
 		&--size-default {
-			--origam-avatar---height: 40px;
-			--origam-avatar---width: 40px;
+			--origam-avatar---height: var(--origam-avatar---size-md, 40px);
+			--origam-avatar---width: var(--origam-avatar---size-md, 40px);
 			--origam-avatar---font-size: 1.5rem;
 		}
 
@@ -384,8 +389,8 @@ defineExpose({
 		}
 
 		&--error {
-			--origam-avatar---background-color: var(--origam-avatar--danger---background-color, var(--origam-color__feedback--danger---bg));
-			--origam-avatar---color: var(--origam-avatar--danger---color, var(--origam-color__feedback--danger---fg));
+			--origam-avatar---background-color: var(--origam-avatar--danger---background-color, var(--origam-avatar--error---background-color, var(--origam-color__feedback--danger---bg)));
+			--origam-avatar---color: var(--origam-avatar--danger---color, var(--origam-avatar--error---color, var(--origam-color__feedback--danger---fg)));
 		}
 	}
 </style>

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

@@ -1,11 +1,16 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			v-click-outside="clickOutsideArgs"
 			:class="avatarGroupClasses"
 			:style="avatarGroupStyles"
 			role="group"
+			:tabindex="isClickExpandable ? 0 : undefined"
+			:aria-expanded="isClickExpandable ? isExpanded : undefined"
 			@click="handleClick"
+			@keydown.enter.prevent="handleKeydownExpand"
+			@keydown.space.prevent="handleKeydownExpand"
 			@mouseenter="handleMouseEnter"
 			@mouseleave="handleMouseLeave"
 	>
@@ -48,11 +53,18 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamAvatar, OrigamDefaultsProvider } from "../../components";
-import { useActive, useDensity, useHover, usePassedProps, useProps, useRtl, useStateEffect, useStyle } from "../../composables";
-import { vClickOutside } from "../../directives";
-import { DIRECTION } from "../../enums";
-import { omitUndefined } from "../../utils";
+import OrigamAvatar from "./OrigamAvatar.vue";
+import OrigamDefaultsProvider from "../DefaultsProvider/OrigamDefaultsProvider.vue";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { usePassedProps } from "../../composables/Commons/passedProps.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRtl } from "../../composables/Commons/rtl.composable";
+import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
+import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import vClickOutside from "../../directives/ClickOutside/clickOutside.directive";
+import { DIRECTION } from "../../enums/Commons/direction.enum";
+import { omitUndefined } from "../../utils/Commons/commons.util";
 import { computed, mergeProps, ref } from "vue";
 const props = defineProps({
   items: { type: Array, required: false, default: () => [] },
@@ -102,6 +114,7 @@ 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 }
 });
@@ -122,7 +135,7 @@ const slotDefaults = computed(() => ({
 defineEmits(["update:active", "update:hover"]);
 defineSlots();
 const { filterProps } = useProps(props);
-const { isRtl } = useRtl();
+const { rtlClasses } = useRtl();
 const isExpanded = ref(false);
 const effectiveMax = computed(() => {
   return isExpanded.value ? props.items.length : props.max;
@@ -142,8 +155,8 @@ const displayItems = computed(() => {
   }
   return props.items;
 });
-const { hoverClasses, hoverState, isHover, onMouseleave, onMouseenter } = useHover(props);
-const { activeClasses, activeState, isActive, onActive } = useActive(props);
+const { classes: hoverClasses, config: hoverState, isOn: isHover, unset: onMouseleave, set: onMouseenter } = useStateFlag(props, { state: "hover" });
+const { classes: activeClasses, config: activeState, isOn: isActive, toggle: onActive } = useStateFlag(props, { state: "active" });
 const forwardState = (state, isOn) => {
   return state && typeof state === "object" ? { ...state, enabled: isOn } : isOn;
 };
@@ -171,6 +184,12 @@ const handleClick = () => {
   }
   onActive();
 };
+const isClickExpandable = computed(() => Boolean(props.expandOnClick));
+const handleKeydownExpand = () => {
+  if (isClickExpandable.value) {
+    handleClick();
+  }
+};
 const handleClickOutside = () => {
   isExpanded.value = false;
   if (isActive.value) {
@@ -201,9 +220,9 @@ const avatarGroupClasses = computed(() => {
     `origam-avatar-group--${props.direction}`,
     {
       "origam-avatar-group--expand-on-hover": props.expandOnHover,
-      "origam-avatar-group--expand-on-click": props.expandOnClick,
-      "origam-avatar-group--rtl": isRtl
+      "origam-avatar-group--expand-on-click": props.expandOnClick
     },
+    rtlClasses.value,
     hoverClasses.value,
     activeClasses.value,
     marginClasses.value,
@@ -212,7 +231,7 @@ const avatarGroupClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(avatarGroupStyles);
+const { id, css, load, isLoaded, unload } = useStyle(avatarGroupStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -233,14 +252,23 @@ defineExpose({
 		display: inline-flex;
 		flex-direction: var(--origam-avatar-group---flex-direction);
 
-		padding-block-start: var(--origam-avatar-group---padding-block-start);
-		padding-block-end: var(--origam-avatar-group---padding-block-end);
-		padding-inline-start: var(--origam-avatar-group---padding-inline-start);
-		padding-inline-end: var(--origam-avatar-group---padding-inline-end);
-		margin-block-start: var(--origam-avatar-group---margin-block-start);
-		margin-block-end: var(--origam-avatar-group---margin-block-end);
-		margin-inline-start: var(--origam-avatar-group---margin-inline-start);
-		margin-inline-end: var(--origam-avatar-group---margin-inline-end);
+		// ⛔ #C2 — zero-specificity defaults so a scale-driven utility
+		// class (`.origam--p-4` from `padding="4"`, `.origam--m-4` from
+		// `margin="4"`) wins the cascade. Without `:where()`, this scoped
+		// rule's [data-v-hash] pushes each longhand to (0,2,0), beating
+		// the utility's (0,1,0) — the utility sets the `padding`/`margin`
+		// SHORTHAND, but specificity is compared per longhand, so these
+		// per-edge declarations always won regardless of load order.
+		:where(&) {
+			padding-block-start: var(--origam-avatar-group---padding-block-start);
+			padding-block-end: var(--origam-avatar-group---padding-block-end);
+			padding-inline-start: var(--origam-avatar-group---padding-inline-start);
+			padding-inline-end: var(--origam-avatar-group---padding-inline-end);
+			margin-block-start: var(--origam-avatar-group---margin-block-start);
+			margin-block-end: var(--origam-avatar-group---margin-block-end);
+			margin-inline-start: var(--origam-avatar-group---margin-inline-start);
+			margin-inline-end: var(--origam-avatar-group---margin-inline-end);
+		}
 
 		&__item {
 			margin-block-start: var(--origam-avatar-group__item---margin-block-start);
@@ -276,6 +304,14 @@ defineExpose({
 			}
 		}
 
+    &--is-rtl {
+      direction: rtl;
+    }
+
+    &--is-ltr {
+      direction: ltr;
+    }
+
 		&--expand-on-click {
 			cursor: pointer;
 		}

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

@@ -15,7 +15,7 @@
 						v-show="modelValue"
 						:id="id"
 						v-contrast
-						:aria-label="t(label, content)"
+						:aria-label="badgeAriaLabel"
 						:class="badgeContentClasses"
 						:style="typographyStyles"
 						aria-atomic="true"
@@ -29,7 +29,10 @@
 								<span
 										key="prepend"
 										class="origam-badge__prepend"
+										:role="isPrependClickable ? 'button' : undefined"
+										:tabindex="isPrependClickable ? 0 : undefined"
 										@click="handleClickPrepend"
+										@keydown="handleKeydownPrepend"
 								>
 									<slot name="prepend">
 										<origam-avatar
@@ -60,7 +63,10 @@
 								<span
 										key="append"
 										class="origam-badge__append"
+										:role="isAppendClickable ? 'button' : undefined"
+										:tabindex="isAppendClickable ? 0 : undefined"
 										@click="handleClickAppend"
+										@keydown="handleKeydownAppend"
 								>
 									<slot name="append">
 										<origam-avatar
@@ -85,21 +91,21 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamAvatar, OrigamFade, OrigamIcon, OrigamTransition } from "../../components";
-import {
-  useActive,
-  useAdjacent,
-  useHover,
-  useLocale,
-  useLocation,
-  useProps,
-  useStateEffect,
-  useStatus,
-  useStyle,
-  useTypography
-} from "../../composables";
-import { vContrast } from "../../directives";
-import { omit, pick } from "../../utils";
+import OrigamAvatar from "../Avatar/OrigamAvatar.vue";
+import OrigamFade from "../Transition/OrigamFade.vue";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import OrigamTransition from "../Transition/OrigamTransition.vue";
+import { useAdjacent } from "../../composables/Commons/adjacent.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useLocation } from "../../composables/Commons/location.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
+import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
+import { useStatus } from "../../composables/Commons/status.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
+import vContrast from "../../directives/Contrast/contrast.directive";
+import { omit, pick } from "../../utils/Commons/commons.util";
 import { computed, ComputedRef, StyleValue, useAttrs } from "vue";
 const props = defineProps({
   content: { type: [Number, String], required: false },
@@ -137,35 +143,36 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamFade }) },
-  disabled: { type: Boolean, required: false },
   status: { type: null, required: false },
   statusIconPosition: { type: null, required: false },
   icon: { type: null, required: false },
   hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, required: false },
   elevation: { type: [Number, String], required: false },
-  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 },
   appendAvatar: { type: String, required: false },
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false }
 });
-defineEmits(["click:append", "click:prepend"]);
+defineEmits(["click:append", "click:prepend", "update:hover"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const attrs = useAttrs();
-const { hoverClasses, isHover, hoverState, onMouseleave: handleMouseleave, onMouseenter: handleMouseenter } = useHover(props);
-const { activeClasses, isActive, activeState } = useActive(props, "modelValue");
+const { classes: hoverClasses, isOn: isHover, config: hoverState, unset: handleMouseleave, set: handleMouseenter } = useStateFlag(props, { state: "hover" });
+const { classes: activeClasses, isOn: isActive, config: activeState } = useStateFlag(props, { state: "active", source: "modelValue" });
 const { colorClasses, colorStyles, borderClasses, borderStyles, roundedClasses, roundedStyles, elevationClasses, elevationStyles } = useStateEffect(props, isHover, isActive, hoverState, activeState);
 const { typographyStyles } = useTypography(props, "badge__badge");
 const { icon, prependIcon, appendIcon, statusClasses } = useStatus(props);
 const {
   onClickPrepend: handleClickPrepend,
   onClickAppend: handleClickAppend,
+  onKeydownPrepend: handleKeydownPrepend,
+  onKeydownAppend: handleKeydownAppend,
+  isPrependClickable,
+  isAppendClickable,
   hasAppend,
   hasPrepend
 } = useAdjacent(props, prependIcon, appendIcon);
@@ -185,6 +192,10 @@ const content = computed(() => {
   }
   return `${props.max}+`;
 });
+const badgeAriaLabel = computed(() => {
+  const hasTextContent = !props.dot && !hasIcon.value && content.value !== void 0 && content.value !== null && content.value !== "";
+  return hasTextContent ? String(content.value) : t(props.label);
+});
 const badgeAttrs = computed(() => {
   return pick(attrs, [
     "aria-atomic",
@@ -240,7 +251,7 @@ const badgeContentClasses = computed(() => {
     elevationClasses.value
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(badgeContentStyles);
+const { id, css, load, isLoaded, unload } = useStyle(badgeContentStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -266,7 +277,7 @@ defineExpose({
 
 			position: var(--origam-badge__badge---position);
 			pointer-events: var(--origam-badge__badge---pointer-events);
-			transition: var(--origam-badge__badge---transition);
+			transition: var(--origam-badge__badge---transition-property) var(--origam-badge__badge---transition-duration) var(--origam-badge__badge---transition-timing-function);
 
 			border-width: var(--origam-badge__badge---border-width);
 			border-style: var(--origam-badge__badge---border-style);
@@ -419,8 +430,8 @@ defineExpose({
 		}
 
 		&--error {
-			--origam-badge__badge---background-color: var(--origam-badge--danger---background-color, var(--origam-color__feedback--danger---bg));
-			--origam-badge__badge---color: var(--origam-badge--danger---color, var(--origam-color__feedback--danger---fg));
+			--origam-badge__badge---background-color: var(--origam-badge--danger---background-color, var(--origam-badge--error---background-color, var(--origam-color__feedback--danger---bg)));
+			--origam-badge__badge---color: var(--origam-badge--danger---color, var(--origam-badge--error---color, var(--origam-color__feedback--danger---fg)));
 		}
 	}
 </style>

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

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			:cite="cite"
 			:class="blockquoteClasses"
 			:style="blockquoteStyles"
@@ -19,14 +20,18 @@
 				v-if="hasAttribution"
 				class="origam-blockquote__attribution"
 		>
-			<span class="origam-blockquote__dash" aria-hidden="true">— </span>
+			<span
+					v-if="hasAuthor"
+					class="origam-blockquote__dash"
+					aria-hidden="true"
+			>— </span>
 
 			<span class="origam-blockquote__author">
 				<slot name="author">{{ author }}</slot>
 			</span>
 
 			<span
-					v-if="hasSource"
+					v-if="hasAuthor && hasSource"
 					class="origam-blockquote__separator"
 					aria-hidden="true"
 			>, </span>
@@ -49,16 +54,14 @@ import {
   StyleValue,
   useSlots
 } from "vue";
-import {
-  useBorder,
-  useElevation,
-  useMargin,
-  usePadding,
-  useRounded,
-  useTypography
-} from "../../composables";
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useElevation } from "../../composables/Commons/elevation.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
 import { QUOTE_MARKS_BY_LANG } from "../../consts/Blockquote/blockquote.const";
-import { isIntent, warnDeprecatedProp } from "../../utils";
+import { isIntent, warnDeprecatedProp } from "../../utils/Commons/color.util";
 const props = defineProps({
   variant: { type: null, required: false, default: "default" },
   author: { type: String, required: false },
@@ -112,6 +115,7 @@ const props = defineProps({
   lineHeight: { type: null, required: false },
   letterSpacing: { type: null, required: false }
 });
+defineEmits([]);
 defineSlots();
 const slots = useSlots();
 const resolvedLang = ref("en");
@@ -221,6 +225,7 @@ defineExpose({
 		--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-letter-spacing: var(--origam-blockquote---letter-spacing, normal);
 		--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));
@@ -234,6 +239,7 @@ defineExpose({
 		font-style: var(--origam-blockquote---resolved-font-style);
 		font-weight: var(--origam-blockquote---resolved-font-weight);
 		line-height: var(--origam-blockquote---resolved-line-height);
+		letter-spacing: var(--origam-blockquote---resolved-letter-spacing);
 		color: var(--origam-blockquote---color, var(--origam-color__text---primary, #171717));
 		box-sizing: border-box;
 	}