origam 2.3.0 → 2.5.0

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

@@ -3,16 +3,14 @@
 			:is="tag"
 			:class="codeClasses"
 			:style="codeStyles"
-			role="region"
-			:aria-label="ariaRegionLabel"
 	>
-		<div v-if="showHeader" class="origam-code__header">
+		<component :is="headerTag" v-if="showHeader" class="origam-code__header">
 			<slot
 					name="header"
 					:filename="filename"
 					:lang-name="lang"
 					:copy="handleCopy"
-					:copied="isCopied"
+					:copied="copied"
 			>
 				<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>
@@ -28,7 +26,7 @@
 					<span class="origam-code__copy-label">{{ copyButtonLabel }}</span>
 				</button>
 			</slot>
-		</div>
+		</component>
 
 		<button
 				v-if="copyable && !showHeader"
@@ -50,27 +48,29 @@
 			></code></pre>
 		</div>
 
-		<div v-if="$slots.footer" class="origam-code__footer">
+		<footer v-if="$slots.footer" class="origam-code__footer">
 			<slot name="footer"/>
-		</div>
+		</footer>
 
 		<slot/>
 	</component>
 </template>
 
 <script setup>
-import { computed, onBeforeUnmount, onMounted, ref, useSlots, watch } from "vue";
+import { computed, onMounted, ref, toRef, useSlots, watch } from "vue";
 import {
   useBorder,
+  useBothColor,
+  useClipboard,
   useCode,
+  useDimension,
   useElevation,
   useMargin,
   usePadding,
-  useRounded,
-  useTheme
+  useRounded
 } from "../../composables";
 import { CODE_DEFAULTS } from "../../consts";
-import { CODE_LANG, CODE_THEME } from "../../enums";
+import { CODE_LANG } from "../../enums";
 import { parseHighlightLines } from "../../utils";
 const props = defineProps({
   code: { type: String, required: false, default: void 0 },
@@ -78,15 +78,13 @@ const props = defineProps({
   lineNumbers: { type: Boolean, required: false, default: false },
   highlightLines: { type: [Array, String, null], required: false, default: null },
   copyable: { type: Boolean, required: false, default: true },
-  maxHeight: { type: [Number, String, null], required: false, default: null },
-  theme: { type: null, required: false, default: CODE_THEME.AUTO },
   format: { type: Boolean, required: false, default: false },
   wrap: { type: Boolean, required: false, default: false },
   filename: { 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 },
-  tag: { type: String, required: false, default: "div" },
+  tag: { type: String, required: false, default: "figure" },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -115,7 +113,15 @@ const props = defineProps({
   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 }
+  marginInline: { type: [Boolean, Number, String], required: false },
+  height: { type: [Number, String], required: false },
+  maxHeight: { type: [Number, String], required: false },
+  maxWidth: { type: [Number, String], required: false },
+  minHeight: { type: [Number, String], required: false },
+  minWidth: { type: [Number, String], required: false },
+  width: { type: [Number, String], required: false },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
 const emit = defineEmits(["copy"]);
 const slots = useSlots();
@@ -124,7 +130,8 @@ const { roundedClasses, roundedStyles } = useRounded(props);
 const { elevationClasses } = useElevation(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { marginClasses, marginStyles } = useMargin(props);
-const { resolved: resolvedTheme } = useTheme();
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { dimensionStyles } = useDimension(props);
 const { highlight } = useCode();
 function extractSlotText() {
   const nodes = slots.default?.();
@@ -170,11 +177,6 @@ const formattedCode = computed(() => {
 const codeRef = ref(null);
 const isHighlighting = ref(false);
 let _renderToken = 0;
-const themeName = computed(() => {
-  if (props.theme === CODE_THEME.LIGHT) return "light";
-  if (props.theme === CODE_THEME.DARK) return "dark";
-  return resolvedTheme.value === "dark" ? "dark" : "light";
-});
 const highlightedLines = computed(() => {
   const arr = parseHighlightLines(props.highlightLines);
   return new Set(arr);
@@ -183,7 +185,7 @@ async function rebuild() {
   const token = ++_renderToken;
   isHighlighting.value = true;
   try {
-    const html = await highlight(formattedCode.value, props.lang, themeName.value);
+    const html = await highlight(formattedCode.value, props.lang);
     if (token !== _renderToken) return;
     paintIntoDom(html);
   } finally {
@@ -205,7 +207,7 @@ function paintIntoDom(rawHtml) {
   target.innerHTML = rows;
 }
 watch(
-  [formattedCode, () => props.lang, themeName],
+  [formattedCode, () => props.lang],
   () => {
     void rebuild();
   },
@@ -222,52 +224,17 @@ watch(highlightedLines, () => {
 onMounted(() => {
   void rebuild();
 });
-const isCopied = ref(false);
-let _copyTimeout = null;
-async function writeToClipboard(text) {
-  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
-    try {
-      await navigator.clipboard.writeText(text);
-      return true;
-    } catch {
-    }
-  }
-  try {
-    const textarea = document.createElement("textarea");
-    textarea.value = text;
-    textarea.setAttribute("readonly", "");
-    textarea.style.position = "fixed";
-    textarea.style.opacity = "0";
-    document.body.appendChild(textarea);
-    textarea.select();
-    const ok = document.execCommand("copy");
-    document.body.removeChild(textarea);
-    return ok;
-  } catch {
-    return false;
-  }
-}
+const { copy, copied } = useClipboard({ feedbackDuration: CODE_DEFAULTS.copyFeedbackDurationMs });
 async function handleCopy() {
   const text = formattedCode.value;
-  const ok = await writeToClipboard(text);
-  if (!ok) return;
-  emit("copy", text);
-  isCopied.value = true;
-  if (_copyTimeout) clearTimeout(_copyTimeout);
-  _copyTimeout = setTimeout(() => {
-    isCopied.value = false;
-  }, CODE_DEFAULTS.copyFeedbackDurationMs);
+  if (await copy(text)) emit("copy", text);
 }
-onBeforeUnmount(() => {
-  if (_copyTimeout) clearTimeout(_copyTimeout);
-});
-const copyButtonLabel = computed(() => isCopied.value ? "Copied!" : "Copy");
-const copyAriaLabel = computed(() => isCopied.value ? "Code copied to clipboard" : "Copy code to clipboard");
-const ariaRegionLabel = computed(() => props.filename ? `Code block: ${props.filename}` : `Code block (${props.lang})`);
+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 headerTag = computed(() => props.tag === "figure" ? "figcaption" : "div");
 const codeClasses = computed(() => [
   "origam-code",
-  `origam-code--theme-${themeName.value}`,
   `origam-code--lang-${props.lang}`,
   {
     "origam-code--line-numbers": props.lineNumbers,
@@ -280,13 +247,16 @@ const codeClasses = computed(() => [
   roundedClasses.value,
   elevationClasses.value,
   paddingClasses.value,
-  marginClasses.value
+  marginClasses.value,
+  colorClasses.value
 ]);
 const codeStyles = computed(() => [
   borderStyles.value,
   roundedStyles.value,
   paddingStyles.value,
   marginStyles.value,
+  colorStyles.value,
+  dimensionStyles.value,
   {}
 ]);
 const preClasses = computed(() => ({
@@ -298,7 +268,7 @@ const scrollerStyles = computed(() => {
   const value = typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight;
   return { "--origam-code---max-height": value, maxHeight: value };
 });
-defineExpose({ rebuild, isCopied, codeRef });
+defineExpose({ rebuild, copied, codeRef });
 </script>
 
 <style lang="scss">
@@ -314,6 +284,7 @@ defineExpose({ rebuild, isCopied, codeRef });
 		font-size: var(--origam-code---font-size);
 		line-height: var(--origam-code---line-height);
 		overflow: hidden;
+
 	}
 
 	.origam-code__header {
@@ -409,7 +380,7 @@ defineExpose({ rebuild, isCopied, codeRef });
 	.origam-code--line-numbers .origam-code__row {
 		counter-increment: line;
 		position: relative;
-		padding-inline-start: var(--origam-code__line-number---width);
+		padding-inline-start: var(--origam-code---line-number-width);
 	}
 
 	.origam-code--line-numbers .origam-code__row::before {
@@ -417,10 +388,11 @@ defineExpose({ rebuild, isCopied, codeRef });
 		position: absolute;
 		left: 0;
 		top: 0;
-		width: var(--origam-code__line-number---width);
-		padding-right: var(--origam-code__line-number---padding-right);
+		box-sizing: border-box;
+		width: var(--origam-code---line-number-width);
+		padding-right: var(--origam-code---line-number-padding-right);
 		text-align: right;
-		color: var(--origam-code__line-number---color);
+		color: var(--origam-code---line-number-color);
 		user-select: none;
 		font-variant-numeric: tabular-nums;
 	}
@@ -447,3 +419,41 @@ defineExpose({ rebuild, isCopied, codeRef });
 		border-radius: 4px;
 	}
 </style>
+
+<style lang="scss">
+	/* Dual-theme shiki — UNSCOPED on purpose. shiki injects token spans
+	 * via v-html, so they don't carry the parent SFC's data-v scoping
+	 * attribute. A scoped selector (even :deep) doesn't reliably match
+	 * the deeply-nested untagged spans. An unscoped block keeps the
+	 * selector simple and reliable. We scope by the dedicated
+	 * `.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). */
+	.origam-code__code span {
+		color: var(--shiki-light);
+	}
+
+	.origam-code .shiki {
+		background-color: var(--shiki-light-bg, transparent);
+	}
+
+	html[data-theme="dark"] .origam-code__code span {
+		color: var(--shiki-dark);
+	}
+
+	html[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 {
+			color: var(--shiki-dark);
+		}
+
+		html:not([data-theme="light"]) .origam-code .shiki {
+			background-color: var(--shiki-dark-bg, transparent);
+		}
+	}
+</style>

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

@@ -141,8 +141,6 @@ const props = defineProps({
   marginInline: { type: [Boolean, Number, String], required: false },
   landscape: { type: Boolean, required: false },
   hideHeader: { type: Boolean, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   side: { type: null, required: false },
   swipeable: { type: Boolean, required: false },
   snapPoints: { type: Array, required: false },
@@ -151,6 +149,7 @@ const props = defineProps({
   disabled: { type: Boolean, required: false },
   persistent: { type: Boolean, required: false },
   tag: { type: String, required: false },
+  color: { 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 },
@@ -166,9 +165,11 @@ 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 },
   colorHsv: { type: [Object, null], required: false },
   dotSize: { type: [String, Number], required: false, default: 10 },
+  ariaLabel: { type: String, required: false },
   hideAlpha: { type: Boolean, required: false },
   mode: { type: null, required: false, default: COLOR_MODES_NAMES.RGBA },
   modes: { type: Array, required: false, default: () => [COLOR_MODES_NAMES.RGB, COLOR_MODES_NAMES.RGBA, COLOR_MODES_NAMES.HSL, COLOR_MODES_NAMES.HSLA, COLOR_MODES_NAMES.HEX, COLOR_MODES_NAMES.HEXA] },

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

@@ -1,8 +1,13 @@
 <template>
 	<div
 			ref="resizeRef"
+			:aria-label="canvasAriaLabel"
+			:aria-valuetext="canvasAriaValueText"
 			:class="colorPickerCanvasClasses"
 			:style="colorPickerCanvasStyles"
+			role="application"
+			tabindex="0"
+			@keydown="handleKeyDown"
 			@mousedown="handleMouseDown"
 			@touchstart.passive="handleMouseDown"
 	>
@@ -10,6 +15,7 @@
 				ref="canvasRef"
 				:height="canvasHeight"
 				:width="canvasWidth"
+				aria-hidden="true"
 		/>
 		<template v-if="colorHsv">
 			<div
@@ -22,13 +28,15 @@
 </template>
 
 <script setup>
-import { useProps, useResizeObserver, useStyle } from "../../composables";
+import { useLocale, useProps, useResizeObserver, useStyle } from "../../composables";
+import { KEYBOARD_VALUES } from "../../enums";
 import { clamp, convertToUnit, getEventCoordinates, int } from "../../utils";
 import { computed, onMounted, ref, shallowRef, StyleValue, watch } from "vue";
 const props = defineProps({
   colorHsv: { type: [Object, null], required: false },
   disabled: { type: Boolean, required: false },
   dotSize: { type: [String, Number], required: false },
+  ariaLabel: { 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 },
@@ -41,6 +49,7 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:colorHsv"]);
 const { filterProps } = useProps(props);
+const { t } = useLocale();
 const isInteracting = shallowRef(false);
 const canvasRef = ref();
 const { resizeRef } = useResizeObserver((entries) => {
@@ -118,6 +127,65 @@ const updateCanvas = () => {
   ctx.fillStyle = valueGradient;
   ctx.fillRect(0, 0, canvas.width, canvas.height);
 };
+const canvasAriaLabel = computed(() => {
+  return props.ariaLabel ?? t("origam.colorPicker.canvas.ariaLabel");
+});
+const canvasAriaValueText = computed(() => {
+  const s = Math.round((props.colorHsv?.s ?? 0) * 100);
+  const v = Math.round((props.colorHsv?.v ?? 0) * 100);
+  return t("origam.colorPicker.canvas.value", s, v);
+});
+const STEP_SMALL = 0.01;
+const STEP_LARGE = 0.05;
+const handleKeyDown = (e) => {
+  if (props.disabled) return;
+  const step = e.shiftKey ? STEP_LARGE : STEP_SMALL;
+  const hsv = props.colorHsv;
+  if (!hsv) return;
+  let { h, s, v, a } = hsv;
+  let handled = false;
+  switch (e.key) {
+    case KEYBOARD_VALUES.LEFT:
+      s = clamp(s - step, 0, 1);
+      handled = true;
+      break;
+    case KEYBOARD_VALUES.RIGHT:
+      s = clamp(s + step, 0, 1);
+      handled = true;
+      break;
+    case KEYBOARD_VALUES.UP:
+      v = clamp(v + step, 0, 1);
+      handled = true;
+      break;
+    case KEYBOARD_VALUES.DOWN:
+      v = clamp(v - step, 0, 1);
+      handled = true;
+      break;
+    case KEYBOARD_VALUES.HOME:
+      s = 0;
+      handled = true;
+      break;
+    case KEYBOARD_VALUES.END:
+      s = 1;
+      handled = true;
+      break;
+    case KEYBOARD_VALUES.PAGEUP:
+      v = 1;
+      handled = true;
+      break;
+    case KEYBOARD_VALUES.PAGEDOWN:
+      v = 0;
+      handled = true;
+      break;
+  }
+  if (!handled) return;
+  e.preventDefault();
+  emits("update:colorHsv", { h, s, v, a });
+  _dotPosition.value = {
+    x: s * canvasWidth.value,
+    y: (1 - v) * canvasHeight.value
+  };
+};
 const handleMouseDown = (e) => {
   if (e.type === "mousedown") {
     e.preventDefault();
@@ -203,6 +271,12 @@ defineExpose({
 		overflow: hidden;
 		contain: content;
 		touch-action: none;
+		outline: none;
+
+		&:focus-visible {
+			outline: 2px solid var(--origam-color__border---focus);
+			outline-offset: 2px;
+		}
 
 		&__dot {
 			position: absolute;

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

@@ -143,7 +143,7 @@ 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 },
+  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 },
@@ -171,7 +171,7 @@ const props = defineProps({
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   appendInnerAvatar: { type: String, required: false },
   appendInnerIcon: { type: null, required: false },
   prependInnerAvatar: { type: String, required: false },

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

@@ -82,42 +82,42 @@
 
 								<button
 										v-for="entry in group.items"
-										:id="optionDomId(entry.command.id)"
-										:key="entry.command.id"
-										:aria-disabled="entry.command.disabled ? 'true' : 'false'"
-										:aria-selected="entry.command.id === activeCommandId ? 'true' : 'false'"
-										:class="itemClasses(entry.command)"
-										:disabled="entry.command.disabled"
+										:id="optionDomId(entry.item.id)"
+										:key="entry.item.id"
+										:aria-disabled="entry.item.disabled ? 'true' : 'false'"
+										:aria-selected="entry.item.id === activeCommandId ? 'true' : 'false'"
+										:class="itemClasses(entry.item)"
+										:disabled="entry.item.disabled"
 										role="option"
 										tabindex="-1"
 										type="button"
-										@click="handleItemClick(entry.command)"
-										@mousemove="handleItemHover(entry.command)"
+										@click="handleItemClick(entry.item)"
+										@mousemove="handleItemHover(entry.item)"
 								>
 									<slot
 											name="item"
-											v-bind="{ command: entry.command, isActive: entry.command.id === activeCommandId }"
+											v-bind="{ command: entry.item, isActive: entry.item.id === activeCommandId }"
 									>
 										<origam-icon
-												v-if="entry.command.icon"
-												:icon="entry.command.icon"
+												v-if="entry.item.icon"
+												:icon="entry.item.icon"
 												:size="18"
 												class="origam-command-palette__item-icon"
 										/>
 
 										<span class="origam-command-palette__item-text">
-											<span class="origam-command-palette__item-label">{{ entry.command.label }}</span>
+											<span class="origam-command-palette__item-label">{{ entry.item.label }}</span>
 											<span
-													v-if="entry.command.description"
+													v-if="entry.item.description"
 													class="origam-command-palette__item-description"
 											>
-												{{ entry.command.description }}
+												{{ entry.item.description }}
 											</span>
 										</span>
 
 										<origam-kbd
-												v-if="entry.command.kbd && entry.command.kbd.length > 0"
-												:combination="[...entry.command.kbd]"
+												v-if="entry.item.kbd && entry.item.kbd.length > 0"
+												:combination="[...entry.item.kbd]"
 												class="origam-command-palette__item-kbd"
 												variant="outlined"
 										/>
@@ -595,6 +595,12 @@ defineExpose({
 		}
 	}
 
+	@media (prefers-reduced-motion: reduce) {
+		.origam-command-palette__loading-icon {
+			animation: none;
+		}
+	}
+
 	.origam-command-palette--fade-enter-active,
 	.origam-command-palette--fade-leave-active {
 		transition: opacity 140ms ease;

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

@@ -168,7 +168,7 @@ const _props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
   direction: { type: null, required: false, default: DIRECTION.VERTICAL },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },

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

@@ -105,8 +105,8 @@ const props = defineProps({
   itemProps: { type: null, required: false },
   returnObject: { type: Boolean, required: false },
   valueComparator: { type: null, 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 },
   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/Counter/OrigamCounter.vue

@@ -60,7 +60,7 @@ const props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { 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

@@ -196,8 +196,8 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, 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 },
   margin: { type: [Boolean, Number, String], required: false },
   marginTop: { type: [Boolean, Number, String], required: false },
   marginLeft: { type: [Boolean, Number, String], required: false },

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

@@ -86,8 +86,8 @@ const props = defineProps({
   paddingRight: { type: [Boolean, Number, String], required: false },
   paddingBlock: { type: [Boolean, Number, String], required: false },
   paddingInline: { type: [Boolean, Number, 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 }
 });
 const { filterProps } = useProps(props);
 const { densityClasses } = useDensity(props);

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

@@ -89,8 +89,8 @@ const props = defineProps({
   paddingRight: { type: [Boolean, Number, String], required: false },
   paddingBlock: { type: [Boolean, Number, String], required: false },
   paddingInline: { type: [Boolean, Number, 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 }
 });
 const { filterProps } = useProps(props);
 const { densityClasses } = useDensity(props);

package/dist/src/components/DataTable/OrigamDataTable.vue

@@ -4,6 +4,7 @@
 			:class="dataTableClasses"
 			:style="dataTableStyles"
 			v-bind="tableProps"
+			:ariaRowcount="itemsLength"
 	>
 		<template
 				v-if="slots.top"
@@ -135,8 +136,9 @@ import {
   useSortedItems,
   useStyle
 } from "../../composables";
+import { ORIGAM_DATA_TABLE_SHOW_SELECT_KEY } from "../../consts";
 import { DENSITY, MDI_ICONS } from "../../enums";
-import { computed, Ref, ref, StyleValue, toRef, useAttrs, useSlots } from "vue";
+import { computed, provide, Ref, ref, StyleValue, toRef, useAttrs, useSlots } from "vue";
 const props = defineProps({
   hideDefaultBody: { type: Boolean, required: false },
   hideDefaultFooter: { type: Boolean, required: false, default: false },
@@ -144,6 +146,9 @@ const props = defineProps({
   search: { type: String, required: false },
   fixedHeader: { type: Boolean, required: false },
   fixedFooter: { type: Boolean, required: false },
+  caption: { type: String, required: false },
+  captionVisible: { type: Boolean, required: false },
+  ariaRowcount: { type: Number, 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 },
@@ -206,7 +211,7 @@ const props = defineProps({
   customKeySort: { type: Function, required: false },
   multiSort: { type: Boolean, required: false },
   mustSort: { type: Boolean, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   disableSort: { type: Boolean, required: false },
@@ -240,7 +245,7 @@ const props = defineProps({
   alignXl: { type: null, required: false },
   alignXxl: { type: null, required: false }
 });
-defineEmits(["update:modelValue", "update:page", "update:itemsPerPage", "update:sortBy", "update:options", "update:groupBy", "update:expanded", "update:currentItems"]);
+defineEmits(["update:page", "update:itemsPerPage", "update:sortBy", "update:options", "update:groupBy", "update:expanded", "update:currentItems", "update:modelValue"]);
 const { filterProps } = useProps(props);
 const attrs = useAttrs();
 const origamTableRef = ref();
@@ -297,6 +302,7 @@ const {
   currentPage: paginatedItemsWithoutGroups
 });
 const { isExpanded, toggleExpand } = provideExpanded(props);
+provide(ORIGAM_DATA_TABLE_SHOW_SELECT_KEY, toRef(props, "showSelect"));
 useOptions({
   page,
   itemsPerPage,

package/dist/src/components/DataTable/OrigamDataTableColumnCell.vue

@@ -2,6 +2,7 @@
 	<component
 			:is="tag"
 			:class="dataTableColumnClasses"
+			:scope="tag === 'th' ? 'col' : undefined"
 			:style="dataTableColumnStyles"
 	>
 		<slot name="default"/>