origam 2.5.0 → 2.6.2

package/dist/src/components/Code/OrigamCode.vue

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			v-contrast
 			:class="codeClasses"
 			:style="codeStyles"
 	>
@@ -14,31 +15,33 @@
 			>
 				<span v-if="filename" class="origam-code__filename" data-cy="origam-code-filename">{{ filename }}</span>
 				<span v-else class="origam-code__lang-badge" data-cy="origam-code-lang">{{ lang }}</span>
-				<button
+				<origam-btn
 						v-if="copyable"
-						type="button"
+						variant="text"
 						class="origam-code__copy origam-code__copy--header"
+						:text="copyButtonLabel"
 						:aria-label="copyAriaLabel"
+						:style="copyBtnStyle"
 						aria-live="polite"
 						data-cy="origam-code-copy"
 						@click="handleCopy"
-				>
-					<span class="origam-code__copy-label">{{ copyButtonLabel }}</span>
-				</button>
+				/>
 			</slot>
 		</component>
 
-		<button
-				v-if="copyable && !showHeader"
-				type="button"
+		<origam-btn
+				v-if="copyable && !showHeader && !compact"
+				variant="text"
 				class="origam-code__copy origam-code__copy--floating"
+				:text="copyButtonLabel"
 				:aria-label="copyAriaLabel"
+				:style="copyBtnStyle"
 				aria-live="polite"
 				data-cy="origam-code-copy"
 				@click="handleCopy"
-		>
-			<span class="origam-code__copy-label">{{ copyButtonLabel }}</span>
-		</button>
+		/>
+
+		<span v-if="compact && prompt" class="origam-code__prompt" aria-hidden="true" data-cy="origam-code-prompt">{{ prompt }}</span>
 
 		<div class="origam-code__scroller" :style="scrollerStyles">
 			<pre class="origam-code__pre" :class="preClasses"><code
@@ -48,6 +51,18 @@
 			></code></pre>
 		</div>
 
+		<origam-btn
+				v-if="copyable && compact"
+				variant="text"
+				size="x-small"
+				class="origam-code__copy origam-code__copy--compact"
+				:icon="compactCopyIcon"
+				:aria-label="copyAriaLabel"
+				aria-live="polite"
+				data-cy="origam-code-copy"
+				@click="handleCopy"
+		/>
+
 		<footer v-if="$slots.footer" class="origam-code__footer">
 			<slot name="footer"/>
 		</footer>
@@ -56,8 +71,9 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, onMounted, ref, toRef, useSlots, watch } from "vue";
+import { OrigamBtn } from "../../components";
 import {
   useBorder,
   useBothColor,
@@ -65,10 +81,13 @@ import {
   useCode,
   useDimension,
   useElevation,
+  useLocale,
   useMargin,
   usePadding,
-  useRounded
+  useRounded,
+  useTypography
 } from "../../composables";
+import { vContrast } from "../../directives";
 import { CODE_DEFAULTS } from "../../consts";
 import { CODE_LANG } from "../../enums";
 import { parseHighlightLines } from "../../utils";
@@ -81,6 +100,8 @@ const props = defineProps({
   format: { type: Boolean, required: false, default: false },
   wrap: { type: Boolean, required: false, default: false },
   filename: { type: String, required: false, default: void 0 },
+  compact: { type: Boolean, required: false, default: false },
+  prompt: { type: String, required: false, default: void 0 },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -121,7 +142,12 @@ const props = defineProps({
   minWidth: { type: [Number, String], required: false },
   width: { type: [Number, String], required: false },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  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(["copy"]);
 const slots = useSlots();
@@ -132,7 +158,9 @@ const { paddingClasses, paddingStyles } = usePadding(props);
 const { marginClasses, marginStyles } = useMargin(props);
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { dimensionStyles } = useDimension(props);
+const { typographyStyles } = useTypography(props, "code");
 const { highlight } = useCode();
+const { t } = useLocale();
 function extractSlotText() {
   const nodes = slots.default?.();
   if (!nodes || nodes.length === 0) return "";
@@ -203,7 +231,7 @@ function paintIntoDom(rawHtml) {
     const lineNo = i + 1;
     const isHl = highlightSet.has(lineNo) ? " origam-code__row--highlighted" : "";
     return `<span class="origam-code__row${isHl}" data-line="${lineNo}">${line || "&nbsp;"}</span>`;
-  }).join("\n");
+  }).join("");
   target.innerHTML = rows;
 }
 watch(
@@ -229,15 +257,24 @@ async function handleCopy() {
   const text = formattedCode.value;
   if (await copy(text)) emit("copy", text);
 }
-const copyButtonLabel = computed(() => copied.value ? "Copied!" : "Copy");
-const copyAriaLabel = computed(() => copied.value ? "Code copied to clipboard" : "Copy code to clipboard");
-const showHeader = computed(() => !!props.filename || !!slots.header);
+const copyButtonLabel = computed(
+  () => copied.value ? t("origam.code.copied", "Copied!") : t("origam.code.copy", "Copy")
+);
+const copyAriaLabel = computed(
+  () => copied.value ? t("origam.code.copiedAriaLabel", "Code copied to clipboard") : t("origam.code.copyAriaLabel", "Copy code to clipboard")
+);
+const copyBtnStyle = {
+  padding: "var(--origam-code__copy---padding-block) var(--origam-code__copy---padding-inline)"
+};
+const showHeader = computed(() => !props.compact && (!!props.filename || !!slots.header || props.copyable));
+const compactCopyIcon = computed(() => copied.value ? "mdi-check" : "mdi-content-copy");
 const headerTag = computed(() => props.tag === "figure" ? "figcaption" : "div");
 const codeClasses = computed(() => [
   "origam-code",
   `origam-code--lang-${props.lang}`,
   {
-    "origam-code--line-numbers": props.lineNumbers,
+    "origam-code--compact": props.compact,
+    "origam-code--line-numbers": props.lineNumbers && !props.compact,
     "origam-code--wrap": props.wrap,
     "origam-code--has-header": showHeader.value,
     "origam-code--copyable": props.copyable,
@@ -257,7 +294,7 @@ const codeStyles = computed(() => [
   marginStyles.value,
   colorStyles.value,
   dimensionStyles.value,
-  {}
+  typographyStyles.value
 ]);
 const preClasses = computed(() => ({
   "origam-code__pre--line-numbers": props.lineNumbers,
@@ -275,6 +312,7 @@ defineExpose({ rebuild, copied, codeRef });
 	.origam-code {
 		position: relative;
 		display: block;
+		margin: 0;
 		background-color: var(--origam-code---background-color);
 		color: var(--origam-code---color);
 		border: var(--origam-code---border-width) solid var(--origam-code---border-color);
@@ -287,6 +325,66 @@ defineExpose({ rebuild, copied, codeRef });
 
 	}
 
+	/* Non-compact blocks lay their regions out as a vertical flex column so the
+	 * scroller fills the leftover height when the host CONSTRAINS the block
+	 * (grid cell, explicit height, max-height). With an auto height the column
+	 * collapses to content, so unconstrained consumers are unaffected. Scoped
+	 * to :not(.--compact) because the compact variant is an inline-flex ROW. */
+	.origam-code:not(.origam-code--compact) {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.origam-code:not(.origam-code--compact) .origam-code__scroller {
+		flex: 1 1 auto;
+		min-height: 0;
+	}
+
+	.origam-code--compact {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--origam-code__compact---gap, 0.5rem);
+		padding: var(--origam-code__compact---padding-block) var(--origam-code__compact---padding-inline);
+		line-height: var(--origam-code__compact---line-height);
+		max-inline-size: 100%;
+	}
+
+	.origam-code--compact .origam-code__scroller {
+		overflow: hidden;
+		min-inline-size: 0;
+	}
+
+	.origam-code--compact .origam-code__pre,
+	.origam-code--compact .origam-code__code,
+	.origam-code--compact .origam-code__row {
+		min-height: 0;
+		white-space: nowrap;
+	}
+
+	.origam-code__prompt {
+		flex: none;
+		color: var(--origam-code__prompt---color);
+		user-select: none;
+	}
+
+	.origam-code__copy--compact {
+		flex: none;
+		--origam-btn---min-height: 0;
+		--origam-btn---min-width: 0;
+		--origam-btn---height: auto;
+		--origam-btn---padding-block: var(--origam-code__compact-copy---padding-block);
+		--origam-btn---padding-inline: var(--origam-code__compact-copy---padding-inline);
+		--origam-btn---border-radius: var(--origam-code__compact-copy---border-radius);
+		--origam-btn---font-size: var(--origam-code__compact-copy---font-size);
+		--origam-btn---color: var(--origam-code__copy---color);
+		--origam-btn---background-color: var(--origam-code__compact-copy---background-color);
+	}
+
+	.origam-code__copy--compact:hover {
+		--origam-btn---color: var(--origam-code__copy---color-hover);
+		background-color: var(--origam-code__copy---background-color-hover) !important;
+	}
+
 	.origam-code__header {
 		display: flex;
 		align-items: center;
@@ -314,23 +412,18 @@ defineExpose({ rebuild, copied, codeRef });
 	}
 
 	.origam-code__copy {
-		all: unset;
-		box-sizing: border-box;
-		cursor: pointer;
-		display: inline-flex;
-		align-items: center;
+		--origam-btn---min-height: 0;
+		--origam-btn---min-width: 0;
+		--origam-btn---border-radius: var(--origam-code__copy---border-radius);
+		--origam-btn---font-size: var(--origam-code__copy---font-size);
+		--origam-btn---color: var(--origam-code__copy---color);
+		--origam-btn---background-color: var(--origam-code__copy---background-color);
 		gap: var(--origam-code__copy---gap);
-		padding: var(--origam-code__copy---padding-block) var(--origam-code__copy---padding-inline);
-		border-radius: var(--origam-code__copy---border-radius);
-		font-size: var(--origam-code__copy---font-size);
-		color: var(--origam-code__copy---color);
-		background-color: var(--origam-code__copy---background-color);
-		transition: color 120ms ease, background-color 120ms ease;
 	}
 
 	.origam-code__copy:hover {
-		color: var(--origam-code__copy---color-hover);
-		background-color: var(--origam-code__copy---background-color-hover);
+		--origam-btn---color: var(--origam-code__copy---color-hover);
+		background-color: var(--origam-code__copy---background-color-hover) !important;
 	}
 
 	.origam-code__copy--floating {
@@ -429,8 +522,18 @@ defineExpose({ rebuild, copied, codeRef });
 	 * `.origam-code__code` class instead — collisions are impossible.
 	 *
 	 * shiki output per token: `<span style="--shiki-light:#X;--shiki-dark:#Y">`.
-	 * We resolve --shiki-light by default, --shiki-dark under data-theme="dark"
-	 * (or prefers-color-scheme: dark when no data-theme is set). */
+	 *
+	 * The DS theming is TWO-AXIS: `data-theme` carries the brand identity and
+	 * `data-mode` (always concrete: "light" | "dark") carries the light/dark
+	 * choice (see useTheme). The light/dark token swap MUST therefore key on
+	 * `data-mode`, NOT on `data-theme="dark"` — a brand theme like
+	 * `data-theme="brand"` is never named "dark", so the old selector silently
+	 * fell through to the `prefers-color-scheme` block and painted the dark
+	 * (near-white) github-dark foreground on a LIGHT surface whenever the OS
+	 * was in dark mode. We resolve `--shiki-light` by default, `--shiki-dark`
+	 * when `data-mode="dark"`. Legacy single-axis `data-theme="dark"` (no
+	 * `data-mode` present) is still honoured, and `prefers-color-scheme` is the
+	 * fallback ONLY when neither axis pins a choice (SSR / un-themed host). */
 	.origam-code__code span {
 		color: var(--shiki-light);
 	}
@@ -439,20 +542,22 @@ defineExpose({ rebuild, copied, codeRef });
 		background-color: var(--shiki-light-bg, transparent);
 	}
 
-	html[data-theme="dark"] .origam-code__code span {
+	html[data-mode="dark"] .origam-code__code span,
+	html:not([data-mode])[data-theme="dark"] .origam-code__code span {
 		color: var(--shiki-dark);
 	}
 
-	html[data-theme="dark"] .origam-code .shiki {
+	html[data-mode="dark"] .origam-code .shiki,
+	html:not([data-mode])[data-theme="dark"] .origam-code .shiki {
 		background-color: var(--shiki-dark-bg, transparent);
 	}
 
 	@media (prefers-color-scheme: dark) {
-		html:not([data-theme="light"]) .origam-code__code span {
+		html:not([data-mode]):not([data-theme="light"]):not([data-theme="dark"]) .origam-code__code span {
 			color: var(--shiki-dark);
 		}
 
-		html:not([data-theme="light"]) .origam-code .shiki {
+		html:not([data-mode]):not([data-theme="light"]):not([data-theme="dark"]) .origam-code .shiki {
 			background-color: var(--shiki-dark-bg, transparent);
 		}
 	}

package/dist/src/components/ColorPicker/OrigamColorPicker.vue

@@ -86,7 +86,7 @@
 	</origam-picker>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   OrigamColorPickerCanvas,
   OrigamColorPickerEdit,
@@ -150,6 +150,7 @@ const props = defineProps({
   persistent: { type: Boolean, required: false },
   tag: { type: String, required: false },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  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 },
@@ -165,8 +166,12 @@ const props = defineProps({
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   title: { type: 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 },
   colorHsv: { type: [Object, null], required: false },
   dotSize: { type: [String, Number], required: false, default: 10 },
   ariaLabel: { type: String, required: false },

package/dist/src/components/ColorPicker/OrigamColorPickerCanvas.vue

@@ -27,7 +27,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { useLocale, useProps, useResizeObserver, useStyle } from "../../composables";
 import { KEYBOARD_VALUES } from "../../enums";
 import { clamp, convertToUnit, getEventCoordinates, int } from "../../utils";
@@ -142,7 +142,8 @@ const handleKeyDown = (e) => {
   const step = e.shiftKey ? STEP_LARGE : STEP_SMALL;
   const hsv = props.colorHsv;
   if (!hsv) return;
-  let { h, s, v, a } = hsv;
+  const { h, a } = hsv;
+  let { s, v } = hsv;
   let handled = false;
   switch (e.key) {
     case KEYBOARD_VALUES.LEFT:

package/dist/src/components/ColorPicker/OrigamColorPickerEdit.vue

@@ -28,7 +28,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamBtn } from "../../components";
 import { useProps, useStyle } from "../../composables";
 import { COLOR_NULL, COLOR_PICKER_MODES } from "../../consts";
@@ -66,7 +66,7 @@ const inputsProps = computed(() => {
         emits("update:colorHsv", mode.from(getColor(color ?? mode.to(COLOR_NULL), target.value)));
       }
     };
-  });
+  }) ?? [];
 });
 const handleUpdateMode = () => {
   const mi = enabledModes.value.findIndex((m) => {

package/dist/src/components/ColorPicker/OrigamColorPickerPreview.vue

@@ -60,7 +60,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamBtn, OrigamSliderField } from "../../components";
 import { useProps, useVModel, useStyle } from "../../composables";
 import { COLOR_NULL, SUPPORTS_EYE_DROPPER } from "../../consts";

package/dist/src/components/ColorPicker/OrigamColorPickerSwatches.vue

@@ -32,7 +32,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamIcon } from "../../components";
 import { useProps, useStyle } from "../../composables";
 import { MDI_ICONS } from "../../enums";

package/dist/src/components/ColorPickerField/OrigamColorPickerField.vue

@@ -126,7 +126,7 @@
 	</origam-text-field>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamColorPicker, OrigamMenu, OrigamSheet, OrigamTextField, OrigamTranslateScale } from "../../components";
 import { useLocale, useProps, useVModel, useStyle } from "../../composables";
 import { COLOR_NULL, ORIGAM_FORM_KEY } from "../../consts";
@@ -140,10 +140,6 @@ const props = defineProps({
   closeText: { type: String, required: false, default: "origam.close" },
   openText: { type: String, required: false, default: "origam.open" },
   closeOnSelect: { type: Boolean, required: false, default: false },
-  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, Object, Boolean, null], required: false, skipCheck: true },
   autofocus: { type: Boolean, required: false },
   counter: { type: [Boolean, Number, String], required: false },
   counterValue: { type: [Number, Function], required: false },
@@ -154,6 +150,10 @@ const props = defineProps({
   type: { type: null, required: false, default: TEXT_FIELD_TYPE.TEXT },
   modelModifiers: { type: [String, Boolean], required: false },
   mask: { 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 },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   centerAffix: { type: Boolean, required: false, default: true },
   dirty: { type: Boolean, required: false },
@@ -168,6 +168,8 @@ const props = defineProps({
   reverse: { type: Boolean, required: false },
   singleLine: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
+  activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  activeBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
@@ -210,6 +212,11 @@ const props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { 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 },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   variant: { type: null, required: false },
@@ -262,6 +269,9 @@ const handleSelectColor = (color) => {
 const selectedValue = computed(() => {
   return model.value;
 });
+const validationValue = computed(() => {
+  return model.value;
+});
 const hasSelectedValue = computed(() => {
   return selectedValue.value !== null;
 });

package/dist/src/components/CommandPalette/OrigamCommandPalette.vue

@@ -32,8 +32,9 @@
 								v-model="query"
 								:aria-activedescendant="activeOptionId"
 								:aria-controls="listboxId"
-								:aria-expanded="String(hasResults)"
+								:aria-expanded="hasResults"
 								:placeholder="placeholder"
+								:style="inputTypographyStyles"
 								aria-autocomplete="list"
 								autocomplete="off"
 								class="origam-command-palette__input"
@@ -75,6 +76,7 @@
 							>
 								<div
 										v-if="group.label"
+										:style="groupTitleTypographyStyles"
 										class="origam-command-palette__group-title"
 								>
 									{{ group.label }}
@@ -161,11 +163,12 @@
 	</teleport>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, nextTick, ref, StyleValue, useSlots, watch } from "vue";
 import { OrigamIcon, OrigamKbd } from "../../components";
 import { useCommand } from "../../composables/CommandPalette/command.composable";
 import { useHotkey } from "../../composables/Commons/hotkey.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
 import { useVModel } from "../../composables/Commons/vModel.composable";
 import {
   COMMAND_PALETTE_DEFAULT_HOTKEY,
@@ -190,7 +193,12 @@ const props = defineProps({
   closeOnBackdrop: { type: Boolean, required: false, default: true },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
-  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true }
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  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(["update:modelValue", "select", "query"]);
 defineSlots();
@@ -370,6 +378,8 @@ const navigateText = "Navigate";
 const selectText = "Select";
 const closeText = "Close";
 const hasDefaultFooter = computed(() => true);
+const { typographyStyles: groupTitleTypographyStyles } = useTypography(props, "command-palette__group-title");
+const { typographyStyles: inputTypographyStyles } = useTypography(props, "command-palette__input");
 function itemClasses(cmd) {
   return [
     "origam-command-palette__item",

package/dist/src/components/ConfirmWrapper/OrigamConfirmWrapper.vue

@@ -124,7 +124,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, StyleValue, useSlots, watch } from "vue";
 import {
   OrigamAvatar,

package/dist/src/components/ContextualMenu/OrigamContextualMenu.vue

@@ -22,7 +22,7 @@
 	</origam-menu>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamMenu, OrigamTranslateScale } from "../../components";
 import { useProps, useVModel, useStyle } from "../../composables";
 import { INLINE, LOCATION_STRATEGIES, SCROLL_STRATEGIES } from "../../enums";
@@ -135,7 +135,12 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
-  hover: { type: [Boolean, Object], required: false }
+  hover: { type: [Boolean, Object], 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 { filterProps } = useProps(props);
 const modelValue = useVModel(props, "modelValue", false);

package/dist/src/components/Counter/OrigamCounter.vue

@@ -19,7 +19,7 @@
 	</origam-transition>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamSlideY, OrigamTransition } from "../../components";
 import { useBothColor, useProps, useSsrBoot, useStyle } from "../../composables";
 import { computed, StyleValue, toRef } from "vue";
@@ -61,6 +61,7 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   elevation: { type: [Number, String], required: false },
   density: { type: null, required: false },
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamSlideY }) }

package/dist/src/components/DataList/OrigamDataList.vue

@@ -1,5 +1,6 @@
 <template>
 	<dl
+			v-contrast
 			:class="dataListClasses"
 			:style="dataListStyles"
 	>
@@ -126,7 +127,7 @@
 
 							<template v-if="item.text">
 								<template
-										v-for="(data, i) in item.text"
+										v-for="(data, i) in getTextItems(item)"
 										:key="i"
 								>
 									<origam-data-text
@@ -169,7 +170,7 @@
 	</dl>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, isVNode, StyleValue, toRef, useSlots } from "vue";
 import { OrigamDataText, OrigamDataTitle } from "../../components";
 import {
@@ -182,8 +183,10 @@ import {
   usePadding,
   useProps,
   useRounded,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
+import { vContrast } from "../../directives";
 import { isDataListKVItemValueComponent } from "../../utils";
 import { isEmpty, toKebabCase } from "../../utils";
 const props = defineProps({
@@ -227,7 +230,12 @@ const props = defineProps({
   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 }
+  elevation: { type: [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 { filterProps } = useProps(props);
 const slots = useSlots();
@@ -238,13 +246,15 @@ const { roundedClasses, roundedStyles } = useRounded(props);
 const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { marginClasses, marginStyles } = useMargin(props);
+const { typographyStyles: titleTypographyStyles } = useTypography(props, "data-list__title");
+const { typographyStyles: textTypographyStyles } = useTypography(props, "data-list__text");
 const isKvMode = computed(() => props.mode === "kv");
 const hasItems = computed(() => {
   return !isEmpty(props.items);
 });
 const avatarItems = computed(() => {
   if (isKvMode.value || !props.items) return [];
-  return props.items;
+  return Array.isArray(props.items) ? props.items : Object.values(props.items);
 });
 const kvItems = computed(() => {
   if (!isKvMode.value || !props.items) return [];
@@ -257,6 +267,10 @@ function isComponentValue(v) {
 function isVNodeValue(v) {
   return isVNode(v);
 }
+function getTextItems(item) {
+  if (!item.text) return [];
+  return Array.isArray(item.text) ? item.text : Object.values(item.text);
+}
 function getComponentTag(v) {
   return v.component;
 }
@@ -274,6 +288,8 @@ const dataListStyles = computed(() => {
     marginStyles.value,
     colorStyles.value,
     roundedStyles.value,
+    titleTypographyStyles.value,
+    textTypographyStyles.value,
     props.style
   ];
 });