origam 2.16.0 → 2.17.1

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

@@ -1,5 +1,6 @@
 <template>
 	<dl
+			:id="id"
 			v-contrast
 			:class="dataListClasses"
 			:style="dataListStyles"
@@ -172,23 +173,22 @@
 
 <script lang="ts" setup>
 import { computed, isVNode, StyleValue, toRef, useSlots } from "vue";
-import { OrigamDataText, OrigamDataTitle } from "../../components";
-import {
-  useBorder,
-  useBothColor,
-  useDensity,
-  useElevation,
-  useLoader,
-  useMargin,
-  usePadding,
-  useProps,
-  useRounded,
-  useStyle,
-  useTypography
-} from "../../composables";
-import { vContrast } from "../../directives";
-import { isDataListKVItemValueComponent } from "../../utils";
-import { isEmpty, toKebabCase } from "../../utils";
+import OrigamDataText from "./OrigamDataText.vue";
+import OrigamDataTitle from "./OrigamDataTitle.vue";
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useElevation } from "../../composables/Commons/elevation.composable";
+import { useLoader } from "../../composables/Commons/loader.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
+import vContrast from "../../directives/Contrast/contrast.directive";
+import { isDataListKVItemValueComponent } from "../../utils/DataList/data-list-kv-item-value-component.util";
+import { isEmpty, toKebabCase } from "../../utils/Commons/commons.util";
 const props = defineProps({
   mode: { type: null, required: false, default: "avatar" },
   items: { type: [Array, Object], required: false },
@@ -235,12 +235,12 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, 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 }
 });
+defineEmits([]);
 defineSlots();
 const { filterProps } = useProps(props);
 const slots = useSlots();
@@ -285,7 +285,7 @@ function getComponentProps(v) {
 function getComponentChildren(v) {
   return v.children;
 }
-const { colorClasses, colorStyles } = useBothColor(toRef(props.bgColor), toRef(props.color));
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const dataListStyles = computed(() => {
   return [
     borderStyles.value,
@@ -313,7 +313,7 @@ const dataListClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(dataListStyles);
+const { id, css, load, isLoaded, unload } = useStyle(dataListStyles, () => props.id);
 defineExpose({
   filterProps,
   css,

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

@@ -1,5 +1,6 @@
 <template>
 	<dd
+			:id="id"
 			v-contrast
 			:class="dataTextClasses"
 			:style="dataTextStyles"
@@ -8,7 +9,10 @@
 		    v-if="hasPrepend"
 		    key="prepend"
 		    class="origam-data-text__prepend"
+		    :role="isPrependClickable ? 'button' : undefined"
+		    :tabindex="isPrependClickable ? 0 : undefined"
 		    @click="handleClickPrepend"
+		    @keydown="handleKeydownPrepend"
     >
       <slot name="prepend">
         <origam-avatar
@@ -39,7 +43,10 @@
 				v-if="hasAppend"
 				key="append"
 				class="origam-data-text__append"
+				:role="isAppendClickable ? 'button' : undefined"
+				:tabindex="isAppendClickable ? 0 : undefined"
 				@click="handleClickAppend"
+				@keydown="handleKeydownAppend"
 		>
       <slot name="append">
         <origam-avatar
@@ -60,14 +67,19 @@
 </template>
 
 <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";
+import OrigamAvatar from "../Avatar/OrigamAvatar.vue";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import { useAdjacent } from "../../composables/Commons/adjacent.composable";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import vContrast from "../../directives/Contrast/contrast.directive";
+import { computed, 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 },
@@ -93,6 +105,7 @@ const props = defineProps({
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
+defineEmits(["click:append", "click:prepend"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const { densityClasses } = useDensity(props);
@@ -101,23 +114,14 @@ const { marginClasses, marginStyles } = useMargin(props);
 const {
   onClickPrepend: handleClickPrepend,
   onClickAppend: handleClickAppend,
+  onKeydownPrepend: handleKeydownPrepend,
+  onKeydownAppend: handleKeydownAppend,
+  isPrependClickable,
+  isAppendClickable,
   hasAppend,
   hasPrepend
 } = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));
-const isHover = shallowRef(false);
-const hoverColor = computed(() => {
-  return props.hoverColor || props.color;
-});
-const color = computed(() => {
-  return isHover.value ? hoverColor.value : props.color;
-});
-const hoverBgColor = computed(() => {
-  return props.hoverBgColor || props.color;
-});
-const bgColor = computed(() => {
-  return isHover.value ? hoverBgColor.value : props.bgColor;
-});
-const { colorClasses, colorStyles } = useBothColor(bgColor, color);
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const dataTextStyles = computed(() => {
   return [
     paddingStyles.value,
@@ -136,7 +140,7 @@ const dataTextClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(dataTextStyles);
+const { id, css, load, isLoaded, unload } = useStyle(dataTextStyles, () => props.id);
 defineExpose({
   filterProps,
   css,

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

@@ -1,5 +1,6 @@
 <template>
 	<dt
+			:id="id"
 			v-contrast
 			:class="dataTitleClasses"
 			:style="dataTitleStyles"
@@ -8,7 +9,10 @@
 		    v-if="hasPrepend"
 		    key="prepend"
 		    class="origam-data-title__prepend"
+		    :role="isPrependClickable ? 'button' : undefined"
+		    :tabindex="isPrependClickable ? 0 : undefined"
 		    @click="handleClickPrepend"
+		    @keydown="handleKeydownPrepend"
     >
       <slot name="prepend">
         <origam-avatar
@@ -42,7 +46,10 @@
 				v-if="hasAppend"
 				key="append"
 				class="origam-data-title__append"
+				:role="isAppendClickable ? 'button' : undefined"
+				:tabindex="isAppendClickable ? 0 : undefined"
 				@click="handleClickAppend"
+				@keydown="handleKeydownAppend"
 		>
       <slot name="append">
        <origam-avatar
@@ -63,14 +70,19 @@
 </template>
 
 <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";
+import OrigamAvatar from "../Avatar/OrigamAvatar.vue";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import { useAdjacent } from "../../composables/Commons/adjacent.composable";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import vContrast from "../../directives/Contrast/contrast.directive";
+import { computed, 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 },
@@ -96,6 +108,7 @@ const props = defineProps({
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
+defineEmits(["click:append", "click:prepend"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const { densityClasses } = useDensity(props);
@@ -104,23 +117,14 @@ const { marginClasses, marginStyles } = useMargin(props);
 const {
   onClickPrepend: handleClickPrepend,
   onClickAppend: handleClickAppend,
+  onKeydownPrepend: handleKeydownPrepend,
+  onKeydownAppend: handleKeydownAppend,
+  isPrependClickable,
+  isAppendClickable,
   hasAppend,
   hasPrepend
 } = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));
-const isHover = shallowRef(false);
-const hoverColor = computed(() => {
-  return props.hoverColor || props.color;
-});
-const color = computed(() => {
-  return isHover.value ? hoverColor.value : props.color;
-});
-const hoverBgColor = computed(() => {
-  return props.hoverBgColor || props.color;
-});
-const bgColor = computed(() => {
-  return isHover.value ? hoverBgColor.value : props.bgColor;
-});
-const { colorClasses, colorStyles } = useBothColor(bgColor, color);
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const dataTitleStyles = computed(() => {
   return [
     paddingStyles.value,
@@ -139,7 +143,7 @@ const dataTitleClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(dataTitleStyles);
+const { id, css, load, isLoaded, unload } = useStyle(dataTitleStyles, () => props.id);
 defineExpose({
   filterProps,
   css,

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

@@ -1,5 +1,6 @@
 <template>
 	<origam-table
+			:id="id"
 			ref="origamTableRef"
 			:class="dataTableClasses"
 			:style="dataTableStyles"
@@ -55,6 +56,17 @@
 						>
 							<slot name="header.loader"/>
 						</template>
+
+						<template
+								v-for="name in headerColumnSlotNames"
+								:key="name"
+								#[name]="columnProps"
+						>
+							<slot
+									:name="name"
+									v-bind="columnProps"
+							/>
+						</template>
 					</origam-data-table-headers>
 					</thead>
 				</template>
@@ -78,7 +90,19 @@
 								ref="origamDataTableRowsRef"
 								:items="paginatedItems"
 								v-bind="dataTableRowsBindProps"
+								@expand="emit('expand', $event)"
+								@select="emit('select', $event)"
 						>
+							<template
+									v-for="name in rowsSlotNames"
+									:key="name"
+									#[name]="rowsProps"
+							>
+								<slot
+										:name="name"
+										v-bind="rowsProps"
+								/>
+							</template>
 						</origam-data-table-rows>
 					</slot>
 					<slot
@@ -107,34 +131,32 @@
 </template>
 
 <script lang="ts" setup>
+import OrigamDataTableFooter from "./OrigamDataTableFooter.vue";
+import OrigamDataTableHeaders from "./OrigamDataTableHeaders.vue";
+import OrigamDataTableRows from "./OrigamDataTableRows.vue";
+import OrigamDivider from "../Divider/OrigamDivider.vue";
+import OrigamTable from "../Table/OrigamTable.vue";
+import { createGroupBy, provideGroupBy } from "../../composables/DataTable/group.composable";
+import { createHeaders } from "../../composables/DataTable/headers.composable";
+import { createPagination, providePagination } from "../../composables/DataTable/pagination.composable";
+import { createSort, provideSort } from "../../composables/DataTable/sort.composable";
+import { provideExpanded } from "../../composables/DataTable/expand.composable";
+import { provideSelection } from "../../composables/DataTable/select.composable";
+import { useDataTableItems } from "../../composables/DataTable/items.composable";
+import { useFilter } from "../../composables/Commons/filters.composable";
+import { useGroupedItems } from "../../composables/DataTable/groupedItems.composable";
+import { useOptions } from "../../composables/DataTable/options.composable";
+import { usePaginatedItems } from "../../composables/DataTable/paginatedItems.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useSortedItems } from "../../composables/DataTable/sortedItems.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { ORIGAM_DATA_TABLE_SHOW_SELECT_KEY } from "../../consts/DataTable/data-table.const";
 import {
-  OrigamDataTableFooter,
-  OrigamDataTableHeaders,
-  OrigamDataTableRows,
-  OrigamDivider,
-  OrigamTable
-} from "../../components";
-import {
-  createGroupBy,
-  createHeaders,
-  createPagination,
-  createSort,
-  provideExpanded,
-  provideGroupBy,
-  providePagination,
-  provideSelection,
-  provideSort,
-  useDataTableItems,
-  useFilter,
-  useGroupedItems,
-  useOptions,
-  usePaginatedItems,
-  useProps,
-  useSortedItems,
-  useStyle
-} from "../../composables";
-import { ORIGAM_DATA_TABLE_SHOW_SELECT_KEY } from "../../consts";
-import { DENSITY, MDI_ICONS } from "../../enums";
+  pickDataTableHeaderColumnSlotNames,
+  pickDataTableRowsSlotNames
+} from "../../utils/DataTable/slot-name.util";
+import { DENSITY } from "../../enums/Commons/density.enum";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
 import { computed, provide, Ref, ref, StyleValue, toRef, useAttrs, useSlots } from "vue";
 const props = defineProps({
   hideDefaultBody: { type: Boolean, required: false },
@@ -183,6 +205,7 @@ const props = defineProps({
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
   hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, required: false },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
   maxWidth: { type: [Number, String], required: false },
@@ -191,11 +214,8 @@ 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: null, required: false },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
-  lineHeight: { type: null, required: false },
-  letterSpacing: { type: null, required: false },
   item: { type: Object, required: true },
   cellProps: { type: [Object, Function], required: false },
   mobileBreakpoint: { type: null, required: false, default: "xs" },
@@ -251,7 +271,7 @@ const props = defineProps({
   alignXl: { type: null, required: false },
   alignXxl: { type: null, required: false }
 });
-defineEmits(["update:page", "update:itemsPerPage", "update:sortBy", "update:options", "update:groupBy", "update:expanded", "update:currentItems", "update:modelValue"]);
+const emit = defineEmits(["update:page", "update:itemsPerPage", "update:sortBy", "update:options", "update:expanded", "update:currentItems", "expand", "select", "update:modelValue"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const attrs = useAttrs();
@@ -357,6 +377,12 @@ const dataTableRowsBindProps = computed(() => {
 const dataTableFooterProps = computed(() => {
   return origamDataTableFooterRef.value?.filterProps(props, ["class", "style", "id"]);
 });
+const rowsSlotNames = computed(() => {
+  return pickDataTableRowsSlotNames(Object.keys(slots));
+});
+const headerColumnSlotNames = computed(() => {
+  return pickDataTableHeaderColumnSlotNames(Object.keys(slots));
+});
 const dataTableStyles = computed(() => {
   return [
     props.style
@@ -372,7 +398,7 @@ const dataTableClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(dataTableStyles);
+const { id, css, load, isLoaded, unload } = useStyle(dataTableStyles, () => props.id);
 defineExpose({
   filterProps,
   css,

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

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			:class="dataTableColumnClasses"
 			:scope="tag === 'th' ? 'col' : undefined"
 			:style="dataTableColumnStyles"
@@ -10,14 +11,12 @@
 </template>
 
 <script lang="ts" setup>
-import {
-  useDimension,
-  usePadding,
-  useProps,
-  useStyle
-} from "../../composables";
-import { ALIGN } from "../../enums";
-import { convertToUnit } from "../../utils";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { ALIGN } from "../../enums/Commons/align.enum";
+import { convertToUnit } from "../../utils/Commons/commons.util";
 import { computed, StyleValue } from "vue";
 const props = defineProps({
   align: { type: null, required: false, default: ALIGN.START },
@@ -43,6 +42,7 @@ const props = defineProps({
   paddingBlock: { type: [Boolean, Number, String], required: false },
   paddingInline: { type: [Boolean, Number, String], required: false }
 });
+defineEmits([]);
 defineSlots();
 const { filterProps } = useProps(props);
 const { dimensionStyles } = useDimension(props);
@@ -70,7 +70,7 @@ const dataTableColumnStyles = computed(() => {
     props.style
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(dataTableColumnStyles);
+const { id, css, load, isLoaded, unload } = useStyle(dataTableColumnStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -115,13 +115,13 @@ defineExpose({
 
 		&--fixed {
 			position: sticky;
-			background: var(--origam-data-table-cell--fixed---background, var(--origam-color__surface---raised));
+			background: var(--origam-data-table-cell--fixed---background, var(--origam-data-table__cell---fixed-background-color, var(--origam-color__surface---raised)));
 			left: 0;
-			z-index: var(--origam-data-table-cell--fixed---z-index, 1)
+			z-index: var(--origam-data-table-cell--fixed---z-index, var(--origam-data-table__cell---fixed-z-index, 1))
 		}
 
 		&--last-fixed {
-			border-right: var(--origam-data-table-cell--last-fixed---border-right-width, 1px) solid var(--origam-data-table-cell--last-fixed---border-right-color, var(--origam-color__border---subtle));
+			border-right: var(--origam-data-table-cell--last-fixed---border-right-width, var(--origam-data-table__cell---last-fixed-border-right-width, 1px)) var(--origam-data-table__cell---last-fixed-border-right-style, solid) var(--origam-data-table-cell--last-fixed---border-right-color, var(--origam-data-table__cell---last-fixed-border-right-color, var(--origam-color__border---subtle)));
 		}
 	}
 </style>

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

@@ -1,5 +1,6 @@
 <template>
 	<div
+			:id="id"
 			:class="dataTableFooterClasses"
 			:style="dataTableFooterStyles"
 	>
@@ -7,9 +8,10 @@
 			<slot name="prepend"/>
 
 			<div class="origam-data-table-footer__items-per-page">
-				<span>{{ t(itemsPerPageText) }}</span>
+				<span :id="itemsPerPageLabelId">{{ t(itemsPerPageText) }}</span>
 
 				<origam-select
+						:aria-labelledby="itemsPerPageLabelId"
 						:density="DENSITY.COMPACT"
 						:items="itemsPerPageOptions"
 						:model-value="itemsPerPage"
@@ -41,9 +43,14 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamPagination, OrigamRow, OrigamSelect } from "../../components";
-import { useLocale, usePagination, useProps, useStyle } from "../../composables";
-import { DENSITY } from "../../enums";
+import OrigamPagination from "../Pagination/OrigamPagination.vue";
+import OrigamRow from "../Grids/OrigamRow.vue";
+import OrigamSelect from "../Select/OrigamSelect.vue";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { usePagination } from "../../composables/DataTable/pagination.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { DENSITY } from "../../enums/Commons/density.enum";
 import { computed, ref, StyleValue } from "vue";
 const props = defineProps({
   prevIcon: { type: null, required: false },
@@ -82,6 +89,7 @@ const props = defineProps({
   alignXl: { type: null, required: false },
   alignXxl: { type: null, required: false }
 });
+defineEmits([]);
 defineSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
@@ -114,7 +122,13 @@ const handleUpdateItemsPerPage = (v) => {
   setItemsPerPage(Number(v));
 };
 const paginationProps = computed(() => {
-  return origamPaginationRef.value?.filterProps(props, ["class", "style", "id", "totalVisible", "modelValue", "length", "rounded", "showFirstLastPage", "density"]);
+  return {
+    ...origamPaginationRef.value?.filterProps(props, ["class", "style", "id", "totalVisible", "modelValue", "length", "rounded", "showFirstLastPage", "density"]),
+    firstAriaLabel: t(props.firstPageLabel),
+    previousAriaLabel: t(props.prevPageLabel),
+    nextAriaLabel: t(props.nextPageLabel),
+    lastAriaLabel: t(props.lastPageLabel)
+  };
 });
 const dataTableFooterClasses = computed(() => {
   return [
@@ -127,7 +141,10 @@ const dataTableFooterStyles = computed(() => {
     props.style
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(dataTableFooterStyles);
+const { id, css, load, isLoaded, unload } = useStyle(dataTableFooterStyles, () => props.id);
+const itemsPerPageLabelId = computed(() => {
+  return `${id.value}-items-per-page-label`;
+});
 defineExpose({
   filterProps,
   css,
@@ -140,37 +157,37 @@ defineExpose({
 
 <style lang="scss" scoped>
 	.origam-data-table-footer {
-		align-items: var(--origam-data-table-footer---align-items, center);
-		background-color: var(--origam-data-table-footer---background-color, var(--origam-color__surface---default));
-		color: var(--origam-data-table-footer---color, var(--origam-color__text---primary));
-		display: var(--origam-data-table-footer---display, flex);
-		flex-wrap: var(--origam-data-table-footer---flex-wrap, wrap);
-		justify-content: var(--origam-data-table-footer---justify-content, flex-end);
-		padding-block: var(--origam-data-table-footer---padding-block, var(--origam-space---2, 8px));
-		padding-inline: var(--origam-data-table-footer---padding-inline, var(--origam-space---1, 4px));
+		align-items: var(--origam-data-table-footer---align-items, var(--origam-data-table__footer---align-items, center));
+		background-color: var(--origam-data-table-footer---background-color, var(--origam-data-table__footer---background-color, var(--origam-color__surface---default)));
+		color: var(--origam-data-table-footer---color, var(--origam-data-table__footer---color, var(--origam-color__text---primary)));
+		display: var(--origam-data-table-footer---display, var(--origam-data-table__footer---display, flex));
+		flex-wrap: var(--origam-data-table-footer---flex-wrap, var(--origam-data-table__footer---flex-wrap, wrap));
+		justify-content: var(--origam-data-table-footer---justify-content, var(--origam-data-table__footer---justify-content, flex-end));
+		padding-block: var(--origam-data-table-footer---padding-block, var(--origam-data-table__footer---padding-block, var(--origam-space---2, 8px)));
+		padding-inline: var(--origam-data-table-footer---padding-inline, var(--origam-data-table__footer---padding-inline, var(--origam-space---1, 4px)));
 
 		&__items-per-page {
 			align-items: center;
 			display: flex;
 			justify-content: center;
-			gap: var(--origam-data-table-footer__items-per-page---gap, var(--origam-space---2, 8px));
+			gap: var(--origam-data-table-footer__items-per-page---gap, var(--origam-data-table__footer---items-per-page-gap, var(--origam-space---2, 8px)));
 
 			> span {
-				padding-inline-end: var(--origam-data-table-footer__items-per-page---padding-inline-end, var(--origam-space---2, 8px));
+				padding-inline-end: var(--origam-data-table-footer__items-per-page---padding-inline-end, var(--origam-data-table__footer---items-per-page-padding-inline-end, var(--origam-space---2, 8px)));
 			}
 		}
 
 		&__info {
 			display: flex;
-			justify-content: var(--origam-data-table-footer__info---justify-content, flex-end);
-			min-width: var(--origam-data-table-footer__info---min-width, 116px);
-			padding-inline: var(--origam-data-table-footer__info---padding-inline, var(--origam-space---4, 16px));
+			justify-content: var(--origam-data-table-footer__info---justify-content, var(--origam-data-table__footer--info---justify-content, flex-end));
+			min-width: var(--origam-data-table-footer__info---min-width, var(--origam-data-table__footer--info---min-width, 116px));
+			padding-inline: var(--origam-data-table-footer__info---padding-inline, var(--origam-data-table__footer--info---padding-inline, var(--origam-space---4, 16px)));
 		}
 
 		&__pagination {
 			align-items: center;
 			display: flex;
-			margin-inline-start: var(--origam-data-table-footer__pagination---margin-inline-start, var(--origam-space---4, 16px));
+			margin-inline-start: var(--origam-data-table-footer__pagination---margin-inline-start, var(--origam-data-table__footer---pagination-margin-inline-start, var(--origam-space---4, 16px)));
 		}
 	}
 </style>