origam 2.3.0 → 2.6.1

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, 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,10 +168,12 @@ 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 },
-  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 },
@@ -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 }}
@@ -82,42 +84,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"
 										/>
@@ -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",
@@ -595,6 +605,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

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

@@ -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";
@@ -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 },
@@ -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";
@@ -60,7 +60,8 @@ 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 },
+  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({
@@ -196,8 +199,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 },
@@ -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
   ];
 });

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

@@ -1,5 +1,6 @@
 <template>
 	<dd
+			v-contrast
 			:class="dataTextClasses"
 			:style="dataTextStyles"
 	>
@@ -58,12 +59,15 @@
 	</dd>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamAvatar, OrigamIcon } from "../../components";
 import { useAdjacent, useBothColor, useDensity, useMargin, usePadding, useProps, useStyle } from "../../composables";
+import { vContrast } from "../../directives";
 import { computed, shallowRef, StyleValue, toRef } from "vue";
 const props = defineProps({
   text: { type: [String, Number], required: true },
+  hoverColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  hoverBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -86,8 +90,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

@@ -1,5 +1,6 @@
 <template>
 	<dt
+			v-contrast
 			:class="dataTitleClasses"
 			:style="dataTitleStyles"
 	>
@@ -61,12 +62,15 @@
 	</dt>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamAvatar, OrigamIcon } from "../../components";
 import { useAdjacent, useBothColor, useDensity, useMargin, usePadding, useProps, useStyle } from "../../composables";
+import { vContrast } from "../../directives";
 import { computed, shallowRef, StyleValue, toRef } from "vue";
 const props = defineProps({
   text: { type: [String, Number], required: true },
+  hoverColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  hoverBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -89,8 +93,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"
+			:aria-rowcount="itemsLength"
 	>
 		<template
 				v-if="slots.top"
@@ -79,7 +80,7 @@
 						<origam-data-table-rows
 								ref="origamDataTableRowsRef"
 								:items="paginatedItems"
-								v-bind="{ ...attrs, ...dataTableRowsProps }"
+								v-bind="dataTableRowsBindProps"
 						>
 						</origam-data-table-rows>
 					</slot>
@@ -108,7 +109,7 @@
 	</origam-table>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   OrigamDataTableFooter,
   OrigamDataTableHeaders,
@@ -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 },
@@ -185,8 +190,13 @@ const props = defineProps({
   width: { type: [Number, String], required: false },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   tag: { type: String, required: false, default: "div" },
+  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 },
   item: { type: Object, required: true },
-  cellProps: { type: null, required: false },
+  cellProps: { type: [Object, Function], required: false },
   mobileBreakpoint: { type: null, required: false, default: "xs" },
   expandOnClick: { type: Boolean, required: false },
   showExpand: { type: Boolean, required: false },
@@ -196,7 +206,7 @@ const props = defineProps({
   items: { type: Array, required: false },
   itemValue: { type: null, required: false },
   itemSelectable: { type: null, required: false },
-  rowProps: { type: null, required: false },
+  rowProps: { type: [Object, Function], required: false },
   returnObject: { type: Boolean, required: false },
   showSelect: { type: Boolean, required: false },
   selectStrategy: { type: null, required: false },
@@ -206,7 +216,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 },
@@ -218,8 +228,8 @@ const props = defineProps({
   itemsPerPage: { type: [Number, String], required: false, default: 10 },
   customFilter: { type: Function, required: false },
   customKeyFilter: { type: Object, required: false },
-  filterKeys: { type: [String, Array], required: true },
-  filterMode: { type: null, required: true },
+  filterKeys: { type: [String, Array], required: false },
+  filterMode: { type: null, required: false },
   noFilter: { type: Boolean, required: false },
   prevIcon: { type: null, required: false },
   nextIcon: { type: null, required: false },
@@ -240,7 +250,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 +307,7 @@ const {
   currentPage: paginatedItemsWithoutGroups
 });
 const { isExpanded, toggleExpand } = provideExpanded(props);
+provide(ORIGAM_DATA_TABLE_SHOW_SELECT_KEY, toRef(props, "showSelect"));
 useOptions({
   page,
   itemsPerPage,
@@ -338,6 +349,9 @@ const dataTableHeadersProps = computed(() => {
 const dataTableRowsProps = computed(() => {
   return origamDataTableRowsRef.value?.filterProps(props, ["class", "style", "id", "items"]);
 });
+const dataTableRowsBindProps = computed(() => {
+  return { ...attrs, ...dataTableRowsProps.value };
+});
 const dataTableFooterProps = computed(() => {
   return origamDataTableFooterRef.value?.filterProps(props, ["class", "style", "id"]);
 });

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

@@ -2,13 +2,14 @@
 	<component
 			:is="tag"
 			:class="dataTableColumnClasses"
+			:scope="tag === 'th' ? 'col' : undefined"
 			:style="dataTableColumnStyles"
 	>
 		<slot name="default"/>
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   useDimension,
   usePadding,

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

@@ -40,7 +40,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamPagination, OrigamRow, OrigamSelect } from "../../components";
 import { useLocale, usePagination, useProps, useStyle } from "../../composables";
 import { DENSITY } from "../../enums";
@@ -67,7 +67,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 },
   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/DataTable/OrigamDataTableGroupHeaderRow.vue

@@ -47,7 +47,7 @@
 	</tr>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamBtn, OrigamCheckboxBtn, OrigamDataTableColumnCell } from "../../components";
 import { useGroupBy, useHeaders, useProps, useSelection, useStyle } from "../../composables";
 import { MDI_ICONS } from "../../enums";
@@ -65,7 +65,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 },
   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/DataTable/OrigamDataTableHeaderCell.vue

@@ -1,6 +1,7 @@
 <template>
 	<origam-data-table-column-cell
 			:align="column.align"
+			:aria-sort="column.sortable && !disableSort ? (isSorted(column) ? (sortBy.find((s: IDataTableSortItem) => s.key === column.key)?.order === 'desc' ? 'descending' : 'ascending') : 'none') : undefined"
 			:class="dataTableHeaderCellClasses"
 			:colspan="column.colspan"
 			:fixed="column.fixed"
@@ -56,7 +57,7 @@
 	</origam-data-table-column-cell>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamCheckboxBtn, OrigamDataTableColumnCell, OrigamIcon } from "../../components";
 import {
   useBothColor,
@@ -82,7 +83,8 @@ const props = defineProps({
   multiSort: { type: Boolean, required: false },
   sortAscIcon: { type: null, required: false },
   sortDescIcon: { type: null, required: false },
-  color: { 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 { toggleSort, sortBy, isSorted } = useSort();

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

@@ -32,6 +32,7 @@
 		<tr class="origam-data-table-headers origam-data-table-headers--progress">
 			<th
 					:colspan="columns.length"
+					scope="col"
 					class="origam-data-table-headers__progress-cell"
 			>
 				<slot name="loader">
@@ -50,7 +51,7 @@
 	</template>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamDataTableHeadersCell, OrigamDataTableHeadersCellMobile, OrigamProgress } from "../../components";
 import {
   useDisplay,
@@ -68,7 +69,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 },
   mobileBreakpoint: { type: null, required: false },
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },